/* DeutschDojo — Apple HIG design language (see apple.md).
   Semantic tokens, 8pt grid, squircle radii, frosted materials, spring motion. */

:root {
  /* system tints (light) */
  --blue: #078C92; --green: #22A777; --orange: #F58A38; --red: #E85353;
  --teal: #11A7A5; --indigo: #5867B1; --gray: #8E8E93;
  /* grouped backgrounds — page slightly below pure white so cards read as panels */
  --bg: #F3F8F8; --card: #FFFFFF; --card2: #EEF7F7; --card3: #DCECED;
  --ink: #10264A; --ink2: #5E6F8E; --ink3: #93A0B6;
  --sep: rgba(60,60,67,.14);
  --material: rgba(249,249,251,.78);
  --shadow: 0 1px 2px rgba(16,38,74,.03), 0 12px 34px -18px rgba(31,78,95,.25);
  --r-card: 22px; --r-ctl: 15px; --r-pill: 980px;
  --blur: saturate(180%) blur(20px);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blue: #0A84FF; --green: #30D158; --orange: #FF9F0A; --red: #FF453A;
    --teal: #40C8E0; --indigo: #5E5CE6;
    --bg: #000000; --card: #1C1C1E; --card2: #2C2C2E; --card3: #3A3A3C;
    --ink: #F2F2F7; --ink2: rgba(235,235,245,.62); --ink3: rgba(235,235,245,.32);
    --sep: rgba(84,84,88,.5);
    --material: rgba(22,22,24,.72);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -16px rgba(0,0,0,.6);
  }
}
html[data-theme="light"] {
  --blue:#078C92; --green:#22A777; --orange:#F58A38; --red:#E85353;
  --teal:#11A7A5; --indigo:#5867B1;
  --bg:#F3F8F8; --card:#FFFFFF; --card2:#EEF7F7; --card3:#DCECED;
  --ink:#10264A; --ink2:#5E6F8E; --ink3:#93A0B6;
  --sep:rgba(30,88,105,.13); --material:rgba(247,251,253,.82);
  --shadow:0 1px 2px rgba(16,38,74,.03), 0 12px 34px -18px rgba(31,78,95,.25);
}
html[data-theme="dark"] {
  --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A;
  --teal:#40C8E0; --indigo:#5E5CE6;
  --bg:#000000; --card:#1C1C1E; --card2:#2C2C2E; --card3:#3A3A3C;
  --ink:#F2F2F7; --ink2:rgba(235,235,245,.62); --ink3:rgba(235,235,245,.32);
  --sep:rgba(84,84,88,.5); --material:rgba(22,22,24,.72);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -16px rgba(0,0,0,.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 17px; letter-spacing: -0.024em; line-height: 1.45;
  background:
    radial-gradient(900px 420px at 50% -100px, rgba(173,224,244,.58), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg) 72%,#fff) 0, var(--bg) 520px);
  color: var(--ink);
  min-height: 100dvh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------------- top bar (frosted material) ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) max(18px, calc((100vw - 640px) / 2 + 18px)) 10px;
  background: var(--material); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 0;
}
.topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing:-.035em; }
.topbar .brand img { width: 36px; height: 36px; border-radius: 12px; box-shadow:0 6px 18px -10px rgba(16,38,74,.5); }
.topbar .spacer { flex: 1; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb,var(--card) 88%,transparent); border: 1px solid var(--sep); cursor: pointer;
  color: var(--ink2); transition: transform .25s var(--spring), background .2s;
}
.icon-btn:active { transform: scale(.92); }
.streak-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: #fff; font-weight: 800; font-size: 15px; box-shadow:var(--shadow);
  font-variant-numeric: tabular-nums;
}
.streak-pill svg { color: var(--orange); }

/* ---------------- layout ---------------- */
main { max-width: 640px; margin: 0 auto; padding: 12px 18px 28px; }
.view { display: none; animation: viewin .35s var(--spring); }
.view.active { display: block; }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 { font-size: clamp(30px, 7vw, 42px); line-height:1.08; font-weight: 800; letter-spacing: -0.045em; margin: 8px 0 16px; }
h2 { font-size: 20px; font-weight: 700; margin: 24px 0 8px; }
.sub { color: var(--ink2); font-size: 15px; }

/* ---------------- guided daily mission ---------------- */
.section-hero { position:relative; min-height:218px; display:flex; align-items:center; overflow:hidden;
  margin:0 -18px 14px; padding:30px 44% 30px 18px; isolation:isolate; border-radius:0 0 28px 28px;
  box-shadow:0 22px 44px -32px rgba(10,61,66,.65); }
.section-hero::before { content:""; position:absolute; inset:0; z-index:-2;
  background-image:linear-gradient(90deg,rgba(248,251,248,.96) 0%,rgba(248,251,248,.88) 34%,rgba(248,251,248,.12) 61%,transparent 78%),
    url("img/black-forest-hero-1200.png");
  background-size:cover; background-position:center; }
.section-hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,transparent 68%,rgba(239,247,246,.48)); pointer-events:none; }
.section-hero .hero-copy { position:relative; z-index:2; min-width:0; }
.section-hero .hero-copy h1 { margin:2px 0 8px; }
.section-hero .hero-copy > p:last-child { color:var(--ink2); max-width:30ch; font-size:15px; }
.compact-hero { min-height:172px; padding-top:22px; padding-bottom:24px; }
.compact-hero::before { background-position:center 43%; }
.compact-hero .eyebrow { color:var(--blue); }
.progress-board { display:grid; grid-template-columns:1.35fr .8fr; gap:12px; margin-bottom:12px; }
.progress-board > div { background:color-mix(in srgb,var(--card) 94%,transparent); border:1px solid rgba(30,88,105,.07);
  border-radius:var(--r-card); box-shadow:var(--shadow); padding:16px; min-height:142px; }
.card-label { display:block; font-size:15px; font-weight:800; margin-bottom:12px; }
.streak-week { display:flex; flex-direction:column; gap:10px; }
.week-total { display:flex; align-items:baseline; gap:6px; color:var(--orange); font-size:20px; }
.week-total b { color:var(--ink); font-size:34px; line-height:1; }
.week-total small { color:var(--ink2); font-size:13px; }
.week-days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.week-days i { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--card3);
  color:var(--ink2); font-size:10px; font-style:normal; font-weight:800; }
.week-days i.done { background:var(--blue); color:#fff; border-color:var(--blue); }
.today-progress-card { display:flex; flex-direction:column; align-items:center; }
.today-progress-card .card-label { align-self:flex-start; }
.today-heading h1 { margin:0 0 14px; }
.eyebrow { color:var(--ink2); font-size:14px; font-weight:700; margin:8px 0 1px; }
.mission-ring { --p:0; width:82px; height:82px; flex:0 0 82px; border-radius:50%;
  display:grid; place-items:center; background:conic-gradient(var(--green) calc(var(--p) * 1%), var(--card3) 0);
  position:relative; }
.mission-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--card); }
.mission-ring span { position:relative; z-index:1; font-size:17px; font-weight:800; }
.mission-hero { display:flex; gap:14px; align-items:center; padding:18px; border-radius:22px;
  color:#fff; background:linear-gradient(135deg,#087f91,#0a9a98 58%,#2aac83); box-shadow:0 18px 38px -22px rgba(6,111,125,.7); }
.mission-scene { width:66px; height:66px; flex:0 0 66px; border-radius:19px; display:grid; place-items:center;
  font-size:36px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); }
.mission-hero h2 { margin:2px 0; font-size:21px; }
.mission-hero p { font-size:14px; opacity:.88; }
.mission-kicker { font-size:13px; letter-spacing:.06em; font-weight:800; opacity:.82; }
.session-length { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; padding:8px;
  border-radius:20px; background:var(--card); box-shadow:var(--shadow); }
.session-length button { border:0; border-radius:10px; padding:7px 3px; background:transparent; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--ink2); }
.session-length button span { display:block; font-size:13px; font-weight:500; }
.session-length button.on { background:var(--card2); color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }
.mission-cta { min-height:58px; font-weight:800; background:linear-gradient(110deg,#078993,#1aa688 78%); box-shadow:0 16px 30px -18px rgba(6,111,125,.85); }
.return-note { color:var(--ink2); font-size:14px; text-align:center; margin:7px 0 18px; }
.path-title { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.path-title span { font-size:13px; color:var(--ink2); font-weight:600; }
.path-step { position:relative; display:flex; gap:13px; align-items:center; background:transparent; border:0;
  width:100%; padding:7px 4px 16px; color:var(--ink); text-align:left; cursor:pointer; }
.path-step::before { content:""; position:absolute; left:21px; top:48px; bottom:-2px; width:2px; background:var(--card3); }
.path-step:last-child::before { display:none; }
.path-node { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:16px;
  background:var(--card); box-shadow:var(--shadow); font-size:21px; border:2px solid transparent; }
.path-step.current .path-node { border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent); }
.path-step.done .path-node { background:var(--green); color:#fff; font-size:18px; }
.path-copy { flex:1; min-width:0; }
.path-copy strong { display:block; font-size:16px; }
.path-copy small { display:block; color:var(--ink2); font-size:14px; margin-top:1px; }
.path-state { font-size:14px; font-weight:700; color:var(--ink2); }
.path-step.current .path-state { color:var(--blue); }
.path-step.done .path-state { color:var(--green); }
.today-details { margin-top:10px; color:var(--ink2); }
.today-details summary { cursor:pointer; font-size:14px; font-weight:700; padding:10px 2px; }
.today-details .tiles { margin-top:8px; }
.culture-card { display:grid; grid-template-columns:116px 1fr; gap:14px; align-items:center;
  margin:18px 0 6px; padding:10px; background:linear-gradient(120deg,#fff9ed,#fff);
  border:1px solid rgba(201,135,48,.13); border-radius:var(--r-card); box-shadow:var(--shadow); }
.culture-image { width:116px; min-height:92px; align-self:stretch; border-radius:16px;
  background:url("img/black-forest-hero-1200.png") 35% 68%/310% auto no-repeat; }
.culture-copy strong { color:#bf6718; font-size:14px; }
.culture-copy p { margin-top:3px; color:var(--ink); font-size:14px; line-height:1.45; letter-spacing:-.01em; }
.mission-coach { position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:65;
  transform:translateX(-50%); width:min(92vw,600px); display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:16px; background:var(--card); box-shadow:0 12px 35px rgba(0,0,0,.22); }
.mission-coach[hidden] { display:none; }
.mission-coach .coach-check { width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800; }
.mission-coach strong,.mission-coach small { display:block; }
.mission-coach small { color:var(--ink2); font-size:13px; }

/* ---------------- admin dashboard ---------------- */
.admin-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.admin-heading h1 { margin-top:0; }
.admin-health { display:flex; align-items:center; gap:12px; margin-top:14px; }
.health-dot { width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 13%,transparent); }
.health-dot.ok { background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 13%,transparent); }
.admin-users { padding:0 16px; }
.admin-user-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--sep); }
.admin-user-row:last-child { border-bottom:0; }
.admin-avatar { width:40px; height:40px; flex:0 0 40px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--blue) 14%,var(--card2)); color:var(--blue); font-weight:800; }
.admin-badge { font-size:10px; letter-spacing:.06em; color:var(--blue); background:color-mix(in srgb,var(--blue) 12%,transparent);
  padding:3px 6px; border-radius:999px; vertical-align:2px; }

.card {
  background: var(--card); border:1px solid var(--sep); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 12px;
}
.card.tappable { cursor: pointer; transition: transform .25s var(--spring); }
.card.tappable:active { transform: scale(.98); }

.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  border: none; border-radius: var(--r-ctl); cursor: pointer;
  background: linear-gradient(110deg,#078993,#1aa688); color: #fff; font-weight: 750; font-size: 17px;
  transition: transform .25s var(--spring), opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondary { background: var(--card); color: var(--blue); border:1px solid color-mix(in srgb,var(--blue) 25%,transparent); }
.btn.quiet { background: transparent; color: var(--blue); }
.btn.danger { background: var(--red); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 15px; border-radius: 10px; }
.btn.block { width: 100%; }

/* ---------------- inputs ---------------- */
.field { width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--sep); border-radius: var(--r-ctl);
  background: var(--card2); color:var(--ink); outline: none; }
.field:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.field::placeholder { color:var(--ink3); opacity:1; }
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
textarea.field { resize: vertical; min-height: 88px; }
label.lbl { display: block; font-size: 13px; color: var(--ink2); margin: 12px 0 4px; font-weight: 600; }

/* ---------------- tab bar ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--material); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-top: 0.5px solid var(--sep);
}
.tab {
  flex: 1; max-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  color: var(--ink3); font-size: 11px; font-weight: 600; letter-spacing: 0;
  padding: 4px 0; border-radius: 10px;
  transition: color .2s;
}
.tab svg { width: 26px; height: 26px; }
.tab.active { color: var(--blue); }
.tab.active svg { stroke-width:2.25; }

/* ---------------- stat tiles ---------------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px; }
.tile .big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile .cap { font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 5px; }
.tile .cap svg { width: 15px; height: 15px; }

/* ---------------- flashcards ---------------- */
.flashcard {
  min-height: 300px; perspective: 1200px; margin-bottom: 16px;
}
.flash-inner {
  position: relative; width: 100%; min-height: 300px;
  transform-style: preserve-3d; transition: transform .5s var(--spring);
}
.flashcard.flipped .flash-inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
}
.flash-face.back { transform: rotateY(180deg); }
.flash-word { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.flash-word .art-der { color: var(--blue); }
.flash-word .art-die { color: var(--red); }
.flash-word .art-das { color: var(--green); }
.flash-meta { color: var(--ink2); font-size: 15px; }
.flash-example { font-size: 15px; color: var(--ink2); font-style: italic; max-width: 42ch; }
.gender-chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.gender-chip.der { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.gender-chip.die { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.gender-chip.das { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }

.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade-btn {
  min-height: 52px; border: none; border-radius: var(--r-ctl); cursor: pointer;
  font-weight: 700; font-size: 15px; color: #fff;
  display: flex; flex-direction: column; gap: 0;
  align-items: center; justify-content: center;
  transition: transform .25s var(--spring);
}
.grade-btn:active { transform: scale(.95); }
.grade-btn small { font-weight: 500; font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
.grade-1 { background: var(--red); } .grade-2 { background: var(--orange); }
.grade-3 { background: var(--green); } .grade-4 { background: var(--blue); }

.queue-count { text-align: center; color: var(--ink2); font-size: 13px;
  font-variant-numeric: tabular-nums; margin-bottom: 12px; }

/* ---------------- shadowing ---------------- */
.shadow-sentence { font-size: 22px; font-weight: 600; line-height: 1.4; text-align: center; }
.shadow-translation { text-align: center; color: var(--ink2); font-size: 15px; margin-top: 6px; }
.shadow-controls { display: flex; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.round-btn {
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--blue);
  box-shadow: var(--shadow); transition: transform .25s var(--spring);
}
.round-btn:active { transform: scale(.92); }
.round-btn.rec { background: var(--red); }
.round-btn.rec.recording { animation: pulse 1.2s ease-in-out infinite; }
.round-btn.secondary { background: var(--card2); color: var(--blue); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); }
  50% { box-shadow: 0 0 0 14px transparent; } }
.round-lbl { font-size: 11px; color: var(--ink2); text-align: center; margin-top: 4px; font-weight: 600; }

.score-ring { display: grid; place-items: center; position: relative; margin: 8px auto; width: 120px; height: 120px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .val { position: absolute; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.word-diff { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.word-diff span { padding: 3px 8px; border-radius: 8px; font-size: 15px; }
.word-diff .ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.word-diff .close { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.word-diff .wrong, .word-diff .missing { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); text-decoration: underline dotted; }

/* ---------------- translate ---------------- */
.prompt-box { font-size: 20px; font-weight: 600; line-height: 1.4; }
.verdict { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.verdict.good { color: var(--green); } .verdict.mixed { color: var(--orange); }
.corr-line { font-size: 18px; line-height: 1.5; }
.err-item { border-top: 0.5px solid var(--sep); padding: 10px 0; }
.err-tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--indigo); }
.err-pair { margin: 4px 0; font-size: 15px; }
.err-pair del { color: var(--red); text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); }
.err-pair ins { color: var(--green); text-decoration: none; font-weight: 600; }
.err-expl { color: var(--ink2); font-size: 14px; }

/* ---------------- tutor chat ---------------- */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateY(100%); transition: transform .45s var(--spring);
}
.sheet.open { transform: none; }
.sheet .sheet-bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--material); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 0.5px solid var(--sep);
}
.chat-log {
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; line-height: 1.4; }
.bubble.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.bubble.bot { align-self: flex-start; background: var(--card); box-shadow: var(--shadow); border-bottom-left-radius: 6px; }
.bubble .speak { border: none; background: none; cursor: pointer; color: var(--ink3); padding: 0; margin-left: 6px; vertical-align: middle; }
.bubble-note { align-self: flex-end; max-width: 82%; font-size: 13px; color: var(--ink2);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-radius: 12px; padding: 8px 12px; }
.bubble-note .err-tag { font-size: 10px; }
.chat-input {
  flex:0 0 auto;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--material); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-top: 0.5px solid var(--sep);
}
.chat-input textarea { flex: 1; min-height: 44px; max-height: 120px; border-radius: 22px; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.scenario-card { position: relative; background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px; cursor: pointer; transition: transform .25s var(--spring); border: none; text-align: left; }
.scenario-card:active { transform: scale(.96); }
.scenario-card .t { font-weight: 700; font-size: 15px; }
.scenario-card .s { font-size: 12px; color: var(--ink2); margin-top: 2px; }
.scenario-card.new-topic { background: transparent; box-shadow: none;
  border: 1.5px dashed var(--sep); color: var(--ink2); }
.sc-del { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; line-height: 19px;
  text-align: center; border-radius: 50%; font-size: 14px; color: var(--ink2);
  background: color-mix(in srgb, var(--ink2) 12%, transparent); }
.sc-del:hover { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }

/* ---------------- tutor personas ---------------- */
.persona-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.persona-chip { position: relative; border: 1.5px solid transparent; background: var(--card);
  border-radius: 14px; box-shadow: var(--shadow); padding: 10px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .25s var(--spring), border-color .2s; }
.persona-chip:active { transform: scale(.94); }
.persona-chip.on { border-color: var(--blue); }
.persona-chip.on .p-emoji { animation: p-pop .45s var(--spring); }
.persona-chip .p-emoji { font-size: 26px; line-height: 1.2; }
.persona-chip .p-name { font-weight: 700; font-size: 13px; }
.persona-chip .p-tag { font-size: 10px; color: var(--ink2); text-align: center; line-height: 1.25; }
.persona-hello { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  background: color-mix(in srgb, var(--blue) 9%, var(--card)); border-radius: 14px;
  padding: 10px 14px; font-weight: 600; animation: hello-in .4s var(--spring); }
.persona-hello .p-emoji { font-size: 26px; display: inline-block; }
.tutor-avatar { width:38px; height:38px; object-fit:cover; border-radius:13px;
  border:2px solid color-mix(in srgb,var(--blue) 24%,transparent); box-shadow:var(--shadow); }
@keyframes p-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes hello-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; } }
/* per-persona hello animations */
.anim-wave { animation: a-wave 1s ease-in-out 2; transform-origin: 70% 80%; }
.anim-nod { animation: a-nod 1.1s ease-in-out 2; }
.anim-bow { animation: a-bow 1.4s ease-in-out 1; transform-origin: 50% 100%; }
.anim-bounce { animation: a-bounce .8s cubic-bezier(.28,.84,.42,1) 2; }
@keyframes a-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 50% { transform: rotate(14deg); } 75% { transform: rotate(-10deg); } }
@keyframes a-nod { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(3px) rotate(6deg); } 60% { transform: translateY(0) rotate(-4deg); } }
@keyframes a-bow { 0%,100% { transform: rotate(0); } 40% { transform: rotate(12deg) translateY(2px); } 60% { transform: rotate(12deg) translateY(2px); } }
@keyframes a-bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 65% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .anim-wave, .anim-nod, .anim-bow, .anim-bounce, .persona-chip.on .p-emoji { animation: none; }
}

/* ---------------- shadowing: veiled text + compare ---------------- */
.shadow-sentence.veiled {
  min-height:72px;
  color:transparent;
  text-shadow:none;
  filter:none;
  user-select:none;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--card3),color-mix(in srgb,var(--card3) 58%,transparent)) 0 10px/84% 12px no-repeat,
    linear-gradient(90deg,var(--card3),color-mix(in srgb,var(--card3) 58%,transparent)) 0 40px/58% 12px no-repeat;
}
.shadow-sentence { color:var(--ink); transition:color .25s ease; }

