/*
 * 速转发统一设计系统（客户前台和运营后台共用）
 * 风格：深色蓝紫底 + 半透明玻璃卡片 + 蓝紫渐变高亮 + 发光数据（参考 docs/design/ 三张图）
 * 新页面只用这里的变量和组件，不另写颜色、圆角、阴影。
 */
:root {
  --bg: #050816;
  --bg-2: #0a1030;
  --glass: rgba(148, 163, 255, 0.06);
  --glass-strong: rgba(148, 163, 255, 0.10);
  --line: rgba(148, 163, 255, 0.14);
  --line-strong: rgba(148, 163, 255, 0.28);
  --text: #e8ebf7;
  --text-2: #9aa3c7;
  --text-3: #626b91;
  --brand: #3b82ff;
  --brand-2: #7c5cff;
  --brand-grad: linear-gradient(135deg, #2f6bff 0%, #7c5cff 100%);
  --glow: 0 0 24px rgba(59, 130, 255, 0.45);
  --ok: #34d399;
  --warn: #f5a524;
  --bad: #f43f5e;
  --radius: 16px;
  --radius-sm: 10px;
  --gap: 16px;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --surface: rgba(5, 8, 22, 0.55);
  --surface-strong: rgba(10, 16, 48, 0.92);
  --card-bg: linear-gradient(180deg, rgba(148,163,255,0.08), rgba(148,163,255,0.03));
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --page-bg:
    radial-gradient(900px 600px at 85% -10%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(800px 500px at -10% 20%, rgba(47, 107, 255, 0.18), transparent 60%),
    radial-gradient(520px 520px at 105% 55%, rgba(255, 122, 69, 0.16), transparent 60%),
    #050816;
  color-scheme: dark;
}

/* 亮色主题：只覆盖变量，组件不变 */
:root[data-theme="light"] {
  --bg: #f4f6fc;
  --bg-2: #ffffff;
  --glass: rgba(47, 80, 200, 0.05);
  --glass-strong: rgba(47, 80, 200, 0.09);
  --line: rgba(40, 60, 140, 0.12);
  --line-strong: rgba(40, 60, 140, 0.22);
  --text: #141a33;
  --text-2: #4d5675;
  --text-3: #8890ab;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  --shadow: 0 8px 24px rgba(30, 45, 110, 0.08);
  --glow: 0 0 18px rgba(59, 130, 255, 0.25);
  --page-bg:
    radial-gradient(900px 600px at 85% -10%, rgba(124, 92, 255, 0.12), transparent 60%),
    radial-gradient(800px 500px at -10% 20%, rgba(47, 107, 255, 0.10), transparent 60%),
    #f4f6fc;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
  background-attachment: fixed;
}
a { color: var(--brand); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0.2px; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); font-size: 12px; }
.mono { font-family: var(--mono); }
.grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 布局：左侧图标栏 + 内容区（电脑）/ 底部导航（手机） ---------- */
.app { display: grid; grid-template-columns: 76px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface); border-right: 1px solid var(--line); backdrop-filter: blur(16px);
}
.sidebar .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-grad); box-shadow: var(--glow); margin-bottom: 16px; display: grid; place-items: center; font-weight: 700; }
.nav-item {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  color: var(--text-3); border: 1px solid transparent; cursor: pointer; transition: .2s;
}
.nav-item:hover { color: var(--text); background: var(--glass); }
.nav-item.active { color: var(--brand); background: var(--glass-strong); border-color: var(--line-strong); box-shadow: inset 0 0 12px rgba(59,130,255,.25); }
.nav-item svg { width: 22px; height: 22px; }
.main { padding: 28px clamp(16px, 3vw, 40px); max-width: 1320px; width: 100%; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, 1fr); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.tabbar { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 16px 16px 96px; }
  .col-4, .col-6, .col-8 { grid-column: span 12; }
  .col-3 { grid-column: span 6; }
  .tabbar {
    display: flex; justify-content: space-around; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20;
    padding: 8px; border-radius: 22px; background: var(--surface-strong); border: 1px solid var(--line); backdrop-filter: blur(18px);
  }
  .tabbar .nav-item { width: auto; padding: 6px 14px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
}

/* ---------- 卡片 ---------- */
.card {
  position: relative; padding: 20px; border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--line); backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.card.highlight { border-color: rgba(59,130,255,.55); box-shadow: var(--shadow), var(--glow); }
.card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--text-2); font-size: 13px; letter-spacing: .4px; }
.stat { font-size: 34px; font-weight: 600; line-height: 1.1; }
.stat small { font-size: 15px; color: var(--text-2); margin-left: 4px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--glass); color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer; transition: .2s; white-space: nowrap;
}
.btn:hover { background: var(--glass-strong); }
.btn-primary { border: 0; background: var(--brand-grad); color: #fff; box-shadow: 0 6px 20px rgba(59,130,255,.35); }
.btn-primary:hover { filter: brightness(1.1); background: var(--brand-grad); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn[disabled], .btn.loading { opacity: .55; pointer-events: none; }
.btn.loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text-2); }
.input, select.input {
  height: 42px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; outline: none; transition: .2s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,255,.18); }
.input.invalid { border-color: var(--bad); }
.field .error { color: var(--bad); font-size: 12px; }

/* ---------- 表格 / 列表 ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid rgba(148,163,255,.07); }
.table tr:hover td { background: rgba(148,163,255,.04); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.table-wrap { overflow-x: auto; }
@media (max-width: 900px) {
  .table { min-width: 640px; }
  .table:has(.m-hide) { min-width: 0; }  /* 已为手机隐藏次要列的表格不需要横向滚动 */
  .ring { --size: 84px !important; }
  .stat { font-size: 28px; }
}

