/* ============================================================
   SuAuth Design System — 液态玻璃 + 规范配色
   主色：白 / 辅色：近黑 / 强调：#3666FA / 警告：橙黄
   ============================================================ */

:root {
  /* 中性色 — 白为主，近黑为辅 */
  --color-bg:          #ffffff;
  --color-bg-soft:     #f5f5f7;   /* Apple 灰 */
  --color-bg-mute:     #e8e8ed;
  --color-surface:     #ffffff;
  --color-text:        #1d1d1f;   /* 近黑，非纯黑 */
  --color-text-soft:   #6e6e73;
  --color-text-mute:   #86868b;
  --color-border:      #d2d2d7;
  --color-border-soft: #e8e8ed;

  /* 强调色 */
  --color-primary:     #3666FA;   /* rgb(54,102,250) */
  --color-primary-600: #2b54e0;
  --color-primary-50:  #eef2ff;
  --color-primary-on:  #ffffff;

  /* 语义色 */
  --color-success:     #34C759;
  --color-success-50:  #e8f9ee;
  --color-warning:     #FF9500;   /* 橙 */
  --color-warning-50:  #fff4e6;
  --color-danger:      #FF3B30;
  --color-danger-50:   #ffe9e8;
  --color-info:        #5AC8FA;

  /* 液态玻璃（iOS 26 Liquid Glass） */
  /* 性能说明：backdrop-filter 全站禁用（大面积模糊层在滚动/缩放时光栅化开销极大，
     曾导致浏览器崩溃）。玻璃质感改由高不透明度渐变 + 高光描边模拟，视觉接近但零滤镜成本 */
  --glass-bg:          linear-gradient(140deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 100%);
  --glass-bg-strong:   linear-gradient(140deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 100%);
  --glass-border:      rgba(255,255,255,.85);
  --glass-shadow:      0 1px 0 rgba(255,255,255,.95) inset,
                       0 -1px 0 rgba(255,255,255,.45) inset,
                       0 12px 34px -8px rgba(16,24,40,.12),
                       0 2px 6px rgba(16,24,40,.04);
  --glass-blur:        none;

  /* 圆角 */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.10);
  --shadow-primary: 0 6px 20px rgba(54,102,250,.30);

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* 动效 */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 160ms;
  --dur: 280ms;

  /* 布局 */
  --header-h: 64px;
  --sidebar-w: 240px;
  --container: 1200px;
}

/* 暗色模式（后台可选）
   配色原则：深灰而非纯黑（页面底 #121216），卡片比页面略亮形成层次，
   描边提亮到 #4b4b55 保证卡片/输入框边界清晰，正文对比度 ≥ 7:1 */
[data-theme="dark"] {
  --color-bg:          #1a1a1f;   /* 卡片 / 浮层表面 */
  --color-bg-soft:     #121216;   /* 页面底色（非纯黑） */
  --color-bg-mute:     #2e2e35;
  --color-surface:     #1e1e24;
  --color-text:        #f3f3f7;
  --color-text-soft:   #c2c2cb;
  --color-text-mute:   #9c9ca6;
  --color-border:      #4b4b55;
  --color-border-soft: #35353d;

  /* 语义浅底改为半透明深色，避免在深色背景上出现发白的色块 */
  --color-primary-50:  rgba(84,132,255,.18);
  --color-success-50:  rgba(52,199,89,.16);
  --color-warning-50:  rgba(255,149,0,.16);
  --color-danger-50:   rgba(255,93,82,.16);

  --glass-bg:          linear-gradient(140deg, rgba(34,34,40,.97) 0%, rgba(26,26,31,.93) 100%);
  --glass-bg-strong:   linear-gradient(140deg, rgba(36,36,42,.98) 0%, rgba(28,28,33,.95) 100%);
  --glass-border:      rgba(255,255,255,.16);
  --glass-shadow:      0 1px 0 rgba(255,255,255,.09) inset,
                       0 -1px 0 rgba(255,255,255,.04) inset,
                       0 12px 34px -8px rgba(0,0,0,.55),
                       0 2px 8px rgba(0,0,0,.35);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-600); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 15px; }
ul { list-style: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); border: 2px solid var(--color-bg-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-mute); }

/* ---------- 容器 ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---------- 液态玻璃卡片 ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius-full);
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: all var(--dur-fast) var(--ease); white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer; touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-primary); color: var(--color-primary-on); box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--color-primary-600); color: #fff; }
.btn-ghost { background: var(--color-bg-soft); color: var(--color-text); border-color: var(--color-border-soft); }
.btn-ghost:hover { background: var(--color-bg-mute); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #e0342a; }
.btn-warning { background: var(--color-warning); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: var(--sp-5); }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-soft); margin-bottom: var(--sp-2); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 14px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  background: var(--color-surface);
}
.form-textarea { resize: vertical; min-height: 90px; }
.form-hint { font-size: 12px; color: var(--color-text-mute); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--color-danger); margin-top: 4px; }

/* ---------- 标签 / 徽章 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; line-height: 1.5;
}
.badge-primary { background: var(--color-primary-50); color: var(--color-primary); }
.badge-success { background: var(--color-success-50); color: #1a7f37; }
.badge-warning { background: var(--color-warning-50); color: #b35a00; }
.badge-danger  { background: var(--color-danger-50); color: #cf2218; }
.badge-muted   { background: var(--color-bg-mute); color: var(--color-text-soft); }

/* ---------- 状态点 ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-success { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-50); }
.dot-warning { background: var(--color-warning); box-shadow: 0 0 0 3px var(--color-warning-50); }
.dot-danger  { background: var(--color-danger);  box-shadow: 0 0 0 3px var(--color-danger-50); }
.dot-muted   { background: var(--color-text-mute); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--color-border-soft); }
.table th { font-weight: 600; color: var(--color-text-soft); font-size: 13px; background: var(--color-bg-soft); }
.table tbody tr:hover { background: var(--color-bg-soft); }
.table tbody tr:last-child td { border-bottom: none; }

/* 窄屏（手机/平板竖屏）：列表改为容器横向滚动，避免列被压缩到不可读；PC 布局不变 */
@media (max-width: 768px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 760px; }
  .table th, .table td { white-space: nowrap; }
}

/* ---------- 模态框 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.42);
  display: none; align-items: center; justify-content: center; padding: var(--sp-5);
}
.modal-mask.show { display: flex; }
.modal {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  animation: modalIn var(--dur) var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.modal-head { padding: var(--sp-6) var(--sp-6) var(--sp-3); }
.modal-body { padding: 0 var(--sp-6) var(--sp-6); }
.modal-title { font-size: 18px; font-weight: 600; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) var(--sp-6); }

/* ---------- 扫码支付弹窗 ---------- */
.pay-modal { max-width: 380px; }
.pay-modal .modal-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pay-modal-body { text-align: center; }
.pay-amount { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.pay-qr-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 16px; border: 1px solid var(--color-border-soft); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pay-qr svg, .pay-qr img { width: 200px; height: 200px; display: block; }
.pay-qr-expired { position: absolute; inset: 0; background: rgba(255,255,255,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pay-qr-expired-txt { font-weight: 600; color: var(--color-text); }
.pay-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--color-text-soft); }
.pay-dot { width: 8px; height: 8px; border-radius: 50%; background: #0A84FF; animation: payPulse 1.2s ease-in-out infinite; }
@keyframes payPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.pay-countdown { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--color-text-mute, var(--color-text-soft)); }
.pay-countdown b { font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }
.pay-countdown.urgent b { color: #FF3B30; }
.pay-order-no { margin-top: 10px; word-break: break-all; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 12px 20px; border-radius: var(--radius-full);
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500;
  border: 1px solid var(--glass-border);
  animation: toastIn var(--dur) var(--ease);
}
.toast-success { color: #1a7f37; }
.toast-error { color: var(--color-danger); }
.toast-warning { color: #b35a00; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--glass-bg);
  /* 毛玻璃： saturate(180%) blur(20px)，含 -webkit- 前缀兼容 iOS Safari；
     不支持 backdrop-filter 的老浏览器回退为更高不透明度底色，保证可读性 */
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--glass-border);
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .topbar {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
.topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--color-text); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 480px) { .logo { font-size: 16px; } .logo-mark { width: 28px; height: 28px; border-radius: 8px; } }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--color-primary), #6b8cff); display: grid; place-items: center; color: #fff; font-weight: 800; flex-shrink: 0; }

/* ---------- 焦点与触摸细节 ---------- */
/* 移动端点击不出现系统蓝色高亮块；双击不再放大 */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, .switch { touch-action: manipulation; }
/* 鼠标点击 / 关闭开发者工具后自动聚焦时不画焦点框，键盘 Tab 导航仍保留可见焦点 */
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
.logo:focus:not(:focus-visible), .logo:focus { outline: none; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: var(--radius-full); color: var(--color-text-soft); font-size: 14px; font-weight: 500; transition: all var(--dur-fast); }
.nav a:hover, .nav a.active { background: var(--color-bg-mute); color: var(--color-text); }

/* 顶栏用户信息 */
.topbar-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: var(--radius-full);
  color: var(--color-text); transition: background var(--dur-fast);
}
.topbar-user:hover { background: var(--color-bg-mute); color: var(--color-text); }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: var(--radius-full); object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 2px 6px rgba(16,24,40,.12);
}
.topbar-avatar-txt {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7ba7ff, var(--color-primary)); color: #fff;
  font-size: 13px; font-weight: 600;
}
.topbar-name { font-size: 13.5px; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .topbar-name { max-width: 84px; font-size: 12.5px; } }

