/* Plutomonk design system v4
   Concept: playful, gamified daily practice. Purple #9769FF primary with a #CCB6FF to #9769FF gradient,
   warm orange #FFB662 for challenges and rewards, deep plum #392F4D text, white surfaces.
   Font: Barlow throughout (800 to 900 for headings). Numbers: tabular. */
:root {
  --bg: #F7F4FF; --surface: #FFFFFF; --surface-2: #F5F1FF; --sunk: #ECE6FA; --peach: #FFF4E6; --peach-2: #FFE3C2; --orange: #FFB662; --orange-deep: #F08F2E; --grad: linear-gradient(160deg, #CCB6FF, #9769FF);
  --ink: #9769FF; --ink-2: #392F4D; --text: #392F4D; --muted: #7A7290; --line: #ECE7F6;
  --accent: #9769FF; --accent-ink: #FFFFFF; --accent-soft: #F0E9FF; --accent-deep: #7B4FEA;
  --ok: #2B9348; --ok-soft: #E3F5E8; --bad: #E03131; --bad-soft: #FDECEC; --gold: #F6B531;
  --on-ink: #FFFFFF; --on-ink-muted: #EDE4FF;
  --radius: 22px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(57, 47, 77, .04), 0 12px 32px -16px rgba(57, 47, 77, .16);
  --display: 'Barlow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15111E; --surface: #1F1A2B; --surface-2: #272137; --sunk: #312946; --peach: #2E2433; --peach-2: #3D2E33; --orange: #FFB662; --orange-deep: #F5A04A; --grad: linear-gradient(160deg, #7F5AE0, #5A3BB8);
    --ink: #8A5CF6; --ink-2: #E9E9FF; --text: #F1ECFB; --muted: #ABA3C2; --line: #352D4A;
    --accent: #B497FF; --accent-ink: #1B1430; --accent-soft: #2E2547; --accent-deep: #CDB8FF;
    --ok: #69DB7C; --ok-soft: #173322; --bad: #FF8787; --bad-soft: #3A1C24; --gold: #FFC94D;
    --on-ink: #FFFFFF; --on-ink-muted: #E6DCFF; --shadow: 0 1px 0 rgba(0,0,0,.2), 0 14px 34px -16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15111E; --surface: #1F1A2B; --surface-2: #272137; --sunk: #312946; --peach: #2E2433; --peach-2: #3D2E33; --orange: #FFB662; --orange-deep: #F5A04A; --grad: linear-gradient(160deg, #7F5AE0, #5A3BB8);
  --ink: #8A5CF6; --ink-2: #E9E9FF; --text: #F1ECFB; --muted: #ABA3C2; --line: #352D4A;
  --accent: #B497FF; --accent-ink: #1B1430; --accent-soft: #2E2547; --accent-deep: #CDB8FF;
  --ok: #69DB7C; --ok-soft: #173322; --bad: #FF8787; --bad-soft: #3A1C24; --gold: #FFC94D;
  --on-ink: #FFFFFF; --on-ink-muted: #E6DCFF; --shadow: 0 1px 0 rgba(0,0,0,.2), 0 14px 34px -16px rgba(0,0,0,.6); color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(900px 500px at 0% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(700px 500px at 110% 10%, color-mix(in srgb, var(--peach-2) 60%, transparent), transparent 70%), var(--bg); background-attachment: fixed; color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); } .sm { font-size: 13px; } .xs { font-size: 12px; } .center { text-align: center; } .spacer { flex: 1; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

#app { max-width: 540px; margin: 0 auto; min-height: 100dvh; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
#app.bare { padding-bottom: 0; }
#app.wide { max-width: 1240px; }
.view { padding: 4px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 16px; animation: rise .28s ease-out; }
@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }

/* ---- Top bar ---- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); }
.brand { display: flex; align-items: center; gap: 9px; font: 800 19px var(--display); letter-spacing: -.03em; }
.mark { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, #B497FF, #7B4FEA); display: grid; place-items: center; position: relative; overflow: hidden; flex: none; }
.mark::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.mark::after { content: ''; position: absolute; width: 30px; height: 10px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%; transform: rotate(-20deg); }
.mark.lg { width: 64px; height: 64px; border-radius: 20px; } .mark.lg::before { width: 26px; height: 26px; } .mark.lg::after { width: 56px; height: 18px; border-width: 2px; }
.top-title { flex: 1; font: 700 17px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; flex: none; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; } .icon-btn.sm svg { width: 16px; height: 16px; }
.coin-pill { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 7px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }
.coin { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #FFE3A3, var(--gold) 55%, #B9770E); box-shadow: inset 0 0 0 1.5px rgba(120, 70, 0, .35); display: inline-block; vertical-align: -3px; }

/* ---- Tab bar ---- */
.tabbar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(520px, calc(100% - 24px)); display: flex; padding: 6px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 36px -14px rgba(57, 47, 77, .28); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 18px; color: var(--muted); font-size: 11px; font-weight: 600; transition: background .2s, color .2s; }
.tabbar a.on { background: var(--accent); color: var(--accent-ink); }

