@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Michroma&family=Rajdhani:wght@500;600;700&family=Sora:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap");

:root {
    --bg: #05070b;
    --bg-2: #0a0f16;
    --panel: rgba(12, 18, 30, 0.82);
    --panel-2: rgba(10, 14, 23, 0.94);
    --line: rgba(114, 175, 255, 0.16);
    --line-strong: rgba(120, 193, 255, 0.42);
    --text: #ecf5ff;
    --muted: #8f9db4;
    --cyan: #79d6ff;
    --teal: #79ffd6;
    --amber: #f7c46d;
    --orange: #ff9f7a;
    --pink: #ff8ec7;
    --blue: #67a3ff;
    --red: #ff7c8d;
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --font-display: "Orbitron", "Rajdhani", sans-serif;
    --grid-opacity: 0.22;
    --shell-accent-1: rgba(103, 163, 255, 0.12);
    --shell-accent-2: rgba(255, 142, 199, 0.06);
    --chrome-glow: rgba(121, 214, 255, 0.14);
    --topbar-bg: rgba(5, 9, 15, 0.88);
    --panel-grad-1: rgba(13, 18, 29, 0.95);
    --panel-grad-2: rgba(7, 11, 18, 0.92);
    --panel-sheen-a: rgba(121, 214, 255, 0.05);
    --panel-sheen-b: rgba(247, 196, 109, 0.035);
    --globe-accent: rgba(50, 93, 174, 0.22);
    --globe-deep: #050912;
    --overlay-bg: rgba(6, 10, 16, 0.82);
    --hero-highlight: rgba(255,255,255,0.03);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at top left, var(--shell-accent-1), transparent 24%),
        radial-gradient(circle at top right, var(--shell-accent-2), transparent 18%),
        linear-gradient(180deg, #03050a 0%, #091019 44%, #05070b 100%);
    color: var(--text);
    font-family: var(--font-body);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 68px 68px;
    pointer-events: none;
    opacity: var(--grid-opacity);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select {
    font: inherit;
    color: inherit;
}

.shell {
    position: relative;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    background: var(--topbar-bg);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 420px;
    min-width: 0;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 34% 32%, rgba(255,255,255,0.45), transparent 16%),
        linear-gradient(145deg, rgba(247, 196, 109, 0.26), rgba(121, 214, 255, 0.08));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 30px var(--chrome-glow);
    font-size: 20px;
}

.eyebrow, .micro-label {
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    color: var(--cyan);
}

.title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.1vw, 26px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 320px;
}

.mobile-nav-toggle {
    display: none;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    color: var(--text);
    border-radius: 999px;
    padding: 9px 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    cursor: pointer;
}

.mobile-nav-toggle:hover {
    border-color: var(--line-strong);
    box-shadow: 0 0 18px rgba(121, 214, 255, 0.16);
}

.theme-menu {
    position: relative;
}

.theme-trigger {
    min-width: 118px;
}

.theme-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(280px, 80vw);
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(10,15,24,.98), rgba(5,8,14,.96));
    box-shadow: 0 26px 60px rgba(0,0,0,0.38);
    display: grid;
    gap: 8px;
    z-index: 60;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
}

.theme-option.active,
.theme-option:hover {
    border-color: var(--line-strong);
    box-shadow: 0 0 20px rgba(121, 214, 255, 0.12);
}

.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    flex: 0 0 auto;
}

