/* Landing-only reference alignment: the learning flow below remains unchanged. */
:root {
  --landing-ink: #273154;
  --landing-muted: #69718c;
  --landing-violet: #7355e9;
  --landing-sky: #63b8ef;
}

.landing-shell {
  min-height: 100dvh;
  padding: 24px 18px;
  display: grid;
  justify-items: center;
  align-items: start;
  background:
    radial-gradient(circle at 8% 13%, #e3d9fb 0 12%, transparent 39%),
    radial-gradient(circle at 91% 29%, #ffe2d6 0 12%, transparent 41%),
    radial-gradient(circle at 48% 100%, #ddf5ec 0 14%, transparent 42%),
    #fbf9fd;
}

.landing-frame {
  width: min(100%, 576px);
  margin: 0;
}

.landing-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.landing-topbar { padding: 0 0 52px; }
.landing-topbar .brand { color: var(--landing-ink); }
.landing-topbar .brand b {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--landing-violet), var(--landing-sky));
  box-shadow: 0 8px 17px rgb(115 85 233 / 25%);
}
.landing-topbar .brand small { color: var(--landing-muted); }

.landing {
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
  padding: clamp(28px, 5vw, 33px);
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 30px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 24px 48px rgb(89 71 141 / 15%);
}

.landing .hero-copy { max-width: 480px; }
.landing .hero-copy h1 {
  margin: 0 0 16px;
  color: var(--landing-ink);
  font-size: clamp(32px, 6vw, 36px);
  line-height: 1.12;
  letter-spacing: -.048em;
}
.landing .hero-copy h1 i { color: var(--landing-violet); }
.landing .hero-copy > p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 14px;
  line-height: 1.45;
}

