/* ==========================================================================   VERGERE TACTICAL COMMAND & CONTROL (C2) - DESIGN SYSTEM   Dark Glassmorphism Tactical Architecture — MIL-STD / Single Pane of Glass   ========================================================================== */*, *::before, *::after {    margin: 0;    padding: 0;    box-sizing: border-box;    -webkit-tap-highlight-color: transparent;}/* --------------------------------------------------------------------------   1. Theme System (Normal Cyan, Sunburst Amber, NVG Red)   -------------------------------------------------------------------------- */:root {    /* Font Stacks */    --c2-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;    --c2-font-mono: "SF Mono", "Fira Code", "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace;    /* Base Dimensions */    --c2-header-height: 56px;    --c2-radius-sm: 6px;    --c2-radius-md: 10px;    --c2-radius-lg: 16px;    --c2-radius-pill: 9999px;    /* Threat Palette (Universal) */    --threat-hostile: #FF1744;    --threat-hostile-glow: rgba(255, 23, 68, 0.4);    --threat-hostile-bg: rgba(255, 23, 68, 0.15);    --threat-suspicious: #FF9100;    --threat-suspicious-glow: rgba(255, 145, 0, 0.4);    --threat-suspicious-bg: rgba(255, 145, 0, 0.15);    --threat-friendly: #00E5FF;    --threat-friendly-glow: rgba(0, 229, 255, 0.4);    --threat-friendly-bg: rgba(0, 229, 255, 0.15);    --threat-neutral: #00E676;    --threat-neutral-glow: rgba(0, 230, 118, 0.4);    --threat-neutral-bg: rgba(0, 230, 118, 0.15);    --threat-unknown: #94A3B8;    --threat-unknown-glow: rgba(148, 163, 184, 0.3);    --threat-unknown-bg: rgba(148, 163, 184, 0.15);}/* THEME 1: Normal (Deep Tactical Cyan / Obsidian) */body.theme-normal, :root {    --c2-bg: #06080C;    --c2-bg-surface: #0B1019;    --c2-bg-surface-elevated: #111827;        --c2-glass-bg: rgba(11, 16, 25, 0.82);    --c2-glass-bg-subtle: rgba(17, 24, 39, 0.65);    --c2-glass-border: rgba(30, 41, 59, 0.85);    --c2-glass-border-glow: rgba(0, 229, 255, 0.3);    --c2-glass-highlight: rgba(255, 255, 255, 0.05);    --c2-accent: #00E5FF;    --c2-accent-hover: #33EBFF;    --c2-accent-dim: #0097A7;    --c2-accent-glow: rgba(0, 229, 255, 0.35);    --c2-accent-glow-strong: rgba(0, 229, 255, 0.6);    --c2-accent-bg: rgba(0, 229, 255, 0.12);    --c2-text-primary: #F8FAFC;    --c2-text-secondary: #94A3B8;    --c2-text-muted: #64748B;    --c2-map-grid: rgba(0, 229, 255, 0.12);    --c2-map-water: #07101C;    --c2-map-land: #0D1624;    --c2-map-line: #1E293B;}/* THEME 2: Sunburst (High-Contrast Tactical Desert Amber) */body.theme-sunburst {    --c2-bg: #0A0D08;    --c2-bg-surface: #12180E;    --c2-bg-surface-elevated: #1A2214;    --c2-glass-bg: rgba(18, 24, 14, 0.85);    --c2-glass-bg-subtle: rgba(26, 34, 20, 0.7);    --c2-glass-border: rgba(63, 76, 48, 0.9);    --c2-glass-border-glow: rgba(255, 179, 0, 0.35);    --c2-glass-highlight: rgba(255, 255, 255, 0.08);    --c2-accent: #FFB300;    --c2-accent-hover: #FFCA28;    --c2-accent-dim: #FF8F00;    --c2-accent-glow: rgba(255, 179, 0, 0.38);    --c2-accent-glow-strong: rgba(255, 179, 0, 0.65);    --c2-accent-bg: rgba(255, 179, 0, 0.15);    --c2-text-primary: #FFF8E1;    --c2-text-secondary: #D7CCC8;    --c2-text-muted: #8D6E63;    --c2-map-grid: rgba(255, 179, 0, 0.14);    --c2-map-water: #11170D;    --c2-map-land: #1C2314;    --c2-map-line: #3E4B2F;}/* THEME 3: NVG Red (Night Vision Low-Signature Dark Room) */body.theme-nvg-red {    --c2-bg: #090304;    --c2-bg-surface: #140507;    --c2-bg-surface-elevated: #20090B;    --c2-glass-bg: rgba(20, 5, 7, 0.88);    --c2-glass-bg-subtle: rgba(32, 9, 11, 0.75);    --c2-glass-border: rgba(90, 20, 25, 0.9);    --c2-glass-border-glow: rgba(255, 23, 68, 0.4);    --c2-glass-highlight: rgba(255, 23, 68, 0.08);    --c2-accent: #FF1744;    --c2-accent-hover: #FF5252;    --c2-accent-dim: #D50000;    --c2-accent-glow: rgba(255, 23, 68, 0.45);    --c2-accent-glow-strong: rgba(255, 23, 68, 0.75);    --c2-accent-bg: rgba(255, 23, 68, 0.16);    --c2-text-primary: #FFEBEE;    --c2-text-secondary: #EF9A9A;    --c2-text-muted: #B71C1C;    --c2-map-grid: rgba(255, 23, 68, 0.15);    --c2-map-water: #120305;    --c2-map-land: #1E0609;    --c2-map-line: #4E1216;}/* --------------------------------------------------------------------------   2. Global Typography & Core Layout   -------------------------------------------------------------------------- */html, body {    width: 100%;    height: 100%;    height: 100dvh;    overflow: hidden;    background-color: var(--c2-bg);    color: var(--c2-text-primary);    font-family: var(--c2-font-sans);    user-select: none;    -webkit-user-select: none;    font-size: 13px;    line-height: 1.4;}#c2Root {    display: flex;    flex-direction: column;    width: 100%;    height: 100%;    height: 100dvh;    position: relative;    overflow: hidden;}/* Tactical Scanline & Grid Background Effect */#c2Root::after {    content: "";    position: absolute;    top: 0; left: 0; right: 0; bottom: 0;    pointer-events: none;    background: linear-gradient(rgba(18, 24, 36, 0) 50%, rgba(0, 0, 0, 0.18) 50%),                linear-gradient(90deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.01) 3%, transparent 3%);    background-size: 100% 3px, 6px 100%;    z-index: 100;    opacity: 0.65;}/* --------------------------------------------------------------------------   3. Glassmorphism Reusable Elements   -------------------------------------------------------------------------- */.c2-glass-card {    background: var(--c2-glass-bg);    backdrop-filter: blur(18px);    -webkit-backdrop-filter: blur(18px);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-md);    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 var(--c2-glass-highlight);    position: relative;    overflow: hidden;    transition: border-color 0.25s ease, box-shadow 0.25s ease;}.c2-glass-card.is-active,.c2-glass-card:focus-within {    border-color: var(--c2-glass-border-glow);    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 14px var(--c2-accent-glow);}/* Tactical Corner Brackets for HUD Focus */.c2-corner-brackets::before,.c2-corner-brackets::after {    content: "";    position: absolute;    width: 8px;    height: 8px;    pointer-events: none;    z-index: 5;    border-color: var(--c2-accent);    opacity: 0.6;}.c2-corner-brackets::before {    top: 4px; left: 4px;    border-top: 1.5px solid;    border-left: 1.5px solid;}.c2-corner-brackets::after {    bottom: 4px; right: 4px;    border-bottom: 1.5px solid;    border-right: 1.5px solid;}/* --------------------------------------------------------------------------   4. Top Command Header Bar   -------------------------------------------------------------------------- */#c2Header {    height: var(--c2-header-height);    min-height: var(--c2-header-height);    padding: 0 16px;    display: flex;    align-items: center;    justify-content: space-between;    background: var(--c2-glass-bg);    backdrop-filter: blur(20px);    -webkit-backdrop-filter: blur(20px);    border-bottom: 1px solid var(--c2-glass-border);    z-index: 60;    gap: 12px;}.header-left, .header-center, .header-right {    display: flex;    align-items: center;    gap: 10px;}.brand-section {    display: flex;    align-items: center;    gap: 10px;}.brand-logo {    display: flex;    align-items: center;    gap: 8px;    font-weight: 800;    letter-spacing: 0.08em;    font-size: 15px;    color: var(--c2-text-primary);}.brand-logo svg {    width: 22px;    height: 22px;    fill: var(--c2-accent);    filter: drop-shadow(0 0 6px var(--c2-accent-glow));}.brand-tag {    font-size: 10px;    font-weight: 700;    letter-spacing: 0.05em;    padding: 2px 7px;    border-radius: var(--c2-radius-pill);    background: var(--c2-accent-bg);    color: var(--c2-accent);    border: 1px solid var(--c2-glass-border-glow);}/* Status Indicator Pill */.status-pill {    display: flex;    align-items: center;    gap: 6px;    padding: 4px 10px;    border-radius: var(--c2-radius-pill);    background: rgba(255, 255, 255, 0.04);    border: 1px solid var(--c2-glass-border);    font-family: var(--c2-font-mono);    font-size: 11px;    font-weight: 600;}.status-dot {    width: 8px;    height: 8px;    border-radius: 50%;    background-color: var(--threat-suspicious);    box-shadow: 0 0 8px var(--threat-suspicious-glow);    transition: background-color 0.3s, box-shadow 0.3s;}.status-pill.is-live .status-dot {    background-color: var(--threat-neutral);    box-shadow: 0 0 10px var(--threat-neutral-glow);    animation: pulseLive 2s infinite;}@keyframes pulseLive {    0% { transform: scale(0.95); opacity: 0.8; }    50% { transform: scale(1.15); opacity: 1; }    100% { transform: scale(0.95); opacity: 0.8; }}/* Layout Selector Switcher */.layout-btn-group, .tab-btn-group, .theme-btn-group {    display: flex;    align-items: center;    background: rgba(255, 255, 255, 0.04);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-pill);    padding: 3px;    gap: 2px;}.c2-btn {    background: transparent;    border: none;    color: var(--c2-text-secondary);    padding: 6px 12px;    border-radius: var(--c2-radius-pill);    font-size: 11.5px;    font-weight: 600;    cursor: pointer;    display: inline-flex;    align-items: center;    justify-content: center;    gap: 6px;    transition: all 0.2s ease;}.c2-btn:hover {    color: var(--c2-text-primary);    background: rgba(255, 255, 255, 0.08);}.c2-btn.active {    background: var(--c2-accent);    color: #000000;    font-weight: 700;    box-shadow: 0 0 12px var(--c2-accent-glow);}body.theme-nvg-red .c2-btn.active {    color: #FFFFFF;}.icon-btn {    width: 36px;    height: 36px;    min-width: 36px;    padding: 0;    border-radius: 50%;    background: rgba(255, 255, 255, 0.05);    border: 1px solid var(--c2-glass-border);    color: var(--c2-text-secondary);    display: flex;    align-items: center;    justify-content: center;    cursor: pointer;    transition: all 0.2s ease;}.icon-btn:hover {    color: var(--c2-text-primary);    border-color: var(--c2-glass-border-glow);    background: rgba(255, 255, 255, 0.12);}.icon-btn.active {    background: var(--c2-accent-bg);    color: var(--c2-accent);    border-color: var(--c2-accent);    box-shadow: 0 0 12px var(--c2-accent-glow);}.icon-btn svg {    width: 18px;    height: 18px;    fill: currentColor;    pointer-events: none;}/* --------------------------------------------------------------------------   5. Main Multi-Pane Workspace & View Tabs   -------------------------------------------------------------------------- */#c2MainContent {    flex: 1;    position: relative;    overflow: hidden;    display: flex;    width: 100%;    height: calc(100vh - var(--c2-header-height));    height: calc(100dvh - var(--c2-header-height));}/* View Sections (Controlled by Tab Bar) */.c2-view-section {    position: absolute;    top: 0; left: 0; right: 0; bottom: 0;    width: 100%;    height: 100%;    opacity: 0;    pointer-events: none;    transition: opacity 0.25s ease;    display: flex;    overflow: hidden;}.c2-view-section.active {    opacity: 1;    pointer-events: auto;    z-index: 10;}/* Split Tactical View (Single Pane of Glass: Video + Map + Threats) */#viewSplitTactical {    display: grid;    grid-template-columns: 1.15fr 0.95fr;    grid-template-rows: 1fr 290px;    grid-template-areas:        "video map"        "threats map";    gap: 12px;    padding: 12px;    background: var(--c2-bg);}#viewSplitTactical .split-video-pane {    grid-area: video;    min-height: 0;    min-width: 0;}#viewSplitTactical .split-threats-pane {    grid-area: threats;    min-height: 0;    min-width: 0;}#viewSplitTactical .split-map-pane {    grid-area: map;    min-height: 0;    min-width: 0;}/* --------------------------------------------------------------------------   6. Video Multi-Feed Matrix & Layouts (1x1, 2x2, 3x3, 1+N)   -------------------------------------------------------------------------- */.video-matrix-container {    width: 100%;    height: 100%;    display: grid;    gap: 10px;    padding: 10px;    background: #000000;    border-radius: var(--c2-radius-md);    overflow: hidden;    position: relative;}/* Layout 1x1: Full Single Feed */.video-matrix-container.layout-1x1 {    grid-template-columns: 1fr;    grid-template-rows: 1fr;}.video-matrix-container.layout-1x1 .video-feed-card:not(.is-primary) {    display: none !important;}/* Layout 2x2: Quad Mosaic */.video-matrix-container.layout-2x2 {    grid-template-columns: 1fr 1fr;    grid-template-rows: 1fr 1fr;}.video-matrix-container.layout-2x2 .video-feed-card:nth-child(n+5) {    display: none !important;}/* Layout 3x3: 9-Feed Grid */.video-matrix-container.layout-3x3 {    grid-template-columns: 1fr 1fr 1fr;    grid-template-rows: 1fr 1fr 1fr;}/* Layout 1+N: Tactical Focus Mode (Featured Large Feed + Minitela Strip) */.video-matrix-container.layout-1plusN {    grid-template-columns: 3.5fr 1.2fr;    grid-template-rows: 1fr;    gap: 12px;}.video-matrix-container.layout-1plusN .video-feed-card.is-primary {    grid-column: 1 / 2;    grid-row: 1 / 2;    height: 100%;}.video-matrix-container.layout-1plusN .video-thumbs-strip {    grid-column: 2 / 3;    grid-row: 1 / 2;    display: flex;    flex-direction: column;    gap: 8px;    overflow-y: auto;    overflow-x: hidden;    padding-right: 4px;}.video-matrix-container.layout-1plusN .video-thumbs-strip .video-feed-card {    height: 140px;    min-height: 140px;    cursor: pointer;    border-width: 1px;}.video-matrix-container.layout-1plusN .video-thumbs-strip .video-feed-card:hover {    border-color: var(--c2-accent);    transform: translateY(-2px);}/* Video Feed Card */.video-feed-card {    background: #040608;    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-sm);    position: relative;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);    transition: transform 0.2s ease, border-color 0.2s ease;}.video-feed-card.is-primary {    border-color: var(--c2-glass-border-glow);}.video-feed-card video,.video-feed-card canvas {    width: 100%;    height: 100%;    object-fit: cover;    background: #000000;}/* Thermal FLIR / NVG Filter on Video */.video-feed-card.filter-thermal video,.video-feed-card.filter-thermal canvas {    filter: contrast(160%) brightness(110%) hue-rotate(180deg) invert(100%);}.video-feed-card.filter-nvg video,.video-feed-card.filter-nvg canvas {    filter: contrast(170%) brightness(120%) sepia(100%) hue-rotate(85deg) saturate(300%);}/* Feed Tactical HUD Overlay */.feed-osd-top {    position: absolute;    top: 8px;    left: 8px;    right: 8px;    display: flex;    justify-content: space-between;    align-items: center;    z-index: 15;    pointer-events: none;}.feed-badge {    background: rgba(6, 8, 12, 0.75);    backdrop-filter: blur(8px);    -webkit-backdrop-filter: blur(8px);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-sm);    padding: 3px 8px;    font-size: 11px;    font-family: var(--c2-font-mono);    font-weight: 700;    color: var(--c2-text-primary);    display: flex;    align-items: center;    gap: 6px;}.feed-badge .feed-dot {    width: 6px;    height: 6px;    border-radius: 50%;    background-color: var(--threat-neutral);    box-shadow: 0 0 6px var(--threat-neutral-glow);}.feed-telemetry-pill {    background: rgba(6, 8, 12, 0.75);    backdrop-filter: blur(8px);    -webkit-backdrop-filter: blur(8px);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-sm);    padding: 3px 8px;    font-size: 10px;    font-family: var(--c2-font-mono);    color: var(--c2-text-secondary);}/* Feed Reticle & Crosshair (MIL-STD OSD) */.feed-crosshair {    position: absolute;    top: 0; left: 0; right: 0; bottom: 0;    pointer-events: none;    z-index: 10;    display: flex;    align-items: center;    justify-content: center;}.feed-crosshair svg {    width: 140px;    height: 140px;    stroke: var(--c2-accent);    fill: none;    opacity: 0.65;    filter: drop-shadow(0 0 3px var(--c2-accent-glow));}/* Feed Quick Control Toolbar (Appears on Hover) */.feed-controls-bar {    position: absolute;    bottom: 8px;    left: 50%;    transform: translateX(-50%) translateY(12px);    display: flex;    align-items: center;    gap: 6px;    background: rgba(6, 8, 12, 0.85);    backdrop-filter: blur(12px);    -webkit-backdrop-filter: blur(12px);    border: 1px solid var(--c2-glass-border-glow);    border-radius: var(--c2-radius-pill);    padding: 4px 8px;    z-index: 20;    opacity: 0;    pointer-events: none;    transition: opacity 0.2s, transform 0.2s;}.video-feed-card:hover .feed-controls-bar {    opacity: 1;    pointer-events: auto;    transform: translateX(-50%) translateY(0);}.feed-btn {    background: transparent;    border: none;    color: var(--c2-text-secondary);    padding: 4px;    border-radius: 50%;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    transition: color 0.2s;}.feed-btn:hover {    color: var(--c2-accent);}.feed-btn svg {    width: 16px;    height: 16px;    fill: currentColor;}/* --------------------------------------------------------------------------   7. Tactical Map 2D/3D Canvas & Overlays   -------------------------------------------------------------------------- */.tactical-map-container {    width: 100%;    height: 100%;    position: relative;    background: var(--c2-map-water);    border-radius: var(--c2-radius-md);    overflow: hidden;}#tacticalMapCanvas {    width: 100%;    height: 100%;    display: block;    cursor: crosshair;}/* Map Floating OSD Controls */.map-osd-top {    position: absolute;    top: 10px;    left: 10px;    right: 10px;    display: flex;    justify-content: space-between;    align-items: center;    z-index: 20;    pointer-events: none;}.map-coords-badge {    background: var(--c2-glass-bg);    backdrop-filter: blur(12px);    -webkit-backdrop-filter: blur(12px);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-sm);    padding: 5px 10px;    font-family: var(--c2-font-mono);    font-size: 11px;    font-weight: 600;    color: var(--c2-text-primary);    pointer-events: auto;    display: flex;    align-items: center;    gap: 8px;}.map-controls-panel {    position: absolute;    bottom: 12px;    right: 12px;    display: flex;    flex-direction: column;    gap: 6px;    z-index: 20;}.map-layer-toggles {    position: absolute;    bottom: 12px;    left: 12px;    display: flex;    gap: 6px;    z-index: 20;    flex-wrap: wrap;}.layer-chip {    background: var(--c2-glass-bg);    backdrop-filter: blur(12px);    -webkit-backdrop-filter: blur(12px);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-pill);    padding: 4px 10px;    font-size: 10.5px;    font-weight: 600;    color: var(--c2-text-secondary);    cursor: pointer;    transition: all 0.2s ease;}.layer-chip.active {    background: var(--c2-accent-bg);    color: var(--c2-accent);    border-color: var(--c2-accent);    box-shadow: 0 0 10px var(--c2-accent-glow);}/* --------------------------------------------------------------------------   8. Central de Alvos & Threat Board (Threat Matrix)   -------------------------------------------------------------------------- */.threat-board-container {    width: 100%;    height: 100%;    display: flex;    flex-direction: column;    background: var(--c2-glass-bg);    backdrop-filter: blur(18px);    -webkit-backdrop-filter: blur(18px);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-md);    overflow: hidden;}.threat-board-header {    padding: 10px 14px;    border-bottom: 1px solid var(--c2-glass-border);    display: flex;    justify-content: space-between;    align-items: center;    gap: 10px;    flex-wrap: wrap;}.threat-kpi-bar {    display: flex;    align-items: center;    gap: 12px;}.kpi-chip {    display: flex;    align-items: center;    gap: 6px;    padding: 3px 8px;    border-radius: var(--c2-radius-sm);    font-size: 11px;    font-family: var(--c2-font-mono);    font-weight: 700;}.kpi-chip.kpi-hostile {    background: var(--threat-hostile-bg);    color: var(--threat-hostile);    border: 1px solid var(--threat-hostile-glow);}.kpi-chip.kpi-suspicious {    background: var(--threat-suspicious-bg);    color: var(--threat-suspicious);    border: 1px solid var(--threat-suspicious-glow);}.kpi-chip.kpi-friendly {    background: var(--threat-friendly-bg);    color: var(--threat-friendly);    border: 1px solid var(--threat-friendly-glow);}.kpi-chip.kpi-total {    background: rgba(255, 255, 255, 0.05);    color: var(--c2-text-primary);    border: 1px solid var(--c2-glass-border);}/* Filters and Search Toolbar */.threat-toolbar {    display: flex;    align-items: center;    gap: 8px;    flex-wrap: wrap;}.c2-input-search {    background: rgba(255, 255, 255, 0.05);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-pill);    color: var(--c2-text-primary);    padding: 5px 12px;    font-size: 11.5px;    outline: none;    width: 140px;    transition: border-color 0.2s, width 0.2s;}.c2-input-search:focus {    border-color: var(--c2-accent);    box-shadow: 0 0 8px var(--c2-accent-glow);    width: 180px;}.c2-select {    background: rgba(255, 255, 255, 0.06);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-pill);    color: var(--c2-text-primary);    padding: 5px 10px;    font-size: 11.5px;    outline: none;    cursor: pointer;}.c2-select option {    background: var(--c2-bg-surface);    color: #FFFFFF;}/* Threat Board Table */.threat-table-wrapper {    flex: 1;    overflow-y: auto;    overflow-x: auto;    min-height: 0;}.c2-table {    width: 100%;    border-collapse: collapse;    font-size: 11.5px;    text-align: left;}.c2-table th {    position: sticky;    top: 0;    background: var(--c2-bg-surface);    color: var(--c2-text-secondary);    font-weight: 700;    text-transform: uppercase;    font-size: 10px;    letter-spacing: 0.05em;    padding: 8px 10px;    border-bottom: 1px solid var(--c2-glass-border);    z-index: 10;}.c2-table td {    padding: 8px 10px;    border-bottom: 1px solid rgba(255, 255, 255, 0.04);    font-family: var(--c2-font-mono);    color: var(--c2-text-primary);    vertical-align: middle;}.c2-table tr:hover {    background: rgba(255, 255, 255, 0.04);    cursor: pointer;}.c2-table tr.selected {    background: var(--c2-accent-bg);    border-left: 3px solid var(--c2-accent);}/* Threat Classification Badge */.threat-badge {    display: inline-flex;    align-items: center;    gap: 5px;    padding: 2px 7px;    border-radius: var(--c2-radius-sm);    font-size: 10.5px;    font-weight: 700;    letter-spacing: 0.04em;    text-transform: uppercase;}.threat-badge.hostile {    background: var(--threat-hostile-bg);    color: var(--threat-hostile);    border: 1px solid var(--threat-hostile-glow);}.threat-badge.suspicious {    background: var(--threat-suspicious-bg);    color: var(--threat-suspicious);    border: 1px solid var(--threat-suspicious-glow);}.threat-badge.friendly {    background: var(--threat-friendly-bg);    color: var(--threat-friendly);    border: 1px solid var(--threat-friendly-glow);}.threat-badge.neutral {    background: var(--threat-neutral-bg);    color: var(--threat-neutral);    border: 1px solid var(--threat-neutral-glow);}/* --------------------------------------------------------------------------   9. "Stats for Nerds" Telemetry & Diagnostics Drawer   -------------------------------------------------------------------------- */#statsDrawer {    position: fixed;    top: calc(var(--c2-header-height) + 12px);    right: 14px;    width: 360px;    max-width: calc(100vw - 28px);    max-height: calc(100vh - var(--c2-header-height) - 28px);    background: var(--c2-glass-bg);    backdrop-filter: blur(24px);    -webkit-backdrop-filter: blur(24px);    border: 1px solid var(--c2-glass-border-glow);    border-radius: var(--c2-radius-md);    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px var(--c2-accent-glow);    z-index: 80;    display: flex;    flex-direction: column;    transform: translateX(400px);    opacity: 0;    pointer-events: none;    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;}#statsDrawer.open {    transform: translateX(0);    opacity: 1;    pointer-events: auto;}.drawer-header {    padding: 12px 16px;    border-bottom: 1px solid var(--c2-glass-border);    display: flex;    justify-content: space-between;    align-items: center;}.drawer-title {    font-size: 13px;    font-weight: 800;    letter-spacing: 0.06em;    color: var(--c2-accent);    display: flex;    align-items: center;    gap: 8px;    text-transform: uppercase;}.drawer-body {    padding: 14px 16px;    overflow-y: auto;    display: flex;    flex-direction: column;    gap: 14px;}.stats-category-title {    font-size: 11px;    font-weight: 700;    color: var(--c2-text-secondary);    text-transform: uppercase;    letter-spacing: 0.05em;    padding-bottom: 4px;    border-bottom: 1px solid rgba(255, 255, 255, 0.06);}.stats-grid-2col {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 8px;}.stat-box {    background: rgba(255, 255, 255, 0.03);    border: 1px solid var(--c2-glass-border);    border-radius: var(--c2-radius-sm);    padding: 6px 10px;}.stat-box-label {    font-size: 10px;    color: var(--c2-text-muted);    margin-bottom: 2px;}.stat-box-value {    font-family: var(--c2-font-mono);    font-size: 12px;    font-weight: 700;    color: var(--c2-text-primary);}/* --------------------------------------------------------------------------   10. Responsiveness & Mobile/Tablet Support   -------------------------------------------------------------------------- */@media (max-width: 1024px) {    #viewSplitTactical {        grid-template-columns: 1fr;        grid-template-rows: 320px 280px 240px;        grid-template-areas:            "video"            "map"            "threats";        overflow-y: auto;    }}@media (max-width: 768px) {    .header-center {        display: none;    }    #c2Header {        padding: 0 10px;    }    .video-matrix-container.layout-1plusN {        grid-template-columns: 1fr;        grid-template-rows: 1fr auto;    }    .video-matrix-container.layout-1plusN .video-thumbs-strip {        grid-column: 1 / 2;        grid-row: 2 / 3;        flex-direction: row;        overflow-x: auto;        overflow-y: hidden;        height: 100px;    }}
/* Accessibility and responsive overrides for the cloud C2 surface. */
:where(button, a, input, select, [tabindex="0"]):focus-visible { outline: 2px solid var(--c2-accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,229,255,.24); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } #c2Root::after { display:none; } }
@media (max-width: 768px) { #c2Header { height:auto; min-height:var(--c2-header-height); padding:8px 10px; flex-wrap:wrap; } .header-left { flex:1 1 auto; min-width:0; } .header-right { flex:1 1 100%; overflow-x:auto; padding-bottom:2px; } .brand-tag { display:none; } .header-right > * { flex:0 0 auto; } .c2-btn { min-height:36px; } .icon-btn { min-width:40px; min-height:40px; width:40px; height:40px; } #viewSplitTactical { padding:8px; gap:8px; } }
/* Final C2 palette overrides: graphite normal, amber sunburst, low-signature NVG red. */
body.theme-normal, :root {
    --c2-bg: #111210;
    --c2-bg-surface: #1A1B18;
    --c2-bg-surface-elevated: #24251F;
    --c2-glass-bg: rgba(26, 27, 24, 0.88);
    --c2-glass-bg-subtle: rgba(36, 37, 31, 0.72);
    --c2-glass-border: rgba(70, 72, 60, 0.9);
    --c2-glass-border-glow: rgba(125, 143, 82, 0.6);
    --c2-glass-highlight: rgba(255, 248, 231, 0.06);
    --c2-accent: #8B9A5B;
    --c2-accent-hover: #A6B875;
    --c2-accent-dim: #65723F;
    --c2-accent-glow: rgba(139, 154, 91, 0.22);
    --c2-accent-glow-strong: rgba(139, 154, 91, 0.35);
    --c2-accent-bg: rgba(139, 154, 91, 0.14);
    --c2-text-primary: #F6F1E4;
    --c2-text-secondary: #C6C2B5;
    --c2-text-muted: #858477;
    --c2-map-grid: rgba(139, 154, 91, 0.16);
    --c2-map-water: #151714;
    --c2-map-land: #20231B;
    --c2-map-line: #414538;
}

/* NVG stays red but deliberately suppresses decorative glow. */
body.theme-nvg-red {
    --c2-glass-border-glow: #A33A3A;
    --c2-accent-glow: transparent;
    --c2-accent-glow-strong: transparent;
    --c2-accent-bg: rgba(180, 48, 48, 0.16);
}
body.theme-nvg-red #c2Root::after { display: none; }

/* Keep focus indication visible without restoring the former cyan cast. */
:where(button, a, input, select, [tabindex="0"]):focus-visible {
    box-shadow: 0 0 0 4px rgba(139, 154, 91, 0.30);
}

/* Normal theme: solid tactical surfaces, with only restrained separation shadows. */
body.theme-normal #c2Root::after { display: none; }
body.theme-normal .c2-glass-card,
body.theme-normal #c2Header,
body.theme-normal #statsDrawer,
body.theme-normal .threat-board-container,
body.theme-normal .feed-badge,
body.theme-normal .feed-telemetry-pill,
body.theme-normal .map-coords-badge,
body.theme-normal .layer-chip,
body.theme-normal .feed-controls-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-normal .c2-glass-card,
body.theme-normal .threat-board-container,
body.theme-normal .video-feed-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
}
body.theme-normal .c2-glass-card.is-active,
body.theme-normal .c2-glass-card:focus-within,
body.theme-normal #statsDrawer {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
}
body.theme-normal .c2-btn.active,
body.theme-normal .icon-btn.active,
body.theme-normal .layer-chip.active,
body.theme-normal .feed-controls-bar {
    box-shadow: none;
}
body.theme-normal .brand-logo svg,
body.theme-normal .feed-crosshair svg {
    filter: none;
}

/* Normal theme friendly state: readable muted olive, without cyan/neon spill. */
body.theme-normal {
    --threat-friendly: #A8B878;
    --threat-friendly-glow: rgba(168, 184, 120, 0.34);
    --threat-friendly-bg: rgba(168, 184, 120, 0.16);
}