/* =========================================================
   Mr. Oliver — styles (iOS look)
   System fonts (SF Pro / SF Pro Rounded), grouped grey
   background, white rounded cards, "liquid glass" bars and
   sheets, capsule buttons, iMessage-style bubbles.
   Light and dark: System (follows the phone), Dark or Light (2.3). Mobile first.
   ========================================================= */

:root {
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: rgba(118, 118, 128, .12);
  --ink: #1C1C1E;
  --muted: #6C6C70;
  --line: rgba(60, 60, 67, .14);
  --accent: #007AFF;
  --accent-2: #5AC8FA;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(0, 122, 255, .12);
  --gold: #FF9F0A;
  --danger: #FF3B30;
  --ok: #28A745;
  --bubble-tutor: #E9E9EB;

  /* Liquid glass (M19: thinner tint, more blur and colour, a soft rim of light instead of hard lines) */
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .05);
  --blur: saturate(190%) blur(22px);
  --rim-hi: rgba(255, 255, 255, .95);   /* rim where the light hits (top-left, bottom-right) */
  --rim-lo: rgba(255, 255, 255, .22);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .3), inset 0 0 22px rgba(255, 255, 255, .2);
  --lens: rgba(255, 255, 255, .62);     /* the sliding tab highlight */
  --card-rim: inset 0 0 0 .5px rgba(0, 0, 0, .03);

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px rgba(0, 0, 0, .05);

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;

  --tabbar-h: 64px;
  --topbar-h: 52px;

  color-scheme: light;
}

/* 2.3: dark is chosen by <html data-theme="dark">, set by the small script in each page's <head>
   («Sistema» follows the phone; «Escuro» / «Claro» are forced — js/theme.js). No prefers-color-scheme here. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1C1C1E;
  --surface-2: rgba(118, 118, 128, .24);
  --ink: #F2F2F7;
  --muted: #98989F;
  --line: rgba(84, 84, 88, .55);
  --accent: #0A84FF;
  --accent-2: #64D2FF;
  --accent-soft: rgba(10, 132, 255, .22);
  --gold: #FFB340;
  --danger: #FF453A;
  --ok: #30D158;
  --bubble-tutor: #262629;
  --glass: rgba(44, 44, 48, .46);
  --glass-strong: rgba(34, 34, 38, .74);
  --glass-edge: rgba(255, 255, 255, .09);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  --rim-hi: rgba(255, 255, 255, .4);
  --rim-lo: rgba(255, 255, 255, .06);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 1px rgba(255, 255, 255, .05), inset 0 0 18px rgba(255, 255, 255, .04);
  --lens: rgba(255, 255, 255, .13);
  --card-rim: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 .5px rgba(255, 255, 255, .04);
  --shadow: none;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* components set display; "hidden" must still win */

html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }   /* no double-tap zoom */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.01em;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
/* Soft colour behind the glass, so it has something to refract */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
    radial-gradient(50% 40% at 100% 30%, color-mix(in srgb, #AF52DE 9%, transparent), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, #34C759 8%, transparent), transparent 70%);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); }

.muted { color: var(--muted); }
.small { font-size: .8em; font-weight: 400; font-family: var(--font-body); }
.eyebrow { text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: .45em; }

/* The language being learned reads slightly larger (.is-en); the learner's own language in a softer tone (.is-pt).
   M21: the class names mean «learned» / «own», for both tracks. */
.is-en { font-family: var(--font-display); font-weight: 500; }
.is-pt { color: var(--muted); }

/* ---------- Glass helper ---------- */
.glass, .topbar, .tabbar, .sheet, .session-top, .session-controls, .toast {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  display: flex; align-items: center; gap: 8px;
  background: var(--glass);
  border-bottom: .5px solid var(--line);
}
.topbar-title { flex: 1; font-size: 1.4rem; margin: 0; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--accent);
  background: var(--surface-2);
}
.icon-btn svg, .tabbar svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

.profile-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 5px;
  border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; max-width: 45vw;
}
.profile-chip .profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-initial {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}
.profile-initial.big { width: 48px; height: 48px; font-size: 1.2rem; }

/* ---------- Main area ---------- */
main {
  max-width: 640px; margin: 0 auto;
  padding: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px)
           calc(16px + env(safe-area-inset-right))
           calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 36px)
           calc(16px + env(safe-area-inset-left));
}

.screen { animation: fade-in .3s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

.greeting { font-size: 2.1rem; margin-bottom: .7em; }

/* ---------- Cards (iOS grouped cells) ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }

.notice { background: var(--accent-soft); box-shadow: none; }
.lesson-card {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 22%, var(--surface)), var(--surface) 60%);
}
.lesson-card h3 { font-size: 1.5rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .85rem; line-height: 1.25; }
.stat-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; }
.stat-btn:disabled { cursor: default; }

/* Story card (Início) */
.story-card { display: flex; align-items: center; gap: 14px; }
.story-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent-2), var(--accent)); }
.story-icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.story-text { flex: 1; min-width: 0; }
.story-text h3 { margin: 0 0 2px; }
.story-text p { margin: 0; }
.story-card .btn { flex: none; }
.mistake-said { text-decoration: line-through; opacity: .7; margin: 0 0 8px; }
.stat-btn:not(:disabled)::after { content: attr(data-cta); margin-top: 4px; color: var(--accent); font-weight: 600; font-size: .9rem; }

.empty { text-align: center; padding: 48px 12px; }

/* ---------- Buttons: capsules, min 44px tap targets ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 50px; padding: 0 22px;
  border-radius: 999px;
  font: inherit; font-weight: 600; letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  transition: transform .15s cubic-bezier(.3, .7, .4, 1.4), opacity .2s ease, background-color .2s ease;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-secondary { background: var(--accent-soft); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--accent); padding: 0 12px; }
.btn-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Forms (17px text so iOS doesn't zoom) ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin: 0 0 6px 4px; }
.input-row { display: flex; gap: 6px; align-items: center; }
.input-row input { flex: 1; min-width: 0; }

input, select {
  width: 100%; min-height: 48px;
  padding: 0 14px;
  font: inherit; font-size: 17px;
  color: var(--ink);
  background: var(--surface-2);
  border: 0;
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px;
}
input:focus, select:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="file"] { display: none; }

/* iOS switch */
.check-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.check-row input[type="checkbox"] {
  flex: none; position: relative; width: 51px; min-height: 31px; height: 31px; padding: 0;
  border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background .2s ease;
}
.check-row input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s cubic-bezier(.3, .7, .4, 1.2);
}
.check-row input[type="checkbox"]:checked { background: #34C759; }
.check-row input[type="checkbox"]:checked::after { transform: translateX(20px); }

.status { margin: 12px 0 0; font-size: .95rem; }
.status:empty { display: none; }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.warning { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .9rem; }

.usage { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0; }
.usage dt { color: var(--muted); }
.usage dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.version { text-align: center; margin-top: 24px; }
/* M24: privacy policy and terms (separate pages, in the interface's language) */
.legal-links { text-align: center; margin: 6px 0 0; }
.legal-links a { color: inherit; }

/* ---------- Floating glass tab bar ---------- */
.tabbar {
  position: fixed; z-index: 10;
  left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right));
  /* M21.1: closer to the bottom edge (like Slack): it may sit over the lower part of iOS's home-indicator area */
  bottom: max(8px, calc(env(safe-area-inset-bottom) - 18px));
  max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--tabbar-h); padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  border: .5px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.tabbar a {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: .64rem; font-weight: 600;
  transition: color .15s ease;
}
.tabbar a[aria-current="page"], .tabbar a.hover { color: var(--accent); }
/* The highlight slides between tabs; press and drag along the bar to move it (iOS-style). */
.tabbar { touch-action: none; -webkit-user-select: none; user-select: none; }
.tabbar a { -webkit-touch-callout: none; }
.tab-pill {
  position: absolute; top: 6px; bottom: 6px; left: 0; z-index: 0;
  border-radius: 999px; background: var(--accent-soft);
  will-change: transform;   /* its own layer: moving it doesn't repaint the glass */
  transition: transform .34s cubic-bezier(.25, 1.25, .45, 1), opacity .2s ease;
  pointer-events: none;
}
/* Sliding: no animation at all, so it stays exactly under the finger. */
.tabbar.dragging .tab-pill { transition: none; }