.theme-swatch-echelon { background: linear-gradient(135deg, #69cfff, #173356); }
.theme-swatch-blade { background: linear-gradient(135deg, #ff8f73, #43241f); }
.theme-swatch-eve { background: linear-gradient(135deg, #79ffd6, #13373c); }
.theme-swatch-aurora { background: linear-gradient(135deg, #a78cff, #281d4f); }
.theme-swatch-blacksite { background: linear-gradient(135deg, #9de6d2, #14312b); }
.theme-swatch-tungsten { background: linear-gradient(135deg, #f7c46d, #4b3a1c); }
.theme-swatch-neonnoir { background: linear-gradient(135deg, #ff5ea8, #3f1732); }
.theme-swatch-synthgrid { background: linear-gradient(135deg, #58f6ff, #182c4f); }
.theme-swatch-rainline { background: linear-gradient(135deg, #ff7c8d, #421922); }
.theme-swatch-voidtrace { background: linear-gradient(135deg, #7bf2c8, #102d31); }

.nav-link, .button, .filter-chip {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    color: var(--text);
    border-radius: 999px;
    padding: 9px 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    cursor: pointer;
}

.nav-link.active,
.nav-link:hover,
.button:hover,
.filter-chip.active,
.filter-chip:hover {
    border-color: var(--line-strong);
    box-shadow: 0 0 24px rgba(121, 214, 255, 0.12);
}

.page {
    padding: 24px 24px 28px;
}

body.dashboard-page {
    overflow: hidden;
}

body.dashboard-page .shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body.dashboard-page .topbar {
    flex: 0 0 auto;
    padding-top: 14px;
    padding-bottom: 14px;
}

.dashboard-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) minmax(132px, 16vh);
    gap: 10px;
    overflow: hidden;
}

.dashboard-hero {
    grid-template-columns: 1fr;
    margin-bottom: 0;
    gap: 8px;
}

.dashboard-hero .panel-inner {
    padding: 10px 14px;
}

.dashboard-hero .subtitle {
    font-size: 11px;
}

.grid-main {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr) 360px;
    gap: 18px;
    min-height: calc(100vh - 112px);
}

.dashboard-grid {
    grid-template-columns: 192px minmax(0, 1.95fr) 214px;
    min-height: 0;
    height: 100%;
    gap: 12px;
    overflow: hidden;
}

.dashboard-grid > .panel,
.dashboard-grid > aside,
.dashboard-grid > section {
    min-height: 0;
    height: 100%;
}

body.dashboard-page .dashboard-grid .panel-inner.stack,
body.dashboard-page .dashboard-grid .panel-inner {
    min-height: 0;
    padding: 12px 13px;
}

body.dashboard-page #incident-list {
    margin-top: 10px;
}

body.dashboard-page #signal-stream,
body.dashboard-page #hotspot-list {
    overflow: hidden;
    max-height: none !important;
}

.grid-main > * {
    min-width: 0;
}

.panel {
    position: relative;
    background: linear-gradient(180deg, var(--panel-grad-1), var(--panel-grad-2));
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, var(--panel-sheen-a), transparent 26%, transparent 70%, var(--panel-sheen-b));
    pointer-events: none;
}

.panel-inner {
    position: relative;
    z-index: 1;
    padding: 20px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.dashboard-page .stack {
    gap: 11px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stat-card {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    background: var(--hero-highlight);
}

.stat-value {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 34px);
}

.globe-shell {
    position: relative;
    min-height: clamp(520px, 68vh, 820px);
    background:
        radial-gradient(circle at center, var(--globe-accent), transparent 26%),
        radial-gradient(circle at center, #0e1623 0%, var(--globe-deep) 70%, #02050a 100%);
}

.globe-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 55%, rgba(121,214,255,0.08) 70%, transparent 74%),
        repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255,255,255,0.02) 5px);
    pointer-events: none;
    opacity: 0.28;
}

.globe-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.globe-overlay {
    position: absolute;
    z-index: 3;
    background: var(--overlay-bg);
    border: 1px solid rgba(121, 214, 255, 0.18);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.32);
}

.globe-overlay.block {
    padding: 14px 16px;
}

body.dashboard-page .globe-overlay.block {
    padding: 9px 11px;
}

.globe-overlay.top-left { top: 18px; left: 18px; }
.globe-overlay.top-right { top: 18px; right: 18px; }
.globe-overlay.bottom-left { bottom: 18px; left: 18px; }
.globe-overlay.bottom-right { bottom: 18px; right: 18px; }
.globe-overlay.bottom-center { bottom: 18px; left: 50%; transform: translateX(-50%); }

body.dashboard-page .globe-overlay.top-left,
body.dashboard-page .globe-overlay.top-right,
body.dashboard-page .globe-overlay.bottom-left,
body.dashboard-page .globe-overlay.bottom-center {
    top: 12px;
    left: 12px;
    right: auto;
    bottom: auto;
}

body.dashboard-page .globe-overlay.top-right {
    left: auto;
    right: 12px;
    max-width: 260px;
}

body.dashboard-page .globe-overlay.bottom-left {
    top: auto;
    bottom: 12px;
}

body.dashboard-page .globe-overlay.bottom-center {
    top: auto;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(72%, 560px);
}

.globe-map-loader {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(4, 10, 18, 0.2), rgba(3, 7, 12, 0.62));
    backdrop-filter: blur(4px);
}

.globe-map-loader.show {
    display: flex;
}

.globe-map-loader-card {
    width: min(360px, calc(100% - 26px));
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.96), rgba(4, 8, 14, 0.95));
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.44);
    padding: 13px 14px 12px;
    color: var(--text);
}

.globe-map-loader-title {
    margin-top: 7px;
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.globe-map-loader-track {
    margin-top: 10px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.globe-map-loader-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--teal), var(--amber));
    transition: width 160ms ease;
}

.globe-map-loader-meta {
    margin-top: 8px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.control-cluster {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-cluster .button {
    min-width: 148px;
}

body.dashboard-page .control-cluster .button {
    min-width: 116px;
    padding: 9px 12px;
}

.legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 8px;
}

.scroll {
    overflow: auto;
}

.scroll::-webkit-scrollbar {
    width: 9px;
}

.scroll::-webkit-scrollbar-thumb {
    background: rgba(121, 214, 255, 0.24);
    border-radius: 999px;
}

.list-card,
.signal-card,
.resource-card,
.case-row {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-md);
    color: var(--text);
}

.list-card:hover,
.signal-card:hover,
.resource-card:hover,
.case-row:hover {
    border-color: rgba(121,214,255,0.24);
}

.list-card {
    padding: 14px;
    cursor: pointer;
}

.dashboard-incident-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.dashboard-console {
    min-height: 0;
}

.dashboard-console-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 16px 18px;
}

body.dashboard-page .dashboard-console .list-card {
    min-height: 0;
    padding: 10px 11px;
}

body.dashboard-page .dashboard-console .list-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.dashboard-page .dashboard-console .subtitle,
body.dashboard-page .globe-overlay .subtitle,
body.dashboard-page .kicker,
body.dashboard-page .micro-label {
    font-size: 10px;
}

body.dashboard-page .resource-card,
body.dashboard-page .signal-card {
    padding: 10px 11px;
}

body.dashboard-page .stat-card {
    padding: 10px 12px;
}

body.dashboard-page .stat-value {
    margin-top: 4px;
    font-size: clamp(22px, 2vw, 28px);
}

body.dashboard-page .filter-chip,
body.dashboard-page .button,
body.dashboard-page .nav-link,
body.dashboard-page .theme-picker {
    padding: 8px 11px;
    font-size: 10px;
}

body.dashboard-page #search-box {
    padding: 10px 12px !important;
    margin-top: 8px !important;
    font-size: 12px;
}

body.dashboard-page .date-field input[type="date"] {
    padding: 8px 9px;
    font-size: 11px;
}

body.dashboard-page .date-presets .filter-chip {
    padding: 6px 9px;
}

body.dashboard-page .resource-card canvas {
    max-height: 118px;
}

.row-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tag-row,
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
}

.tag.official { color: var(--cyan); background: rgba(121,214,255,0.08); }
.tag.mufon { color: var(--teal); background: rgba(121,255,214,0.08); }
.tag.news { color: var(--amber); background: rgba(247,196,109,0.08); }
.tag.social { color: var(--pink); background: rgba(255,142,199,0.08); }
.tag.archive { color: var(--blue); background: rgba(103,163,255,0.08); }
.tag.claim { color: var(--orange); background: rgba(255,159,122,0.08); }

.kicker {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
}

.large-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
}

body.dashboard-page .large-grid {
    gap: 10px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: left;
    vertical-align: top;
}

.table th {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
}

.hero-banner {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    margin-bottom: 18px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.resource-card,
.signal-card {
    padding: 18px;
}

.resource-card,
.signal-card,
.list-card {
    display: block;
}

.muted {
    color: var(--muted);
}

.tiny {
    font-size: 12px;
}

.icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.range-stack,
.date-widget {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.range-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.range-stack input[type="range"] {
    width: 100%;
    margin: 0;
}

.date-field {
    display: grid;
    gap: 4px;
}

.date-field input[type="date"] {
    width: 100%;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text);
}

.date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 12, 0.7);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.modal-backdrop.show {
    display: flex;
}

.modal-card {
    width: min(960px, 100%);
    max-height: 90vh;
    overflow: auto;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(10,15,24,.98), rgba(5,8,14,.96));
    box-shadow: 0 34px 90px rgba(0,0,0,.48);
    padding: 24px;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.media-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    padding: 14px;
}

.media-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 10px;
    border: 0;
    border-radius: 14px;
    background: rgba(0,0,0,0.3);
}

