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

:root {
  --green: #33ff33;
  --green-dim: #22aa22;
  --green-glow: rgba(51, 255, 51, 0.3);
  --green-dark: #115511;
  --bg: #0a0a0a;
  --bg-panel: #111111;
  --border: #33ff33;
  --btn-bg: #222;
  --btn-border: #555;
  --kb-housing: #c8b88a;
  --kb-housing-light: #d4c89e;
  --kb-housing-dark: #a89868;
  --kb-key-bg: #b8c4d4;
  --kb-key-text: #1a1a2a;
  --kb-key-red: #cc2222;
  --key-size: 42px;
  --key-gap: 4px;
  --vsync-color: #33ff33;
  --blank-color: #ff6633;
  --charset-color: #33aaff;
  --diag-color: #ffaa33;
  --viapb5-color: #aa33ff;
}

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

#app { width: 100%; max-width: 1060px; padding: 16px; }

header { text-align: center; margin-bottom: 12px; }

h1 {
  font-size: 2.2rem;
  letter-spacing: 4px;
  text-shadow: 0 0 20px var(--green-glow), 0 0 40px var(--green-glow);
  color: var(--green);
}

.subtitle { font-size: 0.8rem; color: var(--green-dim); margin-top: 2px; }

#status-bar {
  display: flex; justify-content: center; gap: 12px; margin-top: 8px;
  font-size: 0.72rem; color: var(--green-dim); flex-wrap: wrap;
}
#status-bar span { padding: 2px 8px; border: 1px solid #333; }

#control-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 8px; border: 1px solid #333; background: var(--bg-panel);
}

