:root {
    --controls-width: 180px; --canvas-bg: #f0f0f0; --component-bg: #ffffff;
    --component-border: #cccccc; --component-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    --port-size: 10px; --port-color-input: #007bff; --port-color-output: #dc3545;
    --wire-color: #333333; --wire-width: 2px; --bulb-off-color: #555555;
    --bulb-on-color: #ffc107; --power-off-color: #dc3545; --power-on-color: #28a745;
    --active-mode-bg: #007bff; --active-mode-color: white; --symbol-stroke: #333;
    --symbol-stroke-width: 4; --connector-stroke-width: 3; --button-gap: 8px; /* Slightly reduced gap */
    --display-bg: #333; --display-border: #555; --display-text-color: #0f0;
    --pulse-indicator-color: rgba(255, 255, 0, 0.3);
    --save-button-bg: #28a745; --save-button-hover-bg: #218838;
    --load-button-bg: #ffc107; --load-button-hover-bg: #e0a800; --load-button-color: #212529;
    --png-button-bg: #17a2b8; --png-button-hover-bg: #138496;
    --mode-button-bg: #f8f9fa; --mode-button-hover-bg: #e9ecef; --mode-button-color: #495057; --mode-button-border: #6c757d;
    --top-control-bar-bg: #dee2e6; --top-control-bar-border: #adb5bd;
    --segment-active: #f00;
    --segment-inactive: #331111;
    --hex-display-bg: #000;
    --hex-display-border: #444;
    --switch-off-color: #6c757d;
    --switch-on-color: #28a745;
}
body{font-family:sans-serif;margin:0;padding:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:#e9ecef}

.top-control-bar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 8px 15px;
    background-color: var(--top-control-bar-bg);
    border-bottom: 1px solid var(--top-control-bar-border);
    flex-shrink: 0;
    gap: var(--button-gap);
}
.top-control-button {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    text-align: center;
    transition: background-color .2s, color .2s, border-color .2s;
    color: #fff;
    white-space: nowrap;
}
.wire-layer-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 4px;
    padding: 4px 8px;
    background: var(--mode-button-bg);
    border: 1px solid var(--mode-button-border);
    border-radius: 5px;
}

.radio-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-size: 0.85em;
    color: var(--mode-button-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}

