/* Inherit root variables from style.css */
body { margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-ui); }

#top-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--panel-border); background: var(--panel-bg); z-index: 10;}
#top-nav h1 { margin: 0; font-size: 16px; font-family: var(--font-mono); font-weight: bold; color: var(--text-muted); letter-spacing: 2px;}
.nav-links { display: flex; gap: 20px; }
.nav-link { color: var(--neon-cyan); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 13px; transition: 0.2s;}
.nav-link:hover { color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green);}

#sandbox-wrapper { display: flex; flex: 1; overflow: hidden; width: 100%; }

/* Left Toolbar */
#toolbar-left { width: 240px; border-right: 1px solid var(--panel-border); border-radius: 0; border-top: none; border-bottom: none; border-left: none; padding: 15px; display: flex; flex-direction: column; gap: 10px; z-index: 10;}
#toolbar-left h3 { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 2px; margin: 0 0 5px 0;}

.tool-btn { background: transparent; border: 1px solid var(--panel-border); color: var(--text-main); padding: 10px; border-radius: 6px; cursor: pointer; text-align: left; transition: 0.2s; font-family: var(--font-ui); font-size: 14px;}
.tool-btn:hover { background: rgba(255,255,255,0.05); }
.tool-btn.active { background: rgba(0, 240, 255, 0.1); border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,240,255,0.2); }
.tool-btn.causal.active { border-color: var(--neon-cyan); }
.tool-btn.void.active { border-color: var(--text-muted); background: rgba(255,255,255,0.1); box-shadow: 0 0 10px rgba(255,255,255,0.2);}
.tool-btn.erase.active { border-color: var(--neon-magenta); background: rgba(255,0,60,0.1); box-shadow: 0 0 10px rgba(255,0,60,0.2);}

.action-btn { background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); padding: 10px; cursor: pointer; border-radius: 6px; font-family: var(--font-mono); font-weight: bold;}
.action-btn.active { background: var(--neon-cyan); color: #000; box-shadow: 0 0 10px var(--neon-cyan); }
.action-btn:hover:not(.active) { background: rgba(0, 240, 255, 0.1); }

/* Center Canvas */
#canvas-container { flex: 1; background: radial-gradient(circle at center, #151522 0%, #0A0A0F 100%); position: relative; min-width: 400px; height: 100%; border-left: 1px solid var(--panel-border); border-right: 1px solid var(--panel-border);}
#sandbox-canvas { width: 100%; height: 100%; position: absolute; top:0; left:0;}

/* Right Inspector */
#inspector-right { width: 320px; border-left: 1px solid var(--panel-border); border-radius: 0; border-top: none; border-bottom: none; border-right: none; padding: 15px; display: flex; flex-direction: column; overflow-y: auto; background: var(--panel-bg); z-index: 10;}
#inspector-right h3 { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 2px; margin: 0 0 15px 0;}

#cl-asm-input { background: #000; border: 1px solid var(--panel-border); color: var(--neon-green); font-family: var(--font-mono); padding: 10px; height: 80px; resize: none; border-radius: 6px; margin-bottom: 10px; font-size: 12px;}
#cl-asm-input:focus { outline: none; border-color: var(--neon-magenta); }

/* Inspect Data block */
.inspect-kv { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-family: var(--font-mono);}
.inspect-k { color: var(--text-muted); }
.inspect-v { color: var(--text-main); font-weight: bold;}

/* D3 Graph Overrides for Sandbox */
.link { fill: none; stroke-width: 2px; stroke-opacity: 0.6; }
.link.normal { stroke: var(--neon-cyan); }
.link.void { stroke: var(--text-muted); stroke-dasharray: 4,4; stroke-opacity: 0.4; }
.link.stress { stroke: var(--neon-yellow); stroke-width: 3px; stroke-opacity: 0.9; }
.node { cursor: pointer; }
.node.selected .outer { stroke-width: 3px; filter: drop-shadow(0 0 8px #FFF); stroke: #FFF !important; }
.node.apex .outer { stroke: var(--neon-gold) !important; fill: rgba(255, 215, 0, 0.2) !important; filter: drop-shadow(0 0 10px var(--neon-gold)) !important; }

/* Real-Time Rosetta Overlay */
#rosetta-overlay { position: absolute; top: 8%; left: 15%; right: 15%; bottom: 15%; background: rgba(10, 10, 15, 0.95); border: 2px solid var(--neon-magenta); border-radius: 12px; z-index: 2000; display: flex; flex-direction: column; padding: 40px; box-shadow: 0 0 50px rgba(255, 0, 60, 0.3); backdrop-filter: blur(10px); }
.rosetta-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,0,60,0.3); padding-bottom: 20px; margin-bottom: 30px; }
.rosetta-header h2 { color: var(--neon-magenta); margin: 0; font-family: var(--font-mono); letter-spacing: 2px; font-size: 18px; text-shadow: 0 0 15px var(--neon-magenta); }
.rosetta-content { display: flex; flex: 1; gap: 40px; align-items: stretch; justify-content: center; }
.rosetta-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; background: rgba(0,0,0,0.5); padding: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }
.rosetta-panel.classical h3 { color: #FF6666; font-size: 13px; letter-spacing: 2px; margin: 0; border-bottom: 1px solid rgba(255,0,0,0.2); padding-bottom: 10px;}
.rosetta-panel.substrate h3 { color: var(--neon-cyan); font-size: 13px; letter-spacing: 2px; margin: 0; border-bottom: 1px solid rgba(0,240,255,0.2); padding-bottom: 10px;}
.rosetta-code { background: transparent; font-family: var(--font-mono); font-size: 22px; font-weight: bold; min-height: 80px; display: flex; align-items: center; justify-content: left; }
.classical .rosetta-code { color: #FFF; }
.substrate .rosetta-code { color: var(--neon-green); }
.rosetta-panel p { color: var(--text-main); line-height: 1.6; font-size: 14px;}
.rosetta-sep { font-family: var(--font-mono); font-size: 24px; color: var(--text-muted); font-weight: bold; align-self: center; }
#close-rosetta { border-color: var(--neon-cyan); color: var(--neon-cyan); font-family: var(--font-mono); font-weight: bold; padding: 10px 20px; font-size: 12px; transition: 0.2s;}
#close-rosetta:hover { background: var(--neon-cyan); color: #000; }