:root {
    --bg-black: #080a0f;
    --panel-bg: rgba(13, 17, 23, 0.9);
    --ctc-cyan: #00f2ff;
    --ctc-cyan-dim: rgba(0, 242, 255, 0.4);
    --ctc-orange: #ff9d00;
    --ctc-red: #ff3e3e;
    --ctc-border: rgba(0, 242, 255, 0.15);
    --font-main: 'JetBrains Mono', monospace;
    --font-header: 'Orbitron', sans-serif;
}

body {
    background-color: var(--bg-black);
    color: #e6edf3;
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* CRT & Scanline Effects */
.crt::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 9999;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.02) 10%, rgba(0, 0, 0, 0.1) 100%);
    opacity: 0.1;
    position: fixed;
    bottom: 100%;
    animation: scanline 10s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% { bottom: 100%; }
    80% { bottom: 100%; }
    100% { bottom: -100px; }
}

/* Layout */
.dashboard-container {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    gap: 25px;
    padding: 0 30px 30px 30px;
}

/* Professional Panels */
.panel {
    background: var(--panel-bg);
    border: 1px solid var(--ctc-border);
    backdrop-filter: blur(10px);
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.panel h3 {
    font-family: var(--font-header);
    font-size: 0.85em;
    letter-spacing: 2px;
    color: var(--ctc-cyan);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel h3::before {
    content: "";
    width: 4px;
    height: 14px;
    background: var(--ctc-cyan);
}

/* HUD Corners */
.panel::before, .panel::after {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    pointer-events: none;
}

.panel::before { top: -1px; left: -1px; border-top: 2px solid var(--ctc-cyan); border-left: 2px solid var(--ctc-cyan); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--ctc-cyan); border-right: 2px solid var(--ctc-cyan); }

/* Stats & Bars */
.stat-bar {
    height: 6px;
    background: rgba(255,255,255,0.05);
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: var(--ctc-cyan);
    box-shadow: 0 0 15px var(--ctc-cyan);
    position: relative;
}

.stat-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Video Command Screens */
.video-uplink {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--ctc-cyan-dim);
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
}

.screen-feed {
    background: #000;
    border: 1px solid var(--ctc-border);
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.screen-feed:hover {
    border-color: var(--ctc-cyan);
    transform: scale(1.02);
    /* ... (previous styles) ... */

    .video-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%; /* Ensure it takes full height of its parent */
        background: rgba(0,0,0,0.8); /* Dark background for placeholder */
        color: var(--ctc-cyan-dim); /* Use a dimmer cyan for text */
        font-size: 1.5em; /* Larger font size */
        text-align: center;
        font-family: var(--font-header); /* Use header font for impact */
        letter-spacing: 2px;
        text-transform: uppercase;
        /* Inherit or apply CRT/scanline effects if possible, e.g., by being within a CRT-styled container */
        /* For simplicity here, we'll assume the parent .screen-feed or .uplink-grid will handle CRT effects */
    }

    /* ... (rest of the styles) ... */
}

/* Navigation & Buttons */
nav a {
    font-family: var(--font-header);
    font-size: 0.75em;
    letter-spacing: 1px;
    padding: 8px 15px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

nav a:hover {
    background: rgba(0, 242, 255, 0.05);
    border-color: var(--ctc-cyan-dim);
    color: var(--ctc-cyan);
}

button {
    font-family: var(--font-header);
    font-size: 0.7em;
    padding: 8px 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--ctc-cyan-dim);
    background: transparent;
    color: var(--ctc-cyan);
}

button:hover {
    background: var(--ctc-cyan);
    color: var(--bg-black);
    box-shadow: 0 0 20px var(--ctc-cyan-dim);
}