/* mypage admin v3 — the operator's canvas.
   Dark-first, like the tools Nathan named as the bar (Framer / Webflow):
   structure from elevation and hairlines, not boxes; one violet accent from
   the MyPage family; numerals in a mono face so columns of figures align;
   motion only where it carries meaning (count-ups, live pulses, reveals).
   Light theme is a real palette, not an inversion. Nothing here is a system
   font: Heebo (ui) + DM Mono (figures), self-hosted. */
:root{
  color-scheme: dark;
  --bg:#0b0b0e; --panel:#131318; --elev:#1a1a21; --elev2:#22222b;
  --line:#25252e; --line-strong:#3b3b48;
  --fg:#f3f3f6; --fg2:#c9c9d3; --muted:#8a8a99; --faint:#5c5c6b;
  --accent:#8b7cff; --accent-fg:#0b0b0e; --accent-soft:rgba(139,124,255,.14);
  --good:#3fd394; --warn:#f5b342; --err:#ff5d7d; --info:#5aa9ff;
  --good-soft:rgba(63,211,148,.13); --warn-soft:rgba(245,179,66,.14); --err-soft:rgba(255,93,125,.14); --info-soft:rgba(90,169,255,.14);
  --ring:0 0 0 1px rgba(255,255,255,.06) inset;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  --r:.5rem; --r-lg:.8rem; --r-pill:999px;
  --ui:'Heebo', 'Rubik', system-ui, sans-serif;
  --num:'DM Mono', 'Heebo', ui-monospace, monospace;
  --side:236px; --top:56px;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f5f6fa; --panel:#ffffff; --elev:#f0f1f6; --elev2:#e7e8f0;
  --line:#e4e6ee; --line-strong:#b7bccb;
  --fg:#15161c; --fg2:#3a3c48; --muted:#6b6f80; --faint:#a4a8b8;
  --accent:#635bff; --accent-fg:#ffffff; --accent-soft:rgba(99,91,255,.10);
  --good:#0e8f5b; --warn:#a8650a; --err:#d4325a; --info:#1d6fd6;
  --good-soft:rgba(14,143,91,.10); --warn-soft:rgba(168,101,10,.12); --err-soft:rgba(212,50,90,.10); --info-soft:rgba(29,111,214,.10);
  --ring:0 0 0 1px rgba(21,22,28,.05) inset;
  --shadow:0 1px 1px rgba(21,22,28,.05), 0 6px 18px rgba(21,22,28,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 var(--ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
code,.mono,.num{font-family:var(--num); font-variant-numeric:tabular-nums}
.i{width:18px; height:18px; flex:none; vertical-align:-4px}
.grow{flex:1}
.dim{color:var(--muted)} .tiny{font-size:.74rem} .small{font-size:.82rem} .nowrap{white-space:nowrap}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- shell */
.shell{display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh}
.side{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:.25rem;
  padding:1rem .75rem; background:var(--panel); border-inline-end:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:.45rem; padding:.35rem .6rem .9rem; font-weight:700; letter-spacing:-.01em}
.brand-mark{width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--accent),#ff7ab8); align-self:center; box-shadow:0 0 18px var(--accent-soft)}
.brand-word{font-size:1.05rem}
.brand-sub{color:var(--muted); font-weight:500}
.nav{display:flex; flex-direction:column; gap:.1rem; flex:1; overflow-y:auto}
.nav-h{margin:.8rem .6rem .25rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); font-weight:600}
.nav-i{
  display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:var(--r); color:var(--fg2);
  transition:background .15s, color .15s;
}
.nav-i:hover{background:var(--elev); color:var(--fg)}
.nav-i.is-on{background:var(--accent-soft); color:var(--fg); box-shadow:var(--ring)}
.nav-i.is-on .i{color:var(--accent)}
.nav-live{margin-inline-start:auto; min-width:1.4rem; text-align:center; font:600 .7rem/1.4 var(--num); background:var(--accent); color:var(--accent-fg); border-radius:var(--r-pill); padding:0 .35rem}
.side-foot{display:flex; align-items:center; gap:.6rem; padding:.6rem .6rem 0; border-top:1px solid var(--line); margin-top:.5rem}
.stamp{font:.74rem/1 var(--num); color:var(--muted); flex:1}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--faint); transition:background .15s, box-shadow .3s}
.pulse.live{background:var(--good)}
.pulse.beat{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.ico{background:none; border:1px solid transparent; border-radius:var(--r); padding:.3rem; cursor:pointer; color:var(--muted); display:inline-flex}
.ico:hover{color:var(--fg); background:var(--elev)}

.main{min-width:0; display:flex; flex-direction:column}
.top{
  position:sticky; top:0; z-index:8; height:var(--top); display:flex; align-items:center; gap:.75rem; padding:0 1.25rem;
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.crumbs{font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:.4rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crumbs .sep{color:var(--faint)} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--fg)}
.only-narrow{display:none}
.view{padding:1.25rem 1.25rem 3rem; display:flex; flex-direction:column; gap:1.25rem; width:100%; min-width:0}
@media (max-width: 960px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed; inset:0 auto 0 0; width:var(--side); z-index:20; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow)}
  .side.open{transform:none}
  .only-narrow{display:inline-flex}
  .view{padding:1rem .9rem 3rem}
}

