/* Palette and type are inherited from the marketing site (docs/styles.css)
   so forum.tensugo.com and www.tensugo.com read as one product. */
:root {
  color-scheme: light;
  /* 3D board sizing knobs -- tweak these, nothing else needed.
     --board-3d-wide-height: how tall the canvas is in "Wide" mode. Wide must
     only add WIDTH; if this grows, the controls under the board get pushed off
     the screen. Try 52dvh if you want it shorter, 66dvh for taller.
     --board-3d-wide-max: an upper bound in px so it does not balloon on a big
     monitor. */
  --board-3d-wide-height: 58dvh;
  --board-3d-wide-max: 560px;
  --bg: #fbfaf5;
  --paper: #fbfaf5;
  --panel: #fffdfa;
  --panel-2: #f7f3ea;
  --panel-3: #f1e6d0;
  --shell: #f1e6d0;
  --line: #e2d7c4;
  --line-soft: #eee5d6;
  --rule: rgba(56, 40, 25, 0.18);
  --text: #201913;
  --ink: #201913;
  --muted: #695d50;
  --faint: #918271;
  --wood: #d9a75f;
  --wood-dark: #95672f;
  --accent: #245f73;
  --accent-strong: #17414f;
  --accent-soft: #efece8;
  --danger: #9c382b;
  --radius: 8px;
  --shadow: 0 22px 60px rgba(32, 25, 19, 0.16);
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  /* Every stack names a CJK face explicitly. The old --sans named none, so
     Chinese fell through to whatever the browser defaulted to; the old --serif
     went Georgia -> Times New Roman, neither of which has a single CJK glyph,
     so headings landed on the last-resort serif (SimSun on Windows) with Latin
     metrics applied to it. That is the "Times New Roman" look. */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  /* Headings are the sans, heavier -- not a serif. A Latin display serif has no
     Chinese counterpart that is good at 58px on every OS, and mixing a serif
     Latin run with a sans CJK run inside one title reads as a mistake. */
  --display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  /* Latin-only, and it must stay that way: the wordmark and nothing else. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  /* Same 44px ruled-paper grid as the marketing site. */
  background:
    linear-gradient(90deg, rgba(56, 40, 25, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(56, 40, 25, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 44px 44px;
  color: var(--text);
  font-family: var(--sans);
  letter-spacing: 0;
}

/* Display headings. Two rules matter for Chinese and are both about restraint:
   tracking stays at 0 (negative tracking is a Latin trick -- on square CJK
   glyphs it jams them into each other, which is what "挤变形" looks like), and
   line-height never goes below 1.2 (CJK glyphs fill their em box top to bottom,
   so 1.0 makes consecutive lines touch). */
.page-head h1,
.post-card h1,
.dingshi-hero h1,
.dingshi-detail-head h1,
.library-head h1,
.exam-summary-head h1,
.study-content h2,
.dingshi-card h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: pretty;
}

/* Japanese and Korean have their own system faces; without naming them the
   browser picks a Chinese font and the kana/hangul come out subtly wrong. */
:lang(ja) {
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
}

:lang(ko) {
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif;
  --display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif;
}

.eyebrow,
.library-eyebrow,
.problem-kicker {
  color: var(--danger);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

.app-shell {
  width: min(1500px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  background: rgba(251, 250, 245, 0.88);
  border-radius: var(--radius);
  padding: 10px;
  position: sticky;
  top: 10px;
  z-index: 20;
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.brand a[data-route] {
  flex-direction: column;
  align-items: flex-start;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 44px;
  object-fit: contain;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 15px;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}

.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.language-picker select {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffdfa;
  color: var(--text);
  padding: 8px 28px 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.language-picker select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.settings-language-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.language-setting { display: grid; gap: 8px; min-height: 76px; border: 1px solid #dfdad5; border-radius: 8px; padding: 14px; background: #fff; color: #3d3124; cursor: pointer; text-align: left; }
.language-setting:hover, .language-setting.active { border-color: #447688; background: #f4f2ef; }
.language-setting b { color: #447688; font: 700 11px var(--mono); }
@media (max-width: 760px) { .settings-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-actions a,
.nav-button,
.button {
  border: 1px solid var(--line);
  background: #fffdfa;
  color: var(--text);
  border-radius: 7px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.nav-actions a:hover,
.nav-button:hover,
.button:hover {
  border-color: #b1a597;
  background: #f3ece0;
}

.nav-actions a:active,
.nav-button:active,
.button:active {
  transform: translateY(1px);
}

.primary-link,
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.nav-button {
  appearance: none;
}

.main-panel {
  margin-top: 12px;
  border: 1px solid #d3ccc4;
  background: #e8e4df;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: calc(100dvh - 94px);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #ccc4bb;
  background: linear-gradient(180deg, #f4f2ef, #e6e2dd);
  color: #221b14;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: 0;
}

.page-head p {
  margin: 6px 0 0;
  color: #5e5449;
  font-size: 13px;
}

.thread-meta,
.time,
.reply-count {
  color: var(--muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  border-radius: 5px;
  padding: 0 6px;
  background: #d9e7ec;
  border: 1px solid #cbbfb1;
  color: #224e5e;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}

.study-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.study-tabs a {
  border: 1px solid #c9c1b7;
  background: #f8f7f6;
  color: #574e43;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.study-tabs a:hover,
.study-tabs a.active {
  border-color: #ad9a85;
  background: #cfe1e8;
  color: #152f39;
}

.problem-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 10px; padding: 10px; max-width: 1050px; margin: 0 auto; }
.problem-list { display: grid; align-content: start; gap: 5px; }
.problem-item { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 1px 8px; padding: 9px 10px; text-align: left; border: 1px solid #d0c9c1; border-radius: 7px; background: #f7f6f5; color: #32291e; cursor: pointer; }
.problem-item span { grid-row: span 2; color: #807263; font: 12px var(--mono); padding-top: 2px; }
.problem-item strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.problem-item small { color: #887a69; font-size: 12px; }
.problem-item.active { border-color: #947d62; background: #dbe9ee; box-shadow: inset 3px 0 #40788c; }
.problem-stage { min-width: 0; border: 1px solid #ccc4bb; border-radius: 8px; background: #f7f6f5; overflow: hidden; }
.problem-toolbar, .problem-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; color: #372c20; font-size: 12px; }
.problem-toolbar { border-bottom: 1px solid #ddd8d3; }
.problem-toolbar span { color: #887a69; }
.problem-board { width: min(100%, 590px); margin: 12px auto 4px; padding: 0 12px; }
.problem-board-svg { display: block; width: 100%; height: auto; overflow: visible; }
.problem-board-svg rect { fill: #d19a55; }
.problem-board-svg line { stroke: #75491f; stroke-width: 1; }
.problem-board-svg .star { fill: #75491f; }
.problem-actions { border-top: 1px solid #ddd8d3; background: #f4f1ee; }
.problem-actions .button { margin-left: 5px; padding: 6px 10px; }
.answer-feedback { color: #807262; font-size: 12px; } .answer-feedback.good { color: #21566a; font-weight: 700; } .answer-feedback.bad { color: #b34f3e; font-weight: 700; }
.answer-feedback.partial { color: #8a6418; font-weight: 700; }
.compact-empty { padding: 48px 20px; }
@media (max-width: 700px) { .problem-layout { grid-template-columns: 1fr; } .problem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .problem-actions { align-items: flex-start; flex-direction: column; } }

/* Dense problem library: navigation and training data stay above the fold. */
.problem-library {
  min-height: calc(100dvh - 94px);
  background: #edeae7;
  color: #261f16;
}
.library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 22px 26px 17px;
  border-bottom: 1px solid #c8c0b6;
  background:
    radial-gradient(circle at 82% -30%, rgba(121, 161, 139, .24), transparent 36%),
    #f3f1ee;
}
.library-eyebrow { color: #62574b; font: 700 11px var(--mono); letter-spacing: .13em; }
.library-head h1 { margin: 2px 0 3px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.22; letter-spacing: 0; }
.library-head p { margin: 0; color: #76695a; font-size: 12px; }
.library-summary { display: flex; border: 1px solid #cbc3ba; background: rgba(255,255,255,.48); }
.library-summary span { min-width: 92px; padding: 8px 12px; border-left: 1px solid #d7d0c9; color: #7c6f60; font-size: 11px; }
.library-summary span:first-child { border-left: 0; }
.library-summary b { display: block; color: #342a1f; font: 700 18px var(--mono); }
.library-tabs { display: flex; align-items: center; min-height: 39px; padding: 0 20px; border-bottom: 1px solid #c9c1b8; background: #e5e0da; }
.library-tabs button { align-self: stretch; border: 0; border-bottom: 2px solid transparent; padding: 0 13px; background: transparent; color: #675c4f; font-size: 12px; font-weight: 700; cursor: pointer; }
.library-tabs button:hover:not(:disabled), .library-tabs button.active { border-bottom-color: #2e5562; background: rgba(255,255,255,.42); color: #1c3138; }
.library-tabs button:focus-visible, .rank-entry:focus-visible, .training-panel button:focus-visible, .problem-back:focus-visible { outline: 2px solid #2f6173; outline-offset: -2px; }
.library-tabs button:disabled { color: #9c8e7e; cursor: default; }
.library-tabs small { margin-left: 3px; font: 11px var(--mono); }
.library-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 12px 16px 22px; }
.rank-panel, .today-block, .service-table, .library-note { border: 1px solid #c8c0b7; background: #f7f6f4; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 7px 11px; border-bottom: 1px solid #d5cec7; background: #f0edea; color: #7b6d5e; font-size: 11px; }
.panel-heading div { display: flex; align-items: baseline; gap: 8px; }
.panel-heading strong { color: #33291e; font-size: 13px; }
.panel-heading div span { font: 11px var(--mono); letter-spacing: .08em; }
.rank-list { display: grid; }
.rank-entry { position: relative; display: grid; grid-template-columns: 34px 100px 72px minmax(140px, 1fr) 66px 22px; align-items: center; min-height: 72px; border: 0; border-bottom: 1px solid #ded9d3; padding: 0 12px; background: #f9f8f7; color: #372c20; text-align: left; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.rank-entry:last-child { border-bottom: 0; }
.rank-entry::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #392e21; }
.rank-entry.pine::before { background: #685845; }
.rank-entry.moss::before { background: #6f8e58; }
.rank-entry.clay::before { background: #a56b45; }
.rank-entry.sand::before { background: #c59b54; }
.rank-entry:hover:not(:disabled) { z-index: 1; background: #ede9e5; transform: translateX(3px); }
.rank-entry:active:not(:disabled) { transform: translateX(5px); }
.rank-entry:disabled { opacity: .48; cursor: default; }
.rank-index { color: #988a79; font: 11px var(--mono); }
.rank-entry strong { font-size: 20px; letter-spacing: 0; }
.rank-entry b { color: #4d453b; font: 700 16px var(--mono); }
.rank-entry small { color: #887968; font-size: 12px; }
.rank-count { color: #392e22; font: 700 17px var(--mono); text-align: right; }
.rank-count i { margin-left: 2px; color: #8e7f6d; font: normal 12px var(--sans); }
.rank-arrow { color: #675c50; font-size: 19px; text-align: right; }
.unranked-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; width: 100%; border: 0; border-top: 1px dashed #cbc3ba; padding: 10px 13px; background: #f3f1ee; color: #433c33; text-align: left; cursor: pointer; }
.unranked-row:hover { background: #ebe7e3; }
.unranked-row small { color: #8c7d6c; }
.unranked-row b { font-size: 12px; }
.training-panel { display: grid; align-content: start; gap: 10px; }
.daily-progress { height: 4px; background: #e1dcd6; }
.daily-progress i { display: block; height: 100%; background: #3a6271; }
.today-block > button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; padding: 11px 12px; background: #245f73; color: #f0f6f8; text-align: left; cursor: pointer; }
.today-block > button:hover { background: #17414f; }
.today-block > button span { display: grid; gap: 2px; }
.today-block > button small { color: #cec6bd; font-size: 11px; }
.today-block > button > strong { font-size: 20px; }
.service-table > button { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid #dfdad5; padding: 6px 10px; background: transparent; color: #3d3124; text-align: left; cursor: pointer; }
.service-table > button:last-child { border-bottom: 0; }
.service-table > button:hover:not(:disabled) { background: #eae7e3; }
.service-table > button:disabled { color: #90806e; cursor: default; }
.service-table button span { font-size: 12px; font-weight: 700; }
.service-table button small { color: #8f806e; font-size: 11px; }
.service-table button b { color: #5e503f; font: 11px var(--mono); }
.library-note { padding: 10px 12px; }
.library-note strong { font-size: 12px; }
.library-note p { margin: 4px 0 0; color: #7d6f60; font-size: 11px; line-height: 1.55; }

/* Puzzle workspace: board first, controls second. */
.problem-workspace { min-height: calc(100dvh - 94px); background: #e8e4df; color: #261f17; }
.problem-topline { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #ccc4bb; background: #f4f1ee; }
.problem-topline > div { display: flex; align-items: baseline; gap: 8px; }
.problem-back { border: 0; border-right: 1px solid #ccc4bb; padding: 4px 11px 4px 0; background: transparent; color: #554c42; font-size: 12px; font-weight: 700; cursor: pointer; }
.problem-back:hover { color: #1c4858; }
.problem-kicker { color: #978065; font-weight: 700; }
.problem-topline strong { font-size: 13px; font-weight: 600; }
.problem-next { border: 0; border-radius: 999px; padding: 9px 15px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(36, 95, 115, .24); }
.problem-next span { margin-left: 6px; font-size: 16px; }
.problem-next:disabled { cursor: default; opacity: .45; }
.problem-top-actions { display: flex; align-items: center; gap: 7px; }
.problem-top-actions .button { padding: 8px 11px; }
.exam-clock { min-width: 72px; margin-left: 8px; border-radius: 6px; padding: 5px 8px; background: var(--text); color: #fbfaf5; font: 800 17px var(--mono); text-align: center; }
.exam-builder { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; align-items: end; gap: 12px; padding: 11px 22px; border-bottom: 1px solid #ccc4bb; background: #f7f6f5; }
.exam-builder > div { display: grid; gap: 2px; }
.exam-builder > div strong { font-size: 14px; }
.exam-builder > div span { color: #847665; font-size: 12px; }
.exam-builder label { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 6px; color: #76695b; font-size: 12px; }
.exam-builder select, .exam-builder input { grid-column: 1; width: 108px; height: 32px; border: 1px solid #c9c1b8; border-radius: 5px; background: #fff; color: #392e21; padding: 4px 7px; }
.exam-builder label > span { grid-column: 2; grid-row: 2; }
.problem-workspace .problem-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; max-width: 1370px; padding: 18px 22px 24px; }
.problem-workspace .problem-stage { border: 0; background: transparent; overflow: visible; }
.problem-workspace .problem-board { width: min(100%, 760px); margin: 0 auto; padding: 0; }
.problem-workspace .go-board-svg { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 26px rgba(96,52,14,.28), 0 5px 0 #a87332, 0 16px 30px rgba(67,50,28,.22); }
.problem-rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.problem-title, .problem-interaction, .problem-controls, .problem-queue { border: 1px solid #d2cbc3; background: rgba(249, 251, 249, .86); }
.problem-title { padding: 13px 14px 10px; }
.problem-title-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.problem-title h1 { margin: 0; color: #2f281f; font-size: 20px; line-height: 1.3; letter-spacing: 0; }
.problem-title-line span { color: #807262; font: 12px var(--mono); white-space: nowrap; }
.problem-previous { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e5e0db; color: #928371; font-size: 12px; }
.problem-previous strong { overflow: hidden; color: #50473d; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.problem-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; height: 4px; margin-top: 10px; background: #e5e1dc; }
.problem-progress i { display: block; height: 100%; background: #2e5462; }
.problem-progress span { align-self: center; margin-top: -1px; color: #7a6d5e; font: 11px var(--mono); }
.problem-interaction { padding: 10px; }
.problem-guidance { padding: 0 2px 8px; color: #918270; font-size: 12px; }
.answer-feedback { font-size: 12px; } .answer-feedback.good { color: #205264; } .answer-feedback.bad { color: #a94c3c; } .answer-feedback.partial { color: #866016; }
.problem-answer { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid #dbd6d0; padding: 9px 10px; background: #fff; }
.problem-answer > div { display: grid; gap: 2px; }
.problem-answer span { color: #90806e; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.problem-answer strong { color: #463f36; font-size: 13px; }
.problem-answer b { overflow: hidden; color: #7c6e5f; font: 12px var(--mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.problem-answer.correct { border-color: #ad9a85; background: #eef5f7; }.problem-answer.correct strong { color: #205163; }
.problem-answer.wrong { border-color: #daa295; background: #fff4f0; }.problem-answer.wrong strong { color: #a64b3b; }
.problem-answer.partial { border-color: #d8b36c; background: #fff9ec; }.problem-answer.partial strong { color: #886119; }
.problem-controls { display: grid; gap: 7px; padding: 9px; }
.problem-submit { min-height: 38px; border: 1px solid #224653; background: #2a4b57; color: #f9f8f7; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.problem-submit:hover:not(:disabled) { background: #205365; }.problem-submit:active:not(:disabled) { transform: translateY(1px); }
.problem-submit:disabled { border-color: #ded9d3; background: #ebe8e4; color: #ac9f90; cursor: default; }
.problem-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.problem-mode button, .problem-actions button { min-height: 31px; border: 1px solid #d7d1ca; background: transparent; color: #665b4f; cursor: pointer; font-size: 12px; font-weight: 700; }
.problem-mode button:disabled { opacity: .5; cursor: default; }
.problem-workspace .problem-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; background: transparent; border: 0; }
.problem-actions button:hover:not(:disabled) { border-color: #a99b8c; background: #f3f1ee; }.problem-actions button:disabled { opacity: .45; cursor: default; }
.problem-workspace .answer-toggle.active { border-color: #977f64; background: #ede9e5; color: #205163; }
.candidate-analysis { border: 1px solid rgba(189,203,195,.85); background: rgba(246,250,247,.82); min-height: 0; }
.candidate-analysis-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid #e1dcd6; }
.candidate-analysis-head div { display: flex; align-items: baseline; gap: 7px; }
.candidate-analysis-head strong { font-size: 18px; }
.candidate-analysis-head span { color: #897a69; font-size: 12px; }
.candidate-analysis-head > b { border-radius: 5px; padding: 4px 7px; background: #dae7ec; color: #1c4858; font-size: 12px; }
.candidate-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e1dcd6; border-bottom: 1px solid #e1dcd6; }
.candidate-metrics span { display: grid; gap: 2px; padding: 7px 8px; background: #f7f6f4; color: #887a69; font-size: 11px; }
.candidate-metrics strong { color: #3c3023; font-size: 12px; }
.candidate-pv { display: grid; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #e1dcd6; }
.candidate-pv span { color: #887a69; font-size: 11px; }
.candidate-pv code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #453e35; font-size: 11px; }
.candidate-list { display: grid; max-height: 178px; overflow: auto; }
.candidate-row { display: grid; grid-template-columns: 24px 1fr 38px 42px; align-items: center; gap: 5px; border: 0; border-bottom: 1px solid #e8e4df; padding: 6px 9px; background: transparent; color: #413a32; text-align: left; cursor: pointer; }
.candidate-row:last-child { border-bottom: 0; }
.candidate-row:hover, .candidate-row.active { background: #eae6e1; }
.candidate-row span { color: #8e7f6e; font: 11px var(--mono); }
.candidate-row strong { font-size: 12px; }
.candidate-row b { color: #1f5163; font-size: 12px; }
.candidate-row small { color: #807262; font-size: 11px; text-align: right; }
.problem-queue { overflow: hidden; }
.queue-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; border: 0; padding: 0 11px; background: #f7f6f4; color: #463829; cursor: pointer; text-align: left; }
.queue-heading:hover { background: #efedea; }.queue-heading span { color: #897a69; font: 11px var(--mono); }
.queue-items { max-height: 220px; overflow: auto; padding: 5px 8px 8px; border-top: 1px solid #e1dcd6; }
.problem-workspace .problem-item { grid-template-columns: 26px 1fr; margin-top: 5px; padding: 7px 8px; border-color: #dcd6d0; background: rgba(255,255,255,.48); }
.problem-workspace .problem-item.active { border-color: #947d62; background: #dbe9ee; }
.problem-workspace .problem-item.answered { box-shadow: inset 3px 0 #3a7b92; }
.exam-summary-page { max-width: 920px; margin: 0 auto; padding: 24px 18px 36px; color: #362b1f; }
.exam-summary-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border: 1px solid #c9c1b8; border-radius: 9px 9px 0 0; background: #f7f5f3; }
.exam-summary-head span { color: #716557; font-size: 12px; font-weight: 700; }
.exam-summary-head h1 { margin: 4px 0; font-size: 32px; }
.exam-summary-head p { margin: 0; color: #807262; font-size: 12px; }
.exam-summary-head > strong { color: #215f75; font-size: 52px; line-height: 1; }
.exam-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #c9c1b8; border-top: 0; background: #ded9d4; gap: 1px; }
.exam-stat-grid div { display: grid; gap: 3px; padding: 12px 16px; background: #faf9f7; }
.exam-stat-grid span { color: #887968; font-size: 12px; }
.exam-stat-grid strong { font-size: 22px; }
.exam-result-list { margin-top: 12px; border: 1px solid #c9c1b8; background: #faf9f7; }
.exam-result-heading { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e1dcd6; }
.exam-result-heading span { color: #887a69; font-size: 12px; }
.exam-result-row { display: grid; grid-template-columns: 34px minmax(120px, 1fr) 100px 100px 52px; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e8e4df; }
.exam-result-row:last-child { border-bottom: 0; }
.exam-result-row > span { color: #887a69; font: 12px var(--mono); }
.exam-result-row > strong { font-size: 13px; }
.exam-result-row small { color: #807262; font-size: 12px; }
.exam-result-row > b { text-align: right; color: #2d5b6c; font-size: 12px; }
.exam-result-row.wrong > b, .exam-result-row.unanswered > b { color: #b25a48; }
.exam-summary-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 900px) { .problem-workspace .problem-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; padding-inline: 12px; } }
@media (max-width: 680px) { .problem-topline { height: auto; min-height: 58px; padding: 8px 12px; } .problem-topline, .problem-topline > div { align-items: center; } .exam-builder { grid-template-columns: 1fr 1fr; padding-inline: 12px; } .exam-builder > div { grid-column: 1 / -1; } .problem-workspace .problem-layout { grid-template-columns: 1fr; } .problem-rail { order: -1; } .problem-queue { max-height: 150px; } .exam-result-row { grid-template-columns: 26px 1fr 50px; } .exam-result-row small { display: none; } .exam-summary-head > strong { font-size: 38px; } }
@media (max-width: 820px) {
  .library-head { grid-template-columns: 1fr; gap: 12px; padding: 17px 16px 13px; }
  .library-summary { width: 100%; }
  .library-summary span { flex: 1; min-width: 0; }
  .library-grid { grid-template-columns: 1fr; padding-inline: 10px; }
  .training-panel { grid-template-columns: 1fr 1fr; }
  .library-note { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .library-tabs { overflow-x: auto; padding: 0 6px; }
  .library-tabs button { flex: 0 0 auto; padding-inline: 10px; }
  .rank-entry { grid-template-columns: 25px 88px 58px 1fr 20px; min-height: 62px; padding-inline: 8px; }
  .rank-entry strong { font-size: 17px; }
  .rank-entry b { font-size: 13px; }
  .rank-entry small { display: none; }
  .rank-count { font-size: 13px; }
  .rank-arrow { font-size: 16px; }
  .training-panel { grid-template-columns: 1fr; }
  .library-note { grid-column: auto; }
  .unranked-row { grid-template-columns: 1fr auto; }
  .unranked-row small { display: none; }
}

.dingshi-library,
.dingshi-detail {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.dingshi-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding: 20px 4px 24px;
}

.dingshi-hero h1,
.dingshi-detail-head h1 {
  margin: 5px 0 8px;
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: 0;
  line-height: 1.22;
}

.dingshi-hero p,
.dingshi-detail-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.eyebrow {
  color: var(--accent);
  font: 700 12px var(--mono);
  letter-spacing: .16em;
}

.dingshi-stone-mark {
  display: flex;
  align-items: center;
  padding: 16px;
}

.dingshi-stone-mark i {
  width: 42px;
  height: 42px;
  margin-left: -9px;
  border: 1px solid #24363a;
  border-radius: 50%;
  background: #11191b;
  box-shadow: 0 7px 14px rgba(20, 34, 37, .18);
}

.dingshi-stone-mark i:nth-child(2) {
  background: #f7faf9;
}

.dingshi-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dingshi-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.dingshi-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.dingshi-card-board {
  align-self: center;
  overflow: hidden;
  border-radius: 6px;
}

.dingshi-card-board .go-board-svg {
  display: block;
  width: 100%;
  height: auto;
}

.dingshi-card-copy {
  min-width: 0;
}

.dingshi-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font: 12px var(--mono);
}

.dingshi-card h2 {
  margin: 18px 0 7px;
  font-size: 22px;
}

.dingshi-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dingshi-card small {
  color: var(--muted);
}

.dingshi-detail-head {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  margin-bottom: 22px;
}

.dingshi-detail-head > a {
  align-self: start;
  color: var(--accent);
  text-decoration: none;
}

.dingshi-detail-head dl {
  display: flex;
  gap: 18px;
  margin: 0;
}

.dingshi-detail-head dl div {
  display: grid;
  gap: 3px;
}

.dingshi-detail-head dt {
  color: var(--muted);
  font-size: 12px;
}

.dingshi-detail-head dd {
  margin: 0;
  font-weight: 800;
}

.dingshi-viewer-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
}

.dingshi-board-stage,
.dingshi-analysis-rail > section,
.dingshi-variation-strip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dingshi-board-stage {
  padding: 12px;
}

.dingshi-board-stage .go-board-svg {
  display: block;
  width: 100%;
  height: auto;
}

.dingshi-move-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 11px;
}

.dingshi-move-controls button,
.dingshi-variation-strip button {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dingshi-move-controls button:disabled {
  cursor: default;
  opacity: .35;
}

.dingshi-move-controls span {
  min-width: 155px;
  color: var(--muted);
  text-align: center;
  font: 12px var(--mono);
}

.dingshi-analysis-rail {
  display: grid;
  gap: 12px;
}

.dingshi-analysis-rail > section {
  padding: 16px;
}

.dingshi-evaluation > span,
.dingshi-candidates h2 {
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.dingshi-evaluation > strong {
  display: block;
  color: var(--accent);
  font-size: 25px;
}

.dingshi-evaluation > div {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  color: var(--muted);
  font: 12px var(--mono);
}

.dingshi-candidates .candidate-table {
  margin: 0;
}

.dingshi-variation-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 16px;
  padding: 14px;
}

.dingshi-variation-strip > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dingshi-variation-strip button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

@media (max-width: 920px) {
  .dingshi-card-grid,
  .dingshi-viewer-layout {
    grid-template-columns: 1fr;
  }

  .dingshi-detail-head {
    grid-template-columns: 1fr;
  }

  .dingshi-detail-head dl {
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .dingshi-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .dingshi-card h2 {
    margin-top: 10px;
    font-size: 18px;
  }

  .dingshi-stone-mark {
    display: none;
  }

  .dingshi-move-controls {
    flex-wrap: wrap;
  }
}

/* Full-screen answering workspace — intentionally separate from the forum shell. */
body.problem-solving {
  background: #f7fafb;
  color: #31271c;
}
body.problem-solving .app-shell { width: 100%; margin: 0; padding: 0; }
body.problem-solving .topbar { display: none; }
body.problem-solving .main-panel { min-height: 100dvh; margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.problem-solving .problem-workspace {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100dvh;
  background: #f7fafb;
  color: #382d21;
}
.problem-side-nav {
  display: flex;
  position: sticky;
  top: 0;
  flex-direction: column;
  height: 100dvh;
  border-right: 1px solid #e7e3de;
  padding: 35px 16px 22px;
  background: #fbfdfe;
}
.solve-brand { display: grid; gap: 4px; padding: 0 19px 46px; color: #201913; }
.solve-brand strong { font: 700 28px/1 var(--serif); letter-spacing: -.03em; }
.solve-brand small { color: #897a69; font: 700 11px var(--mono); letter-spacing: .08em; }
.solve-nav-main, .solve-nav-bottom { display: grid; gap: 5px; }
.solve-nav-main a, .solve-nav-main button, .solve-nav-bottom a, .solve-nav-bottom button {
  border: 0;
  border-radius: 4px;
  padding: 13px 18px;
  background: transparent;
  color: #7b6e5f;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.solve-nav-main button.active { background: #f3f1ef; color: #201913; box-shadow: inset 3px 0 #201913; }
.solve-nav-main a:hover, .solve-nav-main button:hover:not(.active), .solve-nav-bottom a:hover, .solve-nav-bottom button:hover { background: #f6f4f2; color: #201913; }
.solve-nav-bottom { margin-top: auto; border-top: 1px solid #e9e5e1; padding-top: 14px; }
.problem-solve-shell { min-width: 0; display: grid; grid-template-rows: 76px auto minmax(0, 1fr); }
.problem-solving .problem-topline {
  grid-row: 1;
  height: 76px;
  padding: 0 28px;
  border-bottom: 1px solid #e7e3de;
  background: rgba(255, 253, 250, 0.92);
}
.problem-solving .problem-topline > div { gap: 13px; }
.problem-solving .problem-kicker { color: #403325; font: 700 12px var(--mono); letter-spacing: .06em; }
.problem-solving .problem-topline strong { color: #978877; font: 700 12px var(--mono); }
.problem-solving .problem-back { border-right: 1px solid #e7e3de; color: #584f44; }
.problem-solving .problem-top-actions .button { border-color: #dcd7d1; border-radius: 4px; background: #fff; color: #403325; }
.problem-solving .problem-topline { min-height: 64px; height: auto; }
.problem-solving .problem-back { font-size: 15px; }
.problem-solving .problem-kicker { font-size: 15px; }
.problem-solving .problem-topline strong { font-size: 15px; }
.problem-solving .problem-next { border: 1px solid #201913; border-radius: 4px; background: #fff; color: #201913; box-shadow: none; }
.problem-solving .exam-builder { grid-row: 2; padding: 10px 28px; border-bottom: 1px solid #e7e3de; background: #fffdfa; }
.problem-solving .problem-layout {
  grid-row: 3;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
}
.problem-solving .problem-stage {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  min-height: 0;
  border-right: 1px solid #e7e3de;
  background: #f4f8fa;
}
.problem-solving .problem-board { align-self: center; width: min(82vh, calc(100vw - 620px)); max-width: 900px; margin: 0 auto; padding: 12px; }
.problem-solving .go-board-svg { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 26px rgba(96,52,14,.26), 0 14px 30px rgba(72,56,33,.24); }
.board-caption { display: flex; justify-content: center; gap: 7px; padding: 0 0 32px; }
.board-caption span { border: 1px solid #dfdad4; border-radius: 5px; padding: 7px 13px; background: #fff; color: #695d50; font: 700 11px var(--mono); letter-spacing: .04em; }
.board-caption span:first-child { border-color: #201913; background: #201913; color: #fff; }
.problem-solving .problem-rail { gap: 0; overflow-y: auto; background: #fffdfa; }
.problem-solving .problem-title, .problem-solving .problem-interaction, .problem-solving .problem-controls, .problem-solving .problem-queue, .problem-solving .candidate-analysis { border: 0; border-bottom: 1px solid #e7e3de; background: transparent; }
.problem-solving .problem-title { padding: 24px 42px 20px; }
.problem-solving .problem-title-line { display: block; }
.problem-solving .problem-title h1 { color: #201913; font: 700 24px/1.3 var(--display); letter-spacing: 0; }
.problem-solving .problem-title-line span { display: block; margin-top: 8px; color: #7f7162; font: 16px var(--mono); letter-spacing: .06em; }
.problem-solving .problem-previous { margin-top: 26px; padding: 0; border: 0; border-radius: 4px; background: #f5f4f2; padding: 12px 13px; color: #887968; font: 700 12px var(--mono); }
.problem-solving .problem-previous { font-size: 13px; }
.problem-solving .problem-previous strong { color: #5d5347; }
.problem-solving .problem-progress { grid-template-columns: minmax(0, 1fr) auto; height: 16px; margin: 10px 0 0; width: 100%; background: transparent; }
.problem-solving .problem-progress i { align-self: end; height: 3px; background: #201913; }
.problem-solving .problem-progress span { position: static; margin: 0 0 0 8px; color: #6b5f52; font-size: 12px; }
.problem-solving .problem-interaction { padding: 25px 42px 22px; min-height: 0; }
.problem-solving .problem-guidance { padding: 0 0 18px; color: #afa396; font-size: 12px; }
.problem-solving .problem-answer { grid-template-columns: 1fr; gap: 10px; border: 1px dashed #d5cec7; border-radius: 7px; padding: 14px; background: #fff; }
.problem-solving .problem-answer > div { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.problem-solving .problem-answer span { color: #2f261c; font: 800 14px var(--mono); letter-spacing: .1em; }
.problem-solving .problem-answer strong { color: #7c6e5f; font-size: 14px; }
.problem-solving .problem-answer b { color: #9a8c7c; text-align: left; }
.problem-solving .problem-answer.correct, .problem-solving .problem-answer.wrong, .problem-solving .problem-answer.partial { border-style: solid; }
.problem-b-choices { border-bottom: 1px solid #e7e3de; padding: 20px 42px 24px; }
.problem-b-choices > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }.problem-b-choices > div:first-child strong { font: 800 12px var(--mono); letter-spacing: .08em; }.problem-b-choices > div:first-child span { color: #9f9283; font-size: 11px; }
.answer-choice-list { display: grid; grid-template-columns: 1fr; gap: 7px; }.answer-choice-row { display: grid; grid-template-columns: 24px 48px 60px minmax(74px, 1fr) minmax(74px, 1fr); align-items: center; column-gap: 8px; row-gap: 3px; border: 1px solid #e1dcd6; border-radius: 4px; padding: 9px 11px; background: #fff; color: #5c5247; cursor: pointer; text-align: left; }.answer-choice-row:hover:not(:disabled) { border-color: #6f5e4a; background: #f6f5f3; }.answer-choice-row.selected { border-color: #205163; background: #f1eeea; box-shadow: inset 3px 0 #205163; }.answer-choice-row:disabled { cursor: default; opacity: .86; }.answer-choice-row b { grid-row: span 2; color: #275464; font: 800 14px var(--mono); }.answer-choice-row strong { font: 700 14px var(--mono); }.answer-choice-row span { color: #6c6053; font-size: 14px; white-space: nowrap; }.answer-choice-row small { grid-column: 2 / -1; color: #998b7b; font: 14px var(--mono); }
.b-candidate-analysis { border-top: 1px solid #e7e3de; }.b-candidate-table { display: grid; gap: 6px; padding: 10px 14px 14px; }.b-candidate-row { display: grid; grid-template-columns: 23px 44px 58px minmax(68px, 1fr) minmax(68px, 1fr); align-items: center; gap: 7px; min-height: 43px; padding: 6px 9px; border: 1px solid #e4dfda; background: #fff; color: #5c5247; }.b-candidate-row.best { border-color: #487d91; background: #eef5f7; }.b-candidate-row.chosen { box-shadow: inset 3px 0 #205163; }.b-candidate-row b { color: #275464; font: 800 13px var(--mono); }.b-candidate-row strong { font: 800 12px var(--mono); }.b-candidate-row span { font-size: 12px; white-space: nowrap; }.b-candidate-row small { grid-column: 2 / -1; color: #998b7b; font: 11px var(--mono); }
.problem-solving .problem-controls { padding: 30px 42px; }
.problem-solving .problem-submit { min-height: 48px; border-radius: 4px; background: #201913; color: #fff; font: 700 14px var(--mono); letter-spacing: .02em; }
.problem-solving .problem-submit:hover:not(:disabled) { background: #403325; }
.problem-submit-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.problem-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.problem-navigation button { min-height: 35px; border: 1px solid #d7d1ca; border-radius: 4px; background: #fff; color: #61574b; cursor: pointer; font: 700 13px var(--mono); }
.problem-navigation button:hover { border-color: #a99b8c; background: #f3f1ee; }
.problem-solving .problem-submit:disabled { border-color: transparent; background: #dfdad5; color: #fff; }
.problem-solving .problem-mode { gap: 12px; margin-top: 12px; }
.problem-solving .problem-mode button, .problem-solving .problem-actions button { min-height: 43px; border-color: #dfdad5; border-radius: 4px; color: #403325; font-size: 13px; }
.problem-solving .problem-actions { margin-top: 13px; }
.problem-solving .problem-actions button { min-height: 29px; border-color: transparent; color: #76695a; }
.problem-solving .problem-actions button:hover:not(:disabled) { background: #f4f2ef; }
.problem-solving .candidate-analysis-head { padding: 16px 42px 12px; border-color: #eae6e1; }.problem-solving .candidate-metrics { margin: 0 42px; }.problem-solving .candidate-pv { padding-inline: 42px; }.problem-solving .candidate-list { margin: 0 32px 16px; }
.problem-solving .problem-queue { margin-top: auto; }
.problem-solving .queue-heading { min-height: 64px; padding: 0 42px; background: transparent; font: 700 14px var(--mono); }.problem-solving .queue-heading:hover { background: #f7f6f4; }
.problem-solving .queue-heading span { font-size: 12px; }.problem-solving .queue-items { max-height: 230px; padding: 5px 32px 18px; border-color: #e7e3de; }
.problem-solving .problem-item { border-radius: 4px; }
@media (max-width: 1020px) {
  .problem-solving .problem-workspace { grid-template-columns: 172px minmax(0,1fr); }
  .problem-solving .problem-layout { grid-template-columns: minmax(0,1fr) 330px; }
  .problem-side-nav { padding-inline: 10px; }.solve-brand { padding-inline: 12px; }.problem-solving .problem-title, .problem-solving .problem-interaction, .problem-solving .problem-controls { padding-inline: 24px; }.problem-solving .queue-heading { padding-inline: 24px; }
  .problem-solving .problem-board { width: min(78vh, calc(100vw - 470px)); max-width: 760px; }
}
@media (max-width: 760px) {
  body.problem-solving .topbar { display: none; }
  .problem-solving .problem-workspace { display: block; }.problem-side-nav { display: none; }.problem-solve-shell { display: block; }.problem-solving .problem-layout { display: block; }.problem-solving .problem-stage { min-height: auto; border-right: 0; }.problem-solving .problem-board { width: min(92vw, 620px); }.problem-solving .problem-rail { overflow: visible; }.problem-solving .problem-title { padding-top: 25px; }
}

.analytics-row-internal { opacity: 0.45; }
.link-button { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; opacity: 0.7; }
.link-button:hover { opacity: 1; }
/* Why a failure failed, inline in the feed. A failure row without a reason is
   a support ticket you cannot answer. */
.analytics-reason.is-unknown { background: var(--panel-3); color: var(--muted); font-weight: 600; }
.analytics-reason {
  margin-left: 6px;
  border-radius: 4px;
  padding: 1px 6px;
  background: #fdecee;
  color: #9c382b;
  font: 700 11px var(--mono);
}

.analytics-source { opacity: 0.55; font-weight: 500; }
.analytics-note { margin-top: 10px; font-size: 12px; opacity: 0.6; }
.analytics-section-title { margin: 24px 0 10px; font-size: 15px; font-weight: 600; opacity: 0.75; }
.analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.analytics-card, .analytics-panels > article, .analytics-recent { border: 1px solid #e2dcd6; border-radius: 8px; background: #fff; padding: 18px; }
.analytics-card { display: grid; gap: 6px; }
.analytics-card span { color: #7f7161; font-size: 12px; font-weight: 700; }
.analytics-card strong { color: #33291e; font: 800 28px var(--mono); }
.analytics-card small { min-height: 14px; color: #8f806e; font-size: 11px; }
.analytics-panels { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 14px; margin-bottom: 14px; }
@media (min-width: 901px) {
.analytics-panels.analytics-panels-usage { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.2fr); }
.analytics-panels.analytics-panels-usage > article:nth-child(1) { grid-column: 1 / 2; grid-row: 2; }
.analytics-panels.analytics-panels-usage > article:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
.analytics-panels.analytics-panels-usage > article:nth-child(3) { grid-column: 2 / 3; grid-row: 2; }
}
.analytics-panels h2, .analytics-recent h2 { margin: 0 0 14px; font-size: 16px; }
.analytics-panels .analytics-subheading { margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1efec; }
.analytics-table { overflow-x: auto; }
.analytics-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(4, minmax(60px, 1fr)); gap: 8px; border-bottom: 1px solid #f1efec; padding: 9px 4px; color: #6c6154; font: 12px var(--mono); }
.analytics-row.recent { grid-template-columns: minmax(130px, 1.1fr) minmax(80px, .6fr) minmax(150px, 1.2fr) minmax(240px, 1.6fr); }
.analytics-row.recent > span:last-child { white-space: nowrap; }
.analytics-row.shared-network { grid-template-columns: minmax(120px, 1.5fr) minmax(46px, .3fr) minmax(46px, .3fr) minmax(200px, 1.7fr); }
.analytics-row.shared-network > span:last-child { white-space: nowrap; }
.analytics-row.expandable { cursor: pointer; }
.analytics-row.expandable:hover { background: #faf7f2; }
.shared-network-detail { border-top: 1px solid #f1efec; margin-top: 8px; padding: 6px 8px 10px; }
.shared-network-detail-inner { display: grid; gap: 8px; }
.shared-network-detail-title { align-items: center; color: #3d3124; display: flex; font-weight: 800; justify-content: space-between; margin: 6px 0 2px; }
.analytics-row.shared-network-detail { grid-template-columns: minmax(150px, 2fr) minmax(70px, .6fr) minmax(70px, .6fr) minmax(50px, .4fr) minmax(150px, 1fr) minmax(150px, 1fr); }
.analytics-head { color: #3d3124; font-weight: 800; }
.analytics-time { display: block; margin-top: 3px; color: #a6998b; font-size: 10px; font-weight: 500; }
.analytics-recent { margin-bottom: 24px; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: repeat(2, 1fr); } .analytics-panels { grid-template-columns: 1fr; } }

/* Workspace appearance preferences. Default preserves the current lavender-gray theme. */
body[data-problem-theme="cyan"].problem-solving { background: #f3f7f9; color: #372e24; }
body[data-problem-theme="cyan"] .problem-workspace { background: #f3f7f9; color: #372e24; }
body[data-problem-theme="cyan"] .problem-side-nav, body[data-problem-theme="cyan"] .problem-rail, body[data-problem-theme="cyan"] .problem-topline, body[data-problem-theme="cyan"] .exam-builder { background: #fbfdfe; }
body[data-problem-theme="cyan"] .problem-side-nav, body[data-problem-theme="cyan"] .problem-topline, body[data-problem-theme="cyan"] .problem-stage, body[data-problem-theme="cyan"] .problem-title, body[data-problem-theme="cyan"] .problem-interaction, body[data-problem-theme="cyan"] .problem-controls, body[data-problem-theme="cyan"] .problem-queue, body[data-problem-theme="cyan"] .candidate-analysis { border-color: #e4ded7; }
body[data-problem-theme="cyan"] .problem-stage { background: #eef5f7; }
body[data-problem-theme="cyan"] .solve-nav-main button.active { background: #f1eeea; box-shadow: inset 3px 0 #264b59; }
body[data-problem-theme="cyan"] .solve-nav-main a:hover, body[data-problem-theme="cyan"] .solve-nav-main button:hover:not(.active), body[data-problem-theme="cyan"] .solve-nav-bottom a:hover, body[data-problem-theme="cyan"] .solve-nav-bottom button:hover, body[data-problem-theme="cyan"] .queue-heading:hover { background: #f5f3f0; }
body[data-problem-theme="cyan"] .problem-previous { background: #f5f3f0; }
body[data-problem-theme="cyan"] .problem-progress { background: #e2ddd7; } body[data-problem-theme="cyan"] .problem-progress i { background: #264b59; }
body[data-problem-theme="cyan"] .problem-submit { border-color: #1d3b46; background: #1d3b46; } body[data-problem-theme="cyan"] .problem-submit:hover:not(:disabled) { background: #305d6d; }
body[data-problem-theme="cyan"] .board-caption span:first-child { border-color: #1d3b46; background: #1d3b46; }
body[data-problem-theme="cyan"] .problem-b-choices { border-color: #e4ded7; } body[data-problem-theme="cyan"] .svg-candidate .candidate-option, body[data-problem-theme="cyan"] .answer-choice-row b { fill: #264b59; color: #264b59; } body[data-problem-theme="cyan"] .answer-choice-row.selected { border-color: #264b59; background: #eaf3f6; box-shadow: inset 0 -2px #264b59; }

body[data-problem-theme="gray"].problem-solving { background: #f5f4f2; color: #32291e; }
body[data-problem-theme="gray"] .problem-workspace { background: #f5f4f2; color: #32291e; }
body[data-problem-theme="gray"] .problem-side-nav, body[data-problem-theme="gray"] .problem-rail, body[data-problem-theme="gray"] .problem-topline, body[data-problem-theme="gray"] .exam-builder { background: #fbfbfa; }
body[data-problem-theme="gray"] .problem-side-nav, body[data-problem-theme="gray"] .problem-topline, body[data-problem-theme="gray"] .problem-stage, body[data-problem-theme="gray"] .problem-title, body[data-problem-theme="gray"] .problem-interaction, body[data-problem-theme="gray"] .problem-controls, body[data-problem-theme="gray"] .problem-queue, body[data-problem-theme="gray"] .candidate-analysis { border-color: #e1dcd6; }
body[data-problem-theme="gray"] .problem-stage { background: #f0edea; }
body[data-problem-theme="gray"] .solve-nav-main button.active { background: #efece8; box-shadow: inset 3px 0 #201913; }
body[data-problem-theme="gray"] .solve-nav-main a:hover, body[data-problem-theme="gray"] .solve-nav-main button:hover:not(.active), body[data-problem-theme="gray"] .solve-nav-bottom a:hover, body[data-problem-theme="gray"] .solve-nav-bottom button:hover, body[data-problem-theme="gray"] .queue-heading:hover { background: #f2efec; }
body[data-problem-theme="gray"] .problem-previous { background: #f2efec; }
body[data-problem-theme="gray"] .problem-progress { background: #ddd8d2; } body[data-problem-theme="gray"] .problem-progress i { background: #201913; }
body[data-problem-theme="gray"] .problem-submit { border-color: #201913; background: #201913; } body[data-problem-theme="gray"] .problem-submit:hover:not(:disabled) { background: #403325; }
body[data-problem-theme="gray"] .board-caption span:first-child { border-color: #201913; background: #201913; }
body[data-problem-theme="gray"] .problem-b-choices { border-color: #e1dcd6; } body[data-problem-theme="gray"] .svg-candidate .candidate-option, body[data-problem-theme="gray"] .answer-choice-row b { fill: #201913; color: #201913; } body[data-problem-theme="gray"] .answer-choice-row.selected { border-color: #201913; background: #f1eeeb; box-shadow: inset 0 -2px #201913; }

.settings-page { min-height: calc(100dvh - 94px); color: #f1e6d0; background: #edeae7; }
.theme-settings { max-width: 960px; margin: 18px auto; border: 1px solid #ccc4bb; background: #faf9f7; }
.theme-settings-head { display: flex; align-items: baseline; gap: 9px; padding: 12px 16px; border-bottom: 1px solid #dfdad4; }.theme-settings-head strong { font-size: 15px; }.theme-settings-head span { color: #897b6a; font: 11px var(--mono); letter-spacing: .08em; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #dfdad4; }.theme-choice { display: grid; gap: 10px; min-height: 185px; border: 0; padding: 16px; background: #faf9f7; color: #443728; text-align: left; cursor: pointer; }.theme-choice:hover { background: #f4f2ef; }.theme-choice.active { box-shadow: inset 0 3px #2e5462; background: #f4f2ef; }.theme-choice strong { font-size: 17px; }.theme-choice small { color: #867867; font-size: 12px; line-height: 1.5; }.theme-choice b { color: #255364; font-size: 12px; }.theme-swatches { display: flex; height: 38px; overflow: hidden; border: 1px solid #d7d1ca; border-radius: 3px; }.theme-swatches i { flex: 1; }
@media (max-width: 700px) { .theme-settings { margin: 10px; }.theme-choice-grid { grid-template-columns: 1fr; }.theme-choice { min-height: 130px; } }

.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  padding: 12px;
  max-width: 1250px;
  margin: 0 auto;
}

.study-feed {
  display: grid;
  gap: 0;
  border: 1px solid #ccc4bb;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f7f6f5;
}

.study-card {
  border-bottom: 1px solid #ded9d3;
  background: #f7f6f5;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.study-card:last-child {
  border-bottom: 0;
}

.study-card:hover {
  background: #f2efec;
  box-shadow: inset 3px 0 0 var(--accent);
}

.study-card:active {
  transform: translateY(0);
}

.study-card-link {
  display: grid;
  grid-template-columns: 40px 58px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 11px;
  min-height: 88px;
  padding: 8px 12px;
}

.study-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 34px),
    linear-gradient(145deg, #3c3023, #201913);
  border: 1px solid #918271;
  color: var(--accent-strong);
  font-weight: 800;
}

.study-thumbnail {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid #95672f;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(85, 53, 19, 0.34) 1px, transparent 1px),
    linear-gradient(0deg, rgba(85, 53, 19, 0.34) 1px, transparent 1px),
    linear-gradient(145deg, #e6b96f, #c9823c);
  background-size: calc(100% / 8) calc(100% / 8), calc(100% / 8) calc(100% / 8), auto;
  background-position: center;
  box-shadow: inset 0 0 10px rgba(77, 42, 15, 0.22);
  overflow: hidden;
}

.mini-stone {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mini-stone.black {
  background: radial-gradient(circle at 35% 30%, #626262, #080808 70%);
}

.mini-stone.white {
  background: radial-gradient(circle at 35% 30%, #fff, #d9d9d9 72%);
  border: 1px solid rgba(0, 0, 0, 0.16);
}

.mini-stone.last {
  outline: 1px solid #276981;
  outline-offset: 1px;
}

.study-content {
  min-width: 0;
}

.study-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.study-content h2 {
  margin: 0;
  color: #261f16;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  color: #706456;
  font-size: 12px;
}

.study-meta span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--faint);
}

.study-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  flex: none;
  max-width: 270px;
  overflow: hidden;
}

.study-excerpt {
  margin: 5px 0 0;
  color: #443d35;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  color: #7c6e5f;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.study-stats span {
  display: grid;
  gap: 1px;
}

.study-stats strong {
  color: #32281d;
  font-size: 14px;
}

.community-sidebar {
  display: grid;
  gap: 10px;
  align-self: start;
  position: sticky;
  top: 76px;
}

.sidebar-card {
  border: 1px solid #ccc4bb;
  background: #f7f6f4;
  border-radius: var(--radius);
  padding: 10px;
}

.sidebar-card h2 {
  margin: 0 0 10px;
  color: #2f261c;
  font-size: 13px;
}

.category-link {
  display: block;
  border-radius: 6px;
  padding: 6px 7px;
  color: #665b4e;
  font-size: 12px;
  transition: background 0.14s ease, color 0.14s ease;
}

.category-link:hover,
.category-link.active {
  background: #dae7ec;
  color: #1b414f;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #dfdad4;
  color: #665b4e;
  font-size: 12px;
}

.stat-row:first-of-type {
  border-top: 0;
}

.stat-row strong {
  color: #2f261c;
  font-variant-numeric: tabular-nums;
}

.empty-state {
  padding: 36px 14px;
  text-align: center;
  color: var(--muted);
}

.empty-state h2 {
  color: var(--text);
  margin: 0 0 8px;
}

.form-page,
.detail-page {
  padding: 14px;
}

.auth-page {
  display: grid;
  place-items: start center;
}

.auth-form,
.auth-prompt {
  width: min(100%, 420px);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px;
}

.auth-prompt {
  display: grid;
  gap: 10px;
}

.auth-prompt h2,
.auth-prompt p {
  margin: 0;
}

.auth-prompt p {
  color: var(--muted);
  line-height: 1.5;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-message {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
}

.form-message.success {
  color: var(--accent-strong);
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 11px;
  outline: none;
}

.field textarea {
  min-height: 270px;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36, 95, 115, 0.14);
}

.helper {
  color: var(--faint);
  font-size: 12px;
}

.side-note,
/* The post header, reduced to one line. Height is the scarce resource on this
   page: the board and its move controls have to fit above the fold. */
/* The one banner that is allowed to be loud: nothing else on the page matters
   until the temporary password is replaced. */
.must-change-password {
  margin-bottom: 12px;
  border: 1px solid #f2c5ca;
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  padding: 11px 13px;
  background: #fdecee;
  color: #6d3129;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

/* The share bar sits behind its own percentage: one glance gives the shape of
   the distribution, the number gives the exact value. */
.practice-bar { position: relative; display: block; padding: 2px 0; font-size: 11px; color: var(--muted); }
.practice-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  display: block; border-radius: 3px; background: #dfe9ea; min-width: 2px;
}
.practice-bar { z-index: 1; }

/* A challenge inside a forum thread. Live, never a copy: the thread is a
   pointer at /c/:token, which stays the one address anybody shares. */
.challenge-card {
  margin: 14px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.challenge-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.challenge-card-head strong { display: block; font-size: 15px; }
.challenge-card-head .button { margin-left: auto; }

.challenge-mine {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid #b3c7cd; border-radius: 7px; background: #eef4f5;
  padding: 8px 11px; font-size: 13px; font-weight: 600; color: var(--accent-strong);
}

.challenge-board { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.challenge-board li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 54px; gap: 10px;
  align-items: center; padding: 7px 4px; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.challenge-board li:first-child { border-top: 0; }
.challenge-board b { color: var(--faint); font: 700 12px var(--mono); }
/* The one row the reader is looking for. */
.challenge-board li.is-me { background: #eef4f5; border-radius: 6px; font-weight: 700; }
.challenge-board li.is-me b { color: var(--accent-strong); }
.challenge-board small { color: var(--faint); font: 12px var(--mono); text-align: right; }
.challenge-board-gap { color: var(--faint); justify-items: center; }
.challenge-board-empty { color: var(--muted); grid-template-columns: 1fr; }

/* ---- Admin console ------------------------------------------------------ */

/* Top navigation: four sections, one admin door, one avatar menu. */
.nav-sections { display: inline-flex; align-items: center; gap: 14px; }
/* Plain text links: the shared .nav-actions a rule boxes everything, which
   turned four sections into four buttons competing with the admin door. */
.nav-sections a {
  border: 0; border-radius: 0; background: none; padding: 0 0 2px;
  border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500;
}
.nav-sections a:hover { background: none; border-color: var(--line); transform: none; }
.nav-sections a.current { font-weight: 700; border-bottom-color: var(--accent); }

/* Deliberately not styled like a section link: it is a door, not a place. */
.nav-admin {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px;
  color: var(--accent); font-size: 13px; font-weight: 600;
}
.nav-admin svg { width: 14px; height: 14px; }
.nav-admin.current, .nav-admin:hover { border-color: var(--accent); background: var(--accent); color: #fbfaf5; }

.nav-account { position: relative; }
.nav-avatar {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 4px;
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 600;
}
.nav-avatar b {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fbfaf5;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.nav-avatar i { font-style: normal; color: var(--faint); font-size: 10px; }
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 148px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  box-shadow: 0 14px 34px rgba(32, 25, 19, 0.16); overflow: hidden;
}
.nav-menu[hidden] { display: none; }
.nav-menu a, .nav-menu-item {
  border: 0; background: none; padding: 9px 12px; color: var(--text);
  cursor: pointer; font: inherit; font-size: 13px; text-align: left;
}
.nav-menu a:hover, .nav-menu-item:hover { background: var(--panel-2); }

/* The shell: a sidebar that every admin page hangs off. */
.admin-shell { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-nav {
  position: sticky; top: 64px;
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 14px 12px;
}
.admin-nav-brand { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.admin-nav-brand svg { width: 15px; height: 15px; stroke: var(--accent); }
.admin-nav-group { display: flex; flex-direction: column; gap: 4px; }
.admin-nav-title { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--faint); }
.admin-nav-item { border-radius: 6px; padding: 6px 9px; color: var(--text); font-size: 12.5px; }
.admin-nav-item:hover { background: var(--panel); }
.admin-nav-item.current { background: var(--accent); color: #fbfaf5; font-weight: 700; }

.admin-body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.admin-head h1 { margin: 0; font-size: 22px; }
.admin-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.admin-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-search input {
  min-width: 220px; border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 10px; background: var(--panel); font-size: 12px;
}
.admin-filters { display: flex; gap: 6px; margin-left: auto; }
.admin-filter {
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px;
  background: var(--panel); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600;
}
.admin-filter.current { border-color: var(--accent-strong); background: var(--accent); color: #fbfaf5; }

.admin-table { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.admin-user-row {
  /* The action column is the widest on purpose: four buttons on one line beats
     four buttons wrapping onto two. */
  display: grid; grid-template-columns: 1.4fr .8fr .7fr .7fr .9fr 2.1fr; gap: 10px;
  align-items: center; padding: 10px 12px; border-top: 1px solid var(--line-soft);
}
.admin-user-row:first-child { border-top: 0; }
.admin-user-head { background: var(--panel-2); font: 700 10px var(--mono); letter-spacing: .1em; color: var(--faint); }
/* Suspended rows stay readable but visibly out of play. */
.admin-user-row.banned { background: #fbf2f1; }
.admin-user-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-user-name strong { font-size: 13px; }
.admin-user-name small, .admin-user-cell small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-cell { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.admin-tag { align-self: start; justify-self: start; border-radius: 4px; padding: 1px 7px; background: var(--panel-3); color: #6b5b41; font-size: 11px; font-weight: 700; }
.admin-tag.is-admin, .admin-tag.is-paid { background: #e6eef0; color: var(--accent-strong); }
.admin-user-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.admin-act {
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px;
  background: var(--panel); color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.admin-act:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.admin-act:disabled { opacity: .4; cursor: default; }
.admin-act.danger { color: var(--danger); }
.admin-act.danger:hover:not(:disabled) { border-color: var(--danger); }

/* Shown once, immediately after a reset, and never recoverable afterwards. */
.admin-temp-password {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed #97b3bb; border-radius: 8px; background: #eef4f5; padding: 11px 13px;
}
.admin-temp-password code { font: 700 17px var(--mono); letter-spacing: .05em; color: var(--accent-strong); }
.admin-temp-password span { color: var(--muted); font-size: 11px; }
.admin-temp-password button { margin-left: auto; }

.admin-sub-row {
  display: grid; grid-template-columns: 1.2fr .8fr .8fr .8fr auto; gap: 10px;
  align-items: center; padding: 9px 12px; border-top: 1px solid var(--line-soft); font-size: 12px;
}
.admin-sub-row:first-child { border-top: 0; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .admin-user-row { grid-template-columns: 1fr 1fr; }
  .admin-user-head { display: none; }
}

.post-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.post-bar-back {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.post-bar-back::before {
  content: "\2190";
  margin-right: 5px;
}

.post-bar-back:hover { color: var(--accent-strong); text-decoration: underline; }

.post-bar-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Destructive, so it stays reachable -- but it is not the reason anyone opened
   this page, so it does not get a filled button's weight. */
.post-bar-delete {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  color: var(--danger);
  cursor: pointer;
  font: inherit;
  opacity: .75;
}

.post-bar-delete:hover { opacity: 1; text-decoration: underline; }

/* Admin-only door into the 3D board experiment (forum/public/lab3d). It sits to
   the left of Delete and takes the auto margin, so Delete stays the rightmost
   thing on the bar. Nothing in production depends on this link. */
.post-bar-lab3d {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
}

.post-bar-lab3d::after {
  content: "\2197";
  margin-left: 4px;
}

.post-bar-lab3d:hover { color: var(--accent); text-decoration: underline; }

.post-bar-lab3d ~ .post-bar-delete { margin-left: 0; }

.post-card,
.reply-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
}

.side-note {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.side-note h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
}

.error {
  color: var(--danger);
  min-height: 20px;
  font-size: 13px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
}

.detail-layout.tsg-reader-layout {
  grid-template-columns: minmax(620px, 1fr) minmax(280px, 380px);
  align-items: start;
}

.tsg-reader-layout .preview-panel {
  order: 1;
}

.tsg-reader-layout .post-card {
  order: 2;
}

.post-card,
.reply-card {
  padding: 13px;
}

.post-card h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.28;
}

.body-text {
  color: #2d251b;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tsg-reader-layout .post-card {
  align-self: start;
}

.tsg-reader-layout .post-card .body-text {
  max-height: 18dvh;
  overflow: auto;
}

.tsg-document {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
}

.tsg-document-head {
  display: grid;
  gap: 3px;
}

.tsg-document-head h2 {
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
}

.tsg-document-head span,
.tsg-empty {
  color: var(--muted);
  font-size: 12px;
}

.tsg-analysis-summary,
.tsg-text-block,
.tsg-board-block,
.tsg-ai-block,
.tsg-unsupported {
  border: 1px solid var(--line-soft);
  background: #fffdfa;
  border-radius: 7px;
  padding: 10px;
}

.tsg-analysis-summary h3,
.tsg-text-block h3,
.tsg-board-block h3,
.tsg-ai-block h3 {
  align-items: baseline;
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
}

.tsg-ai-block h3 span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.analysis-metrics {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analysis-metrics div {
  background: #f7f3ea;
  border: 1px solid #e6dccb;
  border-radius: 6px;
  padding: 7px;
}

.analysis-metrics span,
.candidate-table span,
.mistake-list span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.analysis-metrics strong {
  color: var(--accent-strong);
  display: block;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.winrate-sparkline {
  background: #f7f3ea;
  border: 1px solid #e0d5c2;
  border-radius: 6px;
  height: 88px;
  margin-top: 8px;
  width: 100%;
}

.winrate-sparkline line {
  stroke: rgba(56, 40, 25, 0.18);
  stroke-dasharray: 4 5;
}

.winrate-sparkline polyline {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mistake-list,
.candidate-table {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.mistake-list div,
.candidate-table div {
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}

.mistake-list strong,
.candidate-table strong {
  display: block;
  font-size: 12px;
}

.tsg-block-list {
  display: grid;
  gap: 9px;
  max-height: 52dvh;
  overflow: auto;
  padding-right: 3px;
}

.tsg-heading {
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  margin: 4px 0 0;
  padding-bottom: 5px;
}

.tsg-text-block p,
.tsg-board-block p,
.tsg-ai-block p {
  color: #3c3023;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 7px;
}

.tsg-text-block p:last-child,
.tsg-board-block p:last-child,
.tsg-ai-block p:last-child {
  margin-bottom: 0;
}

.tsg-mini-board .go-board-svg {
  margin: 0 auto;
  max-height: 260px;
  max-width: 260px;
}

.pv-line {
  color: var(--accent-strong) !important;
  font-family: var(--mono);
  font-size: 12px !important;
  overflow-wrap: anywhere;
}

.tsg-unsupported {
  color: var(--muted);
  font-size: 12px;
}

.preview-panel {
  border: 1px solid var(--line);
  background: #fffdfa;
  border-radius: var(--radius);
  padding: 12px;
  align-self: start;
  position: sticky;
  top: 76px;
}

.preview-panel h3,
.replies h2 {
  margin: 0 0 10px;
  font-size: 14px;
}

.tsg-reader-layout .preview-panel {
  position: static;
  padding: 14px;
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.board-header h3 {
  margin: 0;
}

/* The desktop toolbar's 选点 switch, in this page's palette: pressed means the
   candidates are on the board. Lives in the move-control row with the other
   board buttons -- one place to look for anything that acts on the board. */
.board-candidate-toggle {
  /* Sits at the end of the move-control row, pushed away from the nav arrows so
     it never gets hit while stepping through a game. */
  /* Same height and border as the nav arrows it now sits beside. */
  margin-left: 10px;
  height: 32px;
  border: 1px solid #cfc0a8;
  border-radius: 6px;
  padding: 0 12px;
  background: #f7f3ea;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.board-candidate-toggle:hover { border-color: var(--accent); background: #f1e6d0; color: var(--text); }

.board-candidate-toggle.active {
  border-color: var(--accent-strong);
  background: var(--accent);
  color: #fbfaf5;
  box-shadow: inset 0 1px 2px rgba(2, 30, 38, 0.35);
}

.board-move-readout {
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.board-wrap {
  display: grid;
  gap: 10px;
}

.go-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid var(--wood-dark);
  background:
    linear-gradient(90deg, rgba(75, 43, 15, 0.46) 1px, transparent 1px),
    linear-gradient(0deg, rgba(75, 43, 15, 0.46) 1px, transparent 1px),
    linear-gradient(145deg, #e3ae67, #b97532);
  background-size: calc(100% / 18) calc(100% / 18), calc(100% / 18) calc(100% / 18), auto;
  background-position: center;
  box-shadow: inset 0 0 18px rgba(81, 42, 12, 0.35);
}

.go-board-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Sits on the page like a physical board: warm rim light, grounded shadow. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 0 26px rgba(96, 52, 14, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 30px rgba(58, 40, 18, 0.22);
}

.tsg-reader-layout .go-board-svg {
  max-height: calc(100dvh - 260px);
  min-height: 540px;
}

.board-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Volume, beside the sound toggle in a board panel. Narrow on purpose: the
   row is already crowded and this is a nudge control, not a mixer. */
.board-volume-control {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  margin-left: 2px;
}

.board-volume-control input[type="range"] {
  accent-color: var(--accent-strong);
  cursor: pointer;
  width: 76px;
  height: 20px;
}

.board-volume-control input[type="range"]:disabled {
  cursor: default;
  opacity: .35;
}

.board-volume-control.muted {
  opacity: .5;
}

.board-controls .board-nav-button {
  border: 1px solid #cfc0a8;
  background: #f7f3ea;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  height: 32px;
  width: 42px;
  padding: 5px;
}

.board-controls .board-nav-button svg { width: 22px; height: 22px; fill: currentColor; }
.board-controls .board-nav-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: #f1e6d0;
}
.board-controls .board-nav-button:disabled { opacity: .35; cursor: default; }

.stone {
  position: absolute;
  width: 4.7%;
  height: 4.7%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.stone.black {
  background: radial-gradient(circle at 35% 30%, #555, #050505 65%);
}

.stone.white {
  background: radial-gradient(circle at 35% 30%, #fff, #c7c7c7 70%);
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.stone.last {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.preview-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.preview-warning {
  color: var(--danger);
}

.download-link {
  display: inline-flex;
  margin-top: 9px;
  color: var(--accent-strong);
  font-size: 13px;
}

.replies {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.reply-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
}

.reply-form {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.inline-preview {
  min-width: 0;
}

.loading {
  padding: 30px 14px;
  color: var(--muted);
}

@media (max-width: 820px) {
  .app-shell {
    width: min(100vw - 16px, 1180px);
    padding-top: 8px;
  }

  .topbar,
  .page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-actions {
    width: 100%;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .language-picker {
    flex: 0 0 auto;
  }

  .nav-actions a {
    flex: 1;
    text-align: center;
  }

  .form-grid,
  .reply-card {
    grid-template-columns: 1fr;
  }

  .detail-layout,
  .detail-layout.tsg-reader-layout {
    grid-template-columns: 1fr;
  }

  .preview-panel {
    position: static;
  }

  .tsg-reader-layout .go-board-svg {
    min-height: auto;
    max-height: none;
  }

  .community-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .community-sidebar {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .study-card-link {
    grid-template-columns: 36px 52px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 10px;
  }

  .study-avatar {
    width: 36px;
    height: 36px;
  }

  .study-thumbnail {
    width: 52px;
    height: 52px;
  }

  .study-stats {
    grid-column: 3;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .community-sidebar {
    display: none;
  }

  .study-card-link {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .study-thumbnail {
    display: none;
  }

  .study-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .study-content h2 {
    font-size: 18px;
    white-space: normal;
  }
}

/* 定式库：沿用答题页的训练工作台视觉。 */
.dingshi-library.problem-library { width: min(1280px, calc(100% - 24px)); margin: 12px auto; padding: 0; }
.dingshi-library-grid { grid-template-columns: minmax(0, 1fr) 310px; }
.dingshi-study-list { display: grid; }
.dingshi-entry { position: relative; display: grid; grid-template-columns: 34px 82px minmax(180px, 1fr) 58px 68px 22px; align-items: center; min-height: 102px; border-bottom: 1px solid #ded9d3; padding: 8px 12px; background: #f9f8f7; color: #372c20; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.dingshi-entry::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #685845; }
.dingshi-entry:hover { z-index: 1; background: #ede9e5; transform: translateX(3px); }
.dingshi-entry:last-child { border-bottom: 0; }
.dingshi-entry-index { color: #988a79; font: 11px var(--mono); }
.dingshi-entry-board { display: block; overflow: hidden; width: 68px; height: 68px; border: 1px solid #b8a078; background: #d19a55; }
.dingshi-entry-board .go-board-svg { display: block; width: 100%; height: 100%; }
.dingshi-entry-copy { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 0 14px; }
.dingshi-entry-copy strong { overflow: hidden; color: #33291e; font-size: 18px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.dingshi-entry-copy small { display: -webkit-box; overflow: hidden; color: #7f7161; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dingshi-entry-copy i, .dingshi-entry-time { color: #9a8c7c; font: normal 12px var(--mono); }
.dingshi-entry-count { color: #392e22; font: 700 17px var(--mono); text-align: right; }
.dingshi-entry-count i { margin-left: 2px; color: #8e7f6d; font: normal 12px var(--sans); }
.dingshi-entry-time { text-align: right; }
.dingshi-empty { display: grid; gap: 6px; padding: 42px 18px; color: #7f7161; text-align: center; }
.dingshi-empty strong { color: #33291e; font-size: 17px; }
.dingshi-empty .button { justify-self: center; margin-top: 10px; }
.dingshi-publish-link { margin-left: 6px; white-space: nowrap; }
.dingshi-side-copy { padding: 13px 12px; color: #453728; }
.dingshi-side-copy p { margin: 5px 0 0; color: #7f7161; font-size: 12px; line-height: 1.55; }
.dingshi-side-copy .button { display: inline-flex; margin-top: 13px; }
.dingshi-publish-page .library-head { align-items: flex-start; }
.dingshi-publish-grid { grid-template-columns: minmax(0, 1fr) 310px; align-items: start; }
.dingshi-publish-form { display: grid; gap: 18px; padding: 22px; }
.dingshi-publish-form .panel-heading { margin: -22px -22px 2px; padding: 14px 18px; }
.dingshi-publish-form .field { display: grid; gap: 7px; color: #463829; font-size: 12px; font-weight: 700; }
.dingshi-publish-form input, .dingshi-publish-form textarea { width: 100%; border: 1px solid #d5cfc8; border-radius: 4px; box-sizing: border-box; padding: 11px 12px; background: #fff; color: #362c20; font: 13px var(--sans); }
.dingshi-publish-form textarea { min-height: 142px; resize: vertical; line-height: 1.55; }
.dingshi-publish-form input:focus, .dingshi-publish-form textarea:focus { outline: 2px solid #c0b2a1; outline-offset: 1px; border-color: #826e57; }
.dingshi-publish-actions { display: flex; align-items: center; gap: 9px; }
.dingshi-publish-auth { max-width: 610px; margin: 32px auto; }
.dingshi-forum-badge { display: inline-block; margin-top: 10px; color: #857766; font: 11px var(--mono); }
.dingshi-service-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; min-height: 44px; border-bottom: 1px solid #dfdad5; padding: 6px 10px; color: #3d3124; }
.dingshi-service-row:last-child { border-bottom: 0; }
.dingshi-service-row span { font-size: 12px; font-weight: 700; }
.dingshi-service-row small { color: #8f806e; font-size: 11px; }
.problem-solving .dingshi-solve-shell { grid-template-rows: 76px minmax(0, 1fr); }
.problem-solving .dingshi-solve-shell .problem-layout { grid-row: 2; }
.dingshi-top-meta { display: flex; gap: 7px; }
.dingshi-top-meta span { border: 1px solid #dfdad4; border-radius: 4px; padding: 6px 9px; background: #fff; color: #807263; font: 11px var(--mono); }
.problem-solving .dingshi-board-stage { display: flex; flex-direction: column; justify-content: flex-start; padding: 0; border: 0; border-right: 1px solid #e7e3de; border-radius: 0; background: #f4f8fa; }
.problem-solving .dingshi-board-stage .problem-board { flex: 0 0 auto; width: min(82vh, calc(100vw - 620px)); padding: 12px; }
.problem-solving .dingshi-board-stage .dingshi-move-controls { flex: 0 0 auto; flex-wrap: wrap; gap: 7px; margin: 0 auto; padding: 2px 12px 14px; width: min(82vh, calc(100vw - 620px)); }
.problem-solving .dingshi-board-stage .dingshi-move-controls .board-nav-button { width: 44px; height: 40px; border-color: #cbc4bb; border-radius: 7px; background: #f9fcfd; color: #312920; }
.problem-solving .dingshi-board-stage .dingshi-move-controls .board-nav-button svg { width: 26px; height: 26px; }
.problem-solving .dingshi-board-stage .dingshi-move-controls .board-nav-button:hover:not(:disabled) { border-color: #a39688; background: #f4f2ef; }
.problem-solving .dingshi-board-stage .dingshi-move-controls > .board-controls-readout { flex: 1 0 100%; color: #887968; text-align: center; font: 12px var(--mono); }
.problem-solving .dingshi-board-stage .dingshi-comments { width: min(82vh, calc(100vw - 620px)); margin: 6px auto 28px; border-top: 1px solid #e3ded9; padding: 20px 12px 0; color: #413426; }
.dingshi-comments-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dingshi-comments-heading strong { font-size: 16px; }
.dingshi-comments-heading span { color: #918271; font: 12px var(--mono); }
.dingshi-comment-list { display: grid; gap: 0; border-top: 1px solid #e7e3df; }
.dingshi-comment { padding: 13px 0; border-bottom: 1px solid #e7e3df; }
.dingshi-comment > div { display: flex; align-items: baseline; gap: 9px; }
.dingshi-comment strong { font-size: 13px; }
.dingshi-comment time { color: #988a7a; font: 12px var(--mono); }
.dingshi-comment p { margin: 7px 0 0; color: #5c5246; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.dingshi-comments-empty { margin: 0; padding: 14px 0; color: #988a7a; font-size: 13px; }
.dingshi-comment-form { display: grid; gap: 8px; margin-top: 16px; }
.dingshi-comment-form label { color: #6e6254; font-size: 12px; }
.dingshi-comment-form textarea { min-height: 88px; resize: vertical; border: 1px solid #d6cfc8; border-radius: 6px; background: #fff; padding: 9px 10px; color: #3e3224; font: 13px/1.5 var(--sans); }
.dingshi-comment-form textarea:focus { outline: 2px solid rgba(66, 133, 156, .25); border-color: #88735a; }
.dingshi-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dingshi-comment-form .button { min-width: 92px; }
.dingshi-comment-auth { margin-top: 16px; padding: 12px; border: 1px dashed #d6cfc8; border-radius: 6px; color: #7c6f60; font-size: 12px; }
.dingshi-comment-auth a { color: #22637a; font-weight: 700; }
.dingshi-variation-strip button { border: 1px solid #dcd7d1; border-radius: 4px; padding: 8px 11px; background: #fff; color: #584f44; cursor: pointer; font: 700 12px var(--mono); }
.dingshi-variation-strip button:hover { border-color: #807262; background: #f6f4f2; }
.problem-solving .dingshi-analysis-rail { display: flex; gap: 0; overflow-y: auto; background: #fffdfa; }
.problem-solving .dingshi-analysis-rail > section, .problem-solving .dingshi-analysis-rail > nav { border: 0; border-bottom: 1px solid #e7e3de; border-radius: 0; background: transparent; }
.problem-solving .dingshi-title { padding: 24px 32px 20px; }
.problem-solving .dingshi-title p { margin: 12px 0 0; color: #887968; font-size: 12px; line-height: 1.6; }
.dingshi-evaluation { padding: 20px 32px; }
.dingshi-evaluation > span { color: #9f9283; font: 800 11px var(--mono); letter-spacing: .08em; }
.dingshi-evaluation > strong { display: block; margin-top: 7px; color: #201913; font-size: 25px; }
.dingshi-evaluation > div { display: flex; gap: 16px; margin-top: 7px; color: #887968; font: 12px var(--mono); }
.dingshi-variation-strip { display: block; margin: 0; padding: 0; }
.dingshi-variation-strip > div:last-child { display: flex; flex-wrap: wrap; gap: 5px; max-height: 168px; overflow-y: auto; padding: 12px 16px 16px; }
.dingshi-variation-strip button { min-width: 35px; padding: 7px 8px; }
.dingshi-variation-strip button.active { border-color: #201913; background: #201913; color: #fff; }
.dingshi-candidates { padding: 0; }
.dingshi-candidate-content { padding: 12px 16px 18px; }
.dingshi-candidate-content > p { margin: 0; color: #887968; font-size: 12px; line-height: 1.55; }
.dingshi-candidate-content .candidate-table { margin: 0; }
.dingshi-candidates .panel-heading { align-items: center; }
.dingshi-display-toggle { display: flex; gap: 4px; }
.dingshi-display-toggle button { border: 1px solid #d9d3cc; border-radius: 4px; padding: 5px 8px; background: #fff; color: #7e7061; cursor: pointer; font: 800 12px var(--mono); }
.dingshi-display-toggle button.active { border-color: #201913; background: #201913; color: #fff; }
.dingshi-candidate-table { display: grid; gap: 0; }
.dingshi-candidate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 9px; width: 100%; border: 0; border-bottom: 1px solid #e7e3de; padding: 10px 8px; background: transparent; color: #433627; cursor: pointer; text-align: left; }
.dingshi-candidate-row:last-child { border-bottom: 0; }
.dingshi-candidate-row:hover, .dingshi-candidate-row.focused { background: #f4f2ef; box-shadow: inset 3px 0 #447688; }
.dingshi-candidate-row strong { font: 800 13px var(--mono); }
.dingshi-candidate-row strong b { color: #b6434b; }
.dingshi-candidate-row > span { align-self: center; color: #7f7161; font: 700 12px var(--mono); white-space: nowrap; }
.dingshi-candidate-row small { grid-column: 1 / -1; overflow: hidden; color: #ada193; font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .dingshi-library-grid, .dingshi-publish-grid { grid-template-columns: 1fr; }
  .dingshi-entry { grid-template-columns: 30px 72px minmax(150px, 1fr) 54px 22px; }
  .dingshi-entry-time { display: none; }
}

@media (max-width: 760px) {
  .dingshi-entry { grid-template-columns: 25px 58px minmax(0, 1fr) 44px 18px; min-height: 82px; padding-inline: 8px; }
  .dingshi-entry-board { width: 52px; height: 52px; }
  .dingshi-entry-copy small, .dingshi-entry-copy i { display: none; }
  .problem-solving .dingshi-board-stage .problem-board { width: min(92vw, 620px); }
  .problem-solving .dingshi-board-stage .dingshi-comments { width: min(92vw, 620px); }
  .library-summary .dingshi-publish-link { width: 100%; margin: 5px 0 0; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Practice workspace: session navigator, shortcut hints, accuracy trend.
   --------------------------------------------------------------------------- */

.session-navigator {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 28px 14px;
}

.navigator-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 9px;
}

.navigator-head strong { font-size: 13px; }
.navigator-head span { color: var(--muted); font: 11px var(--mono); letter-spacing: .06em; }

.navigator-jump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.navigator-jump input {
  width: 76px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 7px;
  background: #fff;
  color: var(--text);
  font: 700 12px var(--mono);
}

.navigator-jump input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Tier one: one button per range of problems, so a 50,000-problem bank still
   renders a bounded number of controls. */
.nav-chunks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 5px;
}

.nav-chunk {
  position: relative;
  display: grid;
  gap: 2px;
  overflow: hidden;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 7px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.nav-chunk b { font: 700 12px var(--mono); }
.nav-chunk small { color: var(--muted); font: 10px var(--mono); }

/* Fill bar showing how much of the range is answered. */
.nav-chunk i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
}

.nav-chunk:hover { border-color: var(--accent); }
.nav-chunk.is-open { border-color: var(--accent); background: var(--accent-soft); }
.nav-chunk.has-current { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-chunk.correct { border-color: #6f9a86; background: #eef5f2; }
.nav-chunk.correct i { background: #4a7d69; }
.nav-chunk.wrong i { background: #b05a49; }
.nav-chunk.partial i { background: #c9962f; }

.nav-grid { margin-top: 8px; }

.navigator-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 9px;
  color: var(--muted);
  font: 11px var(--mono);
}

.navigator-pager button {
  min-width: 34px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.navigator-pager button:hover:not(:disabled) { border-color: var(--accent); }
.navigator-pager button:disabled { opacity: .38; cursor: default; }

/* Auto-fill keeps a 10-question drill and a 200-question bank both readable. */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 5px;
  max-height: 168px;
  overflow-y: auto;
}

.nav-cell {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font: 700 12px var(--mono);
  cursor: pointer;
  transition: transform .1s ease, border-color .12s ease;
}

.nav-cell:hover { transform: translateY(-1px); border-color: var(--accent); }
.nav-cell.correct { border-color: #6f9a86; background: #e6f0ec; color: #1f5648; }
.nav-cell.partial { border-color: #d8b36c; background: #fdf4e3; color: #7d5a14; }
.nav-cell.wrong { border-color: #cc9d92; background: #fbeeea; color: #8d3527; }
.nav-cell.is-current { outline: 2px solid var(--accent); outline-offset: 1px; }

.navigator-legend {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}

.navigator-legend span { display: inline-flex; align-items: center; gap: 5px; }
.navigator-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.navigator-legend .correct::before { border-color: #6f9a86; background: #e6f0ec; }
.navigator-legend .partial::before { border-color: #d8b36c; background: #fdf4e3; }
.navigator-legend .wrong::before { border-color: #cc9d92; background: #fbeeea; }
.navigator-legend .todo::before { background: var(--panel); }

.shortcut-hint {
  color: var(--faint);
  font: 11px var(--mono) !important;
  letter-spacing: .02em;
}

.favorite-toggle.active {
  border-color: var(--wood-dark);
  background: #fdf3e2;
  color: #7d5a14;
}

.trend-panel {
  margin: 12px 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.trend-panel .winrate-sparkline {
  height: 96px;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.trend-foot {
  display: flex;
  justify-content: space-between;
  padding: 0 12px 10px;
  color: var(--muted);
  font: 11px var(--mono);
}

@media (max-width: 760px) {
  .session-navigator { padding-inline: 14px; }
  .shortcut-hint { display: none; }
}

/* Destructive admin action — visually separated from the safe ones. */
.button.danger {
  border-color: #c9a79e;
  background: #fbeeea;
  color: var(--danger);
}

.button.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: #f7e2dc;
}

/* Analytics range controls and event pager. */
.analytics-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.analytics-ranges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.analytics-range-label { color: var(--muted); font: 700 11px var(--mono); letter-spacing: .08em; }
.analytics-ranges label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.analytics-ranges input[type="date"] {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: var(--text);
  font: 12px var(--mono);
}
.analytics-timezone select {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: var(--text);
  font: 12px var(--mono);
  max-width: 180px;
}

/* States plainly what is stored, so a narrow window is never mistaken for lost data. */
.analytics-stored { margin: 0; color: var(--muted); font: 12px var(--mono); }
.analytics-stored small { display: block; margin-top: 3px; font-family: var(--sans); }

.analytics-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font: 12px var(--mono);
}

.analytics-pager select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: 12px var(--mono);
}

/* ---------------------------------------------------------------------------
   Challenge admin: link list and per-challenge participant detail.
   --------------------------------------------------------------------------- */

/* The list used the exam-result grid, whose narrow first column let the date
   and the title overlap once titles got long. Rows are their own layout now. */
.challenge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.challenge-row:last-child { border-bottom: 0; }
.challenge-row-main { display: grid; gap: 3px; min-width: 240px; flex: 1; }
.challenge-row-main strong { font-size: 15px; }
.challenge-row-main small { color: var(--muted); font-size: 12px; }
.challenge-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* A page title, not a landing-page hero. */
.library-head-compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.library-head-compact h1 { font-size: clamp(20px, 2.2vw, 26px); }

.challenge-hardest {
  margin: 12px 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: var(--panel);
  font-size: 13px;
}

/* Correct-rate per question. Colour carries the signal; the number confirms it. */
.challenge-question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  padding: 12px;
}

.question-cell {
  display: grid;
  gap: 1px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  text-align: center;
}

.question-cell b { font: 700 12px var(--mono); color: var(--muted); }
.question-cell span { font: 800 15px var(--mono); }
.question-cell small { color: var(--muted); font: 11px var(--mono); }
.question-cell.easy { border-color: #6f9a86; background: #eef5f2; }
.question-cell.medium { border-color: #d8b36c; background: #fdf6e8; }
.question-cell.hard { border-color: #cc9d92; background: #fbeeea; }
.question-cell.unseen { opacity: .55; }

.challenge-attempt {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 76px minmax(120px, 1fr) 68px minmax(110px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.challenge-attempt:last-child { border-bottom: 0; }
.challenge-attempt-head { color: var(--muted); font: 700 11px var(--mono); letter-spacing: .06em; }
.challenge-attempt b { font: 800 14px var(--mono); }
.challenge-attempt small { color: var(--muted); font: 12px var(--mono); }
.attempt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attempt-name i { color: var(--accent); font: 600 11px var(--sans); font-style: normal; }

/* One square per question, in link order. */
.attempt-marks { display: flex; gap: 3px; }
.attempt-marks .mark { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); background: var(--panel); }
.attempt-marks .mark.correct { border-color: #4a7d69; background: #6f9a86; }
.attempt-marks .mark.partial { border-color: #c9962f; background: #e5c477; }
.attempt-marks .mark.wrong { border-color: #a04737; background: #cc9d92; }

@media (max-width: 760px) {
  .challenge-attempt { grid-template-columns: 1fr auto; row-gap: 4px; }
  .challenge-attempt .attempt-marks { grid-column: 1 / -1; }
  .challenge-attempt-head { display: none; }
}

/* Serial number inside the per-question grid — the stable public id of a problem. */
.question-cell em { color: var(--accent); font: 600 10px var(--mono); font-style: normal; }

/* Time-limit picker on the challenge creation form. Three exclusive modes; the
   seconds row only exists once a mode that needs it is chosen. */
.challenge-timer { display: grid; gap: 8px; }
.challenge-timer .timer-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-timer .timer-modes .button { flex: 1 1 auto; }
.challenge-timer .timer-seconds { display: flex; align-items: center; gap: 10px; }
.challenge-timer .timer-seconds select { flex: 0 0 auto; }
.challenge-timer .helper { line-height: 1.55; }

/* A form message that reports something went quietly wrong, as opposed to the
   usual confirmation. */
#challengeMessage.is-warning { color: var(--danger, #9c382b); font-weight: 600; }

/* Problem review ---------------------------------------------------------- */
.problem-status {
  font-weight: 700;
}

.problem-status-pending_review { color: #b3781f; }
.problem-status-published { color: #256b3c; }
.problem-status-rejected { color: #a62525; }
.problem-status-archived,
.problem-status-draft { color: #6b7280; }

.problem-review-filter {
  align-items: center;
  display: flex;
  gap: 8px;
}

.challenge-row-main input[data-review-note] {
  margin-top: 6px;
  max-width: 420px;
  width: 100%;
}

/* Moderation controls ------------------------------------------------------ */
.page-head-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.link-button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.link-button.danger {
  color: #a62525;
}

/* The board panel is one column of the reader grid, and the 3D board fills it.
   Width is always 100% of that column: the canvas never has a pixel width of its
   own, which is what stopped it escaping the frame. Making the board BIGGER is
   therefore a job for the grid, below. */
.board-dynamic {
  position: relative;
}

.board-3d-canvas {
  border-radius: 10px;
  display: block;
  max-width: 100%;
  touch-action: none;
  width: 100%;
  /* DEFAULT: square, exactly the box the SVG board occupies -- switching 2D/3D
     must not resize the panel. */
  aspect-ratio: 1;
}

/* DRAGGED: the height is frozen at whatever it was when the drag started, and
   the aspect ratio is dropped so width can move on its own. Widening therefore
   never pushes the controls below it down the page, and going back to the
   natural column width restores the square. */
.board-framed .board-3d-canvas {
  aspect-ratio: auto;
  height: var(--board-3d-height, min(58dvh, 560px));
}

/* Dragged frame width. The variable is set on the LAYOUT, so the grid column
   grows and the post column gives up the space -- the whole display area gets
   bigger, which is what dragging right is supposed to mean. min() with 100% is
   the belt and braces: even a stale stored value cannot overflow the page. */
.detail-layout.tsg-reader-layout.board-framed {
  grid-template-columns: min(var(--board-frame, 620px), 100%) minmax(0, 1fr);
}

/* No height rule for a dragged frame, on purpose: widening must NEVER change the
   height, or the controls under the board slide down the page as you drag. */

/* Right-edge handle: drag to resize the whole display area, double-click to give
   it back to the layout. */
.board-3d-resize {
  bottom: 0;
  cursor: ew-resize;
  position: absolute;
  right: -7px;
  top: 0;
  touch-action: none;
  user-select: none;
  width: 14px;
}

.board-3d-resize::after {
  background: var(--line);
  border-radius: 2px;
  content: "";
  height: 48px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
}

.board-3d-resize:hover::after {
  background: var(--accent);
}

/* Wide layout: the board panel takes the whole page and the post text sits
   underneath it. This is how the board gets more WIDTH -- the grid changes, so
   nothing has to overflow anything. */
.detail-layout.board-wide-layout,
.detail-layout.tsg-reader-layout.board-wide-layout,
.detail-layout.tsg-reader-layout.board-framed.board-wide-layout {
  grid-template-columns: minmax(0, 1fr);
}

.detail-layout.board-wide-layout .preview-panel,
.detail-layout.board-wide-layout .post-card {
  max-width: 100%;
}

/* In wide layout the board is limited by HEIGHT rather than width: a board
   taller than the viewport is worse than a smaller one. */
.detail-layout.board-wide-layout .board-3d-canvas {
  /* Wide mode gives the board the full page WIDTH. The square aspect-ratio must
     therefore be dropped and the height pinned, or a full-width canvas becomes a
     full-width-TALL canvas and every control under it falls off the screen. */
  aspect-ratio: auto;
  height: min(var(--board-3d-wide-height), var(--board-3d-wide-max));
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

/* A frozen drag height must not win over the wide height, or wide mode inherits
   whatever the last drag left behind. */
.detail-layout.board-wide-layout.board-framed .board-3d-canvas {
  height: min(var(--board-3d-wide-height), var(--board-3d-wide-max));
}