:root {
  --accent: #39FF14;
  --bg: #0D1015; --bar: #11151C; --panel: #141922; --panel2: #161B23; --row: #1C222C; --line: var(--line); --line2: #2B3340; --line3: var(--line3);
  --text: #E6E9EF; --text2: #B7BDC8; --muted: #8B93A1; --dim: #5D6573;
  --ours: #39FF14; --pb: #3DDC84; --best: #C08CFF; --slow: #FFC94D; --bad: #FF6B6B; --info: #7CC4FF; --link: #9FD8FF; --drv: #A9D6FF;
  --font: 'Barlow', 'IBM Plex Sans Thai', 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', 'IBM Plex Sans Thai', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; font-variant-numeric: tabular-nums; }
body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
a { color: var(--link); text-decoration: none; } a:hover { color: var(--text); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 16px; } h3 { font-size: 14px; color: var(--text2); }
.cond { font-family: var(--cond); }
.muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: 12px; }
.ours { color: var(--ours); } .t-best { color: var(--best); font-weight: 700; } .t-pb { color: var(--pb); font-weight: 600; } .t-slow { color: var(--slow); } .t-bad { color: var(--bad); } .t-info { color: var(--info); }
.mono { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.right { margin-left: auto; }
.gap16 { gap: 16px; }

/* shell */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 10px 20px; background: var(--bar); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand b { font-family: var(--cond); font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.brand span { font-size: 12px; color: var(--muted); letter-spacing: .05em; }
.evsel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evsel select { background: transparent; border: 0; font-size: 15px; font-weight: 600; padding: 0; max-width: 340px; cursor: pointer; }
.evsel select option { background: var(--panel); }
.evsel small { font-size: 12px; color: var(--muted); }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; }
.dot.on { background: var(--pb); box-shadow: 0 0 6px var(--pb); } .dot.off { background: var(--bad); }
.clock { font-family: var(--cond); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
nav.tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; scrollbar-width: none; position: sticky; top: 57px; z-index: 19; }
nav.tabs a { padding: 11px 13px 9px; font-size: 14px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
nav.tabs a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
nav.tabs a:hover { color: var(--text); }
nav.tabs .sep { width: 1px; background: var(--line2); margin: 10px 6px; flex: none; }
main { padding: 16px 20px 40px; }
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.pagehead h1 { font-size: 20px; }
.pagehead .sub { font-size: 12px; color: var(--muted); }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.panel + .panel { margin-top: 14px; }
.grid > .panel + .panel, .grid > .panel { margin-top: 0; }
.panel > h2, .panel > .ph { margin-bottom: 10px; }
.ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ph h2 { margin: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.kpi .l { font-size: 12px; color: var(--muted); }
.kpi .v { font-family: var(--cond); font-size: 26px; font-weight: 600; line-height: 1.15; }
.kpi .s { font-size: 12px; color: var(--muted); }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 10px; }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--text2); cursor: pointer; font-size: 13px; white-space: nowrap; }
.btn:hover { border-color: var(--line3); color: var(--text); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.pri { border-color: var(--ours); background: rgba(57,255,20,.12); color: var(--text); font-weight: 600; }
.btn.warn { border-color: #6B4F12; background: #2A2110; color: var(--slow); }
.btn.danger { border-color: #6A2A2A; background: #2A1416; color: var(--bad); }
.btn.blue { border-color: #1E4F7A; background: #0F2233; color: var(--info); }
.btn.sm { min-height: 28px; padding: 3px 9px; font-size: 12px; }
.btn.ghost { background: transparent; border-color: transparent; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); cursor: pointer; font-size: 13px; white-space: nowrap; }
.chip.on { border-color: var(--ours); background: rgba(57,255,20,.10); color: var(--text); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); color: var(--muted); padding: 6px 12px; min-height: 32px; cursor: pointer; font-size: 13px; border-right: 1px solid var(--line2); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: rgba(57,255,20,.12); color: var(--text); font-weight: 600; }
.inp, select.inp, textarea.inp { background: var(--bar); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; min-height: 34px; color: var(--text); outline: none; }
.inp:focus { border-color: var(--info); }
.inp.sm { min-height: 28px; padding: 3px 6px; font-size: 13px; }
textarea.inp { min-height: 60px; resize: vertical; line-height: 1.4; }
.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.f .inp { font-size: 14px; }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.check input { width: 18px; height: 18px; accent-color: var(--ours); }

/* tables */
.tw { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
table.t td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t tr.ours td { background: rgba(57,255,20,.04); }
table.t tr.sel td { background: rgba(124,196,255,.08); }
table.t tr.muted td { color: var(--dim); }
table.t td.num, table.t th.num { text-align: right; }
table.t td.c, table.t th.c { text-align: center; }
table.t.edit td { padding: 2px 3px; }
table.t.edit td .cell { width: 100%; min-width: 50px; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 5px 6px; min-height: 30px; color: var(--text); outline: none; }
table.t.edit td .cell:hover { border-color: var(--line2); }
table.t.edit td .cell:focus { border-color: var(--info); background: var(--bar); }
table.t.edit td .cell.num { text-align: right; }
table.t.edit td.ro { padding: 6px 8px; color: var(--text2); }
table.t tfoot td { font-weight: 600; border-top: 1px solid var(--line2); border-bottom: 0; }
.carno { display: inline-block; min-width: 38px; padding: 1px 8px 1px 9px; border-left: 4px solid var(--line3); background: var(--panel2); font-family: var(--cond); font-size: 17px; font-weight: 700; text-align: center; }
.carno.big { font-size: 26px; padding: 3px 12px 3px 12px; border-left-width: 5px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--line2); color: var(--text2); background: var(--panel2); }
.tag.g { color: var(--pb); border-color: #1FA85A; background: #123A24; }
.tag.y { color: var(--slow); border-color: #6B4F12; background: #2A2410; }
.tag.r { color: var(--bad); border-color: #6A2A2A; background: #2A1416; }
.tag.b { color: var(--info); border-color: #1E4F7A; background: #0F2233; }
.tag.p { color: var(--best); border-color: #5B3A8A; background: #22163A; }

/* toasts / modal */
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast div { background: #1A2030; border: 1px solid var(--line2); border-radius: 8px; padding: 10px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.4); font-size: 13px; }
.toast div.err { border-color: #6A2A2A; color: var(--bad); }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow-y: auto; }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 18px 20px; width: min(720px, 100%); }
.modal h2 { margin-bottom: 12px; font-size: 17px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* sub tabs */
.subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.subtabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 14px; cursor: pointer; font-size: 14px; }
.subtabs button.on { color: var(--text); border-bottom-color: var(--info); font-weight: 600; }

/* manual timing */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.mt-car { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mt-tap { width: 100%; min-height: 170px; border-radius: 14px; border: 2px solid var(--ours); background: rgba(57,255,20,.08); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; touch-action: manipulation; user-select: none; }
.mt-tap:active { background: rgba(57,255,20,.25); transform: scale(.995); }
.mt-tap .n { font-family: var(--cond); font-size: 60px; font-weight: 700; line-height: 1; }
.mt-tap .r { font-family: var(--cond); font-size: 30px; font-weight: 600; }
.mt-tap.flash { animation: flash .35s ease-out; }
@keyframes flash { from { background: rgba(57,255,20,.45); } to { background: rgba(57,255,20,.08); } }
.mt-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mt-btns .btn { min-height: 48px; font-size: 14px; }
.mt-laps { max-height: 260px; overflow-y: auto; }

/* setup sheet */
.ss { overflow-x: auto; }
.ss-in { min-width: max-content; }
.ss-row { display: flex; gap: 22px; align-items: center; padding: 5px 0; }
.ss-row.grp { padding: 14px 0 4px; font-size: 12px; font-weight: 700; color: var(--info); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.ss-lab { width: 160px; flex: none; display: flex; flex-direction: column; position: sticky; left: 0; background: var(--panel); z-index: 2; padding: 2px 0; }
.ss-lab b { font-weight: 500; font-size: 13.5px; } .ss-lab span { font-size: 11px; color: var(--muted); }
.ss-col { width: 172px; flex: none; display: flex; justify-content: center; }
.ss-head { position: sticky; top: 0; background: var(--panel); z-index: 3; border-bottom: 1px solid var(--line2); padding: 8px 0; align-items: flex-start; }
.ss-head .ss-col { flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ss-x { display: grid; grid-template-columns: 1fr 1fr; width: 150px; }
.ss .ss-x input.v:nth-child(1) { border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); }
.ss .ss-x input.v:nth-child(2) { border-bottom: 1.5px solid var(--dim); }
.ss .ss-x input.v:nth-child(3) { border-right: 1.5px solid var(--dim); }
.ss-fr { display: grid; grid-template-columns: 22px 1fr; width: 150px; border-right: 1.5px solid var(--dim); }
.ss-fr span { font-size: 12px; color: var(--muted); display: flex; align-items: center; padding-left: 3px; }
.ss .ss-fr > :nth-child(1), .ss .ss-fr > input.v:nth-child(2) { border-bottom: 1.5px solid var(--dim); }
.ss-one { display: flex; align-items: flex-end; gap: 6px; width: 150px; }
.ss-one input { border-bottom: 1.5px solid var(--dim) !important; }
.ss input.v { width: 100%; height: 30px; background: transparent; border: 0; text-align: center; font-size: 15px; color: var(--text); outline: none; padding: 0 2px; min-width: 0; }
.ss input.v:focus { background: rgba(124,196,255,.12); }
.ss input.v:disabled { color: var(--text); opacity: 1; -webkit-text-fill-color: var(--text); }
.ss input.v.chg { color: var(--slow); font-weight: 700; background: rgba(255,201,77,.10); -webkit-text-fill-color: var(--slow); }
.ss input.v.bad { color: var(--bad); font-weight: 700; background: rgba(255,107,107,.14); -webkit-text-fill-color: var(--bad); }
.ss .open { background: rgba(255,201,77,.05); border-radius: 4px; outline: 1px dashed #4A4020; outline-offset: 3px; }
.ss .chk { background: rgba(124,196,255,.07); border-radius: 4px; }
.ss textarea { width: 160px; min-height: 64px; background: var(--bar); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; font-size: 13px; color: var(--text); resize: vertical; }
.ss .note { font-size: 11.5px; color: var(--muted); margin-top: 3px; text-align: center; }

/* tyre pressure 2x2 */
.p4 { display: grid; grid-template-columns: 1fr 1fr; width: 116px; }
.p4 input { width: 100%; height: 26px; border: 0; background: transparent; text-align: center; color: var(--text); font-size: 13.5px; outline: none; min-width: 0; padding: 0; }
.p4 input:focus { background: rgba(124,196,255,.12); }
.p4 input:nth-child(1) { border-right: 1px solid var(--dim); border-bottom: 1px solid var(--dim); }
.p4 input:nth-child(2) { border-bottom: 1px solid var(--dim); }
.p4 input:nth-child(3) { border-right: 1px solid var(--dim); }

/* strategy live cards */
.cards { position: relative; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow: hidden; display: flex; flex-direction: column; }
.card .ch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 6px; }
.card .ch .grip { cursor: grab; color: var(--dim); }
.card.editing { outline: 1px dashed var(--info); }
.card .rs { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); }
.big { font-family: var(--cond); font-size: 38px; font-weight: 600; line-height: 1.05; }

/* race control */
.rc { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.rc div { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; background: var(--panel2); border-radius: 6px; font-size: 13px; border-left: 3px solid var(--line3); }
.rc div.ours { border-left-color: var(--ours); }
.rc div.warn { border-left-color: var(--slow); }
.rc div.pen { border-left-color: var(--bad); }

/* bars */
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ours); }

/* print */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  :root { --bg: #fff; --panel: #fff; --panel2: #fff; --bar: #fff; --text: #000; --text2: #222; --muted: #555; --dim: #777; --line: #ccc; --line2: #999; --line3: #777; --ours: #0a7a00; --pb: #0a7a00; --best: #6a1fb0; --slow: #a06a00; --bad: #b00000; --info: #0b4f8a; --link: #000; --drv: #0b4f8a; color-scheme: light; }
  html, body { background: #fff; color: #000; font-size: 11px; }
  .top, nav.tabs, .no-print, .toast, .btn, .chip, .seg { display: none !important; }
  .print-only { display: block; }
  main { padding: 0; }
  .panel { border: 0; padding: 0; }
  .kpi, tr, .ss-row { break-inside: avoid; }
  ::placeholder { color: transparent !important; }
  table.t th { background: #fff; }
  .ss .open, .ss .chk { outline: 0; background: none; }
  .ss input.v.chg { background: #fff2cc; } .ss input.v.bad { background: #ffd6d6; }
  .tw, .ss { overflow: visible; }
  .ss-lab, .ss-head, table.t th, nav.tabs, .top { position: static !important; }
  .ss-in { zoom: .82; }
  .ss .ss-x input.v, .ss .ss-fr input.v, .ss textarea { color: #000; -webkit-text-fill-color: #000; }
}
.print-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
.print-head b { font-family: var(--cond); font-size: 20px; letter-spacing: .06em; }
.print-head img { max-height: 36px; }

@media (max-width: 760px) {
  .top { gap: 10px; padding: 8px 12px; position: relative; }
  nav.tabs { top: 0; position: relative; }
  main { padding: 12px 12px 40px; }
  .g2 { grid-template-columns: 1fr; }
}

/* logo slot */
.logo-slot { position: relative; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line2); border-radius: 8px; background: var(--panel2); overflow: hidden; flex: none; }
.logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.logo-slot-btns { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(13,16,21,.75); opacity: 0; transition: opacity .15s; }
.logo-slot:hover .logo-slot-btns, .logo-slot:focus-within .logo-slot-btns { opacity: 1; }
.logo-slot:has(img) { border-style: solid; border-color: var(--line); }
.brand img { display: block; }

/* timeline */
.tl { overflow-x: auto; }
.tl-row { display: flex; gap: 10px; align-items: stretch; min-width: 1100px; }
.tl-row + .tl-row { border-top: 1px solid var(--line); }
.tl-day { width: 110px; flex: none; display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 6px 0; font-size: 13px; }
.tl-track { position: relative; flex: 1; }
.tl-head .tl-track { height: 20px; }
.tl-hour { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-item { position: absolute; border: 1px solid; border-radius: 5px; padding: 2px 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; white-space: nowrap; font-size: 11.5px; }
.tl-item b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tl-item span { overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.tl-item.adm { font-size: 10.5px; padding: 0 5px; opacity: .8; }
.tl-item.run { box-shadow: 0 0 0 2px var(--ours); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ours); box-shadow: 0 0 6px var(--ours); }
@media print { .tl-item { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .logo-slot { border: 0; } }

/* splash */
#splash { position: fixed; inset: 0; z-index: 200; background: #0A0B0E; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .45s ease; }
#splash.hide { opacity: 0; pointer-events: none; }
#splash img { max-width: min(420px, 70vw); max-height: 40vh; animation: splash-in .7s ease-out both; }
#splash .wm { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 64px; letter-spacing: .08em; color: #E6E9EF; animation: splash-in .7s ease-out both; }
#splash .sub { font-family: 'JetBrains Mono', 'IBM Plex Mono', Consolas, monospace; font-size: 12px; letter-spacing: 3px; color: #9AA0AA; margin-top: 16px; animation: splash-in .7s .3s ease-out both; }
#splash .bar { width: 180px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
#splash .bar i { display: block; height: 100%; width: 40%; background: #39FF14; box-shadow: 0 0 8px #39FF14; animation: splash-bar 1.1s ease-in-out infinite; }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(57,255,20,.06), transparent 60%), var(--bg); }
.login { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.login .btn.pri { min-height: 44px; font-size: 15px; }
.login .inp { min-height: 42px; font-size: 15px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.login-brand img { max-width: 260px; max-height: 90px; }
.login-brand b { font-family: var(--cond); font-weight: 700; font-size: 44px; letter-spacing: .08em; }
.login-brand span { font-size: 12px; letter-spacing: .35em; color: var(--muted); }

/* season timeline */
.season-scroll { overflow-x: auto; }
.season-in { min-width: 1000px; }
.season-months { position: relative; height: 20px; }
.season-months span { position: absolute; font-size: 12px; color: var(--muted); padding-left: 6px; }
.season-track { position: relative; border-top: 1px solid var(--line); }
.season-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.season-ev { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; padding: 2px 8px; border-radius: 6px; border: 1px solid #1E4F7A; background: #0F2A44; color: #CFE8FF; cursor: pointer; overflow: hidden; white-space: nowrap; text-align: left; line-height: 1.15; }
.season-ev b { font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.season-ev span { font-size: 11px; color: var(--info); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.season-ev.past { opacity: .55; }
.season-ev.sel { border-color: var(--ours); background: rgba(57,255,20,.12); color: var(--text); box-shadow: 0 0 0 1px var(--ours); }
.season-ev.sel span { color: var(--ours); }
.season-ev:hover { border-color: var(--info); }
.season-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ours); box-shadow: 0 0 6px var(--ours); }
@media print { .season-ev { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* event cards */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 10px; }
.ev-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--line3); border-radius: 10px; cursor: pointer; }
.ev-card:hover { border-color: var(--line3); }
.ev-card.ph-pre { border-left-color: var(--slow); } .ev-card.ph-live { border-left-color: var(--ours); } .ev-card.ph-post { border-left-color: var(--dim); opacity: .85; }
.ev-logo { width: 56px; height: 56px; flex: none; border-radius: 8px; background: var(--bar); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ev-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ev-logo span { font-family: var(--cond); font-size: 26px; font-weight: 700; color: var(--muted); }
.ev-name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-seg button { font-weight: 600; letter-spacing: .03em; }
@media (max-width: 760px) { .ev-cards { grid-template-columns: 1fr; } }

.brand { display: flex; align-items: center; }

/* ── smart watch (Galaxy Watch, round) · #/watch ── */
.w-wrap { min-height: 100vh; padding: 13vh 11vw 16vh; display: flex; flex-direction: column; gap: 8px; align-items: stretch; background: #000; }
.w-title { background: none; border: 0; color: var(--text); font: 600 14px/1.2 var(--cond); text-align: center; padding: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-clock { text-align: center; font: 600 13px var(--cond); color: var(--dim); margin-top: -4px; }
.w-q { color: var(--bad, #EF4444); }
.w-empty { text-align: center; color: var(--dim); font-size: 13px; padding: 20px 0; }
.w-car { display: flex; flex-direction: column; gap: 5px; }
.w-tap { border: 2px solid var(--ours); border-radius: 22px; background: rgba(57,255,20,.1); color: var(--text); min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.w-tap:active { background: rgba(57,255,20,.35); }
.w-tap.flash { animation: wflash .35s ease-out; }
.w-tap.pit { border-color: #EAB308; background: rgba(234,179,8,.12); }
@keyframes wflash { from { background: rgba(57,255,20,.6); } to { background: rgba(57,255,20,.1); } }
.w-no { font: 700 44px/1 var(--cond); color: var(--ours); }
.w-run { font: 600 18px/1.1 var(--cond); }
.w-last { font: 500 13px/1.1 var(--cond); color: var(--dim); }
.w-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.w-btns button { height: 38px; border-radius: 19px; border: 1px solid var(--line3); background: var(--panel2); color: var(--text); font: 600 15px var(--cond); }
.w-btns button.on { background: #EAB308; color: #000; border-color: #EAB308; }
.w-btns button:disabled { opacity: .35; }
.w-list { display: flex; flex-direction: column; gap: 6px; }
.w-sess { background: var(--panel2); border: 1px solid var(--line3); color: var(--text); border-radius: 16px; padding: 10px 12px; font: 500 14px var(--cond); text-align: left; }
.w-sess.on { border-color: var(--ours); }
@media (max-width: 320px) {
  .login-wrap { padding: 12vh 9vw; align-items: flex-start; }
  .login { padding: 10px; gap: 8px; width: 100%; background: transparent; border: 0; }
  .login-brand svg { width: 100% !important; height: auto !important; }
  .login-brand span { font-size: 10px; }
  .login .seg button { font-size: 11px; }
}
.trk3 { position: relative; }
.trk3-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; opacity: .55; transition: opacity .15s; }
.trk3:hover .trk3-tools, .trk3-tools:focus-within { opacity: 1; }
.trk3-tools button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line3); background: var(--panel2); color: var(--text); font-size: 15px; cursor: pointer; }
.trk3-tools button:hover { border-color: #5B6475; }

/* Lap Database */
.ldb { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.ldb-list { max-height: calc(100vh - 210px); overflow: auto; padding: 8px; }
.ldb-day { font: 600 12px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 10px 8px 4px; }
.ldb-item { display: grid; grid-template-columns: 82px 1fr; gap: 0 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; color: var(--text); cursor: pointer; }
.ldb-item:hover { background: rgba(255,255,255,.03); }
.ldb-item.on { border-color: var(--pb); background: rgba(57,255,20,.06); }
.ldb-item .ldb-t { font: 600 13px var(--cond); color: var(--dim); grid-row: span 2; }
.ldb-item .ldb-n { font-weight: 600; font-size: 14px; }
.t-fast { color: #A855F7; font-weight: 700; }
table.t tr.click { cursor: pointer; }
table.t tr.sel td { background: rgba(57,255,20,.07); }
@media (max-width: 900px) { .ldb { grid-template-columns: 1fr; } .ldb-list { max-height: 320px; } }

/* 5-part navigation */
nav.sections { display: flex; gap: 6px; padding: 8px 14px 0; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; position: sticky; top: 57px; z-index: 20; }
nav.sections a { padding: 9px 16px 10px; font: 600 15px var(--cond); letter-spacing: .02em; color: var(--muted); white-space: nowrap; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; }
nav.sections a:hover { color: var(--text); }
nav.sections a.on { color: var(--text); background: var(--panel, var(--panel)); border-color: var(--line); box-shadow: inset 0 2px 0 var(--accent); }
nav.sections a.lib { margin-left: auto; font-weight: 500; }
nav.sections + nav.tabs { top: 101px; background: var(--panel, var(--panel)); }
@media (max-width: 900px) { nav.sections { top: 0; position: relative; } nav.sections + nav.tabs { top: 0; } }

/* Report */
.rp-opts { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.4fr) minmax(220px, 1fr); gap: 24px; align-items: start; }
.rp-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.rp-h { margin: 4px 0 6px; font: 600 15px var(--cond); letter-spacing: .02em; }
.rp-chg { background: rgba(255, 201, 77, .14); font-weight: 600; }
table.rp-laps td { padding-top: 3px; padding-bottom: 3px; }
@media (max-width: 1000px) { .rp-opts { grid-template-columns: 1fr; } }
@media print { nav.sections { display: none !important; } .rp-sess { break-before: auto; } .rp-chg { background: #fff2cc; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.ldb-grp { margin-bottom: 6px; }
.ldb-ev { display: grid; grid-template-columns: 18px 1fr; gap: 0 6px; width: 100%; text-align: left; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer; }
.ldb-ev .ldb-car { grid-row: span 2; color: var(--dim); }
.ldb-ev .ldb-evn { font: 700 15px var(--cond); letter-spacing: .02em; }
.ldb-grp .ldb-day { padding-left: 26px; }
.ldb-grp .ldb-item { margin-left: 12px; width: calc(100% - 12px); }

/* session alarm */
.alarm-stack { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; width: min(520px, calc(100vw - 32px)); }
.alarm { background: #2A2108; border: 2px solid #EAB308; border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: grid; gap: 4px; animation: alarmIn .25s ease-out; }
.alarm-t { font: 700 22px var(--cond); color: #FFC94D; }
.alarm-n { font: 700 18px var(--cond); }
.alarm .btn { justify-self: end; margin-top: 6px; }
@keyframes alarmIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.w-wrap ~ .alarm-stack { top: 8vh; width: 84vw; }
.w-wrap ~ .alarm-stack .alarm-t { font-size: 18px; }
@media print { .alarm-stack { display: none; } }


/* ── colour themes (⚙ บัญชี → ธีมสี) ── */
:root[data-theme="graphite"] { --accent: #E6E9EF; --bg: #1A1C20; --bar: #1F2226; --panel: #24272C; --panel2: #292C32; --row: #30343A; --line: #363A41; --line2: #444952; --line3: #575D67; --text: #EDEEF0; --text2: #C3C7CD; --muted: #9AA0A8; --dim: #6E747D; }
:root[data-theme="midnight"] { --accent: #7CC4FF; --bg: #040507; --bar: #07090C; --panel: #0B0D11; --panel2: #0E1116; --row: #13171D; --line: #181C23; --line2: #222831; --line3: #2E3541; --text: #E2E6EC; --text2: #AEB5C0; --muted: #7C8492; --dim: #525A67; }
:root[data-theme="ocean"] { --accent: #4FC3F7; --bg: #07121D; --bar: #0A1825; --panel: #0D1C2B; --panel2: #102233; --row: #15293D; --line: #1A3048; --line2: #23405E; --line3: #2F5479; --text: #E3F0FA; --text2: #B4CFE3; --muted: #86A8C2; --dim: #587A94; --link: #7FD3FF; --info: #6FCBFF; }
:root[data-theme="sakura"] { --accent: #FF7EB6; --bg: #170D14; --bar: #1C1018; --panel: #22131D; --panel2: #281722; --row: #311C2A; --line: #3A2232; --line2: #4A2D41; --line3: #5F3B54; --text: #F8EAF2; --text2: #DDBFD0; --muted: #BE92AC; --dim: #8A657B; --link: #FFB3D6; --best: #D9A2FF; }
:root[data-theme="paper"] { --accent: #1E9E0F; --bg: #F3F4F6; --bar: #FFFFFF; --panel: #FFFFFF; --panel2: #F7F8FA; --row: #EEF0F3; --line: #E1E4E9; --line2: #CDD2D9; --line3: #B3BAC4;
  --text: #14171C; --text2: #39404A; --muted: #5D6573; --dim: #8A919C;
  --ours: #189A0C; --pb: #128A45; --best: #7B3FD6; --slow: #B7790B; --bad: #D33A3A; --info: #1C6FB8; --link: #155FA0; --drv: #1C6FB8; color-scheme: light; }
:root[data-theme="blossom"] { --accent: #FF3D8B; --bg: #FFF0F6; --bar: #FFFFFF; --panel: #FFFFFF; --panel2: #FFF5FA; --row: #FFE6F1; --line: #FFD3E6; --line2: #FFB3D3; --line3: #F28DBA;
  --text: #3A1027; --text2: #6B2A4C; --muted: #9A5679; --dim: #C08AA6;
  --ours: #E0157A; --pb: #12965A; --best: #8A3FFC; --slow: #C07A00; --bad: #E02D3C; --info: #D61F7D; --link: #D61F7D; --drv: #B0186A; color-scheme: light; }
:root[data-theme="sky"] { --accent: #0EA5FF; --bg: #EEF8FF; --bar: #FFFFFF; --panel: #FFFFFF; --panel2: #F4FAFF; --row: #E2F2FF; --line: #CDE8FC; --line2: #A8D6F8; --line3: #7BBEF0;
  --text: #0B2540; --text2: #23476B; --muted: #4E7196; --dim: #86A5C2;
  --ours: #0A84E0; --pb: #0E9F5C; --best: #7A3CF0; --slow: #B97400; --bad: #E0353F; --info: #0A84E0; --link: #0A7AD1; --drv: #0A6FBF; color-scheme: light; }
:root[data-theme="blossom"] .carno, :root[data-theme="sky"] .carno { color: inherit; }
:root[data-theme="paper"] .alarm, :root[data-theme="blossom"] .alarm, :root[data-theme="sky"] .alarm { background: #FFF6DB; }
:root[data-theme="blossom"] .alarm-t, :root[data-theme="sky"] .alarm-t { color: #9A6400; }
:root[data-theme="blossom"] .w-wrap, :root[data-theme="sky"] .w-wrap { background: #fff; }
:root[data-theme="blossom"] nav.sections a.on { background: linear-gradient(180deg, #FFE1EE, #FFFFFF); }
:root[data-theme="sky"] nav.sections a.on { background: linear-gradient(180deg, #DDF1FF, #FFFFFF); }
:root[data-theme="paper"] .alarm { background: #FFF6DB; }
:root[data-theme="paper"] .alarm-t { color: #9A6400; }
:root[data-theme="paper"] .w-wrap { background: #fff; }
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-pick button { border: 2px solid var(--line2); border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; background: none; color: var(--text); text-align: left; }
.theme-pick button.on { border-color: var(--accent); }
.theme-pick .sw { display: flex; height: 38px; }
.theme-pick .sw i { flex: 1; }
.theme-pick .nm { display: block; padding: 6px 8px; font: 600 13px var(--cond); background: var(--panel2); }
/* bright themes: buttons / chips follow the theme colour */
:root[data-theme="blossom"] .btn.pri, :root[data-theme="blossom"] .chip.on { border-color: #FF3D8B; background: #FFE1EE; }
:root[data-theme="blossom"] .seg button.on { background: #FFE1EE; }
:root[data-theme="sky"] .btn.pri, :root[data-theme="sky"] .chip.on { border-color: #0EA5FF; background: #DDF1FF; }
:root[data-theme="sky"] .seg button.on { background: #DDF1FF; }
:root[data-theme="sakura"] .btn.pri, :root[data-theme="sakura"] .chip.on { border-color: #FF7EB6; background: rgba(255,126,182,.14); }
:root[data-theme="sakura"] .seg button.on { background: rgba(255,126,182,.16); }
:root[data-theme="ocean"] .btn.pri, :root[data-theme="ocean"] .chip.on { border-color: #4FC3F7; background: rgba(79,195,247,.14); }
:root[data-theme="ocean"] .seg button.on { background: rgba(79,195,247,.16); }
.mt-drv { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mt-drv select { flex: 1; }
/* track status (Manual Timing) */
.mt-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.mt-flags-l { font: 700 13px var(--cond); letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
.mt-flags button { --fc: #16A34A; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 2px solid var(--fc); background: transparent; color: var(--text); font: 700 15px var(--cond); letter-spacing: .04em; cursor: pointer; }
.mt-flags button.on { background: var(--fc); color: #000; }
.mt-flags-log { margin-left: auto; color: var(--muted); }
.mt-flags.flag-R { border-color: #DC2626; background: rgba(220,38,38,.18); animation: redpulse 1.2s ease-in-out infinite; }
.mt-flags.flag-SC, .mt-flags.flag-FCY { border-color: #F59E0B; background: rgba(245,158,11,.14); }
.mt-flags.flag-Y { border-color: #EAB308; background: rgba(234,179,8,.12); }
@keyframes redpulse { 50% { background: rgba(220,38,38,.34); } }

/* ── Live ── */
nav.sections a[href="#/live"] { color: #FF4D4D; }
nav.sections a[href="#/live"].on { color: inherit; }
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 8px solid var(--fc); background: var(--panel); }
.lv-flag { font: 800 18px var(--cond); letter-spacing: .08em; padding: 4px 12px; border-radius: 8px; background: var(--fc); color: #000; }
.lv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lv-card { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); cursor: pointer; transition: background .4s; }
.lv-card.fresh { background: var(--row); border-color: var(--accent); }
.lv-card.pit { border-color: #EAB308; }
.lv-c1 { display: flex; align-items: center; gap: 10px; }
.lv-no { font: 800 30px var(--cond); line-height: 1; color: var(--accent); }
.lv-p { font: 700 20px var(--cond); }
.lv-c2 { display: flex; align-items: baseline; gap: 6px; font: 700 28px var(--mono, var(--cond)); font-variant-numeric: tabular-nums; }
.lv-c2 small { font: 500 12px var(--sans, inherit); color: var(--muted); }
.lv-c3 { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; }
.lv-t td { font-variant-numeric: tabular-nums; }
.lv-t .lv-pos { font: 700 16px var(--cond); color: var(--muted); }
.lv-t tr.lv-fav td { background: rgba(255,255,255,.035); }

.lv-t tr.lv-fresh td { animation: lvfresh 2.5s ease-out; }
@keyframes lvfresh { from { background: rgba(124,196,255,.22); } to { background: transparent; } }
.lv-star { background: none; border: 0; cursor: pointer; font-size: 17px; color: var(--dim); padding: 2px 4px; min-width: 30px; min-height: 30px; }
.lv-star.on { color: #FACC15; }
.lv-name { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-top { display: grid; gap: 12px; }
.lv-top.map { grid-template-columns: minmax(340px, 560px) 1fr; align-items: stretch; }
.lv-top.map .lv-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 900px) { .lv-top.map { grid-template-columns: 1fr; } }
.lv-map { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.lv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.lv-clk { display: inline-flex; flex-direction: column; line-height: 1.05; }
.lv-clk small { font-size: 11px; color: var(--muted); }
.lv-clk b { font: 700 24px var(--cond); font-variant-numeric: tabular-nums; }
.lv-rem { background: none; border: 1px dashed var(--line2); border-radius: 10px; padding: 4px 10px; color: var(--text); cursor: pointer; text-align: left; }
.lv-bar .kpi { padding: 4px 10px; min-height: 0; }
.lv-arr { font: 700 11px var(--cond); margin-left: 4px; vertical-align: 2px; }
.lv-arr.up { color: #22C55E; } .lv-arr.dn { color: #EF4444; }
.lv-cls { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--cc); color: var(--cc); white-space: nowrap; }
.lv-t tr.lv-fav td b.cond { color: var(--accent); }

.lv-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lv-bs { padding: 12px; flex: 1; min-width: 0; }
.lv-bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 620px), 1fr)); gap: 10px; }
.lv-bs-t { width: 100%; }
@media (max-width: 600px) { .lv-bs-grid { grid-template-columns: 1fr; } }
.lv-bs-cls { border: 1px solid var(--line); border-top: 3px solid var(--cc); border-radius: 10px; overflow-x: auto; }
.lv-bs-h { padding: 6px 10px; font: 700 14px var(--cond); letter-spacing: .04em; color: var(--cc); }
.lv-bs-t { font-size: 12.5px; }
.lv-bs-t th, .lv-bs-t td { padding: 4px 8px; white-space: nowrap; }
.lv-bs-t td b.cond { font-size: 14px; }
.lv-bs-t td.lv-bs-fav b.cond { color: var(--accent); }
/* compact Live top: the timing table starts higher */
.lv.col.gap16 { gap: 10px; }
.lv .pagehead { margin: 0; }
.lv .pagehead h1 { font-size: 22px; margin: 0; }
.lv-bar { padding: 6px 12px; gap: 6px 16px; }
.lv-bar .kpi { padding: 2px 10px; }
.lv-bar .kpi .v { font-size: 18px; }
.lv-bar .kpi .s { display: none; }
.lv-clk b { font-size: 20px; }
.lv-rem { padding: 2px 10px; }
.lv-top.map { grid-template-columns: minmax(300px, 440px) 1fr; }
.lv-map { padding: 8px 10px; gap: 4px; }
.lv-map .trk3-tools { top: 4px; }
.lv-mh { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.lv-mh .btn { min-height: 0; padding: 0 6px; }
.lv-side { gap: 8px; max-height: 330px; }
.lv-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 8px; }
.lv-card { padding: 7px 10px; gap: 2px; }
.lv-no { font-size: 24px; } .lv-p { font-size: 16px; }
.lv-c2 { font-size: 21px; }
.lv-c3 { font-size: 12px; }
.lv-bs { padding: 8px 10px; flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.lv-bs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 8px; }
.lv-bs-h { padding: 3px 8px; font-size: 13px; }
.lv-bs-t { font-size: 12px; }
.lv-bs-t th, .lv-bs-t td { padding: 2px 6px; }
.lv-bs-t th { font-size: 11px; }
.lv-bs-t td b.cond { font-size: 13px; }
.lv-bs-t small { display: none; }
@media (max-width: 900px) { .lv-side { max-height: none; } }
.lv .lv-t td { padding-top: 7px; padding-bottom: 7px; }
.trk3-tools button.on { border-color: var(--accent); }
.lv-top.map { grid-template-columns: minmax(340px, 506px) 1fr; }
.lv-side { max-height: 370px; }
.lv-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
.lv-cs { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lv-cs th { text-align: left; font-weight: 600; color: var(--muted); padding: 1px 6px 1px 0; width: 38px; font-size: 11px; }
.lv-cs td { text-align: right; padding: 1px 0 1px 8px; }
.lv-cs tr:first-child td, .lv-cs tr:first-child th { border-top: 1px solid var(--line); padding-top: 4px; }
.lv-bs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr)); }
.lv-title { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; flex: 1 1 260px; }
.lv-title > b { font: 700 17px var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lv-title > small { flex-basis: 100%; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sel { max-width: 230px; margin-left: auto; }
.lv-bs-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-bs-pick .chip { min-height: 28px; padding: 0 10px; font-size: 12px; border-color: var(--cc); }
.lv-bs-pick .chip.on { background: var(--cc); color: #000; }
.lv-bs-grid { grid-template-columns: 1fr !important; }
.lv-bs-t small { display: inline !important; font-size: 10.5px; }
.p4 input::placeholder { color: var(--dim); opacity: .55; font-size: 11px; }
/* hourly forecast strip (Live bar) */
.wx-strip { flex: 1 1 auto; display: flex; gap: 6px; justify-content: center; align-items: stretch; min-width: 0; overflow: hidden; }
.wx-h { display: grid; justify-items: center; align-content: center; gap: 1px; padding: 3px 10px; border: 1px dashed var(--line3, rgba(128,128,128,.35)); border-radius: 8px; min-width: 74px; line-height: 1.1; }
.wx-h small { font-size: 11px; white-space: nowrap; }
.wx-h b { font-size: 15px; }
.wx-i { font-size: 16px; line-height: 1; }
@media (max-width: 1100px) { .wx-h:nth-child(n+4) { display: none; } }
@media (max-width: 760px) { .wx-strip { display: none; } }

/* main menu: hover a part → its pages pop up underneath */
@media (hover: hover) and (min-width: 901px) {
  nav.sections { overflow: visible; }
  nav.sections .sec-item { position: relative; }
  nav.sections .sec-item > a { display: block; transition: transform .12s; }
  nav.sections .sec-item:hover > a { transform: scale(1.06); color: var(--text); }
  .sec-pop { position: absolute; left: 0; top: 100%; min-width: 220px; padding: 6px; background: var(--panel); border: 1px solid var(--line2); border-radius: 0 10px 10px 10px; box-shadow: 0 12px 28px rgba(0,0,0,.35); display: none; z-index: 30; }
  .sec-item:hover .sec-pop { display: block; }
  .sec-pop a { display: block; padding: 10px 14px; border-radius: 8px; font: 600 16px var(--cond); color: var(--muted); white-space: nowrap; border: 0 !important; box-shadow: none !important; background: none; }
  .sec-pop a:hover { background: var(--panel2, rgba(124,196,255,.08)); color: var(--text); }
  .sec-pop a.on { color: var(--text); background: rgba(124,196,255,.12) !important; }
  nav.tabs.sub { display: none; }
}
@media not ((hover: hover) and (min-width: 901px)) { .sec-pop { display: none; } }

/* forecast in the top bar */
.wx-bar { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 4px; height: 32px; overflow: hidden; margin: 0 8px; }   /* hours that do not fit wrap onto a hidden 2nd row */
@media (min-width: 1001px) { .top { flex-wrap: nowrap; } }
.wx-b { display: flex; align-items: center; gap: 5px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px dashed var(--line2); border-radius: 8px; white-space: nowrap; font-size: 13px; }
.wx-b .wx-i { font-size: 16px; line-height: 1; }
@media (max-width: 1000px) { .wx-bar { display: none; } }
@media print { .wx-bar { display: none; } }

/* Live status bar inside the main menu row (wide screens) */
.nav-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px 6px; }
.nav-slot:empty { display: none; }
.nav-slot:not(:empty) ~ a.lib { margin-left: 0; }
.lv-bar.in-nav { flex-wrap: nowrap; width: 100%; min-width: 0; gap: 14px; padding: 3px 10px; border-radius: 8px; border-left-width: 5px; }
.lv-bar.in-nav .lv-title { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.lv-bar.in-nav .lv-title b { font-size: 14px; }
.lv-bar.in-nav .lv-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.lv-bar.in-nav .lv-flag { font-size: 13px; padding: 3px 10px; }
.lv-bar.in-nav .lv-clk b { font-size: 17px; }
.lv-bar.in-nav .lv-clk small { font-size: 10px; }
.lv-bar.in-nav .lv-sel { max-width: 220px; padding-top: 4px; padding-bottom: 4px; }
.lv-bar.in-nav > *:not(.lv-title) { flex: none; }
.lv-bar.in-nav .lv-clk, .lv-bar.in-nav .lv-clk small, .lv-bar.in-nav .lv-clk b, .lv-bar.in-nav .kpi, .lv-bar.in-nav .kpi * { white-space: nowrap; }
.lv-t th.lv-sort { cursor: pointer; user-select: none; }
.lv-t th.lv-sort:hover { color: var(--text); }
.lv-t th.lv-sort.on { color: var(--info); }
.lv-bs-t th, .lv-bs-t td { text-align: left !important; border-left: 1px solid var(--line); }
.lv-bs-t th:first-child, .lv-bs-t td:first-child { border-left: 0; width: 24px; }
.lv-bs-t td.lv-bs-team { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Best sectors card: as wide as its table, the rest of the row stays free for other cards */
.lv-bs { flex: 0 1 auto; width: fit-content; max-width: 100%; justify-self: start; }
.lv-bs .lv-bs-grid { grid-template-columns: auto; }
.lv-bs .lv-bs-t { width: auto; }
.lv-bs .lv-bs-t th, .lv-bs .lv-bs-t td { padding-right: 14px; }
/* Best sectors left, our / pinned car cards on the right */
.lv-side.lv-row { flex-direction: row; align-items: flex-start; }
.lv-side.lv-row > .lv-cards { flex: 1 1 240px; min-width: 220px; max-height: 370px; overflow-y: auto; align-content: start; }
@media (max-width: 1300px) { .lv-side.lv-row { flex-direction: column; } .lv-side.lv-row > .lv-cards { max-height: none; width: 100%; } }
/* car card: number / team on the left, last / best on the right */
.lv-ctop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lv-cl { min-width: 0; flex: 1 1 auto; }
.lv-cr { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.lv-cr .lv-c3 { justify-content: flex-end; }
.lv-cteam { font-size: 13px; font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-cdrv { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* car cards: all of them shown, the column hangs down over the content below instead of scrolling */
@media (min-width: 1301px) {
  .lv-side.lv-row { overflow: visible; }
  .lv-side.lv-row > .lv-cards { max-height: none; overflow: visible; position: relative; z-index: 6; }
  .lv-side.lv-row > .lv-cards > .lv-card { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
}
/* info card tabs + race control list */
.lv-itabs { display: flex; gap: 4px; }
.lv-itabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 2px 8px 4px; font: 700 15px var(--cond); color: var(--muted); cursor: pointer; }
.lv-itabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.lv-rc { max-height: 300px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; min-width: 560px; }
.lv-rc-row { display: grid; grid-template-columns: 70px auto 50px 1fr; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lv-rc-row:last-child { border-bottom: 0; }
.lv-rc-row.flag { opacity: .75; }
.lv-rc-t { white-space: normal; }
.tag.r { color: var(--bad); border-color: var(--bad); }
/* card top: left = number / P / class / team (one line each, never squeezed), right = last time */
.lv-ctop .lv-cl { flex: 1 1 auto; min-width: 0; }
.lv-ctop .lv-c1 { flex-wrap: nowrap; white-space: nowrap; }
.lv-ctop .lv-c1 .lv-p, .lv-ctop .lv-c1 .lv-p small { white-space: nowrap; }
.lv-ctop .lv-cr { flex: 0 0 auto; }
.lv-card > .lv-c3 { justify-content: flex-start; white-space: nowrap; }
.lv-ctop { flex-wrap: wrap; }
.lv-ctop .lv-cl { flex: 1 0 auto; max-width: 100%; }
.lv-ctop .lv-cr { margin-left: auto; }
.lv-ctop .lv-cl { flex: 1 1 0; min-width: min-content; }
.lv-ctop .lv-cteam { width: 0; min-width: 100%; }   /* the team line never widens the column; it is cut with … */
/* Best sectors / ประกาศสนาม card: fixed size — does not grow/shrink with class, tab or content */
.lv-bs { flex: 0 0 auto !important; width: 800px !important; max-width: 100%; height: 360px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-self: start; box-sizing: border-box; }
.lv-bs .lv-bs-grid { flex: 1 1 0; min-height: 0; overflow: auto; }
.lv-bs .lv-bs-cls { overflow: hidden; }
.lv-bs .lv-bs-t { width: 100% !important; table-layout: fixed; }
.lv-bs .lv-bs-t th:first-child, .lv-bs .lv-bs-t td:first-child { width: 26px; }
.lv-bs .lv-bs-t th:nth-child(2), .lv-bs .lv-bs-t td:nth-child(2) { width: 17%; }
.lv-bs .lv-bs-t th, .lv-bs .lv-bs-t td { overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.lv-bs .lv-rc { flex: 1 1 0; min-height: 0; max-height: none; min-width: 0; }
.lv-bs .lv-bs-pick { flex: 0 0 auto; }
@media (max-width: 840px) { .lv-bs { width: 100% !important; height: auto; max-height: 420px; } }
.lv-bs .lv-bs-t th:nth-child(2), .lv-bs .lv-bs-t td:nth-child(2) { width: 15%; }
.lv-bs .lv-bs-t th:nth-child(3), .lv-bs .lv-bs-t td:nth-child(3), .lv-bs .lv-bs-t th:nth-child(7), .lv-bs .lv-bs-t td:nth-child(7) { width: 18%; }
.lv-bs { height: 330px; }
.lv-bs { width: 880px !important; }
.lv-bs .lv-bs-t th:nth-child(2), .lv-bs .lv-bs-t td:nth-child(2) { width: 14%; }
.lv-bs .lv-bs-t th:nth-child(3), .lv-bs .lv-bs-t td:nth-child(3), .lv-bs .lv-bs-t th:nth-child(7), .lv-bs .lv-bs-t td:nth-child(7) { width: 16.5%; }
@media (max-width: 920px) { .lv-bs { width: 100% !important; height: auto; max-height: 420px; } }
.lang-btn { font: 700 12px var(--cond, inherit); letter-spacing: .06em; min-width: 38px; }
/* Pit Wall 2.0 pages inside 3.0 */
.pw2-frame { width: 100%; border: 0; display: block; border-radius: 10px; background: var(--bg, #0b0c0f); }
.look-sw { display: inline-flex; align-self: flex-end; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: -2px; }
.look-sw button { border: 0; background: none; color: var(--muted, #8b93a1); font: 600 12px var(--cond, inherit); padding: 3px 10px; border-radius: 6px; cursor: pointer; }
.look-sw button.on { background: var(--accent, #5ef08a); color: #000; }

/* ── Events: season view (Pit Wall 2.0 layout) ── */
.sh-hero { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; padding: 20px 22px; border-radius: 14px;
  background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--sc) 22%, transparent), transparent 60%), var(--panel); border: 1px solid var(--line); }
.sh-hero-l { flex: 1 1 420px; min-width: 0; }
.sh-badge { font: 700 12px var(--cond); letter-spacing: .1em; padding: 3px 9px; border-radius: 6px; }
.sh-badge.y { background: #E8B21A; color: #1a1300; }
.sh-badge.s { background: color-mix(in srgb, var(--sc) 30%, var(--panel2)); color: var(--sc); }
.sh-hero-name { font: 700 clamp(28px, 4.2vw, 60px)/1 var(--cond); letter-spacing: .01em; margin: 0; text-transform: uppercase; }
.sh-hero-sub { margin-top: 10px; font-size: 16px; color: var(--text2); }
.sh-logo { width: 74px; height: 50px; border-radius: 8px; display: grid; place-items: center; flex: none; overflow: hidden; background: color-mix(in srgb, var(--sc) 22%, var(--panel2)); }
.sh-logo.big { width: 150px; height: 84px; border-radius: 10px; }
.sh-logo img { max-width: 92%; max-height: 86%; object-fit: contain; }
.sh-logo span { font: 700 18px var(--cond); color: var(--sc); letter-spacing: .03em; }
.sh-logo.big span { font-size: 40px; }
.sh-car { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel2); }
.sh-car img { height: 32px; max-width: 64px; object-fit: contain; border-radius: 6px; padding: 2px; background: var(--row); }
.sh-car small { color: var(--muted); }
.sh-no { background: var(--accent); color: #000; border-radius: 6px; padding: 3px 8px; font: 700 18px var(--cond); }
.sh-tiles { display: flex; gap: 10px; flex: 0 1 auto; }
.sh-tile { width: 170px; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: left; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; font: inherit; }
.sh-tile i { font-style: normal; font-size: 26px; margin-bottom: auto; color: var(--sc); }
.sh-tile b { font: 700 24px/1 var(--cond); letter-spacing: .02em; }
.sh-tile small { color: var(--muted); }
.sh-tile.on { background: color-mix(in srgb, var(--accent) 70%, var(--panel)); color: #0b0c0f; border-color: transparent; }
.sh-tile.on i, .sh-tile.on small { color: #0b0c0f; }
.sh-tile:hover { border-color: var(--line3); color: inherit; }
.sh-h { font: 700 26px var(--cond); letter-spacing: .06em; margin: 0; }
.sh-years button { font-weight: 600; }
.sh-tl { overflow-x: auto; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.sh-tl-in { position: relative; min-width: 760px; }
.sh-mo { position: absolute; top: 0; bottom: 0; padding: 8px 10px; border-left: 1px solid var(--line); font: 600 12px var(--cond); letter-spacing: .08em; color: var(--muted); width: calc(100% / 12); }
.sh-mo:first-child { border-left: 0; }
.sh-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--accent); z-index: 2; pointer-events: none; }
.sh-today span { position: absolute; bottom: 4px; left: 4px; font: 700 11px var(--cond); color: var(--accent); letter-spacing: .08em; }
.sh-mk { position: absolute; height: 13px; border-radius: 5px; border: 2px solid var(--sc); background: color-mix(in srgb, var(--sc) 55%, var(--panel)); cursor: pointer; z-index: 3; padding: 0; }
.sh-mk.done { opacity: .75; } .sh-mk.sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--sc); }
.sh-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 15px var(--cond); cursor: pointer; }
.sh-chip i { width: 10px; height: 10px; border-radius: 3px; }
.sh-chip.on { background: var(--text); color: var(--bg); }
.sh-search { min-width: 260px; }
.sh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.sh-card { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--sc); cursor: pointer; min-width: 0; }
.sh-card:hover { border-color: var(--line3); border-left-color: var(--sc); }
.sh-card.sel { border-color: var(--accent); border-left-color: var(--sc); box-shadow: 0 0 0 1px var(--accent); }
.sh-ser { font: 600 12px var(--cond); letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-name { font: 700 20px/1.1 var(--cond); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-st { margin-left: auto; font: 700 11px var(--cond); letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; background: var(--row); color: var(--muted); white-space: nowrap; }
.sh-st.w { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--accent); }
.sh-st.n { background: #3a3218; color: #E8C76A; }
.sh-our { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--cond); color: var(--text2); }
.sh-our img { height: 22px; max-width: 54px; object-fit: contain; background: var(--row); border-radius: 4px; padding: 1px 3px; }
.sh-mono { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sh-tiles { width: 100%; } .sh-tile { flex: 1; width: auto; min-height: 120px; } .sh-logo.big { width: 96px; height: 60px; } }

/* ── Timing in the Pit Wall 2.0 layout ── */
.t2 { --t2r: 14px; }
.t2 .mono, .t2 .num { font-variant-numeric: tabular-nums; }
.t2-lbl { font: 600 11px var(--cond); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.t2-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.t2-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.t2-seg .t2-lbl { padding: 0 8px 0 6px; }
.t2-seg button { border: 0; background: none; color: var(--text2); font: 600 15px var(--font); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.t2-seg button.on { background: var(--row); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.t2-src { display: inline-flex; align-items: center; gap: 6px; }
.t2-src .inp { max-width: 300px; }
.t2-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.t2-clock small { font: 600 11px var(--cond); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.t2-clock b { font: 600 24px var(--cond); font-variant-numeric: tabular-nums; }
.t2-live { font: 700 12px var(--cond); letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; background: var(--row); color: var(--muted); }
.t2-live.on { background: color-mix(in srgb, var(--pb) 22%, var(--panel)); color: var(--pb); }
.t2-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.t2-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--t2r); padding: 12px 14px; min-width: 0; }
.t2-card.flush { padding: 0; overflow: hidden; }
.t2-ch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.t2-card.flush .t2-ch { padding: 10px 14px 6px; margin: 0; }
.t2-ch h3 { margin: 0; font: 700 15px var(--font); letter-spacing: .06em; color: var(--text); }
.t2-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--t2r); }
.t2-strip > div { display: flex; flex-direction: column; line-height: 1.15; }
.t2-strip small { font: 600 11px var(--cond); letter-spacing: .1em; color: var(--muted); }
.t2-strip b { font: 600 18px var(--font); font-variant-numeric: tabular-nums; }
.t2-tl { margin-left: auto; font: 700 12px var(--cond); padding: 3px 9px; border-radius: 999px; background: var(--row); color: var(--muted); }
.t2-no { display: inline-block; min-width: 32px; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--row); font: 700 15px var(--cond); color: var(--text); }
.t2-no.us { background: var(--accent); color: #000; }
.t2-no.bat { background: none; border: 2px solid #FF8A3D; color: #FFB27D; }
.t2-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.t2-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1250px) { .t2-main { grid-template-columns: 1fr; } }
.t2t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t2t th { font: 600 11px var(--cond); letter-spacing: .1em; color: var(--muted); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel2); position: sticky; top: 0; }
.t2t td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t2t .num { text-align: right; }
.t2t tr.us td { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.t2-cls { font: 700 12px var(--cond); color: var(--bad); }
.t2-team b { display: block; font-weight: 600; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.t2-team small { display: block; color: var(--muted); font-size: 12px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.t2-tbl.compact .t2-team b, .t2-tbl.compact .t2-team small { max-width: 180px; }
.t2-sec { display: inline-block; min-width: 62px; padding: 2px 6px; border-radius: 5px; text-align: right; }
.t2-sec.ob { background: var(--best); color: #120a1f; font-weight: 700; }
.t2-sec.pb { background: #2F7FD8; color: #fff; font-weight: 700; }
.t2-sec.slow { background: #D94848; color: #fff; }
.t2-sec.pit { color: var(--info); }
.t2-sec.old { opacity: .45; }
.c-p { color: var(--best); font-weight: 700; } .c-pb { color: #4DA3FF; } .c-us { color: var(--accent); } .c-b { color: #FFB27D; }
.t2-tag { font: 700 11px var(--cond); letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; background: var(--row); color: var(--muted); white-space: nowrap; }
.t2-tag.pit, .t2-tag.tl, .t2-tag.flag { background: color-mix(in srgb, #E8B21A 24%, var(--panel)); color: color-mix(in srgb, #E8B21A 70%, var(--text)); }
.t2-tag.out { background: color-mix(in srgb, #4DA3FF 22%, var(--panel)); color: color-mix(in srgb, #4DA3FF 70%, var(--text)); }
.t2-tag.pen { background: color-mix(in srgb, #E5484D 24%, var(--panel)); color: color-mix(in srgb, #E5484D 70%, var(--text)); }
.t2-rc { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.t2-rc > div { display: grid; grid-template-columns: 52px auto 1fr; gap: 8px; align-items: start; font-size: 13px; }
.t2-rc > div.us { background: color-mix(in srgb, #D94848 18%, transparent); border-radius: 6px; padding: 3px; }
.t2-bat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); margin-top: 6px; }
.t2-big { font: 600 20px var(--font); font-variant-numeric: tabular-nums; }
.t2-pitrow, .t2-top { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.t2-top.us { color: var(--accent); }
.t2-cb > div { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.t2-cb .t2-lbl { min-width: 72px; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-car { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr) 340px; grid-template-areas: 'map kpi side' 'around around side'; gap: 12px; align-items: start; }
.t2-map { grid-area: map; } .t2-kpis { grid-area: kpi; } .t2-around { grid-area: around; } .t2-car .t2-side { grid-area: side; }
@media (max-width: 1250px) { .t2-car { grid-template-columns: 1fr 1fr; grid-template-areas: 'map kpi' 'around around' 'side side'; } }
@media (max-width: 800px) { .t2-car { grid-template-columns: 1fr; grid-template-areas: 'map' 'kpi' 'around' 'side'; } }
.t2-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.t2-k { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.t2-k small { display: flex; font: 600 11px var(--cond); letter-spacing: .1em; color: var(--muted); }
.t2-k.us { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.t2-k.wide { grid-column: span 3; }
.t2-xl { font: 600 38px/1.05 var(--font); font-variant-numeric: tabular-nums; }
.t2-l { font: 600 24px var(--font); font-variant-numeric: tabular-nums; }
.t2-kf { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--text2); }
.t2-ll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-top: 4px; }
.t2-ll > div { display: flex; gap: 10px; font-size: 15px; }
.t2-gap { width: 100%; height: 90px; margin-top: 4px; }
.t2-gap polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.t2-gap .a { stroke: #4DA3FF; } .t2-gap .b { stroke: #FF8A3D; } .t2-gap .zero { stroke: var(--line2); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.t2-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } .t2-key.a { background: #4DA3FF; } .t2-key.b { background: #FF8A3D; }
.t2-ar { position: relative; height: 36px; margin: 10px 8px 4px; border-bottom: 2px solid var(--line2); }
.t2-ar .mid { position: absolute; left: 50%; top: 4px; bottom: -6px; border-left: 2px solid var(--accent); }
.t2-ar-car { position: absolute; transform: translateX(-50%); font: 700 12px var(--cond); padding: 1px 6px; border-radius: 999px; background: #E8C76A; color: #1a1300; }
.t2-ar-car.us { background: var(--accent); color: #000; z-index: 2; }
.t2-focus { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.t2-main.race { grid-template-columns: minmax(0, 1.5fr) minmax(336px, 0.8fr); }
@media (max-width: 1250px) { .t2-main.race { grid-template-columns: 1fr; } }
.t2-main.race .t2-tbl .t2-team b, .t2-main.race .t2-tbl .t2-team small { max-width: 200px; }
.t2-main.race .t2t td, .t2-main.race .t2t th { padding-left: 6px; padding-right: 6px; }
.t2-pw { border-color: color-mix(in srgb, #E8B21A 55%, var(--line)); }
.t2-pw.closed { border-color: var(--line); }
.t2-pwst { font: 700 12px var(--cond); letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }
.t2-pwst.open { background: color-mix(in srgb, #3DDC84 24%, var(--panel)); color: color-mix(in srgb, #3DDC84 75%, var(--text)); }
.t2-pwst.closing { background: color-mix(in srgb, #E8B21A 28%, var(--panel)); color: color-mix(in srgb, #E8B21A 75%, var(--text)); }
.t2-pwst.closed { background: var(--row); color: var(--muted); }
.t2-pwk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.t2-pwk > div { display: flex; flex-direction: column; background: var(--panel2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.t2-pwk small { font: 600 11px var(--cond); letter-spacing: .08em; color: var(--muted); }
.t2-pwk b { font: 600 20px var(--font); font-variant-numeric: tabular-nums; }
.t2-pwt td, .t2-pwt th { padding: 4px 6px; font-size: 13px; }
.t2-tag.done { background: color-mix(in srgb, #3DDC84 22%, var(--panel)); color: color-mix(in srgb, #3DDC84 70%, var(--text)); }
.t2-tag.todo { background: color-mix(in srgb, #FF8A3D 22%, var(--panel)); color: color-mix(in srgb, #FF8A3D 75%, var(--text)); }

/* pit window table: 5 cars visible, scroll for the rest (header stays) */
.t2-pwscroll { max-height: 182px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.t2-pwscroll .t2-pwt th { position: sticky; top: 0; z-index: 1; }
.t2-pwt td { height: 30px; }
.t2-cchip { border-color: var(--cc) !important; }
.t2-cchip.on { background: color-mix(in srgb, var(--cc) 28%, var(--panel)) !important; color: var(--text) !important; }