/* ============================================================
   TrackMate — Premium Motorsport Theme
   "Midnight Racing" — Cinematic, immersive, premium feel
   ============================================================ */

/* ---- Design Tokens (theme-independent) ---- */
:root {
    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;
    --sp-10: 64px;

    /* Type scale */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 15px;
    --fs-xl: 16px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    --fs-4xl: 48px;

    /* Font weights */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* Font families */
    --font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* Border radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --view-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Brand colors (constant across themes) */
    --red: #ff1e2d;
    --red-bright: #ff4757;
    --red-dark: #cc0011;
    --purple: #b838ff;
    --green: #00e676;
    --yellow: #ffea00;
    --orange: #ff6d00;
    --blue: #42a5f5;
    --cyan: #00e5ff;

    /* Podium colors */
    --gold: #ffd700;
    --silver: #c0c0c0;
    --bronze: #cd7f32;

    /* Layout */
    --topnav-height: 48px;
}

/* ---- Dark Theme — "Midnight Racing" ---- */
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — deep blue-black atmosphere */
    --bg-base: #05060a;
    --bg-primary: #080a12;
    --bg-secondary: #0d1017;
    --bg-card: #0d1017;
    --bg-card-end: #111520;
    --bg-hover: #131720;
    --bg-input: #0f1219;
    --bg-elevated: #161b26;
    --bg-sidebar: #05060a;

    /* Text — warmer whites */
    --text-primary: #f0f2f8;
    --text-secondary: #7a8194;
    --text-dim: #3d4456;
    --text-on-accent: #fff;
    --text-heading-gradient-start: #ffffff;
    --text-heading-gradient-end: #7a8194;

    /* Borders — barely visible */
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --border-accent: rgba(255, 30, 45, 0.4);

    /* Shadows */
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 12px 40px rgba(255, 30, 45, 0.12), 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    /* Glows */
    --glow-red: 0 0 24px rgba(255, 30, 45, 0.15);
    --glow-red-strong: 0 4px 20px rgba(255, 30, 45, 0.4);
    --glow-purple: 0 0 24px rgba(184, 56, 255, 0.15);
    --glow-blue: 0 0 24px rgba(66, 165, 245, 0.15);

    /* Semantic alpha backgrounds */
    --green-alpha: rgba(0, 200, 83, 0.15);
    --yellow-alpha: rgba(255, 214, 0, 0.15);
    --red-alpha: rgba(255, 30, 45, 0.15);
    --purple-alpha: rgba(170, 0, 255, 0.12);
    --blue-alpha: rgba(33, 150, 243, 0.12);
    --green-alpha-subtle: rgba(0, 200, 83, 0.08);
    --yellow-alpha-subtle: rgba(255, 214, 0, 0.08);
    --red-alpha-subtle: rgba(255, 30, 45, 0.08);
    --purple-alpha-subtle: rgba(170, 0, 255, 0.06);
    --blue-alpha-subtle: rgba(33, 150, 243, 0.06);
    --blue-alpha-border: rgba(33, 150, 243, 0.15);
    --purple-alpha-border: rgba(170, 0, 255, 0.2);
    --green-alpha-border: rgba(0, 200, 83, 0.3);
    --red-alpha-border: rgba(255, 30, 45, 0.2);

    /* Gradients */
    --header-bg: transparent;
    --card-gradient: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card-end) 100%);
    --thead-gradient: linear-gradient(180deg, #111520 0%, #0d1017 100%);
    --body-bg-gradient: none;

    /* Ambient overlays */
    --ambient-red: radial-gradient(ellipse at 20% 0%, rgba(255,30,45,0.06) 0%, transparent 60%);
    --ambient-blue: radial-gradient(ellipse at 80% 100%, rgba(66,165,245,0.04) 0%, transparent 60%);

    /* Misc */
    --scrollbar-thumb: rgba(255,255,255,0.08);
    --scrollbar-thumb-hover: rgba(255,255,255,0.15);
    --overlay-subtle: rgba(255, 255, 255, 0.02);
    --overlay-white-08: rgba(255, 255, 255, 0.06);
    --row-stripe: rgba(255, 255, 255, 0.015);
    --row-border: rgba(255, 255, 255, 0.04);
    --red-glow: rgba(255, 30, 45, 0.3);
    --red-glow-light: rgba(255, 30, 45, 0.12);
    --border-glow: rgba(255, 30, 45, 0.15);
    --toast-bg: rgba(13, 16, 23, 0.92);
    --clickable-hover: rgba(184, 56, 255, 0.05);
    --lap-best-bg: rgba(170, 0, 255, 0.06);
    --grid-group-bg: rgba(170, 0, 255, 0.03);
    --grid-group-border: rgba(170, 0, 255, 0.2);
    --grid-header-border: rgba(170, 0, 255, 0.3);
    --tier-social-bg: rgba(33, 150, 243, 0.15);
    --tier-social-border: rgba(33, 150, 243, 0.3);
    --tier-club-bg: rgba(0, 200, 83, 0.15);
    --tier-club-border: rgba(0, 200, 83, 0.3);
    --tier-elite-bg: rgba(170, 0, 255, 0.15);
    --tier-elite-border: rgba(170, 0, 255, 0.3);
    --date-input-scheme: dark;
    --glass-bg: rgba(8, 10, 18, 0.8);
    --glass-border: rgba(255, 255, 255, 0.08);
}