/* ---------------- graded listening ---------------- */
.listen-opt.picked { border: 1.5px solid var(--blue); }
.listen-opt.correct { border: 1.5px solid var(--green); background: color-mix(in srgb, var(--green) 12%, var(--card)); }
.listen-opt.wrong { border: 1.5px solid var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card)); opacity: .85; }
.listen-text { line-height: 1.7; margin-top: 6px; }
.tap-word { cursor: pointer; border-radius: 5px; padding: 0 1px; transition: background .15s; }
.tap-word:hover { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.tap-word.adding { opacity: .5; }
.tap-word.added { background: color-mix(in srgb, var(--green) 20%, transparent); }

/* ---------------- games ---------------- */
.sprint-word { text-align: center; font-size: 32px; font-weight: 800; margin: 10px 0 2px; }
.sprint-row { display: flex; gap: 10px; margin-top: 14px; }
.sprint-btn { flex: 1; min-height: 52px; border: none; border-radius: 14px; font-size: 19px;
  font-weight: 800; cursor: pointer; background: var(--card2); color: var(--ink);
  transition: transform .15s var(--spring); }
.sprint-btn:active { transform: scale(.93); }
.sprint-btn.der { color: var(--blue); }
.sprint-btn.die { color: var(--red); }
.sprint-btn.das { color: var(--green); }
.sprint-btn.correct { background: color-mix(in srgb, var(--green) 22%, var(--card2)); }
.sprint-btn.wrong { background: color-mix(in srgb, var(--red) 22%, var(--card2)); }
.sprint-timer { height: 4px; background: var(--card2); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.sprint-timer i { display: block; height: 100%; width: 100%; background: var(--orange);
  border-radius: 2px; transition: width 3.5s linear; }

/* ---------------- grammar reference ---------------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
.chips .chip { flex: 0 0 auto; border: none; background: var(--card); box-shadow: var(--shadow);
  border-radius: 980px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.chips .chip:active { transform: scale(.95); }
.gram-sec { background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  margin-bottom: 10px; padding: 0 14px; }
.gram-sec summary { display: flex; align-items: center; gap: 8px; padding: 13px 0;
  cursor: pointer; list-style: none; font-size: 15px; }
.gram-sec summary::-webkit-details-marker { display: none; }
.gram-sec summary::after { content: "›"; margin-left: auto; color: var(--ink2);
  font-size: 18px; transition: transform .25s var(--spring); }
.gram-sec[open] summary::after { transform: rotate(90deg); }
.lvl-chip { font-size: 11px; font-weight: 700; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent); border-radius: 6px; padding: 1px 6px; }
.g-note { margin: -4px 0 8px; }
.g-cap { font-weight: 700; font-size: 13px; margin: 10px 0 6px; color: var(--ink2); }
.g-scroll { overflow-x: auto; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
table.gram { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 320px; }
table.gram th, table.gram td { padding: 6px 10px; text-align: left; border-bottom: 0.5px solid var(--sep); }
table.gram thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink2); border-bottom: 1.5px solid var(--sep); }
table.gram tbody th { font-weight: 700; color: var(--blue); white-space: nowrap; }
table.gram tbody tr:last-child th, table.gram tbody tr:last-child td { border-bottom: none; }
.g-tips { margin: 4px 0 12px; padding-left: 18px; }
.g-tips li { font-size: 13px; color: var(--ink2); margin-bottom: 4px; }

/* ask-a-question card (help desk, not role-play) */
.ask-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  border: none; cursor: pointer; border-radius: 14px; padding: 13px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, var(--card)),
    color-mix(in srgb, var(--indigo, #5856D6) 12%, var(--card)));
  box-shadow: var(--shadow); transition: transform .25s var(--spring); }
.ask-card:active { transform: scale(.97); }
.ask-card .s { font-size: 12px; color: var(--ink2); }

/* ---------------- mascot FAB ---------------- */
.fab {
  position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 50;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--card); box-shadow:0 14px 30px -13px rgba(16,38,74,.55);
  display: grid; place-items: center; padding:3px; overflow:hidden;
  animation: bob 3.2s ease-in-out infinite;
  transition: transform .25s var(--spring);
}
.fab img { width:100%; height:100%; border-radius:50%; }
.fab:hover { animation: wiggle .5s ease-in-out; }
.fab:active { transform: scale(.9); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
body:has(.sheet.open) .fab, body:has(dialog[open]) .fab { display: none; }

/* ---------------- insights ---------------- */
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 8px; }
.bar-chart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.bar-chart .bar i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: var(--blue); min-height: 2px; }
.bar-chart .bar b { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-chart .bar small { font-size: 9px; color: var(--ink3); overflow: hidden; white-space: nowrap; }
.tag-bars .tag-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px; padding: 6px 0; }
.tag-bars .tag-row .meter { height: 10px; border-radius: 5px; background: var(--card2); overflow: hidden; }
.tag-bars .tag-row .meter i { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--orange), var(--red)); }
.tag-bars .tag-row b { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
.heat { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--card2); }
.heat i.l1 { background: color-mix(in srgb, var(--green) 30%, var(--card2)); }
.heat i.l2 { background: color-mix(in srgb, var(--green) 60%, var(--card2)); }
.heat i.l3 { background: var(--green); }

/* ---------------- dialogs / auth / tour ---------------- */
dialog {
  border: none; border-radius: var(--r-card); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow); padding: 22px; width: min(92vw, 420px);
  margin: auto;
}
dialog::backdrop { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(92vw, 380px); background: var(--card); border-radius: var(--r-card);
  box-shadow:0 30px 70px -30px rgba(16,38,74,.38); padding: 30px; text-align: center; border:1px solid rgba(30,88,105,.08); }
.auth-card .mascot { font-size: 58px; }
.auth-card .mascot-img { width: 88px; height: 88px; border-radius: 22px;
  box-shadow: var(--shadow); margin-bottom: 4px; }
.brand-logo { width: 24px; height: 24px; border-radius: 7px; vertical-align: -6px; }
.seg { display: flex; background: var(--card2); border-radius: 10px; padding: 2px; margin: 14px 0; }
.seg button { flex: 1; border: none; background: none; padding: 7px; border-radius: 8px;
  font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink2); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 80;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; pointer-events: none;
  transition: transform .35s var(--spring), opacity .35s var(--spring); max-width: 86vw; text-align: center;
}
.toast.show { transform: translateX(-50%); opacity: 1; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px;
  animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }

.empty { text-align: center; color: var(--ink2); padding: 36px 16px; }
.empty .big-emoji { font-size: 40px; }

.skeleton { border-radius: var(--r-card); background: linear-gradient(100deg, var(--card2) 40%, var(--card3) 50%, var(--card2) 60%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; min-height: 90px; margin-bottom: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------- spotlight onboarding (highlight, never hide) ---------------- */
.spot-overlay { position: fixed; inset: 0; z-index: 100; pointer-events: auto; }
.spot-hole {
  position: absolute; border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .55);
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  transition: left .45s var(--spring), top .45s var(--spring), width .45s var(--spring), height .45s var(--spring), box-shadow .45s var(--spring);
  animation: spot-glow 1.6s ease-in-out infinite;
}
@keyframes spot-glow {
  0%, 100% { outline-color: var(--blue); }
  50% { outline-color: color-mix(in srgb, var(--blue) 40%, transparent); }
}
.spot-hole.none { /* welcome step: dim everything, no cutout */
  width: 0; height: 0; left: 50%; top: 40%;
  outline: none; animation: none; border-radius: 50%;
}
.spot-tip {
  position: absolute; z-index: 101;
  width: min(88vw, 340px);
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 16px; transition: left .45s var(--spring), top .45s var(--spring);
}
.spot-tip .spot-mascot { font-size: 34px; line-height: 1; }
.spot-tip h3 { font-size: 17px; font-weight: 700; margin: 6px 0 2px; }
.spot-tip p { font-size: 14px; color: var(--ink2); margin: 0; }
.spot-tip .spot-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.spot-dots { display: flex; gap: 5px; flex: 1; }
.spot-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--card3); }
.spot-dots i.on { background: var(--blue); }

/* ---------------- word packs & level picker ---------------- */
.level-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px; text-align: center; border: none; cursor: pointer;
  transition: transform .25s var(--spring);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.pack:active { transform: scale(.95); }
