/* self-hosted Geist variable fonts (latin), inlined here so index/guide skip a render-blocking
 * fonts.css request. fonts.css still exists ONLY for 404.html. font-display:optional = no swap CLS. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:optional;
  src:url(fonts/geist-400-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 800;font-display:optional;
  src:url(fonts/geist-mono-400-800.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* 7BLANK monochrome system — near-black canvas, white→gray luminance ramp, ONE amber accent.
     Amber (--accent) is reserved for the TOP PICK focal point + the most-urgent/alert signals only. */
  --bg:#050505;
  --bg2:#0b0b0b;
  --panel:#0e0e0e;
  --panel2:#161616;
  --line:#242424;
  --accent:#bfa06a;        /* muted old-gold — soft warm accent (toned back from amber) */
  --accent-soft:#d8c197;   /* lighter muted gold for text-on-dark alerts */
  --ice:#ededed;           /* legacy "primary" → near-white */
  --ice-dim:#7a7a7a;       /* legacy dim → mid gray */
  --gold:#9a9a9a;          /* legacy → gray */
  --plat:#f4f4f4;          /* plat figures → off-white */
  --urgent:#9a9a9a;        /* urgent card edge → grayscale (amber reserved for TOP PICK + acute timers) */
  --warn:#bfa06a;          /* alert → muted gold */
  --good:#bcbcbc;          /* live dot → light gray */
  --forge:#cfcfcf;         /* forma lane → light gray */
  --txt:#f4f4f4;
  --txt-dim:#a8a8a8;
  --txt-faint:#8a8a8a; /* WCAG AA (>=4.5:1) on #050505 */
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:'Geist',sans-serif}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#d6d6d6;color:#0a0a0a}
html{scrollbar-width:thin;scrollbar-color:#2e2e2e #0b0b0b}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0b0b}
::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:5px;border:2px solid #0b0b0b}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}

/* ---- Phosphor icons, subset: only the 7 glyphs the app uses (was 163KB of blocking CSS +
   a 150KB bold font for one star). Codepoints from @phosphor-icons/web@2.1.1 regular.css —
   if a NEW icon is added, look up its codepoint there and add a rule here. ---- */
@font-face{font-family:'Phosphor';src:url('phosphor/Phosphor.woff2') format('woff2');
  font-weight:normal;font-style:normal;font-display:block}
.ph,.ph-bold{font-family:'Phosphor' !important;speak:never;font-style:normal;font-weight:normal;
  font-variant:normal;text-transform:none;line-height:1;letter-spacing:0;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ph.ph-check:before{content:'\e182'}
.ph.ph-hexagon:before{content:'\e2ae'}
.ph.ph-hourglass-medium:before{content:'\e2b8'}
.ph.ph-image:before{content:'\e2ca'}
.ph.ph-magnifying-glass:before{content:'\e30c'}
.ph.ph-plus:before{content:'\e3d4'}
.ph.ph-star:before{content:'\e46a'}
body{
  background:
    radial-gradient(1100px 620px at 84% -14%, rgba(255,255,255,.028), transparent 62%),
    var(--bg);
  min-height:100vh;
  padding:0 0 80px;
}
.grain{display:none}  /* 7BLANK = flat, no grain/noise */
header{
  position:relative;z-index:2;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,18,18,.92), rgba(5,5,5,.5));
  backdrop-filter:blur(6px);
  padding:18px clamp(16px,4vw,48px) 16px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand .kicker{font-family:'Geist Mono';font-weight:600;letter-spacing:.22em;font-size:11px;color:var(--ice-dim);text-transform:uppercase}
.brand h1{font-family:'Geist Mono';font-weight:700;font-size:clamp(25px,3.8vw,37px);line-height:.98;letter-spacing:-.015em;
  background:linear-gradient(92deg,#fff, var(--ice) 55%, var(--ice-dim));-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand .sub{font-size:12px;color:var(--txt-dim);margin-top:3px;max-width:46ch}
.clock{text-align:right;font-family:'Geist Mono'}
.clock .lbl{font-size:10px;letter-spacing:.12em;color:var(--txt-faint);text-transform:uppercase}
.clock .val{font-size:15px;color:var(--ice);font-weight:600}
.controls{position:relative;z-index:6;display:flex;gap:8px;flex-wrap:wrap;align-items:center; /* above .explain so the relic menu isn't painted under it */
  padding:12px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(10,10,10,.5)}
.spacer{flex:1}
.refresh{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt-faint);flex-wrap:wrap}
.refresh button{background:var(--panel);border:1px solid var(--line);color:var(--ice);border-radius:8px;
  padding:7px 13px;font-family:'Geist';font-weight:600;cursor:pointer;font-size:13px;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.refresh button:hover{border-color:var(--ice-dim)}
#refresh-btn{background:var(--ice);border-color:var(--ice);color:#0a0a0a}
#refresh-btn:hover{background:#fff;border-color:#fff}
.state-group{display:inline-flex;align-items:center;gap:8px}
.act-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-left:14px;border-left:1px solid var(--line)}
.pricestate{font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--line)}
.pricestate.ok{color:#cfcfcf;border-color:#2e2e2e}
.pricestate.off{color:var(--txt-dim);border-color:var(--line)}

main{position:relative;z-index:2;padding:24px clamp(16px,4vw,48px) 0;max-width:1180px;margin:0 auto;
  min-height:100vh} /* reserve board space so the loading→board swap doesn't shift the footer (CLS) */
.lane{margin-bottom:40px}
.lane-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lane-h .dot{width:9px;height:9px;border-radius:2px;transform:rotate(45deg)}
.lane-h h2{font-family:'Geist Mono';font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.lane-h .meta{font-size:11px;color:var(--txt-faint);letter-spacing:.04em}
/* grayscale brightness hierarchy — brightest = most important; no glow (flat).
   Expiring stays grayscale (brightest white); amber is reserved for the TOP PICK + acute timers. */
.lane.urgent .dot{background:#ffffff}
.lane.urgent h2{color:#ffffff}
.lane.plat .dot{background:#e6e6e6}
.lane.plat h2{color:#e6e6e6}
.lane.forge .dot{background:#b4b4b4}
.lane.forge h2{color:#d2d2d2}
.lane.res .dot{background:#8a8a8a}
.lane.res h2{color:#b0b0b0}
.card.f .edge{background:var(--forge)}
.card.f .badge.tier{background:rgba(255,255,255,.06);color:var(--forge);border:1px solid var(--line)}
.card.static-src{border-style:dashed} /* Descendia: visibly "not live data" */

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.card{position:relative;background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:12px;padding:16px;overflow:hidden;
  transition:transform .2s ease,border-color .15s ease,box-shadow .2s ease;
  animation:rise .4s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card:hover{border-color:#3a3a3a;transform:translateY(-2px);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.8),0 0 0 1px #2e2e2e inset}
@media (hover:none),(pointer:coarse){ /* touch: no sticky lift */
  .card:hover{transform:none}}
.card .edge{position:absolute;left:0;top:0;bottom:0;width:3px}
.card.u .edge{background:var(--urgent)}
.card.p .edge{background:var(--plat)}
.card.r .edge{background:var(--gold)}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.card .ttl{font-family:'Geist Mono';font-weight:600;font-size:15px;line-height:1.15;color:#fff}
.card .typ{font-size:11px;color:var(--txt-dim);margin-top:3px;letter-spacing:.04em}
.card .typ b{color:var(--txt);font-weight:600} /* STEEL PATH / BASE STAR CHART variant tag */
.badge{font-family:'Geist Mono';font-weight:700;font-size:10px;letter-spacing:.04em;padding:4px 8px;border-radius:6px;white-space:nowrap;text-transform:uppercase}
.badge.tier{background:rgba(255,255,255,.06);color:var(--txt);border:1px solid var(--line)}
.badge.sp{background:rgba(255,255,255,.12);color:#fff;border:1px solid #3a3a3a}
.card .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:11px;color:var(--txt-dim);background:rgba(255,255,255,.03);border:1px solid var(--line);
  padding:4px 8px;border-radius:6px}
.chip b{color:var(--txt)}
.timer{font-family:'Geist Mono';font-weight:600;font-size:12px}
.timer.soon{color:var(--accent);animation:soonpulse 1.6s ease-in-out infinite} /* acute = the one amber timer */
.timer.mid{color:var(--txt)}
.timer.ok{color:var(--txt-dim)}
@keyframes soonpulse{0%,100%{opacity:.68}50%{opacity:1}}
.why{font-size:11px;color:var(--txt-faint);margin-top:12px;line-height:1.4;border-top:1px dashed var(--line);padding-top:8px}
.why b{color:var(--ice-dim)}
.empty{color:var(--txt-faint);font-size:13px;padding:14px;border:1px dashed var(--line);border-radius:12px}
.loading{padding:60px 0;text-align:center;color:var(--txt-dim);font-family:'Geist Mono';letter-spacing:.12em;font-size:13px}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ice);margin-right:8px;animation:pl 1s infinite}
@keyframes pl{0%,100%{opacity:.3}50%{opacity:1}}
footer{position:relative;z-index:2;text-align:center;color:var(--txt-faint);font-size:11px;margin-top:40px;line-height:1.7;padding:0 20px}
footer a{color:var(--ice-dim);text-decoration:none}
.note{max-width:1180px;margin:0 auto 4px;padding:0 clamp(16px,4vw,48px);position:relative;z-index:2}
.note .box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;font-size:12px;color:var(--txt-dim);display:none}
.note .box.show{display:block}

/* multi-income "stacks" line — the gold marker flags extra income beyond relic plat (restrained) */
.income{font-size:11px;color:var(--txt-dim);margin-top:8px;line-height:1.4}
.income::first-letter{color:var(--accent);font-weight:700}
.income b{color:var(--txt)}
.card.top-pick .income b{color:var(--accent-soft)}

/* ---- plat valuation additions ---- */
.evline{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.evline .ev{font-family:'Geist Mono';font-weight:800;font-size:20px;color:var(--plat)}
.evline .ev .u{font-size:11px;color:var(--ice-dim);font-weight:600;letter-spacing:.06em;margin-left:2px}
.evline .evlbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint)}
.parts{list-style:none;margin:8px 0 0;display:flex;flex-direction:column;gap:4px}
.parts li{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--txt-dim)}
.parts li a{color:var(--txt);text-decoration:none;border-bottom:1px dotted transparent}
.parts li a:hover{border-bottom-color:var(--ice-dim)}
.parts li .pp{font-family:'Geist Mono';font-weight:600;color:var(--plat);white-space:nowrap}
.parts li .pc{color:var(--txt-faint);font-size:10px}

/* #1 TOP PICK — a single rotating luminous arc on the border band so the eye
   lands on the answer in <1s. One moving element, on-palette, near-zero runtime. */
@property --tp-angle{ syntax:'<angle>'; initial-value:300deg; inherits:false; }
.card.top-pick{
  grid-column:1/-1;
  border:2px solid transparent;
  /* solid panel on padding-box, the rotating conic ring on border-box */
  background:
    linear-gradient(165deg,var(--panel2),var(--panel)) padding-box,
    conic-gradient(from var(--tp-angle),
      var(--line) 0deg, var(--line) 200deg,
      #403720 250deg, var(--accent) 300deg, #ddc9a0 330deg, var(--accent) 345deg,
      var(--line) 360deg) border-box;
  box-shadow:0 0 0 1px rgba(191,160,106,.28), 0 10px 30px -10px rgba(0,0,0,.85);
  animation:rise .4s both, tp-spin 7s linear infinite;
}
@keyframes tp-spin{ to{ --tp-angle:360deg; } }
.card.top-pick .edge{display:none}            /* the ring replaces the 3px left bar */
.card.top-pick .ttl{font-size:18px}
.card.top-pick .evline .ev{font-size:26px}
.card.top-pick::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:12px;
  /* cursor sheen (JS sets --gx/--gy) layered over the original corner wash */
  background:
    radial-gradient(160px circle at var(--gx,100%) var(--gy,0%),rgba(191,160,106,.10),transparent 60%),
    radial-gradient(120% 80% at 100% 0,rgba(191,160,106,.06),transparent 55%)}
.toptag{position:absolute;top:0;right:0;font-family:'Geist Mono';font-weight:800;font-size:10px;
  letter-spacing:.04em;color:#0a0a0a;background:var(--accent);
  padding:4px 10px;border-bottom-left-radius:8px;z-index:2}
/* the TOP PICK ribbon is absolutely positioned in the top-right corner and paints over
   anything in flow there. The tier/SP badge lives top-right of the .top row, so on a top-pick
   card it lands under the ribbon and clips. Drop the badge below the ribbon to clear it. */
.card.top-pick .top .badge{margin-top:20px}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .card.top-pick::after{background:radial-gradient(120% 80% at 100% 0,rgba(191,160,106,.10),transparent 55%)}}
@media (prefers-reduced-motion:reduce){ .card.top-pick{--tp-angle:300deg} }

/* ---- scanline removed for the flat 7BLANK look ---- */
.scan{display:none}

/* ---- ranking explainer ---- */
.explain{max-width:1180px;margin:14px auto 0;padding:0 clamp(16px,4vw,48px);position:relative;z-index:2}
.explain .panel{background:linear-gradient(165deg,rgba(20,20,20,.7),rgba(12,12,12,.45));
  border:1px solid var(--line);border-left:3px solid #4a4a4a;border-radius:12px;
  padding:13px 16px;font-size:12px;line-height:1.55;color:var(--txt-dim);position:relative}
.explain .panel h2{font-family:'Geist Mono';font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--plat);margin-bottom:6px}
.explain .panel b{color:var(--txt)}
.explain .x{position:absolute;top:5px;right:6px;background:none;border:none;color:var(--txt-dim);
  font-size:16px;cursor:pointer;line-height:1;padding:8px 10px}
.explain .x:hover{color:var(--ice)}

/* ---- share button + toast ---- */
.ghost{background:transparent !important;border:1px solid var(--line) !important;color:var(--txt-dim) !important}
.ghost:hover{border-color:var(--ice-dim) !important;color:var(--ice) !important}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--ice-dim);color:var(--ice);
  font-size:13px;font-weight:600;padding:10px 18px;border-radius:8px;z-index:10;
  opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- freshness indicator on "updated Xs ago" ---- */
#last{display:inline-flex;align-items:center;gap:6px}
#last b{color:var(--ice);font-weight:600}
.livedot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--good);flex:0 0 auto}
.livedot::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--good);
  opacity:0;transform:scale(1);animation:livering 2.4s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes livering{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
.livedot.stale{background:var(--warn)}
.livedot.stale::after{border-color:var(--warn)}

/* ---- data-update pulse on the 5-min auto-refresh: brief flash + a spotlight sweep ---- */
@keyframes flash{0%{opacity:.55}100%{opacity:1}}
main.upd{animation:flash .5s ease-out}
main.upd::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.05) 50%,transparent 68%);
  transform:translateX(-110%);animation:sweep .8s ease-out}
