/* h2.css — the dashboard header v2 skin (h2-*), moved out of index.html on 2026-10-03 so calculators.html,
   charts.html and portfolio.html wear the SAME header from the same file. Every rule here used to sit inline in
   index.html between the HOME (hc-*) and PANELS (p2-*) blocks; the <link> is in that exact spot, so the cascade is
   unchanged. Change a size by changing N in calc(N*var(--u)) (gotcha 36). When this file changes, bump ?v= on the
   four <link> tags (GitHub Pages caches it 10 min, gotcha 38). */
/* ===== DASHBOARD HEADER v2 (2026-09-30) — Shaka's reference mock-up built in.
   design/dashboard-header/ holds the mock-ups + README of every decision. Sizes are the
   reference's pixels (2166 px wide) times --u, one "reference pixel": the wrapper measures
   itself and sets --hsd (desktop, 2166-wide reference, floor .47) and --hsp (phone, 390-wide
   reference) — see hdrScale(). rem-based so a larger browser font scales all of it (gotcha 17).
   Colours: PTGC gold / UFO green via data-tok. The art is one jpg band (logos/header/dash-bg.jpg)
   + the transparent alien head (alien-head.webp) placed like the reference; the coin sits on a
   fire "corona" (coin-corona*.webp, mix-blend screen). Text always has dark shading behind it. */
