/* Рисале v2 — bold, game-like UI. Nunito for UI, Literata for book text, Amiri for Arabic. */
:root {
  /* Space under the status bar / Telegram's floating Close and menu buttons in fullscreen (--tg-* set in tg.js). */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-top, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px));
  --bg: #F4F5FA; --card: #FFFFFF; --line: #E4E4EE; --soft: #ECECF3; --ink: #18181B; --muted: #52525B; --faint: #71717A;
  --brand: #047857; --brand-2: #059669; --brand-sh: #065F46; --brand-soft: #ECFDF5; --brand-line: #6EE7B7; --brand-fill: #34D399;
  --xp: #FBBF24; --xp-ink: #92400E; --fire: #F97316; --fire-ink: #C2410C; --gem: #8B5CF6; --gem-ink: #6D28D9;
  --blue: #2563EB; --blue-sh: #1E40AF; --red: #DC2626; --red-sh: #991B1B;
  --read-bg: #FFFFFF; --read-ink: #27272A; --mark: #FEF08A;
  --radius: 20px; --ui: Nunito, system-ui, sans-serif; --serif: Literata, Georgia, serif; --arabic: Amiri, 'Geeza Pro', serif;
  --size: 20px; --ar-size: 30px;
  color-scheme: light;
}
[data-theme="sepia"] { --bg: #F3ECDC; --card: #FBF6EA; --line: #E6DAC0; --soft: #EBE1CB; --ink: #2B2116; --muted: #5E4E3A; --faint: #76664F; --read-bg: #FBF6EA; --read-ink: #3A2E20; --mark: #F6DF8A; }
[data-theme="night"] { --bg: #111113; --card: #1C1C20; --line: #2E2E35; --soft: #2A2A31; --ink: #F4F4F5; --muted: #B4B4BD; --faint: #9B9BA6; --brand-soft: #0F2A22; --brand-line: #1F6F57; --read-bg: #161618; --read-ink: #D9D9DE; --mark: #5B4A12; color-scheme: dark; }
[data-theme="emerald"] { --bg: #062720; --card: #0B3329; --line: #145244; --soft: #114638; --ink: #ECFDF5; --muted: #A7D8C6; --faint: #8CC5B1; --brand-soft: #0F4436; --brand-line: #2C8F70; --read-bg: #0A2E25; --read-ink: #D7F2E7; --mark: #6B5A16; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); font-weight: 700; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-2); text-decoration: none; }
[data-theme="night"] a, [data-theme="emerald"] a { color: var(--brand-fill); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.01em; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; flex: 0 0 248px; padding: calc(24px + var(--safe-top)) 16px 24px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 12px 20px; color: var(--brand) !important; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.logo-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); display: grid; place-items: center; box-shadow: 0 3px 0 var(--brand-sh); }
.nav-item { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid transparent; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .02em; font-size: 14px; font-weight: 800; }
.nav-item svg { flex: 0 0 auto; color: var(--faint); }
.nav-item:hover { background: var(--soft); }
.nav-item.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand) !important; }
.nav-item.on svg { color: var(--brand-2); }
.nav-item .count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #E11D48; color: #fff; display: grid; place-items: center; font-size: 12px; }
.side-foot { margin-top: auto; padding: 12px; font-size: 13px; color: var(--faint); }
.main { flex: 1; min-width: 0; padding: calc(24px + var(--safe-top)) clamp(16px, 3vw, 40px) 80px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.col-main { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.col-side { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.page-title { font-size: 32px; margin-bottom: 20px; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .side { display: none; }
  .main { padding: 16px 16px 110px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 6px calc(10px + var(--safe-bottom)); background: var(--card); border-top: 2px solid var(--line); }
  .tabbar a { display: grid; place-items: center; min-height: 52px; }
  .tabbar span { width: 52px; height: 44px; border-radius: 14px; border: 2px solid transparent; display: grid; place-items: center; color: var(--faint); }
  .tabbar a.on span { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-2); }
  .page-title { font-size: 26px; }
}

/* ---------- top stats ---------- */
.stats { display: flex; gap: 8px; }
.stat { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 12px; border-radius: 16px; background: var(--card); border: 2px solid var(--line); font-weight: 900; font-size: 17px; }
.stat.fire { color: var(--fire-ink); } .stat.gem { color: var(--gem-ink); } .stat.lvl { color: var(--brand); }
[data-theme="night"] .stat.fire, [data-theme="emerald"] .stat.fire { color: #FDBA74; }
[data-theme="night"] .stat.gem, [data-theme="emerald"] .stat.gem { color: #C4B5FD; }
.lvl-badge { width: 26px; height: 26px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; }

/* ---------- cards & buttons ---------- */
.card { padding: 20px; border-radius: 24px; background: var(--card); border: 2px solid var(--line); }
.card h2 { font-size: 19px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 16px; background: var(--brand-2); color: #fff !important; font-size: 16px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 4px 0 var(--brand-sh); transition: transform .06s, box-shadow .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-sh); }
.btn:disabled { background: var(--soft); color: var(--faint) !important; box-shadow: 0 4px 0 var(--line); cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.white { background: #fff; color: var(--c-sh, var(--brand-sh)) !important; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.btn.blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-sh); }
.btn.dark { background: #18181B; box-shadow: 0 4px 0 #000; }
.btn.amber { background: #D97706; box-shadow: 0 4px 0 #92400E; }
.btn.red { background: var(--red); box-shadow: 0 4px 0 var(--red-sh); }
.btn.ghost { background: var(--card); color: var(--ink) !important; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.link-btn { background: none; border: 0; padding: 8px; color: var(--brand-2); font-weight: 900; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 800; }
.eyebrow { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bar { height: 16px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 8px; background: var(--brand-fill); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.bar.thin { height: 8px; } .bar.thin > i { box-shadow: none; }

/* ---------- hero & covers ---------- */
.hero { position: relative; overflow: hidden; border-radius: 28px; background: var(--c); color: #fff; padding: 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; box-shadow: 0 6px 0 var(--c-sh); }
.hero .motif { position: absolute; right: -60px; top: -70px; width: 320px; height: 320px; color: rgba(255,255,255,.18); }
.hero h1 { font-size: 40px; line-height: 1.05; }
.hero p { font-size: 18px; line-height: 1.4; max-width: 520px; opacity: .95; }
.hero .pill { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hero-body { position: relative; flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.book { display: flex; flex-direction: column; gap: 8px; color: var(--ink) !important; }
.cover { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 18px; background: var(--c); box-shadow: 0 5px 0 var(--c-sh); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; transition: transform .12s; }
.book:hover .cover { transform: translateY(-3px); }
.cover .motif { position: absolute; right: -22px; top: -18px; width: 130px; height: 130px; color: rgba(255,255,255,.3); }
.cover .tag { position: relative; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.cover .t { position: relative; font-size: 20px; font-weight: 900; line-height: 1.05; }
[data-covers="ornament"] .cover { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px), repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); background-color: var(--c); }
.book-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.stars { color: #D97706; letter-spacing: 1px; }
.mini-cover { flex: 0 0 auto; width: 44px; height: 58px; border-radius: 9px; background: var(--c); box-shadow: 0 3px 0 var(--c-sh); }

/* ---------- quests ---------- */
.quest { display: flex; align-items: center; gap: 12px; }
.quest-ic { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.quest-bar { position: relative; height: 18px; border-radius: 9px; background: var(--soft); overflow: hidden; }
.quest-bar > i { display: block; height: 100%; background: var(--xp); }
.quest-bar > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #78350F; }

/* ---------- path ---------- */
.stage-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; align-self: stretch; }
.stage-tab { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--muted); font-weight: 800; font-size: 14px; }
.stage-tab.on { background: var(--c-soft, var(--brand-soft)); border-color: var(--c); color: var(--ink); }
.unit { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 26px; }
.unit-head { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-radius: 22px; background: var(--c); color: #fff; box-shadow: 0 5px 0 var(--c-sh); }
.unit-head .eyebrow { color: rgba(255,255,255,.85); }
.unit-head h2 { font-size: 24px; }
.unit-head a { color: #fff !important; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 2px solid rgba(255,255,255,.5); font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.node-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.node { width: 76px; height: 70px; border-radius: 50%; border: 0; background: #E4E4EE; box-shadow: 0 7px 0 #C9C9D6; display: grid; place-items: center; color: #A1A1AA; transition: transform .08s; }
[data-theme="night"] .node.todo, [data-theme="emerald"] .node.todo { background: #3A3A44; box-shadow: 0 7px 0 #24242B; color: #8C8C99; }
.node:hover { transform: translateY(-2px); }
.node.done, .node.now { background: var(--c); box-shadow: 0 7px 0 var(--c-sh); color: #fff; }
.node.now { width: 88px; height: 82px; box-shadow: 0 7px 0 var(--c-sh), 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent); }
.node.chest { background: #E4E4EE; box-shadow: 0 7px 0 #C9C9D6; color: #A1A1AA; }
.node.chest.ready { background: #FDE68A; box-shadow: 0 7px 0 #D97706, 0 0 0 8px rgba(251,191,36,.25); color: #B45309; animation: bob 1.6s ease-in-out infinite; }
.node.chest.open { background: #FEF3C7; box-shadow: 0 7px 0 #FCD34D; color: #D97706; }
.node.cup.ready { background: #FBBF24; box-shadow: 0 7px 0 #B45309; color: #fff; animation: bob 1.6s ease-in-out infinite; }
.node.cup.open { background: #FEF3C7; box-shadow: 0 7px 0 #FCD34D; color: #D97706; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.bubble { margin-bottom: 10px; padding: 10px 16px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--c-sh); font-size: 14px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; max-width: 260px; text-align: center; }
[data-theme="night"] .bubble, [data-theme="emerald"] .bubble { color: var(--ink); }
.node-label { margin-top: 12px; font-size: 12px; color: var(--muted); max-width: 160px; text-align: center; line-height: 1.25; }
.more { align-self: center; }

/* ---------- lesson ---------- */
.focus { min-height: 100vh; display: flex; flex-direction: column; background: var(--card); }
.focus-top { width: 100%; max-width: 1040px; margin: 0 auto; padding: calc(24px + var(--safe-top)) clamp(16px, 3vw, 32px) 8px; display: flex; align-items: center; gap: 18px; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--faint); display: grid; place-items: center; }
.icon-btn:hover { background: var(--soft); }
.focus-body { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 40px; display: flex; flex-direction: column; gap: 24px; }
.focus-body h1 { font-size: 30px; line-height: 1.2; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.tiles > div { display: flex; flex-direction: column; gap: 12px; }
.tile { min-height: 58px; padding: 10px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); box-shadow: 0 4px 0 var(--line); font-size: 16px; font-weight: 800; text-align: left; line-height: 1.3; }
.tile.sel { background: #DBEAFE; border-color: #60A5FA; box-shadow: 0 4px 0 #60A5FA; color: #1E40AF; }
.tile.good { background: #D1FAE5; border-color: #34D399; box-shadow: 0 4px 0 #34D399; color: #065F46; }
.tile.bad { background: #FEE2E2; border-color: #F87171; box-shadow: 0 4px 0 #F87171; color: #991B1B; animation: shake .3s; }
.tile.gone { opacity: .35; pointer-events: none; box-shadow: none; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.option { width: 100%; }
.feedback { border-top: 2px solid var(--line); background: var(--card); }
.feedback.ok { background: #D1FAE5; border-color: #A7F3D0; color: #065F46; }
.feedback.no { background: #FEE2E2; border-color: #FECACA; color: #991B1B; }
.feedback-in { max-width: 1040px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 32px) 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.feedback .btn { min-width: 180px; }
.feedback.no .btn { background: var(--red); box-shadow: 0 4px 0 var(--red-sh); }
.order-slot { min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 2px dashed var(--line); color: var(--faint); display: flex; gap: 12px; align-items: center; font-weight: 800; }
.order-slot.filled { border-style: solid; color: var(--ink); background: var(--soft); }
.order-slot b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--brand-2); color: #fff; display: grid; place-items: center; font-size: 13px; }

/* ---------- reader ---------- */
.read-head { position: sticky; top: 0; z-index: 20; padding-top: var(--safe-top); background: color-mix(in srgb, var(--read-bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--read-ink); transition: transform .25s ease; }
.read-head-in { max-width: 1180px; margin: 0 auto; padding: 6px clamp(8px, 3vw, 32px); display: flex; align-items: center; gap: 6px; transition: opacity .2s; }
.read-head .icon-btn { flex: 0 0 auto; color: var(--read-ink); }
.read-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.read-title small, .read-title b { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.read-title small { font-size: 12px; opacity: .6; }
.read-title b { font-size: 15px; font-weight: 900; }
.read-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 12px; font-weight: 800; opacity: .65; font-variant-numeric: tabular-nums; }
.read-meta b { color: var(--c); }
.read-progress { height: 3px; background: color-mix(in srgb, var(--read-ink) 8%, transparent); } .read-progress > i { display: block; height: 100%; background: var(--c); width: 0; transition: width .15s; }
/* Immersive mode: scrolling down tucks the bar away, leaving the safe-area strip and the progress line. */
.read-head.tucked { transform: translateY(calc(-100% + var(--safe-top) + 3px)); }
.read-head.tucked .read-head-in { opacity: 0; pointer-events: none; }
.reader { background: var(--read-bg); min-height: 100vh; }
body.reading { background: var(--read-bg); }
@media (max-width: 560px) { .read-meta svg { display: none; } }
.read-cols { max-width: 1180px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px) calc(80px + var(--safe-bottom)); display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.text { flex: 1 1 520px; max-width: 680px; min-width: 0; font-family: var(--serif); font-weight: 400; font-size: var(--size); line-height: 1.75; color: var(--read-ink); }
.text h1 { font-family: var(--serif); font-weight: 500; font-size: 1.9em; line-height: 1.15; margin: 0 0 6px; color: var(--ink); }
.text .crumb { font-family: var(--ui); font-weight: 800; font-size: 14px; color: var(--faint); margin-bottom: 26px; }
.text p { margin: 0 0 1em; }
.text .h { font-family: var(--ui); font-weight: 900; font-size: .95em; margin: 1.6em 0 .6em; color: var(--ink); }
.text .li { padding-left: 1.2em; position: relative; } .text .li::before { content: '•'; position: absolute; left: 0; color: var(--faint); }
.text .ar { font-family: var(--arabic); font-size: var(--ar-size); line-height: 1.9; text-align: center; direction: rtl; margin: 1em 0; padding: 14px 18px; border-radius: 18px; background: var(--soft); color: var(--ink); }
.text .ar-i { font-family: var(--arabic); font-size: 1.15em; }
.text hr { border: 0; text-align: center; margin: 1.6em 0; } .text hr::after { content: '* * *'; color: var(--faint); letter-spacing: .5em; }
.text img { max-width: 100%; border-radius: 12px; }
.term { background: color-mix(in srgb, var(--c) 12%, transparent); border-bottom: 2px dotted var(--c); border-radius: 4px; padding: 0 2px; cursor: pointer; }
.text mark { background: var(--mark); color: inherit; border-radius: 2px; cursor: pointer; }
.read-end { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; font-family: var(--ui); }
.read-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--ui); font-size: 15px; font-weight: 800; }
.read-side { flex: 0 1 280px; display: flex; flex-direction: column; gap: 14px; font-family: var(--ui); }
.read-side .card { box-shadow: 0 4px 0 var(--line); }
.pop { position: absolute; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 16px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(0,0,0,.18); font-family: var(--ui); }
.pop .t { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 6px; }
.sel-bar { position: absolute; z-index: 40; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: #18181B; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sel-bar button { height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #fff; font-size: 13px; font-weight: 800; }
.sel-bar button:hover { background: rgba(255,255,255,.12); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: var(--muted); }
.input { height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); font-size: 16px; font-weight: 700; color: var(--ink); width: 100%; }
.input:focus { border-color: var(--blue); outline: none; }
textarea.input { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 5px; border-radius: 16px; background: var(--soft); }
.seg button { min-height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 900; font-size: 14px; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 0 var(--line); }
.choice { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--card); box-shadow: 0 4px 0 var(--line); text-align: left; width: 100%; }
.choice.on { border-color: var(--brand-fill); background: var(--brand-soft); box-shadow: 0 4px 0 var(--brand-fill); }
.choice .ic { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.choice .t { display: block; font-size: 16px; font-weight: 900; } .choice .m { display: block; font-size: 13px; color: var(--muted); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 800; }
.toggle input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand-2); }
.error { padding: 12px 14px; border-radius: 14px; background: #FEE2E2; color: #991B1B; font-size: 14px; font-weight: 800; }
.notice { padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: 14px; font-weight: 800; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth-art { flex: 1 1 420px; position: relative; overflow: hidden; background: #047857; color: #fff; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-art h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; max-width: 480px; }
.auth-art p { font-size: 18px; line-height: 1.5; color: #D1FAE5; max-width: 460px; margin-top: 14px; }
.auth-form { flex: 1 1 420px; display: grid; place-items: center; padding: clamp(24px, 5vw, 64px) 16px; background: var(--bg); }
.auth-form form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.divider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--faint); } .divider::before, .divider::after { content: ''; flex: 1; height: 2px; background: var(--line); }
.onb { min-height: 100vh; display: flex; justify-content: center; background: var(--card); }
.onb-in { width: 100%; max-width: 560px; padding: calc(40px + var(--safe-top)) 20px 40px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- review ---------- */
.flash { border-radius: 28px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 8px 0 var(--line); padding: 36px clamp(20px, 5vw, 52px); display: flex; flex-direction: column; gap: 20px; }
.flash h1 { font-size: 30px; line-height: 1.2; }
.flash .answer { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.55; }
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grades .btn { flex-direction: column; gap: 2px; min-height: 70px; padding: 0 8px; text-transform: none; letter-spacing: 0; }
.grades .btn small { font-size: 12px; font-weight: 800; opacity: .9; }
@media (max-width: 560px) { .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles { gap: 10px; } .tile { font-size: 14px; padding: 10px 12px; } }

/* ---------- glossary / map ---------- */
.term-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 2px solid var(--soft); }
.term-row .w { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.status { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.status.new { background: var(--soft); color: var(--muted); } .status.learning { background: #DBEAFE; color: #1E40AF; } .status.learned { background: #D1FAE5; color: #065F46; }
.map { position: relative; width: 820px; height: 560px; margin: 0 auto; border-radius: 18px; background: var(--bg); }
.map svg { position: absolute; inset: 0; }
.cnode { position: absolute; width: 140px; min-height: 44px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--g); background: var(--card); box-shadow: 0 3px 0 var(--g); color: var(--ink); font-size: 13px; font-weight: 900; line-height: 1.15; text-align: center; transform: translate(-50%, -50%); }
.cnode.near { background: color-mix(in srgb, var(--g) 14%, var(--card)); }
.cnode.on { background: var(--g); color: #fff; }

/* ---------- rewards ---------- */
.big-stat { padding: 22px; border-radius: 24px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.big-stat b { font-size: 30px; font-weight: 900; }
.medal { width: 72px; height: 72px; border-radius: 22px; transform: rotate(45deg); display: grid; place-items: center; }
.medal > span { transform: rotate(-45deg); font-size: 20px; font-weight: 900; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 12px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; }
.shop-item { display: flex; align-items: center; gap: 14px; }
.swatch { flex: 0 0 52px; height: 52px; border-radius: 16px; border: 2px solid var(--line); }

/* ---------- misc ---------- */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 12px 18px; border-radius: 16px; background: #18181B; color: #fff; font-weight: 900; box-shadow: 0 6px 24px rgba(0,0,0,.25); animation: pop .25s ease-out; }
.toast.xp { background: #FBBF24; color: #78350F; } .toast.gem { background: #7C3AED; } .toast.good { background: #059669; }
@media (max-width: 860px) { .toasts { bottom: 96px; } }
@keyframes pop { from { transform: translateY(10px) scale(.95); opacity: 0; } }
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.modal { width: 100%; max-width: 420px; padding: 28px; border-radius: 28px; background: var(--card); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; animation: pop .25s ease-out; }
.loading { padding: 80px 0; text-align: center; color: var(--faint); }
.hit { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); color: var(--ink) !important; }
.hit p { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.6; }
.hit mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.toc-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 18px; border-top: 2px solid var(--soft); color: var(--ink) !important; }
.toc-row:first-child { border-top: 0; }
.toc-row:hover { background: var(--soft); }
.check { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); }
.check.done { background: var(--c); border-color: var(--c); color: #fff; }
.check.part { border-color: var(--c); }
.note-card { padding: 18px 20px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.note-card blockquote { margin: 0; padding-left: 14px; border-left: 4px solid var(--c); font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.6; }

/* ---------- phone stats bar, «Сегодня» sheet, phone reflow ---------- */
.m-only, .mbar { display: none; }
.sec-title { font-size: 22px; }
.duo { display: flex; flex-direction: column; gap: 16px; }
.duo:empty { display: none; }
.big-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ring { position: relative; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--soft) 0); }
.ring > span { position: absolute; inset: 4px; border-radius: 50%; background: var(--card); display: grid; place-items: center; color: var(--ink); }
.ring b { font-size: 16px; font-weight: 900; }

@media (max-width: 860px) {
  .m-only { display: revert; }
  section.m-only, div.m-only { display: flex; }
  .d-only { display: none !important; }
  .stats { display: none; }

  .mbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -16px -16px 14px; padding: calc(8px + var(--safe-top)) 12px 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid var(--line); }
  .mbar button { border: 0; background: none; padding: 0; }
  .mbar-lvl { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
  .mbar-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
  .mbar-name b { font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar-name small { font-size: 12px; font-weight: 800; color: var(--muted); }
  .mbar-stats { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .mstat { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px; border-radius: 12px; font-size: 16px; font-weight: 900; color: var(--ink) !important; }
  .mstat:active { background: var(--soft); }
  .mstat.fire { color: var(--fire-ink) !important; } .mstat.fire.off svg { filter: grayscale(1); opacity: .5; }
  .mstat.gem { color: var(--gem-ink) !important; } .mstat.chest { color: #B45309 !important; animation: bob 1.6s ease-in-out infinite; }
  .mstat.goal { padding: 0 2px 0 6px; } .mstat.goal .ring > span { color: #D97706; } .mstat.goal.met .ring > span { color: var(--brand-2); }
  [data-theme="night"] .mstat.fire, [data-theme="emerald"] .mstat.fire { color: #FDBA74 !important; }
  [data-theme="night"] .mstat.gem, [data-theme="emerald"] .mstat.gem { color: #C4B5FD !important; }

  /* Home: hero, then today's goal / review / quests, then the rest of the main column. */
  .cols.m-flow { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 18px; }
  .cols.m-flow > .col-main, .cols.m-flow > .col-side { display: contents; }
  .m-flow .col-main > * { order: 3; }
  .m-flow .col-main > .hero { order: 1; }
  .m-flow .col-side > * { order: 2; }
  .duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .duo > .card { padding: 16px; gap: 6px; }
  .duo > .card span[style*="font-size:22px"], .duo > .card span[style*="font-size:18px"] { font-size: 17px !important; }
  .card { padding: 16px; border-radius: 20px; }
  .quest { gap: 10px; } .quest-ic { flex-basis: 38px; height: 38px; border-radius: 12px; }
  .sec-title { font-size: 19px; }

  .hero { padding: 22px; border-radius: 24px; gap: 14px; }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 16px; }
  .hero .pill { font-size: 11px; }
  .hero .motif { width: 220px; height: 220px; right: -50px; top: -50px; }

  /* Covers: a swipeable rail on «Сегодня», three across in the library. */
  .books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .books.rail { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 118px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 10px; scroll-padding: 0 16px; scrollbar-width: none; }
  .books.rail::-webkit-scrollbar { display: none; }
  .books.rail .book { scroll-snap-align: start; }
  .cover { padding: 10px; border-radius: 14px; box-shadow: 0 4px 0 var(--c-sh); }
  .cover .t { font-size: 15px; }
  .cover .tag { font-size: 9px; }
  .cover .motif { width: 90px; height: 90px; right: -16px; top: -12px; }
  .book-meta { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; }
  .book-meta .stars { font-size: 11px; }

  /* Path: compact stage summary instead of the side column. */
  .stage-m { align-self: stretch; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); }

  /* Rewards: level full width, streak and «Свет» side by side. */
  .big-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .big-stat { padding: 16px; border-radius: 20px; gap: 6px; }
  .big-stat.lvl { grid-column: 1 / -1; }
  .big-stat b { font-size: 22px; }
  .big-stat .bs-note { font-size: 12px; }

  /* Modals become bottom sheets. */
  .modal-back.sheet { place-items: end stretch; padding: 0; }
  .sheet .modal { max-width: none; max-height: 88vh; overflow-y: auto; border-radius: 28px 28px 0 0; padding: 10px 16px calc(20px + var(--safe-bottom)); align-items: stretch; text-align: left; animation: rise .25s ease-out; }
}
@keyframes rise { from { transform: translateY(40%); opacity: .4; } }
.sheet-grip { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 6px; }
.sheet-lvl { display: flex; align-items: center; gap: 14px; }
.sheet-lvl .ring > span { inset: 6px; }
.sheet-lvl .ring b { font-size: 22px; }
.sheet-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sheet-trio > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: var(--bg); }
.sheet-trio b { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 900; }
.sheet-trio small { font-size: 12px; color: var(--muted); font-weight: 800; }
.sheet .card { text-align: left; }
@media (min-width: 861px) { .modal-back.sheet .modal { align-items: stretch; text-align: left; } }
.goal-card { display: flex; align-items: center; gap: 16px; }
.goal-card .ring > span { inset: 7px; color: #D97706; }
.goal-card.met .ring > span { color: var(--brand-2); }
[data-theme="night"] .goal-card b, [data-theme="emerald"] .goal-card b { color: var(--xp) !important; }