.ctrl-btn {
  font-family: inherit; font-size: 0.8rem; color: var(--green);
  background: var(--btn-bg); border: 2px outset var(--btn-border);
  padding: 6px 14px; cursor: pointer; transition: all 0.1s;
}
.ctrl-btn:hover { background: #2a2a2a; color: #55ff55; box-shadow: 0 0 8px var(--green-glow); }
.ctrl-btn:active { border-style: inset; }
.ctrl-btn.sm { padding: 3px 8px; font-size: 0.7rem; }

.power-btn { background: #1a0000; border-color: #883333; color: #ff5555; }
.power-btn.on { background: #001a00; border-color: #33aa33; color: var(--green); box-shadow: 0 0 12px var(--green-glow); }

.matrix-btn, .test-btn { margin-left: auto; font-size: 0.7rem; padding: 4px 10px; }
.matrix-btn.active, .test-btn.active { background: #002200; border-color: var(--green); box-shadow: 0 0 10px var(--green-glow); }

.test-btn { margin-left: 0; background: #1a1a00; border-color: #886600; color: #ffcc00; }
.test-btn.active { background: #222200; border-color: #ffcc00; color: #ffcc00; box-shadow: 0 0 10px rgba(255,204,0,0.3); }

.test-run-btn { background: #001a00; border-color: #33aa33; color: var(--green); font-weight: bold; }
.ror-btn { background: #1a0011; border-color: #aa3366; color: #ff66aa; }

.ram-selector { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.ram-selector select { font-family: inherit; font-size: 0.8rem; color: var(--green); background: #1a1a1a; border: 1px solid #444; padding: 4px; }

#crt-container {
  position: relative; margin: 0 auto 0; border-radius: 16px 16px 4px 4px;
  overflow: hidden; border: 3px solid #333;
  box-shadow: 0 0 30px var(--green-glow), 0 0 60px rgba(51, 255, 51, 0.1), inset 0 0 60px rgba(0,0,0,0.5);
  background: #000; display: flex; justify-content: center;
}

#screen-blank-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #000; z-index: 5; display: none; pointer-events: none;
}

#screen { display: block; width: 100%; max-width: 640px; height: auto; image-rendering: pixelated; }

#scanlines {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 3px);
  pointer-events: none; z-index: 6;
}

#keyboard-housing {
  background: linear-gradient(180deg, var(--kb-housing-light) 0%, var(--kb-housing) 30%, var(--kb-housing-dark) 100%);
  border-radius: 0 0 12px 12px; padding: 14px 16px 18px; margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5); border: 1px solid #a09070; border-top: none;
}

#keyboard-container { display: flex; gap: 24px; justify-content: center; align-items: start; }

.kb-key {
  font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; font-weight: 700;
  width: var(--key-size); height: var(--key-size); min-width: var(--key-size); min-height: var(--key-size);
  max-width: var(--key-size); max-height: var(--key-size);
  padding: 2px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  user-select: none; border: none; outline: none; overflow: hidden;
  background: linear-gradient(180deg, #ccd4e0 0%, var(--kb-key-bg) 40%, #a8b0c0 100%);
  color: var(--kb-key-text); border-radius: 5px;
  box-shadow: 0 2px 0 #8890a0, 0 3px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: all 0.06s ease;
}
.kb-key .key-main { font-size: 0.72rem; font-weight: 800; color: var(--kb-key-text); }
.kb-key:active, .kb-key.active { transform: translateY(2px); box-shadow: 0 0 0 #8890a0, 0 1px 2px rgba(0,0,0,0.2); }
.kb-key.red-key { background: linear-gradient(180deg, #e02828, var(--kb-key-red), #aa1a1a); color: #fff; box-shadow: 0 2px 0 #881414, 0 3px 4px rgba(0,0,0,0.3); }
.kb-key.red-key .key-main { color: #fff; }
.kb-key.red-key:active, .kb-key.red-key.active { transform: translateY(2px); }
.kb-key.space-key { width: auto; max-width: none; min-width: unset; }
.kb-key.return-key { width: var(--key-size); height: calc(var(--key-size)*2 + var(--key-gap)); min-height: calc(var(--key-size)*2 + var(--key-gap)); max-height: calc(var(--key-size)*2 + var(--key-gap)); }
.kb-key.return-key .return-label { font-size: 0.68rem; font-weight: 900; color: #fff; }

/* Test Panel */
#cpu-test-panel { margin-bottom: 8px; }
.test-panel-header { background: #1a1a00; color: #ffcc00; text-shadow: 0 0 6px rgba(255,204,0,0.4); cursor: default !important; }

#test-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
#test-progress { font-size: 0.75rem; color: #ffcc00; margin-left: 8px; }

.test-summary-bar {
  padding: 8px 12px; margin-bottom: 8px; font-size: 0.8rem;
  border: 1px solid #333; background: #0a0a0a;
}
.test-summary-bar.all-pass { border-color: #33aa33; background: #0a1a0a; }
.test-summary-bar.has-fail { border-color: #aa3333; background: #1a0a0a; }
.test-total { color: #aaa; }
.test-pass { color: #33ff33; font-weight: bold; }
.test-fail { color: #ff3333; font-weight: bold; }
.test-rate { color: #ffcc00; font-weight: bold; margin-left: 12px; }

.test-results-box {
  max-height: 400px; overflow-y: auto; font-size: 0.68rem; line-height: 1.5;
  background: #050505; border: 1px solid #222; padding: 8px;
  white-space: pre-wrap; word-break: break-all;
}

/* Matrix Panel */
#kbd-matrix-panel { margin-bottom: 8px; }
.matrix-panel-header { background: #0a1a0a; color: var(--green); cursor: default !important; }

#matrix-info-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-size: 0.72rem; color: var(--green-dim); }
#matrix-info-bar b { color: var(--green); font-size: 0.8rem; }
#matrix-grid-container { overflow-x: auto; margin-bottom: 8px; }
#matrix-grid { border-collapse: collapse; font-size: 0.6rem; width: 100%; }
#matrix-grid th, #matrix-grid td { border: 1px solid #333; padding: 3px 4px; text-align: center; min-width: 60px; }
#matrix-grid th { background: #1a1a1a; color: var(--green-dim); }
#matrix-grid td { background: #0a0a0a; color: #555; height: 28px; }
#matrix-grid td.cell-pressed { background: #004400; color: var(--green); text-shadow: 0 0 4px var(--green-glow); }
#matrix-grid tr.row-active td { border-top: 1px solid var(--green); border-bottom: 1px solid var(--green); }
#matrix-grid tr.row-active td:first-child { background: #003300; color: var(--green); }
#matrix-port-readback { font-size: 0.75rem; color: var(--green-dim); margin-top: 4px; }
#matrix-bits { font-family: inherit; letter-spacing: 3px; }

/* Panels */
.panel { border: 1px solid #333; margin-bottom: 8px; background: var(--bg-panel); }
.panel-header { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; color: var(--green); border-bottom: 1px solid #222; user-select: none; }
.panel-header:hover { background: #1a1a1a; }
.panel-body { display: none; padding: 10px 12px; }
.panel-body.open { display: block; }
.panel-info { font-size: 0.75rem; color: var(--green-dim); margin-bottom: 8px; }

.drop-zone { border: 2px dashed #444; padding: 20px; text-align: center; cursor: pointer; font-size: 0.8rem; color: var(--green-dim); margin-bottom: 10px; position: relative; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--green); color: var(--green); }
.drop-zone input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.rom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; font-size: 0.72rem; }
.rom-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #222; }
.rom-item.loaded { border-color: var(--green-dark); }
.rom-check { font-size: 1rem; }
.rom-check.ok { color: var(--green); }
.rom-check.missing { color: #ff4444; }

.tab-content { display: none; font-size: 0.8rem; }
.tab-content.active { display: block; }
.tab-content p { margin-bottom: 8px; color: var(--green-dim); }
.file-info { font-size: 0.75rem; color: var(--green-dim); padding: 4px; margin: 6px 0; }

.debug-section { margin-bottom: 8px; font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.debug-section b { color: #55ff55; margin-left: 2px; }
.debug-section .flags { color: #888; font-size: 0.65rem; }

.mono-box { background: #000; border: 1px solid #222; padding: 6px; font-size: 0.7rem; min-height: 40px; white-space: pre; overflow-x: auto; display: block; line-height: 1.4; }

.hex-input { font-family: inherit; font-size: 0.75rem; color: var(--green); background: #1a1a1a; border: 1px solid #444; padding: 2px 6px; width: 50px; text-transform: uppercase; }

.pia-watch { flex-direction: column; align-items: flex-start; }
.pia-title { color: var(--green); font-size: 0.75rem; margin-bottom: 4px; }
.pia-watch .mono-box { width: 100%; font-size: 0.68rem; }

#video-signal-watch { font-size: 0.7rem; line-height: 1.4; color: var(--green); background: #050a05; border: 1px solid #1a3a1a; padding: 8px; white-space: pre; overflow-x: auto; }
.video-signal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.7rem; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.vsync-color { background: var(--vsync-color); }
.blank-color { background: var(--blank-color); }
.charset-color { background: var(--charset-color); }
.diag-color { background: var(--diag-color); }
.viapb5-color { background: var(--viapb5-color); }
.video-poke-helper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 8px; border: 1px solid #333; background: #0a0a0a; }
.poke-label { font-size: 0.72rem; color: var(--green-dim); font-weight: bold; }

footer { text-align: center; margin-top: 20px; padding: 12px; font-size: 0.75rem; }
footer a { color: var(--green-dim); text-decoration: none; }
footer a:hover { color: var(--green); text-decoration: underline; }

@keyframes crt-on { 0% { opacity: 0; transform: scaleY(0.01); } 50% { opacity: 0.3; transform: scaleY(1); } 100% { opacity: 1; transform: scaleY(1); } }
#crt-container.power-on #screen { animation: crt-on 0.6s ease-out; }
@keyframes glow-pulse { 0%,100% { box-shadow: 0 0 30px var(--green-glow), 0 0 60px rgba(51,255,51,0.1); } 50% { box-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(51,255,51,0.15); } }
#crt-container.power-on { animation: glow-pulse 3s ease-in-out infinite; }

@media (max-width: 800px) {
  :root { --key-size: 28px; --key-gap: 2px; }
  #app { padding: 8px; }
  h1 { font-size: 1.4rem; }
  #keyboard-housing { padding: 8px 6px 12px; }
  #keyboard-container { gap: 10px; }
  .kb-key .key-main { font-size: 0.48rem; }
  .ctrl-btn { padding: 4px 8px; font-size: 0.7rem; }
  .test-results-box { max-height: 250px; }
}