:root {
    --bg: #1a1e24;
    --board-bg: #2a3a2a;
    --board-border: #4a5a4a;
    --dot-color: #8a9a8a;
    --dot-hover: #c0d0c0;
    --wire-color: #3080e0;
    --wire-thick: 3.5;
    --probe-color: #e04040;
    --probe-thin: 1.5;
    --toolbar-bg: #252a30;
    --toolbar-border: #3a4048;
    --btn-bg: #2d333a;
    --btn-hover: #3a424a;
    --btn-active: #1a5276;
    --btn-active-border: #2e86c1;
    --text-primary: #e0e4e8;
    --text-secondary: #8a9098;
    --accent: #2e86c1;
    --danger: #c0392b;
    --ghost-color: rgba(46, 134, 193, 0.35);
    --dialog-bg: #2d333a;
    --dialog-border: #4a5058;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: var(--bg); color: var(--text-primary);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden; height: 100vh; user-select: none;
}
#app { display: flex; flex-direction: column; height: 100vh; }
#toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px; background: var(--toolbar-bg);
    border-bottom: 1px solid var(--toolbar-border); flex-shrink: 0; gap: 12px; flex-wrap: wrap;
}
.tool-group { display: flex; gap: 4px; align-items: center; }
.tool-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 10px; background: var(--btn-bg); border: 2px solid transparent;
    border-radius: 6px; color: var(--text-secondary); cursor: pointer;
    font-size: 10px; transition: all 0.15s ease; min-width: 52px;
}
.tool-btn:hover { background: var(--btn-hover); color: var(--text-primary); }
.tool-btn.active { background: var(--btn-active); border-color: var(--btn-active-border); color: #fff; }
.tool-btn.eraser.active { background: #5a2020; border-color: var(--danger); }
.actions button {
    padding: 6px 14px; background: var(--btn-bg); border: 1px solid var(--toolbar-border);
    border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 12px; transition: all 0.15s ease;
}
.actions button:hover { background: var(--btn-hover); color: var(--text-primary); }
#board-container {
    flex: 1; display: flex; align-items: center; justify-content: center;
    overflow: auto; padding: 20px;
    background: radial-gradient(circle at 50% 50%, #2a3a2a 0%, #1a2a1a 100%);
}
#board {
    background: var(--board-bg); border: 2px solid var(--board-border); border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.2); cursor: crosshair;
}
.grid-dot { fill: var(--dot-color); transition: fill 0.1s; }
.grid-dot:hover { fill: var(--dot-hover); }
.slot-hitbox { fill: transparent; cursor: pointer; }
.slot-hitbox:hover { fill: rgba(46, 134, 193, 0.08); }
.element-group { cursor: pointer; }
.element-group:hover .element-highlight { opacity: 0.15; }
.element-highlight { fill: var(--accent); opacity: 0; transition: opacity 0.15s; }
.ghost-element { opacity: 0.4; pointer-events: none; }
.wire-line { stroke: var(--wire-color); stroke-width: var(--wire-thick); stroke-linecap: round; }
.probe-line { stroke: var(--probe-color); stroke-width: var(--probe-thin); stroke-linecap: round; stroke-dasharray: 6 3; }
.resistor-body { fill: none; stroke: var(--wire-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.resistor-lead { stroke: var(--wire-color); stroke-width: var(--wire-thick); stroke-linecap: round; }
.battery-plate-pos { stroke: var(--wire-color); stroke-width: 1.5; stroke-linecap: round; }
.battery-plate-neg { stroke: var(--wire-color); stroke-width: 3.5; stroke-linecap: round; }
.battery-lead { stroke: var(--wire-color); stroke-width: var(--wire-thick); stroke-linecap: round; }
.battery-label { fill: #cc4444; font-size: 10px; font-weight: bold; font-family: 'Segoe UI', sans-serif; }
.bulb-circle { stroke-width: 2; transition: fill 0.3s, stroke 0.3s; }
.bulb-cross { stroke-width: 1.5; stroke-linecap: round; }
.bulb-lead { stroke: var(--wire-color); stroke-width: var(--wire-thick); stroke-linecap: round; }
.meter-circle { stroke-width: 2; fill: var(--bg); }
.meter-label { font-size: 13px; font-weight: bold; font-family: 'Segoe UI', sans-serif; text-anchor: middle; dominant-baseline: central; }
.meter-reading { font-size: 13px; font-weight: bold; font-family: 'Consolas', 'Courier New', monospace; text-anchor: middle; fill: #88cc88; }
.bulb-reading { filter: drop-shadow(0 0 3px #111) drop-shadow(0 0 6px #111); }
.meter-lead { stroke-width: var(--wire-thick); stroke-linecap: round; }
.ammeter .meter-circle { stroke: var(--wire-color); }
.ammeter .meter-label { fill: var(--wire-color); }
.ammeter .meter-lead { stroke: var(--wire-color); }
.voltmeter .meter-circle { stroke: var(--probe-color); stroke-dasharray: 4 2; }
.voltmeter .meter-label { fill: var(--probe-color); }
.voltmeter .meter-lead { stroke: var(--probe-color); stroke-width: var(--probe-thin); stroke-dasharray: 6 3; }
.switch-contact { fill: var(--wire-color); }
.switch-target { fill: none; stroke: var(--wire-color); stroke-width: 1.5; }
.switch-arm { stroke: var(--wire-color); stroke-width: 2.5; stroke-linecap: round; transition: transform 0.2s ease; }
.switch-lead { stroke: var(--wire-color); stroke-width: var(--wire-thick); stroke-linecap: round; }
.value-label { font-size: 10px; font-family: 'Consolas', 'Courier New', monospace; fill: var(--text-secondary); text-anchor: middle; pointer-events: none; }
#status-bar {
    padding: 6px 16px; background: var(--toolbar-bg); border-top: 1px solid var(--toolbar-border);
    font-size: 12px; color: var(--text-secondary); flex-shrink: 0;
}
dialog {
    background: var(--dialog-bg); border: 1px solid var(--dialog-border); border-radius: 10px;
    color: var(--text-primary); padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,0.6); min-width: 260px;
}
dialog::backdrop { background: rgba(0,0,0,0.5); }
.dialog-content { padding: 20px; }
.dialog-content h3 { margin-bottom: 16px; font-size: 16px; color: var(--accent); }
.dialog-field { margin-bottom: 16px; }
.dialog-field label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-secondary); }
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row input {
    flex: 1; padding: 8px 10px; background: var(--bg); border: 1px solid var(--toolbar-border);
    border-radius: 6px; color: var(--text-primary); font-size: 14px; font-family: 'Consolas', monospace; outline: none;
}
.input-row input:focus { border-color: var(--accent); }
.input-row span { font-size: 13px; color: var(--text-secondary); min-width: 20px; }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.dialog-buttons button {
    padding: 8px 20px; border: 1px solid var(--toolbar-border); border-radius: 6px;
    cursor: pointer; font-size: 13px; transition: all 0.15s;
}
#dialog-ok { background: var(--accent); color: #fff; border-color: var(--accent); }
#dialog-ok:hover { filter: brightness(1.2); }
#dialog-cancel { background: var(--btn-bg); color: var(--text-secondary); }
#dialog-cancel:hover { background: var(--btn-hover); color: var(--text-primary); }
.polarity-row { display: flex; align-items: center; gap: 12px; }
.polarity-btn {
    padding: 6px 16px; background: var(--btn-bg); border: 2px solid var(--toolbar-border);
    border-radius: 6px; color: var(--text-primary); cursor: pointer; font-size: 14px;
    font-weight: bold; transition: all 0.15s; font-family: 'Consolas', monospace;
}
.polarity-btn:hover { background: var(--btn-hover); border-color: var(--accent); }
.polarity-btn.reversed { background: #5a3020; border-color: #e08040; color: #ffcc88; }
.polarity-info { font-size: 13px; color: var(--text-secondary); }