/* ---- Light Theme ---- */
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg-base: #f3f4f8;
    --bg-primary: #edeef4;
    --bg-secondary: #e4e5ed;
    --bg-card: #ffffff;
    --bg-card-end: #f8f8fc;
    --bg-hover: #ececf2;
    --bg-input: #e0e1ea;
    --bg-elevated: #ffffff;
    --bg-sidebar: #e4e5ed;

    /* Text */
    --text-primary: #12141e;
    --text-secondary: #5a5d78;
    --text-dim: #8a8da6;
    --text-on-accent: #fff;
    --text-heading-gradient-start: #12141e;
    --text-heading-gradient-end: #5a5d78;

    /* Borders */
    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.14);
    --border-accent: rgba(255, 30, 45, 0.4);

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 12px 32px rgba(255, 30, 45, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* Glows */
    --glow-red: 0 0 16px rgba(255, 30, 45, 0.08);
    --glow-red-strong: 0 4px 12px rgba(255, 30, 45, 0.2);
    --glow-purple: 0 0 16px rgba(184, 56, 255, 0.08);
    --glow-blue: 0 0 16px rgba(66, 165, 245, 0.08);

    /* Semantic alpha backgrounds */
    --green-alpha: rgba(0, 180, 70, 0.12);
    --yellow-alpha: rgba(200, 170, 0, 0.12);
    --red-alpha: rgba(255, 30, 45, 0.1);
    --purple-alpha: rgba(150, 0, 220, 0.1);
    --blue-alpha: rgba(33, 120, 200, 0.1);
    --green-alpha-subtle: rgba(0, 180, 70, 0.06);
    --yellow-alpha-subtle: rgba(200, 170, 0, 0.06);
    --red-alpha-subtle: rgba(255, 30, 45, 0.06);
    --purple-alpha-subtle: rgba(150, 0, 220, 0.06);
    --blue-alpha-subtle: rgba(33, 120, 200, 0.06);
    --blue-alpha-border: rgba(33, 120, 200, 0.2);
    --purple-alpha-border: rgba(150, 0, 220, 0.2);
    --green-alpha-border: rgba(0, 180, 70, 0.25);
    --red-alpha-border: rgba(255, 30, 45, 0.15);

    /* Gradients */
    --header-bg: transparent;
    --card-gradient: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card-end) 100%);
    --thead-gradient: linear-gradient(180deg, #f0f0f4 0%, #e8e8ed 100%);
    --body-bg-gradient: none;

    /* Ambient overlays */
    --ambient-red: radial-gradient(ellipse at 20% 0%, rgba(255,30,45,0.03) 0%, transparent 60%);
    --ambient-blue: radial-gradient(ellipse at 80% 100%, rgba(66,165,245,0.02) 0%, transparent 60%);

    /* Misc */
    --scrollbar-thumb: rgba(0,0,0,0.12);
    --scrollbar-thumb-hover: rgba(0,0,0,0.2);
    --overlay-subtle: rgba(0, 0, 0, 0.02);
    --overlay-white-08: rgba(0, 0, 0, 0.04);
    --row-stripe: rgba(0, 0, 0, 0.02);
    --row-border: rgba(0, 0, 0, 0.05);
    --red-glow: rgba(255, 30, 45, 0.15);
    --red-glow-light: rgba(255, 30, 45, 0.08);
    --border-glow: rgba(255, 30, 45, 0.1);
    --toast-bg: rgba(255, 255, 255, 0.95);
    --clickable-hover: rgba(184, 56, 255, 0.06);
    --lap-best-bg: rgba(170, 0, 255, 0.06);
    --grid-group-bg: rgba(170, 0, 255, 0.03);
    --grid-group-border: rgba(170, 0, 255, 0.15);
    --grid-header-border: rgba(170, 0, 255, 0.2);
    --tier-social-bg: rgba(33, 120, 200, 0.1);
    --tier-social-border: rgba(33, 120, 200, 0.2);
    --tier-club-bg: rgba(0, 180, 70, 0.1);
    --tier-club-border: rgba(0, 180, 70, 0.2);
    --tier-elite-bg: rgba(150, 0, 220, 0.1);
    --tier-elite-border: rgba(150, 0, 220, 0.2);
    --date-input-scheme: light;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.08);
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* Ambient background overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--ambient-red), var(--ambient-blue);
    pointer-events: none;
    z-index: 0;
}

/* Scrollbar — thin, rounded, nearly invisible */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.hidden {
    display: none !important;
}

/* ---- Racing Stripe ---- */
.racing-stripe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-dark), var(--red), var(--red-bright), var(--red));
    z-index: 200;
}

/* ============================================================
   LANDING PAGE — Cinematic Full-Screen
   ============================================================ */
.landing-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.landing-fullscreen.landing-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Background with slow cinematic zoom */
.landing-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    filter: brightness(0.2);
    animation: landing-zoom 30s ease-in-out infinite alternate;
}

@keyframes landing-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.landing-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%),
        linear-gradient(180deg, rgba(5,6,10,0.4) 0%, rgba(5,6,10,0.8) 100%);
}

.landing-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-7);
    max-width: 480px;
    width: 100%;
    padding: var(--sp-6);
    animation: fade-in-up 0.8s ease-out;
}

/* Logo — much larger with red glow */
.landing-logo {
    font-size: 64px;
    font-weight: var(--fw-black);
    letter-spacing: 6px;
    line-height: 1;
    filter: drop-shadow(0 4px 24px rgba(255, 30, 45, 0.3));
}