/* ⌘K */
.cmdk{position:relative; display:flex; align-items:center; gap:.5rem; width:min(30rem,48vw); padding:.35rem .6rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--muted)}
.cmdk:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); color:var(--fg)}
.cmdk input{flex:1; min-width:0; background:none; border:0; outline:0; color:var(--fg)}
.cmdk input::placeholder{color:var(--faint)}
.cmdk kbd{font:.7rem/1 var(--num); color:var(--faint); border:1px solid var(--line); border-radius:.3rem; padding:.15rem .3rem}
.cmdk-pop{position:absolute; top:calc(100% + .4rem); inset-inline:0; background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:.35rem; max-height:60vh; overflow:auto; z-index:30}
.cmdk-r{display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:var(--r); color:var(--fg2); cursor:pointer}
.cmdk-r:hover,.cmdk-r.is-hi{background:var(--elev); color:var(--fg)}
.cmdk-r .k{font-size:.72rem; color:var(--muted); margin-inline-start:auto}
@media (max-width: 700px){ .cmdk{width:auto; flex:1} .cmdk kbd{display:none} }

/* ---------------------------------------------------------------- primitives */
h1{margin:0; font-size:1.35rem; letter-spacing:-.02em; font-weight:700; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
h1 .sub{font-size:.9rem; color:var(--muted); font-weight:500}
h2{margin:0; font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:.5rem}
h3{margin:0; font-size:.95rem; font-weight:650; display:flex; align-items:center; gap:.4rem}
section{display:flex; flex-direction:column; gap:.7rem}
.count{font:500 .72rem/1.5 var(--num); color:var(--fg2); background:var(--elev); border-radius:var(--r-pill); padding:0 .5rem}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem; box-shadow:var(--ring)}
.card.pad0{padding:0}
.card h2{margin-bottom:.4rem}
.grid{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.head{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.head .actions{margin-inline-start:auto; display:flex; gap:.5rem; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--fg); font-weight:550; font-size:.86rem;
  transition:background .15s, border-color .15s, transform .08s;
}
.btn:hover{background:var(--elev)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:transparent}
.btn.primary:hover{filter:brightness(1.08); background:var(--accent)}
.btn:disabled{opacity:.5; cursor:default}
.mini{font:inherit; font-size:.76rem; padding:.2rem .55rem; border:1px solid var(--line-strong); background:var(--panel); color:var(--fg2); border-radius:var(--r); cursor:pointer}
.mini:hover{background:var(--elev); color:var(--fg)}
.chip{display:inline-flex; align-items:center; gap:.3rem; padding:.05rem .5rem; border-radius:var(--r-pill); font-size:.74rem; font-weight:600; background:var(--elev); color:var(--fg2); border:1px solid transparent; white-space:nowrap}
.chip.good,.chip.ok,.chip.done{background:var(--good-soft); color:var(--good)}
.chip.warn,.chip.refused,.chip.pending{background:var(--warn-soft); color:var(--warn)}
.chip.err,.chip.error,.chip.timeout,.chip.usage_limit{background:var(--err-soft); color:var(--err)}
.chip.live,.chip.working,.chip.info{background:var(--info-soft); color:var(--info)}
.chip.accent{background:var(--accent-soft); color:var(--accent)}
.chip.pro,.chip.business,.chip.studio{background:var(--accent-soft); color:var(--accent)}
.chip.free{color:var(--muted)}
.chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.live .dot{animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.empty{color:var(--muted); padding:1.25rem; text-align:center; border:1px dashed var(--line); border-radius:var(--r-lg)}
.empty.warn{color:var(--warn); border-color:var(--warn)}
.flag{font-size:1rem; line-height:1; margin-inline-end:.25rem}
.ip{font-family:var(--num); font-size:.82rem}
.who{color:var(--fg); font-weight:550} .who:hover{color:var(--accent)}
.filters{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.filters input,.filters select{background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r); padding:.35rem .6rem; color:var(--fg); min-width:0}
.filters input:focus,.filters select:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden}
.seg button{background:var(--panel); border:0; padding:.32rem .7rem; color:var(--muted); cursor:pointer; font-size:.82rem}
.seg button+button{border-inline-start:1px solid var(--line)}
.seg button.is-on{background:var(--accent-soft); color:var(--fg)}
.warnbar{background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); border-radius:var(--r); padding:.5rem .8rem; font-size:.85rem}

