@font-face {
  font-family: Mali;
  src: url("/assets/mali-light.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Mali;
  src: url("/assets/mali-medium.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
/* The app's bold titles: Compose asks Mali Medium for Bold and synthesizes the extra weight.
   Declaring the medium face as 400 lets `font-weight: 700` synthesize it the same way. */
@font-face {
  font-family: "Mali Bold";
  src: url("/assets/mali-medium.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #163d39;
  --muted: #60736f;
  --teal: #007b70;
  --dark: #005c53;
  --mint: #e6f4ef;
  --paper: #f7f9f6;
  --line: #dfe7df;
  --amber: #f6c965;
  --coral: #eeb7a1;
  --radius: 20px;

  /* Mobile design tokens (shared/…/ui/theme: Color.kt, AppTokens.kt, FixedColors.kt).
     Light theme only: the web has no dark theme yet. */
  --md-app-bar: #00796b;
  --md-on-app-bar: #ffffff;
  --md-brand: #009688;
  --md-primary: #00796b;
  --md-primary-container: #ddf0ec;
  --md-background: #f3f6f5;
  --md-surface: #ffffff;
  --md-on-surface: #0e2420;
  --md-on-surface-variant: #4b5f5b;
  --md-outline: #7d908c;
  --md-outline-variant: #dce5e3;
  --md-divider: #dce5e3;
  --md-hero: #00695c;
  --md-on-hero-muted: #d6ece8;
  --md-hero-icon: #ddf0ec;
  --md-streak: #f29d2e;
  --md-streak-track: #e3ecea;
  --md-streak-container: #fff1de;
  --md-on-streak-container: #5c3300;
  --md-warning: #8a4b00;
  --md-rose-chip: #fde7ec;
  --md-rose-icon: #a3324f;
  --md-violet-chip: #ece8fb;
  --md-violet-icon: #5a47b8;
  --md-scrim: #0814127a;
  /* Shared by the feature sheets (their own tokens alias these). */
  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-on-primary-container: #00413a;
  --md-surface-container: #eef3f2;
  --md-surface-variant: #e7eeec;
  --md-success: #2e7d32;
  --md-card-shadow: 0 1px 2px #0e24200d, 0 4px 14px #0e242008;
  --md-card-shadow-hover: 0 2px 4px #0e24200f, 0 12px 28px #0e242014;
  --md-radius-s: 8px;
  --md-radius-m: 12px;
  --md-radius-l: 16px;
  --md-radius-xl: 24px;
  --font-app: Mali, system-ui, sans-serif;
  --font-app-bold: "Mali Bold", Mali, system-ui, sans-serif;
  --app-bar-height: 64px;
  --gutter: 16px;
}
/* Story screens (audio.css, reading.css) and the PRO, notes and records sheets that share their
   colours: the mobile "Reader B" tokens (theme/Color.kt, AppTokens.kt). */
:root {
  --sn-appbar: #00796b;
  --sn-hero: #00695c;
  --sn-on-hero-muted: #d6ece8;
  --sn-bg: #f3f6f5;
  --sn-surface: #fff;
  --sn-ink: #0e2420;
  --sn-muted: #4b5f5b;
  --sn-outline: #7d908c;
  --sn-line: #dce5e3;
  --sn-soft: #eef3f2;
  --sn-container: #ddf0ec;
  --sn-on-container: #00413a;
  --sn-amber: #fff1de;
  --sn-on-amber: #5c3300;
  --sn-amber-strong: #8a4b00;
  --sn-star: #f29d2e;
  --sn-pro: #e07a00;
  --sn-on-pro: #1a0e00;
  --sn-lock: #d32f2f;
  --sn-gutter: 42px;
  --sn-main-top: 24px;
}
@media (max-width: 1150px) { :root { --sn-gutter: 28px; } }
@media (max-width: 620px) { :root { --sn-gutter: 18px; --sn-main-top: 20px; } }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--md-background);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
button,
a {
  touch-action: manipulation;
}
svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3,
.brand {
  font-family: Mali, system-ui, sans-serif;
  font-weight: 600;
}
h1 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.3;
  letter-spacing: -1px;
}
h2 {
  font-size: 21px;
  line-height: 1.4;
}
h3 {
  font-size: 17px;
  line-height: 1.45;
}
:focus-visible {
  outline: 3px solid #bb7815;
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 12px;
  background: var(--dark);
  color: white;
  border-radius: 8px;
}
.skip:focus {
  top: 12px;
}

/* ───────────── Shell (web): light sidebar, white header, content column ─────────────
   ≥1024 desktop: 248px sidebar with labels. 768–1023 tablet: icon rail.
   <768 phone: the mobile shell (teal app bar + bottom navigation), see the phone block below. */
.app-shell {
  --sidebar-w: 248px;
  --header-h: 64px;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--md-surface);
  border-right: 1px solid var(--md-outline-variant);
  display: flex;
  flex-direction: column;
  z-index: 20;
  font-family: var(--font-app);
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  height: var(--header-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.brand img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  /* The app icon (teal tile): the bare logo.webp has white parts made for the teal phone app bar. */
  border-radius: 9px;
}
.brand-text {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.brand-text strong {
  font: 700 16px/20px var(--font-app-bold);
  white-space: nowrap;
}
.brand-text > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--md-on-surface-variant);
}
.web-label {
  font: 700 8px/1 system-ui, sans-serif;
  letter-spacing: 1px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--md-primary-container);
  color: var(--md-primary);
}
.main-nav,
.study-nav {
  display: grid;
  gap: 4px;
  padding: 16px 12px 0;
}
.nav-caption {
  font: 600 11px/1.4 var(--font-app);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin: 12px 12px 6px;
}
.main-nav a,
.study-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  min-height: 48px;
  border-radius: var(--md-radius-m);
  font: 600 15px/1.3 var(--font-app);
  color: var(--md-on-surface-variant);
}
.nav-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.nav-glyph {
  width: 32px;
  height: 32px;
  margin: 0 -4px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--md-primary-container);
  color: var(--md-primary);
}
.nav-glyph svg {
  width: 18px;
  height: 18px;
}
.nav-glyph.streak {
  background: var(--md-streak-container);
  color: #c46a00;
}
.nav-glyph.journal {
  background: var(--md-violet-chip);
  color: var(--md-violet-icon);
}
/* Vocab takes the Practice vocab card's amber; grammar keeps the teal of its card. */
.nav-glyph.vocab {
  background: var(--md-streak-container);
  color: var(--md-warning);
}
.main-nav a:hover,
.study-nav a:hover {
  background: var(--md-background);
  color: var(--md-on-surface);
}
/* Active item: mint pill, teal text. The Home tab reads aria-current="true" while a
   "Học tập" link is the page, so only one item is highlighted on wide screens. */
