:root{
  --paper:#ffffff;
  --paper2:#f8f7f5;
  --ink:#242321;
  --muted:#77736f;
  --line:#e8e4df;
  --sage:#b5c0ad;
  --blue:#a8b6c4;
  --rose:#d3bdc3;
  --beige:#d8cbb9;
  --lav:#c8c0cf;
  --shadow:0 14px 42px rgba(47,42,37,.07);
  --radius:24px;
  --en:"Times New Roman", Times, "Tinos", serif;
  --zh:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--zh);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.en,.word,.definition,.exampleEN,.phonetic,.number{font-family:var(--en)}
#appShell{max-width:680px;margin:0 auto;min-height:100vh;background:#fff}
.topbar{position:sticky;top:0;z-index:9;display:flex;align-items:flex-end;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 20px 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,228,223,.7)}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
h1{margin:2px 0 0;font-family:var(--en);font-size:34px;font-weight:600;line-height:1}
.iconBtn{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;font-family:var(--en);font-size:14px}
main{padding:18px 18px 112px}
.tabbar{position:fixed;z-index:10;left:50%;transform:translateX(-50%);bottom:0;width:min(680px,100%);display:grid;grid-template-columns:repeat(5,1fr);padding:9px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line)}
.tab{border:0;background:transparent;color:#aaa29b;display:grid;gap:3px;justify-items:center;font-size:11px;padding:4px}.tab span{font-family:var(--en);font-size:19px}.tab b{font-weight:400}.tab.active{color:var(--ink)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.soft{background:var(--paper2);box-shadow:none}
.section{margin-bottom:20px}.sectionTitle{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 10px}.sectionTitle h2{font-size:17px;margin:0;font-weight:600}.sectionTitle small{color:var(--muted);font-family:var(--en)}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.hero h2{font-size:15px;margin:0 0 4px;font-weight:400;color:var(--muted)}.hero .big{font-family:var(--en);font-size:30px}
.progress{height:7px;border-radius:999px;background:#eeeae6;overflow:hidden}.progress>i{display:block;height:100%;background:var(--sage);border-radius:inherit}
.studyCard{padding:28px 22px 22px;min-height:490px;display:flex;flex-direction:column}.wordTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.word{font-size:42px;line-height:1.04;font-weight:600;overflow-wrap:anywhere}.phonetic{color:var(--muted);font-size:15px;margin-top:8px}.pos{font-size:12px;color:var(--muted);margin-top:7px}
.speak{border:1px solid var(--line);background:#fff;border-radius:50%;width:45px;height:45px;font-size:18px;flex:0 0 auto}
.reveal{margin:auto 0 20px;text-align:center}.reveal button,.primary{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:13px 22px;font-size:14px}
.wordInfo{display:grid;gap:13px;margin-top:24px}.meaning{font-size:19px;line-height:1.55;font-weight:600}.definition{font-size:16px;line-height:1.5;color:#4c4946}.exampleBox{border-left:5px solid var(--beige);background:#fbfaf8;border-radius:12px;padding:13px 14px}.exampleEN{font-size:16px;line-height:1.55}.exampleZH{font-size:14px;line-height:1.7;color:var(--muted);margin-top:7px}.note{font-size:13px;line-height:1.6;color:var(--muted)}
.ratingGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:auto}.rating{border:0;padding:12px 6px;border-radius:14px;font-size:12px;transition:transform .15s ease,box-shadow .15s ease}.rating.selected{box-shadow:inset 0 0 0 2px rgba(36,35,33,.75);transform:translateY(-1px)}.ratingConfirm{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;flex-wrap:wrap}.ratingConfirm .primary{white-space:nowrap}.r0{background:#eeeae6}.r1{background:#efe5da}.r2{background:#e2e9df}
.miniBtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px}.linkBtn{border:0;background:transparent;color:var(--muted);padding:6px;text-decoration:underline;text-underline-offset:3px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.rowMain{min-width:0}.rowTitle{font-family:var(--en);font-size:20px}.rowSub{color:var(--muted);font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;flex-wrap:wrap;gap:9px}.empty{text-align:center;padding:50px 20px;color:var(--muted)}.empty .mark{font-family:var(--en);font-size:46px;color:var(--sage);margin-bottom:10px}
.metricGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.metric{background:var(--paper2);border-radius:18px;padding:16px}.metric .n{font-family:var(--en);font-size:28px}.metric .l{font-size:12px;color:var(--muted);margin-top:3px}
.setting{padding:15px 0;border-bottom:1px solid var(--line)}.setting:last-child{border-bottom:0}.setting label{display:flex;align-items:center;justify-content:space-between;gap:15px}.setting input[type=number]{width:74px;padding:8px;border:1px solid var(--line);border-radius:12px;text-align:center}.setting select{padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.badge{display:inline-block;border-radius:999px;padding:5px 9px;background:#f0eeeb;font-size:11px;color:var(--muted)}
.sheet{border:0;border-radius:26px 26px 0 0;width:min(680px,100%);max-width:none;margin:auto 0 0;max-height:84vh;padding:0;background:#fff;box-shadow:0 -14px 50px rgba(0,0,0,.12)}.sheet::backdrop{background:rgba(30,27,24,.26);backdrop-filter:blur(3px)}.sheetInner{padding:22px 20px calc(24px + env(safe-area-inset-bottom));overflow:auto;max-height:84vh}.sheetHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.sheetHead h2{margin:0;font-family:var(--en);font-size:28px}.close{border:1px solid var(--line);background:#fff;border-radius:50%;width:38px;height:38px}
.search{width:100%;border:1px solid var(--line);border-radius:999px;background:var(--paper2);padding:12px 16px;outline:none}.search:focus{border-color:#c7c0b7}
.toast{position:fixed;z-index:40;left:50%;bottom:92px;transform:translateX(-50%);background:#252321;color:#fff;padding:10px 15px;border-radius:999px;font-size:12px;box-shadow:var(--shadow);animation:fade 2.2s forwards}@keyframes fade{0%{opacity:0;transform:translate(-50%,8px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.installNote{font-size:13px;line-height:1.7;color:var(--muted)}
.pdfOnly{display:none}
@media (max-width:400px){.word{font-size:36px}.studyCard{min-height:455px}.ratingGrid{gap:6px}.rating{font-size:11px;padding:11px 3px}}
@media print{
  @page{size:A4;margin:15mm}
  body{background:#fff!important;font-family:"Songti SC","STSong","SimSun",serif;color:#222}
  #appShell,.tabbar,.topbar,dialog,.toast{display:none!important}
  #printRoot{display:block!important}
  .printHeader{margin-bottom:18px}.printHeader h1{font-family:"Times New Roman",Times,serif;font-size:24pt;margin:0}.printHeader p{margin:6px 0;color:#666}
  .printEntry{break-inside:avoid;border:1px solid #e5e1dc;border-radius:10px;margin:0 0 10px;padding:12px 14px;position:relative}.printEntry:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent,#b5c0ad);border-radius:10px 0 0 10px}.printWord{font-family:"Times New Roman",Times,serif;font-size:18pt;font-weight:bold;display:inline-block;padding:2px 8px;background:#e8ece5;border-radius:5px}.printMeta{font-family:"Times New Roman",Times,serif;color:#777;font-size:9.5pt;margin-top:5px}.printMeaning{font-weight:bold;font-size:11pt;margin-top:8px}.printDef,.printEx{font-family:"Times New Roman",Times,serif;font-size:10.5pt;line-height:1.45;margin-top:6px}.printZh{font-size:9.8pt;color:#666;line-height:1.55;margin-top:3px}
}


/* v0.7 gestures + detailed dictionary */
.studyCard{position:relative;overflow:hidden;touch-action:pan-y}
.swipeRail{display:flex;justify-content:space-between;gap:12px;color:#aaa39c;font-size:11px;margin:-10px 0 18px;letter-spacing:.02em}
.studyCard.touching{transition:none}
.studyCard.swipeMastered{transform:translateX(-34px);opacity:.55;transition:transform .15s ease,opacity .15s ease}
.studyCard.swipeDetail{transform:translateX(18px);transition:transform .16s ease}
.continueBtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 15px;font-size:13px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 5px 16px rgba(47,42,37,.05)}
.continueBtn span{font-family:var(--en);font-size:17px}
.ratingConfirm{background:#faf9f7;border:1px solid #eeeae6;border-radius:16px;padding:11px 12px;margin-top:2px}
.settingTitle{font-weight:600;margin-bottom:10px}
.keyInput{width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:#faf9f7;outline:none;font-family:var(--en)}
.keyInput:focus{border-color:#bdb5ac;background:#fff}
.dictionarySheet{padding-top:18px}
.dictHero{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:4px}
.dictSection{padding:17px 0;border-top:1px solid var(--line)}
.dictSection h3{font-size:14px;margin:0 0 10px;font-weight:600;letter-spacing:.01em}
.dictList{margin:0;padding-left:22px;display:grid;gap:9px}
.dictList li{font-family:var(--en);font-size:15px;line-height:1.55;color:#4b4845}
.phraseGrid{display:flex;flex-wrap:wrap;gap:8px}
.phraseGrid span{font-family:var(--en);border:1px solid var(--line);background:#faf9f7;border-radius:999px;padding:8px 11px;font-size:13px}
.dictExamples{display:grid;gap:9px}
.dictExamples>div{font-family:var(--en);font-size:14px;line-height:1.55;padding:10px 12px;background:#faf9f7;border-radius:12px}
.mwSource{display:flex;align-items:center;gap:12px;padding:13px 0 16px;border-top:1px solid var(--line)}
.mwSource img{width:50px;height:50px;border-radius:50%;object-fit:contain}
.mwSource b{font-family:var(--en);font-size:14px}
.dictConnect{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#faf9f7;margin:15px 0}
.dictConnect>div{min-width:0}
.dictLinks{display:flex;flex-wrap:wrap;gap:8px}
.dictBottom{padding-top:4px}
.dictLoading{color:var(--muted);font-size:13px}


/* v0.8 multi-sense dictionary */
.senseBlock{margin:2px 0 16px}
.senseTitle{font-size:12px;color:#9a938c;letter-spacing:.08em;margin-bottom:8px}
.senseRows{display:grid;gap:0;border-top:1px solid var(--line)}
.senseRow{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.sensePos{font-family:var(--en);font-size:12px;color:#9b958f;padding-top:2px}
.senseZh{font-size:16px;line-height:1.45;color:#282522;font-weight:600}
.senseEn{font-family:var(--en);font-size:13px;line-height:1.45;color:#807a75;margin-top:3px}
.senseBlock.extended .senseZh{font-weight:500}


/* v1.0 learning system */
.clickWord{font:inherit;color:inherit;border:0;background:transparent;padding:0;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#b3aaa1;text-underline-offset:3px}
.clickWord:active{background:#eee5d7;border-radius:4px}
.phraseChip{font-family:var(--en);border:1px solid var(--line);background:#faf9f7;border-radius:999px;padding:8px 11px;font-size:13px}
.annotationQuote{padding:14px;border-left:5px solid var(--beige);background:#fbfaf8;border-radius:12px;font-size:15px;line-height:1.65}
.colorRow{display:flex;gap:11px;padding:16px 2px}
.colorDot{width:31px;height:31px;border-radius:50%;border:1px solid #ddd5ce;background:var(--dot);box-shadow:inset 0 0 0 4px #fff}
.colorDot.selected{outline:2px solid #5a5550;outline-offset:2px}
.noteArea{width:100%;min-height:130px;border:1px solid var(--line);background:#faf9f7;border-radius:16px;padding:13px;font-size:14px;line-height:1.65;resize:vertical}
.learnSeg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#f1efec;border-radius:16px;padding:4px;margin-bottom:18px}
.learnSeg button{border:0;background:transparent;padding:9px 3px;border-radius:12px;color:#8f8983;font-size:12px}
.learnSeg button.active{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(40,35,30,.06)}
.articleHero h2,.readingCard h2{font-family:var(--en);font-size:28px;line-height:1.12;margin:8px 0 8px}
.articleHero p{color:var(--muted);line-height:1.6}
.articleMeta{font-family:var(--en);color:var(--muted);font-size:12px}
.articleHistoryRow{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 0;display:flex;justify-content:space-between;text-align:left;gap:12px}
.articleHistoryRow:last-child{border-bottom:0}.articleHistoryRow b{font-family:var(--en);font-size:16px}.articleHistoryRow div div{font-size:11px;color:var(--muted);margin-top:5px}
.backLink{border:0;background:transparent;color:var(--muted);padding:4px 0 12px;font-size:12px}
.articleBody{font-family:var(--en);font-size:17px;line-height:1.82;margin-top:20px;color:#35312e}
.articleBody p{margin:0 0 18px}
.articleSentence{background:var(--hl);border-radius:4px;padding:1px 0;transition:background .15s}
.articleSentence:active{outline:1px solid #ddd4ca}
.articleWord{font-family:inherit;font-size:inherit;color:inherit;border:0;background:rgba(218,206,188,.42);border-radius:5px;padding:0 2px;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.wordChipGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wordStudyChip{border:1px solid var(--line);background:#faf9f7;border-radius:14px;padding:11px;text-align:left}
.wordStudyChip b{display:block;font-family:var(--en);font-size:16px}.wordStudyChip span{font-size:11px;color:var(--muted);display:block;margin-top:4px}
.focusItem{padding:13px 0;border-bottom:1px solid var(--line)}.focusItem:last-child{border-bottom:0}.focusItem b{font-family:var(--en)}.focusItem p{margin:6px 0 0;color:#625d58;line-height:1.65;font-size:13px}
.grammarList{display:grid;gap:10px}.grammarCard{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:1px solid var(--line)}
.grammarCard h3{margin:5px 0 5px;font-size:17px}.grammarCard p{margin:0;color:var(--muted);font-size:12px}.grammarCard>span{font-family:var(--en);font-size:14px;color:#8e887f}
.grammarLessonHead h2{margin:5px 0}.grammarLessonHead p{margin:0;color:var(--muted)}
.lessonBlock{padding:13px 0;border-bottom:1px solid var(--line)}.lessonBlock:last-child{border-bottom:0}.lessonBlock h3{font-size:14px;margin:0 0 7px}.lessonBlock p{margin:0;line-height:1.7;color:#4c4844}
.annotatable{border-radius:6px}.annotatable:active{background:#eee5d7}
.workedExample{padding:14px 0;border-bottom:1px solid var(--line)}.workedExample:last-child{border-bottom:0}.workedExample b{display:block;margin-top:10px;font-size:13px}.workedExample p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.quizCard{min-height:430px}.quizProgress{font-family:var(--en);color:var(--muted);font-size:12px}.quizCard h2{font-size:19px;line-height:1.5;margin:18px 0}
.quizOptions{display:grid;gap:9px}.quizOptions button{border:1px solid var(--line);background:#faf9f7;border-radius:14px;padding:13px;text-align:left;font-size:14px}
.quizOptions button.correct{background:#e2e9df;border-color:#b8c5b3}.quizOptions button.wrong{background:#eadde1;border-color:#d4b8c1}
.quizExplain{margin-top:16px;border-top:1px solid var(--line);padding-top:15px}.quizExplain p{color:var(--muted);line-height:1.6}
.noteEntry{position:relative;padding:14px 10px 14px 15px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--notehl) 0 6px,transparent 6px)}
.noteEntry:last-child{border-bottom:0}.noteSource{font-size:11px;color:var(--muted);margin-bottom:6px}.noteText{font-family:var(--en);font-size:15px;line-height:1.5}.noteBody{margin-top:8px;color:#57524d;font-size:13px;line-height:1.6}.noteEdit{margin-top:8px;border:0;background:transparent;padding:0;color:#9a928a;text-decoration:underline}
@media(max-width:390px){.learnSeg button{font-size:11px}.articleBody{font-size:16px}.wordChipGrid{grid-template-columns:1fr}}


/* v1.0.1 real PDF exporter */
.pdfReadyCard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:18px;padding:15px;background:#faf9f7}
.pdfIcon{font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.08em;width:54px;height:66px;border-radius:10px;background:#d9cbb6;display:grid;place-items:center;color:#36312d}
.pdfReadyCard b{font-family:var(--en);font-size:15px}
.pdfReadyActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.pdfOpenLink{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
button:disabled{opacity:.55}