:root{
  /* HSK level colours (cinnabar, jade, amber, plum, teal = HSK1…5): picked
     with the dataviz CVD validator so every pair stays distinct for
     colour-blind readers (all-pairs ΔE ≥ 8 deutan/protan, ≥ 15 normal,
     ≥ 3:1 on the paper), light and dark each validated on their own
     surface. "teal" is a blue now; the token names are kept.
     --X-ink: the same hue for TEXT and for fills that carry text (≥ 4.5:1),
     darker in light mode / lighter in dark mode; bars, borders, heatmap and
     medals keep the brighter --X. */
  --paper:#FBF7EF;
  --paper-alt:#F3ECDC;
  --paper-raised:#FFFDF9;
  --ink:#2A241C;
  --ink-soft:#6B6154;
  --ink-faint:#A79A84;
  --rule:#E3D9C6;
  --cinnabar:#BA2328;
  --cinnabar-tint:#F5DCDA;
  --cinnabar-ink:#BA2328;
  --jade:#17997E;
  --jade-tint:#DCEEE7;
  --jade-ink:#137D67;
  --indigo:#33507A;
  --indigo-tint:#DCE3EE;
  --amber:#A88311;
  --amber-tint:#F2EBD6;
  --amber-ink:#8A6B0E;
  --plum:#853A85;
  --plum-tint:#EDE0E8;
  --plum-ink:#853A85;
  --teal:#5783CA;
  --teal-tint:#E6EBF2;
  --teal-ink:#4B71AE;
  --bronze:#93743E;
  --shadow: 0 1px 2px rgba(42,36,28,.06), 0 6px 20px -8px rgba(42,36,28,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181410;
    --paper-alt:#211B14;
    --paper-raised:#241E17;
    --ink:#EEE4D4;
    --ink-soft:#B0A28B;
    --ink-faint:#786C58;
    --rule:#38301F;
    --cinnabar:#D43733;
    --cinnabar-tint:#3E1B17;
  --cinnabar-ink:#DB5754;
    --jade:#2DAA70;
    --jade-tint:#1C3223;
  --jade-ink:#2DAA70;
    --indigo:#8BA3C7;
    --indigo-tint:#212B3B;
    --amber:#C78012;
    --amber-tint:#3B2A10;
  --amber-ink:#C78012;
    --plum:#9F62A3;
    --plum-tint:#33242D;
  --plum-ink:#A972AC;
    --teal:#538DEC;
    --teal-tint:#242C3C;
  --teal-ink:#538DEC;
    --bronze:#C9A463;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -10px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#181410;
  --paper-alt:#211B14;
  --paper-raised:#241E17;
  --ink:#EEE4D4;
  --ink-soft:#B0A28B;
  --ink-faint:#786C58;
  --rule:#38301F;
  --cinnabar:#D43733;
  --cinnabar-tint:#3E1B17;
  --cinnabar-ink:#DB5754;
  --jade:#2DAA70;
  --jade-tint:#1C3223;
  --jade-ink:#2DAA70;
  --indigo:#8BA3C7;
  --indigo-tint:#212B3B;
  --amber:#C78012;
  --amber-tint:#3B2A10;
  --amber-ink:#C78012;
  --plum:#9F62A3;
  --plum-tint:#33242D;
  --plum-ink:#A972AC;
  --teal:#538DEC;
  --teal-tint:#242C3C;
  --teal-ink:#538DEC;
  --bronze:#C9A463;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -10px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}
.hanzi{ font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif; }
.display{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; }
.mono{ font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums; }

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

.eyebrow{
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}

/* ---------- shell ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 1.25rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar .wordmark{
  display:flex; align-items:baseline; gap:.5rem;
  text-decoration:none; color:var(--ink); cursor:pointer; background:none; border:none; padding:0;
}
.topbar .wordmark .hz{ font-size:1.35rem; font-weight:700; }
.topbar .wordmark .py{ font-size:.72rem; color:var(--ink-soft); font-style:italic; }
.topbar .crumb{
  display:flex; align-items:center; gap:.4rem; min-width:0;
  font-size:.82rem; color:var(--ink-soft);
  margin-left:.25rem; padding-left:.9rem; border-left:1px solid var(--rule);
}
.topbar .crumb b{ color:var(--ink); font-weight:600; }
.dlg-select{
  font-family:inherit; font-size:.82rem; font-weight:600; color:var(--ink);
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:6px;
  padding:.2rem .4rem; max-width:11rem; min-width:0;
}
.dlg-select:focus-visible{ outline:2px solid var(--indigo); outline-offset:1px; }
.back-btn{
  flex:none;
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px solid var(--rule); border-radius:999px;
  padding:.35rem .8rem .35rem .6rem;
  color:var(--ink); font-size:.8rem; font-weight:600;
  cursor:pointer;
}
.back-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.acct-btn{
  flex:none; display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px solid var(--rule); border-radius:999px;
  padding:.35rem .8rem; color:var(--ink-soft); font-size:.78rem; font-weight:600;
  cursor:pointer;
}
.acct-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.acct-btn.is-user{ color:var(--indigo); border-color:var(--indigo-tint); background:var(--indigo-tint); }

main{ max-width:760px; margin:0 auto; padding:2rem 1.25rem 5rem; }

@media (prefers-reduced-motion: no-preference){
  .screen-enter{ animation:riseIn .32s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- home ---------- */
.hero{ padding:1.5rem 0 2.25rem; text-align:center; }
.hero .hz{
  font-size:3.1rem; font-weight:700; letter-spacing:.03em;
  margin:.3rem 0 .25rem; text-wrap:balance;
}
.hero .py{ color:var(--cinnabar-ink); font-style:italic; font-size:1.05rem; margin:0 0 .9rem; }
.hero p.tag{ color:var(--ink-soft); max-width:32rem; margin:0 auto; font-size:.95rem; }

.level-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.level-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:1.35rem 1.25rem; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.level-card:hover{ transform:translateY(-2px); }
.level-card .lvl-num{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.72rem;
  letter-spacing:.08em; padding:.15rem .55rem; border-radius:999px;
  display:inline-block; margin-bottom:.8rem;
}
.level-card.c-cinnabar{ border-color:color-mix(in srgb, var(--cinnabar) 35%, var(--rule)); }
.level-card.c-cinnabar .lvl-num{ background:var(--cinnabar-tint); color:var(--cinnabar-ink); }
.level-card.c-cinnabar:hover{ border-color:var(--cinnabar); }
.level-card.c-jade{ border-color:color-mix(in srgb, var(--jade) 35%, var(--rule)); }
.level-card.c-jade .lvl-num{ background:var(--jade-tint); color:var(--jade-ink); }
.level-card.c-jade:hover{ border-color:var(--jade); }
.level-card.c-amber{ border-color:color-mix(in srgb, var(--amber) 35%, var(--rule)); }
.level-card.c-amber .lvl-num{ background:var(--amber-tint); color:var(--amber-ink); }
.level-card.c-amber:hover{ border-color:var(--amber); }
.level-card.c-plum{ border-color:color-mix(in srgb, var(--plum) 35%, var(--rule)); }
.level-card.c-plum .lvl-num{ background:var(--plum-tint); color:var(--plum-ink); }
.level-card.c-plum:hover{ border-color:var(--plum); }
.level-card.c-teal{ border-color:color-mix(in srgb, var(--teal) 35%, var(--rule)); }
.level-card.c-teal .lvl-num{ background:var(--teal-tint); color:var(--teal-ink); }
.level-card.c-teal:hover{ border-color:var(--teal); }
.level-card h2{ font-size:1.5rem; margin:0 0 .2rem; font-family:"Fraunces",Georgia,serif; }
.level-card .py{ font-size:.8rem; color:var(--ink-soft); font-style:italic; margin:0 0 .6rem; }
.level-card .meta{ font-size:.82rem; color:var(--ink-soft); }
.level-card .meta b{ color:var(--ink); font-family:"IBM Plex Mono",monospace; font-weight:600; }

.level-card.locked{
  background:var(--paper-alt); cursor:default; box-shadow:none;
  opacity:.72;
}
.level-card.locked:hover{ transform:none; border-color:var(--rule); }
.level-card.locked .lvl-num{ background:transparent; border:1px solid var(--bronze); color:var(--bronze); }

.how-it-works{
  margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--rule);
}
.how-it-works h3{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1rem; }
.hiw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.hiw-card{ background:var(--paper-alt); border:1px solid var(--rule); border-radius:10px; padding:1rem; }
.hiw-card .n{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--indigo); font-weight:600; }
.hiw-card h4{ margin:.4rem 0 .25rem; font-size:.92rem; }
.hiw-card p{ margin:0; font-size:.8rem; color:var(--ink-soft); line-height:1.5; }

