/* Лингора UI 2026-09-30 — «bubble» look: violet → magenta palette, soft rounded surfaces, springy motion,
   overflow-safe typography. Loaded after app.css; layout/structure unchanged. */

/* ================= 1. palette ================= */
:root {
  --bg: #150A26;
  --bg-glow-1: rgba(168, 85, 247, .30);
  --bg-glow-2: rgba(236, 72, 153, .22);
  --surface: #21123A;
  --surface-2: #2C1A4A;
  --surface-3: #3A2560;
  --line: rgba(243, 222, 255, .10);
  --line-2: rgba(243, 222, 255, .19);
  --ink: #FDF7FF;
  --ink-2: #EADBF7;
  --muted: #BCA8D8;
  --iris: #B26BFF;
  --iris-deep: #8B2FD9;
  --iris-soft: rgba(192, 132, 252, .17);
  --pink: #FF6FB5;
  --pink-soft: rgba(255, 111, 181, .16);
  --lilac: #F0C8FF;
  --grad: linear-gradient(135deg, #8B2FD9 0%, #B02BB8 55%, #C2268E 100%);
  --grad-soft: linear-gradient(135deg, rgba(168, 85, 247, .22), rgba(236, 72, 153, .18));
  --saffron: #FFC45C;
  --saffron-soft: rgba(255, 196, 92, .15);
  --lagoon: #3EDBB0;
  --lagoon-soft: rgba(62, 219, 176, .15);
  --rose: #FF7A98;
  --rose-soft: rgba(255, 122, 152, .15);
  --offer-a: #7C3AED;
  --offer-b: #C026D3;
  --offer-c: #FF7AB8;
  --shadow: 0 12px 32px rgba(12, 2, 28, .45);
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="light"] {
  --bg: #FBF3FF;
  --bg-glow-1: rgba(168, 85, 247, .20);
  --bg-glow-2: rgba(236, 72, 153, .16);
  --surface: #FFFFFF;
  --surface-2: #F7EDFF;
  --surface-3: #EBD9FF;
  --line: rgba(74, 20, 120, .10);
  --line-2: rgba(74, 20, 120, .18);
  --ink: #2A1142;
  --ink-2: #4A2C68;
  --muted: #765E92;
  --iris: #8B2FD9;
  --iris-deep: #6B1FB0;
  --iris-soft: rgba(139, 47, 217, .10);
  --pink: #C2268E;
  --pink-soft: rgba(194, 38, 142, .10);
  --lilac: #7E22CE;
  --grad-soft: linear-gradient(135deg, rgba(168, 85, 247, .12), rgba(236, 72, 153, .10));
  --saffron: #C77700;
  --saffron-soft: rgba(230, 150, 20, .13);
  --lagoon: #0E9F78;
  --lagoon-soft: rgba(14, 159, 120, .11);
  --rose: #D8315B;
  --rose-soft: rgba(216, 49, 91, .10);
  --shadow: 0 10px 26px rgba(90, 30, 140, .12);
}

body {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(110% 55% at 0% -8%, var(--bg-glow-1), transparent 62%),
    radial-gradient(90% 50% at 108% 4%, var(--bg-glow-2), transparent 58%),
    radial-gradient(70% 40% at 50% 112%, rgba(168, 85, 247, .16), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(236, 72, 153, .35); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--pink) 70%, transparent); outline-offset: 2px; }

