/* SPDX-License-Identifier: MIT */

:root {
    color-scheme: dark;
    --background: #0b0e12;
    --panel: #11161d;
    --panel-raised: #161d25;
    --line: #26313d;
    --line-strong: #394756;
    --text: #e7edf3;
    --muted: #8d9aa7;
    --accent: #70d6b4;
    --accent-strong: #9bf0d3;
    --warning: #e2ba6b;
    --danger: #f08b86;
    --console-face: #c8c4b8;
    --console-highlight: #e8e3d6;
    --console-shadow: #77776f;
    --console-ink: #222b31;
    --key-face: #273038;
    --key-edge: #0b1014;
    --key-action: #315f86;
    --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--background);
    color: var(--text);
}

* { box-sizing: border-box; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 50% -15%, rgb(91 119 125 / 28%), transparent 42rem),
        linear-gradient(90deg, rgb(112 214 180 / 3%) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(rgb(112 214 180 / 3%) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--background);
}

button, input, select { font: inherit; }

button {
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.35rem;
    color: var(--text);
    background: var(--panel-raised);
    cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.38; }
button.primary { color: #07120e; border-color: var(--accent); background: var(--accent); font-weight: 700; }
button.primary:hover:not(:disabled) { background: var(--accent-strong); }

input, select {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    color: var(--text);
    background: #090d12;
}

label > span { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mono-input { font-family: var(--mono); }

.app-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem max(1.25rem, calc((100vw - 1440px) / 2));
    border-bottom: 1px solid var(--line);
    background: rgb(11 14 18 / 88%);
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 2.4vw, 2.4rem); letter-spacing: -0.04em; }
h2 { margin-bottom: 0; font-size: 1rem; letter-spacing: 0.01em; }
h3 { margin: 0; font-size: 0.92rem; }
.eyebrow, .section-index { margin-bottom: 0.45rem; color: var(--accent); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }

.status {
    max-width: min(42rem, 55vw);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.76rem;
    text-align: right;
}
.status[data-tone="ready"] { color: var(--accent); border-color: rgb(112 214 180 / 45%); }
.status[data-tone="running"] { color: var(--warning); border-color: rgb(226 186 107 / 45%); }
.status[data-tone="error"] { color: var(--danger); border-color: rgb(240 139 134 / 45%); }
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}
.language-toggle {
    min-width: 5.25rem;
    white-space: nowrap;
}

