/* ─────────────────────────────────────────────────────────────
   Playful theme: yellow + black, Nunito, chunky "3D" buttons.
   Variables live in themes.css (body[data-theme="playful"]);
   this file restyles the components so every page matches.
   Yellow is for fills and highlights; text stays black.
   ───────────────────────────────────────────────────────────── */
body[data-theme="playful"] {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.55;
}
body[data-theme="playful"] :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
body[data-theme="playful"][data-dark="true"] :focus-visible { outline-color: var(--accent); }

/* Type */
body[data-theme="playful"] h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.22; }
body[data-theme="playful"] h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; }
body[data-theme="playful"] h3 { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.25; font-weight: 800; }
body[data-theme="playful"] p, body[data-theme="playful"] .lead { font-weight: 600; }
body[data-theme="playful"] .eyebrow {
  font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body[data-theme="playful"] [id] { scroll-margin-top: 96px; }

/* ── Buttons: solid fill + chunky bottom edge ── */
body[data-theme="playful"] .btn,
body[data-theme="playful"] .btn-primary,
body[data-theme="playful"] .auth-submit {
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 14px;
  box-shadow: none;
  font-family: var(--font-ui); font-weight: 800; letter-spacing: .02em;
  padding: 14px 24px; min-height: 48px;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
body[data-theme="playful"] .btn:hover,
body[data-theme="playful"] .btn-primary:hover:not(:disabled),
body[data-theme="playful"] .auth-submit:hover:not(:disabled) {
  transform: translateY(-1px); box-shadow: none; filter: none; opacity: 1;
}
body[data-theme="playful"] .btn:active,
body[data-theme="playful"] .btn-primary:active:not(:disabled),
body[data-theme="playful"] .auth-submit:active:not(:disabled) {
  transform: translateY(4px); box-shadow: none;
}
body[data-theme="playful"] .btn-primary:disabled, body[data-theme="playful"] .auth-submit:disabled {
  background: var(--rule); color: var(--muted); box-shadow: none;
}
body[data-theme="playful"] .btn-ghost,
body[data-theme="playful"] .oauth-btn,
body[data-theme="playful"] .signout,
body[data-theme="playful"] .ccard-cta.notify {
  background: var(--card); color: var(--ink);
  border: 2px solid var(--rule); border-radius: 14px;
  box-shadow: none;
  font-family: var(--font-ui); font-weight: 800;
}
body[data-theme="playful"] .btn-ghost:hover, body[data-theme="playful"] .oauth-btn:hover,
body[data-theme="playful"] .signout:hover {
  background: var(--card); border-color: #ffd23f; box-shadow: none; transform: translateY(-1px);
}

/* ── Nav ── */
body[data-theme="playful"] .nav {
  background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 2px solid var(--rule);
}
body[data-theme="playful"] .nav-inner { height: 76px; }
body[data-theme="playful"] .nav-logo { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; gap: 0; }
body[data-theme="playful"] .nav-logo-hl { background: var(--accent); color: var(--accent-ink); padding: 0 7px; margin-left: 2px; border-radius: 7px; }
body[data-theme="playful"] .footer .nav-logo { font-size: 22px; }
body[data-theme="playful"] .nav-links { gap: 6px; font-size: 15px; font-weight: 800; }
body[data-theme="playful"] .nav-links a { padding: 9px 16px; border-radius: 12px; border: 2px solid transparent; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
body[data-theme="playful"] .nav-links a:hover { background: var(--bg-2); color: var(--ink); }
body[data-theme="playful"] .nav-links a.is-active { background: var(--accent-soft); border-color: #ffd23f; color: #111; }
body[data-theme="playful"][data-dark="true"] .nav-links a.is-active { color: var(--ink); }
body[data-theme="playful"] .nav-cta {
  background: var(--ink); color: var(--bg); border: 0; border-radius: 12px; padding: 10px 18px;
  font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: none;
}
body[data-theme="playful"][data-dark="true"] .nav-cta { background: var(--accent); color: #111; }
body[data-theme="playful"] .nav-cta:hover { transform: translateY(-1px); box-shadow: none; border-color: transparent; }
body[data-theme="playful"] .dark-toggle { border: 2px solid var(--rule); border-radius: 12px; width: 40px; height: 40px; box-shadow: none; color: var(--ink); }
body[data-theme="playful"] .dark-toggle:hover { border-color: #ffd23f; }

/* ── Hero ── */
body[data-theme="playful"] .hero h1 .stroke::after {
  background: var(--accent); opacity: 1; height: 0.42em; bottom: 0.06em; border-radius: 8px;
}
body[data-theme="playful"] .hero h1 .stroke { z-index: 0; }
body[data-theme="playful"] .free-tag { font-weight: 800; }
body[data-theme="playful"] .hero-jump a { font-weight: 800; }
body[data-theme="playful"] .hero-jump a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }

/* ── Cards ── */
body[data-theme="playful"] .streak-card,
body[data-theme="playful"] .course,
body[data-theme="playful"] .ccard,
body[data-theme="playful"] .faq-item,
body[data-theme="playful"] .auth-card {
  background: var(--card); border: 2px solid var(--rule); border-radius: 20px; box-shadow: none;
}
body[data-theme="playful"] .streak-card { transform: none; padding: 24px; }
body[data-theme="playful"] .streak-head b { font-weight: 900; }
body[data-theme="playful"] .streak-cell { border-radius: 6px; border: 0; background: var(--bg-2); }
body[data-theme="playful"] .streak-cell.done { background: var(--accent); box-shadow: none; }
body[data-theme="playful"] .streak-cell.today { background: var(--ink); border: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
body[data-theme="playful"][data-dark="true"] .streak-cell.today { background: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
body[data-theme="playful"] .streak-foot .num { font-weight: 900; }
body[data-theme="playful"] .course.live:hover,
body[data-theme="playful"] .ccard.live:hover { transform: translateY(-3px); border-color: #ffd23f; box-shadow: none; }
body[data-theme="playful"] .course:nth-child(2), body[data-theme="playful"] .course:nth-child(3) { transform: none; }
body[data-theme="playful"] .ccard-media { border-radius: 18px 18px 0 0; border-bottom: 2px solid var(--rule); }
body[data-theme="playful"] .ccard-cat { background: var(--card); color: var(--ink); border: 2px solid var(--rule); border-radius: 999px; font-weight: 800; letter-spacing: .06em; }
body[data-theme="playful"] .ccard-flag { background: var(--accent); color: #111; border: 2px solid #ffd23f; border-radius: 999px; font-weight: 800; }
body[data-theme="playful"] .ccard-flag.soon { background: var(--ink); color: var(--bg); border-color: #ffd23f; }
body[data-theme="playful"] .ccard-tag { background: var(--bg-2); border: 0; border-radius: 10px; color: var(--ink-2); font-weight: 700; }
body[data-theme="playful"] .ccard-foot, body[data-theme="playful"] .course-foot { border-top: 2px solid var(--rule); }
body[data-theme="playful"] .ccard-body h3 { font-weight: 900; }
body[data-theme="playful"] .course-tag, body[data-theme="playful"] .ccard-meta { font-weight: 700; }
body[data-theme="playful"] .course-foot .go { color: var(--ink); font-weight: 800; }
body[data-theme="playful"] .ccard-price b, body[data-theme="playful"] .course-foot .price b { font-weight: 900; }

/* Category tabs */
body[data-theme="playful"] .cat-tab {
  border: 2px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink-2);
  font-weight: 800; box-shadow: none; padding: 9px 16px;
}
body[data-theme="playful"] .cat-tab:hover { border-color: #ffd23f; color: var(--ink); }
body[data-theme="playful"] .cat-tab.is-active { background: var(--accent); border-color: #ffd23f; color: #111; box-shadow: none; }

/* ── FAQ ── */
body[data-theme="playful"] .faq-item { margin-bottom: 14px; padding: 4px 8px; }
body[data-theme="playful"] .faq-item summary { font-weight: 800; }
body[data-theme="playful"] .faq-item[open] { border-color: #ffd23f; box-shadow: none; }
body[data-theme="playful"] .faq-item summary .toggle { border: 2px solid var(--rule); background: var(--bg-2); color: var(--ink); }
body[data-theme="playful"] .faq-item[open] summary .toggle { background: var(--accent); border-color: #ffd23f; }

/* ── Sign-in ── */
body[data-theme="playful"] .auth-card { padding: 32px; }
body[data-theme="playful"] .auth-title { font-weight: 900; }
body[data-theme="playful"] .mode-tab { font-weight: 800; border-radius: 12px; }
body[data-theme="playful"] .mode-tab.active { background: var(--accent); color: #111; }
body[data-theme="playful"] .auth-field input,
body[data-theme="playful"] input[type="text"], body[data-theme="playful"] input[type="email"],
body[data-theme="playful"] input[type="password"], body[data-theme="playful"] textarea, body[data-theme="playful"] select {
  font-family: var(--font-body); font-weight: 700; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink);
}
body[data-theme="playful"] input:focus, body[data-theme="playful"] textarea:focus { border-color: #ffd23f; outline: none; }
body[data-theme="playful"] .auth-field label, body[data-theme="playful"] .field-label { font-weight: 800; }
body[data-theme="playful"] .link-btn, body[data-theme="playful"] .field-link { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }

/* ── Footer ── */
body[data-theme="playful"] .footer { border-top: 2px solid var(--rule); }
body[data-theme="playful"] .footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }

/* ── Phones ── */
@media (max-width: 700px) {
  body[data-theme="playful"] .nav-links a { padding: 8px 10px; font-size: 12px; }
  body[data-theme="playful"] .nav-inner { height: 68px; }
  body[data-theme="playful"] .nav-logo { font-size: 20px; }
}

/* ═════════ Round 2: page-specific polish ═════════ */

/* Hero highlight: marker stripe that follows the words across line breaks */
body[data-theme="playful"] .hero h1 .stroke::after { display: none; }
body[data-theme="playful"] .hero h1 .stroke {
  display: inline; padding: 0 .12em; margin: 0 -.12em; border-radius: 10px;
  background: linear-gradient(transparent 56%, var(--accent) 56%, var(--accent) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Catalog card buttons */
body[data-theme="playful"] .ccard-cta {
  background: var(--accent); color: #111; border: 0; border-radius: 12px; font-weight: 800;
  box-shadow: none; padding: 9px 16px;
}
body[data-theme="playful"] .ccard.soon .ccard-cta {
  background: var(--card); color: var(--ink-2); border: 2px solid var(--rule); box-shadow: none;
}
body[data-theme="playful"] .ccard.live:hover .ccard-cta { filter: none; transform: translateY(-1px); }

/* Logo highlight on the sign-in and dashboard headers */
body[data-theme="playful"] .auth-home, body[data-theme="playful"] .course-logo { font-weight: 800; letter-spacing: -0.01em; }
body[data-theme="playful"] .auth-title { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.2; }

/* ── Course dashboards (Python, Statistics) ── */
body[data-theme="playful"] .course-nav { background: var(--bg); border-bottom: 2px solid var(--rule); backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-theme="playful"] .course-logo { font-size: 20px; }
body[data-theme="playful"] .course-name, body[data-theme="playful"] .crumb-sep { font-weight: 800; }
body[data-theme="playful"] .course-progress-pill { border: 2px solid var(--rule); border-radius: 999px; font-weight: 800; }
body[data-theme="playful"] .welcome-title, body[data-theme="playful"] .chapter-title { font-weight: 900; }
body[data-theme="playful"] .welcome-eyebrow, body[data-theme="playful"] .stat-eyebrow, body[data-theme="playful"] .chapter-num {
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body[data-theme="playful"] .stat, body[data-theme="playful"] .unlock-card {
  border: 2px solid var(--rule); border-radius: 20px; box-shadow: none; transform: none;
}
body[data-theme="playful"] .stat-num, body[data-theme="playful"] .ring-num { font-weight: 900; }
body[data-theme="playful"] .ring-bg { stroke: var(--rule); }
body[data-theme="playful"] .ring-fg { stroke: var(--accent); }
body[data-theme="playful"] .streak-chip { border-radius: 6px; border: 0; background: var(--bg-2); }
body[data-theme="playful"] .streak-chip.on { background: var(--accent); box-shadow: none; }
body[data-theme="playful"] .chap-progress-bar { height: 12px; border-radius: 999px; background: var(--rule); border: 0; overflow: hidden; }
body[data-theme="playful"] .chap-progress-fill { background: var(--accent); border-radius: 999px; }
body[data-theme="playful"] .chap-progress-text { font-weight: 800; }
body[data-theme="playful"] .unlock-card { background: var(--accent); border-color: var(--accent-dark); box-shadow: none; color: #111; }
body[data-theme="playful"] .unlock-card * { color: #111; }
body[data-theme="playful"] .unlock-btn { background: #111; color: var(--accent) !important; border: 0; border-radius: 14px; box-shadow: none; font-weight: 800; }

/* Day cards: done = yellow, today = black, locked = grey (same language as the German path) */
body[data-theme="playful"] .day-card {
  border: 2px solid var(--rule); border-radius: 18px; box-shadow: none; padding: 16px 18px 14px;
}
body[data-theme="playful"] .day-card:hover { border-color: #ffd23f; box-shadow: none; transform: translateY(-2px); }
body[data-theme="playful"] .day-title { font-weight: 800; }
body[data-theme="playful"] .day-num { font-weight: 800; letter-spacing: .08em; }
body[data-theme="playful"] .day-status { border: 2px solid var(--rule); }
body[data-theme="playful"] .day-card.s-done { background: var(--accent); border-color: var(--accent-dark); box-shadow: none; color: #111; }
body[data-theme="playful"] .day-card.s-done:hover { border-color: #ffd23f; box-shadow: none; }
body[data-theme="playful"] .day-card.s-done .day-num, body[data-theme="playful"] .day-card.s-done .day-title { color: #111; }
body[data-theme="playful"] .day-card.s-done .day-status { background: #111; color: var(--accent); }
body[data-theme="playful"] .day-card.s-today { background: #111; border-color: #ffd23f; box-shadow: 0 0 0 5px var(--accent-soft); }
body[data-theme="playful"][data-dark="true"] .day-card.s-today { box-shadow: 0 0 0 5px #3a3210; border-color: var(--accent); }
body[data-theme="playful"] .day-card.s-today .day-num, body[data-theme="playful"] .day-card.s-today .day-title,
body[data-theme="playful"] .day-card.s-today .day-cta { color: var(--accent); }
body[data-theme="playful"] .day-card.s-locked, body[data-theme="playful"] .day-card.s-tomorrow {
  opacity: 1; background: var(--bg-2); border-color: var(--rule); box-shadow: none;
}
body[data-theme="playful"] .day-card.s-locked .day-title, body[data-theme="playful"] .day-card.s-tomorrow .day-title { color: var(--muted); }
body[data-theme="playful"] .day-tag, body[data-theme="playful"] .tag-mini {
  border: 0; border-radius: 8px; background: var(--bg-2); color: var(--ink); font-weight: 800; letter-spacing: .06em;
}
body[data-theme="playful"] .day-card.s-done .day-tag { background: rgba(0,0,0,.12); }
body[data-theme="playful"] .tag-capstone, body[data-theme="playful"] .tag-final { background: var(--ink); color: var(--accent); }
body[data-theme="playful"] .day-card.t-capstone { background: var(--card); border-width: 2px; }
body[data-theme="playful"] .day-card.t-capstone::before { display: none; }

/* ── Lesson pages (Python / Statistics / German classic) ── */
body[data-theme="playful"] .day-nav, body[data-theme="playful"] .phase-strip { background: var(--bg); border-bottom: 2px solid var(--rule); }
body[data-theme="playful"] .day-nav { border-top: 0; }
body[data-theme="playful"] .phase-tab { font-weight: 800; padding: 6px 12px; border-radius: 12px; }
body[data-theme="playful"] .phase-tab.active { background: var(--accent-soft); color: #111; box-shadow: inset 0 0 0 2px #111; }
body[data-theme="playful"][data-dark="true"] .phase-tab.active { color: var(--ink); }
body[data-theme="playful"] .phase-tab .check { border: 2px solid var(--rule); }
body[data-theme="playful"] .phase-tab.done .check { background: var(--accent); }
body[data-theme="playful"] .lesson-title { font-weight: 900; }
body[data-theme="playful"] .lesson-eyebrow, body[data-theme="playful"] .lesson-sub { font-weight: 800; }
body[data-theme="playful"] .lesson-section > h2, body[data-theme="playful"] .lesson-body h2 { border-left-width: 6px; border-radius: 3px; font-weight: 900; }
body[data-theme="playful"] .code-block, body[data-theme="playful"] .lesson-body pre, body[data-theme="playful"] .editor, body[data-theme="playful"] .io-box, body[data-theme="playful"] .code-prob {
  border: 2px solid var(--rule); border-radius: 16px;
}
body[data-theme="playful"] .lesson-body code { border-radius: 8px; }
body[data-theme="playful"] .callout, body[data-theme="playful"] .objectives, body[data-theme="playful"] .next-card, body[data-theme="playful"] .lesson-end {
  background: var(--card); border: 2px solid var(--rule); border-radius: 18px;
}
body[data-theme="playful"] .callout { background: var(--accent-soft); border-color: #ffd23f; color: #111; }
body[data-theme="playful"] .callout * { color: #111; }
body[data-theme="playful"] .quiz-opt {
  border: 2px solid var(--rule); border-radius: 14px; box-shadow: none; font-weight: 700;
}
body[data-theme="playful"] .quiz-opt:hover:not(:disabled) { border-color: #ffd23f; transform: translateY(-1px); }
body[data-theme="playful"] .quiz-opt .letter { border: 2px solid var(--rule); font-weight: 800; }
body[data-theme="playful"] .quiz-opt.picked { border-color: #ffd23f; background: var(--accent-soft); box-shadow: none; color: #111; }
body[data-theme="playful"] .quiz-opt.picked .letter { background: #111; color: var(--accent); }
body[data-theme="playful"] .quiz-opt.correct { border-color: #ffd23f; background: var(--accent); box-shadow: none; color: #111; }
body[data-theme="playful"] .quiz-opt.correct .letter { background: #111; color: var(--accent); }
body[data-theme="playful"] .quiz-opt.wrong { border: 2px dashed #ffd23f; background: var(--bg-2); box-shadow: none; color: var(--ink-2); }
body[data-theme="playful"] .quiz-opt.wrong .letter { background: var(--ink); color: var(--bg); }
body[data-theme="playful"] .quiz-feedback, body[data-theme="playful"] .code-feedback { border: 2px solid var(--rule); border-radius: 16px; }
body[data-theme="playful"] .quiz-feedback.ok { background: var(--accent-soft); border-color: #ffd23f; color: #111; }
body[data-theme="playful"] .quiz-feedback.ok * { color: #111; }
body[data-theme="playful"] .quiz-feedback.bad { background: var(--bg-2); border: 2px dashed #ffd23f; }
body[data-theme="playful"] .btn-submit { background: var(--accent); color: #111; border: 0; border-radius: 14px; box-shadow: none; font-weight: 800; }
body[data-theme="playful"] .btn-hint { border: 2px solid var(--rule); border-radius: 14px; box-shadow: none; font-weight: 800; background: var(--card); color: var(--ink); }
body[data-theme="playful"] .done-mark { background: var(--accent); color: #111; box-shadow: none; border: 0; }
body[data-theme="playful"] .done-title { font-weight: 900; }
body[data-theme="playful"] .done-stat { border: 2px solid var(--rule); border-radius: 16px; box-shadow: none; }

/* Classic German day: flashcards, grammar, exercises */
body[data-theme="playful"] .flashcard, body[data-theme="playful"] .sentence-practice, body[data-theme="playful"] .vocab-box,
body[data-theme="playful"] .vp-option, body[data-theme="playful"] .gn-item, body[data-theme="playful"] .match-item, body[data-theme="playful"] .mcq-opt {
  border-width: 2px; border-radius: 18px;
}
body[data-theme="playful"] .vocab-modal { border: 2px solid #ffd23f; border-radius: 20px; }

/* Sign-up wall + ad gate */
body[data-theme="playful"] .signup-wall-cta, body[data-theme="playful"] .ad-box, body[data-theme="playful"] .trust-item {
  border: 2px solid var(--rule); border-radius: 20px; box-shadow: none; background: var(--card);
}
body[data-theme="playful"] .signup-wall-title, body[data-theme="playful"] .trust-heading { font-weight: 900; }
body[data-theme="playful"] .auth-home { font-size: 22px; }
body[data-theme="playful"] .course-logo .nav-logo-hl, body[data-theme="playful"] .auth-home .nav-logo-hl {
  background: var(--accent); color: #111; padding: 0 6px; margin-left: 2px; border-radius: 6px;
}

/* Dark mode fixes */
body[data-theme="playful"] .hero h1 .stroke { color: #111; }
body[data-theme="playful"][data-dark="true"] .streak-cell,
body[data-theme="playful"][data-dark="true"] .streak-chip { background: #2c2c29; }
body[data-theme="playful"][data-dark="true"] .streak-cell.done,
body[data-theme="playful"][data-dark="true"] .streak-chip.on { background: var(--accent); }
body[data-theme="playful"][data-dark="true"] .day-card.s-locked,
body[data-theme="playful"][data-dark="true"] .day-card.s-tomorrow { background: #232321; box-shadow: none; }
body[data-theme="playful"][data-dark="true"] .day-card.s-done .day-num,
body[data-theme="playful"][data-dark="true"] .day-card.s-done .day-title { color: #111; }
body[data-theme="playful"][data-dark="true"] .ccard-media { border-bottom-color: var(--rule); }
body[data-theme="playful"][data-dark="true"] .callout { background: #3a3210; border-color: var(--accent); }
body[data-theme="playful"][data-dark="true"] .callout, body[data-theme="playful"][data-dark="true"] .callout * { color: var(--ink); }
body[data-theme="playful"][data-dark="true"] .quiz-opt.picked, body[data-theme="playful"][data-dark="true"] .quiz-feedback.ok { background: #3a3210; border-color: var(--accent); color: var(--ink); box-shadow: none; }
body[data-theme="playful"][data-dark="true"] .quiz-feedback.ok * { color: var(--ink); }
body[data-theme="playful"][data-dark="true"] .quiz-opt.picked .letter { background: var(--accent); color: #111; }
body[data-theme="playful"] .phase-tab::after { display: none; }
body[data-theme="playful"] .phase-tabs { gap: 4px; }
body[data-theme="playful"] .day-signout {
  background: var(--card); color: var(--ink); border: 2px solid var(--rule); border-radius: 14px;
  box-shadow: none; font-weight: 800;
}
body[data-theme="playful"] .day-signout:hover { border-color: #ffd23f; box-shadow: none; }
body[data-theme="playful"] .day-crumbs { font-weight: 700; }

/* Phone fixes: the phase tabs scroll inside their bar instead of widening the page */
@media (max-width: 700px) {
  body[data-theme="playful"] .phase-tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: none; }
  body[data-theme="playful"] .phase-tabs::-webkit-scrollbar { display: none; }
  body[data-theme="playful"] .phase-tab { flex: none; padding: 6px 10px; font-size: 12px; }
  body[data-theme="playful"] .phase-strip-inner { min-width: 0; }
  body[data-theme="playful"] .lesson-body table, body[data-theme="playful"] .lesson table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── Checkout + success (their layout lives in inline styles) ── */
body[data-theme="playful"] > .card { border: 2px solid var(--rule); border-radius: 24px; box-shadow: none; }
body[data-theme="playful"] .title, body[data-theme="playful"] .success-title { font-weight: 900; line-height: 1.15; }
body[data-theme="playful"] .price-amount { font-weight: 900; }
body[data-theme="playful"] .includes { font-weight: 700; }
body[data-theme="playful"] .includes li::before {
  content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  background: var(--accent); color: #111; border-radius: 50%; font-size: 12px; font-weight: 900;
}
body[data-theme="playful"] .back-link { font-weight: 800; }
body[data-theme="playful"] .divider { border-top: 2px solid var(--rule); }
body[data-theme="playful"] .btn-pay, body[data-theme="playful"] .btn-start {
  background: var(--accent); color: #111; border: 0; border-radius: 14px; font-weight: 800;
  box-shadow: none; min-height: 52px;
}
body[data-theme="playful"] .btn-pay:hover:not(:disabled), body[data-theme="playful"] .btn-start:hover {
  opacity: 1; transform: translateY(-1px); box-shadow: none;
}
body[data-theme="playful"] .btn-pay:active:not(:disabled), body[data-theme="playful"] .btn-start:active { transform: translateY(4px); box-shadow: none; }
body[data-theme="playful"] .check-ring { box-shadow: none; }

/* Phone header: keep "Sign in" on one line */
body[data-theme="playful"] .nav-cta { white-space: nowrap; }
@media (max-width: 700px) {
  body[data-theme="playful"] .nav-inner { gap: 8px; }
  body[data-theme="playful"] .nav-logo { font-size: 18px; }
  body[data-theme="playful"] .nav-logo-hl { padding: 0 5px; }
  body[data-theme="playful"] .nav-cta { padding: 9px 12px; font-size: 12px; }
  body[data-theme="playful"] .nav-right { gap: 8px; }
  body[data-theme="playful"] .dark-toggle { width: 38px; height: 38px; }
}
/* Statistics chapter chips: neutral instead of per-chapter blues */
body[data-theme="playful"] .day-card [class^="ch-"], body[data-theme="playful"] .day-card [class*=" ch-"] {
  background: var(--bg-2); color: var(--ink); border: 0; border-radius: 8px; font-weight: 800;
}
body[data-theme="playful"] .day-card.s-today [class^="ch-"], body[data-theme="playful"] .day-card.s-today [class*=" ch-"] { background: #2b2b28; color: var(--accent); }
body[data-theme="playful"] .day-card.s-done [class^="ch-"], body[data-theme="playful"] .day-card.s-done [class*=" ch-"] { background: rgba(0,0,0,.12); color: #111; }

/* Nav: Sign in = black with yellow text; links are 44px tall */
body[data-theme="playful"] .nav-cta { color: var(--accent); }
body[data-theme="playful"][data-dark="true"] .nav-cta { background: var(--accent); color: #111; }
body[data-theme="playful"] .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
body[data-theme="playful"] .nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
body[data-theme="playful"] .nav-inner { flex-wrap: wrap; gap: 12px; }

/* Phones: keep Home / Courses visible; the header wraps onto a second row */
@media (max-width: 640px) {
  body[data-theme="playful"] .nav-links { display: flex !important; order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  body[data-theme="playful"] .nav-inner { row-gap: 8px; }
}