:root {
  --pink-50: #fff8fb;
  --pink-100: #fff0f6;
  --pink-200: #ffdce9;
  --pink-300: #ffc2d8;
  --pink-400: #ff9fbe;
  --pink-500: #ff79aa;
  --pink-600: #eb5a93;
  --cream: #fffaf3;
  --white: #ffffff;
  --ink: #4d3540;
  --ink-soft: #745b67;
  --muted: #9b8490;
  --line: rgba(145, 85, 110, .12);
  --green: #8bc8af;
  --yellow: #f5d480;
  --lavender: #c9b6ef;
  --peach: #f8b989;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .76);
  --shadow-sm: 0 10px 26px rgba(153, 77, 111, .10);
  --shadow-md: 0 20px 50px rgba(153, 77, 111, .14);
  --shadow-lg: 0 30px 80px rgba(131, 62, 94, .18);
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --sidebar-width: 248px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 85% 6%, rgba(255, 182, 210, .52), transparent 28rem),
    radial-gradient(circle at 7% 40%, rgba(255, 234, 210, .72), transparent 31rem),
    radial-gradient(circle at 78% 86%, rgba(221, 204, 255, .50), transparent 27rem),
    linear-gradient(145deg, #fff9fc 0%, #fff4f8 45%, #fffaf4 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: .55;
  background-image: url("assets/sticker-sprinkles.svg");
  background-size: 540px 420px;
  background-repeat: repeat;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(255, 121, 170, .28);
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.page-glow {
  position: fixed;
  z-index: -2;
  border-radius: 999px;
  filter: blur(8px);
  pointer-events: none;
}
.page-glow--one { width: 420px; height: 420px; right: -180px; top: 18%; background: rgba(255, 190, 216, .32); }
.page-glow--two { width: 360px; height: 360px; left: -140px; bottom: 4%; background: rgba(255, 227, 197, .40); }
.sticker-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.glass-panel,
.glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.44));
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.app-shell { min-height: 100vh; }
.sidebar { display: none; }
.app-main { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 8px 0;
  padding: 10px 12px;
  border-radius: 22px;
}
.mobile-brand { display: inline-flex; align-items: center; gap: 9px; }
.mobile-brand img { width: 38px; height: 38px; border-radius: 14px; box-shadow: 0 8px 18px rgba(143, 67, 99, .14); }
.mobile-brand strong, .mobile-brand small { display: block; line-height: 1; }
.mobile-brand strong { font-size: 15px; font-weight: 900; letter-spacing: -.03em; }
.mobile-brand small { margin-top: 4px; color: var(--pink-600); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-button, .avatar-button, .streak-pill, .soft-button, .primary-button, .ghost-button, .card-arrow, .filter-chip, .nav-item, .lesson-row, .folder-card, .mini-card, .setting-option {
  border: 0;
  cursor: pointer;
}
.icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 9px 18px rgba(145, 70, 104, .10), inset 0 1px 0 #fff;
}
.avatar-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff9fbe, #e8528e);
  border: 3px solid #fff;
  box-shadow: 0 9px 20px rgba(190, 61, 117, .25), inset 0 1px 0 rgba(255,255,255,.35);
  font-weight: 900;
}
.streak-pill {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 9px 18px rgba(145, 70, 104, .09), inset 0 1px 0 #fff;
}
.streak-pill b { font-size: 14px; }
.streak-pill small { color: var(--muted); font-size: 10px; font-weight: 800; }