/* KPI tiles */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr)); gap:.75rem}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:.85rem .95rem; display:flex; flex-direction:column; gap:.2rem; position:relative; overflow:hidden; box-shadow:var(--ring)}
.kpi .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:.35rem}
.kpi .v{font:600 1.65rem/1.15 var(--num); letter-spacing:-.02em}
.kpi .d{font-size:.78rem; color:var(--muted)}
.kpi .d b{color:var(--fg2); font-weight:600}
.kpi .d.up{color:var(--good)} .kpi .d.bad{color:var(--err)}
.kpi svg.spark{position:absolute; inset-inline-end:.6rem; bottom:.55rem; width:5.5rem; height:1.6rem; opacity:.9}
.kpi.hot{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.kpi.hot::after{content:""; position:absolute; inset:auto -30% -60% auto; width:70%; height:120%; background:radial-gradient(closest-side,var(--accent-soft),transparent); pointer-events:none}

/* tables */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--ring)}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:.86rem}
th{position:sticky; top:0; z-index:1; text-align:start; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600; padding:.6rem .75rem; background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:.55rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--elev)}
tr.rowlink{cursor:pointer}
tr.is-live td{background:var(--info-soft)}
td.n,th.n{text-align:end; font-family:var(--num); font-variant-numeric:tabular-nums}
td.clip{max-width:22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
td.wide{max-width:34rem}
.stack{display:flex; flex-direction:column; gap:.1rem; line-height:1.3}
.stack .sub{font-size:.76rem; color:var(--muted)}
.bar{height:5px; border-radius:3px; background:var(--elev2); overflow:hidden; min-width:4rem}
.bar i{display:block; height:100%; background:var(--accent); border-radius:3px}

/* lists / feeds */
.feed{display:flex; flex-direction:column}
.feed-i{display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center; padding:.55rem 0; border-bottom:1px solid var(--line)}
.feed-i:last-child{border-bottom:0}
.avatar{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:600 .8rem var(--num); background:var(--accent-soft); color:var(--accent); text-transform:uppercase}
.avatar.big{width:52px; height:52px; font-size:1.2rem}
.feed-i .t{min-width:0} .feed-i .t b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feed-i .t .sub{display:block; font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feed-i{min-width:0}
.feed-i .r{text-align:end; font-size:.76rem; color:var(--muted); white-space:nowrap}

/* customer 360 / site page headers */
.hero{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.hero .id{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.hero .id h1{font-size:1.3rem}
.hero .meta{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.84rem}
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:.6rem}
.strip .s{background:var(--elev); border-radius:var(--r); padding:.55rem .75rem; display:flex; flex-direction:column}
.strip .s .k{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.strip .s .v{font:600 1.15rem/1.3 var(--num)}
.tabs{display:flex; gap:.25rem; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none; border:0; border-bottom:2px solid transparent; padding:.55rem .8rem; color:var(--muted); cursor:pointer; white-space:nowrap; font-weight:550}
.tab:hover{color:var(--fg)} .tab.is-on{color:var(--fg); border-color:var(--accent)}
.tab .count{margin-inline-start:.3rem}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; font-size:.86rem}
.kv dt{color:var(--muted)} .kv dd{margin:0; overflow-wrap:anywhere}

/* timeline (the site's story) */
.tl-list{display:flex; flex-direction:column; gap:.9rem}
.tl-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--ring); overflow:hidden}
.tl-card.err{border-color:color-mix(in srgb,var(--err) 40%,var(--line))}
.tl-card.live{border-color:color-mix(in srgb,var(--info) 50%,var(--line))}
.tl-top{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.6rem .9rem; background:var(--elev); font-size:.8rem; color:var(--muted)}
.tl-top .n{font:600 .8rem var(--num); color:var(--fg)}
.tl-top .sp{margin-inline-start:auto; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.tl-body{padding:.8rem .9rem; display:grid; grid-template-columns:1.2fr 1fr; gap:.9rem}
@media (max-width: 800px){ .tl-body{grid-template-columns:1fr} }
.tl-ask{font-weight:550; line-height:1.5; overflow-wrap:anywhere}
.tl-ask .lbl,.tl-rep .lbl,.tl-ch .lbl{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; margin-bottom:.2rem}
.tl-rep{color:var(--fg2); font-size:.88rem; line-height:1.5; margin-top:.6rem; overflow-wrap:anywhere}
.tl-ch{font-size:.84rem}
.tl-ch ul{margin:.2rem 0 0; padding-inline-start:1rem; line-height:1.6}
.tl-ch code{font-size:.8rem; background:var(--elev); padding:.02rem .3rem; border-radius:.25rem}
.tl-stats{display:flex; flex-wrap:wrap; gap:.35rem .8rem; margin-top:.6rem; font-size:.78rem; color:var(--muted)}
.tl-stats b{color:var(--fg2); font-family:var(--num); font-weight:500}
.tl-foot{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:.5rem .9rem .7rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted)}
.tl-foot .sp{margin-inline-start:auto; display:flex; gap:.4rem}
details.steps{font-size:.82rem; color:var(--muted); margin-top:.5rem}
details.steps summary{cursor:pointer}
details.steps ol{margin:.3rem 0 0; padding-inline-start:1.2rem; line-height:1.5; color:var(--fg2)}

/* run dialog */
.dlg{border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--panel); color:var(--fg); padding:0; width:min(56rem,94vw); max-height:88vh; box-shadow:var(--shadow)}
.dlg.wide{width:min(76rem,96vw)}
.dlg::backdrop{background:rgba(0,0,0,.6); backdrop-filter:blur(3px)}
.dlg > header{display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2}
.dlg > header strong{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dlg .x{background:none; border:0; color:var(--muted); font-size:1.3rem; cursor:pointer; line-height:1; padding:.1rem .4rem; border-radius:var(--r)}
.dlg .x:hover{color:var(--fg); background:var(--elev)}
.dlg > div, .dlg > form{padding:1rem; overflow:auto; max-height:calc(88vh - 3.2rem)}
.run-meta{display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.82rem; color:var(--muted); margin-bottom:.8rem}
.run-meta b{color:var(--fg); font-family:var(--num); font-weight:500}
.run-changes{display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .9rem}
.turns{display:flex; flex-direction:column; gap:.3rem; margin:.4rem 0 1rem}
.turn{display:grid; grid-template-columns:5.2rem 1fr; gap:.6rem; padding:.45rem .6rem; border-radius:var(--r); background:var(--elev); font-size:.84rem; align-items:start}
.turn .tk{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; padding-top:.15rem}
.turn.text{background:transparent; border:1px solid var(--line)}
.turn.text .tb{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5}
.turn.call .tb{display:flex; flex-direction:column; gap:.25rem}
.turn.call .cl{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.turn.call .cl b{font-weight:600}
.turn.call .args{font-family:var(--num); font-size:.76rem; color:var(--muted); overflow-wrap:anywhere}
.turn.call .res{font-size:.8rem; color:var(--fg2); padding-inline-start:.6rem; border-inline-start:2px solid var(--line-strong); white-space:pre-wrap; overflow-wrap:anywhere; max-height:9rem; overflow:auto}
.turn.call.err{background:var(--err-soft)} .turn.call.err .res{border-color:var(--err); color:var(--err)}
.turn.final{background:var(--good-soft)} .turn.final.err{background:var(--err-soft)}
.turn.user{border:1px dashed var(--line)}
pre.log{margin:0; padding:.7rem .8rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); font:.78rem/1.45 var(--num); white-space:pre-wrap; overflow-wrap:anywhere; max-height:32rem; overflow:auto; color:var(--fg2)}
pre.log.err{color:var(--err)}
details > summary{cursor:pointer; color:var(--fg2)}
.counts{display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .8rem}
.counts .chip{font-weight:500}
.viewas{display:flex; flex-direction:column; gap:.8rem}
.viewas label{display:flex; flex-direction:column; gap:.3rem; font-weight:550}
.viewas input{background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r); padding:.5rem .7rem}
.viewas input:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.viewas-note{display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; color:var(--muted); background:var(--elev); border-radius:var(--r); padding:.6rem .75rem; margin:0}
.viewas-note .i{color:var(--good); margin-top:.1rem}
.viewas-actions{display:flex; justify-content:flex-end}

