/* ================================================================
   DCIS-2 Workstation Emulator  –  Stylesheet
   Aesthetic: 1982-era CRT monitor, phosphor green/amber tones
   ================================================================ */

/* ── Reset / Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --phosphor:   #33ff66;
  --phosphor2:  #22cc55;
  --emu-amber:      #ffb833;
  --bg-deep:    #0a0a0c;
  --bg-panel:   #161820;
  --bg-bezel:   #1e2028;
  --bg-screen:  #000508;
  --border:     #2a2d3a;
  --text:       #8890aa;
  --text-bright:#c8d0e8;
  --emu-red:        #ff4444;
  --emu-orange:     #ff8822;
  --green-led:  #00ff88;
  --font-mono:  'Courier New', 'Lucida Console', monospace;
  --font-ui:    system-ui, sans-serif;
}




/* ── Main Machine Frame ───────────────────────────────────────── */
#machine {
    position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  gap: 10px;
}

/* ── Monitor Bezel ────────────────────────────────────────────── */
#monitor {
  position: relative;
  background: var(--bg-bezel);
  background: linear-gradient(108deg,rgba(30, 32, 40, 1) 0%, rgba(62, 64, 77, 1) 33%, rgba(10, 10, 13, 1) 100%);
  border: 2px solid #2e3040;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px #14151a,
    inset 0 1px 0 #3a3d50,
    0 8px 40px rgba(0,0,0,.8),
    0 0 80px rgba(51,255,102,.03);
  padding: 10px 10px 2px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min-content;
}

/* ── Monitor footer strip ──────────────────────────────────── */
#monitor-footer {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 10px;
  margin-top: 5px;
  border-top: 1px solid #252838;
  background: transparent url(datcube82.png) no-repeat 5px 6px;
}

#monitor-brand {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-shadow: 0 0 1px rgba(0, 0, 0, .6);
  color: #000000;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-left: 130px;
  padding-top: 5px;
  text-rendering: optimizeLegibility;
}

#footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-toggle-btn {
  background: linear-gradient(to bottom, #22253a, #181a28);
  color: #606880;
  border: 1px solid #2e3248;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 9px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 0 #0a0c14;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.panel-toggle-btn:hover { background: linear-gradient(to bottom, #2c3050, #20233a); color: var(--text-bright); border-color: #404868; }
.panel-toggle-btn:active { transform: translateY(1px); box-shadow: none; }

#screen-wrap {
  position: relative;
  border: 3px solid #0a0c10;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.9),
    0 0 2px var(--phosphor2);
}

/* The WebGL canvas — 552×388 native (512×288 active + overscan), scaled 2× with CSS */
#screen {
  display: block;
  width: 1104px;
  height: 776px;
  background: var(--bg-screen);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: none;   /* custom cursor inside emulator */
}

/* ── No-overscan mode: crop canvas to active area only ────────────
   #machine.no-overscan is toggled by JS.
   #screen-wrap (overflow:hidden) clips to 512×288 active area at 2×.
   The canvas stays at full 1104×776 but is shifted so only the active
   region is visible. Default: vstart=50 → top-crop = 50*2 = 100px
                              hstart=20 → left-crop = 20*2 = 40px      */
#machine.no-overscan #screen-wrap {
  width:  1030px;   /* 512 * 2 + 2*3 (border) */
  height:  582px;   /* 288 * 2 + 2*3 (border) */
}
#machine.no-overscan #screen {
  margin-left: -40px;    /* hstart=20 * 2 */
  margin-top: -100px;    /* vstart=50 * 2 */
}
#machine.no-overscan #control-panel {
  width: 1024px;
}

/* CRT scanline overlay — 1 CSS-px pitch.
   At 2× canvas scale each canvas pixel = 2 CSS px, so one dark gap sits between
   every two bright CSS rows → crisp, sub-canvas-pixel-accurate scanlines.
   Phosphor warmth + vignette are handled by the WebGL FS_CRT shader. */
#crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent         0px, transparent         1px,
    rgba(0,0,0,0.55)    1px, rgba(0,0,0,0.55)    2px
  );
}

#power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow .3s, background .3s;
}
#power-led.on  { background: var(--green-led); box-shadow: 0 0 6px var(--green-led), 0 0 12px var(--green-led); }
#power-led.off { background: #151511; box-shadow: none; }

/* ── Control Panel ────────────────────────────────────────────── */

/* ── Glitch & Warmup Overlays ─────────────────────────────────── */
#glitch-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none; /* DOM sauber */
  z-index: 5;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#warmup-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  display: none; /* DOM sauber */
}

