:root {
    --bg-color: #0a0a0a;
    --text-primary: #00ff00;
    --text-secondary: #00ffff;
    --text-danger: #ff0044;
    --panel-bg: rgba(0, 20, 0, 0.3);
    --font-stack: 'Courier New', Consolas, monospace;
}

body[data-theme="amber"] {
    --bg-color: #1a0f00;
    --text-primary: #ffb000;
    --text-secondary: #ffcc00;
    --text-danger: #ff5500;
    --panel-bg: rgba(20, 10, 0, 0.5);
}

body[data-theme="neon"] {
    --bg-color: #100010;
    --text-primary: #ff00ff;
    --text-secondary: #00ffff;
    --text-danger: #ff0044;
    --panel-bg: rgba(20, 0, 20, 0.3);
}

body[data-theme="corpo"] {
    --bg-color: #000a1a;
    --text-primary: #88ccff;
    --text-secondary: #ffffff;
    --text-danger: #ffaa00;
    --panel-bg: rgba(0, 10, 20, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-stack);
    height: 100vh;
    overflow: hidden;
    position: relative;
    text-shadow: 0 0 5px var(--text-primary);
}

/* CRT Effect Overlay */
.crt-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 100;
    background: repeating-linear-gradient(
        0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px,
        transparent 1px, transparent 2px
    );
    animation: flicker 0.15s infinite;
}
@keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 1; } 100% { opacity: 0.98; } }

.screen-flash {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 0, 68, 0.4); z-index: 90; pointer-events: none; display: none;
    animation: flash 0.5s ease-out;
}
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Menus */
.overlay-menu {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9); z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-primary);
}
.overlay-menu h1 { font-size: 3rem; margin-bottom: 30px; text-shadow: 0 0 10px var(--text-primary); }
.overlay-menu h2 { font-size: 2rem; margin-bottom: 20px; border-bottom: none; }
.menu-btn {
    background: transparent; color: var(--text-primary); border: 2px solid var(--text-primary);
    padding: 10px 20px; font-size: 1.5rem; margin: 10px; cursor: pointer; font-family: inherit;
    text-transform: uppercase; transition: all 0.2s;
}
.menu-btn:hover { background: var(--text-primary); color: var(--bg-color); }
.settings-group { margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
.settings-group label { margin-bottom: 10px; font-size: 1.2rem; }
.settings-group select { background: var(--bg-color); color: var(--text-primary); border: 1px solid var(--text-primary); padding: 5px; font-family: var(--font-stack); font-size: 1.1rem; }
.tutorial-content { max-width: 600px; text-align: left; margin-bottom: 20px; line-height: 1.4; border: 1px solid var(--text-primary); padding: 15px; background: rgba(0,0,0,0.8); }
.tutorial-content p { margin-bottom: 10px; }
.tutorial-content code { color: var(--text-secondary); }

/* Layout */
.container { display: flex; height: 100vh; padding: 20px; }

/* Resizers */
.resizer {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    user-select: none;
}
.resizer-h {
    cursor: col-resize;
    width: 20px;
    height: 100%;
}
.resizer-v {
    cursor: row-resize;
    height: 20px;
    width: 100%;
}
.resizer-blob {
    background: var(--text-primary);
    border-radius: 10px;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.resizer:hover .resizer-blob,
.resizer.dragging .resizer-blob {
    opacity: 1;
    box-shadow: 0 0 5px var(--text-primary);
}
.resizer-h .resizer-blob {
    width: 4px;
    height: 40px;
}
.resizer-v .resizer-blob {
    height: 4px;
    width: 40px;
}

/* Terminal */
.terminal {
    width: 60%; flex: none; display: flex; flex-direction: column;
    border: 1px solid var(--text-primary); padding: 15px;
    background: var(--panel-bg); box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
    overflow: hidden;
    min-width: 300px;
}
body[data-theme="amber"] .terminal, body[data-theme="amber"] .system-monitor, body[data-theme="amber"] .network-map, body[data-theme="amber"] .gui-panel { box-shadow: inset 0 0 10px rgba(255, 176, 0, 0.2); }
body[data-theme="neon"] .terminal, body[data-theme="neon"] .system-monitor, body[data-theme="neon"] .network-map, body[data-theme="neon"] .gui-panel { box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.2); }
body[data-theme="corpo"] .terminal, body[data-theme="corpo"] .system-monitor, body[data-theme="corpo"] .network-map, body[data-theme="corpo"] .gui-panel { box-shadow: inset 0 0 10px rgba(136, 204, 255, 0.2); }

.history { flex: 1; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; }
.history::-webkit-scrollbar { width: 8px; }
.history::-webkit-scrollbar-track { background: transparent; }
.history::-webkit-scrollbar-thumb { background: var(--text-primary); }
.line { margin-bottom: 5px; word-wrap: break-word; white-space: pre-wrap; }
.line.cyan { color: var(--text-secondary); text-shadow: 0 0 5px var(--text-secondary); }
.line.red { color: var(--text-danger); text-shadow: 0 0 5px var(--text-danger); }

.input-area { display: flex; align-items: center; }
.prompt { margin-right: 10px; }
#cmd-input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-stack); font-size: 1rem; outline: none; text-shadow: 0 0 5px var(--text-primary); }

/* Sidebar */
.sidebar { flex: 1; display: flex; flex-direction: column; min-width: 250px; }
.system-monitor, .network-map {
    border: 1px solid var(--text-primary); padding: 10px; background: var(--panel-bg);
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2); display: flex; flex-direction: column;
}
.system-monitor { flex: none; height: auto; min-height: 100px; overflow-y: auto; }
.system-monitor::-webkit-scrollbar { width: 8px; }
.system-monitor::-webkit-scrollbar-track { background: transparent; }
.system-monitor::-webkit-scrollbar-thumb { background: var(--text-primary); }
.network-map { 
    flex: none; height: 30%; 
    overflow: hidden; 
    min-height: 150px; 
    display: flex;
    flex-direction: column;
}
.network-map canvas {
    flex: 1;
    width: 100%;
    height: 100%;
}