/* ---------- Sheets (glass, with a grabber) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .32);
  animation: fade-in .2s ease;
}
.sheet {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 92vh; max-height: calc(100dvh - env(safe-area-inset-top) - 16px); overflow-y: auto;   /* never under the island */
  background: var(--glass-strong);
  border: .5px solid var(--glass-edge);
  border-radius: 30px 30px 0 0;
  padding: 30px calc(22px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .12);
  animation: sheet-up .35s cubic-bezier(.2, .8, .2, 1);
}
.sheet::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: 3px; background: var(--line);
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet h2 { font-size: 1.55rem; }
.sheet .field input { margin-bottom: 0; }
.sheet .btn { width: 100%; }
.sheet .input-row .btn { width: auto; flex: none; }   /* "Mostrar" next to the family code */
@media (min-width: 700px) {
  .overlay { align-items: center; }
  .sheet { border-radius: 30px; }
  .sheet::before { display: none; }
}

.steps { padding-left: 1.3em; margin: 0 0 1em; }
.steps li { margin-bottom: .6em; }

/* ---------- Toast (glass capsule) ---------- */
.toast {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 10px);
  max-width: calc(100% - 32px);
  background: var(--glass-strong); color: var(--ink);
  border: .5px solid var(--glass-edge);
  padding: 12px 20px; border-radius: 999px; font-size: .95rem; font-weight: 500;
  box-shadow: var(--glass-shadow);
  animation: toast-in .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes toast-in { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------- Mr. Oliver avatar ---------- */
.teacher-card { text-align: center; }
.teacher-card .btn { min-width: 210px; }

.avatar { position: relative; width: 190px; aspect-ratio: 1; margin: 0 auto 12px; --level: 0; }
.avatar svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .12)); }
.av-bg { fill: color-mix(in srgb, var(--accent-2) 26%, var(--surface)); }

/* Live microphone ring (listening) */
.avatar-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 4px solid var(--accent);
  box-shadow: 0 0 calc(10px + var(--level) * 30px) color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0; transform: scale(calc(1 + var(--level) * .12));
  transition: opacity .25s ease;
}
.avatar[data-state="listening"] .avatar-ring { opacity: .9; }

/* Idle breathing */
.av-body { transform-box: view-box; transform-origin: 120px 240px; animation: av-breathe 4.8s ease-in-out infinite; }
@keyframes av-breathe { 50% { transform: translateY(-1.4px) scale(1.006); } }

.av-head-tilt { transform-box: view-box; transform-origin: 120px 160px; transition: transform .5s ease; }
.av-brows { transition: transform .3s ease; }
.av-pupils { transition: transform .4s ease; }
.av-eyes { transform-box: fill-box; transform-origin: center; transition: transform .07s ease; }
.av-eyes.blink { transform: scaleY(.1); }

.avatar[data-state="listening"] .av-head-tilt { transform: rotate(-4deg); }
.avatar[data-state="listening"] .av-brows { transform: translateY(-2.5px); }

.av-think { opacity: 0; transition: opacity .3s ease; }
.avatar[data-state="thinking"] .av-think { opacity: 1; }
.avatar[data-state="thinking"] .av-head-tilt { transform: rotate(3deg); }
.avatar[data-state="thinking"] .av-pupils { transform: translate(2.5px, -3px); }
.av-dot { animation: av-dot 1.2s ease-in-out infinite; }
.av-dot:nth-child(4) { animation-delay: .15s; }
.av-dot:nth-child(5) { animation-delay: .3s; }
@keyframes av-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .av-body, .av-dot { animation: none; } }

.subtitle { min-height: 1.5em; margin: 0 auto 16px; max-width: 34ch; font-size: 1.05rem; }
.subtitle:empty { min-height: 0; margin: 0; }
.subtitle.is-en { font-size: 1.2rem; }
.subtitle.is-pt { font-style: italic; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-row .btn { min-height: 40px; padding: 0 18px; font-weight: 600; }

/* ---------- Big "Falar" button ---------- */
.talk-btn {
  width: 100%; min-height: 72px; gap: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
  color: var(--accent-ink);
  font-size: 1.15rem;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none;
}
.talk-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.talk-btn[data-state="recording"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 85%, #fff), var(--danger)); color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--danger) 35%, transparent);
  animation: talk-pulse 1.4s ease-in-out infinite;
}
.talk-btn[data-state="starting"], .talk-btn[data-state="processing"] { opacity: .7; }
@keyframes talk-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--danger) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .talk-btn[data-state="recording"] { animation: none; } }

/* ---------- Pronunciation drill ---------- */
.drill-sentence { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.3; margin-bottom: .3em; }
.drill-translation { font-style: italic; color: var(--muted); }
.drill-translation:empty { display: none; }
.drill-listen { display: flex; gap: 10px; margin-bottom: 18px; }
.drill-listen .btn { flex: 1; min-height: 44px; }
.drill-hint { text-align: center; margin: 18px 0 0; }   /* same gap as above the Falar button */
.drill-result { margin-top: 18px; padding-top: 18px; border-top: .5px solid var(--line); }
.drill-heard { font-style: italic; }

.score-good { --tone: var(--ok); }
.score-fair { --tone: var(--gold); }
.score-poor { --tone: var(--danger); }

.score-main { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.score-value { font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--tone); }
.score-label { font-weight: 700; }
.score-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; }
.score-parts div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.score-parts dt { font-size: .75rem; color: var(--muted); }
.score-parts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.stars { font-size: 2.3rem; letter-spacing: 2px; color: var(--gold); line-height: 1; }
.stars .off { color: var(--surface-2); }

.word-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.word {
  appearance: none; font: inherit; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; color: var(--ink);
  background: color-mix(in srgb, var(--tone, var(--ok)) 16%, transparent);
}
.word-good { --tone: var(--ok); }
.word-fair { --tone: var(--gold); }
.word-poor { --tone: var(--danger); }
.word-missing { --tone: var(--muted); text-decoration: line-through; opacity: .7; }
.word.selected { border-color: var(--tone); }

