/* 宣纸 · 青蓝 — user requested a complete palette replacement.
   Visual source: 设计/生图方案/作弊象棋-宣纸青蓝-整站首页-v1.png.
   Structure, typography, functionality and input behavior are unchanged. */
:root {
  --c-canvas: #f4f2eb;
  --c-shell: #fbfaf6;
  --c-surface: #fffefa;
  --c-surface-low: #f7f7f1;
  --c-surface-high: #eef3f3;
  --c-field: #ffffff;
  --c-text: #243f49;
  --c-secondary: #455f69;
  --c-muted: #536c76;
  --c-bronze: #cbd4d3;
  --c-divider: #d9ded8;
  --c-outline: #7e959e;
  --c-accent: #315e6c;
  --c-accent-hover: #244c5a;
  --c-accent-pressed: #193d4c;
  --c-on-accent: #ffffff;
  --c-selected: #e2edef;
  --c-link: #315e6c;
  --c-red: #ad5143;
  --c-success: #497b66;
  --c-error: #a64639;
  /* Compatibility names retained for the shared board controller. */
  --c-gold: var(--c-accent);
  --c-gold-mid: var(--c-accent);
  --c-gold-shadow: var(--c-accent-hover);
  --c-on-gold: var(--c-on-accent);
  --paper: var(--c-canvas);
  --white: var(--c-surface);
  --ink: var(--c-text);
  --body: var(--c-secondary);
  --muted: var(--c-muted);
  --line: var(--c-divider);
  --green: var(--c-accent);
  --green-dark: var(--c-accent-hover);
  --sage: var(--c-selected);
  --gold: var(--c-accent);
  --red: var(--c-red);
  color-scheme: light;
}
body {
  background: var(--c-canvas);
  color: var(--c-text);
}
::selection {
  background: #c7dde3;
  color: #1f414e;
}
.site-header {
  background: var(--c-shell);
  border-color: var(--c-divider);
}
.site-header:before {
  background-image: url("/assets/porcelain-header.webp");
  opacity: 0.7;
  background-position: 60% 50%;
}
.brand-seal {
  background: #fffcf6;
  color: var(--c-red);
  border-color: var(--c-red);
  box-shadow:
    inset 0 0 0 3px #fffaf3,
    inset 0 0 0 4px #b75c4c7a;
}
.brand small {
  border-color: var(--c-divider);
}
.portal-avatar {
  background: #d7e4e7;
  color: var(--c-accent);
}
.connection,
.portal-user {
  color: var(--c-secondary);
}
.sidebar {
  background: var(--c-shell);
  border-color: var(--c-divider);
}
.sidebar:after {
  background-image: url("/assets/porcelain-mountains.webp");
  opacity: 0.55;
}
.sidebar button {
  color: var(--c-secondary);
}
.sidebar button:hover {
  background: #edf2f2;
  color: var(--c-accent);
}
.sidebar button.active {
  background: #dce9ec;
  color: var(--c-accent);
  box-shadow: inset 2px 0 var(--c-accent);
}
.sidebar button.active svg {
  color: var(--c-accent);
}
.surface {
  background: var(--c-surface);
  border-color: var(--c-divider);
  box-shadow: 0 2px 5px #28414b07;
}
.button.primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
  box-shadow:
    inset 0 1px #ffffff17,
    0 2px 4px #1d414a12;
}
.button.primary:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
  border-color: var(--c-accent-hover);
  box-shadow: 0 3px 7px #1d414a19;
}
.button.primary:active {
  background: var(--c-accent-pressed);
  box-shadow: inset 0 1px 3px #0f2d3628;
}
.button.secondary {
  background: #ffffff3d;
  color: var(--c-accent);
  border-color: var(--c-outline);
}
.button.secondary:hover {
  background: #e6eff1;
  color: var(--c-accent-hover);
  border-color: var(--c-accent);
}
.button.secondary:active {
  background: #d6e6e9;
}
.text-link {
  color: var(--c-accent);
}
.text-link:hover {
  color: var(--c-accent-pressed);
}
.hero-surface {
  background: #fffdf8;
  border-color: var(--c-divider);
}
.hero-art {
  content: url("/assets/chess-porcelain.jpg");
  opacity: 1;
  filter: saturate(0.88) brightness(1.04);
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
}
.hero-surface:after {
  background: linear-gradient(
    90deg,
    #fffdf8 0%,
    #fffdf8 30%,
    #fffdf86b 58%,
    transparent 88%
  );
}
.hero-link {
  background: #fffdf5e6;
  color: var(--c-accent);
}
.chip {
  background: #eaf0f1bf;
  color: var(--c-secondary);
  border-color: #bbcbd0;
}
.daily-surface:before {
  background-image: url("/assets/porcelain-mountains.webp");
  opacity: 0.55;
}
.pill-group button {
  background: #f8faf7;
  color: var(--c-secondary);
  border-color: #9dafb5;
}
.pill-group button:hover {
  background: var(--c-selected);
  border-color: var(--c-accent);
}
.pill-group button.active {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}
.theme-tile {
  background: var(--c-surface);
  border-color: var(--c-divider);
  box-shadow: 0 2px 4px #243c4406;
}
.theme-tile:hover {
  background: #f0f6f6;
  border-color: #8ba8b2;
}
.theme-preview {
  background: #e9d1a4;
  border-color: #c2a475;
  box-shadow: inset 0 0 0 1px #f8e7c5;
}
.theme-preview .preview-grid {
  stroke: #8b704e;
}
.theme-preview .preview-piece {
  fill: #fbf0d7;
  stroke: #bfa778;
}
.theme-preview .preview-character {
  fill: #323d36;
}
.theme-preview .red-character {
  fill: #a44935;
}
.dashboard-bottom .empty-state svg {
  stroke: #7e98a2;
}
.portal-title .badge {
  background: #fbfcf7;
  border-color: #becdd1;
  color: var(--c-secondary);
}
.portal-row,
.topic-card,
.stat-box {
  background: var(--c-surface);
  border-color: var(--c-divider);
}
.row-tag {
  background: var(--c-selected);
  color: var(--c-accent);
  border-color: #b3c8cf;
}
.training-tabs button {
  background: #fcfdf9;
  color: var(--c-secondary);
  border-color: #a3b4b9;
}
.training-tabs button:hover {
  background: #eef5f5;
  border-color: var(--c-accent);
}
.training-tabs button.active {
  background: var(--c-accent);
  color: #ffffff;
  border-color: var(--c-accent);
}
.stat-box b {
  color: var(--c-accent);
}
.study-bars {
  border-color: #c9d6d9;
}
.study-day,
.progress-track i {
  background: #558391;
}
.progress-track {
  background: #e3ebeb;
}
.portal-form input,
.portal-form select,
.portal-form textarea,
.portal-input {
  background: #ffffff;
  color: var(--c-text);
  border-color: #8ca0a8;
}
.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus,
.portal-input:focus {
  border-color: var(--c-accent);
}
.notice {
  background: #edf3f4;
  border-color: #bdd0d5;
  color: var(--c-text);
}
.bound-principle,
.fact-chip {
  background: #e8f0f2;
  color: var(--c-accent);
  border-color: #a7c0c9;
}
.bound-principle:hover {
  background: #dae8ec;
  color: #254d5c;
  border-color: #709aa9;
}
.danger-button {
  color: var(--c-error);
  border-color: #b77a6c;
}
.button.primary.danger-button {
  color: #fff;
  background: #a45142;
  border-color: #a45142;
}
.platform-dialog,
.settings-dialog,
.result-dialog {
  background: #fffefa;
  color: var(--c-text);
  border-color: #c3cfd1;
  box-shadow: 0 22px 65px #233e493d;
}
.platform-dialog::backdrop,
.settings-dialog::backdrop,
.result-dialog::backdrop {
  background: #304c576b;
  backdrop-filter: blur(3px);
}
fieldset label > span {
  background: #f6f8f4;
  color: var(--c-secondary);
  border-color: #9aadb4;
}
fieldset label:has(input:checked) > span {
  background: #e3eef0;
  border-color: #5c8a9a;
  color: var(--c-text);
}
fieldset label:has(input:checked) .red-text {
  color: #a04838;
}
.result-seal {
  background: #e7f0f2;
  border-color: #b4cbd1;
  color: var(--c-accent);
}
.toast {
  background: #315e6c;
  color: #fff;
  border-color: #426f7e;
  box-shadow: 0 8px 24px #233e4930;
}
.library-item,
.move-card {
  background: var(--c-surface);
  border-color: var(--c-divider);
}
.library-symbol,
.library-result {
  background: #e2edf0;
  color: var(--c-accent);
}
.library-empty {
  background: #f6faf8;
  color: var(--c-text);
  border-color: #b5cbd0;
}
.collection-tag {
  color: var(--c-secondary);
  border-color: #b7c8cf;
}
/* Natural wood is retained, but golden UI chrome is completely removed. */
.avatar {
  background: #dce9ec;
  color: var(--c-accent);
  border-color: #a8c0c8;
}
.self-avatar {
  background: #f2e4dd;
  color: #a65744;
  border-color: #ceada0;
}
.small-tag {
  background: #edf3f4;
  color: var(--c-secondary);
  border-color: #b7cbd1;
}
.board-frame {
  background: linear-gradient(
    120deg,
    #c4a978,
    #ead0a3 30%,
    #ceb080 78%,
    #bfa278
  );
  border-color: #c0a474;
  box-shadow: 0 8px 18px #4e452319;
}
.board-frame:before {
  border-color: #faf0d9a8;
}
.board-inner {
  background: #e4cda5 url("/assets/birch-grain.webp") no-repeat;
  background-size: 100% 100%;
  border-color: #b09367;
}
.board-inner:before {
  background: linear-gradient(115deg, #fff7df22, transparent 38%, #a5804205);
}
.board-lines path,
.board-lines rect {
  stroke: #927751 !important;
  opacity: 0.78 !important;
}
.board-lines g {
  fill: #826744 !important;
}
.piece {
  background: radial-gradient(
    circle at 29% 20%,
    #fffae9,
    #f0e0c2 66%,
    #d9c49b 90%
  );
  border-color: #c7b087;
  color: #313c33;
  box-shadow:
    0 3px 0 #b29a73,
    0 5px 6px #7b674226,
    inset 0 1px 1px #fffaf0;
}
.piece:before {
  border-color: #ad98745c;
}
.piece.red {
  color: #a94a35;
}
.piece.red:before {
  border-color: #af6b5459;
}
.piece.selected {
  box-shadow:
    0 0 0 2px #477d8d,
    0 3px 0 #b29a73,
    0 7px 8px #47707b33;
}
.piece.checked {
  box-shadow:
    0 0 0 3px #b75c4c8f,
    0 3px 0 #b29a73;
}
.legal-marker:after {
  background: #4d8190;
  box-shadow: 0 0 0 5px #4d819012;
}
.legal-marker.capture:after {
  background: none;
  border-color: #477d8d;
}
.last-marker:after {
  border-color: #6087957b;
  background: #60879517;
}
.last-marker.from:after {
  background: #608795;
}
.board-arrows > path {
  stroke: #416e80;
}
.board-arrows marker path {
  fill: #416e80;
}
.board-frame.game-finished {
  border-color: #5b8795;
}
.turn-badge {
  background: #e1edef;
  color: #315e6c;
  border-color: #aac5cc;
}
.turn-badge .status-dot {
  background: #598878;
}
.turn-badge.busy,
.turn-badge.reviewing {
  background: #eff2ee;
  color: #455f69;
}
.coach-card {
  background: linear-gradient(125deg, #f6faf8, #eff5f4);
  border-color: #ccd9d8;
}
.coach-icon {
  background: #e2edf0;
  color: var(--c-accent);
  border-color: #b5cad0;
}
.coach-label {
  border-color: #c5d3d7;
  color: var(--c-secondary);
}
.quota-display i {
  background: #558392;
}
.quota-display i.used {
  background: #d5e0e1;
}
.quota-display strong {
  color: var(--c-accent);
}
.coach-content .analysis-tag {
  background: #e2edf0;
  color: var(--c-secondary);
}
.hint-button {
  background: transparent;
  color: var(--c-accent);
  border-color: #83a1ae;
}
.hint-button:hover {
  background: #e2eef1;
  border-color: #4f8194;
}
.apply-hint {
  background: #315e6c !important;
  color: #ffffff !important;
  border-color: #315e6c;
}
.move-columns {
  background: #eff4f2;
  border-color: var(--c-divider);
  color: var(--c-secondary);
}
.move-cell.active {
  background: #dfecef;
  color: var(--c-accent);
}
.move-cell:hover {
  background: #eaf1f2;
}
.replay-controls button:hover {
  background: #e2edf0;
  color: var(--c-accent);
}
#sessionBanner .training-session,
.side-rail #sessionBanner .training-session {
  background: #f9faf5;
  border-color: var(--c-divider);
}
.wdl-bar i:nth-child(1) {
  background: #69998b;
}
.wdl-bar i:nth-child(2) {
  background: #cfdddc;
}
.wdl-bar i:nth-child(3) {
  background: #c7927d;
}
.retry-button {
  background: #f5ede1;
  color: #83623c;
  border-color: #c4b492;
}
@media (max-width: 1000px) {
  .hero-link {
    background: transparent;
    color: var(--c-accent);
  }
}
@media (max-width: 640px) {
  .site-header,
  .sidebar {
    background: var(--c-shell);
  }
  .sidebar {
    border-color: var(--c-divider);
    box-shadow: 0 -3px 10px #2d414a0d;
  }
  .sidebar button.active {
    background: #e0edf0;
    color: var(--c-accent);
    box-shadow: inset 0 2px var(--c-accent);
  }
  .hero-surface:after {
    background: linear-gradient(90deg, #fffdf8, transparent 93%);
  }
  .hero-art {
    opacity: 0.48;
    filter: saturate(0.82) brightness(1.06);
  }
  .hero-link {
    background: transparent;
    color: var(--c-accent);
  }
}

/* Contrast-sensitive empty states and foreground-on-artwork are explicit roles. */
.empty-state {
  color: var(--c-secondary);
}
.empty-state p,
.empty-state span {
  color: var(--c-secondary);
}
.self-avatar {
  color: #954435;
}
@media (max-width: 640px) {
  .site-header:before {
    display: none;
  }
  .hero-art {
    opacity: 0.22;
    filter: saturate(0.8) brightness(1.06);
  }
  .hero-surface:after {
    background: linear-gradient(
      90deg,
      #fffdf8 0%,
      #fffdf8c9 55%,
      #fffdf88c 100%
    );
  }
  .chip {
    background: #edf3f4;
    color: var(--c-secondary);
  }
}
/* Study/replay diagrams use the existing light palette and real legal snapshots. */
.variation-board {
  position: relative;
  max-width: 350px;
  aspect-ratio: 9/10;
  margin: 18px auto;
  background: #e9d3aa url("/assets/birch-grain.webp") center/100% 100%;
  border: 8px solid #c7ab7b;
  border-radius: 4px;
  isolation: isolate;
  overflow: hidden;
}
.variation-board > svg,
.variation-pieces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.variation-board > svg path,
.variation-board > svg rect {
  stroke: #8f7751;
  opacity: 0.75;
}
.variation-board > svg g {
  fill: #806742;
}
.variation-piece {
  position: absolute;
  width: 9.4%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  font:
    700 clamp(19px, 3.2vw, 27px) "KaiTi",
    serif;
  background: radial-gradient(circle at 30% 20%, #fff9e8, #ecdcbf);
  border: 1px solid #c2ac83;
  color: #303c33;
  box-shadow: 0 2px 0 #b39a71;
  transition:
    left 0.25s,
    top 0.25s,
    opacity 0.2s,
    transform 0.2s;
}
.variation-piece.red {
  color: #a94a35;
}
.variation-piece.departing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}
.variation-board + .replay-controls {
  background: var(--c-surface-low);
  border: 1px solid var(--c-divider);
  border-radius: 6px;
}
.variation-board + .replay-controls button {
  min-width: 40px;
  min-height: 44px;
}
.variation-board + .replay-controls [data-action="variation-prev"] svg {
  transform: rotate(180deg);
}
.study-facts {
  margin-top: 16px;
  border-top: 1px solid var(--c-divider);
  padding-top: 12px;
}
.study-facts summary {
  color: var(--c-link);
  cursor: pointer;
  font-size: 13px;
  min-height: 30px;
}
.study-facts p {
  font-size: 12px;
  margin: 7px 0;
}
.review-status {
  margin: 14px 0;
  color: var(--c-secondary);
  font-size: 13px;
}
.review-status button {
  margin-left: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .variation-piece {
    transition-duration: 0.01ms;
  }
}
.rate-figure {
  margin-top: 20px;
}
.rate-figure > svg {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 14px auto;
}
.chart-grid {
  fill: none;
  stroke: var(--c-divider);
  stroke-width: 1;
}
.chart-label {
  fill: var(--c-secondary);
  font: 12px var(--f-ui);
}
.rate-line {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
}
.rate-point {
  fill: var(--c-accent);
}
/* Learning controls remain legible in the narrow shared side rail. */
#sessionBanner .training-session:has([data-action="study-variation"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#sessionBanner .training-session:has([data-action="study-variation"]) > div {
  grid-column: 1/-1;
  min-width: 0;
}
#sessionBanner .training-session:has([data-action="study-variation"]) .button {
  margin: 0;
  min-width: 0;
  min-height: 40px;
  white-space: nowrap;
  width: 100%;
  padding-inline: 8px;
  justify-content: center;
}
@media (max-width: 640px) {
  #sessionBanner
    .training-session:has([data-action="study-variation"])
    .button {
    min-height: 44px;
  }
}
/* Phone: one always-reachable help action, with the shared explanation card in a drawer. */
.mobile-coach-dock {
  display: none;
}
@media (max-width: 640px) {
  .mobile-coach-dock {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(115px, 1fr);
    gap: 9px;
    margin: 16px 0 10px;
    align-items: stretch;
  }
  .mobile-hint-slot {
    min-width: 0;
  }
  .mobile-hint-slot #hint {
    margin: 0;
    width: 100%;
    min-height: 48px;
    white-space: normal;
    padding: 11px 10px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-color: var(--c-accent);
    font-size: 13px;
  }
  .mobile-hint-slot #hint svg:last-child {
    display: none;
  }
  .mobile-hint-slot #hint svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
  }
  .mobile-hint-slot #hint span {
    line-height: 1.5;
  }
  .mobile-explain-button {
    min-height: 48px;
    border: 1px solid #9db9c4;
    background: #f8fbf9;
    color: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 7px;
    padding: 8px 9px;
  }
  .mobile-explain-button svg {
    width: 17px;
    height: 17px;
  }
  .mobile-coach-drawer {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    max-height: 68dvh;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-divider);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px #243f4922;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-coach-drawer::backdrop {
    background: #304c5752;
    backdrop-filter: blur(1px);
  }
  .drawer-handle {
    width: 42px;
    height: 4px;
    background: #bccbd0;
    border-radius: 3px;
    margin: 2px auto 10px;
  }
  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
  }
  .mobile-drawer-head h2 {
    font: 600 22px/1.5 var(--f-display);
    margin: 0;
    color: var(--c-text);
  }
  .mobile-drawer-head > button {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--c-accent);
  }
  .mobile-drawer-head svg {
    width: 21px;
    height: 21px;
  }
  .mobile-coach-body .coach-card {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    border-radius: 0;
  }
  .mobile-coach-body .coach-head {
    display: none;
  }
  .mobile-coach-body .quota-row {
    padding: 8px 0 13px;
    margin-bottom: 12px;
    font-size: 13px;
  }
  .mobile-coach-body .coach-content h3 {
    font-size: 23px;
    margin: 8px 0;
  }
  .mobile-coach-body .coach-content p {
    font-size: 14px;
    line-height: 1.8;
  }
  .mobile-coach-body .coach-content {
    margin-bottom: 8px;
  }
  .mobile-coach-body #applyHint {
    position: sticky;
    bottom: 0;
    min-height: 46px;
    margin-top: 15px;
    font-size: 14px;
    width: 100%;
  }
  .mobile-coach-body .honest-note {
    margin-bottom: 0;
  }
  .mobile-coach-drawer[open] {
    animation: coachDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@keyframes coachDrawerIn {
  from {
    transform: translateY(22px);
    opacity: 0.85;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-coach-drawer[open] {
    animation-duration: 0.01ms;
  }
}
.piece.drag-origin {
  opacity: 0.25;
  filter: none;
}
.piece.drag-ghost {
  z-index: 8;
  pointer-events: none;
  transition: none;
  transform: translate(-50%, -60%) scale(1.045);
  box-shadow: 0 7px 12px #56717b3f;
}
.piece.drag-ghost.landing {
  transition:
    left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.22s;
  transform: translate(-50%, -50%);
}
.room-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}
.room-controls > div {
  grid-column: 1/-1;
}
.room-controls .button {
  white-space: nowrap;
  min-width: 0;
  min-height: 40px;
  margin: 0 !important;
  justify-content: center;
}
.room-link-status {
  color: var(--c-accent);
  font-weight: 600;
}
@media (max-width: 640px) {
  .room-controls .button {
    min-height: 44px;
  }
  .piece.drag-ghost {
    font-size: clamp(22px, 6.25vw, 33px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .piece.drag-ghost.landing {
    transition-duration: 0.01ms;
  }
}
@media (max-width: 640px) {
  .mobile-engine-detail {
    border-top: 1px solid var(--c-divider);
    margin-top: 10px;
    padding-top: 7px;
  }
  .mobile-engine-detail > summary {
    font-size: 12px;
    color: var(--c-link);
    min-height: 34px;
    cursor: pointer;
    line-height: 1.8;
  }
  .mobile-engine-detail .candidate-choices {
    margin-top: 6px;
  }
  .mobile-coach-drawer {
    max-height: 62dvh;
  }
}
.portal-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;font-size:13px;line-height:1.9;color:var(--c-secondary)}.portal-check input{width:18px!important;height:18px;min-height:18px!important;margin-top:4px;flex-shrink:0}.form-error{border:1px solid #ce9d8c;background:#fbefea;color:#974738;padding:10px 13px;border-radius:6px;font-size:13px;line-height:1.8}.workshop-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.workshop-actions .button{font-size:12px;min-height:38px;padding:8px 11px}.workshop-row .row-info{min-width:150px}.library-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:18px}.library-filters label{display:grid;gap:6px;font-size:12px;color:var(--c-secondary)}.library-filter-actions{display:flex;gap:11px;margin:12px 0 20px;flex-wrap:wrap}.library-result-note{font-size:12px;color:var(--c-secondary);margin-bottom:12px}.library-meta{font-size:12px!important;line-height:1.8;overflow-wrap:anywhere}.library-codes{display:inline-block;font-size:11px;color:var(--c-accent);padding:2px 7px;border:1px solid var(--c-divider);border-radius:4px;background:#edf3f4;margin-left:8px}
@media(max-width:640px){.workshop-row{align-items:start;flex-direction:column}.workshop-actions{justify-content:flex-start}.workshop-actions .button{min-height:44px}.library-filters{grid-template-columns:1fr 1fr;gap:12px}.library-filters label:last-child{grid-column:1/-1}.library-filter-actions .button{min-height:44px}.portal-check{font-size:13px}}

/* Feedback is an account-scoped record, not another card grid. */
.feedback-records{margin-top:24px}.feedback-records>h2{margin-bottom:8px}
.feedback-record{display:flex;align-items:flex-start;gap:20px;padding:18px 0;border-top:1px solid var(--c-divider)}
.feedback-record>div{flex:1;min-width:0}.feedback-record h3{font-size:14px;line-height:1.7;margin:0 0 6px}
.feedback-record p{font-size:13px;line-height:1.85;overflow-wrap:anywhere;margin:0 0 6px;color:var(--c-secondary)}
.feedback-record .feedback-reply{color:var(--c-accent)}.feedback-status{font-size:12px;line-height:1.8;color:var(--c-secondary);flex-shrink:0}
@media(max-width:640px){.feedback-record{display:block}.feedback-status{display:block;margin-top:8px}}

/* Client-compute review follows the generated porcelain reference. */
.review-compute-settings{display:grid;grid-template-columns:auto minmax(150px,220px) minmax(0,1fr);gap:12px;align-items:center;margin:18px 0 10px}
.review-compute-settings label{font-size:13px;color:var(--c-secondary)}.review-compute-settings p{font-size:12px;margin:0;line-height:1.8;font-variant-numeric:tabular-nums}
.local-review>.field-note{max-width:75ch}.local-review .button-row{gap:9px}.local-review .review-status{line-height:1.9;overflow-wrap:anywhere}
@media(max-width:700px){.review-compute-settings{grid-template-columns:1fr}.review-compute-settings label{margin-bottom:-7px}.review-compute-settings .portal-input{width:100%;min-height:44px}.local-review .button-row .button{min-height:44px}}

/* Generated porcelain workshop/dashboard details; same shell and interactions. */
.learning-evidence-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;margin:24px 0}
.learning-evidence-grid .surface{min-width:0}.difficulty-table th,.difficulty-table td{white-space:normal;font-variant-numeric:tabular-nums}
.weak-topic-row{display:flex;align-items:center;gap:16px;padding:17px 0;border-top:1px solid var(--c-divider)}
.weak-topic-row>div{min-width:0;flex:1}.weak-topic-row h3{font-size:15px;line-height:1.7;margin:0 0 5px}.weak-topic-row p{font-size:13px;line-height:1.8;color:var(--c-secondary);margin:0;font-variant-numeric:tabular-nums}
.weak-topic-row .button{font-size:12px;min-height:44px;flex-shrink:0}.weakest-panel .empty-state{padding:24px 0;line-height:1.9}
#portalDialog[data-kind="factory"]{width:min(860px,calc(100vw - 32px));max-width:860px}
.factory-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px;align-items:start}.factory-fields{display:grid;gap:15px;min-width:0}
.factory-fields label{display:grid;gap:7px}.factory-preview{text-align:center;min-width:0}.factory-preview-empty{min-height:240px;display:grid;place-items:center;padding:20px;color:var(--c-secondary);background:var(--c-selected);border:1px solid var(--c-divider);border-radius:12px;font-size:13px;line-height:1.9}
.factory-mini-board{position:relative;margin:auto;width:100%;max-width:270px;aspect-ratio:9/10;border:8px solid #b69969;border-radius:5px;background:#e9d1a5 url('/assets/birch-grain.webp') center/100% 100%}
.factory-mini-board svg{width:100%;height:100%;position:absolute;inset:0}.factory-mini-board path{fill:none;stroke:#8a704b;stroke-width:1.3px}
.factory-mini-piece{position:absolute;display:grid;place-items:center;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #b7a076;border-radius:50%;background:#fff3d9;color:#34454a;font:600 clamp(12px,1.2vw,19px)/1 'KaiTi',serif}
.factory-mini-piece.red{color:#a64734}.factory-progress{padding:12px 14px;border:1px solid var(--c-divider);border-radius:8px;color:var(--c-accent);background:var(--c-selected);font-size:13px;line-height:1.9;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:900px){.learning-evidence-grid{grid-template-columns:1fr}.weak-topic-row{flex-wrap:wrap}}
@media(max-width:640px){.factory-layout{grid-template-columns:1fr;gap:18px}.factory-mini-board{max-width:190px}.factory-mini-piece{font-size:14px}.factory-preview-empty{min-height:110px}.factory-fields .button{min-height:44px}.difficulty-table th,.difficulty-table td{padding:10px 8px}.learning-evidence-grid{gap:18px}.weak-topic-row>div{min-width:150px}}

/* Chess state transitions are owned by board-motion.js, never instant snapshots. */
.piece[data-motion],.variation-piece[data-motion]{animation:none!important;transition:none;will-change:left,top,transform,opacity}
.piece.selected:not([data-motion]){animation:selectionBreath 1.5s ease-in-out infinite}.hit-cell:disabled{cursor:wait}
@keyframes selectionBreath{0%,100%{transform:translate(-50%,-53%) scale(1)}50%{transform:translate(-50%,-55%) scale(1.035)}}
.board-frame.game-finished{animation:winningBoard .6s ease-out;border-color:#7397a1}
@media(prefers-reduced-motion:reduce){.piece.selected:not([data-motion]),.piece.checked,.legal-marker:after,.board-arrows>path,.board-frame.game-finished{animation-duration:24ms!important;animation-iteration-count:1!important}.piece,.variation-piece{transition-duration:24ms!important}}

/* Per-hand learning: one shared coach card on desktop and mobile, evidence first. */
.move-evaluation-card{margin-top:18px;padding-top:16px;border-top:1px solid var(--c-divider);min-width:0}
.move-evaluation-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.move-evaluation-header h4{margin:0;font-size:15px;line-height:1.7;color:var(--c-text)}
.move-evaluation-header .button{font-size:12px;min-height:40px;padding:8px 14px}.move-evaluation-card p{font-size:13px;line-height:1.9;margin:10px 0;overflow-wrap:anywhere;color:var(--c-secondary)}
.move-evaluation-reading{display:flex;justify-content:space-between;align-items:start;gap:12px;background:var(--c-selected);border-radius:8px;padding:12px;margin-top:12px;font-size:12px;color:var(--c-accent)}
.move-evaluation-reading strong{font-variant-numeric:tabular-nums;font-size:15px;line-height:1.5;font-weight:600;text-align:right}
.move-evaluation-wdl{height:8px;display:flex;overflow:hidden;border-radius:4px;margin:12px 0;background:var(--c-selected)}.move-evaluation-wdl i{display:block;min-width:0}.move-evaluation-wdl .part-0{background:#315e6c}.move-evaluation-wdl .part-1{background:#bfcdd0}.move-evaluation-wdl .part-2{background:#a56d60}
.move-evaluation-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-bottom:1px solid var(--c-divider)}.move-evaluation-pair b{font-size:14px;font-weight:600;color:var(--c-text)}
.move-evaluation-card .move-evaluation-judgment{color:var(--c-accent);font-weight:600}.move-evaluation-card .move-mate-notice{color:#944e3d;background:#f6ebe5;padding:10px 12px;border-radius:8px}
.move-evaluation-card .move-evaluation-status{font-size:12px;color:var(--c-accent)}.move-evaluation-lines{font-size:12px;color:var(--c-secondary);border-top:1px solid var(--c-divider);padding-top:10px}.move-evaluation-lines summary{cursor:pointer;color:var(--c-accent);line-height:1.8;min-height:36px}.move-evaluation-lines .button{font-size:12px;min-height:40px}
@media(max-width:640px){.move-evaluation-header .button,.move-evaluation-lines .button{min-height:44px}.move-evaluation-reading{display:block}.move-evaluation-reading strong{display:block;text-align:left;margin-top:6px}.mobile-coach-body .move-evaluation-card p{font-size:13px;line-height:1.9}.mobile-coach-body .move-evaluation-header h4{font-size:16px}}

/* Five learning stages: ordered content, never a rating ladder. */
#portalDialog[data-kind="curriculum"]{width:min(820px,calc(100vw - 32px));max-width:820px}.curriculum-path{display:grid;gap:0}
.curriculum-stage{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:16px;align-items:center;padding:19px 0;border-top:1px solid var(--c-divider)}
.curriculum-stage h3{font-family:var(--f-display);font-size:22px;line-height:1.5;margin:0 0 7px}.curriculum-stage p{font-size:13px;line-height:1.8;margin:3px 0;color:var(--c-secondary)}
.curriculum-stage .curriculum-progress{font-variant-numeric:tabular-nums;color:var(--c-accent)}.curriculum-order{font-family:var(--f-display);font-size:22px;color:var(--c-accent);align-self:start;padding-top:5px}
.curriculum-stage .button{min-height:44px;font-size:13px}.theme-grid:has(.theme-tile:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){.theme-grid:has(.theme-tile:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.curriculum-stage{grid-template-columns:27px minmax(0,1fr);gap:11px}.curriculum-stage .button{grid-column:2;justify-self:start;margin-top:6px}.curriculum-stage h3{font-size:21px}.theme-grid:has(.theme-tile:nth-child(5)){grid-template-columns:1fr}}

.daily-surface>[data-action="daily-evidence"]{display:block;margin-top:13px;font-size:13px;min-height:40px;text-align:left}.sync-state{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}