/* AI Precious Metals Command Center.
   Visual style from "Precious Metals Desk" (navy velvet ground, per-metal tones, Cormorant / Golos / JetBrains Mono);
   compact layout from "Табло драгметаллов": at 1366x768 the whole board fits one screen. Single dark theme by design. */
:root{
  color-scheme: dark;
  --bg:#0A101C;
  --panel:#0F1828;
  --panel-2:#16223A;
  --line:#1D2940;
  --line-2:#2B3A57;
  --ink:#ECE7DA;
  --ink-2:#BDBBB2;
  --muted:#7F899E;
  --gold:#E2B95F;
  --silver:#C9D1DC;
  --plat:#93C1D3;
  --pall:#CDA3BA;
  --up:#4CC38A;
  --down:#EF6A5E;
  --warn:#E9A93B;
  --up-bg:rgba(76,195,138,.13);
  --down-bg:rgba(239,106,94,.13);
  --warn-bg:rgba(233,169,59,.14);
  --f-display:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[hidden]{display:none!important}
html{font-size:14px;background:var(--bg)}
@media (min-width:1100px){html{font-size:clamp(12.5px,.74vw,18px)}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.42 var(--f-body);-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--muted)} .warn{color:var(--warn)}
a{color:var(--gold)}
a.btn{text-decoration:none;display:inline-block}

.app{display:flex;flex-direction:column;gap:.5rem;padding:.55rem max(16px,.9rem);min-height:100vh}
/* spec order outside the desktop grid as well: header, metal cards, Chief Analyst, chart */
.app > .top{order:-2} .app > .metals{order:-1}

/* ---------- header ---------- */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;min-width:0}
.hallmark{flex:none;display:grid;place-items:center;width:2.9rem;height:2rem;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold);font:600 .62rem/1 var(--f-mono)}
.brand-name{font:600 1.42rem/1 var(--f-display);letter-spacing:.01em;white-space:nowrap}
.brand-sub{font-size:.7rem;color:var(--muted);letter-spacing:.04em;margin-top:.15rem}
.clock{display:flex;flex-direction:column;gap:.12rem}
.clock b{font:500 1.15rem/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--gold)}
.lab{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.feeds{display:flex;gap:.9rem;align-items:center}
.feed-i{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.feed-i .ago{font:400 .66rem var(--f-mono);color:var(--muted);white-space:nowrap}
.ctrl{display:flex;gap:.45rem;align-items:center}
.btn{background:var(--panel-2);border:1px solid var(--line-2);border-radius:4px;padding:.38rem .7rem;font-size:.78rem;font-weight:500;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--gold)}

/* status chips */
.st{display:inline-flex;align-items:center;gap:.35rem;font:600 .66rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;padding:.32rem .5rem;border-radius:3px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.st::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.st.LIVE,.st.ACTIVE{background:var(--up-bg);color:var(--up)}
.st.LIVE::before{animation:pulse 2s ease-in-out infinite}
.st.DELAYED,.st.DEMO,.st.IDLE{background:var(--warn-bg);color:var(--warn)}
.st.OFFLINE,.st.ERROR{background:var(--down-bg);color:var(--down)}
.st.sm{font-size:.58rem;padding:.24rem .4rem}
@keyframes pulse{50%{opacity:.35}}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;flex:none}
.seg button{background:none;border:0;border-right:1px solid var(--line);color:var(--muted);font:500 .72rem/1 var(--f-mono);padding:.36rem .55rem;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink)}
.seg button:hover{color:var(--ink)}

.banner{display:flex;align-items:center;gap:.6rem;padding:.42rem .8rem;border-radius:5px;font-size:.8rem;background:var(--warn-bg);color:var(--warn);border:1px solid rgba(233,169,59,.3)}
.top .banner{flex-basis:100%}
.banner.crit{background:var(--down-bg);color:var(--down);border-color:rgba(239,106,94,.3)}