.media-image {
    object-fit: cover;
}

.resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.theme-picker {
    min-width: 190px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    color: var(--text);
    border-radius: 999px;
    padding: 11px 16px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
}

body[data-theme="echelon"] {
    --font-body: "Inter", "Segoe UI", sans-serif;
    --font-display: "Orbitron", "Rajdhani", sans-serif;
}

body[data-theme="blade"] {
    --font-body: "Exo 2", "Inter", sans-serif;
    --font-display: "Rajdhani", "Orbitron", sans-serif;
    --shell-accent-1: rgba(255, 124, 96, 0.14);
    --shell-accent-2: rgba(255, 142, 199, 0.09);
    --chrome-glow: rgba(255, 159, 122, 0.14);
    --cyan: #ffb192;
    --amber: #ffd38a;
    --line: rgba(255, 161, 129, 0.18);
    --line-strong: rgba(255, 192, 160, 0.42);
    --muted: #b39b97;
    --topbar-bg: rgba(14, 8, 10, 0.9);
    --panel-grad-1: rgba(24, 14, 16, 0.95);
    --panel-grad-2: rgba(12, 8, 11, 0.93);
    --panel-sheen-a: rgba(255, 124, 96, 0.08);
    --panel-sheen-b: rgba(255, 214, 111, 0.03);
    --globe-accent: rgba(186, 82, 65, 0.22);
    --globe-deep: #110708;
    --overlay-bg: rgba(16, 8, 9, 0.84);
}

body[data-theme="eve"] {
    --font-body: "Sora", "Inter", sans-serif;
    --font-display: "Orbitron", "Sora", sans-serif;
    --shell-accent-1: rgba(78, 224, 194, 0.12);
    --shell-accent-2: rgba(103, 163, 255, 0.08);
    --chrome-glow: rgba(121, 255, 214, 0.14);
    --cyan: #79ffd6;
    --teal: #8dffe5;
    --line: rgba(121, 255, 214, 0.16);
    --line-strong: rgba(149, 255, 225, 0.42);
    --panel-sheen-a: rgba(121, 255, 214, 0.06);
    --panel-sheen-b: rgba(103, 163, 255, 0.025);
    --globe-accent: rgba(46, 142, 125, 0.24);
}

