:root {
  --bg: #0f1115; --bg2: #161a21; --bg3: #1d222b; --line: #2a303b; --fg: #e6e8ec; --mut: #8b93a1;
  --acc: #de5d26; --acc2: #ff7a3d; --ok: #2fbf71; --bad: #f05252; --warn: #f0b429; --easy: #2fbf71; --med: #f0b429; --hard: #f05252;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --kb: 0px; --lh: 24px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overscroll-behavior: none;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; } /* no zoom-on-focus on iOS */
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); font-size: .9em; background: var(--bg3); padding: 1px 5px; border-radius: 5px; word-break: break-word; }
.muted { color: var(--mut); } .small { font-size: 13px; }
.btn { border: 1px solid var(--line); background: var(--bg3); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; font-weight: 600; touch-action: manipulation; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.btn.icon { font-size: 28px; line-height: 1; padding: 4px 12px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 360px; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.login-card h1 { margin: 0; font-size: 24px; } .logo { font-size: 44px; }
.login-card input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.error { color: var(--bad); min-height: 1.2em; margin: 0; }

/* shell */
.page { height: 100dvh; display: flex; flex-direction: column; padding-left: var(--sal); padding-right: var(--sar); }
.topbar { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--sat)) 12px 8px; background: var(--bg2); border-bottom: 1px solid var(--line); flex: none; }
.brand { font-weight: 800; flex: 1; font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: calc(90px + var(--sab)); transform: translate(-50%, 20px); background: #333a46; padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* list */
.list-main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(30px + var(--sab)); max-width: 900px; width: 100%; margin: 0 auto; }
.stats { display: flex; align-items: center; gap: 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--acc) calc(var(--p) * 1%), var(--bg3) 0); }
.ring span { width: 66px; height: 66px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; font-weight: 800; font-size: 20px; line-height: 1; }
.ring small { font-size: 11px; color: var(--mut); font-weight: 500; }
.stat-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sr { display: flex; justify-content: space-between; }
.streak { text-align: center; display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.streak b { font-size: 22px; line-height: 1; } .flame { font-size: 20px; }
.d-easy { color: var(--easy); } .d-medium { color: var(--med); } .d-hard { color: var(--hard); }
.filters { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.search { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; width: 100%; -webkit-appearance: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; }
.chip { border: 1px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 7px 14px; min-height: 36px; white-space: nowrap; }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.selects { display: flex; gap: 8px; }
.selects select { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px; min-height: 42px; }
.count { font-size: 13px; margin: 4px 2px; }
.plist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.plist li + li { border-top: 1px solid var(--line); }
.prow { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 56px; background: var(--bg2); }
.prow:active { background: var(--bg3); }
.mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.mark.solved { background: var(--ok); border-color: var(--ok); color: #fff; }
.mark.tried:not(.solved) { border-color: var(--warn); color: var(--warn); }
.ptitle { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.lcnum { color: var(--mut); font-weight: 500; }
.ptopics { font-size: 12px; color: var(--mut); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diff { font-size: 13px; font-weight: 700; flex: none; }
.recent h3 { font-size: 16px; margin: 22px 2px 8px; }
.sub-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sub-slug { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st { font-weight: 700; } .st-accepted { color: var(--ok); } .st-wrong_answer, .st-runtime_error, .st-time_limit, .st-error { color: var(--bad); } .st-compile_error { color: var(--warn); }

/* problem page */
.prob-page { overflow: hidden; }
.ptop .back { margin-left: -6px; }
.ptitle-top { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.tnum { color: var(--mut); }
.solved-badge { color: var(--ok); margin-left: 6px; }
.timer { font-family: var(--mono); background: var(--bg3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-height: 36px; font-size: 14px; }
.timer.on { border-color: var(--acc); color: var(--acc2); }
.tabs { display: flex; background: var(--bg2); border-bottom: 1px solid var(--line); flex: none; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 4px; min-height: 44px; color: var(--mut); font-weight: 600; position: relative; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--acc); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; background: currentColor; }
.dot.st-accepted { background: var(--ok); } .dot.st-compile_error { background: var(--warn); }
.dot.st-wrong_answer, .dot.st-runtime_error, .dot.st-time_limit, .dot.st-error { background: var(--bad); }
.workspace { flex: 1; min-height: 0; display: flex; position: relative; }
.pane { display: none; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.workspace[data-tab="desc"] .p-desc, .workspace[data-tab="code"] .p-code, .workspace[data-tab="results"] .p-results { display: flex; flex-direction: column; }
.p-desc, .p-results { padding: 14px 16px 24px; }
.desc { width: 100%; }
.desc h2 { font-size: 21px; margin: 0 0 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.tag { font-size: 12px; background: var(--bg3); border-radius: 999px; padding: 3px 9px; color: var(--mut); }
.lc-link { font-size: 13px; color: var(--acc2); margin-left: auto; }
.md p { margin: 0 0 12px; }
.example { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.ex-h { font-weight: 700; }
h4 { margin: 18px 0 8px; font-size: 15px; }
.cons { margin: 0; padding-left: 20px; font-size: 14px; }
.hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hint { width: 100%; background: #2a2412; border: 1px solid #4a3e14; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.notes { width: 100%; min-height: 110px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical; }
.code-block { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; font: 14px/1.5 var(--mono); margin-top: 12px; }

/* editor */
.p-code { background: #0b0d11; }
.code-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; flex: none; }
.code-head .lang { font-weight: 600; } .code-head .sync { flex: 1; text-align: right; }
.rel { display: flex; align-items: center; gap: 4px; color: var(--mut); }
.ed-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; }
.prob-page:has(.keybar.show) .ed-scroll { padding-bottom: calc(var(--kb) + 120px); }
.ed-inner { display: flex; min-width: 100%; width: max-content; min-height: 100%; }
.gutter { margin: 0; padding: 10px 8px 10px 6px; text-align: right; color: #4d5565; font: 16px/var(--lh) var(--mono); user-select: none; -webkit-user-select: none; background: #0b0d11; position: sticky; left: 0; z-index: 2; border-right: 1px solid #1c2129; min-width: 40px; }
.gn.err { color: var(--bad); font-weight: 800; }
.ed-area { position: relative; flex: 1; min-width: 0; }
.hl, .ta { margin: 0; padding: 10px 40px 40px 10px; font: 16px/var(--lh) var(--mono); tab-size: 4; white-space: pre; letter-spacing: 0; word-spacing: 0; font-variant-ligatures: none; }
.hl { pointer-events: none; min-height: 100%; }
.ta { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: 0; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #ffb48a; overflow: hidden; }
.ta::selection { background: rgba(222, 93, 38, .35); -webkit-text-fill-color: transparent; }
.l.err { background: rgba(240, 82, 82, .16); text-decoration: underline wavy rgba(240, 82, 82, .9); text-underline-offset: 4px; }
.tk { color: #ff7ab2; } .tt { color: #6bdfff; } .tf { color: #67b7a4; } .ts { color: #fc6a5d; } .tn { color: #d0bf69; }
.tc { color: #6c7986; font-style: italic; } .tm { color: #a167e6; } .tl { color: #ffa14f; }

/* results */
.results { width: 100%; }
.empty, .judging { padding: 30px 6px; text-align: center; }
.judging { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--mut); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 15px; margin-bottom: 12px; }
.banner b { font-size: 22px; }
.cerr { background: #221a0e; border: 1px solid #4b3a12; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.cerr-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.err-msg { flex: 1; font-weight: 600; color: #ffd27a; }
.goto { background: var(--warn); color: #000; border: 0; }
.rendered { margin: 0; padding: 10px; background: #0b0d11; font: 13px/1.45 var(--mono); overflow-x: auto; white-space: pre; }
.warns { margin-bottom: 10px; font-size: 14px; color: var(--mut); }
.cases { display: flex; flex-direction: column; gap: 8px; }
.case { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.case-h { display: flex; align-items: center; gap: 8px; }
.case-h .us { margin-left: auto; font-size: 12px; }
.cdot { width: 10px; height: 10px; border-radius: 50%; background: var(--mut); flex: none; }
.cs-pass .cdot { background: var(--ok); } .cs-fail .cdot, .cs-panic .cdot { background: var(--bad); }
.cs-fail, .cs-panic { border-color: #5a2525; }
.io { display: flex; gap: 8px; margin-top: 6px; align-items: baseline; }
.io > span { width: 68px; flex: none; color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.io code { white-space: pre-wrap; }
.io.panic code { color: #ff9b9b; }

/* bottom bars */
.actionbar { flex: none; display: flex; gap: 10px; padding: 8px 12px calc(8px + var(--sab)); background: var(--bg2); border-top: 1px solid var(--line); justify-content: flex-end; }
.actionbar .btn { flex: 1; max-width: 220px; }
.keybar { position: fixed; left: 0; right: 0; bottom: var(--kb); z-index: 40; display: none; align-items: center; background: #23272f; border-top: 1px solid #343a46; padding: 5px 4px; gap: 4px; }
.keybar.show { display: flex; }
.kb-fixed { display: flex; gap: 4px; flex: none; }
.kb-scroll { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.kb-scroll::-webkit-scrollbar { display: none; }
.k { min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: #3a404c; font: 600 17px var(--mono); flex: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.k:active { background: var(--acc); }
.kf { background: #2e333d; }
.done { margin-left: 2px; }

/* desktop: split view */
@media (min-width: 900px) {
  .tabs .tab-code { display: none; }
  .tabs button { flex: none; padding: 10px 22px; }
  .workspace { display: grid; grid-template-columns: minmax(360px, 42%) 1fr; }
  .pane { display: none !important; }
  .workspace .p-code { display: flex !important; flex-direction: column; grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
  .workspace[data-tab="desc"] .p-desc, .workspace[data-tab="code"] .p-desc { display: flex !important; flex-direction: column; grid-column: 1; grid-row: 1; }
  .workspace[data-tab="results"] .p-results { display: flex !important; flex-direction: column; grid-column: 1; grid-row: 1; }
  .keybar { display: none !important; }
}