.landing .feature-stack { gap: 9px; padding: 0; }
.landing .feature-stack article {
  min-height: 61px;
  padding: 12px 15px;
  border: 1px solid #f6f3fb;
  border-radius: 18px;
  background: linear-gradient(100deg, #faf9ff, #f7fbff);
  box-shadow: none;
}
.landing .feature-stack article > span { font-size: 22px; }
.landing .feature-stack b { color: var(--landing-ink); font-size: 14px; }
.landing .feature-stack p { color: var(--landing-muted); font-size: 12px; }

.landing-actions { display: grid; gap: 10px; }
.landing .primary.big {
  width: 100%;
  min-height: 60px;
  margin: 0;
  border-radius: 18px;
  color: white;
  background: linear-gradient(100deg, var(--landing-violet), var(--landing-sky));
  box-shadow: 0 14px 26px rgb(107 101 219 / 27%);
}
.landing .primary.big:hover { box-shadow: 0 18px 30px rgb(107 101 219 / 34%); }

@media (max-width: 440px) {
  .landing-shell { padding: 0; }
  .landing-frame { min-height: 100dvh; }
  .landing-topbar { padding: 22px 22px 26px; }
  .landing { border-radius: 30px 30px 0 0; min-height: calc(100dvh - 84px); }
}

/* Reference-aligned application screens. */
.app-shell, .flow-shell {
  min-height: 100dvh;
  color: var(--landing-ink);
  background:
    radial-gradient(circle at 7% 14%, #e3d9fb 0 13%, transparent 40%),
    radial-gradient(circle at 92% 28%, #ffe3d8 0 14%, transparent 43%),
    radial-gradient(circle at 48% 100%, #def5ec 0 15%, transparent 44%),
    #fbf9fd;
}
.app-shell .page { max-width: 1110px; padding: 26px 18px 64px; }
.app-shell .topbar { margin: 0 0 28px; grid-template-columns: 1fr auto; }
.app-shell .brand, .flow-shell .brand { color: var(--landing-ink); }
.app-shell .brand>b, .flow-shell .brand>b { background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); }
.user-tools { display:flex; align-items:center; gap:12px; }
.app-shell .streak { padding:7px 13px; border-radius:999px; background:rgb(255 255 255 / 82%); box-shadow:0 6px 18px rgb(93 70 150 / 10%); }
.app-shell .locale { border:0; background:#f0ecff; color:#705ac5; }
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#eee7ff; color:#725ac2; font-size:12px; font-weight:900; }

.flow-shell { padding:24px 18px; display:grid; justify-items:center; align-items:start; }
.flow-frame { width:min(100%,576px); }
.flow-shell .landing-topbar { padding-bottom:23px; }
.flow-progress { height:8px; overflow:hidden; border-radius:999px; background:rgb(255 255 255 / 56%); }
.flow-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a185ee,#9bcaf0); }
.flow-shell .onboarding { min-height:0; margin-top:22px; display:block; }
.flow-shell .onboarding .card { padding:32px; background:rgb(255 255 255 / 90%); border-radius:30px; box-shadow:0 24px 48px rgb(89 71 141 / 15%); }
.flow-shell .step { color:#7863d4; }
.flow-shell .card h2 { color:var(--landing-ink); font-size:31px; }
.flow-shell .card>p:not(.step) { font-size:14px; color:var(--landing-muted); }
.flow-shell .card label { font-size:0; margin-top:22px; }
.flow-shell .card input { padding:17px; border:2px solid #ded6ef; border-radius:22px; background:white; color:var(--landing-ink); }
.flow-shell .card input:focus { border-color:#a588ea; box-shadow:none; }
.flow-shell .actions { margin-top:22px; }
.flow-shell .actions .secondary { width:49px; padding:0; border:0; border-radius:50%; background:white; color:#3c4562; }
.flow-shell .actions .primary { min-height:60px; border-radius:18px; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.flow-shell .choices { gap:11px; }
.flow-shell .choice { min-height:72px; border:2px solid transparent; border-radius:22px; background:transparent; }
.flow-shell .choice.selected { border-color:#b29be9; background:white; }
.flow-shell .choice.selected::after { content:'✓'; color:#715ac7; font-size:18px; font-weight:900; }
.flow-shell .privacy { background:#faf9ff; color:var(--landing-muted); }

.app-shell .dashboard { gap:22px; grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr); align-items:start; }
.app-shell .lesson-card, .app-shell .speech, .app-shell .progress, .app-shell .plan { border:1px solid rgb(255 255 255 / 90%); background:rgb(255 255 255 / 84%); box-shadow:0 18px 38px rgb(89 71 141 / 12%); }
.app-shell .dashboard>.lesson-card { grid-column:1; grid-row:span 2; padding:32px; }
.app-shell .dashboard>.share { grid-column:1; padding:0 20px 14px; }
.app-shell .dashboard>.speech { grid-column:2; grid-row:span 2; padding:25px; display:grid; }
.app-shell .dashboard>.progress { grid-column:2; padding:23px; }
.app-shell .dashboard>.plan { grid-column:2; padding:23px; }
.app-shell .lesson-card h1 { color:var(--landing-ink); font-size:36px; line-height:1.1; }
.app-shell .lesson-card h1 small { color:#7863d4; }
.app-shell .pill { color:#7c6a48; background:#fbf2c9; }
.app-shell .mini-plan { display:grid; gap:10px; margin:26px 0 20px; }
.app-shell .mini-plan li { padding:15px 18px; border-radius:18px; background:#fff; box-shadow:0 3px 12px rgb(103 86 153 / 5%); }
.app-shell .full { min-height:60px; border-radius:18px; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.app-shell .share span, .app-shell .share button { color:#756c90; }
.app-shell .speech { align-items:start; }
.app-shell .speech h2, .app-shell .progress h2, .app-shell .plan h2 { color:var(--landing-ink); }
.app-shell .speech .soft { margin-top:17px; justify-self:stretch; min-height:54px; color:white; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.app-shell .bar { background:white; }
.app-shell .bar i { background:linear-gradient(90deg,var(--landing-violet),var(--landing-sky)); }
.app-shell .lesson-dots button { border:1px dashed #d9d2e8; background:transparent; }
.app-shell .lesson-dots .now { border:0; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }

@media (min-width: 761px) {
  .app-shell .dashboard>.lesson-card { grid-row:1 / span 2; }
  .app-shell .dashboard>.share { grid-row:3; }
  .app-shell .dashboard>.speech { grid-row:1; }
  .app-shell .dashboard>.progress { grid-row:2; }
  .app-shell .dashboard>.plan { grid-row:3; }
}

.app-shell .lesson-view { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr); gap:24px; align-items:start; }
.app-shell .lesson-view .backlink { grid-column:2; grid-row:2; color:var(--landing-ink); }
.app-shell .lesson-view .lesson-card { grid-column:1; grid-row:1 / span 3; padding:32px; }
.app-shell .lesson-view .lesson-card h1 { font-size:36px; }
.lesson-rail { grid-column:2; display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; }
.rail-card { padding:24px; border-radius:30px; background:rgb(255 255 255 / 84%); box-shadow:0 18px 38px rgb(89 71 141 / 12%); }
.rail-card h2 { margin:0 0 12px; font-size:18px; color:var(--landing-ink); }
.rail-card>b { display:block; color:#735dd0; font-size:36px; }
.rail-card p { margin:9px 0 0; color:var(--landing-muted); font-size:13px; line-height:1.45; }
.app-shell .lesson-view .lesson-rail .backlink { grid-column:1; grid-row:auto; }
.app-shell .vocab { border:0; gap:9px; }
.app-shell .vocab div { padding:14px 17px; border:0; border-radius:18px; background:rgb(255 255 255 / 80%); }
.app-shell .grammar { background:#f2efff; color:var(--landing-ink); }
.app-shell .grammar>span, .app-shell .question>span { color:#7965cf; }
.app-shell .practice { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.app-shell .practice .soft { color:#735fc9; }

@media (max-width: 760px) {
  .app-shell .dashboard, .app-shell .lesson-view { display:grid; grid-template-columns:1fr; }
  .app-shell .dashboard>.lesson-card, .app-shell .dashboard>.share, .app-shell .dashboard>.speech, .app-shell .dashboard>.progress, .app-shell .dashboard>.plan, .app-shell .lesson-view .lesson-card, .app-shell .lesson-view .backlink, .lesson-rail { grid-column:1; grid-row:auto; }
  .app-shell .lesson-card h1, .app-shell .lesson-view .lesson-card h1 { font-size:29px; }
}