body[data-theme="aurora"] {
    --font-body: "Space Grotesk", "Inter", sans-serif;
    --font-display: "Orbitron", "Space Grotesk", sans-serif;
    --shell-accent-1: rgba(153, 122, 255, 0.13);
    --shell-accent-2: rgba(121, 214, 255, 0.08);
    --chrome-glow: rgba(167, 140, 255, 0.16);
    --cyan: #b49cff;
    --blue: #88b6ff;
    --line: rgba(167, 140, 255, 0.18);
    --line-strong: rgba(193, 176, 255, 0.42);
    --muted: #a79dbd;
    --panel-grad-1: rgba(18, 15, 31, 0.96);
    --panel-grad-2: rgba(8, 8, 18, 0.93);
    --panel-sheen-a: rgba(167, 140, 255, 0.08);
    --panel-sheen-b: rgba(121, 214, 255, 0.03);
    --globe-accent: rgba(120, 83, 198, 0.24);
    --globe-deep: #090714;
    --overlay-bg: rgba(10, 8, 19, 0.84);
}

body[data-theme="blacksite"] {
    --font-body: "IBM Plex Sans", "Inter", sans-serif;
    --font-display: "Michroma", "Orbitron", sans-serif;
    --shell-accent-1: rgba(157, 230, 210, 0.1);
    --shell-accent-2: rgba(121, 214, 255, 0.04);
    --chrome-glow: rgba(157, 230, 210, 0.14);
    --cyan: #9de6d2;
    --teal: #caffef;
    --line: rgba(157, 230, 210, 0.15);
    --line-strong: rgba(197, 255, 239, 0.35);
    --muted: #8ba79c;
    --topbar-bg: rgba(7, 11, 10, 0.9);
    --panel-grad-1: rgba(12, 18, 16, 0.95);
    --panel-grad-2: rgba(6, 10, 9, 0.93);
    --panel-sheen-a: rgba(157, 230, 210, 0.05);
    --panel-sheen-b: rgba(255, 255, 255, 0.02);
    --globe-accent: rgba(63, 125, 108, 0.18);
    --globe-deep: #050a09;
    --overlay-bg: rgba(8, 12, 11, 0.84);
}

body[data-theme="tungsten"] {
    --font-body: "Exo 2", "Inter", sans-serif;
    --font-display: "Rajdhani", "Orbitron", sans-serif;
    --shell-accent-1: rgba(247, 196, 109, 0.12);
    --shell-accent-2: rgba(103, 163, 255, 0.06);
    --chrome-glow: rgba(247, 196, 109, 0.14);
    --cyan: #f7c46d;
    --amber: #ffd694;
    --line: rgba(247, 196, 109, 0.18);
    --line-strong: rgba(255, 224, 165, 0.42);
    --muted: #b5a58a;
    --panel-grad-1: rgba(24, 19, 13, 0.95);
    --panel-grad-2: rgba(10, 9, 7, 0.93);
    --panel-sheen-a: rgba(247, 196, 109, 0.08);
    --panel-sheen-b: rgba(103, 163, 255, 0.025);
    --globe-accent: rgba(174, 128, 51, 0.22);
    --globe-deep: #100b06;
    --overlay-bg: rgba(14, 11, 8, 0.84);
}

@keyframes panelDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

@keyframes chromePulse {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.26; }
}

@keyframes glitchSweep {
    0%, 100% { transform: translateX(0); opacity: 0; }
    10% { transform: translateX(-2px); opacity: 0.08; }
    12% { transform: translateX(2px); opacity: 0.12; }
    16% { transform: translateX(0); opacity: 0; }
}

body[data-theme="neonnoir"]::after,
body[data-theme="synthgrid"]::after,
body[data-theme="rainline"]::after,
body[data-theme="voidtrace"]::after {
    opacity: 1;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.025) 48%, transparent 52%, transparent 100%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
    background-size: 100% 7px, 180px 100%;
    animation: glitchSweep 8s infinite;
}

body[data-theme="neonnoir"] .panel::after,
body[data-theme="synthgrid"] .panel::after,
body[data-theme="rainline"] .panel::after,
body[data-theme="voidtrace"] .panel::after {
    animation: chromePulse 5.5s ease-in-out infinite;
}

body[data-theme="neonnoir"] .brand-mark,
body[data-theme="synthgrid"] .brand-mark,
body[data-theme="rainline"] .brand-mark,
body[data-theme="voidtrace"] .brand-mark {
    animation: panelDrift 7s ease-in-out infinite;
}

body[data-theme="neonnoir"] {
    --font-body: "Space Grotesk", "Inter", sans-serif;
    --font-display: "Michroma", "Orbitron", sans-serif;
    --shell-accent-1: rgba(255, 94, 168, 0.15);
    --shell-accent-2: rgba(88, 246, 255, 0.06);
    --chrome-glow: rgba(255, 94, 168, 0.16);
    --cyan: #ff7db8;
    --pink: #ff9fd0;
    --line: rgba(255, 112, 182, 0.18);
    --line-strong: rgba(255, 157, 211, 0.42);
    --muted: #b99ab0;
    --topbar-bg: rgba(16, 8, 15, 0.9);
    --panel-grad-1: rgba(28, 13, 27, 0.96);
    --panel-grad-2: rgba(10, 8, 18, 0.93);
    --panel-sheen-a: rgba(255, 94, 168, 0.08);
    --panel-sheen-b: rgba(88, 246, 255, 0.03);
    --globe-accent: rgba(139, 35, 93, 0.22);
    --globe-deep: #120711;
    --overlay-bg: rgba(18, 9, 18, 0.84);
}

