:root {
    --bg-color: #0f172a;
    --panel-bg: #1e293b;
    --sidebar-bg: #334155;
    --text-main: #f8fafc;
    --blue: #38bdf8;
    --neon-yellow: #facc15;
    --neon-cyan: #22d3ee;
    --amber: #fbbf24;
    --charcoal: #475569;
    --gold: #d4af37;
}

body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg-color); color: var(--text-main); display: flex; flex-direction: column; height: 100vh; }
header { padding: 10px 20px; background: var(--panel-bg); text-align: center; border-bottom: 1px solid #334155; }
#app { display: flex; flex: 1; overflow: hidden; }

#controls { width: 300px; background: var(--sidebar-bg); padding: 20px; border-right: 1px solid #334155; display: flex; flex-direction: column; gap: 15px; }
#controls label { display: block; font-size: 0.9em; font-weight: bold; }
#controls select, #controls input { width: 100%; margin-top: 5px; }

#diagram-container { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; background: #000; overflow: hidden; }
#cpoCanvas { cursor: crosshair; }

#status-banner { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 2em; color: red; font-weight: bold; pointer-events: none; }

#tech-info-box { background: var(--panel-bg); padding: 15px; border-radius: 5px; margin-top: auto; font-size: 0.8em; }
#insights-log { margin-top: 10px; height: 100px; overflow-y: auto; }