:root {
  /* KOREA GLOW colours only (KG-APP-BASE §5): navy, gold, cream, crimson — and their light tints. */
  --navy: #0D1B3E;
  --gold: #C9923A;
  --cream: #FBF1E3;
  --crimson: #C8102E;
  --bg: #FBF1E3;
  --surface: #FFFFFF;
  --ink: #0D1B3E;
  --ink-soft: #3A4566;
  --primary: #0D1B3E;
  --primary-ink: #FFFFFF;
  --accent: #C9923A;
  --gold-ink: #7A5414;     /* gold dark enough for text on cream and white */
  --tint: #EAEDF5;         /* navy tint: chosen answers, speech bubbles */
  --warm: #FDF7EE;         /* cream lighter than the page */
  --line: #E6D6BC;
  --pill-bg: #F3E2C4;
  --radius: 14px;
  --gutter: 16px;
}

* { box-sizing: border-box; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; }
html[data-text="large"] { font-size: 20px; }
html[data-text="xlarge"] { font-size: 22px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR",
    "Noto Sans Lao", "Leelawadee UI", system-ui, sans-serif;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.topbar, main {
  max-width: 480px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.topbar { padding-top: 14px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 28%, transparent 30%),
    var(--primary);
}
.brand-name { margin: 0; font-weight: 800; letter-spacing: .06em; line-height: 1.2; }
.brand-tagline { margin: 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.3; }

.lang-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lang-btn {
  flex: 1 1 30%;
  min-width: 0;
  min-height: 48px;
  padding: 0 6px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--warm);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.lang-btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
}

main { padding-top: 6px; padding-bottom: 24px; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 18px 0 8px; }
h2 { font-size: 1rem; margin: 18px 0 8px; color: var(--primary); }
p { margin: 0 0 10px; }
.lead { font-size: 1rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 10px 12px 10px 52px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
  font-size: .89rem;
  display: grid;
  place-items: center;
}

.notice, .status {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  background: var(--pill-bg);
  border-radius: 8px;
  font-size: .89rem;
}

.btn {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary { border: 0; background: var(--primary); color: var(--primary-ink); font-size: 1.05rem; }
.btn-quiet {
  margin-top: 16px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

/* The main action stays reachable without scrolling. */
.actionbar {
  position: sticky;
  bottom: 0;
  margin: 14px calc(var(--gutter) * -1) 0;
  padding: 10px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(251, 241, 227, 0), var(--bg) 22%);
}

.modules { list-style: none; margin: 12px 0 0; padding: 0; }
.module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.module > div { min-width: 0; }
.module-name { margin: 0; font-weight: 700; }
.module-desc { margin: 2px 0 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.4; }
.pill {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  font-size: .89rem;
  font-weight: 600;
  white-space: nowrap;
}

.load-error {
  margin-top: 20px;
  padding: 14px;
  border: 2px solid var(--crimson);
  border-radius: var(--radius);
  background: var(--surface);
}
.load-error::before { content: "⚠ "; font-weight: 700; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .lang-btn { transition: background-color .15s, border-color .15s; }
}

/* Welcome voice controls */
.voice { margin: 12px 0 4px; }
.voice-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-voice {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 6px 12px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--warm);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-voice-main { flex-basis: 100%; border-color: var(--primary); color: var(--primary); font-size: 1rem; }
.btn-voice-main[data-state="playing"] { background: var(--primary); color: var(--primary-ink); }
.btn-voice-main[data-state="blocked"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 146, 58, .40); }
.btn-voice:disabled { opacity: .45; cursor: not-allowed; }
.btn-voice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.voice-icon::before { content: "▶ "; }
[data-state="playing"] > .voice-icon::before { content: "⏸ "; }
[data-state="loading"] > .voice-icon::before { content: "… "; }
.voice-status { min-height: 1.5em; margin: 8px 0 0; color: var(--ink-soft); font-size: .89rem; }

/* Home: a module that is open */
.modules > li { list-style: none; }
.module-open { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 2px solid var(--primary); min-height: 64px; }
.module-open > span:first-child { min-width: 0; display: block; }
.module-open .module-name, .module-open .module-desc { display: block; }
.module-arrow { flex: none; color: var(--primary); font-size: 1.8rem; line-height: 1; font-weight: 700; }

