:root {
    color-scheme: dark;
    --bg: #010008;
    --panel: #0a0826;
    --screen: #000010;
    --elevated: #161244;
    --text: #33ffcc;
    --white: #eef2ff;
    --accent: #ffb000;
    --border: #2a2566;
    --glow: rgba(51, 255, 204, .35);
    --error: #ff3366;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
    margin: 0;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    font: 12px/1.5 'JetBrains Mono', 'Courier New', Courier, monospace;
    letter-spacing: .02em;
    color: var(--text);
    background: var(--bg);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, .32) 50%);
    background-size: 100% 4px;
    opacity: .85;
    pointer-events: none;
    z-index: 999;
}
h1, h2, p { margin: 0 0 .75rem; }
h1 { font-size: 1.05rem; color: var(--white); letter-spacing: .06em; text-shadow: 0 0 6px rgba(255, 255, 255, .4); }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
h2::before { content: "// "; }
a { color: var(--text); text-underline-offset: .2em; }
header, nav, .choices, .actions, form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
header { justify-content: space-between; border-bottom: 1px solid var(--border); padding: .5rem .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand > div { display: flex; align-items: baseline; gap: 1rem; min-width: 0; white-space: nowrap; }
.brand h1 { margin: 0; }
.brand p { margin: 0; color: var(--accent); font-size: .72rem; text-transform: uppercase; }
.brand-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; background: #000; border: 2px solid var(--text); box-shadow: 0 0 10px var(--glow); }
.brand-icon svg { width: 22px; height: 22px; fill: var(--text); }
.system-menu { position: relative; flex-shrink: 0; }
.system-menu > summary { list-style: none; padding: 0; }
.system-menu > summary::-webkit-details-marker { display: none; }
.system-menu[open] > summary, .system-menu > summary:hover { background: var(--elevated); }
.system-menu nav {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 210px;
    border: 2px solid var(--text);
    background: var(--screen);
    box-shadow: 0 8px 24px #000, 0 0 12px var(--glow);
}
.menu-title { padding: .4rem .75rem; color: var(--accent); background: var(--panel); font-size: .7rem; }
.system-menu a, .system-menu nav button { padding: .6rem .75rem; border: 0; border-top: 1px solid var(--border); text-decoration: none; text-transform: uppercase; font-size: .75rem; text-align: left; font-weight: 400; letter-spacing: inherit; }
.system-menu a:hover, .system-menu nav button:hover { color: #000; background: var(--text); }
form { margin: .75rem 0; }
[hidden] { display: none !important; }
.ide-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr) 310px; min-height: 0; }
.explorer, .ai-panel { min-width: 0; min-height: 0; background: var(--panel); padding: .65rem; overflow: auto; }
.explorer { border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: .65rem; overflow: hidden; }
.explorer-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.explorer-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem; flex-shrink: 0; padding-bottom: .4rem; }
.explorer-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.explorer-actions button { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: .2rem; flex: 0 0 auto; }
.explorer-actions svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.explorer-tree { display: block; overflow: auto; flex: 1; min-height: 0; }
#project-tree > ul { list-style: none; margin: 0; padding: 0; }
#project-tree .project-select { width: 100%; min-width: 0; text-align: left; border: 0; text-transform: none; white-space: nowrap; }
#project-tree summary.project-select { padding: .4rem; cursor: pointer; }
#project-tree summary.project-select:hover { background: var(--elevated); }
#project-tree .project-select[aria-current="true"] { color: var(--accent); background: var(--elevated); }
.explorer-tree summary { display: flex; align-items: center; min-width: 0; list-style: none; cursor: pointer; padding: .3rem .2rem; white-space: nowrap; }
.explorer-tree summary > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-tree summary::-webkit-details-marker { display: none; }
.explorer-tree summary::before { content: ">"; display: inline-block; flex: 0 0 1em; width: 1em; color: var(--text); }
.explorer-tree details[open] > summary::before { transform: rotate(90deg); }
.explorer-tree details > ul, .explorer-tree details > #files { border-left: 1px solid var(--border); margin-left: .5rem; }
.explorer-tree summary:hover { background: var(--elevated); }
.explorer h2 { margin: 0; font-size: .72rem; overflow-wrap: anywhere; }
#agent-dialog { width: min(850px, calc(100vw - 2rem)); max-height: 85dvh; overflow: auto; color: var(--text); background: var(--panel); border: 2px solid var(--text); padding: 1rem; }
#agent-dialog::backdrop { background: rgba(0, 0, 0, .8); }
#history-items details { padding: .6rem; border-bottom: 1px solid var(--border); }
#history-items summary { overflow-wrap: anywhere; }
#history-items pre { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.dialog-toolbar h2 { margin: 0; }
.project-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.project-row[data-removed="true"] > button:first-child { opacity: .5; }
#pane-projects-status { font-size: .7rem; color: var(--accent); }
#pane-projects-status[data-error="true"] { color: var(--error); }
.projects-list button { text-align: left; overflow-wrap: anywhere; }
.project-manager { display: flex; flex-direction: column; gap: .75rem; overflow: hidden; }
.project-manager-toolbar { display: flex; }
.project-manager-toolbar form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.project-manager-toolbar form input { width: min(220px, 35vw); }
.project-manager-content { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr); gap: .75rem; flex: 1; min-height: 0; overflow: hidden; }
.project-manager-content h2 { margin: 0; font-size: .8rem; }
.projects-list { display: grid; align-content: start; gap: .3rem; overflow: auto; min-height: 0; border: 1px solid var(--border); padding: .5rem; background: var(--screen); }
.projects-list button { width: 100%; text-align: left; overflow-wrap: anywhere; }
.projects-list button[data-removed="true"] { opacity: .65; }
.project-details { min-width: 0; overflow: auto; border: 1px solid var(--border); padding: .65rem; background: var(--panel); }
.project-details h2 { overflow-wrap: anywhere; }
.project-details > h3 { margin: 0; color: var(--text); font-size: .8rem; overflow-wrap: anywhere; }
#pane-project-metadata { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .6rem; font-size: .72rem; }
#pane-project-metadata dt { color: var(--accent); }
#pane-project-metadata dd { margin: 0; overflow-wrap: anywhere; }
#pane-project-rename { align-items: flex-end; gap: .4rem; }
#pane-project-rename label { flex: 1; min-width: 0; }
#pane-project-rename input { flex: 1; min-width: 0; }
#pane-project-git { display: grid; gap: .4rem; border-top: 1px solid var(--border); padding-top: .5rem; }
#pane-project-git > label { justify-content: space-between; }
#pane-project-git select { flex: 1; min-width: 0; }
#pane-project-git-status { margin: 0; color: var(--accent); font-size: .7rem; overflow-wrap: anywhere; }
#pane-project-git-status[data-error="true"] { color: var(--error); }
#pane-project-settings { display: grid; gap: .5rem; }
#pane-project-settings > label { justify-content: space-between; }
#pane-project-settings > label input { flex: 1; }
#pane-project-settings .actions { gap: .35rem; }
.workbench { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
#player-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex-shrink: 0; gap: .35rem; padding-bottom: .5rem; }
#player-actions > button { width: 100%; min-width: 0; min-height: 2.5rem; padding: .5rem .25rem; white-space: nowrap; }
#player-actions .player-mute { display: grid; place-items: center; }
#player-mute svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workbench-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; background: var(--panel); border-bottom: 1px solid var(--border); padding: .3rem .5rem; }
#build-actions { gap: .4rem; }
.build-action-button { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; padding: .4rem; }
.build-action-button svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.view-tabs { display: flex; flex: 1 1 0; min-width: 0; gap: .25rem; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tab-wrapper { display: inline-flex; flex: 0 0 auto; align-items: stretch; position: relative; }
.tab-wrapper button[role="tab"] { border-color: transparent; border-bottom: 2px solid transparent; padding-right: .5rem; }
.tab-wrapper button[role="tab"][aria-selected="true"] { color: var(--white); border-bottom-color: var(--text); background: var(--screen); }
.tab-close-btn { background: transparent; border: 0; color: var(--text); opacity: .6; font-size: .85rem; line-height: 1; padding: 0 .4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tab-close-btn:hover { opacity: 1; color: var(--error); background: var(--elevated); }
.tab-wrapper[hidden] { display: none !important; }
.center-pane { min-height: 0; min-width: 0; overflow: auto; padding: .65rem; }
.history-pane { display: flex; flex-direction: column; gap: .6rem; }
#history-status { margin: 0; color: var(--accent); font-size: .7rem; }
#history-items { min-height: 0; flex: 1; overflow: auto; border: 1px solid var(--border); background: var(--screen); }
.logs-pane { display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
.logs-actions { justify-content: flex-end; }
.logs-actions label { font-size: .7rem; }
.logs-actions select { padding: .25rem .4rem; font: inherit; color: inherit; background: var(--screen); border: 1px solid var(--border); border-radius: 0; }
.logs-pane #logs-status { margin: 0; color: var(--accent); font-size: .7rem; }
.logs-pane #logs-output { min-height: 0; max-height: none; flex: 1; margin: 0; border: 1px solid var(--border); }
.source-panel { display: flex; flex-direction: column; gap: .5rem; }
.editor-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.editor-toolbar form { margin: 0; flex: 1; }
.editor-toolbar label { flex: 1; flex-wrap: nowrap; }
.editor-toolbar input { width: 100%; }
.file-autocomplete { position: relative; flex: 1; min-width: 0; }
#file-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 240px; overflow: auto; border: 1px solid var(--text); background: var(--panel); }
#file-suggestions button { display: block; width: 100%; text-align: left; text-transform: none; overflow-wrap: anywhere; border: 0; }
#file-suggestions button[aria-selected="true"] { background: var(--elevated); color: var(--accent); }
.editor-toolbar .actions { gap: .3rem; }
.output-panel { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--panel); }
.output-panel h2 { margin: 0; padding: .4rem .65rem; font-size: .7rem; }
.output-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-shrink: 0; }
.output-heading h2 { margin: 0; }
.output-heading button { margin: .25rem; padding: .25rem .5rem; font-size: .7rem; }
.rom-manager { display: flex; flex-direction: column; gap: .65rem; overflow: hidden; }
.rom-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.rom-toolbar input[type="search"] { flex: 1; min-width: 120px; }
.rom-toolbar > button, .rom-toolbar form > button { border-color: transparent; box-shadow: none; }
.rom-toolbar > button:hover:not(:disabled), .rom-toolbar form > button:hover:not(:disabled) { border-color: transparent; box-shadow: none; }
.toolbar-icon-button { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; padding: .45rem; }
.toolbar-icon-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#rom-upload-dialog { width: min(600px, calc(100vw - 2rem)); max-height: 80dvh; overflow: auto; color: var(--text); background: var(--panel); border: 2px solid var(--text); padding: 1rem; }
#rom-upload-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.confirm-dialog { width: min(440px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; color: var(--text); background: var(--panel); border: 2px solid var(--text); padding: 1rem; }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.confirm-dialog h2 { margin: 0 0 .6rem; }
.confirm-dialog p { margin: 0 0 1rem; overflow-wrap: anywhere; }
.confirm-dialog .actions { justify-content: flex-end; }
.danger-button { color: var(--error); border-color: var(--error); }
.danger-button:hover:not(:disabled) { color: var(--white); border-color: var(--error); background: var(--error); }
.danger-icon-button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: .45rem; color: var(--error); border-color: var(--error); }
.danger-icon-button:hover:not(:disabled) { color: var(--white); border-color: var(--error); background: var(--error); }
.danger-icon-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#rom-upload-files { list-style: none; padding: .5rem; max-height: 35dvh; overflow: auto; border: 1px solid var(--border); background: var(--screen); }
#rom-upload-files li { padding: .3rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); font-size: .75rem; }
#rom-upload-summary { margin: .75rem 0; color: var(--accent); font-size: .75rem; }
.rom-manager-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; flex: 1; min-height: 0; }
#rom-manager-list { display: block; overflow: auto; min-height: 0; border: 1px solid var(--border); background: var(--screen); }
#rom-manager-list ul { list-style: none; margin: 0; padding-left: .75rem; }
#rom-manager-list > ul { padding: .25rem; }
#rom-manager-list details > ul { border-left: 1px solid var(--border); margin-left: .35rem; }
#rom-manager-list summary { padding: .25rem .2rem; color: var(--accent); cursor: pointer; overflow-wrap: anywhere; }
#rom-manager-list summary::-webkit-details-marker { display: none; }
#rom-manager-list summary::before { content: ">"; display: inline-block; width: 1em; }
#rom-manager-list details[open] > summary::before { transform: rotate(90deg); }
#rom-manager-list button { display: block; width: 100%; padding: .35rem .4rem; text-align: left; text-transform: none; overflow-wrap: anywhere; border-color: transparent; }
#rom-manager-list button[aria-pressed="true"] { background: var(--elevated); border-left-color: var(--text); }
.rom-details { overflow: auto; min-width: 0; padding: .6rem; border: 1px solid var(--border); }
.rom-details h2, .rom-details dd { overflow-wrap: anywhere; }
.rom-details dt { color: var(--accent); font-size: .7rem; margin-top: .5rem; }
.rom-details dd { margin: 0; font-size: .75rem; }
.rom-details .actions .rom-download-button { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .65rem; border: 1px solid var(--border); color: var(--text); background: var(--screen); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.rom-details .actions .rom-download-button:hover { border-color: var(--text); color: var(--text); background: var(--elevated); box-shadow: 0 0 8px var(--glow); }
.rom-download-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#rom-manager-status { margin: 0; font-size: .7rem; color: var(--accent); flex-shrink: 0; }
@media (max-width: 850px) { .rom-manager-content { grid-template-columns: minmax(0, 1fr); overflow: auto; } }
#build-log { margin: 0; border: 0; border-top: 1px solid var(--border); flex: 1; min-height: 0; max-height: none; user-select: text; -webkit-user-select: text; }
#files { display: block; overflow: auto; flex: 1; min-height: 0; padding: 0; }

#files ul { list-style: none; padding-left: .7rem; margin: .25rem 0; }
#files button { text-align: left; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; border-color: transparent; }
#files button[aria-current="true"] { background: var(--elevated); border-left-color: var(--text); color: var(--white); }
#files summary { color: var(--accent); overflow-wrap: anywhere; }
button, input, textarea {
    font: inherit;
    color: var(--text);
    background: var(--screen);
    border: 1px solid var(--border);
    padding: .5rem .65rem;
    border-radius: 0;
    max-width: 100%;
}
button { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
button, summary { cursor: pointer; }
button:hover:not(:disabled), button[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--elevated); box-shadow: 0 0 8px var(--glow); }
#player-run[aria-pressed="true"]:not(:hover) { border-color: var(--border); background: var(--screen); box-shadow: none; }
button:disabled { opacity: .45; cursor: default; }
#ai-start { border-color: var(--text); box-shadow: 0 0 6px var(--glow); }
#ai-stop:not(:disabled) { color: var(--error); border-color: var(--error); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
input { min-width: 0; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--text); }
fieldset { display: flex; flex-wrap: wrap; gap: .5rem; border: 1px solid var(--border); width: 100%; margin: 0; min-width: 0; }
legend { color: var(--accent); text-transform: uppercase; font-size: .72rem; padding: 0 .35rem; }
fieldset label { padding: .35rem; }
fieldset label:has(input:checked) { color: var(--text); background: var(--elevated); box-shadow: inset 0 -1px var(--text); }
textarea { display: block; width: 100%; resize: vertical; tab-size: 4; }
#editor { display: block; flex: 1; min-height: 0; overflow: hidden; color: var(--white); font-size: 13px; border: 1px solid var(--border); }
#editor .cm-editor { height: 100%; }
#editor .cm-scroller { font-family: inherit; }
#instructions { height: 100px; min-height: 60px; max-height: 25vh; }
.ai-panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.ai-panel h2 { margin-bottom: .4rem; }
#ai-form { display: block; margin: .4rem 0; }
#ai-form > * { margin: .5rem 0; }
.ai-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; width: 100%; }
.ai-actions button { width: 100%; min-width: 0; }
#ai-form .feedback-option { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; font-size: .7rem; cursor: pointer; }
.feedback-option input { appearance: none; flex: 0 0 16px; display: grid; place-content: center; margin: 0; padding: 0; width: 16px; height: 16px; background: var(--screen); border: 1px solid var(--text); cursor: pointer; }
.feedback-option input:checked::before { content: ""; width: 8px; height: 8px; background: var(--text); box-shadow: 0 0 4px var(--glow); }
.feedback-option span { min-width: 0; }
#ai-output { flex: 1; min-height: 60px; margin: .4rem 0; max-height: none; }
#agent-model { color: var(--accent); font-size: .7rem; margin: .35rem 0 0; overflow-wrap: anywhere; text-align: left; text-transform: none; }
#agent-dialog .choices { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; }
#agent-error { color: var(--error); }
#agent-model:empty { display: none; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; padding: .75rem; background: var(--screen); border: 1px solid var(--border); font-family: inherit; }
#play-panel { display: flex; flex-direction: column; }
iframe { display: block; width: 100%; flex: 1; min-height: 0; border: 1px solid var(--border); background: var(--screen); }
footer { display: flex; align-items: center; gap: .75rem; padding: .25rem .75rem; border-top: 1px solid var(--border); background: var(--elevated); min-width: 0; }
.status-label { color: var(--accent); white-space: nowrap; font-size: .65rem; }
#dev-status { margin: 0; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#computer-version { margin-left: auto; font-size: .65rem; white-space: nowrap; color: var(--accent); }
#status-clock { font-size: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#dev-status[data-error="true"] { color: var(--error); white-space: normal; max-height: 4.5em; overflow: auto; }
#file-status { color: var(--accent); font-size: .7rem; margin: 0; overflow-wrap: anywhere; }
#file-status:empty { display: none; }
.config-setup-pane { display: flex; flex-direction: column; gap: .65rem; overflow: hidden; }
.setup-tabs { display: flex; flex-wrap: wrap; gap: .25rem; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.setup-tabs [role="tab"][aria-selected="true"] { color: var(--white); border-bottom-color: var(--text); background: var(--screen); }
.setup-panel { flex: 1 1 auto; min-height: 0; overflow: auto; }
#setup-panel-ai { display: flex; overflow: hidden; }
.config-setup-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--bg); }
.toolchain-manager { display: flex; flex-direction: column; gap: .75rem; overflow: hidden; }
.toolchain-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.toolchain-toolbar button { font-size: .75rem; padding: .35rem .6rem; }
#toolchain-status { font-size: .7rem; color: var(--accent); }
.toolchain-content { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 0; overflow: auto; }
.toolchain-content h2 { margin: 0; font-size: .8rem; }
.toolchain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .5rem; flex-shrink: 0; }
.toolchain-card { border: 1px solid var(--border); padding: .65rem; background: var(--screen); display: flex; flex-direction: column; gap: .35rem; }
.toolchain-card[data-installed="true"] { border-left: 3px solid var(--accent); }
.toolchain-card[data-installed="false"] { border-left: 3px solid var(--error); }
.toolchain-card-header { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.toolchain-card-header strong { font-size: .75rem; }
.toolchain-badge { font-size: .65rem; padding: .15rem .35rem; text-transform: uppercase; letter-spacing: .05em; }
.badge-ok { background: var(--elevated); color: var(--accent); border: 1px solid var(--accent); }
.badge-missing { background: var(--error); color: #000; font-weight: bold; }
.toolchain-desc { font-size: .7rem; margin: 0; opacity: .85; }
.toolchain-path { font-size: .65rem; color: var(--accent); word-break: break-all; background: var(--panel); padding: .25rem .4rem; border: 1px solid var(--border); }
.toolchain-install-btn { align-self: flex-start; font-size: .7rem; padding: .3rem .55rem; margin-top: .2rem; }
.toolchain-output { min-height: 8rem; max-height: 16rem; font-size: .65rem; margin: 0; flex-shrink: 0; }
@media (max-width: 1150px) {
    .ide-shell { grid-template-columns: 180px minmax(0, 1fr) 260px; }
    .brand p { display: none; }
    h1 { font-size: .85rem; }
}
@media (max-width: 850px) {
    body { height: auto; min-height: 100dvh; overflow: auto; }
    .ide-shell { grid-template-columns: 165px minmax(0, 1fr); }
    .workbench { height: 80dvh; min-height: 560px; }
    .explorer { max-height: 80dvh; }
    .project-manager-content { grid-template-columns: minmax(0, 1fr); overflow: auto; }
    .projects-list { max-height: 30vh; }
    .project-details { min-height: 320px; }
    .ai-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); max-height: 600px; }
    #ai-output { min-height: 100px; max-height: 240px; }
}
@media (max-width: 650px) {
    body {
        height: auto;
        min-height: 100dvh;
        grid-template-rows: auto 1fr auto;
        overflow-x: hidden;
        overflow-y: auto;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    header { padding: .5rem; }
    .brand { gap: .5rem; }
    .brand-icon { width: 44px; height: 44px; }
    .brand h1 { font-size: .8rem; }
    .system-menu a, .system-menu nav button { min-height: 44px; }
    .system-menu nav { max-width: calc(100vw - 1rem); }
    .ide-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-width: 0; }
    .explorer { height: clamp(10rem, 30dvh, 16rem); max-height: none; padding: .5rem; border-right: 0; border-bottom: 1px solid var(--border); }
    #files { min-height: 0; }
    .explorer-tree summary { min-height: 44px; display: flex; align-items: center; }
    .workbench { height: clamp(28rem, 72dvh, 42rem); min-height: 0; }
    .workbench-toolbar { align-items: stretch; padding: .35rem; }
    .view-tabs { flex: 1 1 100%; }
    .tab-wrapper button[role="tab"] { min-height: 44px; padding: .45rem .55rem; font-size: .68rem; }
    .tab-close-btn { min-width: 44px; }
    #build-actions { flex: 1 1 100%; justify-content: flex-end; }
    .build-action-button, .toolbar-icon-button, .explorer-actions button { min-width: 44px; min-height: 44px; }
    .center-pane { padding: .5rem; }
    #player-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
    #player-actions > button { min-height: 44px; padding: .35rem .1rem; font-size: .62rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
    .ai-panel { grid-column: auto; max-height: none; padding: .6rem .5rem; border-left: 0; border-top: 1px solid var(--border); }
    #ai-output { flex: 0 1 220px; min-height: 100px; max-height: 220px; }
    #instructions { height: 120px; min-height: 90px; max-height: 30dvh; }
    input, select, textarea { font-size: 16px; }
    button, input, select, textarea { min-height: 44px; }
    button { min-width: 44px; }
    input:not([type="checkbox"]):not([type="radio"]) { min-width: 44px; }
    .center-pane summary { min-height: 44px; display: flex; align-items: center; }
    fieldset label { min-height: 44px; padding: .5rem; }
    .rom-manager-content, .project-manager-content { grid-template-columns: minmax(0, 1fr); overflow: auto; }
    .projects-list { max-height: 25dvh; }
    .project-details { min-height: 0; }
    #rom-manager-list { max-height: 35dvh; }
    #rom-manager-list summary { min-height: 44px; display: flex; align-items: center; }
    .rom-details .actions a { display: inline-flex; min-height: 44px; align-items: center; }
    #rom-upload-dialog, #agent-dialog { width: calc(100vw - 2rem); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem); padding: .75rem; }
    .toolchain-grid { grid-template-columns: minmax(0, 1fr); }
    .logs-actions { justify-content: flex-start; }
    footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; padding: .5rem; }
    .status-label, #status-clock { display: none; }
    #dev-status { min-width: 0; font-size: .68rem; }
    #computer-version { margin-left: 0; text-align: right; }
}