/* ============================================================
   英语分级阅读 · 设计系统
   骨架：左目录(桌面) + 顶栏 + 内容区 + 底部标签栏(手机)
   ============================================================ */

:root{
  --bg:#F6F4EF; --bg-elev:#FFFFFF; --bg-sunken:#EFEBE3;
  --ink:#191919; --ink-2:#4A4A4A; --ink-3:#8A8580;
  --line:#E6E1D7;
  --accent:#B4342A; --accent-2:#8A6A2F; --accent-soft:#FBEDEA;
  --star:#D9A20B;

  --fs:16.5px; --lh:1.85;       /* 正文（阅读区）字号，由「阅读设置」调节 */
  --sent-bg:rgba(217,162,11,.14); --sent-bg-hover:rgba(217,162,11,.26);  /* 原文里句型整句的底色 */
  --fs-btn:12px;                /* 按钮/控件字号：固定值，不随屏幕变化；且与正文 --fs 完全独立 */
  --font-read:Georgia,"Times New Roman","Songti SC","SimSun","Noto Serif SC",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px -16px rgba(0,0,0,.18);
  --tabbar-h:52px; --topbar-h:48px;
  --w:1120px;
}
[data-theme="dark"]{
  --bg:#171614; --bg-elev:#211F1C; --bg-sunken:#111110;
  --ink:#EDE9E2; --ink-2:#BDB7AE; --ink-3:#8A8580;
  --line:#332F2A;
  --accent:#E0665A; --accent-2:#D3AE6A; --accent-soft:#2A1F1D;
  --star:#E0B23C;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.7);
  --sent-bg:rgba(224,178,60,.18); --sent-bg-hover:rgba(224,178,60,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14.5px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; color:inherit}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 9px}
hr{border:0; border-top:1px solid var(--line); margin:14px 0}

/* ---------- 工具类 ---------- */
.mut{color:var(--ink-3)}
.sm{font-size:12.5px}
.big{font-size:19px; font-weight:700}
.mono{font-family:var(--font-mono)}
.inl{display:inline}
.full{width:100%}
.disabled,.disabled:hover{opacity:.45; pointer-events:none}
.text{color:var(--ink-2)}
.desktop-only{display:none!important}
.mobile-only{display:block}

/* ============================================================
   骨架
   ============================================================ */
.app{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
body.admin:not(.no-tabbar){padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}

.app-shell{display:flex; min-height:100vh; align-items:stretch}
.content-col{flex:1; min-width:0; display:flex; flex-direction:column}

/* 左侧目录（桌面/平板） */
.sidebar{
  width:238px; flex:0 0 238px; background:var(--bg-elev);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:18px 12px 12px; gap:4px;
}
.side-brand{display:flex; align-items:center; gap:9px; padding:4px 8px 16px}
.side-brand .lg{
  width:32px; height:32px; border-radius:9px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:16px; flex:none;
}
.side-brand .lt{font-weight:700; font-size:15.5px; letter-spacing:-.01em}
.side-brand .ls{font-size:11.5px; color:var(--ink-3); margin-top:1px}
.side-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--radius-sm);
  color:var(--ink-2); font-size:14.5px; font-weight:500;
  transition:background .15s,color .15s;
}
.side-item:hover{background:var(--bg-sunken); color:var(--ink)}
.side-item.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.side-item .si-ic{width:18px; text-align:center; font-size:14px; opacity:.85; flex:none}
.side-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line)}
.side-me{display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm)}
.side-me:hover{background:var(--bg-sunken)}
.side-me .su-txt{min-width:0; display:flex; flex-direction:column; line-height:1.3}
.side-me .su-txt b{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-me .su-txt i{font-size:11.5px; color:var(--ink-3); font-style:normal}
.avatar{
  width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-weight:700; font-size:14px;
}
.btn-logout{
  width:100%; margin-top:6px; padding:8px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:transparent; color:var(--ink-3);
  font-size:13px; cursor:pointer;
}
.btn-logout:hover{border-color:var(--accent); color:var(--accent)}

/* 顶栏 */
.topbar{
  position:sticky; top:0; z-index:30;
  height:var(--topbar-h); display:flex; align-items:center; gap:4px;
  padding:0 8px; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar-title{
  flex:1; min-width:0; font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-left:4px;
}
.icon-btn{
  width:38px; height:38px; flex:none; border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--ink-2);
  display:grid; place-items:center; font-size:18px; cursor:pointer; line-height:1;
}
.icon-btn:hover{background:var(--bg-sunken); color:var(--ink)}
.btn-back{font-size:24px; padding-bottom:4px}
.pts-chip{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-elev); color:var(--accent-2);
  font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.pts-chip:hover{border-color:var(--accent-2); background:var(--accent-soft)}
.progress-line{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--accent); transition:width .12s linear; opacity:0;
}
.progress-line.on{opacity:1}

/* 内容区 */
.main{flex:1; min-width:0; display:block; padding-bottom:20px}
.wrap{max-width:var(--w); margin:0 auto; padding:14px 13px 0}
/* 阅读页：压缩页面内边距，把宽度让给正文（不支持的浏览器自动忽略此条，不影响布局） */
.wrap:has(> .reader){padding-left:12px; padding-right:12px}
.wrap.narrow{max-width:760px}
.wrap.wide{max-width:1280px}

