/*
 * «پرانرژی» look for 11–12-year-olds, from Gemini's design (chunky 3D buttons, a color + emblem per chapter,
 * illustrated tab headers, tinted pages, honest gamified progress). Loaded last: tab screens (js/tabs.js) and
 * a purple brand for the deep pages that redesign.css styles.
 */
:root {
  --brand-a: #8b5cf6;
  --brand-b: #7c3aed;
  --brand-edge: #6d28d9;
  --brand-ink: #fff;
  --violet: #8b5cf6;
  --k-ink: #1e1b4b;
  --k-muted: #6b6a8a;
  --k-line: #ece8f7;
  --k-card: #fff;
  --k-shadow: #e7e2f5;
  --bg-home: #faf5ff;
  --bg-learn: #f0fdfa;
  --bg-exams: #fff7ed;
  --bg-more: #f5f7fb;
  --tabbar-h: 70px;
  --bg-deep: #faf5ff;
}
body { background: var(--bg-home); }
.tz-body, #page-body { zoom: var(--zoom, 1); }

/* ---------- tab shell ---------- */
.screen.app { padding: 0; background: var(--bg-home); }
.screen.app[data-tab="learn"] { background: var(--bg-learn); }
.screen.app[data-tab="exams"] { background: var(--bg-exams); }
.screen.app[data-tab="more"] { background: var(--bg-more); }
.tabs { position: relative; flex: 1; min-height: 0; }
.tab { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--tabbar-h) + var(--sab) + 18px); scrollbar-width: none; -webkit-user-select: none; user-select: none; }
.tab::-webkit-scrollbar { display: none; }
.loading { padding: 120px 20px; text-align: center; color: var(--k-muted); font-weight: 700; }

