@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JBMono"; src: url(vendor/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JBMono"; src: url(vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JBMono"; src: url(vendor/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --bg: #f3f4f7;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --sunken: #eceef2;
  --line: #dde1e8;
  --line-strong: #c7cdd8;
  --text: #1b2130;
  --muted: #5d6677;
  --faint: #8a93a3;
  --accent: #3355d1;
  --accent-soft: #e4e9fb;
  --on-accent: #ffffff;
  --easy: #1f8a52;
  --med: #b0730c;
  --hard: #c6383a;
  --solved: #1f8a52;
  --solved-soft: #dcf2e5;
  --attempted: #c48410;
  --attempted-soft: #f8ecd2;
  --todo-cell: #e3e6ec;
  --danger-soft: #fbe3e3;
  --code-bg: #f4f5f8;
  --shadow: 0 6px 24px rgba(23, 31, 54, .14);
  --cm-kw: #7b3fc4; --cm-def: #2b55c9; --cm-str: #1c7a4a; --cm-num: #b2530f; --cm-com: #8a93a3; --cm-builtin: #0d7c8c; --cm-var2: #9b3f6c; --cm-op: #5d6677;
  --cm-sel: #d6defa; --cm-active: #f3f5fb; --cm-cursor: #1b2130; --cm-gutter: #a3abb9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181f; --panel: #1b2029; --panel-2: #1f2530; --sunken: #11151b; --line: #2a313d; --line-strong: #3a4250;
    --text: #e2e6ee; --muted: #9aa3b2; --faint: #6c7586; --accent: #7aa2ff; --accent-soft: #232f4d; --on-accent: #0f1626;
    --easy: #5cc08a; --med: #e0b35c; --hard: #ef6f6c; --solved: #5cc08a; --solved-soft: #1d3428; --attempted: #e0b35c; --attempted-soft: #3a3020;
    --todo-cell: #262d38; --danger-soft: #3b2224; --code-bg: #161b23; --shadow: 0 8px 30px rgba(0,0,0,.45);
    --cm-kw: #c79bff; --cm-def: #82aaff; --cm-str: #9ad59a; --cm-num: #f2a66a; --cm-com: #6c7586; --cm-builtin: #6fd3e0; --cm-var2: #f5a3c7; --cm-op: #9aa3b2;
    --cm-sel: #2c3a5e; --cm-active: #1f2633; --cm-cursor: #e2e6ee; --cm-gutter: #4b5464;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14181f; --panel: #1b2029; --panel-2: #1f2530; --sunken: #11151b; --line: #2a313d; --line-strong: #3a4250;
  --text: #e2e6ee; --muted: #9aa3b2; --faint: #6c7586; --accent: #7aa2ff; --accent-soft: #232f4d; --on-accent: #0f1626;
  --easy: #5cc08a; --med: #e0b35c; --hard: #ef6f6c; --solved: #5cc08a; --solved-soft: #1d3428; --attempted: #e0b35c; --attempted-soft: #3a3020;
  --todo-cell: #262d38; --danger-soft: #3b2224; --code-bg: #161b23; --shadow: 0 8px 30px rgba(0,0,0,.45);
  --cm-kw: #c79bff; --cm-def: #82aaff; --cm-str: #9ad59a; --cm-num: #f2a66a; --cm-com: #6c7586; --cm-builtin: #6fd3e0; --cm-var2: #f5a3c7; --cm-op: #9aa3b2;
  --cm-sel: #2c3a5e; --cm-active: #1f2633; --cm-cursor: #e2e6ee; --cm-gutter: #4b5464;
  color-scheme: dark;
}

