/* Agent onboarding - first-run "Create your Agent" flow.
   Styles the overlay rendered by js/agent-onboarding.js (`.aob-*`), which mounts
   a full-screen `.aob` root on document.body over /train-agent the first time a
   trainer has an empty playbook. Spec: docs/Onboarding - Create your Agent - Spec.
   Dark theme only (spec); mobile-first (the filming target). Scoped under .aob so
   nothing here touches the feed page CSS. Fonts use the app tokens
   (var(--font)/var(--mono)); colours follow the spec palette. */

.aob{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:#0a0b11;
  background-image:radial-gradient(520px 420px at 50% -6%, rgba(139,108,255,.20), transparent 62%);
  color:#f2f3f8;
  font-family:var(--font),'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:contain;
}
.aob *{ box-sizing:border-box; }
.aob .mono{ font-family:var(--mono),'JetBrains Mono',ui-monospace,monospace; }

/* ── Card (single centred column; bordered card on desktop) ───── */
.aob-card{
  position:relative; width:100%; height:100%;
  display:grid; grid-template-rows:auto 1fr auto; background:transparent;
}
@media (min-width:861px){
  .aob-card{
    width:600px; max-width:calc(100vw - 40px);
    height:auto; max-height:calc(100vh - 48px); min-height:560px;
    border-radius:24px; border:1px solid #23223a; overflow:hidden;
    background:linear-gradient(180deg,#0e0f1a,#0a0b12);
    box-shadow:0 40px 120px -40px rgba(0,0,0,.8);
  }
}

/* ── Header: back + progress dots + step tag ──────────────────── */
.aob-head{ display:flex; align-items:center; gap:12px; padding:16px 18px 6px; }
@media (min-width:861px){ .aob-head{ padding:24px 28px 6px; } }
/* Native app: the overlay covers the status bar / notch (viewport-fit=cover),
   so pad the header below it like the app's other native pages do. */
html.native-app .aob-head{ padding-top:calc(env(safe-area-inset-top, 0px) + 16px); }
.aob-back{
  width:34px; height:34px; flex:0 0 auto; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#14151d; border:1px solid #23223a; color:#c7c9d6; cursor:pointer; transition:background .15s;
}
.aob-back:hover{ background:#1b1c27; }
.aob-back.gone{ visibility:hidden; }
.aob-dots{ display:flex; gap:6px; flex:1 1 auto; }
.aob-dot{ height:4px; flex:1 1 auto; border-radius:999px; background:#20202e; transition:background .35s; }
.aob-dot.on{ background:linear-gradient(90deg,#6A3DF0,#c9b6ff); }
.aob-tag{ flex:0 0 auto; font-family:var(--mono),'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px; color:#8a7ad6; white-space:nowrap; }

/* ── Scroll body ──────────────────────────────────────────────── */
.aob-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 18px 14px; animation:aob-rise .4s ease both; }
@media (min-width:861px){ .aob-body{ padding:12px 28px; } }
.aob-body::-webkit-scrollbar{ width:8px; }
.aob-body::-webkit-scrollbar-thumb{ background:#23223a; border-radius:8px; }
.aob-h{ font-size:24px; font-weight:700; line-height:1.15; margin:8px 0 6px; }
@media (min-width:861px){ .aob-h{ font-size:28px; } }
.aob-sub{ font-size:14px; color:#9396a4; line-height:1.5; margin:0 0 16px; }
.aob-sub em{ color:#c9b6ff; font-style:normal; font-weight:600; }
.aob-welcome{ text-align:center; }

/* ── Live generative-core avatar ──────────────────────────────── */
.aob-av{
  --core-a:#6a5aa0; --core-b:#2f2650; --core-c:#181430;
  position:relative; width:82px; height:82px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:26px; letter-spacing:.5px; color:#fff;
  background:radial-gradient(circle at 34% 30%, var(--core-a), var(--core-b) 56%, var(--core-c));
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 14px 44px -12px var(--core-a);
  animation:aob-glow 3.6s ease-in-out infinite; transition:background .5s, box-shadow .5s;
}
.aob-welcome .aob-av{ width:96px; height:96px; font-size:30px; margin:6px auto 18px; }
.aob-av .aob-spark{ color:#e9e0ff; opacity:.92; }
.aob-av.is-brand{ overflow:hidden; }
.aob-brand-avatar{
  position:absolute; left:50%; top:-6%; width:142%; max-width:none; height:auto;
  transform:translateX(-50%); pointer-events:none;
}
.aob-av.forming::before{ content:""; position:absolute; inset:-11px; border-radius:50%; border:1.5px dashed rgba(201,182,255,.42); animation:aob-orbit 16s linear infinite; }
.aob-av.reveal{ width:120px; height:120px; font-size:38px; display:flex; margin:2px auto 14px; animation:none; }
@media (min-width:861px){ .aob-av.reveal{ width:150px; height:150px; font-size:48px; } }
.aob-av.reveal::before{
  content:""; position:absolute; inset:-10px; border-radius:50%; padding:3px;
  background:conic-gradient(from 0deg, var(--core-a), #c9b6ff, #6A3DF0, var(--core-a));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:aob-orbit 9s linear infinite;
}
.aob-av.reveal::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--core-a); animation:aob-burst 1.7s ease-out .15s 2; }

/* name step: avatar block + "{name} · forming" caption */
.aob-bav{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:4px 0 16px; }
.aob-name-lbl{ font-size:13px; color:#9396a4; text-align:center; }
.aob-name-lbl b{ color:#f2f3f8; font-weight:600; }
.aob-name-lbl .mono{ color:#74778a; font-size:11px; }

/* ── Welcome benefits ─────────────────────────────────────────── */
.aob-benes{ display:grid; gap:9px; margin-top:8px; text-align:left; }
.aob-bene{ display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:13px; background:#0d0e15; border:1px solid #1b1c27; }
.aob-bene svg{ flex:0 0 auto; color:#c9b6ff; }
.aob-bene b{ font-weight:600; font-size:13.5px; color:#e9eaf1; line-height:1.35; }

/* ── Name input + hint chips ──────────────────────────────────── */
.aob-input{
  width:100%; padding:14px 15px; border-radius:14px;
  background:#0d0e15; border:1px solid #2b2740; color:#f2f3f8;
  font:600 16px/1 var(--font),'Space Grotesk',sans-serif; outline:none; transition:border-color .15s;
}
.aob-input:focus{ border-color:#9B72FF; }
.aob-input::placeholder{ color:#595c6a; font-weight:400; }
.aob-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.aob-chip{
  padding:8px 13px; border-radius:999px; cursor:pointer;
  background:#14151d; border:1px solid #23223a; color:#c7c9d6;
  font-size:12.5px; font-weight:500; transition:border-color .15s, color .15s;
}
.aob-chip:hover{ border-color:#3a3560; color:#e9eaf1; }

/* ── Option cards (style / risk / first-lesson) ───────────────── */
.aob-opts{ display:grid; gap:10px; }
.aob-opts.grid2{ grid-template-columns:1fr 1fr; }
@media (max-width:400px){ .aob-opts.grid2{ grid-template-columns:1fr; } }
.aob-opt{
  --acc:#c9b6ff; position:relative; display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:14px; cursor:pointer; text-align:left;
  background:#0d0e15; border:1px solid #1b1c27; color:#e9eaf1; transition:border-color .15s, background .15s;
}
.aob-opt:hover{ border-color:#2b2740; }
.aob-opt.on{ border-color:var(--acc); background:#120f22; }
.aob-opt .oic{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#14151d; color:var(--acc); }
.aob-opt.on .oic{ background:color-mix(in srgb, var(--acc) 18%, #14151d); }
.aob-opt .otx{ flex:1 1 auto; min-width:0; }
.aob-opt .otx b{ display:block; font-size:15px; font-weight:600; }
.aob-opt .otx span{ display:block; font-size:12.5px; color:#9396a4; line-height:1.4; margin-top:2px; }
.aob-opt .otx span.mono{ color:#c9b6ff; }
.aob-opt .omark{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; margin-left:auto;
  border:1.5px solid #2b2740; display:flex; align-items:center; justify-content:center;
  color:transparent; transition:background .15s, border-color .15s;
}
.aob-opt.on .omark{ background:var(--acc); border-color:var(--acc); color:#0a0b11; }

/* ── Preferred markets ────────────────────────────────────────── */
.aob-sec-k{ font-family:var(--mono),'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px; color:#74778a; margin:18px 0 9px; }
.aob-mk{ display:flex; flex-wrap:wrap; gap:8px; }
.aob-mk button{
  padding:9px 14px; border-radius:999px; cursor:pointer;
  background:#0d0e15; border:1px solid #23223a; color:#c7c9d6;
  font-size:13px; font-weight:500; transition:border-color .15s, color .15s, background .15s;
}
.aob-mk button.on{ border-color:#6A3DF0; background:#120f22; color:#e9eaf1; }

/* ── Reveal ───────────────────────────────────────────────────── */
.aob-eyebrow{ font-family:var(--mono),'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; color:#8a7ad6; text-align:center; margin:2px 0 8px; }
.aob-revname{ font-size:30px; font-weight:700; text-align:center; margin:0 0 10px; }
@media (min-width:861px){ .aob-revname{ font-size:36px; } }
.aob-badges{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.aob-badge{ --acc:#c9b6ff; font-family:var(--mono),'JetBrains Mono',monospace; font-size:11px; letter-spacing:.6px; padding:6px 11px; border-radius:999px; border:1px solid #23223a; background:#0d0e15; }
.aob-badge.rank{ color:#f5c542; border-color:rgba(245,197,66,.3); }
.aob-badge.style{ color:var(--acc); border-color:color-mix(in srgb, var(--acc) 32%, transparent); }

.aob-summary{ border:1px solid #1b1c27; border-radius:14px; overflow:hidden; margin-bottom:18px; }
.aob-srow{ display:flex; justify-content:space-between; gap:12px; padding:12px 14px; font-size:13.5px; background:#0d0e15; border-bottom:1px solid #14151d; }
.aob-srow:last-child{ border-bottom:0; }
.aob-srow span{ color:#9396a4; }
.aob-srow b{ font-weight:600; color:#e9eaf1; text-align:right; }
.aob-srow.armed{ background:linear-gradient(90deg, rgba(106,61,240,.14), rgba(106,61,240,.04)); }
.aob-srow.armed b{ color:#c9b6ff; }

.aob-next-k{ font-family:var(--mono),'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px; color:#74778a; margin:6px 0 9px; }
.aob-next{ display:grid; gap:9px; margin-bottom:18px; }
.aob-nc{ display:flex; gap:12px; align-items:flex-start; padding:13px; border-radius:13px; background:#0d0e15; border:1px solid #1b1c27; text-align:left; }
.aob-nc svg{ flex:0 0 auto; color:#c9b6ff; margin-top:1px; }
.aob-nc b{ display:block; font-size:14px; font-weight:600; }
.aob-nc span{ display:block; font-size:12.5px; color:#9396a4; line-height:1.4; margin-top:2px; }

.aob-board{ border:1px solid #1b1c27; border-radius:14px; padding:12px 14px; margin-bottom:8px; background:#0b0c13; }
.aob-board-k{ font-family:var(--mono),'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.4px; color:#74778a; margin-bottom:8px; }
.aob-brow{ display:flex; align-items:center; gap:10px; font-size:13px; padding:6px 0; }
.aob-brow .pos{ font-family:var(--mono),'JetBrains Mono',monospace; color:#74778a; width:24px; }
.aob-brow .nm{ font-weight:600; }
.aob-brow .rk{ color:#9396a4; font-size:12px; }
.aob-brow .pc{ margin-left:auto; font-family:var(--mono),'JetBrains Mono',monospace; color:#34d39a; font-weight:600; }
.aob-board-note{ font-size:12px; color:#74778a; margin-top:8px; line-height:1.4; }

/* ── Footer ───────────────────────────────────────────────────── */
.aob-foot{
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid #14151d; background:rgba(10,11,17,.86); backdrop-filter:blur(8px);
}
@media (min-width:861px){ .aob-foot{ padding:16px 28px 20px; background:transparent; border-top-color:#1b1c27; } }
.aob-cta{
  width:100%; padding:15px; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:700 15.5px/1 var(--font),'Space Grotesk',sans-serif; color:#fff; border:0;
  background:linear-gradient(135deg,#9B72FF,#6A3DF0); box-shadow:0 16px 34px -14px rgba(106,61,240,.75); transition:filter .15s;
}
.aob-cta:hover{ filter:brightness(1.06); }
.aob-cta:disabled{ background:#16171f; color:#54576a; box-shadow:none; cursor:default; }
.aob-cta.busy{ opacity:.8; cursor:default; }
.aob-sec{ display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:5px; text-align:center; cursor:pointer; background:none; border:0; color:#74778a; font-size:13px; font-weight:500; }
.aob-sec:hover{ color:#9396a4; }

/* ── Welcome: explicit second path + top-agents showcase (2026-07-11) ── */
.aob-cta2{
  width:100%; margin-top:10px; padding:14px; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:700 14.5px/1 var(--font),'Space Grotesk',sans-serif; color:#c9b6ff;
  background:rgba(155,114,255,.08); border:1px solid rgba(155,114,255,.4);
  text-decoration:none; transition:background .15s;
}
.aob-cta2:hover{ background:rgba(155,114,255,.14); }
.aob-or{ display:flex; align-items:center; gap:12px; margin:20px 0 2px; }
.aob-or i{ flex:1; height:1px; background:#23223a; }
.aob-or span{ font-family:var(--mono),'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:#74778a; }
.aob-pick-h{ font-family:var(--mono),'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px; color:#74778a; margin:14px 0 9px; }
.aob-show{ display:flex; flex-direction:column; gap:8px; }
.aob-show-load{ font-size:12.5px; color:#54576a; padding:10px 2px; }
.aob-srowl{
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  border:1px solid #23223a; border-radius:14px; background:#101120;
  text-decoration:none; color:inherit; text-align:left; transition:border-color .15s, background .15s;
}
.aob-srowl:hover{ border-color:rgba(155,114,255,.45); background:#14152a; }
.aob-sav{
  width:38px; height:38px; flex:0 0 auto; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font:800 15px var(--font),'Space Grotesk',sans-serif; color:#fff;
}
.aob-smeta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.aob-smeta b{ font-size:14px; color:#f2f3f8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aob-smeta small{ font-size:11.5px; color:#8b90a3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aob-sgo{ flex:0 0 auto; font-size:20px; color:#54576a; }
.aob-browse{ display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:13px; font-weight:700; color:#8a7ad6; text-decoration:none; }
.aob-browse:hover{ color:#c9b6ff; }

@media (prefers-reduced-motion:reduce){
  .aob-av,.aob-av.forming::before,.aob-av.reveal::before,.aob-av.reveal::after,.aob-body{ animation:none !important; }
}
@keyframes aob-orbit{ to{ transform:rotate(360deg); } }
@keyframes aob-glow{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 14px 44px -12px var(--core-a); } 50%{ box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 18px 56px -10px var(--core-a); } }
@keyframes aob-burst{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } }
@keyframes aob-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* 2026 analyst commissioning flow */
.aob{
  --aob-bg:#0a0f17;
  --aob-panel:#111823;
  --aob-panel2:#161f2c;
  --aob-line:#283548;
  --aob-line2:#3a4a62;
  --aob-text:#f2f6fb;
  --aob-muted:#9eabba;
  --aob-dim:#69788c;
  --aob-brand:#9278ff;
  --aob-live:#5de4d1;
  background:
    linear-gradient(color-mix(in srgb,var(--aob-line) 20%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--aob-line) 20%,transparent) 1px,transparent 1px),
    var(--aob-bg);
  background-size:48px 48px;
  color:var(--aob-text);
}
[data-theme="light"] .aob{
  --aob-bg:#f2f4f7;
  --aob-panel:#ffffff;
  --aob-panel2:#edf0f4;
  --aob-line:#d7dce4;
  --aob-line2:#b9c2cf;
  --aob-text:#121824;
  --aob-muted:#4e5b6c;
  --aob-dim:#7b8796;
  --aob-brand:#6847ee;
  --aob-live:#087f74;
}
.aob-card{
  background:var(--aob-panel);
}
.aob-head{
  border-bottom:1px solid var(--aob-line);
}
.aob-back{
  border-color:var(--aob-line);
  border-radius:6px;
  color:var(--aob-muted);
  background:var(--aob-panel2);
}
.aob-dot{
  height:3px;
  background:var(--aob-line);
}
.aob-dot.on{
  background:var(--aob-live);
}
.aob-tag{
  color:var(--aob-live);
}
.aob-h{
  color:var(--aob-text);
  letter-spacing:-.035em;
}
.aob-sub{
  color:var(--aob-muted);
}
.aob-sub em{
  color:var(--aob-live);
}
.aob-av,
.aob-welcome .aob-av,
.aob-av.reveal{
  width:72px;
  height:72px;
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  animation:none;
}
.aob-welcome .aob-av{
  width:78px;
  height:78px;
  margin-bottom:16px;
}
.aob-av.reveal{
  width:92px;
  height:92px;
}
.aob-av.forming::before,
.aob-av.reveal::before,
.aob-av.reveal::after{
  display:none;
}
.aob-benes{
  grid-template-columns:1fr;
  gap:7px;
}
.aob-bene{
  padding:11px 12px;
  border-color:var(--aob-line);
  border-radius:7px;
  background:var(--aob-bg);
}
.aob-bene svg{
  color:var(--aob-live);
}
.aob-bene b{
  color:var(--aob-text);
  font-size:13px;
}
.aob-input,
.aob-opt,
.aob-mk button,
.aob-chip,
.aob-srow,
.aob-nc,
.aob-board,
.aob-srowl{
  border-color:var(--aob-line);
  border-radius:7px;
  color:var(--aob-text);
  background:var(--aob-bg);
}
.aob-input:focus,
.aob-opt.on,
.aob-mk button.on{
  border-color:var(--aob-brand);
}
.aob-opt.on,
.aob-mk button.on{
  background:color-mix(in srgb,var(--aob-brand) 9%,var(--aob-bg));
}
.aob-opt .oic{
  border-radius:6px;
  color:var(--aob-live);
  background:var(--aob-panel2);
}
.aob-opt .otx span,
.aob-srow span,
.aob-nc span,
.aob-name-lbl{
  color:var(--aob-muted);
}
.aob-name-lbl b{
  color:var(--aob-text);
}
.aob-name-lbl .mono{
  color:var(--aob-dim);
}
.aob-sec-k,
.aob-pick-h,
.aob-next-k,
.aob-board-k{
  color:var(--aob-dim);
}
.aob-badge{
  border-radius:4px;
  background:var(--aob-bg);
}
.aob-eyebrow{
  color:var(--aob-live);
}
.aob-summary{
  border-color:var(--aob-line);
  border-radius:7px;
}
.aob-srow{
  border-radius:0;
  border:0;
  border-bottom:1px solid var(--aob-line);
}
.aob-srow.armed{
  background:color-mix(in srgb,var(--aob-live) 7%,var(--aob-bg));
}
.aob-foot{
  border-color:var(--aob-line);
  background:var(--aob-panel);
  backdrop-filter:none;
}
.aob-cta,
.aob-cta2{
  border-radius:7px;
  box-shadow:none;
}
.aob-cta{
  background:var(--aob-brand);
}
[data-theme="light"] .aob .aob-cta:disabled{
  border:1px solid var(--aob-line);
  color:var(--aob-muted);
  background:var(--aob-panel2);
}
.aob-cta2{
  border-color:var(--aob-line2);
  color:var(--aob-muted);
  background:transparent;
}
.aob-cta2:hover{
  color:var(--aob-text);
  background:var(--aob-panel2);
}

.aob-preview{
  display:none;
}

@media (min-width:861px){
  .aob-card{
    width:min(1020px,calc(100vw - 48px));
    max-width:none;
    min-height:650px;
    max-height:calc(100vh - 40px);
    grid-template-columns:minmax(0,1fr) 350px;
    grid-template-rows:auto minmax(0,1fr) auto;
    border-color:var(--aob-line);
    border-radius:10px;
    background:var(--aob-panel);
    box-shadow:0 34px 100px -45px rgba(0,0,0,.9);
  }
  .aob-head{
    grid-column:1;
    grid-row:1;
    padding:22px 26px 13px;
  }
  .aob-body{
    grid-column:1;
    grid-row:2;
    padding:20px 34px 18px;
  }
  .aob-foot{
    grid-column:1;
    grid-row:3;
    padding:16px 34px 20px;
  }
  .aob-preview{
    grid-column:2;
    grid-row:1 / 4;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:22px;
    border-left:1px solid var(--aob-line);
    background:
      linear-gradient(145deg,color-mix(in srgb,var(--aob-live) 7%,transparent),transparent 38%),
      var(--aob-bg);
  }
  .aob-preview-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:14px;
    border-bottom:1px solid var(--aob-line);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    color:var(--aob-dim);
  }
  .aob-preview-top b{
    color:var(--aob-live);
    font-size:9.5px;
  }
  .aob-preview-id{
    display:flex;
    align-items:center;
    gap:13px;
    padding:24px 0 20px;
  }
  .aob-preview-id .aob-av{
    width:58px;
    height:58px;
    margin:0;
    flex:none;
  }
  .aob-preview-id > div{
    min-width:0;
  }
  .aob-preview-id > div b{
    display:block;
    overflow:hidden;
    color:var(--aob-text);
    font-size:16px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .aob-preview-id > div span{
    display:block;
    margin-top:4px;
    color:var(--aob-muted);
    font-size:11px;
  }
  .aob-preview-rows{
    display:flex;
    flex-direction:column;
    border:1px solid var(--aob-line);
  }
  .aob-pr{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:68px;
    padding:11px 12px;
    border-top:1px solid var(--aob-line);
    background:color-mix(in srgb,var(--aob-panel) 72%,transparent);
  }
  .aob-pr:first-child{
    border-top:0;
  }
  .aob-pri{
    width:32px;
    height:32px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    color:var(--aob-live);
    background:var(--aob-panel2);
  }
  .aob-pr > span:last-child{
    min-width:0;
  }
  .aob-pr small{
    display:block;
    color:var(--aob-dim);
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .aob-pr b{
    display:block;
    margin-top:4px;
    overflow:hidden;
    color:var(--aob-text);
    font-size:11.5px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .aob-preview-note{
    display:flex;
    gap:10px;
    margin-top:auto;
    padding:14px;
    border:1px solid color-mix(in srgb,var(--aob-live) 30%,var(--aob-line));
    background:var(--aob-live-soft,color-mix(in srgb,var(--aob-live) 7%,transparent));
  }
  .aob-live-dot{
    width:7px;
    height:7px;
    flex:none;
    margin-top:4px;
    border-radius:50%;
    background:var(--aob-live);
  }
  .aob-preview-note b{
    color:var(--aob-text);
    font-size:12px;
  }
  .aob-preview-note p{
    margin:4px 0 0;
    color:var(--aob-muted);
    font-size:10.5px;
    line-height:1.45;
  }
}

@media (max-width:860px){
  .aob{
    background-size:32px 32px;
  }
  .aob-card{
    background:color-mix(in srgb,var(--aob-panel) 97%,transparent);
  }
  .aob-head{
    padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  }
  .aob-body{
    padding-top:14px;
  }
  .aob-foot{
    background:var(--aob-panel);
  }
}