/*
 * style.css - ABC-80 Single-Board Microcomputer 100% Authentic Digital Twin Stylesheet
 *
 * Copyright (C) 2026, Charles Chiou
 */

:root {
    --bg-workspace: #05070a;
    --bg-header: #0a0e16;
    --border-dark: #151d2a;

    /* Authentic Stepped Molded Beige ABS Enclosure */
    --chassis-base-dark: #242c38;
    --chassis-outer-top: #f7f4ec;
    --chassis-bevel-1: #e2ddd0;
    --chassis-bevel-2: #c5bead;
    --chassis-well-deep: #080d14;

    /* Authentic Vintage Emerald Green Solder Mask FR-4 PCB */
    --pcb-green-base: #426349;
    --pcb-green-light: #527a5a;
    --pcb-green-dark: #2c4232;
    --pcb-trace-subtle: rgba(120, 180, 130, 0.16);
    --pcb-gold-pad: #e5b83b;
    --pcb-silver-lead: #cbd5e1;
    --pcb-silk-white: #f8fafc;

    /* DIP Integrated Circuits & Sockets */
    --ic-epoxy-matte: #161a22;
    --ic-epoxy-bevel: #2b3544;
    --ic-socket-black: #090c10;
    --ic-lead-silver: #e2e8f0;
    --ic-ceramic-brown: #5c4a3b;
    --ic-ceramic-gold: #eab308;
    --ic-green-socket: #166534;
    --ic-green-socket-frame: #14532d;

    /* 7-Segment LED Display (Ruby Red Acrylic) */
    --led-red-active: #ff1c1c;
    --led-red-core: #ffffff;
    --led-red-glow: rgba(255, 30, 30, 0.95);
    --led-red-ghost: #2b0505;
    --led-filter-acrylic: #140202;
    --led-bezel-rim: #3b0606;
    --led-disc-red-on: #ff1a1a;
    --led-disc-green-on: #00e038;

    /* Keypad Frame & Dual-Tone Keycaps */
    --key-frame-bg: #ece5d7;
    --key-frame-border: #b8ad96;
    --key-well-shadow: #2a251e;
    --key-hex-yellow-top: #f9d15a;
    --key-hex-yellow-mid: #f5c146;
    --key-hex-yellow-bottom: #e5a828;
    --key-hex-border: #a88622;
    --key-fn-cream-top: #ffffff;
    --key-fn-cream-mid: #f3ece0;
    --key-fn-cream-bottom: #dbd3c2;
    --key-fn-border: #b8af9c;
    --key-text-brown: #1f1b14;

    /* Developer Inspector */
    --inspector-bg: #0b1018;
    --inspector-card: #06090e;
    --accent-blue: #38bdf8;
    --accent-gold: #fbbf24;
    --accent-green: #4ade80;

    --font-ui: 'Inter', -apple-system, sans-serif;
    --font-mono: 'Fira Code', monospace;
    --font-digital: 'Orbitron', monospace;
}

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

body {
    background: var(--bg-workspace);
    color: #f1f5f9;
    font-family: var(--font-ui);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header Bar */
#main-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-dark);
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-badge {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.brand-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.brand-subtitle {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-gold);
}

.header-center {
    display: flex;
    align-items: center;
    gap: 14px;
}

.backend-status-pill {
    background: #04070c;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot-connected { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); }
.dot-offline { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

.clock-display {
    background: #04070c;
    border: 1px solid #1e293b;
    border-radius: 4px;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    display: flex;
    gap: 6px;
}

.clock-label { color: #64748b; }
.clock-val { color: var(--accent-blue); font-weight: 600; }
.clock-divider { color: #334155; }

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn {
    background: #141c2b;
    border: 1px solid #24334a;
    color: #f1f5f9;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.header-btn:hover {
    background: #1f2c42;
    border-color: #38bdf8;
}

.sound-active { color: var(--accent-green); border-color: rgba(74, 222, 128, 0.4); }

/* Main Workspace */
#main-workspace {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at 35% 40%, #0d121b 0%, #020305 90%);
}

#hardware-panel-section {
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #0d121b;
    position: relative;
    user-select: none;
}

/* Board Configuration Ribbon Toolbar (Instance, ROM, External I/O & Manual) */
.board-panel-toolbar {
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 16px;
    background: rgba(10, 14, 22, 0.92);
    border-bottom: 1px solid #1e293b;
    z-index: 40;
}

.board-manual-btn {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #38bdf8;
    color: #38bdf8;
    border-radius: 4px;
    padding: 3px 12px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(56, 189, 248, 0.15);
    height: 26px;
    box-sizing: border-box;
}

.board-manual-btn:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35);
}

/* Board Stage Centered Flex Container */
.board-stage {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

#hardware-panel-section.is-panning {
    cursor: grabbing !important;
}

/* Production Presentation: Calibration & Floating Navigation HUDs Hidden by Default */
#btn-calibration-mode {
    display: none !important;
}

.canvas-view-controls {
    display: none !important;
}

body.dev-tools-visible #btn-calibration-mode {
    display: flex !important;
}

body.dev-tools-visible .canvas-view-controls {
    display: flex !important;
}

/* ==========================================================================
   Interactive Component Inspection Tooltip (CAD Yellow Box)
   ========================================================================== */
.component-tooltip-box {
    position: fixed;
    z-index: 99999;
    display: none;
    pointer-events: none;
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    color: #0f172a;
    border: 1.5px solid #d97706;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    min-width: 160px;
    white-space: normal;
    word-break: break-word;
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

.component-tooltip-box.visible {
    display: block;
    opacity: 1;
}

.tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(180, 83, 9, 0.35);
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.tooltip-refdes {
    font-weight: 800;
    font-size: 11.5px;
    color: #b45309;
    letter-spacing: 0.5px;
}

.tooltip-pkg {
    font-size: 9.5px;
    color: #475569;
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 600;
}

.tooltip-name {
    font-weight: 700;
    font-size: 11px;
    color: #1e293b;
    margin-bottom: 2px;
}

.tooltip-specs {
    font-size: 10px;
    color: #334155;
    margin-bottom: 2px;
}

.tooltip-role {
    font-size: 9.5px;
    color: #64748b;
    font-style: italic;
}

/* Floating Viewport Pan & Zoom Controls */
.canvas-view-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(11, 16, 26, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.1);
    user-select: none;
}

.view-ctrl-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}

.view-ctrl-btn {
    background: #141d2c;
    border: 1px solid #243550;
    color: #cbd5e1;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.view-ctrl-btn:hover {
    background: #1e2c44;
    border-color: #38bdf8;
    color: #38bdf8;
}

.view-ctrl-btn:active {
    transform: scale(0.92);
}

.view-ctrl-btn.view-btn-text {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    width: 32px;
}

.view-zoom-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    min-width: 40px;
    text-align: center;
}

.view-dpad-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.view-dpad-mid {
    display: flex;
    align-items: center;
    gap: 3px;
}

.view-dpad-btn {
    background: #141d2c;
    border: 1px solid #243550;
    color: #94a3b8;
    width: 24px;
    height: 22px;
    font-size: 9px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
    padding: 0;
}

.view-dpad-btn:hover {
    background: #1e2c44;
    border-color: #38bdf8;
    color: #f1f5f9;
}

.view-dpad-btn:active {
    background: #0284c7;
    color: #ffffff;
    transform: scale(0.92);
}

/* ==========================================================================
   Pure CSS/SVG Digital Twin Chassis & Component Subsystems
   ========================================================================== */
.trainer-chassis {
    height: auto;
    max-height: none;
    padding-right: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-origin: 0 0;
    will-change: transform;
}

/* Molded Beige Console Enclosure */
.chassis-outer-shell {
    position: relative;
    width: 563px;
    max-width: 563px;
    height: 756px;
    box-sizing: border-box;
    background:
        linear-gradient(90deg, transparent 0%, transparent 98.2%, rgba(50, 54, 46, 0.8) 98.9%, rgba(110, 114, 104, 0.5) 99.3%, rgba(142, 144, 134, 0.8) 99.6%, rgba(142, 144, 134, 0.9) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
        linear-gradient(180deg,
            #e4e4e0 0%,
            #e2e2de 5%,
            #cececb 9%,
            #c8c8c2 70%,
            #c8c8c0 90.0%,
            #b8b9af 92.2%,
            #9ea094 92.7%,
            #b2b4a8 93.2%,
            #c8cac0 94.2%,
            #c2c4ba 95.2%,
            #b4b6ac 95.9%,
            #72766c 96.5%,
            #888c82 97.0%,
            #c4c6bc 97.6%,
            #d2d4cc 98.6%,
            #dcded6 100%
        );
    background-position: 0 60px, 0 0, 0 0;
    background-size: 100% calc(100% - 60px), 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    border: 2.5px solid #a8aaa3;
    border-radius: 4px;
    padding: 50px 32px 44px 34px;
    box-shadow:
        0 0 0 3px #525a62,
        0 15px 35px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.35),
        inset 0 2px 3px #ffffff,
        inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}

.chassis-outer-shell::after {
    display: none;
}

.chassis-power-cord-svg {
    display: none;
}

.chassis-step-rim {
    background: linear-gradient(180deg, #d4d6ce 0%, #c6c8c0 40%, #c5c8bd 100%);
    border: 1.5px solid #9ea098;
    border-radius: 12px;
    padding: 10px 14px 10px 14px;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.chassis-inner-well {
    background: linear-gradient(180deg, #b8bcae 0%, #a4a89a 40%, #8c9082 100%);
    border: 1.5px solid #a2a698;
    border-radius: 6px;
    padding: 6px 8px 6px 8px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        inset 2px 0 4px rgba(0, 0, 0, 0.15),
        inset -2px 0 4px rgba(0, 0, 0, 0.15);
}

/* Emerald Green FR-4 PCB */
.abc80-pcb {
    background: #1e3f28;
    border: 1.5px solid #162c1d;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 445px;
    height: 660px;
    min-height: 660px;
    box-sizing: border-box;
    overflow: hidden;
}

.pcb-drilled-artwork {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
    pointer-events: none;
    border-radius: 2px;
}

/* =========================================================================
   Phase 3: Discrete Components Layer (#pcb-discretes-layer)
   ========================================================================= */
.pcb-discretes-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 445px;
    height: 660px;
    pointer-events: none;
    z-index: 8;
}

.pcb-discretes-layer .discrete-component {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* Stage 3.1: Top Edge Power, Reset & Audio Jack Footprints */
#disc-cap-c2 {
    left: 8px;
    top: 10px;
    width: 22px;
    height: 26px;
}

#disc-cap-c2 .blue-cap-100uf {
    width: 20px;
    height: 24px;
}

#disc-int-header {
    left: 31px;
    top: 18px;
    flex-direction: column;
    gap: 1px;
}

#disc-hw-rst {
    left: 247px;
    top: 6px;
    flex-direction: column;
    gap: 1px;
}

#disc-hw-rst .hw-reset-tactile-btn {
    width: 100% !important;
    height: calc(100% - 8px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#disc-hw-rst .tactile-red-plunger {
    width: 65% !important;
    height: 65% !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

#disc-jack-ear {
    left: 288px;
    top: 8px;
    flex-direction: column;
    gap: 1px;
}

#disc-jack-mic {
    left: 320px;
    top: 8px;
    flex-direction: column;
    gap: 1px;
}

#disc-jack-dc {
    left: 350px;
    top: 8px;
    flex-direction: column;
    gap: 1px;
}

#disc-jack-dc .dc-barrel-jack {
    background: linear-gradient(135deg, #ded8c4 0%, #cfc8b0 100%) !important;
    border: 1.2px solid #b5ad94 !important;
    width: 100% !important;
    height: calc(100% - 8px) !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#disc-jack-dc .jack-body {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#disc-jack-dc .jack-center-pin {
    width: 55% !important;
    height: 55% !important;
    background: #0c0f12 !important;
    border: 1px solid #1a202c !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 2px #000 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#disc-jack-dc .jack-center-pin::after {
    content: "" !important;
    position: absolute !important;
    width: 35% !important;
    height: 35% !important;
    background: #b45309 !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#disc-cap-c1 {
    left: 349px;
    top: 38px;
    width: 18px;
    height: 24px;
    z-index: 3;
}

#disc-cap-c1 .blue-cap-220uf {
    width: 18px;
    height: 24px;
}

#disc-lm7805 {
    left: 388px;
    top: 4px;
    width: 48px;
    height: 46px;
}

#disc-lm7805 .lm7805-regulator {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

#disc-lm7805 .to220-heatsink {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    height: 92% !important;
    background: #111417;
    border: 1.2px solid #23272e;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.9);
    box-sizing: border-box !important;
}

#disc-lm7805 .to220-heatsink::before,
#disc-lm7805 .to220-heatsink::after {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 6px;
    background: linear-gradient(90deg, #2b313a 0%, #15181c 100%);
    border-radius: 1px;
}

#disc-lm7805 .to220-heatsink::before { left: 2px; }
#disc-lm7805 .to220-heatsink::after { right: 2px; }

#disc-lm7805 .heatsink-screw {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 40% 40%, #f1f5f9 0%, #94a3b8 50%, #475569 85%, #0f172a 100%);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    z-index: 3;
}

#disc-lm7805 .heatsink-screw::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 1.5px;
    width: 9px;
    height: 2px;
    background: #1e293b;
}

#disc-lm7805 .to220-metal-tab {
    position: absolute !important;
    top: 12% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 42% !important;
    height: 35% !important;
    background: linear-gradient(180deg, #e4d5a8 0%, #d4c18c 45%, #b59f63 80%, #786638 100%);
    border-radius: 2px 2px 0 0;
    border: 0.8px solid #998347;
    z-index: 2;
    box-sizing: border-box !important;
}

#disc-lm7805 .to220-plastic-body {
    position: absolute !important;
    bottom: 4% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 42% !important;
    height: 30% !important;
    background: #181b1e;
    border-radius: 0 0 1px 1px;
    border: 0.8px solid #282d33;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    z-index: 2;
    box-sizing: border-box !important;
}

/* Stage 3.2: Column 1 Keypad Driver Subsystem */
#disc-col1-bus-pullups-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.disc-col1-bus-pullups-container .res-row {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 22px;
    height: 4px;
    pointer-events: auto;
}

.disc-col1-bus-pullups-container .res-pad-l,
.disc-col1-bus-pullups-container .res-pad-r,
#disc-col1-pullups .res-pad-l,
#disc-col1-pullups .res-pad-r {
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, #e2e8f0 30%, #64748b 90%);
    border-radius: 50%;
    flex-shrink: 0;
}

.disc-col1-bus-pullups-container .res-carbon-film {
    width: 15px;
    height: 3.2px;
}

#disc-col1-transistors {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Generic TO-92 Transistor Package (Horizontal Default: Flat face right, rounded back left) */
.to92-item {
    position: absolute;
    width: 18px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    box-sizing: border-box;
}

.to92-item .to92-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2a2e33 0%, #15181b 60%, #0d0f11 100%);
    border: 1px solid #3b424a;
    border-radius: 6px 1.5px 1.5px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 1.5px;
    box-sizing: border-box;
}

.to92-leads {
    display: flex;
    gap: 2px;
}

.to92-leads span {
    width: 1.8px;
    height: 1.8px;
    background: #cbd5e1;
    border-radius: 50%;
    box-shadow: inset 0 0.5px 0.5px rgba(0, 0, 0, 0.6);
}

/* Individual locations for Q9-Q16 (Col 1 Drivers) */
#disc-q9  { left: 23px; top: 265.5px; }
#disc-q10 { left: 23px; top: 273.2px; }
#disc-q11 { left: 23px; top: 281.8px; }
#disc-q12 { left: 23px; top: 289.8px; }
#disc-q13 { left: 23px; top: 296.0px; }
#disc-q14 { left: 23px; top: 305.5px; }
#disc-q15 { left: 23px; top: 321.3px; }
#disc-q16 { left: 23px; top: 336.8px; }

#disc-col1-pullups {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#disc-col1-pullups .res-row {
    position: absolute;
    width: 19px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

#disc-col1-pullups .res-carbon-film {
    width: 13px;
    height: 3px;
}

/* Individual locations for R(Q9) - R(Q16) 3.3k Pull-Ups */
#disc-r-q9  { left: 41px; top: 265.5px; }
#disc-r-q10 { left: 41px; top: 273.2px; }
#disc-r-q11 { left: 41px; top: 281.8px; }
#disc-r-q12 { left: 41px; top: 289.8px; }
#disc-r-q13 { left: 41px; top: 296.0px; }
#disc-r-q14 { left: 41px; top: 305.5px; }
#disc-r-q15 { left: 41px; top: 321.3px; }
#disc-r-q16 { left: 41px; top: 336.8px; }



/* Stage 3.3: Mid-Board Passives, Clock Crystal & Red Tantalum Capacitor */
/* CP: Red Tantalum Bead Capacitor */
#disc-tantalum-cp {
    left: 294px;
    top: 187px;
    width: 18px;
    height: 24px;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

.tantalum-bead-body {
    width: 13px;
    height: 15px;
    background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 45%, #7f1d1d 80%, #450a0a 100%);
    border-radius: 50% 50% 40% 40% / 60% 60% 35% 35%;
    border: 0.6px solid #991b1b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1px;
    box-sizing: border-box;
    transform: rotate(5deg);
}

.tantalum-bead-plus {
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.tantalum-bead-leads {
    display: flex;
    gap: 5px;
    margin-top: -1px;
}

.tantalum-bead-leads span {
    width: 1.2px;
    height: 3px;
    background: #cbd5e1;
}

.silk-cp-label {
    font-size: 6.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 1px;
    letter-spacing: 0.5px;
}

/* Clock Oscillator Section */
#disc-clock-section {
    left: 200px;
    top: 68px;
    width: 60px;
    height: 22px;
    pointer-events: auto;
}

.hc49-crystal-can {
    position: absolute;
    left: 12px;
    top: 2px;
    width: 28px;
    height: 11px;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 30%, #94a3b8 70%, #475569 100%);
    border: 0.8px solid #64748b;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crystal-engraving {
    font-family: var(--font-mono);
    font-size: 4px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.3px;
}

.ceramic-disc-cap {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 35% 35%, #fed7aa 0%, #f97316 60%, #9a3412 100%);
    border-radius: 50%;
    border: 0.6px solid #c2410c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ceramic-disc-cap .c-disc-body {
    font-family: var(--font-mono);
    font-size: 3.5px;
    font-weight: 800;
    color: #431407;
    line-height: 1;
}

.c-disc-clock-1 { left: 1px; top: 3px; }
.c-disc-clock-2 { left: 44px; top: 3px; }

#disc-r-clock, .clock-res-330 {
    position: absolute;
    left: 216px;
    top: 83px;
    width: 20px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

/* Programming Circuit Passives */
#disc-prog-passives {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#disc-res-28v {
    position: absolute;
    left: 194px;
    top: 180px;
    width: 24px;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

.silk-28v {
    position: absolute;
    right: -14px;
    top: 0;
    font-size: 5.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

/* Stage 3.3b: Reset & Clock Passives Subsystem (Between U8 and Reset/Audio Jacks) */
#disc-cap-50p,
#disc-cap-101a,
#disc-cap-101b {
    position: absolute;
    width: 14px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

#disc-cap-50p .ceramic-disc-body,
#disc-cap-101a .ceramic-disc-body,
#disc-cap-101b .ceramic-disc-body {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 35% 35%, #fed7aa 0%, #f97316 60%, #9a3412 100%);
    border-radius: 50%;
    border: 0.6px solid #c2410c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

#disc-cap-50p .c-disc-body,
#disc-cap-101a .c-disc-body,
#disc-cap-101b .c-disc-body {
    font-family: var(--font-mono);
    font-size: 4px;
    font-weight: 800;
    color: #431407;
    line-height: 1;
}