.landing-logo .logo-team {
    color: #fff;
}

.landing-logo .logo-sport {
    color: var(--red);
    text-shadow: 0 0 40px rgba(255, 30, 45, 0.5);
}

/* Tagline — luxury brand style */
.landing-tagline {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: calc(-1 * var(--sp-5));
}

/* Frosted glass login card with colored edge glow */
.landing-login-card {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-9);
    background: var(--glass-bg);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(255, 30, 45, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.landing-login-heading {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}

.landing-login-description {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
}

.landing-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.landing-login-form .search-input {
    font-size: var(--fs-xl);
    padding: 14px 18px;
    text-align: center;
    background: var(--bg-primary);
}

/* Login button — full-width, tall, shimmer on hover */
.landing-login-form .btn {
    padding: 16px var(--sp-6);
    font-size: var(--fs-lg);
    height: 52px;
    position: relative;
    overflow: hidden;
}

.landing-login-form .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: none;
}

.landing-login-form .btn:hover::after {
    animation: shimmer 0.8s ease forwards;
}

@keyframes shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Feature pills — hidden in new design */
.landing-features-row {
    display: none;
}

/* ============================================================
   APP SHELL — Top Nav + Main
   ============================================================ */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    position: relative;
    z-index: 1;
}

.app-shell.shell-visible {
    opacity: 1;
    visibility: visible;
}

/* ---- Top Navigation Bar ---- */
.topnav {
    position: sticky;
    top: 2px;
    left: 0;
    right: 0;
    height: var(--topnav-height);
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-5);
    z-index: 100;
    transition: background var(--transition-base);
    gap: var(--sp-2);
}

.topnav-logo {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    letter-spacing: 1px;
    user-select: none;
    margin-right: var(--sp-4);
    flex-shrink: 0;
}

.topnav-logo .logo-team {
    color: var(--text-primary);
}

.topnav-logo .logo-sport {
    color: var(--red);
}

.topnav-items {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Nav items — horizontal, icon + label in a row */
.topnav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.topnav-item svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.topnav-item:hover {
    color: var(--text-primary);
    background: var(--overlay-subtle);
}

.topnav-item.active {
    color: var(--red);
}

/* Active indicator — thin 2px red line on bottom */
.topnav-item.active::after {
    content: '';
    position: absolute;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: -1px;
    height: 2px;
    background: var(--red);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 8px rgba(255, 30, 45, 0.4);
}

/* Right section — breadcrumb, actions, theme toggle */
.topnav-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    flex-shrink: 0;
}

.topnav-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Action buttons in topnav — ghost style */
.topnav-actions .btn {
    background: transparent;
    border: 1px solid transparent;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
}

.topnav-actions .btn:hover {
    border-color: var(--border-hover);
}

.topnav-actions .btn-danger {
    color: var(--red);
}

.topnav-actions .btn-danger:hover {
    background: var(--red);
    color: var(--text-on-accent);
    border-color: var(--red);
}

/* Theme toggle — minimal icon button */
.topnav-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.topnav-theme:hover {
    color: var(--text-primary);
    background: var(--overlay-subtle);
}

/* Theme icon visibility */
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: none; }

/* Breadcrumb in topnav */
.breadcrumb {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb:empty {
    display: none;
}

.breadcrumb-separator {
    color: var(--text-dim);
    margin: 0 var(--sp-1);
    font-size: var(--fs-xs);
}

.breadcrumb-active {
    color: var(--text-secondary);
    font-weight: var(--fw-semibold);
}

/* ---- App Main ---- */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topnav-height));
}

/* ============================================================
   VIEW TRANSITIONS — Smoother with blur
   ============================================================ */
.view-section {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    transform: translateY(20px);
    filter: blur(4px);
    transition:
        opacity var(--view-transition),
        visibility var(--view-transition),
        transform var(--view-transition),
        filter var(--view-transition);
    pointer-events: none;
}

.view-section.view-active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

main {
    padding: var(--sp-6);
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

/* ============================================================
   BUTTONS — Micro-interactions
   ============================================================ */
.btn {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: scale(1.02);
}

.btn:active {
    transform: scale(0.98);
}

/* Focus rings — red glow */
.btn:focus-visible,
select:focus-visible,
.search-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--red-glow);
}

.btn-primary {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 100%);
    color: var(--text-on-accent);
    box-shadow: 0 2px 12px var(--red-glow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 100%);
    box-shadow: var(--glow-red-strong);
}

.btn-danger {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--border-accent);
}

.btn-danger:hover {
    background: var(--red);
    color: var(--text-on-accent);
    border-color: var(--red);
    box-shadow: 0 2px 16px var(--red-glow);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.btn-small {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
    background: var(--bg-input);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-small:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.btn-logout {
    margin-left: auto;
}

/* ============================================================
   SELECTS & INPUTS
   ============================================================ */
select {
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-family: var(--font);
    cursor: pointer;
    min-width: 200px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow);
}

.search-input {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-lg);
    font-family: var(--font);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow);
}

.search-input::placeholder {
    color: var(--text-dim);
}

/* ============================================================
   STATUS INDICATOR
   ============================================================ */
.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background var(--transition-base);
}

.status-indicator.offline .status-dot { background: var(--text-dim); }
.status-indicator.connecting .status-dot { background: var(--yellow); animation: pulse 1s infinite; }
.status-indicator.online .status-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================================================
   SECTION HEADER — Bold typography
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-7);
}