/* ---------- theme grid (level screen) ---------- */
.level-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.75rem; }
.level-head .badge-lg{
  flex:none; width:3rem; height:3rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1rem;
}
.level-head h1{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.6rem; }
.level-head p{ margin:.15rem 0 0; color:var(--ink-soft); font-size:.85rem; }

.theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.theme-card{
  display:flex; flex-direction:column; gap:.5rem;
  text-align:left; text-decoration:none; color:var(--ink); cursor:pointer;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px;
  padding:1rem 1.1rem; box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease;
}
.theme-card:hover{ transform:translateY(-2px); border-color:var(--accent-c); }
.theme-card .top-row{ display:flex; align-items:center; gap:.5rem; }
.theme-card .num{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--accent-c); font-weight:600; }
.theme-card .tag{ margin-left:auto; font-size:.7rem; color:var(--ink-soft); }
.theme-card h3{ margin:0; font-size:1.2rem; font-family:"Noto Serif SC",serif; }
.theme-card .py{ font-size:.76rem; color:var(--ink-soft); font-style:italic; margin:0; }
.theme-card .meta{ font-size:.72rem; color:var(--ink-faint); }

/* ---------- account / profile page ---------- */
.acct-btn .av-sm{ width:1.45rem; height:1.45rem; font-size:.7rem; margin:-.15rem .1rem -.15rem -.45rem; }
.avatar{
  flex:none; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  background:var(--indigo-tint); color:var(--indigo); font-family:"Fraunces",Georgia,serif; font-weight:600;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.av-lg{ width:5.5rem; height:5.5rem; font-size:2.2rem; box-shadow:0 0 0 3px var(--paper-raised), 0 0 0 4px var(--rule); }
.profile-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow);
  padding:1.25rem; display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem;
}
.profile-id{ flex:1; min-width:12rem; }
.profile-id h1{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.55rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.profile-id .muted{ color:var(--ink-soft); font-size:.8rem; margin:.15rem 0 0; }
.av-actions{ display:flex; gap:.4rem; margin-top:.55rem; flex-wrap:wrap; }
.av-actions .link-btn{ font-size:.72rem; }
.name-edit{ display:flex; gap:.4rem; align-items:center; }
.name-edit input{ font:inherit; font-size:1rem; padding:.35rem .55rem; border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); min-width:0; flex:1; }
.xp-level{ margin-top:.75rem; }
.xp-level .row{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-soft); margin-bottom:.3rem; }
.xp-level .row b{ color:var(--ink); font-family:"IBM Plex Mono",monospace; }
.stage-done{ margin:.35rem 0 0; font-size:.7rem; color:var(--jade-ink); font-weight:600; }
.meter{ height:8px; border-radius:999px; background:var(--paper-alt); border:1px solid var(--rule); overflow:hidden; }
.meter > span{ display:block; height:100%; border-radius:999px; background:var(--indigo); }
.stat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1rem; }
.stat-tile{ background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:.8rem .85rem; box-shadow:var(--shadow); }
.stat-tile .v{ font-family:"Fraunces",Georgia,serif; font-size:1.7rem; font-weight:600; line-height:1.1; display:flex; align-items:baseline; gap:.3rem; }
.stat-tile .v .u{ font-family:"Public Sans",sans-serif; font-size:.72rem; font-weight:600; color:var(--ink-soft); }
.stat-tile .l{ font-size:.72rem; color:var(--ink-soft); margin-top:.2rem; }
.stat-tile .flame{ font-family:"Noto Serif SC",serif; color:var(--cinnabar-ink); }
.stat-tile.off .flame{ color:var(--ink-faint); }
.acct-section{ margin-top:1.75rem; }
.acct-section > h2{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .75rem; font-weight:600; }
.acct-panel{ background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.1rem; box-shadow:var(--shadow); }
.goal-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.65rem; }
.goal-chip{ border:1px solid var(--rule); background:var(--paper); border-radius:999px; padding:.35rem .8rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.goal-chip b{ font-family:"IBM Plex Mono",monospace; font-weight:600; }
.goal-chip.active{ background:var(--indigo); border-color:var(--indigo); color:var(--paper); }
.goal-today{ display:flex; align-items:center; gap:.8rem; }
.goal-today p{ margin:0; font-size:.85rem; }
.goal-today .muted{ color:var(--ink-soft); font-size:.75rem; }
/* activity calendar, sequential single hue (jade), light → dark */
.heat-wrap{ overflow-x:auto; padding-bottom:.25rem; }
.heat{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 13px); gap:3px; width:max-content; }
.heat .c{ width:13px; height:13px; border-radius:3px; background:var(--paper-alt); box-shadow:inset 0 0 0 1px var(--rule); position:relative; }
.heat .c.l1{ background:color-mix(in srgb, var(--jade) 28%, var(--paper-raised)); box-shadow:none; }
.heat .c.l2{ background:color-mix(in srgb, var(--jade) 52%, var(--paper-raised)); box-shadow:none; }
.heat .c.l3{ background:color-mix(in srgb, var(--jade) 76%, var(--paper-raised)); box-shadow:none; }
.heat .c.l4{ background:var(--jade); box-shadow:none; }
.heat .c.future{ visibility:hidden; }
.heat .c.today{ outline:2px solid var(--ink); outline-offset:1px; }
.heat-legend{ display:flex; align-items:center; gap:3px; justify-content:flex-end; font-size:.66rem; color:var(--ink-faint); margin-top:.5rem; }
.heat-legend .c{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.heat-months{ display:grid; grid-auto-flow:column; grid-auto-columns:16px; font-size:.62rem; color:var(--ink-faint); height:1rem; width:max-content; }
[data-tip]{ position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); font-size:.68rem; font-weight:600; white-space:nowrap;
  padding:.3rem .5rem; border-radius:6px; pointer-events:none; z-index:5;
}
/* last 7 days, single-series columns */
.week-cols{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; align-items:end; height:110px; position:relative; margin-top:.6rem; }
.week-cols .goal-line{ position:absolute; left:0; right:0; border-top:1px solid var(--ink-faint); pointer-events:none; }
.week-cols .goal-line span{ position:absolute; left:0; top:-1.1rem; background:var(--paper-raised); padding-right:.3rem; font-size:.62rem; color:var(--ink-faint); }
.week-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:.2rem; }
.week-col .bar{ width:100%; max-width:24px; border-radius:4px 4px 0 0; background:var(--indigo); min-height:2px; }
.week-col .bar.zero{ background:var(--rule); }
.week-col .val{ font-size:.64rem; font-family:"IBM Plex Mono",monospace; color:var(--ink-soft); min-height:.9rem; }
.week-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; margin-top:.3rem; font-size:.64rem; color:var(--ink-faint); text-align:center; }
.week-days .t{ color:var(--ink); font-weight:700; }
/* per-HSK progress */
.lvl-rows{ display:flex; flex-direction:column; gap:.85rem; }
.lvl-row .top{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-size:.8rem; margin-bottom:.3rem; }
.lvl-row .top b{ font-family:"IBM Plex Mono",monospace; }
.lvl-row .top .muted{ color:var(--ink-soft); font-size:.72rem; }
.lvl-row .meter > span{ background:var(--jade); }
/* badges */
.medal{
  --m1:var(--paper-alt); --m2:var(--ink-faint);
  width:3.1rem; height:3.1rem; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:"Noto Serif SC",serif; font-weight:700; font-size:1.35rem; color:var(--paper);
  background:radial-gradient(circle at 35% 30%, var(--m1), var(--m2)); box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--paper) 45%, transparent);
}
.medal.t-none{ --m1:#8FA4C6; --m2:var(--indigo); }
.medal.t-bronze{ --m1:#D9A06B; --m2:#8C5A2B; }
.medal.t-silver{ --m1:#DDE2E7; --m2:#7A838D; color:#2B3036; }
.medal.t-gold{ --m1:#F3D774; --m2:#B8862B; }
.medal.locked{ --m1:var(--paper-alt); --m2:var(--rule); color:var(--ink-faint); box-shadow:inset 0 0 0 2px var(--rule); }
.badge-levels{ display:flex; flex-direction:column; gap:.7rem; }
.badge-level{ display:flex; align-items:center; gap:.75rem; }
.badge-level .name{ width:3rem; font-family:"IBM Plex Mono",monospace; font-size:.75rem; font-weight:600; color:var(--ink-soft); }
.badge-level .medals{ display:flex; gap:.6rem; }
.badge-level .medal{ width:2.6rem; height:2.6rem; font-size:1.1rem; cursor:pointer; border:none; }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem,1fr)); gap:.6rem; }
.badge-card{
  display:flex; gap:.65rem; align-items:center; text-align:left; width:100%;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:.65rem .7rem; box-shadow:var(--shadow);
  font:inherit; color:var(--ink); cursor:pointer;
}
.badge-card.locked{ box-shadow:none; background:var(--paper-alt); }
.badge-card .bt{ font-size:.78rem; font-weight:700; line-height:1.25; }
.badge-card .bd{ font-size:.66rem; color:var(--ink-soft); line-height:1.35; margin-top:.15rem; }
.badge-card .meter{ height:5px; margin-top:.35rem; }
.badge-card .meter > span{ background:var(--ink-faint); }
.badge-detail{ margin-top:.8rem; font-size:.8rem; color:var(--ink-soft); min-height:1.2rem; }
.badge-detail b{ color:var(--ink); }
.invite{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.invite p{ margin:0; font-size:.82rem; flex:1; min-width:14rem; }
/* photo crop dialog */
.crop-card{ max-width:24rem; text-align:center; }
.crop-view{
  position:relative; margin:0 auto; overflow:hidden; border-radius:12px; background:#111;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.crop-view:active{ cursor:grabbing; }
.crop-view img{ position:absolute; top:0; left:0; max-width:none; transform-origin:0 0; pointer-events:none; }
.crop-ring{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 999px rgba(0,0,0,.5); outline:2px solid rgba(255,255,255,.85); outline-offset:-2px; pointer-events:none; }
.crop-zoom{ display:flex; align-items:center; gap:.6rem; margin:1rem auto 0; max-width:300px; color:var(--ink-soft); font-weight:700; }
.crop-zoom input{ flex:1; accent-color:var(--indigo); }
.crop-actions{ display:flex; gap:.6rem; justify-content:center; margin-top:1.1rem; }
.say-btn{ display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; margin-left:.35rem; vertical-align:middle;
  border:1px solid var(--rule); border-radius:50%; background:var(--paper); font-size:.85rem; line-height:1; cursor:pointer; padding:0; }
.say-btn:hover{ border-color:var(--indigo); }
.theme-group{ margin:0 0 1.6rem; }
.theme-menu .meta{ margin-top:.4rem; line-height:1.6; }
.fr-title{ margin:.15rem 0 0; font-size:.9rem; font-weight:600; color:var(--ink); }
.step-nav{ display:grid; gap:.6rem; margin-top:1.4rem; }
.step-btn .sub{ display:block; }
.step-btn.back{ text-align:left; }
.theme-head{ display:flex; align-items:baseline; gap:.6rem; margin:0 0 .7rem; font-family:"Fraunces",Georgia,serif; font-size:1.15rem; }
.theme-head::before{ content:""; width:4px; align-self:stretch; border-radius:2px; background:var(--accent-c); }
.theme-head span{ font-family:"Public Sans",sans-serif; font-size:.75rem; font-weight:600; color:var(--ink-soft); }
.why-expr{ margin:1rem 0 .4rem; padding:.85rem 1rem; border-radius:14px; background:color-mix(in srgb, var(--amber-ink) 9%, var(--paper-raised)); }
.why-expr .eyebrow{ margin:0 0 .35rem; color:var(--amber-ink); }
.why-expr-head{ margin:0 0 .35rem; }
.why-expr-head .hanzi{ font-size:1.15rem; font-weight:600; }
.why-expr .gx{ margin:0; }
.gram-btn{ font-family:inherit; font-size:.8rem; font-weight:700; color:var(--amber-ink); }
/* À deux: "je bute ici" → grammar overlay over the dialogue */
.why-btn{
  display:inline-flex; margin:.45rem 0 0 .5rem; background:none; border:1px dashed var(--ink-faint); border-radius:999px;
  padding:.3rem .75rem; font-size:.72rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.why-btn:hover{ border-color:var(--amber-ink); color:var(--amber-ink); border-style:solid; }
.modal-backdrop.why-backdrop{ align-items:flex-end; padding:0; }
@media (min-width:640px){ .modal-backdrop.why-backdrop{ align-items:center; padding:1.25rem; } }
.why-card{
  max-width:34rem; max-height:min(85vh, 44rem); overflow-y:auto; overscroll-behavior:contain;
  border-radius:18px 18px 0 0; padding:1.4rem 1.25rem 1.5rem; animation:why-up .18s ease-out;
}
@media (min-width:640px){ .why-card{ border-radius:18px; padding:1.6rem 1.6rem 1.6rem; } }
@keyframes why-up{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .why-card{ animation:none; } }
.why-card .modal-close{ width:2.25rem; height:2.25rem; font-size:1.05rem; border-radius:50%; top:.6rem; right:.6rem; }
.why-card .modal-close:hover{ background:var(--paper); }
.why-card .eyebrow{ margin:0 2.2rem .5rem 0; color:var(--accent-c); }
.why-sentence{ font-size:1.3rem; line-height:2.1; margin:0; }
.why-sentence ruby.hz rt{ visibility:visible; opacity:1; }
.why-sentence .hl{ background:color-mix(in srgb, var(--accent-c) 16%, transparent); border-radius:4px; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-c) 16%, transparent); }
.why-fr{ margin:.2rem 0 1rem; font-size:.88rem; color:var(--ink-soft); font-style:italic; }
.why-point{ border-top:1px solid var(--rule); padding-top:.9rem; }
.why-point h3{ margin:0; font-size:1rem; line-height:1.9; }
.why-point .gram-pattern{ margin:.6rem 0 .4rem; }
.why-point p.gx{ margin:.5rem 0 0; font-size:.88rem; line-height:1.95; }
.why-others{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.75rem; color:var(--ink-soft); }
.why-others button{
  background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:.3rem .7rem;
  font:inherit; font-size:.75rem; font-weight:600; color:var(--ink); cursor:pointer; line-height:1.9;
}
.why-others button:hover{ border-color:var(--accent-c); }
.why-more{ display:inline-block; margin-top:.9rem; font-size:.78rem; font-weight:600; color:var(--accent-c); }
/* pre-rendered pages (static HTML for search engines / AI / no-JS); the app
   replaces #app-main as soon as it boots */
.sp{ line-height:1.65; }
.sp h1{ font-family:"Fraunces",Georgia,serif; font-size:1.7rem; line-height:1.25; margin:1rem 0 .6rem; }
.sp h2{ font-size:1.1rem; margin:1.8rem 0 .6rem; }
.sp h3{ font-size:.95rem; margin:1.2rem 0 .4rem; }
.sp a{ color:var(--indigo); }
.sp-lead{ color:var(--ink-soft); }
.sp-crumb{ font-size:.8rem; color:var(--ink-soft); }
.sp-line{ display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--rule); }
.sp-spk{ font-weight:700; width:1.4rem; flex:none; color:var(--ink-soft); }
.sp-zh{ font-family:"Noto Serif SC",serif; font-size:1.2rem; margin:0; line-height:2; }
.sp-py{ margin:0; font-size:.85rem; color:var(--ink-soft); font-style:italic; }
.sp-fr{ margin:.1rem 0 0; font-size:.88rem; }
.sp ruby rt{ font-size:.5em; color:var(--ink-soft); }
.sp-vocab{ border-collapse:collapse; width:100%; font-size:.85rem; }
.sp-vocab th, .sp-vocab td{ text-align:left; padding:.3rem .5rem; border-bottom:1px solid var(--rule); }
.sp-slot{ display:inline-block; padding:.1rem .45rem; margin:.1rem; border:1px solid var(--rule); border-radius:6px; background:var(--paper-alt); }
.sp-examples{ padding-left:1.1rem; }
.sp-nav{ display:flex; gap:.7rem; margin-left:auto; font-size:.8rem; font-weight:600; }
.sp-nav a, .topbar a.wordmark{ color:var(--ink); text-decoration:none; }
.sp-footer a{ color:inherit; }

/* toasts */
#toast-root{ position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem; align-items:center; z-index:60; pointer-events:none; width:max-content; max-width:calc(100vw - 2rem); }
.toast{
  display:flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); border-radius:999px;
  padding:.45rem 1rem .45rem .5rem; font-size:.82rem; font-weight:600; box-shadow:var(--shadow);
  animation:toastIn .25s ease both;
}
.toast .medal{ width:1.9rem; height:1.9rem; font-size:.85rem; }
.toast.xp{ padding:.45rem 1rem; background:var(--indigo); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){
  .stat-tiles{ grid-template-columns:1fr 1fr; }
}

