:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --panel2:#0e1216;
  --green:#33ff66;
  --green-dim:#1f9c40;
  --amber:#ffb347;
  --red:#ff4d4d;
  --line:#1e2a22;
  --mono:'Share Tech Mono', monospace;
  --disp:'VT323', monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:
  radial-gradient(circle at 50% -10%, #16201a 0%, var(--bg) 60%);
  color:var(--green);font-family:var(--mono);min-height:100%;}
#app{max-width:1100px;margin:0 auto;padding:12px;}

/* Header */
#topbar{display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:10px 16px;
  background:linear-gradient(180deg,#12181c,#0d1114);
  box-shadow:0 0 24px rgba(51,255,102,.05) inset;flex-wrap:wrap;gap:8px;}
.title-block h1{font-family:var(--disp);font-size:2.4rem;letter-spacing:2px;
  color:var(--green);text-shadow:0 0 12px rgba(51,255,102,.5);line-height:1;}
.title-block h1 .chip{color:var(--amber);text-shadow:0 0 12px rgba(255,179,71,.5);}
.tag{font-size:.75rem;color:var(--green-dim);letter-spacing:1px;}
.leds{display:flex;gap:14px;}
.led{display:flex;flex-direction:column;align-items:center;font-size:.6rem;
  color:#4a5a4f;letter-spacing:1px;}
.led span{width:12px;height:12px;border-radius:50%;background:#1a2620;
  border:1px solid #2a3a30;margin-bottom:3px;transition:.15s;}
.led.on span{background:var(--green);box-shadow:0 0 10px var(--green);}
.led[data-led="irq"].on span{background:var(--amber);box-shadow:0 0 10px var(--amber);}
.led[data-led="snd"].on span{background:#66d9ff;box-shadow:0 0 10px #66d9ff;}
.led.on{color:var(--green);}

/* Layout */
main{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-top:14px;}
@media(max-width:820px){main{grid-template-columns:1fr;}}

/* CRT */
.crt{position:relative;background:#000;border-radius:18px;padding:18px;
  border:3px solid #26312b;box-shadow:0 0 40px rgba(51,255,102,.08),
  0 8px 30px rgba(0,0,0,.6);overflow:hidden;}
#canvas{width:100%;height:auto;display:block;image-rendering:pixelated;
  image-rendering:crisp-edges;border-radius:6px;aspect-ratio:256/240;
  background:#000;}
.scanlines{position:absolute;inset:18px;pointer-events:none;border-radius:6px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0px,
  rgba(0,0,0,.28) 1px,transparent 2px,transparent 3px);}
.scanlines.off{display:none;}
.vignette{position:absolute;inset:0;pointer-events:none;border-radius:18px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.7);}

/* Cartridge slot */
.cart-slot{margin-top:12px;border:2px dashed #2f4136;border-radius:10px;
  padding:14px;cursor:pointer;background:var(--panel2);transition:.15s;}
.cart-slot:hover,.cart-slot.drag{border-color:var(--green);
  background:#111a14;box-shadow:0 0 18px rgba(51,255,102,.1) inset;}
.cart-inner{display:flex;align-items:center;gap:14px;}
.cart-icon{font-size:2rem;color:var(--green-dim);}
.cart-text{display:flex;flex-direction:column;gap:3px;}
.cart-text strong{letter-spacing:2px;color:var(--green);}
.cart-text span{font-size:.72rem;color:#7a8a80;word-break:break-all;}

/* Gamepad */
.gamepad{margin-top:12px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:12px;flex-wrap:wrap;}
.dpad{display:flex;flex-direction:column;align-items:center;}
.dpad-mid{display:flex;}
.btn-key{background:#1a2620;border:1px solid #2f4136;color:var(--green);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;margin:2px;user-select:none;cursor:pointer;font-size:.8rem;
  transition:.08s;}
.btn-key.press{background:var(--green);color:#000;box-shadow:0 0 12px var(--green);}
.dpad-center{background:transparent;border:none;cursor:default;}
.btn-key.round{border-radius:50%;width:44px;height:44px;background:#2a1a1a;
  border-color:#5a3030;color:var(--amber);}
.btn-key.round.press{background:var(--amber);color:#000;box-shadow:0 0 12px var(--amber);}
.btn-key.sm{width:auto;height:24px;padding:0 8px;font-size:.6rem;}
.startsel{display:flex;flex-direction:column;gap:4px;}
.ab{display:flex;gap:8px;}

/* Panels */
.panel-col{display:flex;flex-direction:column;gap:12px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:12px;box-shadow:0 0 20px rgba(0,0,0,.3);}
.card-title{font-size:.7rem;letter-spacing:2px;color:var(--green-dim);
  margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:5px;}

/* Transport */
.btn-row{display:flex;gap:6px;margin-bottom:6px;}
.rk{flex:1;background:linear-gradient(180deg,#1c2823,#141c17);
  border:1px solid #2f4136;color:var(--green);font-family:var(--mono);
  padding:8px 4px;border-radius:5px;cursor:pointer;font-size:.72rem;
  letter-spacing:1px;transition:.1s;box-shadow:0 2px 0 #0a0f0c;}
.rk:hover{background:#22322a;box-shadow:0 0 12px rgba(51,255,102,.2);}
.rk:active{transform:translateY(2px);box-shadow:0 0 0 #0a0f0c;}
.rk.hi{color:var(--amber);border-color:#5a4020;background:linear-gradient(180deg,#2a2213,#1a150c);}
.rk.hi:hover{box-shadow:0 0 12px rgba(255,179,71,.25);}
.rk.full{width:100%;flex:none;margin-top:6px;}
.rk.active{background:var(--red);color:#fff;border-color:var(--red);}
.speed{display:block;font-size:.7rem;color:var(--green-dim);margin:8px 0 4px;
  letter-spacing:1px;}
.speed span{color:var(--green);}
.speed input{width:100%;margin-top:4px;accent-color:var(--green);}
.stats{display:flex;gap:10px;font-size:.65rem;color:#7a8a80;margin-top:6px;
  flex-wrap:wrap;}
#state.running{color:var(--green);}
#state.stopped{color:var(--red);}
#state.paused{color:var(--amber);}

/* Registers */
.regs{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;}
.regs .r{background:#0d1310;border:1px solid var(--line);padding:3px 7px;
  border-radius:4px;}
.regs .r b{color:var(--amber);margin-right:3px;}
.flags{display:flex;gap:4px;margin-top:8px;}
.flag{width:22px;text-align:center;padding:3px 0;font-size:.7rem;
  border:1px solid var(--line);border-radius:4px;color:#4a5a4f;background:#0d1310;}
.flag.on{color:#000;background:var(--green);border-color:var(--green);
  box-shadow:0 0 8px rgba(51,255,102,.4);}

/* Disasm */
.disasm{font-size:.72rem;line-height:1.5;max-height:130px;overflow-y:auto;}
.disasm .cur{color:var(--amber);background:#1a1510;border-radius:3px;
  padding:0 4px;margin:0 -4px;}
.disasm .dim,.hexdump .dim,.dim{color:#4a5a4f;}

/* Hexdump */
.peek-row{display:flex;align-items:center;gap:2px;margin-bottom:6px;}
.peek-row span{color:var(--amber);}
#peekAddr{background:#0d1310;border:1px solid var(--line);color:var(--green);
  font-family:var(--mono);padding:4px 6px;width:70px;border-radius:4px;
  text-transform:uppercase;}
.hexdump{font-size:.72rem;line-height:1.5;letter-spacing:.5px;}
.hexdump div{white-space:nowrap;}

/* Meters */
.meters{display:flex;gap:10px;align-items:flex-end;height:60px;
  padding:4px;background:#0d1310;border-radius:5px;}
.meter{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;position:relative;}
.mbar{width:60%;background:linear-gradient(180deg,var(--green),var(--green-dim));
  border-radius:2px 2px 0 0;transition:height .08s;min-height:2px;}
.meter span{font-size:.55rem;color:#4a5a4f;margin-top:2px;}
.pit{display:flex;flex-wrap:wrap;gap:8px;font-size:.65rem;color:#7a8a80;
  margin-top:8px;}
.pit span{background:#0d1310;padding:2px 6px;border-radius:3px;
  border:1px solid var(--line);}

/* Footer */
footer{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;
  font-size:.7rem;color:#5a6a60;}
footer details summary{cursor:pointer;color:var(--green-dim);letter-spacing:1px;
  margin-bottom:8px;}
footer pre{background:var(--panel2);border:1px solid var(--line);padding:10px;
  border-radius:6px;font-size:.68rem;color:#7a8a80;overflow-x:auto;}
.footlinks{margin-top:8px;}
.footlinks a{color:var(--green);text-decoration:none;border-bottom:1px dotted var(--green);}
.footlinks a:hover{color:var(--amber);border-color:var(--amber);}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#0d1310;}
::-webkit-scrollbar-thumb{background:#2f4136;border-radius:4px;}