@keyframes sweep{to{transform:translateX(110%)}}

/* ============ DESIGN REFINEMENT PASS (frontend-design + ui-ux-pro-max) ============ */
/* tabular figures so ticking timers / plat values don't shift width as digits change */
.timer,.evline .ev,.parts li .pp,.parts li .pc,.clock .val,#last,.chip b,.badge{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* flat — no glow; the TOP PICK plat value carries the single amber accent */
.card.top-pick .evline .ev{color:var(--accent)}
.refresh button,.ghost{cursor:pointer}
/* fading accent rule trailing each lane header — reinforces lane identity beyond the dot */
.lane-h::after{content:'';flex:1;height:1px;align-self:center;margin-left:6px;border-radius:1px}
.lane.urgent .lane-h::after{background:linear-gradient(90deg,rgba(255,255,255,.40),transparent)}
.lane.plat  .lane-h::after{background:linear-gradient(90deg,rgba(230,230,230,.30),transparent)}
.lane.forge .lane-h::after{background:linear-gradient(90deg,rgba(180,180,180,.26),transparent)}
.lane.res   .lane-h::after{background:linear-gradient(90deg,rgba(138,138,138,.22),transparent)}

/* aurora removed — 7BLANK is flat, no colored atmosphere */
body::before{display:none}