/* ---------- level tabs + grammar ---------- */
.level-tabs{ margin-bottom:1.25rem; }
.mode-tabs.level-tabs button{ flex-direction:row; justify-content:center; gap:.4rem; font-size:.85rem; }
.level-tabs .count{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; opacity:.75; }
.gram-intro{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1.25rem; }
.gram-intro p{ margin:0; font-size:.85rem; color:var(--ink-soft); max-width:30rem; }
.gram-cat{ margin:1.75rem 0 .7rem; }
.gram-list{ display:flex; flex-direction:column; gap:.6rem; }
.gram-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}
.gram-card[open]{ border-color:color-mix(in srgb, var(--accent-c) 45%, var(--rule)); }
.gram-card summary{
  list-style:none; cursor:pointer; padding:.85rem 1.05rem;
  display:flex; align-items:baseline; gap:.6rem;
}
.gram-card summary::-webkit-details-marker{ display:none; }
.gram-card summary .gt{ font-weight:600; font-size:.95rem; flex:1; }
.gram-card summary .chev{ color:var(--ink-faint); font-size:.75rem; transition:transform .15s ease; flex:none; }
.gram-card[open] summary .chev{ transform:rotate(180deg); }
.gram-body{ padding:0 1.05rem 1.05rem; border-top:1px dashed var(--rule); }
.gram-pattern{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.9rem 0 .8rem; align-items:center; }
.gram-pattern .slot{
  font-size:.75rem; padding:.25rem .6rem; border-radius:6px;
  background:var(--paper-alt); border:1px solid var(--rule); color:var(--ink-soft); font-style:italic;
}
.gram-pattern .slot.zh{
  font-style:normal; font-weight:700; font-size:1rem; color:var(--accent-c);
  background:color-mix(in srgb, var(--accent-c) 12%, var(--paper-raised));
  border-color:color-mix(in srgb, var(--accent-c) 35%, var(--rule));
}
.gram-body p.gx{ margin:.55rem 0 0; font-size:.88rem; line-height:1.65; }
.gram-tips{ margin:.8rem 0 0; padding:.6rem .8rem .6rem 1.8rem; background:var(--amber-tint); border-radius:8px; font-size:.8rem; line-height:1.55; }
.gram-tips li + li{ margin-top:.3rem; }
.gram-examples{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.gram-ex{ background:var(--paper-alt); border:1px solid var(--rule); border-radius:10px; padding:.55rem .8rem; }
.gram-ex .turn-cn{ font-size:1.12rem; line-height:2; }
.gram-ex .hl{ background:color-mix(in srgb, var(--accent-c) 16%, transparent); border-radius:4px; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-c) 16%, transparent); }
.gram-ex .hl ruby.hz rb{ border-bottom-color:var(--accent-c); }
.gram-ex-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-top:.2rem; }
.gram-ex-meta .fr{ font-size:.76rem; color:var(--ink-soft); }
.gram-ex-meta .src{ background:none; border:none; padding:0; font-size:.7rem; color:var(--indigo); cursor:pointer; text-decoration:underline; font-weight:600; }
.show-py ruby.hz rt{ visibility:visible; opacity:1; }
ruby.gpy{ ruby-align:center; }
ruby.gpy rt{ font-family:"Public Sans",sans-serif; font-style:italic; font-size:.5em; font-weight:600; color:var(--ink-soft); user-select:none; }
#gram-root:not(.show-py) ruby.gpy rt{ display:none; }
.gram-body p.gx, .gram-tips{ line-height:1.95; }
.gram-pattern .slot.zh{ padding-top:.7rem; }
.gram-card summary .gt{ line-height:2; }
.gram-pattern .slot.zh ruby.gpy rt{ color:var(--accent-c); opacity:.85; }
.hanzi-inline{ font-family:"Noto Serif SC","Songti SC",serif; }