body[data-theme="synthgrid"] {
    --font-body: "Sora", "Inter", sans-serif;
    --font-display: "Orbitron", "Rajdhani", sans-serif;
    --shell-accent-1: rgba(88, 246, 255, 0.14);
    --shell-accent-2: rgba(167, 140, 255, 0.07);
    --chrome-glow: rgba(88, 246, 255, 0.14);
    --cyan: #58f6ff;
    --blue: #82b5ff;
    --line: rgba(88, 246, 255, 0.17);
    --line-strong: rgba(163, 249, 255, 0.42);
    --muted: #91afbe;
    --topbar-bg: rgba(7, 11, 18, 0.9);
    --panel-grad-1: rgba(10, 17, 28, 0.96);
    --panel-grad-2: rgba(6, 10, 18, 0.93);
    --panel-sheen-a: rgba(88, 246, 255, 0.07);
    --panel-sheen-b: rgba(167, 140, 255, 0.03);
    --globe-accent: rgba(39, 94, 139, 0.24);
    --globe-deep: #060b15;
    --overlay-bg: rgba(8, 12, 19, 0.84);
}

body[data-theme="rainline"] {
    --font-body: "Exo 2", "Inter", sans-serif;
    --font-display: "Rajdhani", "Michroma", sans-serif;
    --shell-accent-1: rgba(255, 124, 141, 0.14);
    --shell-accent-2: rgba(103, 163, 255, 0.05);
    --chrome-glow: rgba(255, 124, 141, 0.15);
    --cyan: #ff8d9b;
    --red: #ff667d;
    --line: rgba(255, 124, 141, 0.18);
    --line-strong: rgba(255, 169, 180, 0.44);
    --muted: #b69aa2;
    --topbar-bg: rgba(15, 8, 11, 0.9);
    --panel-grad-1: rgba(26, 12, 16, 0.96);
    --panel-grad-2: rgba(9, 8, 13, 0.93);
    --panel-sheen-a: rgba(255, 124, 141, 0.08);
    --panel-sheen-b: rgba(103, 163, 255, 0.025);
    --globe-accent: rgba(126, 36, 56, 0.23);
    --globe-deep: #10070a;
    --overlay-bg: rgba(16, 9, 11, 0.84);
}

body[data-theme="voidtrace"] {
    --font-body: "IBM Plex Sans", "Inter", sans-serif;
    --font-display: "Michroma", "Orbitron", sans-serif;
    --shell-accent-1: rgba(123, 242, 200, 0.11);
    --shell-accent-2: rgba(88, 246, 255, 0.04);
    --chrome-glow: rgba(123, 242, 200, 0.13);
    --cyan: #7bf2c8;
    --teal: #b4ffe8;
    --line: rgba(123, 242, 200, 0.15);
    --line-strong: rgba(184, 255, 231, 0.38);
    --muted: #8ea8a1;
    --topbar-bg: rgba(6, 11, 12, 0.9);
    --panel-grad-1: rgba(9, 16, 18, 0.96);
    --panel-grad-2: rgba(5, 9, 11, 0.93);
    --panel-sheen-a: rgba(123, 242, 200, 0.06);
    --panel-sheen-b: rgba(255, 255, 255, 0.015);
    --globe-accent: rgba(30, 95, 88, 0.2);
    --globe-deep: #040809;
    --overlay-bg: rgba(7, 11, 12, 0.84);
}

@media (max-width: 1320px) {
    .grid-main,
    .hero-banner,
    .large-grid {
        grid-template-columns: 1fr;
    }

    .resource-grid,
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-main {
        min-height: auto;
    }

    body.dashboard-page {
        overflow: auto;
    }

    .dashboard-layout {
        grid-template-rows: auto auto auto;
        overflow: visible;
    }

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

    .dashboard-incident-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 920px) {
    body.dashboard-page .topbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .dashboard-layout {
        gap: 12px;
        grid-template-rows: auto minmax(0, 1fr) minmax(130px, 16vh);
    }

    .dashboard-hero .panel-inner,
    .dashboard-console-inner,
    body.dashboard-page .dashboard-grid .panel-inner {
        padding: 14px 16px;
    }

    .dashboard-hero .title {
        font-size: 22px !important;
    }

    .dashboard-hero .subtitle,
    .dashboard-console .subtitle,
    .globe-overlay .subtitle {
        font-size: 11px;
    }

    .stat-value {
        font-size: clamp(22px, 2vw, 28px);
    }

    .globe-shell {
        min-height: 0;
    }
}