#disc-cap-10u {
    position: absolute;
    width: 14px;
    height: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

#disc-cap-10u .blue-cap-10uf {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 40%, #1d4ed8 75%, #172554 100%);
    border-radius: 3px 3px 4px 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#disc-cap-10u .cap-aluminum-top {
    width: 100%;
    height: 35%;
    background: radial-gradient(ellipse at 45% 45%, #ffffff 0%, #e2e8f0 45%, #94a3b8 80%, #64748b 100%);
    border-radius: 50%;
    border-bottom: 1px solid #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
}

#disc-cap-10u .cap-plus-mark {
    font-size: 5px;
    font-weight: 900;
    color: #1e3a8a;
    line-height: 1;
}

#disc-cap-10u .cap-negative-stripe {
    position: absolute;
    bottom: 2px;
    width: 100%;
    text-align: center;
    font-size: 6px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

#disc-r-rst-10k {
    position: absolute;
    width: 20px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

#disc-d-rst {
    position: absolute;
    width: 20px;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

#disc-d-rst .diode-wire-l,
#disc-d-rst .diode-wire-r {
    flex: 1;
    height: 1px;
    background: #94a3b8;
}

#disc-d-rst .diode-body-glass {
    width: 10px;
    height: 5px;
    background: linear-gradient(180deg, #fdba74 0%, #ea580c 50%, #9a3412 100%);
    border-radius: 1.5px;
    border: 0.5px solid #7c2d12;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#disc-d-rst .diode-cathode-band {
    position: absolute;
    left: 1.5px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #18181b;
    border-radius: 1px 0 0 1px;
}

#disc-q17 {
    position: absolute;
    left: 196px;
    top: 218px;
    pointer-events: auto;
}

#disc-prog-passives .res-row,
#disc-prog-passives .discrete-led-pkg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

.silk-ep {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

/* Staged Proto Area Components (Hidden per operator directive) */
#disc-clock-section,
#disc-tantalum-cp,
#disc-r-clock,
#disc-decoupling-caps,
#disc-cap-vcc1,
#disc-cap-vcc2,
#disc-cap-vcc3 {
    display: none !important;
}

/* VCC Decoupling Capacitors */
#disc-decoupling-caps {
    left: 0;
    top: 0;
    width: 445px;
    height: 660px;
    pointer-events: none;
}

#disc-cap-vcc1, .disc-cap-vcc1 { left: 162px; top: 82px; pointer-events: auto; }
#disc-cap-vcc2, .disc-cap-vcc2 { left: 284px; top: 82px; pointer-events: auto; }
#disc-cap-vcc3, .disc-cap-vcc3 { left: 244px; top: 182px; pointer-events: auto; }

/* Stage 3.4: Display Strobes & Audio Transducer Subsystem */
/* 120 Ohm x 8 Resistor Ladder (Segment Limit) */
#disc-disp-resistors {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#disc-disp-resistors .res-row {
    position: absolute;
    width: 22px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

#disc-disp-resistors .res-pad-l,
#disc-disp-resistors .res-pad-r {
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, #e2e8f0 30%, #64748b 90%);
    border-radius: 50%;
    flex-shrink: 0;
}

#disc-disp-resistors .res-carbon-film {
    width: 14px;
    height: 3px;
}

/* Exact pad positions matching hole scan (Board Coordinates) */
#disc-r-seg1 { left: 29.8px; top: 380.2px; }
#disc-r-seg2 { left: 29.8px; top: 388.0px; }
#disc-r-seg3 { left: 29.8px; top: 395.9px; }
#disc-r-seg4 { left: 29.8px; top: 403.8px; }
#disc-r-seg5 { left: 29.8px; top: 411.5px; }
#disc-r-seg6 { left: 29.8px; top: 419.0px; }
#disc-r-seg7 { left: 29.8px; top: 426.8px; }
#disc-r-seg8 { left: 29.8px; top: 434.8px; }

/* 6x Digit Strobe Transistors (Q1 - Q6) above Display Digits */
#disc-disp-strobes {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.to92-item.to92-up {
    position: absolute;
    width: 18px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.to92-item.to92-up .to92-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2a2e33 0%, #15181b 60%, #0d0f11 100%);
    border: 1px solid #3b424a;
    border-radius: 6px 6px 1.5px 1.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.to92-item.to92-up .to92-leads {
    display: flex;
    gap: 2px;
}

.to92-item.to92-up .to92-leads span {
    width: 1.8px;
    height: 1.8px;
    background: #cbd5e1;
    border-radius: 50%;
}

#disc-q1 { left: 81px; top: 371px; }
#disc-q2 { left: 120px; top: 371px; }
#disc-q3 { left: 160px; top: 371px; }
#disc-q4 { left: 200px; top: 371px; }
#disc-q5 { left: 241px; top: 371px; }
#disc-q6 { left: 272px; top: 371px; }

/* Individual 7-Segment LED Display Packages (DIP-10 with PCB Solder Pads) */
.disc-7seg-pkg {
    position: absolute;
    width: 38px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
    z-index: 9;
    user-select: none;
    box-sizing: border-box;
}

.disp-pads-row {
    width: 35px;
    height: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    padding: 0 1px;
    box-sizing: border-box;
}

.disp-pad {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #e2e8f0 35%, #64748b 90%);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    flex-shrink: 0;
}

.disp-pkg-body {
    width: 36px;
    height: 46px;
    background: #141213;
    border: 1px solid #231f20;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.disp-pin1-mark {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.disc-7seg-pkg .seg-digit {
    width: 26px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-6.5deg);
}

#disc-disp-a3 { left: 60.3px; top: 379.1px; width: 38px; height: 56px; }
#disc-disp-a2 { left: 99.7px; top: 380.3px; width: 38px; height: 56px; }
#disc-disp-a1 { left: 138.3px; top: 380.3px; width: 38px; height: 56px; }
#disc-disp-a0 { left: 177.7px; top: 380.4px; width: 38px; height: 56px; }
#disc-disp-d1 { left: 219.5px; top: 380px; width: 38px; height: 56px; }
#disc-disp-d0 { left: 259.1px; top: 379.1px; width: 38px; height: 56px; }

/* Ferro-magnetic dynamic speaker SP (book pp.97, 106) */
#disc-speaker-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#disc-speaker,
.speaker-assembly {
    position: absolute;
    left: 340px;
    top: 368px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, #4b5563 0%, #1f2937 70%, #0b1220 100%);
    border: 1px solid #0b1220;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.speaker-frame {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #111827 0%, #1f2937 100%);
    box-shadow: inset 0 0 0 2px #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speaker-cone {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #374151 0%, #1f2937 55%, #0f172a 100%);
    box-shadow: inset 0 0 0 1px #4b5563, inset 0 2px 4px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.speaker-dustcap {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #9ca3af 0%, #4b5563 70%, #111827 100%);
    box-shadow: inset 0 1px 2px #000;
}

.speaker-terminal {
    display: none;
}

/* Q7, Q8 Speaker Drivers & Discrete Passives/LEDs */
#disc-speaker-section .to92-item,
#disc-speaker-section .res-row,
#disc-speaker-section .discrete-led-pkg {
    position: absolute;
    pointer-events: auto;
}

/* Phase 2: 11 Mounted DIP ICs Layer (Anchored to Page 98 pad grid) */
.pcb-ics-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 445px;
    height: 660px;
    pointer-events: none;
    z-index: 10;
}

.ic-socket-package {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    pointer-events: auto;
}

.ic-socket-package .ic-silkscreen-box {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1px;
    pointer-events: none;
}

.ic-socket-package .silk-box-label {
    position: absolute;
    top: -8.5px;
    left: 1px;
    font-family: var(--font-mono);
    font-size: 6px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   Calibrated ABC-80 PCB Footprints & Placements (Page 98 Drilled Master)
   ========================================================================== */

/* --- DIP ICs & Sockets --- */
#ic-u1 { left: 67.8px; top: 21.4px; width: 50px !important; height: 154px !important; }
#ic-u1 .dip-ic, #ic-u1 .empty-ladder-socket, #ic-u1 .socket-u3-frame, #ic-u1 .socket-u7-frame { width: 50px !important; height: 154px !important; }

#ic-u2 { left: 153px; top: 90px; width: 50px !important; height: 92px !important; }
#ic-u2 .dip-ic, #ic-u2 .empty-ladder-socket, #ic-u2 .socket-u3-frame, #ic-u2 .socket-u7-frame { width: 50px !important; height: 92px !important; }

#ic-u3 { left: 220.2px; top: 89.4px; width: 50px !important; height: 92px !important; }
#ic-u3 .dip-ic, #ic-u3 .empty-ladder-socket, #ic-u3 .socket-u3-frame, #ic-u3 .socket-u7-frame { width: 50px !important; height: 92px !important; }

#ic-u4 { left: 289px; top: 88px; width: 50px !important; height: 92px !important; }
#ic-u4 .dip-ic, #ic-u4 .empty-ladder-socket, #ic-u4 .socket-u3-frame, #ic-u4 .socket-u7-frame { width: 50px !important; height: 92px !important; }

#ic-u5 { left: 69.2px; top: 195.2px; width: 50px !important; height: 154px !important; }
#ic-u5 .dip-ic, #ic-u5 .empty-ladder-socket, #ic-u5 .socket-u3-frame, #ic-u5 .socket-u7-frame { width: 50px !important; height: 154px !important; }

#ic-u6 { left: 152.8px; top: 195.2px; width: 50px !important; height: 154px !important; }
#ic-u6 .dip-ic, #ic-u6 .empty-ladder-socket, #ic-u6 .socket-u3-frame, #ic-u6 .socket-u7-frame { width: 50px !important; height: 154px !important; }

#ic-u7 { left: 287.4px; top: 255px; width: 52px !important; height: 90px !important; }
#ic-u7 .dip-ic, #ic-u7 .empty-ladder-socket, #ic-u7 .socket-u3-frame, #ic-u7 .socket-u7-frame { width: 52px !important; height: 90px !important; }

#ic-u8 { left: 206.4px; top: 22px; width: 26px !important; height: 56px !important; }
#ic-u8 .dip-ic, #ic-u8 .empty-ladder-socket, #ic-u8 .socket-u3-frame, #ic-u8 .socket-u7-frame { width: 26px !important; height: 56px !important; }

#ic-u9 { left: 154.8px; top: 27.2px; width: 26px !important; height: 52px !important; }
#ic-u9 .dip-ic, #ic-u9 .empty-ladder-socket, #ic-u9 .socket-u3-frame, #ic-u9 .socket-u7-frame { width: 26px !important; height: 52px !important; }

#ic-u10 { left: 237.8px; top: 229px; width: 26px !important; height: 52px !important; }
#ic-u10 .dip-ic, #ic-u10 .empty-ladder-socket, #ic-u10 .socket-u3-frame, #ic-u10 .socket-u7-frame { width: 26px !important; height: 52px !important; }

#ic-u11 { left: 238.6px; top: 286px; width: 26px !important; height: 36px !important; }
#ic-u11 .dip-ic, #ic-u11 .empty-ladder-socket, #ic-u11 .socket-u3-frame, #ic-u11 .socket-u7-frame { width: 26px !important; height: 36px !important; }


/* --- Silkscreen Overlay --- */
#silk-abc80-eprom { left: 362px; top: 194px; width: 68px !important; height: 32px !important; }
#silk-abc80-eprom .silk-abc80-eprom-text { width: 68px !important; height: 32px !important; }


/* --- TO-92 Transistors (+50% Enlarged) --- */
#disc-q1 { left: 77px; top: 363.5px; width: 18px; height: 15px; }
#disc-q2 { left: 116px; top: 362.5px; width: 18px; height: 15px; }
#disc-q3 { left: 155px; top: 362.5px; width: 18px; height: 15px; }
#disc-q4 { left: 193px; top: 362px; width: 18px; height: 15px; }
#disc-q5 { left: 237px; top: 362.4px; width: 18px; height: 15px; }
#disc-q6 { left: 273.1px; top: 362.4px; width: 18px; height: 15px; }
#disc-q7 { left: 303.2px; top: 412.4px; width: 18px; height: 12px; }
#disc-q8 { left: 304px; top: 427.4px; width: 18px; height: 12px; }
#disc-q9 { left: 21.1px; top: 233.5px; width: 18px; height: 12px; }
#disc-q10 { left: 21.4px; top: 247.2px; width: 18px; height: 12px; }
#disc-q11 { left: 20.6px; top: 277.8px; width: 18px; height: 12px; }
#disc-q12 { left: 21px; top: 263px; width: 18px; height: 12px; }
#disc-q13 { left: 21.8px; top: 292px; width: 18px; height: 12px; }
#disc-q14 { left: 21.4px; top: 307.5px; width: 18px; height: 12px; }
#disc-q15 { left: 21.4px; top: 324.1px; width: 18px; height: 12px; }
#disc-q16 { left: 21.8px; top: 339.6px; width: 18px; height: 12px; }
#disc-q17 { left: 208.2px; top: 245.5px; width: 18px; height: 15px; transform: rotate(270deg); transform-origin: center center; }

/* --- Bus Pull-Up Resistors (18x 10k) --- */
#disc-r-pu1 { left: 36px; top: 74px; width: 22px; height: 4px; }
#disc-r-pu2 { left: 36px; top: 82px; width: 22px; height: 4px; }
#disc-r-pu3 { left: 36px; top: 90px; width: 22px; height: 4px; }
#disc-r-pu4 { left: 36px; top: 98px; width: 22px; height: 4px; }
#disc-r-pu5 { left: 36px; top: 103.1px; width: 22px; height: 4px; }
#disc-r-pu6 { left: 34.5px; top: 113.4px; width: 22px; height: 4px; }
#disc-r-pu7 { left: 36px; top: 121.4px; width: 22px; height: 4px; }
#disc-r-pu8 { left: 35.4px; top: 129.4px; width: 22px; height: 4px; }
#disc-r-pu9 { left: 36px; top: 137.4px; width: 22px; height: 4px; }
#disc-r-pu10 { left: 35.4px; top: 144.3px; width: 22px; height: 4px; }
#disc-r-pu11 { left: 36.6px; top: 152.8px; width: 22px; height: 4px; }
#disc-r-pu12 { left: 35.6px; top: 160px; width: 22px; height: 4px; }
#disc-r-pu13 { left: 37.9px; top: 188.9px; width: 22px; height: 4px; }
#disc-r-pu14 { left: 37.3px; top: 196.2px; width: 22px; height: 4px; }
#disc-r-pu15 { left: 37.1px; top: 203.7px; width: 22px; height: 4px; }
#disc-r-pu16 { left: 36.1px; top: 211.6px; width: 22px; height: 4px; }
#disc-r-pu17 { left: 37px; top: 219px; width: 22px; height: 4px; }
#disc-r-pu18 { left: 40.5px; top: 240.5px; width: 22px; height: 4px; }

/* --- Keypad Column Pull-Up Resistors (8x 3.3k) --- */
#disc-r-q9 { left: 36.4px; top: 226.1px; width: 19px; height: 4px; }
#disc-r-q10 { left: 40.2px; top: 256px; width: 19px; height: 4px; }
#disc-r-q11 { left: 41.4px; top: 270.2px; width: 19px; height: 4px; }
#disc-r-q12 { left: 39.8px; top: 286.6px; width: 19px; height: 4px; }
#disc-r-q13 { left: 41.4px; top: 303.2px; width: 19px; height: 4px; }
#disc-r-q14 { left: 39.8px; top: 318.7px; width: 19px; height: 4px; }
#disc-r-q15 { left: 39.8px; top: 334.1px; width: 19px; height: 4px; }
#disc-r-q16 { left: 39.8px; top: 350.4px; width: 19px; height: 4px; }

/* --- Programmer & Clock Bias Resistors --- */
#disc-res-28v { left: 257.8px; top: 206.3px; width: 24px; height: 5px; }
#disc-led-ep { left: 323.2px; top: 205.8px; width: 12px; height: 12px; }
#disc-r-ep-1k8 { left: 332.8px; top: 221.9px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-prog1 { left: 202.2px; top: 288.5px; width: 22px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-prog2 { left: 216.3px; top: 277.3px; width: 22px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-prog3 { left: 209.9px; top: 304px; width: 22px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-prog-10k { left: 202.2px; top: 318px; width: 22px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-prog4 { left: 263.1px; top: 295.2px; width: 22px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-clock { left: 365.3px; top: 120.8px; width: 20px; height: 4px; }

/* --- Reset & Clock Subsystem Passives --- */
#disc-cap-50p { left: 238.8px; top: 23px; width: 14px; height: 10px; transform: rotate(90deg); transform-origin: center center; }
#disc-cap-101a { left: 238px; top: 65.7px; width: 14px; height: 10px; transform: rotate(270deg); transform-origin: center center; }
#disc-cap-101b { left: 248.8px; top: 63.6px; width: 10px; height: 14px; }
#disc-cap-10u { left: 259.2px; top: 57.5px; width: 14px; height: 18px; }
#disc-r-rst-10k { left: 266.8px; top: 63.6px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-d-rst { left: 274.9px; top: 63px; width: 20px; height: 5px; transform: rotate(90deg); transform-origin: center center; }

/* --- Power & Cassette Header Subsystem Passives --- */
#disc-r-ear-330 { left: 282.8px; top: 63.6px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-d-ear { left: 290.9px; top: 63px; width: 20px; height: 5px; transform: rotate(90deg); transform-origin: center center; }
#disc-cap-ear-203 { left: 298.1px; top: 72.9px; width: 14px; height: 10px; }
#disc-cap-mic-203 { left: 310px; top: 63.6px; width: 10px; height: 14px; }
#disc-r-mic-10k1 { left: 320px; top: 63.6px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-mic-10k2 { left: 326px; top: 63.6px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-mic-10k3 { left: 332px; top: 63.6px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-cap-dc-203 { left: 346px; top: 63.6px; width: 10px; height: 14px; }
#disc-cap-dc-100u { left: 358px; top: 57.5px; width: 18px; height: 24px; }
#disc-cap-7805-203 { left: 382px; top: 76px; width: 14px; height: 10px; }

/* --- Display Segment Resistors (8x 120R) --- */
#disc-r-seg1 { left: 29.3px; top: 377.2px; width: 22px; height: 4px; }
#disc-r-seg2 { left: 28.8px; top: 384.5px; width: 22px; height: 4px; }
#disc-r-seg3 { left: 29.3px; top: 392.9px; width: 22px; height: 4px; }
#disc-r-seg4 { left: 29.3px; top: 400.8px; width: 22px; height: 4px; }
#disc-r-seg5 { left: 28.8px; top: 408px; width: 22px; height: 4px; }
#disc-r-seg6 { left: 29.8px; top: 416.5px; width: 22px; height: 4px; }
#disc-r-seg7 { left: 29.8px; top: 423.8px; width: 22px; height: 4px; }
#disc-r-seg8 { left: 29.3px; top: 431.3px; width: 22px; height: 4px; }

/* --- Capacitors --- */
#disc-cap-c2 { left: 15.7px; top: 4.6px; width: 22px; height: 26px; }
#disc-cap-c1 { left: 408.8px; top: 13.3px; width: 18px; height: 24px; }
#disc-tantalum-cp { left: 355.4px; top: 128.3px; width: 18px; height: 24px; }
#disc-cap-vcc1 { left: 401.2px; top: 136.6px; width: 8px; height: 8px; }
#disc-cap-vcc2 { left: 390.8px; top: 132px; width: 8px; height: 8px; }
#disc-cap-vcc3 { left: 396.9px; top: 121.8px; width: 8px; height: 8px; }

/* --- Power, Jacks & Hardware --- */
#disc-lm7805 { left: 372.3px; top: 43.9px; width: 49px; height: 47px; }
#disc-jack-dc { left: 367.1px; top: 12.9px; width: 29px; height: 31.9px; }
#disc-jack-ear { left: 291.8px; top: 23px; width: 36px; height: 39.8px; }
#disc-jack-mic { left: 327px; top: 22.4px; width: 37px; height: 40.9px; }
#disc-hw-rst { left: 257.1px; top: 19.4px; width: 32px; height: 35.2px; }
#disc-int-header { left: 33.6px; top: 33.3px; width: 14px; height: 16px; }
#disc-clock-section { left: 370.7px; top: 139.4px; width: 60px; height: 22px; }

/* --- 7-Segment LED Displays (6x) --- */
#disc-disp-a3 { left: 60.3px; top: 379.1px; width: 38px !important; height: 56px !important; }
#disc-disp-a2 { left: 99.7px; top: 380.3px; width: 38px !important; height: 56px !important; }
#disc-disp-a1 { left: 138.3px; top: 380.3px; width: 38px !important; height: 56px !important; }
#disc-disp-a0 { left: 177.7px; top: 380.4px; width: 38px !important; height: 56px !important; }
#disc-disp-d1 { left: 219.5px; top: 380px; width: 38px !important; height: 56px !important; }
#disc-disp-d0 { left: 259.1px; top: 379.1px; width: 38px !important; height: 56px !important; }

/* --- Audio / Speaker --- */
#disc-speaker { left: 339.2px; top: 376px; }
#disc-r-sp33 { left: 414.1px; top: 385.2px; width: 22px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-sp330a { left: 295.2px; top: 381px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-r-sp330b { left: 314.1px; top: 377.1px; width: 20px; height: 4px; transform: rotate(90deg); transform-origin: center center; }
#disc-led-audio-grn { left: 307.5px; top: 370.5px; width: 12px; height: 12px; }
#disc-led-halt { left: 308.5px; top: 395px; width: 12px; height: 12px; }

/* --- Dual 3x4 Keypad Modules --- */
#disc-keypad-left { left: 86px; top: 451px; width: 160px !important; height: 206px !important; }
#disc-keypad-right { left: 249px; top: 451px; width: 160px !important; height: 206px !important; }

.ic-socket-package > .dip-ic,
.ic-socket-package > .empty-ladder-socket,
.ic-socket-package > .dip-socket-frame {
    width: 100% !important;
    height: 100% !important;
}

/* DIP Body Base in IC Layer */
.pcb-ics-layer .dip-ic {
    background: linear-gradient(90deg, #2a2e2b 0%, #363c38 20%, #3e4540 50%, #363c38 80%, #2a2e2b 100%);
    border: 1px solid #3c443e;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: visible;
}

.pcb-ics-layer .dip-body {
    flex: 1;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Legacy socket frames deprecated in favor of .empty-ladder-socket */

.socket-inner-silk {
    position: absolute;
    top: 18%;
    font-family: var(--font-mono);
    font-size: 6px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.pcb-ics-layer .socket-pins {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 92%;
    flex-shrink: 0;
    width: 0;
    position: relative;
    z-index: 2;
}

.pcb-ics-layer .socket-pins span {
    display: block;
    width: 3.5px;
    height: 1.5px;
    background: #b4bcc0;
    opacity: 0.95;
    border-radius: 0.5px;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.6);
}

.pcb-ics-layer .socket-pins.left-pins span { margin-left: -2.5px; }
.pcb-ics-layer .socket-pins.right-pins span { margin-left: -1px; }

/* DIP Pins */
.pcb-ics-layer .dip-pins {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 94%;
    flex-shrink: 0;
    width: 0;
    position: relative;
    z-index: 2;
}

.pcb-ics-layer .dip-pins span {
    display: block;
    width: 4px;
    height: 1.5px;
    background: #b0b8c0;
    opacity: 0.95;
    border-radius: 0.5px;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.6);
}

.pcb-ics-layer .dip-pins.left-pins span { margin-left: -3px; }
.pcb-ics-layer .dip-pins.right-pins span { margin-left: -1px; }

#ic-u2 .dip-pins span,
.pcb-ics-layer .gold-pins span,
.pcb-ics-layer .gold-pins.left-pins span,
.pcb-ics-layer .gold-pins.right-pins span {
    background: linear-gradient(90deg, #dfc66a 0%, #c4aa4a 100%) !important;
}

/* Socket Underlay Frame for Socketed ICs (U1, U5, U6, U2, U4) */
.ic-socket-underlay {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #141715;
    border: 1.2px solid #282f2a;
    border-radius: 2px;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    z-index: 1;
}

.ic-socket-underlay.narrow-socket {
    top: -1.5px;
    left: -1.5px;
    right: -1.5px;
    bottom: -1.5px;
}

/* ==========================================================================
   AUTHENTIC PHYSICAL IC COMPONENTS & EMPTY SOCKETS (Phase 2 Ground Truth)
   ========================================================================== */

/* 40-Pin DIP Body (U1 Z80A CPU, U5/U6 8255 PPIs) */
.pcb-ics-layer .dip-40-body {
    flex: 1;
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, #252825 0%, #303531 15%, #39403a 50%, #303531 85%, #252825 100%);
    border-left: 1px solid #3e4640;
    border-right: 1px solid #3e4640;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.pcb-ics-layer .dip-dimple {
    position: absolute;
    top: 7px;
    left: 4px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: #1e221f;
    box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.85);
    z-index: 3;
}

.pcb-ics-layer .dip-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    background: #181c19;
    border: 1px solid #2e3530;
    border-top: none;
    border-radius: 0 0 5px 5px;
    z-index: 3;
}

/* Spine Silkscreen - Lengthwise orientation along chip spine */
.pcb-ics-layer .dip-spine-silk {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 38px;
    pointer-events: none;
    gap: 1.5px;
    z-index: 2;
}

#ic-u1 .dip-spine-silk,
#ic-u6 .dip-spine-silk {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.pcb-ics-layer .nec-logo-svg {
    display: block;
    margin-bottom: 1.5px;
    opacity: 0.85;
}