/* ---- keyboard focus (accessibility) ---- */
.refresh button:focus-visible,.ghost:focus-visible,.explain .x:focus-visible,
footer a:focus-visible,.parts li a:focus-visible{
  outline:2px solid var(--ice);outline-offset:2px;border-radius:4px}

/* ---- data-source outage banner ---- */
.datanote-host{max-width:1180px;margin:10px auto 0;padding:0 clamp(16px,4vw,48px);position:relative;z-index:2}
.datanote{display:none}
.datanote.show{display:block;font-size:12px;padding:10px 13px;border-radius:8px;line-height:1.4}
.datanote.ok{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt)}
.datanote.warn{background:rgba(191,160,106,.08);border:1px solid rgba(191,160,106,.30);color:var(--accent-soft)}

/* ---- price-trend marker (↗/↘, % in tooltip; grayscale — amber stays reserved) ---- */
.tr{font-family:'Geist Mono';font-size:11px;cursor:default}
.tr.up{color:#cfcfcf}
.tr.down{color:#7a7a7a}

/* ---- "find a part" reverse lookup ---- */
.findpart-host{max-width:1180px;margin:10px auto 0;padding:0 clamp(16px,4vw,48px);position:relative;z-index:2}
.findpart{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fp-lbl{font-family:'Geist Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);white-space:nowrap}
.findpart input{flex:1;min-width:200px;max-width:340px;background:var(--panel);border:1px solid var(--line);
  color:var(--ice);border-radius:8px;padding:7px 11px;font-family:'Geist';font-size:13px;
  transition:border-color .15s ease}
.findpart input:hover{border-color:#3a3a3a}
.findpart input:focus-visible{outline:2px solid var(--ice);outline-offset:1px}
.findpart input::placeholder{color:var(--txt-faint)}
.fp-out{display:none;flex-basis:100%}
.fp-out.show{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-top:2px}
.fp-part{font-size:12px;color:var(--txt-dim);line-height:1.5}
.fp-name{color:var(--txt)}
.fp-name b{font-family:'Geist Mono';font-weight:600}
.fp-name a{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.fp-name a:hover{border-bottom-color:var(--ice-dim)}
.fp-name a:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-radius:4px}
.fp-relics{font-size:11px;color:var(--txt-dim)}
.fp-ch{color:var(--txt-faint)}
.fp-live{font-size:11px;color:var(--txt-faint)}
.fp-live.on{color:var(--txt)}
.fp-best{font-size:10px;letter-spacing:.04em;color:var(--txt)}
.fp-run{font-size:11px;color:var(--txt-dim);margin-top:2px}
.fp-run b{color:var(--txt)}
.fp-none{font-size:12px;color:var(--txt-faint)}

/* ---- relic reader (AlecaFrame token + inventory.json file import) ---- */
.relic-ui{display:inline-flex;align-items:center;gap:8px;position:relative}
.relic-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:300px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.9)}
.relic-menu .rm-title{font-size:10px;letter-spacing:.04em;color:var(--txt-faint);text-transform:uppercase;margin-bottom:8px}
.relic-menu .rm-opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:9px 11px;margin-bottom:6px;
  font-family:'Geist';font-weight:600;font-size:12px;cursor:pointer}
.relic-menu .rm-opt:hover{border-color:#3a3a3a;background:rgba(255,255,255,.07)}
.relic-menu .rm-help{font-size:10px;line-height:1.45;color:var(--txt-faint);margin-top:4px}
.relicpanel-host{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px);position:relative;z-index:2}
.relicpanel{margin-top:12px}
.relicpanel h2{font-family:'Geist Mono';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--forge);margin-bottom:8px}
.relcols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.relcols .rlbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:5px}
.rvault{margin-top:8px;font-size:11px;color:var(--txt-faint)}
@media (max-width:560px){ .relcols{grid-template-columns:1fr;gap:10px} }

