:root {
    --bg-color: #0A0A0F;
    --panel-bg: rgba(20, 20, 30, 0.6);
    --panel-border: rgba(255, 255, 255, 0.1);
    --text-main: #E0E0E0;
    --text-muted: #888899;
    
    --neon-cyan: #00F0FF;
    --neon-magenta: #FF003C;
    --neon-yellow: #FFEA00;
    --neon-green: #39FF14;
    --neon-gold: #FFD700;
    
    --font-ui: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-ui); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; }
#app-container { display: flex; width: 100%; height: 100%; padding: 20px; gap: 20px; }

.glass-panel { background: var(--panel-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--panel-border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.panel-header h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--neon-cyan); margin-bottom: 20px; border-bottom: 1px solid var(--panel-border); padding-bottom: 10px; }

#console-panel { flex: 0 0 350px; }
#terminal-output { flex-grow: 1; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; display: flex; flex-direction: column; gap: 5px; }
#terminal-output p { line-height: 1.4; }
.sys-msg { color: var(--text-muted); }
.cmd-msg { color: var(--neon-cyan); }
.warn-msg { color: var(--neon-yellow); }
.err-msg { color: var(--neon-magenta); }
.surplus-msg { color: var(--neon-green); font-weight: bold; }
.apex-msg { color: var(--neon-gold); font-weight: bold; font-size: 14px; border: 1px solid rgba(255, 215, 0, 0.4); padding: 4px; border-radius: 4px; background: rgba(255, 215, 0, 0.1); }

#viewport { flex-grow: 1; position: relative; border-radius: 12px; background: radial-gradient(circle at center, #151522 0%, #0A0A0F 100%); border: 1px solid var(--panel-border); overflow: hidden; display: flex; flex-direction: column; }
#substrate-canvas { width: 100%; height: 100%; }

#controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 15px; padding: 15px 25px; }
button { background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); font-family: var(--font-mono); font-size: 12px; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; }
button:hover { background: rgba(0, 240, 255, 0.1); box-shadow: 0 0 10px rgba(0, 240, 255, 0.4); }
button.active { background: var(--neon-cyan); color: var(--bg-color); }
button.btn-warn { border-color: var(--neon-yellow); color: var(--neon-yellow); }
button.btn-warn:hover { background: rgba(255, 234, 0, 0.1); box-shadow: 0 0 10px rgba(255, 234, 0, 0.4); }

#telemetry-panel { flex: 0 0 300px; }
.telemetry-data { display: flex; flex-direction: column; gap: 15px; }
.data-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.data-row .label { color: var(--text-muted); }
.data-row .value { font-family: var(--font-mono); font-weight: bold; }
.clock-val { color: var(--neon-cyan); }
.mass-val { color: var(--neon-magenta); }
.energy-val { color: var(--neon-yellow); }
.surplus-val { color: var(--neon-green); }

hr { border: none; border-top: 1px solid var(--panel-border); margin: 10px 0; }

.link { stroke: var(--neon-cyan); stroke-opacity: 0.6; fill: none; }
.link.stress { stroke: var(--neon-yellow); stroke-width: 2.5px; stroke-opacity: 0.9; }

.node circle.outer { fill: var(--bg-color); stroke: var(--neon-cyan); stroke-width: 2px; }
.node.knot circle.outer { stroke: var(--neon-magenta); fill: rgba(255, 0, 60, 0.2); stroke-width: 3px; filter: drop-shadow(0 0 6px var(--neon-magenta)); }
.node.functor circle.outer { stroke: var(--neon-green); fill: rgba(57, 255, 20, 0.2); stroke-width: 4px; filter: drop-shadow(0 0 12px var(--neon-green)); }
.node.apex circle.outer { stroke: var(--neon-gold); fill: rgba(255, 215, 0, 0.25); stroke-width: 5px; filter: drop-shadow(0 0 20px var(--neon-gold)); }

.node text { font-family: var(--font-mono); font-size: 10px; fill: var(--text-main); pointer-events: none; }

.node polygon.shadow-graph { fill: none; stroke: var(--neon-green); stroke-width: 1.5px; opacity: 0; transform-origin: center; }
.node.functor polygon.shadow-graph { opacity: 1; animation: spin 3s linear infinite; }
.node.apex polygon.shadow-graph { stroke: var(--neon-gold); stroke-width: 2.5px; opacity: 1; animation: spin 1s linear infinite; }

@keyframes spin { 100% { transform: rotate(360deg); } }