/* Shared design tokens & components across all trainer pages */
:root {
  --green: #58cc02; --green-d: #58a700; --green-l: #d7ffb8;
  --red: #ff4b4b; --red-d: #ea2b2b; --red-l: #ffdfe0;
  --blue: #1cb0f6; --blue-d: #1899d6; --blue-l: #d3f2ff;
  --purple: #a560e8; --purple-d: #8a3fd1; --purple-l: #ecd9fb;
  --teal: #17c3a2; --teal-d: #0e9e86; --teal-l: #cdf7ee;
  --yellow: #ffc800; --yellow-d: #e6b400;
  --ink: #3c3c3c; --muted: #777; --line: #e5e5e5; --bg: #fff; --card: #fff; --gap-bg: #f7f7f7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eee; --muted: #a0a8ad; --line: #37464f; --bg: #131f24; --card: #131f24; --gap-bg: #1f2c33;
    --green-l: #1f3a16; --red-l: #3a1b1d; --blue-l: #12313d; --purple-l: #2e2140;
  }
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0; color: var(--ink);
  font: 500 17px/1.4 "Nunito", "Avenir Next", "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
button { font: inherit; cursor: pointer; }
a { color: inherit; }

.btn {
  border: 0; border-radius: 16px; padding: 13px 28px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; font-size: 15px; box-shadow: 0 4px 0 var(--shadow, #ccc);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow, #ccc); }
.btn.primary { background: var(--green); color: #fff; --shadow: var(--green-d); }
.btn.primary.danger { background: var(--red); --shadow: var(--red-d); }
.btn.primary:disabled { background: var(--line); color: var(--muted); --shadow: transparent; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.ghost { background: transparent; color: var(--muted); border: 2px solid var(--line); --shadow: var(--line); }

.top { display: flex; align-items: center; gap: 16px; padding: 24px 16px 0; }
.close { background: none; border: 0; color: var(--muted); font-size: 22px; padding: 4px 8px; text-decoration: none; display: inline-block; }
.bar { flex: 1; height: 16px; border-radius: 8px; background: var(--line); overflow: hidden; }
.fill { height: 100%; background: var(--green); border-radius: 8px; transition: width .35s; box-shadow: inset 0 4px 0 rgba(255,255,255,.25); }

.pill { border: 2px solid var(--line); border-radius: 12px; padding: 2px 12px; font-size: 14px; font-weight: 800; color: var(--muted); }
.pill.case { color: var(--blue); border-color: var(--blue); }

/* Hub */
.home { max-width: 640px; margin: 0 auto; padding: 40px 16px 80px; }
.home h1 { font-size: 32px; margin: 0 0 4px; color: var(--green); }
.home .dot { color: var(--blue); }
.sub { color: var(--muted); margin: 0 0 28px; }
.tiles { display: grid; gap: 14px; }
.tile {
  display: flex; gap: 16px; align-items: center; text-align: left; width: 100%;
  background: var(--card); color: var(--ink); border: 2px solid var(--line);
  border-bottom-width: 5px; border-radius: 18px; padding: 16px;
  transition: transform .08s; text-decoration: none;
}
.tile:hover { border-color: var(--blue); }
.tile:active { transform: translateY(2px); border-bottom-width: 3px; }
.tile.soon { opacity: .55; cursor: default; }
.tile.soon:hover { border-color: var(--line); }
.tile .emoji { font-size: 36px; flex-shrink: 0; }
.tile .txt { flex: 1; display: grid; gap: 2px; }
.tile .txt strong { font-size: 19px; }
.tile .txt span { color: var(--muted); font-size: 15px; }
.tile .txt em { color: var(--blue); font-size: 14px; font-style: normal; font-weight: 700; }
.tile .meta { color: var(--muted); font-size: 13px; text-align: right; font-weight: 700; white-space: nowrap; }
.back-link { display: inline-block; margin: 16px 0 0 16px; color: var(--muted); font-weight: 800; text-decoration: none; font-size: 14px; }
.back-link:hover { color: var(--blue); }

/* Done screen (shared) */
.done { max-width: 520px; margin: 0 auto; padding: 80px 16px; text-align: center; }
.trophy { font-size: 80px; }
.done h1 { color: var(--green); }
.stats { display: flex; gap: 12px; justify-content: center; margin: 24px 0 36px; flex-wrap: wrap; }
.stats div { border: 2px solid var(--line); border-radius: 16px; padding: 12px 20px; display: grid; gap: 4px; }
.stats span { font-size: 13px; color: var(--muted); font-weight: 700; }
.stats strong { font-size: 26px; color: var(--blue); }
.done .btns { justify-content: center; margin: 0; }
.btns { display: flex; gap: 12px; }