/* ── 咯吱翻页书 共享样式层 v1.0 ── */

/* ── 1. Reset ── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
button,input,textarea,select{font-family:inherit;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ── 2. Design Tokens ── */
:root{
  --bg:#f4f8f0;
  --bg-dark:#070b14;
  --bg-dark2:#0f1a30;
  --card:#ffffff;
  --text:#1a2a1a;
  --muted:#5a7a5a;
  --muted2:#8aaa8a;
  --line:#c8d4c0;
  --line2:#dce8d4;
  --primary:#2a4a2a;
  --accent:#c8a96e;
  --accent-hover:#b8994e;
  --danger:#ef4444;
  --warn:#f59e0b;
  --focus:#c8a96e;
  --grad-progress:linear-gradient(90deg,#c8a96e,#f5a623);
  --grad-hero:radial-gradient(ellipse at top,#0f1a30 0%,#070b14 70%);
  --grad-auth:linear-gradient(135deg,#0f2a0f 0%,#1a3a1a 100%);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 4px 24px rgba(0,0,0,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.2);
}

/* ── 3. 通用布局 ── */
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;}
.container-sm{width:100%;max-width:720px;margin:0 auto;padding:0 24px;}
.section{padding:80px 0;}
.section-sm{padding:48px 0;}
.row{display:flex;align-items:center;}
.split{display:flex;align-items:center;justify-content:space-between;}
.centered{text-align:center;}
.stack{display:flex;flex-direction:column;gap:16px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* ── 4. 通用组件 ── */

/* 标签 tag */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;font-size:12px;font-weight:600;border-radius:99px;letter-spacing:.5px;}
.tag-blue{background:#f4f8f0;color:#8a6a2a;}
.tag-dark{background:rgba(200,169,110,.12);color:#8a6a2a;border:1px solid rgba(200,169,110,.2);}
.tag-green{background:#f0fdf4;color:#16a34a;}
.tag-warn{background:#fffbeb;color:#d97706;}

/* 提示条 notice */
.notice{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:10px;font-size:13px;line-height:1.6;}
.notice-icon{flex-shrink:0;font-size:16px;margin-top:1px;}
.notice-blue{background:#f4f8f0;border:1px solid #dce8d4;color:#8A7A00;}
.notice-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
.notice-green{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;}

/* 分割线 */
.divider{border:none;border-top:1px solid var(--line);margin:28px 0;}

/* ── 5. 导航栏（复用 v15 .hdr）── */
.hdr{background:#f8faf6;border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;gap:16px;flex-shrink:0;position:sticky;top:0;z-index:100;}
.logo{width:36px;height:36px;background:#2a4a2a;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0;}
.logo-text{font-size:16px;font-weight:700;color:#1a2a1a;white-space:nowrap;}
.hdr-nav{display:flex;align-items:center;gap:24px;margin-left:auto;}
.hdr-link{font-size:14px;color:var(--muted);font-weight:500;transition:color .15s;}
.hdr-link:hover{color:#1a2a1a;}
.hdr-link.active{color:#1a2a1a;}
.htitle{font-size:15px;font-weight:600;}
.hsub{font-size:12px;color:var(--muted);margin-top:1px;}

/* ── 6. 卡片（复用 v15 .card）── */
.card{background:var(--card);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-sm);width:100%;}
.card-sm{padding:20px;}
.card-lg{padding:40px;}

/* ── 7. 按钮（复用 v15 .btn-p .btn-ex）── */
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;border:none;border-radius:var(--radius-sm);background:#2a4a2a;color:#fff;cursor:pointer;transition:opacity .2s;white-space:nowrap;}
.btn-p:hover{opacity:.85;}
.btn-p:disabled{opacity:.35;cursor:not-allowed;}
.btn-p.w-full{width:100%;}
.btn-ex{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;border:none;border-radius:var(--radius-sm);background:#8a6a2a;color:#fff;cursor:pointer;transition:opacity .2s;white-space:nowrap;}
.btn-ex:hover{opacity:.88;}
.btn-ex.w-full{width:100%;}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:#2a4a2a;cursor:pointer;transition:all .2s;}
.btn-ghost:hover{border-color:#9ca3af;background:#f9fafb;}
.btn-sm{padding:8px 16px;font-size:13px;}
.btn-lg{padding:15px 32px;font-size:16px;}

/* ── 8. 表单（复用 v15 .fl）── */
.fl{margin-bottom:18px;}
.fl label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:7px;}
.fl input[type=text],.fl input[type=email],.fl input[type=tel],.fl input[type=password]{width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;color:#1a2a1a;outline:none;transition:border-color .2s;}
.fl input:focus{border-color:var(--focus);}
.fl .err{font-size:12px;color:#ef4444;margin-top:5px;}

/* 质量选项（复用 v15 .qwrap .qopt）*/
.qwrap{display:flex;gap:10px;}
.qopt{flex:1;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;transition:all .2s;}
.qopt:hover{border-color:#D4C050;}
.qopt.sel{border-color:var(--accent);background:#f4f8f0;}
.qopt input{display:none;}
.ql{font-size:13px;font-weight:600;color:#1a2a1a;margin-bottom:3px;}
.qs{font-size:11px;color:var(--muted);}
.qopt.sel .ql{color:#8a6a2a;}

/* ── 9. 上传区（复用 v15 #dz）── */
.dz{border:2px dashed #d1d5db;border-radius:12px;padding:44px 24px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:20px;}
.dz:hover,.dz.ov{border-color:var(--accent);background:#f4f8f0;}
.dz-icon{font-size:48px;margin-bottom:12px;}
.dz-title{font-size:16px;font-weight:600;margin-bottom:6px;}
.dz-sub{font-size:13px;color:var(--muted);}

/* 上传元信息 */
.upload-meta{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.upload-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.upload-meta-row .label{color:var(--muted);}
.upload-meta-row .val{font-weight:600;color:#1a2a1a;}

/* ── 10. 进度条（复用 v15 .po .pi2）── */
.po{background:#f3f4f6;border-radius:99px;height:8px;overflow:hidden;margin-bottom:10px;}
.pi2{height:100%;border-radius:99px;background:var(--grad-progress);width:0%;transition:width .3s;}
.progress-card{background:#fff;border-radius:var(--radius-md);padding:32px 28px;box-shadow:var(--shadow-sm);text-align:center;}
.progress-title{font-size:18px;font-weight:600;margin-bottom:6px;}
.progress-sub{font-size:13px;color:var(--muted);margin-bottom:24px;}
.progress-label{font-size:13px;color:#374151;font-weight:500;margin-bottom:6px;}
.progress-hint{font-size:12px;color:var(--muted2);margin-top:6px;}

/* ── 11. 亮色页骨架（复用 v15 .ls .lbody）── */
.ls{background:var(--bg);color:#1a2a1a;min-height:100vh;display:flex;flex-direction:column;}
.lbody{flex:1;padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:20px;}

/* ── 12. 深色阅读区（复用 v15 #bk 结构）── */
.bk{background:var(--bg-dark);color:#e2e8f0;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.bk-tbar{display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(10,15,30,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;flex-wrap:wrap;}
.bk-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;background:var(--grad-hero);cursor:zoom-in;user-select:none;-webkit-user-select:none;}
.bk-bot{padding:10px 14px;background:rgba(10,15,30,.88);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.ib{background:none;border:none;padding:5px 8px;color:#64748b;font-size:15px;border-radius:6px;line-height:1;cursor:pointer;transition:color .15s;}
.ib:hover{color:#e2e8f0;}
.nav-b{display:flex;align-items:center;gap:5px;padding:8px 14px;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.04);color:#e2e8f0;cursor:pointer;transition:all .15s;}
.nav-b:hover:not(:disabled){background:rgba(255,255,255,.1);}
.nav-b:disabled{opacity:.3;cursor:not-allowed;}
.rbar{height:3px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;}
.rfill{height:100%;background:var(--grad-progress);border-radius:99px;transition:width .3s;}

/* 阅读区目录侧栏 */
.tov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;display:none;align-items:flex-start;}
.tov.open{display:flex;}
.tdr{background:#0f172a;width:min(310px,90vw);height:100%;display:flex;flex-direction:column;box-shadow:8px 0 40px rgba(0,0,0,.6);animation:sli .22s ease;}
@keyframes sli{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.tdrh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);}
.tdrh span{font-size:15px;font-weight:600;color:#e2e8f0;}
.tdrs{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.tdrs input{width:100%;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.04);color:#e2e8f0;font-size:13px;outline:none;}
.tdrl{flex:1;overflow-y:auto;}
.dri{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s;}
.dri:hover,.dri.act{background:rgba(255,255,255,.06);}
.drn{font-size:13px;color:#cbd5e1;}
.drp{font-size:11px;color:#475569;flex-shrink:0;margin-left:8px;}

/* ── 13. 首页 hero 区 ── */
.hero-dark{background:var(--grad-hero);padding:96px 0 80px;color:#e2e8f0;}
.hero-inner{max-width:1160px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.hero-copy{display:flex;flex-direction:column;gap:24px;}
.hero-title{font-size:48px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.5px;}
.hero-sub{font-size:17px;color:#94a3b8;line-height:1.75;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;}
.hero-book{width:260px;border-radius:12px;box-shadow:0 32px 80px rgba(0,0,0,.6);transform:perspective(600px) rotateY(-6deg);}
.hero-badges{position:absolute;right:-20px;display:flex;flex-direction:column;gap:10px;}
.float-badge{background:rgba(15,23,42,.85);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#e2e8f0;backdrop-filter:blur(8px);white-space:nowrap;}
.float-badge-icon{font-size:16px;}

/* ── 14. 功能卡（首页卖点）── */
.feature-card{background:#fff;border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;}
.feature-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;}
.feature-icon-blue{background:#f4f8f0;}
.feature-icon-purple{background:#f5f3ff;}
.feature-icon-green{background:#f0fdf4;}
.feature-icon-orange{background:#fff7ed;}
.feature-title{font-size:16px;font-weight:700;color:#1a2a1a;}
.feature-desc{font-size:13px;color:var(--muted);line-height:1.7;}

/* ── 15. 步骤区 ── */
.step-list{display:flex;gap:32px;justify-content:center;}
.step-item{flex:1;max-width:240px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.step-num{width:48px;height:48px;border-radius:50%;background:#2a4a2a;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.step-title{font-size:15px;font-weight:600;color:#1a2a1a;}
.step-desc{font-size:13px;color:var(--muted);line-height:1.7;}
.step-line{flex:1;height:2px;background:var(--line);align-self:center;margin-top:-34px;}

/* ── 16. 首页底部 CTA ── */
.cta-strip{background:#2a4a2a;padding:72px 0;color:#fff;text-align:center;}
.cta-strip-title{font-size:32px;font-weight:800;margin-bottom:12px;}
.cta-strip-sub{font-size:16px;color:#94a3b8;margin-bottom:32px;}

/* ── 17. 定价卡 ── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.price-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-md);padding:32px 28px;display:flex;flex-direction:column;gap:20px;position:relative;transition:box-shadow .2s;}
.price-card.is-featured{border-color:#8a6a2a;box-shadow:0 0 0 4px rgba(200,169,110,.08);}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#1a2a1a;color:#c8a96e;font-size:12px;font-weight:700;padding:4px 14px;border-radius:99px;white-space:nowrap;}
.price-name{font-size:18px;font-weight:700;color:#1a2a1a;}
.price-amount{font-size:36px;font-weight:800;color:#1a2a1a;line-height:1;}
.price-amount span{font-size:14px;font-weight:500;color:var(--muted);}
.price-desc{font-size:13px;color:var(--muted);}
.price-features{display:flex;flex-direction:column;gap:10px;}
.price-feature{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#374151;}
.price-feature-icon{flex-shrink:0;margin-top:2px;}
.price-feature.dim{color:var(--muted2);}
.price-feature.highlight{color:#8a6a2a;font-weight:600;}

/* ── 18. 升级提示条 ── */
.upgrade-strip{background:linear-gradient(135deg,#1a3a1a 0%,#0f2a0f 100%);border-radius:var(--radius-md);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.upgrade-strip-copy{display:flex;flex-direction:column;gap:6px;}
.upgrade-strip-title{font-size:17px;font-weight:700;color:#fff;}
.upgrade-strip-sub{font-size:13px;color:#94a3b8;}

/* ── 19. 预览页提示卡 ── */
.preview-side{background:#0f172a;border-right:1px solid rgba(255,255,255,.06);width:0;overflow:hidden;display:flex;flex-direction:column;transition:width .3s;flex-shrink:0;}
.preview-side.open{width:280px;}
.preview-side-inner{width:280px;padding:20px;display:flex;flex-direction:column;gap:16px;}
.preview-tip{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 16px;}
.preview-tip-title{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.preview-tip-body{font-size:12px;color:#94a3b8;line-height:1.7;}
.preview-upgrade{background:linear-gradient(135deg,#8a6a2a 0%,#2a4a2a 100%);border-radius:10px;padding:16px;}
.preview-upgrade-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:6px;}
.preview-upgrade-sub{font-size:12px;color:#c8a96e;margin-bottom:12px;line-height:1.6;}

/* ── 20. 用户中心统计卡 ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:#fff;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:4px;}
.stat-label{font-size:12px;color:var(--muted);font-weight:500;}
.stat-value{font-size:28px;font-weight:800;color:#1a2a1a;}
.stat-sub{font-size:12px;color:var(--muted2);}

/* 套餐状态卡 */
.plan-banner{border-radius:var(--radius-md);padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.plan-banner.free{background:#f8fafc;border:1.5px solid var(--line);}
.plan-banner.pro{background:linear-gradient(135deg,#f4f8f0 0%,#FFF8D0 100%);border:1.5px solid #dce8d4;}
.plan-banner-name{font-size:18px;font-weight:700;color:#1a2a1a;}
.plan-banner-sub{font-size:13px;color:var(--muted);margin-top:4px;}
.benefit-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.benefit-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;}

/* 记录列表 */
.record-table{width:100%;border-collapse:collapse;}
.record-table th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;padding:10px 14px;border-bottom:1.5px solid var(--line);text-align:left;}
.record-table td{padding:12px 14px;font-size:13px;color:#374151;border-bottom:1px solid var(--line2);}
.record-table tr:last-child td{border-bottom:none;}
.record-table tr:hover td{background:#f4f8f0;}
.status-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;}
.status-pill.done{background:#f0fdf4;color:#16a34a;}
.status-pill.pending{background:#fffbeb;color:#d97706;}
.status-pill.fail{background:#fef2f2;color:#dc2626;}

/* ── 21. 功能对比表 ── */
.compare-table{width:100%;border-collapse:collapse;}
.compare-table th{font-size:14px;font-weight:700;color:#1a2a1a;padding:14px 20px;text-align:center;border-bottom:2px solid var(--line);}
.compare-table th:first-child{text-align:left;}
.compare-table td{padding:12px 20px;font-size:13px;color:#374151;border-bottom:1px solid var(--line2);text-align:center;}
.compare-table td:first-child{text-align:left;font-weight:500;}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table .featured-col{background:#f4f8f0;}
.check{color:#16a34a;font-size:16px;}
.cross{color:#d1d5db;font-size:16px;}
.highlight-cell{color:#8a6a2a;font-weight:700;}

/* ── 22. 页脚 ── */
.footer{background:#f8faf6;border-top:1px solid var(--line);padding:32px 0;text-align:center;}
.footer p{font-size:13px;color:var(--muted);}

/* ── 23. 响应式 ── */
@media(max-width:992px){
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .hero-inner{grid-template-columns:1fr;gap:40px;}
  .hero-visual{display:none;}
  .hero-title{font-size:36px;}
  .price-grid{grid-template-columns:1fr;}
  .step-list{flex-direction:column;align-items:center;}
  .stats{grid-template-columns:1fr 1fr;}
  .hdr-nav .hdr-link{display:none;}
}
@media(max-width:640px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
  .hero-title{font-size:28px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn-p,.hero-actions .btn-ghost{width:100%;justify-content:center;}
  .section{padding:48px 0;}
  .stats{grid-template-columns:1fr;}
  .upgrade-strip{flex-direction:column;align-items:flex-start;}
  .plan-banner{flex-direction:column;align-items:flex-start;}
  .qwrap{flex-direction:column;}
  .cta-strip-title{font-size:24px;}
}