/* ============================================================
   Trade-Up Contract — v0-inspired composition, ТЗ-compliant
   Fonts: Rajdhani (display) + Share Tech Mono (telemetry)
   ============================================================ */
:root{
  --bg:#0E1016;
  --panel:#161922;
  --panel-2:#10131a;
  --line:#262b38;
  --line-soft:#1c212c;
  --txt:#e8edff;
  --txt-2:#a0a8c0;
  --txt-dim:#6b7494;
  --rar:#4b69ff;            /* mil-spec rarity blue */
  --rar-2:#7b93ff;
  --err:#ff4d4d;
  --gold-1:#F5B942;
  --gold-2:#FFD76A;
  --ok:#4cff91;
  --radius:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Rajdhani',system-ui,sans-serif;
  min-height:100dvh;display:flex;flex-direction:column;
  position:relative;overflow-x:hidden;overflow-y:scroll;
  scrollbar-gutter:stable;
}

/* ===================== background ===================== */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg__art{
  position:absolute;inset:0;
  background:url('assets/bg-cs2.jpg') center 16% / cover no-repeat;
  filter:saturate(.95) contrast(1.04) brightness(.82) blur(2px);transform:scale(1.06);
}
/* clean, evenly-tiled inventory wall — no rotation, aligned grid */
.bg__art--inv{
  display:grid;grid-template-columns:repeat(7,1fr);align-content:space-around;justify-items:center;align-items:center;
  gap:1.2vh 1.4vw;padding:1.4vh 1.2vw;background:none !important;
  filter:saturate(.95) brightness(.8) blur(3px);
}
.bg__art--inv img{width:92%;max-height:84px;object-fit:contain}
.bg__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(14,16,22,.46) 0%, rgba(14,16,22,.22) 34%, rgba(14,16,22,.36) 72%, rgba(11,12,17,.66) 100%),
    radial-gradient(150% 120% at 50% 45%, rgba(14,16,22,.06) 32%, rgba(11,12,17,.55) 100%);
  transition:background .6s ease;
}
/* background stays consistent across all screens — state is signalled by UI accents
   (nav status, status dot, slot colour, progress bar), not by recolouring the backdrop */
.bg__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.14) 3px 4px);opacity:.3;mix-blend-mode:overlay}

/* ===================== nav ===================== */
.nav{
  position:relative;z-index:2;height:54px;
  display:flex;align-items:stretch;justify-content:space-between;gap:18px;
  padding:0 28px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,19,26,.95), rgba(14,16,22,.9));
}
.nav__brand{font-weight:700;font-size:17px;letter-spacing:2px;color:var(--txt);display:flex;align-items:center;gap:9px}
.nav__brand em{font-style:normal;color:var(--txt-dim);font-size:11px;letter-spacing:2.5px;font-weight:600}
.nav__mark{color:var(--gold-1)}
.nav__links{display:flex;align-items:stretch;gap:30px}
.nav__links a{display:flex;align-items:center;height:100%;position:relative;font-family:'Saira',sans-serif;font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt-2);cursor:pointer;transition:color .2s}
.nav__links a:hover{color:var(--txt)}
.nav__links a.is-active{color:var(--rar-2)}
.nav__links a.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rar);box-shadow:0 0 8px var(--rar)}
/* locked sections — decorative nav that can't be opened; lock reveals on hover */
.nav__links a.is-locked{cursor:not-allowed}
.nav__links a.is-locked:hover{color:var(--txt-2)}
.nav__links a.is-locked::after{content:'\1F512';margin-left:6px;font-size:11px;opacity:0;transition:opacity .55s ease}
.nav__links a.is-locked:hover::after{opacity:.85;animation:lockbreathe 1.9s ease-in-out .55s infinite}
@keyframes lockbreathe{0%,100%{opacity:.85}50%{opacity:.32}}
.nav__status{display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--rar-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--rar);box-shadow:0 0 9px var(--rar);animation:pulse 1.1s infinite}
.dot--err{background:var(--err);box-shadow:0 0 9px var(--err)}
.dot--ok{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:none}
body[data-screen="2"] .nav__status{color:var(--err)}
body[data-screen="3"] .nav__status,body[data-screen="4"] .nav__status,body[data-screen="5"] .nav__status{color:var(--ok)}

