/* RUCH — a quiet, focused home for chess practice. */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --paper: #ffffff;
  --ink: #17272e;
  --muted: #7a858a;
  --line: #e6e9e9;
  --green: #16735b;
  --green-dark: #105d49;
  --green-soft: #eaf3ee;
  --navy: #14232b;
  --light-square: #e9e4d3;
  --dark-square: #6f8e76;
  --radius: 16px;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--green); text-decoration: none; }
svg { flex-shrink: 0; }
button, a, input, select, textarea { outline-offset: 4px; }
:focus-visible { outline: 3px solid #83b9a2; }
::selection { color: #0d4838; background: #cde3d6; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.25; }
.hidden { display: none !important; }
.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; }
.app-shell { min-height: 100vh; display: flex; }

/* Navigation */
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 218px; display: flex; flex-direction: column; padding: 34px 18px 22px; color: #eaf0ef; background: var(--navy); }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 14px 36px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 42px; color: #c3daca; }
.brand-mark svg { width: 36px; height: 36px; }
.brand-name { display: block; color: #fff; font-size: 31px; font-weight: 760; letter-spacing: -1.3px; line-height: 1.1; }
.brand-name span { color: #9bc5a6; }
.brand-tagline { display: block; margin-top: 5px; color: #82959b; font-size: 8px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; }
.sidebar-label { margin: 10px 14px 12px; color: #6f858d; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 5px; }
.nav-button { position: relative; width: 100%; min-height: 47px; display: flex; align-items: center; gap: 13px; padding: 12px 15px; border: 0; border-radius: 9px; color: #98abb1; background: transparent; text-align: left; font-size: 13px; font-weight: 560; transition: color .18s, background .18s; }
.nav-button .icon { width: 19px; height: 19px; color: #7e959e; stroke-width: 1.7; }
.nav-button:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-button.active { color: #fff; background: #294139; }
.nav-button.active .icon { color: #bdd6c4; }
.nav-button.active::after { content: ""; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #a8cbb5; }
.nav-dot { display: none; }
.sidebar-challenge { display: flex; flex-direction: column; align-items: flex-start; margin: 38px 9px 20px; padding: 19px 16px 17px; border: 1px solid #344b40; border-radius: 12px; background: linear-gradient(135deg,#223c31,#1b302c); }
.challenge-icon { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 13px; border: 1px solid #465c45; border-radius: 7px; color: #acbf8f; background: #31462f; }
.challenge-icon svg { width: 14px; height: 14px; }
.sidebar-challenge > strong { margin-bottom: 8px; color: #d6e3d0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.3px; }
.sidebar-challenge > p { margin: 0 0 19px; color: #8d9f92; font-size: 10px; line-height: 1.7; }
.sidebar-challenge > span:last-of-type { margin-bottom: 8px; color: #a3b4a4; font-size: 9px; }
.sidebar-challenge .progress-track { height: 3px; background: #3a4d3e; }
.sidebar-challenge .progress-fill { background: #9abc8d; }
.sidebar-footer { margin-top: auto; padding: 24px 13px 0; }
.sidebar-footer > p { margin-bottom: 10px; color: #6f858d; font-size: 11px; line-height: 1.7; }
.local-badge { display: flex; gap: 7px; align-items: center; color: #8da499; font-size: 10px; }
.local-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #7eaf8f; box-shadow: 0 0 0 3px rgba(126,175,143,.08); }
.sidebar-divider { height: 1px; margin: 21px 13px; background: #2a3940; }
.sidebar-note { padding: 15px; margin: 26px 1px 0; border: 1px solid #34453f; border-radius: 10px; background: linear-gradient(135deg,#233b32,#1c2f2d); }
.sidebar-note strong { display: block; color: #c5d6ca; font-size: 12px; margin-bottom: 5px; }
.sidebar-note p { color: #8da399; font-size: 11px; line-height: 1.6; margin: 0; }

/* Page frame */
.main-content { width: calc(100% - 218px); max-width: 1600px; min-width: 0; margin-left: 218px; padding: 25px 36px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; margin-bottom: 30px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #8d969a; font-size: 12px; }
.breadcrumb strong, .breadcrumb span:last-child { color: #525f65; font-weight: 550; }
.breadcrumb svg { width: 14px; height: 14px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.daily-chip { display: inline-flex; gap: 7px; align-items: center; color: #68776f; font-size: 11px; font-weight: 600; }
.daily-chip svg { width: 15px; height: 15px; color: #c2934d; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; color: #52785e; background: #dce8dd; font-size: 11px; font-weight: 750; box-shadow: 0 0 0 1px #e3e8e4; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading > .button { flex-shrink: 0; }
.count-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 2px; border-radius: 4px; color: #6c8770; background: #edf3e9; font-size: 9px; }
.eyebrow { margin-bottom: 8px; color: var(--green); font-size: 10px; font-weight: 750; letter-spacing: 2px; text-transform: uppercase; }
.page-title { margin-bottom: 9px; font-size: clamp(25px, 2.5vw, 34px); font-weight: 720; letter-spacing: -1.1px; }
.page-subtitle { margin: 0; color: #839096; font-size: 13px; line-height: 1.65; }
.page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading-row .page-heading { margin-bottom: 0; }
.hero-strip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 24px; margin-bottom: 24px; overflow: hidden; border: 1px solid #dce7df; border-radius: 13px; background: #eef4ee; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h2, .hero-copy h3 { margin: 0 0 5px; font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.hero-copy p { margin: 0; color: #78897e; font-size: 12px; }
.hero-mark { display: flex; align-items: center; gap: 12px; color: #88a993; font-size: 42px; line-height: 1; }
.hero-mark svg { width: 40px; height: 40px; }
.hero-strip .button { flex-shrink: 0; }
.hero-strip::after { position: absolute; content: ""; width: 190px; height: 190px; border: 1px solid #e0e9df; border-radius: 50%; right: 80px; top: -100px; pointer-events: none; }

/* Numbers */
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 27px; }
.stat-card { position: relative; min-width: 0; padding: 18px 20px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.stat-label { margin-bottom: 9px; color: #879197; font-size: 11px; font-weight: 550; }
.stat-value { color: #24373f; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.9px; font-variant-numeric: tabular-nums; }
.stat-value small { margin-left: 3px; color: #9ca5a8; font-size: 13px; font-weight: 450; letter-spacing: 0; }
.stat-note { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #9aa2a6; font-size: 10px; }
.stat-icon { position: absolute; top: 18px; right: 17px; display: grid; place-items: center; width: 29px; height: 29px; color: #6b8a78; background: #f2f6f2; border-radius: 8px; }
.stat-icon svg { width: 15px; height: 15px; }
.stat-trend { display: inline-flex; align-items: center; gap: 3px; color: #4b9a70; font-weight: 650; }
.stat-trend svg { width: 12px; height: 12px; }
.stat-trend.negative { color: #b76b60; }
.stat-card:nth-child(2) .stat-icon { color: #b28c57; background: #fbf5e9; }
.stat-card:nth-child(3) .stat-icon { color: #7f8ca6; background: #f1f3f9; }
.stat-card:nth-child(4) .stat-icon { color: #ac8969; background: #f8f2ec; }

/* Chessboard */
.workspace { display: grid; grid-template-columns: minmax(0,1fr) 326px; align-items: start; gap: 23px; }
.board-card { min-width: 0; padding: 19px 21px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 3px 8px #14232b02; }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 2px 14px; }
.player-info { display: flex; align-items: center; gap: 9px; }
.player-avatar { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; color: #6f7a77; background: #eef1ef; font-size: 18px; }
.player-avatar svg { width: 17px; height: 17px; }
.player-avatar.dark { color: #e9e9dd; background: #3c4b44; }
.player-name { display: block; color: #53636a; font-size: 11px; font-weight: 650; }
.player-rating { display: block; color: #9aa3a7; font-size: 10px; }
.player-name + .player-rating { margin-top: 1px; }
.color-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1px solid #c3ccc5; border-radius: 50%; background: #fff; }
.color-dot.black { background: #34443c; border-color: #34443c; }
.board-label { display: inline-flex; align-items: center; gap: 6px; color: #94a099; font-size: 10px; }
.board-label svg { width: 13px; height: 13px; }
.board-shell { display: flex; align-items: stretch; gap: 10px; width: 100%; }
.eval-bar { position: relative; flex: 0 0 13px; overflow: hidden; border-radius: 3px; background: #3b443e; }
.eval-white { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f0eee3; transition: height .5s ease; }
.eval-value { position: absolute; z-index: 2; bottom: 7px; left: 0; right: 0; color: #3f4d43; text-align: center; font-size: 8px; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); }
.board-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 5px; }
.chessboard { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); aspect-ratio: 1; width: 100%; overflow: hidden; isolation: isolate; background: var(--light-square); user-select: none; touch-action: manipulation; }
.square { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; line-height: 1; background: transparent; appearance: none; }
.square.light { color: #587460; background: var(--light-square); }
.square.dark { color: #f0ecdd; background: var(--dark-square); }
.square.last-move.light { background: #d6d698; }
.square.last-move.dark { background: #a5b776; }
.square.selected { background: #d9c66c !important; }
.square.hint { background: #b9cd7f !important; box-shadow: inset 0 0 0 4px #63945b; }
.square.wrong { background: #c97b6f !important; animation: board-shake .22s ease 2; }
.square:focus-visible { z-index: 5; outline: 3px solid #284e3d; outline-offset: -3px; }
.square:hover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff1; pointer-events: none; }
.square .piece { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; pointer-events: auto; touch-action: none; user-select: none; }
.square .piece[draggable="true"] { pointer-events: auto; cursor: grab; }
.square .piece[draggable="true"]:active { cursor: grabbing; }
.square .piece img, .square > img { display: block; width: 88%; height: 88%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 2px 1px #17271b20); }
.coord-file, .coord-rank { position: absolute; z-index: 3; font-size: clamp(8px,.72vw,10px); font-weight: 650; line-height: 1; pointer-events: none; }
.coord-file { right: 4px; bottom: 4px; }
.coord-rank { left: 4px; top: 4px; }
.legal-dot { position: absolute; z-index: 3; width: 25%; height: 25%; border-radius: 50%; background: #223b2b30; pointer-events: none; }
.legal-capture { position: absolute; z-index: 3; inset: 4%; border: 5px solid #203f2a38; border-radius: 50%; pointer-events: none; }
.board-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 53px; padding: 13px 2px 0 23px; }
.board-bottom > .muted { font-size: 10px; }
.board-caption { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 31px; margin: 9px 0 -2px; color: #9aa59e; font-size: 9px; line-height: 1.5; }
.board-caption .color-dot { flex-shrink: 0; width: 6px; height: 6px; margin-right: 1px; }
.square.in-check { background: radial-gradient(ellipse at center,#d16b56 0%,#b98160 45%,transparent 76%); }
.board-controls { display: flex; align-items: center; gap: 5px; }
.icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 31px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 7px; color: #89959b; background: transparent; transition: color .18s, background .18s, border-color .18s; }
.icon-button svg { width: 16px; height: 16px; }
.icon-button:hover { color: #405e50; background: #f1f5f2; border-color: #e3e9e4; }
.icon-button:disabled { opacity: .35; }
.board-shortcuts { margin-top: 11px; color: #a3aaad; text-align: center; font-size: 10px; }
kbd { padding: 1px 4px; border: 1px solid #dfe4e1; border-radius: 4px; background: #fff; font-size: 9px; }

/* Training panels */
.right-panel { display: grid; gap: 17px; min-width: 0; }
.panel { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 13px; font-weight: 650; }
.panel-header .muted { font-size: 10px; }
.panel-header > .icon { width: 15px; height: 15px; color: #9ba9a0; }
.panel-header .training-badge { margin-bottom: 0; }
.timer { color: #9ba79f; font-size: 10px; font-variant-numeric: tabular-nums; }
.training-badge { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 13px; padding: 4px 8px; border-radius: 5px; color: #648675; background: #edf4ee; font-size: 9px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; }
.training-badge svg { width: 11px; height: 11px; }
.puzzle-title { margin: 0 0 7px; color: #263b43; font-size: 20px; font-weight: 700; letter-spacing: -.6px; }
.puzzle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: #9aa2a6; font-size: 10px; }
.puzzle-meta strong { color: #66787d; font-weight: 600; }
.puzzle-meta svg { width: 12px; height: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 17px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #e6ebe7; border-radius: 5px; color: #7e8d83; background: #fafcf9; font-size: 9px; font-weight: 550; line-height: 1.4; }
.turn-banner { display: flex; align-items: center; gap: 9px; min-height: 49px; padding: 12px 13px; margin: 17px 0 12px; border: 1px solid #e6eae5; border-radius: 8px; color: #65736a; background: #f7f9f5; font-size: 11px; font-weight: 550; }
.turn-banner strong { font-weight: 600; }
.turn-banner > span:last-child { margin-left: auto; color: #98a397; font-size: 9px; }
.turn-dot { display: inline-block; flex-shrink: 0; width: 13px; height: 13px; border: 1px solid #c7d0c8; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #14232b12; }
.turn-dot.black { border-color: #2e3e36; background: #2e3e36; }
.status-message { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 14px; color: #909a9e; font-size: 11px; line-height: 1.7; }
.status-message > .icon { width: 14px; height: 14px; margin-top: 2px; }
.status-message:empty { display: none; }
.status-message.success { padding: 11px 12px; border-radius: 8px; color: #397c54; background: #edf6ed; }
.status-message.error { padding: 11px 12px; border-radius: 8px; color: #a56458; background: #fcf0eb; }
.status-message.info { padding: 11px 12px; border-radius: 8px; color: #667d8d; background: #eff4f8; }
.solution-line { display: block; margin: 12px 0; }
.solution-line > .muted { display: block; margin-bottom: 7px; font-size: 10px; }
.move-token { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 8px; border: 1px solid #e5eae5; border-radius: 5px; color: #7f8c82; background: #fafbf9; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.move-token.current { color: #2a6e4e; border-color: #bad6c3; background: #e8f3e9; }
.move-number { color: #9da6a8; font-size: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 10px 15px; border: 1px solid transparent; border-radius: 7px; font-size: 11px; font-weight: 650; line-height: 1.4; white-space: nowrap; transition: color .15s, background .15s, border-color .15s, transform .15s; }
.button svg { width: 15px; height: 15px; }
.button-primary { color: #fff; background: var(--green); box-shadow: 0 2px 2px #125b4410; }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { color: #6a797e; border-color: #e2e7e4; background: #fff; }
.button-secondary:hover { color: #36634d; border-color: #b5cdbc; background: #f7faf6; }
.button-ghost { color: #8c979c; background: transparent; }
.button-ghost:hover { color: #446e56; background: #f0f5f0; }
.button-danger { color: #a4685e; border-color: #ecd9d3; background: #fcf5f2; }
.button-danger:hover { background: #f7eae4; }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .45; transform: none; }
.button-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.button-row > .button { flex: 1; }
.training-panel .button-row { gap: 7px; margin-top: 17px; }
.training-panel .button-row > .button { min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 10px; }
.training-panel .session-progress { padding-top: 17px; margin-top: 17px; border-top: 1px solid #edf0e9; }
.full-width { width: 100%; }
.panel-divider { height: 1px; margin: 18px 0; background: #edf0ed; }
.filter-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field > span:first-child { color: #89969a; font-size: 10px; font-weight: 550; }
.select, .input, .search-input { width: 100%; min-width: 0; min-height: 38px; padding: 9px 11px; border: 1px solid #e4e8e5; border-radius: 7px; color: #66777b; background-color: #fbfcfa; font-size: 11px; transition: border-color .15s, box-shadow .15s; }
.select { padding-right: 24px; }
.select:hover, .input:hover, .search-input:hover { border-color: #cbd6cc; }
.select:focus, .input:focus, .search-input:focus { outline: none; border-color: #83af94; box-shadow: 0 0 0 3px #16735b0d; }
.input::placeholder, .search-input::placeholder { color: #a0aaab; }
.hint-text { margin: 9px 0 0; color: #9ca7a8; font-size: 10px; line-height: 1.6; }
.progress-track { width: 100%; height: 5px; overflow: hidden; border-radius: 5px; background: #edf1ec; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: #799e7d; transition: width .5s ease; }
.session-progress { margin-top: 11px; }
.session-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #8b989b; font-size: 10px; }
.session-progress strong { color: #5f7768; font-weight: 600; }
.session-dots { display: flex; gap: 6px; margin-top: 11px; }
.session-dot { flex: 1; height: 5px; border-radius: 3px; background: #edf1ec; }
.session-dot.done { background: #7fa588; }
.theme-preview { display: grid; gap: 0; }
.theme-preview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.theme-preview-item { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 11px; color: #7a888a; background: #fff; text-align: left; font-size: 10px; transition: border-color .18s,background .18s; }
.theme-preview-item:hover { border-color: #b7cbb3; background: #fafff5; }
.theme-preview-item > span:nth-child(2) { min-width: 0; }
.theme-preview-item > .icon:last-child { width: 12px; height: 12px; margin-left: auto; color: #a1afa0; }
.theme-preview-item small { display: block; color: #9aa5a5; font-size: 9px; }
.theme-preview-item strong { display: block; margin-bottom: 2px; color: #637570; font-size: 11px; font-weight: 600; }
.theme-preview-item p { margin: 0; color: #9aa5a5; font-size: 10px; }
.mini-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #edf0ea; border-radius: 8px; color: #759781; background: #f7f9f4; }
.mini-icon svg { width: 15px; height: 15px; }
.mini-icon.tone-1 { color: #998362; border-color: #eee9df; background: #faf6ed; }
.mini-icon.tone-2 { color: #87929f; border-color: #e8ebef; background: #f2f5f8; }
.mini-icon.tone-3 { color: #9e846f; border-color: #eee6e0; background: #f8f1ec; }
.source-note { color: #9aa6a8; font-size: 10px; line-height: 1.7; }
.source-note a { color: #799987; text-decoration: underline; text-underline-offset: 2px; }

/* Library, overview, and progress */
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 28px 0 15px; }
.section-title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.25px; }
.muted { color: #929da0; }
.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: #6e927b; background: transparent; font-size: 11px; font-weight: 600; }
.text-link > .icon { width: 13px; height: 13px; }
.text-link:hover { color: #275e42; }
.content-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(270px,1fr); gap: 21px; }
.chart-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.chart-card h2, .chart-card h3 { margin-bottom: 5px; font-size: 14px; font-weight: 650; }
.chart-card > p { color: #97a1a5; font-size: 11px; }
.chart { position: relative; width: 100%; min-height: 190px; margin-top: 20px; }
.chart svg { display: block; width: 100%; height: auto; max-height: 275px; overflow: visible; }
.chart svg text { font-family: inherit; font-size: 10px; fill: #9da9aa; }
.chart svg .grid-line { stroke: #edf0ee; stroke-width: 1; }
.chart svg .chart-line { fill: none; stroke: #588a6b; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart svg .chart-area { fill: #7ca78b; opacity: .1; }
.chart svg .chart-point { fill: #fff; stroke: #588a6b; stroke-width: 2; }
.chart svg .chart-point:last-child { fill: #588a6b; }
.chart-labels { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: #9da7aa; font-size: 10px; }
.chart-empty { display: grid; place-items: center; min-height: 190px; color: #a2acad; font-size: 12px; text-align: center; }
.chart-empty { align-content: center; gap: 9px; padding: 24px 10px; }
.chart-empty > .icon { width: 29px; height: 29px; margin-bottom: 5px; color: #a1b69a; }
.chart-empty strong { color: #82967b; font-size: 12px; font-weight: 600; }
.chart-empty > span { font-size: 10px; }
svg.chart { display: block; width: 100%; height: auto; min-height: 0; max-height: 275px; overflow: visible; }
.legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: #9aa6a5; font-size: 9px; }
.legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend > .activity-cell { display: block; width: 10px; height: 10px; }
.legend-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6d9478; }
.activity-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 4px; margin: 22px 0 6px; }
.activity-cell { aspect-ratio: 1; min-width: 0; max-height: 21px; border-radius: 3px; background: #edf1eb; }
.activity-cell.level-1 { background: #d6e5d4; }
.activity-cell.level-2 { background: #b1cdaa; }
.activity-cell.level-3 { background: #7eaa7d; }
.activity-cell.level-4 { background: #4c8159; }
.activity-cell:hover { outline: 1px solid #4e775a; outline-offset: 1px; }
.activity-grid + .chart-labels { font-size: 9px; }
.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.theme-card { position: relative; min-width: 0; padding: 22px; border: 1px solid #e2e8e3; border-radius: 12px; background: #fff; text-align: left; transition: border-color .18s, box-shadow .18s, transform .18s; }
button.theme-card { width: 100%; color: inherit; font: inherit; }
.theme-card:hover { border-color: #b5cdb9; box-shadow: 0 4px 18px #2d603d08; transform: translateY(-2px); }
.theme-card.active { border-color: #81ab8e; background: #f2f7ef; box-shadow: 0 0 0 1px #81ab8e; }
.theme-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 16px; border-radius: 9px; color: #698c73; background: #eff5eb; }
.theme-icon svg { width: 20px; height: 20px; }
.theme-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 9px; }
.theme-card-top > .tag { margin-top: 4px; font-size: 8px; }
.theme-name { margin: 0 0 7px; color: #3b5145; font-size: 14px; font-weight: 650; letter-spacing: -.15px; }
.theme-description { min-height: 34px; margin: 0 0 17px; color: #929e9c; font-size: 11px; line-height: 1.65; }
.theme-count { display: flex; justify-content: space-between; gap: 10px; color: #8e9f91; font-size: 10px; font-weight: 550; }
.theme-count svg { width: 14px; height: 14px; }
.theme-card.active::after { position: absolute; content: "✓"; top: 20px; right: 20px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #6d9676; font-size: 11px; font-weight: 700; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin: 20px 0 25px; }
.search-input { max-width: 310px; min-height: 40px; background-color: #fff; }
.search-input:has(input) { display: flex; align-items: center; gap: 9px; }
.search-input > .icon { width: 15px; height: 15px; color: #96a48f; }
.search-input input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #718369; background: transparent; font-size: 11px; }
.search-input input::placeholder { color: #a2ae9b; }
.search-input:focus-within { border-color: #83af94; box-shadow: 0 0 0 3px #16735b0d; }
.toolbar + .theme-categories { margin-bottom: 23px; }
.theme-categories { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pill { min-height: 33px; padding: 7px 12px; border: 1px solid #e5eae5; border-radius: 7px; color: #8b999b; background: #fff; font-size: 10px; font-weight: 550; }
.pill:hover { color: #57765e; border-color: #bdcdbf; }
.pill.active { color: #4d7a56; border-color: #cbdcc9; background: #edf4e9; }
.library-count { color: #9aa5a5; font-size: 11px; }
.theme-mastery { margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf1eb; }
.theme-mastery .progress-track { height: 3px; }
.mastery-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #9ca79f; font-size: 9px; }

/* History and settings */
.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.history-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
table th { padding: 15px 19px; border-bottom: 1px solid #e9eeea; color: #96a29f; background: #fafcf9; text-align: left; font-size: 9px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; }
table td { padding: 15px 19px; border-bottom: 1px solid #eef2ed; color: #7f8d8c; text-align: left; font-size: 11px; }
table tr:last-child td { border-bottom: 0; }
table tbody tr:hover { background: #fcfdfb; }
table td strong { color: #5c7362; font-weight: 600; }
table td > small { display: block; margin-top: 3px; color: #a2ada0; font-size: 9px; }
.result-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; color: #57855d; background: #eef6eb; font-size: 10px; }
.result-badge.error, .result-badge.failed { color: #af7e6b; background: #fbf0e9; }
.result-badge.hint { color: #a6925d; background: #faf5e7; }
.result-badge.correct { color: #57855d; background: #eef6eb; }
.result-badge.assisted { color: #a18b57; background: #faf5e7; }
.result-badge.skipped { color: #a8806d; background: #faf1eb; }
.motif-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 23px 30px; padding-top: 6px; }
.motif-stat > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.motif-stat strong { color: #748b6d; font-size: 11px; font-weight: 600; }
.motif-stat > div > span { color: #99a68f; font-size: 10px; }
.motif-stat .progress-track { height: 4px; }
.motif-stat > small { display: block; margin-top: 5px; font-size: 9px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 300px; padding: 40px 20px; border: 1px dashed #d9e3d8; border-radius: 12px; color: #97a39d; background: #fafcf9; text-align: center; }
.empty-state h2, .empty-state h3 { margin: 6px 0 0; color: #637d69; font-size: 18px; font-weight: 650; }
.empty-state p { max-width: 370px; margin: 0; color: #9ca89f; font-size: 12px; line-height: 1.75; }
.empty-state .button { margin-top: 10px; }
.empty-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: #91aa90; background: #eef4e9; }
.empty-icon svg { width: 25px; height: 25px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.settings-card { padding: 26px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.settings-card h2 { margin-bottom: 6px; font-size: 16px; font-weight: 650; }
.settings-card > p { color: #98a3a1; font-size: 11px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 71px; padding: 14px 0; border-bottom: 1px solid #edf1eb; }
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row strong, .setting-row label { color: #6c8070; font-size: 12px; font-weight: 600; }
.setting-row p { margin: 4px 0 0; color: #9fa99f; font-size: 10px; line-height: 1.7; }
.setting-row .select { width: 135px; flex-shrink: 0; }
.toggle { position: relative; flex-shrink: 0; width: 35px; height: 21px; padding: 0; border: 0; border-radius: 20px; appearance: none; background: #dce5da; cursor: pointer; transition: background .2s; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #14232b15; transition: transform .2s; }
.toggle > span { display: none; }
.toggle:checked, .toggle[aria-checked="true"], .toggle.active { background: #699773; }
.toggle:checked::after, .toggle[aria-checked="true"]::after, .toggle.active::after { transform: translateX(14px); }
.settings-card .button-row { margin-top: 20px; }
.settings-card .hint-text { line-height: 1.8; }
.data-summary { margin: 15px 0; padding: 14px; border-radius: 7px; color: #8d9d8d; background: #f5f8f1; font-size: 11px; line-height: 1.8; }
.settings-card input[type="range"] { width: 100%; accent-color: #689471; }

/* Analysis */
.analysis-layout { display: grid; grid-template-columns: minmax(0,1fr) 326px; align-items: start; gap: 23px; }
.analysis-panel { display: grid; gap: 17px; min-width: 0; }
.panel.analysis-panel { display: block; }
.analysis-score { display: flex; align-items: baseline; gap: 10px; color: #5d8767; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; }
.analysis-score small { color: #9ba69f; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.pv-line { padding: 11px 0; border-bottom: 1px solid #edf1eb; color: #8e9b93; font-size: 11px; line-height: 1.8; }
.pv-line:last-child { border-bottom: 0; }
.pv-line strong { margin-right: 8px; color: #618568; font-size: 12px; font-weight: 650; }
.pv-line.best { color: #607e63; }
.fen-input { width: 100%; min-height: 67px; padding: 10px; resize: vertical; border: 1px solid #e1e9df; border-radius: 7px; color: #879880; background: #fafcf8; font-family: Consolas, monospace; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.move-history { display: flex; flex-wrap: wrap; gap: 5px; max-height: 230px; overflow-y: auto; padding: 5px 0; }
.move-history > div { display: grid; grid-template-columns: 25px 1fr 1fr; align-items: center; gap: 5px; padding: 5px 0; color: #9caa9b; font-size: 11px; }
.move-history button { padding: 5px 8px; border: 0; border-radius: 4px; color: #779171; background: transparent; text-align: left; font-size: 12px; font-weight: 550; }
.move-history button:hover, .move-history button.active { color: #496f48; background: #edf4e7; }
.analysis-help { padding: 13px; border-radius: 8px; color: #8d9c87; background: #f4f7ee; font-size: 11px; line-height: 1.7; }
.analysis-help p:last-child { margin-bottom: 0; }
.engine-indicator { display: inline-flex; align-items: center; gap: 6px; color: #98a894; font-size: 10px; }
.engine-indicator::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #7f9c72; }
.engine-indicator.loading::before { animation: gentle-pulse 1s ease-in-out infinite; }

/* Dialogs and feedback */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: #10261b70; backdrop-filter: blur(4px); }
.modal { width: 100%; max-width: 450px; max-height: 90vh; overflow-y: auto; padding: 29px; border: 1px solid #e1e8db; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px #0e281e30; }
.modal-title { margin: 0 0 10px; color: #3d6547; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.modal > p { color: #98a590; font-size: 12px; line-height: 1.8; }
.promotion-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.promotion-option { display: grid; place-items: center; aspect-ratio: 1; padding: 8px; border: 1px solid #dce7d3; border-radius: 9px; background: #f2f7e9; }
.promotion-option:hover { border-color: #7ea369; background: #e9f1dc; }
.promotion-option img { display: block; width: 100%; height: 100%; object-fit: contain; }
.toast { position: fixed; z-index: 150; left: calc(50% + 109px); bottom: 28px; display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(90vw,500px); padding: 13px 20px; border: 1px solid #385c40; border-radius: 10px; color: #e8f1df; background: #294d32; box-shadow: 0 8px 30px #25432820; transform: translateX(-50%); font-size: 12px; animation: toast-in .2s ease-out; }
.toast svg { width: 16px; height: 16px; }
.loading-spinner { width: 17px; height: 17px; border: 2px solid #dce8d6; border-top-color: #5b8a59; border-radius: 50%; animation: spin .8s linear infinite; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 27px; color: #a7afab; font-size: 9px; }
.page-footer a { color: #8fa38d; }
@keyframes toast-in { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes board-shake { 25% { translate: -2px; } 75% { translate: 2px; } }
@keyframes gentle-pulse { 50% { opacity: .3; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Compact desktop and tablet */
@media (min-width: 1600px) {
  .main-content { padding-left: 46px; padding-right: 46px; }
  .workspace, .analysis-layout { grid-template-columns: minmax(0,760px) 350px; }
}
@media (max-width: 1200px) {
  .sidebar { width: 190px; padding-left: 13px; padding-right: 13px; }
  .brand { padding-left: 10px; gap: 6px; }
  .brand-name { font-size: 24px; }
  .brand-tagline { font-size: 8px; letter-spacing: 1.4px; }
  .nav-button { gap: 10px; padding-left: 12px; font-size: 12px; }
  .main-content { width: calc(100% - 190px); margin-left: 190px; padding: 23px 25px 38px; }
  .workspace, .analysis-layout { grid-template-columns: minmax(0,1fr) 285px; gap: 18px; }
  .board-card { padding: 16px 16px 12px; }
  .panel { padding: 18px; }
  .stat-grid { gap: 12px; }
  .stat-card { padding: 17px 15px; }
  .stat-label { font-size: 10px; }
  .stat-value { font-size: 24px; }
  .stat-icon { top: 15px; right: 12px; width: 25px; height: 25px; }
  .stat-icon svg { width: 13px; height: 13px; }
  .stat-note { font-size: 9px; }
  .puzzle-title { font-size: 19px; }
  .theme-card { padding: 18px; }
  .theme-preview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid { grid-template-columns: minmax(0,1.4fr) minmax(230px,1fr); }
  .toast { left: calc(50% + 95px); }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .workspace, .analysis-layout { grid-template-columns: minmax(0,1fr) 255px; gap: 14px; }
  .panel { padding: 16px; }
  .board-card { padding: 13px 12px 10px; }
  .button { padding-left: 10px; padding-right: 10px; font-size: 10px; }
  .filter-grid { gap: 7px; }
  .select { padding-left: 8px; font-size: 10px; }
  .stat-icon { display: none; }
}
@media (max-width: 900px) {
  .sidebar { width: 76px; align-items: center; padding: 27px 10px 20px; }
  .brand { padding: 0 0 29px; }
  .brand-mark { width: 41px; }
  .brand-name, .brand-tagline, .brand > div:last-child:not(.brand-mark), .brand > span:last-child:not(.brand-mark) { display: none; }
  .sidebar nav { width: 100%; gap: 9px; }
  .nav-button { justify-content: center; width: 47px; height: 47px; padding: 12px; margin: 0 auto; font-size: 0; }
  .nav-button span:not(.icon), .nav-button .nav-label { display: none; }
  .nav-button .icon { width: 21px; height: 21px; }
  .nav-button.active::after { position: absolute; right: 5px; top: 6px; width: 4px; height: 4px; }
  .sidebar-label, .sidebar-divider, .sidebar-note, .sidebar-challenge { display: none; }
  .sidebar-footer { display: block; width: 100%; margin-top: auto; padding: 20px 0 0; }
  .sidebar-footer .local-badge { display: none; }
  .main-content { width: calc(100% - 76px); margin-left: 76px; padding: 22px 26px 40px; }
  .topbar { margin-bottom: 25px; }
  .workspace, .analysis-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .board-card { padding: 19px 21px 13px; }
  .right-panel { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 17px; }
  .right-panel > .panel:first-child { grid-row: span 2; }
  .analysis-panel { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .analysis-panel > .panel:first-child { grid-row: span 2; }
  .panel { padding: 21px; }
  .stat-grid { gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 25px; }
  .stat-icon { display: none; }
  .stat-note { display: block; line-height: 1.6; }
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .motif-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .coord-file, .coord-rank { font-size: 10px; }
  .toast { left: calc(50% + 38px); }
}
@media (max-width: 600px) {
  .app-shell { display: block; padding-bottom: 72px; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 50; width: 100%; height: 64px; display: flex; flex-direction: row; align-items: center; gap: 3px; padding: 6px 8px max(6px,env(safe-area-inset-bottom)); border-top: 1px solid #2b3e3a; border-radius: 0; }
  .sidebar .brand { display: none; }
  .sidebar nav { display: flex; flex: 1; width: auto; align-items: center; justify-content: space-around; gap: 3px; }
  .sidebar-footer { flex: 0 0 18%; width: auto; margin: 0; padding: 0; }
  .sidebar-footer .nav-button { width: 100%; }
  .nav-button { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: auto; min-height: 49px; height: 49px; padding: 5px 2px; margin: 0; border-radius: 7px; font-size: 8px; font-weight: 500; }
  .nav-button span:not(.icon), .nav-button .nav-label { display: inline; }
  .nav-button .icon { width: 19px; height: 19px; }
  .nav-button.active::after { top: 5px; right: calc(50% - 15px); width: 3px; height: 3px; }
  .main-content { width: 100%; margin-left: 0; padding: 17px 16px 25px; }
  .topbar { gap: 10px; margin-bottom: 25px; }
  .breadcrumb { font-size: 10px; gap: 6px; }
  .breadcrumb svg { width: 12px; height: 12px; }
  .topbar-right { gap: 10px; }
  .daily-chip { font-size: 9px; gap: 4px; }
  .daily-chip svg { width: 12px; height: 12px; }
  .avatar { width: 29px; height: 29px; font-size: 9px; }
  .page-heading { display: block; margin-bottom: 22px; }
  .page-heading > .button { margin-top: 14px; }
  .page-heading-row { display: block; }
  .page-heading-row > .button { margin-top: 15px; }
  .eyebrow { margin-bottom: 6px; font-size: 8px; letter-spacing: 1.6px; }
  .page-title { font-size: 28px; letter-spacing: -.8px; }
  .page-subtitle { font-size: 11px; }
  .hero-strip { gap: 12px; padding: 16px; margin-bottom: 19px; }
  .hero-copy h2, .hero-copy h3 { font-size: 12px; }
  .hero-copy p { font-size: 10px; }
  .hero-mark { font-size: 30px; }
  .hero-mark svg { width: 30px; height: 30px; }
  .hero-strip .button { min-height: 33px; padding: 7px 10px; font-size: 9px; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
  .stat-card { min-height: 104px; padding: 14px 15px; border-radius: 10px; }
  .stat-label { font-size: 9px; margin-bottom: 6px; }
  .stat-value { font-size: 24px; }
  .stat-note { font-size: 8px; margin-top: 5px; }
  .stat-icon { display: grid; top: 13px; right: 12px; width: 22px; height: 22px; border-radius: 6px; }
  .stat-icon svg { width: 12px; height: 12px; }
  .workspace, .analysis-layout { gap: 16px; }
  .board-card { padding: 13px 10px 9px; border-radius: 12px; }
  .board-toolbar { padding: 0 1px 10px; }
  .player-avatar { width: 26px; height: 26px; font-size: 16px; }
  .player-info { gap: 7px; }
  .player-name { font-size: 10px; }
  .player-rating { font-size: 9px; }
  .board-label { font-size: 8px; }
  .board-shell { gap: 6px; }
  .eval-bar { flex-basis: 10px; }
  .eval-value { font-size: 7px; }
  .board-wrap { border-radius: 3px; }
  .coord-file, .coord-rank { font-size: 8px; }
  .coord-file { right: 3px; bottom: 3px; }
  .coord-rank { left: 3px; top: 3px; }
  .legal-capture { border-width: 3px; }
  .board-bottom { padding: 11px 0 0 16px; min-height: 44px; }
  .board-controls { gap: 2px; }
  .icon-button { width: 29px; height: 29px; }
  .icon-button svg { width: 14px; height: 14px; }
  .board-shortcuts { margin-top: 8px; font-size: 8px; }
  .board-caption { min-height: 29px; gap: 4px; font-size: 8px; text-align: center; }
  .right-panel, .analysis-panel { grid-template-columns: 1fr; gap: 14px; }
  .right-panel > .panel:first-child, .analysis-panel > .panel:first-child { grid-row: auto; }
  .panel { padding: 20px; border-radius: 11px; }
  .puzzle-title { font-size: 21px; }
  .puzzle-meta, .status-message { font-size: 11px; }
  .button { min-height: 42px; font-size: 11px; }
  .button-row { gap: 8px; }
  .tag { font-size: 10px; }
  .theme-grid { gap: 10px; }
  .theme-card { padding: 16px; border-radius: 10px; }
  .theme-name { font-size: 12px; }
  .theme-description { min-height: 45px; font-size: 10px; margin-bottom: 13px; }
  .theme-icon { width: 32px; height: 32px; margin-bottom: 13px; }
  .theme-icon svg { width: 18px; height: 18px; }
  .theme-count { font-size: 9px; }
  .theme-preview-grid { gap: 9px; }
  .theme-preview-item { gap: 7px; padding: 12px 10px; }
  .theme-preview-item strong { font-size: 10px; }
  .theme-preview-item .mini-icon { width: 26px; height: 26px; }
  .theme-preview-item > .icon:last-child { display: none; }
  .theme-card-top > .tag { padding: 3px 6px; font-size: 7px; }
  .theme-card.active::after { top: 16px; right: 13px; width: 15px; height: 15px; font-size: 9px; }
  .toolbar { display: block; margin-top: 17px; }
  .search-input { max-width: none; margin-bottom: 13px; }
  .theme-categories { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .pill { flex-shrink: 0; font-size: 9px; }
  .section-heading { margin-top: 24px; }
  .section-title { font-size: 14px; }
  .text-link { font-size: 10px; }
  .chart-card { padding: 20px 17px; }
  .chart { min-height: 160px; }
  .chart svg { min-height: 160px; }
  .chart-labels { font-size: 9px; }
  .activity-grid { gap: 3px; }
  .activity-cell { border-radius: 2px; }
  table th, table td { padding: 13px 14px; }
  .settings-card { padding: 21px; }
  .setting-row { gap: 12px; }
  .setting-row label, .setting-row strong { font-size: 11px; }
  .setting-row .select { width: 112px; font-size: 10px; }
  .settings-card .button-row { flex-wrap: wrap; }
  .settings-card .button-row .button { min-width: 45%; }
  .motif-stats { gap: 19px 20px; }
  .modal-backdrop { padding: 18px; }
  .modal { padding: 24px; border-radius: 14px; }
  .modal-title { font-size: 21px; }
  .promotion-options { gap: 7px; }
  .promotion-option { padding: 5px; }
  .toast { left: 50%; bottom: 80px; max-width: calc(100% - 32px); padding: 12px 16px; font-size: 11px; }
  .empty-state { min-height: 260px; }
  .empty-state p { font-size: 11px; }
  .page-footer { padding-top: 20px; font-size: 8px; }
}
@media (max-width: 350px) {
  .main-content { padding-left: 11px; padding-right: 11px; }
  .daily-chip { display: none; }
  .stat-icon { display: none; }
  .theme-grid { grid-template-columns: 1fr; }
  .theme-description { min-height: 0; }
  .motif-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Personalize the board independently of the application appearance. */
:root { --board-light: #e5e3df; --board-dark: #6c7075; --board-light-ink: #62676b; --board-dark-ink: #f6f4ee; }
:root[data-board-theme="classic"] { --board-light: #e5e3df; --board-dark: #6c7075; --board-light-ink: #62676b; --board-dark-ink: #f6f4ee; }
:root[data-board-theme="forest"] { --board-light: #e9e4d3; --board-dark: #6f8e76; --board-light-ink: #587460; --board-dark-ink: #f0ecdd; }
:root[data-board-theme="blue"] { --board-light: #d9e4ed; --board-dark: #67849e; --board-light-ink: #506c85; --board-dark-ink: #edf4f9; }
:root[data-board-theme="walnut"] { --board-light: #eed9b8; --board-dark: #9b7653; --board-light-ink: #8a6543; --board-dark-ink: #fff0db; }
.chessboard { background: var(--board-light); }
.square.light { color: var(--board-light-ink); background: var(--board-light); }
.square.dark { color: var(--board-dark-ink); background: var(--board-dark); }
.square.last-move.light { background: color-mix(in srgb, var(--board-light) 65%, #d2c86d); }
.square.last-move.dark { background: color-mix(in srgb, var(--board-dark) 65%, #b4bd65); }
.square.selected { background: #d3c673 !important; box-shadow: inset 0 0 0 3px #a6a44a; }
.square.hint { background: #a8c380 !important; box-shadow: inset 0 0 0 4px #5d945f; }
.square.in-check { background: radial-gradient(ellipse at center,#d16b56 0%,#b98160 45%,transparent 76%),var(--board-light); }
.square.in-check.dark { background-color: var(--board-dark); }
.square.correct { background: #6db88c !important; box-shadow: inset 0 0 0 4px #a3e7b7; animation: correct-pulse .5s ease-out; }
.square.wrong { background: #d47366 !important; box-shadow: inset 0 0 0 4px #ed9b86; animation: board-shake .18s ease 2; }
.chessboard { touch-action: none; }
.square { touch-action: none; user-select: none; }
.chessboard.dragging, .chessboard.dragging .square { cursor: grabbing !important; }
.chessboard.dragging .square:hover::after { display: none; }
.square.drag-source .piece, .square .piece.drag-source { opacity: .35; }
.square.drop-target { box-shadow: inset 0 0 0 4px #d6eeb3; z-index: 3; }
.drag-ghost { position: fixed; z-index: 2000; top: 0; left: 0; display: grid; place-items: center; pointer-events: none; user-select: none; will-change: transform; filter: drop-shadow(0 9px 5px #0005); }
.drag-ghost img { display: block; width: 88%; height: 88%; object-fit: contain; pointer-events: none; }
.drag-ghost.piece { pointer-events: none; }
.board-theme-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.board-theme-field { display: grid; grid-column: 1 / -1; gap: 6px; margin-top: 13px; }
.board-theme-field label { color:#89969a; font-size:10px; font-weight:550; }
.board-theme-field .select { width:100%; }
.board-theme-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 11px 6px 10px; border: 1px solid #dfe6db; border-radius: 9px; color: #7d8f73; background: #fafcf7; font-size: 10px; font-weight: 600; transition: border-color .18s,background .18s,transform .18s; }
.board-theme-option:hover { transform: translateY(-2px); border-color: #93b380; }
.board-theme-option.active { color: #476c3c; border-color: #7eaa66; background: #f0f7e6; box-shadow: 0 0 0 1px #7eaa66; }
.board-theme-option.active::after { content: "✓"; position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; color: #fff; background: #6b9454; font-size: 8px; }
.swatch { display: grid; grid-template-columns: repeat(2,1fr); width: 38px; height: 38px; overflow: hidden; border-radius: 5px; background: conic-gradient(from 90deg,#6c7075 25%,#e5e3df 0 50%,#6c7075 0 75%,#e5e3df 0); box-shadow: 0 1px 5px #14232b12; }
.swatch > span:nth-child(1), .swatch > span:nth-child(4) { background: var(--swatch-light,#e5e3df); }
.swatch > span:nth-child(2), .swatch > span:nth-child(3) { background: var(--swatch-dark,#6c7075); }
.board-theme-option[data-board-theme="forest"] .swatch, [data-board="forest"] .swatch, [data-theme="forest"] .swatch, .swatch.forest, .swatch-forest { --swatch-light:#e9e4d3; --swatch-dark:#6f8e76; background: conic-gradient(from 90deg,#6f8e76 25%,#e9e4d3 0 50%,#6f8e76 0 75%,#e9e4d3 0); }
.board-theme-option[data-board-theme="blue"] .swatch, [data-board="blue"] .swatch, [data-theme="blue"] .swatch, .swatch.blue, .swatch-blue { --swatch-light:#d9e4ed; --swatch-dark:#67849e; background: conic-gradient(from 90deg,#67849e 25%,#d9e4ed 0 50%,#67849e 0 75%,#d9e4ed 0); }
.board-theme-option[data-board-theme="walnut"] .swatch, [data-board="walnut"] .swatch, [data-theme="walnut"] .swatch, .swatch.walnut, .swatch-walnut { --swatch-light:#eed9b8; --swatch-dark:#9b7653; background: conic-gradient(from 90deg,#9b7653 25%,#eed9b8 0 50%,#9b7653 0 75%,#eed9b8 0); }
.appearance-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.appearance-option { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px; border: 1px solid #dfe6db; border-radius: 8px; color: #7d8f73; background: #fafcf7; font-size: 11px; font-weight: 600; }
.appearance-option .icon { width: 15px; height: 15px; }
.appearance-option:hover { border-color: #93b380; }
.appearance-option.active { color: #476c3c; border-color: #7eaa66; background: #f0f7e6; box-shadow: 0 0 0 1px #7eaa66; }
.sound-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 5px 9px; border: 1px solid #e0e7db; border-radius: 6px; color: #8a9c80; background: #f8fbf4; font-size: 9px; }
.sound-chip .icon { width: 13px; height: 13px; }
.sound-chip.active, .sound-chip[aria-pressed="true"] { color: #598144; border-color: #aecb9c; background: #eef6e5; }
.success-overlay { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 20px; color: #f0ffef; background: radial-gradient(ellipse at center,#10332180,transparent 75%); text-align: center; pointer-events: none; animation: celebrate-in .32s ease-out; }
.success-icon { display: grid; place-items: center; width: 88px; height: 88px; border: 3px solid #c8f8bc; border-radius: 50%; color: #ecffe5; background: linear-gradient(145deg,#55ba74,#208756); box-shadow: 0 0 0 9px #b7f4a52b,0 10px 35px #103b3266; animation: celebrate-pop .56s cubic-bezier(.2,.9,.3,1.35); }
.success-icon > svg { width: 43px; height: 43px; stroke-width: 2.7; }
.success-overlay strong, .success-overlay h3 { margin: 0; color: #f6fff1; font-size: clamp(20px,3vw,31px); font-weight: 750; letter-spacing: -.7px; text-shadow: 0 2px 12px #0b211ecc; }
.success-overlay p, .success-overlay > span:not(.success-icon) { margin: 0; color: #d9f4d4; font-size: 13px; text-shadow: 0 2px 8px #0b211ecc; }
.success-overlay::before, .success-overlay::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 2px; background: #c8e99a; box-shadow: -75px -69px #e4d28a,82px -62px #84ddaa,-100px 9px #a9dfba,95px 23px #e4cf9b,-46px 79px #7bc6a5,56px 81px #c7e6a2; animation: confetti-fly .8s ease-out both; }
.success-overlay::after { rotate: 24deg; animation-delay: .08s; }
@keyframes correct-pulse { 0% { filter: brightness(1.3); } 100% { filter: brightness(1); } }
@keyframes celebrate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebrate-pop { 0% { transform: scale(.45) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.1) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes confetti-fly { 0% { transform: scale(.2) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.4) rotate(40deg); opacity: 0; } }

/* Graphite appearance: every surface keeps the same visual hierarchy. */
:root[data-appearance="dark"] { color-scheme: dark; --bg:#111315; --paper:#1c1f22; --ink:#eeeee7; --muted:#9ca5a4; --line:#2b3032; --green:#73bb8e; --green-dark:#8bcca2; --green-soft:#20342b; --navy:#0c0e10; }
[data-appearance="dark"] body { color: var(--ink); background: radial-gradient(ellipse at 60% 0,#1a1f1b50,transparent 50%),var(--bg); }
[data-appearance="dark"] ::selection { color:#fff; background:#3e6851; }
[data-appearance="dark"] .sidebar { background:#0c0e10; border-right:1px solid #222629; }
[data-appearance="dark"] .brand-name { color:#eeeee8; }
[data-appearance="dark"] .brand-mark, [data-appearance="dark"] .brand-name span { color:#9bc9a2; }
[data-appearance="dark"] .brand-tagline, [data-appearance="dark"] .sidebar-label { color:#67716e; }
[data-appearance="dark"] .nav-button { color:#a1aaa5; }
[data-appearance="dark"] .nav-button .icon { color:#858f88; }
[data-appearance="dark"] .nav-button:hover { color:#efefe8; background:#1b211e; }
[data-appearance="dark"] .nav-button.active { color:#edf4e8; background:#26372b; }
[data-appearance="dark"] .nav-button.active .icon { color:#add0a6; }
[data-appearance="dark"] .sidebar-challenge { border-color:#334235; background:linear-gradient(135deg,#243328,#19261f); }
[data-appearance="dark"] .sidebar-challenge > strong { color:#e3ead9; }
[data-appearance="dark"] .sidebar-challenge > p { color:#a5b39e; }
[data-appearance="dark"] .sidebar-challenge > span:last-of-type { color:#c1cdb6; }
[data-appearance="dark"] .local-badge { color:#8c9a89; }
[data-appearance="dark"] .breadcrumb { color:#88928d; }
[data-appearance="dark"] .breadcrumb strong, [data-appearance="dark"] .breadcrumb span:last-child { color:#c3cbc3; }
[data-appearance="dark"] .daily-chip { color:#b0b9a9; }
[data-appearance="dark"] .daily-chip svg { color:#d3b36f; }
[data-appearance="dark"] .avatar { color:#bed7b2; border-color:#303930; background:#293a2a; box-shadow:0 0 0 1px #40513b; }
[data-appearance="dark"] .eyebrow { color:#9abf8f; }
[data-appearance="dark"] .page-title, [data-appearance="dark"] .section-title { color:#eeeee7; }
[data-appearance="dark"] .page-subtitle { color:#a2aaa5; }
[data-appearance="dark"] .panel, [data-appearance="dark"] .board-card, [data-appearance="dark"] .stat-card, [data-appearance="dark"] .chart-card, [data-appearance="dark"] .settings-card, [data-appearance="dark"] .theme-card, [data-appearance="dark"] .theme-preview-item { color:#e6e7df; background:#1c1f22; border-color:#2c3133; box-shadow:0 3px 12px #0000000b; }
[data-appearance="dark"] .stat-label { color:#a5ada6; }
[data-appearance="dark"] .stat-value { color:#f0efe6; }
[data-appearance="dark"] .stat-value small { color:#929d91; }
[data-appearance="dark"] .stat-note { color:#9aa598; }
[data-appearance="dark"] .stat-trend { color:#9bc08d; }
[data-appearance="dark"] .stat-trend.negative { color:#e0a38f; }
[data-appearance="dark"] .stat-icon { color:#a1bd8e; background:#2a3529; }
[data-appearance="dark"] .stat-card:nth-child(2) .stat-icon { color:#d5bc8b; background:#383328; }
[data-appearance="dark"] .stat-card:nth-child(3) .stat-icon { color:#b0bdcf; background:#2c333d; }
[data-appearance="dark"] .stat-card:nth-child(4) .stat-icon { color:#d5b698; background:#3a3027; }
[data-appearance="dark"] .hero-strip { color:#e5e9da; border-color:#344331; background:linear-gradient(120deg,#253124,#202a22); }
[data-appearance="dark"] .hero-copy p { color:#aab89e; }
[data-appearance="dark"] .hero-mark { color:#93ad7e; }
[data-appearance="dark"] .hero-strip::after { border-color:#3c4d35; }
[data-appearance="dark"] .player-avatar { color:#b6c4a9; background:#2a322a; }
[data-appearance="dark"] .player-name { color:#c8d0c1; }
[data-appearance="dark"] .player-rating, [data-appearance="dark"] .board-label, [data-appearance="dark"] .board-caption, [data-appearance="dark"] .board-shortcuts { color:#98a291; }
[data-appearance="dark"] .board-wrap { box-shadow:0 2px 15px #0003; }
[data-appearance="dark"] .board-bottom > .muted { color:#9da994; }
[data-appearance="dark"] .color-dot { border-color:#a4b296; }
[data-appearance="dark"] .color-dot.black, [data-appearance="dark"] .turn-dot.black { border-color:#8b948a; background:#171d18; }
[data-appearance="dark"] .icon-button { color:#a2ae97; }
[data-appearance="dark"] .icon-button:hover { color:#d6e5c5; border-color:#46523c; background:#2c3527; }
[data-appearance="dark"] .training-badge { color:#b2c99f; background:#2a3727; }
[data-appearance="dark"] .timer, [data-appearance="dark"] .panel-header > .icon { color:#9ca88e; }
[data-appearance="dark"] .puzzle-title { color:#f0eee3; }
[data-appearance="dark"] .puzzle-meta, [data-appearance="dark"] .puzzle-meta strong { color:#a7afa0; }
[data-appearance="dark"] .turn-banner { color:#c2d0b4; border-color:#384231; background:#262e24; }
[data-appearance="dark"] .turn-banner > span:last-child { color:#a2b18f; }
[data-appearance="dark"] .status-message { color:#b1baaa; }
[data-appearance="dark"] .status-message.info { color:#bdcbb8; border:1px solid #3a4933; background:#293325; }
[data-appearance="dark"] .status-message.success { color:#c2edcc; border:1px solid #3d7450; background:#233e2b; }
[data-appearance="dark"] .status-message.error { color:#ffd2c1; border:1px solid #8e5144; background:#492f28; }
[data-appearance="dark"] .button-primary { color:#10251a; background:#8acba3; box-shadow:0 2px 7px #0002; }
[data-appearance="dark"] .button-primary:hover { background:#a5dfb9; }
[data-appearance="dark"] .button-secondary { color:#c0ccb6; border-color:#3c4737; background:#262c25; }
[data-appearance="dark"] .button-secondary:hover { color:#e4eed9; border-color:#748e5b; background:#303c29; }
[data-appearance="dark"] .button-ghost { color:#a5b199; }
[data-appearance="dark"] .button-ghost:hover { color:#d9e8c8; background:#2c3626; }
[data-appearance="dark"] .button-danger { color:#edb5a2; border-color:#66483b; background:#362a23; }
[data-appearance="dark"] .button-danger:hover { background:#49352b; }
[data-appearance="dark"] .count-badge { color:#cadcba; background:#35442d; }
[data-appearance="dark"] .field label, [data-appearance="dark"] .field > span:first-child { color:#a7b39d; }
[data-appearance="dark"] .board-theme-field label { color:#a7b39d; }
[data-appearance="dark"] .select, [data-appearance="dark"] .input, [data-appearance="dark"] .search-input, [data-appearance="dark"] .fen-input { color:#d0d9c4; border-color:#394234; background:#161c17; }
[data-appearance="dark"] .select:hover, [data-appearance="dark"] .input:hover, [data-appearance="dark"] .search-input:hover { border-color:#687d54; }
[data-appearance="dark"] .input::placeholder, [data-appearance="dark"] .search-input input::placeholder { color:#829277; }
[data-appearance="dark"] .search-input input { color:#d0d9c4; }
[data-appearance="dark"] .search-input > .icon { color:#9aaf85; }
[data-appearance="dark"] .hint-text, [data-appearance="dark"] .source-note { color:#9eae90; }
[data-appearance="dark"] .muted { color:#a0ad94; }
[data-appearance="dark"] .panel-divider, [data-appearance="dark"] .sidebar-divider { background:#343d2e; }
[data-appearance="dark"] .training-panel .session-progress { border-color:#343d2e; }
[data-appearance="dark"] .session-progress > div:first-child { color:#a2b193; }
[data-appearance="dark"] .session-progress strong { color:#c0d4ac; }
[data-appearance="dark"] .progress-track, [data-appearance="dark"] .session-dot { background:#303b28; }
[data-appearance="dark"] .progress-fill, [data-appearance="dark"] .session-dot.done { background:#a0c681; }
[data-appearance="dark"] .text-link { color:#b4cd98; }
[data-appearance="dark"] .text-link:hover { color:#d9edbd; }
[data-appearance="dark"] .tag { color:#b2c29e; border-color:#3e4b33; background:#293122; }
[data-appearance="dark"] .tags .tag { color:#bfcea9; }
[data-appearance="dark"] .move-token { color:#c7d7b2; border-color:#435337; background:#2a3523; }
[data-appearance="dark"] .move-token.current { color:#edffdb; border-color:#a4c878; background:#4a6139; }
[data-appearance="dark"] .move-number { color:#9bb184; }
[data-appearance="dark"] .theme-preview-item:hover, [data-appearance="dark"] .theme-card:hover { border-color:#7a945c; background:#242d20; }
[data-appearance="dark"] .theme-preview-item strong { color:#d3dfc3; }
[data-appearance="dark"] .theme-preview-item small, [data-appearance="dark"] .theme-preview-item p { color:#9faf8f; }
[data-appearance="dark"] .theme-preview-item > .icon:last-child { color:#97ae7c; }
[data-appearance="dark"] .mini-icon, [data-appearance="dark"] .theme-icon { color:#bbd19d; border-color:#3b4a30; background:#2c3825; }
[data-appearance="dark"] .mini-icon.tone-1 { color:#d6c18d; border-color:#4a4330; background:#373224; }
[data-appearance="dark"] .mini-icon.tone-2 { color:#b6c7d5; border-color:#3c4b55; background:#29333c; }
[data-appearance="dark"] .mini-icon.tone-3 { color:#d7bba0; border-color:#514535; background:#3a2e23; }
[data-appearance="dark"] .theme-card.active { border-color:#a1c17c; background:#2b3922; box-shadow:0 0 0 1px #a1c17c; }
[data-appearance="dark"] .theme-name { color:#dce6cf; }
[data-appearance="dark"] .theme-description, [data-appearance="dark"] .theme-count { color:#a4b491; }
[data-appearance="dark"] .theme-card.active::after { color:#193114; background:#bbd99a; }
[data-appearance="dark"] .theme-mastery { border-color:#3b4b2e; }
[data-appearance="dark"] .mastery-label, [data-appearance="dark"] .library-count { color:#acbd95; }
[data-appearance="dark"] .pill { color:#b1c19d; border-color:#3d4a32; background:#212a1c; }
[data-appearance="dark"] .pill:hover { border-color:#8aa767; color:#deedca; }
[data-appearance="dark"] .pill.active { color:#ddedc8; border-color:#8aa767; background:#364628; }
[data-appearance="dark"] .chart-card > p, [data-appearance="dark"] .chart-labels, [data-appearance="dark"] .legend { color:#a5b98e; }
[data-appearance="dark"] svg.chart text { fill:#aebd99; }
[data-appearance="dark"] svg.chart line { stroke:#36412b; }
[data-appearance="dark"] svg.chart polyline { stroke:#b3d78e; }
[data-appearance="dark"] svg.chart circle { fill:#b3d78e; stroke:#1c1f22; }
[data-appearance="dark"] .chart-empty { color:#a7b598; }
[data-appearance="dark"] .chart-empty strong { color:#c7d6b3; }
[data-appearance="dark"] .chart-empty > .icon { color:#9cb77b; }
[data-appearance="dark"] .activity-cell { background:#293224; }
[data-appearance="dark"] .activity-cell.level-1 { background:#425938; }
[data-appearance="dark"] .activity-cell.level-2 { background:#64804b; }
[data-appearance="dark"] .activity-cell.level-3 { background:#8cae63; }
[data-appearance="dark"] .activity-cell.level-4 { background:#b5d88d; }
[data-appearance="dark"] .table-wrap { background:#1c1f22; border-color:#343e2e; }
[data-appearance="dark"] table th { color:#b6c5a2; border-color:#38452f; background:#242c1f; }
[data-appearance="dark"] table td { color:#b2c39b; border-color:#303c27; }
[data-appearance="dark"] table td strong { color:#d1e1bb; }
[data-appearance="dark"] table td > small { color:#98ab80; }
[data-appearance="dark"] table tbody tr:hover { background:#252f1f; }
[data-appearance="dark"] .result-badge, [data-appearance="dark"] .result-badge.correct { color:#c5e5b5; background:#354c29; }
[data-appearance="dark"] .result-badge.assisted, [data-appearance="dark"] .result-badge.hint { color:#e6d3a6; background:#4a4027; }
[data-appearance="dark"] .result-badge.skipped, [data-appearance="dark"] .result-badge.error, [data-appearance="dark"] .result-badge.failed { color:#edc1a4; background:#4a3328; }
[data-appearance="dark"] .motif-stat strong { color:#c6d9ac; }
[data-appearance="dark"] .motif-stat > div > span { color:#adbf91; }
[data-appearance="dark"] .empty-state { color:#adbf96; border-color:#495d37; background:#1d2819; }
[data-appearance="dark"] .empty-icon { color:#bbd795; background:#35482a; }
[data-appearance="dark"] .empty-state h2, [data-appearance="dark"] .empty-state h3 { color:#d7e8be; }
[data-appearance="dark"] .empty-state p { color:#aabd92; }
[data-appearance="dark"] .settings-card > p { color:#adbf96; }
[data-appearance="dark"] .setting-row { border-color:#34452b; }
[data-appearance="dark"] .setting-row strong, [data-appearance="dark"] .setting-row label { color:#d0e1ba; }
[data-appearance="dark"] .setting-row p { color:#aabd90; }
[data-appearance="dark"] .toggle { background:#455739; }
[data-appearance="dark"] .toggle[aria-checked="true"], [data-appearance="dark"] .toggle:checked, [data-appearance="dark"] .toggle.active { background:#a0c77d; }
[data-appearance="dark"] .toggle::after { background:#f1f4e7; }
[data-appearance="dark"] .data-summary { color:#bdcfa3; background:#2d3c22; }
[data-appearance="dark"] .analysis-score { color:#bbdf98; }
[data-appearance="dark"] .analysis-score small { color:#a4ba8a; }
[data-appearance="dark"] .pv-line { color:#becfa7; border-color:#3b4f2d; }
[data-appearance="dark"] .pv-line strong { color:#d1e5b5; }
[data-appearance="dark"] .pv-line.best { color:#d0e6b0; }
[data-appearance="dark"] .analysis-help { color:#c2d4a9; background:#2c3c21; }
[data-appearance="dark"] .move-history > div { color:#a1ba83; }
[data-appearance="dark"] .move-history button { color:#bdd5a1; }
[data-appearance="dark"] .move-history button:hover, [data-appearance="dark"] .move-history button.active { color:#e3f5c9; background:#3c522b; }
[data-appearance="dark"] .engine-indicator { color:#c0d5a5; }
[data-appearance="dark"] .modal-backdrop { background:#050806bb; }
[data-appearance="dark"] .modal { color:#e8ecdf; border-color:#485c35; background:#222c1c; box-shadow:0 24px 80px #0008; }
[data-appearance="dark"] .modal-title { color:#e2efcd; }
[data-appearance="dark"] .modal > p { color:#b9cba0; }
[data-appearance="dark"] .promotion-option { border-color:#667d46; background:#b1c792; }
[data-appearance="dark"] .promotion-option:hover { background:#cce0ae; }
[data-appearance="dark"] .toast { color:#ecf5e0; border-color:#76954d; background:#40572e; box-shadow:0 8px 30px #0005; }
[data-appearance="dark"] kbd { color:#bdcfa2; border-color:#4b6038; background:#26351e; }
[data-appearance="dark"] .page-footer, [data-appearance="dark"] .page-footer a { color:#8fa47a; }
[data-appearance="dark"] .board-theme-option, [data-appearance="dark"] .appearance-option { color:#b8cba0; border-color:#415534; background:#25321d; }
[data-appearance="dark"] .board-theme-option:hover, [data-appearance="dark"] .appearance-option:hover { border-color:#a8c67f; background:#304126; }
[data-appearance="dark"] .board-theme-option.active, [data-appearance="dark"] .appearance-option.active { color:#e6f4d3; border-color:#b9d58e; background:#3b502a; box-shadow:0 0 0 1px #b9d58e; }
[data-appearance="dark"] .board-theme-option.active::after { color:#203316; background:#d0e9a5; }
[data-appearance="dark"] .sound-chip { color:#acbf95; border-color:#435734; background:#27371e; }
[data-appearance="dark"] .sound-chip.active, [data-appearance="dark"] .sound-chip[aria-pressed="true"] { color:#deefbf; border-color:#9abf6b; background:#3e562b; }
@media (max-width:600px) {
  .board-theme-options { gap:7px; }
  .board-theme-option { padding:11px 3px 9px; font-size:9px; }
  .swatch { width:34px; height:34px; }
  .success-icon { width:66px; height:66px; border-width:2px; }
  .success-icon > svg { width:33px; height:33px; }
  .success-overlay { gap:10px; }
  .success-overlay p, .success-overlay > span:not(.success-icon) { font-size:11px; }
  [data-appearance="dark"] .sidebar { border-top-color:#30372a; border-right:0; }
}
@media (prefers-reduced-motion:reduce) {
  .success-overlay, .success-icon, .success-overlay::before, .success-overlay::after, .square.correct, .square.wrong { animation:none !important; }
  .success-overlay::before, .success-overlay::after { display:none; }
}

/* Keep the whole training position in view on a desktop display. */
@media (min-width:1000px) and (min-height:650px) {
  .page-training .topbar { margin-bottom:16px; }
  .page-training .page-heading { margin-bottom:18px; }
  .page-training .eyebrow { margin-bottom:5px; }
  .page-training .page-title { margin-bottom:6px; font-size:28px; }
  .page-training .page-subtitle { font-size:12px; }
  .page-training .board-card { padding-top:14px; padding-bottom:8px; }
  .page-training .board-toolbar { min-height:32px; padding-bottom:10px; }
  .page-training .player-avatar { width:27px; height:27px; }
  .page-training .board-shell { justify-content:center; }
  .page-training .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - 300px)); }
  .page-training .board-caption { min-height:26px; margin-top:7px; }
  .page-training .board-bottom { min-height:40px; padding-top:6px; }
  .page-training .workspace + .stat-grid { margin-top:24px; }
}

/* A compact play interface, with a charcoal shell and familiar green accents. */
:root[data-board-theme="forest"] { --board-light:#eeeed2; --board-dark:#769656; --board-light-ink:#5b783e; --board-dark-ink:#f2f2d9; }
.board-theme-option[data-board-theme="forest"] .swatch, .swatch-forest { --swatch-light:#eeeed2; --swatch-dark:#769656; background:conic-gradient(from 90deg,#769656 25%,#eeeed2 0 50%,#769656 0 75%,#eeeed2 0); }
:root[data-appearance="dark"] { --bg:#302e2b; --paper:#262522; --ink:#f2f1eb; --muted:#aaa7a1; --line:#403e3a; --green:#81b64c; --green-dark:#94c760; --green-soft:#354229; --navy:#262522; }
[data-appearance="dark"] body { background:#302e2b; }
[data-appearance="dark"] .sidebar { background:#262522; border-right-color:#1f1e1c; }
[data-appearance="dark"] .brand-tagline, [data-appearance="dark"] .sidebar-label { color:#928e86; }
[data-appearance="dark"] .brand-mark, [data-appearance="dark"] .brand-name span { color:#a8cf76; }
[data-appearance="dark"] .nav-button { color:#c7c4bc; }
[data-appearance="dark"] .nav-button .icon { color:#aaa69e; }
[data-appearance="dark"] .nav-button:hover { background:#36342f; }
[data-appearance="dark"] .nav-button.active { color:#fff; background:#3b3934; }
[data-appearance="dark"] .nav-button.active .icon { color:#a3cb70; }
[data-appearance="dark"] .sidebar-challenge { border-color:#494a39; background:linear-gradient(135deg,#383d2b,#303426); }
[data-appearance="dark"] .panel, [data-appearance="dark"] .board-card, [data-appearance="dark"] .stat-card, [data-appearance="dark"] .chart-card, [data-appearance="dark"] .settings-card, [data-appearance="dark"] .theme-card, [data-appearance="dark"] .theme-preview-item { color:#eeece5; border-color:#403e38; background:#262522; }
[data-appearance="dark"] .breadcrumb, [data-appearance="dark"] .page-subtitle, [data-appearance="dark"] .stat-label, [data-appearance="dark"] .stat-note, [data-appearance="dark"] .puzzle-meta, [data-appearance="dark"] .puzzle-meta strong, [data-appearance="dark"] .hint-text, [data-appearance="dark"] .muted, [data-appearance="dark"] .theme-description, [data-appearance="dark"] .theme-count, [data-appearance="dark"] .settings-card > p, [data-appearance="dark"] .setting-row p, [data-appearance="dark"] .field label, [data-appearance="dark"] .board-theme-field label, [data-appearance="dark"] .player-rating, [data-appearance="dark"] .board-caption, [data-appearance="dark"] .board-bottom > .muted, [data-appearance="dark"] .theme-preview-item small, [data-appearance="dark"] .chart-labels, [data-appearance="dark"] .legend { color:#b5b1a8; }
[data-appearance="dark"] .stat-value, [data-appearance="dark"] .page-title, [data-appearance="dark"] .puzzle-title, [data-appearance="dark"] .section-title, [data-appearance="dark"] .theme-name, [data-appearance="dark"] .theme-preview-item strong, [data-appearance="dark"] .setting-row strong, [data-appearance="dark"] .player-name { color:#f0eee7; }
[data-appearance="dark"] .eyebrow, [data-appearance="dark"] .text-link, [data-appearance="dark"] .stat-trend { color:#acd078; }
[data-appearance="dark"] .button-primary { min-height:43px; color:#fff; border:1px solid #81b64c; border-bottom:4px solid #45752a; background:#81b64c; box-shadow:0 2px 0 #0002; font-size:12px; font-weight:700; }
[data-appearance="dark"] .button-primary:hover { border-color:#95c961; border-bottom-color:#537f32; background:#95c961; }
[data-appearance="dark"] .button-primary:active { border-bottom-width:2px; transform:translateY(2px); }
[data-appearance="dark"] .button-secondary { color:#e0dcd3; border-color:#4a4740; background:#3b3934; }
[data-appearance="dark"] .button-secondary:hover { color:#fff; border-color:#6a675d; background:#48453e; }
[data-appearance="dark"] .button-ghost, [data-appearance="dark"] .icon-button { color:#bcb7ad; }
[data-appearance="dark"] .button-ghost:hover, [data-appearance="dark"] .icon-button:hover { color:#f4f1e8; border-color:#555147; background:#3b3933; }
[data-appearance="dark"] .select, [data-appearance="dark"] .input, [data-appearance="dark"] .search-input, [data-appearance="dark"] .fen-input { color:#e1ddd2; border-color:#4a463d; background:#201f1c; }
[data-appearance="dark"] .search-input input { color:#e1ddd2; }
[data-appearance="dark"] .input::placeholder, [data-appearance="dark"] .search-input input::placeholder { color:#9b9589; }
[data-appearance="dark"] .turn-banner { color:#e0ddcf; border-color:#484b38; background:#343829; }
[data-appearance="dark"] .training-badge, [data-appearance="dark"] .tag, [data-appearance="dark"] .pill { color:#d3d5be; border-color:#4c503a; background:#34372b; }
[data-appearance="dark"] .pill.active { color:#e8f2d6; border-color:#91b666; background:#465632; }
[data-appearance="dark"] .theme-card:hover, [data-appearance="dark"] .theme-preview-item:hover { border-color:#92af69; background:#30352a; }
[data-appearance="dark"] .theme-card.active { border-color:#a7c47d; background:#35412a; }
[data-appearance="dark"] .status-message.info { color:#d7d7c7; border-color:#4d513a; background:#343829; }
[data-appearance="dark"] .status-message.success { color:#e2f7ce; border-color:#658b46; background:#344b28; }
[data-appearance="dark"] .status-message.error { color:#ffd4c5; border-color:#996453; background:#50372d; }
[data-appearance="dark"] .settings-card, [data-appearance="dark"] .setting-row { border-color:#48463d; }
[data-appearance="dark"] .activity-cell { background:#3b3b31; }
[data-appearance="dark"] .activity-cell.level-4, [data-appearance="dark"] .session-dot.done, [data-appearance="dark"] .progress-fill { background:#a3c878; }
.sidebar .nav-button { min-height:42px; padding-top:10px; padding-bottom:10px; }
.sidebar .brand { padding-bottom:26px; }

/* Course library and guided lessons. */
.tab-pills { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 24px; }
.tab-pills .pill { min-height:36px; padding:8px 14px; font-size:11px; }
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.course-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; padding:21px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--paper); transition:transform .18s,border-color .18s,box-shadow .18s; }
.course-card:hover { transform:translateY(-3px); border-color:#99b779; box-shadow:0 7px 22px #0000000d; }
.course-cover { position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; min-height:148px; margin:-21px -21px 20px; padding:26px; overflow:hidden; color:#e8ecd8; background:linear-gradient(135deg,#3a513c,#6c8052); }
.course-cover::before { content:""; position:absolute; width:175px; height:175px; right:-35px; top:-70px; border:1px solid #ffffff21; border-radius:50%; }
.course-cover::after { content:""; position:absolute; width:105px; height:105px; left:-24px; bottom:-64px; border:15px solid #ffffff0b; border-radius:50%; }
.course-cover > .icon, .course-cover > svg { position:relative; z-index:1; width:62px; height:62px; stroke-width:1.15; filter:drop-shadow(0 5px 8px #19271525); }
.course-cover > span:not(.course-color) { position:relative; z-index:1; }
.course-color { position:relative; z-index:1; color:inherit; font-size:54px; line-height:1.1; }
.course-card:nth-child(3n+2) .course-cover { background:linear-gradient(135deg,#4c5761,#7f8c95); }
.course-card:nth-child(3n+3) .course-cover { background:linear-gradient(135deg,#70533b,#aa8b62); }
.course-card h2, .course-card h3 { margin-bottom:8px; color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.35px; }
.course-card > p { margin-bottom:15px; color:#8b9485; font-size:12px; line-height:1.75; }
.course-card .button { align-self:stretch; margin-top:18px; }
.course-card .lesson-progress { margin-top:auto; }
.course-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px; margin:0 0 12px; color:#99a28f; font-size:10px; }
.course-meta > span { display:inline-flex; align-items:center; gap:4px; }
.course-meta .icon { width:12px; height:12px; }
.lesson-progress { padding-top:12px; }
.lesson-progress > div:first-child:not(.progress-track) { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; color:#94a184; font-size:10px; }
.lesson-progress .progress-track { height:5px; }
.lesson-progress > small { display:block; margin-top:6px; color:#9ca68f; font-size:10px; }
.course-intro { padding:25px; margin-bottom:23px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.course-intro h2 { margin-bottom:9px; font-size:22px; letter-spacing:-.5px; }
.course-intro p { max-width:780px; margin-bottom:12px; color:#8b9682; font-size:12px; line-height:1.8; }
.course-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 25px; margin-bottom:23px; overflow:hidden; border:1px solid #d9e5cb; border-radius:13px; color:#526c3d; background:linear-gradient(115deg,#eef5e5,#e2eccf); }
.course-banner h2, .course-banner h3 { margin:0 0 7px; font-size:19px; letter-spacing:-.35px; }
.course-banner p { margin:0; color:#859477; font-size:12px; line-height:1.7; }
.course-banner .button { flex-shrink:0; }
.course-lessons { display:grid; gap:8px; }
.course-lesson { display:flex; align-items:center; gap:11px; width:100%; min-height:61px; padding:12px 14px; border:1px solid #e0e7d9; border-radius:9px; color:#718365; background:#fbfdf8; text-align:left; transition:background .16s,border-color .16s; }
.course-lesson:hover { border-color:#a6c18b; background:#f3f8ec; }
.course-lesson.active { border-color:#8eb569; background:#eef6e4; box-shadow:0 0 0 1px #8eb569; }
.course-lesson.done { color:#69835b; }
.course-lesson > div { flex:1; min-width:0; }
.course-lesson strong { display:block; color:#536f42; font-size:12px; font-weight:650; }
.course-lesson small { display:block; margin-top:3px; color:#98a68b; font-size:10px; }
.course-lesson > .icon:last-child { width:15px; height:15px; margin-left:auto; }
.lesson-step { display:inline-grid; place-items:center; flex-shrink:0; width:28px; height:28px; border:1px solid #dce7d1; border-radius:7px; color:#8a9c7a; background:#f0f5e9; font-size:11px; font-weight:700; }
.course-lesson.active .lesson-step, .course-lesson.done .lesson-step { color:#fff; border-color:#81a75f; background:#81a75f; }
.lesson-comment { padding:14px 15px; margin:15px 0; border-left:3px solid #8cb46b; border-radius:0 8px 8px 0; color:#728366; background:#f2f7eb; font-size:12px; line-height:1.8; }
.lesson-comment p { margin:0 0 9px; }
.lesson-comment p:last-child { margin-bottom:0; }
.lesson-comment strong { color:#54763e; }
.lesson-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0; color:#7d9270; font-size:12px; line-height:1.8; }
.lesson-line button, .lesson-line > span { padding:4px 8px; border:1px solid #e0e9d7; border-radius:5px; color:#6b8758; background:#f6faf0; font:inherit; }
.lesson-line .current, .lesson-line .active { color:#3e622c; border-color:#9cbd7f; background:#e5f0d9; }
.lesson-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.lesson-controls > .button { flex:1; min-width:90px; }
.lesson-complete { padding:18px; margin:17px 0; border:1px solid #c4ddb2; border-radius:10px; color:#64814e; background:#edf6e5; text-align:center; }
.lesson-complete h3, .lesson-complete strong { display:block; margin:0 0 7px; color:#456b30; font-size:17px; font-weight:700; }
.lesson-complete p { margin:0; font-size:12px; line-height:1.7; }
.lesson-complete > .icon { width:28px; height:28px; margin-bottom:10px; }

/* Training ratings show how much evidence sits behind a number. */
.overview-rating { display:flex; align-items:center; gap:15px; padding:21px; margin-bottom:22px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.overview-rating > strong { color:#668d48; font-size:35px; font-weight:750; letter-spacing:-1.1px; font-variant-numeric:tabular-nums; }
.overview-rating h3 { margin:0 0 4px; font-size:14px; }
.overview-rating p { margin:0; color:#98a38d; font-size:11px; line-height:1.6; }
.ratings-table { width:100%; border-collapse:collapse; }
.ratings-table th, .ratings-table td { white-space:nowrap; }
.ratings-table .theme-rating { font-size:16px; }
.theme-rating { display:inline-flex; align-items:baseline; gap:5px; color:#6d914f; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.theme-rating small { color:#a4ae99; font-size:10px; font-weight:400; }
.rating-confidence { display:inline-flex; align-items:center; gap:5px; color:#9aa58d; font-size:10px; }
.rating-confidence::before { content:""; width:5px; height:5px; border-radius:50%; background:#b9c9a8; }
.rating-confidence.established::before, .rating-confidence.high::before { background:#7aa453; }
.rating-coverage { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:12px 0; color:#98a48b; font-size:11px; }
.rating-coverage .progress-track { flex:1; min-width:90px; max-width:220px; }

/* Premium is visually distinct while sharing the application's controls. */
.premium-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px; align-items:stretch; }
.premium-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:27px; border:1px solid #e5ddcb; border-radius:15px; color:#716447; background:#fffdf7; }
.premium-card.featured, .premium-card.active { border-color:#bfaa71; box-shadow:0 0 0 1px #bfaa71; background:linear-gradient(145deg,#fffdf6,#faf4e2); }
.premium-card h2, .premium-card h3 { margin:14px 0 9px; color:#685735; font-size:20px; font-weight:700; }
.premium-card > p { margin-bottom:17px; color:#9a9079; font-size:12px; line-height:1.75; }
.premium-badge { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; padding:5px 9px; border:1px solid #e9d7a9; border-radius:5px; color:#9e8042; background:#fcf3d9; font-size:9px; font-weight:750; letter-spacing:1px; text-transform:uppercase; }
.premium-badge .icon { width:12px; height:12px; }
.premium-price { display:flex; align-items:baseline; gap:6px; margin:9px 0 17px; color:#77613a; font-size:35px; font-weight:750; line-height:1.25; letter-spacing:-1px; }
.premium-price small { color:#aa9c7e; font-size:12px; font-weight:400; letter-spacing:0; }
.premium-features { display:grid; gap:12px; padding:16px 0 0; margin:0 0 20px; border-top:1px solid #ece4d3; list-style:none; }
.premium-features li { display:flex; align-items:flex-start; gap:8px; color:#8d8168; font-size:12px; line-height:1.7; }
.premium-features .icon { width:15px; height:15px; margin-top:2px; color:#93a962; }
.premium-card > .button { margin-top:auto; }
.premium-included { display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid #d6e1c4; border-radius:8px; color:#7b905d; background:#f2f6e9; font-size:11px; line-height:1.7; }
.premium-included .icon { width:16px; height:16px; }

/* Neutral dark surfaces for the new learning pages. */
[data-appearance="dark"] .course-card, [data-appearance="dark"] .course-intro, [data-appearance="dark"] .overview-rating { color:#efede5; border-color:#464238; background:#262522; }
[data-appearance="dark"] .course-card:hover { border-color:#a2bd79; }
[data-appearance="dark"] .course-card h2, [data-appearance="dark"] .course-card h3, [data-appearance="dark"] .course-intro h2 { color:#f1eee3; }
[data-appearance="dark"] .course-card > p, [data-appearance="dark"] .course-intro p, [data-appearance="dark"] .course-meta, [data-appearance="dark"] .lesson-progress > small, [data-appearance="dark"] .lesson-progress > div:first-child:not(.progress-track), [data-appearance="dark"] .overview-rating p, [data-appearance="dark"] .rating-coverage, [data-appearance="dark"] .rating-confidence { color:#b9b2a5; }
[data-appearance="dark"] .course-banner { color:#e5edd6; border-color:#5d6543; background:linear-gradient(110deg,#414b2e,#343c28); }
[data-appearance="dark"] .course-banner p { color:#c0c5a8; }
[data-appearance="dark"] .course-lesson { color:#c6c2b1; border-color:#484638; background:#302f28; }
[data-appearance="dark"] .course-lesson:hover { border-color:#81985a; background:#3b402e; }
[data-appearance="dark"] .course-lesson.active { border-color:#a6c47a; background:#3e4b2f; box-shadow:0 0 0 1px #a6c47a; }
[data-appearance="dark"] .course-lesson strong { color:#eeeddc; }
[data-appearance="dark"] .course-lesson small { color:#b1b59b; }
[data-appearance="dark"] .lesson-step { color:#bcbfa8; border-color:#595d45; background:#3b3e2e; }
[data-appearance="dark"] .course-lesson.active .lesson-step, [data-appearance="dark"] .course-lesson.done .lesson-step { color:#fff; border-color:#81a75f; background:#81a75f; }
[data-appearance="dark"] .lesson-comment { color:#d0d0ba; border-left-color:#a6c579; background:#343a2a; }
[data-appearance="dark"] .lesson-comment strong { color:#d8eac0; }
[data-appearance="dark"] .lesson-line button, [data-appearance="dark"] .lesson-line > span { color:#ccd8b5; border-color:#52613c; background:#37422b; }
[data-appearance="dark"] .lesson-line .active, [data-appearance="dark"] .lesson-line .current { color:#ecf8da; border-color:#b7ce8f; background:#536c3a; }
[data-appearance="dark"] .lesson-complete { color:#c5dfac; border-color:#769858; background:#3b522c; }
[data-appearance="dark"] .lesson-complete h3, [data-appearance="dark"] .lesson-complete strong { color:#e3f4ce; }
[data-appearance="dark"] .theme-rating, [data-appearance="dark"] .overview-rating > strong { color:#bcda93; }
[data-appearance="dark"] .theme-rating small { color:#a9b592; }
[data-appearance="dark"] .premium-card { color:#d9c9a7; border-color:#5e5038; background:#2c2922; }
[data-appearance="dark"] .premium-card.featured, [data-appearance="dark"] .premium-card.active { border-color:#bba16a; box-shadow:0 0 0 1px #bba16a; background:linear-gradient(145deg,#3d3526,#2f2c22); }
[data-appearance="dark"] .premium-card h2, [data-appearance="dark"] .premium-card h3 { color:#f0dfb5; }
[data-appearance="dark"] .premium-card > p, [data-appearance="dark"] .premium-features li { color:#c0b397; }
[data-appearance="dark"] .premium-badge { color:#e1c789; border-color:#756037; background:#4a3d25; }
[data-appearance="dark"] .premium-price { color:#f0d899; }
[data-appearance="dark"] .premium-price small { color:#b9a87d; }
[data-appearance="dark"] .premium-features { border-top-color:#5b4e35; }
[data-appearance="dark"] .premium-features .icon { color:#b7d18b; }
[data-appearance="dark"] .premium-included { color:#d5e2bc; border-color:#647549; background:#3c482d; }

/* Focus mode fits a complete board beside the task panel, including in fullscreen. */
:fullscreen { background:var(--bg); }
::backdrop { background:var(--bg); }
.focus-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.focus-exit { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:31px; padding:6px 11px; border:1px solid #666352; border-radius:6px; color:var(--ink); background:var(--paper); font-size:10px; font-weight:600; }
.focus-exit .icon { width:14px; height:14px; }
.focus-mode { --focus-board-size:min(calc(100dvh - 140px),calc(100vw - 450px),1000px); display:block; height:100dvh; min-height:0; padding-bottom:0; overflow:hidden; }
.focus-mode .sidebar { display:none; }
.focus-mode .main-content { display:flex; flex-direction:column; width:100%; max-width:none; height:100dvh; min-height:0; margin:0; padding:10px 12px; }
.focus-mode .topbar { flex-shrink:0; justify-content:flex-end; min-height:28px; margin:0 0 8px; gap:10px; }
.focus-mode .topbar .breadcrumb, .focus-mode .topbar .daily-chip, .focus-mode .topbar .avatar { display:none; }
.focus-mode .topbar-right { margin-left:auto; }
.focus-mode .page-heading, .focus-mode .stat-grid, .focus-mode .theme-preview, .focus-mode .page-footer, .focus-mode .course-intro, .focus-mode .course-banner { display:none; }
.focus-mode .workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,360px); align-items:start; flex:1; gap:16px; width:100%; max-width:1400px; min-height:0; margin:0 auto; }
.focus-mode .board-card { display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:8px; border-radius:9px; }
.focus-mode .board-toolbar { min-height:28px; padding:0 3px 7px; }
.focus-mode .board-toolbar .player-avatar { width:24px; height:24px; }
.focus-mode .board-toolbar .player-name { font-size:10px; }
.focus-mode .board-toolbar .player-rating { font-size:9px; }
.focus-mode .board-shell { justify-content:center; gap:8px; }
.focus-mode .board-wrap { flex:0 1 auto; width:var(--focus-board-size); max-width:100%; border-radius:3px; }
.focus-mode .chessboard { width:100%; aspect-ratio:1; }
.focus-mode .board-caption, .focus-mode .board-shortcuts { display:none; }
.focus-mode .board-bottom { min-height:32px; padding:4px 3px 0; }
.focus-mode .board-bottom > .muted { font-size:9px; }
.focus-mode .board-bottom .icon-button { width:26px; height:26px; }
.focus-mode .right-panel { display:grid; grid-template-columns:1fr; align-content:start; gap:12px; max-height:calc(100dvh - 64px); min-height:0; overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:#777059 transparent; }
.focus-mode .right-panel > .panel { grid-row:auto; padding:18px; }
.focus-mode .right-panel > .panel:first-child { grid-row:auto; }
.focus-mode .puzzle-title { font-size:21px; }
.focus-mode .training-panel .session-progress { margin-top:15px; padding-top:14px; }
.focus-mode .analysis-layout .board-wrap { max-width:calc(100% - 21px); }
.focus-mode .course-lessons { max-height:none; }
.focus-mode .lesson-comment { font-size:12px; }
.focus-mode .focus-exit { position:relative; z-index:80; }

@media (max-height:900px) {
  .sidebar-challenge { display:none; }
}
@media (min-width:901px) and (max-height:760px) {
  .sidebar { padding-top:23px; }
  .sidebar .brand { padding-bottom:20px; }
  .sidebar .nav-button { min-height:39px; padding-top:8px; padding-bottom:8px; }
  .sidebar-footer { padding-top:15px; }
}
@media (max-width:1200px) {
  .course-grid, .premium-grid { gap:15px; }
  .course-card { padding:18px; }
  .course-cover { margin:-18px -18px 18px; min-height:132px; }
  .premium-card { padding:22px; }
  .course-card h2, .course-card h3 { font-size:16px; }
}
@media (max-width:1000px) {
  .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .premium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .focus-mode .workspace { grid-template-columns:minmax(0,1fr) minmax(270px,320px); gap:12px; }
  .focus-mode { --focus-board-size:min(calc(100dvh - 140px),calc(100vw - 380px)); }
  .focus-mode .right-panel > .panel { padding:15px; }
  .focus-mode .puzzle-title { font-size:18px; }
}
@media (max-width:900px) {
  .sidebar .brand { padding-bottom:25px; }
  .sidebar .nav-button { min-height:43px; height:43px; padding:10px; }
  .sidebar nav { gap:4px; }
  .course-banner { padding:21px; }
  .course-banner h2, .course-banner h3 { font-size:17px; }
}
@media (max-width:749px) {
  .focus-mode { --focus-board-size:min(calc(100dvh - 140px),calc(100vw - 44px)); height:auto; min-height:100dvh; overflow:visible; }
  .focus-mode .main-content { height:auto; min-height:100dvh; padding:9px 10px 20px; }
  .focus-mode .workspace { display:block; }
  .focus-mode .board-card { max-width:620px; margin:0 auto; }
  .focus-mode .board-wrap { max-width:100%; }
  .focus-mode .analysis-layout .board-wrap { max-width:calc(100% - 21px); }
  .focus-mode .right-panel { max-width:620px; max-height:none; margin:13px auto 0; padding-right:0; overflow:visible; }
  .focus-mode .right-panel > .panel { padding:19px; }
  .focus-mode .puzzle-title { font-size:21px; }
  .course-grid, .premium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-banner { align-items:flex-start; flex-direction:column; gap:15px; }
}
@media (max-width:600px) {
  .sidebar nav { flex:1; justify-content:flex-start; gap:3px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .sidebar nav::-webkit-scrollbar { display:none; }
  .sidebar .nav-button { flex:0 0 63px; min-height:49px; height:49px; padding:5px 3px; font-size:8px; }
  .sidebar-footer { flex:0 0 64px; }
  .sidebar-footer .nav-button { width:64px; }
  .sidebar .brand { display:none; }
  .course-grid, .premium-grid { gap:12px; }
  .course-card { padding:16px; border-radius:11px; }
  .course-cover { min-height:112px; margin:-16px -16px 16px; padding:20px; }
  .course-cover > .icon, .course-cover > svg { width:48px; height:48px; }
  .course-color { font-size:42px; }
  .course-card h2, .course-card h3 { font-size:15px; }
  .course-card > p { font-size:11px; }
  .course-meta { gap:5px 8px; font-size:9px; }
  .course-card .button { min-height:38px; padding-left:8px; padding-right:8px; font-size:10px; }
  .course-intro { padding:20px; }
  .course-intro h2 { font-size:20px; }
  .course-lesson { padding:11px; }
  .lesson-comment { font-size:11px; }
  .lesson-step { width:25px; height:25px; font-size:10px; }
  .premium-card { padding:20px; }
  .premium-grid { grid-template-columns:1fr; }
  .premium-card h2, .premium-card h3 { font-size:21px; }
  .premium-price { font-size:33px; }
  .overview-rating { padding:18px; }
  .overview-rating > strong { font-size:31px; }
  .tab-pills { flex-wrap:nowrap; overflow-x:auto; padding:0 0 5px; }
  .tab-pills .pill { flex-shrink:0; }
  .focus-mode .main-content { padding-bottom:20px; }
}
@media (max-width:380px) {
  .course-grid { grid-template-columns:1fr; }
  .course-cover { min-height:135px; }
}

/* Queued moves have their own color, distinct from a selected square. */
.square.premove { background:#b4a4d0 !important; box-shadow:inset 0 0 0 3px #7f62b3; }
.square.premove.dark { background:#8f83b6 !important; }
.square.premove .coord-file, .square.premove .coord-rank { color:#f8f1ff; }
.premove-banner { display:flex; align-items:center; gap:9px; padding:11px 12px; margin:13px 0; border:1px solid #d5c8e9; border-radius:8px; color:#806596; background:#f3edfa; font-size:11px; line-height:1.6; }
.premove-icon { display:inline-grid; place-items:center; flex-shrink:0; width:25px; height:25px; border-radius:6px; color:#8b6baa; background:#e8ddf4; }
.premove-icon .icon, .premove-icon > svg { width:14px; height:14px; }
.premove-banner > span:not(.premove-icon) { flex:1; }
.premove-cancel { display:inline-grid; place-items:center; flex-shrink:0; min-width:25px; min-height:25px; padding:4px 6px; border:0; border-radius:5px; color:#9479a7; background:transparent; font-size:10px; }
.premove-cancel:hover { color:#73548c; background:#e4d8f0; }
.premove-cancel .icon, .premove-cancel > svg { width:13px; height:13px; }
[data-appearance="dark"] .premove-banner { color:#ded0f2; border-color:#756285; background:#40344c; }
[data-appearance="dark"] .premove-icon { color:#d5b9f1; background:#5b456c; }
[data-appearance="dark"] .premove-cancel { color:#c6b0db; }
[data-appearance="dark"] .premove-cancel:hover { color:#f1e5ff; background:#5b456c; }
.focus-mode .right-panel .course-intro { display:block; }

/* Reconcile the course cards and rating overview with their rendered content. */
button.course-card { font:inherit; text-align:left; }
.course-color { position:absolute; z-index:2; top:12px; left:14px; display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #ffffff30; border-radius:5px; color:#f0f1e4; background:#17201428; font-size:8px; font-weight:750; line-height:1.3; letter-spacing:1.1px; }
.course-color .color-dot { width:7px; height:7px; margin:0; }
.course-card > .course-intro { display:flex; flex:1; flex-direction:column; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.course-card > .course-intro > .eyebrow { min-height:0; margin-bottom:7px; font-size:8px; line-height:1.6; letter-spacing:1.2px; }
.course-card > .course-intro h2 { margin-bottom:9px; font-size:18px; line-height:1.35; letter-spacing:-.35px; }
.course-card > .course-intro > p:not(.eyebrow) { flex:1; margin-bottom:18px; font-size:12px; line-height:1.75; }
.course-card > .course-intro .course-meta { justify-content:space-between; margin-top:auto; margin-bottom:10px; font-size:10px; }
.course-card > .course-intro .course-meta strong { font-weight:650; }
.course-card > .course-intro > .text-link { align-self:flex-start; margin-top:16px; }
.course-banner > div { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; column-gap:12px; row-gap:5px; }
.course-banner > div > .icon { grid-row:1 / span 2; width:26px; height:26px; margin-top:2px; }
.course-banner > div > strong { display:block; font-size:14px; font-weight:650; line-height:1.5; }
.course-banner > div > p { grid-column:2; max-width:780px; font-size:11px; line-height:1.8; }
.course-banner > .tag { flex-shrink:0; white-space:nowrap; }
.lesson-step { display:inline-flex; width:auto; height:auto; min-height:29px; padding:5px 10px; border-radius:5px; font-size:12px; line-height:1.5; }
.lesson-comment .lesson-step { margin-top:3px; }
.course-lesson { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; }
.course-lesson > span:first-child { display:grid; place-items:center; width:28px; height:28px; border:1px solid #d9e5ce; border-radius:6px; color:#8c9f7a; background:#f0f5e8; font-size:10px; font-weight:700; }
.course-lesson > span:first-child .icon { width:14px; height:14px; }
.course-lesson > strong { min-width:0; line-height:1.5; }
.course-lesson > span:last-child:not(:first-child) { color:#97a486; font-size:10px; font-weight:550; white-space:nowrap; }
.course-lessons > h3 { margin:0 0 6px; font-size:13px; }
.course-lessons > .hint-text { margin-bottom:0; }
.panel.rating-coverage { display:block; margin:0; font-size:inherit; }
.rating-coverage > .eyebrow { margin-bottom:4px; }
.rating-coverage .overview-rating { display:flex; align-items:baseline; gap:5px; padding:0; margin:4px 0 3px; border:0; border-radius:0; color:#6e954d; background:transparent; font-size:52px; font-weight:750; line-height:1.2; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.overview-rating > small { color:#a5af98; font-size:20px; font-weight:450; letter-spacing:-.4px; }
.rating-coverage > h3 { margin:0 0 16px; font-size:14px; font-weight:550; }
.rating-coverage > .progress-track { width:100%; max-width:none; }
.rating-coverage > .muted { margin-top:16px; margin-bottom:0; font-size:11px; line-height:1.8; }
.toolbar > .select { width:auto; min-width:180px; max-width:260px; }
[data-appearance="dark"] .course-card > .course-intro { border:0; background:transparent; }
[data-appearance="dark"] .course-lesson > span:first-child { color:#cbd0b7; border-color:#5d6248; background:#3c412e; }
[data-appearance="dark"] .course-lesson.active > span:first-child { color:#f7ffe9; border-color:#b0cd86; background:#738b4e; }
[data-appearance="dark"] .course-lesson > span:last-child:not(:first-child) { color:#b8c69e; }
[data-appearance="dark"] .rating-coverage .overview-rating { color:#bedc97; border:0; background:transparent; }
[data-appearance="dark"] .overview-rating > small { color:#abae99; }
@media (max-width:1200px) {
  .course-card > .course-intro h2 { font-size:16px; }
}
@media (max-width:600px) {
  .course-color { top:10px; left:10px; padding:4px 6px; font-size:7px; letter-spacing:.8px; }
  .course-card > .course-intro h2 { font-size:15px; }
  .course-card > .course-intro > p:not(.eyebrow) { margin-bottom:14px; font-size:11px; }
  .course-card > .course-intro > .eyebrow { font-size:7px; }
  .course-card > .course-intro > .text-link { font-size:10px; }
  .course-banner > div { grid-template-columns:24px minmax(0,1fr); column-gap:9px; }
  .course-banner > div > .icon { width:21px; height:21px; }
  .course-banner > div > strong { font-size:12px; }
  .course-banner > div > p { font-size:10px; }
  .lesson-step { width:auto; height:auto; font-size:11px; }
  .rating-coverage .overview-rating { font-size:46px; }
  .overview-rating > small { font-size:18px; }
  .toolbar > .select { width:100%; max-width:none; }
}

@media (min-width:1000px) and (min-height:650px) {
  .app-shell:not(.focus-mode) .page-course .topbar { margin-bottom:16px; }
  .app-shell:not(.focus-mode) .page-course .page-heading { margin-bottom:18px; }
  .app-shell:not(.focus-mode) .page-course .eyebrow { margin-bottom:5px; }
  .app-shell:not(.focus-mode) .page-course .page-title { margin-bottom:6px; font-size:28px; }
  .app-shell:not(.focus-mode) .page-course .page-subtitle { font-size:12px; }
  .app-shell:not(.focus-mode) .page-course .board-card { padding-top:14px; padding-bottom:8px; }
  .app-shell:not(.focus-mode) .page-course .board-toolbar { min-height:32px; padding-bottom:10px; }
  .app-shell:not(.focus-mode) .page-course .player-avatar { width:27px; height:27px; }
  .app-shell:not(.focus-mode) .page-course .board-shell { justify-content:center; }
  .app-shell:not(.focus-mode) .page-course .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - 300px)); }
  .app-shell:not(.focus-mode) .page-course .board-caption { min-height:26px; margin-top:7px; }
  .app-shell:not(.focus-mode) .page-course .board-bottom { min-height:40px; padding-top:6px; }
}

/* Flat play controls: a square has one readable state at a time. */
.chessboard .square { box-shadow:none !important; filter:none; animation:none !important; transition:none; }
.chessboard .square::after { display:none !important; }
.square .piece img, .square > img { filter:none; }
.square.light { background:var(--board-light); }
.square.dark { background:var(--board-dark); }
.square.last-move.light { background:color-mix(in srgb,var(--board-light) 78%,#abae67); }
.square.last-move.dark { background:color-mix(in srgb,var(--board-dark) 72%,#abae67); }
.square.selected.light { background:color-mix(in srgb,var(--board-light) 62%,#a7ad5e) !important; }
.square.selected.dark { background:color-mix(in srgb,var(--board-dark) 55%,#a7ad5e) !important; }
.square.hint.light { background:color-mix(in srgb,var(--board-light) 65%,#72994a) !important; }
.square.hint.dark { background:color-mix(in srgb,var(--board-dark) 62%,#9bb76c) !important; }
.square.correct.light { background:color-mix(in srgb,var(--board-light) 80%,#769656) !important; }
.square.correct.dark { background:color-mix(in srgb,var(--board-dark) 75%,#a4b971) !important; }
.square.wrong.light { background:color-mix(in srgb,var(--board-light) 56%,#c37764) !important; }
.square.wrong.dark { background:color-mix(in srgb,var(--board-dark) 45%,#b66d59) !important; }
.square.premove.light { background:color-mix(in srgb,var(--board-light) 60%,#a397bd) !important; }
.square.premove.dark { background:color-mix(in srgb,var(--board-dark) 45%,#9185aa) !important; }
.square.in-check.light { background:color-mix(in srgb,var(--board-light) 52%,#bd7362); }
.square.in-check.dark { background:color-mix(in srgb,var(--board-dark) 45%,#bd7362); }
.square:focus-visible { outline:2px solid #2c3f24; outline-offset:-2px; }
.legal-dot { position:absolute; z-index:3; width:22%; height:22%; border:0; border-radius:50%; opacity:1; background:#1820152e; box-shadow:none; pointer-events:none; }
.legal-capture { position:absolute; z-index:3; inset:4%; border:4px solid #18201545; border-radius:50%; opacity:1; background:transparent; box-shadow:none; pointer-events:none; }
.square.drop-target::before { content:""; position:absolute; z-index:4; inset:2px; border:2px solid #20351680; border-radius:0; background:transparent; pointer-events:none; }
.square.drag-source .piece, .square .piece.drag-source { opacity:.3; }
.success-overlay { inset:auto 10px 10px auto; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:7px; max-width:calc(100% - 20px); padding:7px 10px; border:1px solid #6e8a50; border-radius:5px; color:#f2f8e9; background:#3c542a; animation:none; }
.success-icon { width:22px; height:22px; border:0; border-radius:0; color:#d9efbf; background:transparent; box-shadow:none; animation:none; }
.success-icon > svg { width:19px; height:19px; stroke-width:2; }
.success-overlay strong, .success-overlay h3 { font-size:12px; font-weight:650; letter-spacing:0; text-shadow:none; }
.success-overlay p, .success-overlay > span:not(.success-icon) { color:#cfddbb; font-size:10px; text-shadow:none; }
.success-overlay::before, .success-overlay::after { display:none; }
.drag-ghost { filter:drop-shadow(0 3px 2px #0003); }

/* Practical page chrome and learning controls. */
.brand-tagline, .sidebar-label, .sidebar-challenge, .page-heading > div > .eyebrow { display:none; }
.sidebar .brand { padding-bottom:22px; }
.sidebar .brand-name { font-size:29px; }
.page-heading { margin-bottom:18px; }
.page-title { margin-bottom:5px; font-size:27px; font-weight:700; letter-spacing:-.6px; }
.page-subtitle { font-size:12px; }
.topbar { margin-bottom:18px; }
.panel, .board-card, .stat-card, .theme-card, .theme-preview-item, .course-card, .settings-card, .chart-card { border-radius:8px; box-shadow:none; }
.button { border-radius:5px; }
.course-card:hover, .theme-card:hover { transform:none; box-shadow:none; }
.course-cover { min-height:112px; background:#677c4f; }
.course-cover::before, .course-cover::after { display:none; }
.course-card:nth-child(3n+2) .course-cover { background:#5f6e76; }
.course-card:nth-child(3n+3) .course-cover { background:#92724e; }
.course-cover > .icon, .course-cover > svg { width:49px; height:49px; filter:none; }
.course-banner, .hero-strip { border-radius:8px; }
.hero-strip::after { display:none; }
.lesson-comment { border-radius:0 5px 5px 0; }
.opening-game-status { display:flex; align-items:flex-start; gap:8px; padding:11px 12px; margin:12px 0; border:1px solid #d6e1c9; border-radius:6px; color:#697f51; background:#f1f5e9; font-size:12px; line-height:1.7; }
.opening-game-status .icon { width:15px; height:15px; margin-top:2px; }
.repertoire-filters { display:flex; align-items:flex-end; justify-content:flex-start; flex-wrap:wrap; gap:10px; margin:16px 0 22px; }
.repertoire-filters .field { flex:1; min-width:150px; max-width:250px; }
.repertoire-filters > .select { width:auto; min-width:145px; max-width:240px; }
.repertoire-filters .tab-pills { margin:0; }
.repertoire-filters .pill { min-height:37px; }
.compact-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:19px; }
.compact-header h1 { margin:0; font-size:27px; font-weight:700; line-height:1.25; letter-spacing:-.6px; }
.compact-header h2 { margin:0; font-size:18px; font-weight:650; }
.compact-header p { margin:4px 0 0; color:#91998b; font-size:12px; line-height:1.6; }
.compact-header .button { flex-shrink:0; }

/* Progress dashboard and local profile. */
.analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0; }
.analytics-card { min-width:0; padding:21px; overflow:hidden; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); }
.analytics-card.wide, .analytics-card.full-width { grid-column:1 / -1; }
.analytics-card > h2, .analytics-card > h3 { margin:0 0 6px; font-size:14px; font-weight:650; }
.analytics-card > p { margin:0 0 15px; color:#98a08e; font-size:11px; line-height:1.7; }
.analytics-card .panel-header { margin-bottom:13px; }
.analytics-card .panel-header h2, .analytics-card .panel-header h3 { font-size:14px; }
.analytics-chart { display:block; width:100%; min-width:0; height:auto; max-height:265px; margin-top:13px; overflow:visible; }
.analytics-chart text { fill:#98a08e; font-family:inherit; font-size:10px; }
.analytics-chart .grid-line, .analytics-chart .chart-grid { stroke:var(--line); stroke-width:1; }
.analytics-chart .axis-line { stroke:#dce4d4; stroke-width:1; }
.analytics-chart .chart-line { fill:none; stroke:#81a959; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.analytics-chart .chart-area { fill:#81a959; opacity:.12; }
.analytics-legend { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:7px 14px; margin-top:13px; color:#929d85; font-size:10px; }
.analytics-legend > span { display:inline-flex; align-items:center; gap:5px; }
.analytics-legend i, .analytics-legend .legend-dot { display:inline-block; flex-shrink:0; width:7px; height:7px; border-radius:50%; background:#81a959; }
.activity-day { display:grid; place-items:center; min-width:0; aspect-ratio:1; padding:0; border:0; border-radius:3px; color:#8f9a82; background:#edf1e7; font-size:9px; }
.activity-day.level-1 { background:#d9e5ca; }
.activity-day.level-2 { background:#b8d198; }
.activity-day.level-3 { background:#91b66b; }
.activity-day.level-4 { color:#fff; background:#678e42; }
.activity-day > span, .activity-day > small { line-height:1.2; }
.profile-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:15px; }
.profile-form .field { gap:6px; }
.profile-form label { display:block; margin-bottom:6px; color:#8d9980; font-size:11px; }
.profile-form .input, .profile-form .select { min-height:40px; }
.profile-form > .button { justify-self:start; }
.profile-form .form-actions, .profile-form .hint-text { grid-column:1 / -1; }
.profile-form .form-actions { display:flex; align-items:center; gap:10px; margin-top:3px; }

[data-appearance="dark"] .panel, [data-appearance="dark"] .board-card, [data-appearance="dark"] .stat-card, [data-appearance="dark"] .theme-card, [data-appearance="dark"] .theme-preview-item, [data-appearance="dark"] .course-card, [data-appearance="dark"] .settings-card, [data-appearance="dark"] .chart-card, [data-appearance="dark"] .analytics-card { border-color:#3e3c36; background:#262522; box-shadow:none; }
[data-appearance="dark"] .nav-button.active { background:#3b3934; }
[data-appearance="dark"] .button-primary { box-shadow:none; }
[data-appearance="dark"] .hero-strip, [data-appearance="dark"] .course-banner { border-color:#4a4b3b; background:#363b2c; }
[data-appearance="dark"] .analytics-card > p, [data-appearance="dark"] .analytics-legend, [data-appearance="dark"] .compact-header p, [data-appearance="dark"] .profile-form label { color:#b6b1a7; }
[data-appearance="dark"] .analytics-chart text { fill:#aba69a; }
[data-appearance="dark"] .analytics-chart .axis-line { stroke:#565146; }
[data-appearance="dark"] .opening-game-status { color:#d9e3c4; border-color:#596548; background:#35422c; }
[data-appearance="dark"] .activity-day { color:#a6ab99; background:#393c31; }
[data-appearance="dark"] .activity-day.level-1 { background:#4b5e3d; }
[data-appearance="dark"] .activity-day.level-2 { background:#68864a; }
[data-appearance="dark"] .activity-day.level-3 { color:#e6f2d3; background:#88a95f; }
[data-appearance="dark"] .activity-day.level-4 { color:#203018; background:#afd280; }
@media (min-width:601px) {
  .sidebar { height:100dvh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#565247 transparent; }
  .sidebar .brand, .sidebar nav, .sidebar-footer { flex-shrink:0; }
}
@media (max-width:900px) {
  .analytics-grid { gap:14px; }
  .analytics-card { padding:18px; }
  .repertoire-filters .field { max-width:none; }
}
@media (max-width:600px) {
  .compact-header { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .compact-header h1 { font-size:25px; }
  .analytics-grid { grid-template-columns:1fr; gap:13px; margin-top:16px; }
  .analytics-card.wide, .analytics-card.full-width { grid-column:auto; }
  .analytics-card { padding:18px 16px; }
  .analytics-chart { max-height:235px; }
  .profile-form { grid-template-columns:1fr; gap:13px; }
  .repertoire-filters { gap:8px; margin-top:12px; }
  .repertoire-filters .field { min-width:135px; }
  .repertoire-filters > .select { flex:1; min-width:135px; max-width:none; }
  .success-overlay { gap:5px; padding:6px 8px; }
  .success-overlay strong { font-size:11px; }
  .success-overlay > span:not(.success-icon) { font-size:9px; }
  .legal-capture { border-width:3px; }
}

:root { --analytics-line:#789d52; --analytics-muted:#8d9683; --analytics-grid:#e3e8dc; --analytics-fill:#81b64c20; --analytics-text:#4c5f3e; }
:root[data-appearance="dark"] { --analytics-line:#9ac466; --analytics-muted:#aaa59b; --analytics-grid:#48443b; --analytics-fill:#81b64c25; --analytics-text:#d7d3c8; }
.analytics-dot { display:inline-block; flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--analytics-line); }
.analytics-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:180px; padding:20px; color:var(--analytics-muted); text-align:center; font-size:11px; line-height:1.7; }
.analytics-empty strong { color:var(--analytics-text); font-size:12px; font-weight:600; }
.analytics-empty > .icon { width:25px; height:25px; margin-bottom:5px; color:var(--analytics-line); }
.square:focus-visible { outline-color:#1c2c1b; }

/* Board pages use the space released by the compact header. */
@media (min-width:1000px) and (min-height:650px) {
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .topbar { margin-bottom:16px; }
  .app-shell:not(.focus-mode) .page-opening-game .page-heading { margin-bottom:16px; }
  .app-shell:not(.focus-mode) .page-opening-game .page-title { margin-bottom:5px; font-size:28px; }
  .app-shell:not(.focus-mode) .page-opening-game .page-subtitle { font-size:12px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .board-card { padding-top:12px; padding-bottom:8px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .board-toolbar { min-height:30px; padding-bottom:8px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .player-avatar { width:26px; height:26px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .board-shell { justify-content:center; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - 190px)); }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .board-caption { display:none; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game) .board-bottom { min-height:32px; padding-top:4px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-opening-game):has(> .page-heading) .board-wrap { width:min(100%,calc(100dvh - 260px)); }
}
.app-shell:not(.focus-mode) .course-lessons { max-height:420px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#776f5c transparent; }
.repertoire-filters > .search-input { flex:1 1 240px; min-width:210px; max-width:none; margin:0; }
.repertoire-filters > .select { flex:0 1 200px; min-width:160px; max-width:230px; }
@media (max-width:600px) {
  .repertoire-filters > .search-input { flex-basis:100%; min-width:0; }
  .repertoire-filters > .select { flex:1 1 135px; min-width:135px; max-width:none; }
}

/* Lesson status is information, so keep its treatment small and quiet. */
.mastery-badge { display:inline-flex; align-items:center; justify-content:center; gap:4px; width:max-content; max-width:100%; padding:3px 7px; border:1px solid #dfe2d9; border-radius:4px; color:#909789; background:#f5f6f2; font-size:9px; font-weight:550; line-height:1.5; white-space:nowrap; }
.mastery-badge .icon { width:11px; height:11px; }
.mastery-badge.learning, .mastery-badge.mastery-learning, .mastery-badge[data-state="learning"] { color:#728796; border-color:#dce4e8; background:#eef3f6; }
.mastery-badge.review, .mastery-badge.mastery-review, .mastery-badge[data-state="review"] { color:#9b835a; border-color:#e8dfcb; background:#f8f3e7; }
.mastery-badge.mastered, .mastery-badge.mastery-mastered, .mastery-badge[data-state="mastered"] { color:#718953; border-color:#d9e4cc; background:#f0f6e8; }
.course-lesson:has(> .mastery-badge) { grid-template-columns:28px minmax(0,1fr) auto 14px; }
.course-lesson > .mastery-badge { padding:3px 5px; font-size:8px; }
.course-meta .mastery-badge { font-size:8px; }
.mastery-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 20px; }
.mastery-stats > div, .mastery-stats > article { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--paper); font-size:10px; }
.mastery-stats strong { display:block; margin:2px 0 4px; color:var(--ink); font-size:25px; font-weight:700; line-height:1.25; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.mastery-stats small { color:var(--muted); font-size:9px; }
.due-item { display:flex; align-items:center; justify-content:space-between; gap:13px; min-height:52px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.due-item:last-child { border-bottom:0; }
.due-item > div { flex:1; min-width:0; }
.due-item strong { display:block; color:var(--ink); font-size:12px; font-weight:600; line-height:1.5; }
.due-item small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.due-item .button { flex-shrink:0; min-height:33px; padding:7px 11px; font-size:10px; }
.speed-stat { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 9px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.speed-stat strong { color:var(--ink); font-size:27px; font-weight:700; line-height:1.25; letter-spacing:-.5px; }
.speed-stat small { color:var(--muted); font-size:10px; }
.speed-progress { height:5px; margin:11px 0; overflow:hidden; border-radius:3px; background:#edf1e7; }
.speed-progress > span, .speed-progress > div { display:block; height:100%; border-radius:inherit; background:#8eb565; transition:width .2s linear; }
.speed-progress.warning > span, .speed-progress.warning > div { background:#c5a164; }
.repertoire-warning { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin:13px 0; border:1px solid #e4dcc8; border-left:3px solid #baa16d; border-radius:4px; color:#958364; background:#faf6ec; font-size:11px; line-height:1.7; }
.repertoire-warning > .icon { flex-shrink:0; width:14px; height:14px; margin-top:2px; }
.repertoire-warning p { margin:0; }
[data-appearance="dark"] .mastery-badge { color:#b1b0a5; border-color:#49483e; background:#34342d; }
[data-appearance="dark"] .mastery-badge.learning, [data-appearance="dark"] .mastery-badge.mastery-learning, [data-appearance="dark"] .mastery-badge[data-state="learning"] { color:#bdcbd2; border-color:#4d5d65; background:#343f45; }
[data-appearance="dark"] .mastery-badge.review, [data-appearance="dark"] .mastery-badge.mastery-review, [data-appearance="dark"] .mastery-badge[data-state="review"] { color:#d6c196; border-color:#6a5e42; background:#463e2c; }
[data-appearance="dark"] .mastery-badge.mastered, [data-appearance="dark"] .mastery-badge.mastery-mastered, [data-appearance="dark"] .mastery-badge[data-state="mastered"] { color:#bfd39f; border-color:#5e7044; background:#39472c; }
[data-appearance="dark"] .speed-progress { background:#414433; }
[data-appearance="dark"] .repertoire-warning { color:#d5c39d; border-color:#675d43; border-left-color:#b29a62; background:#3d382b; }
@media (max-width:900px) {
  .mastery-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .mastery-stats { gap:9px; }
  .mastery-stats > div, .mastery-stats > article { padding:12px; }
  .mastery-stats strong { font-size:23px; }
  .due-item { gap:9px; }
  .due-item strong { font-size:11px; }
  .course-lesson:has(> .mastery-badge) { grid-template-columns:25px minmax(0,1fr) auto; }
  .course-lesson:has(> .mastery-badge) > .icon:last-child { display:none; }
}

@media(min-width:1101px){.app-shell:not(.focus-mode) .page-course:not(:has(> .page-heading)) .board-wrap{width:min(100%,calc(100dvh - 190px));}}

/* Guided repertoire, timed tactics, and position review. */
.guide-workspace { align-items:start; }
.guide-panel { min-width:0; }
.guide-panel .puzzle-title { margin:9px 0 14px; font-size:21px; line-height:1.3; overflow-wrap:anywhere; }
.guide-panel > .panel-header { gap:9px; }
.guide-panel > .panel-header .training-badge { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.guide-panel > .status-message { min-height:40px; margin:12px 0; padding:10px 12px; }
.guide-modes { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 14px; border:0; background:transparent; }
.guide-modes .button { flex:1 1 auto; min-height:34px; padding:8px 9px; font-size:10px; white-space:nowrap; }
.recommendation-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 10px; margin:14px 0; padding:14px 16px; border:1px solid #d3dec7; border-radius:6px; background:#f1f5e9; }
.recommendation-card > span { color:#71845d; font-size:10px; font-weight:600; }
.recommendation-card > strong { grid-column:1; color:#3d582c; font-size:39px; font-weight:750; line-height:1.15; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.recommendation-card > small { grid-column:1 / -1; margin-top:4px; color:#879278; font-size:9px; line-height:1.5; }
.recommendation-card > .button { grid-column:2; grid-row:1 / 3; max-width:135px; padding:7px 8px; color:#6e8557; font-size:10px; line-height:1.45; white-space:normal; }
.guide-plan, .coach-plan { padding:12px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.75; }
.guide-plan h3, .coach-plan h3 { margin:0 0 7px; color:var(--ink); font-size:12px; font-weight:650; }
.guide-plan p { margin:8px 0 0; }
.guide-plan ul, .coach-plan ul { display:grid; gap:5px; margin:0; padding-left:17px; }
.guide-plan li, .coach-plan li { padding-left:2px; }
.guide-plan li::marker, .coach-plan li::marker { color:var(--green); }
.guide-panel details, .library-list details { margin-top:13px; font-size:11px; line-height:1.65; }
.guide-panel summary, .library-list summary { color:var(--muted); cursor:pointer; }
.guide-panel summary:focus-visible, .library-list summary:focus-visible { outline:2px solid var(--green); outline-offset:4px; border-radius:2px; }
.guide-panel .field { margin:14px 0; }
.guide-panel .field label { font-size:10px; line-height:1.5; }
.guide-panel .select { max-width:100%; }
.guide-panel .mastery-stats { display:flex; flex-wrap:wrap; gap:6px 12px; margin:14px 0; color:var(--muted); font-size:10px; }
.guide-panel .lesson-line { max-height:130px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.move-quality { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 10px; margin:12px 0; padding:9px 11px; border:1px solid var(--line); border-left:3px solid #9ca68f; border-radius:4px; color:var(--muted); background:color-mix(in srgb,var(--paper) 94%,var(--ink)); font-size:10px; line-height:1.5; }
.move-quality strong { font-size:11px; font-weight:650; }
.move-quality.best { border-left-color:#78a442; color:#64803e; }
.move-quality.good { border-left-color:#8baa68; color:#71834f; }
.move-quality.inaccuracy { border-left-color:#c6a44a; color:#a38b48; }
.move-quality.mistake { border-left-color:#d68b49; color:#ac7944; }
.move-quality.blunder { border-left-color:#c86a5c; color:#ac6155; }
.reply-list { display:flex; flex-wrap:wrap; gap:6px; max-height:168px; margin:10px 0 0; padding:1px 3px 1px 1px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.reply-list .button { min-width:43px; min-height:32px; padding:6px 9px; font-size:11px; font-variant-numeric:tabular-nums; }
.library-list { min-width:0; }
.library-list > .panel-header { gap:8px; margin-bottom:12px; }
.library-list .panel-header h3 { margin:0; font-size:13px; }
.library-toolbar { display:grid; gap:8px; margin-bottom:13px; }
.library-toolbar :is(.input,.select) { min-width:0; width:100%; min-height:36px; font-size:11px; }
.library-list .course-lesson { grid-template-columns:34px minmax(0,1fr) auto; gap:9px; min-height:58px; margin-top:6px; padding:10px; }
.library-list .course-lesson > span:first-child { width:34px; height:27px; font-size:9px; }
.library-list .course-lesson > strong { font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.library-list .course-lesson small { font-size:9px; }
.library-list > .button-row { justify-content:space-between; align-items:center; margin-top:13px; color:var(--muted); font-size:10px; }
.library-list > .button-row .button { min-height:31px; min-width:37px; padding:6px 10px; }
.library-list details .hint-text { margin-top:9px; }
.board-arrow { position:absolute; z-index:6; inset:0; display:block; width:100%; height:100%; overflow:hidden; pointer-events:none !important; user-select:none; }
.board-arrow * { pointer-events:none !important; }

.blitz-scoreboard { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:11px 15px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.blitz-scoreboard > div { display:grid; gap:2px; min-width:0; }
.blitz-scoreboard span { color:var(--muted); font-size:10px; }
.blitz-scoreboard strong { color:var(--ink); font-size:24px; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; }
.blitz-clock { color:var(--ink); font-size:32px; font-weight:750; line-height:1.25; letter-spacing:-.7px; font-variant-numeric:tabular-nums; }
.blitz-clock.danger { color:#cc745f; }
.guide-panel > .blitz-clock { margin:8px 0 11px; }
.blitz-scoreboard .button { flex-shrink:0; min-height:32px; padding:7px 9px; font-size:10px; }
.blitz-config { max-width:850px; }
.blitz-config .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:19px; }
.blitz-config > .button-row { align-items:center; flex-wrap:wrap; gap:12px; }
.blitz-config > .button-row .muted { font-size:11px; line-height:1.5; }
.blitz-config > .hint-text { margin:15px 0 0; }
.blitz-result { margin-bottom:18px; border-left:3px solid var(--green); }
.blitz-result h2 { margin:0 0 10px; font-size:26px; font-weight:700; }
.blitz-result .mastery-stats { display:flex; flex-wrap:wrap; gap:7px 20px; margin:0; color:var(--muted); font-size:11px; }
.blitz-records { max-width:100%; min-width:0; }
.blitz-records > h2 { margin:0 0 15px; font-size:16px; font-weight:650; }
.blitz-records .history-table { min-width:465px; }
.blitz-records .history-table th, .blitz-records .history-table td { white-space:nowrap; }

.analysis-panel .field { margin:16px 0; }
.analysis-candidates { display:grid; gap:7px; margin:13px 0 16px; }
.analysis-candidate { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:5px 10px; padding:10px 11px; border:1px solid var(--line); border-radius:5px; background:color-mix(in srgb,var(--paper) 96%,var(--ink)); font-size:11px; font-variant-numeric:tabular-nums; }
.analysis-candidate:first-child { border-left:3px solid var(--green); padding-left:9px; }
.analysis-candidate > strong { color:var(--ink); font-size:13px; font-weight:650; }
.analysis-candidate > span { color:var(--ink); font-weight:650; }
.analysis-candidate > small { grid-column:1 / -1; color:var(--muted); font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
.analysis-moves { display:flex; align-content:flex-start; flex-wrap:wrap; gap:6px; max-height:235px; margin-top:11px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.analysis-moves .move-token { min-height:30px; margin:0; padding:6px 9px; border:1px solid transparent; border-radius:4px; color:var(--muted); background:transparent; font:inherit; font-size:11px; line-height:1.5; cursor:pointer; }
.analysis-moves .move-token:hover { color:var(--ink); background:color-mix(in srgb,var(--paper) 90%,var(--ink)); }
.analysis-moves .move-token.current { color:#526d38; border-color:#b9caa7; background:#e7efde; font-weight:650; }
.analysis-moves .move-token:focus-visible { outline:2px solid var(--green); outline-offset:1px; }
.analysis-review:empty, .coach-plan:empty, .analysis-candidates:empty { display:none; }
.analysis-review .move-quality { margin-bottom:0; }

[data-appearance="dark"] .recommendation-card { border-color:#4b5d38; background:#303b27; }
[data-appearance="dark"] .recommendation-card > span { color:#b1c695; }
[data-appearance="dark"] .recommendation-card > strong { color:#e2efce; }
[data-appearance="dark"] .recommendation-card > small { color:#a7b597; }
[data-appearance="dark"] .recommendation-card > .button { color:#bdd3a2; }
[data-appearance="dark"] .move-quality.best { color:#afd47f; }
[data-appearance="dark"] .move-quality.good { color:#bdcf9d; }
[data-appearance="dark"] .move-quality.inaccuracy { color:#d8c07d; }
[data-appearance="dark"] .move-quality.mistake { color:#dea56e; }
[data-appearance="dark"] .move-quality.blunder { color:#e19a8a; }
[data-appearance="dark"] .blitz-clock.danger { color:#ed9b85; }
[data-appearance="dark"] .analysis-moves .move-token.current { color:#d3e7b4; border-color:#637e43; background:#3d4c2f; }

@media (min-width:1000px) {
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .topbar { margin-bottom:16px; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .board-card { padding-top:12px; padding-bottom:8px; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .board-toolbar { min-height:30px; padding-bottom:8px; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .player-avatar { width:26px; height:26px; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .board-shell { justify-content:center; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-analysis) .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - 190px)); }
  .app-shell:not(.focus-mode) .page-blitz .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - 270px)); }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .board-caption { display:none; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-blitz,.page-analysis) .board-bottom { min-height:32px; padding-top:4px; }
  .app-shell:not(.focus-mode) :is(.page-guide,.page-analysis) .right-panel { max-height:calc(100dvh - 125px); overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
}
.focus-mode .page-blitz:has(> .blitz-scoreboard) { --focus-board-size:min(calc(100dvh - 220px),calc(100vw - 450px),1000px); }
.focus-mode .blitz-scoreboard { flex-shrink:0; width:100%; max-width:1400px; margin:0 auto 10px; padding:8px 13px; }
.focus-mode .page-blitz .right-panel { max-height:calc(100dvh - 146px); }
.focus-mode .page-guide .right-panel { align-content:start; }
@media (max-width:1000px) and (min-width:750px) {
  .focus-mode .page-blitz:has(> .blitz-scoreboard) { --focus-board-size:min(calc(100dvh - 220px),calc(100vw - 380px)); }
}
@media (max-width:999px) {
  .guide-workspace .right-panel { grid-template-columns:1fr; }
  .guide-workspace .right-panel > .panel:first-child { grid-row:auto; }
  .library-list .course-lesson { grid-template-columns:34px minmax(0,1fr) auto; }
  .library-list { max-height:600px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
}
@media (max-width:749px) {
  .focus-mode .page-blitz:has(> .blitz-scoreboard) { --focus-board-size:min(calc(100dvh - 220px),calc(100vw - 44px)); }
  .focus-mode .page-blitz .right-panel { max-height:none; }
}
@media (max-width:600px) {
  .guide-panel .puzzle-title { font-size:20px; }
  .guide-panel > .panel-header { align-items:flex-start; flex-wrap:wrap; }
  .guide-modes { gap:5px; }
  .guide-modes .button { padding:8px 7px; }
  .recommendation-card { padding:13px; }
  .recommendation-card > strong { font-size:36px; }
  .recommendation-card > .button { max-width:120px; }
  .guide-plan, .coach-plan { font-size:12px; }
  .library-list { max-height:560px; }
  .library-toolbar :is(.input,.select) { min-height:40px; font-size:12px; }
  .library-list .course-lesson > strong { font-size:12px; }
  .reply-list { max-height:190px; }
  .reply-list .button { min-height:36px; min-width:46px; }
  .blitz-scoreboard { gap:7px; margin-bottom:12px; padding:10px; }
  .blitz-scoreboard span { font-size:9px; }
  .blitz-scoreboard strong { font-size:21px; }
  .blitz-scoreboard .button { max-width:76px; min-height:32px; padding:6px; font-size:9px; }
  .blitz-config .filter-grid { grid-template-columns:1fr; gap:13px; }
  .blitz-config > .button-row { align-items:flex-start; }
  .blitz-result h2 { font-size:24px; }
  .analysis-moves { max-height:200px; }
  .analysis-moves .move-token { min-height:34px; padding:7px 10px; font-size:12px; }
}

/* A timed sprint has no inactive hint/filter controls. */
.page-blitz .training-panel :is([data-action="hint"],[data-action="reveal"],[data-action="skip"]),.page-blitz .right-panel > .panel:not(:first-child){display:none;}

/* Ruch move marks: facets, focus, steps, and interrupted geometry. */
:root { --quality-brilliant:#087d94; --quality-best:#3e7f30; --quality-excellent:#6759a3; --quality-good:#5e794c; --quality-book:#4b7198; --quality-forced:#73777c; --quality-inaccuracy:#9a751a; --quality-mistake:#b46b24; --quality-blunder:#b6534f; --quality-pending:#79818a; }
[data-appearance="dark"] { --quality-brilliant:#65ccdf; --quality-best:#a6d27c; --quality-excellent:#beb0ef; --quality-good:#b1c99c; --quality-book:#9bbde2; --quality-forced:#b4b9c1; --quality-inaccuracy:#e1c477; --quality-mistake:#e7ac73; --quality-blunder:#f0998e; --quality-pending:#a1a7af; }
[data-grade="brilliant"] { --grade-color:var(--quality-brilliant); }
[data-grade="best"] { --grade-color:var(--quality-best); }
[data-grade="excellent"] { --grade-color:var(--quality-excellent); }
[data-grade="good"] { --grade-color:var(--quality-good); }
[data-grade="book"] { --grade-color:var(--quality-book); }
[data-grade="forced"] { --grade-color:var(--quality-forced); }
[data-grade="inaccuracy"] { --grade-color:var(--quality-inaccuracy); }
[data-grade="mistake"] { --grade-color:var(--quality-mistake); }
[data-grade="blunder"] { --grade-color:var(--quality-blunder); }
[data-grade="pending"] { --grade-color:var(--quality-pending); }
.quality-icon { display:inline-block; flex-shrink:0; width:22px; height:22px; color:var(--grade-color,var(--muted)); vertical-align:middle; }
.quality-badge { display:inline-flex; align-items:center; justify-content:flex-start; gap:7px; min-height:28px; max-width:100%; padding:4px 8px 4px 5px; border:1px solid color-mix(in srgb,var(--grade-color,var(--muted)) 27%,transparent); border-radius:6px; color:var(--grade-color,var(--muted)); background:color-mix(in srgb,var(--grade-color,var(--muted)) 8%,var(--paper)); font-size:11px; font-weight:650; line-height:1.4; white-space:nowrap; }
.quality-badge .quality-icon { width:19px; height:19px; }
.quality-badge.compact { justify-content:center; width:26px; min-height:26px; height:26px; padding:3px; border-radius:5px; }
.quality-badge.compact .quality-icon { width:18px; height:18px; }
.board-move-quality { --quality-brilliant:#65ccdf; --quality-best:#a6d27c; --quality-excellent:#beb0ef; --quality-good:#b1c99c; --quality-book:#9bbde2; --quality-forced:#b4b9c1; --quality-inaccuracy:#e1c477; --quality-mistake:#e7ac73; --quality-blunder:#f0998e; --quality-pending:#a1a7af; position:absolute; z-index:8; display:grid; place-items:center; width:clamp(20px,4%,32px); aspect-ratio:1; padding:3px; border:1px solid color-mix(in srgb,var(--grade-color,var(--muted)) 60%,transparent); border-radius:50%; color:var(--grade-color,var(--muted)); background:#25292df5; box-shadow:0 2px 6px #0005; pointer-events:none !important; user-select:none; }
.board-move-quality .quality-icon { display:block; width:100%; height:100%; pointer-events:none !important; }
.move-quality:has(.quality-badge) { align-items:flex-start; gap:9px; padding:11px 12px; border-left:1px solid var(--line); }
.move-quality[data-grade] { border-color:color-mix(in srgb,var(--grade-color) 30%,var(--line)); background:color-mix(in srgb,var(--grade-color) 5%,var(--paper)); }
.move-quality .quality-badge { flex-shrink:0; }
.move-quality.excellent { border-left-color:var(--quality-excellent); color:var(--quality-excellent); }
.move-quality.brilliant { border-left-color:var(--quality-brilliant); color:var(--quality-brilliant); }

/* A consistent graphite shell; pieces and board squares keep their own themes. */
:root[data-appearance="dark"] { --bg:#202225; --paper:#292c30; --ink:#f1f1ee; --muted:#aeb2b7; --line:#3c4045; --green:#9bc479; --green-dark:#acd48b; --green-soft:#36452f; --navy:#191c1f; --analytics-muted:#aeb2b7; --analytics-grid:#43484e; --analytics-text:#e0e1dd; }
[data-appearance="dark"] body { background:var(--bg); }
[data-appearance="dark"] .sidebar { border-right:1px solid #30343a; background:var(--navy); }
[data-appearance="dark"] :is(.panel,.board-card,.stat-card,.chart-card,.settings-card,.theme-card,.theme-preview-item,.course-card,.analytics-card) { border-color:var(--line); background:var(--paper); box-shadow:0 3px 12px #0000000d; }
[data-appearance="dark"] .nav-button { color:#bec2c7; }
[data-appearance="dark"] .nav-button .icon { color:#929ba3; }
[data-appearance="dark"] .nav-button:hover { color:#f4f6f2; background:#2a3034; }
[data-appearance="dark"] .nav-button.active { color:#f6f8f3; background:#343e33; }
[data-appearance="dark"] .nav-button.active .icon { color:#b4d593; }
[data-appearance="dark"] :is(.select,.input,.search-input,.fen-input) { color:#e1e4e5; border-color:#444a50; background:#222529; }
[data-appearance="dark"] .search-input input { color:#e1e4e5; }
[data-appearance="dark"] :is(.select,.input,.search-input):focus-within { border-color:#a0be82; box-shadow:0 0 0 3px #9bc47915; }
[data-appearance="dark"] :is(.input,.search-input input)::placeholder { color:#969ea7; }
[data-appearance="dark"] :is(.page-subtitle,.hint-text,.muted,.stat-label,.stat-note,.player-rating,.board-caption,.board-bottom > .muted,.field label,.board-theme-field label,.settings-card > p,.setting-row p) { color:var(--muted); }
[data-appearance="dark"] .button-primary { color:#1b2a12; border-color:#9bc479; border-bottom-color:#618848; background:#9bc479; box-shadow:0 2px 6px #0000000d; }
[data-appearance="dark"] .button-primary:hover { border-color:#b0d38e; border-bottom-color:#6e9454; background:#b0d38e; }
[data-appearance="dark"] .button-secondary { color:#e0e3e4; border-color:#4b525a; background:#363c42; }
[data-appearance="dark"] .button-secondary:hover { border-color:#6d7984; background:#424a52; }
[data-appearance="dark"] :is(.button-ghost,.icon-button) { color:#b3bcc5; }
[data-appearance="dark"] :is(.button-ghost,.icon-button):hover { color:#ecf0e9; border-color:#56616a; background:#353d43; }
[data-appearance="dark"] .modal { color:var(--ink); border-color:#49515a; background:var(--paper); box-shadow:0 28px 90px #0006; }
[data-appearance="dark"] .modal-title { color:#edf3e6; }
[data-appearance="dark"] .modal-backdrop { background:#101418bd; }
.panel, .board-card { transition:border-color .18s ease,box-shadow .18s ease; }
.course-card:hover, .theme-card:hover { transform:translateY(-2px); box-shadow:0 7px 20px #17272e09; }
[data-appearance="dark"] :is(.course-card,.theme-card):hover { border-color:#849779; background:#2e3530; box-shadow:0 9px 22px #0002; }
.button:disabled { opacity:.45; }
.button:focus-visible, .icon-button:focus-visible, .nav-button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }

/* Full game review and public Chess.com game import. */
.game-review-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; }
.game-review-header > div { min-width:0; }
.game-review-header h1, .game-review-header h2 { margin:0 0 4px; font-size:26px; font-weight:700; letter-spacing:-.6px; }
.game-review-header p { margin:0; color:var(--muted); font-size:12px; }
.game-review-header .button-row { flex-shrink:0; margin:0; }
.game-review-panel { min-width:0; }
.game-review-panel > h2, .game-review-panel > h3 { margin:0 0 14px; font-size:15px; font-weight:650; }
.game-review-import { min-width:0; }
.game-review-import > .panel-header { gap:12px; margin-bottom:12px; }
.game-review-import .field { min-width:0; margin:0 0 13px; }
.game-review-import .field label { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:600; }
.game-review-import :is(.input,.select) { min-height:39px; color:var(--ink); font-size:12px; }
.game-review-import-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.game-review-import-grid > * { min-width:0; }
.game-review-import-grid > * + * { padding-left:18px; border-left:1px solid var(--line); }
.game-review-pgn { display:block; width:100%; min-height:138px; max-height:340px; resize:vertical; font-family:Consolas,"SFMono-Regular",monospace; font-size:11px !important; line-height:1.7; tab-size:2; }
.game-review-import .button-row { flex-wrap:wrap; align-items:center; margin:10px 0 0; gap:8px; }
.game-review-import .button { min-height:36px; font-size:11px; }
.game-review-import input[type="file"] { display:block; width:100%; min-width:0; padding:8px 0; color:var(--muted); font-size:11px; }
.game-review-import input[type="file"]::file-selector-button { margin-right:10px; padding:7px 10px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--bg); font:inherit; cursor:pointer; }
.game-review-source { display:grid; gap:9px; }
.game-review-source p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.game-review-source-fields { display:grid; grid-template-columns:minmax(0,1fr) 125px; align-items:end; gap:9px; }
.game-review-tabs { display:flex; gap:5px; padding:4px; margin:0 0 15px; border:1px solid var(--line); border-radius:7px; background:var(--bg); }
.game-review-tabs .button { flex:1; min-width:0; min-height:34px; padding:7px; border:0; color:var(--muted); background:transparent; }
.game-review-tabs .button.active, .game-review-tabs .button[aria-selected="true"] { color:var(--ink); background:var(--paper); box-shadow:0 1px 4px #00000012; }
.game-review-import-modal { width:100%; max-width:800px; max-height:min(90dvh,900px); overflow-y:auto; }
.game-review-import-modal .game-review-import { padding:0; border:0; background:transparent; box-shadow:none; }
.game-review-import-close { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.game-review-import-close h2 { margin:0; color:var(--ink); font-size:23px; }
.game-review-games { display:grid; gap:7px; max-height:310px; margin-top:13px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.game-review-game { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; width:100%; min-height:62px; padding:11px 12px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--paper); text-align:left; transition:border-color .15s,background .15s; }
.game-review-game:hover, .game-review-game.selected { border-color:color-mix(in srgb,var(--green) 70%,var(--line)); background:color-mix(in srgb,var(--green) 7%,var(--paper)); }
.game-review-game strong { min-width:0; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-review-game small { grid-column:1; color:var(--muted); font-size:10px; }
.game-review-game > span:last-child { grid-column:2; grid-row:1 / 3; align-self:center; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.game-review-empty { display:grid; place-items:center; gap:8px; min-height:130px; padding:22px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); text-align:center; font-size:12px; line-height:1.7; }
.game-review-empty strong { color:var(--ink); font-size:14px; font-weight:600; }
.game-review-empty > .icon { width:30px; height:30px; color:var(--green); }
.game-review-error { margin:12px 0 0; padding:10px 12px; border:1px solid #bc746660; border-radius:6px; color:#a85444; background:#bc74660b; font-size:11px; line-height:1.6; }
[data-appearance="dark"] .game-review-error { color:#efb1a1; }

.game-review-progress { display:grid; gap:8px; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb,var(--green) 4%,var(--paper)); }
.game-review-progress > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-review-progress strong { color:var(--ink); font-size:12px; font-weight:650; }
.game-review-progress small, .game-review-progress p { margin:0; color:var(--muted); font-size:10px; line-height:1.7; }
.game-review-progress .button { min-height:28px; padding:4px 8px; font-size:10px; }
.game-review-progress [role="progressbar"], .game-review-progress-track { width:100%; height:5px; overflow:hidden; border-radius:4px; background:var(--line); }
.game-review-progress [role="progressbar"] > span, .game-review-progress-track > span { display:block; height:100%; border-radius:inherit; background:var(--green); transition:width .2s ease; }
.game-review-progress [aria-busy="true"] { color:var(--green); }
.game-review-summary { min-width:0; }
.game-review-summary > .panel-header { gap:10px; align-items:baseline; }
.game-review-summary > .panel-header h2, .game-review-summary > .panel-header h3 { margin:0; font-size:14px; }
.game-review-summary > .panel-header small { color:var(--muted); font-size:10px; }
.game-review-players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.game-review-player { position:relative; min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--paper) 97%,var(--ink)); }
.game-review-player > strong { display:block; min-width:0; margin-bottom:2px; overflow:hidden; color:var(--ink); font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.game-review-player > small { color:var(--muted); font-size:10px; }
.game-review-player .color-dot { width:7px; height:7px; margin-right:6px; }
.game-review-accuracy { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin:12px 0 0; color:var(--green); font-size:32px; font-weight:720; line-height:1.1; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.game-review-accuracy small { color:var(--muted); font-size:10px; font-weight:450; letter-spacing:0; }
.game-review-accuracy > span { display:block; flex-basis:100%; margin-top:5px; color:var(--muted); font-size:9px; font-weight:450; letter-spacing:0; }
.game-review-grade-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:13px 0 0; }
.game-review-grade-count { display:grid; justify-items:center; gap:4px; min-width:0; padding:9px 4px; border:1px solid var(--line); border-radius:6px; color:var(--grade-color,var(--muted)); font-variant-numeric:tabular-nums; }
.game-review-grade-count .quality-icon { width:21px; height:21px; }
.game-review-grade-count strong { color:var(--ink); font-size:15px; font-weight:650; }
.game-review-grade-count small { max-width:100%; color:var(--muted); font-size:8px; text-align:center; line-height:1.4; overflow-wrap:anywhere; }
.game-review-method { margin:12px 0 0; color:var(--muted); font-size:9px; line-height:1.65; }

.game-review-chart { position:relative; min-width:0; margin:15px 0 10px; padding:8px 0 0; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--bg); }
.game-review-chart svg { display:block; width:100%; height:auto; min-height:100px; overflow:visible; touch-action:pan-y; }
.game-review-chart .grid-line { stroke:var(--line); stroke-width:1; }
.game-review-chart .zero-line { stroke:var(--muted); stroke-width:1; opacity:.6; }
.game-review-chart .eval-line { fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.game-review-chart .eval-area { fill:color-mix(in srgb,var(--green) 15%,transparent); stroke:none; }
.game-review-chart .selection-line { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; opacity:.7; pointer-events:none; }
.game-review-chart .chart-dot { fill:var(--green); stroke:var(--paper); stroke-width:2; pointer-events:none; }
.game-review-chart .hit-point { fill:transparent; stroke:none; cursor:pointer; }
.game-review-chart .hit-point:focus { outline:none; fill:color-mix(in srgb,var(--green) 15%,transparent); stroke:var(--green); stroke-width:1; }
.game-review-chart text { fill:var(--muted); font-family:inherit; font-size:9px; }
.game-review-chart-labels { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 10px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.game-review-selected { display:grid; gap:9px; margin:13px 0; padding:13px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--paper) 97%,var(--ink)); }
.game-review-selected > header, .game-review-selected > .panel-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.game-review-selected strong { color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums; }
.game-review-selected p { margin:0; color:var(--muted); font-size:11px; line-height:1.75; }
.game-review-selected .quality-badge strong { color:inherit; font-size:11px; }
.game-review-best-line { display:block; margin-top:5px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; line-height:1.7; }
.game-review-best-line strong { color:var(--ink); font-size:11px; font-weight:600; }
.game-review-moves { max-height:310px; margin-top:11px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.game-review-row { display:grid; grid-template-columns:27px minmax(0,1fr) minmax(0,1fr); align-items:center; gap:4px; min-height:38px; padding:3px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent); }
.game-review-row > .move-number { color:var(--muted); font-size:10px; text-align:center; font-variant-numeric:tabular-nums; }
.game-review-move { display:flex; align-items:center; justify-content:space-between; gap:5px; min-width:0; min-height:32px; padding:5px 7px; border:1px solid transparent; border-radius:5px; color:var(--ink); background:transparent; text-align:left; font-size:12px; font-variant-numeric:tabular-nums; transition:background .12s,border-color .12s; }
.game-review-move > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-review-move .quality-icon { width:18px; height:18px; }
.game-review-move .quality-badge.compact { width:23px; height:23px; min-height:23px; padding:2px; }
.game-review-move small { margin-left:auto; color:var(--muted); font-size:9px; }
.game-review-move:hover { background:color-mix(in srgb,var(--green) 8%,var(--paper)); }
.game-review-move.current, .game-review-move[aria-current="step"] { border-color:color-mix(in srgb,var(--green) 70%,var(--line)); background:color-mix(in srgb,var(--green) 16%,var(--paper)); font-weight:650; }
.game-review-move:focus-visible { outline:2px solid var(--green); outline-offset:-1px; }
.game-review-move[data-grade="blunder"], .game-review-move[data-grade="mistake"] { box-shadow:inset 2px 0 0 color-mix(in srgb,var(--grade-color) 80%,transparent); }
.game-review-legend { display:flex; flex-wrap:wrap; gap:7px 12px; margin:11px 0; color:var(--muted); font-size:9px; }
.game-review-legend > span { display:inline-flex; align-items:center; gap:4px; }
.game-review-legend .quality-icon { width:15px; height:15px; }
.game-review-saved { display:grid; gap:7px; max-height:250px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.game-review-saved .game-review-game { min-height:54px; }
.game-review-game-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.game-review-game-meta > strong { color:var(--ink); font-size:15px; }
.game-review-controls .field { margin:0 0 10px; }
.game-review-controls .field label { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; }
.game-review-controls .button-row { flex-wrap:wrap; gap:7px; margin:0; }
.game-review-controls .button { min-height:35px; padding:8px 10px; font-size:10px; }
.game-review-player-depth { margin:8px 0 0; color:var(--muted); font-size:9px; }
.game-review-count-separator { margin:0 2px; color:var(--muted); font-size:10px; font-weight:450; }
.game-review-selected-meta { display:flex; flex-wrap:wrap; gap:5px 11px; color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
.game-review-chart-empty { padding:16px 8px; color:var(--muted); font-size:11px; text-align:center; }
.game-review-list-count { margin:17px 0 0; color:var(--muted); font-size:11px; }
.game-review-ungraded { color:var(--muted); }
.game-review-start-position { width:100%; padding:8px 9px; margin-bottom:5px; border:1px solid transparent; border-radius:5px; color:var(--muted); background:transparent; text-align:left; font-size:10px; }
.game-review-start-position:hover, .game-review-start-position.current { color:var(--ink); border-color:var(--line); background:color-mix(in srgb,var(--green) 8%,var(--paper)); }
.game-review-method-details { margin-top:15px; padding-top:11px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.75; }
.game-review-method-details summary { color:var(--muted); cursor:pointer; }
.game-review-method-details p { margin:10px 0 0; font-size:10px; }

@media (min-width:1100px) {
  .game-review-layout.workspace { grid-template-columns:minmax(0,1fr) 350px; gap:20px; }
  .game-review-layout > .right-panel { max-height:calc(100dvh - 130px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  .focus-mode .game-review-layout > .right-panel { max-height:calc(100dvh - 80px); }
}
@media (max-width:900px) {
  .game-review-header { align-items:flex-start; flex-wrap:wrap; }
  .game-review-import-grid { grid-template-columns:1fr; gap:18px; }
  .game-review-import-grid > * + * { padding:18px 0 0; border-left:0; border-top:1px solid var(--line); }
  .game-review-layout .right-panel { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .game-review-header { gap:12px; margin-bottom:14px; }
  .game-review-header h1, .game-review-header h2 { font-size:23px; }
  .game-review-header .button-row { width:100%; flex-wrap:wrap; }
  .game-review-header .button-row .button { flex:1; }
  .game-review-import-modal { max-height:94dvh; padding:18px; }
  .game-review-import :is(.input,.select,.button) { min-height:42px; font-size:12px; }
  .game-review-source-fields { grid-template-columns:minmax(0,1fr) 118px; }
  .game-review-players { gap:8px; }
  .game-review-player { padding:12px 10px; }
  .game-review-accuracy { font-size:30px; }
  .game-review-moves { max-height:330px; }
  .game-review-row { grid-template-columns:25px minmax(0,1fr) minmax(0,1fr); min-height:44px; }
  .game-review-move { min-height:39px; padding:7px; font-size:13px; }
  .game-review-game { min-height:68px; }
  .game-review-selected { padding:12px; }
  .game-review-selected p { font-size:12px; }
}
@media (prefers-reduced-motion:no-preference) {
  .game-review-summary, .game-review-selected { animation:ruch-review-in .22s ease-out both; }
  @keyframes ruch-review-in { from { opacity:.35; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
}

/* Ruch 6: board-first practice, a quiet repertoire library, and clear next actions. */
:root {
  --surface-raised:#f1f3ee;
  --surface-hover:#e8ede2;
  --accent-ink:#214125;
  --board-reserve:190px;
}
:root[data-appearance="dark"] {
  color-scheme:dark;
  --bg:#252522;
  --paper:#1d1e1b;
  --ink:#f0f1e9;
  --muted:#a6aa9e;
  --line:#3b3d35;
  --green:#a8cc77;
  --green-dark:#b9dc8b;
  --green-soft:#343e29;
  --navy:#191a17;
  --surface-raised:#292b25;
  --surface-hover:#34372d;
  --accent-ink:#233217;
  --analytics-muted:#a6aa9e;
  --analytics-grid:#3b3d35;
  --analytics-text:#dce1d2;
}
body { font-size:14px; }
.main-content { min-width:0; }
.topbar { min-height:36px; margin-bottom:18px; }
.topbar > strong { color:var(--muted); font-size:13px; font-weight:600; }
.topbar-right { gap:12px; }
.topbar .avatar { width:32px; height:32px; border:1px solid var(--line); color:var(--ink); background:var(--surface-raised); font-size:13px; }
.daily-chip { gap:5px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.panel, .stat-card, .analytics-card, .theme-card, .settings-card { border-radius:10px; box-shadow:none; }
.panel { padding:20px; }
.panel h3 { font-size:15px; }
.panel-header { gap:10px; }
.panel-header h2, .panel-header h3 { margin:0; }
.button { min-height:38px; padding:9px 13px; border-radius:7px; font-size:12px; font-weight:650; line-height:1.4; transition:background .14s,border-color .14s,color .14s; }
.button-primary { color:var(--accent-ink); border:1px solid var(--green); border-bottom:3px solid color-mix(in srgb,var(--green) 65%,#2b3b20); background:var(--green); box-shadow:none; }
.button-primary:hover { color:var(--accent-ink); border-color:var(--green-dark); background:var(--green-dark); box-shadow:none; }
.button-secondary { color:var(--ink); border:1px solid var(--line); background:var(--surface-raised); }
.button-secondary:hover { color:var(--ink); border-color:color-mix(in srgb,var(--green) 40%,var(--line)); background:var(--surface-hover); }
.button-ghost { color:var(--muted); background:transparent; }
.icon-button { width:34px; height:34px; border-radius:7px; color:var(--muted); }
.button-ghost:hover, .icon-button:hover { color:var(--ink); border-color:var(--line); background:var(--surface-raised); }
.button:disabled { opacity:.42; }
.input, .select, .search-input { min-height:40px; border-radius:7px; border-color:var(--line); color:var(--ink); background:var(--paper); font-size:12px; }
.field label { margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:600; }
.hint-text, .muted { color:var(--muted); }
.hint-text { font-size:11px; line-height:1.6; }
.text-link { color:var(--green); font-size:12px; }
.progress-track { height:5px; border-radius:3px; background:var(--line); }
.progress-fill { border-radius:3px; background:var(--green); }
.tag { padding:4px 7px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:transparent; font-size:10px; font-weight:600; }
details.panel > summary { padding:1px 0; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; }
details.panel[open] > summary { margin-bottom:15px; color:var(--ink); }
details.panel > summary:hover { color:var(--ink); }
.page-title, .compact-header h1 { font-size:28px; font-weight:750; letter-spacing:-.6px; }
.page-subtitle, .compact-header p { color:var(--muted); font-size:13px; }
[data-appearance="dark"] .sidebar { border-color:#30322b; background:var(--navy); }
[data-appearance="dark"] :is(.panel,.stat-card,.chart-card,.settings-card,.theme-card,.analytics-card) { color:var(--ink); border-color:var(--line); background:var(--paper); box-shadow:none; }
[data-appearance="dark"] :is(.select,.input,.search-input,.fen-input) { color:var(--ink); border-color:var(--line); background:var(--surface-raised); }
[data-appearance="dark"] :is(.input,.search-input input)::placeholder { color:#878d7e; }
[data-appearance="dark"] :is(.select,.input,.search-input):focus-within { border-color:#8eac65; box-shadow:0 0 0 2px #a8cc7714; }
[data-appearance="dark"] .button-primary { color:var(--accent-ink); border-color:var(--green); border-bottom-color:#718d48; background:var(--green); box-shadow:none; }
[data-appearance="dark"] .button-primary:hover { color:var(--accent-ink); border-color:var(--green-dark); border-bottom-color:#819f55; background:var(--green-dark); }
[data-appearance="dark"] .button-secondary { color:var(--ink); border-color:var(--line); background:var(--surface-raised); }
[data-appearance="dark"] .button-secondary:hover { border-color:#66734e; background:var(--surface-hover); }
[data-appearance="dark"] :is(.button-ghost,.icon-button) { color:var(--muted); }
[data-appearance="dark"] :is(.button-ghost,.icon-button):hover { color:var(--ink); border-color:var(--line); background:var(--surface-hover); }
[data-appearance="dark"] .nav-button { color:#aeb2a5; }
[data-appearance="dark"] .nav-button .icon { color:#8e9683; }
[data-appearance="dark"] .nav-button:hover { color:var(--ink); background:#282b23; }
[data-appearance="dark"] .nav-button.active { color:#e3edcf; background:#323b28; }
[data-appearance="dark"] .nav-button.active .icon { color:var(--green); }
[data-appearance="dark"] .modal { color:var(--ink); border-color:#4a4f40; background:var(--paper); }
[data-appearance="dark"] .modal-backdrop { background:#11130fc4; }
[data-appearance="dark"] .modal-title { color:var(--ink); }

/* Keep the real board as the anchor; controls and metrics use the adjacent pane. */
.board-wrap, .chessboard { border-radius:8px; }
.board-wrap { overflow:hidden; }
.board-toolbar { align-items:center; gap:12px; min-height:42px; padding:0 2px 10px; }
.board-toolbar .player-avatar { width:29px; height:29px; border-radius:6px; color:var(--green); border:1px solid var(--line); background:var(--surface-raised); }
.board-toolbar .player-name { color:var(--ink); font-size:12px; font-weight:650; }
.board-toolbar .player-rating { max-width:480px; margin-top:1px; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.board-bottom { min-height:36px; padding:6px 1px 0; }
.board-bottom > .muted { font-size:11px; }
.board-controls { gap:5px; }
.coord-file, .coord-rank { font-weight:650; text-shadow:none; }
.right-panel { gap:14px; min-width:0; }
.training-panel .panel-header { margin-bottom:15px; }
.training-badge { color:var(--muted); font-size:11px; letter-spacing:.7px; }
.timer { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.puzzle-title { margin:10px 0 18px; color:var(--ink); font-size:24px; font-weight:730; letter-spacing:-.4px; }
.status-message { min-height:43px; padding:11px 12px; border-radius:7px; font-size:12px; line-height:1.6; }
.status-message.info { border-color:var(--line); color:var(--ink); background:var(--surface-raised); }
.status-message.success { border-color:#6a875144; color:var(--green); background:color-mix(in srgb,var(--green) 8%,var(--paper)); }
.status-message.error { border-color:#a668504d; color:#d98671; background:color-mix(in srgb,#d98671 8%,var(--paper)); }
.turn-banner { min-height:47px; gap:9px; padding:11px 12px; margin:0 0 14px; border-color:var(--line); border-radius:7px; color:var(--ink); background:var(--surface-raised); }
.turn-banner > strong { font-size:13px; }
.turn-banner > span:last-child { color:var(--muted); font-size:12px; }
.move-history { gap:5px; margin:14px 0; color:var(--muted); font-size:12px; }
.move-token { border-radius:4px; font-variant-numeric:tabular-nums; }
.training-panel .button-row > .button-primary { flex:1; }
.session-progress { padding-top:18px; margin-top:20px; border-top:1px solid var(--line); }
.session-progress > div:first-child { margin-bottom:9px; color:var(--muted); font-size:11px; }
.session-progress strong { color:var(--ink); font-size:11px; font-weight:650; }
.puzzle-hub-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:4px; padding:4px; margin:0 0 18px; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.puzzle-hub-tabs :is(button,a) { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:64px; padding:8px 4px; overflow:hidden; border:0; border-radius:6px; color:var(--muted); background:transparent; font-size:11px; font-weight:650; line-height:1.3; text-align:center; white-space:normal; overflow-wrap:normal; }
.puzzle-hub-tabs .icon { display:block; flex:none; width:18px; height:18px; max-width:18px; max-height:18px; }
.puzzle-hub-tabs button > span { position:absolute; top:4px; right:5px; display:grid; place-items:center; min-width:13px; height:13px; padding:0 3px; border-radius:4px; color:var(--green); background:var(--green-soft); font-size:8px; line-height:1; font-variant-numeric:tabular-nums; }
.puzzle-hub-tabs :is(.active,[aria-selected="true"]) { color:var(--ink); background:var(--surface-raised); }
.puzzle-hub-tabs button:hover { color:var(--ink); background:var(--surface-hover); }
.puzzle-player-strip { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:0 0 14px; border-bottom:1px solid var(--line); }
.puzzle-player-strip > .player-avatar { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:8px; color:var(--green); background:var(--surface-raised); }
.puzzle-player-strip > div { display:grid; gap:2px; min-width:0; }
.puzzle-player-strip strong { color:var(--ink); font-size:14px; font-weight:700; }
.puzzle-player-strip small { color:var(--muted); font-size:11px; }
.puzzle-player-strip .puzzle-rating { margin-left:auto; font-size:23px; font-weight:750; font-variant-numeric:tabular-nums; }
.puzzle-result-card { display:grid; gap:12px; padding:16px; margin:16px 0; border:1px solid color-mix(in srgb,var(--green) 35%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--green) 7%,var(--paper)); }
.puzzle-result-card > header { display:flex; align-items:center; gap:10px; }
.puzzle-result-card h3 { margin:0; color:var(--ink); font-size:17px; }
.puzzle-result-card .rating-delta { margin-left:auto; color:var(--green); font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; }
.puzzle-result-card .rating-delta.negative { color:#d98671; }
.puzzle-result-card .puzzle-result-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.puzzle-result-card :is(small,dt) { display:block; color:var(--muted); font-size:10px; }
.puzzle-result-card :is(strong,dd) { margin:3px 0 0; color:var(--ink); font-size:14px; font-weight:650; }
.puzzle-result-card .button-row { margin:0; }
.puzzle-session-strip { display:flex; align-items:center; gap:6px; min-height:28px; margin-top:14px; }
.puzzle-session-strip button, .puzzle-session-strip > span { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--surface-raised); font-size:10px; font-weight:650; }
.puzzle-session-strip :is(.solved,.correct,[data-result="solved"]) { color:var(--green); border-color:color-mix(in srgb,var(--green) 40%,var(--line)); background:color-mix(in srgb,var(--green) 8%,var(--paper)); }
.puzzle-session-strip :is(.failed,.skipped,[data-result="skipped"]) { color:#d98671; border-color:#8b5c4b; }
.puzzle-rating-spark { width:100%; min-height:46px; margin:15px 0 0; }
.puzzle-rating-spark svg { display:block; width:100%; height:55px; overflow:visible; }
.puzzle-rating-spark polyline, .puzzle-rating-spark .spark-line { fill:none; stroke:var(--green); stroke-width:2; stroke-linejoin:round; }
.puzzle-rating-spark circle { fill:var(--green); }
.puzzle-toolrow { display:flex; align-items:center; gap:6px; padding-top:12px; border-top:1px solid var(--line); }
.puzzle-toolrow > .icon-button:last-child { margin-left:auto; }
.puzzle-toolrow .active, .puzzle-toolrow [aria-pressed="true"] { color:var(--green); border-color:color-mix(in srgb,var(--green) 45%,var(--line)); background:var(--green-soft); }

/* Course cards show actual board positions, then lead to a focused practice dashboard. */
.opening-dashboard { max-width:1220px; margin:0 auto; }
.opening-dashboard .course-grid, .opening-course-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.opening-course-card { display:grid; grid-template-columns:148px minmax(0,1fr); align-items:stretch; gap:17px; width:100%; min-width:0; min-height:178px; padding:14px; overflow:hidden; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--paper); text-align:left; transition:border-color .16s,background .16s; }
.opening-course-card:hover { border-color:#7d925d; background:var(--surface-raised); transform:none; box-shadow:none; }
.opening-course-card:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.opening-course-card .mini-board { align-self:center; width:148px; }
.opening-course-body { display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:2px 0; }
.opening-course-body h2, .opening-course-card h2 { margin:0 0 7px; color:var(--ink); font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.2px; }
.opening-course-body > p, .opening-course-card > p { margin:0 0 13px; color:var(--muted); font-size:12px; line-height:1.65; }
.opening-course-body > .course-meta { margin-top:auto; padding-top:8px; }
.opening-course-body .course-meta { color:var(--muted); font-size:11px; }
.opening-course-body .course-meta strong { color:var(--ink); font-size:11px; font-weight:600; }
.opening-course-body .progress-track { height:4px; margin:9px 0; }
.opening-course-body .course-color { position:static; display:inline-flex; align-items:center; gap:5px; padding:0; border:0; color:var(--muted); background:transparent; font-size:10px; font-weight:650; }
.opening-course-cta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:10px; color:var(--green); font-size:11px; font-weight:650; }
.mini-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); flex-shrink:0; width:148px; aspect-ratio:1; overflow:hidden; border:1px solid #0002; border-radius:6px; pointer-events:none; user-select:none; }
.mini-board :is(.mini-square,.mini-board-square) { position:relative; display:grid; place-items:center; min-width:0; min-height:0; aspect-ratio:1; padding:0; border:0; border-radius:0; }
.mini-board :is(.light,[data-color="light"]) { background:var(--light-square); }
.mini-board :is(.dark,[data-color="dark"]) { background:var(--dark-square); }
.mini-board img { display:block; width:92%; height:92%; object-fit:contain; pointer-events:none; }
.opening-tabs, .opening-scope, .opening-mode-tabs { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.opening-tabs { margin:0 0 18px; }
.opening-tabs :is(button,a), .opening-scope button, .opening-mode-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:37px; padding:8px 13px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--paper); font-size:12px; font-weight:650; }
.opening-tabs :is(.active,[aria-selected="true"]), .opening-scope :is(.active,[aria-pressed="true"]), .opening-mode-tabs :is(.active,[aria-selected="true"],[aria-pressed="true"]) { color:var(--ink); border-color:color-mix(in srgb,var(--green) 65%,var(--line)); background:var(--green-soft); }
.opening-tabs button:hover, .opening-scope button:hover, .opening-mode-tabs button:hover { color:var(--ink); border-color:#6b7854; }
.opening-overview { max-width:1220px; margin:0 auto; }
.opening-overview-hero { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:25px; padding:24px; margin-bottom:18px; border:1px solid var(--line); border-radius:11px; background:var(--paper); }
.opening-overview-hero .mini-board { width:180px; }
.opening-overview-hero h1 { margin:0 0 9px; color:var(--ink); font-size:31px; font-weight:750; letter-spacing:-.6px; }
.opening-overview-hero p { max-width:690px; margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.75; }
.opening-overview-hero .button-row { flex-wrap:wrap; margin:0; }
.opening-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.opening-stats > div, .opening-stats > article { min-width:0; padding:17px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.opening-stats :is(strong,dd) { display:block; margin:0 0 3px; color:var(--ink); font-size:27px; font-weight:750; line-height:1.25; font-variant-numeric:tabular-nums; }
.opening-stats :is(span,small,dt) { color:var(--muted); font-size:11px; }
.opening-stats .due strong, .opening-stats .mastered strong { color:var(--green); }
.opening-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.opening-mode-card { display:flex; align-items:flex-start; gap:12px; min-height:106px; padding:17px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--paper); text-align:left; transition:border-color .15s,background .15s; }
.opening-mode-card > .icon, .opening-mode-card > svg { width:24px; height:24px; margin-top:2px; color:var(--green); }
.opening-mode-card > div { display:grid; gap:5px; min-width:0; }
.opening-mode-card strong { color:var(--ink); font-size:14px; font-weight:700; }
.opening-mode-card small, .opening-mode-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.opening-mode-card .mode-count { margin-left:auto; color:var(--green); font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; }
.opening-mode-card:hover { border-color:#7d925d; background:var(--surface-raised); }
.opening-mode-card:disabled { opacity:.45; }
.opening-chapter-list { display:grid; gap:10px; margin-top:20px; }
.opening-chapter-list > details { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.opening-chapter-list > details > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:57px; padding:16px 18px; color:var(--ink); font-size:14px; font-weight:650; cursor:pointer; list-style:none; }
.opening-chapter-list > details > summary::-webkit-details-marker { display:none; }
.opening-chapter-list > details > summary::before { content:'›'; margin-right:3px; color:var(--muted); font-size:21px; line-height:1; transition:transform .15s; }
.opening-chapter-list > details[open] > summary::before { transform:rotate(90deg); }
.opening-chapter-list > details > summary > :first-child { margin-right:auto; }
.opening-chapter-list > details > summary small { color:var(--muted); font-size:11px; font-weight:450; }
.opening-chapter-list > details[open] > summary { border-bottom:1px solid var(--line); }
.opening-line-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:55px; padding:13px 18px; border:0; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); border-radius:0; color:var(--ink); background:transparent; text-align:left; }
.opening-line-row:last-child { border-bottom:0; }
.opening-line-row > div { display:grid; gap:3px; min-width:0; }
.opening-line-row strong { color:var(--ink); font-size:12px; font-weight:600; line-height:1.5; }
.opening-line-row small { color:var(--muted); font-size:10px; }
.opening-line-row:hover, .opening-line-row.current { background:var(--surface-raised); }
.opening-line-row .line-state { padding:4px 7px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:10px; }
.opening-line-row .line-state.mastered { color:var(--green); border-color:#617547; }
.opening-line-row .line-state.due { color:#d5bd81; border-color:#77613d; }
.opening-session-header { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; margin:0 0 12px; }
.opening-session-header h1, .opening-session-header h2 { margin:0; color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.2px; }
.opening-session-header p, .opening-session-header small { margin:4px 0 0; color:var(--muted); font-size:11px; }
.opening-session-header .button { flex-shrink:0; min-height:34px; font-size:11px; }
.opening-session-progress { display:flex; align-items:center; gap:11px; margin:0 0 14px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.opening-session-progress .progress-track { flex:1; min-width:40px; height:5px; }
.opening-session-progress > strong { color:var(--ink); font-size:12px; font-weight:650; }
.opening-coach { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:start; gap:10px; margin:15px 0; }
.opening-coach-avatar { display:grid; place-items:center; width:34px; height:38px; border:1px solid var(--line); border-radius:7px; color:var(--green); background:var(--surface-raised); }
.opening-coach-avatar > svg { width:23px; height:23px; }
.opening-coach > :last-child:not(.opening-coach-avatar) { min-width:0; padding:14px; border:1px solid var(--line); border-radius:0 9px 9px 9px; color:var(--ink); background:var(--surface-raised); font-size:13px; line-height:1.75; }
.opening-coach p { margin:0 0 9px; }
.opening-coach p:last-child { margin-bottom:0; }
.opening-mode-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:15px 0; }
.opening-mode-tabs button { display:flex; flex-direction:column; min-width:0; min-height:65px; padding:9px 5px; font-size:10px; }
.opening-mode-tabs button svg { width:20px; height:20px; }
.opening-mode-tabs button strong { font-size:11px; font-weight:650; }
.opening-mode-tabs button small { color:var(--muted); font-size:9px; font-weight:450; }
.opening-library-drawer { margin-top:12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.opening-library-drawer > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:45px; padding:12px 15px; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; }
.opening-library-drawer[open] > summary { border-bottom:1px solid var(--line); color:var(--ink); }
.opening-library-drawer > :not(summary) { margin:12px; }
.opening-library-drawer .library-toolbar { margin-bottom:12px; }
.guide-panel .puzzle-title { font-size:20px; }
.guide-panel .button-row { flex-wrap:wrap; }
.guide-panel .mastery-stats { font-size:11px; }
.guide-panel .status-message { margin:14px 0; font-size:12px; }
.guide-panel .lesson-line { max-height:150px; }
.guide-panel details, .library-list details { font-size:12px; }
.guide-plan, .coach-plan { font-size:12px; }
.recommendation-card { border-radius:8px; }
.recommendation-card > small { font-size:10px; }
.recommendation-card > .button { font-size:11px; }
.move-quality { font-size:11px; }
.guide-panel .quality-badge { font-size:11px; }
.library-list .course-lesson { min-height:57px; border-radius:6px; }
.library-list .course-lesson > strong { font-size:12px; }
.library-list .course-lesson small { font-size:10px; }
.analytics-card > p, .analytics-chart text { color:var(--muted); fill:var(--muted); }
.game-review-summary, .game-review-selected { animation:none; }
.game-review-player { background:var(--surface-raised); }
.game-review-chart { background:var(--surface-raised); }
.game-review-panel .button-row { gap:8px; }

/* Shared module hooks for saved tactics and miniature course boards. */
.opening-mini-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); flex-shrink:0; width:148px; aspect-ratio:1; overflow:hidden; border:1px solid #0002; border-radius:6px; pointer-events:none; user-select:none; }
.opening-mini-square { position:relative; display:grid; place-items:center; min-width:0; min-height:0; aspect-ratio:1; }
.opening-mini-square.light { background:var(--light-square); }
.opening-mini-square.dark { background:var(--dark-square); }
.opening-mini-square img { display:block; width:92%; height:92%; object-fit:contain; pointer-events:none; }
.opening-course-card .opening-mini-board { align-self:center; width:148px; }
.opening-overview-hero .opening-mini-board { width:180px; }
.puzzle-main-panel .training-badge { display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.25px; }
.puzzle-main-panel .training-badge .icon { width:17px; height:17px; }
.puzzle-panel-tools { display:flex; align-items:center; gap:9px; }
.puzzle-favorite.active { color:var(--green); border-color:#667b48; background:var(--green-soft); }
.puzzle-rating-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.puzzle-rating-header > span { color:var(--muted); font-size:12px; }
.puzzle-rating-header > strong { color:var(--ink); font-size:36px; font-weight:750; line-height:1.1; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.puzzle-player-strip { padding-bottom:0; border:0; }
.puzzle-player-strip > .puzzle-player-avatar { display:grid; flex-shrink:0; place-items:center; width:37px; height:37px; border:1px solid var(--line); border-radius:8px; color:var(--green); background:var(--surface-raised); }
.puzzle-player-avatar .icon { width:25px; height:25px; }
.puzzle-player-strip > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.puzzle-player-strip .color-dot { flex-shrink:0; margin-left:auto; }
.puzzle-result-heading { display:flex; align-items:center; gap:8px; color:var(--green); }
.puzzle-result-heading > .icon { width:21px; height:21px; }
.puzzle-result-card .puzzle-result-heading strong { margin:0; color:var(--ink); font-size:15px; font-weight:700; }
.puzzle-result-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.puzzle-result-stats > div { min-width:0; }
.puzzle-result-stats span { display:block; color:var(--muted); font-size:9px; line-height:1.5; }
.puzzle-result-stats strong { display:block; margin-top:3px; color:var(--ink); font-size:15px; font-variant-numeric:tabular-nums; }
.puzzle-result-stats .positive { color:var(--green); }
.puzzle-result-stats .negative { color:#d98671; }
.puzzle-next-row { display:flex; gap:8px; margin-top:14px; }
.puzzle-next-row .button-primary { flex:1; }
.puzzle-main-panel .puzzle-toolrow { flex-wrap:wrap; gap:6px; margin-top:15px; padding-top:0; border:0; }
.puzzle-main-panel .puzzle-toolrow .button { min-height:36px; padding:8px; font-size:11px; }
.puzzle-main-panel .puzzle-toolrow .icon { width:16px; height:16px; }
.puzzle-played-line { min-height:24px; max-height:145px; margin:15px 0; overflow-y:auto; scrollbar-width:thin; }
.puzzle-main-panel > .puzzle-session-strip { display:grid; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.puzzle-main-panel > .puzzle-session-strip > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.puzzle-main-panel > .puzzle-session-strip span { color:var(--muted); font-size:11px; }
.puzzle-main-panel > .puzzle-session-strip strong { color:var(--ink); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.puzzle-main-panel > .puzzle-session-strip small { color:var(--muted); font-size:11px; font-weight:450; }
.puzzle-main-panel > .puzzle-session-strip .progress-track { width:100%; }
.puzzle-session-panel .panel-header h3 { font-size:13px; }
.puzzle-session-panel .panel-header > strong { color:var(--ink); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.puzzle-rating-spark .spark-guide { stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }
.puzzle-rating-spark .spark-dot { fill:var(--green); stroke:var(--paper); stroke-width:1; }
.puzzle-rating-spark .spark-dot.last { stroke:var(--green); stroke-width:1; }
.puzzle-rating-spark > div { display:flex; justify-content:space-between; padding-top:3px; color:var(--muted); font-size:10px; }
.puzzle-rating-spark.empty { display:flex; align-items:center; justify-content:center; min-height:62px; padding:12px 5px; color:var(--muted); font-size:11px; line-height:1.6; text-align:center; }
.puzzle-session-numbers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.puzzle-session-numbers > span { display:grid; gap:3px; min-width:0; }
.puzzle-session-numbers strong { color:var(--ink); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.puzzle-session-numbers small { color:var(--muted); font-size:10px; line-height:1.4; }
.puzzle-recent-panel .button-ghost { min-height:27px; padding:3px 0 3px 7px; font-size:11px; }
.puzzle-recent-list { display:grid; margin-top:12px; }
.puzzle-recent-item { display:flex; align-items:center; gap:10px; width:100%; min-height:49px; padding:9px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); background:transparent; text-align:left; }
.puzzle-recent-item:last-child { padding-bottom:0; border-bottom:0; }
.puzzle-recent-item > span:nth-child(2) { display:grid; gap:2px; }
.puzzle-recent-item strong { color:var(--ink); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.puzzle-recent-item small { color:var(--muted); font-size:10px; }
.puzzle-recent-item > span:last-child { margin-left:auto; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.puzzle-recent-mark { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--surface-raised); }
.puzzle-recent-mark .icon { width:15px; height:15px; }
.puzzle-recent-item.clean .puzzle-recent-mark { color:var(--green); border-color:#637947; }
.puzzle-recent-item.corrected .puzzle-recent-mark { color:#d5bd81; }
.puzzle-recent-item.skipped .puzzle-recent-mark { color:#d98671; }
.puzzle-recent-item:hover { background:var(--surface-raised); }
.puzzle-filter-panel > summary { display:flex; align-items:center; gap:8px; }
.puzzle-filter-panel > summary > .icon { width:17px; height:17px; color:var(--muted); }
.puzzle-filter-panel > summary > span { margin-left:auto; color:var(--muted); font-size:10px; font-weight:450; }
.puzzle-filter-content { padding-top:3px; }
.puzzle-filter-content .filter-grid { grid-template-columns:1fr 1fr; gap:10px; }
.puzzle-filter-content .button-row { flex-wrap:wrap; gap:7px; }
.puzzle-filter-content .button { padding:8px 9px; font-size:11px; }
:is(.puzzle-main-panel,.puzzle-session-panel,.puzzle-recent-panel,.puzzle-filter-panel) .icon { flex:none; width:18px; height:18px; max-width:20px; max-height:20px; }
.puzzle-player-avatar .icon { width:20px; height:20px; }
.puzzle-recent-mark .icon { width:16px; height:16px; }

@media (min-width:1000px) {
  .app-shell:not(.focus-mode) .sidebar { width:176px; padding:25px 12px 18px; }
  .app-shell:not(.focus-mode) .sidebar .brand { display:flex; gap:6px; padding:0 8px 25px; }
  .app-shell:not(.focus-mode) .sidebar .brand-mark { width:30px; height:34px; }
  .app-shell:not(.focus-mode) .sidebar .brand-mark svg { width:29px; height:29px; }
  .app-shell:not(.focus-mode) .sidebar .brand-name { display:block; font-size:28px; }
  .app-shell:not(.focus-mode) .sidebar nav { gap:5px; }
  .app-shell:not(.focus-mode) .sidebar .nav-button { justify-content:flex-start; width:100%; min-height:43px; height:auto; gap:11px; margin:0; padding:11px 12px; border-radius:7px; font-size:13px; }
  .app-shell:not(.focus-mode) .sidebar .nav-button span:not(.icon) { display:inline; }
  .app-shell:not(.focus-mode) .sidebar .nav-button .icon { width:19px; height:19px; }
  .app-shell:not(.focus-mode) .sidebar .nav-button.active::after { position:static; width:4px; height:4px; }
  .app-shell:not(.focus-mode) .sidebar-footer { padding:17px 0 0; }
  .app-shell:not(.focus-mode) .main-content { width:calc(100% - 176px); max-width:1800px; margin-left:176px; padding:18px 26px 30px; }
  .app-shell:not(.focus-mode) .workspace { grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:24px; max-width:1420px; margin:0 auto; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course,.page-blitz) .board-card { min-width:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course) .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - var(--board-reserve))); }
  .app-shell:not(.focus-mode) .page-blitz .board-wrap { flex:0 1 auto; width:min(100%,calc(100dvh - 270px)); }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course,.page-blitz) .board-shell { justify-content:center; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course,.page-blitz) .board-toolbar { min-height:42px; padding:0 2px 10px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course,.page-blitz) .player-avatar { width:29px; height:29px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course,.page-blitz) .board-bottom { min-height:36px; padding-top:6px; }
  .app-shell:not(.focus-mode) :is(.page-training,.page-guide,.page-analysis,.page-opening-game,.page-course,.page-blitz) .right-panel { display:grid; grid-template-columns:1fr; align-content:start; max-height:calc(100dvh - 110px); gap:14px; padding-right:3px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#535a45 transparent; }
  .app-shell:not(.focus-mode) .page-blitz:has(> .blitz-scoreboard) .right-panel { max-height:calc(100dvh - 190px); }
  .app-shell:not(.focus-mode) .page-guide:has(> .opening-session-header) { --board-reserve:202px; }
  .app-shell:not(.focus-mode) .page-training:has(> .puzzle-hub-tabs) { --board-reserve:210px; }
  .app-shell:not(.focus-mode) .page-guide:has(> .opening-session-header) .right-panel { max-height:calc(100dvh - 142px); }
  .app-shell:not(.focus-mode) .page-training:has(> .puzzle-hub-tabs) .right-panel { max-height:calc(100dvh - 150px); }
  .toast { left:calc(50% + 88px); }
}
@media (min-width:1000px) and (max-width:1199px) {
  .app-shell:not(.focus-mode) .main-content { padding-left:19px; padding-right:19px; }
  .app-shell:not(.focus-mode) .workspace { grid-template-columns:minmax(0,1fr) 315px; gap:17px; }
  .panel { padding:17px; }
  .opening-course-card { grid-template-columns:112px minmax(0,1fr); gap:13px; padding:12px; }
  .opening-course-card .mini-board { width:112px; }
  .opening-course-card .opening-mini-board { width:112px; }
  .opening-course-card h2 { font-size:15px; }
  .opening-course-body > p { font-size:11px; }
}
@media (max-width:999px) and (min-width:750px) {
  .app-shell:not(.focus-mode) .sidebar { width:68px; align-items:center; padding:21px 8px 18px; }
  .app-shell:not(.focus-mode) .sidebar .brand { padding:0 0 22px; }
  .app-shell:not(.focus-mode) .sidebar .brand-name { display:none; }
  .app-shell:not(.focus-mode) .sidebar .nav-button { justify-content:center; width:47px; height:44px; min-height:44px; margin:0 auto; padding:11px; font-size:0; }
  .app-shell:not(.focus-mode) .sidebar .nav-button span:not(.icon) { display:none; }
  .app-shell:not(.focus-mode) .sidebar .nav-button.active::after { position:absolute; right:4px; top:5px; width:4px; height:4px; }
  .app-shell:not(.focus-mode) .sidebar-footer { width:100%; padding:17px 0 0; }
  .app-shell:not(.focus-mode) .main-content { width:calc(100% - 68px); margin-left:68px; padding:18px 19px 28px; }
  .app-shell:not(.focus-mode) .workspace { grid-template-columns:minmax(0,1fr) 285px; gap:15px; }
  .app-shell:not(.focus-mode) .board-card { padding:0; border:0; background:transparent; box-shadow:none; }
  .app-shell:not(.focus-mode) .board-wrap { width:100%; max-width:100%; }
  .app-shell:not(.focus-mode) .right-panel { display:grid; grid-template-columns:1fr; align-content:start; gap:12px; max-height:calc(100dvh - 100px); padding-right:2px; overflow-y:auto; }
  .app-shell:not(.focus-mode) .right-panel > .panel:first-child { grid-row:auto; }
  .panel { padding:16px; }
  .puzzle-title { font-size:21px; }
  .opening-dashboard .course-grid, .opening-course-grid { grid-template-columns:1fr; }
  .opening-course-card { grid-template-columns:132px minmax(0,1fr); min-height:158px; }
  .opening-course-card .mini-board { width:132px; }
  .opening-course-card .opening-mini-board { width:132px; }
  .opening-mode-card { gap:8px; padding:13px; }
  .opening-mode-card strong { font-size:13px; }
  .opening-stats > div, .opening-stats > article { padding:14px; }
  .opening-stats :is(strong,dd) { font-size:24px; }
  .opening-overview-hero { grid-template-columns:140px minmax(0,1fr); gap:19px; padding:20px; }
  .opening-overview-hero .mini-board { width:140px; }
  .opening-overview-hero .opening-mini-board { width:140px; }
  .opening-overview-hero h1 { font-size:27px; }
}
@media (max-width:749px) {
  .app-shell:not(.focus-mode) .sidebar { position:fixed; inset:auto 0 0; z-index:50; display:flex; flex-direction:row; align-items:center; gap:3px; width:100%; height:64px; padding:6px 8px max(6px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); border-right:0; }
  .app-shell:not(.focus-mode) .sidebar .brand { display:none; }
  .app-shell:not(.focus-mode) .sidebar nav { display:flex; flex:1; align-items:center; gap:3px; width:auto; overflow-x:auto; scrollbar-width:none; }
  .app-shell:not(.focus-mode) .sidebar .nav-button { display:flex; flex:0 0 63px; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:63px; min-height:49px; height:49px; margin:0; padding:5px 3px; font-size:9px; }
  .app-shell:not(.focus-mode) .sidebar .nav-button span:not(.icon) { display:inline; }
  .app-shell:not(.focus-mode) .sidebar .nav-button .icon { width:19px; height:19px; }
  .app-shell:not(.focus-mode) .sidebar .nav-button.active::after { position:absolute; top:4px; right:calc(50% - 15px); width:3px; height:3px; }
  .app-shell:not(.focus-mode) .sidebar-footer { flex:0 0 63px; width:63px; margin:0; padding:0; }
  .app-shell:not(.focus-mode) .main-content { width:100%; min-height:100dvh; margin-left:0; padding:14px 13px 88px; }
  .app-shell:not(.focus-mode) .workspace { display:grid; grid-template-columns:1fr; gap:17px; max-width:620px; margin:0 auto; }
  .app-shell:not(.focus-mode) .board-card { padding:0; border:0; background:transparent; box-shadow:none; }
  .app-shell:not(.focus-mode) .board-wrap { flex:0 1 auto; width:100%; max-width:100%; }
  .app-shell:not(.focus-mode) .right-panel { display:grid; grid-template-columns:1fr; align-content:start; gap:13px; max-height:none; overflow:visible; padding:0; }
  .app-shell:not(.focus-mode) .right-panel > .panel:first-child { grid-row:auto; }
  .topbar { min-height:31px; margin-bottom:14px; }
  .topbar > strong { font-size:12px; }
  .topbar-right { gap:6px; }
  .topbar .icon-button { width:31px; height:31px; }
  .daily-chip { font-size:11px; }
  .panel { padding:18px; }
  .button { min-height:42px; font-size:12px; }
  .input, .select { min-height:42px; font-size:13px; }
  .board-toolbar .player-name { font-size:12px; }
  .board-toolbar .player-rating { max-width:240px; font-size:10px; }
  .board-bottom > .muted { font-size:10px; }
  .puzzle-title { font-size:23px; }
  .puzzle-hub-tabs { gap:2px; padding:3px; margin-bottom:14px; }
  .puzzle-hub-tabs :is(button,a) { min-height:62px; padding:8px 4px; font-size:11px; }
  .opening-dashboard .course-grid, .opening-course-grid { grid-template-columns:1fr; gap:12px; }
  .opening-course-card { grid-template-columns:112px minmax(0,1fr); gap:13px; min-height:142px; padding:12px; }
  .opening-course-card .mini-board { width:112px; }
  .opening-course-card .opening-mini-board { width:112px; }
  .opening-course-card h2 { font-size:16px; }
  .opening-course-body > p { margin-bottom:8px; font-size:11px; line-height:1.6; }
  .opening-course-body .course-meta { font-size:10px; }
  .opening-overview-hero { grid-template-columns:110px minmax(0,1fr); gap:15px; padding:16px; }
  .opening-overview-hero .mini-board { width:110px; }
  .opening-overview-hero .opening-mini-board { width:110px; }
  .opening-overview-hero h1 { font-size:23px; }
  .opening-overview-hero p { margin-bottom:10px; font-size:12px; line-height:1.6; }
  .opening-overview-hero .button-row { grid-column:1 / -1; }
  .opening-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
  .opening-stats > div, .opening-stats > article { padding:14px; }
  .opening-stats :is(strong,dd) { font-size:25px; }
  .opening-mode-grid { grid-template-columns:1fr; gap:9px; margin:14px 0; }
  .opening-mode-card { align-items:center; min-height:80px; padding:15px; }
  .opening-mode-card > div { gap:3px; }
  .opening-mode-card strong { font-size:14px; }
  .opening-mode-card small { font-size:12px; }
  .opening-tabs, .opening-scope { gap:5px; }
  .opening-tabs :is(button,a), .opening-scope button { flex:1 0 auto; min-height:39px; padding:8px 9px; font-size:11px; }
  .opening-session-header { gap:10px; }
  .opening-session-header h1, .opening-session-header h2 { font-size:16px; }
  .opening-session-header .button { min-height:33px; padding:7px 9px; font-size:10px; }
  .opening-line-row { min-height:60px; padding:13px 14px; }
  .opening-line-row strong { font-size:12px; }
  .opening-line-row .line-state { max-width:100px; font-size:10px; }
  .opening-chapter-list > details > summary { min-height:55px; padding:14px; font-size:13px; }
  .opening-coach > :last-child:not(.opening-coach-avatar) { padding:13px; font-size:13px; }
  .opening-mode-tabs button { min-height:69px; font-size:11px; }
  .opening-mode-tabs button small { font-size:10px; }
  .toast { left:50%; bottom:84px; width:calc(100% - 30px); max-width:430px; }
}
@media (max-width:380px) {
  .opening-course-card { grid-template-columns:92px minmax(0,1fr); gap:11px; padding:10px; }
  .opening-course-card .mini-board { width:92px; }
  .opening-course-card .opening-mini-board { width:92px; }
  .opening-course-card h2 { font-size:14px; }
  .opening-course-body > p { font-size:10px; }
  .opening-overview-hero { grid-template-columns:1fr; }
  .opening-overview-hero .mini-board { display:none; }
  .opening-overview-hero .opening-mini-board { display:none; }
  .puzzle-result-card .puzzle-result-metrics { gap:6px; }
}
.focus-mode { --focus-board-size:min(calc(100dvh - 132px),calc(100vw - 426px),1100px); }
.focus-mode .main-content { padding:8px 14px; }
.focus-mode .workspace { grid-template-columns:minmax(0,1fr) 360px; max-width:1480px; gap:20px; }
.focus-mode .board-card { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.focus-mode .board-wrap { width:var(--focus-board-size); border-radius:8px; }
.focus-mode .board-toolbar { min-height:35px; padding-bottom:8px; }
.focus-mode .board-bottom { min-height:33px; padding-top:5px; }
.focus-mode .right-panel { max-height:calc(100dvh - 56px); gap:12px; }
.focus-mode .right-panel > .panel { padding:18px; }
.focus-mode .opening-session-header { margin-bottom:8px; }
.focus-mode .opening-session-header h1, .focus-mode .opening-session-header h2 { font-size:15px; }
.focus-mode .page-guide:has(> .opening-session-header) { --focus-board-size:min(calc(100dvh - 181px),calc(100vw - 426px),1100px); }
.focus-mode .page-guide:has(> .opening-session-header) .right-panel { max-height:calc(100dvh - 105px); }
.focus-mode .page-blitz:has(> .blitz-scoreboard) { --focus-board-size:min(calc(100dvh - 211px),calc(100vw - 426px),1100px); }
@media (min-width:750px) and (max-width:999px) {
  .focus-mode { --focus-board-size:min(calc(100dvh - 132px),calc(100vw - 356px)); }
  .focus-mode .workspace { grid-template-columns:minmax(0,1fr) 292px; gap:15px; }
  .focus-mode .right-panel > .panel { padding:15px; }
  .focus-mode .page-guide:has(> .opening-session-header) { --focus-board-size:min(calc(100dvh - 181px),calc(100vw - 356px)); }
  .focus-mode .page-blitz:has(> .blitz-scoreboard) { --focus-board-size:min(calc(100dvh - 211px),calc(100vw - 356px)); }
}
@media (max-width:749px) {
  .focus-mode { --focus-board-size:min(calc(100dvh - 132px),calc(100vw - 24px)); }
  .focus-mode .main-content { padding:9px 12px 24px; }
  .focus-mode .workspace { display:block; max-width:620px; }
  .focus-mode .board-wrap { width:var(--focus-board-size); max-width:100%; }
  .focus-mode .right-panel { max-height:none; margin-top:15px; overflow:visible; }
  .focus-mode .page-guide:has(> .opening-session-header) { --focus-board-size:min(calc(100dvh - 181px),calc(100vw - 24px)); }
  .focus-mode .page-guide:has(> .opening-session-header) .right-panel { max-height:none; }
  .focus-mode .page-blitz:has(> .blitz-scoreboard) { --focus-board-size:min(calc(100dvh - 211px),calc(100vw - 24px)); }
}
@media (prefers-reduced-motion:reduce) {
  .opening-course-card, .opening-mode-card, .button, .icon-button, .progress-fill, .opening-chapter-list > details > summary::before { transition:none; }
}

/* Repertoire module: catalog, course overview, and the memory trainer. */
.opening-catalog { max-width:1220px; margin:0 auto; }
.opening-page-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:2px 0 22px; }
.opening-page-heading h1 { margin:5px 0 7px; color:var(--ink); font-size:32px; font-weight:750; line-height:1.2; letter-spacing:-.7px; }
.opening-page-heading p { margin:0; color:var(--muted); font-size:13px; }
.opening-eyebrow { color:var(--muted); font-size:10px; font-weight:650; letter-spacing:1.2px; }
.opening-catalog-stats { display:flex; align-items:center; gap:22px; }
.opening-catalog-stats .opening-stat { display:grid; gap:3px; min-width:88px; }
.opening-catalog-stats strong { color:var(--ink); font-size:25px; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; }
.opening-catalog-stats .due strong { color:var(--green); }
.opening-catalog-stats span { color:var(--muted); font-size:11px; }
.opening-catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 20px; }
.opening-catalog-toolbar .tab-pills { flex-shrink:0; margin:0; }
.opening-search { flex:0 1 270px; min-width:170px; }
.opening-search .input { width:100%; }
.opening-course-preview { display:grid; align-items:center; justify-items:center; align-self:stretch; min-width:0; }
.opening-course-copy { display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:1px 0; }
.opening-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.opening-card-head > strong { min-width:0; color:var(--ink); font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.2px; }
.opening-color-chip { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; min-height:21px; padding:3px 5px; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:9px; font-weight:600; line-height:1.2; white-space:nowrap; }
.opening-color-chip::before { content:''; display:block; width:6px; height:6px; border:1px solid #a7aa9a; border-radius:50%; background:#eeefdf; }
.opening-color-chip.black::before { border-color:#747b69; background:#1a1b17; }
.opening-card-description { display:block; max-height:4.8em; margin:9px 0 13px; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.6; }
.opening-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; color:var(--muted); font-size:10px; line-height:1.5; }
.opening-progress { display:grid; gap:6px; margin:10px 0 0; }
.opening-progress > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; line-height:1.4; }
.opening-progress strong { color:var(--ink); font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; }
.opening-progress .progress-track { width:100%; height:4px; }
.opening-progress .progress-fill { display:block; height:100%; }
.opening-card-cta { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:10px; color:var(--green); font-size:11px; font-weight:650; line-height:1.4; }
.opening-card-cta > span { font-size:17px; }
.opening-back { display:inline-flex; align-items:center; min-height:34px; padding:0; margin:0 0 11px; border:0; color:var(--muted); background:transparent; font-size:12px; }
.opening-back:hover { color:var(--ink); }
.opening-overview-preview { display:grid; place-items:center; min-width:0; }
.opening-overview-intro { min-width:0; }
.opening-overview-intro .opening-eyebrow { display:block; margin-bottom:6px; }
.opening-overview-intro .opening-progress { max-width:580px; margin-top:18px; }
.opening-overview-meta { display:flex; flex-wrap:wrap; gap:7px 16px; margin:14px 0 0; color:var(--muted); font-size:11px; }
.opening-overview-meta > span + span::before { content:'·'; margin-right:15px; color:#737a68; }
.opening-study-toolbar { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:20px 0; }
.opening-study-toolbar .tab-pills { margin:0; }
.opening-study-toolbar .opening-scope button > span { padding-left:3px; opacity:.7; font-size:10px; font-variant-numeric:tabular-nums; }
.opening-session-length { display:flex; align-items:center; gap:9px; margin:0; }
.opening-session-length label { margin:0; color:var(--muted); font-size:11px; white-space:nowrap; }
.opening-session-length .select { width:73px; min-width:73px; }
.opening-overview-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:17px 0; }
.opening-overview-stats > .opening-stat { min-width:0; padding:17px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.opening-overview-stats strong { display:block; margin-bottom:3px; color:var(--ink); font-size:27px; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; }
.opening-overview-stats span { color:var(--muted); font-size:11px; }
.opening-overview-stats :is(.due,.mastered) strong { color:var(--green); }
.opening-overview-stats .weak strong { color:#d6b67f; }
.opening-mode-card { display:grid; grid-template-columns:27px minmax(0,1fr) auto; grid-template-rows:auto auto; align-content:center; align-items:center; gap:4px 10px; }
.opening-mode-card .opening-mode-icon { display:grid; grid-column:1; grid-row:1 / 3; place-items:center; width:27px; height:27px; }
.opening-mode-card .opening-mode-icon .quality-icon { width:25px; height:25px; }
.opening-mode-card > strong { grid-column:2; grid-row:1; font-size:14px; }
.opening-mode-card > small { grid-column:2; grid-row:2; font-size:11px; }
.opening-mode-card .opening-mode-count { grid-column:3; grid-row:1 / 3; margin-left:6px; color:var(--green); font-size:23px; font-weight:750; font-variant-numeric:tabular-nums; }
.opening-lines-panel { margin-top:23px; }
.opening-lines-panel .panel-header { margin-bottom:16px; }
.opening-lines-panel .panel-header h2 { color:var(--ink); font-size:17px; font-weight:700; }
.opening-lines-panel .library-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.55fr); gap:10px; margin-bottom:17px; }
.opening-lines { display:grid; gap:9px; min-width:0; }
.opening-chapter { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.opening-chapter > summary { display:flex; align-items:center; gap:10px; min-height:52px; padding:14px 15px; color:var(--ink); list-style:none; cursor:pointer; }
.opening-chapter > summary::-webkit-details-marker { display:none; }
.opening-chapter > summary::before { content:'›'; flex-shrink:0; color:var(--muted); font-size:21px; line-height:1; transition:transform .15s; }
.opening-chapter[open] > summary::before { transform:rotate(90deg); }
.opening-chapter > summary > strong { color:var(--ink); font-size:13px; font-weight:650; }
.opening-chapter > summary > span { margin-left:auto; flex-shrink:0; color:var(--muted); font-size:10px; }
.opening-chapter[open] > summary { border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--green) 3%,var(--paper)); }
.opening-line { display:grid; grid-template-columns:37px minmax(0,1fr) auto 10px; align-items:center; gap:10px; width:100%; min-height:60px; padding:12px 14px; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); background:transparent; text-align:left; }
.opening-line:last-child { border-bottom:0; }
.opening-line:hover, .opening-line.active { background:var(--surface-raised); }
.opening-line-code { color:var(--muted); font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; }
.opening-line-name { display:grid; gap:3px; min-width:0; }
.opening-line-name strong { color:var(--ink); font-size:12px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.opening-line-name small { color:var(--muted); font-size:10px; }
.opening-line-stage { flex-shrink:0; min-width:0; padding:4px 7px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:var(--surface-raised); font-size:10px; font-weight:600; line-height:1.4; white-space:nowrap; }
.opening-line-stage.mastered { color:var(--green); border-color:#627946; background:color-mix(in srgb,var(--green) 7%,var(--paper)); }
.opening-line-stage.due { color:#d7bc79; border-color:#77613d; }
.opening-line-stage.weak { color:#dcaa83; border-color:#77573e; }
.opening-line-arrow { color:var(--muted); font-size:20px; text-align:right; }
.opening-trainer-workspace .opening-trainer-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.opening-trainer-heading .training-badge { min-width:0; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:0; line-height:1.5; }
.opening-trainer-heading .opening-line-stage { font-size:9px; }
.opening-trainer .puzzle-title { margin:12px 0 17px; font-size:19px; font-weight:700; line-height:1.45; letter-spacing:-.2px; }
.opening-trainer .opening-session-progress { display:grid; gap:8px; margin-bottom:16px; }
.opening-session-progress > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.opening-session-progress > div:first-child > span { color:var(--muted); font-size:11px; }
.opening-session-progress > div:first-child > strong { color:var(--ink); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.opening-session-progress .progress-track { width:100%; height:5px; }
.opening-session-progress .progress-fill { display:block; height:100%; }
.opening-coach-copy.status-message { display:grid; align-content:center; gap:6px; margin:0; min-height:74px; }
.opening-coach-copy > strong { color:inherit; font-size:13px; font-weight:650; line-height:1.65; }
.opening-coach-copy > span { color:var(--muted); font-size:11px; line-height:1.6; }
.opening-coach-copy.status-message.error { border-color:#a668504d; color:#e0a18b; background:color-mix(in srgb,#d98671 7%,var(--paper)); }
.opening-coach-copy.status-message.success { border-color:#6a875144; color:var(--green); background:color-mix(in srgb,var(--green) 7%,var(--paper)); }
.opening-coach-avatar .quality-icon { width:24px; height:24px; }
.opening-trainer-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:17px 0 15px; }
.opening-mode-tab { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:44px; padding:9px 8px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface-raised); font-size:12px; font-weight:650; }
.opening-mode-tab .quality-icon { width:19px; height:19px; }
.opening-mode-tab:hover { border-color:#697b50; color:var(--ink); }
.opening-mode-tab.active { color:var(--ink); border-color:#7a9257; background:var(--green-soft); }
.opening-position-score { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:5px 12px; padding:14px 0 0; margin-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.opening-position-score > strong { color:var(--ink); font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.opening-position-score > small { grid-column:1 / -1; color:var(--muted); font-size:9px; }
.opening-last-quality > .hint-text { display:block; margin-top:13px; font-size:10px; }
.opening-last-quality .move-quality { margin-top:7px; }
.opening-played-moves { padding-top:14px; margin-bottom:0; border-top:1px solid var(--line); }
.opening-trainer-workspace .board-controls { flex-wrap:wrap; justify-content:flex-end; gap:3px; }
.opening-trainer-workspace .board-controls .button { min-height:30px; padding:5px 8px; font-size:10px; }
.opening-reply-drawer > .field { margin-top:14px; }
.opening-library-drawer.panel { padding:0; }
.opening-library-drawer.panel > summary { margin:0; padding:14px 15px; }
.opening-library-drawer.panel > summary > span { color:var(--muted); font-size:10px; }
.opening-library-drawer.panel > :not(summary) { margin:12px; }
.opening-library-drawer .opening-lines { max-height:390px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#535a45 transparent; }
.opening-library-drawer .opening-line { grid-template-columns:28px minmax(0,1fr) auto; gap:8px; padding:11px 9px; }
.opening-library-drawer .opening-line-name strong { font-size:11px; }
.opening-library-drawer .opening-line-name small { font-size:9px; }
.opening-library-drawer .opening-line-stage { padding:3px 5px; font-size:8px; }
.opening-library-drawer .opening-line-arrow { display:none; }
.opening-library-drawer .button-row { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }
.opening-source { padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.opening-source p { margin-top:10px; }
.opening-source a { color:var(--green); font-size:11px; }
@media (min-width:1000px) and (max-width:1199px) {
  .opening-card-head { gap:7px; }
  .opening-card-head > strong { font-size:15px; }
  .opening-color-chip { font-size:8px; padding:3px 4px; }
  .opening-card-description { font-size:11px; }
  .opening-mode-card { padding:14px; gap:4px 8px; }
  .opening-mode-card > strong { font-size:13px; }
  .opening-mode-card > small { font-size:10px; }
}
@media (max-width:999px) and (min-width:750px) {
  .opening-page-heading h1 { font-size:29px; }
  .opening-mode-card { min-height:106px; padding:13px; gap:4px 8px; }
  .opening-mode-card .opening-mode-icon { display:none; }
  .opening-mode-card { grid-template-columns:minmax(0,1fr) auto; }
  .opening-mode-card > strong, .opening-mode-card > small { grid-column:1; }
  .opening-mode-card .opening-mode-count { grid-column:2; margin-left:2px; font-size:21px; }
  .opening-overview-stats > .opening-stat { padding:14px; }
  .opening-overview-stats strong { font-size:24px; }
}
@media (max-width:749px) {
  .opening-page-heading { gap:12px; margin:0 0 18px; }
  .opening-page-heading h1 { margin-top:4px; font-size:28px; }
  .opening-page-heading p { font-size:12px; }
  .opening-catalog-stats { gap:15px; }
  .opening-catalog-stats .opening-stat { min-width:65px; }
  .opening-catalog-stats strong { font-size:22px; }
  .opening-catalog-stats span { font-size:9px; }
  .opening-catalog-toolbar { align-items:stretch; flex-wrap:wrap; gap:10px; margin-bottom:15px; }
  .opening-catalog-toolbar .tab-pills { width:100%; padding:0; }
  .opening-search { flex:1 1 100%; }
  .opening-card-head { flex-wrap:wrap; gap:5px 8px; }
  .opening-card-head > strong { flex:1 1 auto; font-size:16px; }
  .opening-color-chip { margin-right:auto; font-size:8px; }
  .opening-card-description { max-height:4.8em; margin:7px 0 9px; font-size:11px; }
  .opening-card-meta { flex-wrap:wrap; gap:3px 8px; font-size:10px; }
  .opening-progress { gap:5px; margin-top:9px; }
  .opening-progress > div:first-child, .opening-progress strong { font-size:9px; }
  .opening-card-cta { margin-top:8px; font-size:10px; }
  .opening-overview-meta { gap:5px 9px; font-size:10px; }
  .opening-overview-meta > span + span::before { margin-right:8px; }
  .opening-overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:15px 0; }
  .opening-overview-stats > .opening-stat { padding:14px; }
  .opening-overview-stats strong { font-size:25px; }
  .opening-study-toolbar { align-items:center; gap:13px; margin:17px 0; }
  .opening-session-length { justify-content:flex-end; }
  .opening-session-length .select { min-height:38px; }
  .opening-mode-card { min-height:83px; padding:15px; }
  .opening-mode-card > small { font-size:11px; }
  .opening-lines-panel { margin-top:18px; padding:15px; }
  .opening-lines-panel .library-toolbar { grid-template-columns:1fr; gap:8px; }
  .opening-chapter > summary { gap:8px; padding:13px 11px; }
  .opening-chapter > summary > strong { font-size:12px; }
  .opening-chapter > summary > span { font-size:9px; }
  .opening-line { grid-template-columns:29px minmax(0,1fr) auto; gap:8px; padding:12px 10px; }
  .opening-line-code { font-size:9px; }
  .opening-line-arrow { display:none; }
  .opening-line-stage { padding:3px 5px; font-size:8px; }
  .opening-line-name strong { font-size:11px; }
  .opening-line-name small { font-size:9px; }
  .opening-trainer .puzzle-title { font-size:19px; }
  .opening-coach-copy.status-message { min-height:70px; }
  .opening-trainer-workspace .board-controls .button { min-height:30px; padding:5px 6px; font-size:9px; }
}
@media (max-width:380px) {
  .opening-catalog-stats { display:none; }
  .opening-card-head > strong { font-size:14px; }
  .opening-card-description { font-size:10px; }
  .opening-overview-stats span { font-size:10px; }
  .opening-line-stage { max-width:73px; overflow:hidden; text-overflow:ellipsis; }
}
@media (prefers-reduced-motion:reduce) {
  .opening-chapter > summary::before { transition:none; }
}