:root {
  color-scheme: light dark;
  --canvas: light-dark(#fafaf7, #191819);
  --surface: light-dark(#fff, #242325);
  --soft: light-dark(#f5f4ef, #2c2a2d);
  --text: light-dark(#1a1a1a, #f2f0ed);
  --muted: light-dark(#5a5a5a, #c2bdc3);
  --border: light-dark(#e4e2d9, #4e494e);
  --primary: light-dark(#2d2963, #ccc4ff);
  --on-primary: light-dark(#fff, #211c3d);
  --hover: light-dark(#f1eff7, #363043);
  --focus: light-dark(#2d2963, #ccc4ff);
  --issue-bg: light-dark(#fff1ed, #382522);
  --issue-fg: light-dark(#952d21, #ffb6a5);
  --used-bg: light-dark(#def1ea, #233e35);
  --used-fg: light-dark(#205540, #ace3c8);
  --issue-edge: light-dark(#e18b7a, #e18b7a);
  --proof-bg: light-dark(#e8eef9, #273a58);
  --proof-fg: light-dark(#254b83, #bed8ff);
  --guided-bg: light-dark(#e3f2e9, #213e35);
  --guided-fg: light-dark(#215a40, #b1e4c9);
  --answer-bg: light-dark(#f3eafb, #3b2c4b);
  --answer-fg: light-dark(#654284, #e7c9ff);
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--text); }
h1, h2, p, dl { margin: 0; }
h1 { font-size: clamp(1.75rem, 4vw, 2.55rem); line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: 1rem; font-weight: 600; }
p { margin-block: .45rem; }
a { color: var(--primary); text-underline-offset: .13em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.top { background: var(--canvas); border-bottom: 1px solid var(--border); }
.bar, main { max-width: 72rem; margin: auto; padding-inline: clamp(1rem, 4vw, 1.25rem); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 4.25rem; padding-block: .5rem; }
.bar-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem .75rem; font-size: .85rem; }
.member-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-toggle { min-width: 2.5rem; padding-inline: .5rem; }
.permissions summary { list-style: none; min-width: 2.5rem; padding-inline: .5rem; }
.permissions summary::-webkit-details-marker { display: none; }
.permissions-menu {
  position: absolute; z-index: 2; top: calc(100% + .45rem); right: 0;
  width: min(23rem, calc(100vw - 2rem)); box-shadow: 0 4px 14px rgb(0 0 0 / .12);
}
.permissions-menu ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; color: var(--muted); }
.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--text); font-size: .92rem; font-weight: 600; text-decoration: none;
}
.brand img { display: block; width: auto; height: 3rem; }
:root[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }
}
.skip-link { position: absolute; top: .5rem; left: .5rem; padding: .3rem .6rem; background: var(--surface); }
.skip-link:not(:focus) { clip-path: inset(50%); }
main { padding-block: 2.25rem 3rem; }
.panel { padding: clamp(.85rem, 2.5vw, 1.35rem); border: 1px solid var(--border); border-radius: .25rem; background: var(--surface); }
.page-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1.3rem; }
.eyebrow { font-size: .72rem; font-weight: 730; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); margin-bottom: .4rem; }
.muted, small { color: var(--muted); }
.stack { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; }
button, .button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  min-height: 2.5rem; padding: .4rem .75rem; font-size: .87rem; font-weight: 500;
  text-decoration: none; border-radius: .25rem; cursor: pointer;
}
button:not(:disabled):hover, .button:hover { border-color: var(--primary); background: var(--hover); }
button:disabled { opacity: .55; cursor: default; }
.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.primary:not(:disabled):hover { background: var(--primary); filter: brightness(.91); }
.danger { color: var(--issue-fg); }
input:not([type=checkbox]), select, textarea {
  width: 100%; min-height: 2.5rem; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: .46rem .64rem; border-radius: .25rem;
}
input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); vertical-align: middle; }
textarea { min-height: 6rem; resize: vertical; }
label { display: grid; gap: .28rem; min-width: 0; font-size: .85rem; font-weight: 620; }
.check { display: flex; align-items: center; gap: .4rem; }
.auth { max-width: 31rem; margin: clamp(.75rem, 9vh, 5rem) auto; }
.auth form { margin-top: 1.15rem; }
.auth button { justify-self: start; }
.admin-grid, .detail-grid { display: grid; gap: 1rem; align-items: start; }
.admin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.detail-grid .panel { min-width: 0; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; }
.account { border-top: 1px solid var(--border); padding: .75rem 0; }
.account:first-of-type { margin-top: .75rem; }
.account-actions, details form { margin-top: .7rem; }
.roles { margin-top: 1rem; font-size: .85rem; }
.roles dt { font-weight: 700; }
.roles dd { margin: 0 0 .45rem; color: var(--muted); }
.notice { margin-bottom: 1rem; }
.notice input { flex: 1 1 13rem; }
.filters, .export-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.filters { position: relative; margin-bottom: .8rem; }
.filters > label { flex: 1 1 12rem; }
.filters > label:first-child { flex-grow: 2; }
.filter-dropdown summary { list-style: none; }
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown summary::after { content: "▾"; margin-inline-start: .2rem; }
.filter-dropdown[open] summary::after { content: "▴"; }
.filter-menu {
  position: absolute; z-index: 1; top: calc(100% + .35rem); right: 0;
  width: min(18rem, 100%); box-shadow: 0 4px 14px rgb(0 0 0 / .12);
}
.filter-dropdown .badge { margin-bottom: 0; }
.selection, .manage-action { margin-top: 1rem; }
.manage-delete { border-inline-start: 3px solid var(--issue-edge); }
.selection-list { margin: 0; padding-inline-start: 1.65rem; }
.selection-list li { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.selection-list li::marker { color: var(--primary); font-weight: 650; }
.selection-list:empty { display: none; }
.selection-row { display: flex; flex-wrap: wrap; gap: .45rem .75rem; align-items: center; justify-content: space-between; }
.selection-row a { overflow-wrap: anywhere; }
.select-cell { white-space: nowrap; }
.select-cell .badge { margin-left: .15rem; }
.sheet { padding: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--soft); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
tbody tr.has-issue:hover, .has-issue { background: var(--issue-bg); }
tr.has-issue td:first-child { box-shadow: inset 3px 0 var(--issue-edge); }
.problem-cell { width: 49%; min-width: 16rem; }
.problem-cell a { display: block; color: var(--text); text-decoration: none; }
.problem-cell a:hover { text-decoration: underline; }
.problem-cell .math { max-height: 5.1rem; overflow: hidden; }
.badge {
  display: inline-block; padding: .15rem .43rem; border-radius: .3rem; background: var(--soft);
  color: var(--muted); font-size: .73rem; font-weight: 670; line-height: 1.45; margin-bottom: .16rem;
}
.category { background: var(--proof-bg); color: var(--proof-fg); }
[data-category$="-guided"] { background: var(--guided-bg); color: var(--guided-fg); }
[data-category$="-answer"] { background: var(--answer-bg); color: var(--answer-fg); }
.issue { background: var(--issue-bg); color: var(--issue-fg); }
.used { background: var(--used-bg); color: var(--used-fg); }
.empty { padding: 2.25rem 1rem; text-align: center; }
.pagination { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1rem; }
.back { display: inline-block; margin-bottom: .75rem; font-size: .9rem; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .65rem; }
.editor-field { display: grid; align-content: start; gap: .28rem; min-width: 0; }
.editor-plain { grid-template-columns: minmax(0, 1fr); }
.preview { padding: .55rem .7rem; border: 1px dashed var(--border); border-radius: .25rem; background: var(--soft); min-width: 0; }
.math { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; margin-block: .35rem; }
.math .katex-display { overflow-x: auto; overflow-y: hidden; padding: .2rem 0; }
.review { margin-top: .75rem; padding: .65rem; border: 1px solid var(--border); border-radius: .25rem; }
.review.has-issue { border-color: var(--issue-edge); }
.review h3 { margin: 0; font-size: 1rem; }
.review small { display: block; }
summary { cursor: pointer; }
.comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: .6rem 0; }
.comparison > div { min-width: 0; padding: .55rem; background: var(--soft); border-radius: .3rem; }
.form-error { color: var(--issue-fg); background: var(--issue-bg); padding: .55rem .75rem; border-radius: .25rem; font-weight: 600; }
@media (max-width: 760px) {
  .detail-grid, .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet table, .sheet tbody { display: block; }
  .sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sheet thead input { display: none; }
  .sheet tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: .25rem .55rem; padding: .75rem;
    border-bottom: 1px solid var(--border);
  }
  .sheet tbody tr:last-child { border-bottom: 0; }
  .sheet td { display: block; border: 0; padding: 0; }
  .sheet .select-cell { grid-column: 2; grid-row: 1; }
  .sheet .problem-cell { grid-column: 1; grid-row: 1; width: auto; min-width: 0; }
  .category-cell, .issues-cell { grid-column: 1 / -1; }
  .author-cell { grid-column: 1 / -1; color: var(--muted); }
  .author-cell::before { content: 'By '; }
  .sheet tr.has-issue { box-shadow: inset 3px 0 var(--issue-edge); }
  .sheet tr.has-issue td:first-child { box-shadow: none; }
}
@media (max-width: 520px) {
  .editor, .comparison { grid-template-columns: minmax(0, 1fr); }
  .bar { flex-wrap: wrap; }
  .bar-actions { margin-left: auto; }
  .brand img { height: 2.4rem; }
  .filters > label { flex-basis: 100%; }
}