:root{
  --ground:#EEF1F2; --surface:#FFFFFF; --surface-2:#F6F8F9; --line:#DDE4E7; --line-soft:#EAEFF1;
  --ink:#101A1E; --ink-2:#37474E; --muted:#586A72;
  --accent:#0E5C7A; --accent-soft:#D6E7EE;
  --r1:#D6E7EE; --r2:#A3C9D8; --r3:#2F7391; --r4:#0A4256; --series2:#8CB6C8;
  --sAds:#00617F; --sSubs:#C2762B; --sBask:#6B4C9A; --sSub:#2E7D4F;
  --good:#2F6E45; --good-bg:#E4F0E8; --warn:#8A5A12; --warn-bg:#F7EEDD; --crit:#9C2F28; --crit-bg:#F7E5E3;
  --shadow:0 1px 2px rgba(16,26,30,.05), 0 8px 24px -16px rgba(16,26,30,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1215; --surface:#161D21; --surface-2:#1C252A; --line:#2A363C; --line-soft:#222D32;
    --ink:#E7EEF1; --ink-2:#C2D0D6; --muted:#93A6AE;
    --accent:#58B4D4; --accent-soft:#1E3742;
    --r1:#1E3742; --r2:#2C5567; --r3:#3C7B95; --r4:#58B4D4; --series2:#7BA6BA;
    --sAds:#4FAECC; --sSubs:#E0A055; --sBask:#B296D8; --sSub:#6FC08A;
    --good:#6FC98A; --good-bg:#17301F; --warn:#E0A344; --warn-bg:#33270F; --crit:#F08A80; --crit-bg:#331B19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1215; --surface:#161D21; --surface-2:#1C252A; --line:#2A363C; --line-soft:#222D32;
  --ink:#E7EEF1; --ink-2:#C2D0D6; --muted:#93A6AE;
  --accent:#58B4D4; --accent-soft:#1E3742;
  --r1:#1E3742; --r2:#2C5567; --r3:#3C7B95; --r4:#58B4D4; --series2:#7BA6BA;
  --sAds:#4FAECC; --sSubs:#E0A055; --sBask:#B296D8; --sSub:#6FC08A;
  --good:#6FC98A; --good-bg:#17301F; --warn:#E0A344; --warn-bg:#33270F; --crit:#F08A80; --crit-bg:#331B19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px; margin:0 auto; padding:16px 20px 72px; display:flex; flex-direction:column; gap:22px}
.wrap[dir="rtl"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
.ar{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif; direction:rtl; unicode-bidi:isolate}
.num,.latn{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; unicode-bidi:isolate; direction:ltr}
[dir="rtl"] h1,[dir="rtl"] h2{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:700}

/* top bar */
.topbar{position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:var(--ground); padding:10px 0 12px; border-bottom:1px solid var(--line)}
.topbar .brand{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:20px; letter-spacing:-.01em;
  margin-inline-end:auto; white-space:nowrap}
[dir="rtl"] .topbar .brand{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:700; font-size:18px}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2px; gap:2px}
.seg button{border:0; background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600;
  padding:5px 13px; border-radius:4px; cursor:pointer}
.seg button.on{background:var(--accent); color:#fff}
:root[data-theme="dark"] .seg button.on{color:#08171D}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .seg button.on{color:#08171D} }
.seg button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* header */
.masthead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:2px solid var(--ink)}
.masthead h1{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:clamp(26px,4vw,40px);
  line-height:1.08; margin:0; letter-spacing:-.015em; text-wrap:balance}
[dir="rtl"] .masthead h1{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:700; letter-spacing:0}
.masthead .sub{color:var(--muted); font-size:13.5px; margin-top:6px; max-width:60ch}
.eyebrow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
[dir="rtl"] .eyebrow{letter-spacing:0; font-size:12px}

/* feed status */
.feeds{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
[dir="rtl"] .feeds{align-items:flex-end}
.feed{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 11px 4px 8px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none}
.feed.live .dot{background:var(--good); box-shadow:0 0 0 3px var(--good-bg)}
.feed.stale .dot{background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg)}
.feed.down .dot{background:var(--crit); box-shadow:0 0 0 3px var(--crit-bg)}
.feed b{color:var(--ink-2); font-weight:500}

/* board */
.board{background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow); overflow:hidden}
.board > header{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; justify-content:space-between;
  padding:18px 22px 14px; border-bottom:1px solid var(--line)}
.board h2{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:24px; margin:0; letter-spacing:-.01em}
[dir="rtl"] .board h2{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:700; font-size:21px; letter-spacing:0}
.board .src{font-size:11.5px; color:var(--muted)}
.scope{display:inline-block; margin-top:6px; font-size:11px; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted); white-space:nowrap}
.scope.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.board .src a{color:var(--muted)}
.pad{padding:20px 22px}
.pad + .pad{border-top:1px solid var(--line-soft)}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line-soft)}
.stat{background:var(--surface); padding:16px 22px}
.stat .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
[dir="rtl"] .stat .k{letter-spacing:0; font-size:12px}
.stat .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  font-size:29px; line-height:1.15; margin-top:4px; letter-spacing:-.02em; width:fit-content}
[dir="rtl"] .stat .v{margin-inline-start:0}
.stat .n{font-size:12px; color:var(--muted); margin-top:2px}

