: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;
}

/* V3.12 designed crystal tab icons */
.tab b{
  width:34px !important;
  height:32px !important;
}

.tab b .navCrystal{
  width:30px !important;
  height:30px !important;
  padding:4px;
  border-radius:12px;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.7),transparent 30%),
    linear-gradient(145deg,var(--nav-a),var(--nav-b));
  box-shadow:
    0 8px 16px rgba(31,50,57,.1),
    inset 0 1px 0 rgba(255,255,255,.6);
  color:#fff;
}

.navCrystal-home{--nav-a:#4aacbe;--nav-b:#7bdad2;--nav-ink:#eafffb;--nav-soft:#fff0c8;}
.navCrystal-timeline{--nav-a:#5f8fe8;--nav-b:#63d1d0;--nav-ink:#f8fbff;--nav-soft:#ffe07a;}
.navCrystal-terms{--nav-a:#48aa76;--nav-b:#76d6b9;--nav-ink:#effff6;--nav-soft:#cceef7;}
.navCrystal-questions{--nav-a:#f28d6c;--nav-b:#f6c86d;--nav-ink:#fff6ec;--nav-soft:#d8f0ff;}
.navCrystal-mine{--nav-a:#9a83e8;--nav-b:#eda7c8;--nav-ink:#fff4ff;--nav-soft:#d8fbff;}

.navCrystal svg{
  width:100%;
  height:100%;
}

.navCrystal svg *{
  stroke:none !important;
}

.navCrystal svg .navBlob{
  fill:rgba(255,255,255,.26);
}

.navCrystal svg .navGlyph{
  fill:var(--nav-ink);
}

.navCrystal svg .navAccent{
  fill:var(--nav-soft);
  opacity:.96;
}

.navCrystal svg .navDot{
  fill:var(--nav-soft);
}

.tab.active b .navCrystal{
  width:35px !important;
  height:35px !important;
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 14px 26px color-mix(in srgb,var(--nav-a) 34%,transparent),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.tab.active b .navCrystal svg .navGlyph{
  fill:#fff;
}

/* V3.13 material return + clearer timeline icon */
.topbar{
  justify-content:flex-start !important;
  align-items:center;
}

.topbar .closeBtn{
  margin-left:auto;
}

.detailBackBtn{
  display:none !important;
}

.detailBackBtn.show{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:42px;
  color:#17313b;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(119,210,223,.24)) !important;
  border-color:rgba(74,172,190,.28) !important;
  box-shadow:0 10px 22px rgba(31,50,57,.1), inset 0 1px 0 rgba(255,255,255,.78);
}

.navCrystal-timeline .navAccent{
  opacity:.78 !important;
}

.navCrystal-timeline .navGlyph{
  filter:drop-shadow(0 1px 0 rgba(18,38,49,.08));
}

.tab.active b .navCrystal-timeline{
  background:
    radial-gradient(circle at 28% 16%,rgba(255,255,255,.82),transparent 31%),
    linear-gradient(145deg,#427fe0,#63d1d0 72%) !important;
}

/* V3.14 hierarchy map for timeline and terms */
.hierarchyWrap{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.hierBlock,
.termHierBlock{
  border:1px solid rgba(74,172,190,.18);
  border-radius:24px;
  padding:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(236,250,252,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}

.hierBlock.compact{
  padding:11px;
  border-radius:22px;
  background:rgba(255,255,255,.46);
}

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

.hierHead>span{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:1000;
  font-size:12px;
  background:linear-gradient(145deg,#17313b,#4aacbe 70%);
  box-shadow:0 8px 18px rgba(74,172,190,.18);
}

.hierHead h3{
  margin:0;
  font-size:16px;
  line-height:1.25;
}

.hierHead p{
  margin:4px 0 0;
  color:#61747d;
  font-size:12px;
  line-height:1.45;
}

.hierHead>b{
  border-radius:999px;
  padding:5px 8px;
  background:rgba(255,255,255,.72);
  color:#31505a;
  font-size:11px;
}

.hierGroups{
  display:grid;
  gap:9px;
}

.hierGroup{
  position:relative;
  padding-left:16px;
}

.hierGroup:before{
  content:"";
  position:absolute;
  left:4px;
  top:10px;
  bottom:8px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#4aacbe,#f7d36f,#ff9b7d);
  opacity:.55;
}

.hierGroup h4,
.termGroupRail h4{
  margin:0 0 7px;
  font-size:13px;
  color:#17313b;
  display:flex;
  align-items:center;
  gap:7px;
}

.hierGroup h4 small,
.termGroupRail h4 small{
  min-width:21px;
  height:21px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:rgba(74,172,190,.13);
  color:#42727b;
  font-size:11px;
}

.hierTerm{
  width:100%;
  border:1px solid rgba(74,172,190,.15);
  background:rgba(255,255,255,.66);
  border-radius:16px;
  padding:10px;
  margin:6px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  text-align:left;
  box-shadow:0 8px 18px rgba(31,50,57,.06);
}

.hierTerm b{
  display:block;
  color:#17313b;
  font-size:14px;
  line-height:1.3;
}

.hierTerm small{
  display:block;
  margin-top:4px;
  color:#6b7c83;
  font-size:11px;
  line-height:1.35;
}

.hierTerm em{
  flex:none;
  max-width:70px;
  border-radius:999px;
  padding:4px 7px;
  background:rgba(247,211,111,.26);
  color:#715820;
  font-style:normal;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chapterHierarchy{
  margin:14px 0;
}

.chapterHierarchyHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:5px 4px 2px;
  color:#17313b;
}

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

.chapterHierarchyHead small{
  color:#6b7c83;
  font-size:12px;
}

.termHierBlock{
  margin:10px 0;
}

.termGroupRail{
  margin-top:12px;
  padding-left:12px;
  border-left:2px solid rgba(74,172,190,.24);
}

.termGroupCards{
  display:grid;
  gap:10px;
}

.termPath{
  margin:5px 0 8px;
  color:#4b7780;
  font-size:12px;
  font-weight:900;
  line-height:1.45;
}

.termKeywords{
  margin:7px 0 10px;
}

.termKeywords .pill{
  margin-top:3px;
  background:rgba(74,172,190,.1);
  border-color:rgba(74,172,190,.16);
  color:#315966;
}

.detailMainTitle + .termKeywords{
  margin-top:-2px;
  margin-bottom:14px;
}

.termGroupCards .termCard{
  margin:0;
}

/* V3.15 J plan builder + P mixed task */
.batchPlanBox h3{
  margin-top:0;
}

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

.batchGrid label{
  display:grid;
  gap:6px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(74,172,190,.14);
}

.batchGrid span{
  color:#526a72;
  font-size:12px;
  font-weight:900;
}

.batchGrid input{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(74,172,190,.24);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.82);
  font-size:16px;
  font-weight:900;
  color:#17313b;
  outline:none;
}

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

.batchPlanPreview div{
  border-radius:16px;
  padding:10px 8px;
  text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(119,210,223,.16));
  border:1px solid rgba(74,172,190,.14);
}

.batchPlanPreview b{
  display:block;
  color:#17313b;
  font-size:16px;
}

.batchPlanPreview small{
  display:block;
  margin-top:4px;
  color:#6a7a80;
  font-size:10px;
}

.batchPlanPreview p{
  grid-column:1/-1;
  margin:2px 0 0;
  color:#526a72;
  font-size:12px;
  line-height:1.65;
}

.pFreeTaskCard{
  background:
    radial-gradient(circle at 16% 10%,rgba(247,211,111,.24),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.76),rgba(232,250,252,.48)) !important;
}

.pFreeTaskCard .summaryTopicLine{
  margin-top:10px;
}

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

/* V3.16 detail toolbar separation */
.topbar{
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
}

.topbar .detailBackBtn{
  display:none !important;
  margin-right:0 !important;
}

.topbar .detailBackBtn.show{
  display:inline-grid !important;
  place-items:center !important;
  margin-right:auto !important;
  color:#17313b !important;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(119,210,223,.24)) !important;
  border-color:rgba(74,172,190,.3) !important;
}

.topbar .detailBackBtn.show + .iconBtn{
  margin-left:auto !important;
}

.topbar .iconBtn:nth-of-type(2){
  margin-left:auto !important;
}

.topbar .closeBtn{
  margin-left:0 !important;
}

/* V3.17 question filter order */
.questionTypeFirst{
  margin:0 0 10px !important;
}

.questionTypeFirst + .filters{
  margin-bottom:10px !important;
}

/* V3.18 layout style preferences */
.layoutStyleBlock{
  margin-bottom:14px;
}

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

.layoutStyleGrid button{
  position:relative;
  min-height:112px;
  border:1px solid rgba(74,172,190,.18);
  border-radius:18px;
  padding:13px;
  background:rgba(255,255,255,.64);
  text-align:left;
  overflow:hidden;
}

.layoutStyleGrid button b,
.layoutStyleGrid button small{
  position:relative;
  z-index:1;
  display:block;
}

.layoutStyleGrid button b{
  color:#17313b;
  font-size:15px;
}

.layoutStyleGrid button small{
  margin-top:7px;
  color:#63777f;
  font-size:11px;
  line-height:1.5;
}

.layoutStyleGrid button span{
  position:absolute;
  right:12px;
  bottom:12px;
  width:42px;
  height:28px;
  border-radius:10px;
  background:linear-gradient(135deg,#4aacbe,#ff9b7d,#f7d36f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.layoutStyleGrid button:nth-child(2) span{
  background:#f8fafb;
  border:1px solid #21323a;
  box-shadow:none;
}

.layoutStyleGrid button:nth-child(2) span:before,
.layoutStyleGrid button:nth-child(2) span:after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  height:1px;
  background:#21323a;
}

.layoutStyleGrid button:nth-child(2) span:before{top:9px}
.layoutStyleGrid button:nth-child(2) span:after{bottom:9px}

.layoutStyleGrid button.active{
  border-color:#17313b;
  box-shadow:0 0 0 2px rgba(23,49,59,.08);
}

body[data-layout="calm"]{
  --page-a:#1f343d;
  --page-b:#4b5b62;
  --page-c:#738087;
  --page-a-rgb:31,52,61;
  --page-b-rgb:75,91,98;
  --page-c-rgb:115,128,135;
  --bg:#f4f6f7;
  --ink:#17242a;
  --muted:#607078;
  --glass:#ffffff;
  --glass-strong:#ffffff;
  --glass-soft:#f8fafb;
  --shadow:0 8px 22px rgba(28,42,50,.08);
  --shadow-strong:0 12px 34px rgba(28,42,50,.1);
}

body[data-layout="calm"],
body[data-layout="calm"] .app{
  background:#eef2f3 !important;
}

body[data-layout="calm"] .app::before,
body[data-layout="calm"] .app::after,
body[data-layout="calm"] .phone::before,
body[data-layout="calm"] .goal::before,
body[data-layout="calm"] .goal::after,
body[data-layout="calm"] .card::before,
body[data-layout="calm"] .world::before{
  display:none !important;
  animation:none !important;
}

body[data-layout="calm"] .phone{
  background:#f8fafb !important;
  border:1px solid #d7dee2 !important;
  box-shadow:0 18px 42px rgba(28,42,50,.12) !important;
  backdrop-filter:none !important;
}

body[data-layout="calm"] .screen,
body[data-layout="calm"] .detail,
body[data-layout="calm"] .header,
body[data-layout="calm"] .topbar,
body[data-layout="calm"] .tabbar{
  background:#f8fafb !important;
  backdrop-filter:none !important;
}

body[data-layout="calm"] .header,
body[data-layout="calm"] .topbar,
body[data-layout="calm"] .tabbar{
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .card,
body[data-layout="calm"] .termCard,
body[data-layout="calm"] .qCard,
body[data-layout="calm"] .sectionCard,
body[data-layout="calm"] .minePanel,
body[data-layout="calm"] .mineTile,
body[data-layout="calm"] .article,
body[data-layout="calm"] .note,
body[data-layout="calm"] .search,
body[data-layout="calm"] .hierBlock,
body[data-layout="calm"] .termHierBlock,
body[data-layout="calm"] .batchGrid label,
body[data-layout="calm"] .layoutStyleGrid button{
  background:#ffffff !important;
  border:1px solid #d8e0e4 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

body[data-layout="calm"] .goal,
body[data-layout="calm"] .dark,
body[data-layout="calm"] .mineTile.primary,
body[data-layout="calm"] .tab.active,
body[data-layout="calm"] .filters button.active,
body[data-layout="calm"] .quizModeBar button.active,
body[data-layout="calm"] .timelineActions .dark,
body[data-layout="calm"] .darkMini{
  background:#17242a !important;
  color:#fff !important;
  border-color:#17242a !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .plain,
body[data-layout="calm"] .btn,
body[data-layout="calm"] .filters button,
body[data-layout="calm"] .quizModeBar button,
body[data-layout="calm"] .timelineActions button{
  background:#fff !important;
  color:#17242a !important;
  border-color:#cfd8dc !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .progressbar,
body[data-layout="calm"] .reviewStage span{
  background:#dfe6e9 !important;
}

body[data-layout="calm"] .progressbar span,
body[data-layout="calm"] .reviewStage span.on,
body[data-layout="calm"] .weekStrip button.done{
  background:#17242a !important;
}

body[data-layout="calm"] .navCrystal,
body[data-layout="calm"] .crystalIcon,
body[data-layout="calm"] .actionSvg,
body[data-layout="calm"] .homeHeroIcon{
  background:transparent !important;
  color:#17242a !important;
  box-shadow:none !important;
  filter:none !important;
}

body[data-layout="calm"] .tab.active .navCrystal,
body[data-layout="calm"] .mineTile.primary .actionSvg,
body[data-layout="calm"] .goal .actionSvg,
body[data-layout="calm"] .goal .homeHeroIcon{
  color:#fff !important;
}

body[data-layout="calm"] .navCrystal svg .navBlob,
body[data-layout="calm"] .navCrystal svg .navAccent,
body[data-layout="calm"] .navCrystal svg .navDot{
  fill:transparent !important;
}

body[data-layout="calm"] .navCrystal svg .navGlyph,
body[data-layout="calm"] .actionSvg path,
body[data-layout="calm"] .actionSvg circle,
body[data-layout="calm"] .actionSvg rect{
  fill:currentColor !important;
}

body[data-layout="calm"] .eyebrow:before,
body[data-layout="calm"] .timeline:before,
body[data-layout="calm"] .hierGroup:before{
  background:#17242a !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .hl-yellow,
body[data-layout="calm"] .hl-pink,
body[data-layout="calm"] .hl-green,
body[data-layout="calm"] .hl-blue,
body[data-layout="calm"] .hl-purple{
  background:#edf1f3 !important;
}

body[data-layout="calm"] .toast{
  background:#17242a !important;
  color:#fff !important;
}

body[data-layout="calm"] .termImageCard,
body[data-layout="calm"] .generatedImage{
  filter:grayscale(.15) saturate(.8);
}

/* V3.19 flatter calm style: no gradient blocks */
body[data-layout="calm"] *{
  background-image:none !important;
}

body[data-layout="calm"]{
  --page-a:#40515a;
  --page-b:#6e7b82;
  --page-c:#aab4b9;
  --page-a-rgb:64,81,90;
  --page-b-rgb:110,123,130;
  --page-c-rgb:170,180,185;
}

body[data-layout="calm"] .app,
body[data-layout="calm"] .phone,
body[data-layout="calm"] .screen,
body[data-layout="calm"] .detail{
  background-color:#f3f6f7 !important;
}

body[data-layout="calm"] .header,
body[data-layout="calm"] .topbar,
body[data-layout="calm"] .tabbar,
body[data-layout="calm"] .card,
body[data-layout="calm"] .termCard,
body[data-layout="calm"] .qCard,
body[data-layout="calm"] .sectionCard,
body[data-layout="calm"] .minePanel,
body[data-layout="calm"] .article,
body[data-layout="calm"] .note,
body[data-layout="calm"] .search,
body[data-layout="calm"] .layoutStyleGrid button,
body[data-layout="calm"] .termImageCard figcaption{
  background-color:#fbfcfc !important;
}

body[data-layout="calm"] .goal,
body[data-layout="calm"] .mineTile,
body[data-layout="calm"] .world,
body[data-layout="calm"] .hierBlock,
body[data-layout="calm"] .termHierBlock,
body[data-layout="calm"] .batchGrid label,
body[data-layout="calm"] .batchPlanPreview div,
body[data-layout="calm"] .reviewBox,
body[data-layout="calm"] .choiceOpt,
body[data-layout="calm"] .weekStrip button,
body[data-layout="calm"] .layoutStyleGrid button span{
  background-color:#eef3f5 !important;
  color:#17242a !important;
  border-color:#d4dde1 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .dark,
body[data-layout="calm"] .plain,
body[data-layout="calm"] .btn,
body[data-layout="calm"] .darkMini,
body[data-layout="calm"] .filters button,
body[data-layout="calm"] .quizModeBar button,
body[data-layout="calm"] .timelineActions button,
body[data-layout="calm"] .mineTile.primary,
body[data-layout="calm"] .tab,
body[data-layout="calm"] .tab.active{
  background-color:#f7f9fa !important;
  color:#17242a !important;
  border:1px solid #cfd8dc !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .dark,
body[data-layout="calm"] .darkMini,
body[data-layout="calm"] .filters button.active,
body[data-layout="calm"] .quizModeBar button.active,
body[data-layout="calm"] .timelineActions .dark,
body[data-layout="calm"] .tab.active,
body[data-layout="calm"] .layoutStyleGrid button.active{
  background-color:#e2e9ec !important;
  color:#142229 !important;
  border-color:#7f8f97 !important;
}

body[data-layout="calm"] .goal h2,
body[data-layout="calm"] .goal small,
body[data-layout="calm"] .goal p,
body[data-layout="calm"] .goal .homeHeroIcon,
body[data-layout="calm"] .goal .actionSvg,
body[data-layout="calm"] .mineTile.primary .actionSvg,
body[data-layout="calm"] .tab.active .navCrystal{
  color:#17242a !important;
}

body[data-layout="calm"] .layoutStyleGrid button span{
  border:1px solid #bfcbd0 !important;
}

body[data-layout="calm"] .layoutStyleGrid button span:before,
body[data-layout="calm"] .layoutStyleGrid button span:after{
  background:#7c8a91 !important;
}

body[data-layout="calm"] .progressbar span,
body[data-layout="calm"] .reviewStage span.on,
body[data-layout="calm"] .weekStrip button.done,
body[data-layout="calm"] .eyebrow:before,
body[data-layout="calm"] .timeline:before,
body[data-layout="calm"] .hierGroup:before{
  background-color:#9aa7ad !important;
}

body[data-layout="calm"] .toast{
  background-color:#eef3f5 !important;
  color:#17242a !important;
  border:1px solid #bfcbd0 !important;
}

body[data-layout="calm"] .tabbar .tab.active,
body[data-layout="calm"] .tabbar .tab.active b{
  background:#e2e9ec !important;
  color:#142229 !important;
  border-color:#7f8f97 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .cleanReader{
  background:#f6f8f9 !important;
  color:#17242a !important;
}

body[data-layout="calm"] .readerTop,
body[data-layout="calm"] .readerSpeech,
body[data-layout="calm"] .readerMain,
body[data-layout="calm"] .readerNav,
body[data-layout="calm"] .readerArticle,
body[data-layout="calm"] .readerControls{
  background:#fbfcfc !important;
  background-color:#fbfcfc !important;
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-layout="calm"] .readerArticle{
  color:#17242a !important;
}

body[data-layout="calm"] .readerNavHead,
body[data-layout="calm"] .readerChapterBtn,
body[data-layout="calm"] .readerItemList button,
body[data-layout="calm"] .readerTop button,
body[data-layout="calm"] .readerControls button,
body[data-layout="calm"] .readerNavToggle,
body[data-layout="calm"] .readerSpeech button,
body[data-layout="calm"] .readerSpeech select{
  background:#f3f6f7 !important;
  background-color:#f3f6f7 !important;
  color:#17242a !important;
  border-color:#cfd8dc !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-layout="calm"] .readerItemList button.active{
  background:#e2e9ec !important;
  background-color:#e2e9ec !important;
  color:#142229 !important;
  border-color:#7f8f97 !important;
}

/* V3.20 step-by-step onboarding tour */
.guideOverlay.tourGuide{
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  background:rgba(10,20,26,.42);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate;
  pointer-events:none;
}

.guideOverlay.tourGuide.hasSpot{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.guideShade{
  display:none;
}

.guideOverlay.tourGuide.hasSpot .guideShade{
  display:block;
  position:absolute;
  z-index:0;
  background:rgba(10,20,26,.58);
  pointer-events:none;
}

.guideOverlay.tourGuide.hasSpot .guideShadeTop{
  left:0;
  top:0;
  right:0;
  height:max(0px,var(--spot-y));
}

.guideOverlay.tourGuide.hasSpot .guideShadeRight{
  left:calc(var(--spot-x) + var(--spot-w));
  top:var(--spot-y);
  right:0;
  height:var(--spot-h);
}

.guideOverlay.tourGuide.hasSpot .guideShadeBottom{
  left:0;
  top:calc(var(--spot-y) + var(--spot-h));
  right:0;
  bottom:0;
}

.guideOverlay.tourGuide.hasSpot .guideShadeLeft{
  left:0;
  top:var(--spot-y);
  width:max(0px,var(--spot-x));
  height:var(--spot-h);
}

.guideSpot{
  display:none;
}

.guideOverlay.tourGuide.hasSpot .guideSpot{
  display:block;
  position:absolute;
  z-index:1;
  left:var(--spot-x);
  top:var(--spot-y);
  width:var(--spot-w);
  height:var(--spot-h);
  border:2px solid rgba(255,255,255,.96);
  border-radius:22px;
  background:transparent !important;
  box-shadow:
    0 0 0 6px rgba(74,172,190,.18),
    0 0 24px rgba(255,255,255,.7),
    0 0 34px rgba(74,172,190,.38);
  pointer-events:none;
}

.guideOverlay.tourGuide.hasSpot .guideSpot:before,
.guideOverlay.tourGuide.hasSpot .guideSpot:after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.guideOverlay.tourGuide.hasSpot .guideSpot:before{
  inset:-7px;
  border-radius:27px;
  border:1px solid rgba(255,255,255,.62);
}

.guideOverlay.tourGuide.hasSpot .guideSpot:after{
  left:18px;
  right:18px;
  top:-2px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 0 16px rgba(255,255,255,.62);
}

.guideCard.tourCard{
  position:relative;
  z-index:2;
  max-width:none;
  border-radius:24px;
  padding:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 24px 70px rgba(18,32,41,.22),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(1.2);
  pointer-events:auto;
}

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

.guideProgress span{
  color:#526b74;
  font-size:12px;
  font-weight:900;
}

.guideProgress i{
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(74,172,190,.14);
}

.guideProgress em{
  display:block;
  height:100%;
  border-radius:999px;
  background:#4aacbe;
}

.guideCard.tourCard h2{
  margin:0;
  color:#142631;
  font-size:22px;
  line-height:1.25;
}

.guideCard.tourCard p{
  margin:9px 0 12px;
  color:#526b74;
  font-size:13px;
  line-height:1.75;
}

.guideTask{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:16px;
  color:#17313b;
  font-size:13px;
  line-height:1.65;
  font-weight:900;
  background:rgba(74,172,190,.12);
  border:1px solid rgba(74,172,190,.22);
}

.guideStepDots{
  display:flex;
  gap:6px;
  margin:6px 0 12px;
}

.guideStepDots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(74,172,190,.22);
}

.guideStepDots button.active{
  width:24px;
  background:#4aacbe;
}

.guideActions{
  justify-content:flex-end;
}

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

.guideActions .guideTryBtn{
  color:#17313b;
  border-color:rgba(74,172,190,.32) !important;
  background:rgba(232,250,252,.82) !important;
}

.mineGuideMini{
  margin:8px 0 10px auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(74,172,190,.18);
  background:rgba(255,255,255,.68);
  color:#17313b;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(31,50,57,.06);
}

.mineGuideMini .actionSvg{
  width:17px;
  height:17px;
}

.mineSubNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 10px;
}

.mineSubNav .mineGuideMini{
  margin:0;
}

body[data-layout="calm"] .guideCard.tourCard,
body[data-layout="calm"] .mineGuideMini{
  background:#fbfcfc !important;
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

body[data-layout="calm"] .guideProgress em,
body[data-layout="calm"] .guideStepDots button.active{
  background:#9aa7ad !important;
}

.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;
}

.mineSectionGrid{
  display:grid;
  gap:10px;
}

.minePanelEntry{
  width:100%;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.minePanelEntry:active{
  transform:scale(.985);
}

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

.minePanelEntry .arrow{
  color:#4d717b;
  font-size:24px;
  font-weight:900;
}

.minePanelMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-left:52px;
}

.minePanelMeta span{
  padding:5px 9px;
  border-radius:999px;
  background:rgba(74,172,190,.1);
  color:#335d66;
  font-size:11px;
  font-weight:900;
}

.mineBack{
  width:fit-content;
  min-height:36px;
  margin:0 0 10px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(74,172,190,.2);
  background:rgba(255,255,255,.72);
  color:#17313b;
  font-weight:900;
}

.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;
}

.homeHeroIcon{
  position:absolute;
  right:18px;
  top:18px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px rgba(0,0,0,.12);
}

.homeHeroIcon .actionSvg{
  width:34px;
  height:34px;
  stroke:#fff;
}

.iconTitle{
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.iconTitle .actionSvg{
  width:38px;
  height:38px;
  padding:8px;
  border-radius:14px;
  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 10px 18px rgba(31,50,57,.1);
}

.readerSpeech{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  border-bottom:1px solid rgba(74,172,190,.12);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
}

.readerSpeech button,
.miniListen{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(74,172,190,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(232,250,252,.78));
  color:#17313b;
  font-size:12px;
  font-weight:900;
}

.readerSpeech button:first-child,
.miniListen{
  color:#fff;
  border-color:rgba(255,255,255,.38);
  background:linear-gradient(145deg,#1f5661,#5abccb 62%,#ffae86);
  box-shadow:0 10px 20px rgba(74,172,190,.16);
}

.readerSpeech select{
  min-width:0;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(74,172,190,.18);
  padding:0 10px;
  background:rgba(255,255,255,.78);
  color:#17313b;
  font-size:12px;
  font-weight:800;
}

.readerSpeech label{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  color:#61737c;
  font-size:11px;
  font-weight:900;
}

.readerSpeech input[type="range"]{
  width:76px;
  accent-color:#4aacbe;
}

.miniListen{
  min-height:30px;
  padding:0 10px;
}

.studySummaryCard{
  display:grid;
  gap:10px;
}

.compactSummary{
  grid-template-columns:repeat(3,1fr);
}

.studySummaryCard p{
  margin:0;
  color:#52636c;
  font-size:13px;
  line-height:1.55;
}

.summaryTopicLine{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.summaryTopicLine span{
  max-width:100%;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(74,172,190,.1);
  color:#315a63;
  font-size:11px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

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

.materialGroup{
  display:grid;
  gap:8px;
}

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

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

.materialChips button,
.quoteMaterial{
  min-height:52px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(74,172,190,.16);
  background:rgba(255,255,255,.7);
  color:#17313b;
  text-align:left;
}

.materialChips b,
.materialChips small,
.quoteMaterial b,
.quoteMaterial small{
  display:block;
}

.materialChips small,
.quoteMaterial small{
  margin-top:4px;
  color:#61737c;
  font-size:11px;
  line-height:1.35;
}

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

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

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

  .readerSpeech select,
  .readerSpeech label,
  .readerSpeech button:last-child{
    grid-column:span 2;
  }

  .materialChips{
    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;
    }
  }
}

/* V3.22 updated term text readability */
.article{
  text-indent:2em;
}

.readerArticle,
.readerArticle p{
  text-indent:2em;
}

/* V3.23 calm mode reward overlay clarity */
body[data-layout="calm"] .badgeReward.show{
  background:rgba(238,243,245,.94) !important;
}

body[data-layout="calm"] .rewardBurst{
  opacity:.22 !important;
  filter:none !important;
  background:#dfe7ea !important;
}

body[data-layout="calm"] .rewardCard{
  background:#fbfcfc !important;
  background-color:#fbfcfc !important;
  color:#17242a !important;
  border:1px solid #cfd8dc !important;
  box-shadow:0 24px 58px rgba(28,42,50,.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-layout="calm"] .rewardCard::before{
  border-color:#d8e0e4 !important;
}

body[data-layout="calm"] .rewardLabel,
body[data-layout="calm"] .rewardCard small{
  background:#e2e9ec !important;
  color:#142229 !important;
  border:1px solid #cfd8dc !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .rewardCard p{
  color:#52636b !important;
}

/* V3.24 cleaner term keywords and title stars */
.termCard h3,
.detailMainTitle,
.hierTerm b,
.rowTermTitle{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.termTitleText{
  min-width:0;
}

.termEnglishName{
  margin:-3px 0 8px;
  font-size:11px;
  line-height:1.35;
  color:rgba(49,80,90,.56);
  font-weight:800;
  letter-spacing:0;
}

.row .termEnglishName{
  margin:2px 0 0;
  font-size:10px;
  color:rgba(91,109,116,.58);
}

.detailMainTitle + .termEnglishName{
  margin-top:-5px;
  margin-bottom:10px;
  font-size:12px;
  color:rgba(49,80,90,.58);
}

.termStars{
  display:inline-flex;
  align-items:center;
  gap:1px;
  padding:3px 7px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  letter-spacing:0;
  vertical-align:middle;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,247,224,.74));
  border:1px solid rgba(255,197,92,.38);
  box-shadow:0 6px 14px rgba(255,170,70,.18), inset 0 1px 0 rgba(255,255,255,.86);
  white-space:nowrap;
}

.termStars i,
.termStars em{
  font-style:normal;
  letter-spacing:0;
}

.termStars i{
  color:#f4a62a;
  text-shadow:0 1px 5px rgba(255,181,67,.35);
}

.termStars em{
  color:rgba(153,132,94,.34);
}

.hierTerm .termStars,
.rowTermTitle .termStars{
  padding:2px 5px;
  font-size:10px;
}

.detailMainTitle .termStars{
  transform:translateY(-1px);
}

body[data-layout="calm"] .termStars{
  background:#f4f7f8 !important;
  border-color:#d6dee2 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .termStars i{
  color:#5e747d !important;
  text-shadow:none !important;
}

body[data-layout="calm"] .termStars em{
  color:#b8c4c9 !important;
}

body[data-layout="calm"] .termEnglishName{
  color:#7f8f97 !important;
}

/* V3.25 calm layout opaque safety net */
body[data-layout="calm"]{
  --paper:#fbfcfc !important;
  --paperEdge:#d8e0e4 !important;
  --glass:#fbfcfc !important;
  --glass-strong:#ffffff !important;
  --glass-soft:#f4f7f8 !important;
  --line:#d8e0e4 !important;
  --soft:none !important;
  --shadow:none !important;
  --shadow-strong:none !important;
}

body[data-layout="calm"] *,
body[data-layout="calm"] *::before,
body[data-layout="calm"] *::after{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-layout="calm"] .app,
body[data-layout="calm"] .phone,
body[data-layout="calm"] .screen,
body[data-layout="calm"] .detail,
body[data-layout="calm"] .cleanReader{
  background:#f3f6f7 !important;
  background-color:#f3f6f7 !important;
}

body[data-layout="calm"] :where(
  .header,
  .topbar,
  .tabbar,
  .card,
  .termCard,
  .qCard,
  .sectionCard,
  .minePanel,
  .mineTile,
  .mineSubBlock,
  .mineSubNav,
  .minePanelHead,
  .layoutStyleBlock,
  .layoutStyleGrid button,
  .article,
  .readerArticle,
  .readerTop,
  .readerMain,
  .readerNav,
  .readerNavInner,
  .readerNavHead,
  .readerControls,
  .readerSpeech,
  .readerChapterBtn,
  .readerItemList button,
  .search,
  .note,
  .toolBox,
  .toolSection,
  .studyTools,
  .studyToolPanel,
  .markDock,
  .penDock,
  .reviewBox,
  .reviewQueueMini,
  .reviewRow,
  .reviewPanel,
  .reviewStage,
  .choiceOpt,
  .quizInlineCard,
  .wrongKeepBox,
  .termHierBlock,
  .hierBlock,
  .hierGroup,
  .hierTerm,
  .termGroupRail,
  .chapterHierarchy,
  .chapterHierarchyHead,
  .tl,
  .row,
  .world,
  .worldNode,
  .goal,
  .batchGrid label,
  .batchPlanPreview div,
  .planEditBox,
  .daySession,
  .daySessionShell,
  .daySessionCard,
  .daySessionPanel,
  .dayReview,
  .dayReviewCard,
  .dayReviewPanel,
  .pFreePanel,
  .pFreeCard,
  .ebbinghaus,
  .guideCard,
  .guideTask,
  .guideTryBtn,
  .mineGuideMini,
  .toast,
  .badge,
  .badgeCard,
  .rewardCard,
  .rewardLabel,
  .termImageCard,
  .generatedImage
){
  background:#fbfcfc !important;
  background-color:#fbfcfc !important;
  background-image:none !important;
  color:#17242a !important;
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

body[data-layout="calm"] :where(
  .plain,
  .btn,
  .iconBtn,
  .filters button,
  .quizModeBar button,
  .timelineActions button,
  .readerTop button,
  .readerControls button,
  .readerNavToggle,
  .readerSpeech button,
  .readerSpeech select,
  .mineBack,
  .mineGuideMini,
  .guideActions button,
  .guideTryBtn,
  .weekStrip button,
  .tab
){
  background:#f7f9fa !important;
  background-color:#f7f9fa !important;
  background-image:none !important;
  color:#17242a !important;
  border-color:#cfd8dc !important;
  box-shadow:none !important;
}

body[data-layout="calm"] :where(
  .dark,
  .darkMini,
  .filters button.active,
  .quizModeBar button.active,
  .timelineActions .dark
){
  background:#dfe7ea !important;
  background-color:#dfe7ea !important;
  color:#142229 !important;
  border-color:#9aa7ad !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .tab.active,
body[data-layout="calm"] .readerItemList button.active,
body[data-layout="calm"] .layoutStyleGrid button.active{
  background:#e2e9ec !important;
  background-color:#e2e9ec !important;
  color:#142229 !important;
  border-color:#9aa7ad !important;
}

body[data-layout="calm"] .badgeReward.show,
body[data-layout="calm"] .guideOverlay.tourGuide{
  background:rgba(238,243,245,.96) !important;
}

body[data-layout="calm"] .guideOverlay.tourGuide.hasSpot{
  background:transparent !important;
}

body[data-layout="calm"] .guideOverlay.tourGuide.hasSpot .guideShade{
  background:rgba(238,243,245,.9) !important;
}

body[data-layout="calm"] .guideSpot{
  background:transparent !important;
}

body[data-layout="calm"] .toast{
  z-index:120 !important;
}

body[data-layout="calm"] .badgeReward,
body[data-layout="calm"] .guideOverlay,
body[data-layout="calm"] .cleanReader{
  isolation:isolate;
}

body[data-layout="calm"] .termKeywords .pill{
  background:#eef3f5 !important;
  color:#17242a !important;
  border-color:#d4dde1 !important;
}

/* V3.26 compact term detail arrows */
.detail-body.termDetailBody{
  padding-left:34px;
  padding-right:34px;
}

.termEdgeNav{
  position:sticky;
  top:64px;
  z-index:8;
  height:0;
  pointer-events:none;
}

.termEdgeArrow{
  position:absolute;
  top:30vh;
  width:28px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(74,172,190,.22);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#17313b;
  font-size:30px;
  line-height:1;
  font-weight:700;
  box-shadow:0 12px 26px rgba(31,50,57,.12),inset 0 1px 0 rgba(255,255,255,.82);
  pointer-events:auto;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.termEdgePrev{
  left:-32px;
}

.termEdgeNext{
  right:-32px;
}

.termEdgeArrow:active{
  transform:scale(.94);
}

.termEdgeArrow:disabled{
  opacity:0;
  pointer-events:none;
}

.detail-body > .termImageCard{
  margin-top:14px;
  margin-bottom:14px;
}

body[data-layout="calm"] .termEdgeArrow{
  background:#fbfcfc !important;
  color:#17242a !important;
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
}

@media(max-width:430px){
  .detail-body.termDetailBody{
    padding-left:30px;
    padding-right:30px;
  }
  .termEdgePrev{left:-29px}
  .termEdgeNext{right:-29px}
  .termEdgeArrow{
    top:29vh;
    width:26px;
    height:40px;
    font-size:24px;
  }
}

/* V3.27 calm bottom navigation: flat line-art only */
body[data-layout="calm"] .tabbar,
body[data-layout="calm"] .tabbar *{
  background-image:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  filter:none !important;
}

body[data-layout="calm"] .tabbar{
  background:#fbfcfc !important;
  border-color:#d8e0e4 !important;
}

body[data-layout="calm"] .tabbar .tab,
body[data-layout="calm"] .tabbar .tab.active{
  background:#f7f9fa !important;
  color:#17242a !important;
  border:1px solid transparent !important;
}

body[data-layout="calm"] .tabbar .tab.active{
  background:#e2e9ec !important;
  border-color:#c7d2d7 !important;
  transform:translateY(-2px);
}

body[data-layout="calm"] .tabbar .tab b,
body[data-layout="calm"] .tabbar .tab.active b{
  background:transparent !important;
  color:inherit !important;
  border:0 !important;
}

body[data-layout="calm"] .tabbar .navCrystal,
body[data-layout="calm"] .tabbar .tab.active .navCrystal,
body[data-layout="calm"] .tabbar .tab.active b .navCrystal,
body[data-layout="calm"] .tabbar .tab.active b .navCrystal-timeline{
  background:#eef3f5 !important;
  background-color:#eef3f5 !important;
  background-image:none !important;
  color:#61747d !important;
  border:1px solid #d8e0e4 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] .tabbar .tab.active .navCrystal,
body[data-layout="calm"] .tabbar .tab.active b .navCrystal{
  background:#dfe7ea !important;
  background-color:#dfe7ea !important;
  color:#17242a !important;
}

body[data-layout="calm"] .tabbar .navCrystal svg .navBlob,
body[data-layout="calm"] .tabbar .navCrystal svg .navAccent,
body[data-layout="calm"] .tabbar .navCrystal svg .navDot,
body[data-layout="calm"] .tabbar .navCrystal svg .navGlyph{
  fill:currentColor !important;
  opacity:1 !important;
}

body[data-layout="calm"] .tabbar .navCrystal svg .navBlob,
body[data-layout="calm"] .tabbar .navCrystal svg .navAccent{
  opacity:.18 !important;
}

/* V3.28 focused memorization highlights */
:where(.article,.readerArticle,.daySessionArticle).noSystemHL mark.builtHL{
  background:transparent !important;
  color:inherit !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  padding:0 !important;
}

:where(.article,.readerArticle,.daySessionArticle).hideBuilt :where(mark.builtHL,mark.hl-yellow){
  color:transparent !important;
  background:linear-gradient(90deg,#ddd6c7,#eee8d9) !important;
  border-radius:4px !important;
  border:0 !important;
  user-select:none;
  text-shadow:none !important;
  position:relative;
  min-width:64px;
  max-width:180px;
  overflow:hidden;
  display:inline-block;
  vertical-align:baseline;
}

:where(.article,.readerArticle,.daySessionArticle).hideBuilt :where(mark.builtHL,mark.hl-yellow)::after{
  content:"重点已隐藏";
  color:#8a8172;
  font-size:11px;
  letter-spacing:.08em;
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
}

:where(.article,.readerArticle,.daySessionArticle).hideBuilt :where(mark.builtHL,mark.hl-yellow) *{
  color:transparent !important;
}

body[data-layout="calm"] :where(.article,.readerArticle,.daySessionArticle).hideBuilt :where(mark.builtHL,mark.hl-yellow){
  background:#dfe7ea !important;
}

/* V3.29 Pages asset fallback and guide flow */
.termImageCard.localTermImage.imageFailed{
  display:none;
}

.guideOverlay.cleanReaderStep{
  pointer-events:none;
}

.guideOverlay.cleanReaderStep .guideCard{
  pointer-events:auto;
}

/* V3.30 calm mode contrast and icon legibility */
body[data-layout="calm"] :where(
  .activeBlock,
  .sectionCard.activeBlock,
  .termCard.activeBlock,
  .qCard.activeBlock,
  .quizInlineCard.activeBlock,
  .studyAction.active,
  .homeModeDock button.active,
  .paceOptions button.active,
  .settingRow button.active,
  .settingOptions button.active,
  .pickChip.picked,
  .weekStrip button.done,
  .weekStrip button.today,
  .worldNode.lit,
  .worldNode.newLight,
  .mineTile.primary,
  .readerItemList button.active,
  .layoutStyleGrid button.active,
  .summaryStats button,
  .chapterMap button:active,
  .reviewStage span.on
){
  background:#e6edf0 !important;
  background-color:#e6edf0 !important;
  background-image:none !important;
  color:#142229 !important;
  border-color:#9aa7ad !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

body[data-layout="calm"] :where(
  .activeBlock,
  .sectionCard.activeBlock,
  .termCard.activeBlock,
  .qCard.activeBlock,
  .quizInlineCard.activeBlock,
  .studyAction.active,
  .homeModeDock button.active,
  .paceOptions button.active,
  .settingRow button.active,
  .settingOptions button.active,
  .pickChip.picked,
  .weekStrip button.done,
  .weekStrip button.today,
  .worldNode.lit,
  .mineTile.primary,
  .readerItemList button.active,
  .summaryStats button
) :where(h1,h2,h3,h4,p,b,strong,small,span,em,i,.muted,.tapHint,.termEnglishName){
  color:#142229 !important;
  text-shadow:none !important;
}

body[data-layout="calm"] :where(
  .activeBlock .pill,
  .activeBlock .countPill,
  .activeBlock .termKeywords .pill,
  .pickChip.picked small,
  .worldNode.lit small,
  .weekStrip button.done small,
  .readerItemList button.active em
){
  background:#f7f9fa !important;
  color:#44575f !important;
  border-color:#cfd8dc !important;
  opacity:1 !important;
}

body[data-layout="calm"] :where(
  .actionSvg,
  .homeHeroIcon .actionSvg,
  .iconTitle .actionSvg,
  .mineTile .actionSvg,
  .mineTile.primary .actionSvg,
  .minePanelHead .actionSvg,
  .iconRow .actionSvg,
  .studyAction .actionSvg
){
  color:#17242a !important;
  stroke:#17242a !important;
  background:#eef3f5 !important;
  background-color:#eef3f5 !important;
  background-image:none !important;
  border:1px solid #d8e0e4 !important;
  box-shadow:none !important;
  filter:none !important;
}

body[data-layout="calm"] :where(
  .actionSvg path,
  .actionSvg circle,
  .actionSvg rect,
  .actionSvg line,
  .actionSvg polyline,
  .actionSvg polygon,
  .actionSvg ellipse,
  .crystalIcon svg *,
  .navCrystal svg *
){
  stroke:#17242a !important;
}

body[data-layout="calm"] :where(.crystalIcon,.navCrystal){
  color:#17242a !important;
  background:#eef3f5 !important;
  background-color:#eef3f5 !important;
  background-image:none !important;
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] :where(.navCrystal svg .navBlob,.navCrystal svg .navAccent,.navCrystal svg .navDot,.navCrystal svg .navGlyph){
  fill:#17242a !important;
  stroke:#17242a !important;
  opacity:.82 !important;
}

body[data-layout="calm"] :where(.tab.active .navCrystal,.tab.active b .navCrystal){
  background:#dfe7ea !important;
  color:#142229 !important;
}

body[data-layout="calm"] :where(.feedbackStats div,.taskStats div,.summaryStats div,.mineOverview div,.chapterMap button){
  background:#fbfcfc !important;
  color:#17242a !important;
  border-color:#d8e0e4 !important;
  box-shadow:none !important;
}

body[data-layout="calm"] :where(.feedbackStats b,.taskStats b,.summaryStats b,.mineOverview b,.chapterMap b),
body[data-layout="calm"] :where(.feedbackStats small,.taskStats small,.summaryStats small,.mineOverview small,.chapterMap small){
  color:#17242a !important;
}