/* 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 #fff;
  border-radius: 30px;
  background: #fff;
  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%); }

/* 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 { min-width:96px; justify-content:center; font-variant-numeric:tabular-nums; padding:7px 13px; border-radius:999px; background:#fff; box-shadow:0 6px 18px rgb(93 70 150 / 10%); }
.app-shell .locale { min-width:54px; border:0; background:#f0ecff; color:#705ac5; text-align:center; }
.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:22px; }
.flow-progress.is-idle { visibility:hidden; }
.flow-progress { height:8px; overflow:hidden; border-radius:999px; background:#f4f1fd; }
.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:#fff; 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):not(.tutor-error), .flow-shell .step-pane>p:not(.step):not(.tutor-error) { 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; }
.step-stack { display:grid; }
.step-pane { grid-area:1 / 1; min-width:0; }
.step-pane[inert] { visibility:hidden; }
.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 { grid-template-columns:minmax(0,1fr); align-items:start; }
.app-shell .lesson-card, .app-shell .speech, .app-shell .progress, .app-shell .plan { border:1px solid #fff; background:#fff; box-shadow:0 18px 38px rgb(89 71 141 / 12%); }
.app-shell .dashboard>* { grid-column:1; }
.app-shell .dashboard>.lesson-card { padding:32px; }
.app-shell .dashboard>.speech { padding:25px; display:grid; }
.app-shell .dashboard>.progress { padding:23px; }
.app-shell .dashboard>.plan { 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 .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)); }
.bottom-nav { display:flex; gap:8px; margin:22px 0 0; padding:8px; border-radius:18px; background:#fff; box-shadow:0 10px 24px rgb(89 71 141 / 8%); }
.bottom-nav button { flex:1; padding:10px 8px; border-radius:12px; background:transparent; color:#746f88; font-size:12px; font-weight:850; }
.bottom-nav button.active { color:white; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.pilot-page { max-width:760px; margin:0 auto; }
.pilot-head { margin:0 0 24px; }
.pilot-head>.eyebrow, .profile-page>.eyebrow { margin-top:0; }
.pilot-head h1, .profile-page h1 { margin:6px 0 10px; color:var(--landing-ink); font-size:36px; letter-spacing:-.05em; }
.pilot-head>p:last-child { max-width:610px; margin:0; color:var(--landing-muted); line-height:1.5; }
.path-list, .vocab-list { display:grid; gap:10px; }
.path-row, .vocab-list article, .pilot-note, .review-callout, .carlos-chat, .profile-stats article { border-radius:22px; background:#fff; box-shadow:0 12px 28px rgb(89 71 141 / 9%); }
.path-row { width:100%; border:0; font:inherit; color:inherit; text-align:left; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:14px; padding:15px; }
.path-row>span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#efeef4; color:#9a96a4; font-weight:900; }
.path-row.complete>span { color:#167652; background:#dcf5e6; }
.path-row.current { outline:2px solid #a98de8; }
.path-row.current>span { color:white; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.path-row b, .vocab-list b { display:block; color:var(--landing-ink); }
.path-row small, .vocab-list small { display:block; margin-top:4px; color:var(--landing-muted); }
.path-row em { color:#8a84a2; font-size:12px; font-style:normal; font-weight:800; }
.pilot-note { display:grid; gap:8px; margin-top:20px; padding:22px; color:var(--landing-muted); }
.pilot-note b { color:var(--landing-ink); }
.pilot-note p { margin:0; line-height:1.45; }
.pilot-note .primary { justify-self:start; margin-top:5px; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.review-callout { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; margin-bottom:16px; }
.review-callout b, .review-callout span { display:block; }
.review-callout span { margin-top:4px; color:var(--landing-muted); font-size:13px; }
.review-callout .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); white-space:nowrap; }
.vocab-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vocab-list article { padding:17px; }
.vocab-list article>span { display:block; margin-top:4px; color:#745dcc; }
.topic-row { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.topic-row button { padding:9px 13px; border-radius:999px; background:#f0edff; color:#705bc4; font-weight:800; }
.carlos-chat { display:grid; gap:14px; padding:22px; }
.carlos-chat p { margin:0; color:var(--landing-muted); line-height:1.5; }
.carlos-chat p b { color:var(--landing-ink); }
.carlos-chat textarea { min-height:100px; resize:vertical; border:1px solid #ded6ef; border-radius:16px; padding:14px; background:#fbfaff; }
.carlos-chat .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.text-action { margin-top:15px; padding:0; color:#705bc4; background:transparent; font-weight:850; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.profile-stats article { padding:20px; }
.profile-stats b { display:block; color:#735dd0; font-size:29px; }
.profile-stats span { color:var(--landing-muted); font-size:12px; }

.app-shell .lesson-view { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
.app-shell .lesson-view .lesson-card { padding:32px; }
.app-shell .lesson-view .lesson-card h1 { font-size:36px; }
.lesson-rail { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; }
.rail-card { padding:24px; border-radius:30px; background:#fff; 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 { color:var(--landing-ink); }
.app-shell .vocab { border:0; gap:9px; }
.app-shell .vocab div { padding:14px 17px; border:0; border-radius:18px; background:#fff; }
.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 .lesson-card h1, .app-shell .lesson-view .lesson-card h1 { font-size:29px; }
  .app-shell .page { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
  /* Five equal, always-visible tabs: nothing scrolls, so the active tab can never sit off-screen. */
  .bottom-nav { position:fixed; left:18px; right:18px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); transform:translate3d(0, calc(-1 * var(--vv-bottom, 0px)), 0); transition:transform .2s ease-out; will-change:transform; z-index:3; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0; padding:4px; background:#fff; box-shadow:0 10px 28px rgb(89 71 141 / 22%); }
  .bottom-nav button { min-width:0; padding:10px 0; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vocab-list { grid-template-columns:1fr; }
  .profile-stats { gap:8px; }
  .profile-stats article { padding:14px; }
  .profile-stats b { font-size:22px; }
  .profile-lesson-actions { width:100%; }
  .profile-lesson-actions>* { flex:1 1 auto; }
  .review-callout { align-items:flex-start; flex-direction:column; }
}

@media (min-width: 761px) {
  /* A persistent shell: the nav rail and content column each keep one fixed
     place on screen, so switching tabs never moves or resizes them — only
     what's inside the content column changes. */
  .app-shell .page { display:grid; grid-template-columns:212px minmax(0,1fr); grid-template-areas:"header header" "nav content"; column-gap:28px; align-items:start; }
  .app-shell .page > .topbar { grid-area:header; }
  .app-shell .page > .dashboard, .app-shell .page > .pilot-page, .app-shell .page > .tutor-page, .app-shell .page > .lesson-view { grid-area:content; min-width:0; }
  .app-shell .pilot-page { max-width:none; margin:0; }
  .app-shell .bottom-nav { grid-area:nav; position:sticky; top:24px; flex-direction:column; align-items:stretch; gap:4px; margin:0; padding:10px; align-self:start; }
  .app-shell .bottom-nav button { flex:none; text-align:left; padding:12px 14px; }
}

@media (min-width: 1080px) {
  /* Two columns only once the content column is wide enough (~800px); below that one column keeps every card readable. */
  .app-shell .dashboard { grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr); }
  .app-shell .dashboard>.lesson-card { grid-column:1; grid-row:1 / span 2; }
  .app-shell .dashboard>.speech { grid-column:2; grid-row:1; }
  .app-shell .dashboard>.progress { grid-column:2; grid-row:2; }
  .app-shell .dashboard>.plan { grid-column:2; grid-row:3; }
  .app-shell .lesson-view { grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr); }
  .app-shell .lesson-view .lesson-card { grid-column:1; }
  .app-shell .lesson-view .lesson-rail { grid-column:2; }
}

.profile-page .logout { margin-top:22px; }

@media (max-width: 440px) {
  .app-shell .streak { min-width:52px; }
  .app-shell .user-tools { gap:8px; }
  .app-shell .locale { min-width:46px; }
  .app-shell .brand small { white-space:nowrap; font-size:10px; }
}

@media (max-width: 360px) {
  .bottom-nav button { font-size:9px; }
}

/* Avatar: a button in the header (opens the profile), a plain circle in the profile itself. */
.avatar { flex:none; padding:0; overflow:hidden; border:0; }
.avatar img { display:block; width:100%; height:100%; object-fit:cover; }
button.avatar { cursor:pointer; transition:box-shadow .15s; }
button.avatar:hover { box-shadow:0 0 0 3px rgb(115 85 233 / 22%); }
button.avatar:focus-visible { outline:2px solid var(--landing-violet); outline-offset:2px; }
.avatar-lg { width:88px; height:88px; font-size:26px; }

