/* ============================================
   EVE Online Sov Upgrade Mapper - Stylesheet
   WinterCo Alliance
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Color Palette - Dark EVE Theme */
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1a2234;
    --bg-card: #151c2c;
    --bg-hover: #1e2a3f;

    /* Accent Colors */
    --accent-primary: #00d4ff;
    --accent-secondary: #7c3aed;
    --accent-glow: rgba(0, 212, 255, 0.3);

    /* Theme tokens (themes redefine these; see "THEMES" at the end of this file) */
    --accent-rgb: 0, 212, 255;
    --accent-sky: #38bdf8;
    --accent-sky-rgb: 56, 189, 248;
    --accent-text: #e0f7ff;
    --on-accent: #000000; /* text on accent backgrounds (primary buttons); some themes switch it to white */
    --surface-rgb: 17, 24, 39;
    --surface-2-rgb: 12, 17, 27;
    --chrome-rgb: 5, 8, 13;
    --input-bg: #0b111b;
    --page-grad-1: #0d1628;
    --page-grad-2: #05080d;

    /* Status colours: good/bad (the colourblind theme swaps these for blue/orange) */
    --good: #34d399;
    --good-rgb: 52, 211, 153;
    --good-strong: #22c55e;
    --good-strong-rgb: 34, 197, 94;
    --bad: #f87171;
    --bad-rgb: 248, 113, 113;
    --bad-strong: #ef4444;
    --bad-strong-rgb: 239, 68, 68;

    /* Category Colors */
    --color-ratting: #f59e0b;
    --color-ratting-glow: rgba(245, 158, 11, 0.3);
    --color-mining: #10b981;
    --color-mining-glow: rgba(16, 185, 129, 0.3);
    --color-exploration: #8b5cf6;
    --color-exploration-glow: rgba(139, 92, 246, 0.3);
    --color-cyno: #ec4899;
    --color-cyno-glow: rgba(236, 72, 153, 0.3);

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(0, 212, 255, 0.2);

    /* Gradients */
    --gradient-header: linear-gradient(135deg, #0a0e17 0%, #1a2234 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --gradient-accent: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Typography */
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

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

html {
    font-size: 16px;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

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

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ============================================
   HEADER STYLES
   ============================================ */
.main-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px;
    background: var(--gradient-header);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    flex-shrink: 0;
}

.header-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-accent);
    opacity: 0.5;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.logo-icon {
    width: 36px;
    height: 36px;
    color: var(--accent-primary);
    filter: drop-shadow(0 0 10px var(--accent-glow));
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px var(--accent-glow));
    }

    50% {
        filter: drop-shadow(0 0 20px var(--accent-primary));
    }
}

.logo-svg {
    width: 100%;
    height: 100%;
}

.logo-text h1 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.alliance-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.btn-primary {
    background: var(--gradient-accent);
    border-color: var(--accent-primary);
    color: var(--on-accent);
}

.btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 25px var(--accent-glow);
}

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

.btn-full {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-md);
}

.btn-icon-only {
    padding: var(--spacing-sm);
    min-width: 36px;
    justify-content: center;
}

.btn-export {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    width: 100%;
    text-align: left;
}

.btn-export .btn-icon {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.btn-export .btn-title {
    font-weight: 600;
    font-size: 0.75rem;
    display: block;
    white-space: nowrap;
}

.btn-export .btn-desc {
    display: none;
}

/* ============================================
   MAIN CONTENT LAYOUT
   ============================================ */
.main-content {
    flex: 1 1 0;
    min-height: 0;
    height: calc(100vh - 82px);
    max-height: calc(100vh - 82px);
    display: grid;
    grid-template-columns: 380px 1fr 295px;
    grid-template-rows: 100%;
    gap: 10px;
    padding: 6px 12px;
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;
}

.main-content.viewer-layout {
    grid-template-columns: 1fr !important;
}

.main-content.viewer-layout #systemEditorPanel,
.main-content.viewer-layout #exportPanel {
    display: none !important;
}

.main-content.viewer-layout .map-hint {
    display: none;
}

/* ============================================
   PANEL STYLES
   ============================================ */
.panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

.system-editor .panel-content {
    flex: 1 1 0;
    min-height: 0;
    padding: 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.panel-controls {
    display: flex;
    gap: var(--spacing-xs);
}

/* ============================================
   FORM STYLES
   ============================================ */
.form-group {
    margin-bottom: 8px;
}

.form-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.form-select,
.form-textarea {
    min-height: 44px;
    resize: vertical;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.title-icon {
    font-size: 1rem;
}

.subsection-title {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-md);
}

/* ============================================
   INDEX SLIDERS
   ============================================ */
.index-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.index-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.index-item {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: var(--spacing-md);
}

.index-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.index-icon {
    font-size: 1rem;
}

.index-icon.ratting {
    color: var(--color-ratting);
}

.index-icon.mining {
    color: var(--color-mining);
}

.index-icon.strategic {
    color: var(--accent-secondary);
}

.index-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    cursor: pointer;
}

.index-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: all var(--transition-fast);
}

.index-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--accent-primary);
}

.index-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-align: center;
}

/* ============================================
   UPGRADE CATEGORIES
   ============================================ */
.upgrades-section {
    margin-bottom: var(--spacing-xl);
}

.upgrade-category {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: 0.85rem;
}

.category-header.ratting {
    background: var(--color-ratting-glow);
    border-bottom: 1px solid var(--color-ratting);
    color: var(--color-ratting);
}

.category-header.military {
    background: var(--color-ratting-glow);
    border-bottom: 1px solid var(--color-ratting);
    color: var(--color-ratting);
}

.category-header.mining {
    background: var(--color-mining-glow);
    border-bottom: 1px solid var(--color-mining);
    color: var(--color-mining);
}

.category-header.exploration {
    background: var(--color-exploration-glow);
    border-bottom: 1px solid var(--color-exploration);
    color: var(--color-exploration);
}

.category-header.cyno {
    background: var(--color-cyno-glow);
    border-bottom: 1px solid var(--color-cyno);
    color: var(--color-cyno);
}

.category-header.strategic {
    background: rgba(59, 130, 246, 0.2);
    border-bottom: 1px solid #3b82f6;
    color: #3b82f6;
}

.category-header.effects {
    background: rgba(168, 85, 247, 0.2);
    border-bottom: 1px solid #a855f7;
    color: #a855f7;
}

.category-header.conversion {
    background: rgba(var(--good-strong-rgb), 0.2);
    border-bottom: 1px solid var(--good-strong);
    color: var(--good-strong);
}

.category-icon {
    font-size: 1rem;
}

.upgrade-checkboxes {
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ============================================
   CUSTOM CHECKBOXES
   ============================================ */
.upgrade-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.upgrade-checkbox:hover {
    background: var(--bg-hover);
}

.upgrade-checkbox input {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.upgrade-checkbox input:checked+.checkbox-custom {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.upgrade-checkbox input:checked+.checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--bg-primary);
    font-weight: bold;
}

.upgrade-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.upgrade-checkbox input:checked~.upgrade-name {
    color: var(--text-primary);
}

/* Mining Grid Layout */
.upgrade-checkboxes.mining-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

.mineral-group {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mineral-header {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-mining);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xs);
}

.upgrade-checkbox.compact {
    padding: 2px var(--spacing-xs);
    gap: var(--spacing-xs);
}

.upgrade-checkbox.compact .checkbox-custom {
    width: 14px;
    height: 14px;
}

.upgrade-checkbox.compact .upgrade-name {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Upgrade Subcategories */
.upgrade-subcategory {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-xs) 0;
    margin-top: var(--spacing-xs);
    border-bottom: 1px dashed var(--border-color);
}

.upgrade-subcategory:first-child {
    margin-top: 0;
}

/* ============================================
   VIEW TOGGLE
   ============================================ */
.view-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.btn-toggle {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1rem;
}

.btn-toggle:hover {
    background: var(--bg-tertiary);
}

.btn-toggle.active {
    background: var(--accent-primary);
    color: var(--on-accent);
}

/* ============================================
   WELCOME CARD & GUIDED TOUR
   ============================================ */
.welcome-card {
    max-width: 460px;
    width: 100%;
}

.welcome-body {
    padding: 28px 26px 22px;
    text-align: center;
}

/* Language and theme, asked before the tour starts */
.welcome-pickers {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.welcome-language-note {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: -10px 0 20px;
}

.welcome-portrait {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
    margin-bottom: 14px;
}

.welcome-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.welcome-alliance {
    font-size: 0.78rem;
    color: var(--accent-sky);
    letter-spacing: 0.4px;
    margin-bottom: 14px;
}

.welcome-text {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 22px;
}

.welcome-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* The overlay swallows clicks so the tour can't be steered off course mid-step */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.tour-overlay[hidden] {
    display: none;
}

.tour-spotlight {
    position: fixed;
    border-radius: var(--radius-md);
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 0 9999px rgba(2, 6, 12, 0.74);
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
    pointer-events: none;
}

.tour-card {
    position: fixed;
    width: min(340px, calc(100vw - 28px));
    padding: 14px 16px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    transition: top 0.18s ease, left 0.18s ease;
}

.tour-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.tour-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.86rem;
    color: var(--accent-primary);
    margin: 0;
}

.tour-step-count {
    flex-shrink: 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.tour-card-body {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.tour-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-card-spacer {
    flex: 1;
}

.tour-card-actions .btn {
    padding: 5px 12px;
    font-size: 0.76rem;
}

.tour-card-actions .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   SPACE ACCESS NOTICE
   ============================================ */
/* The access reminder, as a modal in the middle of the screen. It is the one
   rule a pilot has to have read before they fly somewhere they should not, so it
   is not a strip in a toolbar that the eye learns to skip: it stands in front of
   the map until the button is pressed, once a session. */
.access-modal-backdrop {
    z-index: 10000;   /* above every other modal: it is answered first */
}

.access-modal {
    max-width: 520px;
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 158, 11, 0.18);
    text-align: center;
}

.access-modal-body {
    padding: var(--spacing-xl, 28px) var(--spacing-lg, 22px);
}

.access-modal-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.55));
}

.access-modal h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fbbf24;
    text-transform: uppercase;
}

.access-modal p {
    margin: 0 auto 22px;
    max-width: 420px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.access-modal-ack {
    width: 100%;
    max-width: 380px;
    padding: 12px 22px;
    font-size: 0.95rem;
    font-weight: 700;
}



/* ============================================
   DOTLAN MAP CONTAINER & CONTROLS
   ============================================ */
.map-container {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #080c11;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.toolbar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-theme {
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-theme:hover {
    color: var(--text-primary);
}

.btn-theme.active {
    background: var(--accent-primary);
    color: #000000;
    box-shadow: 0 0 8px var(--accent-glow);
}

.btn-map-reset {
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-map-reset:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-map-reset:disabled {
    color: var(--text-muted);
    cursor: default;
    opacity: 0.6;
}

.map-select {
    padding: 3px 8px;
    font-size: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.map-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.map-hint {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-family: var(--font-mono);
}

.map-wrapper {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    background: #080c11;
}

.dotlan-map {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
    transition: background 0.3s ease;
}

.dotlan-map.theme-light {
    background: #ffffff !important;
    border: 1px solid #cbd5e1;
}

.dotlan-node {
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.dotlan-node:hover .dotlan-pill {
    stroke-width: 2.2 !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.9));
}

.dotlan-node.configured .dotlan-pill {
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.4));
}

.dotlan-node.active .dotlan-pill {
    stroke: #ffffff !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 1));
}

.dotlan-ext-node {
    cursor: pointer;
}

.dotlan-ext-node:hover rect {
    stroke: var(--accent-primary) !important;
    stroke-width: 1.5 !important;
}

.area-assigned-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.area-assigned-chip .chip-remove-btn {
    background: none;
    border: none;
    color: var(--bad-strong);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 2px;
    line-height: 1;
}

.area-assigned-chip .chip-remove-btn:hover {
    color: var(--bad);
}

/* ============================================
   DOTLAN HOVER TOOLTIP
   ============================================ */
/* Two boxes side by side: the system's recorded info, and live ESI activity
   attached to it. The outer element carries no styling of its own so the
   placement code can measure the pair together. */
.dotlan-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-sans);
    animation: fadeIn 0.15s ease;
}

.tooltip-main {
    flex-shrink: 0;
    width: 280px;
    background: rgba(13, 17, 23, 0.96);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 15px rgba(var(--accent-rgb), 0.2);
    backdrop-filter: blur(8px);
}

.tooltip-live {
    flex-shrink: 0;
    width: 232px;
    background: rgba(13, 17, 23, 0.96);
    border: 1px solid rgba(var(--accent-sky-rgb), 0.5);
    border-radius: var(--radius-md);
    padding: 14px 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.live-head {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--accent-sky);
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(var(--accent-sky-rgb), 0.3);
}

/* A Jove Observatory in this system. Violet rather than the ice badge's cyan: it is
   a different kind of fact — a way into the system, not something to mine. */
.tooltip-badge.jove {
    background: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.45);
}

/* An A0 star: blue-white, so the badge is too, and distinct from the ice cyan
   and the observatory violet beside it. */
/* An emoji star is yellow whatever you ask of it, and ⭐ is already the ANOMALY
   dropdown's apex marker. A plain text star takes a colour, so A0 gets the blue
   it actually is. */
.badge-star {
    color: #60a5fa;
    text-shadow: 0 0 6px rgba(96, 165, 250, 0.9);
}

.tooltip-badge.star-a0 {
    background: rgba(147, 197, 253, 0.18);
    color: #bfdbfe;
    border-color: rgba(147, 197, 253, 0.5);
}

/* Faction space, in the faction's own colour — set inline, since every faction
   has a different one */
.tooltip-badge.faction {
    background: rgba(255, 255, 255, 0.06);
}

/* An NPC station: gold, the colour of the station bracket in the client */
.tooltip-badge.npc-station {
    background: rgba(250, 204, 21, 0.16);
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.45);
}

/* A gate camp in this system, and whose it is */
.live-camp {
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    margin-bottom: 10px;
    border-left: 3px solid;
}

.live-camp.is-hostile {
    background: rgba(var(--bad-strong-rgb), 0.14);
    border-left-color: var(--bad-strong);
}

.live-camp.is-friendly {
    background: rgba(74, 222, 128, 0.1);
    border-left-color: #4ade80;
}

.live-camp-head {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.live-camp.is-hostile .live-camp-head { color: #fca5a5; }
.live-camp.is-friendly .live-camp-head { color: #86efac; }

.live-camp-detail {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* This is an aggregate from killmails and always trails the people watching */
.live-intel-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--accent-sky-rgb), 0.18);
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--text-muted);
    font-style: italic;
}

/* Camped systems on the map. This is the one warning a pilot needs to catch out of
   the corner of an eye while reading something else, so it is deliberately the
   loudest thing on the map: a pulsing glow on the pill, and a ring beating out from
   behind it. Hostile beats faster than friendly, so the two read apart at a glance
   even where the colours are hard to tell. */
/* The alert layer, painted over every node so nothing can bury it. What the eye
   catches at the edge of vision is movement and brightness, not colour or detail,
   so the warning is built out of both: rings pinging outwards on a stagger, and a
   flag that strobes above the pill. */
.dotlan-camp-alert {
    pointer-events: none;
}

@keyframes campPing {
    0%   { transform: scale(1);    stroke-opacity: 0.95; stroke-width: 3px; }
    70%  { transform: scale(1.75); stroke-opacity: 0;    stroke-width: 1px; }
    100% { transform: scale(1.75); stroke-opacity: 0;    stroke-width: 1px; }
}

.camp-ping {
    fill: none;
    stroke-width: 3px;
    transform-box: fill-box;
    transform-origin: center;
}

/* Two rings, the second half a beat behind: one ring reads as decoration, two read
   as something repeating on purpose */
.dotlan-camp-alert.is-hostile .camp-ping {
    stroke: #ff2d2d;
    animation: campPing 1.5s ease-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 45, 45, 0.9));
}

.dotlan-camp-alert.is-hostile .camp-ping.is-second {
    animation-delay: 0.6s;
}

/* Ours is worth marking, not worth alarming about: slower, dimmer, and no flag */
.dotlan-camp-alert.is-friendly .camp-ping {
    stroke: #4ade80;
    animation: campPing 3s ease-out infinite;
    opacity: 0.75;
}

.dotlan-camp-alert.is-friendly .camp-ping.is-second {
    animation-delay: 1.3s;
}

/* Every other thing on this map is a rounded pill, so a triangle is the fastest
   thing on it to find */
@keyframes campFlag {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(255, 45, 45, 0.9)) drop-shadow(0 0 10px rgba(255, 45, 45, 0.5));
    }
    50% {
        opacity: 0.45;
        filter: drop-shadow(0 0 10px rgba(255, 45, 45, 1)) drop-shadow(0 0 22px rgba(255, 45, 45, 0.85));
    }
}

.camp-flag {
    animation: campFlag 0.8s ease-in-out infinite;
}

.camp-flag path {
    fill: #ff2d2d;
    stroke: #ffffff;
    stroke-width: 1.2px;
    stroke-linejoin: round;
}

.camp-flag text {
    fill: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
}

/* Both keyframes carry the same number of shadows, or the filter steps between
   them instead of fading */
@keyframes campGlowHostile {
    0%, 100% {
        stroke: #ff2d2d;
        stroke-width: 2.8px;
        filter: drop-shadow(0 0 5px rgba(255, 45, 45, 0.9)) drop-shadow(0 0 11px rgba(255, 45, 45, 0.4));
    }
    50% {
        /* Toward white rather than a deeper red: it is the jump in brightness the
           corner of an eye reacts to, not the hue */
        stroke: #ffd9d9;
        stroke-width: 5px;
        filter: drop-shadow(0 0 16px rgba(255, 45, 45, 1)) drop-shadow(0 0 32px rgba(255, 45, 45, 0.85));
    }
}

@keyframes campGlowFriendly {
    0%, 100% {
        stroke-width: 2.2px;
        filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.8)) drop-shadow(0 0 9px rgba(74, 222, 128, 0.3));
    }
    50% {
        stroke-width: 3.4px;
        filter: drop-shadow(0 0 11px rgba(74, 222, 128, 0.95)) drop-shadow(0 0 20px rgba(74, 222, 128, 0.6));
    }
}

.dotlan-node.camp-hostile .dotlan-pill {
    stroke: #ff2d2d !important;
    animation: campGlowHostile 1.5s ease-in-out infinite;
}

.dotlan-node.camp-friendly .dotlan-pill {
    stroke: #4ade80 !important;
    animation: campGlowFriendly 2.6s ease-in-out infinite;
}

/* A hovered or selected system still has to look hovered or selected */
.dotlan-node.camp-hostile:hover .dotlan-pill,
.dotlan-node.camp-friendly:hover .dotlan-pill,
.dotlan-node.camp-hostile.active .dotlan-pill,
.dotlan-node.camp-friendly.active .dotlan-pill {
    animation: none;
}

/* Someone who has asked for less movement still gets the warning, just still */
@media (prefers-reduced-motion: reduce) {
    .dotlan-node.camp-hostile .dotlan-pill,
    .dotlan-node.camp-friendly .dotlan-pill {
        animation: none;
    }
    .dotlan-node.camp-hostile .dotlan-pill {
        stroke-width: 3.4px !important;
        filter: drop-shadow(0 0 10px rgba(255, 45, 45, 1)) drop-shadow(0 0 22px rgba(255, 45, 45, 0.7));
    }
    .dotlan-node.camp-friendly .dotlan-pill {
        stroke-width: 2.8px !important;
        filter: drop-shadow(0 0 9px rgba(74, 222, 128, 0.9)) drop-shadow(0 0 18px rgba(74, 222, 128, 0.5));
    }
    .camp-ping {
        animation: none;
        stroke-opacity: 0.6;
    }
    .camp-ping.is-second {
        display: none;
    }
    .camp-flag {
        animation: none;
        filter: drop-shadow(0 0 8px rgba(255, 45, 45, 1));
    }
}

