/* ============================================================
   长江书坊 DEMO — 设计系统 CSS
   从 Figma 设计稿（长江书坊页面）提取
   字体：仅系统字体（PingFang SC / 系统中文回退）
   基础屏幕：375 × 812 (iPhone)
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* 品牌色 */
  --c-brand:        #cea270;   /* 金色·边框/次要操作 */
  --c-brand-dk:     #b87738;   /* 深金色·链接/微信 */
  --c-active:       #d84013;   /* 橙红·主操作/激活 */
  --c-gold:         #d3af76;   /* 高亮数字 */
  --c-tag-bg:       rgba(160,137,132,.3);
  --c-tag:          #a08984;   /* 标签文字 */

  /* 背景 */
  --c-bg-warm:      #f1ede4;
  --c-bg-page:      #fbfbfb;
  --c-bg-card:      #ffffff;
  --c-bg-light:     #f5f5f5;

  /* 文字 */
  --c-t1:  #000000;
  --c-t2:  #464646;
  --c-t3:  #7b7b7b;
  --c-t4:  #979797;
  --c-ph:  #cfcdcd;

  /* 分割线 */
  --c-line: rgba(0,0,0,.1);
  --c-line-brand: rgba(206,162,112,.5);

  /* 结构尺寸 */
  --w:        375px;
  --sh:        44px;   /* StatusBar */
  --nh:        44px;   /* NavBar */
  --th:        58px;   /* TabBar */

  /* 圆角 */
  --r-tag:  3px;
  --r-btn:  6px;
  --r-card: 10px;
  --r-pill: 100px;

  /* 字体 */
  --font: -apple-system, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-tap-highlight-color: transparent;
  /* 始终保留滚动条位置，防止长短页切换时内容水平抖动 */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  background: #1a1a1a;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  /* 隐藏浏览器滚动条，但保留滚动功能（仅视觉隐藏，位置已占用） */
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}
body::-webkit-scrollbar { display: none; } /* Chrome/Safari */
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── 底部 TabBar 公用组件（js/tabbar.js 注入，CSS 提前定义） ── */
#app-tabbar {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--w); max-width: 100%;
  height: var(--th);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: .5px solid var(--c-line);
  display: flex; align-items: stretch;
  z-index: 200;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.tb-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 6px; gap: 2px;
  color: var(--c-t4); font-size: 10px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.tb-tab.active { color: var(--c-active); }
.tb-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.tb-scan {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 6px; gap: 2px;
  font-size: 10px; color: var(--c-t4);
  text-decoration: none; cursor: pointer;
}
.tb-scan .tb-icon {
  width: 50px; height: 50px;
  background: var(--c-brand);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(206,162,112,.55);
  position: absolute; top: -14px;
}
.tb-scan .tb-lbl { margin-top: 36px; font-size: 10px; }
/* 有 TabBar 的页面：底部留白，防止内容被 TabBar 遮挡 */
body.has-tabbar .page  { padding-bottom: var(--th); }
body.has-tabbar .body  { padding-bottom: 0; }
button, input, textarea {
  font-family: var(--font);
  border: none; background: none; outline: none;
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--c-ph); }

