/* Chess Review — chess.com-inspired dark theme */
:root {
  --bg: #302e2b;
  --panel: #262522;
  --panel-2: #21201d;
  --panel-3: #3a3734;
  --border: #3d3a37;
  --text: #eeedec;
  --text-dim: #b6b2ac;
  --text-faint: #8b8781;
  --green: #81b64c;
  --green-hi: #9fd15a;
  --green-dark: #5d8a34;
  --board-light: #ebecd0;
  --board-dark: #739552;
  --last-move: rgba(255, 235, 90, 0.42);
  --accent-blue: #5b8baf;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--green-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
b { color: var(--text); }
code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px;
  font-size: 0.85em; color: var(--green-hi);
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-piece { width: 30px; height: 30px; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.brand-accent { color: var(--green); }
.tagline { color: var(--text-faint); font-size: 13px; }

/* ---------- Screens ---------- */
#app { max-width: 1180px; margin: 0 auto; padding: 24px 18px 60px; }
.screen { display: none; }
.screen.active { display: block; animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}

/* ---------- Setup ---------- */
.setup-hero { text-align: center; margin: 18px 0 24px; }
.setup-hero h1 { font-size: 34px; margin: 0 0 8px; letter-spacing: -0.8px; }
.setup-hero .sub { color: var(--text-dim); max-width: 680px; margin: 0 auto; }

.hero-pillars {
  /* same total width as the setup card below; grid keeps the three columns
     exactly equal instead of letting a wrapped item stretch to fill its row */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 720px; margin: 20px auto 0;
}
@media (max-width: 720px) { .hero-pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px;
}
.pillar-ico { font-size: 20px; line-height: 1.2; flex: none; }
.pillar b { display: block; font-size: 14px; margin-bottom: 2px; }
.pillar small { color: var(--text-faint); font-size: 12.5px; line-height: 1.45; }
.pillar em { color: var(--text-dim); font-style: italic; }
.setup-card { max-width: 720px; margin: 0 auto; }

.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14px; }
.hint { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; }
.hint.inline { font-weight: 400; color: var(--text-faint); margin-left: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }

input[type="text"], select {
  width: 100%; padding: 11px 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-size: 15px; outline: none;
}
input[type="text"]:focus, select:focus { border-color: var(--green); }
.username-row { display: flex; gap: 8px; }
.username-row input { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 20px; font-size: 13.5px; user-select: none;
}
.chip:hover { border-color: var(--text-faint); }
.chip input { accent-color: var(--green); }

input[type="range"] { width: 100%; accent-color: var(--green); }

.engine-settings {
  margin: 8px 0 18px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 14px;
}
.engine-settings summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.engine-settings[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }

.btn {
  cursor: pointer; border: none; border-radius: 8px; font-weight: 700;
  padding: 11px 18px; font-size: 15px; color: #fff; transition: background 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--green); color: #26320f; }
.btn.primary:hover { background: var(--green-hi); }
.btn.ghost { background: var(--panel-3); color: var(--text); }
.btn.ghost:hover { background: #4a4744; }
.btn.big { width: 100%; padding: 15px; font-size: 17px; margin-top: 6px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.error-msg { color: #ff8f7a; margin-top: 10px; font-size: 14px; min-height: 18px; }
.disclaimer { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 20px; }
.user-ok { color: var(--green-hi); }
.user-bad { color: #ff8f7a; }

/* ---------- Progress ---------- */
.progress-card { max-width: 560px; margin: 60px auto; text-align: center; }
.progress-card h2 { margin: 0 0 18px; }
.progress-bar {
  height: 14px; background: var(--panel-2); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-dark), var(--green-hi));
  transition: width 0.25s ease;
}
.progress-fill.indeterminate {
  width: 100% !important; transition: none;
  background: linear-gradient(90deg, transparent, var(--green-hi), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: indet 1.1s infinite linear;
}
@keyframes indet { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

.range-row input:disabled { opacity: 0.4; }
.all-matching-chip { margin-top: 10px; }
.progress-detail { margin-top: 14px; font-size: 15px; color: var(--text); }
#cancel-btn { margin-top: 22px; }

/* ---------- Results dashboard ---------- */
.results-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.results-head h2 { margin: 0; font-size: 24px; }
.results-head .who { color: var(--text-dim); font-size: 14px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; text-align: center;
}
.tile .val { font-size: 30px; font-weight: 800; line-height: 1; }
.tile .lbl { color: var(--text-faint); font-size: 12.5px; margin-top: 7px; text-transform: uppercase; letter-spacing: 0.5px; }
.tile .sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.dash-grid.thirds { grid-template-columns: 1fr 1fr; }
.panel-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.panel-title .icon { font-size: 17px; }

/* classification breakdown bars */
.class-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13.5px; }
.class-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.class-name { width: 92px; flex: none; color: var(--text-dim); }
.class-bar { flex: 1; height: 9px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.class-bar > span { display: block; height: 100%; border-radius: 5px; }
.class-count { width: 72px; text-align: right; flex: none; font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; gap: 7px; }
.class-count b { font-weight: 700; }
.class-count small { width: 38px; color: var(--text-faint); }

/* phase / meter bars */
.meter { margin-bottom: 14px; }
.meter-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.meter-track { height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--green-dark), var(--green-hi)); border-radius: 6px; }

/* recommendations */
.rec { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rec:last-child { border-bottom: none; }
.rec-badge { flex: none; width: 8px; border-radius: 4px; }
.rec.high .rec-badge { background: #d0413b; }
.rec.medium .rec-badge { background: #f0c15c; }
.rec.low .rec-badge { background: var(--green); }
.rec-body h4 { margin: 0 0 3px; font-size: 14px; }
.rec-body p { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* tables */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; color: var(--text-faint); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
table.data td { padding: 8px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
/* longitudinal improvement measurement */
.progress-periods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.progress-periods > div { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.progress-periods span, .progress-highlights > div > span { color: var(--text-faint); font-size: 11px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.progress-periods b { font-size: 14px; }
.progress-periods small { color: var(--text-dim); font-size: 12px; }
.progress-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.progress-highlights > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 8px; background: rgba(255,255,255,.025); }
.progress-highlights > div > span:first-child { width: 100%; }
.progress-chip { padding: 4px 7px; border-radius: 999px; font-size: 12px; }
.progress-chip.progress-up { color: #c7e9a3; background: rgba(129,182,76,.18); }
.progress-chip.progress-down { color: #f0b0aa; background: rgba(208,65,59,.16); }
.progress-table { margin-top: 12px; font-variant-numeric: tabular-nums; }
.progress-table td:first-child { min-width: 155px; }
.progress-table td small { display: block; margin-top: 2px; color: var(--text-faint); font-size: 11px; }
.progress-status { display: block; font-size: 12px; font-weight: 750; }
.progress-up { color: var(--green-hi); }
.progress-down { color: #ed9189; }
.progress-steady { color: var(--text-dim); }
.progress-insufficient td { color: var(--text-faint); font-size: 12px; }
.progress-method { margin: 10px 0 0; line-height: 1.4; }
/* coaching: goals, repertoire and self-review notes */
.goal-list { display: grid; gap: 8px; margin: 12px 0; }
.goal-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(110px, 1.3fr) 92px; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.goal-row small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 11px; }
.goal-track { height: 9px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.1); }
.goal-track span { display: block; height: 100%; border-radius: inherit; background: var(--green-hi); }
.goal-number { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
.coaching-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.coaching-subtitle { padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-dim); font-weight: 750; font-size: 13px; }
.annotation-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.annotation-summary span { padding: 4px 8px; border-radius: 999px; background: var(--panel-2); color: var(--text-dim); font-size: 12px; }
.annotation-summary b { color: var(--text); }
.repertoire-root { margin-bottom: 8px; color: var(--text-dim); font-size: 12px; }
.repertoire-tree { list-style: none; margin: 0; padding: 0 0 0 13px; border-left: 1px solid var(--border); }
.repertoire-tree li { margin: 6px 0; }
.repertoire-tree li > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.repertoire-tree li > div > b { color: var(--green-hi); min-width: 35px; }
.repertoire-tree li > div > span { color: var(--text-dim); font-size: 12px; }
.repertoire-tree.depth-2 { display: none; }
.opponent-style { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--border); }
.opponent-style h4 { margin: 10px 0 8px; }
.move-note { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025); }
.move-note summary { cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 700; }
.move-note select, .move-note textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px; font: inherit; font-size: 12px; }
.move-note textarea { min-height: 56px; resize: vertical; }
.move-note .btn { margin-top: 8px; }
.acc-pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-weight: 700; font-size: 12.5px; color: #12210a; }

/* game list */
.game-list { margin-top: 6px; }
.game-row {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px;
  margin-bottom: 8px; cursor: pointer; background: var(--panel); transition: border-color .12s, background .12s;
}
.game-row:hover { border-color: var(--green); background: #2c2b28; }
.result-dot { width: 12px; height: 12px; border-radius: 50%; }
.result-win { background: var(--green); }
.result-loss { background: #d0413b; }
.result-draw { background: #9a9793; }
.game-info .opp { font-weight: 600; }
.game-info .meta { color: var(--text-faint); font-size: 12.5px; }
.game-acc { text-align: right; }
.game-acc .num { font-weight: 800; font-size: 17px; }
.game-acc .cap { color: var(--text-faint); font-size: 11px; text-transform: uppercase; }
.game-errs { display: flex; gap: 6px; font-size: 12px; }
.err-chip { padding: 2px 7px; border-radius: 6px; font-weight: 700; color: #1a1a1a; }

.section-title { font-size: 18px; font-weight: 700; margin: 26px 0 12px; }

/* ---------- Review screen ---------- */
.review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.review-layout { display: grid; grid-template-columns: auto 340px; gap: 18px; align-items: start; }
.board-wrap { display: flex; gap: 10px; align-items: stretch; }

/* eval bar */
.eval-bar {
  width: 26px; border-radius: 6px; overflow: hidden; background: #403e3b;
  position: relative; flex: none; border: 1px solid var(--border);
}
.eval-bar-white { position: absolute; bottom: 0; left: 0; right: 0; background: #f2f2f2; transition: height 0.3s ease; }
.eval-bar-num { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; z-index: 2; color: #111; padding: 2px 0; }
.eval-bar-num.low { bottom: 3px; color: #eee; }

/* board */
.board { position: relative; width: min(70vw, 560px); aspect-ratio: 1 / 1; }
.board-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 6px; overflow: hidden; }
.board-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.sq { position: relative; }
.sq.light { background: var(--board-light); }
.sq.dark { background: var(--board-dark); }
.sq.last-move.light { background: #f5f582; }
.sq.last-move.dark { background: #bbcb44; }
.piece { position: absolute; inset: 6%; width: 88%; height: 88%; z-index: 3; }
.coord { position: absolute; font-size: 10px; font-weight: 700; z-index: 3; }
.coord.rank { top: 2px; left: 3px; }
.coord.file { bottom: 1px; right: 3px; }
.sq.light .coord { color: #7d945a; }
.sq.dark .coord { color: #ebecd0; }

.move-badge {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* review side panel */
.review-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.players-bar { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.player-acc { text-align: center; }
.player-acc .num { font-size: 20px; font-weight: 800; }
.player-acc .who { font-size: 12px; color: var(--text-faint); }

.feedback { padding: 14px; border-bottom: 1px solid var(--border); min-height: 92px; }
.feedback .fb-label { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.feedback .fb-text { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; }
.feedback .fb-best { margin-top: 8px; font-size: 13px; color: var(--text); }

.movelist { max-height: 320px; overflow-y: auto; padding: 8px 6px; }
.move-pair { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 2px; align-items: center; }
.move-no { color: var(--text-faint); font-size: 12.5px; text-align: right; padding-right: 6px; }
.move-cell { padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.move-cell:hover { background: var(--panel-3); }
.move-cell.active { background: var(--green-dark); color: #fff; }
.move-cell .msym { font-size: 12px; font-weight: 800; }

.review-nav { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); }
.review-nav .btn { flex: 1; padding: 9px; }

.eval-graph { margin-top: 16px; }
.eval-graph svg { width: 100%; height: 130px; display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }

.back-link { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-dim); font-weight: 600; }
.back-link:hover { color: var(--text); }

/* worst moves grid */
.worst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.worst-card { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 12px; cursor: pointer; }
.worst-card:hover { border-color: var(--green); }
.worst-card .wm-head { display: flex; justify-content: space-between; font-size: 13px; }
.worst-card .wm-move { font-weight: 700; }
.worst-card .wm-meta { color: var(--text-faint); font-size: 12px; margin-top: 4px; }

@media (max-width: 900px) {
  .grid-2, .dash-grid, .dash-grid.thirds { grid-template-columns: 1fr; }
  .review-layout { grid-template-columns: 1fr; }
  .review-panel { max-width: 560px; }
}

/* ===================== v2 additions ===================== */

/* number inputs & ranges */
.num-input {
  width: 100%; padding: 9px 10px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; outline: none;
}
.num-input:focus { border-color: var(--green); }
.range-inputs { display: flex; align-items: center; gap: 8px; }
.range-inputs .num-input { text-align: center; }
.range-inputs .dash { color: var(--text-faint); }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type="range"] { flex: 1; }
.games-num { width: 96px; flex: none; }
.games-num:disabled {
  background: #191816;
  border-color: #302e2b;
  color: var(--text-faint);
  opacity: 0.55;
  cursor: not-allowed;
}

/* Manual placements become real ads only when production configuration supplies IDs. */
.ad-slot { display: grid; place-items: center; overflow: hidden; color: var(--text-faint); border: 1px solid var(--border); background: var(--panel-2); border-radius: var(--radius); }
.ad-slot-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ad-slot-inline { min-height: 118px; margin: 18px 0; }
.ad-slot-rail { display: none; }
@media (min-width: 1580px) {
  .ad-slot-rail { display: grid; position: fixed; top: 118px; z-index: 12; width: 160px; min-height: 600px; border-radius: 8px; }
  .ad-slot-left { left: max(12px, calc(50% - 780px)); }
  .ad-slot-right { right: max(12px, calc(50% - 780px)); }
}

/* move-quality badges (SVG) */
.qbadge { display: inline-flex; vertical-align: middle; line-height: 0; }
.qbadge svg { display: block; }
.qbadge.on-board { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; z-index: 6;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.qbadge.on-board svg { width: 22px; height: 22px; }
.qbadge.inline { width: 15px; height: 15px; }
.qbadge.inline svg { width: 15px; height: 15px; }

/* board interactivity */
.board { cursor: default; user-select: none; }
.piece { cursor: grab; -webkit-user-drag: none; }
.piece.dragging { cursor: grabbing; pointer-events: none; transition: none; }
.sq.sel { box-shadow: inset 0 0 0 3px rgba(255, 235, 90, 0.65); }
/* user right-click square highlight (colour set inline via --user-hl) */
.sq.user-hl::before {
  content: ''; position: absolute; inset: 0; background: var(--user-hl);
  z-index: 1; pointer-events: none;
}
.user-arrow { pointer-events: none; }
.sq.target::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 32%; height: 32%;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 20, 20, 0.22); z-index: 2;
}
.sq.target-capture::after {
  content: ''; position: absolute; inset: 8%; border: 4px solid rgba(20, 20, 20, 0.22);
  border-radius: 50%; z-index: 2;
}

/* eval-bar number contrast (white-ahead sits over white fill) */
.eval-bar-num { color: #eee; }
.eval-bar-num.low { color: #141414; }

/* move list cells with badge + clock */
.move-cell { padding: 4px 7px; border-radius: 5px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; gap: 5px; }
.move-cell.active { background: var(--green-dark); color: #fff; }
.move-cell .msan { font-weight: 600; }
.mclock { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.move-cell.active .mclock { color: #dfe8d4; }

/* clickable variations in feedback */
.varline { line-height: 1.9; }
.var-move { cursor: pointer; padding: 1px 4px; border-radius: 4px; color: var(--green-hi); font-weight: 600; white-space: nowrap; }
.var-move:hover { background: var(--green-dark); color: #fff; }

/* explore mode */
.explore-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.explore-tag { background: var(--accent-blue); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 10px; flex: none; }
.explore-line { flex: 1; min-width: 120px; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.explore-actions { display: flex; gap: 6px; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* live engine readout */
.engine-line { min-height: 22px; margin-top: 9px; font-size: 13.5px; color: var(--text-dim); }
.eng-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; background: var(--panel-3);
  color: var(--text-faint); padding: 2px 7px; border-radius: 8px; margin-right: 7px; }
.eng-best { color: var(--green-hi); font-weight: 700; }
.eng-thinking { color: var(--text-faint); font-style: italic; }

/* charts */
.chart-box { width: 100%; }
.chart-svg { display: block; width: 100%; overflow: visible; }
.chart-axis-txt, .chart-axis-sub { fill: var(--text-faint); font-size: 10px; }
.chart-series-lbl { font-size: 11px; font-weight: 800; }
.chart-val-lbl { fill: var(--text-dim); font-size: 11px; font-weight: 700; }
.donut-center-top { fill: var(--text); font-size: 22px; font-weight: 800; }
.donut-center-bot { fill: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12.5px; color: var(--text-dim); }
.leg-item { display: inline-flex; align-items: center; }
.leg-sw, .tip-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.chart-tip {
  position: fixed; z-index: 200; pointer-events: none; background: #1c1b19; border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); display: none; max-width: 240px;
}
.tip-head { font-weight: 700; margin-bottom: 3px; }

/* improvement plan */
.plan-list { display: flex; flex-direction: column; }
.plan-item { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.plan-item:last-child { border-bottom: none; }
.plan-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-3);
  display: flex; align-items: center; justify-content: center; font-weight: 800; }
.plan-item.high .plan-num { background: #3f1c1a; color: #ff8f7a; }
.plan-item.medium .plan-num { background: #3c3216; color: #f0c15c; }
.plan-body { flex: 1; }
.plan-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.plan-head h4 { margin: 0; font-size: 15px; }
.sev-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 10px; font-weight: 700; flex: none; }
.sev-high { background: #3a1a18; color: #ff8f7a; }
.sev-medium { background: #3a3016; color: #f0c15c; }
.sev-low { background: #233016; color: #a9d178; }
.plan-problem { margin: 6px 0; color: var(--text-dim); font-size: 13.5px; }
.plan-actions { margin: 6px 0 10px; padding-left: 18px; font-size: 13.5px; }
.plan-actions li { margin-bottom: 4px; }
.plan-link { background: none; border: 1px solid var(--border); color: var(--green-hi); border-radius: 7px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.plan-link:hover { border-color: var(--green); background: var(--panel-2); }

/* opening study cards */
.study-list { display: flex; flex-direction: column; gap: 12px; }
.study-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; }
.study-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.study-name { font-weight: 700; }
.chip-color { font-size: 11px; text-transform: capitalize; padding: 1px 9px; border-radius: 10px; background: var(--panel-3); color: var(--text-dim); }
.chip-color.white { background: #e9e6df; color: #2a2825; }
.chip-color.black { background: #45423e; color: #e9e6df; }
.study-stats { color: var(--text-faint); font-size: 12px; margin-left: auto; }
.study-line { font-size: 13px; margin-top: 4px; color: var(--text-dim); font-family: ui-monospace, Menlo, Consolas, monospace; }
.study-fix { font-size: 13.5px; margin-top: 6px; color: var(--text); }
.slbl { color: var(--text-faint); font-weight: 600; margin-right: 4px; }
.study-link { margin-top: 10px; }
.study-tips { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.study-tips li { margin-bottom: 3px; }

/* criteria summary */
.criteria-card { margin-bottom: 16px; }
.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.crit { display: flex; flex-direction: column; gap: 2px; }
.crit-k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
.crit-v { font-size: 13.5px; font-weight: 600; }

/* results toolbar */
.results-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.add-games { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.add-games .num-input { width: 80px; }
.load-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; }

/* in-results filter panel */
.results-filter { margin-bottom: 18px; }
.results-filter > summary { cursor: pointer; font-weight: 700; padding: 4px 0; list-style: none; }
.results-filter > summary::-webkit-details-marker { display: none; }
.results-filter[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 10px; }
.filter-on { color: var(--green-hi); font-weight: 700; }
.filter-actions { display: flex; gap: 10px; margin-top: 6px; }

.empty-note { text-align: center; padding: 24px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.filter-hint { color: var(--text-faint); font-weight: 400; font-size: 12px; }
.date-filter-field .range-inputs { gap: 7px; }
.date-filter-field input[type="date"] { min-width: 0; flex: 1 1 0; width: 100%; box-sizing: border-box; padding: 9px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; outline: none; color-scheme: dark; }
.date-filter-field input[type="date"]:focus { border-color: var(--green); }
.date-filter-field .dash { flex: 0 0 auto; font-size: 16px; line-height: 1; }
.date-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.date-presets button { border: 1px solid var(--border); color: var(--text-dim); background: var(--panel-2); border-radius: 999px; padding: 3px 7px; font: inherit; font-size: 11px; cursor: pointer; }
.date-presets button:hover { border-color: var(--green); color: var(--text); }
.brilliant-summary { color: var(--text-dim); margin-bottom: 12px; }
.brilliant-summary b { color: #26c2a3; font-size: 18px; }
.brilliant-list { display: grid; gap: 7px; }
.brilliant-row { width: 100%; display: grid; grid-template-columns: minmax(120px, .9fr) minmax(150px, 1.3fr) minmax(150px, 1.2fr) auto; gap: 10px; align-items: center; text-align: left; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.brilliant-row:hover { border-color: #26c2a3; background: var(--panel-3); color: var(--text); }
.brilliant-move { color: var(--text); font-weight: 700; }
.brilliant-move b { color: #26c2a3; }
@media (max-width: 720px) { .brilliant-row { grid-template-columns: 1fr; gap: 3px; } }

/* flowing move list with inline variations */
.ml-flow { line-height: 2.15; font-size: 14px; }
.mnum { color: var(--text-faint); font-weight: 600; margin: 0 1px 0 7px; font-variant-numeric: tabular-nums; }
.move-cell { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 5px; cursor: pointer; font-weight: 600; }
.move-cell:hover { background: var(--panel-3); }
.move-cell.active { background: var(--green-dark); color: #fff; }
.msan { font-weight: 600; }
.mclock { font-size: 10.5px; color: var(--text-faint); margin-left: 1px; font-variant-numeric: tabular-nums; }
.move-cell.active .mclock { color: #dfe8d4; }
.varblock { color: var(--text-dim); }
.var-cell { cursor: pointer; padding: 1px 4px; border-radius: 4px; color: var(--accent-blue); font-weight: 600; }
.var-cell:hover { background: var(--panel-3); }
.var-cell.active { background: var(--accent-blue); color: #fff; }
.veval { font-size: 10.5px; color: var(--text-faint); margin-left: 3px; font-variant-numeric: tabular-nums; }
.var-cell.active .veval { color: #e2ecf5; }
.var-close { cursor: pointer; color: var(--text-faint); font-weight: 800; padding: 0 5px; border-radius: 4px; }
.var-close:hover { color: #ff8f7a; background: var(--panel-3); }

/* feedback facets */
.fb-name { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; }
.fb-time { color: var(--text-faint); font-size: 12px; }
.fb-facet { margin-top: 7px; font-size: 13px; color: var(--text-dim); }
.fb-facet-k { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
  color: var(--text-faint); background: var(--panel-2); padding: 1px 7px; border-radius: 6px; margin-right: 5px; }

/* loading overlay (large saved analyses take a moment to read + parse) */
.loading-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 17, 15, 0.72);
}
.loading-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 36px; text-align: center; box-shadow: var(--shadow); min-width: 260px;
}
.loading-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--panel-3); border-top-color: var(--green); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-weight: 800; font-size: 16px; }
.loading-step { color: var(--text-dim); font-size: 13px; margin-top: 6px; }

/* capped, scrollable sections (opening study, endgame study, game list) */
.scroll-area { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.scroll-area::-webkit-scrollbar { width: 10px; }
.scroll-area::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 6px; }
.scroll-area::-webkit-scrollbar-thumb { background: #4a4744; border-radius: 6px; border: 2px solid var(--panel-2); }
.scroll-area::-webkit-scrollbar-thumb:hover { background: #5c5854; }
.scroll-area { scrollbar-width: thin; scrollbar-color: #4a4744 var(--panel-2); }

/* Keep the review layout a stable height as you step through moves: the
   explanation text varies a lot in length, and an unbounded panel changes the
   page height (and therefore the scroll offset) on every move. */
.feedback { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4744 var(--panel-2); }
.feedback::-webkit-scrollbar { width: 10px; }
.feedback::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 6px; }
.feedback::-webkit-scrollbar-thumb { background: #4a4744; border-radius: 6px; border: 2px solid var(--panel-2); }
/* Reserve room for the engine line so the async best-line/explanation arriving
   does not push the eval graph down after the move has already been rendered. */
.engine-line { min-height: 76px; }

/* eval-graph move-quality dots */
.eval-graph svg { width: 100%; height: auto; display: block; }
.graph-move-dot { pointer-events: none; }

/* rating progression / correlation / projection */
.rating-tiles { margin-bottom: 14px; }
.track-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.track-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 12.5px; color: var(--text-dim); }
.track-chip b.pos { color: #81b64c; } .track-chip b.neg { color: #d0413b; }
.track-chip small { color: var(--text-faint); margin-left: 4px; }

.corr-list { display: flex; flex-direction: column; gap: 8px; }
.corr-row { display: grid; grid-template-columns: 1fr 120px 78px; gap: 10px; align-items: center; font-size: 13px; }
.corr-label { color: var(--text-dim); }
.corr-track { position: relative; height: 10px; background: var(--panel-2); border-radius: 5px; }
.corr-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.corr-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.corr-fill.pos { background: #81b64c; } .corr-fill.neg { background: #d0413b; }
.corr-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.corr-val.pos { color: #81b64c; } .corr-val.neg { color: #d0413b; }
.corr-val small { display: block; font-weight: 400; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; }
.corr-note { margin-top: 6px; }

.projection-summary { margin-top: 10px; }
.proj-headline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 22px; font-weight: 800; }
.proj-headline .proj-target { color: #81b64c; }
.proj-headline small { font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.proj-items { list-style: none; padding: 0; margin: 12px 0; }
.proj-items li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.proj-items li:last-child { border-bottom: none; }
.proj-items b { color: #81b64c; min-width: 44px; }
.proj-items small { color: var(--text-faint); font-size: 12px; margin-left: auto; text-align: right; }

.run-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint);
  font-weight: 700; margin: 12px 0 6px; }
.run-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 10px 12px; background: var(--panel-2); }
.run-card.good { border-left-color: #81b64c; } .run-card.bad { border-left-color: #d0413b; }
.run-card.flat { border-left-color: #9a9793; }
.run-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.run-head span { color: var(--text-faint); font-size: 12px; }
.run-facts { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }

/* line explanation blocks (solution + refutation) */
.line-lead { margin: 6px 0 8px; font-size: 13px; color: var(--text); }
.failed-line .line-lead { color: #ffb0a2; }
.line-plans { margin: 8px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* sticky header for long tables inside a scroll area */
table.data.sticky-head thead th {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}
.table-total { margin-top: 8px; font-size: 12px; color: var(--text-faint); text-align: right; }

/* study extras */
.study-ideas { margin-top: 6px; }
.study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }

/* puzzle explore mode */
.explore-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.explore-eval { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ex-eval-bar { flex: 1; height: 12px; background: #403e3b; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.ex-eval-bar > span { display: block; height: 100%; background: #f1f1f1; transition: width 0.25s ease; }
.ex-eval-txt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.explore-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); font-weight: 700; margin: 12px 0 6px; }
.explore-lines { display: flex; flex-direction: column; gap: 5px; }
.ex-line { display: flex; gap: 10px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 13px; align-items: baseline; }
.ex-line:hover { border-color: var(--green); background: var(--panel-2); }
.ex-line-eval { font-weight: 800; min-width: 46px; flex: none; font-variant-numeric: tabular-nums; }
.ex-line-pv { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-moves { line-height: 2.1; font-size: 14px; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto; }
.ex-num { color: var(--text-faint); font-weight: 600; margin: 0 1px 0 6px; }
.ex-move { cursor: pointer; padding: 2px 5px; border-radius: 5px; font-weight: 600; }
.ex-move:hover { background: var(--panel-3); }
.ex-move.active { background: var(--green-dark); color: #fff; }
.explore-actions { margin-top: 14px; flex-wrap: wrap; gap: 6px; }

/* Review board context */
.match-info { width: min(70vw, 596px); display: flex; gap: 8px 14px; align-items: center;
  flex-wrap: wrap; padding: 8px 10px; margin-bottom: 7px; border-radius: 7px;
  background: var(--panel-2); color: var(--text-dim); font-size: 12px; }
.match-info strong { color: var(--text); }
.board-player { width: min(70vw, 596px); display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 5px 8px; font-size: 13px; }
.board-player-name { font-weight: 700; }
.board-player-acc { margin-left: auto; color: var(--text-faint); font-size: 11.5px; }
.piece-dot { font-size: 20px; line-height: 1; }
.engine-line { width: min(70vw, 596px); min-height: 50px; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); }
.eng-pv { margin-left: 8px; color: var(--green-hi); font-weight: 700; line-height: 1.8; }
.eng-explain { margin-top: 5px; color: var(--text-dim); font-size: 12.5px; }

/* Chess.com-style move table: one full move per row. */
.ml-rows { display: flex; flex-direction: column; font-size: 14px; }
.move-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; min-height: 34px; border-bottom: 1px solid rgba(255,255,255,.045); }
.move-row:nth-child(odd):not(.variation-row) { background: rgba(255,255,255,.018); }
.move-row .mnum { display: flex; align-items: center; justify-content: flex-end; padding: 5px 8px 5px 3px; margin: 0;
  color: var(--text-faint); background: rgba(0,0,0,.09); }
.move-row .move-cell { display: flex; min-width: 0; align-items: center; padding: 5px 8px; border-radius: 0; }
.move-row .move-cell.empty { cursor: default; }
.move-row .mclock { margin-left: auto; }
.variation-row { grid-template-columns: 34px 1fr; background: rgba(74,144,217,.08); border-left: 3px solid var(--accent-blue); }
.variation-row .varblock { padding: 6px 8px; line-height: 1.8; }
.variation-row .var-cell { display: inline-flex; align-items: center; gap: 3px; margin: 1px 2px; }
.var-actions { margin-left: auto; }
.phase-rating-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.phase-rating-strip > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; }
.phase-rating-strip > div + div { border-left: 1px solid var(--border); }
.phase-rating-strip span, .phase-rating-strip small { color: var(--text-faint); font-size: 10px; }
.phase-rating-strip strong { color: var(--green-hi); font-size: 15px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .match-info, .board-player, .engine-line { width: min(90vw, 596px); }
}

/* Generated lesson and puzzle courses */
.study-course-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.study-course-head h2 { margin: 0 0 4px; }
.study-mode { display: flex; gap: 7px; }
.study-layout { display: grid; grid-template-columns: auto minmax(300px, 1fr); gap: 18px; align-items: start; }
#study-board { width: min(66vw, 580px); }
.study-panel { min-height: 420px; }
.study-panel select { width: 100%; margin-bottom: 16px; }
.study-position-meta { color: var(--text-faint); font-size: 12px; }
.puzzle-evaluation { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.puzzle-eval-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.puzzle-eval-head span { color: var(--text-faint); font-size: 11px; }
.puzzle-eval-head strong { color: var(--green-hi); font-size: 20px; font-variant-numeric: tabular-nums; }
.puzzle-eval-summary { margin: 2px 0 7px; color: var(--text-dim); font-size: 12px; }
.puzzle-eval-scale { position: relative; height: 7px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.08); }
.puzzle-eval-scale b { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.42); }
.puzzle-eval-scale i { position: absolute; top: 0; bottom: 0; transition: left .2s ease, width .2s ease; }
.puzzle-eval-scale i.positive { background: var(--green-hi); }
.puzzle-eval-scale i.negative { background: #d65b55; }
.study-panel h3 { margin: 10px 0; }
/* source chip: made-up library puzzle vs a position from the player's own game */
.study-source { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.study-source.made-up { background: rgba(148, 103, 214, 0.16); color: #b28df0; border: 1px solid rgba(148, 103, 214, 0.4); }
.study-source.mine { background: rgba(76, 175, 120, 0.16); color: #58c98a; border: 1px solid rgba(76, 175, 120, 0.4); }
.study-source.played { background: rgba(74, 144, 217, 0.14); color: var(--accent-blue); border: 1px solid rgba(74, 144, 217, 0.35); }
.study-source.lichess { background: rgba(179,179,179,.12); color: #d0d0d0; border: 1px solid rgba(179,179,179,.35); }
.study-source.lichess a { color: var(--green-hi); }

/* hero entry + puzzle builder */
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.hero-actions .hint { max-width: 360px; text-align: left; }
.builder-layout { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .builder-layout { grid-template-columns: 1fr; } }
/* the builder board must fit its grid column, not the global 560px board width */
#pb-board { width: 100%; max-width: 380px; }
.builder-fen { margin-top: 12px; }
.builder-fen textarea { width: 100%; font-family: monospace; font-size: 12px; resize: vertical; }
.builder-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.builder-panel { padding: 16px; }
.builder-status { padding: 8px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; background: var(--panel-2); }
.builder-status.good { background: rgba(129,182,76,.14); color: var(--green); }
.builder-status.warn { background: rgba(224,160,0,.14); color: #e0a000; }
.builder-status.bad { background: rgba(208,65,59,.12); color: #d0413b; }
.builder-status.busy { background: rgba(74,144,217,.12); color: var(--accent-blue); }
.builder-best { margin-top: 10px; font-size: 15px; }
.builder-eval { color: var(--text-dim); font-weight: 700; }
.builder-pv, .builder-quality { color: var(--text-dim); font-size: 12px; margin-top: 3px; }
.builder-tag { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.builder-tag label { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 3px; }
.builder-tag select, .builder-tag input { font-size: 13px; }
.builder-pattern input { width: 100%; }
.builder-batch { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.builder-batch label { display: flex; flex-direction: column; gap: 3px; color: var(--text-dim); font-size: 12px; }
.builder-batch input, .builder-batch select { font-size: 13px; }
.builder-batch input[type="number"] { width: 86px; }
.builder-inline-inputs { display: flex; align-items: center; gap: 5px; }
.builder-motifs { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 12px 0 4px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; }
.builder-motifs legend { padding: 0 5px; color: var(--text-dim); font-size: 12px; font-weight: 700; }
.builder-motifs label { flex-direction: row; align-items: center; }
.builder-batch-status { min-height: 22px; margin-top: 8px; color: var(--text-dim); font-size: 12px; }
.builder-batch-status.good { color: var(--green-hi); }
.builder-batch-status.warn { color: #e0a000; }
.builder-mine { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.builder-mine-head { justify-content: space-between; }
.builder-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.builder-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--panel-2); border-radius: 6px; font-size: 13px; }
.builder-item small { color: var(--text-dim); }

/* deeper insights */
.insight-block { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.mistake-list { list-style: none; margin: 0; padding: 0; counter-reset: mk; }
.mistake-row { padding: 8px 0; border-bottom: 1px solid var(--border); counter-increment: mk; }
.mistake-row:last-child { border-bottom: none; }
.mistake-row.has-example { cursor: pointer; }
.mistake-row.has-example:hover .mistake-head b { text-decoration: underline; }
.mistake-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mistake-head b::before { content: counter(mk) ". "; color: var(--text-faint); }
.mistake-head span { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.mistake-bar { height: 6px; background: var(--panel-2); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.mistake-bar span { display: block; height: 100%; background: #d0413b; border-radius: 4px; }
.psych-lead { font-size: 13.5px; margin-bottom: 8px; }
.psych-list { list-style: none; margin: 0; padding: 0; }
.psych-list li { display: grid; grid-template-columns: 1fr auto 90px; gap: 12px; align-items: center; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.psych-list li:last-child { border-bottom: none; }
.psych-lift { font-weight: 700; white-space: nowrap; text-align: right; }
.psych-n { color: var(--text-faint); font-size: 12px; text-align: right; }
.psych-list li.worse .psych-lift { color: #d0413b; }
.psych-list li.better .psych-lift { color: var(--green); }
.psych-list li.neutral .psych-lift { color: var(--text-dim); }
.style-row { display: grid; grid-template-columns: 130px 1fr 32px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13px; }
.style-lbl { color: var(--text-dim); }
.style-track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.style-track span { display: block; height: 100%; background: var(--accent-blue); border-radius: 4px; }
.style-val { text-align: right; font-weight: 700; }
.style-similar { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); }
.strength-note { font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }
.strength-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.strength-table th, .strength-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.strength-table th:nth-child(n+2), .strength-table td:nth-child(n+2) { text-align: right; }
/* feature 6 — study priority */
.priority-list { list-style: none; margin: 0; padding: 0; }
.priority-list li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.priority-list li:last-child { border-bottom: none; }
.priority-star { color: #e0a000; letter-spacing: 1px; font-size: 13px; }
.priority-label { display: flex; flex-direction: column; }
.priority-label small { color: var(--text-dim); font-size: 12px; }
.priority-gain { font-weight: 800; color: var(--green); }
/* feature 10 — blind spots */
.blindspot-list { display: flex; flex-direction: column; gap: 7px; }
.blindspot-row { display: grid; grid-template-columns: 150px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.bs-bar { height: 10px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.bs-bar span { display: block; height: 100%; background: #b06fd6; border-radius: 5px; }
.bs-count { text-align: right; font-weight: 700; }
/* feature 15 — review by theme */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.theme-card:hover { border-color: var(--accent-blue); }
.theme-name { font-weight: 700; font-size: 14px; }
.theme-count { color: var(--text-dim); font-size: 12px; }

/* report tabs (Stats / Practice / Games) */
.report-tabs { position: sticky; top: 55px; z-index: 19; display: flex; gap: 6px; margin: 6px 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); box-shadow: 0 7px 10px rgba(48,46,43,.92); }
.rtab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 16px; cursor: pointer; }
.rtab:hover { color: var(--text); }
.rtab.active { color: var(--text); border-bottom-color: var(--accent-blue); }
.rtab-panel { display: none; }
.rtab-panel.active { display: block; }
.report-section-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; align-items: start; }
.report-section-content { min-width: 0; }
.section-menu { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); max-height: calc(100vh - 126px); overflow-y: auto; }
.section-menu-title { padding: 5px 8px 8px; color: var(--text-faint); font-size: 11px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.section-jump { appearance: none; border: 0; border-radius: 6px; padding: 8px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.section-jump:hover, .section-jump:focus-visible { color: var(--text); background: var(--panel-2); outline: none; }
.report-anchor { scroll-margin-top: 108px; }
.report-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 18; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: var(--green-dark); color: white; box-shadow: 0 5px 18px rgba(0,0,0,.42); font: 800 24px/1 inherit; cursor: pointer; }
.report-to-top:hover { background: var(--green); transform: translateY(-1px); }
.report-to-top:focus-visible { outline: 3px solid rgba(159,209,90,.5); outline-offset: 2px; }
/* practice tab */
.practice-section { margin-bottom: 16px; }
.practice-section.adaptive { border: 1px solid rgba(224,160,0,.4); }
.practice-decks .study-grid, .practice-decks { display: block; }
.practice-decks .study-card { margin-bottom: 10px; }
.practice-sub { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.sub-title { font-weight: 700; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.priority-card { margin-bottom: 18px; }
.priority-proj { font-size: 15px; margin-bottom: 12px; }
.priority-proj .proj-target { color: var(--green); }
.priority-proj small { color: var(--text-dim); font-weight: 400; margin-left: 6px; }
@media (max-width: 820px) {
  .report-section-layout { display: block; }
  .section-menu { position: sticky; top: 100px; z-index: 8; flex-direction: row; margin-bottom: 12px; max-height: none; overflow-x: auto; white-space: nowrap; }
  .section-menu-title { display: none; }
  .section-jump { flex: 0 0 auto; }
  .report-to-top { right: 14px; bottom: 14px; }
}
.puzzle-prompt { padding: 14px; border-radius: 8px; background: var(--panel-2); font-weight: 700; }
.puzzle-message { margin-top: 10px; padding: 10px; border-left: 3px solid var(--green); background: rgba(129,182,76,.08); }
.puzzle-message.wrong { border-left-color: #d0413b; background: rgba(208,65,59,.09); }
.puzzle-message.retry, .puzzle-message.answer { border-left-color: var(--accent-blue); background: rgba(74,144,217,.09); }
.puzzle-actions { display: flex; gap: 8px; margin-top: 12px; }
.puzzle-plan-key { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 9px 0 2px; color: var(--text-faint); font-size: 12px; }
.puzzle-plan-key i { width: 16px; height: 4px; border-radius: 3px; display: inline-block; }
.puzzle-plan-key .plan-you { background: #ff9d4d; }
.puzzle-plan-key .plan-opponent { background: #d86b6b; margin-left: 7px; }
.lesson-answer { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; color: var(--text-dim); }
.lesson-concept { margin-top: 3px; padding: 9px; border-radius: 7px; background: var(--panel-2); }
.best-answer { color: var(--green-hi); font-size: 16px; }
.study-nav { display: flex; gap: 7px; }
.study-nav .btn { white-space: nowrap; }
.study-nav-top { flex: 0 0 auto; }
.study-progress { color: var(--text-dim); font-weight: 700; }
.study-analytics { display: grid; grid-template-columns: repeat(3, minmax(110px, .55fr)) minmax(190px, 1fr) minmax(230px, 1.25fr); gap: 10px; margin: 0 0 16px; }
.training-stat, .training-chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.training-stat { display: flex; flex-direction: column; justify-content: center; }
.training-stat strong { font-size: 21px; color: var(--green-hi); font-variant-numeric: tabular-nums; }
.training-stat span, .training-chart-card small { color: var(--text-faint); font-size: 11px; }
.training-chart-title { color: var(--text-dim); font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.training-completion-track { height: 9px; background: var(--panel-2); border-radius: 8px; overflow: hidden; margin-bottom: 5px; }
.training-completion-track span { display: block; height: 100%; background: var(--green-hi); border-radius: inherit; transition: width .25s ease; }
.training-activity { height: 57px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; }
.training-day { height: 57px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.training-day i { width: 100%; max-width: 18px; min-height: 3px; background: var(--accent-blue); border-radius: 3px 3px 1px 1px; }
.training-day small, .training-day-count { font-size: 9px; color: var(--text-faint); line-height: 1; }
.puzzle-step-feedback { display: grid; gap: 8px; margin: 12px 0; }
.puzzle-step-card { padding: 10px; border: 1px solid var(--border); border-left: 3px solid var(--green-hi); border-radius: 7px; background: var(--panel-2); font-size: 12.5px; line-height: 1.45; }
.puzzle-step-card.assisted { border-left-color: var(--accent-blue); }
.puzzle-step-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.puzzle-step-head span { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .35px; }
.puzzle-line-tabs { margin: 12px 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.02); }
.puzzle-line-tablist { display: flex; gap: 2px; padding: 5px 5px 0; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--panel-2); scrollbar-width: thin; }
.puzzle-line-tab { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-width: max-content; padding: 8px 11px; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--text-dim); cursor: pointer; font: inherit; }
.puzzle-line-tab:hover { color: var(--text); background: rgba(255,255,255,.045); }
.puzzle-line-tab.active { color: var(--text); background: var(--panel); border-color: var(--border); box-shadow: 0 1px 0 var(--panel); }
.puzzle-line-tab small { color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.puzzle-line-tab i { color: var(--green-hi); font-style: normal; font-size: 10px; }
.puzzle-line-tab.current:not(.active) { color: var(--accent-blue); }
.puzzle-line-tab.failed { color: #d99588; }
.puzzle-line-tab:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.puzzle-line-tabpanel { padding: 12px; }
.puzzle-line-tabpanel[hidden] { display: none; }
.puzzle-line-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--text); }
.puzzle-line-summary span { color: var(--text-faint); font-size: 11px; text-align: right; }
.puzzle-line-empty { margin-top: 10px; padding: 16px; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-faint); text-align: center; }
.puzzle-line-tabpanel .puzzle-step-feedback { margin-bottom: 0; }
.puzzle-line-tabpanel .puzzle-line-explanation { margin-bottom: 0; }
.puzzle-message.hint { border-left-color: var(--accent-blue); background: rgba(74,144,217,.12); }
/* persistent hint block — stays visible through wrong answers until solved */
.puzzle-hint { margin-top: 10px; padding: 10px; border-left: 3px solid var(--accent-blue); background: rgba(74,144,217,.12); border-radius: 0 6px 6px 0; }
.study-launch { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: -4px 0 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text-dim); }
.adaptive-training-card { border-color: rgba(129, 182, 76, .45); }
.adaptive-training-card > p { color: var(--text-dim); margin: 0 0 14px; }
.adaptive-weaknesses { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-bottom: 16px; }
.adaptive-weakness { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.adaptive-weakness b { color: var(--text); }
.adaptive-weakness span { color: var(--green); font-size: 12px; font-weight: 750; }
.adaptive-weakness small { color: var(--text-dim); line-height: 1.35; }
.training-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 14px; }
.training-loop > div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: rgba(129, 182, 76, .08); border: 1px solid rgba(129, 182, 76, .24); }
.training-loop b { color: var(--green); font-size: 13px; }
.training-loop span { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.panel-intro { color: var(--text-dim); margin: -2px 0 14px; line-height: 1.45; }
.skill-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.skill-profile-grid h4 { margin: 4px 0 9px; }
.skill-profile-grid small { color: var(--text-dim); }
.positive-edge { color: var(--green); font-weight: 750; }
.negative-edge { color: var(--red); font-weight: 750; }
.insight-tiles { margin-top: 18px; }
.save-report-dialog { width: min(92vw, 460px); color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.48); }
.save-report-dialog::backdrop { background: rgba(5,9,13,.7); backdrop-filter: blur(3px); }
.save-report-dialog h2 { margin: 0 0 8px; }
.save-report-dialog p { margin: 0; color: var(--text-dim); line-height: 1.5; }
.save-report-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }

/* Deeper opponent-level comparisons */
.compare-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.compare-tiles .tile { padding: 12px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-grid h4, .compare-table + h4 { margin: 8px 0; }
.compare-table { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .study-layout, .compare-grid, .skill-profile-grid, .training-loop { grid-template-columns: 1fr; }
  #study-board { width: min(90vw, 580px); }
  .compare-tiles { grid-template-columns: repeat(2, 1fr); }
  .study-course-head, .study-launch { align-items: flex-start; flex-direction: column; }
  .study-nav-top { width: 100%; }
  .study-nav-top .btn { flex: 1; padding-inline: 8px; }
  .study-analytics { grid-template-columns: repeat(3, 1fr); }
  .training-chart-card { grid-column: span 3; }
}
@media (max-width: 620px) {
  .progress-periods, .progress-highlights { grid-template-columns: 1fr; }
  .progress-table { font-size: 12px; }
  .progress-table th, .progress-table td { padding-inline: 5px; }
  .goal-row { grid-template-columns: 1fr; gap: 6px; }
  .goal-number { text-align: left; }
}
.puzzle-line-explanation {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--green-hi);
  background: rgba(255,255,255,.035);
  border-radius: 0 7px 7px 0;
}
.puzzle-line-explanation.failed-line { border-left-color: #d66b5d; }
.puzzle-line-explanation ol { margin: 8px 0 0 20px; padding: 0; }
.puzzle-line-explanation li { margin: 0 0 9px; line-height: 1.45; }