*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-deep: #12131a;
    --bg-card: #1c1d2b;
    --bg-card-hover: #252638;
    --border: #2e3048;
    --gold: #c9a84c;
    --gold-dim: #9e8438;
    --text: #c8cad0;
    --text-muted: #7a7d8a;
    --text-bright: #e8eaf0;
    --tier-s: #e05555;
    --tier-a: #e0884a;
    --tier-b: #c9a84c;
    --tier-c: #6a8da6;
    --tier-d: #5a5c78;
    --accent: #4a6fa5;
    --allegiance-imperium: #4a6fa5;
    --allegiance-chaos: #c75454;
    --allegiance-xenos: #4a9a6e;
    --allegiance-unknown: #7a7d8a;
    --sidebar-width: 380px;
    color-scheme: dark;
}

[data-theme="dim"] {
    --bg-deep: #2a2c38;
    --bg-card: #353848;
    --bg-card-hover: #3e4258;
    --border: #4a4e65;
    --gold: #d4b45c;
    --gold-dim: #b89840;
    --text: #c0c3ce;
    --text-muted: #8a8da0;
    --text-bright: #e2e4ec;
    --tier-s: #e06060;
    --tier-a: #e09050;
    --tier-b: #d4b45c;
    --tier-c: #70a0be;
    --tier-d: #6a6e88;
    --accent: #5580b5;
    --allegiance-imperium: #5580b5;
    --allegiance-chaos: #d06060;
    --allegiance-xenos: #55a878;
    --allegiance-unknown: #8a8da0;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg-deep: #f0f0f0;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f5f5;
    --border: #d8d8d8;
    --gold: #9e7a20;
    --gold-dim: #b8922e;
    --text: #222222;
    --text-muted: #666666;
    --text-bright: #111111;
    --tier-s: #c73333;
    --tier-a: #c87030;
    --tier-b: #9e7a20;
    --tier-c: #3a7090;
    --tier-d: #606060;
    --accent: #3a5f95;
    --allegiance-imperium: #3a5f95;
    --allegiance-chaos: #b53e3e;
    --allegiance-xenos: #2e7a50;
    --allegiance-unknown: #666666;
    color-scheme: light;
}

[data-theme="lcars"] {
    --bg-deep: #000000;
    --bg-card: #0a0a14;
    --bg-card-hover: #12121e;
    --border: #cc99cc40;
    --gold: #ff9900;
    --gold-dim: #ff8800;
    --text: #ff9966;
    --text-muted: #9999cc;
    --text-bright: #ffcc99;
    --tier-s: #cc4444;
    --tier-a: #ff9900;
    --tier-b: #ffcc99;
    --tier-c: #9999cc;
    --tier-d: #666688;
    --accent: #cc99ff;
    --allegiance-imperium: #9999ff;
    --allegiance-chaos: #cc4444;
    --allegiance-xenos: #99cc66;
    --allegiance-unknown: #666688;
    color-scheme: dark;
}

/* ── LCARS theme: Star Trek computer interface ────────────── */

[data-theme="lcars"] body {
    font-variant-numeric: tabular-nums;
}

[data-theme="lcars"] .header {
    background: #000000;
    border-bottom: 3px solid #cc99cc;
    border-radius: 0;
    position: relative;
}

[data-theme="lcars"] .header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 120px;
    height: 3px;
    background: #ff9900;
}

[data-theme="lcars"] .header h1 {
    color: #ff9900;
    letter-spacing: 4px;
    text-transform: uppercase;
}

[data-theme="lcars"] .sidebar {
    border-right: 3px solid #cc99cc;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
}

[data-theme="lcars"] .sidebar h2::before,
[data-theme="lcars"] .section-heading::before,
[data-theme="lcars"] .main h2::before,
[data-theme="lcars"] .section-title::before,
[data-theme="lcars"] .cal-selected-header::before {
    background: #cc99cc;
    border-radius: 4px;
    width: 4px;
}

[data-theme="lcars"] .sidebar h2,
[data-theme="lcars"] .section-heading,
[data-theme="lcars"] .main h2,
[data-theme="lcars"] .section-title,
[data-theme="lcars"] .cal-selected-header {
    color: #cc99cc;
    letter-spacing: 3px;
}

/* Cards: LCARS panel style with colored left border */
[data-theme="lcars"] .faction-card {
    border: 1px solid #cc99cc30;
    border-left: 4px solid #cc99cc;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .faction-card:hover {
    border-left-color: #ff9900;
    border-color: #ff990040;
}

[data-theme="lcars"] .faction-card.expanded {
    border-left-color: #ff9900;
    border-color: #ff990060;
}

[data-theme="lcars"] .event-card {
    border: 1px solid #9999cc30;
    border-left: 4px solid #9999cc;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .event-card:hover {
    border-left-color: #ffcc99;
    border-color: #ffcc9940;
}

[data-theme="lcars"] .mini-chart {
    border: 1px solid #cc99cc30;
    border-left: 4px solid #ff9966;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .analytics-stat-card {
    border: 1px solid #9999cc30;
    border-top: 4px solid #cc99cc;
    border-radius: 0 0 12px 12px;
}

[data-theme="lcars"] .analytics-stat-card:hover {
    border-top-color: #ff9900;
}

[data-theme="lcars"] .analytics-stat-value {
    color: #ff9900;
}

[data-theme="lcars"] .analytics-stat-icon {
    color: #cc99cc;
}

