@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700.ttf') format('truetype')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500 600;font-display:swap;src:url('fonts/cormorant-garamond-italic-500.ttf') format('truetype')}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/noto-serif-sc-400.ttf') format('truetype')}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/noto-serif-sc-600.ttf') format('truetype')}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/noto-serif-sc-700.ttf') format('truetype')}

:root{
  --paper: #f3ede0;
  --paper-2: #ece3d0;
  --ink: #2b2621;
  --ink-soft: #5b5347;
  --seal: #a8382b;
  --seal-dark: #832c22;
  --jade: #4c7a68;
  --jade-dark: #385c4f;
  --gold: #b9924a;
  --line: #d8cdb5;
  --card: #faf7ee;
  --shadow: 0 1px 2px rgba(43,38,33,.08), 0 4px 14px rgba(43,38,33,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--paper);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(168,56,43,.05), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(76,122,104,.06), transparent 45%);
  color: var(--ink);
  font-family: 'Noto Serif', Georgia, serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.hanzi{ font-family: 'Noto Serif SC', serif; }
.brush{ font-family: 'Ma Shan Zheng', cursive; }

/* ---------- layout ---------- */
.wrap{ max-width: 980px; margin: 0 auto; padding: 20px 16px 80px; }

header.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 6px 2px 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .stamp{
  width:46px; height:46px; border-radius:8px; background: var(--seal);
  color:#f3ede0; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif SC',serif; font-weight:700; font-size:20px;
  box-shadow: var(--shadow); transform: rotate(-3deg);
  flex-shrink:0;
}
.brand h1{ font-size: 22px; margin:0; letter-spacing:.02em; }
.brand p{ margin:2px 0 0; color:var(--ink-soft); font-size:12.5px; }

nav.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
nav.tabs a{
  border:1px solid var(--line); background: var(--card); color: var(--ink-soft);
  font-family:'Noto Serif',serif; font-size:14px; padding:8px 14px; border-radius:999px;
  cursor:pointer; transition: all .15s ease;
}
nav.tabs a:hover{ border-color: var(--seal); color: var(--seal); }
nav.tabs a.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

section.view{ display:none; animation: fadein .25s ease; }
section.view.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ---------- home ---------- */
.hero{
  display:grid; grid-template-columns: 1fr auto; gap: 26px; align-items:center;
  background: var(--card); border:1px solid var(--line); border-radius:18px;
  padding: 26px 28px; box-shadow: var(--shadow); margin-bottom:20px;
}
.hero h2{ font-size:26px; margin:0 0 8px; }
.hero p{ color:var(--ink-soft); margin:0 0 14px; line-height:1.55; max-width:46ch; }
.hero .cta{ display:flex; gap:10px; flex-wrap:wrap; }

.ring-wrap{ position:relative; width:132px; height:132px; flex-shrink:0; }
.ring-wrap svg{ width:100%; height:100%; transform: rotate(-90deg); }
.ring-wrap .center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-wrap .center b{ font-size:24px; }
.ring-wrap .center span{ font-size:11px; color:var(--ink-soft); }

.stats-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  text-align:center; box-shadow: var(--shadow);
}
.stat-card b{ display:block; font-size:22px; }
.stat-card span{ font-size:12px; color:var(--ink-soft); }
.stat-card.new b{ color:var(--gold); }
.stat-card.learn b{ color:var(--seal); }
.stat-card.known b{ color:var(--jade); }