/* ---------- dialogue screen ---------- */
.dlg-head{ margin-bottom:1.35rem; }
.dlg-head .top-row{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.dlg-head .badge-lg{
  flex:none; width:2.5rem; height:2.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:.92rem;
}
.dlg-head h1{ margin:0; font-family:"Noto Serif SC",serif; font-size:1.7rem; }
.dlg-head .py{ margin:.1rem 0 0; color:var(--ink-soft); font-style:italic; font-size:.85rem; }
.dlg-head .pill{
  margin-left:auto; flex:none;
  font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--accent-c); color:var(--accent-c); border-radius:999px; padding:.2rem .6rem;
}

.mode-tabs{
  display:flex; gap:.35rem; background:var(--paper-alt); border:1px solid var(--rule);
  border-radius:11px; padding:.3rem; margin-bottom:1.5rem;
}
.mode-tabs button{
  flex:1; border:none; background:none; border-radius:8px; cursor:pointer;
  padding:.55rem .5rem; font-size:.82rem; font-weight:600; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  transition:background .15s ease, color .15s ease;
}
.mode-tabs button .sub{ font-weight:400; font-size:.66rem; opacity:.8; }
.mode-tabs button.active{ background:var(--indigo); color:var(--paper); box-shadow:var(--shadow); }
.mode-tabs button:not(.active):hover{ color:var(--ink); }