.warmup-animate {
  display: block !important;
  animation: crt-warmup 0.4s ease-out forwards; /* Schneller! */
}

@keyframes crt-warmup {
  0% {
    background-color: rgba(0, 0, 0, 1);
    backdrop-filter: blur(4px); /* Weniger Unschärfe */
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }
}

/* ── Unified Dashboard (Grid Animation Fix) ───────────────────── */
#dashboard-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 552px;
  margin-top: -12px; /* Zieht das Panel leicht unter den Monitor-Rahmen */
  z-index: 1;
  transform: translateY(0);
}

#dashboard-wrapper.collapsed {
  grid-template-rows: 0fr;
  transform: translateY(-70px);
}

#dashboard {
  min-height: 0; /* Zwingend erforderlich für Grid-Animation */
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  border-top: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ── Dashboard Content Areas ──────────────────────────────────── */
#dash-content {
  /* Feste Höhe entfernt! Es passt sich nun flexibel dem Inhalt an */
  transition: height 0.3s ease;
}

.dash-pane {
  display: none;
  padding: 14px;
}
.dash-pane.active { 
  display: flex;
}

/* ── Power-Off Status (Gesteuert via #machine.power-off) ──────── */
#machine.power-off .dash-tab:not([data-tab="tab-main"]) {
  visibility: hidden; /* Hält die Tab-Breite intakt, versteckt den Text */
}

#machine.power-off .dash-tab.active {
  filter: saturate(0);
  color: #4a5066;
  border-bottom-color: #2a2d3a;
}

#machine.power-off #main-panels {
  display: none; /* Blendet Hardware-Infos aus, Header bleibt */
}

#machine.power-off .btn-group .hw-btn:not(#btn-power) {
  display: none;
}

/* ── Hardware Power Button & Pulse Effect ─────────────────────── */
.power-btn {
  padding: 8px 18px;
  transition: all 0.3s ease;
}

.io-icon {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent; /* Der Spalt oben im Kreis */
  margin-top: 3px;
}

.io-icon::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background-color: currentColor;
  border-radius: 1px;
}

#machine.power-off .power-pulse {
  animation: red-glow 1.5s infinite alternate ease-in-out;
}

#crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(monitor_screen.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  /* Beim EINSCHALTEN: Verschwindet extrem schnell (0.2s) und ohne Verzögerung */
  transition: opacity 1s ease;
}

/* 2. Zustand: AUSGESCHALTET */
#machine.power-off #crt-overlay::after {
  opacity: .419;
  /* Beim AUSSCHALTEN: Weiches Einblenden (0.6s), aber erst nach 0.8s warten (Glitch abwarten!) */
  transition: opacity 0.6s ease-out 0.8s;
}

#machine.power-off #screen {
    cursor: default;
}

#machine.power-off #screen-wrap {
    box-shadow: none;
}

@keyframes red-glow {
  0% { box-shadow: 0 0 5px rgba(255, 68, 68, 0.4), inset 0 0 2px rgba(255, 68, 68, 0.2); border-color: #882222; color: #ff8888; }
  100% { box-shadow: 0 0 15px rgba(255, 68, 68, 0.9), inset 0 0 8px rgba(255, 68, 68, 0.5); border-color: #ff4444; color: #ffffff; }
}

/* ── Status Bar Fading ────────────────────────────────────────── */
#status-bar {
  transition: opacity 0.4s ease-out;
  opacity: 1;
}
#status-bar.faded {
  opacity: 0;
  pointer-events: none;
}

/* ── DIP Switches (PCB Style) ─────────────────────────────────── */
.setting-item.full-width {
  grid-column: 1 / -1; /* Nimmt die gesamte Breite des Grids ein */
}

.dip-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dip-block {
  background: #c33;
  padding: 8px 12px 14px 12px;
  border-radius: 4px;
  display: inline-flex;
  gap: 6px;
  scale: .75;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -3px 6px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.5);
  border: 1px solid #711;
}

.dip-switch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dip-toggle {
  width: 16px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 1px;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid #000;
  cursor: pointer;
}

.dip-toggle::before {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  height: 10px;
  background: #fff;
  bottom: 1px; /* OFF-Position */
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 -2px 0 #ddd, inset 0 1px 0 #fff;
  transition: bottom 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="checkbox"]:checked + .dip-toggle::before {
  bottom: 15px; /* ON-Position */
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 2px 0 #ddd, inset 0 -1px 0 #fff;
}