.word-detail { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.word-detail strong { font-family: var(--font-display); font-size: 1.3rem; }
.word-detail .btn-secondary { background: var(--surface); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #fff; background: var(--tone); margin-left: 6px; vertical-align: middle; }

.phonemes { display: flex; gap: 6px; align-items: flex-end; height: 70px; margin-bottom: 14px; }
.phoneme { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; flex: 1; max-width: 34px; }
.phoneme .bar { width: 100%; height: var(--h); background: var(--tone); border-radius: 8px 8px 3px 3px; }
.phoneme .ph { font-size: .8rem; color: var(--muted); }

/* ---------- Full-screen session ---------- */
body.in-session { overflow: hidden; }
body.in-session .tabbar, body.in-session .topbar { visibility: hidden; }

.session {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.session-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
  background: var(--glass); border-bottom: .5px solid var(--line);
}
.session-top .btn { justify-self: start; padding: 0 8px; min-height: 40px; }
.session-title { font-family: var(--font-display); font-weight: 700; text-align: center; }
.session-timer { justify-self: end; font-variant-numeric: tabular-nums; font-size: .9rem; padding-right: 8px; }

.session-steps { display: flex; align-items: center; gap: 5px; justify-content: center; padding: 10px 16px 0; }
.session-steps .step { width: 24px; height: 5px; border-radius: 3px; background: var(--surface-2); }
.session-steps .step.done { background: var(--accent); opacity: .45; }
.session-steps .step.current { background: var(--accent); }
.session-steps .step-name { margin-left: 8px; font-size: .8rem; color: var(--muted); font-weight: 600; }

.session-stage { position: relative; z-index: 2; padding: 18px 0 22px; }   /* M21.1: room (and above the feed) for the glowing ring while she speaks */
/* …and the feed fades out under the teacher instead of being cut with a straight line (a plain overlay:
   no mask on the scrolling feed, which iOS has drawn blank before, see M18.6). */
.session-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 22px; pointer-events: none;
  z-index: -1;   /* M21.4: behind the teacher, so her glow is never covered (it still covers the feed) */
  background: linear-gradient(180deg, var(--bg), transparent); }
.session-stage .avatar { width: 128px; margin-bottom: 0; }

.session-log {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px;
  max-width: 640px; width: 100%; margin: 0 auto;
}

/* iMessage-style bubbles */
.bubble { border-radius: 22px; padding: 11px 16px; max-width: 86%; }
.bubble p { margin: 0 0 .4em; }
.bubble p:last-of-type { margin-bottom: 0; }
.bubble-tutor { background: var(--bubble-tutor); align-self: flex-start; border-bottom-left-radius: 8px; }
.bubble-tutor .is-en { font-size: 1.08rem; }
.bubble-tutor .is-pt { font-style: italic; }
.bubble-tutor .now { color: var(--accent); }
.en-inline { font-style: normal; font-weight: 600; }
.bubble-tutor .seg-tr { margin: -.25em 0 .55em; font-size: .86rem; font-style: italic; color: var(--muted); }
.bubble-tutor .has-tr { cursor: pointer; text-decoration: underline dotted var(--line); text-underline-offset: 4px; }
.bubble-tutor .replay { min-height: 34px; padding: 0; margin-top: 2px; font-size: .85rem; }
.bubble-learner {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
  color: #fff; align-self: flex-end; border-bottom-right-radius: 8px;
}
.bubble-learner .said { margin: 0; }
.bubble-learner .pill { background: rgba(255, 255, 255, .95); color: var(--tone); }
.bubble-learner .translation { margin: 6px 0 0; padding-top: 6px; border-top: .5px solid rgba(255, 255, 255, .35); font-size: .9rem; font-style: italic; opacity: .9; }
.bubble-learner.pending .said { font-style: italic; opacity: .75; }
.bubble-learner .fix { margin: 6px 0 0; padding: 6px 10px; border-radius: 12px; background: var(--surface); color: var(--ink); }
.bubble-learner .fix-better { display: block; font-weight: 600; color: var(--ok); }
.bubble-learner .fix-why { display: block; font-size: .85rem; font-style: italic; opacity: .8; }
.bubble-error { background: var(--surface); align-self: stretch; max-width: none; box-shadow: var(--shadow); }
.bubble-error .btn { margin-top: 10px; }
.repeat-hint { margin-top: 10px !important; padding: 10px 14px; border-radius: 16px; background: var(--surface); }
.repeat-hint .eyebrow { display: block; margin-bottom: 2px; }
.repeat-hint span[lang] { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }

.result-card {
  align-self: stretch; max-width: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 22%, var(--surface)), var(--surface) 70%);
  box-shadow: var(--shadow);
}
.result-level { font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: var(--accent); line-height: 1.05; }
.result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.result-cols ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }

.session-controls {
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  max-width: 640px; width: 100%; margin: 0 auto;
  background: var(--glass); border-top: .5px solid var(--line);
  border-radius: 26px 26px 0 0;
}
.session-controls > :first-child { margin-top: 0; }
.session-next { width: 100%; min-height: 54px; margin-top: 10px; }
.type-row { display: flex; gap: 8px; margin-top: 10px; }
.type-row input { flex: 1; min-width: 0; min-height: 44px; border-radius: 999px; padding: 0 18px; }
.type-row .btn { min-height: 44px; padding: 0 18px; }

/* Lesson cards in the feed */
.lesson-card-item { background: var(--surface); align-self: stretch; max-width: none; box-shadow: var(--shadow); border: 2px solid transparent; }
.lesson-card-item .drill-listen { margin: 12px 0 18px; }
.lesson-card-item .drill-listen:last-child { margin-bottom: 0; }   /* "Ouvir" cards end with the buttons */
.review-pt { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; margin: 4px 0 8px !important; }
.review-en { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--accent); }
.dont-know { padding: 0; min-height: 36px; }
.word-list { list-style: none; padding: 0; margin: 6px 0 0; }
.word-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--line); }
.word-list li:last-child { border-bottom: 0; }
/* The word being learned first and bold, her own language after it (M26: by position, so both tracks match) */
.word-list li > span:first-child { font-family: var(--font-display); font-weight: 600; }
.word-list li > span:last-child { color: var(--muted); text-align: right; }
.listen-en { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; margin: 0 !important; }
.listen-ex { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin-top: 8px !important; }
.now-card { border-color: var(--accent); }
.drill-card { padding-bottom: 16px; }
.scene-card { background: var(--accent-soft); box-shadow: none; }
.scene-card .skip { padding: 0; min-height: 36px; }
.takeaways { padding-left: 1.3em; margin: 4px 0 14px; }
.takeaways li { margin-bottom: 6px; }
.history-title { margin: 10px 4px 0; }
.corrections { list-style: none; padding: 0; margin: 4px 0 14px; }
.corrections li { margin-bottom: 10px; }
.corrections .said { text-decoration: line-through; opacity: .7; }
.corrections .small { display: block; }