:root[data-theme="beige"] {
  --bg: #efe9dc; --panel: #f8f4ea; --panel-2: #f3eee2; --sunken: #e8e0cf; --line: #ddd3bf; --line-strong: #cbbea3;
  --text: #2e2a23; --muted: #6b6253; --faint: #978c77; --accent: #3d5a8c; --accent-soft: #e2e2df; --on-accent: #fbf8f1;
  --easy: #3c7a46; --med: #9c650f; --hard: #ab3f36; --solved: #3c7a46; --solved-soft: #dfe6cf; --attempted: #a8720f; --attempted-soft: #efe0c0;
  --todo-cell: #e2d9c6; --danger-soft: #f2dcd5; --code-bg: #f1ebdd; --shadow: 0 6px 24px rgba(60, 48, 25, .16);
  --cm-kw: #7a3f8f; --cm-def: #2f5596; --cm-str: #4a7a2c; --cm-num: #a5521b; --cm-com: #978c77; --cm-builtin: #2a7473; --cm-var2: #8c3f5c; --cm-op: #6b6253;
  --cm-sel: #e4dac3; --cm-active: #f2ecdf; --cm-cursor: #2e2a23; --cm-gutter: #b3a78f;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
code, pre, kbd, textarea, .mono, .CodeMirror, .valbox { font-family: "JBMono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-ligatures: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1; }

/* ---------- top bar ---------- */
.topbar {
  height: 48px; flex: none; display: flex; align-items: center; gap: 20px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; letter-spacing: -.01em; }
.brand-mark { display: grid; grid-template-columns: 7px 7px; gap: 2px; }
.brand-mark i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.brand-mark i:nth-child(1) { background: var(--solved); }
.brand-mark i:nth-child(4) { background: var(--attempted); }
.topnav { display: flex; gap: 2px; }
.topnav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 500; }
.topnav a:hover { color: var(--text); background: var(--panel-2); }
.topnav a.on { color: var(--text); background: var(--sunken); }
.top-progress { flex: 1; display: flex; gap: 18px; justify-content: flex-end; overflow: hidden; }
.tp-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; background: none; border: 0; padding: 2px 0; }
.tp-item:hover { color: var(--text); }
.tp-item b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-bar { width: 64px; height: 5px; border-radius: 3px; background: var(--todo-cell); overflow: hidden; }
.tp-bar span { display: block; height: 100%; background: var(--solved); border-radius: 3px; }
.top-actions { display: flex; gap: 4px; flex: none; }
.icon-btn { background: none; border: 1px solid transparent; color: var(--muted); border-radius: 6px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--text); background: var(--panel-2); border-color: var(--line); }

/* ---------- buttons & inputs ---------- */
.btn {
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--text);
  border-radius: 7px; padding: 6px 14px; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.btn:hover { border-color: var(--faint); }
