* { box-sizing: border-box; }

:root {
    --bg: #06101f;
    --panel: #111827;
    --panel2: #172033;
    --border: #334155;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --blue: #2563eb;
    --green: #16a34a;
    --orange: #f59e0b;
    --red: #ef4444;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34rem),
        linear-gradient(180deg, #08111f, var(--bg));
    color: var(--text);
}

a { color: inherit; }

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(2, 6, 23, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
    padding: 16px 22px;
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.right-header { display: flex; align-items: center; gap: 10px; }

.logo {
    max-height: 92px;
    max-width: 230px;
    object-fit: contain;
    background: white;
    border-radius: 12px;
    padding: 6px;
}

.brand-title { text-align: center; flex: 1; }

.brand-title h1 {
    margin: 0;
    font-size: 48px;
    letter-spacing: 0.04em;
}

.brand-title p {
    margin: 8px 0 0;
    color: #93c5fd;
    font-size: 18px;
}

.home-header-button {
    display: none;
    background: var(--blue);
    color: white;
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 800;
    white-space: nowrap;
}

.main-nav { margin-top: 16px; text-align: center; }

.main-nav a {
    display: inline-block;
    margin: 5px;
    padding: 10px 18px;
    background: #1e293b;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: white;
}

.container { max-width: 1220px; margin: 0 auto; padding: 24px; }

.hero { text-align: center; }

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.card {
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    margin-bottom: 18px;
}

.stream-card { margin-top: 14px; }

.button {
    display: inline-block;
    background: var(--blue);
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    margin: 4px 4px 4px 0;
    text-align: center;
}

.button.secondary { background: #334155; }
.button.green { background: var(--green); }
.button.orange { background: var(--orange); color: #111827; }
.button.red { background: var(--red); }

input, select {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: 1px solid #475569;
    background: #020617;
    color: white;
    margin: 8px 0 14px;
    font-size: 16px;
}

.live { color: #22c55e; font-weight: 800; }
.offline { color: var(--muted); }

.video {
    width: 100%;
    max-width: 1200px;
    background: black;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
}

.camera-preview {
    width: 100%;
    background: black;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.footer { text-align: center; color: var(--muted); padding: 28px; }

.help-text { color: var(--muted); line-height: 1.5; }
.mobile-only { display: none !important; }
.desktop-warning { border-color: rgba(245, 158, 11, 0.65); }

.status-box {
    background: #020617;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    line-height: 1.5;
}

.status-good { color: #22c55e; font-weight: bold; }
.status-warn { color: #f59e0b; font-weight: bold; }
.status-bad { color: #ef4444; font-weight: bold; }

.zoom-controls {
    background: #020617;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
}

.zoom-controls label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}

.zoom-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.zoom-button {
    width: auto;
    min-width: 72px;
    margin: 0;
    padding: 10px 14px;
    background: #334155;
}

.zoom-button.active {
    outline: 2px solid #fff;
    background: var(--blue);
}

.zoom-support-text {
    color: var(--muted);
    font-size: 13px;
    margin-top: 8px;
}

.status-box.status-good { border-color: rgba(34,197,94,.65); }
.status-box.status-warn { border-color: rgba(245,158,11,.75); }
.status-box.status-bad { border-color: rgba(239,68,68,.75); }

.timing-preview {
    background: #05070a;
    border: 1px solid #2563eb;
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
}

.timing-preview .timing-title {
    background: #bfdbfe;
    color: #000;
    padding: 8px 12px;
    font-weight: bold;
}

.timing-preview table { width: 100%; border-collapse: collapse; }
.timing-preview td, .timing-preview th { padding: 8px; border-bottom: 1px solid #1f2937; }
.timing-preview tr:nth-child(even) { background: #111827; }

@media (max-width: 1050px) { .grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 850px) {
    .app-header { padding: 8px 10px; }

    .brand-row {
        display: grid;
        grid-template-columns: 58px 1fr auto;
        gap: 8px;
    }

    .right-header { gap: 6px; }

    .logo {
        max-height: 48px;
        max-width: 58px;
        padding: 3px;
        border-radius: 8px;
    }

    .brand-title h1 { font-size: 26px; }
    .brand-title p { display: none; }

    .home-header-button {
        display: inline-block;
        font-size: 13px;
        padding: 10px 11px;
    }

    .main-nav { display: none; }
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }

    .container { padding: 14px; }
    .hero { text-align: left; }

    .grid {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .grid > .card {
        min-width: 86%;
        scroll-snap-align: start;
        margin-bottom: 0;
    }

    .card {
        padding: 18px;
        border-radius: 16px;
    }

    .button {
        width: 100%;
        margin-top: 8px;
    }
}

.admin-grid { grid-template-columns: repeat(2, 1fr); }
.table-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.table-wrap { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.admin-table th { background: #020617; color: #bfdbfe; font-weight: 800; }
.admin-table tr:nth-child(even) { background: rgba(15, 23, 42, 0.55); }
.button.small { padding: 7px 10px; font-size: 13px; border-radius: 8px; width: auto; margin: 0; }
@media (max-width: 850px) {
    .admin-grid { display: block; }
    .table-title-row { display: block; }
}


.driver-details {
    margin: 8px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    font-size: 0.95rem;
}
.driver-found { border-left: 4px solid #23d18b; }
.driver-missing { border-left: 4px solid #ff5f56; }
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}
.checkbox-row input { width: auto; }

.replay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.replay-card {
    background: #020617;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}
.replay-thumb {
    position: relative;
    width: 100%;
    min-height: 150px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #0f172a, #1d4ed8 55%, #020617);
    display: flex;
    align-items: center;
    justify-content: center;
}
.replay-car {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(2, 6, 23, 0.78);
    border: 1px solid rgba(191, 219, 254, 0.45);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
}
.replay-play {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.replay-body { padding: 16px; }
.replay-body h3 { margin: 0 0 6px; font-size: 24px; }
.replay-driver { margin: 0 0 4px; font-weight: 800; }
.replay-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.replay-meta span {
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 13px;
    color: #bfdbfe;
}


.replay-watch-card { max-width: 1180px; margin: 0 auto; }
.replay-watch-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.replay-watch-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.button.secondary { background: #273447; color: #eef3ff; }
.video-shell { background: #000; border: 1px solid #33445d; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.replay-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
@media (max-width: 720px) {
  .replay-watch-actions { width: 100%; }
  .replay-watch-actions .button { flex: 1; text-align: center; }
}

.replay-thumb-link {
    display: flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.replay-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.18), transparent 28%),
        linear-gradient(180deg, rgba(2,6,23,0.05), rgba(2,6,23,0.72));
}
.replay-thumb > * {
    position: relative;
    z-index: 1;
}
.replay-thumb-link:hover .replay-play {
    transform: scale(1.08);
}

.latest-replays-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 18px;
    display: grid;
    gap: 10px;
}

.latest-replays-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.latest-replays-list small {
    opacity: 0.75;
}

.mini-play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    background: rgba(255,255,255,0.16);
    color: inherit;
}

.mini-play:hover {
    background: rgba(255,255,255,0.28);
}

.camera-list {
    margin: 12px 0 0;
    padding-left: 20px;
}
.camera-list li { margin-bottom: 10px; }

/* Direct MediaMTX WebRTC player embed */
.webrtc-player-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 18px;
    background: #000;
}
.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0 16px;
}

/* Timing page */
.timing-page { max-width: 1500px; }
.timing-card { overflow: hidden; }
.timing-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: #a5b4fc;
    font-weight: 800;
}
.timing-clock {
    min-width: 160px;
    text-align: right;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
}
.timing-clock span, .timing-stats span { display: block; opacity: 0.72; font-size: 0.84rem; }
.timing-clock strong { display:block; font-size: 1.65rem; margin-top: 4px; }
.timing-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}
.timing-stats > div {
    padding: 13px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
}
.timing-stats strong { display: block; font-size: 1.25rem; margin-top: 3px; }
.timing-controls {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    align-items: end;
    margin: 12px 0 12px;
}
.timing-controls label { font-weight: 700; font-size: 0.9rem; }
.timing-controls input, .timing-controls select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(15,23,42,0.82);
    color: inherit;
}
.timing-error {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239,68,68,0.16);
    border: 1px solid rgba(239,68,68,0.35);
    color: #fecaca;
}
.timing-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9rem;
    margin: 10px 0 12px;
    opacity: 0.94;
}
.timing-legend span { display: inline-flex; align-items: center; gap: 6px; }
.timing-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.legend-fastest { background: #8b5cf6; }
.legend-pb { background: #22c55e; }
.legend-dns { background: #64748b; }
.legend-dnf { background: #ef4444; }
.timing-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(2,6,23,0.25);
}
.timing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 860px;
    font-variant-numeric: tabular-nums;
}
.timing-table th, .timing-table td {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    text-align: left;
}
.timing-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(15,23,42,0.98);
    color: #bfdbfe;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.timing-table tbody tr:hover { background: rgba(255,255,255,0.045); }
.timing-table .pos, .timing-table .bib, .timing-table .class-cell { font-weight: 800; }
.timing-table .name { min-width: 170px; font-weight: 700; }
.timing-table .run-cell, .timing-table .total { text-align: right; }
.timing-table .total { font-weight: 900; color: #e0f2fe; }
.run-cell.fastest { background: rgba(139,92,246,0.32); color: #f5f3ff; font-weight: 900; }
.run-cell.pb { box-shadow: inset 0 -3px 0 rgba(34,197,94,0.88); }
.run-cell.dns { background: rgba(100,116,139,0.28); color: #cbd5e1; }
.run-cell.dnf { background: rgba(239,68,68,0.28); color: #fecaca; }
.run-cell small { display:block; opacity:0.78; font-size:0.72rem; }
.status-dns { opacity: 0.68; }
.status-dnf .total { color: #fecaca; }
@media (max-width: 800px) {
    .timing-hero { display: block; }
    .timing-clock { text-align: left; margin-top: 12px; }
    .timing-stats { grid-template-columns: 1fr; }
    .timing-controls { grid-template-columns: 1fr; }
    .timing-table { min-width: 720px; font-size: 0.88rem; }
    .timing-table th, .timing-table td { padding: 8px; }
}


.admin-events-list { margin-top: 1rem; }
.admin-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.admin-event-link { display: block; padding: 1rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; text-decoration: none; background: rgba(255,255,255,0.05); }
.admin-event-link:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); }
.admin-event-link strong { display: block; color: inherit; margin-bottom: 0.35rem; }
.admin-event-link span { display: block; color: var(--muted); font-size: 0.92rem; }
.admin-event-link em { display: inline-block; margin-top: 0.5rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-style: normal; font-size: 0.78rem; background: rgba(126,87,194,0.22); }

/* Admin dashboard layout update */
.admin-page { max-width: 980px; }
.admin-alerts { margin-bottom: 1rem; }
.admin-dashboard {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 1.4rem;
    align-items: start;
}
.admin-dashboard .card, .admin-wide-card {
    background: linear-gradient(180deg, rgba(30,41,59,0.9), rgba(15,23,42,0.9));
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.admin-primary-stack, .admin-side-stack { display: grid; gap: 1.15rem; }
.admin-driver-card { min-height: 420px; }
.admin-mini-card { min-height: 132px; }
.admin-form label { display: block; margin-top: 0.75rem; font-weight: 800; font-size: 0.86rem; color: #dbeafe; }
.admin-form.compact label { margin-top: 0.35rem; }
.admin-form input[type="text"], .admin-form input[type="number"], .admin-form input[type="file"] {
    width: 100%;
    margin: 0.35rem 0 0.65rem;
}
.admin-details { margin-top: 0.85rem; color: var(--muted); }
.admin-details summary { cursor: pointer; color: #bfdbfe; font-weight: 800; }
.compact-list { margin-top: 0.65rem; padding-left: 1rem; font-size: 0.86rem; }
.admin-wide-card { margin-top: 1.25rem; }
.admin-events-card .table-title-row { align-items: center; }
.admin-events-list .offline { margin: 0; }
.admin-event-grid.compact-events { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 820px) {
    .admin-page { max-width: none; }
    .admin-dashboard { grid-template-columns: 1fr; }
    .admin-driver-card { min-height: 0; }
}


.admin-topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.auth-card{max-width:520px;margin:30px auto}.event-card-mini{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;margin:10px 0}.event-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}.pill{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.85em}.home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.qr-scanner-box{border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px;margin:12px 0}.qr-scanner-box video{width:100%;max-height:260px;background:#000;border-radius:10px;margin-top:8px}@media(max-width:900px){.home-grid{grid-template-columns:1fr}.admin-topbar{align-items:flex-start;flex-direction:column}}


.admin-subnav {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(15, 23, 42, 0.88);
}
.admin-subnav a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(51, 65, 85, 0.9);
    color: #e5e7eb;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.admin-subnav a:hover { background: rgba(37, 99, 235, 0.95); }
.admin-nav-blank{display:inline-block;width:78px;height:36px;border-radius:999px;background:transparent;border:1px solid transparent;}
.admin-subnav .admin-logout-link{background:rgba(127,29,29,.9);}
.admin-subnav .admin-logout-link:hover{background:rgba(220,38,38,.95);}
@media(max-width:700px){.admin-nav-blank{display:none;}}

@media(max-width:700px){ .admin-subnav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .admin-subnav a { white-space: nowrap; } }
.live-wall-page{height:calc(100vh - 190px);padding:18px;box-sizing:border-box;overflow:hidden}.live-wall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}.live-wall-head h2{margin:0}.live-wall{height:calc(100% - 58px);display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));grid-auto-rows:minmax(220px,1fr);overflow:hidden}.live-tile{position:relative;min-height:0;height:100%;border:1px solid #34415a;border-radius:14px;background:#050914;overflow:hidden}.live-tile-player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.live-tile-label{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;background:rgba(5,9,20,.78);backdrop-filter:blur(4px);font-size:.95rem}.live-tile-label span{color:#d8e2f5}.live-wall .offline{grid-column:1/-1;align-self:start}.live-wall[data-count="1"]{grid-template-columns:1fr}.live-wall[data-count="2"]{grid-template-columns:repeat(2,1fr)}.live-wall[data-count="3"],.live-wall[data-count="4"]{grid-template-columns:repeat(2,1fr)}.live-wall[data-count="5"],.live-wall[data-count="6"]{grid-template-columns:repeat(3,1fr)}@media (max-width:767px) and (orientation:portrait){.live-wall-page{height:auto;min-height:calc(100vh - 190px);overflow:auto}.live-wall{height:auto;grid-template-columns:1fr!important;grid-auto-rows:260px;overflow:visible}.live-tile{height:260px}.live-wall-head{display:block}}@media (max-width:767px) and (orientation:landscape){.live-wall{grid-template-columns:repeat(2,1fr)!important}}@media (min-width:768px) and (max-width:1100px) and (orientation:portrait){.live-wall{grid-template-columns:repeat(2,1fr)!important}}@media (min-width:768px) and (max-width:1200px) and (orientation:landscape){.live-wall{grid-template-columns:repeat(3,1fr)!important}}

/* Admin section page layout refinement */
.admin-dashboard-top { grid-template-columns: repeat(2, minmax(280px, 1fr)); margin-bottom: 1.2rem; }
.admin-dashboard-tools { grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); margin-bottom: 1.2rem; }
.admin-dashboard-top .admin-mini-card, .admin-dashboard-tools .admin-mini-card { min-height: 0; }
.admin-dashboard-tools .admin-driver-card { min-height: 0; }
.qr-scanner-box video { max-height: 420px; object-fit: cover; }
@media (max-width: 820px) {
  .admin-dashboard-top, .admin-dashboard-tools { grid-template-columns: 1fr; }
}

/* Shared Race rebrand */
.sharedrace-logo { width: min(360px, 42vw); height: auto; object-fit: contain; }
.club-logo { max-height: 74px; object-fit: contain; }
.footer { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.footer-ja-logo { height:28px; width:auto; opacity:.8; border-radius:4px; }

.is-hidden { display: none !important; }
.admin-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.qr-layout-admin {
    margin-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    padding-top: 12px;
}
.qr-layout-admin .small {
    padding: 8px 12px;
    font-size: 13px;
}
@media (max-width: 700px) {
    .admin-two-col { grid-template-columns: 1fr; gap: 0; }
}

/* QR print layout selector refinement */
.qr-layout-radios{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
    margin:8px 0 10px;
}
.qr-layout-radios label{
    display:flex!important;
    align-items:center;
    gap:7px;
    margin:0!important;
    padding:7px 10px;
    border:1px solid rgba(148,163,184,.28);
    border-radius:999px;
    background:rgba(15,23,42,.55);
}
.qr-avery-summary{
    margin:8px 0 12px;
    font-size:.86rem;
}
.qr-custom-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px 12px;
    margin:10px 0 12px;
}
.qr-custom-grid label{margin-top:0!important;}
.qr-custom-grid input,.qr-custom-grid select{width:100%;box-sizing:border-box;}
@media(max-width:900px){.qr-custom-grid{grid-template-columns:1fr;}}

/* Header/logo integration + theme support */
html[data-theme="light"] {
    --bg: #f1f5f9;
    --panel: #ffffff;
    --panel2: #f8fafc;
    --border: #cbd5e1;
    --text: #0f172a;
    --muted: #475569;
}
html[data-theme="light"] body {
    background: linear-gradient(180deg, #f8fafc, #e2e8f0);
    color: var(--text);
}
html[data-theme="light"] .app-header,
html[data-theme="light"] .admin-subnav {
    background: rgba(255,255,255,.94);
    border-color: rgba(15,23,42,.18);
}
html[data-theme="light"] .card,
html[data-theme="light"] .admin-dashboard .card,
html[data-theme="light"] .admin-wide-card {
    background: linear-gradient(180deg,#ffffff,#f8fafc);
    border-color: #cbd5e1;
    color: #0f172a;
}
html[data-theme="light"] .main-nav a,
html[data-theme="light"] .admin-subnav a {
    color:#0f172a;
    background:#e2e8f0;
    border-color:#cbd5e1;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] .status-box {
    background:#ffffff;
    color:#0f172a;
    border-color:#cbd5e1;
}
.integrated-brand-row { align-items:center; }
.corner-brand { display:flex; align-items:center; text-decoration:none; min-width:180px; }
.center-brand { flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.center-brand p { margin:6px 0 0; color:#93c5fd; font-size:16px; }
.main-brand-logo { display:inline-flex; align-items:center; justify-content:center; height:92px; max-width:min(420px,42vw); }
.main-brand-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.theme-logo-light { display:none; }
html[data-theme="light"] .theme-logo-dark { display:none; }
html[data-theme="light"] .theme-logo-light { display:block; }
.jetski-corner-logo { max-width:220px; max-height:86px; }
.theme-toggle { background:#334155; color:#fff; border:1px solid var(--border); border-radius:999px; padding:10px 12px; font-weight:800; cursor:pointer; }
html[data-theme="light"] .theme-toggle { background:#e2e8f0; color:#0f172a; border-color:#cbd5e1; }
html[data-theme="light"] .center-brand p { color:#2563eb; }
@media(max-width:760px){
  .brand-row{gap:8px}.corner-brand{min-width:0}.jetski-corner-logo{max-width:96px;max-height:54px}.main-brand-logo{height:64px;max-width:48vw}.center-brand p{font-size:12px}.theme-toggle{padding:8px 10px;font-size:12px}.club-logo{max-height:54px}.logo{padding:4px;border-radius:8px}
}

/* Competitors admin vertical page layout */
.admin-page { max-width: 1120px; }
.admin-competitor-stack { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:1.25rem; }
.admin-panel-equal { width:100%; max-width:none; margin:0; }
.admin-competitor-stack .qr-custom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-competitor-stack .qr-layout-admin .button { margin-top: 8px; }
@media(max-width:900px){ .admin-competitor-stack .qr-custom-grid { grid-template-columns:1fr; } }


/* Header/theme repair */
.center-brand p,
.brand-title p {
    display: none !important;
}

.main-brand-logo {
    height: 54px !important;
    max-width: min(260px, 34vw) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sharedrace-header-logo {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 54px !important;
    object-fit: contain !important;
}

.theme-logo,
.theme-logo-dark,
.theme-logo-light {
    display: none !important;
}

.integrated-brand-row {
    align-items: center !important;
    min-height: 58px !important;
}

.app-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.main-nav {
    margin-top: 10px !important;
}

.jetski-corner-logo {
    max-width: 150px !important;
    max-height: 52px !important;
}

.club-logo {
    max-height: 52px !important;
}

html[data-theme="light"] {
    --bg: #f3f6fb;
    --panel: #ffffff;
    --panel2: #f8fafc;
    --border: #cbd5e1;
    --text: #0f172a;
    --muted: #475569;
}

html[data-theme="light"] body {
    background: linear-gradient(180deg, #ffffff, var(--bg)) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .app-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: #cbd5e1 !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .admin-dashboard .card,
html[data-theme="light"] .admin-wide-card,
html[data-theme="light"] .status-box {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .main-nav a,
html[data-theme="light"] .admin-subnav a {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] table,
html[data-theme="light"] th,
html[data-theme="light"] td {
    color: #0f172a !important;
}

@media (max-width: 760px) {
    .main-brand-logo {
        height: 42px !important;
        max-width: 42vw !important;
    }
    .sharedrace-header-logo {
        max-height: 42px !important;
    }
    .jetski-corner-logo {
        max-width: 82px !important;
        max-height: 38px !important;
    }
    .integrated-brand-row {
        min-height: 46px !important;
    }
}

/* Shared Race UI Version 2 - global light/dark theme and compact branded header */
:root,
html[data-theme="dark"] {
    --sr-bg: #07111f;
    --sr-bg-soft: #0b1628;
    --sr-surface: #172033;
    --sr-surface-2: #1f2b3e;
    --sr-border: #334155;
    --sr-text: #f8fafc;
    --sr-muted: #a8b6ca;
    --sr-input: #020617;
    --sr-button: #2563eb;
    --sr-button-text: #ffffff;
    --sr-shadow: rgba(0, 0, 0, .30);
    --bg: var(--sr-bg);
    --panel: var(--sr-surface);
    --panel2: var(--sr-surface-2);
    --border: var(--sr-border);
    --text: var(--sr-text);
    --muted: var(--sr-muted);
}

html[data-theme="light"] {
    --sr-bg: #eef3f8;
    --sr-bg-soft: #ffffff;
    --sr-surface: #ffffff;
    --sr-surface-2: #f8fafc;
    --sr-border: #cbd5e1;
    --sr-text: #0f172a;
    --sr-muted: #475569;
    --sr-input: #ffffff;
    --sr-button: #2563eb;
    --sr-button-text: #ffffff;
    --sr-shadow: rgba(15, 23, 42, .10);
    --bg: var(--sr-bg);
    --panel: var(--sr-surface);
    --panel2: var(--sr-surface-2);
    --border: var(--sr-border);
    --text: var(--sr-text);
    --muted: var(--sr-muted);
}

html, body { background: var(--sr-bg) !important; color: var(--sr-text) !important; }
body {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 32rem), linear-gradient(180deg, var(--sr-bg-soft), var(--sr-bg)) !important;
}

.app-header {
    background: color-mix(in srgb, var(--sr-bg-soft) 94%, transparent) !important;
    border-bottom: 1px solid var(--sr-border) !important;
    padding: 8px 18px 10px !important;
}
.integrated-brand-row, .brand-row {
    min-height: 70px !important;
    align-items: center !important;
}
.center-brand { flex: 1 1 auto !important; display:flex !important; justify-content:center !important; align-items:center !important; }
.center-brand p, .brand-title, .brand-title h1, .brand-title p { display: none !important; }
.main-brand-logo {
    height: 104px !important;
    max-height: 104px !important;
    max-width: min(440px, 42vw) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.sharedrace-header-logo {
    display: block !important;
    height: auto !important;
    max-height: 104px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.logo-left, .jetski-corner-logo, .club-logo, .logo-right {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
}
.jetski-corner-logo, .club-logo {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 4px !important;
}
.right-header { gap: 10px !important; align-items: center !important; }
.theme-toggle {
    display:inline-flex !important;
    align-items:center !important;
    gap: 7px !important;
    background: var(--sr-surface-2) !important;
    color: var(--sr-text) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: 999px !important;
    padding: 9px 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px var(--sr-shadow) !important;
}
.theme-icon { line-height: 1; }
.main-nav { margin-top: 8px !important; text-align: center !important; }
.main-nav a, .admin-subnav a, .button.secondary {
    background: var(--sr-surface-2) !important;
    color: var(--sr-text) !important;
    border-color: var(--sr-border) !important;
}
.card, .admin-dashboard .card, .admin-wide-card, .status-box, .stream-card, .live-tile, .event-card, .driver-match, .replay-card {
    background: linear-gradient(180deg, var(--sr-surface-2), var(--sr-surface)) !important;
    border-color: var(--sr-border) !important;
    color: var(--sr-text) !important;
    box-shadow: 0 12px 28px var(--sr-shadow) !important;
}
input, select, textarea {
    background: var(--sr-input) !important;
    color: var(--sr-text) !important;
    border-color: var(--sr-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--sr-muted) !important; }
label, p, small, .muted, .hint, td, th, table, details, summary { color: inherit; }
.footer {
    color: var(--sr-muted) !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}
.footer-ja-logo { height: 30px !important; width: auto !important; opacity: 1 !important; border-radius: 4px !important; }

html[data-theme="light"] .button:not(.secondary):not(.orange):not(.red):not(.green), .button.primary { background: var(--sr-button) !important; color: var(--sr-button-text) !important; }
html[data-theme="light"] .app-header, html[data-theme="light"] .admin-subnav { background: rgba(255,255,255,.96) !important; }
html[data-theme="light"] a { color: inherit; }
html[data-theme="light"] .live { color: #15803d !important; }
html[data-theme="light"] .offline, html[data-theme="light"] .muted { color: #64748b !important; }
html[data-theme="light"] .status-box.success { background: #ecfdf5 !important; color:#065f46 !important; border-color:#10b981 !important; }
html[data-theme="light"] .status-box.warning { background: #fffbeb !important; color:#92400e !important; border-color:#f59e0b !important; }
html[data-theme="light"] .status-box.error { background: #fef2f2 !important; color:#991b1b !important; border-color:#ef4444 !important; }

@media (max-width: 900px) {
    .main-brand-logo { height: 82px !important; max-height:82px !important; max-width: 44vw !important; }
    .sharedrace-header-logo { max-height:82px !important; }
    .logo-left, .jetski-corner-logo, .club-logo, .logo-right { max-height: 42px !important; max-width: 100px !important; }
    .theme-toggle { padding: 8px 10px !important; font-size: 13px !important; }
}
@media (max-width: 620px) {
    .app-header { padding: 7px 10px 8px !important; }
    .integrated-brand-row, .brand-row { min-height: 50px !important; gap: 6px !important; }
    .main-brand-logo { height: 58px !important; max-height:58px !important; max-width: 44vw !important; }
    .sharedrace-header-logo { max-height:58px !important; }
    .logo-left, .jetski-corner-logo, .club-logo, .logo-right { max-height: 34px !important; max-width: 72px !important; }
    .theme-text { display:none !important; }
    .theme-toggle { padding: 8px 9px !important; }
    .main-nav a { padding: 8px 11px !important; margin: 3px !important; }
}


/* QR card final sizing/readability update */
.qr-card .qr-driver-number,
.qr-card .bib-number,
.qr-bib,
.card-bib,
.qr-card .num,
.card-number {
    color: #000 !important;
    font-size: clamp(20px, 3.25mm, 28px) !important;
    line-height: 0.95 !important;
    font-weight: 900 !important;
}

.qr-card .qr-driver-name,
.qr-card .driver-name,
.qr-name,
.card-name {
    color: #000 !important;
    font-size: clamp(9px, 2.0mm, 14px) !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    max-width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform-origin: center center !important;
}

.qr-card .qr-driver-class,
.qr-card .driver-class,
.qr-class,
.card-class {
    color: #000 !important;
    font-size: clamp(8px, 1.65mm, 12px) !important;
    line-height: 1.0 !important;
    font-weight: 800 !important;
}

.qr-card .qr-footer,
.qr-card .card-footer,
.qr-footer,
.card-footer,
.qr-card .copyright {
    color: #000 !important;
}

.qr-card .qr-footer-text,
.qr-card .card-footer-text,
.qr-footer-text,
.card-footer-text,
.qr-card .copyright {
    color: #000 !important;
    font-size: clamp(4.4px, 0.82mm, 6.5px) !important;
    line-height: 1.06 !important;
    font-weight: 600 !important;
}

.qr-card .shared-race-logo,
.qr-card .qr-top-logo,
.qr-top-logo,
.card-top-logo {
    width: 72% !important;
    max-height: 14mm !important;
    object-fit: contain !important;
    margin-bottom: 1.2mm !important;
}

.qr-card .qr-code,
.qr-card .qr-image,
.qr-code,
.qr-image {
    width: 76% !important;
    max-width: 29mm !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0.8mm !important;
}

.qr-card .jetski-footer-logo,
.qr-card .footer-logo,
.jetski-footer-logo,
.footer-logo {
    width: 18% !important;
    max-height: 5mm !important;
    object-fit: contain !important;
    margin-top: 0.6mm !important;
    margin-bottom: 0.6mm !important;
}

.qr-card .details,
.qr-card .qr-details,
.qr-details,
.card-details {
    color: #000 !important;
    margin-top: 0.3mm !important;
    margin-bottom: 0.2mm !important;
}


/* FINAL QR CARD MERGED DESIGN
   Shared Race logo: new placement/size.
   QR + number/name/class: old size/placement, forced black.
   Jetski logo/copyright: new footer placement. */
.qr-label {
    padding: 1mm !important;
    display: grid !important;
    grid-template-rows: 16mm 44mm 16.8mm 8.2mm !important;
    align-items: center !important;
    justify-items: center !important;
    color: #000 !important;
}

.qr-top-space {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.qr-sr-logo {
    width: 47mm !important;
    max-width: 98% !important;
    height: auto !important;
    max-height: 15.8mm !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.qr-main {
    position: relative !important;
    width: 44mm !important;
    height: 44mm !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.qr-canvas,
.qr-canvas svg,
.qr-canvas canvas {
    width: 44mm !important;
    height: 44mm !important;
    display: block !important;
    margin: 0 !important;
}

.qr-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 11.2mm !important;
    height: 11.2mm !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: #fff !important;
    padding: .65mm !important;
}

.qr-bottom-space {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #000 !important;
}

.qr-bib {
    color: #000 !important;
    font-size: 35pt !important;
    font-weight: 900 !important;
    line-height: .82 !important;
    margin: 0 !important;
    transform: none !important;
}

.qr-driver {
    color: #000 !important;
    font-size: 13.7pt !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    max-width: 49mm !important;
    width: 49mm !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    transform-origin: center center !important;
}

.qr-class {
    color: #000 !important;
    font-size: 11.8pt !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-top: .2mm !important;
    transform-origin: center center !important;
}

.qr-credit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    color: #000 !important;
}

.qr-ja-logo {
    width: 11.75mm !important;
    height: auto !important;
    max-height: 4.2mm !important;
    object-fit: contain !important;
    margin: 0 0 .8mm 0 !important;
}

.qr-credit-text {
    color: #000 !important;
    font-size: 2.8pt !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
}

@media print {
    .qr-bib, .qr-driver, .qr-class, .qr-credit-text { color: #000 !important; }
}


/* QR card final no-overlap adjustment.
   Keep Shared Race logo/QR/footer layout, reduce number/name/class only enough
   to maintain clear spacing and 1mm margin above the Jetski logo. */
.qr-label {
    grid-template-rows: 16mm 44mm 15.2mm 9.8mm !important;
    padding: 1mm !important;
}

.qr-bottom-space {
    justify-content: center !important;
    gap: 0 !important;
    min-height: 15.2mm !important;
}

.qr-bib {
    color: #000 !important;
    font-size: 27pt !important;
    line-height: 0.86 !important;
    font-weight: 900 !important;
    margin: 0 0 0.45mm 0 !important;
}

.qr-driver {
    color: #000 !important;
    font-size: 11.2pt !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    max-width: 48mm !important;
    width: 48mm !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 auto 0.35mm auto !important;
    transform-origin: center center !important;
}

.qr-class {
    color: #000 !important;
    font-size: 9.6pt !important;
    line-height: 1.0 !important;
    font-weight: 800 !important;
    margin: 0 0 1mm 0 !important;
    transform-origin: center center !important;
}

.qr-credit {
    justify-content: start !important;
    min-height: 9.8mm !important;
    padding-top: 0 !important;
}

.qr-ja-logo {
    width: 11.75mm !important;
    max-height: 4.2mm !important;
    margin-top: 0 !important;
    margin-bottom: 0.65mm !important;
}

.qr-credit-text {
    color: #000 !important;
    font-size: 2.65pt !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
}

@media print {
    .qr-bib, .qr-driver, .qr-class, .qr-credit-text {
        color: #000 !important;
    }
}


.home-live-list{list-style:none;margin:10px 0 14px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.home-live-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.home-live-list .mini-play{flex:0 0 auto}
.home-live-list span{line-height:1.2}
.home-live-list .live{color:#31d36b}
html[data-theme="light"] .home-live-list li{background:#f1f5f9;border-color:#cbd5e1}


/* Shared Race wallcaster broadcast page */
.wallcast-body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #05070d !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.wallcast-header {
    height: 58px;
    display: grid;
    grid-template-columns: 170px 1fr 130px;
    align-items: center;
    gap: 16px;
    padding: 6px 14px;
    box-sizing: border-box;
    background: linear-gradient(90deg, #090d16, #111827);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.wallcast-logo {
    display: block;
    object-fit: contain;
    max-height: 44px;
}

.wallcast-logo-ja {
    max-width: 160px;
    justify-self: start;
}

.wallcast-logo-sr {
    max-height: 52px;
    max-width: 250px;
    justify-self: center;
}

.wallcast-logo-club {
    max-width: 120px;
    justify-self: end;
}

.wallcast-layout {
    height: calc(100vh - 58px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.timing-tower {
    flex: 0 0 auto;
    width: max-content;
    min-width: 255px;
    max-width: 380px;
    background: rgba(5,8,15,.96);
    border-right: 2px solid rgba(255,255,255,.16);
    box-shadow: 10px 0 25px rgba(0,0,0,.35);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.tower-title {
    padding: 9px 10px 7px;
    background: linear-gradient(180deg, #171b26, #090d16);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.tower-brand {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    color: #ffffff;
}

.tower-event {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: #dce7ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tower-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 10px;
    color: #aeb9cc;
    text-transform: uppercase;
}

.tower-meta strong {
    color: #ffffff;
    font-size: 13px;
}

.tower-table-wrap {
    overflow: hidden;
}

.tower-table {
    width: auto;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
    line-height: 1.05;
    color: #fff;
}

.tower-table th {
    padding: 5px 4px;
    color: #aeb9cc;
    font-size: 9px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.16);
    background: #0b111d;
}

.tower-table td {
    padding: 4px 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    white-space: nowrap;
}

.tower-row {
    background: rgba(255,255,255,.025);
    transition: background .25s ease, transform .25s ease;
}

.tower-row:nth-child(even) {
    background: rgba(255,255,255,.045);
}

.tower-row td:first-child {
    border-left: 4px solid #596275;
}

.tower-row.is-leader {
    background: rgba(139,92,246,.18);
}

.tower-row.is-leader td:first-child {
    border-left-color: #a855f7;
}

.tower-row.is-updated {
    animation: towerGreenFlash 4s ease-out;
}

.tower-pos {
    text-align: right;
    font-weight: 900;
    min-width: 18px;
}

.tower-bib {
    text-align: right;
    font-weight: 900;
    min-width: 22px;
    color: #ffffff;
}

.tower-driver {
    font-weight: 800;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tower-runs {
    text-align: center;
    font-weight: 900;
    color: #dce7ff;
    min-width: 18px;
}

.tower-last,
.tower-total {
    text-align: right;
    font-weight: 900;
}

.tower-total {
    color: #ffffff;
}

.tower-empty {
    padding: 12px !important;
    color: #aeb9cc;
    text-align: center;
}

.wallcast-video-area {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
    background: #05070d;
}

.wallcast-live-wall {
    height: 100% !important;
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    overflow: hidden !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-auto-rows: minmax(220px, 1fr);
}

.wallcast-live-wall .live-tile {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 8px !important;
}

.wallcast-live-wall[data-count="0"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.wallcast-live-wall[data-count="1"] { grid-template-columns: 1fr !important; }
.wallcast-live-wall[data-count="2"] { grid-template-columns: repeat(2, 1fr) !important; }
.wallcast-live-wall[data-count="3"],
.wallcast-live-wall[data-count="4"] { grid-template-columns: repeat(2, 1fr) !important; }
.wallcast-live-wall[data-count="5"],
.wallcast-live-wall[data-count="6"] { grid-template-columns: repeat(3, 1fr) !important; }
.wallcast-live-wall[data-count="7"],
.wallcast-live-wall[data-count="8"],
.wallcast-live-wall[data-count="9"] { grid-template-columns: repeat(3, 1fr) !important; }

@keyframes towerGreenFlash {
    0% { background: rgba(34,197,94,.55); }
    100% { background: inherit; }
}


.wallcast-live-wall .live-tile-player {
    will-change: transform;
    transform: translateZ(0);
}
.timing-tower {
    contain: layout paint;
}

/* Shared Race Telemetry */
.track-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}.check-row{display:flex;gap:.6rem;align-items:center}.check-row input{width:auto}.track-cal-wrap{position:relative;display:inline-block;max-width:100%}.track-cal-wrap img{display:block;max-width:100%;height:auto;border-radius:14px}.cal-point{position:absolute;display:none;align-items:center;justify-content:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;font-weight:800;background:#111;color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45);pointer-events:none}.cal-a{background:#2457ff}.cal-b{background:#18a558}.live-track-map{position:relative;overflow:hidden;border-radius:18px;min-height:360px;background:rgba(255,255,255,.06)}.live-track-map>img{display:block;width:100%;height:auto}.empty-map{padding:4rem;text-align:center;opacity:.7}.track-car-marker{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#20c45a;color:#fff;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.5);font-weight:900;z-index:5}.track-car-marker.live{background:#20c45a}.track-car-marker.offline{background:#7a7a7a;color:#eee;opacity:.8}.track-car-marker span{position:relative;z-index:2}.track-car-marker b{position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:20px solid #fff;top:-18px;left:50%;margin-left:-8px;transform-origin:50% 38px}.track-car-marker.offline b{border-bottom-color:#d8d8d8}.track-car-marker .track-marker-speed-label{position:absolute;left:50%;transform:translateX(-50%);top:48px;display:block;padding:2px 7px;border-radius:999px;background:rgba(2,6,23,.82);border:1px solid rgba(255,255,255,.55);color:#fff;font-style:normal;font-weight:900;line-height:1.15;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.85);box-shadow:0 3px 10px rgba(0,0,0,.38);pointer-events:none;z-index:6}.track-car-marker.offline .track-marker-speed-label{background:rgba(80,80,80,.82);color:#eee;border-color:rgba(255,255,255,.35)}.telemetry-overlay-panel{position:absolute;right:1rem;top:1rem;padding:.8rem 1rem;border-radius:14px;background:rgba(0,0,0,.55);color:#fff}.g-meter{position:relative;width:110px;height:110px;border-radius:50%;border:2px solid rgba(255,255,255,.65)}.g-meter-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;left:48px;top:48px}
.cal-toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 1rem}.cal-table{width:100%;border-collapse:collapse;margin:1rem 0}.cal-table th,.cal-table td{padding:.45rem;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:middle}.cal-table th{text-align:left}.cal-table input{width:100%;min-width:90px}.cal-table tr.selected{outline:2px solid rgba(64,156,255,.75);background:rgba(64,156,255,.12)}.button.small{padding:.35rem .6rem;font-size:.85rem}.button.danger{background:#a53333}.cal-generic{background:#2457ff}.cal-point{min-width:28px;padding:0 .25rem;width:auto;max-width:56px;overflow:hidden}


/* v18 header layout: move Jetski logo beside Home in the main navigation */
.integrated-brand-row, .brand-row {
    position: relative !important;
    justify-content: center !important;
}
.center-brand {
    flex: 0 1 auto !important;
    text-align: center !important;
}
.right-header {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.corner-brand-left { display: none !important; }
.main-nav {
    max-width: 1220px !important;
    margin: 8px auto 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    text-align: left !important;
}
.main-nav .nav-brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    margin: 5px 8px 5px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.main-nav .nav-brand-logo img {
    display: block !important;
    height: 42px !important;
    width: auto !important;
    max-width: 110px !important;
    object-fit: contain !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 4px !important;
}
@media (max-width: 900px) {
    .main-nav { padding: 0 10px !important; justify-content: center !important; }
    .main-nav .nav-brand-logo img { height: 34px !important; max-width: 78px !important; }
    .right-header { position: static !important; transform: none !important; }
    .integrated-brand-row, .brand-row { justify-content: space-between !important; }
}


/* v19 header layout: Jetski logo restored to top-left, Shared Race logo moved into nav */
.header-center-spacer { flex: 1 1 auto !important; min-width: 0 !important; }
.main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: min(1120px, calc(100% - 32px)) !important;
    margin: 10px auto 0 !important;
    text-align: left !important;
}
.nav-sharedrace-logo {
    height: 48px !important;
    min-width: 150px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.nav-sharedrace-logo img {
    max-height: 48px !important;
    max-width: 150px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}
.nav-brand-logo { display: none !important; }
.corner-brand-left { display: flex !important; align-items: center !important; }
.jetski-corner-logo { display: block !important; max-width: 150px !important; max-height: 52px !important; }
@media(max-width:760px){
    .main-nav { width: calc(100% - 16px) !important; overflow-x: auto !important; flex-wrap: nowrap !important; }
    .nav-sharedrace-logo { min-width: 110px !important; height: 38px !important; }
    .nav-sharedrace-logo img { max-width: 110px !important; max-height: 38px !important; }
}

/* v20 compact header layout */
.app-header{padding:10px 20px;}
.header-strip{display:flex;align-items:center;gap:18px;width:100%;}
.header-strip .corner-brand-left{position:static;display:flex;align-items:center;flex:0 0 auto;}
.header-strip .jetski-corner-logo{max-height:58px;max-width:112px;}
.shared-race-header-brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;}
.shared-race-header-logo{display:block;max-height:92px;max-width:230px;object-fit:contain;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
.header-main-nav{margin:0;text-align:left;display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;}
.header-main-nav a{margin:0;white-space:nowrap;}
.header-strip .right-header{margin-left:auto;flex:0 0 auto;}
.nav-sharedrace-logo{display:none!important;}
.integrated-brand-row{display:none!important;}
@media (max-width: 900px){
  .header-strip{flex-wrap:wrap;gap:10px;}
  .shared-race-header-logo{max-height:64px;max-width:170px;}
  .header-main-nav{order:3;flex-basis:100%;overflow-x:auto;padding-bottom:2px;}
  .header-strip .right-header{margin-left:auto;}
}

/* Remote display specific pages - no site header/navigation */
.remote-display-body{margin:0;background:#07111f;color:#fff;overflow:hidden;font-family:Arial,Helvetica,sans-serif;width:100vw;height:100vh}.remote-display-brand{letter-spacing:.14em;color:#78a7ff;font-weight:900;font-size:18px;text-transform:uppercase}.remote-display-logo{height:78px;width:auto;object-fit:contain}.remote-results-screen{height:100vh;box-sizing:border-box;padding:32px;display:flex;flex-direction:column;gap:22px;background:radial-gradient(circle at 50% 0,#15243b 0,#07111f 58%,#030810 100%)}.remote-results-header{display:flex;align-items:center;justify-content:space-between;gap:24px}.remote-results-header h1{font-size:56px;line-height:1.05;margin:6px 0 8px}.remote-results-header.compact h1{font-size:38px}.remote-results-meta{display:flex;gap:24px;color:#c8d7ef;font-size:24px}.remote-results-card{flex:1;min-height:0;background:rgba(30,45,70,.88);border:1px solid rgba(255,255,255,.15);border-radius:22px;box-shadow:0 20px 70px rgba(0,0,0,.35);overflow:hidden}.remote-results-table{width:100%;border-collapse:collapse;font-size:26px}.remote-results-table th{position:sticky;top:0;background:#16253b;color:#cfe0ff;text-align:left;padding:16px 14px;border-bottom:2px solid rgba(255,255,255,.16);white-space:nowrap}.remote-results-table td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.09);white-space:nowrap}.remote-results-table tr.leader td{background:rgba(128,79,255,.28);font-weight:900}.remote-results-table .pos,.remote-results-table .bib,.remote-results-table .total{font-weight:900}.remote-results-table .used{color:#d8c8ff;background:rgba(128,79,255,.18)}.remote-results-table .pb{color:#85ff9b}.remote-results-table .bad{color:#ff7676}.remote-results-table .dns{color:#aaa}.remote-map-screen{height:100vh;box-sizing:border-box;padding:18px;display:flex;gap:18px;background:#050d18}.remote-map-tower{height:calc(100vh - 36px);width:360px!important;min-width:360px;max-width:360px}.remote-map-panel{flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(30,45,70,.78);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:18px;box-sizing:border-box}.remote-map-header{display:flex;justify-content:space-between;align-items:center;padding:0 4px 12px}.remote-map-header h1{font-size:36px;margin:4px 0 0}.remote-live-track-map{flex:1;width:100%;height:auto;min-height:0;margin:0;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#02060b}.remote-live-track-map img{width:100%;height:100%;object-fit:contain;display:block}.remote-replay-screen{height:100vh;box-sizing:border-box;padding:20px;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:20px;background:radial-gradient(circle at 50% 0,#142238 0,#07111f 58%,#02060d 100%)}.remote-replay-results{min-width:0;display:flex;flex-direction:column;gap:14px}.replay-wall-results-card{min-height:0}.replay-wall-results-table{font-size:20px}.replay-wall-results-table th{padding:10px 9px}.replay-wall-results-table td{padding:9px}.remote-replay-tiles{min-width:0;display:flex;flex-direction:column;gap:14px}.remote-replay-title{height:78px;display:flex;align-items:center;gap:18px;font-weight:900;font-size:34px}.remote-replay-title img{height:70px;width:auto}.replay-wall-tile-list{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,1fr);gap:14px}.replay-wall-tile{position:relative;overflow:hidden;border-radius:18px;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 40px rgba(0,0,0,.35)}.replay-wall-tile video{width:100%;height:100%;object-fit:cover;display:block}.replay-wall-caption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.86));display:flex;flex-direction:column;gap:2px}.replay-wall-caption strong{font-size:24px}.replay-wall-caption span{font-size:18px}.replay-wall-caption small{color:#c9d5e8}.replay-wall-empty{padding:28px;border-radius:16px;background:rgba(255,255,255,.08);color:#d8e4f6;font-size:22px}.wallcast-body .timing-tower,.remote-display-body .timing-tower{background:rgba(18,31,52,.95);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-sizing:border-box;padding:14px;color:#fff;overflow:hidden}.remote-display-body .tower-title{margin-bottom:12px}.remote-display-body .tower-brand{font-size:15px;font-weight:900;color:#78a7ff;letter-spacing:.12em}.remote-display-body .tower-event{font-size:19px;font-weight:900;line-height:1.15;margin:6px 0}.remote-display-body .tower-meta{display:flex;gap:12px;font-size:13px;color:#c6d4ea}.remote-display-body .tower-table{width:100%;border-collapse:collapse;font-size:16px}.remote-display-body .tower-table th,.remote-display-body .tower-table td{padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.09);text-align:left;white-space:nowrap}.remote-display-body .tower-row.is-leader td{background:rgba(128,79,255,.26);font-weight:900}.remote-display-body .tower-pos,.remote-display-body .tower-bib,.remote-display-body .tower-total{font-weight:900}.remote-display-body .tower-driver{max-width:145px;overflow:hidden;text-overflow:ellipsis}.remote-display-body .tower-empty{color:#c9d5e8;text-align:center;padding:18px!important}