* { box-sizing: border-box; }
/* 关键修复：hidden 属性必须能压住后面的 display 声明，否则弹窗遮罩会永久铺满整页 */
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #1f2937; background: #f5f7fa;
}
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* 顶栏 */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px; background: #fff; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto;
}
.brand { font-size: 19px; font-weight: 600; color: #111827; letter-spacing: .3px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }

.btn {
  font-size: 15px; padding: 9px 16px; border-radius: 10px; border: 1px solid #d1d5db;
  background: #fff; color: #1f2937; cursor: pointer; transition: background .15s, border-color .15s;
  font-family: inherit;
}
.btn:hover { background: #f3f4f6; }
.btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
.btn.primary:hover { background: #1d4ed8; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { border-style: dashed; color: #4b5563; }
.btn.ghost:hover { background: #f9fafb; border-color: #9ca3af; }
.btn.danger { color: #b4433f; border-color: #e7c3c0; }
.btn.danger:hover { background: #fdf2f1; border-color: #d99b97; }

.discount-box {
  display: flex; align-items: center; gap: 8px; font-size: 15px; color: #374151;
  background: #f3f4f6; padding: 6px 12px; border-radius: 10px;
}
.discount-box input {
  width: 84px; font-size: 15px; padding: 6px 8px; border: 1px solid #d1d5db;
  border-radius: 8px; text-align: right; font-family: inherit;
}
.discount-hint { font-size: 12px; color: #9ca3af; }

/* 副栏 */
.subbar {
  display: flex; align-items: center; gap: 18px; padding: 10px 22px;
  background: #fff; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto;
}
.search {
  flex: 1; max-width: 540px; font-size: 15px; padding: 9px 14px;
  border: 1px solid #d1d5db; border-radius: 10px; outline: none; font-family: inherit;
}
.search:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.summary { display: flex; gap: 24px; margin-left: auto; font-size: 15px; color: #374151; }
.summary b { color: #111827; font-size: 17px; }
.summary .total b { color: #dc2626; font-size: 21px; }

/* 表格区 */
#gridWrap { flex: 1 1 auto; min-height: 0; position: relative; }
#grid { position: absolute; inset: 0; }
.empty-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9ca3af; font-size: 16px; pointer-events: none;
}

/* 封面尺寸档位：由 body[data-cover] 决定，页面右上角可切换 */
body { --cover-w: 64px; --cover-h: 88px; }
body[data-cover="s"] { --cover-w: 44px; --cover-h: 60px; }
body[data-cover="m"] { --cover-w: 64px; --cover-h: 88px; }
body[data-cover="l"] { --cover-w: 84px; --cover-h: 116px; }

/* 单元格 */
.center-cell { display: flex; align-items: center; justify-content: center; height: 100%; }
.num-cell { text-align: right; }
.cover-cell { display: flex; align-items: center; justify-content: center; height: 100%; }
.cover-cell img {
  width: var(--cover-w); height: var(--cover-h); object-fit: cover; border-radius: 5px; background: #eef2f7;
  display: none; box-shadow: 0 2px 8px rgba(15,23,42,.24);
}
.cover-cell.has-img img { display: block; }
.cover-cell.has-img .spine { display: none; }
.cover-cell .spine {
  width: var(--cover-w); height: var(--cover-h);
  font-size: calc(var(--cover-h) * 0.24); border-radius: 5px;
}
/* 封面用 canvas 绘制（不受 CSP 的 img-src 限制） */
.cover-canvas { display: block; border-radius: 5px; background: #eef2f7; box-shadow: 0 2px 8px rgba(15,23,42,.24); }

/* 取图服务不可用时的顶部提示 */
.cover-notice {
  display: flex; align-items: center; gap: 10px; margin: 0 18px 8px;
  background: #fff8e6; border: 1px solid #f2e0b0; color: #7a5a12;
  border-radius: 10px; padding: 9px 14px; font-size: 13px; line-height: 1.55;
}
.cover-notice-icon {
  flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e3b341;
  color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cover-notice-text { flex: 1; }
.cover-notice-text a { color: #1d4ed8; }
.cover-notice-retry {
  flex: none; border: 1px solid #e0c26a; background: #fff; color: #8a6a17;
  font-size: 12.5px; padding: 4px 10px; border-radius: 7px; cursor: pointer; font-family: inherit;
}
.cover-notice-retry:hover { background: #fdf6e3; }
.cover-notice-retry:disabled { opacity: .6; cursor: default; }
.cover-notice-close {
  flex: none; border: 0; background: transparent; color: #a5873a; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.cover-notice[hidden] { display: none !important; }

/* 缺图兜底：书名头两字 + 按出版社取色的书脊块 */
.spine {
  width: 40px; height: 54px; border-radius: 4px; color: #fff; font-size: 15px; font-weight: 600;
  letter-spacing: 1px; display: flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.15; user-select: none; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.18); text-shadow: 1px 1px 2px rgba(0,0,0,.15);
}
.spine-big { width: 150px; height: 200px; font-size: 40px; border-radius: 8px; letter-spacing: 2px; }
.douban-link { font-size: calc(var(--sb-row-font, 16px) - 3px); color: #2563eb; text-decoration: none; line-height: 1.1; }
.douban-link:hover { text-decoration: underline; }

/* 进度条 */
.progress-bar {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; min-width: 250px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 8px 28px rgba(15,23,42,.14); font-size: 14px; color: #374151;
}
.progress-inner { display: flex; flex-direction: column; gap: 8px; }
.bar { height: 8px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
#barFill { height: 100%; width: 0; background: #2563eb; transition: width .2s; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: #fff; border-radius: 16px; width: 92%; max-width: 780px;
  max-height: 86vh; overflow: auto; padding: 24px 28px;
}
.modal h2 { margin: 0 0 6px; font-size: 19px; color: #111827; }
.modal .sub { color: #6b7280; font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
.modal-section { margin-bottom: 20px; }
.modal-section h3 { font-size: 15px; margin: 0 0 10px; color: #111827; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req-item { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #374151; }
.req-item select {
  font-size: 14px; padding: 8px; border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; font-family: inherit;
}
.req-item input[type="text"] {
  font-size: 14px; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-family: inherit; outline: none;
}
.req-item input[type="text"]:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* 批次表格 */
.batch-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.batch-table th {
  text-align: left; font-weight: 600; color: #374151; font-size: 13px;
  padding: 9px 10px; border-bottom: 1px solid #e5e7eb; background: #f9fafb;
}
.batch-table td { padding: 11px 10px; border-bottom: 1px solid #f1f3f7; vertical-align: middle; }
.batch-table tr:last-child td { border-bottom: none; }
.batch-table .muted { color: #6b7280; font-size: 13px; line-height: 1.5; }
.opt-list { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-item {
  display: flex; align-items: center; gap: 6px; font-size: 14px; color: #374151;
  background: #f3f4f6; padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.hint { font-size: 13px; color: #6b7280; line-height: 1.6; }

/* ---- 顶部模式切换 ---- */
.mode-group {
  display: inline-flex; background: #f1f3f7; border-radius: 11px; padding: 3px; gap: 3px;
}
.mode-btn {
  font-family: inherit; font-size: 14px; line-height: 1; padding: 9px 14px; border: none;
  background: transparent; color: #4b5563; border-radius: 9px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap;
}
.mode-btn:hover { color: #111827; background: #e7ebf1; }
.mode-btn.active { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.mode-btn.active[data-mode="select"] { color: #15803d; }
.mode-btn.active[data-mode="pass"] { color: #b4433f; }

.mode-hint { font-size: 13px; color: #6b7280; white-space: nowrap; }

/* ---- 行状态底色（选书=浅绿，Pass=浅红） ---- */
.ag-theme-quartz .ag-row.row-picked { background-color: #eafaf0; }
.ag-theme-quartz .ag-row.row-picked.ag-row-hover { background-color: #dcf5e6; }
.ag-theme-quartz .ag-row.row-passed { background-color: #fdeeee; }
.ag-theme-quartz .ag-row.row-passed.ag-row-hover { background-color: #fbdedd; }
.ag-theme-quartz .ag-row.row-picked .ag-cell { color: #14532d; }
.ag-theme-quartz .ag-row.row-passed .ag-cell { color: #7f1d1d; }
.ag-theme-quartz .ag-row.row-passed .title-rejected { color: #9ca3af !important; }

/* 表格正文字号：由右上角「字号」切换写入 --sb-row-font（默认 16px，比 AG Grid 原本的 14px 大）
   注意：ag-grid 的 JS 包在运行时会再注入一份主题 CSS（自带 --ag-font-size: 14px），
   插入位置在我们的样式之后。同优先级会输给它，所以这里把类名写两遍提高优先级。 */
.ag-theme-quartz.ag-theme-quartz { --ag-font-size: var(--sb-row-font, 16px); }

/* 选书 / Pass 模式下整行可点，给出手型光标 */
body.mode-select .ag-theme-quartz .ag-row,
body.mode-pass .ag-theme-quartz .ag-row { cursor: pointer; }

/* ---- 单元格内容竖直居中 ----
 * AG Grid 的 .ag-cell 用固定 line-height（约 41px）排版文本，而本表行高是随封面档位变的
 * （104 / 132px）。行高一变大，文字就顶在行首。这里把 line-height 绑到同一个行高变量上，
 * 单行文本即自动竖直居中；封面列、按钮列有自己的 flex 居中，不受影响。 */
.ag-theme-quartz .ag-cell { line-height: var(--sb-row-line, 46px); }
.ag-theme-quartz .ag-cell .cover-cell,
.ag-theme-quartz .ag-cell .center-cell { line-height: normal; }

/* ---- Pass 排除 ---- */
.pass-btn {
  font-family: inherit; font-size: 12px; line-height: 1; padding: 6px 9px;
  border-radius: 8px; border: 1px solid #e3b7b7; background: #fff; color: #b4433f;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.pass-btn:hover { background: #fdecec; border-color: #d99a96; }
.pass-btn:disabled { opacity: .4; cursor: not-allowed; }
.pass-btn.restore { border-color: #bcd0e6; color: #2563eb; }
.pass-btn.restore:hover { background: #eef4fd; border-color: #9fbfe4; }

.title-rejected { text-decoration: line-through; color: #9ca3af !important; }

/* ---- 视图切换（全部 / 含已排除 / 仅看已排除） ---- */
.view-group {
  display: inline-flex; background: #f1f3f7; border-radius: 11px; padding: 3px; gap: 3px;
}
.view-btn {
  font-family: inherit; font-size: 13.5px; line-height: 1; padding: 8px 13px; border: none;
  background: transparent; color: #4b5563; border-radius: 9px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap;
}
.view-btn:hover { color: #111827; background: #e7ebf1; }
.view-btn.active { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.view-btn.active[data-view="onlyRejected"] { color: #b4433f; }
.view-btn b { font-size: 14px; }

/* ---- 底部分页条 ---- */
.bottombar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 9px 22px; background: #fff; border-top: 1px solid #e5e7eb; min-height: 54px;
}
.page-left { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #374151; }
.page-size { display: inline-flex; align-items: center; gap: 6px; }
.page-size select {
  font-family: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #d1d5db;
  border-radius: 8px; background: #fff; cursor: pointer;
}
.page-info { color: #6b7280; font-size: 13.5px; white-space: nowrap; }
/* 构建版本号：用于确认当前看到的是哪一次打包（排查缓存/旧文件时很有用） */
.build-stamp { color: #9ca3af; font-size: 12px; white-space: nowrap; }

.page-nav { display: flex; align-items: center; gap: 5px; margin: 0 auto; flex-wrap: wrap; }
.pg-btn {
  font-family: inherit; font-size: 13.5px; min-width: 34px; height: 32px; padding: 0 9px;
  border: 1px solid #e0e4ea; background: #fff; color: #374151; border-radius: 8px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.pg-btn:hover:not(:disabled) { background: #f3f6fa; border-color: #cbd5e1; }
.pg-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
.pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.pg-gap { color: #9ca3af; font-size: 13px; padding: 0 2px; }

.sel-tools { display: flex; align-items: center; gap: 8px; }
.mini-btn {
  font-family: inherit; font-size: 13.5px; padding: 8px 13px; border-radius: 9px;
  border: 1px solid #d7dde5; background: #fff; color: #1f2937; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mini-btn:hover { background: #f3f6fa; border-color: #c3ccd8; }
.mini-btn.ghost { color: #6b7280; }
.mini-btn.ghost:hover { color: #b4433f; border-color: #f0c9c6; background: #fdeeee; }

/* ---- 轻提示 ---- */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 12px);
  background: rgba(17,24,39,.92); color: #fff; font-size: 14px; padding: 11px 20px;
  border-radius: 10px; z-index: 200; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 76vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- 封面覆盖chip ---- */
.cover-chip {
  font-family: inherit; font-size: 13px; color: #4b5563; background: #f3f6fa;
  border: 1px solid #e3e8ef; border-radius: 9px; padding: 7px 11px; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.cover-chip:hover { background: #eaf1fb; border-color: #c9dbf2; color: #1d4ed8; }
.cover-chip b { color: #111827; font-size: 14px; }

/* 封面大小切换 */
.cover-size {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; color: #6b7280;
}
.cover-size-group { display: inline-flex; background: #f1f3f7; border-radius: 11px; padding: 3px; gap: 3px; }
.cover-size-btn {
  font-family: inherit; font-size: 13px; line-height: 1; padding: 7px 11px; border: none;
  background: transparent; color: #4b5563; border-radius: 9px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.cover-size-btn:hover { color: #111827; background: #e7ebf1; }
.cover-size-btn.active { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.detail-btn { padding: 6px 10px; font-size: calc(var(--sb-row-font, 16px) - 2px); }

/* ---- 详情抽屉 ---- */
.drawer-mask { position: fixed; inset: 0; background: rgba(15,23,42,.32); z-index: 85; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 468px; max-width: 92vw; z-index: 90;
  background: #fff; box-shadow: -12px 0 40px rgba(15,23,42,.16);
  display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid #eef1f5; flex: 0 0 auto;
}
.drawer-title { font-size: 16px; font-weight: 600; color: #111827; }
.drawer-close {
  border: none; background: transparent; font-size: 26px; line-height: 1; color: #9ca3af;
  cursor: pointer; padding: 0 6px;
}
.drawer-close:hover { color: #111827; }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.drawer-top { display: flex; gap: 18px; margin-bottom: 18px; }
.drawer-cover { width: 150px; height: 200px; flex: 0 0 150px; }
.drawer-cover img {
  width: 150px; height: 200px; object-fit: cover; border-radius: 8px; display: none;
  box-shadow: 0 4px 16px rgba(15,23,42,.18);
}
.drawer-cover.has-img img { display: block; }
.drawer-cover .cover-canvas { border-radius: 8px; box-shadow: 0 4px 16px rgba(15,23,42,.18); }
.drawer-cover.has-img .spine { display: none; }
.drawer-meta { flex: 1 1 auto; min-width: 0; }
.drawer-meta h2 { margin: 2px 0 8px; font-size: 20px; line-height: 1.35; color: #111827; }
.drawer-author { font-size: 15px; color: #374151; margin-bottom: 4px; }
.drawer-pub { font-size: 13.5px; color: #6b7280; margin-bottom: 12px; }
.drawer-price { font-size: 22px; font-weight: 600; color: #dc2626; margin-bottom: 10px; }
.discount-tag { font-size: 13px; font-weight: 400; color: #6b7280; margin-left: 8px; }
.tag {
  display: inline-block; font-size: 12.5px; padding: 3px 9px; border-radius: 999px;
  background: #f1f3f7; color: #4b5563;
}
.tag-green { background: #e7f8ee; color: #15803d; }
.tag-red { background: #fdeeee; color: #b4433f; }
.drawer-actions { display: flex; gap: 10px; margin-bottom: 22px; }
.drawer-actions .btn { flex: 1; text-align: center; }
.btn.danger { border-color: #e3b7b7; color: #b4433f; }
.btn.danger:hover { background: #fdecec; border-color: #d99a96; }
.drawer-section { margin-bottom: 22px; }
.drawer-section h3 { font-size: 14px; color: #6b7280; font-weight: 600; margin: 0 0 10px; }
.kv { margin: 0; }
.kv-row {
  display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f4f6f9; font-size: 14px;
}
.kv-row:last-child { border-bottom: none; }
.kv-row dt { flex: 0 0 82px; color: #6b7280; }
.kv-row dd { flex: 1 1 auto; margin: 0; color: #1f2937; word-break: break-all; }
.link-row { display: flex; flex-wrap: wrap; gap: 9px; }
.site-link {
  font-size: 14px; padding: 8px 14px; border-radius: 9px; border: 1px solid #d7dde5;
  color: #2563eb; text-decoration: none; background: #fff;
}
.site-link:hover { background: #f2f7ff; border-color: #b9d2f2; }

/* ====================================================================
   移动端（≤760px）：隐藏 AG Grid，改用卡片列表
   - 卡片固定 124px 高 + 8px 间隙 = 132px 步进，与 app.js 的 M_CARD_H 一致
   - 桌面端不受影响（所有规则都包在 media query 里）
   ==================================================================== */

.m-only { display: none !important; }

@media (max-width: 760px) {
  /* own hidden 规则优先，避免被下面的 .m-only{display:block} 覆盖 */
  .m-only[hidden] { display: none !important; }

  .desk-only,
  #gridWrap,
  .bottombar { display: none !important; }

  #mMenuBtn.m-only { display: inline-flex !important; }
  #mWrap.m-only { display: block !important; }
  .mfooter.m-only { display: flex !important; }
  /* 菜单与遮罩：靠 hidden 属性控制显隐，这里必须显式放开 display */
  #mMenu.m-only, #mMask.m-only { display: block !important; }
  #mMenu.m-only[hidden], #mMask.m-only[hidden] { display: none !important; }
  #mList { display: block; }
  /* #mEmpty 是 ID 选择器，优先级高于基线的 [hidden]，必须单独压回去 */
  #mEmpty[hidden] { display: none !important; }

  html, body { height: 100%; }
  body {
    height: 100dvh; font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  /* ---- 顶栏 ---- */
  .topbar { padding: 10px 14px; gap: 10px; }
  .brand { font-size: 16.5px; letter-spacing: 0; }
  .m-icon-btn {
    align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    font-size: 22px; line-height: 1; font-family: inherit;
    border: 1px solid #e0e5ec; background: #fff; color: #374151;
    border-radius: 12px; cursor: pointer;
  }
  .m-icon-btn:active { background: #f3f6fa; }

  /* ---- 副栏：搜索占一行，视图按钮占一行 ---- */
  .subbar { padding: 8px 12px 10px; gap: 8px; flex-wrap: wrap; }
  .subbar .search {
    flex: 1 1 100%; max-width: none; font-size: 16px;  /* 16px 防 iOS 聚焦自动放大 */
    padding: 10px 12px;
  }
  .mode-hint, .cover-chip, .cover-size, .summary { display: none !important; }
  .view-group { width: 100%; display: flex; gap: 6px; }
  .view-btn { flex: 1 1 0; padding: 8px 4px; font-size: 13.5px; }
  .view-btn b { font-size: 13.5px; }

  /* ---- 卡片列表 ---- */
  #mWrap {
    flex: 1 1 auto; min-height: 0; position: relative; background: #f5f7fa;
  }
  #mList {
    position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 10px; overscroll-behavior: contain;
  }
  #mList .mspace { position: relative; width: 100%; }

  .mcard {
    position: absolute; left: 0; right: 0; top: 0; height: 124px;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #fff;
    border: 1px solid #e7ebf0; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    transition: background .12s, border-color .12s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mcard:active { background: #f7f9fc; }
  .mcard.on { background: #eafaf0; border-color: #9fd8b3; }
  .mcard.off { background: #fdeeee; border-color: #ecc3c0; }
  .mcard.off .mtitle { text-decoration: line-through; color: #9ca3af; }

  .mcover {
    position: relative; flex: 0 0 76px; width: 76px; height: 104px;
    display: flex; align-items: center; justify-content: center;
  }
  .mcover .cover-canvas { border-radius: 5px; box-shadow: 0 2px 7px rgba(15,23,42,.2); }
  .mcover .spine {
    width: 76px; height: 104px; border-radius: 5px;
    font-size: 19px; letter-spacing: 0;
  }
  .mcheck {
    position: absolute; top: -5px; left: -5px; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: #16a34a; color: #fff; font-size: 13px; font-weight: 700;
    border-radius: 50%; box-shadow: 0 1px 4px rgba(15,23,42,.28);
  }

  .mbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mtitle {
    font-size: 15.5px; font-weight: 600; color: #111827; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all;
  }
  .msub {
    font-size: 12.5px; color: #6b7280; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mprice { font-size: 15px; font-weight: 600; color: #dc2626; }
  .mprice .moff { font-size: 12.5px; font-weight: 400; color: #6b7280; margin-left: 6px; }

  .mpass {
    flex: 0 0 46px; width: 46px; height: 44px; padding: 0;
    border: 1px solid #e7c3c0; background: #fff; color: #b4433f;
    border-radius: 12px; font-family: inherit; font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mpass.is-pass { background: #b4433f; border-color: #b4433f; color: #fff; }
  .mpass:active { opacity: .82; }

  /* ---- 空状态 ---- */
  .m-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: #6b7280; text-align: center; padding: 0 24px;
  }
  .m-empty-title { font-size: 16px; color: #374151; font-weight: 600; }
  .m-empty-sub { font-size: 13.5px; }

  /* ---- 底部合计条 ---- */
  .mfooter {
    flex: 0 0 auto; align-items: center; gap: 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e5e7eb;
  }
  .mfoot-sum { flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: #374151; }
  .mfoot-sum b { color: #111827; font-size: 16px; }
  .mfoot-total b { color: #dc2626; font-size: 19px; }
  .mfooter .mini-btn { height: 38px; padding: 0 14px; font-size: 14px; }

  /* ---- 功能菜单（底部弹出） ---- */
  .mmask { position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 95; }
  .msheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
    background: #fff; border-radius: 16px 16px 0 0;
    padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(15,23,42,.18);
    max-height: 84dvh; overflow-y: auto;
  }
  .msheet-handle { width: 40px; height: 4px; border-radius: 2px; background: #d8dde5; margin: 6px auto 8px; }
  .msheet > button {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; border-top: 1px solid #f1f3f6;
    font-family: inherit; font-size: 16px; color: #1f2937;
    padding: 15px 20px; cursor: pointer;
  }
  .msheet > button:active { background: #f5f7fa; }
  .msheet .danger-text { color: #b4433f; }
  .msheet-cancel { color: #6b7280 !important; text-align: center !important; }
  .msheet-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-top: 1px solid #f1f3f6; font-size: 16px; color: #1f2937;
  }
  .msheet-row input {
    width: 92px; font-size: 16px; padding: 8px 10px; text-align: right;
    border: 1px solid #d1d5db; border-radius: 10px; font-family: inherit;
  }
  .msheet-hint { font-size: 12.5px; color: #9ca3af; }

  /* ---- 详情抽屉：全屏 ---- */
  .drawer { width: 100%; max-width: 100%; box-shadow: none; }
  .drawer-body { padding: 16px; }
  .drawer-cover { width: 110px; height: 148px; flex: 0 0 110px; }
  .drawer-cover img, .drawer-cover .cover-canvas { width: 110px !important; height: 148px !important; }
  .drawer-cover .spine-big { width: 110px !important; height: 148px !important; font-size: 28px !important; }
  .drawer-meta h2 { font-size: 18px; }
  .drawer-price { font-size: 20px; }
  .drawer-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0; margin-bottom: 12px; }
  .drawer-actions .btn { padding: 13px 10px; font-size: 15px; }
  .site-link { padding: 10px 14px; }

  /* ---- 提示与进度条避开底部合计条 ---- */
  .toast { bottom: 88px; max-width: 88vw; font-size: 14.5px; }
  .progress-bar { left: 12px; right: 12px; bottom: 88px; min-width: 0; }
  .cover-notice { font-size: 13px; padding: 10px 12px; gap: 8px; }
  .cover-notice-text { line-height: 1.5; }

  /* ---- 批次弹窗 ---- */
  .modal { width: 94%; max-width: none; padding: 18px 16px; max-height: 88dvh; }
  .modal h2 { font-size: 17px; }
  .req-grid { grid-template-columns: 1fr; }
  .batch-table { font-size: 13px; }
  .batch-table th, .batch-table td { padding: 8px 6px; }
}