.section-header h2 {
    font-size: 32px;
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text-heading-gradient-start) 0%, var(--text-heading-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.badge {
    padding: var(--sp-1) var(--sp-3);
    background: linear-gradient(135deg, var(--purple-alpha) 0%, var(--blue-alpha) 100%);
    color: var(--purple);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--purple-alpha-border);
}

/* Section labels — luxury brand style */
.section-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
}

/* ============================================================
   VENUE GRID — Bold & Atmospheric
   ============================================================ */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-5);
}

.venue-card {
    background: var(--card-gradient);
    border: none;
    border-radius: var(--radius);
    padding: var(--sp-6);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fade-in-up 0.4s ease-out both;
    animation-delay: calc(var(--card-index, 0) * 80ms);
    box-shadow: var(--shadow-card);
}

/* Top accent — 2px gradient line */
.venue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red) 0%, var(--orange) 100%);
    transition: box-shadow var(--transition-base);
}

/* No corner decoration — clean cards */
.venue-card::after {
    display: none;
}

/* Hover — lift, glow, shadow bloom */
.venue-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.venue-card:hover::before {
    box-shadow: 0 0 16px rgba(255, 30, 45, 0.3);
}

/* Brand label */
.venue-card-brand {
    font-size: 9px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: var(--sp-1);
}

.venue-card.track-electric .venue-card-brand {
    color: var(--blue);
}

/* Type badge — tiny pill with icon text */
.venue-card-type {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: var(--sp-1);
}

.type-petrol {
    background: var(--red-alpha);
    color: var(--red);
    border: 1px solid var(--red-alpha-border);
}

.type-electric {
    background: var(--blue-alpha);
    color: var(--blue);
    border: 1px solid var(--blue-alpha-border);
}

/* Venue name — bigger, bolder */
.venue-card-name {
    font-size: 20px;
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-4);
    color: var(--text-primary);
}

.venue-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.venue-status {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.venue-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
}

.venue-status-dot.live {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pulse 2s infinite;
}

.venue-card-arrow {
    color: var(--text-dim);
    font-size: 18px;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.venue-card:hover .venue-card-arrow {
    color: var(--red);
    transform: translateX(6px);
}

.venue-card.track-electric:hover .venue-card-arrow {
    color: var(--blue);
}

/* Venue address */
.venue-card-address {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
}

/* ---- Loading ---- */
.loading-spinner {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

/* ============================================================
   RACE INFO BAR — Race Control Feel
   ============================================================ */
.race-info-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-7);
    padding: var(--sp-5) var(--sp-6);
    background: var(--card-gradient);
    border: none;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

/* Ambient red glow behind race info */
.race-info-bar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255, 30, 45, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.race-info-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 30, 45, 0.03));
    pointer-events: none;
}

.race-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.race-info-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    font-weight: var(--fw-semibold);
}

/* Larger, bolder values */
.race-info-value {
    font-size: 24px;
    font-weight: var(--fw-extrabold);
}

.state-badge {
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.state-started { background: var(--green-alpha); color: var(--green); }
.state-paused { background: var(--yellow-alpha); color: var(--yellow); }
.state-finished { background: var(--red-alpha); color: var(--red); }
.state-unknown { background: var(--bg-input); color: var(--text-secondary); }
.state-formation { background: var(--blue-alpha); color: var(--blue); }

/* ---- Flag Indicator ---- */
.flag-indicator {
    margin-left: auto;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.flag-none { background: var(--bg-input); color: var(--text-dim); }
.flag-green { background: var(--green-alpha); color: var(--green); border: 1px solid var(--green); }
.flag-yellow { background: var(--yellow-alpha); color: var(--yellow); border: 1px solid var(--yellow); animation: flag-blink 1s infinite; }
.flag-red { background: var(--red-alpha); color: var(--red); border: 1px solid var(--red); animation: flag-blink 0.5s infinite; }
.flag-safety { background: var(--yellow-alpha); color: var(--yellow); border: 1px solid var(--yellow); animation: flag-blink 1.5s infinite; }

@keyframes flag-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   LIVE CONTENT & LEADERBOARD TABLE — Race Control Feel
   ============================================================ */
.live-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-5);
}

.leaderboard-panel {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.leaderboard-table thead { background: var(--thead-gradient); }

.leaderboard-table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}

.leaderboard-table td {
    padding: 10px var(--sp-4);
    border-bottom: none;
    transition: background var(--transition-base);
}

/* No visible row borders — alternate rows with barely-there bg difference */
.leaderboard-table tbody tr { transition: background var(--transition-fast); }
.leaderboard-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.leaderboard-table tbody tr:hover { background: var(--bg-hover); }
.leaderboard-table .empty-row td { text-align: center; padding: var(--sp-8); color: var(--text-dim); }

/* Column widths */
.col-pos { width: 50px; text-align: center !important; }
.col-change { width: 30px; text-align: center !important; }
.col-driver { min-width: 160px; }
.col-kart { width: 60px; text-align: center !important; }
.col-last, .col-best { width: 110px; font-family: var(--font-mono); }
.col-laps-wrap { width: 60px; text-align: center !important; }
.col-gap { width: 100px; font-family: var(--font-mono); }

/* Position styling — large bold number with podium colors */
.pos-cell { font-weight: var(--fw-extrabold); font-size: 20px; text-align: center; }
.pos-1 { color: var(--gold); }
.pos-2 { color: var(--silver); }
.pos-3 { color: var(--bronze); }

