/* =====================================================================================================================
   "Nếp mượt": the default look (<html class="pop">). The feel of a fast banking app (quick, tidy, everything reacts the
   moment it is touched), the face of Nếp: hanji paper, a clay sprout green, a red seal, honey for grains, Korea's four
   seasons. Font: Pretendard. Light and dark both key off <html data-theme="light|dark"> (index.html sets it from the
   Tôi page switch, or from the phone when that is on Tự động). NEVER write @media (prefers-color-scheme: dark):
   write html[data-theme="dark"] .x { ... } instead, or just use the tokens below, which already flip.

   TOKENS (use these, not hex):
   surfaces   --bg (hanji / night)  --card (white / near black)  --card2 (a well inside a card)  --fill (grey button,
              track, icon tile)  --line (hairline)  --rim (card edge: none in light, 1px of white in dark)
   text       --ink (main)  --ink2 (secondary)  --ink3 (captions, chevrons; still 4.5:1 on --card)
   green      --acc (bright sprout: progress, dots, icons, a ring; not for white text)
              --acc-btn (button fill: white text on it is 4.5:1)  --acc-press (pressed)  --acc-soft (light wash)
              --acc-ink (green text on --card, --bg or --acc-soft)
   red seal   --red (stamp, streak, wrong mark; not for text)  --red-btn (fill with white text)  --red-ink  --red-soft
   honey      --honey (grains only)  --honey-ink (text)  --honey-soft
   shape      --r-card 24px  --r-btn 18px  --r-sm 14px  --r-sheet 28px  --r-chip 999px
   depth      --sh-card  --sh-float (sheet, toast)  --sh-btn (the clay button)  --sh-btn-down
   type       --font (Be Vietnam Pro for Vietnamese, Pretendard for Korean)  --font-serif (exam paper, Korean serif)
   motion     --ease-out  --ease-in  --t-press 90ms  --t-page 180ms  --t-sheet 420ms
   season     --sky-a --sky-b (the header sky, by the hour: <html data-sky="dawn|day|dusk|night">, set by feel.js)
              --season-a --season-b (what falls: leaf, petal, flake), --season-tint (a wash of the season)
              <html data-season="spring|summer|autumn|winter">, ?season= to try one
   Old names (--paper, --muted, --leaf, --leaf-d, --leaf-soft, --bean, --wrong...) still work: they point here.
   Layout: the page grain (--paper-grain) is on body; .card-like boxes are white, no border, --sh-card.
   ===================================================================================================================== */
/* on <html> only: "pop" is also the bounce class of modals and toasts, and there it put the light tokens back inside dark
   (a white modal with light ink, its title unreadable) */
html.pop {
  color-scheme: light;
  --bg: #F4F1E9;
  --card: #FFFFFF;
  --card2: #FAF8F3;
  --fill: #EFECE4;
  --line: #E7E2D6;
  --rim: transparent;
  --ink: #1B201C;
  --ink2: #4F5751;
  --ink3: #5C625C;
  --acc: #1FA463;
  --acc-btn: #14884F;
  --acc-press: #0F7543;
  --acc-soft: #E2F3E8;
  --acc-ink: #0E7A43;
  --red: #DE4636;
  --red-btn: #CC3D2C;
  --red-ink: #B8321F;
  --red-soft: #FCE9E4;
  --honey: #EDA328;
  --honey-ink: #8A5A00;
  --honey-soft: #FCEFD2;
  --r-card: 24px;
  --r-btn: 18px;
  --r-sm: 14px;
  --r-sheet: 28px;
  --r-chip: 999px;
  --sh-card: 0 1px 2px rgba(70, 58, 30, .05), 0 10px 26px -18px rgba(70, 58, 30, .22);
  --sh-float: 0 -2px 30px rgba(40, 32, 16, .12);
  --sh-btn: inset 0 2px 1px rgba(255, 255, 255, .26), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 8px 18px -10px rgba(16, 120, 70, .75);
  --sh-btn-down: inset 0 2px 1px rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 3px 6px -4px rgba(16, 120, 70, .7);
  --font: 'Be Vietnam Pro', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
  --font-serif: "Noto Serif KR", "Batang", serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-press: 90ms;
  --t-page: 180ms;
  --t-sheet: 420ms;
  --sky-a: #FCE6D2;
  --sky-b: #F4F1E9;
  --season-a: #F2B33D;
  --season-b: #E07A2E;
  --season-tint: rgba(242, 177, 91, .10);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='400' height='200' filter='url(%23f)'/%3E%3C/svg%3E");

  /* the names the older rules use (--text and --hair: style.css, with the old colour as fallback for the other looks) */
  --text: var(--ink);
  --hair: var(--line);
  --paper: var(--card);
  --muted: var(--ink2);
  --leaf: var(--acc-btn);
  --leaf-d: var(--acc-ink);
  --leaf-soft: var(--acc-soft);
  --leaf-hi: var(--acc);
  --bean: var(--honey);
  --bean-d: var(--honey-ink);
  --bean-soft: var(--honey-soft);
  --wrong: var(--red-btn);
  --wrong-d: var(--red-ink);
  --wrong-soft: var(--red-soft);
  --sky: var(--acc-btn);
  --sky-d: var(--acc-ink);
  --sky-soft: var(--acc-soft);
  --coral: var(--acc-btn);
  --orange: var(--acc-btn);
  --orange-hi: var(--acc-btn);
  --orange-d: var(--acc-ink);
  --purple: var(--acc-btn);
  --purple-d: var(--acc-ink);
  --purple-soft: var(--acc-soft);
  --pink: var(--acc-btn);
  --pink-d: var(--acc-ink);
  --radius: var(--r-card);
  --leafy: var(--r-btn);
  --edge: 1px solid var(--rim);
  --pop: var(--sh-card);
  --ui: var(--font);
  --kr-sans: var(--font);
  --kr-serif: var(--font-serif);
  --sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-9' stroke='%230F7543' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M12 14C12 8.6 8.4 5.4 2.6 5.8 2.6 11.2 6.4 14.4 12 14z' fill='%2314884F'/%3E%3Cpath d='M12 11.6c0-5 3.3-8.3 9.4-8.2 0 5.6-3.6 8.6-9.4 8.2z' fill='%231FA463'/%3E%3C/svg%3E");
}
html.pop[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121411;
  --card: #1C1F1B;
  --card2: #20241F;
  --fill: #272B26;
  --line: #2C302B;
  --rim: rgba(255, 255, 255, .04);
  --ink: #F1F2EC;
  --ink2: #B6BCB4;
  --ink3: #9AA199;
  --acc: #2DBE70;
  --acc-btn: #14884F;
  --acc-press: #11733F;
  --acc-soft: #183326;
  --acc-ink: #5AD992;
  --red: #F0604F;
  --red-btn: #CC3D2C;
  --red-ink: #FF7A6B;
  --red-soft: #3A1D18;
  --honey: #F4B544;
  --honey-ink: #F4B544;
  --honey-soft: #3A2E12;
  --sh-card: 0 0 0 1px rgba(255, 255, 255, .03);
  --sh-float: 0 -2px 30px rgba(0, 0, 0, .5);
  --sh-btn: inset 0 2px 1px rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 8px 18px -12px rgba(0, 0, 0, .9);
  --sh-btn-down: inset 0 1px 1px rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .2);
  --sky-a: #2A2540;
  --sky-b: #121411;
  --season-tint: rgba(242, 177, 91, .05);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .9 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- cards: a light rim and a ledge ---------- */
.pop :where(.guide, .feat, .mini, .today, .ex-card, .card, .panel, .modal, .omr-card, .sp-set, .sp-card, .idiom, .fcard,
  .res-hero, .bubble, .task, .goal-card, .call-hero, .course, .sv-opt, .sv-build li,
  .list, .coach-say, .tip, .empty-note, .search, .mode-opt, .paper) {
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--pop);
}
.pop :where(.paper, .omr-card, .coach-say, .bubble, .sv-build li, .empty-note, .list, .tasks) { box-shadow: none; }
.pop .paper { border-radius: 18px; }
.pop .modal { border-radius: 26px; border: 0; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .tip { border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.pop .drawer { border-left: var(--edge); box-shadow: none; }
.pop .empty-note { border-style: dashed; background: transparent; }
.pop .bubble::before { display: none; }
.pop :is(button.feat, .feat.big, .feat.wide, .mini, .sp-set, .task, .ex-card):hover { border-color: var(--line); }
.pop :is(button.feat, .mini, .sp-set, .task, .rv-hero, .rv-tile, .ex-card) { transition: transform .1s, box-shadow .1s; }
.pop :is(button.feat, .mini, .sp-set, .task, .rv-hero, .rv-tile):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }

/* ---------- type: heavy, tight headings ---------- */
.pop :is(.sec, .logo b, .sv-q, .call-hero h2, .res-hero h2, .feat.big b, .feat.wide b, .rv-hero-body b, .badge b, .rv-tile b, .modal h3, .lc-name) {
  font-weight: 800; letter-spacing: -.02em; }
.pop .sec { font-size: 23px; }
.pop .logo b { font-size: 20px; color: var(--leaf); }
.pop .back { color: var(--sky-d); font-weight: 700; }
.pop .count { color: var(--ink); font-weight: 600; }
.pop .panel[data-win]::before { content: attr(data-win); display: block; font-weight: 700; margin-bottom: 8px; }

/* ---------- buttons: solid colour on a darker ledge, sinking in when pressed ---------- */
.pop .btn { border: var(--edge); border-radius: 16px; background: var(--paper); color: var(--ink); font-weight: 800; padding: 10px 18px;
  box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); transition: transform .1s, box-shadow .1s, background .1s; }
