/* ── Fonts ── */
        :root {
            --f-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            --f-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
        }

        body {
            font-family: var(--f-body);
            font-size: 15px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
            font-family: var(--f-display);
            letter-spacing: -0.025em;
        }

        .navbar-brand {
            font-family: var(--f-display);
            letter-spacing: -0.03em;
        }

        /* Eyebrow labels, filter labels, small caps */
        .text-uppercase.small, .form-label.text-uppercase,
        .col-form-label.text-muted.small { font-family: var(--f-mono); }

        /* Monospace metadata: dates, distances, badges */
        .badge-tag, .next-date, .next-date-display,
        .edition-pill, .foot-bottom { font-family: var(--f-mono); }

        .foot-grid h4 { font-family: var(--f-mono); }

        /* ── Design tokens ── */
        :root {
            --bg:          oklch(0.14 0.012 250);
            --bg2:         oklch(0.18 0.014 250);
            --bg3:         oklch(0.22 0.013 250);
            --line:        oklch(0.28 0.012 250);
            --line-soft:   oklch(0.24 0.010 250);
            --fg:          oklch(0.96 0.004 85);
            --fg-mute:     oklch(0.72 0.010 250);
            --fg-dim:      oklch(0.55 0.010 250);
            --accent:      oklch(0.74 0.18 25);
            --accent-ink:  oklch(0.16 0.010 25);
            --ok:          oklch(0.78 0.17 150);
            --ok-subtle:   oklch(0.20 0.025 150);
            --warn:        oklch(0.82 0.14 65);
            --warn-subtle: oklch(0.22 0.020 65);
            --danger-c:    oklch(0.68 0.19 25);
        }
        html[data-theme="light"] {
            --bg:          oklch(0.96 0.004 85);
            --bg2:         oklch(0.99 0.003 85);
            --bg3:         oklch(0.93 0.005 85);
            --line:        oklch(0.86 0.008 85);
            --line-soft:   oklch(0.91 0.006 85);
            --fg:          oklch(0.18 0.012 250);
            --fg-mute:     oklch(0.44 0.010 250);
            --fg-dim:      oklch(0.60 0.010 250);
            --accent:      oklch(0.62 0.19 25);
            --accent-ink:  oklch(0.16 0.010 25);
            --ok:          oklch(0.40 0.16 150);
            --ok-subtle:   oklch(0.92 0.04 150);
            --warn:        oklch(0.52 0.18 50);
            --warn-subtle: oklch(0.96 0.04 65);
            --danger-c:    oklch(0.50 0.18 25);
        }

        /* ── Base ── */
        body { background-color: var(--bg) !important; color: var(--fg) !important; }
        .container { max-width: 1360px !important; }

        /* ── Navbar ── */
        .navbar { background-color: var(--bg2) !important; border-bottom: 1px solid var(--line-soft); }
        .navbar-brand { font-weight: 700; font-size: 1.5rem; color: var(--accent) !important; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
        .brand-logo { height: 32px; width: auto; display: block; }
        html[data-theme="dark"] .brand-logo-light,
        html[data-theme="light"] .brand-logo-dark { display: none; }
        .navbar-nav .nav-link { color: var(--fg-mute) !important; }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--fg) !important; }
        .navbar-toggler { border-color: var(--line) !important; color: var(--fg-mute) !important; }
        .navbar-toggler-icon { filter: invert(1) opacity(0.7); }
        html[data-theme="light"] .navbar-toggler-icon { filter: none; }

        /* ── Theme toggle ── */
        #theme-toggle {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px;
            border: 1px solid var(--line); border-radius: 50%;
            background: transparent; color: var(--fg-mute);
            cursor: pointer; font-size: 15px;
            transition: color .15s, border-color .15s, background .15s;
        }
        #theme-toggle:hover { color: var(--fg); border-color: var(--fg); background: var(--bg3); }

        /* ── Dropdowns ── */
        .dropdown-menu { background-color: var(--bg2) !important; border-color: var(--line) !important; }
        .dropdown-item { color: var(--fg) !important; }
        .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg3) !important; color: var(--fg) !important; }
        .dropdown-divider { border-color: var(--line-soft) !important; }
        .dropdown-item.text-danger { color: var(--danger-c) !important; }

        /* ── Footer ── */
        footer { background-color: var(--bg) !important; color: var(--fg-mute) !important; margin-top: 80px; border-top: 1px solid var(--line-soft); padding: 64px 0 40px; }
        .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
        @media (max-width: 768px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
        @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
        .foot-grid h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; margin: 0 0 14px; }
        .foot-grid ul { list-style: none; padding: 0; margin: 0; }
        .foot-grid li { margin: 0 0 8px; }
        .foot-grid a { color: var(--fg-mute) !important; font-size: 14px; text-decoration: none; }
        .foot-grid a:hover { color: var(--fg) !important; }
        .foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-soft); color: var(--fg-dim); font-size: 12px; font-family: var(--f-mono); letter-spacing: 0.08em; }
        .foot-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--fg) !important; text-decoration: none; margin-bottom: 16px; }
        .foot-brand-mark { width: 28px; height: 28px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border-radius: 6px; font-family: var(--f-display); font-weight: 800; font-size: 15px; flex-shrink: 0; }
        .foot-tagline { color: var(--fg-mute); max-width: 320px; font-size: 14px; line-height: 1.6; margin: 0; }
        .foot-social { display: flex; gap: 10px; margin-top: 20px; }
        .foot-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--fg-mute) !important; font-size: 16px; text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; }
        .foot-social a:hover { color: var(--accent-ink) !important; background-color: var(--accent); border-color: var(--accent); }

        /* ── Accent buttons (btn-danger repurposed as accent) ── */
        .btn-danger, a.btn-danger {
            background-color: var(--accent) !important;
            border-color: var(--accent) !important;
            color: var(--accent-ink) !important;
        }
        .btn-danger:hover, a.btn-danger:hover {
            background-color: var(--fg) !important;
            border-color: var(--fg) !important;
            color: var(--bg) !important;
        }

        /* ── Eyebrow label ── */
        .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; }

        /* ── Event card ── */
        .ev-card {
            position: relative; display: flex; flex-direction: column;
            background: var(--bg2); border: 1px solid var(--line-soft);
            border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--fg);
            transition: transform .2s ease, border-color .2s, background .2s;
        }
        .ev-card:hover { transform: translateY(-3px); border-color: var(--line); background: var(--bg3); color: var(--fg); text-decoration: none; }

        .ev-card-media { position: relative; aspect-ratio: 5 / 3; overflow: hidden; flex-shrink: 0; }
        .ev-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ev-card-img-placeholder { background: var(--bg3); }

        .ev-card-media-top {
            position: absolute; top: 14px; left: 14px; right: 14px;
            display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
        }
        .ev-card-media-bottom { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 6px; }

        .ev-cat-chip {
            background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
            color: #fff; padding: 5px 10px; border-radius: 4px;
        }

        .fav-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; border-radius: 50%;
            background: rgba(0,0,0,0.55); color: #fff;
            backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.15);
            transition: transform .15s, background .15s, color .15s;
            text-decoration: none; flex-shrink: 0;
        }
        .fav-btn:hover { transform: scale(1.08); color: #fff; }
        .fav-btn.active { color: var(--accent); background: rgba(0,0,0,0.75); border-color: rgba(255,255,255,0.2); }

        /* ── Status pills ── */
        .pill {
            display: inline-flex; align-items: center; gap: 6px;
            font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
            padding: 4px 10px; border-radius: 999px;
            background: var(--bg2); border: 1px solid var(--line-soft); color: var(--fg);
            white-space: nowrap;
        }
        .pill.open { color: oklch(0.85 0.17 150); border-color: color-mix(in oklch, oklch(0.85 0.17 150) 30%, var(--line-soft)); }
        .pill.soldout { color: oklch(0.78 0.18 25); border-color: color-mix(in oklch, oklch(0.78 0.18 25) 30%, var(--line-soft)); }
        .pill.some-soldout { color: oklch(0.82 0.14 65); border-color: color-mix(in oklch, oklch(0.82 0.14 65) 30%, var(--line-soft)); }
        .pill.past { color: var(--fg-dim); }
        .pill.completed { color: oklch(0.72 0.12 250); border-color: color-mix(in oklch, oklch(0.72 0.12 250) 30%, var(--line-soft)); }
        html[data-theme="light"] .pill.open { color: oklch(0.40 0.16 150); }
        html[data-theme="light"] .pill.soldout { color: oklch(0.50 0.20 25); }
        html[data-theme="light"] .pill.some-soldout { color: oklch(0.52 0.18 50); }
        html[data-theme="light"] .pill.completed { color: oklch(0.45 0.14 250); }
        .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

        /* ── Card body ── */
        .ev-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
        .ev-card-title {
            font-family: var(--f-display); font-size: 20px; font-weight: 700;
            line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--fg);
        }
        .ev-card-meta { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: 11.5px; color: var(--fg-mute); letter-spacing: 0.03em; }
        .ev-card-meta .meta-city, .ev-card-meta .meta-date, .ev-card-meta .meta-distances { display: inline-flex; align-items: center; gap: 6px; }
        .meta-distance-values { display: inline-flex; flex-wrap: wrap; gap: 0 5px; }

        .ev-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
        .tag-chip { font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--fg-mute); letter-spacing: 0.04em; }

        .ev-card-dist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
        .dist-chip { font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--fg-mute); letter-spacing: 0.04em; }

        /* ── Legacy badge classes (event detail, organiser pages) ── */
        .badge-cat { background-color: var(--accent) !important; color: var(--accent-ink) !important; border-radius: 6px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; }
        .badge-tag { display: inline-block; background: var(--bg3) !important; color: var(--fg-mute) !important; border: 1px solid var(--line) !important; border-radius: 20px; padding: 2px 9px; font-size: 0.75rem; font-weight: 600; }
        .next-date { font-size: 0.85rem; font-weight: 600; color: var(--ok) !important; }

        /* ── Filter bar ── */
        .filter-bar { background: var(--bg2) !important; border-bottom: 1px solid var(--line) !important; padding: 16px 0; }
        .filter-divider { border: 0; border-top: 1px dashed var(--line-soft); margin: 12px 0; }
        .active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3) !important; border: 1px solid var(--line) !important; border-radius: 20px; padding: 4px 12px; font-size: 0.85rem; color: var(--fg) !important; text-decoration: none; }
        .filter-chip .remove { color: var(--fg-mute); font-size: 1rem; line-height: 1; }
        .filter-chip:hover .remove { color: var(--accent); }
        .location-note { background: var(--bg3) !important; border-left: 3px solid var(--accent) !important; border-radius: 0 6px 6px 0; padding: 8px 14px; font-size: 0.9rem; color: var(--fg) !important; }
        .location-error { background: var(--warn-subtle) !important; border-left: 3px solid var(--warn) !important; border-radius: 0 6px 6px 0; padding: 8px 14px; font-size: 0.9rem; color: var(--fg) !important; }
        .no-results { text-align: center; padding: 60px 0; color: var(--fg-mute) !important; }
        .no-results i { font-size: 3rem; display: block; margin-bottom: 16px; }

        /* ── Forms ── */
        .form-control, .form-select {
            background-color: var(--bg3) !important;
            color: var(--fg) !important;
            border-color: var(--line) !important;
        }
        .form-control:focus, .form-select:focus {
            background-color: var(--bg3) !important;
            color: var(--fg) !important;
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 20%, transparent) !important;
        }
        .form-control::placeholder { color: var(--fg-dim) !important; }
        .form-label { color: var(--fg) !important; }

        /* ── Bootstrap text utilities ── */
        .text-muted { color: var(--fg-mute) !important; }

        /* ── Detail page ── */
        .detail-hero { padding: 40px 0 0; }
        .detail-crumbs { display: flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.08em; margin-bottom: 28px; flex-wrap: wrap; }
        .detail-crumbs a { color: var(--fg-mute); text-decoration: none; }
        .detail-crumbs a:hover { color: var(--accent); }
        .detail-crumbs .sep { opacity: 0.4; }
        .detail-hero-grid { display: grid; grid-template-columns: 1fr 500px; gap: 48px; align-items: center; margin-bottom: 32px; }
        @media (max-width: 1100px) { .detail-hero-grid { grid-template-columns: 1fr; gap: 24px; } }
        .detail-hero-text .eyebrow { display: block; margin-bottom: 14px; }
        .detail-hero-text h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 4.8vw, 72px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; }
        .detail-hero-text .metaline { display: flex; flex-wrap: wrap; gap: 16px 24px; font-size: 14px; color: var(--fg-mute); padding: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-top: 20px; }
        .detail-hero-text .metaline span { display: inline-flex; align-items: center; gap: 6px; }
        .detail-hero-text .metaline .metaline-link { color: var(--fg-mute); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
        .detail-hero-text .metaline .metaline-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
        /* Retired events keep their page; this is the notice that says so. */
        .retired-banner { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 10px 14px; background: var(--warn-subtle) !important; border-left: 3px solid var(--warn) !important; border-radius: 0 6px 6px 0; font-size: 14px; color: var(--fg) !important; }
        .retired-banner i { color: var(--warn); line-height: 1.5; }
        .detail-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
        .detail-hero-media-card { position: relative; width: 100%; height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); }
        .detail-hero-media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .detail-hero-media-card .placeholder { width: 100%; height: 100%; background: var(--bg3); display: flex; align-items: center; justify-content: center; }
        @media (max-width: 768px) {
            .detail-hero-media-card { height: auto; }
            .detail-hero-media-card img { height: auto; object-fit: contain; }
            .detail-hero-media-card .placeholder { height: 200px; }
        }
        .media-card-chips { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
        .chip.solid { background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,0.15); font-size: 10.5px; padding: 4px 9px; border-radius: 4px; letter-spacing: 0.08em; font-family: var(--f-mono); }
        .detail-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg2); margin-bottom: 48px; }
        .detail-stat { padding: 22px 24px; border-right: 1px solid var(--line-soft); }
        .detail-stat:last-child { border-right: none; }
        .detail-stat .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; }
        .detail-stat .val { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--fg); }
        .detail-stat .val small { font-family: var(--f-mono); font-size: 11px; color: var(--fg-mute); font-weight: 400; margin-left: 4px; }
        @media (max-width: 768px) { .detail-stats-strip { grid-template-columns: repeat(2, 1fr); } .detail-stat:nth-child(2n) { border-right: none; } .detail-stat { border-bottom: 1px solid var(--line-soft); } }
        .detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 56px; padding-bottom: 80px; align-items: start; }
        @media (max-width: 1000px) { .detail-layout { grid-template-columns: 1fr; gap: 32px; } }
        .detail-section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line-soft); }
        .detail-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .detail-section .eyebrow { display: block; margin-bottom: 10px; }
        .detail-section h2 { font-family: var(--f-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0 0 20px; color: var(--fg); }
        .detail-section p { color: var(--fg-mute); line-height: 1.7; font-size: 16px; }
        .detail-map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: 14px; }
        /* Races table */
        .races-table { border-top: 1px solid var(--line); }
        .race-item { display: grid; grid-template-columns: 80px 1fr; gap: 36px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
        .race-item.has-open-expando { border-bottom: none; padding-bottom: 8px; }
        @media (max-width: 760px) { .race-item { grid-template-columns: 60px 1fr; gap: 20px; } }
        .gpx-thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line-soft); overflow: hidden; color: var(--fg); display: block; }
        .gpx-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
        .gpx-thumb-tag { position: absolute; bottom: 4px; left: 4px; font-size: 8.5px; letter-spacing: 0.12em; font-weight: 700; color: var(--fg-mute); background: var(--bg); padding: 1px 4px; border-radius: 2px; line-height: 1; font-family: var(--f-mono); }
        .gpx-thumb-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 20px; font-weight: 700; color: var(--fg-dim); }
        .gpx-thumb-btn { width: 72px; height: 72px; padding: 0; background: none; border: none; cursor: pointer; display: block; }
        .gpx-thumb-btn .gpx-thumb { transition: border-color .15s, transform .15s; }
        .gpx-thumb-btn:hover .gpx-thumb { border-color: var(--accent); transform: scale(1.03); }
        .race-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--fg); }
        .race-stats { display: flex; gap: 0; font-family: var(--f-mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.05em; flex-wrap: wrap; }
        .race-stats span + span::before { content: '·'; margin: 0 7px; color: var(--fg-dim); }
        .race-edition-date { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--fg); margin: 4px 0; }
        .race-ed-cta { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
        /* Edition save chip (per-edition "save to profile" control) */
        .ed-save-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-mute); cursor: pointer; text-decoration: none; line-height: 1.2; transition: border-color .15s, color .15s, background .15s; }
        .ed-save-chip:hover { border-color: var(--fg); color: var(--fg); }
        .ed-save-chip i.bi { font-size: 12px; }
        .ed-save-chip .ed-save-caret { font-size: 9px; opacity: 0.6; margin-left: 2px; }
        .ed-save-chip--watching { border-color: var(--line); color: var(--fg); }
        .ed-save-chip--entered { border-color: var(--accent); color: var(--accent); }
        .ed-save-chip--completed { border-color: var(--fg-mute); color: var(--fg-mute); background: var(--bg2); }
        .ed-save-menu { font-family: var(--f-display); font-size: 13px; min-width: 180px; }
        .ed-save-menu .dropdown-item { display: flex; align-items: center; gap: 8px; }
        .ed-save-menu .dropdown-item i.bi { width: 16px; }
        /* Race expando */
        .race-expando { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 4px 0 16px; }
        .race-expando-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 24px; flex-wrap: wrap; }
        .race-expando-head h3 { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; color: var(--fg); }
        .race-expando-tools { display: flex; gap: 8px; }
        .race-expando-body { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
        .rx-map { aspect-ratio: 16/7; border-radius: 10px; background: var(--bg3); border: 1px solid var(--line-soft); overflow: hidden; }
        .rx-elev { border-top: 1px solid var(--line-soft); padding-top: 16px; }
        .rx-elev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .elevation-wrapper { background: var(--bg3) !important; border-color: var(--line) !important; height: 150px; position: relative; padding: 8px 14px 4px; }
        .elevation-wrapper canvas { width: 100% !important; height: 100% !important; }
        /* Race date accordion (multi-date events) */
        .races-accordion { border-top: 1px solid var(--line); }
        .race-date-group { border-bottom: 1px solid var(--line); }
        .race-date-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 0; background: none; border: none; color: var(--fg); cursor: pointer; text-align: left; font-family: inherit; transition: opacity .15s; }
        .race-date-header:hover { opacity: 0.85; }
        .race-date-header.past { color: var(--fg-mute); }
        .race-date-header-left { display: flex; align-items: center; gap: 12px; }
        .race-date-label { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
        .race-date-past-tag { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--fg-mute); }
        .race-date-header-right { display: flex; align-items: center; gap: 14px; }
        .race-date-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
        .race-date-chevron { font-size: 18px; color: var(--fg-mute); transition: transform .2s ease; }
        .race-date-header.collapsed .race-date-chevron { transform: rotate(-90deg); }
        .race-date-body { padding-bottom: 8px; }
        .race-date-body .race-item:last-child { border-bottom: none; }
        .race-past-parent > .race-date-body { padding: 0 0 8px 16px; border-left: 1px solid var(--line-soft); margin-left: 4px; }
        .race-date-group.race-nested { border-bottom: 1px solid var(--line-soft); }
        .race-date-group.race-nested:last-child { border-bottom: none; }
        .race-date-group.race-nested > .race-date-header { padding: 12px 0; }
        .race-date-group.race-nested > .race-date-header .race-date-label { font-size: 15px; font-weight: 500; }
        .race-date-group.race-nested > .race-date-body { padding-left: 16px; border-left: 1px solid var(--line-soft); margin-left: 4px; }
        /* Aside */
        .detail-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
        @media (max-width: 1000px) { .detail-aside { position: static; } }
        .aside-card { background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 16px; padding: 22px; }
        .aside-card .eyebrow { display: block; margin-bottom: 10px; }
        .aside-card h3 { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.1; color: var(--fg); }
        .register-card { background: var(--fg); color: var(--bg); border-color: var(--fg); }
        .register-card .eyebrow { color: var(--bg); opacity: 0.55; }
        .register-card h3 { color: var(--bg); font-size: 28px; margin-bottom: 6px; }
        .register-card .sub { font-size: 13px; color: var(--bg); opacity: 0.7; }
        .big-btn { display: block; width: 100%; padding: 16px; margin-top: 16px; background: var(--accent); color: var(--accent-ink) !important; border-radius: 10px; text-align: center; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-decoration: none !important; transition: transform .15s; }
        .big-btn:hover { transform: translateY(-1px); }
        .register-card-link { display: block; text-align: center; margin-top: 10px; font-size: 12px; opacity: 0.75; font-weight: 600; color: var(--bg) !important; text-decoration: none; }
        .kv-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
        .kv-row:last-child { border-bottom: none; }
        .kv-row .k { color: var(--fg-mute); font-size: 13px; }
        .kv-row .v { font-weight: 600; font-family: var(--f-mono); font-size: 12.5px; color: var(--fg); text-align: right; }
        .aside-links { display: flex; flex-direction: column; }
        .aside-link { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--fg-mute); text-decoration: none; }
        .aside-link:last-child { border-bottom: none; }
        .aside-link:hover { color: var(--accent); }
        .text-accent { color: var(--accent) !important; }
        /* btn-accent and btn-ghost */
        .btn-accent { background: var(--accent) !important; color: var(--accent-ink) !important; border: none !important; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
        .btn-accent:hover { background: var(--fg) !important; color: var(--bg) !important; }
        .btn-ghost { background: transparent; color: var(--fg-mute); border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
        .btn-ghost:hover { background: var(--bg3); color: var(--fg); border-color: var(--line); }
        .btn-ghost.btn-sm { padding: 6px 12px; font-size: 12px; }

        /* ── Hero sections (home + listing + detail) ── */
        .hero, .listing-hero, .search-hero,
        .auth-hero, .favourites-hero, .profile-hero,
        .organiser-hero, .series-hero, .series-listing-hero {
            background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%) !important;
            color: var(--fg) !important;
        }

        /* ── Hero search box ── */
        .search-box { background: var(--bg3) !important; }

        /* ── Category cards (home) ── */
        .category-card { background: var(--bg2) !important; color: var(--fg) !important; box-shadow: none !important; border: 1px solid var(--line-soft) !important; }
        .category-card:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
        .category-card i { color: var(--accent) !important; }
        .section-title { color: var(--fg) !important; }

        /* ── Category / subcategory tabs ── */
        .subcategory-tabs { background: var(--bg2) !important; border-bottom: 1px solid var(--line) !important; }
        .btn-outline-secondary { color: var(--fg-mute) !important; border-color: var(--line) !important; background: transparent !important; }
        .btn-outline-secondary:hover { background: var(--bg3) !important; color: var(--fg) !important; }

        /* ── Breadcrumbs ── */
        .breadcrumb-item a { color: var(--fg-mute) !important; }
        .breadcrumb-item a:hover { color: var(--accent) !important; }
        .breadcrumb-item.active { color: var(--fg-mute) !important; }
        .breadcrumb-item + .breadcrumb-item::before { color: var(--fg-dim) !important; }

        /* ── Detail page cards ── */
        .detail-card { background: var(--bg2) !important; box-shadow: none !important; border: 1px solid var(--line-soft) !important; color: var(--fg) !important; }
        .map-card { background: var(--bg2) !important; box-shadow: none !important; border: 1px solid var(--line-soft) !important; }

        /* ── Race rows ── */
        .race-row { border-bottom-color: var(--line-soft) !important; }
        .race-row .distance { color: var(--fg) !important; }
        .section-label { color: var(--fg-dim) !important; }
        .text-muted-label { color: var(--fg-mute) !important; }
        .next-date-display { color: var(--ok) !important; }

        /* ── Edition pills ── */
        .edition-upcoming { background: var(--ok-subtle) !important; color: var(--ok) !important; border-color: color-mix(in oklch, var(--ok) 30%, var(--bg3)) !important; }
        .edition-past { background: var(--bg3) !important; color: var(--fg-dim) !important; border-color: var(--line) !important; }
        .edition-sold-out { background: var(--warn-subtle) !important; color: var(--warn) !important; border-color: color-mix(in oklch, var(--warn) 30%, var(--bg3)) !important; }
        .edition-cancelled { background: color-mix(in oklch, var(--danger-c) 10%, var(--bg3)) !important; color: var(--danger-c) !important; border-color: color-mix(in oklch, var(--danger-c) 30%, var(--bg3)) !important; }
        .edition-coming-soon { background: color-mix(in oklch, var(--accent) 12%, var(--bg3)) !important; color: var(--accent) !important; border-color: color-mix(in oklch, var(--accent) 30%, var(--bg3)) !important; }

        /* ── GPX/map elements ── */
        .gpx-collapse-btn { background: var(--bg3) !important; border-color: var(--line) !important; color: var(--fg-mute) !important; }
        .gpx-collapse-btn:hover { background: var(--bg2) !important; }
        .elevation-wrapper { background: var(--bg3) !important; border-color: var(--line) !important; }

        /* ── White bg sections (home) ── */
        section.bg-white, section[style*="background-color: #fff"], section[style*="background-color:#fff"] {
            background-color: var(--bg) !important;
        }

        /* ── Tables ── */
        .table { color: var(--fg) !important; border-color: var(--line) !important; }
        .table > :not(caption) > * > * { background-color: transparent !important; color: var(--fg) !important; border-color: var(--line-soft) !important; }

        /* ── Alerts ── */
        .alert { background-color: var(--bg3) !important; border-color: var(--line) !important; color: var(--fg) !important; }
        .alert-info { border-left-color: var(--accent) !important; }

        /* ── Cards (Bootstrap) ── */
        .card { background-color: var(--bg2) !important; border-color: var(--line-soft) !important; color: var(--fg) !important; }
        .card-header, .card-footer { background-color: var(--bg3) !important; border-color: var(--line-soft) !important; }

        /* ── Auth card (login/signup/reset) ── */
        .auth-card {
            background: var(--bg2) !important;
            box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
            border: 1px solid var(--line-soft) !important;
            color: var(--fg) !important;
        }
        .btn-google {
            background: var(--bg3) !important;
            border-color: var(--line) !important;
            color: var(--fg) !important;
        }
        .btn-google:hover { background: var(--bg2) !important; border-color: var(--fg-mute) !important; }
        .divider { color: var(--fg-dim) !important; }
        .divider::before, .divider::after { background: var(--line) !important; }
        .auth-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

        /* ── text-danger as accent (except destructive dropdown items) ── */
        .text-danger { color: var(--accent) !important; }
        .dropdown-item.text-danger { color: var(--danger-c) !important; }

        /* ── Listing page layout ── */
        .listing-head { padding: 40px 0 32px; border-bottom: 1px solid var(--line-soft); }
        .listing-crumbs { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 16px; }
        .listing-crumbs a { color: var(--fg-dim); text-decoration: none; }
        .listing-crumbs a:hover { color: var(--fg-mute); }
        .listing-title-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
        .listing-title-row h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin: 0; line-height: 1.05; }
        .listing-title-row .sub { font-family: var(--f-mono); font-size: 12px; color: var(--fg-mute); letter-spacing: 0.04em; }
        .listing-intro { max-width: 68ch; color: var(--fg-mute); font-size: 15px; line-height: 1.65; margin-bottom: 24px; }
        .listing-intro p:last-child { margin-bottom: 0; }

        /* Region cross-links (state page → its regions, region page → siblings) */

        /* Listing two-column layout */
        .listing-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 40px 0 80px; align-items: start; }
        @media (max-width: 900px) { .listing-layout { grid-template-columns: 1fr; } }

        /* Filter sidebar */
        .filter-panel { position: sticky; top: 80px; }
        @media (max-width: 900px) { .filter-panel { position: static; top: auto; } }
        .filter-group { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
        .filter-group:first-child { padding-top: 0; }
        .filter-group:last-child { border-bottom: none; }
        .filter-group-label { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 10px; }
        /* The label is all-caps, so its 1.5 line-height pads mostly below the
           baseline — descender space the text never uses — leaving the flex
           centring to align a box whose ink sits high. line-height:1 makes the
           box hug the caps; the padding keeps the row's original 15px height.
           Bootstrap Icons then pushes its glyph down again via
           `.bi::before { vertical-align: -.125em }`, so that is zeroed out. */
        .filter-accordion-label { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; line-height: 1; padding: 2px 0; }
        .filter-accordion-icon { font-size: 11px; line-height: 1; transition: transform .2s ease; }
        .filter-accordion-icon::before { display: block; vertical-align: 0; }
        .filter-accordion-label.collapsed .filter-accordion-icon { transform: rotate(-90deg); }
        /* The label's margin-bottom only exists to separate it from the options
           below. Collapsed there are none, so it was dead space that pushed the
           group's rule 10px further from the label than the 18px above it. */
        .filter-accordion-label.collapsed { margin-bottom: 0; }
        .filter-check { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; cursor: pointer; font-size: 13.5px; color: var(--fg-mute); user-select: none; }
        .filter-state-count { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--fg-dim); }
        .filter-check input[type="checkbox"], .filter-check input[type="radio"] { appearance: none; width: 15px; height: 15px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg3); flex-shrink: 0; cursor: pointer; position: relative; transition: border-color .15s, background .15s; margin: 0; }
        .filter-check input[type="radio"] { border-radius: 50%; }
        .filter-check input[type="checkbox"]:checked, .filter-check input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
        .filter-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 8px; border: 2px solid var(--accent-ink); border-top: none; border-left: none; transform: rotate(45deg); }
        .filter-check input[type="radio"]:checked::after { content: ''; position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); }
        .filter-check:hover { color: var(--fg); }
        .filter-text-input { background: var(--bg3) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--fg) !important; font-size: 13px !important; padding: 6px 10px !important; width: 100%; }
        .filter-text-input:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 20%, transparent) !important; }
        .filter-select { background: var(--bg3) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--fg) !important; font-size: 13px !important; padding: 6px 10px !important; width: 100%; }
        .filter-search-row { display: flex; gap: 6px; align-items: center; }
        .filter-search-row .filter-text-input { flex: 1; }
        .filter-search-btn { flex-shrink: 0; background: var(--accent); border: none; border-radius: 6px; color: var(--accent-ink); padding: 6px 10px; cursor: pointer; font-size: 13px; }
        .filter-search-btn:hover { opacity: .85; }
        .filter-labeled-input { display: flex; align-items: center; gap: 8px; }
        .filter-labeled-input .filter-text-input { flex: 1; }
        .filter-input-prefix { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); flex-shrink: 0; width: 24px; }
        .filter-inline { display: flex; gap: 6px; align-items: center; }
        .filter-inline .filter-text-input { flex: 1; }
        .filter-range-sep { font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); flex-shrink: 0; }

        /* Distance min/max inputs */
        .distance-unit-hint { font-family: var(--f-mono); font-size: 11px; color: var(--fg-mute); margin-top: 8px; }
        .distance-custom-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin: 14px 0 8px; }
        .filter-check-active { color: var(--fg) !important; }
        .filter-check-child { padding-left: 18px; }
        .filter-check-grandchild { padding-left: 36px; }
        .filter-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0; transition: border-color .15s, background .15s; }
        .filter-dot.active { background: var(--accent); border-color: var(--accent); }
        .filter-check:hover .filter-dot { border-color: var(--fg-mute); }
        .filter-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
        .filter-clear { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); text-decoration: none; margin-top: 20px; }
        .filter-clear:hover { color: var(--accent); }

        /* Results area */
        .results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        .results-count { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
        .pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 40px; }
        .pager-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-mute); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
        .pager-btn:hover { color: var(--fg); border-color: var(--fg); background: var(--bg3); text-decoration: none; }
        .pager-btn.disabled { color: var(--fg-dim); border-color: var(--line-soft); background: transparent; }
        .pager-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
        .active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
        .active-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in oklch, var(--accent) 10%, var(--bg3)); border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--line-soft)); color: var(--fg-mute); border-radius: 999px; padding: 4px 8px 4px 10px; font-size: 11.5px; font-family: var(--f-mono); text-decoration: none; letter-spacing: 0.03em; }
        .active-chip .chip-x { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--accent) 15%, var(--bg3)); color: var(--fg-dim); font-size: 11px; flex-shrink: 0; }
        .active-chip:hover { color: var(--fg); border-color: var(--accent); }
        .active-chip:hover .chip-x { background: var(--accent); color: var(--accent-ink); }

        /* 3-column event grid */
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        @media (max-width: 1200px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

        /* Auth pages (login/signup/etc) */
        .auth-wrap { max-width: 460px; margin: 64px auto 96px; padding: 0 20px; }
        .auth-eyebrow { display: block; margin-bottom: 14px; }
        .auth-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 5vw, 56px); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 12px; }
        .auth-sub { color: var(--fg-mute); font-size: 15px; margin: 0 0 32px; }
        .auth-card { background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 16px; padding: 28px; }
        .auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .15s, background .15s; }
        .auth-google:hover { border-color: var(--fg-mute); background: color-mix(in oklch, var(--bg3) 80%, var(--fg) 5%); color: var(--fg); }
        .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); }
        .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
        .auth-field { margin-bottom: 16px; }
        .auth-field label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 6px; font-weight: 500; }
        .auth-field input { width: 100%; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
        .auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 20%, transparent); }
        .auth-field input.is-invalid { border-color: var(--accent); }
        .auth-field .field-error { color: var(--accent); font-size: 12px; margin-top: 6px; }
        .auth-field .field-help { color: var(--fg-dim); font-size: 12px; margin-top: 6px; }
        .auth-error-box { background: color-mix(in oklch, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent); color: var(--fg); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
        .auth-check { display: flex; align-items: center; gap: 10px; margin: 4px 0; cursor: pointer; }
        .auth-check input[type="checkbox"] { appearance: none; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg3); margin: 0; position: relative; cursor: pointer; }
        .auth-check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
        .auth-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 8px; border: 2px solid var(--accent-ink); border-top: none; border-left: none; transform: rotate(45deg); }
        .auth-check span { font-size: 13px; color: var(--fg-mute); }
        .auth-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 18px; }
        .auth-link { color: var(--fg-mute); font-size: 13px; text-decoration: none; }
        .auth-link:hover { color: var(--fg); text-decoration: underline; }
        .auth-foot { text-align: center; margin-top: 24px; font-size: 13px; color: var(--fg-mute); }
        .auth-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
        .auth-foot a:hover { text-decoration: underline; }

        /* Date + countdown side-by-side in Next edition card */
        .next-edition-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .next-edition-row h3 { margin: 0; }

        /* Flip-clock countdown in Next edition card */
        .countdown { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
        .countdown-cards { display: flex; gap: 6px; justify-content: flex-end; }
        .countdown-card {
            position: relative;
            flex: 0 0 auto;
            width: 42px;
            height: 58px;
            background: color-mix(in oklch, var(--bg) 18%, transparent);
            border: 1px solid color-mix(in oklch, var(--bg) 25%, transparent);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 -8px 14px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .countdown-card::after {
            content: "";
            position: absolute;
            left: 0; right: 0; top: 50%;
            height: 1px;
            background: rgba(0,0,0,0.55);
            box-shadow: 0 1px 0 rgba(255,255,255,0.06);
        }
        .countdown-card span {
            font-family: var(--f-display);
            font-size: 36px;
            font-weight: 700;
            line-height: 1;
            color: var(--bg);
            letter-spacing: -0.04em;
        }
        .countdown-label {
            text-align: right;
            line-height: 1.25;
            font-family: var(--f-mono);
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--bg);
            opacity: 0.65;
        }

        /* Match register button size to neighbouring ghost buttons in detail actions */
        .detail-actions .btn-accent { padding: 8px 14px; font-size: 13px; border: 1px solid transparent !important; }

        /* Ghost-style favourite button (event detail actions) */
        .fav-ghost { gap: 8px; cursor: pointer; }
        .fav-ghost.active { color: var(--accent); border-color: var(--accent); }
        .fav-ghost.active:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

        /* Organiser socials in aside card */
        .organiser-socials { display: inline-flex; gap: 14px; align-items: center; }
        .organiser-socials a { color: var(--fg-mute); font-size: 16px; text-decoration: none; line-height: 1; display: inline-flex; }
        .organiser-socials a:hover { color: var(--fg); }

        /* "You might also like" header on event detail */
        .similar-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 40px 0 28px; gap: 24px; }
        .similar-head .eyebrow { display: block; margin-bottom: 10px; }
        .similar-head h2 { font-family: var(--f-display); font-size: 36px; margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--fg); }
        @media (max-width: 600px) { .similar-head h2 { font-size: 28px; } }
        .similar-section { padding-bottom: 80px; }

        /* ── Catch-all for legacy hardcoded inline colors in older templates ── */
        [style*="color: #ccc"], [style*="color:#ccc"] { color: var(--fg-mute) !important; }
        [style*="color: #aaa"], [style*="color:#aaa"] { color: var(--fg-mute) !important; }
        [style*="color: #0d1b2a"], [style*="color:#0d1b2a"] { color: var(--fg) !important; }
        [style*="color: #e63946"], [style*="color:#e63946"] { color: var(--accent) !important; }
        [style*="color: #fff;"], [style*="color:#fff;"] { color: var(--fg) !important; }
        [style*="color: white"] { color: var(--fg) !important; }