/* chat bubbles (lecture + duo + solo) */
.bubbles{ display:flex; flex-direction:column; gap:.9rem; }
.bubble-row{ display:flex; gap:.6rem; align-items:flex-end; }
.bubble-row.side-a{ justify-content:flex-start; }
.bubble-row.side-b{ justify-content:flex-end; flex-direction:row-reverse; }
.spk-badge{
  flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:var(--paper);
}
.spk-badge.a{ background:var(--cinnabar-ink); }
.spk-badge.b{ background:var(--jade-ink); }
.bubble{
  max-width:78%; border-radius:16px; padding:.7rem .95rem;
  background:var(--paper-raised); border:1px solid var(--rule);
  box-shadow:var(--shadow);
}
.bubble-row.side-a .bubble{ border-bottom-left-radius:4px; }
.bubble-row.side-b .bubble{ border-bottom-right-radius:4px; }
.bubble.spk-a{ background:var(--cinnabar-tint); border-color:color-mix(in srgb, var(--cinnabar) 30%, var(--rule)); }
.bubble.spk-b{ background:var(--jade-tint); border-color:color-mix(in srgb, var(--jade) 30%, var(--rule)); }
.turn-cn{
  font-family:"Noto Serif SC",serif; font-size:1.28rem; line-height:2.1; margin:0;
}
ruby.hz{ cursor:pointer; -webkit-tap-highlight-color:transparent; ruby-align:center; }
ruby.hz rb{ border-bottom:1.5px dotted var(--ink-faint); padding-bottom:1px; }
ruby.hz:hover rb, ruby.hz:focus-visible rb{ border-bottom-color:var(--ink); }
ruby.hz rt{
  font-family:"Public Sans",sans-serif; font-style:italic; font-size:.44em; font-weight:600;
  color:var(--ink-soft); visibility:hidden; opacity:0; transition:opacity .12s ease; user-select:none;
}
ruby.hz.revealed rt{ visibility:visible; opacity:1; }