/* ---------- chief analyst ---------- */
.chief{display:flex;align-items:center;gap:.9rem;padding:.42rem .85rem;background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0}
.chief-tag{flex:none;font:600 .68rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.chief p{margin:0;flex:1;min-width:0;font-size:.9rem;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chief p.off{color:var(--muted)}
.chief time{flex:none;font:400 .7rem var(--f-mono);color:var(--muted);white-space:nowrap}
.chief time:empty{display:none}
.btn.sm{padding:.26rem .55rem;font-size:.7rem;flex:none;white-space:nowrap}

/* ---------- metal cards ---------- */
.metals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.metal{--m:var(--gold);position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.55rem .75rem .5rem;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"head head" "price spark" "stats stats" "foot foot";gap:.3rem .6rem;min-width:0;color:var(--ink)}
.metal:hover{border-color:var(--line-2)}
.metal[aria-pressed="true"]{border-color:var(--m);background:linear-gradient(180deg,var(--panel-2),var(--panel) 70%)}
.metal[data-sym="XAG"]{--m:var(--silver)} .metal[data-sym="XPT"]{--m:var(--plat)} .metal[data-sym="XPD"]{--m:var(--pall)}
.m-head{grid-area:head;display:flex;align-items:center;gap:.55rem;min-width:0}
.elem{flex:none;display:grid;place-items:center;width:1.95rem;height:1.95rem;border:1px solid var(--m);border-radius:3px;color:var(--m);font:600 .85rem/1 var(--f-body)}
.m-name{font:600 1.5rem/1 var(--f-display);color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sym{font:400 .68rem var(--f-mono);color:var(--muted);margin-left:auto;white-space:nowrap}
.m-price{grid-area:price;display:flex;flex-direction:column;justify-content:center;gap:.22rem;min-width:0}
.px{font:500 1.9rem/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .6s;white-space:nowrap}
.px.tick-up{color:var(--up);transition:none}
.px.tick-down{color:var(--down);transition:none}
.px.stale{color:var(--muted)}
.chg{font:500 .8rem/1.1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.spark{grid-area:spark;width:100%;height:3.3rem;display:block;min-width:0;overflow:visible}
.spark polyline{fill:none;stroke:var(--m);stroke-width:1.4;vector-effect:non-scaling-stroke}
.spark .area{fill:var(--m);opacity:.08;stroke:none}
.m-stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin:0;padding-top:.4rem;border-top:1px solid var(--line)}
.m-stats div{min-width:0}
.m-stats dt{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-stats dd{margin:0;font:500 .78rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-foot{grid-area:foot;display:flex;align-items:center;gap:.5rem;font-size:.68rem;color:var(--muted);min-width:0}
.m-foot .upd{margin-left:auto;font-family:var(--f-mono);white-space:nowrap}
.trend{display:flex;gap:.45rem}
.tc{font:500 .66rem/1 var(--f-mono);white-space:nowrap}
.tech-sum{flex:1 1 0;min-width:0;font:500 .72rem/1.2 var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tech-sum .osc-i{color:var(--ink-2)}
.tech-sum .osc-i .up{color:var(--up)} .tech-sum .osc-i .down{color:var(--down)} .tech-sum .osc-i .warn{color:var(--warn)}

/* ---------- working area ---------- */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,28rem);gap:.5rem;min-height:0}
.side{display:flex;flex-direction:column;gap:.5rem;min-height:0;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.panel-h{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;padding:.45rem .8rem;border-bottom:1px solid var(--line)}
.panel-t{font:600 .72rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.panel-h .sp{margin-left:auto}
.ctrls{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.empty{margin:0;padding:.6rem .85rem;font-size:.8rem;line-height:1.45;color:var(--muted)}

.tech .chart-wrap{position:relative;flex:1;min-height:14rem}
.tech .chart{position:absolute;inset:0}
.chart-legend{position:absolute;left:.75rem;top:.45rem;z-index:3;display:flex;gap:.8rem;font:500 .7rem var(--f-mono);color:var(--muted);pointer-events:none}
.chart-legend b{color:var(--ink);font-weight:500}
.chart-msg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;padding:1rem;color:var(--muted);font-size:.85rem;pointer-events:none}
.chart-msg small{font-size:.74rem;opacity:.85}
.chart-note{position:absolute;left:.75rem;right:4.5rem;top:1.7rem;z-index:3;font-size:.68rem;color:var(--warn);pointer-events:none;line-height:1.3}
.chart-note.info{color:var(--muted)}
.levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line)}
.lvl{padding:.42rem .75rem;border-right:1px solid var(--line);min-width:0}
.lvl:nth-child(6){border-right:0}
.lvl.osc{display:none}
.lvl > span{display:block;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl b{display:block;font:500 .82rem/1.35 var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl b.off{color:var(--muted);font-weight:400}
.lvl b.up{color:var(--up)} .lvl b.down{color:var(--down)} .lvl b.warn{color:var(--warn)}
.lvl b .up{color:var(--up)} .lvl b .down{color:var(--down)} .lvl b .warn{color:var(--warn)}

.event .empty{padding:.45rem .85rem}
.feedp{flex:1;min-height:6.5rem}
.alerts{list-style:none;margin:0;padding:0;overflow:auto;min-height:0}
.al{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.5rem;align-items:baseline;padding:.42rem .85rem;border-bottom:1px solid var(--line);font-size:.8rem;line-height:1.35;border-left:2px solid transparent}
.al time{font:500 .7rem var(--f-mono);color:var(--muted)}
.al.warning{border-left-color:var(--warn)} .al.critical{border-left-color:var(--down);background:rgba(239,106,94,.06)} .al.info{border-left-color:var(--plat)}
.al.past,.al.acked{opacity:.55}
.al.none{display:block;color:var(--muted)}
.al-why{display:block;margin-top:.1rem;font-size:.72rem;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-h{padding:.4rem .85rem .2rem;font:600 .6rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ack{background:none;border:1px solid var(--line-2);border-radius:3px;color:var(--ink-2);cursor:pointer;font-size:.72rem;padding:.12rem .4rem}
.ack:hover{border-color:var(--gold);color:var(--gold)}
/* next key event */
.nextev{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "main cd" "react react";align-items:center;gap:.15rem .8rem;padding:.42rem .85rem .45rem}
.nx-h{grid-area:head} .nx-body{grid-area:main} .nx-cd{grid-area:cd} .nx-react{grid-area:react}
.nx-h{display:flex;align-items:center;gap:.5rem;min-width:0}
.nx-h .panel-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gold)}
.nx-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.nx-vals{display:flex;flex-wrap:wrap;gap:0 .6rem}
.nx-v{white-space:nowrap}
.nx-title{display:flex;align-items:center;gap:.42rem;min-width:0;font:600 .9rem/1.3 var(--f-body)}
.nx-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-when{display:flex;flex-wrap:wrap;gap:0 .6rem;font:400 .7rem/1.35 var(--f-mono);color:var(--ink-2)}
.nx-when .nx-v{color:var(--muted)} .nx-when b{font-weight:500;color:var(--ink)}
.nx-react{display:flex;align-items:baseline;gap:.2rem .55rem;font:400 .7rem/1.35 var(--f-body);color:var(--muted);white-space:nowrap;overflow:hidden;cursor:help;min-width:0}
.rx-l{flex:none}
.rx-v{display:flex;gap:.6rem;min-width:0;font-family:var(--f-mono);color:var(--ink-2)}
.rx{--m:var(--gold);white-space:nowrap}
.rx i{font-style:normal;font-family:var(--f-body);font-weight:600;color:var(--m)}
.rx[data-sym="XAG"]{--m:var(--silver)} .rx[data-sym="XPT"]{--m:var(--plat)} .rx[data-sym="XPD"]{--m:var(--pall)}
.nx-empty{margin:0;font-size:.8rem;line-height:1.4;color:var(--muted)}
.nx-cd{flex:none;font:500 1.75rem/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--gold);white-space:nowrap}
.nx-cd.soon{color:var(--warn)}
.idot{flex:none;width:.48rem;height:.48rem;border-radius:50%;background:var(--warn)}
.idot.High{background:var(--down)}

/* events feed: segmented events / alerts */
.feedp .panel-h{padding:.35rem .8rem}
.cnt{display:inline-block;margin-left:.35rem;min-width:1.05rem;padding:0 .25rem;border-radius:.55rem;font:600 .64rem/1.05rem var(--f-mono);text-align:center;color:var(--muted);background:var(--line)}
.cnt:empty{display:none}
.cnt.hot{background:var(--down);color:var(--bg)}
.feed{list-style:none;margin:0;padding:0;overflow:auto;min-height:0}
.feed .al-h{padding:.42rem .85rem .25rem}
.feed .al-h .st{margin-left:.5rem;font-size:.54rem;padding:.16rem .32rem;vertical-align:.05rem}
.cal,.feed .cal-h{display:grid;grid-template-columns:2.6rem minmax(0,1fr) repeat(3,3.3rem);gap:0 .4rem;align-items:baseline}
.feed .al-h .sh{display:flex;align-items:center;min-width:0}
.feed .cal-h > .sh{grid-column:1/3}
.sh-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .al-h .st{flex:none}
.cal-h .cal-c{font-size:.54rem;letter-spacing:.06em}
.cal{padding:.28rem .85rem;border-bottom:1px solid var(--line);border-left:2px solid transparent;font-size:.8rem;line-height:1.35}
.cal time{font:500 .7rem var(--f-mono);color:var(--muted)}
.cal.next{border-left-color:var(--gold);background:rgba(226,185,95,.05)}
.cal.past{opacity:.5}
.cal-t{display:flex;align-items:center;gap:.42rem;min-width:0}
.cal-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-c{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .cal-c{font:400 .7rem var(--f-mono);color:var(--ink-2)}
.cal .cal-c.act{color:var(--ink);font-weight:600}
.cal .cal-c.nil{color:var(--line-2)}
.cal-h .more{flex:none;margin-left:.5rem;background:var(--panel-2);border:1px solid var(--line-2);border-radius:3px;padding:.1rem .38rem;font:600 .62rem/1.2 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer}
.cal-h .more:hover{border-color:var(--gold);color:var(--gold)}
.nw{display:flex;flex-direction:column;gap:.14rem;padding:.38rem .85rem .42rem;border-bottom:1px solid var(--line);border-left:2px solid transparent;min-width:0}
.nw.high{border-left-color:var(--down);background:rgba(239,106,94,.07)}
.nw-m{display:flex;align-items:center;gap:.45rem;min-width:0;font:400 .66rem/1.2 var(--f-mono);color:var(--muted)}
.nw-m time{flex:none}
.nw-src{min-width:0;font-family:var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp{flex:none;margin-left:auto;font:600 .56rem/1 var(--f-body);letter-spacing:.08em;padding:.2rem .34rem;border-radius:2px;background:var(--panel-2);color:var(--muted)}
.imp.HIGH{background:var(--down-bg);color:var(--down)}
.imp.MEDIUM{background:var(--warn-bg);color:var(--warn)}
.imp.LOW{background:rgba(147,193,211,.1);color:var(--plat)}
.imp.none{background:none;padding-left:.15rem;padding-right:.15rem}
.tags{flex:none;display:flex;gap:.22rem}
.tags:empty{display:none}
.mt{--m:var(--gold);font:600 .6rem/1 var(--f-body);font-style:normal;color:var(--m);border:1px solid var(--m);border-radius:2px;padding:.12rem .2rem}
.mt[data-sym="XAG"]{--m:var(--silver)} .mt[data-sym="XPT"]{--m:var(--plat)} .mt[data-sym="XPD"]{--m:var(--pall)}
.nw-t{font-size:.8rem;line-height:1.35;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
a.nw-t:hover{color:var(--gold);text-decoration:underline}
.nw-why{margin:0;font-size:.72rem;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* AI: summary lines, advisor */
.ptime{font:400 .66rem var(--f-mono);color:var(--muted);white-space:nowrap}
.ptime:empty{display:none}
.lines{list-style:none;margin:0;padding:.5rem .85rem .6rem;display:flex;flex-direction:column;gap:.32rem}
.lines li{position:relative;padding-left:.95rem;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.lines li::before{content:"";position:absolute;left:0;top:.66em;width:.42rem;height:2px;border-radius:1px;background:var(--gold);opacity:.8}
.fine{margin:0;font-size:.72rem;line-height:1.45;color:var(--muted)}
.fine.warn{color:var(--warn)}
.advp .fine{padding:0 .85rem .65rem}
.adv-row{display:block;width:100%;flex:none;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:.38rem .85rem .42rem;cursor:pointer;color:var(--ink-2)}
.adv-row:hover{background:var(--panel-2)}
.adv-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.78rem;line-height:1.38}
.adv-txt .off{color:var(--muted)}
.adv-tag{font:600 .6rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-right:.2rem}

.expo{padding:.35rem .85rem .2rem;display:flex;flex-direction:column;gap:.25rem}
.expo .empty{padding:.2rem 0}
.ex{--m:var(--gold);display:grid;grid-template-columns:1.6rem 5.4rem minmax(0,1fr) 5.6rem;gap:.5rem;align-items:center;font-size:.74rem}
.ex[data-sym="XAG"]{--m:var(--silver)} .ex[data-sym="XPT"]{--m:var(--plat)} .ex[data-sym="XPD"]{--m:var(--pall)}
.ex .nm{font:600 .74rem var(--f-body);color:var(--m)}
.ex .oz{color:var(--ink-2);white-space:nowrap}
.ex .bar{height:.35rem;background:var(--panel-2);border-radius:2px;overflow:hidden}
.ex .bar i{display:block;height:100%;background:var(--m);opacity:.75}
.ex .v{text-align:right;white-space:nowrap}
.board{width:100%;border-collapse:collapse}
.board th{font:600 .58rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.4rem .85rem .3rem}
.board td{font:500 .76rem/1.25 var(--f-mono);font-variant-numeric:tabular-nums;padding:.3rem .85rem;border-top:1px solid var(--line);white-space:nowrap}
.board .r{text-align:right}
.board-note{padding:.35rem .85rem .45rem;border-top:1px solid var(--line)}
.biz-links{display:flex;gap:1rem;padding:.4rem .85rem;border-top:1px solid var(--line);font-size:.76rem}
.biz-links a{text-decoration:none}
.biz-links a:hover{text-decoration:underline}
.biz-links form{margin:0 0 0 auto;display:flex}
.link{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.link:hover{color:var(--gold);text-decoration:underline}
.toast{position:fixed;right:1rem;top:1rem;z-index:30;cursor:pointer;max-width:24rem;display:flex;flex-direction:column;gap:.2rem;padding:.65rem .85rem;border-radius:6px;background:var(--panel-2);border:1px solid var(--line-2);border-left:3px solid var(--warn);box-shadow:0 8px 24px rgba(0,0,0,.4);animation:drop .3s ease-out}
.toast.critical{border-left-color:var(--down)} .toast.info{border-left-color:var(--plat)}
.toast b{font:600 .64rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.toast span{font-size:.86rem;line-height:1.4}
@keyframes drop{from{transform:translateY(-1rem);opacity:0}to{transform:none;opacity:1}}
.badge{position:absolute;top:.35rem;left:calc(50% + .45rem);min-width:1.15rem;height:1.15rem;padding:0 .28rem;border-radius:.6rem;background:var(--down);color:var(--bg);font:600 .64rem/1.15rem var(--f-mono);text-align:center}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
.kpi{padding:.45rem .85rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.kpi:nth-child(2n){border-right:0}
.kpi:nth-last-child(-n+2){border-bottom:0}
.kpi > span{display:block;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi b{display:block;font:500 .98rem/1.3 var(--f-mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-h{padding:.45rem .85rem 0;font:600 .64rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ---------- agents roster: one compact strip ---------- */
.agents{display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;min-width:0}
.agents-t{flex:none;display:flex;flex-direction:column;justify-content:center;gap:.1rem;padding:.35rem .8rem;background:var(--panel-2);border:0;cursor:pointer;text-align:left;color:var(--ink)}
.agents-t b{font:600 .7rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.agents-t span{font:400 .64rem var(--f-mono);color:var(--muted);white-space:nowrap}
.roster{flex:1;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));min-width:0}
.agent{background:none;border:0;border-left:1px solid var(--line);padding:.32rem .3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;cursor:pointer;min-width:0;color:var(--ink)}
.agent:hover{background:var(--panel-2)}
.agent i{font:500 .66rem var(--f-mono);font-style:normal;color:var(--muted)}
.agent .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--line-2)}
.agent .dot.ACTIVE{background:var(--up);box-shadow:0 0 0 .2rem var(--up-bg)}
.agent .dot.IDLE{background:var(--warn)}
.agent .dot.ERROR{background:var(--down);box-shadow:0 0 0 .2rem var(--down-bg)}
.agent .nm{font-size:.62rem;color:var(--ink-2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent .desc,.agent .meta{display:none}

/* ---------- drawer / bottom sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(3,6,12,.6);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(30rem,100%);background:var(--panel);border-left:1px solid var(--line-2);z-index:21;display:flex;flex-direction:column}
.drawer-h{display:flex;align-items:flex-start;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.drawer-h h2{margin:0;font:600 1.55rem/1.1 var(--f-display)}
.drawer-h p{margin:.25rem 0 0;font:400 .76rem var(--f-mono);color:var(--muted)}
.drawer-h .btn{margin-left:auto}
.drawer-b{padding:1rem 1.1rem;overflow:auto;display:flex;flex-direction:column;gap:.9rem}
.drawer-b > p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.dl{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.5rem .8rem;margin:0}
.dl dt{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.dl dd{margin:0;font-size:.88rem;overflow-wrap:anywhere}
.out{background:var(--panel-2);border-radius:4px;padding:.65rem .8rem;font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.out.warn{background:var(--warn-bg);color:var(--warn)}
.dr-sec{display:flex;flex-direction:column;gap:.5rem}
.dr-h{margin:0;font:600 .66rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.dr-lead{margin:0;font:500 1.02rem/1.45 var(--f-body);color:var(--ink)}
.drawer .lines{padding:0}
.drawer .lines li{font-size:.9rem}
.scn{background:var(--panel-2);border-radius:4px;padding:.55rem .75rem .6rem;display:flex;flex-direction:column;gap:.28rem}
.scn-h{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .6rem;font-size:.88rem}
.scn-h b{font-weight:600}
.scn p{margin:0;font-size:.85rem;line-height:1.45;color:var(--ink-2)}
.lk{margin-left:auto;font:600 .58rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:.24rem .4rem;border-radius:3px;white-space:nowrap;border:1px solid var(--line-2);color:var(--muted)}
.lk.medium{color:var(--ink-2);border-color:var(--muted)}
.lk.high{color:var(--gold);border-color:var(--gold)}

/* ---------- V12.1 market intelligence ---------- */
.btn.xs{padding:.12rem .42rem;font-size:.62rem;flex:none;white-space:nowrap;margin-left:auto}
.btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
/* price context: bid / ask / spread, only when the provider sends them */
.m-ba{font-size:.64rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* relative performance: second chart in the same frame */
.rel-legend{gap:.9rem}
.rl{--m:var(--gold);display:inline-flex;gap:.3rem;align-items:baseline}
.rl i{font-style:normal;font-family:var(--f-body);font-weight:600;color:var(--m)}
.rl b.up{color:var(--up)} .rl b.down{color:var(--down)} .rl b.flat{color:var(--ink)}
.tech-sum .warn{color:var(--warn)}
/* clickable calendar rows and released events: open the reaction history */
.cal.click,.bev.click{cursor:pointer}
.cal.click:hover,.bev.click:hover{background:var(--panel-2)}
/* impact matrix (Events panel) */
.matrix{overflow:auto;min-height:0;padding:.2rem 0 .5rem}
.mx-h{display:flex;align-items:baseline;gap:.6rem;padding:.42rem .85rem .25rem;font:600 .6rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mx-h time{margin-left:auto;font:400 .64rem var(--f-mono);letter-spacing:0;text-transform:none}
.mx{width:100%;border-collapse:collapse;table-layout:fixed}
.mx th,.mx td{padding:0;border-top:1px solid var(--line)}
.mx thead th{border-top:0;padding:.1rem 0 .25rem;text-align:center;width:3.3rem}
.mx thead th:first-child{width:auto}
.mx tbody th{text-align:left;font-weight:400}
.mx-f{display:block;width:100%;background:none;border:0;padding:.3rem .5rem .3rem .85rem;text-align:left;font-size:.76rem;line-height:1.25;color:var(--ink-2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-f:hover{color:var(--gold)}
.mx-c{display:flex;align-items:baseline;justify-content:center;gap:.18rem;width:100%;background:none;border:0;padding:.3rem 0;font:600 .78rem/1.25 var(--f-mono);cursor:pointer;color:var(--line-2)}
.mx-c small{font:500 .52rem/1 var(--f-body);letter-spacing:.04em;color:var(--muted)}
.mx-c:hover{background:var(--panel-2)}
.mx-c.pos{color:var(--up)} .mx-c.neg{color:var(--down)} .mx-c.mixed{color:var(--warn)} .mx-c.unknown{color:var(--line-2)}
span.mx-c{display:inline-flex;width:auto;padding:0 .2rem;cursor:default}
.mx-leg{margin:0;padding:.35rem .85rem 0;display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.64rem;line-height:1.35;color:var(--muted)}
.mx-k.pos{color:var(--up)} .mx-k.neg{color:var(--down)} .mx-k.mixed{color:var(--warn)}
.mx-sum{display:flex;flex-direction:column;gap:.35rem}
.mx-sr{display:flex;align-items:baseline;gap:.5rem;font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.mx-sr .mt{flex:none}
/* drawer text: section paragraphs at the drawer's reading size, notes smaller */
.mt{text-transform:none;letter-spacing:0}
.dr-sec p{margin:0;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.dr-sec p.fine,.drawer-b > p.fine{margin:0;font-size:.72rem;line-height:1.45;color:var(--muted)}
.dr-sec p.fine.warn,.drawer-b > p.fine.warn{color:var(--warn)}
.bm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.08rem .6rem;align-items:baseline;padding:.3rem .35rem;border-top:1px solid var(--line)}
.bm-p{text-align:right;font-size:.86rem;white-space:nowrap}
.bm-c,.bm-r{font-size:.72rem;color:var(--muted);white-space:nowrap}
.bm-c b{font-weight:500}
.bm-c b.up{color:var(--up)} .bm-c b.down{color:var(--down)} .bm-c b.flat{color:var(--ink-2)}
.bm-r{text-align:right}
.bt-lead{margin-left:.35rem}
/* drawer tables: day brief, reaction history, scenarios */
.rxt{width:100%;border-collapse:collapse}
.rxt th{font:600 .58rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.25rem .35rem}
.rxt td{font-size:.84rem;padding:.32rem .35rem;border-top:1px solid var(--line);white-space:nowrap}
.rxt .r{text-align:right}
.bt-n{display:flex;align-items:center;gap:.25rem}
.bt-lead{color:var(--gold);font-size:.7rem}
.sens-px .st{vertical-align:.08rem}
.dr-sub{margin:.1rem 0 0;font:600 .6rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dr-feed{border-top:1px solid var(--line);margin:0 -1.1rem}
.dr-feed .nw{padding-left:1.1rem;padding-right:1.1rem}
.bev{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;padding:.3rem .35rem;border-top:1px solid var(--line);font-size:.84rem;border-radius:3px}
.bev time{font:500 .72rem var(--f-mono);color:var(--muted)}
.bev .num{font-size:.76rem;color:var(--ink-2)}
.bev-rx{display:flex;flex-wrap:wrap;gap:.1rem .6rem;width:100%;font-family:var(--f-mono);font-size:.76rem}
.bev-rx small{font-family:var(--f-body);color:var(--muted)}
.ai-line{margin:0;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.ai-line .imp{margin-left:.2rem}
.rxt thead th{text-align:right}
.rxt thead th:first-child{text-align:left}
.rxt td{position:relative}
.rxt td.nil{color:var(--line-2)}
.rx-d{display:flex;flex-direction:column;gap:.05rem}
.rx-d small{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9rem}
.rxb{position:absolute;right:.35rem;bottom:.12rem;height:2px;max-width:calc(100% - .7rem);border-radius:1px;opacity:.7;background:var(--muted)}
.rxb.up{background:var(--up)} .rxb.down{background:var(--down)}
.rxt tfoot th{text-transform:none;letter-spacing:0;font:500 .74rem var(--f-body);color:var(--ink-2);padding-top:.35rem;border-top:1px solid var(--line-2)}
.rxt tfoot td{font-size:.78rem;color:var(--ink-2);border-top:1px solid var(--line-2)}
.rxt .tot th,.rxt .tot td{border-top:1px solid var(--line-2);font-weight:600}
.drawer .seg{align-self:flex-start}
/* business: risk view */
.risk{padding:.3rem .85rem .2rem;display:flex;flex-direction:column;gap:.22rem;overflow:auto;min-height:0}
.risk .empty{padding:.2rem 0}
.rk{--m:var(--gold);display:grid;grid-template-columns:1.6rem minmax(0,1fr) 5.4rem 4.2rem;gap:.5rem;align-items:center;font-size:.74rem}
.rk[data-sym="XAG"]{--m:var(--silver)} .rk[data-sym="XPT"]{--m:var(--plat)} .rk[data-sym="XPD"]{--m:var(--pall)}
.rk-h{font:600 .56rem/1.15 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-items:end}
.rk-h span,.rk-h .r{white-space:normal}
.rk .r{text-align:right;white-space:nowrap}
.rk .nm{font:600 .74rem var(--f-body);color:var(--m)}
.rk-s{display:grid;grid-template-columns:minmax(0,1fr) 3rem;gap:.4rem;align-items:center}
.rk-s b{font-weight:500;text-align:right}
.rk .bar{height:.35rem;background:var(--panel-2);border-radius:2px;overflow:hidden}
.rk .bar i{display:block;height:100%;background:var(--m);opacity:.75}
.risk-foot{display:flex;align-items:center;gap:.6rem;padding:.3rem .85rem .4rem}
.risk-foot .fine{flex:1;min-width:0}
/* scenario drawer */
.sens-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.sens-ctl .lab{width:100%}
.sens-in{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--muted)}
.sens-in input{width:5.5rem;font:500 .9rem var(--f-mono);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:.35rem .5rem}
.sens-in input:focus{outline:none;border-color:var(--gold)}
.sens-in input[aria-invalid="true"]{border-color:var(--down)}
.sens-res{display:flex;flex-direction:column;gap:.7rem}
.sens-dl dd{font-size:.95rem}
.sens-dl dd.up{color:var(--up)} .sens-dl dd.down{color:var(--down)}
.sens-t td{font-size:.78rem}
.sens-px{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;font-size:.84rem}
.sens-px time{color:var(--muted);font-size:.74rem}
/* correlated alert card */
.al.cluster{grid-template-columns:2.6rem minmax(0,1fr) auto;background:rgba(226,185,95,.05)}
.cl{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.cl-t{font-weight:600;color:var(--ink)}
.cl-l{font:600 .56rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.cl-f{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.08rem;font-size:.76rem;color:var(--ink-2)}
.cl-f time{font:500 .66rem var(--f-mono);color:var(--muted)}
.cl-p{margin:0;font-size:.76rem;line-height:1.4;color:var(--ink-2)}
.cl-src{margin:.1rem 0 0;font-size:.66rem;color:var(--muted)}
@media (min-width:1100px) and (min-height:600px){
  .feedp .matrix{flex:1}
  .biz #bizRisk{min-height:0;overflow:hidden;display:flex;flex-direction:column}
}
@media (min-width:1100px) and (min-height:600px) and (max-height:740px){
  .mx-f,.mx-c{padding-top:.2rem;padding-bottom:.2rem}
  .al.cluster .cl-src{display:none}
}
@media (max-width:760px){
  .chief{grid-template-columns:minmax(0,1fr) auto auto}
  .chief time{grid-column:1/-1;grid-row:3;justify-self:end}
  .mx-f{font-size:.84rem;padding:.5rem .4rem .5rem .75rem;white-space:normal}
  .mx-c{font-size:.9rem;padding:.5rem 0;min-height:40px;align-items:center}
  .mx thead th{width:3rem}
  .mx-leg{padding:.4rem .75rem 0;font-size:.72rem}
  .rk{grid-template-columns:1.6rem minmax(0,1fr) 5rem 3.6rem;font-size:.82rem}
  .risk-foot{flex-wrap:wrap;padding:.5rem .75rem .6rem}
  .risk-foot .btn{min-height:40px}
  .tech .ctrls .rel-btn{min-height:2.4rem}
  .btn.xs{padding:.3rem .55rem;font-size:.7rem;min-height:32px}
  .rxt td{font-size:.8rem;padding:.35rem .25rem}
  .sens-t td{font-size:.7rem;padding:.35rem .15rem}
  .sens-t th{padding:.25rem .15rem}
  .rxt th{padding:.25rem .25rem}
  .sens-ctl .seg{display:flex;flex-wrap:wrap}
  .sens-ctl .seg button{min-height:40px;min-width:2.6rem}
  .cl-f,.cl-p{font-size:.84rem}
}

.tabbar,.show-m{display:none}

/* ---------- desktop: whole board on one screen ---------- */
@media (min-width:1100px) and (min-height:600px){
  html,body{height:100%}
  /* spec §23 order: cards, Chief Analyst, chart. The side rail runs from under the cards to the bottom,
     alongside the Chief Analyst line, the chart and the agent strip, so its events list gets that height. */
  .app{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,28rem);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"top top" "metals metals" "chief side" "fcs side" "tech side" "agents side"}
  .top{grid-area:top} .chief{grid-area:chief} .metals{grid-area:metals} .fcs{grid-area:fcs}
  .work{display:contents}
  .tech{grid-area:tech} .side{grid-area:side} .agents{grid-area:agents}
  .feedp{overflow:hidden}
  .feedp .alerts,.feedp .feed{flex:1}
  /* the business panel gives up its exposure rows before the events list shrinks below its minimum */
  .biz{flex:0 1 auto}
  .biz .kpis,.biz .panel-h,.biz .adv-row{flex:none}
  .biz #bizPl{min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .biz .expo{min-height:0;overflow:auto}
}
/* laptop screen with browser chrome (1366x768 -> ~657px): per-metal exposure lives on the Inventory page,
   the four business KPIs share one row and news items take one line (reason in the tooltip), so a busy
   release day still leaves at least three news items in view */
@media (min-width:1100px) and (min-height:600px) and (max-height:740px){
  .biz .expo:has(.ex){display:none}
  .biz .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .biz .kpi{padding:.32rem .55rem;border-bottom:0}
  .biz .kpi:nth-child(2n){border-right:1px solid var(--line)}
  .biz .kpi:last-child{border-right:0}
  .biz .kpi > span{line-height:1.15}
  .biz .kpi b{font-size:.86rem}
  .nextev{padding-top:.32rem;padding-bottom:.32rem}
  .feed .al-h{padding:.3rem .85rem .15rem}
  .cal{padding:.17rem .85rem}
  .nw{padding:.26rem .85rem .3rem;gap:.08rem}
  .nw-t{-webkit-line-clamp:1}
  .nw-why{display:none}
}
@media (max-width:1099px){
  .metals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work{grid-template-columns:minmax(0,1fr)}
  .tech .chart-wrap{flex:none;height:24rem}
  .roster{grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr))}
  .agents{flex-direction:column}
  .agent{border-top:1px solid var(--line)}
}

/* ---------- phone: real re-layout, not a scaled desktop ---------- */
@media (max-width:760px){
  html{font-size:15px}
  .app{gap:.55rem;padding:0 12px calc(4.8rem + env(safe-area-inset-bottom,0px))}
  .app:not([data-tab="market"]) [data-pane="market"],
  .app:not([data-tab="business"]) [data-pane="business"],
  .app:not([data-tab="events"]) [data-pane="events"],
  .app:not([data-tab="agents"]) [data-pane="agents"]{display:none!important}
  .hide-m{display:none!important}
  .show-m{display:flex}

  /* sticky header: status, NY time and RU/EN are always in reach */
  .top{position:sticky;top:0;z-index:12;margin:0 -12px;padding:calc(env(safe-area-inset-top,0px) + .5rem) 12px .5rem;background:rgba(10,16,28,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;gap:.4rem .55rem}
  .brand{margin:0}
  .brand-name,.brand-sub{display:none}
  .hallmark{width:2.3rem;height:1.6rem;font-size:.52rem}
  .clock b{font-size:1.05rem}
  .clock .lab{display:none}
  .ctrl{grid-column:6;grid-row:1}
  .ctrl .btn{display:none}
  .feeds{display:contents}
  .feed-i:nth-child(1){grid-column:1/-1;grid-row:2;flex-direction:row;align-items:center;gap:.5rem}
  .feed-i:nth-child(2){grid-column:4;grid-row:1}
  .feed-i:nth-child(3){grid-column:5;grid-row:1}
  .feed-i .lab{font-size:.56rem}
  .feed-i:nth-child(n+2) .st{font-size:.56rem;padding:.24rem .38rem}
  .top .banner{grid-column:1/-1;grid-row:3;font-size:.78rem;padding:.35rem .6rem}
  .seg button{padding:.55rem .7rem;font-size:.8rem}
  /* RU / EN: a full 40x40 px tap target on every page */
  .seg button[data-lang]{min-width:40px;min-height:40px}

  .chief{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.35rem .6rem;padding:.6rem .75rem}
  .chief-tag{grid-column:1;grid-row:1}
  .chief p{grid-column:1/-1;grid-row:2;font-size:.88rem;-webkit-line-clamp:4}
  .chief .st{grid-column:1/-1;grid-row:3;justify-self:start}
  .chief .btn.sm{padding:.4rem .65rem;font-size:.74rem}
  .nextev{padding:.7rem .8rem;row-gap:.3rem}
  .nx-when{flex-direction:column}
  .nx-title{font-size:1rem}
  .nx-when,.nx-react{font-size:.76rem}
  .nx-react{flex-wrap:wrap}
  .rx-v{flex-wrap:wrap;column-gap:.8rem}
  .nx-cd{font-size:2rem}
  .feedp .panel-h{padding:.5rem .75rem}
  .feedp .seg{display:flex;flex:1}
  .feedp .seg button{flex:1;min-height:2.4rem}
  .cal,.feed .cal-h{grid-template-columns:2.5rem minmax(0,1fr) repeat(3,2.9rem);gap:0 .35rem}
  .cal{padding:.5rem .75rem;font-size:.86rem}
  .feed .al-h{padding:.55rem .75rem .3rem}
  .cal-t{align-items:baseline}
  .cal-t span{white-space:normal;overflow-wrap:anywhere}
  .cal .cal-c{font-size:.74rem}
  .nw{padding:.55rem .75rem .6rem;gap:.22rem}
  .nw-m{font-size:.72rem}
  .nw-t{font-size:.9rem;-webkit-line-clamp:3}
  .nw-why{font-size:.78rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .al-why{font-size:.78rem;white-space:normal}
  .lines{padding:.6rem .75rem .7rem}
  .lines li{font-size:.9rem}
  .advp .fine{padding:0 .75rem .7rem}

  .metals{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .metal{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "price" "spark" "stats";padding:.6rem .65rem .55rem;gap:.3rem}
  .metal{grid-template-areas:"head" "price" "spark" "stats" "foot"}
  .m-sym,.m-foot .trend{display:none}
  .m-foot .upd{margin-left:0}
  .m-name{font-size:1.2rem}
  .elem{width:1.6rem;height:1.6rem;font-size:.75rem}
  .px{font-size:1.32rem}
  .chg{font-size:.74rem}
  .spark{height:2.2rem}
  .m-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .4rem}
  /* per-card status shrinks to its coloured dot; the header keeps the full label */
  .metal .m-head .st{margin-left:auto;font-size:0;padding:.28rem;gap:0}
  .metal .m-head .st::before{width:.5rem;height:.5rem}

  .work{gap:.55rem}
  .panel-h{padding:.6rem .75rem}
  .tech .panel-t,.tech .sp{display:none}
  .tech .ctrls{width:100%;flex-direction:column;align-items:stretch;gap:.4rem}
  .tech .seg{display:flex}
  .tech .seg button{flex:1;min-height:2.4rem}
  .chart-legend .ohl{display:none}
  .tech .chart-wrap{height:17rem}
  .levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lvl{border-bottom:1px solid var(--line)}
  .lvl:nth-child(2n){border-right:0}
  #lvRange{white-space:normal}  /* the day range wraps instead of being cut on narrow phones */
  .lvl.osc{display:block;grid-column:1/-1;border-right:0;border-bottom:0}
  .empty{font-size:.86rem}
  .kpi{padding:.6rem .75rem}
  .tech-sum{display:none}
  .toast{left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + .5rem);max-width:none}
  .al{padding:.6rem .75rem;font-size:.86rem}
  .ex{font-size:.82rem}
  .biz-links{align-items:center;gap:1.2rem}
  .biz-links a,.biz-links .link{min-height:40px;display:inline-flex;align-items:center}
  .cal-h .more{min-height:32px;min-width:40px;font-size:.74rem}
  .feed .al-h .sh{flex-wrap:wrap;row-gap:.3rem}
  .feed .al-h .sh-t{white-space:normal}
  .board td{font-size:.82rem}

  /* agents: readable list */
  .agents{flex-direction:column}
  .agents-t{padding:.7rem .85rem}
  .roster{display:flex;flex-direction:column}
  .agent{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot nm st" ". desc desc";align-items:center;justify-items:start;gap:.2rem .7rem;padding:.7rem .85rem;text-align:left}
  .agent i{display:none}
  .agent .dot{grid-area:dot}
  .agent .nm{grid-area:nm;font-size:.95rem;color:var(--ink);white-space:normal}
  .agent .meta{display:block;grid-area:st;font:500 .66rem var(--f-mono);color:var(--muted)}
  .agent .meta.ACTIVE{color:var(--up)} .agent .meta.ERROR{color:var(--down)}
  .agent .desc{display:-webkit-box;grid-area:desc;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;line-height:1.4;color:var(--muted)}

  .drawer{top:auto;left:0;width:100%;max-height:88%;border-left:0;border-top:1px solid var(--line-2);border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .dl{grid-template-columns:7rem minmax(0,1fr)}

  .tabbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--panel);border-top:1px solid var(--line-2);padding:0 .25rem env(safe-area-inset-bottom,0px)}
  .tabbar button{position:relative;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:.22rem;padding:.6rem 0 .55rem;color:var(--muted);font-size:.72rem;font-weight:500;cursor:pointer;min-height:3.4rem}
  .tabbar button[aria-current="page"]{color:var(--gold)}
  .tabbar svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
}
/* narrow phones: News / AI chips carry long words (DELAYED, OFFLINE, ERROR); the colour keeps the meaning */
@media (max-width:400px){
  .top{column-gap:.4rem}
  .feed-i:nth-child(n+2) .st{letter-spacing:.04em;padding:.24rem .32rem}
  .feed-i:nth-child(n+2) .st::before{display:none}
}
@media (max-width:359px){
  .metals{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- inventory / settings pages ---------- */
.page{max-width:110rem;margin:0 auto;padding:.8rem max(16px,1rem) 2rem;display:flex;flex-direction:column;gap:.7rem}
.page-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem}
.page-top .hallmark{text-decoration:none}
.page-top h1{margin:0;font:600 1.7rem/1 var(--f-display)}
.page-nav{display:flex;gap:1rem;margin-right:auto;font-size:.86rem}
.page-nav a{text-decoration:none}
.page-nav a:hover{text-decoration:underline}
.kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:6px}
.kpi-row .kpi{border-bottom:0}
.kpi-row .kpi:nth-child(2n){border-right:1px solid var(--line)}
.kpi-row .kpi:last-child{border-right:0}
.kpi-row .kpi b{color:var(--ink);font-size:1.15rem}
.kpi-row .kpi b.up{color:var(--up)} .kpi-row .kpi b.down{color:var(--down)}
.kpis .kpi b.up{color:var(--up)} .kpis .kpi b.down{color:var(--down)} .kpis .kpi b.warn{color:var(--warn)}
.note{margin:0;font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.px-note{font:500 .76rem var(--f-mono);color:var(--ink-2);display:inline-flex;align-items:center;gap:.35rem}
.px-note time{color:var(--muted);font-weight:400}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn.primary{border-color:var(--gold);color:var(--gold)}
.btn.danger:hover{border-color:var(--down);color:var(--down)}
.form{padding:.9rem 1rem;gap:.8rem}
.form h2{margin:0;font:600 .76rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem 1rem}
.fields label,.board-row label{display:flex;flex-direction:column;gap:.3rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:0}
.fields label i{text-transform:none;letter-spacing:0;font-style:normal;opacity:.75}
.fields .wide{grid-column:1/-1}
.form input,.form select,.form textarea{font:500 .92rem var(--f-mono);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:.55rem .6rem;min-width:0;width:100%}
.form textarea{font-family:var(--f-body);resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.with-unit{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:.4rem}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .5rem;min-width:0}
.pair-h{grid-column:1/-1;font:600 .7rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.form [aria-invalid="true"]{border-color:var(--down)}
.err{margin:0;color:var(--down);font-size:.84rem}
.msg{font-size:.84rem}
.sticky{position:sticky;bottom:0;padding:.7rem 0;background:linear-gradient(transparent,var(--bg) 35%)}
.inv-wrap{overflow-x:auto}
.inv{width:100%;border-collapse:collapse}
.inv th{font:600 .58rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.55rem .6rem .4rem;white-space:nowrap}
.inv th.r,.inv td.r{text-align:right}
.inv td{font:500 .8rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums;padding:.5rem .55rem;border-top:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.inv tr{--m:var(--gold)}
.inv tr[data-sym="XAG"]{--m:var(--silver)} .inv tr[data-sym="XPT"]{--m:var(--plat)} .inv tr[data-sym="XPD"]{--m:var(--pall)}
.b-head{white-space:normal!important;min-width:12rem}
.b-cell{display:flex;align-items:center;gap:.6rem}
.b-main{display:flex;flex-direction:column;gap:.1rem;font-family:var(--f-body)}
.b-main b{font-weight:600;color:var(--m)}
.b-main small{font-size:.72rem;color:var(--muted)}
.b-act{text-align:right}
.b-act .btn{padding:.3rem .55rem;font-size:.72rem;margin-left:.3rem}
.board-rows{display:flex;flex-direction:column;gap:.5rem}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.55rem 1rem}
.checks label{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--ink-2);cursor:pointer;min-height:2rem}
.checks input{width:1.1rem;height:1.1rem;accent-color:var(--gold);flex:none}
.board-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:.6rem;align-items:end}
@media (max-width:1100px){
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-row .kpi{border-bottom:1px solid var(--line)}
  .kpi-row .kpi:nth-child(2n){border-right:0}
  .inv thead{display:none}
  .inv,.inv tbody{display:block}
  .inv tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem .8rem;padding:.75rem .8rem;border-top:1px solid var(--line)}
  .inv tr:first-child{border-top:0}
  .inv td{border:0;padding:0;text-align:left!important;white-space:normal}
  .inv td[data-l]::before{content:attr(data-l);display:block;font:600 .56rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .b-head,.b-act{grid-column:1/-1}
  .b-act{display:flex;gap:.5rem}
  .b-act .btn{margin:0;flex:1;padding:.55rem;font-size:.82rem}
}
@media (max-width:760px){
  .page{padding:.6rem 12px 2rem}
  .page-top h1{font-size:1.4rem}
  .page-nav{order:3;width:100%}
  .inv tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:.6rem;border-bottom:1px solid var(--line)}
  .board-row label:first-child{grid-column:1/-1}
}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{width:min(22rem,100%);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.login h1{margin:0;font:600 1.6rem/1.15 var(--f-display)}
.login label{display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.login input{font:500 1rem var(--f-mono);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:.7rem .75rem}
.login input:focus{outline:none;border-color:var(--gold)}
.login .btn{padding:.7rem;font-size:.9rem;border-color:var(--gold);color:var(--gold)}
.login .err{margin:0;color:var(--down);font-size:.84rem}
.login .top-row{display:flex;align-items:center;gap:.7rem}
.login .top-row .seg{margin-left:auto}

/* V12.2 Alternative Signals */
.signals{overflow:auto;min-height:0;padding:0 0 .5rem}
.sg-nav{display:flex;flex-wrap:wrap;margin:.45rem .85rem .2rem;width:auto}
.sg-nav button{flex:1 1 auto;white-space:nowrap}
.sg-exp{font-style:normal;margin-left:.2rem;color:var(--warn)}
.sg-h{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;padding:.42rem .85rem .25rem;font:600 .6rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sg-h .st{font-size:.54rem;padding:.16rem .32rem}
.sg-h time{margin-left:auto;font:400 .64rem var(--f-mono);letter-spacing:0;text-transform:none}
.signals > .fine,.signals > .sg-src,.signals > .sg-spot{padding:.3rem .85rem 0}
.signals > .btn{margin:.3rem .85rem 0}
.sg-err{color:var(--warn)}
.sg-spot{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-size:.74rem;color:var(--ink-2)}
.sg-spot .st{font-size:.54rem;padding:.16rem .32rem}
.sg-scroll{overflow-x:auto;padding:0 .85rem}
.sg-tk{width:100%;border-collapse:collapse;font-size:.76rem}
.sg-tk th{font:600 .58rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.3rem .3rem;border-bottom:1px solid var(--line)}
.sg-tk td{padding:.32rem .3rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;white-space:nowrap}
.sg-tk .r{text-align:right}
.sg-tk td .st{font-size:.5rem;padding:.12rem .28rem;vertical-align:.08rem}
.sg-tk small{font-size:.62rem;color:var(--muted)}
.sg-tk b{font-weight:600}
.sg-list .sg-it{border-bottom:1px solid var(--line);border-left:2px solid transparent}
.sg-list .sg-it.high{border-left-color:var(--down);background:rgba(239,106,94,.07)}
.sg-b{display:flex;flex-direction:column;gap:.14rem;width:100%;padding:.38rem .85rem .42rem;background:none;border:0;text-align:left;color:var(--ink);cursor:pointer;min-width:0;font:inherit}
.sg-b:hover{background:var(--panel-2)}
.sg-b .nw-t{font-size:.8rem;line-height:1.35}
.sg-b .imp{margin-left:0}
.sg-b .tags{margin-left:auto}
.sg-type{min-width:0;font-family:var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.sg-state{flex:none;font-family:var(--f-body)}
.sg-state.ongoing{color:var(--warn)} .sg-state.ended{color:var(--up)}
.sg-meta{font-size:.68rem}
.sg-lbl{flex:none;font:600 .54rem/1 var(--f-body);letter-spacing:.08em;padding:.18rem .3rem;border-radius:2px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-2)}
.sg-lbl.FACT{color:var(--up);border-color:rgba(76,195,138,.35)}
.sg-lbl.ANALYSIS,.sg-lbl.FORECAST,.sg-lbl.STATEMENT,.sg-lbl.SCENARIO{color:var(--plat);border-color:rgba(147,193,211,.35)}
.sg-lbl.EXPERIMENTAL{color:var(--warn);border-color:rgba(233,169,59,.45);background:var(--warn-bg)}
.sg-lbl.UNAVAILABLE{color:var(--muted)}
.sg-warn{margin:.3rem .85rem 0;padding:.35rem .55rem;border:1px dashed rgba(233,169,59,.5);border-radius:4px;font:600 .66rem/1.3 var(--f-body);letter-spacing:.08em;color:var(--warn);background:var(--warn-bg)}
.sg-disc{margin:.35rem .85rem 0;font-size:.78rem;line-height:1.45;color:var(--ink-2)}
.sg-dt{margin:0 0 .6rem;font-size:.92rem;line-height:1.4;color:var(--ink)}
.sg-srcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;line-height:1.35}
.sg-srcs a{color:var(--ink);overflow-wrap:anywhere}
.sg-srcs small{display:block}
.mx-c.na{color:var(--line-2);cursor:default}
.sig-checks{margin-top:.55rem;padding:.5rem 0 0 1.4rem;border-top:1px dashed var(--line)}
.checks label.off{opacity:.5}
@media (min-width:1100px) and (min-height:600px){
  .feedp .signals{flex:1}
}
@media (max-width:760px){
  .sg-nav button{min-height:40px}
  .sg-b{padding:.5rem .75rem}
  .sg-b .nw-t{font-size:.86rem}
  .sg-tk td,.sg-tk th{padding:.35rem .2rem}
  .sg-scroll{padding:0 .75rem}
  .sig-checks{padding-left:.8rem}
}

/* ---------- AI Forecast strip (dashboard) ---------- */
.fcs{display:flex;align-items:center;gap:.4rem .8rem;padding:.3rem .85rem;background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0;flex-wrap:wrap}
.fcs-tag{flex:none;font:600 .68rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.fcs-tag:hover{text-decoration:underline}
.fcs-sym{flex:none;font-size:.72rem;color:var(--muted)}
.fcs .seg button{padding:.26rem .45rem;font-size:.68rem}
.fcs-body{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.35rem .9rem;flex-wrap:wrap;font-size:.76rem}
.fcs-sc{flex:none;display:inline-flex;flex-wrap:nowrap;align-items:baseline;gap:.4rem;white-space:nowrap}
.fcs-sc b{font-weight:600;font-size:.7rem;letter-spacing:.03em}
.fcs-sc.sc-up b{color:var(--up)} .fcs-sc.sc-down b{color:var(--down)} .fcs-sc.sc-side b{color:var(--ink-2)}
.fcs-sc i{font-style:normal;color:var(--gold);font-family:var(--f-mono)}
.fcs-np,.fcs-msg{color:var(--muted);font-size:.72rem}
.fcs .st{margin-left:auto}

/* ---------- /forecast page ---------- */
.fcp .panel-h .seg{flex-wrap:wrap}
.fcx-st{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;padding:.55rem .9rem;border-bottom:1px solid var(--line);font-size:.78rem}
.kv{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
.kv i{font-style:normal;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kv b{font-weight:500;color:var(--ink)}
.q-good{color:var(--up)!important} .q-limited,.q-stale{color:var(--warn)!important} .q-insufficient,.q-none{color:var(--down)!important}
.fcx-msg{padding:.9rem;color:var(--warn);font-size:.86rem;line-height:1.45}
.fcx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;padding:.7rem .9rem}
.fcx-card{background:var(--panel-2);border-radius:5px;padding:.65rem .8rem .7rem;display:flex;flex-direction:column;gap:.35rem;border-top:2px solid var(--line-2);min-width:0}
.fcx-card.sc-up{border-top-color:var(--up)} .fcx-card.sc-down{border-top-color:var(--down)} .fcx-card.sc-side{border-top-color:var(--muted)}
.fcx-ch{display:flex;align-items:center;gap:.45rem;font-size:.9rem}
.fcx-card.sc-up .fcx-arrow{color:var(--up)} .fcx-card.sc-down .fcx-arrow{color:var(--down)} .fcx-card.sc-side .fcx-arrow{color:var(--muted)}
.fcx-prob{margin-left:auto;font-size:1.05rem;color:var(--gold)}
.fcx-range{font-size:1.05rem;color:var(--ink)}
.fcx-def{font-size:.68rem;color:var(--muted)}
.fcx-ai{margin:0;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.fcx-ai.off{color:var(--muted);font-style:italic}
.fcx-np{grid-column:1/-1;margin:0;font-size:.78rem;color:var(--warn)}
.fcx-int{padding:0 .9rem .3rem;font-size:.82rem}
.fcx-int p{margin:.25rem 0}
.fcx-hz{color:var(--ink-2)}
.fcx-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.2rem;padding:0 .9rem .4rem}
.fcx .fine,.fch .fine{padding:0 .9rem;margin:.2rem 0 .5rem}
.fcd .chk{flex-direction:row;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--ink)}
.fcd .chk input{width:1.1rem;height:1.1rem;accent-color:var(--gold)}
.fcd .err{margin:0;color:var(--down);font-size:.84rem}
.dc-sum{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font-size:.8rem;padding:.2rem 0 .6rem}
.dc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.dc-card{background:var(--panel-2);border-radius:5px;padding:.6rem .75rem;min-width:0;overflow-x:auto}
.dc-card h3{margin:0 0 .4rem;font:600 .72rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.dc-lead{margin:.15rem 0;font-size:.82rem;color:var(--ink-2)}
.dc-lead b{color:var(--ink);font-weight:600}
.dc-txt{margin:.7rem 0 .2rem}
.tscroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.78rem}
.tbl th{font:600 .6rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.35rem .4rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.35rem .4rem;border-bottom:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tbl .r{text-align:right}
.tbl.sm td,.tbl.sm th{padding:.28rem .3rem}
.fch-b{padding:.2rem .9rem .5rem}
.fch-b .dr-h{margin:.7rem 0 .35rem}
@media (max-width:760px){
  .fcs{padding:.5rem .75rem}
  .fcs-body{flex-basis:100%;flex-direction:column;align-items:flex-start;gap:.3rem}
  .fcs .st{margin-left:0}
  .fcs .seg button{min-height:36px;padding:.3rem .6rem}
  .fcx-cards,.fcx-more,.dc-grid{grid-template-columns:minmax(0,1fr)}
  .fcp .seg button{min-height:40px}
}
@media (min-width:1100px){
  .fcs{flex-wrap:nowrap}
  .fcs-body{flex-wrap:nowrap;overflow:hidden;gap:.35rem .65rem}
  .fcs .st{flex:none}
}
@media (min-width:1100px) and (min-height:600px) and (max-height:740px){
  .fcs{padding:.2rem .85rem}
}