main { width: min(1440px, calc(100% - 2.5rem)); margin: 1.25rem auto 3rem; }
.panel { border: 1px solid var(--line); border-radius: 0.55rem; background: rgb(17 22 29 / 96%); box-shadow: 0 18px 55px rgb(0 0 0 / 18%); }
.machine-console {
    position: relative;
    padding: clamp(0.8rem, 2vw, 1.45rem);
    overflow: hidden;
    border: 1px solid var(--console-highlight);
    border-bottom-color: #65665f;
    border-radius: 1.2rem;
    color: var(--console-ink);
    background:
        linear-gradient(115deg, rgb(255 255 255 / 34%), transparent 24%),
        linear-gradient(180deg, #d8d3c6 0%, var(--console-face) 48%, #aaa79e 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 72%),
        inset 0 -4px 8px rgb(52 56 57 / 25%),
        0 28px 80px rgb(0 0 0 / 38%);
}
.machine-console::after {
    position: absolute;
    inset: 0.42rem;
    z-index: 0;
    border: 1px solid rgb(50 57 60 / 22%);
    border-radius: 0.92rem;
    content: "";
    pointer-events: none;
}
.machine-console > * { position: relative; z-index: 1; }
.machine-console-heading {
    display: flex;
    justify-content: flex-end;
    min-height: 2.25rem;
    padding: 0.05rem 0.25rem 0.65rem;
}
.machine-console-tools {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.machine-layout-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.18rem;
    padding: 0.18rem;
    border: 1px solid rgb(34 43 49 / 30%);
    border-radius: 0.4rem;
    background: rgb(55 63 66 / 12%);
}
.machine-layout-switch button {
    min-height: 1.8rem;
    padding: 0.3rem 0.58rem;
    border-color: transparent;
    color: #465155;
    background: transparent;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.machine-layout-switch button[aria-pressed="true"] {
    border-color: #33444b;
    color: #f1f4ef;
    background: #35444a;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}
.machine-console .lcd-panel-card {
    margin-bottom: 0;
    border-color: #566168;
    border-radius: 0.68rem;
    background: linear-gradient(180deg, #343e44, #252e34);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 10%),
        0 5px 14px rgb(32 36 37 / 24%);
}
.machine-console .lcd-panel-card h2 { color: var(--text); }
.machine-console .lcd-panel-card .section-index { color: var(--accent-strong); }
.load-panel { padding: 1.25rem; }
.panel-heading, .panel-title-row { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.panel-heading > p { max-width: 34rem; margin: 0; color: var(--muted); font-size: 0.83rem; line-height: 1.55; }
.loader-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; margin-top: 1.25rem; }
.loader-card { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 0.4rem; background: #0c1117; }
.loader-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.loader-card > p { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.application-load-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0.65rem; margin-top: 0.9rem; }
.rom-load-grid { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; align-items: end; gap: 0.65rem; margin-top: 0.9rem; }
.rom-load-actions, .rom-run-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.rom-run-actions { margin-top: 0.55rem; }
.file-field input { padding: 0.43rem; color: var(--muted); font-size: 0.78rem; }
.file-field input::file-selector-button { margin-right: 0.65rem; border: 0; border-radius: 0.2rem; padding: 0.38rem 0.55rem; color: #07120e; background: var(--accent); }
.privacy-note { padding-left: 0.65rem; border-left: 2px solid var(--accent); }
.configuration { margin-top: 0.85rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.configuration summary { color: var(--accent-strong); cursor: pointer; font-size: 0.78rem; font-weight: 650; }
.configuration > p { margin: 0.65rem 0; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.configuration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.configuration-grid fieldset { min-width: 0; margin: 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: 0.35rem; }
.configuration-grid legend { padding: 0 0.3rem; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.configuration-grid label + label, .configuration-grid label + .paired-fields, .configuration-grid .paired-fields + label { margin-top: 0.55rem; }
.check-field { display: flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.76rem; }
.check-field input { width: 1rem; min-height: 1rem; margin: 0; accent-color: var(--accent); }
.check-field > span { display: inline; margin: 0; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.paired-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }

.debugger-menu { margin-top: 1rem; border: 1px solid var(--line); border-radius: 0.55rem; background: rgb(17 22 29 / 96%); }
.debugger-menu > summary { padding: 0.9rem 1rem; color: var(--accent-strong); cursor: pointer; font-family: var(--mono); font-size: 0.76rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.debugger-menu[open] > summary { border-bottom: 1px solid var(--line); }
.debugger-menu-body { padding: 0 1rem 1rem; }
.control-strip { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 1rem 0; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.55rem; background: rgb(17 22 29 / 96%); }
.compact-field { width: 11rem; }
.compact-field:first-of-type { margin-left: auto; }
.control-boundary { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.45; }

.workspace { display: grid; grid-template-columns: 0.8fr 1.35fr 1fr; gap: 1rem; }
.workspace > .panel, .lcd-panel-card { min-width: 0; padding: 1rem; }
.registers-panel { grid-column: span 1; }
.current-panel { grid-column: span 1; }
.memory-panel { grid-column: span 1; }
.history-panel, .trace-panel { grid-column: span 3; }
.lcd-panel-card { grid-column: 1 / -1; margin-bottom: 1rem; }
.panel-caveat { max-width: 58rem; margin: 0.7rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; }
/* Host LCD appearance: reflective surface with dark, separate dots. */
.lcd-panel-card { container-type: inline-size; --lcd-surface: #bbbfaf; --lcd-ink: #4d554d; --lcd-off-ink: #b1b5a8; }
.lcd-display-frame {
    --lcd-legend-width: clamp(2rem, 8cqw, 6.5rem);
    --lcd-marker-width: clamp(0.75rem, 3cqw, 2.4rem);
    --lcd-rim: clamp(0.3rem, 1.2cqw, 0.85rem);
    display: grid;
    grid-template-columns: calc(var(--lcd-legend-width) + var(--lcd-marker-width)) minmax(0, 1fr) calc(var(--lcd-legend-width) + var(--lcd-marker-width));
    align-items: stretch;
    padding: calc(var(--lcd-rim) + 1.5em) var(--lcd-rim) var(--lcd-rim);
    border: 1px solid #303434;
    border-radius: 0.45rem;
    background: #555b5e;
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 28%);
    font-family: Arial, sans-serif;
    font-size: clamp(0.4rem, 1.65cqw, 1.1rem);
}
.lcd-matrix-well { display: flex; align-items: center; min-width: 0; padding: var(--lcd-rim) 0; background: var(--lcd-surface); }
.lcd-canvas { display: block; width: 100%; height: auto; background: var(--lcd-surface); image-rendering: auto; }
.lcd-indicator-rail { position: relative; display: grid; min-width: 0; min-height: 0; padding: var(--lcd-rim) 0; }
.lcd-indicator-rail::before { position: absolute; top: 0; bottom: 0; width: var(--lcd-marker-width); background: var(--lcd-surface); content: ""; }
.lcd-page-rail::before { right: 0; border-radius: var(--lcd-rim) 0 0 var(--lcd-rim); }
.lcd-mode-rail::before { left: 0; border-radius: 0 var(--lcd-rim) var(--lcd-rim) 0; }
.lcd-rail-title { position: absolute; right: var(--lcd-marker-width); bottom: 100%; margin: 0; padding: 0 0.6em 0.2em 0; color: #e0e0d3; font-size: 1.05em; letter-spacing: 0.07em; }
.lcd-indicator-list { position: relative; display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.lcd-indicator-list li { position: relative; display: grid; grid-template-columns: var(--lcd-legend-width) var(--lcd-marker-width); align-items: center; min-width: 0; min-height: 0; color: #e0e0d3; line-height: 1; }
.lcd-indicator-label { grid-column: 1; grid-row: 1; padding-right: 0.6em; text-align: right; white-space: nowrap; }
.lcd-indicator-mark { grid-column: 2; grid-row: 1; justify-self: center; width: 50%; height: auto; max-height: 65%; fill: var(--lcd-off-ink); }
.lcd-mode-rail li { grid-template-columns: var(--lcd-marker-width) var(--lcd-legend-width); }
.lcd-mode-rail .lcd-indicator-label { grid-column: 2; padding: 0 0 0 0.6em; text-align: left; }
.lcd-mode-rail .lcd-indicator-mark { grid-column: 1; transform: rotate(180deg); }
.lcd-mode-rail li:nth-child(6)::after, .lcd-mode-rail li:nth-child(8)::after { position: absolute; top: 0; right: 0; left: calc(var(--lcd-marker-width) + 0.6em); border-top: 1px solid #b4b7af; content: ""; }
.lcd-battery-position .lcd-indicator-label { font-size: 0.82em; }
.lcd-battery-position::before { position: absolute; bottom: 0; right: 0; left: calc(var(--lcd-marker-width) + 0.6em); border-bottom: 1px solid #b4b7af; content: ""; }
.lcd-indicator-list li[data-request="set"] .lcd-indicator-mark { fill: var(--lcd-ink); }
.lcd-battery-position .lcd-indicator-mark { fill: var(--lcd-ink); }
.lcd-indicator-list li[data-request="unknown"]:not(.lcd-battery-position) .lcd-indicator-mark { fill: none; stroke: var(--lcd-ink); stroke-width: 0.7; stroke-dasharray: 2 2; opacity: 0.4; }
.lcd-appearance { margin-top: 0.75rem; border-top: 1px solid rgb(213 222 206 / 18%); }
.lcd-appearance summary { padding: 0.7rem 0 0.15rem; color: #d2dacd; font-size: 0.78rem; cursor: pointer; }
.lcd-appearance summary:focus-visible { outline: 2px solid #c5d0b9; outline-offset: 3px; }
.lcd-appearance-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.6rem; padding: 1rem 0 0.35rem; }
.lcd-appearance-controls label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 0.5rem; }
.lcd-appearance-controls label > span { margin: 0; color: #d2dacd; font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
.lcd-appearance-controls output { color: #a9b6a3; font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.lcd-appearance-controls input[type="range"] { grid-column: 1 / -1; min-height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 0; accent-color: #bbc9ae; background: transparent; cursor: ew-resize; }
.lcd-appearance-reset { display: flex; align-items: center; justify-content: flex-end; }
.lcd-appearance-reset button { font-size: 0.75rem; border-color: #6b7a6f; color: #d2dacd; background: #35433d; }
.lcd-appearance-note { margin: 0.55rem 0 0; color: #acb8a7; font-size: 0.72rem; }
@media (max-width: 540px) {
    .lcd-appearance-controls { grid-template-columns: 1fr; gap: 0.55rem; }
    .lcd-appearance-reset { justify-content: flex-start; }
}

.virtual-keyboard-card {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid rgb(44 51 55 / 34%);
    border-radius: 0.65rem;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 20%), transparent 28%),
        rgb(193 190 181 / 72%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
}
.virtual-top-controls {
    display: grid;
    grid-template-columns: minmax(15rem, 0.85fr) minmax(20rem, 1.15fr);
    gap: 0.55rem;
    margin-top: 0.55rem;
}
.virtual-system-strip,
.virtual-function-strip {
    padding: 0.55rem;
    border: 1px solid rgb(44 51 55 / 26%);
    border-radius: 0.48rem;
    background: rgb(60 67 69 / 13%);
}
.virtual-system-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 0.32rem;
}
.virtual-power-cluster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: span 2;
    align-content: start;
    gap: 0.32rem;
    min-width: 0;
}
.virtual-power-cluster p {
    grid-column: 1 / -1;
    margin: 0;
    color: #4f5a5d;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}
.virtual-power-key {
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.35rem;
    border-color: #1d405b;
    color: #edf4f8;
    background: linear-gradient(145deg, #477da7, var(--key-action) 64%);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 800;
    opacity: 1;
}
.virtual-power-key-on {
    border-style: double;
    border-width: 3px;
}
.virtual-speaker-gap {
    grid-column: span 2;
    min-height: 2.7rem;
}
.virtual-function-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(2.6rem, 1fr));
    gap: 0.32rem;
    margin-top: 0;
}
.virtual-keyboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(15.8rem, 0.95fr);
    align-items: stretch;
    gap: 0.78rem;
    margin-top: 0.7rem;
}
.virtual-main-keyboard-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.virtual-reset-row {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: 3.2rem;
    padding: 0.35rem 0.7rem;
}
.virtual-reset-pin {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 1.65rem;
    padding: 0.2rem 0.35rem;
    border: 0;
    color: #4f5a5d;
    background: transparent;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.virtual-reset-pin:hover:not(:disabled) { color: #23373b; }
.virtual-reset-hole {
    width: 0.68rem;
    height: 0.68rem;
    margin-left: 0.38rem;
    border: 1px solid #536064;
    border-radius: 50%;
    background: #1b2427;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 65%);
}
.virtual-main-keyboard-scroll {
    min-width: 0;
    overflow-x: auto;
    scrollbar-color: #707874 transparent;
}
.virtual-main-keyboard {
    min-width: 39rem;
    padding: 0.58rem;
    border: 1px solid rgb(44 51 55 / 26%);
    border-radius: 0.5rem;
    background: rgb(60 67 69 / 13%);
}
.virtual-key-row { display: flex; gap: 0.32rem; }
.virtual-key-row + .virtual-key-row { margin-top: 0.32rem; }
.virtual-key-row-offset { padding-left: 1.35rem; }
.virtual-side-keyboard {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.58rem;
    border: 1px solid rgb(44 51 55 / 26%);
    border-radius: 0.5rem;
    background: rgb(60 67 69 / 13%);
}
.virtual-navigation, .virtual-keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.32rem; }
.virtual-key {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 3.15rem;
    padding: 0.34rem 0.24rem;
    touch-action: none;
    border: 1px solid #11181c;
    border-bottom-width: 3px;
    border-radius: 0.38rem;
    color: #f1f4ef;
    background: linear-gradient(145deg, #3a444b, var(--key-face) 62%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 14%),
        0 2px 2px rgb(29 32 33 / 35%);
    font-family: var(--mono);
    font-size: clamp(0.66rem, 1vw, 0.82rem);
    font-weight: 700;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}
.virtual-key-wide { flex-grow: 1.48; }
.virtual-key-space { flex-grow: 2.35; }
.virtual-key-glyph {
    display: block;
    width: 0.9rem;
    height: 1.2rem;
    max-width: 100%;
    fill: currentColor;
    shape-rendering: crispEdges;
}
.virtual-key-return { flex-grow: 1.75; }
.virtual-key-action, .virtual-key-shift {
    border-color: #16334b;
    background: linear-gradient(145deg, #477da7, var(--key-action) 64%);
}
.virtual-key-light {
    border-color: #c6c8c4;
    color: var(--key-face);
    background: linear-gradient(145deg, #fff, #e9ebe7 68%);
}
.virtual-key[data-legend-size="compact"] {
    font-size: clamp(0.48rem, 0.78vw, 0.64rem);
    letter-spacing: -0.02em;
}
.virtual-key-menu {
    grid-column: 5;
    min-height: 2.7rem;
}
.virtual-function-strip .virtual-key { min-height: 2.7rem; }
.virtual-key:hover:not(:disabled) {
    border-color: #16334b;
    transform: translateY(-1px);
}
.virtual-key:active:not(:disabled),
.virtual-key[data-pressed="true"] {
    transform: translateY(2px);
    border-bottom-width: 1px;
    color: #10231e;
    background: var(--accent);
    box-shadow: inset 0 2px 3px rgb(7 18 14 / 25%);
}
.virtual-key:focus-visible { outline-color: #0d5e4c; outline-offset: 2px; }
.virtual-key:disabled { opacity: 1; }
.machine-console[data-layout="device"] {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(18rem, 0.92fr);
    align-items: start;
    gap: 0.72rem;
}
.machine-console[data-layout="device"] .machine-console-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 0;
}
.machine-console[data-layout="device"] .lcd-panel-card {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
}
.machine-console[data-layout="device"] .virtual-keyboard-card {
    display: contents;
}
.machine-console[data-layout="device"] .virtual-top-controls {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.55rem;
    height: 100%;
    margin-top: 0;
    padding: 0.58rem;
    border: 1px solid rgb(44 51 55 / 26%);
    border-radius: 0.5rem;
    background: rgb(60 67 69 / 13%);
}
.machine-console[data-layout="device"] .virtual-system-strip,
.machine-console[data-layout="device"] .virtual-function-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.machine-console[data-layout="device"] .virtual-keyboard-layout {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
}

.chip { padding: 0.27rem 0.48rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: 0.68rem; }
.register-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin: 1.2rem 0; }
.register-grid > div { padding: 0.65rem; border: 1px solid var(--line); border-radius: 0.35rem; background: #0c1117; }
.register-grid dt { color: var(--muted); font-size: 0.68rem; }
.register-grid dd { margin: 0.2rem 0 0; color: var(--accent-strong); font-family: var(--mono); font-size: 1.15rem; }
.cycle-row { display: flex; justify-content: space-between; padding-top: 0.8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; }
.cycle-row strong { color: var(--text); font-family: var(--mono); }
.watch-section { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.watch-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; }
.watch-scroll { max-height: 14rem; margin-top: 0.7rem; }
.watch-label-cell { max-width: 18rem; overflow-wrap: anywhere; white-space: normal; }
.watch-remove { min-height: 2rem; padding: 0.3rem 0.5rem; font-size: 0.68rem; }

.instruction { min-height: 2rem; margin: 1.3rem 0 0.3rem; color: var(--accent-strong); font-family: var(--mono); font-size: clamp(1.2rem, 2vw, 1.65rem); }
.source-location { min-height: 1.2rem; margin-bottom: 1.3rem; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }
.point-grid { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.6fr) auto auto; gap: 0.5rem; align-items: end; }
.point-grid .point-wide { grid-column: span 2; }
.point-grid .condition-wide { grid-column: span 4; }
.keyboard-response { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.subheading { margin-bottom: 0.65rem; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.keyboard-response-grid { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 0.5rem; }
.keyboard-summary { margin: 0.65rem 0 0; color: var(--muted); font-family: var(--mono); font-size: 0.7rem; }

.memory-controls { display: grid; grid-template-columns: 1fr 0.6fr; gap: 0.55rem; margin: 1.1rem 0 0.7rem; }
.memory-view { min-height: 8rem; margin: 0; padding: 0.8rem; overflow: auto; border: 1px solid var(--line); border-radius: 0.35rem; color: #c8d4df; background: #090d12; font-family: var(--mono); font-size: 0.72rem; line-height: 1.65; }

.table-scroll { margin-top: 1rem; overflow: auto; border: 1px solid var(--line); border-radius: 0.35rem; }
.trace-controls { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; align-items: end; gap: 0.55rem; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; }
th, td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left; }
th { position: sticky; top: 0; color: var(--muted); background: #0e1319; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgb(112 214 180 / 4%); }
td.empty { height: 4rem; color: var(--muted); text-align: center; }

@media (max-width: 980px) {
    .loader-grid { grid-template-columns: 1fr; }
    .machine-console[data-layout="device"] { display: block; }
    .machine-console[data-layout="device"] .virtual-keyboard-card {
        display: block;
        margin-top: 0.75rem;
    }
    .virtual-keyboard-layout { grid-template-columns: 1fr; }
    .virtual-side-keyboard { grid-template-columns: minmax(12rem, 0.8fr) minmax(15rem, 1fr); grid-template-rows: auto; }
    .workspace { grid-template-columns: 1fr 1fr; }
    .registers-panel, .current-panel, .memory-panel { grid-column: span 1; }
    .memory-panel { grid-column: span 2; }
    .history-panel, .trace-panel { grid-column: span 2; }
}

@media (max-width: 660px) {
    .app-header { align-items: start; flex-direction: column; padding: 1.5rem 1.25rem; }
    .status { max-width: 100%; text-align: left; }
    .header-actions { width: 100%; justify-content: space-between; }
    main { width: min(100% - 1.25rem, 1440px); }
    .machine-console { padding: 0.58rem; border-radius: 0.8rem; }
    .machine-console-heading { padding-right: 0.05rem; }
    .virtual-top-controls { grid-template-columns: 1fr; }
    .virtual-side-keyboard { grid-template-columns: 1fr; }
    .panel-heading { flex-direction: column; gap: 0.65rem; }
    .panel-heading > p { max-width: none; }
    .application-load-grid, .rom-load-grid, .configuration-grid, .workspace { grid-template-columns: 1fr; }
    .registers-panel, .current-panel, .memory-panel, .history-panel, .trace-panel { grid-column: span 1; }
    .compact-field, .compact-field:first-of-type { width: 100%; margin-left: 0; }
    .point-grid { grid-template-columns: 1fr 1fr; }
    .point-grid label { grid-column: span 2; }
    .point-grid .condition-wide { grid-column: span 2; }
    .keyboard-response-grid { grid-template-columns: 1fr 1fr; }
    .keyboard-response-grid .check-field { align-self: center; }
    .watch-controls { grid-template-columns: 1fr; }
    .trace-controls { grid-template-columns: 1fr 1fr; }
    .trace-controls label:nth-child(3), .trace-controls button { grid-column: span 2; }
}
.program-saves {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #566067);
}
.program-saves ul {
    list-style: none;
    padding: 0;
}
.program-saves li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.program-saves li span {
    flex: 1 1 15rem;
    overflow-wrap: anywhere;
}