/* ---- refinement segmented toggle + session-budget input (controls row) ---- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel);border:none;color:var(--txt-dim);font-family:'Geist Mono';
  font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--ice)}
.seg button.on{background:var(--panel2);color:#fff}             /* active = brighter grayscale; gold stays reserved */
.seg button:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.budget{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--txt-faint);font-family:'Geist Mono'}
.budget input{width:52px;background:var(--panel);border:1px solid var(--line);color:var(--ice);border-radius:8px;
  padding:6px 8px;font-family:'Geist Mono';font-weight:600;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.budget input:focus-visible{outline:2px solid var(--ice);outline-offset:1px}

/* ---- ducat value, session plan, fodder flag on plat cards ---- */
.chip.ducat b{color:var(--txt);font-weight:600}
.parts li .pd{font-family:'Geist Mono';color:var(--txt-faint);font-size:10px;white-space:nowrap}
.plan{font-family:'Geist Mono';font-size:12px;color:var(--txt-dim);margin-top:8px}
.plan b{color:var(--ice);font-weight:700}
.plan .est{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);margin-left:4px}
.card.top-pick .plan b{color:var(--accent-soft)}
.fodder{font-size:11px;color:var(--txt-faint);margin-top:8px;line-height:1.4;
  border-top:1px dashed var(--line);padding-top:8px}
