:root{--bg:#f4f1e8;--ink:#111;--muted:#675f55;--line:#ded7c7;--red:#d7352a;--blue:#1e5bd8;--green:#14843b;--yellow:#fff169;--pink:#ffd6e7;--purple:#e8dcff;--orange:#ffd9a6;--soft:0 10px 26px rgba(0,0,0,.08)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#111;font-family:SimSun,"宋体","Songti SC",serif;color:var(--ink)}
button,input,textarea,select{font-family:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.app{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#111;padding:18px}
.phone{width:min(430px,100%);height:min(860px,calc(100vh - 28px));background:var(--bg);border-radius:40px;overflow:hidden;position:relative;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.screen{height:100%;overflow:auto;padding-bottom:90px}
.header{position:sticky;top:0;z-index:8;background:rgba(244,241,232,.95);backdrop-filter:blur(10px);padding:22px 20px 14px;display:flex;justify-content:space-between;gap:12px}
.header h1{margin:0;font-size:25px;line-height:1.05;font-weight:900;letter-spacing:-.06em}
.header p{margin:7px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.page{display:none;padding:0 18px 24px}.page.active{display:block}
.card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:16px;margin:12px 0;box-shadow:var(--soft);transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.card:active{transform:scale(.994)}
.card h3{margin:0 0 10px;font-size:18px;font-weight:900;letter-spacing:-.04em}.muted{color:var(--muted);font-size:12px;line-height:1.7}
.modebar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.modebar button{border:1px solid var(--line);background:#fff;border-radius:22px;padding:13px;font-size:13px;font-weight:900;transition:all .18s ease}.modebar button.active{background:#111;color:#fff;border-color:#111;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.goal{background:#111;color:#fff;border-radius:30px;padding:20px;margin:0 0 14px}.goal small{color:rgba(255,255,255,.65);font-weight:900}.goal h2{margin:10px 0 8px;font-size:27px;line-height:1.14;letter-spacing:-.055em}.goal p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.75)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.tile{border:1px solid var(--line);background:#fff;border-radius:24px;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:900;box-shadow:var(--soft);transition:transform .16s ease, background .16s ease}.tile:active{transform:translateY(2px) scale(.98);background:#f5efe1}.tile b{font-size:21px}
.btn,.dark,.plain{border-radius:16px;padding:10px 12px;border:1px solid var(--line);background:#fff;font-weight:900;transition:transform .14s ease, box-shadow .14s ease, background .14s ease}.btn:active,.dark:active,.plain:active{transform:translateY(2px) scale(.98)}.dark{background:#111;color:#fff;border-color:#111}.btnline{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.row{width:100%;border:0;border-top:1px solid #efe8d9;background:transparent;padding:13px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;transition:padding-left .16s ease, background .16s ease}.row:active{padding-left:6px;background:#faf6ec}.row strong{font-size:15px}.row small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.arrow{font-size:24px}
.filters{display:flex;gap:8px;overflow:auto;margin:0 0 12px}.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;white-space:nowrap;font-size:12px;font-weight:900;transition:all .15s ease}.filters button.active{background:#111;color:#fff;border-color:#111;transform:translateY(-1px)}
.search{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px;margin:0 0 10px}.search input{border:0;outline:0;background:transparent;flex:1;font-size:14px}
.pill{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:5px 9px;margin:4px 4px 0 0;font-size:11px;color:#555;background:#fff}

/* timeline refined: selected period expands, dot grows, card becomes visually active */
.timeline{border-left:2px solid rgba(0,0,0,.22);padding-left:24px;margin-left:8px}
.tl{position:relative;transform-origin:left top;transition:transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease}
.tl:before{content:"";position:absolute;left:-34px;top:18px;width:18px;height:18px;border-radius:50%;background:#111;border:4px solid var(--bg);transition:all .22s ease}
.tlTerms{display:none;margin-top:10px;border-top:1px solid #efe8d9}
.tl.open{transform:scale(1.018);background:#111;color:#fff;border-color:#111;box-shadow:0 18px 42px rgba(0,0,0,.24)}
.tl.open .muted{color:rgba(255,255,255,.66)}
.tl.open:before{left:-41px;top:16px;width:30px;height:30px;background:radial-gradient(circle,#fff 0,#ffd95b 35%,#111 68%);box-shadow:0 0 0 8px rgba(0,0,0,.08),0 0 28px rgba(255,217,91,.7)}
.tl.open .tlTerms{display:block;animation:subtleReveal .18s ease both}
.tl.open .row{color:#fff;border-top-color:rgba(255,255,255,.16)}
.tl.open .row small,.tl.open .arrow{color:rgba(255,255,255,.65)}

.month{max-height:360px;overflow:auto}.dayCard{border-top:1px solid #efe8d9;padding:12px 0;transition:background .18s ease}.dayCard.done strong{color:var(--green)}.progressbar{height:10px;border-radius:999px;background:#e7decb;overflow:hidden}.progressbar span{display:block;height:100%;background:#111;border-radius:999px;transition:width .35s ease}
.world{background:#050505;border-radius:28px;padding:16px;color:#fff;position:relative;overflow:hidden}.world:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 25%),radial-gradient(circle at 80% 60%,rgba(50,120,255,.18),transparent 32%);pointer-events:none}.world>*{position:relative}.worldTop{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.worldGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.worldNode{min-height:72px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:#151515;color:rgba(255,255,255,.42);font-weight:900;padding:10px;text-align:left;transition:transform .2s ease, box-shadow .3s ease, color .3s ease}.worldNode:active{transform:scale(.96)}.worldNode.lit{background:radial-gradient(circle at 25% 20%,#fff 0,#ffd24a 9%,#225dff 45%,#121212 82%);color:#fff;box-shadow:0 0 24px rgba(255,210,74,.35)}.worldNode.newLight{animation:lightBurst .75s ease both}
.imageBox{height:150px;border-radius:24px;background:linear-gradient(135deg,#111,#555,#e8dec9);position:relative;overflow:hidden;margin:12px 0}.imageBox:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px);background-size:24px 24px}.imageBox b{position:absolute;left:16px;bottom:16px;color:#fff;font-size:20px}
.reviewBox{border-top:1px solid #efe8d9;padding:12px 0}.reviewStage{display:flex;gap:5px;margin:8px 0}.reviewStage span{height:8px;flex:1;border-radius:999px;background:#e8e0d0}.reviewStage span.on{background:#111}
.choiceOpt{width:100%;border:1px solid var(--line);border-radius:18px;background:#f8f4ea;padding:13px;margin:8px 0;text-align:left;line-height:1.6;transition:transform .14s ease, background .16s ease}.choiceOpt:active{transform:scale(.99)}.choiceOpt.correct{background:#dff5df;border-color:#7fc77f}.choiceOpt.wrong{background:#ffe0e0;border-color:#e88}
.detail{display:none;position:absolute;inset:0;background:var(--bg);z-index:30;overflow:auto;padding-bottom:40px}.detail.active{display:block}.topbar{position:sticky;top:0;background:rgba(244,241,232,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 18px;display:flex;gap:8px;justify-content:space-between;z-index:3}.topbar button{border-radius:16px;padding:10px 12px;border:1px solid var(--line);background:#fff;font-weight:900}
.detail-body{padding:18px}.detail-body h2{font-size:29px;margin:8px 0;line-height:1.12;letter-spacing:-.055em}.meta{font-size:12px;color:var(--muted);font-weight:900}
.tool{position:sticky;top:58px;z-index:2;background:#fff;border:1px solid var(--line);border-radius:20px;padding:9px;display:flex;gap:7px;overflow:auto;margin:12px 0}.tool button{white-space:nowrap;border-radius:14px;padding:8px 10px;border:1px solid var(--line);background:#fff;font-weight:900;font-size:12px}.tool button.active{outline:2px solid #111}.color-dot{width:18px;height:18px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;border:1px solid #aaa}
.article{background:#fff;border:1px solid var(--line);border-radius:26px;padding:18px;margin:12px 0;font-size:15px;line-height:2.05;white-space:pre-wrap}
.article mark{padding:1px 2px}.hl-yellow{background:#fff06a}.hl-pink{background:#ffd6e7}.hl-green{background:#c9f7d4}.hl-blue{background:#d7e8ff}.hl-purple{background:#e8dcff}.ul-red{text-decoration:underline;text-decoration-color:#d7352a;text-decoration-thickness:2px;text-underline-offset:4px}.ul-blue{text-decoration:underline;text-decoration-color:#1e5bd8;text-decoration-thickness:2px;text-underline-offset:4px}
.note{width:100%;min-height:92px;border:1px solid var(--line);border-radius:20px;padding:12px;font-size:14px;line-height:1.7;background:#fff8e7;outline:none}
.badgeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.badge{border:1px solid var(--line);border-radius:24px;padding:14px;min-height:118px;background:#f7f1e5;position:relative;overflow:hidden;transition:transform .18s ease}.badge:active{transform:scale(.98)}.badge.unlocked{background:linear-gradient(135deg,#111,#3b3328);color:#fff;box-shadow:0 14px 26px rgba(0,0,0,.18)}.badge.unlocked:after{content:"";position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,210,74,.28)}.badge .glyph{font-size:26px;font-weight:900}.badge h4{margin:8px 0 4px;font-size:15px}.badge p{font-size:11px;line-height:1.5;margin:0;color:inherit;opacity:.72}.badge.locked{filter:grayscale(1);opacity:.55}
.toast{position:absolute;left:22px;right:22px;bottom:92px;background:#111;color:#fff;border-radius:22px;padding:14px 16px;z-index:80;box-shadow:0 18px 40px rgba(0,0,0,.28);display:none;font-weight:900}.toast.show{display:block;animation:toastIn 1.4s ease both}
.tabbar{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:9px 10px 12px;z-index:20}.tab{border:0;background:transparent;border-radius:17px;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:900;color:#666;transition:all .18s ease}.tab.active{background:#111;color:#fff;transform:translateY(-2px);font-size:12px}.tab.active b{font-size:24px}.tab:active{transform:scale(.95)}.tab b{font-size:18px;transition:font-size .18s ease, transform .18s ease}
.empty{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;color:var(--muted);line-height:1.8}
@keyframes subtleReveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes lightBurst{0%{transform:scale(.92);filter:brightness(.7)}55%{transform:scale(1.06);filter:brightness(1.45)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes toastIn{0%{opacity:0;transform:translateY(16px) scale(.98)}18%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(8px) scale(.98)}}
@media(max-width:520px){.app{padding:0;background:var(--bg)}.phone{width:100%;height:100vh;border-radius:0}.detail{inset:0}}


/* V0.9 feedback layer */
.toast{font-size:15px;text-align:left}
.toast strong{display:block;font-size:16px;margin-bottom:4px}
.toast small{display:block;opacity:.72;font-size:11px;line-height:1.5}
.toast.badgeToast{background:linear-gradient(135deg,#111,#3c2e13);border:1px solid rgba(255,210,74,.45)}
.toast.successToast{background:linear-gradient(135deg,#111,#12411f)}
.toast.warningToast{background:linear-gradient(135deg,#111,#4b1d1d)}
.badge .tier{position:absolute;right:10px;top:10px;font-size:10px;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:3px 7px;background:rgba(255,255,255,.58)}
.badge.unlocked .tier{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.12)}
.badgeGroupTitle{font-size:13px;font-weight:900;margin:16px 0 8px;color:var(--muted)}
.feedbackStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.feedbackStats div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;text-align:center}
.feedbackStats b{display:block;font-size:18px}
.feedbackStats small{font-size:10px;color:var(--muted)}
.soundHint{font-size:11px;color:var(--muted);line-height:1.6;margin-top:8px}


/* V1.0 editable content */
.editBox{
  width:100%;
  min-height:260px;
  border:1px solid var(--line);
  border-radius:24px;
  padding:14px;
  font-size:15px;
  line-height:1.9;
  background:#fffdf6;
  outline:none;
  resize:vertical;
}
.editBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid var(--line);
  background:#fff7d6;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  color:#5f4a00;
  margin-top:8px;
}
.originalHint{
  background:#f8f4ea;
  border:1px dashed #d7caaa;
  border-radius:20px;
  padding:12px;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin:10px 0;
}


/* V1.1 final polish */
.guideOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.48);
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.guideOverlay.show{display:flex}
.guideCard{
  width:100%;
  max-width:360px;
  background:var(--bg);
  border-radius:30px;
  padding:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.guideCard h2{margin:0 0 10px;font-size:24px;letter-spacing:-.04em}
.guideStep{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px;
  margin:8px 0;
}
.guideStep b{display:block;font-size:14px;margin-bottom:4px}
.guideStep p{margin:0;font-size:12px;line-height:1.65;color:var(--muted)}
.dataBox{
  width:100%;
  min-height:140px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px;
  font-size:12px;
  line-height:1.6;
  background:#fffdf6;
  outline:none;
}
.article.hideBuilt mark.hl-yellow{
  background:transparent;
  border-bottom:1px dashed rgba(0,0,0,.35);
}
.article.hideBuilt mark.hl-yellow::after{
  content:"";
}
.contentStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:10px 0;
}
.contentStats div{
  background:#111;
  color:#fff;
  border-radius:18px;
  padding:12px 8px;
  text-align:center;
}
.contentStats b{display:block;font-size:19px}
.contentStats small{font-size:10px;color:rgba(255,255,255,.65)}


/* V1.2 quiz and selected-block refinement */
.sectionCard{
  border:1px solid var(--line);
  background:#fff;
  border-radius:26px;
  padding:14px;
  margin:10px 0;
  box-shadow:var(--soft);
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sectionCard:active{transform:scale(.99)}
.sectionCard.activeBlock,
.termCard.activeBlock,
.qCard.activeBlock{
  background:#111;
  color:#fff;
  border-color:#111;
  box-shadow:0 18px 42px rgba(0,0,0,.24);
  transform:scale(1.014);
}
.sectionCard.activeBlock .muted,
.termCard.activeBlock .muted,
.qCard.activeBlock .muted{
  color:rgba(255,255,255,.66);
}
.sectionTitle{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.sectionTitle h3{margin:0;font-size:17px;letter-spacing:-.04em}
.countPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:5px 9px;
  background:#f4efe2;
  color:#111;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.activeBlock .countPill{background:rgba(255,255,255,.16);color:#fff}
.quizModeBar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:10px 0 12px;
}
.quizModeBar button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:10px 8px;
  font-size:12px;
  font-weight:900;
  transition:all .18s ease;
}
.quizModeBar button.active{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-1px);
}
.quizInlineCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px;
  margin:12px 0;
  box-shadow:var(--soft);
}
.quizInlineCard h3{
  font-size:18px;
  line-height:1.45;
  margin:8px 0 12px;
}
.quizNav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.compactList .row strong{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.chapterGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.qCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:13px;
  margin:8px 0;
  transition:all .18s ease;
}
.termCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px;
  margin:12px 0;
  box-shadow:var(--soft);
  transition:all .18s ease;
}


/* V1.3 click feedback fix */
.termCard,
.sectionCard,
.qCard,
.quizInlineCard{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.termCard.activeBlock,
.sectionCard.activeBlock,
.qCard.activeBlock,
.quizInlineCard.activeBlock{
  position:relative;
}
.termCard.activeBlock::after,
.sectionCard.activeBlock::after,
.qCard.activeBlock::after,
.quizInlineCard.activeBlock::after{
  content:"当前查看";
  position:absolute;
  right:14px;
  top:14px;
  font-size:11px;
  border-radius:999px;
  padding:4px 8px;
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.termCard.activeBlock .pill,
.sectionCard.activeBlock .pill,
.qCard.activeBlock .pill,
.quizInlineCard.activeBlock .pill{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}
.termCard.activeBlock .imageBox{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28), 0 0 34px rgba(255,217,91,.22);
}
.tapHint{
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
}
.activeBlock .tapHint{
  color:rgba(255,255,255,.66);
}


/* V1.4 visible tools + wrongbook fix */
.toolBox{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:15px;
  margin:12px 0;
  box-shadow:var(--soft);
}
.toolBox h3{margin:0 0 8px;font-size:18px}
.toolBox p{margin:0 0 10px;font-size:12px;line-height:1.7;color:var(--muted)}
.toolGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fullBtn{width:100%}
.highlightHint{
  background:#fff7d6;
  border:1px solid #e2d2a4;
  border-radius:18px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.65;
  color:#5f4a00;
  margin:8px 0 12px;
}
.wrongKeepBox{
  background:#fff8e7;
  border:1px solid #ead9ac;
  border-radius:20px;
  padding:12px;
  margin:10px 0;
  font-size:13px;
  line-height:1.65;
}


/* V1.5 Word export + custom import */
.selectBox{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
  font-size:14px;
  margin:6px 0 10px;
}
.inputBox{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:11px 12px;
  background:#fff;
  font-size:14px;
  margin:6px 0 10px;
  outline:none;
}
.customTag{
  display:inline-flex;
  border-radius:999px;
  padding:4px 8px;
  background:#111;
  color:#fff;
  font-size:10px;
  margin-left:6px;
  vertical-align:middle;
}
.exportNote{
  background:#f8f4ea;
  border:1px dashed #d7caaa;
  border-radius:18px;
  padding:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-top:10px;
}


/* V1.7 plan table + real highlight hide */
.planTableWrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  margin-top:12px;
}
.planTable{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  font-size:12px;
}
.planTable th{
  background:#111;
  color:#fff;
  padding:10px 8px;
  text-align:left;
  white-space:nowrap;
}
.planTable td{
  border-top:1px solid #eee6d7;
  padding:10px 8px;
  vertical-align:top;
}
.planTable tr.done td{
  background:#f0f8ef;
}
.planTable tr.current td{
  background:#fff7d6;
  box-shadow:inset 4px 0 0 #111;
}
.statusTag{
  display:inline-flex;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-weight:900;
  background:#f3efe4;
  color:#111;
  white-space:nowrap;
}
.statusTag.done{
  background:#dff5df;
  color:#14652d;
}
.statusTag.current{
  background:#111;
  color:#fff;
}
.planTable button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:900;
  margin:2px;
}
.planTable button.darkMini{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* built-in key sentence highlight */
.article mark.builtHL{
  background:#fff06a;
  padding:1px 2px;
  border-radius:3px;
}
.article.hideBuilt mark.builtHL{
  color:transparent !important;
  background:linear-gradient(90deg,#ddd6c7,#eee8d9) !important;
  border-radius:4px;
  user-select:none;
  text-shadow:none !important;
  position:relative;
}
.article.hideBuilt mark.builtHL::after{
  content:"重点已隐藏";
  color:#8a8172;
  font-size:11px;
  letter-spacing:.08em;
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
}
.article.hideBuilt mark.builtHL *{
  color:transparent !important;
}


/* V1.9 editable total plan */
.planEditBox{
  width:100%;
  min-height:90px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:11px 12px;
  background:#fffdf6;
  font-size:14px;
  line-height:1.65;
  outline:none;
  resize:vertical;
  margin:6px 0 10px;
}
.planInput{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
  font-size:14px;
  outline:none;
  margin:6px 0 10px;
}
.planGuide{
  background:#111;
  color:#fff;
  border-radius:26px;
  padding:16px;
  margin:10px 0;
}
.planGuide h3{margin:0 0 8px;font-size:18px}
.planGuide ol{margin:8px 0 0;padding-left:20px}
.planGuide li{font-size:13px;line-height:1.8;color:rgba(255,255,255,.78)}
.planCustomMark{
  display:inline-flex;
  border-radius:999px;
  padding:3px 7px;
  background:#fff7d6;
  color:#5f4a00;
  font-size:10px;
  font-weight:900;
  margin-left:4px;
}
.planTable tr.custom td{
  background:#fffdf1;
}


/* V2.2.1 cleanup */
#monthPlan .btnline{
  margin-bottom:8px;
}


/* V2.2.2 folded plan UI */
.compactPlanCard{
  padding:0;
  overflow:hidden;
}
.foldHeader{
  width:100%;
  border:0;
  background:#fff;
  padding:18px 18px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  font-family:inherit;
  color:var(--ink);
}
.foldHeader b{
  display:block;
  font-size:20px;
  letter-spacing:-.04em;
}
.foldHeader small{
  display:block;
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.foldArrow{
  width:34px;
  height:34px;
  border-radius:999px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex:0 0 auto;
}
.compactPlanCard .progressbar{
  margin:0 18px 12px;
}
.foldHint{
  margin:0 18px 18px;
  border:1px dashed var(--line);
  background:#faf6ec;
  border-radius:18px;
  padding:12px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.foldContent{
  padding:0 18px 18px;
}
.foldContent .planTableWrap{
  margin-top:10px;
}


/* V2.2.3 P mode folded map */
.foldedWorld{
  padding:0;
}
.worldFoldHeader{
  width:100%;
  border:0;
  background:transparent;
  color:#fff;
  padding:18px 18px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  font-family:inherit;
  position:relative;
  z-index:2;
}
.worldFoldHeader b{
  display:block;
  font-size:20px;
  letter-spacing:-.04em;
}
.worldFoldHeader small{
  display:block;
  margin-top:5px;
  font-size:12px;
  color:rgba(255,255,255,.66);
  line-height:1.5;
}
.worldProgress{
  margin:0 18px 12px;
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.18);
}
.worldProgress span{
  background:#fff;
}
.worldFoldHint{
  margin:0 18px 18px;
  border:1px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:12px;
  font-size:12px;
  line-height:1.7;
  color:rgba(255,255,255,.68);
  position:relative;
  z-index:2;
}
.worldContent{
  padding:0 16px 16px;
  position:relative;
  z-index:2;
}


/* V2.2.4 detail toolbar + timeline cleanup */
.topbar{
  justify-content:space-between;
}
.topbar .closeBtn{
  margin-left:auto;
  background:#111;
  color:#fff;
  border-color:#111;
}
.markTool{
  position:relative;
  top:auto;
  z-index:1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:9px;
  display:flex;
  gap:7px;
  overflow:auto;
  margin:10px 0 12px;
}
.markTool button{
  white-space:nowrap;
  border-radius:14px;
  padding:8px 10px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  font-size:12px;
}
.markTool button.active{
  outline:2px solid #111;
}
.textActionBar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:9px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.textActionBar button{
  border-radius:14px;
  padding:8px 10px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  font-size:12px;
}
.argumentHL{
  font-weight:900;
  background:transparent;
  border-bottom:2px solid rgba(0,0,0,.18);
}
.article p{
  margin:0 0 14px;
}
.timelineActions{
  display:flex;
  gap:8px;
  margin:0 0 12px;
}
.timelineActions button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  font-size:12px;
}
.timelineActions .dark{
  background:#111;
  color:#fff;
  border-color:#111;
}
.article.hideBuilt mark.builtHL{
  min-width:72px;
  display:inline-block;
  vertical-align:baseline;
}


/* V2.2.6 hide performance + related terms */
.relatedBox h3{
  margin-bottom:6px;
}
.relatedGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.relatedGrid button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:10px 11px;
  text-align:left;
  font-family:inherit;
  transition:transform .14s ease, background .14s ease;
}
.relatedGrid button:active{
  transform:scale(.98);
  background:#f8f4ea;
}
.relatedGrid b{
  display:block;
  font-size:13px;
  line-height:1.35;
}
.relatedGrid small{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
}
.article mark.builtHL{
  transition:background .12s ease, color .12s ease;
}
.article.hideBuilt mark.builtHL{
  min-width:64px;
  max-width:180px;
  overflow:hidden;
}
@media(max-width:360px){
  .relatedGrid{grid-template-columns:1fr;}
}


/* V2.2.7 term swipe navigation */
.swipeNavBox{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:10px;
  margin:10px 0 12px;
}
.swipeNavBtn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:9px 10px;
  font-weight:900;
  font-size:12px;
  font-family:inherit;
}
.swipeNavBtn:active{
  transform:scale(.98);
}
.swipeNavBtn:disabled{
  opacity:.38;
}
.swipeCenter{
  text-align:center;
  min-width:88px;
}
.swipeCenter b{
  display:block;
  font-size:12px;
}
.swipeCenter small{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}
@media(max-width:380px){
  .swipeNavBox{
    grid-template-columns:1fr;
  }
  .swipeCenter{
    order:-1;
  }
}


/* V2.3 light reading experience */
.quickActionBar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 10px;
}
.quickActionBar button{
  border-radius:16px;
  padding:9px 11px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  font-size:12px;
}
.quickActionBar button.dark{
  background:#111;
  color:#fff;
  border-color:#111;
}
.readingHint{
  background:#faf6ec;
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
  margin:10px 0;
}
.moreToolPanel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:12px;
  margin:10px 0 12px;
}
.moreToolPanel .markTool,
.moreToolPanel .textActionBar{
  margin:8px 0 0;
}
.termCard.activeBlock,
.sectionCard.activeBlock,
.qCard.activeBlock,
.quizInlineCard.activeBlock{
  background:#fff7d6 !important;
  color:#111 !important;
  border-color:#d6bd65 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
  transform:scale(1.006) !important;
}
.termCard.activeBlock .muted,
.sectionCard.activeBlock .muted,
.qCard.activeBlock .muted,
.quizInlineCard.activeBlock .muted{
  color:#6b6252 !important;
}
.termCard.activeBlock::after,
.sectionCard.activeBlock::after,
.qCard.activeBlock::after,
.quizInlineCard.activeBlock::after{
  content:"当前查看";
  position:absolute;
  right:14px;
  top:14px;
  font-size:11px;
  border-radius:999px;
  padding:4px 8px;
  background:#111;
  color:#fff;
  border:0;
}
.tl.open{
  background:#fff7d6 !important;
  color:#111 !important;
  border-color:#d6bd65 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
}
.tl.open .muted{
  color:#6b6252 !important;
}
.tl.open .row{
  color:#111 !important;
  border-top-color:#eadfbf !important;
}
.tl.open .row small,
.tl.open .arrow{
  color:#6b6252 !important;
}
.tl.open:before{
  background:radial-gradient(circle,#fff 0,#ffd95b 40%,#111 74%) !important;
  box-shadow:0 0 0 8px rgba(0,0,0,.05),0 0 18px rgba(255,217,91,.55) !important;
}
.detail-body h2{
  margin-bottom:8px;
}
.article{
  font-size:15.5px;
  line-height:2.08;
}
.article p{
  margin-bottom:16px;
}
.imageBox{
  margin-top:10px;
}


/* V2.4 mobile touch demo */
@media(max-width:720px){
  html,body{
    width:100%;
    min-height:100%;
    overflow:hidden;
    background:var(--bg);
    -webkit-text-size-adjust:100%;
    touch-action:manipulation;
  }
  body.mobile-demo{
    overscroll-behavior:none;
  }
  .app{
    padding:0;
    background:var(--bg);
    align-items:stretch;
    justify-content:stretch;
  }
  .phone{
    width:100vw;
    height:100dvh;
    max-height:none;
    border-radius:0;
    box-shadow:none;
    background:var(--bg);
  }
  .screen{
    height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(102px + env(safe-area-inset-bottom));
    scroll-padding-bottom:130px;
  }
  .header{
    padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
    min-height:74px;
    align-items:flex-start;
  }
  .header h1{
    font-size:22px;
    line-height:1.08;
    letter-spacing:-.045em;
  }
  .header p{
    font-size:12px;
    margin-top:5px;
  }
  .page{
    padding:0 14px 24px;
  }
  .card,.termCard,.sectionCard,.quizInlineCard{
    border-radius:24px;
    padding:15px;
    margin:10px 0;
  }
  .goal{
    border-radius:26px;
    padding:18px 16px;
    margin:2px 0 12px;
  }
  .goal h2{
    font-size:24px;
    line-height:1.18;
  }
  .goal p{
    font-size:13px;
  }
  .modebar{
    gap:10px;
  }
  .modebar button{
    min-height:48px;
    border-radius:20px;
    font-size:14px;
  }
  .btnline{
    gap:9px;
  }
  .btn,.dark,.plain,
  .btnline button,
  .quickActionBar button,
  .textActionBar button,
  .markTool button,
  .toolBox button,
  .planTable button,
  .swipeNavBtn,
  .choiceOpt,
  .filters button,
  .quizModeBar button{
    min-height:44px;
    padding:11px 13px;
    font-size:13px;
    border-radius:16px;
  }
  .filters{
    gap:8px;
    padding:2px 0 8px;
    margin-bottom:8px;
    scroll-snap-type:x proximity;
  }
  .filters button{
    scroll-snap-align:start;
    white-space:nowrap;
  }
  .search{
    border-radius:20px;
    padding:12px 13px;
  }
  .search input{
    font-size:16px;
  }

  /* bottom thumb nav */
  .tabbar{
    grid-template-columns:repeat(5,1fr);
    padding:8px 8px calc(10px + env(safe-area-inset-bottom));
    min-height:78px;
    border-radius:22px 22px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.10);
  }
  .tab{
    min-height:56px;
    border-radius:18px;
    font-size:11px;
    gap:4px;
  }
  .tab b{
    font-size:20px;
  }
  .tab.active{
    font-size:12px;
    transform:none;
  }
  .tab.active b{
    font-size:25px;
  }

  /* detail page mobile */
  .detail{
    height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(26px + env(safe-area-inset-bottom));
  }
  .topbar{
    top:0;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
    gap:10px;
  }
  .topbar button{
    min-height:44px;
    min-width:74px;
    border-radius:16px;
    font-size:14px;
  }
  .detail-body{
    padding:14px 14px 28px;
  }
  .detail-body h2{
    font-size:26px;
    line-height:1.18;
    margin:8px 0 10px;
    letter-spacing:-.045em;
  }
  .meta{
    font-size:12px;
  }
  .quickActionBar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:10px 0 10px;
  }
  .quickActionBar button{
    width:100%;
  }
  .swipeNavBox{
    grid-template-columns:1fr 1fr;
    gap:8px;
    border-radius:20px;
    padding:10px;
    position:sticky;
    top:calc(60px + env(safe-area-inset-top));
    z-index:4;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
  }
  .swipeCenter{
    grid-column:1 / -1;
    order:-1;
  }
  .swipeNavBtn{
    width:100%;
  }
  .article{
    border-radius:24px;
    padding:17px;
    font-size:16px;
    line-height:2.05;
    margin:10px 0;
  }
  .article p{
    margin-bottom:15px;
  }
  .note{
    font-size:16px;
    min-height:120px;
  }
  .imageBox{
    height:138px;
    border-radius:22px;
  }
  .relatedGrid{
    grid-template-columns:1fr;
  }
  .relatedGrid button{
    min-height:54px;
    padding:12px 13px;
  }
  .choiceOpt{
    width:100%;
    margin:9px 0;
    line-height:1.7;
    text-align:left;
  }

  /* make J/P folded cards lighter on phone */
  .foldHeader,.worldFoldHeader{
    min-height:64px;
    padding:16px 16px 10px;
  }
  .foldArrow{
    width:38px;
    height:38px;
    font-size:16px;
  }
  .foldHint,.worldFoldHint{
    margin:0 16px 16px;
    padding:13px;
  }

  /* table horizontal scroll */
  .planTableWrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .planTable{
    min-width:660px;
  }

  /* timeline mobile */
  .timeline{
    margin-left:5px;
    padding-left:20px;
  }
  .tl:before{
    left:-30px;
  }
  .tl.open:before{
    left:-37px;
  }
  .timelineActions{
    position:sticky;
    top:calc(74px + env(safe-area-inset-top));
    z-index:5;
    background:rgba(244,241,232,.96);
    padding:6px 0;
    backdrop-filter:blur(10px);
  }
  .timelineActions button{
    min-height:42px;
    flex:1;
  }

  /* inputs on mobile should not zoom */
  input,textarea,select{
    font-size:16px !important;
  }

  /* reduce accidental text selection while tapping buttons */
  button,.tab,.tile,.worldNode{
    user-select:none;
  }
}

/* thumb-friendly active/tap feedback */
@media(hover:none){
  button:active,
  .termCard:active,
  .card:active,
  .row:active,
  .relatedGrid button:active{
    transform:scale(.985);
  }
}

/* V2.5 visual refresh: archive study system */
:root{
  --bg:#f4efe6;
  --paper:#fffdf8;
  --ink:#1f262d;
  --muted:#6d6459;
  --line:#d9ccba;
  --red:#9a3f31;
  --blue:#2f6674;
  --green:#4d744f;
  --yellow:#f6d77a;
  --pink:#f3c8c0;
  --purple:#d8d0ec;
  --orange:#e8b46c;
  --brand:#9a3f31;
  --brand2:#2f6674;
  --gold:#c59a3a;
  --paperEdge:#e9decc;
  --soft:0 12px 28px rgba(40,32,22,.1);
}

html,body{
  background:#182225;
  font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",SimSun,serif;
  color:var(--ink);
  letter-spacing:0;
}

button,input,textarea,select{
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:0;
}

.app{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px),
    linear-gradient(135deg,#172226 0%,#2a2520 52%,#3a231d 100%);
  padding:18px;
}

.phone{
  background:
    linear-gradient(180deg,rgba(255,253,248,.78),rgba(244,239,230,.96)),
    repeating-linear-gradient(0deg,rgba(126,95,57,.055) 0 1px,transparent 1px 28px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:32px;
  box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 0 8px rgba(255,255,255,.04);
}

.screen{
  scrollbar-width:none;
  padding-bottom:96px;
}

.screen::-webkit-scrollbar,
.filters::-webkit-scrollbar,
.markTool::-webkit-scrollbar{
  display:none;
}

.page{
  padding:0 16px 26px;
}

.header{
  padding:24px 18px 14px;
  background:linear-gradient(180deg,rgba(250,246,237,.97),rgba(250,246,237,.9));
  border-bottom:1px solid rgba(160,139,112,.18);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  color:var(--brand);
  font:800 10px/1 "Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:.12em;
}

.eyebrow:before{
  content:"";
  width:18px;
  height:6px;
  background:linear-gradient(90deg,var(--brand) 0 45%,var(--gold) 45% 72%,var(--brand2) 72%);
  border-radius:1px;
}

.header h1,
.detail-body h2,
.goal h2,
.foldHeader b,
.worldFoldHeader b{
  letter-spacing:0;
}

.header h1{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
}

.header p{
  max-width:29em;
  color:#766c60;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.modebar{
  gap:10px;
  margin:2px 0 14px;
}

.modebar button,
.quizModeBar button,
.filters button,
.timelineActions button,
.planTable button,
.markTool button,
.textActionBar button,
.quickActionBar button,
.btn,.dark,.plain,
.topbar button,
.swipeNavBtn{
  min-height:42px;
  border-radius:8px;
  border-color:var(--line);
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  font-weight:800;
}

.dark,
.modebar button.active,
.quizModeBar button.active,
.filters button.active,
.timelineActions .dark,
.topbar .closeBtn,
.planTable button.darkMini,
.quickActionBar button.dark{
  background:linear-gradient(135deg,#24333a,var(--brand));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px rgba(105,54,43,.22);
}

.plain,
.btn,
.modebar button,
.quizModeBar button,
.filters button,
.timelineActions button,
.quickActionBar button{
  background:rgba(255,253,248,.86);
}

.goal{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  padding:22px 18px;
  background:
    linear-gradient(135deg,rgba(31,38,45,.96),rgba(40,80,88,.94) 58%,rgba(154,63,49,.9)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 22px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 36px rgba(41,31,24,.18);
}

.goal:after{
  content:"HISTORY";
  position:absolute;
  right:-9px;
  bottom:-3px;
  color:rgba(255,255,255,.08);
  font:900 44px/1 Georgia,serif;
  letter-spacing:.08em;
  pointer-events:none;
}

.goal>*{
  position:relative;
  z-index:1;
}

.goal small{
  color:#f1d089;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:.08em;
}

.goal h2{
  margin:10px 0 9px;
  font-size:26px;
  line-height:1.22;
}

.goal p{
  color:rgba(255,255,255,.78);
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.card,
.termCard,
.sectionCard,
.qCard,
.quizInlineCard,
.toolBox,
.empty,
.article,
.note,
.guideCard,
.guideStep,
.originalHint,
.wrongKeepBox,
.exportNote,
.swipeNavBox,
.readingHint,
.highlightHint,
.planTableWrap,
.selectBox,
.inputBox,
.editBox,
.dataBox,
.planEditBox,
.planInput{
  border-radius:8px;
  background:var(--paper);
  border-color:var(--paperEdge);
  box-shadow:var(--soft);
}

.card h3,
.toolBox h3,
.sectionTitle h3,
.quizInlineCard h3,
.termCard h3{
  letter-spacing:0;
  line-height:1.35;
}

.card h3:before,
.toolBox h3:before{
  content:"";
  display:inline-block;
  width:7px;
  height:16px;
  margin-right:8px;
  vertical-align:-2px;
  background:linear-gradient(180deg,var(--brand),var(--gold));
  border-radius:1px;
}

.grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:14px 0;
}

.tile{
  min-height:82px;
  border-radius:8px;
  background:linear-gradient(180deg,#fffdf8,#f6efe2);
  border-color:var(--paperEdge);
  color:#29323a;
}

.tile b{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:7px;
  background:#26343b;
  color:#f7d984;
  font-size:17px;
}

.contentStats div,
.feedbackStats div{
  background:linear-gradient(180deg,#24333a,#1f262d);
  color:#fff;
  border:0;
  border-radius:8px;
  box-shadow:none;
}

.contentStats small,
.feedbackStats small{
  color:rgba(255,255,255,.68);
}

.progressbar{
  height:9px;
  background:#e6dac8;
  border-radius:999px;
}

.progressbar span{
  background:linear-gradient(90deg,var(--brand),var(--gold),var(--brand2));
}

.search{
  border-radius:8px;
  background:rgba(255,253,248,.92);
  box-shadow:var(--soft);
}

.search span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:7px;
  background:#24333a;
  color:#f7d984;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.filters{
  padding-bottom:3px;
}

.pill,
.statusTag,
.customTag,
.editBadge,
.countPill{
  border-radius:6px;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.row{
  border-top-color:#eee3d2;
  padding:14px 0;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.row strong{
  font-size:15px;
  line-height:1.45;
}

.arrow{
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  border-radius:7px;
  color:var(--brand);
  background:#f6efe2;
  font-size:20px;
}

.termCard p,
.qCard p,
.sectionCard p,
.card p,
.toolBox p{
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  line-height:1.72;
}

.imageBox{
  height:146px;
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(31,38,45,.88),rgba(47,102,116,.78)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 24px);
  border:1px solid rgba(255,255,255,.24);
}

.imageBox:before{
  background:
    linear-gradient(90deg,rgba(246,215,122,.86) 0 18%,transparent 18% 100%),
    linear-gradient(135deg,transparent 0 45%,rgba(154,63,49,.78) 45% 63%,transparent 63%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 1px,transparent 1px 22px);
  background-size:100% 100%;
}

.imageBox b{
  left:14px;
  bottom:14px;
  padding:7px 9px;
  border-radius:6px;
  background:rgba(31,38,45,.72);
  color:#fff7de;
  font-size:18px;
  letter-spacing:0;
}

.timeline{
  border-left-color:rgba(47,102,116,.38);
}

.tl:before{
  background:var(--paper);
  border-color:var(--brand2);
  box-shadow:0 0 0 4px rgba(47,102,116,.12);
}

.tl.open,
.sectionCard.activeBlock,
.termCard.activeBlock,
.qCard.activeBlock,
.quizInlineCard.activeBlock{
  background:linear-gradient(135deg,#24333a,#1f262d 62%,#6d332c);
  border-color:rgba(255,255,255,.18);
  color:#fff;
  transform:translateY(-1px);
}

.tl.open:before{
  background:linear-gradient(135deg,#f6d77a,#9a3f31);
  box-shadow:0 0 0 8px rgba(154,63,49,.1),0 0 24px rgba(197,154,58,.42);
}

.termCard.activeBlock::after,
.sectionCard.activeBlock::after,
.qCard.activeBlock::after,
.quizInlineCard.activeBlock::after{
  content:"正在复习";
  border-radius:6px;
  background:rgba(246,215,122,.16);
  color:#ffe8a5;
  border-color:rgba(246,215,122,.28);
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.world{
  border-radius:10px;
  background:
    linear-gradient(135deg,#1f262d,#273a42 58%,#4b2a24),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 26px);
}

.world:before{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px);
}

.worldNode{
  border-radius:8px;
  background:rgba(255,255,255,.08);
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.worldNode.lit{
  background:linear-gradient(135deg,var(--gold),var(--brand) 52%,var(--brand2));
  box-shadow:0 12px 24px rgba(0,0,0,.2);
}

.foldHeader,
.worldFoldHeader{
  border-radius:8px 8px 0 0;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.foldArrow{
  border-radius:8px;
  background:linear-gradient(135deg,var(--brand2),#24333a);
}

.foldHint,
.worldFoldHint,
.readingHint,
.highlightHint,
.originalHint,
.exportNote,
.wrongKeepBox{
  background:#fbf4e7;
  border-style:solid;
  box-shadow:none;
}

.article{
  font-size:16px;
  line-height:2;
  background:#fffefa;
}

.article mark.builtHL,
.hl-yellow{
  background:linear-gradient(180deg,transparent 42%,rgba(246,215,122,.72) 42%);
}

.choiceOpt{
  border-radius:8px;
  background:#fbf4e7;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.choiceOpt.correct{
  background:#e2f1e4;
  border-color:#86b48b;
}

.choiceOpt.wrong{
  background:#f8ded9;
  border-color:#d9958b;
}

.planTable th{
  background:#24333a;
}

.planTable td{
  background:rgba(255,253,248,.9);
}

.planTable tr.current td{
  background:#fff6dc;
  box-shadow:inset 4px 0 0 var(--brand);
}

.planTable tr.done td{
  background:#edf5ea;
}

.badge{
  border-radius:8px;
  background:#fbf4e7;
}

.badge.unlocked{
  background:linear-gradient(135deg,#24333a,#71342c);
}

.tabbar{
  left:10px;
  right:10px;
  bottom:10px;
  border:1px solid rgba(217,204,186,.86);
  border-radius:12px;
  background:rgba(255,253,248,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 28px rgba(32,24,17,.16);
  padding:8px;
}

.tab{
  min-height:50px;
  border-radius:8px;
  color:#766c60;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  font-size:10px;
}

.tab b{
  display:grid;
  place-items:center;
  width:24px;
  height:22px;
  border-radius:6px;
  font-size:16px;
  color:#2f6674;
}

.tab.active{
  background:linear-gradient(135deg,#24333a,var(--brand));
  color:#fff;
  font-size:11px;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(105,54,43,.22);
}

.tab.active b{
  width:26px;
  height:24px;
  background:rgba(255,255,255,.14);
  color:#f7d984;
  font-size:16px;
}

.toast{
  border-radius:8px;
  background:#24333a;
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.detail{
  background:
    linear-gradient(180deg,rgba(255,253,248,.78),rgba(244,239,230,.96)),
    repeating-linear-gradient(0deg,rgba(126,95,57,.055) 0 1px,transparent 1px 28px);
}

.topbar{
  background:rgba(250,246,237,.96);
}

.detail-body h2{
  font-size:28px;
}

.meta,
.muted,
.tapHint,
.soundHint,
.relatedGrid small,
.swipeCenter small{
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

@media(max-width:520px){
  .app{
    background:var(--bg);
    padding:0;
  }
  .phone{
    border-radius:0;
    border:0;
    box-shadow:none;
  }
  .header{
    padding-top:calc(18px + env(safe-area-inset-top));
  }
  .tabbar{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .screen{
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }
  .timelineActions{
    background:rgba(250,246,237,.96);
  }
}

@media(max-width:360px){
  .grid{
    gap:7px;
  }
  .tile{
    min-height:76px;
    font-size:11px;
  }
  .header h1{
    font-size:22px;
  }
}

/* V2.6 modern glass visual direction */
:root{
  --bg:#eef2f3;
  --paper:rgba(255,255,255,.64);
  --ink:#182026;
  --muted:#65717a;
  --line:rgba(255,255,255,.52);
  --red:#ff6b5f;
  --blue:#35a7b4;
  --green:#65b66f;
  --yellow:#f4cf58;
  --pink:#f6b6c8;
  --purple:#bbb0ff;
  --orange:#f2a75b;
  --brand:#35a7b4;
  --brand2:#ff7a61;
  --gold:#f4cf58;
  --paperEdge:rgba(255,255,255,.56);
  --soft:0 14px 36px rgba(28,42,48,.12);
}

html,body{
  background:#dfe8e9;
  font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

button,input,textarea,select{
  font-family:"Inter","SF Pro Text","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

.app{
  background:
    radial-gradient(circle at 12% 8%,rgba(53,167,180,.28),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(255,122,97,.22),transparent 28%),
    radial-gradient(circle at 48% 95%,rgba(244,207,88,.2),transparent 32%),
    linear-gradient(135deg,#edf4f3 0%,#f8f1ec 52%,#eaf0f4 100%);
}

.phone{
  background:rgba(250,252,252,.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:34px;
  box-shadow:0 28px 90px rgba(26,45,52,.24),inset 0 1px 0 rgba(255,255,255,.68);
  backdrop-filter:blur(26px) saturate(1.25);
}

.screen,
.detail{
  background:
    radial-gradient(circle at 16% 0%,rgba(53,167,180,.16),transparent 32%),
    radial-gradient(circle at 100% 34%,rgba(255,122,97,.12),transparent 30%),
    linear-gradient(180deg,rgba(248,252,252,.56),rgba(239,244,244,.82));
}

.header{
  background:rgba(255,255,255,.48);
  border-bottom:1px solid rgba(255,255,255,.54);
  backdrop-filter:blur(24px) saturate(1.35);
}

.eyebrow{
  color:#2a8791;
  font-weight:900;
  letter-spacing:.14em;
}

.eyebrow:before{
  width:22px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#35a7b4,#f4cf58,#ff7a61);
}

.header h1,
.goal h2,
.detail-body h2{
  font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-weight:900;
}

.header h1{
  color:#152027;
}

.header p{
  color:#66727b;
}

.goal{
  background:
    linear-gradient(135deg,rgba(23,35,42,.86),rgba(37,145,156,.68) 58%,rgba(255,122,97,.72)),
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.34),transparent 28%);
  border:1px solid rgba(255,255,255,.32);
  border-radius:8px;
  box-shadow:0 18px 44px rgba(26,45,52,.18);
  backdrop-filter:blur(18px) saturate(1.25);
}

.goal:after{
  content:"";
  right:18px;
  bottom:18px;
  width:80px;
  height:80px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 58%);
}

.goal small{
  color:rgba(255,255,255,.7);
  letter-spacing:.12em;
}

.goal p{
  color:rgba(255,255,255,.76);
}

.card,
.termCard,
.sectionCard,
.qCard,
.quizInlineCard,
.toolBox,
.empty,
.article,
.note,
.guideCard,
.guideStep,
.originalHint,
.wrongKeepBox,
.exportNote,
.swipeNavBox,
.readingHint,
.highlightHint,
.planTableWrap,
.selectBox,
.inputBox,
.editBox,
.dataBox,
.planEditBox,
.planInput,
.search,
.foldHeader,
.foldHint,
.worldFoldHint,
.moreToolPanel{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 12px 34px rgba(31,48,54,.1),inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(1.28);
}

.card h3:before,
.toolBox h3:before{
  width:18px;
  height:4px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:3px;
  background:linear-gradient(90deg,#35a7b4,#ff7a61);
}

.modebar button,
.quizModeBar button,
.filters button,
.timelineActions button,
.planTable button,
.markTool button,
.textActionBar button,
.quickActionBar button,
.btn,.dark,.plain,
.topbar button,
.swipeNavBtn{
  border-radius:8px;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
  color:#1d2a31;
}

.dark,
.modebar button.active,
.quizModeBar button.active,
.filters button.active,
.timelineActions .dark,
.topbar .closeBtn,
.planTable button.darkMini,
.quickActionBar button.dark{
  background:linear-gradient(135deg,#18262d,#25919c 56%,#ff7a61);
  color:#fff;
  box-shadow:0 12px 24px rgba(37,145,156,.22);
}

.tile{
  border-radius:8px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 12px 30px rgba(31,48,54,.1),inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(1.25);
}

.tile b{
  border-radius:8px;
  background:linear-gradient(135deg,#18262d,#35a7b4);
  color:#fff;
}

.contentStats div,
.feedbackStats div{
  background:rgba(255,255,255,.54);
  color:#182026;
  border:1px solid rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(18px) saturate(1.25);
}

.contentStats small,
.feedbackStats small{
  color:#6a747c;
}

.progressbar{
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 3px rgba(21,35,42,.1);
}

.progressbar span{
  background:linear-gradient(90deg,#35a7b4,#f4cf58,#ff7a61);
}

.search span,
.arrow,
.foldArrow{
  background:rgba(24,38,45,.9);
  color:#fff;
  box-shadow:0 8px 18px rgba(24,38,45,.12);
}

.pill,
.statusTag,
.customTag,
.editBadge,
.countPill{
  border:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.48);
  color:#2a3a42;
}

.imageBox{
  border-radius:8px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.48),transparent 24%),
    linear-gradient(135deg,rgba(24,38,45,.9),rgba(53,167,180,.74) 52%,rgba(255,122,97,.7));
  border:1px solid rgba(255,255,255,.38);
}

.imageBox:before{
  background:
    linear-gradient(120deg,transparent 0 32%,rgba(255,255,255,.18) 32% 35%,transparent 35%),
    radial-gradient(circle at 74% 24%,rgba(244,207,88,.56),transparent 18%);
}

.imageBox b{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  backdrop-filter:blur(12px);
}

.timeline{
  border-left-color:rgba(53,167,180,.42);
}

.tl:before{
  background:rgba(255,255,255,.8);
  border-color:#35a7b4;
}

.tl.open,
.sectionCard.activeBlock,
.termCard.activeBlock,
.qCard.activeBlock,
.quizInlineCard.activeBlock{
  background:linear-gradient(135deg,rgba(24,38,45,.9),rgba(37,145,156,.74) 60%,rgba(255,122,97,.68));
  border-color:rgba(255,255,255,.3);
  box-shadow:0 18px 42px rgba(31,48,54,.18),inset 0 1px 0 rgba(255,255,255,.18);
}

.tl.open:before{
  background:linear-gradient(135deg,#35a7b4,#f4cf58,#ff7a61);
  box-shadow:0 0 0 8px rgba(53,167,180,.13),0 0 28px rgba(53,167,180,.32);
}

.termCard.activeBlock::after,
.sectionCard.activeBlock::after,
.qCard.activeBlock::after,
.quizInlineCard.activeBlock::after{
  content:"复习中";
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.28);
}

.world{
  background:
    radial-gradient(circle at 16% 14%,rgba(255,255,255,.28),transparent 22%),
    linear-gradient(135deg,rgba(24,38,45,.9),rgba(37,145,156,.72) 56%,rgba(255,122,97,.7));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 18px 44px rgba(31,48,54,.16);
  backdrop-filter:blur(22px) saturate(1.25);
}

.world:before{
  background:none;
}

.worldNode{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);
}

.worldNode.lit{
  background:linear-gradient(135deg,#35a7b4,#f4cf58 52%,#ff7a61);
}

.article{
  background:rgba(255,255,255,.64);
}

.article mark.builtHL,
.hl-yellow{
  background:linear-gradient(180deg,transparent 48%,rgba(244,207,88,.58) 48%);
}

.choiceOpt{
  background:rgba(255,255,255,.54);
  border-color:rgba(255,255,255,.62);
}

.choiceOpt.correct{
  background:rgba(101,182,111,.18);
  border-color:rgba(101,182,111,.42);
}

.choiceOpt.wrong{
  background:rgba(255,107,95,.18);
  border-color:rgba(255,107,95,.42);
}

.planTable th{
  background:#18262d;
}

.planTable td{
  background:rgba(255,255,255,.52);
  border-top-color:rgba(255,255,255,.58);
}

.planTable tr.current td{
  background:rgba(244,207,88,.18);
  box-shadow:inset 4px 0 0 #35a7b4;
}

.planTable tr.done td{
  background:rgba(101,182,111,.15);
}

.badge{
  background:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.58);
}

.badge.unlocked{
  background:linear-gradient(135deg,rgba(24,38,45,.9),rgba(37,145,156,.74) 56%,rgba(255,122,97,.68));
}

.tabbar{
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 14px 34px rgba(31,48,54,.16),inset 0 1px 0 rgba(255,255,255,.68);
  backdrop-filter:blur(24px) saturate(1.35);
}

.tab{
  color:#66727b;
}

.tab b{
  background:transparent;
  color:#25919c;
}

.tab.active{
  background:linear-gradient(135deg,#18262d,#25919c 58%,#ff7a61);
  color:#fff;
}

.tab.active b{
  background:rgba(255,255,255,.16);
  color:#fff;
}

.topbar{
  background:rgba(255,255,255,.54);
  border-bottom:1px solid rgba(255,255,255,.58);
  backdrop-filter:blur(22px) saturate(1.25);
}

.toast{
  background:rgba(24,38,45,.9);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);
}

@media(max-width:520px){
  .app{
    background:
      radial-gradient(circle at 12% 2%,rgba(53,167,180,.24),transparent 34%),
      radial-gradient(circle at 100% 28%,rgba(255,122,97,.18),transparent 30%),
      linear-gradient(180deg,#edf4f3,#f7f1ec);
  }
  .phone{
    border-radius:0;
  }
  .timelineActions{
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(22px) saturate(1.25);
  }
}

/* V2.7 modern glass dynamic UI */
:root{
  --bg:#eef5f5;
  --paper:rgba(255,255,255,.66);
  --ink:#132029;
  --muted:#64727c;
  --line:rgba(255,255,255,.64);
  --red:#ff6258;
  --blue:#2aa7b8;
  --green:#59bb76;
  --yellow:#f4cc4d;
  --pink:#f7b5c8;
  --purple:#9f98ff;
  --orange:#ff8b61;
  --brand:#2aa7b8;
  --brand2:#ff7f64;
  --gold:#f4cc4d;
  --page-a:#2aa7b8;
  --page-b:#ff7f64;
  --page-c:#f4cc4d;
  --paperEdge:rgba(255,255,255,.66);
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.78);
  --glass-soft:rgba(255,255,255,.46);
  --shadow:0 16px 42px rgba(31,50,57,.14);
  --shadow-strong:0 24px 70px rgba(31,50,57,.2);
  --soft:var(--shadow);
}

body[data-page="home"]{--page-a:#2aa7b8;--page-b:#ff7f64;--page-c:#f4cc4d}
body[data-page="timeline"]{--page-a:#2aa7b8;--page-b:#6f91ff;--page-c:#f4cc4d}
body[data-page="terms"]{--page-a:#4fbf95;--page-b:#2aa7b8;--page-c:#ff8b61}
body[data-page="questions"]{--page-a:#8e8cff;--page-b:#2aa7b8;--page-c:#ff7f64}
body[data-page="mine"]{--page-a:#ff8b61;--page-b:#f4cc4d;--page-c:#2aa7b8}

html,body{
  background:#e6eeee;
  color:var(--ink);
  font-family:"Inter","SF Pro Text","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:0;
}

button,input,textarea,select{
  font-family:"Inter","SF Pro Text","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:0;
}

.app{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(118deg,rgba(42,167,184,.20),transparent 24% 68%,rgba(255,127,100,.18)),
    linear-gradient(25deg,rgba(244,204,77,.18),transparent 34%),
    linear-gradient(180deg,#eef7f7,#f8f2ef 54%,#eaf1f5);
  isolation:isolate;
}

.app::before,
.app::after{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  z-index:0;
}

.app::before{
  background:
    linear-gradient(115deg,transparent 10%,color-mix(in srgb,var(--page-a) 34%,transparent) 28%,transparent 46%),
    linear-gradient(248deg,transparent 18%,color-mix(in srgb,var(--page-b) 28%,transparent) 44%,transparent 65%),
    linear-gradient(10deg,transparent 26%,color-mix(in srgb,var(--page-c) 22%,transparent) 58%,transparent 78%);
  filter:blur(30px) saturate(1.25);
  opacity:.92;
  animation:glassAurora 14s ease-in-out infinite alternate;
}

.app::after{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 42px);
  opacity:.24;
  mask-image:linear-gradient(180deg,transparent,black 12%,black 78%,transparent);
}

.app>*{
  position:relative;
  z-index:1;
}

.phone{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.36) !important;
  border:1px solid rgba(255,255,255,.74);
  border-radius:28px;
  box-shadow:0 28px 92px rgba(24,44,51,.23),inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter:blur(26px) saturate(1.28);
}

.phone::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(150deg,rgba(255,255,255,.52),transparent 26%),
    linear-gradient(330deg,color-mix(in srgb,var(--page-a) 10%,transparent),transparent 48%),
    linear-gradient(180deg,rgba(248,252,252,.58),rgba(238,245,246,.78));
  pointer-events:none;
  z-index:0;
}

.screen,
.detail{
  position:relative;
  z-index:1;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--page-a) 10%,transparent),transparent 42%),
    linear-gradient(210deg,color-mix(in srgb,var(--page-b) 9%,transparent),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(239,247,247,.76));
}

.screen{
  scrollbar-width:none;
}

.screen::-webkit-scrollbar,
.filters::-webkit-scrollbar,
.markTool::-webkit-scrollbar{
  display:none;
}

.page{
  padding:0 16px 26px;
}

.screen.pageMotion .page.active{
  animation:pageLift .38s cubic-bezier(.2,.8,.2,1) both;
}

.header{
  background:rgba(255,255,255,.58);
  border-bottom:1px solid rgba(255,255,255,.66);
  box-shadow:0 12px 30px rgba(31,50,57,.07),inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(1.32);
}

.eyebrow{
  color:color-mix(in srgb,var(--page-a) 80%,#16313a);
  font-weight:900;
  letter-spacing:.12em;
}

.eyebrow:before{
  width:22px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--page-a),var(--page-c),var(--page-b));
  box-shadow:0 0 18px color-mix(in srgb,var(--page-a) 40%,transparent);
}

.header h1,
.goal h2,
.detail-body h2{
  color:#11202a;
  font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-weight:900;
  letter-spacing:0;
}

.header p,
.muted,
.meta,
.tapHint,
.soundHint,
.relatedGrid small,
.swipeCenter small{
  color:var(--muted);
}

.goal{
  position:relative;
  overflow:hidden;
  border-radius:8px !important;
  background:
    linear-gradient(135deg,rgba(18,32,41,.88),color-mix(in srgb,var(--page-a) 62%,rgba(18,32,41,.86)) 56%,color-mix(in srgb,var(--page-b) 70%,rgba(18,32,41,.78))),
    linear-gradient(22deg,transparent 10%,rgba(255,255,255,.18) 46%,transparent 72%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:var(--shadow-strong),inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(20px) saturate(1.35);
}

.goal::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg,transparent 0 36%,rgba(255,255,255,.22) 42%,transparent 49%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 28px);
  opacity:.42;
  animation:sheenSlide 7s ease-in-out infinite;
  pointer-events:none;
}

.goal>*{
  position:relative;
  z-index:1;
}

.goal small{
  color:rgba(255,255,255,.78);
  letter-spacing:.11em;
}

.goal h2{
  color:#fff;
  text-shadow:0 12px 34px rgba(0,0,0,.18);
}

.goal p{
  color:rgba(255,255,255,.78);
}

.card,
.termCard,
.sectionCard,
.qCard,
.quizInlineCard,
.toolBox,
.empty,
.article,
.note,
.guideCard,
.guideStep,
.originalHint,
.wrongKeepBox,
.exportNote,
.swipeNavBox,
.readingHint,
.highlightHint,
.planTableWrap,
.selectBox,
.inputBox,
.editBox,
.dataBox,
.planEditBox,
.planInput,
.search,
.foldHeader,
.foldHint,
.worldFoldHint,
.moreToolPanel{
  border-radius:8px !important;
  background:var(--glass) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.58) !important;
  backdrop-filter:blur(22px) saturate(1.28);
}

.card,
.termCard,
.sectionCard,
.qCard,
.quizInlineCard,
.toolBox,
.badge{
  transform:translateZ(0);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}

.card:active,
.termCard:active,
.sectionCard:active,
.qCard:active,
.quizInlineCard:active,
.badge:active{
  transform:translateY(1px) scale(.992);
}

.card h3,
.toolBox h3,
.sectionTitle h3,
.quizInlineCard h3,
.termCard h3{
  color:#132029;
  letter-spacing:0;
  line-height:1.35;
}

.card h3:before,
.toolBox h3:before{
  width:18px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--page-a),var(--page-b));
  box-shadow:0 0 16px color-mix(in srgb,var(--page-a) 38%,transparent);
  vertical-align:3px;
}

.modebar button,
.quizModeBar button,
.filters button,
.timelineActions button,
.planTable button,
.markTool button,
.textActionBar button,
.quickActionBar button,
.btn,.dark,.plain,
.topbar button,
.swipeNavBtn,
.relatedGrid button{
  min-height:42px;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.64) !important;
  background:rgba(255,255,255,.56) !important;
  color:#182a33;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}

.modebar button:active,
.quizModeBar button:active,
.filters button:active,
.timelineActions button:active,
.btn:active,.dark:active,.plain:active,
.quickActionBar button:active,
.tab:active,
.tile:active,
.relatedGrid button:active{
  transform:translateY(1px) scale(.985);
}

.dark,
.modebar button.active,
.quizModeBar button.active,
.filters button.active,
.timelineActions .dark,
.topbar .closeBtn,
.planTable button.darkMini,
.quickActionBar button.dark,
.swipeNavBtn:not(:disabled):active{
  background:linear-gradient(135deg,#142631,var(--page-a) 56%,var(--page-b)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.26) !important;
  box-shadow:0 14px 28px color-mix(in srgb,var(--page-a) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.tile{
  min-height:82px;
  border-radius:8px !important;
  background:rgba(255,255,255,.56) !important;
  border:1px solid rgba(255,255,255,.66) !important;
  color:#1b2b34;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.6) !important;
  backdrop-filter:blur(20px) saturate(1.25);
}

.tile b,
.search span,
.arrow,
.foldArrow{
  display:grid;
  place-items:center;
  border-radius:8px !important;
  background:linear-gradient(135deg,#142631,var(--page-a)) !important;
  color:#fff !important;
  box-shadow:0 10px 20px color-mix(in srgb,var(--page-a) 22%,transparent);
}

.tile b{
  width:30px;
  height:30px;
  font-size:17px;
}

.contentStats div,
.feedbackStats div{
  background:rgba(255,255,255,.54) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  color:#132029;
  border-radius:8px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(1.2);
}

.contentStats b,
.feedbackStats b{
  color:#111f29;
}

.contentStats small,
.feedbackStats small{
  color:var(--muted);
}

.progressbar{
  height:10px;
  background:rgba(255,255,255,.52) !important;
  box-shadow:inset 0 1px 4px rgba(21,35,42,.12);
}

.progressbar span{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,var(--page-a),var(--page-c),var(--page-b),var(--page-a)) !important;
  background-size:220% 100%;
  animation:progressFlow 3.2s linear infinite;
}

.search{
  padding:12px 13px;
}

.search span{
  width:30px;
  height:30px;
}

.search input,
.note,
.editBox,
.dataBox,
.planEditBox,
.planInput,
.inputBox,
.selectBox{
  color:#132029;
}

.pill,
.statusTag,
.customTag,
.editBadge,
.countPill{
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.62) !important;
  background:rgba(255,255,255,.5) !important;
  color:#243640;
  backdrop-filter:blur(12px) saturate(1.18);
}

.row{
  border-top-color:rgba(31,50,57,.08) !important;
  color:#15242d;
}

.row:active{
  background:rgba(255,255,255,.42);
  padding-left:6px;
}

.row strong{
  line-height:1.45;
}

.imageBox{
  border-radius:8px !important;
  background:
    linear-gradient(130deg,rgba(20,38,49,.9),color-mix(in srgb,var(--page-a) 70%,#132029) 56%,color-mix(in srgb,var(--page-b) 70%,#132029)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 24px) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

.imageBox:before{
  background:
    linear-gradient(110deg,transparent 0 30%,rgba(255,255,255,.2) 36%,transparent 42%),
    linear-gradient(20deg,rgba(244,204,77,.4),transparent 34%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 22px);
  animation:sheenSlide 8s ease-in-out infinite;
}

.imageBox b{
  left:14px;
  bottom:14px;
  padding:7px 9px;
  border-radius:8px !important;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:blur(12px);
}

.timeline{
  border-left-color:color-mix(in srgb,var(--page-a) 42%,transparent) !important;
}

.tl:before{
  background:rgba(255,255,255,.84) !important;
  border-color:var(--page-a) !important;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--page-a) 15%,transparent),0 0 24px color-mix(in srgb,var(--page-a) 22%,transparent) !important;
}

.tl.open,
.sectionCard.activeBlock,
.termCard.activeBlock,
.qCard.activeBlock,
.quizInlineCard.activeBlock{
  background:linear-gradient(135deg,rgba(20,38,49,.9),color-mix(in srgb,var(--page-a) 70%,rgba(20,38,49,.86)) 58%,color-mix(in srgb,var(--page-b) 72%,rgba(20,38,49,.82))) !important;
  border-color:rgba(255,255,255,.34) !important;
  color:#fff !important;
  box-shadow:0 20px 48px color-mix(in srgb,var(--page-a) 22%,rgba(31,50,57,.14)),inset 0 1px 0 rgba(255,255,255,.24) !important;
  transform:translateY(-1px) !important;
}

.tl.open .muted,
.sectionCard.activeBlock .muted,
.termCard.activeBlock .muted,
.qCard.activeBlock .muted,
.quizInlineCard.activeBlock .muted{
  color:rgba(255,255,255,.72) !important;
}

.tl.open .row{
  color:#fff !important;
  border-top-color:rgba(255,255,255,.16) !important;
}

.tl.open .row small,
.tl.open .arrow{
  color:rgba(255,255,255,.72) !important;
}

.tl.open:before{
  background:linear-gradient(135deg,#fff,var(--page-c) 34%,var(--page-a) 72%,var(--page-b)) !important;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--page-a) 16%,transparent),0 0 32px color-mix(in srgb,var(--page-c) 45%,transparent) !important;
  animation:nodePulse 1.8s ease-in-out infinite;
}

.termCard.activeBlock::after,
.sectionCard.activeBlock::after,
.qCard.activeBlock::after,
.quizInlineCard.activeBlock::after{
  content:"当前查看" !important;
  position:absolute;
  right:14px;
  top:14px;
  border-radius:8px !important;
  padding:4px 8px;
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
  font-size:11px;
  backdrop-filter:blur(12px);
}

.world{
  border-radius:8px !important;
  background:
    linear-gradient(135deg,rgba(20,38,49,.92),color-mix(in srgb,var(--page-a) 64%,rgba(20,38,49,.9)) 58%,color-mix(in srgb,var(--page-b) 70%,rgba(20,38,49,.82))) !important;
  border:1px solid rgba(255,255,255,.32) !important;
  box-shadow:var(--shadow-strong),inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter:blur(24px) saturate(1.3);
}

.world:before{
  background:
    linear-gradient(110deg,transparent 12%,rgba(255,255,255,.16) 34%,transparent 50%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 28px) !important;
  animation:sheenSlide 9s ease-in-out infinite;
}

.worldNode{
  border-radius:8px !important;
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

.worldNode.lit{
  background:linear-gradient(135deg,var(--page-a),var(--page-c) 48%,var(--page-b)) !important;
  color:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 16px 34px color-mix(in srgb,var(--page-c) 30%,transparent) !important;
  animation:litPulse 2.4s ease-in-out infinite;
}

.worldNode.newLight{
  animation:lightBurst .75s ease both,litPulse 2.4s ease-in-out .8s infinite;
}

.article{
  background:rgba(255,255,255,.82) !important;
  color:#17242d;
  font-size:15.5px;
  line-height:2.08;
  box-shadow:0 10px 28px rgba(31,50,57,.08),inset 0 1px 0 rgba(255,255,255,.74) !important;
}

.article p{
  margin-bottom:16px;
}

.article mark.builtHL,
.hl-yellow{
  background:linear-gradient(180deg,transparent 48%,rgba(244,204,77,.62) 48%) !important;
}

.hl-pink{background:linear-gradient(180deg,transparent 48%,rgba(247,181,200,.62) 48%) !important}
.hl-green{background:linear-gradient(180deg,transparent 48%,rgba(89,187,118,.5) 48%) !important}
.hl-blue{background:linear-gradient(180deg,transparent 48%,rgba(42,167,184,.42) 48%) !important}
.hl-purple{background:linear-gradient(180deg,transparent 48%,rgba(159,152,255,.42) 48%) !important}

.choiceOpt{
  background:rgba(255,255,255,.6) !important;
  border-color:rgba(255,255,255,.68) !important;
}

.choiceOpt.correct{
  background:linear-gradient(135deg,rgba(89,187,118,.24),rgba(255,255,255,.68)) !important;
  border-color:rgba(89,187,118,.5) !important;
  box-shadow:0 12px 28px rgba(89,187,118,.14) !important;
}

.choiceOpt.wrong{
  background:linear-gradient(135deg,rgba(255,98,88,.2),rgba(255,255,255,.68)) !important;
  border-color:rgba(255,98,88,.48) !important;
  box-shadow:0 12px 28px rgba(255,98,88,.12) !important;
}

.planTable th{
  background:#132631 !important;
}

.planTable td{
  background:rgba(255,255,255,.56) !important;
  border-top-color:rgba(255,255,255,.64) !important;
}

.planTable tr.current td{
  background:color-mix(in srgb,var(--page-c) 18%,rgba(255,255,255,.62)) !important;
  box-shadow:inset 4px 0 0 var(--page-a) !important;
}

.planTable tr.done td{
  background:rgba(89,187,118,.16) !important;
}

.badge{
  border-radius:8px !important;
  background:rgba(255,255,255,.56) !important;
  border:1px solid rgba(255,255,255,.64) !important;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.58);
  backdrop-filter:blur(20px) saturate(1.2);
}

.badge.unlocked{
  background:linear-gradient(135deg,rgba(20,38,49,.9),var(--page-a) 58%,var(--page-b)) !important;
  color:#fff;
  box-shadow:0 18px 42px color-mix(in srgb,var(--page-a) 22%,transparent);
}

.badge.unlocked:after{
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(244,204,77,.28));
}

.tabbar{
  left:10px;
  right:10px;
  bottom:10px;
  border-radius:8px !important;
  background:rgba(255,255,255,.64) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 16px 40px rgba(31,50,57,.18),inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter:blur(26px) saturate(1.34);
}

.tab{
  border-radius:8px !important;
  color:#63727c;
}

.tab b{
  background:transparent !important;
  color:var(--page-a);
}

.tab.active{
  background:linear-gradient(135deg,#132631,var(--page-a) 58%,var(--page-b)) !important;
  color:#fff;
  box-shadow:0 12px 24px color-mix(in srgb,var(--page-a) 24%,transparent);
}

.tab.active b{
  background:rgba(255,255,255,.16) !important;
  color:#fff;
}

.topbar{
  background:rgba(255,255,255,.62) !important;
  border-bottom:1px solid rgba(255,255,255,.68) !important;
  box-shadow:0 12px 30px rgba(31,50,57,.08);
  backdrop-filter:blur(24px) saturate(1.3);
}

.detail{
  color:#17242d;
}

.detail.active{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--page-a) 8%,transparent),transparent 42%),
    linear-gradient(210deg,color-mix(in srgb,var(--page-b) 7%,transparent),transparent 40%),
    linear-gradient(180deg,rgba(250,253,253,.94),rgba(238,246,246,.96)) !important;
  backdrop-filter:blur(18px) saturate(1.12);
}

.detail.active ~ .tabbar{
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
}

.toast{
  border-radius:8px !important;
  background:rgba(19,38,49,.9) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow:0 20px 50px rgba(31,50,57,.28),inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(20px) saturate(1.25);
}

.toast.show{
  animation:toastGlass 1.45s cubic-bezier(.2,.8,.2,1) both !important;
}

.toast.successToast{
  background:linear-gradient(135deg,rgba(19,38,49,.94),rgba(42,167,184,.82)) !important;
}

.toast.warningToast{
  background:linear-gradient(135deg,rgba(19,38,49,.94),rgba(255,98,88,.78)) !important;
}

.toast.badgeToast{
  background:linear-gradient(135deg,rgba(19,38,49,.94),rgba(244,204,77,.72),rgba(255,127,100,.74)) !important;
}

.guideOverlay{
  background:rgba(15,29,37,.42);
  backdrop-filter:blur(12px);
}

.guideCard{
  background:rgba(255,255,255,.76) !important;
}

.markTool,
.textActionBar{
  background:rgba(255,255,255,.5) !important;
  border-color:rgba(255,255,255,.62) !important;
  backdrop-filter:blur(18px) saturate(1.2);
}

.swipeNavBtn:disabled{
  opacity:.38;
  transform:none;
}

.relatedGrid{
  gap:9px;
}

.readingHint,
.highlightHint,
.originalHint,
.exportNote,
.wrongKeepBox{
  color:#53636e;
}

@keyframes glassAurora{
  0%{transform:translate3d(-2%,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(3%,-2%,0) rotate(2deg) scale(1.03)}
  100%{transform:translate3d(1%,3%,0) rotate(-2deg) scale(1.04)}
}

@keyframes pageLift{
  from{opacity:0;transform:translateY(10px) scale(.992);filter:blur(3px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes sheenSlide{
  0%,100%{transform:translateX(-18%);opacity:.24}
  45%{transform:translateX(16%);opacity:.52}
}

@keyframes progressFlow{
  from{background-position:0% 50%}
  to{background-position:220% 50%}
}

@keyframes nodePulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.18);transform:scale(1.08)}
}

@keyframes litPulse{
  0%,100%{filter:brightness(1);transform:translateY(0)}
  50%{filter:brightness(1.12);transform:translateY(-1px)}
}

@keyframes toastGlass{
  0%{opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px)}
  18%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  78%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateY(8px) scale(.985);filter:blur(2px)}
}

@media(max-width:720px){
  .app{
    background:
      linear-gradient(118deg,rgba(42,167,184,.20),transparent 24% 68%,rgba(255,127,100,.18)),
      linear-gradient(25deg,rgba(244,204,77,.16),transparent 34%),
      linear-gradient(180deg,#eef7f7,#f8f2ef 54%,#eaf1f5) !important;
  }

  .phone{
    width:100vw;
    height:100dvh;
    border-radius:0 !important;
    border:0;
    box-shadow:none;
  }

  .screen{
    padding-bottom:calc(108px + env(safe-area-inset-bottom));
  }

  .page{
    padding:0 14px 24px;
  }

  .header{
    padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
  }

  .header h1{
    font-size:23px;
    line-height:1.12;
  }

  .goal{
    margin:2px 0 12px;
    padding:18px 16px;
  }

  .goal h2{
    font-size:24px;
    line-height:1.18;
  }

  .card,.termCard,.sectionCard,.quizInlineCard,.qCard,.toolBox{
    padding:15px;
    margin:10px 0;
  }

  .modebar button,
  .quizModeBar button,
  .filters button,
  .timelineActions button,
  .btn,.dark,.plain,
  .btnline button,
  .quickActionBar button,
  .textActionBar button,
  .markTool button,
  .toolBox button,
  .planTable button,
  .swipeNavBtn,
  .choiceOpt{
    min-height:44px;
    padding:11px 13px;
    font-size:13px;
  }

  .tabbar{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    padding:8px;
    min-height:74px;
  }

  .tab{
    min-height:56px;
    font-size:11px;
  }

  .tab.active{
    transform:translateY(-1px);
  }

  .detail{
    padding-bottom:calc(34px + env(safe-area-inset-bottom));
  }
}

@media(max-width:380px){
  .grid{
    gap:8px;
  }

  .tile{
    min-height:76px;
    font-size:11px;
  }

  .header h1{
    font-size:22px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

/* V2.8 softer crystal icon and badge system */
:root{
  --page-a-rgb:74,172,190;
  --page-b-rgb:255,151,126;
  --page-c-rgb:247,211,111;
  --aura-a:rgba(var(--page-a-rgb),.18);
  --aura-b:rgba(var(--page-b-rgb),.16);
  --aura-c:rgba(var(--page-c-rgb),.14);
  --crystal-deep:#12303a;
}

body[data-page="home"]{--page-a-rgb:74,172,190;--page-b-rgb:255,151,126;--page-c-rgb:247,211,111}
body[data-page="timeline"]{--page-a-rgb:83,169,190;--page-b-rgb:151,163,255;--page-c-rgb:247,211,111}
body[data-page="terms"]{--page-a-rgb:87,184,151;--page-b-rgb:74,172,190;--page-c-rgb:255,157,111}
body[data-page="questions"]{--page-a-rgb:156,153,255;--page-b-rgb:74,172,190;--page-c-rgb:255,151,126}
body[data-page="mine"]{--page-a-rgb:255,151,126;--page-b-rgb:247,211,111;--page-c-rgb:74,172,190}

.app{
  background:
    radial-gradient(circle at 12% 8%,rgba(var(--page-a-rgb),.20),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(var(--page-b-rgb),.16),transparent 32%),
    radial-gradient(circle at 44% 96%,rgba(var(--page-c-rgb),.14),transparent 34%),
    linear-gradient(180deg,#f4faf9 0%,#f7f3f0 52%,#edf4f7 100%) !important;
}

.app::before{
  background:
    radial-gradient(ellipse at 24% 22%,rgba(var(--page-a-rgb),.24),transparent 36%),
    radial-gradient(ellipse at 76% 38%,rgba(var(--page-b-rgb),.20),transparent 34%),
    radial-gradient(ellipse at 50% 78%,rgba(var(--page-c-rgb),.18),transparent 38%) !important;
  filter:blur(44px) saturate(1.08);
  opacity:.82;
}

.app::after{
  opacity:.16;
}

.phone{
  background:rgba(255,255,255,.48) !important;
  box-shadow:0 28px 88px rgba(32,52,58,.18),inset 0 1px 0 rgba(255,255,255,.78);
}

.phone::before{
  background:
    linear-gradient(145deg,rgba(255,255,255,.58),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(var(--page-b-rgb),.08),transparent 28%),
    radial-gradient(circle at 12% 42%,rgba(var(--page-a-rgb),.08),transparent 32%),
    linear-gradient(180deg,rgba(252,254,254,.68),rgba(240,248,248,.82)) !important;
}

.screen,
.detail{
  background:
    radial-gradient(circle at 16% 8%,rgba(var(--page-a-rgb),.10),transparent 34%),
    radial-gradient(circle at 100% 28%,rgba(var(--page-b-rgb),.08),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.48),rgba(241,249,249,.82)) !important;
}

.goal{
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.18),transparent 28%),
    radial-gradient(circle at 92% 82%,rgba(var(--page-c-rgb),.20),transparent 34%),
    linear-gradient(145deg,rgba(30,66,76,.92),rgba(var(--page-a-rgb),.74) 54%,rgba(var(--page-b-rgb),.58)) !important;
  box-shadow:0 20px 58px rgba(35,58,65,.18),inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.goal::after{
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.24),transparent 22%),
    linear-gradient(112deg,transparent 0 42%,rgba(255,255,255,.16) 49%,transparent 57%) !important;
  opacity:.38;
}

.dark,
.modebar button.active,
.quizModeBar button.active,
.filters button.active,
.timelineActions .dark,
.topbar .closeBtn,
.planTable button.darkMini,
.quickActionBar button.dark{
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,rgba(21,52,63,.96),rgba(var(--page-a-rgb),.84) 60%,rgba(var(--page-b-rgb),.64)) !important;
  box-shadow:0 14px 28px rgba(var(--page-a-rgb),.18),inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.tile b,
.search span,
.arrow,
.foldArrow,
.tab.active b{
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.26),transparent 32%),
    linear-gradient(145deg,rgba(20,55,65,.96),rgba(var(--page-a-rgb),.82) 64%,rgba(var(--page-b-rgb),.58)) !important;
  box-shadow:0 10px 22px rgba(var(--page-a-rgb),.18),inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.tab.active{
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,rgba(21,52,63,.96),rgba(var(--page-a-rgb),.82) 60%,rgba(var(--page-b-rgb),.62)) !important;
  box-shadow:0 12px 24px rgba(var(--page-a-rgb),.16) !important;
}

.progressbar span{
  background:linear-gradient(90deg,rgba(var(--page-a-rgb),.92),rgba(var(--page-c-rgb),.88),rgba(var(--page-b-rgb),.78),rgba(var(--page-a-rgb),.92)) !important;
}

.imageBox,
.tl.open,
.sectionCard.activeBlock,
.termCard.activeBlock,
.qCard.activeBlock,
.quizInlineCard.activeBlock,
.world{
  background:
    radial-gradient(circle at 16% 14%,rgba(255,255,255,.20),transparent 30%),
    linear-gradient(145deg,rgba(26,58,69,.92),rgba(var(--page-a-rgb),.70) 58%,rgba(var(--page-b-rgb),.54)) !important;
  box-shadow:0 20px 48px rgba(34,58,65,.16),inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.worldNode.lit,
.badge.unlocked,
.badgeToast{
  background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.26),transparent 30%),
    linear-gradient(145deg,rgba(var(--page-a-rgb),.84),rgba(var(--page-c-rgb),.78) 52%,rgba(var(--page-b-rgb),.66)) !important;
}

.detail.active{
  background:
    radial-gradient(circle at 16% 8%,rgba(var(--page-a-rgb),.07),transparent 34%),
    radial-gradient(circle at 94% 28%,rgba(var(--page-b-rgb),.06),transparent 32%),
    linear-gradient(180deg,rgba(252,254,254,.96),rgba(240,248,248,.98)) !important;
}

.crystalIcon{
  display:inline-grid;
  place-items:center;
  width:1em;
  height:1em;
  color:currentColor;
  filter:drop-shadow(0 4px 8px rgba(21,48,58,.12));
}

.crystalIcon svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.crystalIcon svg *{
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.tile b .crystalIcon,
.tab b .crystalIcon,
.search span .crystalIcon,
.arrow .crystalIcon,
.foldArrow .crystalIcon{
  width:19px;
  height:19px;
}

.tab b{
  display:grid;
  place-items:center;
  width:28px;
  height:24px;
}

.tab.active b{
  width:34px;
  height:34px;
  border-radius:8px;
}

.tab:not(.active) b .crystalIcon{
  color:rgb(var(--page-a-rgb));
}

.tile b{
  width:36px;
  height:36px;
}

.tile b .crystalIcon{
  width:21px;
  height:21px;
}

.badgeGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.badgeGroupTitle{
  margin:18px 0 9px;
  color:#52636c;
  letter-spacing:.06em;
}

.badge{
  min-height:158px;
  padding:14px 12px 13px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(145deg,rgba(255,255,255,.66),rgba(255,255,255,.42)),
    radial-gradient(circle at 18% 10%,rgba(var(--page-a-rgb),.12),transparent 34%) !important;
}

.badge::before,
.badge::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.badge::before{
  inset:9px;
  border:1px solid rgba(255,255,255,.56);
  border-radius:46% 54% 50% 50% / 38% 38% 62% 62%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}

.badge::after{
  right:-26px;
  top:-28px;
  width:90px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.42),rgba(var(--page-c-rgb),.16) 42%,transparent 68%);
  filter:blur(.2px);
}

.badge>*{
  position:relative;
  z-index:1;
}

.badge .tier{
  right:10px;
  top:10px;
  border-radius:8px;
  background:rgba(255,255,255,.46);
  border:1px solid rgba(255,255,255,.58);
  color:#53646e;
  backdrop-filter:blur(12px);
}

.badgeMedal{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:4px 0 12px;
  color:#fff;
  border-radius:42% 58% 48% 52% / 38% 39% 61% 62%;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.48),transparent 28%),
    linear-gradient(145deg,rgba(33,79,90,.95),rgba(var(--page-a-rgb),.78) 55%,rgba(var(--page-b-rgb),.56));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 15px 30px rgba(var(--page-a-rgb),.18),inset 0 1px 0 rgba(255,255,255,.46),inset 0 -10px 18px rgba(21,42,51,.18);
}

.badgeMedal::before{
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  border-left-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-24deg);
}

.badgeMedal .crystalIcon{
  width:27px;
  height:27px;
  filter:drop-shadow(0 5px 8px rgba(8,28,34,.18));
}

.badge h4{
  margin:8px 0 5px;
  font-size:15px;
  line-height:1.28;
  color:#162830;
}

.badge p{
  font-size:11px;
  line-height:1.55;
  color:#5e6f78;
}

.badge.unlocked{
  color:#fff;
  border-color:rgba(255,255,255,.38) !important;
  box-shadow:0 20px 48px rgba(var(--page-a-rgb),.18),inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.badge.unlocked h4,
.badge.unlocked p,
.badge.unlocked .tier{
  color:#fff;
}

.badge.unlocked .tier{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.26);
}

.badge.unlocked::before{
  border-color:rgba(255,255,255,.28);
}

.badge.unlocked .badgeMedal{
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.58),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.24),rgba(var(--page-c-rgb),.48) 40%,rgba(var(--page-b-rgb),.40)),
    linear-gradient(145deg,rgba(33,79,90,.82),rgba(var(--page-a-rgb),.72));
  animation:crystalGlint 3.8s ease-in-out infinite;
}

.badge.locked{
  filter:none;
  opacity:.72;
}

.badge.locked .badgeMedal{
  color:#90a0a8;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.48),transparent 28%),
    linear-gradient(145deg,rgba(214,225,227,.82),rgba(247,249,249,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 26px rgba(31,50,57,.08);
}

.badgeTone-history{--page-a-rgb:74,172,190;--page-b-rgb:255,151,126;--page-c-rgb:247,211,111}
.badgeTone-explore{--page-a-rgb:102,169,255;--page-b-rgb:128,217,190;--page-c-rgb:247,211,111}
.badgeTone-plan{--page-a-rgb:81,185,152;--page-b-rgb:74,172,190;--page-c-rgb:247,211,111}
.badgeTone-repair{--page-a-rgb:255,139,111;--page-b-rgb:247,211,111;--page-c-rgb:255,104,96}
.badgeTone-quote{--page-a-rgb:158,153,255;--page-b-rgb:247,181,200;--page-c-rgb:247,211,111}
.badgeTone-answer{--page-a-rgb:74,172,190;--page-b-rgb:158,153,255;--page-c-rgb:255,151,126}

@keyframes crystalGlint{
  0%,100%{filter:brightness(1) saturate(1);transform:translateY(0)}
  45%{filter:brightness(1.12) saturate(1.08);transform:translateY(-1px)}
  58%{filter:brightness(1.04) saturate(1.04);transform:translateY(0)}
}

/* V2.9 ornate historical crystal badges */
.badgeGrid{
  grid-template-columns:repeat(2,minmax(148px,1fr));
  gap:14px;
}

.badgeGrid.singleBadgeGrid{
  grid-template-columns:1fr;
}

.badge{
  --tier-glow:.16;
  --tier-sat:1.05;
  --tier-bright:1;
  --tier-edge:rgba(255,255,255,.55);
  min-height:284px;
  padding:13px 12px 15px;
  background:
    radial-gradient(circle at 24% 10%,rgba(255,255,255,.74),transparent 26%),
    radial-gradient(circle at 92% 16%,rgba(var(--page-c-rgb),.22),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.44)) !important;
  border-color:rgba(255,255,255,.72) !important;
}

.badge.tierBase{
  --tier-glow:.13;
  --tier-sat:1.02;
}

.badge.tierNovice{
  --tier-glow:.18;
  --tier-sat:1.08;
}

.badge.tierAdvanced{
  --tier-glow:.28;
  --tier-sat:1.22;
  --tier-bright:1.04;
  --tier-edge:rgba(255,255,255,.68);
}

.badge.tierMaster{
  --tier-glow:.42;
  --tier-sat:1.42;
  --tier-bright:1.08;
  --tier-edge:rgba(255,255,255,.82);
}

.badge::before{
  inset:8px;
  border-radius:28px;
  border:1px solid var(--tier-edge);
  background:
    linear-gradient(135deg,rgba(255,255,255,.25),transparent 28%),
    radial-gradient(circle at 80% 20%,rgba(var(--page-c-rgb),.12),transparent 36%);
}

.badge::after{
  width:130px;
  height:130px;
  right:-46px;
  top:-42px;
  background:
    radial-gradient(circle,rgba(255,255,255,.54),rgba(var(--page-c-rgb),calc(var(--tier-glow) + .06)) 36%,transparent 68%);
}

.badge.unlocked{
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.38),transparent 27%),
    radial-gradient(circle at 90% 16%,rgba(var(--page-c-rgb),calc(var(--tier-glow) + .16)),transparent 34%),
    radial-gradient(circle at 12% 88%,rgba(var(--page-a-rgb),calc(var(--tier-glow) + .08)),transparent 36%),
    linear-gradient(145deg,rgba(var(--page-a-rgb),.62),rgba(var(--page-c-rgb),.50) 48%,rgba(var(--page-b-rgb),.58)) !important;
  box-shadow:0 24px 58px rgba(var(--page-a-rgb),calc(var(--tier-glow) + .08)),inset 0 1px 0 rgba(255,255,255,.36) !important;
  filter:saturate(var(--tier-sat)) brightness(var(--tier-bright));
}

.badge.tierAdvanced.unlocked,
.badge.tierMaster.unlocked{
  animation:badgeAura 4.8s ease-in-out infinite;
}

.badge.tierMaster.unlocked::before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 32px rgba(var(--page-c-rgb),.28);
}

.badgeArtWrap{
  width:100%;
  height:138px;
  display:grid;
  place-items:center;
  margin:6px 0 10px;
  position:relative;
  z-index:1;
}

.singleBadgeGrid .badgeArtWrap{
  height:168px;
}

.ornateBadge{
  width:min(146px,100%);
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 18px 22px rgba(18,38,46,.16));
}

.singleBadgeGrid .ornateBadge{
  width:min(188px,84%);
}

.ornateBadge .frameSoft{
  fill:rgba(255,255,255,.20);
  stroke:rgba(255,255,255,.72);
  stroke-width:3.4;
}

.ornateBadge .frameInk,
.ornateBadge .inkHeavy{
  stroke:#17232b;
  stroke-width:5.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ornateBadge .inkFine{
  stroke:rgba(23,35,43,.78);
  stroke-width:3.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ornateBadge .ornament{
  fill:rgba(255,255,255,.16);
  stroke:rgba(255,255,255,.46);
  stroke-width:2.2;
}

.ornateBadge .glassA{
  fill:rgba(var(--page-a-rgb),.58);
}

.ornateBadge .glassB{
  fill:rgba(var(--page-b-rgb),.42);
}

.ornateBadge .glassC{
  fill:rgba(var(--page-c-rgb),.45);
}

.ornateBadge .glassD{
  fill:rgba(255,255,255,.46);
  stroke:rgba(255,255,255,.78);
  stroke-width:2.2;
}

.ornateBadge .shine{
  stroke:rgba(255,255,255,.72);
  stroke-width:3.4;
  stroke-linecap:round;
}

.ornateBadge .pearl{
  fill:rgba(255,255,255,.86);
  stroke:#17232b;
  stroke-width:4.2;
}

.badge.locked .ornateBadge{
  filter:grayscale(.45) saturate(.55) opacity(.72) drop-shadow(0 12px 18px rgba(18,38,46,.08));
}

.badge.locked .ornateBadge .frameInk,
.badge.locked .ornateBadge .inkHeavy{
  stroke:#708088;
}

.badge.locked .ornateBadge .inkFine{
  stroke:rgba(112,128,136,.7);
}

.badge.unlocked .ornateBadge .frameInk,
.badge.unlocked .ornateBadge .inkHeavy{
  stroke:#15242c;
}

.badge.tierAdvanced .ornateBadge,
.badge.tierMaster .ornateBadge{
  filter:saturate(1.18) drop-shadow(0 20px 26px rgba(var(--page-a-rgb),.22));
}

.badge.tierMaster .ornateBadge{
  filter:saturate(1.35) brightness(1.06) drop-shadow(0 24px 32px rgba(var(--page-c-rgb),.26));
}

.badge.tierAdvanced .badgeArtWrap::before,
.badge.tierMaster .badgeArtWrap::before{
  content:"";
  position:absolute;
  inset:4px 8px;
  border-radius:42%;
  background:
    conic-gradient(from 120deg,rgba(var(--page-a-rgb),.12),rgba(var(--page-c-rgb),.22),rgba(var(--page-b-rgb),.16),rgba(var(--page-a-rgb),.12));
  filter:blur(8px);
}

.badge.tierMaster .badgeArtWrap::after{
  content:"";
  position:absolute;
  width:70%;
  height:16px;
  top:18px;
  left:10%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transform:rotate(-17deg);
  animation:badgeGlint 3.6s ease-in-out infinite;
}

.badge h4{
  font-size:16px;
  line-height:1.26;
  margin:6px -2px 5px;
  padding:7px 8px 0;
  border-radius:10px 10px 0 0;
}

.badge p{
  font-size:12px;
  margin-left:6px;
  margin-right:6px;
}

.badge.unlocked h4{
  background:linear-gradient(180deg,rgba(23,35,43,.08),transparent);
  text-shadow:0 2px 8px rgba(13,27,33,.18);
}

.badge.unlocked p{
  text-shadow:0 2px 8px rgba(13,27,33,.16);
}

.badge .tier{
  font-size:11px;
  padding:5px 8px;
  z-index:3;
}

.badge.tierMaster .tier,
.badge.tierAdvanced .tier{
  background:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 8px 20px rgba(var(--page-c-rgb),.16);
}

@keyframes badgeAura{
  0%,100%{box-shadow:0 24px 58px rgba(var(--page-a-rgb),calc(var(--tier-glow) + .08)),inset 0 1px 0 rgba(255,255,255,.36)}
  50%{box-shadow:0 28px 70px rgba(var(--page-c-rgb),calc(var(--tier-glow) + .12)),inset 0 1px 0 rgba(255,255,255,.44)}
}

@keyframes badgeGlint{
  0%,70%,100%{opacity:0;transform:translateX(-26%) rotate(-17deg)}
  35%{opacity:.8;transform:translateX(36%) rotate(-17deg)}
}

@media(max-width:380px){
  .badgeGrid{
    grid-template-columns:1fr;
  }

  .badge{
    min-height:278px;
  }

  .badgeArtWrap{
    height:150px;
  }
}


/* V3.0 reading-first annotation and editing tools */
.topbar{
  justify-content:flex-end !important;
  gap:10px !important;
  padding:10px 14px !important;
}

.topbar .iconBtn{
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  display:inline-grid;
  place-items:center;
  border-radius:50% !important;
  font-size:25px;
  line-height:1;
  color:#18313b !important;
  background:rgba(255,255,255,.66) !important;
  border:1px solid rgba(255,255,255,.74) !important;
  box-shadow:0 10px 24px rgba(31,50,57,.12),inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter:blur(22px) saturate(1.25);
}

.topbar .closeBtn{
  margin-left:0 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#18313b,#4aacbe) !important;
}

.studyTools{
  margin-top:14px !important;
  background:rgba(255,255,255,.66) !important;
}

.studyToolsHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.studyToolsHead h3{
  margin:0 0 3px;
  font-size:17px;
}

.studyToolsHead p{
  margin:0;
  color:#61737c;
  font-size:12px;
  line-height:1.55;
}

.studyToolsHead span{
  flex:0 0 auto;
  max-width:86px;
  padding:6px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#1d5864;
  background:linear-gradient(135deg,rgba(74,172,190,.16),rgba(255,199,107,.22));
  border:1px solid rgba(255,255,255,.76);
  text-align:center;
}

.studyActionGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.studyAction{
  min-height:76px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.42));
  box-shadow:0 10px 24px rgba(31,50,57,.08),inset 0 1px 0 rgba(255,255,255,.72);
  color:#243941;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:9px 6px;
  font-weight:900;
  font-size:12px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}

.studyAction:active{
  transform:scale(.97);
}

.studyAction.active{
  color:#fff;
  background:linear-gradient(135deg,#1b3440,#4aacbe 58%,#ff9b7d);
  box-shadow:0 15px 30px rgba(74,172,190,.2),inset 0 1px 0 rgba(255,255,255,.28);
}

.studyAction small{
  display:block;
  max-width:100%;
  color:inherit;
  opacity:.72;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.actionSvg{
  width:23px;
  height:23px;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 4px 7px rgba(74,172,190,.16));
}

.moreToolPanel{
  margin-top:12px !important;
  padding:12px !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.32)) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.markFeedback{
  padding:9px 10px;
  margin-bottom:9px;
  border-radius:12px;
  color:#28505b;
  background:rgba(74,172,190,.1);
  border:1px solid rgba(74,172,190,.16);
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}

.markTool{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.markTool button{
  border-radius:12px !important;
  background:rgba(255,255,255,.66) !important;
  border-color:rgba(255,255,255,.8) !important;
  box-shadow:0 8px 18px rgba(31,50,57,.07);
}

.markTool button.active{
  outline:0 !important;
  box-shadow:0 0 0 2px rgba(74,172,190,.35),0 8px 18px rgba(31,50,57,.08);
}

.emptyExplain{
  text-align:left;
  line-height:1.65;
}

.emptyExplain b{
  display:block;
  color:#243941;
  margin-bottom:6px;
}

.emptyExplain p{
  margin:0;
  color:#61737c;
}

@media(max-width:380px){
  .studyActionGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .studyAction{
    min-height:68px;
  }
}


/* V3.1 calm page switching */
.screen.pageMotion .page.active,
.page.active{
  animation:none !important;
  filter:none !important;
}


/* V3.2 chapter badge rewards */
.badgeTone-chapter,
.badgeTone-chapter1{--page-a-rgb:74,172,190;--page-b-rgb:255,151,126;--page-c-rgb:247,211,111}
.badgeTone-chapter2{--page-a-rgb:126,205,178;--page-b-rgb:165,143,220;--page-c-rgb:255,190,126}
.badgeTone-chapter3{--page-a-rgb:98,137,255;--page-b-rgb:74,172,190;--page-c-rgb:247,211,111}
.badgeTone-chapter4{--page-a-rgb:255,139,111;--page-b-rgb:247,211,111;--page-c-rgb:126,205,178}
.badgeTone-chapter5{--page-a-rgb:156,153,255;--page-b-rgb:247,181,200;--page-c-rgb:74,172,190}
.badgeTone-chapter6{--page-a-rgb:255,151,126;--page-b-rgb:88,199,176;--page-c-rgb:247,211,111}

.badgeReward{
  position:absolute;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  padding:28px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}

.badgeReward.show{
  visibility:visible;
  animation:rewardScene 3.3s cubic-bezier(.2,.8,.2,1) both;
}

.rewardBurst{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg,rgba(var(--page-a-rgb),.0),rgba(var(--page-c-rgb),.52),rgba(var(--page-b-rgb),.38),rgba(var(--page-a-rgb),.48),rgba(var(--page-c-rgb),.0)),
    radial-gradient(circle,rgba(255,255,255,.72),rgba(var(--page-c-rgb),.24) 38%,transparent 66%);
  filter:blur(4px) saturate(1.25);
  animation:rewardSpin 3.3s cubic-bezier(.2,.8,.2,1) both;
}

.rewardCard{
  position:relative;
  width:min(280px,88vw);
  min-height:360px;
  padding:18px 18px 20px;
  border-radius:18px;
  text-align:center;
  color:#17313b;
  background:
    linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.56)),
    linear-gradient(135deg,rgba(var(--page-a-rgb),.16),rgba(var(--page-c-rgb),.2));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 34px 90px rgba(31,50,57,.28),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(26px) saturate(1.36);
  transform-style:preserve-3d;
  animation:rewardCardFlip 3.3s cubic-bezier(.18,.9,.22,1) both;
}

.rewardCard::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.64);
  pointer-events:none;
}

.rewardLabel{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  color:#fff;
  background:linear-gradient(135deg,rgb(var(--page-a-rgb)),rgb(var(--page-b-rgb)));
  box-shadow:0 10px 22px rgba(var(--page-a-rgb),.18);
}

.rewardMedal{
  position:relative;
  width:168px;
  height:168px;
  margin:14px auto 8px;
  filter:drop-shadow(0 24px 30px rgba(var(--page-a-rgb),.2));
  animation:rewardMedalFloat 3.3s ease-in-out both;
}

.rewardMedal .badgeArtWrap{
  width:168px;
  height:168px;
  margin:0;
}

.rewardMedal .ornateBadge{
  width:168px;
  height:168px;
}

.rewardCard h3{
  margin:8px 0 6px;
  font-size:23px;
  line-height:1.18;
}

.rewardCard p{
  margin:0 auto 10px;
  max-width:210px;
  color:#4b6570;
  font-size:13px;
  line-height:1.55;
}

.rewardCard small{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
  color:#21434d;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.72);
}

@keyframes rewardScene{
  0%{opacity:0}
  10%,82%{opacity:1}
  100%{opacity:0}
}

@keyframes rewardSpin{
  0%{opacity:0;transform:scale(.62) rotate(0deg)}
  18%{opacity:1;transform:scale(1) rotate(120deg)}
  72%{opacity:.88;transform:scale(1.08) rotate(310deg)}
  100%{opacity:0;transform:scale(1.18) rotate(420deg)}
}

@keyframes rewardCardFlip{
  0%{opacity:0;transform:perspective(900px) rotateY(-50deg) rotateX(8deg) scale(.78) translateY(16px)}
  22%{opacity:1;transform:perspective(900px) rotateY(10deg) rotateX(0) scale(1.04) translateY(0)}
  38%,76%{opacity:1;transform:perspective(900px) rotateY(0) rotateX(0) scale(1) translateY(0)}
  100%{opacity:0;transform:perspective(900px) rotateY(22deg) scale(.92) translateY(8px)}
}

@keyframes rewardMedalFloat{
  0%{transform:translateY(14px) rotate(-10deg) scale(.84)}
  24%{transform:translateY(-4px) rotate(8deg) scale(1.05)}
  52%{transform:translateY(0) rotate(0deg) scale(1)}
  78%{transform:translateY(-3px) rotate(-4deg) scale(1.02)}
  100%{transform:translateY(8px) rotate(8deg) scale(.94)}
}

@media(prefers-reduced-motion:reduce){
  .badgeReward.show,
  .rewardBurst,
  .rewardCard,
  .rewardMedal{
    animation:none !important;
  }

.badgeReward.show{
    opacity:1;
    visibility:visible;
  }
}


/* V3.3 Notability-like pen dock and licensed term images */
.penDock{
  position:sticky;
  top:58px;
  z-index:12;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  margin:10px 0 8px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 14px 34px rgba(31,50,57,.12),inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter:blur(24px) saturate(1.28);
}

.penDock.hasSelection{
  box-shadow:0 16px 38px rgba(74,172,190,.16),0 0 0 2px rgba(74,172,190,.12),inset 0 1px 0 rgba(255,255,255,.9);
}

.penMode{
  display:flex;
  align-items:center;
  gap:5px;
  color:#24414b;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.penMode span{
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg,#203a43,#4aacbe 55%,#ff9b7d);
  box-shadow:0 4px 10px rgba(74,172,190,.24);
}

.penDock .markTool{
  display:flex;
  align-items:center;
  gap:6px;
  overflow:auto;
  margin:0 !important;
}

.penSwatch,
.linePen{
  width:35px !important;
  height:35px !important;
  min-width:35px !important;
  min-height:35px !important;
  padding:0 !important;
  border-radius:12px !important;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.66) !important;
  border:1px solid rgba(255,255,255,.82) !important;
}

.penSwatch .color-dot{
  width:19px;
  height:19px;
  margin:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.86);
  box-shadow:0 4px 10px rgba(31,50,57,.14);
}

.penSwatch.active{
  box-shadow:0 0 0 2px rgba(31,50,57,.78),0 10px 18px rgba(31,50,57,.1) !important;
}

.linePen i{
  width:21px;
  height:4px;
  border-radius:999px;
  display:block;
  transform:rotate(-8deg);
}

.linePen.redLine i{background:#d7352a}
.linePen.blueLine i{background:#1e5bd8}

.penDock .markFeedback{
  margin:0;
  padding:7px 9px;
  max-width:92px;
  border-radius:12px;
  font-size:11px;
  line-height:1.25;
  color:#31535d;
  background:rgba(74,172,190,.1);
  border:1px solid rgba(74,172,190,.16);
  white-space:normal;
}

.termImageCard{
  margin:12px 0;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 14px 34px rgba(31,50,57,.1),inset 0 1px 0 rgba(255,255,255,.78);
}

.termImageCard img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:linear-gradient(135deg,rgba(74,172,190,.18),rgba(255,151,126,.16));
}

.termImageCard figcaption{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 8px;
  align-items:center;
  padding:9px 11px 10px;
  color:#24414b;
}

.termImageCard figcaption b{
  font-size:13px;
  line-height:1.35;
}

.termImageCard figcaption span{
  grid-column:1;
  color:#61737c;
  font-size:10.5px;
  line-height:1.35;
}

.termImageCard figcaption a{
  grid-column:2;
  grid-row:1 / span 2;
  color:#1d6471;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(74,172,190,.18);
  background:rgba(74,172,190,.1);
  border-radius:999px;
  padding:5px 8px;
}

.termImageCard figcaption em{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:end;
  color:#31535d;
  font-style:normal;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.76);
  background:rgba(255,255,255,.58);
  border-radius:999px;
  padding:5px 8px;
}

.termImageCard.generatedImage img{
  object-fit:cover;
  image-rendering:auto;
  filter:saturate(1.08) contrast(1.03);
}

.termImageCard.generatedImage::after{
  content:"";
  position:absolute;
  inset:0 0 47px;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 16%,rgba(255,255,255,.28),transparent 26%),
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 36%,rgba(23,49,59,.08));
  mix-blend-mode:screen;
}

.termImageCard.generatedImage figcaption em{
  color:#194a55;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(119,210,223,.22));
  border-color:rgba(119,210,223,.36);
}

.termImageCard.imageFailed img{
  display:none;
}

.termImageCard.imageFailed::before{
  content:"图片加载失败，可点图源查看";
  display:grid;
  place-items:center;
  height:120px;
  color:#61737c;
  font-size:12px;
}


/* V3.5 study cockpit + clean reader */
.homeModeDock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
  padding:9px;
  border-radius:18px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 12px 26px rgba(31,50,57,.08),inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(22px) saturate(1.24);
}

.homeModeDock span{
  color:#31505a;
  font-size:12px;
  font-weight:900;
}

.homeModeDock div{
  display:flex;
  gap:5px;
}

.homeModeDock button,
.paceOptions button{
  border:1px solid rgba(74,172,190,.16);
  background:rgba(255,255,255,.7);
  color:#31505a;
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
}

.homeModeDock button.active,
.paceOptions button.active{
  color:#fff;
  background:linear-gradient(135deg,#1b3440,#4aacbe 58%,#ff9b7d);
  border-color:transparent;
  box-shadow:0 12px 24px rgba(74,172,190,.18);
}

.homeModeDock.compact{
  padding:8px 9px 8px 12px;
}

.homeModeDock.compact span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.homeSettingsBtn{
  flex:0 0 auto;
  width:36px;
  height:36px;
  padding:0 !important;
  display:grid;
  place-items:center;
  font-size:17px;
}

.homeSettingsPanel{
  margin:-4px 0 12px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 14px 30px rgba(31,50,57,.1),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.24);
}

.settingRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.settingRow span,
.settingBlock b{
  color:#31505a;
  font-weight:900;
  font-size:13px;
}

.settingRow div,
.settingOptions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.settingRow button,
.settingOptions button{
  border:1px solid rgba(74,172,190,.16);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:#31505a;
  padding:7px 10px;
  font-weight:900;
}

.settingRow button.active,
.settingOptions button.active{
  color:#fff;
  background:linear-gradient(135deg,#17313b,#4aacbe 62%,#ff9b7d);
  border-color:transparent;
}

.settingBlock{
  padding:10px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.7);
}

.settingBlock small{
  display:block;
  margin:4px 0 9px;
  color:#61737c;
  line-height:1.45;
  font-size:11px;
  font-weight:800;
}

.customDaysBox{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:7px;
  margin-top:9px;
}

.customDaysBox input{
  width:100%;
  border:1px solid rgba(74,172,190,.18);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#31505a;
  padding:8px 10px;
  font-weight:900;
  outline:none;
}

.planPickSummary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0;
}

.planPickSummary span{
  padding:10px;
  border-radius:14px;
  text-align:center;
  color:#31505a;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.78);
  font-size:12px;
  font-weight:900;
}

.planPickSummary b{
  color:#17313b;
  font-size:18px;
}

.planPicker{
  margin:12px 0;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.76);
}

.pickGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  max-height:260px;
  overflow:auto;
  padding-right:2px;
}

.pickChip{
  min-height:58px;
  border:1px solid rgba(74,172,190,.14);
  border-radius:14px;
  background:rgba(255,255,255,.7);
  color:#31505a;
  padding:8px;
  text-align:left;
}

.pickChip b,
.pickChip small{
  display:block;
}

.pickChip b{
  font-size:12px;
  line-height:1.3;
}

.pickChip small{
  margin-top:4px;
  color:#61737c;
  font-size:10px;
  font-weight:800;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pickChip.picked{
  color:#fff;
  background:linear-gradient(135deg,#17313b,#4aacbe 62%,#ff9b7d);
  border-color:transparent;
  box-shadow:0 12px 24px rgba(74,172,190,.16);
}

.pickChip.picked small{
  color:rgba(255,255,255,.76);
}

.daySession{
  position:absolute;
  inset:0;
  z-index:170;
  display:none;
  grid-template-rows:auto auto 1fr auto;
  background:
    radial-gradient(circle at 18% 8%,rgba(119,210,223,.24),transparent 34%),
    linear-gradient(180deg,#f7fbfb,#eef7f6 52%,#fff7ee);
  color:#17313b;
}

.daySession.show{
  display:grid;
}

.daySessionTop{
  display:grid;
  grid-template-columns:44px 1fr 68px;
  gap:8px;
  align-items:center;
  padding:13px 14px 10px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(74,172,190,.12);
  backdrop-filter:blur(24px) saturate(1.2);
}

.daySessionTop button,
.daySessionControls button{
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#17313b;
  font-weight:900;
  box-shadow:0 8px 20px rgba(31,50,57,.08);
}

.daySessionTop button{
  height:42px;
}

.daySessionTop b,
.daySessionTop small{
  display:block;
}

.daySessionTop b{
  font-size:15px;
}

.daySessionTop small{
  color:#61737c;
  font-size:11px;
  font-weight:800;
}

.daySessionProgress{
  height:7px;
  background:rgba(74,172,190,.1);
}

.daySessionProgress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#4aacbe,#ff9b7d,#f7d36f);
  border-radius:999px;
}

.daySessionArticle{
  overflow:auto;
  padding:20px 22px 112px;
  font-size:18px;
  line-height:2;
}

.daySessionArticle h2{
  margin:8px 0 16px;
  font-size:24px;
  line-height:1.2;
}

.sessionChoice h3{
  font-size:19px;
  line-height:1.45;
}

.sessionChoice .choiceOpt{
  display:block;
  width:100%;
  margin:9px 0;
  text-align:left;
  border-radius:16px;
  background:rgba(255,255,255,.72);
}

.sessionChoice p,
.choiceExplain{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.76);
}

.choicePrompt{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  color:#61737c;
  font-size:13px;
  font-weight:900;
  background:rgba(255,255,255,.54);
  border:1px dashed rgba(74,172,190,.32);
}

.sessionChoice span{
  float:right;
  color:#fff;
  background:linear-gradient(135deg,#4aacbe,#1b3440);
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  font-weight:900;
}

.daySessionControls{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 42px rgba(31,50,57,.14),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.22);
}

.daySessionControls button{
  min-height:42px;
}

.daySessionControls button:disabled{
  opacity:.45;
}

.daySessionControls span{
  color:#61737c;
  font-size:12px;
  font-weight:900;
}

.daySessionSummary{
  padding-bottom:120px;
}

.summaryHero{
  padding:18px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(145deg,#17313b,#4aacbe 62%,#ff9b7d);
  box-shadow:0 18px 42px rgba(74,172,190,.16);
}

.summaryHero small,
.summaryHero h2,
.summaryHero p{
  display:block;
  margin:0;
}

.summaryHero small{
  font-size:12px;
  font-weight:900;
  opacity:.78;
}

.summaryHero h2{
  margin-top:4px;
  font-size:25px;
  line-height:1.18;
}

.summaryHero p{
  margin-top:8px;
  font-size:13px;
  line-height:1.7;
  opacity:.9;
}

.summaryStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0;
}

.summaryStats div,
.summaryStats button{
  padding:12px 8px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.76);
}

.summaryStats b,
.summaryStats small{
  display:block;
}

.summaryStats button{
  appearance:none;
  color:#17313b;
  font:inherit;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(74,172,190,.1);
}

.summaryStats button:active{
  transform:scale(.98);
}

.summaryStats b{
  font-size:22px;
  line-height:1;
}

.summaryStats small{
  margin-top:5px;
  color:#61737c;
  font-size:11px;
  font-weight:900;
}

.reviewList{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.78);
}

.reviewList[hidden]{
  display:none !important;
}

.dayContentList{
  margin-bottom:10px;
}

.reviewList h3,
.reviewList p{
  margin:0;
}

.reviewList h3{
  font-size:16px;
}

.reviewList p{
  color:#61737c;
  font-size:13px;
  line-height:1.7;
}

.reviewList button{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  min-height:56px;
  padding:10px 12px;
  border:1px solid rgba(74,172,190,.16);
  border-radius:16px;
  background:rgba(255,255,255,.74);
  color:#17313b;
  text-align:left;
}

.reviewList button b,
.reviewList button small{
  display:block;
}

.reviewList button b{
  font-size:13px;
  line-height:1.3;
}

.reviewList button small{
  margin-top:4px;
  color:#61737c;
  font-size:10px;
  font-weight:900;
  line-height:1.35;
}

.reviewList button>span:last-child{
  color:#fff;
  background:linear-gradient(135deg,#4aacbe,#17313b);
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:900;
}

.summaryControls{
  grid-template-columns:1fr auto 1fr;
}


/* V3.10 review queue */
.reviewDashboard .sectionTitle span{
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#4aacbe,#17313b);
  font-weight:900;
}

.reviewInboxStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0;
}

.reviewInboxStats button{
  min-height:72px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:18px;
  background:rgba(255,255,255,.68);
  color:#17313b;
  box-shadow:0 12px 26px rgba(74,172,190,.1);
}

.reviewInboxStats b,
.reviewInboxStats small{
  display:block;
}

.reviewInboxStats b{
  font-size:24px;
  line-height:1;
}

.reviewInboxStats small{
  margin-top:7px;
  color:#61737c;
  font-size:11px;
  font-weight:900;
}

.reviewQueueMini{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.reviewBox{
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.76);
  padding:12px;
  box-shadow:0 12px 28px rgba(31,50,57,.08);
}

.reviewBox.due{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,155,125,.16));
  border-color:rgba(255,155,125,.28);
}

.reviewBox.mastered{
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(126,205,178,.18));
  border-color:rgba(126,205,178,.32);
}

.reviewBox b{
  display:block;
  color:#17313b;
  line-height:1.35;
}

.reviewBox button{
  margin-top:8px;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
}

.masteredArchive{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.masteredArchive[hidden]{
  display:none !important;
}

.reviewSessionArticle{
  padding-bottom:172px;
}

.reviewSessionActions{
  position:absolute;
  left:14px;
  right:14px;
  bottom:74px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  padding:8px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 42px rgba(31,50,57,.14),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.22);
}

.reviewSessionActions button{
  min-height:42px;
  border-radius:999px;
}

.reviewControls{
  bottom:14px;
}


/* V3.11 clearer mine sections */
.actionSvg{
  --icon-a:#17313b;
  --icon-b:#4aacbe;
  --icon-c:#ff9b7d;
}

.actionSvg-library{--icon-a:#1c4850;--icon-b:#55b9c8;--icon-c:#9be7dd;}
.actionSvg-download{--icon-a:#205a9b;--icon-b:#65b6ff;--icon-c:#f7d76f;}
.actionSvg-import{--icon-a:#a95036;--icon-b:#ff986f;--icon-c:#ffe083;}
.actionSvg-guide{--icon-a:#3b4f8a;--icon-b:#8d98ff;--icon-c:#7de2d1;}
.actionSvg-trash{--icon-a:#7a2a35;--icon-b:#f66f82;--icon-c:#ffc0a6;}
.actionSvg-collection{--icon-a:#20544d;--icon-b:#61c59a;--icon-c:#ffd766;}
.actionSvg-bookmark{--icon-a:#245247;--icon-b:#57bc91;--icon-c:#d8f78b;}
.actionSvg-rewrite{--icon-a:#285f86;--icon-b:#66c9e8;--icon-c:#f4a6c7;}
.actionSvg-essay{--icon-a:#2d3b79;--icon-b:#7585df;--icon-c:#74e0c0;}
.actionSvg-note{--icon-a:#73501f;--icon-b:#f4ba49;--icon-c:#fff1a6;}
.actionSvg-quiz{--icon-a:#205f73;--icon-b:#56c7dc;--icon-c:#a1f0ff;}
.actionSvg-quote{--icon-a:#5b417a;--icon-b:#b58bea;--icon-c:#ffd0e7;}
.actionSvg-pulse{--icon-a:#28435f;--icon-b:#57b7d8;--icon-c:#ff85a3;}
.actionSvg-reviewLoop{--icon-a:#1f5d5c;--icon-b:#5ed1cb;--icon-c:#ffe171;}
.actionSvg-archive{--icon-a:#4a477c;--icon-b:#9b91e8;--icon-c:#b8f0df;}
.actionSvg-sliders{--icon-a:#285060;--icon-b:#5fb4d6;--icon-c:#d6f48b;}
.actionSvg-sound{--icon-a:#275e40;--icon-b:#6dcd82;--icon-c:#f7dd68;}
.actionSvg-wave{--icon-a:#68466d;--icon-b:#d177cc;--icon-c:#7fe5f0;}

.iconRow{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
}

.iconRow .actionSvg{
  width:38px;
  height:38px;
  padding:8px;
  border-radius:13px;
  color:#fff;
  stroke:#fff;
  background:linear-gradient(145deg,var(--icon-a),var(--icon-b) 62%,var(--icon-c));
  box-shadow:0 10px 22px rgba(74,172,190,.14);
}

.relatedGrid button{
  display:block;
  text-align:left;
}

.reviewBoxHead{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
}

.reviewBoxHead b{
  margin:0;
}

.mineOverview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.mineOverview div{
  padding:12px 6px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.78);
}

.mineOverview b,
.mineOverview small{
  display:block;
}

.mineOverview b{
  font-size:22px;
  line-height:1;
}

.mineOverview small{
  margin-top:6px;
  color:#61737c;
  font-size:11px;
  font-weight:900;
}

.minePanel{
  display:grid;
  gap:12px;
}

.minePanelHead{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
}

.minePanelHead .actionSvg{
  width:42px;
  height:42px;
  padding:9px;
  border-radius:15px;
  stroke:#fff;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.58),transparent 32%),
    linear-gradient(145deg,var(--icon-a),var(--icon-b) 62%,var(--icon-c));
  box-shadow:0 12px 24px rgba(74,172,190,.16);
}

.minePanelHead h3,
.minePanelHead p{
  margin:0;
}

.minePanelHead h3{
  font-size:18px;
}

.minePanelHead p{
  margin-top:4px;
  color:#61737c;
  font-size:12px;
  line-height:1.45;
}

.mineTileGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mineTile{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:9px;
  align-items:center;
  min-height:64px;
  padding:10px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:18px;
  background:rgba(255,255,255,.66);
  color:#17313b;
  text-align:left;
  box-shadow:0 10px 22px rgba(31,50,57,.08);
}

.mineTile.primary{
  color:#fff;
  background:linear-gradient(145deg,#17313b,#4aacbe 62%,#ff9b7d);
}

.mineTile .actionSvg{
  width:36px;
  height:36px;
  padding:8px;
  border-radius:14px;
  color:#fff;
  stroke:#fff;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.56),transparent 32%),
    linear-gradient(145deg,var(--icon-a),var(--icon-b) 62%,var(--icon-c));
  box-shadow:0 10px 18px rgba(31,50,57,.1);
}

.mineTile.primary .actionSvg{
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.66),transparent 32%),
    linear-gradient(145deg,var(--icon-a),var(--icon-b) 62%,var(--icon-c));
  border:1px solid rgba(255,255,255,.3);
}

.mineTile b,
.mineTile small{
  display:block;
}

.mineTile b{
  font-size:13px;
}

.mineTile small{
  margin-top:3px;
  color:inherit;
  opacity:.72;
  font-size:10px;
  font-weight:900;
}

.mineSubBlock{
  display:grid;
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(74,172,190,.12);
}

.mineSubBlock h4{
  margin:0;
  color:#17313b;
  font-size:14px;
}

@media(max-width:380px){
  .mineOverview{
    grid-template-columns:repeat(2,1fr);
  }

  .mineTileGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:380px){
  .pickGrid{
    grid-template-columns:1fr;
  }
}

.homeSetup{
  margin:0 0 14px;
  padding:20px;
  border-radius:24px;
  color:#17313b;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.5)),linear-gradient(135deg,rgba(74,172,190,.16),rgba(255,151,126,.16));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 42px rgba(31,50,57,.12),inset 0 1px 0 rgba(255,255,255,.88);
}

.homeSetup h2{
  margin:8px 0;
  font-size:26px;
  line-height:1.12;
}

.homeSetup p{
  margin:0 0 14px;
  color:#55707a;
  line-height:1.6;
}

.setupGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.setupGrid button,
.paceOptions button{
  text-align:left;
}

.setupGrid button{
  min-height:108px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  padding:13px;
  color:#1e3944;
  box-shadow:0 10px 24px rgba(31,50,57,.08);
}

.setupGrid b,
.paceOptions b{
  display:block;
  margin-bottom:5px;
}

.setupGrid small,
.paceOptions small{
  display:block;
  color:#61737c;
  font-size:11px;
  line-height:1.45;
  font-weight:700;
}

.studyHero{
  background:linear-gradient(135deg,#17313b,#4aacbe 58%,#ff9b7d) !important;
  box-shadow:0 22px 50px rgba(74,172,190,.22),inset 0 1px 0 rgba(255,255,255,.28);
}

.paceCard,.todayTask,.weekCard,.chapterMap{
  background:rgba(255,255,255,.68) !important;
}

.paceOptions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.paceOptions.pPace{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.paceOptions button{
  border-radius:14px;
  min-height:78px;
  padding:10px;
}

.paceOptions.pPace button{
  min-height:auto;
  text-align:center;
}

.todayTask h4{
  margin:8px 0 10px;
  font-size:20px;
  line-height:1.25;
  color:#1e3944;
}

.taskStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.taskStats div{
  padding:11px;
  border-radius:14px;
  text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.72);
}

.taskStats b{
  display:block;
  color:#17313b;
  font-size:22px;
}

.taskStats small{
  color:#61737c;
  font-size:11px;
  font-weight:900;
}

.weekStrip{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  margin-top:12px;
}

.weekStrip button{
  min-height:62px;
  border:1px solid rgba(74,172,190,.16);
  border-radius:14px;
  background:rgba(255,255,255,.62);
  color:#31505a;
  font-weight:900;
}

.weekStrip button.done{
  color:#17313b;
  background:linear-gradient(135deg,rgba(247,211,111,.5),rgba(119,210,223,.32));
}

.weekStrip button.today{
  color:#fff;
  background:linear-gradient(135deg,#17313b,#4aacbe);
}

.weekStrip b,.weekStrip small{
  display:block;
}

.weekStrip small{
  margin-top:4px;
  font-size:10px;
  opacity:.76;
}

.chapterMap button{
  width:100%;
  display:grid;
  grid-template-columns:82px 1fr;
  align-items:center;
  gap:10px;
  margin:8px 0 0;
  padding:9px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:14px;
  background:rgba(255,255,255,.62);
  color:#31505a;
  text-align:left;
}

.chapterMap b,.chapterMap small{
  display:block;
}

.chapterMap small{
  color:#61737c;
  font-size:11px;
  font-weight:800;
}

.chapterMap i{
  height:10px;
  border-radius:999px;
  background:rgba(74,172,190,.12);
  overflow:hidden;
}

.chapterMap em{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4aacbe,#ff9b7d,#f7d36f);
}

.cleanReader{
  position:absolute;
  inset:0;
  z-index:160;
  display:none;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 8%,rgba(119,210,223,.24),transparent 34%),
    linear-gradient(180deg,#f7fbfb,#eef7f6 52%,#fff7ee);
  color:#17313b;
}

.cleanReader.show{
  display:grid;
}

.readerTop{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:8px;
  padding:13px 14px 10px;
  border-bottom:1px solid rgba(74,172,190,.12);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(24px) saturate(1.2);
}

.readerTop button,
.readerControls button{
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#17313b;
  font-weight:900;
  box-shadow:0 8px 20px rgba(31,50,57,.08);
}

.readerTop button{
  width:42px;
  height:42px;
  font-size:18px;
}

.readerTop b,
.readerTop small{
  display:block;
}

.readerTop b{
  font-size:15px;
  line-height:1.25;
}

.readerTop small{
  margin-top:3px;
  color:#61737c;
  font-size:11px;
  font-weight:800;
}

.readerMain{
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:152px 1fr;
  transition:grid-template-columns .22s ease;
}

.cleanReader.navClosed .readerMain{
  grid-template-columns:28px 1fr;
}

.readerNav{
  position:relative;
  min-width:0;
  border-right:1px solid rgba(74,172,190,.12);
  background:rgba(255,255,255,.54);
  backdrop-filter:blur(22px) saturate(1.18);
  overflow:hidden;
}

.readerNavToggle{
  position:absolute;
  top:12px;
  right:8px;
  z-index:2;
  min-width:34px;
  height:30px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#31505a;
  font-weight:900;
  box-shadow:0 8px 18px rgba(31,50,57,.08);
}

.readerNav.collapsed .readerNavToggle{
  right:3px;
  top:50%;
  width:22px;
  min-width:22px;
  height:64px;
  padding:0;
  writing-mode:vertical-rl;
  font-size:11px;
}

.readerNavInner{
  height:100%;
  overflow:auto;
  padding:54px 10px 112px;
  transition:opacity .16s ease,transform .2s ease;
}

.readerNav.collapsed .readerNavInner{
  opacity:0;
  pointer-events:none;
  transform:translateX(-18px);
}

.readerNavHead{
  margin-bottom:10px;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(74,172,190,.14),rgba(255,151,126,.12));
  border:1px solid rgba(255,255,255,.62);
}

.readerNavHead b,
.readerNavHead small{
  display:block;
}

.readerNavHead b{
  font-size:13px;
}

.readerNavHead small{
  margin-top:4px;
  color:#61737c;
  font-size:10px;
  line-height:1.35;
  font-weight:800;
}

.readerNav section{
  margin-bottom:8px;
}

.readerChapterBtn,
.readerItemList button{
  width:100%;
  border:1px solid rgba(255,255,255,.68);
  background:rgba(255,255,255,.52);
  color:#31505a;
  border-radius:13px;
  text-align:left;
}

.readerChapterBtn{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:7px;
  padding:8px;
}

.readerChapterBtn span{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#17313b,#4aacbe);
  font-size:10px;
  font-weight:900;
}

.readerChapterBtn b{
  font-size:11px;
  line-height:1.25;
}

.readerChapterBtn small{
  color:#61737c;
  font-size:10px;
  font-weight:800;
}

.readerNav section.current .readerChapterBtn{
  border-color:rgba(74,172,190,.32);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(119,210,223,.18));
}

.readerItemList{
  margin-top:6px;
  display:grid;
  gap:5px;
}

.readerItemList button{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:6px;
  align-items:center;
  padding:7px;
}

.readerItemList em{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:rgba(74,172,190,.12);
  font-style:normal;
  font-size:10px;
  font-weight:900;
}

.readerItemList span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:800;
}

.readerItemList button.active{
  color:#fff;
  background:linear-gradient(135deg,#17313b,#4aacbe 64%,#ff9b7d);
}

.readerItemList button.active em{
  color:#17313b;
  background:rgba(255,255,255,.8);
}

.readerArticle{
  overflow:auto;
  padding:20px 22px 110px;
  font-size:var(--reader-font);
  line-height:2.08;
  letter-spacing:0;
  min-width:0;
}

.readerArticle p{
  margin:0 0 1.1em;
}

.readerArticle mark,
.readerArticle .hl-yellow,
.readerArticle .hl-pink,
.readerArticle .hl-green,
.readerArticle .hl-blue,
.readerArticle .hl-purple{
  border-radius:5px;
  padding:1px 3px;
}

.readerArticle .argumentHL{
  color:#17313b;
  background:linear-gradient(180deg,transparent 55%,rgba(247,211,111,.55) 55%);
}

.readerControls{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  display:grid;
  grid-template-columns:1.2fr .7fr .7fr 1.2fr;
  gap:7px;
  padding:8px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 42px rgba(31,50,57,.14),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.22);
}

.readerControls button{
  min-height:42px;
}

@media(max-width:380px){
  .paceOptions,
  .paceOptions.pPace{
    grid-template-columns:1fr 1fr;
  }

  .setupGrid{
    grid-template-columns:1fr;
  }

  .readerArticle{
    padding-inline:18px;
  }
}

@media(max-width:430px){
  .readerMain{
    grid-template-columns:132px 1fr;
  }

  .cleanReader.navClosed .readerMain{
    grid-template-columns:24px 1fr;
  }

  .readerNavInner{
    padding-inline:7px;
  }

  .readerChapterBtn{
    grid-template-columns:24px 1fr;
    gap:5px;
  }

  .readerChapterBtn span{
    width:24px;
    height:24px;
  }
}

@media(max-width:380px){
  .penDock{
    grid-template-columns:1fr;
    gap:7px;
    top:54px;
  }

  .penMode{
    display:none;
  }

  .penDock .markFeedback{
    max-width:none;
    text-align:center;
  }
}


/* V3.8 fixed mobile tabbar */
@media(max-width:720px){
  html,
  body{
    height:100%;
    overflow:hidden;
  }

  .app,
  .phone{
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
  }

  .screen{
    height:100svh !important;
    max-height:100svh !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:calc(118px + env(safe-area-inset-bottom)) !important;
  }

  .tabbar{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    z-index:90 !important;
    transform:translateZ(0);
    will-change:transform;
  }

  .detail.active ~ .tabbar{
    transform:translate3d(0,18px,0);
  }
}

@supports not (height:100svh){
  @media(max-width:720px){
    .app,
    .phone,
    .screen{
      height:100vh !important;
      min-height:100vh !important;
      max-height:100vh !important;
    }
  }
}