/* Time styling */
.time-cell { font-family: var(--font-mono); font-size: var(--fs-base); }
.time-personal-best { color: var(--green); font-weight: var(--fw-bold); }
.time-new { animation: time-flash 1s ease-out; }

@keyframes time-flash {
    0% { background: var(--green-alpha); }
    100% { background: transparent; }
}

/* Current leader row — subtle left-edge red glow */
.leaderboard-table tbody tr.leader-row {
    background: linear-gradient(90deg, rgba(255,30,45,0.06) 0%, transparent 40%);
    box-shadow: inset 3px 0 0 var(--red);
}
.leaderboard-table tbody tr.leader-row:hover {
    background: linear-gradient(90deg, rgba(255,30,45,0.1) 0%, var(--bg-hover) 40%);
}

/* Position change */
.change-up { color: var(--green); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.change-down { color: var(--red); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.change-same { color: var(--text-dim); font-size: 10px; }

/* Driver name — 15px semibold */
.driver-name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); }

.kart-number {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 2px var(--sp-2);
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}

/* Row position animation */
.row-move-up { animation: row-up 0.5s ease-out; }
.row-move-down { animation: row-down 0.5s ease-out; }

@keyframes row-up {
    from { transform: translateY(10px); opacity: 0.7; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes row-down {
    from { transform: translateY(-10px); opacity: 0.7; }
    to { transform: translateY(0); opacity: 1; }
}

.lap-progress-text {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-family: var(--font-mono);
}

/* Position Badges */
.pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 26px;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-md);
    text-align: center;
}

.pos-badge-1 { background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.05)); color: var(--gold); border: 1px solid rgba(255,215,0,0.35); text-shadow: 0 0 12px rgba(255,215,0,0.4); }
.pos-badge-2 { background: linear-gradient(135deg, rgba(192,192,192,0.15), rgba(192,192,192,0.03)); color: var(--silver); border: 1px solid rgba(192,192,192,0.25); }
.pos-badge-3 { background: linear-gradient(135deg, rgba(205,127,50,0.18), rgba(205,127,50,0.04)); color: var(--bronze); border: 1px solid rgba(205,127,50,0.3); }
.pos-badge-other { background: var(--bg-input); color: var(--text-secondary); border: 1px solid transparent; }

.time-overall-best { color: var(--purple); font-weight: var(--fw-bold); text-shadow: 0 0 12px rgba(184,56,255,0.5); }
.gap-leader { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; font-size: var(--fs-xs); color: var(--gold); }

/* ============================================================
   NOTIFICATION PANEL — Cards style
   ============================================================ */
.notification-panel {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    box-shadow: var(--shadow-card);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.panel-header h3 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    font-weight: var(--fw-semibold);
}

.notification-feed { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.notification-feed::-webkit-scrollbar { width: 4px; }
.notification-feed::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

.notification-empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-dim); font-size: var(--fs-base); }

/* Notification items — card style with colored left accent + icon */
.notification-item {
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    animation: notification-in 0.3s ease-out;
    border-left: 3px solid transparent;
    background: var(--overlay-subtle);
}

.notification-item .notif-time { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; margin-right: var(--sp-2); }
.notification-item .notif-text { color: var(--text-primary); }

.notif-best-time { background: var(--purple-alpha-subtle); border-left-color: var(--purple); }
.notif-record { background: var(--yellow-alpha-subtle); border-left-color: var(--yellow); }
.notif-flag { background: var(--red-alpha-subtle); border-left-color: var(--red); }
.notif-flag-green { background: var(--green-alpha-subtle); border-left-color: var(--green); }
.notif-pit { background: var(--blue-alpha-subtle); border-left-color: var(--blue); }
.notif-penalty { background: var(--red-alpha-subtle); border-left-color: var(--red); }
.notif-info { background: var(--overlay-subtle); border-left-color: var(--text-dim); }

@keyframes notification-in {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
    position: fixed;
    top: 56px;
    right: var(--sp-6);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}

.toast {
    padding: 14px 22px;
    background: var(--toast-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    box-shadow: var(--shadow-elevated);
    animation: toast-in 0.3s ease-out;
    max-width: 400px;
    pointer-events: auto;
}

.toast-record { border-left: 4px solid var(--yellow); }
.toast-best { border-left: 4px solid var(--purple); }
.toast-flag { border-left: 4px solid var(--red); }
.toast-alltime {
    border-left: 4px solid var(--yellow);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), var(--toast-bg));
}
.toast.toast-out { animation: toast-out 0.3s ease-in forwards; }

@keyframes toast-in {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100px); opacity: 0; }
}

/* ============================================================
   STAT ITEMS — Larger, bolder
   ============================================================ */
.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 18px 22px;
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius);
    min-width: 100px;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-card);
}

.stat-item:nth-child(1) { border-top: 2px solid var(--purple); }
.stat-item:nth-child(2) { border-top: 2px solid var(--blue); }
.stat-item:nth-child(3) { border-top: 2px solid var(--gold); }
.stat-item:nth-child(4) { border-top: 2px solid var(--silver); }
.stat-item:nth-child(5) { border-top: 2px solid var(--bronze); }
.stat-item:nth-child(6) { border-top: 2px solid var(--green); }
.stat-item:nth-child(7) { border-top: 2px solid var(--cyan); }

