:root { --bg:#0f1115; --panel:#171a21; --edge:#272b35; --fg:#d6dae1; --dim:#8a91a0; --accent:#5aa0ff; --hl:#3a2f12; --hl2:#123; --ok:#57d18a; --err:#ff6b6b; --chg:#ffcf6b; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
header { padding:10px 16px; border-bottom:1px solid var(--edge); display:flex; align-items:center; gap:12px; }
header b { font-size:16px; } header span { color:var(--dim); font-size:12px; }
.beta { background:var(--accent); color:#0b0d12; font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; align-self:flex-start; margin-top:2px; }
.limits { margin-top:8px; padding-top:8px; border-top:1px solid var(--edge); font-size:11px; }
main { padding:12px; height:calc(100vh - 46px); }
.view { display:flex; gap:12px; height:100%; min-height:0; }
.view[hidden] { display:none; }
.col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.col.left { flex:0 0 40%; } .col.right { flex:1; }
#editwrap, #cmpeditwrap, #probeditwrap { flex:1; min-height:0; }
/* editor component: transparent textarea over a highlight <pre>, a gutter, a line bar.
   .ed-ta and .ed-hl MUST share font / line-height / padding so the overlay aligns. */
.ed { position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--edge); border-radius:6px; }
.ed-ta, .ed-hl { margin:0; border:0; font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:20px; tab-size:4; white-space:pre; padding:10px 10px 10px 46px; }
.ed-ta { position:absolute; inset:0; width:100%; height:100%; background:transparent; color:transparent; caret-color:var(--fg); resize:none; overflow:auto; z-index:2; }
.ed-ta::selection { background:#2b4a6b; }
.ed-hl { position:absolute; inset:0; overflow:hidden; color:var(--fg); pointer-events:none; z-index:1; }
.ed-hl code { font:inherit; white-space:inherit; }
.ed-gutter { position:absolute; top:0; left:0; width:46px; padding:10px 8px 10px 0; font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:20px; text-align:right; color:var(--dim); user-select:none; pointer-events:none; z-index:1; }
.ed-gutter div { height:20px; }
.ed-bar { position:absolute; left:0; right:0; height:20px; background:var(--hl); box-shadow:inset 3px 0 0 #6b5417; pointer-events:none; display:none; z-index:0; }
.t-com { color:#6b7686; font-style:italic; } .t-kw { color:#7ca9ff; } .t-ty { color:#4ec9b0; }
.t-str { color:#b5cea8; } .t-num { color:#d19a66; } .t-pre { color:#c586c0; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
input, select { background:var(--panel); color:var(--fg); border:1px solid var(--edge); border-radius:5px; padding:6px 8px; font-family:ui-monospace,monospace; }
input.fn { width:110px; } input.args { width:110px; }
button { background:var(--accent); color:#06101f; border:0; border-radius:5px; padding:7px 14px; font-weight:600; cursor:pointer; }
button.ghost { background:var(--panel); color:var(--fg); border:1px solid var(--edge); font-weight:500; padding:5px 10px; }
button.ghost.on { border-color:var(--accent); color:var(--accent); }
button:disabled { opacity:.5; cursor:default; }
.panel { background:var(--panel); border:1px solid var(--edge); border-radius:6px; padding:8px 10px; overflow:auto; }
.code { flex:1; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; white-space:pre; line-height:1.45; }
.code .ln { display:block; padding:0 8px; border-radius:3px; }
.code .ln.cur { background:var(--hl); outline:1px solid #6b5417; }
.code .num { color:var(--dim); display:inline-block; min-width:3.4em; text-align:right; margin-right:10px; user-select:none; }
.asm-fn { display:block; color:var(--accent); font-weight:600; margin:8px 0 2px; }
.asm-fn.lib { color:var(--dim); } /* library routines dimmed vs your code */
.asm-fn:first-child { margin-top:0; }
#panes { display:flex; gap:10px; flex:1; min-height:0; }
#panes .panel { flex:1; display:flex; flex-direction:column; min-width:0; }
h4 { margin:0 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--edge); margin-top:10px; overflow-x:auto; }
.tab { background:none; border:0; color:var(--dim); padding:6px 11px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; flex:0 0 auto; white-space:nowrap; }
.tab.on { color:var(--fg); border-bottom-color:var(--accent); }
.tabpanes { max-height:240px; overflow:auto; padding-top:8px; }
nav.modes { display:flex; gap:4px; margin-left:14px; }
.mode { background:none; border:0; color:var(--dim); padding:4px 12px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; }
.mode.on { background:var(--panel); color:var(--fg); }
.mode:disabled { opacity:.4; cursor:default; }
.popover { display:flex; flex-wrap:wrap; gap:8px 6px; align-items:center; background:var(--panel); border:1px solid var(--edge); border-radius:6px; padding:8px 10px; margin-top:4px; }
.popover[hidden] { display:none; }  /* attribute selector beats .popover so the hidden attribute actually hides */
.soon { color:var(--dim); padding:6px 2px; font-size:12.5px; }
table { border-collapse:collapse; width:100%; font-family:ui-monospace,monospace; font-size:12.5px; }
td { padding:1px 8px; }
td.k { color:var(--accent); } td.v { color:var(--fg); }
tr.chg td.v { color:var(--chg); }
.scrub { display:flex; align-items:center; gap:8px; }
.scrub input[type=range] { flex:1; }
.muted { color:var(--dim); } .ok { color:var(--ok); } .err { color:var(--err); white-space:pre-wrap; font-family:ui-monospace,monospace; }
.io div { font-family:ui-monospace,monospace; font-size:12.5px; }
.io .poke { color:var(--chg); } .io .peek { color:var(--accent); }
#mem .chg { color:var(--chg); font-weight:600; } #mem .z { color:#3a3f4a; }
.stats { margin-top:8px; padding-top:8px; border-top:1px solid var(--edge); font-size:12px; line-height:1.6; }
.stats b { color:var(--fg); }
.badge { margin-left:auto; background:var(--panel); border:1px solid var(--edge); color:var(--dim); border-radius:20px; padding:2px 11px; font-size:12px; font-family:ui-monospace,monospace; cursor:pointer; }
.badge:hover { color:var(--accent); border-color:var(--accent); }
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; align-items:center; justify-content:center; }
.modal-body { background:var(--panel); border:1px solid var(--edge); border-radius:8px; max-width:620px; max-height:76vh; overflow:auto; padding:18px 24px; position:relative; }
.modal-x { position:absolute; top:8px; right:12px; background:none; border:0; color:var(--dim); font-size:22px; cursor:pointer; }
.cl-ver { color:var(--accent); font-weight:600; margin:14px 0 4px; } .cl-li { margin:3px 0 3px 6px; }
/* comparison view — its own top-level tab (#view-compare) */
.cmp-head { font-size:14px; }
.cmp-a { color:var(--accent); font-weight:600; } .cmp-b { color:var(--chg); font-weight:600; }
.cmp-stats { width:auto; } .cmp-stats td { padding:1px 14px 1px 0; }
.cmp-win { color:var(--ok); } .cmp-lose { color:var(--err); }
.cmp-step { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:12px; }
.cmp-gap { width:10px; display:inline-block; }
.cmp-panes { display:flex; gap:10px; flex:1; min-height:0; }
.cmp-pane { flex:1; display:flex; flex-direction:column; min-width:0; }
.cmp-asm-pane { flex:1; min-height:0; overflow:auto; font-size:12px; }
.cmp-pane table { margin-top:8px; border-top:1px solid var(--edge); padding-top:6px; flex:0 0 auto; max-height:26vh; overflow:auto; display:block; }

/* ── Problems ─────────────────────────────────────────────────── */
.lang-toggle { display:inline-flex; gap:4px; margin-left:auto; }
.lang-toggle button { padding:4px 10px; font-size:12px; }
.prob-statement { flex:1 1 auto; min-height:0; overflow:auto; }   /* fills its own description column */
.prob-statement .prob-prose { margin:4px 0; line-height:1.5; }
.prob-statement .prob-prose.lead { color:var(--fg); }
.prob-statement .sig { font-size:12px; margin-top:3px; }
.prob-statement code, .metrics b, .sample code, .fail-note code, .fail-note b { color:var(--fg); }
.prob-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.prob-head h4 { margin:0; }
.tags { display:inline-flex; gap:5px; flex-wrap:wrap; }
.tag { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:1px 8px; border-radius:10px; background:var(--edge); color:var(--dim); }
.tag.diff-easy { background:#14351f; color:var(--ok); }
.tag.diff-medium { background:#3a2f10; color:var(--chg); }
.tag.diff-hard { background:#3a1717; color:var(--err); }
.prob-sub { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin:11px 0 4px; }
.prob-ex { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; padding:4px 9px; border-left:2px solid var(--edge); margin-bottom:4px; }
.prob-ex .ex-note { font-size:11.5px; margin-top:3px; }
.prob-cons { margin:2px 0 4px; padding-left:20px; }
.prob-cons li { margin:2px 0; color:var(--dim); font-size:12.5px; }
/* --- Problems library (browse + filter) --- */
#view-problems { display:block; }
#view-problems[hidden] { display:none; }
#prob-solve { display:flex; gap:12px; height:100%; min-height:0; }
#prob-solve[hidden] { display:none; }
.prob-desc-col { flex:0 0 36%; }
.prob-work-col { flex:1; min-width:0; }
.prob-tabs { display:flex; align-items:center; gap:6px; }
.prob-tabs .lang-toggle { margin-left:auto; }
.prob-tabs .asm-note { margin-left:4px; font-size:11.5px; }
.ptab { font-family:inherit; padding:5px 13px; font-size:12.5px; background:transparent; border:1px solid var(--edge); border-radius:6px; color:var(--dim); cursor:pointer; }
.ptab.on { background:var(--panel); color:var(--fg); border-color:var(--accent); }
.ptab:disabled { opacity:.45; cursor:default; }
.prob-panes { flex:1 1 auto; min-height:0; display:flex; margin-top:8px; }
.prob-panes > [data-pane] { flex:1 1 auto; min-width:0; min-height:0; }
#probeditwrap[hidden], #prob-asm-pane[hidden] { display:none; }
#prob-asm-pane { display:flex; flex-direction:column; gap:8px; }
#prob-debug { flex:0 0 auto; }
.prob-actions { flex:0 0 auto; margin-top:10px; }
.prob-work-col #prob-result { flex:0 0 auto; max-height:34vh; overflow:auto; margin-top:10px; }
#prob-library { display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; }
#prob-library[hidden] { display:none; }
.lib-bar { display:flex; align-items:center; gap:12px; }
.lib-search { flex:1; max-width:360px; padding:7px 12px; background:var(--panel); border:1px solid var(--edge); border-radius:8px; color:var(--fg); font-size:13px; }
.lib-search:focus { outline:none; border-color:var(--accent); }
.lib-count { font-size:12px; }
.lib-filters { display:flex; flex-direction:column; gap:6px; }
.lib-chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-family:inherit; padding:3px 11px; font-size:12px; border-radius:14px; border:1px solid var(--edge); background:transparent; color:var(--dim); cursor:pointer; text-transform:capitalize; }
.chip:hover { color:var(--fg); border-color:var(--dim); }
.chip.on { background:var(--accent); border-color:var(--accent); color:#0b1020; font-weight:600; }
.chip.diff-easy.on { background:var(--ok); border-color:var(--ok); }
.chip.diff-medium.on { background:var(--chg); border-color:var(--chg); }
.chip.diff-hard.on { background:var(--err); border-color:var(--err); }
.lib-list { display:flex; flex-direction:column; overflow:auto; border:1px solid var(--edge); border-radius:10px; background:var(--panel); }
.lib-row { font-family:inherit; text-align:left; display:flex; align-items:center; gap:14px; padding:11px 16px; background:transparent; border:none; border-bottom:1px solid var(--edge); cursor:pointer; color:var(--fg); width:100%; }
.lib-row:last-child { border-bottom:none; }
.lib-row:hover { background:var(--edge); }
.lib-row-diff { flex:0 0 72px; }
.lib-row-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lib-row-title { font-weight:600; font-size:14px; }
.lib-row-blurb { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-row-topics { flex:0 0 auto; }
.lib-row-go { flex:0 0 auto; font-size:18px; }
#lib-empty { padding:24px 4px; }
.verdict { font-weight:700; font-size:15px; margin-bottom:8px; }
.verdict.good { color:var(--ok); } .verdict.bad { color:var(--err); }
.metrics { display:flex; gap:16px; margin-bottom:10px; color:var(--dim); }
.sample-hd { font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin:8px 0 3px; }
.sample { font-family:ui-monospace,monospace; font-size:12.5px; padding:4px 8px; border-left:2px solid var(--edge); margin-bottom:3px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sample.good { border-left-color:var(--ok); } .sample.bad { border-left-color:var(--err); }
.fail-note { margin-top:8px; font-size:13px; }
.prob-diag { margin-top:6px; font-size:12px; max-height:180px; overflow:auto; }
.pd-btn { padding:1px 8px; font-size:11px; vertical-align:middle; }
#prob-debug table { width:100%; font-family:ui-monospace,monospace; font-size:12.5px; margin-top:8px; }
#prob-debug td { padding:1px 12px 1px 0; }
#prob-asm { flex:1 1 auto; min-height:0; overflow:auto; font-size:12px; background:var(--panel); border:1px solid var(--edge); border-radius:6px; padding:6px 10px; }
table.cases { border-collapse:collapse; font-family:ui-monospace,monospace; font-size:12px; margin:2px 0 4px; }
table.cases th { color:var(--dim); font-weight:normal; text-transform:uppercase; font-size:10px; letter-spacing:.04em; text-align:right; padding:1px 10px 3px; }
table.cases td { text-align:right; padding:2px 10px; color:var(--dim); }
table.cases th.l, table.cases td.l { text-align:left; }
table.cases td.l { color:var(--fg); }
table.cases td.cv.good { color:var(--ok); } table.cases td.cv.bad { color:var(--err); }
table.cases tr.bad td.l { color:var(--err); }
table.cases tr.tot td { border-top:1px solid var(--edge); color:var(--fg); padding-top:4px; }
table.cases tr.tot td.l { color:var(--dim); }