/* The Grid — component styles, extracted verbatim from the approved Concept D design.
   Design tokens (colors, fonts, radii) live in tokens.css. Never hardcode hex — use the vars. */

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}
  body{
    background:var(--bg);color:var(--text);
    font-family:'Titillium Web',system-ui,sans-serif;font-weight:400;
    -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
  }
  /* subtle, restrained wash — no heavy glow */
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(1100px 560px at 84% -12%, rgba(225,6,0,.055), transparent 62%),
      radial-gradient(760px 620px at 6% 108%, rgba(10,161,230,.03), transparent 60%);
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:1}
  .mono{font-family:'JetBrains Mono',monospace}

  /* ===== HEADER ===== */
  header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)}
  .topbar{display:flex;align-items:center;gap:34px;height:70px}
  .brand{display:flex;align-items:center;gap:13px}
  .brand .mk{width:30px;height:30px;flex:none}
  .brand .mk svg{width:100%;height:100%}
  .brand .name{font-weight:900;letter-spacing:.03em;font-size:17px;line-height:1}
  .brand .name small{display:block;font-family:'JetBrains Mono';font-size:9px;font-weight:500;letter-spacing:.28em;color:var(--text-faint);margin-top:4px;white-space:nowrap}
  .name-stack{display:none}
  .name-stack span{display:block}
  .signout-desktop{display:inline}
  .signout-desktop .btn-ghost{margin-left:0}
  nav.main{display:flex;gap:2px;margin-left:auto}
  nav.main a{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);padding:9px 12px;border-radius:7px;position:relative;white-space:nowrap;transition:.18s}
  nav.main a:hover{color:var(--text);background:var(--panel)}
  nav.main a.active{color:var(--text)}
  nav.main a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--accent);border-radius:2px}
  .nav-dot{position:absolute;top:6px;right:4px;width:6px;height:6px;min-width:0;flex:none;margin:0;padding:0;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);display:none;pointer-events:none}
  .nav-dot.show{display:block}
  nav.main a.silly{transition:color .3s}
  body.silly-open nav.main a.silly, body.silly-open .nav-mobile a.silly{color:#ff5a52;animation:sillyGlow 1.9s ease-in-out infinite}
  @keyframes sillyGlow{
    0%,100%{text-shadow:0 0 9px rgba(225,6,0,.55),0 0 3px rgba(225,6,0,.5)}
    50%{text-shadow:0 0 22px rgba(225,6,0,.95),0 0 8px rgba(225,6,0,.75)}
  }
  .signin{margin-left:16px;white-space:nowrap;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:10px 17px;border-radius:8px;background:#5865F2;color:#fff;transition:.18s}
  .signin:hover{filter:brightness(1.08)}
  .signin svg{width:16px;height:16px;fill:#fff;flex:none}

  /* mobile hamburger nav — hidden by default (desktop); enabled inside the
     existing max-width:960px header breakpoint, alongside nav.main{display:none}. */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;margin-left:12px;background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;flex:none}
  .nav-burger span{display:block;width:16px;height:2px;margin:0 auto;background:var(--text-dim);border-radius:2px;transition:.18s}
  .nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){opacity:0}
  .nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-mobile{display:none}
  .nav-mobile a{position:relative;font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);padding:12px 4px;border-bottom:1px solid var(--line-soft)}
  .nav-mobile .nav-dot{top:15px;right:2px}
  .nav-mobile a:last-child{border-bottom:none}
  .nav-mobile a.active{color:var(--text)}
  .signout-mobile{display:none;margin:10px 0 0}
  .signout-mobile button{width:100%;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--text-dim);font-size:13px;font-weight:600;padding:10px;cursor:pointer;font-family:var(--font-sans)}
  .signout-mobile button:hover{color:var(--text);border-color:var(--text-faint)}

  /* ===== HERO ===== */
  .hero{padding:56px 0 8px}
  .season-tag{display:inline-flex;align-items:center;gap:11px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:22px}
  .season-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--pos)}
  .season-tag .div{color:var(--text-faint)}
  .hero h1{font-size:clamp(36px,5.6vw,66px);font-weight:900;line-height:.96;letter-spacing:-.015em;text-transform:uppercase}
  .hero h1 .em{color:var(--accent)}
  .hero .sub{color:var(--text-dim);font-size:16px;font-weight:300;max-width:540px;margin-top:18px;line-height:1.6}

  /* hero grid: countdown showpiece + snapshot stack */
  .hero-grid{display:grid;grid-template-columns:1.32fr 1fr;gap:16px;margin-top:34px}

  .next-race{
    position:relative;border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--line);
    background:linear-gradient(150deg,#111318,#0b0c0f);
    padding:26px 30px 26px;display:flex;flex-direction:column;min-height:296px;
  }
  .next-race::after{
    content:"";position:absolute;right:20px;bottom:16px;width:220px;height:140px;opacity:.20;
    -webkit-mask:var(--nr-track,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 150'%3E%3Cpath d='M20 120 C10 80 40 70 70 80 S120 110 150 90 S210 40 200 70 S150 130 110 120 S30 150 20 120 Z' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E")) no-repeat;
    mask:var(--nr-track,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 150'%3E%3Cpath d='M20 120 C10 80 40 70 70 80 S120 110 150 90 S210 40 200 70 S150 130 110 120 S30 150 20 120 Z' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E")) no-repeat;
    background-color:var(--accent);background-size:cover;filter:drop-shadow(0 0 6px var(--accent));
  }
  .nr-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
  .nr-label{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500}
  .nr-round{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.14em;color:var(--text-faint)}
  .nr-name{display:flex;align-items:center;gap:13px;font-size:34px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-top:16px;line-height:1;position:relative;z-index:2}
  .nr-flag{display:inline-block;height:22px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14);flex:none} /* per-race country flag; data-driven by circuit country once calendar exists */
  .nr-flag img,.nr-flag svg{display:block;height:100%;width:auto}
  .nr-loc{color:var(--text-dim);font-size:13.5px;font-weight:300;margin-top:9px;position:relative;z-index:2;letter-spacing:.02em}
  .nr-slot{margin-top:auto;padding-top:26px;position:relative;z-index:2}
  .countdown{display:flex;align-items:flex-start;gap:16px}
  .cd-unit{text-align:left}
  .cd-num{font-size:48px;font-weight:900;font-variant-numeric:tabular-nums;line-height:.9;letter-spacing:-.02em}
  .cd-lab{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-top:11px}
  .cd-sep{font-size:38px;font-weight:300;color:var(--line);line-height:.9;align-self:flex-start;margin-top:-2px}
  /* race-day states */
  .nr-live .live-main{display:flex;align-items:center;gap:15px;font-size:46px;font-weight:900;line-height:.9;letter-spacing:.01em;color:#fff}
  .nr-live .live-dot{width:15px;height:15px;border-radius:50%;background:var(--accent);animation:livePulse 1.3s infinite;flex:none}
  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(225,6,0,.55)}70%{box-shadow:0 0 0 15px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .nr-await .await-main{font-size:34px;font-weight:900;line-height:.9;letter-spacing:-.01em;color:var(--text-dim)}
  .nr-sub{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-top:14px}
  .nr-label.is-live{color:var(--accent)}
  .nr-champ .champ-tag{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#e9c23c}
  .nr-champ .champ-tag .champ-rule{width:26px;height:2px;background:#e9c23c;border-radius:2px;box-shadow:0 0 12px rgba(233,194,60,.5)}
  .nr-champ .champ-row{display:flex;gap:28px;margin-top:22px}
  .nr-champ .champ-col{flex:1;min-width:0}
  .nr-champ .champ-col+.champ-col{border-left:1px solid var(--line-soft);padding-left:28px}
  .nr-champ .champ-role{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
  .nr-champ .champ-name{display:flex;align-items:center;gap:11px;font-size:29px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin-top:11px}
  .nr-champ .champ-name .td{width:9px;height:24px;border-radius:1px;flex:none}
  .nr-champ .champ-meta{color:var(--text-dim);font-size:12.5px;font-weight:300;margin-top:9px}
  .nr-champ .champ-stat{font-family:'JetBrains Mono';font-size:12px;color:var(--text-faint);letter-spacing:.02em;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
  .nr-champ .champ-stat b{color:var(--text);font-weight:700}
  .nr-champ .champ-stat .dot{margin:0 8px;color:var(--line)}
  /* champion state: celebratory gold wash, hides race name/date/round + circuit motif, fills & centres */
  .next-race.is-champ{background:radial-gradient(620px 340px at 82% -12%, rgba(233,194,60,.13), transparent 62%),linear-gradient(150deg,#16130d,#0b0c0f);border-color:color-mix(in srgb,#e9c23c 22%,var(--line))}
  .next-race.is-champ .nr-top,.next-race.is-champ .nr-name,.next-race.is-champ .nr-loc{display:none}
  .next-race.is-champ::after{display:none}
  .next-race.is-champ .nr-slot{margin-top:0;flex:1;display:flex;flex-direction:column;justify-content:center}
  /* phone-only (not tablet — the hero card has room until quite narrow): drop the
     seconds unit (it doesn't fit alongside days/hrs/min) and stack the two champion
     columns (a long name has no room at ~half-width down here). */
  @media(max-width:480px){
    .wrap{padding:0 16px}
    .season-status{display:none}
    .next-race{padding:22px 22px 24px;min-height:264px}
    .next-race::after{right:12px;bottom:18px;width:150px;height:96px;opacity:.16}
    .nr-name{font-size:29px;line-height:1.02}
    .nr-slot{padding-top:22px}
    .countdown{gap:10px}
    .cd-num{font-size:39px}
    .cd-lab{font-size:8.5px;letter-spacing:.16em;margin-top:8px}
    .cd-sep{font-size:30px;margin-top:-1px}
    .cd-sec,.cd-sep-sec{display:none}
    .nr-champ .champ-row{flex-direction:column;gap:18px}
    .nr-champ .champ-col+.champ-col{border-left:none;padding-left:0;border-top:1px solid var(--line-soft);padding-top:18px}
    .nr-name{align-items:flex-start}
    .nr-flag{margin-top:5px}
  }

  .snap-stack{display:flex;flex-direction:column;gap:12px}
  .lead-card{
    border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);
    padding:16px 20px;position:relative;overflow:hidden;display:flex;align-items:center;gap:15px;flex:1;
  }
  .lead-card .stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--team)}
  .lead-card .meta{flex:1;min-width:0}
  .lead-card .role{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
  .lead-card .who{font-size:19px;font-weight:700;line-height:1.15;margin-top:4px;display:flex;align-items:center;gap:9px}
  .lead-card .who .td{width:9px;height:9px;border-radius:50%;background:var(--team);flex:none}
  .lead-card .team-name{color:var(--text-dim);font-size:12.5px;font-weight:300;margin-top:2px}
  .lead-card .pts{text-align:right;flex:none}
  .lead-card .pts b{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
  .lead-card .pts span{display:block;font-family:'JetBrains Mono';font-size:9px;letter-spacing:.14em;color:var(--text-faint);text-transform:uppercase;margin-top:3px}

  /* ===== SECTION HEADINGS ===== */
  .sec{margin-top:52px}
  .sec-head{display:flex;align-items:center;gap:15px;margin-bottom:22px}
  .sec-head .bar{width:22px;height:2px;background:var(--accent);border-radius:2px}
  .sec-head h2{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}
  .sec-head .rule{flex:1;height:1px;background:var(--line-soft)}
  .sec-head a.more{font-family:'JetBrains Mono';font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
  .sec-head a.more:hover{color:var(--accent)}

  /* ===== RIVALRY ===== */
  .rivalries{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rivalry{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);padding:22px 26px;position:relative;overflow:hidden}
  .rotator .heat{position:absolute;top:22px;right:26px;z-index:3;font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:7px}
  .rotator .heat .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .rotator .r-kind{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:22px}
  .duel{display:flex;align-items:stretch;gap:14px}
  .fighter{flex:1;min-width:0}
  .fighter.right{text-align:right}
  .fighter .f-name{font-size:20px;font-weight:700;line-height:1;display:flex;align-items:center;gap:9px}
  .fighter.right .f-name{justify-content:flex-end}
  .fighter .f-name .td{width:8px;height:20px;border-radius:1px;flex:none}
  .fighter .f-team{color:var(--text-dim);font-size:12px;font-weight:300;margin-top:6px}
  .fighter .f-pts{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:12px;line-height:1}
  .vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 10px;flex:none}
  .vs .vs-lbl{font-family:'JetBrains Mono';font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--text-faint)}
  .vs .vs-gap{font-family:'JetBrains Mono';font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
  .gap-bar{height:4px;border-radius:3px;background:var(--line);margin-top:22px;overflow:hidden;display:flex}
  .gap-bar i{display:block;height:100%}
  .gap-note{margin-top:14px;font-size:14px;font-weight:300;color:var(--text-dim);line-height:1.55}
  .gap-note b{color:var(--text);font-weight:600}
  .gap-note .rl{color:var(--accent);font-weight:600}

  /* rotator */
  .rotator{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);padding:22px 26px 20px;position:relative;overflow:hidden}
  .rot-view{position:relative;min-height:158px;overflow:hidden}
  /* billboard roll-down: incoming drops from top, outgoing rolls out the bottom */
  .slide{position:absolute;inset:0;opacity:0;pointer-events:none}
  .slide.on{position:relative;opacity:1;pointer-events:auto}
  /* animation only during an actual page advance (via .enter/.leaving) — never on toggle/reveal */
  .slide.enter{animation:rollInDown .55s cubic-bezier(.22,.61,.36,1)}
  .slide.enter.up{animation-name:rollInUp}
  .slide.leaving{position:absolute;inset:0;opacity:1;pointer-events:none;animation:rollOutDown .55s cubic-bezier(.22,.61,.36,1) forwards}
  .slide.leaving.up{animation-name:rollOutUp}
  @keyframes rollInDown{from{transform:translateY(-108%);opacity:.2}to{transform:translateY(0);opacity:1}}
  @keyframes rollOutDown{from{transform:translateY(0);opacity:1}to{transform:translateY(108%);opacity:.2}}
  @keyframes rollInUp{from{transform:translateY(108%);opacity:.2}to{transform:translateY(0);opacity:1}}
  @keyframes rollOutUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-108%);opacity:.2}}
  .dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
  .dots.solo{display:none}
  .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .22s}
  .dot::before{content:"";position:absolute;inset:-7px;border-radius:50%} /* larger hitbox, invisible */
  .dot:hover{background:var(--text-faint)}
  .dot.on{background:var(--accent)}
  .dot.on:hover{background:var(--accent)}

  /* ===== BULLETIN + STANDINGS ===== */
  .lower{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
  .news{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);overflow:hidden}
  .news .item{display:flex;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line-soft);transition:.16s}
  .news .item:last-child{border-bottom:0}
  .news .item:hover{background:var(--panel-2)}
  .news .date{font-family:'JetBrains Mono';font-size:10.5px;color:var(--text-faint);letter-spacing:.06em;white-space:nowrap;padding-top:4px;width:50px;flex:none}
  .news .tag{display:inline-block;font-family:'JetBrains Mono';font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:9px;font-weight:500;background:var(--accent-soft);color:#ff6a63;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
  .news .tag.calendar{background:rgba(10,161,230,.09);color:#5cc6ff;border-color:rgba(10,161,230,.24)}
  .news .tag.market{background:rgba(157,107,255,.09);color:#c4a6ff;border-color:rgba(157,107,255,.24)}
  .news .body h3{font-size:16px;font-weight:600;margin-bottom:4px;line-height:1.25}
  .news .body p{font-size:13.5px;color:var(--text-dim);font-weight:300;line-height:1.55}

  .ministand{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);overflow:hidden}
  .ms-head{padding:15px 20px 13px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center}
  .ms-head .t{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
  .ms-head .toggle{display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:2px}
  .ms-head .toggle span{font-family:'JetBrains Mono';font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:5px;color:var(--text-faint);cursor:pointer;transition:.15s}
  .ms-head .toggle span.on{background:var(--accent);color:#fff}
  .ms-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;height:46px;padding:0 20px;border-bottom:1px solid var(--line-soft);position:relative}
  .ms-row:last-child{border-bottom:0}
  .ms-row .pos{font-family:'JetBrains Mono';font-size:12px;font-weight:500;color:var(--text-faint);text-align:center}
  .ms-row.leader .pos{color:var(--accent);font-weight:600}
  .ms-row .stripe{position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--team)}
  .ms-row .nm{font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px}
  .ms-row .nm .delta{font-family:'JetBrains Mono';font-size:10.5px;font-weight:500}
  .ms-row .nm .up{color:var(--pos)} .ms-row .nm .down{color:var(--neg)} .ms-row .nm .flat{color:var(--text-faint)}
  .ms-row .pt{font-family:'JetBrains Mono';font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
  .ms-tag{font-family:'JetBrains Mono';font-size:8.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
  .ms-row.withdrawn{opacity:1} /* withdrawn shown like the rest (tag still marks them); revised 2026-07-01 */
  .ms-scroller{position:relative}
  .ms-scroller.hide{display:none}
  .ms-view{position:relative;overflow:hidden;min-height:276px}
  .ms-track{transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
  .ministand .dots{margin:14px 0 16px}

  /* ===== EXPLORE (no icons — clean) ===== */
  .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .qcard{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);padding:22px 22px 20px;position:relative;overflow:hidden;transition:.2s;cursor:pointer}
  .qcard:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:var(--panel-2)}
  .qcard .ix{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:34px}
  .qcard h4{font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
  .qcard p{font-size:12px;color:var(--text-dim);font-weight:300;margin-top:4px;line-height:1.45}
  .qcard .arrow{position:absolute;top:20px;right:20px;color:var(--text-faint);transition:.2s}
  .qcard:hover .arrow{color:var(--accent);transform:translate(2px,-2px)}

  footer{margin-top:66px;border-top:1px solid var(--line-soft);padding:28px 0 46px}
  .foot{display:flex;justify-content:space-between;align-items:center;color:var(--text-faint);font-family:'JetBrains Mono';font-size:11px;letter-spacing:.06em}

  .note{background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:9px;padding:13px 18px;margin:20px 0 0;font-size:13px;font-weight:300;color:var(--text-dim)}
  .note b{color:var(--text);font-weight:600}
  @media(max-width:960px){
    .hero-grid,.rivalries,.lower{grid-template-columns:1fr}
    nav.main{display:none}
    .quick{grid-template-columns:repeat(2,1fr)}
    .brand .name small{display:none}
    .name-full{display:none}
    .name-stack{display:block;line-height:1.05}
    .topbar{gap:12px}
    .topbar .pill{margin-left:auto}
    .topbar .signin{margin-left:auto}
    .signout-desktop{display:none}
    .nav-burger{display:flex}
    .nav-mobile:not([hidden]){display:flex;flex-direction:column}
    .signout-mobile{display:block}
    .admin-nav{flex-wrap:wrap}
  }

/* ===== app additions (not in the static mockup) ===== */
/* logged-in header state */
.profile-actions{display:inline-flex;align-items:center;gap:8px;margin-left:4px;position:relative}
.profile-actions .pill{margin-left:0}
.pill{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-dim);margin-left:16px}
.pill-flag{height:13px;width:auto;border-radius:2px;margin-right:8px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.btn-ghost{margin-left:12px;font-size:13px;font-weight:600;padding:9px 15px;border-radius:8px;background:var(--panel);color:var(--text-dim);border:1px solid var(--line);cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.btn-ghost:hover{color:var(--text)}
.notify-wrap{position:relative;display:inline-flex;align-items:center}
.notify-pill{position:relative;width:32px;height:32px;justify-content:center;padding:0;color:var(--text-dim);background:transparent;cursor:pointer;transition:border-color .16s,color .16s}
.notify-pill:hover,.notify-wrap.open .notify-pill{border-color:var(--text-faint);color:var(--text)}
.notify-pill svg{width:16.5px;height:16.5px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notify-dot{position:absolute;top:3px;right:3px;width:6.5px;height:6.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent-glow);display:none}
.notify-pill.has-unread .notify-dot{display:block}
.notify-menu{--notify-margin:16px;position:fixed;top:80px;right:var(--notify-margin);width:min(340px,calc(100vw - (var(--notify-margin) * 2)));max-height:calc(100vh - 96px);overflow-y:auto;background:#0b0b0e;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.5);padding:8px;z-index:90;text-transform:none;letter-spacing:0}
.notify-head{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);padding:8px 10px 10px;border-bottom:1px solid var(--line-soft)}
.notify-empty{padding:18px 10px 16px;color:var(--text-dim);font-size:13px}
.notify-item{padding:12px 10px;border-bottom:1px solid var(--line-soft)}
.notify-item:last-child{border-bottom:none}
.notify-main{display:flex;align-items:flex-start;gap:10px}
.notify-swatch{width:9px;height:28px;border-radius:3px;background:var(--tc,#6a6f78);flex:none;margin-top:2px}
.notify-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.25}
.notify-body{font-size:13px;color:var(--text-dim);line-height:1.35;margin-top:3px}
.notify-body-link{color:var(--accent);font-weight:700;text-decoration:none}
.notify-body-link:hover{color:var(--text)}
.notify-time{display:block;font-family:var(--font-mono);font-size:10px;color:var(--text-faint);margin-top:7px}
.notify-link{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none}
.notify-link:hover{color:var(--text)}
.notify-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.notify-actions form{margin:0}
.notify-action{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--text-dim);cursor:pointer}
.notify-action.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.notify-action:hover{border-color:var(--text-faint);color:var(--text)}
.notify-action.primary:hover{filter:brightness(1.08);color:#fff}
@media(max-width:960px){
  .topbar .profile-actions{margin-left:auto}
  .topbar .profile-actions .pill{margin-left:0}
  .notify-menu{--notify-margin:12px}
}
/* simple hero for error / coming-soon pages */
.page{padding:60px 0 90px}
@media(max-width:720px){
  .page.wrap{padding-left:20px;padding-right:20px}
  .calendar-page.wrap{padding-left:16px;padding-right:16px}
}
@media(max-width:480px){
  .page.wrap{padding-left:16px;padding-right:16px}
  .calendar-page.wrap{padding-left:12px;padding-right:12px}
}
h1.big{font-size:clamp(32px,5vw,56px);font-weight:900;line-height:.98;letter-spacing:-.015em;text-transform:uppercase}
h1.big .em{color:var(--accent)}
.lead{color:var(--text-dim);font-size:16px;font-weight:300;max-width:560px;margin-top:16px;line-height:1.6}

/* login wall */
.gate-page{min-height:calc(100vh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:28px;padding:86px 0 90px;text-align:center}
.gate-hero{max-width:680px;margin:0 auto}
.gate-title{font-size:clamp(48px,9vw,92px);font-weight:900;line-height:.86;letter-spacing:.02em;text-transform:uppercase}
.gate-subtitle{margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint)}
.gate-copy{margin-left:auto;margin-right:auto}
.gate-actions{margin-top:2px;display:flex;flex-direction:column;gap:12px;align-items:center}
.gate-login{margin-left:0;display:inline-flex}
.gate-note{max-width:520px;color:var(--text-faint);font-size:12.5px;line-height:1.55}
.gate-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:720px}
.gate-stat{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:16px 18px;min-width:0}
.gate-stat span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.gate-stat b{display:block;margin-top:8px;font-size:24px;line-height:1.1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-id{max-width:520px;margin-left:auto;margin-right:auto;text-align:left}
.pending-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:26px auto 0;max-width:680px}
.pending-steps li{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:13px 14px;color:var(--text-faint);display:flex;align-items:center;gap:10px}
.pending-steps span{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-family:var(--font-mono);font-size:11px;flex:none}
.pending-steps b{font-size:13px;font-weight:600;color:inherit}
.pending-steps .done,.pending-steps .current{color:var(--text)}
.pending-steps .done span{border-color:rgba(65,209,138,.5);color:var(--pos)}
.pending-steps .current{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.pending-steps .current span{border-color:var(--accent);color:var(--accent)}
.pending-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.pending-actions .btn-ghost{margin-left:0}
.confetti-canvas{position:fixed;inset:0;z-index:80;pointer-events:none}
@media(max-width:720px){
  .gate-stats{grid-template-columns:1fr;width:min(58vw,240px)}
  .pending-steps{grid-template-columns:1fr}
}
@media(max-width:480px){
  .gate-stats{grid-template-columns:1fr}
}

/* onboarding / driver profile form */
.form{max-width:560px;margin-top:30px;display:flex;flex-direction:column;gap:20px}
.field-row{display:flex;gap:16px}
.field-row .field{flex:1;min-width:0}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.field input,.field select{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;color:var(--text);font-family:var(--font-sans);font-size:15px;transition:border-color .16s,background .16s}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.country-pick{display:flex;align-items:center;gap:12px}
.country-pick .nr-flag{height:26px}
.country-pick select{flex:1}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.form-hint{color:var(--text-faint);font-size:12.5px;font-weight:300}
.btn-primary{font-size:14px;font-weight:700;padding:12px 22px;border-radius:9px;background:var(--accent);color:#fff;border:none;cursor:pointer;font-family:var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.btn-primary:hover{filter:brightness(1.08)}
.form-error{margin-top:22px;background:rgba(225,6,0,.09);border:1px solid var(--accent);border-left:3px solid var(--accent);border-radius:9px;padding:12px 16px;color:var(--text);font-size:14px;max-width:560px}

/* profile + members admin */
.form-ok{margin-top:22px;background:rgba(21,196,176,.08);border:1px solid #15c4b0;border-left:3px solid #15c4b0;border-radius:9px;padding:12px 16px;color:var(--text);font-size:14px;max-width:560px}
.field .opt{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-faint);font-size:10.5px;font-weight:400;margin-left:6px}
.profile-id{display:flex;align-items:center;gap:16px;margin-top:26px;max-width:560px}
.profile-id .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--text-dim);font-weight:700;font-size:22px}
.profile-id-name{font-size:16px;font-weight:600;color:var(--text)}
.profile-id-name .muted{color:var(--text-faint);font-weight:400}
.profile-id-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase;margin-top:4px}
.admin-link{margin-top:34px}
a.pill-link{text-decoration:none;transition:border-color .16s,color .16s}
a.pill-link:hover{border-color:var(--text-faint);color:var(--text)}
.members{margin-top:26px;overflow-x:auto}
.mtable-scroll{overflow-x:auto}
.mtable{width:100%;border-collapse:collapse;font-size:14px}
.mtable th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-weight:500;padding:0 14px 10px;border-bottom:1px solid var(--line)}
.mtable td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;white-space:nowrap}
.mtable td.muted{color:var(--text-faint)}
.mtable .tla{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-left:6px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;flex:none}
.status-dot.online{background:var(--pos);animation:pulse-online 2s ease-in-out infinite}
@keyframes pulse-online{
  0%   {box-shadow:0 0 0 0 color-mix(in srgb, var(--pos) 55%, transparent), 0 0 4px 1px color-mix(in srgb, var(--pos) 60%, transparent)}
  70%  {box-shadow:0 0 0 6px color-mix(in srgb, var(--pos) 0%, transparent), 0 0 6px 2px color-mix(in srgb, var(--pos) 70%, transparent)}
  100% {box-shadow:0 0 0 0 color-mix(in srgb, var(--pos) 0%, transparent), 0 0 4px 1px color-mix(in srgb, var(--pos) 40%, transparent)}
}
@media (prefers-reduced-motion: reduce){.status-dot.online{animation:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent)}}
.status-dot.offline{background:var(--text-faint);opacity:.55}
.members .mrow td:first-child > .status-dot{vertical-align:top;margin-top:7px}
.members .mrow td:first-child > .view-field{display:inline-block;vertical-align:top}
.presence-age{display:block;margin-top:3px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.role-form{margin:0}
.role-form select{background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:7px 10px;color:var(--text);font-family:var(--font-sans);font-size:13px;cursor:pointer}
.role-form select:focus{outline:none;border-color:var(--accent)}

/* --- admin: points / races / race entry (build step 3) --- */
.admin-nav { display:flex; gap:10px; margin:14px 0 4px; }
.stack { display:flex; flex-direction:column; gap:12px; max-width:520px; margin-top:14px; }
.stack input[type="text"], .stack input:not([type]), .stack input[type="number"],
.stack input[type="datetime-local"] {
  background:#111114; border:1px solid #26262c; color:var(--fg,#e8e8ea);
  padding:8px 10px; border-radius:8px; font:inherit;
}
.fl-toggle { display:inline-flex; align-items:center; gap:6px; font:inherit; }
.mtable input, .mtable select {
  background:#111114; border:1px solid #26262c; color:var(--fg,#e8e8ea);
  padding:5px 7px; border-radius:7px; font:inherit;
}
.preset-form { display:inline; }
.btn-ghost.danger { color:#ff7a7a; border-color:#5a2020; }
.race-order { white-space:nowrap; }
.race-order form { margin-right:4px; }
.role-form { display:inline-flex; gap:6px; align-items:center; }
.admin-panel { margin-top:28px; padding-top:18px; border-top:1px solid var(--hair,#1c1c22); }
.admin-panel-title { font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted,#9aa0aa); margin:0 0 10px; }
.admin-panel-links { display:flex; flex-wrap:wrap; gap:10px; }
.team-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--tc,#6a6f78); margin-right:6px; vertical-align:middle; }
.unsaved { margin-left:10px; color:#f5c518; font:inherit; }
.add-row { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.race-actions form, .race-actions { white-space:nowrap; }
.season-bar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:28px; }

/* teams & lineups (/admin/teams) */
.section-h { font-family:var(--font-sans); font-size:15px; letter-spacing:.02em; font-weight:600; margin:24px 0 0; color:var(--text); }
.team-cards { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.team-card { display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.team-edit { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; }
.team-edit label { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.team-edit input[type=text] { background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:7px 10px; color:var(--text); font-family:var(--font-sans); font-size:14px; min-width:150px; }
.team-edit input[type=text]:focus { outline:none; border-color:var(--accent); }
.team-edit select { background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:7px 10px; color:var(--text); font-family:var(--font-sans); font-size:14px; cursor:pointer; }
.team-edit select:focus { outline:none; border-color:var(--accent); }
.team-card input[type=color], .add-row input[type=color] { width:34px; height:28px; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:6px; background:var(--bg-2); }
.team-card-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.swatch { display:inline-block; width:14px; height:14px; border-radius:4px; background:var(--tc,#6a6f78);
  border:1px solid rgba(255,255,255,.12); }
.add-row label { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.add-row input[type=text], .add-row select { background:var(--bg-2); border:1px solid var(--line);
  border-radius:7px; padding:7px 10px; color:var(--text); font-family:var(--font-sans); font-size:13px; }

/* per-row unsaved indicator (member manager + admin forms) */
.unsaved-chip { display:inline-block; margin-left:8px; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(233,194,60,.4);
  border-radius:5px; padding:2px 6px; vertical-align:middle; }
.unsaved-chip[hidden] { display:none; }

/* colour field (RGB picker <-> F1 25 H/S/L toggle) */
.colorfield.cf { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cf-swatch { width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.18); flex:none; }
.cf-swatch-off { background-image:repeating-linear-gradient(45deg,#333 0 3px,transparent 3px 6px); }
.cf-modes { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.cf-mode { background:var(--bg-2); color:var(--text-faint); border:0; padding:3px 8px; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.1em; cursor:pointer; }
.cf-mode.on { background:var(--accent-soft); color:var(--text); }
.cf-mode:disabled { cursor:not-allowed; }
.cf-rgb input[type=color] { width:34px; height:26px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--bg-2); cursor:pointer; }
.cf-f1 { display:inline-flex; gap:6px; }
.cf-f1 label { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); }
.cf-f1 input[type=number] { width:66px; background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:5px 6px; color:var(--text); font-family:var(--font-mono); font-size:12px; }
.cf-enable { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; }
.cf-disabled { opacity:.5; }

/* team slots (two per team, cap 2) */
.team-slots { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.slot { display:inline-flex; align-items:center; gap:8px; min-width:150px; min-height:34px; padding:5px 8px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.slot-empty { border-style:dashed; color:var(--text-faint); }
.slot-over { border-color:var(--neg); }
.slot .slot-code { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--text-faint); }
.slot .slot-clear { margin-left:auto; background:none; border:0; color:#ff7a7a; cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
.slot select { background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:4px 6px; color:var(--text); font-family:var(--font-sans); font-size:12px; }
.slot-over-note { color:var(--neg); font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; margin-top:6px; }
.team-code-badge { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--text-faint); border:1px solid var(--line); border-radius:5px; padding:1px 5px; margin-left:6px; }

/* member manager inline row edit */
.mrow .edit-field { display:none; }
.mrow.editing .view-field { display:none; }
.mrow.editing .edit-field { display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; }
.mrow .row-save { display:none; }
.mrow.editing .row-edit { display:none; }
.mrow.editing .row-save { display:inline-flex; gap:6px; }
.mrow .in-sm { width:84px; }
.mrow .in-xs { width:52px; }
.add-row input.in-full { min-width:210px; }
.team-edit input.code-input, .add-row input.code-input { width:72px; min-width:0; }

/* team-editor three-row layout */
.team-card { flex-direction:column; align-items:stretch; gap:0; }
/* livery stripe on the left edge (team primary colour), like the home leader cards */
.team-card { position:relative; overflow:hidden; }
.team-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--team, var(--t-none)); pointer-events:none; }
.team-card { padding-left:18px; }
.te-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.te-row + .te-row { margin-top:9px; }
.te-lineup { margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft); }
.te-tp { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.te-tp select { background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  color:var(--text); font-family:var(--font-sans); font-size:14px; cursor:pointer; }
.te-tp select:focus { outline:none; border-color:var(--accent); }
.te-remove { margin-left:auto; }

/* member capability badges */
.caps { display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cap { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--line); border-radius:5px; padding:2px 6px; }
.cap-comm { color:var(--accent); border-color:rgba(225,6,0,.4); }
.cap-edit { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--text); }
.cap-note { font-size:11px; }

/* create-team form: same row layout as the team editor */
.team-add { display:flex; flex-direction:column; gap:9px; }
.team-add label { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.team-add input[type=text] { background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:7px 10px; color:var(--text); font-family:var(--font-sans); font-size:14px; }
.team-add input[type=text]:focus { outline:none; border-color:var(--accent); }
.team-add select { background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  color:var(--text); font-family:var(--font-sans); font-size:14px; cursor:pointer; }
.team-add input.in-full { min-width:210px; }
.team-add input.code-input { width:72px; min-width:0; }

/* member moderation: ban badge + field locks */
.cap-ban { color:#ff7a7a; border-color:#5a2020; }
.cap-ban-edit input { accent-color:#ff7a7a; }
.mrow-banned .view-field:first-child { opacity:.6; }
.lock-box { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.lock-tag { margin-left:6px; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(233,194,60,.4); border-radius:4px; padding:1px 4px; }
.lock-note { color:var(--gold); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-style:normal; margin-left:4px; }
.cap-tp { color:var(--pos); border-color:rgba(65,209,138,.4); }

/* driver slot order: position number + swap arrow */
.slot .slot-pos { font-family:var(--font-mono); font-size:10px; color:var(--text-faint); margin-right:2px; }
.slot-swap { align-self:center; background:var(--bg-2); border:1px solid var(--line); border-radius:6px;
  color:var(--text-dim); cursor:pointer; font-size:14px; line-height:1; padding:4px 6px; }
.slot-swap:hover { color:var(--text); border-color:var(--accent); }
.cap-pending { color:var(--text-dim); border-color:var(--line); border-style:dashed; }
.cap-new { color:var(--accent); border-color:rgba(225,6,0,.45); background:var(--accent-soft); }
.unsaved-chip.saved-ok { color:var(--pos); border-color:rgba(65,209,138,.5); }

/* empty driver slot: single dark box (match the TP field), not a dashed box around a lighter select */
.slot-empty { border:0; background:none; padding:0; min-height:0; }
.slot-empty select { background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  color:var(--text); font-family:var(--font-sans); font-size:14px; min-width:150px; cursor:pointer; }
.mtable .active-tag { color:var(--pos); }

/* public calendar page */
.cal-list { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.cal-row { display:flex; align-items:center; gap:18px; padding:12px 16px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:12px; }
.cal-row.next { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft) inset; }
.cal-row.done { }
.cal-round { flex:none; width:44px; text-align:center; font-family:var(--font-mono); font-size:22px; color:var(--text); line-height:1; }
.cal-round-lab { display:block; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }
.cal-track { flex:none; width:74px; height:46px; background:var(--text-dim); opacity:.7;
  -webkit-mask:var(--t) center/contain no-repeat; mask:var(--t) center/contain no-repeat; }
.cal-row.next .cal-track { background:var(--accent); opacity:1; }
.cal-main { flex:0 1 auto; min-width:225px; }
.cal-flex { flex:1 1 auto; }
.cal-podium.list { flex:none; }
.cal-gp { font-family:var(--font-sans); font-size:16px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:9px; }
.cal-gp .nr-flag { flex:none; width:22px; height:15px; display:inline-flex; }
.cal-gp .nr-flag img { width:100%; height:100%; object-fit:cover; border-radius:2px; }
.cal-circuit { font-size:13px; color:var(--text-dim); margin-top:3px; }
.cal-date { flex:none; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); text-align:right; min-width:150px; }
.cal-status { flex:none; min-width:96px; text-align:right; }
.cal-pill { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:6px; padding:3px 8px; color:var(--text-faint); }
.cal-pill.next { color:var(--accent); border-color:rgba(225,6,0,.45); }
.cal-pill.done { color:var(--pos); border-color:rgba(65,209,138,.4); }
@media (max-width:640px){
  .cal-row { flex-wrap:wrap; gap:10px 14px; }
  .cal-main { min-width:0; }
  .cal-date, .cal-status { text-align:left; min-width:0; }
}

/* public calendar — F1-style cards */
.cal-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:16px; margin-top:22px; }
.cal-card { position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:216px;
  padding:18px 18px 16px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; }
.cal-card.next { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft) inset; }
.cal-card.done { background:#0a0b0d; }
.cc-track { position:absolute; right:10px; bottom:8px; width:132px; height:88px; pointer-events:none;
  background:var(--text-faint); opacity:.22; -webkit-mask:var(--t) center/contain no-repeat; mask:var(--t) center/contain no-repeat; }
.cal-card.next .cc-track { background:var(--accent); opacity:.5; }
.cc-top { display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; z-index:1; }
.cc-round { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.cc-next { color:var(--accent); margin-left:4px; }
.cc-date { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--text-dim);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:5px 9px; white-space:nowrap; }
.cc-head { display:flex; align-items:center; gap:12px; margin-top:16px; position:relative; z-index:1; }
.cc-flag { width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; border:1px solid rgba(255,255,255,.16); }
.cc-flag img { width:100%; height:100%; object-fit:cover; display:block; }
.cc-gp { font-family:var(--font-sans); font-size:23px; font-weight:700; letter-spacing:-.01em; color:var(--text); line-height:1.06; }
.cc-circuit { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-top:9px; position:relative; z-index:1; }
.cc-spacer { flex:1 1 auto; min-height:16px; }
.cc-time { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); position:relative; z-index:1; }
.cc-time time { color:var(--text-dim); }
.cal-podium { display:flex; gap:7px; position:relative; z-index:1; }
.pod { flex:0 0 auto; display:flex; align-items:center; gap:6px; background:var(--bg);
  border:1px solid var(--line); border-radius:9px; padding:7px 9px; }
.pod-pos { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.pod-dot { width:9px; height:9px; border-radius:50%; background:var(--tc,#6a6f78); flex:none; }
.pod-tla { font-family:var(--font-mono); font-size:12px; color:var(--text); letter-spacing:.04em; }

/* calendar grid/list view toggle */
.cal-viewtoggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.cal-viewtoggle button { background:var(--bg-2); color:var(--text-faint); border:0; padding:7px 14px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.cal-viewtoggle button.on { background:var(--accent-soft); color:var(--text); }
.cal-views[data-view="grid"] .cal-list { display:none; }
.cal-views[data-view="list"] .cal-grid { display:none; }
/* mobile: list view doesn't earn its keep at this width — grid only, toggle hidden.
   Overrides any saved list-view preference from desktop use. */
@media(max-width:640px){
  .cal-grid { grid-template-columns:1fr; gap:12px; }
  .cal-viewtoggle { display:none; }
  .cal-views[data-view="list"] .cal-grid { display:grid; }
  .cal-views[data-view="list"] .cal-list { display:none; }
}
.cal-pill.win { color:var(--gold); border-color:rgba(233,194,60,.4); }
.tla-row { display:flex; align-items:center; gap:10px; }

/* ============================================================
   Standings page (/standings) — Drivers / Constructors / Ratings
   ============================================================ */
.stand-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.stand-toggle button,.stand-toggle a { display:block; background:var(--bg-2); color:var(--text-faint); border:0; padding:7px 14px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.stand-toggle button.on,.stand-toggle a.on { background:var(--accent-soft); color:var(--text); }

/* Shared sticky sub-nav — a fixed clone of a page's season-bar controls, shown once
   the original scrolls under the header. Used on standings, calendar, results,
   drivers and teams. The inner row wraps to a second line on its own (same
   gap/flex-wrap as .season-bar) whenever the controls don't fit on one line. */
/* DISABLED for now (2026-07-07) — parked pending further design, all markup/JS
   left in place for both PC and mobile. Remove this line alone to re-enable. */
.subnav-sticky { display:none; }
.subnav-sticky { position:fixed; top:71px; left:0; right:0; z-index:45;
  background:rgba(8,8,10,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-soft);
  padding:6px 0; transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease; }
.subnav-sticky.show { transform:translateY(0); opacity:1; pointer-events:auto; }
.subnav-sticky .wrap { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* one panel visible at a time, keyed off the wrapper's data-view */
.stand-views .stand-view { display:none; }
.stand-views[data-view="drivers"] .stand-view[data-view="drivers"],
.stand-views[data-view="constructors"] .stand-view[data-view="constructors"],
.stand-views[data-view="ratings"] .stand-view[data-view="ratings"] { display:block; }

.standings { margin-top:22px; overflow-x:auto; }
.stand-table { width:100%; }
.stand-table td, .stand-table th { white-space:nowrap; }
.stand-table .col-rank { width:34px; font-family:var(--font-mono); color:var(--text); text-align:right; }
.stand-table .col-num { text-align:center; font-variant-numeric:tabular-nums; }
.stand-table .col-tier { text-align:left; }
/* variable-width figures (Pts / Diff / Avg): the column stays centered under its
   header, but the numerals line up right-aligned with each other down the column */
.stand-table .col-pts .fig, .stand-table .col-diff .fig, .stand-table .col-avg .fig, .stand-table .col-rating .fig {
  display:inline-block; text-align:right; font-variant-numeric:tabular-nums; }
.stand-table .col-rating .fig { min-width:3ch; }
/* fixed-width slot so the rating arrow never shifts the right-aligned numbers */
.stand-table .mv-slot { display:inline-block; width:1.5em; margin-left:5px; text-align:left; }
.stand-table .col-rating .mv { margin-left:0; }
.stand-table .col-pts .fig { min-width:3ch; }
.stand-table .col-diff .fig { width:4ch; min-width:4ch; }
.stand-table .col-avg .fig { min-width:4ch; }
/* small-integer columns (Races / Wins / Podiums): block centered under the header,
   but the figures left-aligned with each other down the column */
.stand-table .figl { display:inline-block; text-align:left; font-variant-numeric:tabular-nums; min-width:2ch; }
.stand-table .col-pts b { font-size:15px; font-weight:700; }
.stand-table td.col-diff { color:var(--text-dim); }
/* Diff column: header + numbers right-aligned to the same edge (aligned to each other),
   leader dash centred. Right-alignment (not a centred block) gives the clear right-aligned
   look; the col-num tabular figures keep the digits lined up. */
/* Diff column: the digits sit in a fixed digit-width block (sized to the table's widest
   gap, minus EXCLUDED) that is centred in the column; digits are right-aligned within it so
   their right edges line up, and the minus rides immediately left of the digits (overflowing
   the block for the widest gaps). Leader dash centred. Cell stays centred via .col-num. */
.stand-table .diff-num { display:inline-flex; justify-content:flex-end; font-variant-numeric:tabular-nums; }
.stand-table .diff-dash { display:inline-block; width:100%; text-align:center; }
.stand-table .col-gap { width:100%; padding:0; }
.stand-table td.col-gap ~ td { color:var(--text-dim); }
.stand-table tbody tr:hover { background:var(--panel); }
@media (max-width:640px) {
  .stand-table-priority { min-width:600px; }
  .stand-table-priority thead,
  .stand-table-priority tbody { display:block; width:100%; }
  .stand-table-priority tr { display:grid; align-items:center; }
  .stand-table-priority th,
  .stand-table-priority td { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; padding-left:6px; padding-right:6px; border-bottom:0; }
  .stand-table-priority thead tr { border-bottom:1px solid var(--line); }
  .stand-table-priority tbody tr { border-bottom:1px solid var(--line-soft); }
  .stand-table-priority th { text-overflow:clip; }
  .stand-table-priority .col-rank { width:auto; padding-left:0; padding-right:6px; overflow:visible; text-overflow:clip; }
  .stand-table-priority .col-rank { order:1; }
  .stand-table-priority .col-main { order:2; }
  .stand-table-priority .col-pts { order:3; }
  .stand-table-priority .col-secondary { order:4; }
  .stand-table-priority .col-diff { order:5; }
  .stand-table-priority .col-races { order:6; }
  .stand-table-priority .col-wins { order:7; }
  .stand-table-priority .col-podiums { order:8; }
  .stand-table-priority .col-gap { display:none; }
  .stand-table-priority.stand-table-drivers tr {
    grid-template-columns:34px minmax(132px,1.35fr) 56px minmax(96px,1fr) 54px 52px 44px 62px;
  }
  .stand-table-priority.stand-table-constructors {
    min-width:520px;
  }
  .stand-table-priority.stand-table-constructors tr {
    grid-template-columns:34px minmax(136px,1.2fr) 56px minmax(128px,1fr) 54px 44px;
  }
  .stand-table-priority th.col-diff,
  .stand-table-priority th.col-races,
  .stand-table-priority th.col-wins,
  .stand-table-priority th.col-podiums { font-size:0; letter-spacing:0; }
  .stand-table-priority th.col-diff::after,
  .stand-table-priority th.col-races::after,
  .stand-table-priority th.col-wins::after,
  .stand-table-priority th.col-podiums::after { font-size:10.5px; letter-spacing:.12em; }
  .stand-table-priority th.col-diff::after { content:"DIF"; }
  .stand-table-priority th.col-races::after { content:"RAC"; }
  .stand-table-priority th.col-wins::after { content:"WIN"; }
  .stand-table-priority th.col-podiums::after { content:"POD"; }
}

.stand-driver .nr-flag { height:13px; width:auto; border-radius:2px; margin-right:8px; vertical-align:middle;
  box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.stand-driver, .stand-team { font-weight:600; }
.stand-lineup { color:var(--text-dim); font-weight:300; font-size:13px; }
.dname-short { display:none; }
@media (max-width:480px) {
  /* constructors' Drivers column: surname only, saves width in that scrolling table */
  .dname-full { display:none; }
  .dname-short { display:inline; }
}

.stand-table a.lnk { color:var(--text); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .16s; }
.stand-table a.lnk:hover { border-bottom-color:var(--text-faint); }
.stand-table a.lnk.dim { color:var(--text-dim); }

.reserve-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }

.stand-note { color:var(--text-faint); font-size:12.5px; font-weight:300; margin-top:18px; }

/* rating tiers — relative buckets (no emojis, per the house style) */
.tier { font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); }
.tier-rookie { color:color-mix(in srgb,#f0555c 66%,var(--text-dim)); }
.tier-development { color:color-mix(in srgb,#ff7a00 64%,var(--text-dim)); }
.tier-mid { color:color-mix(in srgb,#f5c518 64%,var(--text-dim)); }
.tier-top { color:color-mix(in srgb,#41d18a 66%,var(--text-dim)); }
.tier-champion { color:color-mix(in srgb,#b98cff 70%,var(--text-dim)); }

/* race-entry: subtle zebra striping for readability */
#entryForm tbody tr:nth-child(even) td { background:rgba(255,255,255,.025); }

/* ============================================================
   Results page (/results) — race classification + podium callout
   ============================================================ */
.page .muted { color:var(--text-dim); }

.res-head { display:flex; align-items:center; gap:16px; margin-top:26px; }
.res-flag { width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; border:1px solid rgba(255,255,255,.16); }
.res-flag img { width:100%; height:100%; object-fit:cover; display:block; }
.res-head-meta { display:flex; flex-direction:column; gap:3px; }
.res-round { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.res-circuit { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.res-date { margin-left:auto; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); white-space:nowrap; }

/* podium callout */
.res-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.res-pod { display:flex; align-items:center; gap:14px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; position:relative; overflow:hidden; }
.res-pod::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tc,#6a6f78); }
.res-pod-1 { border-color:color-mix(in srgb,var(--gold) 50%,transparent); }
.res-pod-2 { border-color:color-mix(in srgb,var(--silver) 48%,transparent); }
.res-pod-3 { border-color:color-mix(in srgb,var(--bronze) 50%,transparent); }
.res-pod-1 .rp-pos { color:var(--gold); }
.res-pod-2 .rp-pos { color:var(--silver); }
.res-pod-3 .rp-pos { color:var(--bronze); }
.rp-pos { font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--text-faint); width:30px; text-align:center; flex:none; line-height:1; }
.rp-body { flex:1; min-width:0; }
.rp-name { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; line-height:1.1; }
.rp-team { color:var(--text-dim); font-size:12.5px; font-weight:300; margin-top:4px; }
.rp-pts { text-align:right; flex:none; }
.rp-pts b { font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.rp-pts span { display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; color:var(--text-faint); margin-top:2px; }

/* classification table extras */
.res-table .col-rank { text-align:center; width:48px; }
.res-table tr.res-out td { color:var(--text-dim); }
.res-status { font-family:var(--font-mono); color:var(--text); }
.fl-badge { display:inline-flex; align-items:center; margin-left:6px; color:#b98cff; vertical-align:middle; }
.fl-badge svg { width:14px; height:14px; }

@media (max-width:720px){ .res-podium { grid-template-columns:1fr; } }

/* completed calendar cards/rows link through to that race's results */
.cal-card.done { cursor:pointer; }
.cal-row { position:relative; }
.cal-row.done { cursor:pointer; }
.card-link { position:absolute; inset:0; z-index:4; }

/* team manager: swap primary <-> secondary livery colours */
.cf-swap { align-self:center; background:var(--bg-2); border:1px solid var(--line); border-radius:6px;
  color:var(--text-dim); cursor:pointer; font-size:14px; line-height:1; padding:5px 8px; }
.cf-swap:hover:not(:disabled) { color:var(--text); border-color:var(--accent); }
.cf-swap:disabled { opacity:.4; cursor:not-allowed; }

/* race entry: fastest-lap column centered under its header, radio in team purple */
.mtable .col-fl { text-align:center; }
.mtable .col-fl input[type=radio] { accent-color:#b98cff; }

/* standings movement arrows (since last race) */
.stand-table .mv { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.02em;
  margin-left:7px; vertical-align:middle; }
.stand-table .mv-up { color:var(--pos); }
.stand-table .mv-down { color:var(--neg); }

/* ---- League Bulletin: extra category tag colours ---- */
.tag.results{background:rgba(65,209,138,.10);color:#68dca0;border-color:rgba(65,209,138,.26)}
.tag.regs{background:rgba(233,194,60,.10);color:#eccb5c;border-color:rgba(233,194,60,.26)}
.tag.champ{background:rgba(21,196,176,.10);color:#4fd8c8;border-color:rgba(21,196,176,.26)}
.tag.general{background:rgba(150,155,164,.12);color:#c3c8d0;border-color:rgba(150,155,164,.26)}
.tag.raceres{background:rgba(139,212,80,.10);color:#a6d95f;border-color:rgba(139,212,80,.26)}
.tag.transfer{background:rgba(224,85,155,.10);color:#ef86c0;border-color:rgba(224,85,155,.26)}

/* ---- Bulletin post form (themed inputs + roomy body) ---- */
.postform{max-width:640px}
.postform label{font-size:13px;color:var(--text-dim);letter-spacing:.01em}
.postform input,.postform textarea{width:100%}
.postform input,.postform select,.postform textarea{
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--text);font-family:var(--font-sans);font-size:15px;
  margin-top:5px;transition:border-color .16s,background .16s}
.postform select{width:auto;min-width:220px;cursor:pointer}
.postform textarea{min-height:190px;line-height:1.55;resize:vertical}
.postform input::placeholder,.postform textarea::placeholder{color:var(--text-faint)}
.postform input:focus,.postform select:focus,.postform textarea:focus{
  outline:none;border-color:var(--accent);background:var(--panel)}

/* ---- Standings charts (drivers + constructors) ------------------------- */
.stand-charts { margin-top:34px; }
.chart-bar-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.chart-section-title { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); font-weight:700; margin:0; }
.chart-layout-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.chart-layout-toggle button { background:var(--bg-2); color:var(--text-faint); border:0; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; }
.chart-layout-toggle button.on { background:var(--accent-soft); color:var(--text); }

.stand-charts-grid { display:flex; flex-direction:column; gap:26px; }
.stand-charts.horizontal .stand-charts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
@media (max-width:900px) {
  .stand-charts.horizontal .stand-charts-grid { grid-template-columns:1fr; }
  /* side-by-side vs stacked render identically once the grid collapses above —
     the toggle would do nothing, so don't show a control that does nothing. */
  .chart-layout-toggle { display:none; }
}

.chart-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 12px; }
.chart-title { font-size:13px; color:var(--text-dim); font-weight:600; margin-bottom:10px; letter-spacing:.02em; }
.chart-wrap { position:relative; width:100%; }
.chart-svg { width:100%; height:auto; display:block; overflow:visible; }

.gridline { stroke:var(--line-soft); stroke-width:1; }
.axlbl { fill:var(--text-faint); font-family:var(--font-mono); font-size:11px; }
.barval { fill:var(--text-dim); font-family:var(--font-mono); font-size:10.5px; }
.barx { fill:var(--text-dim); }
.chart-empty { fill:var(--text-faint); font-family:var(--font-sans); font-size:14px; }

.chart-line { stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart-hit { stroke-width:14; cursor:pointer; }
.series { transition:opacity .18s ease; }
.focusing .series:not(.hot) { opacity:.14; }
.series.hot .chart-line { stroke-width:3; filter:drop-shadow(0 0 4px currentColor); }
.series.hot .chart-end { filter:drop-shadow(0 0 4px currentColor); }

.chart-bar { transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); }
.series.hot .chart-bar:not(.seg-hot) { opacity:.22; }
.chart-bar.seg-hot { filter:drop-shadow(0 0 5px currentColor) brightness(1.08); }

.chart-tip { position:absolute; display:none; pointer-events:none; z-index:5; background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:12px; color:var(--text);
  white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.45); }
.chart-tip b { font-weight:600; }
.chart-tip .tip-v { display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-top:1px; }
.chart-tip .tip-tla { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); }
.end-tla { font-family:var(--font-mono); font-size:11px; font-weight:600; }
.series.hot .end-tla { font-weight:700; }

/* ---- Bottom action bar (export + commissioner buttons) ----------------- */
.page-actions { display:flex; gap:12px; align-items:center; margin-top:28px; flex-wrap:wrap; }
.page-actions .btn-ghost { margin-left:0; }

/* ============================================================
   Drivers gallery (/drivers) + driver profiles (/drivers/:id)
   ============================================================ */

/* --- card gallery --- */
.driver-gallery { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:24px; }
@media (max-width:920px){ .driver-gallery { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:640px){ .driver-gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:400px){ .driver-gallery { grid-template-columns:1fr; } }
.dcard { position:relative; display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; text-decoration:none; color:var(--text); transition:border-color .16s, transform .16s; }
.dcard:hover { border-color:color-mix(in srgb, var(--tc) 55%, var(--line)); transform:translateY(-2px); }
.dcard-strip { display:block; height:4px; background:var(--tc); }
.dcard-top { display:flex; align-items:flex-start; justify-content:space-between; padding:14px 14px 0; }
.dcard-tla { font-family:var(--font-mono); font-weight:600; font-size:29px; line-height:1; color:var(--tc); letter-spacing:.02em; }
.dcard-rating { text-align:right; }
.dcard-rating b { display:block; font-family:var(--font-mono); font-weight:600; font-size:22px; line-height:1; color:var(--text); }
.dcard-rating span { display:block; font-size:9.5px; letter-spacing:.14em; color:var(--text-faint); margin-top:3px; }
.dcard-name { display:flex; align-items:center; gap:8px; padding:14px 14px 0; font-weight:700; font-size:16px; }
.dcard .nr-flag { height:14px; width:auto; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.dcard-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 14px 0; }
.dcard-team { display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); font-size:13px; }
.dcard-strip-line { height:1px; background:var(--line-soft); margin:13px 14px 0; }
.dcard-stats { display:flex; justify-content:space-between; text-align:center; padding:11px 14px 14px; }
.dcard-stats span { display:flex; flex-direction:column; font-size:9.5px; letter-spacing:.06em; color:var(--text-faint); }
.dcard-stats b { font-family:var(--font-mono); font-weight:600; font-size:15px; color:var(--text); margin-bottom:2px; }

/* --- profile hero (bold, no boxes) --- */
.prof-hero { display:flex; justify-content:space-between; align-items:stretch; gap:20px; margin-top:16px;
  border-left:5px solid var(--tc); padding-left:18px; }
.ph-kicker { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.ph-name-row { display:flex; align-items:center; gap:13px; margin-top:6px; }
.ph-flag { height:22px; width:auto; border-radius:3px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.ph-name { font-weight:900; font-size:34px; line-height:1; letter-spacing:-.01em; margin:0; }
.ph-line { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.ph-tla { font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--tc); letter-spacing:.06em; }
.ph-sep { color:#3a3d43; }
.ph-team { display:inline-flex; align-items:center; gap:7px; color:var(--text-dim); font-size:14px; }
.ph-team.dim { color:var(--text-faint); }
.ph-connect { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.ph-connect i { font-style:normal; color:var(--text-faint); margin-right:6px; letter-spacing:.06em; }
.ph-rating { text-align:right; display:flex; flex-direction:column; justify-content:center; }
.ph-rating-l { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.ph-rating-n { font-family:var(--font-mono); font-weight:700; font-size:52px; line-height:.9; color:var(--text); }
.ph-rating .tier { margin-top:2px; font-size:12px; }

/* --- mode toggle (Season / Career) --- */
.mode-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mode-toggle a { background:var(--bg-2); color:var(--text-faint); padding:7px 16px; text-decoration:none;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.mode-toggle a.on { background:var(--accent-soft); color:var(--text); }

/* --- inline stat line --- */
.statline { display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:22px; padding:16px 2px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sl { display:flex; flex-direction:column; }
.sl b { font-family:var(--font-mono); font-weight:700; font-size:21px; color:var(--text); line-height:1; }
.sl span { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-top:6px; }
.sl-suf { font-family:var(--font-sans); font-weight:400; font-size:12px; color:var(--text-faint); margin-left:1px; }

.prof-h2 { font-size:15px; font-weight:600; letter-spacing:.02em; margin:30px 0 12px; color:var(--text); scroll-margin-top:84px; }

/* --- form sparkline --- */
.form-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.form-svg .dot-hit { cursor:pointer; }
.form-svg .dot-vis.hot { stroke:var(--text); stroke-width:2; }
.form-tip { position:absolute; display:none; transform:translate(-50%,-100%); background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; white-space:nowrap;
  pointer-events:none; z-index:6; color:var(--text-dim); box-shadow:0 4px 14px rgba(0,0,0,.45); }
.form-tip b { color:var(--text); font-family:var(--font-mono); margin-right:2px; }
.form-svg { width:100%; height:auto; display:block; }
.form-ax { fill:var(--text-faint); font-size:10px; font-family:var(--font-mono); }
.form-grid { stroke:var(--line); stroke-width:1; }
.form-grid.soft { stroke:var(--line-soft); }
.form-rnd { fill:var(--text-faint); font-size:11px; font-family:var(--font-mono); }

/* --- race history (flags + plain-text result) --- */
.hist-gp { display:flex; align-items:center; gap:9px; font-weight:600; }
.hist-gp .nr-flag { height:13px; width:auto; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.hist-res { font-family:var(--font-mono); font-weight:600; color:var(--text-dim); }
.hist-res-dns, .hist-res-none { color:var(--text-faint); }
.hist-res-p1 { color:var(--gold); }
.hist-res-p2 { color:#cfd3d8; }
.hist-res-p3 { color:#c98a3f; }
@media (max-width:640px) {
  .driver-hist-table { min-width:540px; }
  .driver-hist-table thead,
  .driver-hist-table tbody { display:block; width:100%; }
  .driver-hist-table tr { display:grid; grid-template-columns:44px minmax(132px,1.3fr) 72px minmax(104px,1fr) 48px; align-items:center; }
  .driver-hist-table th,
  .driver-hist-table td { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; padding-left:6px; padding-right:6px; border-bottom:0; }
  .driver-hist-table thead tr { border-bottom:1px solid var(--line); }
  .driver-hist-table tbody tr { border-bottom:1px solid var(--line-soft); }
  .driver-hist-table .col-rank { width:auto; order:1; padding-left:0; padding-right:6px; overflow:visible; text-overflow:clip; }
  .driver-hist-table .col-gp { order:2; }
  .driver-hist-table .hist-gp { display:flex; }
  .driver-hist-table .col-result { order:3; }
  .driver-hist-table .col-team { order:4; }
  .driver-hist-table .col-pts { order:5; }
}

/* --- head-to-head --- */
.h2h2 { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:4px; }
.h2h2-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.h2h2-cap { color:var(--text-dim); font-size:13px; }
.h2h2-cap b { color:var(--text); }
.h2h2-pick { font-size:12px; }
.h2h2-mate { color:var(--text-faint); font-weight:400; font-size:12px; }
.h2h-names { display:flex; justify-content:space-between; margin-bottom:4px; font-weight:700; font-size:15px; }
.h2h-names .right { text-align:right; color:var(--text-dim); }
.h2h-metric { margin-top:14px; }
.h2h-mlabel { text-align:center; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.h2h-mrow { display:flex; align-items:center; gap:14px; }
.h2h-mval { font-family:var(--font-mono); font-weight:700; font-size:22px; color:var(--text); min-width:54px; }
.h2h-mval.left { text-align:right; }
.h2h-mval.right { text-align:left; color:var(--text-dim); }
.h2h-mbar { flex:1; height:12px; border-radius:6px; overflow:hidden; display:flex; background:var(--bg-2); }
.h2h-mbar .a { background:var(--tc); min-width:0; }
.h2h-mbar .b { background:#3a3d43; min-width:0; }
.h2h-note { margin-top:16px; font-size:12px; color:var(--text-faint); text-align:center; }

/* --- teams timeline (career) --- */
.timeline { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.tl-row { display:grid; grid-template-columns:1fr 1.3fr 1fr; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line-soft); }
.tl-row:first-child { border-top:0; }
.tl-season { font-weight:600; }
.tl-team { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.tl-team-one { display:inline-flex; align-items:center; gap:7px; }
.tl-arrow { color:var(--text-faint); }
.tl-fin { text-align:right; color:var(--text-dim); font-size:13px; }

@media (max-width:620px){
  .prof-hero { flex-direction:column; }
  .ph-rating { text-align:left; flex-direction:row; align-items:baseline; gap:12px; margin-top:8px; }
  .h2h2-row { flex-wrap:wrap; }
  .h2h2-name { min-width:70px; }
  .tl-row { grid-template-columns:1fr 1fr; }
  .tl-fin { grid-column:1 / -1; text-align:left; }
}

/* --- teams gallery cards (extends .dcard; wider 2-up grid) --- */
.team-gallery { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:22px; }
@media (max-width:720px){ .team-gallery { grid-template-columns:1fr; } }
/* teams gallery: always-on team-tinted border (Jesper) — softer than the
   .dcard hover tint so hover still visibly intensifies + lifts. */
.tcard { border-color:color-mix(in srgb, var(--tc) 42%, var(--line)); }
.tcard:hover { border-color:color-mix(in srgb, var(--tc) 66%, var(--line)); }

/* inline commissioner-only rivalry-panel control on the home page (item 4) */
.rivset { display:inline-flex; align-items:center; gap:6px; margin-right:14px; }
.rivset-lbl { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.rivset button { font-family:var(--font-mono); font-size:12px; min-width:26px; padding:3px 8px; border-radius:6px; cursor:pointer; background:var(--bg-2); color:var(--text-dim); border:1px solid var(--line-soft); transition:border-color .14s, color .14s; }
.rivset button:hover { color:var(--text); border-color:var(--line); }
.rivset button.on { background:var(--accent-soft); color:#ff6a63; border-color:color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---- emoji picker (poll + bulletin fields) ---- */
.emoji-field { position:relative; display:block; }
.emoji-field > input, .emoji-field > textarea { padding-right:38px; }
.emoji-trig { position:absolute; right:8px; top:11px; width:24px; height:24px; padding:0; border:0; background:transparent; color:var(--text-faint); cursor:pointer; font-size:15px; line-height:1; border-radius:6px; }
.emoji-trig:hover { color:var(--text); background:var(--panel-2); }
.emoji-pop { position:absolute; z-index:60; width:296px; background:#0b0b0e; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.5); display:none; overflow:hidden; }
.emoji-pop.open { display:block; }
.emoji-tabs { display:flex; gap:2px; padding:6px; border-bottom:1px solid var(--line-soft); overflow-x:auto; }
.emoji-tab { flex:none; font-size:11px; padding:4px 8px; border-radius:6px; border:0; background:transparent; color:var(--text-faint); cursor:pointer; white-space:nowrap; }
.emoji-tab.on { background:var(--accent-soft); color:var(--text); }
.emoji-grid { max-height:220px; overflow-y:auto; padding:6px 8px 10px; }
.emoji-sec { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; margin-bottom:2px; }
.emoji-cell { font-size:20px; line-height:1; padding:5px 0; border:0; background:transparent; cursor:pointer; border-radius:6px; }
.emoji-cell:hover { background:var(--panel-2); }
.inline-flag { height:1em; width:auto; vertical-align:-0.14em; margin:0 2px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.emoji-search { width:100%; margin:0 0 8px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); color:var(--text); font-size:13px; box-sizing:border-box; }
.emoji-flags { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; max-height:176px; overflow-y:auto; }
.emoji-flag { border:0; background:transparent; cursor:pointer; padding:3px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.emoji-flag:hover { background:var(--panel-2); }
.emoji-flag img { width:26px; height:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.1); display:block; }


/* ---- home bulletin/poll carousel (item: polls stage 2) ---- */
.bpanel { position:relative; overflow:hidden; border-radius:var(--radius); }
.bpanel-track { display:flex; transition:transform .4s ease; }
.bslide { min-width:100%; box-sizing:border-box; }
.bslide > .news { border-radius:var(--radius); height:100%; }
.bdots { position:absolute; bottom:9px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:3; }
.bdots .bdot { position:relative; width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer; border:0; background:color-mix(in srgb, var(--text-faint) 55%, transparent); }
.bdots .bdot::before { content:""; position:absolute; inset:-7px; border-radius:50%; }
.bdots .bdot.on { background:var(--accent); }

/* poll slide */
.pslide { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:18px 20px 34px; height:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.psl-head { position:relative; margin-bottom:14px; min-height:20px; }
.psl-head .tag { position:absolute; left:0; top:3px; }
.psl-head h3 { font-size:16px; font-weight:600; line-height:1.25; margin:0; text-align:center; padding:0 58px; }
.pvote { display:flex; flex-direction:column; flex:1; }
.pbars { display:flex; align-items:flex-start; gap:14px; flex:1; min-height:210px; }
.pbar { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-start; cursor:default; position:relative; padding:6px 3px 5px; border-radius:9px; border:1px solid transparent; transition:border-color .14s, background .14s; }
.pslide[data-canvote="1"] .pbar { cursor:pointer; }
.pbar-num { font-family:var(--font-mono); font-size:11px; color:var(--text-dim); text-align:center; min-height:30px; line-height:1.15; }
.pbar-num b { display:block; color:var(--text); font-size:13px; }
.pbar-track { width:100%; max-width:48px; height:164px; background:var(--bg-2); border-radius:6px; position:relative; overflow:hidden; }
.pbar-fill { position:absolute; left:0; right:0; bottom:0; height:var(--fill); background:var(--accent); transition:height .5s ease; border-radius:6px 6px 0 0; }
.pbar.picked .pbar-fill { background:color-mix(in srgb, var(--accent) 78%, #fff); }
.pbar-pick:hover { background:color-mix(in srgb, var(--panel-2) 70%, transparent); }
.pbar.picked { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pbar-label { font-size:12px; color:var(--text-dim); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbar.picked .pbar-label { color:var(--text); }
.pbar-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
/* stacked avatars */
.pbar-avs { display:flex; align-items:center; justify-content:center; position:relative; height:24px; outline:none; }
.pav { width:20px; height:20px; border-radius:50%; margin-left:-6px; background:var(--bg-2) center/cover no-repeat; border:1.5px solid var(--panel); font-family:var(--font-mono); font-size:9px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; flex:none; }
.pav:first-child { margin-left:0; }
.pav-more { background:var(--panel-2); color:var(--text-faint); }
.pav-names { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); background:#0b0b0e; border:1px solid var(--line); color:var(--text); font-size:11px; line-height:1.4; padding:6px 9px; border-radius:7px; white-space:normal; width:max-content; max-width:190px; text-align:center; opacity:0; visibility:hidden; transition:opacity .12s; z-index:5; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.pbar-avs:hover .pav-names, .pbar-avs:focus .pav-names, .pbar-avs.show .pav-names { opacity:1; visibility:visible; }
.psl-foot { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pvote-btn { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:7px 16px; border-radius:7px; cursor:pointer; background:var(--accent); color:#fff; border:1px solid var(--accent); }
.pvote-btn:hover { filter:brightness(1.08); }
.psl-note { font-size:12px; }
.psl-meta { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); }
.pslide[data-reveal="0"] .pbar-track { opacity:.5; }
.pbar.you .pbar-label { color:var(--text); font-weight:600; }
.pbar-yourpick { display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--accent) 85%, #fff); margin-top:3px; }
.pvote-clear { background:transparent; color:var(--text-dim); border-color:var(--line); }
.pvote-clear:hover { color:var(--text); filter:none; border-color:var(--text-faint); }
/* mobile poll bars: vertical per-option columns -> horizontal per-option rows.
   Each option becomes its own block: label+result on one line, full-width bar
   underneath (never sharing a row) — repeated per option, stacked in a column. */
@media (max-width:720px){
  .pbars { flex-direction:column; align-items:stretch; gap:14px; min-height:0; }
  .pbar { flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; column-gap:10px; row-gap:6px; padding:6px 4px; }
  .pbar-label { order:1; flex:1 1 auto; min-width:0; text-align:left; }
  .pbar-num { order:2; flex:none; min-height:0; display:flex; gap:5px; align-items:baseline; }
  .pbar-num b { display:inline; }
  .pbar-track { order:3; flex-basis:100%; width:100%; max-width:none; height:18px; }
  .pbar-fill { top:0; bottom:0; left:0; right:auto; height:auto; width:var(--fill); border-radius:6px; transition:width .5s ease; }
  .pbar-avs { order:4; flex-basis:100%; justify-content:flex-start; }
  .pslide { padding-bottom:20px; }
}

.tcard .card-link { z-index:4; }
.tcard .dcard-name { font-size:18px; display:flex; align-items:center; gap:10px; }
.tcard-name-bar { width:5px; height:22px; border-radius:2px; background:var(--tc); flex:none; }
.tcard-drivers { display:flex; flex-direction:row; gap:10px; padding:12px 14px 0; }
.tcard-driver { flex:1 1 0; min-width:0; display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-dim);
  text-decoration:none; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px; padding:8px 10px; }
.tcard a.tcard-driver { position:relative; z-index:5; }
.tcard-driver:hover { color:var(--text); border-color:color-mix(in srgb, var(--tc) 45%, var(--line)); }
.tcard-driver .nr-flag { height:12px; width:auto; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.tcard-driver.vacant { color:var(--text-faint); font-style:italic; justify-content:center; }
.tcard-dname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tcard-dtla { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); flex:none; }
.tcard-tp { text-align:center; padding:11px 14px 0; font-size:13px; color:var(--text-dim); }
.tcard-tp a { position:relative; z-index:5; }
.tcard-tp-cap { display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }

/* two-tone livery swatch (primary | secondary) */
.livery { display:inline-block; width:14px; height:14px; border-radius:3px; flex:none; vertical-align:middle;
  box-sizing:border-box; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(120deg, var(--c1,#6a6f78) 0 50%, var(--c2,#6a6f78) 50% 100%) padding-box; }
.ph-livery { width:20px; height:20px; border-radius:4px; }

/* team profile hero championship line + lineup + per-round results */
.ph-champ { margin-top:4px; font-size:12px; color:var(--text-dim); }
.ph-role { color:var(--text-faint); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; }
.lineup { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.lineup-seat { display:flex; align-items:center; gap:10px; flex:1 1 240px; min-width:0; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--tc,#6a6f78); border-radius:10px; padding:12px 14px; color:var(--text); transition:border-color .16s; }
.lineup-seat:hover { border-color:color-mix(in srgb, var(--tc) 55%, var(--line)); }
.lineup-seat .nr-flag { height:15px; width:auto; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.seat-slot { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); width:14px; flex:none; }
.seat-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-tla { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-left:auto; flex:none; }
.lineup-seat.vacant { color:var(--text-faint); font-style:italic; border-left-color:var(--line); }
.lineup-subs { margin-top:12px; font-size:13px; color:var(--text-dim); }
.tres-gp-in { display:inline-flex; align-items:center; gap:9px; font-weight:600; }
.tres-gp-in .nr-flag { height:13px; width:auto; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.tres-drv { white-space:nowrap; }
.tres-drv .lnk { font-weight:600; }
.tres-drv .fl-badge { margin-left:6px; }
.tres-drv .reserve-tag { margin-left:7px; }
.tres-res { font-family:var(--font-mono); font-weight:600; font-size:12px; display:inline-block; min-width:26px; margin-right:4px; color:var(--text-dim); }
.tres-res.hist-res-p1 { color:var(--gold); }
.tres-res.hist-res-p2 { color:#cfd3d8; }
.tres-res.hist-res-p3 { color:#c98a3f; }
.tres-res.hist-res-dns { color:var(--text-faint); }

/* team profile history timeline */
.thist { display:flex; flex-direction:column; gap:10px; }
.thist-row { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:grid;
  grid-template-columns:1fr; gap:8px; }
.thist-season { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.thist-season .lnk { font-weight:600; font-size:15px; }
.thist-fin { color:var(--text-dim); font-size:13px; }
.thist-id { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.thist-name { font-weight:700; }
.thist-code { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:.06em; }
.thist-line { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-dim); }
.thist-tp .cap { margin-right:5px; }
.thist-drivers { color:var(--text-dim); }
.thist-pts { margin-left:auto; color:var(--text-dim); }
.thist-pts b { font-family:var(--font-mono); font-weight:600; color:var(--text); }
.chg { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(225,6,0,.35); border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.chg-dot { color:var(--pos); font-weight:700; margin-left:3px; }
/* Records: season superlatives + all-time Hall of Fame */
.records-empty { margin-top:24px; }
.records-controls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px; }
.records-mode-toggle a { min-width:112px; text-align:center; }
.records-leaders { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:26px; }
.records-leader { position:relative; overflow:hidden; min-height:190px; padding:22px 24px; border:1px solid var(--line);
  border-radius:14px; background:
  radial-gradient(440px 190px at 100% 0%, color-mix(in srgb,var(--tc) 14%,transparent), transparent 68%),
  linear-gradient(145deg,var(--panel),var(--bg-2)); }
.records-leader::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--tc); opacity:.72; }
.records-leader-kicker,.champion-role { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-faint); }
.records-leader-core { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; margin-top:16px; }
.records-leader-id { min-width:0; }
.records-leader-main { display:flex; align-items:center; gap:12px; }
.records-leader-bar { width:5px; height:32px; flex:none; border-radius:2px; background:var(--tc); box-shadow:0 0 18px color-mix(in srgb,var(--tc) 34%,transparent); }
.records-leader-name { font-size:29px; font-weight:900; letter-spacing:-.015em; line-height:1.05; }
.records-leader-sub { margin:8px 0 0 17px; color:var(--text-dim); font-size:13px; }
.records-leader-points { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; padding-left:18px; border-left:1px solid var(--line-soft); }
.records-leader-points b { color:var(--text); font-family:var(--font-mono); font-size:42px; font-weight:700; line-height:.95; letter-spacing:-.07em; }
.records-leader-points span { margin-top:7px; color:var(--tc); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.18em; }
.records-leader-stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:20px; padding-top:13px; border-top:1px solid var(--line-soft);
  color:var(--text-dim); font-family:var(--font-mono); font-size:11px; }
.records-leader-stats b { color:var(--text); font-weight:700; }
.records-section { margin-top:48px; }
.records-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:17px; }
.records-section-head h2,.hall-hero h2 { margin:5px 0 0; font-size:25px; line-height:1.1; }
.record-group { margin-top:27px; }
.records-section-head+.record-group { margin-top:0; }
.record-group h3 { margin:0 0 10px; color:var(--text-dim); font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; }
.records-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.records-grid.records-grid-team { grid-template-columns:repeat(2,minmax(0,1fr)); }
.records-grid.records-grid-grid { grid-template-columns:minmax(0,1fr); }
.records-grid-grid .record-card { min-height:160px; }
.record-card { position:relative; overflow:hidden; min-height:210px; padding:18px; border:1px solid var(--line);
  border-radius:12px; background:
  radial-gradient(340px 170px at 100% 0%,color-mix(in srgb,var(--tc,#6a6f78) 11%,transparent),transparent 70%),
  linear-gradient(150deg,var(--panel),var(--bg-2)); display:flex; flex-direction:column; }
.record-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--tc,#6a6f78); opacity:.68; }
.record-card-grid { background:
  radial-gradient(340px 170px at 100% 0%,color-mix(in srgb,var(--tc,#6a6f78) 11%,transparent),transparent 70%),
  linear-gradient(150deg,var(--panel),var(--bg-2)); }
.record-card-grid::before { display:none; }
.record-title { color:var(--text-dim); font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  line-height:1.25; text-transform:uppercase; }
.record-value { margin-top:16px; font-family:var(--font-mono); font-size:27px; font-weight:700; letter-spacing:-.045em; color:var(--text); }
.record-value-suffix { margin-left:2px; color:var(--text-faint); font-family:var(--font-sans); font-size:12px; font-weight:400; letter-spacing:0; }
.record-card-grid .record-value { font-size:38px; }
.record-holders { display:flex; flex-direction:column; gap:9px; margin-top:19px; }
.record-holder { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.record-holder>.team-dot { margin-top:8px; flex:none; }
.record-holder-copy { min-width:0; display:flex; flex-direction:column; }
.record-holder-copy .lnk,.record-holder-copy>span { color:var(--text); font-size:21px; font-weight:800; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record-holder-copy small { margin-top:2px; color:var(--text-faint); font-family:var(--font-mono); font-size:9.5px; line-height:1.35; }
.record-description { margin-top:auto; padding-top:14px; color:var(--text-faint); font-size:10.5px; line-height:1.35; }
.records-winner-count { color:var(--text-dim); font-family:var(--font-mono); font-size:11px; white-space:nowrap; }
.records-winner-count b { color:var(--text); font-size:16px; }
.winners-roll { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.winner-row { display:grid; grid-template-columns:minmax(250px,1.4fr) minmax(190px,1fr) minmax(130px,.7fr); align-items:center;
  gap:18px; min-height:58px; padding:10px 16px; border-bottom:1px solid var(--line-soft); box-shadow:inset 2px 0 0 var(--tc); }
.winner-row:last-child { border-bottom:0; }
.winner-race { display:flex; align-items:center; gap:10px; min-width:0; color:var(--text); text-decoration:none; font-weight:600; }
.winner-race:hover { color:var(--accent-soft,#ff625d); }
.winner-race img { width:21px; max-height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.winner-race>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.winner-round { width:28px; flex:none; color:var(--text-faint); font-family:var(--font-mono); font-size:10px; }
.winner-driver { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; }
.winner-team { min-width:0; font-size:12px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.records-charts .stand-charts { margin-top:0; }
.records-chart-views>.stand-view { padding-top:0; }
.records-chart-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin:-4px 0 12px; }
.hall-hero { display:flex; align-items:center; gap:18px; margin-top:30px; padding:20px 0; border-top:1px solid rgba(233,194,60,.22);
  border-bottom:1px solid rgba(233,194,60,.14); }
.hall-rule { width:5px; height:54px; border-radius:3px; background:var(--gold); box-shadow:0 0 24px rgba(233,194,60,.28); }
.hall-hero .eyebrow { color:var(--gold); }
.champions-roll { display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.champion-season { position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--gold) 18%,var(--line));
  border-radius:13px; background:
  radial-gradient(500px 170px at 100% 0%,rgba(233,194,60,.08),transparent 70%),
  linear-gradient(145deg,var(--panel),var(--bg-2)); }
.champion-season-label { padding:10px 16px; border-bottom:1px solid var(--line-soft); color:var(--gold);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.champion-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px 16px; }
.champion-entry { display:flex; flex-direction:column; gap:8px; min-width:0; padding-right:22px; }
.champion-entry+.champion-entry { padding:0 0 0 22px; border-left:1px solid var(--line-soft); }
.champion-name { display:flex; align-items:center; gap:9px; min-width:0; font-size:19px; font-weight:800; }
.champion-stat { color:var(--text-faint); font-family:var(--font-mono); font-size:10.5px; }
.champion-stat b { color:var(--text-dim); }
.hall-records { padding-top:6px; }
.hall-records .record-card { border-color:color-mix(in srgb,var(--tc,#6a6f78) 22%,var(--line)); }
.hall-records .record-card::before { display:none; }

@media (max-width:920px) {
  .records-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .records-controls { align-items:stretch; }
  .records-mode-toggle { width:100%; }
  .records-mode-toggle a { flex:1; min-width:0; }
  .records-leaders { grid-template-columns:1fr; }
  .records-leader { min-height:0; padding:19px 18px; }
  .records-leader-name { font-size:25px; }
  .records-leader-points b { font-size:36px; }
  .records-grid { grid-template-columns:1fr; }
  .records-grid.records-grid-team { grid-template-columns:1fr; }
  .record-card { min-height:190px; }
  .records-section { margin-top:38px; }
  .records-section-head { align-items:flex-start; }
  .records-chart-controls { width:100%; justify-content:flex-start; }
  .records-winners-head { align-items:flex-end; }
  .winner-row { grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; padding:11px 13px; }
  .winner-race { grid-column:1 / -1; }
  .winner-team { display:none; }
  .winner-driver { grid-column:1 / -1; padding-left:38px; }
  .champion-pair { grid-template-columns:1fr; gap:18px; }
  .champion-entry { padding-right:0; }
  .champion-entry+.champion-entry { padding:18px 0 0; border-left:0; border-top:1px solid var(--line-soft); }
}

/* Silly Season admin controls */
.season-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--line-soft);
  border-radius:8px; background:var(--bg-2); }
.season-tools .role-form { margin:0; }
.season-tools label { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.season-tools input[type=datetime-local] { background:var(--bg); border:1px solid var(--line); border-radius:7px; color:var(--text);
  font-family:var(--font-sans); font-size:13px; padding:7px 9px; }

/* Silly Season public page */
.silly-page .lead { max-width:780px; }
.silly-page .btn-ghost { margin-left:0; }
.ss-status { display:grid; grid-template-columns:repeat(4,minmax(104px,1fr)); gap:1px; margin-top:24px; overflow:hidden;
  border:1px solid var(--line); border-radius:8px; background:var(--line-soft); }
.ss-status>div { min-width:0; padding:11px 13px; background:var(--panel); }
.ss-k { display:block; margin-bottom:5px; color:var(--text-faint); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; }
.ss-state-line { display:flex; align-items:baseline; gap:7px; min-width:0; white-space:nowrap; }
.ss-status b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:16px; line-height:1.1; }
.ss-status b.ss-open { color:#66e2a0; text-shadow:0 0 11px rgba(102,226,160,.55); }
.ss-status b.ss-closed { color:#ff625d; text-shadow:0 0 11px rgba(255,98,93,.48); }
.ss-sub { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); font-size:12px; }
.ss-actions-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; }
.ss-signup { min-height:42px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ss-signup form { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0; }
.ss-sign-title { font-weight:700; color:var(--text); }
.ss-signup select { background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:8px 10px;
  font-family:var(--font-sans); }
.ss-offers { margin-top:18px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:8px; background:var(--panel); }
.ss-small-h { margin:0; padding:12px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; font-family:var(--font-mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); }
.ss-offer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid var(--line-soft);
  box-shadow:inset 3px 0 0 var(--tc,#6a6f78); }
.ss-offer:first-of-type { border-top:0; }
.ss-offer form { margin:0; }
.ss-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:18px; align-items:start; margin-top:26px; }
.ss-board,.ss-market { min-width:0; }
.ss-team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ss-team { position:relative; min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--tc) 44%,var(--line)); border-left:5px solid var(--tc);
  border-radius:8px; padding:8px 10px 9px; background:
  linear-gradient(to left,color-mix(in srgb,var(--c2,var(--tc)) 10%,transparent),transparent 42%),
  linear-gradient(115deg,color-mix(in srgb,var(--c1) 8%,transparent),transparent 40%),
  linear-gradient(180deg,var(--panel),var(--bg-2)); }
.ss-team { border-right-color:color-mix(in srgb,var(--c2,var(--tc)) 58%,var(--line)); }
.ss-team::after { content:""; position:absolute; top:0; right:0; bottom:0; width:3px; background:var(--c2,var(--tc)); opacity:.78; }
.ss-team.mine { border-color:color-mix(in srgb,var(--tc) 70%,var(--line)); }
.ss-team.mine { border-right-color:color-mix(in srgb,var(--c2,var(--tc)) 58%,var(--line)); }
.ss-team .card-link { z-index:1; }
.ss-team-top,.ss-team-meta,.ss-team-name,.ss-team-side,.ss-team-tp,.ss-seats { position:relative; z-index:2; }
.ss-team-top { display:grid; grid-template-columns:minmax(72px,1fr) minmax(0,2.2fr) minmax(72px,1fr); align-items:center; gap:8px; min-width:0; }
.ss-team-meta { display:flex; align-items:center; gap:8px; min-width:0; justify-self:start; }
.ss-team-meta .livery { width:16px; height:16px; border-radius:4px; flex:none; }
.ss-team-code { font-family:var(--font-mono); font-size:16.5px; font-weight:850; letter-spacing:.04em; color:var(--tc); line-height:1; }
.ss-team-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:16.5px; font-weight:850;
  letter-spacing:0; text-align:center; }
.ss-team-side { min-width:0; justify-self:end; }
.ss-team-side:empty { visibility:hidden; }
.ss-team-tp { margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); font-size:12.5px; text-align:center; }
.ss-team-tp span:first-child { display:block; color:var(--text-faint); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
  line-height:1.15; text-transform:uppercase; margin-bottom:2px; }
.ss-team-tp a { position:relative; z-index:3; }
.ss-seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:7px; }
.ss-seat { display:grid; grid-template-columns:15px 18px minmax(0,1fr); align-items:center; gap:5px; min-height:28px; padding:4px 6px;
  border:1px solid var(--line-soft); border-radius:7px; background:rgba(0,0,0,.13); color:var(--text); text-decoration:none; }
.ss-seat.open { grid-template-columns:15px minmax(0,1fr) auto; border-style:dashed; color:var(--text-faint); }
.ss-seat.filled:hover { border-color:color-mix(in srgb,var(--tc) 55%,var(--line)); }
.ss-seat-no { color:var(--text-faint); font-family:var(--font-mono); font-size:10px; }
.ss-seat .nr-flag { width:18px; display:flex; align-items:center; justify-content:center; }
.ss-seat .nr-flag img { max-width:18px; max-height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.ss-seat-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:12.5px; }
.ss-seat-tag { color:var(--text-faint); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.ss-market { position:sticky; top:92px; }
.ss-market-list { display:flex; flex-direction:column; gap:7px; }
.ss-market-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; min-height:44px; padding:7px 8px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.ss-market-main { display:flex; align-items:center; gap:8px; min-width:0; }
.ss-market-main .nr-flag { width:auto; height:14px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  border-radius:2px; box-shadow:none; overflow:visible; }
.ss-market-main .nr-flag img { width:auto; height:14px; max-width:22px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.ss-market-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:700; }
.ss-market-row form { margin:0; }
.ss-market-row .btn-ghost { padding:6px 10px; font-size:12px; }
.ss-market-state { font-size:12px; }
/* Silly Season admin page */
.ss-admin-head { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:24px; overflow:hidden;
  border:1px solid var(--line); border-radius:8px; background:var(--line-soft); }
.ss-admin-head>div { min-width:0; padding:12px 14px; background:var(--panel); }
.ss-admin-head b { display:block; color:var(--text); font-size:17px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.ss-admin-window { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; padding:15px 16px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.ss-admin-window b { display:block; color:var(--text); font-size:18px; line-height:1.1; }
.ss-admin-window b.ss-open { color:#66e2a0; text-shadow:0 0 11px rgba(102,226,160,.55); }
.ss-admin-window b.ss-closed { color:#ff625d; text-shadow:0 0 11px rgba(255,98,93,.48); }
.ss-admin-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ss-admin-actions form { margin:0; }
.ss-admin-schedule { margin-top:28px; }
.ss-schedule-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.ss-schedule-form label { min-width:0; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.ss-schedule-form input[type=datetime-local] { display:block; width:100%; margin-top:6px; box-sizing:border-box; background:var(--bg);
  border:1px solid var(--line); border-radius:7px; color:var(--text); padding:8px 9px; }
.ss-schedule-submit { grid-column:1 / -1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px; }

/* TP team customization */
.team-custom { display:grid; grid-template-columns:minmax(250px,.76fr) minmax(0,1.24fr); gap:22px; align-items:start; margin-top:24px; }
.team-custom .btn-ghost { margin-left:0; }
.team-custom-return { margin:12px 0 -6px; color:var(--text-dim); font-size:13px; }
.team-custom-preview { position:sticky; top:92px; min-height:250px; overflow:hidden; border:1px solid color-mix(in srgb,var(--tc) 42%,var(--line));
  border-left:6px solid var(--tc); border-radius:8px; padding:20px; background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 18px),
  linear-gradient(145deg,color-mix(in srgb,var(--c1) 15%,var(--panel)),var(--bg-2)); }
.team-custom-livery { width:36px; height:36px; border-radius:6px; }
.team-custom-code { margin-top:18px; color:var(--tc); font-family:var(--font-mono); font-size:58px; font-weight:800; line-height:.9; letter-spacing:.03em; }
.team-custom-name { margin-top:11px; color:var(--text); font-size:29px; font-weight:900; line-height:1.05; word-break:break-word; }
.team-custom-short { margin-top:7px; color:var(--text-dim); font-size:14px; }
.team-custom-note { margin-top:24px; padding-top:12px; border-top:1px solid var(--line-soft); color:var(--text-faint); font-size:12px; }
.team-custom-form { margin-top:0; max-width:none; }
.team-custom-form .field-row { gap:12px; margin-bottom:14px; }
.team-custom-form .field span:first-child { display:block; margin-bottom:6px; color:var(--text-faint); font-family:var(--font-mono); font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; }
.team-custom-form input[type=text] { width:100%; box-sizing:border-box; }
.team-custom-colors { align-items:stretch; }
.team-custom-colors .field { justify-content:flex-start; min-height:76px; padding:12px; border:1px solid var(--line-soft); border-radius:8px; background:var(--panel); }
.team-custom-colors .colorfield.cf { flex-wrap:nowrap; min-height:28px; }
.team-custom-colors .cf-enable { flex:none; width:34px; }
.team-custom-colors .cf-enable input { width:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.team-custom-colors .cf-enable input:focus { outline:1px solid var(--accent); outline-offset:2px; background:transparent; }
.team-custom-colors .cf-rgb,.team-custom-colors .cf-swatch { flex:none; }
.team-custom-colors .cf-f1 { flex:1 1 216px; min-width:216px; }
.team-custom-colors .cf-f1 input[type=number] { width:66px; box-sizing:border-box; padding:5px 6px; border-radius:6px; font-size:12px; }
.lock-note { margin-left:5px; color:#ff8f8f; font-style:normal; font-size:9px; letter-spacing:.08em; }

@media (max-width:1100px) {
  .ss-layout { grid-template-columns:1fr; }
  .ss-market { position:static; }
}
@media (max-width:760px) {
  .ss-status { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ss-state-line { display:block; white-space:normal; }
  .ss-state-line .ss-sub { margin-top:5px; }
  .ss-admin-head,.ss-admin-grid,.ss-schedule-form { grid-template-columns:1fr; }
  .ss-admin-window { align-items:flex-start; flex-direction:column; }
  .ss-admin-actions { justify-content:flex-start; }
  .ss-team-side .reserve-tag { display:none; }
  .ss-team-grid { grid-template-columns:1fr; }
  .team-custom { grid-template-columns:1fr; }
  .team-custom-preview { position:relative; top:auto; min-height:0; }
  .team-custom-form .field-row { flex-direction:column; }
}
@media (max-width:520px) {
  .ss-actions-row { align-items:stretch; }
  .ss-actions-row>a,.ss-signup,.ss-signup form { width:100%; }
  .ss-signup select,.ss-signup button { flex:1 1 auto; }
  .ss-market-row { grid-template-columns:minmax(0,1fr) auto; }
  .ss-market-row form,.ss-market-state { grid-column:1 / -1; justify-self:start; }
  .ss-market-row .btn-ghost { width:100%; }
  .team-custom-colors .colorfield.cf { flex-wrap:wrap; }
  .team-custom-colors .cf-f1 { flex-basis:100%; min-width:0; }
  .team-custom-code { font-size:46px; }
  .team-custom-name { font-size:24px; }
}