/* ===================== stage ===================== */
.stage{
  position:relative;z-index:1;flex:1;
  width:100%;max-width:min(1320px, 95vw);margin:0 auto;
  padding:6px 20px 18px;
  display:flex;flex-direction:column;gap:14px;justify-content:center;
}

/* title — fixed block height so changing text never shifts the layout below */
.title{text-align:center;min-height:78px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.title__eyebrow{
  font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:4px;
  color:var(--gold-1);opacity:.85;text-transform:uppercase;
}
.title__h{
  font-weight:700;font-size:40px;letter-spacing:3px;line-height:1.04;margin:7px 0 7px;
  text-transform:uppercase;color:var(--txt);
  text-shadow:0 2px 24px rgba(75,105,255,.25);
  min-height:50px;max-width:100%;display:flex;align-items:center;justify-content:center;text-align:center;
}
.title__sub{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--txt-2);min-height:16px}

/* layout: grid | sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:18px;align-items:start;min-width:0}
.left{display:flex;flex-direction:column;gap:9px;min-width:0}

/* corner brackets */
.brackets{position:relative}
.brackets::before,.brackets::after{content:'';position:absolute;width:13px;height:13px;border:2px solid var(--rar);opacity:.5;pointer-events:none;z-index:3}
.brackets::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.brackets::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--txt-dim);text-transform:uppercase}
.panelhead__count{color:var(--rar-2)}

/* ===================== grid + slots ===================== */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:16px;background:linear-gradient(180deg, rgba(20,23,31,.86), rgba(12,14,19,.84));border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.slot{
  --rc:var(--rar);--g:75,105,255;position:relative;aspect-ratio:1/1;min-width:0;border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg, rgba(26,30,40,.72) 0%, rgba(15,18,25,.78) 60%);
  border:1px solid var(--line);border-bottom:2px solid var(--rc);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
/* dynamic breathing rarity glow — staggered per card so it's alive, not identical-static (no color-mix → broad support) */
.slot::after{content:'';position:absolute;left:-14%;right:-14%;bottom:-14%;height:64%;z-index:0;pointer-events:none;
  background:radial-gradient(72% 100% at 50% 124%, rgba(var(--g),.92), rgba(var(--g),.24) 38%, transparent 72%);
  animation:glowpulse var(--glow-dur,4s) ease-in-out var(--glow-delay,0s) infinite;}
.slot--empty::after{display:none}
.slot__img{position:relative;z-index:2;width:92%;height:80%;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.55));transition:transform .25s ease}
.slot__name{position:absolute;left:6px;right:6px;bottom:6px;font-size:9px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--txt-2);text-align:center;line-height:1.05;text-shadow:0 1px 3px #000;opacity:0;transition:opacity .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot:hover{transform:translateY(-3px);border-color:var(--rc);box-shadow:0 12px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(var(--g),.55)}
.slot:hover .slot__img{transform:scale(1.05)}
.slot:hover .slot__name{opacity:1}
.slot.is-scan::before{content:'';position:absolute;top:0;bottom:0;left:0;width:100%;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(130,165,255,.16) 50%,transparent 70%);transform:translateX(-100%);animation:scan var(--scan-dur,3.4s) linear var(--scan-delay,0s) infinite;will-change:transform}

/* sequential fill-in intro (screen 1) — items drop into the slots and snap into place */
.grid.intro > div{opacity:0;transform:translateY(-24px) scale(.92);transition:opacity .26s ease, transform .52s cubic-bezier(.32,1.5,.5,1)}
.grid.intro > div.in{opacity:1;transform:none}