/* ---------- 状态标签 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--text-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--ok); border-color: rgba(52,211,153,.3); }
.badge.warn { color: var(--warn); border-color: rgba(245,165,36,.3); }
.badge.bad { color: var(--bad); border-color: rgba(244,63,94,.3); }
.badge.info { color: var(--brand); border-color: rgba(59,130,255,.35); }

/* ---------- 数据：圆环 / 进度条 ---------- */
.ring {
  --p: 0; --size: 120px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 200deg, #2f6bff, #7c5cff calc(var(--p) * 1%), rgba(148,163,255,.12) 0);
  filter: drop-shadow(0 0 10px rgba(91,110,255,.45));
}
.ring::before { content: ""; grid-area: 1 / 1; width: calc(var(--size) - 16px); height: calc(var(--size) - 16px); border-radius: 50%; background: var(--bg-2); }
.ring > * { grid-area: 1 / 1; z-index: 1; text-align: center; }
.bar { height: 6px; border-radius: 99px; background: rgba(148,163,255,.12); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); box-shadow: var(--glow); }
.bar.warn > i { background: linear-gradient(90deg, #f5a524, #ff7a45); }
.bar.bad > i { background: linear-gradient(90deg, #f43f5e, #ff7a45); }

/* ---------- 提示 / 弹窗 / 空状态 / 横幅 ---------- */
.toast-box { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--line-strong); box-shadow: var(--shadow); min-width: 220px; }
.toast.bad { border-color: rgba(244,63,94,.5); }
.toast.ok { border-color: rgba(52,211,153,.5); }
.modal-mask { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(2,4,12,.65); backdrop-filter: blur(6px); padding: 16px; }
.modal { width: min(460px, 100%); max-height: 90vh; overflow: auto; }
.empty { padding: 36px 16px; text-align: center; color: var(--text-3); }
.alert-banner { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; color: #ffd5dc; background: linear-gradient(90deg, rgba(244,63,94,.25), rgba(244,63,94,.08)); border: 1px solid rgba(244,63,94,.45); }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, rgba(148,163,255,.06), rgba(148,163,255,.14), rgba(148,163,255,.06)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 登录页 / 选项卡 / 开关 / 分页 / 选择卡 ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(420px, 100%); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.brand .logo { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-grad); box-shadow: var(--glow); display: grid; place-items: center; font-weight: 700; color: #fff; }
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); margin-bottom: 20px; scrollbar-width: none; }
.tabs button, .tabs a { flex: 1 0 auto; display: grid; place-items: center; padding: 0 12px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.tabs button.active, .tabs a.active { background: var(--brand-grad); color: #fff; }
.switch { display: inline-block; vertical-align: middle; position: relative; width: 40px; height: 22px; border-radius: 99px; background: var(--glass-strong); border: 1px solid var(--line-strong); cursor: pointer; transition: .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: .2s; }
.switch.on { background: var(--brand-grad); border-color: transparent; }
.switch.on::after { left: 20px; background: #fff; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.choice { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.choice.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,255,.18); }
.choice small { display: block; color: var(--text-3); font-size: 12px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.icon-btn svg { width: 18px; height: 18px; }
.qr-box { display: grid; place-items: center; padding: 16px; background: #fff; border-radius: 12px; width: fit-content; margin: 8px auto; }
.price { font-size: 28px; font-weight: 600; }
:root[data-theme="light"] .alert-banner { color: #b4233f; }

/* ---------- 侧栏底部 / 手机专用 ---------- */
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sidebar-foot .nav-item { background: transparent; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--brand-grad); color: #fff; font: 600 13px var(--font); cursor: pointer; box-shadow: var(--glow); margin-top: 8px; }
button.nav-item { border: 1px solid transparent; font: inherit; }
.mobile-only { display: none; }
@media (max-width: 900px) {
  .mobile-only { display: flex; }
  .tabbar { overflow-x: auto; justify-content: flex-start; gap: 4px; }
  .tabbar .nav-item { flex: 1 0 auto; }
  .tabbar .nav-item svg { width: 20px; height: 20px; }
}

/* ---------- 问候卡（参考图 2：问候 + 时间 + 发光波形） ---------- */
.hero { overflow: hidden; min-height: 170px; }
.hero .chip { padding: 4px 12px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; }
.hero h1 { font-size: 30px; margin: 6px 0 4px; }
.wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; pointer-events: none; }
.wave path.line { fill: none; stroke: url(#waveGrad); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(59,130,255,.8)); }
.wave path.area { fill: url(#waveFill); }
.wave circle { fill: #8fb4ff; filter: drop-shadow(0 0 4px #3b82ff); }

/* ---------- 快捷入口（参考图 2/3 的图标格） ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: 12px var(--font); cursor: pointer; transition: .2s; }
.tile:hover { color: var(--text); border-color: var(--line-strong); box-shadow: var(--glow); }
.tile { --c: #3b82ff; }
.tile i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 12%, transparent));
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--c) 28%, transparent); }
.tile:hover i { color: #fff; background: var(--c); }
.tile i svg { width: 22px; height: 22px; }

/* ---------- 柱状图（参考图 2：Weekly Activity） ---------- */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 24px; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; position: relative; }
.bars .col b { width: 10px; min-height: 4px; border-radius: 99px; background: linear-gradient(180deg, #7cb3ff, #2f6bff); box-shadow: 0 0 12px rgba(59,130,255,.6); }
.bars .col span { font-size: 11px; color: var(--text-3); }
.bars .col em { position: absolute; top: -22px; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--glass-strong); border: 1px solid var(--line); opacity: 0; transition: .2s; white-space: nowrap; }
.bars .col:hover em, .bars .col.top em { opacity: 1; }

/* ---------- 登录页大标题（参考图 1） ---------- */
.auth-wrap.split { grid-template-columns: 1.2fr 1fr; gap: 48px; max-width: 1120px; margin: 0 auto; }
.auth-hero .eyebrow { font-style: italic; font-size: 22px; color: var(--brand); }
.auth-hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.15; margin: 8px 0 12px; }
.auth-hero .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.auth-hero .features .card { padding: 16px; text-align: center; }
.auth-hero .slogan { margin-top: 24px; letter-spacing: 6px; color: var(--text-2); }
@media (max-width: 900px) {
  .auth-wrap.split { grid-template-columns: minmax(0, 1fr); gap: 24px; }   /* minmax(0, …)：内容再宽也不撑破手机屏幕 */
  .auth-hero h1 { font-size: 34px; }
  .auth-hero .features { display: none; }
}
.card-title svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 600px) {
  .bars { gap: 4px; }
  .bars .col span { font-size: 10px; white-space: nowrap; }
  .bars .col:nth-child(odd) span { visibility: hidden; }
  .stat { font-size: 24px; }
}
.bars { overflow: hidden; } .bars .col:last-child em { right: 0; } .bars .col:first-child em { left: 0; }

/* ---------- 转发规则表（工具栏、行内编辑、彩色操作按钮、分页） ---------- */
.rules-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.rules-toolbar .search { margin-left: auto; display: flex; gap: 6px; min-width: 260px; flex: 0 1 360px; }
.rules-toolbar .search .input { flex: 1; }
.btn svg { width: 15px; height: 15px; }
.btn[disabled] { opacity: .45; }
.btn-warn { border: 0; color: #fff; background: linear-gradient(135deg, #f5a524, #ff8a3d); }
.btn-ok { border: 0; color: #fff; background: linear-gradient(135deg, #22c38e, #34d399); }
.btn-info { border: 0; color: #fff; background: linear-gradient(135deg, #3b82ff, #6d8bff); }
.btn-danger { border: 0; color: #fff; background: linear-gradient(135deg, #f43f5e, #ff6b81); }
.btn-warn:hover, .btn-ok:hover, .btn-info:hover, .btn-danger:hover { filter: brightness(1.1); }
.input-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.textarea { height: auto; padding: 10px 14px; resize: vertical; font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.chip-mono { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--glass-strong); border: 1px solid var(--line); font-family: var(--mono); }
.edit-btn { width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; vertical-align: middle; }
.edit-btn:hover { color: var(--brand); }
.edit-btn svg { width: 15px; height: 15px; }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.rules-table td, .rules-table th { text-align: center; }
.rules-table td:first-child, .rules-table th:first-child { width: 36px; }
.rules-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); }
.list-scroll { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pager { flex-wrap: wrap; }
@media (max-width: 900px) {
  .rules-toolbar .search { margin-left: 0; flex: 1 1 100%; min-width: 0; }
  .rules-table { min-width: 980px; }
}
button.badge { cursor: pointer; font: inherit; font-size: 12px; }
.site-foot { text-align: center; padding: 0 16px 24px; }
.site-foot a { color: var(--text-3); }
.legal h2 { margin: 24px 0 8px; }
.legal p { color: var(--text-2); line-height: 1.8; margin: 6px 0; }

/* ---------- 规则到期按钮 / 浮层 / 实时日志 ---------- */
.exp-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); color: var(--text-3); cursor: pointer; font: 12px var(--mono); display: inline-grid; place-items: center; }
.exp-btn svg { width: 16px; height: 16px; }
.exp-btn:hover { color: var(--brand); border-color: var(--brand); }
.exp-btn.is-set { color: var(--brand); border-color: rgba(59,130,255,.45); }
.exp-btn.is-expired { color: var(--bad); border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.08); }
.popover { position: absolute; z-index: 80; width: 300px; padding: 14px; background: var(--surface-strong); }
.popover .card-title svg { width: 16px; height: 16px; color: var(--brand); }
.popover p { margin: 8px 0; }
.field-error { color: var(--bad); font-size: 12px; min-height: 0; }
.field-error:not(:empty) { margin-bottom: 8px; }
.log-box { height: 180px; overflow: auto; padding: 8px 10px; border-radius: 10px; background: #050816; border: 1px solid var(--line); font: 12px/1.6 var(--mono); word-break: break-all; }
.log-box .log-ok { color: #34d399; } .log-box .log-bad { color: #fb7185; } .log-box .log-info { color: #94a3b8; }
.popover .card-title { justify-content: flex-start; gap: 6px; color: var(--text); }

.traffic-tip { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.7; color: var(--text-2); background: var(--glass); border: 1px solid var(--line); }
.traffic-tip.warn { color: #fcd34d; background: rgba(245,165,36,.10); border-color: rgba(245,165,36,.4); }
:root[data-theme="light"] .traffic-tip.warn { color: #92400e; }
.alert-banner a, .traffic-tip a { font-weight: 600; }

/* ---------- 折线图 ---------- */
.line-chart .grid { stroke: var(--line); stroke-width: 1; }
.line-chart .axis { fill: var(--text-3); font-size: 11px; }
.line-chart .cross { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.line-chart .chart-tip { position: absolute; top: 4px; min-width: 110px; padding: 6px 10px; border-radius: 8px; font-size: 12px; pointer-events: none;
  background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.25); color: var(--text); }

/* ---------- 手机上隐藏次要列 / 显示补充信息（tableHtml 第三个参数） ---------- */
.m-show { display: none; }
@media (max-width: 720px) { .m-hide { display: none; } .m-show { display: block; } }

/* ---------- 左标签右输入框（接口与密钥） ---------- */
.form-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.form-row > label { padding-top: 10px; text-align: right; color: var(--text-2); font-size: 14px; }
.form-hint { font-size: 12px; margin-top: 4px; }
.form-row .input { width: 100%; }
.form-row > label .form-hint { text-align: right; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; gap: 6px; } .form-row > label { padding-top: 0; text-align: left; } .form-row > label .form-hint { text-align: left; } }

/* ---------- 就地提示（toast 显示在操作位置） ---------- */
.inline-note { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; border: 1px solid var(--line); background: var(--glass-strong); color: var(--text); white-space: normal; }
.inline-note.bad { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.inline-note.bad::before { content: "⚠ "; }
.inline-note.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.inline-note.ok::before { content: "✓ "; }
.inline-note.page { margin: 0 0 16px; }
td > .inline-note { margin-top: 6px; max-width: 320px; }

/* 邮件预览（白底，和收件箱里看到的一样） */
.mail-preview { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* ---------- 工单对话 ---------- */
.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 82%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-strong); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.msg.note { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); border-style: dashed; }
.msg.system { align-self: center; max-width: 92%; background: transparent; border-style: dashed; }
.msg-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
.msg-head .faint { margin-left: auto; font-size: 12px; }
.msg-body { line-height: 1.7; word-break: break-word; }
.atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.att-thumb { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--glass); cursor: pointer; width: 96px; height: 72px; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.link-btn { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font: inherit; }
.star { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--line-strong); cursor: pointer; padding: 0 2px; }
.star.on { color: #f5b400; }
.nav-item.dot { position: relative; }
.nav-item.dot::after { content: ""; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 720px) { .msg { max-width: 100%; } }

/* hidden 属性一律隐藏（不被 .field 等的 display 覆盖） */
[hidden] { display: none !important; }

/* 后台：点客户手机号 / 姓名 / 邮箱打开客户详情 */
.client-link { color: inherit; text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; cursor: pointer; }
.client-link:hover { color: var(--brand); text-decoration-color: currentColor; }

/* 侧栏：新版只显示图标；经典版显示品牌名和菜单文字 */
.side-brand { display: flex; align-items: center; gap: 10px; }
.side-brand b, .sidebar .nav-label { display: none; }

/* ==========================================================================
 * 经典版主题（后台“设置与日志 → 前台主题”切换，只作用于客户前台）
 * 参照原前端：白底、浅灰背景、蓝色主按钮、左侧文字菜单。只覆盖变量和少量布局，组件不变
 * ========================================================================== */
:root[data-skin="classic"] {
  --bg: #f4f6fa;
  --bg-2: #ffffff;
  --glass: #f6f8fc;
  --glass-strong: #eef2f9;
  --line: #e6eaf2;
  --line-strong: #d3dae8;
  --text: #1f2937;
  --text-2: #4b5563;
  --text-3: #8a94a6;
  --brand: #2563eb;
  --brand-2: #2563eb;
  --brand-grad: linear-gradient(0deg, #2563eb, #2563eb);
  --glow: 0 0 0 transparent;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --card-bg: #ffffff;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  --page-bg: #f4f6fa;
  color-scheme: light;
}
:root[data-skin="classic"] body { background-attachment: scroll; }
:root[data-skin="classic"] .card { backdrop-filter: none; }
:root[data-skin="classic"] .card.highlight { border-color: #bfd3ff; box-shadow: var(--shadow); }
:root[data-skin="classic"] .grad-text { background: none; color: var(--brand); -webkit-text-fill-color: currentColor; }
:root[data-skin="classic"] .btn-primary { box-shadow: none; }
:root[data-skin="classic"] .btn-primary:hover { filter: none; background: #1d4ed8; }
:root[data-skin="classic"] .btn { border-color: var(--line-strong); background: #fff; }
:root[data-skin="classic"] .btn:hover { background: var(--glass); }
:root[data-skin="classic"] .btn-primary, :root[data-skin="classic"] .btn-danger, :root[data-skin="classic"] .btn-ok,
:root[data-skin="classic"] .btn-warn, :root[data-skin="classic"] .btn-info { border-color: transparent; }
:root[data-skin="classic"] .btn-primary { background: var(--brand); }
:root[data-skin="classic"] .input, :root[data-skin="classic"] select.input { background: #fff; }
:root[data-skin="classic"] .input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
:root[data-skin="classic"] .table td { border-bottom-color: var(--line); }
:root[data-skin="classic"] .table tr:hover td { background: #f8fafd; }
:root[data-skin="classic"] .alert-banner { color: #b4233f; background: #fff1f3; border-color: #fecdd3; }
:root[data-skin="classic"] .traffic-tip.warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }
:root[data-skin="classic"] .modal-mask { background: rgba(15, 23, 42, .35); }
:root[data-skin="classic"] .ring { filter: none; }
:root[data-skin="classic"] .bar > i, :root[data-skin="classic"] .bars .col b { box-shadow: none; }
:root[data-skin="classic"] .tile i { background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); box-shadow: none; }
:root[data-skin="classic"] .tile:hover i { background: var(--c); color: #fff; }
:root[data-skin="classic"] .tile:hover { box-shadow: none; border-color: #bfd3ff; }
:root[data-skin="classic"] .wave path.line { filter: none; }
:root[data-skin="classic"] .tabs { background: #f1f4f9; }
:root[data-skin="classic"] .switch.on { background: var(--brand); }
/* 主题跟随后台设置，经典版不提供深色切换 */
:root[data-skin="classic"] [data-act="theme"], :root[data-skin="classic"] [data-theme-label] { display: none !important; }

/* 经典版侧栏：宽菜单 + 文字 */
@media (min-width: 901px) {
  :root[data-skin="classic"] .app { grid-template-columns: 220px 1fr; }
  :root[data-skin="classic"] .sidebar { align-items: stretch; padding: 20px 14px; background: #fff; backdrop-filter: none; border-right-color: var(--line); }
  :root[data-skin="classic"] .side-brand { margin: 0 6px 18px; }
  :root[data-skin="classic"] .side-brand .logo { margin: 0; box-shadow: none; width: 34px; height: 34px; border-radius: 10px; color: #fff; }
  :root[data-skin="classic"] .side-brand b { display: inline; font-size: 18px; }
  :root[data-skin="classic"] .sidebar .nav-item { width: 100%; height: 42px; display: flex; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 10px; color: var(--text-2); }
  :root[data-skin="classic"] .sidebar .nav-label { display: inline; font-size: 14px; }
  :root[data-skin="classic"] .sidebar .nav-item svg { width: 18px; height: 18px; }
  :root[data-skin="classic"] .sidebar .nav-item:hover { background: var(--glass); color: var(--text); }
  :root[data-skin="classic"] .sidebar .nav-item.active { background: #eef3ff; color: var(--brand); border-color: transparent; box-shadow: inset -3px 0 0 var(--brand); font-weight: 600; }
  :root[data-skin="classic"] .sidebar-foot { align-items: flex-start; padding: 0 6px; }
  :root[data-skin="classic"] .avatar { box-shadow: none; }
}
:root[data-skin="classic"] .tabbar { background: #fff; box-shadow: 0 4px 20px rgba(16, 24, 40, .08); }

/* 后台：前台主题选择 */
.skin-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skin-pick { text-align: left; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.skin-pick span { color: var(--text-3); font-size: 12px; }
.skin-pick.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,255,.18); }
.skin-swatch { display: block; height: 54px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--line); }
.skin-swatch.modern { background: linear-gradient(90deg, #0a1030 0 18%, transparent 18%), radial-gradient(120px 60px at 80% 0%, rgba(124,92,255,.45), transparent), #050816; }
.skin-swatch.classic { background: linear-gradient(90deg, #fff 0 18%, transparent 18%), linear-gradient(#2563eb, #2563eb) 30% 60% / 30% 18% no-repeat, #f4f6fa; }

/* ---------- 选购中心：分类、商品卡片、配置页（左配置，右价格明细与支付） ---------- */
.shop-filter { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; margin-bottom: var(--gap); }
.filter-label { padding-top: 10px; color: var(--text-2); font-size: 13px; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.group-card { text-align: left; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: .2s; }
.group-card:hover { border-color: var(--line-strong); }
.group-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,255,.18); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.product-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
/* 鼠标放到商品上：上浮 + 蓝色描边发光，让人知道可以点 */
.product-card:hover, .product-card:focus-visible { transform: translateY(-6px); border-color: var(--brand); outline: none;
  box-shadow: 0 18px 40px -12px rgba(59,130,255,.45), 0 0 0 1px rgba(59,130,255,.35); }
.product-card:hover .btn-primary { box-shadow: var(--glow); }
@media (prefers-reduced-motion: reduce) { .product-card, .product-card:hover { transition: none; transform: none; } }
/* 选购中心两级分类：一级大按钮，二级小胶囊 */
.shop-cats { margin-bottom: var(--gap); display: grid; gap: 12px; }
.shop-cats .shop-filter { margin: 0; }
.cat-tabs, .sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tab { padding: 10px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: .2s; }
.cat-tab:hover { border-color: var(--line-strong); }
.cat-tab.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,255,.18); }
.sub-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; transition: .2s; }
.sub-tab:hover { color: var(--text); border-color: var(--line-strong); }
.sub-tab.active { background: var(--brand-grad); color: #fff; border-color: transparent; }
.product-card .tag { align-self: flex-start; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: var(--brand); background: rgba(59,130,255,.12); border: 1px solid rgba(59,130,255,.3); }
.product-card h3 { font-size: 18px; }
.product-desc { color: var(--text-2); font-size: 13px; line-height: 1.7; }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.spec-list li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; }
.spec-list span { color: var(--text-3); }
.spec-list b { font-weight: 500; }
.product-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; }
.product-price { font-size: 26px; font-weight: 600; color: var(--brand); }
.product-price small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 2px; }
.cfg-block h3 { margin-bottom: 14px; }
.region + .region { margin-top: 10px; }
.region > .faint { display: block; margin-bottom: 6px; }
.choice-price { font-weight: 600; margin-left: 4px; }
.choice .save { color: var(--ok); white-space: nowrap; }
.choice-grid.wide { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.buy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); align-items: start; }
.buy-summary { position: sticky; top: 24px; padding: 0; overflow: hidden; }
.sum-head { padding: 22px 20px; text-align: center; background: var(--brand-grad); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.sum-head span, .sum-head small { opacity: .85; font-size: 13px; }
.sum-head b { font-size: 36px; font-weight: 700; }
.sum-body { padding: 18px 20px 20px; }
.sum-lines { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sum-lines dt { color: var(--text-2); }
.sum-lines dd { margin: 0; text-align: right; }
.sum-credit { margin-bottom: 14px; }
.sum-pay { display: grid; gap: 8px; }
.pay-way { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.pay-way input { grid-row: span 2; accent-color: var(--brand); }
.pay-way span { color: var(--text-3); font-size: 12px; }
.pay-way.active { border-color: var(--brand); background: rgba(59,130,255,.08); }
.pay-way.off { opacity: .5; cursor: not-allowed; }
.sum-buy { width: 100%; height: 46px; margin-top: 16px; font-size: 15px; }
.buy-bar { display: none; }
@media (max-width: 900px) {
  .shop-filter { grid-template-columns: 1fr; gap: 6px; }
  .filter-label { padding-top: 0; }
  .buy-layout { grid-template-columns: 1fr; }
  .buy-summary { position: static; }
  .buy-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 19;
    padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--surface-strong); border: 1px solid var(--line-strong); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
  .buy-bar b { font-size: 20px; }
  .main:has(.buy-bar) { padding-bottom: 170px; }
}

/* 菜单分组标题、经典版名称：新版不显示 */
.nav-group, .skin-c { display: none; }
:root[data-skin="classic"] .skin-m { display: none; }
:root[data-skin="classic"] .skin-c { display: inline; }

/* ---------- 经典版：照原前端截图（白底、分组菜单、顶部紫色细条、黑色“立即配置”、蓝色价格头） ---------- */
:root[data-skin="classic"] body { border-top: 4px solid #6d4fc2; }
:root[data-skin="classic"] h1, :root[data-skin="classic"] h3 { color: #111827; font-weight: 700; }
:root[data-skin="classic"] .card { border-radius: 14px; border-color: #edf0f5; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
:root[data-skin="classic"] .product-card .btn-primary { background: #111827; border-radius: 10px; height: 40px; padding: 0 22px; font-weight: 600; }
:root[data-skin="classic"] .product-card .btn-primary:hover { background: #1f2937; }
:root[data-skin="classic"] .product-card .tag { background: #eef3ff; border-color: #dbe6ff; color: #2563eb; }
:root[data-skin="classic"] .product-card:hover { border-color: #2563eb; box-shadow: 0 16px 32px -14px rgba(37,99,235,.35), 0 0 0 1px rgba(37,99,235,.25); }
:root[data-skin="classic"] .product-card:hover .btn-primary { box-shadow: none; background: #2563eb; }
:root[data-skin="classic"] .cat-tab.active { border-color: #2563eb; background: #eef4ff; box-shadow: none; }
:root[data-skin="classic"] .sub-tab.active { background: #2563eb; }
:root[data-skin="classic"] .group-card.active, :root[data-skin="classic"] .choice.active { border-color: #2563eb; background: #eef4ff; box-shadow: none; }
:root[data-skin="classic"] .choice.active { box-shadow: inset 0 0 0 1px #2563eb; }
:root[data-skin="classic"] .sum-head { background: #2563eb; padding: 28px 20px; }
:root[data-skin="classic"] .sum-buy, :root[data-skin="classic"] .btn-primary { border-radius: 10px; }
:root[data-skin="classic"] .pay-way.active { background: #f5f8ff; }
:root[data-skin="classic"] .tabs button.active, :root[data-skin="classic"] .tabs a.active { background: #2563eb; }
@media (min-width: 901px) {
  :root[data-skin="classic"] .app { grid-template-columns: 240px 1fr; }
  :root[data-skin="classic"] .sidebar { gap: 2px; }
  :root[data-skin="classic"] .sidebar > * { order: var(--o, 99); }
  :root[data-skin="classic"] .side-brand { order: -1; }
  :root[data-skin="classic"] .sidebar-foot { order: 100; }
  :root[data-skin="classic"] .nav-group { display: block; margin: 14px 12px 6px; font-size: 12px; font-weight: 600; color: #374151; }
  :root[data-skin="classic"] .sidebar .nav-item { height: 44px; font-weight: 500; color: #374151; }
  :root[data-skin="classic"] .sidebar .nav-item.active { background: #eef3ff; color: #2563eb; box-shadow: inset -3px 0 0 #2563eb; }
}
.choice.fixed { cursor: default; font-weight: 600; }
.choice.fixed small { font-weight: 400; margin-bottom: 2px; }
/* 选购配置页：按数量（滑块 + 加减 + 输入） */
.qty { display: grid; grid-template-columns: 36px 1fr 36px 160px; gap: 12px; align-items: center; }
.qty input[type=range] { width: 100%; accent-color: var(--brand); }
.qty-input { position: relative; }
.qty-input .input { width: 100%; text-align: right; padding-right: 44px; font-weight: 600; }
.qty-input span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 12px; }
.qty-hint { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 0 48px; }
@media (max-width: 900px) { .qty { grid-template-columns: 36px 1fr 36px; } .qty-input { grid-column: 1 / -1; } .qty-hint { padding: 0; flex-wrap: wrap; } }

/* 信息两列表（客户详情“账户信息”）：标签 + 值，手机上变一列 */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.kv > div { display: flex; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.kv > div:nth-child(odd) { padding-right: 16px; }
.kv > div > span:first-child { color: var(--text-3); width: 84px; flex: none; }
/* 四列表单（客户详情“基础资料”），窄屏自动变两列 / 一列 */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .field, .form-grid .input { min-width: 0; }
@media (max-width: 900px) { .kv { grid-template-columns: 1fr; } .kv > div:nth-child(odd) { padding-right: 4px; } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-grid .span-2 { grid-column: auto; } }

/* ---------- 我的产品：到期变色、状态筛选、卡片 / 列表切换、勾选续费 ---------- */
.grow { flex: 1; min-width: 0; }
.due-warn { color: var(--warn); font-weight: 600; }
.due-bad { color: var(--bad); font-weight: 600; }
/* 快到期（7 天内）橙色、已到期 / 欠费暂停红色：边框 + 左侧色条 + 淡色底 */
.svc.warn, :root[data-skin="classic"] .svc.warn { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); background: linear-gradient(90deg, rgba(245,165,36,.10), transparent 45%), var(--surface); }
.svc.bad, :root[data-skin="classic"] .svc.bad { border-color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); background: linear-gradient(90deg, rgba(244,63,94,.12), transparent 45%), var(--surface); }
.svc.ok, :root[data-skin="classic"] .svc.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); box-shadow: inset 4px 0 0 var(--ok); background: linear-gradient(90deg, rgba(52,211,153,.10), transparent 45%), var(--surface); }
.svc.info, :root[data-skin="classic"] .svc.info { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: inset 4px 0 0 var(--brand); background: linear-gradient(90deg, rgba(59,130,255,.10), transparent 45%), var(--surface); }
.svc-row.ok td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
.svc-row.info td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.svc-row.ok td { background: rgba(52,211,153,.05); }
.svc-row.info td { background: rgba(59,130,255,.05); }
.btn-detail { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1d4ed8, #3b5bdb); }
.btn-detail:hover { color: #fff; filter: brightness(1.12); }
.svc-row.warn td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.svc-row.bad td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
.svc-row.warn td { background: rgba(245,165,36,.06); }
.svc-row.bad td { background: rgba(244,63,94,.07); }
.btn-renew-bad { background: var(--bad); color: #fff; border-color: transparent; }
.btn-renew-bad:hover { filter: brightness(1.08); }
.pick { display: inline-flex; align-items: center; cursor: pointer; }
.pick input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.status-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--gap); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; transition: .2s; }
.status-chip:hover { border-color: var(--line-strong); color: var(--text); }
.status-chip b { font-weight: 600; color: var(--text); }
.status-chip.warn b { color: var(--warn); }
.status-chip.bad b { color: var(--bad); }
.status-chip.active { border-color: var(--brand); color: var(--text); box-shadow: 0 0 0 3px rgba(59,130,255,.15); }
.view-toggle { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.view-toggle button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.view-toggle button.active { background: var(--brand-grad); color: #fff; }
/* 勾选了产品后底部出现的操作条（手机上在底部导航上面） */
.select-bar { position: sticky; bottom: 16px; z-index: 15; margin-top: var(--gap); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-strong); border: 1px solid var(--brand); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
@media (max-width: 900px) { .select-bar { bottom: 96px; } }
.batch-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.batch-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: pointer; }
.batch-item input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.batch-item.warn { box-shadow: inset 4px 0 0 var(--warn); }
.batch-item.bad { box-shadow: inset 4px 0 0 var(--bad); }
:root[data-skin="classic"] .view-toggle button.active, :root[data-skin="classic"] .status-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; box-shadow: none; }
:root[data-skin="classic"] .status-chip.active b { color: #fff; }
:root[data-skin="classic"] .select-bar { background: #fff; border-color: #2563eb; }
:root[data-skin="classic"] .btn-renew-bad { background: var(--bad); color: #fff; border-color: transparent; border-radius: 10px; }
:root[data-skin="classic"] .btn-renew-bad:hover { background: #e11d48; }
:root[data-skin="classic"] .btn-ok { background: #16a34a; } :root[data-skin="classic"] .btn-ok:hover { background: #15803d; filter: none; }
:root[data-skin="classic"] .btn-warn { background: #f59e0b; } :root[data-skin="classic"] .btn-warn:hover { background: #d97706; filter: none; }
:root[data-skin="classic"] .btn-detail { color: #fff; background: #1e40af; border-color: transparent; }
:root[data-skin="classic"] .btn-detail:hover { color: #fff; background: #1e3a8a; }
/* 我的产品顶部：标题不被按钮挤成两行，按钮放不下就换到下一行 */
.topbar-wrap { flex-wrap: wrap; }
.topbar-wrap > div:first-child { flex: 1 0 auto; }
.topbar-wrap h1 { white-space: nowrap; }
/* 静态 IP 选购：没库存的城市置灰；数量加减 */
.choice.off, .choice:disabled { opacity: .45; cursor: not-allowed; }
.ip-qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 我的产品：静态 IP 连接信息 */
.ip-cred { display: grid; gap: 8px; }
.ip-cred .row { gap: 8px; }
.ip-cred code { font-family: var(--mono); font-size: 13px; padding: 2px 8px; border-radius: 6px; background: var(--glass-strong); border: 1px solid var(--line); word-break: break-all; }

/* ==========================================================================
 * 登录 / 注册 / 找回密码（.lg-*）：左边欢迎区 + 推介活动，右边表单
 * ========================================================================== */
.lg-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 14px; }
.lg-shell { width: min(1180px, 100%); display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; border: 1px solid var(--line-strong); overflow: hidden;
  background: linear-gradient(160deg, rgba(20, 40, 90, .55), rgba(6, 12, 32, .75)); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(18px); }
.lg-hero { padding: 52px 52px 44px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lg-panel { border-left: 1px solid var(--line); display: grid; place-items: center; padding: 44px 40px; background: rgba(3, 8, 24, .35); min-width: 0; }
.lg-box { width: min(384px, 100%); }
.lg-eyebrow { font-style: italic; color: #5aa2ff; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.lg-eyebrow i { width: 34px; height: 1px; background: linear-gradient(90deg, #5aa2ff, transparent); }
.lg-hero h1 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.22; margin: -6px 0 0; letter-spacing: 1px; }
.lg-hero h1 span { background: linear-gradient(90deg, #2f80ff, #5fb0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-lead { color: var(--text-2); font-size: 14px; line-height: 1.75; margin: -6px 0 0; max-width: 400px; }
/* 连接示意：设备 → 节点 → 目标 */
.lg-flow { display: flex; align-items: flex-start; max-width: 430px; margin: 4px 0; }
.lg-node { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); flex: none; }
.lg-node i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #8fbcff; border: 1px solid rgba(90, 150, 255, .35); background: rgba(40, 80, 170, .22); }
.lg-node svg { width: 20px; height: 20px; }
.lg-node.hub i { width: 56px; height: 56px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #2f7bff, #1a4fd6); border: 0;
  box-shadow: 0 0 0 6px rgba(60, 120, 255, .14), 0 0 0 7px rgba(90, 150, 255, .4), 0 0 30px rgba(47, 123, 255, .6); }
.lg-node.hub { margin-top: -6px; }
.lg-node.hub svg { width: 22px; height: 22px; }
.lg-wire { flex: 1; height: 1px; margin: 22px 10px 0; background: linear-gradient(90deg, rgba(90, 150, 255, .25), rgba(120, 170, 255, .8), rgba(90, 150, 255, .25)); position: relative; }
.lg-wire b { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #e8f1ff; box-shadow: 0 0 10px 2px #3b82ff; animation: lg-run 2.6s linear infinite; }
.lg-wire + .lg-node + .lg-wire b { animation-delay: 1.3s; }
@keyframes lg-run { from { left: 0; } to { left: calc(100% - 7px); } }
@media (prefers-reduced-motion: reduce) { .lg-wire b { animation: none; left: 70%; } }
/* 推介活动卡 */
.lg-promo { border-radius: 18px; padding: 18px 18px 16px; border: 1px solid rgba(255, 176, 96, .38); position: relative; overflow: hidden;
  background: radial-gradient(160px 160px at 92% 10%, rgba(255, 176, 96, .14), transparent 70%), linear-gradient(135deg, rgba(120, 70, 30, .45), rgba(40, 26, 20, .35) 60%, rgba(20, 20, 30, .3)); }
.lg-promo-head { display: flex; gap: 14px; align-items: center; }
.lg-gift { width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #ff9d5c, #ff5f6d); box-shadow: 0 0 22px rgba(255, 120, 80, .45); }
.lg-gift svg { width: 26px; height: 26px; }
.lg-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #3a1d00; background: linear-gradient(90deg, #ffc46b, #ffa24a); border-radius: 999px; padding: 2px 8px; }
.lg-tag svg { width: 11px; height: 11px; }
.lg-promo h3 { margin: 6px 0 2px; font-size: 18px; color: #fff3e6; }
.lg-promo p { margin: 0; font-size: 12px; color: #d9c4ae; }
.lg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 14px; }
.lg-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 176, 96, .5); background: rgba(10, 10, 18, .55); }
.lg-step i { color: #ffb45c; } .lg-step i svg { width: 18px; height: 18px; }
.lg-step b { font-size: 12.5px; color: #fff; }
.lg-step small { font-size: 11px; color: #a99a8c; }
.lg-num { position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; color: #3a1d00; background: #ffb45c; box-shadow: 0 0 0 3px rgba(40, 26, 20, .9); }
.lg-promo-btn { width: 100%; height: 42px; border: 0; border-radius: 999px; cursor: pointer; font: 600 14px var(--font); color: #2a1600; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #ffd585, #ff9f45); box-shadow: 0 6px 22px rgba(255, 150, 60, .3); transition: .2s; }
.lg-promo-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lg-promo-btn svg { width: 16px; height: 16px; }
/* 卖点 */
.lg-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-points li { display: flex; gap: 14px; align-items: center; }
.lg-points i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #8fbcff; border: 1px solid rgba(90, 150, 255, .35); background: rgba(40, 80, 170, .2); }
.lg-points svg { width: 16px; height: 16px; }
.lg-points b { display: block; font-size: 14px; }
.lg-points small { color: var(--text-3); font-size: 12px; }
/* 右边表单 */
.lg-brand { display: none; align-items: center; gap: 10px; margin-bottom: 18px; }
.lg-brand .logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--brand-grad); }
.lg-title h2 { font-size: 30px; margin: 0; letter-spacing: 4px; }
.lg-title p { margin: 6px 0 24px; color: var(--text-2); font-size: 13px; }
.lg-title a, .lg-link, .lg-terms a, .lg-check a { color: #4c9bff; font-weight: 600; }
.lg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); margin-bottom: 18px; }
.lg-seg button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: 500 14px var(--font); cursor: pointer; transition: .2s; }
.lg-seg button.active { color: #fff; background: linear-gradient(90deg, #2468ff, #3d8bff); box-shadow: 0 4px 16px rgba(47, 123, 255, .35); }
.lg-seg button:not(.active):hover { color: var(--text); }
.lg-by { display: flex; gap: 20px; margin-bottom: 14px; }
.lg-by button { border: 0; background: none; padding: 0 0 6px; color: var(--text-3); font: 500 12.5px var(--font); cursor: pointer; border-bottom: 2px solid transparent; }
.lg-by button.active { color: #4c9bff; border-bottom-color: #4c9bff; }
.lg-form { display: flex; flex-direction: column; gap: 14px; }
.lg-field { display: flex; flex-direction: column; gap: 8px; }
.lg-field[hidden] { display: none; }
.lg-field > label { font-size: 12.5px; color: var(--text-2); }
.lg-input { position: relative; flex: 1; min-width: 0; }
.lg-input svg { position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.lg-input input, .lg-cc { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); color: var(--text); font: 14px var(--font); padding: 0 14px 0 40px; outline: none; transition: .2s; }
.lg-input input::placeholder { color: var(--text-3); }
.lg-input input:focus, .lg-cc:focus { border-color: #3d8bff; box-shadow: 0 0 0 3px rgba(61, 139, 255, .18); }
.lg-input input[type="password"]:not(:placeholder-shown) { letter-spacing: 3px; }
.lg-phone, .lg-code { display: flex; gap: 10px; }
.lg-cc { width: 82px; flex: none; padding: 0 10px; cursor: pointer; }
.lg-send { flex: none; width: 112px; height: 46px; border-radius: 12px; border: 1px solid rgba(61, 139, 255, .45); background: rgba(47, 123, 255, .12); color: #6aa8ff; font: 500 13px var(--font); cursor: pointer; }
.lg-send:disabled { opacity: .6; cursor: default; }
.lg-forgot { align-self: flex-end; margin-top: -2px; }
.lg-link.small { font-size: 12px; }
.lg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; margin-top: 2px; }
.lg-check input { width: 15px; height: 15px; accent-color: #2f7bff; }
.lg-submit { height: 52px; margin-top: 6px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 600 16px var(--font); letter-spacing: 2px;
  background: linear-gradient(90deg, #1f66ff, #3d8bff 60%, #4aa3ff); box-shadow: 0 10px 30px rgba(47, 123, 255, .4); transition: .2s; }
.lg-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lg-submit.loading { opacity: .7; pointer-events: none; }
.lg-terms { text-align: center; font-size: 12px; color: var(--text-3); margin: 4px 0 0; }
.lg-note { margin: 18px 0 0; font-size: 12px; color: var(--text-3); text-align: center; }
/* 亮色 / 经典版 */
:root[data-theme="light"] .lg-shell, :root[data-skin="classic"] .lg-shell { background: linear-gradient(160deg, #ffffff, #f4f7ff); box-shadow: 0 24px 60px rgba(30, 45, 110, .12); }
:root[data-theme="light"] .lg-panel, :root[data-skin="classic"] .lg-panel { background: #fff; }
:root[data-theme="light"] .lg-input input, :root[data-theme="light"] .lg-cc, :root[data-theme="light"] .lg-seg,
:root[data-skin="classic"] .lg-input input, :root[data-skin="classic"] .lg-cc, :root[data-skin="classic"] .lg-seg { background: #f6f8fd; }
:root[data-theme="light"] .lg-promo, :root[data-skin="classic"] .lg-promo { background: linear-gradient(135deg, #fff4e8, #fffaf5); border-color: #ffd3a6; }
:root[data-theme="light"] .lg-promo h3, :root[data-skin="classic"] .lg-promo h3 { color: #4a2a0c; }
:root[data-theme="light"] .lg-promo p, :root[data-skin="classic"] .lg-promo p, :root[data-theme="light"] .lg-step small, :root[data-skin="classic"] .lg-step small { color: #96765a; }
:root[data-theme="light"] .lg-step, :root[data-skin="classic"] .lg-step { background: #fff; border-color: #ffd3a6; }
:root[data-theme="light"] .lg-step b, :root[data-skin="classic"] .lg-step b { color: #3b2410; }
:root[data-theme="light"] .lg-num, :root[data-skin="classic"] .lg-num { box-shadow: 0 0 0 3px #fff; }
:root[data-theme="light"] .lg-node i, :root[data-theme="light"] .lg-points i, :root[data-skin="classic"] .lg-node i, :root[data-skin="classic"] .lg-points i { color: #2f6bff; background: #eef3ff; }
:root[data-theme="light"] .lg-node.hub i, :root[data-skin="classic"] .lg-node.hub i { color: #fff; background: linear-gradient(145deg, #2f7bff, #1a4fd6); }
:root[data-skin="classic"] .lg-hero h1 span { -webkit-text-fill-color: transparent; }
/* 手机：表单在上，左边只留标题和推介卡 */
@media (max-width: 900px) {
  .lg-page { padding: 14px 12px 24px; justify-content: flex-start; }
  .lg-shell { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .lg-panel { order: -1; border-left: 0; border-bottom: 1px solid var(--line); padding: 28px 20px; }
  .lg-brand { display: flex; }
  .lg-hero { padding: 24px 20px; gap: 16px; }
  .lg-hero h1, .lg-eyebrow, .lg-lead, .lg-flow { display: none; }
  .lg-steps { gap: 6px; }
  .lg-step { padding: 14px 4px 8px; }
  .lg-step small { display: none; }
  .lg-title h2 { font-size: 26px; }
}

/* 侧栏带文字（后台）：图标 + 名称 */
@media (min-width: 901px) {
  :root:not([data-skin="classic"]) .app.labeled { grid-template-columns: 188px 1fr; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar { align-items: stretch; padding: 20px 12px; gap: 4px; overflow-y: auto; }
  :root:not([data-skin="classic"]) .app.labeled .side-brand { margin: 0 6px 14px; }
  :root:not([data-skin="classic"]) .app.labeled .side-brand .logo { margin: 0; width: 36px; height: 36px; border-radius: 11px; }
  :root:not([data-skin="classic"]) .app.labeled .side-brand b { display: inline; font-size: 17px; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .nav-item { width: 100%; height: 42px; display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 0 12px; border-radius: 11px; flex: none; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .nav-label { display: inline; font-size: 14px; white-space: nowrap; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .nav-item svg { width: 19px; height: 19px; flex: none; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(59,130,255,.32), rgba(124,92,255,.14)); }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .nav-item.active svg { color: #8fb4ff; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 10px 4px 0; border-top: 1px solid var(--line); }
  :root:not([data-skin="classic"]) .app.labeled .sidebar-foot .nav-item { width: 40px; height: 40px; padding: 0; justify-content: center; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar-foot .avatar { margin: 0 0 0 auto; }
  :root:not([data-skin="classic"]) .app.labeled .nav-item.dot::after { top: 8px; right: auto; left: 26px; }
}
:root[data-theme="light"] .app.labeled .sidebar .nav-item.active { color: var(--brand); }

/* ==========================================================================
 * 首页账户余额：黑色金属卡（拉丝纹理、铂金字、芯片、感应标志），深浅色和经典版都一样
 * ========================================================================== */
.bank-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.586; min-height: 0;
  padding: 22px 24px 20px; border-radius: 18px; color: #e9e6df; overflow: hidden; isolation: isolate; text-decoration: none;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .10), transparent 45%),
    radial-gradient(90% 120% at 0% 100%, rgba(120, 120, 135, .16), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #2a2b30 0%, #121215 38%, #08080a 62%, #1b1c20 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 -1px 0 rgba(0, 0, 0, .6) inset, 0 18px 40px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .3);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
/* 细纹防伪图案 */
.bank-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-radial-gradient(circle at 115% 120%, transparent 0 14px, rgba(255, 255, 255, .035) 14px 15px); }
/* 划过的反光 */
.bank-card::after { content: ""; position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none; transform: translateX(-60%) rotate(18deg);
  background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, .13) 50%, transparent 60%); transition: transform .9s ease; }
.bank-card:hover { transform: translateY(-4px) rotateX(4deg); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 26px 50px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .3); }
.bank-card:hover::after { transform: translateX(60%) rotate(18deg); }
.bank-top, .bank-mid, .bank-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 2; }
.bank-brand { display: flex; align-items: baseline; gap: 8px; }
.bank-brand b { font-size: 17px; letter-spacing: 3px; font-weight: 700;
  background: linear-gradient(180deg, #ffffff, #b9b6ae 55%, #8d8a83); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bank-brand i { font-style: normal; font-size: 10px; letter-spacing: 3px; padding: 2px 7px; border-radius: 4px; color: #d9d4c7; border: 1px solid rgba(217, 212, 199, .4); }
.bank-nfc { width: 24px; height: 24px; color: rgba(233, 230, 223, .75); transform: rotate(0deg); }
/* 芯片：香槟金，带触点纹路 */
.bank-chip { width: 46px; height: 35px; border-radius: 7px; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f3dfa8 0%, #c9a65a 35%, #f6e7b8 55%, #a8843e 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35) inset, 0 1px 2px rgba(0, 0, 0, .4); }
.bank-chip::before, .bank-chip::after { content: ""; position: absolute; background: rgba(90, 64, 20, .45); }
.bank-chip::before { left: 0; right: 0; top: 33%; height: 1px; box-shadow: 0 11px 0 rgba(90, 64, 20, .45); }
.bank-chip::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.bank-chip i { position: absolute; inset: 9px 14px; border-radius: 4px; border: 1px solid rgba(90, 64, 20, .45); }
.bank-amount { text-align: right; }
.bank-amount small { display: block; font-size: 10.5px; letter-spacing: 2px; color: rgba(233, 230, 223, .55); margin-bottom: 2px; }
.bank-amount b { font: 600 34px/1.05 var(--font); letter-spacing: .5px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 10%, #d7d3ca 55%, #9d9990); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bank-amount em { font-style: normal; font-size: 20px; margin-right: 4px; }
.bank-amount span { font-size: 20px; }
.bank-no { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: 2.5px; color: #d6d2c8; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.bank-bottom small { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: 1.8px; color: rgba(233, 230, 223, .45); }
.bank-pay { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #1a1712;
  background: linear-gradient(180deg, #f6f3ec, #cfcabd); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .35); transition: .2s; }
.bank-pay svg { width: 14px; height: 14px; transition: transform .2s; }
.bank-card:hover .bank-pay svg { transform: translateX(3px); }
.bank-stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 36px; margin-top: 22px; position: relative; z-index: 1; }
.bank-stats b { font-size: 18px; }
.bank-stats > div { display: flex; flex-direction: column; gap: 4px; }
.bank-stats span { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .bank-card, .bank-card::after { transition: none; } }
@media (max-width: 900px) { .bank-amount b { font-size: 30px; } }
@media (max-width: 380px) { .bank-card { padding: 18px 18px 16px; } .bank-no { font-size: 12.5px; letter-spacing: 1.5px; } }

/* ==========================================================================
 * 顶部账号栏（客户前台，电脑）：右上角账号 + 退出登录
 * ========================================================================== */
.appbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: -12px 0 14px; }
.me-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: 13px; transition: .2s; }
.me-chip:hover { color: var(--text); border-color: var(--line-strong); }
.me-chip i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px var(--font); font-style: normal; color: #fff; background: var(--brand-grad); }
.logout-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, transparent); color: color-mix(in srgb, var(--bad) 75%, var(--text));
  font: 500 13px var(--font); transition: .2s; }
.logout-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.logout-btn:hover { color: #fff; background: var(--bad); border-color: var(--bad); box-shadow: 0 6px 18px color-mix(in srgb, var(--bad) 35%, transparent); }
.logout-btn:hover svg { transform: translateX(2px); }
.app.has-appbar .sidebar-foot .avatar { display: none; }
@media (max-width: 900px) { .appbar { display: none; } }
:root[data-skin="classic"] .me-chip { background: #fff; }
:root[data-skin="classic"] .logout-btn:hover { box-shadow: none; }

/* 首页问候卡和右边银行卡等高，波形贴底 */
@media (min-width: 901px) { .hero-fill { height: 100%; display: flex; flex-direction: column; } .hero-fill > svg:last-child, .hero-fill > .wave { margin-top: auto; } }
.hero-fill .wave { height: 64px; opacity: .85; }
.hero-fill { padding-bottom: 60px; }

/* 新版 / 经典版切换 */
.skin-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.skin-switch button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; transition: .2s; }
.skin-switch button:hover { color: var(--text); }
.skin-switch button.active { color: #fff; background: var(--brand-grad); }
.skin-switch.big button { height: 34px; padding: 0 20px; font-size: 14px; }
:root[data-skin="classic"] .skin-switch { background: #fff; }
:root[data-skin="classic"] .skin-switch button.active { background: var(--brand); }

/* 新版客户侧栏：分组、顺序、菜单名和经典版一样（会员中心 / 我的资源 / 用户中心 / 帮助支持），只是配色用新版 */
@media (min-width: 901px) {
  :root:not([data-skin="classic"]) .app.labeled.has-appbar { grid-template-columns: 212px 1fr; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar > * { order: var(--o, 99); }
  :root:not([data-skin="classic"]) .app.labeled .side-brand { order: -1; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar-foot { order: 100; }
  :root:not([data-skin="classic"]) .app.labeled .nav-group { display: block; margin: 14px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text-3); }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .skin-m { display: none; }
  :root:not([data-skin="classic"]) .app.labeled .sidebar .skin-c { display: inline; }
}