/* All colors inherit the shared light/dark tokens, including form controls. */
.problems { padding-block:24px 48px; color:var(--text); }
.problem-hero { padding:32px; margin-bottom:24px; border-radius:16px; background:var(--ink); color:var(--ink-fg); }
.problem-hero h1 { color:inherit; font-size:clamp(1.8rem,4vw,2.8rem); margin:12px 0; }
.problem-hero p { color:inherit; margin:8px 0; }
.problem-card { padding:24px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:12px; min-width:0; }
.problem-list-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.problem-row h2 { font-size:1.25rem; margin:12px 0; }
.problem-row a { color:var(--text); }
.problem-meta { color:var(--text-muted); font-size:.875rem; }
.problem-tag { display:inline-block; background:var(--surface-alt); color:var(--text); padding:3px 8px; border-radius:6px; margin:0 4px 4px 0; }
.problem-filters { display:flex; flex-wrap:wrap; gap:16px; align-items:end; }
.problems label { display:block; }
.problems select,.problems button { min-height:44px; padding:8px 12px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); color:var(--text); max-width:100%; }
.problems button { cursor:pointer; }
.problems button:disabled { cursor:default; opacity:.6; }
.problems .btn--primary { background:var(--ink); color:var(--ink-fg); }
.problems select { display:block; width:100%; }
.problem-checkbox { min-height:44px; display:flex!important; align-items:center; gap:8px; }
.problem-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.problem-prose { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; }
.problems pre { max-width:100%; overflow:auto; padding:14px; background:var(--surface-alt); color:var(--text); border:1px solid var(--border); border-radius:6px; }
.problem-statement h2:not(:first-child),.problem-statement h3 { margin-top:24px; }
.problems summary { min-height:44px; cursor:pointer; padding-block:12px; }
#problem-code { display:block; width:100%; box-sizing:border-box; min-height:320px; margin-top:8px; padding:16px; resize:vertical; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:6px; font:14px/1.7 var(--font-mono); tab-size:2; }
.problem-actions { display:flex; gap:12px; margin:16px 0; }
#judge-progress { width:100%; accent-color:var(--accent); }
#judge-checks,#problem-history { padding-left:24px; overflow-wrap:anywhere; }
.problems [hidden] { display:none!important; }
.problems :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:960px) { .problem-list-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .problem-workspace { grid-template-columns:minmax(0,1fr); } }
@media(max-width:560px) { .problem-list-grid { grid-template-columns:minmax(0,1fr); } .problem-card,.problem-hero { padding:20px; } .problem-filters { display:grid; grid-template-columns:minmax(0,1fr); } .problem-actions button { flex:1; } }