/* ── 手机外框 ────────────────────────────────────────────────── */
.page {
  width: var(--w);
  max-width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-t1);
  background: var(--c-bg-page);
  position: relative;
  overflow: hidden;
}
/* 背景变体 */
.page--grad { background: linear-gradient(180deg, var(--c-bg-warm) 0%, #f5f5f5 100%); }
.page--grad-half {
  background: linear-gradient(180deg, var(--c-bg-warm) 0%, var(--c-bg-warm) 48%, #f5f5f5 48%);
}
.page--white { background: #fff; }
.page--dark  { background: #1a1a1a; color: #fff; }

/* ── StatusBar ──────────────────────────────────────────────── */
.sb {
  height: var(--sh);
  padding: 14px 25px 8px 38px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sb__time {
  font-size: 17px; font-weight: 600;
  line-height: 22px; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sb__icons {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
}
/* Signal */
.i-signal { display: flex; align-items: flex-end; gap: 1.5px; width: 18px; height: 12px; }
.i-signal i { display: block; width: 3.5px; border-radius: 1px; background: currentColor; }
.i-signal i:nth-child(1) { height: 25%; }
.i-signal i:nth-child(2) { height: 50%; }
.i-signal i:nth-child(3) { height: 75%; }
.i-signal i:nth-child(4) { height: 100%; }
/* Battery */
.i-bat { display: flex; align-items: center; gap: 1px; }
.i-bat__shell {
  width: 25px; height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
  position: relative; overflow: hidden;
}
.i-bat__fill {
  position: absolute; left: 2px; top: 2px; bottom: 2px; right: 3px;
  background: currentColor; border-radius: 1.5px;
}
.i-bat__cap { width: 1.5px; height: 5px; background: currentColor; border-radius: 0 1px 1px 0; opacity: .4; }

/* ── NavBar ─────────────────────────────────────────────────── */
.nb {
  height: var(--nh);
  padding: 0 7px 0 15px;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.nb__back {
  width: 84px; display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; color: var(--c-t1); cursor: pointer;
}
.nb__title {
  flex: 1;
  font-size: 17px; font-weight: 500; line-height: 22px;
  text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.nb__right {
  width: 84px; display: flex; justify-content: flex-end;
  flex-shrink: 0;
}
/* WeChat 胶囊按钮 */
.capsule {
  width: 83.5px; height: 31px;
  border: 0.5px solid rgba(0,0,0,.15);
  border-radius: 16px;
  display: flex; align-items: center;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.capsule__dots {
  flex: 1; display: flex; justify-content: center; align-items: center; gap: 3px;
}
.capsule__dot { width: 3.5px; height: 3.5px; border-radius: 50%; background: #888; }
.capsule__sep { width: .5px; height: 16px; background: rgba(0,0,0,.15); flex-shrink: 0; }
.capsule__home {
  flex: 1; display: flex; justify-content: center; align-items: center; color: #666;
}

/* ── 底部 TabBar（主导航）─────────────────────────────────────── */
/* 样式已迁移至 js/tabbar.js 的 #app-tabbar，以下保留供兼容旧页面 */
.tabbar {
  height: var(--th);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(15px);
  border-top: .5px solid var(--c-line);
  display: flex; align-items: stretch;
  flex-shrink: 0;
  position: relative; z-index: 100;
}
.tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 6px; gap: 2px;
  color: var(--c-t4); font-size: 10px;
  text-decoration: none;
}
.tab.active { color: var(--c-active); }
.tab__icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.tab--scan { position: relative; }
.tab--scan .tab__icon {
  width: 50px; height: 50px;
  background: var(--c-brand);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(206,162,112,.5);
  color: #fff;
  position: absolute;
  top: -12px;
}
.tab--scan .tab__lbl { margin-top: 36px; font-size: 10px; }

/* ── 页面主体 ────────────────────────────────────────────────── */
.body {
  flex: 1;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── 卡片 ───────────────────────────────────────────────────── */
.card {
  background: var(--c-bg-card);
  border-radius: var(--r-card);
  padding: 16px;
}

/* ── 图书网格 ───────────────────────────────────────────────── */
.book-grid {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 0 30px;
}
.book-item { width: 80px; display: flex; flex-direction: column; gap: 10px; }
.book-cover {
  width: 80px; height: 116px;
  border-radius: 4px; overflow: hidden;
  background: #e8dfd8;
  position: relative; flex-shrink: 0;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 音频/视频遮罩 */
.book-cover--mask::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
}
.book-cover__play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.book-info { display: flex; flex-direction: column; gap: 2px; }
.book-title { font-size: 12px; line-height: 1.4; color: var(--c-t1); word-break: break-all; }

/* 媒体类型标签 */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 5px; border-radius: var(--r-tag);
  font-size: 10px; background: var(--c-tag-bg); color: var(--c-tag);
  white-space: nowrap; align-self: flex-start;
}

/* ── 水平 Tabs ──────────────────────────────────────────────── */
.htabs { display: flex; align-items: center; gap: 20px; padding: 0 12px; }
.htab { display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 14px; color: var(--c-t2); cursor: pointer; white-space: nowrap; }
.htab.active { color: var(--c-active); font-weight: 500; }
.htab__bar { height: 3px; width: 13px; background: var(--c-active); border-radius: 2px;
  opacity: 0; transition: opacity .2s; }
.htab.active .htab__bar { opacity: 1; }

/* ── 登录页 Seg Tabs ────────────────────────────────────────── */
.segtabs {
  display: flex; gap: 50px; justify-content: center;
  border-bottom: .5px solid var(--c-line);
  padding: 0 10px;
}
.segtab {
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 10px; font-size: 14px; color: var(--c-t2);
  border-bottom: 2px solid transparent; margin-bottom: -.5px;
}
.segtab.active { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.segtab__icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ── 表单 ───────────────────────────────────────────────────── */
.frow {
  display: flex; align-items: center;
  border-bottom: .5px solid var(--c-brand);
  height: 44px; padding: 4px 10px; gap: 10px;
}
.frow input {
  flex: 1; font-size: 14px; color: var(--c-t1);
  background: transparent; height: 100%;
}
.frow__sfx { display: flex; align-items: center; flex-shrink: 0; }

/* ── 按钮 ───────────────────────────────────────────────────── */
.btn-primary {
  width: 100%; background: var(--c-brand); color: #fff;
  border-radius: var(--r-btn); padding: 10px;
  font-size: 20px; text-align: center; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 2px;
}
.btn-sm {
  background: var(--c-tag); color: #fff;
  border-radius: 5px; padding: 3px 5px; font-size: 12px; white-space: nowrap;
}
.btn-danger {
  background: rgba(216,64,19,.2); color: var(--c-active);
  border-radius: var(--r-btn); padding: 5px 10px; font-size: 12px;
}
.btn-buy {
  background: var(--c-active); color: #fff;
  border-radius: var(--r-card); padding: 10px 20px;
  font-size: 16px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}

/* ── 搜索栏 ─────────────────────────────────────────────────── */
.searchbar {
  background: rgba(0,0,0,.06); border-radius: var(--r-pill);
  padding: 4px 12px; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-ph); height: 30px;
}

/* ── 列表行 ─────────────────────────────────────────────────── */
.lrow {
  display: flex; align-items: center;
  padding: 14px 0; gap: 12px;
  border-bottom: .5px solid var(--c-line);
}
.lrow:last-child { border-bottom: none; }
.lrow__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lrow__lbl { flex: 1; font-size: 15px; }
.lrow__val { font-size: 14px; color: var(--c-t3); }
.lrow__arr { color: var(--c-ph); font-size: 12px; margin-left: 4px; }

/* ── 区块标题 ───────────────────────────────────────────────── */
.sechd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.sechd__t { font-size: 16px; font-weight: 500; }
.sechd__m { font-size: 12px; color: var(--c-brand-dk); }

/* ── 编辑底栏 ───────────────────────────────────────────────── */
.editbar {
  height: var(--th);
  background: #fff; border-top: .5px solid var(--c-line);
  backdrop-filter: blur(15px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; flex-shrink: 0;
}
.editbar__sel { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.editbar__cnt { flex: 1; text-align: center; font-size: 14px; font-weight: 500; }

/* ── 书详情底栏 ─────────────────────────────────────────────── */
.detailbar {
  background: rgba(255,255,255,.95);
  border-top: .5px solid var(--c-line);
  backdrop-filter: blur(15px);
  display: flex; align-items: center;
  padding: 10px 16px 30px;
  gap: 20px;
  flex-shrink: 0;
}
.detailbar__actions { display: flex; gap: 20px; align-items: center; overflow: hidden; }
.detailbar__action {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 10px; color: var(--c-t3); flex-shrink: 0;
}
.detailbar__action svg { width: 20px; height: 20px; }

/* ── 播放器 ─────────────────────────────────────────────────── */
.player { display: flex; flex-direction: column; align-items: center; padding: 20px 30px; gap: 20px; }
.player__cover {
  width: 200px; height: 200px; border-radius: 50%;
  overflow: hidden; background: var(--c-bg-light);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.player__controls { display: flex; align-items: center; justify-content: center; gap: 30px; }
.play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ctrl-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-t2);
}
/* 进度条 */
.progress { height: 3px; background: var(--c-bg-light); border-radius: 2px; position: relative; }
.progress__fill { height: 100%; background: var(--c-brand); border-radius: 2px; width: 30%; }
.progress__thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-brand); position: absolute;
  top: 50%; left: 30%; transform: translate(-50%, -50%);
}

/* ── 用户卡 (我的) ──────────────────────────────────────────── */
.avatar {
  width: 60px; height: 60px; border-radius: 50%;
  overflow: hidden; background: #e8dfd8; flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.stat-row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stat__num { font-size: 20px; font-weight: 500; color: var(--c-gold); }
.stat__lbl { font-size: 12px; color: var(--c-t2); }
.stat-sep { width: .5px; height: 30px; background: var(--c-line); }
/* 快捷操作按钮 */
.action-row { display: flex; gap: 10px; }
.action-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  padding: 10px 16px; background: #fff; border-radius: var(--r-card);
}
.action-btn__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.action-btn__lbl { font-size: 12px; color: var(--c-t1); }
/* 权益卡 */
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.benefit-card {
  background: linear-gradient(90deg, #fef4eb 0%, #fff 100%);
  border: 1px solid #ffeddc; border-radius: var(--r-card);
  padding: 10px; display: flex; align-items: center;
  min-height: 48px; font-size: 12px; color: var(--c-t3); line-height: 1.6;
}

/* ── 登录 Logo ──────────────────────────────────────────────── */
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-logo__img { width: 150px; height: 50px; object-fit: contain; }
.login-logo__slogan { font-size: 12px; color: var(--c-tag); letter-spacing: 2px; }

/* ── 书详情封面区 ─────────────────────────────────────────────── */
.detail-hero {
  display: flex; gap: 16px; padding: 20px 30px;
}
.detail-cover {
  width: 166px; height: 240px;
  border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: #e8dfd8;
  box-shadow: 5px 5px 20px rgba(0,0,0,.1);
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ── 通用工具类 ──────────────────────────────────────────────── */
.flex      { display: flex; }
.col       { flex-direction: column; }
.center    { align-items: center; justify-content: center; }
.between   { justify-content: space-between; }
.items-c   { align-items: center; }
.items-e   { align-items: flex-end; }
.items-s   { align-items: flex-start; }
.j-end     { justify-content: flex-end; }
.flex-1    { flex: 1; }
.shrink-0  { flex-shrink: 0; }
.wrap      { flex-wrap: wrap; }
.rel       { position: relative; }
.abs       { position: absolute; }
.inset     { inset: 0; }
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.obj-cover { object-fit: cover; }
.overflow-h { overflow: hidden; }
.nowrap    { white-space: nowrap; }
.ellipsis  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rounded-pill  { border-radius: var(--r-pill); }
.rounded-card  { border-radius: var(--r-card); }
.rounded-full  { border-radius: 50%; }
.shadow-card   { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Spacing */
.p-16 { padding: 16px; }      .px-16{ padding-left:16px;padding-right:16px; }
.px-12{ padding-left:12px;padding-right:12px; }
.px-30{ padding-left:30px;padding-right:30px; }
.py-12{ padding-top:12px;padding-bottom:12px; }
.py-20{ padding-top:20px;padding-bottom:20px; }
.pt-12{ padding-top:12px; }   .pb-30{ padding-bottom:30px; }
.gap-4 { gap:4px; }  .gap-5 { gap:5px; }  .gap-8 { gap:8px; }
.gap-10{ gap:10px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.gap-20{ gap:20px; } .gap-30{ gap:30px; } .gap-50{ gap:50px; }
.mt-8 { margin-top:8px; }   .mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }  .mb-12{ margin-bottom:12px; }

/* Typography */
.t-10 { font-size:10px; }  .t-12 { font-size:12px; }
.t-14 { font-size:14px; }  .t-16 { font-size:16px; }
.t-17 { font-size:17px; }  .t-20 { font-size:20px; }
.t-25 { font-size:25px; }
.w-500 { font-weight:500; }  .w-600 { font-weight:600; } .w-700 { font-weight:700; }
.ta-c  { text-align:center; } .ta-r { text-align:right; }

/* Color helpers */
.c-brand   { color: var(--c-brand); }
.c-brand-dk{ color: var(--c-brand-dk); }
.c-active  { color: var(--c-active); }
.c-gold    { color: var(--c-gold); }
.c-t2      { color: var(--c-t2); }
.c-t3      { color: var(--c-t3); }
.c-t4      { color: var(--c-t4); }
.c-ph      { color: var(--c-ph); }
.c-white   { color: #fff; }
.bg-white  { background: #fff; }
.bg-page   { background: var(--c-bg-page); }
.bg-brand  { background: var(--c-brand); }
.bg-active { background: var(--c-active); }

/* ── 垂直分割线 ─────────────────────────────────────────────── */
.vline { width: .5px; background: var(--c-line); align-self: stretch; }
.hline { height: .5px; background: var(--c-line); width: 100%; }