.main-nav a[aria-current="page"],
.study-nav a[aria-current="page"] {
  background: var(--md-primary-container);
  color: var(--md-primary);
  font-family: var(--font-app-bold);
  font-weight: 700;
}
.study-nav a[aria-current="page"] .nav-glyph {
  background: var(--md-surface);
}
.sidebar-bottom {
  margin-top: auto;
  padding: 24px 16px 16px;
}
.pocket-card {
  background: linear-gradient(160deg, var(--md-primary-container), #eef8f5);
  border: 1px solid #00796b1f;
  border-radius: var(--md-radius-l);
  padding: 14px 16px 6px;
  color: var(--md-on-surface);
}
.pocket-title {
  font: 700 14px/20px var(--font-app-bold);
}
.pocket-card p:not(.pocket-title) {
  font-size: 12px;
  line-height: 1.45;
  color: var(--md-on-surface-variant);
  margin: 4px 0 8px;
}
.pocket-links {
  display: grid;
}
.pocket-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border-top: 1px solid #00796b1f;
  font: 600 13px/1.3 var(--font-app);
  color: var(--md-primary);
}
.pocket-card a:hover {
  text-decoration: underline;
}
.back-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--md-on-surface-variant);
  padding-top: 12px;
}
.back-link:hover {
  color: var(--md-primary);
}
.workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: var(--header-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fffffff2;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.screen-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.screen-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: none;
}
.screen-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  color: var(--md-on-surface);
}
.screen-back svg {
  width: 20px;
  height: 20px;
}
.screen-back:hover {
  background: var(--md-primary-container);
  border-color: transparent;
  color: var(--md-primary);
}
.screen-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Breadcrumb: the parent screens, then the h1. It gives way first when space is short. */
.crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 100;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 14px/20px var(--font-app);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.crumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
}
.crumbs a {
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 6px;
  padding: 2px 4px;
}
.crumbs a:hover {
  color: var(--md-primary);
  background: var(--md-primary-container);
}
.crumbs li::after {
  content: "›";
  padding: 0 4px;
  color: var(--md-outline);
}
#screen-title {
  margin: 0;
  min-width: 0;
  font: 700 20px/26px var(--font-app-bold);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  color: var(--md-on-surface);
}
/* Beside the breadcrumb the title keeps its width (the crumbs give way); even a sub-pixel
   shrink would wrap it onto two lines. Alone it still wraps within the bar. */
.screen-heading > #screen-title {
  flex: 0 0 auto;
  max-width: 100%;
}
#screen-title .app-title {
  display: none;
}
#screen-title .title-sep {
  display: none;
}
/* The title takes focus only so screen readers announce the new screen
   (tabindex="-1", never reachable by Tab), so it never shows a ring. */
#screen-title:focus {
  outline: none;
}
.topbar .account-link {
  flex-shrink: 0;
}
.topbar .account-link[hidden] {
  display: none;
}
.account-link {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--md-outline-variant);
  border-radius: 100px;
  padding: 4px 16px 4px 4px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: 600 14px/1.3 var(--font-app);
  min-height: 44px;
  max-width: 260px;
}
.account-link > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-primary);
  flex-shrink: 0;
}
.account-link:hover {
  border-color: #9fcfc6;
  background: #f5fbf9;
}
.account-link svg {
  width: 18px;
  height: 18px;
}
#account-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feature-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
}
.feature-intro .button {
  flex-shrink: 0;
}
html {
  scroll-padding-top: 90px;
}
main {
  --main-pad-top: 32px;
  --main-pad-x: 40px;
  width: 100%;
  max-width: calc(1200px + 2 * var(--main-pad-x));
  margin: 0;
  padding: var(--main-pad-top) var(--main-pad-x) 56px;
  min-height: calc(100dvh - 130px);
  flex: 1;
  /* Mầm's particles move by translating a box the size of the whole pose, so
     an invisible edge of one can poke past a phone screen. Clip (not hidden)
     keeps the pinned reader bars working — it creates no scroll container. */
  overflow-x: clip;
}
main:focus {
  outline: none;
}
.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  max-width: 1200px;
  margin: 0 40px;
  padding: 18px 0;
  border-top: 1px solid var(--md-outline-variant);
  font-size: 12px;
  color: var(--md-on-surface-variant);
}

/* ───────────── Web layout primitives (shared by every screen) ───────────── */
.web-page {
  display: grid;
  gap: 28px;
  min-width: 0;
  font-family: var(--font-app);
  color: var(--md-on-surface);
  line-height: 1.45;
}
.web-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.web-page-head > :first-child {
  flex: 1 1 320px;
  min-width: 0;
}
.web-page-head p {
  color: var(--md-on-surface-variant);
  font-size: 15px;
  line-height: 22px;
}
.web-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.web-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: var(--cols, repeat(auto-fill, minmax(240px, 1fr)));
}
.web-split {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}
.web-split > aside,
.web-split > .web-aside {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.web-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  box-shadow: 0 1px 2px #0e24200d, 0 4px 14px #0e242008;
  padding: 24px;
  min-width: 0;
}
a.web-card,
button.web-card,
.web-card.is-interactive {
  display: block;
  color: inherit;
  text-align: left;
  font: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
a.web-card:hover,
button.web-card:hover,
.web-card.is-interactive:hover {
  transform: translateY(-2px);
  border-color: #b9dbd3;
  box-shadow: 0 2px 4px #0e24200f, 0 12px 28px #0e242014;
}
.web-section-title {
  margin: 0;
  font: 700 20px/28px var(--font-app-bold);
  color: var(--md-on-surface);
}

/* ───────────── Shared bits other screens use ───────────── */
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 650;
  color: var(--teal);
  margin-bottom: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  background: #fff8e6;
  color: #735010;
  font-size: 11px;
  font-weight: 650;
}
.pill svg {
  width: 13px;
  height: 13px;
}
/* Pill buttons, as in the app (feature styles may size them; the shape stays a pill). */
.button {
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  min-height: 46px;
  font-weight: 600;
  font-size: 14px;
}
.button:hover {
  background: var(--dark);
}
.button svg {
  width: 18px;
  height: 18px;
}
.button.secondary {
  background: white;
  color: var(--dark);
  border: 1px solid var(--line);
}
.button.secondary:hover {
  background: var(--mint);
}
.button.text {
  background: transparent;
  color: var(--muted);
}
.button.text:hover {
  color: var(--dark);
  background: var(--paper);
}
/* Mầm (see mascot.js). Decorative; sized by width (or height), the pose keeps its aspect. */
.mam {
  display: block;
  pointer-events: none;
  user-select: none;
}
img.mam {
  height: auto;
  object-fit: contain;
}
.dialog-mam {
  width: 104px;
  margin: -6px 0 14px;
}
.state-message {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 440px;
  margin: 24px auto;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.state-mam {
  width: 110px;
  margin-bottom: 8px;
}
.state-message p {
  color: var(--muted);
  margin-bottom: 14px;
}
.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--mint);
  color: var(--dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.icon-tile.amber {
  background: #fff0cd;
  color: #815707;
}
.icon-tile.coral {
  background: #fbe8df;
  color: #9c4b2a;
}
.icon-tile.lavender {
  background: #edeafb;
  color: #65519a;
}
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  margin-top: 12px;
  line-height: 1.7;
}
.notice svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}
/* A white rounded card of rows separated by hairlines (mobile ShelfCard / MenuCard). */
.panel {
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  background: var(--md-surface);
  overflow: hidden;
}