.pack .lvl { font-size: 17px; font-weight: 800; }
.pack .cnt { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.pack .st { font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 8px; margin-top: 3px; }
.pack .st.in { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.pack .st.add { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.pack .st.part { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.pack.current { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ---------------- auth polish ---------------- */
.auth-wrap {
  background:
    radial-gradient(60% 40% at 20% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%),
    radial-gradient(50% 35% at 90% 100%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 70%),
    var(--bg);
}
.auth-card .mascot {
  display: inline-grid; place-items: center;
  width: 84px; height: 84px; border-radius: 24px; font-size: 46px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 18%, var(--card)), var(--card));
  box-shadow: var(--shadow); margin-bottom: 4px;
}

@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .scenario-grid { grid-template-columns: repeat(3, 1fr); }
  .packs { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 520px) {
  .topbar { gap:6px; }
  .topbar .brand { font-size:18px; }
  .section-hero { min-height:198px; padding-right:43%; }
  .progress-board > div { padding:14px; }
  .week-days { gap:3px; }
  .week-days i { width:20px; height:20px; }
  .row { gap:8px; }
  #vocabHome > .row .btn { padding-inline:10px; font-size:14px; }
  .culture-card { grid-template-columns:92px 1fr; }
  .culture-image { width:92px; min-height:90px; }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .section-hero::before {
    background-image:linear-gradient(90deg,rgba(9,27,31,.96) 0%,rgba(9,27,31,.8) 36%,rgba(9,27,31,.08) 68%),
      url("img/black-forest-hero-1200.png");
    background-size:cover; background-position:center;
  }
  html:not([data-theme="light"]) .section-hero::after { opacity:.35; }
  html:not([data-theme="light"]) body { background:var(--bg); }
  html:not([data-theme="light"]) .culture-card { background:linear-gradient(120deg,#2b241b,var(--card)); }
}
html[data-theme="dark"] .section-hero::before {
  background-image:linear-gradient(90deg,rgba(9,27,31,.96) 0%,rgba(9,27,31,.8) 36%,rgba(9,27,31,.08) 68%),
    url("img/black-forest-hero-1200.png");
  background-size:cover; background-position:center;
}
html[data-theme="dark"] .section-hero::after { opacity:.35; }
html[data-theme="dark"] body { background:var(--bg); }
html[data-theme="dark"] .culture-card { background:linear-gradient(120deg,#2b241b,var(--card)); }

/* ---------------- Black Forest mockup alignment ---------------- */
.insights-shortcut {
  width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center;
  border:0; border-radius:16px; cursor:pointer; color:#fff;
  background:linear-gradient(145deg,#087f91,#19a38f); box-shadow:0 12px 26px -14px rgba(5,111,119,.9);
}
.insights-shortcut svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.insights-shortcut.active { box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent),0 12px 26px -14px rgba(5,111,119,.9); }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fff;
  color:var(--blue); font-size:23px; box-shadow:var(--shadow); }

.section-hero { min-height:252px; padding:34px 48% 34px 24px; border-radius:0 0 30px 30px; }
.today-hero { min-height:290px; }
.compact-hero { min-height:242px; }
.section-hero::before {
  background-image:linear-gradient(90deg,rgba(250,252,249,.96) 0%,rgba(250,252,249,.87) 34%,rgba(250,252,249,.08) 62%,transparent 76%),
    url("img/black-forest-hero-1200.png");
}
.section-hero .hero-copy h1 { font-size:clamp(34px,7vw,46px); margin-bottom:10px; }
.section-hero .hero-copy > p { font-size:17px; line-height:1.45; }
.hero-prompt { display:block; margin-top:10px; font-size:clamp(20px,4.6vw,27px); line-height:1.28; letter-spacing:-.025em; }

#vocabTiles .tile { min-height:116px; display:flex; flex-direction:column; justify-content:space-between; }
#vocabTiles .big { font-size:40px; }
#startReview { min-height:58px; margin-bottom:14px; }
.vocab-feature { display:grid; grid-template-columns:126px 1fr; gap:18px; align-items:start; padding:18px; }
.vocab-feature > img { width:126px; height:126px; object-fit:cover; border-radius:50%; background:var(--card2); }
.vocab-feature > img.object-image { object-fit:contain; }
.vocab-feature-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vocab-feature-title strong { font-size:29px; letter-spacing:-.035em; }
.article-der { color:#2485ba; }
.sound-dot { width:44px; height:44px; border:0; border-radius:50%; background:var(--card2); cursor:pointer; }
.vocab-feature-main > p { color:var(--ink2); font-size:14px; }
.word-kind { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:5px; border-radius:50%;
  background:color-mix(in srgb,var(--blue) 14%,var(--card)); color:var(--blue); font-weight:800; }
.word-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 12px; padding-top:12px; border-top:1px solid var(--sep); }
.word-facts span { display:flex; flex-direction:column; font-weight:750; font-size:15px; }
.word-facts small { color:var(--ink2); font-weight:500; margin-bottom:2px; }
.word-example { display:flex; flex-direction:column; padding-top:10px; border-top:1px solid var(--sep); color:var(--blue)!important; }
.word-example small { color:var(--ink2); margin-top:2px; }
.vocab-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 20px; }
.vocab-actions .btn,.quick-grid .btn { min-width:0; padding:12px; justify-content:flex-start; text-align:left; }
.vocab-actions .btn b,.quick-grid .btn b { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(145deg,#087f91,#19a38f); color:#fff; font-size:22px; }
.vocab-actions .btn span,.quick-grid .btn span { display:flex; flex-direction:column; font-size:14px; color:var(--ink); line-height:1.25; }
.vocab-actions .btn small,.quick-grid .btn small { color:var(--ink2); font-size:11px; margin-top:2px; font-weight:500; }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.quick-grid .btn { min-height:78px; }

#view-speak > .seg { min-height:68px; padding:6px; border-radius:22px; background:var(--card); box-shadow:var(--shadow); }
#view-speak > .seg button { font-size:16px; border-radius:17px; }
#view-speak > .seg button.on { color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }
#shadowMode > .card { padding:24px; }
.shadow-sentence { font-size:25px; text-align:left; line-height:1.45; }
.shadow-translation { text-align:left; }
.shadow-controls { justify-content:space-around; gap:10px; margin-top:24px; }
.round-btn { width:58px; height:58px; background:var(--card); color:var(--ink2); border:1px solid var(--sep); }
.round-btn.rec { color:#fff; background:linear-gradient(145deg,#087f91,#19a38f); }

.writing-card { margin-top:-22px; position:relative; z-index:2; padding:18px; }
.grammar-hint { margin:-18px -18px 18px; padding:20px; border-radius:22px 22px 18px 18px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 10%,var(--card)),var(--card));
  border-bottom:1px solid color-mix(in srgb,var(--blue) 24%,var(--sep)); }
.grammar-hint b { display:block; color:var(--blue); font-size:18px; }
.grammar-hint p { color:var(--ink2); margin-top:7px; line-height:1.55; }
.writing-card textarea.field { min-height:160px; padding:16px; background:var(--card); }
.textarea-wrap { position:relative; }
.textarea-wrap > span { position:absolute; top:-28px; right:4px; color:var(--ink2); font-size:13px; }
#checkBtn { min-height:56px; }
#writeResult { padding:24px; }

.grammar-search { display:flex; align-items:center; gap:10px; padding:0 16px; min-height:58px; margin:0 0 14px;
  background:var(--card); border:1px solid var(--sep); border-radius:18px; box-shadow:var(--shadow); }
.grammar-search span { color:var(--ink2); font-size:30px; transform:rotate(-15deg); }
.grammar-search input { flex:1; border:0; outline:0; background:transparent; font-size:17px; color:var(--ink); }
#view-grammar { counter-reset:grammar-card; }
.gram-sec { counter-increment:grammar-card; border-radius:20px; padding:0 18px; }
.gram-sec summary { min-height:66px; font-size:17px; }
.gram-sec summary::before { content:counter(grammar-card); width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  border-radius:50%; color:#fff; background:linear-gradient(145deg,#087f91,#19a38f); font-weight:800; }
.gram-sec summary::after { content:"⌄"; }
.gram-sec[open] summary::after { transform:rotate(180deg); }
table.gram th,table.gram td { padding:10px; text-align:center; }
table.gram tbody th { text-align:left; color:var(--ink); }
.chips .chip { min-height:44px; padding:9px 17px; border:1px solid var(--sep); box-shadow:none; }
.chips .chip:first-child { background:linear-gradient(145deg,#087f91,#19a38f); color:#fff; border-color:transparent; }

.account-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.account-actions button { display:flex; align-items:center; gap:9px; min-height:46px; padding:10px 12px; border:1px solid var(--sep);
  border-radius:14px; background:var(--card2); color:var(--ink); cursor:pointer; font-weight:700; }
.account-actions #logoutBtn { color:var(--red); }

.fab { display:none!important; }
.sheet { z-index:35; top:calc(63px + env(safe-area-inset-top)); bottom:calc(64px + env(safe-area-inset-bottom)); height:auto;
  background:var(--bg); overflow:hidden; transform:translateY(calc(100% + 80px)); }
.sheet.open { transform:none; }
.sheet .chat-hero { min-height:220px; flex:0 0 220px; display:flex; align-items:center; padding:28px max(24px,calc((100vw - 640px)/2 + 24px));
  background-image:linear-gradient(90deg,rgba(250,252,249,.95),rgba(250,252,249,.76) 38%,transparent 67%),
    url("img/black-forest-hero-1200.png"); background-size:cover; background-position:center; }
.chat-hero h1 { margin:0 0 8px; font-size:42px; }
.chat-hero p { color:var(--ink2); max-width:25ch; }
.sheet .sheet-bar { width:min(94%,640px); margin:-20px auto 0; z-index:2; border:1px solid var(--sep); border-radius:22px;
  flex:0 0 auto; padding:12px; background:var(--card); box-shadow:var(--shadow); }
.sheet .sheet-bar #tutorClose { display:none; }
.tutor-avatar { width:56px; height:56px; border-radius:50%; }
.chat-log { width:min(100%,640px); margin:0 auto; padding:16px 20px; }
.chat-input { width:min(100%,640px); margin:0 auto; padding:10px 16px; border-radius:22px 22px 0 0; }
.persona-chip { box-shadow:none; border-color:var(--sep); border-radius:18px; }
.persona-chip .p-emoji { width:54px; height:54px; display:grid; place-items:center; overflow:hidden; border-radius:50%; font-size:28px; background:var(--card2); }
.persona-chip .p-emoji img { width:100%; height:100%; object-fit:cover; }
.scenario-grid { grid-template-columns:repeat(4,1fr); }
.scenario-card { min-width:0; box-shadow:none; border:1px solid var(--sep); border-radius:999px; text-align:center; }
.scenario-card .s { display:none; }

.tabbar { left:50%; right:auto; width:min(100%,760px); transform:translateX(-50%); border-radius:24px 24px 0 0;
  box-shadow:0 -10px 30px -24px rgba(16,38,74,.35); }
.tab { max-width:none; font-size:11px; }

@media (max-width:560px) {
  .section-hero { min-height:222px; padding:26px 47% 26px 18px; }
  .today-hero { min-height:250px; }
  .compact-hero { min-height:212px; }
  .section-hero .hero-copy h1 { font-size:34px; }
  .section-hero .hero-copy > p { font-size:15px; }
  .vocab-feature { grid-template-columns:86px 1fr; gap:12px; padding:14px; }
  .vocab-feature > img { width:86px; height:86px; }
  .vocab-feature-title strong { font-size:23px; }
  .word-facts { grid-template-columns:repeat(2,1fr); }
  .vocab-actions { gap:6px; }
  .vocab-actions .btn { padding:9px 6px; flex-direction:column; align-items:center; text-align:center; }
  .vocab-actions .btn b { width:34px; height:34px; flex-basis:34px; }
  .quick-grid .btn { padding:10px; }
  .quick-grid .btn b { width:34px; height:34px; flex-basis:34px; }
  .account-actions { grid-template-columns:1fr; }
  .sheet .chat-hero { min-height:195px; flex-basis:195px; padding-inline:18px; }
  .scenario-grid { grid-template-columns:repeat(2,1fr); }
  .tab { font-size:10px; padding-inline:2px; }
  .tab svg { width:23px; height:23px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------- DeutschDojo brief alignment ---------------- */
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Variable.woff2") format("woff2"),
       url("fonts/Nunito-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Nunito",
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --blue:#087F83; --green:#278B62; --orange:#D96A19; --red:#CF3E32;
  --bg:#F5F4EF; --card:#FFFEFB; --card2:#F0EEE6; --card3:#E1DED4;
  --ink:#15233D; --ink2:#59667A; --ink3:#8B928F;
  --sep:rgba(56,47,38,.12);
  --material:rgba(251,250,246,.86);
  --shadow:0 2px 5px rgba(59,43,28,.035),0 18px 48px -30px rgba(68,48,25,.28);
  --r-card:24px;
}
@media (prefers-color-scheme:dark) {
  :root {
    --blue:#35C3BB; --green:#59C78E; --orange:#FFB34D; --red:#FF695C;
    --bg:#130F0B; --card:#241B15; --card2:#30231A; --card3:#493426;
    --ink:#FFF6E9; --ink2:#D8C7B6; --ink3:#A68E79;
    --sep:rgba(255,223,185,.13); --material:rgba(25,18,13,.86);
    --shadow:0 2px 7px rgba(0,0,0,.24),0 22px 54px -30px rgba(0,0,0,.78);
  }
}
html[data-theme="light"] {
  --blue:#087F83; --green:#278B62; --orange:#D96A19; --red:#CF3E32;
  --bg:#F5F4EF; --card:#FFFEFB; --card2:#F0EEE6; --card3:#E1DED4;
  --ink:#15233D; --ink2:#59667A; --ink3:#8B928F;
  --sep:rgba(56,47,38,.12); --material:rgba(251,250,246,.86);
  --shadow:0 2px 5px rgba(59,43,28,.035),0 18px 48px -30px rgba(68,48,25,.28);
}
html[data-theme="dark"] {
  --blue:#35C3BB; --green:#59C78E; --orange:#FFB34D; --red:#FF695C;
  --bg:#130F0B; --card:#241B15; --card2:#30231A; --card3:#493426;
  --ink:#FFF6E9; --ink2:#D8C7B6; --ink3:#A68E79;
  --sep:rgba(255,223,185,.13); --material:rgba(25,18,13,.86);
  --shadow:0 2px 7px rgba(0,0,0,.24),0 22px 54px -30px rgba(0,0,0,.78);
}
/* Whole-app backdrop: one Black Forest valley, day for light and night for
   dark. Only the backdrop and its wash swap between themes — the hero art
   itself stays theme-neutral, the same way NorskDojo pairs its fjord-day and
   aurora-night backdrops behind a single set of headers. */
/* The image lives on a position:fixed pseudo-element, NOT on body with
   background-attachment:fixed — mobile browsers ignore `fixed` attachment and
   size `cover` against the whole scrollable document, which is why phones got
   a giant zoomed blur while laptops looked fine. A fixed element is sized to
   the viewport everywhere. */
body { background: var(--bg); }
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(780px 360px at 50% -100px,color-mix(in srgb,var(--orange) 10%,transparent),transparent 72%),
    linear-gradient(180deg,rgba(252,250,244,.34),rgba(252,250,244,.74)),
    url("img/germany-oldtown-day-v4.png") center top / cover no-repeat,
    var(--bg);
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) body::before {
    /* no top radial here: through the frosted column it read as a murky
       orange halo floating over the header in dark mode */
    background:
      linear-gradient(180deg,rgba(18,12,8,.38),rgba(18,12,8,.78)),
      url("img/weihnachtsmarkt-koeln-night-v4.png") center top / cover no-repeat,
      var(--bg);
  }
}
html[data-theme="dark"] body::before {
  background:
    linear-gradient(180deg,rgba(18,12,8,.38),rgba(18,12,8,.78)),
    url("img/weihnachtsmarkt-koeln-night-v4.png") center top / cover no-repeat,
    var(--bg);
}
/* Frosted reading column: mostly opaque for legibility, but lets the backdrop
   glow through faintly — otherwise on phones (where the column is full-width)
   the Heidelberg/Weihnachtsmarkt images could never be seen at all. */
main {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  backdrop-filter: saturate(150%) blur(22px);
  box-shadow: 0 0 70px rgba(40,25,15,.16);
}
html[data-theme="dark"] main { background: color-mix(in srgb, var(--bg) 52%, transparent); }
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) main { background: color-mix(in srgb, var(--bg) 52%, transparent); }
}
/* First line IS the picture: the topbar paints the backdrop image directly
   (opaque, washed just enough for the brand row to read) instead of relying
   on translucency. */
.topbar {
  background:
    linear-gradient(180deg, rgba(252,250,244,.58), rgba(252,250,244,.72)),
    url("img/germany-oldtown-day-v4.png") center top / cover no-repeat;
}
html[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg, rgba(18,12,8,.5), rgba(18,12,8,.66)),
    url("img/weihnachtsmarkt-koeln-night-v4.png") center top / cover no-repeat;
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .topbar {
    background:
      linear-gradient(180deg, rgba(18,12,8,.5), rgba(18,12,8,.66)),
      url("img/weihnachtsmarkt-koeln-night-v4.png") center top / cover no-repeat;
  }
}
.tabbar {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  backdrop-filter: saturate(150%) blur(22px);
}
/* Content surfaces go glassy too — the backdrop reads through the cards while
   the blur keeps their text on a calm, legible ground. */
.card,.tile,.progress-board>div,.session-length,.culture-card,.gram-sec {
  background: color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.card,.tile,.progress-board>div,.session-length,.culture-card,.gram-sec {
  border:1px solid var(--sep);
  box-shadow:var(--shadow);
}
.topbar { min-height:68px; }
.topbar .brand img { width:38px;height:38px;border-radius:50%;object-fit:cover; }
.streak-pill { padding:7px 13px;font-size:18px;background:var(--card); }
.streak-pill svg { width:17px;height:17px; }
.profile-button {
  width:44px;height:44px;flex:0 0 44px;border:2px solid color-mix(in srgb,var(--blue) 45%,transparent);
  border-radius:50%;background:linear-gradient(145deg,var(--blue),color-mix(in srgb,var(--blue) 68%,var(--orange)));
  color:#fff;font-weight:900;cursor:pointer;box-shadow:var(--shadow);
}
.profile-menu {
  position:fixed;z-index:75;top:calc(65px + env(safe-area-inset-top));
  right:max(14px,calc((100vw - 680px)/2));width:min(330px,calc(100vw - 28px));
  padding:14px;background:var(--card);border:1px solid var(--sep);border-radius:24px;
  box-shadow:0 28px 80px -34px rgba(0,0,0,.58);
}
.profile-summary { display:flex;align-items:center;gap:11px;padding:4px 4px 12px; }
.profile-summary img { width:46px;height:46px;border-radius:50%;object-fit:cover; }
.profile-summary div { display:flex;flex-direction:column; }
.profile-summary small { color:var(--ink2);font-size:13px; }
.appearance-switch { border:0;border-top:1px solid var(--sep);padding:12px 0 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.appearance-switch legend { padding-top:11px;color:var(--ink2);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; }
.appearance-switch button,.menu-action {
  border:1px solid var(--sep);border-radius:12px;background:var(--card2);padding:8px 10px;cursor:pointer;font-weight:750;
}
.appearance-switch button.on { background:var(--blue);color:#fff;border-color:transparent; }
.menu-action { display:block;width:100%;margin-top:6px;text-align:left; }
.menu-action.danger { color:var(--red); }

.section-hero { --hero-image:url("img/black-forest-hero-1200.png"); }
.words-hero { --hero-image:url("img/hero-words.png"); }
.speak-hero { --hero-image:url("img/hero-speak.png"); }
.writing-hero { --hero-image:url("img/hero-write.png"); }
.tables-hero { --hero-image:url("img/hero-tables.png"); }
.insights-hero { --hero-image:url("img/hero-insights.png"); }
.chat-hero { --hero-image:url("img/header-chat-felix-v4.png"); }
.section-hero::before {
  background-image:linear-gradient(90deg,rgba(252,250,244,.97) 0%,rgba(252,250,244,.88) 35%,rgba(252,250,244,.1) 64%,transparent 78%),var(--hero-image)!important;
  background-position:center!important;
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .section-hero::before {
    background-image:linear-gradient(90deg,rgba(24,16,11,.97) 0%,rgba(24,16,11,.84) 38%,rgba(24,16,11,.14) 68%),var(--hero-image)!important;
  }
}
html[data-theme="dark"] .section-hero::before {
  background-image:linear-gradient(90deg,rgba(24,16,11,.97) 0%,rgba(24,16,11,.84) 38%,rgba(24,16,11,.14) 68%),var(--hero-image)!important;
}
.week-total svg { width:25px;height:25px;fill:var(--orange); }
.week-total b { font-size:44px; }

.culture-card { position:relative;grid-template-columns:116px 1fr auto;cursor:pointer;overflow:hidden; }
.culture-image { background-image:var(--culture-image,url("img/black-forest-hero-1200.png"));background-position:center;background-size:cover; }
.culture-next { width:36px;height:36px;border:0;border-radius:50%;background:var(--card2);color:var(--ink2);font-size:26px;cursor:pointer; }
.culture-copy strong { color:var(--orange); }

.fab {
  display:grid!important;width:58px;height:58px;overflow:visible;border:2px solid var(--card);
  bottom:calc(106px + env(safe-area-inset-bottom));
}
.fab img { object-fit:cover;overflow:hidden; }
.fab>span {
  position:absolute;right:-3px;top:-4px;width:23px;height:23px;display:grid;place-items:center;
  border:2px solid var(--card);border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:900;
}
body:has(.sheet.open) .fab,body:has(dialog[open]) .fab,body.study-mode .fab { display:none!important; }
.felix-help { text-align:left;padding:24px; }
/* Felix's portrait has a pale sky baked into the PNG; on dark surfaces a
   rounded-rect crop reads as a dirty beige slab. A full circle with a ring
   turns that baked background into a deliberate porthole (same trick as the
   white circle behind vocabulary photos). */
.felix-help>img { float:right;width:96px;height:96px;border-radius:50%;object-fit:cover;margin:-4px -2px 10px 15px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent); }
.felix-help h2 { margin:5px 0 7px; }
.dialog-close { position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:var(--card2);cursor:pointer;font-size:22px; }
.starter-questions { clear:both;display:grid;gap:8px;margin-top:18px; }
.felix-ask-form { display:flex;gap:8px;margin-top:12px; }
.felix-ask-form .field { flex:1;min-width:0; }
.felix-ask-form .btn { flex:0 0 auto;display:grid;place-items:center;width:46px;padding:0; }
.starter-questions button { border:1px solid var(--sep);border-radius:15px;background:var(--card2);padding:12px;text-align:left;cursor:pointer;font-weight:700; }

.sheet .chat-hero {
  /* Was #a9642f. With the artwork cover-sized this is never seen, but any gap
     used to expose a raw brown slab beside the banner — so fall back to the
     page surface, not a colour from the old evening-cafe art. */
  background-color:var(--bg);
  /* Same compositing as .section-hero: one cover-sized layer, centred. The old
     `auto 165%` anchored right crushed the artwork into a narrow strip beside a
     bare gradient, which is why Chat looked unlike every other tab. */
  background-image:linear-gradient(90deg,rgba(252,247,238,.96) 0%,rgba(252,247,238,.88) 34%,rgba(252,247,238,.12) 61%,transparent 78%),url("img/header-chat-felix-v4.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .sheet .chat-hero {
    background-image:linear-gradient(90deg,rgba(31,20,13,.98),rgba(31,20,13,.9) 40%,rgba(31,20,13,.5) 62%,rgba(31,20,13,.12) 84%,rgba(31,20,13,.08)),url("img/header-chat-felix-v4.png")!important;
  }
}
html[data-theme="dark"] .sheet .chat-hero {
  background-image:linear-gradient(90deg,rgba(31,20,13,.98),rgba(31,20,13,.9) 40%,rgba(31,20,13,.5) 62%,rgba(31,20,13,.12) 84%,rgba(31,20,13,.08)),url("img/header-chat-felix-v4.png")!important;
}
.sheet .chat-hero {
  min-height:clamp(118px,20vh,148px);
  flex:0 0 clamp(118px,20vh,148px);
  padding-block:18px;
}
.sheet {
  isolation:isolate;
}
.sheet .sheet-bar {
  min-height:62px;
  margin-top:-14px;
  padding:8px 11px;
  border-radius:19px;
}
.sheet .sheet-bar .tutor-avatar {
  width:44px;
  height:44px;
  flex:0 0 44px;
}
.sheet .sheet-bar #tutorTitle {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tutor-roster-wrap {
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:min(94%,640px);
  margin:6px auto 0;
  padding:6px 8px;
  border:1px solid var(--sep);
  border-radius:17px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.tutor-roster-label {
  display:none;
  margin:0 2px 5px;
  color:var(--ink2);
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tutor-roster {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
}
.tutor-roster-button {
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px;
  padding:4px 5px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--card2);
  color:var(--ink);
  cursor:pointer;
}
.tutor-roster-button img {
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  object-fit:cover;
}
.tutor-roster-button span {
  overflow:hidden;
  font-size:11px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tutor-roster-button.on {
  border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,var(--card));
}
.tutor-roster-button.on img { box-shadow:0 0 0 2px var(--blue); }
.tutor-roster-wrap .persona-hello {
  position:absolute;
  top:calc(100% + 6px);
  right:8px;
  z-index:6;
  max-width:min(84vw,320px);
  margin:0;
  padding:8px 11px;
  border:1px solid var(--sep);
  box-shadow:var(--shadow);
}
#insightTiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
.chat-turn { display:flex;flex-direction:column;align-items:flex-start;margin:7px 0; }
.chat-log {
  position:relative;
  z-index:1;
  min-height:0;
  padding:10px 16px 14px;
  overflow-y:scroll;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--card3) transparent;
}
.chat-log > * { flex:0 0 auto; }
.chat-log::-webkit-scrollbar { width:6px; }
.chat-log::-webkit-scrollbar-track { background:transparent; }
.chat-log::-webkit-scrollbar-thumb { background:var(--card3);border-radius:8px; }
.chat-turn.user { align-items:flex-end; }
.bubble { margin:0;max-width:min(80%,480px);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow); }
.bubble.bot { border-bottom-left-radius:7px;background:var(--card); }
.bubble.user { border-bottom-right-radius:7px;background:color-mix(in srgb,var(--blue) 15%,var(--card));color:var(--ink); }
.bubble-text { white-space:pre-wrap; }
.bubble-actions { display:flex;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid var(--sep); }
.bubble-actions button { border:0;background:transparent;color:var(--blue);cursor:pointer;font-size:12px;font-weight:850;padding:2px 4px; }
.bubble-translation { margin-top:8px;padding-top:8px;border-top:1px dashed var(--sep);color:var(--ink2);font-size:14px; }
.bubble-note { max-width:min(82%,500px);margin:5px 0 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--orange) 35%,var(--sep));
  border-radius:18px;background:color-mix(in srgb,var(--orange) 9%,var(--card));font-size:13px; }
.bubble-note .correction-explanation { display:block;color:var(--ink2);margin-top:4px; }
.hint-tray {
  width:min(calc(100% - 32px),608px);margin:8px auto 0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--blue) 25%,var(--sep));
  border-radius:17px;background:color-mix(in srgb,var(--blue) 8%,var(--card));text-align:left;cursor:pointer;color:var(--ink);
}
.hint-tray strong,.hint-tray small { display:block; }
.hint-tray small { margin-top:2px;color:var(--ink2); }
.chat-input { position:relative;z-index:4;gap:7px; }
#chatHintBtn { width:44px;height:44px;flex:0 0 44px; }
.scenario-card { border-radius:18px;text-align:left;overflow:hidden;padding:0 0 10px; }
/* Two layers on purpose. The top one is this situation's own art; the bottom
   one is a shared placeholder. A background layer whose file 404s renders as
   nothing, so situations without art yet fall through to the placeholder
   automatically — no per-id bookkeeping, and dropping a scene-<id>.png into
   img/ is enough to light it up. */
.scenario-card::before { content:"";display:block;height:74px;margin-bottom:8px;
  background-image:var(--scene-image,none),url("img/black-forest-hero-1200.png");
  background-position:center;background-size:cover; }
.scenario-card .t,.scenario-card .s { display:block;padding-inline:10px; }
.scenario-card .s { color:var(--ink2);font-size:11px;margin-top:3px; }
.scenario-grid { grid-template-columns:repeat(3,1fr); }
.gram-sec summary>span:first-child { display:none; }
.spot-mascot img { width:42px;height:42px;border-radius:14px;object-fit:cover; }
.ask-card>img { width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent); }
.path-node svg { width:24px;height:24px; }
.illustrated-state>img { width:132px;height:132px;border-radius:32px;object-fit:cover;box-shadow:var(--shadow);margin-bottom:10px; }

.tabbar { width:min(100%,820px); }
.tab { min-width:0;font-size:10px;padding-inline:3px; }
.tab.active { color:var(--blue);font-weight:900; }
.tab.active::before { content:"";position:absolute;top:3px;width:28px;height:3px;border-radius:3px;background:var(--blue); }

@media(max-width:560px) {
  .topbar .brand { font-size:17px;gap:7px; }
  .level-badge { display:none; }
  .profile-button { width:40px;height:40px;flex-basis:40px; }
  .section-hero { padding-right:45%; }
  .culture-card { grid-template-columns:84px 1fr; }
  .culture-image { width:84px;min-height:88px; }
  .culture-next { display:none; }
  .scenario-grid { grid-template-columns:repeat(2,1fr); }
  .chat-input .icon-btn { width:40px!important;height:40px!important;flex-basis:40px!important; }
  .tab { font-size:8.5px; }
  .tab svg { width:21px;height:21px; }
  .fab { width:50px;height:50px;right:8px;bottom:calc(101px + env(safe-area-inset-bottom)); }
}

/* Makes the localhost-only visual fixture inspectable at a true phone canvas. */
html.mockup-mobile body { width:390px;margin:0 auto;box-shadow:0 0 0 1px var(--sep); }
html.mockup-mobile .topbar { width:390px;left:50%;transform:translateX(-50%);padding-inline:14px; }
html.mockup-mobile main { width:390px; }
html.mockup-mobile .tabbar { width:390px; }
html.mockup-mobile .fab { width:50px;height:50px;right:calc(50% - 187px);bottom:calc(101px + env(safe-area-inset-bottom)); }
html.mockup-mobile .topbar { gap:6px; }
html.mockup-mobile .topbar .brand { font-size:17px;gap:7px; }
html.mockup-mobile .level-badge { display:none; }
html.mockup-mobile .profile-button { width:40px;height:40px;flex-basis:40px; }
html.mockup-mobile .section-hero { min-height:222px;padding:26px 45% 26px 18px; }
html.mockup-mobile .today-hero { min-height:250px; }
html.mockup-mobile .compact-hero { min-height:212px; }
html.mockup-mobile .section-hero .hero-copy h1 { font-size:34px; }
html.mockup-mobile .section-hero .hero-copy>p { font-size:15px; }
html.mockup-mobile .culture-card { grid-template-columns:84px 1fr; }
html.mockup-mobile .culture-image { width:84px;min-height:88px; }
html.mockup-mobile .culture-next { display:none; }
html.mockup-mobile .scenario-grid { grid-template-columns:repeat(2,1fr); }
html.mockup-mobile .chat-input .icon-btn { width:40px!important;height:40px!important;flex-basis:40px!important; }
html.mockup-mobile .tab { font-size:8.5px; }
html.mockup-mobile .tab svg { width:21px;height:21px; }
html.mockup-mobile .sheet { width:390px;left:50%;right:auto;transform:translate(-50%,calc(100% + 80px)); }
html.mockup-mobile .sheet.open { transform:translateX(-50%); }
html.mockup-mobile .sheet .chat-hero { min-height:145px;flex-basis:145px;padding-inline:18px; }
html.mockup-mobile .sheet .chat-hero { min-height:122px;flex-basis:122px;background-size:cover!important;background-position:center top!important; }
html.mockup-mobile .tutor-roster-wrap { width:calc(100% - 24px);margin-top:5px;padding:5px; }
html.mockup-mobile .tutor-roster-label { display:none; }
html.mockup-mobile .tutor-roster-button { flex-direction:column;gap:2px;padding:3px 2px; }
html.mockup-mobile .tutor-roster-button img { width:30px;height:30px;flex-basis:30px; }
html.mockup-mobile .tutor-roster-button span { max-width:100%;font-size:9px; }

@media (max-width:560px) {
  .sheet .chat-hero { min-height:122px;flex-basis:122px;background-size:cover!important;background-position:center top!important; }
  .sheet .sheet-bar { min-height:56px;margin-top:-12px;padding:6px 9px; }
  .sheet .sheet-bar .tutor-avatar { width:38px;height:38px;flex-basis:38px; }
  .sheet .sheet-bar .btn.small { min-height:32px;padding:5px 9px;font-size:13px; }
  .tutor-roster-wrap { width:calc(100% - 24px);margin-top:5px;padding:5px; }
  .tutor-roster-label { display:none; }
  .tutor-roster-button { flex-direction:column;gap:2px;padding:3px 2px; }
  .tutor-roster-button img { width:30px;height:30px;flex-basis:30px; }
  .tutor-roster-button span { max-width:100%;font-size:9px; }
  .chat-log { padding:8px 12px 12px; }
  #insightTiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #insightTiles .tile:first-child { grid-column:span 2; }
}

/* ---------------- Chat: one continuous scroller, NorskDojo-style ---------------- */
.sheet {
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.sheet::-webkit-scrollbar { display:none; }
.sheet .chat-hero {
  position:relative;
  display:flex;
  min-height:210px;
  padding:18px 20px 24px;
  background-size:cover!important;
  background-position:center!important;
}
.sheet .sheet-bar {
  position:relative;
  z-index:10;
  display:flex;
  width:min(100%,640px);
  min-height:154px;
  margin:0 auto;
  padding:12px 38% 12px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.sheet .sheet-bar #tutorClose {
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  margin-top:36px;
  border:0;
  background:color-mix(in srgb,var(--card) 72%,transparent);
  backdrop-filter:blur(10px);
}
.tutor-current {
  display:grid;
  min-width:0;
  flex:1;
  grid-template-columns:78px minmax(0,1fr) 18px;
  align-items:center;
  gap:13px;
  padding:6px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.sheet .sheet-bar .tutor-current .tutor-avatar {
  width:78px;
  height:108px;
  flex:0 0 78px;
  border:2px solid color-mix(in srgb,var(--card) 75%,transparent);
  border-radius:24px;
  object-fit:cover;
  box-shadow:0 12px 28px -18px rgba(0,0,0,.55);
}
.tutor-copy {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.tutor-current #tutorTitle {
  display:block;
  overflow:hidden;
  font-size:20px;
  font-weight:900;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tutor-current #tutorStyle {
  display:block;
  overflow:hidden;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tutor-current #tutorDesc {
  display:block;
  overflow:hidden;
  color:var(--ink2);
  font-size:12px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tutor-current .tutor-chevron {
  flex:0 0 auto;
  color:var(--ink2);
  transition:transform .2s ease;
}
.tutor-current[aria-expanded="true"] .tutor-chevron { transform:rotate(180deg); }
.tutor-current:focus-visible {
  outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent);
  outline-offset:2px;
  border-radius:24px;
}
.tutor-roster-wrap {
  position:relative;
  z-index:14;
  width:min(calc(100% - 32px),608px);
  margin:-18px auto 10px;
  padding:10px;
  border-radius:22px;
}
.tutor-roster {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.tutor-roster-button {
  min-height:58px;
  padding:7px 9px;
  border-radius:16px;
}
.tutor-roster-button img {
  width:42px;
  height:42px;
  flex-basis:42px;
}
.tutor-roster-copy {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:1px;
}
.tutor-roster-copy strong,
.tutor-roster-copy small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tutor-roster-copy strong { font-size:13px; }
.tutor-roster-copy small { color:var(--ink2);font-size:10px; }
.active-situation {
  display:grid;
  width:min(calc(100% - 32px),608px);
  min-height:78px;
  grid-template-columns:46px 1fr 22px;
  align-items:center;
  gap:12px;
  margin:-15px auto 8px;
  padding:12px 16px;
  border:1px solid var(--sep);
  border-radius:24px;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  color:var(--ink);
  box-shadow:var(--shadow);
  text-align:left;
  cursor:pointer;
}
.active-situation .situation-icon {
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb,var(--blue) 10%,var(--card2));
  font-size:22px;
}
.active-situation small,
.active-situation strong { display:block; }
.active-situation small { color:var(--ink2);font-size:12px;font-weight:750; }
.active-situation strong { margin-top:1px;font-size:17px;font-weight:900; }
.active-situation > svg { color:var(--ink2); }
.chat-log {
  width:min(100%,640px);
  min-height:clamp(360px,54vh,680px);
  margin:0 auto;
  padding:14px 16px 28px;
  overflow:visible;
  overscroll-behavior:auto;
  touch-action:auto;
  scrollbar-gutter:auto;
}
.chat-turn { position:relative;margin:12px 0; }
.chat-turn.bot {
  padding-left:52px;
}
.chat-turn.bot::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background-image:var(--tutor-image,url("img/tutor-jonas-v1.png"));
  background-position:center;
  background-size:cover;
  box-shadow:0 0 0 2px var(--card);
}
.bubble {
  padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--sep) 76%,transparent);
  box-shadow:0 12px 26px -22px rgba(0,0,0,.6);
}
.bubble.bot { border-bottom-left-radius:9px; }
.bubble.user {
  border-color:color-mix(in srgb,var(--blue) 18%,var(--sep));
  background:color-mix(in srgb,var(--blue) 11%,var(--card));
}
.bubble-actions { gap:12px; }
.bubble-actions button { font-size:13px; }
#scenarioPick { width:100%; }
.hint-tray { margin-bottom:8px; }
.chat-input {
  position:sticky;
  right:auto;
  bottom:0;
  left:auto;
  z-index:12;
  width:min(100%,640px);
  margin:0 auto;
  border:1px solid var(--sep);
  border-bottom:0;
  border-radius:24px 24px 0 0;
  background:color-mix(in srgb,var(--card) 96%,transparent);
  box-shadow:0 -16px 36px -28px rgba(0,0,0,.55);
  backdrop-filter:blur(16px);
}
.chat-input textarea { resize:none; }