.stat-value {
    font-size: 28px;
    font-weight: var(--fw-extrabold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    font-weight: var(--fw-semibold);
}

/* ============================================================
   DATA TABLE
   ============================================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.data-table thead { background: var(--thead-gradient); }

.data-table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}

.data-table td { padding: 10px var(--sp-4); border-bottom: 1px solid var(--row-border); }
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.data-table tbody tr:nth-child(even):hover { background: var(--bg-hover); }

/* ============================================================
   LEADERBOARD SECTION & PODIUM — 3D Feel
   ============================================================ */
.leaderboard-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.period-toggles {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.period-btn {
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-input);
    color: var(--text-secondary);
    border: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-right: 1px solid var(--border);
}

.period-btn:last-child { border-right: none; }
.period-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.period-btn.active { background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 100%); color: var(--text-on-accent); }

.lb-content { min-height: 200px; }
.lb-empty { text-align: center; padding: 60px var(--sp-6); color: var(--text-dim); font-size: var(--fs-md); line-height: 1.6; }
.lb-table { cursor: pointer; }
.lb-table tbody tr:hover { background: var(--bg-hover); }

.lb-top-1 td:first-child { color: var(--gold); }
.lb-top-2 td:first-child { color: var(--silver); }
.lb-top-3 td:first-child { color: var(--bronze); }

.lb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: var(--sp-4);
}

.lb-page-info { font-size: var(--fs-base); color: var(--text-secondary); }
.lb-pagination .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Podium Visualization — 3D Feel ---- */
.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-7);
    padding: var(--sp-6) 0 0;
    position: relative;
}

/* Ambient glow behind podium */
.lb-podium::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.podium-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-width: 130px;
    animation: fade-in-up 0.4s ease-out both;
}

.podium-block.podium-1 { animation-delay: 0.1s; }
.podium-block.podium-2 { animation-delay: 0s; }
.podium-block.podium-3 { animation-delay: 0.2s; }

.podium-driver {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    text-align: center;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-time {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.podium-pedestal {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: var(--fw-extrabold);
    font-size: 32px;
}

/* Taller blocks with metallic gradients & inner shadow */
.podium-pedestal-1 {
    height: 120px;
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    border: none;
    color: #1a1400;
    box-shadow: inset 0 2px 8px rgba(255,255,255,0.3), inset 0 -4px 12px rgba(0,0,0,0.2);
}

.podium-pedestal-2 {
    height: 84px;
    background: linear-gradient(180deg, #e0e0e0 0%, #8a8a8a 100%);
    border: none;
    color: #1a1a1a;
    box-shadow: inset 0 2px 8px rgba(255,255,255,0.4), inset 0 -4px 12px rgba(0,0,0,0.2);
}

.podium-pedestal-3 {
    height: 64px;
    background: linear-gradient(180deg, #cd7f32 0%, #8b5a1e 100%);
    border: none;
    color: #1a0e00;
    box-shadow: inset 0 2px 8px rgba(255,255,255,0.25), inset 0 -4px 12px rgba(0,0,0,0.2);
}

.podium-pos { font-size: 32px; }

/* ============================================================
   PROFILE — Magazine Style
   ============================================================ */
.profile-hero {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 50%, var(--bg-card) 100%);
    border: none;
    border-radius: var(--radius);
    padding: var(--sp-8) var(--sp-7);
    margin-bottom: var(--sp-6);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    animation: fade-in-up 0.3s ease-out;
    box-shadow: var(--shadow-card);
    min-height: 160px;
}

/* Gradient banner top */
.profile-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red), var(--purple), var(--blue));
}

.profile-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

/* Large name with gradient text */
.profile-hero-name {
    font-size: 36px;
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text-heading-gradient-start) 0%, var(--text-heading-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-hero-alias {
    font-size: var(--fs-xl);
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
}

.profile-hero-email {
    font-size: var(--fs-base);
    color: var(--text-dim);
}

.person-memberships {
    border: none;
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    background: var(--card-gradient);
    box-shadow: var(--shadow-card);
}

.memberships-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: var(--sp-2);
}

.membership-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

.membership-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-primary); }
.membership-expiry { font-size: var(--fs-xs); color: var(--text-dim); }

.person-stats-row {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}

/* Profile Venue Selector */
.profile-venue-selector-container {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 14px var(--sp-5);
    background: var(--card-gradient);
    border: none;
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-card);
}

.profile-venue-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    white-space: nowrap;
}

.profile-venue-selector-container select { flex: 1; min-width: 0; }

/* Profile Sub-Tabs */
.profile-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-card);
}

.profile-tab-btn {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    font-family: var(--font);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-right: 1px solid var(--border);
    text-align: center;
}

.profile-tab-btn:last-child { border-right: none; }
.profile-tab-btn:hover { color: var(--text-primary); background: var(--overlay-subtle); }
.profile-tab-btn.active { background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 100%); color: var(--text-on-accent); }

.profile-tab-content { animation: fade-in-up 0.3s ease-out; }

/* ============================================================
   LOADING & ERRORS
   ============================================================ */
.license-loading {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

/* Skeleton shimmer animation for loading */
.license-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--border);
    border-top-color: var(--red);
    border-right-color: var(--red-bright);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.license-error {
    padding: var(--sp-3) var(--sp-4);
    background: var(--red-alpha-subtle);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    color: var(--red);
    font-size: var(--fs-base);
    margin-top: var(--sp-3);
}

/* ============================================================
   ACTIVITY HISTORY / SESSION DETAIL
   ============================================================ */