a.btn { text-decoration: none; display: inline-block; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 3px 10px; font-size: 12px; font-weight: 500; }
select, input[type=search], input[type=text], textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; outline: none;
}
select:focus, input:focus, textarea:focus { border-color: var(--accent); }
.sm-select { padding: 2px 6px; font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: var(--panel-2); padding: 4px 9px; font-size: 12px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.toggle { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }

/* ---------- views ---------- */
main { flex: 1; min-height: 0; display: flex; }
.view { flex: 1; min-width: 0; min-height: 0; }

/* ---------- workspace ---------- */
.workspace { display: flex; }
.sidebar {
  width: 300px; flex: none; display: flex; flex-direction: column; background: var(--panel);
  border-right: 1px solid var(--line); min-height: 0;
}
.side-head { padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.side-head > select, .search input { width: 100%; }
.filters { display: flex; gap: 6px; align-items: center; }
.filters select { flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px; }
.side-actions { display: flex; gap: 6px; }
.plist { overflow-y: auto; flex: 1; padding-bottom: 20px; }
.pcat { position: sticky; top: 0; z-index: 1; background: var(--panel); display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 5px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.pcat .caret { transition: transform .15s; font-size: 9px; }
.pcat.collapsed .caret { transform: rotate(-90deg); }
.pcat .pc-count { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--faint); }
.pcat .pc-bar { width: 38px; height: 4px; background: var(--todo-cell); border-radius: 2px; overflow: hidden; }
.pcat .pc-bar span { display: block; height: 100%; background: var(--solved); }
.prow {
  display: grid; grid-template-columns: 16px 1fr auto 16px; gap: 8px; align-items: center;
  padding: 5px 12px 5px 14px; cursor: pointer; text-decoration: none; color: var(--text); font-size: 13px;
  border-left: 2px solid transparent;
}
.prow:hover { background: var(--panel-2); }
.prow.on { background: var(--accent-soft); border-left-color: var(--accent); }
.prow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .num { color: var(--faint); font-variant-numeric: tabular-nums; margin-right: 4px; font-size: 12px; }
.prow .d { font-size: 11px; font-weight: 600; }
.prow .star { color: var(--attempted); font-size: 12px; text-align: center; }
.prow .multi { color: var(--faint); font-size: 10px; margin-left: 5px; }
.d-Easy { color: var(--easy); } .d-Medium { color: var(--med); } .d-Hard { color: var(--hard); }
.st { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-block; position: relative; }
.st.attempted { border-color: var(--attempted); background: linear-gradient(90deg, var(--attempted) 50%, transparent 50%); }
.st.solved { border-color: var(--solved); background: var(--solved); }
.st.solved::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 6px; border: solid var(--panel); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.plist .none { padding: 20px 14px; color: var(--muted); }

.pane-left { width: 44%; min-width: 280px; display: flex; flex-direction: column; background: var(--panel); min-height: 0; }
.pane-right { flex: 1; min-width: 320px; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.splitter { flex: none; background: var(--bg); position: relative; z-index: 2; }
.splitter.v { width: 6px; cursor: col-resize; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.splitter.h { height: 6px; cursor: row-resize; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.splitter:hover, .splitter.drag { background: var(--accent-soft); }
body.dragging { user-select: none; }
body.dragging iframe, body.dragging .CodeMirror { pointer-events: none; }

.tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 10px 9px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.small-tabs { border-bottom: 0; padding: 0; }
.small-tabs button { padding: 8px 10px; font-size: 13px; }

.left-body { flex: 1; overflow-y: auto; min-height: 0; }
.tabpane { padding: 18px 22px 40px; max-width: 760px; }
.empty-state { padding: 40px 24px; color: var(--muted); }

/* description */
.p-title { font-size: 21px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.3; }
.p-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.chip { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--sunken); color: var(--muted); border: 0; white-space: nowrap; }
.chip.d-Easy, .chip.d-Medium, .chip.d-Hard { font-weight: 600; }
button.chip { cursor: pointer; }
button.chip:hover { color: var(--text); }
button.chip.on { background: var(--accent-soft); color: var(--text); }
.chip.solved { background: var(--solved-soft); color: var(--solved); font-weight: 600; }
.chip.attempted { background: var(--attempted-soft); color: var(--attempted); font-weight: 600; }
.chip a { color: inherit; text-decoration: none; }
.md { line-height: 1.65; }
.md p { margin: 0 0 12px; }
.md h1, .md h2, .md h3 { font-size: 15px; margin: 20px 0 8px; }
.md code { background: var(--code-bg); border: 1px solid var(--line); padding: 0 4px; border-radius: 4px; font-size: 12.5px; }
.md pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; }
.md pre code { background: none; border: 0; padding: 0; }
.md ul, .md ol { padding-left: 22px; margin: 0 0 12px; }
.md li { margin: 3px 0; }
.md strong { font-weight: 600; }
.md table { border-collapse: collapse; margin-bottom: 12px; }
.md td, .md th { border: 1px solid var(--line); padding: 4px 8px; }
.md blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }

.hint { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; background: var(--panel-2); }
.hint summary { padding: 9px 12px; cursor: pointer; font-weight: 500; }
.hint div { padding: 0 12px 10px; }
.reveal { text-align: left; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 22px; background: var(--panel-2); }
.reveal p { margin: 0 0 12px; color: var(--muted); }
.codeblock { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; white-space: pre; margin: 0 0 14px; }
.sec-title { font-size: 13px; font-weight: 600; margin: 22px 0 8px; color: var(--muted); }

.subs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.subs-table th { text-align: left; font-weight: 500; color: var(--faint); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.subs-table td { padding: 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.subs-table tr.click { cursor: pointer; }
.subs-table tr.click:hover td { background: var(--panel-2); }
.s-Accepted { color: var(--solved); font-weight: 600; }
.s-bad { color: var(--hard); font-weight: 600; }
#chatInput { font-family: inherit; }
#notesArea { width: 100%; min-height: 260px; resize: vertical; font-family: "JBMono", monospace; font-size: 13px; line-height: 1.55; }
.mark-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* editor */
.editor-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex: none; }
.editor-bar .lang { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--sunken); }
.editor-wrap { flex: 1; min-height: 80px; position: relative; }
.editor-wrap .CodeMirror { position: absolute; inset: 0; height: auto; }
.CodeMirror { font-family: "JBMono", ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.55; background: var(--panel); color: var(--text); }
.CodeMirror-gutters { background: var(--panel); border-right: 1px solid var(--line); }
.CodeMirror-linenumber { color: var(--cm-gutter); }
.CodeMirror-cursor { border-left: 2px solid var(--cm-cursor); }
.cm-fat-cursor .CodeMirror-cursor { background: var(--accent); opacity: .6; }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: var(--cm-sel); }
.CodeMirror-activeline-background { background: var(--cm-active); }
.CodeMirror-matchingbracket { color: inherit !important; background: var(--accent-soft); outline: 1px solid var(--accent); }
.CodeMirror-dialog { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.cm-s-default .cm-keyword { color: var(--cm-kw); } .cm-s-default .cm-def { color: var(--cm-def); }
.cm-s-default .cm-string, .cm-s-default .cm-string-2 { color: var(--cm-str); }
.cm-s-default .cm-number { color: var(--cm-num); } .cm-s-default .cm-comment { color: var(--cm-com); font-style: italic; }
.cm-s-default .cm-builtin { color: var(--cm-builtin); } .cm-s-default .cm-variable-2 { color: var(--cm-var2); }
.cm-s-default .cm-operator { color: var(--cm-op); } .cm-s-default .cm-meta { color: var(--cm-num); }
.cm-s-default .cm-property { color: var(--text); } .cm-s-default .cm-variable { color: var(--text); }
.cm-s-default .cm-atom { color: var(--cm-num); } .cm-s-default .cm-bracket { color: var(--muted); }
.cm-s-default .cm-error { color: var(--hard); }

/* console */
.console { height: 38%; min-height: 44px; display: flex; flex-direction: column; flex: none; }
.console-bar { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line); flex: none; }
.console-body { flex: 1; overflow-y: auto; min-height: 0; }
.cpane { padding: 12px 14px 20px; }
.case-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.case-tab { position: relative; padding: 4px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-size: 12px; font-weight: 500; }
.case-tab.on { background: var(--sunken); border-color: var(--line-strong); }
.case-tab .x { margin-left: 6px; color: var(--faint); }
.case-tab .x:hover { color: var(--hard); }
.case-tab.pass::before, .case-tab.fail::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.case-tab.pass::before { background: var(--solved); }
.case-tab.fail::before { background: var(--hard); }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-family: "JBMono", monospace; }
.field textarea { width: 100%; font-family: "JBMono", monospace; font-size: 12.5px; resize: vertical; min-height: 34px; line-height: 1.5; }
.field textarea.bad { border-color: var(--hard); }
.valbox { background: var(--code-bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-family: "JBMono", monospace; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; }
.valbox.err { color: var(--hard); background: var(--danger-soft); border-color: transparent; }
.res-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.res-status { font-size: 18px; font-weight: 600; }
.res-status.ok { color: var(--solved); }
.res-status.bad { color: var(--hard); }
.res-sub { color: var(--muted); font-size: 13px; }
.diffline { outline: 1px solid var(--hard); }
.running { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.add-case { border: 1px dashed var(--line-strong); background: none; color: var(--muted); border-radius: 7px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.add-case:hover { color: var(--text); }
.case-note { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }

/* ---------- dashboard ---------- */
#dashView { overflow-y: auto; }
.dash { max-width: 1180px; margin: 0 auto; padding: 28px 28px 60px; }
.dash h1 { font-size: 26px; margin: 0 0 4px; font-weight: 600; letter-spacing: -.015em; }
.dash .lede { color: var(--muted); margin: 0 0 24px; }
.dash-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-bottom: 30px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.panel h2 { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.big-num { font-size: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.big-num small { font-size: 16px; color: var(--muted); font-weight: 500; }
.overview { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.ov-stat .lbl { color: var(--muted); font-size: 12px; margin-top: 6px; }
.diff-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.diff-bar { display: grid; grid-template-columns: 62px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; }
.diff-bar .track { height: 7px; background: var(--todo-cell); border-radius: 4px; overflow: hidden; }
.diff-bar .track span { display: block; height: 100%; border-radius: 4px; }
.diff-bar .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat i { width: 11px; height: 11px; border-radius: 2px; background: var(--todo-cell); display: block; }
.heat i.l1 { background: color-mix(in srgb, var(--solved) 35%, var(--todo-cell)); }
.heat i.l2 { background: color-mix(in srgb, var(--solved) 60%, var(--todo-cell)); }
.heat i.l3 { background: color-mix(in srgb, var(--solved) 82%, var(--todo-cell)); }
.heat i.l4 { background: var(--solved); }
.heat i.sub { background: color-mix(in srgb, var(--attempted) 45%, var(--todo-cell)); }
.heat-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }

/* the punch card: one cell per problem */
.lists-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.lists-head h2 { font-size: 18px; margin: 0; font-weight: 600; }
.card-list { display: flex; flex-direction: column; gap: 18px; }
.lcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.lcard-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.lcard-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.lcard-head .frac { font-variant-numeric: tabular-nums; color: var(--muted); }
.lcard-head .frac b { color: var(--text); font-size: 16px; }
.lcard-head .open { margin-left: auto; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 26px; }
.cat-row .cat-name { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 5px; gap: 8px; }
.cat-row .cat-name span:first-child { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cells { display: flex; flex-wrap: wrap; gap: 3px; }
.cell { width: 15px; height: 15px; border-radius: 3px; background: var(--todo-cell); display: block; position: relative; }
.cell.attempted { background: color-mix(in srgb, var(--attempted) 55%, var(--todo-cell)); }
.cell.solved { background: var(--solved); }
.cell.e { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--easy) 0%, transparent); }
.cell:hover { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--todo-cell); }
.legend i.a { background: color-mix(in srgb, var(--attempted) 55%, var(--todo-cell)); }
.legend i.s { background: var(--solved); }
.recent { width: 100%; border-collapse: collapse; font-size: 13px; }
.recent td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.recent tr:last-child td { border-bottom: 0; }
.recent a { color: var(--text); text-decoration: none; }
.recent a:hover { color: var(--accent); }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--text); color: var(--panel); font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

/* dialog & toast */
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--panel); color: var(--text); width: min(860px, 92vw); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(10, 14, 22, .55); }
.dlg-head, .dlg-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.dlg-head { border-bottom: 1px solid var(--line); }
.dlg-head h3 { margin: 0; font-size: 15px; flex: 1; }
.dlg-foot { border-top: 1px solid var(--line); }
.dlg-body { max-height: 65vh; overflow: auto; }
.dlg-body .codeblock { border: 0; border-radius: 0; margin: 0; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--text); color: var(--panel); padding: 9px 16px; border-radius: 9px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* solved celebration: a short pulse on the status glyph of the solved row */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.st.pop { animation: pop .45s ease-out; }

@media (max-width: 1400px) { .top-progress .tp-bar { display: none; } .top-progress { gap: 14px; } }
@media (max-width: 1100px) {
  .sidebar { width: 250px; }
  .top-progress .tp-item[data-list="stocks"], .top-progress .tp-item[data-list="custom"] { display: none; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .workspace { flex-direction: column; }
  .sidebar { width: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .pane-left { width: auto !important; min-height: 50vh; }
  .splitter.v { display: none; }
  .sidebar { width: auto !important; }
  .workspace.side-hidden .sidebar { display: none; }
  .pane-right { min-height: 80vh; }
  .dash-top { grid-template-columns: 1fr; }
  .top-progress { display: none; }
  main { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- chat ---------- */
.tabpane.chatpane { max-width: none; padding: 0; display: flex; flex-direction: column; height: 100%; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-empty { color: var(--muted); max-width: 560px; }
.chat-empty p { margin: 0 0 10px; }
.msg { max-width: 100%; }
.msg .who { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; display: flex; gap: 8px; align-items: baseline; }
.msg .who .when { font-weight: 400; color: var(--faint); }
.msg.user .bubble { background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; white-space: pre-wrap; word-wrap: break-word; }
.msg.assistant .bubble { padding: 0 2px; }
.msg.assistant .bubble > :last-child { margin-bottom: 0; }
.msg.error .bubble { background: var(--danger-soft); color: var(--hard); border-radius: 10px; padding: 8px 12px; }
.msg .bubble pre { position: relative; }
.copy-code { position: absolute; top: 6px; right: 6px; font-size: 11px; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; opacity: 0; }
.msg .bubble pre:hover .copy-code { opacity: 1; }
.chat-compose { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--panel); flex: none; }
.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#chatInput { width: 100%; resize: vertical; min-height: 60px; max-height: 260px; line-height: 1.5; }
.chat-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cursor-blink { display: inline-block; width: 7px; height: 14px; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.left-body.chat-mode { overflow: hidden; }
.settings-body { padding: 16px 18px; }
.settings-body h4 { margin: 0 0 6px; font-size: 14px; }
.settings-body .field input, .settings-body .field select { width: 100%; }
.settings-body .field label { font-family: inherit; }
.settings-row { display: flex; gap: 10px; align-items: center; }
.ok-text { color: var(--solved); } .bad-text { color: var(--hard); }
#settingsDialog { width: min(720px, 94vw); }
.backend-seg { margin: 4px 0 12px; }
.backend-seg button { padding: 6px 14px; font-size: 13px; }
.settings-body code { font-size: 12px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.subs-table .del-sub { width: 24px; height: 24px; font-size: 11px; opacity: 0; }
.subs-table tr:hover .del-sub, .subs-table .del-sub:focus-visible { opacity: 1; }

/* optimal complexity: masked like a password, eye toggles */
.cx { margin: 6px 0 4px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px 7px 12px; background: var(--panel-2); }
.cx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.cx-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 6px; }
.cx-k { font-size: 12px; color: var(--faint); }
.cx-row code { font-family: "JBMono", monospace; font-size: 13px; color: var(--text); margin-right: 8px; }
.cx-mask { font-family: "JBMono", monospace; font-size: 13px; letter-spacing: 1px; color: var(--faint); margin-right: 8px; user-select: none; }
.cx-eye { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.cx-eye:hover { color: var(--text); background: var(--sunken); border-color: var(--line); }
.cx.open .cx-eye { color: var(--accent); }
.cx-note { margin: 4px 0 2px; font-size: 13px; color: var(--muted); }
.cx-note p { margin: 0; }
.cx-note code { font-size: 12px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
/* sidebar accordion + hide */
.side-actions { align-items: center; }
.link-btn { background: none; border: 0; padding: 2px 2px; font-size: 12px; color: var(--muted); cursor: pointer; }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.side-toggle { flex: none; align-self: center; background: none; border: 1px solid transparent; color: var(--muted); border-radius: 6px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; margin-right: 4px; padding: 0; }
.side-toggle:hover { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.sidebar { transition: width .22s ease; overflow: hidden; }
.sidebar.no-anim { transition: none; }
.sidebar > * { min-width: 200px; }
.workspace.side-hidden .sidebar { border-right: 0; }
.splitter.side-split { border-left: 0; }
.workspace.side-hidden .side-arrow { transform: translate(20px, 0) scale(-1, 1); }
.pcat:hover { color: var(--text); }
.side-actions .btn { white-space: nowrap; }
.icon-btn.sm-icon { width: 26px; height: 26px; }

/* guest mode */
.guest-chip { font-size: 12px; color: var(--muted); background: var(--attempted-soft); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.guest-chip .link-btn { color: var(--text); font-weight: 600; }
body.guest #settingsBtn, body.guest #leftTabs [data-tab="chat"], body.guest #leftTabs [data-tab="notes"],
body.guest #leftTabs [data-tab="subs"], body.guest .mark-row, body.guest #chatPane { display: none !important; }
.guest-banner { background: var(--attempted-soft); border-radius: 10px; padding: 12px 16px; margin-bottom: 22px; }

/* accounts */
.settings-body section + section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
body.not-admin .admin-only { display: none !important; }
body.no-chat #leftTabs [data-tab="chat"], body.no-chat #chatPane { display: none !important; }
.user-chip { font-size: 12.5px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.role-badge:empty { display: none; }
.pw-change summary { cursor: pointer; color: var(--muted); width: fit-content; }
.pw-change summary:hover { color: var(--text); }
.pw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.pw-grid .field { margin-bottom: 6px; }
.users-wrap { overflow-x: auto; margin: 8px 0 10px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--muted); padding: 0 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.users-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.users-table td.num { font-variant-numeric: tabular-nums; }
.users-table .acts { display: flex; gap: 4px; justify-content: flex-end; }
.users-table .acts .btn { padding: 3px 8px; font-size: 12px; }
.add-user { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: end; }
.add-user .field { margin-bottom: 0; }
.add-user .toggle { padding-bottom: 7px; }
@media (max-width: 560px) {
  .pw-grid { grid-template-columns: 1fr; }
  .add-user { grid-template-columns: 1fr 1fr; }
}

/* example diagrams (static/viz.js) */
.md .viz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 8px; }
.viz-fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.viz-fig figcaption { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-family: "JBMono", monospace; }
.viz-svg { max-width: 100%; height: auto; display: block; overflow: visible; }
.viz-arrow { color: var(--muted); font-size: 18px; }
.viz-stack { display: flex; flex-direction: column; gap: 4px; }
.viz-row { display: flex; align-items: center; gap: 8px; }
.viz-rowlab { font-size: 11.5px; color: var(--muted); font-family: "JBMono", monospace; min-width: 62px; }
.viz-svg .vn circle, .viz-svg .vn rect { fill: var(--panel); stroke: var(--text); stroke-width: 1.4; }
.viz-svg .vn text { fill: var(--text); text-anchor: middle; font-family: "JBMono", ui-monospace, monospace; font-weight: 600; }
.viz-svg .vn.hl circle, .viz-svg .vn.hl rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.viz-svg .vn.hl text { fill: var(--accent); }
.viz-svg .ve { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.viz-svg .ve.vc { stroke: var(--accent); stroke-dasharray: 4 3; }
.viz-svg .ve.vr { stroke: var(--accent); stroke-width: 1.1; opacity: .8; }
.viz-svg .va { fill: var(--muted); }
.viz-svg .va.var { fill: var(--accent); }
.viz-svg .vl rect { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.viz-svg .vl text { fill: var(--muted); font-size: 10.5px; text-anchor: middle; font-family: "JBMono", ui-monospace, monospace; }
.viz-out { display: flex; align-items: center; gap: 18px; max-width: 100%; }