/* Sovereignty defence: the hub's ADM and the window it can be attacked in */
.live-defence-block {
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(var(--accent-sky-rgb), 0.18);
}

.live-defence {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.live-adm-label {
    font-size: 0.78rem;
    color: #cbd5e1;
}

.live-adm {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.live-adm.is-weak {
    color: var(--bad);
}

.live-adm.is-fair {
    color: #fbbf24;
}

.live-adm.is-strong {
    color: #4ade80;
}

/* Below the healthy mark the multiplier is a to-do, not just a number */
.live-adm-action {
    font-size: 0.7rem;
    line-height: 1.4;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 5px 7px;
}

.live-adm-action.is-urgent {
    color: #fca5a5;
    background: rgba(var(--bad-strong-rgb), 0.12);
    border-left-color: var(--bad-strong);
}

.live-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 7px 10px;
    align-items: baseline;
}

.live-col {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
    min-width: 40px;
}

.live-label {
    font-size: 0.78rem;
    color: #cbd5e1;
    white-space: nowrap;
}

.live-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0;
    text-align: right;
    min-width: 40px;
    white-space: nowrap;
}

.live-value.is-quiet {
    color: var(--text-muted);
    opacity: 0.55;
    font-weight: 400;
}

/* This hour against the average hour of the day behind it */
.live-trend {
    font-size: 0.72rem;
    margin-left: 3px;
}

.live-trend.is-up {
    color: var(--bad);
}

.live-trend.is-down {
    color: #4ade80;
}

.live-partial,
.live-foot {
    margin-top: 10px;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.live-partial {
    color: #fbbf24;
}

.live-empty {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Two boxes need the room; on a narrow window keep the info panel alone */
@media (max-width: 900px) {
    .tooltip-live {
        display: none;
    }
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.tooltip-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}

.tooltip-const {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-weight: 600;
}

/* The badge row. Every badge is the same height and none of them shrink, so the
   row keeps its shape whichever facts a system happens to have — the previous
   version let flex squeeze them, which wrapped the text inside a badge and made
   it grow a line while its neighbours stayed put. */
.tooltip-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.tooltip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;              /* never shrink: shrinking is what wraps the label */
    box-sizing: border-box;
    min-height: 19px;
    padding: 2px 6px;
    /* Reserved by every badge, coloured only by the ones that want it, so a
       bordered badge is not a taller badge */
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Variants set colour and nothing else */
.tooltip-badge.sec {
    background: rgba(var(--bad-strong-rgb), 0.2);
    color: var(--bad-strong);
    border-color: rgba(var(--bad-strong-rgb), 0.4);
}

.tooltip-badge.ice {
    background: rgba(var(--accent-rgb), 0.2);
    color: #00c8ff;
    border-color: rgba(var(--accent-rgb), 0.4);
}

.tooltip-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.tooltip-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

/* Upgrades withheld by the system's Area of Play (stripped server-side) */
.tooltip-restricted {
    font-size: 0.72rem;
    line-height: 1.45;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-bottom: var(--spacing-xs);
}

.tooltip-upgrade-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 2px 0;
    color: var(--text-primary);
}

.tooltip-upgr-icon {
    font-size: 0.85rem;
}

.tooltip-upgr-name {
    font-weight: 500;
}

.tooltip-upgrade-item.cat-military { color: var(--bad); }
.tooltip-upgrade-item.cat-mining { color: #fbbf24; }
.tooltip-upgrade-item.cat-strategic { color: #60a5fa; }
.tooltip-upgrade-item.cat-exploration { color: #c084fc; }
.tooltip-upgrade-item.cat-effects { color: #e879f9; }
.tooltip-upgrade-item.cat-conversion { color: #4ade80; }

.tooltip-notes {
    margin-top: var(--spacing-xs);
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-style: italic;
}

.tooltip-footer {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    border-top: 1px dashed var(--border-color);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
}

/* ============================================
   CONSTELLATION FILTER
   ============================================ */
.constellation-filter {
    margin-bottom: 6px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.filter-title {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    white-space: nowrap;
}

.constellation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.constellation-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.constellation-chip:hover {
    border-color: var(--accent-primary);
}

.constellation-chip.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

.constellation-chip .chip-count {
    background: var(--bg-primary);
    padding: 0 var(--spacing-xs);
    border-radius: 10px;
    font-size: 0.7rem;
    min-width: 20px;
    text-align: center;
}

.constellation-chip.active .chip-count {
    background: rgba(0, 0, 0, 0.3);
    color: white;
}

/* ============================================
   REPORT CONTAINER
   ============================================ */
.report-container {
    flex: 1;
    overflow: auto;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.report-wrapper {
    min-height: 100%;
    padding: var(--spacing-xl);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    font-size: 0.9rem;
}

/* ============================================
   REPORT STYLES
   ============================================ */
.report {
    font-family: var(--font-body);
}

.report-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--accent-primary);
}

.report-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-xs);
}

.report-subtitle {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.report-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

/* Constellation Section */
.constellation-section {
    margin-bottom: var(--spacing-2xl);
}

.constellation-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 100%);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.constellation-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.constellation-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

/* System Cards Grid */
.systems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/* System Card */
.system-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.system-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.system-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--gradient-card);
    border-bottom: 1px solid var(--border-color);
}

.system-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.system-indices {
    display: flex;
    gap: var(--spacing-xs);
}

.index-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    font-family: var(--font-display);
}

.index-badge.military {
    background: var(--color-ratting-glow);
    color: var(--color-ratting);
    border: 1px solid var(--color-ratting);
}

.index-badge.mining {
    background: var(--color-mining-glow);
    color: var(--color-mining);
    border: 1px solid var(--color-mining);
}

.index-badge.strategic {
    background: var(--color-exploration-glow);
    color: var(--color-exploration);
    border: 1px solid var(--color-exploration);
}

.system-card-body {
    padding: var(--spacing-md);
}

.upgrade-list {
    list-style: none;
}

.upgrade-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.upgrade-item .upgrade-icon {
    width: 20px;
    text-align: center;
}

.upgrade-item.ratting .upgrade-icon {
    color: var(--color-ratting);
}

.upgrade-item.mining .upgrade-icon {
    color: var(--color-mining);
}

.upgrade-item.exploration .upgrade-icon {
    color: var(--color-exploration);
}

.upgrade-item.cyno .upgrade-icon {
    color: var(--color-cyno);
}

.no-upgrades {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-md);
}

.system-notes {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px dashed var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   QUICK STATS
   ============================================ */
.quick-stats {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.stat-card {
    padding: 4px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.stat-card.ratting {
    border-color: var(--color-ratting);
}

.stat-card.mining {
    border-color: var(--color-mining);
}

.stat-card.exploration {
    border-color: var(--color-exploration);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
    margin-bottom: 1px;
}

.stat-card.ratting .stat-value {
    color: var(--color-ratting);
}

.stat-card.mining .stat-value {
    color: var(--color-mining);
}

.stat-card.exploration .stat-value {
    color: var(--color-exploration);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   EXPORT OPTIONS
   ============================================ */
.export-options {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.export-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ============================================
   LEGEND
   ============================================ */
.legend-section {
    margin-bottom: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.legend-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
}

.legend-icon.ratting {
    background: var(--color-ratting-glow);
    border: 1px solid var(--color-ratting);
}

.legend-icon.mining {
    background: var(--color-mining-glow);
    border: 1px solid var(--color-mining);
}

.legend-icon.exploration {
    background: var(--color-exploration-glow);
    border: 1px solid var(--color-exploration);
}

.legend-icon.cyno {
    background: var(--color-cyno-glow);
    border: 1px solid var(--color-cyno);
}

.legend-icon.strategic {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid #3b82f6;
}

.legend-icon.effects {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
}

.legend-icon.conversion {
    background: rgba(var(--good-strong-rgb), 0.2);
    border: 1px solid var(--good-strong);
}

.legend-text {
    font-size: 0.72rem;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
    min-width: 280px;
}

.toast.success {
    border-color: var(--color-mining);
}

.toast.error {
    border-color: var(--bad-strong);
}

.toast.info {
    border-color: var(--accent-primary);
}

.toast-icon {
    font-size: 1.2rem;
}

.toast-message {
    font-size: 0.9rem;
    color: var(--text-primary);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
    height: 24px;
    padding: 2px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-text {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1400px) {
    .main-content {
        grid-template-columns: 350px 1fr 280px;
    }
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-height: none;
        overflow: auto;
    }

    .panel {
        max-height: none;
    }

    .report-container {
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
    }

    .main-content {
        padding: var(--spacing-sm);
    }

    .panel-content {
        padding: var(--spacing-md);
    }

    .systems-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRINT STYLES (for PNG export)
   ============================================ */
@media print {
    body {
        background: var(--bg-primary);
    }

    .report-container {
        border: none;
        border-radius: 0;
    }
}

/* ============================================
   EVE SSO AUTHENTICATION & ADMIN LOCK
   ============================================ */
.auth-widget {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.auth-pilot-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-full);
    padding: 3px 12px 3px 4px;
    box-shadow: 0 0 12px var(--accent-glow);
}

.auth-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-primary);
    object-fit: cover;
}

.auth-pilot-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.auth-pilot-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-display);
}

.auth-pilot-alliance {
    font-size: 0.65rem;
    color: var(--accent-primary);
    font-weight: 600;
}

.btn-auth-logout {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-auth-logout:hover {
    color: var(--bad-strong);
    border-color: var(--bad-strong);
}

.btn-header-sso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #000000;
    color: #ffffff;
    border: 1px solid #d4a340;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(212, 163, 64, 0.2);
    transition: all var(--transition-fast);
}

.btn-header-sso:hover {
    box-shadow: 0 0 15px rgba(212, 163, 64, 0.5);
    transform: translateY(-1px);
}

/* System Editor Lock Card */
.admin-auth-gate {
    padding: var(--spacing-lg) var(--spacing-xs);
    display: flex;
    justify-content: center;
}

.auth-gate-card {
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    max-width: 360px;
    width: 100%;
    box-shadow: var(--shadow-lg), inset 0 0 30px rgba(var(--accent-rgb), 0.03);
    backdrop-filter: blur(8px);
}

.gate-shield-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    animation: floatGently 3s ease-in-out infinite;
}

@keyframes floatGently {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.auth-gate-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.05em;
}

.gate-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
}

.gate-desc strong {
    color: var(--accent-primary);
}

/* Official Style CCP EVE SSO Button & Image Assets */
.gate-sso-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

.eve-sso-image-btn {
    display: inline-block;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(212, 163, 64, 0.25));
}

.eve-sso-image-btn:hover {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 6px 20px rgba(212, 163, 64, 0.5));
}

.eve-sso-image-btn:active {
    transform: translateY(0) scale(0.99);
}

.eve-sso-image-btn-header {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.eve-sso-image-btn-header:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 12px rgba(212, 163, 64, 0.4));
}

.sso-badge-img.large {
    max-width: 270px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.sso-badge-img.small {
    height: 32px;
    width: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.btn-eve-sso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #000000;
    color: #ffffff;
    border: 1.5px solid #d4a340;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 163, 64, 0.2);
}

.btn-eve-sso:hover {
    background: #111111;
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(212, 163, 64, 0.4);
    transform: translateY(-1px);
}

.eve-sso-logo {
    font-family: 'Impact', sans-serif;
    font-size: 1.1rem;
    color: #d4a340;
    letter-spacing: 2px;
}

.eve-sso-text strong {
    color: #ffffff;
}

/* Access Denied Card */
.auth-denied-box {
    margin-top: var(--spacing-md);
    background: rgba(var(--bad-strong-rgb), 0.1);
    border: 1px solid var(--bad-strong);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: left;
}

.denied-icon {
    font-size: 1.4rem;
}

.denied-content > strong,
.login-denied-title {
    color: var(--bad-strong);
    font-size: 0.95rem;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.denied-content p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Disabled Data Buttons */
.btn:disabled, .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   AREAS OF PLAY (OPERATIONAL ZONES) STYLES
   ============================================ */

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.form-label-row .form-label {
    margin-bottom: 0;
}

.btn-link-action {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-link-action:hover {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-sky);
}

/* Areas of Play Management Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 7, 12, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    animation: fadeIn 0.2s ease-out;
}

.modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(var(--accent-rgb), 0.1);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlide 0.25s ease-out;
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-icon {
    font-size: 1.3rem;
    color: var(--color-primary);
}

.modal-title h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--bad-strong);
    background: rgba(var(--bad-strong-rgb), 0.1);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.modal-subtitle {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.areas-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Areas List */
.areas-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

.area-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.area-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.area-item-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

.area-item-details {
    flex: 1;
    min-width: 0;
}

.area-item-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.area-item-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.area-item-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    word-break: break-word;
    line-height: 1.35;
    margin-top: 3px;
}

.system-area-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 5px;
    padding: 4px 8px;
    border-left: 2px solid var(--accent-primary);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 4px 4px 0;
    word-break: break-word;
    line-height: 1.35;
}

/* System editor zone picker: one toggle chip per zone, several can be on */
.area-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.area-check-list:disabled {
    opacity: 0.5;
}

/* Zones only an admin may assign */
.area-check.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.area-check {
    --area-color: var(--accent-primary);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.area-check-list:disabled .area-check {
    cursor: not-allowed;
}

.area-check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.area-check-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--area-color);
    flex-shrink: 0;
}

.area-check:has(input:checked) {
    border-color: var(--area-color);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--area-color) 14%, var(--input-bg));
}

.area-check:has(input:checked) .area-check-dot {
    background: var(--area-color);
}

.area-check:has(input:focus-visible) {
    outline: 2px solid var(--area-color);
    outline-offset: 2px;
}

.area-check-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.system-area-desc:has(.system-area-desc-line) {
    padding: 0;
    border-left: none;
    background: none;
}

.system-area-desc-line {
    padding: 4px 8px;
    border-left: 2px solid var(--accent-primary);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 4px 4px 0;
}

.system-area-desc-line + .system-area-desc-line {
    margin-top: 3px;
}

/* Links to the document pages (about.html, contact.html), in the login header
   and the application header. Quiet until hovered: they are signposts, not
   actions, and they sit beside the theme and language pickers. */
.header-doc-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.header-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(var(--accent-sky-rgb), 0.45);
    border-radius: 999px;
    background: rgba(var(--accent-sky-rgb), 0.12);
    color: var(--accent-sky);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.header-doc-link:hover {
    background: rgba(var(--accent-sky-rgb), 0.26);
    border-color: var(--accent-sky);
    transform: translateY(-1px);
}

.header-doc-icon { font-size: 0.95rem; line-height: 1; }

/* Narrow screens keep the icons and drop the words, so the header still fits */
@media (max-width: 1100px) {
    .header-doc-link { padding: 6px 10px; font-size: 0.82rem; }
}

@media (max-width: 820px) {
    .header-doc-link span:not(.header-doc-icon) { display: none; }
    .header-doc-link { padding: 6px 10px; }
    .header-doc-icon { font-size: 1.05rem; }
}

/* The same two pages on the login screen, under the feature list: this is where
   somebody meets the map for the first time, and the one screen where they
   cannot click anything else yet. */
.login-doc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.6rem;
}

.login-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(var(--accent-sky-rgb), 0.35);
    border-radius: 12px;
    background: rgba(var(--accent-sky-rgb), 0.08);
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.login-doc-link:hover {
    background: rgba(var(--accent-sky-rgb), 0.18);
    border-color: var(--accent-sky);
    transform: translateY(-1px);
}

.login-doc-icon { font-size: 1.25rem; line-height: 1; }

.login-doc-link strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-sky);
}

.login-doc-link em {
    display: block;
    font-style: normal;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.area-item-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* A zone this pilot is not admitted to: shown, not editable, and not deletable —
   removing it would publish what it withholds */
.area-item-locked {
    font-size: 0.8rem;
    opacity: 0.55;
    padding: 0 6px;
    cursor: default;
}

.btn-area-action {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-area-action:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-area-action.delete:hover {
    background: rgba(var(--bad-strong-rgb), 0.2);
    border-color: var(--bad-strong);
    color: var(--bad-strong);
}

/* Area Edit Box */
.area-edit-box {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.color-palette-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
    position: relative;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.active {
    border-color: #ffffff;
    box-shadow: 0 0 10px currentColor, inset 0 0 4px rgba(0, 0, 0, 0.5);
    transform: scale(1.18);
}

.color-swatch-custom {
    background: conic-gradient(var(--bad-strong), #eab308, #84cc16, #06b6d4, #3b82f6, #d946ef, var(--bad-strong));
    overflow: hidden;
}

.color-swatch-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.color-swatch.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 3px #000;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* List View Area Badge */
.area-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid currentColor;
    white-space: nowrap;
}

.area-pill-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* DOTLAN Map Area of Play Visuals */
.dotlan-area-hull {
    transition: opacity 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.dotlan-area-hull:hover {
    opacity: 0.95 !important;
    stroke-width: 3.5 !important;
    filter: drop-shadow(0 0 8px currentColor);
}

.dotlan-area-badge {
    cursor: pointer;
    pointer-events: auto;
}

.dotlan-area-badge rect {
    transition: stroke-width 0.2s ease, filter 0.2s ease;
}

.dotlan-area-badge:hover rect {
    stroke-width: 2.2 !important;
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85)) !important;
}

/* ============================================
   ROLE-BASED ACCESS CONTROL & GLOBAL GATE STYLES
   ============================================ */

.global-auth-gate {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 40px;
    background: radial-gradient(circle at 50% 30%, rgba(14, 23, 38, 0.96) 0%, rgba(6, 10, 16, 0.99) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    animation: fadeIn 0.3s ease;
}

.global-gate-card {
    background: var(--bg-card);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    max-width: 580px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(var(--accent-rgb), 0.15);
}

.gate-badge-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    background: rgba(var(--bad-strong-rgb), 0.15);
    border: 1px solid rgba(var(--bad-strong-rgb), 0.4);
    color: var(--bad);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 8px 0 16px 0;
}

.global-gate-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-xl);
}

.btn-eve-sso.large {
    padding: 14px 28px;
    font-size: 1.05rem;
    margin: 0 auto;
    display: inline-flex;
}





/* Control Panel Modal */
.modal-large {
    max-width: 680px !important;
}

.control-panel-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

.cp-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.cp-tab.active {
    color: var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.08);
}

.cp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    margin: var(--spacing-sm) 0;
    padding-right: 4px;
}

.cp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.cl-revert-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}

.cl-revert-actions .btn.is-armed {
    border-color: var(--bad-strong);
    color: var(--bad-strong);
}

/* Users tab: a roster row that opens its sign-in history */
.cp-user-item {
    display: block;
    padding: 0;
}

.cp-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cp-user-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.cp-user-chevron {
    flex-shrink: 0;
    width: 10px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.cp-user-affiliation {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-user-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    padding: 4px 12px 12px 32px;
    border-top: 1px solid var(--border-color);
    margin-top: 2px;
}

.cp-user-detail-label {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.cp-user-detail-value {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.cp-item-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* Areas & Visibility tab */
.area-visibility-item {
    flex-wrap: wrap;
    gap: 10px;
}

.area-visibility-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.area-visibility-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.area-visibility-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.area-visibility-controls .form-select {
    font-size: 0.78rem;
    padding: 4px 8px;
    width: auto;
    min-width: 150px;
}

.cp-item-id {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    letter-spacing: 0.3px;
}

.cp-item-id.alliance {
    background: rgba(var(--accent-sky-rgb), 0.15);
    color: var(--accent-sky);
    border-color: rgba(var(--accent-sky-rgb), 0.35);
}

.cp-item-badge {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-primary);
    margin-left: 8px;
}

/* Signed up in the last day: green, and it sits beside the role badge rather
   than replacing it — a new pilot still has a role worth reading. */
.cp-item-badge.is-new {
    background: rgba(16, 185, 129, 0.18);
    color: var(--good);
    margin-left: 6px;
}

.cp-add-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.cp-input-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.cp-input-row .form-input {
    flex: 1;
}

/* A checkbox that sits in a filter row beside the dropdowns */
.cp-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.cp-check-inline input {
    cursor: pointer;
}

.cp-key-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-lg);
}

