:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --bg: #f5f6fa;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #e5e7eb;
  --ok: #10b981;
  --warn: #f59e0b;
  --info: #3b82f6;
  --err: #ef4444;
}

* { box-sizing: border-box; }

/* ⚠️ 安卓加固：部分安卓浏览器 / 微信内置内核会对小字号正文做「字体放大」(text autosizing)，
   被放大的文字在定高容器里会被 overflow:hidden 裁掉（公告条、按钮都中过招）。
   显式关掉放大，让各端字号一致。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--primary); text-decoration: none; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 700; font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); display: inline-block; }
.topbar nav {
  display: flex; gap: 16px; align-items: center;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
/* 导航项做成胶囊：当前页有底色，鼠标移上去也有反馈，比纯文字好认 */
.topbar nav a {
  color: var(--muted); font-size: 14px; padding: 6px 12px; flex: none;
  border-radius: 999px; transition: color .15s, background .15s;
}
.topbar nav a:hover { color: var(--primary); background: #f5f3ff; }
.topbar nav a.active { color: var(--primary); font-weight: 600; background: #eef2ff; }
/* 退出项弱化为低调的幽灵样式，和主功能项区分开 */
.topbar nav a.nav-exit { color: var(--muted); }
.topbar nav a.nav-exit:hover { color: var(--err); background: #fef2f2; }
/* 待审批订单角标（后台导航「订单」后面） */
.nav-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  margin-left: 6px; padding: 0 5px; border-radius: 9px;
  background: var(--err); color: #fff;
  font-size: 11px; font-weight: 600; text-align: center; vertical-align: 1px;
}

.container { max-width: 860px; margin: 0 auto; padding: 32px 20px 60px; }
.container.narrow { max-width: 520px; }
.container.wide { max-width: 1100px; }

.hero { text-align: center; padding: 24px 0 8px; }
.hero h1 { font-size: 30px; margin: 0 0 12px; }
.hero p { color: var(--muted); margin: 0 auto; max-width: 620px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }

/* 首页顶部广告位：轮播容器（图片 / 文字两种 slide） */
.ad-carousel {
  position: relative;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(79, 70, 229, .12);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(30, 27, 75, .06), 0 1px 3px rgba(0, 0, 0, .04);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ad-carousel:hover { box-shadow: 0 12px 34px rgba(30, 27, 75, .1), 0 1px 3px rgba(0, 0, 0, .04); }
.ad-track {
  display: flex;
  transition: transform .55s cubic-bezier(.34, .7, .2, 1);
  will-change: transform;
}
/* 文字广告：用 min-height 而不是固定高度 —— 固定高度会把长文案直接裁掉，
   现在由内容自己撑开；多条时靠 flex 拉伸保证每条等高。 */
.ad-slide-text { min-height: 160px; }
/* 图片广告：容器高度跟随图片原始宽高比，保证整图完整显示、不裁切变形。
   --ad-ratio 由模板按图片真实宽高注入（如 1.7778）。
   max-height 是给竖长图 / 超宽图的兜底：超了就按比例缩小并居中留白，
   避免一张竖图把首页顶下去一整屏。 */
.ad-carousel.is-image .ad-slide-image {
  aspect-ratio: var(--ad-ratio, 16 / 9);
  max-height: 480px;
  background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 100%);
}
.ad-carousel.is-image .ad-slide-image img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* 图片还没加载完（拿不到真实比例）时，先按 16:9 预估占位 ——
   比原来的固定 160px 更接近最终高度，加载完几乎不会跳。 */
.ad-carousel.is-image:not(.ratio-ready) .ad-slide-image { aspect-ratio: 16 / 9; }
/* 加载中的骨架微光，明确告诉访客"这里在加载" */
.ad-carousel.is-image:not(.ratio-ready)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 75%);
  background-size: 220% 100%;
  animation: ad-shimmer 1.1s linear infinite;
}
@keyframes ad-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
/* 图片加载失败：不显示浏览器的破图图标，给一句说明，广告位不塌陷 */
.ad-slide.is-broken { background: #f6f7fb; }
.ad-slide.is-broken img { visibility: hidden; }
.ad-slide.is-broken::after {
  content: '图片加载失败'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px;
}

.ad-slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
/* 纯文字广告：细腻渐层 + 居中排版 */
.ad-slide-text {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background:
    radial-gradient(1200px 300px at 15% -20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(140deg, #eef2ff 0%, #e0e7ff 55%, #dbe2ff 100%);
  padding: 24px 28px;
}
/* 文字广告右下角一枚淡紫光晕点缀，让纯色底不那么平 */
.ad-slide-text::after {
  content: ''; position: absolute; right: -40px; bottom: -60px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
  pointer-events: none;
}
.ad-text-body { text-align: center; max-width: 100%; position: relative; z-index: 1; }
.ad-text-title {
  font-size: 20px; font-weight: 700; color: #1e1b4b;
  margin-bottom: 7px; line-height: 1.4;
  letter-spacing: .5px;
}
.ad-text-desc {
  font-size: 14.5px; color: #3730a3; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  opacity: .95;
}
/* 轮播圆点：当前这条同时是「自动播放进度条」 */
.ad-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 7px;
  z-index: 2;
}
.ad-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .14);
  cursor: pointer; transition: width .25s, background .25s, transform .2s;
  position: relative; overflow: hidden;
}
.ad-dot:hover { transform: scale(1.2); }
.ad-dot.active { width: 20px; border-radius: 6px; background: rgba(255, 255, 255, .5); }
.ad-dot.active::after {
  content: ''; position: absolute; inset: 0; background: #fff; border-radius: inherit;
  transform-origin: left center;
  animation: ad-dot-fill var(--ad-interval, 4000ms) linear forwards;
}
@keyframes ad-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 左右切换按钮：桌面端鼠标移入才显形，触屏靠滑动（由媒体查询隐藏） */
.ad-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(17, 20, 30, .32); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s, background .2s, transform .2s;
  z-index: 3;
  backdrop-filter: blur(2px);
}
.ad-arrow:hover { background: rgba(17, 20, 30, .58); transform: translateY(-50%) scale(1.08); }
.ad-arrow-prev { left: 12px; }
.ad-arrow-next { right: 12px; }
.ad-carousel:hover .ad-arrow, .ad-arrow:focus-visible { opacity: 1; }
/* 触屏 / 窄屏：没有 hover 可言，箭头只会挡住画面，直接去掉，靠滑动切换 */
@media (hover: none), (max-width: 640px) {
  .ad-arrow { display: none; }
}

/* 系统开了「减少动态效果」：不闪骨架、不走进度动画 */
@media (prefers-reduced-motion: reduce) {
  .ad-track { transition: none; }
  .ad-carousel.is-image:not(.ratio-ready)::after { animation: none; opacity: 0; }
  .ad-dot.active::after { animation: none; }
}

/* 进站弹窗（通知 / 广告）：遮罩 + 居中卡片。
   默认隐藏，由 JS 判断是否需要弹出；多条时一次显示一条，关掉再显示下一条。 */