/* chat transcript (legacy dialog) */
.c{display:flex; flex-direction:column; gap:.2rem; margin-bottom:.7rem; max-width:44rem}
.c.user{align-items:flex-end; margin-inline-start:auto}
.c-b{padding:.5rem .75rem; border-radius:var(--r-lg); background:var(--elev); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5}
.c.user .c-b{background:var(--accent-soft)}
.c-m{font-size:.74rem; color:var(--muted)}
.c-m .chip{margin-inline-start:.3rem}
.steps{margin:.2rem 0 0; padding-inline-start:1.1rem; font-size:.8rem; color:var(--muted)}

/* legacy view furniture (feedback / visitors / links / support / rivals / agents) */
.lk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:.75rem}
.lk{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:.8rem; display:flex; flex-direction:column; gap:.4rem; box-shadow:var(--ring)}
.lk-head{display:flex; align-items:baseline; gap:.5rem}
.lk-head .slug{font-weight:650; font-family:var(--num)}
.lk-nums{display:flex; gap:.8rem; font-size:.82rem}
.lk-nums b{font-family:var(--num); font-weight:600}
.lk-facets{display:flex; flex-direction:column; gap:.2rem; font-size:.76rem; color:var(--muted)}
.lk-facets span{display:flex; gap:.4rem; flex-wrap:wrap}
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:.6rem}
.summary .s{background:var(--elev); border-radius:var(--r); padding:.55rem .75rem}
.summary .s .k{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.summary .s .v{font:600 1.15rem/1.3 var(--num)}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:.75rem}
.top-list{margin:0; padding:0; list-style:none; font-size:.84rem}
.top-list li{display:flex; justify-content:space-between; gap:.5rem; padding:.25rem 0; border-bottom:1px solid var(--line)}
.top-list li span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.top-list b{font-family:var(--num); font-weight:500}
.ticket{border:1px solid var(--line); border-radius:var(--r-lg); padding:.75rem .9rem; background:var(--panel); display:flex; flex-direction:column; gap:.4rem}
.ticket .th{display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap}
.ticket .draft{background:var(--elev); border-radius:var(--r); padding:.5rem .7rem; white-space:pre-wrap; font-size:.86rem; line-height:1.5}
.rival{border:1px solid var(--line); border-radius:var(--r-lg); padding:.9rem 1rem; background:var(--panel); display:flex; flex-direction:column; gap:.5rem}
.rival h3{font-size:1.05rem}
.lens{display:flex; gap:.35rem; flex-wrap:wrap}
.lens .chip{cursor:pointer}
.lens .chip.is-on{outline:2px solid var(--accent)}
.md{line-height:1.6; font-size:.9rem; max-width:70rem}
.md h1,.md h2,.md h3{display:block; text-transform:none; letter-spacing:0; color:var(--fg); margin:1.2rem 0 .4rem}
.md h1{font-size:1.3rem} .md h2{font-size:1.1rem} .md h3{font-size:1rem}
.md p{margin:.4rem 0} .md ul,.md ol{margin:.4rem 0; padding-inline-start:1.4rem}
.md code{background:var(--elev); padding:.05rem .3rem; border-radius:.25rem; font-size:.82rem}
.fleet{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr)); gap:.75rem}
.agent-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:.75rem; display:flex; gap:.7rem; align-items:center; cursor:pointer; box-shadow:var(--ring); transition:transform .12s, border-color .15s}
.agent-card:hover{transform:translateY(-1px); border-color:var(--line-strong)}
.agent-card img,.agent-card .ph{width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--elev); flex:none}
.agent-card .ph{display:grid; place-items:center; font-weight:700; color:var(--accent)}
.agent-card .an{font-weight:650} .agent-card .ad{font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pills{display:flex; gap:.35rem; flex-wrap:wrap}
.pill{border:1px solid var(--line-strong); background:var(--panel); border-radius:var(--r-pill); padding:.15rem .6rem; font-size:.76rem; cursor:pointer; color:var(--fg2)}
.pill.is-on{background:var(--accent-soft); border-color:var(--accent); color:var(--fg)}
table.fields td:first-child{color:var(--muted); white-space:nowrap; width:11rem}
.voices{display:flex; flex-direction:column; gap:.25rem; max-height:22rem; overflow:auto}
.voice{display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border-radius:var(--r); border:1px solid var(--line)}
.voice.playing{border-color:var(--accent)}
.voice .play{border:1px solid var(--line-strong); background:var(--panel); border-radius:50%; width:1.7rem; height:1.7rem; cursor:pointer; color:var(--fg)}
.voice .vn{font-weight:550} .voice .vd{font-size:.74rem; color:var(--muted)}
.voice .pick{margin-inline-start:auto}
.avatar-drop{border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:1rem; text-align:center; color:var(--muted)}
.avatar-drop.over{border-color:var(--accent); background:var(--accent-soft)}
#toast{position:fixed; bottom:1.2rem; inset-inline-start:50%; transform:translate(-50%,1rem); opacity:0; background:var(--fg); color:var(--bg); padding:.5rem .9rem; border-radius:var(--r); font-weight:550; transition:all .2s; z-index:99; pointer-events:none}
#toast.show{opacity:1; transform:translate(-50%,0)}
#toast.err{background:var(--err); color:#fff}

/* reveal: staggered, viewport-triggered, reduced-motion safe (law 2/5) */
.rv{opacity:0; transform:translateY(10px); animation:rv .5s cubic-bezier(.16,1,.3,1) forwards}
.rv:nth-child(2){animation-delay:.05s} .rv:nth-child(3){animation-delay:.1s} .rv:nth-child(4){animation-delay:.15s}
.rv:nth-child(5){animation-delay:.2s} .rv:nth-child(6){animation-delay:.25s} .rv:nth-child(7){animation-delay:.3s} .rv:nth-child(n+8){animation-delay:.35s}
@keyframes rv{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .rv{animation:none; opacity:1; transform:none} .chip.live .dot{animation:none} }

/* live board */
.lv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr)); gap:.75rem}
.lv{display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:.85rem .95rem; box-shadow:var(--ring); position:relative; overflow:hidden}
.lv.on{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.lv.on::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 0% 0%, var(--good-soft), transparent 60%); pointer-events:none}
.lv.off{opacity:.65}
.lv.staff{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.lv-flag{font-size:2.4rem; line-height:1; width:3rem; text-align:center; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.lv-flag .flag{font-size:2.4rem; margin:0}
.lv-flag.sm,.lv-flag.sm .flag{font-size:1.4rem; width:auto}
.lv-main{min-width:0; display:flex; flex-direction:column; gap:.15rem}
.lv-who{font-weight:650; display:flex; align-items:center; gap:.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lv-dot{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 var(--good); animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent)} 100%{box-shadow:0 0 0 9px transparent}}
.lv-site{font-size:.84rem; color:var(--fg2)}
.lv-meta{display:flex; flex-wrap:wrap; gap:.2rem .7rem; font-size:.76rem; color:var(--muted)}
.lv-time{display:flex; flex-direction:column; align-items:flex-end; font-size:.72rem; color:var(--muted); white-space:nowrap}
.lv-time b{font-size:1.05rem; color:var(--fg); font-weight:600}
@media (max-width: 960px){ .grid[style]{grid-template-columns:1fr!important} }
@media (prefers-reduced-motion: reduce){ .lv-dot{animation:none} }

/* help chat */
.help-grid{display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:1rem; align-items:start}
@media (max-width: 900px){ .help-grid{grid-template-columns:1fr} }
.help-inbox{display:flex; flex-direction:column; max-height:calc(100vh - 12rem); overflow:auto}
.help-row{display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center; padding:.6rem .8rem; border-bottom:1px solid var(--line); color:inherit}
.help-row:hover{background:var(--elev)} .help-row.is-on{background:var(--accent-soft)}
.help-row.needs{box-shadow:inset 3px 0 0 var(--warn)}
.help-row .t{min-width:0} .help-row .t b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.help-row .t .sub{display:block; font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.help-row .r{font-size:.74rem; color:var(--muted); white-space:nowrap}
.help-pane{display:flex; flex-direction:column; gap:.7rem; min-height:24rem}
.help-pane-head{display:flex; gap:.75rem; align-items:flex-start; flex-wrap:wrap; padding-bottom:.6rem; border-bottom:1px solid var(--line)}
.help-pane-head .stack{flex:1; min-width:0}
.help-pane-head .sub{font-size:.78rem; color:var(--muted)}
.help-msgs{display:flex; flex-direction:column; gap:.6rem; max-height:calc(100vh - 24rem); overflow:auto; padding-inline-end:.3rem}
.hm{display:flex; flex-direction:column; gap:.2rem; max-width:80%}
.hm.user{align-self:flex-start} .hm.assistant,.hm.staff{align-self:flex-end; align-items:flex-end}
.hm-h{display:flex; gap:.5rem; align-items:center; font-size:.74rem}
.hm-b{padding:.5rem .75rem; border-radius:var(--r-lg); background:var(--elev); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.hm.user .hm-b{background:var(--accent-soft)} .hm.staff .hm-b{border:1px solid var(--good)}
.hm.sys{align-self:center; font-size:.76rem; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r-pill); padding:.15rem .6rem}
.help-compose{display:flex; gap:.5rem; align-items:flex-end; border-top:1px solid var(--line); padding-top:.7rem}
.help-compose textarea{flex:1; resize:vertical; min-height:3rem; background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r); padding:.55rem .7rem; color:var(--fg)}
.help-compose textarea:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------------- legacy furniture (feedback / visitors / support / agents), re-tokened ---------------- */
.run{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ring); padding:.8rem .9rem; display:flex; flex-direction:column; gap:.5rem}
.run-head{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.clock{font:600 .82rem/1 var(--num); color:var(--accent); font-variant-numeric:tabular-nums}
.asked{margin:0; font-weight:550}
.said{margin:0; color:var(--muted)}

.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem}
.steps li{display:flex; gap:.5rem; font-size:.82rem; color:var(--muted)}
.steps li.now{color:var(--fg)}
.steps .tick{flex:none; width:1rem; text-align:center; color:var(--good)}
.steps li.now .tick{color:var(--accent)}