/* 2732 Ceramic EPROM (Side-Braze Ceramic DIP-24 with Quartz Window: U2 & U3) */
.ceramic-eprom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    outline: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    position: relative;
    overflow: visible;
}

.ceramic-eprom .ceramic-pkg {
    flex: 1;
    height: 100%;
    background: linear-gradient(180deg, #797169 0%, #6e665f 50%, #635b54 100%) !important;
    border: 1px solid #867d74 !important;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3px 1px 4px 1px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.ceramic-eprom .ceramic-notch {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 3px;
    background: #3c3630;
    border: 0.8px solid #4a423a;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    z-index: 3;
}

.ceramic-eprom .eprom-silk-top,
.ceramic-eprom .eprom-silk-bottom {
    font-family: var(--font-mono);
    font-size: 5px;
    font-weight: 700;
    color: #ded8cb;
    opacity: 0.45;
    letter-spacing: 0.4px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}

.ceramic-eprom .eprom-silver-braze-plate {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
}

/* Radial Braze Fingers (6 per side around kovar seal ring) */
.ceramic-eprom .braze-fingers {
    position: absolute;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}

.ceramic-eprom .braze-top {
    top: 0;
    left: 4px;
    right: 4px;
    height: 3px;
}
.ceramic-eprom .braze-top span {
    width: 1px;
    height: 3px;
    background: #c5beaf;
}

.ceramic-eprom .braze-bottom {
    bottom: 0;
    left: 4px;
    right: 4px;
    height: 3px;
}
.ceramic-eprom .braze-bottom span {
    width: 1px;
    height: 3px;
    background: #c5beaf;
}

.ceramic-eprom .braze-left {
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    flex-direction: column;
}
.ceramic-eprom .braze-left span {
    height: 1px;
    width: 3px;
    background: #c5beaf;
}

.ceramic-eprom .braze-right {
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    flex-direction: column;
}
.ceramic-eprom .braze-right span {
    height: 1px;
    width: 3px;
    background: #c5beaf;
}

/* Metallic Kovar Seal Ring */
.ceramic-eprom .eprom-kovar-ring {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f2efe6 0%, #d8d4c7 45%, #b5b0a1 100%);
    border: 0.8px solid #928d7e;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 2;
}

/* Quartz Window Aperture */
.ceramic-eprom .eprom-quartz-window {
    width: 16px;
    height: 16px;
    background: #201e1c;
    border: 0.8px solid #5a544a;
    border-radius: 1px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.85);
}

/* Silicon Die Cavity */
.ceramic-eprom .eprom-die-cavity {
    position: relative;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pale Silicon Die Plate */
.ceramic-eprom .eprom-silicon-die {
    width: 10.5px;
    height: 10.5px;
    background: linear-gradient(135deg, #f2ece0 0%, #e2dac9 50%, #cec4b2 100%);
    border: 0.5px solid #918774;
    position: relative;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.5);
}

.ceramic-eprom .die-silicon-pattern {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-image: radial-gradient(#a39780 0.5px, transparent 0.5px);
    background-size: 2px 2px;
    opacity: 0.4;
}

/* Die Corner Bond Wires */
.ceramic-eprom .die-corner-wire {
    position: absolute;
    width: 2.5px;
    height: 0.6px;
    background: #d4af37;
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.5);
}
.ceramic-eprom .wire-tl { top: -0.5px; left: -0.5px; transform: rotate(45deg); transform-origin: left top; }
.ceramic-eprom .wire-tr { top: -0.5px; right: -0.5px; transform: rotate(-45deg); transform-origin: right top; }
.ceramic-eprom .wire-bl { bottom: -0.5px; left: -0.5px; transform: rotate(-45deg); transform-origin: left bottom; }
.ceramic-eprom .wire-br { bottom: -0.5px; right: -0.5px; transform: rotate(45deg); transform-origin: right bottom; }

/* Quartz Glass Reflection Sheen */
.ceramic-eprom .quartz-glare-sheen {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    z-index: 4;
}

/* Empty Thermoplastic Ladder Socket (U7 28-Pin Target EPROM Programmer Socket) */
.empty-ladder-socket {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 1.5px solid #2a2f35 !important;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible;
    opacity: 1 !important;
}

.calibration-active .empty-ladder-socket,
.empty-ladder-socket:hover,
.empty-ladder-socket.selected-for-calibration {
    opacity: 1 !important;
}

.empty-ladder-socket .socket-top-notch {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 4px;
    background: #0f1113;
    border: 0.8px solid #282c32;
    border-top: none;
    border-radius: 0 0 5px 5px;
    z-index: 5;
}

.empty-ladder-socket .socket-bottom-notch {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 4px;
    background: #0f1113;
    border: 0.8px solid #282c32;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    z-index: 5;
}

.empty-ladder-socket .socket-rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 10.5px;
    z-index: 2;
    background: #181b1f !important;
    padding: 2.5px 0.5px;
    box-sizing: border-box;
    border-radius: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.empty-ladder-socket .socket-cavity {
    width: 9.5px;
    height: 4.8px;
    background: #0f1114 !important;
    border: 0.6px solid #282d34;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.95);
}

.empty-ladder-socket .wipe-leaf {
    width: 4.5px;
    height: 2px;
    background: radial-gradient(ellipse at center, #deded6 0%, #8e9499 50%, #34383d 100%) !important;
    border-radius: 0.5px;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.95);
}

.empty-ladder-socket .pin-no {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 3.5px;
    font-weight: 700;
    color: #656d76;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.empty-ladder-socket .socket-rail-right .pin-no {
    left: auto;
    right: -1px;
}

/* Ladder Center Bay - Solid Top/Bottom Cross-Bridges & Cross-Rib, Transparent Open Windows */
.empty-ladder-socket .socket-center-bay {
    flex: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    z-index: 2;
    background: transparent !important;
}

.empty-ladder-socket .socket-center-bay::before {
    content: '';
    display: block;
    height: 4.5px;
    background: #181b1f !important;
    border-top: 1.2px solid #2b3036;
    border-bottom: 1px solid #101215;
    flex-shrink: 0;
}

.empty-ladder-socket .socket-center-bay::after {
    content: '';
    display: block;
    height: 4.5px;
    background: #181b1f !important;
    border-bottom: 1.2px solid #2b3036;
    border-top: 1px solid #101215;
    flex-shrink: 0;
}

/* The Two Rectangular Center Slots - 100% Transparent Revealing the Green PCB Below */
.empty-ladder-socket .socket-window {
    flex: 1;
    background: transparent !important;
    border-left: 1.5px solid #0f1114;
    border-right: 1.5px solid #0f1114;
    border-top: 1.5px solid #0f1114;
    border-bottom: 1.5px solid #0f1114;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.95), inset 0 -2px 5px rgba(0, 0, 0, 0.95), inset 2px 0 5px rgba(0, 0, 0, 0.95), inset -2px 0 5px rgba(0, 0, 0, 0.95);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.empty-ladder-socket .socket-cross-rib {
    height: 10px;
    background: #181b1f !important;
    border-top: 1px solid #2b3036;
    border-bottom: 1px solid #101215;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.empty-ladder-socket .rib-emboss {
    font-family: var(--font-mono);
    font-size: 5px;
    font-weight: 700;
    color: #6a737d;
    letter-spacing: 0.5px;
    text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.05);
}

/* Silkscreen Overlay: ABC-80 EPROM (Draggable & Transparent) */
#silk-abc80-eprom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

.silk-overlay-package {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.silk-abc80-eprom-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    user-select: none;
}

.silk-abc80-eprom-text .silk-line-1,
.silk-abc80-eprom-text .silk-line-2 {
    font-family: 'Space Grotesk', 'Eurostile', 'Orbitron', var(--font-sans), sans-serif;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: 1.2px;
    color: #dde2d6;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

.silk-abc80-eprom-text .silk-line-2 {
    letter-spacing: 1.6px;
}

/* General Silkscreen & Laser Markings on ICs */
.pcb-ics-layer .dip-laser-silk {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
    width: max-content;
}

.pcb-ics-layer .silk-main {
    font-family: var(--font-mono);
    font-size: 6.5px;
    font-weight: 800;
    color: #8e9490;
    opacity: 0.7;
    letter-spacing: 0.4px;
}

.pcb-ics-layer .silk-sub {
    font-family: var(--font-mono);
    font-size: 5.5px;
    font-weight: 600;
    color: #7a807c;
    opacity: 0.65;
}

.pcb-ics-layer .silk-date {
    font-family: var(--font-mono);
    font-size: 5px;
    font-weight: 600;
    color: #6e7470;
    opacity: 0.6;
}

.pcb-ics-layer .silk-xs {
    font-family: var(--font-mono);
    font-size: 5.5px;
    font-weight: 700;
    color: #8e9490;
    opacity: 0.7;
}

.pcb-ics-layer .silk-xxs {
    font-family: var(--font-mono);
    font-size: 5px;
    font-weight: 700;
    color: #8e9490;
    opacity: 0.7;
}

/* Top Power & Header Section */
.pcb-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding-bottom: 3px;
    min-height: 37px;
    position: relative;
    z-index: 2;
}

