:root { --ink:#11131d; --muted:#a5aaba; --line:#343a4e; --paper:#171a27; --panel:#202533; --panel-deep:#181c29; --blue:#41a7ef; --orange:#ff8b19; --white:#f5f6fb; --red:#df3f53; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--white); font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:14px; }
button,input { font:inherit; }
.site-header { min-height:270px; color:#fff; border-bottom:4px solid var(--orange); background-color:#111321; background-image:url('/assets/turbo-wheelz-hero.png'); background-position:center 45%; background-size:cover; }
.header-inner { min-height:270px; max-width:1420px; margin:auto; display:flex; align-items:flex-start; gap:28px; padding:28px; }
.wordmark { color:#fff; font-weight:900; text-decoration:none; font-size:18px; text-shadow:0 2px 4px #000; }
.brand { align-self:flex-end; flex:1; padding:30px 0 10px; text-shadow:0 3px 6px #000; }
h1,h2,p { margin:0; }
h1 { color:#fff; font-size:clamp(36px,5vw,62px); font-style:italic; font-weight:950; line-height:.92; letter-spacing:0; text-transform:uppercase; }
.brand p { color:#f7d8e7; margin-top:7px; font-size:16px; font-weight:750; text-transform:uppercase; }
.brand .brand-kicker { color:#fff; font-size:12px; letter-spacing:.14em; margin:0 0 8px; }
.enroll-button,.primary-button { background:var(--orange); border:1px solid #ffc060; color:#14131b; font-weight:900; cursor:pointer; padding:10px 16px; border-radius:3px; box-shadow:0 2px 8px #0008; }
main { max-width:1420px; margin:0 auto; padding:24px 28px 56px; }
.series-strip { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); border-top:3px solid var(--blue); background:var(--panel); margin-bottom:26px; }
.series-strip>div { padding:16px 20px; border-right:1px solid var(--line); display:grid; gap:3px; }
.series-strip>div:last-child { border:0; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.1em; }
.series-strip strong { color:#fff; font-size:19px; }
.detail,.section-heading p { color:var(--muted); font-size:12px; }
.class-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 26px; }
.class-tab { border:1px solid var(--line); background:var(--panel-deep); color:#c4cada; cursor:pointer; font-size:12px; font-weight:800; padding:9px 13px; text-transform:uppercase; }
.class-tab:hover { border-color:var(--blue); color:#fff; }
.class-tab.active { background:var(--blue); border-color:#78c7ff; color:#101723; }
.board-section,.rounds-panel,.bonus-panel { background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 20px #05060b33; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
h2 { color:#fff; font-size:21px; margin-top:3px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th { text-align:left; background:var(--panel-deep); color:#adb4c5; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
th,td { padding:12px 13px; border-bottom:1px solid #343a4e; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#2a3040; }
td:first-child { color:var(--orange); font-weight:900; }
.driver-name { color:#fff; font-weight:800; }
.driver-id { color:var(--muted); font-size:12px; }
.muted { color:var(--muted); }
.split-section { display:grid; grid-template-columns:1.05fr 1fr; gap:26px; margin-top:26px; }
.track-list { list-style:none; margin:0; padding:0; }
.track-list li { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid #343a4e; }
.track-list li:last-child { border-bottom:0; }
.track-number { color:var(--blue); font-weight:900; width:28px; }
.track-status { margin-left:auto; font-size:11px; font-weight:900; text-transform:uppercase; }
.status-completed { color:#65d99a; }
.status-active { color:#ffbd45; }
.status-tba { color:#a5aaba; }
.dialog { width:min(480px,calc(100vw - 28px)); padding:0; border:1px solid #626b82; border-radius:4px; background:var(--panel); color:var(--white); box-shadow:0 20px 60px #000b; }
.dialog::backdrop { background:#070912b8; }
.dialog form { padding:22px; }
.dialog-header { display:flex; justify-content:space-between; gap:16px; align-items:start; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:16px; }
.icon-button { border:0; background:transparent; color:#fff; font-size:24px; line-height:20px; cursor:pointer; }
.disclosure,.key-help { color:var(--muted); line-height:1.5; margin:0 0 16px; }
.dialog label { display:grid; gap:6px; font-weight:700; margin:14px 0 4px; }
.dialog input,.dialog select { background:#121622; border:1px solid #626b82; border-radius:3px; color:#fff; padding:10px 11px; width:100%; }
.dialog select[multiple] { min-height:94px; }
.key-actions { display:flex; align-items:center; gap:10px; margin:10px 0 8px; }
.key-create,.key-paste { border:1px solid #58657d; background:#252d3e; color:#dceaff; cursor:pointer; font-size:12px; font-weight:800; padding:8px 10px; text-decoration:none; }
.key-create:hover,.key-paste:hover { border-color:var(--blue); color:#fff; }
.field-status { min-height:18px; font-size:12px; }
.field-status.available { color:#65d99a; }
.field-status.taken,.form-error { color:#ff7786; }
.form-error { min-height:19px; margin:13px 0; }
.primary-button { width:100%; margin-top:4px; }
@media(max-width:760px) { .site-header { min-height:240px; background-position:58% center; } .header-inner { padding:18px 16px; gap:14px; min-height:240px; } .wordmark { font-size:15px; } .brand { padding:22px 0 8px; } .brand h1 { font-size:38px; } .brand p { font-size:12px; } .enroll-button { padding:9px 12px; } main { padding:16px; } .series-strip { grid-template-columns:1fr; } .series-strip>div { border-right:0; border-bottom:1px solid var(--line); } .series-strip>div:last-child { border-bottom:0; } .split-section { grid-template-columns:1fr; gap:16px; } .section-heading { padding:15px; } .board-section,.rounds-panel,.bonus-panel { border-radius:0; } th,td { padding:10px 11px; } .key-actions { align-items:stretch; flex-direction:column; } .key-create,.key-paste { text-align:center; } .table-wrap { max-width:calc(100vw - 34px); } }