/* ---------- Lições: unit map ---------- */
.level-title { margin: 26px 4px 10px; font-size: 1.35rem; }
.level-title:first-child { margin-top: 4px; }
.unit { padding: 16px; }
.unit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.unit-head h4 { margin: 0; font-size: 1.12rem; }
.unit-bar { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 10px 0 6px; overflow: hidden; }
.unit-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-row {
  width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; border-radius: 14px; padding: 6px 4px; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.lesson-row:disabled { color: var(--muted); cursor: default; }
.lesson-row.next { background: var(--accent-soft); padding: 6px 10px; }
.lesson-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; background: var(--surface-2);
}
.lesson-row.done .lesson-dot, .lesson-row.next .lesson-dot { background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #fff; }
.lesson-name { flex: 1; font-weight: 500; }
.lesson-status { font-size: .8rem; color: var(--muted); }
.lesson-row.next .lesson-status { color: var(--accent); font-weight: 700; }

/* ---------- Vocabulário ---------- */
.vocab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vocab-head p { margin: 0; }
.vocab-list { list-style: none; padding: 0; margin: 0; }
.vocab-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 16px; margin-bottom: 10px; }
.vocab-main { min-width: 0; }
.vocab-main p { margin: 0 0 4px; }
.vocab-en { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; }
.vocab-pt { color: var(--muted); }
.vocab-ex { font-family: var(--font-display); font-style: italic; }
.vocab-actions { display: flex; flex-direction: column; gap: 4px; flex: none; }
.vocab-actions .btn { min-height: 40px; padding: 0 16px; }

/* ---------- People ---------- */
.picker-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.picker-person {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 10px 14px;
  border: 2px solid transparent; border-radius: 20px; background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow);
}
.picker-person > span:last-child { display: flex; flex-direction: column; }
.picker-person.current { border-color: var(--accent); }

.people-list { list-style: none; padding: 0; margin: 0 0 12px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--line); }
.person-row:last-child { border-bottom: 0; }
.person-info { flex: 1; display: flex; flex-direction: column; }
.pill-soft { align-self: flex-start; display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
#person-form .btn-danger { margin-top: 8px; }

/* ---------- Conversa livre ---------- */
.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.topic {
  min-height: 78px; padding: 14px; border-radius: 20px; border: 0; background: var(--surface);
  color: var(--ink); font: inherit; font-family: var(--font-display); font-weight: 700; text-align: left; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.topic:active { transform: scale(.97); }
.topic small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.topic.surprise { background: linear-gradient(150deg, var(--accent-2), var(--accent)); color: #fff; }
.topic.surprise small { color: rgba(255, 255, 255, .85); }
.topic:disabled { opacity: .5; cursor: default; }

/* ---------- Progresso ---------- */
.big-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.big-stats .card { margin: 0; padding: 14px; }
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; margin: 8px 0 4px; }
.week-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100px; }
.week-day .bar { width: 100%; max-width: 28px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); min-height: 3px; }
.week-day .bar.no-activity { background: var(--surface-2); }
.week-day .d { font-size: .7rem; color: var(--muted); font-weight: 600; }
.week-day.today .d { color: var(--accent); font-weight: 800; }
.level-bars { display: flex; flex-direction: column; gap: 10px; }
.level-bar-row { display: grid; grid-template-columns: 70px 1fr 48px; gap: 10px; align-items: center; font-size: .9rem; }
.level-bar-row .unit-bar { margin: 0; height: 8px; }
.weekly-text p { margin-bottom: .5em; }
.weekly-text .is-en { font-size: 1.1rem; }
.weekly-text .is-pt { font-style: italic; }
.mistake-list { list-style: none; padding: 0; margin: 0; }
.mistake-list li { padding: 8px 0; border-bottom: .5px solid var(--line); font-size: .95rem; }
.mistake-list li:last-child { border-bottom: 0; }

/* ---------- Profiles screen (Netflix-style, shown when the app opens) ---------- */
body.in-profiles { overflow: hidden; }
body.in-profiles .tabbar, body.in-profiles .topbar { visibility: hidden; }
.profiles-screen {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* M18.2: no align-items:center here — content taller than the screen would overflow above the top,
     out of scroll reach. margin:auto on .profiles-inner centres it only when it fits. */
  display: flex; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background: var(--bg);   /* opaque at once (M18.6), no fade-in animation */
}
.profiles-screen::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 45% at 10% 0%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 70%),
    radial-gradient(60% 45% at 100% 100%, color-mix(in srgb, #AF52DE 16%, transparent), transparent 70%);
}
.profiles-inner { width: 100%; max-width: 520px; margin: auto 0; text-align: center; }   /* M18.8: no fade here (iOS left it blank) */
.profiles-logo { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); margin-bottom: 14px; }
.profiles-title { font-size: 1.75rem; margin-bottom: 26px; }
.profiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; margin-bottom: 26px; }
@media (min-width: 560px) { .profiles-grid { grid-template-columns: repeat(3, 1fr); } }
.profile-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer;
  transition: transform .15s cubic-bezier(.3, .7, .4, 1.4);
}
.profile-tile:active { transform: scale(.95); }
/* M23.3: same tap effect as the entrance (teacher-pick); the ripple is a box-shadow, outside the clipped face */
.profile-tile { transition: transform .15s cubic-bezier(.3, .7, .4, 1.4), opacity .3s ease; }
.profile-tile.chosen .profile-face { animation: teacher-pick .42s ease forwards, face-ripple .5s ease-out; }
.profile-tile.chosen .profile-label { color: var(--accent); }
.profiles-grid.picking .profile-tile:not(.chosen) { opacity: .2; transform: scale(.9); }
/* M23.3: App.pick() — the same effect on choice cards (Conversa topics, story shelf, guide) */
.picked { animation: teacher-pick .38s ease forwards, card-ripple .5s ease-out; }
.picking .topic:not(.picked), .picking .tale:not(.picked), .picking [data-new]:not(.picked), .picking .guide-card:not(.picked) {
  opacity: .25; transform: scale(.94); transition: opacity .3s ease, transform .3s ease; }