/* Profile page */
.profile-head { display:flex; align-items:center; gap:18px; margin:6px 0 20px; }
.profile-head h1 { margin:0 0 4px; }
.profile-head p { margin:0; overflow-wrap:anywhere; }
.profile-page .profile-lesson { margin:20px 0 0; }
.profile-lesson-actions { display:flex; flex-wrap:wrap; gap:10px; }
.profile-lesson-actions .primary { white-space:nowrap; }
.settings { display:grid; gap:14px; margin-top:28px; }
.settings>h2 { margin:0; color:var(--landing-ink); font-size:22px; letter-spacing:-.03em; }
.settings-card { display:grid; gap:14px; padding:22px; border-radius:22px; background:#fff; box-shadow:0 12px 28px rgb(89 71 141 / 9%); min-width:0; }
.settings-card h3 { margin:0; color:var(--landing-ink); font-size:16px; }
.settings-card p { margin:0; }
.settings-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.settings-card label { display:grid; gap:6px; min-width:0; color:var(--landing-muted); font-size:12px; font-weight:800; }
.settings-card input:not([type="file"]) { width:100%; min-width:0; padding:13px 15px; border:2px solid #ded6ef; border-radius:16px; background:#fff; color:var(--landing-ink); font-size:15px; outline:0; }
.settings-card input:not([type="file"]):focus { border-color:#a588ea; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; }
.settings-card .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.settings-card .secondary:disabled { opacity:1; background:#f1f3f8!important; color:#a5adbf; cursor:not-allowed; }
/* The status line always occupies one line, so messages appearing never push the form. */
.form-status { min-height:20px; font-size:13px; line-height:20px; color:var(--landing-muted); }
.form-status.ok { color:#167652; }
.form-status.err { color:#9d3e48; }
.photo-card { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px; }
.photo-card .settings-actions { margin-top:12px; }

/* Photo cropper modal: a true overlay above the page, so it is fixed by nature. */
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:18px; background:#273154; }
.modal-card { display:grid; gap:16px; width:min(100%, 372px); max-height:100%; overflow:auto; padding:22px; border-radius:28px; background:#fff; box-shadow:0 30px 60px rgb(39 49 84 / 30%); }
.modal-card h2 { margin:0; color:var(--landing-ink); font-size:22px; letter-spacing:-.03em; }
.modal-card p { margin:0; }
.modal-card .actions { margin-top:0; }
.crop-stage { position:relative; width:min(100%, 280px); aspect-ratio:1; margin:0 auto; overflow:hidden; border-radius:22px; background:#efeaf8; cursor:grab; touch-action:none; user-select:none; }
.crop-stage.dragging { cursor:grabbing; }
.crop-stage canvas { display:block; width:100%; height:100%; }
.crop-stage::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 999px rgb(255 255 255 / 58%); pointer-events:none; }
.crop-controls { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; }
.crop-controls input[type="range"] { width:100%; accent-color:var(--landing-violet); }
.icon-btn { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#f0ecff; color:#705ac5; font-size:20px; }

@media (max-width: 440px) {
  .avatar-lg { width:72px; height:72px; font-size:22px; }
  .photo-card { gap:14px; }
}
.card label .field-hint{display:block;font-size:12px;font-weight:600;line-height:1.4;color:var(--muted)}

/* Reading block inside a lesson: tap a word or phrase to see its translation. */
.app-shell .reading { margin:28px 0; }
.app-shell .reading h2 { margin:6px 0 4px; font-size:20px; color:var(--landing-ink); }
.app-shell .reading .rd-eyebrow { color:#7965cf; font-size:11px; font-weight:900; letter-spacing:.1em; }
.app-shell .reading .rd-hint { margin:0 0 14px; color:var(--landing-muted); font-size:13px; line-height:1.45; }
.rd-image { display:block; width:100%; max-height:280px; object-fit:cover; border-radius:16px; margin:0 0 14px; }
.rd-text { display:grid; gap:12px; }
.rd-line { margin:0; font-size:18px; line-height:2; color:var(--landing-ink); overflow-wrap:anywhere; }
.rw { display:inline; margin:0; padding:0; border:0; border-bottom:2px dotted #b9aaf1; border-radius:4px; background:none; font:inherit; color:inherit; cursor:pointer; transition:background .15s; }
.rd-nb { white-space:nowrap; }
.rw:hover { background:#f3f0ff; box-shadow:0 0 0 3px #f3f0ff; }
.rw:focus-visible { outline:2px solid var(--landing-violet); outline-offset:1px; }
.rw.is-selected { background:#e6dfff; box-shadow:0 0 0 3px #e6dfff; border-bottom-color:var(--landing-violet); }
.rd-panel { display:grid; margin-top:14px; padding:14px 16px; border-radius:16px; background:#f2efff; }
.rd-card { grid-area:1 / 1; display:grid; align-content:start; gap:4px; min-width:0; visibility:hidden; color:var(--landing-ink); overflow-wrap:anywhere; }
.rd-card.is-active { visibility:visible; }
.rd-card b { font-size:16px; color:var(--landing-violet); }
.rd-card span { font-size:17px; font-weight:700; }
.rd-card small { font-size:13px; line-height:1.4; color:var(--landing-muted); }
.rd-card[data-card="none"] span { font-size:14px; font-weight:600; color:var(--landing-muted); }
.rd-more { margin-top:12px; border-top:1px solid #efeaff; padding-top:10px; }
.rd-more summary { cursor:pointer; font-size:13px; font-weight:800; color:#7965cf; }
.rd-glossary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; margin:12px 0 0; padding:0; list-style:none; }
.rd-glossary li { display:grid; gap:1px; min-width:0; padding:6px 0; border-bottom:1px solid #f1eefc; overflow-wrap:anywhere; }
.rd-glossary b { font-size:14px; color:var(--landing-ink); }
.rd-glossary span { font-size:13px; color:var(--landing-muted); }
.rd-full { display:grid; gap:10px; margin-top:12px; }
.rd-full p { margin:0; font-size:13px; line-height:1.5; color:var(--landing-muted); }
.rd-full span { font-size:14px; font-weight:700; color:var(--landing-ink); }
@media (max-width:440px) { .rd-glossary { grid-template-columns:1fr; } .rd-line { font-size:17px; } }

/* Add-to-vocabulary buttons in the reading block. */
.rd-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.rd-add, .rd-add-all { margin:0; padding:6px 12px; border:1px solid #d9cffa; border-radius:999px; background:#fff; color:#6f57d6; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
.rd-add:disabled, .rd-add-all:disabled { border-color:#cdeadb; background:#effaf4; color:#167652; cursor:default; }
.rd-add-all { margin-top:12px; }
.rd-glossary li { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rd-glossary li>div { display:grid; gap:1px; min-width:0; }

/* Vocabulary page. */
.vocab-page { display:grid; gap:16px; align-content:start; }
.vocab-page .review-callout { margin-bottom:0; }
.review-callout .secondary { white-space:nowrap; }
.vocab-filter { display:flex; flex-wrap:wrap; gap:8px; }
.vocab-filter button { padding:8px 14px; border:1px solid #ded6ef; border-radius:999px; background:#fff; color:var(--landing-muted); font-size:13px; font-weight:800; }
.vocab-filter button.is-active { border-color:transparent; background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); color:#fff; }
.vocab-list article { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-width:0; }
.vw-main { display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; }
.vw-main span { color:#745dcc; }
.vw-main small { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.vw-main em { font-style:normal; font-size:12px; color:var(--landing-muted); }
.chip { padding:2px 8px; border-radius:999px; font-size:11px; font-style:normal; font-weight:800; background:#efeaff; color:#6f57d6; }
.chip-learning { background:#fff3d9; color:#98620b; }
.chip-known { background:#dcf5e8; color:#167652; }
.chip-due { background:#ffe6e8; color:#a23842; }
.vw-actions { display:flex; gap:6px; flex:0 0 auto; }
.vw-btn { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; padding:0; border-radius:50%; background:#f5f2fc; color:#8b84a3; line-height:1; transition:transform .15s,background .15s,color .15s; }
.vw-btn .preview-icon { display:block; }
.vw-btn:hover { background:#ece7fb; color:#6f57d6; }
.vw-btn:focus-visible { outline:3px solid #cfc6fa; outline-offset:2px; }
.vw-btn:active { transform:scale(.96); }
.vw-del:hover { background:#ffe6e8; color:#a23842; }
.vocab-empty { margin:0; text-align:center; color:var(--landing-muted); font-size:14px; }

/* Vocabulary practice. */
.practice-page { display:grid; gap:14px; align-content:start; }
.vp-card { display:grid; gap:14px; padding:24px; border-radius:26px; background:#fff; box-shadow:0 18px 38px rgb(89 71 141 / 12%); min-width:0; }
.vp-progress { height:8px; border-radius:99px; background:#ece7fb; overflow:hidden; }
.vp-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--landing-violet),var(--landing-sky)); transition:width .3s; }
.vp-count { margin:0; font-size:12px; font-weight:800; color:var(--landing-muted); }
.vp-label { margin:0; font-size:13px; font-weight:800; color:#7965cf; letter-spacing:.04em; }
.vp-word { margin:0; font-size:clamp(28px,7vw,40px); line-height:1.1; letter-spacing:-.03em; color:var(--landing-ink); overflow-wrap:anywhere; }
.vp-options { display:grid; gap:10px; }
.vp-options button { padding:15px 16px; border:2px solid #e3dcf6; border-radius:16px; background:#fff; color:var(--landing-ink); font-size:16px; font-weight:750; text-align:left; overflow-wrap:anywhere; }
.vp-options button:disabled { cursor:default; }
.vp-options button.correct { border-color:#73d2a1; background:#ddf7e9; color:#117146; }
.vp-options button.wrong { border-color:#f4a4aa; background:#ffe6e7; color:#ac3440; }
.vp-card input { width:100%; min-width:0; padding:15px 16px; border:2px solid #ded6ef; border-radius:16px; background:#fff; color:var(--landing-ink); font-size:18px; outline:0; }
.vp-card input:focus { border-color:#a588ea; }
.vp-card .vp-typed.ok { border-color:#73d2a1; background:#ddf7e9; }
.vp-card .vp-typed.bad { border-color:#f4a4aa; background:#ffe6e7; }
.vp-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.vp-actions>* { flex:1 1 140px; }
.vp-card .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.vp-feedback { display:grid; gap:4px; padding:14px 16px; border-radius:16px; font-size:15px; }
.vp-feedback.ok { background:#ddf7e9; color:#117146; }
.vp-feedback.bad { background:#ffe6e7; color:#ac3440; }
.vp-feedback em { display:block; margin-top:2px; font-style:normal; font-size:13px; }
.vp-done h2 { margin:0; font-size:28px; color:var(--landing-ink); }

/* Translation practice inside a lesson: text on the lesson card and one soft panel, nothing framed twice. */
.app-shell .translate { display:grid; gap:10px; margin:28px 0; min-width:0; }
.app-shell .translate h2 { margin:0; font-size:20px; color:var(--landing-ink); }
.tr-eyebrow { color:#7965cf; font-size:11px; font-weight:900; letter-spacing:.1em; }
.tr-scene { margin:0 0 4px; color:var(--landing-muted); font-size:14px; line-height:1.5; }
.tr-card { display:grid; gap:16px; padding:22px; border-radius:24px; background:linear-gradient(160deg,#f3efff,#eaf5ff); min-width:0; }
.tr-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tr-step { margin:0; font-size:12px; font-weight:800; color:#7a72a0; white-space:nowrap; }
.tr-dots { display:flex; gap:5px; }
.tr-dot { width:18px; height:5px; border-radius:99px; background:#d9d2f3; }
.tr-dot.is-current { background:#8f78ea; }
.tr-dot.is-ok { background:#59c68f; }
.tr-dot.is-almost { background:#f0b94a; }
.tr-dot.is-bad { background:#ee8f98; }
.tr-source { margin:0; font-size:22px; font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--landing-ink); overflow-wrap:anywhere; }
.tr-form { display:grid; gap:12px; }
.tr-card input { width:100%; min-width:0; padding:15px 18px; border:2px solid transparent; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgb(89 71 141 / 8%); color:var(--landing-ink); font-size:16px; outline:0; transition:border-color .15s; }
.tr-card input:focus { border-color:#a588ea; }
.tr-card .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.tr-typed.is-ok { border-color:#59c68f; }
.tr-typed.is-almost { border-color:#f0b94a; }
.tr-typed.is-bad { border-color:#ee8f98; }
.tr-feedback { display:grid; gap:8px; font-size:15px; line-height:1.5; color:var(--landing-ink); overflow-wrap:anywhere; }
.tr-feedback p { margin:0; }
.tr-feedback b { justify-self:start; padding:3px 11px; border-radius:999px; font-size:12px; }
.tr-feedback.is-ok b { background:#d5f3e4; color:#0f6b46; }
.tr-feedback.is-almost b { background:#fdeec8; color:#8a5a08; }
.tr-feedback.is-bad b { background:#fddde0; color:#a23842; }
.tr-ideal { display:grid; gap:2px; padding-top:10px; border-top:1px solid rgb(122 114 160 / 18%); }
.tr-ideal span { font-size:12px; font-weight:700; color:#7a72a0; }
.tr-ideal strong { font-size:16px; color:var(--landing-ink); }
.tr-done h3 { margin:0; font-size:22px; color:var(--landing-ink); }
.tr-summary { display:grid; margin:0; padding:0; list-style:none; }
.tr-summary li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid rgb(122 114 160 / 18%); }
.tr-summary li>span { flex:0 0 auto; font-weight:900; }
.tr-summary li.is-ok>span { color:#0f6b46; }
.tr-summary li.is-almost>span { color:#8a5a08; }
.tr-summary li.is-bad>span { color:#a23842; }
.tr-summary b { display:block; color:var(--landing-ink); }
.tr-summary small { color:var(--landing-muted); }

/* Lesson sections: one header pattern (number, name, subtitle) and a hairline between sections, so each part stands apart. */
.app-shell .lesson-card > .lsec { margin:0; min-width:0; }
.app-shell .lesson-card > .lsec + .lsec { margin-top:34px; padding-top:30px; border-top:1px solid #ebe6f8; }
.sec-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.sec-num { display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); color:#fff; font-size:14px; font-weight:900; }
.sec-head h2 { margin:0; font-size:19px; letter-spacing:-.02em; color:var(--landing-ink); }
.sec-head p { margin:2px 0 0; font-size:13px; color:var(--landing-muted); }
.lsec .vocab { margin:0; }
.lsec .grammar { margin:0; }
.lsec .practice { margin:0; }
.app-shell .reading, .app-shell .translate { margin:0; }
.app-shell .reading h2, .app-shell .translate h2 { font-size:19px; }
.app-shell .translate { gap:12px; }
.app-shell .reading .sec-head h2, .app-shell .translate .sec-head h2 { margin:0; }

/* "Как учиться": a collapsed bar (open on demand); below the two-column layout it moves to the top of the lesson page. */
.rail-howto { padding:0; overflow:hidden; }
.rail-howto summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; cursor:pointer; list-style:none; font-size:16px; font-weight:800; color:var(--landing-ink); }
.rail-howto summary::-webkit-details-marker { display:none; }
.rail-howto summary::after { content:''; flex:0 0 auto; width:8px; height:8px; margin-right:4px; border-right:2px solid #735dd0; border-bottom:2px solid #735dd0; transform:rotate(45deg); transition:transform .2s; }
.rail-howto[open] summary::after { transform:rotate(-135deg); }
.rail-howto ol { margin:0; padding:0 24px 22px 44px; color:var(--landing-muted); font-size:14px; line-height:1.6; }
.rail-howto li { padding-left:4px; }
@media (max-width: 1079px) {
  .app-shell .lesson-view .lesson-rail { display:contents; }
  .app-shell .lesson-view .rail-howto { order:-1; }
}
.app-shell .lesson-card > h1 + .lsec { margin-top:26px; }

/* Editing a vocabulary word inline. */
.vocab-list article.is-editing { display:block; }
.vw-edit { display:grid; gap:12px; }
.vw-edit label { display:grid; gap:6px; min-width:0; color:var(--landing-muted); font-size:12px; font-weight:800; }
.vw-edit input { width:100%; min-width:0; padding:12px 14px; border:2px solid #ded6ef; border-radius:14px; background:#fff; color:var(--landing-ink); font-size:15px; outline:0; }
.vw-edit input:focus { border-color:#a588ea; }
.vw-edit .form-status { min-height:0; margin:0; }
.vw-edit .form-status:empty { display:none; }
.vw-edit-actions { display:flex; flex-wrap:wrap; gap:10px; }
.vw-edit-actions>* { flex:1 1 120px; }
.vw-edit .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.vocab-tip { margin:0; color:var(--landing-muted); font-size:12px; line-height:1.45; }

/* Articles by gender and number, as text colour only: masculine blue, feminine pink, plural green. */
.art { font-weight:800; }
.art.art-m { color:#1f63c6; }
.art.art-f { color:#d0327f; }
.art.art-p { color:#16804f; }

/* Level check: the profile card and the assessment screens. */
.level-card { display:grid; gap:14px; padding:22px; margin:16px 0; border-radius:22px; background:#fff; box-shadow:0 12px 28px rgb(89 71 141 / 9%); min-width:0; }
.level-card h3 { margin:0; font-size:18px; color:var(--landing-ink); }
.level-card p { margin:0; }
.lv-eyebrow { color:#7965cf; font-size:11px; font-weight:900; letter-spacing:.1em; }
.lv-row { display:flex; align-items:center; gap:14px; min-width:0; }
.lv-row b { display:block; font-size:17px; color:var(--landing-ink); }
.lv-row span:not(.lv-badge) { display:block; margin-top:2px; font-size:13px; color:var(--landing-muted); }
.lv-badge { display:grid; place-items:center; flex:0 0 auto; width:54px; height:54px; border-radius:18px; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); color:#fff; font-size:20px; font-weight:900; letter-spacing:-.02em; }
.lv-badge.is-pending { background:#e7e1fb; color:#6f57d6; }
.lv-badge.lv-big { width:72px; height:72px; border-radius:24px; font-size:28px; }
.lv-text { font-size:14px; line-height:1.55; color:var(--landing-ink); }
.lv-text b { color:#6f57d6; }
.lv-actions { display:flex; flex-wrap:wrap; gap:10px; }
.lv-actions>* { flex:1 1 180px; }
.lv-actions .primary, .lv-page .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.lv-link { padding:0; background:none; color:#6f57d6; font-weight:800; text-decoration:underline; }
.lv-page .tutor-head h1 { font-size:clamp(26px,6vw,36px); }
.lv-intro, .lv-result, .lv-done, .lv-analyzing { display:grid; gap:16px; min-width:0; }
.lv-intro h2, .lv-done h2, .lv-analyzing h2 { margin:0; font-size:22px; color:var(--landing-ink); }
.lv-steps { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:step; }
.lv-steps li { position:relative; padding-left:40px; font-size:14px; line-height:1.5; color:var(--landing-muted); counter-increment:step; }
.lv-steps li::before { content:counter(step); position:absolute; left:0; top:0; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#efeaff; color:#6f57d6; font-size:13px; font-weight:900; }
.lv-steps b { color:var(--landing-ink); }
.lv-progress { display:grid; gap:8px; margin:6px 0 4px; }
.lv-progress span { font-size:12px; font-weight:800; color:var(--landing-muted); }
.lv-bar { height:6px; border-radius:99px; background:#e7e1fb; overflow:hidden; }
.lv-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--landing-violet),var(--landing-sky)); transition:width .3s; }
.lv-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.lv-columns>div { padding:14px 16px; border-radius:16px; background:#f4f1ff; }
.lv-columns .is-good { background:#e6f6ee; }
.lv-columns b { display:block; margin-bottom:6px; font-size:13px; color:var(--landing-ink); }
.lv-columns ul { margin:0; padding-left:18px; font-size:14px; line-height:1.55; color:var(--landing-ink); }
.lv-evidence { display:grid; gap:10px; }
.lv-evidence>b { font-size:13px; color:var(--landing-ink); }
.lv-evidence blockquote { margin:0; padding:2px 0 2px 14px; border-left:3px solid #cfc4f5; font-size:15px; font-weight:700; color:var(--landing-ink); }
.lv-evidence blockquote span { display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--landing-muted); }
.lv-analyzing, .lv-done { justify-items:center; text-align:center; padding:16px 0; }
.lv-done .primary { width:100%; }
.lv-status-icon { display:grid; place-items:center; min-height:44px; }
.lv-fail-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fdeceb; color:#b3372f; font-weight:900; font-size:20px; }
.lv-stack { display:grid; margin:0; }
.lv-stack>span { grid-area:1/1; }
.lv-stack>.is-off { visibility:hidden; }
.lv-analyzing p.lv-stack { color:var(--muted); }
.lv-fail-detail { font-size:13px; }
.lv-retry.is-idle { visibility:hidden; }

/* Space between the speaking card and the button that finishes the lesson. */
.app-shell .lesson-card > #complete { margin-top:32px; }

/* Grammar map in the level result. */
.lv-grammar { display:grid; gap:10px; }
.lv-grammar>b { font-size:13px; color:var(--landing-ink); }
.lv-grammar small { font-size:12px; color:var(--landing-muted); }
.lv-gr { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:start; }
.lv-gr>span { padding-top:4px; font-size:12px; font-weight:800; }
.lv-gr>div { display:flex; flex-wrap:wrap; gap:6px; }
.lv-gr i { padding:4px 10px; border-radius:999px; font-size:12px; font-style:normal; font-weight:700; }
.lv-gr.is-solid>span { color:#0f6b46; } .lv-gr.is-solid i { background:#d5f3e4; color:#0f6b46; }
.lv-gr.is-shaky>span { color:#8a5a08; } .lv-gr.is-shaky i { background:#fdeec8; color:#8a5a08; }
.lv-gr.is-weak>span { color:#a23842; } .lv-gr.is-weak i { background:#fddde0; color:#a23842; }

/* Buttons at the bottom of the Carlos chat and its summary; the gap keeps them from touching. */
.tutor-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.tutor-actions .tutor-finish { margin-top:0; }
.tutor-summary .tutor-actions { margin-top:4px; }
.tutor-summary .tutor-actions button { flex:1 1 150px; }
/* "Show more" under a long vocabulary list. */
.vocab-more { width:100%; margin-top:2px; }

/* ---- Statistics on the profile ---- */
.stats { display:grid; gap:16px; margin:16px 0; min-width:0; }
.st-title { margin:0; font-size:22px; color:var(--landing-ink); }
.st-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px; border-radius:26px; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); color:#fff; box-shadow:0 18px 38px rgb(89 71 141 / 22%); }
.st-rank { display:grid; gap:4px; min-width:0; }
.st-rank-label { font-size:11px; font-weight:900; letter-spacing:.1em; color:#e6e9ff; text-transform:uppercase; }
.st-rank>b { font-size:30px; letter-spacing:-.03em; line-height:1.1; }
.st-xp { font-size:15px; font-weight:800; }
.st-rank small { font-size:12px; color:#eceeff; }
/* A meter everywhere reads the same way: a light track (empty) and a coloured fill. Only the purple rank card inverts it, because a coloured
   fill would vanish on its purple background. */
.st-bar { height:8px; border-radius:99px; background:#ece7fb; overflow:hidden; }
.st-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--landing-violet),var(--landing-sky)); transition:width .4s; }
.st-hero .st-bar { background:#9aa6f2; }
.st-hero .st-bar i { background:#fff; }
.st-ring { position:relative; flex:0 0 auto; width:88px; height:88px; }
.st-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.st-ring circle { fill:none; stroke-width:8; }
.st-ring-bg { stroke:rgb(255 255 255 / 28%); }
.st-ring-fg { stroke:#fff; stroke-linecap:round; transition:stroke-dasharray .5s; }
.st-ring span { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:12px; font-weight:700; }
.st-ring b { font-size:24px; line-height:1; }
.st-goal { margin:-4px 2px 0; font-size:13px; color:var(--landing-muted); }
.st-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.st-tiles article { display:grid; gap:2px; padding:16px; border-radius:22px; background:#fff; box-shadow:0 12px 28px rgb(89 71 141 / 9%); min-width:0; }
.st-tiles article>span { font-size:22px; }
.st-tiles b { font-size:28px; letter-spacing:-.03em; color:var(--landing-ink); line-height:1.1; }
.st-tiles b i { font-style:normal; font-size:16px; color:var(--landing-muted); }
.st-tiles small { font-size:13px; font-weight:700; color:var(--landing-ink); }
.st-tiles em { font-style:normal; font-size:12px; color:var(--landing-muted); }
.st-tiles .is-fire { background:linear-gradient(160deg,#fff4e8,#ffe9e2); }
.st-card { display:grid; gap:12px; padding:20px; border-radius:22px; background:#fff; box-shadow:0 12px 28px rgb(89 71 141 / 9%); min-width:0; }
.st-card h3 { margin:0; font-size:16px; color:var(--landing-ink); }
.st-count { margin-left:6px; padding:2px 9px; border-radius:999px; background:#efeaff; color:#6f57d6; font-size:12px; font-weight:800; }
.st-week { display:flex; align-items:flex-end; gap:8px; height:118px; }
.st-day { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; flex:1 1 0; height:100%; padding:0; background:none; min-width:0; }
.st-day i { display:block; width:100%; border-radius:8px 8px 4px 4px; background:#d9d2f3; transition:background .2s; }
.st-day span { font-size:11px; font-weight:800; color:var(--landing-muted); }
.st-day.is-goal i { background:#59c68f; }
.st-day.is-selected i { background:linear-gradient(180deg,var(--landing-sky),var(--landing-violet)); }
.st-week.is-static .st-day i { background:#b9aaf1; }
.st-caption { margin:0; font-size:12px; color:var(--landing-muted); }
.st-heatmap { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.st-heat { aspect-ratio:1; border-radius:6px; background:#efeaff; }
.st-heat.l1 { background:#d5c9fa; } .st-heat.l2 { background:#b39cf5; } .st-heat.l3 { background:#8f74ee; } .st-heat.l4 { background:#6a4de0; }
.st-meter { display:grid; gap:6px; }
.st-meter>div:first-child { display:flex; justify-content:space-between; font-size:14px; color:var(--landing-ink); }
.st-meter small { font-size:12px; color:var(--landing-muted); }
.st-card.is-focus { background:linear-gradient(160deg,#fff8e9,#fff1e2); }
.st-mistake { display:grid; gap:2px; margin:0; font-size:16px; }
.st-mistake span { color:#a23842; text-decoration:line-through; text-decoration-color:#e9a3aa; }
.st-mistake b { color:#117146; }
.st-card.is-focus small { font-size:12px; color:var(--landing-muted); }
.st-badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.st-badge { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:16px; background:#f7f5fd; min-width:0; }
.st-badge:not(.is-earned) > span { filter:grayscale(1); }
.st-badge:not(.is-earned) b, .st-badge:not(.is-earned) small, .st-badge:not(.is-earned) em { color:#8b87a3; }
.st-badge>span { font-size:26px; filter:grayscale(1); }
.st-badge>div { display:grid; gap:3px; min-width:0; flex:1; }
.st-badge b { font-size:14px; color:var(--landing-ink); }
.st-badge small { font-size:12px; color:var(--landing-muted); }
.st-badge em { font-style:normal; font-size:11px; font-weight:800; color:var(--landing-muted); }
.st-badge.is-earned { background:linear-gradient(160deg,#fff7dd,#ffeecf); }
.st-badge.is-earned>span { filter:none; }
.st-badge.is-earned em { color:#8a5a08; }
@media (min-width:640px) { .st-tiles { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---- Friends ---- */
.friends-page { display:grid; gap:22px; align-content:start; }
.friends-page h1 { margin:0; }
.fr-section { display:grid; gap:12px; min-width:0; }
.fr-section h2 { margin:0; font-size:19px; color:var(--landing-ink); }
.fr-sub { margin:4px 0 0; font-size:14px; color:var(--landing-ink); }
.fr-code { display:grid; gap:14px; padding:22px; border-radius:24px; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); color:#fff; }
.fr-label { font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#eceeff; }
.fr-code-value { display:block; margin:4px 0; font-size:32px; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.fr-code small { font-size:12px; color:#eceeff; line-height:1.4; }
.fr-code-actions { display:flex; flex-wrap:wrap; gap:10px; }
.fr-code-actions>* { flex:1 1 130px; }
.fr-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; }
.fr-toggle input { position:absolute; opacity:0; pointer-events:none; }
.fr-toggle span { position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:99px; background:#a2aef3; transition:background .2s; }
.fr-toggle span::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.fr-toggle input:checked+span { background:#59c68f; }
.fr-toggle input:checked+span::after { transform:translateX(18px); }
.fr-toggle input:focus-visible+span { outline:2px solid #fff; outline-offset:2px; }
.fr-toggle em { font-style:normal; font-size:14px; }
.fr-ava { display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:hsl(var(--h) 70% 90%); color:hsl(var(--h) 55% 32%); font-size:15px; font-weight:900; }
.fr-level { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; background:#efeaff; color:#6f57d6; font-size:11px; font-style:normal; font-weight:900; vertical-align:middle; }
.fr-search { display:flex; gap:10px; }
.fr-search input { flex:1; min-width:0; padding:13px 15px; border:2px solid #ded6ef; border-radius:16px; background:#fff; font-size:15px; color:var(--landing-ink); outline:0; }
.fr-search input:focus { border-color:#a588ea; }
.fr-search .primary, .fr-row .primary, .ch-actions .primary, .ch-form .primary, .fr-actions .primary, .db-invite, .debate-page .primary { background:linear-gradient(100deg,var(--landing-violet),var(--landing-sky)); }
.fr-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.fr-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:#fff; box-shadow:0 10px 24px rgb(89 71 141 / 8%); min-width:0; }
.fr-row>div:first-of-type { flex:1; min-width:0; overflow-wrap:anywhere; }
.fr-row button { flex:0 0 auto; padding:10px 14px; font-size:13px; }
.fr-actions { display:flex; gap:8px; flex:0 0 auto; }
.fr-badge { flex:0 0 auto; padding:6px 12px; border-radius:999px; background:#dcf5e8; color:#0f6b46; font-size:12px; font-weight:800; }
.fr-empty { margin:0; padding:16px; border-radius:16px; background:#f7f5fd; font-size:14px; line-height:1.5; color:var(--landing-muted); list-style:none; }
.fr-board { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.fr-board li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#fff; min-width:0; }
.fr-board li.is-me { background:linear-gradient(100deg,#efeaff,#e6f4ff); box-shadow:0 0 0 2px #cfc4f5 inset; }
.fr-board li>div { flex:1; display:grid; gap:6px; min-width:0; }
.fr-board b { font-size:14px; color:var(--landing-ink); overflow-wrap:anywhere; }
.fr-place { flex:0 0 26px; text-align:center; font-size:18px; font-weight:900; color:var(--landing-muted); }
.fr-xp { flex:0 0 auto; font-size:16px; font-weight:900; color:var(--landing-ink); text-align:right; }
.fr-xp small { display:block; font-size:10px; color:var(--landing-muted); }
.fr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.fr-card { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border-radius:18px; background:#fff; box-shadow:0 10px 24px rgb(89 71 141 / 8%); text-align:left; }
.fr-card>div { display:grid; gap:2px; min-width:0; }
.fr-card b { font-size:15px; color:var(--landing-ink); overflow-wrap:anywhere; }
.fr-card small { font-size:12px; color:var(--landing-muted); }
.fr-head { display:flex; align-items:center; gap:14px; }
.fr-head .fr-ava { width:60px; height:60px; font-size:20px; }
.fr-head h1 { font-size:28px; }
.fr-head p { margin:2px 0 0; }
.fr-head .fr-level { margin:0 6px 0 0; }
.fr-badges { display:flex; flex-wrap:wrap; gap:8px; font-size:26px; }
.fr-remove { justify-self:start; color:#a23842; }

/* ---- Comparison and challenges ---- */
.cmp-legend { display:flex; justify-content:space-between; font-size:13px; color:var(--landing-muted); }
.cmp { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.cmp-row { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#fff; }
.cmp-row>div { display:grid; gap:6px; text-align:center; min-width:0; }
.cmp-row b { font-size:12px; color:var(--landing-muted); }
.cmp-val { font-size:17px; font-weight:800; color:var(--landing-ink); text-align:center; }
.cmp-val.is-lead { color:#0f6b46; }
.cmp-val.is-lead::after { content:' 👑'; font-size:12px; }
.cmp-split, .ch-split { height:8px; border-radius:99px; background:#f4a7c2; overflow:hidden; }
.cmp-split i, .ch-split i { display:block; height:100%; background:linear-gradient(90deg,var(--landing-violet),var(--landing-sky)); }
.ch-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.ch-card { display:grid; gap:12px; padding:16px; border-radius:20px; background:#fff; box-shadow:0 10px 24px rgb(89 71 141 / 8%); min-width:0; }
.ch-card.is-active { background:linear-gradient(160deg,#f3efff,#eaf5ff); }
.ch-head { display:flex; align-items:center; gap:12px; }
.ch-head>span { font-size:26px; }
.ch-head>div { flex:1; display:grid; gap:2px; min-width:0; }
.ch-head b { font-size:15px; color:var(--landing-ink); }
.ch-head small { font-size:12px; color:var(--landing-muted); overflow-wrap:anywhere; }
.ch-head em { font-style:normal; font-size:12px; font-weight:800; color:#6f57d6; white-space:nowrap; }
.ch-head em.is-won { color:#0f6b46; } .ch-head em.is-lost { color:#a23842; }
.ch-text { margin:0; font-size:14px; line-height:1.5; color:var(--landing-muted); }
.ch-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ch-actions>* { flex:1 1 130px; }
.ch-versus { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; }
.ch-versus span { display:grid; text-align:center; font-size:11px; color:var(--landing-muted); overflow-wrap:anywhere; max-width:90px; }
.ch-versus b { font-size:22px; color:var(--landing-ink); }
.ch-form { display:grid; gap:12px; }
.ch-kinds { display:grid; gap:8px; }
.ch-kind input, .ch-days input { position:absolute; opacity:0; pointer-events:none; }
.ch-kind span, .ch-days span { display:block; padding:12px 14px; border:2px solid #ded6ef; border-radius:14px; background:#fff; font-size:14px; font-weight:700; color:var(--landing-ink); cursor:pointer; }
.ch-kind input:checked+span, .ch-days input:checked+span { border-color:var(--landing-violet); background:#f3efff; color:#6f57d6; }
.ch-kind input:focus-visible+span, .ch-days input:focus-visible+span { outline:2px solid var(--landing-violet); outline-offset:2px; }
.ch-days { display:flex; gap:10px; }
.ch-days label { flex:1; text-align:center; }
.fr-code .secondary { border:0; background:#fff; color:#6f57d6; font-weight:800; box-shadow:0 6px 16px rgb(45 30 110 / 18%); }
.fr-card .fr-level { justify-self:start; margin:2px 0 0; }

/* One-line explanation of which Carlos this is. */
.tutor-note { margin:0 0 14px; padding:11px 14px; border-radius:14px; background:#eaf6ff; color:#3d5f7c; font-size:13px; line-height:1.45; }
.tutor-note b { color:#1f4f7a; }
.tutor-note.is-companion { background:#f3efff; color:#5a4a99; }
.tutor-note.is-companion b { color:#4a36b8; }

/* Carlos inside section 6 of a lesson: no frame of its own, the section header already names it. */
.tutor-embed { display:grid; gap:12px; min-width:0; }
.tutor-embed .tutor-note { margin:0; }
.tutor-embed .tutor-summary { margin:0; }
.tutor-next { margin:12px 0 0; color:var(--muted); font-size:13px; text-align:center; }

/* The lesson list on the home tab: finished and current rows are buttons that open the lesson. */
button.path-row { cursor:pointer; }
.path-card .path-list { margin-top:14px; }
.path-card .pilot-note { margin-top:16px; padding:18px; background:#f6f3ff; }

/* Friend debates: the list, the lobby, the live debate and the verdict. Chat bubbles reuse the Carlos chat styles. */
.debate-page { display:grid; gap:14px; align-content:start; min-width:0; }
.db-head { display:flex; align-items:center; gap:14px; min-width:0; }
.db-icon { display:grid; place-items:center; flex:0 0 auto; width:48px; height:48px; border-radius:16px; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); font-size:24px; }
.db-head h1 { margin:2px 0 0; font-size:24px; line-height:1.15; overflow-wrap:anywhere; }
.db-head h1 small { font-size:14px; font-weight:700; color:var(--landing-muted); }
.db-topic { display:grid; gap:4px; padding:16px 18px; border-radius:20px; background:#f6f3ff; border:1px solid #e4dcfa; }
.db-topic b { font-size:18px; line-height:1.3; color:var(--landing-ink); overflow-wrap:anywhere; }
.db-topic p { margin:0; color:var(--landing-muted); font-size:14px; }
.db-roles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.db-role { display:grid; gap:4px; min-width:0; padding:12px 14px; border-radius:18px; background:#fff; border:1px solid #e4e9f2; }
.db-role span { font-size:13px; color:var(--landing-muted); overflow-wrap:anywhere; }
.db-role b { font-size:18px; letter-spacing:.04em; }
.db-role.is-for b { color:#167652; }
.db-role.is-against b { color:#b3372f; }
.db-role.is-mine { outline:2px solid #a98de8; }
.db-fair, .db-note, .db-wait { margin:0; font-size:14px; line-height:1.5; color:var(--landing-muted); }
.db-wait { padding:14px 16px; border-radius:18px; background:#f4f8fc; }
.db-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.db-clock { min-width:4ch; font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--landing-ink); }
.db-count { font-size:13px; color:var(--landing-muted); white-space:nowrap; }
.db-log { min-height:180px; }
.tutor-message.from-friend { justify-self:start; background:#fff7ec; border-color:#f3dcc0; border-bottom-left-radius:7px; }
.tutor-message.from-friend span { color:#b0702f; }
.db-ready { margin-top:4px; }
.db-judging { display:grid; justify-items:center; gap:8px; padding:18px; border-radius:20px; background:#f6f3ff; text-align:center; }
.db-judging p { margin:0; }
.db-invite { justify-self:start; }
.db-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:20px; font-size:18px; color:var(--landing-ink); background:#eef3fb; }
.db-banner span { font-size:30px; }
.db-banner.is-won { background:linear-gradient(120deg,#e3f7e9,#eaf7ff); }
.db-banner.is-lost { background:#f4f0ff; }
.db-scores { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.db-score-card { display:grid; gap:10px; align-content:start; min-width:0; padding:14px; border-radius:20px; background:#fff; border:1px solid #e4e9f2; }
.db-score-card.is-mine { border-color:#b9a6ee; box-shadow:0 8px 22px rgb(89 71 141 / 12%); }
.db-score-card h3 { margin:0; font-size:14px; overflow-wrap:anywhere; }
.db-points { display:block; font-size:34px; line-height:1; color:var(--landing-ink); }
.db-points small { margin-left:4px; font-size:12px; font-weight:700; color:var(--landing-muted); }
.db-cats { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.db-cats li { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:16px; background:#f4f8fc; font-size:14px; }
.db-cats li span { min-width:0; color:var(--landing-muted); }
.db-cats li b { flex:0 0 auto; color:var(--landing-ink); }
.db-formula { margin:0; font-size:12px; line-height:1.45; }
.db-verdict { margin:0; padding:14px 16px; border-left:4px solid #a98de8; border-radius:0 16px 16px 0; background:#f6f3ff; font-size:15px; line-height:1.5; color:var(--landing-ink); }
.db-verdict span { display:block; margin-bottom:4px; font-size:11px; font-weight:900; letter-spacing:.06em; color:#6a4fc8; }
.db-feedback { display:grid; gap:8px; padding:16px; border-radius:20px; background:#fff; border:1px solid #e4e9f2; }
.db-feedback h3 { margin:0; font-size:15px; }
.db-feedback p { margin:0; font-size:14px; line-height:1.5; color:var(--landing-ink); }
.db-fixes { margin:0; padding-left:18px; font-size:14px; line-height:1.6; }
.db-fixes b { color:#167652; }
.db-transcript { border-radius:18px; background:#f4f8fc; padding:12px 14px; }
.db-transcript summary { cursor:pointer; font-weight:800; color:var(--landing-ink); }
.db-transcript .tutor-chat-log { margin-top:10px; }
.db-outcome { font-weight:800; }
.db-outcome.is-won { color:#167652; }
.db-outcome.is-lost { color:#7a5ac8; }
.db-item .ch-text { margin:0; }
.db-total { display:flex; align-items:baseline; gap:8px; }
.db-total b { font-size:38px; line-height:1; color:var(--landing-ink); }
.db-total span { font-size:13px; font-weight:700; color:var(--landing-muted); }

/* A block whose wordings share one grid cell: it is as large as the largest and never resizes when the wording changes. */
.stk, .review-callout .stk { display:grid; min-width:0; }
.stk > i { display:block; grid-area:1 / 1; font-style:normal; min-width:0; }
.stk > .is-off { visibility:hidden; }
.review-callout.home-due { margin-bottom:0; }
.review-callout.home-due .primary, .review-callout.home-due .secondary { flex:0 0 auto; }
@media (min-width: 1080px) { .app-shell .dashboard > .home-due { grid-column:1; grid-row:3; } }

/* The attention dot: a small red circle with no number. On the Amigos tab and next to whatever on the friends page needs the learner. */
.bottom-nav button { position:relative; }
.nav-badge, .dot-badge { display:inline-block; flex:0 0 auto; width:10px; height:10px; padding:0; border-radius:50%; background:#e5484d; box-shadow:0 0 0 2px #fff; font-size:0; }
.nav-badge { position:absolute; top:3px; right:6px; }
@media (min-width: 761px) { .app-shell .bottom-nav .nav-badge { top:calc(50% - 6px); right:14px; width:12px; height:12px; } }
h2 > .dot-badge { margin-left:6px; vertical-align:middle; }
/* A card or row that needs the learner: the dot sits in its top-right corner (an overlay, so nothing moves) and the edge is tinted. */
.needs-you { position:relative; box-shadow:0 0 0 1.5px #f2b8bb, 0 12px 28px rgb(89 71 141 / 9%); }
.needs-you > .dot-badge { position:absolute; top:10px; right:10px; z-index:1; }
.ch-card.needs-you { padding-right:34px; }
.fr-row.needs-you > .dot-badge { top:6px; left:6px; right:auto; }

/* The "forgot password" dialog (a modal card with a small form). */
.modal-card form { display:grid; gap:var(--space-block); }
.modal-card label { display:grid; gap:var(--space-inline); font-weight:800; font-size:14px; }
.modal-card input:not([type="checkbox"]) { width:100%; padding:12px 14px; border:1px solid #cfe0ee; border-radius:14px; background:#fff; font:inherit; color:var(--ink); }
.modal-card .consent { display:flex; align-items:flex-start; gap:var(--space-list); font-weight:600; line-height:1.4; }
.modal-card .consent input { flex:0 0 auto; width:20px; height:20px; margin-top:2px; }
.modal-card .actions { display:flex; gap:var(--space-list); flex-wrap:wrap; }

/* The level card on the profile: collapsed by default, header always visible. */
details.level-card > summary { display:flex; align-items:center; gap:var(--space-block); cursor:pointer; list-style:none; min-width:0; }
details.level-card > summary::-webkit-details-marker { display:none; }
details.level-card > summary::marker { content:''; }
details.level-card:not([open]) { gap:0; }
.lv-sum { display:grid; gap:2px; min-width:0; flex:1 1 auto; }
.lv-sum b { color:var(--landing-ink); font-size:16px; line-height:1.25; }
.lv-sum small { color:var(--landing-muted); font-size:13px; }
details.level-card > summary:focus-visible { outline:2px solid #a98de8; outline-offset:6px; border-radius:16px; }
.lv-content { display:grid; gap:var(--space-block); padding-top:var(--space-block); }
.lv-content > * { margin-block:0; }
.lv-wait { margin:0; font-size:13px; }
details.level-card.needs-you > summary { padding-right:22px; }
details.level-card.needs-you > .dot-badge, details.level-card > summary > .dot-badge { position:absolute; top:12px; right:12px; }

/* A friend's photo inside the round avatar. */
.fr-ava.is-photo { overflow:hidden; background:#fff; padding:0; }
.fr-ava.is-photo img { display:block; width:100%; height:100%; object-fit:cover; }
/* The admin entry in the header: one more part of the account, visible only to admins. */
.admin-pill { position:relative; display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; padding:0; border-radius:50%; background:#1c2740; color:#fff; font-size:18px; line-height:1; }
.admin-pill .nav-badge { top:0; right:0; }
/* The header never squeezes the logo: the name and the subtitle give way first. */
.brand { min-width:0; }
.brand b { flex:0 0 auto; }
.brand > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand small { overflow:hidden; text-overflow:ellipsis; }
.user-tools { flex:0 0 auto; }

/* The "go to top" button: a solid round overlay above the tab bar (beside it on wide screens), hidden until the page is scrolled down. */
#to-top { position:fixed; right:18px; bottom:calc(104px + env(safe-area-inset-bottom, 0px)); z-index:5; width:46px; height:46px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:#1c2740; color:#fff; font-size:22px; font-weight:900; line-height:1; box-shadow:0 10px 24px rgb(28 39 64 / 30%); visibility:hidden; transform:translate3d(0,14px,0); transition:transform .2s ease-out, visibility 0s linear .2s; will-change:transform; cursor:pointer; }
#to-top.is-visible { visibility:visible; transform:translate3d(0,0,0); transition:transform .2s ease-out; }
body:not(:has(.bottom-nav)) #to-top { bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1080px) { #to-top { bottom:24px; } }

.admin-pill .gear { display:block; width:20px; height:20px; }

/* Tab bar: a Lucide icon above each label (beside it in the wide sidebar). */
.bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.bottom-nav .ni { display:grid; place-items:center; width:22px; height:22px; }
.bottom-nav .ni .ic { display:block; }
.bottom-nav .nl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 760px) { .bottom-nav button { padding:7px 0 6px; } }
@media (min-width: 761px) { .app-shell .bottom-nav button { flex-direction:row; justify-content:flex-start; gap:12px; } }
/* The level card chevron is a Lucide icon that morphs between down and up. */
.lv-chev { display:grid; place-items:center; flex:0 0 auto; width:24px; height:24px; color:#8a84a2; }
.lv-chev .ic { display:block; }
/* Small icons inside buttons (copy). */
.btn-ic { display:inline-grid; place-items:center; flex:0 0 auto; width:16px; height:16px; }
/* A button with an icon puts it beside the label, whatever layout the button had before. */
button:has(> .btn-ic) { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.fr-code-actions button:has(> .btn-ic) { display:flex; }
.btn-ic .ic { display:block; }

/* Carlos is the centre of the tab bar and the biggest control in it: a raised gradient circle on a phone, a gradient button at the top of
   the sidebar-style list on wide screens. Order: Inicio, Vocabulario, Carlos, Amigos, Perfil (home far left, profile far right). */
@media (max-width: 760px) {
  .bottom-nav button { justify-content:flex-end; }
  .bottom-nav button.nav-main { overflow:visible; background:transparent; color:#746f88; }
  .bottom-nav button.nav-main.active { background:transparent; color:var(--landing-violet); }
  /* The circle is 56px tall but takes only 22px of the row (negative top margin), so the labels of all five tabs stay on one line. */
  .bottom-nav .nav-main .ni { width:56px; height:56px; margin-top:-34px; border-radius:50%; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); color:#fff; box-shadow:0 0 0 4px #fff, 0 8px 18px rgb(107 101 219 / 40%); }
  .bottom-nav .nav-main .ni .ic { width:28px; height:28px; }
  .bottom-nav button.nav-main.active .ni { box-shadow:0 0 0 4px #fff, 0 0 0 7px #cfc9fa, 0 8px 18px rgb(107 101 219 / 40%); }
  .bottom-nav .nav-main .nl { margin-top:2px; }
}
@media (min-width: 761px) {
  /* Not selected: a soft violet tile, so it stands out without looking like the selected (gradient) tab. Selected: the normal gradient. */
  .app-shell .bottom-nav button.nav-main { padding-top:16px; padding-bottom:16px; font-size:14px; }
  .app-shell .bottom-nav button.nav-main:not(.active) { background:#efeaff; color:#5b3fd6; box-shadow:inset 0 0 0 2px #cfc6fa; }
  .app-shell .bottom-nav button.nav-main .ic { width:26px; height:26px; }
}

/* While a text field has focus (the on-screen keyboard is up) the tab bar and the go-to-top button are hidden instead of being dragged around by the keyboard. */
html.is-typing .bottom-nav, html.is-typing #to-top { visibility:hidden; }

/* Carlos's face (carlos.webp) fills his round mark, his intro avatar and the small badge over his chat messages. */
.tutor-mark, .tutor-avatar { overflow:hidden; }
.tutor-mark > img, .tutor-avatar > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.tutor-message span.who { display:flex; align-items:center; gap:6px; }
.tutor-message span.who > img { flex:0 0 auto; width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; }

/* Log out is a destructive action: solid red. */
.profile-page .secondary.logout { background:#e5484d; border-color:#e5484d; color:#fff; box-shadow:0 8px 18px rgb(229 72 77 / 28%); }
.profile-page .secondary.logout:hover { background:#d13a3f; border-color:#d13a3f; }
.tutor-message.from-tutor span.who::before { content:none; }

/* Chats do not scroll on their own: the page is the only scroll area, so a swipe always moves the page. When a new message arrives the page
   scrolls it into view (revealLatest in app.js); the margin keeps it clear of the fixed tab bar. */
.tutor-chat-log > * { scroll-margin-bottom:130px; }

/* "Показать все · N" / "Свернуть" under a long list on the friends page. */
.fold-toggle { justify-self:center; min-width:min(100%, 220px); }
.fold-toggle[aria-expanded="true"] { color:var(--landing-violet); }

/* Debates with a random opponent: the idle and the "searching" contents share the same cells (the hidden one keeps its size), so the card
   never changes height and nothing below it moves. */
.db-random-card { display:grid; gap:var(--space-block); align-content:start; }
.db-stack { display:grid; }
.db-stack > * { grid-area:1 / 1; min-width:0; }
.db-random-card:not(.is-waiting) .db-on-wait, .db-random-card.is-waiting .db-on-idle { visibility:hidden; }
.db-searching { display:flex; align-items:flex-start; gap:var(--space-block); min-width:0; }
.db-searching > div { min-width:0; display:grid; gap:4px; }
.db-searching small { color:var(--muted); font-size:13px; line-height:1.4; }
.db-dice, .db-pulse { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; font-size:28px; }
.db-pulse { border-radius:50%; background:linear-gradient(135deg,var(--landing-violet),var(--landing-sky)); }
.db-random-card.is-waiting { border-color:#cfc6fa; }

/* Multiple-choice questions under a story. Flat on purpose: the lesson card is the only frame, the questions are separated by hairlines like
   the other lesson sections, and the answer options are the only boxes. A picked option changes colour only (its border keeps its width),
   so nothing moves; the explanation is a plain paragraph with an accent line, not another box. */
.rd-think { display:grid; gap:var(--space-block); margin-top:var(--space-section); padding-top:var(--space-section); border-top:1px solid #efeaff; }
.rd-think h3 { margin:0; font-size:18px; color:var(--landing-ink); }
.rd-think .rd-hint { margin:0; }
.rd-questions { display:grid; margin:0; padding:0; list-style:none; counter-reset:rdq; }
.rd-q { display:grid; gap:10px; padding:var(--space-section) 0; border-top:1px solid #f1eefc; counter-increment:rdq; min-width:0; }
.rd-q:first-child { border-top:0; padding-top:4px; }
.rd-q:last-child { padding-bottom:4px; }
.rd-kind { color:#7965cf; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.rd-kind::before { content:counter(rdq) ". "; }
.rd-kind.is-language { color:#167652; }
.rd-q-es { margin:0; font-size:17px; line-height:1.5; font-weight:800; color:var(--landing-ink); overflow-wrap:anywhere; }
.rd-q-tr { margin:0; font-size:14px; line-height:1.45; color:var(--landing-muted); overflow-wrap:anywhere; }
.rd-options { display:grid; gap:8px; margin-top:4px; }
.rd-option { display:grid; gap:2px; justify-items:start; width:100%; padding:12px 14px; border:2px solid #e6e0f8; border-radius:14px; background:#fff; color:var(--landing-ink); text-align:left; font-weight:700; font-size:15px; line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.rd-option small { color:var(--landing-muted); font-size:13px; font-weight:600; }
.rd-option:disabled { cursor:default; }
.rd-option.is-right { border-color:#73d2a1; background:#ddf7e9; color:#117146; }
.rd-option.is-right small { color:#117146; }
.rd-option.is-wrong { border-color:#f4a4aa; background:#ffe6e7; color:#ac3440; }
.rd-option.is-wrong small { color:#ac3440; }
.rd-why { display:grid; gap:2px; padding-left:12px; border-left:3px solid #cfc6fa; }
.rd-q[data-result="right"] .rd-why { border-left-color:#73d2a1; }
.rd-q[data-result="wrong"] .rd-why { border-left-color:#f4a4aa; }
.rd-why[hidden], .rd-score[hidden] { display:none; }
.rd-why p { margin:0; font-size:14px; line-height:1.5; color:var(--landing-ink); }
.rd-verdict { font-size:14px; }
.rd-q[data-result="right"] .rd-verdict { color:#117146; }
.rd-q[data-result="wrong"] .rd-verdict { color:#ac3440; }
.rd-score { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-list); padding-top:var(--space-block); border-top:1px solid #f1eefc; }
.rd-score b { min-width:0; color:var(--landing-ink); }

/* Translation pop-up on a phone: it opens next to the tapped word and scrolls with the text, so the reader never has to scroll to a panel and back.
   The panel under the story is only for wider screens. The pop-up is a solid layer over the story. */
.rd-text { position:relative; }
.rd-pop { position:absolute; z-index:6; width:min(300px, 100%); padding:14px 16px; border-radius:16px; background:#fff; border:2px solid #cfc6fa; box-shadow:0 16px 40px rgb(39 49 84 / 26%); color:var(--landing-ink); scroll-margin-bottom:130px; }
.rd-pop::before { content:''; position:absolute; left:var(--arrow, 50%); width:14px; height:14px; margin-left:-7px; background:#fff; transform:rotate(45deg); }
.rd-pop[data-side="above"]::before { bottom:-9px; border-right:2px solid #cfc6fa; border-bottom:2px solid #cfc6fa; }
.rd-pop[data-side="below"]::before { top:-9px; border-left:2px solid #cfc6fa; border-top:2px solid #cfc6fa; }
.rd-pop-body { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.rd-pop-body .rd-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rd-pop-body b { font-size:16px; color:var(--landing-violet); }
.rd-pop-body > span { font-size:17px; font-weight:700; }
.rd-pop-body small { font-size:13px; line-height:1.4; color:var(--landing-muted); }
.rd-pop-close { flex:0 0 auto; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#f2efff; color:var(--landing-violet); font-size:22px; line-height:1; }
@media (max-width: 760px) { .rd-panel { display:none; } }

/* The pronunciation button (speech.js): a round play button. Its size and glyph never change; playing only changes the colour. */
.say-btn { flex:0 0 auto; display:inline-grid; place-items:center; width:38px; height:38px; padding:0; border:2px solid #cfc6fa; border-radius:50%; background:#fff; color:var(--landing-violet); }
.say-btn .ic { display:block; }
/* Lucide's play triangle is drawn 1 unit right of the middle of its 24 x 24 box (its outline runs from x = 5 to 21), the pause bars are centred. Nudging the
   triangle back by that unit puts the icon exactly in the middle of the round button in both states; the nudge follows the morph. */
.say-btn path { transition:transform .3s var(--bounce, ease-out); }
.say-btn path[data-icon="play"] { transform:translateX(-1px); }
.say-btn.is-playing { border-color:var(--landing-violet); background:var(--landing-violet); color:#fff; }
.vocab > div:has(.say-btn) { align-items:center; }
.rd-say { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.rd-card .rd-say > span, .rd-pop-body .rd-say > span { font-size:13px; font-weight:800; color:var(--landing-muted); text-align:left; }
.vw-actions .say-btn { width:34px; height:34px; }

/* The play button in the vocabulary practice: next to the word (choose mode) or in the feedback line (typed mode). */
.vp-word-row { display:flex; align-items:center; gap:14px; min-width:0; }
.vp-word-row .vp-word { min-width:0; margin:0; overflow-wrap:anywhere; }
.vp-feedback:has(.say-btn) { grid-template-columns:minmax(0,1fr) auto; column-gap:12px; }
.vp-feedback:has(.say-btn) > b, .vp-feedback:has(.say-btn) > span { grid-column:1; }
.vp-feedback > .say-btn { grid-column:2; grid-row:1 / span 2; align-self:center; }

/* Video practice (video.js). The player stays at the top of the screen (sticky, sized so it never takes more than about a third of the height)
   while the transcript scrolls with the page under it; the translation pop-up is the same layer as the one in the stories. */
.vd-stage { position:sticky; top:0; z-index:5; display:grid; gap:8px; padding:8px 0 10px; background:#fff; }
.vd-frame { position:relative; width:min(100%, calc(34vh * 16 / 9)); aspect-ratio:16 / 9; margin:0 auto; border-radius:14px; overflow:hidden; background:#17233c; }
.vd-frame iframe, .vd-facade { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.vd-facade { padding:0; background:#17233c; cursor:pointer; }
.vd-facade img { display:block; width:100%; height:100%; object-fit:cover; }
.vd-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:var(--landing-violet); color:#fff; box-shadow:0 10px 24px rgb(23 35 60 / 40%); }
.vd-play svg { display:block; margin-left:3px; }
.vd-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.vd-yt { display:inline-flex; align-items:center; text-decoration:none; }
.vd-follow.is-on { border-color:var(--landing-violet); background:#ece7ff; color:var(--landing-violet); }
.vd-tools { display:flex; justify-content:flex-start; margin:6px 0 2px; }
.vd-transcript { position:relative; display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.vd-line { display:grid; grid-template-columns:54px minmax(0, 1fr); align-items:start; gap:10px; padding:10px 8px; border-radius:12px; scroll-margin-top:calc(34vh * 9 / 16 + 90px); }
.vd-line.is-current { background:#f0ecff; }
.vd-time { min-height:30px; padding:4px 0; border:0; border-radius:10px; background:#f5f2fc; color:var(--landing-violet); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.vd-body { min-width:0; }
.vd-text { margin:0; font-size:17px; line-height:1.9; color:var(--landing-ink); overflow-wrap:anywhere; }
.vd-tr { margin:2px 0 0; font-size:14px; line-height:1.45; color:var(--landing-muted); overflow-wrap:anywhere; }
.vd-tr[hidden], .vd-otr[hidden], .rd-q-tr[hidden] { display:none; }
.vd-otr { display:block; }
.vd-link { justify-self:start; padding:0; border:0; background:none; color:var(--landing-violet); font-size:13px; font-weight:800; text-decoration:underline dotted; }
.vd-pop .rd-head { display:flex; align-items:center; gap:8px; }
.vd-pop .vd-add-slot { margin-left:auto; }
.vd-pop .vd-word-tr { font-size:17px; font-weight:700; }
.vd-pop .vd-sentence-tr { display:block; min-height:1.4em; }
.vd-bar { flex-wrap:nowrap; }
.vd-bar > .secondary { flex:1 1 0; min-width:0; min-height:0; padding:9px 8px; font-size:12.5px; white-space:nowrap; text-align:center; justify-content:center; }

/* The debate invitation on a friend's profile is an action card of its own, so it does not read as a part of the friend's profile under it. */
.db-invite-card { padding:18px; border:2px solid #d9d0fa; border-radius:22px; background:#f3efff; box-shadow:0 12px 28px rgb(89 71 141 / 9%); }
.db-invite-card > p { margin:0; }
.db-invite-card .db-invite { justify-self:start; max-width:100%; }

/* The player is sticky only inside this wrapper (player + transcript); after the transcript it leaves with it. */
.vd-watch { display:block; }

/* The transcript folds (open by default); the chevron is the same morphing icon as on the level card. */
.vd-collapse { display:block; }
.vd-collapse > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px; list-style:none; cursor:pointer; }
.vd-collapse > summary::-webkit-details-marker { display:none; }
.vd-sum { display:flex; align-items:baseline; gap:8px; min-width:0; }
.vd-sum b { font-size:17px; color:var(--landing-ink); }
.vd-sum small { color:var(--landing-muted); font-size:13px; }

/* Notifications card on the profile (push.js): the level card's collapsible layout, with the guide as short titled lists. */
.push-card .lv-badge { color:#fff; }
.push-card .lv-badge.is-pending { color:#6f57d6; }
.push-card .lv-badge .ic { display:block; }
.push-guide { display:grid; gap:10px; min-width:0; }
.push-guide > b { font-size:13px; color:var(--landing-ink); }