/* ============================================================
   public.css — 访客派送单页面样式
   ============================================================ */

/* 全站字体统一：访客页所有元素（含版本下拉框、按钮、标签、弹窗）
   一律思源黑体。button/input/select 浏览器默认不继承字体，
   必须显式声明，否则会漏成宋体/系统默认——这是"字体不协调"的根源。 */
.public-shell,
.public-shell button,
.public-shell input,
.public-shell select,
.public-shell textarea {
  font-family: var(--font-base);
}
/* 密语数字保持微软雅黑（见 .code-cell，定义在后、优先级更高） */

/* 版本背景图层：固定定位的伪元素。
   不用 body{background-attachment:fixed}，因为 iOS Safari 对该属性
   支持异常（背景被拉伸/错位），导致手机端"比例不协调"。 */
body.has-page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--page-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
/* 手机版竖版背景：后台单独上传一张竖图，手机端优先用它；
   没传竖版时 var() 的回退值会自动用回横版那张，不会空白。 */
@media (max-width: 768px) {
  body.has-page-bg-mobile::before {
    background-image: var(--page-bg-mobile, var(--page-bg));
    background-position: center center;
  }
}

.public-shell {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(1200px 600px at 20% 0%, #c5e1ff 0%, transparent 60%),
    radial-gradient(1200px 600px at 90% 30%, #d4f4dd 0%, transparent 60%),
    linear-gradient(180deg, #eaf6ff 0%, #dff0e6 50%, #fef0d8 100%);
  overflow-x: hidden;
  /* 系统灰字（派送ID/宝可梦/密语这些小标签）原色 #8b91a3 太浅，
     框底改透明后基本看不清 —— 统一调深成「可读的石板灰」。 */
  --color-text-mute: #4c5365;
  /* 行底色透明度：主播行 / 车名行 / 版本下拉框共用同一个值，
     以后要再调只改这一个数字即可（0.15 -> 0.07，再透明两档）。 */
  --row-bg: rgba(255, 255, 255, 0.1);
  --row-bg-panel: rgba(255, 255, 255, 0.1);
  /* 头部三块（标题 / 日期 / 版本选择框）之间的间距，统一同一个值 */
  --head-gap: 14px;
  /* 字段名（派送ID / 派送时长 / 宝可梦 / 密语 / 备注）：加深的灰，保证透明底上可读 */
  --color-field-label: #3a4053;
}

.public-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><defs><linearGradient id='m' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23a8d8ff' stop-opacity='0.25'/><stop offset='1' stop-color='%23a8d8ff' stop-opacity='0'/></linearGradient></defs><polygon points='0,420 120,360 240,400 360,340 480,380 600,330 720,370 840,310 960,360 1080,320 1200,360 1320,300 1440,340 1600,310 1600,0 0,0' fill='url(%23m)'/><polygon points='0,900 100,860 200,880 300,830 400,870 500,820 600,860 700,810 800,850 900,800 1000,840 1100,790 1200,830 1300,780 1400,820 1500,770 1600,810 1600,900' fill='%23c8e7c9' opacity='0.35'/></svg>");
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

/* 有版本背景图时：只留一层很淡的白纱，让背景图尽可能透出来
   （最早 0.78 的白底把背景图糊得几乎看不见；0.22 又太重、颜色过深，
    现在 0.36 是"看得清内容又不压内容"的平衡点）。
   同时关掉内置的山峦装饰层，避免它压在真实背景图上。 */
.public-shell.has-bg {
  background: rgba(255, 255, 255, 0.36);
  /* 透明底上原来的浅灰（#8b91a3）完全看不清，这里整体调深一档 */
  --color-text-mute: #4c5365;
}
.public-shell.has-bg::before { display: none; }

/* 透明底下的文字可读性：给关键文字加一层极淡的白色描边，
   这样无论背景多花，字都看得清，又不用把框做成实心白。 */
.public-shell.has-bg .public-title,
.public-shell.has-bg .public-date,
.public-shell.has-bg .bc-label,
.public-shell.has-bg .bc-name,
.public-shell.has-bg .bc-line-label,
.public-shell.has-bg .bc-line-name,
.public-shell.has-bg .bc-note-text,
.public-shell.has-bg .all-empty-hint,
.public-shell.has-bg .empty-hint {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.65);
}

.public-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 80px;
}

/* 头部：标题 / 日期 / 版本选择框，三者间距统一为 --head-gap */
.public-header {
  text-align: center;
  margin-bottom: 0;
}
.public-title {
  font-size: 48px;
  font-weight: 700;
  color: #1f2330;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--head-gap);
  line-height: 1.15;
}
.public-date {
  font-size: 30px;
  font-weight: 700;
  color: #2b3142;
  margin-top: 0;
  margin-bottom: var(--head-gap);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

.version-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 12px;
}
.version-tab {
  padding: 7px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  font-size: 18px;
  color: #4a5063;
  cursor: pointer;
  transition: all 0.15s ease;
}
.version-tab:hover { background: rgba(255, 255, 255, 0.85); }
.version-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(255, 122, 24, 0.35);
}

.meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 17px;
  color: #4a5063;
}
.meta-bar .grow { flex: 1; }
.meta-bar .badge-row { display: inline-flex; gap: 8px; }

/* 分类段 */
.version-section {
  margin-bottom: 16px;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 600;
  color: #4a5063;
  margin-bottom: 8px;
}
.section-head-special {
  background: linear-gradient(135deg, rgba(255, 220, 240, 0.85) 0%, rgba(230, 200, 255, 0.85) 100%);
  border-color: rgba(200, 160, 230, 0.4);
}
.section-icon { font-size: 20px; }
.section-count {
  margin-left: auto;
  font-size: 16px;
  color: #6a5063;
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 400;
}

/* 日期、备注这类正文灰字也一并加深，保证在透明底上读得清 */
.public-shell .public-date,
.public-shell .bc-note-text,
.public-shell .code-same { color: #3f4557; }
.public-shell .code-same { background: rgba(255, 255, 255, 0.5); }
/* 空状态提示同样改成近透明底 */
.public-shell .all-empty-hint { background: rgba(255, 255, 255, 0.28); }
.public-shell .empty-hint { background: rgba(255, 255, 255, 0.22); }

/* 整个版本今天没有派送时的整体提示 */
.all-empty-hint {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-text-mute);
  font-size: 19px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
}

/* 日常车表格 */
.paisong-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.paisong-table th,
.paisong-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(230, 233, 240, 0.7);
  font-size: 18px;
}
.paisong-table thead th {
  background: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  color: #4a5063;
  font-size: 17px;
}
.paisong-table tbody tr:last-child td { border-bottom: 0; }
.paisong-table tbody tr:hover { background: rgba(255, 244, 230, 0.55); }
.paisong-table .group-cell {
  font-weight: 600;
  color: #2b3142;
  background: rgba(255, 244, 230, 0.45);
  vertical-align: middle;
}
/* 仅窄屏可见的重复「派送ID」单元格：rowspan 对 display:block 无效，
   用它补上被合并掉的行，避免手机上部分卡片丢失派送ID。宽屏隐藏。 */