@keyframes card-ripple {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  to { box-shadow: 0 0 0 22px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes face-ripple {
  from { box-shadow: 0 10px 28px rgba(0, 0, 0, .14), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to { box-shadow: 0 10px 28px rgba(0, 0, 0, .14), 0 0 0 28px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.profile-face {
  position: relative; width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 30px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.profile-face.add-face {
  background: var(--glass-strong); color: var(--accent); font-weight: 400;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: none;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.profile-edit {
  position: absolute; inset: 0; border-radius: 30px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .38); font-size: 2rem; font-weight: 400;
}
.profile-label { margin-top: 8px; font-weight: 700; font-size: 1.05rem; }
.profile-sub { font-size: .82rem; color: var(--muted); }
.profiles-manage { min-width: 180px; }

/* Segmented control (Adulto / Criança) */
.segmented {
  display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin: 6px 0 14px;
  border-radius: 12px; background: var(--surface-2);
}
.segmented button {
  min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; transition: background .2s ease, box-shadow .2s ease;
}
.segmented button[aria-checked="true"] { color: var(--accent); background: var(--lens); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .12); }
/* 2.6.4 (owner): every segmented control looks like Vocabulário's «Palavras | Guia» — the chosen side in the accent
   colour on the glass lens, in light and dark (before, Lições / exams / profile form / voice used plain grey). */
/* 2.4.1 (owner's screenshot): in dark the chosen side was the same colour as the cards — invisible. iOS uses a lighter grey. */
:root[data-theme="dark"] .segmented button[aria-checked="true"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .35); }

/* ---------- M7: profile pictures ---------- */
.profile-face svg, .profile-initial svg, .avatar-choice svg { width: 100%; height: 100%; display: block; }
.profile-face { overflow: hidden; }
.profile-initial { overflow: hidden; }
.field-label { font-size: .85rem; font-weight: 600; color: var(--muted); margin: 2px 0 6px 4px; }
.avatar-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.avatar-choices .muted { grid-column: 1 / -1; margin: 0 0 4px 4px; }
.avatar-choice {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 0 var(--accent); opacity: .72; transform: scale(.94);
  transition: transform .18s cubic-bezier(.3, .7, .4, 1.4), opacity .18s ease, box-shadow .18s ease;
}
.avatar-choice[aria-checked="true"] { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.sheet .segmented { margin: 4px 0 10px; }
.section-label { margin: 22px 6px 8px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.section-label:first-child { margin-top: 4px; }
.section-label span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.credit { margin: 22px 0 0; }
.diag-log { list-style: none; padding: 10px 12px; margin: 12px 0; border-radius: 12px; background: var(--surface-2); font: 12px/1.5 ui-monospace, Menlo, monospace; max-height: 220px; overflow-y: auto; }

/* Definições → Avançado (closed until tapped) */
.advanced { margin: 22px 0 8px; }
.advanced > summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 44px 14px 18px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  position: relative; margin-bottom: 14px;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after {
  content: '›'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--muted); transition: transform .2s;
}
.advanced[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.advanced-title { font-weight: 600; font-size: 1.05rem; }


/* ---------- Picture game (children) ---------- */
.game-icon { font-size: 1.7rem; background: linear-gradient(150deg, #FFD60A, #FF9F0A); }
.picture-card { text-align: center; }
.picture { font-size: 7.5rem; line-height: 1.15; margin: 6px 0 4px; }
.picture-answer { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 6px; }
.picture-answer strong { font-family: var(--font-display); font-size: 1.8rem; }
.picture-stars .stars { font-size: 2.2rem; }
.picture-actions { justify-content: center; margin-top: 8px; }
.picture-total { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; margin: 4px 0 10px; }
.picture-total .stars { color: var(--gold); }
.picture-recap { display: flex; flex-wrap: wrap; gap: 10px; }
.picture-recap span { display: flex; flex-direction: column; align-items: center; font-size: 2rem; min-width: 64px; }
.picture-recap small { font-size: .8rem; color: var(--muted); }

/* ---------- Stickers / medals (Progresso) ---------- */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.sticker { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; text-align: center;
  padding: 10px 6px; border-radius: var(--radius-sm); background: var(--surface-2); }
.sticker-face { font-size: 2.2rem; line-height: 1.1; }
.sticker-label { font-size: .75rem; line-height: 1.25; color: var(--muted); }
.sticker.got .sticker-label { color: var(--ink); font-weight: 600; }
.sticker.got.kid { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 22%, transparent), var(--surface-2)); transform: rotate(-2deg); }
.sticker.got.kid:nth-child(even) { transform: rotate(2deg); }
.sticker.locked .sticker-face { filter: grayscale(1); opacity: .28; }

/* ---------- New sticker pop-up ---------- */
.sticker-pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .35); animation: fade-in .2s ease; }
.sticker-pop-card { width: min(320px, 100%); text-align: center; padding: 28px 24px 22px; border-radius: 30px;
  background: var(--glass-strong); border: .5px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.sticker-emoji { font-size: 5.5rem; line-height: 1.1; animation: sticker-in .6s cubic-bezier(.2, 1.6, .4, 1); }
.sticker-name { margin: 2px 0 18px; }
.sticker-pop-card .btn { width: 100%; }
@keyframes sticker-in { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sticker-emoji { animation: none; } }

/* ---------- Story time: new story or a classic tale ---------- */
.story-chooser { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.story-new { display: flex; flex-direction: column; gap: 2px; min-height: 64px; }
.story-new small { font-weight: 500; font-size: .8rem; opacity: .85; }
.story-chooser .eyebrow { margin: 10px 4px 0; }
.tale-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.tale { font: inherit; color: var(--ink); border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 8px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.tale:active { transform: scale(.97); }
.tale-cover { position: relative; font-size: 2.6rem; line-height: 1.1; }
.tale-title { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.tale-sub { font-size: .72rem; color: var(--muted); }
.tale-badge { position: absolute; top: -6px; right: -14px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  font-size: .72rem; font-weight: 700; line-height: 22px; color: #fff; background: var(--ok); }
.tale-badge.part { background: var(--accent); }

.voice-segmented { margin: 4px 0 12px; }

/* M18.5: «Conto do dia», a wide card above the shelf */
.tale.tale-today { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 14px 18px 14px 22px; text-align: left; }
.tale-today .tale-cover { font-size: 3rem; }
.tale-today-text { display: flex; flex-direction: column; gap: 2px; }
.tale-today .tale-title { font-size: 1.02rem; }
.tale-today .tale-sub { font-size: .8rem; }

/* M18.7: «A família nos últimos 7 dias» (Progresso, adult profiles) */
.family-row { padding: 12px 0; border-top: .5px solid var(--line); }
.family-row:first-of-type { border-top: 0; padding-top: 4px; }
.family-head { display: flex; align-items: center; gap: 10px; }
.family-head > div:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.family-face { width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden; background: var(--surface-2);
  display: grid; place-items: center; font-weight: 700; }
.family-face svg { width: 100%; height: 100%; display: block; }
.family-dots { display: flex; gap: 4px; flex: none; }
.family-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.family-dots span.on { background: var(--ok); }
.family-dots span.today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.family-nums { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
.family-fixes { margin: 6px 0 0; font-size: .85rem; }

/* M18.10 / M19: entrance screen (js/splash.js), also the cover while the app is in the background. Above everything.
   No scrolling inside it (M18.6 lesson: animated content inside a scrolling fixed screen stayed blank on iOS). */
.splash {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: flex; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background: var(--bg); text-align: center;
  transition: opacity .45s ease;
}
.splash[hidden] { display: none; }
.splash.leaving { opacity: 0; pointer-events: none; }

/* Aurora: three big soft colours drifting slowly. M19.1: soft radial gradients, NOT filter: blur() — the blurred
   version took ~0.7 s to paint the first time on the iPhone, showing iOS's grey loading screen meanwhile. */
.splash-aurora { position: absolute; inset: 0; pointer-events: none; }
.splash-aurora span { position: absolute; width: 90vmax; height: 90vmax; opacity: .6; will-change: transform; }
.splash-aurora span:nth-child(1) { left: -40vmax; top: -40vmax; background: radial-gradient(closest-side, var(--accent-2), transparent); animation: aurora-a 16s ease-in-out infinite alternate; }
.splash-aurora span:nth-child(2) { right: -45vmax; top: 0; background: radial-gradient(closest-side, #AF52DE, transparent); opacity: .4; animation: aurora-b 19s ease-in-out infinite alternate; }
.splash-aurora span:nth-child(3) { left: -20vmax; bottom: -50vmax; background: radial-gradient(closest-side, var(--accent), transparent); opacity: .45; animation: aurora-c 22s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(18vmax, 14vmax) scale(1.1); } }
@keyframes aurora-b { to { transform: translate(-16vmax, 12vmax) scale(.9); } }
@keyframes aurora-c { to { transform: translate(14vmax, -16vmax) scale(1.15); } }
:root[data-theme="dark"] .splash-aurora span { opacity: .32; } :root[data-theme="dark"] .splash-aurora span:nth-child(2) { opacity: .22; }

.splash-inner { position: relative; width: 100%; max-width: 420px; margin: auto 0; display: flex; flex-direction: column; align-items: center; }

/* M21: both teachers in floating glass discs, side by side, each with a soft breathing halo and a flag */
.splash-duo { position: relative; display: flex; gap: 22px; justify-content: center; margin-bottom: 18px; }
.splash-hero { position: relative; width: 150px; height: 150px; animation: splash-float 5s ease-in-out infinite; }
.splash-hero[data-who="ines"] { animation-delay: -2.5s; }
@keyframes splash-float { 50% { transform: translateY(-8px); } }
.splash-halo { position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent);
  animation: splash-halo 3.6s ease-in-out infinite; }
@keyframes splash-halo { 50% { transform: scale(1.08); opacity: .6; } }
.splash-disc { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow), var(--glass-inner); }
.splash-disc .avatar { width: 124px; margin: 0; }
.splash-disc .avatar svg { filter: none; }
.splash-flag { position: absolute; right: 2px; bottom: 4px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.3rem; background: var(--glass-strong); box-shadow: var(--glass-shadow), var(--glass-inner); }
.splash-wave { position: absolute; left: calc(50% - 46px); top: -10px; font-size: 2.2rem; transform-origin: 70% 80%;
  animation: splash-wave 2.4s ease-in-out .3s infinite; }
@keyframes splash-wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-10deg); }
}

/* Little glass speech bubbles popping in around him */
.splash-bubble { position: absolute; padding: 6px 13px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--ink); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow), var(--glass-inner); opacity: 0; animation: bubble-pop 7.5s ease-in-out infinite; }
.splash-bubble.b1 { left: -14px; top: 4px; animation-delay: .4s; }
.splash-bubble.b2 { right: -14px; top: 4px; animation-delay: 2.9s; }
.splash-bubble.b3 { left: calc(50% - 36px); bottom: -22px; animation-delay: 5.4s; }
@keyframes bubble-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  6%, 26% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: translateY(-6px) scale(.95); }
}

.splash-title { font-size: 2.3rem; margin: 6px 0 4px; letter-spacing: -.03em; }
.splash-sub { margin: 0 0 30px; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* «Toca para começar»: a glass capsule with a light sweeping across it */
/* As the background cover: same layout, the button invisible (so nothing moves when the app starts again). */
.splash.as-cover .splash-teacher { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .splash-aurora span, .splash-hero, .splash-halo, .splash-wave { animation: none; }
  .splash-bubble { animation: none; opacity: 1; }
  .splash { transition: none; }
}

/* =========================================================
   M19: Liquid glass (iOS 26 look) across the app.
   Hard .5px lines are replaced by a soft rim of light: brighter
   where the light hits (top-left / bottom-right), fading away
   in between. Floating pieces get a masked gradient ring
   (::after); scrolling pieces (sheets) use inset shadows, since
   a pseudo-element there would scroll with the content.
   ========================================================= */
.tabbar::after, .toast::after, .icon-btn::after, .profile-chip::after,
.profile-face.add-face::after, .splash-disc::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--rim-hi), var(--rim-lo) 32%, transparent 52%, var(--rim-lo) 74%, var(--rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Floating tab bar: clearer glass, rim of light, and a glass "lens" that slides between tabs */
.tabbar { border: 0; background: var(--glass); box-shadow: var(--glass-shadow), var(--glass-inner); }
.tab-pill { background: var(--lens); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 10px rgba(0, 0, 0, .08); }

/* M19.5: NO fixed bar at the top (owner's choice). In full screen, iOS 26 softly blurs a band under the clock and
   the island, and anything fixed there looked out of focus («Início», the profile name). The top row now belongs to
   the page: a big title on the left, the profile and Definições as glass buttons on the right, scrolling away with
   the content, like Apple's own apps. */
/* M19.6: even below the island, iOS keeps a soft blur band (~2 cm). In the Home Screen app everything near the top
   starts --edge lower, so nothing important sits in it. (Not in Safari: there is no such band there.) */
:root { --edge: 0px; }
@media (display-mode: standalone) { :root { --edge: 12px; } }   /* M19.12: 12px = where the owner scrolled to in a screenshot (still sharp) */
.topbar { position: absolute; border-bottom: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  height: calc(var(--topbar-h) + env(safe-area-inset-top) + var(--edge) + 8px); padding-top: calc(env(safe-area-inset-top) + var(--edge) + 8px); }
.topbar-title { font-size: 2rem; letter-spacing: -.03em; }
body[data-screen="inicio"] .topbar-title { visibility: hidden; }   /* the greeting below is the title there */
main { padding-top: calc(var(--topbar-h) + env(safe-area-inset-top) + var(--edge) + 18px); }

/* Session top bar (Terminar · title · timer): no glass band either; it sits a little lower, clear of the island. */
.session-top { border-bottom: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  height: calc(52px + env(safe-area-inset-top) + var(--edge) + 8px); padding-top: calc(env(safe-area-inset-top) + var(--edge) + 8px); }
.toast { top: calc(env(safe-area-inset-top) + var(--edge) + 10px); }
.profiles-screen { padding-top: calc(24px + env(safe-area-inset-top) + var(--edge)); }
.sheet { max-height: calc(100dvh - env(safe-area-inset-top) - var(--edge) - 16px); }

/* Session controls (Falar, Continuar): a glass shelf with a lit top edge */
.session-controls { border-top: 0; border-radius: 30px 30px 0 0;
  box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 0 22px rgba(255, 255, 255, .06), 0 -10px 30px rgba(0, 0, 0, .08); }

/* Sheets float above the bottom edge, all corners rounded, like iOS 26 */
.sheet {
  border: 0; border-radius: 34px;
  width: calc(100% - 16px); margin: 0 8px calc(8px + env(safe-area-inset-bottom));
  padding-bottom: 24px;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, .16), inset 0 1px 0 var(--rim-hi), inset 0 0 0 .5px var(--rim-lo), inset 0 0 26px rgba(255, 255, 255, .08);
}
.overlay { background: rgba(0, 0, 0, .26); }

/* Toast capsule */
.toast { border: 0; box-shadow: var(--glass-shadow), var(--glass-inner); }

/* Round buttons and the profile chip in the top bar: little glass drops. M19.3: no blur of their own — the bar is
   already glass, and glass inside glass made their text look soft on the iPhone. */
.icon-btn, .profile-chip { position: relative; background: var(--glass); box-shadow: var(--glass-inner); }
.icon-btn[aria-current="page"] { background: var(--accent); }

/* Buttons: the primary capsule gets a glossy top light; secondary is tinted glass */
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 88%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.btn-secondary { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), inset 0 0 0 .5px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Cards: content, not glass, but with a softer edge */
.card { box-shadow: var(--shadow), var(--card-rim); }

/* «Adicionar perfil» tile */
.profile-face.add-face { border: 0; box-shadow: var(--glass-inner);
  background: var(--glass); outline: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -10px; }

@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --glass-strong: var(--surface); }
}

