:root {
  --bg: #0f1720;
  --panel: #ffffff;
  --ink: #1c2530;
  --muted: #6b7787;
  --accent: #4f7942;      /* board green */
  --accent-2: #2e6f3e;
  --light-sq: #efe4cf;
  --dark-sq: #a9825b;
  --line: #e3e7ec;
  --good: #2e7d32;
  --bad: #c0392b;
  --warn: #b7791f;
  --shadow: 0 6px 24px rgba(20,30,45,.10);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: linear-gradient(180deg,#101a24,#0c141c);
  color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

header {
  padding: 18px 26px 14px; color: #eef3f8;
}
.header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.auth { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.auth-user { color: #cfe6c3; font-weight: 600; font-size: 13.5px; }
.auth-btn {
  background: rgba(255,255,255,.08); color: #eef3f8; border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.auth-btn:hover { background: rgba(255,255,255,.16); }
.auth-btn.primary-lite { background: #3a6b3f; border-color: #4f7942; color: #eaf6e6; }
.auth-btn.primary-lite:hover { background: #457a4a; }
.brand { font-size: 22px; font-weight: 700; letter-spacing: .2px; }
.brand span { color: #8fce7f; }
.tagline { color: #9fb0c0; font-size: 13.5px; margin-top: 2px; }
.tagline em { color: #cfe6c3; font-style: normal; }

.layout {
  display: grid; grid-template-columns: 290px 1fr; gap: 18px;
  padding: 0 18px 28px; align-items: start;
}

/* -------- sidebar -------- */
.sidebar {
  background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; position: sticky; top: 12px;
}
.side-head { padding: 14px 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
.side-nav { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.snav {
  flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 7px 8px; font-size: 12.5px; cursor: pointer; font-weight: 600; color: var(--muted);
}
.snav:hover { background: #f5f8f4; }
.snav.on { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.foot-review {
  width: 100%; border: 0; background: #fff3d6; color: #8a5a00; border-radius: 7px;
  padding: 8px; cursor: pointer; font-weight: 600; font-size: 12.5px;
}
.foot-review:hover { background: #ffe9b8; }

/* -------- progress dashboard -------- */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.stat { flex: 1; min-width: 110px; background: #f7f9f6; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--line); }
.stat-n { font-size: 26px; font-weight: 800; }
.stat-l { font-size: 12px; color: var(--muted); }
.stat.ok .stat-n { color: var(--good); }
.stat.warn .stat-n { color: var(--warn); }
.stat.due .stat-n { color: #b5651d; }
.prog-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.prog-h { margin: 20px 0 8px; font-size: 15px; }
.band-row { margin: 8px 0; }
.band-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.band-count { color: var(--muted); font-weight: 400; }
.bar { height: 10px; border-radius: 6px; background: #e9edf1; overflow: hidden; display: flex; }
.bar-mast { background: var(--good); height: 100%; }
.bar-learn { background: #e5b769; height: 100%; }
.due-list { display: flex; flex-wrap: wrap; gap: 8px; }
.due-item { border: 1px solid #ecd9b0; background: #fff8ec; color: #7a5310; border-radius: 20px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.due-item:hover { background: #ffefd0; }
.reset-box { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.reset-box summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.reset-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
button.danger { background: var(--bad); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
button.danger:hover { background: #a5301f; }
.muted { color: var(--muted); }
.view-toggle { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.vt {
  flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 5px 8px; font-size: 12px; cursor: pointer; color: var(--muted);
}
.vt:hover { background: #f5f8f4; }
.vt.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.side-foot { padding: 10px 16px; color: var(--muted); font-size: 11.5px; border-top: 1px solid var(--line); }
#modules { max-height: 70vh; overflow: auto; }
.part-head {
  padding: 10px 16px 4px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.module-btn {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px 16px; cursor: pointer; border-left: 3px solid transparent;
}
.module-btn:hover { background: #f5f8f4; border-left-color: var(--accent); }
.module-btn.mixed { background: #f3f6fb; border-left-color: #c9d6e6; }
.module-btn.mixed:hover { background: #eaf0f8; border-left-color: #7fa8d8; }
.module-btn.mixed .m-title::before { content: "🎯 "; }
.m-title { display: block; font-weight: 600; }
.m-sub { display: block; font-size: 12px; color: var(--muted); }
.m-meta { display: block; font-size: 11px; color: #9aa6b3; margin-top: 1px; }
.m-meta em { color: var(--accent-2); font-style: normal; font-weight: 600; }

/* -------- main panels -------- */
.main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel {
  background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 24px;
}
.lesson-head .tag {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent-2); font-weight: 700;
}
.lesson-head h2 { margin: 4px 0 8px; font-size: 24px; }
.themes .chip, .chip {
  display: inline-block; background: #eef4ea; color: #3c6b34; border-radius: 20px;
  padding: 2px 10px; font-size: 11.5px; margin-right: 6px; margin-bottom: 4px;
}
.lesson-body { color: #2b3542; margin: 14px 0 18px; }
.further {
  font-size: 12.5px; color: var(--muted); background: #f7f9f6; border-left: 3px solid var(--line);
  border-radius: 6px; padding: 8px 12px; margin: 0 0 16px;
}
.further span { font-weight: 600; color: #5a6675; }
.further em { font-style: italic; }
.lesson-body p { margin: 8px 0; }
.lesson-body b, .lesson-body strong { color: var(--ink); }

.level-row, .set-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.level-row label, .set-row label { font-weight: 600; font-size: 13px; }
#levels { display: flex; gap: 8px; flex-wrap: wrap; }
.level-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.level-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); }

button.primary {
  background: var(--accent-2); color: #fff; border: 0; border-radius: 9px;
  padding: 9px 16px; font-weight: 600; cursor: pointer; font-size: 14px;
}
button.primary:hover { background: #275f34; }
button.primary:disabled { opacity: .6; cursor: default; }
button.ghost {
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; cursor: pointer;
}
.gen-status { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* -------- play panel -------- */
.play-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pz-goal { font-size: 18px; font-weight: 700; }
.pz-line { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.diff { letter-spacing: 2px; color: var(--accent-2); }
.pz-themes { color: #9aa6b3; }
.feedback { min-height: 22px; margin: 12px 0 4px; font-size: 14px; }
.feedback.ok { color: var(--good); }
.feedback.warn { color: var(--warn); }
.feedback.win { color: var(--good); font-weight: 600; }
.feedback.lose { color: var(--bad); font-weight: 600; }
.play-controls { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* -------- solution / worked-example stepper -------- */
.solution-bar { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.sol-caption { font-size: 13.5px; margin-bottom: 8px; }
.sol-intro { color: var(--ink); margin-bottom: 4px; }
.sol-moves { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.7; color: #2b3542; }
.sol-moves b { color: var(--accent-2); background: #eef4ea; border-radius: 4px; padding: 0 4px; }
.sol-moves .played { color: var(--muted); }
.sol-pos { color: var(--muted); font-size: 12px; margin-top: 4px; }
.sol-note { color: #2b3542; font-size: 13.5px; line-height: 1.55; margin: 6px 0; }
.linklike { background: none; border: 0; color: var(--accent-2); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.sol-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ghost:disabled { opacity: .45; cursor: default; }

/* -------- board (chessground theme) -------- */
.board-wrap { display: flex; justify-content: center; }
#board {
  width: min(90vw, 66vh, 520px); aspect-ratio: 1 / 1;
  box-shadow: var(--shadow);
}
/* the checkerboard itself (a 2×2 tile of dark corners on a light ground, tiled
   into 8×8 so a8 is light and a1 dark). cg-board holds the squares; pieces and
   highlights render above it. */
cg-board {
  border-radius: 8px;
  background-color: var(--light-sq);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23efe4cf'/%3E%3Crect x='1' width='1' height='1' fill='%23a9825b'/%3E%3Crect y='1' width='1' height='1' fill='%23a9825b'/%3E%3C/svg%3E");
  background-size: 25% 25%;
}

/* pieces — the classic cburnett SVGs bundled in css/pieces/ */
.cg-wrap piece { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.cg-wrap piece.pawn.white   { background-image: url(pieces/wP.svg); }
.cg-wrap piece.knight.white { background-image: url(pieces/wN.svg); }
.cg-wrap piece.bishop.white { background-image: url(pieces/wB.svg); }
.cg-wrap piece.rook.white   { background-image: url(pieces/wR.svg); }
.cg-wrap piece.queen.white  { background-image: url(pieces/wQ.svg); }
.cg-wrap piece.king.white   { background-image: url(pieces/wK.svg); }
.cg-wrap piece.pawn.black   { background-image: url(pieces/bP.svg); }
.cg-wrap piece.knight.black { background-image: url(pieces/bN.svg); }
.cg-wrap piece.bishop.black { background-image: url(pieces/bB.svg); }
.cg-wrap piece.rook.black   { background-image: url(pieces/bR.svg); }
.cg-wrap piece.queen.black  { background-image: url(pieces/bQ.svg); }
.cg-wrap piece.king.black   { background-image: url(pieces/bK.svg); }

/* highlights */
cg-board square.last-move { background: rgba(240, 220, 90, .45); }
cg-board square.selected  { background: rgba(120, 180, 90, .5); }
cg-board square.check {
  background: radial-gradient(circle, rgba(220,60,50,.85) 0%, rgba(220,60,50,.55) 26%, transparent 66%);
}
cg-board square.move-dest {
  background: radial-gradient(circle, rgba(40,90,40,.35) 0 22%, transparent 22%);
}
cg-board square.oc.move-dest {  /* a capturable piece: ring instead of a dot */
  background: radial-gradient(circle, transparent 0 54%, rgba(40,90,40,.4) 54%);
}

/* coordinates (a–h along the bottom, 1–8 up the left), tucked into the square
   corners with a halo so they read on both light and dark squares, either
   orientation. style.css loads after chessground.base.css, so these win. */
.cg-wrap coords {
  position: absolute; display: flex; pointer-events: none; user-select: none;
  font: 700 min(1.7vh, 11px)/1 inherit; opacity: .95;
}
.cg-wrap coords coord { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.65), 0 0 1px rgba(0,0,0,.65); }
.cg-wrap coords.ranks { top: 0; left: 2px; height: 100%; width: auto; flex-flow: column-reverse; }
.cg-wrap coords.ranks.black { flex-flow: column; }
.cg-wrap coords.ranks coord { flex: 1 1 auto; display: flex; align-items: flex-start; transform: none; }
.cg-wrap coords.files {
  left: 0; bottom: 1px; width: 100%; height: auto; flex-flow: row;
  text-transform: uppercase; text-align: left;
}
.cg-wrap coords.files.black { flex-flow: row-reverse; }
.cg-wrap coords.files coord { flex: 1 1 auto; padding-left: 3px; }

/* -------- summary -------- */
#summary h2 { margin: 0 0 6px; }
.score { font-size: 26px; font-weight: 700; color: var(--accent-2); }
.score-sub { color: var(--muted); margin-top: 2px; }
.wood { background: #f5f8f4; border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 6px; margin: 14px 0; }
.summary-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.srs { color: var(--muted); font-size: 12.5px; margin-top: 10px; }

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}