/* Self-hosted fonts (latin subset). The fallbacks are Arial with metric overrides that match the
       web fonts' size, so text does not jump when the web fonts arrive. */
    @font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url(/fonts/barlow-condensed-800.woff2?v=ie7CGxodb9V5) format("woff2")}
    @font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/barlow-condensed-700.woff2?v=4-Ugy3Ro8u_W) format("woff2")}
    @font-face{font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/inter-latin.woff2?v=yUB2RZPQ_l1Z) format("woff2")}
    /* EA's HiddenStats signature name font: https://www.ea.com/ea-sports-fc/ultimate-team/web-app/fonts/JalliyaSeven.ttf */
    @font-face{font-family:"Signature"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/jalliya-seven.ttf?v=9UEZIexQjLD6) format("truetype")}
    @font-face{font-family:"Barlow Condensed Fallback"; font-weight:700 800; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");
      size-adjust:70.85%; ascent-override:141.15%; descent-override:28.23%; line-gap-override:0%}
    @font-face{font-family:"Inter Fallback"; font-weight:100 900; src:local("Arial"),local("ArialMT");
      size-adjust:106.92%; ascent-override:90.6%; descent-override:22.56%; line-gap-override:0%}
    /* Floodlit stadium at night: deep pitch-black green, floodlight glows, faint pitch lines,
       electric pitch green for action, gold only for coins. */
    :root{
      color-scheme:dark;
      --bg:#040907; --panel:#08130e; --surface:#0b1a13; --raised:#10241a;
      --line:rgba(214,255,232,.08); --line-strong:rgba(214,255,232,.17);
      --ink:#f3fbf6; --ink-2:#cfe4d7; --mut:#8ea99a; --faint:#7d9a8a;
      --pitch:#22e889; --pitch-2:#0cbf66; --pitch-glow:rgba(34,232,137,.35);
      --gold:#ffd166; --gold-2:#f2b53a; --bad:#ff6b6b; --go:#22e889;
      --radius:16px;
      --sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --display:"Barlow Condensed","Barlow Condensed Fallback",sans-serif;
    }
    *{box-sizing:border-box}
    html{background:#040907; overflow-x:clip}
    @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
    body{margin:0; min-height:100vh; font:16px/1.6 var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased;
      background:
        radial-gradient(1100px 620px at 12% -8%, rgba(34,232,137,.16), transparent 62%),
        radial-gradient(900px 560px at 92% -14%, rgba(255,209,102,.09), transparent 60%),
        repeating-linear-gradient(90deg, rgba(214,255,232,.022) 0 96px, transparent 96px 192px),
        linear-gradient(180deg,#040907 0%,#050c09 60%,#040907 100%);
      background-attachment:fixed}
    a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px}
    a:hover{text-decoration-color:var(--pitch)}
    ::selection{background:var(--pitch); color:#03140b}
    .hidden{display:none !important}
    :focus-visible{outline:2px solid var(--pitch); outline-offset:3px}
    img{display:block}
    .skip{position:absolute; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--pitch); color:#03140b; font:700 14px var(--sans); text-decoration:none}
    .skip:focus{top:10px}
    main:focus{outline:none}

    /* header + ticker */
    header{position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:16px;
      padding:12px 28px; background:rgba(4,9,7,.78); border-bottom:1px solid var(--line); backdrop-filter:saturate(1.5) blur(16px)}
    .brand{display:flex; align-items:center; gap:10px; white-space:nowrap; font:800 21px/1 var(--display); letter-spacing:.06em; color:var(--ink); text-transform:uppercase; cursor:pointer; background:none; border:0; padding:0; text-decoration:none}
    .brand i{font-style:normal; color:var(--pitch)}
    .dot{flex:none; width:30px; height:30px; border-radius:50%; position:relative;
      background:radial-gradient(circle at 35% 30%,#fff 0 18%,#dfe9e3 19% 55%,#9fb3a8 100%); box-shadow:0 0 0 2px rgba(34,232,137,.5),0 0 18px var(--pitch-glow)}
    .dot:after{content:""; position:absolute; inset:9px; background:#0a1510; clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
    nav{display:flex; gap:2px; align-items:center}
    .menu-btn{display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer}
    .menu-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
    .menu{position:absolute; right:12px; top:calc(100% + 6px); z-index:70; display:grid; min-width:200px; padding:8px; border-radius:16px; background:#08130e; border:1px solid var(--line-strong); box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
    .menu a{padding:11px 14px; border-radius:10px; color:var(--ink-2); font:600 15px var(--sans); text-decoration:none}
    .menu a:hover,.menu a[aria-current="page"]{background:rgba(34,232,137,.08); color:var(--pitch)}
    .ticker{position:sticky; top:55px; z-index:40; height:39px; overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--line);
      background:linear-gradient(90deg,rgba(4,9,7,.96),rgba(8,19,14,.9),rgba(4,9,7,.96)); font:600 13px/20px var(--sans)}
    .ticker-track{display:inline-flex; gap:34px; padding:9px 0 9px 150px; animation:tick 70s linear infinite}
    .ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
    @keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}
    .tick{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer; text-decoration:none}
    .tick b{font:800 15px var(--display); letter-spacing:.04em; color:var(--ink); text-transform:uppercase}
    .tick small{font-size:11px; color:var(--mut); font-weight:600; letter-spacing:.02em}
    .tick em{font-style:normal; font-variant-numeric:tabular-nums; color:var(--gold)}
    .tick .r{padding:1px 6px; border-radius:6px; background:rgba(34,232,137,.14); color:var(--pitch); font-size:11px}
    .ticker-label{position:absolute; left:0; top:0; bottom:0; z-index:1; display:flex; align-items:center; gap:7px; padding:0 14px 0 18px;
      font:800 13px var(--display); letter-spacing:.14em; text-transform:uppercase; color:#03140b; background:linear-gradient(90deg,var(--pitch),var(--pitch-2))}
    .ticker-label:after{content:""; position:absolute; right:-14px; top:0; bottom:0; width:14px; background:linear-gradient(90deg,var(--pitch-2),transparent)}

    /* buttons */
    .ghost,.gold{display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:999px; cursor:pointer;
      font:600 14px var(--sans); text-decoration:none; transition:transform .15s,background .15s,border-color .15s,color .15s,box-shadow .2s}
    .ghost{padding:9px 16px; background:transparent; border:1px solid transparent; color:var(--ink-2)}
    a.ghost,a.gold{line-height:1.6}
    .ghost:hover{color:var(--ink); background:rgba(214,255,232,.06); border-color:var(--line)}
    nav .ghost[aria-current="page"]{color:var(--pitch)}
    main .ghost{border-color:var(--line-strong); color:var(--ink)}
    main .ghost:hover{border-color:var(--pitch); background:rgba(34,232,137,.07)}
    .ghost.danger:hover{border-color:#7f2a2a; color:var(--bad); background:#1f1111}
    .gold{padding:10px 20px; color:#03140b; border:0; background:linear-gradient(135deg,#3bf59b,var(--pitch-2)); box-shadow:0 8px 28px -10px var(--pitch-glow)}
    .gold:hover{transform:translateY(-1px); box-shadow:0 12px 36px -10px rgba(34,232,137,.6)}
    .gold:disabled,.ghost:disabled{opacity:.45; cursor:default; transform:none}
    a.btn-link{display:inline-flex; font:600 14px/1 var(--sans); text-decoration:none; text-align:center}
    a.btn-link[aria-disabled="true"]{opacity:.45; pointer-events:none}
    #download{scroll-margin-top:110px}
    .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
    #nav-auth{max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

    main{max-width:1180px; margin:0 auto; padding:0 22px 110px}
    body{overflow-x:clip}
    section{animation:fade .4s ease}
    @keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

    /* typography */
    .kicker{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border:1px solid var(--line-strong); border-radius:999px;
      font:600 12px var(--sans); letter-spacing:.04em; color:var(--ink-2); background:rgba(8,19,14,.7)}
    .live{width:7px; height:7px; border-radius:50%; background:var(--pitch); box-shadow:0 0 0 0 var(--pitch-glow); animation:pulse 1.8s infinite}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,232,137,.55)} 70%{box-shadow:0 0 0 9px rgba(34,232,137,0)} 100%{box-shadow:0 0 0 0 rgba(34,232,137,0)}}
    h1,.h1{margin:20px 0 16px; font:800 clamp(48px,8.4vw,104px)/.9 var(--display); letter-spacing:-.005em; text-transform:uppercase}
    .h1 .grad,h2.sec .grad{background:linear-gradient(100deg,#6dffb5,var(--pitch) 45%,#bfffd9); -webkit-background-clip:text; background-clip:text; color:transparent}
    .h1 .coin,h2.sec .coin{color:var(--gold)}
    .lead{max-width:36em; margin:0; font-size:18px; line-height:1.65; color:var(--mut)}
    .lead b{color:var(--ink); font-weight:600}
    h2.sec{margin:96px 0 8px; font:800 clamp(34px,4.6vw,56px)/.95 var(--display); text-transform:uppercase; letter-spacing:.005em}
    .sub{max-width:44em; margin:0 0 8px; color:var(--mut)}
    .eyebrow{display:block; margin-top:96px; font:800 14px var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--pitch)}
    .eyebrow + h2.sec{margin-top:8px}
    .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}

    /* hero */
    #home{padding-top:40px}
    .hero{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center; min-height:640px; padding:40px 0 30px}
    .pitch-lines{position:absolute; inset:-40px -200px 0 -200px; z-index:-1; pointer-events:none; opacity:.9;
      -webkit-mask:radial-gradient(ellipse at 60% 45%,#000 30%,transparent 72%); mask:radial-gradient(ellipse at 60% 45%,#000 30%,transparent 72%)}
    .pitch-lines svg{width:100%; height:100%}
    .flood{position:absolute; top:-120px; width:520px; height:900px; z-index:-1; pointer-events:none; filter:blur(8px); opacity:.55;
      background:conic-gradient(from 180deg at 50% 0%, transparent 0 164deg, rgba(214,255,232,.10) 172deg, rgba(214,255,232,.02) 188deg, transparent 196deg 360deg)}
    .flood.l{left:-120px; transform:rotate(-18deg); animation:sway 9s ease-in-out infinite}
    .flood.r{right:-160px; transform:rotate(22deg); animation:sway 11s ease-in-out infinite reverse}
    @keyframes sway{0%,100%{rotate:0deg} 50%{rotate:4deg}}
    .search{position:relative; max-width:560px; margin:30px 0 10px}
    .search input{width:100%; height:62px; padding:0 150px 0 54px; font:500 17px var(--sans); color:var(--ink); border-radius:999px;
      background:rgba(8,19,14,.85); border:1px solid var(--line-strong); box-shadow:0 20px 60px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.02)}
    .search input:focus{outline:none; border-color:var(--pitch); box-shadow:0 0 0 4px rgba(34,232,137,.14),0 20px 60px -24px rgba(0,0,0,.8)}
    .search svg.lens{position:absolute; left:20px; top:50%; width:20px; height:20px; margin-top:-10px; fill:none; stroke:var(--mut); stroke-width:2}
    .search .gold{position:absolute; right:7px; top:7px; height:48px; padding:0 22px}
    .suggest{position:absolute; left:0; right:0; top:70px; z-index:60; overflow:hidden; border-radius:18px; background:#08130e;
      border:1px solid var(--line-strong); box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
    .suggest [role="option"],.suggest .none{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; width:100%; padding:9px 14px; border:0; border-bottom:1px solid var(--line);
      background:none; color:var(--ink); text-align:left; cursor:pointer; font:500 14px var(--sans)}
    .suggest .none{display:block; cursor:default; color:var(--mut)}
    .suggest [role="option"]:hover,.suggest [role="option"][aria-selected="true"]{background:rgba(34,232,137,.08)}
    .suggest [role="option"][aria-selected="true"]{box-shadow:inset 3px 0 0 var(--pitch)}
    .suggest img,.suggest .noface{width:44px; height:44px; border-radius:10px; object-fit:cover; background:var(--raised)}
    .suggest small{display:block; color:var(--mut); font-size:12px}
    .suggest .p{font:700 15px var(--sans); font-variant-numeric:tabular-nums; color:var(--gold)}
    .quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
    .chip{padding:7px 14px; border-radius:999px; border:1px solid var(--line-strong); background:rgba(8,19,14,.6); color:var(--ink-2);
      font:600 13px var(--sans); cursor:pointer; transition:all .15s}
    .chip:hover,.chip.on{border-color:var(--pitch); color:var(--ink); background:rgba(34,232,137,.1)}
    .chip.on{color:var(--pitch)}
    .platform{display:inline-flex; align-items:center; gap:8px; margin-top:6px; font:600 13px var(--sans); color:var(--mut)}
    .platform svg{width:18px; height:18px; fill:currentColor}
    .hero-stats{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap}
    .hero-stats div b{display:block; font:800 38px/1 var(--display); color:var(--ink)}
    .hero-stats div span{font-size:13px; color:var(--mut)}

    /* card fan */
    .fan{position:relative; height:560px; perspective:1400px}
    .fan a.fut{display:block; text-decoration:none}
    .fan .fut{position:absolute; top:50%; left:50%; width:250px; margin:-180px 0 0 -125px; transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s}
    .fan .fut.s1{transform:translate(-150px,26px) rotate(-12deg) scale(.9); z-index:1; filter:brightness(.8) drop-shadow(0 22px 26px rgba(0,0,0,.55))}
    .fan .fut.s2{transform:translateY(-10px) scale(1.06); z-index:3; animation:bob 6s ease-in-out infinite}
    .fan .fut.s3{transform:translate(150px,26px) rotate(12deg) scale(.9); z-index:2; filter:brightness(.8) drop-shadow(0 22px 26px rgba(0,0,0,.55))}
    .fan:hover .fut.s1{transform:translate(-190px,16px) rotate(-16deg) scale(.92); filter:brightness(1)}
    .fan:hover .fut.s3{transform:translate(190px,16px) rotate(16deg) scale(.92); filter:brightness(1)}
    /* Flip, the FUT Flipper dolphin: sits at the bottom right of the hero's card fan (decorative). */
    .mascot{position:absolute; right:-10px; bottom:-40px; width:min(262px,50%); z-index:6; pointer-events:none; animation:flip-float 5.6s ease-in-out infinite; filter:drop-shadow(0 16px 20px rgba(0,0,0,.5))}
    .mascot svg{display:block; width:100%; height:auto; overflow:visible}
    .ff-coin-bob{animation:flip-coin 2.8s ease-in-out infinite}
    .ff-sp path{animation:flip-twinkle 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
    .ff-sp path:nth-child(2){animation-delay:.6s} .ff-sp path:nth-child(3){animation-delay:1.2s} .ff-sp2 path{animation-delay:.9s}
    @keyframes flip-float{0%,100%{translate:0 0; rotate:-1deg} 50%{translate:0 -10px; rotate:1deg}}
    @keyframes flip-coin{0%,100%{translate:0 0} 50%{translate:0 -14px}}
    @keyframes flip-twinkle{0%,100%{opacity:.35; scale:.8} 50%{opacity:1; scale:1.1}}
    @keyframes bob{0%,100%{translate:0 0} 50%{translate:0 -12px}}
    .fan-glow{position:absolute; left:50%; top:52%; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; z-index:0;
      background:radial-gradient(circle,rgba(34,232,137,.28),rgba(255,209,102,.07) 40%,transparent 68%); filter:blur(10px)}
    .fan-floor{position:absolute; left:50%; bottom:40px; width:420px; height:60px; margin-left:-210px; border-radius:50%; background:radial-gradient(ellipse,rgba(34,232,137,.3),transparent 70%); filter:blur(6px)}

    /* FUT-style card */
    .fut{position:relative; display:block; aspect-ratio:.7/1; width:100%; cursor:pointer; user-select:none; color:#2b1d05; container-type:inline-size;
      filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)); transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .25s}
    .fut:hover{transform:translateY(-6px) scale(1.02); filter:drop-shadow(0 30px 34px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(34,232,137,.18))}
    .fut .art{position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:center}
    .fut .shape{position:absolute; inset:0; clip-path:polygon(50% 0,93% 5%,100% 13%,100% 86%,90% 93%,50% 100%,10% 93%,0 86%,0 13%,7% 5%);
      background:linear-gradient(160deg,#fbe7a6,#e9c160 45%,#b8892b)}
    .fut.t-silver .shape{background:linear-gradient(160deg,#f1f4f7,#c7ced6 50%,#8e98a3)}
    .fut.t-bronze .shape{background:linear-gradient(160deg,#f3cfa6,#c98f58 50%,#8d5a2c)}
    .fut.t-icon .shape{background:linear-gradient(160deg,#fff5dc,#ecd9a6 45%,#c9a85e)}
    .fut.t-hero .shape{background:linear-gradient(160deg,#c8b6ff,#6f4bd8 50%,#2c1a6b)}
    .fut.t-special .shape{background:linear-gradient(160deg,#2e3b35,#0f1a15 50%,#040907); box-shadow:inset 0 0 0 2px rgba(34,232,137,.4)}
    .fut.t-hero,.fut.t-special{color:#fff}
    .fut.has-art .shape{display:none}
    .fut .face{position:absolute; left:26%; top:10%; width:66%; height:52%; object-fit:contain; object-position:bottom; pointer-events:none}
    .fut .face.none{display:none}
    .fut .rt{position:absolute; left:14%; top:15%; text-align:center; line-height:1}
    .fut .rt b{display:block; font:800 16cqw/.9 var(--display)}
    .fut .rt span{display:block; margin-top:1cqw; font:700 7cqw var(--display); letter-spacing:.04em}
    .fut.has-art .rt{top:19.5%; left:16.5%}
    .fut .nm{position:absolute; left:8%; right:8%; top:62%; text-align:center; font:800 9.2cqw/1 var(--display); text-transform:uppercase; letter-spacing:.01em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .fut .nm.signature-name{top:58%; left:10%; right:10%; font:400 18cqw/1.5 "Signature",cursive; text-transform:none; letter-spacing:0}
    .fut .st{position:absolute; left:10%; right:10%; top:72.5%; display:grid; grid-template-columns:repeat(6,1fr); text-align:center; line-height:1.05}
    .fut .st b{display:block; font:800 7.2cqw var(--display)}
    .fut .st i{display:block; font:700 4.6cqw var(--display); font-style:normal; opacity:.85}
    .fut .ver{position:absolute; left:0; right:0; bottom:9%; text-align:center; font:700 4.6cqw var(--display); letter-spacing:.12em; text-transform:uppercase; opacity:.8}
    .fut .badges{position:absolute; left:13.5%; top:36%; display:grid; gap:2.2cqw}
    .fut .badges img{width:9cqw; height:9cqw; object-fit:contain}

    /* market */
    .market-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:26px 18px; margin:26px 0}
    #market-grid{min-height:560px}
    .tile{display:flex; flex-direction:column; gap:10px; container-type:inline-size}
    @container (max-width:168px){.price-pill{padding:8px 10px; font-size:14px} .price-pill small{display:none}}
    .price-pill{display:flex; justify-content:space-between; align-items:center; gap:6px; padding:8px 12px; border-radius:12px;
      background:rgba(8,19,14,.9); border:1px solid var(--line); font:700 15px var(--sans); font-variant-numeric:tabular-nums}
    .price-pill .c{display:inline-flex; align-items:center; gap:6px; color:var(--gold)}
    .coin-ic{width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd166 40%,#c98f1e); box-shadow:inset 0 0 0 1.5px rgba(120,80,0,.35)}
    .price-pill small{font:600 11px var(--sans); color:var(--mut); white-space:nowrap}
    .price-pill.long small{display:none}
    .price-pill.none .c{color:var(--mut); font-weight:600; font-size:13px}
    .controls{display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; align-items:center; margin-top:26px}
    .controls .search{margin:0; max-width:none}
    .controls .search input{height:50px; padding-right:20px}
    .controls select{height:50px; padding:0 40px 0 16px; border-radius:999px; min-width:150px}
    .filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
    .empty{padding:28px; text-align:center; font-size:15px; color:var(--mut); border:1px dashed var(--line-strong); border-radius:16px}
    .skeleton{aspect-ratio:.7/1; border-radius:18px; background:linear-gradient(100deg,var(--surface) 30%,var(--raised) 50%,var(--surface) 70%); background-size:300% 100%; animation:shimmer 1.4s infinite}
    @keyframes shimmer{from{background-position:100% 0} to{background-position:0 0}}

    /* player page */
    .player{display:grid; grid-template-columns:minmax(260px,380px) minmax(0,1fr); gap:48px; margin-top:34px; align-items:start}
    .player > *{min-width:0}
    .player-card{position:sticky; top:130px}
    .side-cta{margin-top:26px; padding:18px 18px 20px; border-radius:20px; border:1px solid rgba(34,232,137,.35); background:linear-gradient(160deg,rgba(34,232,137,.14),rgba(8,19,14,.92) 65%)}
    .side-cta b{display:block; font:800 22px/1.05 var(--display); text-transform:uppercase}
    .side-cta p{margin:6px 0 14px; font-size:13.5px; color:var(--ink-2)}
    .side-cta .gold,.side-cta .ghost{width:100%; padding:11px 16px}
    .side-cta .ghost{margin-top:8px; border-color:var(--line-strong); color:var(--ink)}
    .player-card .fut{max-width:360px; margin:0 auto; cursor:default}
    .player-card .fut:hover{transform:none}
    .player-card .halo{position:absolute; inset:-40px; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(34,232,137,.22),transparent 65%)}
    .crumbs{margin-top:34px; font-size:13px; color:var(--mut)}
    .crumbs a{color:var(--mut); text-decoration:none} .crumbs a:hover{color:var(--pitch)}
    .p-title{margin:8px 0 6px; font:800 clamp(44px,6vw,76px)/.92 var(--display); text-transform:uppercase}
    .p-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
    .tag{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font:600 12.5px var(--sans); color:var(--ink-2);
      background:rgba(214,255,232,.06); border:1px solid var(--line)}
    .tag.hot{color:#03140b; background:var(--pitch); border-color:transparent}
    .price-hero{padding:24px 26px; border-radius:22px; border:1px solid rgba(255,209,102,.25);
      background:radial-gradient(600px 200px at 0% 0%,rgba(255,209,102,.12),transparent 60%),linear-gradient(180deg,rgba(16,36,26,.9),rgba(8,19,14,.9))}
    .price-hero .lbl{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font:600 13px var(--sans); color:var(--mut)}
    .price-hero .big{display:flex; align-items:center; gap:14px; margin:6px 0 4px; font:800 clamp(46px,6vw,70px)/1 var(--display); color:var(--gold); font-variant-numeric:tabular-nums}
    .price-hero .big .coin-ic{width:36px; height:36px}
    .updating{display:inline-flex; align-items:center; gap:7px; color:var(--pitch)}
    .spin{width:12px; height:12px; border-radius:50%; border:2px solid rgba(34,232,137,.3); border-top-color:var(--pitch); animation:rot .8s linear infinite}
    @keyframes rot{to{transform:rotate(360deg)}}
    .range{margin-top:16px}
    .range-bar{position:relative; height:8px; border-radius:99px; background:linear-gradient(90deg,#1c3a2b,#0f2419)}
    .range-bar i{position:absolute; top:-5px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(255,209,102,.2)}
    .range-labels{display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums}
    .panel{margin-top:18px; padding:22px 24px; border-radius:20px; background:rgba(11,26,19,.75); border:1px solid var(--line)}
    .panel h3{margin:0 0 14px; font:800 22px var(--display); letter-spacing:.04em; text-transform:uppercase}
    #p-chart{min-height:200px}
    .chart{display:block; width:100%; height:200px}
    .chart .area{fill:url(#pg)} .chart .ln{fill:none; stroke:var(--pitch); stroke-width:2.2} .chart .dot{fill:var(--gold)}
    .chart text{fill:var(--mut); font:11px var(--sans)}
    .sales{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
    .sales div{display:flex; justify-content:space-between; gap:10px; white-space:nowrap; padding:9px 12px; border-radius:10px; background:var(--panel); font-size:13.5px; font-variant-numeric:tabular-nums}
    .sales b{color:var(--gold)} .sales span{color:var(--mut)}
    .statbars{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px}
    .statbar{display:grid; grid-template-columns:44px 36px 1fr; align-items:center; gap:10px; font:700 14px var(--sans)}
    .statbar span{font:800 16px var(--display); letter-spacing:.06em; color:var(--mut)}
    .statbar em{font-style:normal; font:800 20px var(--display)}
    .statbar .bar{height:8px; border-radius:99px; background:#132b1f; overflow:hidden}
    .statbar .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--pitch-2),var(--pitch))}
    .statbar .bar i.hi{background:linear-gradient(90deg,var(--gold-2),var(--gold))}
    .facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
    .facts div{padding:12px 14px; border-radius:12px; background:var(--panel)}
    #p-price.small{font-size:.5em; color:var(--ink-2)}
    .facts span{display:block; font-size:12px; color:var(--mut)} .facts b{font-size:16px}
    .facts b.stars{font-size:19px; letter-spacing:2px; color:rgba(255,209,102,.18)} .facts b.stars i{font-style:normal; color:var(--gold); text-shadow:0 0 12px rgba(255,209,102,.45)}
    .sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
    .dchips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
    .dchip{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 13px; border-radius:999px; font:600 14px/1.2 var(--sans); color:var(--ink-2);
      background:rgba(214,255,232,.06); border:1px solid var(--line-strong)}
    .dchip.plus{color:var(--gold); background:linear-gradient(180deg,rgba(255,209,102,.16),rgba(255,209,102,.07)); border-color:rgba(255,209,102,.5)}
    .mk{font:800 18px/1 var(--display); font-style:normal; color:#2b1c00; background:var(--gold); border-radius:999px; min-width:17px; height:17px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center}
    .lvl{font:800 15px/1 var(--display); letter-spacing:.06em; color:var(--pitch); background:rgba(34,232,137,.12); border:1px solid rgba(34,232,137,.35); border-radius:999px; padding:3px 7px}
    .dchip.pp{border-color:rgba(255,209,102,.5)} .dchip.pp .lvl,.dnote .lvl:last-of-type{color:var(--gold); background:rgba(255,209,102,.12); border-color:rgba(255,209,102,.45)}
    .dnote{margin:12px 0 0; font-size:12.5px; color:var(--mut)} .dnote .mk{margin-right:2px; vertical-align:1px} .dnote .lvl{margin:0 3px 0 0; vertical-align:1px} .dnote .lvl:last-of-type{margin-left:8px}
    .dmore{margin-top:8px}
    .dmore summary{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 14px; border-radius:999px; cursor:pointer; list-style:none; font:700 13.5px var(--sans); color:var(--pitch); border:1px solid rgba(34,232,137,.4); background:rgba(34,232,137,.06)}
    .dmore summary::-webkit-details-marker{display:none}
    .dmore summary::after{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s}
    .dmore[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
    .dmore summary:hover{background:rgba(34,232,137,.12)}
    .dmore .dchips{margin-top:10px} .dmore .s-less,.dmore[open] .s-more{display:none} .dmore[open] .s-less{display:inline}
    .dgroups{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
    .dcard{align-self:start; padding:14px 16px 10px; border-radius:14px; background:var(--panel); border:1px solid var(--line)}
    .dh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
    .dn{font:800 19px var(--display); letter-spacing:.05em; text-transform:uppercase}
    .dpill{display:inline-flex; align-items:baseline; gap:5px; padding:3px 11px; border-radius:999px; background:var(--c); color:#04150c; font:800 20px/1.25 var(--display); font-variant-numeric:tabular-nums}
    .dpill small{font:800 12px var(--display); letter-spacing:.08em; opacity:.75}
    .drow{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:baseline; padding:5px 0 7px; font:600 13.5px var(--sans); color:var(--ink-2)}
    .drow em{font:800 17px var(--display); font-style:normal; color:var(--ink); font-variant-numeric:tabular-nums}
    .dcard .bar{grid-column:1/-1; height:5px; margin-top:5px; border-radius:99px; background:#132b1f; overflow:hidden}
    .dcard .bar i{display:block; height:100%; border-radius:99px; background:var(--c)}
    .dgroups.gk{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .dgroups.gk .dh{margin-bottom:8px} .dgroups.gk .dcard{padding-bottom:14px}
    .calc{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .calc-out{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
    .calc-out div{padding:14px; border-radius:14px; background:var(--panel); text-align:center}
    .calc-out span{display:block; font-size:12px; color:var(--mut)}
    .calc-out b{font:800 26px var(--display); font-variant-numeric:tabular-nums}
    .calc-err{margin:8px 0 0; font-size:13px; color:var(--bad)} .calc-err[hidden]{display:none}
    .pos{color:var(--pitch)} .neg{color:var(--bad)}
    .cta-band{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; padding:24px 26px; border-radius:22px;
      background:linear-gradient(120deg,rgba(34,232,137,.18),rgba(8,19,14,.9) 60%); border:1px solid rgba(34,232,137,.35)}
    .cta-band h3{margin:0; font:800 28px/1 var(--display); text-transform:uppercase}
    .cta-band p{margin:6px 0 0; color:var(--ink-2)}
    .more-players{display:flex; flex-wrap:wrap; gap:8px}
    .more-players a{padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font:600 13px var(--sans); text-decoration:none}
    .more-players a:hover{border-color:var(--pitch); color:var(--ink)}
    .more-players a em{font-style:normal; color:var(--gold); font-variant-numeric:tabular-nums}
    .trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:22px 0 0; padding:0; list-style:none}
    .trust li{display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:rgba(8,19,14,.7); border:1px solid var(--line); font-size:14px; color:var(--ink-2)}
    .trust li b{display:block; color:var(--ink); font-weight:600}
    .trust li:before{content:"\2713"; flex:none; color:var(--pitch); font-weight:700}
    #notfound{padding:80px 0 40px; text-align:center}
    #notfound .lead{margin:0 auto}
    #notfound .cta-row{justify-content:center}

    /* market navigation (prices, movers, cheapest, promos) */
    .subnav{display:none; gap:4px; margin:26px 0 0; padding:5px; width:max-content; max-width:100%; border-radius:999px; border:1px solid var(--line); background:rgba(8,19,14,.72)}
    html[data-page="prices"] .subnav,html[data-page="movers"] .subnav,html[data-page="cheapest"] .subnav,html[data-page="promos"] .subnav{display:flex}
    .subnav a{padding:7px 15px; border-radius:999px; font:600 13.5px var(--sans); color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:background .15s,color .15s}
    .subnav a:hover{color:var(--ink); background:rgba(214,255,232,.06)}
    .subnav a[aria-current="page"]{color:var(--pitch); background:rgba(34,232,137,.13)}
    html[data-page="prices"] #prices,html[data-page="movers"] #movers,html[data-page="cheapest"] #cheapest,html[data-page="promos"] #promos{padding-top:30px}

    /* tile extras: signature badge, approximate price, change badges */
    .fut .sig{position:absolute; right:10%; top:7.5%; z-index:2; padding:.9cqw 2.8cqw; border-radius:99px; font:800 4.6cqw/1.1 var(--display); letter-spacing:.1em; text-transform:uppercase;
      color:#2b1d05; background:linear-gradient(135deg,#fff6d2,var(--gold) 60%,#e8a93a); box-shadow:0 2px 10px rgba(0,0,0,.4)}
    .fut .upg{position:absolute; left:10%; top:7.5%; z-index:2; padding:.9cqw 2.8cqw; border-radius:99px; font:800 4.4cqw/1.1 var(--display); letter-spacing:.04em;
      color:#03140b; background:var(--pitch); box-shadow:0 2px 10px rgba(0,0,0,.4)}
    .tag.upgrade{color:#03140b; background:var(--pitch); border-color:transparent}
    .approx{margin-right:1px; color:var(--mut); font-weight:600}
    .chg{display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font:700 12px/1.5 var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap}
    .chg.up{color:var(--pitch); background:rgba(34,232,137,.12)} .chg.down{color:#ff8a8a; background:rgba(255,107,107,.12)} .chg.flat{color:var(--mut); background:rgba(214,255,232,.06)}
    .price-pill .chg{font-size:11px; padding:1px 7px}

    /* browse controls */
    .controls{grid-template-columns:minmax(220px,1fr) auto}
    .type-chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
    a.chip{display:inline-flex; align-items:center; text-decoration:none; line-height:1.6}
    .chip-select{position:relative; display:inline-flex; padding:0}
    .chip-select select{field-sizing:content; max-width:230px; width:auto; height:auto; padding:7px 32px 7px 14px; border:0; border-radius:999px; background:transparent; color:inherit; font:600 13px/1.6 var(--sans); cursor:pointer; appearance:none; -webkit-appearance:none}
    .chip-select:after{content:""; position:absolute; right:13px; top:50%; width:7px; height:7px; margin-top:-5px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); pointer-events:none; opacity:.8}
    .chip-select select:focus{box-shadow:none}
    .chip-select:has(select:focus-visible){outline:2px solid var(--pitch); outline-offset:3px}
    .fpanel{margin-top:12px; padding:0; border:0}
    .fpanel:first-of-type{border-top:0}
    .fpanel > summary{display:inline-flex; width:auto; gap:8px}
    .fpanel > summary:after{content:none}
    .fpanel > summary .n{min-width:20px; padding:0 6px; border-radius:99px; background:var(--pitch); color:#03140b; font-size:12px; text-align:center}
    .fgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px 14px; margin-top:12px; padding:18px; border-radius:18px; border:1px solid var(--line); background:rgba(8,19,14,.72)}
    .field{display:grid; gap:6px; font:600 12.5px var(--sans); color:var(--ink-2)}
    .field select,.field input{height:42px; padding:0 12px; font-size:14px}
    .pair{display:grid; grid-template-columns:1fr 1fr; gap:8px}
    .field.check{display:flex; align-items:center; gap:10px; align-self:end; height:42px; cursor:pointer}
    .field.check input{width:18px; height:18px; accent-color:var(--pitch)}
    .factions{display:flex; gap:8px; align-items:end}
    .factions .gold,.factions .ghost{height:42px; padding:0 18px}
    .result-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; min-height:40px}
    .result-bar .count{margin:0; font:800 24px/1 var(--display); letter-spacing:.02em; text-transform:uppercase}
    .result-bar .count small{margin-left:8px; font:500 13px var(--sans); letter-spacing:0; text-transform:none; color:var(--mut)}
    .seg{display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--line-strong); background:rgba(8,19,14,.7)}
    .seg button{padding:6px 14px; border:0; border-radius:999px; background:transparent; color:var(--mut); font:600 13px var(--sans); cursor:pointer}
    .seg button[aria-pressed="true"]{background:rgba(34,232,137,.14); color:var(--pitch)}
    #prices .market-grid{margin-top:16px}
    .market-grid.loading{opacity:.45; transition:opacity .2s}
    .more-row{display:flex; justify-content:center; margin-top:8px}
    .more-row .ghost{padding:12px 28px; font-size:15px}
    .ptable{margin-top:14px; border-radius:18px; border:1px solid var(--line); background:rgba(8,19,14,.6); overflow:hidden}
    .ptable table{margin:0; min-width:620px}
    .ptable th{padding:12px 12px; background:rgba(16,36,26,.6)}
    .ptable td{padding:8px 12px; font-variant-numeric:tabular-nums}
    .ptable tr{cursor:pointer} .ptable tbody tr:hover td{background:rgba(34,232,137,.05)}
    .ptable .who{display:flex; align-items:center; gap:12px; min-width:0}
    .ptable .who img,.ptable .who .noface{flex:none; width:38px; height:38px; border-radius:10px; object-fit:cover; background:var(--raised)}
    .ptable .who a{color:var(--ink); font-weight:600; text-decoration:none}
    .ptable .who small{display:block; color:var(--mut); font-size:12px}
    .ptable .rtg{font:800 20px var(--display)} .ptable .pr{color:var(--gold); font-weight:700; white-space:nowrap}
    .ptable .pr.none{color:var(--mut); font-weight:500}

    /* home rails */
    .rail-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:44px}
    .rail-head h3{margin:0; font:800 30px/1 var(--display); text-transform:uppercase; letter-spacing:.01em}
    .rail-head h3 small{display:block; margin-bottom:6px; font:800 13px var(--display); letter-spacing:.2em; color:var(--pitch)}
    .rail-head .ghost{padding:7px 14px; font-size:13.5px}
    .rail{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; margin-top:18px}
    .rail > .skeleton{min-height:0}

    /* landing pages */
    .crumbs.top{margin:0 0 14px}
    .landing-head .h1{font-size:clamp(44px,6.6vw,82px)}
    .board-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:28px}
    .board{padding:20px 20px 10px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(16,36,26,.62),rgba(8,19,14,.82))}
    .board h2{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; font:800 26px/1 var(--display); text-transform:uppercase}
    .board h2 small{font:600 12.5px var(--sans); letter-spacing:0; text-transform:none; color:var(--mut)}
    .board ol{margin:0; padding:0; list-style:none}
    .brow{display:grid; grid-template-columns:24px 42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 4px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none}
    .brow:hover{background:rgba(34,232,137,.05)}
    .brow .rk{font:800 17px var(--display); color:var(--faint); text-align:center}
    .brow img,.brow .noface{width:42px; height:42px; border-radius:11px; object-fit:cover; background:var(--raised)}
    .brow .who{min-width:0}
    .brow .who b{display:block; overflow:hidden; font:600 14.5px/1.3 var(--sans); white-space:nowrap; text-overflow:ellipsis}
    .brow .who small{display:block; overflow:hidden; font-size:12px; color:var(--mut); white-space:nowrap; text-overflow:ellipsis}
    .brow .val{display:grid; justify-items:end; gap:3px}
    .brow .val b{font:700 14px var(--sans); font-variant-numeric:tabular-nums; color:var(--gold); white-space:nowrap}
    .board .empty{margin:8px 0 12px; padding:18px}
    .fodder{margin-top:28px; display:grid; gap:10px}
    .frow{display:grid; grid-template-columns:64px minmax(0,1.2fr) 170px minmax(0,1.3fr); gap:18px; align-items:center; padding:12px 18px 12px 12px; border-radius:18px; border:1px solid var(--line); background:rgba(11,26,19,.72)}
    .frow .badge{display:grid; place-items:center; width:52px; height:60px; font:800 26px/1 var(--display); color:#2b1d05;
      clip-path:polygon(50% 0,100% 12%,100% 80%,50% 100%,0 80%,0 12%); background:linear-gradient(160deg,#fbe7a6,#e9c160 45%,#b8892b)}
    .frow .badge.r-hi{background:linear-gradient(160deg,#fff5dc,#ecd9a6 45%,#c9a85e)}
    .frow .main{display:flex; align-items:center; gap:12px; min-width:0; color:var(--ink); text-decoration:none}
    .frow .main img,.frow .main .noface{flex:none; width:46px; height:46px; border-radius:12px; object-fit:cover; background:var(--raised)}
    .frow .main b{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:600 15.5px var(--sans)}
    .frow .main small{display:block; color:var(--mut); font-size:12.5px}
    .frow .price{font:800 26px/1 var(--display); color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
    .frow .price .approx,.brow .val .approx{font-size:.7em; vertical-align:.1em}
    .frow .alts{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
    .frow .alts a{padding:5px 10px; border-radius:99px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font:600 12.5px var(--sans); text-decoration:none; white-space:nowrap}
    .frow .alts a:hover{border-color:var(--pitch); color:var(--ink)} .frow .alts em{font-style:normal; color:var(--gold)}
    .types-head{margin:44px 0 0; font:800 30px/1 var(--display); text-transform:uppercase}
    .types{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:16px}
    .type{position:relative; display:flex; flex-direction:column; gap:3px; overflow:hidden; padding:18px 18px 16px 22px; border-radius:16px; border:1px solid var(--line);
      background:linear-gradient(160deg,rgba(16,36,26,.7),rgba(8,19,14,.86)); color:var(--ink); text-decoration:none; transition:border-color .15s,transform .15s}
    .type:hover{border-color:var(--line-strong); transform:translateY(-2px)}
    .type:before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent,var(--pitch))}
    .type b{font:800 22px/1.05 var(--display); text-transform:uppercase; letter-spacing:.01em}
    .type span{font-size:13px; color:var(--mut)}
    .type .new{position:absolute; right:12px; top:12px; padding:2px 8px; border-radius:99px; font:800 11px/1.5 var(--display); letter-spacing:.12em; color:#03140b; background:var(--pitch)}
    .g-icon{--accent:#ecd9a6} .g-hero{--accent:#8f6bff} .g-promo{--accent:var(--pitch)} .g-gold{--accent:#e9c160} .g-silver{--accent:#c7ced6} .g-bronze{--accent:#c98f58}
    .spotlight{margin-top:28px; padding:24px; border-radius:24px; border:1px solid rgba(34,232,137,.3); background:radial-gradient(700px 260px at 90% 0%,rgba(34,232,137,.16),transparent 60%),linear-gradient(160deg,#0b1d15,#060e0a)}
    .spotlight .rail-head{margin-top:0}
    .seo-links{margin-top:40px; display:flex; flex-wrap:wrap; gap:8px}
    .seo-links a{padding:6px 12px; border-radius:99px; border:1px solid var(--line); color:var(--ink-2); font:600 13px var(--sans); text-decoration:none}
    .seo-links a:hover{border-color:var(--pitch); color:var(--ink)}

    /* player page additions */
    .p-meta a.tag{text-decoration:none} .p-meta a.tag:hover{border-color:var(--pitch); color:var(--ink)}
    .p-changes{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
    .p-changes .chg{font-size:12.5px; padding:3px 10px}
    .p-changes .chg i{font-style:normal; margin-right:6px; color:var(--mut); font-weight:600}
    .approx-note{margin:6px 0 0; font-size:13px; color:var(--mut)}
    .panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
    .panel-head h3{margin:0}
    .chart-sum{display:flex; gap:18px; flex-wrap:wrap; margin:0 0 10px; font-size:13px; color:var(--mut)}
    .chart-sum b{color:var(--ink); font-variant-numeric:tabular-nums}
    .chart-wrap{position:relative}
    .chart .grid{stroke:rgba(214,255,232,.08); stroke-dasharray:3 4}
    .chart-tip{position:absolute; top:0; z-index:2; padding:6px 10px; border-radius:10px; border:1px solid var(--line-strong); background:#08130e; font:600 12.5px var(--sans); white-space:nowrap; pointer-events:none; transform:translateX(-50%)}
    .chart-tip b{color:var(--gold)} .chart-tip span{display:block; color:var(--mut); font-weight:500}
    .chart-x{position:absolute; top:14px; bottom:28px; width:1px; background:rgba(214,255,232,.28); pointer-events:none}
    #p-versions .rail{margin-top:4px; grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
    .price-hero .approx{margin-right:2px; font-size:.62em; vertical-align:.18em}

    /* generic cards */
    .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin:28px 0}
    .card{position:relative; padding:26px; border-radius:var(--radius); background:linear-gradient(180deg,rgba(16,36,26,.55),rgba(8,19,14,.75));
      border:1px solid var(--line); transition:border-color .2s, transform .2s}
    .card:hover{border-color:var(--line-strong)}
    .card h3{margin:0 0 6px; font:700 17px var(--sans); color:var(--ink)}
    .card p{margin:0; font-size:14.5px; line-height:1.6; color:var(--mut)}
    .icon{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:18px; color:var(--pitch);
      border:1px solid rgba(34,232,137,.3); border-radius:12px; background:rgba(34,232,137,.08)}
    .icon svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
    .num{position:absolute; right:22px; top:14px; font:800 64px/1 var(--display); color:rgba(214,255,232,.06)}
    .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
    /* ---------- download page ---------- */
    #downloads .dl-wrap{max-width:980px; padding-top:28px}
    #downloads .dl-title{font-size:clamp(44px,6.4vw,78px); margin:0 0 14px}
    #downloads .dl-lead{margin-bottom:34px}
    #downloads:not([data-os="mac"]) .dl-os-mac,#downloads:not([data-os="windows"]) .dl-os-windows,#downloads:not([data-os="phone"]) .dl-os-phone{display:none}
    #downloads[data-os="phone"] .dl-actions,#downloads[data-os="phone"] .dl-install{display:none}
    .dl-hero{position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; padding:34px 36px; border-radius:24px;
      border:1px solid rgba(34,232,137,.32); background:radial-gradient(520px 260px at 92% 50%,rgba(34,232,137,.14),transparent 70%),linear-gradient(180deg,#0c1d15,#07120d)}
    .dl-pitch{position:absolute; right:-40px; top:50%; width:620px; height:270px; transform:translateY(-50%); fill:none; stroke:rgba(34,232,137,.16); stroke-width:1.2; pointer-events:none;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 42%,#000 72%); mask-image:linear-gradient(90deg,transparent 0,transparent 42%,#000 72%)}
    .dl-mark{position:relative; display:grid; place-items:center; width:84px; height:84px; border-radius:22px; background:rgba(34,232,137,.1); border:1px solid rgba(34,232,137,.3); color:var(--pitch)}
    .dl-mark svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
    #downloads[data-os="phone"] .dl-mark{display:none}
    #downloads[data-os="phone"] .dl-hero{grid-template-columns:1fr}
    .dl-main{position:relative; min-width:0}
    .dl-name{margin:0 0 8px; font:800 clamp(28px,3.6vw,40px)/1.02 var(--display); letter-spacing:.01em; text-transform:uppercase; color:var(--ink)}
    .dl-facts{margin:0 0 22px; max-width:46em; color:var(--mut); font-size:15px; line-height:1.6}
    .dl-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
    .dl-button{padding:14px 28px; font-size:16px; font-weight:700}
    .dl-button[aria-disabled="true"]{opacity:.55; pointer-events:none}
    .dl-switch{font-size:14px}
    .dl-h{margin:0 0 14px; font:700 20px/1.2 var(--sans); color:var(--ink)}
    .dl-install{margin-top:44px}
    .dl-install .dl-h{margin-bottom:30px}
    .dl-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0; padding:0; list-style:none; counter-reset:dlstep}
    .dl-steps li{counter-increment:dlstep; position:relative; padding:18px 0 0; border-top:1px solid var(--line-strong); color:var(--mut); font-size:14.5px; line-height:1.55}
    .dl-steps li:before{content:counter(dlstep); position:absolute; top:-15px; left:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
      background:var(--bg); border:1px solid rgba(34,232,137,.45); color:var(--pitch); font:700 14px/1 var(--sans)}
    .dl-steps li b{display:block; margin:8px 0 4px; color:var(--ink); font-weight:600}
    .dl-verify{margin-top:26px; color:var(--mut); font-size:14px}
    .dl-verify summary{cursor:pointer; color:var(--ink-2); width:max-content}
    .dl-verify summary:hover{color:var(--ink)}
    .dl-verify p{margin:10px 0 8px}
    .dl-hash{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    /* Windows: the installer when one is published (html[data-win-download], set from latest.json), else the zip. */
    html:not([data-win-download="installer"]) .win-installer, html[data-win-download="installer"] .win-zip{display:none !important}
    .dl-hash code{padding:9px 12px; border-radius:10px; background:rgba(214,255,232,.05); border:1px solid var(--line); color:var(--ink-2);
      font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; max-width:100%}
    .dl-copy{font-size:13px; padding:7px 14px; border-color:var(--line-strong)}
    .dl-all{margin-top:52px}
    .dl-list{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
    .dl-list li{display:grid; grid-template-columns:22px 110px 1fr auto auto; gap:16px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line); color:var(--mut); font-size:14.5px}
    .dl-list svg{width:20px; height:20px; fill:none; stroke:var(--ink-2); stroke-width:1.5; stroke-linejoin:round}
    .dl-list-name{color:var(--ink); font-weight:600}
    .dl-list-size{font-variant-numeric:tabular-nums; min-width:5ch; text-align:right}
    .dl-list .ghost{border-color:var(--line-strong); padding:7px 16px; font-size:14px}
    .dl-list .ghost[aria-disabled="true"]{opacity:.5; pointer-events:none}
    .dl-later{justify-self:end; font-size:13px; color:var(--faint)}
    .dl-soon .dl-list-name{color:var(--ink-2)}
    .dl-foot{margin:18px 0 0; max-width:44em; color:var(--mut); font-size:14.5px; line-height:1.6}
    @media (max-width:720px){
      .dl-hero{grid-template-columns:1fr; padding:26px 22px; gap:18px}
      .dl-mark{width:64px; height:64px; border-radius:18px}
      .dl-mark svg{width:32px; height:32px}
      .dl-pitch{opacity:.6}
      .dl-button{width:100%}
      .dl-steps{grid-template-columns:1fr; gap:26px}
      .dl-list li{grid-template-columns:22px 1fr auto; row-gap:4px}
      .dl-list-req{grid-column:2 / 4; grid-row:2; font-size:13px}
      .dl-list-size{display:none}
    }
    .download{display:flex; flex-direction:column; gap:6px}
    .install-steps{margin:10px 0 4px; padding-left:20px; color:var(--mut); font:14px/1.6 var(--sans)}
    .checksum{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; color:var(--mut)}
    .download .btn-link,.download .soon{margin-top:auto; align-self:flex-start}
    .download.feature{border-color:rgba(34,232,137,.45); box-shadow:0 0 0 1px rgba(34,232,137,.12),0 30px 60px -30px rgba(34,232,137,.3)}
    .soon{display:inline-block; padding:7px 14px; border:1px solid var(--line-strong); border-radius:999px; font:700 12px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
    .app-band{position:relative; overflow:hidden; margin-top:96px; padding:56px 48px; border-radius:28px; border:1px solid rgba(34,232,137,.3);
      background:radial-gradient(700px 300px at 85% 20%,rgba(34,232,137,.22),transparent 60%),linear-gradient(135deg,#0b1d15,#050c09)}
    .app-band h2.sec{margin:10px 0 12px}
    .app-band .stat-row{display:flex; gap:40px; flex-wrap:wrap; margin-top:30px}
    .app-band .stat b{display:block; font:800 34px/1 var(--display)} .app-band .stat span{font-size:13px; color:var(--mut)}
    .cta-row{display:flex; gap:10px; margin:28px 0 0; flex-wrap:wrap; align-items:center}
    .cta-row .gold,.cta-row .ghost{padding:13px 24px; font-size:15px}

    /* plans */
    .plan{position:relative; display:flex; flex-direction:column; gap:4px}
    /* One plan on sale: a card of reading width, not a 1,100px-wide slab. */
    #plan-grid:has(> .plan:only-child){grid-template-columns:minmax(0,560px)}
    .plan h3{font-size:15px; color:var(--ink-2)}
    .plan .price{margin:8px 0 2px; font:800 54px/1 var(--display); color:var(--ink)}
    .plan .price small{font:500 14px var(--sans); color:var(--mut)}
    .plan > p{font-size:14px}
    .plan ul{list-style:none; display:grid; gap:9px; margin:16px 0 18px; padding:16px 0 0; border-top:1px solid var(--line)}
    .plan li{display:flex; gap:10px; align-items:baseline; font-size:14px; color:var(--ink-2)}
    .plan li:before{content:"\2713"; color:var(--pitch); font-weight:700}
    .plan button{margin-top:auto; width:100%}
    .plan.feature{border-color:rgba(34,232,137,.5)}
    .plan .tag{position:absolute; top:-12px; left:24px; padding:3px 11px; font:800 12px var(--display); letter-spacing:.14em; text-transform:uppercase; color:#03140b; background:var(--pitch); border:0}
    .note{margin-top:18px; font-size:13.5px; color:var(--mut)}
    #plans,#legal,#tools,#prices,#support,#owner{padding-top:40px}

    /* forms */
    label{display:block; margin:16px 0 6px; font:600 13px var(--sans); color:var(--ink-2)}
    input,select{width:100%; padding:11px 14px; font:400 15px var(--sans); color:var(--ink); background:rgba(8,19,14,.85);
      border:1px solid var(--line-strong); border-radius:12px; transition:border-color .15s; color-scheme:dark}
    input::placeholder{color:var(--faint)}
    input:focus,select:focus{outline:none; border-color:var(--pitch)}
    input:focus-visible,select:focus-visible{box-shadow:0 0 0 3px rgba(34,232,137,.35)}
    button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--pitch); outline-offset:3px}
    .err{min-height:20px; margin-top:10px; font-size:13px; color:var(--bad)}
    .auth-card{max-width:440px; margin:70px auto 0; padding:34px}
    .auth-card .sub{font-size:14px !important}
    .or{display:flex; align-items:center; gap:12px; margin:10px 0; font-size:12px; color:var(--faint)}
    .or:before,.or:after{content:""; flex:1; height:1px; background:var(--line)}
    .full{width:100%}
    /* Sign in with Google / Apple: each provider's own button style (Google: white with its
       four-colour G and a #747775 outline; Apple: black with the white Apple logo). */
    .oauth{display:grid; gap:10px; margin-top:18px}
    .oauth + .or{margin-top:16px}
    .oauth-btn{display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 18px; border-radius:999px;
      font:500 15px/1.2 Roboto,var(--sans); letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:background-color .15s, box-shadow .15s}
    .oauth-btn svg{flex:none; width:18px; height:18px}
    .oauth-btn.google{background:#fff; color:#1f1f1f; border:1px solid #747775}
    .oauth-btn.google:hover{background:#f2f2f2; box-shadow:0 1px 3px rgba(60,64,67,.3)}
    .oauth-btn.apple{background:#000; color:#fff; border:1px solid rgba(255,255,255,.42); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:500}
    .oauth-btn.apple svg{width:15px; height:18px; margin-top:-2px}
    .oauth-btn.apple:hover{background:#1a1a1a}
    .oauth-btn:focus-visible{outline:2px solid var(--pitch); outline-offset:3px}
    .signins{display:grid; gap:8px; margin:12px 0 0}
    .signin{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); font-size:14px; color:var(--ink-2)}
    .signin b{color:var(--ink)} .signin .who{flex:1 1 180px; min-width:0; word-break:break-all; color:var(--mut)}
    .signin svg{width:16px; height:16px; flex:none}
    .auth-card.tfa-mode > :not(.kicker):not([data-title]):not(#auth-2fa):not(#auth-err){display:none !important}
    .tfa-qr{display:inline-block; margin-top:10px; padding:10px; border-radius:12px; background:#fff}
    .tfa-qr img{display:block; width:200px; height:200px}
    #tfa-key{font-size:13px; letter-spacing:.06em; word-break:break-all}
    .tfa-code-list{display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:6px 24px; margin:12px 0; padding-left:22px; font:600 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink)}
    .connect-proof{display:flex; gap:8px; flex:1 1 260px; justify-content:flex-end}
    .connect-proof input{max-width:220px; padding:7px 12px; font-size:14px}
    .connect-proof .gold{padding:7px 16px}
    .link-code{margin:18px 0 6px; font:800 clamp(34px,9vw,44px)/1 var(--display); letter-spacing:.14em; text-align:center; color:var(--gold);
      padding:16px; border:1px dashed var(--line-strong); border-radius:16px; background:rgba(8,19,14,.6); font-variant-numeric:tabular-nums}

    /* desk */
    .desk-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; margin:48px 0 24px}
    .desk-head .h1{margin:14px 0 0 !important}
    .pill{display:inline-block; padding:6px 14px; font:600 13px var(--sans); color:var(--ink-2); border:1px solid var(--line-strong); border-radius:999px; background:var(--panel)}
    #app .card{margin-bottom:12px}
    table{width:100%; margin:12px 0 4px; border-collapse:collapse; font-size:14.5px}
    th{padding:10px 8px; text-align:left; font:600 12px var(--sans); color:var(--mut); border-bottom:1px solid var(--line)}
    td{padding:13px 8px; text-align:left; color:var(--ink-2); border-bottom:1px solid var(--line)}
    tr:last-child td{border-bottom:0}
    .watch{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; padding:13px 16px;
      font-size:14px; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); border-radius:12px}
    .watch b{font-weight:600; color:var(--ink)}
    .watch .nums{font-size:13px; font-variant-numeric:tabular-nums; color:var(--mut)}
    .watch .gold-n{color:var(--gold)}
    .row-actions{display:flex; gap:8px; margin-top:28px; flex-wrap:wrap}

    /* FAQ + legal + footer */
    details{margin:0; padding:18px 2px; border-bottom:1px solid var(--line)}
    details:first-of-type{border-top:1px solid var(--line)}
    summary{display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; list-style:none; font:600 16px var(--sans); color:var(--ink)}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+"; font:300 24px/1 var(--sans); color:var(--pitch); transition:transform .2s}
    details[open] summary:after{transform:rotate(45deg)}
    details p{max-width:48em; margin:10px 0 0; font-size:15px; color:var(--mut)}
    .legal .card{margin-top:24px}
    .legal h3,.legal h2:not(.h1){margin:26px 0 8px; font:700 16px var(--sans); text-transform:none; letter-spacing:normal}
    .legal h3:first-child,.legal h2:not(.h1):first-child{margin-top:0}
    .legal p{font-size:15px; color:var(--mut)}
    .legal p + p{margin-top:10px}
    .legal .legal-date{margin-top:8px; font-size:14px}
    .legal-list{margin:0; padding-left:20px; font-size:15px; color:var(--mut)}
    .legal-list li{margin:6px 0}
    .legal-list b{color:var(--ink-2)}
    .legal h3[id],.legal h2[id]{scroll-margin-top:90px}
    .changelog .release{margin-top:24px; scroll-margin-top:90px}
    .changelog .release h3{margin:0; font:800 26px var(--display); letter-spacing:.01em}
    .changelog .release time{display:block; margin:2px 0 14px; font-size:14px; color:var(--mut)}
    .changelog .release h4{margin:18px 0 6px; font:700 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}
    .changelog .legal-list{margin:0}
    footer{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:30px 32px; font-size:13px; color:var(--mut); border-top:1px solid var(--line); background:rgba(4,9,7,.6)}
    footer .brand{font-size:17px}
    footer a{color:var(--mut); text-decoration:none}
    footer a:hover{color:var(--pitch)}
    footer .legal-line{max-width:560px}

    /* account email, support, owner console */
    textarea{width:100%; min-height:150px; padding:11px 14px; font:400 15px/1.55 var(--sans); color:var(--ink); background:rgba(8,19,14,.85);
      border:1px solid var(--line-strong); border-radius:12px; resize:vertical; color-scheme:dark}
    textarea:focus{outline:none; border-color:var(--pitch); box-shadow:0 0 0 3px rgba(34,232,137,.35)}
    .ok{color:var(--pitch) !important}
    .msg{min-height:20px; margin-top:10px; font-size:13.5px; color:var(--mut)}
    .msg.bad{color:var(--bad)} .msg.good{color:var(--pitch)}
    .link-btn{padding:0; border:0; background:none; color:var(--ink-2); font:600 13px var(--sans); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; cursor:pointer}
    .link-btn:hover{color:var(--pitch)}
    .aux-links{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; font-size:13px}
    .aux-links a{color:var(--mut)}
    .hp{position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden}
    .verify-notice{position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; margin:24px 0 8px; padding:22px 56px 22px 22px;
      border-radius:var(--radius); border:1px solid rgba(34,232,137,.55); background:linear-gradient(135deg,rgba(34,232,137,.14),rgba(8,19,14,.92) 60%);
      box-shadow:0 0 0 1px rgba(34,232,137,.12),0 24px 60px -30px rgba(34,232,137,.45)}
    .verify-notice[hidden]{display:none}
    .verify-notice:focus{outline:none} .verify-notice:focus-visible{outline:2px solid var(--pitch); outline-offset:3px}
    .verify-notice .icon{margin:0}
    .verify-notice h3{margin:0 0 6px; font:800 24px/1.1 var(--display); letter-spacing:.02em; text-transform:uppercase; color:var(--ink)}
    .verify-notice p{margin:0; font-size:15px; color:var(--ink-2)}
    .verify-notice p b{color:var(--ink); overflow-wrap:anywhere}
    .verify-notice .actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
    .verify-notice .close{position:absolute; top:12px; right:12px; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
      border-radius:10px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-2); font:400 22px/1 var(--sans); cursor:pointer}
    .verify-notice .close:hover{color:var(--ink); border-color:var(--pitch)}
    .acct-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:15px; color:var(--ink-2)}
    .acct-row b{color:var(--ink); word-break:break-all}
    .badge{display:inline-block; padding:3px 10px; border-radius:999px; font:700 12px var(--sans); letter-spacing:.02em}
    .badge.good{color:#03140b; background:var(--pitch)} .badge.warn{color:#2a1c00; background:var(--gold)} .badge.mute{color:var(--ink-2); background:var(--raised); border:1px solid var(--line-strong)}
    .acct details{padding:14px 2px} .acct details:first-of-type{border-top:1px solid var(--line); margin-top:14px}
    .acct summary{font-size:15px}
    .acct form{max-width:420px}
    .checks{display:grid; gap:10px; margin-top:10px}
    .check{display:flex; gap:12px; align-items:flex-start; margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer; font:500 14px/1.5 var(--sans); color:var(--ink-2)}
    .check input{width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--pitch)}
    .check small{display:block; color:var(--mut); font-size:13px}
    .support-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; margin-top:28px; align-items:start}
    .support-grid .card h3{font-size:17px}
    .support-grid ul{margin:8px 0 0; padding-left:18px; color:var(--mut); font-size:14.5px}
    .support-grid li{margin-bottom:8px}
    .ticket{margin-top:10px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
    .ticket summary{position:relative; flex-wrap:wrap; justify-content:flex-start; gap:4px 8px; padding:14px 30px 14px 0; font-size:15px}
    .ticket summary > span:first-child{flex:1 0 100%; min-width:0; overflow-wrap:anywhere}
    .ticket summary:after{position:absolute; right:0; top:12px}
    .ticket summary .status{margin-left:0}
    .ticket .meta{font:500 12.5px var(--sans); color:var(--mut)}
    .status{display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; font:700 11.5px var(--sans); text-transform:uppercase; letter-spacing:.04em}
    .status.open{color:#2a1c00; background:var(--gold)} .status.replied{color:#03140b; background:var(--pitch)} .status.closed{color:var(--ink-2); background:var(--raised)}
    .thread{display:grid; gap:10px; padding:4px 0 16px}
    .bubble{padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(16,36,26,.5); font-size:14.5px; color:var(--ink-2); white-space:pre-wrap; word-break:break-word}
    .bubble.support{border-color:rgba(34,232,137,.35); background:rgba(34,232,137,.07)}
    .bubble .who{display:block; margin-bottom:4px; font:700 12px var(--sans); color:var(--mut); white-space:normal}
    .owner-grid{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:16px; margin-top:20px; align-items:start}
    .owner-list{display:grid; gap:6px; max-height:70vh; overflow:auto}
    .owner-list button{display:block; width:100%; padding:12px 14px; text-align:left; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font:500 14px var(--sans); cursor:pointer}
    .owner-list button[aria-current="true"]{border-color:var(--pitch); box-shadow:inset 3px 0 0 var(--pitch)}
    .owner-list b{display:block; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; color:var(--ink-2)}
    .kv span{color:var(--mut)}
    .health{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}

    @media (max-width:980px){
      .support-grid,.owner-grid{grid-template-columns:1fr}
      .hero{grid-template-columns:1fr; min-height:0} .fan{height:430px; order:-1} .fan .fut{width:200px; margin:-150px 0 0 -100px} .mascot{width:200px; right:2%; bottom:-4px}
      .player{grid-template-columns:1fr} .player-card{position:relative; top:0} .player-card .halo{inset:-40px 0} .side-cta{display:none}
      .controls{grid-template-columns:1fr auto}
      .rail{grid-template-columns:repeat(3,minmax(0,1fr))}
      .board-grid{grid-template-columns:1fr}
      .frow{grid-template-columns:56px minmax(0,1fr) auto} .frow .alts{grid-column:2/-1; justify-content:flex-start}
    }
    @media (max-width:640px){
      .verify-notice{grid-template-columns:1fr; padding:20px 18px} .verify-notice h3{padding-right:44px} .verify-notice .icon{display:none} .verify-notice .actions > *{flex:1 1 auto}
      header{padding:10px 14px; gap:8px} nav{gap:4px} nav .ghost{padding:7px 9px; font-size:13px} nav .gold{padding:8px 14px; font-size:13px} nav .ghost,nav .gold{min-height:40px}
      header nav [data-go="home"],header nav [data-go="tools"],header nav [data-go="downloads"]{display:none}
      .menu-btn{display:inline-flex}
      .brand{font-size:18px; gap:8px} .dot{width:26px; height:26px}
      .ticker{top:61px}
      #market-grid{min-height:480px}
      .fan .fut.s1,.fan .fut.s3{display:none} .fan{height:340px; order:0} .mascot{width:128px; right:-4px; bottom:-6px}
      .market-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px}
      .subnav{width:auto; margin-left:-14px; margin-right:-14px; padding:5px 10px; border-radius:0; border-left:0; border-right:0; overflow-x:auto; scrollbar-width:none}
      .subnav::-webkit-scrollbar{display:none}
      .controls{grid-template-columns:1fr} .controls select{width:100%}
      .rail{display:flex; overflow-x:auto; gap:12px; margin:14px -22px 0; padding:0 22px 8px; scroll-snap-type:x mandatory; scrollbar-width:none}
      .rail::-webkit-scrollbar{display:none}
      .rail > *{flex:0 0 44%; scroll-snap-align:start}
      .rail-head h3{font-size:25px}
      .board{padding:16px 12px 6px} .brow{grid-template-columns:20px 38px minmax(0,1fr) auto; gap:10px} .brow img,.brow .noface{width:38px; height:38px}
      .frow{grid-template-columns:48px minmax(0,1fr) auto; gap:12px; padding:10px 12px 10px 10px} .frow .badge{width:44px; height:52px; font-size:22px} .frow .price{font-size:21px}
      .frow .main img,.frow .main .noface{width:38px; height:38px}
      .frow .alts a:nth-child(2):not(:last-child){display:none}
      .fgrid{grid-template-columns:1fr 1fr; padding:14px} .fgrid .field.wide{grid-column:1/-1}
      .statbars,.calc,.calc-out{grid-template-columns:1fr}
      .search input{padding-right:20px} .search .gold{display:none}
      h2.sec{margin-top:70px} .eyebrow{margin-top:70px}
      .app-band{padding:34px 22px}
      footer{grid-template-columns:1fr}
    }
    @media (max-width:380px){ header nav [data-go="prices"]{display:none} }
    /* Phones: each signed-in device is one block (name, app, last used) with its Sign out button beside it, not a table to scroll sideways. */
    @media (max-width:640px){
      #devices tr{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
      #devices tr:last-child{border-bottom:0}
      #devices td{grid-column:1; padding:0 8px; border:0}
      #devices td:first-child{color:var(--ink); font-weight:600}
      #devices td:nth-child(4){grid-column:2; grid-row:1 / span 3}
    }
    /* Signed in, the header button reads "Your desk" (wider than "Log in"): make room so the menu button stays on screen. */
    @media (max-width:420px){ header:has(#nav-auth[data-go="app"]) nav [data-go="prices"]{display:none} }
    @media (max-width:340px){ header{padding:10px} header:has(#nav-auth[data-go="app"]) nav [data-go="plans"]{display:none} }
    /* Sponsored coin bar above the header and the line under a player's price (src/affiliate.ts).
       Rendered by the server only on the public market pages; hidden when closed (html.aff-off, set by
       the small head script before the first paint) and on any other page opened in place. */
    .aff-bar{position:relative; z-index:60; height:38px; border-bottom:1px solid rgba(255,209,102,.14); font:500 13px/1 var(--sans); color:var(--ink-2);
      background:linear-gradient(90deg,rgba(255,209,102,.06),rgba(6,14,10,.96) 28%,rgba(6,14,10,.96) 72%,rgba(255,209,102,.06))}
    html.aff-off .aff-bar,
    html[data-page]:not([data-page="home"]):not([data-page="tools"]) .aff-bar{display:none}
    .aff-in{display:flex; align-items:center; justify-content:center; gap:10px; height:100%; padding:0 48px}
    .aff-ad{flex:none; padding:3px 5px 2px; border:1px solid var(--line-strong); border-radius:5px; font:700 9.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
    .aff-bar .aff-link{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:38px; color:var(--ink-2); text-decoration:none}
    .aff-link b{font-weight:700; color:var(--gold)}
    .aff-link:hover{color:var(--ink)} .aff-link:hover b{text-decoration:underline; text-underline-offset:3px}
    .aff-arrow{color:var(--gold)}
    .aff-info summary{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--line-strong); list-style:none; cursor:pointer;
      font:italic 700 11px/1 Georgia,"Times New Roman",serif; color:var(--mut)}
    details.aff-info{flex:none; margin:0; padding:0; border:0}
    .aff-info summary::-webkit-details-marker{display:none}
    .aff-info summary:after{content:none}
    .aff-info summary:hover,.aff-info[open] summary{color:var(--ink); border-color:var(--mut)}
    .aff-info p{position:absolute; top:calc(100% + 8px); left:50%; width:360px; margin:0 0 0 -180px; padding:11px 14px; border-radius:12px; background:#08130e; border:1px solid var(--line-strong);
      box-shadow:0 24px 60px -18px rgba(0,0,0,.9); font:500 12.5px/1.5 var(--sans); color:var(--ink-2)}
    .aff-x{position:absolute; right:8px; top:3px; width:32px; height:32px; border:0; border-radius:8px; background:none; color:var(--mut); font:400 20px/1 var(--sans); cursor:pointer}
    .aff-x:hover{color:var(--ink); background:rgba(214,255,232,.06)}
    .aff-card{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 0 4px; padding:14px 16px; border:1px solid rgba(255,209,102,.28); border-radius:14px;
      background:linear-gradient(100deg,rgba(255,209,102,.10),rgba(8,19,14,.92) 60%)}
    .aff-card-text{min-width:0}
    .aff-card p{margin:0}
    .aff-card-head{display:flex; align-items:center; gap:8px; font:700 15px/1.3 var(--sans); color:var(--ink)}
    .aff-card-sub{margin-top:3px; font:500 13.5px/1.4 var(--sans); color:var(--ink-2)} .aff-card-sub b{color:var(--gold)}
    .aff-card-note{margin-top:6px; font:500 11px/1.4 var(--sans); color:var(--mut)}
    .aff-card-btn{flex:none; padding:10px 16px; border-radius:10px; background:var(--gold); color:#1a1300; font:700 14px/1 var(--sans); text-decoration:none; white-space:nowrap}
    .aff-card-btn:hover{filter:brightness(1.08)} .aff-card-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
    #player .aff-card{margin-top:12px}
    @media (max-width:560px){
      .aff-in{justify-content:flex-start; gap:8px; padding:0 44px 0 16px}
      .aff-lead{display:none}
      .aff-info p{left:12px; right:12px; width:auto; margin:0}
    }
    @media (max-width:340px){ .aff-arrow{display:none} .aff-in{padding-left:12px} }
    @media (max-width:520px){ .aff-card{flex-direction:column; align-items:stretch} .aff-card-btn{text-align:center} }
    @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}
      /* A still ticker scrolls by hand instead of hiding the players that would have passed by. */
      .ticker{overflow-x:auto; scrollbar-width:thin}
      .ticker-track{padding-left:170px}}