/* M19.2: full screen behind the Dynamic Island (status bar "black-translucent"). iOS then draws the clock and
   battery in white; in light mode a soft shade behind them keeps them readable. Content stays below the island
   through env(safe-area-inset-top), already used by every bar and screen. */
@media (display-mode: standalone) {   /* 2.3: follows the app's theme (forced Light on a dark phone too) */
  :root[data-theme="light"] body::after {
    content: ''; position: fixed; inset: 0 0 auto 0; z-index: 250; pointer-events: none;
    height: env(safe-area-inset-top);   /* M19.3: only the status bar area, never over the title or the profile name */
    background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .1) 75%, transparent);
  }
}

/* M19.6: short pages (Conversa, Vocabulário) made the floating tab bar ride up on the iPhone in full screen.
   Every page is now at least as tall as the whole screen, so the bar's "bottom" is always the real bottom. */
html { min-height: 100%; }   /* rubber band kept (owner likes it) */
body { min-height: 100vh; min-height: 100lvh; }

/* M21: the language each profile learns */
.profile-flag { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem; background: var(--glass-strong); box-shadow: var(--glass-inner), 0 2px 6px rgba(0, 0, 0, .18); }
.learn-segmented { margin-top: 4px; }
.learn-segmented button { font-size: .92rem; }
.learn-segmented button:disabled { opacity: .35; cursor: default; }
.learn-locked { margin: -8px 4px 10px; }
.profiles-switch { margin-top: 10px; font-weight: 600; }
.profiles-code { margin-top: 2px; font-weight: 600; }   /* M23.2: «Tenho um código de família» */   /* M21.1: the other language's profiles */