/* 底部标签栏（手机） */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex; background:color-mix(in srgb,var(--bg-elev) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-top:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{
  flex:1 0 auto; min-width:64px; border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; color:var(--ink-3); cursor:pointer; position:relative;
}
.tabbar .ic{font-size:16px; line-height:1}
.tabbar button.on{color:var(--accent); font-weight:600}
.tabbar .badge{
  position:absolute; top:8px; left:calc(50% + 6px);
  background:var(--accent); color:#fff; font-size:9px; font-weight:700;
  min-width:15px; height:15px; border-radius:8px; padding:0 4px;
  display:grid; place-items:center;
}

/* 搜索抽屉 */
.sheet{
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:var(--bg); transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1); visibility:hidden;
}
.sheet[aria-hidden="false"]{transform:translateY(0); visibility:visible}
.sheet-bar{display:flex; align-items:center; gap:8px; padding:12px 12px 10px; border-bottom:1px solid var(--line)}
.sheet-bar input{
  flex:1; height:42px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-elev);
  color:var(--ink); font-size:15px; outline:none;
}
.sheet-bar input:focus{border-color:var(--accent)}
.sheet-body{flex:1; overflow:auto; padding:13px}
.sheet-hint{color:var(--ink-3); font-size:13.5px; text-align:center; padding:36px 20px; line-height:1.9}

/* 阅读设置：底部抽屉（与全屏搜索抽屉区分） */
#setSheet{
  background:rgba(0,0,0,.32); justify-content:flex-end;
  transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .2s;
}
#setSheet .sheet-bar,#setSheet .sheet-body{background:var(--bg-elev)}
#setSheet .sheet-bar{
  border-radius:var(--radius) var(--radius) 0 0;
  padding-top:14px; border-bottom:1px solid var(--line);
}
#setSheet .sheet-body{
  flex:0 1 auto; max-height:76vh;
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
[data-theme="dark"] #setSheet{background:rgba(0,0,0,.55)}

/* ============================================================
   通用组件
   ============================================================ */
.card,.sec-block{
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; margin-bottom:11px;
}
.card.flat{background:var(--bg-sunken); border-color:transparent}
.section-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:16px 0 9px;
}
.section-h h2{font-size:15.5px; letter-spacing:-.01em}
.section-h .more{font-size:13px; color:var(--ink-3)}
.section-h .more:hover{color:var(--accent)}

.btn,.btn-primary,.btn-ghost,.btn-read,.btn-nav{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:39px; padding:0 16px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#9C2C23}
.btn-ghost,.btn{border-color:var(--line); background:var(--bg-elev); color:var(--ink-2)}
.btn-ghost:hover,.btn:hover{border-color:var(--ink-3); color:var(--ink)}
.btn-read{background:var(--ink); color:var(--bg-elev)}
.btn-read:hover{background:var(--accent)}
.btn-nav{border-color:var(--accent); color:var(--accent); height:36px; padding:0 14px; font-size:13.5px}
.btn-nav:hover{background:var(--accent-soft)}
.btn.sm{height:32px; padding:0 12px; font-size:13px; border-radius:8px}
.btn-ghost.sm{height:32px; padding:0 12px; font-size:13px}

.chip,.chk{
  display:inline-flex; align-items:center; height:30px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line); background:var(--bg-elev);
  font-size:13px; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.chip:hover{border-color:var(--ink-3)}
.chip.on,.chk.on{background:var(--accent); border-color:var(--accent); color:#fff}
.badge-member,.tag-vip,.tag-free{
  display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px;
  border-radius:6px; font-size:11.5px; font-weight:600;
}
.badge-member,.tag-vip{background:var(--accent-soft); color:var(--accent)}
.tag-free{background:var(--bg-sunken); color:var(--ink-2)}
.badge-join{
  display:inline-flex; align-items:center; height:26px; padding:0 11px;
  border-radius:999px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600;
}
.tip,.ok,.warn,.err{
  border-radius:var(--radius-sm); padding:9px 12px; font-size:13px; margin-bottom:10px;
  border:1px solid var(--line); background:var(--bg-sunken); color:var(--ink-2);
}
.ok{border-color:#BFD8BF; background:#F1F7F1; color:#3A6B3A}
.err{border-color:#E7C3BE; background:var(--accent-soft); color:var(--accent)}
.warn{border-color:#E6D6A8; background:#FBF6E7; color:#7A6220}
.tip{border-color:var(--line); background:var(--bg-sunken)}
.empty{text-align:center; color:var(--ink-3); padding:36px 16px; font-size:13.5px; line-height:1.9}

/* 表单 */
.form label,.auth-form label{display:block; margin-bottom:11px; font-size:13.5px; color:var(--ink-2)}
.form input,.form select,.form textarea,
.auth-form input,.sheet-bar input{
  width:100%; margin-top:6px; height:44px; padding:0 13px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink); font-size:15px; outline:none;
}
.form textarea{height:auto; min-height:160px; padding:12px 13px; line-height:1.7; resize:vertical; font-family:var(--font-ui)}
.form input:focus,.form select:focus,.form textarea:focus,
.auth-form input:focus{border-color:var(--accent); background:var(--bg-elev)}
.frow{display:flex; gap:10px; flex-wrap:wrap}
.frow>*{flex:1; min-width:180px}
.fs{border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px 2px; margin:0 0 16px}
.fs legend{font-size:12.5px; color:var(--ink-3); padding:0 6px; font-weight:600}

/* 表格 */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev)}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; min-width:620px}
.tbl th,.tbl td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl th{font-size:12px; color:var(--ink-3); font-weight:600; background:var(--bg-sunken); white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--bg-sunken)}