.fodder b{color:var(--txt-dim)}
.setline{font-family:'Geist Mono';font-size:11px;color:var(--txt-faint);margin-top:8px}
.setline b{color:var(--txt)}
.card.top-pick .setline b{color:var(--accent-soft)}

/* ---- first-load skeleton cards (monochrome shimmer; reduced-motion disables it globally) ---- */
.card.skel{height:148px;animation:none;cursor:default}
.card.skel:hover{transform:none;border-color:var(--line);box-shadow:none}
.card.skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.045) 50%,transparent 62%);
  transform:translateX(-110%);animation:skelsweep 1.3s ease-in-out infinite}
@keyframes skelsweep{to{transform:translateX(110%)}}
/* skeleton heights per lane ≈ median real card heights, so the swap barely shifts (CLS) */
.lane.urgent .card.skel{height:170px}
.lane.plat .card.skel{height:258px}
.lane.plat .card.skel:first-child{grid-column:1/-1;height:286px} /* mirrors the TOP PICK slab */
.lane.res .card.skel{height:170px}
.lane.forge .card.skel{height:208px}
.lane.vendor .card.skel{height:236px}
/* pre-price placeholder on plat cards — the EV + parts block's footprint, shimmer like .skel */
.evskel{height:118px;margin-top:12px;border-radius:8px;background:rgba(255,255,255,.03);
  position:relative;overflow:hidden}