[data-theme="lcars"] .placement-row {
    border: 1px solid #66668830;
    border-left: 3px solid #666688;
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .unit-bar-row {
    border: 1px solid #9999cc20;
    border-left: 3px solid #9999cc;
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .unit-bar-row:hover {
    border-left-color: #ff9900;
}

[data-theme="lcars"] .tp-row {
    border: 1px solid #cc99cc20;
    border-left: 3px solid #cc99cc;
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .tp-row:hover {
    border-left-color: #ff9900;
}

[data-theme="lcars"] .bp-list-card {
    border: 1px solid #ff990030;
    border-left: 4px solid #ff9900;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .bp-list-card:hover {
    border-color: #ff990060;
}

[data-theme="lcars"] .bp-faction-card {
    border: 1px solid #cc99cc20;
    border-left: 3px solid #cc99cc;
    border-radius: 0 8px 8px 0;
}

/* Army list items */
[data-theme="lcars"] .army-list-item {
    border: 1px solid #9999cc30;
    border-left: 4px solid #9999ff;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .army-list-banner {
    background: linear-gradient(90deg, #cc99cc15 0%, transparent 100%);
    border-bottom: 1px solid #cc99cc30;
}

[data-theme="lcars"] .army-list-points-badge {
    background: #ff9900;
    color: #000000;
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .unit-card {
    background: transparent;
    border-color: #9999cc18;
    border-left: 2px solid #9999cc40;
    border-radius: 0 6px 6px 0;
}

[data-theme="lcars"] .unit-card:hover {
    border-left-color: #cc99cc;
}

[data-theme="lcars"] .unit-card-character {
    border-left-color: #ff9900;
}

[data-theme="lcars"] .unit-group-cards {
    border-left-color: #cc99cc30;
}

[data-theme="lcars"] .unit-count-badge {
    color: #ff9900;
    background: transparent;
    border-color: #ff990040;
    border-radius: 0 4px 4px 0;
}

[data-theme="lcars"] .epic-badge {
    color: #cc4444;
    background: transparent;
    border-color: #cc444440;
}

[data-theme="lcars"] .gear-tag {
    background: transparent;
    border-color: #9999cc25;
    border-radius: 0 4px 4px 0;
}

/* Tabs: LCARS pill style */
[data-theme="lcars"] .chart-tabs,
[data-theme="lcars"] .main-tabs {
    border-color: #cc99cc30;
    border-radius: 0 20px 20px 0;
}

[data-theme="lcars"] .chart-tab,
[data-theme="lcars"] .main-tab {
    border-radius: 0 16px 16px 0;
}

[data-theme="lcars"] .chart-tab.active,
[data-theme="lcars"] .main-tab.active {
    background: #cc99cc;
    color: #000000;
    font-weight: 800;
    border-radius: 0 16px 16px 0;
}

[data-theme="lcars"] .analytics-chart-card {
    border: 1px solid #9999cc30;
    border-left: 4px solid #cc99cc;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .allegiance-filter-btn {
    border-color: #cc99cc30;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .allegiance-filter-btn.active[data-allegiance="All"] {
    background: #cc99cc;
    border-color: #cc99cc;
    color: #000000;
}

[data-theme="lcars"] .allegiance-filter-btn.active[data-allegiance="Imperium"] {
    color: #000000;
}

[data-theme="lcars"] .allegiance-filter-btn.active[data-allegiance="Chaos"] {
    color: #000000;
}

[data-theme="lcars"] .allegiance-filter-btn.active[data-allegiance="Xenos"] {
    color: #000000;
}

/* Tier badges: LCARS flat pills */
[data-theme="lcars"] .tier-badge {
    color: #000000;
    border-radius: 0 6px 6px 0;
}

/* Bar tracks */
[data-theme="lcars"] .fc-bar-track,
[data-theme="lcars"] .mini-bar-track,
[data-theme="lcars"] .unit-bar-track,
[data-theme="lcars"] .fc-mini-bar-track {
    background: #cc99cc12;
    border-radius: 0 4px 4px 0;
}

[data-theme="lcars"] .fc-bar-fill,
[data-theme="lcars"] .mini-bar-fill,
[data-theme="lcars"] .unit-bar-fill,
[data-theme="lcars"] .fc-mini-bar-fill {
    border-radius: 0 4px 4px 0;
}

/* Calendar: LCARS grid */
[data-theme="lcars"] .calendar-grid {
    border-color: #cc99cc40;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .cal-header-row {
    background: #cc99cc10;
    border-bottom-color: #cc99cc30;
}

[data-theme="lcars"] .cal-header-cell {
    color: #cc99cc;
    letter-spacing: 1px;
}

[data-theme="lcars"] .cal-week-row {
    border-bottom-color: #cc99cc10;
}

[data-theme="lcars"] .cal-day-cell {
    border-right-color: #cc99cc0a;
}

[data-theme="lcars"] .cal-day-cell.empty {
    background: #000000;
}

[data-theme="lcars"] .cal-day-cell.today {
    background: #ff990010;
}

[data-theme="lcars"] .cal-day-cell.today .cal-day-num {
    color: #ff9900;
}

[data-theme="lcars"] .cal-day-cell.selected {
    background: #cc99cc10;
    box-shadow: inset 0 0 0 2px #cc99cc;
}

[data-theme="lcars"] .cal-day-cell.has-events {
    background: #9999cc08;
}

/* Buttons: LCARS rounded pill style */
[data-theme="lcars"] .cal-nav-btn,
[data-theme="lcars"] .back-btn {
    border-color: #cc99cc50;
    border-radius: 0 12px 12px 0;
    background: transparent;
}

[data-theme="lcars"] .cal-nav-btn:hover,
[data-theme="lcars"] .back-btn:hover {
    background: #cc99cc;
    border-color: #cc99cc;
    color: #000000;
}

[data-theme="lcars"] .pagination button {
    border-color: #9999cc40;
    border-radius: 0 10px 10px 0;
    background: transparent;
}

[data-theme="lcars"] .pagination button:hover:not(:disabled) {
    background: #9999cc;
    border-color: #9999cc;
    color: #000000;
}

[data-theme="lcars"] .refresh-btn {
    border-color: #ff990050;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .refresh-btn:hover {
    background: #ff9900;
    border-color: #ff9900;
    color: #000000;
}

[data-theme="lcars"] .header-bp-btn {
    border-color: #cc99cc50;
    border-radius: 0 50% 50% 0;
}

[data-theme="lcars"] .header-bp-btn:hover {
    background: #cc99cc;
    border-color: #cc99cc;
    color: #000000;
}

[data-theme="lcars"] .theme-toggle {
    border-color: #9999cc40;
}

[data-theme="lcars"] .theme-toggle:hover {
    background: #9999cc;
    border-color: #9999cc;
    color: #000000;
}

/* Refresh dialog: LCARS panel */
[data-theme="lcars"] .refresh-dialog {
    border: 2px solid #cc99cc;
    border-radius: 0 20px 20px 0;
}

[data-theme="lcars"] .refresh-dialog-header {
    border-bottom: 2px solid #cc99cc60;
}

[data-theme="lcars"] .refresh-dialog-header h3 {
    color: #ff9900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

[data-theme="lcars"] .refresh-start-btn {
    background: #ff9900;
    color: #000000;
    border-radius: 0 12px 12px 0;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

[data-theme="lcars"] .refresh-start-btn:hover {
    background: #ffcc99;
}

[data-theme="lcars"] .refresh-presets-select {
    border-color: #cc99cc40;
    border-radius: 0 8px 8px 0;
    background: #000000;
}

/* Refresh status colors */
[data-theme="lcars"] .refresh-btn.has-missing {
    border-color: #cc4444;
    color: #cc4444;
}

[data-theme="lcars"] .refresh-btn.has-missing:hover {
    background: #cc4444;
    border-color: #cc4444;
    color: #000000;
}

[data-theme="lcars"] .refresh-missing-banner {
    background: #cc444410;
    border-color: #cc444430;
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .refresh-missing-count,
[data-theme="lcars"] .refresh-missing-text {
    color: #cc4444;
}

[data-theme="lcars"] .refresh-mini-cell.ev-ok { background: #99cc6630; }
[data-theme="lcars"] .refresh-mini-cell.ev-missing { background: #cc444425; }
[data-theme="lcars"] .refresh-mini-cell.ev-scheduled { background: #ff990020; }

[data-theme="lcars"] .refresh-result.success {
    background: transparent;
    color: #99cc66;
    border: 1px solid #99cc6640;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .refresh-result.failure {
    background: transparent;
    color: #cc4444;
    border: 1px solid #cc444440;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .refresh-error,
[data-theme="lcars"] .refresh-error-item {
    background: transparent;
    border: 1px solid #cc444425;
    color: #cc4444;
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .bp-list-tag.has-details {
    background: transparent;
    color: #99cc66;
    border: 1px solid #99cc6640;
    border-radius: 0 6px 6px 0;
}

[data-theme="lcars"] .bp-list-tag.no-details {
    background: transparent;
    color: #666688;
    border: 1px solid #66668840;
    border-radius: 0 6px 6px 0;
}

[data-theme="lcars"] .bp-pts-up { color: #cc4444; }
[data-theme="lcars"] .bp-pts-down { color: #99cc66; }

[data-theme="lcars"] .units-filter-btn {
    border-radius: 0 8px 8px 0;
}

[data-theme="lcars"] .units-filter-btn.active {
    background: #cc99cc;
    border-color: #cc99cc;
    color: #000000;
}

[data-theme="lcars"] .unit-bar-keywords {
    background: transparent;
    border: 1px solid #9999cc20;
    border-radius: 0 4px 4px 0;
}

[data-theme="lcars"] .refresh-legend-swatch.ok { background: #99cc66; border-radius: 0 2px 2px 0; }
[data-theme="lcars"] .refresh-legend-swatch.missing { background: #cc4444; border-radius: 0 2px 2px 0; }
[data-theme="lcars"] .refresh-legend-swatch.scheduled { background: #ff9900; border-radius: 0 2px 2px 0; }

[data-theme="lcars"] .refresh-inspect-event.inspect-ok {
    background: transparent;
    border-left: 3px solid #99cc66;
    border-radius: 0 6px 6px 0;
}

[data-theme="lcars"] .refresh-inspect-event.inspect-missing {
    background: transparent;
    border-left: 3px solid #cc4444;
    border-radius: 0 6px 6px 0;
}

[data-theme="lcars"] .refresh-inspect-event.inspect-scheduled {
    background: transparent;
    border-left: 3px solid #ff9900;
    border-radius: 0 6px 6px 0;
}

[data-theme="lcars"] .refresh-inspect-status.inspect-ok { color: #99cc66; background: transparent; border: 1px solid #99cc6640; }
[data-theme="lcars"] .refresh-inspect-status.inspect-missing { color: #cc4444; background: transparent; border: 1px solid #cc444440; }
[data-theme="lcars"] .refresh-inspect-status.inspect-scheduled { color: #ff9900; background: transparent; border: 1px solid #ff990040; }

[data-theme="lcars"] .refresh-ok-banner {
    background: transparent;
    color: #99cc66;
    border: 1px solid #99cc6620;
    border-radius: 0 8px 8px 0;
}

/* Rank colors */
[data-theme="lcars"] .rank-1 { color: #ff9900; }
[data-theme="lcars"] .rank-2 { color: #cc99cc; }
[data-theme="lcars"] .rank-3 { color: #ff9966; }

/* Balance pass cards */
[data-theme="lcars"] .cal-bp-card {
    border-color: #ff990050;
    border-left: 4px solid #ff9900;
    border-radius: 0 12px 12px 0;
}

[data-theme="lcars"] .cal-bp-card:hover {
    border-color: #ff990080;
}

/* Top players */
[data-theme="lcars"] .tp-row.expanded {
    border-left-color: #ff9900;
}

[data-theme="lcars"] .tp-recent-results {
    border-color: #cc99cc30;
    border-left: 3px solid #cc99cc40;
    border-radius: 0 0 8px 0;
}

/* Scrollbar */
[data-theme="lcars"] ::-webkit-scrollbar-track {
    background: #000000;
}

[data-theme="lcars"] ::-webkit-scrollbar-thumb {
    background: #cc99cc40;
    border-radius: 0 3px 3px 0;
}

[data-theme="lcars"] ::-webkit-scrollbar-thumb:hover {
    background: #cc99cc;
}

/* Chevron text */
[data-theme="lcars"] .chevron-label {
    color: #000000;
    text-shadow: none;
    font-weight: 800;
    letter-spacing: 1px;
}

[data-theme="lcars"] .chevron-meta {
    color: rgba(0, 0, 0, 0.55);
    text-shadow: none;
}

/* Tier tooltip */
[data-theme="lcars"] .tier-tooltip {
    border-color: #cc99cc50;
}

/* Spinner */
[data-theme="lcars"] .spinner {
    border-color: #cc99cc30;
    border-top-color: #ff9900;
}

[data-theme="tron"] {
    --bg-deep: #000000;
    --bg-card: #050510;
    --bg-card-hover: #0a0a1a;
    --border: #00e5ff40;
    --gold: #00e5ff;
    --gold-dim: #00b8d4;
    --text: #70e0f0;
    --text-muted: #2090b0;
    --text-bright: #ffffff;
    --tier-s: #ff0055;
    --tier-a: #ff6600;
    --tier-b: #00e5ff;
    --tier-c: #00b8d4;
    --tier-d: #005570;
    --accent: #00e5ff;
    --allegiance-imperium: #00aaff;
    --allegiance-chaos: #ff0055;
    --allegiance-xenos: #00ff88;
    --allegiance-unknown: #2090b0;
    color-scheme: dark;
}

/* ── Tron theme: NEON EVERYTHING ──────────────────────────── */

[data-theme="tron"] body {
    text-shadow: 0 0 2px rgba(0, 229, 255, 0.15);
}

[data-theme="tron"] .header {
    background: #000000;
    border-bottom: 1px solid #00e5ff;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2), 0 1px 0 #00e5ff;
}

[data-theme="tron"] .header h1 {
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 30px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .sidebar {
    border-right: 1px solid #00e5ff60;
    box-shadow: 1px 0 25px rgba(0, 229, 255, 0.1);
    -webkit-mask-image: none;
    mask-image: none;
}

[data-theme="tron"] .sidebar h2,
[data-theme="tron"] .section-heading,
[data-theme="tron"] .main h2,
[data-theme="tron"] .section-title,
[data-theme="tron"] .cal-selected-header {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

[data-theme="tron"] .sidebar h2::before,
[data-theme="tron"] .section-heading::before,
[data-theme="tron"] .main h2::before,
[data-theme="tron"] .section-title::before,
[data-theme="tron"] .cal-selected-header::before {
    box-shadow: 0 0 6px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.4);
}

/* Cards: neon borders + glow */
[data-theme="tron"] .faction-card,
[data-theme="tron"] .event-card,
[data-theme="tron"] .mini-chart,
[data-theme="tron"] .placement-row,
[data-theme="tron"] .bp-list-card,
[data-theme="tron"] .analytics-stat-card,
[data-theme="tron"] .unit-bar-row,
[data-theme="tron"] .army-list-item,
[data-theme="tron"] .tp-row {
    border-color: #00e5ff30;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.05), inset 0 0 6px rgba(0, 229, 255, 0.02);
}

[data-theme="tron"] .faction-card:hover,
[data-theme="tron"] .event-card:hover,
[data-theme="tron"] .bp-list-card:hover,
[data-theme="tron"] .analytics-stat-card:hover,
[data-theme="tron"] .unit-bar-row:hover,
[data-theme="tron"] .tp-row:hover {
    border-color: #00e5ff90;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.15), inset 0 0 8px rgba(0, 229, 255, 0.04);
}

[data-theme="tron"] .faction-card.expanded {
    border-color: #00e5ff;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.2), inset 0 0 10px rgba(0, 229, 255, 0.05);
}

/* Tabs: neon active glow */
[data-theme="tron"] .chart-tab.active,
[data-theme="tron"] .main-tab.active {
    border: 1px solid #00e5ff80;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

[data-theme="tron"] .chart-tabs,
[data-theme="tron"] .main-tabs {
    border-color: #00e5ff30;
}

[data-theme="tron"] .analytics-chart-card {
    border-color: #00e5ff30;
    box-shadow: 0 0 6px rgba(0,229,255,0.05), inset 0 0 6px rgba(0,229,255,0.02);
}

[data-theme="tron"] .allegiance-filter-btn {
    border-color: #00e5ff25;
}

[data-theme="tron"] .allegiance-filter-btn:hover {
    border-color: #00e5ff60;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .allegiance-filter-btn.active[data-allegiance="All"] {
    border-color: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* Bar tracks: neon */
[data-theme="tron"] .fc-bar-track,
[data-theme="tron"] .mini-bar-track,
[data-theme="tron"] .unit-bar-track,
[data-theme="tron"] .fc-mini-bar-track {
    background: #00e5ff10;
}

/* Calendar: neon grid */
[data-theme="tron"] .calendar-grid {
    border-color: #00e5ff50;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.08);
}

[data-theme="tron"] .cal-header-row {
    background: #00e5ff0a;
    border-bottom-color: #00e5ff40;
}

[data-theme="tron"] .cal-week-row {
    border-bottom-color: #00e5ff15;
}

[data-theme="tron"] .cal-day-cell {
    border-right-color: #00e5ff12;
}

[data-theme="tron"] .cal-day-cell.empty {
    background: #000000;
}

[data-theme="tron"] .cal-day-cell.today {
    background: rgba(0, 229, 255, 0.08);
    box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1);
}

[data-theme="tron"] .cal-day-cell.selected {
    background: rgba(0, 229, 255, 0.06);
    box-shadow: inset 0 0 0 2px #00e5ff;
}

[data-theme="tron"] .cal-day-cell.has-events {
    background: rgba(0, 255, 136, 0.05);
}

/* Buttons: neon outlines */
[data-theme="tron"] .cal-nav-btn,
[data-theme="tron"] .back-btn,
[data-theme="tron"] .pagination button {
    border-color: #00e5ff40;
    background: transparent;
}

[data-theme="tron"] .cal-nav-btn:hover,
[data-theme="tron"] .back-btn:hover,
[data-theme="tron"] .pagination button:hover:not(:disabled) {
    border-color: #00e5ff;
    color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
}

[data-theme="tron"] .refresh-btn {
    border-color: #00e5ff50;
}

[data-theme="tron"] .refresh-btn:hover {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

[data-theme="tron"] .header-bp-btn {
    border-color: #00e5ff50;
}

[data-theme="tron"] .header-bp-btn:hover {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .theme-toggle {
    border-color: #00e5ff40;
}

[data-theme="tron"] .theme-toggle:hover {
    border-color: #00e5ff;
    color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Refresh dialog: neon */
[data-theme="tron"] .refresh-dialog {
    border-color: #00e5ff60;
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.15), 0 0 80px rgba(0, 229, 255, 0.05);
}

[data-theme="tron"] .refresh-dialog-header {
    border-bottom-color: #00e5ff40;
}

[data-theme="tron"] .refresh-start-btn {
    background: #00e5ff;
    color: #000000;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
    text-shadow: none;
}

[data-theme="tron"] .refresh-start-btn:hover {
    background: #00fff7;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.5);
}

/* Army lists: neon accents */
[data-theme="tron"] .unit-card {
    background: transparent;
    border-color: #00e5ff18;
}

[data-theme="tron"] .unit-card:hover {
    border-color: #00e5ff50;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

[data-theme="tron"] .unit-card-character {
    border-left-color: #00e5ff;
    box-shadow: -2px 0 6px rgba(0, 229, 255, 0.2);
}

[data-theme="tron"] .unit-group-cards {
    border-left-color: #00e5ff25;
}

[data-theme="tron"] .gear-tag {
    background: transparent;
    border-color: #00e5ff25;
}

[data-theme="tron"] .unit-count-badge {
    color: #00e5ff;
    background: transparent;
    border-color: #00e5ff50;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
}

[data-theme="tron"] .epic-badge {
    color: #ff0055;
    background: transparent;
    border-color: #ff005550;
    text-shadow: 0 0 4px rgba(255, 0, 85, 0.4);
}

[data-theme="tron"] .army-list-banner {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.06) 0%, #000000 100%);
    border-bottom-color: #00e5ff30;
}

[data-theme="tron"] .army-list-points-badge {
    background: #00e5ff;
    color: #000000;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

[data-theme="tron"] .tier-badge {
    color: #000000;
    text-shadow: none;
}

/* Tier legend */
[data-theme="tron"] .tier-tooltip {
    border-color: #00e5ff40;
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.1);
}

/* Stats cards: glow */
[data-theme="tron"] .analytics-stat-value {
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .analytics-stat-icon {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

/* Placement rows */
[data-theme="tron"] .placement-header.clickable:hover {
    background: rgba(0, 229, 255, 0.04);
}

[data-theme="tron"] .rank-1 { color: #00e5ff; text-shadow: 0 0 6px rgba(0, 229, 255, 0.5); }
[data-theme="tron"] .rank-2 { color: #00b8d4; text-shadow: 0 0 4px rgba(0, 184, 212, 0.4); }
[data-theme="tron"] .rank-3 { color: #ff6600; text-shadow: 0 0 4px rgba(255, 102, 0, 0.4); }

/* Balance pass */
[data-theme="tron"] .cal-bp-card {
    border-color: #00e5ff50;
}

[data-theme="tron"] .cal-bp-card:hover {
    border-color: #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

[data-theme="tron"] .bp-faction-card {
    border-color: #00e5ff20;
    border-left-color: #00e5ff50;
}

[data-theme="tron"] .bp-faction-card:hover {
    border-color: #00e5ff50;
}

/* Refresh dialog specifics */
[data-theme="tron"] .refresh-btn.has-missing {
    border-color: #ff0055;
    color: #ff0055;
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.4);
}

[data-theme="tron"] .refresh-btn.has-missing:hover {
    border-color: #ff3377;
    color: #ff3377;
    background: rgba(255, 0, 85, 0.08);
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.2);
}

[data-theme="tron"] .refresh-missing-banner {
    background: rgba(255, 0, 85, 0.06);
    border-color: #ff005540;
}

[data-theme="tron"] .refresh-missing-count,
[data-theme="tron"] .refresh-missing-text {
    color: #ff0055;
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.4);
}

[data-theme="tron"] .refresh-mini-cell.ev-ok {
    background: rgba(0, 255, 136, 0.15);
    box-shadow: inset 0 0 4px rgba(0, 255, 136, 0.2);
}

[data-theme="tron"] .refresh-mini-cell.ev-missing {
    background: rgba(255, 0, 85, 0.15);
    box-shadow: inset 0 0 4px rgba(255, 0, 85, 0.2);
}

[data-theme="tron"] .refresh-mini-cell.ev-scheduled {
    background: rgba(0, 229, 255, 0.12);
    box-shadow: inset 0 0 4px rgba(0, 229, 255, 0.15);
}

[data-theme="tron"] .refresh-result.success {
    background: transparent;
    color: #00ff88;
    border: 1px solid #00ff8850;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

[data-theme="tron"] .refresh-result.failure {
    background: transparent;
    color: #ff0055;
    border: 1px solid #ff005550;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.4);
}

[data-theme="tron"] .refresh-error,
[data-theme="tron"] .refresh-error-item {
    background: transparent;
    border: 1px solid #ff005530;
    color: #ff3377;
}

[data-theme="tron"] .bp-list-tag.has-details {
    background: transparent;
    color: #00ff88;
    border: 1px solid #00ff8840;
}

[data-theme="tron"] .bp-list-tag.no-details {
    background: transparent;
    color: #2090b0;
    border: 1px solid #2090b030;
}

[data-theme="tron"] .bp-pts-up { color: #ff0055; text-shadow: 0 0 4px rgba(255, 0, 85, 0.3); }
[data-theme="tron"] .bp-pts-down { color: #00ff88; text-shadow: 0 0 4px rgba(0, 255, 136, 0.3); }

[data-theme="tron"] .units-filter-btn.active {
    background: transparent;
    border-color: #00e5ff;
    color: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
}

[data-theme="tron"] .unit-bar-keywords {
    background: transparent;
    border: 1px solid #00e5ff25;
}

[data-theme="tron"] .refresh-legend-swatch.ok { background: #00ff88; box-shadow: 0 0 4px #00ff88; }
[data-theme="tron"] .refresh-legend-swatch.missing { background: #ff0055; box-shadow: 0 0 4px #ff0055; }
[data-theme="tron"] .refresh-legend-swatch.scheduled { background: #00e5ff; box-shadow: 0 0 4px #00e5ff; }

[data-theme="tron"] .refresh-inspect-event.inspect-ok {
    background: transparent;
    border-left: 3px solid #00ff88;
    box-shadow: -2px 0 6px rgba(0, 255, 136, 0.15);
}

[data-theme="tron"] .refresh-inspect-event.inspect-missing {
    background: transparent;
    border-left: 3px solid #ff0055;
    box-shadow: -2px 0 6px rgba(255, 0, 85, 0.15);
}

[data-theme="tron"] .refresh-inspect-event.inspect-scheduled {
    background: transparent;
    border-left: 3px solid #00e5ff;
    box-shadow: -2px 0 6px rgba(0, 229, 255, 0.15);
}

[data-theme="tron"] .refresh-inspect-status.inspect-ok { color: #00ff88; background: transparent; border: 1px solid #00ff8840; text-shadow: 0 0 4px rgba(0, 255, 136, 0.4); }
[data-theme="tron"] .refresh-inspect-status.inspect-missing { color: #ff0055; background: transparent; border: 1px solid #ff005540; text-shadow: 0 0 4px rgba(255, 0, 85, 0.4); }
[data-theme="tron"] .refresh-inspect-status.inspect-scheduled { color: #00e5ff; background: transparent; border: 1px solid #00e5ff40; text-shadow: 0 0 4px rgba(0, 229, 255, 0.4); }

[data-theme="tron"] .refresh-ok-banner {
    background: transparent;
    color: #00ff88;
    border: 1px solid #00ff8830;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.3);
}

/* Scrollbar: neon */
[data-theme="tron"] ::-webkit-scrollbar-track {
    background: #000000;
}

[data-theme="tron"] ::-webkit-scrollbar-thumb {
    background: #00e5ff30;
    box-shadow: 0 0 4px rgba(0, 229, 255, 0.2);
}

[data-theme="tron"] ::-webkit-scrollbar-thumb:hover {
    background: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* Epoch chevrons in tron */
[data-theme="tron"] .chevron-label {
    color: #000000;
    text-shadow: none;
    font-weight: 800;
}

[data-theme="tron"] .chevron-meta {
    color: rgba(0, 0, 0, 0.6);
    text-shadow: none;
}

/* Spinner */
[data-theme="tron"] .spinner {
    border-color: #00e5ff30;
    border-top-color: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

/* Top players */
[data-theme="tron"] .tp-row.expanded {
    border-color: #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

[data-theme="tron"] .tp-recent-results {
    border-color: #00e5ff60;
}

/* Refresh presets select */
[data-theme="tron"] .refresh-presets-select {
    border-color: #00e5ff40;
    background: #000000;
}

[data-theme="tron"] .refresh-presets-select:focus {
    border-color: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* Counter values glow */
[data-theme="tron"] .refresh-counter-val {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

[data-theme="tron"] .refresh-stat-val {
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

/* ── Dim theme overrides for hardcoded colors ─────────────── */
[data-theme="dim"] .fc-bar-track,
[data-theme="dim"] .mini-bar-track,
[data-theme="dim"] .unit-bar-track,
[data-theme="dim"] .fc-mini-bar-track {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dim"] .cal-header-row {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dim"] .cal-day-cell.empty {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="dim"] .unit-card {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dim"] .unit-group-cards {
    border-left-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dim"] .gear-tag {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dim"] .army-list-banner {
    background: linear-gradient(135deg, rgba(212, 180, 92, 0.1) 0%, rgba(42, 44, 56, 0.8) 100%);
}

[data-theme="dim"] .sidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

/* ── Light theme overrides for hardcoded colors ───────────── */
[data-theme="light"] .fc-bar-track,
[data-theme="light"] .mini-bar-track,
[data-theme="light"] .unit-bar-track,
[data-theme="light"] .fc-mini-bar-track {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cal-header-row {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .cal-week-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cal-day-cell {
    border-right-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cal-day-cell.empty {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .cal-day-cell.today {
    background: rgba(58, 95, 149, 0.08);
}

[data-theme="light"] .cal-day-cell.selected {
    background: rgba(158, 122, 32, 0.08);
    box-shadow: inset 0 0 0 2px var(--gold-dim);
}

[data-theme="light"] .cal-day-cell.has-events {
    background: rgba(46, 122, 80, 0.05);
}

[data-theme="light"] .unit-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .unit-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .unit-group-cards {
    border-left-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .gear-tag {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .unit-count-badge {
    background: rgba(158, 122, 32, 0.08);
    border-color: rgba(158, 122, 32, 0.2);
}

[data-theme="light"] .epic-badge {
    background: rgba(158, 122, 32, 0.1);
    border-color: rgba(158, 122, 32, 0.25);
}

[data-theme="light"] .army-list-banner {
    background: linear-gradient(135deg, rgba(158, 122, 32, 0.08) 0%, rgba(240, 241, 245, 0.8) 100%);
}

[data-theme="light"] .sidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .refresh-overlay {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .refresh-presets-select {
    color-scheme: light;
}

[data-theme="light"] .bp-list-tag.has-details {
    background: #e8f5e8;
    color: #2e7a50;
}

[data-theme="light"] .bp-list-tag.no-details {
    background: #eee;
    color: var(--text-muted);
}

[data-theme="light"] .refresh-result.success {
    background: #e8f5e8;
    color: #2e7a50;
}

[data-theme="light"] .refresh-result.failure {
    background: #fde8e8;
    color: #c73333;
}

[data-theme="light"] .refresh-error,
[data-theme="light"] .refresh-error-item {
    background: #fde8e8;
}

[data-theme="light"] .units-filter-btn.active {
    background: rgba(158, 122, 32, 0.1);
}

[data-theme="light"] .unit-bar-keywords {
    background: rgba(58, 95, 149, 0.08);
}

[data-theme="light"] .chevron-label {
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

[data-theme="light"] .chevron-meta {
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-deep);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    height: 44px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.header h1 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Epoch Timeline (PowerPoint chevron arrows) ─────────────── */
.epoch-timeline {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
    padding: 0 4px;
}

.epoch-chevron {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 130px;
    padding: 0 28px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s, filter 0.2s;
}

.epoch-chevron:hover {
    opacity: 0.85 !important;
    filter: brightness(1.15);
}

.epoch-chevron.active {
    opacity: 1 !important;
    filter: brightness(1.05) saturate(1.1);
}

.chevron-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.chevron-meta {
    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.epoch-chevron.active .chevron-label {
    font-weight: 700;
}

.epoch-chevron.active .chevron-meta {
    color: rgba(255,255,255,0.9);
}

.header-bp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    padding: 0;
}
.header-bp-btn:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
    transform: scale(1.08);
}
.header-bp-btn .bp-icon {
    width: 16px;
    height: 16px;
}

/* ── Sidebar Slider ─────────────────────────────────────────── */
.sidebar-slider {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.sidebar-slider-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ── Time Slider ────────────────────────────────────────────── */
.time-slider {
    width: 100%;
}

.time-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.time-slider-tracks {
    position: relative;
    height: 20px;
}

.time-slider-tracks input[type="range"] {
    position: absolute;
    width: 100%;
    top: 0;
    height: 20px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.time-slider-tracks input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    pointer-events: all;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.time-slider-tracks input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    pointer-events: all;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.time-slider-tracks input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
}

.time-slider-tracks input[type="range"]::-moz-range-track {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: calc(100vh - 44px);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    border-right: 1px solid var(--border);
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 44px);
    position: relative;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.sidebar h2,
.section-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 16px;
    position: relative;
    padding-left: 14px;
}

.section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.section-heading-row .section-heading {
    margin-bottom: 16px;
}

.last-refreshed {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.sidebar h2::before,
.section-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--gold);
    border-radius: 2px;
}

/* Chart tabs */
.chart-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}

.chart-tab {
    flex: 1;
    padding: 7px 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-tab:hover {
    color: var(--text);
}

.chart-tab.active {
    background: var(--bg-card);
    color: var(--gold);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.chart-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* ── Faction Cards (collapsible) ────────────────────────────── */
.faction-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Column headers */
.fc-column-headers {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    opacity: 0.7;
}

.fc-col-tier { min-width: 28px; text-align: center; }
.fc-col-faction { flex: 1; min-width: 0; }
.fc-col-stat { min-width: 42px; text-align: right; }
.fc-col-chevron { width: 16px; }

/* Card wrapper */
.faction-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.faction-card:hover {
    border-color: var(--gold-dim);
}

.faction-card.expanded {
    border-color: var(--gold-dim);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Collapsed row */
.faction-card-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.faction-card-row:hover {
    background: var(--bg-card-hover);
}

.fc-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.fc-movement {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
}
.fc-movement.move-up {
    color: #4caf50;
}
.fc-movement.move-surge {
    color: #2e7d32;
    text-shadow: 0 0 4px rgba(46,125,50,0.4);
}
.fc-movement.move-down {
    color: #e05555;
}
.fc-movement.move-crash {
    color: #c62828;
    text-shadow: 0 0 4px rgba(198,40,40,0.4);
}

.fc-row-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-left: 36px;
}

.faction-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-bright);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tier-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
    color: var(--bg-deep);
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.fc-stat {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.fc-stat-count {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.fc-stat-icon {
    font-size: 10px;
    margin-right: 2px;
    opacity: 0.6;
}

.fc-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.fc-chevron.open {
    transform: rotate(90deg);
}

/* Expandable body */
.faction-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faction-card-body.open {
    max-height: 500px;
}

.faction-card-body > .faction-card-bars {
    padding: 8px 12px 0;
}

/* View Details link */
.fc-view-details {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 12px 10px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s;
}

.fc-view-details:hover {
    color: var(--accent);
}

.tier-S { background: var(--tier-s); }
.tier-A { background: var(--tier-a); }
.tier-B { background: var(--tier-b); }
.tier-C { background: var(--tier-c); }
.tier-D { background: var(--tier-d); }

.faction-card-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fc-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fc-bar-label {
    font-size: 10px;
    color: var(--text-muted);
    width: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.fc-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(42, 42, 74, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.fc-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fc-bar-val {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    min-width: 32px;
    text-align: right;
}

.fc-mini-chart {
    margin: 8px 12px 0;
}

.fc-mini-chart-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.fc-mini-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.fc-mini-bar-label {
    font-size: 10px;
    color: var(--text);
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-mini-bar-track {
    flex: 1;
    min-width: 40px;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.fc-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fc-mini-bar-val {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 700;
    min-width: 16px;
    text-align: right;
}

/* ── Tier legend ────────────────────────────────────────────── */
.tier-legend {
    margin-bottom: 16px;
}

.tier-legend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.tier-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.tier-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.tier-info-wrap {
    position: relative;
    margin-left: auto;
}

.tier-info-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tier-info-wrap:hover .tier-info-btn {
    border-color: var(--gold);
    color: var(--gold);
}

.tier-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 280px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    z-index: 10;
}

.tier-info-wrap:hover .tier-tooltip {
    display: block;
}

/* ── Main content ───────────────────────────────────────────── */
.main {
    padding: 20px 24px;
    overflow-y: auto;
    max-height: calc(100vh - 44px);
}

.main h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 16px;
    position: relative;
    padding-left: 14px;
}

.main h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--gold);
    border-radius: 2px;
}

/* ── Event list ─────────────────────────────────────────────── */
.event-search {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-bright);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.event-search::placeholder {
    color: var(--text-muted);
}

.event-search:focus {
    border-color: var(--gold-dim);
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.event-card:hover {
    border-color: var(--gold-dim);
    background: var(--bg-card-hover);
    transform: translateX(2px);
}

.event-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.event-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-bright);
}

.event-players {
    font-size: 13px;
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
}

.event-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.event-winner {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text);
}

.event-winner-label {
    color: var(--gold-dim);
}

/* ── Event Analytics ────────────────────────────────────────── */
.event-analytics {
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.event-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.event-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.event-stat-card h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.event-stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.event-stat-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.event-stat-table td {
    padding: 6px 8px;
    color: var(--text);
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}

.event-stat-table tr.top-performer td {
    color: var(--gold);
    font-weight: 600;
}

.event-stat-table .faction-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.event-stat-rank {
    display: inline-block;
    width: 22px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
}

.event-stat-rank.gold {
    color: var(--gold);
}

@media (max-width: 768px) {
    .event-analytics-grid {
        grid-template-columns: 1fr;
    }
    .event-stat-card[style*="grid-column"] {
        grid-column: auto !important;
    }
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px 0;
}

.pagination button {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.pagination button:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Detail view ────────────────────────────────────────────── */
.detail-view {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 20px;
    transition: all 0.2s;
}

.back-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.detail-header {
    margin-bottom: 24px;
}

.detail-header h2 {
    font-size: 24px;
    color: var(--text-bright);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
    padding-left: 0;
}

.detail-header h2::before {
    display: none;
}

.detail-header .event-meta {
    font-size: 14px;
}

.section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 14px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: calc(100% - 8px);
    background: var(--gold);
    border-radius: 2px;
}

/* ── Placement rows ─────────────────────────────────────────── */
.placement-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.placement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    font-size: 14px;
    transition: background 0.2s;
}

.placement-header.clickable {
    cursor: pointer;
}

.placement-header.clickable:hover {
    background: var(--bg-card-hover);
}

.placement-player {
    color: var(--text-bright);
    font-weight: 600;
    min-width: 140px;
}

.placement-faction {
    color: var(--text);
    min-width: 120px;
}

.placement-faction-nolink {
    color: var(--text-muted);
    cursor: default;
}

.placement-det {
    color: var(--text-muted);
    flex: 1;
    font-size: 13px;
}

.placement-date {
    color: var(--text-muted);
    font-size: 12px;
    min-width: 80px;
    text-align: right;
}

.placement-record {
    color: var(--text-muted);
    font-size: 13px;
    min-width: 50px;
    text-align: right;
}

.chevron, .list-indicator {
    transition: transform 0.2s;
    color: var(--text-muted);
    font-size: 12px;
}

.chevron.open, .list-indicator.open {
    transform: rotate(90deg);
}

.list-indicator {
    color: var(--gold-dim);
    font-size: 11px;
}

.chevron-placeholder {
    width: 12px;
}

.placement-row.no-list {
    opacity: 0.55;
}

.placement-row.no-list:hover {
    opacity: 0.75;
}

.placement-event-link {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    min-width: auto !important;
}

.placement-event-link:hover {
    color: var(--gold) !important;
}

.placement-event-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 8px 42px;
    background: var(--bg-card);
    font-size: 12px;
    color: var(--text-muted);
}

.placement-event-players {
    font-weight: 600;
    color: var(--gold-dim);
    white-space: nowrap;
    min-width: 65px;
}

.placement-size-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    width: 60px;
    flex-shrink: 0;
    overflow: hidden;
}

.placement-event-podium {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.placement-podium-faction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-muted);
}

.rank-cell {
    font-weight: 700;
    color: var(--gold);
    min-width: 36px;
}

.rank-1 { color: #ffd700; }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

/* ── Army list ──────────────────────────────────────────────── */
.army-lists-section {
    margin-top: 24px;
}

.army-list-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.army-list-toggle {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.army-list-toggle:hover {
    background: var(--bg-card-hover);
}

.army-list-toggle .chevron {
    transition: transform 0.2s;
    color: var(--text-muted);
}

.army-list-toggle .chevron.open {
    transform: rotate(90deg);
}

.army-list-content {
    padding: 16px;
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text-muted);
    max-height: 400px;
    overflow-y: auto;
}

/* Structured army list display */
.army-list-structured {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
}

.army-list-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(15, 15, 26, 0.8) 100%);
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.army-list-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.army-list-banner-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.army-list-faction {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

.army-list-detachment {
    font-size: 13px;
    color: var(--text);
    padding-left: 10px;
    border-left: 2px solid var(--border);
}

.army-list-stat {
    font-size: 12px;
    color: var(--text-muted);
}

.army-list-points-badge {
    font-size: 13px;
    font-weight: 700;
    color: var(--bg-deep);
    background: var(--gold);
    padding: 2px 10px;
    border-radius: 4px;
}

/* Unit groups */
.unit-groups {
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unit-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.unit-group-icon {
    font-size: 13px;
    color: var(--gold-dim);
    width: 18px;
    text-align: center;
}

.unit-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.unit-group-count {
    font-size: 10px;
    background: var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0 6px;
    font-weight: 600;
}

.unit-group-pts {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.unit-group-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 24px;
    padding-left: 12px;
    border-left: 1px solid rgba(42, 42, 74, 0.6);
}

/* Unit cards */
.unit-card {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(42, 42, 74, 0.5);
    border-radius: 6px;
    padding: 8px 10px;
    transition: border-color 0.2s;
}

.unit-card:hover {
    border-color: rgba(42, 42, 74, 0.9);
}

.unit-card-character {
    border-left: 3px solid var(--gold-dim);
}

.unit-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.unit-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-dim);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.unit-name {
    color: var(--text-bright);
    font-weight: 500;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.epic-badge {
    font-size: 9px;
    font-weight: 800;
    color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 3px;
    padding: 0 4px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.unit-pts {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}

.unit-gear {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 0 36px;
}
@media (max-width: 900px) {
    .unit-gear {
        padding-left: 36px;
    }
}

.gear-tag {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(42, 42, 74, 0.5);
    border: 1px solid rgba(42, 42, 74, 0.8);
    border-radius: 3px;
    padding: 1px 6px;
}


/* Raw text toggle */
.raw-text-section {
    border-top: 1px solid var(--border);
}

.raw-text-toggle {
    width: 100%;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s;
}

.raw-text-toggle:hover {
    color: var(--text);
}

/* Faction insights panel */
.faction-insights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .faction-insights {
        grid-template-columns: 1fr;
    }

    .header {
        padding: 6px 10px;
        gap: 6px;
    }

    .header h1 {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .epoch-chevron {
        min-width: 80px;
        height: 28px;
        padding: 0 14px;
    }

    .chevron-label {
        font-size: 9px;
    }

    .refresh-btn {
        font-size: 11px;
        padding: 4px 10px;
    }

    .header-bp-btn {
        width: 26px;
        height: 26px;
    }
}

/* Mini bar charts */
.mini-chart {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.mini-chart-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.mini-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.mini-bar-row:last-child {
    margin-bottom: 0;
}

.mini-bar-label {
    font-size: 12px;
    color: var(--text);
    min-width: 110px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.mini-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(42, 42, 74, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.mini-bar-value {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 20px;
    text-align: right;
}

/* ── Allegiance Filter ──────────────────────────────────────── */
.allegiance-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.allegiance-filter-btn {
    flex: 1;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.allegiance-filter-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.allegiance-filter-btn.active {
    color: #fff;
}

.allegiance-filter-btn.active[data-allegiance="All"] {
    background: var(--bg-card-hover);
    border-color: var(--gold-dim);
    color: var(--gold);
}

.allegiance-filter-btn.active[data-allegiance="Imperium"] {
    background: var(--allegiance-imperium);
    border-color: var(--allegiance-imperium);
}

.allegiance-filter-btn.active[data-allegiance="Chaos"] {
    background: var(--allegiance-chaos);
    border-color: var(--allegiance-chaos);
}

.allegiance-filter-btn.active[data-allegiance="Xenos"] {
    background: var(--allegiance-xenos);
    border-color: var(--allegiance-xenos);
}

/* ── Allegiance Groups ─────────────────────────────────────── */
.allegiance-group {
    margin-bottom: 8px;
}

.allegiance-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.allegiance-group-header:hover {
    background: var(--bg-card-hover);
}

.allegiance-group-indicator {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.allegiance-group-indicator.imperium { background: var(--allegiance-imperium); }
.allegiance-group-indicator.chaos { background: var(--allegiance-chaos); }
.allegiance-group-indicator.xenos { background: var(--allegiance-xenos); }
.allegiance-group-indicator.unknown { background: var(--allegiance-unknown); }

.allegiance-group-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    flex: 1;
}

.allegiance-group-count {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-deep);
    border-radius: 8px;
    padding: 1px 8px;
    font-weight: 600;
}

.allegiance-group-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.allegiance-group-chevron.open {
    transform: rotate(90deg);
}

.allegiance-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.allegiance-group-body.open {
    max-height: 5000px;
}

.allegiance-group-cards {
    padding-left: 4px;
}

/* ── Loading ────────────────────────────────────────────────── */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
}

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

/* ── Mobile elements hidden on desktop ────────────────────── */
.mobile-shell { display: none; }
.mobile-hamburger { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Hide desktop layout, show mobile shell */
    .layout { display: none !important; }
    .mobile-shell {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    /* Mobile content area */
    .mobile-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px;
    }

    /* ── Hamburger button ── */
    .mobile-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-card);
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        order: 99;
        transition: border-color 0.2s;
    }

    .mobile-hamburger:active {
        border-color: var(--gold);
    }

    .hamburger-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 18px;
        height: 18px;
        position: relative;
    }

    .hamburger-icon span {
        display: block;
        width: 16px;
        height: 2px;
        background: var(--text);
        border-radius: 1px;
        transition: all 0.25s ease;
        position: absolute;
    }

    .hamburger-icon span:nth-child(1) { top: 3px; }
    .hamburger-icon span:nth-child(2) { top: 8px; }
    .hamburger-icon span:nth-child(3) { top: 13px; }

    .hamburger-icon.open span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }
    .hamburger-icon.open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-icon.open span:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }

    /* ── Dropdown menu ── */
    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 199;
        background: rgba(0,0,0,0.4);
    }

    .mobile-shell .header {
        position: relative;
        z-index: 201;
    }

    .mobile-menu {
        position: absolute;
        top: calc(100% - 1px);
        left: 8px;
        z-index: 200;
        min-width: 200px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        overflow: hidden;
    }

    .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border: none;
        background: transparent;
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        transition: all 0.15s;
        border-left: 3px solid transparent;
    }

    .mobile-menu-item:not(:last-child) {
        border-bottom: 1px solid var(--border);
    }

    .mobile-menu-item:active {
        background: var(--bg-card-hover);
    }

    .mobile-menu-item.active {
        color: var(--gold);
        border-left-color: var(--gold);
        background: rgba(201,168,76,0.06);
    }

    .mobile-menu-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        stroke-width: 1.5;
    }

    /* ── Collapsible filters drawer ── */
    .mobile-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 8px;
        margin-bottom: 6px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-filters-toggle:active {
        background: var(--bg-card-hover);
    }

    .mobile-filters-drawer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-filters-drawer.open {
        max-height: 400px;
    }

    .mobile-filters-drawer .sidebar-slider {
        padding: 4px 0;
    }

    /* ── Header adjustments for mobile ── */
    .header {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        gap: 8px;
    }

    .header h1 {
        font-size: 13px;
    }

    .epoch-timeline {
        order: 10;
        flex: 0 0 100%;
        width: 100%;
        padding: 4px 0 0;
        gap: 3px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-top: 1px solid var(--border);
        margin-top: 2px;
    }

    .epoch-timeline::-webkit-scrollbar {
        display: none;
    }

    .epoch-chevron {
        min-width: 90px;
        height: 30px;
        padding: 0 18px;
    }

    .chevron-label {
        font-size: 10px;
    }

    .chevron-meta {
        font-size: 7px;
    }

    /* Detail views: full-width back button */
    .back-btn {
        margin-bottom: 8px;
    }

    /* Faction cards: 2 columns on mobile */
    .faction-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Calendar: smaller cells */
    .cal-day-cell {
        min-height: 40px;
        padding: 2px 3px;
    }

    .cal-day-num {
        font-size: 10px;
    }

    .cal-event-dot {
        width: 12px;
        height: 12px;
        font-size: 7px;
    }

}

/* ── Main Content Tabs ─────────────────────────────────────── */
.main-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}

.main-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.main-tab:hover {
    color: var(--text);
}

.main-tab.active {
    background: var(--bg-card);
    color: var(--gold);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Calendar View ─────────────────────────────────────────── */
/* ── Upcoming Major Tournaments Banner ──────────────────────── */
.upcoming-majors {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
}
.upcoming-majors-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(74,111,165,0.15) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}
.upcoming-majors-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.02em;
}
.upcoming-majors-count {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    line-height: 1.4;
}
.upcoming-majors-toggle {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.upcoming-majors-grid {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
}
.upcoming-major-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    border-left: 3px solid transparent;
}
.upcoming-major-card:last-child {
    border-bottom: none;
}
.upcoming-major-card:hover {
    background: var(--bg-card-hover);
}
.upcoming-major-card.tier-major {
    border-left-color: #e05555;
}
.upcoming-major-card.tier-large {
    border-left-color: #c9a84c;
}
.upcoming-major-card.tier-medium {
    border-left-color: var(--accent);
}
.umc-countdown {
    min-width: 52px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--text-bright);
    flex-shrink: 0;
}
.tier-major > .umc-countdown {
    color: #e05555;
    background: rgba(224,85,85,0.1);
}
.tier-large > .umc-countdown {
    color: #c9a84c;
    background: rgba(201,168,76,0.1);
}
.umc-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.umc-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.umc-meta {
    display: flex;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.umc-loc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.umc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.umc-tier-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 3px;
}
.umc-tier-badge.tier-major {
    background: rgba(224,85,85,0.15);
    color: #e05555;
}
.umc-tier-badge.tier-large {
    background: rgba(201,168,76,0.15);
    color: #c9a84c;
}
.umc-tier-badge.tier-medium {
    background: rgba(74,111,165,0.15);
    color: var(--accent);
}
.umc-players {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.calendar-view {
    animation: slideIn 0.3s ease;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cal-nav-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.cal-nav-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.cal-nav-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-bright);
}

.calendar-grid {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
}

.cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: rgba(42, 42, 74, 0.3);
    border-bottom: 1px solid var(--border);
}

.cal-header-cell {
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.cal-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid rgba(46, 48, 72, 0.5);
}

.cal-week-row:last-child {
    border-bottom: none;
}

.cal-day-cell {
    min-height: 54px;
    padding: 4px 6px;
    border-right: 1px solid rgba(46, 48, 72, 0.3);
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.cal-day-cell:last-child {
    border-right: none;
}

.cal-day-cell:hover {
    background: var(--bg-card-hover);
}

.cal-day-cell.empty {
    cursor: default;
    background: rgba(18, 19, 26, 0.3);
}

.cal-day-cell.empty:hover {
    background: rgba(18, 19, 26, 0.3);
}

.cal-day-cell.today {
    background: rgba(74, 111, 165, 0.12);
}

.cal-day-cell.today .cal-day-num {
    color: var(--accent);
    font-weight: 700;
}

.cal-day-cell.selected {
    background: rgba(201, 168, 76, 0.12);
    box-shadow: inset 0 0 0 2px var(--gold-dim);
}

.cal-day-cell.has-events {
    background: rgba(74, 154, 110, 0.06);
}

.cal-day-cell.has-events.selected {
    background: rgba(201, 168, 76, 0.12);
}

.cal-day-num {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}

.cal-day-indicators {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.cal-event-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.cal-bp-diamond {
    color: var(--gold);
    font-size: 12px;
    line-height: 1;
}

.cal-selected-section {
    margin-top: 16px;
}

.cal-selected-header {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-left: 14px;
    position: relative;
}

.cal-selected-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: calc(100% - 8px);
    background: var(--gold);
    border-radius: 2px;
}

.cal-bp-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.cal-bp-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--gold);
}

.cal-bp-diamond-inline {
    color: var(--gold);
    font-size: 16px;
}

.cal-bp-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-bright);
    flex: 1;
}

.cal-bp-details-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 3px;
    padding: 2px 6px;
}

.cal-no-events {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Balance Pass List ────────────────────────────────────── */
.bp-list { display: flex; flex-direction: column; gap: 12px; }
.bp-list-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.bp-list-card:hover {
    border-color: var(--gold-dim);
    background: var(--bg-card-hover);
}
.bp-list-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bp-list-diamond {
    color: var(--gold);
    font-size: 14px;
}
.bp-list-title {
    font-weight: 600;
    color: var(--text-bright);
    flex: 1;
}
.bp-list-date {
    color: var(--text-muted);
    font-size: 12px;
}
.bp-list-summary {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 6px;
}
.bp-list-footer {
    margin-top: 8px;
}
.bp-list-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.bp-list-tag.has-details {
    background: #1a3a1a;
    color: #4a9a6e;
}
.bp-list-tag.no-details {
    background: #2a2a2a;
    color: var(--text-muted);
}

/* ── Balance Pass Detail ───────────────────────────────────── */
.bp-source-link {
    color: var(--accent);
    text-decoration: none;
}

.bp-source-link:hover {
    color: var(--gold);
    text-decoration: underline;
}

.bp-summary {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 24px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.bp-section {
    margin-bottom: 24px;
}

.bp-core-rules {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}

.bp-core-rule {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    padding: 4px 0;
}

.bp-faction-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bp-faction-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.bp-faction-card:hover {
    border-color: var(--gold-dim);
    border-left-color: inherit;
}

.bp-faction-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.bp-faction-header:hover {
    background: var(--bg-card-hover);
}

.bp-direction-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.bp-faction-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-bright);
    min-width: 140px;
    flex-shrink: 0;
}

.bp-faction-summary {
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}

.bp-faction-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--border);
    animation: slideIn 0.2s ease;
}

.bp-changes-group {
    margin-top: 12px;
}

.bp-changes-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.bp-pts-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}

.bp-pts-unit {
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.bp-pts-range {
    color: var(--text-muted);
    font-size: 12px;
}

.bp-pts-change {
    font-weight: 700;
    min-width: 60px;
    text-align: right;
}

.bp-pts-up {
    color: #c75454;
}

.bp-pts-down {
    color: #4a9a6e;
}

.bp-rule-item {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    padding: 2px 0;
}

.bp-detachment-item {
    font-size: 13px;
    color: var(--gold);
    line-height: 1.6;
    padding: 2px 0;
}

.bp-no-details {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

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

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

/* ── Faction Icons ─────────────────────────────────────────────── */
.faction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}

.faction-icon-img {
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 5px;
    object-fit: contain;
    border-radius: 2px;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
}

/* ── Event Status Badges ──────────────────────────────────────── */
.event-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.event-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.event-icon-badge.completed {
    color: #6dcf9e;
}

.event-icon-badge.upcoming {
    color: #7aacde;
}

.event-icon-badge.has-lists {
    color: var(--gold);
}

.event-icon-badge.no-lists {
    color: var(--text-muted);
    opacity: 0.5;
}

.event-icon-badge.no-data {
    color: #e05555;
}

.event-icon-badge.neutral {
    color: var(--text-muted);
}

.event-badge-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: -2px;
}

/* ── Tournament Size Bar ─────────────────────────────────────── */
.event-size-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 6px;
    margin-bottom: 2px;
    overflow: hidden;
}

.event-size-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.event-size-bar-fill.size-small {
    background: var(--accent);
}

.event-size-bar-fill.size-medium {
    background: var(--gold);
}

.event-size-bar-fill.size-large {
    background: #6dcf9e;
}

/* ── Size Filter Buttons ─────────────────────────────────────── */
.size-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.size-filter-btn {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.size-filter-btn:hover {
    border-color: var(--gold-dim);
    color: var(--text);
}

.size-filter-btn.active {
    background: var(--gold-dim);
    border-color: var(--gold-dim);
    color: #fff;
}

/* ── Podium ──────────────────────────────────────────────────── */
.event-podium {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-podium-entry {
    display: flex;
    align-items: center;
    gap: 4px;
}

.podium-rank {
    font-weight: 700;
    min-width: 28px;
    flex-shrink: 0;
}

.podium-rank.rank-1 {
    color: var(--gold);
}

.podium-rank.rank-2 {
    color: #a8b4c0;
}

.podium-rank.rank-3 {
    color: #c48a5a;
}

.podium-details {
    color: var(--text-muted);
}

/* ── Analytics Page ────────────────────────────────────────────── */
.analytics-page {
    animation: slideIn 0.3s ease;
}

.analytics-overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.analytics-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.2s;
}

.analytics-stat-card:hover {
    border-color: var(--gold-dim);
}

.analytics-stat-icon {
    font-size: 18px;
    color: var(--gold-dim);
}

.analytics-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-bright);
}

.analytics-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.analytics-chart-container {
    position: relative;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 20px;
}

.analytics-section-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 0;
}

.analytics-section { margin-bottom: 24px; }

.analytics-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 0 8px;
    scroll-margin-top: 52px;
}

.analytics-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.analytics-section-grid > .analytics-full-width {
    grid-column: 1 / -1;
}

.analytics-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.analytics-trend-toggle { display: none; }

.analytics-chart-card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .analytics-section-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
        width: 100%;
    }
    .analytics-chart-card {
        padding: 10px;
        width: 100%;
    }
    .analytics-overview-cards { grid-template-columns: repeat(2, 1fr); }
    .analytics-trend-toggle { display: flex; margin-bottom: 8px; }
    .analytics-mobile-hide { display: none !important; }
}

/* ── Top Units Chart ──────────────────────────────────────────── */
.units-chart {
    margin-top: 12px;
}

.units-chart-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.units-chart-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-bright);
}

.units-chart-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

.units-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.units-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.units-filter-btn:hover {
    border-color: var(--gold-dim);
    color: var(--text);
}

.units-filter-btn.active {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.units-bar-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unit-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.unit-bar-row:hover {
    border-color: var(--gold-dim);
}

.unit-bar-rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.unit-bar-info {
    flex: 1;
    min-width: 0;
}

.unit-bar-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.unit-bar-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unit-bar-keywords {
    font-size: 9px;
    color: var(--text-muted);
    background: rgba(74, 111, 165, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.unit-bar-track {
    height: 6px;
    background: rgba(42, 42, 74, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.unit-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.unit-bar-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.unit-bar-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

.unit-bar-pts {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.unit-bar-avg {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Top Players Table ─────────────────────────────────────────── */
.top-players-table {
    margin-top: 12px;
}

.tp-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.tp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-size: 13px;
}

.tp-row:hover {
    background: var(--bg-card-hover);
    border-color: var(--gold-dim);
}

.tp-row.expanded {
    border-color: var(--gold-dim);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.tp-col-rank {
    min-width: 28px;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
}

.tp-col-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-col-stat {
    min-width: 40px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
}

.tp-wins {
    color: var(--gold);
}

.tp-col-faction {
    min-width: 110px;
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-recent-results {
    background: var(--bg-deep);
    border: 1px solid var(--gold-dim);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-bottom: 4px;
    padding: 6px 12px;
}

.tp-recent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.tp-recent-event {
    flex: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.tp-recent-event:hover {
    color: var(--gold);
}

.tp-recent-date {
    color: var(--text-muted);
    font-size: 11px;
    min-width: 80px;
    text-align: right;
}

.tp-recent-faction {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 11px;
    min-width: 100px;
}

/* ── Analytics Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
    .analytics-overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Refresh Dialog ──────────────────────────────────────────── */

.refresh-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--gold);
    cursor: pointer;
    font-size: 13px;
    margin-left: auto;
    transition: all 0.2s;
}

.refresh-btn:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

.header-refresh {
    margin-left: auto;
    flex-shrink: 0;
}

.refresh-btn.has-missing {
    border-color: #c75454;
    color: #c75454;
    animation: refresh-pulse 2s ease-in-out infinite;
}

.refresh-btn.has-missing:hover {
    border-color: #e05555;
    color: #e05555;
    background: rgba(199, 84, 84, 0.1);
}

@keyframes refresh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.refresh-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.refresh-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 440px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

.refresh-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.refresh-dialog-header h3 {
    color: var(--text-bright);
    font-size: 16px;
    font-weight: 700;
}

.refresh-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.refresh-close-btn:hover {
    color: var(--text);
}

.refresh-body {
    padding: 20px;
}

.refresh-error {
    background: #3a1a1a;
    color: #c75454;
    padding: 10px 16px;
    margin: 12px 20px 0;
    border-radius: 6px;
    font-size: 13px;
}

.refresh-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.refresh-info-label {
    color: var(--text-muted);
    font-size: 13px;
}

.refresh-info-value {
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
}

.refresh-highlight {
    color: var(--gold);
}

/* ── Refresh Range Display ─────────────────────────────────── */

.refresh-range-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.refresh-range-end {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.refresh-range-end.selecting {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-dim);
}

.refresh-range-arrow {
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Refresh Mini Calendar ────────────────────────────────── */

.refresh-mini-cal {
    margin-bottom: 10px;
}

.refresh-mini-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.refresh-mini-nav-btn {
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
}

.refresh-mini-nav-btn:hover {
    color: var(--text);
    border-color: var(--gold-dim);
}

.refresh-mini-title {
    color: var(--text-bright);
    font-size: 13px;
    font-weight: 700;
}

.refresh-mini-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.refresh-mini-hcell {
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 0;
}

.refresh-mini-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.refresh-mini-cell {
    position: relative;
    text-align: center;
    padding: 4px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}

.refresh-mini-cell:hover:not(.empty):not(.future) {
    background: var(--bg-card-hover);
}

.refresh-mini-cell.future {
    opacity: 0.35;
    cursor: pointer;
}

.refresh-mini-cell.future.ev-scheduled {
    opacity: 0.7;
}

.refresh-mini-cell.in-range {
    background: rgba(201, 168, 76, 0.1);
}

.refresh-mini-cell.range-start,
.refresh-mini-cell.range-end {
    background: rgba(201, 168, 76, 0.25);
}

.refresh-mini-cell.range-start {
    border-radius: 4px 0 0 4px;
}

.refresh-mini-cell.range-end {
    border-radius: 0 4px 4px 0;
}

.refresh-mini-cell.range-start.range-end {
    border-radius: 4px;
}

.refresh-mini-cell.today .refresh-mini-num {
    color: var(--gold);
    font-weight: 700;
}

.refresh-mini-num {
    color: var(--text);
    font-size: 12px;
}

.refresh-mini-cell.empty {
    cursor: default;
}

.refresh-mini-cell.ev-ok {
    background: rgba(74, 154, 110, 0.25);
}

.refresh-mini-cell.ev-missing {
    background: rgba(199, 84, 84, 0.3);
}

.refresh-mini-cell.ev-scheduled {
    background: rgba(210, 160, 60, 0.2);
}

.refresh-mini-cell.ev-ok.in-range {
    background: rgba(74, 154, 110, 0.35);
}

.refresh-mini-cell.ev-missing.in-range {
    background: rgba(199, 84, 84, 0.4);
}

.refresh-mini-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.refresh-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.refresh-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.refresh-legend-swatch.ok {
    background: rgba(74, 154, 110, 0.4);
}

.refresh-legend-swatch.missing {
    background: rgba(199, 84, 84, 0.45);
}

.refresh-legend-swatch.scheduled {
    background: rgba(210, 160, 60, 0.35);
}

/* ── Refresh Inspect Panel ────────────────────────────────── */

.refresh-mini-cell.inspected {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    z-index: 1;
}

.refresh-inspect {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.refresh-inspect-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    color: var(--text-bright);
    font-size: 12px;
    font-weight: 600;
}

.refresh-inspect-count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

.refresh-inspect-event {
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    border-left: 3px solid transparent;
}

.refresh-inspect-event.inspect-ok {
    background: rgba(74, 154, 110, 0.08);
    border-left-color: #4a9a6e;
}

.refresh-inspect-event.inspect-missing {
    background: rgba(199, 84, 84, 0.08);
    border-left-color: #c75454;
}

.refresh-inspect-event.inspect-scheduled {
    background: rgba(210, 160, 60, 0.08);
    border-left-color: #d4a03c;
}

.refresh-inspect-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.refresh-inspect-name {
    color: var(--text-bright);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.refresh-inspect-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 3px;
}

.refresh-inspect-status.inspect-ok {
    color: #4a9a6e;
    background: rgba(74, 154, 110, 0.15);
}

.refresh-inspect-status.inspect-missing {
    color: #c75454;
    background: rgba(199, 84, 84, 0.15);
}

.refresh-inspect-status.inspect-scheduled {
    color: #d4a03c;
    background: rgba(210, 160, 60, 0.15);
}

.refresh-inspect-meta {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.refresh-inspect-winner {
    color: var(--gold);
    font-size: 11px;
    margin-top: 2px;
}

.refresh-inspect-tag {
    color: var(--text-muted);
    font-size: 10px;
    margin-top: 2px;
    font-style: italic;
}

.refresh-inspect-empty {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    padding: 8px;
}

/* ── Refresh Presets ──────────────────────────────────────── */

.refresh-presets-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.refresh-presets-label {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.refresh-presets-select {
    flex: 1;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    color-scheme: dark;
}

.refresh-presets-select:focus {
    outline: none;
    border-color: var(--gold-dim);
}

/* ── Refresh Banners & Stats ──────────────────────────────── */

.refresh-missing-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(199, 84, 84, 0.12);
    border: 1px solid rgba(199, 84, 84, 0.3);
    border-radius: 6px;
    margin-bottom: 10px;
}

.refresh-missing-count {
    font-size: 20px;
    font-weight: 800;
    color: #c75454;
    line-height: 1;
}

.refresh-missing-text {
    color: #c75454;
    font-size: 12px;
    font-weight: 600;
}

.refresh-ok-banner {
    padding: 6px 12px;
    background: rgba(74, 154, 110, 0.08);
    border-radius: 6px;
    margin-bottom: 10px;
    color: #4a9a6e;
    font-size: 11px;
    text-align: center;
}

.refresh-stats-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.refresh-stat {
    flex: 1;
    background: var(--bg-deep);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}

.refresh-stat-val {
    display: block;
    color: var(--text-bright);
    font-size: 16px;
    font-weight: 700;
}

.refresh-stat-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.refresh-start-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 7px;
    border: none;
    border-radius: 6px;
    background: var(--gold);
    color: var(--bg-deep);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.refresh-start-btn:hover {
    background: var(--gold-dim);
}

.refresh-phase {
    display: flex;
    align-items: center;
    color: var(--text-bright);
    font-size: 14px;
    padding: 8px 0 4px;
}
.refresh-message {
    color: var(--text-dim);
    font-size: 12px;
    padding: 4px 0 8px;
    font-style: italic;
}

/* ── Phase Stepper ────────────────────────────────────────────── */

.refresh-progress-section {
    padding: 8px 0;
}

.refresh-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px;
    position: relative;
}

.refresh-stepper::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.refresh-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 1;
    flex: 1;
}

.refresh-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.refresh-step.completed .refresh-step-dot {
    background: #6ec99a;
    border-color: #6ec99a;
    color: #111;
}

.refresh-step.active .refresh-step-dot {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.4);
    animation: step-pulse 2s ease-in-out infinite;
}

@keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(218, 165, 32, 0.3); }
    50% { box-shadow: 0 0 12px rgba(218, 165, 32, 0.6); }
}

.refresh-step-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.refresh-step.completed .refresh-step-label {
    color: #6ec99a;
}

.refresh-step.active .refresh-step-label {
    color: var(--gold);
}

/* ── Progress Bar ─────────────────────────────────────────────── */

.refresh-bar-section {
    padding: 0 0 8px;
}

.refresh-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.refresh-bar-label {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.refresh-bar-pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.refresh-bar-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.refresh-bar-track.indeterminate {
    position: relative;
}

.refresh-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-dim));
    border-radius: 3px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.refresh-bar-fill.indeterminate {
    width: 30%;
    animation: indeterminate-slide 1.5s ease-in-out infinite;
}

@keyframes indeterminate-slide {
    0% { margin-left: 0%; }
    50% { margin-left: 70%; }
    100% { margin-left: 0%; }
}

.refresh-bar-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ── Sync Mini Progress Bar ───────────────────────────────────── */

.sync-mini-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0 4px;
}

.sync-mini-bar-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    transition: width 0.5s ease;
    min-width: 1px;
}

.refresh-counters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.refresh-counter {
    background: var(--bg-deep);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.refresh-counter-val {
    display: block;
    color: var(--gold);
    font-size: 22px;
    font-weight: 700;
}

.refresh-counter-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.refresh-result {
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}

.refresh-result.success {
    background: #1a3a1a;
    color: #4a9a6e;
}

.refresh-result.failure {
    background: #3a1a1a;
    color: #c75454;
}

.refresh-errors {
    margin-top: 16px;
}

.refresh-errors-header {
    color: #c75454;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.refresh-error-item {
    background: #3a1a1a;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 4px;
}

/* ── Theme Toggle ─────────────────────────────────────────── */
.theme-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.theme-toggle:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
}

/* ── Detachment Stats Panel ───────────────────────────────────── */

.detachment-panel {
    animation: slideIn 0.3s ease;
}

.detachment-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.detachment-filter-select {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.detachment-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dt-header-row, .dt-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 0.6fr 1fr 0.7fr 0.6fr 0.7fr;
    gap: 4px;
    padding: 8px 12px;
    align-items: center;
    font-size: 12px;
}

.dt-header-row {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.dt-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.dt-row:hover {
    border-color: var(--gold-dim);
}

.dt-col-faction {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.dt-col-detach {
    color: var(--text-muted);
    font-weight: 500;
}

.dt-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dt-col-num.clickable {
    cursor: pointer;
    user-select: none;
}

.dt-col-num.clickable:hover {
    color: var(--gold);
}

.dt-wr-bar {
    height: 3px;
    background: var(--bg-deep);
    border-radius: 2px;
    margin-top: 3px;
}

.dt-wr-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--gold);
    transition: width 0.3s;
}

.wr-hot { color: #4a9a6e; }
.wr-cold { color: #e05555; }
.wr-neutral { color: var(--text); }

/* ── Unit Performance Panel ───────────────────────────────────── */

.unit-perf-panel {
    animation: slideIn 0.3s ease;
}

.unit-perf-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.unit-perf-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.unit-perf-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unit-perf-row {
    display: grid;
    grid-template-columns: 200px 1fr 120px;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.unit-perf-row:hover {
    border-color: var(--gold-dim);
}

.unit-perf-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unit-perf-unit-name {
    font-weight: 700;
    font-size: 12px;
}

.unit-perf-faction {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.unit-perf-bar-wrap {
    position: relative;
    height: 22px;
    background: var(--bg-deep);
    border-radius: 4px;
    overflow: hidden;
}

.unit-perf-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.unit-perf-bar-fill.or-hot { background: #4a9a6e; }
.unit-perf-bar-fill.or-cold { background: #e05555; }
.unit-perf-bar-fill.or-neutral { background: var(--gold-dim); }

.unit-perf-bar-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-bright);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.unit-perf-stats {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted);
    justify-content: flex-end;
}

/* ── Matchups Matrix ──────────────────────────────────────────── */

.matchups-panel {
    animation: slideIn 0.3s ease;
    overflow-x: auto;
}

.matchup-grid {
    display: grid;
    gap: 2px;
}

.matchup-corner {
    background: var(--bg-deep);
    border-radius: 4px;
}

.matchup-col-header {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 2px;
    text-align: center;
    color: var(--text-muted);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.matchup-col-header .faction-icon-img,
.matchup-col-header .faction-icon {
    writing-mode: horizontal-tb;
    flex-shrink: 0;
}

.matchup-col-name {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.matchup-row-header {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.matchup-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.matchup-cell {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    transition: transform 0.1s;
    cursor: default;
}

.matchup-cell:hover {
    transform: scale(1.05);
    z-index: 1;
}

.matchup-self {
    background: var(--bg-deep);
    color: var(--text-muted);
    font-size: 14px;
}

.matchup-empty {
    background: var(--bg-deep);
    color: var(--text-muted);
    opacity: 0.5;
}

.matchup-wr {
    font-variant-numeric: tabular-nums;
}

.analytics-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 8px 0 12px 0;
    line-height: 1.4;
}

/* ── Meta List Panel ──────────────────────────────────────────── */

.meta-list-panel {
    animation: slideIn 0.3s ease;
}

.ml-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.ml-card-gold {
    border: 2px solid var(--gold);
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.15);
}

/* Meta list distinct styling */
.ml-display {
    border: 2px solid var(--gold);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(212, 168, 67, 0.18), inset 0 0 30px rgba(212, 168, 67, 0.03);
}

.ml-banner {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(15, 15, 26, 0.85) 100%);
    border-bottom: 2px solid var(--gold);
}

.ml-badge-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bg-deep);
    background: var(--gold);
    padding: 2px 8px;
    border-radius: 3px;
}

.ml-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ml-card-faction {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 16px;
    color: var(--text-bright);
}

.ml-card-detachment {
    font-size: 11px;
    color: var(--gold-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ml-card-points {
    margin-left: auto;
    font-size: 14px;
    font-weight: 800;
    color: var(--gold);
}

.ml-card-info {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 12px;
}

.ml-unit-commentary {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 0 0 28px;
    font-weight: 500;
}

.ml-expand-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-bright);
}

.faction-meta-list {
    margin-bottom: 16px;
}

/* ── Combos Display ─────────────────────────────────────────── */

.faction-combos {
    margin-bottom: 16px;
}

.combos-display {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
}

.combos-info {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
    align-items: center;
}

.combos-rules-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bg-deep);
    background: var(--tier-b);
    padding: 2px 6px;
    border-radius: 3px;
}

.combos-section {
    margin-bottom: 12px;
}

.combos-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.combo-card {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(42, 42, 74, 0.5);
    border-radius: 6px;
    margin-bottom: 4px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.combo-card:hover {
    border-color: rgba(42, 42, 74, 0.9);
}

.combo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
}

.combo-header.clickable {
    cursor: pointer;
}

.combo-header.clickable:hover {
    background: var(--bg-card-hover);
}

.combo-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.combo-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.combo-units {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-count {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.combo-lift {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(212, 175, 55, 0.12);
    padding: 2px 6px;
    border-radius: 3px;
}

.combo-wr {
    font-size: 11px;
    color: var(--text-dim);
}

.combo-delta {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
}

.combo-delta.positive {
    color: var(--tier-a);
    background: rgba(52, 211, 153, 0.12);
}

.combo-delta.negative {
    color: var(--tier-d);
    background: rgba(239, 68, 68, 0.12);
}

.combo-top4 {
    font-size: 11px;
    color: var(--text-dim);
}

/* Synergy rows */

.combo-synergies {
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(15, 15, 26, 0.5);
}

.synergy-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.synergy-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
}

.syn-leader {
    color: #fff;
    background: rgba(139, 92, 246, 0.7);
}

.syn-aura {
    color: #fff;
    background: rgba(59, 130, 246, 0.7);
}

.syn-proximity {
    color: #fff;
    background: rgba(14, 165, 233, 0.6);
}

.syn-enhancement {
    color: var(--bg-deep);
    background: var(--gold);
}

.syn-detachment {
    color: #fff;
    background: rgba(239, 68, 68, 0.6);
}

.synergy-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.synergy-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-bright);
}

.synergy-flow {
    font-size: 11px;
    color: var(--gold);
}

.synergy-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Traffic Monitor ──────────────────────────────────────────── */

.traffic-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.traffic-popup {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 540px;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.traffic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.traffic-title {
    font-weight: 800;
    font-size: 16px;
    color: var(--text-bright);
}

.traffic-body {
    padding: 16px 20px;
}

.traffic-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.traffic-stat-card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.traffic-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold);
}

.traffic-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.traffic-section {
    margin-bottom: 12px;
}

.traffic-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.traffic-ip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.traffic-ip-row:nth-child(even) {
    background: var(--bg-deep);
}

.traffic-ip {
    font-family: monospace;
    color: var(--text);
}

.traffic-path {
    color: var(--text);
    font-family: monospace;
    font-size: 11px;
}

.traffic-ip-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.traffic-empty {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 16px;
}

.traffic-chart-container {
    position: relative;
    width: 100%;
    height: 180px;
    margin-bottom: 8px;
}

.traffic-ip-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.traffic-ip-geo {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.2;
}

.traffic-country-row .traffic-ip {
    font-family: inherit;
}

/* ── Sync Event List (calendar progress) ────────────────────── */

.sync-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    flex-wrap: wrap;
}

.sync-summary-item {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sync-summary-item.done { color: #6ec99a; }
.sync-summary-item.syncing { color: var(--gold); }
.sync-summary-item.pending { color: var(--text-muted); }
.sync-summary-item.skipped { color: var(--text-muted); opacity: 0.6; }

.sync-summary-sep {
    color: var(--border);
}

.sync-summary-totals {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sync-event-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 4px 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-deep);
}

.sync-date-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card);
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sync-date-count {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.sync-event-item {
    padding: 4px 10px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: opacity 0.15s;
}

.sync-event-item.syncing {
    border-left-color: var(--gold);
    background: rgba(201,168,76,0.08);
}

.sync-event-item.done {
    opacity: 0.45;
    border-left-color: #4a9a6e;
}

.sync-event-item.skipped {
    opacity: 0.25;
    border-left-color: transparent;
}

.sync-event-item.pending {
    border-left-color: var(--border);
    opacity: 0.7;
}

.sync-event-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sync-event-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.sync-event-players {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.sync-event-counts {
    font-size: 10px;
    color: #6ec99a;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.sync-event-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.sync-event-badge.syncing {
    background: rgba(201,168,76,0.25);
    color: var(--gold);
    animation: sync-pulse 1.5s ease-in-out infinite;
}
.sync-event-badge.skipped { background: rgba(122,125,138,0.15); color: var(--text-muted); }

@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sync-event-detail {
    font-size: 10px;
    color: var(--gold-dim);
    font-style: italic;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Headlines Tab ──────────────────────────────────────────── */

.headlines-tab {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.headlines-section {
    margin-bottom: 8px;
}

/* Summary bar at top */
.headlines-summary {
    display: flex;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.headlines-summary-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.headlines-summary-stat strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
}

.headlines-summary-stat .summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.headlines-summary-stat .summary-dot.major { background: var(--tier-s); }
.headlines-summary-stat .summary-dot.large { background: var(--tier-a); }
.headlines-summary-stat .summary-dot.medium { background: var(--tier-c); }

/* Section panel: summary + compact chart side-by-side */
.section-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
}
.section-panel-top {
    flex-shrink: 0;
    min-width: 0;
}
.section-panel-top .section-heading {
    margin: 0 0 4px 0;
    font-size: 1rem;
}
.section-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.section-stat {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.section-stat strong {
    color: var(--text);
}
.section-stat-sep {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.section-stat-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-left: 4px;
}

/* Compact faction wins chart */
.fw-chart-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 320px;
    min-width: 0;
    max-width: 320px;
    margin-left: auto;
}
.fw-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
}
.fw-label {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 120px;
    min-width: 120px;
    overflow: hidden;
}
.fw-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fw-track {
    flex: 1;
    height: 10px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
}
.fw-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    min-width: 3px;
    transition: width 0.4s ease;
}
.fw-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text);
    width: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Featured grid: 1-2 large cards side by side */
.headlines-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

/* Regular results: tighter 2-col grid */
.headlines-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.headline-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 4px solid var(--border);
    overflow: hidden;
}

.headline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Featured cards: bigger, more prominent */
.headline-card.headline-featured {
    border-left-width: 6px;
}

/* Faction-themed banner */
.headline-card-banner {
    position: relative;
    padding: 14px 14px 10px;
    overflow: hidden;
    min-height: 70px;
}
.headline-card.headline-featured .headline-card-banner {
    padding: 18px 18px 12px;
    min-height: 80px;
}
.headline-card-banner-icon {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    object-fit: contain;
    opacity: 0.12;
    filter: grayscale(50%) brightness(1.5);
    pointer-events: none;
}
.headline-card.headline-featured .headline-card-banner-icon {
    width: 110px;
    height: 110px;
    right: -5px;
    opacity: 0.15;
}
.headline-card-banner-overlay {
    position: relative;
    z-index: 1;
}
.headline-card-banner .headline-name {
    color: #e8e8ec;
}
.headline-card-banner .headline-meta {
    color: rgba(220, 220, 230, 0.7);
    margin-bottom: 0;
}
.headline-card-banner .headline-lists-badge {
    background: rgba(100, 180, 100, 0.3);
    color: #8cd48c;
}

.headline-card.headline-featured .headline-name {
    font-size: 18px;
    margin-bottom: 6px;
}

.headline-card.headline-featured .headline-meta {
    font-size: 13px;
}

.headline-card.headline-featured .headline-winner,
.headline-card.headline-featured .headline-runner-up {
    font-size: 14px;
}

.headline-card.headline-featured .headline-rank-icon {
    font-size: 20px;
}

.headline-card.headline-major {
    border-left-color: var(--tier-s);
}

.headline-card.headline-large {
    border-left-color: var(--tier-a);
}

.headline-card.headline-medium {
    border-left-color: var(--tier-c);
}

.headline-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.headline-size-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
}

.headline-size-badge.headline-major {
    background: var(--tier-s);
}

.headline-size-badge.headline-large {
    background: var(--tier-a);
}

.headline-size-badge.headline-medium {
    background: var(--tier-c);
}

.headline-lists-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(100, 180, 100, 0.2);
    color: #6cb46c;
}

.headline-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.headline-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.headline-winner,
.headline-runner-up {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 3px 14px;
}
.headline-card.headline-featured .headline-winner,
.headline-card.headline-featured .headline-runner-up {
    padding: 4px 18px;
}
.headline-winner {
    padding-top: 10px;
}
.headline-winner:last-child,
.headline-runner-up:last-child {
    padding-bottom: 12px;
}

.headline-winner {
    color: var(--text);
    font-weight: 500;
}

.headline-runner-up {
    color: var(--text-muted);
}

.headline-rank-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.headline-player {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headline-faction {
    opacity: 0.7;
    font-size: 12px;
    white-space: nowrap;
}

.headline-detachment {
    opacity: 0.5;
    font-size: 11px;
    white-space: nowrap;
}

/* Headlines: LCARS theme */
[data-theme="lcars"] .headline-card {
    border-radius: 0 16px 16px 0;
    border-left-width: 6px;
    border-left-color: #cc99cc;
}
[data-theme="lcars"] .headline-card-banner {
    border-radius: 0 16px 0 0;
}
[data-theme="lcars"] .headline-card-banner-icon {
    opacity: 0.15;
    filter: grayscale(30%) brightness(1.8) sepia(30%) hue-rotate(260deg);
}

[data-theme="lcars"] .headline-card.headline-major { border-left-color: #ff9966; }
[data-theme="lcars"] .headline-card.headline-large { border-left-color: #cc99cc; }
[data-theme="lcars"] .headline-card.headline-medium { border-left-color: #9999cc; }

[data-theme="lcars"] .headline-size-badge { border-radius: 12px; }
[data-theme="lcars"] .headline-size-badge.headline-major { background: #ff9966; color: #000; }
[data-theme="lcars"] .headline-size-badge.headline-large { background: #cc99cc; color: #000; }
[data-theme="lcars"] .headline-size-badge.headline-medium { background: #9999cc; color: #000; }

[data-theme="lcars"] .headlines-summary { border-radius: 0 16px 16px 0; border-left: 4px solid #cc99cc; }
[data-theme="lcars"] .section-panel { border-radius: 0 16px 16px 0; border-left: 4px solid #cc99cc; }
[data-theme="lcars"] .fw-bar { background: #ff9966; }
[data-theme="lcars"] .fw-track { background: rgba(153,153,204,0.15); }
[data-theme="lcars"] .news-source-frontline-gaming { background: #99cc99; color: #000; }

/* Headlines: Tron theme */
[data-theme="tron"] .headline-card {
    border-color: rgba(0, 229, 255, 0.3);
    border-left-color: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

[data-theme="tron"] .headline-card:hover {
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .headline-card.headline-major { border-left-color: #ff4444; }
[data-theme="tron"] .headline-card.headline-large { border-left-color: #00e5ff; }
[data-theme="tron"] .headline-card.headline-medium { border-left-color: #00e5ff; }
[data-theme="tron"] .headline-card-banner-icon {
    opacity: 0.1;
    filter: grayscale(100%) brightness(2) sepia(100%) hue-rotate(150deg);
}

[data-theme="tron"] .headlines-summary {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

[data-theme="tron"] .section-panel {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}
[data-theme="tron"] .fw-bar { background: #00e5ff; }
[data-theme="tron"] .fw-track { background: rgba(0, 229, 255, 0.08); }
[data-theme="tron"] .news-source-frontline-gaming { background: #00e5ff; color: #000; }

/* ── Video Tiles ────────────────────────────────────────────── */

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

.video-tile {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.video-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    text-decoration: none;
    color: inherit;
}

.video-tile:hover .video-thumb img {
    transform: scale(1.05);
}

.video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

.video-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.video-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.video-channel {
    color: var(--accent);
    font-weight: 600;
}

/* Video: LCARS */
[data-theme="lcars"] .video-tile {
    border-radius: 0 12px 12px 0;
    border-left: 3px solid #ff9966;
}

/* Video: Tron */
[data-theme="tron"] .video-tile {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.1);
}
[data-theme="tron"] .video-tile:hover {
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}
[data-theme="tron"] .video-channel { color: #00e5ff; }

/* ── News Cards ─────────────────────────────────────────────── */

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.news-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    text-decoration: none;
    color: inherit;
}

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--bg-sidebar);
    position: relative;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Gradient overlay at bottom of image for readability */
.news-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    pointer-events: none;
}

.news-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.news-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-source-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
}

.news-source-goonhammer {
    background: #c0392b;
}

.news-source-warhammer-community {
    background: #1a4a7a;
}

.news-source-frontline-gaming {
    background: #2d7d3a;
}

.news-category-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: var(--text-muted);
}

.news-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: auto;
}

/* No-image fallback: tinted background with source icon */
.news-card-no-image {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    opacity: 0.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.news-card-no-image.goonhammer { background: linear-gradient(135deg, #2c1010, #1a0808); color: #c0392b; }
.news-card-no-image.warhammer-community { background: linear-gradient(135deg, #0a1929, #061220); color: #3a7abd; }
.news-card-no-image.frontline-gaming { background: linear-gradient(135deg, #0a2910, #061a08); color: #2d7d3a; }

/* News: LCARS theme */
[data-theme="lcars"] .news-card {
    border-radius: 0 16px 16px 0;
    border-left: 4px solid #cc99cc;
}
[data-theme="lcars"] .news-card-image { border-radius: 0 16px 0 0; }
[data-theme="lcars"] .news-source-badge { border-radius: 12px; }
[data-theme="lcars"] .news-category-badge { border-radius: 12px; }
[data-theme="lcars"] .news-source-goonhammer { background: #ff9966; color: #000; }
[data-theme="lcars"] .news-source-warhammer-community { background: #cc99cc; color: #000; }

/* News: Tron theme */
[data-theme="tron"] .news-card {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

[data-theme="tron"] .news-card:hover {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .news-card-image::after {
    background: linear-gradient(transparent, rgba(0, 20, 30, 0.7));
}

[data-theme="tron"] .news-source-goonhammer { background: #ff4444; }
[data-theme="tron"] .news-source-warhammer-community { background: #00e5ff; color: #000; }

/* ── Painting Tab ───────────────────────────────────────────── */

.painting-tab {
    padding: 0;
}

.painting-channel-filters {
    display: flex;
    gap: 6px;
    padding: 8px 0 12px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

.painting-filter-chip {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.painting-filter-chip:hover {
    border-color: var(--accent);
    color: var(--text);
}

.painting-filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.painting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.painting-tile {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.painting-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    text-decoration: none;
    color: inherit;
}

.painting-tile:hover .painting-thumb img {
    transform: scale(1.05);
}

.painting-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.painting-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.painting-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--text-muted);
}

.painting-source-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.painting-source-youtube {
    background: #cc0000;
    color: #fff;
}

.painting-source-goonhammer {
    background: #444;
    color: #fff;
}

.painting-source-taleofpainters {
    background: #5a7a3a;
    color: #fff;
}

.painting-source-thearmypainter {
    background: #c07828;
    color: #fff;
}

.painting-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.painting-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.painting-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.painting-channel {
    color: var(--accent);
    font-weight: 600;
}

/* Painting: LCARS */
[data-theme="lcars"] .painting-tile {
    border-radius: 0 12px 12px 0;
    border-left: 3px solid #ff9966;
}

[data-theme="lcars"] .painting-filter-chip.active {
    background: #ff9966;
    border-color: #ff9966;
    color: #000;
}

/* Painting: Tron */
[data-theme="tron"] .painting-tile {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.1);
}

[data-theme="tron"] .painting-tile:hover {
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .painting-channel { color: #00e5ff; }

[data-theme="tron"] .painting-filter-chip.active {
    background: #00e5ff;
    border-color: #00e5ff;
    color: #000;
}

/* Headlines + News: mobile responsive */
@media (max-width: 900px) {
    .headlines-featured-grid {
        grid-template-columns: 1fr;
    }
    .headlines-grid {
        grid-template-columns: 1fr;
    }
    .news-grid {
        grid-template-columns: 1fr;
    }
    .video-grid {
        grid-template-columns: 1fr 1fr;
    }
    .painting-grid {
        grid-template-columns: 1fr 1fr;
    }
    .painting-title {
        font-size: 12px;
    }
    .painting-meta {
        font-size: 10px;
    }
    .painting-filter-chip {
        font-size: 11px;
        padding: 3px 10px;
    }
    .headlines-summary {
        gap: 10px;
    }
    .section-panel {
        flex-direction: column;
        gap: 8px;
    }
    .fw-chart-compact {
        max-width: 100%;
    }
    .fw-label {
        width: 100px;
        min-width: 100px;
    }
}

/* ── Mathhammer ───────────────────────────────────────────────── */

.mh-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-top: 8px;
}
.mh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.mh-card-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.mh-stat-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.mh-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-family: monospace;
}
.mh-pill-special { background: rgba(201, 168, 76, 0.15); border-color: var(--gold); color: var(--gold); }
.mh-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
}
.mh-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; font-style: italic; }
.mh-section { margin-bottom: 12px; }
.mh-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold); margin-bottom: 6px; }

/* Weapon rows */
.mh-weapon-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.mh-weapon-row:hover { border-color: var(--gold); }
.mh-weapon-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.mh-weapon-name { font-weight: 600; font-size: 13px; }
.mh-weapon-stats { font-size: 11px; font-family: monospace; color: var(--text-muted); }
.mh-weapon-abilities { font-size: 10px; color: var(--gold); font-style: italic; }
.mh-weapon-summary { font-size: 12px; margin-top: 4px; color: var(--text-muted); }

/* Expanded weapon detail */
.mh-weapon-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.mh-detail-title { font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.mh-target-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.mh-target-label { min-width: 120px; flex-shrink: 0; }
.mh-target-label strong { font-size: 12px; display: block; }
.mh-target-desc { font-size: 10px; color: var(--text-muted); }
.mh-target-bar-wrap { flex: 1; position: relative; height: 22px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.mh-target-bar { height: 100%; border-radius: 4px; min-width: 2px; transition: width 0.3s; }
.mh-target-bar.mh-hot { background: rgba(231, 76, 60, 0.6); }
.mh-target-bar.mh-warm { background: rgba(230, 126, 34, 0.5); }
.mh-target-bar.mh-mild { background: rgba(201, 168, 76, 0.4); }
.mh-target-bar.mh-cold { background: rgba(128, 128, 128, 0.3); }
.mh-target-val { position: absolute; right: 6px; top: 3px; font-size: 11px; font-weight: 600; }

/* Weapon stat line */
.mh-weapon-statline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mh-stat-tag {
    font-size: 11px; font-family: monospace; font-weight: 600;
    padding: 1px 6px; border-radius: 3px;
    background: var(--bg); border: 1px solid var(--border);
}

/* Working chain */
.mh-target-block { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mh-target-block:last-child { border-bottom: none; }
.mh-target-header-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.mh-target-kills-badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--bg); margin-left: auto; }
.mh-working { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.mh-step { white-space: nowrap; }
.mh-step small { opacity: 0.7; }
.mh-step strong { color: var(--text); }
.mh-arrow { color: var(--gold); font-size: 10px; margin: 0 2px; }
.mh-mortal { color: #e74c3c; font-weight: 600; }

.mh-hot { color: #e74c3c; font-weight: 700; }
.mh-warm { color: #e67e22; font-weight: 600; }
.mh-mild { color: var(--text); }
.mh-cold { color: var(--text-muted); }

/* Faction & unit index */
.mh-page-header h2 { font-size: 18px; margin-bottom: 4px; }
.mh-page-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.mh-global-search { margin-bottom: 12px; }

.mh-faction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.mh-faction-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.mh-faction-tile:hover { border-color: var(--gold); transform: translateY(-1px); }
.mh-faction-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.mh-faction-count { font-size: 11px; color: var(--text-muted); }

.mh-faction-title { font-size: 18px; margin: 8px 0 12px; }
.mh-role-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold); margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }

.mh-unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.mh-unit-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.mh-unit-tile:hover { border-color: var(--gold); }
.mh-tile-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.mh-tile-faction { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.mh-tile-stats { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.mh-tile-role { font-size: 10px; color: var(--text-muted); }

/* Tile damage bars */
.mh-tile-damage { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.mh-tile-damage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.mh-tile-damage-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.mh-scenario-toggle {
    font-size: 9px; font-weight: 600;
    padding: 1px 8px; border-radius: 8px;
    background: rgba(201, 168, 76, 0.15); border: 1px solid var(--gold); color: var(--gold);
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px;
}
.mh-scenario-toggle:hover { background: rgba(201, 168, 76, 0.3); }
.mh-tile-dmg-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.mh-tile-dmg-icon { font-size: 11px; width: 16px; text-align: center; }
.mh-tile-bar-wrap { flex: 1; height: 10px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.mh-tile-bar { height: 100%; border-radius: 3px; min-width: 2px; transition: width 0.3s; }
.mh-tile-bar.mh-hot { background: rgba(231, 76, 60, 0.7); }
.mh-tile-bar.mh-warm { background: rgba(230, 126, 34, 0.6); }
.mh-tile-bar.mh-mild { background: rgba(201, 168, 76, 0.5); }
.mh-tile-bar.mh-cold { background: rgba(128, 128, 128, 0.3); }
.mh-tile-dmg-val { font-size: 11px; font-weight: 700; min-width: 24px; text-align: right; }

.mh-unit-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--gold);
    cursor: pointer;
    font-size: 14px;
    padding: 1px 6px;
    margin-left: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.mh-unit-btn:hover { opacity: 1; }

/* Mathhammer page */
.mh-page { padding: 0; }
.mh-page-header h2 { font-size: 18px; margin-bottom: 12px; }
.mh-picker-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.mh-picker { flex: 1; position: relative; }
.mh-picker-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 4px; }
.mh-dropdown {
    position: absolute;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.mh-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.mh-dropdown-item:hover { background: var(--bg-hover); }
.mh-dd-name { font-weight: 500; }
.mh-dd-stats { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.mh-selected { font-size: 13px; margin-top: 6px; color: var(--text-muted); }
.mh-swap-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--gold);
    font-size: 18px;
    cursor: pointer;
    padding: 8px 12px;
    margin-top: 20px;
}
.mh-swap-btn:hover { background: var(--bg-hover); }

.mh-mods-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.mh-mod-label { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.mh-mod-input { width: 48px; padding: 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 12px; text-align: center; }
.mh-mod-toggle {
    font-size: 11px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
    transition: all 0.15s;
}
.mh-mod-toggle.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }
.mh-mod-select { font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
/* Loadout summary */
.mh-loadout-summary {
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.mh-loadout-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.mh-loadout-row { display: flex; gap: 16px; flex-wrap: wrap; }
.mh-loadout-stat { font-size: 13px; display: flex; align-items: center; gap: 4px; }

/* Filtered badge */
.mh-filtered-badge {
    font-size: 10px; color: var(--gold); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600;
}

/* Survivability */
.mh-survivability {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.mh-surv-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.mh-surv-grid { display: flex; flex-direction: column; gap: 5px; }
.mh-surv-row { display: flex; align-items: center; gap: 8px; }
.mh-surv-label { min-width: 100px; flex-shrink: 0; }
.mh-surv-label strong { font-size: 12px; display: block; }
.mh-surv-desc { font-size: 10px; color: var(--text-muted); }
.mh-surv-bar-wrap {
    flex: 1; height: 20px; background: var(--bg-card); border-radius: 4px;
    overflow: hidden; position: relative;
}
.mh-surv-bar { height: 100%; background: rgba(74, 154, 110, 0.5); border-radius: 4px; min-width: 2px; }
.mh-surv-val { position: absolute; right: 6px; top: 2px; font-size: 11px; font-weight: 600; }
.mh-surv-wipe { font-size: 10px; color: var(--text-muted); min-width: 70px; text-align: right; }

.mh-card-mods { margin-bottom: 8px; padding: 8px; }

.mh-results { margin-top: 12px; }
.mh-results-header { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.mh-def-inline { font-weight: 400; font-size: 12px; color: var(--text-muted); font-family: monospace; }
.mh-results-table td { padding: 6px 8px; }
.mh-placeholder { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

@media (max-width: 768px) {
    .mh-picker-row { flex-direction: column; }
    .mh-swap-btn { margin-top: 0; align-self: center; }
    .mh-mods-row { flex-direction: column; align-items: flex-start; }
}