/* verdicts */
.fb{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ring); padding:.8rem .9rem; display:flex; flex-direction:column; gap:.45rem}
/* The stripe is the whole point of scanning this list -- a bad verdict should
   be findable without reading a word. */
.fb.good{box-shadow:var(--ring), inset 3px 0 0 var(--good)}
.fb.bad{box-shadow:var(--ring), inset 3px 0 0 var(--err)}
.fb-head{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; font-size:.8rem}
.fb details{font-size:.82rem}
.fb summary{cursor:pointer; color:var(--muted); list-style:none}
.fb summary::-webkit-details-marker{display:none}

/* transcript */

/* login */
body.center{display:grid; place-items:center; min-height:100vh}
:where(button,a,input):focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* visitors */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ring); padding:.7rem .8rem; display:flex; flex-direction:column; gap:.1rem}
.stat b{font-size:1.4rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat b.bad{color:var(--err)}
.stat span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}

.grid4{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.6rem}

/* The consent state is the single most consequential setting on this page, so
   it states itself rather than living only in an env file nobody rereads. */
.notice{margin:0; padding:.7rem .85rem; font-size:.82rem; color:var(--fg);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));
  border:1px solid var(--line); border-inline-start:3px solid var(--accent);
  border-radius:var(--r)}
.notice code{font-family:var(--num); font-size:.78rem; background:var(--elev);
  padding:.1rem .25rem; border-radius:3px}

#an-day{background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.2rem .5rem; font:inherit; font-size:.75rem}

/* competitors */
.tier{margin:.6rem 0 .2rem; font:600 .7rem/1 var(--num); text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted)}
ul.plain{list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.2rem; font-size:.83rem}
ul.plain li.good{color:var(--good)} ul.plain li.bad{color:var(--err)}
ul.plain li.gap{color:var(--warn)}

/* rival filters + research docs */
#rival-q{background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-pill); padding-block:.25rem; padding-inline:.6rem;
  font:inherit; font-size:.78rem; min-inline-size:14rem}

.md{font-size:.85rem; line-height:1.55}
.md h2,.md h3,.md h4,.md h5{margin-block:.9rem .3rem; line-height:1.25}
.md h2{font-size:1.05rem} .md h3{font-size:.95rem} .md h4,.md h5{font-size:.85rem}
.md p{margin-block:.35rem}
.md ul{margin-block:.35rem; padding-inline-start:1.1rem}
.md li{margin-block:.15rem}
.md hr{border:none; border-block-start:1px solid var(--line); margin-block:.8rem}
.md code{font-family:var(--num); font-size:.78rem; background:var(--elev);
  padding-block:.1rem; padding-inline:.25rem; border-radius:3px}
.md .tablewrap{margin-block:.5rem}
.md a{color:var(--accent)}

/* ---------------------------------------------------------------- agents */
/* Fleet controls: search + facet pills on one wrapping row. */
.fleetbar{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-block-end:.3rem}
#agent-q{background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-pill); padding-block:.3rem; padding-inline:.7rem;
  font:inherit; font-size:.8rem; min-inline-size:15rem}
.facet{display:flex; align-items:center; gap:.25rem; flex-wrap:wrap}
.facet .lbl{font:600 .62rem/1 var(--num); text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}

/* Fleet grid: avatar-forward cards, dense but calm. */
.fleet{display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.7rem}
.acard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ring); overflow:hidden; cursor:pointer; text-align:start;
  display:flex; flex-direction:column; padding:0; color:inherit; font:inherit;
  transition:border-color .12s, transform .12s}
.acard:hover{border-color:var(--accent); transform:translateY(-1px)}
.acard .thumb{aspect-ratio:3/4; width:100%; object-fit:cover; background:var(--elev); display:block}
.acard .thumb.ph{display:grid; place-items:center; color:var(--line-strong); font:700 1.6rem/1 var(--num)}
.acard .meta{padding:.5rem .6rem; display:flex; flex-direction:column; gap:.15rem}
.acard .nm{font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:.35rem}
.acard .heb{color:var(--muted); font-size:.78rem}
.acard .rl{color:var(--muted); font-size:.74rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.acard .tags{display:flex; flex-wrap:wrap; gap:.2rem; margin-top:.15rem}
.dot{width:.5rem; height:.5rem; border-radius:50%; flex:none; display:inline-block}
.dot.voice{background:var(--good)} .dot.novoice{background:var(--line-strong)}
.tag{font:600 .6rem/1 var(--num); padding:.16rem .34rem; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.04em; background:var(--elev); color:var(--muted)}
.tag.div{background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent)}

/* Agent dialog: wider, two-column on desktop. */
#agent{width:min(64rem,96vw)}
#agent-body{padding:1rem; display:grid; grid-template-columns:16rem 1fr; gap:1.1rem;
  overflow-y:auto; max-height:80vh}
@media (max-width:40rem){#agent-body{grid-template-columns:1fr}}
.acol{display:flex; flex-direction:column; gap:.6rem}
.aprev{aspect-ratio:3/4; width:100%; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--line); background:var(--elev)}
.drop{border:1.5px dashed var(--line-strong); border-radius:var(--r); padding:.7rem;
  text-align:center; color:var(--muted); font-size:.78rem; cursor:pointer; transition:.12s}
.drop.hot{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.aprompt{width:100%; min-height:7rem; resize:vertical; background:var(--panel); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r); padding:.5rem .6rem; font:inherit; font-size:.8rem; line-height:1.45}
.arow{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.btn.ghost{background:var(--panel); color:var(--fg); border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--elev)}
.btn.sm{padding:.32rem .6rem; font-size:.78rem}
.btn[disabled]{opacity:.55; cursor:progress}

/* Field table in the detail. */
.fields{width:100%; font-size:.82rem; border-collapse:collapse}
.fields th{width:9rem; text-align:start; vertical-align:top; padding:.32rem .5rem .32rem 0;
  color:var(--muted); font:600 .66rem/1.3 var(--num); text-transform:uppercase; letter-spacing:.05em}
.fields td{padding:.32rem 0; border-bottom:1px solid var(--line); vertical-align:top;
  overflow-wrap:anywhere}