.key-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.key-status-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.key-code {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(var(--good-strong-rgb), 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(var(--good-strong-rgb), 0.3);
}

.role-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: 6px;
}

.role-badge.editor {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.role-badge.admin {
    background: rgba(var(--good-strong-rgb), 0.2);
    color: #4ade80;
    border: 1px solid rgba(var(--good-strong-rgb), 0.4);
}

.role-badge.viewer {
    background: rgba(var(--accent-sky-rgb), 0.2);
    color: var(--accent-sky);
    border: 1px solid rgba(var(--accent-sky-rgb), 0.4);
}


/* Language Selector */
.lang-selector-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 4px;
}

.lang-select {
    background: rgba(var(--surface-rgb), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.lang-select:hover, .lang-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(var(--accent-sky-rgb), 0.25);
}

.lang-select option {
    background: #0f172a;
    color: #f8fafc;
    padding: 8px;
}

/* Global Auth Gate Passcode Box */
.gate-passcode-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 16px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.gate-passcode-divider::before,
.gate-passcode-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gate-passcode-divider span {
    padding: 0 12px;
}

.gate-passcode-box {
    margin-bottom: 8px;
}

.gate-input-row {
    display: flex;
    gap: 8px;
}

.gate-input-row .form-input {
    flex: 1;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: var(--font-body);
}

.gate-input-row .form-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
    outline: none;
}


/* ============================================
   STANDALONE FULL-PAGE LOGIN VIEW
   ============================================ */

.login-page-container {
    display: flex;
    flex-direction: column;
    /* body doesn't scroll (overflow: hidden for the app), so the login page scrolls itself */
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background:
        radial-gradient(ellipse 80% 60% at 70% 45%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 15% 80%, rgba(124, 58, 237, 0.07) 0%, transparent 60%),
        radial-gradient(circle at 50% 30%, var(--page-grad-1) 0%, var(--page-grad-2) 100%);
    position: relative;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
}

/* Faint gate map behind the page */
.login-backdrop {
    position: fixed;
    inset: -6%;
    width: 112%;
    height: 112%;
    z-index: -1;
    opacity: 0.55;
    pointer-events: none;
    animation: loginBackdropDrift 90s ease-in-out infinite alternate;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 55% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 70% at 55% 50%, #000 35%, transparent 100%);
}

.login-backdrop .bd-jump { stroke: rgba(var(--accent-sky-rgb), 0.22); stroke-width: 1; }
.login-backdrop .bd-jump.inter { stroke: rgba(var(--bad-strong-rgb), 0.22); }
.login-backdrop .bd-jump.regional { stroke: rgba(168, 85, 247, 0.28); }
.login-backdrop .bd-node { fill: rgba(var(--accent-sky-rgb), 0.55); }
.login-backdrop .bd-node.ice { fill: rgba(var(--accent-rgb), 0.9); }
.login-backdrop .bd-node.pulse {
    fill: rgba(var(--accent-rgb), 0.95);
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.9));
    animation: loginNodePulse 4s ease-in-out infinite;
}

@keyframes loginBackdropDrift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@keyframes loginNodePulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.login-backdrop-caption {
    position: fixed;
    right: 24px;
    bottom: 64px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    color: rgba(148, 163, 184, 0.35);
    text-transform: uppercase;
    pointer-events: none;
    z-index: -1;
}

.login-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(var(--chrome-rgb), 0.45);
    backdrop-filter: blur(10px);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.login-brand-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #e2e8f0;
    text-transform: uppercase;
}

.login-main-stage {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 460px);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
}

/* Left column: what the site is */
.login-hero {
    animation: loginRise 0.6s ease both;
}

.login-hero-logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 0 1px rgba(var(--accent-sky-rgb), 0.35), 0 0 40px rgba(var(--accent-rgb), 0.25);
}

.login-eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-sky);
    margin-bottom: 0.75rem;
}

.login-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: #f8fafc;
    margin: 0 0 1.1rem 0;
    text-wrap: balance;
    /* Long single words (e.g. German "Souveränitätsinformationen") must not run under the card */
    hyphens: auto;
    overflow-wrap: break-word;
}

.login-hero-desc {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #a5b4c8;
    max-width: 34rem;
    margin: 0 0 1.75rem 0;
}

.login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.login-features li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.02rem;
    color: #cbd5e1;
}

.login-feature-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.login-feature-dot.ratting { background: var(--color-ratting); box-shadow: 0 0 10px var(--color-ratting-glow); }
.login-feature-dot.mining { background: var(--color-mining); box-shadow: 0 0 10px var(--color-mining-glow); }
.login-feature-dot.exploration { background: var(--color-exploration); box-shadow: 0 0 10px var(--color-exploration-glow); }

/* Right column: sign-in card */
.login-card {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.92) 0%, rgba(10, 14, 23, 0.94) 100%);
    border: 1px solid rgba(var(--accent-sky-rgb), 0.22);
    border-radius: 18px;
    padding: 2.5rem 2.25rem 2.1rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 60px rgba(var(--accent-rgb), 0.08);
    backdrop-filter: blur(14px);
    animation: loginRise 0.6s 0.1s ease both;
}

/* Thin glowing edge along the top of the card */
.login-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18%;
    right: 18%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7);
}

.login-card .gate-badge-status {
    margin: 0 0 1.1rem 0;
}

.login-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.6rem 0;
    letter-spacing: 0.02em;
}

.login-card-desc {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.75rem 0;
}

.login-sso-cta {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-privacy {
    margin: 1.25rem auto 0;
    max-width: 22rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #64748b;
}

.login-card .auth-denied-box {
    text-align: left;
}

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

.eve-sso-image-btn {
    display: inline-block;
    cursor: pointer !important;
    transition: transform 0.2s ease, filter 0.2s ease;
    outline: none;
    user-select: none;
    -webkit-user-drag: none;
}

.eve-sso-image-btn:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), 0.5));
}

.eve-sso-image-btn:focus-visible {
    outline: 2px solid var(--accent-sky);
    outline-offset: 4px;
    border-radius: 4px;
}

.eve-sso-image-btn:active {
    transform: translateY(0);
}

.sso-badge-img.large {
    height: 48px;
    width: auto;
    display: block;
    cursor: pointer !important;
}

.sso-badge-img.small {
    height: 32px;
    width: auto;
    display: block;
    cursor: pointer !important;
}

.login-page-footer {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.78rem;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(var(--chrome-rgb), 0.4);
}

/* Tablet & phone: stack hero above the card */
@media (max-width: 900px) {
    .login-main-stage {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        gap: 2rem;
        padding: 2rem 16px 2.5rem;
        text-align: center;
    }
    .login-hero-logo { width: 68px; height: 68px; margin-bottom: 1rem; }
    .login-hero-desc { margin-left: auto; margin-right: auto; }
    .login-features { justify-items: center; }
    .login-page-header { padding: 0.8rem 16px; }
    .login-backdrop-caption { display: none; }
}

@media (max-width: 480px) {
    .login-features { display: none; }
    .login-hero-desc { font-size: 1.02rem; margin-bottom: 0; }
    .login-card { padding: 2rem 1.25rem 1.6rem; }
    .sso-badge-img.large { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-backdrop, .login-backdrop .bd-node.pulse, .login-hero, .login-card { animation: none; }
}

/* ============================================
   ANSIBLEX JUMP BRIDGE LINKS
   ============================================ */
.ansiblex-link-line {
    animation: ansiblexDashFlow 25s linear infinite;
}

@keyframes ansiblexDashFlow {
    from {
        stroke-dashoffset: 200;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.dotlan-ansiblex-connection:hover line.ansiblex-link-line {
    stroke: var(--good);
    stroke-width: 3.2px;
}


/* ==========================================
   MILITARY COMBAT ANOMALIES SPAWN PANEL
   ========================================== */
.military-spawns-panel {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(30, 20, 25, 0.85), rgba(20, 15, 20, 0.95));
    border: 1px solid rgba(var(--bad-strong-rgb), 0.35);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(var(--bad-strong-rgb), 0.2);
    position: relative;
    overflow: hidden;
}

.military-spawns-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bad-strong), #f59e0b, var(--bad-strong));
}

.spawns-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--bad-strong-rgb), 0.15);
}

.spawns-panel-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spawns-badge-icon {
    font-size: 1.25rem;
}

.spawns-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--bad);
    letter-spacing: 0.3px;
}

.spawns-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
}

.spawns-meta-badge {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(var(--bad-strong-rgb), 0.15);
    color: #fca5a5;
    border: 1px solid rgba(var(--bad-strong-rgb), 0.35);
    letter-spacing: 0.3px;
}

.spawns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.spawn-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.spawn-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--bad-strong-rgb), 0.4);
}

.spawn-chip .site-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 4px;
}

.spawn-chip .spawn-count {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(var(--bad-strong-rgb), 0.2);
    color: #fca5a5;
}

/* Apex Tier (Sanctum / Forsaken Sanctum / Horde / Teeming Drone Horde) */
.spawn-chip.tier-apex {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(180, 83, 9, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.spawn-chip.tier-apex .site-name {
    color: #fbbf24;
}

.spawn-chip.tier-apex .spawn-count {
    background: rgba(245, 158, 11, 0.25);
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Elite Tier (Haven / Patrol) */
.spawn-chip.tier-elite {
    background: linear-gradient(135deg, rgba(var(--accent-sky-rgb), 0.16), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(var(--accent-sky-rgb), 0.4);
}

.spawn-chip.tier-elite .site-name {
    color: #7dd3fc;
}

.spawn-chip.tier-elite .spawn-count {
    background: rgba(var(--accent-sky-rgb), 0.22);
    color: #bae6fd;
    border: 1px solid rgba(var(--accent-sky-rgb), 0.35);
}

/* High Tier (Hubs / Gatherings) */
.spawn-chip.tier-high {
    border-color: rgba(var(--bad-strong-rgb), 0.22);
}

.spawns-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--bad-strong-rgb), 0.15);
    font-size: 0.75rem;
}

.spawns-total {
    color: #fca5a5;
}

.spawns-total strong {
    font-size: 0.85rem;
    color: #fff;
}

.spawns-note {
    color: var(--text-muted, #94a3b8);
    font-size: 0.7rem;
    font-style: italic;
}

/* System Card Combat Spawns Display (Report / List View) */
.system-combat-spawns {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(var(--bad-strong-rgb), 0.07);
    border: 1px solid rgba(var(--bad-strong-rgb), 0.25);
    border-radius: 6px;
}

.system-combat-spawns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bad);
    margin-bottom: 6px;
}

.system-combat-band {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.68rem;
    opacity: 0.85;
}

.system-combat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.combat-chip {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #fecaca;
    border: 1px solid rgba(var(--bad-strong-rgb), 0.2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.combat-chip strong {
    color: #ffffff;
}

.combat-chip.chip-apex {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fde68a;
}

.combat-chip.chip-elite {
    background: rgba(var(--accent-sky-rgb), 0.15);
    border-color: rgba(var(--accent-sky-rgb), 0.35);
    color: #bae6fd;
}

/* Tooltip Combat Spawns */
.tooltip-combat-spawns {
    margin: 8px 0;
    padding: 7px 9px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(var(--bad-strong-rgb), 0.14) 0%, rgba(185, 28, 28, 0.08) 100%);
    border: 1px solid rgba(var(--bad-strong-rgb), 0.35);
    box-shadow: inset 0 0 10px rgba(var(--bad-strong-rgb), 0.05);
}

.tooltip-combat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fca5a5;
    font-weight: 700;
    font-size: 0.74rem;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(var(--bad-strong-rgb), 0.25);
    margin-bottom: 4px;
}

.tooltip-combat-total {
    background: rgba(var(--bad-strong-rgb), 0.25);
    color: #fef2f2;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    border: 1px solid rgba(var(--bad-strong-rgb), 0.4);
}

.tooltip-combat-subhead {
    display: flex;
    justify-content: space-between;
    font-size: 0.63rem;
    color: var(--bad);
    opacity: 0.9;
    margin-bottom: 5px;
    font-family: var(--font-mono, monospace);
}

.tooltip-combat-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.tooltip-combat-list::-webkit-scrollbar {
    width: 3px;
}

.tooltip-combat-list::-webkit-scrollbar-thumb {
    background: rgba(var(--bad-strong-rgb), 0.4);
    border-radius: 3px;
}

.tooltip-combat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.69rem;
    transition: background 0.15s ease;
}

.tooltip-combat-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tooltip-combat-item.tier-apex {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.09);
}

.tooltip-combat-item.tier-apex .tooltip-combat-item-name {
    color: #fef08a;
    font-weight: 600;
}

.tooltip-combat-item.tier-apex .tooltip-combat-badge {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.45);
}

.tooltip-combat-item.tier-elite {
    border-color: rgba(var(--accent-sky-rgb), 0.35);
    background: rgba(var(--accent-sky-rgb), 0.09);
}

.tooltip-combat-item.tier-elite .tooltip-combat-item-name {
    color: #bae6fd;
    font-weight: 600;
}

.tooltip-combat-item.tier-elite .tooltip-combat-badge {
    background: rgba(var(--accent-sky-rgb), 0.25);
    color: var(--accent-sky);
    border-color: rgba(var(--accent-sky-rgb), 0.45);
}

.tooltip-combat-item.tier-high {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.09);
}

.tooltip-combat-item.tier-high .tooltip-combat-item-name {
    color: #e9d5ff;
}

.tooltip-combat-item.tier-high .tooltip-combat-badge {
    background: rgba(168, 85, 247, 0.25);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.45);
}

.tooltip-combat-item.tier-std {
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.tooltip-combat-item.tier-std .tooltip-combat-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.18);
}

.tooltip-combat-item-name {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6px;
}

.tier-indicator {
    font-size: 0.65rem;
    flex-shrink: 0;
}

.tooltip-combat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.66rem;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid;
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.02em;
}

/* Exploration 5-Jump Spawn Range Visuals */
.dotlan-exploration-links-layer {
    pointer-events: auto;
}

.dotlan-exploration-connection {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.dotlan-exploration-connection:hover line.exploration-spawn-line {
    stroke-width: 2.8 !important;
    stroke: #f3e8ff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px #c084fc);
}

.dotlan-exploration-connection:hover circle {
    r: 5.5 !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 0 10px #c084fc);
}

@keyframes explPulse {
    0% {
        r: 16;
        opacity: 0.85;
    }
    50% {
        r: 23;
        opacity: 0.3;
    }
    100% {
        r: 16;
        opacity: 0.85;
    }
}

.exploration-hub-pulse {
    animation: explPulse 2.5s infinite ease-in-out;
}

.tooltip-exploration-range {
    margin: 6px 0;
    padding: 6px 9px;
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0%, rgba(126, 34, 206, 0.1) 100%);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.08);
    color: #e9d5ff;
    font-size: 0.69rem;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.35;
}

.tooltip-expl-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: -1px;
}

.tooltip-exploration-range strong {
    color: #f5d0fe;
    font-weight: 700;
}

/* ============================================
   PINNED STATIC TOOLTIP & SYSTEM NODE STYLING
   ============================================ */
.dotlan-tooltip.pinned {
    pointer-events: auto;
}

.dotlan-tooltip.pinned .tooltip-main {
    border-color: #c084fc;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.92), 0 0 24px rgba(192, 132, 252, 0.45);
}

.dotlan-node.pinned .dotlan-pill {
    stroke: #c084fc !important;
    stroke-width: 2.6px !important;
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.95)) !important;
}

.tooltip-pinned-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(192, 132, 252, 0.35);
}

.tooltip-pinned-bar .pinned-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #c084fc;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.tooltip-pinned-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tooltip-copy-btn {
    background: rgba(192, 132, 252, 0.14);
    border: 1px solid rgba(192, 132, 252, 0.4);
    color: #d8b4fe;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tooltip-copy-btn:hover {
    background: rgba(192, 132, 252, 0.3);
    border-color: #c084fc;
    color: #f3e8ff;
}

.tooltip-unpin-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 0.75rem;
    line-height: 1;
    transition: all 0.15s ease;
}

.tooltip-unpin-btn:hover {
    background: rgba(var(--bad-strong-rgb), 0.3);
    border-color: var(--bad-strong);
    color: #fca5a5;
    transform: scale(1.05);
}

.tooltip-footer.pinned {
    color: #c084fc;
    border-top: 1px dashed rgba(192, 132, 252, 0.4);
    font-weight: 600;
}

/* ============================================
   SOVEREIGNTY & ESI SYNC STYLES
   ============================================ */

.sov-holder-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    background: rgba(var(--accent-sky-rgb), 0.12);
    border: 1px solid rgba(var(--accent-sky-rgb), 0.4);
    color: var(--accent-sky);
    letter-spacing: 0.3px;
}

.sov-holder-badge.unclaimed {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

/* NPC space: the faction's own colour is set inline, so the badge only has to
   stop insisting on the alliance blue behind it */
.sov-holder-badge.faction {
    background: rgba(255, 255, 255, 0.05);
}

.system-lock-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    animation: fadeIn 0.2s ease-out;
}

.lock-banner-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.lock-banner-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lock-banner-info strong {
    font-size: 0.8rem;
    color: #fbbf24;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.lock-banner-info span {
    font-size: 0.75rem;
    color: #cbd5e1;
}

/* Control Panel Sovereignty Tab */
.sov-tab-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.sov-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-pulse-sync {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    padding: 9px 18px;
    font-size: 0.88rem;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    border: 1px solid var(--accent-sky);
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(var(--accent-sky-rgb), 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pulse-sync:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(var(--accent-sky-rgb), 0.6);
    transform: translateY(-1px);
}

.btn-pulse-sync:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.sync-icon.spinning {
    display: inline-block;
    animation: sovSpin 0.8s linear infinite;
}

@keyframes sovSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sov-stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sov-stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
}

.sov-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sov-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-sky);
    margin-top: 4px;
    font-family: var(--font-mono, monospace);
}

.sov-alliances-section {
    margin-top: 10px;
}

.sov-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sov-alliances-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.sov-alliance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sov-alliance-card:hover {
    border-color: rgba(var(--accent-sky-rgb), 0.4);
    background: rgba(15, 23, 42, 0.85);
}

.sov-alliance-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sov-alliance-ticker {
    background: rgba(var(--accent-sky-rgb), 0.15);
    color: var(--accent-sky);
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(var(--accent-sky-rgb), 0.3);
    flex-shrink: 0;
}

.sov-alliance-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sov-alliance-count {
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    flex-shrink: 0;
}

/* Tooltip Sov Row */
.tooltip-sov-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
}

.tooltip-sov-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(var(--accent-sky-rgb), 0.12);
    border: 1px solid rgba(var(--accent-sky-rgb), 0.35);
    color: var(--accent-sky);
}

.tooltip-sov-tag.unclaimed {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

/* Faction space. Colour and border come from the faction itself, inline, so this
   only clears the alliance blue underneath. */
.tooltip-sov-tag.faction {
    background: rgba(255, 255, 255, 0.05);
}

/* The NPC stations in this system: what they are, whose they are, and the few
   services worth flying to one for. */
.tooltip-npc-stations {
    margin-bottom: var(--spacing-sm);
}

.tooltip-npc-station {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #facc15;
}

.npc-station-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fde68a;
}

.npc-station-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 2px;
    font-size: 0.68rem;
    color: #94a3b8;
}

.npc-station-owner {
    font-weight: 600;
}

.npc-station-service {
    white-space: nowrap;
}



/* Access Denied Enhanced Layout */
.login-denied-title {
    color: var(--bad-strong);
    font-size: 0.95rem;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.login-denied-message {
    font-size: 0.84rem;
    color: #f1f5f9;
    line-height: 1.5;
    margin-bottom: 8px;
}

.login-denied-message code {
    background: rgba(255, 255, 255, 0.12);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    color: var(--accent-sky);
}

.login-denied-contact {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--bad-strong-rgb), 0.3);
}