.h2{--u:calc(var(--hsd,.665)*.0625rem);--up:#2BE07F;--dn:#FF5A78;position:relative;background:#04070a;color:#fff;font-family:'Rajdhani',sans-serif;
  --a:#E9B949;--a-rgb:233,185,73;--halo:255,120,20;--ring:255,190,80;--tab:#FFE27A;--bar:linear-gradient(90deg,#F8DB7C,#E7B843);--bar-rgb:255,196,60;--pill:#FFD65A;
  --tile-bg:linear-gradient(180deg,rgba(18,19,14,.96) 0%,rgba(14,14,10,.97) 55%,rgba(34,28,12,.95) 100%);--tile-hot:linear-gradient(180deg,rgba(40,32,12,.9) 0%,rgba(24,20,10,.95) 45%,rgba(70,52,14,.9) 100%);
  --tile-bd:rgba(190,150,70,.5);--tile-bd-hot:rgba(240,196,90,.95);--spark:#E9B949;--hotval:#FBE7B0;
  --buy-bg:linear-gradient(180deg,#F8DB7C 0%,#E7B843 50%,#C58F22 100%);--buy-ink:#241802;--buy-glow:240,180,60;--sw-rgb:124,252,0;--sw-edge:157,255,58}
.h2[data-tok="UFO"]{--a:#9DFF3A;--a-rgb:157,255,58;--halo:110,255,40;--ring:140,255,60;--tab:#C8FF78;--bar:linear-gradient(90deg,#C8FF78,#7CFC00);--bar-rgb:140,255,50;--pill:#A8FF4A;
  --tile-bg:linear-gradient(180deg,rgba(14,19,14,.96) 0%,rgba(10,14,10,.97) 55%,rgba(18,34,12,.95) 100%);--tile-hot:linear-gradient(180deg,rgba(20,36,10,.9) 0%,rgba(12,22,8,.95) 45%,rgba(36,70,12,.9) 100%);
  --tile-bd:rgba(110,190,60,.5);--tile-bd-hot:rgba(160,255,70,.95);--spark:#8EEB2A;--hotval:#E4FFC4;
  --buy-bg:linear-gradient(180deg,#C8FF78 0%,#8EEB2A 50%,#5DB512 100%);--buy-ink:#0E2402;--buy-glow:124,252,0;--sw-rgb:232,192,68;--sw-edge:240,200,90}
.h2 img{max-width:none}   /* Tailwind's preflight caps every img at max-width:100% of its box — the corona (520u in a 195u coin) and the enlarged band copy were being squeezed (found live 2026-09-30) */
.h2 .orb{font-family:'Orbitron',monospace}
.h2 .tn{font-variant-numeric:tabular-nums}
.h2 .h2-tref,.h2 .h2-tprice,.h2 .h2-tref2{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.h2 .h2-tref{background-image:linear-gradient(180deg,#FEF7C0 0%,#FFE58E 14%,#FFDA72 34%,#FFD066 52%,#F0B544 62%,#D59A36 74%,#A87226 90%,#B87A28 100%)}
.h2 .h2-tprice{background-image:linear-gradient(180deg,#FFF6D6 0%,#FBE6B0 24%,#F8D88C 42%,#F6C866 58%,#EEB852 74%,#E3A945 90%,#D69C40 100%)}
.h2 .h2-tprice sub{-webkit-text-fill-color:#F0BE5E;color:#F0BE5E;background:none;font-size:.6em;vertical-align:-.2em;margin:0 .04em;opacity:1}
.h2 .h2-tref2{background-image:linear-gradient(180deg,#FFE9A8 0%,#F6D27A 30%,#F0C35E 50%,#DCA03A 72%,#C88E31 100%)}
.h2[data-tok="UFO"] .h2-tref{background-image:linear-gradient(180deg,#F2FFE0 0%,#D6FFA0 14%,#B8FF62 34%,#9CF53A 52%,#7EE01E 62%,#5FB814 74%,#3F8A0C 90%,#4C9A10 100%)}
.h2[data-tok="UFO"] .h2-tprice{background-image:linear-gradient(180deg,#F4FFE4 0%,#E0FFB8 24%,#CBFF8C 42%,#B2F760 58%,#9BEA45 74%,#86D83A 90%,#76C634 100%)}
.h2[data-tok="UFO"] .h2-tprice sub{-webkit-text-fill-color:#A8EE55;color:#A8EE55}
.h2[data-tok="UFO"] .h2-tref2{background-image:linear-gradient(180deg,#E6FFC4 0%,#C6FF80 30%,#A8F554 50%,#86D836 72%,#6CBE2A 100%)}
.h2 .h2-sh{filter:drop-shadow(0 2px 3px rgba(0,0,0,1)) drop-shadow(0 0 12px rgba(0,0,0,.9))}
.h2 .h2-ts{text-shadow:0 1px 3px #000}
/* --- desktop banner (lg+): the reference's coordinates, flex not absolute so it breathes between 1024 and 2166 --- */
.h2-desk{--u:calc(var(--hsd,.665)*.0625rem);position:relative;height:calc(336*var(--u));overflow:hidden;background:#050504}
.h2-desk .h2-art{position:absolute;inset:0;pointer-events:none}
.h2-desk .h2-band{position:absolute;left:0;top:calc(-7*var(--u));width:100%;min-width:calc(2166*var(--u));height:calc(350*var(--u))}
.h2-desk .h2-band2{position:absolute;right:0;top:calc(-26*var(--u));width:calc(2428*var(--u));height:calc(392*var(--u));
  -webkit-mask-image:linear-gradient(90deg,transparent calc(1562*var(--u)),#000 calc(1682*var(--u)));mask-image:linear-gradient(90deg,transparent calc(1562*var(--u)),#000 calc(1682*var(--u)))}
.h2-desk .h2-head{position:absolute;right:calc(259*var(--u));top:calc(-135*var(--u));width:calc(512*var(--u));height:calc(455*var(--u));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 96%);mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 96%);
  filter:brightness(.78) contrast(1.12) saturate(.95) drop-shadow(calc(10*var(--u)) 0 calc(16*var(--u)) rgba(90,255,90,.35)) drop-shadow(calc(-8*var(--u)) 0 calc(14*var(--u)) rgba(255,170,50,.25))}
.h2-desk .h2-shade{position:absolute;inset:0;background:
  radial-gradient(ellipse calc(850*var(--u)) calc(150*var(--u)) at calc(730*var(--u)) calc(190*var(--u)),rgba(0,0,0,.55) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%),
  radial-gradient(ellipse calc(190*var(--u)) calc(120*var(--u)) at calc(470*var(--u)) calc(200*var(--u)),rgba(0,0,0,.6),rgba(0,0,0,0)),
  radial-gradient(ellipse calc(185*var(--u)) calc(105*var(--u)) at calc(815*var(--u)) calc(205*var(--u)),rgba(0,0,0,.7),rgba(0,0,0,0)),
  radial-gradient(ellipse calc(180*var(--u)) calc(85*var(--u)) at calc(820*var(--u)) calc(125*var(--u)),rgba(0,0,0,.7),rgba(0,0,0,0)),
  radial-gradient(ellipse calc(250*var(--u)) calc(85*var(--u)) at calc(1240*var(--u)) calc(215*var(--u)),rgba(0,0,0,.65),rgba(0,0,0,0)),
  radial-gradient(ellipse calc(330*var(--u)) calc(70*var(--u)) at calc(1290*var(--u)) calc(220*var(--u)),rgba(0,0,0,.72),rgba(0,0,0,.45) 60%,rgba(0,0,0,0)),
  radial-gradient(ellipse calc(150*var(--u)) calc(65*var(--u)) at calc(1480*var(--u)) calc(215*var(--u)),rgba(0,0,0,.7),rgba(0,0,0,0))}
.h2-desk .h2-shade-r{position:absolute;right:0;top:0;bottom:0;width:calc(430*var(--u));background:radial-gradient(ellipse calc(205*var(--u)) calc(135*var(--u)) at 50% 58%,rgba(0,0,0,.7),rgba(0,0,0,.35) 70%,rgba(0,0,0,0))}
.h2-desk .h2-fade{position:absolute;left:0;right:0;bottom:0;height:calc(18*var(--u));background:linear-gradient(180deg,rgba(0,0,0,0),rgba(3,8,8,.8))}
.h2-desk .h2-row{position:relative;z-index:1;height:100%;display:flex;align-items:center;padding:0 calc(76*var(--u)) 0 calc(58*var(--u));gap:calc(18*var(--u))}
.h2-desk .h2-back{position:absolute;left:calc(26*var(--u));top:calc(22*var(--u));z-index:2;font-size:max(calc(26*var(--u)),1rem);color:rgba(255,255,255,.55);line-height:1}
.h2-desk .h2-back:hover{color:#fff}
.h2 .h2-coin{position:relative;flex:none;width:calc(195*var(--u));height:calc(195*var(--u))}
.h2 .h2-coin .h2-halo{position:absolute;inset:calc(-70*var(--u));border-radius:50%;background:radial-gradient(circle,rgba(var(--halo),.22) 45%,rgba(var(--halo),.06) 60%,rgba(0,0,0,0) 72%)}
.h2 .h2-coin .h2-corona{position:absolute;left:calc(-162*var(--u));top:calc(-162*var(--u));width:calc(520*var(--u));height:calc(520*var(--u));mix-blend-mode:screen;pointer-events:none}
.h2 .h2-coin .h2-flare{position:absolute;left:calc(104*var(--u));top:calc(-8*var(--u));width:calc(30*var(--u));height:calc(9*var(--u));border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,220,130,.7) 45%,rgba(255,180,60,0))}
.h2 .h2-coin .h2-flare-v{position:absolute;left:calc(118*var(--u));top:calc(-18*var(--u));width:calc(2*var(--u));height:calc(30*var(--u));background:linear-gradient(180deg,rgba(255,240,200,0),#fff 50%,rgba(255,240,200,0))}
.h2 .h2-coin .h2-flare-h{position:absolute;left:calc(100*var(--u));top:calc(-4*var(--u));width:calc(40*var(--u));height:calc(1.5*var(--u));background:linear-gradient(90deg,rgba(255,240,200,0),#fff 50%,rgba(255,240,200,0))}
.h2 .h2-coin>img.h2-logo{position:relative;width:100%;height:100%;border-radius:50%;filter:brightness(1.08) contrast(1.05);box-shadow:0 0 calc(10*var(--u)) calc(2*var(--u)) rgba(var(--ring),.55)}
.h2-desk .h2-id{flex:none;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.h2-desk .h2-name{font-size:calc(80*var(--u));font-weight:900;line-height:1;letter-spacing:.01em;filter:drop-shadow(0 2px 2px rgba(0,0,0,.9))}
.h2-desk .h2-addr{align-self:flex-end;margin-top:calc(12*var(--u));display:flex;align-items:center;gap:calc(10*var(--u));font-size:max(calc(24*var(--u)),.75rem);font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.82)}
.h2 .h2-addr button{color:rgba(255,255,255,.75);line-height:1}
.h2 .h2-addr button:hover{color:#fff}
.h2-desk .h2-day{margin-top:calc(14*var(--u))}
.h2 .h2-daypill{display:inline-flex;align-items:center;gap:calc(12*var(--u));height:calc(45*var(--u));box-sizing:border-box;padding:0 calc(22*var(--u)) 0 calc(18*var(--u));border-radius:999px;border:calc(1.6*var(--u)) solid rgba(var(--a-rgb),.85);background:rgba(10,8,2,.55);white-space:nowrap}
.h2 .h2-daypill svg{width:calc(20*var(--u));height:calc(20*var(--u));flex:none}
.h2 .h2-daypill .h2-dayl{font-size:max(calc(18*var(--u)),.6rem);font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.85)}
.h2 .h2-daypill .h2-dayn{font-size:max(calc(21*var(--u)),.7rem);font-weight:700}
.h2-desk .h2-vl{flex:none;width:calc(1.5*var(--u));height:calc(130*var(--u));background:rgba(235,235,235,.55);margin:0}
.h2-desk .h2-price{flex:none;width:calc(288*var(--u));text-align:center}
.h2-desk .h2-pricev{font-size:calc(66*var(--u));font-weight:700;line-height:1;white-space:nowrap}
.h2 .h2-chg{display:flex;align-items:center;justify-content:center;gap:calc(14*var(--u));font-size:calc(40*var(--u));font-weight:700;color:#12E28A;line-height:1;text-shadow:0 1px 4px #000,0 0 14px #000}
.h2 .h2-chg.dn{color:var(--dn)}
.h2 .h2-chg.na{color:rgba(255,255,255,.4)}
.h2 .h2-chg svg{width:calc(30*var(--u));height:calc(26*var(--u));filter:drop-shadow(0 0 6px rgba(0,230,120,.5))}
.h2 .h2-chg.dn svg{transform:rotate(180deg);filter:drop-shadow(0 0 6px rgba(255,90,120,.5))}
.h2-desk .h2-chg{margin-top:calc(14*var(--u))}
.h2-desk .h2-chgl{margin-top:calc(8*var(--u));font-size:max(calc(21*var(--u)),.7rem);font-weight:500;color:rgba(255,255,255,.7)}
.h2-desk .h2-stats{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:0;margin-left:calc(2*var(--u))}
.h2-desk .h2-stat{padding:0 calc(18*var(--u)) 0 calc(22*var(--u));white-space:nowrap;text-align:center}
.h2-desk .h2-statl{justify-content:center}
.h2-desk .h2-stat:first-child{padding-left:0}
.h2-desk .h2-stat+.h2-stat{border-left:calc(1.5*var(--u)) solid rgba(235,235,235,.55)}
.h2 .h2-statl{display:flex;align-items:center;font-size:max(calc(19*var(--u)),.6rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 1px 3px #000}
.h2-desk .h2-statv{margin-top:calc(8*var(--u));font-size:calc(46*var(--u));font-weight:700;line-height:1;white-space:nowrap}
.h2 .h2-info{display:inline-flex;align-items:center;justify-content:center;width:calc(18*var(--u));height:calc(18*var(--u));min-width:calc(18*var(--u));border-radius:50%;border:calc(1.6*var(--u)) solid rgba(255,255,255,.85);font-size:calc(11*var(--u));font-weight:700;color:#fff;margin-left:calc(10*var(--u));line-height:1;font-family:'Rajdhani',sans-serif}
.h2 .h2-info:hover{background:rgba(255,255,255,.18)}
.h2-desk .h2-btns{flex:none;display:flex;flex-direction:column;gap:calc(20*var(--u));margin-left:auto;padding-left:calc(24*var(--u))}
.h2 .h2-buy{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:calc(18*var(--u));width:calc(250*var(--u));height:calc(72*var(--u));padding:0 0 0 calc(14*var(--u));border-radius:calc(14*var(--u));overflow:hidden;
  background:var(--buy-bg);color:var(--buy-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 calc(24*var(--u)) rgba(var(--buy-glow),.6),0 calc(8*var(--u)) calc(20*var(--u)) calc(-6*var(--u)) rgba(0,0,0,.9);transition:filter .2s,transform .2s;cursor:pointer}
.h2 .h2-buy::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 47%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.18) 53%,transparent 60%);animation:shimmer 3s ease-in-out infinite;pointer-events:none}
.h2 .h2-buy:hover{filter:brightness(1.08);transform:translateY(-1px)}
.h2 .h2-buy img{position:relative;width:calc(50*var(--u));height:calc(50*var(--u));border-radius:50%;box-shadow:0 0 0 2px rgba(40,26,2,.5);flex:none}
.h2 .h2-buy .h2-bt{position:relative;display:flex;flex-direction:column;align-items:center;font-weight:900;font-size:max(calc(19*var(--u)),.6rem);letter-spacing:.2em;line-height:1}
.h2 .h2-buy .h2-bt span.h2-hr{width:calc(96*var(--u));height:calc(1.5*var(--u));background:rgba(36,24,2,.45);margin:calc(7*var(--u)) 0}
.h2[data-tok="UFO"] .h2-buy .h2-bt span.h2-hr{background:rgba(10,30,2,.45)}
.h2 .h2-sw{display:flex;align-items:center;justify-content:flex-start;gap:calc(22*var(--u));width:calc(250*var(--u));height:calc(72*var(--u));padding:0 0 0 calc(14*var(--u));box-sizing:border-box;border-radius:calc(14*var(--u));cursor:pointer;
  background:linear-gradient(135deg,rgba(var(--sw-rgb),.22),rgba(var(--sw-rgb),.06)),#070a05;border:calc(1.5*var(--u)) solid rgba(var(--sw-edge),.75);box-shadow:0 0 calc(22*var(--u)) calc(-4*var(--u)) rgba(var(--sw-rgb),.65),0 calc(8*var(--u)) calc(20*var(--u)) calc(-6*var(--u)) rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1);transition:filter .2s,transform .2s}
.h2 .h2-sw:hover{filter:brightness(1.12);transform:translateY(-1px)}
.h2 .h2-sw img{width:calc(50*var(--u));height:calc(50*var(--u));border-radius:50%;box-shadow:0 0 calc(14*var(--u)) rgba(var(--sw-rgb),.7);flex:none}
.h2 .h2-sw span{font-weight:700;font-size:max(calc(19*var(--u)),.6rem);letter-spacing:.22em;color:#fff}
/* desktop: the label is centred in the space between the logo and the right edge (2026-10-01); the padding-left offsets the trailing letter-spacing */
.h2-desk .h2-buy,.h2-desk .h2-sw{gap:0}
.h2-desk .h2-buy .h2-bt{flex:1 1 auto;padding-left:.2em}
.h2-desk .h2-sw span{flex:1 1 auto;text-align:center;padding-left:.22em}
/* --- phone / tablet banner (below lg): coin + name row, centred price, stats strip, buttons half-and-half --- */
.h2-phone{--u:calc(var(--hsp,1)*.0625rem);position:relative;overflow:hidden;background:#050504;padding:calc(52*var(--u)) calc(14*var(--u)) calc(22*var(--u))}
.h2-phone .h2-art{position:absolute;inset:0;pointer-events:none}
.h2-phone .h2-band{position:absolute;left:calc(-560*var(--u));top:calc(-10*var(--u));width:calc(2911*var(--u));height:calc(470*var(--u));max-width:none}
.h2-phone .h2-head{position:absolute;right:calc(-56*var(--u));top:calc(-24*var(--u));width:calc(250*var(--u));height:calc(222*var(--u));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 92%);
  filter:brightness(.62) contrast(1.1) drop-shadow(calc(6*var(--u)) 0 calc(10*var(--u)) rgba(90,255,90,.3))}
.h2-phone .h2-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.66) 78%,rgba(0,0,0,.5) 100%)}
.h2-phone .h2-shade2{position:absolute;left:calc(-40*var(--u));top:calc(40*var(--u));width:calc(330*var(--u));height:calc(170*var(--u));background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}
.h2-phone .h2-back{position:absolute;left:calc(14*var(--u));top:calc(10*var(--u));z-index:2;font-size:max(calc(22*var(--u)),1rem);color:rgba(255,255,255,.65);line-height:1}
.h2-phone .h2-top{position:relative;z-index:1;display:flex;align-items:center;gap:calc(16*var(--u))}
.h2-phone .h2-coin{width:calc(96*var(--u));height:calc(96*var(--u));margin-left:calc(8*var(--u))}
.h2-phone .h2-coin .h2-halo{inset:calc(-34*var(--u))}
.h2-phone .h2-coin .h2-corona{left:calc(-80*var(--u));top:calc(-80*var(--u));width:calc(256*var(--u));height:calc(256*var(--u))}
.h2-phone .h2-coin .h2-flare,.h2-phone .h2-coin .h2-flare-v,.h2-phone .h2-coin .h2-flare-h{display:none}
.h2-phone .h2-coin>img.h2-logo{box-shadow:0 0 calc(6*var(--u)) calc(1*var(--u)) rgba(var(--ring),.55)}
.h2-phone .h2-id{min-width:0}
.h2-phone .h2-name{font-size:calc(40*var(--u));font-weight:900;line-height:1;letter-spacing:.02em;filter:drop-shadow(0 2px 2px rgba(0,0,0,.9))}
.h2-phone .h2-addr{margin-top:calc(8*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));font-size:max(calc(14*var(--u)),.75rem);font-weight:500;color:rgba(255,255,255,.82);text-shadow:0 1px 3px #000}
.h2-phone .h2-day{margin-top:calc(8*var(--u))}
.h2-phone .h2-daypill{height:calc(26*var(--u));gap:calc(7*var(--u));padding:0 calc(13*var(--u)) 0 calc(10*var(--u));border-width:calc(1.3*var(--u))}
.h2-phone .h2-daypill svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.h2-phone .h2-daypill .h2-dayl{font-size:max(calc(11*var(--u)),.6rem)}
.h2-phone .h2-daypill .h2-dayn{font-size:max(calc(13*var(--u)),.7rem)}
.h2-phone .h2-price{position:relative;z-index:1;margin-top:calc(24*var(--u));text-align:center}
.h2-phone .h2-pricev{font-size:calc(44*var(--u));font-weight:700;line-height:1;white-space:nowrap}
.h2-phone .h2-chg{margin-top:calc(9*var(--u));gap:calc(9*var(--u));font-size:calc(24*var(--u))}
.h2-phone .h2-chg svg{width:calc(18*var(--u));height:calc(16*var(--u))}
.h2-phone .h2-chgl{font-size:max(calc(14*var(--u)),.7rem);font-weight:500;color:rgba(255,255,255,.65);margin-left:calc(4*var(--u));text-shadow:none}
.h2-phone .h2-stats{position:relative;z-index:1;margin-top:calc(22*var(--u));display:flex;padding:calc(12*var(--u)) 0;border-radius:calc(14*var(--u));background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
.h2-phone .h2-stat{flex:1;min-width:0;text-align:center}
.h2-phone .h2-stat+.h2-stat{border-left:1px solid rgba(235,235,235,.35)}
.h2-phone .h2-statl{justify-content:center;font-size:max(calc(10.5*var(--u)),.6rem);letter-spacing:.1em}
.h2-phone .h2-info{width:calc(13*var(--u));height:calc(13*var(--u));min-width:calc(13*var(--u));font-size:calc(8*var(--u));margin-left:calc(5*var(--u));border-width:calc(1.3*var(--u))}
.h2-phone .h2-statv{margin-top:calc(6*var(--u));font-size:calc(27*var(--u));font-weight:700;line-height:1;white-space:nowrap;filter:drop-shadow(0 2px 3px rgba(0,0,0,1))}
.h2-phone .h2-btns{position:relative;z-index:1;margin-top:calc(16*var(--u));display:flex;gap:calc(10*var(--u))}
.h2-phone .h2-buy,.h2-phone .h2-sw{flex:1;width:auto;height:calc(58*var(--u));justify-content:center;padding:0;gap:calc(12*var(--u));border-radius:calc(12*var(--u))}
.h2-phone .h2-buy img{width:calc(38*var(--u));height:calc(38*var(--u))}
.h2-phone .h2-buy .h2-bt{font-size:max(calc(14*var(--u)),.6rem)}
.h2-phone .h2-buy .h2-bt span.h2-hr{width:calc(64*var(--u));margin:calc(5*var(--u)) 0}
.h2-phone .h2-sw img{width:calc(36*var(--u));height:calc(36*var(--u))}
.h2-phone .h2-sw span{font-size:max(calc(14*var(--u)),.6rem);letter-spacing:.2em}
/* --- tap targets + focus (Audit III c28 / c29, 2026-10-07 — moved here from index.html so calculators / charts / portfolio get them) ---
   u8: a thumb-sized hit area for the small icon controls; the glyph stays its size, only the tappable box grows to 32 px.
   .hit = the same idea for controls whose layout must not move (tile badges, the LP icons, pills): an invisible 32×32 box centred on it. */
.tap{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.tap-h{min-height:32px;display:inline-flex;align-items:center}
.hit{position:relative}.hit::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,32px);height:max(100%,32px);transform:translate(-50%,-50%)}
.h2-back,.h2 .h2-addr button,.h2-tile .h2-tb>button,.h2-tile .h2-tb>a{position:relative}
.h2-tile .h2-tb{z-index:1}   /* the badge row paints above the tile's absolute value line (which came later in the DOM and swallowed the badges' lower pixels) */
.h2-back::before,.h2 .h2-addr button::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,32px);height:max(100%,32px);transform:translate(-50%,-50%)}
.h2-tile .h2-tb>button::before,.h2-tile .h2-tb>a::before{content:"";position:absolute;left:50%;top:50%;width:calc(100% + 6px);height:max(100%,32px);transform:translate(-50%,-50%)}   /* the badges sit ~6 px apart: 3 px each side is all a hit box can take without stealing the neighbour's taps (a real 32 needs wider spacing — a design call) */
/* u7: focus ring for the explainer buttons and popover (keyboard users), not on tap. */
.tap:focus-visible,.tap-h:focus-visible{outline:2px solid rgba(255,255,255,0.6);outline-offset:2px;border-radius:6px}
/* u9: the same ring on every control a keyboard can reach. :focus-visible only — a tap or click never shows it. Dialog containers take programmatic focus and are excluded. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:not([role="dialog"]):focus-visible{outline:2px solid rgba(255,255,255,0.6);outline-offset:2px}
/* the tab strips clip vertically (overflow-y-hidden), so their ring sits inside the box */
nav button:focus-visible,nav a:focus-visible{outline-offset:-2px;border-radius:6px}
/* c29: "Reduce motion" — the BUY shimmer, the switch hover and the skeleton pulse stop on every page that loads this file */
@media(prefers-reduced-motion:reduce){.h2 .h2-buy::after{animation:none}.h2 .h2-buy,.h2 .h2-sw{transition:none}.h2 .h2-buy:hover,.h2 .h2-sw:hover{transform:none}.h2-tile .h2-sk{animation:none}}

/* --- tab row (sticky) --- */
/* the tab row sits on Shaka's gold band (2026-10-01, `logos/header/tabs-bg.jpg`, reference/shaka-tabs-mockup.png): the art shows at
   the two ends, a dark veil keeps the middle readable; gold hairlines top and bottom; the active tab is a glowing gold pill */
.h2-tabs{position:sticky;top:0;z-index:50;background:#040404;padding:calc(26*var(--u)) calc(16*var(--u)) calc(14*var(--u))}   /* black above (more) and below the band (Shaka) */
.h2-tabs .h2-tabband{position:relative;border-radius:calc(14*var(--u));overflow:hidden;border:1px solid rgba(var(--a-rgb),.55);box-shadow:inset 0 1px 0 rgba(255,220,140,.14),0 0 18px -6px rgba(var(--a-rgb),.55),0 2px 12px rgba(0,0,0,.6);
  background:linear-gradient(90deg,rgba(4,8,8,.95) 0%,rgba(4,8,8,.95) 52%,rgba(4,8,8,.72) 70%,rgba(4,8,8,.3) 86%,rgba(4,8,8,.06) 100%),url(logos/header/tabs-bg.jpg) right 46%/auto 170% no-repeat #050a0a}   /* dark where the tabs are, the planet bright at the right (his mock-up); `auto 170%` so the planet reads as a planet, not a 49 px slice of one */
.h2-tabs .h2-tabrow{display:flex;align-items:center;gap:0;padding:0 calc(20*var(--u));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-height:calc(60*var(--u))}
.h2-tabs .h2-tabrow::-webkit-scrollbar{display:none}
/* c3 (Audit III, 2026-10-07): the band hides its scrollbar — these are the cue that more tabs sit off-screen (index.html H2Cues /
   h2-header.jsx / charts.html h2Boot). A dark fade over the art with the chevron in the accent; data-on flips with scrollLeft. */
.h2-tabs .h2-cue{position:absolute;top:0;bottom:0;width:calc(48*var(--u));pointer-events:none;display:flex;align-items:center;opacity:0;transition:opacity .2s;z-index:2}
.h2-tabs .h2-cue[data-on="1"]{opacity:1}
.h2-tabs .h2-cue-r{right:0;justify-content:flex-end;padding-right:calc(8*var(--u));background:linear-gradient(to left,rgba(4,4,4,.92) 30%,rgba(4,4,4,0))}
.h2-tabs .h2-cue-l{left:0;justify-content:flex-start;padding-left:calc(8*var(--u));background:linear-gradient(to right,rgba(4,4,4,.92) 30%,rgba(4,4,4,0))}
.h2-tabs .h2-cue span{color:rgba(var(--a-rgb),.95);font-size:calc(24*var(--u));line-height:1;text-shadow:0 0 8px rgba(var(--a-rgb),.6)}
.h2-tabs .h2-tab{position:relative;z-index:0;flex:none;display:inline-flex;align-items:center;gap:calc(8*var(--u));padding:calc(21*var(--u)) calc(24*var(--u));font-size:max(calc(24*var(--u)),.875rem);font-weight:500;color:rgba(255,255,255,.92);white-space:nowrap;transition:color .15s;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.h2-tabs .h2-tab:hover{color:#fff}
.h2-tabs .h2-tab[aria-current="page"]{font-weight:700;color:var(--tab);text-shadow:0 0 12px rgba(var(--bar-rgb),.75),0 1px 3px rgba(0,0,0,.9)}
.h2-tabs .h2-tab[aria-current="page"]::after{content:'';position:absolute;left:calc(4*var(--u));right:calc(4*var(--u));top:calc(10*var(--u));bottom:calc(10*var(--u));z-index:-1;border-radius:999px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1.5px var(--pill),inset 0 0 12px rgba(var(--bar-rgb),.38),0 0 18px rgba(var(--bar-rgb),.75),0 0 3px var(--pill)}   /* the coin's fire-light gold, not the muted tab gold (Shaka, 2026-10-01) */
.h2-tabs .h2-new{font-family:'Orbitron',monospace;font-size:max(calc(13*var(--u)),.5rem);font-weight:700;letter-spacing:.14em;color:var(--pill);background:none;border:1px solid rgba(var(--bar-rgb),.75);padding:calc(4.5*var(--u)) calc(10.5*var(--u)) calc(3*var(--u));border-radius:999px;line-height:1;margin-left:calc(2*var(--u));box-shadow:0 0 8px rgba(var(--bar-rgb),.4),inset 0 0 6px rgba(var(--bar-rgb),.18);text-shadow:0 0 6px rgba(var(--bar-rgb),.55)}   /* hairline pill in the pill gold with a slight glow — mock-tabbadge-v1 option B (Shaka, 2026-10-01 evening); UFO follows through --pill / --bar-rgb */
.h2-tabs .h2-fresh{margin-left:auto;flex:none;padding:0 calc(14*var(--u)) 0 calc(20*var(--u));font-size:max(calc(19*var(--u)),.6875rem)}
.h2-tabs .h2-fresh>span{display:none}   /* no dot, no "Updated 12s ago" on the band (Shaka, 2026-10-01) — the refresh button stays; staleness still shows on the panels' as-of labels */
.h2-tabs .h2-fresh .text-\[11px\]{font-size:inherit}
.h2-tabs .h2-mini{display:flex;align-items:center;gap:calc(12*var(--u));flex:none;padding-right:calc(20*var(--u));margin-right:calc(8*var(--u));border-right:1px solid rgba(255,255,255,.12)}
.h2-tabs .h2-mini .h2-mright{display:flex;align-items:baseline;gap:calc(10*var(--u))}
.h2-tabs .h2-mini img{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%}
.h2-tabs .h2-mini .h2-mname{font-family:'Orbitron',monospace;font-weight:700;font-size:max(calc(19*var(--u)),.75rem)}
.h2-tabs .h2-mini .h2-mprice{font-weight:700;font-size:max(calc(21*var(--u)),.8rem)}
.h2-tabs .h2-mini .h2-mchg{font-weight:700;font-size:max(calc(17*var(--u)),.7rem)}
.h2-tabs .h2-mini .h2-mchg.up{color:var(--up)}.h2-tabs .h2-mini .h2-mchg.dn{color:var(--dn)}.h2-tabs .h2-mini .h2-mchg.na{color:rgba(255,255,255,.4)}
.h2-phone-mini{display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(8*var(--u)) calc(16*var(--u)) 0}
.h2-phone-mini img{width:calc(24*var(--u));height:calc(24*var(--u));border-radius:50%}
.h2-phone-mini .h2-mname{font-family:'Orbitron',monospace;font-weight:700;font-size:max(calc(14*var(--u)),.8rem)}
.h2-phone-mini .h2-mright{margin-left:auto;display:flex;align-items:baseline;gap:calc(8*var(--u))}
.h2-phone-mini .h2-mprice{font-weight:700;font-size:max(calc(14*var(--u)),.8rem)}
.h2-phone-mini .h2-mchg{font-weight:700;font-size:max(calc(12*var(--u)),.7rem)}
.h2-phone-mini .h2-mchg.up{color:var(--up)}.h2-phone-mini .h2-mchg.dn{color:var(--dn)}.h2-phone-mini .h2-mchg.na{color:rgba(255,255,255,.4)}
/* --- KPI tiles --- */
.h2-tiles{display:grid;gap:calc(19*var(--u));padding:calc(28*var(--u)) calc(35*var(--u)) calc(26*var(--u));grid-template-columns:repeat(7,minmax(0,1fr))}
.h2-tile{position:relative;height:calc(250*var(--u));border-radius:calc(14*var(--u));background:var(--tile-bg);border:calc(1.6*var(--u)) solid var(--tile-bd);box-shadow:inset 0 1px 0 rgba(255,235,170,.1);overflow:hidden;min-width:0}
.h2-tile.hot{background:var(--tile-hot);border-color:var(--tile-bd-hot);box-shadow:inset 0 1px 0 rgba(255,235,170,.1),0 0 calc(22*var(--u)) calc(-4*var(--u)) rgba(var(--a-rgb),.6)}
.h2-tile .h2-tl{position:absolute;left:calc(20*var(--u));top:calc(18*var(--u));right:calc(56*var(--u));display:flex;align-items:center;gap:calc(14*var(--u));white-space:nowrap;overflow:hidden;font-size:max(calc(22*var(--u)),.75rem);font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.88)}
.h2-tile .h2-tl svg{width:calc(34*var(--u));height:calc(34*var(--u));color:var(--a);flex:none}
.h2-tile .h2-tb{position:absolute;right:calc(16*var(--u));top:calc(14*var(--u));font-size:max(calc(15*var(--u)),.6rem);font-weight:700;color:var(--a);display:inline-flex;align-items:center;min-width:calc(24*var(--u));min-height:calc(24*var(--u));justify-content:center}
.h2-tile .h2-tb .h2-info{margin-left:0;width:calc(20*var(--u));height:calc(20*var(--u));min-width:calc(20*var(--u));font-size:calc(12*var(--u))}
.h2-tile .h2-tb .h2-hd{display:block;width:calc(30*var(--u));height:calc(30*var(--u));margin-left:calc(7*var(--u));background:var(--a);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}   /* Holders Details icon (2026-10-04) and the Humans vs Bots bot (2026-10-06): the image is a MASK filled with the dashboard colour — gold on PTGC, green on UFO (Shaka 2026-10-06: clickable badges in the token colour; the ⓘ and the LP % stay grey) */
.h2-tile .h2-tb .h2-pct{color:rgba(255,255,255,.62);font-weight:600}   /* the LP % — not clickable, so grey (Shaka 2026-10-06) */
.h2-tile .h2-tb .h2-rh{display:inline-flex;align-items:center;justify-content:center;height:calc(26*var(--u));min-width:calc(30*var(--u));padding:0 calc(6*var(--u));border-radius:calc(8*var(--u));border:calc(1.6*var(--u)) solid rgba(var(--a-rgb),.75);font-size:calc(13*var(--u));letter-spacing:.06em;color:var(--a);text-shadow:0 1px 2px rgba(0,0,0,.8)}   /* RH (2026-10-06): a badge the size of the icons, in the token colour */
.h2-tile .h2-tv{position:absolute;left:calc(24*var(--u));right:calc(16*var(--u));top:calc(66*var(--u));font-size:calc(46*var(--u));font-weight:700;color:#fff;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2-tile.hot .h2-tv{color:var(--hotval)}
.h2-tile .h2-tv small{font-size:calc(26*var(--u));margin-left:calc(10*var(--u))}
.h2-tile .h2-tv small .b{color:var(--up)}.h2-tile .h2-tv small .s{color:var(--dn)}.h2-tile .h2-tv small .sl{color:rgba(255,255,255,.55)}
.h2-tile .h2-tc{position:absolute;left:calc(25*var(--u));right:calc(16*var(--u));top:calc(120*var(--u));font-size:max(calc(26*var(--u)),.85rem);font-weight:700;color:var(--up);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.h2-tile .h2-tc.dn{color:var(--dn)}.h2-tile .h2-tc.na{color:rgba(255,255,255,.4)}
.h2-tile .h2-tc .h2-vs{color:rgba(255,255,255,.62);font-weight:500;font-size:.8em}
.h2-tile .h2-sp{position:absolute;left:calc(22*var(--u));right:calc(18*var(--u));bottom:calc(20*var(--u));height:calc(70*var(--u))}
.h2-tile .h2-sp svg{display:block;width:100%;height:100%;overflow:visible}
.h2-tile .h2-spw{position:absolute;right:calc(18*var(--u));bottom:calc(5*var(--u));font-size:max(calc(12*var(--u)),.5rem);font-weight:600;letter-spacing:.08em;line-height:1;color:rgba(255,255,255,.32)}
.h2-tile .h2-sp .h2-spl{filter:drop-shadow(0 0 2px var(--sg))}
.h2-tile .h2-sp .h2-spflat{stroke:rgba(255,255,255,.18);stroke-dasharray:6 6}
.h2-tile .h2-sp .h2-spwait{stroke:rgba(255,255,255,.14);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}   /* a series still loading (2026-10-03) — solid, breathing; dashed means it is not coming */
.h2-tile .h2-sk{position:absolute;border-radius:6px;background:rgba(255,255,255,.08);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@media(max-width:1023.98px){
  .h2-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10*var(--u));padding:calc(14*var(--u))}
  .h2-tile{height:calc(154*var(--u));border-radius:calc(12*var(--u));border-width:calc(1.3*var(--u))}
  .h2-tile.h2-full{grid-column:1 / -1}
  .h2-tile .h2-tl{left:calc(12*var(--u));top:calc(11*var(--u));right:calc(40*var(--u));gap:calc(8*var(--u));font-size:max(calc(13.5*var(--u)),.72rem);font-weight:600}
  .h2-tile .h2-tl svg{width:calc(21*var(--u));height:calc(21*var(--u))}
  .h2-tile .h2-tb{right:calc(8*var(--u));top:calc(8*var(--u));font-size:max(calc(11*var(--u)),.6rem)}
  .h2-tile .h2-tb .h2-info{width:calc(14*var(--u));height:calc(14*var(--u));min-width:calc(14*var(--u));font-size:calc(9*var(--u))}
  .h2-tile .h2-tb .h2-hd{width:calc(22*var(--u));height:calc(22*var(--u));margin-left:calc(5*var(--u))}
  .h2-tile .h2-tb .h2-rh{height:calc(19*var(--u));min-width:calc(22*var(--u));padding:0 calc(4*var(--u));font-size:calc(10*var(--u));border-radius:calc(6*var(--u))}
  .h2-tile .h2-tv{left:calc(13*var(--u));right:calc(10*var(--u));top:calc(43*var(--u));font-size:calc(27*var(--u))}
  .h2-tile .h2-tv small{font-size:calc(16*var(--u));margin-left:calc(6*var(--u))}
  .h2-tile .h2-tc{left:calc(13*var(--u));right:calc(10*var(--u));top:calc(74*var(--u));font-size:max(calc(17*var(--u)),.75rem)}
  .h2-tile .h2-sp{left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(11*var(--u));height:calc(38*var(--u))}
  .h2-tile .h2-spw{right:calc(10*var(--u));bottom:calc(2.5*var(--u));font-size:max(calc(8*var(--u)),.45rem)}
  .h2-tabs{padding:calc(8*var(--u)) calc(8*var(--u))}
  .h2-tabs .h2-tabrow{padding:0 calc(6*var(--u));min-height:calc(46*var(--u))}
  .h2-tabs .h2-tab{padding:calc(17*var(--u)) calc(14*var(--u));font-size:max(calc(16.5*var(--u)),.85rem)}
  .h2-tabs .h2-tab[aria-current="page"]::after{top:calc(7*var(--u));bottom:calc(7*var(--u))}
  .h2-tabs .h2-tab[aria-current="page"]::after{left:calc(10*var(--u));right:calc(10*var(--u));height:calc(3*var(--u))}
  .h2-tabs .h2-fresh{padding-left:calc(12*var(--u));padding-right:calc(8*var(--u));font-size:.6875rem}
}
@media(min-width:1024px){.h2-tabs{--u:calc(var(--hsd,.665)*.0625rem)}.h2-tiles,.h2-phone-mini{--u:calc(var(--hsd,.665)*.0625rem)}}
@media(max-width:1023.98px){.h2-tabs,.h2-tiles{--u:calc(var(--hsp,1)*.0625rem)}}