html[data-theme="dark"] .sheet .chat-hero {
  background-image:linear-gradient(90deg,rgba(23,17,12,.97),rgba(23,17,12,.88) 55%,rgba(23,17,12,.4) 74%,rgba(23,17,12,.1)),url("img/header-chat-felix-v4.png")!important;
}
html[data-theme="dark"] .active-situation,
html[data-theme="dark"] .chat-input {
  box-shadow:0 14px 30px -24px rgba(0,0,0,.92);
}

@media (max-width:560px) {
  .sheet .chat-hero {
    min-height:196px;
    padding:10px 12px 22px;
    background-image:linear-gradient(90deg,rgba(252,247,238,.98),rgba(252,247,238,.94) 70%,rgba(252,247,238,.12) 90%,transparent),url("img/header-chat-felix-v4.png")!important;
    background-size:cover!important;
    /* top-anchored: the phone band is wider-ratio than the art, so cover must
       crop ~20% vertically — take it from the table, never Felix's ears */
    background-position:center top!important;
  }
  html[data-theme="dark"] .sheet .chat-hero {
    background-image:linear-gradient(90deg,rgba(23,17,12,.98),rgba(23,17,12,.93) 70%,rgba(23,17,12,.35) 88%,rgba(23,17,12,.1)),url("img/header-chat-felix-v4.png")!important;
  }
  .sheet .sheet-bar {
    min-height:158px;
    padding:12px 18% 8px 0;
  }
  .sheet .sheet-bar #tutorClose {
    width:38px;
    height:38px;
    flex-basis:38px;
    margin-top:42px;
  }
  .tutor-current {
    grid-template-columns:58px minmax(0,1fr) 12px;
    gap:8px;
    padding-inline:4px;
  }
  .sheet .sheet-bar .tutor-current .tutor-avatar {
    width:58px;
    height:88px;
    border-radius:19px;
  }
  .tutor-current #tutorTitle { font-size:17px; }
  .tutor-current #tutorStyle { font-size:10.5px; }
  .tutor-current #tutorDesc { font-size:10.5px; }
  .tutor-roster-wrap {
    width:calc(100% - 24px);
    margin:-16px auto 8px;
  }
  .tutor-roster { grid-template-columns:1fr; }
  .active-situation {
    width:calc(100% - 24px);
    min-height:72px;
    margin:-14px auto 7px;
    border-radius:21px;
  }
  .chat-log {
    min-height:430px;
    padding:12px 12px 24px;
  }
  .chat-turn.bot { padding-left:46px; }
  .chat-turn.bot::before { width:36px;height:36px; }
  .bubble { max-width:88%; }
}