.settings-box{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; box-shadow: var(--shadow);
}
.settings-box label{ font-size:13.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.settings-box input[type=number]{
  width:64px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px;
  background:#fff;
}

/* ---------- buttons ---------- */
.btn{
  border:none; cursor:pointer; font-family:'Noto Serif',serif; font-size:14px;
  padding:10px 18px; border-radius:10px; transition: transform .1s ease, box-shadow .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn.primary{ background:var(--seal); color:#fbf4e8; box-shadow: 0 3px 0 var(--seal-dark); }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--ink); }
.btn.jade{ background:var(--jade); color:#fbf4e8; box-shadow: 0 3px 0 var(--jade-dark); }
.btn.gold{ background: var(--gold); color:#3a2f16; }
.btn.small{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.btn:disabled{ opacity:.45; cursor:default; }

/* ---------- vocab grid ---------- */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.toolbar input[type=search]{
  flex:1; min-width:180px; padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14px; background:var(--card);
}
.filter-chip{
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 13px; font-size:12.5px;
  cursor:pointer; color:var(--ink-soft);
}
.filter-chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.vgrid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.vcard{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 12px;
  text-align:center; box-shadow: var(--shadow); cursor:pointer; position:relative; overflow:hidden;
  min-height:118px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.vcard .h{ font-size:30px; }
.vcard .p{ font-size:12.5px; color:var(--seal); min-height:16px; opacity:0; transition:opacity .15s; }
.vcard .r{ font-size:12px; color:var(--ink-soft); min-height:15px; opacity:0; transition:opacity .15s; }
.vcard.revealed .p, .vcard.revealed .r{ opacity:1; }
.vcard .badge{
  position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#c9bfa4;
}
.vcard.status-known .badge{ background:var(--jade); }
.vcard.status-learning .badge{ background:var(--seal); }
.vcard .mini-actions{ display:flex; gap:6px; margin-top:6px; }
.vcard .mini-actions button{
  font-size:11px; padding:3px 8px; border-radius:7px; border:1px solid var(--line); background:#fff; cursor:pointer;
}
.vcard .mini-actions button.yes{ color:var(--jade-dark); border-color:var(--jade); }
.vcard .mini-actions button.no{ color:var(--seal-dark); border-color:var(--seal); }

/* ---------- study (flashcards) ---------- */
.study-stage{ display:flex; flex-direction:column; align-items:center; gap:18px; padding: 10px 0 30px; }
.progress-line{ width:100%; max-width:420px; height:6px; background:var(--paper-2); border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.progress-line i{ display:block; height:100%; background:var(--jade); width:0%; transition:width .3s ease; }

.flip-card{
  width: min(420px, 90vw); min-height:260px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; box-shadow: var(--shadow); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:30px 20px; position:relative;
  background-image: radial-gradient(circle at 20% 20%, rgba(168,56,43,.04), transparent 40%);
}
.flip-card .box-tag{
  position:absolute; top:14px; left:16px; font-size:11px; color:var(--ink-soft);
  border:1px solid var(--line); padding:3px 9px; border-radius:999px; background:var(--paper);
}
.flip-card .big-hanzi{ font-size:64px; line-height:1; margin: 8px 0 4px; }
.flip-card .pinyin{ font-size:19px; color:var(--seal); min-height:26px; }
.flip-card .meaning{ font-size:16px; color:var(--ink-soft); min-height:22px; }
.flip-card .tap-hint{ font-size:12px; color:#a89b7d; margin-top:6px; }

.rate-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.rate-row button{ min-width:112px; }

.empty-state{ text-align:center; color:var(--ink-soft); padding: 50px 10px; }
.empty-state .hanzi{ font-size:40px; display:block; margin-bottom:10px; color:var(--gold); }

/* ---------- writing ---------- */
.write-stage{ display:flex; flex-wrap:wrap; gap:26px; justify-content:center; padding: 6px 0 20px; }
.write-left{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.grid-canvas-wrap{
  width:260px; height:260px; position:relative; background:#fffdf6; border:2px solid var(--ink); border-radius:6px;
  box-shadow: var(--shadow);
}
.grid-canvas-wrap svg.guide{ position:absolute; inset:0; width:100%; height:100%; }
.grid-canvas-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.grid-canvas-wrap .ghost-hanzi{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif SC',serif; font-size:190px; color: rgba(43,38,33,.12); pointer-events:none; user-select:none;
}
.write-controls{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.write-right{ display:flex; flex-direction:column; gap:14px; width:min(320px,90vw); }
.prompt-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center;
  box-shadow: var(--shadow);
}
.prompt-card .meaning{ font-size:19px; margin-bottom:6px; }
.prompt-card .pinyin{ font-size:16px; color:var(--seal); min-height:22px; }
.prompt-card .hanzi-reveal{ font-size:34px; margin-top:8px; min-height:42px; }

.pinyin-check{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.pinyin-check label{ font-size:13px; color:var(--ink-soft); display:block; margin-bottom:8px; }
.pinyin-check .row{ display:flex; gap:8px; }
.pinyin-check input[type=text]{
  flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:14px;
}
.pinyin-check .fb{ margin-top:10px; font-size:13.5px; min-height:18px; }
.pinyin-check .fb.ok{ color: var(--jade-dark); }
.pinyin-check .fb.bad{ color: var(--seal-dark); }

/* ---------- reading ---------- */
.sentence-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:14px;
  box-shadow: var(--shadow);
}
.sentence-zh{ font-size:23px; line-height:2.1; }
.tok{ cursor:pointer; padding:1px 2px; border-bottom:2px solid transparent; border-radius:3px; transition: background .12s; }
.tok.punct{ cursor:default; border-bottom:none; }
.tok.k-known{ border-color: var(--jade); }
.tok.k-learn{ border-color: var(--seal); }
.tok.k-new{ border-color: #c9bfa4; }
.tok:hover:not(.punct){ background: var(--paper-2); }
.tok-pop{
  display:none; font-size:12.5px; color:var(--ink-soft); background:#fffef9; border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; margin-top:8px;
}
.tok-pop.show{ display:block; }
.tok-pop b{ color:var(--seal); font-size:13px; }
.tok-pop .mark-known{ margin-left:10px; font-size:11px; padding:2px 8px; border-radius:6px; border:1px solid var(--jade); color:var(--jade-dark); background:#fff; cursor:pointer; }
.sentence-ru{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; display:none; }
.sentence-ru.show{ display:block; }
.sentence-foot{ margin-top:10px; display:flex; gap:10px; align-items:center; }
.readiness{ font-size:11px; padding:3px 9px; border-radius:999px; }
.readiness.full{ background: rgba(76,122,104,.15); color:var(--jade-dark); }
.readiness.partial{ background: rgba(185,146,74,.2); color:#7a5c1c; }
.readiness.low{ background: rgba(168,56,43,.1); color:var(--seal-dark); }

.hint-box{
  background: rgba(185,146,74,.12); border:1px dashed var(--gold); border-radius:14px; padding:16px 18px;
  color:#5c4a20; font-size:14px; margin-bottom:16px; line-height:1.5;
}

footer.app-foot{ text-align:center; color:#a89b7d; font-size:12px; margin-top: 40px; }

/* ---------- icon buttons (audio / stroke order) ---------- */
.icon-row{ display:flex; gap:6px; justify-content:center; margin-top:2px; }
.icon-btn{
  border:1px solid var(--line); background:#fff; border-radius:8px; width:28px; height:28px;
  font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  color: var(--ink-soft);
}
.icon-btn:hover{ border-color: var(--seal); color: var(--seal); }
.icon-btn-inline{
  border:1px solid var(--line); background:#fff; border-radius:7px; padding:2px 7px; font-size:12px;
  cursor:pointer; margin-left:6px; color:var(--ink-soft);
}
.icon-btn-inline:hover{ border-color: var(--seal); color: var(--seal); }

/* ---------- stroke order modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(43,38,33,.55); display:none; align-items:center; justify-content:center;
  z-index:999; padding:20px;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  background: var(--card); border-radius:18px; padding:24px; max-width:420px; width:100%;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); position:relative; text-align:center;
}
.modal-close{
  position:absolute; top:12px; right:14px; border:none; background:none; font-size:18px; cursor:pointer;
  color:var(--ink-soft);
}
.modal-close:hover{ color:var(--seal); }
#stroke-target-wrap{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin: 6px 0 12px;
  background:#fffdf6; border:1px solid var(--line); border-radius:10px; padding:12px; min-height:150px; align-items:center;
}
.stroke-char{ border:1px solid var(--line); border-radius:8px; background:#fffdf6; }
.modal-info{ margin-bottom:14px; }
.modal-info .mp{ font-size:18px; color:var(--seal); }
.modal-info .mr{ font-size:14.5px; color:var(--ink-soft); margin-top:2px; }
.modal-controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.modal-note{ font-size:11.5px; color:#a89b7d; margin-top:12px; }


/* ---------- refreshed controls ---------- */
button, select, input{ -webkit-tap-highlight-color: transparent; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; }
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.icon-row{ gap:7px; }
.icon-btn{
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.72);
  box-shadow:0 1px 3px rgba(43,38,33,.06); transition:transform .13s ease, border-color .13s ease, background .13s ease;
}
.icon-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ background:#fffaf0; transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0) scale(.94); }
.icon-btn.is-playing{ color:var(--seal); border-color:var(--seal); background:rgba(168,56,43,.08); }
.icon-btn-inline{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.icon-btn-inline svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- detailed progress ---------- */
.progress-panel{
  margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow:var(--shadow);
}
.progress-head{ display:flex; justify-content:space-between; gap:14px; align-items:flex-end; margin-bottom:12px; }
.progress-head h3{ margin:0; font-size:18px; }
.progress-head span{ color:var(--ink-soft); font-size:12.5px; }
.mastery-track{ height:10px; border:1px solid var(--line); background:var(--paper-2); border-radius:999px; overflow:hidden; }
.mastery-track i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--seal),var(--jade)); transition:width .35s ease; }
.progress-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.progress-metric{ padding:11px 10px; border-radius:12px; background:rgba(236,227,208,.45); text-align:center; }
.progress-metric b{ display:block; font-size:18px; }
.progress-metric span{ color:var(--ink-soft); font-size:11.5px; }
.progress-next{ margin-top:12px; color:var(--ink-soft); font-size:12.5px; line-height:1.45; }

/* ---------- generated texts ---------- */
.text-builder{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;
  box-shadow:var(--shadow); margin-bottom:16px;
}
.text-builder h2{ margin:0 0 4px; font-size:21px; }
.text-builder .sub{ margin:0 0 14px; color:var(--ink-soft); font-size:13px; line-height:1.45; }
.text-controls{ display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; align-items:end; }
.text-controls label{ color:var(--ink-soft); font-size:11.5px; display:flex; flex-direction:column; gap:5px; }
.text-controls select,.text-controls input{
  width:100%; min-height:39px; border:1px solid var(--line); border-radius:10px; background:#fffef9;
  color:var(--ink); font-family:inherit; padding:8px 10px; font-size:13px;
}
.text-controls .generate-wrap{ display:flex; align-items:end; }
.text-controls .generate-wrap .btn{ width:100%; min-height:39px; }
.generated-text-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:21px 22px;
  box-shadow:var(--shadow); margin-bottom:18px;
}
.generated-title-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.generated-title-row h3{ margin:0; font-size:19px; }
.generated-meta{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.meta-pill{ border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:11px; color:var(--ink-soft); background:var(--paper); }
.generated-zh{ font-size:24px; line-height:2.05; letter-spacing:.02em; }
.text-word{ cursor:pointer; border-bottom:2px solid transparent; border-radius:4px; padding:1px 2px; }
.text-word:hover{ background:var(--paper-2); }
.text-word.status-known{ border-color:var(--jade); }
.text-word.status-learning{ border-color:var(--seal); }
.text-word.status-new{ border-color:#c9bfa4; }
.generated-ru{ display:none; margin-top:15px; color:var(--ink-soft); line-height:1.65; font-size:14px; }
.generated-ru.show{ display:block; }
.generated-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; }
.reading-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;color:var(--ink-soft)}.reading-loading-dot{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--seal);border-radius:50%;animation:reading-spin .8s linear infinite}@keyframes reading-spin{to{transform:rotate(360deg)}}
.new-word-strip{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.new-word-strip .label{ width:100%; color:var(--ink-soft); font-size:11.5px; }
.word-chip{ border-radius:999px; border:1px solid rgba(168,56,43,.35); background:rgba(168,56,43,.07); padding:5px 9px; font-size:12px; }
.word-popover{ display:none; margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:12px; background:#fffef9; }
.word-popover.show{ display:block; }
.word-popover-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.word-popover-head .char{ font-size:27px; }
.word-popover-head .details{ flex:1; min-width:160px; }
.word-popover-head .details b{ color:var(--seal); }
.word-popover-actions{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.quick-sentences-title{ margin:0; font-size:17px; }
.quick-sentences-head{ margin:25px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.quick-count{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:12px; }
.quick-count select{ border:1px solid var(--line); background:rgba(255,255,255,.72); color:var(--ink); border-radius:10px; padding:7px 28px 7px 10px; font:inherit; }

/* ---------- character decomposition ---------- */
.modal-box.wide{ max-width:620px; text-align:left; max-height:min(86vh,760px); overflow:auto; }
.char-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin:0 30px 15px 0; }
.char-tab{ width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:#fffef9; font-size:23px; cursor:pointer; }
.char-tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.char-detail{ display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:start; }
.char-big{ height:110px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:14px; background:#fffdf6; font-size:76px; }
.char-info h3{ margin:0 0 5px; font-size:18px; }
.char-info p{ margin:5px 0; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.component-list{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.component-chip{ min-width:45px; padding:7px 10px; text-align:center; border:1px solid var(--line); border-radius:10px; background:#fffef9; font-size:24px; }
.source-note{ margin-top:12px; padding:10px 12px; background:rgba(185,146,74,.1); border:1px dashed var(--gold); border-radius:10px; font-size:11.5px; color:var(--ink-soft); }
.loading-line{ color:var(--ink-soft); font-size:13px; padding:12px 0; }

/* ---------- worksheet ---------- */
#worksheet-render-host{ position:fixed; left:-100000px; top:0; width:794px; background:#fff; z-index:-10; }
.worksheet-page{ width:794px; min-height:1123px; background:#fff; color:#171717; padding:54px 58px; font-family:'Noto Serif',serif; }
.worksheet-header{ display:flex; align-items:flex-end; justify-content:space-between; border-bottom:2px solid #222; padding-bottom:14px; margin-bottom:24px; }
.worksheet-header .main-char{ font-family:'Noto Serif SC',serif; font-size:76px; line-height:1; }
.worksheet-header .word-meta{ text-align:right; }
.worksheet-header .word-meta b{ display:block; font-size:22px; }
.worksheet-header .word-meta span{ font-size:14px; }
.worksheet-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.worksheet-cell{
  aspect-ratio:1; position:relative; border:1.3px solid #333;
  background-image:linear-gradient(to right,transparent 49.6%,#bbb 50%,transparent 50.4%),linear-gradient(to bottom,transparent 49.6%,#bbb 50%,transparent 50.4%);
}
.worksheet-cell::before,.worksheet-cell::after{ content:''; position:absolute; inset:0; pointer-events:none; }
.worksheet-cell::before{ background:linear-gradient(45deg,transparent 49.6%,#d2d2d2 50%,transparent 50.4%); }
.worksheet-cell::after{ background:linear-gradient(-45deg,transparent 49.6%,#d2d2d2 50%,transparent 50.4%); }
.worksheet-cell span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Noto Serif SC',serif; font-size:72px; z-index:1; }
.worksheet-foot{ margin-top:18px; display:flex; justify-content:space-between; color:#555; font-size:11px; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,18px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--paper); border-radius:10px; padding:10px 14px; font-size:12.5px;
  box-shadow:0 8px 30px rgba(0,0,0,.22); transition:.2s ease; z-index:2000; max-width:min(90vw,520px); text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }


/* ---------- four knowledge levels ---------- */
.stat-card.unknown b{ color:#9a3f35; }
.stat-card.weak b{ color:#bd6f2f; }
.stat-card.almost b{ color:#9a7427; }
.vcard.status-unknown .badge{ background:#b34a3c; }
.vcard.status-weak .badge{ background:#d17c35; }
.vcard.status-almost .badge{ background:var(--gold); }
.vcard.status-known .badge{ background:var(--jade); }
.text-word.status-unknown,.tok.k-unknown{ border-color:#b34a3c; }
.text-word.status-weak,.tok.k-weak{ border-color:#d17c35; }
.text-word.status-almost,.tok.k-almost{ border-color:var(--gold); }
.text-word.status-known,.tok.k-known{ border-color:var(--jade); }
.confidence-row{ display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); gap:7px; width:100%; }
.confidence-row.compact{ grid-template-columns:repeat(2,1fr); }
.confidence-btn{ border:1px solid var(--line); background:#fffef9; border-radius:10px; padding:8px 7px; font:inherit; font-size:11.5px; cursor:pointer; transition:.14s ease; }
.confidence-btn:hover{ transform:translateY(-1px); }
.confidence-btn.known{ border-color:rgba(76,122,104,.6); color:var(--jade-dark); }
.confidence-btn.almost{ border-color:rgba(185,146,74,.75); color:#775818; }
.confidence-btn.weak{ border-color:rgba(209,124,53,.75); color:#934d16; }
.confidence-btn.unknown{ border-color:rgba(168,56,43,.55); color:var(--seal-dark); }
.confidence-btn.is-current{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.confidence-btn.known.is-current{ background:var(--jade); }
.confidence-btn.almost.is-current{ background:var(--gold); color:#35290d; }
.confidence-btn.weak.is-current{ background:#c97532; }
.confidence-btn.unknown.is-current{ background:var(--seal); }
.vcard .mini-actions.confidence-row{ display:grid; margin-top:7px; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
.vcard .mini-actions.confidence-row button{ padding:5px 4px; font-size:10.5px; }
.rate-row.confidence-row{ max-width:520px; }
.rate-row.confidence-row button{ min-width:0; }

/* ---------- translation and speaking ---------- */
.exercise-intro{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; background:var(--card); border:1px solid var(--line); border-radius:17px; padding:20px 22px; box-shadow:var(--shadow); margin-bottom:16px; }
.exercise-intro h2{ margin:0 0 5px; font-size:21px; }
.exercise-intro p{ margin:0; color:var(--ink-soft); font-size:13px; line-height:1.5; max-width:58ch; }
.exercise-controls{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; }
.exercise-controls label{ display:flex; flex-direction:column; gap:5px; color:var(--ink-soft); font-size:11.5px; }
.exercise-controls select{ min-width:190px; border:1px solid var(--line); border-radius:9px; background:#fffef9; padding:9px 10px; font:inherit; color:var(--ink); }
.practice-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.practice-kicker{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--seal); margin-bottom:9px; }
.translation-prompt{ font-size:24px; line-height:1.45; margin-bottom:18px; }
.translation-answer{ min-height:68px; border:1px dashed var(--line); border-radius:13px; padding:13px; display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:24px; background:#fffef9; }
.answer-placeholder{ color:#b2a88f; font-size:13px; font-family:'Noto Serif',serif; }
.answer-token{ display:inline-flex; align-items:center; border-radius:9px; padding:5px 8px; border:1px solid var(--line); background:var(--paper); }
.answer-token.correct{ background:rgba(76,122,104,.14); border-color:var(--jade); }
.answer-token.partial{ background:rgba(185,146,74,.18); border-color:var(--gold); }
.answer-token.wrong{ background:rgba(168,56,43,.11); border-color:var(--seal); }
.ime-box{ margin-top:14px; }
.ime-box label{ display:block; color:var(--ink-soft); font-size:12px; margin-bottom:6px; }
.ime-box input{ width:100%; border:1px solid var(--line); border-radius:11px; padding:12px 14px; background:#fff; font:inherit; font-size:16px; }
.ime-help{ color:#958a73; font-size:11px; margin:6px 2px 8px; line-height:1.45; }
.pinyin-candidates{ display:flex; flex-wrap:wrap; gap:7px; min-height:39px; }
.pinyin-candidate{ border:1px solid var(--line); background:#fffef9; border-radius:10px; padding:6px 9px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.pinyin-candidate .hanzi{ font-size:21px; }
.pinyin-candidate small{ color:var(--ink-soft); }
.pinyin-candidate:hover,.pinyin-candidate.active{ border-color:var(--seal); background:rgba(168,56,43,.06); }
.practice-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.practice-actions.centered{ justify-content:center; align-items:center; }
.practice-feedback{ display:none; margin-top:15px; border-radius:12px; padding:13px 14px; line-height:1.55; font-size:13px; }
.practice-feedback.show{ display:block; }
.practice-feedback.good{ background:rgba(76,122,104,.12); border:1px solid rgba(76,122,104,.45); }
.practice-feedback.mid{ background:rgba(185,146,74,.14); border:1px solid rgba(185,146,74,.55); }
.practice-feedback.bad{ background:rgba(168,56,43,.09); border:1px solid rgba(168,56,43,.4); }
.correct-answer{ margin-top:8px; font-size:21px; }

.speech-card{ text-align:center; }
.speech-target{ font-size:29px; line-height:1.85; }
.speech-token{ display:inline-block; border-bottom:3px solid transparent; border-radius:5px; padding:0 3px; transition:.15s ease; }
.speech-token.score-good{ background:rgba(76,122,104,.16); border-color:var(--jade); }
.speech-token.score-mid{ background:rgba(185,146,74,.2); border-color:var(--gold); }
.speech-token.score-bad{ background:rgba(168,56,43,.12); border-color:var(--seal); }
.speech-pinyin{ color:var(--seal); font-size:15px; line-height:1.8; min-height:27px; }
.speech-translation{ color:var(--ink-soft); font-size:13px; margin-top:5px; }
.mic-btn{ border:0; border-radius:999px; background:var(--seal); color:#fff8ed; padding:11px 17px; display:inline-flex; align-items:center; gap:8px; font:inherit; cursor:pointer; box-shadow:0 3px 0 var(--seal-dark); }
.mic-btn.is-listening{ animation:micPulse 1.1s infinite; }
@keyframes micPulse{ 0%,100%{box-shadow:0 3px 0 var(--seal-dark),0 0 0 0 rgba(168,56,43,.35)} 50%{box-shadow:0 3px 0 var(--seal-dark),0 0 0 10px rgba(168,56,43,0)} }
.speech-live{ margin-top:16px; min-height:22px; color:var(--ink-soft); font-size:13px; }
.speech-result{ display:none; margin:15px auto 0; max-width:620px; border-radius:14px; padding:15px; }
.speech-result.show{ display:block; }
.speech-result.good{ background:rgba(76,122,104,.12); border:1px solid rgba(76,122,104,.45); }
.speech-result.mid{ background:rgba(185,146,74,.14); border:1px solid rgba(185,146,74,.55); }
.speech-result.bad{ background:rgba(168,56,43,.09); border:1px solid rgba(168,56,43,.4); }
.speech-score{ font-size:34px; font-weight:700; display:block; margin-bottom:5px; }
.speech-recognized{ font-size:18px; margin-top:7px; }
.speech-note{ color:#958a73; font-size:11px; line-height:1.45; margin-top:16px; }
.icon-btn svg,.btn [data-icon] svg,.btn svg,.mic-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mic-btn svg{ width:19px; height:19px; }

.reading-selfcheck{ margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.reading-selfcheck textarea{ width:100%; min-height:76px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; font:inherit; }

@media (max-width:780px){
  header.top{ flex-direction:column; align-items:stretch; }
  nav.tabs{ justify-content:flex-start; }
  .brand p{ max-width:none; }
  .text-controls{ grid-template-columns:repeat(2,1fr); }
  .progress-metrics{ grid-template-columns:repeat(2,1fr); }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .exercise-intro{ align-items:stretch; flex-direction:column; }
  .exercise-controls{ justify-content:flex-start; }
  .confidence-row{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  .hero{ grid-template-columns: 1fr; text-align:center; }
  .hero .cta{ justify-content:center; }
  .ring-wrap{ margin: 0 auto; }
  .write-stage{ flex-direction:column; align-items:center; }
  .char-detail{ grid-template-columns:1fr; }
  .char-big{ width:110px; margin:0 auto; }
  .text-controls{ grid-template-columns:1fr; }
  .generated-title-row{ flex-direction:column; }
  .generated-meta{ justify-content:flex-start; }
}


/* ============================= BOTANICAL UI 2026 ============================= */
:root{
  --paper:#f4f3df;
  --paper-2:#e8edcf;
  --ink:#0a3323;
  --ink-soft:#526454;
  --seal:#d3968c;
  --seal-dark:#a76865;
  --jade:#839958;
  --jade-dark:#536725;
  --gold:#c7a96d;
  --line:rgba(10,51,35,.14);
  --card:rgba(247,244,213,.78);
  --midnight:#105666;
  --shadow:0 18px 55px rgba(10,51,35,.10);
}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(55rem 35rem at -10% -8%,rgba(211,150,140,.55),transparent 58%),
    radial-gradient(48rem 32rem at 105% 8%,rgba(16,86,102,.32),transparent 58%),
    radial-gradient(55rem 42rem at 55% 105%,rgba(131,153,88,.48),transparent 62%),
    linear-gradient(145deg,#f7f4d5 0%,#eef0d9 46%,#e7ecca 100%);
  background-attachment:fixed;
  color:var(--ink);
}
body::before,body::after{
  content:'';position:fixed;z-index:-1;filter:blur(70px);opacity:.55;border-radius:50%;pointer-events:none
}
body::before{width:360px;height:360px;left:10%;top:18%;background:rgba(211,150,140,.42)}
body::after{width:420px;height:420px;right:4%;bottom:4%;background:rgba(16,86,102,.25)}
.wrap{max-width:1180px;padding:22px 22px 90px}
.hanzi{font-family:'Noto Serif SC',serif}
.brush{font-family:'Cormorant Garamond',serif;font-style:italic}
header.top{
  position:sticky;top:12px;z-index:50;padding:14px 16px;margin-bottom:28px;border:1px solid rgba(255,255,255,.62);
  border-radius:24px;background:rgba(247,244,213,.72);backdrop-filter:blur(24px) saturate(125%);
  box-shadow:0 12px 40px rgba(10,51,35,.08)
}
.brand .stamp{width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,var(--ink),var(--midnight));transform:none;box-shadow:none}
.brand h1{font-size:21px;font-weight:700}.brand p{font-family:'Manrope',sans-serif;color:var(--ink-soft)}
.brand-level{font-family:'Manrope',sans-serif;font-size:13px;color:var(--midnight);font-weight:700}
.header-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.level-picker{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.5);font-size:12px;font-weight:700}
.level-picker select{border:0;background:transparent;color:var(--ink);font:inherit;outline:none;cursor:pointer;padding:4px 24px 4px 2px}
.level-loading{font-size:11px;color:var(--ink-soft);min-width:74px}
nav.tabs{gap:5px}
nav.tabs a{font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;padding:8px 11px;background:transparent;border-color:transparent;color:var(--ink-soft)}
nav.tabs a:hover{background:rgba(131,153,88,.13);border-color:transparent;color:var(--ink)}
nav.tabs a.active{background:var(--ink);color:#f7f4d5;border-color:var(--ink);box-shadow:0 7px 18px rgba(10,51,35,.18)}
.hero,.stat-card,.settings-box,.progress-panel,.text-builder,.practice-card,.sentence-card,.prompt-card,.pinyin-check,.generated-text-card,.lesson-card,.lesson-progress-card{
  border:1px solid rgba(255,255,255,.72);background:rgba(247,244,213,.72);backdrop-filter:blur(20px) saturate(120%);box-shadow:var(--shadow)
}
.hero{border-radius:30px;padding:34px 38px;background:
  linear-gradient(110deg,rgba(247,244,213,.92),rgba(238,239,210,.75)),
  radial-gradient(circle at 90% 15%,rgba(211,150,140,.4),transparent 45%)}
.hero h2{font-size:49px!important;color:var(--ink)!important;line-height:.95}.hero p{font-size:15px;max-width:57ch}
.stat-card{border-radius:20px;padding:18px}.stat-card b{font-size:27px}.stat-card span{font-size:11px}
.settings-box,.progress-panel{border-radius:24px}.progress-panel{margin-top:16px}
.btn{font-family:'Manrope',sans-serif;font-weight:700;border-radius:14px;box-shadow:none!important;transition:.18s ease;background-clip:padding-box}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#f7f4d5}.btn.primary:hover{background:#124a34;filter:none}
.btn.ghost{background:rgba(255,255,255,.44);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:rgba(10,51,35,.34);background:rgba(255,255,255,.7)}
.btn.gold{background:rgba(131,153,88,.18);color:var(--jade-dark);border:1px solid rgba(131,153,88,.35)}
.toolbar{padding:12px;border-radius:20px;background:rgba(247,244,213,.5);backdrop-filter:blur(18px)}
.toolbar input[type=search],.text-controls select,.text-controls input,.exercise-controls select,.pinyin-check input,.ime-box input{
  font-family:'Manrope',sans-serif;border:1px solid var(--line);background:rgba(255,255,255,.68);border-radius:14px;color:var(--ink);outline:none
}
.toolbar input[type=search]:focus,.text-controls select:focus,.exercise-controls select:focus,.pinyin-check input:focus,.ime-box input:focus{border-color:var(--jade);box-shadow:0 0 0 4px rgba(131,153,88,.12)}
.filter-chip{font-family:'Manrope',sans-serif;font-weight:600;background:rgba(255,255,255,.46);border-radius:12px}
.filter-chip.active{background:var(--midnight);border-color:var(--midnight);color:#fff}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}
.vcard{min-height:178px;border-radius:22px;padding:18px 14px;background:rgba(247,244,213,.73);border:1px solid rgba(255,255,255,.75);box-shadow:0 12px 34px rgba(10,51,35,.08);transition:.2s ease}
.vcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(10,51,35,.13)}
.vcard .h{font-size:37px}.vcard .p{color:var(--midnight);font-weight:700}.vcard .r{line-height:1.35}
.icon-row{gap:8px;margin-top:8px}.icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.62);color:var(--ink)}
.icon-btn svg{width:17px;height:17px}.icon-btn:hover{background:var(--ink);color:#f7f4d5;border-color:var(--ink)}
.confidence-row{gap:5px}.confidence-btn{font-family:'Manrope',sans-serif;border-radius:10px!important;font-size:10px!important;padding:6px 8px!important}
.flip-card{border-radius:30px;background:rgba(247,244,213,.82);min-height:310px}.flip-card .big-hanzi{font-size:78px}
.grid-canvas-wrap{border:1px solid rgba(10,51,35,.35);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.74)}
.text-builder,.practice-card,.generated-text-card{border-radius:28px}
.practice-kicker{letter-spacing:.15em;color:var(--midnight)}
.mic-btn{background:var(--midnight);border:0;border-radius:16px;color:white;box-shadow:none}
.modal-overlay{background:rgba(5,31,23,.62);backdrop-filter:blur(12px)}
.modal-box{border-radius:28px;background:#f7f4d5;border:1px solid rgba(255,255,255,.7)}
.modal-box.dictionary-modal,.modal-box.lesson-modal-box{max-width:min(1180px,96vw);height:min(850px,92vh);padding:14px;display:flex;flex-direction:column;text-align:left}
.dictionary-toolbar,.lesson-modal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 42px 14px 8px}
.dictionary-toolbar h3,.lesson-modal-toolbar h3{margin:0;font-size:18px}
.dictionary-frame,.lesson-frame{border:0;width:100%;flex:1;border-radius:20px;background:white;min-height:520px}
.modal-close{z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.65)}
.source-note,.modal-note,.speech-note,.ime-help,.tap-hint,.app-foot{display:none!important}
.lesson-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.lesson-head h2{margin:0;font-size:32px}.lesson-head p{margin:6px 0 0;color:var(--ink-soft)}
.lesson-tools{display:flex;gap:8px;flex-wrap:wrap}
.lesson-tools input,.lesson-tools select{padding:10px 13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.62);font:inherit;color:var(--ink)}
.lesson-progress-card{border-radius:22px;padding:18px;margin-bottom:16px;display:flex;align-items:center;gap:18px}
.lesson-progress-ring{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--jade) var(--lesson-progress,0%),rgba(131,153,88,.16) 0)}
.lesson-progress-ring::before{content:'';width:50px;height:50px;border-radius:50%;background:#f7f4d5;position:absolute}.lesson-progress-ring b{position:relative;z-index:1}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.lesson-card{border-radius:22px;padding:18px;display:flex;flex-direction:column;min-height:175px;transition:.2s ease}.lesson-card:hover{transform:translateY(-3px)}
.lesson-number{font-size:11px;letter-spacing:.12em;color:var(--midnight);font-weight:800}.lesson-card h3{font-size:17px;line-height:1.35;margin:10px 0 8px}.lesson-card .lesson-level{font-size:11px;color:var(--ink-soft)}
.lesson-card-actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px}.lesson-done{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);margin-left:auto}.lesson-done input{accent-color:var(--jade)}
.hsk-summary{margin-top:16px;padding:16px 18px;border-radius:22px;background:linear-gradient(110deg,rgba(10,51,35,.94),rgba(16,86,102,.9));color:#f7f4d5;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hsk-summary b{font-size:20px}.hsk-summary span{font-size:12px;opacity:.8}.hsk-summary>div:last-child{min-width:170px;white-space:nowrap}
.audio-check{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.audio-check select{max-width:260px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.62);color:var(--ink);font:inherit}.audio-check select:disabled{opacity:.58}.audio-status{font-size:11px;color:var(--ink-soft)}
.vocab-more-wrap{grid-column:1/-1;text-align:center;padding:16px}.vocab-result-count{font-size:12px;color:var(--ink-soft);margin-left:auto}
@media(max-width:960px){header.top{position:relative;top:0}.top{align-items:flex-start!important}.header-tools{width:100%;justify-content:flex-start}.hero{padding:28px}.stats-row{grid-template-columns:repeat(2,1fr)}.dictionary-frame,.lesson-frame{min-height:460px}}
@media(max-width:640px){.wrap{padding:10px 10px 60px}header.top{border-radius:20px;padding:12px}.brand{width:100%}.header-tools{display:block}.level-picker{margin:10px 0}nav.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}nav.tabs a{white-space:nowrap}.hero{padding:24px 20px}.hero h2{font-size:42px!important}.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vcard{min-height:170px;padding:14px 8px}.confidence-row{display:grid;grid-template-columns:1fr 1fr}.lesson-grid{grid-template-columns:1fr}.lesson-head{align-items:flex-start;flex-direction:column}.modal-box.dictionary-modal,.modal-box.lesson-modal-box{width:100%;height:96vh;border-radius:18px}.dictionary-frame,.lesson-frame{min-height:360px}}



/* ============================= SOFT PASTEL TECH UI ============================= */
:root{
  --paper:#f1ece4;
  --paper-2:#ebe5de;
  --ink:#6b403b;
  --ink-soft:#8d746f;
  --seal:#d8a4af;
  --seal-dark:#b67b88;
  --jade:#8d8b4c;
  --jade-dark:#65613f;
  --gold:#c1bc77;
  --line:rgba(107,64,59,.12);
  --card:rgba(255,255,255,.42);
  --midnight:#afb8cd;
  --lavender:#ccc3d1;
  --peony:#f7ddd5;
  --shadow:0 24px 70px rgba(107,64,59,.08), 0 10px 28px rgba(107,64,59,.05)
}
html{background:#f1ece4;color-scheme:light}
body{
  background:
    radial-gradient(circle at 8% 14%, rgba(247,221,213,.95), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(175,184,205,.9), transparent 28%),
    radial-gradient(circle at 68% 78%, rgba(204,195,209,.86), transparent 33%),
    radial-gradient(circle at 22% 88%, rgba(193,188,119,.42), transparent 28%),
    linear-gradient(135deg,#f3eee6 0%, #ece7de 42%, #f4efe7 100%);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.48;
  background-image:
    linear-gradient(rgba(107,64,59,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,64,59,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35) 72%, transparent 100%);
}
body::after{
  content:'';position:fixed;right:-180px;top:-160px;z-index:-1;width:540px;height:540px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 120deg, rgba(175,184,205,.72), rgba(247,221,213,.75), rgba(204,195,209,.75), rgba(193,188,119,.55), rgba(175,184,205,.72));
  filter:blur(95px);opacity:.5;
}
.wrap{max-width:1240px;padding:22px 22px 96px}
header.top{
  position:sticky;top:10px;z-index:50;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.28));
  box-shadow:0 20px 60px rgba(107,64,59,.07), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(22px) saturate(135%);
  border-radius:28px;
  padding:14px 16px 18px;
}
.brand .stamp{
  background:linear-gradient(145deg, var(--peony), var(--midnight));
  color:#5d3430;
  box-shadow:0 10px 28px rgba(107,64,59,.12);
}
.brand h1,.brand-level{color:var(--ink)}
.brand p{color:var(--ink-soft)}
.level-picker{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.36);border:1px solid rgba(255,255,255,.52);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.level-picker select,.lesson-tools select{color:var(--ink)}
nav.tabs{gap:8px}
nav.tabs a{
  color:#7c6763;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.3);
  font-family:'Manrope',sans-serif;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
nav.tabs a:hover{
  background:rgba(247,221,213,.62);color:var(--ink);border-color:rgba(216,164,175,.45)
}
nav.tabs a.active{
  background:linear-gradient(135deg, var(--midnight), var(--lavender));
  color:#52322d;border-color:rgba(255,255,255,.7);
  box-shadow:0 10px 26px rgba(175,184,205,.28), inset 0 1px 0 rgba(255,255,255,.65)
}
.hero,.stat-card,.settings-box,.progress-panel,.text-builder,.practice-card,.sentence-card,.prompt-card,.pinyin-check,.generated-text-card,.lesson-card,.lesson-progress-card,.hint-box,.write-right>div,.hero,.vcard,.flip-card{
  backdrop-filter:blur(20px) saturate(145%);
}
.hero,.stat-card,.settings-box,.progress-panel,.text-builder,.practice-card,.sentence-card,.prompt-card,.pinyin-check,.generated-text-card,.lesson-card,.lesson-progress-card,.hint-box{
  background:linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.24));
  border:1px solid rgba(255,255,255,.62);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.78);
}
.hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(140deg, rgba(255,255,255,.55), rgba(255,255,255,.24)),
    linear-gradient(115deg, rgba(247,221,213,.34), rgba(175,184,205,.28), rgba(193,188,119,.2));
  border-radius:34px;
}
.hero::after{
  content:'';position:absolute;right:-80px;top:-90px;width:300px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(216,164,175,.26), transparent 68%);
}
.hero h2{color:var(--ink)!important;letter-spacing:.01em}
.hero p,.settings-box label,.sentence-ru,.hint-box,.lesson-head p{color:var(--ink-soft)}
.stat-card{border-radius:22px}
.stat-card b{color:var(--ink)}
.stat-card.new b{color:var(--gold)}
.stat-card.learn b{color:var(--seal)}
.stat-card.known b{color:var(--jade-dark)}
.progress-panel{border-radius:26px}
.btn{
  border:1px solid transparent;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:700;
  box-shadow:0 8px 18px rgba(107,64,59,.06), inset 0 1px 0 rgba(255,255,255,.7)
}
.btn.primary{
  background:linear-gradient(135deg, var(--midnight), #c3cde2);
  color:#51342f;border-color:rgba(255,255,255,.7)!important;
  box-shadow:0 12px 26px rgba(175,184,205,.34), inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.btn.primary:hover{background:linear-gradient(135deg, #bfcae1, #d4dbee);color:#4d322d}
.btn.ghost{
  background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.65);color:var(--ink)
}
.btn.ghost:hover{background:rgba(247,221,213,.48);border-color:rgba(216,164,175,.4);color:#5a3631}
.btn.jade{
  background:linear-gradient(135deg, var(--gold), #d5d1a0);color:#53432b;border-color:rgba(255,255,255,.65)!important;
  box-shadow:0 12px 26px rgba(193,188,119,.28), inset 0 1px 0 rgba(255,255,255,.68)!important
}
.btn.gold{
  background:linear-gradient(135deg, var(--peony), #f3cbc7);border-color:rgba(255,255,255,.68)!important;color:#6b403b
}
.toolbar input[type=search],.text-controls select,.text-controls input,.exercise-controls select,.pinyin-check input,.ime-box input,.lesson-tools input,.lesson-tools select,.audio-check select{
  background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.65);color:var(--ink);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.toolbar input[type=search]:focus,.text-controls select:focus,.exercise-controls select:focus,.pinyin-check input:focus,.ime-box input:focus{
  border-color:rgba(175,184,205,.9);box-shadow:0 0 0 4px rgba(175,184,205,.22)
}
input::placeholder{color:#a28a85}
.filter-chip{
  background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.62);color:#7c6763;font-weight:700;border-radius:14px
}
.filter-chip.active{background:linear-gradient(135deg, var(--lavender), var(--midnight));color:#51342f;border-color:rgba(255,255,255,.7)}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.vcard{
  min-height:178px;border-radius:26px;padding:18px 14px;background:linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.65);box-shadow:0 16px 32px rgba(107,64,59,.08), inset 0 1px 0 rgba(255,255,255,.8);transition:.22s ease
}
.vcard:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(107,64,59,.12), 0 0 0 1px rgba(175,184,205,.28)}
.vcard .h{font-size:37px}.vcard .p{color:#7e8da9;font-weight:700}.vcard .r{line-height:1.35;color:var(--ink-soft)}
.icon-row{gap:8px;margin-top:8px}
.icon-btn{
  width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.4);color:var(--ink)
}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{background:linear-gradient(135deg, var(--peony), var(--lavender));color:#5b3531;border-color:rgba(216,164,175,.45)}
.confidence-row{gap:5px}.confidence-btn{font-family:'Manrope',sans-serif;border-radius:10px!important;font-size:10px!important;padding:6px 8px!important}
.confidence-btn{background:rgba(255,255,255,.34)!important;color:#806964!important;border-color:rgba(255,255,255,.6)!important}
.confidence-btn.active{background:rgba(175,184,205,.32)!important;color:#5a3b35!important;border-color:rgba(175,184,205,.7)!important}
.flip-card{
  border-radius:34px;background:linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.3));
  min-height:310px;border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.78)
}
.flip-card .big-hanzi{font-size:78px}
.flip-card .tap-hint,.modal-note,.speech-note,.ime-help,.app-foot{display:none!important}
.grid-canvas-wrap{
  border:1px solid rgba(107,64,59,.18);border-radius:26px;overflow:hidden;background:rgba(255,255,255,.55);box-shadow:0 18px 40px rgba(107,64,59,.08)
}
.grid-canvas-wrap svg.guide path{stroke:#c8baa4!important}
.grid-canvas-wrap .ghost-hanzi{color:rgba(107,64,59,.1)}
.text-builder,.practice-card,.generated-text-card{border-radius:30px}
.practice-kicker{letter-spacing:.15em;color:#8b99b2}
.mic-btn{background:linear-gradient(135deg, var(--midnight), var(--lavender));border:0;border-radius:16px;color:#5b3833;box-shadow:none}
.modal-overlay{background:rgba(150,136,130,.26);backdrop-filter:blur(20px)}
.modal-box{
  border-radius:30px;background:linear-gradient(145deg, rgba(250,247,242,.94), rgba(241,235,228,.88));
  border:1px solid rgba(255,255,255,.78);box-shadow:0 28px 90px rgba(107,64,59,.16);color:var(--ink)
}
.modal-box.dictionary-modal,.modal-box.lesson-modal-box{max-width:min(1180px,96vw);height:min(850px,92vh);padding:14px;display:flex;flex-direction:column;text-align:left}
.dictionary-toolbar,.lesson-modal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 42px 14px 8px;border-bottom:1px solid rgba(107,64,59,.08)}
.dictionary-toolbar h3,.lesson-modal-toolbar h3{margin:0;font-size:18px;color:var(--ink)}
.dictionary-frame,.lesson-frame{border:0;width:100%;flex:1;border-radius:22px;background:white;min-height:520px}
.modal-close{z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.72);color:#6b403b}
.source-note,.tap-hint{display:none!important}
.lesson-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.lesson-head h2{margin:0;font-size:32px;color:var(--ink)}
.lesson-tools{display:flex;gap:8px;flex-wrap:wrap}
.lesson-progress-card{border-radius:24px;padding:18px;margin-bottom:16px;display:flex;align-items:center;gap:18px}
.lesson-progress-ring{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--lesson-progress,0%),rgba(204,195,209,.45) 0)}
.lesson-progress-ring::before{content:'';width:50px;height:50px;border-radius:50%;background:#f6f0e9;position:absolute}.lesson-progress-ring b{position:relative;z-index:1;color:var(--ink)}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.lesson-card{border-radius:24px;padding:18px;display:flex;flex-direction:column;min-height:175px;transition:.2s ease;position:relative;overflow:hidden}
.lesson-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--peony),var(--midnight),var(--gold));opacity:.8}
.lesson-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(107,64,59,.12)}
.lesson-number{font-size:11px;letter-spacing:.12em;color:#8b99b2;font-weight:800}.lesson-card h3{font-size:17px;line-height:1.35;margin:10px 0 8px}.lesson-card .lesson-level{font-size:11px;color:var(--ink-soft)}
.lesson-card-actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px}.lesson-done{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);margin-left:auto}.lesson-done input{accent-color:#8d8b4c}
.hsk-summary{
  margin-top:16px;padding:16px 18px;border-radius:24px;
  background:linear-gradient(115deg, rgba(175,184,205,.42), rgba(247,221,213,.38), rgba(193,188,119,.34));
  color:#5b3a35;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(255,255,255,.7)
}
.hsk-summary b{font-size:20px}.hsk-summary span{font-size:12px;opacity:.85}.hsk-summary>div:last-child{min-width:170px;white-space:nowrap}
.audio-check{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.audio-status{font-size:11px;color:var(--ink-soft)}
.vocab-more-wrap{grid-column:1/-1;text-align:center;padding:16px}.vocab-result-count{font-size:12px;color:var(--ink-soft);margin-left:auto}
.progress-next{margin-top:12px;color:var(--ink-soft);font-size:12.5px;line-height:1.45}
.toast{background:#fff7f4!important;color:#6b403b!important;box-shadow:0 18px 60px rgba(107,64,59,.18)!important;border:1px solid rgba(216,164,175,.3)}

/* Local lesson reader */
.modal-box.lesson-modal-box{max-width:min(1160px,96vw);height:min(900px,94vh);padding:14px;background:linear-gradient(145deg, rgba(250,247,242,.95), rgba(241,235,228,.92))}
.lesson-content{flex:1;overflow:auto;padding:22px 18px 34px;scrollbar-color:#c5b0a7 transparent}
.lesson-content::-webkit-scrollbar{width:10px}.lesson-content::-webkit-scrollbar-thumb{background:#d7c2b8;border-radius:12px;border:2px solid #f1ece4}
.lesson-local-hero{
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.75);border-radius:30px;padding:28px;
  background:linear-gradient(135deg, rgba(175,184,205,.28), rgba(247,221,213,.28), rgba(193,188,119,.2));margin-bottom:18px
}
.lesson-local-hero::after{content:'学习';position:absolute;right:24px;bottom:-26px;font-family:'Noto Serif SC',serif;font-size:112px;color:rgba(107,64,59,.04);pointer-events:none}
.lesson-local-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8b99b2;font-weight:800}.lesson-local-hero h2{font-size:31px;line-height:1.15;margin:9px 0 10px;color:var(--ink)}.lesson-local-goal{margin:0;max-width:72ch;color:var(--ink-soft);line-height:1.65}
.lesson-section{margin-top:22px}.lesson-section-title{display:flex;align-items:center;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:#8d8b4c;margin:0 0 12px}.lesson-section-title::before{content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--gold),var(--midnight))}
.lesson-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px}.lesson-point{padding:17px;border-radius:18px;background:rgba(255,255,255,.33);border:1px solid rgba(255,255,255,.62)}.lesson-point b{display:block;color:var(--ink);margin-bottom:7px}.lesson-point p{margin:0;color:var(--ink-soft);line-height:1.58;font-size:13px}
.lesson-vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}.lesson-word{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 13px;border:1px solid rgba(255,255,255,.66);border-radius:16px;background:rgba(255,255,255,.35)}.lesson-word .zh{font-family:'Noto Serif SC',serif;font-size:23px;color:var(--ink)}.lesson-word .py{font-size:11px;color:#7c8aa7}.lesson-word .ru{font-size:11px;color:var(--ink-soft);text-align:right}.lesson-word button{border:0;background:transparent;color:#8d8b4c;cursor:pointer;padding:3px}
.lesson-dialogue{border:1px solid rgba(255,255,255,.68);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.26)}.lesson-line{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:15px 16px;border-bottom:1px solid rgba(107,64,59,.06)}.lesson-line:last-child{border-bottom:0}.lesson-line-index{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg, rgba(193,188,119,.32), rgba(175,184,205,.36));display:grid;place-items:center;color:#6b403b;font-size:11px}.lesson-line-zh{font-family:'Noto Serif SC',serif;font-size:21px;line-height:1.4;color:var(--ink)}.lesson-line-py{color:#7c8aa7;font-size:12px;margin-top:3px}.lesson-line-ru{color:var(--ink-soft);font-size:12px;margin-top:4px}.lesson-dialogue-actions{display:flex;gap:8px;margin:11px 0 0}
.lesson-exercises{display:grid;gap:10px}.lesson-exercise{border:1px solid rgba(255,255,255,.68);border-radius:18px;background:rgba(255,255,255,.28);padding:15px}.lesson-exercise-q{color:var(--ink);line-height:1.5}.lesson-answer{display:none;margin-top:11px;padding:11px 12px;border-radius:12px;background:rgba(193,188,119,.16);color:#5f5634;border:1px solid rgba(193,188,119,.36);font-size:13px}.lesson-answer.show{display:block}.lesson-answer-btn{margin-top:10px;border:0;background:transparent;color:#7c8aa7;font-weight:700;cursor:pointer;padding:0;font-family:inherit}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(107,64,59,.08)}.lesson-nav-center{display:flex;align-items:center;gap:9px}.lesson-progress-pill{font-size:11px;color:var(--ink-soft);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.32)}
@media(max-width:960px){header.top{position:relative;top:0}.top{align-items:flex-start!important}.header-tools{width:100%;justify-content:flex-start}.hero{padding:28px}.stats-row{grid-template-columns:repeat(2,1fr)}.dictionary-frame,.lesson-frame{min-height:460px}}
@media(max-width:700px){.lesson-content{padding:16px 8px 28px}.lesson-local-hero{padding:22px 18px}.lesson-local-hero h2{font-size:25px}.lesson-vocab{grid-template-columns:1fr}.lesson-word{grid-template-columns:auto 1fr}.lesson-word .ru{grid-column:2;text-align:left}.lesson-nav{flex-wrap:wrap}.lesson-nav-center{order:-1;width:100%;justify-content:center}}
@media(max-width:640px){
  .wrap{padding:10px 10px 60px}header.top{border-radius:22px;padding:12px}.brand{width:100%}.header-tools{display:block}
  .level-picker{margin:10px 0}.level-picker select{max-width:100%}nav.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}nav.tabs a{white-space:nowrap}
  .hero{padding:24px 20px}.hero h2{font-size:42px!important}.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vcard{min-height:170px;padding:14px 8px}
  .confidence-row{display:grid;grid-template-columns:1fr 1fr}.lesson-grid{grid-template-columns:1fr}.lesson-head{align-items:flex-start;flex-direction:column}
  .modal-box.dictionary-modal,.modal-box.lesson-modal-box{width:100%;height:96vh;border-radius:18px}.dictionary-frame,.lesson-frame{min-height:360px}
}



/* ============================= APP SHELL V2 ============================= */
.wrap{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:22px;
  align-items:start;
  max-width:1440px;
}
header.top{
  grid-column:1;
  grid-row:1;
  position:sticky;
  top:18px;
  height:calc(100vh - 36px);
  margin:0;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:22px;
  border-radius:32px;
}
header.top .brand{align-items:flex-start}
header.top .brand h1{font-size:24px}
header.top .brand p{font-size:12px;line-height:1.5}
.header-tools{display:flex;flex-direction:column;gap:18px;min-height:0;flex:1}
.level-picker{display:grid;grid-template-columns:1fr;gap:8px;align-items:start}
.level-picker select{width:100%;padding:9px 10px;border:0;background:transparent;font:inherit;color:var(--ink)}
nav.tabs{display:flex;flex-direction:column;gap:7px;overflow:auto;padding-right:3px}
nav.tabs a{width:100%;text-align:left;padding:12px 14px;border-radius:15px;font-size:13px}
nav.tabs a.active{transform:translateX(4px)}
section.view{
  grid-column:2;
  grid-row:1;
  min-width:0;
  padding:6px 0 80px;
}
.hero{min-height:320px;grid-template-columns:minmax(0,1fr) 180px;padding:42px 44px;border-radius:38px}
.hero h2{font-size:62px!important;line-height:1}
.hero p{font-size:16px;max-width:58ch}
.stats-row{gap:15px}.stat-card{padding:21px 18px;text-align:left}.stat-card b{font-size:31px}.stat-card span{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.progress-panel{margin-top:18px;padding:24px}.settings-box{margin-top:18px}
.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.lesson-card{min-height:215px}
.lesson-card h3{font-size:19px}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.brand-zh-button,.hero-zh-button{all:unset;cursor:pointer}
.brand-zh-button:hover,.hero-zh-button:hover{opacity:.72}

.zh-inline{
  all:unset;
  cursor:pointer;
  display:inline;
  padding:0 .08em;
  border-radius:.28em;
  color:inherit;
  box-shadow:inset 0 -.22em 0 rgba(175,184,205,.27);
  transition:.15s ease;
}
.zh-inline:hover{background:rgba(247,221,213,.65);box-shadow:inset 0 -.34em 0 rgba(216,164,175,.32)}
.lesson-word .zh-button{
  all:unset;cursor:pointer;font-family:'Noto Serif SC',serif;font-size:23px;color:var(--ink);line-height:1.2
}
.lesson-word .zh-button:hover{color:#7c8aa7}

.quick-dictionary{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:2200;
  width:min(360px,calc(100vw - 28px));
  padding:22px;
  border-radius:26px;
  background:linear-gradient(145deg,rgba(250,247,242,.97),rgba(239,232,225,.95));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 26px 90px rgba(107,64,59,.22);
  backdrop-filter:blur(26px);
  transform:translateY(30px) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
}
.quick-dictionary.show{transform:none;opacity:1;pointer-events:auto}
.quick-dictionary-close{position:absolute;right:13px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.52);font-size:23px;color:var(--ink);cursor:pointer}
.quick-dictionary-zh{font-size:46px;line-height:1.1;padding-right:42px}
.quick-dictionary-pinyin{margin-top:7px;color:#7c8aa7;font-weight:700}
.quick-dictionary-meaning{margin-top:7px;color:var(--ink-soft);line-height:1.5}
.quick-dictionary-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.quick-dictionary .confidence-row{margin-top:14px}

.lesson-study-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lesson-plan-step{padding:16px;border-radius:18px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.65)}
.lesson-plan-step b{display:block;margin-bottom:5px}.lesson-plan-step span{font-size:12px;color:var(--ink-soft);line-height:1.45}
.lesson-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lesson-mini-test{display:grid;gap:12px}
.lesson-test-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.68)}
.lesson-test-question{font-weight:700;margin-bottom:11px}
.lesson-test-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lesson-test-option{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.42);border-radius:13px;padding:10px 12px;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
.lesson-test-option.correct{background:rgba(193,188,119,.32);border-color:rgba(141,139,76,.55)}
.lesson-test-option.wrong{background:rgba(216,164,175,.3);border-color:rgba(182,123,136,.55)}
.lesson-order-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.68)}
.lesson-order-prompt{font-size:13px;color:var(--ink-soft);margin-bottom:10px}
.lesson-order-answer,.lesson-order-pool{display:flex;gap:7px;flex-wrap:wrap;min-height:46px;padding:9px;border-radius:14px;background:rgba(255,255,255,.3);border:1px dashed rgba(107,64,59,.16)}
.lesson-order-pool{margin-top:8px}
.lesson-order-token{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.58);border-radius:11px;padding:7px 10px;font-family:'Noto Serif SC',serif;color:var(--ink);cursor:pointer}
.lesson-order-actions{display:flex;gap:8px;margin-top:10px}
.lesson-writing-strip{display:flex;gap:10px;flex-wrap:wrap}
.lesson-writing-item{display:flex;align-items:center;gap:9px;padding:12px;border-radius:16px;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.66)}
.lesson-writing-item .hanzi{font-size:30px}

.game-shell{display:grid;gap:16px}
.game-topbar{
  display:flex;justify-content:space-between;gap:24px;align-items:flex-end;
  padding:30px;border-radius:32px;
  background:linear-gradient(135deg,rgba(175,184,205,.37),rgba(247,221,213,.4),rgba(193,188,119,.26));
  border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.78)
}
.game-eyebrow{font-size:10px;letter-spacing:.22em;font-weight:800;color:#7c8aa7}
.game-topbar h2{margin:7px 0 6px;font-size:36px}.game-topbar p{margin:0;color:var(--ink-soft);max-width:55ch}
.game-controls{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}
.game-controls label{display:grid;gap:5px;font-size:11px;color:var(--ink-soft)}
.game-controls select{padding:11px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.68);background:rgba(255,255,255,.42);font:inherit;color:var(--ink)}
.game-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.game-metrics>div{padding:17px 19px;border-radius:20px;background:rgba(255,255,255,.36);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.game-metrics b{display:block;font-size:25px}.game-metrics span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.game-stage{
  min-height:470px;padding:34px;border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.25));
  border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.8);display:grid;place-items:center
}
.game-card{width:min(720px,100%);text-align:center}
.game-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7c8aa7;font-weight:800}
.game-prompt{font-size:38px;line-height:1.25;margin:18px 0 10px}.game-prompt.hanzi{font-size:72px}
.game-sub{color:var(--ink-soft);margin-bottom:22px}
.game-input-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.game-input-row input{min-width:280px;padding:13px 15px;border:1px solid rgba(255,255,255,.74);border-radius:15px;background:rgba(255,255,255,.5);font:inherit;color:var(--ink);outline:none}
.game-input-row input:focus{box-shadow:0 0 0 4px rgba(175,184,205,.24)}
.game-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.game-option{padding:15px;border-radius:17px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.42);font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.game-option:hover{transform:translateY(-2px)}.game-option.correct{background:rgba(193,188,119,.32);border-color:rgba(141,139,76,.55)}.game-option.wrong{background:rgba(216,164,175,.3);border-color:rgba(182,123,136,.55)}
.game-candidates{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.game-candidate{display:grid;gap:2px;min-width:120px;padding:10px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.46);color:var(--ink);cursor:pointer}
.game-candidate .hanzi{font-size:24px}.game-candidate small{color:var(--ink-soft)}
.game-feedback{min-height:28px;margin-top:18px;font-weight:700}.game-feedback.good{color:#65613f}.game-feedback.bad{color:#a15f6c}
.game-next-wrap{margin-top:16px}
#game-stroke-target{width:300px;height:300px;margin:18px auto;border-radius:24px;background:rgba(255,255,255,.52);border:1px solid rgba(107,64,59,.12);overflow:hidden}
.game-order-answer,.game-order-pool{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:58px;padding:11px;border-radius:16px;border:1px dashed rgba(107,64,59,.18);background:rgba(255,255,255,.3)}
.game-order-pool{margin-top:10px}.game-order-token{border:1px solid rgba(255,255,255,.74);background:rgba(255,255,255,.58);border-radius:12px;padding:9px 12px;font-family:'Noto Serif SC',serif;color:var(--ink);cursor:pointer;font-size:20px}

@media(max-width:980px){
  .wrap{display:block;padding:12px 12px 80px}
  header.top{position:relative;top:0;height:auto;margin-bottom:18px;padding:14px;border-radius:24px}
  .header-tools{display:block}.level-picker{margin:12px 0}.level-picker select{width:auto}
  nav.tabs{flex-direction:row;overflow-x:auto;flex-wrap:nowrap}.hero{grid-template-columns:1fr;padding:30px}.hero .ring-wrap{margin:0}
  section.view{padding-top:0}.game-topbar{align-items:flex-start;flex-direction:column}.game-controls{justify-content:flex-start}
}
@media(max-width:680px){
  .stats-row,.game-metrics{grid-template-columns:repeat(2,1fr)}
  .lesson-study-plan,.lesson-extra-grid,.lesson-test-options{grid-template-columns:1fr}
  .game-stage{padding:22px 14px;min-height:420px}.game-prompt{font-size:30px}.game-prompt.hanzi{font-size:58px}.game-input-row input{min-width:0;width:100%}.game-options{grid-template-columns:1fr}
  .quick-dictionary{right:14px;bottom:14px}.hero h2{font-size:48px!important}
}



/* ============================= RESTORED PREVIOUS LAYOUT ============================= */
.wrap{
  display:block;
  max-width:1240px;
  padding:22px 22px 96px;
}
header.top{
  grid-column:auto;
  grid-row:auto;
  position:sticky;
  top:10px;
  height:auto;
  margin:0 0 18px;
  padding:14px 16px 18px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:28px;
}
header.top .brand{align-items:center}
header.top .brand h1{font-size:22px}
header.top .brand p{font-size:12.5px;line-height:normal}
.header-tools{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-height:0;
  flex:0 1 auto;
}
.level-picker{
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 12px;
}
.level-picker select{
  width:auto;
  padding:4px 24px 4px 2px;
  border:0;
  background:transparent;
  font:inherit;
  color:var(--ink);
}
nav.tabs{
  display:flex;
  flex-direction:row;
  gap:8px;
  flex-wrap:wrap;
  overflow:visible;
  padding-right:0;
}
nav.tabs a{
  width:auto;
  text-align:center;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
}
nav.tabs a.active{transform:none}
section.view{
  grid-column:auto;
  grid-row:auto;
  min-width:0;
  padding:0;
}
.hero{
  min-height:0;
  grid-template-columns:1fr auto;
  padding:26px 28px;
  border-radius:34px;
}
.hero h2{font-size:34px!important;line-height:normal}
.hero p{font-size:inherit;max-width:46ch}
.stats-row{gap:12px}
.stat-card{padding:14px 16px;text-align:center}
.stat-card b{font-size:22px}
.stat-card span{font-size:12px;text-transform:none;letter-spacing:normal}
.progress-panel{margin-top:16px;padding:20px}
.settings-box{margin-top:0}
.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.lesson-card{min-height:175px}
.lesson-card h3{font-size:17px}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

@media(max-width:960px){
  .wrap{display:block;padding:12px 12px 80px}
  header.top{
    position:relative;
    top:0;
    height:auto;
    margin-bottom:18px;
    padding:14px;
    border-radius:24px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .header-tools{width:100%;justify-content:flex-start;display:flex;flex-direction:row}
  .level-picker{margin:0}
  .level-picker select{width:auto}
  nav.tabs{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px}
  nav.tabs a{white-space:nowrap;width:auto;text-align:center}
  .hero{grid-template-columns:1fr;padding:28px}
  .hero .ring-wrap{margin:0 auto}
  section.view{padding-top:0}
}
@media(max-width:640px){
  .wrap{padding:10px 10px 60px}
  header.top{border-radius:22px;padding:12px}
  .brand{width:100%}
  .header-tools{display:block}
  .level-picker{margin:10px 0}
  .level-picker select{max-width:100%}
  .hero{padding:24px 20px}
  .hero h2{font-size:42px!important}
}



/* ============================= VERSION 4 · THREE LEVELS & WRITING QUIZ ============================= */
.stats-row{grid-template-columns:repeat(3,1fr)}
.stat-card.learning b{color:var(--gold)}
.vcard.status-learning .badge{background:var(--gold)}
.text-word.status-learning,.tok.k-learning{border-color:var(--gold)}
.confidence-row{grid-template-columns:repeat(3,minmax(90px,1fr))}
.confidence-row.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.confidence-btn.learning{border-color:rgba(185,146,74,.75);color:#775818}
.confidence-btn.unknown.is-current{background:var(--seal)!important;color:#fff!important;border-color:rgba(168,56,43,.55)!important}
.confidence-btn.learning.is-current{background:var(--gold)!important;color:#35290d!important;border-color:rgba(185,146,74,.75)!important}
.confidence-btn.known.is-current{background:var(--jade)!important;color:#fff!important;border-color:rgba(76,122,104,.6)!important}
.vcard .mini-actions.confidence-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.write-left{width:min(560px,100%)}
.write-character-grid{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;min-height:240px}
.write-character-cell{width:230px;height:230px;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.55);border:1px solid rgba(107,64,59,.16);box-shadow:0 18px 40px rgba(107,64,59,.08);position:relative}
.write-character-cell::before,.write-character-cell::after{content:'';position:absolute;z-index:0;pointer-events:none;opacity:.55}
.write-character-cell::before{inset:50% 0 auto;height:1px;border-top:1px dashed rgba(107,64,59,.22)}
.write-character-cell::after{inset:0 auto 0 50%;width:1px;border-left:1px dashed rgba(107,64,59,.22)}
.write-character-cell svg{position:relative;z-index:1}
.write-quiz-status{min-height:22px;text-align:center;color:var(--ink-soft);font-size:13px}
.write-quiz-status.good{color:var(--jade-dark);font-weight:700}
.write-quiz-status.bad{color:var(--seal-dark);font-weight:700}
footer.app-foot{display:block!important;margin:38px 0 0;padding:18px 12px 2px;text-align:center;color:var(--ink-soft);font-size:12px;opacity:.82}

footer.app-foot{
  position:fixed;
  z-index:900;
  right:0;
  bottom:0;
  left:0;
  margin:0;
  padding:10px 16px;
  border-top:1px solid rgba(107,64,59,.12);
  background:rgba(243,237,224,.94);
  box-shadow:0 -6px 24px rgba(74,61,45,.06);
  backdrop-filter:blur(12px);
}
@media(max-width:680px){
  .stats-row{grid-template-columns:1fr}
  .write-character-grid{gap:9px;min-height:170px}
  .write-character-cell{width:min(43vw,180px);height:min(43vw,180px);border-radius:18px}
  .confidence-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ============================= VERSION 5 · INTERACTIVE PRACTICE ============================= */
.vcard.is-marked{position:relative;border-width:2px;box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.42)}
.vcard.is-marked.status-unknown{border-color:rgba(182,123,136,.62)}
.vcard.is-marked.status-learning{border-color:rgba(193,188,119,.88)}
.vcard.is-marked.status-known{border-color:rgba(101,113,72,.65)}
.vcard.is-marked::after{content:'отмечено';position:absolute;left:11px;top:10px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.55);font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.quick-dictionary{width:min(500px,calc(100vw - 28px));max-height:min(82vh,820px);overflow:auto}
.quick-dictionary-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.quick-meta-pill{padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.46);font-size:10px;color:var(--ink-soft)}
.quick-section-title{margin:18px 0 8px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#7c8aa7}
.word-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.word-breakdown.compact{margin-top:10px;grid-template-columns:repeat(auto-fit,minmax(94px,1fr))}
.word-part-card{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.38);border-radius:15px;padding:10px;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
.word-part-card:hover{transform:translateY(-1px);background:rgba(255,255,255,.62)}
.word-part-card .char{display:block;font-family:'Noto Serif SC',serif;font-size:27px;line-height:1.1}.word-part-card .py{display:block;margin-top:4px;font-size:11px;font-weight:700;color:#7c8aa7}.word-part-card .ru{display:block;margin-top:3px;font-size:10px;line-height:1.35;color:var(--ink-soft)}
.word-whole-summary{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.62);line-height:1.5}
.word-whole-summary b{display:block;margin-bottom:3px;color:var(--ink)}
.quick-example{padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.3);margin-top:7px}.quick-example .zh{font-size:18px}.quick-example .ru{font-size:11px;color:var(--ink-soft);margin-top:3px}
.word-popover .word-breakdown{margin-top:12px}.word-popover .quick-section-title{margin-top:13px}
.speech-token{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.speech-token:hover{background:rgba(247,221,213,.64)}
.answer-token{cursor:pointer}
.game-next-wrap .btn{font-size:15px;padding:12px 20px}
.game-retry-hint{font-size:12px;color:var(--ink-soft)}
.game-memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:20px}
.memory-card{min-height:78px;border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(255,255,255,.43);font:inherit;color:var(--ink);cursor:pointer;padding:9px;display:grid;place-items:center}
.memory-card.hanzi{font-size:28px}.memory-card.is-open{background:rgba(175,184,205,.25);border-color:rgba(124,138,167,.5)}.memory-card.is-matched{background:rgba(193,188,119,.28);border-color:rgba(141,139,76,.55);opacity:.66;pointer-events:none}
.game-word-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:62px;margin:16px 0;padding:10px;border:1px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.28)}
.game-char-pool{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.game-char-token{min-width:52px;min-height:52px;border:1px solid rgba(255,255,255,.72);border-radius:14px;background:rgba(255,255,255,.52);font-family:'Noto Serif SC',serif;font-size:26px;color:var(--ink);cursor:pointer}
.listening-card,.tone-card{text-align:center}.listening-orb{width:88px;height:88px;margin:4px auto 14px;border-radius:50%;display:grid;place-items:center;font-family:'Noto Serif SC',serif;font-size:35px;background:linear-gradient(145deg,rgba(175,184,205,.5),rgba(247,221,213,.65));box-shadow:0 16px 42px rgba(107,64,59,.1)}
.listening-prompt{font-size:15px;color:var(--ink-soft);margin-bottom:12px}.listening-options{max-width:760px;margin:18px auto 0}.listening-answer{display:none;max-width:720px;margin:18px auto 0;padding:16px;border-radius:18px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.7)}.listening-answer.show{display:block}.listening-answer .answer-zh{font-size:30px}.listening-answer .answer-py{color:#7c8aa7;font-weight:700;margin-top:5px}.listening-answer .answer-ru{color:var(--ink-soft);margin-top:5px}
.tone-hanzi{all:unset;display:block;margin:8px auto 2px;font-size:88px;cursor:pointer}.tone-pinyin{min-height:30px;font-size:20px;font-weight:700;color:#7c8aa7;margin-bottom:15px}.tone-options{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;max-width:720px;margin:0 auto}.tone-options button{border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(255,255,255,.42);color:var(--ink);padding:13px 8px;cursor:pointer}.tone-options b{display:block;font-size:24px}.tone-options span{font-size:10px;color:var(--ink-soft)}.tone-options button.correct{background:rgba(193,188,119,.32);border-color:rgba(141,139,76,.58)}.tone-options button.wrong{background:rgba(216,164,175,.3);border-color:rgba(182,123,136,.55)}
@media(max-width:680px){.quick-dictionary{right:8px;bottom:8px;width:calc(100vw - 16px);padding:18px}.game-memory-grid{grid-template-columns:repeat(2,1fr)}.tone-options{grid-template-columns:repeat(3,1fr)}.word-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ============================= MULTI-PAGE + MOBILE ============================= */
nav.tabs a{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
}
.mobile-menu-toggle{
  display:none;
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.42);
  color:var(--ink);
  font:700 14px 'Manrope',sans-serif;
  cursor:pointer;
}
.vcard .p,.vcard .r{opacity:1!important;}
.vcard{
  cursor:default;
  justify-content:flex-start;
  gap:7px;
}
.vcard .r.vocab-russian{
  order:1;
  width:100%;
  min-height:2.7em;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
  color:var(--ink);
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.vcard .h{order:2;margin-top:3px;}
.vcard .p{order:3;min-height:auto;}
.vcard .icon-row{order:4;}
.vcard .mini-actions{order:5;}
.page-only-note{font-size:12px;color:var(--ink-soft);}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden;}
  .wrap{width:100%;padding:8px 8px 56px;}
  header.top{position:relative;top:0;padding:12px;border-radius:18px;gap:12px;}
  .brand{align-items:flex-start;}
  .brand .stamp{width:42px;height:42px;border-radius:13px;}
  .brand h1{font-size:18px;line-height:1.2;}
  .brand p{font-size:11px;line-height:1.35;}
  .header-tools{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:8px;}
  .level-picker{width:100%;justify-content:space-between;margin:0;min-height:44px;}
  .level-picker select{flex:1;min-width:0;}
  .mobile-menu-toggle{display:block;}
  nav.tabs{
    display:none;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding:4px 0 0;
    overflow:visible;
  }
  header.top.nav-open nav.tabs{display:grid;}
  nav.tabs a{width:100%;min-height:44px;padding:9px 8px;white-space:normal;text-align:center;border-radius:12px;}
  .hero{grid-template-columns:1fr;padding:22px 18px;border-radius:22px;text-align:left;}
  .hero h2{font-size:38px!important;}
  .hero .cta{display:grid;grid-template-columns:1fr;}
  .hero .cta .btn{width:100%;min-height:46px;}
  .ring-wrap{margin:0 auto;}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .stat-card{padding:14px 8px;}
  .settings-box{align-items:stretch;flex-direction:column;}
  .settings-box label,.audio-check{width:100%;}
  .audio-check .btn,.audio-check select{width:100%;max-width:none;}
  .hsk-summary{align-items:flex-start;flex-direction:column;}
  .hsk-summary>div:last-child{text-align:left!important;min-width:0;}
  .progress-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .toolbar input[type=search]{grid-column:1/-1;width:100%;min-width:0;}
  .filter-chip{min-height:42px;}
  .vgrid{grid-template-columns:1fr;gap:10px;}
  .vcard{min-height:0;padding:18px 14px;}
  .vcard .h{font-size:44px;}
  .vcard .r.vocab-russian{font-size:15px;}
  .flip-card{width:100%;max-width:100%;min-height:285px;padding:28px 14px;}
  .flip-card .big-hanzi{font-size:68px;}
  .rate-row.confidence-row{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));}
  .write-stage{width:100%;gap:16px;}
  .write-left,.write-right{width:100%;max-width:100%;}
  .write-character-grid{width:100%;justify-content:center;}
  .write-controls,.practice-actions,.generated-actions{display:grid;grid-template-columns:1fr;width:100%;}
  .write-controls .btn,.practice-actions .btn,.generated-actions .btn{width:100%;min-height:44px;}
  .exercise-intro{padding:18px;}
  .exercise-controls{display:grid;grid-template-columns:1fr;width:100%;}
  .exercise-controls label,.exercise-controls select,.exercise-controls .btn{width:100%;max-width:none;}
  .practice-card,.generated-text-card,.text-builder{padding:18px 14px;border-radius:20px;}
  .translation-prompt{font-size:20px;}
  .translation-answer{font-size:20px;}
  .speech-target{font-size:24px;}
  .tone-hanzi{font-size:72px;}
  .tone-options{grid-template-columns:repeat(2,minmax(0,1fr));}
  .game-memory-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lesson-tools{display:grid;grid-template-columns:1fr;width:100%;}
  .lesson-tools input,.lesson-tools select{width:100%;}
  .lesson-progress-card{align-items:flex-start;}
  .sentence-card{padding:15px 13px;}
  .sentence-zh,.generated-zh{font-size:21px;line-height:1.9;overflow-wrap:anywhere;}
  .sentence-foot{align-items:stretch;display:grid;grid-template-columns:1fr;}
  .sentence-foot .btn{width:100%;}
  .modal-overlay{padding:0;}
  .modal-box,.modal-box.wide,.modal-box.dictionary-modal,.modal-box.lesson-modal-box{
    width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:14px;
  }
  .quick-dictionary{left:8px;right:8px;bottom:8px;width:auto;max-height:78dvh;overflow:auto;}
  button,.btn,select,input,a{touch-action:manipulation;}
}

@media(max-width:390px){
  nav.tabs{grid-template-columns:1fr;}
  .stats-row,.progress-metrics{grid-template-columns:1fr 1fr;}
  .tone-options{grid-template-columns:1fr 1fr;}
}

/* ============================= VERSION 7 · STUDY MODES ============================= */
.study-stage{gap:14px;}
.study-toolbar{width:min(680px,100%);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 4px;}
.study-toolbar>label{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:12px;font-weight:700;}
.study-toolbar select{padding:9px 32px 9px 11px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.55);color:var(--ink);font:inherit;}
.study-segments{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.study-segment{min-height:38px;padding:8px 14px;border:0;border-right:1px solid var(--line);background:rgba(255,255,255,.34);color:var(--ink-soft);font:700 12px 'Manrope',sans-serif;cursor:pointer;}
.study-segment:last-child{border-right:0;}.study-segment.active{background:var(--ink);color:#fff;}
.study-audio-toggle input{accent-color:var(--jade);width:17px;height:17px;}
.context-study{width:min(620px,100%);margin:0 auto;padding:28px;text-align:center;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.42);box-shadow:var(--shadow);}
.context-visual{font-size:64px;line-height:1;margin-bottom:8px;}
.context-sentence{font-size:30px;line-height:1.65;margin:18px 0 3px;}
.context-translation{font-size:14px;color:var(--ink-soft);}.context-prompt{margin:20px 0 10px;font-size:12px;font-weight:800;color:var(--ink-soft);}
.context-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.context-options button{min-height:70px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.55);color:var(--ink);cursor:pointer;}
.context-options button .hanzi{display:block;font-size:26px;}.context-options button small{display:block;margin-top:3px;color:var(--ink-soft);}
.context-options button.correct{border-color:var(--jade);background:rgba(76,122,104,.14);}.context-options button.wrong{border-color:var(--seal);background:rgba(168,56,43,.1);}
.context-result{margin-top:16px;}.context-answer{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:13px;}.context-answer b{font-size:34px;}.context-answer span{color:var(--ink-soft);}
.context-result .word-breakdown{margin:12px 0;}.context-result>.btn{margin-top:12px;}
@media(max-width:640px){.study-toolbar{display:grid;grid-template-columns:1fr;}.study-segments,.study-toolbar>label{width:100%;}.study-toolbar select{margin-left:auto;}.context-study{padding:22px 13px;border-radius:20px;}.context-sentence{font-size:25px;}.context-options{grid-template-columns:1fr 1fr;}}

/* ============================= VERSION 8 · LIBRARY AND ANSWERS ============================= */
.study-word-details{display:block;width:auto;margin:8px auto 4px;padding:0 8px;border:0;background:transparent;color:var(--ink);cursor:pointer;}
.study-word-details:hover{color:var(--seal);}
.game-help-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.game-help-controls .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.game-help-controls .btn svg{width:18px;height:18px;}
.game-revealed-answer{margin-top:9px;color:var(--ink);font-size:16px;line-height:1.7;}
.recall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.recall-head h2{margin:0 0 5px}.recall-head p{margin:0;color:var(--ink-soft)}.recall-stage{max-width:760px;margin:0 auto}.recall-card{padding:28px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.42);box-shadow:var(--shadow);text-align:center}.recall-meaning{margin:20px 0 24px;font-size:28px;font-weight:750}.recall-input-label{display:block;margin-bottom:8px;color:var(--ink-soft);font-size:12px;font-weight:700}.recall-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:520px;margin:0 auto}.recall-input-row input{min-width:0}.recall-feedback{min-height:24px;margin:12px 0;font-size:13px}.recall-feedback.good{color:var(--known)}.recall-feedback.bad{color:var(--unknown)}.recall-answer{display:grid;justify-items:center;gap:10px;margin-top:18px}.recall-hanzi{padding:0;border:0;background:transparent;color:var(--seal);font-size:64px;cursor:pointer}.recall-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:10px}
@media(max-width:620px){.recall-head{align-items:stretch;flex-direction:column}.recall-meaning{font-size:23px}.recall-input-row{grid-template-columns:1fr}.recall-rates{grid-template-columns:1fr}}
@media(max-width:620px){.game-help-controls{display:grid;grid-template-columns:1fr}.game-help-controls .btn{width:100%;}}
.zh-title{padding:0;border:0;background:transparent;color:var(--seal);font:inherit;cursor:pointer;}.zh-title:hover{text-decoration:underline;}
.context-phrase-details{display:flex;flex-direction:column;gap:5px;margin:10px 0 14px;padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.4);}.context-phrase-details b{color:var(--seal);}.context-phrase-details span{color:var(--ink-soft);}
.pattern-card{text-align:center;}.pattern-translation{margin-top:7px;color:var(--ink-soft);}
.pattern-frame{margin:18px 0;font-size:27px;}.pattern-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:600px;margin:0 auto;}.pattern-options button{min-height:46px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.44);font:700 17px 'Noto Serif SC',serif;color:var(--ink);cursor:pointer;}.pattern-options button.active{border-color:var(--jade);background:rgba(76,122,104,.12);}.pattern-result{margin:24px 0 4px;font-size:29px;line-height:1.7;}
@media(max-width:620px){.pattern-result{font-size:25px;}.pattern-options{grid-template-columns:1fr 1fr;}}
.dictation-card,.dialogue-card{text-align:center;}.dictation-listen{width:104px;height:104px;margin:18px auto 24px;border:1px solid var(--line);border-radius:50%;background:rgba(175,184,205,.2);color:var(--ink);cursor:pointer;}.dictation-listen svg{width:38px;height:38px;}.dictation-answer{display:flex;flex-direction:column;gap:7px;margin-top:18px;}.dictation-answer .hanzi{font-size:28px;}.dictation-answer span,.dialogue-translation{color:var(--ink-soft);}.dialogue-bubble{padding:20px;font-size:28px;line-height:1.7;background:rgba(255,255,255,.38);border:1px solid var(--line);border-radius:8px;margin-bottom:8px;}.dialogue-card .game-options{margin-top:22px;}
.dictation-ime-answer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;min-height:68px;margin:0 auto 16px;padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.35);font-size:27px}.dictation-ime{max-width:720px;margin:0 auto 16px;text-align:left}.dictation-ime .pinyin-candidates{margin-top:9px}.dictation-ime-answer .answer-token{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.6);font-size:25px;cursor:pointer}
.dictation-writing-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;max-width:850px;margin:0 auto 18px}.dictation-writing-cell{width:94px;height:94px;flex:0 0 94px;border:1px solid var(--line);border-radius:8px;background-color:rgba(255,255,255,.4);background-image:linear-gradient(to right,transparent 49.5%,rgba(124,138,167,.15) 49.5%,rgba(124,138,167,.15) 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,rgba(124,138,167,.15) 49.5%,rgba(124,138,167,.15) 50.5%,transparent 50.5%);overflow:hidden}.dictation-writing-cell.complete{border-color:var(--jade);background-color:rgba(76,122,104,.07)}.dictation-writing-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
@media(max-width:620px){.dictation-writing-grid{gap:5px}.dictation-writing-cell{width:82px;height:82px;flex-basis:82px}.dictation-writing-cell svg{width:82px!important;height:82px!important}.dictation-writing-actions{display:grid;grid-template-columns:1fr}.dictation-writing-actions .btn{width:100%}}

/* ============================= VERSION 14 · CONSISTENT CONTROLS ============================= */
.btn,.filter-chip,.confidence-btn,.game-option,.game-candidate,.game-char-token,.game-order-token,.memory-card,.tone-options button,.ui-choice,.reader-chapters button,.book-level-tabs button,.pattern-options button{
  border-radius:8px!important;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.btn:hover,.filter-chip:hover,.confidence-btn:hover,.game-option:hover,.game-candidate:hover,.game-char-token:hover,.game-order-token:hover,.memory-card:hover,.tone-options button:hover,.ui-choice:hover{transform:translateY(-1px);border-color:rgba(107,64,59,.42);box-shadow:0 7px 18px rgba(107,64,59,.09);}
button:focus-visible,a.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(124,138,167,.42);outline-offset:2px;}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important;box-shadow:none!important;}
.ui-choice{min-height:42px;padding:9px 12px;border:1px solid var(--line);background:rgba(255,255,255,.44);color:var(--ink);font:700 12px 'Manrope',sans-serif;cursor:pointer;text-align:left;}
.ui-choice.active{border-color:var(--ink);background:var(--ink);color:#fff;}.ui-choice.correct{border-color:var(--jade);background:rgba(76,122,104,.14);}.ui-choice.wrong{border-color:var(--seal);background:rgba(168,56,43,.1);}
.grammar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);}.grammar-head h2{margin:0 0 6px;font-size:28px;}.grammar-head p{margin:0;color:var(--ink-soft);}.grammar-level{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:800;color:var(--ink-soft);}
.grammar-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start;}.grammar-topics{display:grid;gap:7px;}.grammar-topics .ui-choice{display:flex;align-items:center;gap:9px;}.grammar-topics .ui-choice span{display:grid;place-items:center;width:23px;height:23px;border:1px solid currentColor;border-radius:50%;font-size:10px;}
.grammar-lesson{padding:25px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.4);box-shadow:var(--shadow);}.grammar-kicker{color:#7c8aa7;font-size:10px;font-weight:800;text-transform:uppercase;}.grammar-lesson h3{margin:8px 0 14px;font-size:25px;}.grammar-formula{padding:15px;border-left:3px solid var(--seal);background:rgba(175,184,205,.13);font-size:22px;}.grammar-rule{color:var(--ink-soft);line-height:1.7;}
.grammar-examples{display:grid;gap:8px;margin:18px 0;}.grammar-examples>div{position:relative;padding:13px 52px 13px 14px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.32);}.grammar-examples .hanzi{font-size:21px;}.grammar-examples span{color:var(--ink-soft);font-size:12px;}.grammar-examples .grammar-speak{position:absolute;right:10px;top:50%;transform:translateY(-50%);}.grammar-quiz{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}.grammar-quiz>div{display:grid;gap:7px;margin-top:12px;}.grammar-quiz p{min-height:20px;margin-bottom:0;font-size:12px}.grammar-quiz p.good{color:var(--jade-dark)}.grammar-quiz p.bad{color:var(--seal)}
@media(max-width:760px){.grammar-head{align-items:flex-start;flex-direction:column;}.grammar-layout{grid-template-columns:1fr;}.grammar-topics{grid-template-columns:1fr;}.grammar-lesson{padding:19px 14px;}.grammar-formula{font-size:19px;}}
.review-schedule{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}.review-schedule>div{padding:11px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.28);}.review-schedule b{display:block;font-size:20px;color:var(--ink);}.review-schedule span{display:block;margin-top:2px;color:var(--ink-soft);font-size:10px;line-height:1.35;}
@media(max-width:640px){.review-schedule{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ============================= VERSION 6 · FIXES AND PRACTICE FLOW ============================= */
.vcard{cursor:pointer;}
.vcard .icon-row{flex-wrap:wrap;}

/* Карточка слова: сначала понятный русский смысл, затем само слово и разбор. */
.quick-dictionary{display:flex;flex-direction:column;}
.quick-dictionary-meaning{margin:0 42px 0 0;color:var(--ink);}
.quick-primary-label,.word-whole-label{
  display:block;
  margin-bottom:6px;
  color:#7c8aa7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.quick-primary-meaning{
  font-size:25px;
  line-height:1.25;
  font-weight:700;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.quick-dictionary-word-line{
  display:flex;
  align-items:baseline;
  gap:13px;
  flex-wrap:wrap;
  margin-top:14px;
  padding:13px 15px;
  border-radius:17px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.68);
}
.quick-dictionary-word-line .quick-dictionary-zh{padding:0;font-size:40px;line-height:1;}
.quick-dictionary-word-line .quick-dictionary-pinyin{margin:0;font-size:16px;}
.word-whole-summary.meaning-first{min-width:min(280px,100%);text-align:left;}
.word-whole-summary.meaning-first b{font-size:20px;line-height:1.3;margin:0;overflow-wrap:anywhere;}

/* Полный встроенный словарь — без iframe, который блокировался внешним сайтом. */
.local-dictionary-modal{height:min(820px,92vh)!important;}
.dictionary-local-content{flex:1;min-height:0;overflow:auto;padding:22px 24px 30px;}
.local-dictionary-primary{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.25));
  border:1px solid rgba(255,255,255,.72);
}
.local-dictionary-meaning{font-size:32px;font-weight:700;line-height:1.22;color:var(--ink);overflow-wrap:anywhere;}
.local-dictionary-word{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;margin-top:17px;color:#7c8aa7;font-weight:700;}
.local-dictionary-word .hanzi{font-size:55px;line-height:1;color:var(--ink);}
.local-dictionary-section{margin-top:20px;}
.local-dictionary-note{color:var(--ink-soft);font-size:13px;}
.local-dictionary-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;}
.local-dictionary-confidence{margin-top:18px;}

/* Карточки: кнопки оценки больше не наезжают на нижнюю границу карточки. */
#study-area{width:min(680px,100%);}
.study-card-stack{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding-bottom:8px;}
.study-card-stack .flip-card{width:min(560px,100%);min-height:350px;padding:36px 24px 30px;}
.study-card-stack .flip-card .meaning{width:min(340px,100%);min-height:0;margin-top:5px;}
.study-card-stack .flip-card .meaning:empty{display:none;}
.study-card-stack .rate-row.confidence-row{
  width:min(560px,100%);
  max-width:none;
  margin:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.study-card-stack .rate-row.confidence-row .confidence-btn{min-height:44px;font-size:12px!important;}

/* Пропись: скрытый ответ, боковая вкладка и подсказка ровно одной следующей чертой. */
.write-board-shell{position:relative;width:100%;padding-right:42px;}
.write-board-shell .write-character-grid{width:100%;}
.write-side-tab{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  min-height:164px;
  padding:13px 9px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:0 15px 15px 0;
  background:linear-gradient(180deg,rgba(175,184,205,.52),rgba(247,221,213,.62));
  color:var(--ink);
  font:700 11px 'Manrope',sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(107,64,59,.08);
}
.write-side-tab:hover{filter:brightness(1.03);}
.write-character-cell{isolation:isolate;}
.write-character-cell.is-answer-visible{box-shadow:0 18px 40px rgba(107,64,59,.12),0 0 0 3px rgba(175,184,205,.24);}
.write-character-cell.has-error,.dictation-writing-cell.has-error{border-color:var(--seal)!important;box-shadow:0 0 0 3px rgba(168,56,43,.14);animation:stroke-error .18s ease-in-out 2}@keyframes stroke-error{50%{transform:translateX(3px)}}
.write-stroke-hint{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:5!important;pointer-events:none;animation:writeHintPulse 1.2s ease-in-out infinite;}
.write-stroke-hint path{fill:rgba(182,123,136,.82);}
@keyframes writeHintPulse{0%,100%{opacity:.62}50%{opacity:1}}
.write-load-error{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;color:var(--ink-soft);font-size:12px;}
.write-hint-controls{margin-top:2px;}

/* Аудирование теперь работает только с полноценными предложениями. */
.listening-primary-translation{font-size:20px!important;font-weight:700;color:var(--ink)!important;margin:0 0 13px!important;}
.listening-answer .answer-zh{margin-top:3px;line-height:1.7;}
.listening-answer .answer-py{font-size:14px;line-height:1.6;}

@media(max-width:760px){
  .quick-primary-meaning{font-size:22px;}
  .quick-dictionary-word-line .quick-dictionary-zh{font-size:36px;}
  .dictionary-local-content{padding:16px 10px 24px;}
  .local-dictionary-primary{padding:19px 16px;border-radius:19px;}
  .local-dictionary-meaning{font-size:25px;}
  .local-dictionary-word .hanzi{font-size:46px;}
  .study-card-stack{gap:14px;}
  .study-card-stack .flip-card{min-height:320px;padding:32px 14px 24px;}
  .study-card-stack .rate-row.confidence-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .study-card-stack .rate-row.confidence-row .confidence-btn{padding:9px 3px!important;font-size:10.5px!important;}
  .write-board-shell{padding-right:30px;}
  .write-side-tab{right:-2px;min-height:136px;padding:10px 6px;font-size:9px;border-radius:0 12px 12px 0;}
  .write-hint-controls{grid-template-columns:1fr 1fr!important;}
}

@media(max-width:390px){
  .write-hint-controls{grid-template-columns:1fr!important;}
  .quick-primary-meaning{font-size:20px;}
}

/* ============================= SWIPE DICTIONARY + GLOBAL PROGRESS ============================= */
.global-learning-progress{display:grid;grid-template-columns:auto minmax(140px,1fr);align-items:center;gap:12px;margin:0 2px 24px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.58)}
.global-progress-copy{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-soft);white-space:nowrap}.global-progress-copy b{color:var(--jade-dark);font-size:12px}.global-progress-track{height:6px;border-radius:999px;background:#e3e8e3;overflow:hidden}.global-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:var(--jade);transition:width .35s ease}
.vocab-mode-switch{display:flex;width:max-content;margin:0 0 14px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#eaeeea}.vocab-mode-switch button{border:0;border-radius:7px;padding:8px 16px;background:transparent;color:var(--ink-soft);font:700 12px 'Manrope',sans-serif;cursor:pointer}.vocab-mode-switch button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(30,40,34,.08)}
.vocab-swipe-stage{width:min(560px,100%);margin:8px auto 40px;user-select:none}.swipe-deck{position:relative;height:410px;display:grid;place-items:center}.swipe-card-back,.swipe-card{position:absolute;width:min(430px,calc(100vw - 40px));height:380px;border:1px solid var(--line);border-radius:28px;background:var(--card)}.swipe-card-back{transform:translateY(10px) scale(.96);background:#e9eee9}.swipe-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 28px;box-shadow:0 20px 55px rgba(37,42,39,.1);touch-action:none;cursor:grab;transition:transform .18s ease,opacity .18s ease}.swipe-card.dragging{cursor:grabbing;transition:none}.swipe-card.leaving{opacity:0;pointer-events:none}.swipe-hanzi{font-size:86px;line-height:1.15;color:var(--ink)}.swipe-pinyin{margin-top:13px;color:var(--seal);font-size:18px}.swipe-meaning{max-width:330px;margin-top:9px;text-align:center;color:var(--ink-soft);font-size:15px;line-height:1.5}.swipe-tip{position:absolute;bottom:20px;color:#98a099;font-size:11px}.swipe-audio{position:absolute;right:20px;top:19px;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer}.swipe-audio svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.swipe-stamp{position:absolute;top:30px;padding:6px 9px;border:2px solid currentColor;border-radius:8px;font-size:12px;font-weight:800;opacity:0}.swipe-stamp-no{left:25px;color:var(--seal);transform:rotate(-8deg)}.swipe-stamp-yes{right:25px;color:var(--jade);transform:rotate(8deg)}.swipe-stamp-learn{top:auto;bottom:48px;color:var(--gold)}.swipe-card[data-intent="unknown"] .swipe-stamp-no,.swipe-card[data-intent="known"] .swipe-stamp-yes,.swipe-card[data-intent="learning"] .swipe-stamp-learn{opacity:1}
.swipe-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.swipe-action{min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink-soft);font:700 12px 'Manrope',sans-serif;cursor:pointer}.swipe-action span{font-size:17px}.swipe-action.no:hover{border-color:var(--seal);color:var(--seal)}.swipe-action.learn:hover{border-color:var(--gold);color:#83662f}.swipe-action.yes:hover{border-color:var(--jade);color:var(--jade-dark)}.swipe-complete{text-align:center;padding:80px 20px}.swipe-complete .hanzi{display:block;font-size:64px;color:var(--jade)}.swipe-complete h3{margin:12px 0 5px}.swipe-complete p{margin:0 0 20px;color:var(--ink-soft)}
@media(max-width:620px){.global-learning-progress{margin-bottom:16px}.swipe-deck{height:365px}.swipe-card-back,.swipe-card{height:340px}.swipe-hanzi{font-size:70px}.swipe-actions{gap:6px}.swipe-action{font-size:10.5px;padding:7px 3px}}