.activity-history-section { animation: fade-in-up 0.3s ease-out; }

.activity-history-section .section-header h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
}

.activity-table-wrapper { overflow-x: auto; max-height: 600px; overflow-y: auto; }
.activity-table-wrapper::-webkit-scrollbar { width: 4px; height: 4px; }
.activity-table-wrapper::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

.back-nav { margin-bottom: var(--sp-4); }
.back-nav .btn { font-size: var(--fs-base); padding: var(--sp-2) var(--sp-4); }

.session-header {
    background: var(--card-gradient);
    border: none;
    border-left: 3px solid var(--purple);
    border-radius: var(--radius);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-card);
}

.session-header h2 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); margin-bottom: var(--sp-2); }

.session-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.session-meta-item {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    padding: var(--sp-1) var(--sp-3);
    background: var(--blue-alpha-subtle);
    border: 1px solid var(--blue-alpha-border);
    border-radius: var(--radius-md);
}

.session-meta-item:empty { display: none; }
.session-results-table { cursor: default; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--clickable-hover) !important; }

.lap-detail-block {
    margin-bottom: var(--sp-2);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.lap-detail-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card-gradient);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lap-detail-header:hover { background: var(--bg-hover); }
.lap-detail-meta { margin-left: auto; font-size: var(--fs-sm); color: var(--text-secondary); font-family: var(--font-mono); }
.lap-detail-toggle { font-size: 10px; color: var(--text-dim); margin-left: var(--sp-2); }
.lap-detail-body { border-top: 1px solid var(--border); }
.lap-times-table { border: none; border-radius: 0; }
.lap-best { background: var(--lap-best-bg); }
.session-driver-row { cursor: default; }

/* ============================================================
   BOOKINGS / AVAILABILITY — Clean Grid
   ============================================================ */
.bookings-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.bk-date-input { max-width: 180px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); color-scheme: var(--date-input-scheme); }
.bk-content { min-height: 200px; }
.bk-empty { text-align: center; padding: 60px; color: var(--text-dim); font-size: var(--fs-md); }

.bk-summary-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 16px 22px;
    background: var(--card-gradient);
    border: none;
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-card);
}

.bk-summary-venue { font-weight: var(--fw-extrabold); font-size: var(--fs-lg); }
.bk-summary-count { margin-left: auto; font-size: var(--fs-sm); color: var(--text-secondary); font-family: var(--font-mono); }
.bk-date-label { padding: 2px var(--sp-2); background: var(--bg-input); border-radius: var(--radius-md); font-size: var(--fs-xs); color: var(--text-secondary); }
.bk-resource-group { margin-bottom: var(--sp-6); }

.bk-resource-header {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}

.bk-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }

/* Slot cards — taller, thicker left accent */
.bk-slot-card {
    background: var(--card-gradient);
    border: none;
    border-radius: var(--radius);
    padding: var(--sp-5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid var(--text-dim);
    box-shadow: var(--shadow-card);
    position: relative;
}

.bk-slot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.bk-slot-card.bk-capacity-high { border-left-color: var(--green); }
.bk-slot-card.bk-capacity-medium { border-left-color: var(--yellow); }
.bk-slot-card.bk-capacity-low { border-left-color: var(--orange); }
.bk-slot-card.bk-capacity-full { border-left-color: var(--red); opacity: 0.4; }
.bk-slot-card.bk-capacity-unknown { border-left-color: var(--blue); }

/* Time — 24px bold monospace */
.bk-slot-time { font-size: 24px; font-weight: var(--fw-extrabold); font-family: var(--font-mono); margin-bottom: var(--sp-1); color: var(--text-primary); }
.bk-slot-time-single { /* single block — inherits from parent */ }
.bk-block-time { font-size: var(--fs-base); font-weight: var(--fw-bold); font-family: var(--font-mono); line-height: 1.6; color: var(--text-primary); }
.bk-block-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-right: var(--sp-2); font-family: var(--font-body); }
.bk-slot-name { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: var(--sp-3); font-weight: var(--fw-medium); }

/* Capacity — progress bar visualization */
.bk-slot-capacity { display: flex; align-items: center; gap: var(--sp-2); }
.bk-capacity-text { font-size: var(--fs-sm); font-weight: var(--fw-bold); font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.bk-spots-full { color: var(--red); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: 1px; }

/* #GRID Member Events */
.bk-grid-group { border: 1px solid var(--grid-group-border); border-radius: var(--radius); padding: var(--sp-4); background: var(--grid-group-bg); }
.bk-grid-header { color: var(--purple) !important; border-bottom-color: var(--grid-header-border) !important; }
.bk-grid-card { border-left-color: var(--purple) !important; }
.bk-grid-card.bk-capacity-high { border-left-color: var(--green) !important; }
.bk-grid-card.bk-capacity-medium { border-left-color: var(--yellow) !important; }
.bk-grid-card.bk-capacity-low { border-left-color: var(--orange) !important; }
.bk-grid-card.bk-capacity-full { border-left-color: var(--red) !important; }

.bk-tier-badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }

.bk-tier-badge {
    display: inline-block;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bk-tier-social { background: var(--tier-social-bg); color: var(--blue); border: 1px solid var(--tier-social-border); }
.bk-tier-club { background: var(--tier-club-bg); color: var(--green); border: 1px solid var(--tier-club-border); }
.bk-tier-elite { background: var(--tier-elite-bg); color: var(--purple); border: 1px solid var(--tier-elite-border); }

/* ============================================================
   RACE STATS GRID
   ============================================================ */
.race-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-4);
}