.dip-number {
  color: rgba(255,255,255,0.8);
  font-family: sans-serif;
  font-size: 9px;
  margin-top: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

.dip-legend {
  background: rgba(0,0,0,0.25);
  border: 1px solid #252838;
  padding: 10px 14px;
  border-radius: 4px;
  flex-grow: 1;
}

.dip-legend-row {
  display: flex;
  gap: 12px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8890aa;
}
.dip-legend-row:last-child { margin-bottom: 0; }

.dip-legend-sw {
  color: #ffb833;
  font-weight: bold;
  width: 30px;
  flex-shrink: 0;
}

/* ── DIP Switches: Disabled State ─────────────────────────────── */

/* 1. Mauszeiger blockieren */
input[type="checkbox"]:disabled + .dip-toggle {
  cursor: not-allowed;
}

/* 2. Matter, grauer Kunststoff statt strahlendem Weiß */
input[type="checkbox"]:disabled + .dip-toggle::before {
  background: #7a7a7a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8), inset 0 -2px 0 #555, inset 0 1px 0 #999;
}

/* 3. Schattierung anpassen, falls ein Schalter auf ON feststeckt */
input[type="checkbox"]:disabled:checked + .dip-toggle::before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.8), inset 0 2px 0 #555, inset 0 -1px 0 #999;
}

/* 4. Die Nummer unter dem Schalter stark abdunkeln */
input[type="checkbox"]:disabled ~ .dip-number {
  color: rgba(255, 255, 255, 0.25);
  text-shadow: none;
}

/* ── Responsive scale-down & 1:1 Mode ─────────────────────────── */
@media (max-width: 1150px) {
  #screen { width: 552px; height: 388px; }
  #dashboard-wrapper { width: 552px; }
  #main-panels { flex-direction: column; }
  #reg-panel { width: 100%; }
  .reg-2col, .reg-sys-row { grid-template-columns: repeat(4, 1fr); }
  .diag-cols { flex-direction: row; }
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  
  #machine.no-overscan #screen-wrap { width: 512px; height: 288px; }
  #machine.no-overscan #screen { margin-left: -20px; margin-top: -50px; }
  #machine.no-overscan #dashboard-wrapper { width: 512px; }
}

/* ── Scale Helpers für Mobile/Retina ──────────────────────────── */
.scale-75 {
  transform: scale(0.75);
  transform-origin: top center;
  margin-bottom: calc(-25% * (776px / 1104px)); /* Verhindert toten Raum unten */
}

.scale-50 {
  transform: scale(0.5);
  transform-origin: top center;
  margin-bottom: -50%;
}

/* ── Dashboard Tabs ───────────────────────────────────────────── */
#dash-tabs {
  display: flex;
  background: #0f1118;
  border-bottom: 2px solid var(--border);
}

.active#tab-main {
    flex-direction: column;
}

#main-panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
  overflow: hidden;
}

/* ── Register panel ───────────────────────────────────────────── */
#reg-panel {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.panel-section-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #505870;
  font-family: var(--font-mono);
  margin-bottom: 4px;
  text-transform: uppercase;
}

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

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

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

.panel-divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Diagnostics panel ────────────────────────────────────────── */
#diag-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.diag-cols {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-grow: 1;
}

.diag-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#layer-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.layer-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 3px;
  text-align: center;
  border: 1px solid #1a1d28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer-pill.on  { background: #0a1a0a; color: var(--phosphor); border-color: var(--phosphor2); }
.layer-pill.off { background: #080a0c; color: #404458; border-color: #141620; }

#bg-color-display {
  display: flex;
  align-items: center;
  gap: 7px;
}
#bg-color-swatch {
  width: 28px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #252838;
  flex-shrink: 0;
}

#irq-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.irq-row-group {
  display: flex;
  gap: 3px;
  align-items: center;
}
.irq-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #505870;
  width: 28px;
  flex-shrink: 0;
}
.irq-bit {
  width: 22px;
  height: 17px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #141620;
  color: #343648;
  background: #080a0c;
  cursor: default;
}
.irq-bit.masked  { background: #0a1a0a; color: var(--phosphor2); border-color: #1a3020; }
.irq-bit.pending { background: #2a1a00; color: var(--emu-amber); border-color: #553300; box-shadow: 0 0 4px rgba(255,184,51,.4); }

.diag-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--phosphor2);
  background: rgba(0,0,0,.35);
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid #1a1d28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Next-instruction disasm: preserve spaces so columns align correctly */
#next-instr-display {
  white-space: pre;
  overflow-x: auto;
  text-overflow: clip;
  font-size: 11px;
}

.active#tab-mem {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

#mem-canvas-host {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.active#tab-settings {
    align-items: flex-start;
    gap: 15px;
    justify-content: center;
}

.dash-tab {
  flex: 1;
  padding: 20px 0px 5px 0;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: #606880;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.dash-tab:last-child { border-right: none; }
.dash-tab:hover { background: #1a1d28; color: var(--text-bright); }
.dash-tab.active {
  background: var(--bg-panel);
  color: var(--phosphor);
  border-bottom: 2px solid var(--phosphor);
  font-weight: bold;
}


/* ── Hardware Buttons (Globally refined) ──────────────────────── */
.btn-group { display: flex; gap: 6px; }
.hw-btn {
  background: linear-gradient(to bottom, #282c3a, #1e2230);
  color: var(--text-bright);
  border: 1px solid #38405a;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.1s;
  box-shadow: 0 2px 0 #0a0c14;
}
.hw-btn:hover { background: linear-gradient(to bottom, #30354a, #252838); border-color: #505870; }
.hw-btn:active { background: #1a1d28; box-shadow: none; transform: translateY(2px); }
.hw-btn.red { border-color: #882222; color: var(--emu-red); }
.hw-btn.orange { border-color: #884422; color: var(--emu-orange); }
.hw-btn.toggle.on, .hw-btn.sub-tab.active, .hw-btn.mem-mode.active { background: #1a2a1a; border-color: var(--phosphor2); color: var(--phosphor); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); transform: translateY(1px); }
.hw-btn.large { padding: 10px 24px; font-size: 12px; }

/* ── TAB 1: Main (Status & Regs) ──────────────────────────────── */
.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#status-bar {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  padding-left: 10px;
}
#st-mode { color: var(--phosphor); font-weight: bold; }

.reg-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--phosphor2);
  background: rgba(0,0,0,.4);
  padding: 4px 8px;
  border: 1px solid #252838;
  border-radius: 3px;
  text-align: center;
}
.reg-cell.changed { color: var(--emu-amber); border-color: #554020; }

/* ── Main Tab: Inline Memory View ─────────────────────────────── */
#main-memview-section {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  width: 100%;
}
#main-memview-host {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
#machine.power-off #main-memview-section { display: none; }

/* ── TAB 2: Memory ────────────────────────────────────────────── */
#mem-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
}
#mem-controls input, #mem-controls select {
  background: #0e1016;
  color: var(--phosphor);
  border: 1px solid var(--border);
  padding: 4px 6px;
  font-family: var(--font-mono);
  border-radius: 3px;
}

.range-row, .view-row {
    display: flex;
    justify-content: end;
    gap: 1rem;
}

.range-row label {
    display: flex;
    flex-direction: column;
}

.view-row {
    flex: 1 auto;
    align-items: end;
}

#mem-controls input { width: 60px; text-align: center; padding: 5px 2px; }
.divider { color: #38405a; margin: 0 4px; }
.view-container {
  background: rgba(0,0,0,.3);
  border: 1px solid #252838;
  border-radius: 4px;
  padding: 8px;
  overflow: auto;
  flex: 1;
  min-width: 0;
}
.sub-pane { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--phosphor2); white-space: pre; }
.sub-pane.active { display: block; }

/* ── TAB 3: Media ─────────────────────────────────────────────── */
.active.layout-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.media-collection { display: flex; flex-direction: row; gap: 20px; }
.media-actions { display: flex; gap: 20px; }

/* ── TAB 4: Settings ──────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.setting-item {
  background: rgba(0,0,0,.2);
  border: 1px solid #252838;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.knob-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #606880;
  margin-bottom: 8px;
}
select { width: 100%; }
input[type="range"] { width: 100%; accent-color: var(--phosphor2); cursor: ew-resize; }

input.inlineEdit {
    width: 16px;
    font-size: 12px;
    padding: 0;
    margin: 0 5.5px 0 0;
    background: #222;
    color: var(--phosphor);
    border: 0;
    font-family: var(--font-mono);
    outline: none;
}

/* ── Loading Overlay & Animations (unchanged) ─────────────────── */
/* (Behalte hier einfach deinen bestehenden #overlay und Keyframes Code) */

/* ── Responsive scale-down ────────────────────────────────────── */
@media (max-width: 1150px) {
  #screen { width: 552px; height: 388px; }
  #dashboard { width: 552px; }
  #main-panels { flex-direction: column; }
  #reg-panel { width: 100%; }
  .reg-2col, .reg-sys-row { grid-template-columns: repeat(4, 1fr); }
  .diag-cols { flex-direction: row; }
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  #machine.no-overscan #screen-wrap { width: 512px; height: 288px; box-shadow: none; border: none; border-radius: 0;}
  #machine.no-overscan #screen { margin-left: -20px; margin-top: -50px; }
  #machine.no-overscan #dashboard { width: 512px; }
  /* Memory tab: layout identical at all widths (column by default) */
}
/* ── Mobile: step-scale (no sub-pixel blur) ────────────────────── */
/* Applies on top of the 1:1 breakpoint (≤1150px) above.           */
/* `zoom` shrinks layout too — no dead space, touch areas correct.  */
@media (max-width: 760px) {
  #machine { zoom: 0.75; }
}
@media (max-width: 560px) {
  #machine { zoom: 0.5; }
}

:fullscreen #machine {
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100vw;
  height: 100vh;
}
:fullscreen #monitor {
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #000;
  padding: 0;
  width: auto;
}
:fullscreen #monitor-footer,
:fullscreen #dashboard-wrapper { display: none; }
/* #screen-wrap dimensions + scale are applied by the JS fullscreenchange handler.
   The handler scales #screen-wrap as a unit so #crt-overlay scales with it.     */

/* ── Custom Scrollbars ─────────────────────────────────────────── */
/* Firefox / modern browsers */
* {
  scrollbar-width: thin;
  scrollbar-color: #252838 #0a0c12;
}
/* WebKit / Blink (Chrome, Edge, Safari) */
::-webkit-scrollbar              { width: 3px; height: 3px; }
::-webkit-scrollbar-track        { background: #0a0c12; }
::-webkit-scrollbar-thumb        { background: #252838; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: #38405a; }
::-webkit-scrollbar-button       { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner       { background: #0a0c12; }

/* ── Drive Bays ───────────────────────────────────────────────── */
.drive-container {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}
.drive-bay {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 200px;
}
.drive-label {
  font-family: var(--font-mono);
  color: var(--text-bright);
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: bold;
}
.drive-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  background: #050608;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #1a1d28;
}

/* ── Drive LEDs ───────────────────────────────────────────────── */
.drive-leds {
  display: flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
}
.drive-leds span {
  padding: 1px 4px;
  border-radius: 2px;
  background: #111;
  color: #333;
  border: 1px solid #222;
}
/* Read = Grün, Write = Rot/Amber */
.drive-leds span.led-r.active { background: #1a441a; color: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 5px var(--phosphor); }
.drive-leds span.led-w.active { background: #441a1a; color: var(--emu-red);      border-color: var(--emu-red);      box-shadow: 0 0 5px var(--emu-red); }

/* ═══════════════════════════════════════════════════════════════════
   Embedded-only additions — not present in dcis/emulator/css/style.css
   ═══════════════════════════════════════════════════════════════════ */

/* a) Restore base typography / colour that html,body provided standalone */
#machine {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
  user-select: none;
}

/* b) Panel toggle: from microscopic 9 px button to a proper pill switch  */
#btn-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #12141e;
  border: 1px solid #2a2e42;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  border-radius: 4px;
  padding: 2px 5px 0 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: #5a6070;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  line-height: 1.4;
}
#btn-panel-toggle::before {
  content: 'PANEL';
  font-size: 8px;
  color: #666;
}

#btn-panel-toggle:hover {
  background: #1c1f30;
  border-color: #3e4360;
  color: var(--text-bright);
}
  
#btn-panel-toggle:active { transform: translateY(1px); box-shadow: none; }

/* c) Loading overlay (placeholder comment in original; scoped to #machine) */
#overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,13,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity .5s ease;
}
#overlay.fade-out { opacity: 0; pointer-events: none; }
#overlay-box { text-align: center; font-family: var(--font-mono); color: var(--text); }
#overlay-logo {
  font-size: 40px;
  color: var(--phosphor);
  letter-spacing: .2em;
  text-shadow: 0 0 20px var(--phosphor);
  margin-bottom: 8px;
}
#overlay-sub  { font-size: 10px; letter-spacing: .3em; margin-bottom: 20px; }
#overlay-msg  { font-size: 11px; color: var(--text-bright); margin-bottom: 14px; }
#overlay-bar  { width: 200px; height: 3px; background: #1a1d28; border-radius: 2px; margin: 0 auto; overflow: hidden; }
#overlay-progress { height: 100%; width: 0%; background: var(--phosphor); transition: width .3s ease; border-radius: 2px; }