.login-denied-contact strong {
    display: inline !important;
    color: var(--accent-sky);
    font-weight: 700;
}

.system-editor-form {
    min-height: 0;
}

.report-preview .panel-content {
    display: flex;
    flex-direction: column;
    padding: 6px;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}

/* ============================================
   DASHBOARD REFRESH (desktop)
   Visual layer over the rules above: compact header, consistent panel
   headings, dark form controls, labeled view tabs, a wrapping map toolbar
   and more room for the map. Matches the login page styling.
   ============================================ */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Form controls (dashboard and modals) --- */
.form-select,
.form-input,
.form-textarea,
.map-select {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--input-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select,
.form-input,
.form-textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.95rem;
}

.form-select,
.map-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

.form-select:hover,
.form-input:hover,
.form-textarea:hover,
.map-select:hover {
    border-color: rgba(var(--accent-sky-rgb), 0.35);
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus,
.map-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.form-select:disabled,
.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-select option,
.map-select option {
    background: var(--input-bg);
    color: var(--text-primary);
}

/* --- Header --- */
#appDashboard .main-header {
    padding: 8px 18px;
    background: rgba(var(--chrome-rgb), 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#appDashboard .logo-icon {
    width: 32px;
    height: 32px;
    animation: none;
    filter: none;
}

#appDashboard .logo-text h1 {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #f1f5f9;
    margin: 0;
}

#appDashboard .alliance-name {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

#appDashboard .header-actions {
    align-items: center;
    gap: 8px;
}

#appDashboard .header-actions > .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

#appDashboard .header-actions > .btn:hover,
#appDashboard .btn-ghost:hover {
    transform: none;
    border-color: rgba(var(--accent-sky-rgb), 0.5);
    box-shadow: none;
}

#appDashboard .auth-pilot-card {
    border-color: rgba(var(--accent-sky-rgb), 0.3);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
}

/* --- Layout: give the map more room --- */
#appDashboard .main-content {
    /* The dashboard is a flex column (see updateAuthUI), so fill the space below the header
       instead of the fixed calc(100vh - 82px) above */
    height: auto;
    max-height: none;
    grid-template-columns: 330px minmax(0, 1fr) 270px;
    gap: 12px;
    padding: 12px 14px;
}

@media (max-width: 1400px) {
    #appDashboard .main-content {
        grid-template-columns: 300px minmax(0, 1fr) 250px;
    }
}

/* --- Panels --- */
#appDashboard .panel {
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.9) 0%, rgba(var(--surface-2-rgb), 0.92) 100%);
    border-color: rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}

#appDashboard .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

#appDashboard .panel-header h2 {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #cbd5e1;
    margin: 0;
}

#appDashboard .report-preview .panel-content {
    gap: 8px;
    padding: 10px 12px 12px;
}

/* --- View tabs and panel buttons --- */
#appDashboard .panel-controls {
    align-items: center;
    gap: 8px;
}

#appDashboard .view-toggle {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    padding: 2px;
    gap: 2px;
}

#appDashboard .btn-toggle,
#appDashboard .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 7px;
}

#appDashboard .btn-toggle {
    background: transparent;
    border: none;
}

#appDashboard .btn-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

#appDashboard .btn-toggle.active {
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5);
}

#appDashboard .btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#appDashboard .btn-ghost.btn-icon-only {
    padding: 5px 9px;
}

/* --- Region tabs (chips) --- */
#appDashboard .constellation-filter {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

#appDashboard .constellation-chips {
    gap: 6px;
}

#appDashboard .constellation-chip {
    gap: 6px;
    padding: 4px 11px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

#appDashboard .constellation-chip:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-sky-rgb), 0.45);
}

#appDashboard .constellation-chip.active {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.6);
    color: var(--accent-text);
}

#appDashboard .constellation-chip .chip-count,
#appDashboard .constellation-chip.active .chip-count {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 0;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
}

#appDashboard .constellation-chip.active .chip-count {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent-text);
}

/* --- Map toolbar --- */
#appDashboard .map-container {
    display: flex;
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.07);
}

#appDashboard .map-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
    padding: 8px 12px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#appDashboard .toolbar-group-region {
    display: none;
}

#appDashboard .toolbar-group {
    gap: 8px;
}

#appDashboard .toolbar-label {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

#appDashboard .map-select {
    max-width: 210px;
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.85rem;
}

#appDashboard .btn-theme {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    color: var(--text-secondary);
}

#appDashboard .map-toolbar > .toolbar-group > .btn-theme {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#appDashboard .btn-theme.active {
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5);
}

#appDashboard .map-toolbar > .toolbar-group > .btn-theme.active {
    border-color: transparent;
}

#appDashboard .toolbar-info {
    margin-left: auto;
}

#appDashboard .map-hint {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (max-width: 1700px) {
    #appDashboard .toolbar-info {
        display: none;
    }
}

/* --- Section headings inside panels --- */
#appDashboard .section-title {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: #cbd5e1;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

#appDashboard .form-label {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

#appDashboard .form-group {
    margin-bottom: 12px;
}

/* Narrower desktops (e.g. 1440px): keep region tabs and the map toolbar on one row each */
@media (max-width: 1600px) {
    #appDashboard .constellation-chip {
        padding: 3px 10px;
        font-size: 0.84rem;
    }
    #appDashboard .constellation-chip .chip-count {
        display: none;
    }
    #appDashboard .map-toolbar .toolbar-label {
        display: none;
    }
    #appDashboard .map-toolbar {
        gap: 8px;
    }
    #appDashboard .map-select {
        max-width: 150px;
    }
}

@media (max-width: 1400px) {
    #appDashboard .map-select {
        max-width: 132px;
    }
}

/* "Last edited by ..." under the System picker and in map tooltips */
.system-last-edited {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.tooltip-last-edited {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    color: #94a3b8;
}

/* ============================================
   ADMIN CONTROL PANEL PAGE (#admin/<section>)
   ============================================ */
#adminPage {
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    overflow: hidden;
}

.admin-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.admin-page-header h2 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e2e8f0;
    margin: 0;
}

.admin-page-body {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 12px;
}

#adminPage .admin-nav,
#adminPage .admin-page-content {
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.9) 0%, rgba(var(--surface-2-rgb), 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}

#adminPage .admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    overflow-y: auto;
}

#adminPage .admin-nav .cp-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border: none;
    border-radius: 8px;
}

#adminPage .admin-nav .cp-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

#adminPage .admin-nav .cp-tab.active {
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), 0.14);
    box-shadow: inset 3px 0 0 var(--accent-primary);
    border-bottom: none;
}

.admin-nav-divider {
    height: 1px;
    margin: 8px 6px;
    background: rgba(255, 255, 255, 0.07);
}

#adminPage .admin-page-content {
    min-height: 0;
    overflow-y: auto;
    padding: 20px 26px 26px;
}

#adminPage .cp-tab-content {
    max-width: 1100px;
}

#adminPage .cp-list {
    max-height: none;
    overflow: visible;
}

#adminPage .modal-subtitle {
    margin-top: 0;
}

/* Edit / View mode switch in the header (admins and editors) */
.mode-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.mode-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), 0.14);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5);
}

.mode-btn[data-mode="view"].active {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.5);
}

/* ============================================
   THEMES
   Selected in the header (stored as sov_theme) and applied as
   <html data-theme="...">. Each theme redefines the colour tokens from :root.
   The map keeps its own colours (they encode gate types, upgrades and sec).
   ============================================ */

/* ---- Empires ---- */

