diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1b83ba1..b2add78 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -45,7 +45,6 @@
         "@vitejs/plugin-react": "^4.5.0",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.38",
-        "tailwindcss": "^3.4.3",
         "typescript": "^5.2.2",
         "vite": "^5.2.0"
       },
@@ -55,19 +54,6 @@
         "pnpm": "9999.9999.9999"
       }
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -829,24 +815,6 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -934,55 +902,6 @@
         "react": "^18.x || ^19.x"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -1411,60 +1330,6 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1503,49 +1368,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -1579,16 +1401,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001690",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
@@ -1652,44 +1464,6 @@
         "url": "https://github.com/sponsors/niklasf"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1699,36 +1473,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1749,34 +1493,6 @@
         "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1807,20 +1523,6 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dnd-core": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
@@ -1842,13 +1544,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.79",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.79.tgz",
@@ -1856,13 +1551,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1918,76 +1606,6 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
-      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2017,16 +1635,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2046,40 +1654,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2090,19 +1664,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -2127,111 +1688,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
     "node_modules/jotai": {
       "version": "2.12.5",
       "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.12.5.tgz",
@@ -2285,26 +1741,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -2323,13 +1759,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/lucide-react": {
       "version": "0.511.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
@@ -2345,56 +1774,6 @@
       "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
       "license": "MIT"
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2402,18 +1781,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -2440,16 +1807,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -4398,57 +3755,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4456,39 +3762,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
@@ -4518,173 +3791,59 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
       "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
+      "bin": {
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": "^12 || ^14 || >= 16"
+        "node": ">=14"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+    "node_modules/primeflex": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-4.0.0.tgz",
+      "integrity": "sha512-UOEZCRjR36+sm5bUpDhS1xbA068l9VC6y1aTNVqQPtXuKIdPTqAWHRUxj3mKAoPrQ9W373ooJJMgNVXfiaw04g==",
+      "license": "MIT"
+    },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
+    "node_modules/primereact": {
+      "version": "10.9.7",
+      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.9.7.tgz",
+      "integrity": "sha512-Ap/lg9GGaS8Pq7IIlzguuG3qlaU6PYF6E0cCRo0rnWauRw/SQGvfreSVIIxqEhtR6xqlf7OV759lyvVOvBzmsQ==",
       "license": "MIT",
       "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/prettier": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
-      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
-    "node_modules/primeflex": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-4.0.0.tgz",
-      "integrity": "sha512-UOEZCRjR36+sm5bUpDhS1xbA068l9VC6y1aTNVqQPtXuKIdPTqAWHRUxj3mKAoPrQ9W373ooJJMgNVXfiaw04g==",
-      "license": "MIT"
-    },
-    "node_modules/primeicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
-      "license": "MIT"
-    },
-    "node_modules/primereact": {
-      "version": "10.9.7",
-      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.9.7.tgz",
-      "integrity": "sha512-Ap/lg9GGaS8Pq7IIlzguuG3qlaU6PYF6E0cCRo0rnWauRw/SQGvfreSVIIxqEhtR6xqlf7OV759lyvVOvBzmsQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react-transition-group": "^4.4.1",
-        "react-transition-group": "^4.4.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
+        "@types/react": {
           "optional": true
         }
       }
@@ -4700,27 +3859,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -5004,29 +4142,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -5036,38 +4151,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.30.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.30.1.tgz",
@@ -5107,30 +4190,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -5153,42 +4212,6 @@
       "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5199,226 +4222,12 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "license": "MIT"
     },
-    "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/ts-fsrs": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ts-fsrs/-/ts-fsrs-5.3.1.tgz",
@@ -5428,13 +4237,6 @@
         "node": ">=20.0.0"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -5593,13 +4395,6 @@
         }
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vite": {
       "version": "5.4.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