/* masked (duo own-role) */
.mask-wrap{ display:inline-flex; flex-wrap:wrap; gap:.18rem; align-items:baseline; vertical-align:baseline; }
.blank-tile{
  display:inline-block; width:1.05em; height:1.15em; border-radius:3px;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-faint) 35%, transparent) 0 4px, transparent 4px 8px);
  border:1px solid var(--ink-faint); opacity:.55; vertical-align:-.15em;
}
.mask-punct{ font-family:"Noto Serif SC",serif; font-size:1.28rem; color:var(--ink-faint); }
.reveal-btn{
  margin-top:.5rem; display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px dashed var(--ink-faint); border-radius:999px;
  padding:.3rem .75rem; font-size:.72rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.reveal-btn:hover{ border-color:var(--indigo); color:var(--indigo); border-style:solid; }
.bubble.revealed .reveal-btn{ display:none; }
.bubble:not(.revealed) .turn-cn-real{ display:none; }
.bubble.revealed .mask-wrap{ display:none; }

.role-switch{
  display:flex; align-items:center; gap:.75rem; justify-content:center;
  margin-bottom:1.25rem; font-size:.85rem; color:var(--ink-soft);
}
.role-switch .opts{ display:flex; gap:.4rem; }
.role-switch button{
  border:1px solid var(--rule); background:var(--paper-raised); border-radius:999px;
  padding:.35rem 1rem; font-size:.82rem; font-weight:700; cursor:pointer; color:var(--ink-soft);
}
.role-switch button.sel-a.active{ background:var(--cinnabar-ink); border-color:var(--cinnabar-ink); color:var(--paper); }
.role-switch button.sel-b.active{ background:var(--jade-ink); border-color:var(--jade-ink); color:var(--paper); }

/* solo mode */
.solo-log{ margin-bottom:1.25rem; }
.bubble.user-answer{ display:flex; flex-direction:column; gap:.35rem; }
.user-answer .user-text{ font-size:1.15rem; }
.verdict{ margin:.1rem 0 0; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.verdict.ok{ color:var(--jade-ink); }
.verdict.warn{ color:var(--bronze); }
.feedback-text{ margin:0; font-size:.78rem; color:var(--ink-soft); font-family:"Public Sans",sans-serif; line-height:1.5; }
.orig-toggle{
  align-self:flex-start; margin-top:.15rem; background:none; border:none; padding:0;
  font-size:.72rem; color:var(--indigo); text-decoration:underline; cursor:pointer; font-weight:600;
}
.example-line{ font-size:1.05rem; color:var(--ink-soft); opacity:.9; margin-top:.15rem !important; }
.solo-input-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:1rem 1.1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.65rem;
}
.solo-input-card textarea{
  width:100%; resize:vertical; min-height:3.4rem;
  font-family:"Noto Serif SC",serif; font-size:1.1rem; line-height:1.6;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:10px;
  padding:.6rem .75rem;
}
.solo-input-actions{ display:flex; justify-content:flex-end; align-items:center; gap:.6rem; }
.mic-btn{
  border:1px solid var(--rule); background:none; border-radius:999px; padding:.5rem 1rem;
  font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.mic-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.mic-btn.recording{ border-color:var(--cinnabar); color:var(--cinnabar-ink); background:var(--cinnabar-tint); }
.solo-error{ margin:0; font-size:.78rem; color:var(--cinnabar-ink); }
.solo-error-actions{ display:flex; gap:.6rem; }
.link-btn{ background:none; border:none; padding:0; font-size:.75rem; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
.solo-complete{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:1.5rem 0 .5rem; }
.solo-score{ font-family:"IBM Plex Mono",monospace; font-size:1.15rem; font-weight:600; margin:0; }

/* completion + progress */
.complete-row{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--rule); text-align:center; }
.btn.ghost.done{ border-color:var(--jade); color:var(--jade-ink); cursor:default; }
.complete-hint{ margin:.5rem 0 0; font-size:.72rem; color:var(--ink-faint); }
.level-progress{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:12px;
  padding:.85rem 1.1rem; margin-bottom:1.5rem;
}
.level-progress .meta{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.level-progress .meta b{ color:var(--ink); font-family:"IBM Plex Mono",monospace; }
.done-check{ color:var(--jade-ink); font-weight:700; font-size:.75rem; }

/* review flashcards */
.review-card{
  width:100%; max-width:26rem; background:var(--paper-raised); border:1px solid var(--rule);
  border-radius:18px; padding:1.75rem 1.5rem; text-align:center; box-shadow:var(--shadow);
  min-height:9rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
}
.review-card.revealed{ justify-content:flex-start; }
.review-word{ font-size:2.4rem; margin:0; color:var(--accent-c, var(--ink)); }
.review-back{ width:100%; margin-top:.75rem; padding-top:.9rem; border-top:1px dashed var(--rule); }
.review-pinyin{ font-style:italic; color:var(--ink-soft); font-size:1rem; margin:0; }
.review-gloss{ font-size:1.05rem; color:var(--ink); margin:.4rem 0 0; }
.review-examples{ margin-top:1rem; text-align:left; display:flex; flex-direction:column; gap:.75rem; }
.review-example{
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:10px; padding:.6rem .8rem;
}
.example-cn{ font-size:1.05rem; margin:0; line-height:1.7; color:var(--ink); }
.example-cn ruby.hz rb{ border-bottom-color:color-mix(in srgb, var(--accent-c, var(--ink-faint)) 45%, transparent); }
.example-cn .vocab-lvl-run{ color:var(--accent-c); }
.example-fr{ font-size:.75rem; color:var(--ink-soft); margin:.3rem 0 0; }
.vocab-legend{
  display:flex; flex-wrap:wrap; gap:.15rem .7rem; margin-top:.85rem;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--ink-faint);
}
.vocab-legend span{ display:inline-flex; align-items:center; gap:.3rem; }
.vocab-legend .dot{ width:.5rem; height:.5rem; border-radius:50%; display:inline-block; background:var(--accent-c); }

.review-screen{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:56vh; padding:1rem 0 2rem;
}

.grade-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; width:100%; max-width:26rem; }
.grade-btn{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  border:none; border-radius:12px; padding:.6rem .3rem; cursor:pointer;
  font-family:"Noto Serif SC",serif; font-size:1.05rem; font-weight:700; color:var(--paper);
}
.grade-sub{ font-family:"Public Sans",sans-serif; font-size:.62rem; font-weight:400; opacity:.85; }
.grade-btn.again{ background:var(--cinnabar-ink); }
.grade-btn.hard{ background:var(--bronze); }
.grade-btn.good{ background:var(--jade-ink); }
.grade-btn.easy{ background:var(--indigo); }
@media (max-width:420px){
  .grade-btn{ font-size:.92rem; padding:.55rem .2rem; }
  .grade-sub{ font-size:.56rem; }
}

/* auth modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,16,10,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1.25rem; z-index:50;
}
.modal-card{
  position:relative; width:100%; max-width:22rem; background:var(--paper-raised);
  border:1px solid var(--rule); border-radius:16px; padding:1.75rem 1.5rem 1.5rem;
  box-shadow:var(--shadow);
}
.modal-close{
  position:absolute; top:.75rem; right:.75rem; background:none; border:none;
  color:var(--ink-faint); font-size:1rem; cursor:pointer; padding:.25rem;
}
.modal-close:hover{ color:var(--ink); }
.modal-title{ margin:0 0 1rem; font-family:"Fraunces",Georgia,serif; font-size:1.3rem; }
.modal-line{ font-size:.9rem; line-height:1.6; margin:0 0 1.25rem; }
.modal-line .muted{ color:var(--ink-soft); font-size:.8rem; }
.modal-error{ background:var(--cinnabar-tint); color:var(--cinnabar-ink); border-radius:8px; padding:.5rem .75rem; font-size:.8rem; margin:0 0 1rem; }
#auth-form, #delete-form{ display:flex; flex-direction:column; gap:.9rem; }
.btn.primary.danger{ background:var(--cinnabar-ink); border-color:var(--cinnabar-ink); }
.acct-danger{ text-align:center; margin:1.2rem 0 0; font-size:.8rem; }
.acct-danger .link-btn{ color:var(--ink-faint); }
.field{ display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; color:var(--ink-soft); font-weight:600; }
.field input{
  font-family:"Public Sans",sans-serif; font-size:.9rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:.55rem .7rem;
}
.field input:focus-visible{ outline:2px solid var(--indigo); outline-offset:1px; }
.modal-switch{ display:block; width:100%; text-align:center; margin-top:1.1rem; font-size:.78rem; }

.btn{
  border:none; border-radius:999px; padding:.6rem 1.3rem; font-size:.85rem; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
}
.btn.primary{ background:var(--indigo); color:var(--paper); }
.btn.primary:disabled{ opacity:.4; cursor:default; }
.btn.ghost{ background:none; border:1px solid var(--rule); color:var(--ink-soft); }
.btn.ghost:hover{ border-color:var(--indigo); color:var(--indigo); }

/* "Nouveau vocabulaire": heads-up of the words met for the first time in
   this dialogue, shown above the Lecture / À deux / Solo tabs */
.vp{ margin:0 0 1.1rem; border:1px solid var(--rule); border-radius:14px; background:var(--paper-raised); }
.vp-head{
  width:100%; display:flex; align-items:center; gap:.5rem; background:none; border:none; cursor:pointer;
  padding:.8rem 1rem; font:inherit; color:var(--ink); text-align:left;
}
.vp-head .eyebrow{ margin:0; color:var(--accent-c); flex:1; }
.vp-head .chev{ color:var(--ink-faint); font-size:.75rem; transition:transform .15s ease; }
.vp.open .vp-head .chev{ transform:rotate(180deg); }
.vp-body{ display:none; padding:0 1rem 1rem; }
.vp.open .vp-body{ display:block; }
.vp-hint{ margin:0 0 .7rem; font-size:.75rem; color:var(--ink-soft); }
.vp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr)); gap:.45rem; }
.vp-word{ border:1px solid var(--rule); border-radius:10px; padding:.45rem .6rem; background:var(--paper); min-width:0; }
.vp-py{ display:block; font-size:.7rem; font-style:italic; color:var(--ink-soft); }
.vp-hz{ display:block; font-size:1.2rem; line-height:1.35; }
.vp-fr{ display:block; font-size:.72rem; line-height:1.35; color:var(--ink-soft); overflow-wrap:anywhere; }
.vp-more{ margin-top:.6rem; font-size:.75rem; }
/* « Les nombres » */
.num-page .level-head .badge-lg{ font-size:1.4rem; }
.num-sec{ border:1px solid var(--rule); border-radius:14px; background:var(--paper-raised); padding:1rem 1.1rem; margin-bottom:.8rem; }
.num-sec h2{ margin:0 0 .3rem; font-size:1rem; }
.num-sec p.gx{ margin:0 0 .6rem; font-size:.88rem; line-height:1.95; }
.num-exs{ display:grid; gap:.35rem; }
.num-ex{ display:grid; grid-template-columns:minmax(5.5rem, 9rem) 1fr auto; gap:.6rem; align-items:center; padding:.35rem 0; border-top:1px dashed var(--rule); }
.num-what{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-soft); }
.num-zh .hanzi{ font-size:1.2rem; margin-right:.5rem; }
.num-py{ font-size:.8rem; font-style:italic; color:var(--ink-soft); }
.num-note{ display:block; font-size:.72rem; color:var(--ink-faint); line-height:1.8; }
.num-say, .num-play{ background:none; border:1px solid var(--rule); border-radius:999px; padding:.25rem .55rem; cursor:pointer; font-size:.85rem; color:var(--ink); }
.num-say:hover, .num-play:hover{ border-color:var(--accent-c); }
.num-play{ font-size:1rem; padding:.6rem 1.2rem; font-weight:600; }
.num-cta{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center; flex-direction:column; margin:1.2rem 0 .4rem; }
.num-modes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; margin-bottom:1rem; }
@media (max-width:600px){ .num-modes{ grid-template-columns:1fr 1fr; } .num-ex{ grid-template-columns:5rem 1fr auto; } }
.num-mode{ display:flex; flex-direction:column; gap:.15rem; align-items:flex-start; text-align:left; background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:.7rem .8rem; cursor:pointer; color:var(--ink); font:inherit; }
.num-mode span{ font-size:.72rem; color:var(--ink-soft); }
.num-mode.active{ border-color:var(--accent-c); box-shadow:0 0 0 1px var(--accent-c); }
.num-mode:disabled{ opacity:.45; cursor:not-allowed; }
.num-ranges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.chip{ border:1px solid var(--rule); background:var(--paper); border-radius:999px; padding:.35rem .8rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.chip.active{ border-color:var(--accent-c); color:var(--accent-c); background:color-mix(in srgb, var(--accent-c) 10%, var(--paper)); }
.num-q{ text-align:center; border:1px solid var(--rule); border-radius:16px; background:var(--paper-raised); padding:1.2rem 1rem 1rem; }
.num-big{ font-size:2.4rem; line-height:1.3; margin:.4rem 0 .2rem; font-weight:600; overflow-wrap:anywhere; }
.num-options{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:1rem 0 .5rem; }
@media (max-width:480px){ .num-options{ grid-template-columns:1fr; } }
.num-opt{ display:flex; flex-direction:column; gap:.15rem; align-items:center; background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:.7rem; cursor:pointer; color:var(--ink); font:inherit; font-size:1.3rem; }
.num-opt:hover:not(:disabled){ border-color:var(--accent-c); }
.num-opt.right{ border-color:var(--jade-ink); background:var(--jade-tint); }
.num-opt.wrong{ border-color:var(--cinnabar-ink); background:var(--cinnabar-tint); }
.num-opt:disabled{ cursor:default; }
.num-answer{ display:flex; gap:.5rem; justify-content:center; margin:1rem 0 .5rem; }
.num-answer input{ font:inherit; font-size:1.2rem; text-align:center; width:12rem; max-width:60vw; padding:.5rem .7rem; border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink); }
.num-answer input:focus-visible{ outline:2px solid var(--accent-c); outline-offset:1px; }
.verdict.bad{ color:var(--cinnabar-ink); }
.num-q .verdict{ font-size:.95rem; }
.num-quit{ display:block; margin:.8rem auto 0; }
.num-review{ text-align:left; border:1px solid var(--rule); border-radius:12px; padding:.6rem .9rem; background:var(--paper-raised); }
.num-review p{ margin:.3rem 0; font-size:.88rem; }
.home-numbers{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px; padding:1rem 1.2rem; margin:0 0 1.5rem;
}
.home-numbers:hover{ border-color:var(--cinnabar); }
.home-numbers .hz{ font-size:1.8rem; color:var(--cinnabar-ink); }
.home-numbers b{ display:block; }
.home-numbers span.meta{ font-size:.8rem; color:var(--ink-soft); }
.home-numbers .go{ margin-left:auto; color:var(--cinnabar-ink); font-weight:700; }
/* « Écrire » */
.w-h2{ font-size:1rem; margin:1.6rem 0 .5rem; }
.w-types{ grid-template-columns:repeat(2, 1fr); }
.w-card{ border:1px solid var(--rule); border-radius:16px; background:var(--paper-raised); padding:1.1rem 1.1rem 1rem; }
.w-instr{ margin:.2rem 0 .3rem; font-weight:700; }
.w-fr-prompt{ margin:.2rem 0 .8rem; color:var(--ink-soft); }
.w-fr-prompt.big{ font-size:1.15rem; color:var(--ink); font-weight:600; }
.w-built{ min-height:3.2rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.5rem; border:2px dashed var(--rule); border-radius:12px; margin-bottom:.7rem; }
.w-built.ok{ border-color:var(--jade-ink); border-style:solid; } .w-built.bad{ border-color:var(--cinnabar-ink); border-style:solid; }
.w-placeholder{ color:var(--ink-faint); font-size:.85rem; }
.w-pool{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem; }
.w-tok{ font-family:"Noto Serif SC",serif; font-size:1.25rem; background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:.35rem .7rem; cursor:pointer; color:var(--ink); }
.w-tok:hover:not(:disabled){ border-color:var(--accent-c); }
.w-tok.ghost{ opacity:.25; cursor:default; }
.w-actions{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; align-items:center; margin-top:.8rem; }
.w-actions.start{ justify-content:flex-start; }
.w-page textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:1.1rem; padding:.6rem .7rem; border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink); resize:vertical; }
.w-gap{ font-size:1.6rem; line-height:1.8; margin:.4rem 0; }
.w-slot{ display:inline-block; min-width:2.2rem; text-align:center; border-bottom:2px solid var(--accent-c); margin:0 .15rem; color:var(--accent-c); }
.w-slot.ok{ color:var(--jade-ink); border-color:var(--jade-ink); } .w-slot.bad{ color:var(--cinnabar-ink); border-color:var(--cinnabar-ink); }
.w-options{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
@media (max-width:480px){ .w-options{ grid-template-columns:repeat(2, 1fr); } .w-types{ grid-template-columns:1fr; } }
.w-opt{ font-size:1.5rem; padding:.6rem; border:1px solid var(--rule); border-radius:12px; background:var(--paper); cursor:pointer; color:var(--ink); }
.w-opt:hover:not(:disabled){ border-color:var(--accent-c); }
.w-opt.right{ border-color:var(--jade-ink); background:var(--jade-tint); } .w-opt.wrong{ border-color:var(--cinnabar-ink); background:var(--cinnabar-tint); }
.w-feedback{ margin-top:1rem; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--rule); background:var(--paper); }
.w-feedback.ok{ border-color:color-mix(in srgb, var(--jade-ink) 50%, var(--rule)); } .w-feedback.bad{ border-color:color-mix(in srgb, var(--cinnabar-ink) 50%, var(--rule)); }
.verdict-big{ margin:0 0 .5rem; font-weight:800; }
.w-feedback.ok .verdict-big{ color:var(--jade-ink); } .w-feedback.bad .verdict-big{ color:var(--cinnabar-ink); }
.w-zh{ font-size:1.4rem; margin:.2rem 0 0; }
.w-py{ font-style:italic; color:var(--ink-soft); margin:.1rem 0 0; font-size:.9rem; }
.w-fr{ color:var(--ink-soft); margin:.1rem 0 0; font-size:.85rem; }
.w-why{ margin:.7rem 0 0; font-size:.9rem; line-height:1.6; }
.w-diff{ font-size:1.3rem; line-height:1.9; margin:.2rem 0; }
.w-del{ color:var(--cinnabar-ink); text-decoration:line-through; background:var(--cinnabar-tint); border-radius:3px; }
.w-ins{ color:var(--jade-ink); text-decoration:none; background:var(--jade-tint); border-radius:3px; font-weight:700; }
.w-quit{ display:block; margin:.9rem auto 0; }
.w-misses{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr)); gap:.45rem; }
.w-miss{ display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:10px; padding:.45rem .6rem; background:var(--paper-raised); }
.w-miss .hanzi{ font-size:1.2rem; }
.w-miss .link-btn{ align-self:flex-start; margin-top:.25rem; }
.home-writing .hz{ color:var(--teal-ink); }
/* home categories */
.home-cats{ display:grid; gap:.8rem; margin:0 0 1.6rem; }
.home-cat{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.2rem; border-radius:18px; cursor:pointer;
  background:var(--paper-raised); border:1px solid var(--rule); color:var(--ink); font:inherit; text-align:left; }