:root[data-theme="amarr"] {
    --bg-primary: #120e08; --bg-secondary: #1b150c; --bg-tertiary: #282012; --bg-card: #1d170e; --bg-hover: #2c2416;
    --accent-primary: #f2c14e; --accent-secondary: #b45309; --accent-glow: rgba(242, 193, 78, 0.3);
    --accent-rgb: 242, 193, 78; --accent-sky: #ffd978; --accent-sky-rgb: 255, 217, 120; --accent-text: #fff4d6;
    --surface-rgb: 32, 25, 14; --surface-2-rgb: 23, 18, 10; --chrome-rgb: 12, 9, 5; --input-bg: #16110a;
    --page-grad-1: #2c200b; --page-grad-2: #0a0703;
    --text-primary: #f8f0e0; --text-secondary: #cbbb9b; --text-muted: #8e7e60;
    --border-glow: rgba(242, 193, 78, 0.2);
    --gradient-header: linear-gradient(135deg, #120e08 0%, #282012 100%);
    --gradient-accent: linear-gradient(135deg, #f2c14e 0%, #b45309 100%);
}

:root[data-theme="caldari"] {
    --bg-primary: #0a0d12; --bg-secondary: #11161d; --bg-tertiary: #1a212b; --bg-card: #141a23; --bg-hover: #1f2835;
    --accent-primary: #2f7bff; --accent-secondary: #00c2ff; --accent-glow: rgba(47, 123, 255, 0.35);
    --accent-rgb: 47, 123, 255; --accent-sky: #6aa5ff; --accent-sky-rgb: 106, 165, 255; --accent-text: #e6efff;
    --surface-rgb: 20, 27, 37; --surface-2-rgb: 14, 19, 27; --chrome-rgb: 6, 8, 12; --input-bg: #0d1219;
    --page-grad-1: #0e1b33; --page-grad-2: #04060a;
    --text-primary: #eef3fb; --text-secondary: #9fb0c8; --text-muted: #63738c;
    --border-glow: rgba(47, 123, 255, 0.25);
    --gradient-header: linear-gradient(135deg, #0a0d12 0%, #1a212b 100%);
    --gradient-accent: linear-gradient(135deg, #2f7bff 0%, #00c2ff 100%);
}

:root[data-theme="gallente"] {
    --bg-primary: #06110d; --bg-secondary: #0b1a14; --bg-tertiary: #13271e; --bg-card: #0f1e18; --bg-hover: #1a3428;
    --accent-primary: #2fd08a; --accent-secondary: #14b8a6; --accent-glow: rgba(47, 208, 138, 0.3);
    --accent-rgb: 47, 208, 138; --accent-sky: #6ee7b7; --accent-sky-rgb: 110, 231, 183; --accent-text: #dcfff0;
    --surface-rgb: 13, 31, 23; --surface-2-rgb: 9, 22, 16; --chrome-rgb: 3, 10, 7; --input-bg: #09170f;
    --page-grad-1: #0b2a1d; --page-grad-2: #020805;
    --text-primary: #ecfdf5; --text-secondary: #a3c9b8; --text-muted: #5f8a77;
    --border-glow: rgba(47, 208, 138, 0.2);
    --gradient-header: linear-gradient(135deg, #06110d 0%, #13271e 100%);
    --gradient-accent: linear-gradient(135deg, #2fd08a 0%, #14b8a6 100%);
}

:root[data-theme="minmatar"] {
    --bg-primary: #120b08; --bg-secondary: #1c120d; --bg-tertiary: #291a13; --bg-card: #1f140e; --bg-hover: #302117;
    --accent-primary: #e0703a; --accent-secondary: #9a3412; --accent-glow: rgba(224, 112, 58, 0.3);
    --accent-rgb: 224, 112, 58; --accent-sky: #f29a6b; --accent-sky-rgb: 242, 154, 107; --accent-text: #ffe8dc; --on-accent: #ffffff;
    --surface-rgb: 33, 21, 15; --surface-2-rgb: 24, 15, 11; --chrome-rgb: 12, 7, 5; --input-bg: #170f0a;
    --page-grad-1: #2c150b; --page-grad-2: #0a0503;
    --text-primary: #fbeee6; --text-secondary: #cfa994; --text-muted: #8d6b5a;
    --border-glow: rgba(224, 112, 58, 0.2);
    --gradient-header: linear-gradient(135deg, #120b08 0%, #291a13 100%);
    --gradient-accent: linear-gradient(135deg, #e0703a 0%, #9a3412 100%);
}

/* ---- Factions ---- */

:root[data-theme="triglavian"] {
    --bg-primary: #110607; --bg-secondary: #1a0a0c; --bg-tertiary: #270f13; --bg-card: #1d0b0e; --bg-hover: #33141a;
    --accent-primary: #ff2d55; --accent-secondary: #ff7b00; --accent-glow: rgba(255, 45, 85, 0.35);
    --accent-rgb: 255, 45, 85; --accent-sky: #ff8a3d; --accent-sky-rgb: 255, 138, 61; --accent-text: #ffe0e6; --on-accent: #ffffff;
    --surface-rgb: 33, 12, 16; --surface-2-rgb: 24, 9, 12; --chrome-rgb: 12, 3, 5; --input-bg: #16080a;
    --page-grad-1: #3a0810; --page-grad-2: #080203;
    --text-primary: #fbecee; --text-secondary: #d6a5ad; --text-muted: #93656d;
    --border-glow: rgba(255, 45, 85, 0.25);
    --gradient-header: linear-gradient(135deg, #110607 0%, #270f13 100%);
    --gradient-accent: linear-gradient(135deg, #ff2d55 0%, #c2410c 100%);
}

:root[data-theme="stealth"] {
    --bg-primary: #0b0c0e; --bg-secondary: #111316; --bg-tertiary: #181b1f; --bg-card: #131518; --bg-hover: #1e2227;
    --accent-primary: #8b95a5; --accent-secondary: #4b5563; --accent-glow: rgba(139, 149, 165, 0.12);
    --accent-rgb: 139, 149, 165; --accent-sky: #a3adbb; --accent-sky-rgb: 163, 173, 187; --accent-text: #e5e7eb; --on-accent: #ffffff;
    --surface-rgb: 19, 21, 24; --surface-2-rgb: 14, 15, 18; --chrome-rgb: 5, 6, 7; --input-bg: #0e1013;
    --page-grad-1: #15181c; --page-grad-2: #050607;
    --text-primary: #c9ced6; --text-secondary: #8a919c; --text-muted: #737a85;
    --border-glow: rgba(139, 149, 165, 0.12);
    --gradient-header: linear-gradient(135deg, #0b0c0e 0%, #181b1f 100%);
    --gradient-accent: linear-gradient(135deg, #6b7280 0%, #374151 100%);
    --shadow-glow: none;
}

:root[data-theme="jove"] {
    --bg-primary: #05090b; --bg-secondary: #0a1114; --bg-tertiary: #111c20; --bg-card: #0d161a; --bg-hover: #16262b;
    --accent-primary: #5eead4; --accent-secondary: #0e7490; --accent-glow: rgba(94, 234, 212, 0.3);
    --accent-rgb: 94, 234, 212; --accent-sky: #99f6e4; --accent-sky-rgb: 153, 246, 228; --accent-text: #e0fffa;
    --surface-rgb: 13, 22, 26; --surface-2-rgb: 9, 16, 19; --chrome-rgb: 2, 5, 6; --input-bg: #081013;
    --page-grad-1: #0a2a2e; --page-grad-2: #010304;
    --text-primary: #e6fbf8; --text-secondary: #9cc4c0; --text-muted: #5c807d;
    --border-glow: rgba(94, 234, 212, 0.2);
    --gradient-header: linear-gradient(135deg, #05090b 0%, #111c20 100%);
    --gradient-accent: linear-gradient(135deg, #2dd4bf 0%, #0e7490 100%);
}

:root[data-theme="sansha"] {
    --bg-primary: #060b05; --bg-secondary: #0b1409; --bg-tertiary: #121f0f; --bg-card: #0e190c; --bg-hover: #1a2e15;
    --accent-primary: #a3e635; --accent-secondary: #4d7c0f; --accent-glow: rgba(163, 230, 53, 0.3);
    --accent-rgb: 163, 230, 53; --accent-sky: #bef264; --accent-sky-rgb: 190, 242, 100; --accent-text: #f3ffe0;
    --surface-rgb: 15, 26, 12; --surface-2-rgb: 11, 19, 9; --chrome-rgb: 3, 6, 2; --input-bg: #0a1208;
    --page-grad-1: #1a3309; --page-grad-2: #020401;
    --text-primary: #f1fbe6; --text-secondary: #b1c89c; --text-muted: #6f865c;
    --border-glow: rgba(163, 230, 53, 0.2);
    --gradient-header: linear-gradient(135deg, #060b05 0%, #121f0f 100%);
    --gradient-accent: linear-gradient(135deg, #a3e635 0%, #4d7c0f 100%);
}

:root[data-theme="concord"] {
    --bg-primary: #070b14; --bg-secondary: #0d1424; --bg-tertiary: #152036; --bg-card: #101a2d; --bg-hover: #1b2a45;
    --accent-primary: #4f8cff; --accent-secondary: #93c5fd; --accent-glow: rgba(79, 140, 255, 0.32);
    --accent-rgb: 79, 140, 255; --accent-sky: #93c5fd; --accent-sky-rgb: 147, 197, 253; --accent-text: #e8f0ff; --on-accent: #ffffff;
    --surface-rgb: 17, 27, 46; --surface-2-rgb: 12, 20, 35; --chrome-rgb: 4, 7, 13; --input-bg: #0b1322;
    --page-grad-1: #102447; --page-grad-2: #03050a;
    --text-primary: #f4f7ff; --text-secondary: #a9b8d6; --text-muted: #6b7a99;
    --border-glow: rgba(79, 140, 255, 0.25);
    --gradient-header: linear-gradient(135deg, #070b14 0%, #152036 100%);
    --gradient-accent: linear-gradient(135deg, #4f8cff 0%, #1d4ed8 100%);
}

:root[data-theme="guristas"] {
    --bg-primary: #0f0d05; --bg-secondary: #18150a; --bg-tertiary: #242010; --bg-card: #1c180c; --bg-hover: #302a14;
    --accent-primary: #facc15; --accent-secondary: #a16207; --accent-glow: rgba(250, 204, 21, 0.3);
    --accent-rgb: 250, 204, 21; --accent-sky: #fde047; --accent-sky-rgb: 253, 224, 71; --accent-text: #fffbe0;
    --surface-rgb: 31, 27, 13; --surface-2-rgb: 22, 19, 9; --chrome-rgb: 8, 7, 2; --input-bg: #141208;
    --page-grad-1: #2e2606; --page-grad-2: #060501;
    --text-primary: #fefbe8; --text-secondary: #cfc59a; --text-muted: #8c835c;
    --border-glow: rgba(250, 204, 21, 0.2);
    --gradient-header: linear-gradient(135deg, #0f0d05 0%, #242010 100%);
    --gradient-accent: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
}

:root[data-theme="serpentis"] {
    --bg-primary: #0a0712; --bg-secondary: #120d1d; --bg-tertiary: #1b142b; --bg-card: #150f22; --bg-hover: #251c3a;
    --accent-primary: #a3e635; --accent-secondary: #8b5cf6; --accent-glow: rgba(163, 230, 53, 0.3);
    --accent-rgb: 163, 230, 53; --accent-sky: #c4b5fd; --accent-sky-rgb: 196, 181, 253; --accent-text: #f4ffe6;
    --surface-rgb: 26, 19, 41; --surface-2-rgb: 19, 14, 30; --chrome-rgb: 6, 4, 10; --input-bg: #110c1b;
    --page-grad-1: #2a1650; --page-grad-2: #050309;
    --text-primary: #f5f2ff; --text-secondary: #bdb3d6; --text-muted: #7d7399;
    --border-glow: rgba(163, 230, 53, 0.2);
    --gradient-header: linear-gradient(135deg, #0a0712 0%, #1b142b 100%);
    --gradient-accent: linear-gradient(135deg, #a3e635 0%, #65a30d 100%);
}

:root[data-theme="bloodraider"] {
    --bg-primary: #0d0405; --bg-secondary: #160708; --bg-tertiary: #220b0d; --bg-card: #1a0809; --bg-hover: #2e0f12;
    --accent-primary: #ef4444; --accent-secondary: #7f1d1d; --accent-glow: rgba(239, 68, 68, 0.35);
    --accent-rgb: 239, 68, 68; --accent-sky: #f87171; --accent-sky-rgb: 248, 113, 113; --accent-text: #ffe4e4; --on-accent: #ffffff;
    --surface-rgb: 28, 9, 11; --surface-2-rgb: 20, 6, 8; --chrome-rgb: 7, 2, 2; --input-bg: #130506;
    --page-grad-1: #3b0508; --page-grad-2: #050101;
    --text-primary: #fbeaea; --text-secondary: #cf9e9e; --text-muted: #8f5f5f;
    --border-glow: rgba(239, 68, 68, 0.25);
    --gradient-header: linear-gradient(135deg, #0d0405 0%, #220b0d 100%);
    --gradient-accent: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
}

/* ---- Fun ---- */

:root[data-theme="hotpink"] {
    --bg-primary: #12060d; --bg-secondary: #1c0a15; --bg-tertiary: #2a1020; --bg-card: #200c18; --bg-hover: #331529;
    --accent-primary: #ff4fa3; --accent-secondary: #c026d3; --accent-glow: rgba(255, 79, 163, 0.35);
    --accent-rgb: 255, 79, 163; --accent-sky: #ff85c0; --accent-sky-rgb: 255, 133, 192; --accent-text: #ffe3f1; --on-accent: #ffffff;
    --surface-rgb: 35, 12, 26; --surface-2-rgb: 25, 8, 18; --chrome-rgb: 12, 4, 9; --input-bg: #18070f;
    --page-grad-1: #3a0a26; --page-grad-2: #0a0206;
    --text-primary: #fff0f7; --text-secondary: #d9a6c1; --text-muted: #9a6781;
    --border-glow: rgba(255, 79, 163, 0.25);
    --gradient-header: linear-gradient(135deg, #12060d 0%, #2a1020 100%);
    --gradient-accent: linear-gradient(135deg, #ff4fa3 0%, #c026d3 100%);
}

:root[data-theme="cadbury"] {
    --bg-primary: #0f0718; --bg-secondary: #170c25; --bg-tertiary: #231238; --bg-card: #1a0e2c; --bg-hover: #2d1946;
    --accent-primary: #c084fc; --accent-secondary: #e3b04b; --accent-glow: rgba(192, 132, 252, 0.32);
    --accent-rgb: 192, 132, 252; --accent-sky: #d8b4fe; --accent-sky-rgb: 216, 180, 254; --accent-text: #f3e8ff;
    --surface-rgb: 33, 17, 53; --surface-2-rgb: 24, 12, 40; --chrome-rgb: 10, 4, 16; --input-bg: #140a22;
    --page-grad-1: #3c1053; --page-grad-2: #07030c;
    --text-primary: #f6efff; --text-secondary: #c3b1dc; --text-muted: #85739f;
    --border-glow: rgba(192, 132, 252, 0.22);
    --gradient-header: linear-gradient(135deg, #0f0718 0%, #231238 100%);
    --gradient-accent: linear-gradient(135deg, #c084fc 0%, #e3b04b 100%);
}

:root[data-theme="anime"] {
    --bg-primary: #140f24; --bg-secondary: #1c1633; --bg-tertiary: #281f46; --bg-card: #201938; --bg-hover: #31285b;
    --accent-primary: #ff7eb6; --accent-secondary: #7dd3fc; --accent-glow: rgba(255, 126, 182, 0.35);
    --accent-rgb: 255, 126, 182; --accent-sky: #7dd3fc; --accent-sky-rgb: 125, 211, 252; --accent-text: #fff0f7;
    --surface-rgb: 37, 29, 68; --surface-2-rgb: 28, 22, 52; --chrome-rgb: 16, 11, 30; --input-bg: #1a1430;
    --page-grad-1: #3b2a6b; --page-grad-2: #0e0a1c;
    --text-primary: #fff5fb; --text-secondary: #cdc3ea; --text-muted: #8f84b3;
    --border-glow: rgba(255, 126, 182, 0.25);
    --gradient-header: linear-gradient(135deg, #140f24 0%, #281f46 100%);
    --gradient-accent: linear-gradient(135deg, #ff7eb6 0%, #7dd3fc 100%);
    --font-display: 'M PLUS Rounded 1c', 'Rajdhani', sans-serif;
    --font-body: 'M PLUS Rounded 1c', 'Rajdhani', sans-serif;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
}

/* Anime: softer, rounder shapes and a sakura-to-sky shimmer on titles */
:root[data-theme="anime"] #appDashboard .panel,
:root[data-theme="anime"] .login-card,
:root[data-theme="anime"] #adminPage .admin-nav,
:root[data-theme="anime"] #adminPage .admin-page-content { border-radius: 22px; }
:root[data-theme="anime"] #appDashboard .constellation-chip,
:root[data-theme="anime"] #appDashboard .btn-toggle,
:root[data-theme="anime"] #appDashboard .btn-ghost,
:root[data-theme="anime"] .mode-btn,
:root[data-theme="anime"] .form-select,
:root[data-theme="anime"] .form-input,
:root[data-theme="anime"] .map-select { border-radius: 999px; }
:root[data-theme="anime"] .login-hero-title,
:root[data-theme="anime"] #appDashboard .logo-text h1 {
    background: linear-gradient(90deg, #ffb3d1 0%, #ff7eb6 45%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.02em;
}
:root[data-theme="anime"] #appDashboard .panel-header h2,
:root[data-theme="anime"] .login-eyebrow,
:root[data-theme="anime"] .login-brand-name { letter-spacing: 0.08em; }

:root[data-theme="synthwave"] {
    --bg-primary: #12071f; --bg-secondary: #1a0b2e; --bg-tertiary: #26103f; --bg-card: #1f0d36; --bg-hover: #321654;
    --accent-primary: #ff2bd6; --accent-secondary: #22d3ee; --accent-glow: rgba(255, 43, 214, 0.45);
    --accent-rgb: 255, 43, 214; --accent-sky: #22d3ee; --accent-sky-rgb: 34, 211, 238; --accent-text: #ffe6fa; --on-accent: #ffffff;
    --surface-rgb: 36, 14, 60; --surface-2-rgb: 26, 10, 44; --chrome-rgb: 10, 3, 18; --input-bg: #180a29;
    --page-grad-1: #3d0a5c; --page-grad-2: #07020d;
    --text-primary: #fdf0ff; --text-secondary: #c7a8e0; --text-muted: #8a6aa6;
    --border-glow: rgba(255, 43, 214, 0.3);
    --gradient-header: linear-gradient(135deg, #12071f 0%, #26103f 100%);
    --gradient-accent: linear-gradient(135deg, #c026d3 0%, #0891b2 100%);
}

/* Synthwave: neon glow on titles */
:root[data-theme="synthwave"] .login-hero-title,
:root[data-theme="synthwave"] #appDashboard .logo-text h1 {
    color: #ffe6fa;
    text-shadow: 0 0 6px rgba(255, 43, 214, 0.9), 0 0 18px rgba(255, 43, 214, 0.6), 0 0 36px rgba(34, 211, 238, 0.35);
}


:root[data-theme="terminal"] {
    --bg-primary: #000800; --bg-secondary: #020d03; --bg-tertiary: #051a07; --bg-card: #031205; --bg-hover: #08260b;
    --accent-primary: #33ff66; --accent-secondary: #1a9c3a; --accent-glow: rgba(51, 255, 102, 0.3);
    --accent-rgb: 51, 255, 102; --accent-sky: #7dff9e; --accent-sky-rgb: 125, 255, 158; --accent-text: #d6ffe0;
    --surface-rgb: 3, 18, 5; --surface-2-rgb: 2, 12, 3; --chrome-rgb: 0, 4, 0; --input-bg: #010a02;
    --page-grad-1: #002a0a; --page-grad-2: #000200;
    --text-primary: #b8ffc8; --text-secondary: #5fd47a; --text-muted: #2f8a44;
    --border-color: rgba(51, 255, 102, 0.18);
    --border-glow: rgba(51, 255, 102, 0.3);
    --gradient-header: linear-gradient(135deg, #000800 0%, #051a07 100%);
    --gradient-accent: linear-gradient(135deg, #33ff66 0%, #1a9c3a 100%);
}

/* The other phosphors: amber (P3), paper white (P4) and cyan */
:root[data-theme="terminalamber"] {
    --bg-primary: #0a0600; --bg-secondary: #110a00; --bg-tertiary: #1f1300; --bg-card: #160d00; --bg-hover: #2b1a00;
    --accent-primary: #ffb000; --accent-secondary: #b37700; --accent-glow: rgba(255, 176, 0, 0.3);
    --accent-rgb: 255, 176, 0; --accent-sky: #ffc94d; --accent-sky-rgb: 255, 201, 77; --accent-text: #fff0cc;
    --surface-rgb: 22, 13, 0; --surface-2-rgb: 15, 9, 0; --chrome-rgb: 5, 3, 0; --input-bg: #0d0800;
    --page-grad-1: #2a1800; --page-grad-2: #030200;
    --text-primary: #ffd98a; --text-secondary: #d9a040; --text-muted: #a8792a;
    --border-color: rgba(255, 176, 0, 0.18);
    --border-glow: rgba(255, 176, 0, 0.3);
    --gradient-header: linear-gradient(135deg, #0a0600 0%, #1f1300 100%);
    --gradient-accent: linear-gradient(135deg, #ffb000 0%, #b37700 100%);
}

:root[data-theme="terminalwhite"] {
    --bg-primary: #050505; --bg-secondary: #0b0b0b; --bg-tertiary: #171717; --bg-card: #101010; --bg-hover: #222222;
    --accent-primary: #f2f2f2; --accent-secondary: #9e9e9e; --accent-glow: rgba(242, 242, 242, 0.22);
    --accent-rgb: 242, 242, 242; --accent-sky: #ffffff; --accent-sky-rgb: 255, 255, 255; --accent-text: #ffffff;
    --surface-rgb: 16, 16, 16; --surface-2-rgb: 11, 11, 11; --chrome-rgb: 2, 2, 2; --input-bg: #080808;
    --page-grad-1: #1c1c1c; --page-grad-2: #020202;
    --text-primary: #dcdcdc; --text-secondary: #a8a8a8; --text-muted: #808080;
    --border-color: rgba(242, 242, 242, 0.18);
    --border-glow: rgba(242, 242, 242, 0.3);
    --gradient-header: linear-gradient(135deg, #050505 0%, #171717 100%);
    --gradient-accent: linear-gradient(135deg, #f2f2f2 0%, #9e9e9e 100%);
}

:root[data-theme="terminalcyan"] {
    --bg-primary: #000608; --bg-secondary: #010b0e; --bg-tertiary: #04171c; --bg-card: #021014; --bg-hover: #072329;
    --accent-primary: #33e6ff; --accent-secondary: #1a8c9c; --accent-glow: rgba(51, 230, 255, 0.3);
    --accent-rgb: 51, 230, 255; --accent-sky: #7df0ff; --accent-sky-rgb: 125, 240, 255; --accent-text: #d6faff;
    --surface-rgb: 2, 16, 20; --surface-2-rgb: 1, 11, 14; --chrome-rgb: 0, 3, 4; --input-bg: #010a0c;
    --page-grad-1: #00242b; --page-grad-2: #000203;
    --text-primary: #b8f4ff; --text-secondary: #5fc8d8; --text-muted: #368a96;
    --border-color: rgba(51, 230, 255, 0.18);
    --border-glow: rgba(51, 230, 255, 0.3);
    --gradient-header: linear-gradient(135deg, #000608 0%, #04171c 100%);
    --gradient-accent: linear-gradient(135deg, #33e6ff 0%, #1a8c9c 100%);
}

/* Every terminal: monospace, square corners, phosphor glow and faint CRT
   scanlines (the scanlines never catch clicks) */
:root:is([data-theme="terminal"], [data-theme="terminalamber"], [data-theme="terminalwhite"], [data-theme="terminalcyan"]) {
    --font-display: 'Share Tech Mono', monospace;
    --font-body: 'Share Tech Mono', monospace;
    --radius-sm: 0; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 4px;
}
:root:is([data-theme="terminal"], [data-theme="terminalamber"], [data-theme="terminalwhite"], [data-theme="terminalcyan"]) body {
    text-shadow: 0 0 2px rgba(var(--accent-rgb), 0.35);
}
:root:is([data-theme="terminal"], [data-theme="terminalamber"], [data-theme="terminalwhite"], [data-theme="terminalcyan"]) body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px);
}

/* ---- Seasonal ----
   Christmas and Halloween dress the page up. Everything decorative is a
   pseudo-element that never catches clicks, and nothing moves for people who
   ask their system for reduced motion. */

:root[data-theme="yulefest"] {
    --bg-primary: #07100b; --bg-secondary: #0c1a12; --bg-tertiary: #13261b; --bg-card: #0f2016; --bg-hover: #1b3526;
    --accent-primary: #ef5b5f; --accent-secondary: #f2c14e; --accent-glow: rgba(239, 91, 95, 0.32);
    --accent-rgb: 239, 91, 95; --accent-sky: #f2c14e; --accent-sky-rgb: 242, 193, 78; --accent-text: #ffe8e8; --on-accent: #ffffff;
    --surface-rgb: 16, 33, 23; --surface-2-rgb: 12, 25, 17; --chrome-rgb: 3, 8, 5; --input-bg: #0a170f;
    --page-grad-1: #0f3320; --page-grad-2: #020604;
    --text-primary: #f5fbf6; --text-secondary: #b3cbbd; --text-muted: #6f8a7a;
    --border-glow: rgba(239, 91, 95, 0.22);
    --gradient-header: linear-gradient(135deg, #07100b 0%, #13261b 100%);
    --gradient-accent: linear-gradient(135deg, #e5484d 0%, #b8860b 100%);
}

:root[data-theme="christmas"] {
    --bg-primary: #0a1020; --bg-secondary: #0f1830; --bg-tertiary: #17223f; --bg-card: #121c36; --bg-hover: #1f2c50;
    --accent-primary: #ff4d5a; --accent-secondary: #f4c542; --accent-glow: rgba(255, 77, 90, 0.32);
    --accent-rgb: 255, 77, 90; --accent-sky: #f4c542; --accent-sky-rgb: 244, 197, 66; --accent-text: #ffe3e5; --on-accent: #ffffff;
    --surface-rgb: 18, 28, 54; --surface-2-rgb: 13, 20, 40; --chrome-rgb: 4, 7, 15; --input-bg: #0c1428;
    --page-grad-1: #1a2a55; --page-grad-2: #03060d;
    --text-primary: #f8fbff; --text-secondary: #b8c4dc; --text-muted: #8391b0;
    --border-glow: rgba(255, 77, 90, 0.22);
    --gradient-header: linear-gradient(135deg, #0a1020 0%, #17223f 100%);
    --gradient-accent: linear-gradient(135deg, #d62839 0%, #9d0208 100%);
}

/* Christmas: candy-cane edges on the headers, fairy lights hanging from them */
:root[data-theme="christmas"] :is(.main-header, .login-page-header, .doc-bar) {
    border-bottom: 4px solid transparent;
    border-image: repeating-linear-gradient(135deg, #e63946 0 8px, #f8fbff 8px 16px) 1;
}
:root[data-theme="christmas"] .login-page-header { position: relative; z-index: 2; }
:root[data-theme="christmas"] :is(.main-header, .login-page-header, .doc-bar)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24'%3E%3Cpath d='M0 3 Q40 13 80 3 Q120 13 160 3' stroke='%2326324a' stroke-width='1.5' fill='none'/%3E%3Crect x='18.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='20' cy='13' r='7' fill='%23ff3b3b' opacity='.25'/%3E%3Cellipse cx='20' cy='13' rx='3' ry='4.5' fill='%23ff3b3b'/%3E%3Canimate attributeName='opacity' values='1;.3;1' dur='1.8s' begin='0.00s' repeatCount='indefinite'/%3E%3C/g%3E%3Crect x='58.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='60' cy='13' r='7' fill='%23ffd23f' opacity='.25'/%3E%3Cellipse cx='60' cy='13' rx='3' ry='4.5' fill='%23ffd23f'/%3E%3Canimate attributeName='opacity' values='1;.3;1' dur='1.8s' begin='0.45s' repeatCount='indefinite'/%3E%3C/g%3E%3Crect x='98.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='100' cy='13' r='7' fill='%233bd16f' opacity='.25'/%3E%3Cellipse cx='100' cy='13' rx='3' ry='4.5' fill='%233bd16f'/%3E%3Canimate attributeName='opacity' values='1;.3;1' dur='1.8s' begin='0.90s' repeatCount='indefinite'/%3E%3C/g%3E%3Crect x='138.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='140' cy='13' r='7' fill='%234fc3ff' opacity='.25'/%3E%3Cellipse cx='140' cy='13' rx='3' ry='4.5' fill='%234fc3ff'/%3E%3Canimate attributeName='opacity' values='1;.3;1' dur='1.8s' begin='1.35s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E") repeat-x;
    pointer-events: none;
}

/* Christmas: a cap of snow on the cards, and frosty titles */
:root[data-theme="christmas"] :is(.login-card, #appDashboard .panel) { border-top: 3px solid rgba(248, 251, 255, 0.85); }
:root[data-theme="christmas"] :is(.login-hero-title, #appDashboard .logo-text h1, .doc-hero h1) {
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 26px rgba(244, 197, 66, 0.35);
}

/* Christmas: fairy-light titles, one bulb per character (split up by app-state.js) */
:root[data-theme="christmas"] .fairy-char {
    text-shadow: 0 0 9px currentColor;
    animation: christmas-twinkle 2.4s ease-in-out infinite;
}
:root[data-theme="christmas"] .fairy-char:nth-child(5n+1) { color: #ff6b6b; }
:root[data-theme="christmas"] .fairy-char:nth-child(5n+2) { color: #ffd23f; animation-delay: -0.5s; }
:root[data-theme="christmas"] .fairy-char:nth-child(5n+3) { color: #3bd16f; animation-delay: -1s; }
:root[data-theme="christmas"] .fairy-char:nth-child(5n+4) { color: #4fc3ff; animation-delay: -1.5s; }
:root[data-theme="christmas"] .fairy-char:nth-child(5n+5) { color: #ff7ad9; animation-delay: -1.9s; }
@keyframes christmas-twinkle {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.4) drop-shadow(0 0 4px currentColor); }
}

/* Christmas: snow. Three sizes of flake on tiles of different sizes, each
   falling exactly one tile per loop so it never jumps */
:root[data-theme="christmas"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.75;
    background-image:
        radial-gradient(circle at 40px 60px, #ffffff 0 2.2px, transparent 3px),
        radial-gradient(circle at 210px 180px, #ffffff 0 1.8px, transparent 2.6px),
        radial-gradient(circle at 90px 150px, rgba(255, 255, 255, 0.85) 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 170px 30px, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 2px),
        radial-gradient(circle at 60px 100px, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.6px),
        radial-gradient(circle at 130px 20px, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.4px);
    background-size: 300px 300px, 300px 300px, 230px 230px, 230px 230px, 170px 170px, 170px 170px;
    animation: christmas-snow 18s linear infinite;
}
@keyframes christmas-snow {
    to { background-position: 0 300px, 0 300px, 0 230px, 0 230px, 0 170px, 0 170px; }
}

/* Christmas: Santa's sleigh and reindeer fly over every half minute or so.
   It rides on html::after, as body's pseudo-elements carry the snow and the snowmen. */
:root[data-theme="christmas"]::after {
    content: "";
    position: fixed;
    top: var(--sleigh-top, 14vh);
    left: 0;
    width: 360px;
    height: 90px;
    z-index: 99999;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='90' viewBox='0 0 360 90'%3E %3Cpath d='M104 50 C140 44, 170 46, 196 49 S250 50, 262 49 S310 48, 320 50' stroke='%23f4c542' stroke-width='1.3' fill='none'/%3E %3Cellipse cx='52' cy='22' rx='20' ry='15' fill='%237a5230'/%3E %3Cpath d='M40 12 q12 -8 24 0' stroke='%235a3a1e' stroke-width='3' fill='none'/%3E %3Crect x='44' y='4' width='9' height='9' rx='1.5' fill='%233bd16f' transform='rotate(-12 48 8)'/%3E %3Crect x='54' y='2' width='8' height='10' rx='1.5' fill='%234fc3ff' transform='rotate(10 58 7)'/%3E %3Ccircle cx='82' cy='26' r='12' fill='%23d62839'/%3E %3Crect x='71' y='30' width='22' height='4' fill='%231a1a1a'/%3E %3Crect x='79' y='29.5' width='6' height='5' fill='%23f4c542'/%3E %3Ccircle cx='86' cy='12' r='7.5' fill='%23f5c6a5'/%3E %3Cpath d='M79 13 q7 14 15 0 q-2 8 -7.5 9 q-5.5 -1 -7.5 -9z' fill='%23ffffff'/%3E %3Ccircle cx='89' cy='10.5' r='1' fill='%231a1a1a'/%3E %3Cpath d='M78 8 q6 -12 16 -2 q-2 -1 -3 0 z' fill='%23d62839'/%3E %3Cpath d='M78 8.5 h16' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E %3Cpath d='M80 5 q-6 -4 -9 2' stroke='%23d62839' stroke-width='4' stroke-linecap='round' fill='none'/%3E %3Ccircle cx='70' cy='8' r='3' fill='%23ffffff'/%3E %3Cpath d='M94 26 q8 8 14 22' stroke='%23d62839' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E %3Ccircle cx='108' cy='48' r='3' fill='%23ffffff'/%3E %3Cpath d='M22 30 h78 q14 0 16 -14 q4 0 4 5 q-2 22 -24 25 h-66 q-12 -2 -8 -16z' fill='%23c8102e'/%3E %3Cpath d='M24 36 h76 q10 0 14 -9' stroke='%23f4c542' stroke-width='2' fill='none'/%3E %3Cpath d='M14 64 h92 q16 0 20 -12' stroke='%23f4c542' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Cpath d='M14 64 q-8 0 -8 -8' stroke='%23f4c542' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Cpath d='M36 46 v18 M88 46 v18' stroke='%23f4c542' stroke-width='2.5'/%3E %3Cg transform='translate(128 0)'%3E %3Cpath d='M4 50 q-6 -2 -8 -8' stroke='%236b3f1f' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Cpath d='M8 56 l-8 14 M14 57 l-4 15 M34 57 l6 13 M40 55 l10 10' stroke='%235a3417' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E %3Cellipse cx='24' cy='50' rx='21' ry='9' fill='%238b5a2b'/%3E %3Cellipse cx='24' cy='54' rx='13' ry='4' fill='%23c49a6c'/%3E %3Cpath d='M40 46 q6 -10 10 -14' stroke='%238b5a2b' stroke-width='7' stroke-linecap='round' fill='none'/%3E %3Cellipse cx='55' cy='30' rx='9' ry='6.5' fill='%238b5a2b'/%3E %3Cpath d='M50 25 q-4 -10 -10 -12 M47 20 l-6 -1 M52 24 q2 -12 -2 -18 M51 14 l5 -4' stroke='%23e8d3a8' stroke-width='2' stroke-linecap='round' fill='none'/%3E %3Cpath d='M47 27 l-5 -3' stroke='%236b3f1f' stroke-width='3' stroke-linecap='round'/%3E %3Ccircle cx='56' cy='28' r='1.4' fill='%231a1a1a'/%3E %3Ccircle cx='64' cy='31' r='2.2' fill='%232b1a10'/%3E %3Cpath d='M36 47 h10' stroke='%23c8102e' stroke-width='3'/%3E %3Ccircle cx='41' cy='49' r='1.6' fill='%23f4c542'/%3E %3C/g%3E %3Cg transform='translate(196 0)'%3E %3Cpath d='M4 50 q-6 -2 -8 -8' stroke='%236b3f1f' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Cpath d='M8 56 l-8 14 M14 57 l-4 15 M34 57 l6 13 M40 55 l10 10' stroke='%235a3417' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E %3Cellipse cx='24' cy='50' rx='21' ry='9' fill='%238b5a2b'/%3E %3Cellipse cx='24' cy='54' rx='13' ry='4' fill='%23c49a6c'/%3E %3Cpath d='M40 46 q6 -10 10 -14' stroke='%238b5a2b' stroke-width='7' stroke-linecap='round' fill='none'/%3E %3Cellipse cx='55' cy='30' rx='9' ry='6.5' fill='%238b5a2b'/%3E %3Cpath d='M50 25 q-4 -10 -10 -12 M47 20 l-6 -1 M52 24 q2 -12 -2 -18 M51 14 l5 -4' stroke='%23e8d3a8' stroke-width='2' stroke-linecap='round' fill='none'/%3E %3Cpath d='M47 27 l-5 -3' stroke='%236b3f1f' stroke-width='3' stroke-linecap='round'/%3E %3Ccircle cx='56' cy='28' r='1.4' fill='%231a1a1a'/%3E %3Ccircle cx='64' cy='31' r='2.2' fill='%232b1a10'/%3E %3Cpath d='M36 47 h10' stroke='%23c8102e' stroke-width='3'/%3E %3Ccircle cx='41' cy='49' r='1.6' fill='%23f4c542'/%3E %3C/g%3E %3Cg transform='translate(264 0)'%3E %3Cpath d='M4 50 q-6 -2 -8 -8' stroke='%236b3f1f' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Cpath d='M8 56 l-8 14 M14 57 l-4 15 M34 57 l6 13 M40 55 l10 10' stroke='%235a3417' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E %3Cellipse cx='24' cy='50' rx='21' ry='9' fill='%238b5a2b'/%3E %3Cellipse cx='24' cy='54' rx='13' ry='4' fill='%23c49a6c'/%3E %3Cpath d='M40 46 q6 -10 10 -14' stroke='%238b5a2b' stroke-width='7' stroke-linecap='round' fill='none'/%3E %3Cellipse cx='55' cy='30' rx='9' ry='6.5' fill='%238b5a2b'/%3E %3Cpath d='M50 25 q-4 -10 -10 -12 M47 20 l-6 -1 M52 24 q2 -12 -2 -18 M51 14 l5 -4' stroke='%23e8d3a8' stroke-width='2' stroke-linecap='round' fill='none'/%3E %3Cpath d='M47 27 l-5 -3' stroke='%236b3f1f' stroke-width='3' stroke-linecap='round'/%3E %3Ccircle cx='56' cy='28' r='1.4' fill='%231a1a1a'/%3E %3Ccircle cx='64' cy='31' r='3.6' fill='%23ff2b2b'/%3E %3Ccircle cx='64' cy='31' r='7' fill='%23ff2b2b' opacity='.3'/%3E %3Cpath d='M36 47 h10' stroke='%23c8102e' stroke-width='3'/%3E %3Ccircle cx='41' cy='49' r='1.6' fill='%23f4c542'/%3E %3C/g%3E %3C/svg%3E") no-repeat center / contain;
    transform: translateX(-400px);
    animation: christmas-sleigh 34s linear infinite 3s;
}
/* themes.js picks a new route (direction, height, swoops) before every flight;
   the fallbacks are the route it flies without script */
@keyframes christmas-sleigh {
    0% { transform: translate(var(--sleigh-x0, -400px), var(--sleigh-y0, 0px)) scaleX(var(--sleigh-flip, 1)); }
    10% { transform: translate(var(--sleigh-x1, calc(25vw - 200px)), var(--sleigh-y1, -18px)) scaleX(var(--sleigh-flip, 1)); }
    20% { transform: translate(var(--sleigh-x2, calc(50vw - 180px)), var(--sleigh-y2, 6px)) scaleX(var(--sleigh-flip, 1)); }
    30% { transform: translate(var(--sleigh-x3, calc(75vw - 160px)), var(--sleigh-y3, -14px)) scaleX(var(--sleigh-flip, 1)); }
    40%, 100% { transform: translate(var(--sleigh-x4, calc(100vw + 40px)), var(--sleigh-y4, -30px)) scaleX(var(--sleigh-flip, 1)); }
}

/* Christmas: two snowmen keep watch from the bottom corners */
:root[data-theme="christmas"] body::before {
    content: "";
    position: fixed;
    inset: auto 0 0 0;
    height: 120px;
    z-index: 99998;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130' viewBox='0 0 90 130'%3E %3Cellipse cx='45' cy='124' rx='42' ry='6' fill='%23dfe9f7'/%3E %3Cpath d='M22 70 l-18 -14 M6 58 l-4 -6 M6 58 l-6 1' stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E %3Cpath d='M68 70 l18 -16 M84 56 l2 -7 M84 56 l6 0' stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E %3Ccircle cx='45' cy='100' r='24' fill='%23f8fbff'/%3E %3Ccircle cx='45' cy='68' r='18' fill='%23f8fbff'/%3E %3Ccircle cx='45' cy='40' r='14' fill='%23f8fbff'/%3E %3Ccircle cx='45' cy='63' r='2.2' fill='%231b1b1f'/%3E%3Ccircle cx='45' cy='71' r='2.2' fill='%231b1b1f'/%3E%3Ccircle cx='45' cy='92' r='2.4' fill='%231b1b1f'/%3E%3Ccircle cx='45' cy='101' r='2.4' fill='%231b1b1f'/%3E %3Ccircle cx='40' cy='37' r='1.8' fill='%231b1b1f'/%3E%3Ccircle cx='50' cy='37' r='1.8' fill='%231b1b1f'/%3E %3Cpath d='M45 41 l12 3 l-12 1.5z' fill='%23ff8a1f'/%3E %3Cpath d='M38 47 q7 4 14 0' stroke='%231b1b1f' stroke-width='1.6' stroke-dasharray='1.5 2.5' fill='none' stroke-linecap='round'/%3E %3Cpath d='M31 52 q14 6 28 0 v5 q-14 6 -28 0z' fill='%23d62839'/%3E %3Cpath d='M52 56 l4 16 l-7 1 l-1 -15z' fill='%23d62839'/%3E %3Cpath d='M50 70 l1 3 M53 70 l1 3' stroke='%23ffffff' stroke-width='1.2'/%3E %3Crect x='30' y='7' width='30' height='20' rx='2' fill='%231b1b1f'/%3E%3Crect x='24' y='25' width='42' height='5' rx='2' fill='%231b1b1f'/%3E%3Crect x='30' y='20' width='30' height='4' fill='%23c8102e'/%3E%3Ccircle cx='54' cy='22' r='3' fill='%233bd16f'/%3E%3Ccircle cx='57' cy='19' r='2' fill='%23ff3b3b'/%3E %3C/svg%3E") left 14px bottom 0 / auto 120px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130' viewBox='0 0 90 130'%3E %3Cellipse cx='45' cy='124' rx='42' ry='6' fill='%23dfe9f7'/%3E %3Cpath d='M22 70 l-18 -14 M6 58 l-4 -6 M6 58 l-6 1' stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E %3Cpath d='M68 70 l18 -16 M84 56 l2 -7 M84 56 l6 0' stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E %3Ccircle cx='45' cy='100' r='24' fill='%23f8fbff'/%3E %3Ccircle cx='45' cy='68' r='18' fill='%23f8fbff'/%3E %3Ccircle cx='45' cy='40' r='14' fill='%23f8fbff'/%3E %3Ccircle cx='45' cy='63' r='2.2' fill='%231b1b1f'/%3E%3Ccircle cx='45' cy='71' r='2.2' fill='%231b1b1f'/%3E%3Ccircle cx='45' cy='92' r='2.4' fill='%231b1b1f'/%3E%3Ccircle cx='45' cy='101' r='2.4' fill='%231b1b1f'/%3E %3Ccircle cx='40' cy='37' r='1.8' fill='%231b1b1f'/%3E%3Ccircle cx='50' cy='37' r='1.8' fill='%231b1b1f'/%3E %3Cpath d='M45 41 l12 3 l-12 1.5z' fill='%23ff8a1f'/%3E %3Cpath d='M38 47 q7 4 14 0' stroke='%231b1b1f' stroke-width='1.6' stroke-dasharray='1.5 2.5' fill='none' stroke-linecap='round'/%3E %3Cpath d='M31 52 q14 6 28 0 v5 q-14 6 -28 0z' fill='%231f9d55'/%3E %3Cpath d='M52 56 l4 16 l-7 1 l-1 -15z' fill='%231f9d55'/%3E %3Cpath d='M50 70 l1 3 M53 70 l1 3' stroke='%23ffffff' stroke-width='1.2'/%3E %3Cpath d='M28 28 q17 -26 34 0z' fill='%231f9d55'/%3E%3Crect x='26' y='24' width='38' height='6' rx='3' fill='%23ffffff'/%3E%3Ccircle cx='45' cy='10' r='5' fill='%23ffffff'/%3E %3C/svg%3E") right 14px bottom 0 / auto 95px no-repeat;
}
/* On the map itself they would stand on the sidebars' controls, so there they stay home */
:root[data-theme="christmas"] body:has(#appDashboard:not([style*="none"]))::before { display: none; }

:root[data-theme="halloween"] {
    --bg-primary: #0d0812; --bg-secondary: #140c1b; --bg-tertiary: #1f1229; --bg-card: #180e20; --bg-hover: #2a1836;
    --accent-primary: #ff7a1a; --accent-secondary: #9b5de5; --accent-glow: rgba(255, 122, 26, 0.35);
    --accent-rgb: 255, 122, 26; --accent-sky: #a3e635; --accent-sky-rgb: 163, 230, 53; --accent-text: #ffe6d1;
    --surface-rgb: 24, 14, 32; --surface-2-rgb: 18, 10, 24; --chrome-rgb: 6, 3, 9; --input-bg: #120a18;
    --page-grad-1: #2a0f3a; --page-grad-2: #050208;
    --text-primary: #f6eedd; --text-secondary: #cbb8a6; --text-muted: #978499;
    --border-glow: rgba(255, 122, 26, 0.25);
    --gradient-header: linear-gradient(135deg, #0d0812 0%, #1f1229 100%);
    --gradient-accent: linear-gradient(135deg, #ff7a1a 0%, #e85d04 100%);
}

/* Halloween: the big titles in Creepster, glowing like a guttering candle */
:root[data-theme="halloween"] :is(.main-header, .login-page-header, .doc-bar) {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, #ff7a1a 20%, #9b5de5 80%, transparent) 1;
}
:root[data-theme="halloween"] :is(.login-hero-title, #appDashboard .logo-text h1, .doc-hero h1) {
    font-family: 'Creepster', var(--font-display);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #ff9a3d;
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: halloween-flicker 4s infinite;
    text-shadow: 0 0 6px rgba(255, 122, 26, 0.9), 0 0 22px rgba(255, 122, 26, 0.45);
}
@keyframes halloween-flicker {
    0%, 100% { text-shadow: 0 0 6px rgba(255, 122, 26, 0.9), 0 0 22px rgba(255, 122, 26, 0.45); }
    41% { text-shadow: 0 0 6px rgba(255, 122, 26, 0.9), 0 0 22px rgba(255, 122, 26, 0.45); }
    43% { text-shadow: 0 0 3px rgba(255, 122, 26, 0.5), 0 0 10px rgba(255, 122, 26, 0.2); }
    45% { text-shadow: 0 0 8px rgba(255, 150, 60, 1), 0 0 28px rgba(255, 122, 26, 0.6); }
    48% { text-shadow: 0 0 4px rgba(255, 122, 26, 0.6), 0 0 14px rgba(255, 122, 26, 0.3); }
    52% { text-shadow: 0 0 6px rgba(255, 122, 26, 0.9), 0 0 22px rgba(255, 122, 26, 0.45); }
    78% { text-shadow: 0 0 7px rgba(255, 140, 50, 0.95), 0 0 26px rgba(255, 122, 26, 0.55); }
}

/* Halloween: cobwebs in the top corners (with a spider), fog along the bottom */
:root[data-theme="halloween"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath d='M0 0 L175.0 0.0 M0 0 L169.0 45.3 M0 0 L151.6 87.5 M0 0 L123.7 123.7 M0 0 L87.5 151.6 M0 0 L45.3 169.0 M0 0 L0.0 175.0 M32.0 0.0 Q27.3 3.6 30.9 8.3 Q25.4 10.5 27.7 16.0 Q21.8 16.8 22.6 22.6 Q16.8 21.8 16.0 27.7 Q10.5 25.4 8.3 30.9 Q3.6 27.3 0.0 32.0 M64.0 0.0 Q54.6 7.2 61.8 16.6 Q50.9 21.1 55.4 32.0 Q43.7 33.5 45.3 45.3 Q33.5 43.7 32.0 55.4 Q21.1 50.9 16.6 61.8 Q7.2 54.6 0.0 64.0 M98.0 0.0 Q83.6 11.0 94.7 25.4 Q77.9 32.3 84.9 49.0 Q66.9 51.3 69.3 69.3 Q51.3 66.9 49.0 84.9 Q32.3 77.9 25.4 94.7 Q11.0 83.6 0.0 98.0 M134.0 0.0 Q114.3 15.0 129.4 34.7 Q106.5 44.1 116.0 67.0 Q91.4 70.2 94.8 94.8 Q70.2 91.4 67.0 116.0 Q44.1 106.5 34.7 129.4 Q15.0 114.3 0.0 134.0 M168.0 0.0 Q143.2 18.9 162.3 43.5 Q133.5 55.3 145.5 84.0 Q114.6 88.0 118.8 118.8 Q88.0 114.6 84.0 145.5 Q55.3 133.5 43.5 162.3 Q18.9 143.2 0.0 168.0' stroke='rgba(236,226,255,.24)' stroke-width='1' fill='none'/%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 18;0 0' dur='5s' repeatCount='indefinite'/%3E%3Cline x1='112' y1='0' x2='112' y2='96' stroke='rgba(236,226,255,.35)' stroke-width='.8'/%3E%3Cg transform='translate(112 100)' stroke='%23d8cce6' stroke-width='1.2' fill='none'%3E%3Cpath d='M0 0 L-9 -4 L-12 1' /%3E%3Cpath d='M0 0 L-9 -1 L-12 4' /%3E%3Cpath d='M0 0 L-9 2 L-12 7' /%3E%3Cpath d='M0 0 L-9 5 L-12 10' /%3E%3Cpath d='M0 0 L9 -4 L12 1' /%3E%3Cpath d='M0 0 L9 -1 L12 4' /%3E%3Cpath d='M0 0 L9 2 L12 7' /%3E%3Cpath d='M0 0 L9 5 L12 10' /%3E%3C/g%3E%3Ccircle cx='112' cy='101' r='4.5' fill='%23d8cce6'/%3E%3Ccircle cx='112' cy='95.5' r='2.6' fill='%23d8cce6'/%3E%3C/g%3E%3C/svg%3E") top left / 140px 140px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg transform='translate(180 0) scale(-1 1)'%3E%3Cpath d='M0 0 L175.0 0.0 M0 0 L169.0 45.3 M0 0 L151.6 87.5 M0 0 L123.7 123.7 M0 0 L87.5 151.6 M0 0 L45.3 169.0 M0 0 L0.0 175.0 M32.0 0.0 Q27.3 3.6 30.9 8.3 Q25.4 10.5 27.7 16.0 Q21.8 16.8 22.6 22.6 Q16.8 21.8 16.0 27.7 Q10.5 25.4 8.3 30.9 Q3.6 27.3 0.0 32.0 M64.0 0.0 Q54.6 7.2 61.8 16.6 Q50.9 21.1 55.4 32.0 Q43.7 33.5 45.3 45.3 Q33.5 43.7 32.0 55.4 Q21.1 50.9 16.6 61.8 Q7.2 54.6 0.0 64.0 M98.0 0.0 Q83.6 11.0 94.7 25.4 Q77.9 32.3 84.9 49.0 Q66.9 51.3 69.3 69.3 Q51.3 66.9 49.0 84.9 Q32.3 77.9 25.4 94.7 Q11.0 83.6 0.0 98.0 M134.0 0.0 Q114.3 15.0 129.4 34.7 Q106.5 44.1 116.0 67.0 Q91.4 70.2 94.8 94.8 Q70.2 91.4 67.0 116.0 Q44.1 106.5 34.7 129.4 Q15.0 114.3 0.0 134.0 M168.0 0.0 Q143.2 18.9 162.3 43.5 Q133.5 55.3 145.5 84.0 Q114.6 88.0 118.8 118.8 Q88.0 114.6 84.0 145.5 Q55.3 133.5 43.5 162.3 Q18.9 143.2 0.0 168.0' stroke='rgba(236,226,255,.24)' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E") top right / 140px 140px no-repeat,
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
}
:root[data-theme="halloween"] body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    z-index: 99999;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 420px 140px at 30% 100%, rgba(210, 195, 240, 0.13), transparent 70%),
        radial-gradient(ellipse 360px 120px at 70% 100%, rgba(170, 150, 210, 0.11), transparent 70%);
    background-size: 1400px 100%, 900px 100%;
    background-repeat: repeat-x;
    animation: halloween-fog 70s linear infinite;
}
@keyframes halloween-fog {
    to { background-position: 1400px 0, -900px 0; }
}

/* Halloween: a colony of bats swoops across every 28 seconds (html::after) */
:root[data-theme="halloween"]::after {
    content: "";
    position: fixed;
    top: 18vh;
    left: 0;
    width: 300px;
    height: 120px;
    z-index: 99999;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120' viewBox='0 0 300 120'%3E%3Cg transform='translate(40 50) scale(1.3)' fill='%2307030b' stroke='rgba(255,122,26,.45)' stroke-width='.8'%3E%3Cpath d='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z'%3E%3Canimate attributeName='d' values='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z;M0 0 C-6 4 -14 10 -20 16 C-14 12 -10 10 -8 12 C-6 6 -3 6 0 6 C3 6 6 6 8 12 C10 10 14 12 20 16 C14 10 6 4 0 0Z;M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z' dur='.32s' begin='0s' repeatCount='indefinite'/%3E%3C/path%3E%3Cellipse cx='0' cy='2' rx='3.2' ry='5'/%3E%3Cpath d='M-2.5 -2 l-1 -4 l2 2z M2.5 -2 l1 -4 l-2 2z'/%3E%3C/g%3E%3Cg transform='translate(95 28) scale(1.0)' fill='%2307030b' stroke='rgba(255,122,26,.45)' stroke-width='.8'%3E%3Cpath d='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z'%3E%3Canimate attributeName='d' values='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z;M0 0 C-6 4 -14 10 -20 16 C-14 12 -10 10 -8 12 C-6 6 -3 6 0 6 C3 6 6 6 8 12 C10 10 14 12 20 16 C14 10 6 4 0 0Z;M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z' dur='.32s' begin='0.1s' repeatCount='indefinite'/%3E%3C/path%3E%3Cellipse cx='0' cy='2' rx='3.2' ry='5'/%3E%3Cpath d='M-2.5 -2 l-1 -4 l2 2z M2.5 -2 l1 -4 l-2 2z'/%3E%3C/g%3E%3Cg transform='translate(150 62) scale(1.5)' fill='%2307030b' stroke='rgba(255,122,26,.45)' stroke-width='.8'%3E%3Cpath d='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z'%3E%3Canimate attributeName='d' values='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z;M0 0 C-6 4 -14 10 -20 16 C-14 12 -10 10 -8 12 C-6 6 -3 6 0 6 C3 6 6 6 8 12 C10 10 14 12 20 16 C14 10 6 4 0 0Z;M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z' dur='.32s' begin='0.05s' repeatCount='indefinite'/%3E%3C/path%3E%3Cellipse cx='0' cy='2' rx='3.2' ry='5'/%3E%3Cpath d='M-2.5 -2 l-1 -4 l2 2z M2.5 -2 l1 -4 l-2 2z'/%3E%3C/g%3E%3Cg transform='translate(205 35) scale(0.9)' fill='%2307030b' stroke='rgba(255,122,26,.45)' stroke-width='.8'%3E%3Cpath d='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z'%3E%3Canimate attributeName='d' values='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z;M0 0 C-6 4 -14 10 -20 16 C-14 12 -10 10 -8 12 C-6 6 -3 6 0 6 C3 6 6 6 8 12 C10 10 14 12 20 16 C14 10 6 4 0 0Z;M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z' dur='.32s' begin='0.17s' repeatCount='indefinite'/%3E%3C/path%3E%3Cellipse cx='0' cy='2' rx='3.2' ry='5'/%3E%3Cpath d='M-2.5 -2 l-1 -4 l2 2z M2.5 -2 l1 -4 l-2 2z'/%3E%3C/g%3E%3Cg transform='translate(255 70) scale(1.1)' fill='%2307030b' stroke='rgba(255,122,26,.45)' stroke-width='.8'%3E%3Cpath d='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z'%3E%3Canimate attributeName='d' values='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z;M0 0 C-6 4 -14 10 -20 16 C-14 12 -10 10 -8 12 C-6 6 -3 6 0 6 C3 6 6 6 8 12 C10 10 14 12 20 16 C14 10 6 4 0 0Z;M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z' dur='.32s' begin='0.08s' repeatCount='indefinite'/%3E%3C/path%3E%3Cellipse cx='0' cy='2' rx='3.2' ry='5'/%3E%3Cpath d='M-2.5 -2 l-1 -4 l2 2z M2.5 -2 l1 -4 l-2 2z'/%3E%3C/g%3E%3Cg transform='translate(120 90) scale(0.8)' fill='%2307030b' stroke='rgba(255,122,26,.45)' stroke-width='.8'%3E%3Cpath d='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z'%3E%3Canimate attributeName='d' values='M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z;M0 0 C-6 4 -14 10 -20 16 C-14 12 -10 10 -8 12 C-6 6 -3 6 0 6 C3 6 6 6 8 12 C10 10 14 12 20 16 C14 10 6 4 0 0Z;M0 0 C-6 -10 -14 -12 -22 -8 C-18 -4 -16 0 -18 4 C-12 0 -6 2 0 4 C6 2 12 0 18 4 C16 0 18 -4 22 -8 C14 -12 6 -10 0 0Z' dur='.32s' begin='0.2s' repeatCount='indefinite'/%3E%3C/path%3E%3Cellipse cx='0' cy='2' rx='3.2' ry='5'/%3E%3Cpath d='M-2.5 -2 l-1 -4 l2 2z M2.5 -2 l1 -4 l-2 2z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateX(calc(100vw + 40px));
    animation: halloween-bats 28s linear infinite 5s;
}
@keyframes halloween-bats {
    0% { transform: translate(calc(100vw + 40px), 0) scale(1); }
    8% { transform: translate(calc(75vw - 150px), 60px) scale(1.1); }
    16% { transform: translate(calc(50vw - 150px), -20px) scale(0.95); }
    24% { transform: translate(calc(25vw - 150px), 50px) scale(1.05); }
    32%, 100% { transform: translate(-340px, -10px) scale(1); }
}

/* Halloween: a moon, a ghost that comes and goes, eyes blinking in the dark and
   two jack-o'-lanterns (html::before). Kept off the map, where they would sit
   on the sidebars. */
:root[data-theme="halloween"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99997;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='80' cy='80' r='76' fill='%23f3ecd2' opacity='.08'/%3E%3Ccircle cx='80' cy='80' r='64' fill='%23f3ecd2' opacity='.12'/%3E %3Ccircle cx='80' cy='80' r='50' fill='%23efe6c6'/%3E%3Ccircle cx='64' cy='66' r='9' fill='%23ddd2ad'/%3E%3Ccircle cx='96' cy='92' r='12' fill='%23ddd2ad'/%3E %3Ccircle cx='90' cy='60' r='5' fill='%23ddd2ad'/%3E%3Ccircle cx='66' cy='98' r='6' fill='%23ddd2ad'/%3E%3C/svg%3E") right 12% top 84px / 150px 150px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='190'%3E%3Cg transform='translate(10 40)'%3E%3CanimateTransform attributeName='transform' type='translate' values='10 60;30 20;0 0;20 40;10 60' dur='16s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;.8;.8;.8;0;0' keyTimes='0;.1;.25;.5;.7;.85;1' dur='16s' repeatCount='indefinite'/%3E %3Cpath d='M20 60 Q20 10 60 10 Q100 10 100 60 L100 110 Q93 100 86 110 Q79 120 72 110 Q65 100 58 110 Q51 120 44 110 Q37 100 30 110 Q25 116 20 110Z' fill='rgba(240,236,255,.82)'/%3E%3Cpath d='M20 100 Q60 116 100 100' stroke='rgba(200,190,230,.5)' stroke-width='4' fill='none'/%3E %3Cellipse cx='46' cy='52' rx='7' ry='10' fill='%231a0d24'/%3E%3Cellipse cx='74' cy='52' rx='7' ry='10' fill='%231a0d24'/%3E %3Cellipse cx='60' cy='80' rx='8' ry='11' fill='%231a0d24'/%3E%3Cpath d='M8 70 q6 -18 14 -8 M112 70 q-6 -18 -14 -8' stroke='rgba(240,236,255,.82)' stroke-width='8' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E") right 4px top 42% / 104px 141px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='120'%3E%3Cg transform='translate(22 30) scale(1)'%3E%3Cellipse cx='0' cy='0' rx='8' ry='5' fill='%23c6ff4a'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='5s' begin='0s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='0' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='5s' begin='0s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='8' ry='5' fill='%23c6ff4a'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='5s' begin='0s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='5s' begin='0s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='translate(34 92) scale(0.75)'%3E%3Cellipse cx='0' cy='0' rx='8' ry='5' fill='%23ff6a1a'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='7s' begin='2.3s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='0' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='7s' begin='2.3s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='8' ry='5' fill='%23ff6a1a'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='7s' begin='2.3s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3Canimate attributeName='ry' values='5;5;.4;5;5' keyTimes='0;.9;.94;.98;1' dur='7s' begin='2.3s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E") left 6px top 48% / 72px 96px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'%3E %3Cellipse cx='60' cy='104' rx='50' ry='5' fill='%23000' opacity='.45'/%3E %3Cpath d='M56 22 q-2 -12 8 -18 l3 4 q-6 4 -5 14z' fill='%234a6b1f'/%3E %3Cellipse cx='36' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E%3Cellipse cx='84' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E %3Cellipse cx='60' cy='64' rx='30' ry='40' fill='%23f2701a'/%3E %3Cpath d='M60 26 v76 M44 30 q-8 34 0 70 M76 30 q8 34 0 70' stroke='%23c24d08' stroke-width='2' fill='none' opacity='.7'/%3E %3Cg fill='%23ffd23f'%3E%3Canimate attributeName='opacity' values='1;.72;.95;.8;1;.88;1' dur='1.4s' repeatCount='indefinite'/%3E%3Cpath d='M36 52 l10 -14 l10 14z M64 52 l10 -14 l10 14z M55 64 l5 -8 l5 8z'/%3E %3Cpath d='M32 74 q28 22 56 0 l-6 6 l-4 -5 l-6 7 l-5 -6 l-6 7 l-5 -6 l-6 7 l-5 -6 l-4 5z'/%3E%3C/g%3E%3C/svg%3E") left 14px bottom 6px / 120px 110px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'%3E %3Cellipse cx='60' cy='104' rx='50' ry='5' fill='%23000' opacity='.45'/%3E %3Cpath d='M56 22 q-2 -12 8 -18 l3 4 q-6 4 -5 14z' fill='%234a6b1f'/%3E %3Cellipse cx='36' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E%3Cellipse cx='84' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E %3Cellipse cx='60' cy='64' rx='30' ry='40' fill='%23f2701a'/%3E %3Cpath d='M60 26 v76 M44 30 q-8 34 0 70 M76 30 q8 34 0 70' stroke='%23c24d08' stroke-width='2' fill='none' opacity='.7'/%3E %3Cg fill='%23ffd23f'%3E%3Canimate attributeName='opacity' values='1;.72;.95;.8;1;.88;1' dur='1.4s' repeatCount='indefinite'/%3E%3Cpath d='M36 52 l10 -14 l10 14z M64 52 l10 -14 l10 14z M55 64 l5 -8 l5 8z'/%3E %3Cpath d='M32 74 q28 22 56 0 l-6 6 l-4 -5 l-6 7 l-5 -6 l-6 7 l-5 -6 l-6 7 l-5 -6 l-4 5z'/%3E%3C/g%3E%3C/svg%3E") right 18px bottom 6px / 84px 77px no-repeat;
}
:root[data-theme="halloween"]:has(#appDashboard:not([style*="none"]))::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="christmas"]::after { display: none; }
    :root[data-theme="christmas"] .fairy-char { animation: none; }
    :root[data-theme="halloween"]::after { display: none; }
    :root[data-theme="halloween"]::before {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='80' cy='80' r='76' fill='%23f3ecd2' opacity='.08'/%3E%3Ccircle cx='80' cy='80' r='64' fill='%23f3ecd2' opacity='.12'/%3E %3Ccircle cx='80' cy='80' r='50' fill='%23efe6c6'/%3E%3Ccircle cx='64' cy='66' r='9' fill='%23ddd2ad'/%3E%3Ccircle cx='96' cy='92' r='12' fill='%23ddd2ad'/%3E %3Ccircle cx='90' cy='60' r='5' fill='%23ddd2ad'/%3E%3Ccircle cx='66' cy='98' r='6' fill='%23ddd2ad'/%3E%3C/svg%3E") right 12% top 84px / 150px 150px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='190'%3E%3Cg transform='translate(10 40)' opacity='.55'%3E %3Cpath d='M20 60 Q20 10 60 10 Q100 10 100 60 L100 110 Q93 100 86 110 Q79 120 72 110 Q65 100 58 110 Q51 120 44 110 Q37 100 30 110 Q25 116 20 110Z' fill='rgba(240,236,255,.82)'/%3E%3Cpath d='M20 100 Q60 116 100 100' stroke='rgba(200,190,230,.5)' stroke-width='4' fill='none'/%3E %3Cellipse cx='46' cy='52' rx='7' ry='10' fill='%231a0d24'/%3E%3Cellipse cx='74' cy='52' rx='7' ry='10' fill='%231a0d24'/%3E %3Cellipse cx='60' cy='80' rx='8' ry='11' fill='%231a0d24'/%3E%3Cpath d='M8 70 q6 -18 14 -8 M112 70 q-6 -18 -14 -8' stroke='rgba(240,236,255,.82)' stroke-width='8' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E") right 4px top 42% / 104px 141px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='120'%3E%3Cg transform='translate(22 30) scale(1)'%3E%3Cellipse cx='0' cy='0' rx='8' ry='5' fill='%23c6ff4a'%3E%3C/ellipse%3E%3Cellipse cx='0' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='8' ry='5' fill='%23c6ff4a'%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='translate(34 92) scale(0.75)'%3E%3Cellipse cx='0' cy='0' rx='8' ry='5' fill='%23ff6a1a'%3E%3C/ellipse%3E%3Cellipse cx='0' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='8' ry='5' fill='%23ff6a1a'%3E%3C/ellipse%3E%3Cellipse cx='24' cy='0' rx='1.6' ry='4' fill='%230a0510'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E") left 6px top 48% / 72px 96px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'%3E %3Cellipse cx='60' cy='104' rx='50' ry='5' fill='%23000' opacity='.45'/%3E %3Cpath d='M56 22 q-2 -12 8 -18 l3 4 q-6 4 -5 14z' fill='%234a6b1f'/%3E %3Cellipse cx='36' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E%3Cellipse cx='84' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E %3Cellipse cx='60' cy='64' rx='30' ry='40' fill='%23f2701a'/%3E %3Cpath d='M60 26 v76 M44 30 q-8 34 0 70 M76 30 q8 34 0 70' stroke='%23c24d08' stroke-width='2' fill='none' opacity='.7'/%3E %3Cg fill='%23ffd23f'%3E%3Cpath d='M36 52 l10 -14 l10 14z M64 52 l10 -14 l10 14z M55 64 l5 -8 l5 8z'/%3E %3Cpath d='M32 74 q28 22 56 0 l-6 6 l-4 -5 l-6 7 l-5 -6 l-6 7 l-5 -6 l-6 7 l-5 -6 l-4 5z'/%3E%3C/g%3E%3C/svg%3E") left 14px bottom 6px / 120px 110px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'%3E %3Cellipse cx='60' cy='104' rx='50' ry='5' fill='%23000' opacity='.45'/%3E %3Cpath d='M56 22 q-2 -12 8 -18 l3 4 q-6 4 -5 14z' fill='%234a6b1f'/%3E %3Cellipse cx='36' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E%3Cellipse cx='84' cy='64' rx='26' ry='38' fill='%23d9570b'/%3E %3Cellipse cx='60' cy='64' rx='30' ry='40' fill='%23f2701a'/%3E %3Cpath d='M60 26 v76 M44 30 q-8 34 0 70 M76 30 q8 34 0 70' stroke='%23c24d08' stroke-width='2' fill='none' opacity='.7'/%3E %3Cg fill='%23ffd23f'%3E%3Cpath d='M36 52 l10 -14 l10 14z M64 52 l10 -14 l10 14z M55 64 l5 -8 l5 8z'/%3E %3Cpath d='M32 74 q28 22 56 0 l-6 6 l-4 -5 l-6 7 l-5 -6 l-6 7 l-5 -6 l-6 7 l-5 -6 l-4 5z'/%3E%3C/g%3E%3C/svg%3E") right 18px bottom 6px / 84px 77px no-repeat;
    }
    :root[data-theme="christmas"] body::after,
    :root[data-theme="halloween"] body::after,
    :root[data-theme="halloween"] :is(.login-hero-title, #appDashboard .logo-text h1, .doc-hero h1) { animation: none; }
    :root[data-theme="christmas"] :is(.main-header, .login-page-header, .doc-bar)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24'%3E%3Cpath d='M0 3 Q40 13 80 3 Q120 13 160 3' stroke='%2326324a' stroke-width='1.5' fill='none'/%3E%3Crect x='18.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='20' cy='13' r='7' fill='%23ff3b3b' opacity='.25'/%3E%3Cellipse cx='20' cy='13' rx='3' ry='4.5' fill='%23ff3b3b'/%3E%3C/g%3E%3Crect x='58.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='60' cy='13' r='7' fill='%23ffd23f' opacity='.25'/%3E%3Cellipse cx='60' cy='13' rx='3' ry='4.5' fill='%23ffd23f'/%3E%3C/g%3E%3Crect x='98.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='100' cy='13' r='7' fill='%233bd16f' opacity='.25'/%3E%3Cellipse cx='100' cy='13' rx='3' ry='4.5' fill='%233bd16f'/%3E%3C/g%3E%3Crect x='138.5' y='6' width='3' height='3' fill='%2326324a'/%3E%3Cg%3E%3Ccircle cx='140' cy='13' r='7' fill='%234fc3ff' opacity='.25'/%3E%3Cellipse cx='140' cy='13' rx='3' ry='4.5' fill='%234fc3ff'/%3E%3C/g%3E%3C/svg%3E"); }
    :root[data-theme="halloween"] body::before {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath d='M0 0 L175.0 0.0 M0 0 L169.0 45.3 M0 0 L151.6 87.5 M0 0 L123.7 123.7 M0 0 L87.5 151.6 M0 0 L45.3 169.0 M0 0 L0.0 175.0 M32.0 0.0 Q27.3 3.6 30.9 8.3 Q25.4 10.5 27.7 16.0 Q21.8 16.8 22.6 22.6 Q16.8 21.8 16.0 27.7 Q10.5 25.4 8.3 30.9 Q3.6 27.3 0.0 32.0 M64.0 0.0 Q54.6 7.2 61.8 16.6 Q50.9 21.1 55.4 32.0 Q43.7 33.5 45.3 45.3 Q33.5 43.7 32.0 55.4 Q21.1 50.9 16.6 61.8 Q7.2 54.6 0.0 64.0 M98.0 0.0 Q83.6 11.0 94.7 25.4 Q77.9 32.3 84.9 49.0 Q66.9 51.3 69.3 69.3 Q51.3 66.9 49.0 84.9 Q32.3 77.9 25.4 94.7 Q11.0 83.6 0.0 98.0 M134.0 0.0 Q114.3 15.0 129.4 34.7 Q106.5 44.1 116.0 67.0 Q91.4 70.2 94.8 94.8 Q70.2 91.4 67.0 116.0 Q44.1 106.5 34.7 129.4 Q15.0 114.3 0.0 134.0 M168.0 0.0 Q143.2 18.9 162.3 43.5 Q133.5 55.3 145.5 84.0 Q114.6 88.0 118.8 118.8 Q88.0 114.6 84.0 145.5 Q55.3 133.5 43.5 162.3 Q18.9 143.2 0.0 168.0' stroke='rgba(236,226,255,.24)' stroke-width='1' fill='none'/%3E%3C/svg%3E") top left / 140px 140px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg transform='translate(180 0) scale(-1 1)'%3E%3Cpath d='M0 0 L175.0 0.0 M0 0 L169.0 45.3 M0 0 L151.6 87.5 M0 0 L123.7 123.7 M0 0 L87.5 151.6 M0 0 L45.3 169.0 M0 0 L0.0 175.0 M32.0 0.0 Q27.3 3.6 30.9 8.3 Q25.4 10.5 27.7 16.0 Q21.8 16.8 22.6 22.6 Q16.8 21.8 16.0 27.7 Q10.5 25.4 8.3 30.9 Q3.6 27.3 0.0 32.0 M64.0 0.0 Q54.6 7.2 61.8 16.6 Q50.9 21.1 55.4 32.0 Q43.7 33.5 45.3 45.3 Q33.5 43.7 32.0 55.4 Q21.1 50.9 16.6 61.8 Q7.2 54.6 0.0 64.0 M98.0 0.0 Q83.6 11.0 94.7 25.4 Q77.9 32.3 84.9 49.0 Q66.9 51.3 69.3 69.3 Q51.3 66.9 49.0 84.9 Q32.3 77.9 25.4 94.7 Q11.0 83.6 0.0 98.0 M134.0 0.0 Q114.3 15.0 129.4 34.7 Q106.5 44.1 116.0 67.0 Q91.4 70.2 94.8 94.8 Q70.2 91.4 67.0 116.0 Q44.1 106.5 34.7 129.4 Q15.0 114.3 0.0 134.0 M168.0 0.0 Q143.2 18.9 162.3 43.5 Q133.5 55.3 145.5 84.0 Q114.6 88.0 118.8 118.8 Q88.0 114.6 84.0 145.5 Q55.3 133.5 43.5 162.3 Q18.9 143.2 0.0 168.0' stroke='rgba(236,226,255,.24)' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E") top right / 140px 140px no-repeat,
        radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
    }
}

/* ---- Accessibility ---- */

:root[data-theme="highcontrast"] {
    --bg-primary: #000000; --bg-secondary: #000000; --bg-tertiary: #0d0d0d; --bg-card: #000000; --bg-hover: #1f1f1f;
    --accent-primary: #ffd400; --accent-secondary: #00e5ff; --accent-glow: transparent;
    --accent-rgb: 255, 212, 0; --accent-sky: #00e5ff; --accent-sky-rgb: 0, 229, 255; --accent-text: #ffffff;
    --surface-rgb: 0, 0, 0; --surface-2-rgb: 0, 0, 0; --chrome-rgb: 0, 0, 0; --input-bg: #000000;
    --page-grad-1: #000000; --page-grad-2: #000000;
    --text-primary: #ffffff; --text-secondary: #f0f0f0; --text-muted: #cccccc;
    --border-color: rgba(255, 255, 255, 0.6);
    --border-glow: rgba(255, 212, 0, 0.7);
    --gradient-header: linear-gradient(#000000, #000000);
    --gradient-card: none;
    --gradient-accent: linear-gradient(#ffd400, #ffd400);
    --shadow-glow: none;
    --good: #4ade80; --good-rgb: 74, 222, 128; --bad: #ff6b6b; --bad-rgb: 255, 107, 107;
}

/* High contrast: no blur or glow, and a thick focus ring */
:root[data-theme="highcontrast"] * { backdrop-filter: none !important; }
:root[data-theme="highcontrast"] :focus-visible { outline: 3px solid #00e5ff !important; outline-offset: 2px; }

/* Colourblind-safe: default colours, but good/bad is blue/orange instead of green/red */
:root[data-theme="colourblind"] {
    --good: #56b4e9; --good-rgb: 86, 180, 233;
    --good-strong: #3b9fe0; --good-strong-rgb: 59, 159, 224;
    --bad: #ff7a3d; --bad-rgb: 255, 122, 61;
    --bad-strong: #e5611f; --bad-strong-rgb: 229, 97, 31;
}

/* ---- Light themes ----
   Pages go light; the map and its tooltip stay dark (the map has fixed DOTLAN
   colours), so they get the dark text and surface tokens back. */

:root[data-theme="light"] {
    --bg-primary: #f5f7fb; --bg-secondary: #ffffff; --bg-tertiary: #eef1f6; --bg-card: #ffffff; --bg-hover: #e6ebf3;
    --accent-primary: #0969da; --accent-secondary: #7c3aed; --accent-glow: rgba(9, 105, 218, 0.2);
    --accent-rgb: 9, 105, 218; --accent-sky: #0369a1; --accent-sky-rgb: 3, 105, 161; --accent-text: #0b3d91;
    --surface-rgb: 255, 255, 255; --surface-2-rgb: 243, 246, 250; --chrome-rgb: 233, 238, 245; --input-bg: #ffffff;
    --page-grad-1: #e8eef8; --page-grad-2: #f7f9fc;
    --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b;
    --border-glow: rgba(9, 105, 218, 0.25);
    --gradient-header: linear-gradient(135deg, #ffffff 0%, #eef1f6 100%);
    --gradient-accent: linear-gradient(135deg, #0969da 0%, #7c3aed 100%);
}

:root[data-theme="sisters"] {
    --bg-primary: #faf7f5; --bg-secondary: #ffffff; --bg-tertiary: #f3ede9; --bg-card: #ffffff; --bg-hover: #ece3dd;
    --accent-primary: #c8102e; --accent-secondary: #8a0f22; --accent-glow: rgba(200, 16, 46, 0.18);
    --accent-rgb: 200, 16, 46; --accent-sky: #9f1239; --accent-sky-rgb: 159, 18, 57; --accent-text: #7a0a1c;
    --surface-rgb: 255, 255, 255; --surface-2-rgb: 248, 244, 241; --chrome-rgb: 240, 233, 228; --input-bg: #ffffff;
    --page-grad-1: #f6ebe8; --page-grad-2: #fcfaf9;
    --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #78716c;
    --border-glow: rgba(200, 16, 46, 0.22);
    --gradient-header: linear-gradient(135deg, #ffffff 0%, #f3ede9 100%);
    --gradient-accent: linear-gradient(135deg, #c8102e 0%, #8a0f22 100%);
}

:root[data-theme="light"],
:root[data-theme="sisters"] {
    color-scheme: light;
    --on-accent: #ffffff;
    --border-color: rgba(15, 23, 42, 0.12);
    --gradient-card: linear-gradient(180deg, rgba(15, 23, 42, 0.015) 0%, transparent 100%);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.14);
    --good: #047857; --good-rgb: 4, 120, 87;
    --good-strong: #15803d; --good-strong-rgb: 21, 128, 61;
    --bad: #b91c1c; --bad-rgb: 185, 28, 28;
    --bad-strong: #991b1b; --bad-strong-rgb: 153, 27, 27;
}

:root[data-theme="light"] .map-container,
:root[data-theme="light"] .dotlan-tooltip,
:root[data-theme="sisters"] .map-container,
:root[data-theme="sisters"] .dotlan-tooltip {
    color-scheme: dark;
    --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b;
    --surface-rgb: 17, 24, 39; --surface-2-rgb: 12, 17, 27; --input-bg: #0b111b;
    --border-color: rgba(255, 255, 255, 0.08);
    --good: #34d399; --good-rgb: 52, 211, 153; --good-strong: #22c55e; --good-strong-rgb: 34, 197, 94;
    --bad: #f87171; --bad-rgb: 248, 113, 113; --bad-strong: #ef4444; --bad-strong-rgb: 239, 68, 68;
}

/* Hard-coded dark cards and white headings elsewhere in this file */
:root[data-theme="light"] :is(.auth-pilot-card, .auth-gate-card, .sov-stat-card, .sov-alliance-card, .gate-input-row .form-input, .area-edit-box, .cp-add-box, .spawn-chip, .military-spawns-panel),
:root[data-theme="sisters"] :is(.auth-pilot-card, .auth-gate-card, .sov-stat-card, .sov-alliance-card, .gate-input-row .form-input, .area-edit-box, .cp-add-box, .spawn-chip, .military-spawns-panel) {
    background: rgba(var(--surface-2-rgb), 0.95);
}
:root[data-theme="light"] :is(.sov-alliance-card:hover),
:root[data-theme="sisters"] :is(.sov-alliance-card:hover) { background: var(--bg-hover); }
:root[data-theme="light"] :is(.lang-select option, .form-select option, .map-select option),
:root[data-theme="sisters"] :is(.lang-select option, .form-select option, .map-select option) {
    background: #ffffff; color: var(--text-primary);
}
:root[data-theme="light"] :is(.auth-gate-card h3, .login-brand-name, .login-hero-title, .login-card-title, .spawn-chip .site-name, .spawns-total strong, .combat-chip strong, .sov-alliance-name, .login-denied-message, #appDashboard .logo-text h1, .admin-page-header h2),
:root[data-theme="sisters"] :is(.auth-gate-card h3, .login-brand-name, .login-hero-title, .login-card-title, .spawn-chip .site-name, .spawns-total strong, .combat-chip strong, .sov-alliance-name, .login-denied-message, #appDashboard .logo-text h1, .admin-page-header h2) {
    color: var(--text-primary);
}
:root[data-theme="light"] :is(.login-features li, .login-card-desc, .lock-banner-info span, .login-denied-contact, .npc-station-meta, .sov-holder-badge.unclaimed, #appDashboard .panel-header h2, #appDashboard .section-title),
:root[data-theme="sisters"] :is(.login-features li, .login-card-desc, .lock-banner-info span, .login-denied-contact, .npc-station-meta, .sov-holder-badge.unclaimed, #appDashboard .panel-header h2, #appDashboard .section-title) {
    color: var(--text-secondary);
}
:root[data-theme="light"] :is(#appDashboard .panel, #appDashboard .header-actions > .btn, #appDashboard .auth-pilot-card),
:root[data-theme="sisters"] :is(#appDashboard .panel, #appDashboard .header-actions > .btn, #appDashboard .auth-pilot-card) {
    border-color: rgba(15, 23, 42, 0.1);
}
:root[data-theme="light"] :is(#appDashboard .header-actions > .btn, #appDashboard .auth-pilot-card),
:root[data-theme="sisters"] :is(#appDashboard .header-actions > .btn, #appDashboard .auth-pilot-card) {
    background: rgba(15, 23, 42, 0.03);
}
:root[data-theme="light"] :is(#appDashboard .constellation-chip .chip-count, .area-pill-badge),
:root[data-theme="sisters"] :is(#appDashboard .constellation-chip .chip-count, .area-pill-badge) { background: rgba(15, 23, 42, 0.08); }

/* Theme picker (next to the language picker) */
.header-pickers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Header fits on one line at desktop widths (theme + language pickers, mode switch, pilot card, buttons) */
#appDashboard .logo-section {
    flex: 1 1 auto;
    min-width: 0;
}

#appDashboard .logo-text {
    min-width: 0;
}

#appDashboard .logo-text h1,
#appDashboard .alliance-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#appDashboard .header-actions {
    flex-shrink: 0;
}

#appDashboard .header-actions > .btn,
#appDashboard .btn-auth-logout,
#appDashboard .mode-btn,
#appDashboard .auth-pilot-name {
    white-space: nowrap;
}

.theme-select {
    max-width: 150px;
}

@media (max-width: 1600px) {
    #loadDataBtn [data-i18n],
    #saveDataBtn [data-i18n] {
        display: none;
    }
    #appDashboard .header-actions > #loadDataBtn,
    #appDashboard .header-actions > #saveDataBtn {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ============================================
   MAP ZOOM & PAN
   ============================================ */
#appDashboard .map-container {
    position: relative;
}

.map-wrapper {
    touch-action: none;
}

.map-wrapper.map-zoomed {
    cursor: grab;
}

.map-wrapper.map-dragging,
.map-wrapper.map-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

.map-zoom-controls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(var(--surface-rgb), 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.map-zoom-btn {
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.map-zoom-btn:hover:not(:disabled) {
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), 0.14);
}

.map-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.map-zoom-level {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 0;
    min-width: 38px;
    text-align: center;
}

/* ============================================
   PASTE FROM EVE (Sovereignty Hub upgrade list)
   ============================================ */
#appDashboard .section-title .paste-hub-btn {
    margin-left: auto;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
}

.paste-hub-input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    min-height: 150px;
    resize: vertical;
}

.paste-hub-offline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.paste-hub-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.paste-hub-empty {
    padding: 14px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.paste-hub-item {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

.paste-hub-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.paste-hub-system {
    font-weight: 700;
    color: var(--text-primary);
}

.paste-hub-region {
    margin-left: 6px;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.paste-hub-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: right;
}

.paste-hub-status.good { color: var(--good); background: rgba(var(--good-rgb), 0.12); }
.paste-hub-status.bad { color: var(--bad); background: rgba(var(--bad-rgb), 0.12); }
.paste-hub-status.muted { color: var(--text-muted); background: rgba(255, 255, 255, 0.05); }

.paste-hub-line {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.paste-hub-line.add { color: var(--good); }
.paste-hub-line.remove { color: var(--bad); }
.paste-hub-line.warn { color: #fbbf24; }
.paste-hub-line.muted { color: var(--text-muted); }

.paste-hub-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.paste-hub-actions .btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* ============================================
   OFFLINE UPGRADES (installed but not running)
   ============================================ */
.upgrade-checkbox {
    position: relative;
}

.upgrade-offline-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 24px;
    height: 20px;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.upgrade-checkbox input:checked ~ .upgrade-offline-toggle {
    display: inline-flex;
}

.upgrade-offline-toggle:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.upgrade-offline-toggle.is-offline {
    color: var(--bad);
    background: rgba(var(--bad-rgb), 0.14);
    border-color: rgba(var(--bad-rgb), 0.5);
}

.upgrade-checkbox input:disabled ~ .upgrade-offline-toggle {
    opacity: 0.5;
    pointer-events: none;
}

.upgrade-checkbox.is-offline .upgrade-name {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: rgba(var(--bad-rgb), 0.7);
}

.upgrade-offline-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bad);
    background: rgba(var(--bad-rgb), 0.12);
    border: 1px solid rgba(var(--bad-rgb), 0.35);
    border-radius: 4px;
    vertical-align: middle;
}

.tooltip-upgrade-item.is-offline .tooltip-upgr-icon,
.upgrade-item.is-offline .upgrade-icon {
    opacity: 0.45;
    filter: grayscale(1);
}

/* Automatic save status in the System Configuration header */
.save-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
    cursor: default;
}

.save-status[hidden] {
    display: none;
}

.save-status.saving {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.save-status.saving::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: saveStatusPulse 0.9s ease-in-out infinite;
}

.save-status.saved {
    color: var(--good);
    background: rgba(var(--good-rgb), 0.12);
}

.save-status.error {
    color: var(--bad);
    background: rgba(var(--bad-rgb), 0.12);
    cursor: help;
}

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

@media (prefers-reduced-motion: reduce) {
    .save-status.saving::before { animation: none; }
}

/* System Configuration header: title on top, badges (sov holder, save status, role) in one row below */
#systemEditorPanel .panel-header > div {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

#systemEditorPanel .panel-header .sov-holder-badge,
#systemEditorPanel .panel-header .panel-badge {
    white-space: nowrap;
}

/* ============================================
   MAP MULTI-SELECT (Shift/Ctrl+click) FOR ZONE ASSIGNMENT
   ============================================ */
.dotlan-node.multi-selected .dotlan-pill {
    stroke: #facc15;
    stroke-width: 2.4;
    stroke-dasharray: 4 2;
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.6));
}

.map-multiselect-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    background: rgba(var(--surface-rgb), 0.95);
    border: 1px solid rgba(250, 204, 21, 0.45);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

.map-multiselect-bar[hidden] {
    display: none;
}

.map-multiselect-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fde68a;
    cursor: default;
}

.map-multiselect-bar .map-select {
    max-width: 180px;
}

.map-multiselect-bar .btn-theme {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==============================================================================
   Admin Traffic tab: totals table and a bar chart of one metric
   ============================================================================== */
.traffic-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.traffic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.traffic-table th,
.traffic-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
    white-space: nowrap;
}

.traffic-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
}

.traffic-table tbody th {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
}

.traffic-table td {
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
}

.traffic-controls {
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.traffic-ranges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.traffic-range.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.traffic-chart-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.traffic-chart-title span {
    font-weight: 400;
    color: var(--text-muted);
}

.traffic-plot {
    position: relative;
    height: 200px;
    border-bottom: 1px solid var(--text-muted);
    background-image: linear-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 100% 50%;
}

.traffic-axis-max {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
}

.traffic-bars {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
}

.traffic-bars.dense {
    gap: 1px;
}

.traffic-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    cursor: default;
    outline: none;
}

.traffic-bar {
    width: 100%;
    background: var(--accent-primary);
    border-radius: 2px 2px 0 0;
}

.traffic-col.is-hover .traffic-bar,
.traffic-col:focus-visible .traffic-bar {
    filter: brightness(1.25);
}

.traffic-col:focus-visible {
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.traffic-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    min-width: 160px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font-size: 0.78rem;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 5;
}

.traffic-tooltip > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.traffic-tooltip strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.traffic-tooltip .is-current strong,
.traffic-tooltip .is-current span {
    color: var(--text-primary);
    font-weight: 700;
}

.traffic-tooltip-time {
    color: var(--text-muted);
    margin-bottom: 4px;
}

.traffic-axis-x {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.traffic-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 12px;
}

/* Live bandwidth: two tiles, each a current rate over a per-second sparkline */
.traffic-live {
    margin-bottom: 20px;
}

.traffic-live-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.traffic-live-head .traffic-chart-title {
    margin-bottom: 0;
}

.traffic-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.traffic-live-dot.is-live {
    background: var(--good);
    animation: traffic-live-pulse 2s ease-in-out infinite;
}

@keyframes traffic-live-pulse {
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .traffic-live-dot.is-live { animation: none; }
}

.traffic-live-status {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.traffic-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.traffic-live-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}

:root[data-theme="light"] .traffic-live-card,
:root[data-theme="sisters"] .traffic-live-card {
    background: rgba(var(--surface-2-rgb), 0.95);
}

.traffic-live-rate {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.traffic-live-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.traffic-spark {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 48px;
    border-bottom: 1px solid var(--text-muted);
}

.traffic-spark-bar {
    flex: 1;
    min-width: 0;
    background: var(--accent-primary);
    border-radius: 1px 1px 0 0;
}

/* Traffic tab: signed-in rows sit under their totals; per-pilot table */
.traffic-table tr.is-sub th {
    padding-left: 24px;
    font-weight: 400;
    color: var(--text-muted);
}

.traffic-table tr.is-sub td {
    color: var(--text-secondary);
}

.traffic-pilots {
    margin-top: 24px;
}

.traffic-pilots .traffic-chart-title {
    margin-bottom: 4px;
}

.traffic-pilots-table tbody th {
    white-space: normal;
}

.traffic-pilot-name {
    display: block;
    color: var(--text-primary);
}

.traffic-pilot-alliance {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.traffic-empty {
    text-align: center !important;
    color: var(--text-muted) !important;
    font-family: inherit !important;
}