/* lilac accents in the dark theme (replace the old periwinkle ones) */
html[data-theme="dark"] .chip-xp, html[data-theme="dark"] .btn-link, html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .benefit .bi, html[data-theme="dark"] .mi.c1, html[data-theme="dark"] .fvp-col.paid .eyebrow,
html[data-theme="dark"] .fvp-col.paid .check-list li .ic, html[data-theme="dark"] .legal-sheet .consent-row a,
html[data-theme="dark"] .legal-body a, html[data-theme="dark"] .upsell-line .ic { color: var(--lilac); }
html[data-theme="dark"] .btn-soft, html[data-theme="dark"] .pill.iris, html[data-theme="dark"] .step-no { color: var(--lilac); }
html[data-theme="dark"] .lang-chip.on { color: #FFF1FF; }

/* ================= 2. surfaces ================= */
.topbar { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.brand-name {
  background: linear-gradient(90deg, #F3D2FF, #FF9FD0); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="light"] .brand-name { background-image: linear-gradient(90deg, #7E22CE, #C2268E); }
.chip { height: 34px; border-radius: 999px; background: var(--surface); border-color: var(--line-2); box-shadow: 0 4px 14px rgba(12, 2, 28, .18); }
.chip-streak { color: var(--saffron); background: linear-gradient(135deg, rgba(255, 196, 92, .16), rgba(255, 111, 181, .14)); }
.chip-xp { background: var(--grad-soft); }

.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #fff 3%), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 28px rgba(12, 2, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="light"] .card { box-shadow: 0 8px 22px rgba(90, 30, 140, .08), inset 0 1px 0 #fff; }
.eyebrow { color: color-mix(in srgb, var(--lilac) 70%, var(--muted)); letter-spacing: .07em; }
.h1, .h2, .continue-title { letter-spacing: -.015em; }

/* buttons: raised «jelly» buttons with a springy press */
.btn {
  border-radius: var(--r-md);
  transition: transform .35s var(--spring), box-shadow .2s ease, filter .15s ease, background-color .15s ease;
  -webkit-touch-callout: none;
}
.btn:active:not(:disabled) { transform: translateY(2px) scale(.97); transition-duration: .08s; }
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 4px 0 #5E1591, 0 10px 24px rgba(194, 38, 142, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
  text-shadow: 0 1px 1px rgba(60, 0, 80, .25);
}
.btn-primary:active:not(:disabled) { box-shadow: 0 1px 0 #5E1591, 0 4px 12px rgba(194, 38, 142, .28), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-primary:disabled { filter: saturate(.6); }
.btn-light { background: #fff; color: #6B1FB0; box-shadow: 0 4px 0 rgba(70, 10, 110, .28), 0 10px 22px rgba(40, 0, 70, .22); }
.btn-light:active:not(:disabled) { box-shadow: 0 1px 0 rgba(70, 10, 110, .28), 0 4px 10px rgba(40, 0, 70, .2); }
.btn-soft { background: var(--grad-soft); color: var(--iris-deep); border-color: color-mix(in srgb, var(--iris) 22%, transparent); }
.btn-ghost { background: color-mix(in srgb, var(--surface-2) 55%, transparent); border-color: var(--line-2); }
.btn-ok { background: linear-gradient(135deg, #22C39A, #3EDBB0); color: #06291F; box-shadow: 0 4px 0 #128066; }
.icon-btn {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; background: var(--surface-2); border-color: var(--line-2);
  transition: transform .35s var(--spring);
}
.icon-btn:active { transform: scale(.9); transition-duration: .08s; }
.btn-sm { min-height: 42px; border-radius: 14px; }
.back { min-height: 44px; }

/* mascot «Лори»: violet → magenta body, blink, gentle idle */
.mascot stop:first-child, .brand-mark stop:first-child { stop-color: #C98BFF; }
.mascot stop:last-child, .brand-mark stop:last-child { stop-color: #D0339F; }
.mascot svg ellipse[rx="9"], .mascot svg circle[r="4.6"], .mascot svg circle[r="4.4"], .mascot svg circle[r="1.5"],
.brand-mark svg ellipse[rx="9"], .brand-mark svg circle[r="4.6"], .brand-mark svg circle[r="1.5"] {
  transform-box: view-box; transform-origin: 50px 43px; animation: fxBlink 5.2s infinite;
}
.mascot:nth-of-type(2n) svg ellipse, .mascot:nth-of-type(2n) svg circle { animation-delay: 1.7s; }
.brand-mark svg ellipse, .brand-mark svg circle { animation-delay: 2.9s; }
.mascot svg { transform-origin: 50% 92%; animation: fxBreathe 3.6s ease-in-out infinite; }
.mascot.bob svg { animation: fxBob 2.8s var(--ease-out) infinite; }
.brand-mark svg { transform-origin: 50% 85%; }
.brand-mark.fx-wave svg { animation: fxWave 1.1s var(--spring) both; }
@keyframes fxBlink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
@keyframes fxBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .975); } }
@keyframes fxBob { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-6px) scale(.98, 1.03); } 60% { transform: translateY(-5px); } }
@keyframes fxWave { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-10deg); } 45% { transform: translateY(-4px) rotate(9deg); } 65% { transform: translateY(-2px) rotate(-6deg); } 100% { transform: none; } }
.result-hero .mascot svg { animation: fxJump 1.2s var(--spring) .1s both, fxBob 2.8s var(--ease-out) 1.4s infinite; }
@keyframes fxJump { 0% { transform: translateY(18px) scale(.6); opacity: 0; } 45% { transform: translateY(-16px) scale(1.08, .95); opacity: 1; } 70% { transform: translateY(0) scale(.96, 1.04); } 100% { transform: none; } }
.gate > .mascot svg, .gate .mascot svg { animation: fxPeek .9s var(--spring) both, fxBreathe 3.6s ease-in-out 1s infinite; }
@keyframes fxPeek { 0% { transform: translateY(26px) scale(.7); opacity: 0; } 60% { transform: translateY(-4px) rotate(-4deg); opacity: 1; } 80% { transform: rotate(3deg); } 100% { transform: none; } }

/* loading: shimmer + Лори peeking from the card edge */
.skel { position: relative; overflow: hidden; background: var(--surface-2); animation: none; border-radius: 14px; }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(236, 160, 255, .16), transparent);
  animation: fxShimmer 1.25s ease-in-out infinite;
}
@keyframes fxShimmer { to { transform: translateX(100%); } }
section.card:has(> .skel) { position: relative; overflow: hidden; }
section.card:has(> .skel)::after {
  content: ""; position: absolute; right: 18px; bottom: -14px; width: 54px; height: 54px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23C98BFF'/%3E%3Cstop offset='1' stop-color='%23D0339F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M22 16h56q14 0 14 14v30q0 14-14 14H47L31.5 87.2q-2.6 2-2.1-1.2L31 74h-9Q8 74 8 60V30q0-14 14-14z' fill='url(%23g)'/%3E%3Cellipse cx='37' cy='42' rx='9' ry='10' fill='%23fff'/%3E%3Cellipse cx='63' cy='42' rx='9' ry='10' fill='%23fff'/%3E%3Ccircle cx='40' cy='40' r='4.6' fill='%231B1633'/%3E%3Ccircle cx='66' cy='40' r='4.6' fill='%231B1633'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: fxPeekLoop 2.4s ease-in-out infinite;
}
@keyframes fxPeekLoop { 0%, 100% { transform: translateY(22px); } 35%, 70% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(2px) rotate(5deg); } }