.fields tr:last-child td{border-bottom:0}
.fields td.empty{color:var(--line-strong); font-style:italic}

/* Voice picker. */
.voicebox{display:flex; flex-direction:column; gap:.5rem}
.vfilters{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center}
.vlist{display:flex; flex-direction:column; gap:.3rem; max-height:24rem; overflow-y:auto;
  border:1px solid var(--line); border-radius:var(--r); padding:.4rem; background:var(--bg)}
.voice{display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line)}
.voice.is-sel{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
.voice.playing{background:var(--elev)}
.play{flex:none; width:2rem; height:2rem; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--fg); cursor:pointer; font-size:.9rem; display:grid; place-items:center}
.play:hover{border-color:var(--accent); color:var(--accent)}
.voice .vmeta{display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1}
.voice .vn{font-weight:600; font-size:.82rem}
.voice .vl{color:var(--muted); font-size:.72rem; display:flex; flex-wrap:wrap; gap:.3rem}
.voice .pick{flex:none}
.section-h{font:600 .7rem/1 var(--num); text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-block:.2rem}

/* Toast — a mutation surface needs to say a write landed. */

/* Short links — the one place this console is allowed to show off. Each card
   is a live gauge of a link Nathan is actively trading on, so it gets the
   gradient rail, the big tabular counters, and rows that arrive with a small
   entrance — WOW inside the house palette, both themes untouched. */
.linkcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:.9rem}
.linkcard{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:.65rem; padding:1rem 1.1rem .9rem; box-shadow:var(--ring);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.linkcard::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px;
  background:linear-gradient(90deg,var(--accent),#e05fa9 55%,#f5a623);
}
.linkcard:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(26,31,54,.12)}
.linkcard header{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.lk-slug{font:600 1.02rem/1.2 var(--num); letter-spacing:-.01em}
.lk-slug b{color:var(--accent)}
.lk-target{font-size:.74rem; color:var(--muted); text-decoration:none; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.15rem .55rem; white-space:nowrap}
.lk-target:hover{color:var(--accent); border-color:var(--accent)}
.lk-nums{display:flex; gap:1.4rem; margin-block:.75rem .6rem}
.lk-num{display:flex; flex-direction:column}
.lk-num b{font-size:1.55rem; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.lk-num span{font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.lk-minis{display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; border-block-start:1px solid var(--line); padding-block-start:.6rem}
.lk-mini h4{margin:0 0 .2rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.lk-row{display:flex; justify-content:space-between; gap:.5rem; font-size:.78rem; padding-block:.08rem}
.lk-row b{font-variant-numeric:tabular-nums}
.lk-feed .lk-flag{font-size:1.35rem; line-height:1; inline-size:1.8rem}
.lk-feed td{vertical-align:top}
.lk-feed tbody tr{animation:lk-in .35s ease both}
.lk-feed .block{display:block; font-size:.7rem}
.lk-bot{opacity:.45}
@keyframes lk-in{from{opacity:0; transform:translateY(-3px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.lk-feed tbody tr{animation:none}.linkcard:hover{transform:none}}

/* prompts + AI runs (logs.js) */
.filters{display:flex; gap:.5rem; margin:.4rem 0 .8rem; flex-wrap:wrap}
.filters select,.filters input{
  font:inherit; color:var(--fg); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:.3rem .5rem; min-width:12rem;
}
h2 .small{font-size:12px; font-weight:400; margin-inline-start:.6rem}
table.logs td.wide{max-width:15rem}
.tiny{font-size:11px}
.mono{font-family:var(--num); font-size:12px}
a.hash{cursor:pointer; text-decoration:underline dotted}
.empty.warn{color:var(--warn)}
.run-meta{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:13px; color:var(--muted); margin-bottom:.6rem}
.run-meta b{color:var(--fg); font-weight:550}
#run-body h3{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:1.1rem 0 .4rem}
.timeline{display:flex; flex-direction:column; gap:.3rem}
.tl{display:flex; gap:.6rem; align-items:flex-start; padding:.35rem .55rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); font-size:13px; flex-wrap:wrap}
.tl-k{flex:none; font:11px/1.6 var(--num); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); min-width:3.6rem}
.tl.text .tl-b{white-space:pre-wrap; flex:1 1 100%}
.tl.tool{border-color:var(--line-strong)} .tl.tool .tl-k{color:var(--accent)}
.tl.res{background:var(--elev)} .tl.res.err{border-color:var(--err)} .tl.res.err .tl-k{color:var(--err)}
.tl.final{border-color:var(--good)} .tl.final .tl-k{color:var(--good)} .tl.final.err{border-color:var(--err)}
.tl details{flex:1 1 100%} .tl summary{cursor:pointer; color:var(--muted); font-size:12px}
pre.log{font:12px/1.45 var(--num); white-space:pre-wrap; word-break:break-word; background:var(--elev); border:1px solid var(--line); border-radius:var(--r); padding:.5rem .6rem; max-height:60vh; overflow:auto; margin:.3rem 0 0}
pre.log.err{border-color:var(--err)}

.lv-grid.one{grid-template-columns:1fr}
.lv.vis .lv-flag{font-size:2.6rem}
.lv-trail{display:flex; flex-wrap:wrap; align-items:center; gap:.15rem; font:.74rem var(--num); color:var(--muted); margin:.1rem 0}
.lv-trail .pg{background:var(--elev); border-radius:.3rem; padding:.05rem .35rem; max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lv-trail .pg.now{background:var(--good-soft); color:var(--good); font-weight:500}
.lv-trail .arrow{color:var(--faint)}
.iplink{cursor:pointer; border-bottom:1px dotted var(--line-strong)} .iplink:hover{color:var(--accent); border-color:var(--accent)}
.lv-who .iplink{font-size:.8rem; font-weight:400; margin-inline-start:.2rem}

/* collapsed sidebar (Founder 2026-09-03: "אפשרות למזער את התפריט") */
html.side-mini{--side:64px}
html.side-mini .brand-word,html.side-mini .brand-sub,html.side-mini .nav-t,html.side-mini .nav-h,html.side-mini .stamp{display:none}
html.side-mini .side{padding-inline:.5rem}
html.side-mini .brand{justify-content:center; padding-inline:0}
html.side-mini .nav-i{justify-content:center; padding:.55rem 0; position:relative}
html.side-mini .nav-live{position:absolute; top:.15rem; inset-inline-end:.3rem; margin:0}
html.side-mini .side-foot{flex-direction:column; gap:.5rem; align-items:center}
html.side-mini #side-collapse .i{transform:rotate(180deg)}
.nav-i .nav-t{flex:1}
/* visitor table */
td.st{width:1.2rem} .st i{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--faint)}
.st i.on{background:var(--good); box-shadow:0 0 0 3px var(--good-soft)}
.st i.on.ping{animation:ping 1.6s infinite}

.trail-cell{display:flex; gap:.15rem; align-items:center; flex-wrap:nowrap; max-width:22rem; overflow:hidden}
.trail-cell .pg{font:.74rem var(--num); background:var(--elev); border-radius:.3rem; padding:.02rem .35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:9rem}
.trail-cell .pg.now{background:var(--good-soft); color:var(--good)}
.trail-cell .arrow{color:var(--faint); font-size:.7rem}
.tbl-tools{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.tbl-tools .grow{flex:1}
table.dense td{padding:.42rem .6rem; font-size:.83rem}
table.dense th{padding:.5rem .6rem}
.pct{display:inline-flex; align-items:center; gap:.35rem}
.pct .bar{width:3rem}
td.cc{max-width:15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.dense td .mono.small{white-space:nowrap}

/* flags as SVG */
img.flag{width:20px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); vertical-align:-2px; margin-inline-end:.3rem; object-fit:cover; background:var(--elev2)}
img.flag.big{width:44px; height:33px; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.35); margin:0}
.lv-flag img.flag.big{display:block}
:root[data-theme="light"] img.flag{box-shadow:0 0 0 1px rgba(21,22,28,.15)}
.bi{width:15px; height:15px; vertical-align:-3px; margin-inline-end:.15rem; color:var(--fg2)}
.cols-wrap{position:relative}
.cols-pop{position:absolute; top:calc(100% + .4rem); inset-inline-end:0; z-index:30; background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:.6rem .8rem; display:grid; grid-template-columns:repeat(2,minmax(8rem,1fr)); gap:.25rem .8rem; min-width:20rem}
.cols-pop label{display:flex; gap:.4rem; align-items:center; font-size:.84rem; cursor:pointer; white-space:nowrap}
.cols-pop button{grid-column:1/-1; justify-self:start; margin-top:.3rem}
.evlist{display:flex; flex-direction:column; gap:.2rem}
.ev{display:grid; grid-template-columns:6rem 1fr; gap:.7rem; padding:.3rem .5rem; border-radius:var(--r); font-size:.86rem; align-items:baseline}
.ev:nth-child(odd){background:var(--elev)}
.ev-t{color:var(--muted); font-size:.78rem}
.ev-w{overflow-wrap:anywhere}

/* right pane */
.pane{position:fixed; top:var(--top); inset-inline-end:0; bottom:0; width:min(27rem, 92vw); z-index:9; background:var(--panel); border-inline-start:1px solid var(--line-strong); box-shadow:-12px 0 32px rgba(0,0,0,.35); display:flex; flex-direction:column; animation:pane-in .22s cubic-bezier(.16,1,.3,1)}
@keyframes pane-in{from{transform:translateX(24px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){ .pane{animation:none} }
.pane-head{display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--elev)}
.pane-head strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650}
.pane-body{flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.9rem}
.pane-body .card{padding:.8rem}
.pane-body h2{margin-bottom:.35rem}
.pane-body .kv{grid-template-columns:6.5rem 1fr; font-size:.82rem}
html.pane-open .view{padding-inline-end:calc(min(27rem, 92vw) + 1.25rem)}
@media (max-width: 960px){ html.pane-open .view{padding-inline-end:1rem} .pane{width:100vw} }
.pane .hero .lv-flag img.flag.big{width:40px; height:30px}
.pane .ev{grid-template-columns:5rem 1fr; font-size:.82rem}
.pane-pinned #pane-pin{color:var(--accent)}

/* chats table */
.chat-pane-msgs{display:flex; flex-direction:column; gap:.5rem}
.chat-pane-msgs .hm{max-width:92%}
.pane .help-compose{position:sticky; bottom:0; background:var(--panel); padding-top:.5rem}
.pane .help-compose textarea{min-height:2.6rem}

.kv{display:grid; grid-template-columns:9rem 1fr; gap:.4rem; padding:.3rem 0; border-bottom:1px solid var(--line); font-size:13px}.kv b{color:var(--muted); font-weight:500}
.doc{max-width:60rem; line-height:1.6}.doc table{font-size:13px}
/* 16.14 intel sources: one <details> per source, summary = link + meta, body = what we learned */
.srclist{display:flex; flex-direction:column; gap:.25rem}
details.src{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:.35rem .6rem}
details.src>summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem}
details.src>summary::-webkit-details-marker{display:none}
details.src>summary::before{content:"›"; color:var(--muted); display:inline-block; width:.8rem; transition:transform .15s}
details.src[open]>summary::before{transform:rotate(90deg)}
details.src .src-body{margin:.4rem 0 .2rem 1.15rem; font-size:.84rem}
details.src .src-body li{margin:.15rem 0}