h2 { font-size: 1.1rem; margin-bottom: 10px; border-bottom: 1px solid var(--text-primary); padding-bottom: 5px; }

.stat { margin-bottom: 10px; font-size: 0.9rem;}
.stat > span { display: block; margin-bottom: 3px; }
.progress-container { width: 100%; height: 15px; border: 1px solid var(--text-primary); background: rgba(0,0,0,0.5); position: relative; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; transition: width 0.2s linear, background-color 0.3s linear; }

.heat-green { background-color: var(--text-primary); }
.heat-yellow { background-color: #ffff00; }
.heat-red { background-color: var(--text-danger); }
.trace-red { background-color: var(--text-danger); }
.trace-container { border-color: var(--text-danger); background: rgba(255, 0, 68, 0.1); }
.trace-active .trace-red { animation: bar-blink 1s infinite; }
@keyframes bar-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.connection-status { margin-top: 10px; font-weight: bold; font-size: 0.9rem;}
.status-offline { color: var(--text-primary); }
.status-connected { color: var(--text-danger); animation: text-blink 1s infinite; }
@keyframes text-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Network Map */
.network-map canvas { flex: 1; width: 100%; height: 100%; border: 1px dotted var(--text-primary); background: rgba(0,0,0,0.5); }

/* GUI Panel */
.gui-panel {
    flex: 1 1 40%; display: flex; flex-direction: column; border: 1px solid var(--text-primary);
    background: var(--panel-bg); box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2); overflow: hidden;
}
.gui-tabs { display: flex; border-bottom: 1px solid var(--text-primary); background: rgba(0, 0, 0, 0.5); }
.gui-tabs button {
    flex: 1; background: transparent; color: var(--text-primary); border: none;
    border-right: 1px solid var(--text-primary); padding: 8px 5px; cursor: pointer;
    font-family: var(--font-stack); font-size: 0.85rem; text-transform: uppercase;
}
.gui-tabs button:last-child { border-right: none; }
.gui-tabs button.active { background: var(--text-primary); color: var(--bg-color); font-weight: bold; }
.gui-content { flex: 1; overflow-y: auto; padding: 10px; }
.gui-content::-webkit-scrollbar { width: 8px; }
.gui-content::-webkit-scrollbar-track { background: transparent; }
.gui-content::-webkit-scrollbar-thumb { background: var(--text-primary); }

.gui-btn {
    background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary);
    padding: 4px 8px; cursor: pointer; margin: 2px; font-family: var(--font-stack); font-size: 0.85rem; transition: all 0.1s;
}
.gui-btn:hover { background: var(--text-primary); color: var(--bg-color); }
.gui-item { margin-bottom: 8px; border-bottom: 1px dashed var(--text-primary); padding-bottom: 6px; font-size: 0.9rem; }

/* Animations */
body.trace-pulse-active {
    box-shadow: inset 0 0 50px rgba(255, 0, 68, 0.4);
    animation: trace-pulse-anim 1s infinite alternate;
}
@keyframes trace-pulse-anim {
    from { box-shadow: inset 0 0 10px rgba(255, 0, 68, 0.2); }
    to { box-shadow: inset 0 0 80px rgba(255, 0, 68, 0.6); }
}

body.glitch-active .terminal {
    animation: glitch 0.2s linear infinite; text-shadow: 2px 0 var(--text-danger), -2px 0 var(--text-secondary);
}
@keyframes glitch { 0% { transform: translate(0) } 20% { transform: translate(-2px, 1px) } 40% { transform: translate(-1px, -1px) } 60% { transform: translate(2px, 2px) } 80% { transform: translate(1px, -2px) } 100% { transform: translate(0) } }