.home-cat .hz{ flex:none; width:3.2rem; height:3.2rem; display:grid; place-items:center; border-radius:14px; font-size:1.6rem;
  background:color-mix(in srgb, var(--indigo) 12%, var(--paper-raised)); color:var(--indigo); }
.home-cat .txt{ flex:1; display:flex; flex-direction:column; gap:.15rem; }
.home-cat b{ font-size:1.1rem; }
.home-cat .sub{ font-size:.85rem; color:var(--ink-soft); }
.home-cat .go{ color:var(--ink-faint); font-size:1.2rem; }
.home-cat:hover{ border-color:var(--indigo); }
.home-cat[style*="--acc"] .hz{ background:var(--acc-tint); color:var(--acc); }
.rev-list{ gap:.5rem; }
.rev-row{ padding:.7rem 1rem; border-radius:14px; }
.rev-row .hz{ width:2.6rem; height:2.6rem; font-size:.95rem; font-weight:700; border-radius:12px; }
.rev-row b{ font-size:1rem; }
.rev-row .sub.due{ color:var(--acc); font-weight:700; }
.hub-section{ margin:0 0 .6rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.hub-lead{ margin:-.2rem 0 .8rem; font-size:.9rem; color:var(--ink-soft); }
.hub-head{ margin-bottom:1.5rem; }
.hub-head h1{ margin:0 0 .3rem; font-family:"Fraunces",Georgia,serif; font-size:1.6rem; }
.hub-head h1 .hz{ color:var(--ink-soft); font-weight:500; }
.hub-head p{ margin:0; color:var(--ink-soft); }
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-card{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; text-align:left; padding:1.1rem 1.2rem; border-radius:16px;
  background:var(--paper-raised); border:1px solid var(--rule); color:var(--ink); font:inherit; cursor:pointer; }
.cat-card.static{ cursor:default; }
button.cat-card:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.cat-card .hz{ font-size:1.8rem; color:var(--indigo); }
.cat-card b{ font-size:1.05rem; }
.cat-card .meta{ font-size:.82rem; color:var(--ink-soft); }
/* translation */
.tr-toggle{
  display:flex; align-items:center; gap:.4rem; margin:1.75rem auto 0; cursor:pointer;
  background:none; border:1px solid var(--rule); border-radius:999px; padding:.4rem .9rem;
  font-size:.75rem; font-weight:600; color:var(--ink-soft);
}
.tr-toggle:hover{ border-color:var(--indigo); color:var(--indigo); }
.tr-toggle .chev{ transition:transform .15s ease; }
.tr-toggle.open .chev{ transform:rotate(180deg); }
.tr-block{
  margin-top:.9rem; padding:1rem 1.1rem; border-radius:12px;
  background:var(--paper-alt); border:1px dashed var(--rule);
  font-size:.8rem; line-height:1.75; color:var(--ink-soft);
  display:none;
}
.tr-block.open{ display:block; }
.tr-block .ln{ margin:0 0 .15rem; }
.tr-block .tag{ font-weight:700; color:var(--ink); }

.center-note{ text-align:center; color:var(--ink-soft); font-size:.85rem; margin:.5rem 0 1.5rem; }

footer.colophon{
  margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--rule);
  text-align:center; font-size:.75rem; color:var(--ink-faint);
}

@media (max-width:600px){
  .level-grid{ grid-template-columns:1fr; }
  .theme-grid{ grid-template-columns:1fr; }
  .hiw-grid{ grid-template-columns:1fr; }
  .hero .hz{ font-size:2.4rem; }
  .bubble{ max-width:86%; }
  .topbar{ flex-wrap:wrap; row-gap:.5rem; }
  .topbar .crumb{ border-left:none; padding-left:0; margin-left:0; order:3; flex-basis:100%; }
  .dlg-select{ max-width:none; flex:1; }
}