/* --- 1. GLOBAL VARIABLES & RESET --- */
:root {
    --neon: #66fcf1;       /* The Madring Cyan */
    --dark: #0b0c10;       /* Pitch Black Background */
    --panel: #1f2833;      /* Dark Grey Panel Background */
    --white: #ffffff;      /* Pure White */
    --black: #000000;      /* Pure Black */
}

body { 
    margin: 0; 
    background-color: var(--dark); 
    font-family: 'Roboto Mono', monospace; 
    color: var(--white); 
}

/* --- 2. HEADER SECTION --- */
.header-section { 
    background: var(--white); 
    color: var(--black); 
    padding: 30px 0; 
    text-align: center; 
    position: relative;
}

.top-bar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
}

h1 { 
    font-family: 'Orbitron', sans-serif; 
    font-weight: 900; 
    font-size: 42px; 
    margin: 0; 
    letter-spacing: -1px; 
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

/* --- 3. NAV PILLS --- */
.nav-bar { 
    margin-top: 25px; 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
}

.nav-pill { 
    background: var(--black); 
    color: var(--white); 
    border: 2px solid var(--neon); 
    padding: 10px 40px; 
    font-family: 'Orbitron', sans-serif; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
}

.nav-pill:hover, .nav-pill.active { 
    background: var(--neon); 
    color: var(--black); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    transform: translateY(-2px);
}

/* --- 4. HORIZON LINE --- */
.horizon-line { 
    height: 4px; 
    background-color: var(--neon); 
    width: 100%; 
    box-shadow: 0 0 20px var(--neon); 
    position: relative; 
    z-index: 10; 
}

/* --- 5. DASHBOARD LAYOUT --- */
.dashboard { 
    padding: 40px; 
    max-width: 1400px; 
    margin: 0 auto; 
}

/* --- 6. KPI CARDS --- */
.kpi-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-bottom: 40px; 
}

.card { 
    background: linear-gradient(135deg, var(--panel), black); 
    border-left: 4px solid var(--neon); 
    padding: 20px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.5); 
}

.label { 
    font-size: 10px; 
    color: #888; 
    font-weight: bold; 
    margin-bottom: 5px; 
    letter-spacing: 1px; 
}

.value { 
    font-size: 36px; 
    font-weight: bold; 
    font-family: 'Orbitron', sans-serif; 
    color: white; 
}

.sub { 
    font-size: 10px; 
    color: var(--neon); 
    margin-top: 5px; 
}

/* --- 7. MAIN SPLIT --- */
.main-split { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 40px; 
}

h3 { 
    font-family: 'Orbitron', sans-serif; 
    margin-top: 0; 
    color: white; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
}

.panel { margin-bottom: 20px; }

/* --- 8. MAP & BUTTONS --- */
.track-map { 
    width: 100%; 
    border: 1px solid #333; 
    opacity: 0.9; 
    display: block; 
}

/* Bigger 2-Column Buttons */
.btn-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-top: 15px; 
}

.btn-grid button { 
    background: var(--panel); 
    border: 1px solid #444; 
    color: #fff; 
    padding: 20px; 
    cursor: pointer; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    transition: 0.2s; 
    text-transform: uppercase; 
}

.btn-grid button:hover { 
    background: var(--neon); 
    color: var(--black); 
    border-color: var(--neon); 
    box-shadow: 0 0 15px rgba(102, 252, 241, 0.4); 
}

/* Corner Info Box */
#corner-display {
    margin-top: 15px;
    padding: 15px;
    border-left: 2px solid var(--neon);
    background: rgba(102, 252, 241, 0.05);
    color: var(--neon);
    font-size: 12px;
    font-weight: bold;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* --- 9. CONTROL PANEL --- */
.control-panel { 
    background: var(--panel); 
    padding: 25px; 
    border: 1px solid #333; 
}

label { 
    display: block; 
    margin-bottom: 8px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #ccc; 
}

select, input { 
    width: 100%; 
    padding: 12px; 
    background: var(--dark); 
    color: white; 
    border: 1px solid var(--neon); 
    margin-bottom: 25px; 
    font-family: 'Roboto Mono', monospace; 
    box-sizing: border-box; 
    outline: none; 
}

select:focus, input:focus { 
    box-shadow: 0 0 10px rgba(102, 252, 241, 0.3); 
}

/* Gauge */
.gauge-container { 
    text-align: center; 
    border: 1px solid #333; 
    padding: 30px 20px; 
    margin-top: 10px; 
    border-radius: 150px 150px 0 0; 
    border-bottom: none; 
    background: linear-gradient(to top, #000, var(--panel)); 
}

.gauge-value { 
    font-size: 80px; 
    font-family: 'Orbitron', sans-serif; 
    font-weight: bold; 
    color: var(--neon); 
    line-height: 1; 
}

.gauge-label { font-size: 12px; color: #888; margin-top: 5px; }

/* --- 10. TELEMETRY GRID (BIG FONTS) --- */
.telemetry-grid {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.t-item {
    background: #000;
    border: 1px solid #333;
    padding: 15px;
    text-align: center;
}

.t-label {
    font-size: 12px;
    color: #888;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.t-val {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 28px;
    font-weight: bold;
}

.live-dot {
    color: #66fcf1;
    font-size: 14px;
    animation: blink 2s infinite;
    vertical-align: middle;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* --- 11. ENGINEERING LAB (New Styles) --- */

/* Pipeline Diagram */
.pipeline-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #000;
    border: 1px solid #333;
}

.pipe-step { text-align: center; width: 20%; }
.pipe-icon { font-size: 24px; margin-bottom: 10px; }
.pipe-title { font-family: 'Orbitron'; color: var(--neon); font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.pipe-desc { font-size: 10px; color: #888; line-height: 1.4; }
.pipe-arrow { color: #333; font-size: 20px; font-weight: bold; }

/* Validation Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.metric-box {
    background: #000;
    border: 1px solid #333;
    padding: 15px;
}

.m-label { font-size: 10px; color: #888; font-weight: bold; margin-bottom: 5px; }
.m-val { font-family: 'Orbitron'; font-size: 24px; font-weight: bold; color: white; margin-bottom: 5px; }
.m-sub { font-size: 10px; color: #555; }
.text-green { color: #00ff00; }
.text-cyan { color: var(--neon); }

/* Heatmap */
.heatmap-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 2px;
    background: #000;
    margin-top: 10px;
}

.hm-header {
    background: #111;
    color: #888;
    font-size: 10px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

.hm-row-label {
    background: #111;
    padding: 15px 10px;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Orbitron';
    border-right: 1px solid #333;
}

.hm-cell {
    text-align: center;
    padding: 15px 0;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Mono';
    font-size: 12px;
}

/* Heatmap Color Scale */
.c-low { background-color: #a3f7bf; }   
.c-med { background-color: #f7e4a3; }   
.c-high { background-color: #f7a3a3; }  
.c-crit { background-color: #ff4d4d; color: white; }

/* Sim Overlay */
.sim-container { position: relative; }
.sim-graph { width: 100%; display: block; border: 1px solid #333; opacity: 0.9; }
.sim-overlay {
    position: absolute;
    top: 10px; right: 10px;
    display: flex; gap: 10px;
}
.metric-badge {
    background: rgba(0,0,0,0.8);
    border: 1px solid var(--neon);
    color: var(--neon);
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
}