/* grids */
.cols{display:grid; grid-template-columns:1fr; gap:26px}
@media (min-width:820px){ .cols.two{grid-template-columns:1.15fr .85fr} }
h3.sec{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  font-weight:600; margin:0 0 12px}
[dir="rtl"] h3.sec{letter-spacing:0; font-size:12.5px}

/* table */
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{text-align:start; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:0 0 8px; padding-inline-end:12px; border-bottom:1px solid var(--line)}
[dir="rtl"] th{letter-spacing:0; font-size:11.5px}
td{padding:9px 0; padding-inline-end:12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
tr:last-child td{border-bottom:none}
td.role{font-weight:500}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500;
  padding:2px 8px; border-radius:3px; white-space:nowrap}
.chip::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.chip.ok{color:var(--good); background:var(--good-bg)}
.chip.attn{color:var(--warn); background:var(--warn-bg)}
.chip.bad{color:var(--crit); background:var(--crit-bg)}
.chip.neutral{color:var(--muted); background:var(--surface-2)}

/* bars */
.bars{display:grid; grid-template-columns:minmax(90px,.46fr) 1fr max-content;
  gap:9px 12px; align-items:center; font-size:13px}
.bar-row{display:contents}
.bar-row .lbl{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.track{height:14px; background:var(--surface-2); border-radius:2px; position:relative; overflow:hidden; direction:ltr}
.fill{height:100%; background:var(--accent); border-radius:0 3px 3px 0; transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bar-row .val{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  font-size:12.5px; color:var(--muted)}

/* funnel */
.funnel{display:flex; flex-direction:column; gap:2px}
.fn{display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; padding:11px 14px; position:relative}
.fn .fl{font-size:13px; font-weight:500; z-index:1}
.fn .fv{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; font-size:15px; z-index:1}
.fn .fp{font-size:11.5px; margin-inline-start:8px}
.fn.s1{background:var(--r1)} .fn.s2{background:var(--r2)}
.fn.s1,.fn.s2{color:var(--ink)} .fn.s1 .fp,.fn.s2 .fp{color:var(--ink-2)}
.fn.s3{background:var(--r3)} .fn.s4{background:var(--r4)}
.fn.s3,.fn.s4{color:#FFFFFF} .fn.s3 .fp,.fn.s4 .fp{color:rgba(255,255,255,.85)}
:root[data-theme="dark"] .fn.s4{color:#08171D} :root[data-theme="dark"] .fn.s4 .fp{color:rgba(8,23,29,.78)}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .fn.s4{color:#08171D}
 :root:not([data-theme="light"]) .fn.s4 .fp{color:rgba(8,23,29,.78)}
}

/* charts */
.chartbox{position:relative; direction:ltr}
svg.chart{display:block; width:100%; height:auto; overflow:visible}
.grid-line{stroke:var(--line-soft); stroke-width:1}
.axis-t{fill:var(--muted); font-size:10px; font-family:"IBM Plex Mono",monospace}
[dir="rtl"] .axis-t.w{font-family:"IBM Plex Sans Arabic",sans-serif; font-size:10.5px}
.tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .12s;
  background:var(--ink); color:var(--ground); font-size:12px; padding:6px 9px; border-radius:3px;
  white-space:nowrap; transform:translate(-50%,-125%); z-index:5; box-shadow:var(--shadow)}
.legend-row{display:flex; flex-wrap:wrap; gap:16px; margin:0 0 10px; font-size:12px; color:var(--muted)}
.legend-row span{display:inline-flex; align-items:center; gap:6px}
.swatch{width:14px; height:3px; border-radius:2px; flex:none}


/* data access */
.dot.live{background:var(--good); box-shadow:0 0 0 3px var(--good-bg)}
.dot.stale{background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg)}
.dot.down{background:var(--crit); box-shadow:0 0 0 3px var(--crit-bg)}
.accessline{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:2px 2px 0}
.accesspanel{border:1px solid var(--line); background:var(--surface); border-radius:6px;
  padding:15px 17px; box-shadow:var(--shadow)}
.accesspanel .ap-hd{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--muted); margin-bottom:11px}
.ap-row{display:flex; gap:10px; padding:10px 12px; border-radius:4px; font-size:13.5px; margin-bottom:11px}
.ap-row.bad{background:var(--crit-bg); color:var(--crit)}
.ap-fix{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.55}
.ap-row.bad .ap-fix{color:var(--crit); opacity:.85}
.ap-list{display:flex; flex-direction:column; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:4px; overflow:hidden}
.ap-item{display:flex; align-items:center; gap:9px; background:var(--surface);
  padding:9px 12px; font-size:13px}