/* ============================================================
   书库 / 书籍卡片
   ============================================================ */
.hero,.shelf-hero,.mhero{
  border-radius:var(--radius); padding:17px 15px; margin-bottom:13px;
  background:linear-gradient(180deg,var(--accent-soft),transparent);
  border:1px solid var(--line);
}
.hero h1,.shelf-hero h1,.mhero h1{font-size:19.5px; margin-bottom:5px; letter-spacing:-.02em}
.hero p,.shelf-hero p,.mhero p{color:var(--ink-2); font-size:13.5px; margin:0; max-width:60ch}
/* 顶部信息行：返回链接 + 章节进度并排（原来各占一行，现在合并省一行） */
.rkicker{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.rk-no{
  flex:none; font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--accent); margin-left:auto; white-space:nowrap;
}

.filters{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; margin-bottom:11px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters-inline{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:11px}

.grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.bcard,.shelf-card{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.bcard:hover,.shelf-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ink-3)}
.bcover,.sc-cover{display:block; aspect-ratio:3/4; background:var(--bg-sunken); position:relative; overflow:hidden}
.bcover img,.sc-cover img{width:100%; height:100%; object-fit:cover}

/* 封面角标：等级在左上，免费/会员在右上。
   注意 .bcover 必须是块级且 position:relative，角标才能正确叠在图片上。 */