.pop .btn:hover { background: var(--fill); border-color: var(--line); }
.pop .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.pop .btn.primary { background: var(--leaf); border-color: var(--leaf); color: #fff; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .btn.primary:hover { background: var(--acc-press); }
.pop .btn.primary:active { box-shadow: 0 0 0 var(--leaf-d); }
.pop .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--sky-d); }
.pop .btn.ghost:hover { background: var(--sky-soft); }
.pop .btn.small { padding: 6px 14px; border-radius: 12px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .btn.primary.small { box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.pop .up-actions .btn.primary { color: #fff; }
.pop .chip { border: var(--edge); border-radius: 12px; background: var(--paper); font-weight: 700; padding: 6px 14px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .chip.on { background: var(--sky-soft); color: var(--sky-d); border-color: var(--sky); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .account { border: var(--edge); border-radius: 14px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); font-weight: 800; }
.pop .tabs { background: var(--paper); border: var(--edge); border-radius: 16px; padding: 4px; gap: 4px; }
.pop .tab { border: 2px solid transparent; border-radius: 12px; padding: 7px 10px; color: var(--muted); }
.pop .tab.on { background: var(--sky-soft); border-color: var(--sky); color: var(--sky-d); box-shadow: none; }
.pop .skill { border: var(--edge); border-radius: 14px; padding: 8px 12px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .skill.on { background: var(--sky); border-color: var(--sky); color: #fff; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .skill.on small { color: #fff; }
.pop .search { border-radius: 16px; padding: 11px 18px; }

/* ---------- coloured panels: Nếp's word (green), the call (blue), task lists (light blue) ---------- */
.pop .guide { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .call-hero { background: var(--sky); border-color: var(--sky); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop :is(.guide-body, .call-hero-body) { background: var(--paper); border: 0; border-radius: 16px; padding: 14px 16px; }
.pop .guide .say { margin-bottom: 12px; }
.pop .guide.small .say { margin: 0; }
.pop :is(.tasks, .list) { background: var(--sky-soft); border: 0; border-radius: 24px; padding: 10px; display: grid; gap: 10px; overflow: visible; }
.pop .task { border-radius: 18px; padding: 12px 14px; }
.pop .tk-body { padding-left: 2px; }
.pop .tk-body b { font-weight: 800; }
.pop .task em { color: var(--sky-d); font-weight: 800; font-style: normal; }
.pop .tk-box { border: var(--edge); border-radius: 9px; }
.pop .task.done .tk-box { background: var(--leaf); border-color: var(--leaf); }
.pop .li { background: var(--paper); border: var(--edge); border-radius: 18px; padding: 12px 16px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .li + .li { border-top: var(--edge); }
.pop .li:hover { background: var(--fill); }
.pop .li em { color: var(--ink); font-size: 18px; }
.pop .li em.weak { font-size: 13px; color: #fff; background: var(--orange); border: 0; border-radius: 10px; padding: 1px 10px; }

/* ---------- tiles and small tags ---------- */
.pop :is(.feat.big em, .feat.wide em) { color: var(--sky-d); background: var(--sky-soft); border: 0; border-radius: 10px; padding: 2px 10px; font-weight: 800; font-style: normal; }
.pop .feat.wide em { color: var(--honey-ink); background: var(--bean-soft); }
.pop .feat.big[data-pick] { color: #fff; }
.pop .feat.big[data-pick="nghe"] { background: var(--sky); border-color: var(--sky); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .feat.big[data-pick="doc"] { background: var(--acc-btn); border-color: var(--acc-btn); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .feat.big[data-pick="viet"] { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .feat.big[data-pick] :is(b, small) { color: #fff; }
.pop .feat.big small { opacity: .92; }
.pop .feat.big[data-pick="doc"] small { opacity: 1; }
.pop .feat.big em { background: var(--paper); }
.pop .feat.big[data-pick="doc"] em { color: var(--orange-d); }
.pop .feat.big[data-pick="viet"] em { color: var(--leaf-d); }
.pop .mini:nth-child(3n+1) { background: var(--bean-soft); border-color: var(--honey-soft); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .mini:nth-child(3n+2) { background: var(--card); border-color: var(--line); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .mini:nth-child(3n) { background: var(--card); border-color: var(--line); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .weak-tag { color: #fff; background: var(--orange); border: 0; border-radius: 10px; padding: 1px 10px; font-weight: 700; }
.pop .ex-last { border: var(--edge); border-radius: 10px; color: var(--ink); }
.pop .today-big b { color: var(--orange); }
.pop .mode-opt { border-radius: 16px; }
.pop .mode-opt:has(input[type=radio]:checked) { border-color: var(--sky); background: var(--sky-soft); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }

/* ---------- five sections, one colour ---------- */
.pop [data-nav] { --c: var(--leaf); --cs: var(--leaf-soft); }
.pop .navtabs { border-bottom: 0; gap: 8px; flex-wrap: wrap; }
.pop .nt { border: var(--edge); border-radius: 14px; padding: 8px 18px; margin: 0; background: var(--paper); color: var(--ink); font-weight: 800; }
.pop .nt.on { background: var(--cs); border-color: var(--c); color: var(--ink); }
@media (min-width: 1000px) {
  .pop .navtabs { background: transparent; border: 0; padding: 0; flex-wrap: nowrap; }
  .pop .nt { border-color: transparent; background: transparent; border-radius: 14px; padding: 11px 14px; color: var(--muted); }
  .pop .nt svg { color: var(--c); }
  .pop .nt.on { border-color: var(--c); background: var(--cs); color: var(--ink); }
  .pop .nt:not(.on):hover { background: var(--paper); }
}
.pop .course li.cs-next > button { border: var(--edge); }
.pop .navbar { background: var(--paper); border-top: var(--edge); }
.pop .nb { color: var(--muted); font-weight: 700; }
.pop .nb svg { box-sizing: content-box; padding: 3px 13px; color: var(--c); border: 2px solid transparent; border-radius: 12px; stroke-width: 2.4; }
.pop .nb.on { color: var(--ink); font-weight: 800; }
.pop .nb.on svg { background: var(--cs); border-color: var(--c); }
.pop .nb-nep img { background: var(--leaf); border: 3px solid var(--paper); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .nb-nep.on img { background: var(--leaf); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4), 0 0 0 4px var(--leaf-soft); }

/* ---------- survey ---------- */
.pop .sv-prog { height: 14px; background: var(--line); border: 0; border-radius: 999px; }
.pop .sv-prog i { background: var(--orange); border-radius: 999px; }
.pop .sv-q { font-size: 23px; letter-spacing: -.01em; }
.pop .sv-back, .pop .sv-skip { color: var(--sky-d); font-weight: 700; }
.pop .sv-opt { border-radius: 18px; }
.pop .sv-name input { border: var(--edge); border-radius: 18px; box-shadow: var(--pop); }
.pop .sv-say, .pop .sv-row, .pop .sv-score label { border: var(--edge); border-radius: 18px; box-shadow: var(--pop); }
.pop .sv-say::before { display: none; }
.pop .sv-score input { border: var(--edge); }
.pop .sv-opt.dunno { border: 0; box-shadow: none; }
.pop .sv-name input:focus { border-color: var(--sky); background: var(--sky-soft); }
.pop .sv-opt.on { background: var(--sky-soft); border-color: var(--sky); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-opt.on small { color: var(--sky-d); }
/* the quote is something to read, not to tap: no rim, quote marks around it */
.pop .sv-quote { background: var(--sky-soft); border-radius: 20px; font-style: italic; }
.pop .sv-quote::before { content: "“"; }
.pop .sv-quote::after { content: "”"; }
.pop .sv-build li { border-radius: 16px; }
.pop .sv-build i { border: var(--edge); border-radius: 8px; }
.pop .sv-build li.ok i { background: var(--leaf); border-color: var(--leaf); }
.pop .sv-plan { background: var(--sky-soft); border: 0; border-radius: 18px; }
.pop .sv-path li { border: var(--edge); border-radius: 16px; }
.pop .sv-test { border: var(--edge); border-radius: 16px; background: var(--bean-soft, var(--paper)); }
.pop .sv-path li.now { outline: 0; border-color: var(--leaf); background: var(--leaf-soft, var(--sky-soft)); }

/* ---------- exam ---------- */
.pop .bar { background: rgba(255, 255, 255, .97); border-bottom: var(--edge); }
.pop .timer { border: var(--edge); border-radius: 12px; padding: 3px 12px; background: var(--paper); font-weight: 800; }
.pop .timer.low { background: var(--wrong-soft); border-color: var(--wrong); color: var(--wrong-d); }
.pop .timer.up { background: var(--leaf-soft); border-color: var(--leaf); }
@media (max-width: 640px) {
  .pop .bar .btn { padding: 7px 12px; font-size: 14px; }
  .pop .timer { padding: 2px 8px; font-size: 15px; }
}
.pop .bub { border-color: var(--ink3); }
.pop .omr-toggle { background: var(--sky); color: #fff; border: 0; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
@media (max-width: 920px) {
  .pop .omr-card { border-radius: 22px 22px 0 0; border-bottom: 0; }
}
.pop .why { background: var(--bean-soft); border-radius: 14px; }
.pop .script { background: var(--sky-soft); border-radius: 14px; }
.pop .script summary { color: var(--sky-d); }
.pop .trans summary { background: var(--sky-soft); color: var(--sky-d); border: 2px solid var(--sky); }
.pop .trans p { background: var(--card2); border-left-color: var(--sky); }
.pop .coach-say { border-radius: 18px 18px 18px 6px; }

/* ---------- meters ---------- */
.pop :is(.meter, .sp-bar div) { height: 14px; background: var(--line); border: 0; }
.pop :is(.meter i, .sp-bar i) { background: var(--sky); border-right: 0; border-radius: 999px; }
.pop .meter.weak i { background: var(--orange); }
.pop .sp-ring { background: radial-gradient(closest-side, var(--paper) 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), var(--line) 0); }

/* ---------- speaking and the call ---------- */
.pop .sp-hook { color: var(--ink); }
.pop .sp-mic { background: var(--sky); color: #fff; border: 0; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .sp-dot { background: var(--wrong); }
.pop .sp-mic.on { background: var(--wrong); color: #fff; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .sp-mic.on .sp-dot { background: #fff; }

/* ---------- small pieces ---------- */
.pop .overlay { background: rgba(0, 0, 0, .45); }
.pop .overlay.soft { background: rgba(241, 248, 254, .94); }
.pop .toast { border-radius: 14px; padding: 10px 18px; font-weight: 700; }
.pop :is(.hint, .warn-box, .upload) { border-radius: 16px; }
.pop .kw { border: var(--edge); }
.pop .fcard .kw { border: 0; }
.pop .kw.done { border-color: var(--leaf); }
.pop .tip-box { border: 2px dashed var(--line); border-radius: 16px; }
.pop .tip-pat { border: var(--edge); }

/* ---------- review page ---------- */
.pop :is(.rv-hero, .rv-tile) { border: var(--edge); box-shadow: var(--pop); }
.pop .rv-word { border: var(--edge); }

/* study map */
.pop :where(.mp-stage, .ex-pick) { border: var(--edge); border-radius: 18px; }
.pop .mp-stage.now { background: var(--leaf-soft); border-color: var(--leaf); }
.pop .mp-bar { border: 0; height: 12px; background: var(--line); }
.pop .mp-g { border: var(--edge); background: #fff; }
.pop .mp-g.ok { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.pop .ex-pick.on { background: var(--sky-soft); border-color: var(--sky); }

/* ---------- the main pages: each in its section's colour, Nếp with a bubble on top ---------- */
.pop .pg-head { border: 0; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .pg-head h2 { font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.pop .pg-thi .sec { color: var(--sky-d); }
.pop .pg-toi .sec { color: var(--pink-d); }

/* tests: the extra drills as solid tiles with white text */
.pop .pg-thi .mini { border: 0; color: #fff; }
.pop .pg-thi .mini small { color: #fff; opacity: .92; }
.pop .pg-thi .mini:nth-child(1) { background: var(--purple); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .pg-thi .mini:nth-child(2) { background: var(--wrong); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .pg-thi .mini:nth-child(3) { background: var(--leaf); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .pg-thi .mini img { background: rgba(255, 255, 255, .9); border-radius: 50%; margin: 6px 0 6px -2px; }
.pop .ex-list { display: grid; gap: 10px; }
.pop .ex-card .ex-title { font-weight: 800; }
.pop .ex-card .btn { flex: none; }

/* the exam list: a band in the skill's colour with Nếp, number tiles and buttons in the same colour */
.pop .pick-nghe { --hc: var(--sky); --hd: var(--sky-d); }
.pop .pick-doc { --hc: var(--orange); --hd: var(--orange-d); }
.pop .pick-viet { --hc: var(--leaf); --hd: var(--leaf-d); }
.pop .home.wide .hero { background: var(--hc); border-radius: var(--radius); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); padding: 4px 14px 4px 0; }
.pop .home.wide .hero .bubble { border: 0; box-shadow: none; font-weight: 700; }
.pop .home.wide .hero .bubble::before { display: block; }
.pop .home.wide .ex-no { background: var(--hc); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .home.wide .ex-card .btn.primary { background: var(--hc); border-color: var(--hc); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .home.wide .ex-card .btn.primary:active { box-shadow: 0 0 0 var(--hd); }
.pop .home.wide .ex-last { background: var(--bean-soft); border: 0; font-weight: 700; display: inline-block; padding: 1px 10px; margin-top: 4px; }
.pop .home.wide .ex-last.doing { background: var(--wrong-soft); color: var(--wrong-d); }

/* the call: a green band (Nếp's colour), a bubble over Nếp, the picked chips green */
.pop .call-hero { position: relative; background: var(--leaf); border-color: var(--leaf); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .call-hero h2 { color: var(--leaf-d); }
.pop .call-say { display: block; position: absolute; top: 14px; right: 14px; z-index: 2; max-width: 46%; margin: 0; background: var(--paper); border-radius: 16px; padding: 8px 12px; font-weight: 700; font-size: 14px; line-height: 1.35; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .call-say::after { content: ""; position: absolute; left: 18px; bottom: -7px; border: 7px solid transparent; border-top-color: var(--paper); border-bottom: 0; }
.pop .call-hero-body .btn.primary { background: var(--orange); border-color: var(--orange); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .pg-nep .sec { color: var(--leaf-d); }
.pop .pg-nep .chip.on { background: var(--leaf); color: #fff; border-color: var(--leaf); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .pg-nep .course h3 { color: var(--leaf-d); font-weight: 800; }
.pop .course li.cs-next > button { border-color: var(--leaf); background: var(--leaf-soft); }

/* review: a purple head card with white text, solid stat stickers, solid tiles with white text */
.pop .rv-hero { background: var(--purple); border: 0; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); color: #fff; }
.pop .rv-hero-body small { opacity: .9; }
.pop .rv-hero-body > span { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 8px 12px; font-weight: 600; }
.pop .rv-hero-body .btn.primary { background: var(--paper); color: var(--purple-d); border-color: var(--paper); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .badge svg * { stroke: none; }
.pop .badge svg { filter: drop-shadow(0 4px 6px rgba(70, 58, 30, .25)); }
.pop .badge { color: #fff; }
.pop .badge b { font-weight: 800; }
.pop .badge span { font-weight: 700; }
.pop .rv-tile { border: 0; color: #fff; }
.pop .rv-tile small { opacity: .92; }
.pop .rv-tile img { background: rgba(255, 255, 255, .9); border-radius: 50%; width: 70px; height: 70px; margin: 8px 8px 8px 6px; }
.pop .rv-tile.c-sky { box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .rv-tile.c-coral { box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .rv-tile.c-leaf { box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .pg-on .sec { color: var(--purple-d); }
.pop .rv-word { background: var(--purple-soft); border-color: var(--line); }
.pop .rv-word.looked { border-color: var(--purple) !important; }
.pop .pg-on .rv-acts .btn.primary { background: var(--purple); border-color: var(--purple); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }

/* me: every panel gets a coloured title strip */
.pop .me-panel { overflow: hidden; }
.pop .me-panel[data-win]::before { margin: -18px -22px 14px; padding: 11px 22px; background: var(--ms, var(--pink)); color: #fff; font-weight: 800; font-size: 16px; }
.pop .pg-main > .me-panel:nth-of-type(5n+1) { --ms: var(--pink); }
.pop .pg-main > .me-panel:nth-of-type(5n+2) { --ms: var(--orange); }
.pop .pg-main > .me-panel:nth-of-type(5n+3) { --ms: var(--leaf); }
.pop .pg-main > .me-panel:nth-of-type(5n+4) { --ms: var(--sky); }
.pop .pg-main > .me-panel:nth-of-type(5n) { --ms: var(--purple); }
.pop .pg-toi .chip.on { background: var(--pink-d); color: #fff; border-color: var(--pink-d); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }

/* the result: a band in the skill's colour, a big white score, Nếp's word in a yellow bubble */
.pop .result { --hc: var(--sky); --hd: var(--sky-d); }
.pop .res-doc { --hc: var(--orange); --hd: var(--orange-d); }
.pop .res-viet { --hc: var(--leaf); --hd: var(--leaf-d); }
.pop .res-hero { background: var(--hc); border: 0; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); color: #fff; }
.pop .res-hero .score { font-weight: 800; text-shadow: none; }
.pop .res-hero :is(.score small, .res-sub) { color: #fff; opacity: .95; }
.pop .res-hero .lvl { background: var(--paper); color: var(--ink); border-radius: 14px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .res-hero .lvl small { color: var(--muted); }
.pop .res-say { position: relative; background: var(--bean); color: var(--ink); border-radius: 16px; padding: 10px 14px; font-weight: 700; }
.pop .res-say::before { content: ""; position: absolute; left: 50%; top: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom-color: var(--bean); border-top: 0; }
.pop .result .panel h3 { color: var(--hd); font-weight: 800; font-size: 18px; }
.pop .result .meter i { background: var(--leaf); }
.pop .result .meter.weak i { background: var(--wrong); }
.pop .weak-say { background: var(--wrong-soft); border-radius: 14px; padding: 10px 14px; font-weight: 600; }
@media (max-width: 640px) {
  .pop .home.wide .ex-card { gap: 10px; padding: 12px; }
  .pop .home.wide .ex-no { width: 44px; height: 44px; font-size: 17px; border-radius: 14px; }
  .pop .home.wide .ex-card .btn { padding: 9px 14px; }
}

/* ---------- the flows: survey, plan, new words, questions, the call ---------- */
/* survey: a light blue page, Nếp talking from the left, big choice cards with a drawn icon each */
.pop body:has(> #app > .survey) { background: var(--bg); }
.pop .sv-prog { height: 16px; background: var(--paper); }
.pop :is(.sv-prog, .pr-prog) i { position: relative; background: var(--orange); }
.pop :is(.sv-prog, .pr-prog) i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .4); }
.pop .sv-back, .pop .sv-skip { color: var(--sky-d); font-weight: 800; }
.pop .sv-head { display: flex; align-items: flex-end; gap: 4px; margin: 14px 0 4px; text-align: left; }
.pop .sv-head .sv-nep { flex: none; width: 112px; height: 112px; margin: 0 0 -4px -10px; }
.pop .sv-bub { position: relative; flex: 1; min-width: 0; margin-bottom: 22px; padding: 12px 16px; background: var(--paper); border: var(--edge); border-radius: 20px; box-shadow: var(--pop); }
.pop .sv-bub::before { content: ""; position: absolute; left: -10px; bottom: 16px; width: 16px; height: 16px; background: var(--paper); border-left: var(--edge); border-bottom: var(--edge); border-radius: 0 0 0 4px; transform: rotate(45deg); }
.pop .sv-bub .sv-q { margin: 0; font-size: 20px; }
.pop .sv-bub .sv-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.pop .sv-bub .sv-say { display: block; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: 19px; font-weight: 800; color: var(--leaf-d); }
.pop .sv-bub:has(.sv-say) :is(.sv-q, .sv-sub) { display: none; }
.pop .sv-opts { gap: 12px; }
.pop .sv-opt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--paper); text-align: left; transition: transform .1s, box-shadow .1s; }
.pop .sv-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.pop .sv-opt b { font-size: 17px; font-weight: 800; }
.pop .sv-opts.grid .sv-opt { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 10px; text-align: center; }
.pop .sv-t { min-width: 0; }
.pop .sv-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--ic); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.pop .sv-ic.c0 { --ic: var(--sky); --icd: var(--sky-d); }
.pop .sv-ic.c1 { --ic: var(--orange); --icd: var(--orange-d); }
.pop .sv-ic.c2 { --ic: var(--leaf); --icd: var(--leaf-d); }
.pop .sv-ic.c3 { --ic: var(--purple); --icd: var(--purple-d); }
.pop .sv-ic.c4 { --ic: var(--pink); --icd: var(--pink-d); }
.pop .sv-opt.on b { color: var(--sky-d); }
.pop .sv-name input { padding: 16px; font-size: 20px; font-weight: 700; }
.pop .survey .btn.big { width: 100%; padding: 14px; font-size: 17px; }
.pop .sv-word { font-size: 52px; }
/* answers that are marked: right green, wrong red */
.pop :is(.lw-opts, .sv-check) .sv-opt.on { background: var(--leaf-soft); border-color: var(--leaf); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop :is(.lw-opts, .sv-check) .sv-opt.on b { color: var(--leaf-d); }
.pop .sv-opts .sv-opt.wrong, .pop .lw-opts .sv-opt.wrong { background: var(--wrong-soft); border-color: var(--wrong); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-opt.wrong b { color: var(--wrong-d); }

/* Nếp writing the plan: numbered lines in colour, ticked one by one */
.pop :is(.building, .ready) > .sv-nep { width: 150px; height: 150px; }
.pop .sv-build { counter-reset: b; }
.pop .sv-build li { counter-increment: b; justify-content: flex-start; gap: 12px; padding: 10px 12px; font-weight: 700; box-shadow: var(--pop); opacity: .45; transform: scale(.96); transition: opacity .3s, transform .3s; }
.pop .sv-build li > span { flex: 1; }
.pop .sv-build li::before { content: counter(b); display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--ink3); color: var(--card); font-weight: 800; }
.pop .sv-build li.ok { opacity: 1; transform: none; }
.pop .sv-build li.ok:nth-child(5n+1)::before { background: var(--sky); }
.pop .sv-build li.ok:nth-child(5n+2)::before { background: var(--orange); }
.pop .sv-build li.ok:nth-child(5n+3)::before { background: var(--purple); }
.pop .sv-build li.ok:nth-child(5n+4)::before { background: var(--pink); }
.pop .sv-build li.ok:nth-child(5n)::before { background: var(--leaf); }
.pop .sv-build li.ok i { border-radius: 50%; animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }

/* the plan ready: the goal on an orange card, today's tasks and the milestones as numbered cards */
.pop .ready .sv-q { font-size: 26px; color: var(--leaf-d); }
.pop .sv-plan { padding: 14px 16px; background: var(--orange); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .ready > .sv-say { display: block; max-width: none; margin: 14px 0; text-align: left; }
.pop .sv-h { font-size: 19px; font-weight: 800; }
.pop .sv-tasks { list-style: none; padding: 0; counter-reset: t; gap: 10px; }
.pop .sv-tasks li { counter-increment: t; position: relative; min-height: 62px; padding: 11px 14px 11px 64px; background: var(--paper); border: var(--edge); border-radius: 18px; box-shadow: var(--pop); }
.pop .sv-tasks li::before { content: counter(t); position: absolute; left: 12px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border-radius: 12px; background: var(--sky); color: #fff; font-weight: 800; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-tasks li:nth-child(4n+2)::before { background: var(--orange); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-tasks li:nth-child(4n+3)::before { background: var(--purple); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-tasks li:nth-child(4n)::before { background: var(--pink); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-miles li::before { background: var(--leaf); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .sv-tasks b { font-weight: 800; }
.pop .ready #svGo { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2; width: 100%; padding: 15px; font-size: 18px; }

/* new words: a big word card, a round play button, the meaning on yellow */
.pop .bar .pr-prog { height: 14px; margin-bottom: 10px; }
.pop .lw-card { gap: 10px; border-color: var(--line); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .lw-card .kw, .pop .lw-q .kw { display: block; padding: 0; background: none; font: 800 52px/1.2 var(--kr-sans); color: var(--ink); text-align: center; }
.pop .lw-card .pos { align-self: center; padding: 2px 12px; background: var(--sky-soft); color: var(--sky-d); border-radius: 10px; font-weight: 800; }
.pop .lw-say { align-self: center; padding: 10px 22px; border-radius: 999px; background: var(--sky); border-color: var(--sky); color: #fff; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .lw-say:hover { background: var(--acc-press); border-color: var(--sky); }
.pop .lw-card .vi { padding: 10px 14px; background: var(--bean-soft); border-radius: 14px; font-size: 18px; font-weight: 700; }
.pop .lw-ask { color: var(--ink); font-size: 18px; font-weight: 800; }
.pop .lw-opts { gap: 12px; }
.pop .fc-actions .btn.big { padding: 14px; font-size: 17px; }

/* questions: answers as cards, a big Kiểm tra on a bar that sticks to the foot, the strip green or red after it */
.pop .practice .opt { margin-bottom: 8px; padding: 9px 12px; background: var(--paper); border: var(--edge); border-radius: 14px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .practice .opt.sel { background: var(--sky-soft); border-color: var(--sky); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .practice .opt.sel .num { background: var(--sky); border-color: var(--sky); }
.pop .practice .opt.right { background: var(--leaf-soft); border-color: var(--leaf); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .practice .opt.wrong { background: var(--wrong-soft); border-color: var(--wrong); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .practice .sample .opt { margin: 0; padding: 3px 8px; background: none; border: 0; box-shadow: none; }
.pop .paper.practice .pr-act { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 14px; padding: 12px; background: var(--paper); border: var(--edge); border-radius: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.pop .pr-act .btn { flex: 1 0 100%; padding: 13px; font: 800 17px var(--ui); }
.pop .pr-act .fb { padding: 0 2px; background: none; }
.pop .pr-act:has(.fb.ok) { background: var(--leaf-soft); border-color: var(--leaf); }
.pop .pr-act:has(.fb.no) { background: var(--wrong-soft); border-color: var(--wrong); }
.pop .pr-act:has(.fb.no) .btn.primary { background: var(--wrong); border-color: var(--wrong); box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .4); }
.pop .wlayout:has(.pr-act) ~ .coach { bottom: 104px; }
.pop .wlayout:has(.fb) ~ .coach { display: none; }

/* the call: Nếp's green, a light disc behind Nếp, solid round buttons on ledges, white cards */
.pop .lc { background: var(--leaf); color: #fff; }
.pop :is(.lc-blur, .lc-blob) { display: none; }
.pop .lc-bg::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: -16vh; height: 40vh; border-radius: 50% 50% 0 0; background: var(--leaf-d); opacity: .45; }
.pop .lc-name { font-size: 32px; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.pop .lc-status { opacity: 1; font-weight: 700; }
.pop .lc-topic { opacity: 1; margin-top: 4px; padding: 2px 12px; background: var(--leaf-d); border-radius: 10px; font-weight: 700; }
.pop .lc-stage::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--acc); }
.pop .lc-wave { border-color: #fff; background: rgba(255, 255, 255, .16); }
.pop .lc[data-state="listen"] .lc-wave:first-child { border-color: var(--bean); }
.pop .lc[data-state="talk"] .lc-stage::after { opacity: .95; font-weight: 700; }
.pop :is(.lc-card, .lc-cc, .lc-end, .lc-type input) { background: var(--paper); color: var(--ink); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .lc-btn { color: #fff; font-weight: 800; }
.pop .lc-btn svg { background: var(--paper); color: var(--leaf-d); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); transition: transform .1s, box-shadow .1s; }
.pop .lc-btn.on svg { background: var(--bean); color: var(--ink); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .lc-btn.off svg { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .lc-btn.hang svg { background: var(--wrong); color: #fff; box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .55); }
.pop .lc-btn:active svg { transform: translateY(4px); box-shadow: none; }
.pop .lc-end h2 { color: var(--leaf-d); font-weight: 800; }
.pop .lc-fixes li { background: var(--leaf-soft); }
.pop .lc-fixes b { color: var(--leaf-d); }
@media (max-width: 560px) { .pop .lc-stage::before { width: 180px; height: 180px; } }

/* ---------- "Mầm" shapes and details, over the rules above ---------- */.pop body { background: var(--bg); }

/* headings in a rounded face */
html.pop :is(.sec, .logo b, .rd-hi b, .rd-sh-head b, .pg-head h2, .rv-hero-body b, .rv-game b, .rv-tile b, .fb b, .res-hero h2, .call-hero h2, .sv-q) {
  font-family: Nunito, var(--ui); font-weight: 900; letter-spacing: -.01em; }
html.pop .logo b { color: var(--leaf); }

/* ---------- buttons: a leaf, soft shadow, a small squash when pressed ---------- */
html.pop .btn { border: 2px solid var(--line); border-radius: var(--leafy); background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 12px -6px rgba(70, 58, 30, .35); transition: transform .12s, box-shadow .12s, background .12s; }
html.pop .btn:hover { background: var(--fill); border-color: var(--line); }
html.pop .btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 4px -2px rgba(70, 58, 30, .35); }
html.pop .btn.primary { background: var(--leaf); border-color: var(--leaf); color: #fff; box-shadow: 0 8px 16px -8px rgba(70, 58, 30, .8); }
html.pop .btn.primary:hover { background: var(--acc-press); }
html.pop .btn.primary:active { box-shadow: 0 2px 6px -2px rgba(70, 58, 30, .6); }
html.pop .btn.small { border-radius: 14px 5px 14px 5px; box-shadow: 0 3px 8px -4px rgba(70, 58, 30, .35); }
html.pop .btn.primary.small { box-shadow: 0 4px 10px -5px rgba(70, 58, 30, .7); }
html.pop .chip, html.pop .account { border: 2px solid var(--line); border-radius: 14px 5px 14px 5px; box-shadow: none; }
html.pop .chip.on { background: var(--leaf-soft); color: var(--leaf-d); border-color: var(--leaf); box-shadow: none; }
html.pop .tab.on, html.pop .skill.on { box-shadow: none; }

/* cards: white, a light leaf rim, a soft shadow */
html.pop :is(button.feat, .mini, .sp-set, .task, .rv-hero, .rv-tile):active { transform: translateY(2px) scale(.99); box-shadow: 0 2px 6px -3px rgba(70, 58, 30, .35); }

/* ---------- the bottom bar ---------- */
html.pop .navbar { background: var(--paper); border-top: 0; box-shadow: 0 -6px 18px -10px rgba(70, 58, 30, .35); }
html.pop .nb svg { border-radius: 14px 5px 14px 5px; }
html.pop .nb.on svg { background: var(--cs); border-color: transparent; }
html.pop .nb-nep img { background: var(--leaf-soft); border: 3px solid var(--paper); box-shadow: 0 6px 14px -6px rgba(70, 58, 30, .6); }
html.pop .nb-nep.on img { background: var(--leaf-hi); box-shadow: 0 6px 14px -6px rgba(70, 58, 30, .6), 0 0 0 3px var(--leaf); }

/* the sprout before every section title */
html.pop .sec::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: 0 6px -3px 0; background: var(--sprout) center / contain no-repeat; }

/* ---------- home map ---------- */
html.pop .rd-hi b { color: var(--ink); }
html.pop .rd-stat { border-radius: 14px 5px 14px 5px; }
html.pop .rd-stat.fire { color: var(--honey-ink); background: var(--bean-soft); }
html.pop .rd-stat.fire.off { color: var(--ink2); background: var(--fill); }
html.pop .rd-stat.grain { color: var(--honey-ink); background: var(--bean-soft); }
html.pop .rd-nudge { color: #7A5300; background: var(--bean-soft); border-radius: 14px 5px 14px 5px; }
html.pop .rd-say { color: var(--ink); border-radius: 16px 6px 16px 6px; box-shadow: 0 6px 14px -6px rgba(60, 48, 24, .6); }
html.pop .rd-sheet-bg { background: rgba(16, 40, 24, .5); }
html.pop .rd-sheet { background: var(--bg); border-radius: 28px 28px 0 0; }
html.pop .rd-grip { background: #B9D1AD; }
html.pop .rd-sh-head { position: relative; background: var(--leaf); box-shadow: 0 10px 20px -12px rgba(70, 58, 30, .9); border-radius: 26px 8px 26px 8px; }
html.pop .rd-sh-head::after { content: ""; position: absolute; right: 12px; top: 10px; width: 26px; height: 26px; background: var(--sprout) center / contain no-repeat; filter: brightness(0) invert(1); opacity: .35; }
html.pop .rd-sh-head small { opacity: 1; color: #fff; }
html.pop .rd-more { color: var(--muted); }
html.pop .rd-sheet .tasks, html.pop .tasks, html.pop .list { background: transparent; padding: 0; }
html.pop .task { border: 0; border-radius: 18px; box-shadow: 0 6px 16px -10px rgba(70, 58, 30, .5); }
html.pop .task em { color: var(--leaf); }
html.pop .tk-box { border: 2px solid var(--line); border-radius: 12px 4px 12px 4px; }
html.pop .task.done .tk-box { background: var(--leaf); border-color: var(--leaf); }

/* ---------- practice question ---------- */
html.pop .bar { background: rgba(255, 255, 255, .97); border-bottom: 0; box-shadow: 0 6px 16px -12px rgba(70, 58, 30, .5); }
html.pop :is(.pr-prog, .sv-prog, .meter) { height: 14px; background: var(--fill); overflow: visible; }
html.pop :is(.pr-prog, .sv-prog) i { position: relative; background: var(--leaf-hi); min-width: 22px; }
html.pop :is(.pr-prog, .sv-prog) i::after { left: auto; right: -6px; top: -9px; width: 24px; height: 24px; border-radius: 0; background: var(--sprout) center / contain no-repeat; }
html.pop .paper { border-radius: 22px; box-shadow: 0 6px 18px -10px rgba(70, 58, 30, .4); }
html.pop .paper-head { border-bottom-color: var(--leaf); }
html.pop .practice .opt { border: 2px solid var(--line); border-radius: 18px 6px 18px 6px; box-shadow: none; }
html.pop .practice .opt.sel { background: var(--leaf-soft); border-color: var(--leaf); box-shadow: none; }
html.pop .practice .opt.sel .num { background: var(--leaf); border-color: var(--leaf); color: #fff; }
html.pop .practice .opt.right { background: var(--leaf-soft); border-color: var(--leaf); box-shadow: none; }
html.pop .practice .opt.wrong { background: var(--wrong-soft); border-color: var(--wrong); box-shadow: none; }
html.pop .why { background: var(--bean-soft); }
html.pop .why b { color: var(--leaf-d); }
html.pop .trans summary { background: var(--leaf-soft); color: var(--leaf-d); border: 0; border-radius: 12px 4px 12px 4px; }
html.pop .paper.practice .pr-act { border: 0; border-radius: 24px 8px 24px 8px; box-shadow: 0 10px 26px -10px rgba(70, 58, 30, .45); }
html.pop .pr-act:has(.fb.ok) { background: var(--leaf-soft); }
html.pop .pr-act:has(.fb.no) { background: var(--wrong-soft); }
html.pop .fb.no { color: var(--wrong-d); }
html.pop .fb.ok { color: var(--leaf-d); }
html.pop .pr-act:has(.fb.no) .btn.primary { background: var(--wrong); border-color: var(--wrong); box-shadow: 0 8px 16px -8px rgba(160, 45, 33, .8); }
html.pop .coach-say { border: 0; border-radius: 16px 16px 16px 4px; box-shadow: 0 6px 14px -8px rgba(70, 58, 30, .5); }

/* ---------- page heads and the review page ---------- */
html.pop .pg-head { background: var(--hc, var(--leaf)); box-shadow: 0 10px 22px -14px rgba(70, 58, 30, .9); border-radius: 28px 10px 28px 10px; }
html.pop .pg-head h2 { text-shadow: none; }
html.pop .pg-head-say { color: var(--ink); }
html.pop .pg-on .sec { color: var(--purple-d); }
html.pop .rv-hero { background: var(--purple); box-shadow: 0 10px 22px -14px rgba(60, 30, 110, .9); border-radius: 26px 8px 26px 8px; }
html.pop .rv-hero-body .btn.primary { background: var(--paper); color: var(--purple-d); border-color: var(--paper); box-shadow: 0 6px 14px -8px rgba(30, 10, 60, .7); }
html.pop .rv-game { background: var(--sky); box-shadow: 0 10px 22px -14px rgba(20, 60, 110, .9); border-radius: 26px 8px 26px 8px; }
html.pop .rv-game.bn-go { background: var(--pink); box-shadow: 0 10px 22px -14px rgba(120, 30, 50, .9); }
html.pop .rv-game:active { transform: translateY(2px) scale(.99); }
html.pop .rv-tile { border-radius: 26px 8px 26px 8px; }
html.pop .rv-tile.c-sky { background: var(--sky); box-shadow: 0 10px 22px -14px rgba(20, 60, 110, .9); }
html.pop .rv-tile.c-leaf { background: var(--leaf); box-shadow: 0 10px 22px -14px rgba(70, 58, 30, .9); }
html.pop .rv-tile.c-coral { background: var(--orange-d); box-shadow: 0 10px 22px -14px rgba(120, 50, 20, .9); }
html.pop .rv-tile img { background: rgba(255, 255, 255, .92); }
html.pop .rv-word { background: var(--paper); border: 2px solid var(--line); border-radius: 14px 5px 14px 5px; }
html.pop .pg-on .rv-acts .btn.primary { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 8px 16px -8px rgba(70, 58, 30, .8); }

/* ---------- calm: white cards with ink text, one green, honey for rewards; Nếp only where he works ---------- */
html.pop .topbar { background: var(--paper); border-bottom: 0; box-shadow: 0 6px 16px -10px rgba(70, 58, 30, .45); }
html.pop .topbar .rd-hi b { font-family: Nunito, var(--ui); font-weight: 900; font-size: 19px; color: var(--ink); }
html.pop .rd-stat { min-height: 36px; }
html.pop .nb svg { color: var(--muted); }
html.pop .nb.on svg { color: var(--leaf-d); background: var(--leaf-soft); }
html.pop .nb.on { color: var(--leaf-d); }
html.pop .nb-nep img { background: var(--leaf-soft); border: 0; box-shadow: none; }
html.pop .nb-nep.on img { background: var(--leaf-soft); box-shadow: 0 0 0 2px var(--leaf); }
@media (min-width: 1000px) { html.pop .nt svg { color: var(--muted); } html.pop .nt.on svg { color: var(--leaf-d); } }
html.pop .pg-head { background: none; box-shadow: none; border-radius: 0; }
html.pop .pg-head h2 { color: var(--ink); }
html.pop .pg-head-say { color: var(--muted); }
html.pop :is(.pg-thi, .pg-on, .pg-toi, .pg-nep) .sec { color: var(--ink); }
/* the tests page: three white cards, the count in a green tag */
html.pop .feat.big[data-pick] { background: var(--paper); border: 2px solid var(--line); color: var(--ink); box-shadow: var(--pop); }
html.pop .feat.big[data-pick] :is(b, small) { color: var(--ink); }
html.pop .feat.big[data-pick] small { color: var(--muted); opacity: 1; }
html.pop .feat.big[data-pick] em { color: var(--leaf-d); background: var(--leaf-soft); }
html.pop .feat.big[data-pick] img, html.pop :is(.mini, .rv-tile, .rv-game) > img { display: none; }
html.pop .feat.big[data-pick] { padding: 16px; text-align: left; align-items: stretch; justify-content: flex-start; }
html.pop .weak-tag { color: var(--honey-ink); background: var(--bean-soft); }
html.pop .mini:nth-child(n), html.pop .pg-thi .mini:nth-child(n) { background: var(--paper); border: 2px solid var(--line); color: var(--ink); box-shadow: var(--pop); padding: 14px; }
html.pop .pg-thi .mini small { color: var(--muted); opacity: 1; }
/* review: one green hero, the rest white */
html.pop :is(.rv-game, .rv-game.bn-go, .rv-tile, .rv-tile.c-sky, .rv-tile.c-leaf, .rv-tile.c-coral) { background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: var(--pop); }
html.pop :is(.rv-game, .rv-tile) small { color: var(--muted); opacity: 1; }
html.pop .rv-game { padding: 12px 16px; min-height: 64px; }
html.pop .rv-tile { padding: 14px 18px; min-height: 64px; }
html.pop .rv-tile i { color: var(--leaf); }
html.pop .rv-game svg path[stroke="#fff"] { stroke: var(--line); stroke-opacity: 1; }
html.pop .rv-word { background: var(--paper); border-color: var(--line); }
/* me: plain titles on the panels */
html.pop .me-panel[data-win]::before { margin: 0 0 10px; padding: 0; background: none; color: var(--ink); font-size: 18px; font-weight: 800; }
html.pop .pg-toi .chip.on, html.pop .pg-nep .chip.on { background: var(--leaf-soft); color: var(--leaf-d); border-color: var(--leaf); }
/* the shop: leaf corners, Nunito numbers */
html.pop :is(.sh-tab, .sh-it, .pet-acts .btn, .sh-act .btn) { border-radius: var(--leafy); }
html.pop .sh-top h2, html.pop .sh-have b, html.pop .sh-it small { font-family: Nunito, var(--ui); }
html.pop .sh-it.on small { color: var(--leaf-d); }
html.pop .today-big b { color: var(--leaf-d); }
/* the call: the button in the leading green */
html.pop .call-hero-body .btn.primary { background: var(--leaf); border-color: var(--leaf); }
html.pop .rd-sh-head { background: var(--leaf); }
html.pop .rd-resume { background: var(--leaf); }
html.pop .lp-say { background: var(--leaf); }
html.pop .lw-say { background: var(--leaf); border-color: var(--leaf); color: #fff; }
html.pop .lw-say:hover { background: var(--acc-press); border-color: var(--leaf); }

/* letters shown before the first stone game */
.hg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.hg-card { min-height: 84px; display: grid; place-items: center; align-content: center; gap: 2px; background: var(--paper); border: var(--edge); border-radius: var(--leafy); color: var(--ink); cursor: pointer; }
.hg-card b { font-size: 34px; line-height: 1.1; }
.hg-card small { font-size: 16px; color: var(--muted); font-weight: 800; }

/* ---------- dark: <html data-theme="dark">, set from the phone or the Tôi page switch ---------- */


/* the light colours written into rules above, turned into the dark tokens */
html.pop[data-theme="dark"] .tag { color: var(--bean-d); }
  html.pop[data-theme="dark"] .tabs { background: var(--line); }
  html.pop[data-theme="dark"] .ex-last { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .ex-last.doing { color: var(--bean-d); }
  html.pop[data-theme="dark"] .bar { background: rgba(28, 31, 27, 0.97); }
  html.pop[data-theme="dark"] .overlay.soft { background: rgba(28, 31, 27, 0.94); }
  html.pop[data-theme="dark"] .lvl { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .lvl small { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .box.note { color: var(--bean-d); }
  html.pop[data-theme="dark"] .q.ok .mark { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .q.skip .mark { color: var(--bean-d); }
  html.pop[data-theme="dark"] .why b { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .imgtext { color: var(--muted); }
  html.pop[data-theme="dark"] .hv { color: var(--bean-d); }
  html.pop[data-theme="dark"] .optimg { background: var(--paper); }
  html.pop[data-theme="dark"] .script summary { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .blank-in input, html.pop[data-theme="dark"] .w-input textarea { background: var(--paper); }
  html.pop[data-theme="dark"] .rubric { color: var(--muted); }
  html.pop[data-theme="dark"] .good { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .selfscore { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .pen-sheet { background: var(--paper); }
  html.pop[data-theme="dark"] .pen-img { background: var(--paper); }
  html.pop[data-theme="dark"] .thumbs img { background: var(--paper); }
  html.pop[data-theme="dark"] .loop b { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .li:hover { background: var(--paper); }
  html.pop[data-theme="dark"] .feat.big em { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .tag-mode { color: var(--bean-d); }
  html.pop[data-theme="dark"] .timer.up { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .warn-box { color: var(--bean-d) !important; }
  html.pop[data-theme="dark"] .trans summary { color: var(--leaf-d); background: var(--paper); }
  html.pop[data-theme="dark"] .trans p { background: var(--paper); }
  html.pop[data-theme="dark"] .sp-hook { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .sp-pron .kr { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .sp-dot { background: var(--paper); }
  html.pop[data-theme="dark"] .sw.good { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .sw.ok { color: var(--bean-d); }
  html.pop[data-theme="dark"] .sp-bar div { background: var(--line); }
  html.pop[data-theme="dark"] .sv-prog { background: var(--line); }
  html.pop[data-theme="dark"] .sv-score input { background: var(--paper); }
  html.pop[data-theme="dark"] .lc { color: var(--ink); }
  html.pop[data-theme="dark"] .lc-blob.a { background: var(--line); }
  html.pop[data-theme="dark"] .lc-blob.b { background: var(--wrong-soft); }
  html.pop[data-theme="dark"] .lc-blob.c { background: var(--bean-soft); }
  html.pop[data-theme="dark"] .lc-card, html.pop[data-theme="dark"] .lc-cc, html.pop[data-theme="dark"] .lc-end, html.pop[data-theme="dark"] .lc-type input, html.pop[data-theme="dark"] .lc-btn svg { background: rgba(28, 31, 27, 0.55); }
  html.pop[data-theme="dark"] .lc-card s { color: var(--wrong-d); }
  html.pop[data-theme="dark"] .lc-btn.on svg { background: rgba(28, 31, 27, 0.92); }
  html.pop[data-theme="dark"] .lc-fixes li { background: rgba(28, 31, 27, 0.7); }
  html.pop[data-theme="dark"] .lc-fixes s { color: var(--wrong-d); }
  html.pop[data-theme="dark"] .lc-fixes b { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .lw-opts .sv-opt.wrong { background: var(--paper); }
  html.pop[data-theme="dark"] .rd-hi b { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .rd-stat.fire { color: var(--bean-d); background: var(--bean-soft); }
  html.pop[data-theme="dark"] .rd-stat.grain { color: var(--bean-d); background: var(--bean-soft); }
  html.pop[data-theme="dark"] .rd-say { color: var(--leaf-d); background: var(--paper); }
  html.pop[data-theme="dark"] .toast { color: var(--bg); }
  html.pop[data-theme="dark"] .res-say { color: var(--bg); }   /* light ink on honey could not be read */
  html.pop[data-theme="dark"] .rd-say::after { border-top-color: var(--line); }
  html.pop[data-theme="dark"] .rd-sheet { background: var(--paper); }
  html.pop[data-theme="dark"] .rd-grip { background: var(--line); }
  html.pop[data-theme="dark"] .fb i { background: var(--paper); }
  html.pop[data-theme="dark"] .st-prog { background: var(--line); }
  html.pop[data-theme="dark"] .st-splash i { background: var(--paper); }
  html.pop[data-theme="dark"] .st-splash b { border: 3px solid var(--line); }
  html.pop[data-theme="dark"] .st-q { border: 2px solid var(--line); }
  html.pop[data-theme="dark"] .st-fix { color: var(--wrong-d); }
  html.pop[data-theme="dark"] .st-opt { border: 2px solid var(--line); }
  html.pop[data-theme="dark"] .st-tile { border: 2px solid var(--line); }
  html.pop[data-theme="dark"] .st-opt.right { background: var(--line); color: var(--leaf-d); }
  html.pop[data-theme="dark"] .st-opt.wrong { background: var(--leaf-soft); color: var(--wrong-d); }
  html.pop[data-theme="dark"] .st-lose { border: 2px solid var(--line); }
  html.pop[data-theme="dark"] .st-lose b { color: var(--wrong-d); }
  html.pop[data-theme="dark"] .rd-stat.fire.off { color: var(--leaf-d); background: var(--paper); }
  html.pop[data-theme="dark"] .rd-nudge { color: var(--bean-d); background: var(--bean-soft); }
  html.pop[data-theme="dark"] .gr-pill { color: var(--bean-d); background: var(--bean-soft); }
  html.pop[data-theme="dark"] .bn-count { color: var(--wrong-d); }
  html.pop[data-theme="dark"] .bn-scene { background: var(--line); }
  html.pop[data-theme="dark"] .bn-say { color: var(--leaf-d); background: var(--paper); }
  html.pop[data-theme="dark"] .bn-note { color: var(--leaf-d); background: var(--line); }
  html.pop[data-theme="dark"] .bn-mic[disabled] { background: var(--line); }
  html.pop[data-theme="dark"] .nr-say { color: var(--leaf-d); background: var(--paper); }
  html.pop[data-theme="dark"] .lp-step { border: 2px solid var(--line); }
  html.pop[data-theme="dark"] .lp-step h3 { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .lp-goal { background: var(--line); }
  html.pop[data-theme="dark"] .lp-vs { background: var(--bean-soft); }
  html.pop[data-theme="dark"] .lp-line { border-top: 1px solid var(--line); }
  html.pop[data-theme="dark"] .lp-ex { color: var(--leaf-d) !important; }
  html.pop[data-theme="dark"] .lp-text { background: var(--paper); }
  html.pop[data-theme="dark"] .lp-vi summary { color: var(--leaf-d); }
  html.pop[data-theme="dark"] .lp-bub { background: var(--paper); }
  html.pop[data-theme="dark"] .lp-bub.r { background: var(--bean-soft); }
  html.pop[data-theme="dark"] .lp-chip { color: var(--leaf-d); background: var(--bean-soft); }
  html.pop[data-theme="dark"] .lp-task { background: var(--paper); }
html.pop[data-theme="dark"] .lp-rec { border-top-color: var(--line); }
html.pop[data-theme="dark"] .lp-me { border-top: 0; }
html.pop[data-theme="dark"] .lp-me textarea { background: var(--paper); border-color: var(--line); }
html.pop[data-theme="dark"] .lp-mic:not(.on) { color: var(--leaf-d); border-color: var(--leaf-d); }
html.pop[data-theme="dark"] .lp-sc { background: var(--paper); }
html.pop[data-theme="dark"] .lp-sc.good { color: var(--leaf-d); background: color-mix(in srgb, var(--leaf-d) 16%, transparent); }
html.pop[data-theme="dark"] .lp-sc.ok { color: #F2C261; background: rgba(242, 194, 97, .14); }
html.pop[data-theme="dark"] .lp-sc.bad { color: var(--wrong-d); background: color-mix(in srgb, var(--wrong-d) 16%, transparent); }
  html.pop[data-theme="dark"] .lp-cta { background: rgba(28, 31, 27, 0.96); border-top: 2px solid var(--line); }
  html.pop[data-theme="dark"] .mp-stage.rt-skipped { background: var(--paper); }
  html.pop[data-theme="dark"] .rt-les i { background: var(--paper); }
  html.pop[data-theme="dark"] :is(button.feat, html[data-theme="dark"] .feat.big, html[data-theme="dark"] .feat.wide, html[data-theme="dark"] .mini, html[data-theme="dark"] .sp-set, html[data-theme="dark"] .task, html[data-theme="dark"] .ex-card):hover { border-color: var(--line); }
  html.pop[data-theme="dark"] .btn:hover { background: var(--paper); }
  html.pop[data-theme="dark"] .feat.wide em { color: var(--bean-d); }
  html.pop[data-theme="dark"] .mini:nth-child(3n+2) { background: var(--paper); border-color: var(--line); }
  html.pop[data-theme="dark"] .mini:nth-child(3n) { background: var(--paper); }
  html.pop[data-theme="dark"] .sp-mic.on .sp-dot { background: var(--paper); }
  html.pop[data-theme="dark"] .mp-g { background: var(--paper); }
  html.pop[data-theme="dark"] .pg-thi .mini img { background: rgba(28, 31, 27, 0.9); }
  html.pop[data-theme="dark"] .rv-tile img { background: rgba(28, 31, 27, 0.92); }
  html.pop[data-theme="dark"] .rv-word { border-color: var(--line); }
  html.pop[data-theme="dark"] :is(.sv-prog, html[data-theme="dark"] .pr-prog) i::after { background: rgba(28, 31, 27, 0.4); }
  html.pop[data-theme="dark"] .lc-wave { border-color: var(--line); background: rgba(28, 31, 27, 0.16); }
  html.pop[data-theme="dark"] :is(.pr-prog, html[data-theme="dark"] .sv-prog, html[data-theme="dark"] .meter) { background: var(--line); }
  html.pop[data-theme="dark"] .weak-tag { color: var(--bean-d); }
  @media (min-width: 1000px) {
    html.pop[data-theme="dark"] .today-big b { color: var(--leaf-d); }
}
  html.pop[data-theme="dark"] .task em { color: var(--leaf-d); }


/* =====================================================================================================================
   "Nếp mượt" layer: over everything above. Hanji ground, white cards with no rim, Pretendard set heavy and tight,
   clay buttons that sink on touch (feel.js .is-down) and spring back (.is-up), a tab bar of filled icons, the sky.
   ===================================================================================================================== */
html.pop body { background: var(--bg) var(--paper-grain); background-attachment: fixed; color: var(--ink); font-family: var(--font);
  font-feature-settings: 'ss06' 0; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; }
html.pop[data-theme="dark"] body { background-blend-mode: screen; }
html.pop body::before { background: var(--bg); }
html.pop :is(button, input, select, textarea) { font-family: var(--font); }
html.pop :is(button, .btn, .chip, [data-go], [data-nav], [data-pick], [data-rd], [data-task], summary) { touch-action: manipulation; }
html.pop [lang="ko"], html.pop .kw { word-break: keep-all; }
html.pop :is(b, .num, .win-grain b, .rd-stat b, .me-stat b, .slip-stub b, .est b, .rv-n) { font-variant-numeric: tabular-nums; }

/* ---------- type ---------- */
html.pop :is(.sec, .logo b, .rd-hi b, .rd-sh-head b, .pg-head h2, .rv-hero-body b, .rv-game b, .rv-tile b, .fb b, .res-hero h2, .call-hero h2, .sv-q,
  .feat.big b, .feat.wide b, .badge b, .modal h3, .lc-name, .win-title, .topbar .rd-hi b) { font-family: var(--font); letter-spacing: -.025em; }
html.pop .sec { font-size: 19px; line-height: 26px; font-weight: 700; margin: 30px 4px 12px; color: var(--ink); }
html.pop .sec::before { display: none; }
html.pop .sec-n { color: var(--ink2); font-size: 14px; font-weight: 600; }
html.pop .small, html.pop .meta { color: var(--ink2); }
html.pop a { color: var(--acc-ink); }

/* ---------- cards: white, round, no rim, a warm shadow you barely see ---------- */
html.pop :where(.guide, .feat, .mini, .today, .ex-card, .card, .panel, .modal, .omr-card, .sp-set, .sp-card, .idiom, .fcard, .res-hero,
  .task, .goal-card, .call-hero, .course, .list, .search, .mode-opt, .paper, .lp-step, .rv-hero, .rv-game, .rv-tile, .est, .slip, .me-stat, .win-grain, .win-stat) {
  background: var(--card); border: 0; border-radius: var(--r-card); box-shadow: var(--sh-card), inset 0 0 0 1px var(--rim); }
html.pop :where(.panel, .me-panel) { padding: 20px; margin-top: 12px; }
html.pop .me-panel[data-win]::before { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 12px; color: var(--ink); }
html.pop .empty-note { background: transparent; box-shadow: none; border: 1.5px dashed var(--line); border-radius: var(--r-card); color: var(--ink2); }

/* ---------- buttons: clay. Thick, round 18, puffed (light inside the top edge, shade inside the bottom) ---------- */
html.pop .btn { position: relative; min-height: 48px; padding: 10px 18px; border: 0; border-radius: var(--r-btn); background: var(--fill); color: var(--ink);
  font-weight: 700; font-size: 16px; letter-spacing: -.01em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
  transition: scale var(--t-press) var(--ease-out), background-color var(--t-press), box-shadow var(--t-press); }
html.pop .btn:hover { background: var(--fill); border-color: transparent; filter: brightness(.98); }
html.pop .btn.primary { background: var(--acc-btn); color: #fff; box-shadow: var(--sh-btn); }
html.pop .btn.primary:hover { background: var(--acc-btn); filter: brightness(1.04); }
html.pop .btn.primary.is-down, html.pop .btn.primary:active { background: var(--acc-press); box-shadow: var(--sh-btn-down); }
html.pop .btn.big { min-height: 56px; font-size: 17px; border-radius: var(--r-btn); }
html.pop .btn.small { min-height: 44px; padding: 8px 16px; border-radius: var(--r-sm); font-size: 15px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05); }
html.pop .btn.primary.small { box-shadow: var(--sh-btn); }
html.pop .btn.ghost { background: transparent; box-shadow: none; color: var(--ink2); }
html.pop .btn.ghost:hover { background: var(--fill); }
html.pop .btn:disabled, html.pop .btn[disabled] { opacity: .45; filter: none; }
html.pop :is(.btn, .chip, button):focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 55%, transparent); outline-offset: 2px; }
html.pop .chip, html.pop .account { min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r-chip); background: var(--fill); color: var(--ink2);
  font-weight: 700; font-size: 15px; box-shadow: none; }
html.pop .chip.on { background: var(--acc-soft); color: var(--acc-ink); box-shadow: inset 0 0 0 2px var(--acc); border: 0; }
html.pop .pg-toi .chip.on, html.pop .pg-nep .chip.on { background: var(--acc-soft); color: var(--acc-ink); border: 0; }

/* the press itself (feel.js): down at once, a spring on the way up; `scale` so it stacks on any transform */
html.pop .is-down { scale: .96; transition: scale var(--t-press) var(--ease-out), background-color var(--t-press), box-shadow var(--t-press); }
html.pop :is(.task, .opt, .sv-opt, .st-opt, .row, .slip, .rv-game, .rv-tile, .mini, .feat, .ex-card, .sh-it, .li, .lw-opts .sv-opt).is-down { scale: .98; }
html.pop :is(.task, .row, .opt, .sv-opt).is-down { background-color: var(--fill); }
html.pop .is-up { animation: press-up .32s linear; }
@keyframes press-up { 0% { scale: .96; } 30% { scale: 1.014; } 55% { scale: .996; } 78% { scale: 1.003; } 100% { scale: 1; } }
html.pop :is(.btn, .task, button.feat, .mini, .sp-set, .rv-hero, .rv-tile, .rv-game, .rd-resume, .lp-say):active { transform: none; }
@media (prefers-reduced-motion: reduce) { html.pop .is-down { scale: 1; } html.pop .is-up { animation: none; } }

/* ---------- screens: a flow slides in from the right, a tab fades (feel.js) ---------- */
html.pop .fx-push { animation: fx-push var(--t-page) var(--ease-out) backwards; }
html.pop .fx-tab { animation: fx-tab 160ms ease-out backwards; }
@keyframes fx-push { from { opacity: 0; translate: 28px 0; } }
@keyframes fx-tab { from { opacity: 0; translate: 0 6px; } }
html.pop body.fx-thud #app { animation: fx-thud .22s linear; }
@keyframes fx-thud { 25% { translate: 0 2px; } 50% { translate: 0 -1px; } 75% { translate: 0 1px; } }
@media (prefers-reduced-motion: reduce) { html.pop :is(.fx-push, .fx-tab), html.pop body.fx-thud #app { animation: none; } }

/* ---------- the top bar: one line, the page's name or the date, the streak and the grains in white pills ---------- */
html.pop .shell { position: relative; padding-top: 0; }
html.pop .topbar { position: sticky; top: env(safe-area-inset-top); z-index: 30; min-height: 56px; margin: 0 -16px 4px; padding: 6px 16px 6px 20px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0; box-shadow: none; }
html.pop .topbar .rd-hi { display: none; }
html.pop .tb-title { flex: 1; min-width: 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
html.pop .tb-date { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink2); }
html.pop .tb-stats { gap: 8px; }
html.pop .topbar .rd-stat { min-height: 36px; padding: 0 12px 0 8px; gap: 5px; border-radius: var(--r-chip); background: var(--card); color: var(--ink);
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--rim); font-size: 15px; }
html.pop .topbar .rd-stat svg { width: 20px; height: 20px; }
html.pop .topbar .rd-stat small { display: none; }
html.pop .topbar .rd-stat.fire.off { color: var(--ink2); background: var(--card); }
html.pop .shell .topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.pop .shell .topbar.stuck { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (min-width: 1000px) {
  html.pop .topbar { position: static; display: contents; }
  html.pop .topbar .rd-hi { display: flex; grid-area: 1 / 1; margin-bottom: 18px; }
  html.pop .topbar .rd-hi b { font-size: 19px; font-weight: 800; color: var(--ink); }
  html.pop :is(.tb-title, .tb-date) { display: none; }
}
html.pop .pg-head { margin: 8px 4px 14px; }
html.pop .pg-head h2 { font-size: 26px; line-height: 34px; font-weight: 700; }
html.pop .pg-head-say { font-size: 15px; font-weight: 500; color: var(--ink2); }
@media (max-width: 999px) { html.pop :is(.pg-thi, .pg-on, .pg-toi) > .pg-head h2 { display: none; } }

/* ---------- Hôm nay: a sky for the hour, the season falling through it, a hello ---------- */
html.pop .sky { position: fixed; left: 0; right: 0; top: 0; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 260px, color-mix(in srgb, var(--sky-b) 45%, transparent) 480px, transparent 100%); }
/* at night in the light look the deep sky is for the home page; everywhere else a veil of the ground keeps dark ink readable */
html.pop .sky::before { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity .35s; }
html.pop.sky-calm[data-sky="night"]:not([data-theme="dark"]) .sky::before { opacity: .92; }
/* a lesson, a game: the colour of the season, nothing moving */
html.pop :is(.sky-cv, .sky-fall) { transition: opacity .25s; }
html.pop.sky-rest :is(.sky-cv, .sky-fall) { opacity: 0; }
html.pop .shell, html.pop #app { overflow-x: clip; }
html.pop .sky-cv { position: absolute; inset: env(safe-area-inset-top) 0 0; width: 100%; height: calc(100% - env(safe-area-inset-top)); }
/* the sky runs on up under the status bar on every tab; once the page scrolls, the stuck top bar reaches up over it
   (a lesson, a game, the shop keep the plain strip) */
html.pop:not(.sky-rest) body::before { background: transparent; }
html.pop .shell .topbar.stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: env(safe-area-inset-top);
  background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; pointer-events: none; }
html.pop .sky.live .sky-fall { display: none; }
/* words that lie straight on the sky */
html.pop .rv-how { color: var(--ink); }
html.pop[data-theme="dark"] .tb-date { color: var(--ink); }
html.pop .empty-note { background: color-mix(in srgb, var(--card) 72%, transparent); }
html.pop .hi { margin: 6px 4px 14px; font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
html.pop[data-sky="night"] .hi, html.pop[data-theme="dark"] .hi { color: var(--ink); }
html.pop[data-sky="night"]:not([data-theme="dark"]) .hi { color: #FFF8EE; text-shadow: 0 1px 10px rgba(30, 20, 40, .55); }
/* once the bar is stuck it has the ground behind it (from 8 px of scroll, the sky calms only at 160): the date keeps its ink */
html.pop[data-sky="night"]:not([data-theme="dark"]):not(.sky-calm) .topbar:not(.stuck) .tb-date { color: rgba(255, 248, 238, .86); }
/* the five first things (onboard.js) push the line down past the sky onto the ground: there it keeps its ink */
html.pop[data-sky="night"]:not([data-theme="dark"]):not(.sky-calm) .shell:not(:has(.ob-card)) .mt-head b { color: #FFF8EE; }
@media (min-width: 1000px) {
  html.pop .hi { grid-column: 2; grid-row: 2; margin-top: 0; }
  html.pop .shell:has(.hi) .navtabs { grid-row: 2 / span 2; }
  html.pop .shell:has(.hi) .pg { grid-row: 3; }
}
.sky-fall i { position: absolute; top: -30px; left: var(--x); width: calc(18px * var(--s)); height: calc(18px * var(--s)); background: var(--c);
  will-change: transform; animation: sky-fall var(--t) linear var(--d) infinite; }
.sky-fall i:nth-child(even) { animation-name: sky-fall2; }
[data-fall="autumn"] .sky-fall i { -webkit-mask: var(--m-maple) center / contain no-repeat; mask: var(--m-maple) center / contain no-repeat; }
[data-fall="spring"] .sky-fall i { -webkit-mask: var(--m-petal) center / contain no-repeat; mask: var(--m-petal) center / contain no-repeat; width: calc(13px * var(--s)); height: calc(13px * var(--s)); }
[data-fall="summer"] .sky-fall i { -webkit-mask: var(--m-leaf) center / contain no-repeat; mask: var(--m-leaf) center / contain no-repeat; opacity: .8; }
[data-fall="winter"] .sky-fall i { width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 50%; box-shadow: 0 0 6px rgba(120, 150, 190, .5); }
[data-fall="firefly"] .sky-fall i { top: auto; bottom: 10%; width: 6px; height: 6px; border-radius: 50%; background: #F7F3A0; box-shadow: 0 0 10px 3px rgba(240, 240, 140, .55);
  animation-name: sky-fly; }
html.pop { --m-maple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.6 4.2 3-1.6-.6 4 4.2-.6-2 3 3.3 2-4.2 1.3.8 2.6-3.4-.9-.7 4.3h-.4l-.7-4.3-3.4.9.8-2.6L3.5 13l3.3-2-2-3 4.2.6-.6-4 3 1.6z'/%3E%3C/svg%3E");
  --m-petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6 18 3 12 6 6c2-3 4-3 6 0 2-3 4-3 6 0 3 6 0 12-6 16z'/%3E%3C/svg%3E");
  --m-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 9 10 4 21 3c0 11-6 17-17 17z'/%3E%3C/svg%3E"); }
@keyframes sky-fall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate3d(26px, 170px, 0) rotate(180deg); }
  88% { opacity: 1; } 100% { transform: translate3d(-8px, 360px, 0) rotate(330deg); opacity: 0; } }
@keyframes sky-fall2 { 0% { transform: translate3d(0, 0, 0) rotate(20deg); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate3d(-24px, 160px, 0) rotate(-120deg); }
  88% { opacity: 1; } 100% { transform: translate3d(12px, 360px, 0) rotate(-250deg); opacity: 0; } }
@keyframes sky-fly { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate3d(18px, -90px, 0); opacity: .6; }
  80% { opacity: 1; transform: translate3d(-12px, -150px, 0); } }
/* reduced motion: slower, never frozen */
@media (prefers-reduced-motion: reduce) { .sky-fall i { animation-duration: calc(var(--t) * 2.4); } }

/* the season tints the ground a little: warm in autumn, pink in spring, fresh in summer, cool in winter */
html.pop[data-season="autumn"]:not([data-theme="dark"]) { --bg: #F6F0E4; --season-a: #EFA52B; --season-b: #D9573A; }
html.pop[data-season="spring"]:not([data-theme="dark"]) { --bg: #F6F1EE; --season-a: #F7B8C9; --season-b: #F28AA6; }
html.pop[data-season="summer"]:not([data-theme="dark"]) { --bg: #F2F3EA; --season-a: #7CC46B; --season-b: #4FAE5C; }
html.pop[data-season="winter"]:not([data-theme="dark"]) { --bg: #F1F2EF; --season-a: #DCE8F4; --season-b: #B9CBE0; }
html.pop .tb-date::after { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 0 1px 8px; border-radius: 50%; background: var(--season-b); vertical-align: middle; }

/* ---------- the tab bar: 58 high over the Home bar, frosted, filled icons, Nếp in the middle ---------- */
@media (max-width: 760px) {
  html.pop .navbar { height: calc(58px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--line); box-shadow: none; }
  html.pop .nb { min-height: 58px; gap: 3px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink3); justify-content: center; }
  html.pop .nb svg { width: 25px; height: 25px; padding: 0; border-radius: 0; background: none !important; color: var(--ink3); }
  html.pop .nb.on { color: var(--ink); }
  html.pop .nb.on svg { color: var(--acc); }
  html.pop .nb-nep img, html.pop .nb-nep canvas, html.pop .nb-nep .nd { width: 34px; height: 30px; margin: -2px 0 -1px; background: none; border: 0; box-shadow: none; border-radius: 0; }
  html.pop .nb-nep:not(.on) :is(img, canvas, .nd) { opacity: .88; filter: saturate(.85); }
  html.pop .nb-nep.on :is(img, canvas, .nd) { background: none; box-shadow: none; }
}
@media (min-width: 1000px) {
  html.pop .nt { min-height: 48px; border: 0; border-radius: 16px; color: var(--ink2); font-weight: 700; }
  html.pop .nt.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-card); }
  html.pop .nt svg { color: var(--ink3); width: 24px; height: 24px; }
  html.pop .nt.on svg { color: var(--acc); }
}

/* ---------- list rows: icon tile, title, a line, a value, a chevron ---------- */
html.pop .list.rows { padding: 6px 0; overflow: hidden; background: var(--card); box-shadow: var(--sh-card); }
html.pop .row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px 10px 20px; border: 0; background: none; color: var(--ink);
  text-align: left; border-radius: 16px; transition: background-color .12s; }
html.pop .row-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--fill); color: var(--ink2); }
html.pop .row-tx { flex: 1; min-width: 0; }
html.pop .row-tx b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
html.pop .row-tx small { display: block; font-size: 14px; line-height: 19px; color: var(--ink3); font-weight: 500; }
html.pop .row-rt { font-size: 15px; font-weight: 600; color: var(--ink2); }
html.pop .chev { flex: none; color: var(--ink3); }

/* ---------- Thi thử: where you stand, and each part as a 수험표 with a torn stub ---------- */
html.pop .est { display: flex; align-items: center; gap: 12px; padding: 20px 16px 18px 20px; margin-top: 8px; }
html.pop .est-body { flex: 1; min-width: 0; }
html.pop .est small { display: block; font-size: 14px; font-weight: 600; color: var(--ink3); }
html.pop .est b { display: block; margin: 2px 0 10px; font-size: 34px; line-height: 42px; font-weight: 800; letter-spacing: -.03em; }
html.pop .est b.none { font-size: 26px; line-height: 34px; }
html.pop .est-bar { position: relative; display: block; height: 8px; margin-bottom: 8px; border-radius: 4px; background: var(--fill); }
html.pop .est-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--acc); }
html.pop .est-bar em { position: absolute; top: -4px; width: 3px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
html.pop .est-nep { flex: none; width: 92px; height: 82px; }
html.pop .slips { display: grid; gap: 12px; }
@media (min-width: 761px) { html.pop .slips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.pop .slip { position: relative; display: flex; width: 100%; padding: 0; overflow: visible; color: var(--ink); text-align: left; border-radius: 22px; }
html.pop .slip-main { flex: 1; min-width: 0; padding: 16px 14px 16px 20px; }
html.pop .slip-cap { display: block; font-size: 14px; font-weight: 700; color: var(--acc-ink); }
html.pop .slip-name { display: flex; align-items: baseline; gap: 8px; margin: 2px 0; }
html.pop .slip-name b { font-size: 22px; line-height: 30px; font-weight: 700; }
html.pop .slip-name span { font-size: 15px; color: var(--ink3); font-weight: 500; }
html.pop .slip-main > small:last-child { font-size: 14px; color: var(--ink2); font-weight: 500; }
html.pop .slip-stub { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px dashed var(--line); margin: 12px 0; }
html.pop .slip-stub small { font-size: 14px; color: var(--ink3); font-weight: 600; }
html.pop .slip-stub b { font-size: 26px; line-height: 32px; font-weight: 800; }
html.pop .slip::before, html.pop .slip::after { content: ""; position: absolute; right: 83px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); }
html.pop .slip::before { top: -9px; box-shadow: inset 0 -3px 4px -3px rgba(70, 58, 30, .14); }
html.pop .slip::after { bottom: -9px; box-shadow: inset 0 3px 4px -3px rgba(70, 58, 30, .14); }
html.pop .weak-tag { display: inline; padding: 0; background: none; color: var(--red-ink); font-style: normal; font-weight: 700; }
html.pop .rd-resume { min-height: 52px; padding: 14px 18px; border-radius: var(--r-btn); background: var(--acc-btn); color: #fff; box-shadow: var(--sh-btn); font-weight: 700; }
html.pop .ex-card { padding: 14px 16px 14px 20px; }

/* ---------- Ôn tập: one Nếp, in the card that counts; games drawn, decks as a list ---------- */
html.pop .rv-hero, html.pop .rv-hero:hover { background: var(--card); box-shadow: var(--sh-card), inset 0 0 0 1px var(--rim); border: 0; }
html.pop .rv-hero { position: relative; display: block; padding: 20px; margin-top: 8px; overflow: hidden; text-align: left; color: var(--ink); }
html.pop .rv-hero-body { position: relative; z-index: 1; padding-right: 110px; min-height: 92px; }
html.pop .rv-hero-body small { display: block; font-size: 14px; font-weight: 600; color: var(--ink3); }
html.pop .rv-n { display: flex; align-items: baseline; gap: 4px; font-size: 52px; line-height: 60px; font-weight: 800; letter-spacing: -.03em; }
html.pop .rv-n small { font-size: 20px; color: var(--ink); font-weight: 700; }
html.pop .rv-t { display: block; margin-top: 2px; font-size: 24px; line-height: 32px; font-weight: 700; }
html.pop .rv-hero-body span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink2); }
html.pop .rv-nep { position: absolute; right: 8px; top: 8px; width: 120px; height: 106px; }
html.pop .rv-hero .btn { width: 100%; margin-top: 14px; }
html.pop .rv-games { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
html.pop .rv-game { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; margin: 0; padding: 16px 16px 16px 18px; color: var(--ink); background: var(--card); }
html.pop .rv-game.bn-go { background: var(--card); }
html.pop .rv-game svg { width: 64px; height: 32px; margin: 0 0 8px; }
html.pop .rv-game b { font-size: 16px; line-height: 22px; font-weight: 700; }
html.pop .rv-game small { font-size: 14px; line-height: 19px; color: var(--ink3); opacity: 1; }
html.pop .rv-words { display: flex; flex-wrap: wrap; gap: 8px; }
html.pop .rv-word { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 0; border-radius: var(--r-chip); background: var(--card); box-shadow: var(--sh-card); }
html.pop .rv-word small { color: var(--ink3); }
html.pop .rv-acts { margin-top: 14px; }

/* ---------- Tôi ---------- */
html.pop .me-hero { margin: 8px 4px 14px; }
html.pop .me-hero b { display: block; font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -.025em; }
html.pop .me-hero small { display: block; font-size: 15px; color: var(--ink2); font-weight: 500; }
html.pop .me-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.pop .me-stat { padding: 16px 18px; }
html.pop .me-stat small { display: block; font-size: 14px; font-weight: 600; color: var(--ink3); }
html.pop .me-stat b { display: flex; align-items: center; gap: 6px; font-size: 26px; line-height: 34px; font-weight: 800; }
html.pop .me-stat svg { width: 24px; height: 24px; flex: none; }
html.pop .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 16px; background: var(--fill); }
html.pop .seg.two { grid-template-columns: repeat(2, 1fr); }
html.pop .seg button { min-height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink2); font-weight: 700; font-size: 15px; transition: background-color .15s, color .15s; }
html.pop .seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px -6px rgba(0, 0, 0, .2); }

/* ---------- flows: the bar on top is an X, a progress track, a count ---------- */
html.pop .bar { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0; box-shadow: none; }
html.pop .bar-in { min-height: 56px; padding: 6px 16px 6px 10px; gap: 8px; }
html.pop .bar .brand { position: relative; flex: none; width: 44px; height: 44px; padding: 0; font-size: 0; border-radius: var(--r-sm); color: var(--ink); }
html.pop .bar .brand > :not(.x) { display: none; }
html.pop .bar .brand::before { content: ""; position: absolute; inset: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
html.pop .bar .title { font-size: 15px; font-weight: 600; color: var(--ink2); }
html.pop :is(.pr-prog, .sv-prog, .meter) { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
html.pop :is(.pr-prog, .sv-prog) i { min-width: 0; border-radius: 4px; background: var(--acc); transition: width .4s var(--ease-out); }
html.pop :is(.pr-prog, .sv-prog) i::after { display: none; }

/* answers: white tiles, the number in a small grey square; right turns green, wrong red */
html.pop :is(.practice .opt, .sv-opt, .lw-opts .sv-opt) { min-height: 56px; border: 0; border-radius: var(--r-btn); background: var(--card); color: var(--ink);
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--rim); transition: background-color .12s, box-shadow .12s, scale var(--t-press) var(--ease-out); }
html.pop :is(.practice .opt.sel, .sv-opt.on, .sv-opt.sel) { background: var(--acc-soft); box-shadow: inset 0 0 0 2px var(--acc); color: var(--ink); }
html.pop .practice .opt.right, html.pop .lw-opts .sv-opt.right { background: var(--acc-soft); box-shadow: inset 0 0 0 2px var(--acc); }
html.pop .practice .opt.wrong, html.pop .lw-opts .sv-opt.wrong { background: var(--red-soft); box-shadow: inset 0 0 0 2px var(--red); border: 0; }
html.pop .practice .opt .num { border-radius: 9px; background: var(--fill); border: 0; color: var(--ink3); }
html.pop .practice .opt.sel .num, html.pop .practice .opt.right .num { background: var(--acc-btn); color: #fff; }
html.pop .practice .opt.wrong .num { background: var(--red-btn); color: #fff; }
html.pop .paper { border-radius: var(--r-card); }
html.pop .paper.practice .pr-act { border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--sh-float); background: var(--card); }
html.pop .pr-act:has(.fb.ok) { background: var(--acc-soft); }
html.pop .pr-act:has(.fb.no) { background: var(--red-soft); }
html.pop .fb { background: transparent; padding: 4px 2px; }
html.pop .fb i { width: 36px; height: 36px; background: var(--acc-btn); color: #fff; }
html.pop .fb.no i { background: var(--red-btn); }
html.pop .fb.ok { color: var(--acc-ink); }
html.pop .fb.no { color: var(--red-ink); }
html.pop .fb b { font-size: 18px; font-weight: 700; }
html.pop .fb small { font-weight: 500; color: var(--ink); }
html.pop .pr-act:has(.fb.no) .btn.primary { background: var(--red-btn); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 8px 18px -10px rgba(170, 40, 25, .7); }
html.pop .fb.float { background: var(--card); box-shadow: var(--sh-float); border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
html.pop .fb.float.ok { background: var(--acc-soft); }
html.pop .fb.float.no { background: var(--red-soft); }

/* new words: a big white card, the word at 56 */
html.pop .fcard { border-radius: var(--r-card); padding: 34px 22px 26px; }
html.pop .fcard .kw, html.pop .lw-q .kw { font-size: 52px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
html.pop .fc-rear .vi, html.pop .fc-back .vi { font-weight: 700; }
html.pop .lw-say { min-height: 48px; padding: 8px 20px; border-radius: var(--r-chip); background: var(--acc-btn); color: #fff; box-shadow: var(--sh-btn); }
html.pop .fc-actions .btn:not(.primary) { flex: 0 0 auto; width: auto; min-width: 116px; }
html.pop .coach-say, html.pop .bubble { border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--sh-card); color: var(--ink); font-weight: 600; }

/* the survey */
html.pop .sv-q { font-size: 24px; line-height: 32px; font-weight: 700; }
html.pop .sv-back, html.pop .sv-skip { color: var(--ink2); }
html.pop .sv-opt b { font-weight: 600; }

/* the lesson */
html.pop .lp-step { padding: 18px 20px; }
html.pop .lp-step h3 { color: var(--ink); font-weight: 700; }
html.pop .lp-goal { background: var(--acc-soft); box-shadow: none; }
html.pop .lp-say { background: var(--acc-btn); box-shadow: var(--sh-btn); }
html.pop .lp-cta { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 0; }
html.pop .lp-bub { background: var(--acc-soft); }
html.pop .lp-bub.r { background: var(--honey-soft); }

/* ---------- the task sheet: rises on a spring, follows the finger down (feel.js) ---------- */
html.pop .rd-sheet-bg { background: rgba(24, 22, 16, calc(.44 * var(--dim, 1))); animation: sheet-dim .2s ease-out; }
html.pop[data-theme="dark"] .rd-sheet-bg { background: rgba(0, 0, 0, calc(.6 * var(--dim, 1))); }
html.pop .rd-sheet { background: var(--card); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--sh-float); animation: sheet-up var(--t-sheet) cubic-bezier(.2, 1.12, .32, 1) both; touch-action: pan-y; }
html.pop .rd-sheet.dragging { animation: none; transition: none; }
html.pop .rd-sheet:not(.dragging) { transition: transform .32s cubic-bezier(.2, 1.2, .35, 1); }
html.pop .rd-sheet-bg.closing { animation: sheet-undim .22s var(--ease-in) forwards; }
html.pop .rd-sheet-bg.closing .rd-sheet { animation: sheet-down .22s var(--ease-in) forwards; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes sheet-dim { from { background-color: transparent; } }
@keyframes sheet-undim { to { background-color: transparent; } }
html.pop .rd-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
html.pop .rd-sh-head { position: relative; background: none; box-shadow: none; border-radius: 0; color: var(--ink); padding: 0 80px 0 0; }
html.pop .rd-sh-head::after { display: none; }
html.pop .rd-sh-head small { color: var(--acc-ink); font-size: 14px; font-weight: 700; }
html.pop .rd-sh-head b { color: var(--ink); font-size: 22px; line-height: 30px; font-weight: 700; }
html.pop .rd-sh-head p { color: var(--ink2); }
html.pop .rd-sh-head :is(img, canvas, .nd) { position: absolute; right: -6px; top: -12px; width: 84px; height: 76px; }
html.pop .rd-sheet .tasks { gap: 0; margin: 10px -12px; }
html.pop .task { min-height: 64px; padding: 10px 12px; background: none; box-shadow: none; border-radius: 16px; }
html.pop .task em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink2); }
html.pop .tk-box { width: 26px; height: 26px; margin: 0 8px; border: 2px solid color-mix(in srgb, var(--ink3) 55%, transparent); border-radius: 50%; background: none; color: #fff; font-size: 15px; }
html.pop .task.done .tk-box { background: var(--leaf); border-color: var(--leaf); color: #fff; }
html.pop .tk-body b { font-weight: 600; }
html.pop .tk-body small { color: var(--ink3); }
html.pop .rd-more { color: var(--ink3); font-size: 14px; font-weight: 700; }
html.pop .rd-sheet > .btn:last-child { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { html.pop .rd-sheet, html.pop .rd-sheet-bg, html.pop .rd-sheet-bg.closing .rd-sheet { animation: none; } }

/* ---------- the end of a lesson: honey glow, grains counted, the 참 잘했어요 seal ---------- */
html.pop .win { max-width: 440px; padding: 4px 0 24px; }
html.pop .win-nep { width: 220px; height: 210px; overflow: visible; }
html.pop .win-nep::before { content: ""; position: absolute; inset: -6px -40px 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--honey) 30%, transparent), transparent); }
html.pop .win-nep > :is(img, canvas, .nd) { position: relative; width: 200px; height: 190px; animation: win-hop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
html.pop .win-seal { position: absolute; right: -66px; top: 62px; width: 112px; height: 112px; color: var(--red); opacity: 0; transform: rotate(-14deg) scale(1.7); pointer-events: none; }
html.pop .win-seal .stamp { width: 100%; height: 100%; font-family: var(--font); }
@media (max-width: 400px) { html.pop .win-seal { right: -58px; } }
html.pop .win.stamped .win-seal { opacity: .94; transform: rotate(-14deg) scale(1); transition: transform .16s cubic-bezier(.5, 0, .9, .5), opacity .08s; }
html.pop .win.stamped .win-nep > :is(img, canvas, .nd) { animation: win-startle .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes win-hop { from { transform: translateY(30px) scale(.7); opacity: 0; } }
@keyframes win-startle { 30% { transform: translateY(-14px); } }
html.pop .win-title { margin-top: 10px; font-size: 26px; line-height: 34px; font-weight: 700; color: var(--ink); }
html.pop .win-sub { font-size: 17px; font-weight: 500; color: var(--ink2); }
html.pop .win-grain { margin: 22px 0 0; padding: 18px 20px 16px; text-align: center; animation: win-in .4s var(--ease-out) .15s backwards; }
html.pop .win-grain small { display: block; font-size: 14px; font-weight: 700; color: var(--ink3); background: none; padding: 0; }
html.pop .win-grain b { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 0; font-size: 52px; line-height: 60px; font-weight: 800; color: var(--ink); }
html.pop .win-gi { width: 40px; height: 40px; }
html.pop .win-grain b span.bump { display: inline-block; animation: win-bump .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes win-bump { 50% { transform: scale(1.08); } }
html.pop .win-stats { display: flex; gap: 12px; margin: 12px 0 6px; }
html.pop .win-stat { flex: 1; min-width: 0; padding: 14px 16px; text-align: left; border: 0; overflow: visible; animation: win-in .4s var(--ease-out) backwards; }
html.pop .win-stat:nth-child(1) { animation-delay: .3s; } html.pop .win-stat:nth-child(2) { animation-delay: .38s; } html.pop .win-stat:nth-child(3) { animation-delay: .46s; }
html.pop .win-stat small { padding: 0; background: none; color: var(--ink3); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pop .win-stat b { padding: 0; margin-top: 2px; font-size: 26px; line-height: 32px; font-weight: 800; color: var(--ink); }
@keyframes win-in { from { opacity: 0; transform: translateY(14px); } }
html.pop .win .actions { margin-top: 18px; gap: 10px; }
html.pop .win .actions .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { html.pop .win *, html.pop .win-seal { animation: none !important; transition: none !important; } }

/* ---------- small things ---------- */
html.pop .toast { border-radius: 16px; background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: var(--sh-float); }
html.pop .tabs { background: var(--fill); border-radius: 16px; }
html.pop .tab.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html.pop .modal { border-radius: var(--r-sheet); box-shadow: var(--sh-float); }
html.pop .overlay { background: rgba(24, 22, 16, .44); }
html.pop[data-theme="dark"] .overlay { background: rgba(0, 0, 0, .6); }
html.pop :is(input, textarea, select):not([type=range]):not([type=checkbox]):not([type=radio]) { background: var(--card); color: var(--ink); border-color: var(--line); }
html.pop .today-big b { color: var(--acc-ink); }

/* ---------- the shop and the call: only the frame changes ---------- */
html.pop .sh-it { border-radius: 20px; }
html.pop .sh-tab { border-radius: var(--r-chip); }
html.pop .sh-top h2, html.pop .sh-have b, html.pop .sh-it small { font-family: var(--font); }

/* ---------- the hello screen, by season ---------- */
[data-season="summer"] .splash { --season-bg: radial-gradient(120% 70% at 50% 42%, #FFFBE8 0%, #E3F3D9 60%, #BFE3C4 100%);
  --season-fall-a: #8CCB6E; --season-fall-b: #4FAE5C; --season-fall-r: 0 80% 0 80%; --season-fall-on: block; }
[data-season="spring"] .splash { --season-bg: radial-gradient(120% 70% at 50% 42%, #FFF8F6 0%, #FCE6EC 60%, #F6CFDB 100%); }
[data-season="winter"] .splash { --season-bg: radial-gradient(120% 70% at 50% 42%, #FFFFFF 0%, #EAF1F8 60%, #CFDDEC 100%); }
html.pop .hs-fall i { background: var(--season-fall-a); }
html.pop .hs-fall i:nth-child(3n) { background: var(--season-fall-b); }
[data-season="autumn"] .hs-fall i { border-radius: 0; -webkit-mask: var(--m-maple) center / contain no-repeat; mask: var(--m-maple) center / contain no-repeat; box-shadow: none; }
[data-season="spring"] .hs-fall i { border-radius: 0; width: calc(18px * var(--s)); height: calc(18px * var(--s)); -webkit-mask: var(--m-petal) center / contain no-repeat; mask: var(--m-petal) center / contain no-repeat; box-shadow: none; }
[data-season="summer"] .hs-fall i { border-radius: 0; -webkit-mask: var(--m-leaf) center / contain no-repeat; mask: var(--m-leaf) center / contain no-repeat; box-shadow: none; }
[data-season="winter"] .hs-fall i { width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(110, 140, 180, .45); }
.splash .hs-bg::after { content: ""; position: absolute; left: 50%; top: 24%; width: 70vmin; height: 70vmin; margin-left: -35vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent); }
[data-season="summer"] .splash .hs-bg::after { background: radial-gradient(closest-side, rgba(255, 244, 190, .75), transparent); }

/* ---------- the middle tab (Nếp): a clay-honey ball inside the bar (not over the page), light and dark alike ---------- */
@media (max-width: 760px) {
  html.pop .nb-nep { position: relative; justify-content: flex-end; padding-bottom: 3px; }
  html.pop .nb-nep :is(img, canvas, .nd), html.pop .nb-nep:not(.on) :is(img, canvas, .nd), html.pop .nb-nep.on :is(img, canvas, .nd) {
    position: absolute; top: 1px; left: calc(50% - 20px); width: 40px; height: 40px; box-sizing: border-box; padding: 7px 5px; margin: 0;
    border-radius: 50%; border: 2px solid var(--card); opacity: 1; filter: none;
    background: radial-gradient(circle at 35% 28%, #FFE9B8 0%, #F6C05A 58%, #E59A2C 100%);
    box-shadow: 0 8px 16px -6px rgba(90, 55, 10, .55), inset 0 -4px 6px rgba(160, 90, 10, .25); }
  html.pop .nb-nep.on :is(img, canvas, .nd) { box-shadow: 0 8px 16px -6px rgba(90, 55, 10, .55), inset 0 -4px 6px rgba(160, 90, 10, .25), 0 0 0 3px var(--acc); }
  html.pop[data-theme="dark"] .nb-nep :is(img, canvas, .nd) { border-color: #1C1F1B; background: radial-gradient(circle at 35% 28%, #FFE0A0 0%, #F4B544 58%, #D18524 100%);
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .8), inset 0 -4px 6px rgba(160, 90, 10, .3); }
}
/* the greeting breaks after the name on a computer only (pc.css) */
.hi-br { display: none; }

/* a matching tile picked and waiting for its pair: plainly picked (the border alone was nearly the same green, so on a
   phone a learner tapped again and unpicked it) */
.st-opt.st-mt.on, html.pop .st-opt.st-mt.on { background: color-mix(in srgb, var(--acc, #1FA463) 18%, var(--card, #fff)); border-color: var(--acc, #1FA463);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #1FA463) 40%, transparent); color: var(--ink, #1B201C); translate: 0 2px; }

/* On an iPhone opened from the home screen a short page (Ôn tập) can get a viewport shorter than the screen: the tab
   bar sat on its bottom edge with a strip of the page under it. The page is always as tall as the largest viewport,
   and what shows past it is the tab bar's own colour, so the bar reaches the bottom of the screen. */
@media (max-width: 760px) {
  html.pop { background: var(--card); }
  html.pop body { min-height: 100lvh; box-sizing: border-box; }
}