.popup-mask {
  position: fixed; inset: 0;
  background: rgba(15, 18, 30, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 999;
  opacity: 0; transition: opacity .18s ease;
}
.popup-mask[hidden] { display: none; }
.popup-mask.show { opacity: 1; }
.popup-box {
  background: #fff;
  border-radius: 16px;
  max-width: 420px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  transform: translateY(12px) scale(.98);
  transition: transform .18s ease;
  position: relative;
}
.popup-mask.show .popup-box { transform: translateY(0) scale(1); }
.popup-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.06); color: #4b5563;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.popup-close:hover { background: rgba(0,0,0,.12); }
.popup-img { display: block; width: 100%; border-radius: 16px 16px 0 0; }
/* 纯图片型：图片带圆角，下方不再留文字区 */
.popup-type-image .popup-img { border-radius: 16px; }
.popup-body { padding: 20px 22px 22px; }
.popup-body:empty { display: none; }
.popup-title {
  font-size: 18px; font-weight: 700; color: #1f2430;
  margin: 0 0 8px; line-height: 1.45;
}
.popup-text {
  font-size: 14px; color: #4b5563; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.popup-actions { padding: 0 22px 20px; display: flex; gap: 10px; }
.popup-actions .btn { flex: 1; text-align: center; }
.popup-only-text .popup-actions { padding-top: 20px; }

/* 「今日不再弹出」勾选项：位于正文与按钮之间，弱化处理，不打断主视觉 */
.popup-no-more {
  display: flex; align-items: center; gap: 8px;
  padding: 0 22px 16px; margin-top: -4px;
  font-size: 13px; color: var(--muted); cursor: pointer; user-select: none;
}
.popup-no-more input {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--primary); cursor: pointer;
}
/* 多条时的进度提示 */
.popup-progress {
  padding: 0 22px 14px; font-size: 12px; color: #9aa3af;
}
.popup-progress[hidden] { display: none; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card.center { text-align: center; }
.card h2 { margin: 0 0 6px; font-size: 21px; }
.card h3 { margin: 0 0 16px; font-size: 17px; }

.product-card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.product-card h3 { margin: 4px 0 0; font-size: 17px; }
.product-card .price { font-size: 26px; font-weight: 700; color: var(--primary); }

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: .15s;
  background: #fff;
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost { border-color: var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn.block { display: block; width: 100%; }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.danger { background: var(--err); color: #fff; }
.btn.danger:hover { background: #dc2626; }
/* 危险操作的"低调版"：透明底 + 红字红边（用在列表操作列，避免每行都是大红块）
   ⚠️ 必须显式写 background: transparent —— `.btn.danger` 的实心红底会继承下来，
      配上这里的红字就变成"红底红字"，文字直接看不见（截图验证抓到的）。 */
.btn.ghost.danger { background: transparent; border-color: #fecaca; color: var(--err); }
.btn.ghost.danger:hover { background: #fef2f2; border-color: var(--err); color: var(--err); }
.btn.file-btn { cursor: pointer; }
/* 售罄时被 JS 置灰的「立即购买」：不让点，也不再像可点的蓝按钮 */
.btn.is-disabled { background: #e5e7eb; color: #9ca3af; border-color: transparent; pointer-events: none; }
/* 提交中的按钮（base.html 全局防重复提交）：看着就知道点上了 */
.btn.is-busy { opacity: .65; cursor: default; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; margin-bottom: 6px; color: #374151; }
.field .req { color: var(--err); }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 15px; font-family: inherit; background: #fff; color: var(--text);
}
select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* 管理员登录：用户名固定为 Continue 只读展示，无需也禁止修改 */
input[readonly], input[readonly=true] {
  background: #f3f4f6; color: #6b7280;
  cursor: not-allowed; -webkit-user-select: none; user-select: none;
}
input[readonly]:focus, input[readonly=true]:focus {
  border-color: var(--border); box-shadow: none;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }

.radio-row { display: flex; gap: 22px; }
.radio { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.radio input { width: auto; }

/* 邮箱快捷记忆：支付页邮箱框下方的「之前用过的邮箱」胶囊（纯本机 localStorage） */
.email-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.email-chips[hidden] { display: none; }
.email-chips-label { font-size: 13px; color: var(--muted); }
.email-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: #eef0f4; color: var(--text);
  font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit;
  max-width: 100%; min-width: 0;
}
.email-chip:hover { border-color: var(--primary); background: #eef2ff; }
.email-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-chip-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #e5e7eb; color: #6b7280; font-size: 13px; line-height: 1;
}
.email-chip-x:hover { background: #fecaca; color: #b91c1c; }
html[data-theme="dark"] .email-chip { background: #232b3d; }
html[data-theme="dark"] .email-chip:hover { background: #2c3560; }
html[data-theme="dark"] .email-chip-x { background: #323b52; color: #9aa3b2; }
html[data-theme="dark"] .email-chip-x:hover { background: #57333a; color: #f87171; }

.amount-line { font-size: 15px; color: var(--muted); margin: 10px 0 4px; }
.price-lg { font-size: 28px; font-weight: 700; color: var(--primary); }

/* 限量商品今日余量（首页卡片 / 支付页） */
.stock-line { font-size: 13px; color: var(--ok); font-weight: 600; }
.stock-line b { font-size: 16px; }
.stock-line.sold { color: var(--err); }

/* 商品备注：管理员在后台填写，买家在支付页看到 */
.product-note {
  text-align: left;
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--warn);
  border-radius: 10px; padding: 12px 16px; margin: 16px 0 4px;
  font-size: 14px; color: #78350f; white-space: pre-wrap; word-break: break-word;
}

/* 收款码：默认小屏并排占满，大屏固定尺寸 */
.qr-row { display: flex; gap: 16px; justify-content: center; margin: 22px 0; }
.qr-box { flex: 1 1 0; min-width: 0; text-align: center; }
.qr-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.qr-box img, .qr-placeholder {
  width: 100%; max-width: 260px; aspect-ratio: 1 / 1; margin: 0 auto;
  display: block; object-fit: contain;
  border: 1px solid var(--border); border-radius: 14px; background: #fafafa;
}
.qr-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; border-style: dashed;
}
.qr-placeholder small { font-size: 11px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
/* 表单里的醒目提示（如：推荐使用邮箱自动发货） */
.hint-warn { color: var(--err); font-weight: 600; }
.lead { font-size: 17px; }
.back { display: inline-block; margin-bottom: 16px; color: var(--muted); font-size: 14px; }

.icon-pending, .icon-ok, .icon-err { font-size: 46px; margin-bottom: 10px; }
.icon-err { color: var(--err); }

.email-tag {
  display: inline-block; background: #eef2ff; color: var(--primary);
  padding: 6px 16px; border-radius: 20px; font-weight: 600; margin: 6px 0 18px;
}

/* 复制按钮：默认不抢眼，鼠标移上去才变深 */
.cs-copy {
  flex: none; border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: 12px; font-family: inherit; line-height: 1.2;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cs-copy:hover { color: var(--primary); border-color: var(--primary); background: #f5f3ff; }
.cs-copy.is-done { color: var(--ok); border-color: var(--ok); background: #ecfdf5; }

/* 未填邮箱时展示的联系方式（微信 / QQ） */
.contact-box {
  background: #f0fdf4; border: 1px dashed var(--ok);
  border-radius: 12px; padding: 18px; margin: 18px 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.contact-title { font-weight: 600; color: var(--ok); font-size: 15px; }
.contact-qr {
  width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: contain;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.contact-id { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.contact-id b { font-size: 17px; word-break: break-all; }

.meta-box {
  text-align: left; background: #f9fafb; border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 18px; margin: 18px 0;
}
.meta-box > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.meta-box > div:last-child { border-bottom: none; }
.meta-box span { color: var(--muted); flex: none; }
.meta-box b { text-align: right; word-break: break-all; }
.meta-box b.warn { color: var(--warn); }
.meta-box b.ok { color: var(--ok); }
.meta-box b.off { color: var(--muted); }

.link-box {
  background: #f0fdf4; border: 1px dashed var(--ok);
  border-radius: 12px; padding: 16px; margin: 18px 0; word-break: break-all;
}
.link-box a { font-weight: 600; }

.page-title { font-size: 24px; margin: 4px 0 22px; }
.section-title { font-size: 18px; margin: 32px 0 12px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 10px; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; }
.stat-num { font-size: 30px; font-weight: 700; }
.stat-num.warn { color: var(--warn); }
.stat-num.ok { color: var(--ok); }
.stat-label { color: var(--muted); font-size: 14px; }

/* ---- 表格：窄屏可横向滚动，避免撑破页面 ---- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.table { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 11px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { background: #f9fafb; font-weight: 600; color: #374151; }
.table tr:last-child td { border-bottom: none; }
/* ⚠️ 必须 inline-block，否则 max-width 对 inline 元素无效，长网址会把表格撑破 */
.table .ellipsis { display: inline-block; vertical-align: middle; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.table .actions form { margin: 0; }
.table-wrap > .table { border: none; border-radius: 0; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; }
.tag.ok { background: #ecfdf5; color: var(--ok); }
.tag.warn { background: #fffbeb; color: var(--warn); }
.tag.info { background: #eff6ff; color: var(--info); }
.tag.off { background: #f3f4f6; color: var(--muted); }

.empty { color: var(--muted); padding: 30px; text-align: center; background: #fff; border: 1px dashed var(--border); border-radius: 12px; }

.alert { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.alert.error { background: #fef2f2; color: var(--err); border: 1px solid #fecaca; }
.alert.ok { background: #ecfdf5; color: var(--ok); border: 1px solid #a7f3d0; }

.pay-form { text-align: left; }

/* 订单号弹窗（人工发货提交后展示） */
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 24, 39, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-box {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  text-align: left;
}
.modal-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.order-no-box {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: #eef2ff; border: 1px dashed var(--primary);
  border-radius: 12px; padding: 14px; margin: 16px 0;
}
.order-no-box b {
  font-size: 19px; letter-spacing: 1px; color: var(--primary);
  word-break: break-all; text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (max-width: 640px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 15px; }
  .topbar nav { gap: 12px; }
  .topbar nav a { font-size: 13px; }
  .container { padding: 20px 14px 48px; }
  .card { padding: 18px; }
  .card h2 { font-size: 19px; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .hero h1 { font-size: 23px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .ad-slide-text { min-height: 120px; }
  /* 手机上再把图片广告压矮一点，竖图不至于占满整屏 */
  .ad-carousel.is-image .ad-slide-image { max-height: 300px; }
  .ad-text-title { font-size: 16px; }
  .ad-text-desc { font-size: 13px; }
  .ad-slide-text { padding: 14px 18px; }
  .qr-row { gap: 12px; }
  .qr-title { font-size: 13px; }
  .page-title { font-size: 21px; }
  .section-title { font-size: 17px; }
  .stat { padding: 16px; }
  .stat-num { font-size: 25px; }
}

/* ---------- 右上角「客服」按钮与浮层 ---------- */
.topbar-btn {
  flex: none; border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: 14px; font-family: inherit; line-height: 1.2;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.topbar-btn:hover { color: var(--primary); border-color: var(--primary); background: #f5f3ff; }

.cs-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17, 20, 30, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .18s ease;
}
.cs-mask[hidden] { display: none; }
.cs-mask.show { opacity: 1; }
.cs-box {
  position: relative; width: 100%; max-width: 380px;
  background: var(--card); border-radius: 14px; padding: 22px 20px 20px;
  box-shadow: 0 18px 48px rgba(20, 24, 40, .22);
  transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.cs-mask.show .cs-box { transform: none; }
/* ⚠️ display:flex 会盖掉 hidden：任何带 hidden 的元素必须显式 none，否则浮层内的
   隐藏区块（比如管理员登录表单）会一直占位、挡住正常内容 */
.cs-box [hidden] { display: none; }
.cs-close {
  position: absolute; top: 10px; right: 12px;
  border: none; background: transparent; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.cs-close:hover { color: var(--text); }
.cs-box h3 { margin: 0 0 14px; font-size: 17px; }
.cs-list { display: flex; flex-direction: column; gap: 8px; }
.cs-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg); border-radius: 9px; padding: 10px 14px;
}
.cs-row span { color: var(--muted); font-size: 14px; flex: none; }
.cs-row b { font-size: 15px; word-break: break-all; text-align: right; }
.cs-qrs { display: flex; gap: 16px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.cs-qrs figure { margin: 0; text-align: center; }
.cs-qrs img { width: 132px; height: 132px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.cs-qrs figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cs-qrs a { display: block; }
.cs-qrs img { transition: transform .15s ease; }
.cs-qrs a:hover img { transform: scale(1.02); }
.cs-sub { margin: -8px 0 14px; font-size: 13px; color: var(--muted); }
.cs-empty { text-align: center; margin: 10px 0 4px; }
.cs-tip { margin: 12px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
/* 加载骨架：比起「正在加载…」几个字，视觉上不会跳 */
.cs-skel { display: flex; flex-direction: column; gap: 8px; }
.cs-skel i {
  display: block; height: 40px; border-radius: 9px;
  background: linear-gradient(90deg, #eef0f5 25%, #f7f8fb 37%, #eef0f5 63%);
  background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite;
}
@keyframes cs-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* 浮层底部隐藏的管理员入口：账号固定，只让输密码 */
.cs-admin { margin-top: 14px; text-align: center; }
.cs-admin-trigger {
  border: none; background: transparent; font-family: inherit;
  color: #d3d7de; font-size: 12px; cursor: pointer; padding: 2px 6px;
  transition: color .15s;
}
.cs-admin-trigger:hover { color: var(--primary); }
.cs-admin-form { margin-top: 6px; text-align: left; }
.cs-admin-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cs-admin-row { display: flex; gap: 8px; }
.cs-admin-row input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
.cs-admin-row input:focus { outline: 2px solid #c7d2fe; border-color: var(--primary); }
.cs-admin-row .btn { flex: none; }
.cs-admin-err {
  margin-top: 8px; font-size: 13px; color: var(--err);
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 6px 10px;
}

/* ---------- 跳转前的设备校验闸门 ---------- */
.gate-spin {
  width: 34px; height: 34px; margin: 4px auto 14px;
  border: 3px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: gate-spin .8s linear infinite;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }

/* ==================== 列表页共用组件：统计条 + 筛选条 ====================
   链接页与订单页共用（原来只写在 links.html 的 <style> 里，订单页要复用，
   所以提到这里作为公共组件；两页的统计条 / 筛选条从此长得一模一样）。 */
.link-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.link-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 84px;
  padding: 10px 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
}
/* 统计条做成链接时（点一下就是筛选）：给点反馈，当前筛选加底色 */
a.link-stat { text-decoration: none; transition: border-color .15s, background .15s; }
a.link-stat:hover { border-color: var(--primary); background: #f8f8ff; }
a.link-stat.is-cur { border-color: var(--primary); background: #eef2ff; }
.link-stat span { font-size: 12px; color: var(--muted); }
.link-stat b { font-size: 18px; }
.link-stat.is-ok b { color: var(--ok); }
.link-stat.is-warn b { color: var(--warn); }
.link-stat.is-off b { color: var(--muted); }
.link-filter {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
}
.link-filter .field { margin-bottom: 0; }
.link-filter .field.grow { flex: 1 1 220px; min-width: 180px; }
.link-filter select, .link-filter input { padding: 8px 10px; }
.link-edit-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.link-edit-form .field { margin-bottom: 0; }
.link-edit-form .field.grow { flex: 1 1 260px; min-width: 200px; }
.edit-row > td { background: #f9fafb; }
.table.compact th, .table.compact td { padding: 9px 10px; font-size: 13px; }
.table.compact .ellipsis { max-width: 140px; }
.table.compact .actions { gap: 6px; }

/* 复选框列（批量选择）：只占一个小格子，别浪费表宽 */
.table th.pick, .table td.pick { width: 30px; padding-left: 9px; padding-right: 4px; }
.table input[type=checkbox] { width: 15px; height: 15px; margin: 0; cursor: pointer; }

/* 批量操作条：与筛选条同宽的白色卡片 */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; margin: 12px 0;
}
.bulk-bar .bulk-sep { flex: 1 1 auto; min-width: 8px; }
.bulk-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.bulk-opt input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
/* 一键删除这一块整体不收缩、也不换行 —— 否则被中间的弹性空隙挤压后会竖成三行 */
.bulk-oneclick { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap; margin: 0; }

@media (max-width: 640px) {
  .link-edit-form { flex-direction: column; align-items: stretch; }
  /* 筛选条在手机上也排成两列：状态 | 商品 一行，关键词和按钮各占整行。
     单列竖排太浪费纵向空间（后台要的是"一屏看更多"）。 */
  .link-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
  .link-filter .field.grow, .link-filter .field:last-child { grid-column: 1 / -1; }
  /* ⚠️ 竖排时 flex-basis 会变成「高度」，关键词框会被撑成 220px 高的空白 */
  .link-filter .field.grow, .link-edit-form .field.grow { flex: 0 0 auto; }
  .link-stats { gap: 8px; }
  .link-stat { flex: 1 1 90px; }
  /* 手机上：按钮文字不许折行；一键删除那一块占整行，输入框吃掉剩余宽度 */
  .bulk-bar .btn, .bulk-oneclick .btn { white-space: nowrap; }
  .bulk-oneclick { width: 100%; }
  .bulk-oneclick input[type=text] { flex: 1 1 auto; min-width: 0; }
  .bulk-oneclick { justify-content: space-between; }
  /* 手机上按钮本身已经写了「一键删除」/「删除选中」，前面那串说明字省掉，腾出一行 */
  .bulk-oneclick-label { display: none; }
}

/* ==================== 后台紧凑模式（.admin） ====================
   需求：整个管理员后台「小一号」——字号、内边距、控件高度统一收紧，
   一屏能看更多、操作更集中；买家侧页面完全不受影响。

   做法：base.html 给后台页面的 <body> 自动加 .admin 类，
   本块所有规则都带 .admin 前缀（优先级比单类选择器高），
   所以连各页面 <style> 里自己定义的类（.settings-nav-item、.ad-item…）
   也一并被覆盖，不必逐页去改，**全后台统一**。

   ⚠️ 这里只覆盖「尺寸类」属性：font-size / padding / gap / margin / border-radius /
      line-height / 内容宽度上限。绝对不要写 flex / width / flex-direction /
      position / display —— 它们是布局关键属性，被本块的高优先级规则覆盖后，
      各页面 @media 里的移动端布局（目录改横向滚动等）会失效。
      确实需要收紧的布局属性，写在文件末尾自己的 @media 里并保持原语义。 */
body.admin { font-size: 13px; line-height: 1.5; }
body.admin .topbar { padding: 8px 16px; gap: 10px; }
body.admin .brand { font-size: 14px; gap: 6px; }
body.admin .brand .dot { width: 8px; height: 8px; }
body.admin .topbar nav { gap: 8px; }
body.admin .topbar nav a { font-size: 12.5px; padding: 4px 9px; }
body.admin .nav-badge { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; margin-left: 4px; }
body.admin .container { padding: 14px 14px 36px; }
body.admin .container.wide { max-width: 1180px; }
body.admin h1.page-title { font-size: 17px; margin: 2px 0 10px; }
body.admin .section-title { font-size: 14.5px; margin: 18px 0 8px; }
body.admin .lead { font-size: 14px; }
body.admin .back { font-size: 12px; margin-bottom: 10px; }

body.admin .card { padding: 13px 14px; border-radius: 11px; }
body.admin .card h2 { font-size: 16px; margin-bottom: 5px; }
body.admin .card h3 { font-size: 14px; margin-bottom: 8px; }
body.admin .btn { padding: 7px 13px; font-size: 12.5px; border-radius: 8px; }
body.admin .btn.small { padding: 4px 9px; font-size: 11.5px; border-radius: 6px; }
body.admin .field { margin-bottom: 9px; }
body.admin .field label { font-size: 12px; margin-bottom: 4px; }
body.admin input[type=text], body.admin input[type=email], body.admin input[type=url],
body.admin input[type=number], body.admin input[type=password], body.admin input[type=date],
body.admin select, body.admin textarea {
  padding: 6.5px 9px; font-size: 12.5px; border-radius: 7px;
}
body.admin select { background-position: right 9px center; padding-right: 28px; }
body.admin .form-grid { gap: 0 12px; }
body.admin .radio { font-size: 12.5px; }
body.admin .radio-row { gap: 14px; }
body.admin .muted.small, body.admin .small { font-size: 11.5px; }
body.admin code { font-size: 11.5px; padding: 1px 4px; }

body.admin .table th, body.admin .table td { padding: 6px 9px; font-size: 12px; }
body.admin .table .ellipsis { max-width: 170px; }
body.admin .table .actions { gap: 5px; }
body.admin .table .actions .btn.small { padding: 3px 7px; font-size: 11px; }
body.admin .table.compact th, body.admin .table.compact td { padding: 6px 8px; font-size: 11.5px; }
body.admin .table.compact .ellipsis { max-width: 120px; }
body.admin .table.compact .actions { gap: 4px; }
body.admin .tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; }
body.admin .alert { padding: 7px 11px; font-size: 12px; margin-bottom: 10px; border-radius: 8px; }
body.admin .empty { padding: 18px; font-size: 12px; }

body.admin .stat-row { gap: 9px; }
body.admin .stat { padding: 11px 9px; border-radius: 10px; }
body.admin .stat-num { font-size: 20px; }
body.admin .stat-label { font-size: 11.5px; }
body.admin .meta-box { padding: 6px 13px; }
body.admin .meta-box > div { font-size: 12.5px; padding: 6px 0; }

/* 控制台 */
body.admin .dash-head { gap: 10px; }
body.admin .dash-stats { gap: 9px; margin: 12px 0 4px; }
body.admin .dash-stat { padding: 10px 12px; border-radius: 10px; }
body.admin .dash-num { font-size: 19px; }
body.admin .dash-label { font-size: 11.5px; }
body.admin .dash-sub { font-size: 11px; }

/* 目录式布局（商品页仍在用） */
body.admin .settings-layout { gap: 12px; margin-top: 12px; }
body.admin .settings-nav { flex: 0 0 168px; padding: 7px; gap: 4px; border-radius: 10px; }
body.admin .settings-nav-item { padding: 8px 10px; font-size: 12.5px; gap: 8px; border-radius: 7px; }
body.admin .sni-icon { font-size: 13px; }
/* 设置页顶部两层标签（后台微调） */
body.admin .settings-groups { margin-top: 2px; }
body.admin .settings-group-tab { padding: 8px 18px; font-size: 13.5px; }
body.admin .settings-subtabs { margin: 10px 0 14px; gap: 6px; }
body.admin .settings-sub-tab { padding: 6px 12px; font-size: 12.5px; }
body.admin .sort-list { margin-top: 10px; }
body.admin .sort-item { padding: 9px 12px; gap: 9px; margin-bottom: 6px; }
body.admin .drag-handle { font-size: 15px; }
body.admin .sort-pos, body.admin .ad-item-index { width: 20px; height: 20px; font-size: 11px; }
body.admin .move-btn { padding: 3px 6px; font-size: 11.5px; }
body.admin .mail-tpl-block { padding: 10px 12px; }
body.admin .mail-tpl-block input[type=text], body.admin .mail-tpl-block textarea { padding: 8px 10px; font-size: 12.5px; }

/* 收款码 / 广告位 / 弹窗面板 */
body.admin .qr-upload-grid { gap: 12px; }
body.admin .qr-upload-item { padding: 12px; max-width: 280px; }
/* 「我的联系方式」面板的微信 / QQ 模块收得更窄并排，不撑满整行（收款码面板不受影响） */
body.admin .qr-upload-grid--compact .qr-upload-item { flex-basis: 190px; max-width: 220px; padding: 10px; }
body.admin .qr-upload-grid--compact .qr-preview { max-width: none; }
body.admin .qr-upload-title { font-size: 13px; margin-bottom: 8px; }
/* 收款码预览原来是 320px 见方的大方块，后台收紧一号：够看清就行，
   别让它把设置页撑成两屏 */
body.admin .qr-preview { max-width: 236px; margin-left: auto; margin-right: auto; }
body.admin .qr-empty { font-size: 12px; }
body.admin .qr-msg { font-size: 12px; }
body.admin .ads-list { margin-top: 12px; }
body.admin .ad-item { padding: 11px 12px; margin-bottom: 9px; }
body.admin .ad-item-head { gap: 8px; margin-bottom: 9px; }
body.admin .ad-item-type { min-width: 78px; padding: 4px 8px; font-size: 11.5px; }
body.admin .ad-item-tools { gap: 4px; }
body.admin .ad-item input[type=text], body.admin .ad-item textarea { padding: 7px 9px; font-size: 12.5px; }
body.admin .ad-thumb { width: 92px; height: 52px; }
body.admin .ad-thumb-empty, body.admin .ad-mini-label { font-size: 11px; }
body.admin .ad-mini-label { padding-top: 9px; }
body.admin .ad-item-active { font-size: 11.5px; }
body.admin .ads-empty-tip { font-size: 12px; padding: 10px 0; }
body.admin .ads-actions { gap: 8px; margin-top: 12px; }

/* 预览区（复用首页样式类，这里只微微收一点，保持"所见即所得"的比例感） */
body.admin .prev-note, body.admin .prev-empty { font-size: 11.5px; }
body.admin .prev-stage .ad-text-title { font-size: 14px; }
body.admin .prev-stage .ad-text-desc { font-size: 12px; }
body.admin .tpl-preview-v { font-size: 12.5px; }
body.admin .tpl-preview-k { font-size: 11px; }

/* 链接页 / 订单页的统计条与筛选条 */
body.admin .link-stats { gap: 7px; margin-bottom: 10px; }
body.admin .link-stat { min-width: 66px; padding: 7px 10px; border-radius: 8px; gap: 1px; }
body.admin .link-stat span { font-size: 11px; }
body.admin .link-stat b { font-size: 15px; }
body.admin .link-filter { padding: 10px 12px; gap: 9px; border-radius: 10px; margin-bottom: 10px; }
body.admin .link-filter select, body.admin .link-filter input { padding: 6px 8px; }
body.admin .bulk-bar { padding: 9px 12px; gap: 8px; margin: 10px 0; border-radius: 10px; }
body.admin .bulk-opt { font-size: 12px; }
body.admin .bulk-opt input, body.admin .table input[type=checkbox] { width: 14px; height: 14px; }

/* ⚠️ 上面 .admin 规则优先级高于各页面 @media 里的单类规则，
   所以移动端布局必须在这里显式恢复一次，否则目录/筛选条的竖排会失效。 */
@media (max-width: 780px) {
  body.admin .settings-layout { gap: 10px; }
  body.admin .settings-nav {
    position: static; flex: none; width: 100%;
    flex-direction: row; overflow-x: auto; gap: 6px; padding: 6px;
  }
  body.admin .settings-nav-item { width: auto; white-space: nowrap; padding: 7px 11px; }
  /* 设置页顶部标签：窄屏允许横向滚动，不挤压换行 */
  body.admin .settings-groups { display: flex; width: 100%; }
  body.admin .settings-group-tab { flex: 1; text-align: center; padding: 8px 10px; }
  body.admin .settings-subtabs {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body.admin .settings-subtabs::-webkit-scrollbar { display: none; }
  body.admin .settings-sub-tab { flex: none; }
  body.admin .settings-sub-tab.is-logout { margin-left: 0; }
}
@media (max-width: 640px) {
  body.admin .topbar { padding: 7px 10px; gap: 8px; }
  body.admin .topbar nav { gap: 2px; }
  body.admin .topbar nav a { padding: 5px 9px; font-size: 12px; }
  body.admin .nav-exit { margin-right: -2px; }
  body.admin .container { padding: 12px 10px 32px; }
  body.admin .dash-stats { grid-template-columns: repeat(2, 1fr); }
  /* 后台的筛选条 / 编辑行在手机上也保持紧凑排列（与上面共用组件的口径一致） */
  body.admin .link-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.admin .link-filter .field.grow, body.admin .link-filter .field:last-child { grid-column: 1 / -1; }
  body.admin .link-filter .field, body.admin .link-edit-form .field { margin-bottom: 0; }
  body.admin .link-edit-form { flex-direction: column; align-items: stretch; }
  body.admin .link-edit-form .field.grow { flex: 0 0 auto; }
  /* 后台表单字段多，手机上也保持两列 —— 单列太浪费纵向空间（用户明确要"一屏看更多"） */
  body.admin .form-grid { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  body.admin .bulk-oneclick { width: 100%; }
}
@media (max-width: 640px) {
  .topbar-btn { padding: 6px 12px; font-size: 13px; }
  .cs-box { padding: 20px 16px 16px; }
  .cs-qrs img { width: 116px; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-skel i { animation: none; }
}

/* ==================== 买家侧日间/夜间主题 ====================
   顶部 🌙/☀️ 按钮切换，打上 html[data-theme="dark"]。
   只用于买家侧（base.html 的 head 脚本在 /admin 下不打这个属性，后台保持原风格）。
   :root[data-theme=dark] 负责变量换肤；下方规则只补硬编码的浅/白底色，
   让夜间不刺眼、深浅对比足够。 */
:root[data-theme="dark"] {
  --primary: #818cf8;
  --primary-dark: #a5b4fc;
  --bg: #0f1420;
  --card: #1a2130;
  --text: #e7eaf0;
  --muted: #9aa3b2;
  --border: #2b3446;
  --ok: #34d399;
  --warn: #fbbf24;
  --info: #60a5fa;
  --err: #f87171;
}
body { transition: background-color .25s ease, color .25s ease; }

html[data-theme="dark"] .topbar { background: var(--card); }
html[data-theme="dark"] .topbar nav a:hover { background: #2a3250; }
html[data-theme="dark"] .topbar nav a.active { background: #2c3560; }
html[data-theme="dark"] .topbar-btn { background: var(--card); }
html[data-theme="dark"] .topbar-btn:hover { background: #2a3250; }

html[data-theme="dark"] .ad-carousel {
  background: var(--card);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .ad-carousel:hover { box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .ad-carousel.is-image .ad-slide-image { background: linear-gradient(180deg, #1a2130 0%, #11172a 100%); }
html[data-theme="dark"] .ad-slide-text { background: linear-gradient(140deg, #2c3560 0%, #1f2a52 55%, #1b2346 100%); }
html[data-theme="dark"] .ad-text-title { color: #c7d2fe; }
html[data-theme="dark"] .ad-text-desc { color: #a5b4fc; }
html[data-theme="dark"] .ad-slide.is-broken { background: #141a28; }

html[data-theme="dark"] .btn { background: var(--card); }
html[data-theme="dark"] .btn.is-disabled { background: #232c3d; color: #6b7280; }
/* ⚠️ 上面这条 .btn 拿卡片底色盖掉了 .btn.primary 的实心主色，导致暗黑下
   「立即购买 / 我已完成支付」等主按钮只剩白字贴暗底、几乎看不见。
   这里按更高优先级把 primary/danger 的实底补回来，并用深色文字保证对比度。 */
html[data-theme="dark"] .btn.primary { background: var(--primary); color: #151a2b; }
html[data-theme="dark"] .btn.primary:hover { background: var(--primary-dark); color: #10131f; }
html[data-theme="dark"] .btn.danger { background: var(--err); color: #fff; }
html[data-theme="dark"] .btn.danger:hover { background: #f87171; color: #2a0a0a; }

html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=url], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] select {
  background: #111827; color: var(--text);
}
html[data-theme="dark"] .field label { color: var(--muted); }

html[data-theme="dark"] .product-note { background: #2a2313; border-color: #453c1f; color: #fde68a; }

html[data-theme="dark"] .email-tag { background: #2c3560; }

html[data-theme="dark"] .qr-box img, html[data-theme="dark"] .qr-placeholder,
html[data-theme="dark"] .contact-qr, html[data-theme="dark"] .cs-qrs img,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .link-stat, html[data-theme="dark"] .link-filter,
html[data-theme="dark"] .bulk-bar {
  background: var(--card);
}

html[data-theme="dark"] .cs-copy { background: var(--card); }
html[data-theme="dark"] .cs-copy:hover { background: #2a3250; }
html[data-theme="dark"] .cs-copy.is-done { background: #123229; }

html[data-theme="dark"] .contact-box, html[data-theme="dark"] .link-box { background: #123229; }
html[data-theme="dark"] .meta-box { background: #141a28; }

html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .table { background: var(--card); }
html[data-theme="dark"] .table th { background: #141a28; color: var(--muted); }
html[data-theme="dark"] .table td { color: var(--text); }

html[data-theme="dark"] .tag.ok { background: #123229; }
html[data-theme="dark"] .tag.warn { background: #2a2313; }
html[data-theme="dark"] .tag.info { background: #152131; }
html[data-theme="dark"] .tag.off { background: #1e2533; }

html[data-theme="dark"] .empty { background: var(--card); }
html[data-theme="dark"] .alert.error { background: #2a1212; border-color: #7a1f1f; }
html[data-theme="dark"] .alert.ok { background: #123229; border-color: #14532d; }

html[data-theme="dark"] .modal-box { background: var(--card); }
html[data-theme="dark"] .order-no-box { background: #1f2a52; border-color: var(--primary); }

html[data-theme="dark"] .popup-box { background: var(--card); }
html[data-theme="dark"] .popup-title { color: var(--text); }
html[data-theme="dark"] .popup-text { color: #c6cdd8; }
html[data-theme="dark"] .popup-progress { color: var(--muted); }
html[data-theme="dark"] .popup-close { background: rgba(255, 255, 255, .08); color: #c6cdd8; }
html[data-theme="dark"] .popup-no-more { color: #c6cdd8; }
html[data-theme="dark"] .popup-close:hover { background: rgba(255, 255, 255, .16); }

html[data-theme="dark"] .cs-box { background: var(--card); }
html[data-theme="dark"] .cs-row b { color: var(--text); }
html[data-theme="dark"] .cs-skel i { background: linear-gradient(90deg, #222b3d 25%, #2a3350 37%, #222b3d 63%); }
html[data-theme="dark"] .cs-admin-row input { background: #111827; color: var(--text); }
html[data-theme="dark"] .cs-admin-err { background: #2a1212; border-color: #7a1f1f; }

/* ============================================================
   底部导航栏 + 三个模块页（首页 / 订单 / 我）
   纯客户端样式；用 CSS 变量 + 兜底值，日间/夜间主题通用。
   ============================================================ */
.tab-pane { padding-bottom: 74px; }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--bg, #ffffff);
  border-top: 1px solid var(--border, #e4e7ec);
  box-shadow: 0 -3px 14px rgba(0, 0, 0, .05);
  height: 62px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  -webkit-user-select: none;
  user-select: none;
}
.bottom-nav .bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted, #8a919c);
  font-size: 11px;
  line-height: 1;
  padding: 6px 0;
}
.bottom-nav .bn-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottom-nav .bn-item.active {
  color: var(--primary, #4f6bf5);
  font-weight: 600;
}

/* 订单卡片 */
.orders-list { display: flex; flex-direction: column; gap: 10px; }
.order-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px;
  padding: 12px 14px;
}
.order-card .oc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.order-card .oc-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1f2329);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-card .oc-status {
  flex: none;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}
.order-card .oc-status.ok { background: #e6f6ee; color: #17a261; }
.order-card .oc-status.warn { background: #fff4e0; color: #c07b12; }
.order-card .oc-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text, #1f2329);
}
.order-card .oc-email {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #8a919c);
  word-break: break-all;
}
.order-card .oc-time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted, #8a919c);
}
.order-card .oc-status.manual { background: #e7f0ff; color: #2f6fe0; }
.order-card .oc-status.reject { background: #fdeaea; color: #dc2626; }
.order-card .oc-status .oc-ico { margin-right: 2px; }
.order-card .oc-left { display: flex; align-items: center; min-width: 0; flex: 1; }
.order-card .oc-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.order-card .oc-del {
  flex: none; border: none; background: transparent; cursor: pointer;
  padding: 2px 2px; font-size: 12px; color: var(--muted, #8a919c);
}
.order-card .oc-del:hover { color: var(--err, #dc2626); }

/* 下拉刷新指示器（首页/订单/我 三 tab 通用；触屏端由 home.html 脚本控制） */
#ptrIndicator {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: 48px; pointer-events: none; transform: translateY(-100%);
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  padding-top: 10px; font-size: 12px; color: var(--muted, #8a919c);
}
#ptrIndicator .ptr-ico {
  display: inline-block; line-height: 1; font-size: 14px; will-change: transform;
  transition: color .15s ease;
}
/* 拉到位（达标）：箭头变主色，提示「松开即可刷新」 */
#ptrIndicator.ptr-ready .ptr-ico { color: var(--primary, #4f46e5); }
/* 环形加载器：默认隐藏，刷新达标松手后替换箭头并持续旋转 ——
   比旋转小箭头更醒目，是「正在刷新」的主要视觉反馈 */
#ptrIndicator .ptr-ring {
  display: none; width: 22px; height: 22px;
  border: 2.5px solid rgba(79, 70, 229, .25);
  border-top-color: var(--primary, #4f46e5);
  border-radius: 50%;
}
#ptrIndicator.ptr-spin .ptr-ico { display: none; }
#ptrIndicator.ptr-spin .ptr-ring { display: inline-block; animation: ptr-ring-spin .8s linear infinite; }
@keyframes ptr-ring-spin { to { transform: rotate(360deg); } }
/* 减少动态效果：环形加载器照常显示（保证刷新反馈可见），仅停用旋转动画 */
@media (prefers-reduced-motion: reduce) {
  #ptrIndicator.ptr-spin .ptr-ring { animation: none; }
}
html[data-theme="dark"] #ptrIndicator { color: #9aa3b2; }

/* 「已刷新」反馈条：下拉刷新重载后的新页面顶部短暂滑入提示。
   进出用动画而非过渡——过渡需要先渲染「隐藏位」那一帧，动画则无条件播放，更可靠 */
#ptrDone[hidden] { display: none; }
#ptrDone {
  position: fixed; top: 0; left: 0; right: 0; z-index: 71;
  display: flex; justify-content: center; pointer-events: none;
  transform: translateY(-100%);
}
#ptrDone.show { animation: ptr-done-in .32s cubic-bezier(.34, .7, .2, 1) forwards; }
#ptrDone.fade { animation: ptr-done-out .3s ease forwards; }
@keyframes ptr-done-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes ptr-done-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
#ptrDone .ptr-done-inner {
  margin-top: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--ok, #10b981); color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .35);
}

/* 「我」页 */
.me-card h3 { margin: 0 0 12px; }
.me-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #f0f1f4);
  font-size: 14px;
}
.me-row:last-child { border-bottom: 0; }
.me-row span { color: var(--muted, #8a919c); }
.me-row b { color: var(--text, #1f2329); font-weight: 600; }

/* 「我」页最近订单入口：独立卡片，去按钮默认样式，与菜单行风格一致 */
.me-prev-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  margin: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.me-prev-card:active { opacity: .72; }
.me-prev-card:focus-visible { outline: 2px solid var(--primary, #4f6bf5); outline-offset: 2px; border-radius: 12px; }

/* 夜间主题：底部导航 / 订单 / 我的 深色适配 */
html[data-theme="dark"] .bottom-nav {
  background: var(--card);
  border-top-color: var(--border);
  box-shadow: 0 -3px 14px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .order-card { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .order-card .oc-title { color: var(--text); }
html[data-theme="dark"] .order-card .oc-meta { color: var(--text); }
html[data-theme="dark"] .order-card .oc-email { color: var(--muted); }
html[data-theme="dark"] .order-card .oc-time { color: var(--muted); }
html[data-theme="dark"] .order-card .oc-status.warn { background: #2a2313; color: #fbbf24; }
html[data-theme="dark"] .order-card .oc-status.manual { background: #16233a; color: #7fa8ff; }
html[data-theme="dark"] .order-card .oc-status.ok { background: #143527; color: #34d399; }
html[data-theme="dark"] .me-row span { color: var(--muted); }
html[data-theme="dark"] .me-row b { color: var(--text); }
html[data-theme="dark"] .me-prev-card { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .me-prev-card b { color: var(--text); }
html[data-theme="dark"] .me-prev-card b.me-link { color: var(--primary, #818cf8); }

/* 「我」页可点入口：外观（日/夜）+ 联系客服（去按钮默认样式，保持与信息行同高） */
.me-row.me-act {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.me-row.me-act:active { opacity: .72; }
.me-row.me-act:focus-visible { outline: 2px solid var(--primary, #4f6bf5); outline-offset: 2px; border-radius: 4px; }
.me-row .me-link { color: var(--primary, #4f6bf5); font-weight: 600; }
.me-row .me-link span { white-space: nowrap; }
html[data-theme="dark"] .me-row b.me-link { color: var(--primary, #818cf8); }

/* 「我」页：本地订单列表 + 分隔线 */
.me-card .orders-list { margin-top: 8px; }
.me-divider { height: 1px; background: var(--border, #eef0f3); margin: 12px 0; }

/* 首页 tab 用的是 .container.tab-home（非 .tab-pane），需单独为底部固定导航留白，
   否则商品列表最后一行会被底导航盖住。 */
.container.tab-home { padding-bottom: 78px; }

/* ==== 「我」页界面优化：订单统计块 + 功能菜单 + 数据说明（第十八轮）====
   （原来的 .me-head 头像卡 / .me-avatar / .me-head-txt 已按要求删除） */
.me-wrap { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }

.me-cmp { display: inline-flex; align-items: center; gap: 11px; }
.me-ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-style: normal; flex: none;
  background: var(--bg, #f4f6fa); border: 1px solid var(--border, #eceff3);
}
.me-cmp .me-label { color: var(--text, #1f2329); font-weight: 600; }

/* 深色适配 */
html[data-theme="dark"] .me-ico { background: #1a2130; border-color: var(--border); }
html[data-theme="dark"] .me-cmp .me-label { color: var(--text); }

/* ==================== 系统设置页（原 settings.html 内联样式，第二十六轮拆分并入） ====================
   ⚠️ 追加在文件末尾以保持原级联顺序（原先它以页面 <style> 出现在 body 末尾，晚于本文件）；
   绝不能加会盖掉 [hidden] 的 .panel{display:block} —— 面板显隐靠 hidden 属性控制。 */
  /* ---------- 顶部两层标签（大分组 + 组内子标签） ---------- */
  .settings-switch { margin-top: 16px; }

  /* 第一层：两个大分组 */
  .settings-groups {
    display: inline-flex; gap: 6px; padding: 5px;
    background: #eef0f6; border: 1px solid var(--border); border-radius: 12px;
  }
  .settings-group-tab {
    padding: 9px 22px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
    color: var(--muted); text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
  }
  .settings-group-tab:hover { color: var(--text); }
  .settings-group-tab.active {
    background: #fff; color: var(--primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
  }

  /* 第二层：组内子标签 */
  .settings-subtabs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 12px 0 18px;
  }
  .settings-sub-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: #fff;
    font-size: 13.5px; color: var(--text); text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .settings-sub-tab:hover { background: #f6f7fb; }
  .settings-sub-tab.active {
    background: var(--primary); border-color: var(--primary);
    color: #fff; font-weight: 600;
  }
  .sst-icon { font-size: 14px; line-height: 1; flex: none; }
  .settings-sub-tab.is-logout { color: var(--err); border-color: #f3d0d0; margin-left: auto; }
  .settings-sub-tab.is-logout:hover { background: #fff5f5; }

  .settings-panels { min-width: 0; }
  /* ⚠️ 不要写 .settings-panels .panel { display: block }：
     类选择器优先级高于浏览器默认的 [hidden]{display:none}，
     会导致 hidden 面板照样显示出来（所有面板叠在一起）。
     这里只允许「显式让未 hidden 的面板显示」。 */
  .settings-panels .panel:not([hidden]) { display: block; }

  /* ---------- 收款码 / 二维码上传 ---------- */
  .qr-upload-grid { display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; }
  .qr-upload-item { flex:1 1 260px; max-width:320px; border:1px dashed #d7dbe2; border-radius:12px; padding:16px; }
  .qr-upload-title { font-weight:600; margin-bottom:10px; }
  .qr-preview { width:100%; aspect-ratio:1/1; background:#f7f8fa; border-radius:10px;
                display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:12px; }
  {# 「我的联系方式」面板：微信 / QQ 二维码模块收窄并排，不再横向撑满一整行。（收款码面板不受影响） #}
  .qr-upload-grid--compact { gap:12px; }
  .qr-upload-grid--compact .qr-upload-item { flex:1 1 190px; max-width:220px; padding:10px; }
  .qr-upload-grid--compact .qr-preview { aspect-ratio:4/3; margin-bottom:8px; }
  .qr-upload-grid--compact .qr-upload-title { font-size:13px; margin-bottom:6px; }
  .qr-preview img { width:100%; height:100%; object-fit:contain; }
  .qr-empty { color:#9aa3af; font-size:14px; }
  .file-btn { cursor:pointer; }
  .qr-msg { font-size:13px; margin-top:8px; min-height:18px; }
  .qr-msg.ok { color:#16a34a; }
  .qr-msg.err { color:#dc2626; }
  .inline-form { margin-top:10px; }

  /* ---------- 广告列表编辑 ---------- */
  .ads-list { margin-top: 16px; }
  .ad-item {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 12px; background: #fff;
  }
  {# 保存前自检：内容不完整被拦下时高亮对应条目 #}
  .ad-item.ad-item-bad { border-color: var(--err); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
  .ad-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .ad-item-index {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: #eef2ff; color: var(--primary);
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
  }
  .ad-item-type {
    flex: none; min-width: 92px;
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: #fff; color: var(--text);
  }
  .ad-item-tools { margin-left: auto; display: flex; gap: 6px; flex: none; }
  /* 窄屏时上移/下移/删除别被挤成竖排文字 */
  .ad-item-tools .btn { white-space: nowrap; }
  .ad-fields { margin-top: 10px; }
  .ad-fields-image { display: flex; gap: 14px; align-items: flex-start; }
  .ad-thumb {
    flex: none; width: 120px; height: 68px; border-radius: 8px;
    background: #f7f8fa; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .ad-thumb-empty { color: #9aa3af; font-size: 12px; }
  .ad-image-inputs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .ad-item input[type=text], .ad-item textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 9px; font-size: 14px; font-family: inherit;
    background: #fff; color: var(--text);
  }
  .ad-item input[type=text]:focus, .ad-item textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  }
  .ad-item textarea { resize: vertical; }
  .ad-fields-text { display: flex; flex-direction: column; gap: 8px; }
  /* 标题 / 正文给个常驻小标签：填了内容后 placeholder 就没了，光看输入框分不清哪个是哪个 */
  .ad-mini-row { display: flex; gap: 8px; align-items: flex-start; }
  .ad-mini-label { flex: 0 0 30px; font-size: 12px; color: #9aa3af; padding-top: 11px; }
  .ad-mini-row > input, .ad-mini-row > textarea { flex: 1; min-width: 0; }
  /* 弹窗条目的「启用」勾选（与上下移、删除同一行） */
  .ad-item-active {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--muted);
    margin-left: auto; cursor: pointer; user-select: none;
  }
  .ad-item-active input { width: 15px; height: 15px; cursor: pointer; margin: 0; }

  .ads-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .ads-empty-tip { color: #9aa3af; font-size: 14px; padding: 14px 0; }

  /* ---------- 快捷短语 ---------- */
  .inline-add { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
  .inline-add input[type=text] {
    flex:1 1 260px; padding:11px 13px; border:1px solid var(--border);
    border-radius:10px; font-size:15px; font-family:inherit; background:#fff; color:var(--text);
  }
  .inline-add input[type=text]:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
  .phrase-list { list-style:none; margin:16px 0 0; padding:0; }
  .phrase-list li {
    display:flex; align-items:center; gap:12px; justify-content:space-between;
    border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:8px; background:#fff;
  }
  .phrase-text { flex:1; min-width:0; word-break:break-all; }

  /* ---------- 邮件模板 ---------- */
  /* 缺 {链接} 硬警告：这会导致买家收不到货，必须足够醒目 */
  .tpl-warn {
    margin-top: 10px; padding: 11px 14px; border-radius: 10px;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    font-size: 13px; line-height: 1.7;
  }
  .tpl-preview-mail {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; background: #fff;
  }
  .tpl-preview-line { display: flex; gap: 10px; align-items: baseline; padding: 2px 0 10px; }
  .tpl-preview-k { flex: none; font-size: 12px; color: #9aa3af; }
  .tpl-preview-v { font-weight: 600; font-size: 14px; word-break: break-all; }
  .tpl-preview {
    background:#f7f8fa; border:1px solid var(--border); border-radius:10px;
    padding:14px; font-size:13px; line-height:1.7; white-space:pre-wrap;
    word-break:break-all; margin:10px 0 0; font-family:inherit;
  }
  code { background:#f1f3f7; padding:1px 6px; border-radius:4px; font-size:13px; }

  /* ---------- 实时预览：广告位 / 进站弹窗（复用首页的样式类） ---------- */
  .prev-stage {
    margin-top: 12px; padding: 18px;
    border: 1px dashed var(--border); border-radius: 12px;
    /* 棋盘格底：一眼区分"这是预览区"和真实页面 */
    background: repeating-conic-gradient(#f2f3f8 0% 25%, #fafbfe 0% 50%) 50% / 18px 18px;
    display: flex; flex-direction: column; align-items: center;
  }
  .prev-stage.is-popup { padding: 26px 18px; }
  .prev-stage > .ad-carousel { width: 100%; max-width: 460px; }
  .prev-stage .ad-text-title { font-size: 16px; }
  .prev-stage .ad-text-desc { font-size: 13px; }
  .prev-stage .popup-box { width: 100%; max-width: 320px; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
  .prev-popup-img { position: relative; height: 130px; border-radius: 16px 16px 0 0; overflow: hidden; }
  /* 条目内容不完整时，在预览里直接指出来（比保存后才发现好） */
  .prev-miss {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 10px; background: #f6f7fb; color: var(--warn); font-size: 13px;
  }
  .prev-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; }
  .prev-dots { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
  .prev-dot {
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: #fff; color: var(--muted);
    font-size: 12px; font-family: inherit; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .prev-dot.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
  .prev-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
  .prev-off {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    background: rgba(17,20,30,.72); color: #fff; font-size: 12px;
    padding: 3px 10px; border-radius: 999px;
  }

  /* ---------- 移动端：顶部标签收窄、子标签横向可滚动 ---------- */
  @media (max-width: 780px) {
    .settings-groups { display: flex; width: 100%; }
    .settings-group-tab { flex: 1; text-align: center; padding: 9px 10px; font-size: 13.5px; }
    .settings-subtabs {
      flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .settings-subtabs::-webkit-scrollbar { display: none; }
    .settings-sub-tab { flex: none; }
    .settings-sub-tab.is-logout { margin-left: 0; }
  }
  @media (max-width: 640px) {
    .qr-upload-grid { gap:14px; }
    .qr-upload-item { flex:1 1 100%; max-width:none; }
    .ad-fields-image { flex-direction: column; }
    .ad-thumb { width: 100%; height: 110px; }
  }

/* ==================== 管理员控制台布局（原 index.html 内联样式，第二十六轮拆分并入） ====================
   ⚠️ 追加在文件末尾以保持原级联顺序（原先它以页面 <style> 出现在 body 末尾，晚于本文件）；
   后台紧凑模式的 body.admin .dash-* / .todo-* 覆盖靠特异性取胜，与出现顺序无关。 */
  .dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .dash-head .page-title { margin-bottom: 6px; }

  .dash-tabs { display: flex; gap: 6px; margin: 14px 0 4px; flex-wrap: wrap; }
  .dash-tab {
    border: 1px solid var(--border); background: #fff; color: var(--text);
    border-radius: 9px; padding: 8px 14px; font-size: 14px; cursor: pointer;
    font-family: inherit; transition: all .15s;
  }
  .dash-tab:hover { border-color: var(--primary); color: var(--primary); }
  .dash-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

  .dash-stats {
    display: grid; gap: 12px; margin: 18px 0 6px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .dash-stat {
    display: block; padding: 13px 15px;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); transition: border-color .15s, box-shadow .15s; cursor: pointer;
  }
  .dash-stat:hover { border-color: var(--primary); box-shadow: 0 1px 8px rgba(79,70,229,.1); }
  .dash-num { font-size: 23px; font-weight: 700; line-height: 1.2; }
  .dash-stat.is-warn .dash-num { color: var(--warn); }
  .dash-stat.is-ok .dash-num { color: var(--ok); }
  .dash-label { font-size: 13px; color: #374151; margin-top: 2px; }
  .dash-sub { font-size: 12px; color: var(--muted); }

  @media (max-width: 640px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-tab { padding: 7px 12px; font-size: 13px; }
  }

/* ==================== 管理员后台视觉精简（接管轮次：扁平 + 统一尺度） ====================
   仅作用于 /admin 页面（body.admin 由 base.html 注入），买家首页样式完全不受影响。 */

/* 1) 扁平卡片：去掉仅存的微弱投影，统一靠 1px 描边区分层级 */
body.admin .card,
body.admin .table-wrap,
body.admin .dash-stat,
body.admin .bulk-bar { box-shadow: none; }
body.admin .dash-stat:hover { box-shadow: none; }

/* 2) 统一圆角尺度：卡片 / 输入框 / 按钮 / 表格 10px（导航胶囊保留） */
body.admin .card,
body.admin .table-wrap,
body.admin .alert,
body.admin .bulk-bar,
body.admin .dash-stat,
body.admin input[type=text],
body.admin input[type=email],
body.admin input[type=url],
body.admin input[type=number],
body.admin input[type=password],
body.admin select,
body.admin textarea,
body.admin .btn { border-radius: 10px; }

/* 3) 表格更紧凑：一屏看更多行，降低行高与内边距 */
body.admin .table th,
body.admin .table td { padding: 9px 12px; font-size: 13.5px; }

/* 4) 表单字段更紧凑 */
body.admin .field { margin-bottom: 13px; }
body.admin .field label { font-size: 13px; margin-bottom: 5px; }

/* 5) 后台整体留白略收，信息密度更舒服 */
body.admin .container { padding-top: 24px; padding-bottom: 48px; }

/* 6) 顶栏保持轻量（本身仅 1px 线，确认无投影） */
body.admin .topbar { box-shadow: none; }

/* ==================== 首页跑马灯（走字屏） ====================
   一条从左向右无限滚动的文字带，位于广告位上方。多条文案首尾相接拼成一个连续流，
   内容在 home.html 里渲染两份并排，配合 translateX(-50%) 实现无缝循环。
   后台「设置 → 跑马灯」维护；整条可点击跳转（仅当该条文案配了链接）。 */
/* ==================== 首页跑马灯（走字屏） ==================== */
/* 一条从左向右无限滚动的文字带，位于广告位上方。多条文案首尾相接拼成一个连续流，
   内容在 home.html 里渲染两份并排（每份末尾带 · 分隔），配合 translateX(-50%) 实现无缝循环。
   后台「设置 → 跑马灯」维护；整条可点击跳转（仅当该条文案配了链接）。 */
.marquee {
  --mq-h: 36px;
  position: relative;
  display: flex;
  align-items: stretch;
  /* ⚠️ 用 min-height 而不是定高 height：安卓端字体被放大 / 换字体后行高变大时，
     定高 + overflow:hidden 会把文字上下裁掉（就是"公告显示有问题"的成因之一）。
     现在内容多高就撑多高，最短也不低于 --mq-h。 */
  min-height: var(--mq-h);
  margin: 0 0 8px;                 /* 默认小间距；真实首页由 .tab-home .marquee 上拉贴导航 */
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 52%, #4f46e5 100%);
}
/* 左侧固定「公告」标签：不随文字滚动，带一个呼吸小圆点 */
.marquee-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0, 0, 0, .16);
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.marquee-tag::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: mq-pulse 1.5s ease-out infinite;
}
@keyframes mq-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* 滚动区：左右淡出遮罩只作用于这里，不影响「公告」标签。
   用 flex 居中，这样公告条被内容撑高时文字始终居中（原来是 height:100% 定高居中）。 */
.marquee-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
  will-change: transform;
  animation: marquee-scroll 22s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 22px;
  font-size: 13.5px;
  color: #fff;
  text-decoration: none;
}
.marquee-item:hover { opacity: .85; }
a.marquee-item { color: #fff; text-decoration: underline; }

/* 条与条之间的分隔圆点（每份末尾都带，保证两份完全同宽 → 平移 -50% 无缝） */
.marquee-sep {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  line-height: 1;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 尊重「减少动态效果」系统偏好：停止滚动，静态展示首屏可见的文案 */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: none !important; }
}

/* 真实首页：上拉抵消容器上间距、左右外扩贴容器边，与导航栏 / 广告「紧贴」 */
.tab-home .marquee { margin: -32px -20px 10px; }
@media (max-width: 640px) {
  .marquee { --mq-h: 34px; }
  .marquee-tag { padding: 0 11px; font-size: 12px; gap: 6px; }
  .marquee-item { font-size: 13px; padding: 0 16px; }
  .tab-home .marquee { margin: -20px -14px 8px; }
}

/* ==================== 管理员后台「跑马灯」面板：文案编辑行 ==================== */
body.admin .mq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
body.admin .mq-item {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
body.admin .mq-item-index { width: 22px; text-align: center; color: var(--muted); font-size: 13px; flex: none; }
body.admin .mq-text { flex: 1 1 auto; min-width: 0; }
body.admin .mq-link { flex: 1 1 auto; min-width: 0; }
body.admin .mq-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) {
  body.admin .mq-item { flex-wrap: wrap; }
  body.admin .mq-item-index { display: none; }
  body.admin .mq-text,
  body.admin .mq-link { flex: 1 1 100%; }
}

/* ============================================================
   「我」页 —— 外观三套主题的分段选择器（日间 / 夜间 / 液态玻璃）
   当前选中项由 base.html 的主题脚本打 .is-on。
   ============================================================ */
/* 这一行改为纵向：上面是「🎨 外观」，下面是横排三段，窄屏也放得下 */
.me-row.me-row-theme {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px 0;
}
.theme-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(120, 130, 150, .12);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px;
}
.theme-opt {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted, #6b7280);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.theme-opt .to-ico { font-size: 14px; line-height: 1; }
.theme-opt.is-on {
  background: #fff;
  color: var(--text, #1f2329);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.theme-opt:active { transform: scale(.98); }
.theme-opt:focus-visible { outline: 2px solid var(--primary, #4f46e5); outline-offset: 2px; }

/* 夜间：轨道压暗、选中项用偏亮的深蓝灰，才分得出来 */
html[data-theme="dark"] .theme-seg { background: rgba(255, 255, 255, .07); border-color: var(--border); }
html[data-theme="dark"] .theme-opt { color: var(--muted); }
html[data-theme="dark"] .theme-opt.is-on { background: #39415c; color: #eef1f7; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* ============================================================
   液态玻璃主题（第三套，iOS 风格）
   data-theme="glass"。三件套：
   ① 背景：一块固定在视口上的彩色「极光」层（.lp-aurora，由 base.html 输出）；
   ② 玻璃面板：半透明白 + 竖向高光渐变 + backdrop-filter 模糊；
   ③ 主色换成 iOS 系统蓝 #0a84ff。
   只作用于买家侧（后台不打 data-theme），暗色规则都按 [data-theme="dark"] 键控，
   两套主题互不干扰。

   ⚠️ 安卓 / iOS 两端的坑与对策（实测）：
   · 原来把彩色渐变铺在 <html> 上（还带 background-attachment: fixed），安卓端
     backdrop-filter 经常「糊不动」这块根背景、看起来跟白底没区别 —— 所以改成
     一块真实的 position:fixed 元素当背景板，虚化对象是真实节点，两端都稳。
     同时也去掉了 background-attachment: fixed（iOS Safari 不支持它，安卓上还
     容易引发合成层错乱 → 公告条显示异常的元凶之一）。
   · 面板底色用「竖向白/半透渐变」而不是纯 rgba：即使浏览器不支持 backdrop-filter，
     上亮下暗的玻璃高光感依然在，不至于退化成一张白卡（安卓"没效果"就是这个原因）。
   ============================================================ */
:root[data-theme="glass"] {
  --primary: #0a84ff;
  --primary-dark: #0060df;
  --bg: #eaf2ff;
  --card: rgba(255, 255, 255, .55);
  --text: #10131a;
  --muted: #55606f;
  --border: rgba(255, 255, 255, .72);
  --ok: #34c759;
  --warn: #ff9f0a;
  --info: #0a84ff;
  --err: #ff3b30;
}
/* 兜底纯色底：极光层没渲染出来（老浏览器 / 加载失败）时也不至于露白 */
html[data-theme="glass"] { background: var(--bg); }
html[data-theme="glass"] body { background: transparent; }

/* ① 极光背景层：固定铺满视口，卡片透过它才会"糊出"彩色 */
.lp-aurora { display: none; }
html[data-theme="glass"] .lp-aurora {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 32% at 12% 4%,  #7fb4ff 0%, rgba(127, 180, 255, 0) 68%),
    radial-gradient(40% 28% at 94% 2%,  #ff9ec9 0%, rgba(255, 158, 201, 0) 66%),
    radial-gradient(48% 34% at 82% 96%, #7fe3c3 0%, rgba(127, 227, 195, 0) 70%),
    radial-gradient(42% 30% at 4% 84%,  #b6a1ff 0%, rgba(182, 161, 255, 0) 70%),
    radial-gradient(64% 44% at 50% 46%, #cfe0ff 0%, rgba(207, 224, 255, 0) 76%),
    linear-gradient(180deg, #eaf2ff 0%, #e7eefb 100%);
}
/* 两颗大色斑：给虚化提供"有内容可糊"的素材，玻璃感更明显（iOS 的那种通透） */
html[data-theme="glass"] .lp-aurora::before,
html[data-theme="glass"] .lp-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .6;
}
html[data-theme="glass"] .lp-aurora::before {
  width: 62vw; height: 62vw; max-width: 440px; max-height: 440px;
  top: -9vh; left: -12vw;
  background: #5ea3ff;
}
html[data-theme="glass"] .lp-aurora::after {
  width: 58vw; height: 58vw; max-width: 420px; max-height: 420px;
  bottom: -11vh; right: -14vw;
  background: #ff7fbe;
}

/* ② 玻璃面板：卡片 / 弹窗 / 列表卡 / 信息盒
   底色用「竖向渐变」做高光，即使没有 backdrop-filter 也一眼看得出是玻璃。 */
html[data-theme="glass"] .card,
html[data-theme="glass"] .popup-box,
html[data-theme="glass"] .cs-box,
html[data-theme="glass"] .modal-box,
html[data-theme="glass"] .order-card,
html[data-theme="glass"] .me-prev-card,
html[data-theme="glass"] .empty,
html[data-theme="glass"] .stat,
html[data-theme="glass"] .link-stat,
html[data-theme="glass"] .link-filter,
html[data-theme="glass"] .bulk-bar,
html[data-theme="glass"] .table,
html[data-theme="glass"] .table-wrap,
html[data-theme="glass"] .contact-box,
html[data-theme="glass"] .link-box,
html[data-theme="glass"] .meta-box,
html[data-theme="glass"] .order-no-box,
html[data-theme="glass"] .cs-copy {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .40) 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  backdrop-filter: blur(26px) saturate(200%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
              0 14px 38px rgba(35, 58, 102, .16),
              0 2px 6px rgba(35, 58, 102, .07);
  /* Safari 上把虚化限制在圆角内，避免模糊"漏"出边界 */
  isolation: isolate;
}
html[data-theme="glass"] .card,
html[data-theme="glass"] .popup-box,
html[data-theme="glass"] .cs-box,
html[data-theme="glass"] .modal-box { border-radius: 20px; }
html[data-theme="glass"] .order-card,
html[data-theme="glass"] .me-prev-card { border-radius: 16px; }

/* ⚠️ 收款码 / 客服二维码：能不能扫出来是硬指标。玻璃主题下这几个容器刻意不进上面的
   玻璃组——半透明底会压低二维码对比度、影响识别。一律保持纯白底 + 淡灰描边。 */
html[data-theme="glass"] .qr-box img,
html[data-theme="glass"] .qr-placeholder,
html[data-theme="glass"] .contact-qr,
html[data-theme="glass"] .cs-qrs img {
  background: #fff;
  border-color: rgba(148, 163, 184, .55);
}

/* —— 按钮：主按钮实心 iOS 蓝，其余半透明玻璃 —— */
html[data-theme="glass"] .btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .48) 100%);
  border-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 8px rgba(35, 58, 102, .08);
}
html[data-theme="glass"] .btn.primary {
  background: linear-gradient(180deg, #45a6ff 0%, #0a84ff 58%, #0071e3 100%);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
              0 8px 22px rgba(10, 132, 255, .4);
}
html[data-theme="glass"] .btn.primary:hover { background: linear-gradient(180deg, #2b93ff 0%, #0060df 100%); }
html[data-theme="glass"] .btn.danger { background: var(--err); border-color: rgba(255, 255, 255, .3); color: #fff; }
html[data-theme="glass"] .btn.ghost { border-color: rgba(110, 130, 165, .4); }
html[data-theme="glass"] .btn.ghost:hover { border-color: var(--primary); color: var(--primary); }
html[data-theme="glass"] .btn.is-disabled { background: rgba(255, 255, 255, .5); color: #9aa2ae; }

/* —— 输入控件：半透明玻璃（用 background-color，别用 background 简写，
      否则会把 select 的箭头背景图一起清掉） —— */
html[data-theme="glass"] input[type=text], html[data-theme="glass"] input[type=email],
html[data-theme="glass"] input[type=url], html[data-theme="glass"] input[type=number],
html[data-theme="glass"] input[type=password], html[data-theme="glass"] input[type=date],
html[data-theme="glass"] select, html[data-theme="glass"] textarea {
  background-color: rgba(255, 255, 255, .68);
  border-color: rgba(255, 255, 255, .85);
  color: var(--text);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="glass"] input:focus, html[data-theme="glass"] select:focus {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .2);
}

/* —— 底部导航：iOS 那种毛玻璃工具条 —— */
html[data-theme="glass"] .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .58) 100%);
  border-top: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 -8px 26px rgba(35, 58, 102, .12);
}
html[data-theme="glass"] .bottom-nav .bn-item.active { color: var(--primary); }

/* —— 广告位：玻璃容器；图片区留一层淡白，避免整块死白 —— */
html[data-theme="glass"] .ad-carousel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .42) 100%);
  border-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 40px rgba(35, 58, 102, .18);
}
html[data-theme="glass"] .ad-carousel.is-image .ad-slide-image { background: rgba(255, 255, 255, .4); }

/* —— 「我」页的小图标底、分段选择器 —— */
html[data-theme="glass"] .me-ico {
  background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .5) 100%);
  border-color: rgba(255, 255, 255, .9);
}
html[data-theme="glass"] .theme-seg {
  background: rgba(255, 255, 255, .45);
  border-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="glass"] .theme-opt.is-on {
  background: rgba(255, 255, 255, .95);
  color: #0b1220;
  box-shadow: 0 1px 3px rgba(23, 43, 77, .22);
}

/* —— 状态标签 / 提示条：玻璃化但不丢语义色 —— */
html[data-theme="glass"] .email-tag { background: rgba(10, 132, 255, .14); color: var(--primary); }
html[data-theme="glass"] .email-chip { background: rgba(255, 255, 255, .68); border-color: rgba(255, 255, 255, .85); }
html[data-theme="glass"] .product-note {
  background: rgba(255, 214, 130, .38);
  border-color: rgba(255, 186, 60, .55);
  color: #7a4b06;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme="glass"] .alert.error { background: rgba(255, 90, 80, .18); border-color: rgba(255, 59, 48, .45); }
html[data-theme="glass"] .alert.ok { background: rgba(52, 199, 89, .18); border-color: rgba(52, 199, 89, .45); }

/* 不支持 backdrop-filter 的浏览器（老安卓 WebView / 微信旧内核 / 老 Firefox）：
   ⚠️ 千万不能退回「近乎不透明白」——那样整页跟日间主题几乎一样，就是"没效果"。
   这里只把透明度收一点，保留上亮下暗的玻璃高光，照样一眼是玻璃主题。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="glass"] .card,
  html[data-theme="glass"] .popup-box,
  html[data-theme="glass"] .cs-box,
  html[data-theme="glass"] .modal-box,
  html[data-theme="glass"] .order-card,
  html[data-theme="glass"] .me-prev-card,
  html[data-theme="glass"] .empty,
  html[data-theme="glass"] .contact-box,
  html[data-theme="glass"] .meta-box,
  html[data-theme="glass"] .order-no-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .56) 100%);
  }
  html[data-theme="glass"] .bottom-nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .7) 100%);
  }
  html[data-theme="glass"] .btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .62) 100%);
  }
  html[data-theme="glass"] .ad-carousel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .58) 100%);
  }
}

/* 尊重「减少动态效果」系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .theme-opt { transition: none; }
  .theme-opt:active { transform: none; }
}

/* ============================================================
   进站动画（Continue工作室）
   黑场 → CR 标志从模糊中收实 → 高光沿字形扫过 → 「Continue工作室」上浮淡入
   → 细线从中心展开 → 整体轻微放大淡出 → 落到首页。
   HTML 由 base.html 输出（仅买家侧，/admin 后台不播）。
   ⚠️ 三条铁律：
   ① 兜底：#lp-splash 自带 4.6s 的 CSS kill-switch（纯 CSS 动画，不依赖 JS），
      万一 JS 挂了也必然自动消失，绝不能出现黑屏永久挡住站点的情况。
   ② 同一会话只播一次（sessionStorage），翻页/返回不再重播——每次点链接都看 3 秒黑屏会很烦。
   ③ 系统开启「减少动态效果」的用户直接跳过整段动画。
   ============================================================ */
#lp-splash {
  --lp-mark: url("/static/logo_mark.png");
  --lp-word: url("/static/logo_word.png");
  --spd: 1;                       /* 整体节奏倍速：想更快填 .8，更慢填 1.3 */
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a0b;
  overflow: hidden;
  /* ① CSS 兜底开关：4.6s 后无论如何都消失 */
  animation: lpSafeHide .01s linear 4.6s forwards;
}
@keyframes lpSafeHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* 中央极淡冷光晕：给黑场一点"呼吸"，避免死黑 */
.lp-splash-glow {
  position: absolute; width: 78vmin; height: 78vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 138, 170, .16) 0%, rgba(125, 138, 170, 0) 64%);
  opacity: 0;
}
.lp-splash-stack { position: relative; display: flex; flex-direction: column; align-items: center; }

/* —— ① 标志：模糊收实 + 轻微上浮 —— */
.lp-splash-markbox { position: relative; width: min(44vw, 185px); }
.lp-splash-mark { display: block; width: 100%; opacity: 0; }
/* —— ② 高光扫过：用标志自身做遮罩，光只在字形上流动 —— */
.lp-splash-shine {
  position: absolute; inset: -4%;
  -webkit-mask: var(--lp-mark) center / contain no-repeat;
          mask: var(--lp-mark) center / contain no-repeat;
  opacity: 0;
}
.lp-splash-shine i {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 46%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, 0) 94%);
  transform: translateX(-180%) skewX(-14deg);
}
/* —— ③ 文字 —— */
.lp-splash-word { display: block; width: min(64vw, 262px); margin-top: 20px; opacity: 0; }
/* —— ④ 底部细线：从中心展开 —— */
.lp-splash-line { width: 0; height: 1px; margin-top: 20px; background: rgba(255, 255, 255, .42); }

/* —— 编排：动画全部挂在 .is-play 上（class 由 JS 加），便于控制是否播放 —— */
#lp-splash.is-play .lp-splash-glow  { animation: lpGlow calc(1.5s * var(--spd)) ease calc(.15s * var(--spd)) forwards; }
#lp-splash.is-play .lp-splash-mark  { animation: lpMarkIn calc(.95s * var(--spd)) cubic-bezier(.16, .84, .28, 1) calc(.18s * var(--spd)) forwards; }
#lp-splash.is-play .lp-splash-shine { animation: lpShineOn calc(.62s * var(--spd)) ease-in-out calc(1.06s * var(--spd)) forwards; }
#lp-splash.is-play .lp-splash-shine i { animation: lpShine calc(.62s * var(--spd)) cubic-bezier(.4, 0, .3, 1) calc(1.06s * var(--spd)) forwards; }
#lp-splash.is-play .lp-splash-word  { animation: lpWordIn calc(.8s * var(--spd)) cubic-bezier(.16, .84, .28, 1) calc(1.18s * var(--spd)) forwards; }
#lp-splash.is-play .lp-splash-line  { animation: lpLine calc(.65s * var(--spd)) cubic-bezier(.2, .7, .2, 1) calc(1.6s * var(--spd)) forwards; }
/* —— 退场：整块淡出 + 内容轻微放大（.is-out 由 JS 在 2.6s 后加上） —— */
#lp-splash.is-out {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity calc(.65s * var(--spd)) ease, visibility 0s calc(.65s * var(--spd));
}
#lp-splash.is-out .lp-splash-stack { transform: scale(1.045); transition: transform calc(.65s * var(--spd)) ease; }

@keyframes lpGlow { to { opacity: 1; } }
@keyframes lpMarkIn {
  from { opacity: 0; transform: scale(.88) translateY(10px); filter: blur(18px); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes lpShineOn { from { opacity: 0; } 25% { opacity: 1; } to { opacity: 0; } }
@keyframes lpShine { to { transform: translateX(340%) skewX(-14deg); } }
@keyframes lpWordIn {
  from { opacity: 0; transform: translateY(14px) scale(1.045); }
  to   { opacity: 1; transform: none; }
}
@keyframes lpLine { to { width: 74px; } }

/* ---- 「我」页 · 音效设置开关 ---- */
a.me-row { text-decoration: none; }
.me-row.me-row-top { align-items: flex-start; }
.me-row-top .me-cmp { padding-top: 2px; }
.lp-switch { position: relative; display: inline-block; flex: none; cursor: pointer; }
.lp-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lp-sw {
  display: block; width: 46px; height: 27px; border-radius: 999px;
  background: #c9cfd9; transition: background .18s; position: relative;
}
.lp-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .18s;
}
.lp-switch input:checked + .lp-sw { background: var(--primary); }
.lp-switch input:checked + .lp-sw::after { transform: translateX(19px); }
.lp-switch input:focus-visible + .lp-sw { outline: 2px solid var(--primary); outline-offset: 2px; }
.snd-seg { flex-wrap: wrap; justify-content: flex-end; max-width: 62%; }
.snd-seg .theme-opt { font-size: 12px; padding: 6px 10px; }

/* ---- 协议文案页（用户协议 / 隐私政策 / 免责声明）---- */
.agr-card h2.agr-title { margin: 0 0 4px; text-align: center; }
.agr-updated { text-align: center; margin: 0 0 6px; }
.agr-sec { margin-top: 16px; }
.agr-sec h3 { margin: 0 0 6px; font-size: 15px; }
.agr-sec p {
  margin: 0 0 8px; font-size: 13.5px; line-height: 1.8;
  color: var(--text); opacity: .92; word-break: break-word;
}
html[data-theme="dark"] .agr-sec p { color: #c6cdd8; }
html[data-theme="glass"] .agr-sec p { color: #eef1f7; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 「我」页改版：分组标题 / 行说明 / 音量滑杆 / 页脚 ---- */
.me-sec-title {
  margin: 18px 2px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted, #8a919c);
  letter-spacing: .04em;
}
.me-wrap .me-sec-title:first-child { margin-top: 2px; }
.me-lab-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-hint {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted, #8a919c);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vol-wrap { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
.lp-range {
  /* 宽度随屏宽收缩（小屏手机上整行才放得下，百分比数字不会被挤出卡片） */
  width: clamp(84px, 24vw, 120px);
  height: 22px;
  margin: 0;
  accent-color: var(--primary, #4f6bf5);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.vol-val {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text, #1f2329);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.me-foot {
  margin: 22px 0 6px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--muted, #8a919c);
  opacity: .85;
}

/* ---- 首次进入协议确认门（固定亮色警示风格，三主题观感一致）---- */
.agree-gate {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, #eef3ff 0%, #dfe8fb 46%, #cdd9f6 100%);
}
/* display:flex 会盖掉 hidden 属性的 UA 样式：必须显式补回，否则
   隐藏状态的「拒绝画面」也会透明地铺满整页、拦截一切点击（真机踩过） */
.agree-gate[hidden] { display: none; }
html[data-theme="dark"] .agree-gate {
  background:
    radial-gradient(120% 90% at 50% 0%, #17203a 0%, #10182c 55%, #0b1120 100%);
}
.agree-card {
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(31, 41, 72, .28);
  padding: 26px 22px 20px;
  text-align: center;
}
.agree-brand { font-size: 42px; line-height: 1.2; }
.agree-title {
  margin: 8px 0 10px;
  font-size: 19px;
  color: #1f2329 !important;
}
.agree-text {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #4b5563 !important;
  text-align: left;
}
.agree-text.muted { color: #8a919c !important; text-align: center; }
.agree-links { margin: 2px 0 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }
.agree-links a {
  color: #4f6bf5 !important;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agree-links a:active { opacity: .75; }
.agree-card .btn.block { margin-top: 8px; }
.agree-card .agree-no { margin-top: 8px; }
.agree-ok {
  background: linear-gradient(180deg, #5b78f7, #4f6bf5) !important;
  color: #fff !important;
  border: 0 !important;
}
.agree-no {
  background: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #d7dce6 !important;
}