/* ============================================================
   背诵吧 · 设计系统
   风格：温暖学习本 —— 米白纸感 + 衬线标题 + 朱砂批注
   ============================================================ */

:root {
  --paper: #FBF7EF;
  --paper-2: #F5EEE0;
  --paper-3: #EFE6D3;
  --card: #FFFDF9;
  --ink: #2A231A;
  --ink-2: #574C3E;
  --ink-3: #7C7263;
  --muted: #8B8172;
  --line: #E8DECA;
  --line-1: #E8DECA;
  --line-2: #D9CBB0;
  --brand: #BC4B32;
  --brand-d: #93351F;
  --brand-l: #F7E4DC;
  --gold: #B9862B;
  --gold-l: #FAF0D8;
  --ok: #3F7A4E;
  --ok-l: #E3EFE4;
  --bad: #C0483C;
  --bad-l: #FAE5E1;
  --blue: #3C6A9C;
  --blue-l: #E4EDF7;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --r: 14px;
  --r-sm: 9px;
  --r-md: 11px;
  --r-lg: 18px;
  --sh: 0 1px 2px rgba(90, 68, 36, .05), 0 10px 26px -14px rgba(90, 68, 36, .18);
  --sh-lg: 0 2px 6px rgba(90, 68, 36, .07), 0 22px 50px -22px rgba(90, 68, 36, .28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 8% -8%, #FFFBF3 0%, rgba(255, 251, 243, 0) 60%),
    radial-gradient(900px 460px at 100% 0%, #F8F0E2 0%, rgba(248, 240, 226, 0) 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.35; text-wrap: pretty; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
em { font-style: normal; }
mark { background: none; color: inherit; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: 62px; display: flex; align-items: center; gap: 20px;
  padding: 0 22px;
  background: rgba(251, 247, 239, .9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand), #A03A24);
  color: #FFF6EE; font-family: var(--serif); font-size: 19px; font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(188, 75, 50, .5);
}
.brand-tt { display: flex; flex-direction: column; font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.brand-tt em { font-family: var(--sans); font-size: 10px; color: var(--muted); letter-spacing: .2px; font-weight: 400; }
.topnav { display: flex; gap: 4px; margin-left: 8px; }
.topnav a {
  position: relative; padding: 7px 13px; border-radius: 999px; font-size: 14px; color: var(--ink-2);
  transition: background .16s, color .16s;
}
.topnav a:hover { background: var(--paper-2); color: var(--ink); }
.dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: none; }
.dot.on { display: block; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.searchbox { position: relative; }
.searchbox input {
  width: 250px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); outline: none;
  transition: border-color .16s, box-shadow .16s, width .2s;
}
.searchbox input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); width: 300px; }
.sres {
  position: absolute; top: 44px; right: 0; width: 400px; max-height: 60vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: 6px; display: none;
}
.sres.on { display: block; }
.sr { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); }
.sr:hover { background: var(--paper-2); }
.sr-u { font-size: 11px; color: var(--brand); }
.sr-t { font-size: 13px; color: var(--ink); }
.sr-none { padding: 14px; color: var(--muted); font-size: 13px; }
.streak { font-size: 13px; color: var(--brand-d); background: var(--brand-l); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.streak:empty { display: none; }

/* ---------------- 布局 ---------------- */
.layout { display: flex; align-items: flex-start; gap: 26px; max-width: 1440px; margin: 0 auto; padding: 22px 22px 118px; }
.side { position: sticky; top: 84px; width: 262px; flex: 0 0 262px; max-height: calc(100vh - 106px); overflow-y: auto; padding-right: 4px; }
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.main { flex: 1 1 auto; min-width: 0; }

.side-h {
  font-family: var(--serif); font-size: 12px; letter-spacing: 2px; color: var(--muted);
  padding: 12px 6px 7px; text-transform: none;
}
.sidelist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.sideitem {
  display: block; padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; transition: all .15s;
}
.sideitem:hover { background: var(--card); border-color: var(--line); }
.sideitem.on { background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }
.si-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.si-name { font-family: var(--serif); font-size: 14px; font-weight: 700; }
.si-v { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.si-v.hot { color: var(--brand); font-weight: 700; }
.si-title { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin: 2px 0 6px; }
.si-bar { display: block; }
.si-nums { display: flex; gap: 8px; margin-top: 6px; }
.si-nums em { font-size: 10.5px; color: var(--muted); background: var(--paper-2); padding: 1px 6px; border-radius: 5px; }
.sidelist-sm .sideitem-sm { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; }

/* ---------------- 通用块 ---------------- */
.blk { margin-top: 30px; }
.blk + .blk { margin-top: 26px; }
.blk-h2 {
  font-size: 18.5px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.blk-h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--brand); display: inline-block; }
.blk-h2 em { font-family: var(--sans); font-size: 12.5px; color: var(--muted); font-weight: 400; }
/* 板块标题下的一句话说明：统一成同一种语气与宽度 */
.blk-note { font-size: 13px; color: var(--muted); line-height: 1.9; margin: -4px 0 15px; max-width: 760px; }
.blk-note b { color: var(--brand-d); font-weight: 600; }
.blk-h { font-size: 15px; margin: 18px 0 10px; color: var(--brand-d); display: flex; align-items: center; gap: 8px; }
.blk-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.note-blk { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; }
.note-p { font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
.note-p b { color: var(--brand-d); }
.danger-blk { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 20px 24px; }
.danger-blk .btn-danger { margin-top: 12px; }
.crumbs { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--brand); }
.crumbs b { color: var(--ink-2); }
.cr-cur { color: var(--brand-d); }

/* ---------------- 首页 hero ---------------- */
.hero {
  display: grid; grid-template-columns: 1fr 292px; gap: 26px; align-items: stretch;
  background: linear-gradient(158deg, #FFFDF8 0%, #FAF3E6 100%);
  border: 1px solid var(--line); border-radius: 22px; padding: 38px 40px;
  box-shadow: var(--sh-lg); position: relative; overflow: hidden;
}
.hero::after {
  content: "毛"; position: absolute; right: -30px; bottom: -70px;
  font-family: var(--serif); font-size: 260px; color: rgba(188, 75, 50, .05); pointer-events: none;
}
.hero-kicker { font-size: 12px; letter-spacing: 2.5px; color: var(--brand); margin-bottom: 10px; }
.hero-t { font-size: 46px; letter-spacing: 3px; line-height: 1.1; }
/* 书名版大标题：全书名很长，字号自适应且允许换行 */
.hero-t-book { font-size: clamp(24px, 3.6vw, 36px); letter-spacing: 1px; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-book-tag {
  font-style: normal; font-size: 13px; letter-spacing: 1px; font-family: var(--sans);
  color: var(--brand-d); background: var(--brand-l); border: 1px solid rgba(188, 75, 50, .25);
  border-radius: 999px; padding: 4px 13px; white-space: nowrap; font-weight: 600;
}
.hero-sub { margin-top: 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.9; max-width: 660px; }
.hero-sub b { color: var(--brand-d); }
.hero-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-nums { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; border-top: 1px dashed var(--line-2); padding-top: 20px; }
.hn { display: flex; flex-direction: column; }
.hn b { font-family: var(--serif); font-size: 27px; color: var(--brand-d); line-height: 1.2; font-variant-numeric: tabular-nums; }
.hn span { font-size: 11.5px; color: var(--muted); }
.hero-side { display: flex; flex-direction: column; gap: 14px; }

/* ---- 带背书架（多书架构：当前书 + 即将上线的新书） ---- */
.shelfgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.shelfcard {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; text-decoration: none; transition: all .17s;
}
a.shelfcard:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-lg); }
.shelfcard.on { border-color: rgba(188, 75, 50, .45); background: linear-gradient(158deg, #FFFDF8 0%, #FAF0E8 100%); }
.shelfcard.soon { border-style: dashed; opacity: .78; }
.sh-badge {
  position: absolute; top: -10px; right: 14px; font-size: 11px; letter-spacing: 1px;
  background: var(--paper-3); color: var(--ink-2); border-radius: 999px; padding: 3px 11px;
}
.sh-now { background: var(--brand); color: #FFF4EE; }
.sh-name { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.shelfcard.soon .sh-name { color: var(--muted); }
.sh-full { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.sh-note { font-style: normal; font-size: 12px; color: var(--muted); }
.sh-go { font-style: normal; font-size: 12.5px; color: var(--brand); font-weight: 700; margin-top: 4px; }
.sh-soon { color: var(--muted); font-weight: 400; }
.ringcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ringcard p { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.rc-sub { font-size: 11.5px !important; color: var(--muted) !important; }
.rc-sub b { color: var(--brand); }
.duecard {
  display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center;
  background: var(--brand); color: #FFF4EE; border-radius: var(--r); padding: 16px 18px;
  transition: transform .16s, box-shadow .16s;
}
.duecard:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(188, 75, 50, .7); }
.duecard b { font-family: var(--serif); font-size: 30px; line-height: 1; grid-row: span 2; }
.duecard span { font-size: 12.5px; opacity: .92; }
.duecard em { font-size: 12px; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.duecard-off { background: var(--card); color: var(--ink-2); border: 1px solid var(--line); }
.duecard-off b { color: var(--ok); }

/* ---------------- 六种练法 ---------------- */
.modegrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.modecard {
  flex: 1 1 196px; max-width: 250px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 17px; transition: transform .16s, box-shadow .16s, border-color .16s;
}
.modecard:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line-2); }
.mc-ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-l); color: var(--brand-d); font-size: 16px; margin-bottom: 10px;
}
.modecard b { font-family: var(--serif); font-size: 15.5px; display: block; }
.modecard p { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.6; }

/* ---------------- 章节地图 ---------------- */
.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.mapcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .18s, border-color .16s;
}
.mapcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.mc-top { display: flex; align-items: flex-start; gap: 13px; }
.mc-ord {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--paper-3), #E4D6B8); color: var(--brand-d);
  font-family: var(--serif); font-size: 17px; font-weight: 700;
}
.mc-tt { flex: 1; min-width: 0; }
.mc-tt h3 { font-size: 16px; }
.mc-tt p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.mc-blurb { font-size: 13px; color: var(--ink-2); margin-top: 13px; line-height: 1.75; flex: 1; }
.mc-nums { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.mc-nums li { font-size: 11.5px; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.mc-nums b { color: var(--brand-d); font-variant-numeric: tabular-nums; }
.mc-foot { display: flex; gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px dashed var(--line); flex-wrap: wrap; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; cursor: pointer; transition: all .15s; white-space: nowrap;
  background: var(--card); color: var(--ink-2);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand); color: #FFF4EE; box-shadow: 0 6px 16px -8px rgba(188, 75, 50, .8); }
.btn-primary:hover { background: var(--brand-d); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--muted); }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 8px; }
.btn-danger { background: var(--bad-l); color: var(--bad); border-color: #EBC7C2; }
.btn-danger:hover { background: var(--bad); color: #fff; }
.mini {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--card); font-size: 12px; color: var(--ink-2);
  cursor: pointer; transition: all .14s;
}
.mini:hover { border-color: var(--brand); color: var(--brand-d); background: var(--brand-l); }
.mini-danger:hover { border-color: var(--bad); color: #fff; background: var(--bad); }

/* ---------------- 装饰件 ---------------- */
.ring { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
.ring svg { display: block; }
.ring-v {
  position: absolute; font-family: var(--serif); font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.bar { display: block; height: 6px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.3, .9, .3, 1); }
.stars { letter-spacing: 1px; font-size: 12px; }
.stars .st { color: var(--line-2); }
.stars .st.on { color: var(--gold); }
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11.5px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line);
}
.tag-hot { background: var(--brand-l); color: var(--brand-d); border-color: #EFCFC5; }
.tag-sel { background: var(--blue-l); color: var(--blue); border-color: #CFDEEE; }
.tag-warn { background: var(--gold-l); color: #8A6516; border-color: #EADCB4; }
.tag-essay { background: var(--ok-l); color: var(--ok); border-color: #CEE2D1; }
.tag-dim { background: transparent; color: var(--muted); }

/* ---------------- 章节学习台 ---------------- */
.unit-head {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  background: linear-gradient(150deg, #FFFDF8, #F8F1E3);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 34px; box-shadow: var(--sh);
}
.uh-ord { font-size: 12px; letter-spacing: 2px; color: var(--brand); }
.uh-main h1 { font-size: 28px; margin-top: 8px; letter-spacing: 1px; }
.uh-blurb { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; line-height: 1.85; max-width: 720px; }
.uh-tags { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.uh-side { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.uh-side p { font-size: 12px; color: var(--muted); }

.cntgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 11px; }
.cnt {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.cnt b { font-family: var(--serif); font-size: 25px; color: var(--brand-d); line-height: 1.15; font-variant-numeric: tabular-nums; }
.cnt span { font-size: 11.5px; color: var(--muted); }

.practicegrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; }
.prac {
  flex: 1 1 215px; max-width: 276px;
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .16s, box-shadow .18s, border-color .16s; position: relative;
}
.prac:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand); }
.p-ico { font-size: 19px; color: var(--brand); margin-bottom: 5px; }
.prac b { font-family: var(--serif); font-size: 16px; }
.prac p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.prac em { font-size: 11.5px; color: var(--brand-d); margin-top: 7px; }

.ptlist { display: flex; flex-direction: column; gap: 9px; }
.ptrow {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 18px; transition: border-color .15s, box-shadow .15s;
}
.ptrow:hover { border-color: var(--line-2); box-shadow: var(--sh); }
.pt-i {
  font-family: var(--serif); font-size: 15px; color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; background: var(--paper-2); display: grid; place-items: center;
}
.pt-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pt-top h4 { font-size: 14.5px; font-weight: 600; }
.pt-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pt-bar { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.pt-bar .bar { flex: 1; max-width: 230px; }
.pt-v { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 42px; }
.pt-sub { font-size: 11.5px; color: var(--muted); }
.pt-act { display: flex; gap: 6px; }
.ptlist-foot { margin-top: 16px; }

/* ---------------- 模式头 & 切换 ---------------- */
.mode-head { margin-bottom: 16px; }
.mode-head h1 { font-size: 26px; letter-spacing: 1px; }
.mode-head p { font-size: 13px; color: var(--muted); margin-top: 7px; max-width: 780px; line-height: 1.75; }
.modetabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.modetab {
  display: flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2);
  transition: all .15s;
}
.modetab:hover { border-color: var(--line-2); background: var(--paper-2); }
.modetab.on { background: var(--brand); color: #FFF4EE; border-color: var(--brand); box-shadow: 0 6px 16px -9px rgba(188, 75, 50, .9); }
.mt-ico { font-size: 14px; }

.segdots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
/* 题号点阵是 <button>（不是 <a href="#">，避免点一下把路由顶回首页），
   所以这里要把按钮的默认外观清干净 */
.segdot {
  width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-family: inherit; line-height: 1; padding: 0; margin: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  font-variant-numeric: tabular-nums; transition: all .14s; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.segdot:hover { border-color: var(--brand); color: var(--brand-d); }
.segdot.fin { background: var(--ok-l); border-color: #CEE2D1; color: var(--ok); }
.segdot.on { background: var(--brand); border-color: var(--brand); color: #FFF4EE; }

.picker { margin-bottom: 18px; }
.picker summary {
  cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 9px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); list-style: none;
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::before { content: "▸ "; color: var(--brand); }
.picker[open] summary::before { content: "▾ "; }
.picker-list { margin-top: 8px; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.picker-i {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.picker-i:last-child { border-bottom: none; }
.picker-i:hover { background: var(--paper-2); }
.picker-i.on { background: var(--brand-l); }
.pk-n { font-family: var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; }
.pk-m { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dot-new { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); margin-right: 5px; vertical-align: middle; }

/* ---------------- 题目卡片 ---------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 34px; box-shadow: var(--sh);
}
.qcard { margin-bottom: 20px; }
.qmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.qidx { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.qtype { font-size: 11.5px; padding: 2px 10px; border-radius: 6px; background: var(--blue-l); color: var(--blue); }
.qtype-tip { background: var(--gold-l); color: #8A6516; }
.qtitle, .stem { font-size: 20px; line-height: 1.6; letter-spacing: .3px; }
.stem { font-size: 18px; }
.roundbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 15px 0 18px; padding: 10px 14px; background: var(--paper-2); border-radius: var(--r-sm); }
.rb-tag { font-size: 11.5px; background: var(--brand); color: #FFF4EE; padding: 2px 10px; border-radius: 999px; }
.rb-dict { background: var(--blue); }
.rb-note { font-size: 12.5px; color: var(--ink-2); }
.rb-note b { color: var(--brand-d); }
.roundbar .mini { margin-left: auto; }

/* ---------------- 挖空 ---------------- */
.ansblock { display: flex; flex-direction: column; gap: 13px; }
.ansline { display: flex; gap: 8px; font-size: 15.5px; line-height: 2.25; letter-spacing: .2px; text-wrap: pretty; }
.ln-no { flex: 0 0 auto; font-family: var(--serif); color: var(--brand); font-size: 14px; padding-top: 1px; }
.ln-txt { color: var(--ink); }
mark.kw {
  background: var(--gold-l); color: #7A5A10; padding: 1px 5px; border-radius: 6px;
  border-bottom: 1px dashed #D8C08A; font-weight: 600; margin: 0 1px;
}
mark.kw-ok { background: var(--ok-l); color: #2C5C38; border-bottom-color: #A9C9AE; }
mark.kw-bad { background: var(--bad-l); color: #8E2F26; border-bottom-color: #E0AEAA; }
/* 同一关键词的重复位置：保留宽度、藏起文字，避免直接送答案 */
mark.kw-dup {
  background: var(--gold-l); color: transparent; user-select: none;
  border-bottom-style: dashed; border-bottom-color: #D8C08A;
}
mark.kw-dup.kw-ok { background: var(--ok-l); border-bottom-color: #A9C9AE; }
mark.kw-dup.kw-bad { background: var(--bad-l); border-bottom-color: #E0AEAA; }
.blank-slot { display: inline-block; vertical-align: baseline; }
.blank-input {
  display: inline-block; min-width: 66px; padding: 1px 8px; margin: 0 3px;
  border: none; border-bottom: 2px solid var(--brand); background: rgba(188, 75, 50, .07);
  border-radius: 5px 5px 0 0; outline: none; font-size: 15px; font-weight: 600;
  color: var(--brand-d); text-align: center; transition: background .15s, border-color .15s;
}
.blank-input:focus { background: rgba(188, 75, 50, .14); border-bottom-color: var(--brand-d); box-shadow: 0 2px 0 0 rgba(188, 75, 50, .2); }
.blank-input::placeholder { color: rgba(139, 129, 114, .55); font-weight: 400; font-size: 12px; }
.with-hint .blank-input::placeholder { color: var(--brand); opacity: .7; }

.qactions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.qactions-rate { margin-top: 24px; }
.btn-rate { flex-direction: column; gap: 1px; padding: 12px 22px; border-width: 1.5px; }
.btn-rate span { font-size: 10.5px; opacity: .75; font-weight: 400; }
.r-bad { border-color: #E5BFBA; color: #9A382E; background: #FDF1EF; }
.r-bad:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.r-mid { border-color: #E7D6AE; color: #8A6516; background: #FDF8EC; }
.r-mid:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.r-ok { border-color: #B4D2B9; color: #2F6340; background: #F1F8F2; }
.r-ok:hover { background: var(--ok); color: #fff; border-color: var(--ok); }

.verdict {
  display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 13px 18px;
  border-radius: var(--r-sm); font-size: 14.5px;
}
.v-ok { background: var(--ok-l); color: #2C5C38; border-left: 4px solid var(--ok); }
.v-bad { background: var(--bad-l); color: #8E2F26; border-left: 4px solid var(--bad); }
.v-ico { font-size: 17px; font-weight: 700; }
.scoreline { margin-top: 13px; font-size: 14px; color: var(--ink-2); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.scoreline b { color: var(--brand-d); font-family: var(--serif); font-size: 17px; }
.score-note { font-size: 12.5px; color: var(--muted); }

.reveal { margin-top: 26px; padding-top: 22px; border-top: 2px dashed var(--line-2); }
.ans-list { display: flex; flex-direction: column; gap: 11px; counter-reset: al; }
.ans-list li {
  font-size: 15px; line-height: 2.1; color: var(--ink-2); padding-left: 26px; position: relative;
}
.ans-list li::before {
  counter-increment: al; content: counter(al);
  position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper-3); color: var(--brand-d); font-size: 11px;
  display: grid; place-items: center; font-family: var(--serif);
}
.ans-list li:only-child { padding-left: 0; }
.ans-list li:only-child::before { display: none; }

.tipbox {
  margin-top: 18px; background: var(--brand-l); border-radius: var(--r-sm);
  padding: 14px 18px; border-left: 4px solid var(--brand);
}
.tip-tag {
  display: inline-block; font-size: 11.5px; letter-spacing: 1px; color: var(--brand-d);
  font-family: var(--serif); margin-bottom: 5px;
}
.tipbox p { font-size: 13.5px; color: #7A3520; line-height: 1.85; }

/* ---- 谐音记忆 + 大白话（答后解析的加分组件） ---- */
.memobox {
  margin-top: 12px; background: var(--gold-l); border-radius: var(--r-sm);
  padding: 14px 18px; border-left: 4px solid var(--gold);
}
.mb-tag { color: #7A5A10; }
.mb-line { display: flex; gap: 10px; align-items: baseline; margin: 6px 0 2px; }
.mb-line + .mb-line { border-top: 1px dashed #E4D2A2; margin-top: 8px; padding-top: 8px; }
.mb-k {
  flex: none; font-size: 11px; letter-spacing: 1px; font-family: var(--serif);
  background: #FFF6E0; border: 1px solid #DCC58C; color: #7A5A10;
  border-radius: 6px; padding: 1px 8px;
}
.mb-k2 { background: #F3EAD2; border-color: #C9B97E; color: #6B5210; }
.mb-line span { font-size: 13.5px; color: #5E4A12; line-height: 1.9; }

/* ---- 为什么是这个答案（选择题答后通俗讲解） ---- */
.whybox {
  margin-top: 14px; background: #F5F2EA; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 18px;
}
.why-badge { background: #3E5C50; color: #F2EFE6; }
.whybox .ex-head { margin-bottom: 4px; }
.why-item { margin-top: 10px; }
.why-item:first-of-type { margin-top: 4px; }
.why-k {
  display: inline-block; font-family: var(--serif); font-size: 14px;
  color: #2E473E; margin-bottom: 2px;
}
.why-item p { font-size: 13.5px; color: #4A4A3D; line-height: 1.95; }
.hintbox {
  margin: 14px 0; padding: 13px 17px; background: var(--gold-l); border-radius: var(--r-sm);
  font-size: 13px; color: #7A5A10; line-height: 2;
}
.hint-chip {
  display: inline-block; background: #FFF6E0; border: 1px dashed #DCC58C; border-radius: 6px;
  padding: 1px 9px; margin: 3px 4px 0 0; font-size: 12.5px;
}

/* ---------------- 默写 ---------------- */
.dict-area {
  width: 100%; min-height: 190px; margin-top: 6px; padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #FFFEFB;
  outline: none; resize: vertical; font-size: 15px; line-height: 2; color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 30px, var(--line) 30px, var(--line) 31px);
  background-position: 0 15px;
}
.dict-area:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }
.dictres { display: flex; align-items: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.dr-main { font-size: 16px; } .dr-main b { color: var(--brand-d); font-family: var(--serif); font-size: 19px; }
.dr-sub { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.catchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.kw-chip {
  display: inline-block; font-size: 12.5px; padding: 3px 11px; border-radius: 7px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2);
}
.kw-chip.is-ok { background: var(--ok-l); border-color: #B4D2B9; color: #2C5C38; }
.kw-chip.is-bad { background: var(--bad-l); border-color: #E0AEAA; color: #8E2F26; }
.kw-chip.is-active { box-shadow: 0 0 0 2px var(--brand); }
.keylist { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------------- 选择题 ---------------- */
.setup { max-width: 900px; }
.setup-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.8; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 22px 0; }
.sg-item { background: var(--paper-2); border-radius: var(--r-sm); padding: 12px 15px; }
.sg-item b { font-family: var(--serif); font-size: 22px; color: var(--brand-d); display: block; }
.sg-item span { font-size: 11.5px; color: var(--muted); }
.optrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.optlabel { font-size: 12.5px; color: var(--muted); min-width: 42px; }
.optchip {
  padding: 6px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card);
  font-size: 13px; cursor: pointer; transition: all .14s; color: var(--ink-2);
}
.optchip:hover { border-color: var(--brand); color: var(--brand-d); }
.optchip.on { background: var(--brand); border-color: var(--brand); color: #FFF4EE; }

/* ---- 题型分卡（单选 / 多选 / 判断分开入口） ---- */
.typegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.typecard {
  position: relative; text-align: left; font-family: var(--sans);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 15px 17px; cursor: pointer; transition: all .17s;
}
.typecard:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh); }
.typecard:disabled { opacity: .55; cursor: not-allowed; }
.typecard b { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.typecard em { display: block; font-style: normal; font-size: 12px; color: var(--brand-d); margin-top: 4px; }
.typecard p { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.55; }
.tc-go { display: block; margin-top: 11px; font-size: 12.5px; color: var(--brand); font-weight: 700; letter-spacing: .5px; }

.runbar { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 16px; }
.prog { flex: 1 1 200px; height: 7px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #D2734F); border-radius: 999px; transition: width .35s; }
.prog-thin { height: 5px; margin: 12px 0 20px; flex: none; }
.run-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.run-ok { font-size: 12.5px; color: var(--ok); } .run-bad { font-size: 12.5px; color: var(--bad); }
.runbar .mini { margin-left: auto; }

.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.opt {
  display: flex; gap: 13px; align-items: flex-start; padding: 13px 17px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #FFFEFB;
  cursor: pointer; transition: all .15s; font-size: 14.5px; line-height: 1.7;
}
.opt:hover { border-color: var(--brand); background: var(--brand-l); }
.opt-k {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--paper-2); font-family: var(--serif); font-size: 13.5px; color: var(--ink-2);
}
.opt.sel { border-color: var(--brand); background: var(--brand-l); }
.opt.sel .opt-k { background: var(--brand); color: #FFF4EE; }
.opt.right { border-color: var(--ok); background: var(--ok-l); }
.opt.right .opt-k { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-l); }
.opt.wrong .opt-k { background: var(--bad); color: #fff; }
.judge-row { display: flex; gap: 16px; margin-top: 22px; }
.judge-btn {
  flex: 1; max-width: 200px; padding: 22px; border-radius: var(--r); border: 1.5px solid var(--line);
  background: #FFFEFB; font-family: var(--serif); font-size: 24px; cursor: pointer; transition: all .15s;
}
.judge-btn:hover { border-color: var(--brand); background: var(--brand-l); }
.judge-btn.sel { border-color: var(--brand); background: var(--brand-l); color: var(--brand-d); }
.judge-btn.right { border-color: var(--ok); background: var(--ok-l); color: var(--ok); }
.judge-btn.wrong { border-color: var(--bad); background: var(--bad-l); color: var(--bad); }
.answer-line { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.al-k { font-size: 12px; color: var(--muted); }
.al-v { font-family: var(--serif); font-size: 19px; color: var(--ok); font-weight: 700; }
.al-t { font-size: 13px; color: var(--ink-2); }
.misline { margin-top: 13px; padding: 12px 16px; background: var(--bad-l); border-radius: var(--r-sm); font-size: 13px; color: #8E2F26; line-height: 1.85; }

.wronglist { display: flex; flex-direction: column; gap: 14px; }
.wronglist li { background: var(--paper-2); border-radius: var(--r-sm); padding: 14px 18px; }
.wl-q { font-size: 14.5px; font-weight: 600; line-height: 1.7; }
.wl-o { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; font-size: 13px; color: var(--ink-2); }
.wl-opt.right { color: var(--ok); font-weight: 600; }
.wl-a { margin-top: 9px; font-size: 13px; color: var(--muted); }
.wl-a b.ok { color: var(--ok); } .wl-a b.bad { color: var(--bad); }

/* ---------------- 连线 / 排序 ---------------- */
.hint-line { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.75; }
.matchwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mcol { display: flex; flex-direction: column; gap: 9px; }
.mitem {
  padding: 13px 17px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #FFFEFB; font-size: 14px; line-height: 1.65; cursor: pointer; transition: all .15s;
}
.mitem:hover { border-color: var(--brand); background: var(--brand-l); }
.mitem.sel { border-color: var(--brand); background: var(--brand-l); box-shadow: 0 0 0 3px rgba(188, 75, 50, .15); }
.mitem.done { border-color: var(--ok); background: var(--ok-l); color: #2C5C38; cursor: default; opacity: .85; }
.shake { animation: shake .38s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.pairlist { display: flex; flex-direction: column; gap: 10px; }
.pairlist li { display: flex; gap: 11px; align-items: baseline; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.pairlist b { color: var(--brand-d); font-family: var(--serif); flex: 0 0 auto; max-width: 46%; }
.pl-arrow { color: var(--muted); }

.orderwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ocol h4 { font-size: 13px; color: var(--muted); letter-spacing: 1px; margin-bottom: 10px; }
.ocol ul, .ocol ol { display: flex; flex-direction: column; gap: 9px; }
.ocol-ans { background: var(--paper-2); border-radius: var(--r-sm); padding: 14px; }
.oitem {
  padding: 11px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #FFFEFB; font-size: 13.5px; line-height: 1.65; cursor: pointer; transition: all .15s;
}
.oitem:hover { border-color: var(--brand); background: var(--brand-l); }
.oitem.placed { display: flex; gap: 10px; align-items: flex-start; background: var(--card); }
.oitem.placed:hover { background: var(--bad-l); border-color: var(--bad); }
.o-no {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px; background: var(--paper-3);
  display: grid; place-items: center; font-size: 11.5px; font-family: var(--serif); color: var(--brand-d);
}
.oitem.ok { border-color: var(--ok); background: var(--ok-l); }
.oitem.bad { border-color: var(--bad); background: var(--bad-l); }
.o-ph { font-size: 12.5px; color: var(--muted); text-align: center; padding: 18px 0; }
.answer-order { counter-reset: ao; display: flex; flex-direction: column; gap: 9px; }
.answer-order li { padding-left: 30px; position: relative; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.answer-order li::before {
  counter-increment: ao; content: counter(ao); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ok-l); color: var(--ok);
  font-size: 11px; display: grid; place-items: center;
}

/* ---------------- 闪卡 ---------------- */
.flashwrap { perspective: 1600px; margin: 10px 0 22px; }
.flash { cursor: pointer; }
.flash-inner { position: relative; transition: transform .55s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.flash.flip .flash-inner { transform: rotateY(180deg); }
.flash-face {
  backface-visibility: hidden; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 38px; box-shadow: var(--sh-lg); min-height: 240px;
}
.flash-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: auto; max-height: 620px; }
.flash-front { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; justify-content: center; }
.ff-tag { font-size: 11.5px; letter-spacing: 1.5px; color: var(--brand); }
.flash-front h2 { font-size: 25px; line-height: 1.5; max-width: 90%; }
.ff-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.ff-hint { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 18px; }
.flash-back h3 { font-size: 17px; margin-bottom: 14px; color: var(--brand-d); }
.flash-state { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------------- 复习中心 / 错题本 ---------------- */
.review-top { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 22px; }
.rt-badge { font-family: var(--serif); font-size: 15px; color: var(--brand-d); background: var(--brand-l); padding: 5px 15px; border-radius: 999px; }
.rt-sub { font-size: 12.5px; color: var(--muted); }
.rv-blk { margin-top: 26px; }
.rvlist { display: flex; flex-direction: column; gap: 8px; }
.rvrow {
  display: grid; grid-template-columns: 66px 1fr auto auto; gap: 13px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 16px; font-size: 13.5px;
}
.rvrow:hover { border-color: var(--line-2); }
.rv-kind { font-size: 11px; padding: 2px 9px; border-radius: 6px; text-align: center; }
.rv-point { background: var(--brand-l); color: var(--brand-d); }
.rv-quiz { background: var(--blue-l); color: var(--blue); }
.rv-t { color: var(--ink); line-height: 1.6; }
.rv-stage { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.wb { display: flex; flex-direction: column; gap: 14px; }
.wbrow { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; }
.wb-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; flex-wrap: wrap; }
.wb-unit { font-size: 11.5px; color: var(--muted); }
.wb-time { margin-left: auto; font-size: 11px; color: var(--muted); }
.wb-q { font-size: 14.5px; font-weight: 600; line-height: 1.7; }
.wb-opts { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; font-size: 13px; color: var(--ink-2); }
.wb-ans { margin-top: 11px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wa-mine { color: var(--bad); } .wa-right { color: var(--ok); }
.wb-foot { display: flex; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---------------- 统计 ---------------- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 13px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.st-top { display: grid; place-items: center; min-height: 76px; }
.st-label { font-size: 12px; color: var(--muted); }
.big { font-family: var(--serif); font-size: 34px; color: var(--brand-d); line-height: 1; font-variant-numeric: tabular-nums; }
.big em { font-size: 15px; color: var(--muted); }
.mstlist { display: flex; flex-direction: column; gap: 10px; }
.mstlist li { display: grid; grid-template-columns: 190px 1fr 52px auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 18px; }
.ms-name { font-family: var(--serif); font-size: 14px; display: flex; flex-direction: column; }
.ms-name em { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 1px; }
.ms-v { font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.heat { display: grid; grid-template-columns: repeat(35, 1fr); gap: 5px; max-width: 700px; }
.hcell { aspect-ratio: 1; border-radius: 5px; background: var(--paper-3); }
.hcell.on { background: var(--brand); }
.heat-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* ---------------- 可视化讲解 ---------------- */
.vz { margin: 20px 0 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 20px; }
.vz-cap { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); font-family: var(--serif); margin-bottom: 15px; flex-wrap: wrap; }
.vz-badge { font-size: 10.5px; background: var(--brand); color: #FFF4EE; padding: 2px 9px; border-radius: 999px; font-family: var(--sans); letter-spacing: .5px; }
.vz-badge-kw { background: var(--blue); }
.vz-count { font-size: 11px; color: var(--muted); margin-left: auto; font-family: var(--sans); }
.vz-timeline { display: flex; flex-direction: column; gap: 0; }
.vz-timeline li { display: grid; grid-template-columns: 12px 78px 1fr; gap: 12px; align-items: baseline; padding: 9px 0; position: relative; }
.vz-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 26px; bottom: -9px; width: 1px; background: var(--line-2); }
.vz-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }
.vz-time { font-family: var(--serif); font-size: 13px; color: var(--brand-d); }
.vz-txt { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.vz-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; }
.vz-col { background: var(--card); border-radius: var(--r-sm); padding: 14px 16px; border: 1px solid var(--line); }
.vz-col-h { font-family: var(--serif); font-size: 13.5px; color: var(--brand-d); margin-bottom: 9px; }
.vz-col ul { display: flex; flex-direction: column; gap: 6px; }
.vz-col li { font-size: 13px; color: var(--ink-2); line-height: 1.65; padding-left: 13px; position: relative; }
.vz-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.vz-stack { display: flex; flex-direction: column; gap: 7px; }
.vz-layer { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; background: var(--card); border-radius: var(--r-sm); padding: 11px 15px; border: 1px solid var(--line); }
.vz-i { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-l); color: var(--brand-d); display: grid; place-items: center; font-size: 11.5px; font-family: var(--serif); }
.vz-n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.vz-d { font-size: 12px; color: var(--muted); }
.vz-kw .kw-group { margin-bottom: 13px; }
.vz-kw .kw-group:last-child { margin-bottom: 0; }
.kw-h { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.kw-h em { font-size: 10.5px; background: var(--paper-3); padding: 0 6px; border-radius: 999px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kw-chip.g-a { background: #FFF6E0; border-color: #E6D3A4; }
.kw-chip.g-b { background: var(--blue-l); border-color: #CFDEEE; }
.kw-chip.g-c { background: var(--ok-l); border-color: #CEE2D1; }

.explain { margin-top: 26px; padding: 22px 24px; background: linear-gradient(160deg, #FFFDF8, #F8F1E3); border: 1px solid var(--line-2); border-radius: var(--r); }
.ex-head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-badge { font-size: 11px; background: var(--brand); color: #FFF4EE; padding: 3px 11px; border-radius: 999px; }
.ex-head b { font-family: var(--serif); font-size: 16px; }
.ex-body { font-size: 14.5px; }
.ex-foot { margin-top: 16px; font-size: 12.5px; color: var(--muted); line-height: 1.8; padding-top: 13px; border-top: 1px dashed var(--line-2); }

/* ---------------- 空状态 / 其它 ---------------- */
.empty { text-align: center; padding: 74px 24px; background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty-ico { font-size: 34px; color: var(--line-2); margin-bottom: 12px; }
.empty h3 { font-size: 19px; margin-bottom: 9px; }
.empty p { font-size: 13.5px; color: var(--muted); line-height: 1.85; max-width: 520px; margin: 0 auto; }
.empty .qactions { justify-content: center; }
.totop {
  position: fixed; right: 26px; bottom: 26px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 17px;
  cursor: pointer; box-shadow: var(--sh); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.totop.on { opacity: 1; pointer-events: auto; }
.totop:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--brand); }
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px);
  background: var(--ink); color: #FBF7EF; padding: 11px 22px; border-radius: 999px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 90;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 翻页阅读条 ---------------- */
/* 分页隐藏：specificity (1,2,0) 盖过一切作者 display 规则 */
#view[data-paging="on"] .pg-off { display: none; }

.pager {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 58;
  display: none; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 999px;
  background: rgba(255, 253, 249, .96); border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg); backdrop-filter: saturate(150%) blur(10px);
  font-size: 13px; max-width: calc(100vw - 28px);
}
.pager.on { display: flex; }

.pg-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); font-size: 13px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pg-btn i { font-style: normal; font-family: var(--serif); font-size: 15px; line-height: 1; }
.pg-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-d); background: var(--brand-l); }
.pg-btn:disabled { opacity: .38; cursor: not-allowed; }

.pg-mid { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 3px; }
.pg-title {
  color: var(--ink-2); font-size: 12.5px; max-width: 240px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pg-sel {
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  font-size: 12.5px; font-family: inherit; border-radius: 999px; padding: 5px 10px;
  max-width: 200px; cursor: pointer; transition: border-color .15s;
}
.pg-sel:hover { border-color: var(--brand); }

.pg-mode {
  border: none; background: var(--paper-2); color: var(--ink-2); font-size: 12px;
  font-family: inherit; border-radius: 999px; padding: 8px 13px; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.pg-mode:hover { color: var(--brand-d); background: var(--brand-l); }

/* ---------------- 页脚（备案号占位） ---------------- */
.pagefoot {
  display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px 26px; border-top: 1px solid var(--line-1);
  color: var(--ink-3); font-size: 12.5px;
}
.pagefoot a { color: var(--ink-3); text-decoration: none; }
.pagefoot a:hover { color: var(--brand); }
.pagefoot .icp:empty { display: none; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; }
  .hero-side { flex-direction: row; }
  .ringcard, .duecard { flex: 1; }
  .hero-t { font-size: 38px; }
}
@media (max-width: 980px) {
  .layout { flex-direction: column; gap: 18px; padding: 16px 16px 118px; }
  .side { position: static; width: 100%; flex: none; max-height: none; }
  .sidelist { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .sideitem { min-width: 178px; flex: 0 0 auto; }
  .sidelist-sm { flex-direction: row; }
  .sideitem-sm { min-width: 140px; }
  .topnav { display: none; }
  .searchbox input { width: 160px; }
  .searchbox input:focus { width: 200px; }
  .sres { width: 300px; }
  .matchwrap, .orderwrap { grid-template-columns: 1fr; }
  .mstlist li { grid-template-columns: 1fr; gap: 7px; }
  .rvrow { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .hero { padding: 26px 22px; }
  .hero-t { font-size: 30px; }
  .card, .mapcard, .unit-head { padding: 20px; }
  .ptrow { grid-template-columns: 1fr; }
  .pt-act { justify-content: flex-start; }
  .flash-face { padding: 24px 22px; }
  .flash-front h2 { font-size: 20px; }
  .heat { grid-template-columns: repeat(18, 1fr); }
  .brand-tt em { display: none; }
  .topright .streak { display: none; }
}

@media print {
  .side, .topbar, .totop, .pager { display: none; }
}

/* ============================================================
   备考三板斧 / 全书总结 / 必背核心 / 考前急救 / 会员与账号
   ============================================================ */

/* ---- 首页三板斧卡片 ---- */
.tplgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tplcard {
  display: block; padding: 20px 22px; background: #FFFDF8; border: 1px solid var(--line);
  border-radius: var(--r-md); text-decoration: none; position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.tplcard:hover { border-color: var(--brand); box-shadow: 0 6px 22px rgba(188, 75, 50, .1); transform: translateY(-2px); }
.tp-ico {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; color: var(--brand-d);
  background: var(--brand-l); border-radius: 10px; margin-bottom: 12px;
}
.tplcard.rescue .tp-ico { background: var(--gold-l); color: #7A5A10; }
.tplcard b { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.tplcard p { font-size: 12.5px; color: var(--muted); line-height: 1.8; min-height: 66px; }
.tplcard em { font-style: normal; font-size: 12.5px; color: var(--brand); }

/* ---- 通用小标签页 ---- */
.tabrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.tabbtn {
  border: 1px solid var(--line); background: #FFFDF8; color: var(--ink-2);
  font-size: 13px; padding: 6px 15px; border-radius: 999px; cursor: pointer; font-family: var(--serif);
}
.tabbtn:hover { border-color: var(--brand); color: var(--brand-d); }
.tabbtn.on { background: var(--brand); border-color: var(--brand); color: #FFF4EE; }

/* ---- 全书背诵总结 ---- */
.sum-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sum-tip { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.sum-ch { border: 1px solid var(--line); border-radius: var(--r-md); background: #FFFDF8; margin-bottom: 14px; overflow: hidden; }
.sum-ch-h { display: flex; align-items: center; gap: 14px; padding: 17px 20px; cursor: pointer; user-select: none; background: #FBF4E6; border-bottom: 1px solid var(--line); }
.sum-ch-h:hover { background: #F8EFDC; }
.sum-ch-t { flex: 1; min-width: 0; }
.sum-ch-t h2 { font-family: var(--serif); font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: .3px; }
.sum-ch-t p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.sum-ch-arrow {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 15px;
}
.sum-body { padding: 4px 20px 18px; border-top: 1px dashed var(--line); }
.sum-pt { padding: 16px 0 10px; border-bottom: 1px dashed #EAE0CC; }
.sum-pt:last-child { border-bottom: none; }
.sp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-i {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-l);
  color: #7A5A10; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; transform: translateY(4px);
}
.sp-head h4 { font-family: var(--serif); font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.55; }
.sp-head h4::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--gold); }
.sp-ans { font-size: 14px; line-height: 2.05; color: var(--ink-2); }
.sp-links { display: flex; gap: 8px; margin-top: 10px; }

/* ---- 必背核心 ---- */
.corelist { list-style: none; display: grid; grid-template-columns: 1fr; }
.corerow {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 15px 4px; border-bottom: 1px dashed #EAE0CC;
}
.corerow:last-child { border-bottom: none; }
.cr-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cr-top h4 { font-family: var(--serif); font-size: 15.5px; }
.cr-brief { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.75; }
.cr-act { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- 考前急救 ---- */
.rescue-head h1 em {
  font-style: normal; font-size: 13px; color: #7A5A10; background: var(--gold-l);
  border-radius: 6px; padding: 3px 10px; vertical-align: 6px; margin-left: 10px; font-family: var(--serif);
}
.digtable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.digtable th {
  text-align: left; font-family: var(--serif); font-size: 12.5px; color: var(--ink-2);
  border-bottom: 2px solid var(--ink-2); padding: 8px 10px; white-space: nowrap;
}
.digtable td { padding: 9px 10px; border-bottom: 1px dashed #E5DACA; line-height: 1.75; vertical-align: top; }
.digtable td.dg-k { font-family: var(--serif); color: var(--brand-d); white-space: nowrap; }
.digtable tr:hover td { background: #FBF6EC; }
.gold-pt { border: 1px solid var(--line); border-radius: var(--r-md); background: #FFFDF8; margin-bottom: 10px; overflow: hidden; }
.gp-h { display: flex; align-items: center; gap: 13px; padding: 13px 16px; cursor: pointer; user-select: none; }
.gp-h:hover { background: #FBF6EC; }
.gp-i {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #FFF4EE;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif);
}
.gp-t { flex: 1; min-width: 0; }
.gp-t b { font-family: var(--serif); font-size: 14.5px; font-weight: 600; }
.gp-u { font-size: 11.5px; color: var(--muted); margin-left: 9px; }
.gp-has { font-size: 11px; color: #7A5A10; background: var(--gold-l); border-radius: 5px; padding: 2px 8px; }
.gp-body { padding: 4px 18px 16px 58px; border-top: 1px dashed var(--line); }
.gp-body .tipbox, .gp-body .memobox { margin-top: 10px; }
/* ---- 谐音口诀集中营（单列卡片：序号 + 章标签 + 完整考点 / 金底口诀大字 / 释义小字） ---- */
.memo-tabrow { margin: 0 0 14px; }
.memogrid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 880px; }
.memo-card {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--r-md); padding: 15px 18px 16px;
}
.memo-card.is-locked { border-left-color: var(--line-2); background: var(--paper-2); }
.mm-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin-bottom: 10px; }
.mm-i { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.mm-u {
  flex: 0 0 auto; font-size: 11px; color: var(--brand-d); background: var(--brand-l);
  border-radius: 999px; padding: 2px 9px; letter-spacing: .5px;
}
/* 考点标题：完整显示、允许换行，不再截断成一行省略号 */
.mm-t { flex: 1 1 260px; min-width: 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink); }
.mm-p {
  font-family: var(--serif); font-size: 18px; line-height: 1.7; color: #7A5A10; letter-spacing: .5px;
  background: var(--gold-l); border-radius: 8px; padding: 9px 14px;
}
.mm-e { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin-top: 9px; max-width: 62em; }
.mm-veil { color: var(--muted) !important; font-size: 13px !important; font-style: italic; background: none; }
.rushgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rushcard {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #FFFDF8; text-decoration: none;
}
.rushcard:hover { border-color: var(--brand); }
.rushcard b { font-family: var(--serif); font-size: 13.5px; color: var(--ink); font-weight: 600; }
.rushcard span { font-size: 12px; color: var(--brand); white-space: nowrap; }
.lastnight { padding-left: 22px; }
.lastnight li { font-size: 14px; line-height: 2.2; color: var(--ink-2); }
.lastnight b { color: var(--brand-d); font-family: var(--serif); }

/* ---- 锁定卡片 / 锁定页 ---- */
.lockcard {
  display: flex; gap: 16px; align-items: center; padding: 20px 22px;
  background: repeating-linear-gradient(-45deg, #FAF4E8, #FAF4E8 12px, #F6EEDC 12px, #F6EEDC 24px);
  border: 1px solid #E0D2B4; border-radius: var(--r-md);
}
.lc-ico {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink-2);
  color: var(--paper); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px;
}
.lc-ico.big { width: 58px; height: 58px; font-size: 25px; }
.lc-t { flex: 1; }
.lc-t b { font-family: var(--serif); font-size: 15.5px; display: block; margin-bottom: 4px; }
.lc-t p { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.lockpage { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: stretch; }
.lp-main {
  padding: 30px; border: 1px solid var(--line); border-radius: var(--r-md); background: #FFFDF8;
  display: flex; flex-direction: column; justify-content: center;
}
.lp-main h1 { font-family: var(--serif); font-size: 22px; margin: 14px 0 8px; }
.lp-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.85; }
.lp-price { font-size: 13.5px; margin: 14px 0 4px; line-height: 1.9; }
.lp-price b { color: var(--brand); font-size: 19px; font-family: var(--serif); }
.lp-preview { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.lp-blur { padding: 24px; filter: blur(5px); user-select: none; }
.lp-blur p { font-family: var(--serif); font-size: 14.5px; line-height: 2.3; color: var(--ink-2); }
.lp-veil { position: absolute; inset: 0; background: rgba(251, 247, 239, .45); }

/* ---- 购买页 ---- */
.buywrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.buycard { border: 1px solid #E0D2B4; border-radius: var(--r-md); background: #FFFDF8; padding: 26px 28px; }
.buycard.paid { border-color: #CEE2D1; }
.bc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.bc-head h2 { font-family: var(--serif); font-size: 21px; }
.bc-head p { font-size: 13px; color: var(--muted); margin-top: 7px; }
.bc-price {
  text-align: right; color: var(--brand); font-family: var(--serif); white-space: nowrap;
  font-size: 34px; font-weight: 700;
}
.bc-price em { font-style: normal; font-size: 17px; }
.bc-price span { display: block; font-size: 11.5px; color: var(--muted); font-family: var(--sans); font-weight: 400; }
.bc-list { list-style: none; margin: 18px 0; border-top: 1px dashed var(--line); }
.bc-list li { padding: 9px 2px 9px 24px; border-bottom: 1px dashed #EAE0CC; font-size: 13.5px; color: var(--ink-2); position: relative; }
.bc-list li::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); }
.bc-login-tip { font-size: 13px; color: #7A5A10; background: var(--gold-l); border-radius: var(--r-sm); padding: 10px 14px; }
.bc-forms { display: grid; gap: 16px; }
.bc-form { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
.bc-form label { font-family: var(--serif); font-size: 14px; display: block; margin-bottom: 8px; }
.bc-note { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin-bottom: 10px; }
.bc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bc-row .blank-input { flex: 1; min-width: 200px; text-transform: uppercase; letter-spacing: 1px; }
.bc-msg { font-size: 12.5px; margin-top: 9px; color: var(--muted); }
.bc-msg.ok { color: var(--ok); }
.bc-msg.bad { color: var(--bad); }
.bc-user { font-size: 12.5px; color: var(--muted); }
.wxqr { margin-top: 12px; }
.qrbox { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.qrbox svg { display: block; }
.buyside { border: 1px solid var(--line); border-radius: var(--r-md); background: #FFFDF8; padding: 22px 24px; }
.buyside h3 { font-family: var(--serif); font-size: 15.5px; margin-bottom: 12px; }
.buyside dt { font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 12px; }
.buyside dd { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin-top: 4px; }

/* ---- 顶栏账号区 & 登录弹窗 ---- */
.authbtn {
  border: 1px solid var(--brand); color: var(--brand-d); background: var(--paper);
  font-family: var(--serif); font-size: 12.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.authbtn:hover { background: var(--brand-l); }
.authuser {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 12.5px; color: var(--ink-2); max-width: 150px;
}
.au-ok, .au-no { font-size: 10.5px; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.au-ok { background: var(--ok-l); color: var(--ok); }
.au-no { background: var(--brand-l); color: var(--brand-d); }
#authOv {
  position: fixed; inset: 0; background: rgba(61, 48, 34, .5); z-index: 90;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.authbox {
  width: 350px; max-width: calc(100vw - 40px); background: var(--paper); border-radius: var(--r-lg);
  padding: 26px 28px 22px; position: relative; box-shadow: 0 18px 60px rgba(40, 28, 14, .3);
}
.auth-x { position: absolute; right: 14px; top: 12px; border: none; background: none; font-size: 15px; color: var(--muted); cursor: pointer; }
.auth-logo { font-family: var(--serif); font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.auth-tabs { margin-bottom: 6px; }
.auth-form label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 12px 0 6px; }
.auth-form input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px;
  background: #FFFDF8; padding: 10px 13px; font-size: 14px; color: var(--ink); outline: none;
}
.auth-form input:focus { border-color: var(--brand); }
.auth-form .btn { width: 100%; margin-top: 20px; }
.auth-msg { font-size: 12.5px; color: var(--bad); margin-top: 10px; min-height: 18px; }
.auth-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 10px; }

/* ---- 窄屏适配 ---- */
@media (max-width: 960px) {
  .tplgrid, .rushgrid { grid-template-columns: 1fr 1fr; }
  .buywrap, .lockpage { grid-template-columns: 1fr; }
  .lp-preview { display: none; }
}
@media (max-width: 640px) {
  .tplgrid, .rushgrid { grid-template-columns: 1fr; }
  .corerow { grid-template-columns: 1fr; }
  .cr-act { justify-content: flex-start; }
  .topnav a:nth-child(2), .topnav a:nth-child(3) { display: none; }  /* 窄屏隐藏部分导航，侧栏仍有入口 */
  .digtable td.dg-k { white-space: normal; }
  .gp-body { padding-left: 18px; }
}

/* ---- 打印（全书总结） ---- */
@media print {
  .sum-tools, .sp-links, .side, .topbar, .totop, .qactions, .toast, .tabbar, .pager { display: none !important; }
  .sum-ch { break-inside: auto; page-break-inside: auto; border: none; }
  .sum-ch-h { padding: 10px 0 6px; }
  .sum-body { display: block !important; border-top: none; padding: 0; }
  .sum-pt { break-inside: avoid; }
  .layout { display: block; }
  .main { max-width: none; padding: 0; }
}

/* ============================================================
   手机端（≤768px）：底部标签栏 + 单列布局 + 触控优化
   ============================================================ */

/* ---- 底部标签栏（桌面隐藏，手机显示） ---- */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--muted); font-size: 10.5px; letter-spacing: .5px;
  padding: 4px 0 2px; -webkit-tap-highlight-color: transparent;
}
.tabbar a i {
  font-style: normal; font-family: var(--serif); font-size: 19px; line-height: 1.25;
  color: var(--ink-3);
}
.tabbar a.on { color: var(--brand-d); }
.tabbar a.on i { color: var(--brand); }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }

  /* ---- 顶栏：精简为 品牌 + 搜索 + 账号 ---- */
  .topbar { padding: 9px 12px; }
  .brand-mark { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
  .brand-tt { font-size: 15px; }
  .topnav { display: none; }
  .topright { gap: 8px; margin-left: auto; }
  .topright .streak { display: none; }
  .searchbox input { width: 128px; font-size: 16px; padding: 7px 11px; }
  .searchbox input:focus { width: 158px; }
  .sres { position: fixed; left: 10px; right: 10px; top: 54px; width: auto; max-height: 62vh; overflow-y: auto; }

  /* ---- 布局：单列 + 给底部标签栏让位 ---- */
  .layout { flex-direction: column; gap: 14px; padding: 14px 13px calc(88px + env(safe-area-inset-bottom)); }
  .side { display: none; }        /* 导航职责交给底部标签栏 + 首页 */
  .main { width: 100%; }
  .tabbar { display: flex; }

  /* ---- 首页 ---- */
  .hero { padding: 22px 16px; }
  .hero-t { font-size: 26px; letter-spacing: 1.5px; }
  .hero-sub { font-size: 13.5px; margin-top: 12px; }
  .hero-cta { margin-top: 18px; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 130px; justify-content: center; }
  .hero-nums { gap: 14px 20px; margin-top: 20px; padding-top: 14px; }
  .hero-side { flex-direction: column; }

  /* ---- 触控目标：按钮最小 44px ---- */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .mini { min-height: 38px; }

  /* ---- 输入：≥16px 防 iOS 聚焦自动放大 ---- */
  .blank-input { font-size: 16px; }
  .auth-form input, .bc-form input { font-size: 16px; }

  /* ---- 网格：内容卡单列，数据小卡两列 ---- */
  .mapgrid, .modegrid, .practicegrid, .tplgrid, .rushgrid,
  .matchwrap, .orderwrap { grid-template-columns: 1fr; }
  .modecard, .prac { flex: 1 1 100%; max-width: none; }
  .cntgrid, .statgrid, .setup-grid { grid-template-columns: repeat(2, 1fr); }
  .mstlist li { grid-template-columns: 1fr; gap: 8px; }
  .rvrow { grid-template-columns: 58px 1fr; gap: 8px 10px; }
  .rv-stage { grid-column: 1 / 3; white-space: normal; }
  .rv-act { grid-column: 2; justify-self: start; }
  .corerow { grid-template-columns: 1fr; gap: 7px; }
  .cr-act { justify-content: flex-start; }
  .buywrap, .lockpage { grid-template-columns: 1fr; }
  .lp-preview { display: none; }

  /* ---- 练法页签 / 核心页 tab：横向滑动 ---- */
  .modetabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; gap: 7px; }
  .modetab { flex: 0 0 auto; padding: 9px 13px; }
  .sum-tools { flex-wrap: wrap; gap: 8px; }
  .sum-tip { width: 100%; margin-left: 0; }

  /* ---- 表格：容器内横滑 ---- */
  .digtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .digtable table { min-width: 420px; }

  /* ---- 卡片留白收紧 ---- */
  .card, .mapcard, .unit-head, .buycard, .lockcard, .wbrow { padding: 16px 15px; }
  .sum-ch-h { padding: 13px 13px; gap: 9px; }
  .flash-face { padding: 22px 16px; }

  /* ---- 热力图：13 列一行 ---- */
  .heat { grid-template-columns: repeat(13, 1fr); }

  /* ---- 页脚操作：全宽按钮更醒目 ---- */
  .qactions { flex-direction: column; align-items: stretch; }
  .qactions .btn { width: 100%; }

  /* ---- 浮层：避开底部标签栏与翻页条 ---- */
  .pager { bottom: calc(62px + env(safe-area-inset-bottom)); padding: 5px 6px; gap: 5px; }
  .pg-btn { padding: 9px 13px; }
  .pg-btn span { display: none; }
  .pg-btn i { font-size: 17px; }
  .pg-title { display: none; }
  .pg-sel { font-size: 12px; padding: 6px 8px; max-width: 108px; }
  .pg-mode { font-size: 11.5px; padding: 9px 11px; }
  .layout { padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .totop { bottom: calc(152px + env(safe-area-inset-bottom)); right: 12px; }
  #authOv { align-items: flex-end; }
  .authbox { max-width: none; width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   v7 新组件：难度条 / 自选挖空 / 牢固度彩点 / 今日推荐 /
   考试倒计时 / 口述复述 / 磨耳朵 / 章节汇总 / 专题卡
   ============================================================ */

/* ---- 挖空难度条（简单/标准/挑战/自选） ---- */
.lvlrow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.lvlrow .optlabel { font-size: 12.5px; color: var(--muted); }

/* ---- 自选挖空：选词面板 ---- */
.pickbox { padding: 4px 0; }
.pk-tip { font-size: 13px; color: var(--ink-2); margin: 6px 0 10px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kchip {
  padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 13.5px; cursor: pointer; transition: all .15s;
}
.kchip:hover { border-color: var(--brand); color: var(--brand-d); }
.kchip.on { background: var(--brand); border-color: var(--brand); color: #FFF4EE; font-weight: 700; }

/* ---- 牢固度彩点（红黄绿） ---- */
.sdot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--line); flex: none; vertical-align: -1px;
}
.sdot.sd-red { background: var(--bad); box-shadow: 0 0 0 3px rgba(192, 72, 60, .14); }
.sdot.sd-yellow { background: var(--gold); box-shadow: 0 0 0 3px rgba(185, 134, 43, .14); }
.sdot.sd-green { background: var(--ok); box-shadow: 0 0 0 3px rgba(63, 122, 78, .14); }

/* ---- 今日推荐 / 薄弱清单列表 ---- */
.dplist, .wklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dprow, .wkrow {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--card);
}
.dprow:hover, .wkrow:hover { border-color: var(--brand-l); }
.dp-u { font-size: 12px; color: var(--muted); flex: none; white-space: nowrap; }
.dp-t { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink); text-decoration: none; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dp-t:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }
.wk-m { font-size: 12px; color: var(--bad); flex: none; font-variant-numeric: tabular-nums; }

/* ---- 考试倒计时 ---- */
.examcard {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg, 14px); background: var(--gold-l);
}
.examcard .ex-days { font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--brand-d); font-variant-numeric: tabular-nums; }
.examcard .ex-unit { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.examcard .ex-info { display: flex; flex-direction: column; gap: 2px; }
.examcard .ex-info b { font-family: var(--serif); font-size: 17px; }
.examcard .ex-info span { font-size: 12.5px; color: var(--muted); }
.examcard.exam-urgent { background: #FBEAE6; border-color: #EFCFC5; }
.exam-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ex-in {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font-size: 14px; color: var(--ink);
}
.ex-in-name { flex: 1; min-width: 180px; }
.duecard.duecard-exam { background: var(--gold); }
.duecard.duecard-exam.exam-urgent { background: var(--bad); }

/* ---- 口述复述 ---- */
.rb-oral { background: var(--gold); }
.oral-stage { padding: 26px 8px; text-align: center; }
.oral-tip { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.oral-selfcheck p { font-family: var(--serif); font-size: 16px; text-align: center; margin: 14px 0 4px; }
/* 口述：提示区（关键词 + 口诀，不给完整答案） */
.oral-hint {
  margin: 12px 0 4px; padding: 14px 16px;
  border: 1px dashed var(--gold); border-radius: 10px; background: var(--gold-l);
}
.oral-hint .oh-h { display: block; font-size: 13px; color: #7A5A10; margin-bottom: 8px; letter-spacing: .5px; }
.oral-hint .keylist { margin: 0 0 6px; }
.oral-hint .oh-tip { font-size: 13.5px; color: var(--ink); margin: 6px 0 0; line-height: 1.8; }
.oral-hint .oh-tip b { color: #7A5A10; }
.oral-hint .oh-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.btn-hint:hover { border-color: var(--gold); color: #7A5A10; }
/* 口述：朗读中按钮高亮 */
.mini-spk.on { background: var(--brand); color: #FFF4EE; border-color: var(--brand); }

/* ---- 磨耳朵 ---- */
.listen-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.listen-state { font-size: 13px; color: var(--muted); margin-left: auto; }
.listen-note { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin: 8px 0 2px; }
.listen-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.listen-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 10px 13px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  cursor: pointer; transition: all .15s; font-size: 14px;
}
.listen-item:hover { border-color: var(--brand); }
.listen-item.cur { border-color: var(--brand); background: var(--brand-l); }
.listen-item.passed { opacity: .62; }
.li-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.listen-item .li-idx { font-size: 12px; color: var(--muted); min-width: 2em; font-variant-numeric: tabular-nums; }
.listen-item .li-t { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.listen-item .li-playing { flex: none; color: var(--brand-d); animation: lispk 1.1s ease-in-out infinite; }
@keyframes lispk { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .75; } }
/* 答案行：念到哪一行哪一行亮 */
.li-ans { display: flex; flex-direction: column; gap: 2px; padding-left: 2.1em; }
.li-line {
  display: block; font-size: 13.5px; line-height: 1.85; color: var(--ink-2);
  padding: 2px 8px; border-radius: 6px; border-left: 3px solid transparent;
}
.li-line .kw { background: #F3E4C8; color: #8A6410; padding: 0 2px; border-radius: 3px; font-weight: 600; }
.li-line.on { color: var(--ink); background: #F6E8DB; border-left-color: var(--brand); font-weight: 600; }
.li-line.on .kw { background: var(--brand); color: #FFF4EE; }
.li-t.on { color: var(--brand-d); }
.listen-unsupported { padding: 30px 10px; text-align: center; color: var(--ink-2); line-height: 2; }

/* ---- 思维导图（v7.1 起更名：章节汇总） ---- */
.mtree { margin-top: 12px; }
.mtree-root {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--brand); color: #FFF6EE; border-radius: var(--r-lg, 14px);
}
.mtree-root b { font-family: var(--serif); font-size: 16.5px; flex: 1; }
.mr-badge {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18);
  display: grid; place-items: center; font-family: var(--serif); font-size: 15px;
}
.mr-note { font-size: 12px; opacity: .85; }
.mtree-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--brand-l); }
.mtree-node { margin: 6px 0; }
.mt-head {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); cursor: pointer; transition: all .15s;
}
.mt-head:hover { border-color: var(--brand); }
.mtree-node.open > .mt-head { border-color: var(--brand); background: var(--brand-l); }
.mt-caret { color: var(--muted); flex: none; width: 1em; }
.mtree-node.open > .mt-head .mt-caret { color: var(--brand-d); }
.mt-title { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); line-height: 1.55; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.mt-kw { font-size: 11.5px; color: var(--muted); flex: none; }
.mt-hard {
  flex: none; font-size: 11px; color: var(--bad); border: 1px solid #EFCFC5;
  background: #FBEAE6; border-radius: 999px; padding: 2px 8px;
}
.mt-body { padding: 10px 14px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg, #FAF6F1); }
.mt-body .ans-list { margin: 4px 0; }
.mt-links { display: flex; gap: 8px; margin-top: 8px; }

/* ---- 章节页：记不住标记 / 专题卡 ---- */
.ptrow-hard .pt-top h4 { color: var(--bad); }
.pt-act .mini.on { background: var(--bad); color: #FFF; border-color: var(--bad); }
.mapcard-topic { border-color: var(--gold); }
.mapcard-topic .mc-ord { background: var(--gold); color: #FFF; }

/* ---- 朗读按钮微调 ---- */
.mini-spk { font-weight: 700; }

@media (max-width: 720px) {
  .examcard .ex-days { font-size: 32px; }
  .exam-form { flex-direction: column; align-items: stretch; }
  .ex-in, .ex-in-name { width: 100%; }
  .listen-state { margin-left: 0; width: 100%; }
  .listen-item .li-t { white-space: normal; }
  .li-ans { padding-left: 1.2em; }
  .sum-ch-t h2 { font-size: 18px; }
  .mtree-list { padding-left: 10px; }
  .mt-title { white-space: normal; }
  .dprow, .wkrow { flex-wrap: wrap; }
  .dp-t { white-space: normal; width: 100%; order: 5; }
}

/* ============================================================
   v8.0 · 我的资料（导入 PDF / Word / 粘贴文本）
   ============================================================ */

/* ---- 步骤条 ---- */
.imp-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.imp-step {
  font-size: 12px; color: var(--muted); padding: 5px 12px; border-radius: 999px;
  border: 1px dashed var(--line-2); background: var(--card);
}
.imp-step.on { color: #FFF4EE; background: var(--brand); border: 1px solid var(--brand); font-weight: 700; }

/* ---- 忙碌提示 ---- */
.imp-busy {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-2); font-size: 14px;
}
.spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--brand-l); border-top-color: var(--brand);
  animation: impspin .8s linear infinite;
}
@keyframes impspin { to { transform: rotate(360deg); } }

/* ---- 第一步：投递区 + 粘贴 ---- */
.imp-pick { display: grid; gap: 16px; }
.imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 42px 22px; text-align: center; cursor: pointer;
  background: var(--card); border: 2px dashed var(--line-2); border-radius: var(--r-lg);
  transition: border-color .15s, background .15s, transform .15s;
}
.imp-drop:hover, .imp-drop.over { border-color: var(--brand); background: #FFF9F4; transform: translateY(-2px); }
.imp-drop .id-ico {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-l); color: var(--brand-d); font-size: 22px; font-weight: 700;
}
.imp-drop b { font-size: 16px; color: var(--ink); font-family: var(--serif); letter-spacing: .5px; }
.imp-drop p { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin: 0; }
.imp-drop p em { font-style: normal; color: var(--brand-d); font-weight: 700; }
.imp-paste { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.imp-paste label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.imp-ta {
  width: 100%; resize: vertical; padding: 12px 14px; font: 13px/1.8 var(--sans);
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  outline: none; min-height: 130px;
}
.imp-ta:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); background: #FFFDF9; }
.imp-ta-tall { min-height: 320px; }
.imp-acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---- 提示框 ---- */
.imp-warn {
  background: var(--bad-l); border: 1px solid rgba(192, 72, 60, .35); border-radius: var(--r);
  padding: 14px 18px; font-size: 13px; color: #7A2C23;
}
.imp-warn b { display: block; margin-bottom: 6px; font-family: var(--serif); }
.imp-warn ul { margin: 0; padding-left: 1.4em; line-height: 1.8; }

/* ---- 整理规则说明 ---- */
.imp-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ih { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.ih b { display: block; font-family: var(--serif); color: var(--brand-d); font-size: 14px; margin-bottom: 6px; }
.ih p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.75; }

/* ---- 第二 / 三步的头部行 ---- */
.imp-head-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ihl-b { font-size: 14px; color: var(--ink); }
.ihl-b b { color: var(--brand-d); font-size: 17px; }
.ihl-n { font-size: 12px; color: var(--muted); background: var(--paper-2); padding: 3px 10px; border-radius: 999px; }
.imp-head-line .mini { margin-left: auto; }

/* ---- 第三步：选项 + 知识点清单 ---- */
.imp-opts { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 18px; margin-bottom: 16px; }
.io-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.io-row:last-child { border-bottom: none; }
.io-l { font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 88px; }
.io-tip { font-size: 11.5px; color: var(--muted); }
.imp-name { max-width: 260px; }
.imp-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.imp-pt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.ip-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ip-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-3); color: var(--ink-2);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ip-ttl {
  flex: 1; min-width: 160px; border: none; border-bottom: 1px dashed var(--line-2); background: transparent;
  font: 700 14px/1.5 var(--serif); color: var(--ink); padding: 3px 2px; outline: none;
}
.ip-ttl:focus { border-bottom-color: var(--brand); background: rgba(188, 75, 50, .05); }
.ip-kw { font-size: 11px; color: var(--gold); background: var(--gold-l); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ip-ans { margin: 4px 0 0; padding-left: 1.6em; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.ip-ans li { margin-bottom: 2px; }
.imp-kw { color: var(--brand-d); background: var(--brand-l); border-radius: 4px; padding: 0 3px; font-weight: 700; }

/* ---- 第四步：完成 ---- */
.imp-done {
  text-align: center; padding: 44px 24px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.imp-done .id-badge {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--ok-l); color: var(--ok); font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.imp-done h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; }
.imp-done > p { font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
.imp-done .qactions { justify-content: center; }

/* ---- 我的资料卡片（首页 / 我的页 / 导入页共用） ---- */
.imp-zone { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.imp-new {
  display: flex; flex-direction: column; gap: 5px; padding: 16px 18px;
  background: var(--card); border: 2px dashed var(--brand); border-radius: var(--r);
  color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.imp-new:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.in-ico {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #FFF4EE;
  font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.imp-new b { font-family: var(--serif); font-size: 15px; color: var(--brand-d); }
.imp-new p { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.imp-new em { font-style: normal; font-size: 12px; color: var(--brand); font-weight: 700; }
.imp-card {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 13px 15px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.imp-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--sh); }
.ic-body { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.ic-body b { font-family: var(--serif); font-size: 14.5px; }
.ic-body p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ic-body em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ic-body i { font-style: normal; font-size: 12px; color: var(--gold); font-weight: 700; }
.ic-ops { display: flex; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.ic-del:hover { border-color: var(--bad); color: var(--bad); }
.imp-none { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.8; padding: 14px 16px; background: var(--paper-2); border-radius: var(--r); }

/* ---- 首页书架上的「我的资料」卡 ---- */
.shelfcard.mine { border-color: rgba(185, 134, 43, .5); background: linear-gradient(158deg, #FFFDF8 0%, #FAF3E1 100%); }
.sh-badge.sh-mine { background: var(--gold); color: #FFF; }

@media (max-width: 720px) {
  .imp-zone { grid-template-columns: 1fr; }
  .imp-drop { padding: 30px 16px; }
  .io-l { min-width: 100%; }
}

/* ============================================================
   v9 新增样式
   导入页章标签 / 关键词图谱逐条对应 / 打印存 PDF 中心 /
   会员双档价格卡 / 侧边栏当前资料提示 / 长题两行截断补充
   ============================================================ */

/* ---- 导入页：知识点行的章节标签 ---- */
.ip-ch {
  flex: none; font-size: 10.5px; line-height: 1; color: var(--brand-d);
  border: 1px solid var(--brand-l); background: var(--brand-l);
  border-radius: 999px; padding: 3px 7px; font-weight: 700;
}
/* ---- 我的资料卡：N 章 小徽标 ---- */
.ic-chip {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(185, 134, 43, .4); border-radius: 999px;
  padding: 2px 7px; margin-left: 6px; vertical-align: 2px; white-space: nowrap;
}
/* ---- 章节地图标题里的「切回毛概」链接 ---- */
.blk-switch {
  margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--brand-d);
  text-decoration: none; border: 1px solid var(--brand-l); border-radius: 999px;
  padding: 4px 12px; white-space: nowrap;
}
.blk-switch:hover { background: var(--brand-l); }
.blk-h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- 关键词图谱：题目 ↔ 每条答案逐行对应（v9 重写） ---- */
.kw-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 2px; border-bottom: 1px dashed var(--line);
}
.kw-row:last-child { border-bottom: none; }
.kw-no { flex: none; font-size: 11px; font-weight: 800; color: var(--brand-d); }
.kw-lead {
  flex: none; max-width: 30%; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 打印 / 存为 PDF 中心浮层（章节学习台 + 全书总结共用） ---- */
.pcenter { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pc-mask { position: absolute; inset: 0; background: rgba(30, 22, 10, .45); }
.pc-box {
  position: relative; width: min(460px, 100%); max-height: 86vh; overflow: auto;
  background: var(--card, #FFFDF8); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.pc-box h3 { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0 0 4px; }
.pc-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.pc-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: none;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.pc-x:hover { color: var(--bad); border-color: var(--bad); }
.pc-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-2, #FAF6EF);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 9px;
  transition: border-color .15s, transform .15s;
}
.pc-opt:hover { border-color: var(--brand); transform: translateY(-1px); }
.pc-opt b { display: block; font-size: 14.5px; color: var(--ink); font-family: var(--serif); }
.pc-opt span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.pc-guide {
  margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.7;
}
.pc-guide b { color: var(--ink); }
.pc-guide ol { margin: 6px 0 0 1.4em; padding: 0; }
.pc-guide ol li { margin-bottom: 3px; }
.pc-guide p { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

/* ---- 会员双档价格卡（v9：¥9.9 半年 / ¥14.9 一年） ---- */
.planrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 18px; }
.plancard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  cursor: pointer; text-align: left; padding: 16px 16px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--paper-2, #FAF6EF);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.plancard:hover { transform: translateY(-2px); }
.plancard.on { border-color: var(--brand); background: var(--brand-l, #EAF1FB); box-shadow: 0 6px 18px rgba(43, 91, 185, .12); }
.plancard.on::after {
  content: '✓ 已选'; position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 800; color: #FFF; background: var(--brand);
  border-radius: 999px; padding: 3px 9px;
}
.pl-name { font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: 1px; }
.pl-price { font-family: var(--serif); font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; }
.pl-price em { font-style: normal; font-size: 15px; margin-right: 2px; }
.pl-days { font-size: 11.5px; color: var(--muted); }
.pl-tag {
  position: absolute; top: -9px; left: 14px; font-style: normal; font-size: 10.5px; font-weight: 800;
  color: #7A5A10; background: var(--gold-l, #FBEFD4); border: 1px solid var(--gold);
  border-radius: 999px; padding: 2px 9px;
}

/* ---- 侧边栏：当前资料切换提示 ---- */
.side-cur-tip {
  font-size: 11.5px; color: var(--muted); line-height: 1.7;
  margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line);
}
.side-cur-tip a { color: var(--brand-d); }

/* ---- 统计页 / 核心页补充（结构类，确保布局） ---- */
.cr-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-bar { display: block; min-width: 0; }
.ms-bar .bar { width: 100%; }

/* ---- 导入完成页（步骤 4） ---- */
.imp-done { text-align: center; padding: 30px 18px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); }
.id-badge {
  width: 52px; height: 52px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #FFF; background: var(--ok, #3E8E5A); border-radius: 50%;
}
.imp-done h2 { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 0 0 8px; }
.imp-done p { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.imp-done .qactions { margin-top: 14px; }

/* ---- v9 移动端适配 ---- */
@media (max-width: 720px) {
  .planrow { grid-template-columns: 1fr; }
  .plancard { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .pc-box { padding: 18px 16px 16px; }
  .kw-lead { max-width: 100%; }
  .blk-switch { margin-left: 0; }
  .pcenter { padding: 12px; align-items: flex-end; }
  .pc-box { width: 100%; }
}