.tabbar { position: absolute; inset: auto 0 0 0; z-index: 20; display: flex; justify-content: space-around; padding: 8px 10px calc(var(--sab) + 8px); background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -8px 24px rgba(76, 29, 149, .08); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; color: #9a98b5; font-size: 12px; font-weight: 800; }
.tabbar i { display: grid; place-items: center; width: 54px; height: 32px; border-radius: 14px; transition: background .2s, transform .2s; }
.tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { color: var(--brand-b); }
.tabbar button.on i { background: #ede9fe; transform: translateY(-1px); }
.tabbar button[data-tab="learn"].on { color: #0f766e; } .tabbar button[data-tab="learn"].on i { background: #ccfbf1; }
.tabbar button[data-tab="exams"].on { color: #c2410c; } .tabbar button[data-tab="exams"].on i { background: #ffedd5; }
.tabbar button[data-tab="more"].on { color: #334155; } .tabbar button[data-tab="more"].on i { background: #e2e8f0; }

/* ---------- illustrated headers ---------- */
.hero { position: relative; overflow: hidden; color: #fff; padding: calc(var(--sat) + 22px) 20px 26px; border-radius: 0 0 34px 34px; }
.hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.hero h1 { font-size: 22px; font-weight: 900; line-height: 1.6; color: #fff; max-width: 78%; text-wrap: balance; }
.hero p { font-size: 13px; color: rgba(255, 255, 255, .85); margin: 0; max-width: 78%; }
.hero-home { background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 45%, #db2777 100%); padding-bottom: 18px; }
.hero-learn { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 60%, #22c55e 100%); }
.hero-exams { background: linear-gradient(135deg, #c2410c 0%, #f97316 55%, #f59e0b 100%); }
.hero-more { background: linear-gradient(135deg, #312e81 0%, #4f46e5 60%, #6366f1 100%); }
.hero-learn h1, .hero-exams h1, .hero-more h1, .hero-learn p, .hero-exams p { max-width: 58%; }
.hero-learn h1 { white-space: nowrap; }
.hero-learn, .hero-exams, .hero-more { min-height: calc(var(--sat) + 132px); }
.hero-ring { position: absolute; inset-inline-end: 0; top: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .9); }
.hero-home h1 { padding-inline-end: 6px; max-width: 72%; }

.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 7; }
.ring-fg { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring b { position: relative; font-size: 15px; font-weight: 900; }

.lvl { margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); }
.lvl-row { display: flex; align-items: baseline; justify-content: space-between; }
.lvl-row b { color: #fff; font-size: 15px; font-weight: 900; }
.lvl-row small { font-size: 12px; color: rgba(255, 255, 255, .85); font-weight: 700; }
.bar { display: block; height: 8px; border-radius: 6px; background: rgba(30, 27, 75, .12); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--cc, #8b5cf6); }
.lvl .bar { background: rgba(255, 255, 255, .25); }
.lvl .bar i { background: linear-gradient(90deg, #fde047, #facc15); }

/* ---------- cards ---------- */
.pad { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--k-card); border-radius: 24px; padding: 16px; border: 2px solid var(--k-line); box-shadow: 0 4px 0 var(--k-shadow); color: var(--k-ink); }
.card .row { display: flex; align-items: center; gap: 12px; }
.card small { display: block; font-size: 12px; color: var(--k-muted); font-weight: 700; }
.card b { display: block; color: var(--k-ink); }
.card .ttl { font-size: 15px; font-weight: 900; margin-bottom: 10px; }
.emb { flex: none; display: grid; place-items: center; border-radius: 30%; background: var(--cl); color: var(--cc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06); }
.emb svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.card-go { border-color: var(--cl); margin-top: -2px; display: flex; flex-direction: column; gap: 14px; }
.card-go b { font-size: 16.5px; font-weight: 900; line-height: 1.7; }
.card-go em { display: block; font-style: normal; font-size: 12px; font-weight: 800; color: var(--cc); }
.btn3d { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 10px 18px; border-radius: 18px; background: var(--cc, var(--brand-a)); color: #fff; font-size: 16.5px; font-weight: 900; box-shadow: 0 5px 0 var(--cd, var(--brand-edge)); transition: transform .08s, box-shadow .08s; line-height: 1.6; text-align: center; }
.btn3d:active { transform: translateY(5px); box-shadow: 0 0 0 var(--cd, var(--brand-edge)); }
.btn3d svg, .ic-go { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.streak .flame { flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: #ffedd5; color: #f97316; }
.streak .flame svg { width: 26px; height: 26px; fill: currentColor; }
.streak b { font-size: 15.5px; font-weight: 900; }
.week { display: flex; justify-content: space-between; margin-top: 14px; }
.wday { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; background: #f1f0f7; color: #a3a1bd; }
.wday.on { background: #f97316; color: #fff; box-shadow: 0 3px 0 #c2410c; }
.wday.today { outline: 2px dashed #f97316; outline-offset: 2px; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qk { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 22px; background: #fff; border: 2px solid var(--cl); box-shadow: 0 4px 0 var(--cl); text-align: start; color: var(--k-ink); min-height: 112px; }
.qk svg { width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--cl); color: var(--cc); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qk:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cl); }
.qk b { font-size: 14.5px; font-weight: 900; }
.qk small { font-size: 11.5px; color: var(--k-muted); font-weight: 700; }

.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats3 span { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 20px; background: #fff; border: 2px solid var(--k-line); }
.stats3 b { font-size: 20px; font-weight: 900; color: var(--brand-b); font-variant-numeric: tabular-nums; }
.stats3 small { font-size: 11.5px; color: var(--k-muted); font-weight: 700; }

.badges { display: flex; justify-content: space-between; gap: 6px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; text-align: center; }
.badge i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #f1f0f7; color: #c3c1d6; border: 2px dashed #dcdaea; }
.badge i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.badge small { font-size: 10.5px !important; line-height: 1.5; }
.badge.got i { background: var(--cc); color: #fff; border: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35); }
.badge.got small { color: var(--k-ink); }

/* ---------- learn ---------- */
.chaps { display: flex; gap: 12px; overflow-x: auto; padding: 16px 16px 6px; margin-top: -2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.chaps::-webkit-scrollbar { display: none; }
.chap { flex: none; width: 138px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 22px; background: #fff; border: 2px solid var(--k-line); box-shadow: 0 4px 0 var(--k-shadow); text-align: start; color: var(--k-ink); scroll-snap-align: start; }
.chap .emb { margin-bottom: 4px; }
.chap small { font-size: 11px; color: var(--k-muted); font-weight: 800; }
.chap b { font-size: 14px; font-weight: 900; line-height: 1.5; min-height: 42px; }
.chap em { font-style: normal; font-size: 11.5px; color: var(--k-muted); font-weight: 700; }
.chap .bar { width: 100%; margin-top: 2px; }
.chap.on { border-color: var(--cc); background: var(--cl); box-shadow: 0 4px 0 var(--cc); }
.list { padding: 6px 0; }
.list-h { display: flex; align-items: center; gap: 12px; padding: 8px 14px 12px; border-bottom: 2px solid var(--k-line); }
.list-h b { font-size: 16px; font-weight: 900; }
.lrow, .erow, .mrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: start; color: var(--k-ink); border-bottom: 1px solid var(--k-line); min-height: 64px; }
.lrow:last-child, .erow:last-child, .mrow:last-child { border-bottom: 0; }
.lrow:active, .erow:active, .mrow:active { background: #faf8ff; }
.lrow .num { flex: none; width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 16px; background: var(--cl, #f3e8ff); color: var(--cd, #7e22ce); }
.lrow b, .erow b, .mrow b { font-size: 15px; font-weight: 900; line-height: 1.6; }
.lrow small, .erow small, .mrow small { font-size: 12px; color: var(--k-muted); font-weight: 600; line-height: 1.6; }
.lrow.done .num { background: var(--cc); color: #fff; }
.ic-check { width: 24px; height: 24px; flex: none; fill: none; stroke: #16a34a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ic-lock { width: 20px; height: 20px; flex: none; fill: none; stroke: #b8b6cc; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lrow .ic-go, .erow .ic-go, .mrow .ic-go { color: #b8b6cc; }
.locked b { color: #6b6a8a; }

/* ---------- exams & more ---------- */
.report { display: flex; align-items: center; gap: 14px; margin-top: -2px; background: linear-gradient(135deg, #3b82f6, #06b6d4); border: 0; box-shadow: 0 5px 0 #1d4ed8; color: #fff; }
.report small, .report b, .report em { color: #fff !important; }
.report b { font-size: 16.5px; font-weight: 900; }
.report em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 800; opacity: .9; }
.report .ring-bg { stroke: rgba(255, 255, 255, .3); }
.report .trophy { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.report .trophy svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec { font-size: 17px; font-weight: 900; color: var(--k-ink); margin: 6px 4px -4px; text-align: start; }
.eic { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: var(--cl); color: var(--cc); }
.eic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.erow.locked .eic { filter: grayscale(1); opacity: .5; }
.pill { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; background: #f1f5f9; color: var(--k-ink); }
.pill.go { background: var(--brand-a); color: #fff; box-shadow: 0 3px 0 var(--brand-edge); }
.fine { font-size: 12px; color: var(--k-muted); font-weight: 600; margin: 2px 4px; }
.fine.center { text-align: center; line-height: 2; }

/* ---------- pages added by tabs.js ---------- */
.prog { display: flex; flex-direction: column; gap: 10px; color: var(--k-ink); }
.prog h3 { margin: 10px 2px 0; font-size: 16px; font-weight: 900; }
.prow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; border: 2px solid var(--k-line); }
.prow b { display: block; font-size: 14.5px; font-weight: 900; }
.prow small { display: block; font-size: 12px; color: var(--k-muted); }
.prog .erow { background: #fff; border: 2px solid var(--k-line); border-radius: 18px; }
.settings { display: flex; flex-direction: column; gap: 12px; color: var(--k-ink); }
.srow { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; border: 2px solid var(--k-line); }
.srow.col { flex-direction: column; align-items: stretch; }
.srow .switch { background: #e2e0ee; }
.srow .switch[aria-checked="true"] { background: var(--brand-a); }

/* ---------- deep pages: purple brand + chunky buttons ---------- */
.btn.primary, #btn-buy { background: var(--brand-a); color: #fff; border: 0; box-shadow: 0 5px 0 var(--brand-edge); border-radius: 18px; }
.btn.primary:active:not(:disabled), #btn-buy:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--brand-edge); }
.tz-opt { border-width: 2px; border-radius: 18px; box-shadow: 0 4px 0 var(--k-shadow); min-height: 54px; }
.tz-opt.right { box-shadow: 0 4px 0 #15803d; }
.tz-opt.wrong { box-shadow: 0 4px 0 #be185d; }
.tz-exp b.ok::after { content: " 🎉"; }