/* ===================================================
   Little English: student app, landing, auth
   Direction lives in DESIGN.md (light, purple, playful).
   =================================================== */

:root {
  --p-50:  #f6f3ff;
  --p-100: #efe9ff;
  --p-200: #e2d8fb;
  --p-300: #c9b8f6;
  --p-400: #9a7cf0;
  --p-500: #7344e6;
  --p-600: #5b21d6;
  --p-700: #4515b0;
  --p-900: #2b1a6b;

  --ink: #1f1a3d;
  --ink-2: #3b3655;
  --muted: #6e6890;
  --muted-2: #716b93;

  --bg: #fbf9ff;
  --sidebar-bg: #ffffff;
  --card: #ffffff;
  --line: #ece8f7;
  --track: #e9e5f5;

  /* Rewards accent: stars, points, earned badges. Text on it is --ink. */
  --sun: #ffc93c;
  --sun-deep: #e0a400;

  --radius: 18px;
  /* Cards sit flat; shadow is for things that float (menus, drawer). */
  --shadow: none;
  --float: 0 12px 32px rgba(43, 26, 107, .14);
  /* Toy-block base under pressable things. */
  --block: 0 4px 0 var(--p-700);
  --sidebar-w: 240px;
}

/* Keyboard focus: one visible ring everywhere (3px purple, 7.97:1 on white). */
:focus-visible { outline: 3px solid var(--p-600); outline-offset: 2px; border-radius: 6px; }
/* Icon tints (category coding). Icon colors keep at least 3:1 against their tint. */
.ftone-purple { background: var(--p-100); color: var(--dkf-p-600, var(--p-600)); }
.ftone-blue   { background: var(--dk-b-e0edff, #e0edff); color: var(--dk-f-2563eb, #2563eb); }
.ftone-gold   { background: var(--dk-b-fff4cc, #fff4cc); color: var(--dk-f-b45309, #b45309); }
.ftone-green  { background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-15803d, #15803d); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Elements with the hidden attribute stay hidden even when a class gives them a display value. */
[hidden] { display: none !important; }
/* Arial resized to Nunito's measurements, shown while the web font loads, so the text does not jump when it arrives. */
@font-face { font-family: 'Nunito Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 101.14%; ascent-override: 99.71%; descent-override: 34.82%; line-gap-override: 0%; }
html { font-size: 15px; }
body {
  margin: 0;
  font-family: 'Nunito', 'Nunito Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }

/* ===== LAYOUT ===== */
.u-layout { display: flex; min-height: 100vh; }
.u-main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }
.u-content { padding: 6px 24px 40px 34px; flex: 1; }

/* ===== SIDEBAR ===== */
.u-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: none;
  z-index: 50;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.u-sidebar::-webkit-scrollbar { display: none; }

/* Sidebar head: logo on the left, collapse toggle on the right */
.u-side-head { display: flex; align-items: center; gap: 4px; padding: 20px 12px 30px 20px; }
.u-brand { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border-radius: 12px; }
.u-brand-logo { width: 48px; height: 48px; flex-shrink: 0; }
/* Two-line wordmark, both lines the same size: "Little" in ink, "English" in brand purple */
.u-brand-name { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.3px; }
.u-brand-sub { font-size: 24px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); line-height: 1; letter-spacing: -.3px; white-space: nowrap; }

.u-nav { padding: 0 16px; flex: 1; }
.u-nav-link {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 14px; margin-bottom: 10px;
  border-radius: 14px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  transition: background .12s, color .12s;
}
.u-nav-link .mdi { font-size: 27px; line-height: 1; color: var(--dk-f-4b4569, #4b4569); width: 28px; text-align: center; }
.u-nav-link:hover { background: var(--p-50); color: var(--dk-f-3a1c9c, #3a1c9c); }
.u-nav-link:hover .mdi { color: var(--dkf-p-600, var(--p-600)); }
.u-nav-link.active { background: var(--p-100); color: var(--dk-f-3a1c9c, #3a1c9c); font-weight: 700; box-shadow: 0 2px 8px var(--dk-b-5b21d6-6, rgba(91,33,214,.06)); }
.u-nav-link.active .mdi { color: var(--dkf-p-600, var(--p-600)); }

/* Mosque decoration (shared partial) */
.sidebar-deco { margin-top: 24px; padding-bottom: 24px; text-align: center; flex-shrink: 0; }
.sidebar-deco-art { display: block; width: 100%; height: auto; }
.sidebar-deco.is-text-only .sidebar-deco-quote { margin-top: 0; }
.sidebar-deco-quote { margin: -4px 20px 0; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.sidebar-deco-divider { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--dk-f-7c5ce6, #7c5ce6); font-size: 14px; }
.sidebar-deco-divider::before, .sidebar-deco-divider::after { content: ''; width: 44px; height: 1.5px; background: var(--dk-b-b9a7f0, #b9a7f0); border-radius: 2px; }

/* Collapse toggle: icon button beside the logo (desktop only; the drawer takes over below 1025px) */
.u-collapse {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.u-collapse .mdi { font-size: 26px; line-height: 1; }
.u-collapse:hover { background: var(--p-50); color: var(--dkf-p-600, var(--p-600)); }
/* Its tooltip only shows when collapsed (expanded, the icon sits next to readable text). */
.u-collapse .u-nav-label { display: none; }

/* Collapsed: icon column. Labels stay in the page (screen readers still read them) and show as a tooltip on hover or keyboard focus. */
@media (min-width: 1025px) {
  .u-sidebar, .u-main { transition: width .2s ease, margin-left .2s ease; }
  .u-collapsed { --sidebar-w: 88px; }
  .u-collapsed .u-sidebar { overflow: visible; }
  /* Collapsed head: logo on top, toggle underneath, both centred */
  .u-collapsed .u-side-head { flex-direction: column; gap: 10px; padding: 20px 0 24px; }
  .u-collapsed .u-brand-text { display: none; }
  .u-collapsed .u-collapse { margin: 0; }
  .u-collapsed .u-collapse .u-nav-label { display: block; }
  .u-collapsed .u-nav { padding: 0 14px; }
  .u-collapsed .u-nav-link { position: relative; justify-content: center; gap: 0; padding: 13px 0; }
  .u-collapsed .u-nav-count { position: absolute; top: 4px; right: 10px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .u-collapsed .u-nav-label {
    position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-4px, -50%);
    padding: 7px 12px; border-radius: 10px; background: var(--ink); color: var(--dk-f-ffffff, #fff);
    font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: var(--float);
    opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 70;
  }
  .u-collapsed .u-nav-link:hover .u-nav-label, .u-collapsed .u-nav-link:focus-visible .u-nav-label,
  .u-collapsed .u-collapse:hover .u-nav-label, .u-collapsed .u-collapse:focus-visible .u-nav-label { opacity: 1; transform: translate(0, -50%); }
  .u-collapsed .sidebar-deco { display: none; }
}
@media (max-width: 1024px) {
  .u-collapse { display: none; }
}

.u-overlay { display: none; position: fixed; inset: 0; background: var(--dk-b-1f1a3d-35, rgba(31,26,61,.35)); z-index: 40; }

/* ===== BOTTOM NAV (phones and tablets; the drawer and its overlay sit above it) ===== */
.u-bottom { display: none; }
@media (max-width: 1024px) {
  .u-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--dk-b-ffffff, #fff); border-top: 1.5px solid var(--line); box-shadow: 0 -6px 20px var(--dk-b-1f1a3d-6, rgba(31,26,61,.06));
  }
  .u-bottom-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 4px 2px; border: 0; border-radius: 14px; background: none;
    font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2); text-decoration: none; cursor: pointer;
  }
  .u-bottom-link .mdi { font-size: 24px; line-height: 1; }
  .u-bottom-link.active { color: var(--dkf-p-600, var(--p-600)); }
  .u-bottom-link.active .u-bottom-icon { background: var(--p-100); }
  .u-bottom-link:focus-visible { outline: 2px solid var(--p-600); outline-offset: -2px; }
  .u-bottom-icon { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .15s; }
  .u-bottom-count {
    position: absolute; top: -4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dk-b-dc2626, #dc2626); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; border: 2px solid var(--dk-b-ffffff, #fff);
  }
  /* Room for the bar under the page; the drawer's Menu button is not needed next to "More". */
  .has-bottom-nav .u-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .has-bottom-nav .u-hamburger { display: none; }
  .has-bottom-nav .lsd-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ===== TOPBAR ===== */
.u-topbar {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px 18px 34px;
  /* stays on top while the page scrolls: below the drawer (40+) and the bottom bar (35), above the content */
  position: sticky; top: 0; z-index: 30; background: var(--bg); transition: box-shadow .2s, padding .2s;
}
.u-topbar.is-stuck { padding-top: 12px; padding-bottom: 12px; box-shadow: 0 6px 18px rgba(31,26,61,.08); }
[data-theme="dark"] .u-topbar.is-stuck { box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.u-hamburger {
  display: none; height: 44px; padding: 0 14px; gap: 6px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--dk-b-ffffff, #fff); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.u-hamburger .mdi { font-size: 22px; }

.u-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.u-top-brand { display: none; }
@media (max-width: 1024px) {
  .u-top-brand { display: flex; gap: 6px; }
  .u-top-brand .u-brand-logo { width: 38px; height: 38px; }
  .u-top-brand .u-brand-name, .u-top-brand .u-brand-sub { font-size: 18px; }
}

.u-user { position: relative; }
.u-user-btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); border-radius: 12px; }
.u-avatar {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--p-500); color: var(--dk-f-ffffff, #fff); font-weight: 800; font-size: 17px;
  box-shadow: 0 0 0 3px var(--p-100);
}
.u-avatar img { width: 100%; height: 100%; object-fit: cover; }
.u-user-name { font-size: 14px; font-weight: 600; }
.u-user-btn .mdi { font-size: 20px; color: var(--muted); }
.u-user-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px;
  background: var(--dk-b-ffffff, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--float);
  padding: 6px; z-index: 60;
}
.u-user.open .u-user-menu { display: block; }
.u-user-menu a, .u-user-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 9px 12px; border: 0; background: none; border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: left;
}
.u-user-menu a:hover, .u-user-menu button:hover { background: var(--p-50); color: var(--dkf-p-700, var(--p-700)); }
.u-user-menu .mdi { font-size: 18px; }
.u-user-menu form { margin: 0; }

/* ===== DASHBOARD GRID ===== */
.d-grid { display: grid; grid-template-columns: minmax(0, 1fr) 325px; gap: 24px; align-items: start; }
.d-main, .d-side { display: flex; flex-direction: column; min-width: 0; }
.d-side { gap: 18px; }

.card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Buttons: toy blocks. Solid purple on a darker base; they sink when pressed (DESIGN.md, identity motif). */
.btn-u {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 24px; margin-bottom: 4px;
  background: var(--p-600); color: var(--dk-f-ffffff, #fff); border: 0; cursor: pointer; font-family: inherit;
  border-radius: 14px; font-size: 15px; font-weight: 800;
  box-shadow: var(--block);
  transition: background .15s, transform .1s, box-shadow .1s;
}
.btn-u:hover { background: var(--p-500); }
.btn-u:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--p-700); }
.btn-u .mdi { font-size: 20px; }
.btn-u-lg { height: 52px; padding: 0 30px; font-size: 17px; border-radius: 16px; }
/* Small buttons stay compact visually; the ::after widens the tap area to 44px. */
.btn-u-sm { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 11px; gap: 4px; box-shadow: 0 3px 0 var(--p-700); margin-bottom: 3px; }
.btn-u-sm::after { content: ''; position: absolute; inset: -5px 0 -8px; }
.btn-u-sm .mdi { font-size: 17px; }
.btn-u-block { width: 100%; }

/* Progress bars */
.progress-row { display: flex; align-items: center; gap: 14px; }
.bar { flex: 1; height: 10px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--p-500); border-radius: inherit; }
.bar-sm { height: 7px; }
.progress-label { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ===== HERO ===== */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: stretch; min-height: 234px;
  background: var(--p-100);
  border-radius: 24px; border: 1.5px solid var(--dk-b-e6defa, #e6defa);
}
.hero-text { position: relative; z-index: 2; padding: 30px 0 28px 30px; max-width: 330px; }
.hero-salam { font-size: 22px; font-weight: 800; color: var(--dk-f-4b1fc4, #4b1fc4); }
.hero-name { font-size: 36px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); line-height: 1.15; margin: 2px 0 14px; letter-spacing: -.3px; }
.hero-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }
.hero-art { position: relative; flex: 1; min-width: 0; }
.hero-art .sidebar-deco { position: absolute; right: -10px; bottom: -20px; width: 330px; margin: 0; padding: 0; opacity: .85; }
.hero-art .sidebar-deco path[fill="#efe9fd"] { display: none; }
.hero-moon { position: absolute; top: 14px; right: 26px; font-size: 26px; color: var(--dk-f-c7b6f5, #c7b6f5); transform: rotate(-20deg); }
.hero-kid { position: absolute; bottom: 0; right: 80px; height: 100%; max-height: 240px; object-fit: contain; z-index: 1; }
.hero-kid-emoji { display: flex; align-items: center; justify-content: center; font-size: 150px; line-height: 1; height: auto; bottom: 6px; }
.hero-tablet { position: absolute; bottom: 4px; left: 50%; transform: translateX(-30%) rotate(-8deg); font-size: 64px; }

/* ===== SECTIONS ===== */
.sec { margin-top: 30px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sec-head h2, .side-head h2 { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--ink); }
.sec-head h2 .mdi, .side-head h2 .mdi { font-size: 28px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.sec-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 700; color: var(--dkf-p-600, var(--p-600)); white-space: nowrap; }
.sec-link .mdi { font-size: 17px; }
.sec-link:hover { color: var(--dkf-p-700, var(--p-700)); }

/* Continue learning */
.continue { display: flex; gap: 28px; padding: 22px 20px; }
.continue-img {
  position: relative; flex: 0 0 204px; height: 148px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--dk-b-bfe3fb, #bfe3fb) 0%, var(--dk-b-e3f3fd, #e3f3fd) 55%, var(--dk-b-cde9b6, #cde9b6) 56%, var(--dk-b-a8d58c, #a8d58c) 100%);
  display: flex; align-items: flex-end; justify-content: center;
}
.continue-img img { width: 100%; height: 100%; object-fit: cover; }
.continue-emoji { font-size: 92px; line-height: 1; margin-right: 50px; }
.continue-bubble {
  position: absolute; top: 34px; right: 30px;
  background: var(--dk-b-ffffff, #fff); color: var(--dk-f-7c2bd0, #7c2bd0); font-weight: 800; font-size: 14px;
  padding: 7px 10px; border-radius: 10px; box-shadow: 0 2px 6px var(--dk-b-000000-8, rgba(0,0,0,.08));
}
.continue-bubble::after { content: ''; position: absolute; left: 6px; bottom: -6px; border: 6px solid transparent; border-top-color: var(--dk-b-ffffff, #fff); border-left-width: 2px; }
.continue-body { flex: 1; min-width: 0; padding-top: 2px; }
.chip { display: inline-block; padding: 4px 10px; background: var(--p-100); color: var(--dk-f-4b1fc4, #4b1fc4); font-size: 12px; font-weight: 700; border-radius: 8px; }
.continue-body h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 12px 0 10px; }
.continue-body p { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; max-width: 240px; }
.continue-body .progress-row { margin-bottom: 14px; }

/* Card grids */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.blob {
  width: 86px; height: 86px; margin: 0 auto 14px;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background: var(--p-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1;
}
.blob img { width: 100%; height: 100%; object-fit: contain; }
.blob-cover { overflow: hidden; }
.blob-cover img { object-fit: cover; }

/* Learning path card */
.path { position: relative; display: block; padding: 18px 14px 18px; transition: transform .15s, box-shadow .15s; }
.path:hover { transform: translateY(-2px); border-color: var(--p-300); }
.path.is-current { background: var(--p-50); border: 2px solid var(--p-500); }
.path.is-locked .blob { filter: saturate(.85); }
.path-badge { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; }
.path-badge-check { width: 22px; height: 22px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 15px; }
.path-badge-lock { color: var(--muted); font-size: 17px; }
.path-level { font-size: 15px; font-weight: 700; color: var(--ink); }
.path-title { font-size: 13px; font-weight: 600; color: var(--muted); margin: 6px 0 16px; }
.path.is-current .path-title { color: var(--dkf-p-600, var(--p-600)); font-weight: 700; }
.path-count { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* Game card */
.game { padding: 16px 14px 16px; display: flex; flex-direction: column; }
.game .blob { width: 92px; height: 72px; margin-bottom: 12px; }
.tiles { display: flex; gap: 3px; }
.tiles b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 26px; border-radius: 5px; font-size: 16px; font-weight: 900;
  background: var(--dk-b-fcd34d, #fcd34d); color: var(--dk-f-7c2d12, #7c2d12); box-shadow: inset 0 -3px 0 var(--dk-b-000000-12, rgba(0,0,0,.12));
}
.tiles b:nth-child(2) { background: var(--dk-b-fbbf24, #fbbf24); }
.tiles b:nth-child(3) { background: var(--dk-b-a78bfa, #a78bfa); color: var(--dk-f-2e1065, #2e1065); }
.game-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.game-desc { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 5px 0 14px; flex: 1; }

/* ===== RIGHT COLUMN ===== */
.side-card { padding: 22px 20px; }
.side-card-flush { padding: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.side-head h2 { font-size: 17px; }
.side-head-line { padding: 18px 20px 14px; margin: 0; border-bottom: 1.5px solid var(--line); }

.goal-text { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.goal-note {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  padding: 14px 16px; border-radius: 14px; background: var(--p-50);
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.goal-note span { font-size: 22px; }

/* Achievement badges */
.badges { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
.badge-item { text-align: center; padding: 0 4px; border-right: 1.5px solid var(--line); }
.badge-item:nth-child(3n) { border-right: 0; }
.hex {
  width: 64px; height: 72px; margin: 0 auto 10px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; align-items: center; justify-content: center;
}
.hex-inner {
  width: 54px; height: 62px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--dk-f-ffffff, #fff);
}
.hex-gold   { background: var(--dk-b-e7a313, #e7a313); }
.hex-gold   .hex-inner { background: linear-gradient(160deg, var(--dk-b-fde68a, #fde68a), var(--dk-b-f59e0b, #f59e0b)); color: #fff7d6; }
.hex-gold   .hex-inner .mdi { color: var(--dk-f-fde047, #fde047); filter: drop-shadow(0 1px 1px var(--dk-b-b45309, #b45309)); }
.hex-purple { background: var(--dk-b-6d3fe0, #6d3fe0); }
.hex-purple .hex-inner { background: linear-gradient(160deg, var(--dk-b-c4b5fd, #c4b5fd), var(--dk-b-7c3aed, #7c3aed)); }
.hex-green  { background: var(--dk-b-1aa77a, #1aa77a); }
.hex-green  .hex-inner { background: linear-gradient(160deg, var(--dk-b-a7f3d0, #a7f3d0), var(--dk-b-10b981, #10b981)); }
.hex-locked { background: var(--dk-b-e3e2f2, #e3e2f2); }
.hex-locked .hex-inner { background: var(--dk-b-f3f3fa, #f3f3fa); color: var(--dk-f-8b88a8, #8b88a8); font-size: 22px; }
.badge-title { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.badge-level { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* Recent activity */
.activity { list-style: none; margin: 0; padding: 4px 20px; }
.activity li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1.5px solid var(--line); }
.activity li:last-child { border-bottom: 0; }
.act-icon { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.act-green  { background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-16a34a, #16a34a); }
.act-purple { background: var(--p-100); color: var(--dkf-p-600, var(--p-600)); }
.act-gold   { background: var(--dk-b-fef3c7, #fef3c7); color: var(--dk-f-f59e0b, #f59e0b); }
.act-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.act-subject { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.act-time { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }

/* Quote */
.quote-card {
  position: relative; overflow: hidden; text-align: center;
  padding: 26px 24px 30px; border-radius: var(--radius);
  background: var(--p-100);
}
.quote-mosque { font-size: 40px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.quote-text { margin: 10px 0 14px; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--dk-f-3a1c9c, #3a1c9c); }
.quote-src { font-size: 12.5px; color: var(--ink-2); }
.quote-leaf { position: absolute; font-size: 42px; color: var(--dk-f-cfc0f7, #cfc0f7); }
.quote-leaf-tr { top: 4px; right: 4px; transform: rotate(40deg); }
.quote-leaf-bl { bottom: 2px; left: 4px; transform: rotate(-140deg); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1280px) {
  .d-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .continue-body p { max-width: none; }
}
@media (max-width: 1120px) {
  .d-grid { grid-template-columns: 1fr; }
  .d-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .u-sidebar { transform: translateX(-100%); box-shadow: 0 10px 40px var(--dk-b-1f1a3d-20, rgba(31,26,61,.2)); }
  .u-sidebar.open { transform: none; }
  .u-overlay.open { display: block; }
  .u-main { margin-left: 0; }
  .u-hamburger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .u-topbar { padding: 16px; }
  .u-topbar.is-stuck { padding: 10px 16px; }
  .u-content { padding: 0 16px 32px; }
}
@media (max-width: 760px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-side { grid-template-columns: 1fr; }
  .u-user-name { display: none; }
  .u-topbar-right { gap: 12px; }
  .continue { flex-direction: column; gap: 16px; }
  .continue-img { flex-basis: auto; height: 170px; }
  .hero-art { display: none; }
  .hero-text { max-width: none; padding: 24px 22px; }
  .hero-name { font-size: 30px; }
}

/* ===================================================
   LEARNING PATHS PAGE
   =================================================== */
.lp-head {
  position: relative; display: flex; align-items: flex-start; gap: 24px;
  min-height: 236px; margin: -6px -24px 0 -34px; padding: 18px 24px 0 34px;
  background: var(--dk-b-ffffff, #fff);
  overflow: hidden;
}
.lp-head-text { position: relative; z-index: 2; flex: 1; min-width: 0; padding-top: 6px; }
.lp-back { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--dkf-p-900, var(--p-900)); }
.lp-back .mdi { font-size: 18px; color: var(--dkf-p-600, var(--p-600)); }
.lp-back:hover { color: var(--dkf-p-600, var(--p-600)); }
.lp-title { font-size: 40px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); letter-spacing: -.4px; line-height: 1.15; margin: 18px 0 14px; }
.lp-sparkle { font-size: 24px; vertical-align: top; }
.lp-sub { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.lp-head-art { position: absolute; right: 290px; bottom: 0; width: 330px; height: 236px; z-index: 1; pointer-events: none; }
.lp-head-art .sidebar-deco { position: absolute; left: 0; right: 0; bottom: -18px; margin: 0; padding: 0; opacity: .8; }
.lp-head-art .sidebar-deco path[fill="#efe9fd"] { display: none; }
.lp-kid { position: absolute; bottom: 0; left: 40px; height: 100%; object-fit: contain; }
.lp-kid-emoji { display: flex; align-items: flex-end; font-size: 140px; line-height: 1; height: auto; bottom: 0; }
.lp-book {
  position: absolute; bottom: 0; left: 118px; transform: rotate(-10deg);
  padding: 10px 12px; font-size: 13px !important; border-radius: 6px 10px 10px 6px;
  background: var(--p-600); color: var(--dk-f-ffffff, #fff);
  font-size: 15px; font-weight: 800; box-shadow: -4px 0 0 var(--dk-b-3b0f8c, #3b0f8c), 0 6px 14px var(--dk-b-2b1a6b-25, rgba(43,26,107,.25));
}

.lp-current { position: relative; z-index: 2; flex: 0 0 274px; margin-top: 14px; padding: 20px 22px 18px; }
.lp-current-star { position: absolute; top: 18px; left: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--dk-b-fff4cc, #fff4cc); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.lp-current-body { padding-left: 46px; margin-bottom: 18px; }
.lp-current-label { font-size: 13px; color: var(--ink-2); }
.lp-current-level { font-size: 24px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 4px 0 2px; }
.lp-current-title { font-size: 14px; font-weight: 600; color: var(--dkf-p-600, var(--p-600)); }
.lp-current-meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }

/* Level cards */
.lp-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 0; position: relative; z-index: 3; }
.lp-card { display: flex; flex-direction: column; padding: 18px 20px 20px; }
.lp-card.is-current { border: 2px solid var(--p-500); background: var(--p-50); }
.lp-art {
  position: relative; height: 118px; margin-bottom: 20px; border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--p-50);
}
.lp-card.is-current .lp-art { background: var(--p-100); }
.lp-art img { width: 100%; height: 100%; object-fit: contain; }
.lp-art-emoji { font-size: 72px; line-height: 1; filter: drop-shadow(0 6px 8px var(--dk-b-4c2da0-15, rgba(76,45,160,.15))); }
.lp-tag { position: absolute; top: 2px; right: 2px; padding: 4px 12px; border-radius: 999px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 12.5px; font-weight: 700; }
.lp-lock { position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--dk-b-f1eef9, #f1eef9); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.lp-level { font-size: 20px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); }
.lp-name { font-size: 14.5px; font-weight: 600; color: var(--muted); margin: 8px 0 18px; }
.lp-card.is-current .lp-name { color: var(--dkf-p-600, var(--p-600)); font-weight: 800; font-size: 16px; }
.lp-count { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.lp-card .progress-row { gap: 12px; margin-bottom: 22px; }
.lp-card .progress-label { font-size: 12.5px; }
.lp-btn { margin-top: auto; height: 40px; padding: 0 12px; gap: 8px; font-size: 14px; white-space: nowrap; }
.lp-btn-soft {
  width: 100%; border: 0; border-radius: 12px; cursor: not-allowed;
  background: var(--p-50); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600;
}

/* Bottom: what you'll learn + keep going */
.lp-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 374px; gap: 24px; margin-top: 38px; align-items: stretch; }
.lp-learn-head { display: flex; gap: 14px; margin-bottom: 18px; }
.lp-learn-head > .mdi { font-size: 34px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.lp-learn-head h2 { font-size: 20px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin: 2px 0 8px; }
.lp-learn-head p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.lp-skills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lp-skill { padding: 18px 12px 20px; border-radius: 14px; text-align: center; }
.lp-skill .mdi { font-size: 38px; line-height: 1; }
.lp-skill-title { font-size: 15px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin: 10px 0 6px; }
.lp-skill-desc { font-size: 12px; line-height: 1.55; color: var(--muted); }
.tone-lilac { background: var(--dk-b-f4f1ff, #f4f1ff); } .tone-lilac .mdi { color: var(--dk-f-7c4dea, #7c4dea); }
.tone-blue  { background: var(--dk-b-eef5ff, #eef5ff); } .tone-blue  .mdi { color: var(--dk-f-3b82f6, #3b82f6); }
.tone-mint  { background: var(--dk-b-ecfbf4, #ecfbf4); } .tone-mint  .mdi { color: var(--dk-f-10b981, #10b981); }
.tone-pink  { background: var(--dk-b-fbf0fb, #fbf0fb); } .tone-pink  .mdi { color: var(--dk-f-9333ea, #9333ea); }
.tone-cream { background: var(--dk-b-fff8e8, #fff8e8); } .tone-cream .mdi { color: var(--dk-f-d97706, #d97706); }

.lp-keep {
  position: relative; overflow: hidden; min-height: 250px;
  padding: 24px 26px; border-radius: var(--radius);
  background: var(--p-100);
}
.lp-keep h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin-bottom: 14px; }
.lp-keep h2 .mdi, .ls-great h2 .mdi { font-size: 26px; color: var(--sun-deep); }
.lp-keep p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; position: relative; z-index: 1; }
.lp-keep::after { /* soft clouds */
  content: ''; position: absolute; left: -20px; right: -20px; bottom: -40px; height: 90px;
  background: radial-gradient(circle at 15% 40%, var(--dk-b-ddd1fb, #ddd1fb) 0 40px, transparent 41px),
              radial-gradient(circle at 40% 60%, var(--dk-b-ddd1fb, #ddd1fb) 0 50px, transparent 51px),
              radial-gradient(circle at 70% 50%, var(--dk-b-e3d9fc, #e3d9fc) 0 46px, transparent 47px),
              radial-gradient(circle at 95% 40%, var(--dk-b-ddd1fb, #ddd1fb) 0 44px, transparent 45px);
}
.lp-keep-trail { position: absolute; left: 70px; bottom: 40px; width: 190px; }
.lp-keep-rocket { position: absolute; right: 30px; bottom: 34px; font-size: 76px; line-height: 1; z-index: 1; }
.lp-keep-spark { position: absolute; color: var(--dk-f-f5b301, #f5b301); font-size: 16px; }
.lp-keep-spark.s1 { right: 130px; bottom: 82px; }
.lp-keep-spark.s2 { right: 18px; bottom: 54px; font-size: 12px; }

@media (max-width: 1280px) {
  .lp-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-head-art { display: none; }
  .lp-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .lp-head { margin: 0 -16px; padding: 12px 16px 24px; flex-direction: column; min-height: 0; }
  .lp-current { flex-basis: auto; width: 100%; max-width: 360px; margin-top: 0; }
  .lp-levels { margin-top: 20px; }
}
@media (max-width: 760px) {
  .lp-title { font-size: 30px; }
  .lp-sub br, .lp-learn-head p br { display: none; }
  .lp-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lp-card { padding: 14px; }
  .lp-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .lp-levels { grid-template-columns: 1fr; }
}

/* ===================================================
   LESSONS PAGE
   =================================================== */
.ls-crumb { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--dkf-p-900, var(--p-900)); }
.ls-crumb a { display: inline-flex; align-items: center; gap: 14px; color: var(--dkf-p-600, var(--p-600)); }
.ls-crumb a .mdi { font-size: 18px; }
.ls-crumb > .mdi { font-size: 18px; color: var(--muted); }

.ls-hero { min-height: 218px; }
.ls-hero .hero-text { padding: 20px 0 26px 26px; max-width: 360px; }
.ls-pill { display: inline-block; padding: 3px 11px; border: 1.5px solid var(--dk-b-c9b8f6, #c9b8f6); border-radius: 999px; background: var(--dk-b-ffffff, #fff); color: var(--dk-f-4b1fc4, #4b1fc4); font-size: 13px; font-weight: 700; }
.ls-hero-title { font-size: 33px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); line-height: 1.25; margin: 12px 0 14px; letter-spacing: -.3px; }
.ls-hero .hero-sub { margin: 0; }
.ls-bubble {
  position: absolute; z-index: 2; background: var(--dk-b-ffffff, #fff); color: var(--dk-f-4b1fc4, #4b1fc4); font-weight: 800;
  padding: 8px 14px; border-radius: 16px; box-shadow: 0 4px 12px var(--dk-b-4c2da0-10, rgba(76,45,160,.1)); line-height: 1.2; text-align: center;
}
.ls-bubble-1 { top: 40px; left: 40px; font-size: 16px; transform: rotate(-12deg); }
.ls-bubble-2 { top: 104px; left: 70px; font-size: 13px; transform: rotate(-14deg); }
.ls-star { position: absolute; top: 72px; left: 170px; font-size: 24px; z-index: 2; }
.ls-hero .hero-kid { right: 90px; }
.ls-hero .hero-kid-emoji { font-size: 130px; }

/* Category tabs */
.ls-tabs { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ls-tabs::-webkit-scrollbar { display: none; }
.ls-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 42px; padding: 0 18px; border-radius: 14px;
  background: var(--p-50); color: var(--ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .12s, color .12s;
}
.ls-tab .mdi { font-size: 21px; }
.ls-tab:hover { background: var(--p-100); color: var(--dkf-p-700, var(--p-700)); }
.ls-tab.active { background: var(--p-600); color: var(--dk-f-ffffff, #fff); box-shadow: 0 6px 14px var(--dk-b-5b21d6-25, rgba(91,33,214,.25)); }

.ls-sec { margin-top: 26px; }
.ls-sort { position: relative; }
.ls-sort select {
  appearance: none; height: 32px; padding: 0 34px 0 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--dk-b-ffffff, #fff); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.ls-sort .mdi { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }

/* Lesson rows */
.ls-list { display: flex; flex-direction: column; gap: 10px; }
.ls-item { display: flex; align-items: center; gap: 18px; padding: 12px 18px 12px 14px; }
.ls-thumb {
  position: relative; flex: 0 0 176px; height: 106px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start; padding-left: 22px;
}
.ls-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-park   { background: linear-gradient(180deg, var(--dk-b-bfe3fb, #bfe3fb) 0%, var(--dk-b-e3f3fd, #e3f3fd) 55%, var(--dk-b-c8e7b0, #c8e7b0) 56%, var(--dk-b-9fd283, #9fd283) 100%); }
.scene-garden { background: linear-gradient(180deg, var(--dk-b-a8dcf6, #a8dcf6) 0%, var(--dk-b-dff2fb, #dff2fb) 55%, var(--dk-b-f7d48a, #f7d48a) 56%, var(--dk-b-f2b766, #f2b766) 100%); }
.scene-field  { background: linear-gradient(180deg, var(--dk-b-cfe9c3, #cfe9c3) 0%, var(--dk-b-eef7e4, #eef7e4) 50%, var(--dk-b-f3d79a, #f3d79a) 51%, var(--dk-b-e7b96c, #e7b96c) 100%); }
.scene-sky    { background: linear-gradient(180deg, var(--dk-b-8fd0f5, #8fd0f5) 0%, var(--dk-b-c9e9fb, #c9e9fb) 60%, var(--dk-b-a7da8f, #a7da8f) 61%, var(--dk-b-86c86c, #86c86c) 100%); }
.ls-thumb-emoji { font-size: 62px; line-height: 1; margin-bottom: 4px; }
.ls-thumb-bubble {
  position: absolute; top: 14px; right: 10px; max-width: 76px;
  background: var(--dk-b-ffffff, #fff); color: var(--dk-f-4b1fc4, #4b1fc4); font-size: 11.5px; font-weight: 800; line-height: 1.2; text-align: center;
  padding: 6px 8px; border-radius: 10px; box-shadow: 0 2px 6px var(--dk-b-000000-8, rgba(0,0,0,.08));
}
.ls-body { flex: 1; min-width: 0; }
.chip-sm { padding: 2px 8px; font-size: 11px; border-radius: 6px; }
.ls-body h3 { font-size: 15.5px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin: 6px 0 4px; }
.ls-body p { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 0 0 8px; max-width: 330px; }
.ls-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 12px; color: var(--ink-2); }
.ls-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ls-meta .mdi { font-size: 16px; color: var(--ink-2); }
.ls-action { flex: 0 0 170px; display: flex; flex-direction: column; gap: 8px; }
.ls-count { font-size: 11.5px; color: var(--ink-2); }
.ls-action .bar { flex: none; margin-bottom: 14px; }
.ls-action .btn-u, .btn-u-outline { height: 36px; padding: 0 12px; font-size: 13px; gap: 8px; white-space: nowrap; }
.btn-u-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--dk-b-c9b8f6, #c9b8f6); border-radius: 12px; background: var(--dk-b-ffffff, #fff); color: var(--dk-f-4b1fc4, #4b1fc4); font-weight: 700;
  transition: background .12s, border-color .12s;
}
.btn-u-outline:hover { background: var(--p-50); border-color: var(--p-400); }
.btn-u-outline .mdi { font-size: 18px; }
.ls-empty { padding: 40px; text-align: center; color: var(--muted); }
.ls-empty .mdi { display: block; font-size: 36px; color: var(--dkf-p-300, var(--p-300)); margin-bottom: 6px; }

/* Right column */
.ls-overall { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ring {
  --p: 0; flex: 0 0 88px; height: 88px; border-radius: 50%;
  background: conic-gradient(var(--p-600) calc(var(--p) * 1%), var(--track) 0);
  display: flex; align-items: center; justify-content: center;
}
.ring span {
  width: 72px; height: 72px; border-radius: 50%; background: var(--dk-b-ffffff, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: var(--dkf-p-900, var(--p-900));
}
.ls-overall-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ls-overall-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ls-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ls-skills li { display: flex; align-items: center; gap: 14px; }
.ls-skill-icon { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--p-50); color: var(--dkf-p-600, var(--p-600)); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ls-skill-body { flex: 1; min-width: 0; }
.ls-skill-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.ls-skill-row span:last-child { font-size: 12px; }

.ls-recent { list-style: none; margin: 0; padding: 0; }
.ls-recent li + li { border-top: 1.5px solid var(--line); }
.ls-recent a { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.ls-recent-thumb {
  flex: 0 0 60px; height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: linear-gradient(180deg, var(--dk-b-bfe3fb, #bfe3fb) 0%, var(--dk-b-e3f3fd, #e3f3fd) 60%, var(--dk-b-c8e7b0, #c8e7b0) 61%, var(--dk-b-9fd283, #9fd283) 100%);
}
.ls-recent-thumb.is-game { background: var(--p-100); }
.ls-recent-body { flex: 1; min-width: 0; }
.ls-recent-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ls-recent-sub { font-size: 12px; color: var(--muted); margin: 2px 0 4px; }
.ls-recent .progress-row { gap: 10px; }
.ls-recent .progress-label { font-size: 11px; }
.bar-xs { height: 5px; }
.ls-recent-go { font-size: 22px; color: var(--ink-2); }

.ls-great {
  position: relative; overflow: hidden; min-height: 160px; padding: 24px 22px;
  border-radius: var(--radius); background: var(--p-100);
}
.ls-great h2 { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin-bottom: 14px; }
.ls-great h2 span { font-size: 24px; }
.ls-great p { position: relative; z-index: 1; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.ls-great-star { position: absolute; right: 22px; bottom: 26px; font-size: 64px; line-height: 1; z-index: 1; filter: drop-shadow(0 6px 10px var(--dk-b-f59e0b-35, rgba(245,158,11,.35))); }
.ls-great::after {
  content: ''; position: absolute; left: -20px; right: -20px; bottom: -48px; height: 80px;
  background: radial-gradient(circle at 15% 40%, var(--dk-b-ddd1fb, #ddd1fb) 0 34px, transparent 35px),
              radial-gradient(circle at 55% 60%, var(--dk-b-e3d9fc, #e3d9fc) 0 44px, transparent 45px),
              radial-gradient(circle at 90% 40%, var(--dk-b-ddd1fb, #ddd1fb) 0 40px, transparent 41px);
}

@media (max-width: 1280px) {
  .ls-body p { max-width: none; }
}
@media (max-width: 760px) {
  .ls-item { flex-wrap: wrap; }
  .ls-thumb { flex: 0 0 100%; height: 140px; }
  .ls-action { flex: 0 0 100%; }
  .ls-hero-title br, .ls-hero .hero-sub br { display: none; }
  .ls-hero-title { font-size: 28px; }
}

/* ===================================================
   GAMES PAGE
   =================================================== */
.gm .d-grid { align-items: stretch; }
.gm-hero { min-height: 230px; }
.gm-hero .hero-text { padding: 26px 0 26px 30px; max-width: 380px; }
.gm-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--dkf-p-900, var(--p-900)); }
.gm-eyebrow .mdi { font-size: 26px; color: var(--dkf-p-600, var(--p-600)); }
.gm-hero .ls-hero-title { margin-top: 8px; }
.gm-bubble { top: 34px; left: 20px; font-size: 15px; padding: 12px 16px; border-radius: 22px; transform: rotate(-14deg); }
.gm-pad { position: absolute; top: 118px; left: 96px; font-size: 40px; z-index: 2; transform: rotate(-12deg); filter: hue-rotate(40deg) saturate(.8); }
.gm-star { position: absolute; z-index: 2; }
.gm-star-1 { top: 176px; left: 52px; font-size: 26px; }
.gm-star-2 { top: 80px; left: -24px; font-size: 18px; }
.gm-hero .hero-kid { right: 80px; }
.gm-hero .hero-kid-emoji { font-size: 136px; }
.gm-controller { position: absolute; bottom: -18px; left: 50%; transform: translateX(-10%) rotate(-10deg); font-size: 52px; }

.gm-goal .goal-text strong { font-weight: 800; color: var(--dkf-p-900, var(--p-900)); }
.gm-goal .goal-note { align-items: flex-start; }
.gm-goal .goal-note strong { color: var(--ink); }
.gm-goal .goal-note small { font-size: 12.5px; color: var(--muted); }

.gm-row2 { margin-top: 22px; }
.gm-row2 .ls-tabs { margin-top: 0; }
.gm-row2 .ls-sec { margin-top: 24px; }
.gm-row2 .d-side { height: 100%; }
.gm-top { height: 100%; padding: 18px 16px; }

/* Game cards */
.gm-card { display: flex; flex-direction: column; padding: 14px 14px 16px; }
.gm-art {
  position: relative; height: 156px; margin-bottom: 16px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gm-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; background: var(--dk-b-ffffff-92, rgba(255,255,255,.92));
  font-size: 11px; font-weight: 700; color: var(--dk-f-4b1fc4, #4b1fc4);
}
.gm-tag .mdi { font-size: 13px; }
.gm-title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.gm-desc { flex: 1; font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.gm-play { height: 34px; gap: 8px; font-size: 13.5px; }
.gm-play .mdi { font-size: 18px; }

/* CSS art for the featured games */
.art-word-match { background: var(--dk-b-e2d8fb, #e2d8fb); gap: 6px; }
.wm-card { display: flex; align-items: center; justify-content: center; background: var(--dk-b-ffffff, #fff); border-radius: 12px; box-shadow: 0 6px 14px var(--dk-b-4c2da0-18, rgba(76,45,160,.18)); }
.wm-pic { width: 74px; height: 84px; font-size: 46px; transform: rotate(-8deg); }
.wm-word { width: 74px; height: 64px; font-size: 18px; font-weight: 800; color: var(--dk-f-4b1fc4, #4b1fc4); transform: rotate(6deg) translateY(10px); }

.art-sentence { background: var(--p-100); flex-direction: column; gap: 14px; }
.sb-line { background: var(--dk-b-ffffff, #fff); padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 10px var(--dk-b-4c2da0-12, rgba(76,45,160,.12)); transform: rotate(-3deg); }
.sb-line b { display: inline-block; padding: 0 6px; margin: 0 2px; border: 1.5px solid var(--dk-b-a78bfa, #a78bfa); border-radius: 6px; color: var(--dk-f-6d28d9, #6d28d9); }
.sb-chips { display: flex; gap: 8px; }
.sb-chips b { padding: 4px 10px; border-radius: 6px; font-size: 12.5px; color: var(--dk-f-ffffff, #fff); }
.c-green { background: var(--dk-b-4ade80, #4ade80); } .c-teal { background: var(--dk-b-5eead4, #5eead4); color: var(--dk-f-115e59, #115e59) !important; } .c-blue { background: var(--dk-b-6366f1, #6366f1); }

.art-listen { background: var(--dk-b-e9e0fc, #e9e0fc); }
.lc-phones { font-size: 110px; line-height: 1; color: var(--dk-f-6d28d9, #6d28d9); filter: drop-shadow(0 6px 10px var(--dk-b-4c2da0-30, rgba(76,45,160,.3))); }
.lc-play { position: absolute; bottom: 26px; width: 30px; height: 30px; border-radius: 50%; background: var(--dk-b-5b21d6, #5b21d6); color: var(--dk-f-ffffff, #fff); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 3px solid var(--dk-b-ffffff, #fff); }

.art-reading { background: linear-gradient(180deg, var(--dk-b-ede7ff, #ede7ff) 0%, var(--dk-b-f6efe0, #f6efe0) 60%, var(--dk-b-f3d79a, #f3d79a) 100%); }
.rc-book { display: flex; gap: 4px; padding: 10px; background: var(--dk-b-5b6fd6, #5b6fd6); border-radius: 8px; transform: rotate(-6deg); box-shadow: 0 8px 18px var(--dk-b-2b1a6b-20, rgba(43,26,107,.2)); }
.rc-page { width: 72px; height: 84px; background: var(--dk-b-ffffff, #fff); border-radius: 4px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.rc-cat { font-size: 40px; background: var(--dk-b-fff3d6, #fff3d6); }

/* Top players */
.gm-players { list-style: none; margin: 0; padding: 0; }
.gm-players li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; margin-bottom: 4px; }
.gm-players li.is-me { background: var(--p-100); }
.gm-players li.is-me .gm-player-name { color: var(--dkf-p-600, var(--p-600)); }
.medal {
  position: relative; flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--dk-f-ffffff, #fff);
}
.medal::after { content: ''; position: absolute; bottom: -7px; border: 4px solid transparent; border-top: 6px solid currentColor; opacity: .5; }
.medal-1 { background: var(--dk-b-fbbf24, #fbbf24); color: #fff; }
.medal-2 { background: var(--dk-b-a5b4cb, #a5b4cb); }
.medal-3 { background: var(--dk-b-f97316, #f97316); }
.rank { flex: 0 0 22px; text-align: center; font-size: 15px; font-weight: 800; color: var(--ink); }
.gm-avatar {
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--dk-b-fde7c8, #fde7c8);
}
.gm-player-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.gm-player-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* All games */
.gm-all { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.gm-card-sm .gm-art-sm { height: 124px; }
.gm-emoji { font-size: 56px; line-height: 1; letter-spacing: -6px; filter: drop-shadow(0 6px 8px var(--dk-b-4c2da0-15, rgba(76,45,160,.15))); }
.gm-emoji-icon { color: var(--dkf-p-600, var(--p-600)); letter-spacing: 0; }
.gtone-vocabulary { background: linear-gradient(180deg, var(--dk-b-dff1fb, #dff1fb) 0%, var(--dk-b-eaf6e2, #eaf6e2) 60%, var(--dk-b-b9df9c, #b9df9c) 100%); }
.gtone-grammar    { background: var(--dk-b-e3ebfc, #e3ebfc); }
.gtone-listening  { background: var(--dk-b-ece2fc, #ece2fc); }
.gtone-reading    { background: var(--dk-b-fdf0d5, #fdf0d5); }
.gtone-islamic    { background: linear-gradient(180deg, var(--dk-b-efe7ff, #efe7ff) 0%, var(--dk-b-f7f1ff, #f7f1ff) 60%, var(--dk-b-cfe8b8, #cfe8b8) 100%); }

@media (max-width: 1280px) {
  .gm-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  .gm-row2 .d-side { display: block; }
  .gm .d-grid > .gm-goal { margin-top: 0; }
}
@media (max-width: 760px) {
  .gm-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gm-hero .ls-hero-title br, .gm-hero .hero-sub br { display: none; }
}

/* ===================================================
   GAME DETAIL PAGE
   =================================================== */
/* Letter tiles (shared by hero, steps and preview) */
.tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 48px; border-radius: 10px;
  background: var(--p-600); color: var(--dk-f-ffffff, #fff);
  font-size: 26px; font-weight: 900; line-height: 1;
  box-shadow: inset 0 -5px 0 var(--dk-b-000000-18, rgba(0,0,0,.18)), 0 4px 10px var(--dk-b-4c2da0-25, rgba(76,45,160,.25));
}
.tile-lg { width: 62px; height: 66px; font-size: 36px; border-radius: 14px; }
.tile-sm { width: 30px; height: 32px; font-size: 17px; border-radius: 8px; background: var(--p-400); }
.tile-xs { width: 24px; height: 26px; font-size: 14px; border-radius: 6px; box-shadow: inset 0 -3px 0 var(--dk-b-000000-15, rgba(0,0,0,.15)); }
.tile-outline { background: var(--dk-b-ffffff, #fff); color: var(--dk-f-5b21d6, #5b21d6); border: 2px solid var(--dk-b-a78bfa, #a78bfa); box-shadow: none; }
.slot { display: inline-block; width: 30px; height: 32px; border-radius: 8px; border: 2px dashed var(--dk-b-c9b8f6, #c9b8f6); background: var(--dk-b-ffffff, #fff); }
.slot-xs { width: 24px; height: 26px; border-style: solid; border-color: var(--dk-b-ddd2fb, #ddd2fb); background: var(--dk-b-f6f3ff, #f6f3ff); }

.gs-hero {
  position: relative; display: flex; min-height: 330px; overflow: hidden;
  background: var(--dk-b-ffffff, #fff);
  border: 1.5px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.gs-hero-text { position: relative; z-index: 2; padding: 22px 0 26px 16px; max-width: 460px; flex-shrink: 0; }
.gs-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 4px 12px; }
.gs-pill .mdi { font-size: 17px; }
.gs-title { font-size: 40px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); letter-spacing: -.4px; margin: 14px 0 12px; }
.gs-title span { font-size: 30px; vertical-align: 6px; }
.gs-desc { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 22px; max-width: 360px; }
.gs-facts { display: flex; gap: 0; margin-bottom: 24px; }
.gs-facts > div { display: flex; align-items: center; gap: 10px; padding-right: 16px; margin-right: 16px; border-right: 1.5px solid var(--line); }
.gs-facts > div:last-child { border-right: 0; }
.gs-facts .mdi { font-size: 28px; color: var(--dkf-p-600, var(--p-600)); }
.gs-facts span { font-size: 12.5px; color: var(--muted); line-height: 1.5; white-space: nowrap; }
.gs-facts b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.gs-fact-star { font-size: 24px !important; }
.gs-start { height: 50px; padding: 0 30px; font-size: 18px; gap: 12px; border-radius: 14px; }

.gs-hero-art { position: relative; flex: 1; min-width: 0; }
.gs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.gs-hero-art .sidebar-deco { position: absolute; left: 0; right: 30px; bottom: 40px; margin: 0; padding: 0; opacity: .7; }
.gs-hero-art .sidebar-deco path[fill="#efe9fd"] { display: none; }
.gs-kid { position: absolute; top: 6px; right: 70px; font-size: 140px; line-height: 1; z-index: 1; }
.gs-fruit { position: absolute; top: 160px; left: 40px; font-size: 76px; z-index: 3; filter: drop-shadow(0 8px 10px var(--dk-b-b91c1c-25, rgba(185,28,28,.25))); }
.gs-held { position: absolute; top: 150px; right: 150px; z-index: 3; transform: rotate(-8deg); }
.gs-board {
  position: absolute; right: 18px; bottom: 54px; z-index: 2; display: flex; gap: 6px;
  padding: 12px 14px; border-radius: 16px; background: var(--p-600);
  border: 4px solid var(--dk-b-f6c66a, #f6c66a); box-shadow: 0 10px 22px var(--dk-b-2b1a6b-30, rgba(43,26,107,.3)); transform: rotate(4deg);
}
.gs-board .tile { background: var(--dk-b-ffffff, #fff); color: var(--dk-f-5b21d6, #5b21d6); box-shadow: inset 0 -4px 0 var(--dk-b-ddd2fb, #ddd2fb); }
.tile-float { position: absolute; z-index: 3; width: 46px; height: 40px; font-size: 22px; }
.tile-float.f1 { left: 10px; bottom: 54px; transform: rotate(-20deg); }
.tile-float.f2 { left: 70px; bottom: 18px; transform: rotate(-30deg) skewX(10deg); }
.tile-float.f3 { left: 170px; bottom: 10px; transform: rotate(-24deg); }
.gs-spark { position: absolute; z-index: 1; font-size: 26px; }
.gs-spark.s1 { top: 40px; left: 0; }
.gs-spark.s2 { top: 110px; right: 18px; font-size: 22px; }
.gs-spark.s3 { top: 170px; left: 0; color: var(--dk-f-f5b301, #f5b301); font-size: 16px; }

/* How to play */
.gs-panel { margin-top: 18px; padding: 18px 18px 22px; }
.gs-panel-title { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.gs-panel-title .mdi { font-size: 28px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.gs-steps { display: flex; align-items: flex-start; gap: 10px; }
.gs-step { position: relative; flex: 1; text-align: center; }
.gs-step-no { position: absolute; top: -8px; left: 22px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.gs-step-art {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 154px; height: 88px; margin: 0 auto 18px; border-radius: 16px; background: var(--p-50);
}
.gs-step-art-word { width: 186px; gap: 4px; }
.gs-hand { position: absolute; left: 62%; top: 44%; font-size: 30px; color: var(--ink); transform: rotate(-10deg); }
.gs-step p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.gs-step-arrow { margin-top: 32px; font-size: 24px; color: var(--dk-f-a78bfa, #a78bfa); }

/* Preview */
.gs-preview-sec { margin-top: 26px; }
.gs-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gs-shot {
  position: relative; height: 168px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--dk-b-8fd0f5, #8fd0f5) 0%, var(--dk-b-d6efff, #d6efff) 55%, var(--dk-b-b6e09a, #b6e09a) 56%, var(--dk-b-8cc96d, #8cc96d) 100%);
}
.gs-shot-pause { position: absolute; top: 8px; left: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.gs-shot-count { position: absolute; top: 8px; right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--dk-b-ffffff, #fff); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.gs-shot-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: var(--dk-b-ffffff-95, rgba(255,255,255,.95)); box-shadow: 0 6px 16px var(--dk-b-2b1a6b-12, rgba(43,26,107,.12)); }
.gs-shot-q { font-size: 10.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.35; }
.gs-shot-row { display: flex; gap: 6px; }
.gs-shot-win { background: transparent; box-shadow: none; gap: 0; }
.gs-win-star { font-size: 54px; line-height: 1; margin-bottom: -8px; filter: drop-shadow(0 4px 6px var(--dk-b-f59e0b-40, rgba(245,158,11,.4))); }
.gs-ribbon { position: relative; z-index: 1; padding: 6px 26px; border-radius: 6px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-weight: 800; font-size: 15px; box-shadow: var(--block); }
.gs-next { margin-top: 12px; padding: 5px 40px; border-radius: 999px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 6px var(--dk-b-ffffff-90, rgba(255,255,255,.9)); }
.gs-shot-emoji { font-size: 40px; line-height: 1; }
.gs-shot-word { padding: 2px 18px; border: 2px solid var(--dk-b-c9b8f6, #c9b8f6); border-radius: 999px; font-size: 19px; font-weight: 800; color: var(--dk-f-4b1fc4, #4b1fc4); background: var(--dk-b-ffffff, #fff); }
.gs-shot-sound { width: 22px; height: 22px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); display: flex; align-items: center; justify-content: center; font-size: 13px; }

/* Right column */
.gs .d-side { padding-top: 0; }
.gs-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gs-info li { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.gs-info small { display: block; font-size: 13px; color: var(--ink-2); }
.gs-skills { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-skills span { padding: 6px 18px; border-radius: 999px; background: var(--p-100); color: var(--dk-f-4b1fc4, #4b1fc4); font-size: 13px; font-weight: 600; }
.gs-reward { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.gs-reward:hover { background: var(--p-50); }
.gs-coin { flex: 0 0 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: radial-gradient(circle at 40% 35%, var(--dk-b-fde68a, #fde68a), var(--dk-b-f59e0b, #f59e0b)); box-shadow: inset 0 -3px 0 var(--dk-b-b45309-35, rgba(180,83,9,.35)); }
.gs-reward b { display: block; font-size: 15px; color: var(--dkf-p-900, var(--p-900)); }
.gs-reward small { font-size: 12px; color: var(--muted); }
.gs-reward > .mdi { margin-left: auto; font-size: 22px; color: var(--ink-2); }
.gs-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gs-related a { display: flex; align-items: center; gap: 12px; }
.gs-related a:hover .gs-related-title { color: var(--dkf-p-600, var(--p-600)); }
.gs-related-thumb { flex: 0 0 58px; height: 54px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 26px; letter-spacing: -6px; }
.gs-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gs-related-body { flex: 1; min-width: 0; }
.gs-related-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.gs-related-desc { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.gs-related-level { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 10.5px; color: var(--dkf-p-600, var(--p-600)); font-weight: 600; }

@media (max-width: 1280px) {
  .gs-hero-art { display: none; }
  .gs-hero-text { max-width: none; padding: 26px; }
}
@media (max-width: 760px) {
  .gs-title { font-size: 32px; }
  .gs-facts { flex-wrap: wrap; gap: 12px; }
  .gs-facts > div { border: 0; margin: 0; padding: 0; }
  .gs-steps { flex-direction: column; align-items: stretch; gap: 22px; }
  .gs-step-arrow { display: none; }
  .gs-previews { grid-template-columns: 1fr; }
}

.gs-start-soon { background: var(--p-200); color: var(--dkf-p-700, var(--p-700)); box-shadow: none; cursor: default; }
.gs-start-soon:hover { background: var(--p-200); transform: none; }
.gs-flash { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--dkf-p-700, var(--p-700)); }

/* ===================================================
   GAME PLAY PAGE
   =================================================== */
.gp-crumb-game { color: var(--dkf-p-900, var(--p-900)) !important; gap: 0 !important; }

.gp-stage {
  position: relative; overflow: hidden; min-height: 604px; border-radius: 20px;
  background: linear-gradient(180deg, var(--dk-b-a9dcf7, #a9dcf7) 0%, var(--dk-b-d8f0fd, #d8f0fd) 38%, var(--dk-b-eaf7ff, #eaf7ff) 58%, var(--dk-b-cfeab4, #cfeab4) 59%, var(--dk-b-b4dc93, #b4dc93) 100%);
  box-shadow: var(--shadow);
}
.gp-scene > * { position: absolute; pointer-events: none; }
.gp-hill { border-radius: 50%; }
.gp-hill-1 { left: -10%; right: 40%; bottom: -120px; height: 260px; background: var(--dk-b-a7d585, #a7d585); }
.gp-hill-2 { left: 40%; right: -10%; bottom: -140px; height: 280px; background: var(--dk-b-9bcf78, #9bcf78); }
.gp-tree { font-size: 90px; line-height: 1; }
.gp-tree.t1 { left: -20px; top: 140px; font-size: 130px; }
.gp-tree.t2 { left: 70px; top: 250px; font-size: 80px; }
.gp-tree.t3 { right: -10px; top: 170px; font-size: 110px; }
.gp-tree.t4 { right: 30px; bottom: 60px; font-size: 90px; }
.gp-mosque { right: 50px; top: 190px; font-size: 150px; line-height: 1; filter: hue-rotate(210deg) saturate(.7) brightness(1.15); opacity: .9; }
.gp-flower { font-size: 22px; bottom: 16px; }
.gp-flower.f1 { left: 16px; } .gp-flower.f2 { right: 30px; }

.gp-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.gp-level { padding: 10px 22px; border-radius: 999px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-weight: 700; font-size: 15px; box-shadow: 0 6px 14px var(--dk-b-5b21d6-30, rgba(91,33,214,.3)); }
.gp-round { width: 194px; font-size: 12px; font-weight: 700; color: var(--dkf-p-600, var(--p-600)); }
.gp-round .bar { margin-top: 6px; background: var(--dk-b-ffffff-70, rgba(255,255,255,.7)); }
.gp-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.gp-timer { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--dk-b-ffffff-90, rgba(255,255,255,.9)); font-weight: 800; font-size: 16px; color: var(--dkf-p-900, var(--p-900)); font-variant-numeric: tabular-nums; }
.gp-timer .mdi { font-size: 24px; color: var(--dkf-p-600, var(--p-600)); }
.gp-close { width: 42px; height: 42px; border-radius: 50%; background: var(--dk-b-ffffff-90, rgba(255,255,255,.9)); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--dkf-p-600, var(--p-600)); }
.gp-close:hover { background: var(--dk-b-ffffff, #fff); }

.gp-mascot { position: absolute; left: 8px; bottom: 54px; z-index: 2; width: 180px; text-align: center; }
.gp-mascot img { width: 100%; }
.gp-mascot-kid { font-size: 140px; line-height: 1; }
.gp-mascot-bubble {
  position: absolute; top: -110px; left: 34px; width: 128px; padding: 12px 10px;
  background: var(--dk-b-ffffff, #fff); border-radius: 16px; box-shadow: 0 4px 12px var(--dk-b-2b1a6b-12, rgba(43,26,107,.12));
  font-size: 14px; font-weight: 700; color: var(--dk-f-4b1fc4, #4b1fc4); line-height: 1.35; transform: rotate(-10deg);
}
.gp-mascot-bubble::after { content: ''; position: absolute; bottom: -10px; right: 34px; border: 10px solid transparent; border-top-color: var(--dk-b-ffffff, #fff); border-bottom: 0; }

.gp-card {
  position: relative; z-index: 2; width: min(500px, calc(100% - 40px)); margin: 6px auto 50px;
  padding: 24px 26px 30px; border-radius: 22px; background: var(--dk-b-ffffff-97, rgba(255,255,255,.97));
  box-shadow: 0 16px 40px var(--dk-b-2b1a6b-12, rgba(43,26,107,.12));
}
.gp-question { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 16px; font-weight: 700; color: var(--dkf-p-900, var(--p-900)); margin-bottom: 16px; text-align: center; }
.gp-speak { border: 0; background: none; color: var(--dkf-p-600, var(--p-600)); font-size: 26px; cursor: pointer; padding: 0; line-height: 1; }
.gp-speak:hover { color: var(--dkf-p-700, var(--p-700)); }
.gp-picture { display: flex; align-items: center; justify-content: center; height: 184px; margin: 0 52px 22px; border-radius: 16px; background: var(--p-50); font-size: 130px; line-height: 1; }

.gp-slots, .gp-pool { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.gp-slots { margin-bottom: 30px; }
.gp-slot, .gp-tile {
  width: 72px; height: 74px; border-radius: 14px; font: inherit; font-size: 38px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, border-color .15s, opacity .15s;
}
.gp-slot { border: 2.5px solid var(--dk-b-e2d8fb, #e2d8fb); background: var(--dk-b-f3effd, #f3effd); color: var(--dkf-p-600, var(--p-600)); }
.gp-slot.filled { background: var(--dk-b-ffffff, #fff); border-color: var(--dk-b-c9b8f6, #c9b8f6); box-shadow: 0 4px 10px var(--dk-b-4c2da0-10, rgba(76,45,160,.1)); }
.gp-slot.fixed { border-color: var(--p-500); }
.gp-slot.right { border-color: var(--dk-b-22c55e, #22c55e); background: var(--dk-b-f0fdf4, #f0fdf4); color: var(--dk-f-15803d, #15803d); animation: gpPop .35s; }
.gp-slot.wrong { border-color: var(--dk-b-f87171, #f87171); background: var(--dk-b-fff1f2, #fff1f2); color: var(--dk-f-dc2626, #dc2626); animation: gpShake .4s; }
.gp-tile { width: 54px; height: 58px; font-size: 32px; border: 0; background: var(--dk-b-ddd2fb, #ddd2fb); color: var(--dkf-p-600, var(--p-600)); box-shadow: inset 0 -4px 0 var(--dk-b-5b21d6-15, rgba(91,33,214,.15)); }
.gp-tile:hover { transform: translateY(-3px); background: var(--dk-b-d2c4fa, #d2c4fa); }
.gp-tile.used { opacity: 0; pointer-events: none; }
@keyframes gpShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes gpPop { 50% { transform: scale(1.12); } }

.gp-hint {
  position: absolute; right: 18px; bottom: 94px; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 12px 28px; border: 0; border-radius: 999px;
  background: var(--dk-b-ffffff, #fff); color: var(--dkf-p-600, var(--p-600)); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px var(--dk-b-2b1a6b-15, rgba(43,26,107,.15));
}
.gp-hint .mdi { font-size: 26px; }
.gp-hint:disabled { opacity: .55; cursor: not-allowed; }
.gp-hint-count { position: absolute; top: -6px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--dk-b-ffffff, #fff); }

.gp-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: var(--dk-b-1f1a3d-50, rgba(31,26,61,.5)); }
.gp-overlay[hidden] { display: none; }
.gp-modal { width: min(380px, calc(100% - 32px)); padding: 30px 28px; border-radius: 22px; background: var(--dk-b-ffffff, #fff); text-align: center; box-shadow: 0 20px 50px var(--dk-b-1f1a3d-30, rgba(31,26,61,.3)); }
.gp-modal-emoji { font-size: 56px; line-height: 1; }
.gp-modal h3 { font-size: 22px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 12px 0 8px; }
.gp-modal p { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.gp-done-score { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; margin-bottom: 20px; border-radius: 999px; background: var(--p-50); font-size: 15px; color: var(--ink-2); }
.gp-done-score b { font-size: 24px; color: var(--dkf-p-900, var(--p-900)); }
.gp-modal-actions { display: flex; gap: 10px; justify-content: center; }
.gp-modal-actions > * { height: 40px; padding: 0 18px; }

/* Related games strip */
.gp-related { margin-top: 18px; padding: 14px 12px 12px; }
.gp-related .sec-head { padding: 0 4px; }
.gp-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gp-related-item { position: relative; display: flex; gap: 12px; padding: 16px 14px 28px; border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .12s, background .12s; }
.gp-related-item:first-child { border-color: var(--dk-b-c9b8f6, #c9b8f6); }
.gp-related-item:hover { border-color: var(--dk-b-c9b8f6, #c9b8f6); background: var(--p-50); }
.gp-related-item > .mdi { position: absolute; right: 12px; bottom: 8px; color: var(--dkf-p-600, var(--p-600)); }
.gp-related-thumb { flex: 0 0 40px; font-size: 32px; line-height: 1; }

/* Right column */
.gp-info-head { display: flex; align-items: center; gap: 14px; }
.gp-info-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--p-100); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.gp-info-title { font-size: 26px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 14px 0 8px; }
.gp-info-desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 22px; }
.gp-info-level { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1.5px solid var(--line); }
.gp-info-level > .mdi { font-size: 34px; color: var(--dkf-p-600, var(--p-600)); }
.gp-info-level > div { flex: 1; }
.gp-info-level b { color: var(--ink); }
.gp-score { display: flex; align-items: center; gap: 14px; padding: 18px 0; }
.gp-score > span { font-size: 32px; }
.gp-score small { display: block; font-size: 11.5px; color: var(--ink-2); }
.gp-score b { font-size: 24px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.gp-cheer { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--p-50); }
.gp-cheer b { display: block; font-size: 13.5px; color: var(--ink); }
.gp-cheer small { font-size: 13px; color: var(--ink-2); }
.gp-cheer > .mdi { margin-left: auto; font-size: 22px; color: var(--ink-2); }
.gp-howto { list-style: none; margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.gp-howto li { display: flex; align-items: center; gap: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.gp-howto li span { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--p-50); color: var(--dkf-p-600, var(--p-600)); font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.gp-pause { height: 46px; font-size: 15px; }

@media (max-width: 1280px) {
  .gp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gp-mascot, .gp-mosque, .gp-tree.t1, .gp-tree.t3 { display: none; }
}
@media (max-width: 760px) {
  .gp-stage { min-height: 0; }
  .gp-top { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .gp-round { order: 3; width: 100%; }
  .gp-card { padding: 18px 14px 22px; margin-bottom: 84px; }
  .gp-picture { margin: 0 0 18px; height: 140px; font-size: 96px; }
  .gp-slots, .gp-pool { gap: 8px; }
  .gp-slot { width: 52px; height: 56px; font-size: 28px; }
  .gp-tile { width: 48px; height: 52px; font-size: 26px; }
  .gp-hint { bottom: 18px; right: 50%; transform: translateX(50%); }
  .gp-related-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   LESSON DETAIL PAGE
   =================================================== */
.lsd-hero { min-height: 256px; background: var(--p-100); }
.lsd-hero .hero-text { padding: 22px 0 22px 26px; max-width: 470px; }
.lsd-title { font-size: 32px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); line-height: 1.15; margin: 14px 0 12px; letter-spacing: -.3px; }
.lsd-hero .hero-sub { margin-bottom: 18px; }
.lsd-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.lsd-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--dk-b-ffffff-85, rgba(255,255,255,.85)); font-size: 12px; color: var(--ink-2); }
.lsd-meta .mdi { font-size: 18px; color: var(--dkf-p-600, var(--p-600)); }
.lsd-meta b { font-size: 15px; }
.lsd-bubble { top: 34px; left: 60px; font-size: 24px; padding: 14px 20px; border-radius: 26px; transform: rotate(-10deg); }
.lsd-hero .hero-kid { right: 100px; }
.lsd-hero .hero-kid-emoji { font-size: 130px; bottom: 66px; }
.lsd-wave { position: absolute; left: -36px; top: 10px; font-size: 54px; transform: rotate(-20deg); }
.lsd-start { position: absolute; right: 12px; bottom: 12px; z-index: 3; height: 46px; padding: 0 28px; gap: 12px; font-size: 16px; }

.lsd-tabs { display: flex; gap: 8px; margin: 20px 0 18px; border-bottom: 1.5px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-margin-top: 16px; }
.lsd-tabs::-webkit-scrollbar { display: none; }
.lsd-tab {
  position: relative; padding: 8px 18px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.lsd-tab:hover { color: var(--dkf-p-600, var(--p-600)); }
.lsd-tab.active { color: var(--dkf-p-700, var(--p-700)); font-weight: 700; }
.lsd-tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1.5px; height: 3px; border-radius: 3px; background: var(--p-600); }

.lsd-card { padding: 20px 18px; }
.lsd-h { margin-bottom: 8px; }
.lsd-summary { margin: 0 0 18px 40px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 500px; }
.lsd-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.lsd-topic { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 12px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--p-50); }
.lsd-topic .mdi { font-size: 38px; line-height: 1; }
.lsd-topic .tone-purple { color: var(--dkf-p-600, var(--p-600)); }
.lsd-topic .tone-gold { color: var(--dk-f-f5b301, #f5b301); }
.lsd-topic b { font-size: 14.5px; color: var(--dkf-p-900, var(--p-900)); }
.lsd-topic span { font-size: 12px; line-height: 1.55; color: var(--muted); }

.lsd-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lsd-steps li { display: flex; align-items: center; gap: 16px; padding: 6px 18px 6px 10px; border: 1.5px solid var(--line); border-radius: 14px; }
.lsd-step-no { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lsd-steps li.is-done .lsd-step-no { background: var(--dk-b-22c55e, #22c55e); }
.lsd-step-thumb {
  position: relative; flex: 0 0 142px; height: 58px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: flex-end; padding-left: 20px; font-size: 44px; line-height: 1;
  background: linear-gradient(180deg, var(--dk-b-a9dcf7, #a9dcf7) 0%, var(--dk-b-e3f3fd, #e3f3fd) 70%, var(--dk-b-c8e7b0, #c8e7b0) 71%, var(--dk-b-9fd283, #9fd283) 100%);
}
.lsd-steps li:nth-child(2) .lsd-step-thumb { background: var(--p-100); }
.lsd-steps li:nth-child(4) .lsd-step-thumb { background: var(--dk-b-e3ebfc, #e3ebfc); align-items: center; justify-content: center; padding: 0; }
.lsd-step-thumb em { position: absolute; top: 10px; right: 8px; padding: 4px 8px; border-radius: 8px; background: var(--dk-b-ffffff, #fff); font-style: normal; font-size: 11px; font-weight: 800; color: var(--dk-f-4b1fc4, #4b1fc4); }
.lsd-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lsd-step-body b { font-size: 13px; color: var(--ink); }
.lsd-step-body span { font-size: 12px; color: var(--muted); }
.lsd-step-body small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.lsd-step-btn { flex: 0 0 108px; height: 44px; gap: 10px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* Tabs: a green tick once that part is done */
.lsd-tab { min-height: 44px; }
.lsd-tab-check { display: none; margin-left: 6px; font-size: 16px; color: var(--dk-f-15803d, #15803d); }
.lsd-tab.is-done .lsd-tab-check { display: inline; }

/* Lesson complete: stays put and offers the next unit (toy-block card) */
.lsd-done {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; padding: 18px 20px;
  background: var(--dk-b-ffffff, #fff); border: 2px solid var(--sun); border-radius: 20px; box-shadow: 0 5px 0 var(--sun-deep);
}
.lsd-done:focus { outline: 3px solid var(--p-600); outline-offset: 3px; }
.lsd-done-badge { flex: 0 0 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--sun); color: #1f1a3d; font-size: 32px; }
.lsd-done-body { flex: 1 1 220px; min-width: 0; }
.lsd-done h2 { font-size: 21px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.lsd-done p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lsd-done-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lsd-done-alt { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); text-decoration: underline; text-underline-offset: 3px; }

/* Back / Next under each part */
.lsd-nav { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.lsd-nav-prev { height: 44px; padding: 0 16px; font: inherit; font-size: 14px; cursor: pointer; }
.lsd-nav-next { margin-left: auto; }
.lsd-nav .mdi { font-size: 20px; }

/* Listening tracker: "3 of 8 words heard", items get a tick once played */
.lsd-track { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--p-50); font-size: 14px; color: var(--ink-2); }
.lsd-track .mdi { font-size: 20px; color: var(--dkf-p-600, var(--p-600)); }
.lsd-track.is-done { background: var(--dk-b-f0fdf4, #f0fdf4); color: var(--dk-f-14532d, #14532d); }
.lsd-track.is-done .mdi { color: var(--dk-f-15803d, #15803d); }
.lsd-vocab-card.is-heard { border-color: var(--dk-b-86efac, #86efac); background: var(--dk-b-f0fdf4, #f0fdf4); }
.lsd-vocab-card.is-heard .lsd-heard-icon::before { content: "\F012C"; color: var(--dk-f-15803d, #15803d); } /* mdi-check */
.lsd-heard-btn.is-heard { color: var(--dk-f-15803d, #15803d); }
/* Quiz status: saved (green), last try (amber), practice (purple). Text + icon, not colour alone. */
.lsd-quiz-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid; }
.lsd-quiz-state > .mdi { font-size: 24px; flex-shrink: 0; }
.lsd-quiz-state p { flex: 1 1 220px; margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 700; }
.lsd-quiz-state-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lsd-quiz-state-actions .btn-u-outline { height: 44px; padding: 0 14px; font: inherit; font-size: 13.5px; cursor: pointer; }
.lsd-quiz-state.is-review { background: var(--dk-b-f0fdf4, #f0fdf4); border-color: var(--dk-b-86efac, #86efac); color: var(--dk-f-14532d, #14532d); }
.lsd-quiz-state.is-review > .mdi { color: var(--dk-f-15803d, #15803d); }
.lsd-quiz-state.is-retry { background: var(--dk-b-fffbeb, #fffbeb); border-color: var(--dk-b-fcd34d, #fcd34d); color: var(--dk-f-713f12, #713f12); }
.lsd-quiz-state.is-retry > .mdi { color: var(--dk-f-b45309, #b45309); }
.lsd-quiz-state.is-practice, .lsd-quiz-state.is-practiced { background: var(--p-50); border-color: var(--p-200); color: var(--dkf-p-900, var(--p-900)); }
.lsd-quiz-state.is-practice > .mdi, .lsd-quiz-state.is-practiced > .mdi { color: var(--dkf-p-600, var(--p-600)); }
/* Right / wrong is shown by icon and words too, not colour alone */
.lsd-q label.right, .lsd-q label.wrong { font-weight: 800; color: var(--ink); }
.lsd-q label.right::after, .lsd-q label.wrong::after { margin-left: auto; font-family: 'Material Design Icons'; font-size: 22px; font-weight: 400; line-height: 1; }
.lsd-q label.right::after { content: "\F05E0"; color: var(--dk-f-15803d, #15803d); }
.lsd-q label.wrong::after { content: "\F0159"; color: var(--dk-f-b91c1c, #b91c1c); }
.lsd-q label.right, .lsd-q label.wrong { border-width: 2px; }
.lsd-q label.right { border-color: var(--dk-b-15803d, #15803d); }
.lsd-q label.wrong { border-color: var(--dk-b-b91c1c, #b91c1c); }
/* Locked (saved) answers stay fully readable */
.lsd-q input:disabled { opacity: 1; }
.lsd-q label:has(input:disabled) { cursor: default; }
.lsd-q label:has(input:disabled):hover { border-color: var(--line); }
.lsd-q label.right:has(input:disabled):hover { border-color: var(--dk-b-15803d, #15803d); }
.lsd-q label.wrong:has(input:disabled):hover { border-color: var(--dk-b-b91c1c, #b91c1c); }

/* Quiz result modal: pops in once, stars land one by one, confetti only on a pass (MOTION 2: feedback, no loops) */
.lsd-modal {
  width: min(420px, calc(100% - 32px)); padding: 36px 28px 26px; border: 0; border-radius: 28px;
  background: var(--dk-b-ffffff, #fff); color: var(--ink); text-align: center; overflow: visible; box-shadow: 0 8px 0 var(--p-200), var(--float);
}
.lsd-modal::backdrop { background: var(--dk-b-1f1a3d-55, rgba(31, 26, 61, .55)); }
.lsd-modal.is-animating[open] { animation: lsdModalIn .38s cubic-bezier(.2, 1.4, .4, 1); }
.lsd-modal-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: none; color: var(--muted); font-size: 24px; cursor: pointer;
}
.lsd-modal-close:hover { background: var(--p-50); color: var(--dkf-p-700, var(--p-700)); }
.lsd-modal-icon {
  position: relative; z-index: 1; width: 88px; height: 88px; margin: -78px auto 12px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center; font-size: 52px;
  background: var(--sun); color: #1f1a3d; box-shadow: 0 6px 0 var(--sun-deep);
}
.lsd-modal.is-fail .lsd-modal-icon { background: var(--p-100); color: var(--dkf-p-600, var(--p-600)); box-shadow: 0 6px 0 var(--p-200); }
.lsd-modal.is-animating .lsd-modal-icon { animation: lsdIconIn .5s .1s cubic-bezier(.2, 1.6, .4, 1) both; }
.lsd-modal h2 { font-size: 24px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.lsd-modal-score { margin: 10px 0 4px; color: var(--ink-2); font-size: 18px; font-weight: 800; }
.lsd-modal-score b { font-size: 56px; font-weight: 900; line-height: 1; color: var(--dkf-p-600, var(--p-600)); margin-right: 6px; font-variant-numeric: tabular-nums; }
.lsd-modal.is-fail .lsd-modal-score b { color: var(--ink); }
.lsd-modal-stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; font-size: 34px; color: var(--track); }
.lsd-modal-stars .is-on { color: var(--sun-deep); }
.lsd-modal.is-animating .lsd-modal-stars .is-on { animation: lsdStar .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.lsd-modal-points { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 14px; border-radius: 999px; background: var(--dk-b-fff4cc, #fff4cc); color: var(--dk-f-7a4a00, #7a4a00); font-size: 14.5px; font-weight: 800; }
.lsd-modal-points .mdi { color: var(--sun-deep); }
.lsd-modal-text { margin: 6px 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.lsd-modal-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.lsd-modal-alt { min-height: 44px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); border-radius: 12px; }
.lsd-modal-alt:hover { background: var(--p-50); }
/* Confetti: ten dots fly out from behind the trophy once */
.lsd-modal-burst { position: absolute; left: 50%; top: -34px; width: 0; height: 0; pointer-events: none; }
.lsd-modal-burst span { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 3px; opacity: 0; background: var(--p-500); }
.lsd-modal-burst span:nth-child(3n) { background: var(--sun); }
.lsd-modal-burst span:nth-child(3n+1) { background: var(--dk-b-3b82f6, #3b82f6); }
.lsd-modal.is-pass.is-animating .lsd-modal-burst span { animation: lsdBurst .8s .15s ease-out both; }
@keyframes lsdModalIn { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lsdIconIn { from { transform: scale(.3) rotate(-20deg); } to { transform: none; } }
@keyframes lsdStar { from { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.25); } to { transform: none; } }
@keyframes lsdBurst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) scale(1); }
}

/* Other tabs */
.lsd-empty { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.lsd-vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.lsd-vocab-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--p-50); font: inherit; cursor: pointer;
}
.lsd-vocab-card:hover { border-color: var(--dk-b-c9b8f6, #c9b8f6); }
.lsd-vocab-card b { font-size: 17px; color: var(--dkf-p-900, var(--p-900)); }
.lsd-vocab-card span { font-size: 13px; color: var(--muted); }
.lsd-vocab-card .mdi { position: absolute; top: 14px; right: 14px; font-size: 20px; color: var(--dkf-p-600, var(--p-600)); }
.lsd-grammar { padding: 16px 0; border-bottom: 1.5px solid var(--line); }
.lsd-grammar:last-child { border-bottom: 0; }
.lsd-grammar p { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 15px; color: var(--ink); }
.lsd-grammar .gp-speak, .lsd-line .gp-speak { font-size: 20px; }
.lsd-chat { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.lsd-line { display: flex; align-items: flex-end; gap: 10px; }
.lsd-line.is-right { flex-direction: row-reverse; }
.lsd-line-avatar { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--dk-b-fde7c8, #fde7c8); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.lsd-line-bubble { position: relative; max-width: 70%; padding: 10px 40px 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--p-50); font-size: 14px; color: var(--ink); line-height: 1.5; }
.lsd-line.is-right .lsd-line-bubble { border-radius: 16px 16px 4px 16px; background: var(--p-100); }
.lsd-line-bubble small { display: block; font-size: 11px; font-weight: 700; color: var(--dkf-p-600, var(--p-600)); }
.lsd-line-bubble .gp-speak { position: absolute; right: 12px; bottom: 10px; }
.lsd-tip { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--dk-b-fff8e8, #fff8e8); font-size: 13px; color: var(--ink-2); }
.lsd-tip .mdi { font-size: 20px; color: var(--dk-f-d97706, #d97706); }
.lsd-quiz { margin-top: 10px; }
.lsd-q { border: 0; margin: 0 0 18px; padding: 0; }
.lsd-q legend { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.lsd-q label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 8px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.lsd-q label:hover { border-color: var(--dk-b-c9b8f6, #c9b8f6); }
.lsd-q input { accent-color: var(--p-600); }
.lsd-q label.right { border-color: var(--dk-b-15803d, #15803d); background: var(--dk-b-f0fdf4, #f0fdf4); }
.lsd-q label.wrong { border-color: var(--dk-b-b91c1c, #b91c1c); background: var(--dk-b-fff1f2, #fff1f2); }
.lsd-quiz-foot { display: flex; align-items: center; gap: 16px; }
.lsd-quiz-result { font-size: 14px; font-weight: 700; color: var(--dkf-p-700, var(--p-700)); }

/* Right column */
.lsd-progress { display: flex; align-items: center; gap: 18px; }
.lsd-progress-body { flex: 1; min-width: 0; }
.lsd-progress-body h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.lsd-progress-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.lsd-objectives { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lsd-objectives li { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--ink-2); }
.lsd-objectives .mdi { font-size: 22px; color: var(--dkf-p-600, var(--p-600)); flex-shrink: 0; }
.lsd-phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lsd-phrases li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--p-50); }
.lsd-phrases b { font-size: 12.5px; color: var(--dkf-p-900, var(--p-900)); }
.lsd-phrases span { margin-left: auto; font-size: 11.5px; color: var(--muted); text-align: right; }
.lsd-phrases button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--dkf-p-600, var(--p-600)); font-size: 19px; line-height: 1; }

@media (max-width: 1280px) {
  .lsd-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lsd-hero { padding-bottom: 70px; }
  .lsd-start { left: 16px; right: 16px; justify-content: center; }
  .lsd-summary { margin-left: 0; }
  .lsd-steps li { flex-wrap: wrap; padding: 10px; }
  .lsd-step-thumb { display: none; }
  .lsd-step-btn { flex-basis: 100%; }
  .lsd-line-bubble { max-width: 85%; }
  /* All five parts stay visible on a phone: the tab row wraps instead of scrolling sideways. */
  .lsd-tabs { flex-wrap: wrap; gap: 4px; overflow: visible; }
  .lsd-tab { padding: 8px 12px 12px; }
  .lsd-nav .btn-u, .lsd-nav-prev { flex: 1; }
  .lsd-done-actions, .lsd-done-actions .btn-u { width: 100%; }
}

/* ===================================================
   LANDING PAGE
   =================================================== */
.lnd { background: var(--bg); }
.lnd-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.lnd-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-weight: 800; }
.lnd-skip:focus { top: 12px; }

/* Navbar: solid white; it is the one surface that floats over content. */
.lnd-nav { position: sticky; top: 0; z-index: 50; background: var(--dk-b-ffffff, #fff); border-bottom: 1.5px solid var(--line); }
.lnd-nav-inner { position: relative; display: flex; align-items: center; gap: 28px; height: 68px; }
.lnd-brand { padding: 0; gap: 6px; min-height: 44px; }
.lnd-brand .u-brand-logo { width: 40px; height: 40px; }
.lnd-brand .u-brand-name,
.lnd-brand .u-brand-sub { font-size: 20px; }
.lnd-links { display: flex; gap: 4px; margin-left: 40px; }
.lnd-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.lnd-links a:hover { color: var(--dkf-p-600, var(--p-600)); background: var(--p-50); }
.lnd-nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.lnd-nav .u-avatar { width: 38px; height: 38px; font-size: 15px; }
.lnd-nav .u-user-name { font-size: 14px; font-weight: 700; }
.lnd-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.lnd-join-sm { padding: 0 20px; }
.lnd-burger { display: none; }
.lnd-links .lnd-links-login { display: none; }

/* Hero: clean two-column layout. Left: eyebrow, promise, lead, actions, batch facts. Right: a real word card. */
.lnd-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% 10%, var(--p-100), transparent 70%),
    radial-gradient(700px 420px at -10% 110%, var(--dk-b-fff6dc, #fff6dc), transparent 70%),
    var(--dk-b-ffffff, #fff);
}
.lnd-hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 48px; padding: 72px 0 88px; }
.lnd-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px;
  background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--p-200); font-size: 14px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); letter-spacing: .2px;
}
.lnd-hero h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 900; line-height: 1.04; letter-spacing: -1.4px; color: var(--ink); margin: 0 0 20px; }
.lnd-hero h1 span { display: block; color: var(--dkf-p-600, var(--p-600)); }
.lnd-lead { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 0 0 32px; max-width: 520px; }
.lnd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lnd-ghost {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 16px;
  font-size: 16px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--p-200);
  transition: border-color .15s, background .15s;
}
.lnd-ghost:hover { border-color: var(--p-400); background: var(--p-50); }
.lnd-ghost .ico { font-size: 20px; transition: transform .15s; }
.lnd-ghost:hover .ico { transform: translateX(3px); }

/* The open batch as one row of facts, separated by hairlines */
.lnd-facts { display: flex; flex-wrap: wrap; margin: 40px 0 0; padding: 20px 0 0; border-top: 1.5px solid var(--p-100); max-width: 600px; }
.lnd-facts > div { flex: 1 1 auto; padding-right: 20px; }
.lnd-facts > div + div { padding-left: 20px; border-left: 1.5px solid var(--p-100); }
.lnd-facts dt { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.lnd-facts dd { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.lnd-facts small { font-size: 13px; font-weight: 700; color: var(--muted); }
.lnd-hero-note { margin: 36px 0 0; max-width: 520px; padding: 14px 18px; border-radius: 14px; background: var(--p-50); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lnd-hero-note strong { color: var(--ink); }
.lnd-hero-trust { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; max-width: 520px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.lnd-hero-trust img { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--dk-b-ffffff, #fff), 0 0 0 3.5px var(--p-200); }
.lnd-hero-trust b { color: var(--ink); }

/* Right column: the Unit 8 dialogue card on a purple orb */
.lnd-hero-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 500px; }
.lnd-orb { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: linear-gradient(150deg, var(--p-500), var(--p-700)); }
.lnd-talk {
  position: relative; z-index: 1; width: 340px; padding: 18px; border-radius: 28px; background: var(--dk-b-ffffff, #fff);
  border: 1.5px solid var(--p-200); box-shadow: 0 10px 0 var(--p-900); transform: rotate(-2deg);
}
.lnd-talk-tag { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 99px; background: var(--p-50); font-size: 12.5px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.lnd-talk-who { margin: 0 0 4px 50px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.lnd-talk-who.is-me { margin: 0 50px 4px 0; text-align: right; }
.lnd-talk-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.lnd-talk-row.is-me { flex-direction: row-reverse; }
.lnd-talk-av { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--p-100); color: var(--dkf-p-700, var(--p-700)); font-size: 17px; font-weight: 900; }
.lnd-talk-row.is-me .lnd-talk-av { background: var(--dk-b-fff1c7, #fff1c7); color: var(--dk-f-92400e, #92400e); }
.lnd-talk-b { max-width: 240px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--p-50); }
.lnd-talk-row.is-me .lnd-talk-b { border-radius: 18px 18px 6px 18px; background: var(--p-600); }
.lnd-talk-b b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.lnd-talk-b span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lnd-talk-row.is-me .lnd-talk-b b { color: var(--dk-f-ffffff, #fff); }
.lnd-talk-row.is-me .lnd-talk-b span { color: var(--dkf-p-200, var(--p-200)); }
.lnd-talk-turn { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 10px 10px 16px; border-radius: 18px; border: 1.5px dashed var(--p-300); }
.lnd-talk-turn p { flex: 1; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.lnd-talk-turn p b { display: block; font-size: 14.5px; color: var(--ink); }
.lnd-talk-mic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--sun); color: #1f1a3d; box-shadow: 0 4px 0 var(--sun-deep); }
.lnd-talk-mic .ico { font-size: 24px; }

/* Kept for the laptop in the sign-in art */
.lnd-tablet-logo { width: 44px; height: 44px; }
.lnd-tablet-logo .brand-logo-tile { display: none; }

/* Shared section heading */
.lnd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.lnd-sec-head h2, .lnd-lesson-head h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); letter-spacing: -.4px; line-height: 1.15; }

/* Inside a lesson: a numbered row of toy blocks, left-aligned under an offset heading */
.lnd-lesson { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px 48px; padding: 72px 0 24px; }
.lnd-lesson-head { position: sticky; top: 96px; align-self: start; }
.lnd-lesson-head p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lnd-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lnd-part {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 18px 20px;
  background: var(--dk-b-ffffff, #fff); border: 2px solid var(--p-200); border-radius: 18px; box-shadow: 0 5px 0 var(--p-200);
}
.lnd-part:nth-child(even) { transform: translateY(18px); }
.lnd-part-num {
  position: absolute; top: -14px; right: 16px; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; background: var(--sun); color: #1f1a3d; font-weight: 900; box-shadow: 0 3px 0 var(--sun-deep);
}
.lnd-part .mdi { font-size: 34px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.lnd-part b { font-size: 18px; font-weight: 900; color: var(--ink); }
.lnd-part > span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lnd-lesson-note { grid-column: 2; display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.lnd-lesson-note .mdi { font-size: 24px; color: var(--sun-deep); }

/* Games: a full-bleed lilac band so it reads as the playground */
.lnd-games-sec { margin-top: 64px; padding: 56px 0 64px; background: var(--p-100); }
.lnd-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lnd-game { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--p-200); }
.lnd-game-pic { flex-shrink: 0; width: 96px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--p-50); }
.lnd-game small { display: block; font-size: 12.5px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.lnd-game h3 { margin: 0; font-size: 16px; font-weight: 900; color: var(--ink); line-height: 1.25; }
.lnd-game p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* Levels: a staircase; each level sits a step higher than the one before */
.lnd-levels { padding: 72px 0 40px; }
.lnd-stairs { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: end; }
.lnd-stair {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 16px;
  margin-bottom: calc(var(--step) * 22px);
  background: var(--dk-b-ffffff, #fff); border: 2px solid var(--line); border-radius: 18px;
}
.lnd-stair:first-child { background: var(--p-600); border-color: var(--p-600); box-shadow: var(--block); }
.lnd-stair:first-child .lnd-stair-level, .lnd-stair:first-child b, .lnd-stair:first-child .lnd-stair-text, .lnd-stair:first-child .lnd-stair-count { color: var(--dk-f-ffffff, #fff); }
.lnd-stair-level { font-size: 13px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.lnd-stair b { font-size: 17px; font-weight: 900; color: var(--ink); line-height: 1.25; }
.lnd-stair-text { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lnd-stair-count { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* Closing call to action */
.lnd-end { margin-top: 40px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); }
.lnd-end-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 48px 0; }
.lnd-end h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; letter-spacing: -.4px; }
.lnd-end p { margin: 8px 0 0; font-size: 16px; color: var(--dk-f-ede6ff, #ede6ff); }
/* Inverted block button on the purple band */
.lnd-end-btn { background: var(--dk-b-ffffff, #fff); color: var(--dkf-p-700, var(--p-700)); box-shadow: 0 4px 0 var(--p-900); }
.lnd-end-btn:hover { background: var(--p-50); }

/* Footer */
.lnd-foot { background: var(--p-900); color: var(--dk-f-e2d8fb, #e2d8fb); }
.lnd-foot-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 64px; font-size: 14px; font-weight: 700; }
.lnd-foot-inner span { margin-right: auto; }
.lnd-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dk-f-ffffff, #fff); text-decoration: underline; text-underline-offset: 3px; }

/* Legal pages (privacy) */
.legal { max-width: 760px; padding: 48px 0 64px; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.legal-lead { margin: 12px 0 8px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.legal section { margin-top: 32px; }
.legal h2 { font-size: 21px; font-weight: 900; color: var(--ink); margin-bottom: 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal ul { padding-left: 20px; margin: 0; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--dkf-p-700, var(--p-700)); font-weight: 700; text-decoration: underline; }
.legal-todo { padding: 2px 6px; border-radius: 6px; background: var(--dk-b-fff3c4, #fff3c4); color: var(--ink); font-weight: 800; }

/* Responsive: three states (wide, tablet, phone) */
@media (max-width: 1100px) {
  .lnd-lesson { grid-template-columns: 1fr; }
  .lnd-lesson-head { position: static; }
  .lnd-stairs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .lnd-stair { margin-bottom: 0; }
}
@media (max-width: 960px) {
  .lnd-hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 64px; }
  .lnd-hero-art { min-height: 460px; }
  .lnd-burger { display: inline-flex; align-items: center; }
  .lnd-links {
    display: none; position: absolute; top: 68px; left: -24px; right: -24px; flex-direction: column; gap: 2px;
    padding: 10px 16px 16px; margin: 0; background: var(--dk-b-ffffff, #fff); border-bottom: 1.5px solid var(--line); box-shadow: var(--float);
  }
  .lnd-links.open { display: flex; }
  .lnd-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .lnd-part:nth-child(even) { transform: none; }
}
@media (max-width: 640px) {
  .lnd-wrap { width: calc(100% - 32px); }
  .lnd-links { left: -16px; right: -16px; }
  .lnd-nav-right { gap: 8px; }
  .lnd-login { display: none; }
  .lnd-links .lnd-links-login { display: inline-flex; }
  .lnd-nav .u-user-name { display: none; }
  .lnd-lead { font-size: 16px; }
  .lnd-cta .btn-u, .lnd-ghost { width: 100%; justify-content: center; }
  .lnd-facts { flex-direction: column; gap: 12px; }
  .lnd-facts > div + div { padding-left: 0; border-left: 0; }
  .lnd-facts > div { display: flex; justify-content: space-between; gap: 12px; padding-right: 0; }
  .lnd-facts dt { margin: 0; }
  .lnd-hero-art { min-height: 0; padding: 24px 0 12px; }
  .lnd-orb { width: 320px; height: 320px; }
  .lnd-talk { width: 100%; max-width: 340px; }
  .lnd-lesson, .lnd-levels { padding-top: 48px; }
  .lnd-parts, .lnd-games, .lnd-stairs { grid-template-columns: 1fr; }
  .lnd-games-sec { margin-top: 48px; padding: 40px 0 48px; }
  .lnd-end-btn { width: 100%; }
}

/* ===================================================
   LOGIN PAGE
   =================================================== */
.auth { background: var(--dk-b-f7f4ff, #f7f4ff); }
.auth-brand { padding: 0; gap: 10px; }

/* Form side */
.auth-card { width: min(620px, 100%); padding: 64px 54px 56px; border-radius: 24px; background: var(--dk-b-ffffff, #fff); box-shadow: 0 20px 50px var(--dk-b-4c2da0-8, rgba(76,45,160,.08)); }
.auth-title { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 36px; font-weight: 900; color: var(--dk-f-4b1fc4, #4b1fc4); }
.auth-title span { font-size: 52px; }
.auth-sub { margin: 16px 0 40px; text-align: center; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.auth-error { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: var(--dk-b-fff1f2, #fff1f2); color: var(--dk-f-b91c1c, #b91c1c); font-size: 14px; }
.auth-error .mdi { font-size: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-field {
  display: flex; align-items: center; gap: 18px; height: 66px; padding: 0 22px;
  border: 2px solid var(--p-400); border-radius: 14px; background: var(--dk-b-ffffff, #fff); transition: border-color .15s, box-shadow .15s;
}
.auth-field:focus-within { border-color: var(--p-600); box-shadow: 0 0 0 3px var(--p-200); }
.auth-field > .mdi { font-size: 26px; color: var(--ink-2); }
.auth-field input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.auth-field input::placeholder { color: var(--muted-2); }
.auth-eye { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; border-radius: 10px; color: var(--muted); font-size: 22px; line-height: 1; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: -10px 0 0; }
.auth-remember { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.auth-remember input { width: 22px; height: 22px; accent-color: var(--p-600); }
.auth-submit { height: 62px; font-size: 20px; border-radius: 16px; box-shadow: 0 5px 0 var(--p-700); }
.auth-foot { margin: 30px 0 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.auth-foot .auth-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin-left: 2px; }
/* "Continue with Google": white with Google's own grey edge and dark text, as its sign-in button guidelines ask,
   so it reads as a second way in rather than competing with the purple Log in block. */
.auth-or { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; font-size: 14px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 20px;
  border: 1.5px solid var(--dk-b-747775, #747775); border-radius: 14px; background: var(--dk-b-ffffff, #fff); color: var(--dk-f-1f1f1f, #1f1f1f);
  font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s;
}
.auth-google:hover { background: var(--dk-b-f8f8f8, #f8f8f8); color: var(--dk-f-1f1f1f, #1f1f1f); }
.auth-google svg { flex-shrink: 0; }

.auth-forgot { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); text-decoration: none; }
.auth-forgot:hover { color: var(--dkf-p-700, var(--p-700)); text-decoration: underline; }
.auth-ok { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: var(--dk-b-f0fdf4, #f0fdf4); color: var(--dk-f-166534, #166534); font-size: 14px; }
.auth-ok .mdi { font-size: 20px; }
.auth-note { margin: -8px 0 18px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.auth-submit-ghost { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Light / dark switch, top right of the login pages: icons only. */
.auth-theme { position: fixed; top: 14px; right: 14px; z-index: 5; }
.auth-theme .theme-switch { background: var(--dk-b-ffffff, #fff); box-shadow: 0 2px 10px var(--dk-b-4c2da0-8, rgba(76,45,160,.08)); }
.auth-theme .theme-switch button { flex: none; width: 40px; min-height: 40px; padding: 0; justify-content: center; }
.auth-theme .theme-switch button[aria-checked="true"] { background: var(--p-100); box-shadow: none; }
.theme-switch-compact button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The login: one centred column, compact enough to fit a phone or laptop screen without scrolling. */
.auth-simple-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 20px 16px;
  background: radial-gradient(circle at 100% 0, var(--dk-b-ede6ff, #ede6ff) 0 140px, transparent 141px),
              radial-gradient(circle at 0 100%, var(--dk-b-ede6ff, #ede6ff) 0 120px, transparent 121px), var(--dk-b-faf8ff, #faf8ff);
}
.auth-simple .auth-brand .u-brand-logo { width: 48px; height: 48px; }
.auth-simple .auth-brand .u-brand-name,
.auth-simple .auth-brand .u-brand-sub { font-size: 24px; }
.auth-simple .auth-card { width: min(440px, 100%); padding: 32px 28px 24px; }
.auth-simple .auth-title { font-size: 26px; }
.auth-simple .auth-sub { margin: 6px 0 22px; font-size: 15px; }
.auth-simple .auth-form { gap: 14px; }
.auth-simple .auth-field { height: 54px; gap: 14px; padding: 0 18px; }
.auth-simple .auth-field > .mdi { font-size: 22px; }
.auth-simple .auth-row { margin: -6px 0 -4px; }
.auth-simple .auth-submit { height: 54px; font-size: 18px; }
.auth-simple .auth-or { margin: 18px 0 14px; }
.auth-simple .auth-google { height: 50px; }
.auth-simple .auth-foot { margin: 14px 0 0; }
@media (max-width: 520px), (max-height: 700px) {
  .auth-simple-wrap { gap: 14px; padding: 12px 16px; }
  .auth-simple .auth-brand .u-brand-logo { width: 40px; height: 40px; }
  .auth-simple .auth-brand .u-brand-name,
  .auth-simple .auth-brand .u-brand-sub { font-size: 20px; }
  .auth-simple .auth-card { padding: 22px 18px 14px; }
  .auth-simple .auth-title { font-size: 22px; text-align: center; }
  .auth-simple .auth-sub { margin: 4px 0 16px; font-size: 14px; }
  .auth-simple .auth-form { gap: 12px; }
  .auth-simple .auth-field, .auth-simple .auth-submit { height: 50px; }
  .auth-simple .auth-or { margin: 12px 0 10px; }
  .auth-simple .auth-google { height: 46px; }
  .auth-simple .auth-foot { margin: 6px 0 0; }
}

@media (max-width: 520px) {
  .auth-sub br { display: none; }
}

/* ===================================================
   LEARNING PATH (LEVEL) PAGE
   =================================================== */
.lp-levels-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.lp-levels-head .sec-link .mdi { font-size: 18px; }
a.lp-btn-soft { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
a.lp-btn-soft:hover { background: var(--p-100); color: var(--dkf-p-700, var(--p-700)); }

.lv-crumb-level, .ls-crumb a.lv-crumb-level { gap: 0; color: var(--dkf-p-600, var(--p-600)); }

.lv-hero { align-items: center; gap: 28px; min-height: 0; padding: 26px 28px; }
.lv-art {
  position: relative; flex: 0 0 170px; height: 170px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center; font-size: 96px; line-height: 1;
  background: var(--p-100);
}
.lv-art img { width: 100%; height: 100%; object-fit: contain; }
.lv-art-lock { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 50%; background: var(--dk-b-ffffff, #fff); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 10px var(--dk-b-2b1a6b-12, rgba(43,26,107,.12)); }
.lv-hero.is-locked .lv-art > span:first-child, .lv-hero.is-locked .lv-art img { filter: grayscale(.6) opacity(.75); }
.lv-hero-text { flex: 1; min-width: 0; }
.lv-hero-text .lsd-title { margin-top: 12px; }
.lv-hero-text .hero-sub { margin-bottom: 16px; max-width: 520px; }
.lv-cta { margin-top: 18px; height: auto; min-height: 52px; padding: 10px 24px; gap: 10px; font-size: 15.5px; max-width: 100%; line-height: 1.3; text-align: left; }
.lv-lock-note { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--dk-b-ffffff, #fff); font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.lv-lock-note p { display: flex; align-items: center; gap: 8px; margin: 0; }
.lv-lock-note .mdi { font-size: 18px; color: var(--dkf-p-600, var(--p-600)); }

.ls-item.is-locked .ls-thumb, .ls-item.is-locked .ls-body { opacity: .6; }
.ls-locked-btn { height: 36px; gap: 6px; font-size: 13px; border-color: var(--line) !important; color: var(--muted) !important; background: var(--p-50) !important; cursor: not-allowed; }

.lv-journey { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lv-journey a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; transition: background .12s; }
.lv-journey a:hover { background: var(--p-50); }
.lv-journey li.is-this a { background: var(--p-100); }
.lv-dot { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lv-journey li.is-locked .lv-dot { background: var(--dk-b-ece9f6, #ece9f6); color: var(--muted); }
.lv-journey b { display: block; font-size: 13px; color: var(--ink); }
.lv-journey small { font-size: 12px; color: var(--muted); }
.lv-journey li.is-locked b, .lv-journey li.is-locked small { color: var(--muted-2); }
.lv-journey-pct { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--dkf-p-600, var(--p-600)); }
.lv-journey li.is-locked .lv-journey-pct { color: var(--muted-2); }
.lv-all-lessons { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-top: 1.5px solid var(--line); margin: 0 -20px -8px; font-size: 13px; font-weight: 700; color: var(--dkf-p-600, var(--p-600)); }
.lv-all-lessons:hover { color: var(--dkf-p-700, var(--p-700)); }

@media (max-width: 760px) {
  .lv-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
  .lv-art { flex-basis: auto; width: 120px; height: 120px; font-size: 64px; }
  .lv-cta { width: 100%; }
  .lp-levels-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Lesson progress toast */
.lsd-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translate(-50%, 20px); opacity: 0;
  padding: 12px 22px; border-radius: 999px; background: var(--p-900); color: var(--dk-f-ffffff, #fff); font-weight: 700; font-size: 14px;
  box-shadow: 0 12px 30px var(--dk-b-1f1a3d-30, rgba(31,26,61,.3)); transition: opacity .25s, transform .25s; pointer-events: none;
}
.lsd-toast.show { opacity: 1; transform: translate(-50%, 0); }
.hero-points { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--dk-b-ffffff-75, rgba(255,255,255,.75)); font-size: 13px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.act-empty { font-size: 13px; color: var(--muted); border: 0 !important; }
.fb-play {
  flex: 0 0 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--p-100); color: var(--dkf-p-600, var(--p-600));
}
.fb-play:hover { background: var(--p-600); color: var(--dk-f-ffffff, #fff); }
.fb-body { min-width: 0; }
.fb-rating { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 800; }
.fb-stars { color: var(--sun-deep); font-size: 16px; letter-spacing: -2px; }
.fb-rating-1 { color: var(--dk-f-c2410c, #c2410c); }
.fb-rating-2 { color: var(--dkf-p-600, var(--p-600)); }
.fb-rating-3 { color: var(--dk-f-15803d, #15803d); }
.fb-note { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--dk-b-fef9e7, #fef9e7); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.fb-waiting { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fb-new { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--dk-b-dc2626, #dc2626); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.fb-page { padding: 4px 22px; }
.fb-page .act-title { font-size: 15px; }
.fb-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.fb-page-no { font-size: 13px; font-weight: 700; color: var(--muted); }
.fb-empty { padding: 22px; }
.fb-empty a { color: var(--dkf-p-600, var(--p-600)); font-weight: 700; text-decoration: underline; }
.u-nav-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dk-b-dc2626, #dc2626); color: #fff; font-size: 12px; font-weight: 800;
}
.continue-img.scene-park, .continue-img.scene-garden, .continue-img.scene-field, .continue-img.scene-sky { padding: 0; }
.gp-done-saved { margin: -8px 0 18px !important; font-size: 13px !important; font-weight: 700; color: var(--dkf-p-600, var(--p-600)) !important; }
.gm-avatar { font-weight: 900; color: var(--dk-f-9a3412, #9a3412); font-size: 20px; }

/* ===================================================
   MY PROGRESS & ACHIEVEMENTS
   =================================================== */
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.pg-title { margin-top: 4px; font-size: 34px; }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pg-stat { display: flex; align-items: center; gap: 14px; padding: 18px; }
.pg-stat-icon { flex: 0 0 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pg-stat b { display: block; font-size: 24px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); line-height: 1.1; }
.pg-stat b em { font-style: normal; font-size: 15px; color: var(--muted); font-weight: 700; }
.pg-stat small { font-size: 12.5px; color: var(--muted); }
.pg-list { padding: 6px 18px; }
.pg-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1.5px solid var(--line); }
.pg-row:last-child { border-bottom: 0; }
a.pg-row:hover b { color: var(--dkf-p-600, var(--p-600)); }
.pg-row.is-locked { opacity: .55; }
.pg-row-icon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--p-50); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pg-row-body { flex: 1; min-width: 0; }
.pg-row-body .ls-skill-row b { font-size: 14px; color: var(--ink); }
.pg-row-body .ls-skill-row span { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }

.ach-meter { display: flex; align-items: center; gap: 16px; padding: 16px 22px; min-width: 300px; }
.ach-meter .ring { flex-basis: 72px; height: 72px; }
.ach-meter .ring span { width: 58px; height: 58px; font-size: 15px; }
.ach-meter b { display: block; font-size: 14px; color: var(--ink); }
.ach-meter small { font-size: 12.5px; color: var(--muted); }
.ach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ach-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 22px; }
.ach-card.is-earned { background: var(--dk-b-ffffff, #fff); border-color: var(--sun); }
.hex-lg { width: 96px; height: 108px; margin-bottom: 16px; }
.hex-lg .hex-inner { width: 82px; height: 94px; font-size: 44px; }
.hex-lg.hex-locked .hex-inner { font-size: 32px; }
.ach-card h3 { font-size: 17px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin-bottom: 6px; }
.ach-card p { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.ach-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--p-50); color: var(--muted); }
.ach-card.is-earned .ach-status { background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-15803d, #15803d); }
.ach-cta { display: flex; justify-content: center; margin-top: 28px; }

@media (max-width: 1280px) { .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 520px) { .ach-grid, .pg-stats { grid-template-columns: 1fr; } .ach-meter { min-width: 0; width: 100%; } }
.u-avatar.is-emoji { background: var(--dk-b-fde7c8, #fde7c8); font-size: 24px; font-weight: 400; }

/* ===================================================
   AUTH EXTRAS + PROFILE
   =================================================== */
.auth-link { font-size: 15px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); margin-left: 8px; }
.auth-link:hover { color: var(--dkf-p-700, var(--p-700)); }
.auth-terms { align-items: flex-start; font-size: 14px; line-height: 1.5; }
.auth-terms input { margin-top: 2px; flex-shrink: 0; }

.pf-card { padding: 22px 24px; margin-bottom: 18px; }
.pf-flash { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-15803d, #15803d); font-size: 14px; font-weight: 600; }
.pf-note { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.pf-label { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.pf-avatars { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-av { position: relative; cursor: pointer; }
.pf-av input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.pf-av-face {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 30px; background: var(--dk-b-fde7c8, #fde7c8); border: 3px solid transparent; transition: transform .12s, border-color .12s;
}
.pf-av:hover .pf-av-face { transform: translateY(-2px); }
.pf-av.is-on .pf-av-face { border-color: var(--p-600); box-shadow: 0 0 0 3px var(--p-100); }
.pf-av-initial { background: var(--p-500); color: var(--dk-f-ffffff, #fff); font-size: 22px; font-weight: 800; }
.pf-av-upload .pf-av-face { background: var(--p-50); color: var(--dkf-p-600, var(--p-600)); font-size: 24px; border-style: dashed; border-color: var(--p-300); }
.pf-av-upload.is-on .pf-av-face { border-style: solid; }
.pf-av-face img { width: 100%; height: 100%; object-fit: cover; }
.pf-hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 20px; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pf-field input { height: 46px; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: 14.5px; color: var(--ink); outline: 0; }
.pf-field input:focus { border-color: var(--p-600); box-shadow: 0 0 0 3px var(--p-200); }
.pf-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.pf-actions .btn-u, .pf-actions .btn-u-outline { height: 42px; padding: 0 22px; gap: 8px; border: 0; cursor: pointer; font-family: inherit; }
.pf-actions .btn-u-outline { border: 1.5px solid var(--dk-b-c9b8f6, #c9b8f6); }
.pf-me { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf-me-avatar { width: 96px; height: 96px; font-size: 40px; margin-bottom: 12px; }
.pf-me-avatar.is-emoji { font-size: 54px; }
.pf-me h2 { font-size: 19px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); }
.pf-me p { font-size: 13px; color: var(--muted); margin: 4px 0 16px; }
.pf-me-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 16px; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.pf-me-stats div { padding: 12px 0; }
.pf-me-stats div + div { border-left: 1.5px solid var(--line); }
.pf-me-stats b { display: block; font-size: 17px; color: var(--dkf-p-900, var(--p-900)); }
.pf-me-stats small { font-size: 12px; color: var(--muted); }
.pf-me .btn-u-outline { height: 40px; gap: 8px; }
.pf-logout { padding: 0; }
.pf-logout button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 0; background: none; border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 700; color: var(--dk-f-dc2626, #dc2626); cursor: pointer; }
.pf-logout button:hover { background: var(--dk-b-fff1f2, #fff1f2); }
@media (max-width: 760px) { .pf-grid, .pf-grid-3 { grid-template-columns: 1fr; } }

/* Picture-choice games (Word Match / Listen & Choose) */
.gp-card-choice { padding-bottom: 34px; }
.gp-word {
  margin: 4px auto 26px; width: fit-content; padding: 18px 38px; border-radius: 18px;
  background: var(--p-50); border: 2.5px dashed var(--dk-b-c9b8f6, #c9b8f6);
  font-size: 46px; font-weight: 900; letter-spacing: 6px; color: var(--dkf-p-700, var(--p-700));
}
.gp-listen {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px auto 26px;
  width: 150px; height: 150px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--p-600); color: var(--dk-f-ffffff, #fff);
  box-shadow: 0 0 0 10px var(--p-100), 0 12px 26px var(--dk-b-5b21d6-35, rgba(91,33,214,.35)); justify-content: center;
  font: inherit; transition: transform .15s;
}
.gp-listen:hover { transform: scale(1.04); }
.gp-listen .mdi { font-size: 56px; line-height: 1; }
.gp-listen span { font-size: 11.5px; font-weight: 700; opacity: .9; }
.gp-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 360px; margin: 0 auto; }
.gp-option {
  position: relative; height: 112px; border-radius: 18px; border: 3px solid var(--dk-b-e2d8fb, #e2d8fb); background: var(--dk-b-ffffff, #fff); cursor: pointer;
  font-size: 64px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--dk-b-4c2da0-8, rgba(76,45,160,.08)); transition: transform .12s, border-color .12s, background .12s;
}
.gp-option:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--p-300); }
.gp-option.right { border-color: var(--dk-b-22c55e, #22c55e); background: var(--dk-b-f0fdf4, #f0fdf4); animation: gpPop .35s; }
.gp-option.wrong { border-color: var(--dk-b-f87171, #f87171); background: var(--dk-b-fff1f2, #fff1f2); animation: gpShake .4s; opacity: .55; cursor: not-allowed; }
.gp-option-word { position: absolute; bottom: 6px; left: 0; right: 0; font-size: 13px; font-weight: 900; letter-spacing: 2px; color: var(--dk-f-15803d, #15803d); }
@media (max-width: 760px) {
  .gp-word { font-size: 32px; padding: 14px 24px; letter-spacing: 4px; }
  .gp-listen { width: 120px; height: 120px; }
  .gp-option { height: 92px; font-size: 50px; }
}
.gs-mini-word { padding: 8px 16px; border-radius: 10px; background: var(--dk-b-ffffff, #fff); border: 2px dashed var(--dk-b-c9b8f6, #c9b8f6); font-size: 20px; font-weight: 900; letter-spacing: 3px; color: var(--dkf-p-700, var(--p-700)); }
.gs-mini-listen { width: 58px; height: 58px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 0 0 6px var(--p-100); }
.gs-mini-grid { display: grid; grid-template-columns: repeat(4, 28px); gap: 5px; justify-content: center; }
.gs-mini-grid span { width: 28px; height: 30px; border-radius: 8px; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--dk-b-e2d8fb, #e2d8fb); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.gs-mini-grid span.is-pick { border-color: var(--dk-b-22c55e, #22c55e); background: var(--dk-b-f0fdf4, #f0fdf4); }
.gs-mini-star { font-size: 40px; }
.gs-mini-pts { font-size: 20px; font-weight: 900; color: var(--dkf-p-600, var(--p-600)); }

/* Sentence Builder */
.gp-card-sentence { width: min(620px, calc(100% - 40px)); }
.gp-sent-prompt { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 24px; padding: 16px 20px; border-radius: 18px; background: var(--p-50); }
.gp-sent-emoji { font-size: 78px; line-height: 1; }
.gp-sent-hint { font-size: 16px; font-weight: 700; color: var(--ink-2); font-style: italic; max-width: 260px; }
.gp-sent-hint::before { content: '“'; } .gp-sent-hint::after { content: '”'; }
.gp-sent-slots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 28px; min-height: 56px; }
.gp-wslot {
  min-width: 84px; height: 54px; padding: 0 14px; border-radius: 14px; cursor: pointer;
  border: 2.5px dashed var(--dk-b-c9b8f6, #c9b8f6); background: var(--dk-b-ffffff, #fff); font: inherit; font-size: 22px; font-weight: 800; color: var(--dkf-p-700, var(--p-700));
  transition: background .15s, border-color .15s;
}
.gp-wslot.filled { border-style: solid; border-color: var(--dk-b-c9b8f6, #c9b8f6); background: var(--dk-b-faf8ff, #faf8ff); }
.gp-wslot.fixed { border-color: var(--p-500); }
.gp-wslot.right { border-color: var(--dk-b-22c55e, #22c55e); background: var(--dk-b-f0fdf4, #f0fdf4); color: var(--dk-f-15803d, #15803d); animation: gpPop .35s; }
.gp-wslot.wrong { border-color: var(--dk-b-f87171, #f87171); background: var(--dk-b-fff1f2, #fff1f2); color: var(--dk-f-dc2626, #dc2626); animation: gpShake .4s; }
.gp-punct { font-size: 30px; font-weight: 900; color: var(--dkf-p-700, var(--p-700)); margin-left: -4px; }
.gp-sent-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gp-chip {
  height: 50px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--dk-b-ddd2fb, #ddd2fb); color: var(--dkf-p-700, var(--p-700)); font: inherit; font-size: 21px; font-weight: 800;
  box-shadow: inset 0 -4px 0 var(--dk-b-5b21d6-15, rgba(91,33,214,.15)); transition: transform .12s, background .15s, opacity .15s;
}
.gp-chip:hover { transform: translateY(-3px); background: var(--dk-b-d2c4fa, #d2c4fa); }
.gp-chip.used { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .gp-sent-emoji { font-size: 54px; }
  .gp-sent-hint { font-size: 14px; }
  .gp-wslot { min-width: 64px; height: 46px; font-size: 17px; }
  .gp-chip { height: 44px; font-size: 17px; padding: 0 14px; }
}
.gs-mini-chips { flex-wrap: wrap; gap: 4px; padding: 6px; }
.gs-mini-chips span { padding: 4px 8px; border-radius: 7px; background: var(--dk-b-ddd2fb, #ddd2fb); color: var(--dkf-p-700, var(--p-700)); font-size: 12px; font-weight: 800; }
/* The wider sentence card would cover the mascot's bubble: tuck it to the left edge. */
.gp-stage:has(.gp-card-sentence) .gp-mascot-bubble { left: 0; top: -124px; width: 118px; font-size: 13px; }

/* Reading Challenge */
.gp-stage:has(.gp-card-reading) .gp-mascot { display: none; }
.gp-card-reading { width: min(700px, calc(100% - 40px)); padding: 22px 24px 26px; }
.gp-story-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gp-story-emoji { width: 58px; height: 58px; border-radius: 16px; background: var(--p-50); display: flex; align-items: center; justify-content: center; font-size: 34px; flex-shrink: 0; }
.gp-story-head small { font-size: 12px; font-weight: 700; color: var(--dkf-p-600, var(--p-600)); }
.gp-story-head h3 { font-size: 21px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 0; }
.gp-read-aloud { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--p-100); color: var(--dkf-p-700, var(--p-700)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.gp-read-aloud:hover { background: var(--p-200); }
.gp-read-aloud .mdi { font-size: 18px; }
.gp-story-text { max-height: 190px; overflow-y: auto; padding: 16px 18px; border-radius: 14px; background: var(--dk-b-fffbef, #fffbef); border: 1.5px solid var(--dk-b-f6e7b8, #f6e7b8); font-size: 17px; line-height: 1.75; color: var(--ink); }
.gp-quiz { margin-top: 18px; }
.gp-quiz-label { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--dkf-p-600, var(--p-600)); }
.gp-quiz-q { font-size: 18px; font-weight: 800; color: var(--dkf-p-900, var(--p-900)); margin: 4px 0 12px; }
.gp-quiz-options { display: grid; gap: 10px; }
.gp-quiz-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 2.5px solid var(--dk-b-e2d8fb, #e2d8fb); border-radius: 14px; background: var(--dk-b-ffffff, #fff); font: inherit; font-size: 16px; font-weight: 700; color: var(--ink);
  transition: border-color .12s, background .12s, transform .12s;
}
.gp-quiz-opt span { flex: 0 0 30px; height: 30px; border-radius: 9px; background: var(--p-50); color: var(--dkf-p-600, var(--p-600)); display: flex; align-items: center; justify-content: center; font-weight: 900; }
.gp-quiz-opt:hover:not(:disabled) { border-color: var(--p-300); transform: translateX(3px); }
.gp-quiz-opt.right { border-color: var(--dk-b-22c55e, #22c55e); background: var(--dk-b-f0fdf4, #f0fdf4); animation: gpPop .35s; }
.gp-quiz-opt.right span { background: var(--dk-b-22c55e, #22c55e); color: #fff; }
.gp-quiz-opt.wrong { border-color: var(--dk-b-f87171, #f87171); background: var(--dk-b-fff1f2, #fff1f2); opacity: .6; cursor: not-allowed; animation: gpShake .4s; }
@media (max-width: 760px) { .gp-story-text { font-size: 15px; max-height: 160px; } .gp-read-aloud { padding: 8px 10px; } }
.gs-mini-quiz { flex-direction: column; gap: 4px; }
.gs-mini-quiz span { width: 90px; height: 20px; border-radius: 6px; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--dk-b-e2d8fb, #e2d8fb); font-size: 11px; font-weight: 900; color: var(--dkf-p-600, var(--p-600)); display: flex; align-items: center; padding-left: 8px; }
.gs-mini-quiz span.is-pick { border-color: var(--dk-b-22c55e, #22c55e); background: var(--dk-b-f0fdf4, #f0fdf4); color: var(--dk-f-15803d, #15803d); }

/* Lesson video (YouTube) */
.lsd-video { margin-bottom: 16px; }
.lsd-video-status { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lsd-video-status .mdi { color: var(--dk-f-16a34a, #16a34a); }
.lsd-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--dk-b-1f1a3d, #1f1a3d); margin-top: 6px; }
.lsd-video-frame iframe, .lsd-video-frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lsd-video-bar { height: 6px; margin-top: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.lsd-video-bar span { display: block; height: 100%; background: var(--dk-b-16a34a, #16a34a); border-radius: inherit; transition: width .4s; }
.lsd-step-thumb.has-thumb { padding: 0; align-items: center; justify-content: center; background: var(--dk-b-1f1a3d, #1f1a3d); }
.lsd-step-thumb.has-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lsd-step-thumb.has-thumb .mdi { position: relative; font-size: 30px; color: var(--dk-f-ffffff, #fff); filter: drop-shadow(0 2px 4px var(--dk-b-000000-50, rgba(0,0,0,.5))); }

/* ===================================================
   LEARNING PATHS (index): one focus card, then the levels as a numbered path
   =================================================== */
.lpj { max-width: 920px; }
.lpj-head { margin: 4px 0 20px; }
.lpj-title { font-size: clamp(28px, 3.4vw, 36px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); letter-spacing: -.4px; }
.lpj-sub { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* Focus card: the next thing to do */
.lpj-focus {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 20px 24px;
  padding: 22px 24px; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--p-500); border-radius: 22px; box-shadow: 0 6px 0 var(--p-200);
}
.lpj-focus-art {
  width: 96px; height: 96px; border-radius: 22px; background: var(--p-100);
  display: flex; align-items: center; justify-content: center; font-size: 56px; line-height: 1; overflow: hidden;
}
.lpj-focus-art img { width: 100%; height: 100%; object-fit: cover; }
.lpj-focus.is-finished { grid-template-columns: 96px minmax(0, 1fr); border-color: var(--sun); box-shadow: 0 6px 0 var(--sun-deep); }
.lpj-focus.is-finished .lpj-focus-art { background: var(--sun); color: #1f1a3d; font-size: 52px; }
.lpj-focus-kicker { margin: 0; font-size: 14px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.lpj-focus h2 { font-size: 24px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 2px 0 10px; }
.lpj-focus-progress { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.lpj-focus-progress .bar { max-width: 260px; }
.lpj-focus-goal { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.lpj-focus-goal .mdi { font-size: 20px; color: var(--dkf-p-600, var(--p-600)); }
.lpj-focus-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 340px; }
.lpj-focus-actions .btn-u { height: auto; min-height: 52px; padding: 10px 22px; line-height: 1.3; text-align: center; }
.lpj-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14.5px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); text-decoration: underline; text-underline-offset: 3px; }

/* The path: numbered blocks joined by a line, top to bottom */
.lpj-path-title { margin: 36px 0 14px; font-size: 19px; font-weight: 900; color: var(--ink); }
.lpj-path { list-style: none; margin: 0; padding: 0; }
.lpj-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding-bottom: 14px; }
.lpj-step:not(:last-child)::before { content: ''; position: absolute; left: 24px; top: 48px; bottom: -2px; width: 4px; border-radius: 4px; background: var(--line); }
.lpj-step.is-done:not(:last-child)::before { background: var(--dk-b-86efac, #86efac); }
.lpj-step-no {
  position: relative; z-index: 1; width: 52px; height: 48px; border-radius: 14px; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900;
  background: var(--dk-b-ffffff, #fff); color: var(--ink-2); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line);
}
.lpj-step.is-current .lpj-step-no { background: var(--p-600); color: var(--dk-f-ffffff, #fff); border-color: var(--p-600); box-shadow: var(--block); }
.lpj-step.is-done .lpj-step-no { background: var(--dk-b-16a34a, #16a34a); color: var(--dk-f-ffffff, #fff); border-color: var(--dk-b-16a34a, #16a34a); box-shadow: 0 4px 0 var(--dk-b-15803d, #15803d); }
.lpj-step.is-open .lpj-step-no { background: var(--p-100); color: var(--dkf-p-700, var(--p-700)); border-color: var(--p-200); box-shadow: 0 4px 0 var(--p-200); }

.lpj-step-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 18px; }
.lpj-step.is-current .lpj-step-card { border: 2px solid var(--p-500); background: var(--p-50); }
.lpj-step.is-locked .lpj-step-card { background: var(--dk-b-faf9fd, #faf9fd); }
.lpj-step-art { flex: 0 0 56px; height: 56px; border-radius: 14px; background: var(--p-50); display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; }
.lpj-step-art img { width: 100%; height: 100%; object-fit: cover; }
.lpj-step.is-locked .lpj-step-art { filter: grayscale(.7); opacity: .75; }
.lpj-step-body { flex: 1; min-width: 0; }
.lpj-step-body h3 { font-size: 17px; font-weight: 900; color: var(--ink); line-height: 1.3; }
.lpj-step-level { color: var(--dkf-p-600, var(--p-600)); margin-right: 4px; }
.lpj-step.is-locked .lpj-step-level { color: var(--ink-2); }
.lpj-step-desc { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lpj-step-status { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.lpj-step-status .mdi { font-size: 18px; }
.lpj-step.is-done .lpj-step-status { color: var(--dk-f-14532d, #14532d); }
.lpj-step.is-done .lpj-step-status .mdi { color: var(--dk-f-15803d, #15803d); }
.lpj-step.is-current .lpj-step-status .mdi { color: var(--dkf-p-600, var(--p-600)); }
.lpj-step-body .bar { margin-top: 8px; max-width: 240px; }
.lpj-step-link {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--p-300); border-radius: 12px; background: var(--dk-b-ffffff, #fff); font-size: 14px; font-weight: 800; color: var(--dkf-p-700, var(--p-700));
}
.lpj-step-link:hover { background: var(--p-50); border-color: var(--p-400); }

@media (max-width: 760px) {
  .lpj-focus { grid-template-columns: 64px minmax(0, 1fr); padding: 18px; gap: 14px; }
  .lpj-focus-art { width: 64px; height: 64px; font-size: 38px; border-radius: 16px; }
  .lpj-focus.is-finished { grid-template-columns: 64px minmax(0, 1fr); }
  .lpj-focus h2 { font-size: 20px; }
  .lpj-focus-actions { grid-column: 1 / -1; max-width: none; }
  .lpj-step { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .lpj-step:not(:last-child)::before { left: 18px; top: 44px; }
  .lpj-step-no { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; margin-top: 12px; }
  .lpj-step-card { flex-wrap: wrap; padding: 12px; gap: 12px; }
  .lpj-step-art { flex-basis: 44px; height: 44px; font-size: 26px; }
  .lpj-step-body { flex-basis: calc(100% - 56px); }
  /* On a phone each row's action is a text link under the status, keeping locked rows short */
  .lpj-step-link { min-height: 44px; margin: -8px 0 -6px 56px; padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
  .lpj-step-link:hover { background: none; }
}

/* ===== Lesson page: overview refinements ===== */
/* Breadcrumb: 44px links; on a phone only "← Level N" stays */
.lsd-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.lsd-crumb-back { display: none; }
@media (max-width: 640px) {
  .lsd-crumb .lsd-crumb-root, .lsd-crumb .lsd-crumb-sep, .lsd-crumb .lsd-crumb-here { display: none; }
  .lsd-crumb-back { display: inline; margin-right: 6px; }
}

/* Parts list: real counts next to the title, an icon instead of stock pictures */
.lsd-step-body .lsd-step-size { font-size: 12.5px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
/* Keep the hero text clear of the illustration on the right */
.lsd-hero .hero-sub { max-width: 380px; }
.lsd-step-thumb .mdi { font-size: 30px; color: var(--dkf-p-600, var(--p-600)); }
.lsd-step-thumb.has-thumb .mdi { color: var(--dk-f-ffffff, #fff); }
.lsd-steps li .lsd-step-thumb:not(.has-thumb) { flex-basis: 58px; align-items: center; justify-content: center; padding: 0; background: var(--p-50); }

/* About block (admin summary + objectives) */
.lsd-about .lsd-summary { margin-left: 0; max-width: none; font-size: 15px; }
.lsd-about-h { margin: 4px 0 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.lsd-about .lsd-objectives { gap: 10px; }
.lsd-about .lsd-objectives li { font-size: 14.5px; }
.lsd-panel > .card + .card { margin-top: 16px; }

/* Lesson progress lives in the hero (single-column, full-width lesson page) */
.lsd-hero-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; max-width: 420px; }
.lsd-hero-progress .bar { flex: 1; min-width: 80px; height: 12px; background: var(--dk-b-ffffff, #fff); box-shadow: inset 0 0 0 1.5px var(--p-200); }
.lsd-hero-progress-text { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.lsd-hero-progress-text b { color: var(--dkf-p-900, var(--p-900)); }
@media (max-width: 760px) {
  .lsd-hero .hero-text { padding-right: 22px; max-width: none; }
}
@media (max-width: 520px) {
  .lsd-hero-progress { flex-wrap: wrap; }
  .lsd-hero-progress .bar { flex-basis: 100%; }
}

/* Phone: tabs fill each row evenly, like a segmented control */
@media (max-width: 640px) {
  .lsd-tabs { border-bottom: 0; gap: 6px; }
  .lsd-tab { flex: 1 1 auto; text-align: center; border-radius: 12px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); padding: 10px 12px; }
  .lsd-tab.active { background: var(--p-100); border-color: var(--p-300); }
  .lsd-tab.active::after { display: none; }
}

/* ===== Level page: single column; lesson rows with status in words ===== */
.lv { max-width: none; }
.lv-hero .lsd-hero-progress { margin-top: 4px; }
.lv-all-done { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 15px; font-weight: 800; color: var(--dk-f-14532d, #14532d); }
.lv-all-done .mdi { font-size: 22px; color: var(--dk-f-15803d, #15803d); }

.lrow-list, .ls-list { display: flex; flex-direction: column; gap: 10px; }
.lrow { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 18px; }
.lrow.is-started { border: 2px solid var(--p-500); background: var(--p-50); }
.lrow-thumb { position: relative; flex: 0 0 112px; height: 80px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.lrow-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lrow-emoji { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.lrow.is-locked .lrow-emoji, .lrow.is-locked .lrow-thumb img { filter: grayscale(.7); opacity: .7; }
.lrow-done-badge { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--dk-b-16a34a, #16a34a); color: var(--dk-f-ffffff, #fff); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 2px 0 var(--dk-b-15803d, #15803d); }
.lrow-body { flex: 1; min-width: 0; }
.lrow-unit { font-size: 12.5px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.lrow-body h3 { font-size: 16.5px; font-weight: 900; color: var(--ink); margin: 2px 0 2px; }
.lrow-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Locked rows stay readable: no opacity on text (WCAG AA) */
.lrow.is-locked .lrow-unit { color: var(--ink-2); }
.lrow-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; font-weight: 700; color: var(--ink-2) !important; }
.lrow-status .mdi { font-size: 18px; }
.lrow.is-done .lrow-status { color: var(--dk-f-14532d, #14532d) !important; }
.lrow.is-done .lrow-status .mdi { color: var(--dk-f-15803d, #15803d); }
.lrow.is-started .lrow-status .mdi { color: var(--dkf-p-600, var(--p-600)); }
.lrow-min { font-weight: 600; color: var(--muted); }
.lrow-btn { flex-shrink: 0; min-width: 120px; height: 44px; padding: 0 18px; font: inherit; font-size: 14.5px; font-weight: 800; }
a.lrow-btn.btn-u-outline { display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; }

@media (max-width: 640px) {
  /* Compact rows: small picture left, text right, button full width under them */
  .lrow { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .lrow-thumb { flex-basis: 72px; height: 72px; }
  .lrow-emoji { font-size: 38px; }
  .lrow-body { flex-basis: calc(100% - 84px); }
  .lrow-btn { flex-basis: 100%; }
  .lv-lock-note .btn-u { width: 100%; }
}

/* ===================================================
   GAMES (index): focus card, one list with the student's best score, top players
   =================================================== */
.gmx-head { margin: 4px 0 18px; }
.gmx-focus {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px;
  padding: 20px 24px; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--p-500); border-radius: 22px; box-shadow: 0 6px 0 var(--p-200);
}
.gmx-today { flex: 1 1 320px; min-width: 0; }
.gmx-today h2 { font-size: 20px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.gmx-today-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.gmx-today-row .bar { max-width: 280px; height: 12px; }
.gmx-today-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.gmx-today-note .mdi { font-size: 20px; color: var(--dkf-p-600, var(--p-600)); }
.gmx-suggest { flex: 0 1 auto; display: flex; flex-direction: column; gap: 6px; }
.gmx-suggest-label { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.gmx-suggest-text { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.gmx-suggest .btn-u { justify-content: flex-start; }

.gmx-grid { margin-top: 24px; }
.gmx-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gmx-cat {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--dk-b-ffffff, #fff); font-size: 14.5px; font-weight: 700; color: var(--ink-2);
}
.gmx-cat .mdi { font-size: 18px; color: var(--dkf-p-600, var(--p-600)); }
.gmx-cat:hover { border-color: var(--p-300); }
.gmx-cat.active { background: var(--p-600); border-color: var(--p-600); color: var(--dk-f-ffffff, #fff); box-shadow: 0 3px 0 var(--p-700); }
.gmx-cat.active .mdi { color: var(--dk-f-ffffff, #fff); }

.gmx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gmx-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 20px; }
.gmx-art { position: relative; height: 110px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gmx-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gmx-emoji { font-size: 54px; line-height: 1; }
.gmx-flag { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 8px; background: var(--sun); color: #1f1a3d; font-size: 12px; font-weight: 800; }
.gmx-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.gmx-cat-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.gmx-cat-label .mdi { font-size: 16px; }
.gmx-body h3 { font-size: 17px; font-weight: 900; color: var(--ink); }
.gmx-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.gmx-body .gmx-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 800; color: var(--ink-2); }
.gmx-status .mdi { font-size: 18px; color: var(--dkf-p-600, var(--p-600)); }
.gmx-card.is-played .gmx-status { color: var(--dk-f-7a4a00, #7a4a00); }
.gmx-card.is-played .gmx-status .mdi { color: var(--sun-deep); }
.gmx-play { height: 44px; font: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; }
a.gmx-play.btn-u-outline { display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; }

.gmx-top-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; color: var(--ink); }
.gmx-top-title .mdi { font-size: 26px; color: var(--sun-deep); }
.gmx-top-note { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gmx-top-empty { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.gmx-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gmx-players li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.gmx-players li.is-me { background: var(--p-100); }
.gmx-rank { flex: 0 0 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; background: var(--p-50); color: var(--ink-2); }
.gmx-rank.medal-1 { background: var(--sun); color: #1f1a3d; }
.gmx-rank.medal-2 { background: var(--dk-b-e2e8f0, #e2e8f0); color: var(--ink); }
.gmx-rank.medal-3 { background: var(--dk-b-fed7aa, #fed7aa); color: var(--ink); }
.gmx-player-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.gmx-you { font-weight: 700; color: var(--dkf-p-600, var(--p-600)); }
.gmx-player-meta { font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .gmx-focus { padding: 18px; }
  .gmx-suggest, .gmx-suggest .btn-u { width: 100%; }
  .gmx-list { grid-template-columns: 1fr; }
  .gmx-card { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .gmx-art { flex: 0 0 76px; height: 76px; }
  .gmx-emoji { font-size: 40px; }
  .gmx-flag { top: auto; bottom: 4px; left: 4px; right: 4px; text-align: center; font-size: 10.5px; padding: 2px 4px; }
  .gmx-body { flex: 1 1 calc(100% - 92px); padding: 0; }
  .gmx-play { flex: 1 1 100%; }
}

/* ===================================================
   GAME DETAIL: one column, real numbers in the hero, the child's best score
   =================================================== */
.gsx { max-width: none; }
.gsx-hero {
  display: flex; align-items: center; gap: 28px; padding: 26px 28px;
  background: var(--p-100); border: 1.5px solid var(--dk-b-e6defa, #e6defa); border-radius: 24px;
}
.gsx-art { flex: 0 0 180px; height: 180px; border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 96px; line-height: 1; }
.gsx-art img { width: 100%; height: 100%; object-fit: cover; }
.gsx-text { flex: 1; min-width: 0; }
.gsx-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--p-200); font-size: 14px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.gsx-pill .mdi { font-size: 18px; }
.gsx-hero .gs-title { margin: 10px 0 6px; overflow-wrap: anywhere; }
.gsx-desc { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 620px; overflow-wrap: anywhere; }
.gsx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gsx-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--dk-b-ffffff, #fff); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.gsx-facts .mdi { font-size: 18px; color: var(--dkf-p-600, var(--p-600)); }
.gsx-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.gsx-skills span { padding: 3px 10px; border-radius: 8px; background: var(--p-50); border: 1px solid var(--p-200); font-size: 12.5px; font-weight: 700; color: var(--dkf-p-700, var(--p-700)); }
.gsx-play { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.gsx-best { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink-2); }
.gsx-best .mdi { font-size: 22px; color: var(--dkf-p-600, var(--p-600)); }
.gsx-best.is-played { color: var(--dk-f-7a4a00, #7a4a00); }
.gsx-best.is-played .mdi { color: var(--sun-deep); }
.gsx-soon { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: var(--ink-2); }

.gsx .gs-panel { margin-top: 20px; }
.gsx-more { margin-top: 26px; }
.gsx-more-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gsx-more-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 16px; }
.gsx-more-card:hover { border-color: var(--p-300); }
.gsx-more-art { flex: 0 0 52px; height: 52px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; white-space: nowrap; letter-spacing: -4px; }
.gsx-more-art img { width: 100%; height: 100%; object-fit: cover; }
.gsx-more-body { display: flex; flex-direction: column; min-width: 0; }
.gsx-more-body b { font-size: 15px; font-weight: 900; color: var(--ink); }
.gsx-more-body small { font-size: 13px; font-weight: 700; color: var(--muted); }

@media (max-width: 760px) {
  .gsx-hero { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
  .gsx-art { flex: none; width: 96px; height: 96px; font-size: 54px; border-radius: 18px; }
  .gsx-play .btn-u { width: 100%; }
}

/* ===================================================
   ACHIEVEMENTS: one summary, the next badge to go for, real progress per badge
   =================================================== */
.achx-head { margin: 4px 0 18px; }
.achx-summary { display: flex; align-items: center; gap: 12px; margin-top: 12px; max-width: 420px; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.achx-summary .bar { height: 12px; }

.achx-next {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 22px;
  background: var(--dk-b-ffffff, #fff); border: 2px solid var(--sun); border-radius: 22px; box-shadow: 0 6px 0 var(--sun-deep);
}
.achx-next .hex-lg { margin: 0; flex-shrink: 0; }
.achx-next-body { flex: 1 1 280px; min-width: 0; }
.achx-kicker { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--dk-f-7a4a00, #7a4a00); }
.achx-next h2 { font-size: 22px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 2px 0 6px; }
.achx-next-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.achx-next-btn { flex-shrink: 0; }
.achx-done-icon { width: 72px; height: 72px; border-radius: 20px; background: var(--sun); color: #1f1a3d; display: flex; align-items: center; justify-content: center; font-size: 40px; }

/* Locked badges show their real look, faded, with a small lock: you can see what you'll get */
.achx-hex-faded { filter: grayscale(.85); opacity: .45; }
.achx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.achx-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 18px 18px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 20px; }
.achx-card.is-earned { border: 2px solid var(--sun); }
.achx-hex-wrap { position: relative; margin-bottom: 6px; }
.achx-hex-wrap .hex-lg { margin: 0; }
.achx-lock { position: absolute; right: -6px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--line); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.achx-card h3 { font-size: 17px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.achx-hint { margin: 0; font-size: 13.5px; color: var(--muted); }
.achx-status { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.achx-status.is-earned { padding: 5px 14px; border-radius: 999px; background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-14532d, #14532d); }
.achx-status.is-earned .mdi { color: var(--dk-f-15803d, #15803d); }
.achx-progress { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 220px; margin-top: 6px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.achx-next-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .achx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .achx-next { padding: 18px; }
  .achx-next-btn { width: 100%; }
  .achx-grid { gap: 10px; }
  .achx-card { padding: 16px 10px 12px; }
  .achx-card .hex-lg { width: 72px; height: 80px; }
  .achx-card .hex-lg .hex-inner { width: 60px; height: 68px; font-size: 32px; }
  .achx-card h3 { font-size: 15px; }
  .achx-next-link { font-size: 13px; text-align: center; }
}
/* Achievements grouped by kind */
.achx-group + .achx-group { margin-top: 26px; }
.achx-group-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 19px; font-weight: 900; color: var(--ink); }
.achx-group-title span { font-size: 14px; font-weight: 700; color: var(--muted); }
/* Badge card button + dialog */
.achx-card-btn { margin-top: 6px; height: 44px; padding: 0 16px; gap: 6px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.achx-card-btn .mdi { font-size: 18px; }
.achx-dialog { width: min(420px, calc(100% - 32px)); padding: 24px 22px 22px; border: 0; border-radius: 24px; background: var(--dk-b-ffffff, #fff); text-align: center; box-shadow: var(--float); }
.achx-dialog::backdrop { background: var(--dk-b-1f1a3d-60, rgba(31, 26, 61, .6)); }
.achx-dialog-title { font-size: 20px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin: 0 40px 14px; }
.achx-dialog canvas { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; filter: drop-shadow(0 10px 18px var(--dk-b-1f1a3d-25, rgba(31,26,61,.25))); }
.achx-dialog-note { margin: 14px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.achx-dialog-actions .btn-u { width: 100%; }

/* ===================================================
   MY PROGRESS: summary with clear definitions, one next step, activity, levels/skills, games, badges line
   =================================================== */
.pgx-head { margin: 4px 0 16px; }
.pgx-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 12px; }
.pgx-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 18px; }
.pgx-stat b { font-size: 28px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); line-height: 1.1; }
.pgx-stat b em { font-style: normal; font-size: 16px; font-weight: 800; color: var(--muted); }
.pgx-stat span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pgx-stat small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.pgx-stat-points { border: 2px solid var(--sun); }
.pgx-stat-points b { color: var(--dk-f-7a4a00, #7a4a00); }

.pgx-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; padding: 16px 20px; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--p-500); border-radius: 20px; box-shadow: 0 5px 0 var(--p-200); }
.pgx-next p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 800; color: var(--ink); }
.pgx-next-kicker { font-size: 13px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.pgx-next.is-done p { flex-direction: row; align-items: center; gap: 8px; color: var(--dk-f-14532d, #14532d); }
.pgx-next.is-done .mdi { font-size: 22px; color: var(--dk-f-15803d, #15803d); }

.pgx-sec { margin-top: 24px; }
.pgx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pgx-h { margin: 0 0 10px; font-size: 19px; font-weight: 900; color: var(--ink); }
.pgx-sec-head .pgx-h { margin: 0; }
.pgx-empty { margin: 0; padding: 14px 16px; background: var(--dk-b-ffffff, #fff); border: 1.5px dashed var(--line); border-radius: 14px; font-size: 14.5px; color: var(--ink-2); }
.pgx-more { margin: 6px 0 0; }

.pgx-activity { list-style: none; margin: 0; padding: 6px 16px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 18px; }
.pgx-activity li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pgx-activity li + li { border-top: 1.5px solid var(--line); }
.pgx-activity b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.pgx-activity span { font-size: 13px; color: var(--muted); }
.pgx-act-icon { flex: 0 0 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pgx-act-icon.is-lesson { background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-15803d, #15803d); }
.pgx-act-icon.is-game { background: var(--p-100); color: var(--dkf-p-600, var(--p-600)); }

.pgx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.pgx-list { list-style: none; margin: 10px 0 0; padding: 4px 14px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 18px; }
.pgx-list > li + li .pgx-row, .pgx-list > li.pgx-row + li.pgx-row { border-top: 1.5px solid var(--line); }
.pgx-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
a.pgx-row:hover b { color: var(--dkf-p-700, var(--p-700)); }
.pgx-row-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--p-50); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pgx-row-icon.is-skill { color: var(--dkf-p-600, var(--p-600)); }
.pgx-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pgx-row-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.pgx-row-top b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.pgx-row-status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pgx-row-status .is-ok { color: var(--dk-f-15803d, #15803d); }
/* Locked levels stay readable: status in words, no opacity */
.pgx-row.is-locked .pgx-row-icon { filter: grayscale(.7); }

.pgx-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding: 14px 18px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 18px; }
.pgx-badges-icon { flex: 0 0 44px; height: 44px; border-radius: 14px; background: var(--sun); color: #1f1a3d; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pgx-badges > div { flex: 1; min-width: 180px; }
.pgx-badges h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.pgx-badges p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.pgx-badges-btn { height: 44px; padding: 0 18px; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; }

@media (max-width: 1100px) { .pgx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgx-stat-points { grid-column: 1 / -1; } }
@media (max-width: 860px) { .pgx-pair { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pgx-next .btn-u { width: 100%; }
  .pgx-badges-btn { width: 100%; justify-content: center; }
}
/* Bars inside a vertical row body: keep their own height (flex: 1 would collapse them to 0) */
.pgx-row-body .bar { flex: none; width: 100%; }

/* ===================================================
   BATCH: sign-up payment, first password, week card
   =================================================== */
.auth-pay { margin: -18px 0 24px; padding: 14px 18px; border-radius: 14px; background: var(--p-50); border: 1.5px solid var(--p-200); }
.auth-pay-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 15px; color: var(--ink-2); }
.auth-pay-row strong { color: var(--ink); font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.auth-pay-note { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.auth-login-info { margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; border: 2px dashed var(--p-400); }
.auth-login-info h3 { margin: 0 0 6px; font-size: 17px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.auth-login-info p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* Transfer proof: uploads as soon as it is chosen */
.auth-upload { padding: 14px; border: 2px dashed var(--p-400); border-radius: 14px; background: var(--dk-b-ffffff, #fff); }
.auth-upload[data-state="done"] { border-style: solid; border-color: var(--dk-b-16a34a, #16a34a); }
.auth-upload[data-state="error"] { border-color: var(--dk-b-b91c1c, #b91c1c); }
/* The real file input stays reachable by keyboard but out of sight; the label below is the button. */
.auth-upload input[type=file] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.auth-upload { position: relative; }
.auth-upload-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; background: var(--p-50);
  color: var(--dkf-p-700, var(--p-700)); font-weight: 800; font-size: 16px; cursor: pointer; }
.auth-upload-btn .mdi { font-size: 24px; }
.auth-upload input[type=file]:focus-visible + input + .auth-upload-btn { outline: 3px solid var(--p-600); outline-offset: 2px; }
.auth-upload-preview { display: block; max-width: 100%; max-height: 180px; margin: 12px auto 0; border-radius: 10px; }
.auth-upload-status { margin: 8px 0 0; font-size: 14px; text-align: center; color: var(--ink-2); }
.auth-upload[data-state="done"] .auth-upload-status { color: var(--dk-f-15803d, #15803d); font-weight: 700; }
.auth-upload[data-state="error"] .auth-upload-status { color: var(--dk-f-b91c1c, #b91c1c); font-weight: 700; }
.auth-link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; font: inherit; }

/* Week card on the dashboard */
.wk { display: flex; gap: 16px; padding: 20px 22px; }
.wk-icon { font-size: 34px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.wk-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 19px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.wk-text { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.wk-meta { margin: 0; font-size: 13px; color: var(--muted); }
.wk-wait { background: var(--dk-b-fffbeb, #fffbeb); border-color: var(--dk-b-fde68a, #fde68a); }
.wk-wait .wk-icon { color: var(--dk-f-b45309, #b45309); }
.wk-stop { background: var(--dk-b-fff1f2, #fff1f2); border-color: var(--dk-b-fecdd3, #fecdd3); }
.wk-stop .wk-icon { color: var(--dk-f-b91c1c, #b91c1c); }
.wk-done .wk-icon { color: var(--sun-deep); }
.wk-week { display: block; }
.wk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.wk-dates { font-size: 14px; font-weight: 700; color: var(--muted); }
.wk-note { margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--dk-b-fff7ed, #fff7ed); color: var(--dk-f-9a3412, #9a3412); font-size: 14px; font-weight: 700; }
.wk-note-done { background: var(--dk-b-f0fdf4, #f0fdf4); color: var(--dk-f-166534, #166534); }
.wk-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.wk-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px; border-radius: 12px; background: var(--p-50); }
.wk-list li .mdi { font-size: 22px; color: var(--dkf-p-400, var(--p-400)); }
.wk-list li.is-done .mdi { color: var(--dk-f-16a34a, #16a34a); }
.wk-list li a { flex: 1; min-width: 0; font-weight: 800; color: var(--ink); text-decoration: none; }
.wk-list li a:hover { color: var(--dkf-p-700, var(--p-700)); }
.wk-list li span { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) {
  .wk { padding: 16px; gap: 12px; }
  .wk-list li { flex-wrap: wrap; }
  .wk-list li span { width: 100%; padding-left: 32px; }
}

/* Course and games while the batch payment is being checked */
.pay-lock { margin-bottom: 20px; }
.pay-lock a { font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.btn-u.is-locked, .btn-u-outline.is-locked { background: var(--track); color: var(--ink-2); border-color: var(--track); box-shadow: none; cursor: not-allowed; }
.btn-u-outline.is-locked { cursor: pointer; } /* still opens the game's page */
.btn-u.is-locked:hover { background: var(--track); }
.btn-u.is-locked:active { transform: none; }

/* ===================================================
   LANDING (Indonesian, batch sign-up)
   =================================================== */
.lnd-sec-head p { flex-basis: 100%; margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 680px; }

/* Who it is for: one plain list, no cards */
.lnd-for { padding: 64px 0 8px; }
.lnd-for h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin-bottom: 18px; }
.lnd-for ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; }
.lnd-for li { display: flex; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lnd-for li .mdi { flex-shrink: 0; font-size: 28px; line-height: 1.1; color: var(--dkf-p-600, var(--p-600)); }
.lnd-for b { color: var(--ink); }
.lnd-for-note { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.lnd-for-note .ico { flex-shrink: 0; font-size: 22px; color: var(--dkf-p-500, var(--p-500)); }

/* What the child gets: the certificate as a sheet of paper, the badges in the app's hexagons */
.lnd-reward { padding: 72px 0 24px; }
.lnd-reward-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lnd-cert { margin: 0; }
.lnd-cert-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 26, 61, .08), 0 14px 32px -12px rgba(43, 26, 107, .28); outline-offset: 4px; }
.lnd-cert-track::-webkit-scrollbar { display: none; }
.lnd-cert-track img { flex: 0 0 100%; display: block; width: 100%; height: auto; scroll-snap-align: start; background: #fff; }
.lnd-cert-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.lnd-cert-dots button { min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--p-200); background: var(--dk-b-ffffff, #fff);
  font: inherit; font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; }
.lnd-cert-dots button[aria-current="true"] { background: var(--p-600); border-color: var(--p-600); color: var(--dk-f-ffffff, #fff); }
.lnd-cert figcaption { margin-top: 22px; }
.lnd-cert h3, .lnd-badges-box h3 { margin: 0; font-size: 18px; font-weight: 900; color: var(--ink); }
.lnd-cert p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lnd-cert .lnd-cert-print { font-size: 14px; color: var(--muted); }
.lnd-badges-box { padding: 22px 20px; border-radius: 18px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); }
.lnd-badges { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
.lnd-badges li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lnd-badges .hex { margin-bottom: 8px; }
.lnd-badges .hex-inner .ico { font-size: 28px; }
.lnd-badges .hex-gold .hex-inner { color: #fff7d6; }
.lnd-badges b { font-size: 13px; font-weight: 800; color: var(--ink); }
.lnd-badges small { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.lnd-badges-note { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  .lnd-reward-grid { grid-template-columns: 1fr; }
  .lnd-reward { padding-top: 48px; }
}

/* Lesson steps: numbers on one thin line, no boxes; each step shows a small sample; the unit test closes the track */
.lnd-steps { list-style: none; margin: 0; padding: 0; }
.lnd-steps li { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 0 0 26px; }
.lnd-steps li::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--p-200); }
.lnd-steps li:last-child { padding-bottom: 0; }
.lnd-steps li:last-child::before { display: none; }
.lnd-step-num { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--p-600); color: var(--dk-f-ffffff, #fff); font-size: 16px; font-weight: 900; }
.lnd-steps h3 { margin: 5px 0 0; font-size: 17px; font-weight: 900; color: var(--ink); }
.lnd-steps p { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }
.lnd-step-eg { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 10px; background: var(--p-50); border: 1px solid var(--p-200); font-size: 14px; color: var(--dkf-p-700, var(--p-700)); }
.lnd-step-eg b { font-weight: 800; }
.lnd-step-eg i { font-style: normal; color: var(--muted); }
.lnd-step-eg .ico, .lnd-step-eg .mdi { font-size: 17px; }
.lnd-step-test .lnd-step-num { background: var(--sun); color: #1f1a3d; font-size: 20px; }
.lnd-step-test h3 { color: var(--ink); }
.lnd-games-note { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.lnd-games-note .mdi { font-size: 24px; color: var(--sun-deep); }
/* Game cards on the landing page are not links (games need an account): flat, so they do not look pressable. */

/* The 12 units */
.lnd-units-sec { padding: 72px 0 24px; }
/* The units as a journey: four stages, each a card with its three units and what the child can do after them */
.lnd-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: stage; }
.lnd-journey > li { padding: 20px; border-radius: 18px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); }
.lnd-journey-head small { display: block; font-size: 13px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.lnd-journey-head h3 { margin: 2px 0 0; font-size: 19px; font-weight: 900; color: var(--ink); }
.lnd-units { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lnd-units li { display: flex; align-items: center; gap: 12px; }
.lnd-unit-pic { flex-shrink: 0; width: 64px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--p-50); }
.lnd-units b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.lnd-units span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.lnd-can-label { margin: 16px 0 6px; padding-top: 14px; border-top: 1.5px dashed var(--p-200); font-size: 13px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.lnd-can { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lnd-can li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lnd-can .ico { margin-top: 2px; font-size: 17px; color: var(--dk-f-16a34a, #16a34a); }

/* Weekly schedule */
.lnd-plan-sec { margin-top: 56px; padding: 56px 0 64px; background: var(--p-100); }
.lnd-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lnd-plan li { padding: 16px 18px; border-radius: 18px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--p-200); }
.lnd-plan-week { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.lnd-plan-week b { font-size: 18px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.lnd-plan-week span { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.lnd-plan-units > span { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.lnd-plan-games { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.lnd-plan-games .mdi { font-size: 18px; color: var(--dkf-p-500, var(--p-500)); }

/* Fee and how to join: two different blocks side by side */
.lnd-join { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 72px 0 24px; align-items: start; }
.lnd-join h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.lnd-price { padding: 26px; border-radius: 22px; background: var(--p-600); color: var(--dk-f-ffffff, #fff); box-shadow: 0 6px 0 var(--p-700); }
.lnd-price h2 { color: var(--dk-f-ffffff, #fff); }
.lnd-price-amount { margin: 10px 0 0; font-size: clamp(34px, 4vw, 44px); font-weight: 900; line-height: 1.1; }
.lnd-price-for { margin: 4px 0 16px; font-size: 15px; color: var(--dk-f-ede6ff, #ede6ff); }
.lnd-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lnd-price li { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; }
.lnd-price li .mdi { font-size: 20px; line-height: 1.15; }
.lnd-how ol { list-style: none; counter-reset: how; margin: 14px 0 22px; padding: 0; display: grid; gap: 14px; }
.lnd-how li { counter-increment: how; position: relative; padding-left: 52px; }
.lnd-how li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--p-100); color: var(--dkf-p-700, var(--p-700)); font-weight: 900; font-size: 17px; }
.lnd-how b { display: block; font-size: 17px; font-weight: 900; color: var(--ink); }
.lnd-how span { display: block; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* The teacher */
.lnd-teacher { padding: 72px 0 0; }
.lnd-teacher-card { display: flex; align-items: center; gap: 24px; max-width: 880px; padding: 26px 28px; border-radius: 22px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); }
.lnd-teacher-av { flex-shrink: 0; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--p-100); color: var(--dkf-p-700, var(--p-700));
  font-size: 30px; font-weight: 900; letter-spacing: 1px; }
img.lnd-teacher-av { object-fit: cover; }
.lnd-teacher-tag { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--dkf-p-600, var(--p-600)); }
.lnd-teacher h2 { margin: 2px 0 6px; font-size: clamp(22px, 2.6vw, 26px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.lnd-teacher-card p:last-child { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Fee terms and the WhatsApp question link */
.lnd-price-terms { margin: 16px 0 0; font-size: 14px; color: var(--dk-f-ede6ff, #ede6ff); }
.lnd-price-terms a { color: var(--dk-f-ffffff, #fff); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lnd-ask { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.lnd-ask a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--dkf-p-700, var(--p-700)); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lnd-ask .ico { font-size: 20px; }

/* Questions parents ask */
.lnd-faq { padding: 48px 0 56px; }
.lnd-faq h2 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 900; color: var(--dkf-p-900, var(--p-900)); margin-bottom: 14px; }
.lnd-faq-list { display: grid; gap: 10px; max-width: 820px; }
.lnd-faq details { border-radius: 16px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); }
.lnd-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px;
  font-size: 16px; font-weight: 800; color: var(--ink); cursor: pointer; list-style: none; }
.lnd-faq summary::-webkit-details-marker { display: none; }
.lnd-faq summary::after { content: "+"; flex-shrink: 0; font-size: 22px; font-weight: 900; color: var(--dkf-p-600, var(--p-600)); }
.lnd-faq details[open] summary::after { content: "\2212"; }
.lnd-faq details p { margin: 0; padding: 0 18px 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.lnd-faq details a { color: var(--dkf-p-700, var(--p-700)); font-weight: 800; text-decoration: underline; }
.lnd-faq .lnd-ask { max-width: 820px; }

/* Floating WhatsApp button */
.lnd-wa { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--dk-b-25d366, #25d366); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 18px var(--dk-b-128c4a-35, rgba(18, 140, 74, .35)); }
.lnd-wa .ico { font-size: 28px; }
.lnd-wa:hover { background: var(--dk-b-1ebe5a, #1ebe5a); }
.lnd-foot { padding-bottom: 72px; }
/* Phones: a bar at the bottom with the fee, WhatsApp and the sign-up button; it takes the floating button's place */
.lnd-mbar { display: none; }
@media (max-width: 760px) {
  .lnd-mbar:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--dk-b-ffffff, #fff); border-top: 1.5px solid var(--line); box-shadow: 0 -6px 18px rgba(31, 26, 61, .08); }
  .lnd-mbar > div { flex: 1; min-width: 0; }
  .lnd-mbar b { display: block; font-size: 17px; font-weight: 900; color: var(--ink); line-height: 1.2; }
  .lnd-mbar small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lnd-mbar-wa { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line); color: var(--dk-f-128c4a, #128c4a); }
  .lnd-mbar-wa .ico { font-size: 26px; }
  .lnd-mbar-btn { flex-shrink: 0; height: 46px; padding: 0 22px; }
  .lnd-mbar:not([hidden]) ~ .lnd-wa { display: none; }
  .lnd-foot { padding-bottom: 96px; }
}

@media (max-width: 1100px) {
  .lnd-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .lnd-for ul { grid-template-columns: 1fr; }
  .lnd-join { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lnd-for, .lnd-units-sec, .lnd-join { padding-top: 48px; }
  .lnd-journey, .lnd-plan { grid-template-columns: 1fr; }
  .lnd-plan-sec { margin-top: 40px; padding: 40px 0 48px; }
  .lnd-how .btn-u { width: 100%; }
  .lnd-teacher { padding-top: 48px; }
  /* Phones: the photo beside the tag and name, the text full width below */
  .lnd-teacher-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 22px 20px; }
  .lnd-teacher-card > div { display: contents; }
  .lnd-teacher-av { grid-row: 1 / span 2; }
  .lnd-teacher-tag, .lnd-teacher h2 { grid-column: 2; }
  .lnd-teacher h2 { margin-bottom: 0; }
  .lnd-teacher-card p:last-child { grid-column: 1 / -1; margin-top: 14px; }
  .lnd-teacher-av { width: 64px; height: 64px; font-size: 22px; }
}

/* A link inside the consent sentence sits in the text, without the gap the footer link has. */
.auth-terms .auth-link { margin-left: 0; }

/* Sign-up in two steps: details, then payment */
.reg-steps { list-style: none; display: flex; gap: 10px; margin: -18px 0 22px; padding: 0; }
.reg-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--p-50);
  font-size: 14px; font-weight: 800; color: var(--muted); }
.reg-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--p-200); color: var(--muted); font-size: 13px; }
.reg-steps li.is-current { background: var(--p-100); color: var(--dkf-p-900, var(--p-900)); }
.reg-steps li.is-current span { background: var(--p-600); border-color: var(--p-600); color: var(--dk-f-ffffff, #fff); }
.reg-steps li.is-done span { background: var(--dk-b-16a34a, #16a34a); border-color: var(--dk-b-16a34a, #16a34a); color: var(--dk-f-ffffff, #fff); }
.reg-step { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.reg-step[hidden] { display: none; }
.reg-step .auth-pay { margin: 0; }
.reg-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); }
.reg-summary div { grid-column: 1; display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.reg-summary strong { color: var(--ink); overflow-wrap: anywhere; }
.reg-summary .auth-link-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--dkf-p-700, var(--p-700)); font-weight: 800; }
/* The sign-up page (le-lp/daftar): the fee and dates up front, copy buttons, help and the teacher */
.auth-simple .reg-steps { margin: 0 0 18px; }
.auth-simple .reg-step { gap: 14px; }
.auth-simple h1.auth-title { margin: 0; }
.reg-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; }
.reg-facts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--p-50); text-align: center; }
.reg-facts b { font-size: 16px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); white-space: nowrap; }
.reg-facts span { font-size: 12px; color: var(--ink-2); }
.reg-close { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 18px; font-size: 13px; color: var(--ink-2); text-align: center; }
.reg-close .ico, .reg-close .mdi { font-size: 16px; color: var(--sun-deep); }
.reg-amount strong { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.reg-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.reg-copy { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-left: 8px; padding: 0 10px; vertical-align: middle;
  border: 1.5px solid var(--p-300); border-radius: 999px; background: var(--dk-b-ffffff, #fff); color: var(--dkf-p-700, var(--p-700));
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.reg-copy .ico { font-size: 14px; }
.reg-acc { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--p-200); font-size: 14px; color: var(--ink-2); }
.reg-acc-name { font-weight: 800; color: var(--ink); }
.reg-acc-name small { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.reg-acc-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; font-size: 17px; color: var(--ink); }
.reg-acc-line .reg-copy { margin-left: 10px; }
.reg-acc-holder { font-size: 13px; }
.reg-copy .mdi { font-size: 14px; }
.reg-qris { margin: 12px 0 0; text-align: center; }
.reg-qris img { width: 200px; height: 200px; padding: 8px; object-fit: contain; border-radius: 12px; background: #fff; }
.reg-qris figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.reg-refund { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.reg-suggest { margin: -8px 0 0; font-size: 14px; color: var(--ink-2); }
.reg-suggest .auth-link-btn { min-height: 32px; padding: 0 2px; color: var(--dkf-p-700, var(--p-700)); font-weight: 800; }
.reg-help { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 12px 0 0; font-size: 14px; font-weight: 800;
  color: var(--dk-f-15803d, #15803d); text-align: center; text-decoration: none; }
.reg-help .ico, .reg-help .mdi { font-size: 20px; }
.reg-trust { display: flex; align-items: center; gap: 10px; width: min(440px, 100%); margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.reg-trust-av { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--p-100); }

/* Admin viewing the app as a student */
.u-impersonate {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px;
  background: var(--dk-b-1e1b4b, #1e1b4b); color: var(--dk-f-ffffff, #fff); font-size: 13.5px; box-shadow: 0 6px 18px var(--dk-b-1e1b4b-30, rgba(30, 27, 75, .3));
}
.u-impersonate > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-impersonate .mdi { margin-right: 6px; font-size: 18px; vertical-align: -3px; }
.u-impersonate form { margin: 0; }
.u-impersonate button {
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--dk-b-ffffff, #fff); color: var(--dk-f-1e1b4b, #1e1b4b); white-space: nowrap;
  font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.u-impersonate button:focus-visible { outline: 3px solid var(--sun, var(--dk-b-facc15, #facc15)); outline-offset: 2px; }

/* Certificates */
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cert-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--dk-b-ffffff, #fff); border: 1.5px solid var(--line); border-radius: 20px; }
.cert-card.is-earned { border: 2px solid var(--sun); }
.cert-icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; background: var(--p-50); color: var(--dkf-p-400, var(--p-400)); display: flex; align-items: center; justify-content: center; font-size: 36px; }
.cert-card.is-earned .cert-icon { background: var(--sun); color: #1f1a3d; }
.cert-body { flex: 1 1 240px; min-width: 0; }
.cert-kicker { margin: 0; font-size: 13px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.cert-body h2 { margin: 2px 0 6px; font-size: 20px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.cert-text { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cert-code { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.cert-progress { margin-top: 0; max-width: 260px; }
.cert-top { display: flex; align-items: center; gap: 16px 18px; }
.cert-grade { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 2px; padding: 4px 12px; border-radius: 999px; background: var(--dk-b-fff3cc, #fff3cc); color: var(--dk-f-5c3b00, #5c3b00); font-size: 14px; font-weight: 900; }
.cert-grade .mdi { color: var(--sun-deep); font-size: 18px; }
.cert-note { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--p-50); border-left: 5px solid var(--p-600); }
.cert-note blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.cert-note blockquote::before { content: '\201C'; } .cert-note blockquote::after { content: '\201D'; }
.cert-note figcaption { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.cert-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cert-actions .btn-u, .cert-actions .btn-u-outline { height: 46px; padding: 0 20px; gap: 8px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800; }
.cert-hint { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); }
.cert-print { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--p-300); }
.cert-print > .mdi { font-size: 26px; color: var(--dkf-p-600, var(--p-600)); line-height: 1; }
.cert-print p { margin: 0 0 4px; font-size: 14.5px; color: var(--ink-2); }
.cert-print-btn { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.cert-print a, .cert-print-btn { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); text-decoration: underline; text-underline-offset: 3px; }
.cert-dialog canvas { max-width: 260px; }
.cert-dialog-actions { display: grid; gap: 10px; }
@media (max-width: 560px) { .cert-actions > * { flex: 1 1 100%; justify-content: center; } }

/* Public certificate check */
.verify { max-width: 560px; padding-top: 32px; padding-bottom: 48px; }
.verify-card { margin-top: 18px; padding: 24px; border-radius: 20px; background: var(--dk-b-ffffff, #fff); border: 2px solid var(--line); }
.verify-card.is-valid { border-color: var(--dk-b-22c55e, #22c55e); }
.verify-card.is-bad { border-color: var(--dk-b-ef4444, #ef4444); }
.verify-status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 19px; font-weight: 900; }
.verify-card.is-valid .verify-status { color: var(--dk-f-15803d, #15803d); }
.verify-card.is-bad .verify-status { color: var(--dk-f-b91c1c, #b91c1c); }
.verify-status .mdi { font-size: 30px; }
.verify-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.verify-table th { width: 40%; padding: 8px 0; text-align: left; font-weight: 700; color: var(--muted); vertical-align: top; }
.verify-table td { padding: 8px 0; font-weight: 800; color: var(--ink); }
.verify-h { margin: 20px 0 8px; font-size: 16px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.verify-cando { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.verify-cando li + li { margin-top: 4px; }
.verify-cando b { color: var(--ink); }
.verify-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.verify-form { display: flex; gap: 8px; margin-top: 18px; }
.verify-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-weight: 700; text-transform: uppercase; }
.verify-form input:focus { outline: 3px solid var(--p-300); border-color: var(--p-500); }
.verify-form .btn-u { height: 48px; padding: 0 20px; }
.lp-done-cert { background: var(--sun); color: #1f1a3d; box-shadow: 0 4px 0 var(--sun-deep); }

/* Printed certificate order */
.cord { max-width: 720px; }
.cord-back { margin: 0 0 6px; }
.cord-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14.5px; font-weight: 800; color: var(--dkf-p-700, var(--p-700)); }
.cord-wide { grid-column: 1 / -1; }
.pf-field textarea, .pf-field select { padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: 14.5px; color: var(--ink); outline: 0; background: var(--dk-b-ffffff, #fff); }
.pf-field select { height: 46px; padding-top: 0; padding-bottom: 0; }
.pf-field textarea:focus, .pf-field select:focus { border-color: var(--p-600); box-shadow: 0 0 0 3px var(--p-200); }
.cord-step { margin-top: 26px; }
.cord-qty { max-width: 160px; margin-bottom: 14px; }
.cord-pay { margin: 0 0 16px; }
.cord-foot { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: right; }
.cert-order { padding: 12px 14px; border-radius: 14px; background: var(--p-50); font-size: 14.5px; color: var(--ink-2); }
.cert-order p { margin: 0; }
.cert-order p + p { margin-top: 4px; }
.cert-order a { font-weight: 800; color: var(--dkf-p-700, var(--p-700)); text-decoration: underline; text-underline-offset: 3px; }
.cert-order-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.cert-order-status.is-pending { background: var(--dk-b-fef3c7, #fef3c7); color: var(--dk-f-7a4a00, #7a4a00); }
.cert-order-status.is-confirmed { background: var(--dk-b-dbeafe, #dbeafe); color: var(--dk-f-1e3a8a, #1e3a8a); }
.cert-order-status.is-shipped { background: var(--dk-b-dcfce7, #dcfce7); color: var(--dk-f-14532d, #14532d); }
.cert-order-status.is-rejected { background: var(--dk-b-fee2e2, #fee2e2); color: var(--dk-f-991b1b, #991b1b); }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } .cord-foot { text-align: left; } }

/* ===== DASHBOARD (audit fixes) ===== */
/* Hero art: the child's avatar among the stars */
.hero-art { display: flex; align-items: center; justify-content: center; }
.hero-avatar { position: relative; z-index: 1; width: 148px; height: 148px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--p-500); color: var(--dk-f-ffffff, #fff); font-size: 64px; font-weight: 900; border: 6px solid var(--dk-b-ffffff, #fff); box-shadow: 0 0 0 6px var(--sun); }
.hero-avatar.is-emoji { background: var(--dk-b-fde7c8, #fde7c8); font-size: 84px; }
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-star { position: absolute; color: var(--sun); }
.hero-star-a { top: 34px; left: 18%; font-size: 22px; }
.hero-star-b { bottom: 36px; right: 16%; font-size: 18px; color: var(--dk-f-c7b6f5, #c7b6f5); }
.hero-star-c { bottom: 58px; left: 24%; font-size: 14px; }

/* Every unit finished */
.dash-done { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border: 2px solid var(--sun); background: linear-gradient(135deg, var(--dk-b-fffaf0, #fffaf0), var(--dk-b-ffffff, #fff)); }
.dash-done-emoji { flex-shrink: 0; width: 84px; height: 84px; border-radius: 22px; background: var(--sun); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.dash-done-body { min-width: 0; }
.dash-done h2 { margin: 0 0 6px; font-size: 21px; font-weight: 900; color: var(--dkf-p-900, var(--p-900)); }
.dash-done p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.dash-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dash-done-actions .btn-u, .dash-done-actions .btn-u-outline { height: 46px; padding: 0 20px; gap: 8px; font-size: 15px; font-weight: 800; }

/* Week goal inside the Week card, and the "This week" summary without a batch */
.wk-goal { margin: 4px 0 12px; }
.dash-week-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.dash-week-stats div { padding: 12px; border-radius: 14px; background: var(--p-50); font-size: 14px; color: var(--ink-2); text-align: center; }
.dash-week-stats b { display: block; font-size: 26px; font-weight: 900; color: var(--dkf-p-600, var(--p-600)); line-height: 1.1; }
.card.game { position: relative; }
.game-week { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: var(--sun); color: #1f1a3d; font-size: 12px; font-weight: 900; }

@media (max-width: 760px) {
  .hero-art { display: none; }
  .dash .hero { min-height: 0; }
  .dash .hero-sub { margin-bottom: 0; }
  .dash-done { flex-direction: column; text-align: center; }
  .dash-done-actions { justify-content: center; }
  .dash-done-actions > * { flex: 1 1 100%; justify-content: center; }
  /* One column on phones: the side cards join the main list, ordered by what matters most */
  /* stretch: .d-grid's align-items:start would shrink each card to its content */
  .dash { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .dash > .d-main, .dash > .d-side { display: contents; }
  .dash > .d-main > *, .dash > .d-side > * { width: auto; margin-top: 0; margin-bottom: 0; }
  .dash > .d-main > * > .sec:first-child { margin-top: 0; }
  .dash-o-1 { order: 1; } .dash-o-2 { order: 2; } .dash-o-3 { order: 3; } .dash-o-4 { order: 4; }
  .dash-o-5 { order: 5; } .dash-o-6 { order: 6; } .dash-o-7 { order: 7; } .dash-o-8 { order: 8; }
  .dash-o-9 { order: 9; } .dash-o-10 { order: 10; } .dash-o-11 { order: 11; }
}

/* Theme choice (auto / light / dark) in the account menu */
.u-user-theme { padding: 8px 12px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
.u-user-theme-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.theme-switch { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--p-50); }
.u-user-menu .theme-switch button, .theme-switch button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; width: auto; min-height: 44px; padding: 4px 6px;
  border: 0; border-radius: 9px; background: none; color: var(--ink-2); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.u-user-menu .theme-switch button:hover, .theme-switch button:hover { background: var(--card); color: var(--ink); }
.theme-switch button[aria-checked="true"], .u-user-menu .theme-switch button[aria-checked="true"] { background: var(--card); color: var(--dkf-p-600, var(--p-600)); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.theme-switch .mdi { font-size: 18px; }
.theme-switch button:focus-visible { outline: 3px solid var(--p-400); outline-offset: 1px; }

/* Batch timeline on the week card: one step per week */
.wk-line-wrap { margin: 14px 0 12px; }
.wk-line { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.wk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk-step + .wk-step::before {
  content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; border-radius: 2px;
  background: var(--track); z-index: 0;
}
.wk-step.is-done + .wk-step::before, .wk-step.is-done + .wk-step.is-done::before { background: var(--dk-b-86efac, #86efac); }
.wk-dot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 900;
}
.wk-dot .mdi { font-size: 18px; line-height: 1; }
.wk-step.is-done .wk-dot { border-color: #16a34a; background: #22c55e; color: #fff; }
.wk-step.is-missed .wk-dot { border-color: #f59e0b; background: var(--dk-b-fff7ed, #fff7ed); color: var(--dk-f-9a3412, #9a3412); }
.wk-step.is-current .wk-dot { border-color: var(--p-600); background: var(--p-600); color: #fff; }
.wk-step.is-now .wk-dot { box-shadow: 0 0 0 4px var(--p-200); }
.wk-step-label { font-size: 12px; font-weight: 800; color: var(--muted); }
.wk-step.is-now .wk-step-label { color: var(--dkf-p-600, var(--p-600)); }
.wk-line-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.wk-line-meta b { color: var(--ink); }
.wk-line-end { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.wk-line-end .mdi { font-size: 16px; }

/* Notifications: bell in the top bar, and the list */
.u-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); color: var(--ink-2); font-size: 22px; }
.u-bell:hover, .u-bell.active { color: var(--p-600); border-color: var(--p-300); }
.u-bell .mdi-bell-ring { color: var(--p-600); }
.u-bell-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11.5px; font-weight: 900; line-height: 20px; text-align: center; border: 2px solid var(--bg); }
.ntf { max-width: 720px; }
.ntf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ntf-item { display: flex; gap: 14px; padding: 16px 18px; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; }
.ntf-item.is-new { border-color: var(--p-300); background: var(--p-50); }
.ntf-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.ntf-gold { background: #fff3cc; color: #a16207; }
.ntf-purple { background: var(--p-100); color: var(--p-600); }
.ntf-green { background: #dcfce7; color: #15803d; }
.ntf-body { min-width: 0; }
.ntf-title { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ntf-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--p-300); text-underline-offset: 3px; }
.ntf-text { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ntf-time { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.ntf-pages { margin-top: 16px; }

/* "New badge!" pop-up */
.bu-dialog { width: min(420px, calc(100% - 32px)); padding: 26px 22px 22px; border: 0; border-radius: 24px; background: var(--card); text-align: center; box-shadow: var(--float); }
.bu-dialog::backdrop { background: rgba(31, 26, 61, .6); }
.bu-burst { font-size: 40px; line-height: 1; animation: bu-pop .5s ease-out; }
.bu-title { margin: 6px 0 14px; font-size: 24px; font-weight: 900; color: var(--p-900); }
.bu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.bu-list li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px; background: var(--p-50); }
.bu-list .hex-lg { margin: 0; flex-shrink: 0; transform: scale(.7); transform-origin: center; }
.bu-list b { display: block; font-size: 16px; font-weight: 900; color: var(--ink); }
.bu-list span { display: block; font-size: 13.5px; color: var(--ink-2); }
.bu-note { margin: 14px 0 12px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.bu-actions { display: grid; gap: 8px; }
.bu-actions .btn-u, .bu-actions .btn-u-outline { height: 46px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; }
@keyframes bu-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bu-burst { animation: none; } }