.bcover .lvl,.sc-cover .lvl{position:absolute; top:7px; left:7px; z-index:2}
.bcover .tag-free,.bcover .tag-vip,
.sc-cover .tag-free,.sc-cover .tag-vip{
  position:absolute; top:7px; right:7px; z-index:2;
  height:20px; padding:0 7px; font-size:11px;
  box-shadow:0 1px 4px rgba(0,0,0,.14);
}
.bcover .tag-vip,.sc-cover .tag-vip{background:#fff; color:var(--accent)}
.bcover .tag-free,.sc-cover .tag-free{background:rgba(25,25,25,.72); color:#fff}
.bcover-ph,.dcover-ph,.cont-ph,.sc-ph{
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent-soft),var(--bg-sunken));
  color:var(--accent); font-size:30px; font-weight:700; font-family:var(--font-read);
}
.binfo,.sc-info{padding:9px 10px 10px; display:flex; flex-direction:column; gap:3px; flex:1}
.btitle,.sc-t{font-size:13.5px; font-weight:700; line-height:1.3; letter-spacing:-.01em}
.bmeta{display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); line-height:1.5}
.sc-desc{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.btags,.dtags{display:flex; gap:5px; flex-wrap:wrap}
/* 详情页的 .lvl 是标签行里的一项，不能沿用封面角标的绝对定位（会飞出文档流） */
.dtags .lvl{
  position:static; font-size:11px; font-weight:600; padding:2px 7px;
  border-radius:5px; background:var(--bg-sunken); color:var(--ink-2);
}
.btag,.sc-foot{
  font-size:11px; padding:2px 7px; border-radius:5px;
  background:var(--bg-sunken); color:var(--ink-2);
}
.lvl{
  position:absolute; top:8px; left:8px; z-index:2;
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;
  background:rgba(25,25,25,.72); color:#fff; backdrop-filter:blur(4px);
}

/* 书籍详情 */
/* 书籍详情：书头单独一块（原来误用两列 grid，封面独占左列导致右侧大片留白） */
.detail{display:block}
.dhead{display:flex; gap:13px; align-items:flex-start}
.dcover{width:132px; flex:none; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.dtitle{font-size:20px; letter-spacing:-.02em; margin-bottom:4px}
.dmain{flex:1; min-width:0; display:flex; flex-direction:column}
.dstats{display:flex; gap:5px 13px; flex-wrap:wrap; margin:9px 0 0; font-size:12.5px; color:var(--ink-3)}
.dstats b{color:var(--ink); font-weight:700; font-size:15px}
.dact{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:12px}
.dprog{
  height:4px; border-radius:2px; background:var(--bg-sunken); overflow:hidden; margin-top:10px;
}
.dprog i{display:block; height:100%; background:var(--star)}
.review{font-size:14px; line-height:1.85; color:var(--ink-2)}
.review h2{font-size:15.5px; color:var(--ink); margin:15px 0 7px}
.review h2:first-child{margin-top:0}
.review strong{color:var(--ink); font-weight:700}
.review ul{padding-left:20px}

/* 目录 */
.chlist{display:flex; flex-direction:column; gap:2px}
.chrow,.cont-row{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  border-radius:var(--radius-sm); border:1px solid transparent;
}
.chrow:hover,.cont-row:hover{background:var(--bg-sunken)}
.chrow+.chrow{border-top:1px solid var(--line); border-radius:0}
.chno{
  width:28px; height:28px; flex:none; border-radius:8px; background:var(--bg-sunken);
  color:var(--ink-3); display:grid; place-items:center; font-size:12.5px; font-weight:700;
}
.cht,.cont-t{flex:1; min-width:0; font-size:14.5px; font-weight:500}
.chd,.cont-c{font-size:12px; color:var(--ink-3); white-space:nowrap}
.chf,.chk{flex:none}
.cont{display:flex; flex-direction:column}
.lock{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent);
  font-size:13.5px; font-weight:600;
}
.lock-in{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.lock-i{font-size:13.5px; color:var(--ink-2); line-height:1.8}
.lock-a{font-size:13px}

/* ============================================================
   阅读页
   ============================================================ */
/* 章节头部：纵向占用尽量小（分隔线交给下方 .rtabs，避免两条线挨着） */
.rhead{margin-bottom:7px; padding-bottom:2px}
.rtitle{font-size:17.5px; letter-spacing:-.02em; margin:2px 0 3px; line-height:1.3}
.rmeta{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:4px 9px; flex-wrap:wrap}
/* 工具按钮靠左排（原 margin-left:auto 推到右端，单手握持时拇指够不到） */
.rtools{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
/* 阅读页返回链接：并入章节进度行，不再单独占一整行 */
.rback{
  flex:1 1 auto; min-width:0;
  margin-left:-7px;                 /* 抵消内边距，与下方大标题左缘对齐 */
  padding:3px 7px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------- 阅读分栏（原文 / 导读 / 生词 / 句型 / 发音） ----------------
   尺寸完全固定：宽 56 × 高 32，字号/内边距/圆角在任何设备上都一致，
   既不随屏幕缩放，也不随行宽均分（flex:0 0 auto + 定宽）。
   徽标与锁用绝对定位伪元素，不占宽度。
   五个一排共 296px —— 320px 及以上视口都能排下；
   更窄的极端宽度用 flex-wrap 换行兜底，绝不截断。 */
.rtabs{
  position:sticky; top:var(--topbar-h); z-index:19;
  display:flex; flex-wrap:wrap; gap:4px;
  padding:4px 0 5px; margin-bottom:7px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.rtab{
  position:relative; flex:0 0 auto;
  width:56px;                 /* 固定宽度：不随屏幕/行宽变化 */
  display:inline-flex; align-items:center; justify-content:center;
  gap:2px; height:32px; padding:0; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-elev); color:var(--ink-2);
  font-size:var(--fs-btn); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.rtab:hover{border-color:var(--ink-3); color:var(--ink)}
.rtab.on{background:var(--accent); border-color:var(--accent); color:#fff}
.rtab-i{font-size:var(--fs-btn); line-height:1; flex:none}
.rtab-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 形态标记用绝对定位的伪元素，不占宽度 —— 保证每个分栏宽度一致且固定 */
.rtab[data-locked="1"]{border-style:dashed}
.rtab[data-locked="1"]::after{
  content:"🔒"; position:absolute; top:1px; right:2px;
  font-size:9px; line-height:1; opacity:.75;
}
.rtab-n{
  position:absolute; top:1px; right:3px; min-width:12px;
  font-size:9px; font-weight:700; line-height:1; padding:0 2px; border-radius:999px;
  background:var(--bg-sunken); color:var(--ink-3); text-align:center;
}
.rtab.on .rtab-n{background:rgba(255,255,255,.28); color:#fff}
.rtab.on[data-locked="1"]::after{opacity:1}

.rpane{display:none}
.rpane.on{display:block}
.rpane-tip{font-size:12px; color:var(--ink-3); margin:0 0 9px; line-height:1.6}

/* 只有在「原文」栏才有意义的工具（中英对照） */
.only-text{display:none!important}
body[data-rtab="text"] .only-text{display:inline-block!important}
.rnav{font-size:13px; color:var(--ink-2); font-weight:600; padding:6px 10px; border-radius:8px}
.rback:hover,.rnav:hover{background:var(--bg-sunken); color:var(--accent)}

.reading{font-family:var(--font-read); font-size:var(--fs); line-height:var(--lh); color:var(--ink)}
.reading p{margin:0 0 1.1em}
.para{
  margin:0 0 2px; padding:4px 8px; border-radius:var(--radius-sm);
  transition:background .18s; position:relative;
}
.para+.para{margin-top:1px}
.para:hover{background:var(--bg-sunken)}
.para.on{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.en{font-family:var(--font-read); font-size:var(--fs); line-height:var(--lh); color:var(--ink); margin:0}
.cn{
  font-family:var(--font-ui); font-size:calc(var(--fs, 20px) * .78); line-height:1.9; color:var(--ink-3);
  margin:4px 0 0; padding-left:10px; border-left:2px solid var(--line);
}
.para.only-en .cn{display:none}
.spk-btn,.cbox-btns button{
  border:1px solid var(--line); background:var(--bg-elev); color:var(--ink-3);
  border-radius:7px; padding:3px 8px; font-size:12px; cursor:pointer;
}
.spk-btn:hover{border-color:var(--accent); color:var(--accent)}

/* 导读 */
.guide,.sec{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:11px}
.sec-t{font-size:14.5px; font-weight:700; margin-bottom:9px; display:flex; align-items:center; gap:7px}
.sec-t::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--accent)}
.sec-n{font-size:12px; color:var(--ink-3); font-weight:500}
.sec-block{margin-bottom:11px}

/* 生词 / 句型 / 发音 */
.vocab{display:flex; flex-direction:column; gap:2px}
.vrow{display:flex; gap:12px; align-items:flex-start; padding:8px 9px; border-radius:var(--radius-sm)}
.vrow:hover{background:var(--bg-sunken)}
.vrow+.vrow{border-top:1px solid var(--line)}
.vw{width:150px; flex:none}
.vw b{font-family:var(--font-read); font-size:16px; font-weight:700; display:block}
.vph{font-family:var(--font-mono); font-size:12px; color:var(--accent-2)}
.vm{flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); line-height:1.75}
.vm em{font-style:normal; color:var(--ink-3); display:block; margin-top:3px; font-size:12.5px}
.vex{font-family:var(--font-read); font-size:13.5px; color:var(--ink-3); margin-top:4px}

.sent{padding:11px; border-radius:var(--radius-sm); border:1px solid var(--line); margin-bottom:8px; background:var(--bg)}
.s-en{font-family:var(--font-read); font-size:15.5px; line-height:1.75; color:var(--ink)}
.s-cn{font-size:13px; color:var(--ink-3); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}
.sent .ex-body,.ex-body{font-size:13.5px; color:var(--ink-2); line-height:1.85; margin-top:10px}
.ex-body code{font-family:var(--font-mono); font-size:12.5px; background:var(--bg-sunken); padding:1px 5px; border-radius:4px}
.ex-toggle{margin-top:8px; font-size:12.5px; color:var(--accent); cursor:pointer; border:0; background:none; padding:0}

.pron{display:flex; flex-direction:column; gap:8px}
.prow{padding:10px 11px; border-radius:var(--radius-sm); background:var(--bg)}
.pt{font-family:var(--font-read); font-size:14.5px; font-weight:700; margin-bottom:6px}
.pt-row{font-size:13.5px; color:var(--ink-2); line-height:1.85}
.pn{font-family:var(--font-mono); font-size:12px; color:var(--accent-2)}
.pw{font-size:13px; color:var(--ink-3)}
.kw-tip{font-size:12.5px; color:var(--ink-3); margin-top:6px}

/* 音频播放器 */
.player{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:var(--radius);
  background:var(--bg-elev); border:1px solid var(--line); margin-bottom:8px;
}
.pbtn{
  width:36px; height:36px; flex:none; border-radius:50%; border:0;
  background:var(--accent); color:#fff; font-size:15px; cursor:pointer;
  display:grid; place-items:center;
}
.pbtn:hover{background:#9C2C23}
.pbar{flex:1; height:5px; border-radius:3px; background:var(--bg-sunken); cursor:pointer; position:relative}
.pfill{height:100%; width:0; border-radius:3px; background:var(--accent)}
.ptime{font-size:12px; color:var(--ink-3); font-family:var(--font-mono); white-space:nowrap}
/* 工具按钮双文案：宽屏完整、窄屏简称（配合窄屏媒体查询，保证信息行不换行） */
.tool .tm{display:none}
.tool{
  border:1px solid var(--line); background:var(--bg-elev); color:var(--ink-2);
  border-radius:8px; padding:4px 8px; font-size:var(--fs-btn); cursor:pointer;
}
.tool:hover{border-color:var(--ink-3); color:var(--ink)}
.tool.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

/* ============================================================
   会员 / 支付 / 二维码
   ============================================================ */
.plans{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:14px}
.plan{
  position:relative; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 14px; display:flex; flex-direction:column; gap:9px;
}
.plan:hover{border-color:var(--ink-3)}
.plan.hot{border-color:var(--accent); box-shadow:var(--shadow)}
.plan-badge{
  position:absolute; top:-1px; right:-1px; padding:4px 11px; border-radius:0 var(--radius) 0 var(--radius);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
}
.plan-n{font-size:15px; font-weight:700; color:var(--ink-2)}
.plan-p{display:flex; align-items:baseline; gap:2px}
.plan-p .cur{font-size:16px; color:var(--accent); font-weight:700}
.plan-p .num{font-size:28px; font-weight:800; color:var(--accent); letter-spacing:-.03em; line-height:1}
.plan-p del{font-size:13px; color:var(--ink-3); margin-left:8px}
.plan-d{font-size:12.5px; color:var(--ink-3)}
.plan-b{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; flex:1}
.plan-b li{font-size:13.5px; color:var(--ink-2); display:flex; gap:7px; align-items:flex-start}
.mfaq{font-size:13.5px; color:var(--ink-2); line-height:1.9}
.mfaq dt{font-weight:700; margin-top:14px; color:var(--ink)}
.mfaq dd{margin:5px 0 0}
.paywrap{display:grid; gap:13px; grid-template-columns:1fr}
.paycard{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.payplan{font-size:14px; color:var(--ink-2); margin-bottom:6px}
.payamt{font-size:30px; font-weight:800; color:var(--accent); letter-spacing:-.02em; margin-bottom:16px}
.payst{font-size:13.5px; color:var(--ink-3); margin-top:14px; display:flex; align-items:center; gap:8px}
.qrbox{
  background:#fff; padding:12px; border-radius:var(--radius); border:1px solid var(--line);
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
}
.qrbox canvas,.qrbox img{width:180px; height:180px}
.qrtip{font-size:12.5px; color:var(--ink-3); text-align:center; max-width:230px; line-height:1.7}

/* ============================================================
   个人中心 / 记录 / 统计
   ============================================================ */
.me-h{display:flex; align-items:center; gap:13px; margin-bottom:14px}
.me-h .avatar{width:48px; height:48px; font-size:19px}
.me-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); margin-bottom:14px}
.me-stat,.me-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:13px}
.me-stat .k{font-size:12px; color:var(--ink-3); margin-bottom:6px}
.me-stat .v{font-size:22px; font-weight:800; letter-spacing:-.02em}
.me-e{font-size:13.5px; color:var(--ink-2); line-height:1.9}
.rec-list{display:flex; flex-direction:column; gap:2px}
.rec-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:var(--radius-sm); border:1px solid var(--line); margin-bottom:5px;
  background:var(--bg-elev);
}
.rec-row:hover{border-color:var(--ink-3)}
.rec-t{flex:1; min-width:0; font-size:14px; font-weight:600}
.rec-go{font-size:13px; color:var(--accent); font-weight:600; white-space:nowrap}

.kpis{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); margin-bottom:14px}
.kpi{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:13px}
.kpi .k{font-size:12px; color:var(--ink-3); margin-bottom:6px}
.kpi .v{font-size:24px; font-weight:800; letter-spacing:-.03em}
.kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.kv:last-child{border-bottom:0}
.kv .kl{color:var(--ink-3)}
.bars{display:flex; align-items:flex-end; gap:5px; height:108px; padding-top:8px}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.bar{width:100%; max-width:34px; border-radius:5px 5px 0 0; background:var(--accent); opacity:.85}
.bar-col .bl{font-size:10.5px; color:var(--ink-3); white-space:nowrap}
.ops{display:flex; gap:6px; flex-wrap:wrap}
/* 书卡底部操作区：主按钮 + 书架按钮
   原来 .bact 被当成「一个按钮」来写（inline-flex + height:28px + 边框），
   但模板里它是包裹两个按钮的容器，导致子按钮 39px 高溢出容器、文字折行。
   现在改为两列等宽的自适应行，窄卡也不折行。 */
.bact{display:flex; gap:6px; align-items:stretch; margin-top:auto; padding-top:5px}
.bact .inl{flex:1; display:flex; min-width:0}
.bact .btn-read,
.bact .btn-shelf{
  flex:1; min-width:0; width:100%; height:29px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:var(--fs-btn); font-weight:600; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.bact .btn-read{background:var(--ink); border:1px solid var(--ink); color:var(--bg-elev)}
.bact .btn-read:hover{background:var(--accent); border-color:var(--accent)}
.bact .btn-shelf{border:1px solid var(--line); background:var(--bg-elev); color:var(--ink-2)}
.bact .btn-shelf:hover{border-color:var(--accent); color:var(--accent)}
.bact .btn-shelf.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.st-pending{color:var(--accent-2)}
.st-paid{color:#3A6B3A}
.st-closed{color:var(--ink-3)}
.sum{font-size:13.5px; color:var(--ink-2)}

/* ============================================================
   登录 / 注册
   ============================================================ */
.auth-wrap{
  min-height:calc(100vh - var(--topbar-h) - var(--tabbar-h));
  display:grid; place-items:center; padding:22px 14px;
}
.auth-card{
  width:100%; max-width:400px; background:var(--bg-elev);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 20px; box-shadow:var(--shadow);
}
.auth-title{font-size:19.5px; text-align:center; letter-spacing:-.02em}
.auth-sub{text-align:center; color:var(--ink-3); font-size:13px; margin:6px 0 18px}
.auth-form button{width:100%; margin-top:8px}
.auth-alt{text-align:center; font-size:13.5px; color:var(--ink-3); margin-top:18px}
.auth-alt a{color:var(--accent); font-weight:600}

/* ============================================================
   补齐：阅读页精读 / 详情 / 会员 / 后台
   （骨架迁移时模板已用、样式遗漏的类）
   ============================================================ */

/* ---------- 书籍名（书卡 / 书架 / 详情） ---------- */
.ben{
  font-family:var(--font-read); font-size:12.5px; color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.den{font-family:var(--font-read); font-size:14px; color:var(--ink-3); margin-top:4px}
.desc{font-size:14.5px; color:var(--ink-2); line-height:1.95}

/* ---------- 阅读页：章节导读 ---------- */
.g-t{font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.g-t::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--accent)}
.g-b{font-size:14.5px; color:var(--ink-2); line-height:1.95}
.g-b h1,.g-b h2,.g-b h3,.g-b h4{font-size:14px; color:var(--ink); margin:15px 0 7px; font-weight:700}
.g-b h1:first-child,.g-b h2:first-child,.g-b h3:first-child{margin-top:0}
.g-b ul,.g-b ol{margin:8px 0; padding-left:20px}
.g-b li{margin:5px 0}
.g-b strong{color:var(--ink); font-weight:700}
.g-b code{
  font-family:var(--font-mono); font-size:12.5px;
  background:var(--bg-sunken); padding:1px 5px; border-radius:4px;
}
.g-b blockquote{
  margin:10px 0; padding:8px 13px; border-left:3px solid var(--line);
  background:var(--bg); color:var(--ink-3); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.g-b hr{margin:14px 0}

/* ---------- 学习板块标题（与 .sec-t 同族） ---------- */
.sb-t{font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.sb-t::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--accent)}
.sb-n{font-size:12px; color:var(--ink-3); font-weight:500}

/* ---------- 朗读按钮（生词 / 发音 / 逐段） ---------- */
.vsp{
  border:1px solid var(--line); background:var(--bg-elev); color:var(--ink-3);
  border-radius:7px; height:24px; min-width:26px; padding:0 6px;
  font-size:11.5px; line-height:1; cursor:pointer;
  display:inline-grid; place-items:center; vertical-align:middle;
}
.vsp{margin-left:6px}
.vsp:hover{border-color:var(--accent); color:var(--accent)}
.vsp.playing{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.vsp:disabled{opacity:.4; cursor:default}

/* 阅读设置的状态开关（作用在 body 上，跨页面保持一致） */
body[data-trans="off"] .para .cn{display:none}

/* ---------- 句型解析折叠 ---------- */
.sent .ex-body{margin-top:10px}
.ex-body[hidden]{display:none}
.ex-toggle{
  margin-top:8px; font-size:12.5px; color:var(--accent); cursor:pointer;
  border:0; background:none; padding:0; font-weight:600;
}
.ex-toggle:hover{text-decoration:underline}

/* ---------- 精读标注：原文里的生词 / 句型 ---------- */
/* 生词：虚线下划线提示，点按弹释义并自动发音 */
.vw-hl{
  cursor:pointer; border-bottom:1.5px dashed var(--accent-2);
  transition:background .15s,color .15s,border-color .15s;
}
.vw-hl:hover,.vw-hl:active{background:var(--accent-soft); color:var(--accent)}
.vw-hl.playing{background:var(--accent-soft); border-bottom-color:var(--accent); color:var(--accent)}

/* 句型：整句带底色且整句可点（不必去点句末那个小标号）。
   底色用 box-shadow 外扩 2px，避免加 padding 改变换行点。 */
.s-sent{
  cursor:pointer; border-radius:4px;
  background:var(--sent-bg);
  box-shadow:0 0 0 2px var(--sent-bg);
  transition:background .15s,box-shadow .15s;
}
.s-sent:hover,.s-sent:active{
  background:var(--sent-bg-hover);
  box-shadow:0 0 0 2px var(--sent-bg-hover);
}

/* 句型：句末上标编号，点按弹解析；用相对定位抬升，不撑高行距 */
.smark{
  position:relative; top:-.42em;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:14px; height:14px; padding:0 3px; margin-left:2px;
  border:0; border-radius:999px; background:var(--accent); color:#fff;
  font-family:var(--font-ui); font-size:9.5px; font-weight:700; line-height:1;
  cursor:pointer;
}
.smark:hover{background:#9C2C23}

/* ---------- 精读弹出卡片（底部抽屉，桌面居中） ---------- */
.mk-pop{position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center}
.mk-pop[hidden]{display:none}
body.mk-open{overflow:hidden}
.mk-mask{position:absolute; inset:0; background:rgba(20,18,16,.42)}
.mk-card{
  position:relative; width:100%; max-width:560px; max-height:72vh; overflow:auto;
  padding:16px 15px calc(18px + env(safe-area-inset-bottom));
  background:var(--bg-elev); border-radius:16px 16px 0 0;
  box-shadow:0 -10px 34px -14px rgba(0,0,0,.35);
  animation:mkUp .18s ease-out;
}
@keyframes mkUp{from{transform:translateY(16px); opacity:.5}to{transform:none; opacity:1}}
.mk-x{
  flex:0 0 auto; align-self:center; width:30px; height:30px; padding:0;
  border:0; border-radius:50%; background:var(--bg-sunken); color:var(--ink-3);
  font-size:14px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.mk-x:hover{background:var(--line); color:var(--ink)}
.mk-top{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.mk-top .mk-tag{margin-bottom:0}
.mk-body{padding-top:3px}
.mkc[hidden]{display:none}
.mk-hd{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.mk-w{font-family:var(--font-read); font-size:21px; font-weight:700; letter-spacing:-.01em}
.mk-ph{font-family:var(--font-mono); font-size:13px; color:var(--accent-2)}
.mk-say{
  border:1px solid var(--line); background:var(--bg-elev);
  color:var(--ink-2); border-radius:8px; padding:4px 9px;
  font-size:var(--fs-btn); cursor:pointer; white-space:nowrap;
}
.mk-say:hover{border-color:var(--accent); color:var(--accent)}
.mk-say.playing{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.mk-mean{font-size:14.5px; color:var(--ink-2); line-height:1.85; margin-top:10px}
.mk-ex{
  font-family:var(--font-read); font-size:14px; color:var(--ink-3);
  margin-top:9px; padding-left:11px; border-left:2px solid var(--line); line-height:1.75;
}
.mk-tag{
  display:inline-block; font-size:11px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:5px; padding:2px 7px; margin-bottom:9px;
}
.mkc .s-en{font-size:16px}
@media (min-width:760px){
  .mk-pop{align-items:center}
  .mk-card{max-height:76vh; border-radius:var(--radius); padding-bottom:18px}
}

/* ---------- 上下章导航 ---------- */
.rnav{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:18px 0 5px}
.rn{
  display:flex; flex-direction:column; gap:3px; min-width:0; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  font-size:12.5px; color:var(--ink-3);
}
.rn strong{
  font-size:14px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.rn:hover{border-color:var(--accent)}
a.rn:hover strong{color:var(--accent)}
.rn.next{text-align:right}
.rn.prev{text-align:left}
.rn.disabled{background:transparent; border-style:dashed; justify-content:center}

/* ---------- 阅读设置面板 ---------- */
.set-group{padding:11px 0; border-bottom:1px solid var(--line)}
.set-group:last-child{border-bottom:0; padding-bottom:2px}
.set-group:first-child{padding-top:2px}
.set-gt{font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; margin-bottom:11px}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px}
.set-row:last-child{margin-bottom:0}
.set-row .lb{font-size:13.5px; color:var(--ink-2)}
.set-row .lb i{display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:none}
.stepper button{
  width:30px; height:28px; border:0; background:var(--bg-elev); color:var(--ink-2);
  font-size:15px; cursor:pointer; display:grid; place-items:center;
}
.stepper button:hover{background:var(--bg-sunken); color:var(--accent)}
.stepper .val{
  min-width:42px; text-align:center; font-size:12.5px;
  font-family:var(--font-mono); color:var(--ink-2);
}
.swatches{display:flex; gap:8px}
.sw{width:30px; height:30px; border-radius:9px; border:2px solid var(--line); cursor:pointer; padding:0}
.sw.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.sw[data-bg="paper"]{background:#F6F4EF}
.sw[data-bg="white"]{background:#FFFFFF}
.sw[data-bg="green"]{background:#EAF1E6}
.sw[data-bg="gray"]{background:#EDEEF1}
.switch{
  position:relative; width:44px; height:25px; border-radius:13px; flex:none;
  background:var(--bg-sunken); border:1px solid var(--line); cursor:pointer;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:19px; height:19px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .16s;
}
[data-theme="dark"] .switch::after{background:#DAD5CC}
.switch.on{background:var(--accent); border-color:var(--accent)}
.switch.on::after{transform:translateX(19px)}

/* 阅读背景色（仅浅色主题下生效，避免与暗色冲突） */
body[data-bg="white"]:not([data-theme="dark"]){--bg:#FFFFFF; --bg-sunken:#F2F2F2}
body[data-bg="green"]:not([data-theme="dark"]){--bg:#EAF1E6; --bg-sunken:#DFE8DA}
body[data-bg="gray"]:not([data-theme="dark"]){--bg:#EDEEF1; --bg-sunken:#E2E4E9}

/* ---------- 会员：个人中心 / 记录 / 二维码 ---------- */
.me{display:flex; flex-direction:column; gap:13px}
.me-exp{font-size:13px; color:var(--ink-3); margin-top:8px}
.ptitle{font-size:21px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ptitle .pn{font-family:var(--font-ui); font-size:12.5px; color:var(--ink-3); font-weight:500}
.qr{display:grid; place-items:center; min-height:180px}
.qr canvas,.qr img{display:block}
.kpi .kv{display:block; font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.kpi .kl{display:block; font-size:12px; color:var(--ink-3); margin-top:6px}
.me-stat strong{display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.me-stat span{display:block; font-size:12px; color:var(--ink-3); margin-top:6px}

/* ---------- 后台 ---------- */
.cols{display:grid; gap:13px; grid-template-columns:1fr}
.lk,.lk-dg{
  border:1px solid var(--line); background:var(--bg-elev); color:var(--ink-2);
  border-radius:7px; padding:4px 9px; font-size:12px; cursor:pointer;
  white-space:nowrap; line-height:1.5;
}
.lk:hover{border-color:var(--accent); color:var(--accent)}
.lk-dg:hover{border-color:#B4342A; color:#B4342A; background:var(--accent-soft)}
.mform{display:inline-block; vertical-align:middle}
.search{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.search input{
  height:34px; padding:0 11px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-elev); color:var(--ink); font:13.5px var(--font-ui); min-width:150px;
}
.search input:focus{outline:0; border-color:var(--accent)}
.st{
  display:inline-block; font-size:12px; font-weight:600; padding:2px 7px;
  border-radius:5px; background:var(--bg-sunken); white-space:nowrap;
}
.th{width:38px; height:50px; object-fit:cover; border-radius:5px; border:1px solid var(--line)}
.vip{
  display:inline-block; font-size:11.5px; font-weight:700; padding:2px 7px;
  border-radius:5px; background:var(--accent); color:#fff;
}

/* 后台页头：.pt-row 在阅读页另有含义，这里按后台作用域覆盖 */
body.admin .pt-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:18px; font-size:inherit; line-height:normal; color:inherit;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:520px){
  .wrap{padding:11px 11px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:9px}
  .dhead{flex-direction:row; gap:12px}
  .dcover{width:96px}
  .dtitle{font-size:18px}
  .vw{width:112px}
  .vrow{flex-direction:column; gap:6px}
  .plan-p .num{font-size:30px}
  .bars{height:104px}
  /* 窄屏：表格压缩内边距并允许横向滚动 */
  .tbl{min-width:540px}
  .tbl th,.tbl td{padding:9px 10px}
  .tbl-wrap{-webkit-overflow-scrolling:touch}
  /* 窄屏：阅读导航与设置面板 */
  .rnav{gap:8px; margin:22px 0 6px}
  .rn{padding:11px 12px}
  .rn strong{font-size:13px}
  .set-row{gap:10px}
  .search input{min-width:0; flex:1}
  /* 窄屏：工具按钮改用简称，保证信息行仍是一行（不挤占正文） */
  .tool .tf{display:none}
  .tool .tm{display:inline}
  .tool{padding:4px 7px}
  .wrap:has(> .reader){padding:9px 9px 0}
}

@media (min-width:760px){
  .paywrap{grid-template-columns:1.1fr .9fr}
  .dcover{width:152px}
  .cols{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  .app,.app.admin{padding-bottom:0}
  .app.admin:not(.no-tabbar){padding-bottom:0}
  .sidebar{display:flex!important}
  .desktop-only{display:block!important}
  .tabbar{display:none}
  .wrap{padding:20px 24px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(166px,1fr))}
  .hero,.shelf-hero,.mhero{padding:24px 22px}
  .hero h1,.shelf-hero h1,.mhero h1{font-size:24px}
}

@media print{
  .sidebar,.topbar,.tabbar,.player,.rnav,.rback{display:none!important}
  body{background:#fff}
}