.slot--empty{background:linear-gradient(180deg,#1c170d,#100d07);border:1px dashed rgba(245,185,66,.5);border-bottom:2px solid var(--gold-1);flex-direction:column;gap:3px}
/* gold "target" glow + gentle pulse — this is the slot the user must fill
   (inner radial: .slot has overflow:hidden, so an outer box-shadow halo would be clipped) */
.slot--empty::before{content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;z-index:1;
  background:radial-gradient(70% 90% at 50% 100%, rgba(245,185,66,.5), rgba(245,185,66,.14) 45%, transparent 72%);
  box-shadow:inset 0 0 18px rgba(245,185,66,.3);
  animation:targetpulse 1.8s ease-in-out infinite}
.slot--empty .slot__hint{position:relative;z-index:2;font-family:'Share Tech Mono',monospace;font-size:8.5px;color:var(--gold-2);text-transform:uppercase;letter-spacing:1px;opacity:.85}
.slot--empty .slot__plus{position:relative;z-index:2}
/* action-required: same gold target, stronger + clickable, with a big + */
.slot--empty.is-error{cursor:pointer}
.slot--empty.is-error::before{background:radial-gradient(70% 90% at 50% 100%, rgba(245,185,66,.72), rgba(245,185,66,.22) 45%, transparent 74%);box-shadow:inset 0 0 26px rgba(245,185,66,.45);animation:targetpulse 1.2s ease-in-out infinite}
.slot--empty.is-error .slot__hint{color:var(--gold-2);opacity:1}
.slot--empty.is-error .slot__plus{font-size:30px;font-weight:700;color:var(--gold-2);line-height:.9;text-shadow:0 0 16px rgba(245,185,66,.75);margin-bottom:2px}
.slot--empty.is-error:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 36px rgba(245,185,66,.55)}
.slot--catalyst{--rc:var(--gold-1);--g:245,185,66;border:1px solid var(--gold-1);border-bottom:2px solid var(--gold-2);background:radial-gradient(85% 62% at 50% 116%, rgba(245,185,66,.66), transparent 66%),linear-gradient(180deg,#2a2110,#15110a);box-shadow:0 0 30px rgba(245,185,66,.45), inset 0 0 20px rgba(245,185,66,.14);animation:caseinject .55s cubic-bezier(.2,.9,.25,1)}
/* one-shot light burst when the case lands — reads as a "found it!" moment */
.slot--catalyst::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 48%, rgba(255,244,214,.95), rgba(245,185,66,.35) 42%, transparent 70%);opacity:0;animation:caseflash .75s ease-out}
/* steady golden breathing so it stays the standout tile, not just at arrival */
.slot--catalyst::after{display:block !important;content:'';position:absolute;left:-16%;right:-16%;bottom:-16%;height:70%;z-index:0;pointer-events:none;background:radial-gradient(72% 100% at 50% 124%, rgba(245,185,66,.95), rgba(245,185,66,.3) 40%, transparent 74%);animation:glowpulse 2.6s ease-in-out infinite}
.slot--catalyst.is-active{box-shadow:0 0 44px rgba(245,185,66,.62), inset 0 0 26px rgba(245,185,66,.2)}
.slot--catalyst .slot__name{color:var(--gold-2);opacity:1;font-weight:700}
.slot__img--case{position:relative;z-index:2;width:100%;height:88%;filter:drop-shadow(0 4px 18px rgba(245,185,66,.7)) drop-shadow(0 0 10px rgba(255,215,106,.55))}

/* covert pool */
.pool{display:flex;align-items:center;gap:12px;margin-top:10px;min-height:42px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft);border-radius:3px;padding:6px 12px;overflow:hidden;transition:opacity .3s}
.pool.is-off{visibility:hidden}   /* hides contents but keeps the reserved box → grid stays constant */
.pool.is-off .pool__group{animation-play-state:paused}
.pool__label{flex:0 0 auto;font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--txt-dim)}
.pool__label::after{content:'…'}   /* static — blinking changed width and jittered the skins */
.pool__viewport{flex:1 1 auto;overflow:hidden;position:relative;contain:layout paint}
.pool__viewport::before,.pool__viewport::after{content:'';position:absolute;top:0;bottom:0;width:34px;z-index:2;pointer-events:none}
.pool__viewport::before{left:0;background:linear-gradient(90deg, rgba(12,14,19,.92), rgba(12,14,19,0))}
.pool__viewport::after{right:0;background:linear-gradient(270deg, rgba(12,14,19,.92), rgba(12,14,19,0))}
.pool__track{display:flex;width:max-content}
.pool__group{display:flex;flex:0 0 auto;animation:marquee 40s linear infinite;will-change:transform;backface-visibility:hidden}
.pool__item{flex:0 0 auto;width:50px;height:30px;margin-right:22px;display:flex;align-items:center;justify-content:center;opacity:.6}
.pool__item img{max-width:100%;max-height:100%;object-fit:contain}

