:root {
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left,   0px);
  --safe-r: env(safe-area-inset-right,  0px);
}
[data-theme="dark"] {
  --bg:        #0e1215;
  --surf:      #161c21;
  --surf2:     #1d252c;
  --bdr:       rgba(255,255,255,.08);
  --txt:       #e8f0f4;
  --muted:     #8fa4b0;
  --faint:     #4a5c68;
  --red:       #d9705a;
  --red-bg:    rgba(217,112,90,.15);
  --green:     #68bf8a;
  --green-bg:  rgba(104,191,138,.14);
  --blue:      #64a0e6;
  --blue-bg:   rgba(100,160,230,.15);
  --sh:        0 28px 70px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.3);
  --tabbar:    rgba(14,18,21,.88);
  --bar-bg:    rgba(255,255,255,.18);
  --bar-act:   rgba(255,255,255,.92);
}
[data-theme="light"] {
  --bg:        #f0ebe4;
  --surf:      #faf6f1;
  --surf2:     #ffffff;
  --bdr:       rgba(0,0,0,.08);
  --txt:       #1c1510;
  --muted:     #7a6d63;
  --faint:     #b0a49a;
  --red:       #b04030;
  --red-bg:    rgba(176,64,48,.11);
  --green:     #3a7a56;
  --green-bg:  rgba(58,122,86,.11);
  --blue:      #2560b0;
  --blue-bg:   rgba(37,96,176,.11);
  --sh:        0 28px 70px rgba(28,21,16,.18), 0 4px 14px rgba(28,21,16,.08);
  --tabbar:    rgba(240,235,228,.92);
  --bar-bg:    rgba(0,0,0,.18);
  --bar-act:   rgba(0,0,0,.85);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body {
  width:100%; height:100%; height:100dvh;
  overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
body {
  font-family:-apple-system,'Helvetica Neue',sans-serif;
  background:var(--bg); color:var(--txt);
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
}
button { font:inherit; color:inherit; border:none; background:none; cursor:pointer; }

/* ── ROOT LAYOUT ── */
.root {
  width:100%; max-width:860px;
  height:100dvh;
  display:grid;
  grid-template-rows: 1fr auto;
  box-shadow:0 0 60px rgba(0,0,0,.4);
}

/* ── SCREENS ── */
.screens {
  overflow:hidden; position:relative;
}
.screen {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding-top:    max(14px, var(--safe-t));
  padding-left:   max(16px, var(--safe-l));
  padding-right:  max(16px, var(--safe-r));
  padding-bottom: 8px;
  gap:10px;
  opacity:0; pointer-events:none;
  transition: opacity 220ms ease;
}
.screen.active { opacity:1; pointer-events:all; }

/* ── TAB BAR ── */
.tabbar {
  display:flex;
  background: var(--tabbar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--bdr);
  padding-bottom: max(4px, var(--safe-b));
  padding-top: 2px;
}
.tab {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1px; padding:4px 0;
  color:var(--faint);
  transition: color 180ms ease;
  min-height:36px;
}
.tab.active { color:var(--blue); }
.tab svg { width:16px; height:16px; }
.tab span { font-size:.52rem; font-weight:600; letter-spacing:.02em; }

/* ══════════════════════════════
   SCREEN 1 — FLASHCARDS
══════════════════════════════ */
.header {
  display:flex; align-items:center; justify-content:space-between;
}
.brand { display:flex; align-items:center; gap:10px; }
.logo {
  width:34px; height:34px; flex-shrink:0;
  border-radius:10px; background:var(--red-bg); border:1px solid var(--bdr);
  display:grid; place-items:center; font-size:14px; line-height:1;
  color:var(--red);
}
.title   { font-size:.95rem; font-weight:700; line-height:1.1; }
.sub     { font-size:.62rem; color:var(--faint); margin-top:0px; }
.hdr-stats { display:flex; gap:14px; align-items:center; }
.st { text-align:center; }
.st .v { font-size:.92rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
.st .l { font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
#sKnown .v  { color:var(--green); }
#sRepaso .v { color:var(--blue); }
.icon-btn {
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:var(--surf); border:1px solid var(--bdr); color:var(--muted);
}
.sort-btn { width:auto; border-radius:999px; padding:0 10px; gap:4px; display:flex; flex-direction:row; }
.icon-btn:active { opacity:.6; }

/* deck */
.deck-wrap { position:relative; flex:1; }
.deck      { position:absolute; inset:0; }

/* card */
.card {
  position:absolute; inset:0; border-radius:24px;
  background:var(--surf2); border:1px solid var(--bdr);
  box-shadow:var(--sh); overflow:hidden;
  touch-action:none; user-select:none;
  display:flex; flex-direction:column;
}
.card::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 55% 30% at 80% 8%,  rgba(217,112,90,.07),transparent),
    radial-gradient(ellipse 45% 25% at 15% 92%, rgba(104,191,138,.05),transparent);
}
.card.stack-under { transform:scale(.97) translateY(8px); opacity:.5; z-index:0; }
.card.top   { z-index:1; }
.card.fly   { transition:transform 230ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease; }
.card.snap  { transition:transform 260ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease; }

.tint { position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; opacity:0; }
.tint-l { background:rgba(143,164,176,.2); }
.tint-r { background:var(--green-bg); }
.tint-u { background:var(--blue-bg); }
.chip { position:absolute; top:52px; z-index:3; padding:4px 12px; border-radius:999px; font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:0; pointer-events:none; }
.chip-l { left:16px;  background:rgba(143,164,176,.25); color:var(--muted); }
.chip-r { right:16px; background:var(--green-bg); color:var(--green); }
.chip-u { left:50%; transform:translateX(-50%); top:18px; background:var(--blue-bg); color:var(--blue); }

/* story bar */
.story-bar { position:relative; z-index:4; display:flex; gap:5px; padding:14px 14px 0; }
.seg { flex:1; height:3px; border-radius:2px; background:var(--bar-bg); }
.seg.active { background:var(--bar-act); }

/* tap zones */
.tap-zones { position:absolute; inset:0; z-index:5; display:grid; grid-template-columns:28% 1fr 28%; pointer-events:none; }
.tz { pointer-events:auto; background:transparent; -webkit-tap-highlight-color:transparent; }

/* card body */
.card-body {
  position:relative; z-index:3; flex:1;
  display:flex; flex-direction:column;
  padding:10px 20px 18px; overflow:hidden;
}
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.prog { font-size:.62rem; color:var(--faint); }

/* HSK pills */
.hsk-pill { padding:4px 11px; border-radius:999px; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hsk-1 { background:rgba(220,158,40,.14);  color:#d89e32; border:1px solid rgba(220,158,40,.28); }
.hsk-2 { background:rgba(42,118,136,.16);  color:#3a9aaf; border:1px solid rgba(42,118,136,.30); }
.hsk-3 { background:rgba(210,95,30,.14);   color:#c8612a; border:1px solid rgba(210,95,30,.28); }
.hsk-4 { background:rgba(168,28,38,.16);   color:#c04050; border:1px solid rgba(168,28,38,.30); }
.hsk-5 { background:rgba(55,90,148,.20);   color:#6890c8; border:1px solid rgba(55,90,148,.38); }
.hsk-6 { background:rgba(118,60,115,.16);  color:#9e6e9c; border:1px solid rgba(118,60,115,.30); }

/* hanzi — fills remaining space, always centred */
.hanzi-wrap {
  flex:1; display:flex; align-items:center; justify-content:center;
}
.hanzi {
  font-family:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  font-size:130px; font-weight:400; line-height:1;
  color:var(--txt); -webkit-text-fill-color:var(--txt);
}

/* answer block fades in below */
.answer-area {
  min-height:90px; display:flex; flex-direction:column;
  align-items:center; gap:6px; padding-top:6px;
}
.answer-block { width:100%; display:flex; flex-direction:column; align-items:center; gap:7px; animation:fadeUp 180ms ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.ans-pinyin  { font-size:1.25rem; font-weight:600; color:var(--txt); }
.ans-meaning { font-size:.9rem; color:var(--muted); }
.ans-example {
  margin-top:2px; background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:9px 14px;
  font-size:.78rem; text-align:center; line-height:1.4; width:100%;
}
.ans-example span { display:block; font-size:.56rem; font-weight:700; letter-spacing:.07em; color:var(--faint); margin-bottom:2px; }
.ans-example strong { color:var(--txt); }
.ans-example em { color:var(--faint); font-style:italic; }
.ans-hint { font-size:.56rem; color:var(--faint); margin-top:2px; }
.tap-hint { font-size:.56rem; color:var(--faint); text-align:center; }

/* card bottom */
.card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }

/* pages slider */
.pages { position:absolute; inset:0; display:flex; transition:transform 280ms cubic-bezier(0.4,0,0.2,1); will-change:transform; }
.page { min-width:100%; height:100%; display:flex; flex-direction:column; padding:10px 20px 18px; overflow:hidden; }

/* info page */
.page.info-page { gap:10px; overflow-y:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; }
.page.info-page::-webkit-scrollbar { display:none; }
.info-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; }
.info-cell { background:var(--surf); border:1px solid var(--bdr); border-radius:14px; padding:9px 12px; }
.info-cell .lbl { font-size:.57rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); margin-bottom:2px; }
.info-cell .val { font-size:.88rem; font-weight:600; color:var(--txt); line-height:1.3; }
.info-cell.full { grid-column:1/-1; }
.words-title { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); width:100%; }
.words-list { background:var(--surf); border:1px solid var(--bdr); border-radius:16px; overflow:hidden; width:100%; }
.word-item { padding:9px 13px; font-size:.78rem; color:var(--muted); line-height:1.4; border-bottom:1px solid var(--bdr); display:flex; flex-direction:column; gap:1px; }
.word-item:last-child { border-bottom:none; }
.word-item strong { color:var(--txt); font-size:.9rem; font-family:'PingFang SC','Hiragino Sans GB',sans-serif; }

/* collapsible word groups in modal */
.word-group { border-bottom:1px solid var(--bdr); }
.word-group:last-child { border-bottom:none; }
.word-group-header {
  width:100%; display:flex; align-items:center; gap:6px;
  padding:9px 13px; font-size:.72rem; font-weight:700;
  color:var(--muted); text-align:left; cursor:pointer;
}
.word-group-header span:first-child { flex:1; }
.word-group-count {
  font-size:.6rem; background:var(--bdr); color:var(--faint);
  border-radius:999px; padding:1px 7px; font-weight:600;
}
.word-group-chev { transition:transform 200ms ease; flex-shrink:0; }
.word-group-chev.open { transform:rotate(180deg); }
.word-group-body { overflow:hidden; transition:max-height 250ms ease, opacity 200ms ease; max-height:2000px; opacity:1; }
.word-group-body.collapsed { max-height:0; opacity:0; }
.word-pinyin  { font-size:.7rem; color:var(--muted); }
.word-meaning { font-size:.7rem; color:var(--faint); }

/* done */
.done {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:28px;
  background:var(--surf2); border:1px solid var(--bdr); border-radius:24px; box-shadow:var(--sh);
}
.done-emoji { font-size:2.8rem; }

/* ── PHRASE CARDS ── */
.phrase-card {
  position:absolute; inset:0;
  background:var(--surf); border:1px solid var(--bdr); border-radius:24px;
  display:flex; align-items:stretch; justify-content:center;
  cursor:grab; user-select:none; -webkit-user-select:none;
  will-change:transform; overflow:hidden;
}
.phrase-inner {
  padding:24px 24px; display:flex; flex-direction:column; gap:8px; width:100%;
  overflow:hidden;
}
.phrase-hanzi {
  font-family:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  font-size:2.8rem; font-weight:400; line-height:1; color:var(--txt); flex-shrink:0;
}
.phrase-pinyin { font-size:.9rem; color:var(--muted); font-weight:300; flex-shrink:0; }
.phrase-literal { font-size:.75rem; color:var(--faint); font-style:italic; flex-shrink:0; }
.phrase-divider { height:1px; background:var(--bdr); margin:2px 0; flex-shrink:0; }
.phrase-meaning { font-size:.8rem; color:var(--txt); line-height:1.6; font-weight:300; flex-shrink:0; }
.phrase-origin { font-size:.72rem; color:var(--faint); line-height:1.5; flex-shrink:0; }
.phrase-img { width:100%; border-radius:12px; object-fit:contain; flex:1; min-height:0; max-height:200px; margin-top:4px; mix-blend-mode:multiply; }
[data-theme="dark"] .phrase-img { mix-blend-mode:screen; }
.done h2 { font-size:1.2rem; font-weight:700; }
.done p  { font-size:.84rem; color:var(--muted); }
.done-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:4px; }
.pill { min-height:44px; padding:10px 16px; border-radius:999px; background:var(--surf); border:1px solid var(--bdr); font-size:.8rem; font-weight:600; }
.pill:active { opacity:.7; transform:scale(.96); }

/* ══════════════════════════════
   SCREEN 2 — HSK GROUPS
══════════════════════════════ */
.groups-header {
  display:flex; align-items:center; justify-content:space-between;
}
.groups-title { font-size:1.1rem; font-weight:700; }
.groups-sub   { font-size:.65rem; color:var(--faint); margin-top:1px; }

.groups-scroll {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:16px;
  padding-bottom:4px;
}
.groups-legend { display:flex; gap:14px; padding:0 2px 4px; }
.groups-legend-item { display:flex; align-items:center; gap:5px; font-size:.6rem; color:var(--faint); }
.groups-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.known-dot  { background:var(--green); }
.review-dot { background:var(--blue); }

.groups-scroll::-webkit-scrollbar { width:3px; }
.groups-scroll::-webkit-scrollbar-track { background:transparent; }
.groups-scroll::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:999px; }
.groups-scroll::-webkit-scrollbar-thumb:hover { background:var(--muted); }
.groups-scroll { scrollbar-width:thin; scrollbar-color:var(--bdr) transparent; }

/* search bar */
.search-bar-wrap {
  display:none; align-items:center; gap:8px;
  background:var(--surf); border:1px solid var(--bdr); border-radius:12px;
  padding:0 10px; height:36px; flex-shrink:0;
}
.search-bar-wrap.open { display:flex; }
.search-bar-wrap input {
  flex:1; background:none; border:none; outline:none;
  font:inherit; font-size:.82rem; color:var(--txt);
  -webkit-text-fill-color:var(--txt);
}
.search-bar-wrap input::placeholder { color:var(--faint); opacity:.5; }
#searchClear { display:grid; place-items:center; color:var(--faint); padding:0; }

.hsk-group { display:flex; flex-direction:column; gap:8px; }
.hsk-group-header {
  display:flex; align-items:center; justify-content:space-between;
}
.hsk-group-label {
  display:flex; align-items:center; gap:8px;
}
.hsk-group-label .badge {
  padding:4px 12px; border-radius:999px;
  font-size:.65rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.hsk-group-label .count { font-size:.72rem; color:var(--faint); }
.hsk-prog-bar {
  height:4px; background:var(--bdr); border-radius:2px; overflow:hidden; flex:1; max-width:80px;
}
.hsk-prog-fill { height:100%; border-radius:2px; transition:width 400ms ease; }
.hsk-1-fill { background:#d89e32; }
.hsk-2-fill { background:#3a9aaf; }
.hsk-3-fill { background:#c8612a; }
.hsk-4-fill { background:#c04050; }
.hsk-5-fill { background:#6890c8; }
.hsk-6-fill { background:#9e6e9c; }
.hsk-full-bar {
  height:5px; background:var(--bdr); border-radius:3px; overflow:hidden; width:100%;
}
.hsk-full-bar-fill { height:100%; border-radius:3px; transition:width 400ms ease; }

.char-grid-wrap {
  overflow:hidden;
  transition: max-height 320ms cubic-bezier(0.4,0,0.2,1), opacity 240ms ease, margin-top 320ms ease;
  max-height: 20000px;
  opacity: 1;
  margin-top: 0;
}
.char-grid-wrap.collapsed {
  max-height: 0 !important;
  opacity: 0;
  margin-top: -4px;
}
.char-grid {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:8px;
  padding-bottom:8px;
}
.char-grid-wrap { container-type:inline-size; }
@container (min-width:380px){ .char-grid { grid-template-columns: repeat(7, 1fr); } }
@container (min-width:440px){ .char-grid { grid-template-columns: repeat(8, 1fr); } }
@container (min-width:520px){ .char-grid { grid-template-columns: repeat(9, 1fr); } }
@container (min-width:600px){ .char-grid { grid-template-columns: repeat(10, 1fr); } }
@container (min-width:680px){ .char-grid { grid-template-columns: repeat(11, 1fr); } }
@container (min-width:760px){ .char-grid { grid-template-columns: repeat(12, 1fr); } }
.hsk-group-header {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hsk-group-header:active { opacity: .7; }
.chevron {
  width:16px; height:16px; color:var(--faint); flex-shrink:0;
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
}
.chevron.open { transform: rotate(180deg); }
.char-tile {
  aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:14px;
  background:var(--surf); border:1px solid var(--bdr);
  position:relative; cursor:pointer;
  transition: transform 120ms ease, background 120ms ease;
  user-select:none; -webkit-user-select:none;
}
.char-tile:active { transform:scale(.93); }
.char-tile .tc {
  font-family:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  font-size:26px; line-height:1; color:var(--txt);
  -webkit-text-fill-color:var(--txt);
}
.char-tile .tp { font-size:.52rem; color:var(--faint); margin-top:2px; }
.char-tile.known {
  background:var(--green-bg); border-color:rgba(104,191,138,.3);
}
.char-tile.known .tc { color:var(--green); -webkit-text-fill-color:var(--green); }
.char-tile.known .tp { color:var(--green); opacity:.6; }
.char-tile.repaso {
  background:var(--blue-bg); border-color:rgba(100,160,230,.3);
}
.char-tile.repaso .tc { color:var(--blue); -webkit-text-fill-color:var(--blue); }
.char-tile.repaso .tp { color:var(--blue); opacity:.6; }
.char-tile .toggle-btn { display:none; }

/* char detail modal */
.modal-backdrop {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:center;
  padding:0;
}
.modal-backdrop.open { display:flex; }
.modal {
  width:100%; max-width:480px;
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius:24px 24px 0 0;
  box-shadow:var(--sh);
  padding:20px 20px;
  padding-bottom:max(28px, var(--safe-b));
  display:flex; flex-direction:column; gap:14px;
  max-height:88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:slideUp 220ms cubic-bezier(0.16,1,0.3,1);
}
.modal::-webkit-scrollbar { display:none; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:36px; height:4px; border-radius:2px; background:var(--bdr); margin:0 auto 10px; }
.modal #modal-content .info-row { margin-top:-14px; }
.modal #modal-content .words-title { margin-top:6px; margin-bottom:-4px; }
.modal #modal-content .words-list { margin-top:6px; }

/* HSK filter pills */
.hsk-filter-row { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.hsk-filter-pill {
  padding:6px 4px; border-radius:999px; font-size:.6rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-align:center;
  opacity:.35; transition: opacity 150ms ease, transform 120ms ease;
  border: 1px solid transparent; width:100%;
}
.hsk-filter-pill.active { opacity:1; }
.hsk-filter-pill:active { transform:scale(.94); }
.filter-hint { font-size:.6rem; color:var(--faint); margin-top:2px; }
.status-filter-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.status-filter-pill {
  padding:6px 4px; border-radius:999px; font-size:.6rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-align:center;
  opacity:.35; transition: opacity 150ms ease, transform 120ms ease;
  border: 1px solid transparent; width:100%;
}
.status-filter-pill.active { opacity:1; }
.status-filter-pill:active { transform:scale(.94); }
.status-left   { background:rgba(143,164,176,.15); color:var(--muted); border-color:rgba(143,164,176,.3); }
.status-know   { background:var(--green-bg); color:var(--green); border-color:rgba(104,191,138,.28); }
.status-review { background:var(--blue-bg); color:var(--blue); border-color:rgba(100,160,230,.3); }
.profile-section { display:flex; flex-direction:column; gap:8px; }

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