/*
 * Spasibapp — identité russe contemporaine
 * Couche visuelle autonome : aucun contenu, composant ou comportement métier.
 * Retirer les liens vers ce fichier suffit pour retrouver le design précédent.
 */

:root {
  --ink: #17263b;
  --ink-soft: #2b3b50;
  --navy: #172b45;
  --parchment: #f4f1e9;
  --parchment-deep: #e7e2d7;
  --card: #fffdf8;
  --amber: #bd2d3a;
  --amber-deep: #93202c;
  --amber-pale: #f6dfe0;
  --blue: #557a9b;
  --blue-pale: #e5edf2;
  --gold: #a7803d;
  --gold-pale: #f2e9d5;
  --sage: #587461;
  --sage-pale: #e1ebe4;
  --rust: #ba5038;
  --rust-pale: #f5e1da;
  --slate: #667080;
  --rose: #e7b9b4;
  --line: rgba(23, 38, 59, .13);
  --theme-shadow: 0 18px 45px rgba(23, 38, 59, .09);
  --theme-shadow-soft: 0 8px 24px rgba(23, 38, 59, .065);
  --theme-radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--parchment);
  background-image:
    radial-gradient(circle at 88% 7%, rgba(231, 185, 180, .24), transparent 25rem),
    radial-gradient(circle at 14% 92%, rgba(85, 122, 155, .10), transparent 27rem);
  background-attachment: fixed;
  color: var(--ink);
}

body::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #fff 0 33.333%, #557a9b 33.333% 66.666%, #bd2d3a 66.666%);
}

::selection {
  color: #fff;
  background: var(--amber);
}

a,
button,
.card,
.modulecard,
.feature-card,
.land-step,
.letter-card,
.lesson-row,
.theme-card,
.word-card,
.deck-card,
.verb-chip,
.phrase-row,
.stat {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, summary):focus-visible {
  outline: 3px solid rgba(85, 122, 155, .35);
  outline-offset: 3px;
}

/* Navigation et espace d'apprentissage */
#sidebar {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 38%),
    var(--navy);
  box-shadow: 12px 0 38px rgba(23, 43, 69, .10);
}

#sidebar::after {
  position: absolute;
  right: -60px;
  bottom: 68px;
  width: 165px;
  height: 165px;
  content: "";
  opacity: .6;
  border: 1px solid rgba(231, 185, 180, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 25px rgba(231, 185, 180, .045),
    0 0 0 50px rgba(231, 185, 180, .025);
  pointer-events: none;
}

.brand,
#navlist,
.sidebar-foot,
.streak-pill {
  position: relative;
  z-index: 1;
}

.brand .word {
  color: #fff;
  letter-spacing: -.35px;
}

.brand .tag,
.sidebar-foot {
  color: rgba(255, 255, 255, .48);
}

.navbtn {
  border-radius: 11px;
  color: rgba(255, 255, 255, .68);
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.navbtn svg {
  color: var(--rose);
}

.navbtn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .075);
  transform: translateX(2px);
}

.navbtn.active {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 3px 0 0 var(--rose);
}

.streak-pill {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .055);
}

main {
  position: relative;
}

.eyebrow,
.land-eyebrow {
  color: var(--amber);
  letter-spacing: .13em;
}

.pagetitle,
.land-h2,
.auth-title {
  color: var(--ink);
  letter-spacing: -.035em;
}

.pagesub,
.land-sub,
.auth-sub {
  color: var(--slate);
}

/* Composants partagés */
.card,
.stat,
.modulecard,
.feature-card,
.land-step,
.letter-card,
.lesson-row,
.lesson-detail,
.theme-card,
.word-card,
.deck-card,
.verb-chip,
.text-card,
.phrase-row,
.auth-card {
  border-color: var(--line);
  border-radius: var(--theme-radius);
  background-color: rgba(255, 253, 248, .93);
  box-shadow: 0 1px 1px rgba(23, 38, 59, .025);
}

