/* currencyheatmap.com — concept design system (dark, quiet-quant, shareable) */
:root{
  --bg:#070b16; --bg2:#0b1224; --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.09);
  --ink:#e8ecf8; --muted:#8a96b4; --up:#26d9a4; --dn:#ff4d6d; --gold:#ffc400; --blue:#4aa3ff;
  --r:16px; --shadow:0 20px 60px rgba(0,0,0,.45);
  --head:"Barlow Condensed","DIN Condensed","Arial Narrow",system-ui,sans-serif;
  --body:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 500px at 12% -10%,rgba(38,217,164,.14),transparent 60%),
  radial-gradient(800px 500px at 95% 0%,rgba(255,77,109,.12),transparent 60%),
  radial-gradient(900px 600px at 50% 110%,rgba(74,163,255,.10),transparent 60%),
  linear-gradient(var(--bg),var(--bg2));}
.bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%)}
.muted{color:var(--muted)} .fine{color:var(--muted);font-size:12.5px;max-width:880px}
.wrap{max-width:1180px;margin:0 auto;padding:36px 20px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:12px 22px;backdrop-filter:blur(14px) saturate(140%);background:rgba(7,11,22,.72);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:9px;font:800 22px/1 var(--head);letter-spacing:.3px} .logo b{color:var(--gold);font-weight:800} .logo.small{font-size:20px}
.nav nav{display:flex;gap:4px;margin-left:10px;flex:1} .nav nav a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px}
.nav nav a:hover{color:var(--ink);background:var(--panel)} .nav nav a.on{color:#fff;background:var(--panel-2)}
.cta{padding:9px 16px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#ffdf6b);color:#1a1400;font-weight:700;font-size:13.5px;box-shadow:0 6px 20px rgba(255,196,0,.25)}

/* hero */
.hero{max-width:1180px;margin:0 auto;padding:70px 20px 28px;text-align:left}
.pulse{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12.5px;color:var(--muted);letter-spacing:.3px}
.pulse i{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(38,217,164,.7);animation:pl 1.8s infinite}
@keyframes pl{70%{box-shadow:0 0 0 10px rgba(38,217,164,0)}100%{box-shadow:0 0 0 0 rgba(38,217,164,0)}}
h1{font:800 clamp(52px,9vw,120px)/.92 var(--head);letter-spacing:-.5px;margin:20px 0 14px;text-transform:uppercase}
h1 span{background:linear-gradient(90deg,var(--gold),#fff3b0 55%,var(--up));-webkit-background-clip:text;background-clip:text;color:transparent}
.h1{font-size:clamp(40px,6vw,72px);margin:6px 0 8px}
.lede{max-width:640px;font-size:18px;color:#b9c3dc;margin:0 0 26px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 28px;max-width:860px}
.stats>div{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.stats b{display:block;font:800 40px/1 var(--head);color:#fff} .stats span{font-size:12.5px;color:var(--muted)}
.btn{display:inline-block;padding:10px 18px;border-radius:12px;font-weight:700;font-size:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink);font-family:var(--body)}
.btn:hover{background:var(--panel-2)} .btn.big{background:linear-gradient(135deg,var(--gold),#ffdf6b);color:#1a1400;border:0;padding:13px 24px;font-size:15px;box-shadow:0 10px 30px rgba(255,196,0,.28)}
.btn.ghost{background:transparent} .btn.x{background:#fff;color:#000;border:0} .btn.tg{background:#229ed9;color:#fff;border:0}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.02);margin-top:10px}
.track{display:flex;gap:34px;width:max-content;padding:11px 0;animation:mq 60s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.tk{white-space:nowrap;font-size:13px;color:var(--muted)} .tk b{color:var(--ink)} .tk.long{color:var(--up)} .tk.short{color:var(--dn)} .tk i{font-style:normal;color:var(--muted)}
.tk:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle}

/* sections */
.sh{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .sh.col{display:block}
h2{font:800 38px/1 var(--head);text-transform:uppercase;margin:0 0 4px} h3{font:700 22px/1.1 var(--head);text-transform:uppercase;letter-spacing:.4px;margin:0 0 12px}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.f{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 13px var(--body);cursor:pointer}
.f:hover{color:var(--ink)} .f.on{background:var(--ink);color:#0a0e1c;border-color:var(--ink)}

/* board (the "heatmap") */
.board{display:grid;grid-template-columns:150px repeat(6,1fr);gap:5px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);overflow:auto}
.bh{font:700 13px var(--head);letter-spacing:1px;color:var(--muted);text-align:center;padding-bottom:4px}
.bs{display:flex;flex-direction:column;justify-content:center;padding-right:8px} .bs b{font:700 17px/1 var(--head);letter-spacing:.3px} .bs i{font-style:normal;font-size:10.5px;color:var(--muted)}
.bc{height:30px;border-radius:8px;border:1px solid transparent;transition:transform .12s,box-shadow .12s}
.bc.empty{background:rgba(255,255,255,.025)}
.bc.call.c-long{background:linear-gradient(135deg,#1fbf91,#26d9a4);box-shadow:0 0 14px rgba(38,217,164,.35)}
.bc.call.c-short{background:linear-gradient(135deg,#e63e5d,#ff4d6d);box-shadow:0 0 14px rgba(255,77,109,.35)}
.bc.forming.c-long{border:1.5px solid var(--up);background:rgba(38,217,164,.08)} .bc.forming.c-short{border:1.5px solid var(--dn);background:rgba(255,77,109,.08)}
a.bc:hover{transform:scale(1.12);z-index:2}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px} .grid.g3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,196,0,.45);box-shadow:var(--shadow)}
.card.hide{display:none}
.shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a0e1c} .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .shot img{transform:scale(1.04)}
.kind{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;font:700 11px var(--body);letter-spacing:.6px;text-transform:uppercase;backdrop-filter:blur(8px)}
.kind.wing{background:rgba(255,196,0,.9);color:#1a1400} .kind.pred{background:rgba(10,14,28,.7);color:#fff;border:1px solid var(--line)}
.meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px}
.meta .l,.meta .r{display:flex;align-items:center;gap:8px} .sym{font:800 22px/1 var(--head);letter-spacing:.3px}
.tf{padding:2px 8px;border-radius:7px;background:var(--ink);color:#0a0e1c;font:700 11px var(--body)}
.dir{font:800 11px var(--body);letter-spacing:.6px} .dir.long{color:var(--up)} .dir.short{color:var(--dn)} .ago{font-size:12px;color:var(--muted)}
.st{padding:3px 9px;border-radius:999px;font:700 11px var(--body);border:1px solid var(--line);color:var(--muted)}
.st.live{color:var(--blue);border-color:rgba(74,163,255,.5)} .st.win,.st.win2{color:#04170f;background:var(--up);border-color:var(--up)} .st.win2{box-shadow:0 0 14px rgba(38,217,164,.5)}
.st.loss{color:#fff;background:rgba(255,77,109,.85);border-color:var(--dn)} .st.pend{color:var(--gold);border-color:rgba(255,196,0,.45)}

/* detail */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px} .crumbs a:hover{color:var(--ink)}
.d-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.hero-img{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.share{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.embed{background:#05080f;border:1px solid var(--line);border-radius:12px;padding:12px;color:#9fb0d6;font-size:12.5px;white-space:pre-wrap;word-break:break-all}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:18px;margin-bottom:16px}
.p-top{display:flex;justify-content:space-between;align-items:center;margin:-18px -18px 14px;padding:14px 18px;border-radius:var(--r) var(--r) 0 0;font:800 24px var(--head);letter-spacing:.6px}
.p-top.long{background:linear-gradient(135deg,#1fbf91,#26d9a4);color:#04170f} .p-top.short{background:linear-gradient(135deg,#e63e5d,#ff4d6d);color:#fff} .p-top em{font:600 13px var(--body);opacity:.85;font-style:normal}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px} .kv small{display:block;color:var(--muted);font-size:12px} .kv b{font:800 30px/1.05 var(--head)} .up{color:var(--up)} .dn{color:var(--dn)}
.timeline{display:grid;gap:8px;margin:18px 0 6px;position:relative}
.tl{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px} .tl i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:transparent} .tl em{margin-left:auto;font-style:normal;font-size:12px}
.tl.on{color:var(--ink)} .tl.on i{background:var(--up);border-color:var(--up);box-shadow:0 0 10px rgba(38,217,164,.6)}
.statusline{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:13px}
.how p{margin:0;color:#b9c3dc;font-size:14px} .rel-h{margin:34px 0 14px}
.og{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:700px;background:#0e1424}
.og-t{padding:14px 16px;display:flex;flex-direction:column;gap:4px} .og-t small{color:var(--muted)} .og-t span{color:var(--muted);font-size:13px}

/* scoreboard */
.s-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .panel.wide{grid-column:1/-1} .panel.big{display:flex;align-items:center;gap:22px}
.bignum{font:800 clamp(80px,12vw,150px)/.85 var(--head);background:linear-gradient(180deg,#fff,var(--up));-webkit-background-clip:text;background-clip:text;color:transparent}
.bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06);min-width:90px;flex:1} .bar .w{background:var(--up)} .bar .l{background:var(--dn)}
.wrow,.lrow{display:grid;grid-template-columns:110px 1fr 54px 48px 70px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.lrow{grid-template-columns:28px 90px 1fr 48px 50px} .wrow:last-child,.lrow:last-child{border-bottom:0}
.wrow em,.lrow em{font-style:normal;font-weight:700;color:var(--up)} .wrow small,.lrow small{color:var(--muted)}
.method ul{margin:0;padding-left:18px;color:#b9c3dc} .method li{margin:6px 0}

/* symbol */
.sym-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px} .tag{padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:12px}
.mini{margin-left:auto;text-align:right} .mini b{font:800 34px/1 var(--head);display:block} .mini span{font-size:12.5px;color:var(--muted)}

footer{border-top:1px solid var(--line);margin-top:50px;padding:34px 20px 40px;background:rgba(0,0,0,.25)}
.foot-grid{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} .follow{display:flex;gap:10px;align-items:flex-start}
.legal{max-width:1180px;margin:20px auto 0;font-size:12px;color:var(--muted)}

@media(max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)} .d-grid{grid-template-columns:1fr} .s-grid{grid-template-columns:1fr}
  .grid.g3{grid-template-columns:1fr} .nav nav{display:none} .board{grid-template-columns:96px repeat(6,minmax(34px,1fr))} .og{grid-template-columns:1fr}
  .wrow{grid-template-columns:84px 1fr 44px 40px} .wrow small{display:none} .panel.big{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.track,.pulse i{animation:none}.card,.card img{transition:none}}

/* polish */
.kind{position:static;padding:2px 8px;border-radius:999px;font:700 10.5px var(--body);letter-spacing:.5px;text-transform:uppercase}
.kind.wing{background:rgba(255,196,0,.16);color:var(--gold);border:1px solid rgba(255,196,0,.4)} .kind.pred{background:transparent;color:var(--muted);border:1px solid var(--line)}
.meta .l{flex-wrap:wrap;gap:7px}
.board .more{display:none} .board.open .more{display:block}
.more-btn{margin:14px auto 0;display:block}
.wrow{grid-template-columns:90px 1fr 76px 48px 70px} .wrow.small{opacity:.5}
.nc{display:grid;grid-template-columns:1fr 1fr;gap:12px} .nc b{display:block;font:800 40px/1 var(--head)} .nc span{font-size:12.5px;color:var(--muted)}
.cta{white-space:nowrap}
@media(max-width:520px){.nav{padding:10px 14px;gap:10px}.logo{font-size:20px}.cta{padding:8px 13px;font-size:12.5px}.hero{padding-top:44px}.wrap{padding:28px 14px}}

/* time sections */
.tsec{margin:0 0 34px} .tsec.hide{display:none}
.tlabel{position:sticky;top:58px;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 0;margin-bottom:10px;background:linear-gradient(var(--bg) 70%,transparent)}
.tlabel i{width:11px;height:11px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.tlabel b{font:800 24px/1 var(--head);text-transform:uppercase;letter-spacing:.5px} .tlabel span{font-size:12.5px;color:var(--muted)}
.tlabel:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.tsec.hot .tlabel i{background:var(--up);box-shadow:0 0 0 4px rgba(38,217,164,.18),0 0 14px rgba(38,217,164,.7);animation:pl 1.8s infinite}
.tsec.hot .tlabel b{color:#fff}
.tsec.hot .card{border-color:rgba(38,217,164,.35)}
.new{padding:2px 8px;border-radius:999px;background:var(--up);color:#04170f;font:800 10px var(--body);letter-spacing:.7px}

.quiet{margin:0;padding:18px 20px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);font-size:14px;grid-column:1/-1}

/* card footer: two clean lines */
.meta{padding:11px 14px 4px;flex-wrap:nowrap} .meta .l{flex-wrap:nowrap} .st,.ago,.tf,.dir{white-space:nowrap}
.sub{display:flex;align-items:center;gap:8px;padding:2px 14px 12px} .sub .ago{margin-left:auto}

/* wins */
.card.win .shot{background:#f5efe0} .badge-win{position:absolute;left:10px;bottom:10px;padding:4px 11px;border-radius:999px;background:var(--up);color:#04170f;font:800 11px var(--body);letter-spacing:.6px;box-shadow:0 6px 18px rgba(38,217,164,.45)}
.card.win:hover{border-color:rgba(38,217,164,.6)} .rr{font:800 22px var(--head);color:var(--up)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ba figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)} .ba figcaption{padding:10px 14px;font:700 12px var(--body);letter-spacing:.5px;color:var(--muted);text-transform:uppercase}
.ba figure.res{border-color:rgba(38,217,164,.55)} .ba figure.res figcaption{color:var(--up)}
@media(max-width:860px){.ba{grid-template-columns:1fr}}

/* ---- 2026-10-22 audit fixes ---- */
/* mobile navigation: keep the links, as a scrollable row under the logo bar (was display:none) */
@media(max-width:860px){
  .nav{flex-wrap:wrap;row-gap:6px}
  .nav nav{display:flex;order:3;flex:0 0 100%;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{white-space:nowrap;padding:7px 12px;font-size:13.5px}
  .cta{margin-left:auto}
  .wrow{grid-template-columns:70px minmax(0,1fr) 54px 40px} .wrow small{display:none}
  .lrow{grid-template-columns:22px 70px minmax(0,1fr) 40px 64px}
  .board{overflow-x:auto}
}
/* contrast: white text on the red gradient was 3.2:1; use a darker red for text-bearing blocks */
.p-top.short{background:linear-gradient(135deg,#b3243f,#c92f4d);color:#fff}
/* board status glyphs (visible, not only a hover title) */
.bc{display:flex;align-items:center;justify-content:center;font:700 12px var(--body);color:#06130e}
.bc.c-short.call{color:#fff} .bc.forming{color:var(--ink)}
/* reduced motion: also cover the time-section pulse and smooth scrolling */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.lrow small.ci{display:block;color:var(--muted);font-size:11.5px}
.fine.asof{margin-top:8px}
.lrow{grid-template-columns:28px 90px minmax(0,1fr) 48px 84px} .lrow small .ci{display:block;font-size:11px;color:var(--muted)}
@media(max-width:860px){.lrow{grid-template-columns:22px 64px minmax(0,1fr) 40px 76px}}