/* ───────────── Mobile screens (Home, Luyện tập, Khác, Đăng nhập) ───────────── */
main[data-route="home"],
main[data-route="practice"],
main[data-route="profile"],
main[data-route="login"] {
  font-family: var(--font-app);
  color: var(--md-on-surface);
  line-height: 1.4;
}
.section-title {
  font: 700 18px/24px var(--font-app-bold);
  color: var(--md-on-surface);
  padding-top: 4px;
}
.icon-square {
  width: 40px;
  height: 40px;
  border-radius: var(--md-radius-m);
  background: var(--md-primary-container);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.icon-square img {
  width: 26px;
  height: 26px;
}
.row-chevron {
  width: 20px;
  height: 20px;
  color: var(--md-outline);
}

/* Home */
.home-screen {
  display: grid;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
}
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.home-top .feature-card {
  grid-column: 1 / -1;
}
.home-streak-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-l);
  background: var(--md-surface);
  min-width: 0;
}
.home-streak-bar-tree {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.home-streak-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-streak-bar-text strong {
  font: 700 16px/22px var(--font-app-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-streak-bar-text > span:not(.home-streak-bar-track) {
  font-size: 13px;
  line-height: 18px;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-streak-bar-track {
  display: block;
  height: 6px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--md-streak-track);
  overflow: hidden;
}
.home-streak-bar-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--md-streak);
}
.home-streak-bar .row-chevron {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  color: var(--md-on-surface-variant);
}
.timer-toggle {
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-l);
  background: var(--md-surface);
  font: 600 12px/16px var(--font-app);
  color: var(--md-on-surface);
  font-variant-numeric: tabular-nums;
}
.timer-toggle img {
  width: 28px;
  height: 28px;
}
.timer-toggle.running,
.timer-toggle[aria-expanded="true"] {
  background: var(--md-primary-container);
}
.feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-l);
  background: var(--md-surface);
  font: 600 14px/20px var(--font-app);
}
.home-streak-bar:hover,
.timer-toggle:hover,
.feature-card:hover,
.category:hover,
.menu-row:hover {
  background-color: #f7faf9;
}
/* Study-timer panel (mobile StudyTimerPanel): a countdown ring that drains with the session. */
@property --timer-left {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.timer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-l);
  background: var(--md-surface);
}
.timer-card.running {
  background: var(--md-primary-container);
}
.timer-ring {
  --timer-left: 1;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  transition: --timer-left 0.6s;
}
.timer-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--md-primary) calc(var(--timer-left) * 1turn), #00796b24 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.timer-readout {
  position: relative;
  color: var(--md-primary);
  font: 700 18px/24px var(--font-app-bold);
  font-variant-numeric: tabular-nums;
}
.timer-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.timer-copy strong {
  font: 700 16px/22px var(--font-app-bold);
}
.timer-copy span {
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 18px;
}
.button.pill {
  margin-top: 6px;
  min-height: 40px;
  padding: 8px 16px;
  gap: 6px;
  border-radius: 99px;
  background: var(--md-primary);
  font: 600 14px/20px var(--font-app);
}
.button.pill.secondary {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}
.button.pill.secondary:hover {
  background: #00796b14;
}
.home-stories {
  display: grid;
  gap: 12px;
}
.audio-hero-wrap {
  position: relative;
  padding-top: 20px;
}
.audio-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 88px 16px 16px;
  min-height: 84px;
  border-radius: var(--md-radius-l);
  background: var(--md-hero);
  color: var(--md-on-app-bar);
}
.audio-hero:hover {
  background: #005d52;
}
.audio-hero .icon-square {
  width: 52px;
  height: 52px;
  background: var(--md-hero-icon);
}
.audio-hero .icon-square img {
  width: 32px;
  height: 32px;
}
.audio-hero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.audio-hero-text strong {
  font: 700 18px/24px var(--font-app-bold);
}
.audio-hero-text span {
  font-size: 13px;
  line-height: 18px;
  color: var(--md-on-hero-muted);
}
.hero-mam {
  position: absolute;
  top: 0;
  right: 8px;
  width: 88px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.category {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-l);
  background: var(--md-surface);
  color: var(--md-on-surface);
}
.category-label {
  font: 600 13px/18px var(--font-app);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-games {
  display: grid;
  gap: 12px;
}
/* Cropped to its top band like the app's banner (about 4:1); capped so a
   wide desktop column does not turn it into a thin strip. */
.game-banner {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 130px;
  padding: 0;
  border: 0;
  border-radius: var(--md-radius-l);
  overflow: hidden;
  background: #3a4fd6;
}
.game-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Home on the web (≥768): a dashboard. Welcome card (greeting, Mầm, today's ring, timer),
   a right rail (streak garden, journal, games) from 1360, story banner + category grid. */
.home-welcome,
.home-welcome-stats {
  display: contents;
}
.home-welcome-head,
.home-today,
.welcome-mam,
.audio-hero-chips,
.audio-hero-cta,
.category-line,
.game-banner-text,
.home-streak-bar-eyebrow,
.feature-card small,
.feature-card .row-chevron {
  display: none;
}
.home-screen {
  gap: 12px;
}
.feature-card-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.category-text {
  display: contents;
}
@media (min-width: 768px) {
  .home-screen {
    max-width: none;
    margin: 0;
    gap: 28px 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "welcome" "top" "stories" "games";
    align-items: start;
  }
  .home-welcome {
    grid-area: welcome;
    position: relative;
    display: grid;
    gap: 18px;
    padding: 26px 28px 28px;
    border: 1px solid #cfe7e0;
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 18%, #ffffffcc 0 60px, transparent 61px),
      linear-gradient(135deg, #d9f0e9 0%, #ecf7f3 55%, #f8fcfa 100%);
    overflow: hidden;
  }
  .home-welcome-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 96px;
  }
  .home-welcome-text {
    display: grid;
    gap: 4px;
    min-width: 0;
  }
  .home-date {
    font: 600 13px/18px var(--font-app);
    color: var(--md-primary);
  }
  .home-date::first-letter {
    text-transform: uppercase;
  }
  .home-welcome h2 {
    font: 700 30px/38px var(--font-app-bold);
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
  }
  .home-welcome-text p:last-child {
    font-size: 15px;
    line-height: 22px;
    color: var(--md-on-surface-variant);
  }
  .welcome-mam {
    display: block;
    width: 124px;
    flex-shrink: 0;
    margin: -14px 4px -16px 0;
  }
  .home-welcome-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 14px;
  }
  .home-today {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-l);
    background: var(--md-surface);
  }
  .home-today-ring {
    --today: 0;
    position: relative;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    display: grid;
    place-content: center;
    justify-items: center;
    line-height: 1;
  }
  .home-today-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--md-streak) calc(var(--today) * 1turn), var(--md-streak-track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  }
  .home-today-ring strong {
    font: 700 22px/1 var(--font-app-bold);
    font-variant-numeric: tabular-nums;
  }
  .home-today-ring small {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    margin-top: 2px;
  }
  .home-today-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .home-today-eyebrow {
    font: 600 12px/16px var(--font-app);
    color: var(--md-on-surface-variant);
  }
  .home-today-text strong {
    font: 700 17px/22px var(--font-app-bold);
  }
  .home-today-streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: start;
    margin-top: 4px;
    padding: 2px 10px 2px 6px;
    border-radius: 99px;
    background: var(--md-streak-container);
    color: var(--md-on-streak-container);
    font: 600 12px/20px var(--font-app);
    white-space: nowrap;
  }
  .home-today-streak svg {
    width: 15px;
    height: 15px;
    color: #d97a00;
  }
  .home-welcome .timer-card {
    min-width: 0;
    padding: 14px 18px;
  }
  .home-welcome .timer-copy {
    flex: 1;
  }
  .home-today:hover,
  .home-welcome .timer-card:not(.running):hover {
    border-color: #b9dbd3;
  }
  .timer-toggle {
    display: none;
  }
  .home-top {
    grid-area: top;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .home-top .feature-card {
    grid-column: auto;
  }
  .home-streak-bar,
  .home-top .feature-card {
    gap: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    box-shadow: 0 1px 2px #0e24200d, 0 4px 14px #0e242008;
  }
  .home-streak-bar-garden {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: end center;
    border-radius: 18px;
    background: linear-gradient(180deg, #e9f6f1 0%, #d5ede4 70%, #c3e3d6 100%);
    overflow: hidden;
  }
  .home-streak-bar-tree {
    width: 76px;
    height: 76px;
  }
  .home-streak-bar-eyebrow,
  .feature-card small {
    display: block;
    font: 600 12px/16px var(--font-app);
    color: var(--md-on-surface-variant);
  }
  .home-streak-bar-text strong {
    font-size: 18px;
    line-height: 24px;
  }
  .home-top .feature-card {
    min-height: 118px;
  }
  .home-top .feature-card .icon-square {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--md-violet-chip);
  }
  .home-top .feature-card .icon-square img {
    width: 34px;
    height: 34px;
  }
  .feature-card-text > span {
    font: 700 16px/22px var(--font-app-bold);
  }
  .feature-card small {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    margin-top: 2px;
  }
  .feature-card .row-chevron {
    display: block;
    width: 22px;
    height: 22px;
  }
  .home-streak-bar,
  .home-top .feature-card,
  .home-today,
  .audio-hero,
  .category,
  .game-banner {
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background-color 0.18s;
  }
  .home-streak-bar:hover,
  .home-top .feature-card:hover,
  .category:hover,
  .game-banner:hover {
    transform: translateY(-2px);
    border-color: #b9dbd3;
    background-color: var(--md-surface);
    box-shadow: 0 2px 4px #0e24200f, 0 12px 28px #0e242014;
  }
  .home-stories {
    grid-area: stories;
    gap: 16px;
  }
  .home-games {
    grid-area: games;
  }
  .section-title {
    font-size: 20px;
    line-height: 28px;
  }
  .audio-hero-wrap {
    padding-top: 0;
  }
  .hero-mam {
    display: none;
  }
  .audio-hero {
    min-height: 128px;
    padding: 22px 26px;
    gap: 20px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0%, #ffffff1f 0 120px, transparent 121px),
      linear-gradient(120deg, var(--md-hero) 0%, #00897b 100%);
  }
  .audio-hero:hover {
    background:
      radial-gradient(circle at 100% 0%, #ffffff26 0 120px, transparent 121px),
      linear-gradient(120deg, #005d52 0%, #007d70 100%);
  }
  .audio-hero .icon-square {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }
  .audio-hero .icon-square img {
    width: 44px;
    height: 44px;
  }
  .audio-hero-text {
    flex: 1;
    gap: 2px;
  }
  .audio-hero-text strong {
    font-size: 22px;
    line-height: 28px;
  }
  .audio-hero-text > span:not(.audio-hero-chips) {
    font-size: 14px;
    line-height: 20px;
  }
  .audio-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .audio-hero-chips span {
    padding: 2px 10px;
    border-radius: 99px;
    background: #ffffff24;
    color: var(--md-on-app-bar);
    font: 600 12px/18px var(--font-app);
  }
  .audio-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 18px 0 20px;
    border-radius: 99px;
    background: var(--md-surface);
    color: var(--md-hero);
    font: 700 15px/20px var(--font-app-bold);
    box-shadow: 0 4px 14px #00302a33;
  }
  .audio-hero-cta svg {
    width: 20px;
    height: 20px;
  }
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .category {
    min-height: 88px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    text-align: left;
  }
  .category .icon-square {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .category .icon-square img {
    width: 30px;
    height: 30px;
  }
  .category-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .category-label {
    font: 700 15px/20px var(--font-app-bold);
    text-align: left;
  }
  .category-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    color: var(--md-on-surface-variant);
  }
  /* Games: image + caption as one card, side by side until the rail takes it. */
  .game-banner {
    max-width: none;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--md-outline-variant);
    border-radius: 20px;
    background: var(--md-surface);
    text-align: left;
    color: var(--md-on-surface);
  }
  .game-banner img {
    height: 168px;
    object-position: center 38%;
  }
  .game-banner-text {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 16px 20px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .game-banner-text strong {
    font: 700 17px/22px var(--font-app-bold);
  }
  .game-banner-text span {
    grid-column: 1;
    font-size: 13px;
    line-height: 18px;
    color: var(--md-on-surface-variant);
  }
  .game-banner-text svg {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 22px;
    height: 22px;
    color: var(--md-primary);
  }
}
@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1360px) {
  .home-screen {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "welcome top" "stories games";
  }
  .home-top {
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
    align-content: start;
  }
  .home-games {
    padding-top: 0;
  }
  .game-banner {
    grid-template-columns: minmax(0, 1fr);
  }
  .game-banner img {
    height: 150px;
  }
}

/* Luyện tập */
.practice-screen {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.vocab-wrap {
  position: relative;
  padding-top: 18px;
}
.practice-card {
  border: 0;
  text-align: left;
  color: #fff;
  font-family: var(--font-app);
}
.vocab-card {
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 112px 16px 16px;
  border-radius: 22px;
  background: linear-gradient(to bottom right, #c77418, #e79a2e);
}
.vocab-mam {
  position: absolute;
  top: 0;
  right: 8px;
  width: 96px;
}
.card-eyebrow {
  font: 700 12px/16px var(--font-app-bold);
  color: #ffffffeb;
}
.vocab-card .card-title {
  font: 700 20px/26px var(--font-app-bold);
}
.vocab-card .card-sub {
  font-size: 13px;
  line-height: 18px;
  color: #ffffffeb;
}
.card-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.practice-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gradient-card {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2px;
  padding: 40px 14px 14px;
  border-radius: 22px;
}
.gradient-card.grammar {
  background: linear-gradient(to bottom right, #1e8c7e, #2ba89c);
}
.gradient-card.chat {
  background: linear-gradient(to bottom right, #778ded, #9962d1);
}
.gradient-card .card-glyph {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 64px;
  height: 64px;
  color: #ffffff59;
}
.gradient-card .card-title {
  position: relative;
  font: 700 16px/22px var(--font-app-bold);
}
.gradient-card .card-sub {
  position: relative;
  font-size: 12px;
  line-height: 16px;
  color: #ffffffeb;
}
.vocab-card:hover,
.gradient-card:hover {
  filter: brightness(1.05);
}
.shelves {
  display: grid;
  gap: 12px;
}
.shelves section {
  display: grid;
  gap: 12px;
  align-content: start;
}
.menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-top: 1px solid var(--md-divider);
  background: var(--md-surface);
  color: var(--md-on-surface);
  text-align: left;
  font-family: var(--font-app);
}
.menu-row:first-child {
  border-top: 0;
}
.row-chip {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--md-primary-container);
  color: var(--md-primary);
}
.row-chip svg {
  width: 18px;
  height: 18px;
}
.row-chip.rose {
  background: var(--md-rose-chip);
  color: var(--md-rose-icon);
}
.row-chip.violet {
  background: var(--md-violet-chip);
  color: var(--md-violet-icon);
}
.row-chip.amber {
  background: var(--md-streak-container);
  color: var(--md-warning);
}
.row-label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 22px;
}
.row-label small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--md-on-surface-variant);
}

