/* Layout: a product console — top bar with role switch, filterable signal queue left, one account workspace right, Ask Claude under it */
:root{
  --bg:#F6F8F7; --panel:#FFFFFF; --ink:#0F1613; --ink-2:#4B5752; --ink-3:#5F6B66; --line:#DEE5E1;
  --green:#00C97A; --green-ink:#00744A; --green-wash:#E2F7EC;
  --purple:#6B4FFF; --purple-ink:#4A33D4; --purple-wash:#EEEBFF;
  --amber-ink:#8A5300; --amber-wash:#FFF3DC; --red-ink:#A12B2B; --red-wash:#FDECEC;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B100E; --panel:#121916; --ink:#E7EEEA; --ink-2:#A2AFA9; --ink-3:#74827B; --line:#25302C;
  --green:#00C97A; --green-ink:#3BE09B; --green-wash:#0D2A1D;
  --purple:#8B76FF; --purple-ink:#B7AAFF; --purple-wash:#1D1840;
  --amber-ink:#F2B85A; --amber-wash:#2B2210; --red-ink:#FF9A9A; --red-wash:#3A1717; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B100E; --panel:#121916; --ink:#E7EEEA; --ink-2:#A2AFA9; --ink-3:#74827B; --line:#25302C;
  --green:#00C97A; --green-ink:#3BE09B; --green-wash:#0D2A1D;
  --purple:#8B76FF; --purple-ink:#B7AAFF; --purple-wash:#1D1840;
  --amber-ink:#F2B85A; --amber-wash:#2B2210; --red-ink:#FF9A9A; --red-wash:#3A1717; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;padding-inline:16px;padding-block:0 40px}
.app{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
button{font:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.mono{font-family:var(--mono)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wordmark{font-weight:700;font-size:18px;letter-spacing:-.02em}
.wordmark i{font-style:normal;color:var(--green)}
.brand .sub{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.roles{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--panel)}
.roles button{border:0;background:none;color:var(--ink-2);padding:6px 14px;border-radius:999px;font-weight:500}
.roles button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.sample{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:999px;background:var(--amber-wash);color:var(--amber-ink);white-space:nowrap}
.greet{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.greet h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em}
.greet p{margin:2px 0 0;color:var(--ink-2)}
.stamp{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kpi span{font-size:12.5px;color:var(--ink-2)}
.kpi b{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0}
.ph{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ph h2{margin:0;font-size:13px;font-weight:600}
.count{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.filters{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.f{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);border-radius:999px;padding:3px 10px;font-size:12px}
.f[aria-pressed="true"]{background:var(--green-wash);border-color:var(--green);color:var(--green-ink)}
.queue{list-style:none;margin:0;padding:6px;max-height:820px;overflow-y:auto}
.qi{width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.qi:hover{background:var(--bg)}
.qi[aria-current="true"]{border-color:var(--green);background:var(--green-wash)}
.qi .row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.qi b{font-size:14px;font-weight:600}
.qi .loc{font-size:12px;color:var(--ink-3)}
.qi .sig{font-size:12.5px;color:var(--ink-2)}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.p-new{background:var(--purple-wash);color:var(--purple-ink)}
.p-q{background:var(--green-wash);color:var(--green-ink)}
.p-skip{background:var(--bg);color:var(--ink-3);border:1px solid var(--line)}
.p-warn{background:var(--amber-wash);color:var(--amber-ink)}
.p-crit{background:var(--red-wash);color:var(--red-ink)}
.score{font-family:var(--mono);font-size:12px;color:var(--green-ink);font-weight:500}
.detail{padding:18px;display:flex;flex-direction:column;gap:18px}
.dh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:start}
.dh h3{margin:0;font-size:21px;font-weight:650;letter-spacing:-.01em}
.dh .meta{color:var(--ink-3);font-size:13px}
.dh .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.clock{font-family:var(--mono);font-size:12px;color:var(--green-ink)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.card{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.card .v{font-weight:600}
.card .s{font-size:12.5px;color:var(--ink-2)}
.src{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.sec{display:flex;flex-direction:column;gap:8px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);background:var(--bg)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:none}
.ok{color:var(--green-ink);font-family:var(--mono);font-size:11.5px}
.acts{display:inline-flex;gap:6px}
.mini.li{font-weight:700;color:#0A66C2;min-width:30px}
.mini{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:3px 8px;border-radius:6px;font-size:12px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.box{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
dl.snap{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
dl.snap dt{color:var(--ink-3)}
dl.snap dd{margin:0}
.ins{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.say{background:var(--purple-wash);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink)}
.say b{color:var(--purple-ink)}
textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;line-height:1.6;background:var(--bg);color:var(--ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:9px 14px;border-radius:8px;font-weight:500}
.btn.primary{background:var(--green);border-color:var(--green);color:#04281A;font-weight:600}
.btn[disabled]{opacity:.55;cursor:default}
.hint{font-size:12px;color:var(--ink-3)}
.sources{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sources .s{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.log li{display:grid;grid-template-columns:76px 1fr;gap:10px;font-size:13px}
.log .t{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding-top:1px}
.ask{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.ask .q{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px}
.chip:hover{border-color:var(--purple)}
.answer{border-left:3px solid var(--purple);border-radius:0;padding:4px 0 4px 12px;font-size:13.5px}
.answer .who{font-family:var(--mono);font-size:11px;color:var(--purple-ink);display:block;margin-bottom:2px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px}
.tile .n{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile .d{font-size:12px;color:var(--ink-2)}
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.bars{display:flex;flex-direction:column;gap:10px}
.barrow{display:grid;grid-template-columns:170px 1fr 40px;gap:10px;align-items:center;font-size:13px}
.track{height:10px;border-radius:5px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.fill{height:100%;background:var(--green)}
.toast{position:sticky;bottom:12px;margin-inline:auto;max-width:560px;background:var(--ink);color:var(--panel);padding:12px 16px;border-radius:10px;font-size:13.5px;text-align:center}
.foot{font-size:12px;color:var(--ink-3);text-align:center}
@media (max-width:980px){.grid{grid-template-columns:1fr}.queue{max-height:360px}}
@media (max-width:760px){.cards,.tiles,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.two,.brief{grid-template-columns:1fr}}
@media (max-width:480px){.cards,.tiles,.kpis{grid-template-columns:1fr}.barrow{grid-template-columns:120px 1fr 36px}}
@media (prefers-reduced-motion:no-preference){.qi,.btn,.chip,.f{transition:background .15s,border-color .15s}}
[hidden]{display:none!important}
.clients button{padding:6px 12px}
.clients .seg{font-family:var(--mono);font-size:10.5px;color:inherit;opacity:.7;margin-left:6px}
.strip{display:grid;grid-template-columns:minmax(220px,auto) minmax(0,1fr);gap:16px;align-items:center;padding:12px 14px}
.plan{display:flex;flex-direction:column;gap:4px}
.plan b{font-size:14px}
.plan .tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tag.g{background:var(--green-wash);border-color:transparent;color:var(--green-ink)}
.tag.r{background:var(--red-wash);border-color:transparent;color:var(--red-ink)}
.stages{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.stg{border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stg .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.stg .t{font-size:12px;font-weight:500;line-height:1.3}
.stg .st{font-family:var(--mono);font-size:10.5px;color:var(--green-ink)}
.stg.off{border-style:dashed}
.stg.off .t,.stg.off .st{color:var(--ink-3)}
.stg.paused .st{color:var(--red-ink)}
.stg.warn{border-color:var(--amber-ink)}
.stg.warn .st{color:var(--amber-ink)}
.incident{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--amber-ink);background:var(--amber-wash);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--ink)}
.incident .ic{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--amber-ink);white-space:nowrap;padding-top:2px}
.incident p{margin:0}
.incident .meta{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.ctl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ctl:last-child{border-bottom:0}
.ctl .d{font-size:12.5px;color:var(--ink-2)}
.toggle{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;background:var(--green-wash);color:var(--green-ink);white-space:nowrap}
.toggle[disabled]{opacity:.5;cursor:default}
.toggle[aria-pressed="true"]{background:var(--red-wash);color:var(--red-ink)}
.dots{display:inline-flex;gap:4px}.dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);background:var(--bg)}.dot.d1{background:var(--amber-wash);border-color:var(--amber-ink)}.dot.d2{background:var(--green);border-color:var(--green)}
.dc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.dcq{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}.dcq .q{font-size:12px;font-weight:600}.dcq .a{font-size:12px;color:var(--ink-2)}.dcq.s0{border-style:dashed}.dcq.s0 .a{color:var(--red-ink)}
@media (max-width:760px){.dc{grid-template-columns:1fr 1fr}}
.fu{list-style:none;margin:0;padding:6px 8px}
.fu li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line)}
.fu li:last-child{border-bottom:0}
.fu .when{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.fu .when.late{color:var(--red-ink);font-weight:600}
.fu .what b{font-weight:600}
.fu .src{display:block}
.fu .btns{display:flex;gap:6px}
.fu li.done .what{text-decoration:line-through;color:var(--ink-3)}
.fu-note{margin:0;padding:0 14px 12px}
@media (max-width:760px){.fu li{grid-template-columns:1fr}.fu .btns{justify-content:flex-start}}
.lock{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding:24px 16px;text-align:center}
@media (max-width:980px){.strip{grid-template-columns:1fr}.stages{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Website demo bar */
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:12px 0;border-bottom:1px solid var(--line)}
.demo-bar a.home{font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.demo-bar a.home i{font-style:normal;color:var(--green)}
.demo-bar .note{font-size:13px;color:var(--ink-2)}
.demo-bar a.cta{background:var(--green);color:#04281A;font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;text-decoration:none}
.demo-bar a:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

.fb-btn{margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 12px;border-radius:999px;font-weight:500;font-size:13px}
.fb-btn:hover{border-color:var(--purple);color:var(--purple-ink)}
dialog.fb{border:1px solid var(--line);border-radius:12px;padding:0;width:min(440px,calc(100vw - 32px));color:var(--ink);background:var(--panel)}
dialog.fb::backdrop{background:rgba(18,20,28,.35)}
.fb form{padding:20px;display:flex;flex-direction:column;gap:12px}
.fb h2{font-size:17px;margin:0}
.fb p.note{font-size:12.5px;color:var(--ink-3);margin:0}
.fb .types{display:flex;gap:6px;flex-wrap:wrap}
.fb .types button{border:1px solid var(--line);background:none;border-radius:999px;padding:5px 12px;font-size:13px;color:var(--ink-2)}
.fb .types button[aria-pressed="true"]{border-color:var(--purple);background:var(--purple-wash);color:var(--purple-ink)}
.fb textarea{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:10px;min-height:96px;resize:vertical;color:var(--ink);background:var(--panel)}
.fb .ctx{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.fb .row{display:flex;gap:8px;justify-content:flex-end}
.fb .send{background:#00C97A;border-color:#00C97A;color:#04140C}

:root[data-theme="light"]{color-scheme:light}
.theme-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);padding:6px 12px;border-radius:999px;font-weight:500;font-size:13px}
.theme-btn:hover{color:var(--ink)}