/* Find an expression */
.btn-back {
  min-height: 48px;
  margin-top: 6px;
  padding: 0 14px 0 8px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.field-label { display: block; margin: 16px 0 6px; font-weight: 700; }
.field {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--warm);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.result-count { margin: 16px 0 8px; color: var(--ink-soft); font-size: .89rem; }
.results { list-style: none; margin: 0; padding: 0; }
.card {
  padding: 14px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-meaning { margin: 0 0 6px; font-weight: 700; }
.card-lao {
  margin: 0;
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--primary);
}
.card-roman { margin: 0 0 6px; color: var(--ink-soft); font-size: .89rem; }
.card-roman b { color: var(--ink); font-size: 1rem; }
.card-note { margin: 0 0 8px; font-size: .89rem; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.btn-audio {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font: inherit;
  font-size: .89rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-audio[data-state="playing"] { background: var(--accent); color: var(--ink); }
.badge {
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  font-size: .89rem;
}
.card-error { margin: 8px 0 0; color: #A50D26; font-size: .89rem; font-weight: 600; }
.card-error::before { content: "⚠ "; }

/* Lao basics */
.lesson-list { list-style: none; margin: 8px 0 0; padding: 0; }
.lesson-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.lesson-row > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.lesson-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pill-bg); color: var(--ink); font-weight: 700;
}
.lesson-row[data-done="true"] .lesson-num { background: var(--primary); color: var(--primary-ink); }
.lesson-row .module-name, .lesson-row .module-desc { display: block; }
.lesson-number { margin: 12px 0 0; color: var(--ink-soft); font-size: .89rem; font-weight: 700; }
#lesson-title { margin-top: 2px; }
.lesson-text { margin: 0 0 12px; white-space: pre-line; }
.lesson-heading { margin: 22px 0 8px; font-size: 1.05rem; color: var(--primary); }
.tip {
  margin: 14px 0; padding: 12px 14px;
  background: var(--tint); border-left: 4px solid var(--primary); border-radius: 8px;
}
.item-grid { list-style: none; margin: 0 0 12px; padding: 0; }
.item {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.item-main { min-width: 0; }
.item-head {
  margin: 0; color: var(--primary); line-height: 1.5; font-size: 1.9rem;
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
}
.item-head small { margin-left: 10px; color: var(--ink); font-size: 1rem; font-weight: 700; font-family: inherit; }
.item-lao {
  margin: 0; line-height: 1.6; font-size: 1.45rem;
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
}
.item-lao b { margin-left: 10px; font-size: 1rem; font-family: "Segoe UI", system-ui, sans-serif; }
.item-gloss { margin: 2px 0 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.45; }
.item-play {
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink); font-size: 1.1rem; cursor: pointer;
}
.item-play[data-state="playing"] { background: var(--accent); color: var(--ink); }
.item .card-error { grid-column: 1 / -1; }

/* Language menu (five languages no longer fit as buttons on a phone) */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar .brand { min-width: 0; }
.lang { flex: none; }
.lang-select {
  min-height: 48px; max-width: 132px; padding: 0 10px;
  border: 2px solid var(--primary); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .89rem; font-weight: 700;
}
body { font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans Lao", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif; }
.home-section { margin: 22px 0 0; font-size: 1.05rem; color: var(--primary); }
.lesson-figure { margin: 0 0 12px; }
.lesson-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* EPS-TOPIK practice */
.exam-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exam-meta { margin: 0; color: var(--ink-soft); font-size: .89rem; font-weight: 700; text-align: right; }
.exam-timer { margin: 4px 0 0; padding: 6px 12px; border-radius: 8px; background: var(--pill-bg); font-weight: 700; text-align: center; }
.exam-passage {
  margin: 12px 0 0; padding: 12px 14px; white-space: pre-line;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 8px; font-size: 1.05rem; line-height: 1.7;
}
.exam-prompt { margin: 14px 0 10px; font-size: 1.15rem; line-height: 1.5; }
.options { display: grid; gap: 8px; margin-top: 12px; }
.option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 14px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer;
}
.option-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--ink); font-weight: 700; font-size: .89rem;
}
.option[aria-pressed="true"] { border-color: var(--primary); background: var(--tint); }
.option[aria-pressed="true"] .option-num { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.option[data-mark="right"] { border-color: #1E6B34; background: #E4F3E7; }
.option[data-mark="right"]::after { content: "✓"; margin-left: auto; color: #1E6B34; font-weight: 700; }
.option[data-mark="wrong"] { border-color: #A50D26; background: #FBE7EA; }
.option[data-mark="wrong"]::after { content: "✕"; margin-left: auto; color: #A50D26; font-weight: 700; }
.option:disabled { cursor: default; opacity: 1; }
.exam-feedback { min-height: 1.6em; margin: 12px 0 0; font-weight: 700; }
.exam-feedback[data-kind="right"] { color: #1E6B34; }
.exam-feedback[data-kind="wrong"] { color: #A50D26; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.result-score { margin: 8px 0 4px; color: var(--primary); font-size: 2.2rem; font-weight: 800; line-height: 1.2; }
.exam-pace { margin: 4px 0 0; font-size: 16px; text-align: center; }
.exam-timer[data-warn="five"], .exam-timer[data-warn="one"] { background: var(--crimson); color: #FFFFFF; }
.exam-set-score { color: var(--gold-ink); font-weight: 700; }
.offline-pack { margin: 16px 0; }
.offline-pack-btn { width: 100%; }
.exam-pace[data-state="behind"] { color: var(--crimson); font-weight: 700; }
.kind-list, .need-list { list-style: none; margin: 0 0 12px; padding: 0; }
.kind-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.kind-row[data-weak="true"] { border-color: var(--crimson); }
.kind-row { flex-wrap: wrap; align-items: center; }
.kind-drill { flex: 1 0 100%; }
.need-list li { padding: 6px 0; }
.floor-list { list-style: none; margin: 0 0 12px; padding: 0; }
.floor-row { display: flex; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.floor-mark { flex: none; font-weight: 800; }
.floor-row[data-cleared="true"] .floor-mark { color: #1E6B34; }
.floor-row[data-cleared="false"] .floor-mark { color: #A50D26; }
#result-again { margin-top: 16px; }

/* Dictation */
.btn-audio-wide { display: block; width: 100%; min-height: 54px; font-size: 1rem; }
.hint { margin: 8px 0 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.45; }
.actionbar-pair { display: flex; gap: 8px; }
.actionbar-pair .btn { flex: 1 1 0; min-width: 0; margin-top: 0; }
.actionbar-pair .btn-quiet { background: var(--surface); }
.exam-feedback[data-kind="spacing"] { color: #6B4300; }
.exam-feedback[data-kind="empty"] { color: #A50D26; }
.compare { margin-top: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.compare-label { margin: 0; color: var(--ink-soft); font-size: .89rem; font-weight: 700; }
.compare-text { margin: 0 0 10px; font-size: 1.35rem; line-height: 1.7; white-space: pre-wrap; }
.compare-meaning { margin: 0; }
/* A differing character: boxed, bold and underlined, so it shows without colour. */
.diff {
  display: inline-block; min-width: .6em; padding: 0 2px; margin: 0 1px;
  background: #FBE7EA; color: #A50D26; font-weight: 800;
  border: 1px solid #A50D26; border-bottom-width: 4px; border-radius: 4px; white-space: pre;
}

/* Speaking practice */
.speak-card { margin-top: 10px; }
.speak-text { margin: 0; font-size: 1.35rem; line-height: 1.6; color: var(--primary); font-weight: 700; }
.speak-gloss { margin: 0 0 8px; }
.speak-play { margin-top: 4px; }
.btn-audio:disabled { opacity: .45; cursor: not-allowed; }
.recorder { margin-top: 12px; padding: 12px 14px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); }
.recorder-status { margin: 0; font-weight: 700; }
.recorder-status[data-state="recording"]::before { content: "● "; color: var(--crimson); }
.recorder-status[data-state="ready"]::before { content: "✓ "; color: #1E6B34; }
.recorder .btn-audio-wide { margin-top: 10px; }
.record-icon::before { content: "● "; }
.btn-record[data-state="recording"] { background: var(--crimson); }
.btn-record[data-state="recording"] .record-icon::before { content: "■ "; }
.btn-record[data-state="requesting"] .record-icon::before { content: "… "; }
.nav-pair { margin-top: 8px; }
.nav-pair .btn { min-height: 48px; padding: 6px 10px; }

/* My record */
.record-block { margin-top: 6px; }
.record-line { margin: 0 0 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.notice[data-kind="warn"]::before { content: "⚠ "; font-weight: 700; }

/* Korean voice choice */
.voice-choice { margin-top: 14px; }
.voice-choice .field-label { margin-top: 0; }
.voice-choice .chip::before { content: "○ "; }
.voice-choice .chip[aria-pressed="true"]::before { content: "● "; }

/* Picture questions: the photos are tall, so a centred square shows the object at a sensible height. */
.exam-figure { margin: 10px 0 0; }
.exam-figure img {
  display: block; width: min(100%, 260px); aspect-ratio: 1 / 1; margin: 0 auto;
  object-fit: cover; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--surface);
}

/* Bottom bar: previous screen / home. Fixed, so it is reachable without scrolling back to the top. */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 2px solid var(--line);
}
.bottomnav-inner { display: flex; gap: 6px; max-width: 448px; margin: 0 auto; }
/* Four tabs: an icon above a short word, so the words stay at 16px on a 375px phone. */
.bottomnav-btn {
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--primary);
  font: inherit; font-size: .89rem; font-weight: 700; line-height: 1.15; cursor: pointer;
}
.bottomnav-btn .tab-icon { font-size: 1.15rem; line-height: 1; }
.bottomnav-btn .tab-label { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.bottomnav-btn[disabled] { opacity: .38; cursor: default; }
.bottomnav-btn[hidden] { display: none; }

/* First screen: where I stopped last time. */
.today-card { margin: 14px 0 18px; padding: 16px; border: 2px solid var(--primary); border-radius: var(--radius); background: var(--surface); }
.today-when { margin: 0; font-weight: 800; color: var(--primary); }
.today-place { margin: 6px 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.today-card .btn + .btn { margin-top: 10px; }
.btn-outline { border: 2px solid var(--primary); background: transparent; color: var(--primary); font-size: 1.05rem; }
/* The page ends above the bar, and a sticky action bar sits on top of it instead of under it. */
.has-bottomnav main { padding-bottom: calc(24px + var(--nav-h, 62px)); }
.has-bottomnav .actionbar { bottom: var(--nav-h, 62px); padding-bottom: 10px; }

/* A question that needs an answer before anything else (leave the app, stop a test). */
.confirm {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  padding: var(--gutter); background: rgba(13, 27, 62, .62);
}
.confirm-box {
  width: 100%; max-width: 420px; padding: 18px 16px 16px;
  background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius);
}
.confirm-box h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--ink); }
.confirm-buttons { display: grid; gap: 8px; margin-top: 14px; }
.confirm-buttons .btn { margin-top: 0; }

/* "What this screen is": the first thing on every screen, with a button that reads it aloud. */
.about {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 10px 0 14px; padding: 12px 14px;
  background: var(--tint); border-left: 4px solid var(--primary); border-radius: 8px;
}
.about:empty { display: none; }
.about-text { flex: 1 1 100%; margin: 0; }
.about .card-error { flex: 1 1 100%; margin: 0; }
#home-voice-off { margin-top: 8px; }

/* One sentence in depth: the card opens it; the detail screen takes it apart and asks three questions. */
.card-open {
  display: block; width: 100%; min-height: 48px; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.card-open > span { display: block; }
.card-more { margin: 2px 0 8px; color: var(--primary); font-weight: 700; }
.detail-block { margin-top: 4px; }
.quiz-question {
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.quiz-title { margin: 0 0 8px; font-size: 1rem; }
.quiz-prompt { margin: 0 0 4px; font-weight: 700; }
.quiz-lao {
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
  font-size: 1.45rem; font-weight: 400; line-height: 1.9; color: var(--primary);
}
/* The place of the missing word: a dashed box, so it shows without colour. */
.gap {
  display: inline-block; min-width: 3.2em; min-height: 1.5em; padding: 0 6px;
  border: 2px dashed var(--ink); border-radius: 8px; text-align: center; vertical-align: middle; line-height: 1.5;
}
.build {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 76px; margin: 8px 0; padding: 8px;
  border: 2px dashed var(--line); border-radius: var(--radius);
}
.build .hint { margin: 0; }
.chip-lao { min-height: 60px; padding: 4px 14px; border-radius: var(--radius); text-align: center; }
.chip:disabled { cursor: default; }
.piece {
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
  font-size: 1.3rem; font-weight: 400; line-height: 1.5;
}
.piece small { display: block; font-family: "Segoe UI", system-ui, sans-serif; font-size: .89rem; color: var(--ink-soft); }

/* Photos: a fixed 3:2 frame (no jump while loading), never wider than the page, no caption. */
.photo { margin: 0 0 10px; }
.photo img {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); background: var(--pill-bg);
}

/* End-of-lesson check */
.check-meaning { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.check-word { font-size: 1.35rem; line-height: 1.5; }
.check-word[lang="lo"], .check-answer b[lang="lo"] {
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
}
.check-answer {
  margin: 8px 0 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.check-answer b { font-size: 1.2rem; }

/* Tone lessons: the measured pitch picture of a clip, slow listening, comparison strip, ear training. */
.item-tone { grid-template-columns: 1fr; row-gap: 8px; }
.tone-item { min-width: 0; }
.tone-figure { display: flex; align-items: stretch; gap: 8px; }
.tone-scale {
  flex: none; display: flex; flex-direction: column; justify-content: space-around;
  color: var(--ink-soft); font-size: .89rem; line-height: 1.2;
}
.tone-svg { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: auto; background: var(--bg); border-radius: 8px; }
.tone-guide { stroke: var(--ink-soft); stroke-width: 1; opacity: .6; }
.tone-line { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tone-dot { fill: var(--primary); }
.tone-says { margin: 6px 0 0; font-size: .89rem; line-height: 1.45; color: var(--ink-soft); }
.tone-says span { display: block; }
.tone-says span + span { color: var(--ink); font-weight: 700; }
.tone-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn-audio-soft { background: var(--surface); color: var(--primary); border: 2px solid var(--primary); }
.tone-compare {
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius);
}
.tone-title { margin: 0 0 4px; font-size: 1rem; color: var(--primary); }
.tone-compare .hint { margin-top: 4px; }
.tone-strip { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; }
.tone-cell { min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 8px; }
/* The word being played: a frame and a ▶ before the word, not colour alone. */
.tone-cell[data-now="true"] { border-color: var(--accent); background: var(--pill-bg); }
.tone-word { margin: 4px 0 0; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
.tone-word span { display: block; }
.tone-word .tone-now { display: inline; margin-right: 4px; font-size: .89rem; }
.tone-word .tone-now[hidden] { display: none; }
.tone-lao {
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
  font-size: 1.3rem; color: var(--primary);
}
.tone-word .tone-lao { display: inline; }
.tone-meaning { font-size: .89rem; color: var(--ink-soft); }
.tone-status { min-height: 1.5em; margin: 8px 0 0; font-weight: 700; }
.tone-same { margin-top: 10px; }
.tone-quiz { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line); }
.tone-quiz .btn { margin-top: 8px; }
.tone-score { min-height: 1.5em; margin: 10px 0 0; font-weight: 700; }

/* The situation list: a short row of buttons and one that opens them all. */
.chip-more { margin-top: 8px; border-style: dashed; border-color: var(--primary); color: var(--primary); font-weight: 700; }

/* Learn words: a flip card (word, pronunciation, sound; the meaning after a tap) and the deck screens */
.word-card { padding: 20px 14px; text-align: center; }
.word-lao { font-size: 2.6rem; line-height: 1.5; }
.word-card .btn-audio { margin: 6px auto 0; }
.word-meaning {
  margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed var(--line);
  font-size: 1.3rem; font-weight: 700;
}
.word-pair { margin-top: 12px; }
.module-known { color: var(--primary); font-weight: 700; }
#scenario-words { margin-top: 10px; }

/* Go-deeper questions: wide buttons, one question each */
.ask-block { margin-top: 10px; }
.ask-list { list-style: none; margin: 8px 0 12px; padding: 0; }
.ask-chip {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--tint); border: 2px solid var(--primary); border-radius: var(--radius);
  color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.ask-mark {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink); font-weight: 800; text-align: center; line-height: 30px;
}
.ask-text { flex: 1 1 auto; min-width: 0; }
.ask-answer { font-size: 1.05rem; }

/* Recordings of a Lao speaker in the tone lessons */

/* Grammar guide: pattern strip (labelled boxes), sentences cut into words, tap-the-place questions */
.pattern { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; }
.slot {
  flex: 1 1 auto; min-width: 76px; padding: 8px 6px; text-align: center;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
}
/* Four looks in turn (fill and frame); what a box is, is always written inside it. */
.slot[data-tone="0"] { background: var(--tint); border-color: var(--primary); }
.slot[data-tone="1"] { background: #FBE9D2; border-color: #8A4A08; border-style: dashed; }
.slot[data-tone="2"] { background: #EDE7F6; border-color: #4B3A8C; border-style: double; border-width: 4px; }
.slot[data-tone="3"] { background: var(--pill-bg); border-style: dotted; }
.slot .piece { white-space: nowrap; }
.slot-label { display: block; margin-bottom: 2px; font-size: .89rem; font-weight: 700; line-height: 1.3; }
.chunks { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 6px 0 4px; }
.chunk {
  min-width: 48px; min-height: 60px; padding: 4px 10px; text-align: center;
  background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font: inherit; cursor: pointer;
}
.chunk[data-focus="true"] { border-color: var(--primary); border-width: 4px; }
.chunk[data-state="playing"] { background: var(--pill-bg); border-color: var(--accent); }
.chunk-gloss { display: block; color: var(--ink-soft); font-size: .89rem; line-height: 1.3; }
.chunk-static { display: inline-flex; flex-direction: column; justify-content: center; background: var(--surface); cursor: default; }
.chunk.gap { border: 2px dashed var(--ink); font-size: 1.3rem; font-weight: 700; }
.place {
  min-width: 48px; min-height: 60px; padding: 4px 8px;
  background: var(--tint); border: 2px dashed var(--primary); border-radius: var(--radius);
  color: var(--primary); font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer;
}
.place:disabled { cursor: default; }
.place[data-mark="right"] { border-style: solid; border-color: #1E6B34; background: #E4F3E7; color: #1E6B34; }
.place[data-mark="wrong"] { border-style: solid; border-color: #A50D26; background: #FBE7EA; color: #A50D26; }
.turn-word { margin: 4px 0 8px; }
.turn-word .piece { display: inline-block; margin: 0 6px; padding: 2px 10px; vertical-align: middle; border: 2px solid var(--primary); border-radius: var(--radius); }
.lao-pair { margin: 0; }
.pair-lao {
  display: block; color: var(--primary); font-size: 1.45rem; font-weight: 400; line-height: 1.6;
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
}
.pair-roman { display: block; font-size: 1rem; font-weight: 700; }
.check-answer .btn-audio { margin-top: 8px; }

/* "Start without the script": the choice on the first screen */
.script-choice { margin-top: 8px; }
.script-choice .field-label { margin-top: 8px; }
.script-choice .modules { margin-top: 6px; }
.script-choice .module-open[aria-pressed="true"] { background: var(--tint); border-width: 4px; }
.script-choice .btn-quiet { margin-top: 0; min-height: 48px; }
.lao-pair > span { display: block; }
.lao-pair > p { margin: 0; }
.pair-roman { margin: 0 0 4px; }

/* Speak first: how a word is said is large and comes first; the Lao letters are small beneath it. Nothing is hidden. */
.speak-first .lao-pair { display: flex; flex-direction: column-reverse; }
.speak-first .card-lao, .speak-first .pair-lao, .speak-first .quiz-lao { font-size: 1.05rem; line-height: 1.6; }
.speak-first .card-roman { margin: 0; }
.speak-first .card-roman b, .speak-first .pair-roman { font-size: 1.5rem; line-height: 1.4; }
.speak-first .word-card .card-roman b { display: block; font-size: 2.2rem; }
.speak-first .word-lao { font-size: 1.2rem; }
.speak-first .piece { display: flex; flex-direction: column-reverse; font-size: 1rem; line-height: 1.4; }
.speak-first .piece small { color: var(--ink); font-size: 1.3rem; font-weight: 700; line-height: 1.35; }
.speak-first .turn-word .piece { display: inline-flex; }
.speak-first .item-lao[lang="lo"] { display: flex; flex-direction: column-reverse; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; }
.speak-first .item-lao[lang="lo"] b { margin-left: 0; color: var(--ink); font-size: 1.45rem; line-height: 1.4; }

/* The 14-day course: the bar inside a step, progress with its numbers in words, the card of a finished day */
.plan-bar {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px;
  margin: 6px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter);
  background: var(--pill-bg); border-bottom: 2px solid var(--accent);
}
.plan-bar-text { flex: 1 1 0; min-width: 0; margin: 0; font-size: .89rem; font-weight: 700; line-height: 1.3; }
.plan-bar-btn {
  flex: 0 1 auto; max-width: 64%; min-height: 48px; padding: 4px 14px;
  border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-ink);
  font: inherit; font-size: .89rem; font-weight: 700; line-height: 1.25; cursor: pointer;
}
.plan-progress { margin: 8px 0 10px; }
.plan-meter { display: block; width: 100%; height: 18px; accent-color: var(--primary); }
.plan-progress-text { margin: 4px 0 0; font-weight: 700; }
.done-card { background: var(--tint); border: 2px solid var(--primary); }
.done-title { margin: 0 0 6px; color: var(--primary); font-size: 1.3rem; }
.plan-summary { margin: 8px 0 0; font-size: 1.15rem; font-weight: 700; }
.share-card .lesson-heading { margin-top: 0; }
.share-link { margin: 8px 0 0; color: var(--ink-soft); font-size: .89rem; user-select: all; }

/* Word boxes: every Lao sentence cut into words (word-boxes.js). The row itself is .chunks / .chunk. */
.wb { margin: 4px 0 6px; }
.wb .chunk { max-width: 100%; }
.wb-original { margin: 2px 0 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.5; }
.wb-original span { font-size: 1rem; }
.option .wb { flex: 1; min-width: 0; margin: 0; text-align: left; }
.option .wb .chunks { margin: 0; }
.card-foot .card-more { margin: 0; }

/* Teacher mode: one thing at a time, large; the word being said stands out (border, size and an arrow — not colour alone). */
.teach-step { margin: 0 0 6px; color: var(--ink-soft); font-size: .89rem; }
.teach-dots { margin: 0 0 8px; color: var(--primary); font-size: 1rem; letter-spacing: 3px; line-height: 1.2; overflow-wrap: anywhere; }
.teach-stage { min-height: 150px; }
.teach-meaning { margin: 8px 0; font-size: 1.6rem; font-weight: 700; line-height: 1.35; }
.teach-meaning-small { font-size: 1.2rem; }
.teach-boxes .chunks { gap: 10px 8px; padding-top: 22px; }
.teach-boxes .chunk { position: relative; padding: 8px 10px; font-size: 1.25rem; transition: transform .15s; }
.teach-boxes .chunk[data-now="true"] { border: 4px solid var(--primary); background: var(--pill-bg); transform: scale(1.08); z-index: 1; }
.teach-boxes .chunk[data-now="true"]::before {
  content: "▼"; position: absolute; top: -24px; left: 0; right: 0; text-align: center; color: var(--primary); font-size: 1rem; line-height: 1;
}
.teach-boxes .chunk[data-dim="true"] { opacity: .45; }
.teach-boxes .chunk[data-changed="true"] { border-style: dashed; border-color: var(--ink); border-width: 3px; }
.teach-tag { display: block; font-size: .89rem; font-weight: 700; color: var(--ink); }
.teach-caption { margin: 12px 0 8px; padding: 10px 12px; border-left: 4px solid var(--accent); background: var(--surface); font-size: 1.1rem; line-height: 1.5; }
.teach-dock { position: sticky; bottom: var(--nav-h, 0px); z-index: 2; margin-top: 12px; padding: 6px 0 8px; background: var(--bg); }
.teach-row { display: flex; gap: 6px; margin-top: 6px; }
.teach-row .btn { flex: 1 1 0; min-width: 0; min-height: 48px; margin-top: 0; padding: 6px 4px; font-size: .89rem; line-height: 1.25; }
.teach-row-main .teach-main { flex: 1.4 1 0; font-size: 1rem; }
.teach-start { width: 100%; min-height: 96px; font-size: 1.4rem; }
.card-foot .card-lesson { margin: 0; }
#scenario-lesson { width: 100%; margin: 8px 0 0; }

/* Level map */
.facts { margin: 0; }
.facts dt { margin-top: 10px; color: var(--ink-soft); font-size: .89rem; font-weight: 700; }
.facts dd { margin: 0; }
.level-soon { list-style: none; border-style: dashed; }
.level-soon .card-meaning { color: var(--ink-soft); }
.teach-help { width: 100%; }

/* Letter lessons in teacher mode (letter-lesson-view.js) and the letters of a word (word-boxes.js). */
.lesson-voice { width: 100%; min-height: 64px; font-size: 1.1rem; }
.letter-stage { text-align: center; }
.letter-big { margin: 18px auto 6px; padding: 4px 18px; width: fit-content; max-width: 100%; border: 3px solid transparent; border-radius: var(--radius); font-family: var(--lao-font, inherit); font-size: 5rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.letter-big-small { font-size: 1.6rem; }
.letter-label { margin: 6px 0 2px; color: var(--ink-soft); font-size: .89rem; }
.letter-word { display: inline-flex; margin: 0 auto; padding: 8px 16px; border: 3px solid var(--line, var(--ink-soft)); font-size: 1.6rem; max-width: 100%; }
.letter-mark { font-weight: 700; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--primary); background: var(--pill-bg); }
.letter-pieces { justify-content: center; gap: 10px 8px; padding-top: 22px; }
.letter-pieces .chunk { position: relative; padding: 8px 12px; font-size: 1.4rem; border-width: 3px; }
.letter-stage [data-now="true"] { border-color: var(--primary); border-style: solid; background: var(--pill-bg); }
.letter-stage .letter-pieces .chunk[data-now="true"] { border-width: 4px; transform: scale(1.08); }
.letter-stage .letter-pieces .chunk[data-now="true"]::before { content: "▼"; position: absolute; top: -24px; left: 0; right: 0; text-align: center; color: var(--primary); font-size: 1rem; line-height: 1; }
.letter-stage .letter-word[data-now="true"] { border-width: 4px; }
.letters-open { min-height: 48px; margin-top: 6px; }
.letters-hint { margin-top: 2px; }
.letters-panel { margin: 8px 0; padding: 10px 12px; border: 2px solid var(--primary); border-radius: var(--radius); background: var(--surface); }
.letters-title { margin: 0 0 6px; font-weight: 700; }
.letters-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.letters-pick { min-height: 48px; min-width: 48px; margin: 0; font-size: 1.1rem; }
.letters-pick[aria-pressed="true"] { border: 3px solid var(--primary); font-weight: 700; }
.letters-word { margin: 4px 0; font-size: 1.6rem; font-weight: 700; }
.letters-word small { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.letters-list { margin: 0 0 8px; padding: 0; list-style: none; }
.letters-list li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line, #ddd); font-size: 1rem; line-height: 1.4; }
.letters-letter { flex: 0 0 3.2em; font-size: 1.5rem; text-align: center; }
.letters-note { color: var(--ink-soft); }

/* A grammar unit in teacher mode (unit-lesson-view.js): the place of the pattern being explained stands out. */
.teach-pattern { gap: 10px 8px; padding-top: 22px; }
.teach-pattern .slot { position: relative; transition: transform .15s; }
.teach-pattern .slot[data-now="true"] { border: 4px solid var(--ink); transform: scale(1.08); z-index: 1; box-shadow: 0 0 0 3px var(--accent); }
.teach-pattern .slot[data-now="true"]::before { content: "▼"; position: absolute; top: -24px; left: 0; right: 0; text-align: center; color: var(--primary); font-size: 1rem; line-height: 1; }
.teach-pattern .slot[data-dim="true"] { opacity: .45; }
/* An example sentence of a basic lesson as word boxes. */
.item-boxed .wb { margin-top: 0; }
.item-meaning { font-weight: 700; color: var(--ink); }

/* The guide (guide.js): her picture beside what the app says. Without pictures the bubbles simply stand alone. */
.guide-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--primary); background: var(--pill-bg); }
.guide-avatar[width="72"] { width: 72px; height: 72px; display: block; margin: 0 auto 6px; }
.guide-standing { display: block; width: 112px; height: 200px; max-width: 100%; margin: 0 auto 8px; border-radius: 16px; object-fit: cover; border: 2px solid var(--primary); background: var(--pill-bg); }
.guide-hello { display: flex; justify-content: center; }
.guide-picture { width: 220px; height: 220px; max-width: 100%; border-radius: 50%; object-fit: cover; object-position: center top; border: 4px solid var(--primary); background: var(--pill-bg); margin: 4px 0 10px; }
.guide-name { display: block; margin: 0 0 2px; color: var(--primary); font-size: .89rem; line-height: 1.3; }
.bubble-welcome { margin: 0 0 14px; padding: 12px 14px; background: var(--tint); border: 2px solid var(--primary); border-radius: 18px 18px 18px 4px; }
.bubble-welcome h1 { margin-top: 2px; }
.about.bubble { align-items: flex-start; border-left-width: 2px; border: 2px solid var(--primary); border-radius: 18px 18px 18px 4px; }
.about-said { flex: 1 1 0; min-width: 0; }
.teach-said { display: flex; align-items: flex-start; gap: 10px; min-height: 60px; margin: 12px 0 8px; }
.teach-said .teach-caption { flex: 1 1 0; min-width: 0; margin: 0; }

/* A word lesson (word-lesson-view.js): one word large, then all of the group. */
.word-big { display: flex; margin: 24px auto 8px; padding: 16px 20px; font-size: 2.4rem; }
.word-big .chunk-gloss { font-size: 1.2rem; color: var(--ink); }
.word-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 10px; padding-top: 26px; }
.word-all .letter-word { position: relative; margin: 0; font-size: 1.25rem; transition: transform .15s; }
.word-all .letter-word[data-now="true"] { transform: scale(1.08); }
.word-all .letter-word[data-now="true"]::before { content: "▼"; position: absolute; top: -24px; left: 0; right: 0; text-align: center; color: var(--primary); font-size: 1rem; line-height: 1; }
.word-all .letter-word[data-dim="true"] { opacity: .45; }

/* The opening picture of the welcome screen. */
.hero { position: relative; height: 300px; margin-top: 8px; border-radius: 22px; overflow: hidden; background: var(--primary); box-shadow: 0 10px 28px rgba(13, 27, 62, .28); }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: hero-drift 30s linear infinite; animation-delay: calc(var(--i) * 6s - 1.2s); }
@keyframes hero-drift {
  0% { opacity: 0; transform: scale(1.02); }
  4% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; transform: scale(1.16) translateX(-1.5%); }
  100% { opacity: 0; transform: scale(1.16); }
}
/* Eight pictures (Global Bridge: Seoul and the world): the same 6 seconds each, in a 48-second round. */
.hero-slides[data-count="8"] .hero-slide { animation-name: hero-drift-8; animation-duration: 48s; }
@keyframes hero-drift-8 {
  0% { opacity: 0; transform: scale(1.02); }
  2.5% { opacity: 1; }
  12.5% { opacity: 1; }
  15.6% { opacity: 0; transform: scale(1.16) translateX(-1.5%); }
  100% { opacity: 0; transform: scale(1.16); }
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 27, 62, .10) 0%, rgba(13, 27, 62, .25) 40%, rgba(13, 27, 62, .88) 100%); }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px 18px; color: #FFFFFF; }
.hero-text h1, .hero-text .hero-promise-title { font-weight: 800; margin: 0 0 6px; font-size: 2rem; line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.hero-promise { margin: 0; font-size: 1rem; line-height: 1.45; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
#view-welcome .guide-hello { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:first-child { opacity: 1; }
}

.install { margin: 18px 0 6px; padding: 14px; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--warm); }
.install .btn { width: 100%; margin-bottom: 8px; }
.install .hint { margin: 0; }
.install-voice { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.install-voice .hint { flex: 1 1 auto; }
.install-avatar { width: 44px; height: 44px; }
.hero-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.hero-lang { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; background: #FFFFFF; color: var(--primary); font-weight: 800; font-size: 1rem; }
.hero-lang.soon { background: rgba(255, 255, 255, .22); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .7); }
.hero-lang small { font-size: 1rem; font-weight: 600; opacity: .9; }
html[data-app="global"] .hero { height: 360px; }

/* "Start here" (v0.49.0) */
.start-all { width: 100%; margin-top: 4px; font-size: 1rem; }
.start-contents { margin: 16px 0 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.start-contents ol { margin: 4px 0 0; padding-left: 1.4em; }
.start-contents li { margin: 0; }
.start-contents a { display: block; min-height: 48px; padding: 10px 0; color: var(--primary); font-weight: 600; }
.start-part { margin-top: 22px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 12px; }
.start-head { display: flex; align-items: center; gap: 10px; }
.start-head .guide-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.start-title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.start-part > .btn-audio { margin-top: 10px; }
.start-lines, .start-steps { margin: 10px 0 0; }
.start-steps { padding-left: 1.4em; }
.start-line p { margin: 0 0 10px; font-size: 1rem; }
.start-now { background: var(--pill-bg); border-radius: 8px; }
.start-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; }
.start-lao {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 48px; min-width: 48px; max-width: 100%;
  padding: 6px 12px; border: 2px solid var(--primary); border-radius: 12px; background: var(--bg); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.start-lao[data-state="playing"] { background: var(--accent); }
.start-lao-word { font-size: 1.3rem; line-height: 1.5; }
.start-lao-roman { font-size: 1rem; font-weight: 700; color: var(--primary); }
.start-lao-gloss { font-size: 1rem; color: var(--ink-soft); }
.start-links .btn { margin-top: 8px; }
.start-begin { margin-top: 12px; }
.feedback { margin-top: 18px; }
.feedback .hint { margin: 0 0 4px; font-size: 1rem; }
.feedback-btn { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; margin-top: 6px; }

/* Home, "Learn Lao" (v0.50.0): one coloured button is the step to take now; the others are plain. */
.home-routine { margin: 8px 0 4px; padding: 10px 12px; border-left: 4px solid var(--accent); background: var(--pill-bg); border-radius: 8px; font-size: 1rem; line-height: 1.5; }
#lao-modules .module-open { border: 1px solid var(--line); }
#lao-modules .module-open.module-next { background: var(--primary); border: 2px solid var(--primary); color: var(--primary-ink); box-shadow: 0 3px 10px rgba(13, 27, 62, .25); }
#lao-modules .module-next .module-desc, #lao-modules .module-next .module-known, #lao-modules .module-next .module-arrow { color: var(--primary-ink); }
.module-badge { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 1rem; font-weight: 700; }
#lao-modules .module-compact { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
#lao-modules .module-compact .module-desc { display: none; }

/* "Lao grammar at a glance" (v0.51.0): the first row of the grammar guide, and its unit buttons. */
.lesson-row-overview { border-color: var(--accent); background: var(--pill-bg); }
.start-link { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.start-link-kind { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- KG-APP-BASE: icons, top bar, bottom bar, settings, customer centre, guide, install, new version ---------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon .knob { fill: var(--surface); }
.icon-inline { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.topbar { padding-bottom: 6px; }
.brand { min-width: 0; }
.brand-mark { background: radial-gradient(circle at 50% 50%, var(--gold) 0 28%, transparent 30%), var(--navy); }
.top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.top-btn {
  min-width: 48px; min-height: 48px; padding: 2px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--navy);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.1; cursor: pointer;
}
.top-btn .icon { width: 20px; height: 20px; }
.lang-select { max-width: 112px; border-color: var(--navy); font-size: 15px; }
@media (max-width: 420px) { .brand-tagline { display: none; } }
@media (max-width: 374px) { .brand-name { display: none; } .top-label { display: none; } }

.bottomnav { border-top-color: var(--gold); }
.bottomnav-btn { color: var(--navy); background: var(--warm); font-size: 15px; }
.bottomnav-btn .icon { width: 22px; height: 22px; }
.bottomnav-btn:not([disabled]):active { background: var(--tint); }
.tab-count { font-size: 13px; font-weight: 800; color: var(--gold-ink); line-height: 1; }
.tour-focus { position: relative; z-index: 31 !important; box-shadow: 0 0 0 4px var(--gold); border-radius: 14px; }
.bottomnav.tour-focus { position: fixed; border-radius: 0; }

.update-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h, 62px) + 8px); z-index: 8;
  width: min(448px, calc(100% - 2 * var(--gutter)));
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px;
  background: var(--navy); color: #FFFFFF; border: 2px solid var(--gold); border-radius: 14px; font-weight: 700;
}
.btn-update { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--gold); color: var(--navy); font: inherit; font-weight: 800; cursor: pointer; }

.settings-h { margin: 22px 0 8px; font-size: 1.05rem; color: var(--navy); }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice-col { display: grid; gap: 8px; }
.choice {
  min-height: 48px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}
.choice-l { font-size: 1.1rem; }
.choice-xl { font-size: 1.25rem; }
.choice[aria-pressed="true"] { border-color: var(--navy); background: var(--tint); box-shadow: inset 0 0 0 1px var(--navy); }
#view-settings .btn-outline { width: 100%; margin-top: 8px; }
.settings-version { margin: 26px 0 0; text-align: center; color: var(--ink-soft); font-size: 15px; }
.support-kinds { margin: 12px 0 0; padding: 0; border: 0; }
.support-kinds legend { padding: 0; margin-bottom: 8px; font-weight: 800; color: var(--navy); }
.support-label { display: block; margin: 16px 0 6px; font-weight: 800; color: var(--navy); }
.support-text { width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid var(--navy); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink); }
#support .btn { width: 100%; margin-top: 12px; }
.support-foot { margin: 28px 0 0; text-align: center; }
.link-btn {
  min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* KG-APP-WORLD: the customer centre with its WhatsApp Business number under it (first screen and home). */
.support-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; }
.support-number { font-size: 14px; text-decoration: none; color: var(--ink-soft); }
/* KG-APP-WORLD §2: «made with AI, not a real person», small, next to the guide. */
.guide-ai { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
/* KG-APP-WORLD §7: what is opening, until the first screen replaces it (index.html, removed by app.js). */
.boot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px var(--gutter); text-align: center; color: var(--ink); font-size: 17px; }
.boot b { font-size: 22px; }
/* KG-APP-WORLD §3-3: inside Facebook, Instagram, WhatsApp: the way out to the real browser (base-view.js). */
.inapp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; padding: 10px 12px; border: 2px solid var(--gold); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.4; }
.inapp-banner-icon { flex: none; width: 20px; height: 20px; }
.inapp-banner-text { flex: 1 1 12em; }
.inapp-banner-open { color: var(--navy); }

.tour { position: fixed; inset: 0; z-index: 30; background: rgba(13, 27, 62, .55); }
.tour-card {
  position: fixed; left: var(--gutter); right: var(--gutter); max-width: 448px; margin: 0 auto; padding: 16px;
  background: var(--surface); border: 2px solid var(--gold); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(13, 27, 62, .35);
}
.tour-card h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--navy); }
.tour-card p { margin: 0; }
.tour-count { font-size: 15px; font-weight: 800; color: var(--gold-ink); margin-bottom: 4px !important; }
.tour-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tour-buttons .btn { margin-top: 0; }
.tour-arrow { position: absolute; width: 0; height: 0; border: 10px solid transparent; }
.tour-card[data-side="above"] .tour-arrow { bottom: -20px; border-top-color: var(--gold); }
.tour-card[data-side="below"] .tour-arrow { top: -20px; border-bottom-color: var(--gold); }

.install { border-color: var(--gold); background: var(--warm); }
.install-steps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.install-step { display: grid; gap: 6px; }
.install-picture { display: flex; justify-content: center; }
.install-step-text { margin: 0; font-weight: 700; }
.ios-bar, .ios-row {
  display: flex; align-items: center; justify-content: space-around; gap: 14px; width: 100%; max-width: 300px; min-height: 52px; padding: 8px 14px;
  background: #F4F4F6; border: 1px solid #C9CBD3; border-radius: 12px; color: #6B7080; font-weight: 700;
}
.ios-row { justify-content: space-between; color: var(--ink); }
.inapp-bar { justify-content: space-between; }
.inapp-title { color: var(--ink); }
.ios-mark { color: #0A60D6; box-shadow: 0 0 0 3px var(--gold); border-radius: 8px; padding: 2px; width: 30px; height: 30px; }
.ios-dim { opacity: .55; }

/* "Say it after me, three times" (teacher mode): what to do now in large letters; a bar shrinks over the time to speak. */
.shadow-box { margin: 4px 0 12px; padding: 14px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--warm); text-align: center; }
.shadow-round { margin: 0; color: var(--gold-ink); font-weight: 800; }
.shadow-cue { margin: 6px 0 10px; font-size: 1.5rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.shadow-box[data-phase="speak"] { border-color: var(--crimson); background: var(--surface); }
.shadow-box[data-phase="speak"] .shadow-cue { font-size: 1.75rem; color: var(--crimson); }
.shadow-box .hint { margin: 8px 0 0; }
.shadow-bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.shadow-bar span { display: block; height: 100%; width: 0; background: var(--crimson); }
.shadow-box[data-phase="speak"] .shadow-bar span { width: 100%; transform-origin: left center; animation: shadow-shrink linear forwards; }
.shadow-box[data-paused="true"] .shadow-bar span { animation-play-state: paused; }
@keyframes shadow-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.teach-try { margin: 0 0 4px; font-weight: 700; color: var(--gold-ink); }

/* First screen: today's review and the days in a row. */
.today-streak { margin: 0 0 10px; font-weight: 800; color: var(--gold-ink); }
.today-none { margin: 10px 0 0; color: var(--ink-soft); }
#today-srs:not([hidden]) ~ #today-last, #today-none:not([hidden]) ~ #today-last { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* The review screen: one thing at a time. */
.review-card { margin: 12px 0; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.review-kind { margin: 0 0 6px; color: var(--gold-ink); font-weight: 800; font-size: .89rem; }
.review-lao { margin: 6px 0; font-size: 2rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.review-lao-small { font-size: 1.5rem; }
.review-roman { margin: 0 0 10px; color: var(--ink-soft); font-size: 1.05rem; overflow-wrap: anywhere; }
.review-question { margin: 14px 0 0; font-weight: 800; }
.review-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.review-pair .btn { width: 100%; }
.review-answer { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-weight: 700; overflow-wrap: anywhere; }
.review-feedback { margin: 10px 0 0; font-weight: 700; }
.review-actions .btn { width: 100%; margin-top: 10px; }

/* ---------- Stage 3: my own voice, my tone line, finger writing, dictation by word boxes, four skills ---------- */
.speak-panel { margin: 16px 0; padding: 14px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.speak-title, .speak-line-title { margin: 0 0 6px; font-size: 1.15rem; }
.speak-line-title { margin-top: 14px; }
.speak-record { width: 100%; min-height: 52px; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.speak-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--crimson); border: 2px solid #FFFFFF; flex: 0 0 auto; }
.speak-record[data-state="recording"] { background: var(--crimson); border-color: var(--crimson); }
.speak-record[data-state="recording"] .speak-dot { background: #FFFFFF; animation: speak-blink 1s steps(2) infinite; }
@keyframes speak-blink { 50% { opacity: .2; } }
.speak-status { margin: 8px 0 0; font-weight: 700; }
.speak-error { margin-top: 8px; }
.speak-buttons { display: grid; gap: 8px; margin-top: 10px; }
.speak-buttons .btn-audio { width: 100%; min-height: 48px; justify-content: center; }
.speak-pair { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .speak-pair { grid-template-columns: 1fr 1fr; } }
.speak-cell { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.speak-cell-title { margin: 0 0 6px; font-weight: 800; }
.tone-line-mine { stroke: var(--crimson); stroke-dasharray: 9 5; }
.speak-open { width: 100%; margin-top: 10px; }
/* «For reference — machine judgement» of the tone shape (tone-judge.js) */
.tone-verdict { margin: 10px 0 0; padding: 10px 12px; border: 2px solid var(--gold); border-radius: 10px; background: var(--cream); }
.tone-verdict[data-status="match"] { border-color: var(--navy); }
.tone-verdict[data-status="nomatch"] { border-color: var(--crimson); }
.tone-verdict p { margin: 0 0 4px; }
.tone-verdict-label { font-size: .9rem; font-weight: 800; color: var(--ink-soft); }
.tone-verdict-result { font-weight: 800; font-size: 1.1rem; }
.tone-verdict[data-status="nomatch"] .tone-verdict-result { color: var(--crimson); }
.tone-verdict-hint { line-height: 1.45; }
.tc-pair-open { width: 100%; margin-top: 10px; }
.tc-pair-one { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.test-say-rate { display: grid; gap: 8px; margin-top: 10px; }
.test-say-rate .option { min-height: 48px; }

.lesson-write { width: 100%; margin-top: 10px; }
.write-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.write-letter { margin: 0; min-width: 90px; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; font-size: 4rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.write-about { flex: 1 1 160px; min-width: 0; }
.write-example { margin: 0 0 4px; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; font-size: 1.5rem; font-weight: 700; }
.write-example small { font-family: "Segoe UI", system-ui, sans-serif; font-size: 1rem; color: var(--ink-soft); }
.write-pad { margin: 12px 0 6px; display: flex; justify-content: center; }
.write-canvas { display: block; max-width: 100%; border: 2px solid var(--gold); border-radius: 12px; background: #FFFFFF; touch-action: none; cursor: crosshair; }
.write-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.write-tools .btn { width: 100%; }
.write-done { width: 100%; }
.write-feedback { margin: 8px 0 0; font-weight: 700; color: var(--crimson); }
.write-feedback:empty { display: none; }
.write-result .btn { width: 100%; margin-top: 8px; }

.chip[data-mark="right"] { border-color: var(--navy); border-width: 3px; }
.chip[data-mark="wrong"] { border-color: var(--crimson); border-width: 3px; border-style: dashed; }
.chip-mark { display: block; font-weight: 800; font-size: 1rem; }
.chip[data-mark="wrong"] .chip-mark { color: var(--crimson); }

.skill-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.skill-head { margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.skill-bar { height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.skill-bar span { display: block; height: 100%; min-width: 0; background: var(--gold); border-radius: 7px; }

/* «The story of Lao» (#story) and today's sentence (story-view.js). */
.story-jump { margin: 4px 0 12px; }
.story-heading { margin-top: 28px; padding-top: 6px; border-top: 3px solid var(--gold); scroll-margin-top: 72px; }
.story-heading:focus { outline: none; }
.story-section, .story-culture { margin: 0 0 18px; }
.story-title { margin: 14px 0 6px; font-size: 1rem; color: var(--primary); }
.story-text { margin: 0 0 10px; line-height: 1.6; }
.story-sub { margin: 12px 0 6px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.story-points { margin: 0 0 8px; padding-left: 1.2em; line-height: 1.55; }
.story-points li + li { margin-top: 6px; }
.story-compare[data-lang] { border: 2px solid var(--primary); }
.story-sentence { background: var(--warm); }
.story-section > .btn, .story-pairs > .btn { margin-top: 8px; }
.pair-set { margin: 8px 0 12px; }
.pair-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 8px 0; }
.pair-word { min-width: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.pair-word .btn-audio { width: 100%; margin-top: 6px; justify-content: center; }
.pair-word .tone-figure { margin-top: 6px; }
.pair-lao, .pair-choice-main {
  margin: 0; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
  font-size: 1.6rem; line-height: 1.5; color: var(--primary);
}
.pair-roman { margin: 0; font-weight: 700; }
.pair-gloss { margin: 0; color: var(--ink-soft); font-size: .89rem; overflow-wrap: anywhere; }
.pair-quiz .btn-audio-wide { margin: 8px 0; }
.pair-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.pair-choice { flex-direction: column; justify-content: center; gap: 2px; min-height: 96px; text-align: center; }
.pair-choice[data-mark]::after { margin-left: 0; }
.pair-choice-sub { font-size: .89rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.pair-letters { display: grid; gap: 8px; }
.pair-letter-set { display: flex; flex-wrap: wrap; gap: 8px; }
.pair-letter { font-size: 1.15rem; }
.zh-tones { display: grid; gap: 6px; margin: 6px 0; }
.zh-tones-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.zh-tones-head { font-weight: 700; color: var(--primary); }
.zh-tones-cell { min-width: 0; padding: 6px; background: var(--warm); border-radius: 8px; }
.zh-tones-name { margin: 0 0 4px; font-size: .89rem; font-weight: 700; overflow-wrap: anywhere; }
.zh-tones-none { margin: 0; color: var(--ink-soft); font-size: .89rem; }
.today-sentence { margin: 18px 0 0; padding: 4px 14px 14px; background: var(--surface); border: 2px solid var(--gold); border-radius: var(--radius); }
.today-sentence .card { margin: 10px 0 8px; }
.today-sentence > .btn { margin-top: 8px; }
.today-card-preview { display: block; width: 100%; max-width: 360px; height: auto; margin: 10px auto 0; border: 1px solid var(--line); border-radius: 8px; }

/* Tone course T (#tonecourse): rule tables, words with a line picture, ear training levels, the pair dictionary, scenes */
.tc-notice p { margin: 0 0 6px; }
.tc-notice p:last-child { margin-bottom: 0; }
.tc-badge { margin: 0 0 8px; font-size: .83rem; }
.tc-lessons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.tc-lesson, .tc-level { width: 100%; }
.tc-levels { display: grid; gap: 8px; margin-top: 8px; }
.tc-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 8px 0; }
.tc-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tc-table-cls { caption-side: top; text-align: left; padding: 6px 2px; font-weight: 800; color: var(--navy); }
.tc-table th, .tc-table td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: .89rem; }
.tc-table th { width: 45%; font-weight: 600; color: var(--ink-soft); }
.tc-table-tone { display: block; color: var(--navy); }
.tc-table-word {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-top: 4px; padding: 0 12px;
  border: 2px solid var(--navy); border-radius: 12px; background: var(--warm); color: var(--navy); font: inherit; font-size: 1.2rem; cursor: pointer;
  font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif;
}
.tc-table-word[data-state="playing"] { background: var(--gold); }
.tc-six { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tc-six-cell { padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.tc-six-name { margin: 0 0 4px; font-weight: 700; font-size: .89rem; }
.tc-six-cell svg { width: 100%; height: auto; }
.tc-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.tc-chip { padding: 4px 10px; border-radius: 999px; background: var(--pill-bg); font-size: .89rem; font-weight: 700; }
.tc-arrow { color: var(--gold-ink); font-weight: 800; }
.tc-tone { margin: 2px 0 4px; color: var(--gold-ink); font-size: .89rem; font-weight: 800; }
.tc-rule .tc-tone, .tc-rule b.tc-tone { font-size: 1rem; color: var(--crimson); }
.tc-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.tc-line { margin: 0; }
.tc-line svg { width: 100%; height: auto; }
.tc-set { margin: 10px 0; }
.tc-set-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 400; color: var(--navy); font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; }
.tc-set-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 8px 0; }
.tc-word { min-width: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.tc-word .btn-audio { width: 100%; margin-top: 6px; }
.tc-word svg.tone-svg { width: 100%; height: auto; margin-top: 4px; }
.tc-lao { margin: 0; color: var(--navy); font-size: 1.6rem; line-height: 1.6; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; }
.tc-gloss { margin: 0; font-size: .89rem; overflow-wrap: anywhere; }
.btn-audio-quiet { background: var(--surface); color: var(--navy); border: 2px solid var(--line); }
.tc-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 4px; border-radius: 50%; background: var(--warm); color: var(--navy); }
.tc-icon .icon { width: 34px; height: 34px; stroke-width: 1.6; }
.tc-icon-small { width: 36px; height: 36px; margin-bottom: 2px; }
.tc-icon-small .icon { width: 24px; height: 24px; }
.tc-icon-place { flex: none; width: 48px; height: 48px; margin: 0; background: var(--pill-bg); }
.tc-funny { margin: 8px 0 0; padding: 8px 10px; background: var(--warm); border-left: 4px solid var(--gold); border-radius: 6px; font-size: .94rem; }
.tc-search-label { display: block; margin: 8px 0 4px; font-weight: 700; }
.tc-search { width: 100%; min-height: 48px; padding: 0 12px; border: 2px solid var(--navy); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.tc-count { margin: 6px 0; }
.tc-dict + .btn { margin-top: 8px; width: 100%; }
.tc-scene { margin: 12px 0; }
.tc-scene-head { display: flex; align-items: center; gap: 10px; }
.tc-scene-head .story-title { margin: 0; }
.tc-scene-line { margin: 8px 0; padding: 8px 10px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--line); }
.tc-scene-heard { border-color: var(--crimson); border-style: dashed; }
.tc-scene-label { margin: 0; font-size: .83rem; font-weight: 800; color: var(--ink-soft); }
.tc-scene-lao { margin: 2px 0; font-size: 1.5rem; line-height: 1.6; color: var(--navy); font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; }
.tc-scene-lao mark { background: var(--pill-bg); color: var(--crimson); border-radius: 6px; padding: 0 2px; }
.tc-scene-mean { margin: 0 0 6px; font-weight: 700; }
.tc-scene .btn-icon { margin-top: 8px; }
.tc-quiz .pair-choice { min-height: 120px; }

/* ---------- Professor's review sheet (#review-sheet/<token>, quality gate Q) ---------- */
.sheet-intro-lo { margin: 8px 0; font-size: 1.1rem; line-height: 1.7; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; }
.sheet-label { display: block; margin-top: 10px; font-weight: 700; }
.sheet-input { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 8px; font: inherit; font-size: 1.05rem; background: var(--surface); color: var(--ink); }
.sheet-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.sheet-tab { justify-content: center; text-align: center; font-weight: 700; }
.sheet-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 12px 0; }
.sheet-pager .btn:last-child { grid-column: 1 / -1; }
.sheet-page { font-weight: 700; text-align: center; min-width: 64px; }
.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sheet-item[data-verdict="ok"] { border-left: 6px solid var(--navy); }
.sheet-item[data-verdict="fix"] { border-left: 6px solid var(--crimson); }
.sheet-number { margin: 0; font-weight: 700; color: var(--gold-ink); overflow-wrap: anywhere; }
.sheet-where { font-weight: 400; color: var(--ink-soft); font-size: .89rem; }
.sheet-lao { margin: 6px 0; font-size: 1.5rem; line-height: 1.7; color: var(--navy); overflow-wrap: anywhere; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; }
.sheet-roman { margin: 0 0 4px; color: var(--ink-soft); }
.sheet-meaning { margin: 2px 0; overflow-wrap: anywhere; }
.sheet-meaning-label { font-weight: 700; color: var(--gold-ink); }
.sheet-flag { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--crimson); background: var(--pill-bg); border-radius: 8px; }
.sheet-flag p { margin: 4px 0; overflow-wrap: anywhere; }
.sheet-flag-title { font-weight: 700; color: var(--crimson); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sheet-actions .btn-audio, .sheet-actions .sheet-nosound { grid-column: 1 / -1; }
.sheet-nosound { color: var(--ink-soft); font-size: .89rem; }
.sheet-actions .option { justify-content: center; font-weight: 700; }
.sheet-send .btn { margin-top: 10px; }
.badge-native { background: var(--navy); color: #FFFFFF; }

/* Narrow phones (320–399px): the guide's bubble keeps its text full width — the listen button goes below it —
   and the bottom-bar words stay on one line (a little smaller, never under 13px). */
@media (max-width: 399px) {
  .about.bubble > .btn-audio { flex: 1 1 100%; }
}
.bottomnav-btn .tab-label { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 359px) {
  .bottomnav-btn { font-size: .78rem; padding: 4px 1px; }
}
/* Chinese screen (stage 5, Simplified 简体): Chinese fonts first, so Han characters are not drawn in Korean shapes, and
   lines may break between any two characters (keep-all, right for Korean, would keep a whole Chinese sentence on one line). */
html:lang(zh) body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Segoe UI",
    "Noto Sans Lao", "Leelawadee UI", system-ui, sans-serif;
  word-break: normal;
  line-break: strict;
}

/* «Lao expressions only Lao people know» (#expr, expr-view.js) */
.expr-list .expr-item { align-items: center; }
.expr-item-lao { display: block; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.5; color: var(--navy); }
.expr-item-roman { display: block; color: var(--crimson); font-style: italic; font-size: .95rem; }
.expr-head { text-align: left; }
.expr-head-lao { margin: 0; font-family: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", "Saysettha OT", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; }
.expr-head-roman { margin: 0 0 8px; color: var(--crimson); font-style: italic; font-size: 1.05rem; }
.expr-part { margin: 14px 0; padding: 12px 14px; border-left: 4px solid var(--gold); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.expr-part .story-title { margin-top: 0; }
.expr-part .story-text { margin-bottom: 0; }
.expr-meaning { border-left-color: var(--navy); }
.expr-meaning .story-text { font-weight: 700; }
.expr-avoid { border-left-color: var(--crimson); }
.expr-story { background: var(--warm); }
.expr-lesson { width: 100%; margin: 12px 0 4px; }
.expr-back { min-height: 48px; }
.expr-choices { display: grid; gap: 8px; grid-template-columns: 1fr; }
.expr-today .card-note { margin-bottom: 8px; }
.expr-stage .expr-head-lao { text-align: center; }

/* ---------- KG-APP-WORLD v1.1 (2026-10-17) ---------- */
/* The app name stays on one line in every language (French «Lao Bridg / e» at phone width): a little smaller on phones. */
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On a phone the name matters more than the round mark: the mark gives way so the name keeps its room. */
@media (max-width: 420px) { .brand-mark { display: none; } .brand-name { font-size: 15px; letter-spacing: .02em; } .lang-select { max-width: 104px; } }

/* The opening picture grows with its text instead of a fixed height. Over it: the welcome and what visitors ask first. */
.hero { height: auto; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
html[data-app="global"] .hero { height: auto; }
.hero::after { background: linear-gradient(180deg, rgba(13, 27, 62, .35) 0%, rgba(13, 27, 62, .80) 30%, rgba(13, 27, 62, .93) 60%); }
.hero-text { position: relative; }
.hero-text h1, .hero-text .hero-promise-title { margin-bottom: 8px; }

/* What visitors ask first: three short answers in the big box at the top of the first screen (§1). */
.facts { margin: 0; }
.facts-title { margin: 0 0 6px; color: var(--gold); font-size: 14px; line-height: 1.3; letter-spacing: .02em; }
.facts-list { margin: 0; display: grid; gap: 6px; }
.fact { margin: 0; padding-left: 10px; border-left: 3px solid var(--gold); }
.fact dt { margin: 0; color: var(--cream); font-size: 14px; line-height: 1.3; }
.fact dd { margin: 0; color: #FFFFFF; font-size: 1rem; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
/* Global Bridge: the language chips under the box already say what can be learned. */
[data-app="global"] .fact-1 { display: none; }
@media (max-width: 600px) {
  .hero { min-height: 188px; }
  .hero-text { padding: 14px 16px 14px; }
  .hero-text h1, .hero-text .hero-promise-title { font-size: 1.6rem; }
}

/* The guide's introduction box (app/vendor/kg/kg_host.css, with the app's fonts and colours). Her picture and name on
   the first row; the buttons and the captions use the full width below, so it stays short on a phone. */
.welcome-host.kg-host { --kg-font: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans Lao", "Leelawadee UI", system-ui, sans-serif;
  --kg-paper: var(--surface); --kg-ink: var(--ink); --kg-gold-ink: var(--gold-ink); --kg-ink-2: var(--ink-soft); --kg-line: var(--line);
  --kg-shadow-1: 0 2px 10px rgba(13, 27, 62, .10);
  display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "photo name" "ctl ctl" "line line" "noauto noauto"; gap: 8px 12px; align-items: center;
  margin: 12px 0 0; padding: 12px 14px; max-width: none; border: 2px solid var(--line); }
.welcome-host .kg-host__body { display: contents; }
.welcome-host .kg-host__photo { grid-area: photo; width: 56px; height: 56px; object-position: 50% 40%; }
[data-app="global"] .welcome-host .kg-host__photo { object-position: 47% 30%; }
.welcome-host .kg-host__name { grid-area: name; margin: 0; font-size: 15px; }
.welcome-host .kg-host__line { grid-area: line; }
.welcome-host .kg-host__ctl { grid-area: ctl; }
.welcome-host .kg-host__noauto { grid-area: noauto; }
/* The buttons come right under her name, so «Sound on» is seen first; the captions are always on in this box. */
.welcome-host .kg-host__b[data-a="cc"] { display: none; }
/* Captions like subtitles: the newest three lines show, the older ones go up out of sight. */
.welcome-host .kg-host__line { margin: 0; font-size: 1rem; line-height: 1.5; max-height: 4.5em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.welcome-host .kg-host__ctl { gap: 6px; }
.welcome-host .kg-host__b { padding: 0 12px; }
.welcome-host .kg-host__noauto { justify-self: start; margin: 0; }
.welcome-host.kg-host--min { grid-template-columns: 48px 1fr; }
.welcome-host.kg-host--min .kg-host__photo { width: 48px; height: 48px; }
.welcome-lead { margin-top: 14px; }
.welcome-promise { margin: 8px 0 0; color: var(--ink-soft); }
/* After the introduction: the one button to press next is marked (a gold ring, no movement). */
#start.start-ready { box-shadow: 0 0 0 4px var(--gold); }

/* F1 (v0.66.0): the grammar list by level, the sentence-pattern cards, and «find my level» / level tests (#test). */
.list-heading { list-style: none; }
.list-heading .lesson-heading { margin: 18px 0 6px; }
.pattern-cards > summary { list-style: none; cursor: pointer; min-height: 48px; }
.pattern-cards > summary::-webkit-details-marker { display: none; }
.pattern-cards[open] > summary { margin-bottom: 10px; }
.pattern-card .pattern { margin-bottom: 10px; }
.pattern-card .btn { margin-top: 8px; }
.test-word { margin: 8px 0 12px; font-size: 2rem; text-align: center; }
.test-word .piece { display: inline-block; }

/* ---------- F2: the hero — promise, «say your first sentence», level path, real numbers ---------- */
.hero-eyebrow { margin: 0 0 4px; color: var(--gold); font-size: 14px; font-weight: 800; letter-spacing: .03em; }
.hero-text .hero-promise-title { margin: 0 0 12px; font-size: 1.6rem; line-height: 1.25; }
.hero-try { margin: 0; padding: 14px 14px 12px; border-radius: 16px; background: var(--cream); color: var(--navy); box-shadow: 0 2px 10px rgba(13, 27, 62, .25); }
.hero-try-label { margin: 0; color: #8A5D17; font-size: 14px; font-weight: 800; }
.hero-try-text { margin: 2px 0 0; font-family: "Leelawadee UI", "Noto Sans Lao", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; font-size: 2.1rem; line-height: 1.35; font-weight: 700; color: var(--navy); }
.hero-try-roman { margin: 0; color: var(--ink-soft); font-size: 1rem; font-weight: 600; }
.hero-try-steps { display: flex; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: trystep; }
.hero-try-steps li { flex: 1 1 0; min-width: 0; padding: 6px 4px; border-radius: 10px; background: rgba(13, 27, 62, .06); color: var(--ink-soft); font-size: 14px; line-height: 1.25; text-align: center; counter-increment: trystep; }
.hero-try-steps li::before { content: counter(trystep) " "; font-weight: 800; }
.hero-try-steps li[data-state="now"] { background: var(--navy); color: #FFFFFF; font-weight: 700; }
.hero-try-steps li[data-state="done"] { background: rgba(201, 146, 58, .22); color: var(--navy); }
.hero-try-steps li[data-state="done"]::before { content: "\2713  "; }
.hero-try-bar { height: 8px; margin: 10px 0 0; border-radius: 999px; background: rgba(13, 27, 62, .12); overflow: hidden; }
.hero-try-bar span { display: block; height: 100%; background: var(--gold); transform-origin: left center; }
.hero-try-status { min-height: 1.45em; margin: 8px 0 0; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.hero-try[data-phase="speak"] .hero-try-status { font-size: 1.15rem; }
.hero-try-go { width: 100%; min-height: 52px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.hero-try-go[disabled] { opacity: .55; }
.hero-path { margin: 12px 0 0; }
.hero-path-steps { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; list-style: none; position: relative; }
.hero-path-steps::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: rgba(251, 241, 227, .55); }
.hero-path-step { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); border: 2px solid var(--gold); color: #FFFFFF; font-size: 14px; font-weight: 800; }
.hero-path-step:first-child { background: var(--gold); color: var(--navy); }
.hero-path-text { margin: 6px 0 0; color: var(--cream); font-size: 14px; line-height: 1.35; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.hero-stat { padding: 6px 4px; border-top: 2px solid var(--gold); text-align: center; }
.hero-stat b { display: block; color: #FFFFFF; font-size: 1.2rem; line-height: 1.2; }
.hero-stat span { display: block; color: var(--cream); font-size: 14px; line-height: 1.25; }
.facts-box { margin: 12px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--navy); }
@media (prefers-reduced-motion: reduce) { .hero-try-bar span { transition: none !important; } }

/* F2: the answer of a question stays in sight, with why and «hear it again». */
.check-feedback { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); scroll-margin-bottom: 140px; }
.check-feedback .exam-feedback { margin: 0; }
.check-why { margin: 6px 0 0; }
.check-feedback .btn-audio { margin-top: 8px; }
.check-feedback .hint { margin: 6px 0 0; }
.exam-why { display: block; margin-top: 6px; font-weight: 600; }
.exam-feedback .btn-audio { display: inline-flex; margin-top: 8px; }
/* F2: the hero now holds the try, so the picture is darker at the top too (the gold line above the promise stays readable),
   and the «Get started» bar of the first screen has a solid band so it never sits on the navy hero. */
.hero::after { background: linear-gradient(180deg, rgba(13, 27, 62, .74) 0%, rgba(13, 27, 62, .88) 35%, rgba(13, 27, 62, .95) 100%); }
#view-welcome .actionbar { z-index: 3; background: var(--bg); box-shadow: 0 -6px 14px rgba(13, 27, 62, .10); }
.hero-try-status:empty { min-height: 0; margin: 0; }

/* F2: «move my progress». */
.move-card h2 { margin-top: 0; }
.move-qr { display: block; width: 100%; max-width: 360px; height: auto; margin: 8px auto; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; image-rendering: pixelated; }
.move-part { margin: 6px 0 0; font-weight: 800; color: var(--navy); }
.move-text summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--navy); cursor: pointer; }
.move-code { width: 100%; min-height: 96px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; word-break: break-all; }
.move-text .btn { margin-top: 8px; }
.move-confirm { margin-top: 8px; padding: 12px; border: 2px solid var(--gold); border-radius: 12px; background: var(--warm); }
.move-confirm .lead { margin-top: 0; font-weight: 800; }
.badge-review { background: var(--warm); border-color: var(--gold); color: #6B4300; }
.sheet-status { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.sheet-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-weight: 800; color: var(--navy); background: var(--warm); }
.sheet-chip-review { border-color: var(--gold); color: #6B4300; }
.sheet-chip-approved, .sheet-chip-published { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
@media (max-width: 400px) {
  .hero-text .hero-promise-title { font-size: 1.35rem; margin-bottom: 10px; }
  .hero-try { padding: 12px 12px 10px; }
  .hero-try-text { font-size: 1.8rem; }
  .hero-try-steps { margin-top: 8px; }
}

/* v0.68.0 — EPS: the explanation line, and the result review (every question again, «try again» on a wrong one). */
.exam-explain { font-weight: 500; line-height: 1.5; color: var(--ink); }
.exam-explain .badge { vertical-align: middle; }
.result-review { margin: 20px 0; }
.result-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.review-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.review-q[data-right="false"] { border-color: var(--crimson); }
.review-q-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; font-weight: 700; }
.review-q-head::-webkit-details-marker { display: none; }
.review-q-mark { min-width: 1.4em; text-align: center; }
.review-q[data-right="true"] .review-q-mark { color: #1E6B34; }
.review-q[data-right="false"] .review-q-mark { color: #A50D26; }
.review-q-sec { margin-left: auto; font-weight: 500; color: var(--ink-soft); font-size: 0.9rem; }
.review-q-body { padding: 0 14px 14px; overflow-wrap: anywhere; }
.review-q-passage { white-space: pre-line; margin: 0 0 8px; }
.review-q-prompt { margin: 6px 0; font-weight: 600; }
.review-q-again { margin-top: 10px; }

/* v0.69.0 — «Foundations» (#found): the eight parts, word rows, tense cards, number drills, pairs. */
.found-parts { list-style: none; margin: 8px 0 12px; padding: 0; }
.found-back { margin: 0 0 8px; min-height: 48px; }
.found-next { display: block; width: 100%; margin: 20px 0 8px; min-height: 48px; text-align: left; }
.found-source { margin-top: 20px; }
.found-example { margin: 10px 0; overflow-wrap: anywhere; }
.found-example .card-foot { gap: 10px; }
.found-say { min-height: 48px; }
.found-say-status { flex: 1 1 100%; margin: 0; min-height: 1.4em; }
.found-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.found-actions .btn { flex: 1 1 140px; min-height: 48px; }
.found-row { margin: 10px 0; overflow-wrap: anywhere; }
.found-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.found-row-top .piece { flex: 1 1 auto; min-width: 0; }
.found-row-top .btn-audio, .found-cell .btn-audio, .found-pair-side .btn-audio { min-height: 44px; }
.found-more { margin-top: 8px; }
.found-more > summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--navy); cursor: pointer; }
.found-table { display: grid; gap: 12px; margin: 12px 0; }
.found-tense { overflow-wrap: anywhere; }
.found-tense > h3 { margin: 0 0 6px; }
.found-markers { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; }
.found-markers .piece { padding: 2px 10px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--warm); }
.found-kind-none { background: var(--surface); }
.found-level-1 { border-color: var(--navy); }
.found-level-3 { border-color: var(--crimson); }
.found-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.found-cell { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.found-cell .card-note, .found-cell .card-meaning { margin: 0; }
.found-cell[data-known="true"] { border-color: var(--navy); background: var(--tint); }
.found-more .found-cell { margin: 8px 0; }
.found-digits { font-weight: 700; letter-spacing: .02em; }
.found-digits-small { font-size: 1.15rem; font-weight: 700; }
.found-question { margin: 12px 0; }
.found-question .options, .found-question .chunks { margin-top: 10px; }
.found-way { margin: 14px 0; overflow-wrap: anywhere; }
.found-subhead { margin: 18px 0 8px; font-size: 1.1rem; }
.found-pair { margin: 10px 0; }
.found-pair-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.found-pair-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.found-pair-side .card-note { margin: 0; }
.found-pair-mark { align-self: center; color: var(--gold-ink); font-size: 1.4rem; font-weight: 700; }
.option-text { min-width: 0; overflow-wrap: anywhere; }
.btn-audio-text { white-space: normal; }

/* KG-SHARE v1.0 (2026-10-18): the shared part's heart + WhatsApp buttons (vendor/kg/kg_share_like.js) stay above the
   bottom bar and above a screen's sticky action bar, and the page ends higher so they never hide its last button. */
.has-bottomnav .kgs-dock { bottom: calc(var(--nav-h, 62px) + 12px) !important; }
body:has(.view:not([hidden]) .actionbar) .kgs-dock { bottom: calc(var(--nav-h, 0px) + 84px) !important; }
body:not(.has-bottomnav):has(.view:not([hidden]) .actionbar) .kgs-dock { bottom: 84px !important; }
body:has(.kgs-dock) main { padding-bottom: calc(24px + var(--nav-h, 0px) + 128px); }
.kgs-n { font-size: 13px !important; min-width: 22px !important; height: 22px !important; line-height: 22px !important; }   /* the like count: never under 13px */
/* The IPA line under the romanisation (lao-ipa.js): small, never under 13px, hidden when turned off in settings. */
.ipa { display: block; font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", system-ui, sans-serif; font-size: max(13px, .78rem); font-weight: 400; color: var(--ink-soft); letter-spacing: 0; overflow-wrap: anywhere; }
span.ipa { display: inline; margin-left: .4em; }
.speak-first .piece small.ipa { font-size: max(13px, .8rem); font-weight: 400; color: var(--ink-soft); }
.ipa-off .ipa { display: none; }
html[data-app="global"] .ipa-setting { display: none; }
/* Milestones on the first screen (js/badges.js). */
.today-badges { margin: 8px 0 12px; }
.badge-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; }
.badge { padding: 4px 10px; border: 2px solid var(--gold); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: max(13px, .85rem); font-weight: 700; line-height: 1.3; }
.badge-next { margin: 0; color: var(--ink-soft); font-size: max(13px, .89rem); }

/* ---------- Global Bridge Chinese (gb-zh): Simplified under Traditional, tones, characters, words ---------- */
.piece small.zh-simp, .wb-original .zh-simp { color: var(--gold-ink); font-size: max(13px, .8rem); }
.speak-first .piece small.zh-simp { font-size: max(13px, .8rem); font-weight: 400; color: var(--gold-ink); }
.zh-box .piece { font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif; }
.zh-box-big .piece { font-size: 1.9rem; line-height: 1.2; }
.zh-row { gap: 8px; }
.zh-tone-chart { display: block; width: 100%; max-width: 420px; height: auto; margin: 12px auto; }
.zh-tone-grid { stroke: var(--line); stroke-width: 1; }
.zh-tone-level, .zh-tone-num { fill: var(--ink-soft); font-size: 13px; font-family: "Segoe UI", system-ui, sans-serif; }
.zh-tone-line { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.zh-tone-1 { stroke: var(--navy); } .zh-tone-2 { stroke: var(--gold); } .zh-tone-3 { stroke: var(--crimson); } .zh-tone-4 { stroke: var(--gold-ink); }
.zh-tone-names { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 6px; }
.zh-tone-name { padding: 8px 12px; border-radius: 10px; background: var(--warm); border-left: 6px solid var(--line); font-size: 1rem; }
.zh-tone-name.zh-tone-1 { border-left-color: var(--navy); } .zh-tone-name.zh-tone-2 { border-left-color: var(--gold); }
.zh-tone-name.zh-tone-3 { border-left-color: var(--crimson); } .zh-tone-name.zh-tone-4 { border-left-color: var(--gold-ink); }
.zh-set { margin: 12px 0; }
.zh-sandhi { margin: 10px 0; }
.zh-sandhi-line { margin: 4px 0 0; font-size: 1rem; }
.zh-pinyin-head { font-family: "Segoe UI", system-ui, sans-serif; }
.zh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.zh-radical { text-align: center; padding: 12px; }
.zh-radical-head { font-size: 2.4rem; margin: 0; line-height: 1.2; }
.zh-radical-examples { font-size: 1.3rem; margin: 4px 0 0; letter-spacing: .15em; }
.zh-write-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.zh-write-pick { min-width: 48px; min-height: 48px; font-size: 1.3rem; padding: 4px 10px; }
.zh-write-head { font-size: 1.4rem; }
.chunk.zh-box[data-trace="true"] { border-color: var(--gold); }

/* ---------- gb-frame: Global Bridge course map, compare / «why new» boxes, «do not give up» lines (docs/20 §7) ---------- */
.gb-strip { margin: 12px 0 16px; padding: 12px 14px; background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius); }
.gb-strip > p, .gb-after > p { margin: 6px 0; }
.gb-growth, .gb-praise { font-weight: 700; color: var(--primary); }
.gb-goal { color: var(--gold-ink); font-weight: 700; }
.gb-comeback { color: var(--primary); }
.gb-opens { color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 8px; }
.gb-after { margin: 8px 0; }
.gb-map-link, .gb-easier { display: block; width: 100%; min-height: 48px; margin: 8px 0; }
.gb-box { margin: 12px 0; padding: 12px 14px; border-radius: 8px; border-left: 4px solid var(--primary); background: var(--tint); }
.gb-box.gb-same { border-left-color: var(--gold); background: var(--warm); }
.gb-box.gb-new { border-left-color: var(--crimson); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--crimson); }
.gb-box-title { margin: 0 0 4px; font-weight: 700; }
.gb-box-text { margin: 0; }
.cm-level, .cm-cat { margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cm-level > summary, .cm-cat > summary {
  display: block; position: relative;
  min-height: 56px; padding: 10px 14px 10px 34px; cursor: pointer; list-style: none;
}
.cm-level > summary > span, .cm-cat > summary > span { display: block; }
.cm-level > summary::-webkit-details-marker, .cm-cat > summary::-webkit-details-marker { display: none; }
.cm-level > summary::before, .cm-cat > summary::before { content: "▸"; position: absolute; left: 14px; top: 10px; color: var(--gold-ink); font-weight: 700; }
.cm-level[open] > summary::before, .cm-cat[open] > summary::before { content: "▾"; }
.cm-level[open] > summary { border-bottom: 1px solid var(--line); }
.cm-level > :not(summary) { margin-left: 12px; margin-right: 12px; }
.cm-level-name { font-weight: 700; color: var(--primary); font-size: 1.05rem; }
.cm-cat { background: var(--warm); }
.cm-cat-name { font-weight: 700; }
.cm-count { color: var(--ink-soft); font-size: .95rem; }
.cm-cat > :not(summary) { margin-left: 10px; margin-right: 10px; }
.cm-sub { margin: 12px 0 6px; font-size: 1rem; color: var(--gold-ink); }
.cm-cando-title { margin: 10px 0 4px; font-weight: 700; }
.cm-cando { list-style: none; margin: 0 0 8px; padding: 0; }
.cm-card { margin: 0 0 6px; padding: 10px 12px; background: var(--warm); border: 1px solid var(--line); border-radius: 8px; }
.cm-card-done { border-color: var(--gold); font-weight: 700; }
.cm-units { padding: 0; }
.cm-planned { cursor: default; border-style: dashed; background: var(--warm); }

/* Review helper lines (gloss.js): a small line in the course language under a button or title — never below 13 px. */
.kgloss { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: 0; text-transform: none; opacity: .78; overflow-wrap: anywhere; text-align: inherit; }
/* «Read and write» (#read, reading-view.js) — 2026-10-18 lb-content */
.read-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.read-tools .btn, .read-sequence, .read-meaning { min-height: 48px; }
.read-shadow-status, .read-say-status { margin: 4px 0; min-height: 1.4em; }
.read-sentence .card-foot { flex-wrap: wrap; gap: 8px; }
.read-glossary { margin: 16px 0; }
.read-glossary > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.read-words { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.read-word { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.read-word-play { min-width: 96px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--gold); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; }
.read-word-gloss { flex: 1 1 8em; }
.read-write .build { min-height: 56px; }
.read-draft { margin-top: 18px; }

/* The way in (CEO 2026-10-19): the guide's welcome card first — her photo or film and voice, three short lines and one
   big button. The guide box inside is the shared part (kg_host); here her picture is larger and the box has no frame. */
.welcome-card { margin: 8px 0 18px; padding: 16px; background: var(--surface); border: 2px solid var(--gold); border-radius: 22px; box-shadow: 0 6px 20px rgba(13, 27, 62, .12); }
.welcome-card .welcome-host.kg-host { margin: 0; padding: 0; border: 0; box-shadow: none; grid-template-columns: 96px 1fr; }
.welcome-card .welcome-host .kg-host__photo { width: 96px; height: 96px; }
.welcome-card .welcome-host .kg-host__video { background: var(--cream); }
.welcome-card .welcome-host.kg-host--min { grid-template-columns: 72px 1fr; }
.welcome-card .welcome-host.kg-host--min .kg-host__photo { width: 72px; height: 72px; }
.welcome-card-what { margin: 14px 0 6px; font-size: 1.5rem; line-height: 1.25; color: var(--navy); }
.welcome-card-how { margin: 0 0 4px; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.welcome-card-together { margin: 0 0 14px; font-size: 1rem; line-height: 1.45; font-weight: 700; color: var(--gold-ink); }
.welcome-go { width: 100%; min-height: 60px; font-size: 1.2rem; }
.welcome-card .lang-buttons { margin-top: 12px; }
@media (max-width: 359px) { .welcome-card { padding: 12px; } .welcome-card-what { font-size: 1.3rem; } }

/* Coming back: the guide greets on the first screen, then «last time», the big «continue» and the second button. */
.today-greet { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.today-guide:empty { display: none; }
.today-guide .guide-avatar { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold); }
.today-hello { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.05rem; line-height: 1.4; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.today-go { width: 100%; min-height: 56px; font-size: 1.1rem; }
.today-card > .btn { margin-top: 10px; width: 100%; }
.today-card .today-streak { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.today-helper { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--gold-ink); }

/* The 10-second check-in after the third lesson: one question, three big answers, one optional line. */
.checkin { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(13, 27, 62, .55); }
.checkin-box { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 16px 14px; background: var(--surface); border-radius: 20px; border-top: 4px solid var(--gold); text-align: center; }
.checkin-avatar { display: block; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold); }
.checkin-box h2 { margin: 0 0 4px; font-size: 1.3rem; color: var(--navy); }
.checkin-why, .checkin-reward { margin: 0 0 12px; color: var(--ink-soft); font-size: 1rem; }
.checkin-reward { color: var(--gold-ink); font-weight: 700; }
.checkin-choices { display: grid; gap: 8px; }
.checkin-choice { min-height: 56px; justify-content: center; font-size: 1.1rem; font-weight: 800; }
.checkin-choice[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.checkin-more { margin-top: 12px; text-align: left; }
.checkin-label { display: grid; gap: 4px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.checkin-more .btn, .checkin-box > .btn { width: 100%; margin-top: 8px; }
.checkin-more .hint { margin: 6px 0 0; font-size: 14px; }
.checkin-skip { min-height: 48px; }

/* The 3-minute pilot (#pilot/<token>, pilot-view.js, CEO 2026-10-19): three steps, three questions, a thank-you. */
.pilot-steps { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pilot-step h2 { margin: 2px 0 4px; }
.pilot-step p { margin: 0 0 8px; }
.pilot-step-n { color: #8A5D17; font-size: 14px; font-weight: 800; }
.pilot-step[data-done="true"] { border-color: var(--gold); }
.pilot-survey { margin-top: 14px; }
.pilot-q { margin: 12px 0 0; padding: 0; border: 0; }
.pilot-q legend { padding: 0; font-weight: 700; color: var(--navy); }
.pilot-scores { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 6px; margin-top: 6px; }
.pilot-score { min-height: 48px; justify-content: center; font-size: 1.1rem; font-weight: 800; }
.pilot-scale { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.pilot-survey .btn-primary { margin-top: 12px; width: 100%; }
.pilot-gift { display: grid; gap: 8px; justify-items: center; text-align: center; border-color: var(--gold); }
.pilot-gift h2, .pilot-gift p { margin: 0; }
.pilot-badge { padding: 6px 14px; border-radius: 999px; background: var(--navy); color: #FFFFFF; font-weight: 800; }
.pilot-cards { display: grid; gap: 8px; width: 100%; }
.pilot-gift > .btn, .pilot-cards .btn { width: 100%; }

/* ---------- Level ladder as folders (level-tree.js, CEO 2026-10-19): level cards, category tiles, crumbs, shortcuts ---------- */
.ltree-ladder { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.ltree-level { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: var(--radius); padding: 12px 14px; }
.ltree-level[data-current="true"] { border-color: var(--navy); border-left-color: var(--navy); box-shadow: 0 2px 10px rgba(13, 27, 62, .12); }
.ltree-level-soon { border-left-color: var(--line); background: var(--warm); }
.ltree-level-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ltree-level-btn .module-name, .ltree-level-btn .module-desc { display: block; }
.ltree-level-label { flex: 1 1 auto; min-width: 0; }
.ltree-level-n { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.2rem; }
.ltree-level-2 .ltree-level-n { background: var(--gold-ink); }
.ltree-level-3 .ltree-level-n { background: var(--crimson); }
.ltree-level-4 .ltree-level-n { background: var(--ink-soft); }
.ltree-now { display: inline-block; margin-top: 4px; }
.ltree-counts { margin: 8px 0 0; font-weight: 700; color: var(--ink); font-size: 1rem; }
.ltree-cando-title { margin: 8px 0 0; color: var(--gold-ink); font-weight: 700; font-size: 1rem; }
.ltree-cando { margin: 4px 0 8px; padding-left: 1.2em; font-size: 1rem; line-height: 1.45; }
.ltree-cando li { margin: 2px 0; }
.ltree-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ltree-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; height: 100%; min-height: 112px; padding: 12px; border: 1px solid var(--line); border-top: 6px solid var(--navy); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ltree-tile-tones, .ltree-tile-reading { border-top-color: var(--crimson); }
.ltree-tile-words, .ltree-tile-expr { border-top-color: var(--gold); }
.ltree-tile-grammar, .ltree-tile-tests { background: var(--warm); }
.ltree-tile-name { font-weight: 800; font-size: 1.05rem; }
.ltree-tile-desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.35; }
.ltree-tile-count { margin-top: auto; color: var(--gold-ink); font-weight: 700; font-size: 1rem; }
.ltree-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 8px; font-size: 1rem; }
.ltree-crumb { min-height: 44px; min-width: 44px; padding: 0 8px; border: 0; background: none; color: var(--navy); font: inherit; text-decoration: underline; cursor: pointer; }
.ltree-crumb-here { font-weight: 700; padding: 0 4px; }
.ltree-crumb-sep { color: var(--ink-soft); }
.ltree-near { margin: 4px 0 12px; }
.ltree-near .chip[aria-current="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); opacity: 1; }
.ltree-row .module-arrow { flex: none; font-size: 1.4rem; color: var(--gold-ink); }
.ltree-tip { margin: 8px 0 12px; padding: 10px 12px; border-left: 4px solid var(--gold); background: var(--warm); border-radius: 8px; font-size: 1rem; }
.ltree-tip-tone { border-left-color: var(--crimson); }
.ltree-grow { margin: 8px 0; }
.ltree-share { margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: var(--radius); }
.ltree-share-btn { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
.ltree-repeat { margin-top: 8px; }
.ltree-repeat .actionbar-pair { flex-wrap: wrap; }
.ltree-step { margin: 8px 0; font-weight: 700; }
.ltree-verb-lao { font-size: 1.5rem; }
.ltree-verb-example { font-size: 1.25rem; margin: 8px 0 0; }
.ltree-start { margin-top: 16px; min-height: 48px; }
/* The language buttons (KG-APP-CARE §2-1): every language visible, each its own colour, the current one framed. */
.lang-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 auto; padding: 4px var(--gutter) 8px; max-width: 480px; }
.lang-buttons .lang-btn { min-height: 44px; min-width: 64px; padding: 0 12px; border: 2px solid transparent; border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; color: #fff; background: var(--navy); }
.lang-buttons .lang-btn:nth-child(2) { background: var(--gold-ink); }
.lang-buttons .lang-btn:nth-child(3) { background: var(--crimson); }
.lang-buttons .lang-btn:nth-child(4) { background: var(--cream); color: var(--navy); border-color: var(--navy); }
.lang-buttons .lang-btn:nth-child(5) { background: var(--ink-soft); }
.lang-buttons .lang-btn[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 2px; font-weight: 800; }
.home-cats { margin-top: 8px; }
.today-more { display: grid; gap: 8px; margin-top: 8px; }