/* The desktop QA fixture renders the app at 390px without changing the browser viewport. */
html.mockup-mobile .sheet .chat-hero {
  min-height:196px;
  padding:10px 12px 22px;
  background-image:linear-gradient(90deg,rgba(252,247,238,.98),rgba(252,247,238,.94) 70%,rgba(252,247,238,.12) 90%,transparent),url("img/header-chat-felix-v4.png")!important;
  background-size:cover!important;
  background-position:center!important;
}
html[data-theme="dark"].mockup-mobile .sheet .chat-hero {
  background-image:linear-gradient(90deg,rgba(23,17,12,.98),rgba(23,17,12,.93) 70%,rgba(23,17,12,.35) 88%,rgba(23,17,12,.1)),url("img/header-chat-felix-v4.png")!important;
}
html.mockup-mobile .sheet .sheet-bar {
  min-height:158px;
  padding:12px 18% 8px 0;
}
html.mockup-mobile .sheet .sheet-bar #tutorClose {
  display:grid;
  width:38px;
  height:38px;
  flex-basis:38px;
  margin-top:42px;
}
html.mockup-mobile .tutor-current {
  grid-template-columns:58px minmax(0,1fr) 12px;
  gap:8px;
  padding-inline:4px;
}
html.mockup-mobile .sheet .sheet-bar .tutor-current .tutor-avatar {
  width:58px;
  height:88px;
  border-radius:19px;
}
html.mockup-mobile .tutor-current #tutorTitle { font-size:17px; }
html.mockup-mobile .tutor-current #tutorStyle,
html.mockup-mobile .tutor-current #tutorDesc { font-size:10.5px; }
html.mockup-mobile .tutor-roster-wrap {
  width:calc(100% - 24px);
  margin:-16px auto 8px;
}
html.mockup-mobile .tutor-roster { grid-template-columns:1fr; }
html.mockup-mobile .active-situation {
  width:calc(100% - 24px);
  min-height:72px;
  margin:-14px auto 7px;
  border-radius:21px;
}
html.mockup-mobile .chat-log {
  min-height:430px;
  padding:12px 12px 24px;
}
html.mockup-mobile .chat-turn.bot { padding-left:46px; }
html.mockup-mobile .chat-turn.bot::before { width:36px;height:36px; }
html.mockup-mobile .bubble { max-width:88%; }

