:root {
            --bg: #FDFBF8;
            --surface: #FFFFFF;
            --surface-2: #F5F1EB;
            --text: #2A2A2A;
            --text-muted: #6B6B6B;
            --border: #E7DFD3;
            --accent: #A5947F;
            --accent-strong: #7A6857;
            --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
        }
        html[data-theme='dark'] {
            --bg: #0F172A;
            --surface: #1F2937;
            --surface-2: #111827;
            --text: #E5E7EB;
            --text-muted: #9CA3AF;
            --border: #374151;
            --accent: #C9B79C;
            --accent-strong: #E8D6BC;
            --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
        }
        html { color-scheme: light; }
        html[data-theme='dark'] { color-scheme: dark; }
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
        }
        .surface { background-color: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
        .surface-2 { background-color: var(--surface-2); border: 1px solid var(--border); }
        .text-muted { color: var(--text-muted); }
        .border-default { border-color: var(--border); }
        .accent { color: var(--accent-strong); }
        .bg-accent { background-color: var(--accent); color: #fff; }
        .bg-accent:hover { background-color: var(--accent-strong); }

        /* Filter chips */
        .chip {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.35rem 0.75rem;
            border-radius: 9999px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }
        .chip:hover { border-color: var(--accent); }
        .chip.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

        /* Stat card */
        .stat-card {
            padding: 1rem 1.1rem;
            border-radius: 0.75rem;
            border: 1px solid var(--border);
            background: var(--surface);
            box-shadow: var(--shadow);
        }
        .stat-card .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
        .stat-card .value { font-size: 1.65rem; font-weight: 700; line-height: 1.2; margin-top: 0.25rem; }
        .stat-card .sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

        /* Chart container */
        .chart-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 1rem;
            padding: 1.25rem;
            box-shadow: var(--shadow);
        }
        .chart-card h3 { font-size: 1rem; font-weight: 600; }
        .chart-card .desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
        .chart-wrap { position: relative; width: 100%; }

        /* Table */
        table.releases { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
        table.releases thead th {
            position: sticky; top: 0;
            background: var(--surface-2);
            text-align: left;
            padding: 0.55rem 0.7rem;
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            white-space: nowrap;
        }
        table.releases tbody td {
            padding: 0.55rem 0.7rem;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
        }
        table.releases tbody tr:hover { background: var(--surface-2); }
        .badge {
            display: inline-block;
            font-size: 0.68rem;
            padding: 0.12rem 0.5rem;
            border-radius: 9999px;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--text-muted);
            white-space: nowrap;
        }
        .badge.future { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
        html[data-theme='dark'] .badge.future { background: #422006; color: #FCD34D; border-color: #78350F; }
        .badge.approx { background: #E0E7FF; color: #3730A3; border-color: #C7D2FE; }
        html[data-theme='dark'] .badge.approx { background: #1E1B4B; color: #C7D2FE; border-color: #3730A3; }

        /* Heatmap */
        .heatmap {
            display: grid;
            gap: 2px;
            font-size: 0.7rem;
        }
        .heatmap .cell {
            aspect-ratio: 1.5/1;
            border-radius: 4px;
            display: flex; align-items: center; justify-content: center;
            color: var(--text);
            background: var(--surface-2);
            transition: transform 0.1s ease;
            cursor: default;
        }
        .heatmap .cell:hover { transform: scale(1.08); outline: 1px solid var(--accent); z-index: 2; }
        .heatmap .row-label { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; padding-right: 0.4rem; }
        .heatmap .col-label { font-size: 0.72rem; color: var(--text-muted); text-align: center; padding-bottom: 0.2rem; font-weight: 500; }

        /* Search input */
        input[type="text"], input[type="date"], select {
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text);
            border-radius: 0.5rem;
            padding: 0.45rem 0.7rem;
            font-size: 0.85rem;
            outline: none;
        }
        input[type="text"]:focus, input[type="date"]:focus, select:focus { border-color: var(--accent); }

        /* Tabs */
        .tab-btn {
            padding: 0.4rem 0.85rem;
            font-size: 0.8rem;
            border-radius: 0.5rem;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-muted);
            cursor: pointer;
        }
        .tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

        /* Toggle switch */
        .switch { position: relative; display: inline-block; width: 36px; height: 20px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 9999px; transition: .15s; }
        .slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
        input:checked + .slider { background: var(--accent); }
        input:checked + .slider:before { transform: translateX(16px); }

        /* scrollable region */
        .scroll-y { max-height: 540px; overflow-y: auto; }
        .scroll-x { overflow-x: auto; }

        /* sortable column arrow */
        th.sortable .arrow { opacity: 0.35; margin-left: 0.2rem; }
        th.sortable.sorted-asc .arrow,
        th.sortable.sorted-desc .arrow { opacity: 1; color: var(--accent-strong); }

        /* button base */
        button { font-family: inherit; }
        .btn {
            padding: 0.45rem 0.85rem;
            font-size: 0.8rem;
            border-radius: 0.5rem;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            transition: all 0.12s ease;
        }
        .btn:hover { border-color: var(--accent); }
        .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
        .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

        /* Loader */
        .loader { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Section header */
        .section-title { font-size: 1.2rem; font-weight: 700; }
        .section-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }