:root{
  --bg:#06080a; --panel:rgba(255,255,255,.032); --panel2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.075); --ink:#e9eff6; --mut:#8d9aa9; --dim:#71808f;
  --nfl:#00e5a0; --cfb:#ffb020;
  --hit:#00e5a0; --loss:#ff4d6d; --live:#22d3ee; --pend:#6b7a8f;
  --fd:'Space Grotesk',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--fd);
  -webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.3}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-18vw;
  background:radial-gradient(circle,#00e5a0,transparent 62%);animation:drift 26s ease-in-out infinite}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:-10vw;
  background:radial-gradient(circle,#22d3ee,transparent 62%);animation:drift 32s ease-in-out infinite reverse}
.aurora i:nth-child(3){width:46vw;height:46vw;left:22vw;bottom:-26vw;opacity:.15;
  background:radial-gradient(circle,#ffb020,transparent 64%);animation:drift 38s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3vw,4vh,0) scale(1.12)}}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 82% 58% at 50% 0%,#000 28%,transparent 78%);
  mask-image:radial-gradient(ellipse 82% 58% at 50% 0%,#000 28%,transparent 78%)}
.wrap{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:0 16px 72px}
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1}
.hud{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:8px 12px;
  border-radius:11px;border:1px solid var(--line);background:var(--panel);
  font:500 11px/1.2 var(--fm);color:var(--mut);white-space:nowrap;overflow:hidden}
.hud[hidden]{display:none}
.huddot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--dim)}
.hud.on .huddot{background:var(--live);animation:pulsepip 1.05s ease-in-out infinite}
.hud .hudsep{flex:1 1 auto;min-width:8px}
#hudtxt{color:var(--ink);overflow:hidden;text-overflow:ellipsis;max-width:58vw}
.cmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.cpill{font:500 10px/1 var(--fm);color:var(--mut);border:1px solid var(--line);
  background:rgba(255,255,255,.03);padding:5px 7px;border-radius:6px;white-space:nowrap}
.cmore{margin-left:auto;font:500 10.5px/1 var(--fm);color:var(--live);opacity:.75;
  white-space:nowrap;transition:opacity .2s,transform .2s}
.card:hover .cmore{opacity:1;transform:translateX(2px)}
@keyframes cardin{from{opacity:0;transform:translateY(16px) scale(.972)}to{opacity:1;transform:none}}
.card.fresh{animation:cardin .5s cubic-bezier(.22,1,.36,1) both}
.card.settled{animation:none}
.card.fresh{box-shadow:0 0 0 1px rgba(0,229,160,.28),0 10px 34px -14px rgba(0,229,160,.5)}
@media(prefers-reduced-motion:reduce){#fx{display:none}}
/* ---------- per-card analyst chat ---------- */
.chat{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.chlog{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;
  overflow-wrap:anywhere;padding-right:3px;scroll-behavior:smooth}
.msg{padding:9px 11px;border-radius:11px;font-size:12.5px;line-height:1.55;
  animation:msgin .28s cubic-bezier(.22,1,.36,1) both}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.me{align-self:flex-end;max-width:88%;background:linear-gradient(100deg,#00e5a0,#4df3c4);
  color:#04120d;font-weight:500;border-bottom-right-radius:4px}
.msg.ag{align-self:flex-start;max-width:94%;background:rgba(255,255,255,.045);
  border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.msg.sys{align-self:center;font:400 10.5px/1.5 var(--fm);color:var(--dim);padding:2px}
.msg .tgrip{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.msg .tchip{font:500 9.5px/1 var(--fm);color:var(--live);border:1px solid rgba(34,211,238,.35);
  background:rgba(34,211,238,.07);padding:4px 6px;border-radius:5px}
.msg ul{margin:6px 0 0;padding-left:17px}
.msg li{margin:3px 0}
.msg b{color:var(--live)}
.msg i{color:var(--mut)}
.msg code{font:500 11px/1.4 var(--fm);background:rgba(255,255,255,.07);padding:1px 4px;border-radius:4px}
.msg pre{margin:6px 0 0;padding:7px 9px;background:rgba(0,0,0,.32);border-radius:7px;
  overflow-x:auto;font:500 11px/1.45 var(--fm);white-space:pre-wrap}
.msg a{color:var(--live);text-decoration:underline}
.msg .mdh{display:block;margin:7px 0 3px;font:600 11px/1.4 var(--fm);letter-spacing:.05em;
  text-transform:uppercase;color:var(--live)}
.chrow{display:flex;gap:8px;margin-top:11px}
.chin{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;color:var(--ink);font:400 13px/1.4 var(--fd);
  transition:border-color .2s}
.chin:focus{outline:none;border-color:rgba(0,229,160,.5)}
.chsend{flex:0 0 auto;border:0;border-radius:10px;padding:0 15px;cursor:pointer;
  background:linear-gradient(100deg,#00e5a0,#4df3c4);color:#04120d;font:600 12.5px/1 var(--fd);
  transition:transform .15s,opacity .2s}
.chsend:hover{transform:translateY(-1px)}
.chsend:disabled{opacity:.45;cursor:progress;transform:none}
.chhint{margin-top:8px;font:400 10.5px/1.45 var(--fm);color:var(--dim)}
.sugg{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sugg button{font:500 11px/1 var(--fd);color:var(--mut);border:1px solid var(--line);
  background:var(--panel);padding:7px 10px;border-radius:999px;cursor:pointer;
  transition:border-color .2s,color .2s}
.sugg button:hover{color:var(--ink);border-color:rgba(0,229,160,.45)}

/* ---------- skeleton placeholders ---------- */
.skel{position:relative;border-radius:var(--r);border:1px solid var(--line);
  background:rgba(255,255,255,.022);min-height:296px;overflow:hidden;
  animation:skelin .4s cubic-bezier(.22,1,.36,1) both}
@keyframes skelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.skel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.06) 50%,transparent 82%);
  transform:translateX(-100%);animation:shimmer 1.6s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel .b{height:10px;border-radius:6px;background:rgba(255,255,255,.05);margin:0 15px 11px}
.skel .b.t{height:13px;width:44%;margin-top:17px}
.skel .b.s{width:62%;height:9px}
.skel .b.w{width:88%}
.skel .b.x{width:72%}
.skel.out{animation:skelout .32s ease forwards}
@keyframes skelout{to{opacity:0;transform:scale(.97)}}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}.skel{animation:none}}

/* ---------- ledger ---------- */
#ledger[hidden]{display:none}
.ent{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  margin-bottom:9px;overflow:hidden}
.enth{display:flex;align-items:center;gap:11px;width:100%;padding:12px 13px;cursor:pointer;
  background:none;border:0;text-align:left;color:var(--ink);font:inherit;
  transition:background .2s}
.enth:hover{background:rgba(255,255,255,.028)}
.entmain{flex:1 1 auto;min-width:0}
.entplayer{font:600 13px/1.25 var(--fd);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.entmeta{font:400 10.5px/1.35 var(--fm);color:var(--dim);margin-top:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.chev{flex:0 0 auto;color:var(--dim);font-size:11px;transition:transform .32s
  cubic-bezier(.22,1,.36,1)}
.ent.open .chev{transform:rotate(90deg)}
.exwrap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.ent.open .exwrap{grid-template-rows:1fr}
.exin{overflow:hidden}
.exbody{padding:0 14px 15px;border-top:1px solid var(--line);margin-top:3px;padding-top:14px}
.gbadge{font:700 9.5px/1 var(--fm);letter-spacing:.07em;padding:4px 6px;border-radius:5px;
  text-transform:uppercase;flex:0 0 auto}
.gbadge.hit{background:var(--hit);color:#04120d}
.gbadge.loss{background:var(--loss);color:#1a0509}
.gbadge.pending{color:var(--dim);border:1px solid var(--line)}
.gbadge.ungradeable{color:#ffb020;border:1px solid rgba(255,176,32,.38)}
.ltbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ltbl th{text-align:left;font:500 9.5px/1 var(--fm);letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);padding:0 0 8px}
.ltbl td{padding:7px 0;border-top:1px solid var(--line);color:var(--mut)}
.ltbl td b{color:var(--ink);font-weight:600}
.lrate{font:700 11px/1 var(--fm)}
.lrate.good{color:var(--hit)} .lrate.bad{color:var(--loss)}
.filt{display:flex;gap:7px;margin:4px 0 14px;flex-wrap:wrap}
.fbtn{font:500 11px/1 var(--fm);color:var(--mut);border:1px solid var(--line);
  background:var(--panel);padding:7px 11px;border-radius:999px;cursor:pointer;
  transition:border-color .2s,color .2s}
.fbtn.on{color:#04120d;background:var(--hit);border-color:transparent}
.fbtn:hover{border-color:rgba(0,229,160,.4)}

/* ---------- prop detail drawer ---------- */
.card{cursor:pointer}
.card:active{transform:scale(.986)}
.card:focus-visible{outline:2px solid var(--live);outline-offset:3px}
.drawer-wrap{position:fixed;inset:0;z-index:70}
.drawer-wrap[hidden]{display:none}
.dw-back{position:absolute;inset:0;background:rgba(3,5,7,.7);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;animation:fadein .26s ease forwards}
@keyframes fadein{to{opacity:1}}
.dw{position:absolute;top:0;right:0;bottom:0;width:min(530px,96vw);overflow-y:auto;
  padding:24px 21px 64px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,#0b1015,#07090c);
  transform:translateX(102%);animation:slidein .44s cubic-bezier(.22,1,.36,1) forwards;
  box-shadow:-34px 0 90px -34px rgba(0,0,0,.92)}
@keyframes slidein{to{transform:none}}
@media(max-width:640px){
  .dw{top:auto;left:0;right:0;bottom:0;width:auto;max-height:88dvh;
    border-left:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0;
    padding:20px 15px 52px;
    transform:translateY(102%);animation:slideup .44s cubic-bezier(.22,1,.36,1) forwards}
  @keyframes slideup{to{transform:none}}
}
.dw-x{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;
  font:600 13px/1 var(--fd);transition:transform .16s,color .2s,border-color .2s}
.dw-x:hover{color:var(--ink);border-color:rgba(0,229,160,.45);transform:scale(1.07)}
.dw-x:active{transform:scale(.93)}
#dwh{margin:0 36px 5px 0;font:600 21px/1.2 var(--fd);letter-spacing:-.022em}
.dsub{margin:0;font:500 11.5px/1.45 var(--fm);color:var(--mut)}
.dline{margin:15px 0 0;font:700 25px/1 var(--fm);letter-spacing:-.02em}
.dline u{text-decoration:none;color:var(--dim);font-weight:400;font-size:13px}
.dsec{margin:22px 0 0;animation:rise .52s cubic-bezier(.22,1,.36,1) both}
.dsec h3{margin:0 0 10px;font:600 10.5px/1 var(--fm);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.dsec.risk{border-top:1px solid var(--line);padding-top:16px}
.probwrap{margin-top:13px;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel)}
.probnum{display:flex;align-items:baseline;gap:9px}
.probnum b{font:700 31px/1 var(--fm);color:var(--hit)}
.probnum span{font:500 11px/1.4 var(--fm);color:var(--dim)}
.pbar{margin-top:11px;height:6px;border-radius:99px;background:rgba(255,255,255,.07);
  position:relative;overflow:hidden}
.pfill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#00e5a0,#5af5cb);transition:width 1s cubic-bezier(.22,1,.36,1)}
.dsteps{margin:0;padding:0;list-style:none;counter-reset:s}
.dsteps li{counter-increment:s;position:relative;padding-left:31px;margin-bottom:10px;
  font-size:13px;line-height:1.55;color:var(--mut)}
.dsteps li::before{content:counter(s);position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:6px;display:grid;place-items:center;font:700 10px/1 var(--fm);
  background:rgba(0,229,160,.14);color:var(--hit);border:1px solid rgba(0,229,160,.32)}
.pc{margin:0;padding:0;list-style:none}
.pc li{position:relative;padding-left:19px;margin-bottom:8px;font-size:12.5px;line-height:1.5}
.pc.pro li{color:#bfe6d6}
.pc.pro li::before{content:"+";position:absolute;left:2px;color:var(--hit);font-weight:700}
.pc.con li{color:#f0c9cf}
.pc.con li::before{content:"\2212";position:absolute;left:2px;color:var(--loss);font-weight:700}
.srcs{margin:0;padding:0;list-style:none}
.srcs li{margin-bottom:9px}
.srcs a{display:block;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);text-decoration:none;font-size:12.5px;line-height:1.4;
  transition:border-color .2s,transform .18s,background .2s}
.srcs a:hover{border-color:rgba(34,211,238,.45);transform:translateX(3px);background:rgba(34,211,238,.05)}
.srcs a span{display:block;margin-top:4px;font:400 10.5px/1 var(--fm);color:var(--dim)}
.dnone{font-size:12.5px;color:var(--dim);line-height:1.5}
@media(prefers-reduced-motion:reduce){
  .dw,.dw-back,.dsec,.pfill{animation:none!important;transition:none!important}
  .dw{transform:none}
}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:30;backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:linear-gradient(180deg,rgba(6,8,10,.9),rgba(6,8,10,.62));
  border-bottom:1px solid var(--line)}
.top-in{max-width:1220px;margin:0 auto;padding:13px 16px;display:flex;
  align-items:center;gap:13px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:conic-gradient(from 140deg,#00e5a0,#22d3ee,#ffb020,#00e5a0);
  box-shadow:0 0 22px rgba(0,229,160,.34)}
.mark::after{content:"";position:absolute;inset:2px;border-radius:8px;background:#070a0d}
.mark b{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  font:700 14px/1 var(--fm);color:#00e5a0;text-shadow:0 0 9px rgba(0,229,160,.75)}
h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}
.sub{margin:2px 0 0;font:400 11px/1.3 var(--fm);color:var(--dim);white-space:nowrap}
.spacer{flex:1 1 auto;min-width:6px}
.chip{font:500 11px/1 var(--fm);color:var(--mut);border:1px solid var(--line);
  background:var(--panel);padding:7px 10px;border-radius:999px;white-space:nowrap}
.chip b{color:var(--ink);font-weight:500}
/* shimmer button (Magic UI) */
.btn{position:relative;overflow:hidden;cursor:pointer;border:0;border-radius:999px;
  padding:11px 20px;font:600 13px/1 var(--fd);color:#04120d;
  background:linear-gradient(100deg,#00e5a0,#4df3c4 45%,#00e5a0);
  box-shadow:0 0 0 1px rgba(0,229,160,.38),0 8px 26px -8px rgba(0,229,160,.6)}
.btn::after{content:"";position:absolute;top:0;left:-140%;width:58%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%{left:-140%}55%{left:165%}100%{left:165%}}
.btn:disabled{opacity:.5;cursor:progress}
.btn:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
/* ---------- stat strip ---------- */
.stats{display:grid;gap:10px;margin:18px 0 15px;
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
.stat{position:relative;padding:13px 14px;border-radius:13px;
  border:1px solid var(--line);background:var(--panel);overflow:hidden}
.stat span{display:block;font:500 9.5px/1 var(--fm);letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.stat b{display:block;margin-top:8px;font:700 24px/1 var(--fm);letter-spacing:-.02em}
.stat i{position:absolute;right:12px;top:13px;width:6px;height:6px;border-radius:50%}
/* ---------- tabs with animated conic border ---------- */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.tabs{position:relative;display:flex;gap:5px;padding:5px;border-radius:15px;
  border:1px solid var(--line);background:var(--panel);margin:2px 0 16px;
  width:max-content;max-width:100%}
.tabs::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1.2px;
  background:conic-gradient(from var(--a),transparent 0 58%,#00e5a0 76%,#22d3ee 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 6.5s linear infinite;pointer-events:none;opacity:.95}
@keyframes spin{to{--a:360deg}}
.glow{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;border-radius:11px;
  background:linear-gradient(100deg,#00e5a0,#5af5cb);
  transition:transform .36s cubic-bezier(.22,1,.36,1),width .36s cubic-bezier(.22,1,.36,1)}
.glow.cfb{background:linear-gradient(100deg,#ffb020,#ffd47a)}
.tab{position:relative;z-index:3;cursor:pointer;border:0;background:transparent;
  color:var(--mut);font:600 13px/1 var(--fd);padding:11px 19px;border-radius:11px;
  display:flex;align-items:center;gap:9px;transition:color .22s;white-space:nowrap}
.tab[aria-selected="true"]{color:#04120d}
.tab:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
.tab .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.tab .pb{font:700 9px/1 var(--fm);letter-spacing:.1em;padding:3px 5px;border-radius:5px;
  background:rgba(4,18,13,.3)}

/* ---------- cards (spotlight) ---------- */
.sect{display:flex;align-items:baseline;gap:10px;margin:20px 0 11px}
.sect h2{margin:0;font:600 14px/1 var(--fd);letter-spacing:-.01em}
.sect em{font:400 11px/1 var(--fm);color:var(--dim);font-style:normal}
.cards{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(318px,1fr))}
.card{position:relative;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),rgba(255,255,255,.018));
  padding:15px;overflow:hidden;animation:rise .5s cubic-bezier(.22,1,.36,1) both;
  transition:border-color .25s,transform .25s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  pointer-events:none;
  background:radial-gradient(330px circle at var(--mx,50%) var(--my,0%),rgba(0,229,160,.14),transparent 62%)}
.card:hover::before{opacity:1}
.card:hover{border-color:rgba(0,229,160,.32);transform:translateY(-2px)}
.card.cfb::before{background:radial-gradient(330px circle at var(--mx,50%) var(--my,0%),rgba(255,176,32,.14),transparent 62%)}
.card.cfb:hover{border-color:rgba(255,176,32,.32)}
.card>*{position:relative;z-index:2}
.crow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rank{font:700 10px/1 var(--fm);color:var(--dim);letter-spacing:.1em}
.pname{font:600 15px/1.2 var(--fd);letter-spacing:-.012em;margin:6px 0 0}
.pmeta{font:400 11px/1.35 var(--fm);color:var(--dim);margin:4px 0 0}
.mk{font:600 12.5px/1 var(--fd);color:var(--mut);margin-top:10px}
.ln{font:700 19px/1 var(--fm);letter-spacing:-.02em;margin-top:5px}
.ln u{text-decoration:none;color:var(--dim);font-weight:400;font-size:12px}
.ln.noline{font:600 13px/1.2 var(--fd);color:var(--mut);letter-spacing:.03em}
.badge.noline{color:#ffb020;border-color:rgba(255,176,32,.4)}
.badge{font:700 9.5px/1 var(--fm);letter-spacing:.08em;padding:5px 7px;border-radius:6px;
  border:1px solid var(--line);color:var(--mut);background:var(--panel);text-transform:uppercase}
.badge.t1{color:#04120d;background:var(--nfl);border-color:transparent}
.badge.hit,.badge.live{color:#04120d;background:var(--hit);border-color:transparent}
.badge.loss{color:#1a0509;background:var(--loss);border-color:transparent}
.badge.track{color:var(--hit);border-color:rgba(0,229,160,.42)}
.badge.behind{color:var(--loss);border-color:rgba(255,77,109,.42)}
.badge.pend{color:var(--dim)}
.meter{margin-top:13px}
.mbar{position:relative;height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.mfill{position:absolute;top:0;bottom:0;left:0;border-radius:99px;
  background:linear-gradient(90deg,#00e5a0,#5af5cb);transition:width .7s cubic-bezier(.22,1,.36,1)}
.mfill.loss{background:linear-gradient(90deg,#ff4d6d,#ff8199)}
.mtick{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.55)}
.mlab{display:flex;justify-content:space-between;margin-top:6px;
  font:500 10.5px/1 var(--fm);color:var(--dim)}
.mlab b{color:var(--ink);font-weight:700}
ul.why{margin:11px 0 0;padding-left:15px;color:var(--mut);font-size:12.5px;line-height:1.5}
ul.why li{margin-bottom:3px}
.risk{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.45;color:var(--mut)}
.risk b{color:#ffb020;font-weight:600}
.xf{margin-top:7px;font-size:12px;line-height:1.45;color:var(--dim)}
.xf b{color:#22d3ee;font-weight:600}
.cpill.joe{background:rgba(255,196,0,.16);border-color:rgba(255,196,0,.5);color:#ffd166;font-weight:600}
.cpill.temp{background:rgba(129,140,248,.16);border-color:rgba(129,140,248,.45);color:#a5b4fc;font-weight:600}
.cpill.lock{background:rgba(0,229,160,.18);border-color:rgba(0,229,160,.55);color:#00e5a0;font-weight:700}
.cpill.fin{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.5);color:#22d3ee;font-weight:700}
.cpill.upd{background:rgba(255,196,0,.18);border-color:rgba(255,196,0,.5);color:#ffd166;font-weight:700}
.cpill.rev{background:rgba(255,77,109,.16);border-color:rgba(255,77,109,.5);color:#ff8fa3;font-weight:700}
.gbadge.lock{background:rgba(0,229,160,.16);color:#00e5a0;border:1px solid rgba(0,229,160,.45)}
.lkbtn{width:100%;padding:9px 12px;border-radius:9px;border:1px solid rgba(0,229,160,.45);
  background:rgba(0,229,160,.10);color:#00e5a0;font:600 12px/1 var(--fh,inherit);cursor:pointer}
.lkbtn.on{background:rgba(0,229,160,.22);color:#d7fff2}
.lkbtn:disabled{opacity:.5;cursor:default}
.note{margin-top:10px;padding:9px 10px;border-radius:9px;
  border:1px solid rgba(34,211,238,.25);background:rgba(34,211,238,.05);
  font:400 11.5px/1.5 var(--fm);color:#bfe9f4}
/* ---------- analysis + fades ---------- */
.panel{margin:0 0 16px;padding:15px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(34,211,238,.055),var(--panel))}
.panel h2{margin:0 0 9px;font:600 13px/1 var(--fd);display:flex;align-items:center;
  gap:9px;flex-wrap:wrap}
.panel p{margin:0;font-size:13.5px;line-height:1.55}
.alerts{margin:11px 0 0;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.fadegrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.fadecard{padding:13px;border-radius:13px;border:1px solid var(--line);background:var(--panel)}
.fadecard .v{font:700 9.5px/1 var(--fm);letter-spacing:.09em;text-transform:uppercase;
  color:#ffb020;margin-bottom:7px}
.fadecard .n{font:600 13px/1.2 var(--fd)}
.fadecard .m{font:400 11px/1.4 var(--fm);color:var(--dim);margin-top:4px}
.fadecard .d{font-size:12px;line-height:1.45;color:var(--mut);margin-top:8px}
.caveats{margin:26px 0 0;padding:15px;border-radius:var(--r);
  border:1px dashed rgba(255,176,32,.3);background:rgba(255,176,32,.035)}
.caveats h2{margin:0 0 9px;font:600 12.5px/1 var(--fd);color:#ffb020}
.caveats ul{margin:0;padding-left:17px;font-size:12px;line-height:1.55;color:var(--mut)}
.empty{padding:26px;text-align:center;color:var(--dim);font:400 12.5px/1.6 var(--fm)}
/* ---------- loading overlay ---------- */
/* Loading is a slim sticky status strip above the grid - never a modal over the
   thing being built, so the user watches the board fill in underneath it. */
/* Intermediate loading screen: the board is only revealed when the run is
   complete, so this is a full overlay rather than something that sits in flow. */
.ov{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:18px;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(0,229,160,.07),transparent 70%),
             rgba(4,6,8,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ov.on{display:grid}
.ovc{width:min(580px,94vw);max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:24px 22px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,rgba(13,18,23,.985),rgba(7,10,13,.99));
  box-shadow:0 44px 130px -44px rgba(0,0,0,.97);
  animation:ovin .36s cubic-bezier(.22,1,.36,1) both}
@keyframes ovin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ovc .stages{max-height:168px;overflow-y:auto}
.grip{display:none}
.ovhead b{font-size:13px}
.ovc .stages{max-height:132px;overflow-y:auto}
.ovc .reason{margin-top:10px}
.ovhead{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ovhead .rings{width:26px;height:26px;margin:0;flex:0 0 26px}
.ovhead .rings i:nth-child(2){inset:5px}
.ovhead .rings i:nth-child(3){inset:10px}
.ovhead b{font:600 14px/1.2 var(--fd);flex:1 1 auto}
.grip{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);
  margin:0 auto 12px}
.reason{margin:14px 0 0;padding:12px 13px;border-radius:12px;
  border:1px solid rgba(34,211,238,.28);background:rgba(34,211,238,.055)}
.reason h4{margin:0 0 6px;font:600 9.5px/1 var(--fm);letter-spacing:.12em;
  text-transform:uppercase;color:var(--live);display:flex;align-items:center;gap:7px}
.reason p{margin:0;font:400 12.5px/1.55 var(--fm);color:#cfeef7}
.reason .caret{display:inline-block;width:7px;height:12px;background:var(--live);
  vertical-align:-2px;animation:blink 1s step-end infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.rings{width:74px;height:74px;margin:0 auto 18px;position:relative}
.rings i{position:absolute;inset:0;border-radius:50%;border:2px solid transparent}
.rings i:nth-child(1){border-top-color:#00e5a0;animation:rot 1.1s linear infinite}
.rings i:nth-child(2){inset:11px;border-right-color:#22d3ee;animation:rot 1.5s linear infinite reverse}
.rings i:nth-child(3){inset:22px;border-bottom-color:#ffb020;animation:rot 1.9s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.ovt{margin:0;font:600 15px/1.3 var(--fd)}
.ovs{margin:8px 0 0;font:400 12px/1.5 var(--fm);color:var(--mut);min-height:36px}
.stages{margin:16px 0 0;display:flex;flex-direction:column;gap:7px;text-align:left;max-height:212px;overflow-y:auto;padding-right:4px}
.stg{display:flex;align-items:center;gap:9px;font:400 11.5px/1.45 var(--fm);
  color:var(--dim);padding:2px 0}
.stg .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending{display:flex;align-items:center;gap:9px;padding:2px 0;
  font:400 11.5px/1.45 var(--fm);color:var(--dim)}
.pending .d{letter-spacing:.14em;animation:pulsedots 1.4s ease-in-out infinite}
@keyframes pulsedots{0%,100%{opacity:.25}50%{opacity:1}}
.stg.k{color:var(--ink)}
.stg.e{color:var(--loss)}
.stg .pip{width:13px;height:13px;flex:0 0 13px;border-radius:50%;
  border:1.5px solid var(--dim);display:grid;place-items:center;font-size:8px}
.stg:not(.k):not(.e) .pip{border-color:var(--live);color:var(--live);animation:pulsepip 1.05s ease-in-out infinite}
@keyframes pulsepip{0%,100%{opacity:.3}50%{opacity:1}}
.stg.k .pip{border-color:var(--hit);color:var(--hit)}
.stg.e .pip{border-color:var(--loss);color:var(--loss)}
.pb{margin:17px 0 0;height:5px;border-radius:99px;background:rgba(255,255,255,.08);
  overflow:hidden}
.pbfill{height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#00e5a0,#22d3ee 55%,#ffb020);
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.prow{display:flex;justify-content:space-between;margin-top:7px;
  font:500 10.5px/1 var(--fm);color:var(--dim)}
@media(max-width:640px){
  .wrap{padding:0 12px 56px}
  .top-in{padding:11px 12px;gap:9px}
  h1{font-size:14.5px}
  .cards,.fadegrid{grid-template-columns:1fr}
  .tabs{width:100%}
  .tab{flex:1;justify-content:center;padding:11px 12px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}