.radio-label input[type="radio"] {
    cursor: pointer;
    margin: 0 2px 0 0;
}
/* Specific Button Colors */
.top-control-button.load-button{background-color: var(--load-button-bg); color: var(--load-button-color); border-color: var(--load-button-bg);}
.top-control-button.load-button:hover{background-color: var(--load-button-hover-bg); border-color: var(--load-button-hover-bg);}
.top-control-button.save-button{background-color: var(--save-button-bg); border-color: var(--save-button-bg);}
.top-control-button.save-button:hover{background-color: var(--save-button-hover-bg); border-color: var(--save-button-hover-bg);}
.top-control-button.download-png-button{background-color: var(--png-button-bg); border-color: var(--png-button-bg);}
.top-control-button.download-png-button:hover{background-color: var(--png-button-hover-bg); border-color: var(--png-button-hover-bg);}
/* Mode Button Specifics (different base style) */
.top-control-button.mode-button{
    background-color: var(--mode-button-bg);
    color: var(--mode-button-color);
    border-color: var(--mode-button-border);
}
.top-control-button.mode-button:hover{ background-color: var(--mode-button-hover-bg); }
.top-control-button.mode-button.active-mode{
    background-color: var(--active-mode-bg);
    color: var(--active-mode-color);
    border-color: var(--active-mode-bg);
}
.app-container{display:flex;flex-grow:1;overflow:hidden}
.controls{width:var(--controls-width);background-color:#f8f9fa;padding:15px;border-right:1px solid #dee2e6;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.controls h2{margin-top:0;margin-bottom:15px;font-size:1.2em;text-align:center}
.component-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.control-item{background-color:var(--component-bg);border:1px solid var(--component-border);border-radius:5px;padding:8px;text-align:center;cursor:grab;font-size:.8em;box-shadow:var(--component-shadow);transition:background-color .2s;user-select:none;touch-action:none;min-height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.control-item:hover{background-color:#e9ecef}
.control-item:active{cursor:grabbing}
.control-item[data-type=POWER]{background-color:#d4edda}
.control-item[data-type=BULB]{background-color:#fff3cd}
.control-item[data-type=SWITCH]{background-color:#d1ecf1}
.control-item[data-type=DISPLAY]{background-color:#e0e0e0}
.control-item[data-type=PULSE]{background-color:#cce5ff}
.control-item[data-type=D_LATCH]{background-color:#e2d6f3}
.control-item[data-type=T_FLIP_FLOP]{background-color:#dcd6f7}
.control-item[data-type="HEX_DISPLAY"] {
    background-color: #2c3e50;
    color: #fff;
}
.controls-buttons{margin-top:auto;display:flex;flex-direction:column;gap:var(--button-gap)}
.controls-button{padding:10px;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1em;text-align:center;transition:background-color .2s} /* Keep style for Reset */
/* Specific Button Colors (only Reset left here) */
.reset-button{background-color:#dc3545}
.reset-button:hover{background-color:#c82333}

.canvas-container{flex-grow:1;position:relative;overflow:hidden;background-color:var(--canvas-bg);cursor:default}
.canvas-container.delete-mode{cursor:crosshair}
#canvas{width:100%;height:100%;position:relative}
#svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* Layering: SVG Layer (wires) */
    pointer-events: none; /* Allow clicks to pass through to components below */
}

/* Component, Port, Wire styles */
.canvas-component {
    position: absolute;
    background-color: var(--component-bg);
    border: 1px solid var(--component-border);
    border-radius: 5px;
    padding: 2px;
    min-width: 60px;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--component-shadow);
    user-select: none;
    z-index: 10; /* Layering: Components */
    font-size: 0.9em;
    touch-action: none;
    pointer-events: all; /* Components react to events */
    cursor: move;
    box-sizing: border-box;
}
.canvas-component[data-type="D_LATCH"], .canvas-component[data-type="T_FLIP_FLOP"] { min-height: 60px; }
.delete-mode .canvas-component{cursor:crosshair}
.canvas-component.dragging{
    opacity:.7;
    z-index: 1000; /* Layering: Dragging Component (Highest) */
    cursor:grabbing!important;
}
.gate-symbol { width: 75%; height: 60%; max-width: 40px; max-height: 20px; display: block; margin: auto; stroke: var(--symbol-stroke); stroke-width: var(--symbol-stroke-width); stroke-linecap: round; stroke-linejoin: round; fill: none; overflow: visible; }
 .canvas-component[data-type="D_LATCH"] .gate-symbol, .canvas-component[data-type="T_FLIP_FLOP"] .gate-symbol { height: 70%; max-height: 35px; }
.gate-symbol .symbol-shape { fill: none; stroke: var(--symbol-stroke); stroke-width: var(--symbol-stroke-width); }
.gate-symbol .inversion-circle { fill: var(--component-bg); stroke: var(--symbol-stroke); stroke-width: calc(var(--symbol-stroke-width) * 0.7); }
.gate-symbol .connector-line { stroke: var(--symbol-stroke); stroke-width: var(--connector-stroke-width); fill: none; vector-effect: non-scaling-stroke; }
.gate-symbol text { font-family: sans-serif; font-size: 12px; fill: var(--symbol-stroke); stroke: none; text-anchor: start; dominant-baseline: middle; }
.component-label { font-size: 0.6em; color: #555; margin-top: 2px; line-height: 1; text-align: center; display: block; pointer-events: none; }
.canvas-component[data-type="POWER"], .canvas-component[data-type="PULSE"], .canvas-component[data-type="BULB"], .canvas-component[data-type="SWITCH"], .canvas-component[data-type="DISPLAY"] { flex-direction: row; min-height: 50px; width: 50px; height: 50px; }
.canvas-component[data-type="POWER"], .canvas-component[data-type="PULSE"], .canvas-component[data-type="SWITCH"], .canvas-component[data-type="DISPLAY"] { justify-content: center; align-items: center; }
.canvas-component[data-type="BULB"] { width: 50px; height: 50px; border-radius: 50%; justify-content: center; align-items: center; }
.canvas-component[data-type=DISPLAY]{ background-color:var(--display-bg); border:2px solid var(--display-border); border-radius:3px; padding:0;}
.display-text{ font-family:'Courier New',Courier,monospace;font-size:1.8em;font-weight:700;color:var(--display-text-color);text-shadow:0 0 3px var(--display-text-color);line-height:1 }
.canvas-component[data-type=PULSE]{
    background-color:var(--power-off-color);
    color:#fff;
    padding:0;
    position:relative;
    /* overflow: hidden; */ /* Kept fix from previous step */
}
.canvas-component[data-type=PULSE][data-manual-state="1"]{background-color:var(--power-on-color)}
.pulse-toggle-button{ padding:4px 8px;border:1px solid hsla(0,0%,100%,.6);border-radius:4px;font-size:.9em;line-height:1;cursor:pointer;color:#fff;background-color:rgba(0,0,0,.15);pointer-events:all;user-select:none;display:inline-block;z-index:2 } /* Ensure z-index > 1 */
.pulse-toggle-button:hover{ background-color:rgba(0,0,0,.3) }
.pulse-indicator{ position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--pulse-indicator-color);opacity:0;transition:opacity .1s ease-in-out;z-index:1;pointer-events:none }
.canvas-component[data-type=PULSE][data-state="1"] .pulse-indicator{ opacity:1 }
.canvas-component[data-type=POWER]{ background-color:var(--power-off-color);color:#fff;padding:0}
.canvas-component[data-type=POWER][data-state="1"]{background-color:var(--power-on-color)}
.power-toggle-button{ padding:4px 8px;border:1px solid hsla(0,0%,100%,.6);border-radius:4px;font-size:.75em;line-height:1;color:#fff;background-color:rgba(0,0,0,.15);pointer-events:all;user-select:none;display:inline-block;cursor:pointer!important }
.power-toggle-button:hover{ background-color:rgba(0,0,0,.3) }
.canvas-component[data-type=BULB]{ background-color:var(--bulb-off-color); padding:0}
.canvas-component[data-type=BULB] .port.input-port{ left:-5px }
.canvas-component[data-type=BULB][data-state="1"]{background-color:var(--bulb-on-color);box-shadow:0 0 15px var(--bulb-on-color)}
.canvas-component[data-type=BULB]::before{ content:'' }
.canvas-component[data-type=SWITCH]{
    width:60px;
    background-color:var(--switch-off-color);
    color:#fff;
    padding:0;
}
.canvas-component[data-type=SWITCH][data-closed="1"]{background-color:var(--switch-on-color)}
.switch-toggle-button{
    padding:4px 8px;
    border:1px solid hsla(0,0%,100%,.6);
    border-radius:4px;
    font-size:.75em;
    line-height:1;
    color:#fff;
    background-color:rgba(0,0,0,.15);
    pointer-events:all;
    user-select:none;
    display:inline-block;
    cursor:pointer!important;
}
.switch-toggle-button:hover{ background-color:rgba(0,0,0,.3) }

.port {
    position: absolute;
    width: var(--port-size);
    height: var(--port-size);
    border-radius: 50%;
    border: 1px solid #555;
    cursor: crosshair;
    z-index: 15; /* Layering: Ports */
    pointer-events: all; /* Ports must be clickable */
    background-color: #fff;
}
.delete-mode .port{ cursor:default }
.input-port{ background-color:var(--port-color-input);left:calc(var(--port-size)/-2) }
.output-port{ background-color:var(--port-color-output);right:calc(var(--port-size)/-2); }
.port.input-port[data-index="0"]{ top:25%;transform:translateY(-50%) }
.port.input-port[data-index="1"]{ top:75%;transform:translateY(-50%) }
.port.input-port.single-input{ top:50%;transform:translateY(-50%) }
.output-port[data-index="0"] { top: 25%; transform: translateY(-50%); right: calc(var(--port-size) / -2); }
.output-port[data-index="1"] { top: 75%; transform: translateY(-50%); right: calc(var(--port-size) / -2); }
.canvas-component:not([data-type="D_LATCH"]):not([data-type="T_FLIP_FLOP"]) .output-port { top: 50%; transform: translateY(-50%); }
.canvas-component[data-type="D_LATCH"] .output-port[data-index="0"], .canvas-component[data-type="T_FLIP_FLOP"] .output-port[data-index="0"] { top: 25%; transform: translateY(-50%); }
.canvas-component[data-type="D_LATCH"] .output-port[data-index="1"], .canvas-component[data-type="T_FLIP_FLOP"] .output-port[data-index="1"] { top: 75%; transform: translateY(-50%); }

.wire {
    stroke: var(--wire-color);
    stroke-width: var(--wire-width);
    fill: none;
    pointer-events: stroke; /* IMPORTANT: Wires react to clicks ON the line/stroke */
    cursor: default;
}
.delete-mode .wire{ cursor:crosshair }
.wire.active{ stroke:var(--bulb-on-color);stroke-width:calc(var(--wire-width)+1px) }
.delete-mode .wire:hover{ stroke:red;stroke-width:calc(var(--wire-width)+2px) }
#temp-wire{ stroke:#888;stroke-width:var(--wire-width);stroke-dasharray:5,5;pointer-events:none }
/* Mode controls group styling */
.mode-controls-group {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* Add these new styles before the media queries */
.canvas-component[data-type="HEX_DISPLAY"] {
    width: 80px;
    height: 100px;
    background-color: var(--hex-display-bg);
    border: 2px solid var(--hex-display-border);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.seven-segment-display {
    position: relative;
    width: 60px;
    height: 80px;
    margin: auto;
}

/* Seven segments (a-g) */
.segment {
    position: absolute;
    background-color: var(--segment-inactive);
    transition: background-color 0.2s;
}

/* Horizontal segments (a, d, g) */
.segment-a, .segment-d, .segment-g {
    width: 40px;
    height: 8px;
    left: 10px;
}

.segment-a { top: 0; }
.segment-g { top: 36px; }
.segment-d { bottom: 0; }

/* Vertical segments (b, c, e, f) */
.segment-b, .segment-c, .segment-e, .segment-f {
    width: 8px;
    height: 35px;
}

/* Right segments */
.segment-b { top: 2px; right: 0; }
.segment-c { bottom: 2px; right: 0; }

/* Left segments */
.segment-f { top: 2px; left: 0; }
.segment-e { bottom: 2px; left: 0; }

/* Active segment state */
.segment.active {
    background-color: var(--segment-active);
    box-shadow: 0 0 5px var(--segment-active);
}

/* Input ports positioning for HEX_DISPLAY */
.canvas-component[data-type="HEX_DISPLAY"] .input-port[data-index="0"] {
    top: 15%;
}
.canvas-component[data-type="HEX_DISPLAY"] .input-port[data-index="1"] {
    top: 38%;
}
.canvas-component[data-type="HEX_DISPLAY"] .input-port[data-index="2"] {
    top: 62%;
}
.canvas-component[data-type="HEX_DISPLAY"] .input-port[data-index="3"] {
    top: 85%;
}

/* Responsive adjustments */
@media (max-width:768px){
    .top-control-bar { padding: 5px 10px; gap: 5px; } /* Adjust top bar padding/gap */
    .top-control-button { padding: 5px 8px; font-size: 0.8em; } /* Smaller top bar buttons */
    .app-container{flex-direction:column;height:auto;min-height:100vh}
    .controls{width:100%;height:auto;max-height:40vh;border-right:none;border-bottom:1px solid #dee2e6;flex-direction:column;overflow-y:auto;padding:10px}
    .component-list{grid-template-columns:1fr 1fr 1fr}
    .controls h2{font-size:1em;margin-bottom:10px}
    .control-item{font-size:.7em;padding:5px;min-height:35px}
    .controls-buttons{margin-top:15px}
    .canvas-container{height:calc(100vh - 60px);flex-grow:1} /* Adjust height based on single top bar */
    :root{--port-size:12px}
}
@media (max-width:480px){
     /* .top-control-bar already allows wrapping */
     .component-list{grid-template-columns:1fr 1fr}
     .power-toggle-button,.pulse-toggle-button,.switch-toggle-button{font-size:.7em}
}

/* Hidden file input */
#load-file-input { display: none; }