/* ===================== sidebar ===================== */
.side{
  background:linear-gradient(180deg, rgba(22,25,34,.93), rgba(16,19,26,.9));
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:12px;
}
.side__metrics{display:flex;flex-direction:column;gap:11px}
.smetric{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 8px}
.smetric__label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--txt-dim)}
.smetric__val{font-family:'Share Tech Mono',monospace;font-size:18px;font-weight:400;color:var(--rar-2);letter-spacing:.5px}
.smetric .metric__bar{grid-column:1/-1;height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.smetric .metric__bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(.5);background:var(--rar);box-shadow:0 0 6px var(--rar);transition:transform .12s linear}

.progress{height:4px;background:rgba(0,0,0,.45);border-radius:2px;overflow:hidden;border:1px solid var(--line-soft)}
.progress__bar{height:100%;width:8%;background:linear-gradient(90deg,var(--rar),#8a5bff);box-shadow:0 0 10px rgba(75,105,255,.6);transition:width .25s ease}
.progress__bar.is-paused{background:linear-gradient(90deg,var(--err),#b53a3a);box-shadow:0 0 10px rgba(255,77,77,.5)}
.statusline{margin-top:8px;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--txt-2);letter-spacing:.3px}
.statusline::after{content:'_';animation:cursorblink 1s steps(2) infinite}   /* fixed-width cursor (opacity, not content → no reflow) */

/* tier distribution — decorative indicator that balances the sidebar */
.dist{display:flex;flex-direction:column;gap:7px}
.dist__label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-dim)}
.dist__bars{display:flex;align-items:flex-end;gap:4px;height:88px}
.dist__bars i{flex:1;height:100%;transform-origin:bottom;transform:scaleY(.4);background:linear-gradient(180deg,var(--rar-2),rgba(75,105,255,.25));border-radius:1px 1px 0 0;box-shadow:0 0 6px rgba(75,105,255,.3);animation:distbar var(--d-dur,2s) ease-in-out var(--d-delay,0s) infinite}
@keyframes distbar{0%,100%{transform:scaleY(.26)}50%{transform:scaleY(1)}}
body[data-screen="2"] .dist__bars i{animation-play-state:paused}   /* freezes on Action required (paused) */

.resume{list-style:none;display:flex;flex-direction:column;gap:6px}
.resume li{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--ok);display:flex;align-items:center;gap:7px;letter-spacing:.3px}
.resume li::before{content:'›';color:var(--ok);font-weight:700}

