:root {
    --bg-dark: #0a0a14;
    --bg-panel: #12121f;
    --bg-metal: #1a1a2e;
    --amber: #ff8c00;
    --amber-dim: #4a2800;
    --amber-glow: #ffaa33;
    --red-led: #ff2200;
    --red-dim: #3a0800;
    --green: #00ff41;
    --green-dim: #003a10;
    --text-muted: #667788;
    --border: #2a2a3e;
}

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

body {
    background: var(--bg-dark);
    color: #ccc;
    font-family: 'Share Tech Mono', monospace;
    min-height: 100vh;
    overflow-x: hidden;
}

.led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.1s ease;
}

.led-on {
    background: var(--red-led);
    box-shadow: 0 0 6px var(--red-led), 0 0 12px var(--red-led), 0 0 20px rgba(255, 34, 0, 0.4);
}

.led-off {
    background: var(--red-dim);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.led-amber-on {
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber), 0 0 20px rgba(255, 140, 0, 0.4);
}

.led-amber-off {
    background: var(--amber-dim);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.led-green-on {
    background: var(--green);
    box-shadow: 0 0 6px var(--green), 0 0 12px var(--green);
}

.led-green-off {
    background: var(--green-dim);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.front-panel {
    background: linear-gradient(180deg, #2a2a3a 0%, #1e1e2e 5%, #16162a 50%, #1e1e2e 95%, #2a2a3a 100%);
    border: 2px solid #3a3a4e;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.seven-seg {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber), 0 0 16px rgba(255, 140, 0, 0.3);
    letter-spacing: 2px;
}

.btn-retro {
    background: linear-gradient(180deg, #4a4a5e 0%, #2a2a3e 40%, #1a1a2e 100%);
    border: 1px solid #5a5a6e;
    border-radius: 4px;
    color: #ccc;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-retro:hover {
    background: linear-gradient(180deg, #5a5a6e 0%, #3a3a4e 40%, #2a2a3e 100%);
}

.btn-retro:active {
    background: linear-gradient(180deg, #1a1a2e 0%, #2a2a3e 40%, #3a3a4e 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    transform: translateY(1px);
}

.btn-retro.active {
    background: linear-gradient(180deg, #1a1a2e 0%, #2a2a3e 100%);
    border-color: var(--amber);
    color: var(--amber);
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.3), inset 0 2px 4px rgba(0,0,0,0.5);
}

.memory-row:hover {
    background: rgba(255, 140, 0, 0.05);
}

.memory-pc {
    background: rgba(255, 140, 0, 0.15) !important;
    border-left: 2px solid var(--amber);
}

.memory-bp {
    background: rgba(255, 34, 0, 0.1) !important;
}

.console-output {
    font-family: 'Share Tech Mono', monospace;
    color: var(--green);
    background: #0a0a0f;
    border: 1px solid #1a2a1a;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
}

.flag-set {
    background: var(--green);
    color: #000;
    box-shadow: 0 0 6px var(--green);
}

.flag-clear {
    background: #1a1a2e;
    color: #555;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: #3a3a4e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a6e;
}

@keyframes flash {
    0% { background: rgba(255, 140, 0, 0.4); }
    100% { background: transparent; }
}

.mem-flash {
    animation: flash 0.5s ease-out;
}

.speed-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #2a2a3e;
    border-radius: 2px;
    outline: none;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--amber);
    cursor: pointer;
    box-shadow: 0 0 6px var(--amber);
}

.drop-zone {
    border: 2px dashed #3a3a4e;
    transition: all 0.2s ease;
}

.drop-zone.drag-over {
    border-color: var(--amber);
    background: rgba(255, 140, 0, 0.05);
}