.group-cell-mobile { display: none; }

.code-cell {
  display: inline-block;
  /* 固定宽度 + 居中：所有密语框同宽同位，右列垂直成一条线（不用 min-width，
     免得字体度量差异导致左右各差一两像素） */
  width: 86px;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
  padding: 4px 8px;
  background: #f26d8e;
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-family: "Microsoft YaHei", "微软雅黑", "Noto Sans SC", sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* 派送时长标签：红(今天) / 橙(明天) / 黄(后天) / 绿(本周) */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}
/* 紧迫度配色：红(不满6小时) → 橙(今天) → 黄(明天) → 蓝(后天) → 绿(本周) */
.tag-soon       { background: #e02b2b; color: #fff; }
.tag-today      { background: #f08c1a; color: #fff; }
.tag-tomorrow   { background: #f7d21e; color: #6b5400; }
.tag-day-after  { background: #3b82f6; color: #fff; }
.tag-week       { background: #2fa55a; color: #fff; }
.tag-free       { background: #e8e8ee; color: #6a7088; }
.tag-default    { background: #f0f0f5; color: #6a7088; }

/* 特殊车：与常规车共用 .paisong-table 表格风格，只有「使用说明」按钮是自己的 */
.special-detail-btn {
  padding: 6px 14px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 17px;
  cursor: pointer;
  white-space: nowrap;
}

/* 详情弹窗 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 27, 45, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal {
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-lg { max-width: 640px; }
.modal-head {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}
.modal-head h3 { margin: 0; font-size: 21px; }
.modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-soft);
  cursor: pointer;
  padding: 0 4px;
}
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.modal-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--color-border);
  text-align: right;
}
.modal-foot .btn { padding: 6px 18px; }
.detail-section {
  margin-bottom: 14px;
}
.detail-section:last-child { margin-bottom: 0; }
.detail-heading {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 4px;
  font-size: 18px;
}
.detail-content {
  font-size: 17px;
  line-height: 1.7;
  color: #2b3142;
  white-space: pre-wrap;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-mute);
  font-size: 18px;
}

/* 页脚备案信息 —— 工信部要求网站首页展示 ICP 备案号。
   备案号链接指向工信部备案公开查询系统（beian.miit.gov.cn）。
   目前是占位号，备案下证后把 ICP_NO 占位符替换成真实备案号即可。 */
.footer-note {
  margin-top: 26px;
  padding: 14px 12px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-mute);
}
.footer-note a {
  color: inherit;
  text-decoration: none;
}
.footer-note a:hover {
  text-decoration: underline;
}
.footer-note .beian-ga {
  margin-left: 14px;
}
/* 「更新于」移到备案行，顶部那一行让出来 */
.footer-updated {
  margin-left: 12px;
  color: var(--color-text-mute);
}

.admin-link {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 16px;
  color: var(--color-text-soft);
  backdrop-filter: blur(8px);
}
.admin-link:hover { background: rgba(255, 255, 255, 0.95); text-decoration: none; }

/* ---------- 手机版左下角「背景图」小按钮（设备级偏好，仅移动端显示） ---------- */
.bgpick-btn {
  position: fixed;
  left: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.72);
  color: #2b3142;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-weight: 700;
  /* 字号做成变量：马老师定的 14px；想调大小只改这一个数字 */
  font-size: var(--bgpick-font-size, 14px);
  line-height: 1.3;
  backdrop-filter: blur(6px);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 27, 45, 0.12);
}
.bgpick-btn:active { background: rgba(255, 255, 255, 0.95); }
.bgpick-panel {
  position: fixed;
  left: 12px;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  z-index: 61;
  min-width: 178px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 24px rgba(20, 27, 45, 0.2);
  backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
  gap: 4px;
}
.bgpick-panel.open { display: flex; }
.bgpick-title {
  font-size: 12px;
  font-weight: 700;
  color: #4c5365;
  padding: 2px 6px 4px;
  font-family: "Microsoft YaHei", sans-serif;
}
.bgpick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: "Microsoft YaHei", sans-serif;
}
.bgpick-item.active { background: rgba(47, 111, 214, 0.12); }
.bgpick-thumb {
  width: 26px;
  height: 38px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.bgpick-name { font-size: 13px; font-weight: 600; color: #2b3142; flex: 1; }
.bgpick-check { color: #2f6fd6; font-weight: 700; font-size: 13px; }
/* 电脑端一律隐藏（这是给手机做的功能）。
   ⚠️ 例外：「主题切换」按钮共用 .bgpick-btn 这套外观，但电脑端必须保留 ——
   它现在是气泡页 / 原版页的唯一互切入口，用 :not() 排除掉。 */
@media (min-width: 769px) {
  .bgpick-btn:not(.themeswitch-btn),
  .bgpick-panel { display: none !important; }
}

.public-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: rgba(20, 27, 45, 0.92);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 16px;
  z-index: 200;
  box-shadow: var(--shadow-card);
}

/* 响应式：平板 */
@media (max-width: 768px) {
  .public-container { padding: 20px 16px 60px; }
  .public-title { font-size: 42px; }
  .public-date { font-size: 27px; }
  .paisong-table th,
  .paisong-table td { padding: 10px 8px; font-size: 17px; }
  .meta-bar { font-size: 16px; padding: 8px 12px; }
}

/* 响应式：手机 —— 表格转为「一条记录一张卡片」 */
@media (max-width: 560px) {
  .public-container {
    padding: 8px 12px calc(40px + env(safe-area-inset-bottom));
  }
  .public-shell { --head-gap: 10px; }
  .public-header { margin-bottom: 0; }
  .public-title { font-size: 38px; }
  .public-date { font-size: 24px; }

  /* 版本标签：改横向滚动，避免 5 个标签换行占掉两行屏高 */
  .version-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 12px -12px 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .version-tabs::-webkit-scrollbar { display: none; }
  .version-tab {
    flex: 0 0 auto;
    padding: 7px 16px;
    font-size: 16px;
  }

  .meta-bar {
    font-size: 15px;
    padding: 8px 10px;
    gap: 8px;
  }

  /* 表格 → 卡片 */
  .paisong-table,
  .paisong-table tbody,
  .paisong-table tr,
  .paisong-table td { display: block; width: 100%; }
  .paisong-table thead { display: none; }
  .paisong-table {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }
  .paisong-table tbody tr {
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
  }
  .paisong-table td {
    border-bottom: 0;
    padding: 5px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
  }
  /* 字段名（此前 JS 没写 data-label，手机上全是空白） */
  .paisong-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text-soft);
    font-size: 14px;
  }
  .paisong-table td > * { text-align: right; }

  /* 派送ID 单独作为卡片顶部的标识条 */
  .paisong-table .group-cell {
    background: transparent;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 4px;
    padding-bottom: 8px;
    color: var(--color-primary);
    font-size: 15px;
  }
  .paisong-table .group-cell::before { color: var(--color-primary); }
  .group-cell-mobile { display: flex; }

  /* 宝可梦名在手机上作为卡片主标题 */
  .paisong-table td[data-label="宝可梦"] {
    font-size: 19px;
    font-weight: 700;
    color: #1f2330;
    padding-top: 2px;
  }

  /* 密语放大，方便手机上看清和长按复制（13px 基础上手机端 +2） */
  .code-cell {
    width: 96px;
    font-size: 15px;
    padding: 5px 6px;
    letter-spacing: 0.5px;
    /* 手机浏览器（尤其 iOS WebKit）会把 8 位数字当电话号码加下划线，这里兜底 */
    -webkit-text-decoration: none;
    text-decoration: none;
    -webkit-touch-callout: default;
  }
  .code-same { width: 96px; }

  .special-list { grid-template-columns: 1fr; }
  .special-entry { padding: 14px 16px; }
  .special-name { font-size: 18px; }

  .modal { max-height: 88vh; }
  .modal-head { padding: 14px 16px; }
  .modal-head h3 { font-size: 19px; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { padding: 10px 16px; }
}

/* ============================================================
   新版手机端 UI：版本下拉 + 主播/分类手风琴
   ============================================================ */
.version-dropdown {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--head-gap);
  position: relative;
}
.version-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* 版本选择框：透明度与主播行保持同一个值（--row-bg） */
  background: var(--row-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-base);
  font-size: 19px;
  font-weight: 600;
  color: #2b3142;
  box-shadow: var(--shadow-soft);
}
.version-dropdown-btn .caret {
  font-size: 14px;
  color: var(--color-primary);
  transition: transform 0.2s;
}
.version-dropdown-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.version-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  /* 展开的下拉面板：比行底稍实一点（否则选项压在背景图上看不清），
     但仍远低于原来的 0.82 */
  background: var(--row-bg-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 30;
}
.version-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 600;
  color: #2b3142;
}
.version-option:hover { background: rgba(255, 122, 24, 0.1); }
.version-option.active { background: var(--color-primary); color: #fff; }

.bc-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bc-item {
  /* 近乎全透明的「毛玻璃」底：只留一丁点白色把行和背景区分开，
     最大程度透出后面的背景图。文字靠上面的 text-shadow + 调深的灰字保证清晰。
     层级感由 1px 亮边 + 柔和阴影提供，不再靠白底。 */
  background: var(--row-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.bc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
}
.bc-head:active { background: rgba(255, 255, 255, 0.12); }
/* 加了头像后：文字块占满中间剩余空间但左对齐，
   这样「派送ID + 名字」紧贴头像右侧、顶到最左，中间留白，
   右侧的「派送时长」仍然靠右——每一行起始位置严格一致。 */
.bc-head-main { flex: 1 1 auto; min-width: 0; text-align: left; }
/* 字段名（派送ID / 派送时长）：+1pt、加粗、加深，透明底上也要一眼看清 */
.bc-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-field-label);
  margin-bottom: 1px;
}
/* 主播名字 +1pt（普通版本是红色） */
.bc-name { font-size: 17px; font-weight: 700; color: #1f2330; line-height: 1.25; }
/* 普通版本：派送ID（博主名）用红色，更醒目 */
.bc-item-normal .bc-head-main .bc-name { color: #e02b2b; }
/* 大队长版本：栏目名（如「小程序派送日常车/特殊车」）放大 3pt（12 -> 15），
   强制一行不换行 */
.bc-item-duizhang .bc-head-main .bc-name {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-head-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* 「已领」开关 = 密语方块本身：点一下点亮这一行（只有本机看得到，不写云端）。
   已领的密语框加深一档，所在的每一条行（含「同上密语」）整行变粉。 */
.code-cell.code-claim,
.code-same.code-claim {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.code-cell.code-claim:active { transform: scale(0.96); }
.code-cell.on {
  background: #c2185b;
  box-shadow: 0 0 0 2px rgba(255, 122, 179, 0.45);
}
.code-same.on {
  background: #ffd0e2;
  color: #b02a63;
  font-weight: 700;
}
/* 已截止：这一轮派送结束 —— 记录自动清空，也不允许再点亮 */
.code-cell.code-over,
.code-same.code-over {
  opacity: 0.45;
  cursor: default;
}
/* 已领：整行变粉（背景图仍能透出来） */
.bc-line.claimed {
  /* 负 margin 抵消内边距：文字位置不变，粉色底向外扩出一圈 */
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
  background: rgba(255, 122, 179, 0.22);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 179, 0.35);
}
/* 主播行 / 分类行整块变粉：这一栏里每一只都点过了才亮（比行淡一档，避免两层粉叠太重） */
.bc-item.claimed {
  background: rgba(255, 122, 179, 0.16);
  border-color: rgba(255, 122, 179, 0.5);
}
.bc-item.claimed .bc-head { background: rgba(255, 122, 179, 0.1); }
/* 主播头像：总览行左侧圆形小头像。方图/长方图由 object-fit:cover 自动取中间，
   没头像时显示名字首字的灰底占位，行布局保持一致 */
.bc-avatar-wrap { flex: 0 0 auto; display: inline-flex; }
.bc-avatar {
  /* 头像加大到顶住整行高度（34 -> 42），圆形显示 */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef1f6;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(31, 35, 48, 0.15);
  font-size: 19px;
  font-weight: 600;
  color: #98a0b3;
}
.bc-sug-wrap { text-align: right; }
.bc-arrow { font-size: 18px; color: var(--color-primary); transition: transform 0.2s; line-height: 1; }
.bc-head.open .bc-arrow { transform: rotate(180deg); }
.bc-body { padding: 2px 12px 10px; border-top: 1px dashed var(--color-border); }
/* 条目行：左「宝可梦 + 名字」/ 右「密语 + 数字」，强制一行不换行 */
.bc-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  /* 展开后不再显示行下的横线 */
  border-bottom: 0;
}
.bc-line:last-child { border-bottom: 0; }
.bc-line-group { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.bc-line-left { flex: 1 1 auto; justify-content: flex-start; }
.bc-line-right { flex: 0 0 auto; justify-content: flex-end; margin-left: auto; }
/* 条目字段名（宝可梦 / 密语 / 备注 / 车名）：+1pt、加粗、加深 */
.bc-line-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-field-label);
  white-space: nowrap;
}
.bc-line-name {
  font-size: 16px;
  font-weight: 600;
  color: #2b3142;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bc-line-code { white-space: nowrap; }
.bc-detail-btn { flex: 0 0 auto; }
/* 同密语组内非首行：不重复显示密语框，标「同上密语」，
   宽度与密语框一致，保证右列仍然对齐 */
.code-same {
  display: inline-block;
  width: 86px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: #f2f4f8;
  color: #8a90a3;
  font-size: 12px;
  letter-spacing: 0.5px;
}
/* 同密语徽标已按用户要求移除（等N只提示不再显示） */
.bc-note {
  display: flex;
  gap: 8px;
  padding: 8px 0 2px;
  border-top: 1px dashed var(--color-border);
  margin-top: 4px;
}
.bc-note-text { font-size: 14px; color: #4a5063; line-height: 1.5; white-space: pre-wrap; }

@media (max-width: 560px) {
  /* 手机版下拉框：字体参数对齐「日常车车名」（16px / 600 / #2b3142），
     透明度与主播行一致（--row-bg） */
  .version-dropdown-btn {
    font-size: 16px;
    font-weight: 600;
    color: #2b3142;
    padding: 8px 18px;
  }
  .version-option { font-size: 16px; font-weight: 600; }
  .bc-name { font-size: 17px; }
  /* 头像再加大一圈，顶住整行高度 */
  .bc-avatar { width: 40px; height: 40px; font-size: 18px; }
  /* 手机端：整行保持一行（标签：值），长名字靠 JS 自动缩字，绝不换行 */
  .bc-line { display: flex; padding: 6px 0; gap: 8px; }
  .bc-line-label { display: inline; }
  .bc-line-label::after { content: "："; }
  .bc-line-name, .bc-line-code { display: inline; }
  .bc-note { flex-direction: column; gap: 2px; }
  .bc-note .bc-line-label::after { content: "："; }

  /* ⚠️ 以下 .bc-line-duizhang / .bc-dz-group / .dz-btn-slot 系列已随 2026-09-23
     小程序版改卡片式（.dz-card）而废弃，不再有对应 DOM。保留仅为防回滚，新代码别用。 */
  /* 大队长版本：左车名 / 中间「使用说明」按钮 / 右密语，强制一行 */
  .bc-line-duizhang {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .bc-dz-group {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
  }
  .bc-line-duizhang .dz-car { flex: 1 1 auto; justify-content: flex-start; }
  .bc-line-duizhang .dz-code { flex: 0 0 auto; justify-content: flex-end; }
  /* 按钮槽：默认定宽居中，保证有/没有按钮的行占位一致（根治楼梯状错位）。
     特殊车下面会被 dz-type-special 覆盖成「吃掉剩余空间 + 居中」，
     让按钮左右两侧到车名、到密语的间隙完全相等。 */
  .bc-line-duizhang .dz-btn-slot {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    width: 78px;
  }
  /* 特殊车：车名不撑开（车名基本固定，不会变长），
     剩余空间全给按钮槽，按钮在槽内居中 —— 左边间隙 = 右边间隙 */
  .bc-line-duizhang.dz-type-special .dz-car { flex: 0 0 auto; }
  .bc-line-duizhang.dz-type-special .dz-btn-slot {
    flex: 1 1 auto;
    width: auto;
    min-width: 78px;
    justify-content: center;
  }
  /* 特殊车：车名一行内自动缩字 */
  .bc-line-duizhang.dz-type-special .bc-line-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 日常车：整个按钮槽去掉，车名占满可用宽度且允许换行，保证字全部显示 */
  .bc-line-duizhang.dz-type-normal .bc-line-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
  }
  .bc-line-duizhang.dz-type-normal .dz-code { flex: 0 0 auto; }
  /* 同密语徽标在窄屏更小一点，避免挤车名 */
  .bc-line-duizhang .code-same { width: 96px; }
  .bc-line-duizhang .bc-line-code { margin-left: 0; }
  /* 使用说明按钮：缩小 4pt 并收窄，放在行的中间（现 +1pt = 13px） */
  .bc-line-duizhang .bc-detail-btn {
    width: auto;
    margin-top: 0;
    font-size: 13px;
    padding: 3px 8px;
    white-space: nowrap;
  }
}

/* ============================================================
   暖色主题（?theme=warm；variant a/b/c）
   默认 UI 不受影响：仅 body.theme-warm 命中时才生效。
   ============================================================ */
body.theme-warm {
  --bg-1: #FBF3E8;
  --bg-2: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(255, 248, 239, 0.92);
  --color-text: #4A2E1C;
  --color-text-soft: #8A6F5C;
  --color-text-mute: #B08C72;
  --color-border: #EAD9C6;
  --color-primary: #D85A30;
  --color-primary-soft: #FBE3D2;
  --color-accent: #C9702B;
  --row-bg: #FFFFFF;
  --row-bg-panel: #FFF8EF;
  --shadow-soft: 0 1px 3px rgba(154, 92, 48, 0.10);
  --shadow-card: 0 4px 16px rgba(154, 92, 48, 0.14);
  background: #FBF3E8;
}
/* 暖色接管背景：进入暖色即关闭用户背景图层（has-page-bg / 内置山峦 .public-shell::before），
   统一改用暖色渐变底，整页彻底换肤（不再显示 background-image 选图）。 */
body.theme-warm .public-shell {
  background:
    radial-gradient(1000px 520px at 15% 0%, #FCEAD4 0%, transparent 60%),
    radial-gradient(1000px 520px at 90% 22%, #F8DCC2 0%, transparent 60%),
    linear-gradient(180deg, #FBF3E8 0%, #F4E2CC 100%);
}
body.theme-warm .public-shell::before,
body.theme-warm.has-page-bg::before,
body.theme-warm.has-page-bg-mobile::before {
  display: none;
}
body.theme-warm .public-shell.has-bg {
  background:
    radial-gradient(1000px 520px at 15% 0%, #FCEAD4 0%, transparent 60%),
    radial-gradient(1000px 520px at 90% 22%, #F8DCC2 0%, transparent 60%),
    linear-gradient(180deg, #FBF3E8 0%, #F4E2CC 100%);
}
body.theme-warm .version-dropdown-btn {
  color: #4A2E1C;
  border-color: rgba(154, 92, 48, 0.25);
}
body.theme-warm .version-option.active { background: var(--color-primary); }
body.theme-warm .version-option:hover { background: rgba(216, 90, 48, 0.10); }
body.theme-warm .bc-item { background: #FFFDF8; border-color: #EAD9C6; }
body.theme-warm .bc-item-normal .bc-head-main .bc-name,
body.theme-warm .bc-name { color: #C0392B; }
body.theme-warm .bc-arrow { color: var(--color-primary); }
body.theme-warm .bc-line-code,
body.theme-warm .code-cell { color: var(--color-primary); font-weight: 500; }

/* 方案 B：主播药丸横滑 + 内容区 */
.warm-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  -webkit-overflow-scrolling: touch;
}
.warm-tab {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: #FFF8EF;
  color: #8A5A38;
  border: 0.5px solid #EAD9C6;
  font-size: 13px;
  font-family: var(--font-base);
  white-space: nowrap;
}
.warm-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.warm-content { display: flex; flex-direction: column; gap: 10px; }
body.theme-warm.warm-variant-b .bc-list { gap: 12px; }
body.theme-warm.warm-variant-b .bc-line {
  background: #FFFDF8;
  border: 0.5px solid #F0DCC8;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0;
}
body.theme-warm.warm-variant-b .bc-line + .bc-line { border-top: 0.5px solid #F3E6D8; }

/* 方案 C：主播列表 + 底部抽屉 */
.warm-list { display: flex; flex-direction: column; gap: 10px; }
.warm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #FFFDF8;
  border: 0.5px solid #F0DCC8;
  border-radius: 14px;
  padding: 12px 14px;
}
.warm-row-av {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #FBE3D2;
}
.warm-row-av .bc-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.warm-row-main { flex: 1 1 auto; min-width: 0; }
.warm-row-name { display: block; font-size: 15px; font-weight: 500; color: #C0392B; font-family: var(--font-base); }
.warm-row-sub { display: block; font-size: 12px; color: #A07A5C; margin-top: 2px; }
.warm-row-badge { flex: 0 0 auto; font-size: 12px; color: #fff; background: var(--color-primary); border-radius: 999px; padding: 2px 9px; }
.warm-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(74, 46, 28, 0.35);
  display: none; align-items: flex-end; justify-content: center;
  z-index: 60;
}
.warm-sheet-backdrop.show { display: flex; }
.warm-sheet {
  width: 100%; max-width: 480px;
  background: #FFF8EF;
  border-radius: 18px 18px 0 0;
  max-height: 80vh;
  display: flex; flex-direction: column;
  padding: 8px 16px 20px;
  box-sizing: border-box;
}
.warm-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: #E8D5C0; margin: 6px auto 10px; }
.warm-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.warm-sheet-title { font-size: 14px; font-weight: 500; color: #5A3220; font-family: var(--font-base); }
.warm-sheet-close { border: none; background: transparent; font-size: 18px; line-height: 1; color: #A07A5C; padding: 4px 8px; }
.warm-sheet-body { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
body.theme-warm.warm-variant-c .warm-sheet-body .bc-line {
  background: #FFFDF8;
  border: 0.5px solid #F0DCC8;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0;
}
body.theme-warm.warm-variant-c .warm-sheet-body .bc-line + .bc-line { border-top: 0.5px solid #F3E6D8; }

/* 暖色切换器（仅暖色模式显示） */
.warm-switcher {
  position: fixed; right: 12px; bottom: 64px; z-index: 70;
  display: flex; align-items: center; gap: 6px;
  background: #FFFFFF;
  border: 0.5px solid #EAD9C6;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(154, 92, 48, 0.18);
  font-family: var(--font-base);
}
.warm-switcher-label { font-size: 12px; color: #A07A5C; margin-right: 2px; }
.warm-switcher button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0.5px solid #EAD9C6;
  background: #FFF8EF;
  color: #8A5A38;
  font-size: 13px;
  font-family: var(--font-base);
}
.warm-switcher button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============================================================
   主题二（sticker · 2026-09-23）：小药丸板块选择 + 头像气泡墙 + 派送卡片弹窗
   ============================================================ */

/* ---------- 主题二内置「奶油暖阳」底（纯 CSS：零积分 / 零水印 / 零额外流量） ----------
   外层背景图保持「可选用」的原逻辑，奶油底只在「没选图」时补位（:not(.has-bg)）：
     · 没选图 → 走这套奶油渐变，替代默认的蓝绿渐变
     · 选了图 → 让位给用户选的背景图（.public-shell.has-bg 的半透明白罩继续起效）
   零素材、零成本，随时可切。 */
body.theme-sticker .public-shell:not(.has-bg) {
  background-color: #FCF4E8;
  background-image:
    /* ① 细光点（最上层；小 tile 平铺，暖白颗粒，呼应晨光里的浮尘） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='340'><circle cx='40' cy='52' r='1.6' fill='%23ffffff' opacity='0.85'/><circle cx='150' cy='120' r='1.2' fill='%23fff3de' opacity='0.8'/><circle cx='210' cy='240' r='1.5' fill='%23ffffff' opacity='0.75'/><circle cx='88' cy='300' r='1.1' fill='%23fff3de' opacity='0.7'/></svg>"),
    /* ② 左上斜向晨光带 */
    linear-gradient(118deg, rgba(255, 249, 238, 0.95) 0%, rgba(255, 240, 214, 0.5) 24%, rgba(255, 240, 214, 0) 50%),
    /* ③ 右上暖橙柔光晕 */
    radial-gradient(820px 520px at 86% 16%, rgba(255, 224, 186, 0.5) 0%, transparent 62%),
    /* ④ 左下蜜桃柔光晕 */
    radial-gradient(900px 500px at 22% 100%, rgba(246, 216, 186, 0.45) 0%, transparent 64%),
    /* ⑤ 奶油主渐变（最底层，不透明） */
    linear-gradient(168deg, #FFFDF8 0%, #FCF4E8 46%, #F5E3CF 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 260px 340px, auto, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}
/* 奶油底不需要默认的蓝绿山峦装饰层（只关「没选图」那一层，选图时图层逻辑完全不动） */
body.theme-sticker .public-shell:not(.has-bg)::before { display: none; }
/* 药丸在奶油底上要够清晰：原来 0.1 透明白底 + 白描边在浅色底上几乎看不到边界 */
body.theme-sticker .version-pill {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(210, 172, 132, 0.45);
  color: #7C5232;
  box-shadow: 0 2px 8px rgba(176, 136, 96, 0.12);
}
body.theme-sticker .version-pill.active {
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(255, 122, 24, 0.30);
}

/* 左下角浮动工具条：「背景图」+「主题切换」并排（等价于原背景图按钮的定位） */
.public-tools {
  position: fixed;
  left: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}
.public-tools .bgpick-btn { position: static; left: auto; bottom: auto; }
.themeswitch-btn { position: static; }

/* ---------- 小药丸板块选择（一屏放下五个，字号小、均分） ---------- */
.version-pills-wrap { display: block; margin: 0 0 var(--head-gap); }
.version-pills {
  display: flex;
  gap: 6px;
  padding: 0 12px;
  max-width: 720px;
  margin: 0 auto;
}
.version-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: var(--row-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 700;
  color: #2b3142;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.version-pill.active {
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
}

/* ---------- 头像气泡墙（球更大 + 双列错落 + 上下浮动 + 已贴进度环） ---------- */
.sticker-stage {
  max-width: 720px;
  margin: 0 auto;
  min-height: 58vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 3vmin;
  padding: 8px 10px 48px;
}
.sticker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6vmin;
  min-width: 0;
}
/* 1~2 个：单列。1 个居中放大，2 个上下排 */
.sticker-stage.stage-single .sticker-col { justify-content: center; gap: 6vmin; }
/* 3 个起：双列错落。右列整体下沉半格 → 洒脱的错位感 */
.sticker-stage.stage-double .sticker-col { justify-content: space-around; }
.sticker-stage.stage-double .sticker-col-r { transform: translateY(6vmin); }
.sticker-bubble-wrap {
  transform: translate(var(--jx, 0px), var(--jy, 0px));
  line-height: 0;
}
.sticker-bubble {
  position: relative;
  width: var(--sz, 30vmin);
  height: var(--sz, 30vmin);
  padding: calc(var(--sz, 30vmin) * 0.05);
  border: 0;
  border-radius: 50%;
  /* 环形进度：--p = 已贴百分比（未贴=整圈白环 / 部分=橙色圆弧） */
  background: conic-gradient(#ff8a3d calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.55) 0);
  box-shadow: 0 10px 26px rgba(20, 27, 45, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: stickerFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* 全部贴完：绿环 + 绿光晕 */
.sticker-bubble.done {
  background: #22a06b;
  box-shadow: 0 10px 26px rgba(34, 160, 107, 0.42);
}
.sticker-bubble:active { filter: brightness(0.92); }
.sb-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.sticker-bubble .bc-avatar,
.sticker-bubble .bc-avatar-empty {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  font-size: 9vmin;
}
/* 右下角进度角标：部分=「2/3」，全部=「✓」 */
.sb-badge {
  position: absolute;
  right: -3%;
  bottom: -3%;
  z-index: 2;
  min-width: 1.45em;
  padding: 0 0.42em;
  border-radius: 999px;
  background: #ff7a18;
  color: #fff;
  font-family: var(--font-base);
  font-size: max(12px, calc(var(--sz, 30vmin) * 0.2));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 2px 8px rgba(20, 27, 45, 0.28);
}
.sb-badge-done { background: #22a06b; }
@keyframes stickerFloat {
  from { transform: translateY(7px) scale(0.985); }
  to   { transform: translateY(-15px) scale(1.015); }
}

/* ---------- 派送卡片弹窗（右上角 × 关闭） ---------- */
/* 主题二「一体式背景」可调参数 —— 以后要调通透度、或换效果图，只看这一段四个数字：
   --bk-alpha    弹窗外页面遮罩浓度：越淡 → 一级页面背景越连贯（默认 0.20）
   --sheet-veil  弹窗薄纱浓度：与一级 .public-shell.has-bg 的白纱 0.36 对齐 → 同深同浅（默认 0.25）
   --card-alpha  卡片底透明度：越小越透、背景越明显（马老师 2026-09-23 定 0.5）
   --card-blur   卡片毛玻璃强度：让背景透出来的同时压住文字（马老师 2026-09-23 定 4px） */
.sticker-sheet-backdrop {
  --bk-alpha: 0.20;
  --sheet-veil: 0.25;
  --card-alpha: 0.5;
  --card-blur: 4px;
  position: fixed;
  inset: 0;
  /* 遮罩从「压暗全屏的深蓝」改成「很淡的暖茶色渐深」：
     一级页面的背景图能一路连贯到弹窗边缘，不再有一道深色断层。 */
  background: linear-gradient(
    180deg,
    rgba(46, 34, 26, calc(var(--bk-alpha) * 0.6)) 0%,
    rgba(46, 34, 26, var(--bk-alpha)) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 100;
}
.sticker-sheet-backdrop.show { display: flex; }
.sticker-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(20, 27, 45, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-base);
  /* 弹窗底 = 一级页面那层的延续（一体式）：
     ① 一块与视口等大的背景同步层（见下方 ::before）负责铺「和页面同一位置的同一张图」；
     ② ::after 薄纱层浓度与一级 .public-shell.has-bg 的白纱 0.36 对齐 → 同深同浅；
     ③ background-color 是"页面没选背景图"时的兜底奶油纱（与主题二奶油底一致）。
     不用 background-attachment: fixed —— iOS Safari 对该属性支持有坑（历史踩过：拉伸/错位）。 */
  background-color: rgba(255, 253, 248, var(--sheet-veil, 0.25));
  /* 兜底毛玻璃：万一同步层取不到图，也能透出后面的页面颜色，不会变成实心白板 */
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  /* 建独立层叠上下文：背景/薄纱两层用负 z-index 稳稳压在内容之下，不会串到弹窗外面 */
  isolation: isolate;
}
/* 页面选了背景图 → 弹窗自动同步同一张（纯 CSS，无需 JS，也不会慢一拍） */
body.has-page-bg .sticker-sheet { --sheet-bg: var(--page-bg); }
@media (max-width: 768px) {
  body.has-page-bg-mobile .sticker-sheet { --sheet-bg: var(--page-bg-mobile, var(--page-bg)); }
}
/* 「点名覆盖」由 JS 把 --sheet-bg 写成 inline（HOST_BG_OVERRIDE 命中图片/颜色）：
   inline 自定义属性优先于上面两条样式表规则 → 给某位主播单独换图，其余主播不受影响。 */

/* ---------- 背景同步层（一体式的关键）：弹窗 = 一扇透明的窗 ----------
   画一块与视口等大的背景（100vw × 100vh、cover、center top —— 与 body.has-page-bg::before
   完全同一套参数），再把它反向平移，抵消弹窗自身在视口中的偏移。
   于是弹窗窗口里看到的，就是页面背景在「同一位置」的那一块 → 同深同浅、无缝衔接。
   --sheet-x / --sheet-y 由 JS 在打开弹窗时写入；取不到时按 0 处理，图仍会显示（只是有偏移）。 */
.sticker-sheet::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sheet-x, 0px));
  top: calc(-1 * var(--sheet-y, 0px));
  width: 100vw;
  height: 100vh;
  z-index: -2;
  background-image: var(--sheet-bg, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* 页面没选背景图时的「主播头像氛围底」兜底：同一层加高斯模糊，只留色调，一人一色 */
.sticker-sheet.host-ambient::before {
  filter: blur(30px) saturate(1.35);
  opacity: 0.92;
}
/* 薄纱层 = "同深同浅"的调钮：浓度与一级 .public-shell.has-bg 的白纱（0.36）同一档 */
.sticker-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 253, 248, var(--sheet-veil, 0.25));
  pointer-events: none;
}
/* 头像氛围底颜色更艳 → 薄纱加浓压住，保证文字对比度 */
.sticker-sheet.host-ambient::after { background: rgba(255, 253, 248, 0.6); }

/* ---------- 兜底：页面没选背景图时的「主播头像氛围底」 ----------
   由 JS 把主播头像地址写进 --sheet-bg 并挂 .host-ambient（同一层加高斯模糊，只留色调）。
   页面一旦选了背景图，CSS 就用 var(--page-bg) 自动同步页面同一张，两条路互斥、不打架。 */
.sticker-sheet-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  /* 弹窗内字体一律纯黑（马老师 2026-09-23：之前发灰，改成黑） */
  color: #000;
  padding: 4px 8px;
  cursor: pointer;
}
.sticker-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 44px 12px 16px;
  /* head 保持透明（露出主播氛围底），分隔线改成中性淡线，避免纯灰线在暖底上发脏 */
  border-bottom: 1px solid rgba(120, 104, 88, 0.16);
  flex: 0 0 auto;
}
/* 弹窗头是纯透明的（直接压在背景图上）：给头和主播名加极淡白描边，
   与一级页面 .public-shell.has-bg 同一策略 —— 背景再花，字也读得清。 */
.sticker-sheet .ss-label,
.sticker-sheet .ss-name { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.92), 0 0 6px rgba(255, 255, 255, 0.7); }
/* 表头「派送ID」跟正文表头同字号（原先 12px 小灰字，比卡片里的表头还小） */
.ss-label { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: #000; }
.sticker-sheet.cnt-1 .ss-label { font-size: 19px; }
.sticker-sheet.cnt-2 .ss-label { font-size: 18px; }
.sticker-sheet.cnt-3 .ss-label { font-size: 16px; }
/* 「全贴完啦」按钮：原先绝对居中会压到右边的主播名 → 先改成紧跟表头左侧，
   但马老师 2026-09-23 反馈「太靠左」，再往右挪 24px（仍不居中，避免撞主播名） */
.ss-mid { flex: 0 0 auto; display: flex; align-items: center; margin-left: 24px; }
.ss-name {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  padding-left: 8px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 800;
  color: #000;
}
.sticker-all-btn {
  padding: 7px 13px;
  border-radius: 999px;
  border: 0;
  background: #ff7a18;
  color: #fff;
  font-family: var(--font-base);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255, 122, 24, 0.35);
}
.sticker-all-btn.done { background: #b9bec9; box-shadow: none; }
/* 弹窗最小高度按数量分档：1 只也要占住下半屏，4 只以上直接撑满一屏 */
.sticker-sheet.cnt-1 { min-height: 52vh; }
.sticker-sheet.cnt-2 { min-height: 62vh; }
.sticker-sheet.cnt-3 { min-height: 72vh; }
.sticker-sheet.cnt-4,
.sticker-sheet.cnt-5,
.sticker-sheet.cnt-6,
.sticker-sheet.cnt-7,
.sticker-sheet.cnt-8 { min-height: 86vh; }

.sticker-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: stretch;
}
.sticker-sheet-body.cols-1 { grid-template-columns: 1fr; }
.sticker-sheet-body.cols-2 { grid-template-columns: 1fr 1fr; }
.sticker-sheet-body.count-1,
.sticker-sheet-body.count-2,
.sticker-sheet-body.count-3,
.sticker-sheet-body.count-4,
.sticker-sheet-body.count-5,
.sticker-sheet-body.count-6,
.sticker-sheet-body.count-7,
.sticker-sheet-body.count-8 { grid-auto-rows: 1fr; }
/* 字号阶梯：人少 → 字大间距松；人多 → 紧凑但一屏装下 */
.sticker-sheet-body.count-1 { font-size: 19px; gap: 16px; }
.sticker-sheet-body.count-2 { font-size: 18px; gap: 14px; }
.sticker-sheet-body.count-3 { font-size: 16px; gap: 12px; }
.sticker-sheet-body.count-4,
.sticker-sheet-body.count-5,
.sticker-sheet-body.count-6 { font-size: 13.5px; gap: 11px; }
.sticker-sheet-body.count-7,
.sticker-sheet-body.count-8 { font-size: 12.5px; gap: 12px; }
/* 卡片内边距 / 行距跟着一起放大或收紧，避免「字大了但卡片还是扁的」 */
/* 1~3 只：行在卡片里均匀铺开（不是挤在顶部），整张卡片更「正」 */
.sticker-sheet-body.count-1 .sticker-card,
.sticker-sheet-body.count-2 .sticker-card,
.sticker-sheet-body.count-3 .sticker-card { justify-content: space-around; }
.sticker-sheet-body.count-1 .sr-sticky-row,
.sticker-sheet-body.count-2 .sr-sticky-row,
.sticker-sheet-body.count-3 .sr-sticky-row { margin-top: 0; }
.sticker-sheet-body.count-1 .sticker-card { padding: 18px 20px; gap: 12px; border-radius: 16px; }
.sticker-sheet-body.count-2 .sticker-card { padding: 16px 18px; gap: 11px; border-radius: 16px; }
.sticker-sheet-body.count-3 .sticker-card { padding: 15px 16px; gap: 8px; border-radius: 15px; }
.sticker-sheet-body.count-4 .sticker-card,
.sticker-sheet-body.count-5 .sticker-card,
.sticker-sheet-body.count-6 .sticker-card { padding: 12px 13px; gap: 6px; border-radius: 13px; }
.sticker-sheet-body.count-7 .sticker-card,
.sticker-sheet-body.count-8 .sticker-card { padding: 13px 14px; gap: 7px; border-radius: 13px; }
/* 敲卡这类一次 8 只：格子最挤，标记按钮单独再收一档（比其他双列档小一点点） */
.sticker-sheet-body.count-7 .sr-sticky,
.sticker-sheet-body.count-8 .sr-sticky { padding: 6px 5px; font-size: 0.95em; }
/* 7~8 只档：卡片被 grid-auto-rows:1fr 拉得比内容高，便利贴行原本靠 margin-top:auto 被推到底部
   → 与上方「派送时长」之间空出一大段。马老师 2026-09-23 要求收窄这段距离：
   便利贴改为紧跟上一行（间距=卡片 gap），卡片内容整体垂直居中，上下留白对称、不空底。 */
.sticker-sheet-body.count-7 .sr-sticky-row,
.sticker-sheet-body.count-8 .sr-sticky-row { margin-top: 0; }
.sticker-sheet-body.count-7 .sticker-card,
.sticker-sheet-body.count-8 .sticker-card { justify-content: center; }

.sticker-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 13px;
  /* 半透明玻璃卡：透明度走 --card-alpha（现默认 0.5）+ 毛玻璃 ——
     背景能一路透进卡片里，敲卡 8 个框并排也不会糊成一片白；
     毛玻璃把背景糊开，文字依然压得住。
     边框用 0.92 的白 + 内外两层淡阴影：背景再浅，卡片"容器边界"也看得出来。 */
  background: rgba(255, 255, 255, var(--card-alpha, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 14px rgba(64, 46, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(var(--card-blur, 4px)) saturate(1.18);
  -webkit-backdrop-filter: blur(var(--card-blur, 4px)) saturate(1.18);
  overflow: hidden;
}
/* 已贴：仍保持半透明玻璃，但底色由「浅红」改为「浅紫」
   （马老师 2026-09-23：标记后的颜色换成紫色）。实度 0.62 比未贴(0.5)明显一档，
   好认进度，又不会在通透背景上糊出一块突兀的实心块。 */
.sticker-card.claimed { background: rgba(226, 214, 255, 0.62); border-color: rgba(168, 138, 255, 0.8); }
.sticker-row { display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
/* 弹窗内文字一律纯黑（马老师 2026-09-23：之前灰扑扑的，一定要黑）——
   只留「密语」保持红色强调（那是刻意要的红字），按钮另算 */
.sr-label { flex: 0 0 auto; width: 4.3em; color: #000; font-weight: 700; }
.sr-value { flex: 1 1 auto; min-width: 0; color: #000; font-weight: 600; word-break: break-word; }
.sr-value.sr-code { color: #e4393c; font-weight: 800; letter-spacing: 0.5px; }
.sr-value.sr-note { font-weight: 500; color: #000; }
/* 便利贴：药丸按钮。未贴 / 已贴两句话都强制单行 —— 切换时不会把卡片顶高一行 */
.sr-sticky {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  /* 未贴 = 红字（马老师 2026-09-23：按钮字体改红，显眼一点） */
  background: rgba(228, 57, 60, 0.10);
  border: 1px solid rgba(228, 57, 60, 0.42);
  color: #e4393c;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* 已贴 = 紫字紫底（马老师 2026-09-23：标记后的颜色换成紫色）；
   再点一次取消 → 回到上面的红字态。 */
.sr-sticky.on {
  background: rgba(124, 77, 255, 0.15);
  border-color: rgba(124, 77, 255, 0.5);
  color: #6d3bd4;
}
.sr-sticky-row { margin-top: auto; }
/* 便利贴行不再显示「便利贴」表头，按钮自己独占整行 —— 省一行、按钮顺势上移，长文案也不折行 */
.sticker-sheet-body.cols-1 .sr-sticky {
  flex: 1 1 100%;
  padding: 8px 10px;
  text-align: center;
  font-size: 0.92em;
}
/* 双列密集排版（≥4 只）卡片内宽只有 ~140px：按钮独占整行 + 短文案，字号才放得开 */
.sticker-sheet-body.cols-2 .sr-sticky-row { gap: 0; }
.sticker-sheet-body.cols-2 .sr-sticky {
  width: 100%;
  padding: 8px 6px;
  text-align: center;
  font-size: 1.05em;
  letter-spacing: 0;
}

/* ============================================================
   小程序版 · 卡片式车列（只跟随气泡页；原版页仍是手风琴）
   列数由车数决定（JS 的 dzGridCls 挂 cols-1 / cols-2，另加 big 修饰）：
     能整除 4（4 / 8）→ cols-2 两列网格（4 = 四宫格 / 8 = 2×4，卡片放大一档）
     其余（2/3/5/6/7）→ cols-1 单列横条：左车名、右密语，铺满整行
     其中 ≤2 辆加 .big 再放大一档（车少，把地方用起来）
   ============================================================ */
/* 收一个宽带上限：电脑上两列卡片不至于被拉到 600px 宽、一行字看半天 */
.dz-sec { max-width: 900px; margin: 0 auto 18px; }
.dz-sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.dz-sec-name {
  font-size: 17px;
  font-weight: 800;
  color: #1f2330;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
.dz-sec-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.16);
  color: #a8530f;
  font-size: 12.5px;
  font-weight: 700;
}
.dz-cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
.dz-cards.cols-2 { grid-template-columns: 1fr 1fr; gap: 9px; }
.dz-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px;
  border-radius: 16px;
  /* 与主题二弹窗里的玻璃卡同一套语言：半透明 + 毛玻璃 + 0.92 白边 */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 14px rgba(64, 46, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px) saturate(1.18);
  -webkit-backdrop-filter: blur(4px) saturate(1.18);
}
/* 已贴：与弹窗卡片同一套紫色语义 */
.dz-card.claimed { background: rgba(226, 214, 255, 0.62); border-color: rgba(168, 138, 255, 0.8); }
.dz-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #000;
  line-height: 1.3;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
.dz-card-code-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dz-card-label { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #4c5365; }
.dz-card-code {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #e4393c;
  word-break: break-all;
}
.dz-card-code-empty { color: #9aa0ad; font-weight: 600; letter-spacing: 0; }
.dz-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.dz-card-foot .dz-sticky {
  flex: 1 1 auto;
  text-align: center;
  padding: 7px 10px;
  font-size: 12.5px;
}
.dz-card-foot .bc-detail-btn { flex: 0 0 auto; font-size: 13px; padding: 5px 10px; }

/* ---- 单列横条档（2/3/5/6/7 辆）：车名在左、密语在右一行铺满，按钮落到第二行 ---- */
.dz-cards.cols-1 .dz-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 14px;
}
.dz-cards.cols-1 .dz-card-name { grid-column: 1; grid-row: 1; font-size: 16px; }
.dz-cards.cols-1 .dz-card-code-row { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.dz-cards.cols-1 .dz-card-code { font-size: 22px; letter-spacing: 0.5px; }
.dz-cards.cols-1 .dz-card-foot { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }

/* ---- 车特别少（≤2 辆）：卡片撑高、字体再放大一档，把地方用起来 ---- */
.dz-cards.cols-1.big .dz-card {
  min-height: 132px;
  align-content: center;
  gap: 10px 12px;
  padding: 18px 17px;
}
.dz-cards.cols-1.big .dz-card-name { font-size: 19px; }
.dz-cards.cols-1.big .dz-card-label { font-size: 14px; }
.dz-cards.cols-1.big .dz-card-code { font-size: 28px; letter-spacing: 1px; }
.dz-cards.cols-1.big .dz-card-foot .dz-sticky { padding: 10px 12px; font-size: 14px; }

/* ---- 两列密集档（4 / 8 辆）：卡片比首版高一档、字大一号 ---- */
.dz-cards.cols-2 .dz-card { min-height: 122px; padding: 15px 13px; gap: 7px; }
.dz-cards.cols-2 .dz-card-name { font-size: 16px; }
.dz-cards.cols-2 .dz-card-code { font-size: 22px; letter-spacing: 0.5px; }

@media (max-width: 560px) {
  /* 「顶格」：吃掉容器左右 12px 内边距里的大半，横条尽量铺到屏幕边；
     标题自己补回同等内边距，免得和上面的版本药丸错位 */
  .dz-sec { margin-left: -8px; margin-right: -8px; }
  .dz-sec-head { padding: 0 10px; }
  .dz-cards.cols-2 { gap: 8px; }
  .dz-cards.cols-2 .dz-card { padding: 14px 12px; gap: 6px; min-height: 118px; }
  /* 密语占位大，按钮挤在同一行容易点不准 → 独占整行 */
  .dz-card-foot .dz-sticky { flex: 1 1 100%; }
}

/* ============================================================
   电脑端（≥769px）：同样跑气泡页（不再退回原版表格）
   气泡按 vmin 算径，宽屏上 vmin = 视口高度 → 会涨到几百 px；
   这里按「行数档位」给每颗球定上限，做到「够大、点得准」又不撑爆屏幕。
   ============================================================ */
@media (min-width: 769px) {
  /* 左下角工具条在电脑端也显示（只留「切换主题」，背景图按钮仍是手机专属） */
  .public-tools { gap: 10px; }
  .themeswitch-btn { font-size: 15px; padding: 8px 16px; }

  .version-pills { max-width: 960px; gap: 8px; }
  .version-pill { font-size: 15px; padding: 10px 6px; }

  .sticker-stage {
    max-width: 1060px;
    min-height: 64vh;
    /* 电脑端行数多时纵向最吃紧，间距收一档，保证 8 颗球一屏装得下 */
    gap: 3.2vmin;
    padding: 8px 20px 80px;
  }
  .sticker-stage.stage-rows-1 .sticker-col { --sticker-cap: 32vh; }
  .sticker-stage.stage-rows-2 .sticker-col { --sticker-cap: 26vh; }
  .sticker-stage.stage-rows-3 .sticker-col { --sticker-cap: 20vh; }
  .sticker-stage.stage-rows-4 .sticker-col { --sticker-cap: 16vh; }
  .sticker-bubble {
    width: min(var(--sz, 30vmin), var(--sticker-cap, 24vh));
    height: min(var(--sz, 30vmin), var(--sticker-cap, 24vh));
  }
  .sb-badge { font-size: 18px; padding: 0 0.5em; }
  /* 没头像时的名字占位字：跟着球径上限走，别写死 px（球变小球里就撑爆换行） */
  .sticker-bubble .bc-avatar,
  .sticker-bubble .bc-avatar-empty { font-size: calc(var(--sticker-cap, 24vh) * 0.27); line-height: 1.1; }

  /* 弹窗在电脑上略微加宽，卡片不必挤在小窗里 */
  .sticker-sheet { max-width: 720px; }
  .sticker-sheet-backdrop { padding: 24px; }
}