@media (max-width: 860px) {
    .topbar,
    .page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .stat-grid,
    .resource-grid {
        grid-template-columns: 1fr;
    }

    .title {
        font-size: 22px;
    }

    .globe-shell {
        min-height: 520px;
    }

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

    .dashboard-incident-grid {
        grid-template-columns: 1fr;
    }

    .globe-overlay.top-left,
    .globe-overlay.top-right,
    .globe-overlay.bottom-left,
    .globe-overlay.bottom-center {
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
    }

    .globe-overlay.top-right {
        top: auto;
        bottom: 142px;
    }

    .globe-overlay.bottom-center {
        bottom: 12px;
    }

    .globe-overlay.bottom-left {
        bottom: 96px;
    }

    .legend {
        gap: 10px;
    }

    .control-cluster .button,
    .nav-link,
    .theme-trigger,
    .theme-picker {
        width: 100%;
        text-align: center;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 88px;
        margin-left: auto;
        order: 2;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar .brand {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 8px;
    }

    .topbar .nav {
        display: none;
        width: 100%;
        order: 3;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.08);
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .topbar.nav-open .nav {
        display: flex;
    }

    .topbar .theme-menu {
        width: 100%;
    }

    .topbar .theme-panel {
        position: static;
        margin-top: 8px;
        width: auto;
    }
}

.gerb-hero {
    align-items: start;
}

.gerb-metric-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gerb-control-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.gerb-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gerb-field input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 14px 16px;
}

.gerb-side-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

.gerb-video-card,
.glossary-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01);
}

.gerb-card-title {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.35;
}

.gerb-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.video-frame {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--line);
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(circle at top, rgba(121,214,255,0.12), transparent 45%),
        linear-gradient(180deg, rgba(5,10,18,0.95), rgba(9,16,28,0.92));
}

.video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.term-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.term-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
}

.term-chip:hover {
    border-color: var(--line-strong);
    box-shadow: 0 0 18px rgba(121, 214, 255, 0.1);
}

.gerb-disclosure {
    margin-top: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}

.gerb-disclosure summary {
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
}

.gerb-disclosure summary::-webkit-details-marker {
    display: none;
}

.mini-definition-grid {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.mini-definition {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
}

.mini-definition p,
.glossary-card p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.gerb-bullets {
    margin: 0;
    padding: 0 16px 16px 34px;
    color: var(--muted);
    display: grid;
    gap: 8px;
}

.mini-button {
    padding: 10px 13px;
    font-size: 10px;
}

.stacked-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 14px 14px;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: 900px;
    overflow: auto;
    padding-right: 6px;
    scroll-behavior: smooth;
}

.glossary-grid {
    display: grid;
    gap: 12px;
    max-height: 900px;
    overflow: auto;
    padding-right: 6px;
    scroll-behavior: smooth;
}

.glossary-card {
    scroll-margin-top: 110px;
}

.library-card .resource-actions,
.gerb-video-card .resource-actions {
    margin-top: 14px;
}

.empty-state {
    border-radius: 22px;
    border: 1px dashed var(--line-strong);
    background: rgba(255,255,255,0.025);
    color: var(--muted);
    padding: 24px;
    text-align: center;
}

@media (max-width: 1320px) {
    .gerb-control-grid,
    .gerb-side-grid {
        grid-template-columns: 1fr;
    }

    .library-grid,
    .glossary-grid {
        max-height: none;
    }
}

@media (max-width: 860px) {
    .gerb-metric-strip,
    .library-grid,
    .video-grid {
        grid-template-columns: 1fr;
    }

    .gerb-card-title {
        font-size: 18px;
    }
}

/* Dashboard + Gerb UX refresh */
.theme-panel[hidden] {
    display: none !important;
}

.theme-menu.open .theme-panel {
    display: grid;
}

body.dashboard-page .topbar {
    padding: 8px 14px;
    gap: 12px;
    min-height: 62px;
}

body.dashboard-page .brand {
    gap: 10px;
    flex: 1 1 390px;
}

body.dashboard-page .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
}

body.dashboard-page .title {
    font-size: clamp(14px, 1.25vw, 18px);
    letter-spacing: 0.11em;
}

body.dashboard-page .subtitle {
    margin-top: 2px;
    font-size: 11px;
}

body.dashboard-page .nav-link,
body.dashboard-page .button,
body.dashboard-page .theme-trigger {
    padding: 9px 12px;
    border-color: rgba(121, 214, 255, 0.34);
    background: linear-gradient(180deg, rgba(129, 194, 255, 0.2), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 10px;
    font-weight: 600;
}

body.dashboard-page .nav-link.active,
body.dashboard-page .nav-link:hover,
body.dashboard-page .button:hover {
    box-shadow: 0 0 24px rgba(121, 214, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.dashboard-page .page {
    padding: 8px 10px 10px;
}

body.dashboard-page .dashboard-layout {
    display: block;
    min-height: 0;
    height: 100%;
}

body.dashboard-page .globe-shell {
    min-height: 0;
    height: 100%;
    border-radius: 26px;
}

body.dashboard-page .globe-overlay.block {
    padding: 8px 10px;
}

body.dashboard-page .globe-overlay.top-left {
    top: 12px;
    left: 12px;
}

body.dashboard-page .globe-overlay.top-right {
    top: 12px;
    right: 12px;
    left: auto;
    max-width: 260px;
}

body.dashboard-page .globe-overlay.top-center {
    top: 12px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
}

body.dashboard-page .globe-overlay.bottom-left {
    left: 12px;
    bottom: 12px;
    top: auto;
}

body.dashboard-page .globe-overlay.bottom-center {
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
}

.metrics-chip-strip {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.metric-chip {
    min-width: 70px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.24);
}

.metric-chip strong {
    display: block;
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 16px;
}

.globe-tab-rail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.globe-tab-rail.left {
    left: 10px;
}

.globe-tab-rail.right {
    right: 10px;
}

.mobile-globe-dock {
    display: none;
}

.tab-button {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(8, 16, 26, 0.95), rgba(5, 9, 15, 0.92));
    color: var(--text);
    border-radius: 14px;
    padding: 10px 8px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    cursor: pointer;
    min-height: 122px;
}

.tab-button:hover,
.tab-button.active {
    border-color: var(--line-strong);
    box-shadow: 0 0 24px rgba(121, 214, 255, 0.2);
}

.flyout-panel {
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: min(370px, calc(100% - 120px));
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.96), rgba(4, 8, 14, 0.95));
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
    z-index: 7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    transition: opacity 180ms ease, transform 200ms ease;
    color: var(--text);
}

.flyout-panel.left {
    left: 56px;
    transform: translate3d(-14px, 0, 0);
}

.flyout-panel.right {
    right: 56px;
    transform: translate3d(14px, 0, 0);
}

.flyout-panel.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.flyout-head {
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.flyout-body {
    padding: 12px;
    min-height: 0;
    flex: 1 1 auto;
    scroll-behavior: smooth;
}

.hotspot-button {
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--text);
}

.hotspot-button.active {
    border-color: var(--line-strong);
    background: rgba(121, 214, 255, 0.12);
    box-shadow: 0 0 18px rgba(121, 214, 255, 0.16);
}

body.dashboard-page .list-card {
    text-align: left;
}

/* Theme animation upgrades */
@keyframes rainFall {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 520px, 0 260px; }
}

@keyframes synthSweep {
    0% { transform: translateY(-8%); opacity: 0.42; }
    50% { transform: translateY(8%); opacity: 0.7; }
    100% { transform: translateY(-8%); opacity: 0.42; }
}

@keyframes redGlitch {
    0%, 100% { transform: translateX(0); opacity: 0.2; }
    8% { transform: translateX(-2px); opacity: 0.5; }
    10% { transform: translateX(3px); opacity: 0.64; }
    12% { transform: translateX(0); opacity: 0.22; }
}

@keyframes voidVortex {
    0% { transform: scale(1) rotate(0deg); opacity: 0.22; }
    100% { transform: scale(1.22) rotate(360deg); opacity: 0.42; }
}

.shell {
    position: relative;
}

.shell::before,
.shell::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

body[data-theme="neonnoir"] .shell::before {
    opacity: 0.48;
    background-image:
        linear-gradient(180deg, rgba(176, 208, 255, 0.18) 0 2px, transparent 2px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 100%);
    background-size: 2px 34px, 1px 54px;
    animation: rainFall 1.6s linear infinite;
}

body[data-theme="neonnoir"] .shell::after {
    opacity: 0.24;
    background: radial-gradient(circle at 22% 16%, rgba(255, 206, 233, 0.15), transparent 34%);
}

body[data-theme="synthgrid"] .shell::before {
    opacity: 0.5;
    background:
        repeating-linear-gradient(to bottom, rgba(166, 255, 255, 0.07) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, rgba(83, 244, 255, 0.2), transparent);
    animation: synthSweep 4.2s ease-in-out infinite;
}

body[data-theme="synthgrid"] .shell::after {
    opacity: 0.28;
    background: radial-gradient(circle at 70% 30%, rgba(156, 220, 255, 0.16), transparent 36%);
}

body[data-theme="rainline"] .shell::before {
    opacity: 0.48;
    background-image:
        linear-gradient(180deg, rgba(255, 129, 148, 0.34) 0 2px, transparent 2px 100%),
        linear-gradient(180deg, rgba(255, 73, 98, 0.26) 0 1px, transparent 1px 100%);
    background-size: 2px 34px, 1px 56px;
    animation: rainFall 1.1s linear infinite;
}

body[data-theme="rainline"] .shell::after {
    opacity: 0.35;
    background:
        linear-gradient(90deg, rgba(255, 0, 68, 0.06), transparent 20%, rgba(255, 59, 98, 0.05)),
        radial-gradient(circle at 40% 24%, rgba(255, 98, 122, 0.15), transparent 44%);
    animation: redGlitch 8.6s steps(1) infinite;
}

body[data-theme="voidtrace"] .shell::before {
    opacity: 0.38;
    background:
        radial-gradient(circle at 52% 50%, rgba(116, 254, 214, 0.16), rgba(0, 0, 0, 0) 32%),
        radial-gradient(circle at 52% 50%, rgba(104, 170, 255, 0.11), rgba(0, 0, 0, 0) 58%);
    animation: voidVortex 12s linear infinite;
}

body[data-theme="voidtrace"] .shell::after {
    opacity: 0.21;
    background: radial-gradient(circle at 30% 20%, rgba(142, 255, 228, 0.1), transparent 40%);
}