/* Luyện tập on the web: three feature cards in a row, then the two shelves side by side. */
.practice-head {
  display: none;
}
.practice-features {
  display: contents;
}
@media (min-width: 768px) {
  .practice-screen {
    max-width: none;
    margin: 0;
    gap: 28px;
  }
  .practice-head {
    display: flex;
  }
  .practice-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .practice-features .vocab-wrap {
    grid-column: 1 / -1;
  }
  .practice-pair {
    display: contents;
  }
  .vocab-wrap {
    padding-top: 0;
    display: flex;
  }
  .vocab-card {
    min-height: 200px;
    justify-content: flex-end;
    gap: 6px;
    padding: 24px 180px 26px 28px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 88% 30%, #ffffff2e 0 90px, transparent 91px),
      linear-gradient(to bottom right, #c77418, #e79a2e);
  }
  .vocab-card .card-eyebrow {
    font-size: 13px;
    margin-bottom: auto;
  }
  .vocab-card .card-title {
    font-size: 26px;
    line-height: 32px;
  }
  .vocab-card .card-sub {
    font-size: 14px;
    line-height: 20px;
  }
  .vocab-mam {
    top: auto;
    bottom: 14px;
    right: 28px;
    width: 132px;
  }
  .gradient-card {
    min-height: 200px;
    padding: 24px 24px 26px;
    border-radius: 24px;
    gap: 4px;
  }
  .gradient-card .card-glyph {
    top: 14px;
    right: 14px;
    width: 96px;
    height: 96px;
    color: #ffffff40;
  }
  .gradient-card .card-title {
    font-size: 20px;
    line-height: 26px;
  }
  .gradient-card .card-sub {
    font-size: 14px;
    line-height: 20px;
  }
  .vocab-card,
  .gradient-card {
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
  }
  .vocab-card:hover,
  .gradient-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px #0e242024;
  }
  .shelves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
  .shelves .panel {
    border-radius: 20px;
    box-shadow: 0 1px 2px #0e24200d, 0 4px 14px #0e242008;
  }
  .shelves .menu-row,
  .settings-panel .menu-row {
    min-height: 62px;
    padding: 10px 18px;
    gap: 14px;
  }
  .shelves .row-chip {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .shelves .row-chip svg {
    width: 22px;
    height: 22px;
  }
  .menu-row:hover .row-chevron {
    color: var(--md-primary);
    translate: 2px 0;
  }
  .row-chevron {
    transition: translate 0.18s, color 0.18s;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .gradient-card {
    min-height: 168px;
  }
  .vocab-card {
    min-height: 184px;
  }
}
@media (min-width: 1280px) {
  .practice-features {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .practice-features .vocab-wrap {
    grid-column: auto;
  }
  .vocab-card {
    min-height: 220px;
    padding-right: 150px;
  }
  .gradient-card {
    min-height: 220px;
  }
  .vocab-mam {
    width: 120px;
    right: 22px;
  }
}

/* Khác */
main[data-route="profile"] {
  max-width: none;
}
.profile-screen {
  display: grid;
  gap: 14px;
}
.profile-side {
  display: contents;
}
.profile-card {
  margin: calc(-1 * var(--main-pad-top)) calc(-1 * var(--main-pad-x)) 0;
  padding: 8px var(--main-pad-x) 60px;
  background: var(--md-app-bar);
  color: var(--md-on-app-bar);
}
.profile-inner,
.profile-body,
.pro-wrap {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}
.profile-inner {
  display: grid;
  gap: 16px;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  min-width: 0;
}
.avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid #ffffff8c;
  background: var(--md-primary-container);
  color: var(--md-primary);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.avatar svg {
  width: 52px;
  height: 52px;
  margin-bottom: -8px;
}
.avatar.has-initial {
  align-items: center;
  font: 700 24px/1 var(--font-app-bold);
}
.profile-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.profile-card h2 {
  font: 700 18px/24px var(--font-app-bold);
  overflow-wrap: anywhere;
}
.profile-card p {
  font-size: 13px;
  line-height: 18px;
  color: #ffffffd9;
  overflow-wrap: anywhere;
}
.button.on-bar {
  width: 100%;
  min-height: 46px;
  gap: 8px;
  border-radius: 99px;
  background: var(--md-on-app-bar);
  color: var(--md-app-bar);
  font: 700 16px/22px var(--font-app-bold);
}
.button.on-bar:hover {
  background: #e8f4f1;
}
.profile-body {
  display: grid;
  gap: 14px;
  position: relative;
}
.settings-group {
  display: grid;
  gap: 10px;
}
/* Phones mirror the app's single settings card; the group names stay for screen readers. */
.settings-group .web-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pro-wrap {
  position: relative;
  padding-top: 8px;
  margin-top: -54px;
}
.pro-card {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 14px 104px;
  border: 1px solid #f29d2e59;
  border-radius: 18px;
  background: var(--md-streak-container);
  color: var(--md-on-streak-container);
  text-align: left;
  font-family: var(--font-app);
  box-shadow: 0 2px 6px #0e24201f, 0 1px 2px #0e242014;
}
.pro-card:hover {
  background: #ffebd0;
}
.pro-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pro-text strong {
  font: 700 16px/22px var(--font-app-bold);
}
.pro-text span {
  font-size: 13px;
  line-height: 18px;
}
.pro-text small {
  font: 600 11px/16px var(--font-app);
  color: var(--md-warning);
}
.pro-card .row-chevron {
  width: 24px;
  height: 24px;
  color: var(--md-warning);
}
.pro-mam {
  position: absolute;
  left: 8px;
  bottom: 4px;
  height: 96px;
  width: auto;
}
.settings-panel .menu-row {
  min-height: 54px;
}
.settings-panel .row-chip {
  width: 34px;
  height: 34px;
}
.app-version {
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--md-on-surface-variant);
}

/* Khác on the web: a settings page. Account + PRO in a left column, grouped settings right. */
@media (min-width: 768px) {
  main[data-route="profile"] {
    max-width: calc(1200px + 2 * var(--main-pad-x));
  }
  .profile-screen {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .profile-side {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 18px;
  }
  .profile-card {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--md-outline-variant);
    border-radius: 20px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    box-shadow: 0 1px 2px #0e24200d, 0 4px 14px #0e242008;
  }
  .profile-card::before {
    content: "";
    display: block;
    height: 64px;
    background:
      radial-gradient(circle at 85% 20%, #ffffff40 0 34px, transparent 35px),
      linear-gradient(120deg, var(--md-hero), #26a69a);
  }
  .profile-inner {
    max-width: none;
    padding: 0 22px 22px;
    gap: 18px;
  }
  .profile-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: -40px;
  }
  .avatar {
    width: 76px;
    height: 76px;
    border: 4px solid var(--md-surface);
    box-shadow: 0 2px 8px #0e24201f;
  }
  .avatar svg {
    width: 64px;
    height: 64px;
    margin-bottom: -10px;
  }
  .avatar.has-initial {
    font-size: 30px;
  }
  .profile-card h2 {
    font-size: 20px;
    line-height: 26px;
  }
  .profile-card p {
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 20px;
  }
  .button.on-bar {
    background: var(--md-primary);
    color: var(--md-on-app-bar);
    font-size: 15px;
  }
  .button.on-bar:hover {
    background: var(--md-hero);
  }
  .button.on-bar.is-logout {
    background: transparent;
    color: var(--md-primary);
    border: 1px solid var(--md-outline-variant);
  }
  .button.on-bar.is-logout:hover {
    background: var(--md-primary-container);
  }
  .pro-wrap {
    max-width: none;
    margin: 0;
    padding-top: 14px;
  }
  .pro-card {
    min-height: 112px;
    padding: 16px 16px 16px 100px;
    border-radius: 20px;
    box-shadow: none;
  }
  .pro-mam {
    left: 4px;
    bottom: 6px;
    height: 104px;
  }
  .profile-body {
    max-width: none;
    margin: 0;
    gap: 28px;
  }
  .settings-group {
    gap: 12px;
  }
  .settings-group .web-section-title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 18px;
    line-height: 24px;
  }
  .settings-panel {
    border-radius: 20px;
    box-shadow: 0 1px 2px #0e24200d, 0 4px 14px #0e242008;
  }
  .settings-panel .row-chip {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .settings-panel .row-chip svg {
    width: 22px;
    height: 22px;
  }
  .app-version {
    text-align: left;
    margin-top: -8px;
  }
  .profile-body > .notice {
    margin-top: -16px;
  }
}
@media (min-width: 1280px) {
  .profile-screen {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 32px;
  }
}

/* Đăng nhập — the mobile login sheet, as a page */
.login-screen {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 210px);
}
.login-sheet {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px 24px;
  border-radius: 28px;
  background: var(--md-surface);
  box-shadow: 0 1px 3px #0e24201a, 0 8px 28px #0e242014;
  text-align: center;
}
.login-mam {
  height: 132px;
  width: auto;
}
.login-sheet h2 {
  font: 700 24px/30px var(--font-app-bold);
}
.login-body {
  font-size: 16px;
  line-height: 22px;
  color: var(--md-on-surface-variant);
  margin-bottom: 2px;
}
.provider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 99px;
  border: 1.5px solid var(--md-outline-variant);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: 600 16px/22px var(--font-app);
}
.provider:hover {
  background: #f7faf9;
}
.provider.apple {
  background: var(--md-on-surface);
  color: var(--md-surface);
  border-color: var(--md-on-surface);
}
.provider.apple:hover {
  background: #23403a;
}
.provider svg {
  height: 20px;
  width: 20px;
}
.auth-status {
  font-size: 13px;
  line-height: 18px;
  min-height: 18px;
  color: var(--md-on-surface-variant);
}
.auth-status:empty {
  display: none;
}
.auth-status.error {
  color: #a63725;
}
.login-later {
  min-height: 44px;
  border-radius: 99px;
  color: var(--md-on-surface-variant);
  font: 600 16px/22px var(--font-app);
}
.login-sheet .privacy {
  font-size: 12px;
  line-height: 18px;
  color: var(--md-on-surface-variant);
}
.privacy a {
  text-decoration: underline;
}

/* Đăng nhập on the web: split screen. Brand panel (mint, Mầm, real benefits) + sign-in card. */
.login-brand,
.login-brand-mam {
  display: none;
}
@media (min-width: 768px) {
  .login-screen {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    place-items: stretch;
    gap: 0;
    min-height: min(640px, calc(100dvh - 180px));
    border: 1px solid var(--md-outline-variant);
    border-radius: 28px;
    background: var(--md-surface);
    box-shadow: 0 1px 3px #0e24200f, 0 12px 40px #0e24200f;
    overflow: hidden;
  }
  .login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 40px 40px 0;
    background:
      radial-gradient(circle at 50% 100%, #ffffffa6 0 150px, transparent 151px),
      linear-gradient(150deg, #cdebe2 0%, #e2f4ee 55%, #f3faf7 100%);
    overflow: hidden;
  }
  .login-brand-copy {
    display: grid;
    gap: 12px;
    max-width: 440px;
  }
  .login-brand-eyebrow {
    font: 600 13px/18px var(--font-app);
    color: var(--md-primary);
  }
  .login-brand h2 {
    font: 700 30px/38px var(--font-app-bold);
    color: var(--md-on-surface);
  }
  .login-benefits {
    display: grid;
    gap: 12px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }
  .login-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    line-height: 21px;
    color: var(--md-on-surface);
  }
  .login-benefit-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--md-surface);
    color: var(--md-primary);
    box-shadow: 0 1px 3px #0e24201a;
  }
  .login-benefit-icon svg {
    width: 19px;
    height: 19px;
  }
  .login-brand-mam {
    display: block;
    align-self: center;
    width: 190px;
    margin-bottom: -6px;
  }
  .login-mam {
    display: none;
  }
  .login-sheet {
    max-width: none;
    justify-content: center;
    gap: 14px;
    padding: 48px 48px 40px;
    border-radius: 0;
    box-shadow: none;
  }
  .login-sheet > * {
    width: 100%;
    max-width: 380px;
  }
  .login-sheet h2 {
    font-size: 26px;
    line-height: 32px;
  }
  .login-later {
    width: auto;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .login-screen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .login-brand {
    padding: 32px 28px 0;
  }
  .login-brand h2 {
    font-size: 24px;
    line-height: 30px;
  }
  .login-benefits li {
    font-size: 14px;
  }
  .login-sheet {
    padding: 36px 28px 32px;
  }
}