/* ---------------- Chat topic picker: mirrors NorskDojo's browse-first layout ---------------- */
/* In an open conversation the sheet-bar is the header, so the tab title stays
   out of the way; only the picker shows it. */
.chat-hero .hero-copy { display:none; }
/* Picker mode keeps the app-wide Felix hero — header-chat-felix-v4.png plus the 90deg
   scrim defined further up — so Chat's header matches Words / Speak / Tables
   instead of using a one-off banner. Only the geometry changes here: enough
   height for a title, and the copy column the other heroes use. */
.sheet.is-picker .chat-hero {
  display:flex; align-items:center;
  /* The banner art is 1.78:1, same as every other tab hero. Keep this box at
     roughly the same proportion (~2.9:1) so `cover` trims it by the same small
     amount they do — a shorter box would crop Felix's head off. */
  min-height:clamp(200px,30vh,260px);
  flex:0 0 auto;
  padding:20px 42% 20px max(20px,calc((100% - 1000px)/2));
}
.sheet.is-picker .chat-hero .hero-copy { display:block; min-width:0; }
.sheet.is-picker .chat-hero .hero-copy h1 { margin:0 0 6px; font-size:clamp(30px,4.4vw,42px); }
.sheet.is-picker .chat-hero .hero-copy p { color:var(--ink2); font-size:16px; max-width:30ch; }
.sheet.is-picker .sheet-bar { display:none; }
.sheet.is-picker .tutor-roster-wrap {
  display:block;
  width:min(calc(100% - 28px),1000px);
  margin:0 auto;
  padding:24px 0 12px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.sheet.is-picker .tutor-roster-label {
  display:block;
  margin:0 0 12px;
  color:var(--ink2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.sheet.is-picker .tutor-roster {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.sheet.is-picker .tutor-roster-button {
  display:flex;
  min-height:204px;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:22px;
  background:var(--card);
  box-shadow:0 16px 34px -28px rgba(17,36,58,.48);
}
.sheet.is-picker .tutor-roster-button img {
  width:100%;
  height:132px;
  flex:0 0 132px;
  border-radius:0;
  object-fit:cover;
  box-shadow:none;
}
.sheet.is-picker .tutor-roster-copy {
  display:flex;
  width:100%;
  min-width:0;
  flex:1;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:11px 8px 12px;
  text-align:center;
}
.sheet.is-picker .tutor-roster-copy strong {
  width:100%;
  color:var(--ink);
  font-size:15px;
  font-weight:900;
}
.sheet.is-picker .tutor-roster-copy small {
  width:100%;
  color:var(--ink2);
  font-size:11px;
}
.sheet.is-picker .tutor-roster-button.on {
  border-color:var(--blue);
  background:var(--card);
  box-shadow:0 0 0 1px var(--blue),0 16px 34px -28px rgba(17,36,58,.48);
}
.sheet.is-picker .tutor-roster-button.on img { box-shadow:none; }
.sheet.is-picker .persona-hello { display:none; }
.sheet.is-picker .active-situation,
.sheet.is-picker .hint-tray,
.sheet.is-picker .chat-input { display:none; }
.sheet.is-picker .chat-log {
  width:min(100%,1028px);
  min-height:0;
  margin:0 auto;
  padding:22px 14px 44px;
}
.sheet.is-picker #scenarioPick h2 {
  margin:0 0 12px!important;
  color:var(--ink2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.sheet.is-picker .scenario-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.sheet.is-picker .scenario-card {
  min-width:0;
  min-height:244px;
  padding:0 0 16px;
  overflow:hidden;
  border:1px solid var(--sep);
  border-radius:24px;
  background:var(--card);
  box-shadow:0 18px 36px -30px rgba(17,36,58,.5);
  text-align:left;
}
.sheet.is-picker .scenario-card::before {
  height:154px;
  margin:0 0 12px;
}
.sheet.is-picker .scenario-card .t,
.sheet.is-picker .scenario-card .s {
  padding-inline:16px;
}
.sheet.is-picker .scenario-card .t {
  font-size:18px;
  font-weight:900;
}
.sheet.is-picker .scenario-card .s {
  display:-webkit-box;
  margin-top:5px;
  overflow:hidden;
  color:var(--ink2);
  font-size:12px;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.sheet.is-picker .scenario-card.new-topic {
  border-style:dashed;
  background:color-mix(in srgb,var(--blue) 5%,var(--card));
}
/* Picker mode deliberately has NO background override: it inherits the shared
   .sheet .chat-hero Felix banner and its per-theme scrim, so Chat's header is
   the same artwork everywhere instead of a separate one-off band. */

/* Chat sits in the same reading column as every other tab. It used to span the
   full viewport while Words/Speak/Tables were inset in a 676px column, which is
   why Chat read as a different app. The inline padding is reset too: the old
   `calc((100vw - 640px)/2 + 24px)` assumed a full-bleed sheet and would eat
   most of the width now that the sheet is column-width. */
.sheet {
  left: max(0px, calc(50% - 338px));
  right: max(0px, calc(50% - 338px));
  border-radius: 0 0 28px 28px;
  box-shadow: 0 0 70px rgba(40,25,15,.16);
}
.sheet .chat-hero { padding-inline: 18px; }
.sheet.is-picker .chat-hero { padding-inline: 18px 42%; }
html[data-theme="dark"] .sheet.is-picker .tutor-roster-button,
html[data-theme="dark"] .sheet.is-picker .scenario-card {
  box-shadow:0 18px 38px -28px rgba(0,0,0,.92);
}
@media (max-width:700px) {
  .sheet.is-picker .chat-hero { min-height:clamp(170px, 46vw, 230px); }
  .sheet.is-picker .tutor-roster-wrap {
    width:calc(100% - 24px);
    padding-top:18px;
  }
  .sheet.is-picker .tutor-roster {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .sheet.is-picker .tutor-roster-button { min-height:180px; }
  .sheet.is-picker .tutor-roster-button img {
    height:116px;
    flex-basis:116px;
  }
  .sheet.is-picker .chat-log { padding:18px 12px 36px; }
  .sheet.is-picker .scenario-grid { grid-template-columns:1fr;gap:12px; }
  .sheet.is-picker .scenario-card { min-height:214px; }
  .sheet.is-picker .scenario-card::before { height:132px; }
}
html.mockup-mobile .sheet.is-picker .chat-hero { min-height:clamp(170px, 46vw, 230px); }
html.mockup-mobile .sheet.is-picker .tutor-roster-wrap {
  width:calc(100% - 24px);
  margin:0 auto;
  padding-top:18px;
}
html.mockup-mobile .sheet.is-picker .tutor-roster {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
html.mockup-mobile .sheet.is-picker .tutor-roster-button { min-height:180px; }
html.mockup-mobile .sheet.is-picker .tutor-roster-button img {
  width:100%;
  height:116px;
  flex-basis:116px;
}
html.mockup-mobile .sheet.is-picker .chat-log { padding:18px 12px 36px; }
html.mockup-mobile .sheet.is-picker .scenario-grid { grid-template-columns:1fr;gap:12px; }
html.mockup-mobile .sheet.is-picker .scenario-card { min-height:214px; }
html.mockup-mobile .sheet.is-picker .scenario-card::before { height:132px; }

/* ---- Chat hero = the SAME system as every other tab ---------------------
   The chat header is now a .section-hero.compact-hero: art comes from
   --hero-image through .section-hero::before with the shared per-theme
   scrims, exactly like Words/Speak/Tables. This block only silences the
   legacy chat-hero element backgrounds (which ::before covers anyway) and
   re-asserts the shared geometry against old .sheet .chat-hero sizing rules
   that carry higher specificity. */
html .sheet .section-hero.chat-hero {
  background:transparent!important;
  margin:0 0 12px;
  flex:0 0 auto;
  min-height:242px!important;
  padding:22px 44% 24px 18px!important;
}
@media (max-width:560px) {
  html .sheet .section-hero.chat-hero {
    min-height:212px!important;
    padding:26px 47% 26px 18px!important;
  }
}

/* "Wusstest du?" on phones: the culture art is wide-format, but the 84x88
   side-cell forced `cover` to discard most of its width — the subject itself
   got cropped out. Stack the card instead: image as a wide banner, text below. */
@media (max-width:560px) {
  .culture-card { grid-template-columns:1fr; gap:10px; }
  .culture-image { width:100%; min-height:122px; }
}

/* Culture cell honours the per-image focal point set by showCultureFact(). */
.culture-image {
  background-position:var(--culture-pos,center)!important;
  background-size:var(--culture-zoom,cover)!important;
}

/* correction explanation: full ink for contrast on the tinted tile */
.bubble-note .correction-explanation { color: var(--ink); opacity: .85; }

/* ---- Freies Training + flashcard micro-animations ---- */
.practice-btn { margin-top: 8px; }
.practice-btn small { display: block; font-weight: 600; opacity: .75; font-size: 12px; }
.done-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.flashcard .flash-inner { transition: transform .3s cubic-bezier(.2, .7, .3, 1.05); }
.flashcard.anim-in { animation: fcIn .3s cubic-bezier(.2, .7, .3, 1.05); }
@keyframes fcIn { from { opacity: 0; transform: translateX(46px) scale(.97); } to { opacity: 1; transform: none; } }
.flashcard.anim-out-ok { animation: fcOut .22s ease-in forwards; }
@keyframes fcOut { to { opacity: 0; transform: translateX(-70px) rotate(-2deg); } }
.flashcard.anim-again { animation: fcShake .3s ease-in-out; }
@keyframes fcShake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 55% { transform: translateX(7px); } 80% { transform: translateX(-3px); } }
.grade-btn { transition: transform .12s ease; }
.grade-btn:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) {
  .flashcard .flash-inner { transition: none; }
  .flashcard.anim-in, .flashcard.anim-out-ok, .flashcard.anim-again { animation: none; }
}

/* ---- Layout switcher: Compact / Library homes ---- */
html.layout-compact #view-today > *:not(#homeCompact) { display: none !important; }
html.layout-library #view-today > *:not(#homeLibrary) { display: none !important; }
html.layout-compact #homeCompact, html.layout-library #homeLibrary { display: block; }
#homeCompact, #homeLibrary { padding-top: 14px; }
.cockpit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cockpit-stats span { display: flex; flex-direction: column; align-items: center; padding: 12px;
  background: var(--card); border: 1px solid var(--sep); border-radius: 16px; }
.cockpit-stats b { font-size: 24px; }
.cockpit-stats small { color: var(--ink2); }
.cockpit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cockpit-tile { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 10px; background: var(--card); border: 1px solid var(--sep);
  border-radius: 18px; cursor: pointer; box-shadow: var(--shadow-sm); }
.cockpit-tile b { font-size: 16px; }
.cockpit-tile small { color: var(--ink2); min-height: 1em; }
.cockpit-tile:active { transform: scale(.97); }
.lib-rows h2 { margin: 14px 0 8px; }
.lib-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  margin-bottom: 8px; background: var(--card); border: 1px solid var(--sep);
  border-radius: 14px; cursor: pointer; text-align: left; color: var(--ink); }
.lib-row .grow { flex: 1; }
.lib-row .pill { flex: none; font-weight: 800; }
.lib-actions { display: flex; gap: 8px; margin-top: 12px; }
.lib-actions .btn { flex: 1; }

/* one focus token for every interactive control (ported from NorskDojo) */
:where(button, .tab, .pack, .chip, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}