/* ---------- 侧边栏布局（后台） ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--color-surface); border-right: 1px solid var(--color-border-soft);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--sp-5) 0;
}
.sidebar-brand { padding: 0 var(--sp-5) var(--sp-5); }
.sidebar-menu { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-3); }
.sidebar-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--color-text-soft); font-size: 14px; font-weight: 500;
  transition: all var(--dur-fast);
}
.sidebar-menu a:hover { background: var(--color-bg-soft); color: var(--color-text); }
.sidebar-menu a.active { background: var(--color-primary-50); color: var(--color-primary); }
/* 后台品牌名较长时截断，避免撑破侧边栏 */
.sidebar-brand .logo { min-width: 0; max-width: calc(100% - 36px); }
.sidebar-brand .logo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu .menu-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-mute); padding: var(--sp-4) 12px var(--sp-2); }
.main { flex: 1; min-width: 0; }
.main-head { padding: var(--sp-5) var(--sp-8); border-bottom: 1px solid var(--color-border-soft); background: var(--color-surface); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.main-body { padding: var(--sp-8); }

/* ---------- 页面标题 ---------- */
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 4px; }
.page-sub { color: var(--color-text-mute); font-size: 14px; }

/* ---------- 统计卡 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); }
.stat-card { padding: var(--sp-6); }
.stat-label { font-size: 13px; color: var(--color-text-mute); margin-bottom: var(--sp-2); }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.stat-delta { font-size: 12px; margin-top: 4px; }
.stat-delta.up { color: var(--color-success); }
.stat-delta.down { color: var(--color-danger); }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: var(--sp-12) var(--sp-5); color: var(--color-text-mute); }
.empty-icon { font-size: 48px; margin-bottom: var(--sp-3); opacity: .4; }

/* ---------- 工具类 ---------- */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.text-mute { color: var(--color-text-mute); }
.text-soft { color: var(--color-text-soft); }
.text-primary { color: var(--color-primary); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.fw-600 { font-weight: 600; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 动画 ---------- */
.fade-in { animation: fadeIn var(--dur) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.slide-up { animation: slideUp var(--dur) var(--ease); }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 后台移动端抽屉 ---------- */
.sidebar-close { display: none; }
.hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  color: var(--color-text); background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft); flex-shrink: 0;
  transition: all var(--dur-fast);
}
.hamburger:hover { background: var(--color-bg-mute); }
.sidebar-mask {
  display: none; position: fixed; inset: 0; z-index: 89;
  background: rgba(16,24,40,.46);
  opacity: 0;
  /* visibility 延迟到淡出结束再切换，避免关闭时蒙层瞬间消失导致"闪一下" */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  will-change: opacity;
}
.sidebar-mask.show {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
/* 抽屉打开时锁定背景滚动（class 方式，不触发内联样式重排） */
body.drawer-open { overflow: hidden; overscroll-behavior: contain; }
.sidebar-foot { padding: var(--sp-4) var(--sp-3) 0; margin-top: var(--sp-4); border-top: 1px solid var(--color-border-soft); }
.sidebar-foot-link {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--color-text-mute);
  font-size: 13px; font-weight: 500; transition: all var(--dur-fast);
}
.sidebar-foot-link:hover { background: var(--color-bg-soft); color: var(--color-text); }
.main-head-left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.main-head-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: var(--radius-full);
  background: var(--color-bg-soft); border: 1px solid var(--color-border-soft);
  font-size: 13.5px; font-weight: 600; color: var(--color-text);
}
.admin-chip-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-primary), #6b8cff); color: #fff;
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .hamburger { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 90;
    width: min(280px, 84vw); height: 100dvh;
    transform: translateX(-105%);
    /* 阴影也参与过渡，否则开合瞬间阴影突变产生"闪一下" */
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: none;
    /* 预先提升为独立合成层：点击后立刻开始滑动，不必等浏览器现场光栅化 */
    will-change: transform;
    backface-visibility: hidden;
    overscroll-behavior: contain;
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar-mask { display: block; visibility: hidden; }
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    color: var(--color-text-mute);
  }
  .sidebar-close:hover { background: var(--color-bg-soft); color: var(--color-text); }
  .main-head { padding: var(--sp-4) var(--sp-5); position: sticky; top: 0; z-index: 40; }
  .main-body { padding: var(--sp-5); }
  .page-title { font-size: 20px; }
  .page-sub { font-size: 12.5px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-chip-name { display: none; }
  .admin-chip { padding: 6px; }
}
@media (max-width: 480px) {
  .main-head-right .btn-text { display: none; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   图标系统（SVG 线性图标）
   ============================================================ */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: -.15em; }
.icon-lg { width: 28px; height: 28px; }
.icon-sm { width: 16px; height: 16px; }

/* 图标底板：渐变 + 内高光 + 柔和投影 */
.icon-tile {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0%, #eef1f7 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 6px 18px -8px rgba(16,24,40,.22), 0 0 0 1px rgba(16,24,40,.03);
  color: var(--color-primary);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-tile.sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-tile.primary {
  background: linear-gradient(145deg, #4d7bff 0%, var(--color-primary) 55%, #2a4fd0 100%);
  color: #fff; border-color: rgba(255,255,255,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.42) inset, 0 10px 24px -10px rgba(54,102,250,.75);
}
.icon-tile.orange {
  background: linear-gradient(145deg, #ffb340 0%, var(--color-warning) 100%);
  color: #fff; border-color: rgba(255,255,255,.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 24px -10px rgba(255,149,0,.6);
}
.icon-tile.green {
  background: linear-gradient(145deg, #55d97a 0%, var(--color-success) 100%);
  color: #fff; border-color: rgba(255,255,255,.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 24px -10px rgba(52,199,89,.55);
}
.icon-tile.gray {
  background: linear-gradient(145deg, #f4f4f7 0%, #e4e5eb 100%);
  color: var(--color-text-soft);
}

/* ============================================================
   液态玻璃
   ============================================================ */
.glass-card {
  position: relative;
  /* 顶部斜向高光 + 玻璃底色合成在同一背景层：
     高光若用 ::before 覆盖层实现，在移动端布局下会被合成器画到文字之上，
     导致卡片内文字整片发灰（曾出现「你好，昵称」变淡的问题），
     改由元素自身绘制背景可确保高光永远位于文字下方 */
  background-image:
    linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 32%, rgba(255,255,255,0) 55%),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
.glass-card.hover {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.glass-card.hover:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.98);
  box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 22px 48px -12px rgba(16,24,40,.2), 0 0 0 1px rgba(54,102,250,.08);
}
.btn-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover { background: #fff; color: var(--color-text); }

/* ============================================================
   极光背景光斑
   ============================================================ */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
/* 光斑不用 CSS blur 滤镜（巨型固定滤镜层会导致窗口缩放时 GPU 光栅爆炸甚至浏览器崩溃），
   柔边完全由径向渐变本身实现——视觉效果一致，但无需任何滤镜光栅化 */
.aurora-blob { position: absolute; border-radius: 50%; opacity: .5; }
.aurora-blob.b1 { width: 620px; height: 620px; top: -220px; left: -140px; background: radial-gradient(circle, #b9c9ff 0%, rgba(185,201,255,0) 70%); }
.aurora-blob.b2 { width: 520px; height: 520px; top: -160px; right: -120px; background: radial-gradient(circle, #d8c8ff 0%, rgba(216,200,255,0) 70%); }
.aurora-blob.b3 { width: 700px; height: 700px; bottom: -380px; left: 32%; background: radial-gradient(circle, #bfe6ff 0%, rgba(191,230,255,0) 70%); }

/* ============================================================
   落地页：Hero
   ============================================================ */
.hero { position: relative; padding: 96px 0 72px; text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; margin-bottom: 26px;
  border-radius: var(--radius-full);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size: 13px; font-weight: 500; color: var(--color-text-soft);
}
.hero-eyebrow .icon { color: var(--color-primary); }
.hero-eyebrow .pill {
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.hero-title {
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.035em;
  margin-bottom: 22px; color: var(--color-text);
}
.grad-text {
  background: linear-gradient(96deg, var(--color-primary) 0%, #7b5cff 48%, #2a4fd0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub {
  font-size: 17px; line-height: 1.75; color: var(--color-text-soft);
  max-width: 660px; margin: 0 auto 34px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.hero-note { font-size: 13px; color: var(--color-text-mute); display: inline-flex; align-items: center; gap: 6px; }
.hero-note .icon { color: var(--color-success); }

/* Hero 玻璃预览面板 */
.hero-preview {
  max-width: 880px; margin: 56px auto 0; padding: 22px;
  border-radius: 30px;
}
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 2px 6px 16px; }
.preview-dots { display: flex; gap: 6px; }
.preview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-bg-mute); }
.preview-dots i:first-child { background: #ff5f57; }
.preview-dots i:nth-child(2) { background: #febc2e; }
.preview-dots i:nth-child(3) { background: #28c840; }
.preview-path {
  margin-left: 8px; font-size: 12px; color: var(--color-text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.preview-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.preview-panel {
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px -14px rgba(16,24,40,.4);
}
.preview-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(16,24,40,.06); }
.preview-row:last-child { border-bottom: none; }
.preview-row .k { font-size: 13px; color: var(--color-text-soft); display: inline-flex; align-items: center; gap: 8px; }
.preview-row .v { font-size: 13px; font-weight: 600; }
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.preview-head h4 { font-size: 14px; font-weight: 600; }
.lease-bar { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-mute); overflow: hidden; margin-top: 12px; }
.lease-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), #7b5cff); }
.preview-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.9; color: var(--color-text-soft);
  background: rgba(245,246,250,.9); border: 1px solid rgba(16,24,40,.05);
  border-radius: 12px; padding: 14px; white-space: pre; overflow: hidden;
}
.preview-mono .c-key { color: var(--color-primary); }
.preview-mono .c-str { color: #1a7f37; }

/* ============================================================
   落地页：区块标题
   ============================================================ */
.section { padding: 76px 0; position: relative; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 12px;
}
.section-title { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.section-sub { font-size: 15px; color: var(--color-text-soft); line-height: 1.7; }

/* ============================================================
   落地页：特性卡
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.feature-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.feature-card p { font-size: 14px; line-height: 1.7; color: var(--color-text-soft); }
.feature-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-mute); }

/* ============================================================
   落地页：流程
   ============================================================ */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card { padding: 26px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff;
  font-size: 13px; font-weight: 700; margin-bottom: 14px;
  box-shadow: 0 6px 16px -6px rgba(54,102,250,.7);
}
.step-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.step-card p { font-size: 13.5px; line-height: 1.7; color: var(--color-text-soft); }

/* ============================================================
   落地页：程序卡
   ============================================================ */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.app-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.app-cover {
  height: 148px; position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #e7ecff 45%, #f3f0ff 100%);
  border-bottom: 1px solid rgba(255,255,255,.9);
}
.app-cover img { width: 100%; height: 100%; object-fit: cover; }
.app-cover .icon-tile { width: 62px; height: 62px; border-radius: 20px; }
.app-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.app-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.app-desc { font-size: 13px; line-height: 1.6; color: var(--color-text-soft); height: 42px; overflow: hidden; }
.app-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.app-price { font-size: 20px; font-weight: 700; color: var(--color-primary); letter-spacing: -.02em; }
.app-price small { font-size: 12px; font-weight: 500; color: var(--color-text-mute); margin-left: 2px; }
.app-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* 空状态（重写为图标版） */
.empty-icon-svg { color: var(--color-text-mute); opacity: .45; margin-bottom: 12px; }

/* ============================================================
   页脚
   ============================================================ */
.site-footer { padding: 48px 0 40px; border-top: 1px solid var(--color-border-soft); margin-top: 24px; position: relative; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-mute); }
.footer-copy { font-size: 12.5px; color: var(--color-text-mute); letter-spacing: .01em; }
.footer-links { display: flex; gap: 18px; font-size: 13px; }
.footer-links a { color: var(--color-text-soft); }
.footer-links a:hover { color: var(--color-primary); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  .feature-grid, .step-grid { grid-template-columns: 1fr; }
  .preview-body { grid-template-columns: 1fr; }
  .hero { padding: 72px 0 48px; }
  .hero-preview { padding: 14px; margin-top: 40px; }
  .preview-mono { display: none; }
}
@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* ============================================================
   顶栏 / 图标适配
   ============================================================ */
.site-main { position: relative; z-index: 1; }
.nav a { display: inline-flex; align-items: center; gap: 6px; }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark { padding: 0; overflow: hidden; }
.logo-mark svg { width: 17px; height: 17px; }
/* 自定义 Logo（后台上传）：去掉渐变底，图片按比例填满 */
.logo-mark.has-img { background: none; border: 1px solid var(--color-border-soft); }
.logo-mark.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.badge .icon { opacity: .85; }
.btn .icon { opacity: .95; }
[data-theme="dark"] .aurora-blob { opacity: .28; }

/* ============================================================
   后台 / 用户中心玻璃化
   ============================================================ */
.layout { position: relative; z-index: 1; }
.sidebar {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
}
.main-head {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}
.sidebar-menu a .icon { opacity: .72; transition: opacity var(--dur-fast); }
.sidebar-menu a:hover .icon, .sidebar-menu a.active .icon { opacity: 1; }
.main-body .card { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border); }

/* 平板下特性/流程改为两列，避免卡片过长 */
@media (max-width: 900px) and (min-width: 621px) {
  .feature-grid, .step-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 程序详情页布局 */
.detail-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }

/* ============================================================
   用户中心：顶部导航 + 左侧菜单 + 右侧内容
   ============================================================ */
.uc-layout { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 18px; align-items: start; }
.uc-side { position: sticky; top: 84px; padding: 16px 12px; }

/* 侧边栏钱包卡 */
.uc-wallet {
  margin-bottom: 14px; padding: 12px 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft); border: 1px solid var(--color-border-soft);
}
.uc-wallet-title { font-size: 12.5px; font-weight: 600; color: var(--color-text-soft); margin-bottom: 10px; }
.uc-wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uc-wallet-item { min-width: 0; text-align: center; }
.uc-wallet-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 6px;
}
.uc-wallet-ico.orange { background: var(--color-warning-50); color: #e0730a; }
.uc-wallet-ico.purple { background: #f1ebff; color: #7a4fe0; }
.uc-wallet-val { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-wallet-key { font-size: 11px; color: var(--color-text-mute); margin-top: 1px; }
.uc-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(145deg, #4d7bff, #2a4fd0); color: #fff;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 18px -8px rgba(54,102,250,.75);
}
.uc-avatar.lg { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; }
.uc-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 2px;
  border-radius: 10px; font-size: 13.5px; color: var(--color-text-soft); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.uc-menu a .icon { opacity: .7; }
.uc-menu a:hover { background: rgba(54,102,250,.07); color: var(--color-text); }
.uc-menu a:hover .icon { opacity: 1; }
.uc-menu a.active { background: var(--color-primary); color: #fff; box-shadow: 0 8px 18px -10px rgba(54,102,250,.8); }
.uc-menu a.active .icon { opacity: 1; }
.uc-menu .menu-group { font-size: 11px; letter-spacing: .07em; color: var(--color-text-mute); padding: 14px 11px 6px; }
.uc-main { min-width: 0; display: flex; flex-direction: column; }

.uc-hero { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.uc-hero-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.uc-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0 0 18px; }
.uc-stat { padding: 16px; display: flex; align-items: center; gap: 12px; }
.uc-stat-val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.uc-stat-key { font-size: 12px; color: var(--color-text-mute); margin-top: 3px; }

.uc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--color-border-soft); flex-wrap: wrap;
}
.uc-card-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.uc-card-title .icon { color: var(--color-primary); }
/* 授权卡片 */
.lic-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 16px; }
.lic-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lic-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lic-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lic-meta { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: 10px; padding: 12px 14px; }
.lic-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lic-meta-row .text-xs { display: inline-flex; align-items: center; gap: 5px; }
.lic-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lic-foot .text-xs { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 700px) {
  .lic-grid { grid-template-columns: 1fr; padding: 12px; }
}

.uc-mini-bar { height: 5px; border-radius: 999px; background: var(--color-bg-mute); overflow: hidden; }
.uc-mini-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), #7b5cff); }

/* ---------- 余额页 ---------- */
.bal-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.bal-card { position: relative; border-radius: 14px; padding: 18px 20px; color: #fff; overflow: hidden; box-shadow: var(--shadow-md); }
.bal-card .icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .32; }
.bal-amber { background: linear-gradient(135deg, #f7b733, #f09a1a); }
.bal-blue  { background: linear-gradient(135deg, #4a7bff, #2b54e0); }
.bal-red   { background: linear-gradient(135deg, #ff6f61, #f04444); }
.bal-num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.bal-key { font-size: 12.5px; opacity: .92; margin-top: 6px; }

.recharge-presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.preset { border: 1.5px solid var(--color-border-soft); background: var(--color-bg-soft); border-radius: 10px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.preset:hover { border-color: var(--color-warning); }
.preset.on { border-color: var(--color-warning); background: #fff8ee; }
.preset .p-n { font-size: 15px; font-weight: 700; }
.preset .p-v { font-size: 12.5px; font-weight: 600; color: var(--color-text-mute); margin-top: 4px; }
.preset.on .p-n, .preset.on .p-v { color: #d98708; }

.recharge-row { display: flex; gap: 10px; }
.recharge-row .form-input { flex: 1; }
.recharge-row .btn { border-radius: var(--radius-sm); }

.bal-section { margin-bottom: 22px; }
.bal-section-title { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }

@media (max-width: 720px) {
  .bal-cards { grid-template-columns: 1fr; }
  .recharge-presets { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .recharge-row { flex-direction: column; }
  .recharge-row .btn { width: 100%; }
}

@media (max-width: 960px) {
  .uc-layout { display: flex; flex-direction: column; align-items: stretch; }
  .uc-side { position: static; width: 100%; }
  .uc-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .uc-menu { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px 6px; }
  .uc-menu .menu-group { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .uc-menu { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .uc-menu { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 420px) {
  .uc-menu { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .uc-stats { grid-template-columns: 1fr; }
  .uc-hero { padding: 16px; }
}

/* ============================================================
   首页：公告条 / 紧凑 Hero / 筛选条 / 两列列表
   ============================================================ */
.notice-bar { position: relative; z-index: 1; border-bottom: 1px solid var(--color-border-soft); background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.notice-inner { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; flex-wrap: wrap; }
.notice-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-primary); font-weight: 600; flex-shrink: 0; }
.notice-text { color: var(--color-text-soft); flex: 1; min-width: 200px; }
.notice-meta { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text-mute); flex-shrink: 0; }
.notice-meta .icon { opacity: .7; }

.hero-compact { padding: 54px 0 32px; position: relative; }
.hero-compact .hero-eyebrow { margin-bottom: 18px; }
.hero-compact .hero-title { line-height: 1.18; margin-bottom: 16px; }
.hero-compact .hero-sub { font-size: 15.5px; max-width: 620px; }

.filter-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-lg); flex-wrap: wrap; }
.filter-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; padding: 6px 10px; border-radius: 10px; background: rgba(245,246,250,.9); border: 1px solid rgba(16,24,40,.06); }
.filter-search .icon { color: var(--color-text-mute); }
.filter-search input { border: none; background: transparent; outline: none; font-size: 13.5px; width: 100%; color: var(--color-text); font-family: inherit; }
.filter-search input::placeholder { color: var(--color-text-mute); }
.filter-sorts { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: var(--radius-full); font-size: 12.5px; color: var(--color-text-soft); text-decoration: none; border: 1px solid transparent; transition: all var(--dur-fast) var(--ease); white-space: nowrap; }
.chip:hover { background: rgba(54,102,250,.07); color: var(--color-text); }
.chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.list-title { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.list-count { padding: 2px 9px; border-radius: var(--radius-full); background: var(--color-bg-mute); color: var(--color-text-soft); font-size: 12px; font-weight: 600; }

.list-2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 760px) { .list-2col { grid-template-columns: 1fr; } }

.app-cover { height: 176px; }
.app-cover-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9); font-size: 11.5px; font-weight: 600; color: var(--color-text-soft); }

.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.support-card { padding: 22px; display: flex; align-items: center; gap: 14px; }
.support-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.support-card p { font-size: 13px; line-height: 1.6; color: var(--color-text-soft); }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hero-compact { padding: 40px 0 24px; }
  .filter-sorts { width: 100%; }
}

/* ============================================================
   产品购买页
   ============================================================ */
.detail-wrap { padding-top: 22px; padding-bottom: 56px; max-width: 1080px; }
.crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-mute); margin-bottom: 16px; flex-wrap: wrap; }
.crumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-soft); text-decoration: none; }
.crumb a:hover { color: var(--color-primary); }
.crumb-sep { display: inline-flex; opacity: .5; }
.crumb-cur { color: var(--color-text); font-weight: 500; }

.detail-banner { padding: 12px; overflow: hidden; }
.detail-banner img { width: 100%; display: block; border-radius: 18px; max-height: 400px; object-fit: cover; }
@media (max-width: 860px) { .detail-banner img { max-height: 240px; } }
.detail-banner-ph {
  height: 300px; border-radius: 18px; display: grid; place-items: center; gap: 16px; align-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #e7ecff 48%, #f3f0ff 100%);
}
.detail-banner-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--color-text-soft); }

.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 4px; font-size: 12.5px; color: var(--color-text-mute); }
.detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
/* 详情页两列骨架：左列（信息 → 截图 → 详情分段）按自身内容自然堆叠，
   右列购买卡独立成卡并吸顶；左列不再被右列高度拉伸，左下方不会出现整块空档 */
.detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "info buy" "shots buy" "sections buy";
  align-items: start;
  gap: 16px;
  margin-top: 18px;
}
/* 无截图时不存在截图行，改用两行模板，避免空行两侧的 row-gap 叠成 32px */
.detail-cols.no-shots { grid-template-areas: "info buy" "sections buy"; }
.detail-info { grid-area: info; overflow: hidden; }
.detail-info-main { padding: 26px 28px; display: flex; flex-direction: column; }
.detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-title { font-size: clamp(24px,3vw,32px); font-weight: 700; letter-spacing: -.03em; }
.detail-desc { font-size: 14.5px; line-height: 1.8; color: var(--color-text-soft); margin-bottom: 18px; }

/* ---------- 规格区：紧凑卡片 ----------
   卡片高度完全由内容决定（不拉伸、不居中）；图标放进浅色圆角小方块，
   标签为小号次级色，值用更大字号与字重 */
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.spec-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 13px 13px; border-radius: 14px;
  background: rgba(245,246,250,.9);
  border: 1px solid rgba(16,24,40,.055);
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
.spec-key { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--color-text-mute); }
.spec-key svg {
  width: 24px; height: 24px; padding: 5px; border-radius: 8px;
  background: var(--color-primary-50); color: var(--color-primary);
}
.spec-val { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--color-text); }
/* 窄列时改为 2×2，避免四张卡被压到读不清 */
@media (max-width: 940px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.detail-buy {
  grid-area: buy; align-self: start; position: sticky; top: 80px;
  padding: 24px 22px; display: flex; flex-direction: column;
}
.buy-price-label { font-size: 12px; color: var(--color-text-mute); }
.buy-price { font-size: 34px; font-weight: 700; color: var(--color-primary); letter-spacing: -.03em; line-height: 1.25; margin: 2px 0 6px; }
.buy-price-note { font-size: 12.5px; color: var(--color-text-soft); line-height: 1.6; }
.buy-tips { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border-soft); display: flex; flex-direction: column; gap: 9px; font-size: 12px; color: var(--color-text-mute); }
.buy-tips div { display: flex; align-items: center; gap: 6px; }
.buy-tips .icon { color: var(--color-primary); opacity: .8; }

.detail-sections { grid-area: sections; display: flex; flex-direction: column; gap: 16px; margin-top: 0; }
.detail-block { overflow: hidden; }
.block-head { display: flex; align-items: center; gap: 9px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-soft); }
.block-head .icon { color: var(--color-primary); }
.block-head h2 { font-size: 15px; font-weight: 600; }
.block-body { padding: 20px 24px 24px; font-size: 14px; color: var(--color-text-soft); }

/* ---------- 会员等级文字配色（与 vip-badge 徽标原色完全一致） ---------- */
:root {
  --vip-color:  #e11d48; /* 玫瑰红：VIP / 永久 VIP */
  --svip-color: #b07807; /* 琥珀金：SVIP / 永久 SVIP */
}
/* 套餐卡片标题：VIP / SVIP 两色，月费与永久同色 */
.vip-plan-card .vip-plan-name { color: var(--vip-color); }
.vip-plan-card.svip .vip-plan-name { color: var(--svip-color); }
/* 用户中心文字：由容器/body 的 .lvl-vip / .lvl-svip 切换；未开通会员不带 class，保持默认深色 */
.lvl-vip  .uc-hero-title, .lvl-vip  .uc-lvl-name, .lvl-vip  .uc-lvl-sub { color: var(--vip-color); }
.lvl-svip .uc-hero-title, .lvl-svip .uc-lvl-name, .lvl-svip .uc-lvl-sub { color: var(--svip-color); }

/* ---------- 会员状态卡片：有会员时按等级上色 + 右下角装饰 ---------- */
:root {
  --vip-card-bg:   linear-gradient(135deg, #fff5f7 0%, #ffe4ea 52%, #ffd2dd 100%);
  --svip-card-bg:  linear-gradient(135deg, #fffdf7 0%, #fff2da 52%, #ffe3b8 100%);
  --deco-size: 168px;
}
.uc-status-card { position: relative; overflow: hidden; isolation: isolate; }
.uc-status-card.lvl-vip  { background: var(--vip-card-bg);  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .10); }
.uc-status-card.lvl-svip { background: var(--svip-card-bg); box-shadow: inset 0 0 0 1px rgba(176, 120, 7, .14); }
/* 右下角会员装饰：与徽标同款图形，半透明且置于文字下层 */
.uc-status-card .uc-status-deco { position: absolute; right: -12px; bottom: -24px; z-index: 0; pointer-events: none;
  color: var(--vip-color); opacity: .13; transform: rotate(-10deg); }
.uc-status-card.lvl-svip .uc-status-deco { color: var(--svip-color); opacity: .16; }
.uc-status-card .uc-status-deco svg { display: block; width: var(--deco-size); height: var(--deco-size); }
/* 彩色底上的文字：套餐名与有效期行均沿用等级原色（与徽标一致）；未开通会员无 lvl-* class，样式不受影响 */
.uc-status-card.lvl-vip  .uc-lvl-name { color: var(--vip-color); }
.uc-status-card.lvl-svip .uc-lvl-name { color: var(--svip-color); }

/* ---------- VIP 徽标 / 源码下载区 ---------- */
.vip-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
}
.vip-badge.vip  { background: linear-gradient(135deg, #ffe9e9, #ffd9d9); color: #e11d48; border: 1px solid #ffc9c9; }
.vip-badge.svip { background: linear-gradient(135deg, #fff4d6, #ffe7ad); color: #b07807; border: 1px solid #f2d58a; }
/* 会员等级专属按钮：VIP 红 / SVIP 金（低饱和，避免刺眼） */
.btn-vip {
  background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(225,29,72,.2);
}
.btn-vip:hover { filter: brightness(1.05); color: #fff; }
.btn-svip {
  background: linear-gradient(135deg, #f0c15a, #c99a2e); color: #4a3300; border: none;
  box-shadow: 0 6px 16px rgba(201,154,46,.26);
}
.btn-svip:hover { filter: brightness(1.05); color: #4a3300; }
.icon-tile.vip-tint  { background: rgba(225,29,72,.1);  color: #e11d48; }
.icon-tile.svip-tint { background: rgba(201,154,46,.15); color: #b07807; }
/* 后台卡片统一头部（设置 / 风控 / VIP 页共用，保证内容不贴边） */
.settings-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--color-border-soft);
}
.btn-success {
  background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(34,197,94,.28);
}
.btn-success:hover { filter: brightness(1.05); color: #fff; }
.src-dl {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.03));
  border: 1px dashed rgba(34,197,94,.35);
}
.src-dl-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #15803d; }

.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.guide-item { padding: 16px; border-radius: 14px; background: rgba(245,246,250,.8); border: 1px solid rgba(16,24,40,.05); }
.guide-item h4 { font-size: 13.5px; font-weight: 600; margin: 10px 0 6px; color: var(--color-text); }
.guide-item p { font-size: 12.5px; line-height: 1.7; color: var(--color-text-soft); }

.changelog { display: flex; flex-direction: column; }
.cl-item { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.cl-item:last-child { padding-bottom: 0; }
.cl-dot { position: relative; width: 12px; flex-shrink: 0; display: flex; justify-content: center; }
.cl-dot span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-50); }
.cl-item::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: var(--color-border-soft); }
.cl-item:last-child::before { display: none; }
.cl-content { flex: 1; min-width: 0; }
.cl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cl-text { font-size: 13px; line-height: 1.75; white-space: pre-wrap; }

@media (max-width: 860px) {
  .detail-cols { grid-template-columns: 1fr; grid-template-areas: "info" "buy" "shots" "sections"; }
  .detail-cols.no-shots { grid-template-areas: "info" "buy" "sections"; }
  .detail-buy { position: static; }
  /* 授权说明 4 小块：屏幕再小也保持 1 行 2 个 */
  .detail-banner-ph { height: 220px; }
}

/* ============================================================
   窄屏修正：顶栏 / 公告条 / 筛选条 / 标题
   ============================================================ */
@media (max-width: 1040px) {
  .topbar-inner { gap: 8px; }
  .nav { min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .topbar-inner > .flex { flex-shrink: 0; }
}
@media (max-width: 780px) {
  .nav a span { display: inline; }
  .notice-meta { display: none; }
  .notice-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-inner { flex-wrap: nowrap; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-search { width: 100%; }
  .filter-sorts { width: 100%; justify-content: flex-start; }
  .filter-bar > .btn { width: 100%; }
  .hero-sub { font-size: 14px; line-height: 1.7; }
  .hero-eyebrow { font-size: 12px; }
  .app-cover { height: 150px; }
  .list-title { font-size: 17px; }
}
@media (max-width: 620px) {
  .logo > span:not(.logo-mark) { display: none; }
  .topbar .flex.gap-3 .btn-ghost { display: none; }
  .support-card { padding: 18px; }
}

/* ============================================================
   区块标题（蓝色竖线，参考商城详情页）
   ============================================================ */
.block-bar { width: 3px; height: 15px; border-radius: 3px; background: var(--color-primary); flex-shrink: 0; }

/* ============================================================
   程序截图：前台 / 后台 展示 + 灯箱
   ============================================================ */
.shots-block { grid-area: shots; margin-top: 0; overflow: hidden; }
.shots-tabs { margin-left: auto; display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-full); background: rgba(16,24,40,.055); }
.shot-tab {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--color-text-soft);
  padding: 5px 13px; border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.shot-tab:hover { color: var(--color-text); }
.shot-tab.active { background: #fff; color: var(--color-primary); box-shadow: 0 1px 4px rgba(16,24,40,.12), 0 1px 0 rgba(255,255,255,.9) inset; }

.shots-pane { display: none; }
.shots-pane.active { display: block; }

/* 截图横向滚动条：不换行，超出可左右滑动 */
.shots-row {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,24,40,.22) rgba(16,24,40,.06);
}
.shots-row::-webkit-scrollbar { height: 8px; }
.shots-row::-webkit-scrollbar-track { background: rgba(16,24,40,.06); border-radius: 99px; }
.shots-row::-webkit-scrollbar-thumb { background: rgba(16,24,40,.20); border-radius: 99px; }
.shots-row::-webkit-scrollbar-thumb:hover { background: rgba(16,24,40,.32); }
.shot {
  flex: 0 0 min(340px, 42%); scroll-snap-align: start;
  display: block; padding: 0; cursor: zoom-in; overflow: hidden;
  border: 1px solid var(--color-border-soft); border-radius: 12px;
  background: var(--color-bg-mute); aspect-ratio: 16 / 10;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.shot:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.95); box-shadow: 0 18px 32px -18px rgba(16,24,40,.45); }
.shot:hover img { transform: scale(1.04); }
.shot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 640px) { .shot { flex-basis: 78%; } .shot-tab { padding: 5px 10px; } }

.lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
  padding: 4vh 5vw; background: rgba(10,12,18,.78);
}
.lightbox.open { display: flex; animation: lbIn .18s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 92vw; max-height: 86vh; display: block;
  border-radius: 14px; background: #fff;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.18);
}
.lb-close, .lb-nav {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.14);
  color: #fff; transition: background var(--dur-fast) var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.26); }
.lb-close { top: 18px; right: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 20px; }
.lb-prev .icon { transform: rotate(180deg); }
.lb-next { right: 20px; }
.lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.14); color: #fff; font-size: 12.5px; letter-spacing: .02em;
}
body.lb-lock { overflow: hidden; }
@media (max-width: 620px) {
  .lb-nav { width: 38px; height: 38px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-close { top: 10px; right: 10px; }
}

/* 后台截图管理 */
.shot-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-top: 10px; }
.shot-manage-item { display: block; border: 1px solid var(--color-border-soft); border-radius: 10px; overflow: hidden; background: var(--color-bg-mute); }
.shot-manage-item img { width: 100%; height: 72px; object-fit: cover; display: block; }
.shot-del { display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: 11.5px; color: var(--color-text-soft); background: rgba(255,255,255,.72); cursor: pointer; }

/* ============================================================
   首页（商城布局）：广告位 / 特性条 / 公告条 / 查询卡 / 四列产品卡
   ============================================================ */
.shop-top { padding-top: 18px; }

/* 广告位 */
.shop-hero {
  position: relative; overflow: hidden;
  height: 272px; display: flex; align-items: flex-end; padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(118deg, #2447b8 0%, var(--color-primary) 46%, #7b5cff 100%);
  box-shadow: 0 22px 46px -20px rgba(36,71,184,.55), 0 1px 0 rgba(255,255,255,.32) inset;
}
.shop-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 88% at 80% 6%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(46% 70% at 16% 98%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 60%);
}
.shop-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 92% at 26% 12%, #000 0%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(80% 92% at 26% 12%, #000 0%, rgba(0,0,0,0) 76%);
}
.shop-hero-copy { position: relative; z-index: 2; color: #fff; flex: 1 1 0; min-width: 0; max-width: 620px; }
.shop-hero-stats { position: relative; z-index: 2; display: flex; gap: 10px; flex-shrink: 0; margin-left: 24px; }
.hero-stat {
  min-width: 104px; padding: 12px 15px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset;
}
.hero-stat b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.hero-stat span { font-size: 11.5px; color: rgba(255,255,255,.78); }
.shop-hero-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.shop-hero h1 { font-size: clamp(23px, 3.1vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 12px 0 8px; }
.shop-hero p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.84); word-break: break-word; }
@media (max-width: 860px) { .shop-hero-stats { display: none; } }
@media (max-width: 640px) {
  .shop-hero { height: 206px; padding: 22px 20px; border-radius: var(--radius-md); }
  .shop-hero p { font-size: 12.5px; }
}

/* 特性条 */
.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.feature-item { padding: 15px 16px; display: flex; align-items: center; gap: 11px; }
.feature-item .icon-tile { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; }
.feature-item h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.feature-item p { font-size: 12px; line-height: 1.5; color: var(--color-text-mute); }
@media (max-width: 940px) { .feature-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) {
  .feature-strip { gap: 8px; }
  .feature-item { padding: 11px 12px; gap: 8px; }
  .feature-item .icon-tile { width: 30px; height: 30px; border-radius: 9px; }
  .feature-item h3 { font-size: 12px; margin-bottom: 2px; }
  .feature-item p { font-size: 10.5px; line-height: 1.4; }
}

/* 网站通知面板 */
.notice-panel { margin-top: 14px; padding: 18px 20px 10px; }
.notice-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notice-title { display: flex; align-items: center; gap: 8px; }
.notice-title h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.notice-count { font-size: 12px; color: var(--color-text-mute); }
.notice-list { display: flex; flex-direction: column; }
.notice-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--color-border-soft);
}
.notice-item:first-child { border-top: none; }
.notice-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--radius-full);
}
.notice-ico.primary { background: var(--color-primary-50); color: var(--color-primary); }
.notice-ico.success { background: var(--color-success-50); color: #1a7f37; }
.notice-ico.warning { background: var(--color-warning-50); color: #b35a00; }
.notice-ico.danger  { background: var(--color-danger-50);  color: #cf2218; }
.notice-item p { font-size: 13px; line-height: 1.6; color: var(--color-text-soft); }
@media (max-width: 620px) {
  .notice-panel { padding: 15px 16px 8px; }
  .notice-item p { font-size: 12.5px; }
}

/* 区块标题（小号） */
.mini-head { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 12px; }
.mini-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.mini-head span { font-size: 12px; color: var(--color-text-mute); }

/* 查询卡 */
.query-card { padding: 16px 18px; }
.query-card .form-input, .query-card .form-select { background: #fff; }
.query-card .form-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.query-card .btn { margin-top: 12px; height: 40px; }
.query-result {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.6;
}
.query-result.ok   { background: var(--color-success-50); color: #1a7f37; border: 1px solid rgba(52,199,89,.28); }
.query-result.warn { background: var(--color-warning-50); color: #a8590b; border: 1px solid rgba(255,149,0,.28); }
.query-result.err  { background: var(--color-danger-50);  color: #b3261e; border: 1px solid rgba(255,59,48,.24); }

/* 四列产品卡 */
.app-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.app-grid4 .app-card { border-radius: 12px; }
.app-grid4 .app-cover { height: auto; aspect-ratio: 16 / 10; }
.app-grid4 .app-body { padding: 12px 14px 14px; gap: 4px; }
.app-grid4 .app-name { font-size: 14.5px; }
.app-sub { font-size: 12px; color: var(--color-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1060px) { .app-grid4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .app-grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) {
  .app-grid4 { gap: 10px; }
  .app-grid4 .app-body { padding: 10px 11px 12px; }
  .app-grid4 .app-name { font-size: 13.5px; }
  .price-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 12px; border-radius: 8px; }
  .app-cover-badge { top: 8px; right: 8px; padding: 3px 8px; font-size: 10.5px; }
  .app-grid4 .app-foot .badge { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
  .app-grid4 .app-more { font-size: 11.5px; white-space: nowrap; }
}
@media (max-width: 360px) {
  .app-grid4 .app-foot .badge { font-size: 10px; padding: 2px 6px; gap: 3px; }
  .app-grid4 .app-more { font-size: 10.5px; }
}

/* 站点介绍 */
.about-block { margin-top: 40px; }
.about-block h2 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; }
.about-block p { font-size: 13.5px; color: var(--color-text-soft); }
.about-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--color-text-mute); }
.about-links a { font-weight: 500; }
@media (max-width: 620px) { .about-block h2 { font-size: 19px; } }

/* 价格角标 */
.price-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 5px 11px; border-radius: 10px;
  background: linear-gradient(150deg, #ff8a3d, #ff5f2e); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 10px 20px -10px rgba(255,95,46,.85), 0 0 0 1px rgba(255,255,255,.28) inset;
}
.price-badge small { font-size: 11px; font-weight: 600; opacity: .95; }

/* 查看详情链接 */
.app-more {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 500; color: var(--color-primary);
  transition: gap var(--dur-fast) var(--ease);
}
.app-card:hover .app-more { gap: 6px; }

/* 页脚居中 */
.site-footer .footer-inner { flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }

/* ============================================================
   移动端性能降级（≤860px）
   部分手机浏览器（Android WebView / QQ / 微信 X5 等）对大面积
   backdrop-filter + 固定 blur 背景光斑的栅格化支持有缺陷，
   会导致卡片偶发渲染空白（页面卡住半截）。移动端关闭大面积
   背景模糊，保留原有半透明渐变背景，视觉几乎不变。
   ============================================================ */
@media (max-width: 860px) {
  .glass, .glass-card, .btn-glass,
  .sidebar, .main-head, .main-body .card, .notice-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* 无模糊时提高背景不透明度，保证文字可读性 */
  .glass { background: rgba(255,255,255,.94); }
  .glass-card {
    background-image:
      linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 32%, rgba(255,255,255,0) 55%),
      linear-gradient(140deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 100%);
  }
  .btn-glass, .sidebar, .main-head, .main-body .card, .notice-bar { background: rgba(255,255,255,.94); }

  /* 极光背景光斑：缩小尺寸 + 降低模糊半径，减轻移动端合成开销 */
  .aurora-blob { opacity: .36; }
  .aurora-blob.b1 { width: 340px; height: 340px; top: -120px; left: -90px; }
  .aurora-blob.b2 { width: 300px; height: 300px; top: -90px; right: -80px; }
  .aurora-blob.b3 { width: 380px; height: 380px; bottom: -190px; left: 30%; }
}

/* 尊重系统"减弱动态效果/降低透明度"设置 */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-card, .btn-glass, .sidebar, .main-head, .main-body .card, .notice-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.96);
  }
}

/* ============================================================
   购买成功弹窗 — 描边打勾动画 + 弹出 + 扩散光环
   ============================================================ */
.buy-modal-mask {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15,18,28,.48);
  animation: buyMaskIn .28s var(--ease);
}
.buy-modal-mask.closing { animation: buyMaskOut .22s var(--ease) forwards; }
@keyframes buyMaskIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes buyMaskOut { from { opacity: 1; } to { opacity: 0; } }

.buy-modal {
  position: relative; overflow: hidden;
  width: min(92vw, 400px);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px -20px rgba(16,24,40,.40), var(--glass-shadow);
  padding: 34px 26px 24px;
  text-align: center;
  animation: buyCardIn .42s cubic-bezier(.34,1.45,.5,1);
}
.buy-modal-mask.closing .buy-modal { animation: buyCardOut .2s var(--ease) forwards; }
@keyframes buyCardIn  { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes buyCardOut { from { opacity: 1; } to { opacity: 0; transform: translateY(14px) scale(.95); } }

/* 顶部柔光 */
.buy-modal-glow {
  position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52,199,89,.28), transparent);
  pointer-events: none;
}

/* 打勾描边动画 */
.buy-check-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; }
.buy-check { width: 84px; height: 84px; color: var(--color-success); position: relative; z-index: 1; }
.bc-circle {
  stroke-dasharray: 202; stroke-dashoffset: 202;
  animation: bcDraw .55s .15s var(--ease) forwards;
}
.bc-tick {
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: bcDraw .32s .6s var(--ease) forwards;
}
@keyframes bcDraw { to { stroke-dashoffset: 0; } }

/* 扩散光环 */
.buy-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(52,199,89,.45);
  animation: buyRing 1.9s ease-out infinite;
}
.buy-ring.r2 { animation-delay: .55s; }
.buy-ring.r3 { animation-delay: 1.1s; }
@keyframes buyRing {
  0%   { transform: scale(.78); opacity: 0; }
  25%  { opacity: .8; }
  100% { transform: scale(1.65); opacity: 0; }
}

.buy-modal-title { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.buy-modal-welcome { margin-top: 8px; font-size: 13.5px; line-height: 1.8; color: var(--color-text-soft); }

.buy-modal-info {
  margin: 18px 0 4px; padding: 4px 16px;
  background: rgba(16,24,40,.04); border-radius: var(--radius-md);
  text-align: left;
}
.bmi-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 13px;
  border-bottom: 1px dashed rgba(16,24,40,.08);
}
.bmi-row:last-child { border-bottom: none; }
.bmi-row > span { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-mute); flex-shrink: 0; }
.bmi-row > b { font-weight: 600; color: var(--color-text); text-align: right; word-break: break-all; }
.bmi-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.bmi-price { color: var(--color-warning); font-size: 15px; }

.buy-modal-actions { margin-top: 16px; display: grid; gap: 9px; }

@media (prefers-reduced-motion: reduce) {
  .bc-circle, .bc-tick { animation-duration: .01s; animation-delay: 0s; }
  .buy-ring { animation: none; opacity: 0; }
  .buy-modal, .buy-modal-mask { animation-duration: .01s; }
}

/* ============================================================
   后台分页条 — 上一页 / 页码窗口 / 下一页 / 跳至指定页
   ============================================================ */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 18px; border-top: 1px solid var(--color-border-soft);
  font-size: 13px;
}
.pager-total { color: var(--color-text-mute); margin-right: auto; }
.pager-links { display: inline-flex; align-items: center; gap: 5px; }
.pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--color-border-soft);
  background: rgba(255,255,255,.75); color: var(--color-text-soft);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
a.pager-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50); }
.pager-btn.current {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff; box-shadow: 0 4px 12px rgba(54,102,250,.30); cursor: default;
}
.pager-btn.disabled { opacity: .38; cursor: not-allowed; }
.pager-links .pager-btn:first-child svg { transform: rotate(180deg); }
.pager-ellipsis { color: var(--color-text-mute); padding: 0 2px; user-select: none; }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; }
.pager-jump .form-input { width: 76px; height: 30px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 640px) {
  .pager { justify-content: center; }
  .pager-total { width: 100%; text-align: center; margin-right: 0; }
}

/* ============================================================
   批量操作浮动条 — 勾选列表项后从底部浮出
   ============================================================ */
.batchbar {
  position: fixed; left: 50%; bottom: 26px; z-index: 900;
  transform: translate(-50%, 90px);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 18px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: 0 18px 50px -12px rgba(16,24,40,.35), var(--glass-shadow);
  opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.34,1.3,.5,1), opacity .2s var(--ease);
  max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center;
}
.batchbar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.batchbar-n { font-size: 13px; color: var(--color-text-soft); white-space: nowrap; }
.batchbar-n b { color: var(--color-primary); font-size: 14px; margin: 0 2px; }
.batchbar-sep { width: 1px; height: 18px; background: var(--color-border); }

/* 列表勾选框 */
.check-col { width: 36px; text-align: center !important; }
.row-check, .check-all {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--color-primary); vertical-align: middle;
}
tr.row-checked > td { background: var(--color-primary-50); }

/* ---------- 页签 chips（版本更新等程序切换） ---------- */
.vtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.vtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-full);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--color-text-soft); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}
.vtab:hover { color: var(--color-primary); border-color: rgba(54,102,250,.4); transform: translateY(-1px); }
.vtab.active {
  background: linear-gradient(135deg, #3666FA, #2b54e0);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(54,102,250,.32);
}

/* ---------- 文件上传拖放区 ---------- */
.dropzone {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border); background: var(--color-bg-soft);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--color-primary); background: var(--color-primary-50);
}
.dropzone-ic {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--color-primary-50); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.dropzone:hover .dropzone-ic, .dropzone.drag .dropzone-ic { background: var(--color-primary); color: #fff; }
.dropzone-t { font-size: 14px; font-weight: 600; color: var(--color-text); }
.dropzone-s { font-size: 12px; color: var(--color-text-mute); margin-top: 2px; }
.dropzone.has-file { border-style: solid; border-color: var(--color-success); background: var(--color-success-50); }
.dropzone.has-file .dropzone-ic { background: var(--color-success); color: #fff; }
.dropzone input[type="file"] { display: none; }

/* 上传区本地预览 */
.dz-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dz-preview:empty { display: none; }
.dzpv-item {
  position: relative; width: 108px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--color-border-soft); background: var(--color-bg-soft);
  animation: dzpvIn .25s var(--ease);
}
@keyframes dzpvIn { from { opacity: 0; transform: scale(.92); } }
.dzpv-item img { width: 100%; height: 68px; object-fit: cover; display: block; }
.dzpv-name {
  display: block; font-size: 11px; color: var(--color-text-mute);
  padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dzpv-del {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.dzpv-del:hover { background: var(--color-danger); }

/* ---------- 购买卡片：余额与余额不足提示 ---------- */
.buy-balance {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding: 10px 14px;
  background: var(--color-bg-soft); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-text-soft);
}
.buy-balance span { display: inline-flex; align-items: center; gap: 6px; }
.buy-balance b { color: var(--color-text); }
.buy-err {
  margin-top: 12px; padding: 13px 14px;
  background: var(--color-danger-50); border: 1px solid rgba(255,59,48,.22);
  border-radius: var(--radius-sm); animation: buyErrIn .3s var(--ease);
}
@keyframes buyErrIn { from { opacity: 0; transform: translateY(-6px); } }
.buy-err-title {
  display: flex; align-items: center; gap: 6px;
  color: var(--color-danger); font-weight: 700; font-size: 13.5px;
}
.buy-err-msg { font-size: 12.5px; color: var(--color-text-soft); margin-top: 5px; line-height: 1.6; }
.buy-err-msg b { color: var(--color-danger); }
@media (max-width: 860px) {
  .batchbar { bottom: 14px; gap: 8px; padding: 8px 10px 8px 14px; border-radius: var(--radius-lg); }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   后台搜索筛选条 — 单排紧凑布局（原内联于各页面，统一收编）
   ============================================================ */
.admin-search { display: flex; gap: 10px; padding: 16px 18px; flex-wrap: wrap; align-items: center; }
.admin-search-field { position: relative; flex: 1; min-width: 200px; }
.admin-search-field .form-input { padding-left: 38px; width: 100%; }
.admin-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-mute); display: flex; pointer-events: none; }
.admin-search .form-select { max-width: 170px; }
@media (max-width: 640px) {
  .admin-search .form-select { max-width: none; flex: 1 1 45%; }
  .admin-search-field { flex: 1 1 100%; order: -1; }
}

/* ============================================================
   仪表盘统计卡图标
   ============================================================ */
.stat-card-ico { display: flex; align-items: center; gap: 16px; }
.stat-ic {
  width: 52px; height: 52px; border-radius: var(--radius-md); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.stat-ic-primary { background: var(--color-primary-50); color: var(--color-primary); }
.stat-ic-violet  { background: #f3eefe; color: #7C5CFC; }
.stat-ic-success { background: var(--color-success-50); color: var(--color-success); }
.stat-ic-info    { background: #e5f7fe; color: #0aa7d4; }
.stat-ic-danger  { background: var(--color-danger-50); color: var(--color-danger); }
.stat-ic-warning { background: var(--color-warning-50); color: var(--color-warning); }
@media (max-width: 640px) { .stat-ic { width: 44px; height: 44px; } }

/* ============================================================
   Dialog 全局弹窗（确认 / 提示 / 加载，替代原生 confirm/alert）
   ============================================================ */
.dlg-mask{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;background:rgba(15,20,35,.48);opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.dlg-mask.show{opacity:1}
.dlg{width:min(380px,92vw);background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);padding:26px 24px 20px;text-align:center;transform:scale(.92) translateY(10px);transition:transform var(--dur) cubic-bezier(.2,1.4,.4,1)}
.dlg-mask.show .dlg{transform:none}
.dlg-ic{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.dlg-ic svg{width:26px;height:26px}
.dlg-ic-success{background:var(--color-success-50);color:var(--color-success)}
.dlg-ic-error{background:var(--color-danger-50);color:var(--color-danger)}
.dlg-ic-warning{background:var(--color-warning-50);color:var(--color-warning)}
.dlg-ic-info{background:var(--color-primary-50);color:var(--color-primary)}
.dlg-title{font-size:16.5px;font-weight:700;margin-bottom:8px}
.dlg-msg{font-size:14px;color:var(--color-text-soft);line-height:1.7;word-break:break-word;max-height:40vh;overflow:auto}
.dlg-btns{display:flex;gap:10px;justify-content:center;margin-top:20px}
.dlg-btns .btn{min-width:96px}
.dlg-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--color-primary-50);border-top-color:var(--color-primary);margin:4px auto 14px;animation:dlg-rot .8s linear infinite}
@keyframes dlg-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-transparency: reduce){.dlg-mask{backdrop-filter:none}.dlg{backdrop-filter:none;background:var(--color-surface)}}

/* ---------- 支付配置页 ---------- */
.payset-wrap{max-width:780px;display:flex;flex-direction:column;gap:18px}
/* 通道 Hero：支付宝品牌蓝渐变 + 装饰光斑 */
.card.pay-hero{position:relative;overflow:hidden;padding:24px 26px;color:#fff;background:linear-gradient(128deg,#0e5fd6 0%,#1677ff 46%,#4c9aff 100%);border:none;box-shadow:0 14px 34px -12px rgba(22,119,255,.5)}
.pay-hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);top:-120px;right:-60px;pointer-events:none}
.pay-hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);bottom:-100px;left:32%;pointer-events:none}
.pay-hero-in{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.pay-hero-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;flex-shrink:0;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 20px -8px rgba(0,40,120,.5);color:#fff}
.pay-hero-meta{min-width:0;flex:1}
.pay-hero-name{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:.2px}
.pay-hero-desc{font-size:12.5px;opacity:.85;margin-top:3px}
.pay-status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--radius-full);font-size:11.5px;font-weight:600;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.pay-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.pay-status-pill.on{background:rgba(36,196,118,.28);border-color:rgba(120,255,190,.5)}
.pay-status-pill.on::before{background:#3ee089;box-shadow:0 0 8px rgba(62,224,137,.9)}
/* iOS 开关 */
.switch{position:relative;display:inline-block;width:48px;height:28px;flex-shrink:0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{position:absolute;inset:0;border-radius:var(--radius-full);background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.45);transition:all .25s var(--ease)}
.switch-track::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,30,90,.35);transition:transform .25s var(--ease)}
.switch input:checked + .switch-track{background:#22c06d;border-color:rgba(255,255,255,.25)}
.switch input:checked + .switch-track::after{transform:translateX(20px)}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
/* 表单卡片分节 */
.pay-form-card{padding:26px 26px 22px}
.pay-sec + .pay-sec{margin-top:24px;padding-top:22px;border-top:1px dashed var(--color-border)}
.pay-sec-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:16px}
.pay-sec-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--color-primary-50);color:var(--color-primary);flex-shrink:0}
.pay-enc-note{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#1a7f37;background:var(--color-success-50);border:1px solid rgba(52,199,89,.25);padding:4px 10px;border-radius:var(--radius-full)}
.pay-field{margin-bottom:18px}
.pay-field:last-child{margin-bottom:0}
.pay-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--color-text-soft);margin-bottom:8px}
.pay-label .badge{font-weight:600}
.pay-input-wrap{position:relative}
.pay-input-wrap > .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--color-text-mute);pointer-events:none}
.pay-input-wrap .form-input{padding-left:38px}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.2px}
textarea.mono{line-height:1.7}
.pay-key-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-mute);margin-top:7px}
.pay-key-hint .icon{color:var(--color-success)}
/* 复制按钮 */
.pay-copy-btn{display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:43px;border-radius:var(--radius-sm);background:var(--color-bg-soft);border:1px solid var(--color-border-soft);color:var(--color-text-soft);font-size:13px;font-weight:600;white-space:nowrap;transition:all var(--dur-fast) var(--ease);flex-shrink:0}
.pay-copy-btn:hover{background:var(--color-primary-50);color:var(--color-primary);border-color:rgba(54,102,250,.35)}
/* 底部操作条 */
.pay-actions{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border-soft)}
.pay-actions .text-xs{line-height:1.6}
/* 接入说明步骤 */
.pay-guide-card{padding:24px 26px}
.pay-guide-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:16px}
.pay-step{display:flex;gap:12px;padding:9px 0;font-size:13.5px;color:var(--color-text-soft);line-height:1.7}
.pay-step + .pay-step{border-top:1px dashed var(--color-border-soft)}
.pay-step-n{width:22px;height:22px;border-radius:50%;background:var(--color-primary-50);color:var(--color-primary);font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.pay-step b{color:var(--color-text)}
@media (max-width:640px){
  .pay-hero{padding:20px}
  .pay-hero-icon{width:46px;height:46px;border-radius:14px}
  .pay-hero-name{font-size:15.5px}
  .pay-hero-desc{font-size:11.5px}
  .pay-form-card,.pay-guide-card{padding:20px}
  .pay-actions{flex-direction:column;align-items:stretch}
  .pay-actions .btn{justify-content:center}
  .pay-actions .text-xs{text-align:center}
}
/* 移动端降级/减弱透明度时，Hero 卡保留品牌蓝渐变（覆盖全局白底规则） */
@media (max-width:860px){
  .main-body .card.pay-hero{background:linear-gradient(128deg,#0e5fd6 0%,#1677ff 46%,#4c9aff 100%)}
}
@media (prefers-reduced-transparency: reduce){
  .main-body .card.pay-hero{background:linear-gradient(128deg,#0e5fd6 0%,#1677ff 46%,#4c9aff 100%)}
}

/* ---------- 移动端输入体验 ---------- */
/* iOS/Safari 对字号小于 16px 的输入框会在聚焦时自动放大整页，统一提到 16px */
@media (max-width: 820px){
  input, select, textarea,
  .form-input, .form-select, .form-textarea { font-size: 16px !important; }
}

/* ============================================================
   暗色模式：顶栏切换按钮 + 局部补丁
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  color: var(--color-text-soft);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-bg-mute); }
[data-theme="dark"] { color-scheme: dark; }
.theme-toggle .ico-moon { display: inline-flex; }
.theme-toggle .ico-sun  { display: none; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun  { display: inline-flex; }

[data-theme="dark"] .topbar { background: rgba(28,28,30,.92); }
[data-theme="dark"] .icon-tile {
  background: linear-gradient(145deg, #2a2a2e 0%, #222226 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px -8px rgba(0,0,0,.6);
}
[data-theme="dark"] .icon-tile.gray { background: linear-gradient(145deg, #2a2a2e 0%, #232327 100%); }
[data-theme="dark"] .btn-glass:hover { background: #2c2c2e; }
[data-theme="dark"] .shot-tab.active { background: #2c2c2e; }
[data-theme="dark"] .query-card .form-input,
[data-theme="dark"] .query-card .form-select { background: #2c2c2e; }
[data-theme="dark"] .preset.on { background: rgba(255,149,0,.12); }
[data-theme="dark"] .preset.on .p-n,
[data-theme="dark"] .preset.on .p-v { color: #ffb340; }
[data-theme="dark"] .app-cover {
  /* 中性蓝灰，避免紫调让整块封面发灰 */
  background: linear-gradient(135deg, #20242c 0%, #1b1f26 50%, #232830 100%);
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
/* 无封面图的占位图标：加内描边与柔光，避免在深底上摊成一块死灰 */
[data-theme="dark"] .app-cover .icon-tile {
  background: linear-gradient(145deg, #2b303a 0%, #232830 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.42), 0 0 0 6px rgba(255,255,255,.03);
  color: #c9cdd6;
}
/* 首页大横幅：暗色下改中性蓝灰，去掉紫调 */
[data-theme="dark"] .shop-hero {
  background: linear-gradient(118deg, #1c2431 0%, #253347 46%, #2b3c55 100%);
  box-shadow: 0 22px 46px -24px rgba(0,0,0,.62), 0 1px 0 rgba(255,255,255,.10) inset;
}
/* 通知区的次要文字在深底上提亮一档 */
[data-theme="dark"] .notice-count,
[data-theme="dark"] .notice-item .text-mute { color: #b9b9c4; }
[data-theme="dark"] .badge-primary { background: rgba(54,102,250,.18); color: #7b9bff; }
[data-theme="dark"] .badge-success { background: rgba(52,199,89,.16); color: #4ade80; }
[data-theme="dark"] .badge-warning { background: rgba(255,149,0,.16); color: #ffb340; }
[data-theme="dark"] .badge-danger  { background: rgba(255,59,48,.16); color: #ff6961; }

/* 登录 / 注册独立页（无布局层）：暗色下同样可读 */
[data-theme="dark"] body { background: linear-gradient(160deg, #17171c 0%, #101013 100%); }
[data-theme="dark"] .auth-card {
  background: rgba(28,28,33,.88);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ============================================================
   暗色模式：组件级补丁（只影响暗色，浅色模式完全不变）
   ============================================================ */

/* —— 玻璃卡高光：浅色高光在深色上会形成灰雾，改为极低透明度 —— */
[data-theme="dark"] .glass-card {
  background-image:
    linear-gradient(155deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 32%, rgba(255,255,255,0) 55%),
    var(--glass-bg);
}
[data-theme="dark"] .glass-card.hover:hover {
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
              0 -1px 0 rgba(255,255,255,.04) inset,
              0 20px 44px -12px rgba(0,0,0,.68);
}

/* —— 顶栏 / 按钮 —— */
[data-theme="dark"] .btn-glass {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: var(--color-text-soft);
}
[data-theme="dark"] .btn-glass:hover { background: rgba(255,255,255,.18); color: var(--color-text); }
[data-theme="dark"] .btn-ghost { border-color: var(--color-border); }

/* —— 首页：光斑 / 标题渐变 / 眉标 —— */
[data-theme="dark"] .aurora-blob { opacity: .55; }
[data-theme="dark"] .aurora-blob.b1 {
  background: radial-gradient(circle, rgba(64,110,220,.42) 0%, rgba(64,110,220,0) 70%);
}
[data-theme="dark"] .aurora-blob.b2 {
  background: radial-gradient(circle, rgba(52,92,180,.34) 0%, rgba(52,92,180,0) 70%);
}
[data-theme="dark"] .aurora-blob.b3 {
  background: radial-gradient(circle, rgba(42,96,170,.38) 0%, rgba(42,96,170,0) 70%);
}
[data-theme="dark"] .hero-eyebrow .pill {
  background: rgba(84,132,255,.16);
  border-color: rgba(84,132,255,.30);
  color: #a8c0ff;
}
[data-theme="dark"] .grad-text {
  /* 去掉紫色，改为三段蓝，避免紫蓝渐变在深色上发脏 */
  background-image: linear-gradient(96deg, #7fa5ff 0%, #4d7dff 48%, #2f5fe0 100%);
}
[data-theme="dark"] .hero-note .icon { color: #4ade80; }

/* —— 首页预览面板（浏览器窗口模拟） —— */
[data-theme="dark"] .preview-panel {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
[data-theme="dark"] .preview-row { border-bottom-color: rgba(255,255,255,.09); }
[data-theme="dark"] .preview-mono {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .preview-mono .c-str { color: #6ee7a0; }

/* —— 列表 / 详情 / 购买页的浅底块 —— */
[data-theme="dark"] .filter-search,
[data-theme="dark"] .guide-item {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.11);
}
/* 规格卡在暗色下的底色/描边与图标方块 */
[data-theme="dark"] .spec-item {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11); box-shadow: none;
}
[data-theme="dark"] .spec-key svg { background: rgba(84,132,255,.18); color: #a8c0ff; }
[data-theme="dark"] .detail-banner-ph {
  background: linear-gradient(135deg, #1d1f26 0%, #1a1c23 48%, #21242c 100%);
}
[data-theme="dark"] .app-cover-badge {
  background: rgba(28,28,33,.86);
  border-color: rgba(255,255,255,.16);
  color: var(--color-text-soft);
}

/* —— 截图区 —— */
[data-theme="dark"] .shots-tabs { background: rgba(255,255,255,.07); }
[data-theme="dark"] .shot-tab.active {
  background: rgba(255,255,255,.14);
  color: #a8c0ff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .shot:hover { border-color: rgba(255,255,255,.28); box-shadow: 0 18px 32px -18px rgba(0,0,0,.7); }
[data-theme="dark"] .shot-del {
  background: rgba(28,28,33,.82);
  color: var(--color-text-soft);
}
[data-theme="dark"] .shots-row::-webkit-scrollbar-track { background: rgba(255,255,255,.07); }
[data-theme="dark"] .shots-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); }

/* —— 通知条 —— */
[data-theme="dark"] .notice-tag {
  background: rgba(84,132,255,.16);
  color: #a8c0ff;
}

/* —— 用户中心 —— */
[data-theme="dark"] .uc-menu a:hover { background: rgba(84,132,255,.14); }
[data-theme="dark"] .uc-wallet-ico.orange { background: rgba(255,149,0,.16); color: #ffb340; }
[data-theme="dark"] .uc-wallet-ico.purple {
  background: rgba(84,132,255,.16);
  color: #a8c0ff;   /* 原紫色在深色下发闷，统一收进品牌蓝 */
}
[data-theme="dark"] .uc-mini-bar span {
  background: linear-gradient(90deg, #4d7dff, #7fa5ff);
}

/* —— 表格 / 分页 —— */
[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .pager-btn {
  background: rgba(255,255,255,.055);
  border-color: var(--color-border-soft);
}
[data-theme="dark"] a.pager-btn:hover {
  background: rgba(84,132,255,.16);
  border-color: rgba(84,132,255,.45);
  color: #a8c0ff;
}

/* —— 提示条 / 弹窗 —— */
[data-theme="dark"] .toast { background: rgba(30,30,36,.96); }
[data-theme="dark"] .toast-success { color: #4ade80; }
[data-theme="dark"] .toast-warning { color: #ffb340; }
[data-theme="dark"] .toast-error   { color: #ff7a72; }
[data-theme="dark"] .dlg-ic-info   { color: #a8c0ff; }
[data-theme="dark"] .dlg-ic-success{ color: #4ade80; }
[data-theme="dark"] .dlg-ic-warning{ color: #ffb340; }
[data-theme="dark"] .dlg-ic-error  { color: #ff7a72; }
[data-theme="dark"] .dlg-spin { border-color: rgba(84,132,255,.22); border-top-color: #4d7dff; }

/* —— 支付弹窗：二维码必须保留白底（扫码识别需要），仅调整外框 —— */
[data-theme="dark"] .pay-qr-wrap { border-color: rgba(255,255,255,.18); }
[data-theme="dark"] .pay-amount { color: var(--color-text); }

/* —— 表单控件：让输入框与卡片有可辨认的边界 —— */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: #16161b;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder { color: var(--color-text-mute); }
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  background: #1b1b21;
  border-color: rgba(84,132,255,.65);
  box-shadow: 0 0 0 3px rgba(84,132,255,.14);
}