.top-left-silk, .top-center-silk {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.silk-txt {
    font-family: var(--font-mono);
    color: var(--pcb-silk-white);
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.silk-txt.bold { font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.silk-txt.sm { font-size: 7.5px; }
.silk-txt.xs { font-size: 6.5px; }
.silk-txt.xxs { font-size: 5.5px; }



.top-power-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 4px;
    position: relative;
}

.top-power-group .blue-cap-220uf {
    position: absolute;
    top: 18px;
    left: -8px;
    z-index: 3;
}

.top-power-group .orange-disc {
    position: absolute;
    top: 22px;
    left: 14px;
    z-index: 3;
}

.top-reset-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-left: 204px;
}

.hw-reset-tactile-btn {
    width: 17px;
    height: 17px;
    background: #141715;
    border: 1.2px solid #222622;
    border-radius: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
    padding: 0;
    outline: none;
}

.tactile-red-plunger {
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 35% 35%, #e11d48 0%, #be123c 60%, #881337 100%);
    border-radius: 50%;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.silk-909 {
    font-size: 7px !important;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1px;
}

.gold-pin-pair {
    display: flex;
    gap: 2px;
}

.gold-pin-pair span {
    width: 3px;
    height: 3px;
    background: var(--pcb-gold-pad);
    border-radius: 50%;
}

/* Top Header Elements: Bulk Cap, INT Jumper, Audio Jacks */
.top-left-bulk-cap {
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translateY(8px);
}

.top-int-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.top-center-audio-jacks {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.audio-jack-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.phone-jack-35mm {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: #111417;
    border: 1.2px solid #23272e;
    border-radius: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
    position: relative;
}

.phone-jack-35mm::before {
    content: '';
    position: absolute;
    top: 1.5px;
    width: 25%;
    max-width: 8px;
    height: 25%;
    max-height: 8px;
    background: linear-gradient(180deg, #f1f5f9 0%, #94a3b8 100%);
    border-radius: 1px 1px 0 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.jack-bushing {
    width: 60%;
    height: 65%;
    background: #080a0c;
    border: 0.8px solid #1c221e;
    border-radius: 1px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jack-bushing::after {
    content: '';
    position: absolute;
    width: 55%;
    height: 55%;
    max-width: 12px;
    max-height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #1e242b 0%, #080a0c 70%, #000 100%);
    box-shadow: inset 0 1px 2px #000;
}

/* Crystal Oscillator HC-49 Metal Can */
.crystal-oscillator-hc49 {
    position: absolute;
    top: 28px;
    left: 114px;
    width: 14px;
    height: 10px;
    background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 45%, #94a3b8 85%, #64748b 100%);
    border: 1px solid #64748b;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.xtal-freq {
    font-family: var(--font-mono);
    font-size: 5.5px;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.5px;
}

/* 3mm Discrete LEDs */
.discrete-led-3mm {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0;
}

.led-red {
    background: radial-gradient(circle at 35% 35%, #ff4d4d 0%, #cc1111 60%, #7a0000 100%);
}

.led-green {
    background: radial-gradient(circle at 35% 35%, #4ade80 0%, #16a34a 60%, #14532d 100%);
}

.discrete-led-pkg .led-red {
    background: radial-gradient(circle at 35% 35%, #5c1414 0%, #3d0a0a 60%, #1f0303 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 0.65;
    transition: background 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
}

.discrete-led-pkg .led-green {
    background: radial-gradient(circle at 35% 35%, #14451e 0%, #0d2e14 60%, #051408 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 0.65;
    transition: background 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
}

.discrete-led-pkg.active .led-red {
    background: var(--led-disc-red-on) !important;
    border-color: #ff4d4d !important;
    box-shadow: 0 0 6px 1.5px rgba(255, 26, 26, 0.9), inset 0 0 1px 0.5px rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}

.discrete-led-pkg.active .led-green {
    background: var(--led-disc-green-on) !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 6px 1.5px rgba(0, 224, 56, 0.9), inset 0 0 1px 0.5px rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}

#disc-hw-rst:active .tactile-red-plunger,
#disc-hw-rst .hw-reset-tactile-btn:active .tactile-red-plunger,
#disc-hw-rst .hw-reset-tactile-btn.key-pressed .tactile-red-plunger {
    transform: scale(0.85);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.discrete-led-pkg {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: default;
    pointer-events: auto;
}

.discrete-led-pkg .discrete-led-3mm {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.discrete-led-pkg .led-pads-pair {
    display: flex;
    gap: 3px;
    margin-top: 1px;
}

.discrete-led-pkg .led-pads-pair span {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #1e2c1c;
    border: 0.5px solid #6b7a6a;
    box-sizing: border-box;
}

.halt-led-cluster {
    display: none;
}

.ep-led-cluster {
    position: absolute;
    top: -10px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 2.5px;
    z-index: 5;
}

.terminal-block-pair {
    display: flex;
    gap: 2.5px;
    background: #14171a;
    border: 1px solid #334155;
    border-radius: 2px;
    padding: 1.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.screw-terminal {
    width: 9px;
    height: 11px;
    background: #1e242b;
    border: 1px solid #0f1318;
    border-radius: 1.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5px;
}

.terminal-screw {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #cbd5e1 0%, #64748b 100%);
    border-radius: 50%;
    box-shadow: inset 0 0.5px 1px #000;
}

.terminal-clip {
    width: 6px;
    height: 2px;
    background: #94a3b8;
    border-radius: 0.5px;
}

.dc-barrel-jack {
    position: relative;
    width: 20px;
    height: 13px;
    background: #090c10;
    border: 1.5px solid #1f293d;
    border-radius: 2.5px;
}

.jack-wire-exit {
    position: absolute;
    top: -12px;
    right: 3px;
    width: 6px;
    height: 14px;
    background: #0f172a;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.jack-body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jack-center-pin {
    width: 4px;
    height: 4px;
    background: #94a3b8;
    border-radius: 50%;
}

.electrolytic-cap {
    position: relative;
    border-radius: 4px 4px 6px 6px;
    background: linear-gradient(90deg, #243b4f 0%, #3a586d 35%, #56788f 50%, #3a586d 65%, #1e3040 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.blue-cap-100uf {
    width: 25px;
    height: 31px;
    margin-bottom: 3px;
    border-radius: 5px 5px 7px 7px;
}

.blue-cap-220uf {
    width: 21px;
    height: 28px;
    border-radius: 4px 4px 6px 6px;
}

.blue-cap-10uf {
    width: 13px;
    height: 18px;
    border-radius: 3px 3px 4px 4px;
}

.blue-cap-10uf .cap-aluminum-top {
    height: 6px;
}

.blue-cap-10uf .cap-vent-mercedes {
    width: 4px;
    height: 4px;
}

.cap-aluminum-top {
    width: 100%;
    height: 11px;
    background: radial-gradient(ellipse at 45% 45%, #ffffff 0%, #e2e8f0 45%, #94a3b8 80%, #64748b 100%);
    border-radius: 50%;
    border-bottom: 1px solid #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.4);
    position: relative;
    flex-shrink: 0;
}

.top-left-bulk-cap .cap-aluminum-top {
    background: radial-gradient(ellipse at 45% 45%, #ffffff 0%, #e2e8f0 45%, #b4c3d8 80%, #74849b 100%);
    border-bottom: 1px solid #142230;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cap-vent-mercedes {
    width: 8px;
    height: 8px;
    position: relative;
}

.cap-vent-mercedes::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 3.5px;
    width: 1px;
    height: 4px;
    background: #64748b;
    box-shadow: 0 0 1px rgba(0,0,0,0.6);
}

.cap-vent-mercedes::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 1px;
    width: 6px;
    height: 1px;
    background: #64748b;
    box-shadow: 0 0 1px rgba(0,0,0,0.5);
    transform: rotate(30deg);
}

.disc-cap.orange-disc {
    width: 8px;
    height: 5px;
    background: #ea580c;
    border: 1px solid #c2410c;
    border-radius: 2px;
}

.lm7805-regulator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.to220-heatsink {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    background: repeating-linear-gradient(
        90deg,
        #121417 0px,
        #23272d 2px,
        #0d0f12 3px,
        #1a1d22 5px
    );
    border: 1px solid #0a0c0e;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.heatsink-screw {
    width: 9px;
    height: 9px;
    background: radial-gradient(circle at 35% 35%, #94a3b8 0%, #64748b 45%, #334155 80%, #0f172a 100%);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 0.5px 1px #000;
    position: relative;
}

.heatsink-screw::after {
    content: '';
    position: absolute;
    top: 3.5px;
    left: 1px;
    width: 7px;
    height: 1.5px;
    background: #1e293b;
    border-radius: 0.5px;
}

.to220-metal-tab {
    position: relative;
    z-index: 2;
    width: 13px;
    height: 5.5px;
    background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-hole {
    width: 3px;
    height: 3px;
    background: #090d16;
    border-radius: 50%;
}

.to220-plastic-body {
    position: relative;
    z-index: 2;
    width: 15px;
    height: 8px;
    background: #090c10;
    border: 1px solid #1e293b;
    border-radius: 0 0 2px 2px;
}

/* Authentic 5-Column Mid PCB Components Layout */
.pcb-mid-components {
    display: grid;
    grid-template-columns: 132px 64px 58px 58px 1fr;
    gap: 4px;
    height: 260px;
    position: relative;
    top: -26px;
    padding-left: 5px;
    z-index: 2;
}

.col-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.col-left {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: flex-start;
}

.col-center {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    width: 64px;
}

.col-mid-right {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    width: 58px;
}

.col-sram {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0px;
    gap: 3px;
    position: relative;
    width: 58px;
}

.col-proto {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    height: 330px;
}


.col-left-discretes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 56px;
    box-sizing: border-box;
}


.silk-fecu {
    font-size: 6px !important;
    font-weight: 600;
    margin-bottom: 0.5px;
}

.silk-cantgo {
    font-size: 7px !important;
    font-weight: 700;
    margin-top: 1px;
    margin-bottom: 0.5px;
}

.resistor-cluster-fecu, .cantgo-res-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.resistor-ladder-block {
    display: flex;
    flex-direction: column;
    gap: 0.6px;
    width: 100%;
    align-items: center;
}

.res-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4.8px;
    position: relative;
}

.res-pad-l, .res-pad-r {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    border: 0.6px solid #6b7a6a;
    background: #1e2c1c;
    box-sizing: border-box;
    flex-shrink: 0;
}

.res-carbon-film {
    width: 12.5px;
    height: 3.2px;
    background: linear-gradient(180deg, #e4be96 0%, #d4a373 50%, #b88656 100%);
    border-radius: 1.5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 0.5px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.6);
    position: relative;
    margin: 0 1px;
}

.res-carbon-film::before {
    content: '';
    position: absolute;
    left: -1.5px;
    top: 50%;
    width: 1.5px;
    height: 0.6px;
    background: #94a3b8;
}

.res-carbon-film::after {
    content: '';
    position: absolute;
    right: -1.5px;
    top: 50%;
    width: 1.5px;
    height: 0.6px;
    background: #94a3b8;
}

.b-brn { width: 0.8px; height: 100%; background: #78350f; }
.b-red { width: 0.8px; height: 100%; background: #dc2626; }
.b-org { width: 0.8px; height: 100%; background: #ea580c; }
.b-yel { width: 0.8px; height: 100%; background: #ca8a04; }
.b-grn { width: 0.8px; height: 100%; background: #16a34a; }
.b-blu { width: 0.8px; height: 100%; background: #2563eb; }
.b-vio { width: 0.8px; height: 100%; background: #7c3aed; }
.b-gry { width: 0.8px; height: 100%; background: #94a3b8; }
.b-blk { width: 0.8px; height: 100%; background: #0f172a; }
.b-gld { width: 0.8px; height: 100%; background: #eab308; }


.fecu-silk-frame {
    display: flex;
    flex-direction: column;
    width: 40px;
    align-self: flex-end;
    margin-right: 1px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 1.5px;
    padding: 2px 2px 3px 2px;
    gap: 3px;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 3px;
}

.fecu-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 1px;
}

.silk-fecu {
    font-size: 6.5px !important;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.pcb-via-pad {
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    border: 0.8px solid #cbd5e1;
    background: #1e293b;
    display: inline-block;
    flex-shrink: 0;
}

.via-corner-bl {
    position: absolute;
    bottom: 2px;
    left: 2px;
}

.res-group-4 {
    display: flex;
    flex-direction: column;
    gap: 1.6px;
    width: 100%;
    align-items: center;
    margin-bottom: 3px;
}

.res-group-7 {
    display: flex;
    flex-direction: column;
    gap: 1.6px;
    width: 100%;
    align-items: center;
}

.res-group-8-pio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 40px;
    align-self: flex-end;
    margin-right: 1px;
    margin-bottom: 4px;
}

.pio-sip-resistor-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 2px;
    margin-top: 1px;
    padding-right: 1px;
}

.single-row-socket-strip {
    width: 7px;
    background: #141715;
    border: 1px solid #27272a;
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5px 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
    flex-shrink: 0;
}

.single-row-socket-strip.socket-16pin {
    height: 52px;
}

.single-row-socket-strip.socket-8pin {
    height: 25px;
}

.sk-hole {
    width: 2.5px;
    height: 1.4px;
    background: #09090b;
    border-radius: 0.5px;
    box-shadow: inset 0 0.5px 1px #000;
}

.res-group-8-sip {
    display: none;
}

.silk-db {
    font-size: 7px !important;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    align-self: flex-end;
    margin-right: 4px;
    margin-bottom: 1px;
}

.col2-top-chip-box {
    border: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 0px;
    transform: translateX(-15px);
}

.col3-top-chip-box {
    border: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 0px;
    transform: translateX(-22px);
}

.silk-rod, .silk-net {
    font-size: 6.5px !important;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1px;
    letter-spacing: 0.5px;
}

.pcb-test-point-pads {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-left: 2px;
    margin-top: 4px;
}

.tp-pad-lead {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tp-pad-hole {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 1.2px solid rgba(255, 255, 255, 0.75);
    background: #38583e;
}

.tp-lead-line {
    height: 1px;
    width: 24px;
    background: rgba(255, 255, 255, 0.35);
}

.col-left-chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 52px;
    align-items: center;
    margin-left: 58px;
    transform: translateY(-14px);
}

.dip-socket-rim {
    background: #141715;
    border: 1.2px solid #090c0a;
    border-radius: 2px;
    padding: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    width: 50px;
    box-sizing: border-box;
    outline: 1.2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 1px;
}

.col-left-chips {
    position: relative;
}

/* Page 98 Authoritative Discrete Keypad Column Drivers: 8x TO-92 PNP Transistors (Q9-Q16) & 3.3k x 8 Resistor Ladder */
.col1-discrete-column-drivers {
    position: absolute;
    left: -70px;
    bottom: 2px;
    width: 68px;
    height: 84px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 25;
    visibility: visible;
    opacity: 1;
}

.to92-transistor-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 14px;
    height: 84px;
}

.to92-bank {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.transistor-to92 {
    display: flex;
    align-items: center;
    width: 14px;
    height: 7px;
    position: relative;
}

.to92-body {
    width: 9px;
    height: 7px;
    background: linear-gradient(90deg, #181c19 0%, #2c332d 40%, #1e2420 85%, #141715 100%);
    border: 0.8px solid #0d100e;
    border-radius: 4px 1px 1px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    flex-shrink: 0;
}

.to92-pad {
    width: 4px;
    height: 1.5px;
    background: #c2baaa;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

.resistor-ladder-3k3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;
    height: 84px;
}

.res-row-3k3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 7px;
}

.res-lead-l,
.res-lead-r {
    height: 1.2px;
    flex: 1;
    background: #9ba199;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.5);
}

.res-body-3k3 {
    width: 16px;
    height: 4.5px;
    border-radius: 1.5px;
    background: linear-gradient(180deg, #ded2b9 0%, #c4b596 50%, #9e9075 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 1px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.res-body-3k3 .b-org {
    display: block;
    width: 1.5px;
    height: 100%;
    background: #d35400;
}

.res-body-3k3 .b-red {
    display: block;
    width: 1.5px;
    height: 100%;
    background: #c0392b;
}

.res-body-3k3 .b-gld {
    display: block;
    width: 1.5px;
    height: 100%;
    background: #d4af37;
}

.sip-cantgo-silk {
    position: absolute;
    left: -72px;
    bottom: -11px;
    font-family: var(--font-mono), monospace;
    font-size: 6px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.75);
    width: 22px;
    text-align: center;
    z-index: 25;
}

/* Dual In-Line Package (DIP) IC styling */
.dip-ic {
    background: linear-gradient(90deg, #363c38 0%, #404742 20%, #474f49 50%, #404742 80%, #363c38 100%);
    border: 1px solid #464e48;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dip-40 { width: 48px; height: 124px; }
.dip-28 { width: 50px; height: 104px; }
.dip-24 { width: 50px; height: 90px; }
.dip-20 { width: 30px; height: 74px; }
.dip-16 { width: 26px; height: 42px; }
.dip-14 { width: 26px; height: 32px; }
.dip-8 { width: 24px; height: 30px; }

.dip-pins {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 92%;
}

.dip-pins span {
    display: block;
    width: 3px;
    height: 1px;
    background: #4a4640;
    opacity: 0.45;
    border-radius: 0.5px;
}

.gold-pins span {
    background: #6a6448 !important;
    opacity: 0.45;
}

.ceramic-eprom .gold-pins span {
    width: 4px;
    background: #8e8870 !important;
    opacity: 0.65;
}

.dip-body {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2px;
}

.dip-notch {
    position: absolute;
    top: 0;
    width: 10px;
    height: 5px;
    background: #090d16;
    border-radius: 0 0 5px 5px;
    border: 1px solid #202428;
    border-top: none;
}

.dip-notch.sm { width: 7px; height: 3.5px; border-radius: 0 0 3.5px 3.5px; }

.dip-dimple {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 3.5px;
    height: 3.5px;
    background: #090d16;
    border-radius: 50%;
}

.dip-laser-silk {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.silk-main { font-family: var(--font-mono); font-size: 8px; font-weight: 800; color: #58605c; line-height: 1.1; opacity: 0.6; }
.silk-sub { font-family: var(--font-mono); font-size: 6.5px; font-weight: 600; color: #4e5652; line-height: 1.1; opacity: 0.5; }
.silk-sm { font-family: var(--font-mono); font-size: 7px; font-weight: 700; color: #505854; opacity: 0.6; }
.silk-xs { font-family: var(--font-mono); font-size: 6.5px; font-weight: 700; color: #505854; opacity: 0.6; }

.zilog-winged-emblem {
    margin-bottom: 2px;
    opacity: 0.4;
}

.zilog-winged-emblem path {
    fill: #58605c;
}

.axial-glass-diode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 6px;
    margin-top: 2px;
}

.diode-wire-l, .diode-wire-r {
    flex: 1;
    height: 1px;
    background: #94a3b8;
}

.diode-body-glass {
    width: 14px;
    height: 5px;
    background: linear-gradient(180deg, #fdba74 0%, #ea580c 50%, #9a3412 100%);
    border-radius: 2px;
    border: 0.5px solid #7c2d12;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.diode-cathode-band {
    position: absolute;
    right: 2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #18181b;
    border-radius: 0 1px 1px 0;
}

#pcb-components-layer .chip-74ls04-top,
#pcb-components-layer .chip-net0 {
    width: 22px !important;
    height: 44px !important;
    margin-bottom: 1px;
    outline: 1.2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 1px;
}

/* Ceramic 2732 EPROM with Quartz Window */
.col-stack.col-center { transform: none; position: relative; }
.col-stack.col-mid-right { transform: none; position: relative; }
.col-stack.col-sram { transform: none; position: relative; }

.col-center-chips-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: none;
    padding: 0px 2px 0px 2px;
    border-radius: 1px;
    position: relative;
    width: 68px;
    box-sizing: border-box;
    margin-top: -20px;
}

#pcb-components-layer .ceramic-eprom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 52px !important;
    height: 70px !important;
    margin-top: 20px;
    outline: 1.2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 1px;
}

.ceramic-eprom .dip-body {
    background: #736b63 !important;
    border: 1px solid #8c847c !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    border-radius: 1.5px;
    padding: 0;
}

.ceramic-eprom .dip-notch {
    background: #4a453f;
    border-color: #5d5750;
    top: auto;
    bottom: -4px;
}

.eprom-silver-frame {
    width: 28px;
    height: 28px;
    background: linear-gradient(175deg, #d8d6cc 0%, #cac8be 40%, #bcbaa8 100%);
    border: 1px solid #9c9a8e;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
    transform: translateY(0);
}

.eprom-quartz-window {
    width: 19px;
    height: 19px;
    background: #e2ded4;
    border: 0.5px solid #aba99e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eprom-die {
    width: 8px;
    height: 8px;
    background: #c8c2b4;
    border: 0.5px solid #b2aa98;
}

.socket-empty-col2 {
    width: 52px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px;
    box-sizing: border-box;
    background: #14171a;
    border: 1px solid #2d333b;
    border-radius: 2px;
}

.socket-empty-col2 .socket-pins {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 94%;
}

.socket-empty-col2 .socket-pins span {
    display: block;
    width: 3.5px;
    height: 2px;
    background: linear-gradient(180deg, #747068 0%, #48443e 100%);
    border-radius: 0.5px;
}

.socket-empty-col2 .socket-center-channel {
    flex: 1;
    height: 88%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px;
    box-sizing: border-box;
}

.socket-empty-col2 .socket-pcb-window {
    flex: 1;
    background: #38583e;
    border: 1px solid #254a2b;
}

.chip-main-rom-right {
    width: 52px !important;
    height: 106px !important;
}

.yellow-disc-bridge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 4px;
    background: #eab308;
    border-radius: 2px;
    border: 0.5px solid #a16207;
    z-index: 3;
}

/* Column 4 Right: fills 1fr, holds SRAM + proto grid */
.col-right {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
}

.col-right-ics-matrix {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 140px;
    margin-left: 9px;
    margin-top: 20px;
}

.col-right-subrow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.col-right-top-glue {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
}

.glue-chip-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.chip-74ls139-top {
    width: 26px !important;
    height: 48px !important;
}

.chip-lm741 {
    width: 24px !important;
    height: 30px !important;
    margin-top: 2px;
}

.col-right-subrow.top-subrow {
    margin-top: 0px;
}

.dip-socket-frame {
    background: #14171a;
    border: 1px solid #2d333b;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.chip-rom-1 {
    width: 50px !important;
    height: 76px !important;
}

.socket-825p {
    width: 50px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px;
    box-sizing: border-box;
}

.socket-inner-cutout {
    flex: 1;
    height: 84%;
    background: var(--pcb-green-base);
    border: 1px solid #1e3220;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.socket-window-divider {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #14171a;
}

.socket-silk-text {
    font-family: var(--font-mono);
    font-size: 7.5px;
    font-weight: 800;
    color: #f1f5f9;
    z-index: 1;
}

.chip-user-sram,
.chip-expansion-eeprom {
    width: 48px !important;
    height: 76px !important;
    transform: none;
    outline: none;
    flex-shrink: 0;
    align-self: center;
    position: relative;
    z-index: 3;
}

.chip-user-sram .dip-pins span,
.chip-expansion-eeprom .dip-pins span {
    background: #ced2c8 !important;
    opacity: 0.85 !important;
    width: 3.5px !important;
}

.col-right-mid-silk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 10px 1px 4px;
}

.mid-silk-labels {
    display: flex;
    gap: 12px;
}

.tantalum-cp-cluster {
    display: flex;
    align-items: center;
    gap: 2px;
}

.btm-subrow {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}

.col-right-subcol-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
    width: 48px;
}

.burner-discrete-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.burner-resistor-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6px;
}

.burner-resistor-stack .res-carbon-film {
    width: 12px;
    height: 2.8px;
}

.transistor-to92 {
    width: 7.5px;
    height: 5.5px;
    background: radial-gradient(circle at 40% 30%, #323842 0%, #181a1f 65%, #0b0c0e 100%);
    border-radius: 4px 4px 1px 1px;
    border: 0.5px solid #2d333b;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.65);
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
}

.transistor-to92.to92-up {
    border-radius: 4px 4px 1px 1px;
}

.transistor-to92.to92-down {
    border-radius: 1px 1px 4px 4px;
}

.transistor-to92.to92-left {
    width: 5.5px;
    height: 7px;
    border-radius: 4px 1px 1px 4px;
}

.transistor-to92.to92-right {
    width: 5.5px;
    height: 7px;
    border-radius: 1px 4px 4px 1px;
}

.chip-u10-7404 {
    width: 22px !important;
    height: 44px !important;
}

.chip-u11-741 {
    width: 22px !important;
    height: 26px !important;
}

.silk-04 {
    font-size: 6.5px !important;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    line-height: 1;
}

.tandem-ic-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4px;
    margin: 2px 0;
    padding: 0 1px;
    box-sizing: border-box;
}

.tandem-ic-divider .divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.75);
    margin: 0 2px;
}

.pin-silk-l,
.pin-silk-r {
    font-size: 5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.silk-xxs {
    font-family: var(--font-mono);
    font-size: 5.5px;
    font-weight: 700;
    color: #505854;
    opacity: 0.6;
    letter-spacing: 0.3px;
}

.tantalum-cap-drop.red-drop {
    width: 9px;
    height: 12px;
    background: radial-gradient(circle at 35% 35%, #ef4444 0%, #b91c1c 70%, #7f1d1d 100%);
    border-radius: 50% 50% 40% 40%;
}

.col-right-subcol-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 52px;
}

.socket-empty-28 {
    width: 48px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px;
    box-sizing: border-box;
    background: #1c221e;
    border: 1.5px solid #101512;
    border-radius: 2px;
    margin-top: 2px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dip-socket-frame.socket-empty-28,
.dip-socket-frame.socket-empty-sram {
    outline: 1px solid rgba(255, 255, 255, 0.35);
    outline-offset: 1px;
}

.socket-empty-sram {
    width: 48px;
    height: 76px;
    margin-top: 0px;
}

.socket-inner-cutout {
    flex: 1;
    height: 86%;
    background-color: #325036;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(72, 110, 78, 0.95) 0px,
        rgba(72, 110, 78, 0.95) 1.5px,
        rgba(35, 58, 38, 0.98) 1.5px,
        rgba(35, 58, 38, 0.98) 3.5px
    );
    border: 1px solid #162018;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.85);
}

.socket-window-divider {
    width: 100%;
    height: 3.5px;
    background: #141815;
    border-top: 0.5px solid #0a0d0b;
    border-bottom: 0.5px solid #0a0d0b;
    z-index: 2;
}

.socket-inner-silk {
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: 800;
    color: rgba(225, 240, 230, 0.85);
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 3;
}

.col3-bottom-chip-box {
    border: 1.2px solid rgba(255, 255, 255, 0.75);
    padding: 2px 2px 3px 2px;
    border-radius: 1px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.sram-chip-box {
    border: 1.2px solid rgba(255, 255, 255, 0.75);
    border-radius: 1px;
    padding: 2px 1.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 56px;
}

.col-sram .tantalum-cp-cluster {
    align-self: flex-end;
    margin-right: -7px;
    margin-top: 10px;
    margin-bottom: 2px;
}

.socket-center-channel {
    flex: 1;
    height: 85%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px;
    box-sizing: border-box;
}

.socket-pcb-window {
    flex: 1;
    background:
        radial-gradient(circle at 50% 50%, #1e3020 0.8px, #88a88a 1.2px, #3a5c40 2.2px, transparent 2.5px),
        #3c5e42;
    background-size: 5px 6px;
    border: 1px solid #28442c;
}

.green-bead-cap {
    display: none;
}

.socket-pins {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%;
}

.socket-pins span {
    display: block;
    width: 3.5px;
    height: 1.5px;
    background: #ced2c8;
    opacity: 0.9;
    border-radius: 0.5px;
}

.col-right-proto {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.col-right-proto .blue-cap-100uf {
    display: block;
    position: absolute;
    left: -2px;
    top: 10px;
    z-index: 10;
}

.ep-led-cluster {
    display: none;
}

.pcb-brand-silk {
    position: absolute;
    top: 122px;
    left: 362px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.brand-silk-svg {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.proto-area-composite {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    width: 100%;
    margin-top: 14px;
    height: 236px;
}

.proto-grid-container {
    border: none;
    box-sizing: border-box;
}

.vertical-expansion-bus {
    display: none;
    align-items: flex-start;
    flex-shrink: 0;
}

.gold-via-column {
    display: flex;
    flex-direction: column;
    gap: 3.5px;
}

.gold-via-pair {
    width: 8px;
    height: 3px;
    background: linear-gradient(180deg, #d8e2d6 0%, #b2beb0 100%);
    border: 0.5px solid #6b7a6a;
    border-radius: 1px;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4);
}

/* 6-Digit 7-Segment LED Display Module */
.pcb-display-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 100px;
    gap: 8px;
    height: 58px;
    margin-top: 12px;
    margin-bottom: 2px;
    z-index: 2;
}

.display-driver-strip {
    display: none;
}

.display-resistor-ladder {
    display: none;
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 1.8px;
    width: 25px;
    z-index: 3;
}

.driver-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.driver-pair .transistor-to92 {
    width: 6.5px;
    height: 5.5px;
    background: radial-gradient(circle at 50% 30%, #2a2e33 0%, #15181c 70%, #0d0f12 100%);
    border-radius: 3.5px 3.5px 1px 1px;
    border: 0.5px solid #333940;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.7);
}

.driver-pair .res-carbon-film {
    width: 11px;
    height: 2.6px;
    margin: 0;
}

.seg-digit {
    width: 22px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-5deg);
}

.seg-svg {
    width: 100%;
    height: 100%;
}

.seg-path {
    fill: #4a1510;
    transition: fill 0.04s ease;
}

.seg-path.active {
    fill: #f05040;
    filter: drop-shadow(0 0 2px #ff8878) drop-shadow(0 0 5px #d83020);
}

.display-speaker-group {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 320px;
    top: -5px;
    z-index: 3;
}

.speaker-led-indicator {
    display: none;
}

.ferro-speaker {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, #f4f3ec 0%, #e2e0d4 40%, #ceccbe 75%, #b2b0a2 100%);
    border: 1.5px solid #8e8c82;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.speaker-outer-can {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speaker-aperture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, #ecebe4 0%, #dcdad0 60%, #b8b6aa 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.speaker-center-port {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, #c8aa74 0%, #9e7f48 70%, #685028 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
    border: 0.5px solid #786036;
}

.speaker-silk-text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    color: var(--pcb-silk-white);
    line-height: 1;
}

.speaker-silk-text span {
    font-size: 8px;
    font-weight: 800;
}

.speaker-silk-text small {
    font-size: 6px;
    font-weight: 600;
    color: #cbd5e1;
}

.speaker-label {
    display: none;
}

/* Dual 3x4 Tactile Keypad Modules */
.keypad-bezel-module {
    position: absolute;
    width: 160px;
    height: 206px;
    background: linear-gradient(180deg, #dedacb 0%, #d5d0c2 40%, #c5bfb0 100%);
    border: 1.5px solid #9e9786;
    border-radius: 3px;
    padding: 5px 6px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(20, 16, 10, 0.65);
    box-sizing: border-box;
    pointer-events: auto;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keypad-grid-3x4 {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 19px 13px;
    justify-content: center;
    align-content: center;
}

.key-btn {
    width: 40px;
    height: 34px;
    border-radius: 2.5px;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px #504838, 0 2px 2.5px rgba(25, 20, 15, 0.45);
    transition: transform 0.05s ease, filter 0.05s ease;
    box-sizing: border-box;
}

.key-hex {
    background: linear-gradient(180deg, #dfcd88 0%, #d8c680 35%, #cebc76 85%, #beab66 100%);
    border: 1px solid #aa9755;
}

.key-fn {
    background: linear-gradient(180deg, #e8e4d4 0%, #dad6c4 35%, #c6c2ae 85%, #b2ad9a 100%);
    border: 1px solid #9a9582;
}

.key-dish {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: inset 0 1.5px 1.5px rgba(50, 42, 28, 0.25), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
}

.key-hex .key-dish {
    background: radial-gradient(ellipse at 50% 45%, #e0ce86 0%, #dbc983 65%, #d1bf7a 100%);
}

.key-fn .key-dish {
    background: radial-gradient(ellipse at 50% 45%, #ded9c8 0%, #d2cdbc 65%, #bfb9a6 100%);
}

.key-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    color: #1a1710;
    line-height: 1.05;
}

.key-label.multiline {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
}

.key-rst .key-label { color: #12100c; }
.key-go .key-label { color: #12100c; }

.key-btn:hover {
    filter: brightness(1.04);
}

.key-btn:active,
.key-btn.key-pressed {
    transform: translateY(2px);
    box-shadow: 0 0 0 1.5px #151515, 0 1px 2px rgba(0, 0, 0, 0.8);
    filter: brightness(0.95);
}

/* Modals & Guide Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-card {
    background: var(--inspector-bg);
    border: 1px solid #1e293b;
    border-radius: 8px;
    width: 600px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.9);
}

.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--inspector-bg);
    border: 1px solid #1e293b;
    border-radius: 8px;
    width: 600px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.9);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 8px;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
}

/* Developer Inspector Drawer */
#inspector-section {
    width: 380px;
    background: var(--inspector-bg);
    border-left: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, transform 0.2s ease;
}

#inspector-section.inspector-collapsed {
    width: 0;
    overflow: hidden;
    border-left: none;
}

.inspector-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inspector-tabs-bar {
    display: flex;
    background: #070a10;
    border-bottom: 1px solid var(--border-dark);
    padding: 0 8px;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.tab-btn:hover { color: #f1f5f9; }
.tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.tab-pane {
    display: none;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 12px;
    overflow: hidden;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.tab-pane.active { display: flex; }

.inspector-box {
    background: var(--inspector-card);
    border: 1px solid #182230;
    border-radius: 6px;
    padding: 10px 12px;
}

.box-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.box-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.reg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.reg-cell {
    background: #0e1522;
    border: 1px solid #1a2538;
    border-radius: 4px;
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

.reg-k { color: #64748b; font-weight: 700; }
.reg-v { color: var(--accent-blue); font-weight: 700; }

.flags-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #162030;
    font-family: var(--font-mono);
    font-size: 10px;
}

.flags-title { color: #64748b; font-weight: 700; }

.flag-bit {
    background: #111827;
    border: 1px solid #374151;
    color: #4b5563;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 800;
}

.flag-bit.active {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #93c5fd;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

/* Execution Controls */
.exec-control-box {
    margin-bottom: 0px;
    flex-shrink: 0;
}

.cpu-reg-box {
    flex-shrink: 0;
}

.cpu-status-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cpu-status-badge.running {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}

.cpu-status-badge.paused {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}

.cpu-status-badge.offline {
    background: rgba(107, 114, 128, 0.15);
    border: 1px solid #6b7280;
    color: #9ca3af;
}

.exec-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.exec-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #151e2d;
    border: 1px solid #24344d;
    color: #e2e8f0;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.exec-btn:hover:not(:disabled) {
    background: #1f2d42;
    border-color: #3b82f6;
    color: #ffffff;
}

.exec-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.exec-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #1a2333;
    background: #0c111a;
    color: #475569;
}

.exec-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.disasm-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.disasm-list {
    flex: 1;
    min-height: 0;
    background: #04070c;
    border: 1px solid #162030;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    overflow-y: hidden;
    transition: opacity 0.2s ease;
}

.disasm-list.dimmed {
    opacity: 0.55;
}

.disasm-line {
    padding: 2px 4px;
    border-radius: 2px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    line-height: 1.4;
}

.disasm-line.current {
    background: #1e3a8a;
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

.dis-cursor {
    width: 12px;
    display: inline-block;
    color: #38bdf8;
    font-size: 10px;
    user-select: none;
    flex-shrink: 0;
}

.dis-addr { color: #94a3b8; flex-shrink: 0; }
.dis-bytes { color: #64748b; width: 85px; flex-shrink: 0; }
.dis-op { color: #38bdf8; font-weight: 600; flex-shrink: 0; }
.dis-args { color: #f1f5f9; }

.disasm-line.current .dis-cursor { color: #93c5fd; }
.disasm-line.current .dis-addr { color: #e2e8f0; }
.disasm-line.current .dis-bytes { color: #cbd5e1; }
.disasm-line.current .dis-op { color: #bfdbfe; }
.disasm-line.current .dis-args { color: #ffffff; }

.disasm-placeholder {
    color: #64748b;
    font-size: 11px;
    font-style: italic;
    padding: 8px 4px;
}

.mini-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

.mini-btn:hover { background: #334155; }

/* Memory & Stack Stacked Windows */
.mem-jump-bar {
    display: flex;
    gap: 4px;
}

.chip-btn {
    background: #111827;
    border: 1px solid #374151;
    color: #9ca3af;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chip-btn.active, .chip-btn:hover {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
}

#tab-memory {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.hex-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stack-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mem-toolbar, .stack-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    gap: 6px;
    flex-shrink: 0;
}

.mem-offset-group, .mem-page-group, .stack-anchor-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stack-info-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    white-space: nowrap;
}

.mem-label, .stack-label {
    color: #64748b;
    font-weight: 700;
}

.mem-input, .stack-input {
    background: #080d14;
    border: 1px solid #1e293b;
    color: #38bdf8;
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    width: 52px;
    text-align: center;
}

.mem-input:focus, .stack-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
}

.stack-val {
    color: #38bdf8;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
}

.stack-sep {
    color: #334155;
    font-size: 10px;
}

.stack-depth-badge {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.hex-editor-table {
    flex: 1;
    min-height: 0;
    background: #04070c;
    border: 1px solid #162030;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    overflow-y: hidden;
    transition: opacity 0.2s ease;
}

.stack-editor-table {
    flex: 1;
    min-height: 0;
    background: #04070c;
    border: 1px solid #162030;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    overflow-y: hidden;
    transition: opacity 0.2s ease;
}

.stack-editor-table.dimmed {
    opacity: 0.75;
}

.hex-row {
    display: flex;
    gap: 8px;
    padding: 2px 4px;
    border-radius: 2px;
    align-items: baseline;
    line-height: 1.4;
}

.hex-addr {
    color: #94a3b8;
    font-weight: 700;
    width: 44px;
    flex-shrink: 0;
}

.hex-bytes {
    color: #cbd5e1;
    display: flex;
    gap: 5px;
    flex: 1;
    font-variant-numeric: tabular-nums;
}

.hex-byte {
    display: inline-block;
    width: 17px;
    text-align: center;
}

.hex-ascii {
    color: #38bdf8;
    border-left: 1px solid #1e293b;
    padding-left: 8px;
    letter-spacing: 0.5px;
    font-weight: 600;
    width: 130px;
    flex-shrink: 0;
    white-space: pre;
}

.stack-row {
    display: flex;
    gap: 8px;
    padding: 2px 4px;
    border-radius: 2px;
    align-items: baseline;
    line-height: 1.4;
}

.stack-row.tos {
    background: #1e3a8a;
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

.stack-marker {
    width: 48px;
    color: #38bdf8;
    font-weight: 700;
    font-size: 10px;
    flex-shrink: 0;
}

.stack-row.tos .stack-marker { color: #93c5fd; }
.stack-addr { color: #94a3b8; width: 44px; flex-shrink: 0; }
.stack-row.tos .stack-addr { color: #e2e8f0; }
.stack-rel { color: #64748b; width: 55px; flex-shrink: 0; }
.stack-row.tos .stack-rel { color: #bfdbfe; }
.stack-word { color: #f1f5f9; font-weight: 700; width: 62px; flex-shrink: 0; }
.stack-row.tos .stack-word { color: #ffffff; }
.stack-bytes { color: #94a3b8; flex-shrink: 0; }
.stack-row.tos .stack-bytes { color: #cbd5e1; }

/* Tape Deck */
.tape-deck-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tape-cassette-chassis {
    height: 110px;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border: 2px solid #374151;
    border-radius: 8px;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

.tape-label-card {
    background: #f8fafc;
    color: #0f172a;
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 800;
}

.tape-reels-cutout {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}

.tape-reel-spool {
    width: 38px;
    height: 38px;
    background: #0f172a;
    border: 2px solid #475569;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tape-reel-teeth {
    width: 18px;
    height: 18px;
    background: #334155;
    border-radius: 50%;
}

.tape-controls-bar {
    display: flex;
    gap: 6px;
}

.tape-btn {
    flex: 1;
    background: #141c2b;
    border: 1px solid #24334a;
    color: #f1f5f9;
    padding: 6px;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tape-btn:hover { background: #1e293b; border-color: #38bdf8; }

#tape-waveform-canvas {
    width: 100%;
    height: 60px;
    background: #020408;
    border: 1px solid #162030;
    border-radius: 4px;
}

/* Footer Status Bar */
#main-footer {
    background: #06090e;
    border-top: 1px solid var(--border-dark);
    padding: 4px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: #64748b;
    height: 28px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 6px var(--accent-green);
}

.footer-center {
    display: flex;
    gap: 6px;
}

.key-hint {
    background: #101724;
    border: 1px solid #1e293b;
    padding: 1px 5px;
    border-radius: 3px;
    color: #38bdf8;
    font-weight: 700;
}

.footer-right {
    color: #475569;
}

.c2-bulk-cap {
    position: absolute;
    top: 2px;
    left: 4px;
    z-index: 3;
}

/* Legacy Phase 3-4 Staged Component Layer Suppressed in Favor of Dedicated #pcb-discretes-layer */
#pcb-components-layer,
#pcb-components-layer * {
    display: none !important;
}

/* Maintain vertical footprint of Column 3 tandem ICs (u10 7404 + u11 LM741) */
.col3-bottom-chip-box {
    margin-top: 108.5px;
}

/* ==========================================================================
   Interactive IC Placement & Calibration Tool Styles
   ========================================================================== */

/* Active Calibration Mode on PCB */
.calibration-active .ic-socket-package,
.calibration-active .calibratable-component {
    cursor: grab !important;
    outline: 1.5px dashed rgba(0, 229, 255, 0.45) !important;
    outline-offset: 1px;
    transition: outline-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    pointer-events: auto !important;
}

.calibration-active .ic-socket-package:hover,
.calibration-active .calibratable-component:hover {
    outline: 1.5px solid #00e5ff !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important;
}

.calibration-active .ic-socket-package.is-dragging,
.calibration-active .calibratable-component.is-dragging {
    cursor: grabbing !important;
    opacity: 0.92;
    z-index: 1000 !important;
}

.calibration-active .ic-socket-package.selected-for-calibration,
.calibration-active .calibratable-component.selected-for-calibration {
    outline: 2px solid #ffd700 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.75) !important;
    z-index: 999 !important;
}

.calibration-active .ic-socket-package.selected-for-calibration::after,
.calibration-active .calibratable-component.selected-for-calibration::after {
    content: attr(data-label);
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd700;
    color: #0b0f14;
    font-size: 8px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Floating Calibration HUD */
.calibration-hud {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 320px;
    background: rgba(15, 20, 18, 0.96);
    border: 1.5px solid #00e5ff;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 229, 255, 0.35);
    backdrop-filter: blur(10px);
    z-index: 99999;
    font-family: var(--font-sans);
    color: #e2e8e5;
    overflow: hidden;
}

.calibration-hud.hidden {
    display: none !important;
}

.hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 229, 255, 0.12);
    border-bottom: 1px solid rgba(0, 229, 255, 0.3);
}

.hud-title-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-icon {
    font-size: 14px;
}

.hud-title {
    font-size: 12px;
    font-weight: 700;
    color: #00e5ff;
    letter-spacing: 0.3px;
}

.hud-close-btn {
    background: transparent;
    border: none;
    color: #8fa39a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.hud-close-btn:hover {
    color: #ff5252;
}

.hud-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hud-row label {
    font-size: 11px;
    font-weight: 600;
    color: #a4b3ac;
}

.hud-row select {
    flex: 1;
    background: #1e2622;
    color: #ffd700;
    border: 1px solid #36443c;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    outline: none;
}

.hud-row select:focus {
    border-color: #00e5ff;
}

.hud-grid-coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hud-coord-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.coord-label {
    font-size: 10px;
    font-family: var(--font-mono);
    color: #8fa39a;
    width: 52px;
}

.coord-input {
    width: 50px;
    background: #171f1b;
    border: 1px solid #2e3d35;
    border-radius: 3px;
    color: #00e5ff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 4px;
    text-align: right;
    outline: none;
}

.coord-input:focus {
    border-color: #ffd700;
    color: #ffd700;
}

.coord-unit {
    font-size: 9px;
    color: #6a7d74;
}

.hud-nudge-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px;
    border-radius: 5px;
}

.nudge-title {
    font-size: 10px;
    font-weight: 600;
    color: #8fa39a;
}

.nudge-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nudge-cluster-mid {
    display: flex;
    gap: 16px;
}

.nudge-btn {
    width: 24px;
    height: 22px;
    background: #243029;
    border: 1px solid #394a40;
    border-radius: 3px;
    color: #d1ded8;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.nudge-btn:hover {
    background: #00e5ff;
    color: #0b0f14;
    border-color: #00e5ff;
}

.step-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.step-label {
    font-size: 10px;
    color: #8fa39a;
}

.step-btn {
    flex: 1;
    background: #1c2420;
    border: 1px solid #2e3a33;
    border-radius: 3px;
    color: #8fa39a;
    font-size: 10px;
    font-family: var(--font-mono);
    padding: 2px 0;
    cursor: pointer;
}

.step-btn.active {
    background: rgba(0, 229, 255, 0.2);
    border-color: #00e5ff;
    color: #00e5ff;
    font-weight: 700;
}

.hud-control-label {
    font-size: 11px;
    font-weight: 600;
    color: #a4b3ac;
    width: 72px;
}

.hud-btn-group-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.hud-ctrl-btn {
    flex: 1;
    background: #1c2420;
    border: 1px solid #2e3a33;
    border-radius: 4px;
    color: #d1ded8;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.hud-ctrl-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: #00e5ff;
    color: #00e5ff;
}

.hud-ctrl-btn:active {
    transform: scale(0.96);
}

.hud-rot-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    background: #171f1b;
    border: 1px solid #36443c;
    border-radius: 3px;
    padding: 3px 6px;
    min-width: 36px;
    text-align: center;
}

.hud-actions {
    display: flex;
    gap: 8px;
}

.hud-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.1s, opacity 0.1s;
}

.hud-btn:active {
    transform: scale(0.97);
}

.hud-btn-primary {
    background: #00e5ff;
    color: #0b0f14;
}

.hud-btn-primary:hover {
    background: #33ebff;
}

.hud-btn-danger {
    background: #2e1d1d;
    border: 1px solid #5c2c2c;
    color: #ff8585;
}

.hud-btn-danger:hover {
    background: #472525;
}

.hud-hint {
    font-size: 9.5px;
    color: #7b8f85;
    line-height: 1.35;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
}

/* Power & Cassette Header Subsystem Component Styles */
#disc-cap-ear-203 .ceramic-disc-body,
#disc-cap-mic-203 .ceramic-disc-body,
#disc-cap-dc-203 .ceramic-disc-body,
#disc-cap-7805-203 .ceramic-disc-body {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 35% 35%, #fed7aa 0%, #f97316 60%, #9a3412 100%);
    border-radius: 50%;
    border: 0.6px solid #c2410c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

#disc-cap-ear-203 .cap-disc-text,
#disc-cap-mic-203 .cap-disc-text,
#disc-cap-dc-203 .cap-disc-text,
#disc-cap-7805-203 .cap-disc-text,
#disc-cap-50p .cap-disc-text,
#disc-cap-101a .cap-disc-text,
#disc-cap-101b .cap-disc-text {
    font-family: var(--font-mono);
    font-size: 4px;
    font-weight: 800;
    color: #431407;
    line-height: 1;
}

#disc-cap-dc-100u {
    position: absolute;
    width: 18px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

#disc-cap-dc-100u .elec-can-body {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 40%, #1d4ed8 75%, #172554 100%);
    border-radius: 3px 3px 4px 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#disc-cap-dc-100u .elec-can-aluminum-top {
    width: 100%;
    height: 32%;
    background: radial-gradient(ellipse at 45% 45%, #ffffff 0%, #e2e8f0 45%, #94a3b8 80%, #64748b 100%);
    border-radius: 50%;
    border-bottom: 1px solid #1e3a8a;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

#disc-cap-dc-100u .elec-can-stripe {
    position: absolute;
    top: 32%;
    left: 1px;
    width: 3.5px;
    height: 65%;
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#disc-cap-dc-100u .elec-can-stripe-neg .stripe-mark {
    font-family: var(--font-mono);
    font-size: 5px;
    font-weight: 900;
    color: #1e3a8a;
    line-height: 1;
}

#disc-cap-dc-100u .elec-can-val {
    position: absolute;
    bottom: 2px;
    right: 1px;
    font-family: var(--font-mono);
    font-size: 3.2px;
    font-weight: 700;
    color: #ffffff;
    opacity: 0.9;
}

/* Keypad Function Key Label Inner Boundary Fitting */
button[data-key="ADRS"] .key-label,
button[data-key="DATA"] .key-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
}

button[data-key="RST"] .key-label {
    font-size: 11px !important;
    font-weight: 700 !important;
}




/* Green speaker LED: brightness follows the share of the frame the speaker line was low. */
#disc-led-audio-grn[data-level] .led-green {
    background: color-mix(in srgb, var(--led-disc-green-on) calc(var(--led-level, 0) * 100%), #0d2e14);
    opacity: calc(0.65 + 0.35 * var(--led-level, 0));
    box-shadow: 0 0 calc(6px * var(--led-level, 0)) calc(1.5px * var(--led-level, 0)) rgba(0, 224, 56, 0.9);
}

.rom-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px;
    font-size: 12px;
    color: #94a3b8;
}

.rom-picker select {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 2px 6px;
}

/* Instance Picker */
.instance-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px;
    font-size: 12px;
    color: #94a3b8;
}

.instance-picker select {
    background: #0f172a;
    color: #00e038;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 600;
    cursor: pointer;
}

.instance-picker select:focus {
    border-color: #00e038;
    outline: none;
}

/* Cancel AI Button */
.btn-cancel-ai {
    background: #c62828;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #e53935;
    border-radius: 4px;
    padding: 4px 10px;
    margin: 0 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-cancel-ai:not(:disabled):hover {
    background: #b71c1c;
    box-shadow: 0 0 8px rgba(229, 57, 53, 0.6);
}

.btn-cancel-ai:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #555555;
    background: #2a2020;
    color: #888888;
}

/* Human Operator Keypad Lockout during AI punching */
.keypad-grid-3x4.ai-locked .key-btn,
.keypad-bezel-module.ai-locked .key-btn,
#disc-hw-rst.ai-locked #btn-hw-rst {
    pointer-events: none !important;
    opacity: 0.65;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
}

.key-btn.ai-punched,
#btn-hw-rst.ai-punched {
    box-shadow: 0 0 15px #00e038, inset 0 0 6px rgba(0, 224, 56, 0.6) !important;
    filter: brightness(1.3) !important;
    transform: scale(0.92) translateZ(0) !important;
}

/* AI Hand Animated Cursor */
#ai-hand-cursor {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    width: 48px;
    height: 48px;
    transition: left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.12s ease, opacity 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ai-hand-cursor.ai-hand-hidden {
    opacity: 0;
    visibility: hidden;
}

#ai-hand-cursor.ai-punch-down {
    transform: scale(0.85) translateY(4px);
}

.ai-hand-svg {
    width: 40px;
    height: 40px;
}

.ai-hand-indicator {
    background: #00e038;
    color: #0d120e;
    font-family: 'Fira Code', monospace;
    font-weight: 800;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    margin-top: -6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Vintage Cassette Data Recorder GUI & Spinning Reel Animation (EAR PA7 / MIC PC7)
   ========================================================================== */

@keyframes cassette-reel-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes oxide-ribbon-shimmer {
    0%   { background-position: 0 0; }
    100% { background-position: 24px 0; }
}

#tab-tape {
    display: none;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow-y: auto;
}

#tab-tape.active {
    display: flex;
}

.cassette-deck-box {
    background: linear-gradient(180deg, #1b222c 0%, #12171f 100%);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cassette-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 6px;
}

.cassette-brand-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tape-status-badge {
    font-family: var(--font-mono), monospace;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.tape-status-badge.stopped {
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
}

.tape-status-badge.playing {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.tape-status-badge.recording {
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
    border: 1px solid #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.cassette-meters-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tape-tone-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0b0f17;
    border: 1px solid #263244;
    border-radius: 4px;
    padding: 2px 7px;
}

.tape-tone-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e293b;
    border: 1px solid #334155;
    transition: background 0.08s ease, box-shadow 0.08s ease;
}

.tape-tone-led.tone-1khz {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.tape-tone-led.tone-2khz {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.tape-tone-label {
    font-family: var(--font-mono), monospace;
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e1;
    min-width: 44px;
    text-align: right;
}

.tape-counter-bezel {
    background: #070a0f;
    border: 1.5px solid #334155;
    border-radius: 4px;
    padding: 2px 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.tape-counter-digits {
    font-family: 'Orbitron', var(--font-mono), monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #f8fafc;
}

/* Cassette Well & Shell */
.cassette-well {
    background: radial-gradient(circle at 50% 50%, #0d121a 0%, #06090e 100%);
    border: 2px solid #1e293b;
    border-radius: 7px;
    padding: 8px;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.9);
}

.cassette-shell {
    background: linear-gradient(180deg, #27303f 0%, #1c2430 65%, #151b24 100%);
    border: 1.5px solid #3b495e;
    border-radius: 6px;
    padding: 7px 9px 5px 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.cassette-label-strip {
    background: linear-gradient(180deg, #f5ebd6 0%, #ead8b3 75%, #d97706 75%, #b45309 100%);
    border-radius: 4px;
    padding: 4px 7px 5px 7px;
    border: 1px solid #92400e;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cassette-label-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono), monospace;
    font-size: 9px;
    font-weight: 800;
    color: #451a03;
}

.cassette-file-badge {
    background: #1c1917;
    color: #fde68a;
    padding: 0 5px;
    border-radius: 2px;
    font-size: 9.5px;
}

.cassette-label-edit-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tape-annotation-input {
    flex: 1;
    background: rgba(255, 252, 240, 0.92);
    border: 1px solid #78350f;
    border-radius: 3px;
    color: #1c1917;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    height: 22px;
    box-sizing: border-box;
}

.tape-annotation-input:focus {
    outline: none;
    border-color: #0284c7;
    background: #ffffff;
}

.tape-save-btn {
    background: #1c1917 !important;
    color: #fef3c7 !important;
    border: 1px solid #451a03 !important;
    height: 22px;
    padding: 0 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.tape-save-btn:hover {
    background: #292524 !important;
    color: #ffffff !important;
}

/* Smoked Acrylic Reel Window */
.cassette-window {
    background: linear-gradient(180deg, #070b10 0%, #101722 50%, #070b10 100%);
    border: 1.5px solid #334155;
    border-radius: 28px;
    height: 76px;
    margin: 0 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.95);
}

.cassette-reel-assembly {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cassette-tape-pack {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle, #1c120c 35%, #3f271b 65%, #261710 92%, #140c08 100%);
    border: 1px solid rgba(180, 110, 70, 0.35);
    transform: scale(var(--pack-scale, 0.85));
    transition: transform 0.25s linear;
}

#tape-pack-left  { --pack-scale: 0.92; }
#tape-pack-right { --pack-scale: 0.48; }

.cassette-reel {
    position: relative;
    width: 46px;
    height: 46px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cassette-deck.deck-playing .cassette-reel,
#cassette-deck.deck-recording .cassette-reel {
    animation: cassette-reel-spin 1.6s linear infinite;
}

.reel-svg {
    width: 100%;
    height: 100%;
}

.reel-flange {
    fill: none;
    stroke: rgba(226, 232, 240, 0.28);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.reel-hub {
    fill: #e2e8f0;
    stroke: #94a3b8;
    stroke-width: 2;
}

.reel-spokes line {
    stroke: #0f172a;
    stroke-width: 3.2;
    stroke-linecap: round;
}

.reel-spindle {
    fill: #090d14;
    stroke: #475569;
    stroke-width: 1.5;
}

.cassette-window-scale {
    flex: 1;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.scale-ticks {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono), monospace;
    font-size: 8px;
    color: #94a3b8;
}

.tape-progress-track {
    width: 100%;
    height: 5px;
    background: #1e293b;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #334155;
}

.tape-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);
    transition: width 0.15s linear;
}

/* Bottom Trapezoid & Oxide Tape Ribbon */
.cassette-head-trapezoid {
    height: 16px;
    margin: 0 22px;
    background: #0b0f17;
    border: 1px solid #283548;
    border-radius: 3px 3px 6px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    position: relative;
}

.guide-roller {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    border: 1px solid #334155;
    z-index: 2;
}

.oxide-tape-ribbon {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 6px;
    height: 4px;
    background: repeating-linear-gradient(90deg, #5c341d 0px, #5c341d 6px, #7c4728 6px, #7c4728 12px);
    opacity: 0.85;
}

#cassette-deck.deck-playing .oxide-tape-ribbon,
#cassette-deck.deck-recording .oxide-tape-ribbon {
    animation: oxide-ribbon-shimmer 0.45s linear infinite;
}

.magnetic-head-block {
    width: 18px;
    height: 10px;
    background: #64748b;
    border: 1px solid #94a3b8;
    border-radius: 2px;
    z-index: 2;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

#cassette-deck.deck-playing .magnetic-head-block {
    background: #34d399;
    box-shadow: 0 0 8px #10b981;
}

#cassette-deck.deck-recording .magnetic-head-block {
    background: #f87171;
    box-shadow: 0 0 8px #ef4444;
}

/* Mechanical Piano-Key Transport Controls */
.piano-keys-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.piano-key {
    background: linear-gradient(180deg, #334155 0%, #1e293b 65%, #0f172a 100%);
    border: 1px solid #475569;
    border-bottom: 3px solid #090d14;
    border-radius: 4px;
    color: #f1f5f9;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}

.piano-key:hover:not(:disabled) {
    background: linear-gradient(180deg, #475569 0%, #273549 65%, #1e293b 100%);
}

.piano-key:active:not(:disabled),
.piano-key.active {
    transform: translateY(2px);
    border-bottom-width: 1px;
}

.piano-key.key-rec .rec-dot {
    color: #ef4444;
}

.piano-key.key-rec.active {
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
    border-color: #ef4444;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(239, 68, 68, 0.4);
}

.piano-key.key-play.active {
    background: linear-gradient(180deg, #065f46 0%, #064e3b 100%);
    border-color: #10b981;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Program Tape Library Box */
.tape-library-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 150px;
}

.tape-slot-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tape-id-input {
    width: 48px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
}

.tape-library-hint {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid #1e293b;
    border-radius: 4px;
    padding: 5px 7px;
}

.tape-library-hint code {
    color: #38bdf8;
    font-family: var(--font-mono), monospace;
    font-weight: 700;
}

.tape-library-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.tape-lib-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tape-lib-row:hover {
    background: #1e293b;
    border-color: #38bdf8;
}

.tape-lib-row.selected {
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
}

.tape-lib-id {
    background: #1e293b;
    color: #38bdf8;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
}

.tape-lib-ann {
    flex: 1;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tape-lib-meta {
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}

/* ==========================================================================
   Early-'90s 14" Home-Use Color VGA CRT Monitor (PC/AT QuickBASIC 4.0 Host)
   ========================================================================== */

.qb-crt-window {
    position: fixed;
    top: 72px;
    right: 28px;
    width: 740px;
    max-width: calc(100vw - 32px);
    z-index: 450;
    user-select: none;
    filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.78));
    transition: opacity 0.15s ease;
}

.qb-crt-window.hidden {
    display: none !important;
}

.qb-crt-cabinet {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(160deg, #e2dccb 0%, #d8d2c2 38%, #c7c0ac 82%, #b6af9b 100%);
    border: 2px solid #9f9884;
    border-top-color: #f0eadc;
    border-left-color: #ebe5d5;
    border-right-color: #8f8874;
    border-bottom-color: #7c7563;
    border-radius: 14px 14px 10px 10px;
    padding: 12px 16px 14px 16px;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.65),
        inset 0 -4px 8px rgba(70, 64, 52, 0.45),
        0 10px 28px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qb-crt-window.crt-focused .qb-crt-cabinet {
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.75),
        inset 0 -4px 8px rgba(70, 64, 52, 0.45),
        0 0 0 2px rgba(56, 189, 248, 0.75),
        0 14px 36px rgba(0, 0, 0, 0.8);
}

/* Top Bezel & Ventilation Louvers */
.qb-crt-top-bezel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 8px 6px 8px;
    background: linear-gradient(180deg, #cfc8b6 0%, #c2bba8 100%);
    border: 1px solid #a39c88;
    border-top-color: #b5ae9b;
    border-bottom-color: #e8e2d3;
    border-radius: 7px;
    cursor: grab;
}

.qb-crt-top-bezel:active {
    cursor: grabbing;
}

.qb-crt-brand-plate {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qb-brand-emblem {
    background: linear-gradient(135deg, #1d4ed8 0%, #dc2626 50%, #15803d 100%);
    color: #ffffff;
    font-family: 'Orbitron', var(--font-sans), sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #333;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.qb-brand-model {
    color: #3b372e;
    font-family: var(--font-sans), sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.qb-crt-vents {
    display: flex;
    gap: 5px;
    align-items: center;
}

.qb-crt-vents span {
    width: 18px;
    height: 4px;
    background: #575245;
    border-bottom: 1px solid #e5dfd0;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75);
}

.qb-crt-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qb-link-badge,
.qb-focus-badge {
    font-family: var(--font-mono), monospace;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.4px;
}

.qb-link-badge.standby {
    background: #3f3a30;
    color: #fde047;
    border: 1px solid #716856;
}

.qb-link-badge.connected {
    background: #064e3b;
    color: #55ff55;
    border: 1px solid #10b981;
    box-shadow: 0 0 6px rgba(85, 255, 85, 0.35);
}

.qb-focus-badge.crt-focus {
    background: #1e3a8a;
    color: #93c5fd;
    border: 1px solid #3b82f6;
}

.qb-focus-badge.pcb-focus {
    background: #4b463b;
    color: #d6d0c2;
    border: 1px solid #78705e;
}

.qb-bezel-close-btn {
    background: #b5ae9b;
    color: #2e2a22;
    border: 1px solid #7c7563;
    border-top-color: #e5dfd0;
    border-left-color: #e5dfd0;
    border-radius: 4px;
    width: 22px;
    height: 20px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qb-bezel-close-btn:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #991b1b;
}

/* Deeply Recessed Dark Charcoal Monitor Well & Curved CRT Tube */
.qb-crt-well {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #161816 0%, #222522 50%, #141614 100%);
    padding: 14px 18px;
    border-radius: 16px;
    border: 4px solid #8f8874;
    border-top-color: #6e6858;
    border-left-color: #787160;
    border-right-color: #b8b19f;
    border-bottom-color: #c9c2b0;
    box-shadow:
        inset 0 6px 16px rgba(0, 0, 0, 0.95),
        inset 0 0 28px rgba(0, 0, 0, 0.85);
}

.qb-crt-tube {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #000000;
    border-radius: 18px;
    padding: 12px 16px;
    border: 2px solid #0d0f0d;
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(85, 255, 255, 0.08);
    overflow: hidden;
    filter: brightness(var(--crt-brightness, 1.0));
}

.qb-crt-tube.power-off .qb-crt-screen {
    opacity: 0.02;
    filter: blur(2px);
}

/* 80x25 Color VGA Text Matrix (SCREEN 12 80x25 character cell grid) */
.qb-crt-screen {
    position: relative;
    z-index: 1;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 13.5px;
    line-height: 1.18;
    letter-spacing: 0px;
    font-variant-ligatures: none;
    white-space: pre;
    background: #000000;
    color: #AAAAAA;
    outline: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.qb-crt-row {
    display: block;
    height: 1.18em;
    white-space: pre;
}

.qb-cell-clickable {
    cursor: pointer;
    text-decoration: none;
}

.qb-cell-clickable:hover {
    filter: brightness(1.35);
    background-color: rgba(85, 255, 85, 0.18);
}

/* Authentic IBM VGA 16-Color Palette (QuickBASIC SCREEN 12 COLOR 0..15) */
.vga-fg-0  { color: #000000; }
.vga-fg-1  { color: #0000AA; }
.vga-fg-2  { color: #00AA00; }
.vga-fg-3  { color: #00AAAA; }
.vga-fg-4  { color: #AA0000; }
.vga-fg-5  { color: #AA00AA; }
.vga-fg-6  { color: #AA5500; }
.vga-fg-7  { color: #AAAAAA; text-shadow: 0 0 2px rgba(170, 170, 170, 0.28); }
.vga-fg-8  { color: #555555; }
.vga-fg-9  { color: #5555FF; text-shadow: 0 0 5px rgba(85, 85, 255, 0.55); }
.vga-fg-10 { color: #55FF55; text-shadow: 0 0 6px rgba(85, 255, 85, 0.65); }
.vga-fg-11 { color: #55FFFF; text-shadow: 0 0 5px rgba(85, 255, 255, 0.55); }
.vga-fg-12 { color: #FF5555; text-shadow: 0 0 5px rgba(255, 85, 85, 0.55); }
.vga-fg-13 { color: #FF55FF; text-shadow: 0 0 6px rgba(255, 85, 255, 0.60); }
.vga-fg-14 { color: #FFFF55; text-shadow: 0 0 6px rgba(255, 255, 85, 0.65); }
.vga-fg-15 { color: #FFFFFF; text-shadow: 0 0 5px rgba(255, 255, 255, 0.55); }

.vga-bg-0 { background-color: transparent; }
.vga-bg-1 { background-color: #0000AA; }
.vga-bg-2 { background-color: #00AA00; }
.vga-bg-3 { background-color: #00AAAA; }
.vga-bg-4 { background-color: #AA0000; }
.vga-bg-5 { background-color: #AA00AA; }
.vga-bg-6 { background-color: #AA5500; }
.vga-bg-7 { background-color: #AAAAAA; }

/* CRT Scanlines & Curved Glass Glare Overlays */
.qb-crt-scanlines {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.0) 0px,
            rgba(0, 0, 0, 0.0) 2px,
            rgba(0, 0, 0, 0.24) 2px,
            rgba(0, 0, 0, 0.24) 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.02),
            rgba(0, 255, 0, 0.02) 1px,
            rgba(0, 0, 255, 0.02) 2px
        );
}

.qb-crt-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: 16px;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.015) 32%, transparent 60%),
        radial-gradient(circle at 50% 50%, transparent 68%, rgba(0, 0, 0, 0.48) 100%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.75);
}

/* Lower Molded Control Apron */
.qb-crt-apron {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: linear-gradient(180deg, #c6bfad 0%, #b8b09d 100%);
    border: 1px solid #918a76;
    border-top-color: #a39b87;
    border-bottom-color: #e2dccb;
    border-radius: 8px;
    padding: 7px 10px;
}

.qb-apron-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.qb-apron-btn {
    background: linear-gradient(180deg, #ded8c8 0%, #cbc4b2 70%, #bab29f 100%);
    color: #29251e;
    border: 1px solid #78705e;
    border-top-color: #f4efe2;
    border-left-color: #ece6d7;
    border-bottom: 2px solid #5c5647;
    border-radius: 4px;
    font-family: var(--font-mono), monospace;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 7px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 0.06s ease, background 0.1s ease;
}

.qb-apron-btn:hover {
    background: linear-gradient(180deg, #eae4d6 0%, #d6cfc0 70%, #c6beab 100%);
}

.qb-apron-btn:active {
    transform: translateY(1px);
    border-bottom-width: 1px;
}

.qb-apron-btn.qb-btn-primary {
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
    color: #ffffff;
    border-color: #172554;
    border-top-color: #60a5fa;
    border-left-color: #3b82f6;
}

.qb-apron-btn.qb-btn-primary:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
}

.qb-apron-btn.qb-btn-accent {
    background: linear-gradient(180deg, #15803d 0%, #166534 100%);
    color: #ffffff;
    border-color: #052e16;
    border-top-color: #4ade80;
    border-left-color: #22c55e;
}

.qb-apron-btn.qb-btn-accent:hover {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}

.qb-file-label {
    color: #3b372e;
    font-family: var(--font-mono), monospace;
    font-size: 10px;
    font-weight: 800;
}

.qb-file-input,
.qb-program-select {
    background: #1c1e1b;
    color: #55ff55;
    border: 1px solid #575245;
    border-radius: 3px;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    height: 24px;
    box-sizing: border-box;
}

.qb-file-input {
    width: 102px;
    text-transform: uppercase;
}

.qb-program-select {
    max-width: 120px;
}

.qb-wheel-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #3b372e;
    font-size: 12px;
    font-weight: 800;
}

.qb-brightness-wheel {
    width: 56px;
    cursor: pointer;
}

/* Recessed Square Push-Button Power Switch & Green Power LED */
.qb-power-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #cfc8b6 0%, #b5ae9b 100%);
    border: 2px solid #6e6858;
    border-top-color: #ece6d7;
    border-left-color: #ece6d7;
    border-radius: 5px;
    padding: 4px 8px;
    cursor: pointer;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.qb-power-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #14532d;
    border: 1px solid #052e16;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.qb-power-switch.power-on .qb-power-led {
    background: #4ade80;
    box-shadow: 0 0 7px #22c55e;
}

.qb-power-label {
    color: #29251e;
    font-family: var(--font-sans), sans-serif;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   External I/O Expansion Daughterboard Window (Ch.12 Exercises 24–29)
   ========================================================================== */

.ext-io-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: #a7f3d0;
    background: rgba(6, 78, 59, 0.45);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 4px;
    padding: 3px 8px;
    letter-spacing: 0.04em;
}

.ext-io-picker select {
    background: #06281e;
    color: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 2px 6px;
    cursor: pointer;
    outline: none;
}

.ext-io-picker select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#ext-io-window,
.ext-io-window,
.ext-io-floating-window {
    position: fixed;
    top: 64px;
    left: 24px;
    width: 580px;
    max-width: calc(100vw - 32px);
    z-index: 940;
    user-select: none;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.78));
}

#ext-io-window.hidden,
.ext-io-window.hidden,
.ext-io-floating-window.hidden {
    display: none !important;
}

.ext-io-cabinet {
    position: relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(34, 197, 94, 0.09), transparent 55%),
        repeating-linear-gradient(45deg, rgba(16, 185, 129, 0.04) 0px, rgba(16, 185, 129, 0.04) 2px, transparent 2px, transparent 8px),
        linear-gradient(160deg, #124830 0%, #0d3b26 55%, #08291a 100%);
    border: 3px solid #286646;
    border-radius: 10px;
    padding: 12px 14px 12px 14px;
    box-shadow:
        inset 0 0 0 1px rgba(236, 253, 245, 0.14),
        inset 0 4px 14px rgba(0, 0, 0, 0.55);
    color: #ecfdf5;
    font-family: var(--font-mono);
}

/* 4 Brass Corner Standoffs */
.pcb-standoff,
.ext-io-standoff {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fef08a 0%, #eab308 45%, #854d0e 90%);
    border: 1.5px solid #422006;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 0 2px #1c1917;
    pointer-events: none;
    z-index: 3;
}
.pcb-standoff::after,
.ext-io-standoff::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #1f2937;
    border: 1px solid #713f12;
}
.pcb-standoff.standoff-tl, .ext-io-standoff.standoff-tl { top: 6px; left: 6px; }
.pcb-standoff.standoff-tr, .ext-io-standoff.standoff-tr { top: 6px; right: 6px; }
.pcb-standoff.standoff-bl, .ext-io-standoff.standoff-bl { bottom: 6px; left: 6px; }
.pcb-standoff.standoff-br, .ext-io-standoff.standoff-br { bottom: 6px; right: 6px; }

/* Top Silkscreen Bezel & Drag Handle */
.ext-io-top-bezel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    margin: 2px 6px 8px 6px;
    background: rgba(4, 28, 18, 0.78);
    border: 1px solid rgba(167, 243, 208, 0.32);
    border-radius: 5px;
    cursor: grab;
}
.ext-io-top-bezel:active {
    cursor: grabbing;
}

.ext-io-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ext-io-badge {
    background: #f59e0b;
    color: #111827;
    font-weight: 900;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.ext-io-model {
    font-size: 0.76rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ext-io-bezel-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ext-io-port-badge {
    font-size: 0.66rem;
    font-weight: 700;
    color: #fde68a;
    background: rgba(120, 53, 15, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.45);
    padding: 2px 6px;
    border-radius: 3px;
}

.ext-io-clock-badge {
    font-size: 0.66rem;
    font-weight: 700;
    color: #6ee7b7;
    background: rgba(6, 78, 59, 0.7);
    border: 1px solid rgba(52, 211, 153, 0.4);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Gold Edge-Connector Header Bar */
.ext-io-edge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 6px 8px 6px;
    padding: 3px 10px;
    background: #071f14;
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 4px;
}

.ext-io-edge-label {
    font-size: 0.62rem;
    color: #fde047;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.ext-io-gold-fingers {
    display: flex;
    gap: 3px;
}
.ext-io-gold-fingers span {
    width: 5px;
    height: 10px;
    background: linear-gradient(180deg, #fef08a 0%, #ca8a04 100%);
    border-radius: 1px;
    box-shadow: 0 0 2px rgba(250, 204, 21, 0.5);
}

/* Stage Well & Mutually-Exclusive Stage Panels */
.ext-io-well {
    margin: 0 6px 8px 6px;
    padding: 10px 12px;
    background:
        radial-gradient(rgba(167, 243, 208, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(6, 42, 27, 0.88) 0%, rgba(4, 29, 18, 0.94) 100%);
    background-size: 10px 10px, 100% 100%;
    border: 1.5px solid rgba(167, 243, 208, 0.28);
    border-radius: 6px;
    min-height: 250px;
}

.ext-io-stage {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.ext-io-stage.active {
    display: flex;
}

.ext-pcb-board-header,
.ext-pcb-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(167, 243, 208, 0.3);
    padding-bottom: 4px;
}

.ext-pcb-silk-title,
.ext-silk-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ecfdf5;
    letter-spacing: 0.05em;
}

.ext-pcb-silk-ref,
.ext-silk-sub {
    font-size: 0.64rem;
    color: #a7f3d0;
    opacity: 0.85;
}

/* Authentic DIP ICs, Axial Resistors & Ceramic Caps on Daughterboard */
.ext-pcb-ic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 8px;
    background: rgba(2, 18, 11, 0.55);
    border: 1px solid rgba(52, 211, 153, 0.22);
    border-radius: 4px;
}

.ext-pcb-dip,
.ext-dip-ic {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border: 1.5px solid #4b5563;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.ext-pcb-dip.dip-24,
.ext-dip-ic.dip-16 {
    padding: 4px 12px;
    border-color: #6b7280;
}
.ext-pcb-dip-notch,
.ext-dip-notch {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 8px;
    border-radius: 0 4px 4px 0;
    background: #374151;
}
.ext-pcb-dip-label,
.ext-dip-label {
    font-size: 0.64rem;
    font-weight: 800;
    color: #e5e7eb;
    letter-spacing: 0.04em;
}
.ext-pcb-dip-sub,
.ext-dip-sub {
    font-size: 0.55rem;
    color: #9ca3af;
}

.ext-pcb-resistor-bank,
.ext-resistor-bank {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}

.ext-axial-res {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ext-silk-sm {
    font-size: 0.56rem;
    font-weight: 700;
    color: #a7f3d0;
}

.ext-pcb-axial-r,
.ext-res-body {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #292524;
    background: linear-gradient(90deg, #9ca3af 0%, #9ca3af 12%, #f5d0a9 12%, #e6b88a 88%, #9ca3af 88%, #9ca3af 100%);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #78350f;
}

.ext-res-body i {
    display: inline-block;
    width: 3px;
    height: 7px;
}

.ext-ceramic-cap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ext-pcb-cap,
.ext-cap-disc {
    font-size: 0.58rem;
    font-weight: 800;
    color: #451a03;
    background: radial-gradient(circle, #fbbf24 0%, #d97706 100%);
    padding: 2px 5px;
    border-radius: 50%;
    border: 1px solid #78350f;
}

.ext-io-readout-strip,
.ext-stage-telemetry-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 5px 8px;
    background: rgba(2, 16, 10, 0.78);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    font-size: 0.68rem;
    color: #d1fae5;
}
.ext-io-readout-strip strong,
.ext-stage-telemetry-strip strong {
    color: #fde68a;
}

/* ---- Stage 24: Traffic Light Controller ---- */
.tl-pcb-layout {
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: 10px;
    align-items: stretch;
}

.tl-driver-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(2, 18, 11, 0.58);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 5px;
}

.tl-intersection-pcb,
.tl-intersection-silk {
    position: relative;
    min-height: 158px;
    background: #0a2e1d;
    border: 1px solid rgba(167, 243, 208, 0.35);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
}

.tl-road-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.tl-road-title,
.tl-head-title {
    font-size: 0.60rem;
    font-weight: 800;
    color: #fde68a;
    text-align: center;
    letter-spacing: 0.04em;
}

.tl-crossroad-graphic {
    position: relative;
    width: 68px;
    height: 112px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(251, 191, 36, 0.45);
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.68);
}

.tl-lane-ns,
.tl-lane-ew {
    font-size: 0.52rem;
    font-weight: 800;
    color: #fde047;
    letter-spacing: 0.04em;
}

.tl-lane-ns {
    position: absolute;
    top: 6px;
}

.tl-lane-ew {
    position: absolute;
    bottom: 6px;
}

.tl-center-box {
    font-size: 0.9rem;
    font-weight: 900;
    color: #fbbf24;
}

.tl-signal-head {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
    border: 2px solid #52525b;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
}

.tl-lamps-row,
.tl-lamp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-lamp-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.tl-lamp,
.ext-led-5mm {
    --led-level: 0;
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #27272a;
    background: #1f2937;
    transition: background 0.06s linear, box-shadow 0.06s linear;
}

.tl-lamp.red,
.ext-led-5mm.led-red {
    background: radial-gradient(circle at 35% 35%, rgba(254, 202, 202, calc(0.15 + 0.85 * var(--led-level))), rgba(239, 68, 68, calc(0.2 + 0.8 * var(--led-level))) 60%, #450a0a 100%);
}
.tl-lamp.red.active,
.tl-lamp.red.lit,
.ext-led-5mm.led-red.active,
.ext-led-5mm.led-red.lit {
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.95), 0 0 4px #fecaca;
    border-color: #f87171;
}

.tl-lamp.yellow,
.ext-led-5mm.led-yellow {
    background: radial-gradient(circle at 35% 35%, rgba(254, 240, 138, calc(0.15 + 0.85 * var(--led-level))), rgba(234, 179, 8, calc(0.2 + 0.8 * var(--led-level))) 60%, #422006 100%);
}
.tl-lamp.yellow.active,
.tl-lamp.yellow.lit,
.ext-led-5mm.led-yellow.active,
.ext-led-5mm.led-yellow.lit {
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.95), 0 0 4px #fef08a;
    border-color: #facc15;
}

.tl-lamp.green,
.ext-led-5mm.led-green {
    background: radial-gradient(circle at 35% 35%, rgba(187, 247, 208, calc(0.15 + 0.85 * var(--led-level))), rgba(34, 197, 94, calc(0.2 + 0.8 * var(--led-level))) 60%, #052e16 100%);
}
.tl-lamp.green.active,
.tl-lamp.green.lit,
.ext-led-5mm.led-green.active,
.ext-led-5mm.led-green.lit {
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.95), 0 0 4px #bbf7d0;
    border-color: #4ade80;
}

.tl-bit-label,
.tl-pin-label {
    font-size: 0.56rem;
    font-weight: 700;
    color: #d4d4d8;
}

/* ---- Stage 25: 8-LED Chaser Bar ---- */
.chaser-pcb-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chaser-ic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 5px 8px;
    background: rgba(2, 18, 11, 0.58);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 5px;
}

.chaser-trace-silk {
    color: #fde68a;
    letter-spacing: 0.03em;
}

.chaser-led-array,
.chaser-leds-array {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    padding: 14px 10px;
    background:
        linear-gradient(180deg, transparent 48%, rgba(16, 185, 129, 0.22) 48%, rgba(16, 185, 129, 0.22) 52%, transparent 52%),
        rgba(3, 22, 14, 0.72);
    border: 1.5px solid rgba(167, 243, 208, 0.35);
    border-radius: 6px;
}

.chaser-led-cell,
.chaser-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
    border-radius: 4px;
    background: rgba(6, 42, 27, 0.45);
    border: 1px dashed rgba(52, 211, 153, 0.22);
}

.chaser-channel .ext-axial-res {
    flex-direction: column;
    gap: 2px;
}

.chaser-silk-bit,
.chaser-silk {
    font-size: 0.58rem;
    font-weight: 800;
    color: #fde68a;
    text-align: center;
    line-height: 1.15;
}

.chaser-silk small {
    color: #a7f3d0;
    font-weight: 700;
}

.chaser-dome-led {
    --led-level: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #3f1d1d;
    background: radial-gradient(circle at 35% 35%, rgba(254, 202, 202, calc(0.12 + 0.88 * var(--led-level))), rgba(239, 68, 68, calc(0.18 + 0.82 * var(--led-level))) 62%, #3b0808 100%);
    transition: box-shadow 0.05s linear, transform 0.05s linear;
}

.chaser-dome-led.active,
.chaser-dome-led.lit {
    border-color: #fca5a5;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.95), 0 0 6px #fecaca;
    transform: scale(1.06);
}

.chaser-silk-ref {
    font-size: 0.56rem;
    color: #a7f3d0;
}

/* ---- Stage 26: Dual 4-Bit R-2R Ladder DAC & 16x16 X-Y Oscilloscope ---- */
.scope-pcb-layout {
    display: grid;
    grid-template-columns: 185px 1fr;
    gap: 12px;
    align-items: center;
}

.scope-dac-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(2, 18, 11, 0.58);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 5px;
}

.scope-r2r-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(6, 42, 27, 0.45);
    border: 1px dashed rgba(52, 211, 153, 0.28);
    border-radius: 4px;
}

.scope-bnc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.scope-bnc-jack {
    flex: 1;
    text-align: center;
    font-size: 0.56rem;
    font-weight: 800;
    color: #e5e7eb;
    padding: 3px 6px;
    background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
    border: 1px solid #9ca3af;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.scope-crt-housing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 12px;
    background: #111827;
    border: 2px solid #374151;
    border-radius: 6px;
}

.scope-crt-bezel {
    position: relative;
    padding: 6px 10px 8px;
    background: #030712;
    border: 3px solid #4b5563;
    border-radius: 8px;
    box-shadow: inset 0 0 18px rgba(16, 185, 129, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.scope-crt-label {
    text-align: center;
    font-size: 0.56rem;
    font-weight: 800;
    color: #34d399;
    letter-spacing: 0.05em;
}

#ext-scope-canvas {
    display: block;
    width: 200px;
    height: 200px;
    background: #02120a;
    border: 1px solid #059669;
    border-radius: 4px;
}

.scope-crt-graticule-label {
    text-align: center;
    font-size: 0.56rem;
    color: #34d399;
    margin-top: 3px;
    letter-spacing: 0.05em;
}

.scope-controls-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.64rem;
    color: #d1fae5;
}

.scope-knob-group {
    padding: 5px 8px;
    background: rgba(6, 78, 59, 0.45);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.scope-knob-label {
    font-weight: 800;
    color: #fde68a;
}
.scope-knob-val {
    font-size: 0.58rem;
    color: #a7f3d0;
}

/* ---- Stage 27: School Bell Controller ---- */
.bell-stage-grid,
.bell-pcb-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 12px;
    align-items: stretch;
}

.bell-driver-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(2, 18, 11, 0.58);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 5px;
}

.bell-discrete-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ext-to92-badge,
.ext-diode-badge {
    flex: 1;
    text-align: center;
    font-size: 0.54rem;
    font-weight: 800;
    padding: 3px 5px;
    border-radius: 3px;
}

.ext-to92-badge {
    background: #111827;
    color: #e5e7eb;
    border: 1px solid #4b5563;
    border-radius: 8px 8px 2px 2px;
}

.ext-diode-badge {
    background: linear-gradient(90deg, #1f2937 0%, #1f2937 78%, #d1d5db 78%, #d1d5db 90%, #1f2937 90%);
    color: #fde68a;
    border: 1px solid #6b7280;
}

.bell-relay-box {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.92) 100%);
    border: 1.5px solid #475569;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    transition: border-color 0.08s ease, box-shadow 0.08s ease;
}
.bell-relay-box.energized {
    border-color: #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.55);
}
.bell-relay-title,
.relay-title {
    font-size: 0.62rem;
    font-weight: 800;
    color: #fde68a;
}
.bell-relay-coil {
    font-size: 0.6rem;
    color: #94a3b8;
}
.bell-relay-contact,
.relay-contact-state {
    font-size: 0.68rem;
    font-weight: 900;
    color: #cbd5e1;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    text-align: center;
}
.bell-relay-box.energized .bell-relay-contact,
.bell-relay-box.energized .relay-contact-state {
    color: #fef08a;
    background: rgba(180, 83, 9, 0.72);
}

.bell-alarm-unit,
.bell-dome-col {
    position: relative;
    background: rgba(3, 22, 14, 0.75);
    border: 1.5px solid rgba(167, 243, 208, 0.35);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bell-brass-dome,
.school-bell-dome {
    position: relative;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bell-chrome-shell {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #f8fafc 0%, #cbd5e1 45%, #64748b 82%, #1e293b 100%);
    border: 2.5px solid #94a3b8;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.bell-brass-dome.ringing,
.school-bell-dome.ringing .bell-chrome-shell {
    animation: bellDomeVibrate 0.08s infinite alternate ease-in-out;
    border-color: #fbbf24;
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.9), 0 0 8px #fef08a;
}

.bell-dome-bolt,
.bell-bolt {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #334155;
    border: 2px solid #e2e8f0;
}

.bell-engraving {
    font-size: 0.48rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: 0.05em;
}

.bell-striker-arm,
.bell-clapper {
    position: absolute;
    right: -4px;
    bottom: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fde047 0%, #ca8a04 100%);
    border: 1.5px solid #713f12;
    transform-origin: -14px -14px;
}
.bell-brass-dome.ringing + .bell-striker-arm,
.school-bell-dome.ringing .bell-clapper {
    animation: bellStrikerHit 0.07s infinite alternate;
}

.bell-status-text,
.bell-status-badge {
    font-size: 0.66rem;
    font-weight: 800;
    color: #a7f3d0;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(6, 78, 59, 0.45);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

@keyframes bellDomeVibrate {
    0% { transform: translate(-2px, 0) rotate(-2deg); }
    100% { transform: translate(2px, 0) rotate(2deg); }
}
@keyframes bellStrikerHit {
    0% { transform: rotate(-14deg); }
    100% { transform: rotate(14deg); }
}

.bell-presets-row,
.ext-preset-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 8px;
    background: rgba(2, 18, 11, 0.55);
    border: 1px solid rgba(52, 211, 153, 0.22);
    border-radius: 4px;
}
.bell-presets-label,
.ext-preset-label {
    font-size: 0.60rem;
    font-weight: 800;
    color: #a7f3d0;
}
.ext-io-preset-btn {
    background: #064e3b;
    color: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    cursor: pointer;
}
.ext-io-preset-btn:hover:not(:disabled) {
    background: #047857;
    border-color: #6ee7b7;
}
.ext-io-preset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Stage 28: 8-Appliance Home Automation Relay Board ---- */
.appliance-ic-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    background: rgba(2, 18, 11, 0.58);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 5px;
}

.dip-40-compact,
.dip-18-compact {
    flex: 1;
    padding: 4px 8px;
}

.appliance-relays-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.appliance-card {
    background: linear-gradient(180deg, rgba(15, 35, 66, 0.85) 0%, rgba(3, 22, 14, 0.82) 100%);
    border: 1.5px solid rgba(59, 130, 246, 0.45);
    border-radius: 5px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.appliance-card.energized,
.appliance-card.active {
    border-color: #fbbf24;
    background: rgba(120, 53, 15, 0.38);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.appliance-card-top,
.app-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.appliance-bit,
.app-pin {
    font-size: 0.58rem;
    font-weight: 800;
    color: #fde68a;
}

.appliance-led,
.app-pilot-lamp {
    --led-level: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #1f2937;
    border: 1px solid #374151;
}
.appliance-card.energized .appliance-led,
.appliance-card.active .appliance-led,
.appliance-card.energized .app-pilot-lamp,
.appliance-card.active .app-pilot-lamp {
    background: #f59e0b;
    border-color: #fde68a;
    box-shadow: 0 0 8px #f59e0b;
}

.appliance-name,
.app-name {
    font-size: 0.62rem;
    font-weight: 700;
    color: #ecfdf5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appliance-relay-state,
.app-state-txt {
    font-size: 0.58rem;
    font-weight: 800;
    color: #9ca3af;
}
.appliance-card.energized .appliance-relay-state,
.appliance-card.active .appliance-relay-state,
.appliance-card.energized .app-state-txt,
.appliance-card.active .app-state-txt {
    color: #fef08a;
}

/* ---- Stage 29: 3-Axis Stepper Motor Robotic Arm + Electromagnet ---- */
.arm-stage-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 10px;
    align-items: stretch;
}

.arm-motors-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.arm-motor-card {
    background: rgba(3, 22, 14, 0.78);
    border: 1px solid rgba(52, 211, 153, 0.32);
    border-radius: 5px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arm-motor-hdr {
    font-size: 0.61rem;
    font-weight: 800;
    color: #fde68a;
}

.arm-coils-row {
    display: flex;
    gap: 5px;
}

.arm-coil-led {
    flex: 1;
    text-align: center;
    font-size: 0.56rem;
    font-weight: 800;
    padding: 2px 0;
    border-radius: 3px;
    background: #111827;
    color: #6b7280;
    border: 1px solid #374151;
}
.arm-coil-led.active {
    background: #ef4444;
    color: #fff;
    border-color: #fca5a5;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.85);
}

.arm-motor-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 0.58rem;
    color: #a7f3d0;
}
.arm-motor-metrics strong {
    color: #ecfdf5;
}

.arm-kinematic-box {
    background: #041d12;
    border: 1px solid rgba(167, 243, 208, 0.35);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

#ext-arm-svg {
    width: 100%;
    height: 165px;
}

/* ---- Bottom Daughterboard Control Apron ---- */
.ext-io-apron {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 6px;
    padding: 6px 10px;
    background: rgba(3, 20, 13, 0.85);
    border: 1px solid rgba(167, 243, 208, 0.28);
    border-radius: 5px;
}

.ext-io-ppi-summary {
    font-size: 0.65rem;
    color: #a7f3d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ext-io-apron-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ext-io-apron-btn {
    background: #065f46;
    color: #ecfdf5;
    border: 1px solid #34d399;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 9px;
    cursor: pointer;
}
.ext-io-apron-btn:hover:not(:disabled) {
    background: #047857;
}
.ext-io-apron-btn.ext-io-apron-danger {
    background: #7f1d1d;
    border-color: #f87171;
}
.ext-io-apron-btn.ext-io-apron-danger:hover:not(:disabled) {
    background: #991b1b;
}
.ext-io-apron-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   User's Manual Interactive Book Modal (#manual-modal)
   ========================================================================== */

.book-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 6, 14, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.2s ease;
}

.book-modal-overlay.hidden {
    display: none !important;
}

.book-shell {
    width: 92vw;
    max-width: 1300px;
    height: 88vh;
    max-height: 900px;
    background: #0b0f19;
    border: 1px solid #334155;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.2);
    overflow: hidden;
    position: relative;
}

.book-header {
    height: 48px;
    min-height: 48px;
    background: #080c14;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
}

.book-toc-toggle-btn {
    display: none;
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.book-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    white-space: nowrap;
}

.book-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.book-title-group h2 {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.book-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.book-nav-btn {
    background: #141b2a;
    border: 1px solid #2a3b53;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.book-nav-btn:hover:not(:disabled) {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
}

.book-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.book-ch-indicator {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    min-width: 80px;
    text-align: center;
}

.book-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
}

.book-close-btn:hover {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
}

.book-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.book-sidebar {
    width: 290px;
    min-width: 290px;
    background: #070a12;
    border-right: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.book-search-box {
    padding: 10px 12px;
    border-bottom: 1px solid #1e293b;
}

.book-search-input {
    width: 100%;
    box-sizing: border-box;
    background: #0f172a;
    border: 1px solid #334155;
    color: #f8fafc;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-family: var(--font-ui);
    outline: none;
}

.book-search-input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.book-toc-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.book-toc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 7px 10px;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.3;
}

.book-toc-btn:hover {
    background: #111827;
    color: #f1f5f9;
}

.book-toc-btn.active {
    background: #0f1c2e;
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-weight: 700;
}

.toc-num {
    background: #1e293b;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-toc-btn.active .toc-num {
    background: #0284c7;
    color: #ffffff;
}

.toc-title {
    flex: 1;
}

.book-page-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    background: #0b0f19;
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.6;
}

.book-chapter {
    display: none;
}

.book-chapter.active {
    display: block;
}

.chapter-header {
    border-bottom: 1px solid #1e293b;
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.chapter-badge {
    font-size: 10px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.chapter-header h2 {
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 6px 0;
}

.chapter-lead {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.chapter-section {
    margin-bottom: 24px;
}

.chapter-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
    margin: 16px 0 8px 0;
    border-left: 3px solid #0284c7;
    padding-left: 8px;
}

.chapter-section p {
    margin: 0 0 10px 0;
}

.manual-bullets, .manual-steps {
    padding-left: 20px;
    margin: 8px 0 14px 0;
}

.manual-bullets li, .manual-steps li {
    margin-bottom: 6px;
}

.manual-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 16px 0;
    font-size: 11.5px;
    background: #090d16;
    border: 1px solid #1e293b;
    border-radius: 4px;
    overflow: hidden;
}

.manual-table th {
    background: #111827;
    color: #94a3b8;
    font-weight: 700;
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid #1e293b;
}

.manual-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #141c2c;
    color: #cbd5e1;
}

.manual-table tr:last-child td {
    border-bottom: none;
}

.manual-warning-card {
    background: rgba(234, 88, 12, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 14px 0;
}

.manual-warning-card h4 {
    margin: 0 0 4px 0;
    color: #fb923c;
    font-size: 12px;
    font-weight: 800;
}

.manual-warning-card p {
    margin: 0;
    color: #fed7aa;
}

.code-callout {
    background: #070a12;
    border: 1px solid #1e293b;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #38bdf8;
    text-align: center;
}

.kbd-pill {
    background: #1e293b;
    border: 1px solid #334155;
    color: #38bdf8;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
}

.kbd-key {
    background: #0f172a;
    border: 1px solid #475569;
    color: #e2e8f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Tape Catalog in Chapter 5 */
.tape-catalog-guide-banner {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(14, 165, 233, 0.05) 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.guide-banner-title {
    font-size: 12px;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 6px;
}

.guide-steps-list {
    margin: 0;
    padding-left: 18px;
    font-size: 11.5px;
    color: #e2e8f0;
}

.guide-steps-list li {
    margin-bottom: 4px;
}

.book-catalog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.book-cat-btn {
    background: #0f172a;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.book-cat-btn:hover {
    background: #1e293b;
    color: #f1f5f9;
}

.book-cat-btn.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    font-weight: 700;
}

.book-tape-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.book-tape-card {
    background: #070a12;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.15s ease;
}

.book-tape-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tape-card-header {
    border-bottom: 1px solid #141c2c;
    padding-bottom: 8px;
}

.tape-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.tape-id-badge {
    background: #0284c7;
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
}

.tape-range-badge {
    background: #1e293b;
    color: #38bdf8;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.tape-card-ext-badge {
    background: #064e3b;
    color: #6ee7b7;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.tape-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.35;
}

.tape-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
}

.tape-card-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tape-block-label {
    font-size: 9.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tape-block-text {
    margin: 0;
    color: #94a3b8;
    line-height: 1.45;
}

.tape-steps-mini {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #cbd5e1;
}

.tape-steps-mini li {
    line-height: 1.35;
}

.step-num {
    font-weight: 700;
    color: #38bdf8;
    font-family: var(--font-mono);
}

.tape-card-actions {
    margin-top: 4px;
}

.book-load-tape-btn {
    width: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #2563eb;
    color: #60a5fa;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.book-load-tape-btn:hover {
    background: #2563eb;
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.book-empty-search {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #64748b;
    font-size: 13px;
}

/* ==========================================================================
   Splash / Welcome Modal Dialog (#splash-modal)
   ========================================================================== */

.splash-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 6, 14, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    transition: opacity 0.2s ease;
}

.splash-modal-overlay.hidden {
    display: none !important;
}

.splash-card {
    width: 90vw;
    max-width: 580px;
    background: #0b0f19;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(56, 189, 248, 0.25);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #e2e8f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

.splash-badge {
    align-self: flex-start;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    font-family: 'Fira Code', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.splash-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#splash-title {
    margin: 0;
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #f8fafc;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.splash-version-pill {
    background: #1e293b;
    border: 1px solid #475569;
    color: #94a3b8;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.splash-description {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #cbd5e1;
}

.splash-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #060a12;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
}

.splash-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.splash-meta-label {
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
}

.splash-meta-val {
    color: #94a3b8;
    font-family: 'Fira Code', monospace;
    text-align: right;
    word-break: break-all;
}

.splash-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.splash-ok-btn {
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid #38bdf8;
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
    transition: all 0.15s ease;
}

.splash-ok-btn:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}

.splash-ok-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.splash-boot-hint {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    letter-spacing: 0.2px;
}

/* ==========================================================================
   Responsive Mobile Layouts (<= 900px and <= 600px)
   ========================================================================== */

@media (max-width: 900px) {
    html, body {
        height: auto !important;
        min-height: 100dvh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y;
    }
    #app-container, #main-workspace, #hardware-panel-section, #board-stage {
        height: auto !important;
        min-height: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        touch-action: pan-y;
    }
    #board-container, .chassis-outer-shell, .chassis-step-rim, .chassis-inner-well, .abc80-pcb, .ic-socket-package, .dip-ic, .calibratable-component, .disc-7seg-pkg, .key-btn, .tactile-switch, .overlay-key {
        touch-action: pan-y !important;
    }
    .splash-card {
        padding: 20px 18px;
        width: 92vw;
    }
    #splash-title {
        font-size: 18px;
    }
    .splash-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .splash-meta-val {
        text-align: left;
    }
    #main-header {
        height: auto;
        min-height: 30px;
        flex-wrap: wrap;
        padding: 3px 8px;
        gap: 4px 6px;
        justify-content: flex-start;
    }
    .header-left {
        gap: 6px;
        flex-shrink: 0;
    }
    .header-left .brand-badge,
    .header-left .brand-subtitle {
        display: none;
    }
    .header-left .brand-title {
        font-size: 13px;
    }
    .header-center {
        gap: 4px;
        flex-shrink: 0;
        margin-right: auto;
    }
    .header-center .clock-display,
    #cancel-ai-btn:disabled {
        display: none;
    }
    .backend-status-pill {
        padding: 2px 6px;
        font-size: 9.5px;
        gap: 4px;
    }
    .header-right {
        gap: 3px;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-left: auto;
    }
    #btn-toggle-ext-io:disabled {
        display: none;
    }
    .header-btn {
        padding: 3px 6px;
        font-size: 10px;
        gap: 3px;
        border-radius: 4px;
        white-space: nowrap;
    }
    .header-btn svg {
        width: 11px;
        height: 11px;
    }
    #main-workspace {
        flex-direction: column;
        overflow: visible;
        height: auto;
    }
    #hardware-panel-section {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
    }
    #board-panel-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        height: auto;
        min-height: 0;
        padding: 4px 8px;
        gap: 4px 6px;
        align-items: center;
    }
    #board-panel-toolbar .instance-picker,
    #board-panel-toolbar .rom-picker,
    #board-panel-toolbar .ext-io-picker {
        margin: 0;
        width: 100%;
        min-width: 0;
        font-size: 9.5px;
        gap: 4px;
        padding: 2px 5px;
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid #1e293b;
        border-radius: 4px;
        height: 24px;
        box-sizing: border-box;
        justify-content: space-between;
    }
    #board-panel-toolbar .ext-io-picker {
        background: rgba(6, 78, 59, 0.45);
        border-color: rgba(16, 185, 129, 0.45);
    }
    #board-panel-toolbar .instance-picker select,
    #board-panel-toolbar .rom-picker select,
    #board-panel-toolbar .ext-io-picker select {
        flex: 1;
        min-width: 0;
        font-size: 10.5px;
        padding: 1px 3px;
        height: 18px;
        text-overflow: ellipsis;
    }
    #board-panel-toolbar .board-manual-btn {
        width: 100%;
        height: 24px;
        padding: 2px 6px;
        font-size: 10.5px;
        justify-content: center;
        gap: 4px;
    }
    #board-stage {
        flex: 0 0 auto;
        min-height: 0;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 4px 0;
    }
    #inspector-section {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--border-dark);
        height: auto;
        min-height: 480px;
    }
    #inspector-section.inspector-collapsed {
        height: 0;
        min-height: 0;
        overflow: hidden;
        border-top: none;
    }
    #manual-modal .book-shell {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }
    .book-toc-toggle-btn {
        display: inline-flex;
    }
    #manual-sidebar {
        position: absolute;
        top: 48px;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.6);
    }
    #manual-sidebar.mobile-toc-open {
        transform: translateX(0);
    }
    .book-tape-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #host-ws-text {
        display: none;
    }
    .backend-status-pill {
        padding: 3px;
        border-radius: 50%;
    }
    .header-btn svg {
        display: none;
    }
    .header-btn {
        padding: 3px 5px;
        font-size: 9.5px;
    }
    .book-header {
        padding: 0 10px;
    }
    .book-title-group h2 {
        font-size: 11px;
    }
    .book-page-container {
        padding: 16px 14px;
    }
}