/* ---- Buttons & inputs ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 16px; font-family: var(--display); font-weight: 800; font-size: 15px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; transition: transform .1s, filter .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.ink { background: var(--ink-2); color: var(--bg); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
label > input, label > textarea, label > select { margin-top: 6px; }
input:not([type=radio]):not([type=checkbox]):not([type=color]), textarea, select { display: block; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); outline: none; font-size: 15px; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row > .grow { flex: 1; min-width: 0; }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }
.fine { font-size: 12px; color: var(--muted); }

/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 2px -6px; }
.section-head h3 { font-size: 18px; }

/* ---- Auth ---- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; }
.auth-hero { background: linear-gradient(150deg, #B497FF, #7B4FEA); color: var(--on-ink); padding: calc(36px + env(safe-area-inset-top)) 24px 70px; position: relative; overflow: hidden; }
.auth-hero h1 { font-size: 34px; margin-top: 18px; }
.auth-hero p { color: var(--on-ink-muted); margin-top: 6px; max-width: 32ch; }
.orbit { position: absolute; right: -60px; top: -40px; width: 240px; height: 240px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--on-ink) 25%, transparent); }
.orbit::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); left: 28px; top: 40px; box-shadow: 0 0 24px var(--accent); }
.auth-card { margin: -46px 16px 24px; position: relative; }
.seg { display: flex; padding: 4px; background: var(--surface-2); border-radius: 14px; gap: 4px; }
.seg a, .seg button { flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-weight: 700; color: var(--muted); border: 0; background: none; cursor: pointer; font-size: 14px; }
.seg .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 13px; color: var(--on-ink-muted); }
.ticks li { display: flex; gap: 8px; align-items: center; } .ticks svg { stroke: var(--accent); width: 16px; height: 16px; }

/* ---- Home ---- */
.hello { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 4px; }
.hello h2 { font-size: 28px; }
.streak { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--accent-soft); color: var(--text); font-weight: 800; }
.streak svg { stroke: var(--accent); }
.today { background: linear-gradient(140deg, #B497FF, #7B4FEA); color: var(--on-ink); border: 0; position: relative; overflow: hidden; }
.today::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--on-ink) 14%, transparent); }
.today .eyebrow { color: var(--on-ink-muted); }
.today-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.today-total { font: 800 40px/1 var(--display); display: flex; align-items: center; gap: 10px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.today-total .coin { width: 28px; height: 28px; }
.today small { color: var(--on-ink-muted); }
.malas { display: grid; gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.mala { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.mala span { color: var(--on-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beads { display: flex; gap: 4px; flex-wrap: wrap; }
.bead { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--on-ink) 16%, transparent); }
.bead.on { background: radial-gradient(circle at 35% 30%, #FFF1C2, var(--gold) 60%, #C98A0B); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.bead.extra { background: radial-gradient(circle at 35% 30%, #fff, #FFD978 60%, #E09A00); }
.mala b { font-variant-numeric: tabular-nums; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 13px; }
.notice svg { stroke: var(--accent); }
.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subject { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .12s; }
.subject:active { transform: scale(.98); }
.subject-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); margin-bottom: 4px; }
.subject-ic svg { width: 24px; height: 24px; }
.subject b { font: 700 16px/1.2 var(--display); }
.subject small { color: var(--muted); font-size: 12px; }
.meter { height: 6px; border-radius: 6px; background: var(--sunk); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: 6px; }
.promo { display: flex; align-items: center; gap: 14px; }
.promo-ic { width: 48px; height: 48px; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); flex: none; }
.promo-ic svg { width: 24px; height: 24px; }
.promo b { display: block; font-family: var(--display); font-size: 16px; }

/* ---- Subject hero & topics ---- */
.hero { border-radius: var(--radius); padding: 20px; color: #fff; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 55%, #071a1e)); display: flex; gap: 14px; align-items: center; }
.hero .subject-ic { background: rgba(255,255,255,.18); color: #fff; width: 56px; height: 56px; margin: 0; }
.hero h2 { font-size: 24px; }
.hero p { opacity: .88; font-size: 13px; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.topics { display: flex; flex-direction: column; gap: 10px; }
.topic { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.ring { --p: 0; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--c, var(--accent)) calc(var(--p) * 1%), var(--sunk) 0); }
.ring span { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.topic-main { flex: 1; min-width: 0; }
.topic-main b { display: block; font-weight: 700; }
.topic-main small { color: var(--muted); font-size: 12px; }
.chev { color: var(--muted); }

/* ---- Set grid ---- */
.level-tabs { position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 5; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.tile { aspect-ratio: 1; max-width: 100%; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; position: relative; font-variant-numeric: tabular-nums; }
.tile b { font: 800 18px var(--display); }
.tile small { font-size: 10px; color: var(--muted); font-weight: 600; }
.tile.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.tile.done small { color: var(--ok); }
.tile.open { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: 0 10px 20px -10px var(--accent); }
.tile.open small { color: var(--accent-ink); }
.tile.open::after { content: ''; position: absolute; inset: -5px; border-radius: 20px; border: 2px solid var(--accent); opacity: .5; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.08); opacity: 0; } }
.tile.locked { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.tile.locked svg { width: 16px; height: 16px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---- Ads ---- */
.ad { display: block; }
.ad-label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 2px; }
.ad-ph { height: 100px; border-radius: 14px; border: 1px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 12px; background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--surface-2) 9px 18px); }

/* ---- Sheets & dialogs ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(4, 20, 24, .5); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; }
.sheet-wrap.open { opacity: 1; }
.sheet { width: 100%; max-width: 540px; max-height: 92dvh; overflow: auto; background: var(--surface); border-radius: 26px 26px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); transform: translateY(40px); transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; gap: 10px; }
.sheet-wrap.open .sheet { transform: none; }
.sheet.wide { max-width: 720px; }
.grip { width: 42px; height: 5px; border-radius: 5px; background: var(--line); margin: 0 auto 6px; }
.sheet h3 { font-size: 21px; }
.sheet-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.sheet-ic svg { width: 28px; height: 28px; }
.dialog { z-index: 300; }
.toast { position: fixed; z-index: 400; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); background: #392F4D; color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; opacity: 0; transition: .25s; max-width: calc(100% - 32px); text-align: center; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Quiz ---- */
.quiz { min-height: 100dvh; display: flex; flex-direction: column; }
.quiz-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.quiz-title { flex: 1; min-width: 0; }
.quiz-title b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-title small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.timer { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-variant-numeric: tabular-nums; }
.timer.warn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.qbar { display: flex; gap: 4px; padding: 0 16px; }
.qbar i { flex: 1; height: 4px; border-radius: 4px; background: var(--sunk); }
.qbar i.ans { background: color-mix(in srgb, var(--accent) 50%, var(--sunk)); }
.qbar i.cur { background: var(--accent); }
.qbody { padding: 18px 16px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.qmeta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.mark-btn { display: flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 12px; cursor: pointer; }
.mark-btn.on { color: var(--accent); } .mark-btn.on svg { fill: var(--accent); }
.passage { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-size: 14px; white-space: pre-line; }
.passage summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.passage summary::-webkit-details-marker { display: none; }
.passage[open] summary { margin-bottom: 8px; }
.qtext { font: 600 19px/1.45 var(--body); letter-spacing: -.01em; white-space: pre-line; }
.dtable { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.dtable table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.dtable th, .dtable td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable th:first-child, .dtable td:first-child { text-align: left; }
.dtable th { background: var(--surface-2); font-size: 12px; color: var(--muted); }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 16px; transition: border-color .15s, background .15s; }
.opt .k { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 13px; flex: none; }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt.sel .k { background: var(--accent); color: var(--accent-ink); }
.opt:disabled { opacity: .55; cursor: default; }
.linkish { align-self: flex-start; border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; padding: 0; }
.palette { display: flex; gap: 6px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.pal { flex: none; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pal.ans { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.pal.exp { background: var(--sunk); color: var(--muted); text-decoration: line-through; }
.pal.mk { box-shadow: inset 0 -3px 0 var(--accent); }
.pal.cur { outline: 2px solid var(--accent); outline-offset: 1px; }
.quiz-foot { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.quiz-foot .btn { flex: 1; }

/* ---- Result ---- */
.scorecard { background: linear-gradient(150deg, #B497FF, #7B4FEA); color: var(--on-ink); border: 0; text-align: center; }
.scorecard .eyebrow { color: var(--on-ink-muted); }
.dial { --p: 0; width: 156px; height: 156px; margin: 16px auto 10px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255,255,255,.22) 0); }
.dial > div { width: 128px; height: 128px; border-radius: 50%; background: #8A5CF6; display: grid; place-content: center; }
.dial b { font: 800 40px/1 var(--display); font-variant-numeric: tabular-nums; }
.dial small { color: var(--on-ink-muted); }
.verdict { font: 700 18px var(--display); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.trio div { padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--on-ink) 8%, transparent); }
.trio b { display: block; font: 800 22px var(--display); font-variant-numeric: tabular-nums; }
.trio small { font-size: 11px; color: var(--on-ink-muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--surface-2); border-radius: 14px; padding: 12px 8px; text-align: center; }
.stat b { display: block; font: 800 20px var(--display); font-variant-numeric: tabular-nums; }
.stat small { font-size: 11px; color: var(--muted); }
.locked-card { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.blurred { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; width: 100%; }
.review { display: flex; flex-direction: column; gap: 10px; }
.rv { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rv summary { display: flex; gap: 12px; padding: 14px; cursor: pointer; list-style: none; align-items: flex-start; }
.rv summary::-webkit-details-marker { display: none; }
.rv-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; background: var(--surface-2); }
.rv.ok .rv-n { background: var(--ok-soft); color: var(--ok); } .rv.bad .rv-n { background: var(--bad-soft); color: var(--bad); }
.rv-q { flex: 1; font-weight: 600; font-size: 14px; white-space: pre-line; min-width: 0; }
.rv-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.rv-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.rv-body li { padding: 7px 10px; border-radius: 9px; }
.rv-body li.right { background: var(--ok-soft); font-weight: 700; } .rv-body li.wrong { background: var(--bad-soft); }
.expl { font-size: 13px; background: var(--accent-soft); padding: 10px 12px; border-radius: 12px; white-space: pre-line; }
.duo { display: flex; gap: 10px; } .duo .btn { flex: 1; }

/* ---- Refer & profile ---- */
.refer-hero { background: linear-gradient(150deg, #B497FF, #7B4FEA); color: var(--on-ink); border: 0; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.refer-hero p { color: var(--on-ink-muted); font-size: 14px; max-width: 38ch; }
.code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 10px 10px 18px; border-radius: 16px; border: 1.5px dashed rgba(255,255,255,.6); background: rgba(255,255,255,.1); }
.code span { font: 800 24px var(--display); letter-spacing: .14em; }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; gap: 10px; }
.kv:last-child { border-bottom: 0; } .kv b { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.steps { display: grid; gap: 12px; }
.step { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.step i { width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 800 13px var(--display); font-style: normal; flex: none; }
.me { display: flex; align-items: center; gap: 14px; }
.avatar { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(145deg, #B497FF, #7B4FEA); color: var(--on-ink); display: grid; place-items: center; font: 800 24px var(--display); }

/* ---- Rewarded overlay ---- */
.rw { position: fixed; inset: 0; z-index: 500; background: rgba(3, 12, 14, .88); display: grid; place-items: center; padding: 16px; }
.rw-card { width: 100%; max-width: 420px; border-radius: 22px; overflow: hidden; background: #0b2126; color: #fff; }
.rw-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.rw-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.12); padding: 4px 8px; border-radius: 6px; }
.rw-close { border: 0; border-radius: 10px; padding: 7px 12px; background: rgba(255,255,255,.12); color: #fff; font-weight: 700; cursor: pointer; }
.rw-close.ready { background: #F08C00; color: #2B1700; }
.rw-stage { aspect-ratio: 16/10; max-width: 100%; display: grid; place-content: center; gap: 8px; text-align: center; background: radial-gradient(circle at 70% 20%, #16535d, #071a1e 70%); }
.rw-bar { height: 4px; background: rgba(255,255,255,.12); } .rw-bar i { display: block; height: 100%; width: 0; background: #F08C00; }
.rw-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px; font-size: 13px; }

/* ---- Admin ---- */
.admin { padding-bottom: 40px; }
.admin-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--text); }
.admin-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.admin-tabs a { padding: 12px 14px; font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.admin-tabs a.on { color: var(--text); border-color: var(--accent); }
.admin-main { padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi b { display: block; font: 800 30px var(--display); font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); }
.cms { display: grid; grid-template-columns: 220px 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.col h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 8px 6px 4px; font-family: var(--body); }
.item { text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.item small { color: var(--muted); font-weight: 500; }
.item.on { background: var(--accent-soft); }
.line { display: flex; gap: 4px; align-items: center; }
.main-col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.q-ed { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.q-ed textarea, .q-ed input { padding: 8px 10px !important; font-size: 14px !important; margin: 0 !important; }
.q-opt { display: flex; align-items: center; gap: 8px; color: var(--text); }
.q-opt input[type=radio] { accent-color: var(--ok); width: 18px; height: 18px; flex: none; }
.q-opt span { width: 16px; font-weight: 800; }
.sticky-bar { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grid2 .full { grid-column: 1 / -1; }
.grid2 h3 { grid-column: 1 / -1; margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: center; color: var(--text); font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.tbl { overflow-x: auto; } .tbl table { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th, .tbl td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
code, pre.code-sample { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; }
code { padding: 1px 6px; } pre.code-sample { padding: 10px; overflow-x: auto; white-space: pre-wrap; margin: 0; }
.place { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) { .cms { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } }

/* ---- v3 components ---- */
.bubble { --c: var(--accent); width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 62%, #fff) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -10px var(--c); }
.bubble::after { content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%; right: -12px; top: -12px; background: rgba(255,255,255,.16); }
.bubble svg { width: 26px; height: 26px; stroke-width: 2; position: relative; z-index: 1; }
svg.i .d { fill: currentColor; stroke: none; opacity: .3; }
.choose { display: grid; grid-template-columns: 1fr; border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.choose-side { background: linear-gradient(150deg, #B497FF, #7B4FEA); color: #fff; padding: 18px 20px; }
.choose-side h3 { font-size: 22px; } .choose-side p { color: var(--on-ink-muted); font-size: 13px; margin-top: 2px; }
.choose-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); transition: transform .12s; }
.choice:active { transform: scale(.98); }
.choice .bubble { flex: none; }
.choice .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.choice b { font: 900 16px/1.2 var(--display); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choice small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.choice small .coin { width: 12px; height: 12px; }
.choice small.xs { font-size: 11px; }
.cbar { display: block; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 3px; }
.cbar i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--accent)); }
.choice .go { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.choice .go svg { width: 16px; height: 16px; }
.choice.hot { background: linear-gradient(150deg, #B497FF, #7B4FEA); border-color: transparent; color: #fff; box-shadow: 0 14px 26px -14px #7B4FEA; }
.choice.hot small { color: var(--on-ink-muted); }
.choice.hot .cbar { background: rgba(255,255,255,.25); } .choice.hot .cbar i { background: #fff; }
.choice.hot .go { background: #fff; color: var(--accent-deep); }
.choice .meter { width: 100%; }
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 10px; }
.welcome h2 { font-size: 30px; line-height: 1.05; }
.welcome p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.welcome svg.flag { width: 110px; height: 110px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { padding: 9px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); font: 800 14px var(--display); cursor: pointer; font-variant-numeric: tabular-nums; }
.chip-btn.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.qclock { --p: 100; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--sunk) 0); }
.qclock span { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 900 14px var(--display); font-variant-numeric: tabular-nums; }
.qclock.warn { background: conic-gradient(var(--bad) calc(var(--p) * 1%), var(--sunk) 0); } .qclock.warn span { color: var(--bad); }
.timeup { padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-weight: 700; font-size: 13px; }
.peach { background: var(--peach); border-color: transparent; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
[hidden] { display: none !important; }

/* ---- Interactive layer: learn mode, badges, goal, motion ---- */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.btn, .chip-btn, .tile, .topic, .choice, .opt, .pal, .icon-btn { -webkit-tap-highlight-color: transparent; }
.btn:active, .chip-btn:active, .pal:active, .icon-btn:active { transform: scale(.96); }
.btn, .chip-btn, .pal, .icon-btn, .tile, .topic { transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s; }
.tile:active, .topic:active { transform: scale(.97); }
.tile.open { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } }
.opt:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.opt:not(:disabled):active { transform: scale(.985); }
.opt.pop { animation: pop .28s ease; }
@keyframes pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.opt.right { border-color: var(--ok); background: var(--ok-soft); opacity: 1; }
.opt.right .k { background: var(--ok); color: #fff; } .opt.right .k svg { width: 16px; height: 16px; stroke-width: 3; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); opacity: 1; animation: shake .38s ease; }
.opt.wrong .k { background: var(--bad); color: #fff; }
.opt.dim { opacity: .5; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.feedback { margin-top: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid; animation: slideup .3s ease; }
.feedback.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .feedback.ok b { color: var(--ok); }
.feedback.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); } .feedback.bad b { color: var(--bad); }
.feedback p { margin-top: 6px; font-size: 14px; white-space: pre-line; }
@keyframes slideup { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.mode-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.chips.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips.modes .chip-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 14px; text-align: left; height: auto; }
.chips.modes .chip-btn small { font-size: 11px; font-weight: 500; opacity: .8; }
.goal { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.goal .ring { width: 34px; height: 34px; --c: var(--accent); transition: --p .8s ease; } .goal .ring span { width: 26px; height: 26px; font-size: 9px; }
.goal b { display: block; font-size: 12px; line-height: 1.1; } .goal small { font-size: 11px; color: var(--muted); }
.goal.met { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); } .goal.met .ring { --c: var(--ok); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.badge b { font: 800 13px/1.15 var(--display); } .badge small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.badge:not(.on) .bubble { filter: grayscale(1); opacity: .35; box-shadow: none; } .badge:not(.on) b { color: var(--muted); }
.badge.on { border-color: color-mix(in srgb, var(--c) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--surface)), var(--surface)); }
.badge-pop { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.badge-pop .badge { width: 150px; animation: badgein .5s cubic-bezier(.2, 1.4, .4, 1) both; } .badge-pop .bubble { width: 64px; height: 64px; border-radius: 20px; } .badge-pop .bubble svg { width: 32px; height: 32px; }
@keyframes badgein { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 400; }
@media (prefers-reduced-motion: reduce) { .tile.open, .opt.wrong, .opt.pop, .feedback, .badge-pop .badge { animation: none; } }
.tables-btn { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tbl-picks { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tbl-picks .chip-btn { flex: none; min-width: 44px; padding: 8px 10px; }
.tbl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.tbl-grid div { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-variant-numeric: tabular-nums; animation: slideup .25s ease both; }
.tbl-grid span { color: var(--muted); } .tbl-grid b { font-weight: 800; }

/* ---- Fit every phone: nothing may push the page sideways ---- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
#app, .view, .quiz, .auth { max-width: 100%; min-width: 0; }
.view > *, .qbody > *, .stack > * { min-width: 0; max-width: 100%; }
.choose { grid-template-columns: minmax(0, 1fr); }
.choice .grow, .topic-main, .promo .grow { min-width: 0; }
.choice small { overflow: hidden; text-overflow: ellipsis; }
.qtext, .opt span:last-child, .passage, .expl, .feedback p { overflow-wrap: anywhere; min-width: 0; }
.dtable { max-width: 100%; overflow-x: auto; }
.quiz-top { flex-wrap: nowrap; } .quiz-top > :not(.quiz-title) { flex: none; }
.quiz-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qmeta { flex-wrap: wrap; gap: 6px; }
@media (max-width: 420px) { .quiz-top .timer.with-clock { display: none; } .quiz-top { gap: 8px; padding-left: 12px; padding-right: 12px; } }
@media (max-width: 360px) { .opt { padding: 11px 12px; font-size: 15px; } .opt .k { width: 28px; height: 28px; } .view { gap: 14px; } }

/* ---- Quiz bottom banner (persistent, clearly separated from the buttons) ---- */
.quiz-ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; text-align: center; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.quiz-ad .ad-label { margin: 0 0 4px; text-align: center; }
.quiz-ad .ad-ph { height: 50px; max-width: 728px; margin: 0 auto; }
.quiz-ad ins, .quiz-ad iframe { max-height: 100px; }
body:has(.quiz-ad) .quiz { padding-bottom: var(--qad, 0px); }
body:has(.quiz-ad) .quiz-foot { bottom: var(--qad, 0px); padding-bottom: 12px; margin-bottom: 10px; }
.pm-banner { display: inline-block; width: 320px; height: 50px; }
@media (min-width: 500px) { .pm-banner { width: 468px; height: 60px; } }
@media (min-width: 800px) { .pm-banner { width: 728px; height: 90px; } }

/* ---- Home: lighter ---- */
.hello { display: flex; align-items: center; gap: 12px; }
.hello h2 { font-size: clamp(22px, 7vw, 28px); line-height: 1.1; }
.hello .muted { margin: 0; }
.hello .streak { margin-left: auto; }
.avatar { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff; font: 900 20px var(--display); background: linear-gradient(140deg, #B497FF, #7B4FEA); box-shadow: 0 10px 20px -12px #7B4FEA; text-decoration: none; }
.avatar.xl { width: 64px; height: 64px; border-radius: 20px; font-size: 28px; transition: transform .2s; }
.exam-tag { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: var(--peach, #FFF2E8); color: #B5560F; font-size: 11px; font-weight: 700; }
.hello-line { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick .goal { border-radius: 18px; padding: 10px 12px 10px 10px; min-width: 0; }
.quick .goal > span:last-of-type { min-width: 0; } .quick .goal small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coins-q { color: inherit; text-decoration: none; } .coins-q .chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted); }
.coin-big .coin { width: 30px; height: 30px; }
.choose-list.plain { padding: 0; }
.notice .icon-btn.sm { width: 30px; height: 30px; margin-left: auto; flex: none; } .notice .icon-btn.sm svg { width: 14px; height: 14px; }

/* ---- Coins dashboard ---- */
.coin-hero { background: linear-gradient(150deg, #B497FF, #7B4FEA); color: #fff; border: 0; }
.coin-hero .eyebrow { color: rgba(255,255,255,.8); }
.coin-total { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; } .coin-total .coin { width: 40px; height: 40px; } .coin-total b { font: 900 46px/1 var(--display); font-variant-numeric: tabular-nums; }
.coin-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coin-split div { background: rgba(255,255,255,.14); border-radius: 14px; padding: 10px; } .coin-split b { display: block; font: 800 18px var(--display); } .coin-split small { font-size: 11px; color: rgba(255,255,255,.8); }
.coin-subs { display: flex; flex-direction: column; gap: 14px; }
.coin-sub { display: flex; align-items: center; gap: 12px; } .coin-sub .grow { min-width: 0; }
.bubble.sm { width: 38px; height: 38px; border-radius: 12px; } .bubble.sm svg { width: 20px; height: 20px; } .bubble.sm::after { width: 24px; height: 24px; }
.coin-sub .cbar i { background: var(--c); }
.earn { display: flex; flex-direction: column; gap: 10px; }
.earn-card { display: flex; gap: 12px; align-items: flex-start; } .earn-card small { display: block; margin-top: 2px; }
.tips { display: flex; flex-direction: column; gap: 10px; } .tips p { display: flex; gap: 10px; margin: 0; font-size: 14px; } .tips svg { color: var(--accent); flex: none; margin-top: 2px; }

/* ---- Auth: interactive and personal ---- */
.auth-brand { font: 900 22px var(--display); }
.auth-hero h1 { font-size: clamp(24px, 7vw, 32px); margin-top: 22px; line-height: 1.15; }
.orbit { animation: spin 40s linear infinite; } .orbit.o2 { width: 140px; height: 140px; right: 30px; top: 60px; animation-duration: 26s; animation-direction: reverse; opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-card { overflow: hidden; }
.auth-card.shake { animation: shake .4s ease; }
.auth-foot { margin: -8px 16px 24px; }
.step { animation: stepin .32s cubic-bezier(.2, .9, .3, 1); }
@keyframes stepin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.steps-dots { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.steps-dots i { width: 22px; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s, width .3s; }
.steps-dots i.done { background: var(--accent); } .steps-dots i.cur { background: var(--accent); width: 34px; }
.steps-dots span { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.namecard { display: flex; align-items: center; gap: 14px; } .namecard b { display: block; font: 800 17px var(--display); } .namecard small { display: block; }
.who { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); } .who .grow { min-width: 0; } .who small { display: block; overflow: hidden; text-overflow: ellipsis; }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.exam { padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font: 800 14px var(--display); color: var(--text); cursor: pointer; transition: transform .12s, border-color .15s, background .15s; }
.exam:active { transform: scale(.96); } .exam.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.pw { position: relative; display: block; } .pw input { padding-right: 48px; width: 100%; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; border-radius: 10px; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.eye.on { color: var(--accent-deep); background: var(--accent-soft); }
.pw-meter { display: flex; align-items: center; gap: 5px; margin-top: -6px; } .pw-meter i { flex: 1; height: 5px; border-radius: 99px; background: var(--line); transition: background .25s; } .pw-meter small { width: 52px; text-align: right; font-size: 12px; color: var(--muted); }
.pw-meter[data-n="1"] i:nth-child(-n+1) { background: var(--bad); } .pw-meter[data-n="2"] i:nth-child(-n+2) { background: #F59F00; } .pw-meter[data-n="3"] i:nth-child(-n+3) { background: #74B816; } .pw-meter[data-n="4"] i { background: var(--ok); }
.refbox summary { cursor: pointer; font-size: 14px; font-weight: 600; } .refbox input { margin-top: 8px; width: 100%; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff; animation: spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .orbit, .step, .auth-card.shake { animation: none; } }
.earn-card .grow { min-width: 0; } .earn-card .row { flex-wrap: wrap; }
.coin-sub .grow { flex: 1; } .coin-sub .cbar { margin-top: 6px; }

/* ---- Reminders, ads setup, notification preview ---- */
.remind { display: flex; align-items: center; gap: 12px; }
.remind .grow { min-width: 0; } .remind b { display: block; } .remind small { display: block; font-size: 12.5px; line-height: 1.4; }
.remind .btn { flex: none; } .remind .icon-btn.sm { width: 30px; height: 30px; flex: none; } .remind .icon-btn.sm svg { width: 14px; height: 14px; }
.remind.compact { padding: 12px 14px; background: linear-gradient(135deg, #FFF8E6, var(--surface)); border-color: #FFE3A3; }
.checks { display: flex; flex-direction: column; gap: 6px; } .checks p { display: flex; gap: 8px; margin: 0; font-size: 13.5px; } .checks svg { flex: none; margin-top: 2px; }
.checks .ok svg { color: var(--ok); } .checks .bad { color: var(--bad); } .checks code { font-size: 12px; word-break: break-all; }
.chip-st { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .chip-st.on { background: var(--ok-soft); color: var(--ok); }
.place { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); } .place textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
.ads-quick { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.notif-prev { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); max-width: 420px; }
.notif-prev b { display: block; font-size: 14px; } .notif-prev small { display: block; color: var(--muted); font-size: 13px; }

/* ---- Polish: light heroes, calmer tiles ---- */
.hero { color: var(--text); background: radial-gradient(160px 160px at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), color-mix(in srgb, var(--c) 4%, var(--surface))); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); box-shadow: 0 14px 30px -24px var(--c); position: relative; overflow: hidden; }
.hero .grow { min-width: 0; }
.hero h2 { font-size: clamp(20px, 6vw, 24px); line-height: 1.15; }
.hero p { opacity: 1; color: var(--muted); }
.hero-kicker { color: color-mix(in srgb, var(--c) 75%, var(--text)) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px !important; margin: 0 0 2px !important; }
.hero .cbar { margin-top: 10px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); } .hero .cbar i { background: var(--c); }
.topic { box-shadow: none; transition: transform .12s, border-color .15s; } .topic:hover { border-color: color-mix(in srgb, var(--c, var(--accent)) 40%, var(--line)); }
.tile { box-shadow: none; }
.tile.locked { background: transparent; border-style: dashed; opacity: .75; }
.tile.done { position: relative; } .tile .tick { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; } .tile .tick svg { width: 10px; height: 10px; stroke-width: 3.5; }
.level-tabs { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 5; }

/* ======== v4: purple, playful ======== */
h1, h2, h3, .btn, b { letter-spacing: -.005em; }
.topbar.purple { background: var(--grad); color: #fff; border-radius: 0 0 24px 24px; margin-bottom: 6px; box-shadow: 0 12px 26px -18px #7B4FEA; backdrop-filter: none; }
.topbar.purple .brand, .topbar.purple .top-title { color: #fff; }
.topbar.purple .icon-btn { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; }
.topbar.purple .coin-pill, .home-head .coin-pill { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); color: #fff; }
.topbar.purple .mark { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Home header */
.home-head { margin: calc(-4px) calc(-1 * max(16px, env(safe-area-inset-left))) 0; padding: calc(16px + env(safe-area-inset-top)) 18px 20px; color: #fff; border-radius: 0 0 30px 30px; position: relative; overflow: hidden;
  background: radial-gradient(180px 180px at 105% -10%, rgba(255,255,255,.28), transparent 70%), radial-gradient(140px 140px at -10% 110%, rgba(255,182,98,.35), transparent 70%), var(--grad); box-shadow: 0 16px 34px -22px #7B4FEA; }
.hh-row { display: flex; align-items: center; gap: 12px; } .hh-row .grow { min-width: 0; flex: 1; } .hh-row .coin-pill { margin-left: auto; flex: none; }
.hh-row small { display: block; font-size: 13px; opacity: .9; } .hh-row b { display: block; font: 800 21px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-head .avatar { background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.hh-card { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); }
.hh-card .grow { min-width: 0; flex: 1; } .hh-card small { font-size: 12px; opacity: .9; display: block; } .hh-card b { font: 800 17px var(--display); display: block; margin: 1px 0 8px; }
.hh-card .cbar { background: rgba(255,255,255,.3); height: 7px; } .hh-card .cbar i { background: var(--orange); }
.hh-streak { flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 16px; background: #fff; color: var(--orange-deep); line-height: 1; }
.hh-streak svg { width: 18px; height: 18px; } .hh-streak b { font: 900 20px var(--display); margin: 2px 0 0; color: #392F4D; } .hh-streak small { font-size: 10px; color: #7A7290; }

/* Action tiles */
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.act { position: relative; overflow: hidden; aspect-ratio: 1 / .95; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-decoration: none;
  background: linear-gradient(160deg, var(--t1), var(--t2)); box-shadow: 0 14px 22px -14px var(--t2); transition: transform .12s; }
.act:active { transform: scale(.96); }
.act::before { content: ''; position: absolute; width: 130%; aspect-ratio: 1; left: -15%; top: 62%; border-radius: 50%; background: rgba(255,255,255,.16); }
.act::after { content: ''; position: absolute; width: 60px; height: 60px; right: -18px; top: -18px; border-radius: 50%; border: 10px solid rgba(255,255,255,.14); }
.act svg { width: 26px; height: 26px; padding: 11px; box-sizing: content-box; border-radius: 50%; background: rgba(255,255,255,.25); stroke-width: 2.2; position: relative; }
.act b { font: 800 14px var(--display); position: relative; }

/* Daily challenge */
.challenge { display: flex; align-items: center; gap: 8px; padding: 18px 14px 18px 20px; border-radius: 24px; color: #fff; text-decoration: none; position: relative; overflow: hidden;
  background: radial-gradient(160px 120px at 0% 0%, rgba(255,255,255,.35), transparent 70%), linear-gradient(135deg, #FFC98A, #FFB662 45%, #F59A3C); box-shadow: 0 16px 28px -18px #F08F2E; }
.challenge .grow { min-width: 0; } .challenge b { display: block; font: 900 clamp(24px, 7.5vw, 30px)/1 var(--display); text-shadow: 0 2px 0 rgba(193, 98, 10, .25); }
.challenge small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; opacity: .95; }
.go-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 8px 14px; border-radius: 99px; background: #fff; color: var(--orange-deep); font: 800 13px var(--display); }
.go-btn svg { width: 14px; height: 14px; stroke-width: 2.6; }
.qart { width: 118px; height: auto; flex: none; }

/* Subject grid */
.subj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.subj { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 136px; padding: 14px; border-radius: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 62%, #fff), var(--c)); box-shadow: 0 14px 24px -16px var(--c); transition: transform .12s; }
.subj:active { transform: scale(.97); }
.subj-bg { position: absolute; right: -14px; bottom: -14px; opacity: .22; } .subj-bg svg { width: 96px; height: 96px; stroke-width: 1.6; }
.subj-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.25); } .subj-ic svg { width: 22px; height: 22px; stroke-width: 2.1; }
.subj b { margin-top: auto; font: 800 16px/1.15 var(--display); position: relative; } .subj small { display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: .95; position: relative; } .subj small .coin { width: 12px; height: 12px; }
.subj .cbar { background: rgba(255,255,255,.3); margin-top: 6px; position: relative; } .subj .cbar i { background: #fff; }
.subj svg .d { fill: #fff; }

/* Tab bar with a centre Play button */
.tabbar { padding: 6px 6px 6px; border-radius: 26px; overflow: visible; }
.tabbar a { font-size: 11px; font-weight: 700; }
.tabbar a.on { background: var(--accent-soft); color: var(--accent-deep); }
.tabbar a.play { color: var(--accent-deep); padding-top: 0; }
.tabbar a.play span { width: 54px; height: 54px; margin-top: -26px; margin-bottom: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 10px 20px -6px #7B4FEA, 0 0 0 5px var(--surface); }
.tabbar a.play svg { width: 22px; height: 22px; fill: #fff; }

/* Badges page */
.badge-hero { display: flex; align-items: center; gap: 14px; background: var(--grad); color: #fff; border: 0; }
.badge-hero .eyebrow { color: rgba(255,255,255,.85); } .badge-hero .big { font: 900 40px/1 var(--display); display: block; margin: 4px 0 6px; } .badge-hero .big small { font-size: 16px; opacity: .85; } .badge-hero p { margin: 0; opacity: .92; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .stats3 .card { padding: 12px; text-align: center; } .stats3 b { display: block; font: 800 20px var(--display); } .stats3 small { color: var(--muted); font-size: 11px; }

/* Warmer accents in shared parts */
.streak { background: #FFF1DF; color: var(--orange-deep); }
.btn.primary { background: var(--grad); }
.seg .on { color: var(--accent-deep); }
.cbar i { background: var(--accent); }
@media (max-width: 340px) { .act b { font-size: 12.5px; } .qart { width: 92px; } .subj { min-height: 124px; padding: 12px; } }
.view > .home-head { max-width: none; }

/* P coin: gold coin stamped with a P */
.coin { position: relative; display: inline-grid; place-items: center; container-type: size; }
.coin::after { content: 'P'; font: 900 62cqh/1 var(--display); color: #8A5300; text-shadow: 0 1px 0 rgba(255,236,190,.8); transform: translateY(2%); }
.hh-card { justify-content: space-between; }
.dc-break { display: flex; flex-direction: column; gap: 12px; }
.dc-row { display: flex; align-items: center; gap: 12px; } .dc-row .grow { flex: 1; min-width: 0; } .dc-row .grow b { font-size: 14px; display: block; margin-bottom: 6px; }
.dc-row .cbar i { background: var(--c); } .dc-row > b { font: 800 16px var(--display); }
.dc-row .bubble { width: 38px; height: 38px; border-radius: 12px; }
.ads-seg { margin-bottom: 14px; } .ads-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; } .ads-seg svg { width: 16px; height: 16px; }
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); }

/* Tablets, Chromebooks and desktop: keep the app a comfortable phone-like column */
@media (min-width: 760px) {
  .view { --side: max(24px, calc((100% - 640px) / 2)); padding-inline: var(--side); }
  .view > .home-head { margin-inline: 0; padding-inline: 22px; }
  .topbar { padding-inline: max(16px, calc((100% - 640px) / 2)); }
  .subj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No zooming: no double-tap zoom, and inputs at 16px so iPhone never zooms in when you type */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
.palette.fit { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; overflow: visible; }
.palette.fit .pal { width: auto; aspect-ratio: 1; height: auto; min-width: 0; padding: 0; }
.ad.spot .ad-ph { border: 2px dashed #F0603A; color: #C2410C; background: repeating-linear-gradient(135deg, #FFF4EC 0 10px, #FFE9DB 10px 20px); font-weight: 700; }
.quiz-ad .ad.spot .ad-ph { min-height: 50px; display: grid; place-items: center; }

/* ===== v6: soft, friendly look ===== */
.hello2 { display: flex; align-items: center; gap: 12px; padding-top: calc(12px + env(safe-area-inset-top)); }
.avatar2 { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 900 20px var(--display); color: #fff; text-decoration: none; background: var(--grad); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #E4D9FF; }
.hello2 .grow { min-width: 0; } .hello2 b { display: block; font: 800 21px/1.15 var(--display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hello2 small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hello2 .coin-pill { background: #FFF6E8; border-color: #FFE2B8; color: #8A5300; flex: none; }
.bell { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--line); } .bell svg { width: 20px; height: 20px; }
.streak2 { position: relative; padding: 14px 14px 12px; border-radius: 22px; background: #EFE9FF; border: 1px solid #E2D7FF; overflow: hidden; }
.streak2 > .row b { font: 800 15px var(--display); color: var(--text); } .goal2 { font-size: 12px; font-weight: 700; color: var(--accent-deep); background: #fff; padding: 3px 9px; border-radius: 99px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding-right: 44px; }
.week span { display: flex; flex-direction: column; align-items: center; gap: 4px; } .week small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.week i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #DCCFFF; } .week i svg { width: 14px; height: 14px; stroke-width: 3; color: #fff; }
.week .on i { background: var(--accent); border-color: var(--accent); } .week .today i { box-shadow: 0 0 0 3px #CDBBFF; } .week .fut i { opacity: .55; } .week .today small { color: var(--accent-deep); }
.star2 { position: absolute; right: 12px; bottom: 16px; font-size: 34px; line-height: 1; color: #FFC94D; text-shadow: 0 3px 0 #F0A92E; }
.subj-grid.pastel { gap: 12px; }
.subj2 { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 142px; padding: 14px; border-radius: 22px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--c) 16%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); transition: transform .15s; }
.subj2:active { transform: scale(.97); }
.subj-ic2 { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--c); margin-bottom: auto; box-shadow: 0 6px 14px -8px var(--c); } .subj-ic2 svg { width: 24px; height: 24px; stroke-width: 2.1; } .subj-ic2 svg .d { fill: color-mix(in srgb, var(--c) 30%, #fff); }
.subj2 b { font: 800 15px/1.15 var(--display); margin-top: 10px; padding-right: 30px; } .subj2 small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: color-mix(in srgb, var(--c) 55%, #392F4D); } .subj2 small .coin { width: 12px; height: 12px; }
.subj2 .cbar { margin-top: 6px; background: rgba(255,255,255,.8); } .subj2 .cbar i { background: var(--c); }
.go2 { position: absolute; right: 12px; bottom: 26px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text); box-shadow: 0 4px 10px -6px rgba(57,47,77,.4); } .go2 svg { width: 14px; height: 14px; stroke-width: 2.6; }
.cont2 { display: flex; align-items: center; gap: 12px; position: relative; text-decoration: none; color: var(--text); padding-right: 52px; }
.cont-ic { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); } .cont-ic svg { width: 28px; height: 28px; } .cont-ic svg .d { fill: rgba(255,255,255,.35); }
.cont2 .grow { min-width: 0; } .cont2 b { display: block; font: 800 15px var(--display); } .cont2 small { color: var(--muted); font-size: 12px; } .cont2 .cbar { margin-top: 8px; } .cont2 .pct { font-size: 12px; font-weight: 800; color: var(--accent-deep); }
.cont2 .go2 { bottom: auto; top: 50%; transform: translateY(-50%); background: var(--surface-2); }
.badge-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; text-align: center; }
.bdg span { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); } .bdg span svg { width: 26px; height: 26px; stroke-width: 2.2; }
.bdg small { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.2; } .bdg:not(.on) span { filter: grayscale(1); opacity: .45; } .bdg:not(.on) small { color: var(--muted); }
.acts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acts2 a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); }
.acts2 svg { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 12px; background: #fff; color: var(--c); flex: none; } .acts2 b { font: 800 14px var(--display); }
.challenge { background: linear-gradient(135deg, #FFD27A, #FFB662 55%, #FF9F45); }
/* Quiz: friendlier footer button, like a lesson */
.quiz-foot .btn.ink, .quiz-foot .btn.primary { background: var(--grad); color: #fff; border: 0; border-radius: 99px; box-shadow: 0 10px 22px -12px #7B4FEA; }
.quiz-foot .btn { border-radius: 99px; }
.opt { border-radius: 18px; } .opt.sel { background: #F3EDFF; border-color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .streak2 { background: #2B2440; border-color: #3B3256; } .subj2, .acts2 a, .bdg span { background: color-mix(in srgb, var(--c) 22%, #1E1A2B); border-color: color-mix(in srgb, var(--c) 30%, #1E1A2B); }
  .subj-ic2, .go2, .acts2 svg, .week i, .goal2 { background: #2A2438; } .hello2 .coin-pill { background: #3A2E1A; border-color: #5A4423; color: #FFD9A0; }
}
.week span.on, .week span.today { background: none !important; box-shadow: none !important; color: inherit; }
/* Onboarding */
.onb { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #FFF8F3, #F7F4FF); position: relative; }
.onb-skip { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 20px; z-index: 2; color: var(--muted); font-weight: 700; }
.onb-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .onb-track::-webkit-scrollbar { display: none; }
.onb-slide { flex: 0 0 100%; scroll-snap-align: start; padding: 48px 26px 0; display: flex; flex-direction: column; }
.onb-slide h1 { font: 900 clamp(34px, 10vw, 44px)/1.02 var(--display); color: var(--text); margin: 0; letter-spacing: -.5px; }
.onb-slide p { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; max-width: 32ch; }
.onb-art { margin: 26px -26px 0; flex: 1; min-height: 240px; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, var(--bg) 0 46%, transparent 47%); }
.onb-art svg { width: min(68vw, 280px); height: auto; } .onb-art .qart { width: min(62vw, 260px); }
.onb-coins { position: relative; width: 200px; height: 200px; } .onb-coins .coin { position: absolute; width: 96px; height: 96px; } .onb-coins .coin:nth-child(1) { left: 10px; top: 60px; transform: rotate(-12deg); } .onb-coins .coin:nth-child(2) { left: 70px; top: 20px; width: 110px; height: 110px; } .onb-coins .coin:nth-child(3) { left: 110px; top: 96px; transform: rotate(10deg); }
.onb-coins b { position: absolute; right: -6px; top: 0; background: #22A86B; color: #fff; font: 900 18px var(--display); padding: 6px 12px; border-radius: 99px; box-shadow: 0 8px 18px -8px #22A86B; }
.onb-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0; } .onb-dots i { width: 8px; height: 8px; border-radius: 99px; background: #D9D2EA; transition: width .25s, background .25s; } .onb-dots i.on { width: 22px; background: var(--accent); }
.onb-go { margin: 0 22px 10px; background: #2A2340; color: #fff; border: 0; border-radius: 99px; padding: 16px; font-size: 16px; display: flex; justify-content: center; gap: 8px; }
.onb-go svg { width: 18px; height: 18px; }
.subj2 .go2 { top: 14px; bottom: auto; } .subj2 b { padding-right: 0; }
.goal2 { white-space: nowrap; flex: none; } .streak2 > .row { gap: 8px; align-items: flex-start; flex-wrap: nowrap; }
.hello2 small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .hello2 b { font-size: 18px; } .streak2 > .row b { font-size: 14px; } .week i { width: 22px; height: 22px; } .week { padding-right: 34px; } .star2 { font-size: 28px; } }

/* ---------- v7 Courses marketplace ---------- */
.sec-h { font-size: 18px; margin: 4px 2px -6px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.lms-skel { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--sunk), var(--surface-2)); background-size: 200% 100%; animation: lmsSk 1.2s infinite linear; } .lms-skel.tall { height: 320px; }
@keyframes lmsSk { to { background-position: -200% 0; } }
.lms-promo, .lms-teach { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: var(--peach); border: 1px solid var(--peach-2); }
.lms-promo b, .lms-teach b { display: block; font: 800 16px var(--display); } .lms-promo small, .lms-teach small { display: block; font-size: 13px; line-height: 1.35; }
.lms-hero { display: flex; align-items: center; gap: 12px; padding: 20px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #B497FF, #7B4FEA); overflow: hidden; }
.lms-hero.orange { background: linear-gradient(135deg, #FFB662, #F0603A); }
.lms-hero small { font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } .lms-hero h2 { font-size: 22px; margin: 4px 0 6px; } .lms-hero p { font-size: 14px; opacity: .92; }
.lms-hero > svg { width: 84px; height: 84px; flex: none; opacity: .9; stroke-width: 1.4; margin-right: -14px; }
.lms-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; } .lms-filter::-webkit-scrollbar { display: none; } .lms-filter .chip-btn { flex: none; }
.lms-grid, .lms-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.lms-card { --cc: #9769FF; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transition: transform .12s; } .lms-card:active { transform: scale(.98); }
.lms-cover { position: relative; height: 92px; background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 55%, #fff), var(--cc)); color: #fff; display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px 14px; }
.lms-cover svg { width: 58px; height: 58px; opacity: .85; stroke-width: 1.4; }
.lms-exam { display: inline-block; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.25); color: #fff; font: 800 12px var(--display); }
.lms-cover .lms-exam { position: absolute; left: 12px; top: 12px; }
.lms-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .lms-body > b { font: 800 16px/1.25 var(--display); } .lms-body > small { font-size: 13px; line-height: 1.35; }
.lms-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.lms-price { font: 900 15px var(--display); color: var(--accent-deep); } .lms-price.free { color: var(--ok); }
.lms-bar { height: 6px; border-radius: 9px; background: var(--sunk); overflow: hidden; margin-top: 6px; } .lms-bar i { display: block; height: 100%; background: var(--grad); border-radius: 9px; }
.lms-acct { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; padding: 4px; }
.lms-status { --c: #7A7290; display: inline-block; padding: 3px 10px; border-radius: 99px; font: 800 12px var(--display); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.lms-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; padding: 14px 16px; }
.lms-head { --cc: #9769FF; padding: 22px 20px; border-radius: 26px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--cc) 60%, #fff), var(--cc)); }
.lms-head h2 { font-size: 24px; margin: 10px 0 6px; } .lms-head p { opacity: .92; font-size: 14px; }
.lms-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13px; font-weight: 600; } .lms-stats span { display: inline-flex; align-items: center; gap: 5px; } .lms-stats svg { width: 16px; height: 16px; }
.lms-stats.dark { justify-content: center; color: var(--text); }
.lms-buy { gap: 10px; } .lms-big { font: 900 28px var(--display); }
.lms-lessons { display: flex; flex-direction: column; gap: 8px; }
.lms-lesson, .lms-lrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.lms-lesson b, .lms-lrow b { display: block; font: 800 15px/1.3 var(--display); } .lms-lesson small, .lms-lrow small { display: block; font-size: 12.5px; }
.lms-lesson .bubble, .lms-lrow .bubble, .lms-lhead .bubble { width: 42px; height: 42px; border-radius: 14px; } .lms-lesson .bubble svg, .lms-lrow .bubble svg, .lms-lhead .bubble svg { width: 22px; height: 22px; }
.lms-lesson.done .bubble { --c: #2B9348 !important; background: #2B9348; }
.lms-lesson > svg { color: var(--muted); }
.lms-free { font: 800 11px var(--display); color: var(--ok); background: var(--ok-soft); padding: 4px 8px; border-radius: 99px; white-space: nowrap; }
.lms-desc { font-size: 14.5px; line-height: 1.6; }
.lms-teacher { display: flex; gap: 12px; align-items: center; } .lms-teacher b { display: block; font: 800 16px var(--display); } .lms-teacher small { display: block; font-size: 13px; line-height: 1.4; }
.lms-ava { --cc: #9769FF; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--cc); color: #fff; font: 900 20px var(--display); text-transform: uppercase; }
.lms-lhead { display: flex; gap: 12px; align-items: center; } .lms-lhead h2, .lms-lhead h3 { font-size: 20px; }
.lms-video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; } .lms-video iframe, .lms-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lms-qs { display: flex; flex-direction: column; gap: 12px; } .lms-q > b { display: block; font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.lms-opts { display: flex; flex-direction: column; gap: 8px; }
.lms-opt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; font-size: 15px; transition: background .15s, border-color .15s; }
.lms-opt span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface); font: 800 13px var(--display); border: 1px solid var(--line); }
.lms-opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.lms-opt.right { border-color: var(--ok); background: var(--ok-soft); } .lms-opt.right span { background: var(--ok); color: #fff; border-color: transparent; }
.lms-opt.wrong { border-color: var(--bad); background: var(--bad-soft); } .lms-opt.wrong span { background: var(--bad); color: #fff; border-color: transparent; }
.lms-q.done .lms-opt { cursor: default; }
.lms-exp { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.lms-score { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .lms-score b { font: 900 18px var(--display); } .lms-score.pass { border-color: var(--ok); background: var(--ok-soft); } .lms-score.fail { border-color: var(--bad); background: var(--bad-soft); }
.lms-timer { position: sticky; top: 8px; z-index: 5; align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font: 900 17px var(--display); } .lms-timer.low { color: var(--bad); border-color: var(--bad); }
.lms-tintro { gap: 14px; } .lms-live .lms-when b { display: block; font: 900 20px var(--display); }
.lms-nav { margin-top: 4px; }
.lms-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lms-kpis .card { padding: 12px; text-align: center; } .lms-kpis b { display: block; font: 900 19px var(--display); } .lms-kpis small { font-size: 11.5px; }
.lms-scourse { display: flex; gap: 12px; align-items: center; padding: 14px 16px; } .lms-scourse b { display: block; font: 800 15px var(--display); } .lms-scourse small { display: block; font-size: 12.5px; }
.lms-dot { width: 14px; height: 40px; border-radius: 8px; background: var(--cc); flex: none; }
.lms-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lms-steps div { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface-2); font-size: 13px; font-weight: 600; line-height: 1.3; } .lms-steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: #fff; font-size: 13px; }
.lms-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); font-size: 14px; } .lms-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.lms-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lms-colors { display: flex; gap: 10px; margin-top: 6px; } .lms-colors label { cursor: pointer; } .lms-colors input { position: absolute; opacity: 0; pointer-events: none; }
.lms-colors span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--cc); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); } .lms-colors input:checked + span { box-shadow: 0 0 0 2.5px var(--cc); } .lms-colors input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.lms-tools { display: flex; gap: 4px; flex: none; } .lms-tools .icon-btn { width: 32px; height: 32px; border-radius: 10px; } .lms-tools .icon-btn svg { width: 16px; height: 16px; } .lms-tools .icon-btn:disabled { opacity: .35; }
.lms-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lms-add .btn { --c: var(--accent); color: var(--c); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.lms-actions { margin-top: 4px; }
@media (max-width: 380px) { .lms-lrow { flex-wrap: wrap; } .lms-lrow .lms-tools { width: 100%; justify-content: flex-end; } .lms-steps { grid-template-columns: 1fr; } .lms-hero > svg { display: none; } }
@media (prefers-reduced-motion: reduce) { .lms-skel { animation: none; } }
.lms-money .lms-big { display: block; } .lms-money .lms-row { align-items: flex-start; padding-top: 0; }

/* ===== v8: the friendly pastel look on every screen ===== */
:root { --pastel-l: #EFE9FF; --pastel-p: #FFF1E2; --pastel-m: #E3F7EF; --pastel-b: #E6F0FF; --pastel-r: #FFE8EC; --chunk: 0 3px 0 rgba(57,47,77,.08); }
/* Light header on inner pages instead of the heavy purple bar */
.topbar.purple { background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text); border-radius: 0; margin-bottom: 0; box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar.purple .brand, .topbar.purple .top-title { color: var(--text); }
.topbar.purple .top-title { font: 900 19px var(--display); }
.topbar.purple .icon-btn { background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 50%; box-shadow: var(--chunk); }
.topbar.purple .coin-pill { background: #FFF6E8; border-color: #FFE2B8; color: #8A5300; }
.topbar.purple .mark { box-shadow: none; }
/* Subject and topic heroes: soft colour blocks with playful circles */
.hero { position: relative; overflow: hidden; border: 0; border-radius: 26px; padding: 20px; background: color-mix(in srgb, var(--c) 17%, #fff); box-shadow: none; }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, #fff); pointer-events: none; }
.hero::before { width: 130px; height: 130px; right: -38px; top: -46px; } .hero::after { width: 54px; height: 54px; right: 70px; bottom: -26px; opacity: .7; }
.hero > * { position: relative; z-index: 1; }
.hero .bubble { border-radius: 20px; box-shadow: 0 10px 20px -10px var(--c); }
.hero p { color: color-mix(in srgb, var(--c) 45%, #392F4D); }
.hero .cbar { background: rgba(255,255,255,.75); height: 8px; border-radius: 9px; }
/* Topic list: pastel cards with a coloured progress ring */
.topics { gap: 10px; }
.topic { border-radius: 22px; padding: 14px 14px 14px 12px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--c) 14%, var(--line)); box-shadow: var(--chunk); }
.topic:active { transform: scale(.98); }
.topic .ring { width: 50px; height: 50px; background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 16%, #fff) 0); }
.topic .ring span { width: 38px; height: 38px; background: color-mix(in srgb, var(--c) 8%, #fff); color: color-mix(in srgb, var(--c) 70%, #392F4D); font-weight: 900; }
.topic-main b { font: 800 16px/1.25 var(--display); } .topic .chev { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
/* Level tabs and set grid */
.level-tabs { background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 5px; box-shadow: var(--chunk); }
.level-tabs button { border-radius: 99px; } .level-tabs .on { background: var(--grad); color: #fff !important; box-shadow: 0 6px 14px -8px #7B4FEA; }
.set-grid { --c: var(--accent); gap: 12px; }
.tile { border-radius: 20px; border: 1.5px solid var(--line); box-shadow: var(--chunk); font-family: var(--display); }
.tile b { font-size: 20px; font-weight: 900; }
.tile.locked { background: color-mix(in srgb, var(--c) 5%, var(--surface)); color: color-mix(in srgb, var(--c) 30%, #A49CB8); border-style: dashed; box-shadow: none; }
.tile.open { background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); color: #fff; border-color: transparent; box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 70%, #000), 0 14px 22px -12px var(--c); }
.tile.open::after { border-color: var(--c); border-radius: 24px; }
.tile.done { background: var(--pastel-m); border-color: #BDE8D2; color: #1D6B3A; } .tile.done small { color: #2B9348; }
.legend i { border-radius: 5px; }
/* Set sheet */
.sheet { border-radius: 30px 30px 0 0; }
.sheet .kv, .sheet .row.kv { border-color: var(--line); }
/* Quiz: chunky, tappable answer cards */
.quiz-top .icon-btn { border-radius: 50%; box-shadow: var(--chunk); }
.quiz-top .timer { border-radius: 99px; box-shadow: var(--chunk); }
.qbar { height: 8px; border-radius: 9px; }
.qtext { font-size: 19px; line-height: 1.45; }
.opt { border-radius: 20px; border: 1.5px solid var(--line); background: var(--surface); box-shadow: 0 3px 0 var(--line); padding: 14px; transition: transform .1s, box-shadow .1s, background .15s, border-color .15s; }
.opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.opt .k { border-radius: 12px; background: var(--pastel-l); color: var(--accent-deep); font-weight: 900; }
.opt.sel { background: #F3EDFF; border-color: var(--accent); box-shadow: 0 3px 0 var(--accent); } .opt.sel .k { background: var(--accent); color: #fff; }
.opt.right, .opt.correct { box-shadow: 0 3px 0 var(--ok); } .opt.wrong { box-shadow: 0 3px 0 var(--bad); }
.pal { border-radius: 12px; }
/* Result: bright and cheerful */
.scorecard { background: linear-gradient(160deg, #F4EEFF 0%, #FFF1E2 100%); color: var(--text); border: 1px solid #ECE3FF; position: relative; overflow: hidden; }
.scorecard::before { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(151,105,255,.12); left: -60px; top: -70px; }
.scorecard::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,182,98,.22); right: -40px; bottom: 30px; }
.scorecard > * { position: relative; z-index: 1; }
.scorecard .eyebrow { color: var(--accent-deep); }
.dial { background: conic-gradient(#FFB662 calc(var(--p) * 1%), #E7DEFF 0); box-shadow: 0 16px 30px -18px #7B4FEA; }
.dial > div { background: #fff; } .dial b { color: var(--text); } .dial small { color: var(--muted); }
.verdict { color: var(--text); }
.trio div { background: #fff; box-shadow: var(--chunk); border-radius: 18px; }
.trio div:nth-child(1) { background: var(--pastel-m); } .trio div:nth-child(2) { background: var(--pastel-r); } .trio div:nth-child(3) { background: #F1EEF7; }
.trio small { color: var(--muted); }
.stat { border-radius: 18px; } .stats .stat:nth-child(1) { background: var(--pastel-l); } .stats .stat:nth-child(2) { background: var(--pastel-p); } .stats .stat:nth-child(3) { background: var(--pastel-m); }
.rv { border-radius: 20px; box-shadow: var(--chunk); }
/* P coins, refer and badges heroes */
.coin-hero { background: linear-gradient(135deg, #FFD27A, #FFB662 55%, #FF9F45); color: #4A2A00; border: 0; position: relative; overflow: hidden; }
.coin-hero .eyebrow { color: rgba(74,42,0,.7); }
.coin-hero::after { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.22); right: -40px; top: -50px; }
.coin-hero > * { position: relative; z-index: 1; }
.coin-hero .card, .coin-hero [class*="coin-split"] > *, .coin-hero .coin-sub { background: rgba(255,255,255,.4) !important; color: #4A2A00 !important; border-color: transparent !important; }
.coin-hero small { color: rgba(74,42,0,.75) !important; }
.refer-hero { background: linear-gradient(140deg, #FF9F8E, #F0603A); }
.badge-hero { background: linear-gradient(140deg, #6FD3B8, #1FA383); }
.earn-card { background: var(--surface); border-radius: 22px; box-shadow: var(--chunk); }
.earn-card:nth-of-type(odd) { background: color-mix(in srgb, #FFB662 9%, var(--surface)); }
.badge { border-radius: 22px; box-shadow: var(--chunk); } .badge.on { background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); }
/* Profile */
.namecard { background: linear-gradient(140deg, #EFE9FF, #FFF1E2); border-color: #ECE3FF; position: relative; overflow: hidden; }
.namecard .avatar, .namecard .avatar2 { width: 64px; height: 64px; font-size: 26px; border-radius: 50%; box-shadow: 0 0 0 4px #fff; }
.stats3 .card { border: 0; box-shadow: var(--chunk); } .stats3 .card:nth-child(1) { background: var(--pastel-l); } .stats3 .card:nth-child(2) { background: var(--pastel-p); } .stats3 .card:nth-child(3) { background: var(--pastel-m); }
.card { border-radius: 24px; }
.card.stack > h3, .card > h3 { font-size: 18px; }
/* Sign up and log in: light and friendly */
.auth-hero { background: linear-gradient(160deg, #EFE9FF, #F7F4FF 70%); color: var(--text); }
.auth-hero h1, .auth-hero .auth-brand { color: var(--text); } .auth-hero p { color: var(--muted); }
.auth-hero::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,182,98,.22); right: -60px; top: -40px; pointer-events: none; }
.auth-card { border-radius: 28px; box-shadow: 0 20px 40px -24px rgba(123,79,234,.45); }
.exam-grid .chip-btn, .exam-grid button { border-radius: 16px; box-shadow: var(--chunk); }
/* Buttons: soft 3D press */
.btn { border-radius: 99px; } .btn.primary { box-shadow: 0 4px 0 #6A3FDB, 0 12px 22px -12px #7B4FEA; } .btn.primary:active { box-shadow: 0 1px 0 #6A3FDB; transform: translateY(3px); }
.btn:not(.primary):not(.ghost) { box-shadow: var(--chunk); }
.chip-btn { box-shadow: var(--chunk); }
/* Admin portal: same look, works on a phone */
.admin { min-height: 100dvh; }
.admin-top { flex-wrap: nowrap; gap: 8px; }
.admin-top .brand { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.admin-top .btn { flex: none; min-height: 36px; padding: 0 12px; font-size: 13px; }
.admin-tabs { gap: 8px; border: 0; padding: 4px 16px 12px; }
.admin-tabs a { border: 1.5px solid var(--line); border-radius: 99px; padding: 8px 14px; background: var(--surface); box-shadow: var(--chunk); }
.admin-tabs a.on { background: var(--grad); color: #fff; border-color: transparent; }
.admin .kpi { background: linear-gradient(150deg, var(--surface), var(--pastel-l)); border: 0; }
.admin .kpis .kpi:nth-child(2) { background: linear-gradient(150deg, var(--surface), var(--pastel-p)); } .admin .kpis .kpi:nth-child(3) { background: linear-gradient(150deg, var(--surface), var(--pastel-m)); } .admin .kpis .kpi:nth-child(4) { background: linear-gradient(150deg, var(--surface), var(--pastel-b)); }
@media (max-width: 520px) { .admin-top .badge { display: none; } .admin-top .brand { font-size: 15px; } }
/* Dark mode versions of the pastels */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pastel-l: #2C2442; --pastel-p: #3A2D22; --pastel-m: #1D3328; --pastel-b: #1F2A40; --pastel-r: #3A2229; --chunk: 0 3px 0 rgba(0,0,0,.25); } }
:root[data-theme="dark"] { --pastel-l: #2C2442; --pastel-p: #3A2D22; --pastel-m: #1D3328; --pastel-b: #1F2A40; --pastel-r: #3A2229; --chunk: 0 3px 0 rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero, :root:not([data-theme="light"]) .topic .ring span, :root:not([data-theme="light"]) .topic .chev { background: color-mix(in srgb, var(--c) 20%, #1E1A2B); }
  :root:not([data-theme="light"]) .hero::before, :root:not([data-theme="light"]) .hero::after { background: color-mix(in srgb, var(--c) 28%, #1E1A2B); }
  :root:not([data-theme="light"]) .hero p, :root:not([data-theme="light"]) .topic .ring span { color: var(--text); }
  :root:not([data-theme="light"]) .scorecard, :root:not([data-theme="light"]) .namecard, :root:not([data-theme="light"]) .auth-hero { background: linear-gradient(160deg, #2A2240, #2E2430); border-color: #3B3256; }
  :root:not([data-theme="light"]) .dial > div, :root:not([data-theme="light"]) .opt.sel { background: #2A2438; }
  :root:not([data-theme="light"]) .topbar.purple .coin-pill { background: #3A2E1A; border-color: #5A4423; color: #FFD9A0; }
  :root:not([data-theme="light"]) .tile.done { color: #9BE3B4; border-color: #2E5A41; } }
.card.me { background: linear-gradient(140deg, #EFE9FF, #FFF1E2); border: 1px solid #ECE3FF; position: relative; overflow: hidden; padding: 20px; }
.card.me::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,182,98,.25); right: -30px; top: -40px; }
.card.me > * { position: relative; z-index: 1; }
.card.me .avatar { width: 64px; height: 64px; font-size: 26px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 10px 20px -10px #7B4FEA; }
.card.me h2 { font-size: 22px; }
.subj-prog { display: flex; flex-direction: column; gap: 14px; }
.sp-row { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.sp-row b { font: 800 15px var(--display); } .sp-row small { color: var(--muted); font-weight: 700; }
.sp-row .cbar { display: block; margin-top: 6px; height: 8px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); } .sp-row .cbar i { background: var(--c); border-radius: 9px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.me { background: linear-gradient(160deg, #2A2240, #2E2430); border-color: #3B3256; } }
.sp-row .grow { flex: 1; min-width: 0; } .sp-row .row { display: flex; align-items: center; }
.lms-lang { position: absolute; right: 14px; bottom: 6px; font: 900 44px/1 var(--display); color: rgba(255,255,255,.55); letter-spacing: -.02em; }
.lms-for { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent-deep); margin-top: 2px; } .lms-for svg { width: 14px; height: 14px; flex: none; }
.lms-pick label { font-size: 12px; } .lms-pick select { padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--chunk); }
.lms-hint { margin: -4px 2px 0; }
.lms-meta { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.lms-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .lms-tags span { padding: 5px 11px; border-radius: 99px; font: 800 12.5px var(--display); background: var(--accent-soft); color: var(--accent-deep); } .lms-tags.soft span { background: var(--pastel-p); color: #8A5300; }
.lms-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .lms-targets .lms-check { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); align-items: center; font-weight: 700; }
.lms-terms { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--pastel-m); border: 0; } .lms-terms b { font: 800 15px var(--display); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lms-tags.soft span { color: #FFD9A0; } }