.ap-item a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line)}
.ap-item a:hover{color:var(--accent); border-color:var(--accent)}
.ap-st{margin-inline-start:auto; font-size:11.5px; white-space:nowrap}
.ap-st.ok{color:var(--good)} .ap-st.warn{color:var(--warn)} .ap-st.bad{color:var(--crit)}
.ap-ask{margin-top:13px; padding:12px 14px; border-radius:4px; background:var(--surface-2);
  border:1px solid var(--line); font-size:13.5px}
.ap-btn{margin-top:10px; font:inherit; font-size:12.5px; padding:7px 14px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:4px}
.ap-btn:hover{opacity:.9}

/* product pulse */
.ctx{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; font-size:13px; color:var(--muted)}
.ctx .app{font-family:"Newsreader",Georgia,serif; font-size:22px; color:var(--ink); letter-spacing:-.01em}
[dir="rtl"] .ctx .app{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:700; font-size:19px}
.ctx .win{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:2px 8px}
.reads{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:4px; overflow:hidden}
.read{background:var(--surface); padding:15px 17px; display:flex; flex-direction:column; gap:6px}
.read .tag{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--muted)}
[dir="rtl"] .read .tag{letter-spacing:0; font-size:12px}
.read .hd{font-size:15px; font-weight:600; line-height:1.4; text-wrap:balance}
.read .bd{font-size:12.5px; color:var(--muted); line-height:1.55}
.read.up .tag{color:var(--good)} .read.down .tag{color:var(--warn)}
.watchstrip{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline;
  margin-top:14px; padding:15px 18px; border-radius:4px;
  background:var(--crit-bg); border-inline-start:3px solid var(--crit)}
.watchstrip .tag{grid-row:1 / span 2; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--crit); align-self:start; padding-top:3px}
[dir="rtl"] .watchstrip .tag{letter-spacing:0; font-size:12px}
.watchstrip .hd{font-size:15px; font-weight:600; line-height:1.4}
.watchstrip .bd{font-size:12.5px; color:var(--ink-2); line-height:1.55}
@media (max-width:520px){ .watchstrip{grid-template-columns:1fr} .watchstrip .tag{grid-row:auto} }
.rankrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.rank{flex:1 1 130px; border:1px solid var(--line); border-radius:4px; padding:10px 13px}
.rank .rk{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600}
[dir="rtl"] .rank .rk{letter-spacing:0; font-size:12px}
.rank .rv{font-family:"IBM Plex Mono",monospace; direction:ltr; unicode-bidi:isolate; width:fit-content; font-size:22px; line-height:1.2; margin-top:3px}
.rank .rn{font-size:11.5px; color:var(--muted)}

/* notes */
.note{display:flex; gap:12px; padding:14px 16px; border-radius:4px; background:var(--surface-2);
  border-inline-start:3px solid var(--accent); font-size:13.5px; color:var(--ink-2)}
.note.warnish{border-inline-start-color:var(--warn)}
.note strong{color:var(--ink); font-weight:600}
.err{font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; padding:10px 13px}
.err b{color:var(--ink)}