/* CTA */
.cta{margin-top:2px}
.cta__note{color:var(--txt-2);font-size:12px;margin-bottom:10px;font-family:'Share Tech Mono',monospace;letter-spacing:.3px}
.btn{cursor:pointer;border:none;position:relative;width:100%;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;color:#fff;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:transform .16s ease, box-shadow .25s ease, filter .2s ease}
.btn--primary{background:linear-gradient(180deg,#46e895,#1fae66);color:#04160c;box-shadow:0 10px 26px rgba(76,255,145,.28)}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 16px 36px rgba(76,255,145,.42)}
.btn--steam{background:linear-gradient(180deg,#4a7bff,#2a51d6);box-shadow:0 10px 26px rgba(58,108,240,.42), inset 0 1px 0 rgba(255,255,255,.2)}
.btn--steam:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 40px rgba(58,108,240,.55)}
.btn__steam{display:inline-flex;align-items:center}

/* ===================== steam popup ===================== */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(7,8,12,.9);animation:modalin .22s ease;padding:20px}
.modal__box{position:relative;background:linear-gradient(180deg,rgba(24,27,37,.99),rgba(16,19,26,.99));border:1px solid var(--line);border-radius:5px;padding:30px 32px;max-width:380px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.65)}
.modal__icon{color:var(--rar-2);display:inline-flex;margin-bottom:14px}
.modal__text{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.4px;color:var(--txt-2);line-height:1.5;margin-bottom:22px}
.modal__box .btn{width:100%;justify-content:center}
.modal__cancel{margin-top:14px;background:none;border:none;color:var(--txt-dim);font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:color .2s}
.modal__cancel:hover{color:var(--txt-2)}
@keyframes modalin{from{opacity:0}to{opacity:1}}

/* ===================== animations ===================== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes cursorblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@keyframes errblink{0%,100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}50%{box-shadow:0 0 24px 2px rgba(255,77,77,.4)}}
@keyframes caseinject{0%{transform:translateY(-40px) scale(.6) rotate(-8deg);opacity:0}60%{transform:translateY(4px) scale(1.06)}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes glowpulse{0%,100%{opacity:.1}50%{opacity:.9}}
@keyframes caseflash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
@keyframes targetpulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes cardboost{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.5)}28%{box-shadow:0 0 0 1px rgba(76,255,145,.7),0 0 42px rgba(76,255,145,.4),0 24px 60px rgba(0,0,0,.5)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.5)}}

/* ===================== contract progress (prominent status) ===================== */
.cstatus{max-width:780px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:9px}
.cstatus__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.cstatus__label{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt-2);transition:color .3s}
.cstatus__count{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1px;color:var(--rar-2);font-size:15px;white-space:nowrap}
.cstatus__count b{font-size:32px;color:var(--txt);transition:color .35s}
.cstatus__total{color:var(--txt-dim)}
.cstatus__count.is-done b{color:var(--ok)}
.cstatus__seg{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;height:10px}
.cstatus__seg i{display:block;border-radius:2px;background:rgba(255,255,255,.07);border:1px solid var(--line-soft);transition:background .35s ease, box-shadow .35s ease, border-color .35s ease}
.cstatus__seg i.on{background:linear-gradient(180deg,var(--rar-2),var(--rar));box-shadow:0 0 8px rgba(75,105,255,.5);border-color:transparent}
.cstatus__seg i.target{background:linear-gradient(180deg,var(--gold-2),var(--gold-1));box-shadow:0 0 12px rgba(245,185,66,.65);border-color:transparent;animation:targetpulse 1.2s ease-in-out infinite}
body[data-screen="3"] .cstatus__seg i,body[data-screen="4"] .cstatus__seg i,body[data-screen="5"] .cstatus__seg i{background:linear-gradient(180deg,#5effa0,var(--ok));box-shadow:0 0 10px rgba(76,255,145,.5);border-color:transparent;animation:none}
body[data-screen="2"] .cstatus__label{color:var(--gold-2)}

/* sidebar reacts when the catalyst lands → visible cause/effect link */
.side.is-boost{animation:cardboost .9s ease}
.smetric.is-up .smetric__val{color:var(--ok)}
.smetric__val{transition:color .4s ease}

/* ===================== mobile ===================== */
@media (max-width:760px){
  .nav{height:auto;padding:10px 14px;gap:8px 12px;flex-wrap:wrap;align-items:center}
  .nav__brand{font-size:14px;letter-spacing:1.5px}
  .nav__brand em{display:none}
  .nav__links{order:3;width:100%;justify-content:space-between;gap:6px;align-items:center}
  .nav__links a{height:auto;font-size:10px;letter-spacing:.8px}
  .nav__links a.is-active::after{display:none}
  .nav__status{font-size:10px}
  .stage{max-width:100%;padding:14px 12px 22px;gap:12px;justify-content:flex-start}
  .title{min-height:auto}
  .title__h{font-size:25px;letter-spacing:1.4px;min-height:auto}   /* top more prominent */
  .title__sub{font-size:11px;min-height:auto}
  .title__eyebrow{font-size:9.5px;letter-spacing:2.5px}
  .cstatus{gap:6px}
  .cstatus__label{font-size:10px;letter-spacing:1px}
  .cstatus__count{font-size:12px}
  .cstatus__count b{font-size:24px}
  .cstatus__seg{height:8px;gap:4px}
  .layout{grid-template-columns:1fr;gap:10px;min-height:auto;align-items:stretch}
  .left .panelhead{font-size:11px}
  .grid{gap:5px;padding:7px}
  /* analytics panel (bottom) — more compact */
  .side{padding:11px 13px;gap:9px}
  .side__metrics{gap:8px}
  .panelhead{font-size:9.5px}
  .smetric__val{font-size:15px}
  .smetric__label{font-size:9px}
  .statusline{font-size:10px}
  .resume li{font-size:10px}
  .dist__bars{height:56px}
}