main { padding-bottom: calc(98px + var(--safe-bottom)); }
.page { width: min(100%, 1180px); margin: 0 auto; padding: 18px 14px 42px; }
.page-enter { animation: pageEnter .34s ease both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eyebrow {
  display: inline-block;
  color: var(--pink-600);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-heading, .page-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-heading h2, .page-heading h1, .hero-copy h1, .profile-hero h1 { margin: 6px 0 0; letter-spacing: -.045em; line-height: 1.05; }
.section-heading h2 { font-size: clamp(26px, 6vw, 34px); }
.page-heading { margin-bottom: 20px; }
.page-heading h1 { font-size: clamp(34px, 8vw, 56px); }
.page-heading p { max-width: 720px; margin: 9px 0 0; color: var(--ink-soft); line-height: 1.65; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b44976;
  font-weight: 850;
  white-space: nowrap;
}

.hero-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 430px;
  display: grid;
  grid-template-columns: 1fr;
  padding: 28px 22px 0;
  border-radius: 38px;
  background:
    radial-gradient(circle at 77% 18%, rgba(255,255,255,.82), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,220,233,.66) 55%, rgba(255,237,219,.68));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow-lg), inset 0 1px 0 #fff;
  backdrop-filter: blur(28px) saturate(1.3);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 29px;
  border: 1px solid rgba(255,255,255,.66);
  pointer-events: none;
}
.hero-card::after {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -130px;
  bottom: -205px;
  border-radius: 50%;
  background: rgba(255, 149, 190, .16);
  box-shadow: 0 0 0 50px rgba(255,255,255,.13), 0 0 0 100px rgba(255,255,255,.07);
  z-index: -1;
}
.hero-copy { position: relative; z-index: 2; max-width: 620px; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #a24470;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(148, 69, 104, .09);
}
.hero-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #86c5ab; box-shadow: 0 0 0 5px rgba(134,197,171,.16); }
.hero-copy h1 { margin-top: 16px; font-size: clamp(38px, 9vw, 68px); max-width: 640px; }
.hero-copy h1 em { color: var(--pink-600); font-style: normal; }
.hero-copy > p { max-width: 610px; color: var(--ink-soft); line-height: 1.7; font-size: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.primary-button, .soft-button, .ghost-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 17px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.primary-button {
  color: #fff;
  background: linear-gradient(145deg, #ff8eb7, #e85b94);
  box-shadow: 0 10px 0 #c8477d, 0 16px 28px rgba(197, 65, 122, .25), inset 0 1px 0 rgba(255,255,255,.35);
}
.primary-button:active { transform: translateY(6px); box-shadow: 0 4px 0 #c8477d, 0 9px 18px rgba(197,65,122,.2); }
.soft-button {
  color: #9e3f6a;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 9px 20px rgba(143, 67, 99, .10), inset 0 1px 0 #fff;
}
.ghost-button { min-height: 42px; padding: 0 14px; color: #9e3f6a; background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.8); }
.hero-art { position: relative; min-height: 210px; display: grid; place-items: end center; z-index: 2; }
.hero-art img { width: min(330px, 86vw); max-height: 285px; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(126, 58, 88, .16)); }
.hero-bubble {
  position: absolute;
  right: 4%;
  top: 13%;
  max-width: 190px;
  padding: 12px 14px;
  border-radius: 18px 18px 7px 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.quick-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 28px; }
.stat-pill {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}
.stat-pill b, .stat-pill small { display: block; }
.stat-pill b { font-size: 20px; }
.stat-pill small { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  padding: 19px;
  border-radius: 30px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.98); }
.feature-card::after {
  content: "";
  position: absolute;
  width: 165px;
  height: 165px;
  right: -70px;
  bottom: -80px;
  border-radius: 50%;
  background: var(--card-glow, rgba(255,160,194,.16));
  box-shadow: 0 0 0 26px rgba(255,255,255,.18);
}
.feature-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: var(--card-color, linear-gradient(145deg, #ff9cbe, #e95c95));
  box-shadow: 0 12px 24px rgba(143, 67, 99, .18), inset 0 1px 0 rgba(255,255,255,.45);
  font-size: 25px;
}
.feature-tag {
  align-self: flex-start;
  margin-top: 18px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--card-accent, #a84772);
  background: var(--card-tag, rgba(255,220,233,.62));
  border: 1px solid rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.feature-card h3 { margin: 12px 0 7px; font-size: 22px; letter-spacing: -.03em; }
.feature-card p { margin: 0 38px 0 0; color: var(--ink-soft); line-height: 1.6; font-size: 13px; }
.card-arrow {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--card-accent, #a84772);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 9px 18px rgba(143, 67, 99, .10), inset 0 1px 0 #fff;
}
.theme-hsk { --card-color: linear-gradient(145deg, #f7d98d, #e8b94e); --card-glow: rgba(247,217,141,.30); --card-tag: rgba(255,241,195,.72); --card-accent: #9b7018; }
.theme-chat { --card-color: linear-gradient(145deg, #f8b991, #e98c58); --card-glow: rgba(248,185,145,.28); --card-tag: rgba(255,228,208,.75); --card-accent: #a6582e; }
.theme-radical { --card-color: linear-gradient(145deg, #ff9fc2, #e85b94); --card-glow: rgba(255,159,194,.30); --card-tag: rgba(255,220,233,.74); --card-accent: #a83f6d; }
.theme-grammar { --card-color: linear-gradient(145deg, #c9b6ef, #9c83d2); --card-glow: rgba(201,182,239,.30); --card-tag: rgba(235,226,255,.74); --card-accent: #6d55a8; }

.surface-heading {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,238,245,.48));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px);
}
.surface-heading::after {
  content: "汉";
  position: absolute;
  right: 18px;
  bottom: -27px;
  color: rgba(233, 91, 149, .07);
  font-family: KaiTi, STKaiti, serif;
  font-size: 122px;
  font-weight: 900;
  line-height: 1;
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.breadcrumbs button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }
.breadcrumbs button:hover { color: var(--pink-600); }

.folder-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
.folder-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 150px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  text-align: left;
  border-radius: 26px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.folder-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), inset 0 1px 0 #fff; }
.folder-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--folder-bg, linear-gradient(145deg, #ffd6e5, #ff9fc2));
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  box-shadow: 0 11px 22px rgba(150, 67, 104, .14), inset 0 1px 0 rgba(255,255,255,.5);
}
.folder-card h3 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.025em; }
.folder-card p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.folder-card__meta { display: inline-flex; margin-top: 8px; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.66); color: var(--muted); font-size: 10px; font-weight: 850; }
.folder-card__chevron { color: var(--pink-600); font-size: 24px; }
.folder-card.is-disabled { cursor: default; opacity: .76; }
.folder-card.is-disabled:hover { transform: none; box-shadow: var(--shadow-sm), inset 0 1px 0 #fff; }

.content-stack { display: grid; gap: 14px; }
.empty-state {
  min-height: 330px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 34px 20px;
  border-radius: 32px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(20px);
}
.empty-state img { width: min(190px, 52vw); filter: drop-shadow(0 16px 24px rgba(131,62,94,.14)); }
.empty-state h2 { margin: 10px 0 8px; font-size: 25px; letter-spacing: -.03em; }
.empty-state p { max-width: 520px; margin: 0; color: var(--ink-soft); line-height: 1.65; }
.empty-state .demo-note { margin-top: 14px; padding: 8px 11px; border-radius: 999px; background: rgba(255,226,238,.65); color: #9e3f6a; font-size: 11px; font-weight: 850; }

.word-card, .sentence-card, .grammar-card, .radical-card, .profile-card, .progress-card {
  padding: 20px;
  border-radius: 28px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(20px);
}
.demo-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #9e3f6a;
  background: rgba(255,220,233,.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.word-card__main { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 15px; }
.hanzi-big { min-width: 98px; text-align: center; font-family: KaiTi, STKaiti, serif; font-size: clamp(62px, 17vw, 94px); line-height: 1; color: #bc4778; }
.word-card h2 { margin: 0; font-size: 26px; }
.pinyin { margin: 5px 0; color: var(--pink-600); font-weight: 800; }
.meaning { margin: 0; color: var(--ink-soft); }
.example-box { margin-top: 16px; padding: 14px; border-radius: 20px; background: rgba(255,244,248,.68); border: 1px solid rgba(255,255,255,.82); }
.example-box b, .example-box span { display: block; }
.example-box b { font-family: KaiTi, STKaiti, serif; font-size: 20px; }
.example-box span { margin-top: 5px; color: var(--ink-soft); font-size: 12px; }
.sentence-card h2 { margin: 14px 0 5px; font-family: KaiTi, STKaiti, serif; font-size: 29px; }
.sentence-card .translation { color: var(--ink-soft); }

.radical-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.search-box { flex: 1 1 240px; position: relative; }
.search-box input, .select-box select, .field input {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  color: var(--ink);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(143,67,99,.07);
}
.select-box select { min-width: 150px; }
.radical-group { margin-top: 16px; }
.radical-group__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.radical-group__heading h3 { margin: 0; }
.radical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.radical-card { text-align: center; }
.radical-card__symbol { font-family: KaiTi, STKaiti, serif; font-size: 56px; color: #bc4778; }
.radical-card h3 { margin: 7px 0 3px; }
.radical-card p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.radical-card small { display: block; margin-top: 8px; color: var(--muted); }

.grammar-card h2 { margin: 13px 0 7px; font-size: 23px; }
.pattern-code { margin: 14px 0; padding: 14px; border-radius: 18px; background: rgba(240,231,255,.66); color: #66509d; font-weight: 850; text-align: center; }
.grammar-card p { color: var(--ink-soft); line-height: 1.65; }

.review-grid, .progress-grid, .profile-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
.mini-card {
  width: 100%;
  min-height: 132px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 17px;
  text-align: left;
  border-radius: 25px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}
.mini-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,220,233,.72); font-size: 22px; }
.mini-card h3 { margin: 0 0 5px; }
.mini-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.mini-card__count { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 10px; font-weight: 850; }

.progress-card { min-height: 145px; }
.progress-card--wide { grid-column: 1 / -1; }
.progress-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.progress-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,220,233,.72); font-size: 22px; }
.progress-card h2 { margin: 16px 0 5px; font-size: 27px; }
.progress-card p { margin: 0; color: var(--muted); font-size: 12px; }
.progress-track { height: 10px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: rgba(229, 188, 205, .32); }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff9fbe, #e85b94); }

.profile-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,220,233,.53));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-md), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px);
}
.profile-avatar { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 25px; color: #fff; background: linear-gradient(145deg, #ff9fbe, #e85b94); border: 4px solid #fff; font-size: 30px; font-weight: 900; box-shadow: 0 13px 28px rgba(190,61,117,.22); }
.profile-hero h1 { font-size: 34px; }
.profile-hero p { margin: 7px 0 0; color: var(--ink-soft); }
.profile-hero img { display: none; }
.profile-card h2 { margin: 8px 0 6px; }
.profile-card p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.field { margin-top: 15px; }
.field label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.setting-options { display: grid; gap: 9px; margin-top: 15px; }
.setting-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  text-align: left;
  border-radius: 19px;
  background: rgba(255,247,250,.62);
  border: 1px solid rgba(255,255,255,.84);
}
.setting-option__sample { min-width: 58px; font-family: KaiTi, STKaiti, serif; font-size: 28px; text-align: center; }
.setting-option b, .setting-option small { display: block; }
.setting-option small { margin-top: 3px; color: var(--muted); }
.setting-option i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(224, 194, 207, .32); color: transparent; font-style: normal; }
.setting-option.is-active i { color: #fff; background: var(--pink-500); }

.bottom-nav {
  position: fixed;
  z-index: 50;
  left: 8px;
  right: 8px;
  bottom: calc(8px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 7px;
  border-radius: 25px;
}
.nav-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 18px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 850;
}
.nav-item__icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 10px; font-size: 17px; }
.nav-item.is-active { color: #a6406c; background: rgba(255,225,237,.66); }
.nav-item.is-active .nav-item__icon { background: rgba(255,255,255,.72); box-shadow: 0 7px 15px rgba(143,67,99,.10); }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(92px + var(--safe-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 390px);
  padding: 12px 16px;
  border-radius: 18px;
  color: #fff;
  background: rgba(91, 53, 70, .9);
  box-shadow: 0 18px 40px rgba(83, 39, 59, .22);
  backdrop-filter: blur(16px);
  font-size: 12px;
  font-weight: 780;
}

@media (min-width: 640px) {
  .feature-grid, .folder-grid, .review-grid, .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-stats { grid-template-columns: repeat(4, 1fr); }
  .progress-grid { grid-template-columns: repeat(2, 1fr); }
  .radical-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-hero img { display: block; position: absolute; right: 14px; bottom: -44px; width: 170px; opacity: .72; }
}

@media (min-width: 900px) {
  .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: 12px; padding: 8px; }
  .sidebar {
    position: sticky;
    top: 8px;
    height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    border-radius: 28px;
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 8px; }
  .brand__mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.72); box-shadow: 0 10px 20px rgba(143,67,99,.10); }
  .brand__mark img { width: 44px; height: 44px; }
  .brand__copy strong, .brand__copy small { display: block; line-height: 1; }
  .brand__copy strong { font-size: 19px; font-weight: 950; letter-spacing: -.04em; }
  .brand__copy small { margin-top: 5px; color: var(--pink-600); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
  .sidebar-nav { display: grid; gap: 7px; margin-top: 24px; }
  .sidebar-nav .nav-item {
    grid-template-columns: 38px 1fr;
    justify-items: start;
    align-items: center;
    padding: 10px 11px;
    border-radius: 18px;
    font-size: 13px;
  }
  .sidebar-nav .nav-item__icon { width: 38px; height: 38px; }
  .sidebar-nav .nav-item.is-active { background: linear-gradient(145deg, rgba(255,229,239,.82), rgba(255,255,255,.56)); box-shadow: 0 11px 22px rgba(143,67,99,.09), inset 0 1px 0 #fff; }
  .sidebar-mascot { margin-top: auto; text-align: center; padding: 12px 8px 4px; }
  .sidebar-mascot img { width: 150px; max-height: 145px; object-fit: contain; }
  .sidebar-mascot p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
  .app-main { min-width: 0; }
  .topbar { margin: 0; min-height: 80px; padding: 12px 18px; border-radius: 28px; }
  .mobile-brand, .bottom-nav { display: none; }
  main { padding-bottom: 0; }
  .page { padding: 28px 30px 56px; }
  .hero-card { grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); padding: 36px 34px 0; min-height: 420px; }
  .hero-art { min-height: 380px; }
  .hero-art img { width: min(380px, 100%); max-height: 380px; }
  .quick-stats { margin-top: 16px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .folder-grid { grid-template-columns: repeat(2, 1fr); }
  .radical-grid { grid-template-columns: repeat(4, 1fr); }
  .progress-grid { grid-template-columns: repeat(4, 1fr); }
  .profile-grid { grid-template-columns: 1.05fr .95fr; }
  .toast { bottom: 24px; }
}

@media (min-width: 1220px) {
  :root { --sidebar-width: 270px; }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-card { min-height: 265px; }
  .folder-grid { grid-template-columns: repeat(3, 1fr); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .radical-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

#app:focus { outline: none; }

/* Banner giới thiệu thu gọn và đặt cuối trang chủ */
.hero-card--compact {
  min-height: 245px;
  margin-top: 30px;
  padding: 22px 20px 0;
  border-radius: 30px;
}
.hero-card--compact .hero-copy {
  max-width: 560px;
  padding-bottom: 22px;
}
.hero-card--compact .hero-copy h1 {
  margin-top: 12px;
  font-size: clamp(30px, 7vw, 46px);
}
.hero-card--compact .hero-copy > p {
  margin-bottom: 0;
  line-height: 1.55;
}
.hero-card--compact .hero-actions {
  margin-top: 14px;
}
.hero-card--compact .primary-button {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 15px;
}
.hero-card--compact .hero-art {
  min-height: 145px;
}
.hero-card--compact .hero-art img {
  width: min(225px, 68vw);
  max-height: 190px;
}
.hero-card--compact .hero-bubble {
  top: 4%;
  right: 2%;
  max-width: 155px;
  padding: 9px 11px;
  font-size: 11px;
}

@media (min-width: 860px) {
  .hero-card--compact {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    min-height: 250px;
    padding: 24px 26px 0;
  }
  .hero-card--compact .hero-art {
    min-height: 225px;
  }
  .hero-card--compact .hero-art img {
    width: min(245px, 100%);
    max-height: 225px;
  }
}


/* =========================================================
   MaoGeHanzi · colourful skin, original information structure
   ========================================================= */
:root {
  --pink-50: #f5fff4;
  --pink-100: #e8ffe9;
  --pink-200: #c6f5d0;
  --pink-300: #82e9ae;
  --pink-400: #26cf80;
  --pink-500: #08aa68;
  --pink-600: #07634f;
  --cream: #fff9df;
  --white: #fff;
  --ink: #123f39;
  --ink-soft: #456861;
  --muted: #728d86;
  --line: rgba(0, 104, 87, .13);
  --green: #12c875;
  --yellow: #ffd350;
  --lavender: #8e5be8;
  --peach: #ff8a3d;
  --cyan: #18b9dd;
  --glass: rgba(255,255,255,.62);
  --glass-strong: rgba(255,255,255,.84);
  --shadow-sm: 0 12px 30px rgba(0, 78, 72, .11);
  --shadow-md: 0 22px 56px rgba(0, 78, 72, .16);
  --shadow-lg: 0 35px 90px rgba(0, 60, 64, .23);
  --sidebar-width: 252px;
}
body {
  color: var(--ink);
  background: #dff6de url("assets/scenic-bg.svg") center / cover fixed no-repeat;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(242,255,224,.82), rgba(227,255,242,.44) 47%, rgba(207,243,255,.52)),
    radial-gradient(circle at 74% 10%, rgba(255,221,79,.34), transparent 25rem);
}
.page-glow--one { background: rgba(48, 219, 151, .29); }
.page-glow--two { background: rgba(44, 177, 255, .24); }
.glass-panel,.glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(242,255,236,.55));
  border: 1px solid rgba(255,255,255,.90);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}
.topbar { background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(236,255,239,.60)); }
.avatar-button { background: linear-gradient(145deg,#15d77f,#047761); box-shadow:0 10px 23px rgba(1,120,96,.28),inset 0 1px 0 rgba(255,255,255,.36); }
.streak-pill { color:#6a4a0a; background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(255,245,190,.72)); }
.eyebrow { color:#078461; }
.text-link { color:#08765b; }

.sidebar {
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0, rgba(171,255,87,.28), transparent 15rem),
    linear-gradient(180deg, rgba(0,91,75,.96), rgba(0,48,61,.98));
  color:#fff;
  border-color:rgba(185,255,176,.33);
  box-shadow:0 30px 70px rgba(0,58,65,.30),inset 0 1px 0 rgba(255,255,255,.18);
}
.sidebar::before { content:"";position:absolute;width:185px;height:185px;left:-88px;top:-70px;border-radius:50%;background:rgba(204,255,76,.16); }
.brand { position:relative;z-index:1; }
.brand__mark { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(204,255,212,.82)) !important;border:1px solid rgba(255,255,255,.70); }
.brand__copy strong { color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.22); }
.brand__copy small { color:#dcff70 !important;letter-spacing:.08em !important;font-size:8px !important; }
.sidebar-nav .nav-item { color:rgba(255,255,255,.74); }
.sidebar-nav .nav-item:hover { color:#fff;background:rgba(255,255,255,.07); }
.sidebar-nav .nav-item.is-active { color:#fff !important;background:linear-gradient(135deg,#91e92e,#12c77c 70%,#05a3b7) !important;border:1px solid rgba(236,255,151,.74);box-shadow:0 13px 30px rgba(0,24,33,.30),inset 0 1px 0 rgba(255,255,255,.45) !important; }
.sidebar-nav .nav-item.is-active .nav-item__icon { background:rgba(255,255,255,.22); }
.sidebar-mascot { position:relative;margin-top:auto; }
.sidebar-mascot::before { content:"加油！";position:absolute;right:5px;top:10px;padding:7px 10px;border-radius:14px 14px 14px 4px;color:#09644b;background:#eaffc6;font-family:KaiTi,STKaiti,serif;font-weight:900;box-shadow:0 10px 23px rgba(0,0,0,.14); }
.sidebar-mascot img { width:193px !important;max-height:195px !important;transform:translateY(18px); }
.sidebar-mascot p { color:rgba(255,255,255,.72) !important;margin-top:7px !important; }

.surface-heading { background:radial-gradient(circle at 92% 10%,rgba(255,210,71,.34),transparent 13rem),linear-gradient(135deg,rgba(255,255,255,.84),rgba(222,255,229,.61));border-color:rgba(255,255,255,.94); }
.surface-heading::after { color:rgba(5,137,101,.08); }
.breadcrumbs button:hover { color:#068b66; }

/* Home: exact four learning modules, new visual treatment only */
.home-page { width:min(100%,1460px); }
.home-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;padding:4px 3px 0; }
.home-heading h1 { margin:5px 0 0;font-size:clamp(43px,5vw,70px);line-height:.94;letter-spacing:-.06em;color:#05634d;text-shadow:0 3px 0 rgba(255,255,255,.72); }
.home-heading p { margin:11px 0 0;color:#365f57;font-size:15px;font-weight:720; }
.home-heading__actions { display:flex;gap:10px; }
.home-status { min-width:118px;display:grid;grid-template-columns:auto 1fr;gap:0 9px;align-items:center;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.94);box-shadow:var(--shadow-sm);backdrop-filter:blur(18px); }
.home-status i { grid-row:1/3;width:37px;height:37px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#fff0a0,#ffbb35);font-style:normal; }
.home-status:nth-child(2) i { color:#fff;background:linear-gradient(145deg,#23cc7c,#0b9d72); }
.home-status b,.home-status small { display:block; }
.home-status b { font-size:14px; }.home-status small { color:var(--muted);font-size:9px;font-weight:800; }
.learning-section { padding:22px;border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(239,255,225,.48));border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow-md),inset 0 1px 0 #fff;backdrop-filter:blur(26px) saturate(1.3); }
.section-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:17px;padding:0 3px; }
.section-heading h2 { margin:5px 0 0;font-size:30px;letter-spacing:-.045em; }
.section-heading button { border:0;background:transparent;color:#087859;font-weight:900;cursor:pointer; }
.module-banner-grid { display:grid;grid-template-columns:1fr;gap:14px; }
.module-banner { position:relative;isolation:isolate;overflow:hidden;min-height:250px;padding:25px;border-radius:29px;color:#fff;border:1px solid rgba(255,255,255,.60);box-shadow:0 20px 46px rgba(0,71,76,.20),inset 0 1px 0 rgba(255,255,255,.42);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease; }
.module-banner:hover { transform:translateY(-4px);box-shadow:0 27px 60px rgba(0,71,76,.27),inset 0 1px 0 rgba(255,255,255,.46); }
.module-banner::before { content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 84% 14%,rgba(255,255,255,.38),transparent 12rem); }
.module-banner::after { content:"";position:absolute;z-index:-1;width:235px;height:235px;right:-67px;bottom:-105px;border-radius:50%;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 27px rgba(255,255,255,.08),0 0 0 58px rgba(255,255,255,.045); }
.module-banner--hsk { background:linear-gradient(135deg,#069d62,#39c85b 55%,#b7d92d); }
.module-banner--communication { background:linear-gradient(135deg,#087dd9,#1db9e4 58%,#55d8e8); }
.module-banner--radicals { background:linear-gradient(135deg,#ff8c18,#ffb621 54%,#ffd955); }
.module-banner--grammar { background:linear-gradient(135deg,#7250df,#9a5ee9 54%,#d86bdc); }
.module-banner__copy { position:relative;z-index:3;width:min(67%,520px); }
.module-banner__kicker { display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(0,57,71,.20);border:1px solid rgba(255,255,255,.40);font-size:10px;font-weight:950;letter-spacing:.03em; }
.module-banner h2 { margin:18px 0 9px;font-size:clamp(33px,4vw,49px);line-height:.94;letter-spacing:-.052em;text-shadow:0 5px 18px rgba(0,47,58,.22); }
.module-banner p { margin:0;max-width:470px;font-size:12.5px;line-height:1.55;font-weight:680;text-shadow:0 2px 10px rgba(0,47,58,.18); }
.module-banner__bottom { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:21px; }
.module-banner__bottom>span { color:rgba(255,255,255,.80);font-size:9.5px;font-weight:800; }
.module-banner__bottom button { min-height:41px;padding:0 15px;border:0;border-radius:14px;color:#075a49;background:rgba(255,255,255,.92);box-shadow:0 10px 23px rgba(0,53,64,.16);font-weight:950;cursor:pointer; }
.module-banner--communication .module-banner__bottom button { color:#075f9b; }.module-banner--radicals .module-banner__bottom button { color:#9a5300; }.module-banner--grammar .module-banner__bottom button { color:#6440a9; }
.module-banner__number { position:absolute;right:18px;top:14px;color:rgba(255,255,255,.23);font-size:51px;font-weight:950;letter-spacing:-.07em; }
.module-art { position:absolute;z-index:2;right:15px;bottom:12px;width:33%;height:70%;filter:drop-shadow(0 17px 19px rgba(0,56,68,.24)); }
.module-art span,.module-art i,.module-art b { position:absolute;display:grid;place-items:center;font-style:normal; }
.module-art--books span { right:13%;bottom:3%;width:100px;height:138px;border-radius:10px 17px 17px 10px;color:#fff;background:linear-gradient(145deg,#087c4c,#0bd477);border:2px solid rgba(255,255,255,.64);box-shadow:12px 15px 25px rgba(0,71,41,.24),inset -10px 0 0 rgba(0,0,0,.08);font-size:26px;font-weight:950;transform:rotate(5deg); }
.module-art--books i,.module-art--books b { bottom:7%;width:78px;height:112px;border-radius:9px 14px 14px 9px;color:#fff;border:2px solid rgba(255,255,255,.56);font-family:KaiTi,STKaiti,serif;font-size:33px; }
.module-art--books i { left:0;background:linear-gradient(145deg,#3f7be8,#6f45e4);transform:rotate(-9deg); }.module-art--books b { left:30%;background:linear-gradient(145deg,#ffad1c,#ff6e1c);transform:rotate(-2deg); }
.module-art--chat span { right:7%;top:14%;padding:18px 22px;border-radius:24px 24px 6px 24px;color:#0765a4;background:#fff;font-family:KaiTi,STKaiti,serif;font-size:35px;box-shadow:0 17px 32px rgba(0,65,121,.25); }
.module-art--chat i { left:0;bottom:10%;font-size:74px; }.module-art--chat b { right:7%;bottom:0;font-size:83px; }
.module-art--radical span,.module-art--radical i,.module-art--radical b { width:88px;height:88px;border-radius:28px;color:#a45300;background:rgba(255,255,255,.91);border:4px solid rgba(255,255,255,.55);font-family:KaiTi,STKaiti,serif;font-size:47px;box-shadow:0 15px 30px rgba(141,66,0,.20); }
.module-art--radical span { right:0;bottom:4%; }.module-art--radical i { left:1%;bottom:23%;transform:rotate(-12deg); }.module-art--radical b { right:18%;top:0;transform:rotate(8deg); }
.module-art--grammar span,.module-art--grammar i,.module-art--grammar b { width:90px;height:90px;border-radius:50%;color:#6d43ad;background:rgba(255,255,255,.91);font-family:KaiTi,STKaiti,serif;font-size:47px;box-shadow:0 15px 30px rgba(76,37,131,.22); }
.module-art--grammar span { right:0;bottom:8%; }.module-art--grammar i { left:0;bottom:18%; }.module-art--grammar b { right:24%;top:0; }
.home-empty-summary { display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px; }
.home-empty-summary article { display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:15px 16px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.83),rgba(241,255,234,.58));border:1px solid rgba(255,255,255,.94);box-shadow:var(--shadow-sm),inset 0 1px 0 #fff;backdrop-filter:blur(18px); }
.home-empty-summary article>span { width:46px;height:46px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(145deg,#14c979,#087a65);font-family:KaiTi,STKaiti,serif;font-size:25px; }
.home-empty-summary article:nth-child(2)>span { background:linear-gradient(145deg,#ffb529,#ff7c17); }.home-empty-summary article:nth-child(3)>span { background:linear-gradient(145deg,#7956df,#a65dea); }.home-empty-summary article:nth-child(4)>span { background:linear-gradient(145deg,#159fd2,#16c7d5); }
.home-empty-summary b,.home-empty-summary small { display:block; }.home-empty-summary b { font-size:13px; }.home-empty-summary small { margin-top:3px;color:var(--muted);font-size:9.5px; }
.home-mascot-banner { position:relative;overflow:hidden;min-height:205px;display:grid;grid-template-columns:1fr 185px;align-items:center;margin-top:16px;padding:24px 28px;border-radius:32px;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(198,255,85,.32),transparent 16rem),linear-gradient(135deg,rgba(0,92,76,.96),rgba(0,50,66,.97));border:1px solid rgba(197,255,154,.34);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.22); }
.home-mascot-banner::after { content:"";position:absolute;width:260px;height:260px;right:-78px;bottom:-155px;border-radius:50%;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 0 38px rgba(255,255,255,.05); }
.home-mascot-banner__copy { position:relative;z-index:2;max-width:760px; }.home-mascot-banner .eyebrow { color:#d9ff70; }.home-mascot-banner h2 { margin:7px 0;font-size:clamp(23px,3vw,35px);letter-spacing:-.04em; }.home-mascot-banner p { margin:0;color:rgba(255,255,255,.74);font-size:12px; }.home-mascot-banner button { margin-top:15px;min-height:42px;padding:0 16px;border:0;border-radius:14px;color:#075a49;background:#dfff75;font-weight:950;cursor:pointer;box-shadow:0 10px 23px rgba(0,31,36,.24); }
.home-mascot-banner img { position:relative;z-index:2;width:220px;max-height:210px;object-fit:contain;transform:translate(18px,17px); }

/* Internal pages keep their original folders/routes; only the skin changes. */
.feature-card,.folder-card,.mini-card,.empty-state,.word-card,.sentence-card,.grammar-card,.radical-card,.profile-card,.progress-card,.profile-hero { background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(239,255,238,.60));border-color:rgba(255,255,255,.94);box-shadow:var(--shadow-sm),inset 0 1px 0 #fff; }
.theme-hsk { --card-color:linear-gradient(145deg,#18be6e,#76d632);--card-glow:rgba(41,211,107,.26);--card-tag:rgba(210,255,192,.78);--card-accent:#087a4e; }
.theme-chat { --card-color:linear-gradient(145deg,#16aee0,#217ce8);--card-glow:rgba(34,159,231,.24);--card-tag:rgba(205,242,255,.78);--card-accent:#09699d; }
.theme-radical { --card-color:linear-gradient(145deg,#ffb11b,#ff7d1c);--card-glow:rgba(255,168,29,.25);--card-tag:rgba(255,235,190,.78);--card-accent:#a95b03; }
.theme-grammar { --card-color:linear-gradient(145deg,#a568ee,#704ee0);--card-glow:rgba(143,91,233,.25);--card-tag:rgba(235,220,255,.78);--card-accent:#6542b5; }
.folder-card__icon { background:var(--folder-bg,linear-gradient(145deg,#0ed47a,#078a68)); }.folder-card__chevron,.pinyin { color:#078d68; }.empty-state .demo-note,.demo-ribbon { color:#087b5d;background:rgba(200,255,214,.72); }.hanzi-big,.radical-card__symbol { color:#087c61; }.pattern-code { color:#5d3ca6;background:rgba(231,219,255,.72); }.progress-track span { background:linear-gradient(90deg,#08c879,#1cbce2); }.profile-avatar { background:linear-gradient(145deg,#0bd37c,#047a64);box-shadow:0 13px 28px rgba(0,112,88,.22); }.setting-option.is-active i { background:#08b96b; }
.bottom-nav { background:rgba(255,255,255,.86); }.nav-item.is-active { color:#057c5c;background:rgba(188,255,204,.74); }.toast { background:rgba(0,70,65,.92); }

@media (min-width:640px) {
  .module-banner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-empty-summary { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px) {
  .topbar { background:rgba(255,255,255,.63); }
  .home-page { padding-top:19px; }
}
@media (min-width:1240px) {
  :root { --sidebar-width:260px; }
  .module-banner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .module-banner { min-height:270px; }
  .home-empty-summary { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:899px) {
  body { background-attachment:scroll; }
  .home-heading { align-items:flex-start; }.home-heading__actions { display:none; }
}
@media (max-width:620px) {
  .home-heading h1 { font-size:43px; }
  .learning-section { padding:15px;border-radius:27px; }
  .section-heading h2 { font-size:26px; }
  .module-banner { min-height:260px;padding:20px; }
  .module-banner__copy { width:72%; }.module-banner h2 { font-size:37px; }.module-banner p { font-size:11px; }.module-art { right:3px;width:34%;transform:scale(.76);transform-origin:right bottom; }.module-banner__bottom>span { display:none; }
  .home-mascot-banner { grid-template-columns:1fr 105px;padding:20px; }.home-mascot-banner img { width:145px;transform:translate(20px,20px); }.home-mascot-banner p { font-size:10.5px; }
}

/* =========================================================
   MaoGeHanzi compact liquid-glass skin · 2026-07-16
   Structure/routes stay unchanged; this block only refines presentation.
   ========================================================= */
:root {
  --ink: #263a36;
  --ink-soft: #596c67;
  --muted: #84918d;
  --line: rgba(55, 81, 74, .11);
  --glass: rgba(255, 255, 255, .48);
  --glass-strong: rgba(255, 255, 255, .68);
  --shadow-sm: 0 8px 24px rgba(68, 83, 78, .09);
  --shadow-md: 0 16px 42px rgba(68, 83, 78, .13);
  --shadow-lg: 0 22px 62px rgba(68, 83, 78, .16);
  --sidebar-width: 222px;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 9%, rgba(246, 201, 139, .26), transparent 25rem),
    radial-gradient(circle at 88% 7%, rgba(151, 198, 183, .25), transparent 28rem),
    radial-gradient(circle at 76% 86%, rgba(167, 191, 225, .22), transparent 28rem),
    linear-gradient(140deg, #f8f3e9 0%, #edf5ef 48%, #eef3f8 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .045;
  background-image: url("assets/cat-paw.svg");
  background-size: 74px 74px;
  background-position: 8px 8px;
  filter: sepia(.25) saturate(.7);
}
body::after {
  opacity: .12;
}
.page-glow--one { background: rgba(159, 198, 184, .20); }
.page-glow--two { background: rgba(232, 185, 126, .18); }

.glass-panel,
.glass-card,
.learning-section,
.home-empty-summary article,
.feature-card,
.folder-card,
.mini-card,
.empty-state,
.word-card,
.sentence-card,
.grammar-card,
.radical-card,
.profile-card,
.progress-card,
.profile-hero,
.surface-heading {
  background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}

.topbar {
  min-height: 58px;
  margin: 7px 8px 0;
  padding: 7px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.52);
}
.mobile-brand img,
.brand__mark img {
  object-fit: cover;
}
.mobile-brand img { width: 34px; height: 34px; border-radius: 12px; }
.icon-button,
.avatar-button,
.streak-pill { height: 38px; }
.icon-button,
.avatar-button { width: 38px; }
.avatar-button {
  color: transparent;
  background: url("assets/cat-avatar.webp") center/cover no-repeat;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 7px 18px rgba(75, 86, 80, .16);
}
.streak-pill {
  padding: 0 11px;
  background: rgba(255,255,255,.62);
}

@media (min-width:900px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
  }
  .sidebar {
    position: sticky;
    top: 9px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 18px);
    padding: 15px 12px 12px;
    border-radius: 26px;
    overflow: hidden;
    color: var(--ink);
    background: linear-gradient(155deg, rgba(255,255,255,.66), rgba(237,244,238,.38));
    border: 1px solid rgba(255,255,255,.82);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .sidebar::before {
    width: 150px;
    height: 150px;
    left: -74px;
    top: -60px;
    background: rgba(230, 189, 125, .14);
  }
  .brand { gap: 10px; padding: 2px 3px 13px; }
  .brand__mark {
    width: 45px;
    height: 45px;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255,255,255,.65) !important;
  }
  .brand__mark img { width: 100%; height: 100%; }
  .brand__copy strong { color: #263a36; text-shadow: none; font-size: 16px; }
  .brand__copy small { color: #936d42 !important; font-size: 7.5px !important; }
  .sidebar-nav { gap: 5px; }
  .sidebar-nav .nav-item {
    min-height: 43px;
    padding: 6px 10px;
    border-radius: 15px;
    color: #60706b;
    font-size: 12px;
  }
  .sidebar-nav .nav-item:hover { color: #30413c; background: rgba(255,255,255,.46); }
  .sidebar-nav .nav-item.is-active {
    color: #31534a !important;
    background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(218,239,227,.62)) !important;
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 8px 20px rgba(80,99,90,.10), inset 0 1px 0 #fff !important;
  }
  .sidebar-nav .nav-item.is-active .nav-item__icon { background: rgba(190,218,204,.40); }
  .nav-item__icon { font-size: 17px; }
  .sidebar-mascot {
    margin-top: auto;
    padding: 10px 8px 7px;
    border-radius: 22px;
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.7);
  }
  .sidebar-mascot::before {
    content: "喵 · 加油";
    right: 8px;
    top: 8px;
    padding: 5px 7px;
    border-radius: 11px 11px 11px 3px;
    color: #72583a;
    background: rgba(255,248,224,.86);
    box-shadow: 0 7px 17px rgba(75,63,44,.10);
    font-size: 9px;
  }
  .sidebar-mascot img {
    width: 112px !important;
    height: 102px;
    max-height: none !important;
    object-fit: cover;
    object-position: 58% 44%;
    border-radius: 20px;
    transform: none;
    box-shadow: 0 9px 20px rgba(75,73,60,.13);
  }
  .sidebar-mascot p {
    margin: 7px 0 0 !important;
    color: #71807b !important;
    font-size: 9px;
  }
  .topbar { margin: 0; }
}

main { padding-bottom: calc(82px + var(--safe-bottom)); }
.page { width: min(100%, 1260px); padding: 16px 13px 34px; }
.home-page { width: min(100%, 1280px); }
.home-heading {
  align-items: center;
  gap: 18px;
  margin-bottom: 13px;
  padding: 0 2px;
}
.home-heading h1 {
  margin-top: 3px;
  font-size: clamp(34px,4.2vw,52px);
  color: #354d46;
  text-shadow: 0 2px 0 rgba(255,255,255,.72);
}
.home-heading p { margin-top: 7px; color: #677671; font-size: 12.5px; }
.home-heading__actions { gap: 7px; }
.home-status {
  min-width: 104px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.50);
}
.home-status i { width: 31px; height: 31px; border-radius: 11px; }
.home-status b { font-size: 12px; }
.home-status small { font-size: 8px; }

.learning-section {
  padding: 14px;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.57), rgba(255,255,255,.29));
}
.section-heading { margin-bottom: 10px; }
.section-heading h2 { font-size: 23px; }
.section-heading button { color: #62736d; font-size: 11px; }
.eyebrow { color: #91704b; font-size: 9px; }

.module-banner-grid { gap: 10px; }
.module-banner {
  min-height: 150px;
  padding: 15px;
  border-radius: 21px;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 10px 27px rgba(71, 87, 80, .10), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.module-banner:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(71,87,80,.14), inset 0 1px 0 #fff; }
.module-banner::before {
  background:
    radial-gradient(circle at 87% 18%, rgba(255,255,255,.72), transparent 8rem),
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12));
}
.module-banner::after {
  width: 120px;
  height: 120px;
  right: -45px;
  bottom: -60px;
  box-shadow: 0 0 0 17px rgba(255,255,255,.08), 0 0 0 34px rgba(255,255,255,.04);
}
.module-banner--hsk { background: linear-gradient(135deg, rgba(167,218,187,.73), rgba(229,244,232,.55)); }
.module-banner--communication { background: linear-gradient(135deg, rgba(173,208,236,.73), rgba(233,242,250,.55)); }
.module-banner--radicals { background: linear-gradient(135deg, rgba(239,201,148,.73), rgba(250,237,218,.55)); }
.module-banner--grammar { background: linear-gradient(135deg, rgba(200,186,228,.73), rgba(241,235,250,.55)); }
.module-banner__copy { width: 72%; }
.module-banner__kicker {
  padding: 5px 8px;
  color: #52635e;
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(255,255,255,.72);
  font-size: 8px;
}
.module-banner h2 {
  margin: 10px 0 5px;
  font-size: 23px;
  color: #30443e;
  text-shadow: none;
}
.module-banner p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 640;
  color: #596b65;
  text-shadow: none;
}
.module-banner__bottom { margin-top: 10px; gap: 7px; }
.module-banner__bottom>span { display: none; }
.module-banner__bottom button {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 11px;
  color: #405852 !important;
  background: rgba(255,255,255,.68);
  box-shadow: 0 6px 15px rgba(69,83,77,.09);
  font-size: 9.5px;
}
.module-banner__number { right: 10px; top: 7px; color: rgba(48,68,62,.11); font-size: 31px; }
.module-banner::selection { background: transparent; }
.module-banner::marker { display: none; }
.module-banner .module-art::after {
  content: "";
  position: absolute;
  right: 5px;
  top: -3px;
  width: 26px;
  height: 26px;
  color: rgba(92,105,99,.22);
  background: currentColor;
  -webkit-mask: url("assets/cat-paw.svg") center/contain no-repeat;
  mask: url("assets/cat-paw.svg") center/contain no-repeat;
}
.module-art {
  right: 7px;
  bottom: 7px;
  width: 29%;
  height: 66%;
  transform: scale(.58);
  transform-origin: right bottom;
  filter: drop-shadow(0 9px 11px rgba(70,76,70,.13));
}

.home-empty-summary { gap: 8px; margin-top: 10px; }
.home-empty-summary article {
  gap: 9px;
  padding: 9px 10px;
  border-radius: 17px;
  background: rgba(255,255,255,.47);
}
.home-empty-summary article>span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #51645e;
  background: rgba(220,235,227,.72) !important;
  font-size: 17px;
}
.home-empty-summary b { font-size: 11px; }
.home-empty-summary small { margin-top: 2px; font-size: 8px; }

.home-mascot-banner {
  min-height: 132px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  border-radius: 23px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(247,242,230,.18), rgba(244,246,239,.08)),
    url("assets/cat-calligraphy-banner.webp") center 49% / cover no-repeat;
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.84);
}
.home-mascot-banner::after { display: none; }
.home-mascot-banner__glass {
  width: min(620px, 68%);
  min-height: 104px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.40));
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 9px 24px rgba(69,72,61,.12), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.home-mascot-banner__avatar {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 17px;
  border: 2px solid rgba(255,255,255,.88);
  box-shadow: 0 7px 17px rgba(77,71,56,.13);
}
.home-mascot-banner__copy { max-width: none; }
.home-mascot-banner .eyebrow { color: #8b6842; }
.home-mascot-banner h2 { margin: 3px 0 4px; font-size: clamp(15px,1.7vw,20px); color: #394a45; }
.home-mascot-banner p { margin: 0; color: #6b7773; font-size: 9.5px; line-height: 1.4; }
.home-mascot-banner button {
  min-height: 35px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 12px;
  color: #41564f;
  background: rgba(255,255,255,.66);
  box-shadow: 0 7px 16px rgba(70,78,72,.10);
  font-size: 9.5px;
}

/* Compact internal pages while preserving all existing folders and routes. */
.page-heading { margin-bottom: 13px; }
.page-heading h1 { font-size: clamp(28px,5vw,43px); }
.page-heading p { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.surface-heading { padding: 19px; border-radius: 23px; }
.feature-grid { gap: 10px; }
.feature-card {
  min-height: 184px;
  padding: 16px;
  border-radius: 21px;
}
.feature-card::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 13px;
  width: 24px;
  height: 24px;
  color: rgba(64,82,75,.16);
  background: currentColor;
  -webkit-mask: url("assets/cat-paw.svg") center/contain no-repeat;
  mask: url("assets/cat-paw.svg") center/contain no-repeat;
}
.feature-icon { width: 43px; height: 43px; border-radius: 14px; font-size: 21px; }
.feature-tag { margin-top: 10px; padding: 4px 7px; font-size: 8px; }
.feature-card h3 { margin: 8px 0 5px; font-size: 18px; }
.feature-card p { margin-right: 24px; font-size: 10.5px; line-height: 1.45; }
.card-arrow { width: 34px; height: 34px; border-radius: 12px; }
.folder-grid { gap: 9px; }
.folder-card {
  min-height: 105px;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 12px;
  border-radius: 19px;
  background: rgba(255,255,255,.48);
}
.folder-card::before {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 8px;
  width: 19px;
  height: 19px;
  color: rgba(104,119,112,.12);
  background: currentColor;
  -webkit-mask: url("assets/cat-paw.svg") center/contain no-repeat;
  mask: url("assets/cat-paw.svg") center/contain no-repeat;
}
.folder-card__icon { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; }
.folder-card h3 { margin-bottom: 3px; font-size: 15px; }
.folder-card p { font-size: 10px; line-height: 1.4; }
.folder-card__meta { margin-top: 5px; padding: 3px 6px; font-size: 8px; }
.folder-card__chevron { font-size: 19px; }
.empty-state { padding: 25px 14px; border-radius: 23px; }
.empty-state img { width: 160px; max-height: 130px; object-fit: cover; object-position: 58% 45%; border-radius: 22px; }

@media (min-width:640px) {
  .module-banner-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-empty-summary { grid-template-columns: repeat(2,1fr); }
}
@media (min-width:1020px) {
  .feature-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .folder-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width:1180px) {
  .module-banner-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .module-banner { min-height: 158px; }
  .home-empty-summary { grid-template-columns: repeat(4,1fr); }
}
@media (max-width:899px) {
  .home-heading { align-items: flex-start; }
  .home-mascot-banner__glass { width: min(690px, 82%); }
}
@media (max-width:620px) {
  .page { padding-inline: 10px; }
  .home-heading h1 { font-size: 34px; }
  .home-heading p { font-size: 11px; }
  .learning-section { padding: 10px; border-radius: 20px; }
  .section-heading h2 { font-size: 21px; }
  .module-banner { min-height: 137px; padding: 12px; border-radius: 18px; }
  .module-banner__copy { width: 76%; }
  .module-banner h2 { font-size: 20px; }
  .module-banner p { font-size: 9.5px; }
  .module-art { right: -2px; bottom: 5px; width: 31%; transform: scale(.47); }
  .home-mascot-banner { min-height: 122px; padding: 8px; background-position: 58% 48%; }
  .home-mascot-banner__glass {
    width: 86%;
    min-height: 92px;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 8px;
    padding: 9px;
  }
  .home-mascot-banner__avatar { width: 44px; height: 44px; border-radius: 14px; }
  .home-mascot-banner h2 { font-size: 14px; }
  .home-mascot-banner p { font-size: 8.5px; }
  .home-mascot-banner button { display: none; }
  .home-empty-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-empty-summary article { padding: 8px; }
  .home-empty-summary article>span { width: 31px; height: 31px; font-size: 15px; }
  .feature-card { min-height: 164px; }
  .folder-card { min-height: 96px; }
}
/* Final readability adjustment: keep cat motif subtle rather than busy. */
body::before { opacity: .018; background-size: 112px 112px; }
.home-mascot-banner img.home-mascot-banner__avatar {
  position: static;
  z-index: auto;
  width: 54px;
  height: 54px;
  max-height: none;
  object-fit: cover;
  transform: none;
}
@media (max-width:620px) {
  .home-mascot-banner img.home-mascot-banner__avatar { width:44px; height:44px; }
}

/* =========================================================
   Vocabulary cards + word detail dialog
   ========================================================= */
.vocabulary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
}

.vocabulary-grid .word-card--interactive {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.vocabulary-grid .word-card--interactive::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -58px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(20, 201, 121, .08);
  box-shadow: 0 0 0 25px rgba(20, 201, 121, .035);
  pointer-events: none;
}

.vocabulary-grid .word-card--interactive:hover,
.vocabulary-grid .word-card--interactive:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(11, 174, 111, .34);
  box-shadow: 0 24px 55px rgba(0, 86, 72, .17), inset 0 1px 0 #fff;
  outline: none;
}

.vocabulary-grid .word-card__main {
  margin-top: 0;
  grid-template-columns: minmax(94px, 118px) 1fr;
}

.vocabulary-grid .hanzi-big {
  min-width: 0;
  font-size: clamp(66px, 8vw, 92px);
}

.word-card__copy {
  min-width: 0;
}

.word-card__copy h2 {
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.15;
}

.word-card__copy .pinyin {
  margin: 7px 0 0;
  font-size: 16px;
  font-weight: 900;
}

.word-card__badges,
.word-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.word-card__badges span,
.word-detail-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  color: #087257;
  background: rgba(204, 255, 216, .72);
  border: 1px solid rgba(255, 255, 255, .94);
  font-size: 10px;
  font-weight: 900;
}

.word-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 104, 87, .10);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.word-card__footer b {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #13ca78, #087a64);
  box-shadow: 0 10px 21px rgba(0, 113, 87, .20);
  font-size: 18px;
}

.word-detail-dialog {
  width: min(720px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 32px;
  color: var(--ink);
  background: transparent;
}

.word-detail-dialog::backdrop {
  background: rgba(3, 39, 43, .48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.word-detail-panel {
  position: relative;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 32px;
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 218, 92, .25), transparent 15rem),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(235,255,239,.93));
  box-shadow: 0 38px 100px rgba(0, 51, 57, .35), inset 0 1px 0 #fff;
}

.word-detail-close {
  position: sticky;
  z-index: 5;
  top: 0;
  float: right;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 104, 87, .10);
  border-radius: 15px;
  color: #315c55;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 10px 24px rgba(0, 75, 67, .12);
  font-size: 25px;
  cursor: pointer;
}

.word-detail-hero {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr;
  gap: 24px;
  align-items: center;
  clear: both;
  padding: 8px 0 24px;
  border-bottom: 1px solid rgba(0, 104, 87, .11);
}

.word-detail-hanzi {
  min-height: 150px;
  display: grid;
  place-items: center;
  border-radius: 29px;
  color: #087c61;
  background: linear-gradient(145deg, rgba(216,255,220,.92), rgba(255,255,255,.88));
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 18px 40px rgba(0, 105, 78, .13), inset 0 1px 0 #fff;
  font-family: KaiTi, STKaiti, serif;
  font-size: clamp(78px, 14vw, 118px);
  line-height: 1;
}

.word-detail-hero h2 {
  margin: 7px 0 2px;
  font-size: clamp(34px, 5vw, 50px);
  letter-spacing: -.05em;
  line-height: 1;
}

.word-detail-hero > div:last-child > p {
  margin: 9px 0 0;
  color: #078d68;
  font-size: 19px;
  font-weight: 950;
}

.word-detail-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.word-detail-block,
.word-detail-example {
  padding: 17px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: inset 0 1px 0 #fff;
}

.word-detail-block > span,
.word-detail-example > span {
  display: block;
  margin-bottom: 7px;
  color: #8b6755;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.word-detail-block > div {
  font-size: 16px;
  font-weight: 760;
  line-height: 1.65;
  white-space: pre-wrap;
}

.word-detail-example {
  background: linear-gradient(145deg, rgba(255,249,220,.82), rgba(255,255,255,.80));
}

.word-detail-example b,
.word-detail-example p {
  display: block;
  margin: 0;
}

.word-detail-example b {
  font-family: KaiTi, STKaiti, serif;
  font-size: 24px;
  line-height: 1.5;
}

.word-detail-example p {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.word-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.word-detail-actions button {
  min-height: 46px;
  padding: 0 17px;
  border-radius: 15px;
  font-weight: 950;
  cursor: pointer;
}

.word-detail-speak {
  color: #fff;
  border: 0;
  background: linear-gradient(145deg, #13c979, #078166);
  box-shadow: 0 12px 24px rgba(0, 113, 87, .21);
}

.word-detail-done {
  color: #315c55;
  border: 1px solid rgba(0, 104, 87, .12);
  background: rgba(255,255,255,.84);
}

@media (max-width: 620px) {
  .vocabulary-grid .word-card--interactive {
    min-height: 188px;
  }

  .vocabulary-grid .word-card__main {
    grid-template-columns: 88px 1fr;
    gap: 13px;
  }

  .vocabulary-grid .hanzi-big {
    font-size: 65px;
  }

  .word-detail-panel {
    padding: 18px;
    border-radius: 25px;
  }

  .word-detail-hero {
    grid-template-columns: 100px 1fr;
    gap: 15px;
    padding-bottom: 18px;
  }

  .word-detail-hanzi {
    min-height: 105px;
    border-radius: 22px;
    font-size: 74px;
  }

  .word-detail-hero h2 {
    font-size: 32px;
  }

  .word-detail-hero > div:last-child > p {
    font-size: 15px;
  }

  .word-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== MaoGeHanzi: vocabulary tiles + compact full analysis page ===== */
.vocabulary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.word-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 22px 14px 17px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 25px;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 8%, rgba(255,214,111,.25), transparent 7rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(234,255,241,.72));
  box-shadow: 0 14px 34px rgba(0,88,72,.10), inset 0 1px 0 #fff;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.word-tile::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  right: -30px;
  bottom: -34px;
  border-radius: 50%;
  background: rgba(9,170,113,.08);
}

.word-tile:hover,
.word-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(10,180,121,.28);
  box-shadow: 0 20px 42px rgba(0,88,72,.16), inset 0 1px 0 #fff;
}

.word-tile__level {
  position: absolute;
  top: 12px;
  left: 12px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #08785f;
  background: rgba(215,255,224,.82);
  border: 1px solid rgba(255,255,255,.94);
  font-size: 9px;
  font-weight: 950;
}

.word-tile__hanzi {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: #08785f;
  font-family: KaiTi, STKaiti, "Microsoft YaHei", serif;
  font-size: clamp(58px, 6vw, 88px);
  line-height: .92;
}

.word-tile.is-long .word-tile__hanzi {
  font-size: clamp(38px, 4vw, 58px);
}

.word-tile__pinyin {
  position: relative;
  z-index: 1;
  color: #078b69;
  font-size: 13px;
  font-weight: 900;
}

.word-tile strong {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #34534e;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.word-tile__open {
  position: absolute;
  right: 13px;
  bottom: 11px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #17c97a, #087d64);
  box-shadow: 0 8px 17px rgba(0,105,80,.20);
  font-size: 13px;
  font-weight: 950;
}

.word-analysis-page {
  --analysis-font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  padding-top: 12px;
}

.word-analysis-page[data-glyph-style="kai"] {
  --analysis-font: KaiTi, STKaiti, "Kaiti SC", "DFKai-SB", serif;
}

.word-analysis-page[data-glyph-style="traditional"] {
  --analysis-font: KaiTi, STKaiti, "Kaiti SC", "DFKai-SB", serif;
}

.analysis-breadcrumb {
  margin: 0 0 10px;
  padding: 0 2px;
}

.analysis-breadcrumb .breadcrumbs {
  margin: 0;
}

.analysis-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(238,255,243,.62));
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
}

.analysis-toolbar h1 {
  margin: 3px 0 0;
  font-family: var(--analysis-font);
  font-size: clamp(29px, 4vw, 42px);
  line-height: 1;
}

.analysis-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.analysis-toolbar__actions button,
.analysis-style-tabs button,
.analysis-card--example button,
.analysis-pagination button {
  border: 0;
  cursor: pointer;
}

.analysis-speak,
.analysis-next {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 950;
}

.analysis-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(145deg, #16c97b, #087d64);
  box-shadow: 0 10px 20px rgba(0,113,87,.18);
}

.analysis-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #174f70;
  background: linear-gradient(145deg, #edf8ff, #dcefff);
  border: 1px solid rgba(38, 116, 173, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.analysis-next b {
  font-family: var(--analysis-font);
  font-size: 18px;
  line-height: 1;
}

.analysis-next i {
  font-style: normal;
  font-size: 18px;
}

.analysis-next:disabled {
  cursor: default;
  opacity: .55;
}


.analysis-hero-grid {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 13px;
}

.analysis-stage-card,
.analysis-summary-card,
.analysis-card,
.analysis-related,
.analysis-pagination {
  border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(238,255,243,.66));
  box-shadow: 0 16px 38px rgba(0,79,68,.10), inset 0 1px 0 #fff;
}

.analysis-stage-card,
.analysis-summary-card {
  border-radius: 27px;
}

.analysis-stage-card {
  padding: 13px;
}

.analysis-style-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(233,247,241,.78);
}

.analysis-style-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 0 7px;
  border-radius: 12px;
  color: #60746f;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.analysis-style-tabs button.is-active {
  color: #08785f;
  background: #fff;
  box-shadow: 0 7px 16px rgba(0,86,70,.09);
}

.analysis-stage {
  width: min(100%, 410px);
  margin: 10px auto 0;
}

.analysis-glyph-svg {
  width: 100%;
  height: auto;
  display: block;
}

.analysis-svg-paper {
  fill: rgba(255,255,255,.74);
  stroke: rgba(6,128,96,.12);
  stroke-width: 2;
}

.analysis-svg-grid {
  fill: none;
  stroke: rgba(9,135,104,.13);
  stroke-width: 1.5;
  stroke-dasharray: 7 8;
}

.analysis-svg-text {
  fill: #133d36;
  font-family: var(--analysis-font);
  font-weight: 500;
  paint-order: stroke fill;
  transition: fill .25s ease, stroke .25s ease;
}

.word-analysis-page[data-glyph-style="svg"] .analysis-svg-text {
  fill: rgba(255,255,255,.04);
  stroke: #08785f;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: svgGlyphDraw 1.3s ease forwards;
}

@keyframes svgGlyphDraw {
  to { stroke-dashoffset: 0; }
}

.analysis-svg-note {
  margin: 7px 4px 1px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.analysis-summary-card {
  padding: 24px;
}

.analysis-word-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.analysis-word-title > div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.analysis-hanzi-inline {
  font-family: var(--analysis-font);
  color: #143e36;
  font-size: clamp(58px, 7vw, 94px);
  line-height: .9;
}

.analysis-word-title strong {
  color: #078b69;
  font-size: clamp(20px, 3vw, 31px);
}

.analysis-word-title > span {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #1bc47b, #087e64);
  font-size: 10px;
  font-weight: 950;
}

.analysis-summary-card > h2 {
  margin: 22px 0 0;
  color: #2d4d47;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.18;
}

.analysis-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.analysis-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.analysis-info-row {
  min-width: 0;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.94);
}

.analysis-info-row span,
.analysis-info-row b {
  display: block;
}

.analysis-info-row span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.analysis-info-row b {
  margin-top: 4px;
  color: #34534e;
  font-size: 13px;
  line-height: 1.35;
}

.analysis-muted {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.analysis-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 13px;
}

.analysis-card {
  min-width: 0;
  padding: 19px;
  border-radius: 23px;
}

.analysis-card h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  color: #184e43;
  font-size: 18px;
}

.analysis-card h2 > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(219,255,226,.82);
  font-size: 14px;
}

.analysis-card p {
  margin: 0;
  color: #526c67;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.analysis-card--example {
  background: linear-gradient(145deg, rgba(255,253,237,.94), rgba(255,248,216,.74));
}

.analysis-example-hanzi {
  color: #2e4b46 !important;
  font-family: var(--analysis-font);
  font-size: 22px !important;
  font-weight: 800;
}

.analysis-card--example button {
  margin-top: 14px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 12px;
  color: #08785f;
  background: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 950;
}

.analysis-related {
  margin-top: 13px;
  padding: 18px;
  border-radius: 25px;
}

.analysis-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.analysis-section-title h2 {
  margin: 4px 0 0;
  font-size: 21px;
}

.analysis-section-title > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.analysis-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.analysis-related-grid .word-tile {
  border-radius: 19px;
  padding: 18px 10px 13px;
}

.analysis-related-grid .word-tile__hanzi {
  font-size: clamp(44px, 5vw, 66px);
}

.analysis-related-grid .word-tile__level,
.analysis-related-grid .word-tile__open {
  transform: scale(.85);
}

.analysis-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 13px;
  padding: 10px;
  border-radius: 21px;
}

.analysis-pagination button {
  min-width: 0;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 14px;
  color: #315650;
  background: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 850;
}

.analysis-pagination button:last-child {
  text-align: right;
}

.analysis-pagination button b {
  font-family: var(--analysis-font);
  color: #08785f;
  font-size: 21px;
}

.analysis-pagination .analysis-back-list {
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #18c87b, #087e64);
  padding-inline: 20px;
}

@media (max-width: 900px) {
  .vocabulary-grid,
  .analysis-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analysis-hero-grid {
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  }

  .analysis-summary-card {
    padding: 19px;
  }
}

@media (max-width: 700px) {
  .vocabulary-grid,
  .analysis-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .word-tile {
    min-height: 0;
    border-radius: 21px;
    padding: 20px 10px 14px;
  }

  .word-tile__hanzi {
    font-size: clamp(54px, 19vw, 78px);
  }

  .word-tile.is-long .word-tile__hanzi {
    font-size: clamp(34px, 12vw, 49px);
  }

  .word-tile__pinyin {
    font-size: 11px;
  }

  .word-tile strong {
    font-size: 12px;
  }

  .analysis-toolbar {
    align-items: flex-start;
    padding: 13px;
  }

  .analysis-toolbar__actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .analysis-speak,
  .analysis-next {
    min-height: 40px;
    flex: 1 1 145px;
    padding-inline: 11px;
    font-size: 12px;
  }

  .analysis-hero-grid,
  .analysis-content-grid {
    grid-template-columns: 1fr;
  }

  .analysis-stage-card,
  .analysis-summary-card {
    border-radius: 23px;
  }

  .analysis-stage {
    width: min(100%, 330px);
  }

  .analysis-summary-card {
    padding: 17px;
  }

  .analysis-word-title > div {
    gap: 10px;
  }

  .analysis-hanzi-inline {
    font-size: 64px;
  }

  .analysis-word-title strong {
    font-size: 20px;
  }

  .analysis-info-list {
    margin-top: 15px;
  }

  .analysis-card {
    padding: 16px;
    border-radius: 20px;
  }

  .analysis-pagination {
    grid-template-columns: 1fr 1fr;
  }

  .analysis-pagination .analysis-back-list {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (max-width: 420px) {
  .word-analysis-page {
    padding-inline: 10px;
  }

  .analysis-style-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(78px, 1fr));
  }

  .analysis-info-list {
    grid-template-columns: 1fr;
  }

  .analysis-related {
    padding: 13px;
  }

  .analysis-related-grid .word-tile__level {
    display: none;
  }

  .analysis-pagination button {
    padding-inline: 9px;
  }
}

.vocabulary-grid > .empty-state {
  grid-column: 1 / -1;
}

/* ===== MaoGeHanzi: real stroke-order animation (Hanzi Writer) ===== */
.analysis-static-glyph {
  display: block;
}

.analysis-writer-shell {
  display: none;
  min-height: 220px;
  padding: 10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.92), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(230,248,241,.72));
  border: 1px solid rgba(10,126,96,.10);
}

.word-analysis-page[data-glyph-style="svg"] .analysis-static-glyph {
  display: none;
}

.word-analysis-page[data-glyph-style="svg"] .analysis-writer-shell {
  display: block;
}

.analysis-writer-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 190px;
}

.analysis-writer-cell {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(9,128,99,.13) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(9,128,99,.13) 50%, transparent calc(50% + .5px)),
    linear-gradient(45deg, transparent calc(50% - .5px), rgba(9,128,99,.08) 50%, transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), rgba(9,128,99,.08) 50%, transparent calc(50% + .5px)),
    rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(9,128,99,.10), 0 10px 24px rgba(0,79,68,.08);
}

.analysis-writer-cell > span {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 2;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #42655d;
  background: rgba(255,255,255,.82);
  font-family: var(--analysis-font);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.analysis-writer-target {
  position: relative;
  z-index: 1;
}

.analysis-writer-target svg,
.analysis-writer-target canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.analysis-writer-target.is-error::after {
  content: "Không có dữ liệu nét";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #8a4a3f;
  background: rgba(255,246,242,.92);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.analysis-writer-status {
  margin: 8px 4px 0;
  color: #60746f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

.analysis-stage-controls {
  display: flex;
  justify-content: center;
  margin-top: 9px;
}

.analysis-stage-controls button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(4,126,94,.14);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #16c97b, #087d64);
  box-shadow: 0 10px 20px rgba(0,113,87,.17);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.analysis-stage-controls button:disabled {
  opacity: .66;
  cursor: wait;
}

@media (max-width: 520px) {
  .analysis-writer-shell {
    min-height: 180px;
    padding: 7px;
    border-radius: 19px;
  }

  .analysis-writer-grid {
    gap: 7px;
    min-height: 160px;
  }

  .analysis-writer-cell {
    border-radius: 16px;
  }

  .analysis-writer-cell > span {
    right: 5px;
    bottom: 5px;
    min-width: 20px;
    padding: 1px 5px;
    font-size: 10px;
  }

  .analysis-stage-controls button {
    width: 100%;
  }
}


/* === Trang phân tích từ vựng dạng thẻ, tối ưu điện thoại === */
.lexicon-page { display: grid; gap: 16px; }
.lexicon-toolbar { align-items: flex-start; }
.lexicon-toolbar__copy { min-width: 0; }
.lexicon-toolbar__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 4px 0 6px; }
.lexicon-toolbar__title-row h1 { margin: 0; font-size: clamp(35px, 4.8vw, 54px); }
.lexicon-toolbar__pinyin { color: #2374ba; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: clamp(20px, 2.5vw, 29px); font-weight: 850; letter-spacing: 0; line-height: 1; white-space: normal; }
.lexicon-toolbar__copy > p { margin: 0; color: var(--muted); font-size: 16px; font-weight: 750; }
.lexicon-hero-grid { grid-template-columns: minmax(280px, 0.82fr) minmax(380px, 1.18fr); align-items: stretch; }
.lexicon-stage-card { min-width: 0; }
.lexicon-basic-card,
.lexicon-panel,
.lexicon-more {
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(249,246,239,.66));
  box-shadow: 0 18px 40px rgba(69, 75, 65, 0.09);
  backdrop-filter: blur(22px);
}
.lexicon-basic-card { padding: 22px; }
.lexicon-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lexicon-section-heading > span { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; background: #edf8f3; color: #087b5c; font-family: KaiTi, STKaiti, serif; font-size: 23px; font-weight: 900; }
.lexicon-section-heading h2 { margin: 0; color: #21453d; font-size: clamp(19px, 2vw, 25px); }
.lexicon-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lexicon-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lexicon-fact { min-width: 0; padding: 13px 14px; border: 1px solid rgba(38,102,86,.11); border-radius: 16px; background: rgba(255,255,255,.68); }
.lexicon-fact span { display: block; margin-bottom: 5px; color: #84736a; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.lexicon-fact b { display: block; overflow-wrap: anywhere; color: #273f39; font-size: 15px; line-height: 1.45; }
.lexicon-fact.is-hanzi b { font-family: var(--analysis-font); font-size: 29px; font-weight: 700; }
.lexicon-fact.is-traditional b { font-family: KaiTi, STKaiti, "Kaiti SC", "DFKai-SB", serif; }
.lexicon-fact.is-wide { grid-column: 1 / -1; }
.lexicon-primary-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.lexicon-panel { grid-column: span 6; padding: 20px; }
.lexicon-panel--quick-meanings { grid-column: span 4; }
.lexicon-primary-grid:has(.lexicon-panel--quick-meanings) .lexicon-panel--structure,
.lexicon-primary-grid:has(.lexicon-panel--quick-meanings) .lexicon-panel--memory { grid-column: span 4; }
.lexicon-fact-grid--compact .lexicon-fact { padding: 10px 12px; }
.lexicon-formula { display: grid; gap: 5px; margin: 14px 0 0; padding: 14px 16px; border: 0; border-left: 4px solid #0c9b73; border-radius: 0 15px 15px 0; background: #edf9f4; color: #23453e; }
.lexicon-formula b { font-size: 17px; }
.lexicon-formula span { color: #6c7b76; font-size: 13px; line-height: 1.5; }
.lexicon-memory-copy p { margin: 0 0 9px; color: #3d4a46; line-height: 1.75; }
.lexicon-memory-copy p:last-child { margin-bottom: 0; }
.lexicon-accuracy-note { display: flex; gap: 9px; margin-top: 13px; padding: 11px 12px; border-radius: 14px; background: #fff7df; color: #705f36; }
.lexicon-accuracy-note > span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: #f4c85f; color: #6b4e08; font-weight: 950; }
.lexicon-accuracy-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.lexicon-panel--quick-meanings ol { display: grid; gap: 7px; margin: 0; padding-left: 22px; }
.lexicon-panel--quick-meanings li { color: #344943; font-weight: 780; line-height: 1.5; }
.lexicon-more { overflow: hidden; }
.lexicon-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 76px; padding: 16px 20px; cursor: pointer; list-style: none; user-select: none; }
.lexicon-more > summary::-webkit-details-marker { display: none; }
.lexicon-more > summary span { display: grid; gap: 3px; }
.lexicon-more > summary b { color: #21453d; font-size: 20px; }
.lexicon-more > summary small { color: #82736b; font-size: 12px; line-height: 1.45; }
.lexicon-more > summary i { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 13px; background: #eaf7f1; color: #087c5c; font-size: 24px; font-style: normal; transition: transform .24s ease; }
.lexicon-more[open] > summary { border-bottom: 1px solid rgba(50,93,81,.1); }
.lexicon-more[open] > summary i { transform: rotate(45deg); }
.lexicon-more-body { display: grid; gap: 0; padding: 0 20px 20px; }
.lexicon-detail-section { padding: 20px 0; border-bottom: 1px solid rgba(50,93,81,.1); }
.lexicon-detail-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.lexicon-detail-section > p { margin: 0 0 10px; color: #3e4c47; line-height: 1.75; }
.lexicon-detail-section > p:last-child { margin-bottom: 0; }
.lexicon-component-list,
.lexicon-meaning-list,
.lexicon-example-list { display: grid; gap: 10px; }
.lexicon-component-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lexicon-component-card { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 13px; padding: 14px; border: 1px solid rgba(43,102,87,.12); border-radius: 18px; background: rgba(255,255,255,.62); }
.lexicon-component-symbol { display: grid; place-items: center; min-height: 68px; border-radius: 16px; background: #f0f8f5; color: #087c5c; font-family: KaiTi, STKaiti, serif; font-size: 40px; }
.lexicon-component-card h3 { margin: 0 0 4px; color: #273f39; font-size: 17px; }
.lexicon-component-card h3 small { color: #2374ba; font-size: 13px; }
.lexicon-component-card > div:last-child > b { color: #9d6122; font-size: 12px; }
.lexicon-component-card p { margin: 7px 0 0; color: #57645f; font-size: 13px; line-height: 1.62; }
.lexicon-meaning-card { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; padding: 13px; border-radius: 17px; background: rgba(255,255,255,.62); border: 1px solid rgba(43,102,87,.1); }
.lexicon-meaning-card > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: #eaf7f1; color: #087c5c; font-weight: 950; }
.lexicon-meaning-card h3 { margin: 2px 0 7px; color: #273f39; font-size: 16px; }
.lexicon-meaning-card p { margin: 3px 0; color: #56625e; line-height: 1.55; }
.lexicon-example-line { display: flex; align-items: center; gap: 7px; }
.lexicon-example-line button,
.lexicon-example-card > button { border: 0; border-radius: 10px; background: #eaf3ff; color: #2269a9; cursor: pointer; }
.lexicon-example-line button { width: 30px; height: 30px; }
.lexicon-pinyin { color: #2374ba !important; font-weight: 800; }
.lexicon-example-card { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 11px; padding: 13px; border-radius: 17px; background: rgba(255,255,255,.62); border: 1px solid rgba(43,102,87,.1); }
.lexicon-example-card > button { width: 38px; height: 38px; }
.lexicon-example-card b { display: block; color: #273f39; font-family: var(--analysis-font); font-size: 17px; }
.lexicon-example-card span { display: block; margin-top: 3px; color: #2374ba; font-size: 13px; font-weight: 750; }
.lexicon-example-card p { margin: 5px 0 0; color: #56625e; line-height: 1.55; }
.lexicon-compound-table { overflow: hidden; border: 1px solid rgba(43,102,87,.12); border-radius: 17px; background: rgba(255,255,255,.62); }
.lexicon-compound-head,
.lexicon-compound-row { display: grid; grid-template-columns: minmax(70px,.7fr) minmax(100px,1fr) minmax(150px,1.5fr); gap: 10px; align-items: center; padding: 10px 13px; }
.lexicon-compound-head { background: #eef7f3; color: #49625a; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.lexicon-compound-row { border-top: 1px solid rgba(43,102,87,.09); color: #4e5b57; font-size: 13px; }
.lexicon-compound-row b { color: #21453d; font-family: var(--analysis-font); font-size: 18px; }
.lexicon-compound-row span:nth-child(2) { color: #2374ba; font-weight: 780; }
.lexicon-summary-box { margin-top: 18px; padding: 17px !important; border: 1px solid #efd6a3 !important; border-radius: 18px; background: #fff9e9; }

@media (max-width: 980px) {
  .lexicon-hero-grid { grid-template-columns: minmax(250px,.82fr) minmax(330px,1.18fr); }
  .lexicon-panel,
  .lexicon-primary-grid:has(.lexicon-panel--quick-meanings) .lexicon-panel--structure,
  .lexicon-primary-grid:has(.lexicon-panel--quick-meanings) .lexicon-panel--memory,
  .lexicon-panel--quick-meanings { grid-column: span 6; }
  .lexicon-panel--quick-meanings:last-child:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .lexicon-toolbar__title-row { gap: 8px; }
  .lexicon-toolbar__pinyin { font-size: 20px; }
  .lexicon-hero-grid { grid-template-columns: 1fr; }
  .lexicon-stage-card { order: 1; }
  .lexicon-basic-card { order: 2; }
  .lexicon-primary-grid { grid-template-columns: 1fr; }
  .lexicon-panel,
  .lexicon-primary-grid:has(.lexicon-panel--quick-meanings) .lexicon-panel--structure,
  .lexicon-primary-grid:has(.lexicon-panel--quick-meanings) .lexicon-panel--memory,
  .lexicon-panel--quick-meanings { grid-column: 1; }
  .lexicon-component-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .lexicon-page { gap: 11px; }
  .lexicon-basic-card,
  .lexicon-panel { padding: 14px; border-radius: 21px; }
  .lexicon-section-heading { align-items: flex-start; gap: 9px; margin-bottom: 12px; }
  .lexicon-section-heading > span { width: 34px; height: 34px; border-radius: 11px; font-size: 19px; }
  .lexicon-section-heading h2 { font-size: 18px; }
  .lexicon-section-heading p { font-size: 11px; }
  .lexicon-fact-grid { gap: 7px; }
  .lexicon-fact { padding: 10px; border-radius: 13px; }
  .lexicon-fact span { font-size: 9px; }
  .lexicon-fact b { font-size: 13px; }
  .lexicon-fact.is-hanzi b { font-size: 24px; }
  .lexicon-more { border-radius: 21px; }
  .lexicon-more > summary { min-height: 68px; padding: 13px 14px; }
  .lexicon-more > summary b { font-size: 17px; }
  .lexicon-more > summary small { font-size: 10px; }
  .lexicon-more > summary i { width: 33px; height: 33px; border-radius: 11px; font-size: 21px; }
  .lexicon-more-body { padding: 0 14px 14px; }
  .lexicon-detail-section { padding: 16px 0; }
  .lexicon-component-card { grid-template-columns: 52px minmax(0,1fr); padding: 11px; }
  .lexicon-component-symbol { min-height: 52px; font-size: 31px; }
  .lexicon-compound-head { display: none; }
  .lexicon-compound-row { grid-template-columns: minmax(62px,.7fr) minmax(0,1.7fr); gap: 4px 9px; }
  .lexicon-compound-row b { grid-row: 1 / 3; align-self: center; font-size: 17px; }
  .lexicon-compound-row span:nth-child(2) { font-size: 12px; }
  .lexicon-compound-row span:nth-child(3) { font-size: 12px; }
}

/* Trang phân tích từ vựng đồng bộ với cấu trúc nhập 13 mục */
.lexicon-primary-grid--single {
  grid-template-columns: 1fr;
}

.lexicon-primary-grid--single .lexicon-panel--structure {
  grid-column: 1 / -1;
}

.lexicon-more-body--accordions {
  gap: 10px;
  padding-top: 14px;
}

.lexicon-detail-accordion {
  overflow: hidden;
  border: 1px solid rgba(42, 94, 79, .12);
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
}

.lexicon-detail-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lexicon-detail-accordion > summary::-webkit-details-marker { display: none; }
.lexicon-detail-accordion > summary span { display: grid; gap: 3px; }
.lexicon-detail-accordion > summary b { color: #244b42; font-size: 15px; }
.lexicon-detail-accordion > summary small { color: #83766f; font-size: 11px; line-height: 1.4; }
.lexicon-detail-accordion > summary i {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 10px;
  background: #e9f6f0;
  color: #0a805e;
  font-size: 19px;
  font-style: normal;
  transition: transform .22s ease;
}
.lexicon-detail-accordion[open] > summary {
  border-bottom: 1px solid rgba(42, 94, 79, .1);
  background: rgba(236, 248, 243, .58);
}
.lexicon-detail-accordion[open] > summary i { transform: rotate(45deg); }

.lexicon-detail-accordion__body {
  padding: 0 15px 13px;
}

.lexicon-detail-accordion__body > .lexicon-detail-section:first-child {
  padding-top: 16px;
}

.lexicon-rich-copy p {
  margin: 0 0 10px;
  color: #3e4c47;
  line-height: 1.72;
}
.lexicon-rich-copy p:last-child { margin-bottom: 0; }

.lexicon-accuracy-note--detail {
  margin: 13px 0 3px;
  align-items: flex-start;
}
.lexicon-accuracy-note--detail b { display: block; margin-bottom: 3px; font-size: 12px; }

.lexicon-memory-quote {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid #edd39b;
  border-radius: 16px;
  background: #fff9e9;
}
.lexicon-memory-quote span { color: #9b6b18; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.lexicon-memory-quote b { color: #4b3a21; line-height: 1.55; }

.lexicon-memory-visual {
  margin-top: 12px;
  padding: 14px;
  border-radius: 15px;
  background: #edf8f4;
  color: #225448;
  text-align: center;
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 900;
  letter-spacing: .04em;
}

.lexicon-comparison-note {
  margin: 14px 0 3px;
  padding: 14px 16px;
  border-radius: 15px;
  background: #f7f1ff;
  color: #514464;
}
.lexicon-comparison-note > b { display: block; margin-bottom: 6px; }
.lexicon-comparison-note p { margin: 0; line-height: 1.65; }

.lexicon-summary-box blockquote {
  margin: 13px 0 0;
  padding: 12px 14px;
  border-left: 4px solid #d8a844;
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .66);
  color: #5a4421;
  font-weight: 850;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .lexicon-more-body--accordions { padding-top: 10px; gap: 8px; }
  .lexicon-detail-accordion { border-radius: 14px; }
  .lexicon-detail-accordion > summary { min-height: 56px; padding: 11px 12px; align-items: flex-start; }
  .lexicon-detail-accordion > summary b { font-size: 14px; }
  .lexicon-detail-accordion > summary small { font-size: 10px; }
  .lexicon-detail-accordion__body { padding: 0 12px 11px; }
  .lexicon-memory-visual { font-size: 18px; }
}