/* ───────────── Dialogs, forms, toast ───────────── */
dialog {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px;
  max-width: 460px;
  width: calc(100% - 32px);
  color: var(--ink);
  box-shadow: 0 20px 90px #143d3926;
}
dialog::backdrop {
  background: rgba(16, 40, 33, 0.4);
}
dialog h2 {
  margin: 18px 0 12px;
  font-size: 25px;
  padding-right: 20px;
}
dialog p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
dialog .dialog-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
}
.icon-button:hover {
  background: var(--mint);
}
.close-dialog {
  position: absolute;
  right: 12px;
  top: 12px;
}
.close-dialog svg {
  width: 20px;
  height: 20px;
}
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 20px 0 8px;
}
select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  min-height: 48px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e2b28;
  color: white;
  z-index: 60;
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 8px 35px #143d3926;
}
.no-script {
  padding: 24px;
  text-align: center;
  position: fixed;
  inset: auto 0 0;
  background: #fff0cd;
  z-index: 90;
}

/* ───────────── Breakpoints: small desktop, tablet rail, phone ───────────── */
@media (max-width: 1279px) {
  main {
    --main-pad-x: 32px;
  }
  .topbar {
    padding: 0 32px;
  }
  .app-footer {
    margin-inline: 32px;
  }
}
@media (max-width: 1023px) {
  .web-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .web-split > aside,
  .web-split > .web-aside {
    position: static;
  }
}
/* Tablet: the sidebar collapses to an icon rail (names stay for assistive tech and tooltips). */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell {
    --sidebar-w: 76px;
  }
  .brand {
    justify-content: center;
    padding: 0;
  }
  .brand-text,
  .nav-caption,
  .sidebar-bottom .pocket-card {
    display: none;
  }
  .main-nav,
  .study-nav {
    padding: 12px 10px 0;
    justify-items: stretch;
  }
  .study-nav {
    margin-top: 8px;
    border-top: 1px solid var(--md-outline-variant);
  }
  .main-nav a,
  .study-nav a {
    justify-content: center;
    padding: 8px;
    min-height: 52px;
  }
  .nav-glyph {
    margin: 0;
  }
  .main-nav .nav-label,
  .study-nav .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sidebar-bottom {
    display: none;
  }
  main {
    --main-pad-x: 24px;
    --main-pad-top: 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .app-footer {
    margin-inline: 24px;
  }
}

