:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #0a0a18; color: #d7d7e8;
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px;
}
header.top { padding: 10px 16px 0; max-width: 1280px; margin: 0 auto; }
header.top h1 { font-size: 18px; margin: 0 0 2px; color: #fff; }
header.top p { margin: 0 0 8px; color: #8f8fb0; font-size: 12px; }
main.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px 40px; }
.emu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.col-main { min-width: 0; }
.col-side { min-width: 0; }
.col-side .toolbar { flex-direction: column; align-items: stretch; margin: 0 0 10px; }
.col-side .toolbar button { text-align: left; }
.col-side .toolbar .sep { height: 6px; }
@media (max-width: 900px) {
  .emu-layout { grid-template-columns: 1fr; }
  .col-side .toolbar { flex-direction: row; }
  .col-side .toolbar button { text-align: center; }
}
.stage { position: relative; }
canvas.screen {
  width: 100%; aspect-ratio: 16 / 10; display: block;
  background: #000; border: 1px solid #33335a; border-radius: 6px;
}
#emuKeys:focus { outline: 2px solid #5555ff; outline-offset: 2px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; align-items: center; }
.toolbar button, .panel button, .tabs button {
  background: #1c1c38; color: #d7d7e8; border: 1px solid #44447a;
  border-radius: 4px; padding: 5px 10px; font: inherit; cursor: pointer;
}
.toolbar button:hover, .panel button:hover, .tabs button:hover { background: #2a2a55; }
.toolbar button.on { background: #0a4d1e; border-color: #2fae5f; }
.toolbar .sep { width: 10px; }
.status { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #9a9ac0; margin: 4px 0 10px; }
.status b { color: #e0e0ff; }
dialog.panel, .panelbox {
  background: #141428; border: 1px solid #44447a; border-radius: 8px;
  padding: 12px 14px; margin: 10px 0; color: #d7d7e8;
}
.panelbox h3 { margin: 0 0 8px; font-size: 14px; color: #fff; }
.panelbox label { display: block; margin: 6px 0; }
.panelbox input[type=text], .panelbox input[type=number], .panelbox select, .panelbox textarea {
  background: #0a0a18; color: #e0e0ff; border: 1px solid #44447a;
  border-radius: 4px; padding: 5px 8px; font: inherit;
}
.panelbox textarea { width: 100%; min-height: 180px; white-space: pre; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.err { color: #ff8080; margin-top: 6px; white-space: pre-wrap; }
.ok { color: #80ff9e; margin-top: 6px; white-space: pre-wrap; }
.reggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 8px 0; }
table.bp { border-collapse: collapse; margin: 6px 0; }
table.bp td, table.bp th { border: 1px solid #44447a; padding: 2px 10px; }
.tabs { display: flex; gap: 6px; margin: 14px 0 0; }
.tabs button.sel { background: #2a2a55; border-color: #7777ff; }
footer.help { margin-top: 18px; font-size: 12px; color: #8f8fb0; }
footer.help code { color: #c9c9f2; background: #1a1a30; padding: 0 4px; border-radius: 3px; }
#blazor-error-ui {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: #5a1010; color: #fff; padding: 8px; text-align: center;
}