/* offer / hero: violet → magenta gradient with soft bubbles */
.offer { box-shadow: 0 16px 36px rgba(176, 43, 184, .32); }
.offer::before {
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--offer-c) 75%, transparent), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(135deg, var(--offer-a), var(--offer-b));
}
.offer::after { background: rgba(255, 255, 255, .10); animation: fxFloat 7s ease-in-out infinite; }
@keyframes fxFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -8px); } }
.offer-tag { background: rgba(255, 255, 255, .2); }

/* meters and rings fill up */
.meter { background: color-mix(in srgb, var(--surface-3) 80%, transparent); }
.meter > i { position: relative; overflow: hidden; background: linear-gradient(90deg, #A855F7, #EC4899); transform-origin: 0 50%; }
.meter > i::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: fxShimmer 2.4s ease-in-out 1s infinite;
}
.meter.ok > i { background: linear-gradient(90deg, #22C39A, #6FF0CC); }
.meter.warm > i { background: linear-gradient(90deg, #FFB547, #FF8FC0); }
.meter:not(.session-top .meter) > i { animation: fxFill 1s var(--ease-out) .15s both; }
.session-top .meter > i { transition: width .6s var(--spring); }
@keyframes fxFill { from { transform: scaleX(0); } }
.ring svg circle + circle { animation: fxRing 1.1s var(--ease-out) .15s both; }
@keyframes fxRing { from { stroke-dashoffset: 113.1; } }

/* course path */
.steps { border-radius: var(--r-lg); background: var(--surface); }
.step { transition: background-color .2s ease, transform .3s var(--spring); }
.step:active { transform: scale(.985); transition-duration: .08s; }
.step .num { border-radius: 14px; width: 36px; height: 36px; flex-basis: 36px; }
.step.current { background: var(--grad-soft); }
.step.current .num { position: relative; background: var(--grad); box-shadow: 0 4px 12px rgba(194, 38, 142, .35); }
.step.current .num::after {
  content: ""; position: absolute; inset: -4px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--pink) 60%, transparent);
  animation: fxPulse 1.8s ease-out infinite; pointer-events: none;
}
@keyframes fxPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.step .go-pill { background: var(--grad); box-shadow: 0 3px 10px rgba(194, 38, 142, .3); }
.lvl-badge { background: var(--grad); border-radius: 14px; box-shadow: 0 4px 12px rgba(194, 38, 142, .3); }
.plan-item { border-radius: var(--r-md); }
.plan-item.done .dot { background: var(--lagoon); border-color: var(--lagoon); color: #06291F; }

/* lists, tiles, pills */
.list { border-radius: var(--r-lg); }
.li { transition: background-color .2s ease, transform .3s var(--spring); }
.li:active { transform: scale(.985); transition-duration: .08s; }
.li .lead { border-radius: 14px; background: var(--grad-soft); }
.li.sel { background: var(--grad-soft); }
.mode {
  border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface));
  transition: transform .35s var(--spring), box-shadow .2s ease; box-shadow: 0 6px 18px rgba(12, 2, 28, .18);
}
.mode:active:not(:disabled) { transform: scale(.95); transition-duration: .08s; }
.mode .mi { border-radius: 14px; }
.li .lead:has(> .ic) { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(194, 38, 142, .28); }
.mi.c1, html[data-theme="dark"] .mi.c1 { background: linear-gradient(135deg, #A855F7, #7C3AED); color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, .35); }
.mi.c2 { background: linear-gradient(135deg, #F472B6, #DB2777); color: #fff; box-shadow: 0 4px 12px rgba(219, 39, 119, .32); }
.mi.c3 { background: linear-gradient(135deg, #34D3A6, #0EA5A0); color: #fff; box-shadow: 0 4px 12px rgba(14, 165, 160, .3); }
.mi.c4 { background: linear-gradient(135deg, #FDBA74, #F472B6); color: #fff; box-shadow: 0 4px 12px rgba(244, 114, 182, .3); }
.mode.is-locked .mi { filter: saturate(.55); opacity: .85; }
.card.continue { background: radial-gradient(90% 70% at 100% 0%, rgba(236, 72, 153, .16), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(168, 85, 247, .16), transparent 60%), var(--surface); }
.result-hero { background: radial-gradient(60% 45% at 50% 22%, rgba(236, 72, 153, .24), transparent 72%), radial-gradient(70% 60% at 50% 100%, rgba(168, 85, 247, .14), transparent 70%), var(--surface); }
.teach-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 26px rgba(124, 58, 237, .18); }
.mode:not(:disabled):active .mi, .mode:hover .mi { transform: rotate(-8deg) scale(1.08); }
.mode .mi { transition: transform .35s var(--spring); }
.pill { border-radius: 999px; }
.pill.iris { background: var(--grad-soft); }
.price-pill { background: var(--grad); }
.seg { border-radius: 18px; padding: 4px; }
.seg button { min-height: 44px; border-radius: 14px; transition: background-color .2s ease, color .2s ease, transform .3s var(--spring); }
.seg button.on { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(194, 38, 142, .3); }
.seg button:active { transform: scale(.95); }
.stat { border-radius: 18px; background: var(--grad-soft); }
.stat b { background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--lilac) 80%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.example { border-left-color: var(--pink); border-radius: 0 14px 14px 0; }
.wotd-dot { width: 40px; height: 40px; flex-basis: 40px; transition: transform .35s var(--spring); }
.wotd-dot:active { transform: scale(.88); }
.wotd-dot.cur { background: var(--grad); box-shadow: 0 4px 12px rgba(194, 38, 142, .3); }
.tchip { min-height: 38px; border-radius: 999px; transition: transform .3s var(--spring), background-color .15s ease; }
.tchip:active { transform: scale(.93); }
.tchip.on { background: var(--grad); border-color: transparent; }
.lang-chip { min-height: 44px; transition: transform .3s var(--spring), background-color .15s ease, border-color .15s ease; }
.lang-chip:active { transform: scale(.94); }
.lang-chip.on { background: var(--grad-soft); border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent); }

/* lesson / quiz */
.session-top .meter { height: 12px; }
.teach-card { border-radius: 24px; background: var(--grad-soft); border-color: color-mix(in srgb, var(--iris) 25%, var(--line)); }
.teach-term { background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--lilac) 75%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.opt {
  border-radius: 18px; border-width: 2px; min-height: 56px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--line-2) 90%, transparent);
  transition: border-color .15s ease, background-color .15s ease, transform .35s var(--spring), box-shadow .15s ease;
}
.opt:not(:disabled):active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 var(--line-2); border-color: var(--iris); transition-duration: .08s; }
.opt .key { border-radius: 10px; width: 30px; height: 30px; flex-basis: 30px; }
.opt.correct { border-color: var(--lagoon); background: var(--lagoon-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--lagoon) 55%, transparent); animation: fxPop .5s var(--spring); }
.opt.wrong { border-color: var(--rose); background: var(--rose-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--rose) 50%, transparent); animation: fxShake .45s ease; }
.opt.correct .key { background: var(--lagoon); color: #06291F; }
.opt.sel { border-color: var(--pink); background: var(--grad-soft); }
.opt.sel .key { background: var(--grad); }
@keyframes fxPop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fxShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.feedback { border-radius: 18px; animation: fxUp .4s var(--spring) both; }
.feedback.has-lori { position: relative; padding-right: 70px; min-height: 64px; }
.fx-lori { position: absolute; right: 10px; bottom: 8px; width: 50px; height: 50px; pointer-events: none; }
.fx-lori svg { width: 100%; height: 100%; overflow: visible; }
.feedback.ok .fx-lori { animation: fxLoriYay .9s var(--spring) both; }
.feedback.bad .fx-lori { animation: fxLoriOops .8s var(--spring) both; }
@keyframes fxLoriYay { 0% { transform: translateY(20px) scale(.4) rotate(-20deg); opacity: 0; } 50% { transform: translateY(-10px) scale(1.12) rotate(8deg); opacity: 1; } 75% { transform: translateY(0) scale(.95, 1.05) rotate(-4deg); } 100% { transform: none; } }
@keyframes fxLoriOops { 0% { transform: translateX(16px) scale(.6); opacity: 0; } 55% { transform: translateX(-3px) rotate(-10deg); opacity: 1; } 75% { transform: rotate(6deg); } 100% { transform: none; } }
.score-big { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxPopIn .7s var(--spring) .35s both; padding: 0 4px; }
html[data-theme="dark"] .score-big { background-image: linear-gradient(135deg, #E9B8FF, #FF8FC8); }
@keyframes fxPopIn { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.review-item { border-radius: 14px; }
.bubble { border-radius: 20px 20px 20px 6px; }
.bubble.me { border-radius: 20px 20px 6px 20px; background: var(--grad-soft); }
.input, .inp, .tr-in { border-radius: 16px; }
.input:focus, .inp:focus, .tr-in:focus { border-color: var(--pink); outline: 3px solid color-mix(in srgb, var(--pink) 25%, transparent); outline-offset: 0; }

/* subscription / plans */
.plan-opt, .tier-opt { border-radius: 20px; transition: transform .35s var(--spring), border-color .15s ease, background-color .15s ease, box-shadow .2s ease; }
.plan-opt:active, .tier-opt:active { transform: scale(.975); transition-duration: .08s; }
.plan-opt.sel, .tier-opt.on { border-color: var(--pink); background: var(--grad-soft); box-shadow: 0 8px 22px rgba(194, 38, 142, .22); }
.plan-opt.sel .plan-radio { border-color: var(--pink); background: radial-gradient(circle, var(--pink) 0 45%, transparent 50%); }
.plan-ribbon { background: var(--grad); box-shadow: 0 4px 12px rgba(194, 38, 142, .35); }
.sub-summary { border-color: color-mix(in srgb, var(--pink) 35%, var(--line)); }
.benefit .bi, .step-no { background: var(--grad-soft); }
.btn-pay { min-height: 56px; }

/* tab bar */
.tabbar { background: color-mix(in srgb, var(--surface) 88%, transparent); border-top-color: var(--line-2); box-shadow: 0 -10px 30px rgba(12, 2, 28, .28); }
.tab-btn { transition: color .2s ease, transform .3s var(--spring); }
.tab-btn:active { transform: scale(.9); transition-duration: .08s; }
.tab-btn.active .ic { background: var(--grad); color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(194, 38, 142, .35); animation: fxTabPop .5s var(--spring); }
@keyframes fxTabPop { 0% { transform: scale(.6) translateY(4px); } 60% { transform: scale(1.12) translateY(-2px); } 100% { transform: none; } }
.toast { border-radius: 16px; background: var(--grad); color: #fff; animation: fxUp .35s var(--spring) both; }
.sheet { border-radius: 28px 28px 0 0; }
.sheet-grab { background: var(--grad); opacity: .7; }

/* streak / xp chips come alive */
.chip-streak:not([hidden]) .ic { animation: fxFlame 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes fxFlame { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.12, .94) rotate(-4deg); } 60% { transform: scale(.95, 1.08) rotate(3deg); } }
.chip.fx-bump { animation: fxBump .6s var(--spring); }
@keyframes fxBump { 0% { transform: scale(1); } 35% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ================= 3. entrances (screen transitions) ================= */
.fx-in { animation: fxUp .42s var(--ease-out) both; animation-delay: calc(var(--fx-i, 0) * 45ms); }
@keyframes fxUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= 4. overflow-safe typography (320–768 px, 16 languages) ================= */
body { overflow-wrap: anywhere; }
.chip, .pill.lock, .price-pill, .ok-pill, .go-pill, .plan-price b, .plan-price s, .disc-badge, .save-badge, .rf-amount b, .nw { overflow-wrap: normal; }
[lang]:not(html) { hyphens: auto; -webkit-hyphens: auto; }
.teach-term, .word-big, .hist-word, .tr-main, .bubble .t, .example .en, .opt .txt, .prompt, .lesson-body, .review-item .w {
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
html[lang="ru"] .teach-term:not([lang]), html[lang="ru"] .word-big:not([lang]) { hyphens: manual; }
.teach-term, .word-big { font-size: clamp(24px, 7.6vw, 34px); }
.score-big { font-size: clamp(36px, 12vw, 48px); }
.h1 { font-size: clamp(21px, 6.4vw, 24px); }
.tr-main { font-size: clamp(19px, 5.8vw, 22px); }
.offer-price b { font-size: clamp(24px, 8vw, 30px); }
.link-code { font-size: clamp(22px, 7.4vw, 30px); letter-spacing: clamp(.06em, 1vw, .18em); }
/* min-width:0 for every flex/grid child that holds text */
.row > *, .btn-row > *, .grow, .sub-status > *, .pick-step > *, .offer-top > *, .tr-head > *, .level-head > *, .plan-head > *, .wotd-head > *,
.meta-row > *, .module-head > *, .kv > *, .step > *, .li > *, .opt > *, .mode > *, .benefit > *, .invite > *, .profile-hero > *,
.course-hero > *, .screen-head > *, .sub-hero > *, .hist-row > *, .bubble .sp > *, .fb-title > *, .notice > *, .paywall-note > * { min-width: 0; }
.options, .plan-list, .plans, .review-list, .benefits, .faq, .offer-list, .check-list, .assure, .hist-list, .rf-lines, .sec-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .fvp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.btn { min-width: 0; max-width: 100%; }
.btn > span { overflow-wrap: anywhere; }
.btn-sm { max-width: 100%; white-space: normal; }
.grow > .btn-sm, .course-hero .btn-sm { white-space: normal; padding-left: 12px; padding-right: 12px; gap: 6px; font-size: clamp(12px, 3.9vw, 13.5px); }
.tchip { white-space: normal; text-align: left; line-height: 1.2; padding-top: 4px; padding-bottom: 4px; }
.tchip > span { min-width: 0; }
.tier-title, .plan-name, .kv span, .mode b, .step-title, .li-title, .plan-title, .h3, .h2, .continue-title, .offer-title, .fb-title span { min-width: 0; }
.kv span:last-child { min-width: 0; max-width: 100%; }
.tr-head .h3 { flex: 1 1 auto; }
.invite { flex-wrap: wrap; }
.invite > .grow { flex: 1 1 0; min-width: 72px; }
.brand-sub { overflow-wrap: anywhere; }

/* home tiles: 3 per row on phones (long labels like «Аудирование» fit), 4 when there is room */
.feat-card { container-type: inline-size; container-name: feat; }
.feat-card .modes.feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat-card .modes.feat .mode b { font-size: 12.5px; hyphens: manual; }
.feat-card .modes.feat .mode:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; padding: 10px 12px; }
@container feat (max-width: 290px) {
  .feat-card .modes.feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-card .modes.feat .mode:last-child:nth-child(3n + 1) { grid-column: auto; flex-direction: column; gap: 6px; padding: 12px 4px; }
  .feat-card .modes.feat .mode:last-child:nth-child(2n + 1) { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; padding: 10px 12px; }
}
@container feat (min-width: 380px) {
  .feat-card .modes.feat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feat-card .modes.feat .mode b { font-size: 11.5px; }
  .feat-card .modes.feat .mode:last-child:nth-child(3n + 1) { grid-column: auto; flex-direction: column; gap: 6px; padding: 12px 4px; }
}

/* «2+ языка — выгоднее» flag wraps instead of being cut */
.tier-opt { container-type: inline-size; container-name: tier; }
.tier-flag { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; justify-content: center; line-height: 1.2; right: 6px; max-width: calc(100% - 12px); }
@container tier (max-width: 165px) { .tier-title { margin-top: 12px; } }

/* ================= 5. tap targets ≥ 48 px (visual size unchanged) ================= */
.btn-sm, .tchip, .wotd-dot, .back, .btn-link, .linkish, .seg button, .lang-chip, .bubble .say, .legal-head, .chip, .pub-id .btn-sm { position: relative; }
.btn-sm::before, .tchip::before, .wotd-dot::before, .back::before, .btn-link::before, .linkish::before, .seg button::before,
.lang-chip::before, .bubble .say::before, .pub-id .btn-sm::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%);
}
.tab-btn { min-height: 52px; }

/* ================= 6. reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .skel::after, section.card:has(> .skel)::after, .meter > i::after { animation: none !important; }
}

/* toast placement fix 2026-09-30: the fxUp entrance animation replaced translateX(-50%) and pushed the toast
   off the right edge. Now centred with left/right + auto margins (no transform needed), inside the safe area,
   above the tab bar, wraps instead of clipping on 320–412px screens. */
.toast { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); margin: 0 auto; transform: none;
  width: fit-content; max-width: min(440px, calc(100% - 32px)); box-sizing: border-box; overflow-wrap: anywhere; z-index: 80; }