.race-stats-card {
    background: var(--card-gradient);
    border: none;
    border-radius: var(--radius);
    padding: var(--sp-6);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow-card);
}

.race-stats-card:nth-child(1) { border-top: 2px solid var(--purple); }
.race-stats-card:nth-child(2) { border-top: 2px solid var(--blue); }
.race-stats-card:nth-child(3) { border-top: 2px solid var(--green); }
.race-stats-card:nth-child(4) { border-top: 2px solid var(--cyan); }
.race-stats-card:nth-child(5) { border-top: 2px solid var(--yellow); }
.race-stats-card:nth-child(6) { border-top: 2px solid var(--orange); }
.race-stats-card:nth-child(7) { border-top: 2px solid var(--red); }
.race-stats-card:nth-child(8) { border-top: 2px solid var(--silver); }

.race-stats-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.race-stats-value { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); font-family: var(--font-mono); color: var(--text-primary); margin-bottom: var(--sp-1); }
.race-stats-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: var(--fw-semibold); }

/* ---- Profile Sections (Achievements & Career) ---- */
.profile-section {
    margin-bottom: var(--sp-6);
}
.profile-section-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: var(--sp-4);
}

/* Achievements grid */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3);
}
.achievement-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.achievement-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
.achievement-unlocked {
    border-left: 3px solid var(--green);
}
.achievement-locked {
    opacity: 0.5;
    border-left: 3px solid var(--border);
}
.achievement-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}
.achievement-info {
    flex: 1;
    min-width: 0;
}
.achievement-name {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}
.achievement-desc {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    margin-bottom: var(--sp-2);
}
.achievement-progress {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.achievement-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.achievement-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}
.achievement-progress-text {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Career section */
.career-overview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
}
.career-level {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.career-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2) var(--sp-4);
    background: linear-gradient(135deg, var(--purple), var(--blue));
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    border-radius: var(--radius-full);
}
.career-level-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.career-xp {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.career-xp-bar {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.career-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--blue));
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}
.career-xp-text {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.career-stat {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .live-content { grid-template-columns: 1fr; }
    .notification-panel { max-height: 300px; }
}

@media (max-width: 768px) {
    .racing-stripe { height: 2px; }

    /* Top nav becomes compact */
    .topnav {
        padding: 0 var(--sp-3);
        gap: var(--sp-1);
    }

    .topnav-logo { margin-right: var(--sp-2); }

    .topnav-item span { display: none; }
    .topnav-item { padding: var(--sp-2); }

    .topnav-right { gap: var(--sp-2); }
    .breadcrumb { display: none; }

    main { padding: var(--sp-4); }

    .venue-grid { grid-template-columns: 1fr; }
    .venue-card { padding: var(--sp-5); }
    .venue-card-name { font-size: var(--fs-xl); }

    .race-info-bar { flex-wrap: wrap; gap: var(--sp-4); }
    .race-info-value { font-size: var(--fs-xl); }

    .leaderboard-table { font-size: var(--fs-sm); }
    .leaderboard-table th, .leaderboard-table td { padding: var(--sp-2) var(--sp-3); }
    .col-gap { display: none; }
    .col-laps-wrap { width: 50px; }
    .pos-badge { width: 26px; height: 22px; font-size: var(--fs-sm); }
    .pos-cell { font-size: var(--fs-xl); }

    .leaderboard-controls { flex-direction: column; align-items: stretch; }
    .bookings-controls { flex-direction: column; align-items: stretch; }
    .bk-date-input { max-width: none; }
    .bk-slots-grid { grid-template-columns: 1fr; }
    .period-toggles { flex-wrap: wrap; }

    .profile-hero { flex-direction: column; text-align: center; padding: var(--sp-6); min-height: auto; }
    .btn-logout { margin: 0 auto; }
    .profile-hero-name { font-size: var(--fs-2xl); }
    .person-stats-row { gap: var(--sp-3); }
    .stat-value { font-size: var(--fs-2xl); }

    .profile-tabs { flex-wrap: wrap; }
    .profile-tab-btn { font-size: var(--fs-xs); padding: var(--sp-3) var(--sp-2); letter-spacing: 0.5px; }

    .race-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .race-stats-card { padding: var(--sp-4); }
    .achievements-grid { grid-template-columns: 1fr; }

    .profile-venue-selector-container { flex-direction: column; align-items: stretch; gap: var(--sp-2); }

    .section-header h2 { font-size: var(--fs-2xl); }

    /* Podium responsive */
    .podium-block { min-width: 90px; }
    .podium-driver { font-size: var(--fs-xs); max-width: 90px; }
    .podium-pedestal-1 { height: 80px; }
    .podium-pedestal-2 { height: 56px; }
    .podium-pedestal-3 { height: 44px; }
    .podium-pos { font-size: var(--fs-2xl); }

    /* Landing responsive */
    .landing-logo { font-size: 40px; letter-spacing: 4px; }
    .landing-tagline { font-size: 10px; letter-spacing: 3px; }
    .landing-login-card { padding: var(--sp-7); }
}

@media (max-width: 480px) {
    .landing-login-card { padding: var(--sp-6); }
    .landing-logo { font-size: 32px; }
    .lb-podium { gap: var(--sp-2); }
    .podium-block { min-width: 70px; }
    .bk-slot-time { font-size: var(--fs-xl); }
}