/* leaders */
.leaders{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.lc{border:1px solid var(--line); border-radius:4px; padding:12px 14px; display:flex; flex-direction:column; gap:6px}
.lc .nm{font-size:13px; font-weight:600}
.lc .rl{font-size:11px; color:var(--muted); line-height:1.4; min-height:2.8em}
.lc .big{font-family:"IBM Plex Mono",monospace; direction:ltr; unicode-bidi:isolate; width:fit-content; font-size:26px; line-height:1}
.lc .cap{font-size:11px; color:var(--muted)}

/* insights */
.insights{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border-radius:4px; overflow:hidden;
  border:1px solid var(--line-soft)}
.insight{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline;
  background:var(--surface); padding:12px 15px; font-size:13.5px}
.insight .sev{width:8px; height:8px; border-radius:50%; align-self:center; flex:none}
.insight.crit .sev{background:var(--crit); box-shadow:0 0 0 3px var(--crit-bg)}
.insight.warn .sev{background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg)}
.insight.good .sev{background:var(--good); box-shadow:0 0 0 3px var(--good-bg)}
.insight.info .sev{background:var(--muted); box-shadow:0 0 0 3px var(--surface-2)}
.insight .tx{line-height:1.5}
.insight .tx b{font-weight:600}
.insight .ref{font-size:11px; color:var(--muted); white-space:nowrap}

/* floating assistant */
.fab{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:60;
  display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
  background:var(--accent); color:#fff; font:inherit; font-size:13.5px; font-weight:600;
  padding:13px 18px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 22px -6px rgba(14,92,122,.55), 0 2px 6px rgba(0,0,0,.16)}
:root[data-theme="dark"] .fab{color:#08171D; box-shadow:0 6px 24px -6px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fab{color:#08171D; box-shadow:0 6px 24px -6px rgba(0,0,0,.8)} }
.fab:hover{filter:brightness(1.07)}
.fab.hide{display:none}

.chatpanel[hidden]{display:none!important}
.chatpanel{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:61;
  width:min(420px, calc(100vw - 32px)); max-height:min(640px, calc(100vh - 44px));
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 50px -14px rgba(16,26,30,.42), 0 3px 10px rgba(0,0,0,.12)}
:root[data-theme="dark"] .chatpanel{box-shadow:0 20px 56px -14px rgba(0,0,0,.9)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chatpanel{box-shadow:0 20px 56px -14px rgba(0,0,0,.9)} }
.cp-head{display:flex; flex-direction:column; gap:9px; padding:11px 13px;
  border-bottom:1px solid var(--line); background:var(--surface-2); flex:none}
.cp-row1{display:flex; align-items:flex-start; gap:10px}
.cp-ttl{margin-inline-end:auto; display:flex; flex-direction:column; line-height:1.25; min-width:0}
.cp-ttl > span:first-child{font-size:14px; font-weight:600}
.cp-sub{font-size:11px; color:var(--muted)}
.cp-head .seg{padding:2px; align-self:flex-start}
.cp-head .seg button{padding:4px 9px; font-size:11.5px}
.cp-x{border:0; background:transparent; color:var(--muted); font-size:22px; line-height:1;
  cursor:pointer; padding:0 4px}
.cp-x:hover{color:var(--ink)}
.chatlog{display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:14px; flex:1 1 auto; min-height:120px}
.msg{max-width:88%; padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.6}
.msg.q{align-self:flex-end; background:var(--accent); color:#fff; border-end-end-radius:3px}
:root[data-theme="dark"] .msg.q{color:#08171D}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .msg.q{color:#08171D} }
[dir="rtl"] .msg.q{align-self:flex-start; border-end-end-radius:12px; border-end-start-radius:3px}
.msg.a{align-self:flex-start; background:var(--surface-2); border:1px solid var(--line-soft); border-end-start-radius:3px}
[dir="rtl"] .msg.a{align-self:flex-end; border-end-start-radius:12px; border-end-end-radius:3px}
.msg.a b{font-weight:600}
.cp-foot{flex:none; border-top:1px solid var(--line); padding:10px 12px 12px; background:var(--surface)}
.chatrow{display:flex; gap:8px; margin-top:9px}
.chatrow input{flex:1; min-width:0; font:inherit; font-size:13.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.chatrow input:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}
.chatrow button{font:inherit; font-size:13px; font-weight:600; border:0; border-radius:8px; padding:10px 16px;
  background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap}
:root[data-theme="dark"] .chatrow button{color:#08171D}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chatrow button{color:#08171D} }
.chatrow button:disabled{opacity:.5; cursor:default}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips button{font:inherit; font-size:11.5px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer}
.chips button:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:520px){
  .chatpanel{inset-inline:16px; width:auto; inset-block-end:16px; max-height:calc(100vh - 32px)}
  .fab{inset-block-end:16px; inset-inline-end:16px}
}

footer.legend{font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:8px;
  padding-top:6px; border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}