:root { --bg:#f6f4ee; --fg:#1d1d1b; --muted:#666; --line:#d8d4c8; --accent:#1f5f8b; --accent2:#9b2c2c; --ok:#2f7d32; --warn:#b26a00; --panel:#fffdf7; --hover:#efe9db; --sel:#dfe9f2; --btn:#fff; --editor:#fff; --note-bg:#fff7e0; --note-line:#efd9a0; --badge:#e8e4d8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1b1a17; --fg:#e8e4da; --muted:#a39d90; --line:#3a3732; --accent:#7fb3dc; --accent2:#e08a8a; --ok:#7fc982; --warn:#e2b04a; --panel:#22211d; --hover:#2d2b26; --sel:#2b3a46; --btn:#2a2824; --editor:#161512; --note-bg:#2b2616; --note-line:#5a4a1e; --badge:#33312b; color-scheme: dark; } }
:root[data-theme="dark"] { --bg:#1b1a17; --fg:#e8e4da; --muted:#a39d90; --line:#3a3732; --accent:#7fb3dc; --accent2:#e08a8a; --ok:#7fc982; --warn:#e2b04a; --panel:#22211d; --hover:#2d2b26; --sel:#2b3a46; --btn:#2a2824; --editor:#161512; --note-bg:#2b2616; --note-line:#5a4a1e; --badge:#33312b; color-scheme: dark; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; font-size: .93em; }
header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
header h1 { margin:0; font-size:22px; }
header .tagline { margin:2px 0 0; color:var(--muted); font-size:13px; max-width:900px; }
header nav { display:flex; flex-direction:column; align-items:flex-end; gap:4px; white-space:nowrap; }
.stats { font-size:12px; color:var(--muted); }
button { font: inherit; cursor:pointer; border:1px solid var(--line); background:var(--btn); color:var(--fg); border-radius:6px; padding:5px 10px; }
button:hover { border-color:#aaa; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.link { border:none; background:none; color:var(--accent); padding:4px 6px; text-decoration:underline; }
button:disabled { opacity:.45; cursor:default; }
:root { --side-w: 300px; --emu-w: 640px; }
#layout { display:grid; grid-template-columns: var(--side-w) 6px minmax(0,1fr); height: calc(100% - 70px); }
#layout.with-emu { grid-template-columns: var(--side-w) 6px minmax(0,1fr) 6px var(--emu-w); }
.gutter { background: var(--line); cursor: col-resize; position: relative; }
.gutter:hover, .gutter.active { background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }
#sidebar { border-right:1px solid var(--line); overflow:auto; background:var(--panel); display:flex; flex-direction:column; }
#filter { margin:8px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; }
#tree { overflow:auto; flex:1; font-size:13px; }
#tree details { border-top:1px solid var(--line); }
#tree summary { cursor:pointer; padding:6px 10px; font-weight:600; list-style:none; display:flex; justify-content:space-between; }
#tree summary::-webkit-details-marker { display:none; }
#tree summary .n { color:var(--muted); font-weight:400; }
#tree .f { display:flex; gap:6px; align-items:baseline; padding:2px 10px 2px 18px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tree .f:hover { background:var(--hover); }
#tree .f.sel { background:var(--sel); }
#tree .f .nm { font-family: ui-monospace, Consolas, monospace; }
#tree .f .d { color:var(--muted); overflow:hidden; text-overflow:ellipsis; font-size:12px; }
#tree .f .dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; background:#ccc; }
#tree .f .dot.run { background:var(--ok); } #tree .f .dot.src { background:#b9b2a0; } #tree .f .dot.fail { background:var(--warn); } #tree .f .dot.virus { background:var(--accent2); }
#main { overflow:auto; padding:14px 18px; }
#welcome { max-width: 860px; }
#welcome .credit { border-left:4px solid var(--accent2); padding-left:10px; }
#file-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:flex-start; }
#file-name { margin:0; font-size:20px; font-family: ui-monospace, Consolas, monospace; display:inline; } #btn-copy-link { font-size:12px; vertical-align:middle; }
.meta { color:var(--muted); font-size:13px; } .desc { margin-top:4px; }
#badges { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; max-width:100%; }
.badge { font-size:12px; padding:2px 8px; border-radius:10px; background:var(--badge); white-space:nowrap; }
.badge.ok { color:var(--ok); } .badge.warn { color:var(--warn); } .badge.bad { color:var(--accent2); } .badge.info { color:var(--accent); }
.build-info { margin:8px 0; padding:8px 10px; background:var(--note-bg); border:1px solid var(--note-line); border-radius:6px; font-size:13px; }
.build-info pre { margin:4px 0 0; white-space:pre-wrap; font-size:12px; }
#toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; font-size:13px; }
#toolbar label { display:flex; gap:4px; align-items:center; color:var(--muted); }
#toolbar input[type=text], #toolbar select, #filter { font:inherit; padding:3px 5px; border:1px solid var(--line); border-radius:4px; background:var(--btn); color:var(--fg); }
#editor-wrap { border:1px solid var(--line); background:var(--editor); }
.CodeMirror { background:var(--editor); color:var(--fg); } .CodeMirror-gutters { background:var(--panel); border-color:var(--line); } .CodeMirror-linenumber { color:var(--muted); } .CodeMirror-cursor { border-left-color: var(--fg); }
.CodeMirror { height: calc(100vh - 290px); min-height: 300px; font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; font-size:13px; line-height:1.35; }
#docview { margin:0; padding:10px 12px; background:var(--editor); color:var(--fg); max-height: calc(100vh - 230px); overflow:auto; font-family: "DejaVu Sans Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; font-size:13px; line-height:1.25; white-space:pre; }
.cm-asm-comment { color:var(--muted); font-style:italic; } .cm-asm-dir { color:#a05ab8; } .cm-asm-mn { color:var(--accent); font-weight:600; } .cm-asm-reg { color:var(--accent2); } .cm-asm-num { color:var(--ok); } .cm-asm-str { color:var(--warn); } .cm-asm-label { color:var(--fg); font-weight:600; }
#emu-panel { border-left:1px solid var(--line); background:#111; color:#ddd; display:flex; flex-direction:column; min-width:0; }
#emu-bar { display:flex; gap:10px; align-items:center; padding:6px 10px; background:#222; font-size:13px; }
#emu-bar #emu-title { font-weight:600; } #emu-bar #emu-status { color:#aaa; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#emu-bar button { padding:3px 8px; font-size:12px; }
#dos { width:100%; height:560px; background:#000; position:relative; }
#dos iframe { display:block; }
#emu-panel .hint { font-size:12px; color:#999; padding:6px 10px; margin:0; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-body { background:var(--panel); color:var(--fg); max-width:820px; max-height:90vh; overflow:auto; padding:22px 28px; border-radius:10px; position:relative; }
.modal .close { position:absolute; right:10px; top:8px; font-size:20px; border:none; background:none; }
.modal h2 { margin-top:0; }
table.stats { border-collapse:collapse; font-size:14px; } table.stats td { padding:2px 10px 2px 0; }
@media (max-width: 1100px) { #layout.with-emu { grid-template-columns: var(--side-w) 6px minmax(0,1fr); } #gut2 { display:none !important; } #emu-panel { grid-column: 1 / -1; border-left:none; border-top:1px solid var(--line); } #dos { height: 480px; } }
@media (max-width: 760px) { #layout, #layout.with-emu { grid-template-columns: 1fr; height:auto; } .gutter { display:none !important; } #sidebar { max-height: 40vh; } header { flex-direction:column; align-items:flex-start; } header nav { align-items:flex-start; } .CodeMirror { height: 60vh; } }