/* Gerb page flyout controls */
.gerb-flyout-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gerb-flyout-panels {
    position: relative;
    min-height: 0;
}

.gerb-flyout {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.95), rgba(4, 8, 14, 0.94));
    padding: 14px;
    display: none;
}

.gerb-flyout.is-open {
    display: block;
}

@media (max-width: 1280px) {
    body.dashboard-page .metrics-chip-strip {
        gap: 6px;
    }

    .metric-chip {
        min-width: 62px;
        padding: 5px 7px;
    }

    .metric-chip strong {
        font-size: 14px;
    }

    .flyout-panel {
        width: min(336px, calc(100% - 86px));
    }
}

@media (max-width: 860px) {
    body.dashboard-page {
        overflow: auto;
    }

    body.dashboard-page .page {
        padding: 8px;
    }

    body.dashboard-page .globe-shell {
        min-height: 520px;
        height: calc(100dvh - 98px);
        border-radius: 18px;
    }

    body.dashboard-page .desktop-overlay {
        display: none !important;
    }

    body.dashboard-page .globe-overlay.top-center {
        top: 10px;
        left: 10px;
        right: auto;
        transform: none;
        max-width: 140px;
    }

    body.dashboard-page .metrics-chip-strip {
        width: auto;
        overflow: visible;
    }

    body.dashboard-page .globe-tab-rail {
        display: none;
    }

    body.dashboard-page .mobile-globe-dock {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
        z-index: 8;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    body.dashboard-page .mobile-globe-dock .button {
        width: 100%;
        min-width: 0;
        padding: 9px 6px;
        letter-spacing: 0.1em;
        font-size: 9px;
    }

    .flyout-panel {
        top: 52px;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
        border-radius: 14px;
    }
}

/* Rebuilt Gerb Workspace */
body.gerb2-page .page {
    padding: 10px 12px 14px;
}

.gerb2-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 12px;
    min-height: calc(100vh - 86px);
}

.gerb2-command {
    min-height: 0;
}

.gerb2-command-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.gerb2-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gerb2-metrics .stat-card {
    padding: 10px;
}

.gerb2-metrics .stat-value {
    font-size: 23px;
    margin-top: 2px;
}

.gerb2-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 8px;
}

.gerb2-search-row input,
.gerb2-search-row select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    padding: 10px 11px;
}

.gerb2-search-row select {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}

.gerb2-chip-block {
    display: grid;
    gap: 8px;
}

.gerb2-panel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gerb2-main {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

.gerb2-feature .panel-inner,
.gerb2-feed .panel-inner {
    padding: 14px;
}

.gerb2-feature-frame-wrap {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.32);
    aspect-ratio: 16 / 9;
    position: relative;
}

.gerb2-feature-frame {
    width: 100%;
    height: 100%;
    border: 0;
}

.gerb2-feature-empty {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    text-align: center;
    padding: 14px;
    color: var(--muted);
}

.gerb2-feature-copy {
    margin-top: 10px;
}

.gerb2-feature-copy h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
}

.gerb2-feed {
    min-height: 0;
}

.gerb2-feed-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 100%;
    overflow: auto;
    padding-right: 4px;
    scroll-behavior: smooth;
}

.gerb2-video-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 11px;
    display: grid;
    gap: 8px;
}

.gerb2-video-card.selected {
    border-color: var(--line-strong);
    box-shadow: 0 0 22px rgba(121, 214, 255, 0.15);
}

.gerb2-video-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.gerb2-video-head h3 {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.35;
}

.gerb2-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.gerb2-video-summary {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}

.gerb2-video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gerb2-drawer {
    position: fixed;
    top: 92px;
    right: 12px;
    width: min(460px, calc(100vw - 24px));
    bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.98), rgba(5, 9, 16, 0.96));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    z-index: 70;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gerb2-drawer[hidden] {
    display: none !important;
}

.gerb2-drawer-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gerb2-drawer-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 10px;
    scroll-behavior: smooth;
}

@media (max-width: 1280px) {
    .gerb2-layout {
        grid-template-columns: 1fr;
    }

    .gerb2-main {
        grid-template-rows: auto auto;
    }

    .gerb2-feed-list {
        grid-template-columns: 1fr;
        max-height: 720px;
    }
}

@media (max-width: 860px) {
    .gerb2-search-row {
        grid-template-columns: 1fr;
    }

    .gerb2-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gerb2-drawer {
        top: 78px;
        left: 10px;
        right: 10px;
        width: auto;
    }
}

/* Page transition cache dialog */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 6, 12, 0.58);
    backdrop-filter: blur(8px);
}

.page-transition.show {
    display: flex;
}

.page-transition-card {
    width: min(420px, calc(100vw - 28px));
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.96), rgba(4, 8, 14, 0.95));
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
    padding: 16px 16px 14px;
    color: var(--text);
}

.page-transition-title {
    margin-top: 8px;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
}

.page-transition-track {
    margin-top: 12px;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-transition-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--teal), var(--amber));
    transition: width 180ms ease;
}

.page-transition-meta {
    margin-top: 9px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}