@@ -5660,120 +4455,6 @@
         }
       }
     },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -5781,19 +4462,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/zustand": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 661594c..3249f87 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,7 +21,6 @@
     "@vitejs/plugin-react": "^4.5.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   },
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 2e7af2b..b6dc034 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 497f408..125edeb 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,7 +4,7 @@ import { LoginModal } from './components/modals/LoginModal';
 
 const App: React.FC = () => {
   return (
-    <main className="flex justify-center items-center h-screen">
+    <main className="app-shell">
       <Chessrepeat />
       <LoginModal />
     </main>
diff --git a/frontend/src/Chessrepeat.tsx b/frontend/src/Chessrepeat.tsx
index 97dbee4..f8ba4b1 100644
--- a/frontend/src/Chessrepeat.tsx
+++ b/frontend/src/Chessrepeat.tsx
@@ -5,7 +5,7 @@ import { Chessground } from './components/Chessground';
 import Controls from './components/TrainingControls';
 import MobileCommentPopout from './components/MobileCommentPopout';
 
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import Repertoire from './components/repertoire/Repertoire';
 import { ChildNode } from 'chessops/pgn';
 import { Chess } from 'chessops';
@@ -30,6 +30,8 @@ import {
   FolderCog2Icon,
   GraduationCap,
   History,
+  MessageSquareOff,
+  MessageSquareText,
   NetworkIcon,
 } from 'lucide-react';
 import SettingsModal from './components/modals/SettingsModal';
@@ -58,6 +60,7 @@ import { getNodeList } from './util/tree';
 import { PendingPromotion } from './types/types';
 import { PromoRole, PromotionOverlay } from './components/PromotionOverlay';
 import './css/layout.css';
+import './css/chessrepeat.css';
 import { Debug } from './components/Debug';
 import { useWebsocket } from './hooks/useWebsocket';
 import { useStartup } from './hooks/useStartup';
@@ -75,6 +78,24 @@ function promoRoleFromSan(san?: string): PromoRole | undefined {
   return map[m[1]];
 }
 
+// The progress segments and the "+time" reward are positioned from live data,
+// which CSS can't derive on its own. Both hand the value over as a custom
+// property so the actual declarations stay in chessrepeat.css.
+const segmentWidth = (ratio: number): React.CSSProperties =>
+  ({ '--segment-width': `${ratio * 100}%` }) as React.CSSProperties;
+
+const rewardPosition = (x: number, y: number): React.CSSProperties =>
+  ({ '--reward-x': `${x - 5}px`, '--reward-y': `${y - 25}px` }) as React.CSSProperties;
+
+// The hover pie shares the bar's split, so it takes the same two ratios and
+// hands over the angles where each slice ends; whatever is left of the circle
+// is the "known" remainder.
+const pieSlices = (unseenRatio: number, dueRatio: number): React.CSSProperties =>
+  ({
+    '--unseen-end': `${unseenRatio * 360}deg`,
+    '--due-end': `${(unseenRatio + dueRatio) * 360}deg`,
+  }) as React.CSSProperties;
+
 //TODO better sound handling, separate sound for check?
 const SOUNDS = {
   move: new Audio('/sound/public_sound_standard_Move.mp3'),
@@ -166,23 +187,32 @@ export const Chessrepeat = () => {
   const [activeMoveId, setActiveMoveId] = useState();
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [fenCopied, setFenCopied] = useState(false);
+  const [showComments, setShowComments] = useState(true);
   const movesContainerRef = useRef<HTMLDivElement>(null);
 
+  const scrollActiveIntoView = useCallback(() => {
+    const activeEl = movesContainerRef.current?.querySelector('.active') as HTMLElement | null;
+    if (!activeEl) return;
+
+    activeEl.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }, []);
+
+  // Hiding or showing comments reflows the whole tree without changing any
+  // move's class, so the observer below never fires — bring the selected move
+  // back on screen by hand, a frame later so the new layout has settled.
+  useEffect(() => {
+    const frame = requestAnimationFrame(scrollActiveIntoView);
+    return () => cancelAnimationFrame(frame);
+  }, [showComments, scrollActiveIntoView]);
+
   //TODO this can be a useEffect in PGNtree. when current move changes, adjust view
   useEffect(() => {
     const container = movesContainerRef.current;
     if (!container) return;
 
-    const scrollActiveIntoView = () => {
-      const activeEl = container.querySelector('.active') as HTMLElement | null;
-      if (!activeEl) return;
-
-      activeEl.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest',
-      });
-    };
-
     const observer = new MutationObserver((mutations) => {
       for (const m of mutations) {
         if (m.type === 'attributes' && m.attributeName === 'class') {
@@ -199,7 +229,7 @@ export const Chessrepeat = () => {
     });
 
     return () => observer.disconnect();
-  }, []);
+  }, [scrollActiveIntoView]);
 
   const [pendingPromo, setPendingPromo] = useState<PendingPromotion | null>(null);
 
@@ -222,7 +252,7 @@ export const Chessrepeat = () => {
 
   //TODO Fix logic here..
   const targetDest = (): Key[] => {
-    console.log("SELECTED NODE", selectedNode)
+    console.log('SELECTED NODE', selectedNode);
     // console.log("selectedNode fen", selectedNode?.data.fen)
     const targetNode = useTrainerStore.getState().trainableContext.targetMove;
     const uci = calcTarget(selectedNode?.data.fen || initial, targetNode.data.san!);
@@ -286,6 +316,10 @@ export const Chessrepeat = () => {
   }
 
   const containerRef = useRef<HTMLDivElement>(null);
+  /* Chessground publishes the board's *rendered* width here (it floors the
+     board to a whole number of 8 device pixels), so the progress bar can
+     match the board's right edge instead of the card's. */
+  const boardCardRef = useRef<HTMLDivElement>(null);
   const [box, setBox] = useState<{ x: number; y: number; time: string } | null>(null);
 
   const showBoxAtSquare = (square: string, time: number) => {
@@ -398,11 +432,7 @@ export const Chessrepeat = () => {
     <MantineProvider>
       {/* <Debug /> */}
       <div className="app-root">
-        <Header
-          connectedUsers={connectedUsers}
-          incomingCollaboratorsCount={incomingCollaborators.length}
-          onOpenCollaborators={() => setCollaboratorsOpen(true)}
-        />
+        <Header connectedUsers={connectedUsers} incomingCollaboratorsCount={incomingCollaborators.length} />
 
         {showingAddToRepertoireMenu && (
           <>
@@ -424,46 +454,49 @@ export const Chessrepeat = () => {
         <div className="app-main">
           {/* BOARD */}
           <div className="area-board" id="board-wrap">
-            <div className="board-card">
+            <div className="board-card" ref={boardCardRef}>
               {chapter && chapter.enabledCount > 0 && (
-                <div className="group relative">
-                  <div className="flex h-2 w-full overflow-hidden rounded-md bg-gray-200 cursor-default">
+                <div className="board-progress">
+                  <div className="board-progress-bar">
                     <div
-                      className="h-full bg-brand-blue-light"
-                      style={{ width: `${(chapter.unseenCount / chapter.enabledCount) * 100}%` }}
+                      className="board-progress-unseen"
+                      style={segmentWidth(chapter.unseenCount / chapter.enabledCount)}
                     />
                     <div
-                      className="h-full bg-brand-blue"
-                      style={{ width: `${(chapter.lastDueCount / chapter.enabledCount) * 100}%` }}
+                      className="board-progress-due"
+                      style={segmentWidth(chapter.lastDueCount / chapter.enabledCount)}
                     />
                   </div>
 
-                  {/* Breakdown tooltip on hover */}
-                  <div
-                    className="pointer-events-none absolute left-1/2 top-full z-20 mt-2 -translate-x-1/2
-                    whitespace-nowrap rounded-md border border-gray-200 bg-white px-3 py-2 text-xs
-                    text-gray-700 shadow-lg opacity-0 transition-opacity duration-150
-                    group-hover:opacity-100"
-                  >
-                    <table className="border-separate border-spacing-x-2 border-spacing-y-0.5">
+                  {/* Breakdown tooltip on hover: the same split as the bar, as a
+                      pie over the chapter's total, with the counts beside it. */}
+                  <div className="board-progress-tooltip">
+                    <div
+                      className="board-progress-pie"
+                      style={pieSlices(
+                        chapter.unseenCount / chapter.enabledCount,
+                        chapter.lastDueCount / chapter.enabledCount,
+                      )}
+                    />
+                    <table>
                       <tbody>
                         <tr>
-                          <td className="align-middle">
-                            <GraduationCap size={14} className="text-sky-700" />
+                          <td className="cell-icon cell-icon-learn">
+                            <GraduationCap size={14} />
                           </td>
-                          <td className="text-left">To Learn</td>
-                          <td className="text-right font-mono font-semibold">{chapter.unseenCount}</td>
-                          <td className="text-right font-mono text-gray-400">
+                          <td className="cell-label">To Learn</td>
+                          <td className="cell-count">{chapter.unseenCount}</td>
+                          <td className="cell-percent">
                             {Math.round((chapter.unseenCount / chapter.enabledCount) * 100)}%
                           </td>
                         </tr>
                         <tr>
-                          <td className="align-middle">
-                            <History size={14} className="text-blue-800" />
+                          <td className="cell-icon cell-icon-due">
+                            <History size={14} />
                           </td>
-                          <td className="text-left">Due Now</td>
-                          <td className="text-right font-mono font-semibold">{chapter.lastDueCount}</td>
-                          <td className="text-right font-mono text-gray-400">
+                          <td className="cell-label">Due Now</td>
+                          <td className="cell-count">{chapter.lastDueCount}</td>
+                          <td className="cell-percent">
                             {Math.round((chapter.lastDueCount / chapter.enabledCount) * 100)}%
                           </td>
                         </tr>
@@ -474,6 +507,7 @@ export const Chessrepeat = () => {
               )}
               <div ref={containerRef}>
                 <Chessground
+                  dimensionsRef={boardCardRef}
                   orientation={chapter?.trainAs || 'white'}
                   fen={selectedNode?.data.fen || initial}
                   turnColor={turn}
@@ -511,16 +545,15 @@ export const Chessrepeat = () => {
             {/* CONTROLS — part of the same board panel, always directly
                 beneath the board (single grid area). */}
             <div className="area-controls">
-              <div className="flex items-start gap-1">
+              <div className="controls-group">
                 <Controls />
               </div>
               <MobileCommentPopout />
-              <div className="inline-flex rounded-b-xl bg-white shadow-md p-1">
+              <div className="control-tab">
                 <button
                   type="button"
                   onClick={() => setSettingsOpen(true)}
-                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
-                    transition-all duration-200 text-slate-500 hover:text-slate-900 hover:bg-slate-200"
+                  className="control-tab-btn settings-btn"
                   aria-label="Settings"
                   title="Settings"
                 >
@@ -532,7 +565,10 @@ export const Chessrepeat = () => {
 
           {settingsOpen && (
             <>
-              <div className="modal-backdrop" style={{ zIndex: 40 }} onClick={() => setSettingsOpen(false)} />
+              <div
+                className="modal-backdrop modal-backdrop-settings"
+                onClick={() => setSettingsOpen(false)}
+              />
               <SettingsModal setSettingsOpen={setSettingsOpen} />
             </>
           )}
@@ -543,43 +579,55 @@ export const Chessrepeat = () => {
           </div>
 
           {/* PGN TREE */}
-          <div className="area-pgn shadow-md" ref={movesContainerRef}>
-            {/* Header + tree: hidden on mobile during learn/recall */}
-            <div
-              className={`flex flex-col min-h-0 flex-1 overflow-hidden ${isTraining ? 'hidden md:flex' : ''}`}
-            >
-              <div id="repertoire-header" className="shrink-0 flex flex-row items-center p-3 gap-2">
-                <div id="reperoire-icon-wrap" className="text-gray-500 bg-gray-200 p-1 rounded">
-                  <FileIcon className="w-5 h-5" />
+          <div className="area-pgn">
+            <div className="pgn-card" ref={movesContainerRef}>
+              {/* Header + tree: hidden on mobile during learn/recall */}
+              <div className={`pgn-panel-body ${isTraining ? 'is-training-hidden' : ''}`}>
+                <div className="panel-header">
+                  <div className="panel-icon">
+                    <FileIcon />
+                  </div>
+                  <div className="panel-titles">
+                    <span className="panel-title">Chapter</span>
+                    <span className="panel-subtitle">
+                      {chapter?.enabledCount ?? 0} move{chapter?.enabledCount === 1 ? '' : 's'}
+                    </span>
+                  </div>
+                  {/* copy icon */}
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const fen = selectedNode?.data.fen || INITIAL_BOARD_FEN;
+                      if (!fen) return;
+                      await navigator.clipboard.writeText(fen);
+                      setFenCopied(true);
+                      setTimeout(() => setFenCopied(false), 1200);
+                    }}
+                    className={`copy-fen-btn ${fenCopied ? 'is-copied' : ''}`}
+                    aria-label="Copy FEN"
+                    title="Copy FEN"
+                  >
+                    {fenCopied ? <ClipboardCheck /> : <ClipboardCopy />}
+                    <span>copy fen</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowComments((v) => !v)}
+                    className="toggle-comments-btn"
+                    aria-pressed={!showComments}
+                    aria-label={showComments ? 'Hide comments' : 'Show comments'}
+                    title={showComments ? 'Hide comments' : 'Show comments'}
+                  >
+                    {showComments ? <MessageSquareOff /> : <MessageSquareText />}
+                    <span>{showComments ? 'hide comments' : 'show comments'}</span>
+                  </button>
+                </div>
+                <div className="pgn-tree-scroll">
+                  <PgnTree setActiveMoveId={setActiveMoveId} showComments={showComments} />
                 </div>
-                <span className="text-gray-800 font-semibold text-lg">Chapter</span>
-                {/* copy icon */}
-                <button
-                  type="button"
-                  onClick={async () => {
-                    const fen = selectedNode?.data.fen || INITIAL_BOARD_FEN;
-                    if (!fen) return;
-                    await navigator.clipboard.writeText(fen);
-                    setFenCopied(true);
-                    setTimeout(() => setFenCopied(false), 1200);
-                  }}
-                  className={`ml-auto p-1.5 rounded-md transition flex gap-1 text-sm items-end ${
-                    fenCopied
-                      ? 'bg-white text-green-600'
-                      : 'text-slate-600 hover:text-slate-800 hover:bg-gray-100'
-                  }`}
-                  aria-label="Copy FEN"
-                  title="Copy FEN"
-                >
-                  <span>copy fen</span>
-                  {fenCopied ? <ClipboardCheck className="w-5 h-5" /> : <ClipboardCopy className="w-5 h-5" />}
-                </button>
-              </div>
-              <div className="pgn-tree-scroll">
-                <PgnTree setActiveMoveId={setActiveMoveId} />
               </div>
             </div>
-            {/* Controls + comment: mobile only during learn/recall */}
+            {/* Move navigation sits below the card, centered under it. */}
             <div className="pgn-controls-bar">
               <PgnControls />
             </div>
@@ -588,7 +636,7 @@ export const Chessrepeat = () => {
           {/* SIDEBAR (repertoire + memory schedule) */}
           <div className="area-sidebar">
             <div className="area-repertoire">
-              <Repertoire />
+              <Repertoire onOpenCollaborators={() => setCollaboratorsOpen(true)} />
             </div>
 
             <div className="area-schedule">
@@ -600,36 +648,12 @@ export const Chessrepeat = () => {
 
       {/* +time overlay */}
       {box && trainingMethod === 'recall' && (
-        <div
-          style={{
-            position: 'absolute',
-            left: `${box.x - 5}px`,
-            top: `${box.y - 25}px`,
-            pointerEvents: 'none',
-            transition: 'opacity 300ms ease',
-            zIndex: 10,
-            transform: 'rotate(45deg)',
-          }}
-        >
-          <div
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              fontStyle: 'italic',
-              color: '#111',
-              padding: '2px 6px',
-              border: 'rgba(255,255,255,0.2)',
-              whiteSpace: 'nowrap',
-              letterSpacing: '0.5px',
-              background: 'rgba(255,255,255,0.2)',
-            }}
-          >
-            +{box.time}
-          </div>
+        <div className="time-reward" style={rewardPosition(box.x, box.y)}>
+          <div className="time-reward-label">+{box.time}</div>
         </div>
       )}
     </MantineProvider>
   );
 };
 
-export default Chessrepeat;
+export default Chessrepeat;
\ No newline at end of file
diff --git a/frontend/src/components/Chessground.css b/frontend/src/components/Chessground.css
new file mode 100644
index 0000000..5a12979
--- /dev/null
+++ b/frontend/src/components/Chessground.css
@@ -0,0 +1,8 @@
+/* Wrapper chessground mounts into. It must be square and fill its column;
+   the board graphic itself is painted by the theme (.blue cg-board). */
+.chessground-wrap {
+  width: 100%;
+  aspect-ratio: 1;
+  background-size: cover;
+  background-position: center;
+}
diff --git a/frontend/src/components/Chessground.tsx b/frontend/src/components/Chessground.tsx
index 906d05c..f030463 100644
--- a/frontend/src/components/Chessground.tsx
+++ b/frontend/src/components/Chessground.tsx
@@ -2,8 +2,18 @@ import { Chessground as NativeChessground } from 'chessground';
 import type { Api } from 'chessground/api';
 import type { Config } from 'chessground/config';
 import { useEffect, useRef, useState } from 'react';
+import './Chessground.css';
 
-export function Chessground(props: Config & { setBoardFen?: (fen: string) => void }) {
+export function Chessground(
+  props: Config & {
+    setBoardFen?: (fen: string) => void;
+    /* Where chessground publishes ---cg-width/---cg-height. It rounds the
+       board down to a whole number of 8 device pixels, so anything that has
+       to line up with the board's real edge (the progress bar) needs those
+       vars on a shared ancestor, not on the board wrapper itself. */
+    dimensionsRef?: React.RefObject<HTMLElement | null>;
+  },
+) {
   console.log("PROPS", props);
   const [api, setApi] = useState<Api | null>(null);
   const ref = useRef<HTMLDivElement>(null);
@@ -24,7 +34,7 @@ export function Chessground(props: Config & { setBoardFen?: (fen: string) => voi
     } else {
       const chessgroundApi = NativeChessground(ref.current, {
         ...props,
-        addDimensionsCssVarsTo: ref.current,
+        addDimensionsCssVarsTo: props.dimensionsRef?.current ?? ref.current,
         events: {
           change: () => {
             if (props.setBoardFen && chessgroundApi) {
@@ -56,16 +66,5 @@ export function Chessground(props: Config & { setBoardFen?: (fen: string) => voi
     });
   }, [api, props]);
 
-  return (
-    <div
-      className="merida blue"
-      style={{
-        aspectRatio: 1,
-        width: '100%',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }}
-      ref={ref}
-    />
-  );
+  return <div className="chessground-wrap merida blue" ref={ref} />;
 }
diff --git a/frontend/src/components/CommentBox.css b/frontend/src/components/CommentBox.css
new file mode 100644
index 0000000..e26ec50
--- /dev/null
+++ b/frontend/src/components/CommentBox.css
@@ -0,0 +1,8 @@
+.comment-box {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background: var(--c-blue-50);
+  box-shadow: inset 0 0 0 1px var(--c-blue-200);
+  font-size: 0.875rem;
+  color: var(--c-brand-blue);
+}
diff --git a/frontend/src/components/CommentBox.tsx b/frontend/src/components/CommentBox.tsx
index 525d8c1..fb2edff 100644
--- a/frontend/src/components/CommentBox.tsx
+++ b/frontend/src/components/CommentBox.tsx
@@ -1,4 +1,5 @@
 import { useTrainerStore } from '../store/state';
+import './CommentBox.css';
 
 export const CommentBox = () => {
   const selectedNode = useTrainerStore((s) => s.selectedNode);
@@ -7,8 +8,6 @@ export const CommentBox = () => {
   if (!comment) return null;
 
   return (
-    <div className="px-3 py-2 text-sm text-brand-blue bg-blue-50 rounded-md ring-1 ring-blue-200">
-      {comment}
-    </div>
+    <div className="comment-box">{comment}</div>
   );
 };
diff --git a/frontend/src/components/Debug.css b/frontend/src/components/Debug.css
new file mode 100644
index 0000000..5d05e09
--- /dev/null
+++ b/frontend/src/components/Debug.css
@@ -0,0 +1,6 @@
+/* Dev-only readout of the training context; not rendered in normal use. */
+.debug-panel {
+  position: absolute;
+  bottom: 0;
+  padding: 3.75rem;
+}
diff --git a/frontend/src/components/Debug.tsx b/frontend/src/components/Debug.tsx
index 7e45fa1..1fd8873 100644
--- a/frontend/src/components/Debug.tsx
+++ b/frontend/src/components/Debug.tsx
@@ -2,6 +2,7 @@ import { parseSan } from 'chessops/san';
 import { useTrainerStore } from '../store/state';
 import { Chess } from 'chessops';
 import { INITIAL_BOARD_FEN, parseFen } from 'chessops/fen';
+import './Debug.css';
 
 export const Debug: React.FC = () => {
   const trainingPath = useTrainerStore.getState().trainableContext?.startingPath;
@@ -16,7 +17,7 @@ export const Debug: React.FC = () => {
   if (!chapter) return undefined;
   console.log(targetMove?.data?.fen);
   return (
-    <div className="absolute bottom-0 p-15">
+    <div className="debug-panel">
       <div>{`chapter ${chapter.unseenCount}`}</div>
       <div>{`TrainingPath ${trainingPath}`}</div>
       <div>{`selectedPath ${selectedPath}`}</div>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 35b5d04..69a2230 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,5 +1,5 @@
 import { SiDiscord, SiGithub } from 'react-icons/si';
-import { BookOpen, Bug, Globe, LogIn, LogOut, User } from 'lucide-react';
+import { LogIn, LogOut, User } from 'lucide-react';
 import { useAuthStore } from '../store/auth';
 import { useTrainerStore, type Peer } from '../store/state';
 
@@ -8,10 +8,9 @@ interface Props {
   // on Chessrepeat; Login omits this.
   connectedUsers?: Peer[];
   incomingCollaboratorsCount?: number;
-  onOpenCollaborators?: () => void;
 }
 
-export function Header({ connectedUsers, incomingCollaboratorsCount = 0, onOpenCollaborators }: Props) {
+export function Header({ connectedUsers, incomingCollaboratorsCount = 0 }: Props) {
   const authUser = useAuthStore((s) => s.user);
   const clearAuth = useAuthStore((s) => s.clearAuth);
   const openLogin = useAuthStore((s) => s.openLogin);
@@ -28,85 +27,13 @@ export function Header({ connectedUsers, incomingCollaboratorsCount = 0, onOpenC
         <span className="accent">repeat</span>
       </div>
 
-      <a
-        href="https://discord.gg/xhjra9W6Bh"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Join our Discord"
-        className="header-link"
-      >
-        <span>join discord</span>
-        <SiDiscord />
-      </a>
-
-      <a
-        href="https://github.com/jacokyle01/chessrepeat"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="View on GitHub"
-        className="header-link"
-      >
-        <span>view github</span>
-        <SiGithub />
-      </a>
-
-      <a
-        href="https://github.com/jacokyle01/chessrepeat#readme"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Read the docs"
-        className="header-link"
-      >
-        <span>docs</span>
-        <BookOpen />
-      </a>
-
-      <a
-        href="mailto:jacokyle01@gmail.com?subject=Bug Report | chessrepeat"
-        title="Report a Bug"
-        className="header-link"
-      >
-        <span>report bug</span>
-        <Bug />
-      </a>
-
-      {authUser && onOpenCollaborators && (
-        <button
-          type="button"
-          onClick={onOpenCollaborators}
-          title="Collaborators"
-          className="header-link relative"
-        >
-          <span>collaborators</span>
-          <Globe />
-        </button>
-      )}
-
-      <div className="header-actions">
-        {peers.length > 0 && (
-          <div className="header-peers">
-            {peers.map((u) => {
-              // train collaborators get a light-blue ring; everyone else
-              // (owner, edit) gets dark blue. Owner appears as a peer
-              // only when a collaborator is viewing — same color as edit
-              // since they have full access too.
-              const ring = u.permission === 'train' ? 'ring-brand-blue-light' : 'ring-brand-blue';
-              return (
-                <img
-                  key={u.username}
-                  src={u.picture}
-                  alt={u.username}
-                  title={`${u.username} (${u.permission})`}
-                  referrerPolicy="no-referrer"
-                  className={`header-peer ring-2 ${ring}`}
-                />
-              );
-            })}
-          </div>
-        )}
-
+      {/* Identity sits next to the wordmark; the links are pushed right. Who
+          you are and the control that changes it live in one recessed track,
+          the same treatment the peer avatars and the board's segmented
+          controls get. */}
+      <div className="header-auth">
         {authUser ? (
-          <>
+          <div className="header-identity">
             <span className="header-user">
               {authUser.picture ? (
                 <img
@@ -116,15 +43,15 @@ export function Header({ connectedUsers, incomingCollaboratorsCount = 0, onOpenC
                   className="header-avatar"
                 />
               ) : (
-                <User className="h-5 w-5" />
+                <User />
               )}
-              <span className="text-sm">{authUser.username ?? 'Unnamed'}</span>
+              <span className="header-username">{authUser.username ?? 'Unnamed'}</span>
             </span>
             <button
               type="button"
               onClick={() => {
                 clearAuth();
-                //TODO we don't need to reload but this make it easy ..  
+                //TODO we don't need to reload but this make it easy ..
                 location.reload();
               }}
               title="Sign out"
@@ -132,20 +59,71 @@ export function Header({ connectedUsers, incomingCollaboratorsCount = 0, onOpenC
             >
               <LogOut />
             </button>
-          </>
+          </div>
         ) : (
           showSignIn && (
-            <button
-              type="button"
-              onClick={openLogin}
-              className="header-link header-signin"
-              title="Sign in"
-            >
-              <span>sign in</span>
-              <LogIn />
-            </button>
+            <div className="header-identity">
+              <button
+                type="button"
+                onClick={openLogin}
+                className="header-link header-signin"
+                title="Sign in"
+              >
+                <span>sign in</span>
+                <LogIn />
+              </button>
+            </div>
           )
         )}
+
+        {/* Live view: just the faces of the people on this repertoire now.
+            Sits with the identity on the left rather than in the right-hand
+            link cluster — it's about who's here, not somewhere to go. */}
+        {peers.length > 0 && (
+          <div className="header-peers" title="Here now">
+            {peers.map((u) => {
+              // train collaborators get a light-blue ring; everyone else
+              // (owner, edit) gets dark blue. Owner appears as a peer
+              // only when a collaborator is viewing — same color as edit
+              // since they have full access too.
+              const ring = u.permission === 'train' ? 'header-peer-train' : 'header-peer-edit';
+              return (
+                <img
+                  key={u.username}
+                  src={u.picture}
+                  alt={u.username}
+                  title={`${u.username} (${u.permission})`}
+                  referrerPolicy="no-referrer"
+                  className={`header-peer ${ring}`}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="header-actions">
+        <a
+          href="https://discord.gg/xhjra9W6Bh"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Join our Discord"
+          className="header-link"
+        >
+          <span>join discord</span>
+          <SiDiscord />
+        </a>
+
+        <a
+          href="https://github.com/jacokyle01/chessrepeat"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="View on GitHub"
+          className="header-link"
+        >
+          <span>view github</span>
+          <SiGithub />
+        </a>
       </div>
     </div>
   );
diff --git a/frontend/src/components/InsightChart.css b/frontend/src/components/InsightChart.css
new file mode 100644
index 0000000..211acf8
--- /dev/null
+++ b/frontend/src/components/InsightChart.css
@@ -0,0 +1,82 @@
+/* Heatmap of upcoming due counts, built on react-calendar-heatmap.
+   The library ships its own base stylesheet (imported by the component);
+   everything here re-skins it to the app palette. */
+
+.cr-heatmap {
+  width: 100%;
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+}
+
+/* The "nothing scheduled" note. It shares the readout strip with the hovered-
+   day label, so it takes that strip's size and only sets its own dimmer color. */
+.cr-heatmap-empty {
+  color: var(--c-gray-400);
+}
+
+.cr-heatmap-grid {
+  width: 100%;
+  padding-right: 1.25rem;
+}
+
+/* Fixed-height strip under the grid holding the hovered-day readout, so the
+   card doesn't jump as the label appears and disappears. */
+.cr-heatmap-readout {
+  height: 1rem;
+  margin-top: -0.75rem;
+  padding-left: 0.25rem;
+  font-size: 11px;
+  color: var(--c-gray-700);
+}
+
+/* month names down the top and weekday names down the side */
+.cr-heatmap .react-calendar-heatmap text {
+  fill: var(--c-gray-700);
+  font-size: 9px;
+  font-weight: 400;
+}
+
+.cr-heatmap .react-calendar-heatmap .react-calendar-heatmap-small-text {
+  font-size: 8px;
+}
+
+.cr-heatmap .react-calendar-heatmap-month-label {
+  transform: translateY(3px);
+}
+
+.cr-heatmap .react-calendar-heatmap rect {
+  rx: 1;
+  ry: 1;
+}
+
+/* five buckets, empty -> busiest day in the window */
+.cr-heatmap .react-calendar-heatmap rect.color-cr-0 {
+  fill: #dfdfdf;
+}
+
+.cr-heatmap .react-calendar-heatmap rect.color-cr-1 {
+  fill: #c9deff;
+}
+
+.cr-heatmap .react-calendar-heatmap rect.color-cr-2 {
+  fill: #91bbff;
+}
+
+.cr-heatmap .react-calendar-heatmap rect.color-cr-3 {
+  fill: #6991ff;
+}
+
+.cr-heatmap .react-calendar-heatmap rect.color-cr-4 {
+  fill: #1856ff;
+}
+
+.cr-heatmap .react-calendar-heatmap rect.cr-today {
+  stroke: var(--c-brand-blue);
+  stroke-width: 1.5;
+}
+
+.cr-heatmap .react-calendar-heatmap rect:hover {
+  stroke: #555;
+  stroke-width: 1;
+  cursor: pointer;
+}
diff --git a/frontend/src/components/InsightChart.tsx b/frontend/src/components/InsightChart.tsx
index a224985..53ab802 100644
--- a/frontend/src/components/InsightChart.tsx
+++ b/frontend/src/components/InsightChart.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import CalendarHeatmap, { ReactCalendarHeatmapValue } from 'react-calendar-heatmap';
 import 'react-calendar-heatmap/dist/styles.css';
+import './InsightChart.css';
 import { useTrainerStore } from '../store/state';
 import { AlarmCheckIcon } from 'lucide-react';
 
@@ -81,13 +82,14 @@ const InsightChart: React.FC = () => {
     return { values: vals, startDate: today, endDate: end, maxCount: max, totalMoves, dueNow, todayKey };
   }, [dueTimes]);
 
-  if (!dueTimes || totalMoves === 0) {
-    return <div className="px-2 py-1 text-xs text-gray-400">No moves to chart yet.</div>;
-  }
+  // With nothing scheduled the grid still draws — every cell just sits at the
+  // empty color — so the calendar is always on screen and the "no moves" note
+  // goes in the readout strip instead of replacing it.
+  const isEmpty = totalMoves === 0;
 
   return (
-    <div className="cr-heatmap font-sans text-xs w-full">
-      <div className="w-full pr-5">
+    <div className="cr-heatmap">
+      <div className="cr-heatmap-grid">
         <CalendarHeatmap
           startDate={startDate}
           endDate={endDate}
@@ -110,8 +112,8 @@ const InsightChart: React.FC = () => {
         />
       </div>
 
-      <div className="h-4 text-[11px] text-gray-700 pl-1 -mt-3">
-        {hovered && (
+      <div className="cr-heatmap-readout">
+        {hovered ? (
           <>
             <strong>
               {hovered.count} move{hovered.count !== 1 ? 's' : ''}
@@ -125,28 +127,10 @@ const InsightChart: React.FC = () => {
                   day: 'numeric',
                 })}`}
           </>
+        ) : (
+          isEmpty && <span className="cr-heatmap-empty">No moves to chart yet.</span>
         )}
       </div>
-{/* 
-      <div className="flex items-center gap-1 pl-1 pt-1 text-[13px]">
-        <AlarmCheckIcon className="w-4 h-4 text-gray-700" />
-        <span className="font-semibold text-gray-800">{dueNow}</span>
-        <span className="text-gray-600">moves due now</span>
-      </div> */}
-
-      <style>{`
-        .cr-heatmap .react-calendar-heatmap text { fill: #374151; font-size: 9px; font-weight: 600; }
-        .cr-heatmap .react-calendar-heatmap .react-calendar-heatmap-small-text { font-size: 8px; }
-        .cr-heatmap .react-calendar-heatmap-month-label { transform: translateY(3px); }
-        .cr-heatmap .react-calendar-heatmap rect { rx: 1; ry: 1; }
-        .cr-heatmap .react-calendar-heatmap rect.color-cr-0 { fill: #dfdfdf; }
-        .cr-heatmap .react-calendar-heatmap rect.color-cr-1 { fill: #c9deff; }
-        .cr-heatmap .react-calendar-heatmap rect.color-cr-2 { fill: #91bbff; }
-        .cr-heatmap .react-calendar-heatmap rect.color-cr-3 { fill: #6991ff; }
-        .cr-heatmap .react-calendar-heatmap rect.color-cr-4 { fill: #1856ff; }
-        .cr-heatmap .react-calendar-heatmap rect.cr-today { stroke: #3b82f6; stroke-width: 1.5; }
-        .cr-heatmap .react-calendar-heatmap rect:hover { stroke: #555; stroke-width: 1; cursor: pointer; }
-      `}</style>
     </div>
   );
 };
diff --git a/frontend/src/components/MemorySchedule.css b/frontend/src/components/MemorySchedule.css
new file mode 100644
index 0000000..2ada78a
--- /dev/null
+++ b/frontend/src/components/MemorySchedule.css
@@ -0,0 +1,43 @@
+/* Card wrapping the 20-week due-date heatmap. */
+.schedule-card {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+}
+
+/* Slightly tighter than the shared .panel-header so the heatmap gets the
+   vertical room in the short sidebar slot. */
+.schedule-card .panel-header {
+  padding: 0.5rem 0.75rem 0.25rem;
+}
+
+/* Centered on the "Memory Schedule" line, not on the header. The header
+   centers the whole two-line title block; reserving the subtitle's own height
+   below the glyph (0.6875rem line less its -0.125rem tuck) lifts it by half
+   that, which is exactly what puts its center on the title's.
+
+   The link has to be a flex box for that to hold: left as a plain inline
+   anchor it builds a line box around the glyph at the inherited 1.5
+   line-height, and the leading that adds is what threw the alignment off. */
+.schedule-help {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  margin-bottom: 0.5625rem;
+  line-height: 1;
+  color: var(--c-gray-500);
+  transition: color 150ms;
+}
+
+.schedule-help:hover {
+  color: var(--c-gray-700);
+}
+
+.schedule-chart-wrap {
+  width: 100%;
+  padding-right: 0.5rem;
+}
diff --git a/frontend/src/components/MemorySchedule.tsx b/frontend/src/components/MemorySchedule.tsx
index 9a88e5d..feb0348 100644
--- a/frontend/src/components/MemorySchedule.tsx
+++ b/frontend/src/components/MemorySchedule.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 import InsightChart from './InsightChart';
-import { CalendarIcon, CircleHelp } from 'lucide-react';
+import { CalendarIcon } from 'lucide-react';
+import './MemorySchedule.css';
 
 const Schedule: React.FC = () => {
   return (
-    <div className="shrink-0 flex flex-col rounded-lg border border-gray-300 bg-white shadow-md pb-0 w-full">
-      <div id="schedule-header" className="shrink-0 flex items-center px-3 pt-2 pb-1 gap-2">
-        <div id="schedule-icon-wrap" className="text-gray-500 bg-gray-200 p-1 rounded">
-          <CalendarIcon className="w-5 h-5" />
+    <div className="schedule-card">
+      <div id="schedule-header" className="panel-header">
+        <div id="schedule-icon-wrap" className="panel-icon">
+          <CalendarIcon />
         </div>
-        <div className="flex flex-col leading-none">
-          <span className="text-lg text-gray-800 font-semibold">Memory Schedule</span>
-          <span className="-mt-0.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wide">
-            Next 20 weeks
-          </span>
+        <div className="panel-titles">
+          <span className="panel-title">Memory Schedule</span>
+          <span className="panel-subtitle">Next 20 weeks</span>
         </div>
 
         <a
@@ -22,13 +21,15 @@ const Schedule: React.FC = () => {
           rel="noopener noreferrer"
           title="Learn how the memory schedule works"
           aria-label="Learn how the memory schedule works"
-          className="text-gray-600 hover:text-gray-800 transition-colors mb-auto my-1"
+          className="schedule-help"
         >
-          <CircleHelp className="w-4 h-4" />
+          <span className="info-glyph" aria-hidden="true">
+            i
+          </span>
         </a>
       </div>
 
-      <div id="chart-wrap" className="pl-0 pr-2 w-full">
+      <div id="chart-wrap" className="schedule-chart-wrap">
         <InsightChart />
       </div>
     </div>
diff --git a/frontend/src/components/MobileCommentPopout.css b/frontend/src/components/MobileCommentPopout.css
new file mode 100644
index 0000000..188f852
--- /dev/null
+++ b/frontend/src/components/MobileCommentPopout.css
@@ -0,0 +1,113 @@
+/* Phone-only tab between the training pills and the settings pill.
+   On larger screens the comment already shows in the PGN tree, so the tab
+   is hidden from the two-column layout up.
+
+   Both selectors carry .control-tab as well: that class sets
+   `display: inline-flex` at equal specificity, so without it whichever
+   stylesheet happened to load last would decide whether the tab shows. */
+.control-tab.comment-popout-tab {
+  display: none;
+}
+
+@media (max-width: 767.98px) {
+  .control-tab.comment-popout-tab {
+    display: inline-flex;
+  }
+}
+
+/* Reads as one of the group: the recessed grey track supplies the fill and the
+   pill itself is neutral and borderless, lifting into a chip on tap like the
+   Edit/Learn/Recall segments. Type matches them too. */
+.comment-popout-tab #comment-popout-btn {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--c-gray-500);
+}
+
+.comment-popout-tab #comment-popout-btn:hover {
+  color: var(--c-gray-800);
+  background: var(--c-surface);
+}
+
+.comment-popout-tab #comment-popout-btn:active {
+  transform: scale(0.98);
+}
+
+/* ---------- editor dialog ---------- */
+.comment-popout-dialog {
+  max-width: 28rem;
+  padding: 1rem;
+}
+
+.comment-popout-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.comment-popout-icon {
+  display: flex;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  color: var(--c-gray-600);
+  background: var(--c-gray-200);
+}
+
+.comment-popout-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--c-gray-800);
+}
+
+.comment-popout-textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--c-gray-700);
+  resize: none;
+}
+
+.comment-popout-textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--c-brand-blue);
+}
+
+.comment-popout-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.comment-popout-cancel {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--c-gray-500);
+}
+
+.comment-popout-cancel:hover {
+  color: var(--c-gray-700);
+}
+
+.comment-popout-save {
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  font-size: 0.75rem;
+  font-weight: 600;
+  transition: filter 150ms;
+}
+
+.comment-popout-save:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.comment-popout-save:disabled {
+  background: var(--c-gray-200);
+  color: var(--c-gray-400);
+  cursor: not-allowed;
+}
diff --git a/frontend/src/components/MobileCommentPopout.tsx b/frontend/src/components/MobileCommentPopout.tsx
index e83364a..7bcb4d9 100644
--- a/frontend/src/components/MobileCommentPopout.tsx
+++ b/frontend/src/components/MobileCommentPopout.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { CircleXIcon, MessageSquareShare, MessageSquareTextIcon } from 'lucide-react';
+import { XIcon, MessageSquareShare, MessageSquareTextIcon } from 'lucide-react';
 import { useTrainerStore, MAX_COMMENT_CHARS } from '../store/state';
+import './modals/modals.css';
+import './MobileCommentPopout.css';
 
 /**
  * Mobile-only affordance shown during learn/recall when the current move
@@ -48,14 +50,12 @@ const MobileCommentPopout: React.FC = () => {
   const isDirty = draft !== comment;
 
   return (
-    <div className="md:hidden inline-flex rounded-b-xl bg-white shadow-md p-1">
+    <div className="control-tab comment-popout-tab">
       <button
         id="comment-popout-btn"
         type="button"
         onClick={openEditor}
-        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
-          transition-all duration-200
-          bg-white text-amber-600 shadow-md ring-1 ring-amber-500"
+        className="control-tab-btn"
         aria-label="View move comment"
         title="View move comment"
       >
@@ -65,31 +65,22 @@ const MobileCommentPopout: React.FC = () => {
 
       {open && (
         <>
-          <div
-            className="modal-backdrop"
-            style={{ zIndex: 40 }}
-            onClick={() => setOpen(false)}
-          />
-          <dialog
-            open
-            className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50
-                       border-none bg-white rounded-lg shadow-lg w-[calc(100%-2rem)] max-w-md p-4"
-          >
+          <div className="modal-backdrop modal-backdrop-settings" onClick={() => setOpen(false)} />
+          <dialog open className="modal-dialog comment-popout-dialog">
             <button
-              className="absolute -top-3 -right-3 bg-red-500 text-white rounded-full h-8 w-8
-                         flex items-center justify-center shadow-md hover:bg-red-600"
+              className="modal-close-puck"
               aria-label="Close"
               onClick={() => setOpen(false)}
               type="button"
             >
-              <CircleXIcon className="w-5 h-5" />
+              <XIcon />
             </button>
 
-            <div className="flex items-center gap-2 mb-3">
-              <div className="text-gray-500 bg-gray-200 p-1 rounded">
+            <div className="comment-popout-header">
+              <div className="comment-popout-icon">
                 <MessageSquareTextIcon size={20} />
               </div>
-              <span className="text-gray-800 font-semibold text-lg">Comment</span>
+              <span className="comment-popout-title">Comment</span>
             </div>
 
             <textarea
@@ -112,27 +103,18 @@ const MobileCommentPopout: React.FC = () => {
                   save();
                 }
               }}
-              className="w-full text-sm text-gray-700 rounded-md border border-gray-300 p-2
-                         resize-none focus:outline-none focus:ring-1 focus:ring-brand-blue"
+              className="comment-popout-textarea"
             />
 
-            <div className="flex justify-end gap-2 mt-3">
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="text-xs px-3 py-1 text-gray-500 hover:text-gray-700"
-              >
+            <div className="comment-popout-actions">
+              <button type="button" onClick={() => setOpen(false)} className="comment-popout-cancel">
                 Cancel
               </button>
               <button
                 type="button"
                 onClick={save}
                 disabled={!isDirty}
-                className={`text-xs font-semibold px-3 py-1 rounded transition ${
-                  isDirty
-                    ? 'bg-brand-blue text-white hover:brightness-110'
-                    : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                }`}
+                className="comment-popout-save"
               >
                 Save
               </button>
diff --git a/frontend/src/components/PromotionOverlay.css b/frontend/src/components/PromotionOverlay.css
new file mode 100644
index 0000000..69e0b64
--- /dev/null
+++ b/frontend/src/components/PromotionOverlay.css
@@ -0,0 +1,64 @@
+/* Full-screen chooser shown when a pawn reaches the last rank. */
+.promo-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999999;
+}
+
+.promo-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.promo-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.promo-card {
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  background: rgb(255 255 255 / 0.9);
+  box-shadow: var(--shadow-xl);
+}
+
+.promo-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.promo-option {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 0.5rem;
+  background: rgb(0 0 0 / 0.05);
+  transition: background-color 150ms;
+}
+
+.promo-option:hover:not(:disabled) {
+  background: rgb(0 0 0 / 0.1);
+}
+
+/* While learning, only the piece the line actually promotes to is selectable. */
+.promo-option.is-required {
+  background: var(--c-blue-200);
+  box-shadow: 0 0 0 2px var(--c-brand-blue);
+}
+
+.promo-option:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.promo-option piece {
+  position: absolute;
+  inset: 0;
+  background-size: contain;
+}
diff --git a/frontend/src/components/PromotionOverlay.tsx b/frontend/src/components/PromotionOverlay.tsx
index b43dae2..2479d0a 100644
--- a/frontend/src/components/PromotionOverlay.tsx
+++ b/frontend/src/components/PromotionOverlay.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Key } from 'chessground/types';
+import './PromotionOverlay.css';
 
 export type PromoRole = 'queen' | 'rook' | 'bishop' | 'knight';
 const ROLES: PromoRole[] = ['queen', 'rook', 'bishop', 'knight'];
@@ -14,18 +15,11 @@ export function PromotionOverlay(props: {
   const { color, onPick, onCancel, requiredRole } = props;
 
   return (
-    <div
-      className="fixed inset-0 z-[9999999]"
-      onClick={onCancel}
-      onContextMenu={(e) => e.preventDefault()}
-    >
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
-      <div className="absolute inset-0 flex items-center justify-center">
-        <div
-          className={`merida bg-white/90 rounded-xl shadow-xl p-3`}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div className="grid grid-cols-4 gap-2">
+    <div className="promo-overlay" onClick={onCancel} onContextMenu={(e) => e.preventDefault()}>
+      <div className="promo-scrim" />
+      <div className="promo-center">
+        <div className="promo-card merida" onClick={(e) => e.stopPropagation()}>
+          <div className="promo-grid">
             {ROLES.map((role) => {
               const isRequired = requiredRole === role;
               const isDisabled = requiredRole != null && !isRequired;
@@ -33,20 +27,10 @@ export function PromotionOverlay(props: {
                 <button
                   key={role}
                   disabled={isDisabled}
-                  className={`relative rounded-lg transition ${
-                    isRequired
-                      ? 'bg-blue-200 ring-2 ring-brand-blue'
-                      : isDisabled
-                        ? 'bg-black/5 opacity-30 cursor-not-allowed'
-                        : 'bg-black/5 hover:bg-black/10'
-                  }`}
-                  style={{
-                    width: 56,
-                    height: 56,
-                  }}
+                  className={`promo-option ${isRequired ? 'is-required' : ''}`}
                   onClick={() => onPick(role)}
                 >
-                  <piece className={`${role} ${color} absolute inset-0`} style={{ backgroundSize: 'contain' }} />
+                  <piece className={`${role} ${color}`} />
                 </button>
               );
             })}
diff --git a/frontend/src/components/TrainingControls.css b/frontend/src/components/TrainingControls.css
new file mode 100644
index 0000000..b72f65a
--- /dev/null
+++ b/frontend/src/components/TrainingControls.css
@@ -0,0 +1,46 @@
+/* Edit / Learn / Recall as a segmented control under the board card.
+   The track, the pill geometry and the sliding chip come from
+   .control-tab / .control-tab-btn / .control-tab-chip in layout.css, which
+   also scales the type and padding with the board via container queries.
+   The whole control is neutral: selection is carried by the chip and by
+   contrast alone, never by an accent color. */
+
+.training-controls-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+/* Type matches the panel-header actions (add / download): a fixed 0.875rem at
+   the body weight, instead of the board-scaled clamp the track's other
+   segments use. The padding and icons still scale with the board. */
+#training-controls .training-btn {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+/* Hover only applies to a pill that isn't already the selected mode — the
+   active pill sits on the chip and stays put. Hover is text-only: a
+   background would fight the recessed track. */
+.training-btn:not(.is-active):not(.is-prompted):hover {
+  color: var(--c-gray-800);
+}
+
+.training-btn.is-active {
+  color: var(--c-gray-900);
+}
+
+/* First-run nudge: when the seeded example chapter is selected but no mode is
+   active yet, Learn pulses so it reads as the obvious next step. The chip is
+   hidden in this state, so the pill carries its own fill — the app's blue,
+   with the ring set to match it. */
+.training-btn-learn.is-prompted {
+  /* Near-opaque at the start of the cycle: the ring sits on the pale recessed
+     track, where a half-alpha blue barely registered. */
+  --ring-pulse: rgb(59 130 246 / 0.85);
+  --ring-pulse-out: rgb(59 130 246 / 0); /* fade out in blue, not toward black */
+  background: var(--c-brand-blue);
+  border-color: var(--c-brand-blue);
+  color: var(--c-surface);
+  animation: ring-pulse 1.5s ease-out infinite;
+}
diff --git a/frontend/src/components/TrainingControls.tsx b/frontend/src/components/TrainingControls.tsx
index f4e0196..e6469c4 100644
--- a/frontend/src/components/TrainingControls.tsx
+++ b/frontend/src/components/TrainingControls.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
   Book,
   FilePenLineIcon,
@@ -12,7 +12,8 @@ import {
   Settings2,
   SquarePen,
 } from 'lucide-react';
-import { useTrainerStore } from '../store/state';
+import { EXAMPLE_CHAPTER_NAME, useTrainerStore } from '../store/state';
+import './TrainingControls.css';
 // import SettingsButton from './SettingsButton';
 // import { bookI, recallI, gearI } from './Icons'; // Update the path if necessary
 
@@ -24,36 +25,64 @@ import { useTrainerStore } from '../store/state';
 
 const Controls = () => {
   const setTrainingMethod = useTrainerStore((s) => s.setTrainingMethod);
-  const method = useTrainerStore.getState().trainingMethod;
+  // Subscribed, not read off getState(): getState() returns whatever the store
+  // holds at render time without registering a dependency, so this component
+  // only saw a mode change if some *other* subscription happened to re-render
+  // it first — which is exactly the window the Learn nudge lives in.
+  const method = useTrainerStore((s) => s.trainingMethod);
   const setNextTrainable = useTrainerStore((s) => s.setNextTrainablePosition);
   const updateDueCounts = useTrainerStore((s) => s.updateDueCounts);
 
-  const lastGuess = useTrainerStore.getState().lastGuess;
-
-  const repertoire = useTrainerStore().repertoire;
-  const selectedChapterId = useTrainerStore().selectedChapterId;
+  const repertoire = useTrainerStore((s) => s.repertoire);
+  const selectedChapterId = useTrainerStore((s) => s.selectedChapterId);
   const name = repertoire.find((c) => c.uuid === selectedChapterId)?.name || '';
 
   // Nudge new users toward their first review: when the seeded example
   // chapter is selected but no training mode is active yet, make Learn pop.
-  const promptExample = !method && name === 'Example Chapter';
+  // Compared loosely — the name survives an IDB round trip and a server fetch,
+  // and an exact match would silently drop the nudge over a stray space.
+  const promptExample =
+    !method && name.trim().toLowerCase() === EXAMPLE_CHAPTER_NAME.toLowerCase();
+
+  // The raised chip behind the active pill is positioned from the active
+  // button's own box, so it slides (and resizes) between modes. The buttons
+  // scale with the board via container queries, hence the ResizeObserver.
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const activeRef = useRef<HTMLButtonElement | null>(null);
+  const [chip, setChip] = useState<{ left: number; top: number; width: number; height: number } | null>(
+    null,
+  );
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    const measure = () => {
+      const btn = activeRef.current;
+      if (!btn) return setChip(null);
+      setChip({
+        left: btn.offsetLeft,
+        top: btn.offsetTop,
+        width: btn.offsetWidth,
+        height: btn.offsetHeight,
+      });
+    };
+    measure();
+    if (!track) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(track);
+    return () => ro.disconnect();
+  }, [method]);
 
   //TODO difference between handleLearn and setting mode to learn?
   return (
-    <div className="flex justify-start items-start">
-      <div id="training-controls" className="inline-flex rounded-b-xl bg-white shadow-md p-1">
+    <div className="training-controls-wrap">
+      <div id="training-controls" className="control-tab" ref={trackRef}>
         {/* EDIT */}
         <button
+          ref={method === 'edit' ? activeRef : undefined}
           onClick={() => setTrainingMethod('edit')}
-          className={`
-          flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
-          transition-all duration-200
-          ${
-            method === 'edit'
-              ? 'bg-white text-slate-900 shadow-md ring-1 ring-slate-300'
-              : 'text-slate-500 hover:text-slate-800 hover:bg-slate-200'
-          }
-        `}
+          className={`control-tab-btn training-btn training-btn-edit ${
+            method === 'edit' ? 'is-active' : ''
+          }`}
         >
           <SquarePen size={18} />
           Edit
@@ -61,22 +90,15 @@ const Controls = () => {
 
         {/* LEARN */}
         <button
+          ref={method === 'learn' ? activeRef : undefined}
           onClick={() => {
             setTrainingMethod('learn');
             setNextTrainable();
             updateDueCounts();
           }}
-          className={`
-          flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
-          transition-all duration-200
-          ${
-            method === 'learn'
-              ? 'bg-white text-brand-blue-light shadow-md ring-1 ring-brand-blue-light'
-              : promptExample
-                ? 'bg-brand-blue text-white shadow-md ring-2 ring-brand-blue animate-ring-pulse'
-                : 'text-slate-500 hover:text-brand-blue-light hover:bg-slate-200'
-          }
-        `}
+          className={`control-tab-btn training-btn training-btn-learn ${
+            method === 'learn' ? 'is-active' : promptExample ? 'is-prompted' : ''
+          }`}
         >
           <GraduationCap size={18} />
           Learn
@@ -84,24 +106,35 @@ const Controls = () => {
 
         {/* RECALL */}
         <button
+          ref={method === 'recall' ? activeRef : undefined}
           onClick={() => {
             setTrainingMethod('recall');
             setNextTrainable();
             updateDueCounts();
           }}
-          className={`
-          flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
-          transition-all duration-200
-          ${
-            method === 'recall'
-              ? 'bg-white text-brand-blue shadow-md ring-1 ring-brand-blue'
-              : 'text-slate-500 hover:text-brand-blue hover:bg-slate-200'
-          }
-        `}
+          className={`control-tab-btn training-btn training-btn-recall ${
+            method === 'recall' ? 'is-active' : ''
+          }`}
         >
           <History size={18} />
           Recall
         </button>
+
+        <div
+          className="control-tab-chip"
+          role="presentation"
+          data-rendered={chip ? 'true' : 'false'}
+          style={
+            chip
+              ? ({
+                  '--active-tab-left': `${chip.left}px`,
+                  '--active-tab-top': `${chip.top}px`,
+                  '--active-tab-width': `${chip.width}px`,
+                  '--active-tab-height': `${chip.height}px`,
+                } as React.CSSProperties)
+              : undefined
+          }
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/components/UserTip.css b/frontend/src/components/UserTip.css
new file mode 100644
index 0000000..a636cc9
--- /dev/null
+++ b/frontend/src/components/UserTip.css
@@ -0,0 +1,191 @@
+/* The coaching card under the board: what to play, whether the last guess was
+   right, and (on a miss) what to do about it.
+
+   Everything scales up at the 768px breakpoint, matching where the layout
+   goes from a single stacked column to two columns and the tip stops
+   competing with the board for width. */
+
+.tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 0;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+}
+
+.tip-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tip-icon-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
+.tip-icon {
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  color: var(--c-gray-500);
+}
+
+.tip-icon.is-boxed {
+  background: var(--c-gray-100);
+}
+
+.tip-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.tip-text {
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+}
+
+/* ---------- title / description variants ---------- */
+.tip-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--c-gray-800);
+}
+
+/* used by the "no more moves" tip, which is a status rather than a prompt */
+.tip-title-muted {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--c-gray-600);
+}
+
+.tip-description {
+  font-size: 1rem;
+  color: var(--c-gray-600);
+}
+
+.tip-description-small {
+  font-size: 0.75rem;
+  color: var(--c-gray-600);
+}
+
+/* ---------- actions (continue / undo / add) ---------- */
+.tip-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  width: 100%;
+  padding: 0.5rem 0.5rem 0;
+}
+
+.tip-action {
+  flex: 1;
+  padding: 0.25rem 0;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--c-brand-blue);
+  white-space: nowrap;
+}
+
+.tip-action:hover {
+  background: var(--c-gray-50);
+}
+
+/* the guessed move quoted inside the "ADD <move>" action */
+.tip-action-move {
+  color: #000;
+}
+
+/* ---------- the ✗ shown when a guess was wrong ----------
+   Sized by the shared `.tip-icon svg` rules like every other glyph, and boxed
+   on the same gray — only the color says it's a miss. */
+.tip-cross {
+  color: var(--c-red-500);
+}
+
+/* ---------- alternate-move icon, which is gold rather than gray ---------- */
+.tip-icon-alternate svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+@media (min-width: 768px) {
+  .tip {
+    padding: 1rem 1.5rem;
+  }
+
+  .tip-main {
+    gap: 0.75rem;
+  }
+
+  .tip-icon-slot {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .tip-icon {
+    padding: 0.5rem;
+  }
+
+  .tip-icon svg {
+    width: 35px;
+    height: 35px;
+  }
+
+  /* the "no more moves" ✕ stays a size down from the training icons */
+  .tip-icon-small svg {
+    width: 25px;
+    height: 25px;
+  }
+
+  .tip-icon-alternate svg {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .tip-title {
+    font-size: 1.125rem;
+  }
+
+  .tip-title-muted {
+    font-size: 1.25rem;
+  }
+
+  .tip-description-small {
+    font-size: 1rem;
+  }
+
+  .tip-actions {
+    gap: 0.5rem;
+    padding: 0.375rem 1rem 0;
+  }
+
+  .tip-action {
+    font-size: 0.875rem;
+  }
+
+  /* The tip that carries actions is the tallest one, and it shares a squeezed
+     grid row with the board. Tighten it so it fits the row rather than making
+     `.area-usertip` scroll. */
+  .tip:has(.tip-actions) {
+    padding: 0.625rem 1.5rem;
+  }
+
+  .tip:has(.tip-actions) .tip-icon-slot {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .tip:has(.tip-actions) .tip-icon svg {
+    width: 26px;
+    height: 26px;
+  }
+}
diff --git a/frontend/src/components/UserTip.tsx b/frontend/src/components/UserTip.tsx
index fdae2ce..f44526a 100644
--- a/frontend/src/components/UserTip.tsx
+++ b/frontend/src/components/UserTip.tsx
@@ -7,6 +7,7 @@ import {
   MousePointer,
   XIcon,
 } from 'lucide-react';
+import './UserTip.css';
 
 type TipAction = {
   label: ReactNode;
@@ -19,6 +20,8 @@ type TipProps = {
   description: string;
   titleClassName?: string;
   descriptionClassName?: string;
+  /** extra class on the icon wrapper, for tips whose glyph is sized differently */
+  iconClassName?: string;
   actions?: TipAction[];
   grayIcon?: boolean;
 };
@@ -27,32 +30,27 @@ const Tip = ({
   icon,
   title,
   description,
-  titleClassName = 'font-bold text-base md:text-lg text-gray-800',
-  descriptionClassName = 'text-md text-gray-600',
+  titleClassName = 'tip-title',
+  descriptionClassName = 'tip-description',
+  iconClassName = '',
   actions,
   grayIcon = true,
 }: TipProps) => (
-  <div className="bg-white flex flex-col items-center py-4 md:px-6 border border-gray-300 rounded-lg shadow-md">
-    <div className="inline-flex items-center gap-2 md:gap-3">
-      <div className="w-8 h-8 md:w-12 md:h-12 flex items-center justify-center">
-        <div className={`text-gray-500 p-1.5 md:p-2 rounded-md ${grayIcon ? 'bg-gray-100' : ''}`}>
-          {icon}
-        </div>
+  <div className="tip">
+    <div className="tip-main">
+      <div className="tip-icon-slot">
+        <div className={`tip-icon ${grayIcon ? 'is-boxed' : ''} ${iconClassName}`}>{icon}</div>
       </div>
-      <div className="text-start flex flex-col">
+      <div className="tip-text">
         <span className={titleClassName}>{title}</span>
         <span className={descriptionClassName}>{description}</span>
       </div>
     </div>
 
     {actions && actions.length > 0 && (
-      <div className="flex flex-row items-center justify-center gap-1 md:gap-2 w-full px-2 md:px-4 pt-2 ">
+      <div className="tip-actions">
         {actions.map((action, i) => (
-          <button
-            key={i}
-            className="flex-1 py-1 hover:bg-gray-50 text-brand-blue rounded-md font-semibold text-xs md:text-sm whitespace-nowrap"
-            onClick={action.onClick}
-          >
+          <button key={i} className="tip-action" onClick={action.onClick}>
             {action.label}
           </button>
         ))}
@@ -63,7 +61,7 @@ const Tip = ({
 
 const EmptyRepertoire = () => (
   <Tip
-    icon={<GraduationCapIcon className="w-5 h-5 md:w-[35px] md:h-[35px]" />}
+    icon={<GraduationCapIcon />}
     title="Repertoire is empty"
     description={'Click "Add to Repertoire" to get started!'}
   />
@@ -71,10 +69,10 @@ const EmptyRepertoire = () => (
 
 const Unselected = () => (
   <Tip
-    icon={<MousePointer className="w-5 h-5 md:w-[35px] md:h-[35px]" />}
+    icon={<MousePointer />}
     title="No training mode selected"
     description="Click Learn or Recall to start training"
-    descriptionClassName="text-xs md:text-md text-gray-600"
+    descriptionClassName="tip-description-small"
   />
 );
 
@@ -98,7 +96,7 @@ export const UserTip = () => {
     case 'recall':
       return (
         <Tip
-          icon={<HistoryIcon className="w-5 h-5 md:w-[35px] md:h-[35px]" />}
+          icon={<HistoryIcon />}
           title="Play the move"
           description={`What does ${isWhite ? 'White' : 'Black'} play here?`}
         />
@@ -106,7 +104,7 @@ export const UserTip = () => {
     case 'learn':
       return (
         <Tip
-          icon={<GraduationCapIcon className="w-5 h-5 md:w-[35px] md:h-[35px]" />}
+          icon={<GraduationCapIcon />}
           title="Play the move"
           description={`${isWhite ? 'White' : 'Black'} plays ${san}`}
         />
@@ -114,17 +112,19 @@ export const UserTip = () => {
     case 'empty':
       return (
         <Tip
-          icon={<XIcon className="w-5 h-5 md:w-[25px] md:h-[25px]" />}
+          icon={<XIcon />}
+          iconClassName="tip-icon-small"
           title={`No more moves to ${trainingMethod}`}
           description="Try switching the training mode or modifying settings"
-          titleClassName="font-bold text-sm md:text-xl text-gray-600"
-          descriptionClassName="text-xs md:text-md text-gray-600"
+          titleClassName="tip-title-muted"
+          descriptionClassName="tip-description-small"
         />
       );
     case 'alternate':
       return (
         <Tip
-          icon={<LucideRepeat2 className="w-8 h-8 md:w-12 md:h-12" color={'gold'} />}
+          icon={<LucideRepeat2 color={'gold'} />}
+          iconClassName="tip-icon-alternate"
           title={`${lastGuess} is an alternate move`}
           description="Try playing a different move"
           grayIcon={false}
@@ -133,9 +133,8 @@ export const UserTip = () => {
     case 'fail':
       return (
         <Tip
-          icon={<div className="text-red-500 text-2xl md:text-4xl">✗</div>}
+          icon={<XIcon className="tip-cross" />}
           title={`${lastGuess} is incorrect`}
-          grayIcon={false}
           description={`${isWhite ? 'White' : 'Black'} plays ${san}`}
           actions={[
             {
@@ -152,7 +151,7 @@ export const UserTip = () => {
             {
               label: (
                 <>
-                  ADD <span className="text-black">{lastGuess}</span>
+                  ADD <span className="tip-action-move">{lastGuess}</span>
                 </>
               ),
               onClick: () => {
diff --git a/frontend/src/components/collaborators/CollaboratorsPanel.css b/frontend/src/components/collaborators/CollaboratorsPanel.css
new file mode 100644
index 0000000..6916963
--- /dev/null
+++ b/frontend/src/components/collaborators/CollaboratorsPanel.css
@@ -0,0 +1,161 @@
+/* Who can see my repertoire, and whose repertoires I can open.
+   Card/scrim chrome comes from modals.css. */
+
+.collab-section + .collab-section {
+  margin-top: 1.25rem;
+}
+
+.collab-section h3 {
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--c-gray-500);
+}
+
+.collab-empty {
+  font-size: 0.875rem;
+  color: var(--c-gray-500);
+}
+
+/* the "add someone below" copy sits directly above the form */
+.collab-empty-outgoing {
+  margin-bottom: 0.5rem;
+}
+
+/* ---------- list ---------- */
+.collab-list {
+  border: 1px solid var(--c-gray-200);
+  border-radius: 0.375rem;
+}
+
+.collab-list-outgoing {
+  margin-bottom: 0.75rem;
+}
+
+.collab-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.collab-row + .collab-row {
+  border-top: 1px solid var(--c-gray-100);
+}
+
+.collab-avatar {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+}
+
+/* stand-in when the account has no picture */
+.collab-avatar-blank {
+  background: var(--c-gray-200);
+}
+
+.collab-open-btn {
+  flex: 1;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--c-brand-blue);
+}
+
+.collab-open-btn:hover {
+  text-decoration: underline;
+}
+
+.collab-name {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--c-gray-800);
+}
+
+.collab-remove-btn {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  color: var(--c-gray-400);
+}
+
+.collab-remove-btn:hover {
+  background: var(--c-gray-100);
+  color: var(--c-red-500);
+}
+
+/* ---------- permission badges ---------- */
+/* Swatches mirror the avatar-ring colors in the header so the panel and the
+   live presence list stay visually consistent. */
+.collab-badge {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.collab-badge-edit {
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+}
+
+.collab-badge-train {
+  background: var(--c-brand-blue-light);
+  color: var(--c-blue-900);
+}
+
+/* ---------- invite form ---------- */
+.collab-form > * + * {
+  margin-top: 0.5rem;
+}
+
+.collab-form-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.collab-permission-select {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.25rem;
+  background: var(--c-surface);
+  font-size: 0.875rem;
+}
+
+.collab-add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  background: var(--c-slate-800);
+  color: var(--c-surface);
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.collab-add-btn:hover {
+  background: var(--c-slate-700);
+}
+
+/* ---------- result message ---------- */
+.collab-result {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.collab-result-ok {
+  color: var(--c-green-600);
+}
+
+.collab-result-error {
+  color: var(--c-red-600);
+}
diff --git a/frontend/src/components/collaborators/CollaboratorsPanel.tsx b/frontend/src/components/collaborators/CollaboratorsPanel.tsx
index 66e947a..832f546 100644
--- a/frontend/src/components/collaborators/CollaboratorsPanel.tsx
+++ b/frontend/src/components/collaborators/CollaboratorsPanel.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { XIcon, UserPlusIcon } from 'lucide-react';
 import type { Collaborator, CollaboratorPermission } from '../../services/collaborators';
+import '../modals/modals.css';
+import './CollaboratorsPanel.css';
 
 type Props = {
   open: boolean;
@@ -20,11 +22,9 @@ const PERMISSION_DESCRIPTIONS: Record<CollaboratorPermission, string> = {
   train: 'Read-only on the tree, but their training progress syncs.',
 };
 
-// Badge swatches mirror the avatar-ring colors in Header.tsx so the
-// panel and the live presence list stay visually consistent.
 const PERMISSION_BADGE: Record<CollaboratorPermission, string> = {
-  edit: 'bg-brand-blue text-white',
-  train: 'bg-brand-blue-light text-blue-900',
+  edit: 'collab-badge-edit',
+  train: 'collab-badge-train',
 };
 
 export function CollaboratorsPanel({
@@ -55,59 +55,43 @@ export function CollaboratorsPanel({
   };
 
   return (
-    <div
-      className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm flex items-start justify-center pt-20"
-      onClick={onClose}
-    >
-      <div
-        className="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 pt-5 pb-3">
-          <h2 className="text-lg font-bold text-gray-900">Collaborators</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100"
-          >
+    <div className="modal-scrim modal-scrim-top" onClick={onClose}>
+      <div className="modal-card modal-card-md" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-card-header">
+          <h2>Collaborators</h2>
+          <button type="button" onClick={onClose} className="modal-close-x">
             <XIcon size={18} />
           </button>
         </div>
 
-        <div className="px-5 pb-5 space-y-5">
-          <section>
-            <h3 className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">
-              Shared with me ({incoming.length})
-            </h3>
+        <div className="modal-card-body">
+          <section className="collab-section">
+            <h3>Shared with me ({incoming.length})</h3>
             {incoming.length === 0 ? (
-              <p className="text-sm text-gray-500">
-                Nobody has added you as a collaborator yet.
-              </p>
+              <p className="collab-empty">Nobody has added you as a collaborator yet.</p>
             ) : (
-              <ul className="divide-y divide-gray-100 border border-gray-200 rounded-md">
+              <ul className="collab-list">
                 {incoming.map((c) => (
-                  <li key={c.username} className="flex items-center gap-2 px-3 py-2">
+                  <li key={c.username} className="collab-row">
                     {c.picture ? (
                       <img
                         src={c.picture}
                         alt={c.username}
                         referrerPolicy="no-referrer"
-                        className="h-7 w-7 rounded-full"
+                        className="collab-avatar"
                       />
                     ) : (
-                      <div className="h-7 w-7 rounded-full bg-gray-200" />
+                      <div className="collab-avatar collab-avatar-blank" />
                     )}
                     <button
                       type="button"
                       onClick={() => onViewRepertoire(c.username)}
-                      className="flex-1 text-left text-sm font-medium text-brand-blue hover:underline"
+                      className="collab-open-btn"
                       title="Open their repertoire"
                     >
                       {c.username}
                     </button>
-                    <span
-                      className={`text-[10px] uppercase tracking-wide font-semibold px-1.5 py-0.5 rounded ${PERMISSION_BADGE[c.permission]}`}
-                    >
+                    <span className={`collab-badge ${PERMISSION_BADGE[c.permission]}`}>
                       {c.permission}
                     </span>
                   </li>
@@ -116,40 +100,34 @@ export function CollaboratorsPanel({
             )}
           </section>
 
-          <section>
-            <h3 className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">
-              My collaborators ({outgoing.length})
-            </h3>
+          <section className="collab-section">
+            <h3>My collaborators ({outgoing.length})</h3>
             {outgoing.length === 0 ? (
-              <p className="text-sm text-gray-500 mb-2">
+              <p className="collab-empty collab-empty-outgoing">
                 Add someone below to share your repertoire with them.
               </p>
             ) : (
-              <ul className="divide-y divide-gray-100 border border-gray-200 rounded-md mb-3">
+              <ul className="collab-list collab-list-outgoing">
                 {outgoing.map((c) => (
-                  <li key={c.username} className="flex items-center gap-2 px-3 py-2">
+                  <li key={c.username} className="collab-row">
                     {c.picture ? (
                       <img
                         src={c.picture}
                         alt={c.username}
                         referrerPolicy="no-referrer"
-                        className="h-7 w-7 rounded-full"
+                        className="collab-avatar"
                       />
                     ) : (
-                      <div className="h-7 w-7 rounded-full bg-gray-200" />
+                      <div className="collab-avatar collab-avatar-blank" />
                     )}
-                    <span className="flex-1 text-sm font-medium text-gray-800">
-                      {c.username}
-                    </span>
-                    <span
-                      className={`text-[10px] uppercase tracking-wide font-semibold px-1.5 py-0.5 rounded ${PERMISSION_BADGE[c.permission]}`}
-                    >
+                    <span className="collab-name">{c.username}</span>
+                    <span className={`collab-badge ${PERMISSION_BADGE[c.permission]}`}>
                       {c.permission}
                     </span>
                     <button
                       type="button"
                       onClick={() => onRemove(c.username)}
-                      className="p-1 rounded hover:bg-gray-100 text-gray-400 hover:text-red-500"
+                      className="collab-remove-btn"
                       title="Remove collaborator"
                     >
                       <XIcon size={16} />
@@ -159,21 +137,21 @@ export function CollaboratorsPanel({
               </ul>
             )}
 
-            <form onSubmit={handleAdd} className="space-y-2">
+            <form onSubmit={handleAdd} className="collab-form">
               <input
                 type="text"
                 value={inviteTarget}
                 onChange={(e) => setInviteTarget(e.target.value)}
                 placeholder="username"
-                className="w-full border border-gray-300 rounded px-3 py-2 text-sm"
+                className="modal-text-input"
               />
-              <div className="flex items-center gap-2">
+              <div className="collab-form-row">
                 <select
                   value={invitePermission}
                   onChange={(e) =>
                     setInvitePermission(e.target.value as CollaboratorPermission)
                   }
-                  className="flex-1 border border-gray-300 rounded px-2 py-2 text-sm bg-white"
+                  className="collab-permission-select"
                   aria-label="Permission"
                 >
                   <option value="edit">edit</option>
@@ -182,20 +160,15 @@ export function CollaboratorsPanel({
                       with "edit" access as a stopgap. */}
                   {/* <option value="train">train</option> */}
                 </select>
-                <button
-                  type="submit"
-                  className="inline-flex items-center justify-center gap-1.5 bg-slate-800 text-white text-sm font-semibold px-4 py-2 rounded hover:bg-slate-700 whitespace-nowrap"
-                >
+                <button type="submit" className="collab-add-btn">
                   <UserPlusIcon size={14} />
                   Add
                 </button>
               </div>
-              <p className="text-xs text-gray-500">
-                {PERMISSION_DESCRIPTIONS[invitePermission]}
-              </p>
+              <p className="modal-hint">{PERMISSION_DESCRIPTIONS[invitePermission]}</p>
             </form>
             {addMsg && (
-              <p className={`mt-2 text-xs ${addMsg.ok ? 'text-green-600' : 'text-red-600'}`}>
+              <p className={`collab-result ${addMsg.ok ? 'collab-result-ok' : 'collab-result-error'}`}>
                 {addMsg.text}
               </p>
             )}
diff --git a/frontend/src/components/common/Divider.css b/frontend/src/components/common/Divider.css
new file mode 100644
index 0000000..2f6ebb1
--- /dev/null
+++ b/frontend/src/components/common/Divider.css
@@ -0,0 +1,20 @@
+/* Labelled rule separating groups of settings. */
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex-grow: 1;
+  border-top: 1px solid var(--c-gray-300);
+}
+
+.divider-label {
+  margin: 0 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--c-gray-500);
+}
diff --git a/frontend/src/components/common/Divider.tsx b/frontend/src/components/common/Divider.tsx
index 31a5d0a..2358aaf 100644
--- a/frontend/src/components/common/Divider.tsx
+++ b/frontend/src/components/common/Divider.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
+import './Divider.css';
 
 const Divider: React.FC<{ label: string }> = ({ label }) => (
-  <div className="flex items-center my-4">
-    <div className="flex-grow border-t border-gray-300" />
-    <div className="mx-4 text-sm font-semibold text-gray-500">{label}</div>
-    <div className="flex-grow border-t border-gray-300" />
+  <div className="divider">
+    <div className="divider-label">{label}</div>
   </div>
 );
 
diff --git a/frontend/src/components/common/Switch.css b/frontend/src/components/common/Switch.css
new file mode 100644
index 0000000..d30488b
--- /dev/null
+++ b/frontend/src/components/common/Switch.css
@@ -0,0 +1,28 @@
+/* Sliding on/off toggle. */
+.switch {
+  display: flex;
+  align-items: center;
+  width: 3rem;
+  height: 1.5rem;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  background: var(--c-gray-400);
+  transition: background-color 150ms;
+}
+
+.switch.is-on {
+  background: var(--c-emerald-500);
+}
+
+.switch-knob {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  background: var(--c-surface);
+  border: 1px solid var(--c-line);
+  transition: transform 150ms;
+}
+
+.switch.is-on .switch-knob {
+  transform: translateX(1.5rem);
+}
diff --git a/frontend/src/components/common/Switch.tsx b/frontend/src/components/common/Switch.tsx
index 10e76e4..f5ecce1 100644
--- a/frontend/src/components/common/Switch.tsx
+++ b/frontend/src/components/common/Switch.tsx
@@ -1,5 +1,6 @@
 // components/common/SwitchButton.tsx
 import React from "react";
+import "./Switch.css";
 
 type SwitchButtonProps = {
   checked: boolean;
@@ -8,17 +9,8 @@ type SwitchButtonProps = {
 
 export default function SwitchButton({ checked, onChange }: SwitchButtonProps) {
   return (
-    <button
-      onClick={() => onChange(!checked)}
-      className={`w-12 h-6 flex items-center rounded-full p-1 transition ${
-        checked ? "bg-green-500" : "bg-gray-400"
-      }`}
-    >
-      <div
-        className={`bg-white w-4 h-4 rounded-full shadow-md transform transition ${
-          checked ? "translate-x-6" : "translate-x-0"
-        }`}
-      />
+    <button onClick={() => onChange(!checked)} className={`switch ${checked ? "is-on" : ""}`}>
+      <div className="switch-knob" />
     </button>
   );
 }
diff --git a/frontend/src/components/common/ToggleGroup.css b/frontend/src/components/common/ToggleGroup.css
new file mode 100644
index 0000000..3b8fe28
--- /dev/null
+++ b/frontend/src/components/common/ToggleGroup.css
@@ -0,0 +1,37 @@
+/* Labelled segmented control (e.g. Breadth / Depth, Off / On). */
+.toggle-group {
+  margin-bottom: 1rem;
+}
+
+.toggle-group-label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.toggle-group-options {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.25rem;
+}
+
+.toggle-group-option {
+  flex: 1;
+  padding: 0.25rem 0.75rem;
+  background: var(--c-surface);
+  color: var(--c-gray-700);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color 150ms, color 150ms;
+}
+
+.toggle-group-option:hover:not(.is-selected) {
+  background: var(--c-gray-100);
+}
+
+.toggle-group-option.is-selected {
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+}
diff --git a/frontend/src/components/common/ToggleGroup.tsx b/frontend/src/components/common/ToggleGroup.tsx
index 3a3ea99..0fb51a4 100644
--- a/frontend/src/components/common/ToggleGroup.tsx
+++ b/frontend/src/components/common/ToggleGroup.tsx
@@ -1,6 +1,7 @@
 
 
 import React, { useState } from 'react';
+import './ToggleGroup.css';
 
 interface ToggleGroupProps {
   label: string;
@@ -26,19 +27,13 @@ const ToggleGroup: React.FC<ToggleGroupProps> = ({
     : activeIndex;
 
   return (
-    <div className="mb-4">
-      <label className="block text-sm font-semibold mb-1">{label}</label>
-      <div className="flex rounded overflow-hidden border border-gray-300">
+    <div className="toggle-group">
+      <label className="toggle-group-label">{label}</label>
+      <div className="toggle-group-options">
         {labels.map((text, i) => (
           <button
             key={i}
-            className={`flex-1 px-3 py-1 text-sm font-medium transition ${
-              i === 0 ? 'rounded-l' : i === labels.length - 1 ? 'rounded-r' : ''
-            } ${
-              currentIndex === i
-                ? 'bg-brand-blue text-white'
-                : 'bg-white hover:bg-gray-100 text-gray-700'
-            }`}
+            className={`toggle-group-option ${currentIndex === i ? 'is-selected' : ''}`}
             onClick={() => {
               if (!isControlled) {
                 setActiveIndex(i);
diff --git a/frontend/src/components/modals/AddToRepertoireModal.css b/frontend/src/components/modals/AddToRepertoireModal.css
new file mode 100644
index 0000000..1f9939e
--- /dev/null
+++ b/frontend/src/components/modals/AddToRepertoireModal.css
@@ -0,0 +1,341 @@
+/* Import dialog — a PGN paste/upload tab and a JSON-backup restore tab. */
+
+/* Stacks above every other modal: it can be opened from the repertoire panel
+   while the login prompt is already up.
+
+   Head / scrolling body / pinned footer, capped at the viewport height: the
+   PGN tab is tall enough to overflow a short window, and the dialog is
+   centered with a transform, so without this the submit button falls off the
+   bottom of the screen with no way to scroll to it. */
+.modal-dialog.add-rep-dialog {
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  /* the same clearance every other dialog leaves top and bottom */
+  max-height: calc(100dvh - 6rem);
+  overflow: hidden;
+}
+
+.add-rep-form {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.add-rep-head {
+  flex-shrink: 0;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--c-gray-200);
+}
+
+/* the only part that scrolls */
+.add-rep-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.add-rep-footer {
+  flex-shrink: 0;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--c-gray-200);
+  background: var(--c-surface);
+}
+
+.add-rep-head h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--c-gray-800);
+}
+
+/* ---------- tabs ---------- */
+.add-rep-tabs {
+  display: inline-flex;
+  margin-top: 1rem;
+  padding: 0.25rem;
+  border: 1px solid var(--c-gray-200);
+  border-radius: 0.5rem;
+  background: var(--c-gray-50);
+}
+
+.add-rep-tab {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--c-gray-600);
+  transition: color 150ms, background-color 150ms;
+}
+
+.add-rep-tab:hover {
+  color: var(--c-gray-900);
+}
+
+.add-rep-tab.is-active {
+  background: var(--c-surface);
+  color: var(--c-gray-900);
+  box-shadow: var(--shadow);
+}
+
+/* ---------- body ---------- */
+.add-rep-body {
+  padding: 1.5rem;
+}
+
+.add-rep-field {
+  margin-bottom: 1rem;
+}
+
+.add-rep-field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--c-gray-700);
+}
+
+.add-rep-name-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--c-gray-200);
+  border-radius: 0.25rem;
+  line-height: 1.25;
+  color: var(--c-gray-700);
+  box-shadow: var(--shadow);
+  appearance: none;
+}
+
+.add-rep-name-input:focus {
+  outline: none;
+}
+
+.add-rep-pgn-input {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--c-gray-700);
+  box-shadow: var(--shadow);
+}
+
+.add-rep-file-input {
+  font-size: 0.875rem;
+}
+
+.add-rep-field .add-rep-file-input {
+  margin-top: 0.5rem;
+}
+
+/* ---------- "train as" colour picker ---------- */
+.add-rep-train-as {
+  margin-bottom: 1.25rem;
+}
+
+.add-rep-train-as > label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--c-gray-700);
+}
+
+.add-rep-colors {
+  display: flex;
+}
+
+.add-rep-color {
+  flex: 1;
+}
+
+/* The radio itself is hidden; the sibling span is the visible control and
+   picks up its selected look from :checked. */
+.add-rep-color input {
+  display: none;
+}
+
+.add-rep-color-label {
+  display: block;
+  padding: 0.75rem 0;
+  background: var(--c-gray-200);
+  color: var(--c-gray-800);
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms;
+}
+
+.add-rep-color:first-child .add-rep-color-label {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.add-rep-color:last-child .add-rep-color-label {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.add-rep-color input:checked + .add-rep-color-label {
+  background: var(--c-gray-700);
+  color: var(--c-surface);
+}
+
+/* ---------- signed-out notice ---------- */
+.add-rep-signed-out {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--c-amber-300);
+  border-radius: 0.5rem;
+  background: var(--c-amber-50);
+}
+
+.add-rep-signed-out svg {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+  color: var(--c-amber-500);
+}
+
+.add-rep-signed-out p {
+  font-size: 0.875rem;
+  line-height: 1.375;
+  color: var(--c-amber-900);
+}
+
+.add-rep-signed-out button {
+  font-weight: 600;
+  color: var(--c-amber-900);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.add-rep-signed-out button:hover {
+  color: var(--c-amber-950);
+}
+
+/* ---------- submit ---------- */
+.add-rep-submit {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  font-size: 1.125rem;
+  font-weight: 700;
+  transition: filter 150ms, background-color 150ms;
+}
+
+.add-rep-submit:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.add-rep-submit:disabled {
+  background: var(--c-gray-300);
+  color: var(--c-gray-500);
+  cursor: not-allowed;
+}
+
+/* ---------- JSON tab ---------- */
+.add-rep-json-intro {
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  color: var(--c-gray-500);
+}
+
+.add-rep-json-status {
+  margin-top: 0.75rem;
+}
+
+.add-rep-json-loaded {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--c-green-200);
+  border-radius: 0.375rem;
+  background: var(--c-green-50);
+  font-size: 0.875rem;
+  color: var(--c-green-800);
+}
+
+.add-rep-json-loaded svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.add-rep-json-loaded strong {
+  font-weight: 500;
+}
+
+.add-rep-json-filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgb(21 128 61 / 0.8);
+}
+
+.add-rep-json-idle {
+  font-size: 0.875rem;
+  color: var(--c-gray-500);
+}
+
+.add-rep-json-error {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--c-red-600);
+}
+
+.add-rep-json-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.add-rep-clear-btn {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.25rem;
+  color: var(--c-gray-700);
+  font-weight: 600;
+}
+
+.add-rep-clear-btn:hover {
+  background: var(--c-gray-50);
+}
+
+.add-rep-import-btn {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  background: var(--c-green-600);
+  color: var(--c-surface);
+  font-size: 1.125rem;
+  font-weight: 700;
+  transition: background-color 150ms;
+}
+
+.add-rep-import-btn:hover:not(:disabled) {
+  background: var(--c-green-700);
+}
+
+.add-rep-import-btn:disabled {
+  background: var(--c-gray-300);
+  color: var(--c-gray-500);
+  cursor: not-allowed;
+}
+
+.add-rep-import-btn > span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.add-rep-import-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
diff --git a/frontend/src/components/modals/AddToRepertoireModal.tsx b/frontend/src/components/modals/AddToRepertoireModal.tsx
index daa1157..a157e47 100644
--- a/frontend/src/components/modals/AddToRepertoireModal.tsx
+++ b/frontend/src/components/modals/AddToRepertoireModal.tsx
@@ -1,9 +1,11 @@
 import React, { useRef, useState } from 'react';
-import { CircleXIcon, UploadIcon, CheckCircle2, TreePalmIcon, TriangleAlertIcon, CloudAlertIcon } from 'lucide-react';
+import { XIcon, UploadIcon, CheckCircle2, TreePalmIcon, TriangleAlertIcon, CloudAlertIcon } from 'lucide-react';
 import { useTrainerStore } from '../../store/state';
 import { chapterFromImport, chapterFromPgn } from '../../util/io';
 import { Chapter } from '../../types/training';
 import { useAuthStore } from '../../store/auth';
+import './modals.css';
+import './AddToRepertoireModal.css';
 // import { importJSON } from '../../util/importJSON'; // <- assume this exists
 
 type ImportTab = 'pgn' | 'json';
@@ -32,15 +34,11 @@ const AddToRepertoireModal: React.FC = () => {
   const openLogin = useAuthStore((s) => s.openLogin);
 
   const SignedOutNotice = () => (
-    <div className="flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 mb-2">
-      <CloudAlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
-      <p className="text-sm leading-snug text-amber-900">
+    <div className="add-rep-signed-out">
+      <CloudAlertIcon />
+      <p>
         You're using chessrepeat signed out.{' '}
-        <button
-          type="button"
-          onClick={openLogin}
-          className="font-semibold text-amber-900 underline underline-offset-2 hover:text-amber-950"
-        >
+        <button type="button" onClick={openLogin}>
           Log in
         </button>{' '}
         to save your repertoire to the cloud and train anywhere.
@@ -156,15 +154,10 @@ const AddToRepertoireModal: React.FC = () => {
     }
   };
   return (
-    <dialog
-      open
-      className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000]
-                 border-none bg-white rounded-lg shadow-lg w-[calc(100%-2rem)] max-w-lg"
-    >
+    <dialog open className="modal-dialog modal-dialog-lg add-rep-dialog">
       {/* Close button */}
       <button
-        className="absolute -top-3 -right-3 bg-red-500 text-white rounded-full h-8 w-8
-                   flex items-center justify-center shadow-md hover:bg-red-600"
+        className="modal-close-puck"
         aria-label="Close"
         onClick={() => {
           resetJsonState();
@@ -172,184 +165,153 @@ const AddToRepertoireModal: React.FC = () => {
         }}
         type="button"
       >
-        <CircleXIcon className="w-5 h-5" />
+        <XIcon />
       </button>
 
       {/* Heading + Tabs */}
-      <div className="p-6 border-b border-gray-200">
-        <h2 className="text-2xl font-bold text-gray-800">Add to Repertoire</h2>
+      <div className="add-rep-head">
+        <h2>Add to Repertoire</h2>
 
-        <div className="mt-4 inline-flex rounded-lg border border-gray-200 bg-gray-50 p-1">
+        <div className="add-rep-tabs">
           <button
             type="button"
             onClick={() => setTab('pgn')}
-            className={`px-4 py-2 rounded-md text-sm font-semibold transition ${
-              tab === 'pgn' ? 'bg-white shadow text-gray-900' : 'text-gray-600 hover:text-gray-900'
-            }`}
+            className={`add-rep-tab ${tab === 'pgn' ? 'is-active' : ''}`}
           >
             PGN
           </button>
           <button
             type="button"
             onClick={() => setTab('json')}
-            className={`px-4 py-2 rounded-md text-sm font-semibold transition ${
-              tab === 'json' ? 'bg-white shadow text-gray-900' : 'text-gray-600 hover:text-gray-900'
-            }`}
+            className={`add-rep-tab ${tab === 'json' ? 'is-active' : ''}`}
           >
             JSON
           </button>
         </div>
       </div>
 
-      {/* Body */}
-      <div className="p-6">
-        {tab === 'pgn' ? (
-          <form onSubmit={handleSubmitPgn}>
+      {/* Body — scrolls under the head, with the submit pinned below it so the
+          primary action stays reachable on short viewports. */}
+      {tab === 'pgn' ? (
+        <form onSubmit={handleSubmitPgn} className="add-rep-form">
+          <div className="add-rep-body">
             {/* Name */}
-            <div className="mb-4">
-              <label className="block text-gray-700 text-base font-semibold mb-2">Name</label>
-              <input
-                id="name"
-                ref={nameRef}
-                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight
-                           focus:outline-none focus:shadow-outline"
-              />
+            <div className="add-rep-field">
+              <label>Name</label>
+              <input id="name" ref={nameRef} className="add-rep-name-input" />
             </div>
 
             {/* PGN */}
-            <div className="mb-4">
-              <label className="block text-gray-700 text-base font-semibold mb-2">PGN</label>
+            <div className="add-rep-field">
+              <label>PGN</label>
               <textarea
                 id="pgn"
                 ref={pgnRef}
                 rows={4}
                 placeholder={'Enter PGN...\nex. 1. d4 d5 2. c4 c6'}
-                className="shadow block w-full text-sm text-gray-700 rounded-lg border border-gray-300 p-3"
+                className="add-rep-pgn-input"
               />
               <input
                 id="fileInput"
                 type="file"
                 accept=".txt,.pgn"
                 onChange={handlePgnFileChange}
-                className="mt-2 text-sm"
+                className="add-rep-file-input"
               />
             </div>
 
             {/* Train As */}
-            <div className="mb-5">
-              <label className="block text-gray-700 text-base font-semibold mb-3">Train as</label>
-              <div className="flex">
-                <label className="flex-1">
+            <div className="add-rep-train-as">
+              <label>Train as</label>
+              <div className="add-rep-colors">
+                <label className="add-rep-color">
                   <input
                     id="colorWhite"
                     type="radio"
                     name="color"
                     value="white"
-                    className="hidden peer"
                     onChange={() => setSelectedColor('white')}
                   />
-                  <span
-                    className="block text-center py-3 text-lg font-medium bg-gray-200 text-gray-800 rounded-l-lg
-                               peer-checked:bg-gray-700 peer-checked:text-white cursor-pointer transition"
-                  >
-                    White
-                  </span>
+                  <span className="add-rep-color-label">White</span>
                 </label>
-                <label className="flex-1">
+                <label className="add-rep-color">
                   <input
                     id="colorBlack"
                     type="radio"
                     name="color"
                     value="black"
-                    className="hidden peer"
                     onChange={() => setSelectedColor('black')}
                   />
-                  <span
-                    className="block text-center py-3 text-lg font-medium bg-gray-200 text-gray-800 rounded-r-lg
-                               peer-checked:bg-gray-700 peer-checked:text-white cursor-pointer transition"
-                  >
-                    Black
-                  </span>
+                  <span className="add-rep-color-label">Black</span>
                 </label>
               </div>
             </div>
             {!isLoggedIn && <SignedOutNotice />}
+          </div>
 
-            <button
-              type="submit"
-              disabled={!selectedColor}
-              className={`w-full text-lg font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition ${
-                selectedColor
-                  ? 'bg-brand-blue hover:brightness-110 text-white'
-                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
-              }`}
-            >
-              Add
+          <div className="add-rep-footer">
+            <button type="submit" disabled={!selectedColor} className="add-rep-submit">
+              Add to repertoire
             </button>
-          </form>
-        ) : (
-          <form onSubmit={handleImportJson}>
-            <p className="text-sm text-gray-500 mb-4">
+          </div>
+        </form>
+      ) : (
+        <form onSubmit={handleImportJson} className="add-rep-form">
+          <div className="add-rep-body">
+            <p className="add-rep-json-intro">
               Import a JSON file of a repertoire or chapter that you've previously downloaded.{' '}
             </p>
 
-            <div className="mb-4">
-              <label className="block text-gray-700 text-base font-semibold mb-2">File (.json)</label>
+            <div className="add-rep-field">
+              <label>File (.json)</label>
               <input
                 ref={jsonFileRef}
                 type="file"
                 accept="application/json,.json"
                 onChange={handleJsonFileChange}
-                className="text-sm"
+                className="add-rep-file-input"
               />
 
               {/* Loaded indicator (no content preview) */}
-              <div className="mt-3">
+              <div className="add-rep-json-status">
                 {jsonLoaded ? (
-                  <div className="inline-flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-                    <CheckCircle2 className="w-4 h-4" />
-                    <span className="font-medium">Loaded</span>
+                  <div className="add-rep-json-loaded">
+                    <CheckCircle2 />
+                    <strong>Loaded</strong>
                     {jsonFilename ? (
-                      <span className="text-green-700/80 truncate">— {jsonFilename}</span>
+                      <span className="add-rep-json-filename">— {jsonFilename}</span>
                     ) : null}
                   </div>
                 ) : (
-                  <div className="text-sm text-gray-500">No file loaded yet.</div>
+                  <div className="add-rep-json-idle">No file loaded yet.</div>
                 )}
               </div>
             </div>
 
-            {jsonError ? <div className="mb-3 text-sm text-red-600">{jsonError}</div> : null}
+            {jsonError ? <div className="add-rep-json-error">{jsonError}</div> : null}
             {!isLoggedIn && <SignedOutNotice />}
+          </div>
 
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={resetJsonState}
-                className="flex-1 rounded py-2 px-4 font-semibold border border-gray-300 text-gray-700 hover:bg-gray-50"
-              >
+          <div className="add-rep-footer">
+            <div className="add-rep-json-actions">
+              <button type="button" onClick={resetJsonState} className="add-rep-clear-btn">
                 Clear
               </button>
 
               <button
                 type="submit"
                 disabled={isImportingJson || !jsonLoaded}
-                className={`flex-1 text-lg font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition
-                ${
-                  isImportingJson || !jsonLoaded
-                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                    : 'bg-green-600 hover:bg-green-700 text-white'
-                }`}
+                className="add-rep-import-btn"
               >
-                <span className="inline-flex items-center justify-center gap-2">
-                  <UploadIcon className="w-5 h-5" />
+                <span>
+                  <UploadIcon />
                   {isImportingJson ? 'Importing...' : 'Import'}
                 </span>
               </button>
             </div>
-          </form>
-        )}
-      </div>
+          </div>
+        </form>
+      )}
     </dialog>
   );
 };
diff --git a/frontend/src/components/modals/DownloadModal.css b/frontend/src/components/modals/DownloadModal.css
new file mode 100644
index 0000000..1c2bdfa
--- /dev/null
+++ b/frontend/src/components/modals/DownloadModal.css
@@ -0,0 +1,80 @@
+/* Export picker: scope (whole repertoire vs. current chapter) x format. */
+
+.download-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.download-option {
+  padding: 0.625rem 0.75rem;
+  border: 2px solid var(--c-gray-200);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+  color: var(--c-gray-700);
+  text-align: left;
+  font-size: 0.875rem;
+  transition: border-color 150ms, background-color 150ms, color 150ms;
+}
+
+.download-option:hover:not(:disabled):not(.is-selected) {
+  border-color: var(--c-gray-300);
+}
+
+.download-option.is-selected {
+  border-color: var(--c-brand-blue);
+  background: var(--c-blue-50);
+  color: var(--c-blue-900);
+}
+
+.download-option:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.download-option-label {
+  font-weight: 600;
+}
+
+.download-option-sublabel {
+  margin-top: 0.125rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--c-gray-500);
+}
+
+.download-submit {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  border-radius: 0.5rem;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: filter 150ms, transform 150ms;
+}
+
+.download-submit svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.download-submit:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.download-submit:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.download-submit:disabled {
+  background: var(--c-gray-100);
+  color: var(--c-gray-400);
+  cursor: not-allowed;
+}
diff --git a/frontend/src/components/modals/DownloadModal.tsx b/frontend/src/components/modals/DownloadModal.tsx
index 91fae86..57c5513 100644
--- a/frontend/src/components/modals/DownloadModal.tsx
+++ b/frontend/src/components/modals/DownloadModal.tsx
@@ -3,6 +3,8 @@ import { DownloadIcon, XIcon } from 'lucide-react';
 import { useTrainerStore } from '../../store/state';
 import { pgnFromChapter, pgnFromRepertoire } from '../../util/training';
 import { downloadTextFile, repertoireAsJson } from '../../util/io';
+import './modals.css';
+import './DownloadModal.css';
 
 type DownloadScope = 'repertoire' | 'chapter';
 type ExportFormat = 'json' | 'pgn';
@@ -40,31 +42,19 @@ const DownloadModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   };
 
   return (
-    <div
-      className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm flex items-center justify-center"
-      onClick={onClose}
-    >
-      <div
-        className="bg-white rounded-xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 pt-5 pb-3">
-          <h2 className="text-lg font-bold text-gray-900">Download</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition"
-          >
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-card-header">
+          <h2>Download</h2>
+          <button type="button" onClick={onClose} className="modal-close-x">
             <XIcon size={18} />
           </button>
         </div>
 
-        <div className="px-5 pb-5 space-y-5">
+        <div className="modal-card-body">
           <fieldset>
-            <legend className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">
-              Scope
-            </legend>
-            <div className="grid grid-cols-2 gap-2">
+            <legend className="modal-section-label">Scope</legend>
+            <div className="download-options">
               <ScopeOption
                 label="Repertoire"
                 sublabel={`${repertoire.length} chapter${repertoire.length !== 1 ? 's' : ''}`}
@@ -83,10 +73,8 @@ const DownloadModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
           </fieldset>
 
           <fieldset>
-            <legend className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">
-              Format
-            </legend>
-            <div className="grid grid-cols-2 gap-2">
+            <legend className="modal-section-label">Format</legend>
+            <div className="download-options">
               <FormatOption
                 label="JSON"
                 sublabel="Chessrepeat format"
@@ -106,14 +94,9 @@ const DownloadModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
             onClick={download}
             type="button"
             disabled={!canDownload}
-            className={`w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-semibold text-sm transition
-              ${
-                canDownload
-                  ? 'bg-brand-blue hover:brightness-110 text-white active:scale-[0.98]'
-                  : 'bg-gray-100 text-gray-400 cursor-not-allowed'
-              }`}
+            className="download-submit"
           >
-            <DownloadIcon className="w-4 h-4" />
+            <DownloadIcon />
             Download {scope === 'chapter' ? 'Chapter' : 'Repertoire'} as .{format}
           </button>
         </div>
@@ -133,16 +116,10 @@ const ScopeOption: React.FC<{
     type="button"
     onClick={onClick}
     disabled={disabled}
-    className={`text-left px-3 py-2.5 rounded-lg border-2 transition text-sm
-      ${
-        selected
-          ? 'border-brand-blue bg-blue-50 text-blue-900'
-          : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
-      }
-      ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+    className={`download-option ${selected ? 'is-selected' : ''}`}
   >
-    <div className="font-semibold">{label}</div>
-    <div className="text-xs text-gray-500 truncate mt-0.5">{sublabel}</div>
+    <div className="download-option-label">{label}</div>
+    <div className="download-option-sublabel">{sublabel}</div>
   </button>
 );
 
@@ -152,18 +129,9 @@ const FormatOption: React.FC<{
   selected: boolean;
   onClick: () => void;
 }> = ({ label, sublabel, selected, onClick }) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className={`text-left px-3 py-2.5 rounded-lg border-2 transition text-sm cursor-pointer
-      ${
-        selected
-          ? 'border-brand-blue bg-blue-50 text-blue-900'
-          : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
-      }`}
-  >
-    <div className="font-semibold">{label}</div>
-    <div className="text-xs text-gray-500 mt-0.5">{sublabel}</div>
+  <button type="button" onClick={onClick} className={`download-option ${selected ? 'is-selected' : ''}`}>
+    <div className="download-option-label">{label}</div>
+    <div className="download-option-sublabel">{sublabel}</div>
   </button>
 );
 
diff --git a/frontend/src/components/modals/EditChapterModal.css b/frontend/src/components/modals/EditChapterModal.css
new file mode 100644
index 0000000..174153c
--- /dev/null
+++ b/frontend/src/components/modals/EditChapterModal.css
@@ -0,0 +1,163 @@
+/* Rename / delete a chapter. Opened from the gear on a chapter row, which
+   renders its own scrim (.chapter-edit-backdrop in Repertoire.css). */
+
+.edit-chapter-dialog {
+  z-index: 20;
+}
+
+.edit-chapter-body {
+  padding: 1.5rem;
+}
+
+.edit-chapter-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--c-gray-800);
+}
+
+/* ---------- rename ----------
+   Input plus a single check, centred on each other. Cancelling is the
+   dialog's X, which saves too, so the row needs no second button. */
+.edit-chapter-rename {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.edit-chapter-rename input {
+  flex: 1;
+  min-width: 0;
+  border-bottom: 2px solid var(--c-brand-blue);
+  background: transparent;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--c-gray-800);
+}
+
+.edit-chapter-rename input:focus {
+  outline: none;
+}
+
+.edit-chapter-confirm {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  transition: all 150ms;
+}
+
+.edit-chapter-confirm svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.edit-chapter-confirm:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+/* nothing to save yet — greyed out until the name actually changes */
+.edit-chapter-confirm:disabled {
+  background: var(--c-gray-200);
+  color: var(--c-gray-400);
+  cursor: not-allowed;
+}
+
+/* ---------- actions ---------- */
+.edit-chapter-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.edit-chapter-action {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: all 150ms;
+}
+
+.edit-chapter-action svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.edit-chapter-rename-btn {
+  border: 1px solid var(--c-gray-300);
+  background: var(--c-surface);
+  color: var(--c-gray-700);
+}
+
+.edit-chapter-rename-btn:hover {
+  background: var(--c-gray-50);
+}
+
+.edit-chapter-delete-btn {
+  background: var(--c-red-500);
+  color: var(--c-surface);
+}
+
+.edit-chapter-delete-btn:hover {
+  background: var(--c-red-600);
+}
+
+/* ---------- delete confirmation ---------- */
+.edit-chapter-confirm-row {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.edit-chapter-confirm-yes,
+.edit-chapter-confirm-no {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: all 150ms;
+}
+
+.edit-chapter-confirm-yes {
+  background: var(--c-red-600);
+  color: var(--c-surface);
+}
+
+.edit-chapter-confirm-yes:hover {
+  background: var(--c-red-700);
+}
+
+.edit-chapter-confirm-no {
+  border: 1px solid var(--c-gray-300);
+  color: var(--c-gray-600);
+}
+
+.edit-chapter-confirm-no:hover {
+  background: var(--c-gray-50);
+}
+
+/* ---------- messages ---------- */
+.edit-chapter-error {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--c-red-600);
+}
+
+.edit-chapter-warning {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--c-red-600);
+}
diff --git a/frontend/src/components/modals/EditChapterModal.tsx b/frontend/src/components/modals/EditChapterModal.tsx
index 661031e..affc3c0 100644
--- a/frontend/src/components/modals/EditChapterModal.tsx
+++ b/frontend/src/components/modals/EditChapterModal.tsx
@@ -1,23 +1,27 @@
 import React, { useState } from 'react';
-import { CircleXIcon, TrashIcon, PencilIcon, CheckIcon, XIcon } from 'lucide-react';
+import { TrashIcon, PencilIcon, CheckIcon, XIcon } from 'lucide-react';
 import { useTrainerStore } from '../../store/state';
+import './modals.css';
+import './EditChapterModal.css';
 
 interface EditChapterModalProps {
   chapterId: string;
   onClose: () => void;
+  /** Open straight into one action — the chapter row's menu picks it. */
+  initialAction?: 'rename' | 'delete';
 }
 
-const EditChapterModal: React.FC<EditChapterModalProps> = ({ chapterId, onClose }) => {
+const EditChapterModal: React.FC<EditChapterModalProps> = ({ chapterId, onClose, initialAction }) => {
   const repertoire = useTrainerStore((s) => s.repertoire);
   const renameChapter = useTrainerStore((s) => s.renameChapter);
   const deleteChapterAt = useTrainerStore((s) => s.deleteChapterAt);
 
   const chapter = repertoire.find((c) => c.uuid === chapterId);
 
-  const [isRenaming, setIsRenaming] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(initialAction === 'rename');
   const [draftName, setDraftName] = useState(chapter?.name || '');
   const [renameError, setRenameError] = useState<string | null>(null);
-  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(initialAction === 'delete');
 
   if (!chapter) return null;
 
@@ -27,35 +31,27 @@ const EditChapterModal: React.FC<EditChapterModalProps> = ({ chapterId, onClose
     setIsRenaming(true);
   };
 
-  const cancelRename = () => {
-    setRenameError(null);
-    setDraftName(chapter.name);
-    setIsRenaming(false);
-  };
-
-  const commitRename = async () => {
-    const next = draftName.trim();
-    if (!next) {
-      setRenameError('Name cannot be empty.');
-      return;
-    }
-    if (next === chapter.name) {
-      setIsRenaming(false);
-      return;
-    }
+  const trimmedName = draftName.trim();
+  // The check is only offered once there's an actual change to commit.
+  const canCommitRename = !!trimmedName && trimmedName !== chapter.name;
 
+  /** Save the pending rename (if any) and close. Both the check and the
+      dialog's X land here, so leaving the modal never drops an edit. */
+  const commitRenameAndClose = async () => {
+    if (!isRenaming || !canCommitRename) return onClose();
     setRenameError(null);
     try {
-      await renameChapter(chapterId, next);
-      setIsRenaming(false);
+      await renameChapter(chapterId, trimmedName);
+      onClose();
     } catch (err: any) {
+      // stay open on failure so the name isn't silently lost
       setRenameError(err?.message ?? 'Failed to rename chapter.');
     }
   };
 
   const handleRenameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') commitRename();
-    if (e.key === 'Escape') cancelRename();
+    if (e.key === 'Enter') commitRenameAndClose();
+    if (e.key === 'Escape') onClose();
   };
 
   const handleDelete = async () => {
@@ -64,87 +60,70 @@ const EditChapterModal: React.FC<EditChapterModalProps> = ({ chapterId, onClose
   };
 
   return (
-    <dialog
-      open
-      className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20
-                 border-none bg-white rounded-lg shadow-lg w-[calc(100%-2rem)] max-w-md"
-    >
-      {/* Close Button */}
+    <dialog open className="modal-dialog edit-chapter-dialog">
+      {/* Close Button — saves the rename on the way out */}
       <button
-        className="absolute -top-3 -right-3 bg-red-500 text-white rounded-full h-8 w-8
-                   flex items-center justify-center shadow-md hover:bg-red-600"
+        className="modal-close-puck"
         aria-label="Close"
-        onClick={onClose}
+        onClick={commitRenameAndClose}
         type="button"
       >
-        <CircleXIcon className="w-5 h-5" />
+        <XIcon />
       </button>
 
-      <div className="p-6">
+      <div className="edit-chapter-body">
         {isRenaming ? (
-          <div className="flex items-center gap-2">
+          <div className="edit-chapter-rename">
             <input
-              className="flex-1 text-2xl font-semibold text-gray-800 border-b-2 border-brand-blue
-                         focus:outline-none bg-transparent"
               value={draftName}
               onChange={(e) => setDraftName(e.target.value)}
               onKeyDown={handleRenameKeyDown}
               autoFocus
             />
             <button
-              className="p-1.5 rounded-md bg-brand-blue hover:brightness-110 text-white transition"
-              onClick={commitRename}
+              className="edit-chapter-confirm"
+              onClick={commitRenameAndClose}
+              disabled={!canCommitRename}
               type="button"
-              aria-label="Confirm rename"
+              aria-label="Save name"
+              title="Save name"
             >
-              <CheckIcon className="w-4 h-4" />
-            </button>
-            <button
-              className="p-1.5 rounded-md border border-gray-300 text-gray-500 hover:bg-gray-50 transition"
-              onClick={cancelRename}
-              type="button"
-              aria-label="Cancel rename"
-            >
-              <XIcon className="w-4 h-4" />
+              <CheckIcon />
             </button>
           </div>
         ) : (
-          <h2 className="text-2xl font-bold text-gray-800 truncate">{chapter.name}</h2>
+          <h2 className="edit-chapter-title">{chapter.name}</h2>
         )}
-        {renameError && <div className="mt-2 text-sm text-red-600">{renameError}</div>}
+        {renameError && <div className="edit-chapter-error">{renameError}</div>}
 
         {!isRenaming && (
-          <div className="mt-6 flex gap-3">
+          <div className="edit-chapter-actions">
             <button
               onClick={startRename}
               type="button"
-              className="flex-1 inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition"
+              className="edit-chapter-action edit-chapter-rename-btn"
             >
-              <PencilIcon className="w-4 h-4" />
+              <PencilIcon />
               Rename
             </button>
             {!confirmDelete ? (
               <button
                 onClick={() => setConfirmDelete(true)}
                 type="button"
-                className="flex-1 inline-flex items-center justify-center gap-2 rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 transition"
+                className="edit-chapter-action edit-chapter-delete-btn"
               >
-                <TrashIcon className="w-4 h-4" />
+                <TrashIcon />
                 Delete
               </button>
             ) : (
-              <div className="flex-1 flex items-center gap-2">
-                <button
-                  onClick={handleDelete}
-                  type="button"
-                  className="flex-1 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white hover:bg-red-700 transition"
-                >
+              <div className="edit-chapter-confirm-row">
+                <button onClick={handleDelete} type="button" className="edit-chapter-confirm-yes">
                   Confirm
                 </button>
                 <button
                   onClick={() => setConfirmDelete(false)}
                   type="button"
-                  className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition"
+                  className="edit-chapter-confirm-no"
                 >
                   Cancel
                 </button>
@@ -153,7 +132,7 @@ const EditChapterModal: React.FC<EditChapterModalProps> = ({ chapterId, onClose
           </div>
         )}
         {confirmDelete && !isRenaming && (
-          <div className="mt-3 text-sm text-red-600">Delete this chapter? This cannot be undone.</div>
+          <div className="edit-chapter-warning">Delete this chapter? This cannot be undone.</div>
         )}
       </div>
     </dialog>
diff --git a/frontend/src/components/modals/LoginModal.css b/frontend/src/components/modals/LoginModal.css
new file mode 100644
index 0000000..af90df2
--- /dev/null
+++ b/frontend/src/components/modals/LoginModal.css
@@ -0,0 +1,93 @@
+/* Google sign-in, plus the username picker shown on first sign-up. */
+
+.login-google {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.login-google-note {
+  margin-top: 1rem;
+  font-size: 0.75rem;
+  color: var(--c-gray-500);
+  text-align: center;
+}
+
+/* ---------- username picker ---------- */
+.login-username {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--c-gray-200);
+}
+
+.login-username h3 {
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--c-gray-800);
+}
+
+.login-username-field {
+  position: relative;
+  margin-bottom: 0.25rem;
+}
+
+.login-username-field input {
+  width: 100%;
+  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+/* availability indicator pinned inside the field's right edge */
+.login-username-status {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+.login-status-pending {
+  color: var(--c-gray-400);
+}
+
+.login-status-available {
+  color: var(--c-green-600);
+}
+
+.login-status-error {
+  color: var(--c-red-600);
+}
+
+/* Reserves a line so the form doesn't jump as the message changes. */
+.login-username-message {
+  height: 1rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  color: var(--c-gray-500);
+}
+
+.login-submit {
+  width: 100%;
+  padding: 0.5rem 0;
+  border-radius: 0.25rem;
+  background: var(--c-emerald-600);
+  color: var(--c-surface);
+  font-size: 0.875rem;
+  font-weight: 600;
+  box-shadow: 0 0 0 2px var(--c-emerald-300);
+}
+
+.login-submit:hover:not(:disabled) {
+  background: var(--c-emerald-500);
+}
+
+.login-submit:disabled {
+  background: var(--c-slate-300);
+  color: var(--c-slate-500);
+  box-shadow: none;
+  cursor: not-allowed;
+}
diff --git a/frontend/src/components/modals/LoginModal.tsx b/frontend/src/components/modals/LoginModal.tsx
index a14e9ca..4381f97 100644
--- a/frontend/src/components/modals/LoginModal.tsx
+++ b/frontend/src/components/modals/LoginModal.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Modal } from './Modal';
 import { GoogleLoginButton, applyLoginResponse } from '../GoogleLoginButton';
 import { useAuthStore } from '../../store/auth';
+import './LoginModal.css';
 
 const API_URL = import.meta.env.VITE_API_URL;
 
@@ -67,22 +68,22 @@ export function LoginModal() {
   const canSubmit = checkState === 'available';
 
   return (
-    <Modal open={showLogin} onClose={dismiss} title="Sign in" zClassName="z-[1100]">
-      <div className="flex flex-col items-center">
+    <Modal open={showLogin} onClose={dismiss} title="Sign in" scrimClassName="is-stacked">
+      <div className="login-google">
         <GoogleLoginButton
           onNeedsUsername={(idToken) => setPendingSignup({ idToken })}
           onSuccess={(data) => applyLoginResponse(data)}
         />
         {!pendingSignup && (
-          <p className="mt-4 text-xs text-gray-500 text-center">
+          <p className="login-google-note">
             First time signing in? You'll be prompted to pick a username.
           </p>
         )}
       </div>
 
       {pendingSignup && (
-        <div className="mt-6 pt-6 border-t border-gray-200">
-          <h3 className="text-sm font-semibold text-gray-800 mb-1">Pick a username</h3>
+        <div className="login-username">
+          <h3>Pick a username</h3>
           <form
             onSubmit={async (e) => {
               e.preventDefault();
@@ -116,43 +117,39 @@ export function LoginModal() {
               }
             }}
           >
-            <div className="relative mb-1">
+            <div className="login-username-field">
               <input
                 type="text"
                 autoFocus
                 value={pendingUsername}
                 onChange={(e) => setPendingUsername(e.target.value)}
-                className="w-full border border-gray-300 rounded px-3 py-2 pr-9 text-sm"
                 placeholder="username"
                 aria-invalid={checkState === 'taken' || checkState === 'invalid'}
               />
-              <span
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-sm leading-none"
-                aria-live="polite"
-              >
+              <span className="login-username-status" aria-live="polite">
                 {checkState === 'pending' && (
-                  <span className="text-gray-400" title="Checking…">
+                  <span className="login-status-pending" title="Checking…">
                     …
                   </span>
                 )}
                 {checkState === 'available' && (
-                  <span className="text-green-600" title="Available">
+                  <span className="login-status-available" title="Available">
                     ✓
                   </span>
                 )}
                 {checkState === 'taken' && (
-                  <span className="text-red-600" title="Taken">
+                  <span className="login-status-error" title="Taken">
                     ✕
                   </span>
                 )}
                 {checkState === 'invalid' && (
-                  <span className="text-red-600" title="3–20 chars, a–z 0–9 _">
+                  <span className="login-status-error" title="3–20 chars, a–z 0–9 _">
                     ✕
                   </span>
                 )}
               </span>
             </div>
-            <p className="text-xs text-gray-500 mb-4 h-4">
+            <p className="login-username-message">
               {checkState === 'invalid' && 'Use 3–20 chars: a–z, 0–9, underscore.'}
               {checkState === 'taken' && 'That username is taken.'}
               {checkState === 'available' && 'Username is available.'}
@@ -161,11 +158,7 @@ export function LoginModal() {
             <button
               type="submit"
               disabled={!canSubmit}
-              className={
-                canSubmit
-                  ? 'w-full bg-emerald-600 text-white text-sm font-semibold py-2 rounded hover:bg-emerald-500 ring-2 ring-emerald-300'
-                  : 'w-full bg-slate-300 text-slate-500 text-sm font-semibold py-2 rounded cursor-not-allowed'
-              }
+              className="login-submit"
             >
               Continue
             </button>
diff --git a/frontend/src/components/modals/Modal.css b/frontend/src/components/modals/Modal.css
new file mode 100644
index 0000000..c2efc78
--- /dev/null
+++ b/frontend/src/components/modals/Modal.css
@@ -0,0 +1,40 @@
+/* Generic centered modal used by LoginModal. */
+
+/* same scrim treatment as the sheets in modals.css, including the clearance
+   the card is capped against */
+.simple-modal-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  background: var(--c-backdrop);
+  backdrop-filter: blur(4px);
+}
+
+/* stacks above another modal that's already open */
+.simple-modal-scrim.is-stacked {
+  z-index: 1100;
+}
+
+.simple-modal-card {
+  position: relative;
+  width: 24rem;
+  max-width: 100%;
+  max-height: 100%;
+  padding: 1.5rem;
+  overflow: hidden auto;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+}
+
+.simple-modal-card h2 {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+/* .simple-modal-close takes the shared close-button design in modals.css */
diff --git a/frontend/src/components/modals/Modal.tsx b/frontend/src/components/modals/Modal.tsx
index 36fa7c2..51ad6f1 100644
--- a/frontend/src/components/modals/Modal.tsx
+++ b/frontend/src/components/modals/Modal.tsx
@@ -1,23 +1,27 @@
-//TODO use modal in framework? 
+//TODO use modal in framework?
+
+import { XIcon } from 'lucide-react';
+import './modals.css';
+import './Modal.css';
 
 export const Modal: React.FC<{
   open: boolean;
   onClose: () => void;
   title: string;
   children: React.ReactNode;
-  /** Tailwind z-index class; override to stack above another open modal. */
-  zClassName?: string;
-}> = ({ open, onClose, title, children, zClassName = 'z-50' }) => {
+  /** extra class on the scrim; use `is-stacked` to sit above another open modal. */
+  scrimClassName?: string;
+}> = ({ open, onClose, title, children, scrimClassName = '' }) => {
   if (!open) return null;
   return (
-    <div className={`fixed inset-0 flex items-center justify-center bg-black/25 ${zClassName}`}>
-      <div className="bg-white rounded-xl shadow-lg p-6 w-96 relative">
-        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+    <div className={`simple-modal-scrim ${scrimClassName}`}>
+      <div className="simple-modal-card">
+        <h2>{title}</h2>
         <div>{children}</div>
-        <button onClick={onClose} className="absolute top-2 right-2 text-gray-500 hover:text-gray-800">
-          ✕
+        <button onClick={onClose} className="simple-modal-close" aria-label="Close" type="button">
+          <XIcon />
         </button>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/modals/SettingsModal.css b/frontend/src/components/modals/SettingsModal.css
index 62a5a01..e932ba9 100644
--- a/frontend/src/components/modals/SettingsModal.css
+++ b/frontend/src/components/modals/SettingsModal.css
@@ -1,3 +1,5 @@
+/* Same frame and clearance as .modal-dialog in modals.css — this one predates
+   that class and still carries its own copy. */
 .settings-dialog {
   position: fixed;
   top: 50%;
@@ -8,37 +10,18 @@
      which hangs off the right edge (right: -0.75rem), isn't clipped. */
   width: calc(100% - 2rem);
   max-width: 28rem;
-  border: none;
-  background: #fff;
-  border-radius: 0.75rem;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  max-height: calc(100dvh - 6rem);
+  overflow: hidden auto;
+  border: var(--border-w) solid var(--c-line);
+  background: var(--c-surface);
+  border-radius: 0.5rem;
   padding: 0;
   margin: 0;
   font-family: inherit;
 }
 
 /* close button */
-.settings-close-btn {
-  position: absolute;
-  top: -0.75rem;
-  right: -0.75rem;
-  background: #ef4444;
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  transition: background 150ms;
-}
-
-.settings-close-btn:hover {
-  background: #dc2626;
-}
+/* .settings-close-btn takes the shared close-button design in modals.css */
 
 /* header */
 .settings-header {
@@ -48,7 +31,7 @@
 .settings-header h2 {
   font-size: 1.5rem;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--c-gray-800);
   margin: 0;
   display: flex;
   align-items: center;
@@ -58,18 +41,18 @@
 .settings-help-link {
   display: inline-flex;
   align-items: center;
-  color: #9ca3af;
+  color: var(--c-gray-400);
   transition: color 150ms;
 }
 
 .settings-help-link:hover {
-  color: #4b5563;
+  color: var(--c-gray-600);
 }
 
 .settings-header p {
   margin: 0.25rem 0 0;
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--c-gray-500);
 }
 
 /* body */
@@ -86,18 +69,18 @@
   display: block;
   font-size: 0.875rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--c-gray-700);
   margin-bottom: 0.5rem;
 }
 
 .settings-field input {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--c-gray-300);
   border-radius: 0.375rem;
   font-size: 0.875rem;
-  color: #374151;
-  background: #fff;
+  color: var(--c-gray-700);
+  background: var(--c-surface);
   font-family: inherit;
   transition: border-color 150ms, box-shadow 150ms;
   box-sizing: border-box;
@@ -105,8 +88,69 @@
 
 .settings-field input:focus {
   outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  border-color: var(--c-brand-blue);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.2);
+}
+
+/* stepper for "max moves to consider" */
+.settings-stepper {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.settings-stepper button {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.25rem;
+  background: var(--c-surface);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.settings-stepper button:hover {
+  background: var(--c-gray-100);
+}
+
+.settings-stepper-value {
+  min-width: 2rem;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Fixed-height slot so the body doesn't reflow when the notice appears. */
+.settings-dirty-slot {
+  position: relative;
+  height: 1.5rem;
+}
+
+.settings-dirty-notice {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: var(--c-amber-600);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms;
+}
+
+.settings-dirty-notice.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.settings-close-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* a step up from the shared size — it sits beside a 1.5rem heading here */
+.settings-help-link .info-glyph {
+  font-size: 0.75rem;
 }
 
 /* done button */
@@ -117,8 +161,9 @@
   font-size: 1rem;
   font-weight: 700;
   font-family: inherit;
-  color: #fff;
-  background: #1f2937;
+  /* the app's primary fill, same as the repertoire's add button */
+  color: var(--c-surface);
+  background: var(--c-brand-blue);
   border: none;
   border-radius: 0.5rem;
   cursor: pointer;
@@ -126,5 +171,5 @@
 }
 
 .settings-done-btn:hover {
-  background: #374151;
+  background: var(--c-blue-800);
 }
diff --git a/frontend/src/components/modals/SettingsModal.tsx b/frontend/src/components/modals/SettingsModal.tsx
index 3766071..098246e 100644
--- a/frontend/src/components/modals/SettingsModal.tsx
+++ b/frontend/src/components/modals/SettingsModal.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { CircleHelp, CircleXIcon } from 'lucide-react';
+import { XIcon } from 'lucide-react';
 import { useTrainerStore } from '../../store/state';
 import Divider from '../common/Divider';
 import ToggleGroup from '../common/ToggleGroup';
 import { NodeSearch } from '../../types/training';
 import { SrsConfig, defaultSrsConfig } from '../../util/srs';
+import './modals.css';
 import './SettingsModal.css';
 
 const SettingsModal: React.FC<{ setSettingsOpen: (b: boolean) => void }> = ({ setSettingsOpen }) => {
@@ -32,7 +33,7 @@ const SettingsModal: React.FC<{ setSettingsOpen: (b: boolean) => void }> = ({ se
         onClick={() => setSettingsOpen(false)}
         type="button"
       >
-        <CircleXIcon style={{ width: '1.25rem', height: '1.25rem' }} />
+        <XIcon />
       </button>
 
       <div className="settings-header">
@@ -46,7 +47,9 @@ const SettingsModal: React.FC<{ setSettingsOpen: (b: boolean) => void }> = ({ se
             aria-label="Learn how training settings work"
             className="settings-help-link"
           >
-            <CircleHelp style={{ width: '1.1rem', height: '1.1rem' }} />
+            <span className="info-glyph" aria-hidden="true">
+              i
+            </span>
           </a>
         </h2>
         <p>Configure spaced repetition and display preferences.</p>
@@ -63,20 +66,10 @@ const SettingsModal: React.FC<{ setSettingsOpen: (b: boolean) => void }> = ({ se
 
         <div className="settings-field">
           <label>Max moves to consider</label>
-          <div className="flex items-center gap-1">
-            <button
-              className="px-2 py-0.5 rounded border border-gray-300 bg-white text-sm font-medium hover:bg-gray-100"
-              onClick={() => setDraft({ ...draft, limit: Math.max(1, draft.limit - 1) })}
-            >
-              -
-            </button>
-            <span className="min-w-[2rem] text-center text-sm font-medium">{draft.limit}</span>
-            <button
-              className="px-2 py-0.5 rounded border border-gray-300 bg-white text-sm font-medium hover:bg-gray-100"
-              onClick={() => setDraft({ ...draft, limit: draft.limit + 1 })}
-            >
-              +
-            </button>
+          <div className="settings-stepper">
+            <button onClick={() => setDraft({ ...draft, limit: Math.max(1, draft.limit - 1) })}>-</button>
+            <span className="settings-stepper-value">{draft.limit}</span>
+            <button onClick={() => setDraft({ ...draft, limit: draft.limit + 1 })}>+</button>
           </div>
         </div>
 
@@ -124,10 +117,8 @@ const SettingsModal: React.FC<{ setSettingsOpen: (b: boolean) => void }> = ({ se
           onChange={(val) => setSrsDraft({ ...srsDraft, enable_short_term: val === 'On' })}
         />
 
-        <div className="relative h-6">
-          <span
-            className={`absolute inset-0 flex items-center justify-center text-xs text-amber-600 transition-opacity duration-150 ${isDirty ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
-          >
+        <div className="settings-dirty-slot">
+          <span className={`settings-dirty-notice ${isDirty ? 'is-visible' : ''}`}>
             Unsaved changes
           </span>
         </div>
diff --git a/frontend/src/components/modals/modals.css b/frontend/src/components/modals/modals.css
new file mode 100644
index 0000000..e259e62
--- /dev/null
+++ b/frontend/src/components/modals/modals.css
@@ -0,0 +1,163 @@
+/* ===========================
+   Chrome shared by the app's dialogs.
+
+   Two shapes are in use:
+     - "sheet"  — a scrim that owns the click-outside, with a card centered
+                  inside it (Download, Collaborators).
+     - "dialog" — a bare <dialog> positioned over a separately-rendered
+                  .modal-backdrop (Add to Repertoire, Edit Chapter, Comment).
+   Both share the close button defined below.
+   =========================== */
+
+/* ---------- sheet ---------- */
+/* The padding is what keeps a dialog clear of the viewport edges: the card
+   below is capped at 100% of the content box, so a tall one scrolls inside
+   itself rather than running to the top and bottom of the screen. */
+.modal-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  background: var(--c-backdrop);
+  backdrop-filter: blur(4px);
+}
+
+/* variant that pins the card near the top instead of centering it, for
+   panels tall enough that centering would push them off-screen */
+.modal-scrim-top {
+  align-items: flex-start;
+  padding-top: 5rem;
+}
+
+/* Same frame as the app's cards — 2px line, 0.5rem radius, surface fill. The
+   scrim is what lifts a dialog off the page here, so it takes no shadow; the
+   panels behind it don't have one either. */
+.modal-card {
+  width: 100%;
+  max-width: 24rem;
+  max-height: 100%;
+  overflow: hidden auto;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+}
+
+.modal-card-md {
+  max-width: 28rem;
+}
+
+.modal-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.25rem 0.75rem;
+}
+
+.modal-card-header h2 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--c-gray-900);
+}
+
+/* ---------- close button (shared by every dialog) ----------
+   One design everywhere: a quiet X in the card's top-right corner. Sheets
+   put it in the header row, the rest hang it off the corner via the
+   positioning rule below. */
+.modal-close-x,
+.modal-close-puck,
+.simple-modal-close,
+.settings-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--c-gray-400);
+  transition: color 150ms, background-color 150ms;
+}
+
+.modal-close-x:hover,
+.modal-close-puck:hover,
+.simple-modal-close:hover,
+.settings-close-btn:hover {
+  color: var(--c-gray-700);
+  background: var(--c-recessed);
+}
+
+.modal-close-x svg,
+.modal-close-puck svg,
+.simple-modal-close svg,
+.settings-close-btn svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* dialogs (no header row) park it inside the top-right corner */
+.modal-close-puck,
+.simple-modal-close,
+.settings-close-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+}
+
+.modal-card-body {
+  padding: 0 1.25rem 1.25rem;
+}
+
+/* vertical rhythm between the body's sections */
+.modal-card-body > * + * {
+  margin-top: 1.25rem;
+}
+
+.modal-section-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--c-gray-500);
+}
+
+/* ---------- dialog ---------- */
+/* Centered by transform rather than by a flex parent, so the clearance top and
+   bottom comes from the height cap instead of a scrim's padding. */
+.modal-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 50;
+  transform: translate(-50%, -50%);
+  /* margin each side on narrow viewports */
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  max-height: calc(100dvh - 6rem);
+  overflow: hidden auto;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+}
+
+.modal-dialog-lg {
+  max-width: 32rem;
+}
+
+/* ---------- shared form bits ---------- */
+.modal-text-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.modal-hint {
+  font-size: 0.75rem;
+  color: var(--c-gray-500);
+}
diff --git a/frontend/src/components/pgn/ContextMenuProvider.css b/frontend/src/components/pgn/ContextMenuProvider.css
new file mode 100644
index 0000000..61478f6
--- /dev/null
+++ b/frontend/src/components/pgn/ContextMenuProvider.css
@@ -0,0 +1,107 @@
+/* Right-click menu on a move / comment in the PGN tree.
+
+   PrimeReact's ContextMenu ships unstyled here (we never import its theme),
+   so these classes — wired up through the component's `pt` prop — are the
+   entire look of the menu. */
+
+.cr-ctxmenu {
+  min-width: 240px;
+  max-width: 92vw;
+  border: 1px solid var(--c-gray-200);
+  border-radius: 0.75rem;
+  background: rgb(255 255 255 / 0.95);
+  color: var(--c-gray-900);
+  box-shadow: var(--shadow-xl);
+}
+
+@supports (backdrop-filter: blur(0)) {
+  .cr-ctxmenu {
+    background: rgb(255 255 255 / 0.8);
+    backdrop-filter: blur(8px);
+  }
+}
+
+.cr-ctxmenu-list {
+  padding: 0.25rem 0;
+}
+
+.cr-ctxmenu-action {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.5rem;
+  outline: none;
+  transition: background-color 150ms;
+}
+
+.cr-ctxmenu-action:hover,
+.cr-ctxmenu-action:focus {
+  background: var(--c-gray-100);
+}
+
+.cr-ctxmenu-action:active {
+  background: var(--c-gray-200);
+}
+
+.cr-ctxmenu-action[data-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.cr-ctxmenu-label {
+  user-select: none;
+}
+
+.cr-ctxmenu-icon {
+  color: var(--c-gray-500);
+}
+
+.cr-ctxmenu-separator {
+  margin: 0.25rem 0;
+  border-top: 1px solid var(--c-gray-200);
+}
+
+/* ---------- menu rows ---------- */
+/* Shared by the default row rendered here and the custom rows the tree
+   supplies (delete line, edit comment). */
+.ctxmenu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--c-gray-900);
+}
+
+.ctxmenu-item:hover {
+  background: var(--c-gray-100);
+}
+
+.ctxmenu-item:active {
+  background: var(--c-gray-200);
+}
+
+.ctxmenu-item svg {
+  width: 1rem;
+  height: 1rem;
+  color: var(--c-gray-500);
+}
+
+/* placeholder keeping labels aligned when a row has no icon */
+.ctxmenu-item-spacer {
+  width: 1rem;
+  flex-shrink: 0;
+}
+
+.ctxmenu-item-icon {
+  flex-shrink: 0;
+  color: var(--c-gray-500);
+}
+
+.ctxmenu-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.25rem;
+}
diff --git a/frontend/src/components/pgn/ContextMenuProvider.tsx b/frontend/src/components/pgn/ContextMenuProvider.tsx
index 83e38d8..b6bee32 100644
--- a/frontend/src/components/pgn/ContextMenuProvider.tsx
+++ b/frontend/src/components/pgn/ContextMenuProvider.tsx
@@ -4,11 +4,14 @@
 import React, { createContext, useRef, useState, useContext, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { useTrainerStore } from '../../store/state';
+import './ContextMenuProvider.css';
 
 type MenuItem = {
-  label: string;
+  // Items that supply their own `template` render the whole row themselves and
+  // need neither of these.
+  label?: string;
   icon?: string; // PrimeReact icon class e.g. "pi pi-trash"
-  command: () => void;
+  command?: () => void;
   disabled?: boolean;
   separator?: boolean;
   template?: (item: any) => React.ReactNode;
@@ -66,13 +69,13 @@ export function ContextMenuProvider({ children }: { children: React.ReactNode })
       return {
         ...it,
         template: (item: any) => (
-          <div className="flex items-center gap-2 px-3 py-2">
+          <div className="ctxmenu-item">
             {item.icon ? (
-              <span className={`${item.icon} text-gray-500 shrink-0`} />
+              <span className={`${item.icon} ctxmenu-item-icon`} />
             ) : (
-              <span className="w-4 shrink-0" />
+              <span className="ctxmenu-item-spacer" />
             )}
-            <span className="text-sm text-gray-900 leading-5 truncate">{item.label}</span>
+            <span className="ctxmenu-item-label">{item.label}</span>
           </div>
         ),
       };
@@ -88,20 +91,12 @@ export function ContextMenuProvider({ children }: { children: React.ReactNode })
         ref={cm}
         onHide={handleHide}
         pt={{
-          root: {
-            className:
-              'min-w-[240px] max-w-[92vw] rounded-xl border border-gray-200 bg-white/95 text-gray-900 shadow-xl backdrop-blur supports-[backdrop-filter]:bg-white/80',
-          },
-          menu: { className: 'py-1' },
-          action: {
-            className:
-              'flex w-full items-center rounded-lg outline-none transition ' +
-              'hover:bg-gray-100 focus:bg-gray-100 active:bg-gray-200 ' +
-              'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-          },
-          label: { className: 'select-none' },
-          icon: { className: 'text-gray-500' },
-          separator: { className: 'my-1 border-t border-gray-200' },
+          root: { className: 'cr-ctxmenu' },
+          menu: { className: 'cr-ctxmenu-list' },
+          action: { className: 'cr-ctxmenu-action' },
+          label: { className: 'cr-ctxmenu-label' },
+          icon: { className: 'cr-ctxmenu-icon' },
+          separator: { className: 'cr-ctxmenu-separator' },
         }}
       />
       {children}
diff --git a/frontend/src/components/pgn/Tree.css b/frontend/src/components/pgn/Tree.css
new file mode 100644
index 0000000..54ae699
--- /dev/null
+++ b/frontend/src/components/pgn/Tree.css
@@ -0,0 +1,291 @@
+/* ===========================
+   PGN move tree.
+
+   The tree is one wrapping flex row: mainline moves are fixed-basis cells
+   that pack two-per-line beside a narrow move-number cell, and anything that
+   interrupts the mainline (a comment, a set of variations) takes a full-width
+   row. The `.line` / `.lines` / `.branch` connector rules live in style.css.
+   =========================== */
+
+/* The tree sits directly on the chapter card — no fills of its own, so the
+   card's surface is the only background inside the panel. */
+.tree-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* The tree's scrollport. Its right padding is what holds the moves off the
+   scrollbar — put on the wrapper instead, it would push the whole scrollport,
+   and its bar, in from the card's edge. */
+.tree-body {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  min-height: 0;
+  padding-right: 0.5rem;
+  overflow-y: auto;
+}
+
+/* ---------- moves ---------- */
+.move {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 4.74px 0 7.9px;
+  line-height: 27.65px;
+  vertical-align: top;
+  overflow-wrap: break-word;
+  color: var(--c-gray-700);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Mainline moves are cells of the wrapping row: two per line beside an index.
+   Nothing in the tree is bolded, so the mainline is set apart from its
+   sidelines by one step of darker text instead of by weight. */
+.tree-body > .move {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  flex: 0 0 43.5%;
+  overflow: hidden;
+  color: var(--c-gray-800);
+}
+
+/* Hover is a plain gray fill; selection is the solid brand blue with the move
+   text flipped to the surface color, so the current move reads at a glance. */
+.move:hover {
+  background: var(--c-gray-200);
+  border-radius: 0.375rem;
+}
+
+.move.active,
+.move.active:hover {
+  background: var(--c-brand-blue);
+  border-radius: 0.375rem;
+  color: var(--c-surface);
+}
+
+/* the inline move number rides along with the selected move's text color */
+.move.active .index {
+  color: inherit;
+}
+
+/* the move whose context menu is currently open */
+.move.is-context-selected {
+  background: var(--c-orange-400);
+}
+
+/* Sideline moves carry their own move number instead of a gutter cell. */
+.move .index {
+  padding-right: 0.15em;
+  font-size: 90%;
+  color: var(--c-gray-500);
+}
+
+/* placeholder cell holding a colour's slot when the mainline row is broken */
+.move.empty {
+  color: var(--c-gray-600);
+  cursor: default;
+}
+
+.move.empty:hover {
+  background: none;
+}
+
+/* move-number gutter — a gray strip, hairlined off from the moves beside it */
+.tree-body > .index {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: center;
+  flex-basis: 13%;
+  border-right: 1px solid var(--c-gray-200);
+  background: var(--c-gray-100);
+  color: #999;
+}
+
+/* ---------- interruptions (comments + variation blocks) ---------- */
+.interrupt {
+  flex: 0 0 100%;
+  max-width: 100%;
+  border-top: 1px solid var(--c-hairline);
+  border-bottom: 1px solid var(--c-hairline);
+}
+
+/* A mainline move's comment heads its interrupt row, above the sidelines. The
+   rule down its left edge ties it to the move it belongs to — and turns brand
+   blue, matching the move's own fill, when that move is the selected one. */
+.interrupt > .comment {
+  display: block;
+  padding: 0 0 0 0.375rem;
+  border-left: 3px solid var(--c-hairline);
+  border-radius: 0;
+  overflow-wrap: break-word;
+}
+
+.interrupt > .comment.is-current {
+  border-left-color: var(--c-brand-blue);
+}
+
+/* A short sub-variation folded into parentheses after the move it answers. */
+.tree-body .inline {
+  display: inline;
+  font-style: italic;
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
+.tree-body .inline::before {
+  content: '(';
+  margin: 0 -2px 0 2px;
+}
+
+.tree-body .inline::after {
+  content: ')';
+  margin: 0 1px 0 -1px;
+}
+
+.tree-body .inline .move {
+  padding-left: 2px;
+}
+
+.tree-body .inline .lines {
+  margin-left: 0;
+}
+
+/* ---------- comments ---------- */
+.comment {
+  display: inline-block;
+  padding: 0 0.25rem;
+  border-radius: 0.25rem;
+  color: var(--c-gray-500);
+  overflow-wrap: break-word;
+  cursor: pointer;
+}
+
+/* The comment attached to the move the board is showing. Carried by darker
+   text and (on the mainline) the blue left rule — no fill, no bolding. */
+.comment.is-current {
+  color: var(--c-gray-800);
+}
+
+.comment-expand {
+  margin-left: 0.25rem;
+  border-radius: 0.375rem;
+  background: var(--c-gray-200);
+  color: var(--c-gray-500);
+  cursor: pointer;
+}
+
+.comment-expand:hover {
+  text-decoration: underline;
+}
+
+.comment-expand svg {
+  display: inline;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ---------- inline comment editor ---------- */
+.comment-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.comment-editor textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--c-gray-700);
+  resize: none;
+}
+
+.comment-editor textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--c-brand-blue);
+}
+
+.comment-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.comment-editor-cancel {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--c-gray-500);
+}
+
+.comment-editor-cancel:hover {
+  color: var(--c-gray-700);
+}
+
+.comment-editor-save {
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  transition: filter 150ms;
+}
+
+.comment-editor-save:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.comment-editor-save:disabled {
+  background: var(--c-gray-200);
+  color: var(--c-gray-400);
+  cursor: not-allowed;
+}
+
+/* Docked editor at the foot of the panel, opened from a move's context menu. */
+.tree-editor-dock {
+  flex-shrink: 0;
+  padding: 0.5rem;
+  border-top: 1px solid var(--c-gray-200);
+  background: var(--c-surface);
+}
+
+/* ---------- child-move shortcuts (edit mode) ---------- */
+.tree-child-moves {
+  flex-shrink: 0;
+  padding: 0.375rem 0.5rem;
+  border-top: 1px solid var(--c-gray-200);
+  background: var(--c-surface);
+}
+
+.tree-child-moves-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.375rem;
+}
+
+.tree-child-move {
+  flex-basis: calc(50% - 0.1875rem);
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.375rem;
+  background: var(--c-surface);
+  color: var(--c-gray-700);
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: all 150ms;
+}
+
+.tree-child-move:hover {
+  background: var(--c-blue-50);
+  border-color: var(--c-brand-blue);
+  color: var(--c-brand-blue);
+}
diff --git a/frontend/src/components/pgn/Tree.tsx b/frontend/src/components/pgn/Tree.tsx
index 607bd82..09c2a48 100644
--- a/frontend/src/components/pgn/Tree.tsx
+++ b/frontend/src/components/pgn/Tree.tsx
@@ -1,34 +1,46 @@
-// TODO: comments:
-// TODO use primereact icons instead?
-//TODO fix off-by-one bug with ply (compare w/ lichess)
-//TODO adjust scrollheight automatically when clicking a move
-//TODO fix formatting. use retroLine?
+// The chapter move list, arranged the way lichess' `tview2-column` arranges it
+// (ui/analyse/src/treeView/columnView.ts + inlineView.ts):
+//
+//   - the mainline is a flat run of cells in one wrapping flex row: a narrow
+//     move-number cell before every white move, then the moves themselves;
+//   - anything that breaks the mainline (a comment, a set of sidelines) is an
+//     `.interrupt` taking a full-width row. When the interrupted move was
+//     white's, an empty cell fills black's slot before the interrupt and a
+//     fresh index + empty cell re-open the row after it, so black's reply
+//     stays in the right column;
+//   - sidelines nest as `.lines > .line`, and a lone short sub-variation is
+//     folded into parentheses inline after its first move instead of nesting.
+//
+// Disclosure (collapsing) and forced variations aren't part of chessrepeat's
+// data model, so those branches of the lichess code are left out.
 import { useTrainerStore, MAX_COMMENT_CHARS } from '../../store/state';
 import { useAppContextMenu } from './ContextMenuProvider';
 
-// import { path as treePath, ops as treeOps, type TreeWrapper } from '../tree/tree';
-
 import { ContextMenuProvider } from './ContextMenuProvider';
 
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { TrainableNode } from '../../types/training';
 import { getNodeList, nodeAtPath, hasBranching } from '../../util/tree';
-export interface Opts {
+import './Tree.css';
+
+/** Everything a node needs to know about where it sits, mirroring lichess' `Args`. */
+export interface Args {
   parentPath: string;
+  parentNode: TrainableNode;
   isMainline: boolean;
-  depth: number;
-  inline?: TrainableNode;
-  withIndex?: boolean;
-  truncate?: number;
+  /** the sideline this node belongs to renders its siblings in parentheses */
+  parenthetical?: boolean;
 }
 
 export interface Ctx {
   truncateComments: boolean;
+  /** false hides every comment in the tree, mainline and sideline alike */
+  showComments: boolean;
   currentPath: string | undefined;
+  /** children to draw: all of them in edit mode, only the trained line otherwise */
+  visibleChildren: (node: TrainableNode) => TrainableNode[];
 }
 
-const isEmpty = (a: any | undefined): boolean => !a || a.length === 0;
-
 //TODO right clicking these should provide more training info
 //TODO disable line option
 //TODO mark line as seen option
@@ -62,7 +74,7 @@ const useMoveContextMenuItems = (path: string, data: TrainingData) => {
       template: () => (
         <button
           type="button"
-          className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 active:bg-gray-200"
+          className="ctxmenu-item"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -70,7 +82,7 @@ const useMoveContextMenuItems = (path: string, data: TrainingData) => {
             hideMenu();
           }}
         >
-          <Trash2 className="w-4 h-4 text-gray-500" />
+          <Trash2 />
           Delete from here
         </button>
       ),
@@ -79,7 +91,7 @@ const useMoveContextMenuItems = (path: string, data: TrainingData) => {
       template: () => (
         <button
           type="button"
-          className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 active:bg-gray-200"
+          className="ctxmenu-item"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -87,7 +99,7 @@ const useMoveContextMenuItems = (path: string, data: TrainingData) => {
             hideMenu();
           }}
         >
-          <PencilIcon className="w-4 h-4 text-gray-500" />
+          <PencilIcon />
           {data.comment ? 'Edit comment' : 'Add comment'}
         </button>
       ),
@@ -103,7 +115,7 @@ const useCommentContextMenuItems = (path: string) => {
       template: () => (
         <button
           type="button"
-          className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 active:bg-gray-200"
+          className="ctxmenu-item"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -111,7 +123,7 @@ const useCommentContextMenuItems = (path: string) => {
             hideMenu();
           }}
         >
-          <PencilIcon className="w-4 h-4 text-gray-500" />
+          <PencilIcon />
           Edit comment
         </button>
       ),
@@ -121,7 +133,10 @@ const useCommentContextMenuItems = (path: string) => {
 
 const MAX_LEN_MAINLINE_COMMENT = 300;
 const MAX_LEN_INLINE_COMMENT = 200;
-const MAX_BRANCH_DEPTH = 5; //TODO can conditionally shrink this on mobile?
+
+/** lichess' `parenthetical`: exactly two continuations, the second one short and straight. */
+const isParenthetical = (children: TrainableNode[]): boolean =>
+  !children[2] && !!children[1] && !hasBranching(children[1], 6);
 
 // COMMENTS
 
@@ -129,11 +144,6 @@ function truncateComment(text: string, len: number, ctx: Ctx) {
   return ctx.truncateComments && text.length > len ? text.slice(0, len) : text;
 }
 
-function enrichText(text: string): string {
-  // Replace with actual formatting logic (links, markdown, etc.)
-  return text;
-}
-
 // -------------------------
 // Components
 // -------------------------
@@ -164,7 +174,7 @@ function CommentEditor({ path, initial }: { path: string; initial: string }) {
 
   return (
     <div
-      className="flex flex-col gap-1 w-full"
+      className="comment-editor"
       onMouseDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
     >
@@ -188,26 +198,12 @@ function CommentEditor({ path, initial }: { path: string; initial: string }) {
             save();
           }
         }}
-        className="w-full text-sm text-gray-700 rounded-md border border-gray-300 p-2 resize-none focus:outline-none focus:ring-1 focus:ring-brand-blue"
       />
-      <div className="flex justify-end gap-2">
-        <button
-          type="button"
-          onClick={cancel}
-          className="text-xs px-2 py-0.5 text-gray-500 hover:text-gray-700"
-        >
+      <div className="comment-editor-actions">
+        <button type="button" onClick={cancel} className="comment-editor-cancel">
           Cancel
         </button>
-        <button
-          type="button"
-          onClick={save}
-          disabled={!isDirty}
-          className={`text-xs font-semibold px-2 py-0.5 rounded transition ${
-            isDirty
-              ? 'bg-brand-blue text-white hover:brightness-110'
-              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
+        <button type="button" onClick={save} disabled={!isDirty} className="comment-editor-save">
           Save
         </button>
       </div>
@@ -227,7 +223,7 @@ function RenderComment({
   maxLength: number;
 }) {
   const [expanded, setExpanded] = useState(false); //TODO can we do this with a class instead? OPTIMIZATION
-  const selectedPath = useTrainerStore.getState().selectedPath;
+  const selectedPath = useTrainerStore((s) => s.selectedPath);
   const { showMenu } = useAppContextMenu();
   const items = useCommentContextMenuItems(path);
   const truncated = truncateComment(comment, maxLength, ctx);
@@ -235,29 +231,22 @@ function RenderComment({
 
   const displayText = isTruncated && !expanded ? truncated : comment;
   const isCommentOfActiveMove = path === selectedPath;
-  const selectedClass = isCommentOfActiveMove
-    ? 'text-brand-blue bg-blue-50 shadow-inner ring-1 ring-blue-200 text-gray-700'
-    : '';
 
   return (
     <span
-      className={`comment inline-block text-gray-500 break-words px-1 rounded cursor-pointer ${selectedClass}`}
-      onContextMenu={(e) => showMenu(e, items, path)}
+      className={`comment ${isCommentOfActiveMove ? 'is-current' : ''}`}
+      onContextMenu={(e) => showMenu(e, items, path, '')}
     >
       {displayText}
       {isTruncated && (
         <span
-          className="text-gray-500 bg-gray-200 rounded-md cursor-pointer ml-1 hover:underline"
+          className="comment-expand"
           onClick={(e) => {
             e.stopPropagation();
             setExpanded(!expanded);
           }}
         >
-          {expanded ? (
-            <ChevronsRightLeftIcon className="inline w-4 h-4" />
-          ) : (
-            <EllipsisIcon className="inline w-4 h-4" />
-          )}
+          {expanded ? <ChevronsRightLeftIcon /> : <EllipsisIcon />}
         </span>
       )}
     </span>
@@ -265,30 +254,15 @@ function RenderComment({
 }
 
 export function RenderInlineCommentsOf({ ctx, node, path }: { ctx: Ctx; node: TrainableNode; path: string }) {
-  if (!node.data.comment) return null;
+  if (!ctx.showComments || !node.data.comment) return null;
 
   return (
     <RenderComment comment={node.data.comment} ctx={ctx} path={path} maxLength={MAX_LEN_INLINE_COMMENT} />
   );
 }
 
-//TODO conceal?
-export function RenderMainlineCommentsOf({
-  ctx,
-  node,
-  // conceal,
-  withColor,
-  path,
-}: {
-  ctx: Ctx;
-  node: TrainableNode;
-  // conceal?: Conceal;
-  withColor: boolean;
-  path: string;
-}) {
-  if (!node.data.comment) return null;
-
-  const colorClass = withColor ? (node.data.ply % 2 === 0 ? ' black' : ' white') : '';
+export function RenderMainlineCommentsOf({ ctx, node, path }: { ctx: Ctx; node: TrainableNode; path: string }) {
+  if (!ctx.showComments || !node.data.comment) return null;
 
   return (
     <RenderComment comment={node.data.comment} ctx={ctx} path={path} maxLength={MAX_LEN_MAINLINE_COMMENT} />
@@ -297,343 +271,172 @@ export function RenderMainlineCommentsOf({
 
 // END COMMENTS
 
-//TODO
-export const renderIndexText = (ply: number, withDots?: boolean): string =>
-  plyToTurn(ply) + (withDots ? (ply % 2 === 1 ? '.' : '...') : '');
-
-//TODO maybe dont style this as if it was a real move?
-function EmptyMove() {
-  return (
-    <div className="empty move items-center self-start flex shadow-sm basis-[43.5%] shrink-0 grow-0 leading-[27.65px] px-[7.9px] overflow-hidden font-bold text-gray-600">
-      ...
-    </div>
-  );
-}
-
 export const plyToTurn = (ply: number): number => Math.floor((ply - 1) / 2) + 1;
 
 export const renderIndex = (ply: number, withDots?: boolean): string =>
   plyToTurn(ply) + (withDots ? (ply % 2 === 1 ? '.' : '...') : '');
 
-function IndexNode(ply: number) {
-  return (
-    <div className="index self-stretch flex items-center self-start basis-[13%] justify-center border-r bg-[#f9f9f9] text-[#999]">
-      {/* {renderIndex(ply, true)} */}
-      {ply}
-    </div>
-  );
+/** the move-number gutter cell that opens a mainline row */
+function IndexCell({ ply }: { ply: number }) {
+  return <div className="index">{renderIndex(ply, false)}</div>;
 }
 
-function RenderMainlineMove({ ctx, node, opts }: { ctx: Ctx; node: TrainableNode; opts: Opts }) {
-  // console.log("delete node F", deleteNode);
-  const { showMenu, contextSelectedPath } = useAppContextMenu();
-  const jump = useTrainerStore((s) => s.jump);
-
-  const path = opts.parentPath + node.data.id;
-  const selectedPath = useTrainerStore.getState().selectedPath;
-
-  const isContextSelected = path === contextSelectedPath;
-  const activeClass = path === selectedPath ? 'bg-brand-blue rounded-md active' : '';
-
-  const { repertoire, selectedChapterId } = useTrainerStore.getState();
-  const chapter = repertoire.find((c) => c.uuid === selectedChapterId);
-  if (!chapter) return;
-
-  const nodeFromPath = nodeAtPath(chapter.root, path);
-
-  const items = useMoveContextMenuItems(path, nodeFromPath.data);
-
-  return (
-    <div
-      data-path={path}
-      className={`move items-center self-start flex shadow-sm basis-[43.5%] shrink-0 grow-0
-        leading-[27.65px] px-[7.9px] pr-[4.74px] overflow-hidden font-bold
-        hover:bg-brand-blue-light hover:rounded-md select-none cursor-pointer
-        text-gray-700
-        ${activeClass} ${isContextSelected ? 'bg-orange-400' : ''} `}
-      onContextMenu={(e) => showMenu(e, items, path)}
-    >
-      {node.data.san}
-    </div>
-  );
+/** placeholder holding a colour's slot so the next move lands in its own column */
+function EmptyMove() {
+  return <div className="move empty">...</div>;
 }
 
-function RenderVariationMove({ ctx, node, opts }: { ctx: Ctx; node: TrainableNode; opts: Opts }) {
+function MoveNode({ node, args }: { node: TrainableNode; args: Args }) {
   const { showMenu, contextSelectedPath } = useAppContextMenu();
+  const selectedPath = useTrainerStore((s) => s.selectedPath);
+  const { isMainline, parentNode, parenthetical } = args;
+
+  const path = args.parentPath + node.data.id;
+  const items = useMoveContextMenuItems(path, node.data);
+
+  // Mainline moves get their number from the gutter cell; sideline moves carry
+  // it inline — always for white, and for black whenever the move opens a
+  // branch that isn't the first of a parenthesised pair.
+  const withIndex =
+    !isMainline &&
+    (node.data.ply % 2 === 1 ||
+      (parentNode.children.length > 1 && (!parenthetical || parentNode.children[0] !== node)));
+
+  const classes = [
+    'move',
+    isMainline ? '' : 'variation',
+    path === selectedPath ? 'active' : '',
+    path === contextSelectedPath ? 'is-context-selected' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
-  const path = opts.parentPath + node.data.id;
-
-  const { repertoire, selectedChapterId } = useTrainerStore.getState();
-  const chapter = repertoire.find((c) => c.uuid === selectedChapterId);
-  if (!chapter) return;
-
-  const nodeFromPath = nodeAtPath(chapter.root, path);
-  const items = useMoveContextMenuItems(path, nodeFromPath.data);
-  const withIndex = opts.withIndex || node.data.ply % 2 === 1;
   const content = (
     <>
-      {/* // TODO here */}
-      {/* {withIndex && `${Math.floor(node.ply / 2) + 1}. `} */}
-      {withIndex && renderIndex(node.data.ply, true)}
+      {withIndex && <span className="index">{renderIndex(node.data.ply, true)}</span>}
       {node.data.san}
     </>
   );
-  // const classes = nodeClasses(ctx, node, path);
-
-  const selectedPath = useTrainerStore.getState().selectedPath;
-  const activeClass = path == selectedPath ? 'bg-brand-blue rounded-md active' : '';
+  const onContextMenu = (e: React.MouseEvent) => showMenu(e, items, path, node.data.san);
 
-  return (
-    <span
-      data-path={path}
-      className={`move variation inline-block max-w-full align-top
-  whitespace-normal break-words
-  px-[7.9px] pr-[4.74px]
-  hover:bg-brand-blue-light hover:rounded-md select-none cursor-pointer ${activeClass}
-  text-gray-700
-  `}
-      onContextMenu={(e) => showMenu(e, items, path)}
-    >
+  return isMainline ? (
+    <div data-path={path} className={classes} onContextMenu={onContextMenu}>
+      {content}
+    </div>
+  ) : (
+    <span data-path={path} className={classes} onContextMenu={onContextMenu}>
       {content}
     </span>
   );
 }
 
-type RenderMainlineMoveOfProps = {
-  ctx: Ctx;
-  node: TrainableNode;
-  opts: Opts;
-};
+/**
+ * A block of sidelines branching off `args.parentNode`. Renders as parentheses
+ * when the parent said so, otherwise as a stack of connected `.line` rows.
+ */
+function Lines({ ctx, nodes, args }: { ctx: Ctx; nodes: TrainableNode[]; args: Args }) {
+  if (!nodes.length) return null;
+
+  const lineArgs: Args = {
+    parentPath: args.parentPath,
+    parentNode: args.parentNode,
+    isMainline: false,
+  };
 
-function RenderMoveOf({ ctx, node, opts }: { ctx: Ctx; node: TrainableNode; opts: Opts }) {
-  return opts.isMainline ? (
-    <RenderMainlineMove ctx={ctx} node={node} opts={opts} />
-  ) : (
-    <RenderVariationMove ctx={ctx} node={node} opts={opts} />
-  );
-}
+  if (!args.isMainline && args.parenthetical)
+    return (
+      <span className="inline">
+        <SidelineNodes ctx={ctx} nodes={nodes} args={lineArgs} />
+      </span>
+    );
 
-function RenderInline({ ctx, node, opts }: { ctx: Ctx; node: TrainableNode; opts: Opts }) {
   return (
-    <span className="inline">
-      {'( '}
-      <RenderMoveAndChildren
-        ctx={ctx}
-        node={node}
-        opts={{
-          ...opts,
-          withIndex: true,
-          isMainline: false,
-          inline: undefined,
-        }}
-      />
-      {' ) '}
-    </span>
+    <div className={`lines${nodes[1] ? '' : ' single'}`}>
+      {nodes.map((n) => (
+        <div className="line" key={n.data.id}>
+          <div className="branch" />
+          <SidelineNodes ctx={ctx} nodes={[n]} args={lineArgs} />
+        </div>
+      ))}
+    </div>
   );
 }
 
-function RenderMoveAndChildren({ ctx, node, opts }: { ctx: Ctx; node: TrainableNode; opts: Opts }) {
-  const path = opts.parentPath + node.data.id;
-  if (opts.truncate === 0)
-    return (
-      <div>
-        <span>[...]</span>
-      </div>
-    );
+/**
+ * One sideline: the head move, then its continuation, then its siblings —
+ * except when the parent is parenthetical, in which case the siblings come
+ * first so they read as `1. e4 (1. d4) 1... e5`.
+ */
+function SidelineNodes({ ctx, nodes, args }: { ctx: Ctx; nodes: TrainableNode[]; args: Args }) {
+  const [child, ...siblings] = nodes;
+  if (!child) return null;
+
+  const path = args.parentPath + child.data.id;
+  const children = ctx.visibleChildren(child);
+  const childArgs: Args = {
+    parentPath: path,
+    parentNode: child,
+    isMainline: false,
+    parenthetical: isParenthetical(children),
+  };
+  const siblingLines = <Lines ctx={ctx} nodes={siblings} args={args} />;
 
   return (
     <>
-      <RenderMoveOf ctx={ctx} node={node} opts={opts} />
-
-      {/* {RenderInlineCommentsOf(ctx, node, path)} */}
-      <RenderInlineCommentsOf ctx={ctx} node={node} path={path}></RenderInlineCommentsOf>
-      {opts.inline && <RenderInline ctx={ctx} node={opts.inline} opts={opts} />}
-      <RenderChildren
-        ctx={ctx}
-        node={node}
-        opts={{
-          parentPath: path,
-          isMainline: opts.isMainline,
-          depth: opts.depth,
-          truncate: opts.truncate ? opts.truncate - 1 : undefined,
-        }}
-      />
+      <MoveNode node={child} args={args} />
+      <RenderInlineCommentsOf ctx={ctx} node={child} path={path} />
+      {args.parenthetical && siblingLines}
+      {children.length < 2 || childArgs.parenthetical ? (
+        <SidelineNodes ctx={ctx} nodes={children} args={childArgs} />
+      ) : (
+        <Lines ctx={ctx} nodes={children} args={childArgs} />
+      )}
+      {!args.parenthetical && siblingLines}
     </>
   );
 }
 
-export function RenderLines({ ctx, parentNode, nodes, opts }) {
-  // At high depth, render variations inline with parens instead of nested branches
-  if (opts.depth >= MAX_BRANCH_DEPTH) {
-    return (
-      <span className="lines inline">
-        {nodes.map((n) => (
-          <span className="inline" key={n.data.id}>
-            {'('}
-            <RenderMoveAndChildren
-              ctx={ctx}
-              node={n}
-              opts={{
-                parentPath: opts.parentPath,
-                isMainline: false,
-                depth: opts.depth + 1,
-                withIndex: true,
-              }}
-            />
-            {')'}
-          </span>
-        ))}
-      </span>
-    );
-  }
+/**
+ * The mainline, laid out as a flat run of flex cells. `nodes[0]` continues the
+ * mainline; the rest are sidelines that get pushed into an `.interrupt`.
+ */
+function ColumnNodes({ ctx, nodes, args }: { ctx: Ctx; nodes: TrainableNode[]; args: Args }) {
+  const [child, ...siblings] = nodes;
+  if (!child) return null;
+
+  const childPath = args.parentPath + child.data.id;
+  const isWhite = child.data.ply % 2 === 1;
+  const children = ctx.visibleChildren(child);
+  // With comments hidden a commented move no longer breaks the mainline row,
+  // so the empty cells and re-opened index around the interrupt go away too.
+  const interrupted = siblings.length > 0 || (ctx.showComments && !!child.data.comment);
 
   return (
-    <div className={`lines ${!nodes[1] ? 'single' : ''}`}>
-      {nodes.map((n) => {
-        return (
-          <div className="line block relative ps-[7px]" key={n.data.id}>
-            <div className="branch" />
-            <RenderMoveAndChildren
-              ctx={ctx}
-              node={n}
-              opts={{
-                parentPath: opts.parentPath,
-                isMainline: false,
-                depth: opts.depth + 1,
-                withIndex: true,
-              }}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function RenderChildren({ ctx, node, opts }: { ctx: Ctx; node: TrainableNode; opts: Opts }) {
-  const { repertoire, selectedChapterId } = useTrainerStore.getState();
-  const chapter = repertoire.find((c) => c.uuid === selectedChapterId);
-  if (!chapter) return null;
-  const root = chapter.root;
-
-  const pathToTrain = useTrainerStore.getState().trainableContext?.startingPath || '';
-  const path: TrainableNode[] = getNodeList(root, pathToTrain);
-
-  const method = useTrainerStore.getState().trainingMethod;
-
-  // console.log('node', node);
-  const ply = node.data.ply;
-  const cs = node.children.filter((x, i) => {
-    // console.log('x.san', x.san, 'vs', path[ply + 1].san);
-    return (
-      method == 'edit' ||
-      (ply < path.length - 1 && x.data.san == path[ply + 1].data.san && (ctx.showComputer || !x.comp))
-    );
-  });
-  const main = cs[0];
-  if (!main) return null;
-
-  if (opts.isMainline) {
-    const isWhite = main.data.ply % 2 === 1;
-
-    //TODO why is this different than lichess ?  math.floor(..) line
-    //TODO force variation?
-    if (!cs[1] && !main.data.comment && true) {
-      return (
+    <>
+      {isWhite && <IndexCell ply={child.data.ply} />}
+      <MoveNode node={child} args={args} />
+      {interrupted && (
         <>
-          {isWhite && IndexNode(Math.floor(main.data.ply / 2) + 1)}
-          <RenderMoveAndChildren
-            ctx={ctx}
-            node={main}
-            opts={{
-              parentPath: opts.parentPath,
-              isMainline: true,
-              depth: opts.depth,
-            }}
-          />
+          {isWhite && <EmptyMove />}
+          <div className="interrupt">
+            <RenderMainlineCommentsOf ctx={ctx} node={child} path={childPath} />
+            <Lines ctx={ctx} nodes={siblings} args={args} />
+          </div>
+          {isWhite && children.length > 0 && (
+            <>
+              <IndexCell ply={child.data.ply} />
+              <EmptyMove />
+            </>
+          )}
         </>
-      );
-    }
-
-    const mainChildren = (
-      <RenderChildren
-        ctx={ctx}
-        node={main}
-        opts={{
-          parentPath: opts.parentPath + main.data.id,
-          isMainline: true,
-          depth: opts.depth,
-        }}
-      />
-    );
-    const mainHasChildren = main.children[0];
-    // Not entering here
-    return (
-      <>
-        {isWhite && IndexNode(Math.floor(main.data.ply / 2) + 1)}
-        {!main.forceVariation && (
-          <RenderMoveOf
-            ctx={ctx}
-            node={main}
-            opts={{
-              parentPath: opts.parentPath,
-              isMainline: true,
-              depth: opts.depth,
-            }}
-          />
-        )}
-
-        {isWhite && false && <EmptyMove />}
-        <div className="interrupt flex-[0_0_100%] max-w-full bg-zebra border-t border-b border-border shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),_inset_-1px_-1px_3px_rgba(255,255,255,0.6)]">
-          {/* {commentTags} */}
-          {/* ctx, main, conceal, true, opts.parentPath + main.id */}
-          <RenderMainlineCommentsOf
-            ctx={ctx}
-            node={main}
-            withColor={true}
-            path={opts.parentPath + main.data.id}
-          />
-          {/* ^^^^ COMPONENT */}
-          <RenderLines
-            ctx={ctx}
-            parentNode={node}
-            nodes={cs.slice(1)}
-            opts={{
-              parentPath: opts.parentPath,
-              isMainline: !main.forceVariation,
-              depth: opts.depth,
-              // noConceal: true,
-            }}
-          />
-        </div>
-        {isWhite && mainHasChildren && IndexNode(Math.floor(main.data.ply / 2) + 1)}
-        {isWhite && mainHasChildren && <EmptyMove />}
-        {mainChildren}
-      </>
-    );
-  }
-
-  if (!cs[1]) {
-    return <RenderMoveAndChildren ctx={ctx} node={cs[0]} opts={opts} />;
-  }
-
-  // Inline rendering: exactly 2 branches, second branch has no sub-branching within 6 moves
-  if (cs[1] && !cs[2] && !hasBranching(cs[1], 6)) {
-    return (
-      <RenderMoveAndChildren
+      )}
+      <ColumnNodes
         ctx={ctx}
-        node={cs[0]}
-        opts={{
-          parentPath: opts.parentPath,
-          isMainline: false,
-          depth: opts.depth,
-          inline: cs[1],
-        }}
+        nodes={children}
+        args={{ parentPath: childPath, parentNode: child, isMainline: true }}
       />
-    );
-  }
-
-  return <RenderLines ctx={ctx} parentNode={node} nodes={cs} opts={opts} />;
+    </>
+  );
 }
 
 function BottomCommentEditor() {
@@ -647,7 +450,7 @@ function BottomCommentEditor() {
   if (!node) return null;
 
   return (
-    <div className="shrink-0 bg-white border-t border-gray-200 px-2 py-2">
+    <div className="tree-editor-dock">
       <CommentEditor key={editingPath} path={editingPath} initial={node.data.comment ?? ''} />
     </div>
   );
@@ -665,12 +468,12 @@ function ChildMoveButtons() {
   if (!node || node.children.length <= 1) return null;
 
   return (
-    <div className="shrink-0 bg-white border-t border-gray-200 px-2 py-1.5">
-      <div className="flex flex-wrap gap-1.5 justify-start">
+    <div className="tree-child-moves">
+      <div className="tree-child-moves-row">
         {node.children.map((child) => (
           <button
             key={child.data.id}
-            className="px-2.5 py-1 text-sm font-semibold rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-blue-50 hover:border-brand-blue hover:text-brand-blue transition shadow-sm basis-[calc(50%-0.1875rem)]"
+            className="tree-child-move"
             onClick={() => jump(selectedPath + child.data.id)}
           >
             {renderIndex(child.data.ply, true)} {child.data.san}
@@ -682,10 +485,13 @@ function ChildMoveButtons() {
 }
 
 //TODO function should be part of state
-export default function PgnTree({ setActiveMoveId }) {
+export default function PgnTree({ setActiveMoveId, showComments = true }) {
   const jump = useTrainerStore((s) => s.jump);
   const selectedPath = useTrainerStore((s) => s.selectedPath);
   const trainingMethod = useTrainerStore((s) => s.trainingMethod);
+  const repertoire = useTrainerStore((s) => s.repertoire);
+  const selectedChapterId = useTrainerStore((s) => s.selectedChapterId);
+  const trainableContext = useTrainerStore((s) => s.trainableContext);
   const scrollRef = useRef<HTMLDivElement>(null);
   const [editingPath, setEditingPath] = useState<string | null>(null);
 
@@ -725,64 +531,67 @@ export default function PgnTree({ setActiveMoveId }) {
       const path = el.getAttribute('data-path');
       if (path) {
         setActiveMoveId(el.id);
-        // ctrl.userJump(path); // your navigation logic
-        // ctrl.redraw();
-        // console.log('PATH', path);
         jump(path);
-
         break;
       }
       el = el.parentElement!;
     }
   };
 
-  const { repertoire, selectedChapterId } = useTrainerStore.getState();
   const chapter = repertoire.find((c) => c.uuid === selectedChapterId);
   if (!chapter) return;
-  let root = chapter.root;
+  const root = chapter.root;
   if (!root) return;
-  // console.log("ROOT", root);
-  // console.log('root path');
-  // TODO conditionally use path or root, depending on context
 
-  // TODO ???
-  // TODO handle multiple root nodes, possibly upon PGN import... (dont allow chapter w/ multiple roots)
+  // Outside of edit mode only the line being trained is on screen, so children
+  // are filtered down to the one that continues it.
+  const trainingLine: TrainableNode[] = getNodeList(root, trainableContext?.startingPath || '');
+  const visibleChildren = (node: TrainableNode): TrainableNode[] => {
+    if (trainingMethod === 'edit') return node.children;
+    const ply = node.data.ply;
+    if (ply >= trainingLine.length - 1) return [];
+    return node.children.filter((c) => c.data.san === trainingLine[ply + 1].data.san);
+  };
 
   const ctx: Ctx = {
     currentPath: '',
     truncateComments: true,
+    showComments,
+    visibleChildren,
   };
 
-  //TODO should be false
-  // const blackStarts = (root.data.ply & 1) === 1;
+  const blackStarts = (root.data.ply & 1) === 1;
+
   return (
     <CommentEditContext.Provider value={commentEditValue}>
-    <ContextMenuProvider>
-      <div className="relative h-full flex flex-col bg-gray-100">
-        <div
-          ref={scrollRef}
-          onMouseDown={handleMouseDown}
-          className="tview2 tview2-column tree-scroll overflow-y-auto flex flex-row flex-wrap items-start bg-white min-h-0"
-        >
-          {root.data.comment && (
-            <div className="interrupt flex-[0_0_100%] max-w-full bg-zebra border-t border-b border-border shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),_inset_-1px_-1px_3px_rgba(255,255,255,0.6)]">
-              <RenderMainlineCommentsOf
-                ctx={ctx}
-                node={root}
-                withColor={false}
-                path={''}
-              ></RenderMainlineCommentsOf>
-            </div>
-          )}
-          {/* {blackStarts && root.ply}
-          {blackStarts && <EmptyMove />} */}
-          <RenderChildren ctx={ctx} node={root} opts={{ parentPath: '', isMainline: true, depth: 0 }} />
+      <ContextMenuProvider>
+        <div className="tree-panel">
+          <div
+            ref={scrollRef}
+            onMouseDown={handleMouseDown}
+            className="tview2 tview2-column tree-scroll tree-body"
+          >
+            {showComments && root.data.comment && (
+              <div className="interrupt">
+                <RenderMainlineCommentsOf ctx={ctx} node={root} path={''} />
+              </div>
+            )}
+            {blackStarts && (
+              <>
+                <IndexCell ply={root.data.ply} />
+                <EmptyMove />
+              </>
+            )}
+            <ColumnNodes
+              ctx={ctx}
+              nodes={visibleChildren(root)}
+              args={{ parentPath: '', parentNode: root, isMainline: true }}
+            />
+          </div>
+          <BottomCommentEditor />
+          <ChildMoveButtons />
         </div>
-        <BottomCommentEditor />
-        <ChildMoveButtons />
-      </div>
-    </ContextMenuProvider>
+      </ContextMenuProvider>
     </CommentEditContext.Provider>
   );
 }
-//TODO what is a comment tag?
diff --git a/frontend/src/components/pgn/TreeControls.css b/frontend/src/components/pgn/TreeControls.css
new file mode 100644
index 0000000..41c2e6d
--- /dev/null
+++ b/frontend/src/components/pgn/TreeControls.css
@@ -0,0 +1,37 @@
+/* first / prev / next / last navigation under the move tree. Unlike the
+   controls under the board — one recessed track holding borderless buttons —
+   each arrow here carries its own recessed chip and the track itself doesn't
+   paint, so the page shows through as a white gutter between them. */
+#pgn-control {
+  align-self: center;
+  margin: 0.75rem auto;
+  padding: 0;
+  gap: 0.5rem;
+  background: transparent;
+}
+
+/* the wider padding gives the arrows room inside their own chips */
+.pgn-control-btn {
+  padding-inline: 1rem;
+  border-radius: 0.375rem;
+  background: var(--c-recessed);
+  color: var(--c-gray-600);
+}
+
+/* the chips are already the recessed gray, so hover darkens instead of
+   lifting to white the way the board controls do */
+.pgn-control-btn:hover:not(:disabled) {
+  color: var(--c-gray-900);
+  background: var(--c-gray-200);
+}
+
+.pgn-control-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+/* An arrow is either a live gray chip or nothing at all — no grayed-out chip
+   in between. `visibility` rather than `display` so the button keeps its slot
+   and the remaining arrows stay put instead of sliding as you walk the tree. */
+.pgn-control-btn:disabled {
+  visibility: hidden;
+}
diff --git a/frontend/src/components/pgn/TreeControls.tsx b/frontend/src/components/pgn/TreeControls.tsx
index 2dd7deb..3c36858 100644
--- a/frontend/src/components/pgn/TreeControls.tsx
+++ b/frontend/src/components/pgn/TreeControls.tsx
@@ -4,22 +4,10 @@
 // put logic into state
 // see en-crossaint
 
-import {
-  ArrowBigLeftDashIcon,
-  ArrowBigLeftIcon,
-  ArrowBigRightDashIcon,
-  ArrowBigRightIcon,
-  ArrowLeftToLineIcon,
-  ArrowRightToLineIcon,
-  ChevronFirst,
-  ChevronLast,
-  ChevronLeft,
-  ChevronRight,
-  MoveLeftIcon,
-  MoveRightIcon,
-} from 'lucide-react';
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react';
 import { useTrainerStore } from '../../store/state';
 import { fromNodeList, init } from '../../util/path';
+import './TreeControls.css';
 const PgnControls = () => {
   const setSelectedPath = useTrainerStore((state) => state.setSelectedPath);
   const setSelectedNode = useTrainerStore((state) => state.setSelectedNode);
@@ -68,22 +56,39 @@ const PgnControls = () => {
   const atEnd =
     trainingMethod === 'edit' ? !selectedNode?.children?.[0] : selectedPath.length >= trainingPath.length;
 
-  const btnClass = (disabled: boolean) =>
-    `px-1 rounded-md ${disabled ? 'bg-gray-100 text-gray-300 cursor-default' : 'bg-gray-200 text-gray-700'}`;
-
   return (
-    <div id="pgn-control" className="flex justify-between w-1/2 mt-3 items-center m-auto py-2">
-      <button onClick={first} disabled={atStart} className={btnClass(atStart)}>
-        {<ArrowBigLeftDashIcon size={30} />}
+    <div id="pgn-control" className="control-tab">
+      <button
+        onClick={first}
+        disabled={atStart}
+        aria-label="First move"
+        className="control-tab-btn pgn-control-btn"
+      >
+        <ChevronFirst size={20} />
       </button>
-      <button onClick={prev} disabled={atStart} className={btnClass(atStart)}>
-        {<ArrowBigLeftIcon size={30} />}
+      <button
+        onClick={prev}
+        disabled={atStart}
+        aria-label="Previous move"
+        className="control-tab-btn pgn-control-btn"
+      >
+        <ChevronLeft size={20} />
       </button>
-      <button onClick={next} disabled={atEnd} className={btnClass(atEnd)}>
-        {<ArrowBigRightIcon size={30} />}
+      <button
+        onClick={next}
+        disabled={atEnd}
+        aria-label="Next move"
+        className="control-tab-btn pgn-control-btn"
+      >
+        <ChevronRight size={20} />
       </button>
-      <button onClick={last} disabled={atEnd} className={btnClass(atEnd)}>
-        {<ArrowBigRightDashIcon size={30} />}
+      <button
+        onClick={last}
+        disabled={atEnd}
+        aria-label="Last move"
+        className="control-tab-btn pgn-control-btn"
+      >
+        <ChevronLast size={20} />
       </button>
     </div>
   );
diff --git a/frontend/src/components/repertoire/Repertoire.css b/frontend/src/components/repertoire/Repertoire.css
new file mode 100644
index 0000000..e676339
--- /dev/null
+++ b/frontend/src/components/repertoire/Repertoire.css
@@ -0,0 +1,431 @@
+/* Chapter list panel. The card frame and the header row use the shared
+   .panel-* chrome from layout.css; everything below is list-specific.
+   layout.css also owns #repertoire's container query, which drops the
+   .chapter-btn-label icons when the card gets narrow. */
+
+.repertoire-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
+  background: var(--c-surface);
+}
+
+/* Closes the header off from the chapters scrolling under it. Tighter gaps
+   than the shared chrome: this header carries three labelled actions plus the
+   sync marker, so it runs out of room before any other panel's does. */
+.repertoire-card .panel-header {
+  gap: 0.375rem;
+  border-bottom: 1px solid var(--c-hairline);
+}
+
+.repertoire-card .panel-action {
+  gap: 0.1875rem;
+  padding: 0.375rem 0.25rem;
+}
+
+/* Header icon doubles as a "back to my repertoire" button while viewing
+   someone else's, so it needs a hover state the plain .panel-icon lacks. */
+.repertoire-back-btn:hover {
+  color: var(--c-gray-900);
+  background: var(--c-gray-300);
+}
+
+/* The primary action in the header: a solid blue button rather than the bare
+   icon treatment the other .panel-action buttons get. Doubled class beats
+   .panel-action, which layout.css defines later in the cascade. */
+.panel-action.repertoire-add-btn {
+  padding: 0.375rem 0.625rem;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  font-weight: 700;
+}
+
+.panel-action.repertoire-add-btn:hover:not(:disabled) {
+  background: var(--c-blue-800);
+  color: var(--c-surface);
+}
+
+/* Nothing imported yet — ring the add button so the empty state has an
+   obvious next step. */
+.repertoire-add-btn.is-empty {
+  box-shadow:
+    0 0 0 2px var(--c-surface),
+    0 0 0 6px rgb(250 204 21 / 0.5);
+}
+
+.repertoire-sync {
+  flex-shrink: 0;
+  margin-left: auto;
+  display: flex;
+}
+
+/* Same blue pairing as everywhere else: full blue when synced, the light
+   blue when it isn't. */
+.repertoire-sync-online {
+  color: var(--c-brand-blue);
+}
+
+.repertoire-sync-offline {
+  color: var(--c-brand-blue-light);
+}
+
+/* ---------- scrolling chapter list ---------- */
+/* .repertoire-scroll (in style.css) supplies the scrollbar treatment. */
+.repertoire-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+  padding-bottom: 0.5rem;
+}
+
+/* Square and unframed — the rows run edge to edge inside the card, with only
+   the hairlines between them separating one from the next. */
+.repertoire-group {
+  margin: 0;
+  background: var(--c-surface);
+}
+
+/* a side with no chapters would otherwise leave an empty bordered sliver */
+.repertoire-group:empty {
+  display: none;
+}
+
+/* ---------- one chapter row ---------- */
+/* Hairline rules separate the rows. Deliberately a third of --border-w (the
+   2px frame around the cards): these divide items *inside* one surface, so
+   they have to read as lighter than anything that outlines a surface. */
+.chapter-row,
+.chapter-actions {
+  border-bottom: 1px solid var(--c-hairline);
+}
+
+/* The rows are the group's direct children (ChapterRow renders a fragment),
+   so this is the last row in a colour — its bottom edge is the group's, which
+   doesn't need a second line. */
+.repertoire-group > :last-child {
+  border-bottom: none;
+}
+
+/* Selection is a gray band running the row's full width — square, like every
+   row. Hover sits a step lighter so the two never read as the same state. */
+.chapter-row.is-selected {
+  background: var(--c-gray-100);
+}
+
+/* Everything in a row is centered on one axis — index, name, count pill, the
+   two badges and the chevron. The padding is symmetric so the row itself sits
+   centered in the card, with the same air on each side. */
+.chapter {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+}
+
+/* Darker than the selected row's fill: hover is momentary and under the
+   pointer, so it can be the stronger of the two without shouting. */
+.chapter:hover {
+  background: var(--c-gray-200);
+}
+
+/* The side the chapter is trained as, between the row number and the name:
+   outline king for white, filled for black. This is what the per-side group
+   headers used to say, moved onto the rows themselves. */
+.chapter-side {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+  color: var(--c-gray-800);
+}
+
+.chapter-side svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Row number — same type as the chapter name it precedes, in a fixed column
+   so the name starts at the same x whether the number is one digit or two.
+   Right-aligned, so the digits themselves line up as a column too. */
+.chapter-index {
+  flex-shrink: 0;
+  min-width: 1.75rem;
+  padding-right: 0.5rem;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1;
+  color: var(--c-gray-900);
+}
+
+.chapter-title {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+.chapter-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1;
+  color: var(--c-gray-700);
+}
+
+.chapter-name.is-selected {
+  font-weight: 600;
+  color: var(--c-gray-900);
+}
+
+/* the chapter's move count — a small grey pill so it reads as metadata
+   attached to the name rather than part of it */
+.chapter-size {
+  flex-shrink: 0;
+  /* no leading of its own, and even padding: the digits sit centered in the
+     capsule, which is itself centered against the name */
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  background: var(--c-gray-200);
+  font-family: var(--font-roboto);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--c-gray-600);
+}
+
+/* due/unseen count badges — bare numbers, tightly packed. Which is which is
+   carried by the fill color alone. */
+.chapter-count {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 0.25rem;
+  padding: 0 0.375rem;
+  gap: 0.0625rem;
+  border-radius: 9999px;
+  font-family: var(--font-roboto);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Light blue = still to learn, blue = due for recall — the same two fills the
+   progress bar above the board uses, at full strength rather than tinted. */
+.chapter-count-unseen {
+  background: var(--c-brand-blue-light);
+  color: var(--c-surface);
+}
+
+.chapter-count-due {
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+}
+
+.chapter-btn-label {
+  display: flex;
+}
+
+/* When the card is narrow (e.g. the 2-column middle layout) drop the icon /
+   text label on each row and header action so only the count remains.
+   #repertoire establishes the `repertoire` container in layout.css.
+   The threshold covers the longest label set the header can carry — "sharing"
+   is two characters wider than the "share" this was first tuned for. */
+@container repertoire (max-width: 380px) {
+  .chapter-btn-label {
+    display: none;
+  }
+}
+
+/* Disclosure chevron at the end of the row; click opens the chapter's actions
+   row beneath it. Kept faint until pointed at so it reads as an affordance,
+   not a control. */
+.chapter-menu {
+  flex-shrink: 0;
+  margin-left: auto;
+  display: flex;
+}
+
+.chapter-menu-btn {
+  display: flex;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  color: var(--c-gray-400);
+  transition:
+    color 150ms,
+    background 150ms,
+    transform 150ms;
+}
+
+.chapter-menu-btn:hover {
+  color: var(--c-gray-800);
+  background: var(--c-recessed);
+}
+
+/* Open: the chevron turns to point down at the row it opened, and stays lit so
+   it's obvious which chapter the actions below belong to. */
+.chapter-menu-btn.is-open {
+  color: var(--c-gray-900);
+  background: var(--c-gray-200);
+  transform: rotate(90deg);
+}
+
+/* ---------- the chapter's actions row ----------
+   Opened by the chevron, this is a real row in the list rather than a layer
+   over it: nothing is overlaid, and the bottom chapters can't have their menu
+   clipped by the list's scroll container. Its contents start at the same left
+   edge as the chapters above. */
+.chapter-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  /* the blue edge ties the row to the chapter it belongs to and marks where
+     the list's own rows resume below it */
+  border-left: 3px solid var(--c-brand-blue);
+  background: var(--c-gray-50);
+}
+
+/* Solid buttons, not bare menu items — this is a row in the list, so the two
+   actions have to look like things you press. Each is filled with the color it
+   would otherwise only have lettered in. */
+.chapter-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.375rem;
+  background: var(--c-brand-blue);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: var(--c-surface);
+  transition:
+    background 150ms,
+    filter 150ms;
+}
+
+.chapter-action-btn:hover {
+  filter: brightness(1.1);
+}
+
+.chapter-action-btn.is-danger {
+  background: var(--c-red-600);
+}
+
+/* ---------- inline rename / delete ----------
+   Both actions swap the row's contents rather than opening a dialog, so they
+   take the full width the row already has. */
+.chapter-action-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.chapter-action-rename {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.chapter-action-rename input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.25rem 0.375rem;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--c-gray-800);
+}
+
+.chapter-action-rename input:focus {
+  outline: none;
+  border-color: var(--c-brand-blue);
+}
+
+/* Fixed square so a long name in the flexible input can never squeeze the
+   button down to nothing, and an explicitly sized icon so the check doesn't
+   depend on the size prop surviving the svg reset. */
+.chapter-action-confirm {
+  flex: 0 0 auto;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  background: var(--c-brand-blue);
+  color: var(--c-surface);
+  transition: all 150ms;
+}
+
+.chapter-action-confirm svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.chapter-action-confirm:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+/* Nothing to save yet. Dimmed rather than greyed out — grey-on-grey made the
+   check read as missing instead of inactive. */
+.chapter-action-confirm:disabled {
+  background: rgb(59 130 246 / 0.15);
+  color: var(--c-brand-blue);
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.chapter-action-error {
+  font-size: 0.75rem;
+  color: var(--c-red-600);
+}
+
+.chapter-action-warning {
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  color: var(--c-gray-700);
+}
+
+.chapter-action-confirm-row {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.chapter-action-confirm-yes,
+.chapter-action-confirm-no {
+  flex: 1;
+  padding: 0.3125rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  transition: all 150ms;
+}
+
+.chapter-action-confirm-yes {
+  background: var(--c-red-600);
+  color: var(--c-surface);
+}
+
+.chapter-action-confirm-yes:hover {
+  background: var(--c-red-700);
+}
+
+.chapter-action-confirm-no {
+  border: 1px solid var(--c-gray-300);
+  color: var(--c-gray-600);
+}
+
+.chapter-action-confirm-no:hover {
+  background: var(--c-recessed);
+}
\ No newline at end of file
diff --git a/frontend/src/components/repertoire/Repertoire.tsx b/frontend/src/components/repertoire/Repertoire.tsx
index 480a29f..4724db7 100644
--- a/frontend/src/components/repertoire/Repertoire.tsx
+++ b/frontend/src/components/repertoire/Repertoire.tsx
@@ -1,40 +1,52 @@
 //TODO repertoire and repertoire section in same file
 
+import { FaChessKing, FaRegChessKing } from 'react-icons/fa6';
 import {
   ArrowLeftIcon,
   BookOpenIcon,
+  CheckIcon,
   BookPlus,
+  ChevronRightIcon,
   DownloadIcon,
   FilePlus2Icon,
+  Globe,
   LucideCloudOff,
   LucideCloudUpload,
-  LucideGraduationCap,
-  LucideHistory,
   LucideRepeat,
   LucideRepeat2,
   LucideUpload,
+  PencilIcon,
   PlusIcon,
-  Settings2Icon,
-  SettingsIcon,
+  TrashIcon,
 } from 'lucide-react';
 import { useStore } from 'zustand';
 import { useTrainerStore } from '../../store/state';
-import EditChapterModal from '../modals/EditChapterModal';
 import DownloadModal from '../modals/DownloadModal';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Chapter } from '../../types/training';
 import { useAuthStore } from '../../store/auth';
 import { viewUserRepertoire } from '../../services/collaborators';
+import './Repertoire.css';
 
-export const ChapterRow = ({ entry, index, id }) => {
+export const ChapterRow = ({ entry, index }) => {
   const setSelectedChapterId = useStore(useTrainerStore, (s) => s.setSelectedChapterId);
   const clearChapterContext = useTrainerStore((s) => s.clearChapterContext);
+  const renameChapter = useTrainerStore((s) => s.renameChapter);
+  const deleteChapterAt = useTrainerStore((s) => s.deleteChapterAt);
   const updateDueCounts = useTrainerStore().updateDueCounts;
   const selectedChapterId = useTrainerStore().selectedChapterId;
-  const [editOpen, setEditOpen] = useState(false);
+  // The chapter's actions open as a row of their own directly below it, rather
+  // than as a popover. `view` is which face that row is showing; 'closed' means
+  // there is no row. Rename and delete are faces of the same row, so the whole
+  // flow stays inline in the list.
+  const [view, setView] = useState<'closed' | 'menu' | 'rename' | 'delete'>('closed');
+  const [draftName, setDraftName] = useState('');
+  const [renameError, setRenameError] = useState<string | null>(null);
   const meta = entry;
   const name = entry.name;
   const isSelected = selectedChapterId === entry.uuid;
+  const isOpen = view !== 'closed';
+  const actionsId = `chapter-actions-${entry.uuid}`;
 
   //TODO dont change if already on this chapter..
   //TODO dont clear all chapter context? maybe dont change trainingMethod
@@ -44,67 +56,183 @@ export const ChapterRow = ({ entry, index, id }) => {
     updateDueCounts();
   };
 
+  const closeMenu = () => {
+    setView('closed');
+    setRenameError(null);
+  };
+
+  const toggleMenu = () => {
+    if (isOpen) return closeMenu();
+    // always reopen on the menu itself, never on whatever panel was last used
+    setRenameError(null);
+    setView('menu');
+  };
+
+  // The row sits in the list rather than over it, so it doesn't need the
+  // click-outside / scroll / resize teardown a popover does — only Escape,
+  // which is the one dismissal a keyboard user expects to work from anywhere.
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeMenu();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [isOpen]);
+
+  const openRename = () => {
+    setDraftName(name);
+    setRenameError(null);
+    setView('rename');
+  };
+
+  const trimmedName = draftName.trim();
+  const canCommitRename = !!trimmedName && trimmedName !== name;
+
+  /** Save the pending name (if there is one) and close the menu. */
+  const commitRename = async () => {
+    if (!canCommitRename) return closeMenu();
+    setRenameError(null);
+    try {
+      await renameChapter(entry.uuid, trimmedName);
+      closeMenu();
+    } catch (err: any) {
+      // stay open on failure so the typed name isn't lost
+      setRenameError(err?.message ?? 'Failed to rename chapter.');
+    }
+  };
+
+  const handleDelete = async () => {
+    await deleteChapterAt(entry.uuid);
+    closeMenu();
+  };
+
   return (
     <React.Fragment key={index}>
-      {editOpen && (
-        <div
-          className="
-      fixed inset-0 z-40
-      bg-black/50 backdrop-blur-sm
-      flex items-center justify-center
-    "
-          onClick={() => setEditOpen(false)}
-        >
-          <div
-            className="z-50"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <EditChapterModal chapterId={entry.uuid} onClose={() => setEditOpen(false)} />
-          </div>
-        </div>
-      )}
-
       <div
         id="chapter-wrap"
         onClick={handleChangeChapter}
-        className={isSelected ? 'bg-cyan-50' : ''}
+        className={`chapter-row ${isSelected ? 'is-selected' : ''}`}
       >
-        <div className="chapter flex items-center justify-around hover:bg-cyan-50 pl-2 py-0.5">
-          <span className="font-bold pr-3 text-brand-blue flex-shrink-0">{index + 1}</span>
+        <div className="chapter">
+          <span className="chapter-index">{index + 1}</span>
+
+          {/* Outline king for white, filled for black — the same way a chess
+              diagram distinguishes the two sides. */}
+          <span className="chapter-side" title={`Trained as ${entry.trainAs}`}>
+            {entry.trainAs === 'white' ? <FaRegChessKing /> : <FaChessKing />}
+          </span>
 
-          <h3 className="text-md font-light flex flex-1 min-w-0 gap-2 whitespace-nowrap items-end">
-            <span className={`text-sm truncate leading-none ${isSelected ? 'font-bold' : ''}`}>{name}</span>
-            <span className="text-xs italic font-mono flex-shrink-0 leading-none">{meta.enabledCount}</span>
+          <h3 className="chapter-title">
+            <span className={`chapter-name ${isSelected ? 'is-selected' : ''}`}>{name}</span>
+            <span className="chapter-size">
+              {meta.enabledCount} move{meta.enabledCount === 1 ? '' : 's'}
+            </span>
           </h3>
 
+          {/* counts only — the color says which is which, the same way the
+              progress bar above the board does */}
           {entry.unseenCount > 0 && (
-            <button className="font-roboto text-sm font-medium bg-brand-blue-light/40 text-sky-700 rounded-md px-2 mr-2 flex-shrink-0 flex items-center">
-              <span className="chapter-btn-label"><LucideGraduationCap size={18}/></span>{entry.unseenCount}
+            <button className="chapter-count chapter-count-unseen" title={`Learn ${entry.unseenCount} moves`}>
+              {entry.unseenCount}
             </button>
           )}
 
           {entry.lastDueCount > 0 && (
-            <button className="font-roboto text-sm font-medium bg-brand-blue/30 text-blue-800 rounded-md px-2 mr-2 flex-shrink-0 flex items-center">
-              <span className="chapter-btn-label"><LucideHistory size={18}/> </span>{entry.lastDueCount}
+            <button className="chapter-count chapter-count-due" title={`Recall ${entry.lastDueCount} moves`}>
+              {entry.lastDueCount}
             </button>
           )}
 
-          <div
-            id="edit-chapter"
-            className="ml-auto mr-2 text-slate-500 cursor-pointer flex-shrink-0"
-            onClick={() => setEditOpen(true)}
-          >
-            <div id="icon-wrap">
-              <Settings2Icon width={20} height={20}/>
-            </div>
+          <div className="chapter-menu" onClick={(e) => e.stopPropagation()}>
+            <button
+              type="button"
+              className={`chapter-menu-btn ${isOpen ? 'is-open' : ''}`}
+              aria-expanded={isOpen}
+              aria-controls={actionsId}
+              aria-label="Chapter options"
+              onClick={toggleMenu}
+            >
+              <ChevronRightIcon width={16} height={16} />
+            </button>
           </div>
         </div>
       </div>
+
+      {/* Actions get a row of their own under the chapter instead of a
+          floating menu, so nothing overlays the list and the bottom rows
+          can't be clipped by its scroll container. */}
+      {isOpen && (
+        <div id={actionsId} className={`chapter-actions is-${view}`}>
+          {view === 'menu' && (
+            <>
+              <button type="button" className="chapter-action-btn" onClick={openRename}>
+                <PencilIcon size={14} />
+                Rename
+              </button>
+              <button
+                type="button"
+                className="chapter-action-btn is-danger"
+                onClick={() => setView('delete')}
+              >
+                <TrashIcon size={14} />
+                Delete
+              </button>
+            </>
+          )}
+
+          {view === 'rename' && (
+            <div className="chapter-action-panel">
+              <div className="chapter-action-rename">
+                <input
+                  value={draftName}
+                  onChange={(e) => setDraftName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') commitRename();
+                    if (e.key === 'Escape') closeMenu();
+                  }}
+                  aria-label="Chapter name"
+                  autoFocus
+                />
+                <button
+                  type="button"
+                  className="chapter-action-confirm"
+                  onClick={commitRename}
+                  disabled={!canCommitRename}
+                  aria-label="Save name"
+                  title="Save name"
+                >
+                  <CheckIcon size={16} />
+                </button>
+              </div>
+              {renameError && <p className="chapter-action-error">{renameError}</p>}
+            </div>
+          )}
+
+          {view === 'delete' && (
+            <div className="chapter-action-panel">
+              <p className="chapter-action-warning">Delete this chapter? This cannot be undone.</p>
+              <div className="chapter-action-confirm-row">
+                <button type="button" className="chapter-action-confirm-no" onClick={() => setView('menu')}>
+                  Cancel
+                </button>
+                <button type="button" className="chapter-action-confirm-yes" onClick={handleDelete}>
+                  Delete
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </React.Fragment>
   );
 };
 
-const Repertoire: React.FC = () => {
+type RepertoireProps = {
+  onOpenCollaborators?: () => void;
+};
+
+const Repertoire: React.FC<RepertoireProps> = ({ onOpenCollaborators }) => {
   const whiteEntries: Chapter[] = [];
   const blackEntries: Chapter[] = [];
 
@@ -126,41 +254,38 @@ const Repertoire: React.FC = () => {
   });
 
   return (
-    <div id="repertoire" className="flex flex-1 flex-col min-h-0 rounded-lg border border-gray-300 bg-white shadow-md">
+    <div id="repertoire" className="repertoire-card">
       {/* fixed header */}
-      <div id="repertoire-header" className="shrink-0 flex flex-row items-center p-3 gap-2">
+      <div className="panel-header">
         {viewingOther && authUsername ? (
           <button
             type="button"
             onClick={() => void viewUserRepertoire(authUsername)}
             aria-label="Back to my repertoire"
             title="Back to my repertoire"
-            className="shrink-0 text-gray-500 bg-gray-200 p-1 rounded hover:text-gray-700 hover:bg-gray-300 transition"
+            className="panel-icon repertoire-back-btn"
           >
-            <ArrowLeftIcon className="w-5 h-5" />
+            <ArrowLeftIcon />
           </button>
         ) : (
-          <div id="reperoire-icon-wrap" className="shrink-0 text-gray-500 bg-gray-200 p-1 rounded">
-            <BookOpenIcon className="w-5 h-5" />
+          <div id="reperoire-icon-wrap" className="panel-icon">
+            <BookOpenIcon />
           </div>
         )}
-        <div className="flex flex-col leading-none min-w-0">
-          <span className="text-lg text-gray-800 font-semibold truncate">{title}</span>
-          <span className="-mt-0.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wide">
+        <div className="panel-titles">
+          <span className="panel-title">{title}</span>
+          <span className="panel-subtitle">
             {repertoire.length} chapter{repertoire.length === 1 ? '' : 's'}
           </span>
         </div>
 
-
         <button
           type="button"
           onClick={() => setShowingAddToRepertoireMenu(true)}
           aria-label="Add to repertoire"
           title="Add to repertoire"
-          className={`shrink-0 p-1.5 rounded-md transition flex gap-1 text-sm items-center
-            text-slate-600 hover:text-slate-800 hover:bg-gray-100
-            ${isEmpty ? 'ring-4 ring-yellow-400/50 ring-offset-2 ring-offset-white' : ''}`}
-            >
+          className={`panel-action repertoire-add-btn ${isEmpty ? 'is-empty' : ''}`}
+        >
           <LucideUpload size={18} />
           <span className="chapter-btn-label">add</span>
         </button>
@@ -171,46 +296,44 @@ const Repertoire: React.FC = () => {
           disabled={isEmpty}
           aria-label="Download repertoire"
           title="Download repertoire"
-          className={`shrink-0 p-1.5 rounded-md transition flex gap-1 text-sm items-center ${
-            isEmpty
-            ? 'text-gray-300 cursor-not-allowed'
-            : 'text-slate-600 hover:text-slate-800 hover:bg-gray-100'
-          }`}
-          >
-          <DownloadIcon className="w-[18px] h-[18px]" />
+          className="panel-action"
+        >
+          <DownloadIcon />
           <span className="chapter-btn-label">download</span>
         </button>
-          {isAuth ? (
-            <span className="shrink-0 ml-auto text-green-600" title="Synced">
-              <LucideCloudUpload size={18}/>
-            </span>
-          ) : (
-            <span className="shrink-0 ml-auto text-red-600" title="Offline — changes not synced">
-              <LucideCloudOff size={18}/>
-            </span>
-          )}
+
+        {/* Sharing is a repertoire action, so it sits with the other two rather
+            than up in the app bar. */}
+        {isAuth && onOpenCollaborators && (
+          <button
+            type="button"
+            onClick={onOpenCollaborators}
+            aria-label="Share repertoire"
+            title="Share repertoire"
+            className="panel-action"
+          >
+            <Globe />
+            <span className="chapter-btn-label">sharing</span>
+          </button>
+        )}
+        {isAuth ? (
+          <span className="repertoire-sync repertoire-sync-online" title="Synced">
+            <LucideCloudUpload size={18} />
+          </span>
+        ) : (
+          <span className="repertoire-sync repertoire-sync-offline" title="Offline — changes not synced">
+            <LucideCloudOff size={18} />
+          </span>
+        )}
       </div>
-      
-      {/* ONLY THIS SCROLLS */}
-      <div
-        id="repertoire-wrap"
-        className="
-        repertoire-scroll
-        flex-1 min-h-0 overflow-y-auto pb-2
-        pr-1
-      "
-      >
-        <span className="font-semibold text-sm uppercase px-2 text-gray-600">White</span>
-        <div className="flex-row rounded-md">
-          {whiteEntries.map((entry, index) => (
-            <ChapterRow id={entry.id} entry={entry} index={index} />
-          ))}
-        </div>
 
-        <span className="font-semibold text-sm uppercase px-2 text-gray-600">Black</span>
-        <div className="flex-row rounded-md">
-          {blackEntries.map((entry, index) => (
-            <ChapterRow id={entry.id} entry={entry} index={index + whiteEntries.length} />
+      {/* ONLY THIS SCROLLS */}
+      <div id="repertoire-wrap" className="repertoire-scroll repertoire-list">
+        {/* One list rather than a section per side: each row carries its own
+            king, so the white chapters simply come first. */}
+        <div className="repertoire-group">
+          {[...whiteEntries, ...blackEntries].map((entry, index) => (
+            <ChapterRow key={entry.uuid} entry={entry} index={index} />
           ))}
         </div>
       </div>
@@ -220,4 +343,4 @@ const Repertoire: React.FC = () => {
   );
 };
 
-export default Repertoire;
+export default Repertoire;
\ No newline at end of file
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
new file mode 100644
index 0000000..cfc4863
--- /dev/null
+++ b/frontend/src/css/base.css
@@ -0,0 +1,251 @@
+/* ===========================
+   Design tokens + element reset
+
+   This file replaces what Tailwind used to provide: the `preflight` reset
+   (normalize + opinionated defaults) and the palette that the utility
+   classes encoded. Every color the app uses is named here once so the rest
+   of the stylesheets read as intent rather than hex codes.
+
+   Must be imported first (see main.tsx) — everything else expects the reset
+   to already be in place and overrides it by source order.
+   =========================== */
+
+:root {
+  /* fonts (previously tailwind.config.js -> theme.extend.fontFamily) */
+  --font-sans: 'Fira Sans', 'Roboto', sans-serif;
+  --font-roboto: 'Roboto', sans-serif;
+  --font-condensed: 'Roboto Condensed', 'Roboto', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+
+  /* Canonical app blues — source of truth is the progress bar above the
+     board (light = sky-300, dark = blue-500). */
+  --c-brand-blue: #3b82f6;
+  --c-brand-blue-light: #7dd3fc;
+
+  /* page chrome */
+  --c-page-bg: #fafafa;
+  /* not pure white: a hair of gray keeps cards from glaring against the
+     (now lighter) page, so the borders do the separating, not brightness. */
+  --c-surface: #fcfcfd;
+  --c-backdrop: rgb(0 0 0 / 0.5);
+
+  /* neutrals */
+  --c-gray-50: #f9fafb;
+  --c-gray-100: #f3f4f6;
+  --c-gray-200: #e5e7eb;
+  --c-gray-300: #d1d5db;
+  --c-gray-400: #9ca3af;
+  --c-gray-500: #6b7280;
+  --c-gray-600: #4b5563;
+  --c-gray-700: #374151;
+  --c-gray-800: #1f2937;
+  --c-gray-900: #111827;
+
+  --c-slate-200: #e2e8f0;
+  --c-slate-300: #cbd5e1;
+  --c-slate-500: #64748b;
+  --c-slate-600: #475569;
+  --c-slate-700: #334155;
+  --c-slate-800: #1e293b;
+  --c-slate-900: #0f172a;
+
+  /* accents */
+  --c-blue-50: #eff6ff;
+  --c-blue-200: #bfdbfe;
+  --c-blue-800: #1e40af;
+  --c-blue-900: #1e3a8a;
+  --c-sky-700: #0369a1;
+  --c-cyan-50: #ecfeff;
+
+  --c-green-50: #f0fdf4;
+  --c-green-200: #bbf7d0;
+  --c-green-600: #16a34a;
+  --c-green-700: #15803d;
+  --c-green-800: #166534;
+  --c-emerald-300: #6ee7b7;
+  --c-emerald-500: #10b981;
+  --c-emerald-600: #059669;
+
+  --c-red-500: #ef4444;
+  --c-red-600: #dc2626;
+  --c-red-700: #b91c1c;
+
+  --c-amber-50: #fffbeb;
+  --c-amber-300: #fcd34d;
+  --c-amber-500: #f59e0b;
+  --c-amber-600: #d97706;
+  --c-amber-900: #78350f;
+  --c-amber-950: #451a03;
+
+  --c-orange-400: #fb923c;
+  --c-yellow-400: #facc15;
+
+  /* surface chrome: --c-recessed is the app's secondary gray (the segmented
+     track under the board, the selected chapter row), --c-hairline the faint
+     outline of a nested box, --c-line the outline of a raised card or chip. */
+  --c-recessed: #f3f3f3;
+  --c-hairline: var(--c-gray-200);
+  --c-line: var(--c-gray-300);
+  /* one width for every component frame — borders carry the separation now
+     that surfaces and page sit close in brightness */
+  /* whole pixels: Chrome floors fractional border widths to 1px at DPR 1,
+     so 1.5px would look unchanged on a non-retina display */
+  --border-w: 2px;
+
+  /* elevation */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+/* ---------- reset ---------- */
+
+/* Zero-width solid border on everything: rules below only ever have to set a
+   width/color, and no UA default border (dialog, input, fieldset, button)
+   leaks through. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border: 0 solid var(--c-gray-200);
+}
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  line-height: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--font-mono);
+  font-size: 1em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+/* form controls inherit typography instead of falling back to the UA's */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  /* `appearance: button` (what Tailwind's preflight used here) lets Chrome
+     paint its native control fill over an author background, so any styled
+     button came out gray-ish. Nothing in the app wants native chrome. */
+  appearance: none;
+  background-color: transparent;
+  background-image: none;
+}
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--c-gray-400);
+}
+
+fieldset,
+legend {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+dialog {
+  padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}
diff --git a/frontend/src/css/chessrepeat.css b/frontend/src/css/chessrepeat.css
new file mode 100644
index 0000000..7efdcdc
--- /dev/null
+++ b/frontend/src/css/chessrepeat.css
@@ -0,0 +1,215 @@
+/* ===========================
+   Chessrepeat.tsx — pieces owned by the root screen:
+   the progress bar above the board, the chapter (pgn) panel header,
+   and the floating "+time" reward that pops on a correct recall.
+   The grid shell itself lives in layout.css.
+   =========================== */
+
+/* ---------- progress bar above the board ---------- */
+/* ---cg-width is chessground's rendered board width, published on
+   .board-card (see Chessrepeat.tsx). The board is floored to a whole number
+   of 8 device pixels, so 100% of the card would overhang its right edge by
+   up to 8px. */
+.board-progress {
+  position: relative;
+  width: var(---cg-width, 100%);
+  margin-inline: auto;
+}
+
+.board-progress-bar {
+  display: flex;
+  height: 0.5rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  background: var(--c-gray-200);
+  cursor: default;
+}
+
+/* The two segments are data-driven, so the component hands their width in as
+   a custom property rather than as an inline style rule. */
+.board-progress-unseen,
+.board-progress-due {
+  height: 100%;
+  width: var(--segment-width, 0%);
+}
+
+.board-progress-unseen {
+  background: var(--c-brand-blue-light);
+}
+
+.board-progress-due {
+  background: var(--c-brand-blue);
+}
+
+/* ---------- breakdown tooltip on hover ---------- */
+.board-progress-tooltip {
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  border: 1px solid var(--c-gray-200);
+  border-radius: 0.375rem;
+  background: var(--c-surface);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--c-gray-700);
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.board-progress:hover .board-progress-tooltip {
+  opacity: 1;
+}
+
+/* The same three shares the bar shows, as a pie over the chapter's total. The
+   slice angles come in as custom properties; the unclaimed remainder keeps the
+   bar's track color, so pie and bar read as one picture. */
+.board-progress-pie {
+  flex-shrink: 0;
+  width: 3.25rem;
+  height: 3.25rem;
+  border-radius: 50%;
+  background: conic-gradient(
+    var(--c-brand-blue-light) 0 var(--unseen-end, 0deg),
+    var(--c-brand-blue) 0 var(--due-end, 0deg),
+    var(--c-gray-200) 0
+  );
+}
+
+.board-progress-tooltip table {
+  border-collapse: separate;
+  border-spacing: 0.5rem 0.125rem;
+}
+
+.board-progress-tooltip .cell-icon {
+  vertical-align: middle;
+}
+
+.board-progress-tooltip .cell-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.board-progress-tooltip .cell-icon-learn svg {
+  color: var(--c-sky-700);
+}
+
+.board-progress-tooltip .cell-icon-due svg {
+  color: var(--c-blue-800);
+}
+
+.board-progress-tooltip .cell-label {
+  text-align: left;
+}
+
+.board-progress-tooltip .cell-count {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.board-progress-tooltip .cell-percent {
+  text-align: right;
+  font-family: var(--font-mono);
+  color: var(--c-gray-400);
+}
+
+/* ---------- controls row under the board ---------- */
+.controls-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+/* ---------- chapter (pgn) panel ---------- */
+/* Closes the header off from the move tree scrolling under it. */
+.pgn-card .panel-header {
+  border-bottom: 1px solid var(--c-hairline);
+}
+
+.pgn-panel-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* On phones the tree is hidden while learning/recalling so the board and the
+   tip own the screen; from the two-column layout up it always shows. */
+@media (max-width: 767.98px) {
+  .pgn-panel-body.is-training-hidden {
+    display: none;
+  }
+
+  /* the card holds only the (now hidden) body, so it would render as an
+     empty bordered box above the move navigation */
+  .pgn-card:has(> .pgn-panel-body.is-training-hidden) {
+    display: none;
+  }
+}
+
+/* Sit immediately after the "Chapter" title rather than being pushed to the
+   far end of the header, so they read as actions on the chapter. */
+.copy-fen-btn,
+.toggle-comments-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--c-slate-600);
+  transition: color 150ms, background-color 150ms;
+}
+
+.copy-fen-btn svg,
+.toggle-comments-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.copy-fen-btn:hover,
+.toggle-comments-btn:hover {
+  color: var(--c-slate-800);
+  background: var(--c-gray-100);
+}
+
+.copy-fen-btn.is-copied,
+.copy-fen-btn.is-copied:hover {
+  background: var(--c-surface);
+  color: var(--c-green-600);
+}
+
+/* ---------- "+time" reward overlay ---------- */
+/* Anchored to the square that was just played, so the component supplies the
+   coordinates as custom properties. */
+.time-reward {
+  position: absolute;
+  left: var(--reward-x, 0);
+  top: var(--reward-y, 0);
+  z-index: 10;
+  pointer-events: none;
+  transform: rotate(45deg);
+  transition: opacity 300ms ease;
+}
+
+.time-reward-label {
+  padding: 2px 6px;
+  background: rgb(255 255 255 / 0.2);
+  color: #111;
+  font-size: 12px;
+  font-weight: 600;
+  font-style: italic;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index eabc9cf..3b0a8e3 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -7,13 +7,20 @@
    =========================== */
 
 /* ---------- root shell ---------- */
+.app-shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
 .app-root {
   width: 100%;
   height: 100dvh;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  background: #d6d9df;
+  background: var(--c-page-bg);
 }
 
 /* ---------- header ---------- */
@@ -21,7 +28,8 @@
   display: flex;
   align-items: flex-end;
   flex-wrap: nowrap;
-  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
+  /* everything but the wordmark is body type */
+  font-family: var(--font-sans);
   /* Wordmark scales with the viewport so it shrinks on mobile and caps at
      1.875rem on desktop. This must live here (not in the @container block):
      an element can't be styled by a container query on a container it
@@ -39,44 +47,136 @@
   container-type: inline-size;
 }
 
-/* Right-aligned cluster: connected-user avatars + the signed-in user / sign-in. */
-#header .header-actions {
-  margin-left: auto;
+/* One bottom margin for every item in the bar. The header aligns to flex-end,
+   so this is what lifts the whole row off its bottom edge by the same amount
+   and lands the wordmark, avatar, peer track and links on one line. Applied to
+   the leaves — .header-auth / .header-actions are layout-only wrappers, so
+   margins there would just double up. */
+#header .logo-wrap,
+#header .header-identity,
+#header .header-link,
+#header .header-peers {
+  margin-bottom: 0.25rem;
+}
+
+/* The two recessed tracks are taller than what's inside them by their own
+   0.375rem of padding. Bottom-aligned by box like every other leaf, that
+   padding lifts the avatar, name and peer faces a notch above the wordmark and
+   links they're meant to sit level with. Pulling each box down by that padding
+   aligns what you actually see — their contents — instead of their edges. */
+#header .header-identity,
+#header .header-peers {
+  margin-bottom: -0.125rem;
+}
+
+/* Identity track: avatar, name and the sign-in / sign-out control in one
+   recessed pill, the same object the peer avatars sit in. The track is the
+   item that aligns in the bar, so its contents drop the shared margin and
+   center against each other instead. */
+#header .header-identity {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  padding: 0.375rem;
+  border-radius: 0.5rem;
+  background: var(--c-recessed);
+}
+
+#header .header-identity .header-user,
+#header .header-identity .header-link {
+  margin-bottom: 0;
+  align-items: center;
+}
+
+/* the track's own padding already holds the picture off its left edge */
+#header .header-identity .header-avatar {
+  margin-left: 0;
+}
+
+/* Sits immediately right of the wordmark: sign-in, or the signed-in user. */
+#header .header-auth {
   display: flex;
   align-items: flex-end;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
-/* Overlapping avatar stack of other users on the same repertoire. */
-#header .header-peers {
+/* Right-aligned cluster: connected-user avatars + the external links,
+   separated by a dot. */
+#header .header-actions {
+  margin-left: auto;
   display: flex;
   align-items: flex-end;
+  gap: 0.5rem;
+}
+
+#header .header-actions > * + *::before {
+  content: '\00b7';
+  margin-right: 0.5rem;
+  color: var(--c-gray-300);
 }
 
-#header .header-peers > img + img {
-  margin-left: -0.375rem;
+/* Other users on the same repertoire, sitting in the same recessed light-grey
+   track as the Edit/Learn/Recall segments. The track has no fixed width, so it
+   simply grows as collaborators join. */
+#header .header-peers {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* the gap has to clear both avatars' 2px permission rings */
+  gap: 0.5rem;
+  /* the track's padding is what keeps the pictures off its edges */
+  padding: 0.375rem;
+  border-radius: 0.5rem;
+  background: var(--c-recessed);
 }
 
+/* Smaller than the signed-in user's own avatar: these are presence, not
+   identity, and the track can hold several of them at once. */
 #header .header-peer {
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 0.375rem;
+  height: 1.125rem;
+  width: 1.125rem;
+  border-radius: 0.25rem;
+}
+
+
+/* Ring color encodes the peer's access: `train` collaborators get the light
+   blue, everyone with full access (owner, `edit`) gets the dark one. */
+#header .header-peer-edit {
+  box-shadow: 0 0 0 2px var(--c-brand-blue);
+}
+
+#header .header-peer-train {
+  box-shadow: 0 0 0 2px var(--c-brand-blue-light);
+}
+
+#header .header-username {
+  font-size: 0.875rem;
+}
+
+#header .header-user svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 /* Signed-in user: avatar + name. */
 #header .header-user {
   display: flex;
   align-items: flex-end;
-  gap: 0.5rem;
 }
 
 #header .header-avatar {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 0.375rem;
+  /* keeps the picture off the wordmark on its left and the username on its
+     right, which the header's own gap alone leaves tight; the shared
+     #header leaf margin above handles the lift off the header's edge */
+  margin-inline: 0.25rem;
 }
 
 #header > .logo-wrap {
+  font-family: var(--font-condensed);
   display: flex;
   align-items: flex-end;
   flex-shrink: 0;
@@ -93,13 +193,14 @@
   color: #57534e;
 }
 
+/* Lighter than the wordmark so the links read as secondary chrome. */
 #header .header-link {
   display: flex;
   align-items: center;
   gap: 0.2rem;
-  font-size: 1rem;
+  font-size: 0.875rem;
   text-decoration: none;
-  color: inherit;
+  color: var(--c-gray-500);
   transition: color 150ms;
   flex-shrink: 0;
   background: none;
@@ -114,12 +215,12 @@
 }
 
 #header .header-link:hover {
-  color: #000;
+  color: var(--c-gray-900);
 }
 
 #header .header-link svg {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
   flex-shrink: 0;
 }
 
@@ -223,13 +324,14 @@
   display: contents;
 }
 
-/* The white card holds only the progress bar + chessboard. Its square
-   bottom edge is where the controls/settings pills hang like tabs. */
+/* The card holds only the progress bar + chessboard; the segmented controls
+   sit below it as their own surface, so it's rounded on all four corners. */
 .board-card {
-  background: #fff;
-  padding: 0.25rem;
-  border-radius: 0.5rem 0.5rem 0 0;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  background: var(--c-surface);
+  /* extra room under the board so it isn't flush with the card's edge */
+  padding: 0.25rem 0.25rem 0.625rem;
+  border: var(--border-w) solid var(--c-line);
+  border-radius: 0.5rem;
 }
 
 /* controls flush against the board, settings pushed right. Now an inner
@@ -259,45 +361,191 @@
   height: clamp(14px, 4.25cqi, 22px);
 }
 
-/* settings button: matches Controls pill style */
-.settings-btn {
+/* The Edit/Learn/Recall group, the comment popout and the settings button all
+   sit under the board card as segmented controls: an unoutlined recessed
+   track with the selected segment raised out of it as a white chip. */
+/* The padding is what separates the raised chip from the track's edge: the
+   chip is measured off the active button's own box, so whatever room the
+   padding leaves shows as grey around it on all four sides. */
+.control-tab {
+  position: relative;
+  isolation: isolate;
   display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background: var(--c-recessed);
+}
+
+/* The transparent border keeps the comment tab (the one segment that does
+   carry an outline) the same size as the rest, so the chip measured off a
+   button never jumps. */
+.control-tab-btn {
+  position: relative;
+  /* above the sliding chip, which is z-index 1 inside the track */
+  z-index: 2;
+  display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: 0 0 0.75rem 0.75rem;
-  background: #fff;
-  color: #64748b; /* slate-500 */
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 600;
+  padding: 0.375rem 0.625rem;
+  border: var(--border-w) solid transparent;
+  border-radius: 0.375rem;
   font-family: inherit;
-  transition: all 200ms;
-  flex-shrink: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  background: transparent;
+  color: var(--c-gray-500);
+  transition: color 200ms, background 200ms, border-color 200ms;
+}
+
+/* The chip that marks the active segment. Position/size come from CSS vars
+   measured off the active button, so it slides between segments. */
+.control-tab-chip {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: var(--active-tab-top, 0);
+  width: var(--active-tab-width, 0);
+  height: var(--active-tab-height, 0);
+  /* outlined, so the selected segment is legible as a raised chip and not just
+     a lighter patch of the track */
+  border: 1px solid var(--c-gray-400);
+  border-radius: 0.375rem;
+  background: var(--c-surface);
+  transform: translateX(var(--active-tab-left, 0));
+  transition: transform 200ms, width 200ms, height 200ms, top 200ms, opacity 200ms;
 }
 
+/* nothing selected (or not measured yet): fade the chip out where it stands */
+.control-tab-chip[data-rendered='false'] {
+  opacity: 0;
+  transform: translateX(var(--active-tab-left, 0)) scale(0.9);
+}
+
+/* settings button: same track, and lifts into a chip on hover */
 .settings-btn:hover {
-  color: #1e293b; /* slate-800 */
-  background: #e2e8f0; /* slate-200 */
+  color: var(--c-gray-800);
+  background: var(--c-surface);
 }
 
 .settings-btn:active {
   transform: scale(0.98);
 }
 
-/* pgn panel */
+/* ---------- shared panel chrome (chapter / repertoire / schedule) ---------- */
+.panel-header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+}
+
+.panel-icon {
+  flex-shrink: 0;
+  display: flex;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  color: var(--c-gray-600);
+  background: var(--c-gray-200);
+}
+
+.panel-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.panel-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--c-gray-800);
+}
+
+/* two-line title block: name over a small uppercase count */
+.panel-titles {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1;
+}
+
+.panel-titles .panel-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panel-subtitle {
+  margin-top: -0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--c-gray-500);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+/* Icon-with-optional-label action in a panel header (add / download / copy). */
+.panel-action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--c-slate-600);
+  transition: color 150ms, background-color 150ms;
+}
+
+.panel-action:hover:not(:disabled) {
+  color: var(--c-slate-800);
+  background: var(--c-gray-100);
+}
+
+.panel-action svg {
+  width: 18px;
+  height: 18px;
+}
+
+.panel-action:disabled {
+  color: var(--c-gray-300);
+  cursor: not-allowed;
+}
+
+/* pgn panel — the grid cell stacks the card and, outside its border, the
+   move navigation centered underneath. */
 .area-pgn {
   display: flex;
   flex-direction: column;
-  background: #fff;
+  min-width: 0;
+}
+
+.pgn-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--c-surface);
   border-radius: 0.75rem;
-  border: 1px solid #d1d5db;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  border: var(--border-w) solid var(--c-line);
+}
+
+.pgn-controls-bar {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
 }
 
+/* No horizontal padding at all: the filled move-number gutter runs flush to
+   the card's left edge, and on the right this element wraps the tree's own
+   scroll container — padding here would inset that container and take its
+   scrollbar with it. The moves are held off the scrollbar by `.tree-body`'s
+   padding instead, which sits *inside* the scrollport. */
 .pgn-tree-scroll {
   max-height: 30vh;
+  padding: 0 0 0.5rem;
   overflow-y: auto;
 }
 
@@ -316,20 +564,13 @@
 .area-schedule {
 }
 
-/* when the repertoire card is narrow (e.g. 2-column middle layout),
-   collapse the "Learn"/"Recall" labels on each chapter row so only the
-   count remains. */
+/* The repertoire card is a query container; Repertoire.css collapses the
+   per-row labels once it gets narrow. */
 #repertoire {
   container-type: inline-size;
   container-name: repertoire;
 }
 
-@container repertoire (max-width: 340px) {
-  .chapter-btn-label {
-    display: none;
-  }
-}
-
 /* ---------- MIDDLE (768px – 1023px): two-column layout ----------
    Board + controls + tip stack on the left; the chapter (pgn) sits at
    the top-right with the repertoire list below it. Memory schedule
@@ -362,6 +603,12 @@
     overflow: hidden;
   }
 
+  .pgn-card {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
   /* Repertoire spans the schedule + usertip rows; the last row is 1fr so
      it actually gets expanding height instead of just content height. */
   .area-repertoire {
@@ -452,6 +699,12 @@
     overflow: hidden;
   }
 
+  .pgn-card {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
   .pgn-tree-scroll {
     flex: 1;
     min-height: 0;
@@ -477,6 +730,11 @@
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--c-backdrop);
   z-index: 10;
 }
+
+/* sits just under .settings-dialog (z-index 50) */
+.modal-backdrop-settings {
+  z-index: 40;
+}
\ No newline at end of file
diff --git a/frontend/src/css/style.css b/frontend/src/css/style.css
index 0423c98..7dd0752 100644
--- a/frontend/src/css/style.css
+++ b/frontend/src/css/style.css
@@ -1,26 +1,31 @@
-/* @tailwind base;
-@tailwind components;
-@tailwind utilities; */
-
+/* Attention pulse. The ring color comes from --ring-pulse on the element
+   itself, so each caller matches it to its own fill; the dark default is the
+   fallback for anything that doesn't set one. --ring-pulse-out is where that
+   ring fades to: leave it and the ring fades through transparent *black*,
+   which greys the color out on the way; set it to the same hue at zero alpha
+   and the ring keeps its color the whole way. */
 @keyframes ring-pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.9);
+    box-shadow: 0 0 0 0 var(--ring-pulse, rgb(17 24 39 / 0.5));
     transform: scale(1);
   }
-  70% {
-    box-shadow: 0 0 0 14px rgba(59, 130, 246, 0);
+  /* A ring that only ever grows-and-fades is invisible at both ends and faint
+     in between — it peaked around 17% alpha. Snapping out to a solid ring
+     first gives the eye something to catch before the fade starts. */
+  18% {
+    box-shadow: 0 0 0 4px var(--ring-pulse, rgb(17 24 39 / 0.5));
     transform: scale(1.06);
   }
+  70% {
+    box-shadow: 0 0 0 15px var(--ring-pulse-out, transparent);
+    transform: scale(1);
+  }
   100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+    box-shadow: 0 0 0 0 var(--ring-pulse-out, transparent);
     transform: scale(1);
   }
 }
 
-.animate-ring-pulse {
-  animation: ring-pulse 1.5s ease-out infinite;
-}
-
 /*
  * Chessground base css properties.
  *
@@ -37,7 +42,7 @@ body {
   font-family: 'Fira Sans', 'Roboto', sans-serif;
   /* Match .app-root so no white shows through any gap at the top/bottom
      (mobile dvh/vh mismatch, header margin, sub-pixel rounding, overscroll). */
-  background: #d6d9df;
+  background: var(--c-page-bg);
 }
 * {
   margin: 0;
@@ -57,12 +62,17 @@ svg {
   overflow: visible;
 }
 
+/* Chessground floors the board to a whole number of 8 device pixels, so it
+   can be a few px narrower than its wrap; centering splits that slack evenly
+   instead of pooling it on the right. */
 cg-container {
   position: absolute;
   width: 100%;
   height: 100%;
   display: block;
   bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 cg-board {
@@ -248,11 +258,11 @@ cg-board piece.fading {
   height: 6px;
 }
 
-/* .tview2 line {
-    display: block;
-    padding-inline-start: 7px;
-    position: relative;
-} */
+/* The last sibling's connector stops at its own elbow instead of running the
+   full height of the block, so the trunk doesn't dangle past the last line. */
+.line:last-child > .branch {
+  height: calc(0.8em + 2px);
+}
 
 .line .comment {
   display: inline;
@@ -264,36 +274,102 @@ cg-board piece.fading {
 
 .lines {
   display: block;
-  /* margin-top: 2px; */
+  margin-block: 2px;
   margin-inline-start: 6px;
-  /* margin-bottom: 0.8em; */
   padding-inline-start: 2px;
+  overflow-x: clip;
 }
 
-.line {
-  display: block;
-  padding-inline-start: 7px;
-  position: relative;
+.lines:last-child {
+  margin-bottom: 0;
 }
 
-/* Plain gray rectangle scrollbar — shared by repertoire list & pgn tree */
-.repertoire-scroll,
-.tree-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: #9ca3af transparent; /* gray-400 */
+/* a lone sideline needs no trunk to hang its siblings from */
+.lines.single {
+  border-inline-start: none;
 }
 
-.repertoire-scroll::-webkit-scrollbar,
-.tree-scroll::-webkit-scrollbar {
-  width: 10px;
+/* ---------- info glyph ----------
+   The "learn more" marker next to a panel or dialog title: a typed 'i' in a
+   circle, drawn rather than pulled from an icon set. Border and letter both
+   take currentColor, so each place it's used sets one color on the link and
+   the whole mark follows; sized in `em` for the same reason — it scales with
+   whatever type it sits beside. */
+.info-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* roomier than the letter needs: the circle has to clear both the border and
+     the 'i' at this size */
+  width: 1.6em;
+  height: 1.6em;
+  /* same weight as every other frame in the app (--border-w), in px so it
+     doesn't thin out at this small a font-size */
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  font-family: var(--font-sans);
+  font-size: 0.5625rem;
+  font-weight: 700;
+  /* the box does the vertical centering; a line box of its own would fight it */
+  line-height: 1;
+  /* 'i' has no descender, so its ink sits high in a line box that reserves
+     room for one. With border-box sizing this padding shifts the letter down
+     by half its value — just enough to drop the ink onto the circle's center. */
+  padding-top: 0.05em;
+  user-select: none;
 }
 
-.repertoire-scroll::-webkit-scrollbar-track,
-.tree-scroll::-webkit-scrollbar-track {
+/* ---------- scrollbars ----------
+   A grey rectangle with a slight rounding, floating in a bare gutter, and no
+   stepper arrows. Applied to everything rather than a list of named scroll
+   containers: any element that scrolls should look the same, and naming them
+   one by one kept leaving new ones with the browser's default arrowed bar.
+
+   The standard properties are fenced off from Chrome deliberately. Blink
+   honours `scrollbar-width` / `scrollbar-color` *instead of* the
+   ::-webkit-scrollbar pseudo-elements — declaring either one makes it drop
+   every rule below this, which is what put the stepper arrows back. Firefox
+   doesn't support the ::-webkit- pseudos, so it takes this branch and gets the
+   nearest equivalent; Chrome skips it and is styled by the pseudos. */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #9ca3af transparent; /* gray-400 */
+  }
+}
+
+*::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+*::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.repertoire-scroll::-webkit-scrollbar-thumb,
-.tree-scroll::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb {
   background: #9ca3af; /* gray-400 */
+  /* The transparent border insets the thumb inside the 9px gutter. Since the
+     background is clipped to the content box, the visible corner radius is
+     this radius minus the border width — 5px here reads as ~3px. */
+  border: 2px solid transparent;
+  background-clip: content-box;
+  border-radius: 5px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #6b7280; /* gray-500 */
+  background-clip: content-box;
+}
+
+/* WebKit draws stepper arrows at both ends by default; drop them so the bar
+   is nothing but track and thumb. */
+*::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
 }
diff --git a/frontend/src/css/theme.css b/frontend/src/css/theme.css
index 558f706..a748683 100644
--- a/frontend/src/css/theme.css
+++ b/frontend/src/css/theme.css
@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 /*
  * Board
  */
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index a421424..06658ca 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+// Before App: imports are evaluated in source order, so importing App first
+// pulled every component stylesheet in ahead of these and inverted the
+// cascade — base.css's reset (`[type=button] { background-color: transparent }`
+// among others) then beat any same-specificity component rule instead of
+// being the floor it's written to be.
+import './css/base.css';
 import './css/style.css';
 import './css/theme.css';
+import App from './App';
 import { GoogleOAuthProvider } from "@react-oauth/google";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/frontend/src/store/state.ts b/frontend/src/store/state.ts
index 9407349..ceae343 100644
--- a/frontend/src/store/state.ts
+++ b/frontend/src/store/state.ts
@@ -73,6 +73,11 @@ export { userCard };
 // before round-tripping.
 export const MAX_COMMENT_CHARS = 1000;
 
+/** Name given to the chapter seeded for first-time playground users. The
+ *  training controls key their "start here" nudge off it, so it has to be one
+ *  constant rather than the same literal written in two places. */
+export const EXAMPLE_CHAPTER_NAME = 'Example Chapter';
+
 const EXAMPLE_PGN = `1. e4 e5 { This is an example chapter. To train your own openings, click "add" and choose a PGN (opening file) to train. chessrepeat uses spaced repetition to schedule your reviews after you learn a move. Enjoy!} 
 2. Nf3 d6 3. d4 Bg4 4. dxe5 Bxf3 5. Qxf3 dxe5 6. Bc4 Nf6 7. Qb3 Qe7 8. Nc3 c6 9. Bg5 b5 10. Nxb5 cxb5 11. Bxb5+ Nbd7 12. O-O-O Rd8 13. Rxd7 Rxd7 14. Rd1 Qe6 15. Bxd7+ Nxd7 16. Qb8+ Nxb8 17. Rd8# *`;
 
@@ -414,7 +419,7 @@ export const useTrainerStore = create<TrainerState>()(
 
         if (!ids.length) {
           // Seed example chapter for new playground users
-          const exampleChapter = chapterFromPgn(EXAMPLE_PGN, 'white', 'Example Chapter');
+          const exampleChapter = chapterFromPgn(EXAMPLE_PGN, 'white', EXAMPLE_CHAPTER_NAME);
           if (exampleChapter) await addNewChapterLocally(exampleChapter);
           return;
         }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
deleted file mode 100644
index ed11a7f..0000000
--- a/frontend/tailwind.config.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// /** @type {import('tailwindcss').Config} */
-// export default {
-//   content: [
-//     './src/**/*{html,js,ts}',
-//   ],
-//   theme: {
-//     extend: {},
-//   },
-//   plugins: [],
-// }
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{html,js,ts,tsx}'],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Fira Sans', 'Roboto', 'sans-serif'],
-        roboto: ['Roboto'],
-        'roboto-condensed': ['Roboto Condensed', 'Roboto', 'sans-serif']
-      },
-      width: {
-        '97': '97%',
-      },
-      colors: {
-        'c-bg-page': 'hsl(37, 10%, 92%)',
-        'c-body-gradient': 'hsl(37, 12%, 84%)',
-        'blue-gray': '#ECEFF1',
-        // Canonical app blues — source of truth is the progress bar above
-        // the board (light = sky-300, dark = blue-500).
-        'brand-blue': '#3b82f6',
-        'brand-blue-light': '#7dd3fc',
-      },
-      backgroundImage: {
-        'custom-gradient': 'linear-gradient(to bottom, hsl(37, 12%, 84%), hsl(37, 10%, 92%) 116px)',
-      },
-      keyframes: {
-        pulse: {
-          '0%, 100%': { backgroundColor: 'white'},
-          '50%': { backgroundColor: '#3b82f6', borderColor: '#3b82f6' },
-        },
-      },
-      animation: {
-        'pulse-blue': 'pulse 2s infinite',
-      },
-    },
-  },
-  plugins: [],
-};
-import defaultTheme from 'tailwindcss/defaultTheme';
\ No newline at end of file