.evskel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.045) 50%,transparent 62%);
  transform:translateX(-110%);animation:skelsweep 1.3s ease-in-out infinite}

/* ---- mobile-first refinements (must work clean at ~380px) ---- */
@media (max-width:560px){
  header{padding:14px 16px 12px;align-items:flex-start}
  .brand h1{font-size:30px}
  .clock{text-align:left}
  .controls{padding:12px 16px}
  main{padding:18px 16px 0}
  .cards{grid-template-columns:1fr;gap:10px}
  .card{padding:14px 15px}
  .timer{font-size:13px} /* readable at arm's length */
  .card.top-pick .ttl{font-size:16px}
  .card.top-pick .evline .ev{font-size:23px}
  .refresh{width:100%;justify-content:space-between;row-gap:8px}
  .state-group{width:100%;justify-content:space-between}
  .act-group{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:10px}
  .refresh button{padding:10px 16px} /* ~40px tap target */
  .explain .x{padding:10px 12px}
  .parts li{flex-wrap:wrap}
  .parts li a{min-width:0;word-break:break-word}
  .parts li>span{flex-basis:100%;text-align:right;margin-top:2px}
}
@media (max-width:380px){
  .brand h1{font-size:26px}
  .evline .ev{font-size:18px}
  .refresh{flex-direction:column;align-items:stretch;gap:6px}
  .refresh button{width:100%;padding:12px 16px;font-size:13px}
  .refresh .pricestate,.refresh #last{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
.ph, .ph-bold { vertical-align:-2px; line-height:1 }

/* weekly-claim checkbox — grayscale (amber stays reserved). Leading position in the title row. */
.card .tophead{display:flex;align-items:flex-start;gap:9px;min-width:0;flex:1}
.card .tophead > div{min-width:0;flex:1}
.card .chk{flex:none;width:22px;height:22px;margin-top:1px;padding:0;border:1.5px solid var(--line);
  border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;
  color:transparent;background:transparent;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.card .chk:hover{border-color:#6a6a6a}
.card .chk.on{background:var(--forge);border-color:var(--forge);color:var(--bg2)}
.card.claimed{opacity:.45}
.card.claimed .ttl{text-decoration:line-through;text-decoration-color:var(--txt-dim)}