/* ───────────── Phone: mobile app bar + bottom navigation ───────────── */
@media (max-width: 767px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    inset: auto 0 0;
    height: auto;
    overflow: visible;
    padding: 0 0 env(safe-area-inset-bottom);
    border: 0;
    border-top: 2px solid #7d908c26;
    background: var(--md-background);
  }
  .sidebar > .brand,
  .study-nav,
  .sidebar-bottom {
    display: none;
  }
  /* Mobile AnimatedBottomBar: unselected tabs show their icon, the selected tab its name in
     brand teal, with a 4px indicator hanging from the top edge. */
  .main-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
  }
  .main-nav a,
  .main-nav a:hover {
    justify-content: center;
    min-height: 64px;
    padding: 8px;
    border-radius: 0;
    background: transparent;
  }
  .main-nav a .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .main-nav a[aria-current],
  .main-nav a[aria-current]:hover {
    background: transparent;
    color: var(--md-brand);
    font: 700 14px/20px var(--font-app-bold);
  }
  .main-nav a[aria-current] .nav-icon {
    display: none;
  }
  .main-nav a[aria-current] .nav-label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
  .main-nav a[aria-current]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--md-brand);
  }
  .workspace {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }
  .topbar {
    padding: 0 12px 0 16px;
    background: var(--md-app-bar);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    color: var(--md-on-app-bar);
  }
  .screen-navigation {
    gap: 8px;
  }
  .screen-logo {
    display: block;
  }
  .screen-back {
    margin-left: -10px;
    border: 0;
    background: transparent;
    color: var(--md-on-app-bar);
  }
  .screen-back svg {
    width: 24px;
    height: 24px;
  }
  .screen-back:hover {
    background: #ffffff1f;
    color: var(--md-on-app-bar);
  }
  .crumbs {
    display: none;
  }
  #screen-title {
    color: var(--md-on-app-bar);
  }
  #screen-title .app-title {
    display: inline;
    font: 600 20px/26px var(--font-app);
  }
  #screen-title .tab-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #screen-title .title-sep {
    display: inline;
  }
  .account-link {
    padding: 8px 16px;
    border-color: #ffffff73;
    background: #ffffff1a;
    color: var(--md-on-app-bar);
  }
  .account-link > span:first-child {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
  }
  .account-link:hover {
    border-color: #ffffff73;
    background: #ffffff33;
  }
  main {
    --main-pad-top: 16px;
    --main-pad-x: var(--gutter);
    padding-bottom: 24px;
    min-height: calc(100dvh - 130px);
  }
  .web-page {
    gap: 16px;
  }
  .web-card {
    padding: 16px;
    border-radius: var(--md-radius-l);
  }
  .web-page-head p {
    font-size: 14px;
    line-height: 20px;
  }
  .app-footer {
    display: none;
  }
  .toast {
    bottom: 90px;
  }
}
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .topbar {
    gap: 10px;
  }
  .topbar .account-link {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .topbar .account-link > span:first-child {
    display: block;
  }
  .topbar #account-label {
    display: none;
  }
  .feature-intro {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
  .account-link {
    padding: 8px 11px;
    font-size: 12px;
    max-width: 155px;
  }
  .login-screen {
    min-height: 0;
    place-items: start center;
  }
  .login-sheet {
    padding: 24px 20px 20px;
  }
  dialog {
    padding: 28px 24px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .mam.bob {
    animation: mam-bob 3.4s ease-in-out infinite;
  }
  @keyframes mam-bob {
    0%,
    100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -6px;
    }
  }
  button,
  a {
    transition:
      background 0.18s,
      border-color 0.18s,
      color 0.18s;
  }
  main {
    animation: appear 0.2s ease-out;
  }
  @keyframes appear {
    from {
      opacity: 0.5;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (max-width: 767px) {
    .main-nav a[aria-current] .nav-label {
      animation: tab-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  }
  @keyframes tab-in {
    from {
      transform: translateY(60%);
      opacity: 0;
    }
  }
}

/* ───────────── Cloud sync: the account card's status line, the sign-out choice ───────────── */
.sync-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-width: 0;
  margin-top: -6px;
  font-size: 13px;
  line-height: 18px;
  color: #ffffffd9;
}
.sync-line[hidden] {
  display: none;
}
.profile-card .sync-line p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  color: inherit;
}
.sync-text {
  min-width: 0;
  text-wrap: pretty;
}
.sync-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #b9f6ca;
}
.sync-line[data-sync-state="syncing"] .sync-dot {
  background: #ffffffb3;
}
.sync-line[data-sync-state="offline"] .sync-dot {
  background: #ffe082;
}
.sync-line[data-sync-state="error"] .sync-dot,
.sync-line[data-sync-state="update"] .sync-dot {
  background: #ffab91;
}
.sync-now,
.sync-retry {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 700 13px/18px var(--font-app-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sync-now:disabled {
  opacity: 0.55;
  cursor: default;
}
.sync-retry {
  min-height: 0;
  padding-block: 4px;
}
.logout-wipe {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -6px 0 0;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.logout-wipe input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--md-primary);
}
dialog .logout-pending {
  margin: 10px 0 0;
  color: var(--md-warning);
  font-size: 13px;
}
@media (min-width: 768px) {
  .sync-line {
    margin-top: -8px;
    color: var(--md-on-surface-variant);
  }
  .sync-dot {
    background: #2e7d32;
  }
  .sync-line[data-sync-state="syncing"] .sync-dot {
    background: var(--md-outline);
  }
  .sync-line[data-sync-state="offline"] .sync-dot {
    background: #d8952a;
  }
  .sync-line[data-sync-state="error"] .sync-dot,
  .sync-line[data-sync-state="update"] .sync-dot {
    background: #c4622d;
  }
  .sync-now,
  .sync-retry {
    color: var(--md-primary);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sync-line[data-sync-state="syncing"] .sync-dot {
    animation: sync-pulse 1.2s ease-in-out infinite;
  }
  @keyframes sync-pulse {
    50% {
      opacity: 0.35;
    }
  }
}

/* Khác: the PRO chip, the avatar ring and the PRO card line (pro.css loads only with the PRO
   screens). Kept last so they still follow the account and PRO card rules above. */
.pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--md-streak-container);
  color: var(--md-on-streak-container);
  font: 700 13px/18px var(--font-app-bold);
}
.pro-chip svg {
  width: 16px;
  height: 16px;
  color: var(--md-warning);
}
.profile-text .pro-chip {
  margin-top: 6px;
}
/* Mobile UserProfileScreen: the avatar ring turns PRO orange. */
.avatar.is-pro {
  border-color: var(--sn-pro);
}
.pro-card small {
  font: 600 11px/16px var(--font-app);
  color: var(--md-warning);
}
@media (min-width: 768px) {
  .avatar.is-pro {
    border-color: var(--md-surface);
    box-shadow: 0 0 0 2px var(--sn-pro), 0 2px 8px #0e24201f;
  }
  .pro-card {
    transition: background 0.18s, box-shadow 0.18s;
  }
  .pro-card:hover {
    box-shadow: 0 2px 4px #0e24200f, 0 12px 28px #0e242014;
  }
}