.stat,
.modulecard,
.feature-card,
.land-step,
.letter-card,
.lesson-row,
.theme-card,
.word-card,
.deck-card,
.verb-chip,
.phrase-row {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

:where(.stat, .modulecard, .feature-card, .land-step, .letter-card, .lesson-row, .theme-card, .word-card, .deck-card, .verb-chip, .phrase-row):hover {
  border-color: rgba(189, 45, 58, .34);
  box-shadow: var(--theme-shadow-soft);
  transform: translateY(-3px);
}

.modulecard .icon,
.feature-card .icn {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 7px 17px rgba(23, 43, 69, .16);
}

.badge {
  border-radius: 999px;
  letter-spacing: .035em;
}

.btn {
  min-height: 42px;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn:hover {
  box-shadow: 0 9px 20px rgba(23, 38, 59, .14);
  transform: translateY(-2px);
}

.btn.amber {
  color: #fff;
  border-color: var(--amber);
  background: var(--amber);
}

.btn.amber:hover {
  border-color: var(--amber-deep);
  background: var(--amber-deep);
}

.btn.secondary {
  border-color: rgba(23, 38, 59, .18);
  background: rgba(255, 253, 248, .72);
}

.progress-ring,
.exam-progress > div,
.theme-card .bar > div,
.visual-progress > div {
  background-color: var(--amber);
}

.opt {
  border-radius: 12px;
  background: rgba(255, 253, 248, .94);
  transition: transform .18s ease, border-color .18s ease;
}

.opt:hover {
  border-color: rgba(189, 45, 58, .34);
  transform: translateX(3px);
}

.lesson-rule {
  border-left-color: var(--blue);
  border-radius: 0 13px 13px 0;
  background: var(--blue-pale);
}

/* Accueil public */
#landing-screen {
  padding-bottom: 1px;
  background:
    radial-gradient(circle at 88% 12%, rgba(231, 185, 180, .18), transparent 27rem),
    var(--parchment);
}

.land-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: none;
  padding: 20px max(24px, calc((100vw - 1100px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(23, 43, 69, .96);
  box-shadow: 0 12px 34px rgba(23, 43, 69, .13);
  backdrop-filter: blur(16px);
}

.land-nav .word {
  color: #fff;
  letter-spacing: -.04em;
}

.land-nav .btn.secondary {
  color: var(--navy);
  border-color: var(--rose);
  background: var(--rose);
}

.land-nav .btn.secondary:hover {
  color: var(--navy);
  border-color: #f0d2ce;
  background: #f0d2ce;
}

.land-hero {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 30px auto 0;
  padding: clamp(48px, 6vw, 78px) clamp(26px, 5vw, 66px) clamp(38px, 5vw, 58px);
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 44%),
    var(--navy);
  box-shadow: 0 28px 70px rgba(23, 43, 69, .17);
}

.land-hero::before,
.land-hero::after {
  position: absolute;
  z-index: 0;
  content: "";
  border: 1px solid rgba(189, 45, 58, .15);
  border-radius: 50%;
  pointer-events: none;
}

.land-hero::before {
  top: -78px;
  right: -75px;
  width: 410px;
  height: 410px;
  border-color: rgba(231, 185, 180, .24);
  box-shadow: 0 0 0 48px rgba(231, 185, 180, .055), 0 0 0 96px rgba(231, 185, 180, .025);
}

.land-hero::after {
  bottom: -128px;
  left: 35%;
  width: 250px;
  height: 250px;
  border-color: rgba(255, 255, 255, .08);
}

.land-hero-inner,
.land-section,
.land-footer {
  position: relative;
  z-index: 1;
}

.land-hero h1 {
  color: #fff;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.land-hero p {
  color: rgba(255, 255, 255, .68);
}

.land-hero h1 .ru,
.visual-ru {
  color: var(--amber);
}

.land-hero h1 .ru-word {
  color: var(--rose);
}

.land-hero .land-eyebrow {
  color: var(--rose);
}

.land-hero .land-cta-row .btn.amber {
  color: var(--navy);
  border-color: var(--rose);
  background: var(--rose);
}

.land-hero .land-cta-row .btn.amber:hover {
  border-color: #f0d2ce;
  background: #f0d2ce;
}

.land-hero .land-cta-row .btn.secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
}

.land-hero .land-cta-row .btn.secondary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .11);
}

.land-hero .fine,
.land-hero .fine a {
  color: rgba(255, 255, 255, .68);
}

.land-hero .fine a:hover {
  color: #fff;
}

.land-hero-visual,
.visual-card {
  position: relative;
}

.land-hero-visual::before {
  position: absolute;
  inset: -16px 18px 18px -16px;
  content: "";
  border: 1px solid rgba(231, 185, 180, .22);
  border-radius: 28px;
  transform: rotate(-2deg);
}

.visual-card {
  border-color: rgba(23, 38, 59, .12);
  border-radius: 24px;
  background: rgba(255, 253, 248, .95);
  box-shadow: var(--theme-shadow);
}

.visual-card-head {
  color: var(--amber);
  letter-spacing: .12em;
}

.visual-card-badge {
  background: var(--navy);
  box-shadow: 0 10px 26px rgba(23, 43, 69, .19);
}

.visual-card-streak {
  border-color: rgba(23, 38, 59, .11);
  border-radius: 999px;
  background: #fffdf8;
}

.visual-card::after {
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  content: "";
  opacity: .36;
  background:
    linear-gradient(45deg, transparent 40%, var(--amber) 41% 59%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--blue) 41% 59%, transparent 60%);
  background-size: 14px 14px;
}

.word-chip {
  border-color: rgba(23, 38, 59, .13);
  box-shadow: var(--theme-shadow-soft);
}

.land-stats {
  border-color: rgba(255, 255, 255, .15);
}

.land-stats .n,
.land-step .idx {
  color: var(--amber);
}

.land-hero .land-stats b {
  color: #fff;
}

.land-hero .land-stats span {
  color: rgba(255, 255, 255, .52);
}

.land-stats > div {
  position: relative;
}

.land-stats > div + div::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -16px;
  width: 1px;
  content: "";
  background: rgba(255, 255, 255, .13);
}

.land-section {
  border-color: rgba(23, 38, 59, .10);
}

.land-section .land-h2 {
  font-size: clamp(2rem, 4vw, 2.65rem);
  line-height: 1.08;
}

.feature-grid {
  gap: 18px;
}

.feature-card {
  min-height: 205px;
  padding: 26px;
}

.feature-card .icn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.feature-card h3 {
  color: var(--navy);
  font-size: 1.05rem;
}

.feature-card .n {
  color: var(--gold);
  letter-spacing: .08em;
}

.land-steps {
  max-width: 760px;
}

.land-step {
  margin-top: 12px;
  padding: 22px 24px;
  border: 1px solid var(--line);
}

.land-step:first-child {
  border-top: 1px solid var(--line);
}

.land-step .idx {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--amber-pale);
}

.feature-card,
.land-step {
  position: relative;
  overflow: hidden;
}

.feature-card::after,
.land-step::after {
  position: absolute;
  right: -23px;
  bottom: -25px;
  width: 72px;
  height: 72px;
  content: "";
  border: 1px solid rgba(85, 122, 155, .12);
  border-radius: 50%;
}

.land-footer {
  border-top: 1px solid var(--line);
}

/* Captures réelles de l'espace privé sur l'accueil. */
.private-showcase {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(76px, 9vw, 112px) 24px;
}

.private-showcase::before {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -70px;
  width: 240px;
  height: 240px;
  content: "";
  opacity: .22;
  background:
    linear-gradient(45deg, transparent 42%, var(--amber) 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--blue) 43% 57%, transparent 58%);
  background-size: 24px 24px;
  pointer-events: none;
}

.private-showcase-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .65fr);
  gap: clamp(28px, 6vw, 74px);
  align-items: end;
  margin-bottom: 42px;
}

.private-showcase-heading .land-eyebrow {
  margin-bottom: 13px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.private-showcase-heading .land-h2 {
  max-width: 700px;
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: clamp(2.25rem, 4.8vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.private-showcase-heading > p {
  margin: 0 0 5px;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.7;
}

.private-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
  gap: 24px;
  align-items: start;
}

.private-shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(23, 38, 59, .14);
  border-radius: 21px;
  background: var(--card);
  box-shadow: 0 24px 55px rgba(23, 38, 59, .12);
}

.private-shot-secondary {
  margin-top: 76px;
}

.private-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 37px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(23, 38, 59, .09);
  background: #fffdf8;
}

.private-shot-bar i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--parchment-deep);
}

.private-shot-bar i:first-child { background: var(--rose); }
.private-shot-bar i:nth-child(2) { background: #d8c28f; }
.private-shot-bar i:nth-child(3) { background: #a9c1b1; }

.private-shot-bar span {
  margin-left: 6px;
  color: var(--slate);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.private-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  background: var(--parchment);
}

.private-shot-secondary img {
  object-position: center left;
}

.private-shot figcaption {
  display: grid;
  gap: 3px;
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(23, 38, 59, .09);
}

.private-shot figcaption b {
  color: var(--navy);
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
}

.private-shot figcaption span {
  color: var(--slate);
  font-size: .82rem;
  line-height: 1.5;
}

/* Interface privée et authentification */
.auth-wrap {
  background:
    radial-gradient(circle at 20% 10%, rgba(85, 122, 155, .10), transparent 23rem),
    radial-gradient(circle at 90% 85%, rgba(189, 45, 58, .10), transparent 24rem),
    var(--parchment);
}

.auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(23, 38, 59, .10);
  box-shadow: 0 28px 65px rgba(23, 38, 59, .12);
}

.auth-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--blue), var(--amber));
}

.auth-brand {
  color: var(--navy);
  letter-spacing: -.035em;
}

.auth-input {
  border-radius: 12px;
  background: #fffefa;
}

.auth-input:focus,
.verb-search input:focus,
.chat-input-row input:focus,
.ex-input:focus,
.ex-retry-input:focus {
  outline: 3px solid rgba(85, 122, 155, .22);
  border-color: var(--blue);
}

/* Le tableau de bord privé reprend le rythme visuel de la page d'essai. */
#app main {
  isolation: isolate;
}

#app main::before {
  position: absolute;
  z-index: -1;
  top: 18px;
  right: 22px;
  width: 120px;
  height: 120px;
  content: "";
  opacity: .18;
  background:
    linear-gradient(45deg, transparent 42%, var(--amber) 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--blue) 43% 57%, transparent 58%);
  background-size: 24px 24px;
  pointer-events: none;
}

.view.active > .pagetitle,
.view.active > .eyebrow,
.view.active > .pagesub {
  position: relative;
  z-index: 1;
}

.view.active > .pagetitle {
  max-width: 820px;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
}

.view.active > .pagesub {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
}

.stat {
  min-height: 112px;
  padding: 22px;
  background:
    linear-gradient(90deg, var(--amber) 0 36%, var(--blue) 36% 62%, var(--navy) 62%) top / 100% 3px no-repeat,
    rgba(255, 253, 248, .94);
}

.stat .n {
  color: var(--navy);
  font-size: 2.1rem;
  line-height: 1.1;
}

.stat .l {
  margin-top: 8px;
  color: var(--slate);
  font-size: .83rem;
}

.modulecard {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  padding: 23px;
}

.modulecard::after {
  position: absolute;
  right: -32px;
  bottom: -32px;
  width: 92px;
  height: 92px;
  content: "";
  border: 1px solid rgba(85, 122, 155, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(85, 122, 155, .025);
  pointer-events: none;
}

.modulecard .icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.modulecard h3 {
  color: var(--navy);
  font-size: 1.05rem;
}

.modulecard p {
  max-width: 27ch;
  font-size: .86rem;
}

#view-dashboard > .card[style*="background:var(--ink)"] {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 20px;
  background: var(--navy) !important;
}

#view-dashboard > .card[style*="background:var(--ink)"]::after {
  position: absolute;
  top: -125px;
  right: -55px;
  width: 270px;
  height: 270px;
  content: "";
  border: 1px solid rgba(231, 185, 180, .25);
  border-radius: 50%;
  box-shadow: 0 0 0 37px rgba(231, 185, 180, .055), 0 0 0 74px rgba(231, 185, 180, .025);
  pointer-events: none;
}

#view-dashboard > .card[style*="background:var(--ink)"] > * {
  position: relative;
  z-index: 1;
}

#view-dashboard details > summary {
  padding: 16px 18px !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, .72);
  transition: border-color .2s ease, background-color .2s ease;
}

#view-dashboard details > summary:hover {
  border-color: rgba(189, 45, 58, .32);
  background: var(--card);
}

.units-path {
  position: relative;
  gap: 16px;
  padding: 13px 6px 24px;
}

.unit-chip {
  position: relative;
  z-index: 1;
}

.unit-chip-icon {
  width: 42px;
  height: 42px;
  border-color: rgba(23, 38, 59, .14);
  background: var(--card);
  box-shadow: 0 5px 15px rgba(23, 38, 59, .06);
}

.unit-chip.current .unit-chip-icon {
  color: var(--amber-deep);
  border-color: var(--amber);
  background: var(--amber-pale);
  box-shadow: 0 0 0 4px var(--amber-pale);
}

.unit-chip.passed .unit-chip-icon {
  box-shadow: 0 0 0 4px var(--sage-pale);
}

.unit-chip-label {
  font-size: .72rem;
}

/* Leçons, exercices et bibliothèques. */
.letter-card {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.letter-card .cyr {
  color: var(--navy);
  font-size: 2.2rem;
}

.letter-card .translit,
.word-card .translit-word,
.verb-chip .ru,
.verb-result-row .ru,
.verb-detail-head .translit {
  color: var(--amber);
}

.lesson-row,
.deck-card,
.phrase-row,
.word-card,
.verb-chip,
.text-card,
.verb-intro {
  padding: 17px 19px;
  border-color: var(--line);
  background: rgba(255, 253, 248, .94);
}

.lesson-check {
  width: 28px;
  height: 28px;
  border-color: rgba(23, 38, 59, .18);
  background: #fffefa;
}

.lesson-check.done {
  border-color: var(--sage);
  background: var(--sage);
  box-shadow: 0 0 0 4px var(--sage-pale);
}

.lesson-title,
.deck-name {
  color: var(--navy);
}

.lesson-detail {
  padding: clamp(25px, 4vw, 42px);
  box-shadow: var(--theme-shadow-soft);
}

.lesson-detail p,
.text-card .fr-text,
.verb-intro-step {
  font-size: .95rem;
  line-height: 1.75;
}

.lesson-warn {
  border-color: rgba(189, 45, 58, .28);
  border-radius: 13px;
  background: var(--amber-pale);
}

.theme-card {
  padding: 21px;
}

.theme-card .emoji {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--blue-pale);
}

.theme-card .bar,
.exam-progress,
.visual-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--parchment-deep);
}

.theme-card .bar > div,
.exam-progress > div,
.visual-progress > div {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), #d95860);
}

.word-card.known {
  border-color: rgba(88, 116, 97, .38);
  background: var(--sage-pale);
}

.star-btn,
.iconbtn {
  border-color: rgba(23, 38, 59, .14);
  background: #fffefa;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.star-btn:hover,
.iconbtn:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--amber-pale);
  transform: translateY(-2px);
}

.verb-search input,
.chat-input-row input,
.ex-input,
.ex-retry-input,
select.sel {
  border-color: rgba(23, 38, 59, .15);
  border-radius: 12px;
  background: #fffefa;
}

.level-tabs {
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, .68);
  width: fit-content;
}

.level-tab {
  border: 0;
  background: transparent;
}

.level-tab.active {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 5px 14px rgba(23, 43, 69, .18);
}

.flip-stage .flashcard {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border-radius: 22px;
  box-shadow: var(--theme-shadow);
}

.flip-stage .flashcard::after {
  position: absolute;
  right: -52px;
  bottom: -52px;
  width: 150px;
  height: 150px;
  content: "";
  border: 1px solid rgba(189, 45, 58, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(189, 45, 58, .025);
  pointer-events: none;
}

.flashcard .big,
.quiz-flash .qword,
.verb-detail-head .ru-big {
  color: var(--navy);
}

.grade-row {
  flex-wrap: wrap;
  justify-content: center;
}

.chatwrap {
  border-color: var(--line);
  border-radius: 20px;
  background: rgba(255, 253, 248, .92);
  box-shadow: var(--theme-shadow-soft);
}

.bubble.bot {
  border-radius: 15px 15px 15px 4px;
  background: var(--blue-pale);
}

.bubble.user {
  border-radius: 15px 15px 4px;
  background: var(--navy);
}

.result-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(229, 237, 242, .72), rgba(255, 253, 248, .72));
}

.result-hero .score {
  color: var(--amber);
}

.decl-table th {
  color: var(--amber);
  border-bottom-color: var(--navy);
}

.decl-table tr:hover td,
.ex-table tr:hover td,
.conj-table tr:hover td {
  background: rgba(229, 237, 242, .45);
}

/* Entrées discrètes au chargement : purement décoratives. */
@keyframes spasibapp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.land-hero-grid,
.land-section,
.view.active,
main > :first-child {
  animation: spasibapp-rise .48s ease both;
}

@media (max-width: 860px) {
  body::before { height: 2px; }

  #mobilenav {
    border-top: 1px solid rgba(255, 255, 255, .10);
    background: rgba(23, 43, 69, .97);
    backdrop-filter: blur(14px);
  }

  #mobilenav .navbtn {
    color: rgba(255, 255, 255, .62);
  }

  #mobilenav .navbtn.active {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--rose);
  }

  #app main::before {
    right: 12px;
    width: 84px;
    height: 84px;
    background-size: 18px 18px;
  }

  .view.active > .pagetitle {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }

  .private-showcase-heading,
  .private-showcase-grid {
    grid-template-columns: 1fr;
  }

  .private-showcase-heading {
    gap: 18px;
  }

  .private-showcase-heading > p {
    max-width: 62ch;
  }

  .private-shot-secondary {
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .land-nav { padding: 15px 18px; }
  .land-hero {
    margin: 16px 12px 0;
    padding: 38px 22px 34px;
    border-radius: 20px;
  }
  .land-hero::before { opacity: .7; }
  .visual-card { border-radius: 20px; }
  .card, .auth-card { border-radius: 16px; }

  .land-stats > div + div::before { display: none; }
  .feature-card { min-height: 0; }
  .land-step { gap: 15px; padding: 19px; }
  .level-tabs { width: 100%; overflow-x: auto; border-radius: 14px; }
  .level-tab { flex: 0 0 auto; }
  .stat { min-height: 96px; }
  .modulecard { min-height: 145px; }
  .private-showcase { padding: 68px 16px; }
  .private-showcase::before { display: none; }
  .private-shot { border-radius: 16px; }
  .private-shot figcaption { padding: 16px 17px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}