:root{
  --bg:#F1F3F2; --surface:#FFFFFF; --surface-2:#E8ECEA; --surface-3:#DDE3E0;
  --ink:#131A1F; --ink-2:#4C575E; --ink-3:#7A858C; --line:#D5DBD8;
  --onair:#C96A00; --onair-soft:#FBEEDC; --ready:#0C7E72; --ready-soft:#DBEFEC;
  --alert:#BF342D; --alert-soft:#FAE2E0; --warn:#9A6B00; --warn-soft:#F8EFD8;
  --disp:"Barlow Condensed",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:7px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0D1317; --surface:#151D23; --surface-2:#1C262D; --surface-3:#243039;
  --ink:#E6ECEA; --ink-2:#A5B1B7; --ink-3:#74808A; --line:#27323A;
  --onair:#FF9F1C; --onair-soft:#3A2A12; --ready:#2EC4B6; --ready-soft:#0F312E;
  --alert:#E8615A; --alert-soft:#3A1D1B; --warn:#E0A736; --warn-soft:#332711;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body)}
a{color:var(--ready);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--onair);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---- shell ---- */
.app{display:grid;grid-template-columns:76px minmax(0,1fr);min-height:100vh}
@media(max-width:820px){.app{grid-template-columns:1fr}}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:13px 0}
@media(max-width:820px){.rail{flex-direction:row;justify-content:flex-start;overflow-x:auto;
  border-right:0;border-bottom:1px solid var(--line);padding:8px}}
.brand{width:40px;height:40px;border-radius:9px;background:var(--onair);color:#fff;display:grid;
  place-items:center;font:700 19px var(--disp);margin-bottom:9px;flex:none}
@media(max-width:820px){.brand{margin:0 8px 0 0}}
.rail a{width:58px;padding:9px 3px;border-radius:var(--r);display:grid;gap:2px;justify-items:center;
  color:var(--ink-3);flex:none}
.rail a:hover{background:var(--surface-2);color:var(--ink)}
.rail a.on{background:var(--onair-soft);color:var(--onair)}
.rail .ic{font-size:17px;line-height:1}
.rail .lb{font:600 11px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.rail .sp{flex:1}
main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);
  background:var(--surface);flex-wrap:wrap}
.top h1{font:700 21px var(--disp);margin:0}
.grow{flex:1}
.view{padding:18px;flex:1;min-width:0}

/* ---- atoms ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font:11.5px var(--mono);padding:4px 9px;
  border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.chip.ok{border-color:var(--ready);color:var(--ready);background:var(--ready-soft)}
.chip.ok .dot{background:var(--ready)}
.chip.air{border-color:var(--onair);color:var(--onair);background:var(--onair-soft)}
.chip.air .dot{background:var(--onair)}
.chip.bad{border-color:var(--alert);color:var(--alert);background:var(--alert-soft)}
.chip.bad .dot{background:var(--alert)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.phead{display:flex;align-items:baseline;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line)}
.phead h2{font:700 14px var(--disp);letter-spacing:.06em;text-transform:uppercase;margin:0;color:var(--ink-2)}
.phead .cnt{margin-left:auto;font:12px var(--mono);color:var(--ink-3)}
.btn{display:inline-block;background:var(--ready);color:#fff;border-radius:6px;padding:8px 15px;
  font:700 15px var(--disp);letter-spacing:.02em}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--ready);color:var(--ready);background:var(--ready-soft);filter:none}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.lbl{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
input[type=text],input[type=password],input[type=search],input[type=number],textarea,select{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
textarea{resize:vertical}
.note{border-left:3px solid var(--ready);background:var(--ready-soft);padding:10px 13px;
  border-radius:0 5px 5px 0;margin:0 0 14px;font-size:14px}
.note.bad{border-left-color:var(--alert);background:var(--alert-soft)}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
tr:last-child td{border-bottom:0}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3)}
.empty .big{font:700 20px var(--disp);color:var(--ink-2);margin-bottom:4px}

/* ---- inbox ---- */
.inbox{display:grid;grid-template-columns:300px minmax(0,1fr) 290px;gap:14px;align-items:start}
@media(max-width:1180px){.inbox{grid-template-columns:270px minmax(0,1fr)}}
@media(max-width:820px){.inbox{grid-template-columns:1fr}}
.conv{display:grid;grid-template-columns:4px 1fr;border-bottom:1px solid var(--line);width:100%;text-align:left}
.conv:last-child{border-bottom:0}
.conv .bar{background:var(--ln,var(--ink-3))}
.conv .in{padding:9px 11px 10px 3px;min-width:0}
.conv:hover{background:var(--surface-2)}
.conv.on{background:var(--onair-soft)}
.conv .shop{font:700 15px var(--disp);color:var(--ln,var(--ink))}
.conv .who{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .meta{display:flex;gap:7px;font:11px var(--mono);color:var(--ink-3);margin-top:2px}
.conv .meta .t{margin-left:auto}

.thread{display:flex;flex-direction:column;min-height:420px}
.thead{padding:11px 14px;border-bottom:1px solid var(--line);background:var(--onair-soft);
  display:flex;gap:11px;align-items:center;flex-wrap:wrap;border-radius:var(--r) var(--r) 0 0}
.thead .shopname{font:700 24px var(--disp);color:var(--onair);line-height:1}
.script{margin:0;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:15px}
.script b{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px}
.msgs{padding:14px;display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}
.msg{max-width:78%;padding:8px 12px;border-radius:12px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.msg.in{background:var(--surface-2);align-self:flex-start;border-bottom-left-radius:3px}
.msg.out{background:var(--ready-soft);align-self:flex-end;border-bottom-right-radius:3px}
.msg .t{display:block;font:10.5px var(--mono);color:var(--ink-3);margin-top:3px}
.composer{border-top:1px solid var(--line);padding:11px 14px;display:flex;gap:9px;align-items:flex-end}
.composer textarea{min-height:44px;max-height:140px}
.ctx{padding:12px 13px;display:grid;gap:11px}
.ctx .name{font:700 18px var(--disp)}
.prod{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.prod:last-child{border-bottom:0}
.prod .pr{font:13px var(--mono)}
.prod small{display:block;font:11px var(--mono);color:var(--ink-3)}

/* ---- login ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .box{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:26px}
.login h1{font:800 26px var(--disp);margin:0 0 3px}
.login p.s{color:var(--ink-3);font-size:14px;margin:0 0 20px}
.login label{display:block;margin-bottom:12px}
.login .lbl{margin-bottom:4px}

/* ---- cards ---- */
.g{display:grid;gap:14px}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card h3{font:700 13px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.big{font:700 38px/0.95 var(--disp);font-variant-numeric:tabular-nums}
.big small{font:500 14px var(--body);color:var(--ink-3)}
.meter{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden;margin:10px 0 4px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--ready)}
.meter.warn i{background:var(--warn)}
.mlab{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--ink-3)}
.pill{display:inline-block;font:10.5px var(--mono);padding:2px 7px;border-radius:999px}
.pill.ok{background:var(--ready-soft);color:var(--ready)}
.pill.no{background:var(--alert-soft);color:var(--alert)}
.pill.w{background:var(--warn-soft);color:var(--warn)}