/* M21.2: WhatsApp-style recording (hold, slide left to cancel, slide up to lock) */
.talk-btn { flex-wrap: wrap; align-content: center; row-gap: 2px; }
.talk-hint { flex-basis: 100%; text-align: center; font-size: .74rem; font-weight: 500; opacity: .88; }
.talk-btn.talk-cancel { background: linear-gradient(180deg, #8E8E93, #636366); animation: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.talk-btn.talk-locked { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 80%, #fff), var(--ok)); animation: none;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ok) 35%, transparent); }
/* M21.6: the profiles logo is a button back to the entrance */
.profiles-logo-btn { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 16px; display: inline-block; }
.profiles-logo-btn:active { transform: scale(.94); }

/* M21.8: the conversation scrolls UNDER the top (teacher, title) and the bottom shelf, like iOS Messages:
   it fills the whole session, its padding keeps the first and last bubbles clear (sizes measured in session.js:
   --log-top, --log-bottom), and the top is frosted glass that fades out instead of a straight cut. */
.session-log { position: absolute; inset: 0; z-index: 0; max-width: none; width: auto; margin: 0;
  padding: calc(var(--log-top, 230px) + 6px) max(16px, calc((100% - 640px) / 2 + 16px)) 0; }
/* 2.2.1 (Irina couldn't scroll to the last card, hidden under «Falar»): Safari can ignore the bottom padding of a
   scrolling flex column, so the room under the last bubble is a real (invisible) last item instead. */
.session-log::after { content: ''; flex: 0 0 calc(var(--log-bottom, 190px) + 14px); }
.session-top, .session-steps, .session-stage, .session-controls { position: relative; z-index: 2; }
.session-controls { margin-top: auto; }
.session-stage::after { display: none; }
.session::before { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; pointer-events: none;
  height: calc(var(--log-top, 230px) + 36px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 78%, transparent 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }

/* M22: the entrance — the teachers are the buttons */
.splash-title { margin-top: 0; }
.splash-sub { margin-bottom: 8px; }
.splash-duo { position: relative; display: flex; gap: 20px; justify-content: center; margin: 34px 0 22px; }
.splash.en-first .splash-teacher[data-learn="pt"] { order: -1; }
.splash-teacher { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease, transform .3s ease; }
.splash-hero { display: block; }
.splash-disc .avatar { display: block; }
.splash-disc { transition: transform .18s cubic-bezier(.3, .7, .4, 1.4); }
.splash-teacher:active .splash-disc { transform: scale(.93); }
.splash-teacher[data-learn="pt"] .splash-halo { background: radial-gradient(closest-side, color-mix(in srgb, #34C759 42%, transparent), transparent); }
.splash-wave { right: -10px; left: auto; top: -12px; }
.splash-label { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.splash-label b { font-family: var(--font-display); font-size: 1.08rem; }
.splash-label small { font-size: .8rem; color: var(--muted); font-weight: 500; text-align: center; text-wrap: balance; }
.splash-bubble.b1 { left: -10px; top: -26px; }
.splash-bubble.b2 { right: -10px; top: -26px; }
.splash-bubble.b3 { left: calc(50% - 36px); top: 64px; bottom: auto; }
.splash-hint { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }
/* M23.2: the credit at the bottom of the entrance (owner) */
.splash-credit { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 16px); margin: 0; text-align: center; color: var(--muted); font-size: .8rem; }
/* The tap: the chosen teacher jumps, a ring of light spreads out, the other one fades away */
.splash-teacher.chosen .splash-disc { animation: teacher-pick .42s ease forwards; }
.splash-teacher.chosen .splash-halo { animation: teacher-ripple .5s ease-out forwards; }
.splash-teacher.chosen .splash-label b { color: var(--accent); }
.splash.picking .splash-teacher:not(.chosen) { opacity: .2; transform: scale(.9); }
@keyframes teacher-pick { 0% { transform: scale(1); } 35% { transform: scale(.9); } 75% { transform: scale(1.14); } 100% { transform: scale(1.08); } }
@keyframes teacher-ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@media (max-width: 360px) { .splash-hero { width: 132px; height: 132px; } .splash-disc .avatar { width: 108px; } }
.splash-teacher[data-learn="pt"].chosen .splash-label b { color: #1F8A5B; }   /* Mrs. Inês: Portuguese green */

/* M22: grammar guide (js/guide.js), inside Vocabulário */
/* M23.3: guide topics grouped by difficulty */
.guide-group { margin: 22px 4px 10px; font-size: 1.1rem; font-weight: 700; }
.guide-group:first-of-type { margin-top: 8px; }
.vocab-sides { margin: 0 0 16px; }
.guide-lead { margin: 0 2px 14px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.guide-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; min-height: 128px;
  border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), var(--card-rim);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .15s cubic-bezier(.3, .7, .4, 1.4); }
.guide-card:active { transform: scale(.96); }
.guide-emoji { font-size: 2rem; line-height: 1.1; }
.guide-emoji.big { font-size: 2.8rem; }
.guide-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.guide-sub { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.guide-best { position: absolute; top: 12px; right: 12px; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--ink); }
.guide-back { padding-left: 4px; margin: -6px 0 6px; }
.guide-head { text-align: center; }
.guide-head h2 { margin: 6px 0 4px; }
.guide-section h3 { margin-bottom: 8px; }
.guide-items { list-style: none; margin: 0; padding: 0; }
.guide-items li + li { border-top: .5px solid var(--line); }
.guide-item { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; width: 100%; padding: 10px 2px; border: 0;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; transition: background .2s ease; }
.guide-item:active, .guide-item.saying { background: var(--accent-soft); }
.guide-t { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.guide-n { grid-column: 1; color: var(--muted); font-size: .92rem; }
.guide-note { grid-column: 1; font-size: .8rem; color: var(--muted); font-style: italic; }
.guide-speaker { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1rem; opacity: .55; }
.guide-tip { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: #1C1C1E; color: #fff; font-weight: 600; text-align: center; }
:root[data-theme="dark"] .guide-tip { background: #F2F2F7; color: #1C1C1E; }
.guide-quiz { text-align: center; }
.guide-q { font-size: 1.08rem; font-weight: 600; margin: 4px 0 14px; }
.guide-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.guide-option.right { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ok); }
.guide-option.wrong { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--ink); box-shadow: inset 0 0 0 2px var(--danger); }
.guide-option:disabled { opacity: 1; }
.guide-why { margin: 0 0 12px; }
.guide-stars { font-size: 1.8rem; letter-spacing: 4px; margin: 0 0 4px; }
.guide-stars .off { opacity: .2; }
/* M22 review fix: scrollIntoView (lesson «Ouvir» step) keeps cards clear of the frosted top and the shelf */
.session-log { scroll-padding-top: calc(var(--log-top, 230px) + 8px); scroll-padding-bottom: calc(var(--log-bottom, 190px) + 12px); }

/* ---------- 2.3: theme choice (Sistema / Escuro / Claro), in the first-time sheet and in Definições ---------- */
.theme-ask { z-index: 55; }   /* above the family-code sheet that a new device shows at the same moment */
.theme-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.theme-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 10px;
  border: 0; border-radius: 18px; background: var(--glass); box-shadow: var(--glass-inner);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: transform .18s cubic-bezier(.3, .7, .4, 1.4), box-shadow .18s ease;
}
.theme-choice[aria-checked="true"] { box-shadow: var(--glass-inner), 0 0 0 2.5px var(--accent); transform: scale(1.03); }
.theme-name { font-weight: 700; font-size: .95rem; }
.theme-note { font-size: .72rem; color: var(--muted); line-height: 1.2; text-align: center; }
/* The little screen: its own fixed colours, whatever the app's theme is now. */
.theme-mini {
  --m-bg: #F2F2F7; --m-card: #FFFFFF; --m-bar: rgba(0, 0, 0, .1); --m-bubble: #007AFF;
  position: relative; width: 100%; max-width: 78px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--m-bg); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15), 0 4px 12px rgba(0, 0, 0, .12);
}
.theme-mini.dark { --m-bg: #000000; --m-card: #1C1C1E; --m-bar: rgba(255, 255, 255, .18); --m-bubble: #0A84FF; }
.theme-mini.system { background: linear-gradient(135deg, #F2F2F7 50%, #000000 50%); }
.theme-mini i { position: absolute; left: 12%; right: 12%; border-radius: 4px; }
.theme-mini i:nth-child(1) { top: 10%; height: 7%; right: 45%; background: var(--m-bar); }
.theme-mini i:nth-child(2) { top: 24%; height: 34%; background: var(--m-card); border-radius: 7px; }
.theme-mini i:nth-child(3) { top: 66%; height: 14%; left: 40%; background: var(--m-bubble); border-radius: 8px; }
.theme-mini.system i:nth-child(1) { background: rgba(0, 0, 0, .1); }
.theme-mini.system i:nth-child(2) { background: linear-gradient(135deg, #FFFFFF 50%, #1C1C1E 50%); }
@media (prefers-reduced-motion: reduce) { .theme-choice { transition: none; } .theme-choice[aria-checked="true"] { transform: none; } }

/* ---------- 2.4: exam preparation (js/exam.js) ---------- */
.lessons-sides, .exam-picker { margin-bottom: 16px; }
.exam-head h3 { margin-bottom: .4em; }
.exam-task .lesson-name { display: flex; flex-direction: column; gap: 1px; }
.exam-task .lesson-name small { font-size: .78rem; line-height: 1.25; }
.exam-ready h3 { margin-bottom: 12px; }
.exam-bar { display: grid; grid-template-columns: 7.5em 1fr 3.2em; align-items: center; gap: 10px; margin: 8px 0; font-size: .92rem; }
.exam-bar-track { position: relative; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: visible; }
.exam-bar-track span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--gold); transition: width .4s ease; }
.exam-bar.ok .exam-bar-track span { background: var(--ok); }
.exam-bar-track i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .55; }
.exam-bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.exam-overall { margin: 10px 0 4px; font-size: 1.1rem; }
.exam-card { max-width: none; }
.exam-instr { font-weight: 600; margin-bottom: .3em; }
.exam-passage { margin: 16px 0 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.exam-passage h4 { margin-bottom: .4em; }
.exam-text { white-space: pre-wrap; margin: 0; }
.exam-q { margin: 12px 0 14px; }
.exam-q > p { margin-bottom: 6px; }
.exam-options { display: flex; flex-direction: column; gap: 6px; }
.exam-option { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--card-rim), 0 0 0 1px var(--line); }
.exam-option b { color: var(--muted); }
.exam-option.chosen { box-shadow: 0 0 0 2px var(--accent); }
.exam-option.right { box-shadow: 0 0 0 2px var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.exam-option.wrong { box-shadow: 0 0 0 2px var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.exam-input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.exam-q.is-right .exam-input { border-color: var(--ok); }
.exam-q.is-wrong .exam-input { border-color: var(--danger); }
.exam-solution { color: var(--ok); font-weight: 600; margin: 4px 0 0; }
.exam-play { width: 100%; }
.exam-script { margin-top: 8px; font-size: .92rem; }
.exam-script summary { cursor: pointer; color: var(--accent); }
.exam-stimulus { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface-2); white-space: pre-wrap; }
.exam-write { width: 100%; min-height: 9em; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.exam-count { margin-top: 6px; }
.exam-score { font-size: 1.2rem; margin-bottom: 8px; }
.exam-criteria, .exam-summary { list-style: none; padding: 0; margin: 8px 0 12px; }
.exam-criteria li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: .5px solid var(--line); }
.exam-criteria li .muted { grid-column: 1 / -1; }
.exam-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: .5px solid var(--line); }
.bubble-tutor p.is-partner { color: #AF52DE; font-style: italic; }   /* 2.4: the other exam candidate (another voice too) */
/* 2.4.2: Início's exam card — the exam's name as a badge */
.exam-badge { display: grid; place-items: center; font: 800 .72rem/1 var(--font-display); letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, #1F8A5B, #0A84FF); }

/* ---------- 2.5: «Vida em Portugal / Life in Portugal» (js/life.js — remove this block with the feature) ---------- */
.life-icon { font-size: 1.5rem; background: linear-gradient(135deg, #1F8A5B, #D52B1E); }
.life-ask textarea { width: 100%; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; margin: 6px 0; }
.life-answer { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.life-answer.unsure { box-shadow: inset 3px 0 0 var(--gold); }
.life-a { white-space: pre-wrap; margin-bottom: 8px; }
.life-q { margin-bottom: 6px; font-style: italic; }
.life-guide-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--ink); border: 0; cursor: pointer; }
.life-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.life-row-text small { font-size: .82rem; line-height: 1.3; }
.life-emoji { font-size: 1.6rem; }
.life-emoji.big { font-size: 2.4rem; margin: 0 0 4px; }
.life-chevron { color: var(--muted); font-size: 1.4rem; }
.life-back { margin: 0 0 8px -8px; }
.life-guide h3 { margin-top: 18px; }
.life-steps li, .life-points li { margin-bottom: .45em; }
.life-review { margin: 16px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.life-review ul { margin: 4px 0 0; padding-left: 1.2em; font-size: .92rem; }
.life-sources { padding-left: 1.2em; font-size: .92rem; }
.life-sources li { margin-bottom: .3em; word-break: break-word; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }