/* ============================================================
 * SubGoNow Design System — 可信蓝 + 翠绿
 * 近黑底 + 品牌蓝主色 + 翠绿点缀，满屏铺开
 * 纯样式层（零构建），与 Tailwind CDN 共存
 * 改配色务必同步 theme.js 的 brand/green 色板，并跑 scripts/contrast-check.js
 * ============================================================ */

:root {
  /* 主色：可信蓝（金融/支付场景惯用的信任色） */
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
  --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;
  /* 辅助色：翠绿（成功 / 完成） */
  --green-400:#34d399; --green-500:#10b981; --green-600:#059669;
  --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669;
  /* 语义色：警示橙（仅用于 warn 状态，不参与品牌表达） */
  --warn-400:#fb923c; --warn-500:#f97316; --warn-700:#c2410c;
  /* 黑系 */
  --ink-900:#0a0a0a; --ink-800:#121212; --ink-700:#1a1a1a; --ink-600:#262626;
  /* ink-400 仅用于「弱化文字」，原先 #737373 在卡片底(#1a1a1a)上仅 3.7:1，提升到 5.4:1（WCAG AA） */
  --ink-500:#404040; --ink-400:#8f8f8f; --ink-300:#a3a3a3; --ink-200:#d4d4d4; --ink-100:#f5f5f5;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  /* 顶栏/吸顶导航底色（随主题翻转） */
  --sg-nav-bg: rgba(10,10,10,.72);
  --radius-card: 18px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.6), 0 22px 48px -20px rgba(37,99,235,.55);

  /* ---------- 后台层级 / 尺寸（全局唯一真源，勿在别处硬编码） ----------
   * 分层铁律：抽屉 < 弹窗 < 轻提示。抽屉里点出来的弹窗必须盖在抽屉之上。
   * 侧边栏宽度只在这里定义：抽屉默认宽度 = 视口宽度 − 侧边栏宽度。 */
  --sg-sidebar-w: 224px;
  --sg-drawer-min: 380px;
  --sg-z-drawer: 80;
  --sg-z-modal: 120;
  --sg-z-dialog: 200;
  --sg-z-toast: 300;
  /* 表格粘性「操作」列底色：必须与行底色一致，否则横向滚动时下层内容会透出来 */
  --row-bg: #191919;
  --row-bg-alt: #1c1c1c;
  --row-bg-hover: #1c2331;
  --row-bg-head: #121212;
}

/* ---------- 基础 ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  color: var(--ink-100);
  background-color: var(--ink-900);
  background-image:
    radial-gradient(1400px 700px at 85% -12%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(1200px 640px at -8% -8%, rgba(16,185,129,.11), transparent 55%),
    radial-gradient(900px 500px at 50% 120%, rgba(59,130,246,.06), transparent 60%),
    linear-gradient(rgba(59,130,246,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,.03) 1px, transparent 1px);
  background-size: auto, auto, auto, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 0 0, -1px -1px, -1px -1px;
  background-attachment: fixed;
  min-height: 100vh;
}
/* body 自身带 Tailwind text-slate-900/gray-900 类时，保持主题默认文字色：
 * 暗色 → ink-100（原先靠上方无作用域的 !important 覆写压制，收窄作用域后需显式还原）；
 * 明亮后台/浅色前台由后置的 body.sg-dense / html.sg-light body 规则覆盖为深色。 */
body.text-slate-900, body.text-gray-900 { color: var(--ink-100); }
/* 后台等密集界面弱化网格 */
body.sg-dense {
  background-image:
    radial-gradient(1100px 460px at 88% -15%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(900px 440px at -10% -10%, rgba(16,185,129,.07), transparent 55%);
  background-attachment: fixed;
}

/* 满屏光斑动画层 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(59,130,246,.04), transparent 70%),
    radial-gradient(500px 250px at 80% 70%, rgba(16,185,129,.03), transparent 70%);
  animation: sg-drift 20s ease-in-out infinite alternate;
}
@keyframes sg-drift {
  0% { transform: translate(0,0); }
  100% { transform: translate(-30px, 20px); }
}

::selection { background: rgba(59,130,246,.35); }

/* ---------- 导航 ---------- */
/* 内容容器：全宽铺开（不设最大宽度），靠左右留白保证窄屏不拥挤 */
.sg-container { width: 100%; max-width: none; margin: 0; }
/* 表单类页面：页面容器不设宽度上限，但表单卡片自身限宽居中（避免输入框被无限拉长） */
.sg-form-card { margin-left: auto; margin-right: auto; max-width: 680px; }
/* 文档型页面（使用指南）正文更宽，阅读更舒适 */
.sg-form-card.wide { max-width: 940px; }
/* 满屏全宽分区：突破容器限宽 */
.sg-full { width: 100vw; margin-left: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
/* 满屏 Hero */
.sg-hero { min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* 首页专用：导航浮在首屏 banner 之上，形成透明覆盖层。
   body[data-nav-overlay] 只挂在 views/pages/index.ejs，其余页面不受影响。
   hero 本身即满屏 banner，导航完全透明地叠在它上面，不加深额外渐变——
   品牌文字用的 --ink-100 随主题翻转（暗色=白、亮色=深蓝），在两种模式下都自洽。
   不再额外加 padding-top：hero 是 flex 居中，导航绝对定位已脱离文档流，
   再加内边距会把居中内容整体下压（小屏尤其明显）；居中后首个元素距顶远大于导航高度，不会遮挡。 */
body[data-nav-overlay] .sg-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
body[data-nav-overlay] .sg-hero { min-height: 100vh; }
.sg-nav {
  /* 顶栏随页面滚动（参考 bewilder.ai：不吸顶固定），且无背景色、无下边框 */
  position: relative;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sg-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: -.02em; font-size: 17px; color: var(--ink-100);
  transition: transform .2s;
}
.sg-logo:hover { transform: translateX(2px); }
.sg-logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: #0a0a0a; font-size: 13px; font-weight: 900; letter-spacing: .02em;
}

/* 品牌 logo 位（前台/后台 logo 与字母徽标共用的尺寸与圆角，保证视觉一致） */
.sg-brand-logo {
  width: 34px; height: 34px; object-fit: contain; flex: none;
  border-radius: 10px; vertical-align: middle;
}
.sg-topbar-logo .sg-brand-logo { width: 28px; height: 28px; border-radius: 8px; }
.sg-brand-logo-footer { width: 24px; height: 24px; border-radius: 7px; }
.sg-navlink { color: var(--ink-300); font-size: 14px; font-weight: 500; transition: color .15s; position: relative; }
.sg-navlink:hover { color: var(--brand-400); }
.sg-navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--brand-400); transform: scaleX(0); transition: transform .2s; }
.sg-navlink:hover::after { transform: scaleX(1); }

/* ---------- 容器/卡片 ---------- */
.sg-card {
  background: linear-gradient(180deg, rgba(26,26,26,.85), rgba(18,18,18,.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sg-card:hover {
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 20px 48px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(59,130,246,.06);
}
.sg-card-pad { padding: 36px; }
.sg-soft {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  transition: border-color .15s, background .15s;
}
.sg-soft:hover { border-color: rgba(59,130,246,.2); background: rgba(59,130,246,.04); }
.sg-grad-text {
  background: linear-gradient(120deg, var(--brand-400), var(--green-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 渐变描边卡片（高亮/主推） */
.sg-card-glow {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ink-700), var(--ink-700)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.4), rgba(16,185,129,.3)) border-box;
}

/* ---------- 按钮 ---------- */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: 13px; font-size: 14px; font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s, border-color .15s, color .15s;
  cursor: pointer; white-space: nowrap; user-select: none;
}
.sg-btn:disabled { opacity: .5; cursor: not-allowed; }
.sg-btn-primary {
  /* 品牌蓝实底 CTA：白字在 brand-600~700 上对比度 5.9~8.4:1（AA），且更贴近支付/金融的信任观感 */
  color: #fff;
  background: #3a83f7;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.sg-btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.sg-btn-primary:not(:disabled):active { transform: translateY(0); }
.sg-btn-green {
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--green-400) 0%, var(--green-500) 100%);
  box-shadow: 0 8px 22px -8px rgba(16,185,129,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.sg-btn-green:not(:disabled):hover { transform: translateY(-1px); }
.sg-btn-dark {
  color: var(--brand-400); background: var(--ink-600); border: 1px solid var(--line-strong);
}
.sg-btn-dark:not(:disabled):hover { transform: translateY(-1px); border-color: var(--brand-500); color: var(--brand-300); }
.sg-btn-ghost {
  color: var(--ink-200); background: var(--ink-700); border: 1px solid var(--line-strong);
}
.sg-btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-400); background: var(--ink-600); }
.sg-btn-danger {
  color: #fda4af; background: var(--ink-700); border: 1px solid rgba(244,63,94,.4);
}
.sg-btn-danger:hover { background: rgba(244,63,94,.12); border-color: #f43f5e; color: #fb7185; }
.sg-btn-sm { height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }
.sg-btn-block { width: 100%; }

/* ---------- 表单 ---------- */
.sg-input, .sg-textarea, .sg-select {
  width: 100%; border: 1px solid var(--line-strong); background: var(--ink-800);
  border-radius: 12px; color: var(--ink-100); font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sg-input { height: 44px; padding: 0 14px; }
.sg-select { height: 40px; padding: 0 12px; }
.sg-textarea { padding: 12px 14px; }
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--ink-400); }
.sg-input:focus, .sg-textarea:focus, .sg-select:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(59,130,246,.16);
}
.sg-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-200); margin-bottom: 8px; }

/* 可勾选卡片（套餐/渠道/协议） */
.sg-pick {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px;
  background: var(--ink-700); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.sg-pick:hover { border-color: rgba(59,130,246,.5); }
/* 选中态由 .is-active 驱动（不再依赖原生 radio 的 :has(input:checked)） */
.sg-pick.is-active {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(16,185,129,.06));
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
/* 支付方式图标：mask 着色 —— 形状取自 SVG，颜色由 background-color 决定。
   不直接用 <img> 引用 SVG 的原因：外部图片形式的 SVG 不继承 CSS color，颜色不可控；
   改成 mask 后每个图标都是扁平单色（内部无渐变、无多色填充），
   支付宝/微信填各自品牌色，无品牌色的通用卡图标回落主题中性色。 */
.sg-pick-icon {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: block; background-color: var(--ic-card);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  /* 默认形状用通用卡图标：后端返回未知 icon 值时回落显示卡形状，
     而不是一个空 span 渲成的纯色方块。 */
  -webkit-mask-image: url("/assets/pay-icons/card.svg");
  mask-image: url("/assets/pay-icons/card.svg");
}
/* 品牌色：支付宝 / 微信。深色主题下品牌原色对比度偏低，取稍亮的同色系；
   浅色主题用官方原色。图标形状仍取自 pay-icons/ 下的 SVG。 */
:root {
  --ic-alipay: #2E90FA;
  --ic-wechat: #07C160;
  --ic-card: var(--ink-300);
}
html.sg-light {
  --ic-alipay: #1677FF;
  --ic-wechat: #07C160;
  --ic-card: #94a3b8;
}
.sg-pick-icon.alipay {
  background-color: var(--ic-alipay);
  -webkit-mask-image: url("/assets/pay-icons/alipay.svg");
  mask-image: url("/assets/pay-icons/alipay.svg");
}
.sg-pick-icon.wechat {
  background-color: var(--ic-wechat);
  -webkit-mask-image: url("/assets/pay-icons/wechat.svg");
  mask-image: url("/assets/pay-icons/wechat.svg");
}

/* ---------- 徽章 ---------- */
.sg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.sg-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sg-badge.plain::before { display: none; }
.sg-badge-neutral { background: rgba(255,255,255,.08); color: var(--ink-300); }
.sg-badge-success { background: rgba(16,185,129,.15); color: var(--green-400); }
.sg-badge-warn    { background: rgba(251,146,60,.15); color: var(--warn-400); }
.sg-badge-danger  { background: rgba(244,63,94,.15); color: #fb7185; }
.sg-badge-info    { background: rgba(56,189,248,.12); color: #38bdf8; }
.sg-badge-brand   { background: rgba(59,130,246,.15); color: var(--brand-400); }
.sg-badge-violet  { background: rgba(167,139,250,.15); color: #a78bfa; }

/* ---------- 提示条 ---------- */
.sg-alert { border-radius: 12px; padding: 10px 14px; font-size: 13.5px; }
.sg-alert-error { background: rgba(244,63,94,.1); color: #fda4af; border: 1px solid rgba(244,63,94,.3); }
.sg-alert-ok    { background: rgba(16,185,129,.1); color: var(--green-400); border: 1px solid rgba(16,185,129,.3); }

/* ---------- 流程条 ---------- */
.sg-steps { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.sg-steps .seg { flex: 1; height: 2px; border-radius: 2px; background: var(--ink-600); }
.sg-steps .seg.done { background: linear-gradient(90deg, var(--brand-500), var(--green-500)); }
.sg-steps .node { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sg-steps .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: var(--ink-600); color: var(--ink-400);
}
.sg-steps .node.active .dot { background: linear-gradient(135deg,var(--brand-400),var(--green-500)); color: #0a0a0a; box-shadow: 0 6px 16px -6px rgba(59,130,246,.8); }
.sg-steps .node.active .lbl { color: var(--ink-100); font-weight: 700; }
.sg-steps .node.done .dot { background: var(--brand-500); color: #0a0a0a; }
.sg-steps .node .lbl { color: var(--ink-400); }
.sg-steps .node.done .lbl { color: var(--brand-400); }

/* ---------- 纵向时间线（进度页） ---------- */
.sg-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sg-timeline::before {
  content: ''; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--brand-600), var(--ink-600));
}
.sg-timeline li { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.sg-tl-dot {
  z-index: 1; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--ink-800); border: 2px solid var(--ink-600); color: var(--ink-400);
}
.sg-timeline li.done .sg-tl-dot { background: var(--brand-500); border-color: var(--brand-500); color: #0a0a0a; }
.sg-timeline li.running .sg-tl-dot {
  border-color: var(--green-500); color: var(--green-400);
  box-shadow: 0 0 0 5px rgba(16,185,129,.15);
}
.sg-timeline li.failed .sg-tl-dot { background: #f43f5e; border-color: #f43f5e; color: #fff; }
.sg-tl-label { font-size: 14px; color: var(--ink-400); }
.sg-timeline li.done .sg-tl-label { color: var(--ink-200); }
.sg-timeline li.running .sg-tl-label { color: var(--ink-100); font-weight: 600; }
.sg-timeline li.failed .sg-tl-label { color: #fda4af; font-weight: 600; }

/* ---------- 旋转/动画 ---------- */
.sg-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--ink-600); border-top-color: var(--brand-400);
  animation: sg-spin .75s linear infinite;
}
.sg-spinner.lg { width: 48px; height: 48px; border-width: 4px; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
@keyframes sg-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sg-pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.fade-up { animation: sg-fade-up .5s cubic-bezier(.22,.61,.36,1) both; }
.fade-up.d1 { animation-delay: .06s; } .fade-up.d2 { animation-delay: .12s; }
.fade-up.d3 { animation-delay: .18s; } .fade-up.d4 { animation-delay: .24s; }
.pop { animation: sg-pop .35s cubic-bezier(.22,.61,.36,1) both; }

/* 大号结果图标底盘 */
.sg-result-icon {
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center; font-size: 30px; color: #0a0a0a;
}
.sg-result-success { background: linear-gradient(135deg,var(--green-400),var(--green-600)); box-shadow: 0 14px 30px -12px rgba(16,185,129,.6); }
.sg-result-danger  { background: linear-gradient(135deg,#fb7185,#e11d48); box-shadow: 0 14px 30px -12px rgba(225,29,72,.6); color:#fff; }
.sg-result-warn    { background: linear-gradient(135deg,var(--warn-400),var(--warn-500)); box-shadow: 0 14px 30px -12px rgba(249,115,22,.6); }
.sg-result-brand   { background: linear-gradient(135deg,var(--brand-400),var(--green-500)); box-shadow: 0 14px 30px -12px rgba(59,130,246,.6); }
.sg-result-muted   { background: var(--ink-600); color: var(--ink-400); }

/* ---------- 小元素 ---------- */
.sg-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--ink-800); border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 1px 7px; font-size: 12px; color: var(--brand-400);
}
.sg-kbd {
  background: var(--ink-800); border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 7px; font-size: 12px; color: var(--ink-200);
}
/* 页脚链接：单个词条不拆行（"使用帮助"不被拆成两行），整组不够宽时换行而不是溢出 */
.sg-footer a { white-space: nowrap; }
.sg-footer .flex.items-center.gap-5 { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.sg-footer {
  padding: 40px 24px; text-align: center; font-size: 12px; color: var(--ink-400);
  position: relative;
}

/* 二维码外框 */
.sg-qr {
  display: inline-block; padding: 16px; border-radius: 18px; background: #fff;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
}
.sg-qr img, .sg-qr canvas { display: block; border-radius: 8px; }

/* 信任点 */
.sg-trust { display: flex; gap: 10px; font-size: 13px; color: var(--ink-300); }
.sg-trust .tick {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: rgba(16,185,129,.18); color: var(--green-400); display: grid; place-items: center; font-size: 10px; font-weight: 900;
}

/* ============================================================
 * 管理后台
 * ============================================================ */
.sg-shell { display: flex; min-height: 100vh; }
.sg-sidebar {
  width: var(--sg-sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, #050505 0%, #0d0d0d 100%);
  border-right: 1px solid var(--line-strong);
  color: var(--ink-300); display: flex; flex-direction: column; padding: 18px 14px;
}
.sg-sidebar .sg-logo { color: var(--ink-100); }
.sg-side-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink-300);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.sg-side-btn:hover { background: rgba(59,130,246,.08); color: var(--brand-400); }
.sg-side-btn.active {
  color: #0a0a0a; font-weight: 800;
  background: linear-gradient(135deg, var(--brand-400), var(--green-500));
  box-shadow: 0 8px 20px -10px rgba(59,130,246,.8);
}
.sg-side-btn .ic { width: 17px; text-align: center; opacity: .95; }
.sg-main { flex: 1; min-width: 0; padding: 26px 30px; }
.sg-stat {
  background: var(--ink-700); border: 1px solid var(--line-strong); border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--shadow-card);
}
.sg-stat .k { font-size: 12.5px; color: var(--ink-400); }
.sg-stat .v { font-size: 26px; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }

/* 轻量元信息条：用户中心「我的账户」页头资料。
 * 定位：只读的次要信息，刻意不用卡片 / 阴影 / 大数字，仅小字 + 细分隔线，避免与统计卡抢层级。 */
.sg-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.sg-meta-item {
  display: inline-flex; align-items: baseline; gap: 7px; min-width: 0;
  padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--line);
}
.sg-meta-item:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.sg-meta-item .k { font-size: 12.5px; color: var(--ink-400); white-space: nowrap; }
.sg-meta-item .v { font-size: 13.5px; font-weight: 600; color: var(--ink-200); word-break: break-all; }

/* 数据表 */
.sg-table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--ink-700); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-weight: 700; font-size: 12px; color: var(--ink-400);
  background: var(--ink-800); padding: 11px 14px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-200); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: rgba(59,130,246,.05); }

/* 后台输入控件统一 */
.sg-admin-input {
  display: block;
  height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px;
  border: 1px solid var(--line-strong); background: var(--ink-800); color: var(--ink-100);
  transition: border-color .15s, box-shadow .15s;
}
.sg-admin-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* 后台 JS 动态徽章（badge() 输出 .badge + tailwind 色板类） */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .85; }

/* 后台卡片内表格包裹 */
.sg-card .overflow-x-auto { border: 1px solid var(--line-strong); border-radius: 12px; }
.sg-main h3 { font-size: 15px; font-weight: 800; color: var(--ink-100); }

/* 登录页 */
.sg-login-bg {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(1000px 560px at 80% -10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(16,185,129,.18), transparent 55%),
    var(--ink-900);
}

/* ============================================================
 * 后台 UI 质量增强（保留原配色 / 圆角 / 阴影，仅强化层级与状态）
 * ============================================================ */
/* 统计卡：顶部色条 + 悬浮上浮 + 零值弱化 */
.sg-stat { position: relative; overflow: hidden; }
.sg-stat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--green-500));
  opacity: .6;
}
.sg-stat:hover { border-color: rgba(59,130,246,.3); transform: translateY(-2px); }
.sg-stat .v { transition: color .15s; }
.sg-stat .v.is-zero { color: var(--ink-400); font-weight: 700; }

/* 卡片内区块标题：前置色点 + 更强字重与间距 */
.sg-main .sg-card > h3:first-child,
.sg-main .sg-card .sg-card-head { padding-left: 14px; position: relative; }
.sg-main .sg-card > h3:first-child::before,
.sg-main .sg-card .sg-card-head::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-400), var(--green-500));
}
.sg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sg-card-head h3 { font-size: 15px; font-weight: 800; color: var(--ink-100); }

/* 数据表：表头更醒目 + 斑马纹 + 空态单元格 */
table.data th {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-300); background: var(--ink-900);
  position: sticky; top: 0; z-index: 1;
}
table.data tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
table.data tbody tr:hover { background: rgba(59,130,246,.06); }
table.data td.empty-cell,
table.data tr td:only-child { text-align: center; color: var(--ink-400); font-size: 12.5px; padding: 28px 14px; }
table.data td.empty-cell::before {
  content: '∅'; display: block; font-size: 22px; color: var(--ink-600); margin-bottom: 4px;
}

/* —— 列表「操作」列固定在右侧 ——
 * 表格横向滚动（列多 / 窄屏）时，操作列始终贴在右边缘不随内容平移。
 * 用表级类 sg-sticky-actions 显式声明（不是所有表都有操作列）。
 * 底色必须与所在行一致，否则滚动时下面的单元格会透出来（含斑马纹 / hover 三态）。 */
table.data.sg-sticky-actions tr > th:last-child,
table.data.sg-sticky-actions tr > td:last-child:not([colspan]) {
  position: sticky; right: 0; z-index: 2;
  background: var(--row-bg);
  box-shadow: -12px 0 12px -12px rgba(15,23,42,.22);
}
table.data.sg-sticky-actions tr > th:last-child {
  /* 表头同时 sticky top + right，层级需高于普通表头（z-index:1）与数据单元格 */
  z-index: 3; background: var(--row-bg-head);
}
table.data.sg-sticky-actions tr:nth-child(even) > td:last-child:not([colspan]) {
  background: var(--row-bg-alt);
}
table.data.sg-sticky-actions tr:hover > td:last-child:not([colspan]) {
  background: var(--row-bg-hover);
}

/* 工具栏 / 筛选条：统一分组与分隔 */
.sg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-toolbar .sg-sep { width: 1px; height: 24px; background: var(--line-strong); margin: 0 2px; }
.sg-toolbar .sg-spacer { flex: 1; }

/* 后台提示条：信息 / 危险操作统一层级 */
.sg-notice {
  padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--ink-800); color: var(--ink-200); font-size: 13px; line-height: 1.65;
}
.sg-notice-warn { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: var(--ink-200); }
.sg-notice strong { color: var(--ink-100); }

/* 后台命令结果区：固定最小高度，避免执行前后页面跳动 */
.sg-output {
  min-height: 128px; overflow: auto; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--ink-900); color: var(--ink-200);
}
.sg-output pre {
  min-height: 126px; margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sg-output:empty::before, .sg-output pre:empty::before { content: '等待预览或执行结果'; color: var(--ink-400); }

/* 分页控件：按钮化 + 信息强调 */
.sg-pager { display: flex; align-items: center; gap: 8px; }
.sg-pager .page-info { font-size: 12.5px; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* 表单栅格：一行一个字段，label 左侧固定宽度 */
.sg-form-grid { display: flex; flex-direction: column; gap: 14px; }
.sg-form-grid > label, .sg-form-grid > .sg-field {
  display: grid; grid-template-columns: 130px 1fr; gap: 2px 16px;
  align-items: center; font-size: 12.5px; color: var(--ink-300);
}
.sg-form-grid > label .sg-admin-input, .sg-form-grid > .sg-field .sg-admin-input { width: 100%; font-weight: 400; color: var(--ink-100); }
.sg-form-grid > label .sg-field-hint, .sg-form-grid > .sg-field .sg-field-hint { grid-column: 2; margin-top: 2px; }
.sg-form-grid > label:has(textarea), .sg-form-grid > .sg-field:has(textarea) { align-items: start; }
.sg-form-grid .col-span-2 { /* no-op: 单列布局下不跨列 */ }

/* 后台 radio 组（segmented）：替代选项 ≤3 的下拉框 */
.sg-radio-group { display: inline-flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.sg-radio-group .sg-radio {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--ink-800);
  font-size: 13.5px; color: var(--ink-300);
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.sg-radio-group .sg-radio:hover { border-color: var(--brand-500); }
.sg-radio-group .sg-radio input { accent-color: var(--brand-500); margin: 0; }
.sg-radio-group .sg-radio:has(input:checked) {
  border-color: var(--brand-500); color: var(--ink-100);
  background: rgba(59,130,246,.12); font-weight: 600;
}
/* 行内小尺寸变体（表格行内使用） */
.sg-radio-group.sg-radio-sm .sg-radio { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 5px; }

/* 敏感字段提示 chip */
.sg-sensitive-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  background: rgba(244,63,94,.1); color: #fda4af; border: 1px solid rgba(244,63,94,.25);
}

/* 表格骨架加载态 */
.sg-skeleton { background: linear-gradient(90deg, var(--ink-800) 25%, var(--ink-700) 37%, var(--ink-800) 63%);
  background-size: 400% 100%; animation: sg-shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes sg-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sg-skeleton-row { height: 40px; }
.sg-skeleton-cell { display: inline-block; height: 14px; margin: 13px 0; border-radius: 4px; }

/* 行内操作按钮组：紧凑链接风格 */
.sg-row-actions { display: inline-flex; align-items: center; gap: 8px; }
.sg-row-actions button, .sg-row-actions a {
  font-size: 12px; color: var(--ink-400); padding: 2px 0; background: none; border: 0; cursor: pointer; transition: color .12s;
}
.sg-row-actions button:hover { color: var(--brand-400); }
.sg-row-actions .act-danger:hover { color: #fb7185; }
.sg-row-actions .act-ok:hover { color: var(--green-400); }

/* 配置区块间距强化：卡片之间明确呼吸 */
#tab-proxy .sg-card + .sg-card,
#tab-orders .sg-card + .sg-card,
#tab-exceptions .sg-card + .sg-card { margin-top: 4px; }

/* ============================================================
 * 深色主题全局覆写：把旧的浅色 slate/gray/white 工具类整体映射到可信蓝＋翠绿
 * （Tailwind CDN 工具类与本文件同源顺序，此处后置生效）
 * ============================================================ */
/* 文字色：slate/gray 色阶 → 深底浅字
 * 全部收敛到 ink-100/200/300（在卡片底 #1a1a1a 上分别约 16:1 / 11.7:1 / 6.9:1，均满足 AA）。
 * 原先 slate-400/300 落到 ink-400(#737373)=3.7:1、slate-200 落到 ink-500(#404040)=1.9:1，肉眼几乎不可见。
 * ⚠️ 必须限定在 body:not(.sg-dense)：这些 !important 一旦泄漏到明亮后台，
 *    会把 body 自身（带 text-slate-900 类）染成 #f5f5f5，所有无显式色类的文本白字白底不可见。 */
body:not(.sg-dense) .text-slate-900, body:not(.sg-dense) .text-gray-900{ color:var(--ink-100) !important; }
body:not(.sg-dense) .text-slate-800, body:not(.sg-dense) .text-gray-800{ color:var(--ink-100) !important; }
body:not(.sg-dense) .text-slate-700, body:not(.sg-dense) .text-gray-700{ color:var(--ink-200) !important; }
body:not(.sg-dense) .text-slate-600, body:not(.sg-dense) .text-gray-600{ color:var(--ink-300) !important; }
body:not(.sg-dense) .text-slate-500, body:not(.sg-dense) .text-gray-500{ color:var(--ink-300) !important; }
body:not(.sg-dense) .text-slate-400, body:not(.sg-dense) .text-gray-400{ color:var(--ink-300) !important; }
body:not(.sg-dense) .text-slate-300, body:not(.sg-dense) .text-gray-300{ color:var(--ink-200) !important; }
body:not(.sg-dense) .text-slate-200, body:not(.sg-dense) .text-gray-200{ color:var(--ink-200) !important; }
/* 强调色保持可读性：indigo→brand 黄 */
body:not(.sg-dense) .text-indigo-600{ color:var(--brand-400) !important; }
body:not(.sg-dense) .text-emerald-600{ color:var(--green-400) !important; }
body:not(.sg-dense) .text-green-600{ color:var(--green-400) !important; }
body:not(.sg-dense) .text-emerald-500{ color:var(--green-400) !important; }
body:not(.sg-dense) .text-green-500{ color:var(--green-400) !important; }
/* brand 深色阶在黑底上不可见，提亮到 400 */
body:not(.sg-dense) .text-brand-700, body:not(.sg-dense) .text-brand-600, body:not(.sg-dense) .text-brand-500{ color:var(--brand-400) !important; }
/* 红/玫红深色阶提亮 */
body:not(.sg-dense) .text-rose-600, body:not(.sg-dense) .text-red-600{ color:#fda4af !important; }
body:not(.sg-dense) .text-rose-700, body:not(.sg-dense) .text-red-700{ color:#fb7185 !important; }
body:not(.sg-dense) .text-emerald-700, body:not(.sg-dense) .text-green-700{ color:var(--green-400) !important; }
body:not(.sg-dense) .text-amber-700{ color:var(--warn-400) !important; }

/* 背景色：白/浅灰 → 深色卡片底 */
.bg-white{ background:var(--ink-700) !important; }
.bg-slate-50,.bg-gray-50{ background:var(--ink-800) !important; }
.bg-slate-100,.bg-gray-100{ background:var(--ink-700) !important; }
.bg-slate-200,.bg-gray-200{ background:var(--ink-600) !important; }

/* 边框：浅灰边 → 深色半透边 */
.border-gray-200,.border-slate-200,.border-gray-300,.border-slate-300{ border-color:var(--line-strong) !important; }

/* ============================================================
 * 顶部栏配色变量（移动端顶栏与抽屉侧边栏共用，保持一体）
 * 顶部栏本身仅移动端可见（见下方 .sg-topbar { display:none }），
 * 桌面端靠左侧栏承担品牌与身份操作，不再另设顶部栏
 * ============================================================ */
.sg-shell {
  --topbar-bg: var(--ink-700);
  --topbar-line: var(--line-strong);
  --topbar-txt: var(--ink-100);
  --topbar-sub: var(--ink-300);
  --topbar-mute: rgba(148,163,184,.12);
  --topbar-mute-line: rgba(148,163,184,.22);
  --topbar-mute-strong: rgba(148,163,184,.2);
  --topbar-mute-strong-line: rgba(148,163,184,.34);
  --topbar-danger: #e11d48;
}
.sg-topbar { display: none; }

.sg-icon-btn { display: none; }
.sg-drawer-mask { display: none; }

@media (max-width: 860px) {
  /* 移动端顶栏：汉堡唤出抽屉 + 品牌（页标题/身份/退出在桌面端由侧边栏承担） */
  .sg-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky; top: 0; z-index: 40;
  }
  .sg-topbar-page, .sg-topbar-who, .sg-topbar-logout, .sg-topbar-theme { display: none; }
  .sg-icon-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
    background: var(--topbar-mute); border: 1px solid var(--topbar-mute-line);
    cursor: pointer; transition: background .15s;
  }
  .sg-icon-btn:hover { background: var(--topbar-mute-strong); }
  .sg-icon-btn span {
    display: block; width: 18px; height: 2px; margin: 0 auto;
    background: var(--topbar-txt); border-radius: 1px;
  }
  .sg-topbar-logo {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: var(--topbar-txt); text-decoration: none;
  }
  .sg-topbar-logo .sg-logo-mark {
    width: 26px; height: 26px; font-size: 11px;
    background: linear-gradient(135deg, #0f172a, #334155); color: #fff;
  }

  /* 侧边栏：fixed 抽屉，默认 translateX 隐藏；配色跟随顶部栏变量 */
  .sg-shell { flex-direction: column; }
  .sg-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; height: 100vh; height: 100dvh;
    flex-direction: column; overflow-y: auto;
    background: var(--topbar-bg); border-right: 1px solid var(--topbar-line);
    padding: 18px 14px; z-index: 50;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 40px rgba(15,23,42,.4);
  }
  .sg-sidebar.open { transform: translateX(0); }
  /* 抽屉打开时遮罩显现 */
  .sg-drawer-mask { display: block; }
  .sg-drawer-mask {
    position: fixed; inset: 0; top: 0; bottom: 0;
    background: rgba(15,23,42,.55); z-index: 45;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  .sg-drawer-mask.show { opacity: 1; pointer-events: auto; }

  .sg-main { padding: 18px 14px; }
  .sg-card-pad { padding: 22px; }
  .sg-container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
 * 满屏美化工具类
 * ============================================================ */
/* 全宽分区：带上下内边距 */
.sg-section { width: 100%; padding: 64px 0; }
.sg-section-tight { padding: 56px 0; }

/* 渐变分割线 */
.sg-divider {
  width: 100%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}
.sg-divider-glow {
  width: 120px; height: 2px; border: 0; border-radius: 2px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--brand-500), var(--green-500), transparent);
}

/* 装饰光球 */
.sg-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(60px); opacity: .5;
}
.sg-orb-brand { background: radial-gradient(circle, rgba(59,130,246,.4), transparent 70%); }
.sg-orb-amber { background: radial-gradient(circle, rgba(59,130,246,.4), transparent 70%); } /* 兼容旧类名 */
.sg-orb-green { background: radial-gradient(circle, rgba(16,185,129,.3), transparent 70%); }

/* 大号展示文字 */
.sg-mega { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; }
.sg-mega-sub { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; }

/* 渐变胶囊按钮 */
.sg-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); color: var(--brand-400);
  transition: all .2s;
}
.sg-pill:hover { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.35); transform: translateY(-1px); }

/* 满屏渐变带 */
.sg-band {
  margin-left: calc(50% - 50vw);
  padding: 80px calc(50vw - 50% + 24px);
  position: relative; overflow: hidden;
}
.sg-band-dark { background: linear-gradient(180deg, rgba(10,10,10,.4), rgba(18,18,18,.6)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* 入场动画增强 */
@keyframes sg-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes sg-scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes sg-glow-pulse { 0%, 100% { box-shadow: 0 0 20px -4px rgba(59,130,246,.3); } 50% { box-shadow: 0 0 36px -4px rgba(59,130,246,.5); } }
.slide-up { animation: sg-slide-up .6s cubic-bezier(.22,.61,.36,1) both; }
.scale-in { animation: sg-scale-in .4s cubic-bezier(.22,.61,.36,1) both; }
.glow-pulse { animation: sg-glow-pulse 3s ease-in-out infinite; }
.slide-up.d1 { animation-delay: .08s; } .slide-up.d2 { animation-delay: .16s; }
.slide-up.d3 { animation-delay: .24s; } .slide-up.d4 { animation-delay: .32s; }
.slide-up.d5 { animation-delay: .40s; } .slide-up.d6 { animation-delay: .48s; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

/* ============================================================
 * 后台浅色主题（body.sg-dense）—— 采用 Tailwind 默认 slate 配色，中性地收敛品牌色
 * 仅作用于管理后台；前台深色主题不受影响。
 * 高特异性 + !important 覆盖上方全局深色映射。
 * ============================================================ */
body.sg-dense {
  background: #f8fafc;
  color: #0f172a;
  min-height: 100vh;
}

/* —— 还原 Tailwind 默认文字色（覆盖全局 slate→ink 映射） —— */
body.sg-dense .text-slate-900, body.sg-dense .text-gray-900 { color: #0f172a !important; }
body.sg-dense .text-slate-800, body.sg-dense .text-gray-800 { color: #1e293b !important; }
body.sg-dense .text-slate-700, body.sg-dense .text-gray-700 { color: #334155 !important; }
body.sg-dense .text-slate-600, body.sg-dense .text-gray-600 { color: #475569 !important; }
body.sg-dense .text-slate-500, body.sg-dense .text-gray-500 { color: #64748b !important; }
body.sg-dense .text-slate-400, body.sg-dense .text-gray-400 { color: #94a3b8 !important; }
body.sg-dense .text-slate-300, body.sg-dense .text-gray-300 { color: #cbd5e1 !important; }
/* white / 半透白 → slate（登录页文字在浅底需深色） */
body.sg-dense .text-white { color: #0f172a !important; }
body.sg-dense .text-white\/40 { color: #94a3b8 !important; }
body.sg-dense .text-white\/30 { color: #cbd5e1 !important; }

/* —— 后台明亮模式：站内强调色统一收敛到 slate-900（后台为中性运营界面） —— */
body.sg-dense .text-brand-400, body.sg-dense .text-brand-300, body.sg-dense .text-brand-500,
body.sg-dense .text-indigo-600, body.sg-dense .text-emerald-600, body.sg-dense .text-green-600,
body.sg-dense .text-emerald-500, body.sg-dense .text-green-500, body.sg-dense .text-amber-700 { color: #0f172a !important; }
body.sg-dense .hover\:text-brand-400:hover, body.sg-dense .hover\:text-brand-300:hover,
body.sg-dense .hover\:text-indigo-600:hover { color: #1e293b !important; }
/* 红/玫红在浅底用实色 */
body.sg-dense .text-rose-600, body.sg-dense .text-red-600 { color: #e11d48 !important; }
body.sg-dense .text-rose-700, body.sg-dense .text-red-700 { color: #be123c !important; }
body.sg-dense .hover\:text-rose-300:hover, body.sg-dense .hover\:text-rose-600:hover { color: #e11d48 !important; }

/* —— 还原背景色 —— */
body.sg-dense .bg-white { background: #fff !important; }
body.sg-dense .bg-slate-50, body.sg-dense .bg-gray-50 { background: #f8fafc !important; }
body.sg-dense .bg-slate-100, body.sg-dense .bg-gray-100 { background: #f1f5f9 !important; }
body.sg-dense .bg-slate-200, body.sg-dense .bg-gray-200 { background: #e2e8f0 !important; }

/* —— 还原边框色 —— */
body.sg-dense .border-slate-200, body.sg-dense .border-gray-200,
body.sg-dense .border-slate-300, body.sg-dense .border-gray-300,
body.sg-dense .border-white\/10 { border-color: #e2e8f0 !important; }

/* —— 侧边栏：白底 + slate 描边，中性无彩 —— */
body.sg-dense .sg-sidebar {
  background: #fff;
  border-right: 1px solid #e2e8f0;
  color: #475569;
}
body.sg-dense .sg-sidebar .sg-logo { color: #0f172a; }
body.sg-dense .sg-sidebar .sg-logo-mark {
  background: linear-gradient(135deg, #0f172a, #334155);
  color: #fff;
  box-shadow: none;
}
body.sg-dense .sg-side-btn { color: #475569; }
body.sg-dense .sg-side-btn:hover { background: #f1f5f9; color: #0f172a; }
body.sg-dense .sg-side-btn.active {
  color: #fff; font-weight: 700;
  background: #0f172a;
  box-shadow: none;
}
body.sg-dense .sg-side-foot { border-color: #e2e8f0 !important; }

/* —— 移动端顶部栏 / 抽屉：明亮模式白底，与白底侧边栏保持一体 —— */
body.sg-dense .sg-topbar {
  background: #fff;
  border-bottom-color: #e2e8f0;
}
body.sg-dense .sg-icon-btn { background: #f1f5f9; border-color: #e2e8f0; }
body.sg-dense .sg-icon-btn:hover { background: #e2e8f0; }
body.sg-dense .sg-icon-btn span { background: #0f172a; }
body.sg-dense .sg-topbar-logo { color: #0f172a; }
body.sg-dense .sg-topbar-logo .sg-logo-mark { background: linear-gradient(135deg, #0f172a, #334155); color: #fff; }

/* —— 侧边栏底部「明亮/暗黑」切换按钮（角色名左侧） —— */
.sg-side-theme {
  width: 26px; height: 26px; border-radius: 8px; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.sg-side-theme .ic-sun { display: none; }
.sg-side-theme .ic-moon { display: inline; }
body.sg-dense .sg-side-theme { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
body.sg-dense .sg-side-theme:hover { background: #e2e8f0; color: #0f172a; }
body:not(.sg-dense) .sg-side-theme { background: var(--ink-700); border-color: rgba(255,255,255,.14); color: var(--ink-300); }
body:not(.sg-dense) .sg-side-theme:hover { color: var(--ink-100); }
body:not(.sg-dense) .sg-side-theme .ic-sun { display: inline; }
body:not(.sg-dense) .sg-side-theme .ic-moon { display: none; }

/* —— 卡片：白底 + 轻阴影 —— */
body.sg-dense .sg-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -6px rgba(15,23,42,.06);
}
body.sg-dense .sg-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 10px 28px -10px rgba(15,23,42,.1);
}
body.sg-dense .sg-main h3 { color: #0f172a; }
body.sg-dense .sg-card .overflow-x-auto { border-color: #e2e8f0; }

/* —— 统计卡：白底 + slate 顶条 —— */
body.sg-dense .sg-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.sg-dense .sg-stat::before { background: #0f172a; opacity: .7; }
body.sg-dense .sg-stat:hover { border-color: #cbd5e1; }
body.sg-dense .sg-stat .v.is-zero { color: #64748b; }

/* —— 区块标题竖条：slate —— */
body.sg-dense .sg-main .sg-card > h3:first-child::before,
body.sg-dense .sg-main .sg-card .sg-card-head::before { background: #0f172a; }
body.sg-dense .sg-card-head h3 { color: #0f172a; }

/* —— 数据表：浅底 + slate 表头 + 斑马纹 —— */
body.sg-dense .sg-table-wrap { background: #fff; border-color: #e2e8f0; }
body.sg-dense table.data th {
  background: #f8fafc; color: #64748b; border-bottom: 1px solid #e2e8f0;
}
body.sg-dense table.data td { color: #334155; border-bottom: 1px solid #f1f5f9; }
body.sg-dense table.data tbody tr:nth-child(even) { background: #fafbfc; }
body.sg-dense table.data tbody tr:hover { background: #f1f5f9; }
/* 粘性「操作」列底色（与上面三态保持一致） */
body.sg-dense {
  --row-bg: #ffffff;
  --row-bg-alt: #fafbfc;
  --row-bg-hover: #f1f5f9;
  --row-bg-head: #f8fafc;
}
body.sg-dense table.data tr td:only-child,
body.sg-dense table.data td.empty-cell { color: #94a3b8; }
body.sg-dense table.data td.empty-cell::before { color: #cbd5e1; }

/* —— 输入控件：白底 + slate 描边 —— */
body.sg-dense .sg-admin-input {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}
body.sg-dense .sg-admin-input:focus {
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}
body.sg-dense .sg-form-grid > label, body.sg-dense .sg-form-grid > .sg-field { color: #475569; }
body.sg-dense .sg-form-grid > label .sg-admin-input, body.sg-dense .sg-form-grid > .sg-field .sg-admin-input { color: #0f172a; }

/* —— radio 组：白底 + slate 描边 —— */
body.sg-dense .sg-radio-group .sg-radio { background: #fff; border-color: #cbd5e1; color: #475569; }
body.sg-dense .sg-radio-group .sg-radio:hover { border-color: #0f172a; }
body.sg-dense .sg-radio-group .sg-radio input { accent-color: #0f172a; }
body.sg-dense .sg-radio-group .sg-radio:has(input:checked) {
  border-color: #0f172a; color: #0f172a; background: #f1f5f9;
}

/* —— 按钮：收敛到 slate 中性主色 —— */
body.sg-dense .sg-btn-primary {
  background: #0f172a; color: #fff; box-shadow: none;
}
body.sg-dense .sg-btn-primary:not(:disabled):hover { background: #1e293b; box-shadow: none; transform: translateY(-1px); }
body.sg-dense .sg-btn-green { background: #15803d; color: #fff; box-shadow: none; }   /* 白字在 green-600 上仅 3.3:1，加深到 green-700 = 5.1:1 */
body.sg-dense .sg-btn-green:not(:disabled):hover { background: #166534; box-shadow: none; }
body.sg-dense .sg-btn-dark { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }
body.sg-dense .sg-btn-dark:not(:disabled):hover { border-color: #0f172a; color: #0f172a; background: #f8fafc; }
body.sg-dense .sg-btn-ghost { background: transparent; color: #475569; border: 1px solid #e2e8f0; }
body.sg-dense .sg-btn-ghost:not(:disabled):hover { background: #f1f5f9; color: #0f172a; }
body.sg-dense .sg-btn-danger { background: #fff; color: #e11d48; border: 1px solid #fecaca; }
body.sg-dense .sg-btn-danger:not(:disabled):hover { background: #fef2f2; border-color: #fca5a5; }

/* —— 敏感 chip / 行内操作 / 骨架 / 分页 —— */
body.sg-dense .sg-sensitive-tag { background: #fef2f2; color: #e11d48; border-color: #fecaca; }
body.sg-dense .sg-row-actions button, body.sg-dense .sg-row-actions a { color: #64748b; }
body.sg-dense .sg-row-actions button:hover { color: #0f172a; }
body.sg-dense .sg-row-actions .act-danger:hover { color: #e11d48; }
body.sg-dense .sg-row-actions .act-ok:hover { color: #16a34a; }
body.sg-dense .sg-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%;
}
body.sg-dense .sg-pager .page-info { color: #64748b; }
body.sg-dense .sg-toolbar .sg-sep { background: #e2e8f0; }

/* —— 徽章：浅底 + 语义色（语义保留，仅底色变浅） —— */
body.sg-dense .badge { color: #475569; background: #f1f5f9; }
body.sg-dense .sg-badge-success { color: #15803d; background: #dcfce7; }
body.sg-dense .sg-badge-danger { color: #b91c1c; background: #fee2e2; }
body.sg-dense .sg-badge-warn { color: #c2410c; background: #ffedd5; }
body.sg-dense .sg-badge-info { color: #1e40af; background: #dbeafe; }
body.sg-dense .sg-badge-neutral { color: #475569; background: #f1f5f9; }
/* 品牌徽标：brand-400 浅蓝字落在半透明蓝底+白卡上只有约 1.9:1，明亮后台收敛到浅蓝底+深蓝字 */
body.sg-dense .sg-badge-brand { background: #dbeafe; color: #1d4ed8; }

/* —— 登录页：浅底 + 白卡（覆盖内联深色样式） —— */
body.sg-dense .sg-login-bg {
  background:
    radial-gradient(1000px 560px at 80% -10%, rgba(15,23,42,.04), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(15,23,42,.03), transparent 55%),
    #f8fafc;
}
body.sg-dense .sg-login-bg .backdrop-blur {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}

/* —— 滚动条：浅色 —— */
body.sg-dense ::-webkit-scrollbar-track { background: #f1f5f9; }
body.sg-dense ::-webkit-scrollbar-thumb { background: #cbd5e1; }
body.sg-dense ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
 * 侧边栏：可滚动菜单 + 二级分组折叠（手风琴）
 * ============================================================ */
/* 关键：flex 子项允许收缩，overflow-y-auto 才能真正滚动 */
.sg-menu { min-height: 0; overscroll-behavior: contain; }

.sg-menu-group { margin-bottom: 2px; }
.sg-menu-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: #475569;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.sg-menu-trigger:hover { background: #f1f5f9; color: #0f172a; }
.sg-menu-tleft { display: flex; align-items: center; gap: 10px; }
.sg-menu-tleft .ic { width: 17px; text-align: center; opacity: .8; }
/* CSS 绘制的小箭头，展开时旋转 */
.sg-menu-arrow {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid #94a3b8; border-bottom: 1.6px solid #94a3b8;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .22s ease, border-color .15s;
}
.sg-menu-group.open > .sg-menu-trigger { color: #0f172a; }
.sg-menu-group.open > .sg-menu-trigger .sg-menu-arrow {
  transform: rotate(225deg) translate(0, 0); border-color: #0f172a;
}
/* 含激活子项的分组标题常亮（:has 现代浏览器支持） */
.sg-menu-group:has(.sg-side-sub.active) > .sg-menu-trigger { color: #0f172a; font-weight: 700; }

/* 二级容器：max-height 过渡实现平滑展开；项过多时自身滚动 */
.sg-menu-sub {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.sg-menu-group.open .sg-menu-sub { max-height: 360px; overflow-y: auto; }

.sg-side-sub {
  position: relative;
  display: block; width: 100%; text-align: left;
  padding: 8px 12px 8px 40px; margin: 1px 0; border-radius: 8px;
  font-size: 13px; color: #475569;
  background: transparent; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.sg-side-sub::before {
  content: ''; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1;
  transition: background .15s;
}
.sg-side-sub:hover { background: #f1f5f9; color: #0f172a; }
.sg-side-sub.active {
  background: #0f172a; color: #fff; font-weight: 600;
}
.sg-side-sub.active::before { background: #fff; }

/* 窄屏（≤640px）：抽屉宽度收敛 */
@media (max-width: 640px) {
  .sg-sidebar { width: 240px; padding: 14px 10px; }
}

/* ============================================================
 * 通用弹窗 / 侧抽屉 / 轻提示（替代原生 alert / confirm / prompt）
 * 层级（由低到高）：侧抽屉 → 任务详情弹窗 → 通用弹窗 → 轻提示
 * 因此从抽屉内打开的任何弹窗都会盖在抽屉之上。
 * ============================================================ */
/* —— 任务详情弹窗（跨 tab 共享，层级高于侧抽屉） —— */
.sg-modal-overlay { z-index: var(--sg-z-modal); }

/* —— Modal 弹窗（层级高于侧抽屉：抽屉里点出来的弹窗必须盖住抽屉） —— */
.sg-dialog { position: fixed; inset: 0; z-index: var(--sg-z-dialog); display: grid; place-items: center; padding: 20px; }
.sg-dialog[hidden] { display: none; }
/* 隐藏工具类必须显式定义：Tailwind CDN 是异步加载的，首屏这段时间 .hidden 不生效；
   更麻烦的是组件自身的 display 规则（如 .sg-dialog-msg{display:block}、.sg-input{display:block}）
   特异性高于 user-agent 的 [hidden] 规则，会把「已隐藏」的元素重新显示出来——
   结果是登录弹窗里密码/验证码两个表单同时可见，输入框压在切换按钮上拦截点击。
   用 !important 压过所有组件规则。 */
.hidden { display: none !important; }
[hidden] { display: none !important; }
.sg-dialog-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.sg-dialog-card {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,.35);
  padding: 24px; text-align: center; animation: sg-pop .22s cubic-bezier(.22,.61,.36,1);
}
.sg-dialog-icon {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
}
.sg-dialog-icon-info   { background: #eff6ff; color: #1e40af; }
.sg-dialog-icon-success{ background: #dcfce7; color: #15803d; }
.sg-dialog-icon-danger { background: #fee2e2; color: #b91c1c; }
.sg-dialog-icon-error  { background: #fee2e2; color: #b91c1c; }
.sg-dialog-title { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.sg-dialog-body { font-size: 13.5px; line-height: 1.65; color: #475569; }
.sg-dialog-body.hidden { display: none; }
.sg-dialog-input { margin-top: 14px; width: 100%; }
.sg-dialog-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.sg-dialog-actions .sg-btn { flex: 1; }
.sg-dialog-actions .sg-btn-ghost.hidden { display: none; }

/* 表单型弹窗（如前台「到期提醒设置」）：左对齐 + 纵向字段 + 分左/右两组的底部按钮 */
.sg-dialog-card.sg-dialog-form { max-width: 460px; text-align: left; padding: 22px 24px 20px; }
.sg-dialog-sub { font-size: 12.5px; color: #64748b; margin: -2px 0 16px; word-break: break-all; line-height: 1.5; }
.sg-dialog-field { margin-bottom: 14px; }
.sg-dialog-field .sg-label { margin-bottom: 6px; }
.sg-dialog-msg { font-size: 12.5px; min-height: 18px; margin-top: 4px; }
.sg-dialog-msg.is-ok { color: #047857; }
.sg-dialog-msg.is-error { color: #be123c; }
.sg-dialog-actions-split { justify-content: flex-end; }
.sg-dialog-actions-split .sg-btn { flex: none; min-width: 84px; }
.sg-dialog-actions-split [data-test] { margin-right: auto; min-width: 0; }

/* —— 轻提示 toast：固定在页面顶部居中，浮于一切内容（含弹窗）之上 —— */
.sg-toast {
  position: fixed; left: 50%; top: 78px; transform: translate(-50%, -12px);
  z-index: var(--sg-z-toast); padding: 11px 20px; border-radius: 12px;
  max-width: min(88vw, 520px); box-sizing: border-box;
  font-size: 13.5px; font-weight: 600; text-align: center;
  color: #fff; background: #0f172a;
  box-shadow: 0 14px 32px -12px rgba(15,23,42,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.sg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sg-toast-success { background: #16a34a; }
.sg-toast-error { background: #dc2626; }
/* 浅色主题下深底白字已足够对比，仅微调阴影，保持顶部定位不变 */
html.sg-light .sg-toast { box-shadow: 0 10px 26px -12px rgba(15,23,42,.35); }
/* 窄屏：贴导航下沿，避免占掉太多可视高度 */
@media (max-width: 640px) {
  .sg-toast { top: 66px; padding: 10px 16px; font-size: 13px; }
}

/* —— 侧抽屉（新增 / 编辑 / 详情） —— */
.sg-panel { position: fixed; inset: 0; z-index: var(--sg-z-drawer); }
.sg-panel-mask {
  position: absolute; inset: 0; background: rgba(15,23,42,.4);
  opacity: 0; transition: opacity .26s;
}
.sg-panel.show .sg-panel-mask { opacity: 1; }
/* 宽度策略：桌面端默认 = 视口宽度 − 侧边栏宽度（不遮挡菜单），可拖拽改变；
 * 移动端由下方 @media 锁定 100%。JS 会写入 inline width 覆盖此默认值。 */
.sg-panel-body {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: calc(100vw - var(--sg-sidebar-w));
  min-width: var(--sg-drawer-min);
  max-width: 100vw;
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid #e2e8f0;
  box-shadow: -24px 0 60px -30px rgba(15,23,42,.4);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.sg-panel.show .sg-panel-body { transform: translateX(0); }
/* 拖拽改变宽度：左边缘热区（半透明握把，hover / 拖拽中显形） */
.sg-panel-resize {
  position: absolute; top: 0; left: 0; bottom: 0; width: 12px;
  transform: translateX(-50%); z-index: 3;
  cursor: col-resize; touch-action: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.sg-panel-resize::before {
  content: ''; width: 4px; height: 46px; border-radius: 3px;
  background: #cbd5e1; opacity: 0; transition: opacity .15s, background .15s;
}
.sg-panel-resize:hover::before { opacity: 1; background: #94a3b8; }
.sg-panel-body.resizing { transition: none; user-select: none; }
.sg-panel-body.resizing .sg-panel-resize::before { opacity: 1; background: #475569; }
.sg-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid #e2e8f0;
}
.sg-panel-head h3 { font-size: 15.5px; font-weight: 800; color: #0f172a; }
.sg-panel-close {
  width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer;
  background: #f1f5f9; color: #64748b; font-size: 14px; transition: background .15s, color .15s;
}
.sg-panel-close:hover { background: #e2e8f0; color: #0f172a; }
.sg-panel-content { flex: 1; overflow-y: auto; padding: 22px; }
.sg-panel-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 22px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.sg-panel-foot.hidden { display: none; }
/* 抽屉内表单栅格 */
.sg-drawer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sg-drawer-grid > label, .sg-drawer-grid > .sg-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #475569;
}
.sg-drawer-grid .col-span-2 { grid-column: span 2; }
.sg-drawer-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; margin-bottom: 20px; }
.sg-drawer-sub { font-size: 13px; font-weight: 800; color: #0f172a; margin: 18px 0 8px; }
.sg-hint { margin-top: 16px; font-size: 12px; color: #94a3b8; line-height: 1.6; }
.sg-link { color: #0f172a; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0; }
.sg-link:hover { text-decoration: underline; }

/* 列表「按用户筛选」提示条（从用户列表跳转进入时显示） */
.sg-filter-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding: 9px 14px; border-radius: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 12.5px;
}
.sg-filter-chip.hidden { display: none; }
.sg-filter-chip b { font-weight: 700; }
.sg-filter-chip button {
  flex: none; background: none; border: 0; cursor: pointer; padding: 0;
  color: #1d4ed8; font-size: 12.5px; font-weight: 600;
}
.sg-filter-chip button:hover { text-decoration: underline; }
body:not(.sg-dense) .sg-filter-chip { background: #1e293b; border-color: rgba(255,255,255,.14); color: #cbd5e1; }
body:not(.sg-dense) .sg-filter-chip button { color: #60a5fa; }
.sg-reveal-box {
  margin-top: 12px; padding: 12px; border-radius: 10px; font-size: 13px; word-break: break-all;
  background: #fef2f2; border: 1px solid #fecaca; color: #0f172a;
}

/* 浅色主题下弹窗/抽屉/表头通用（后台 body.sg-dense 已为浅色，此处保证默认值一致） */
body:not(.sg-dense) .sg-dialog-card { background: #1a1a1a; border-color: rgba(255,255,255,.14); }
body:not(.sg-dense) .sg-dialog-title { color: #f5f5f5; }
body:not(.sg-dense) .sg-dialog-body { color: #a3a3a3; }
body:not(.sg-dense) .sg-dialog-sub { color: #a3a3a3; }
body:not(.sg-dense) .sg-dialog-msg.is-ok { color: #34d399; }
body:not(.sg-dense) .sg-dialog-msg.is-error { color: #fda4af; }
body:not(.sg-dense) .sg-dialog-icon-danger,
body:not(.sg-dense) .sg-dialog-icon-error { background: rgba(244,63,94,.16); color: #fb7185; }
body:not(.sg-dense) .sg-panel-body { background: #121212; border-color: rgba(255,255,255,.14); }
body:not(.sg-dense) .sg-panel-resize::before { background: #404040; }
body:not(.sg-dense) .sg-panel-resize:hover::before { background: #737373; }
body:not(.sg-dense) .sg-panel-body.resizing .sg-panel-resize::before { background: #a3a3a3; }
body:not(.sg-dense) .sg-panel-head, body:not(.sg-dense) .sg-panel-foot { border-color: rgba(255,255,255,.14); }
body:not(.sg-dense) .sg-panel-head h3 { color: #f5f5f5; }
body:not(.sg-dense) .sg-panel-foot { background: #1a1a1a; }
body:not(.sg-dense) .sg-drawer-grid > label, body:not(.sg-dense) .sg-drawer-grid > .sg-field { color: #a3a3a3; }
body:not(.sg-dense) .sg-drawer-sub { color: #f5f5f5; }
body:not(.sg-dense) .sg-link { color: #60a5fa; }

/* 移动端：侧抽屉固定 100% 宽度（拖拽手柄隐藏，不允许改宽） */
@media (max-width: 860px) {
  .sg-panel-body { width: 100% !important; min-width: 0; max-width: 100%; border-left: 0; }
  .sg-panel-resize { display: none; }
  .sg-drawer-grid { grid-template-columns: 1fr; }
  .sg-drawer-grid .col-span-2 { grid-column: span 1; }
  .sg-dialog-actions { flex-direction: column-reverse; }
}

/* ============================================================
 * 后台浅色模式：副文本可读性修复
 * 原设计中 text-slate-400/500、text-white/40 在 #f8fafc 底上对比度过低，
 * 这里统一加深到可读的 slate 色阶（浅色后台专用）。
 * ============================================================ */
body.sg-dense .text-slate-400,
body.sg-dense .text-gray-400 { color: #64748b !important; }   /* 原 #94a3b8 → 提高对比度 */
body.sg-dense .text-slate-500,
body.sg-dense .text-gray-500 { color: #475569 !important; }
body.sg-dense .text-slate-300,
body.sg-dense .text-gray-300 { color: #64748b !important; }
body.sg-dense .text-white\/40 { color: #64748b !important; }
body.sg-dense .text-white\/30 { color: #94a3b8 !important; }

/* 表格内副文本（空态、辅助列）同样加深 */
body.sg-dense table.data td.empty-cell,
body.sg-dense table.data tr td:only-child { color: #64748b; }
body.sg-dense .sg-stat .k { color: #64748b; }
body.sg-dense .sg-card-head > span,
body.sg-dense .sg-card > h3 + span { color: #64748b !important; }

/* 等宽副文本（订单号/邮箱/卡号/代理 等技术标识）：浅色模式下统一加深到可读色阶 */
body.sg-dense .font-mono { color: #1e293b !important; }
body.sg-dense .font-mono.text-slate-400,
body.sg-dense .font-mono.text-slate-500,
body.sg-dense .font-mono.text-gray-400,
body.sg-dense .font-mono.text-gray-500 { color: #334155 !important; }

/* 抽屉/弹窗内容：浅色模式下强制深色文字（防止继承失效导致白字不可见） */
body.sg-dense .sg-panel-content,
body.sg-dense .sg-panel-content .sg-drawer-info,
body.sg-dense .sg-panel-content .sg-drawer-info > div,
body.sg-dense .sg-dialog-body { color: #0f172a; }
body.sg-dense .sg-panel-content .sg-drawer-info span.text-slate-400,
body.sg-dense .sg-panel-content .sg-drawer-info span.text-gray-400 { color: #64748b !important; }

/* 登录页白卡（浅色后台） */
body.sg-dense .sg-login-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
  padding: 32px; box-shadow: 0 20px 50px -24px rgba(15,23,42,.22);
}
body.sg-dense #loginView { color: #0f172a; }
body:not(.sg-dense) .sg-login-card {
  background: rgba(26,26,26,.85); border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  padding: 32px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.9); backdrop-filter: blur(12px);
}
body:not(.sg-dense) .sg-login-title { color: #f5f5f5; }

/* 抽屉/弹窗被打开时锁滚动由 JS 控制，这里保证遮罩层不遮挡滚动条 */
.sg-panel-mask, .sg-dialog-backdrop { cursor: pointer; }

/* 页内 tab 切换（如支付配置页：易支付 / Stripe） */
.sg-inlinetabs { display: flex; gap: 2px; border-bottom: 1px solid #e2e8f0; }
.sg-inlinetab {
  padding: 10px 20px; font-size: 14px; font-weight: 600; color: #64748b;
  background: none; border: 0; cursor: pointer; position: relative; transition: color .15s;
}
.sg-inlinetab:hover { color: #0f172a; }
.sg-inlinetab.active { color: #0f172a; }
.sg-inlinetab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0f172a;
}

/* 表单字段提示：统一放在输入框下方 */
.sg-field-hint { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 4px; line-height: 1.4; }
.sg-field-hint.is-danger { color: #e11d48; }
body:not(.sg-dense) .sg-field-hint.is-danger { color: #fb7185; }   /* 近黑底上 #e11d48 仅 4.2:1，提亮到 rose-400 */

/* ============================================================
 * 顶部用户菜单（前台登录态下拉）
 * 未登录：登录 / 注册按钮；已登录：头像 + 下拉（用户中心 / 订单 / 退款 / 支付 / 设置 / 退出）
 * ============================================================ */
.sg-usermenu { position: relative; }
.sg-usermenu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 6px; border-radius: 999px;
  background: var(--ink-700); border: 1px solid var(--line-strong);
  color: var(--ink-100); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.sg-usermenu-btn:hover { border-color: var(--brand-500); color: var(--brand-400); }
.sg-caret {
  width: 6px; height: 6px; margin-left: 2px; opacity: .7;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s;
}
.sg-usermenu-btn[aria-expanded="true"] .sg-caret { transform: rotate(225deg) translate(0, 0); }
.sg-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #0a0a0a;
}
.sg-avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.sg-usermenu-name { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sg-usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: 240px; padding: 8px;
  background: var(--ink-800); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.85);
  animation: sg-pop .16s cubic-bezier(.22,.61,.36,1);
}
.sg-usermenu-pop[hidden] { display: none; }
.sg-usermenu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sg-usermenu-mail {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink-100);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-usermenu-sub { display: block; font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.sg-usermenu-list { display: flex; flex-direction: column; gap: 2px; }
.sg-usermenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 9px;
  font-size: 13px; color: var(--ink-300); font-weight: 500;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.sg-usermenu-item .ic { width: 16px; text-align: center; opacity: .8; }
.sg-usermenu-item:hover { background: rgba(59,130,246,.1); color: var(--brand-400); }
.sg-usermenu-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.sg-usermenu-item.danger { color: #fb7185; }
.sg-usermenu-item.danger:hover { background: rgba(244,63,94,.12); color: #fb7185; }

/* 后台浅色主题兜底（后台不引用该 partial，仅保证样式一致） */
body.sg-dense .sg-usermenu-btn { background: #fff; border-color: #e2e8f0; color: #0f172a; }
body.sg-dense .sg-usermenu-pop { background: #fff; border-color: #e2e8f0; box-shadow: 0 20px 50px -24px rgba(15,23,42,.3); }
body.sg-dense .sg-usermenu-mail { color: #0f172a; }
body.sg-dense .sg-usermenu-sub { color: #64748b; }
body.sg-dense .sg-usermenu-item { color: #475569; }
body.sg-dense .sg-usermenu-item:hover { background: #f1f5f9; color: #0f172a; }
body.sg-dense .sg-usermenu-head, body.sg-dense .sg-usermenu-foot { border-color: #e2e8f0; }

/* 窄屏：收敛用户菜单（隐藏昵称文本，仅留头像） */
@media (max-width: 640px) {
  .sg-usermenu-name { display: none; }
  .sg-usermenu-btn { padding: 0 8px 0 6px; }
  .sg-usermenu-pop { width: 220px; }
}

/* ============================================================
 * 对比度统一修正（WCAG AA：正文 ≥4.5:1，说明性文字不低于 4.5:1）
 * 三套场景：前台暗黑模式 / 后台明亮模式(body.sg-dense) / 后台暗黑模式(body:not(.sg-dense))
 * 原则：只改「文字色」，不动背景与布局；同一元素在两种主题下各自给足对比度。
 * ============================================================ */

/* —— 表单/字段说明：原先两套主题共用 #94a3b8，亮色底上仅 2.6:1 —— */
.sg-field-hint { color: #cbd5e1; }                 /* 暗色底：≈13:1 */
body.sg-dense .sg-field-hint { color: #64748b; }   /* 亮色底：4.76:1 */
.sg-hint { color: #cbd5e1; }                       /* 暗色底 */
body.sg-dense .sg-hint { color: #64748b; }         /* 亮色底 */

/* —— 后台暗黑模式（body:not(.sg-dense)）——
 * 侧边栏菜单 / 页内 tab / 提示盒原先写死了浅色主题的深灰文字，
 * 切到暗色底后会变成 2.6:1 的“看不清”，这里补上暗色专用配色。 */
body:not(.sg-dense) .sg-menu-trigger { color: var(--ink-300); }
body:not(.sg-dense) .sg-menu-trigger:hover { background: var(--ink-700); color: var(--ink-100); }
body:not(.sg-dense) .sg-menu-group.open > .sg-menu-trigger,
body:not(.sg-dense) .sg-menu-group:has(.sg-side-sub.active) > .sg-menu-trigger { color: var(--ink-100); }
body:not(.sg-dense) .sg-menu-group.open > .sg-menu-trigger .sg-menu-arrow { border-color: var(--ink-100); }

body:not(.sg-dense) .sg-side-sub { color: var(--ink-300); }
body:not(.sg-dense) .sg-side-sub::before { background: var(--ink-500); }
body:not(.sg-dense) .sg-side-sub:hover { background: var(--ink-700); color: var(--ink-100); }
/* 激活项：原 #0f172a 深底在暗色侧栏上与背景几乎同色 → 改用品牌色高亮 */
body:not(.sg-dense) .sg-side-sub.active { background: rgba(59,130,246,.16); color: var(--brand-400); }
body:not(.sg-dense) .sg-side-sub.active::before { background: var(--brand-400); }

body:not(.sg-dense) .sg-inlinetabs { border-bottom-color: var(--line-strong); }
body:not(.sg-dense) .sg-inlinetab { color: var(--ink-300); }
body:not(.sg-dense) .sg-inlinetab:hover,
body:not(.sg-dense) .sg-inlinetab.active { color: var(--ink-100); }
body:not(.sg-dense) .sg-inlinetab.active::after { background: var(--brand-400); }

body:not(.sg-dense) .sg-reveal-box {
  background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.3); color: #fda4af;
}
/* 抽屉关闭按钮：暗色下由浅底深字改为深底浅字 */
body:not(.sg-dense) .sg-panel-close { background: var(--ink-700); color: var(--ink-300); }
body:not(.sg-dense) .sg-panel-close:hover { background: var(--ink-600); color: var(--ink-100); }


/* ============================================================
 * 用户中心（前台 /account*.html）
 * 桌面：左侧竖排导航（固定 200px 栏）；移动：顶部横向可滚动的 chip 导航（含退出登录）
 * ============================================================ */
.sg-account-layout { display: flex; gap: 24px; align-items: flex-start; }
.sg-account-main { flex: 1; min-width: 0; width: 100%; }
.sg-aside { flex: 0 0 200px; }
.sg-aside-nav { display: flex; flex-direction: column; gap: 4px; }
.sg-aside-nav a.sg-side-btn { text-decoration: none; }
.sg-aside-sep { height: 1px; background: var(--line-strong); margin: 10px 4px; }
.sg-aside-logout .ic { opacity: .7; }
.sg-aside-logout:hover { color: #fb7185 !important; background: rgba(244,63,94,.08) !important; }

/* 表格在触屏上顺滑横向滚动 */
.sg-table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 1023px) {
  .sg-account-layout { flex-direction: column; gap: 16px; }
  /* 顶栏已不吸顶：chip 导航直接贴视口顶部横向滚动，避免竖排占满整屏 */
  .sg-aside {
    flex: none; width: 100%;
    position: sticky; top: 0; z-index: 20;
    background: var(--sg-nav-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    padding: 10px 0;
  }
  .sg-aside-nav {
    flex-direction: row; gap: 8px; align-items: center;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sg-aside-nav::-webkit-scrollbar { display: none; }
  .sg-aside-nav a.sg-side-btn,
  .sg-aside-nav button.sg-side-btn {
    flex: 0 0 auto; width: auto; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px;
    background: var(--ink-700); border: 1px solid var(--line-strong);
  }
  .sg-aside-sep { display: none; }
}

@media (max-width: 640px) {
  /* 页面主容器留白收紧（选择器特异性高于 Tailwind px-6/py-10） */
  main.sg-container { padding: 24px 16px 40px; }
  .sg-card-pad { padding: 18px; }
  .sg-aside-nav a.sg-side-btn,
  .sg-aside-nav button.sg-side-btn { padding: 7px 12px; font-size: 12.5px; }
  .sg-account-layout h1 { font-size: 20px; }
}


/* ============================================================
 * 前台浅色主题（html.sg-light）
 * 由顶部导航的「亮/暗」开关切换，localStorage(sgn_theme) 持久化，首屏由 head 内联脚本尽早应用。
 * 策略：先翻转 ink/line/nav 变量（绝大多数组件的文字、边框、卡片底色会随之适配），
 *       再对少数写死深色底、以及浅底上对比度不足的强调色做针对性覆写。
 * 后台 body.sg-dense 是独立的明亮主题，不含本区块，故不受影响。
 * 校验：scripts/contrast-check.js
 * ============================================================ */
html.sg-light {
  --ink-900:#f8fafc; --ink-800:#f1f5f9; --ink-700:#ffffff; --ink-600:#e2e8f0;
  --ink-500:#cbd5e1; --ink-400:#64748b; --ink-300:#475569; --ink-200:#334155; --ink-100:#0f172a;
  --line: rgba(15,23,42,.08);
  --line-strong: rgba(15,23,42,.14);
  --sg-nav-bg: rgba(255,255,255,.82);
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -20px rgba(15,23,42,.18);
}

html.sg-light body {
  color: #0f172a;
  /* 明亮模式：主体只用默认纯白，不加任何底色、光斑、网格 */
  background-color: #ffffff;
  background-image: none;
  background-size: auto;
  background-position: 0 0;
}
html.sg-light body::before {
  /* 轻量化：关闭漂浮光斑动画层，避免浅色底上出现脏色块 */
  background: none;
  animation: none;
}
html.sg-light ::selection { background: rgba(59,130,246,.22); }

/* —— 导航 / 卡片 / 分区 —— */
html.sg-light .sg-navlink { color: #475569; }
html.sg-light .sg-navlink:hover { color: #2563eb; }
html.sg-light .sg-card {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: var(--shadow-card);
}
html.sg-light .sg-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 16px 40px -20px rgba(15,23,42,.16);
}
html.sg-light .sg-soft:hover { background: #eff6ff; border-color: #bfdbfe; }
html.sg-light .sg-card-glow {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(37,99,235,.45), rgba(5,150,105,.35)) border-box;
}
html.sg-light .sg-band-dark {
  background: linear-gradient(180deg, rgba(248,250,252,.7), rgba(241,245,249,.9));
}

/* —— 强调色：暗底亮色 → 浅底深色（均 ≥4.5:1） —— */
html.sg-light .text-brand-400, html.sg-light .text-brand-500,
html.sg-light .text-brand-600, html.sg-light .text-brand-700 { color: #2563eb !important; }
html.sg-light .hover\:text-brand-400:hover { color: #1d4ed8 !important; }
html.sg-light .text-slate-100 { color: #0f172a !important; }
html.sg-light .text-emerald-400, html.sg-light .text-emerald-500, html.sg-light .text-emerald-600,
html.sg-light .text-green-400, html.sg-light .text-green-500, html.sg-light .text-green-600 { color: #047857 !important; }
html.sg-light .text-amber-700, html.sg-light .text-orange-300, html.sg-light .text-orange-400 { color: #c2410c !important; }
html.sg-light .text-rose-600, html.sg-light .text-red-600 { color: #e11d48 !important; }
html.sg-light .text-rose-700, html.sg-light .text-red-700 { color: #be123c !important; }
/* 注意：必须用 background-image 而非 background 简写——
   简写会把 background-clip: text 重置为 border-box，导致渐变文字变成一整块色块 */
html.sg-light .sg-grad-text {
  background-image: linear-gradient(120deg, #1d4ed8, #1d4ed8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* —— 按钮 —— */
html.sg-light .sg-btn-ghost { background: #fff; color: #334155; border-color: #cbd5e1; }
html.sg-light .sg-btn-ghost:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
html.sg-light .sg-btn-dark { background: #fff; color: #2563eb; border-color: #cbd5e1; }
html.sg-light .sg-btn-dark:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }

/* —— 表单 —— */
html.sg-light .sg-input, html.sg-light .sg-textarea, html.sg-light .sg-select {
  background: #fff; color: #0f172a; border-color: #cbd5e1;
}
html.sg-light .sg-input::placeholder, html.sg-light .sg-textarea::placeholder { color: #64748b; }
html.sg-light .sg-input:focus, html.sg-light .sg-textarea:focus, html.sg-light .sg-select:focus {
  border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
html.sg-light .sg-label { color: #334155; }
html.sg-light .sg-pick { background: #fff; border-color: #cbd5e1; }
html.sg-light .sg-pick:hover { border-color: #93c5fd; }
html.sg-light .sg-pick.is-active { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(59,130,246,.16); }

/* —— 徽章 / 提示条 / 信任点 —— */
html.sg-light .sg-badge-neutral { background: #f1f5f9; color: #475569; }
html.sg-light .sg-badge-success { background: #d1fae5; color: #047857; }
html.sg-light .sg-badge-warn { background: #ffedd5; color: #c2410c; }
html.sg-light .sg-badge-danger { background: #ffe4e6; color: #be123c; }
html.sg-light .sg-badge-info { background: #dbeafe; color: #1d4ed8; }
html.sg-light .sg-badge-brand { background: #dbeafe; color: #1d4ed8; }
html.sg-light .sg-badge-violet { background: #ede9fe; color: #6d28d9; }
html.sg-light .sg-alert-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
html.sg-light .sg-alert-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
html.sg-light .sg-trust { color: #475569; }
html.sg-light .sg-trust .tick { background: #d1fae5; color: #047857; }
html.sg-light .sg-reveal-box { background: #fef2f2; border-color: #fecaca; color: #0f172a; }

/* —— 弹窗 / 提示文本（浅色底：正文与副文本均 ≥4.5:1） —— */
html.sg-light .sg-dialog-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 24px 60px -20px rgba(15,23,42,.28); }
html.sg-light .sg-dialog-title { color: #0f172a; }
html.sg-light .sg-dialog-body { color: #475569; }
html.sg-light .sg-dialog-sub { color: #64748b; }
html.sg-light .sg-dialog-msg.is-ok { color: #047857; }
html.sg-light .sg-dialog-msg.is-error { color: #be123c; }
html.sg-light .sg-field-hint, html.sg-light .sg-hint { color: #64748b; }

/* —— 代码 / 胶囊 / 键盘键 —— */
html.sg-light .sg-code { background: #f1f5f9; color: #2563eb; border-color: #e2e8f0; }
html.sg-light .sg-kbd { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
html.sg-light .sg-pill { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
html.sg-light .sg-pill:hover { background: #dbeafe; border-color: #93c5fd; }

/* —— 步骤条 / 时间线 / 进度条 —— */
html.sg-light .sg-steps .seg { background: #e2e8f0; }
html.sg-light .sg-steps .dot { background: #e2e8f0; color: #64748b; }
html.sg-light .sg-steps .node .lbl { color: #64748b; }
html.sg-light .sg-steps .node.done .lbl { color: #2563eb; }
html.sg-light .sg-tl-label { color: #64748b; }
html.sg-light .sg-timeline li.done .sg-tl-label { color: #334155; }
html.sg-light .sg-timeline li.running .sg-tl-label { color: #0f172a; }
html.sg-light .sg-tl-dot { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
html.sg-light .sg-back { color: #475569; border-color: #cbd5e1; background: #fff; }
html.sg-light .sg-back:hover { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
html.sg-light .sg-bar { background: #e2e8f0; }
html.sg-light .sg-spinner { border-color: #e2e8f0; border-top-color: #2563eb; }

/* —— 表格 —— */
html.sg-light .sg-table-wrap { background: #fff; border-color: #e2e8f0; }
html.sg-light table.data th { background: #f8fafc; color: #475569; border-bottom-color: #e2e8f0; }
html.sg-light table.data td { color: #334155; border-bottom-color: #f1f5f9; }
html.sg-light table.data tbody tr:nth-child(even) { background: #fafbfc; }
html.sg-light table.data tbody tr:hover { background: #f1f5f9; }
html.sg-light .sg-stat { background: #fff; border-color: #e2e8f0; }
html.sg-light .sg-stat:hover { border-color: #cbd5e1; }
html.sg-light .sg-meta { border-bottom-color: #e2e8f0; }
html.sg-light .sg-meta-item { border-right-color: #e2e8f0; }
html.sg-light .sg-meta-item .k { color: #64748b; }
html.sg-light .sg-meta-item .v { color: #0f172a; }

/* —— 顶部用户菜单 —— */
html.sg-light .sg-usermenu-btn { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.sg-light .sg-usermenu-btn:hover { border-color: #93c5fd; color: #2563eb; }
html.sg-light .sg-usermenu-pop { background: #fff; border-color: #e2e8f0; box-shadow: 0 20px 50px -24px rgba(15,23,42,.3); }
html.sg-light .sg-usermenu-head, html.sg-light .sg-usermenu-foot { border-color: #e2e8f0; }
html.sg-light .sg-usermenu-mail { color: #0f172a; }
html.sg-light .sg-usermenu-sub { color: #64748b; }
html.sg-light .sg-usermenu-item { color: #475569; }
html.sg-light .sg-usermenu-item:hover { background: #eff6ff; color: #1d4ed8; }
html.sg-light .sg-usermenu-item.danger { color: #e11d48; }
html.sg-light .sg-usermenu-item.danger:hover { background: #fef2f2; color: #be123c; }

/* —— 用户中心导航 —— */
html.sg-light .sg-aside-nav a.sg-side-btn { color: #475569; }
html.sg-light .sg-aside-nav a.sg-side-btn:hover { background: #eff6ff; color: #1d4ed8; }
html.sg-light .sg-aside-nav a.sg-side-btn.active {
  color: #fff; background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 8px 20px -12px rgba(37,99,235,.8);
}
html.sg-light .sg-aside-logout { color: #475569; }

/* —— 透明度工具类（bg-white/5、border-white/10 等）在浅底需要可见 —— */
html.sg-light .bg-white\/5 { background: rgba(15,23,42,.03) !important; }
html.sg-light .border-white\/5 { border-color: rgba(15,23,42,.06) !important; }
html.sg-light .border-white\/10 { border-color: rgba(15,23,42,.10) !important; }
html.sg-light .bg-white\/10 { background: rgba(15,23,42,.05) !important; }
html.sg-light .border-emerald-500\/25 { border-color: rgba(5,150,105,.30) !important; }
html.sg-light .bg-emerald-500\/10 { background: rgba(5,150,105,.08) !important; }
html.sg-light .border-brand-500\/30 { border-color: rgba(37,99,235,.30) !important; }
html.sg-light .bg-brand-500\/10 { background: rgba(37,99,235,.07) !important; }

/* —— 滚动条 —— */
html.sg-light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.sg-light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.sg-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
 * 入口选择弹层（前台「立即使用」未登录时：卡密兑换 / 用户登录 二选一）
 * 取向：纯色底 + 细边框 + 留白，无投影堆叠；两张大卡片即全部信息层级。
 * 层级 60：高于吸顶导航(40)，低于后台抽屉体系（前台不使用后台弹窗）。
 * ============================================================ */
.sg-choice-mask { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 20px; }
.sg-choice-mask.open { display: grid; }
.sg-choice-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.sg-choice-box { position: relative; width: 100%; max-width: 560px; }
.sg-choice-card { text-align: left; max-width: 560px; padding: 26px 26px 22px; }
.sg-choice-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.sg-choice-sub { font-size: 13px; color: var(--ink-400); margin-top: 6px; line-height: 1.6; }

.sg-choice-grid { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 560px) { .sg-choice-grid { grid-template-columns: 1fr 1fr; } }

.sg-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 20px 18px; border-radius: 16px; text-decoration: none;
  background: var(--ink-700); border: 1px solid var(--line-strong); color: var(--ink-100);
  transition: border-color .15s, background .15s, transform .15s;
}
.sg-choice:hover { transform: translateY(-2px); border-color: var(--brand-500); background: var(--ink-600); }
.sg-choice:active { transform: translateY(0); }
.sg-choice-ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 18px; line-height: 1; color: var(--brand-400);
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25);
}
.sg-choice.is-green .sg-choice-ic {
  color: var(--green-400); background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25);
}
.sg-choice-t { display: block; font-size: 15.5px; font-weight: 700; margin-top: 14px; }
.sg-choice-d { display: block; font-size: 12.5px; color: var(--ink-400); margin-top: 6px; line-height: 1.7; }
.sg-choice-cta { display: block; font-size: 12.5px; font-weight: 600; color: var(--brand-400); margin-top: 12px; }
.sg-choice.is-green .sg-choice-cta { color: var(--green-400); }

.sg-choice-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-400); }
.sg-choice-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-400); font-size: 15px; line-height: 1;
}
.sg-choice-x:hover { color: var(--ink-100); border-color: var(--line-strong); }

html.sg-light .sg-choice-backdrop { background: rgba(15,23,42,.42); }
html.sg-light .sg-choice-title { color: #0f172a; }
html.sg-light .sg-choice-sub { color: #64748b; }
html.sg-light .sg-choice { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.sg-light .sg-choice:hover { border-color: #93c5fd; background: #f8fafc; }
html.sg-light .sg-choice-d { color: #64748b; }
html.sg-light .sg-choice-cta { color: #2563eb; }
html.sg-light .sg-choice.is-green .sg-choice-cta { color: #047857; }
html.sg-light .sg-choice-foot { color: #64748b; }
html.sg-light .sg-choice-x { color: #64748b; }
html.sg-light .sg-choice-x:hover { color: #0f172a; border-color: #cbd5e1; }

/* ============================================================
 * 主题切换按钮（顶部导航）
 * ============================================================ */
.sg-themebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 10px; cursor: pointer;
  background: var(--ink-700); border: 1px solid var(--line-strong);
  color: var(--ink-300); font-size: 15px; line-height: 1;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.sg-themebtn:hover { color: var(--brand-400); border-color: var(--brand-500); }
.sg-themebtn:active { transform: scale(.94); }
.sg-themebtn .ic-moon { display: none; }
html.sg-light .sg-themebtn .ic-sun { display: none; }
html.sg-light .sg-themebtn .ic-moon { display: inline; }
html.sg-light .sg-themebtn { background: #fff; border-color: #e2e8f0; color: #475569; }
html.sg-light .sg-themebtn:hover { color: #2563eb; border-color: #93c5fd; }

/* ============================================================
 * 顶部导航：窄屏收紧（防止链接文字换行、整行溢出）
 * ============================================================ */
.sg-navlink { white-space: nowrap; }
@media (max-width: 640px) {
  .sg-nav .sg-container { padding-left: 12px; padding-right: 12px; }
  .sg-nav nav { gap: 10px; flex-wrap: nowrap; min-width: 0; }
  .sg-navlink { font-size: 13px; }
  .sg-logo { font-size: 15.5px; }
}





/* ============================================================
 * 全宽页面下的「内容区块」限宽
 * 页面容器不再设最大宽度（整站铺开），但网格/文档类内容区块
 * 局部居中限宽，避免卡片在宽屏被拉散（参考 bewilder 的 xl:w-[70%] mx-auto）。
 * ============================================================ */
.sg-section-tight .sg-container > .grid,
.sg-band .sg-container > .mt-8.max-w-3xl { max-width: 1120px; margin-left: auto; margin-right: auto; }
/* 首页等宽屏下的正文/说明段落不无限拉长 */
.sg-section-tight .sg-container > .text-center { max-width: 1120px; margin-left: auto; margin-right: auto; }