/* ==========================================================================
   Relay Console - 全局样式
   依据 UI 策划案：CSS 变量、8px 间距、克制工具型控制台风格
   ========================================================================== */

:root {
  /* ===== 芭乐品牌色板 · UI 2.0 冷色调未来感（保留原令牌名，仅调取值）===== */
  --color-primary: #3B4CD4;          /* 冷靛蓝（主色，玻璃底上 ≥4.5:1） */
  --color-primary-hover: #3B4CD2;
  --color-primary-soft: #EDF0FE;
  --brand-pink: #C2588A;             /* 果肉粉（深版，小面积文字/图标） */
  --brand-pink-soft: #FBEAF2;
  --brand-teal: #2E8EA0;             /* 果皮青（深版） */
  --brand-teal-soft: #E4F4F7;
  --brand-blue-soft: #E8F1FB;        /* 科技蓝浅底 */
  --accent-cyan: #22D3EE;            /* 冷青：仅用于发光/描边/点缀，不承载文字 */
  --accent-cyan-soft: #E2FAFE;
  --brand-grad: linear-gradient(135deg, #4C5FE4 0%, #7E7BF5 52%, #22C3E6 100%); /* 冷色品牌渐变：靛蓝 → 青 */
  --color-success: #14774A;
  --color-success-soft: #E5F6EE;
  --color-warning: #94600A;
  --color-warning-soft: #FBF1DE;
  --color-danger: #C02C3A;
  --color-danger-soft: #FBEAEC;
  --color-info: #2A7FD4;             /* 科技蓝 */
  --color-info-soft: #E8F1FB;
  --color-text: #101426;             /* 冷调深蓝灰文本 */
  --color-text-secondary: #454D66;
  --color-text-muted: #5B6478;
  --color-border: #E1E7F3;           /* 冷调浅边框 */
  --color-border-strong: #C9D3E6;
  --color-surface: #ffffff;
  --color-page: #EDF1F9;             /* 冷灰蓝页面底：衬托玻璃面板 */
  --color-sidebar: rgba(255, 255, 255, .62);
  --color-sidebar-hover: rgba(76, 95, 228, .07);
  --color-sidebar-active: rgba(76, 95, 228, .12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 48, 0.06), 0 1px 3px rgba(16, 24, 48, 0.05);
  --shadow-md: 0 4px 14px -4px rgba(16, 24, 48, 0.14), 0 16px 40px -18px rgba(16, 24, 48, 0.28);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sidebar-w: 240px;
  --topbar-h: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
h1,h2,h3,h4 { margin: 0 0 12px; font-weight: 600; }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 12px; }

.mono, code, pre, .request-id, .model-name { font-family: var(--font-mono); }
code { background: #f0f2f7; border-radius: 4px; padding: 2px 6px; font-size: 13px; word-break: break-all; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }

/* 侧栏 */
.sidebar {
  width: var(--sidebar-w);
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  position: fixed;
  top: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 30;
}
.sidebar-brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 18px; font-weight: 700;
}
.sidebar-brand .brand-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--color-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.sidebar-brand .brand-logo-img {
  width: 32px; height: 32px; object-fit: contain;
  border-radius: 8px; display: inline-block;
}
.sidebar-brand small { color: var(--color-text-muted); font-weight: 400; font-size: 12px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-group-title {
  font-size: 12px; color: var(--color-text-muted);
  padding: 12px 12px 6px; letter-spacing: .3px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-size: 14px; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--color-sidebar-hover); color: var(--color-text); }
.nav-item.active { background: var(--color-sidebar-active); color: var(--color-primary); font-weight: 600; }
.nav-item svg, .nav-item .icon { width: 18px; height: 18px; flex: none; }
.nav-item .badge { margin-left: auto; background: var(--color-danger); color: #fff; font-size: 11px; border-radius: 10px; padding: 0 7px; }

.sidebar-foot { border-top: 1px solid var(--color-border); padding: 12px 16px; font-size: 12px; color: var(--color-text-muted); }

/* 主区 */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 32px;
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-size: 16px; font-weight: 600; }
.topbar-spacer { flex: 1; }
.topbar .balance-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-primary-soft); color: var(--color-primary);
  border-radius: 20px; padding: 5px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none;
}
.topbar .icon-btn, .topbar .link-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; display:inline-flex; align-items:center; gap:6px; font-size:14px; padding:6px 8px; border-radius:6px;}
.topbar .icon-btn:hover, .topbar .link-btn:hover { background: var(--color-page); color: var(--color-text); }
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; background:none; border:none; font-size:14px; color: var(--color-text);
}
.user-menu-trigger:hover { background: var(--color-page); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight:600;
}

.content { padding: 24px 32px 48px; max-width: 1440px; width: 100%; margin: 0 auto; }
.page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head .page-title { font-size: 26px; font-weight: 700; margin:0; }
.page-head .page-desc { color: var(--color-text-secondary); margin-top:4px; font-size:14px; }
.page-head-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* 用户下拉 */
.dropdown {
  position:absolute; right:0; top:calc(100% + 6px); min-width:180px;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding:6px; display:none; z-index: 60;
}
.dropdown.open { display:block; }
.dropdown a, .dropdown button {
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:none; background:none;
  font-size:14px; color:var(--color-text); border-radius:6px; cursor:pointer; text-align:left;
}
.dropdown a:hover, .dropdown button:hover { background: var(--color-page); }
.dropdown .dd-danger { color: var(--color-danger); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s;
  white-space: nowrap; font-family: inherit; background:none; color: inherit;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost { color: var(--color-text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-page); color: var(--color-text); }
.btn-danger { background: var(--color-danger); color:#fff; }
.btn-danger-ghost { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--color-danger); color:#fff; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 6px; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn .spin { display:none; }
.btn.loading .spin { display:inline-block; }
.btn.loading { opacity:.7; pointer-events:none; }

.spin { width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- 卡片 ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--color-border); }
.card-head h3 { margin:0; font-size:16px; }
.card-head .desc { font-size:13px; color:var(--color-text-muted); }
.card-body { padding:20px; }
.card-foot { padding:14px 20px; border-top:1px solid var(--color-border); }

/* 指标卡 */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:18px 20px; }
.stat-card .stat-label { font-size:13px; color:var(--color-text-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.stat-card .stat-value { font-size:24px; font-weight:700; font-variant-numeric: tabular-nums; line-height:1.2; word-break: break-all; }
.stat-card .stat-value.mono { font-size:20px; }
.stat-card .stat-sub { font-size:12px; color:var(--color-text-muted); margin-top:6px; }
.stat-card.warn { border-color: var(--color-warning); }
.stat-card.warn .stat-value { color: var(--color-warning); }
.stat-card.danger { border-color: var(--color-danger); }
.stat-card.danger .stat-value { color: var(--color-danger); }
.stat-card.success .stat-value { color: var(--color-success); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table.table { width:100%; border-collapse: collapse; font-size:14px; }
.table th {
  text-align:left; padding:10px 14px; background:var(--color-page);
  color:var(--color-text-secondary); font-weight:600; font-size:13px;
  border-bottom:1px solid var(--color-border); white-space:nowrap;
}
.table td { padding:11px 14px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:#fafbfd; }
.table .num, .table td.num { text-align:right; font-variant-numeric: tabular-nums; }
.table th.num { text-align:right; }
.table .c { text-align:center; }
/* 表头与数据统一居中（模型与价格等列表用）：避免表头左对齐、数据右对齐导致的错位 */
.table th.col-c, .table td.col-c { text-align:center; }
.table td.col-c { font-variant-numeric: tabular-nums; }
.table .actions { white-space:nowrap; text-align:right; }
.table .actions .btn { margin-left:6px; }
.table-actions-row { display:flex; gap:8px; justify-content:flex-end; }

.pagination { display:flex; align-items:center; gap:6px; padding:14px 4px; flex-wrap:wrap; }
.pagination .pg-info { color:var(--color-text-muted); font-size:13px; margin-right:auto; }
.pagination .btn { min-width:34px; padding:5px 9px; }
.pagination .btn.current { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.form-label .opt { color:var(--color-text-muted); font-weight:400; }
.form-hint { font-size:12px; color:var(--color-text-muted); margin-top:5px; line-height:1.5; }
.form-error { font-size:13px; color:var(--color-danger); margin-top:5px; }
.form-control {
  width:100%; padding:10px 12px; font-size:14px; color:var(--color-text);
  background:var(--color-surface); border:1px solid var(--color-border-strong);
  border-radius:8px; outline:none; transition:border .15s, box-shadow .15s;
  font-family: inherit;
}
.form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(53,100,223,.12); }
.form-control.input-error { border-color: var(--color-danger); }
textarea.form-control { min-height: 90px; resize: vertical; }
select.form-control { appearance:auto; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-grid .span2 { grid-column: span 2; }
.form-check { display:flex; align-items:flex-start; gap:8px; font-size:14px; margin-bottom:8px; cursor:pointer;}
.form-check input { margin-top:3px; }

/* 筛选栏 */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.filter-bar .form-control { width:auto; }

/* ---------- 徽章 / 状态 ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; white-space:nowrap; }
.badge .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

/* 悬停展示完整名单（套餐适用模型等）：wrapper + tooltip 提示 */
.scope-tip { position:relative; display:inline-flex; cursor:help; }
.scope-tip .scope-tip-body {
  display:none;
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:1200;
  min-width:180px; max-width:min(420px, 80vw); max-height:280px; overflow:auto;
  background:#fff; border:1px solid #e2e6ee; border-radius:8px;
  box-shadow:0 12px 32px rgba(15,23,42,.18); padding:10px 12px;
  font-size:12px; line-height:1.9; color:#334155; text-align:left; white-space:normal;
}
.scope-tip:hover .scope-tip-body { display:block; }
.scope-tip-body .scope-tip-title { font-weight:700; color:#0f172a; margin-bottom:4px; }
.scope-tip-body .scope-tip-item { display:inline-block; background:#f1f5f9; border-radius:5px; padding:1px 7px; margin:2px 4px 2px 0; font-size:11px; color:#475569; }
.scope-tip-body .scope-tip-item.model-off { background:#fee2e2; color:#b91c1c; }
.scope-tip-body .scope-tip-item.model-deleted { background:#f1f5f9; color:#94a3b8; text-decoration:line-through; }

.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-info { background: var(--color-info-soft); color: var(--color-info); }
.badge-muted { background: #eef0f4; color: var(--color-text-muted); }
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary); }

/* ---------- Toast / 提示 ---------- */
#toast-box { position: fixed; top: 18px; right: 18px; z-index: 1000; display:flex; flex-direction:column; gap:10px; }
.toast {
  background:var(--color-surface); border-left:4px solid var(--color-primary); border-radius:8px;
  box-shadow: var(--shadow-md); padding:12px 18px; min-width:260px; max-width:380px;
  font-size:14px; animation: slideIn .2s ease;
}
.toast.success { border-left-color: var(--color-success); }
.toast.error { border-left-color: var(--color-danger); }
.toast.warning { border-left-color: var(--color-warning); }
@keyframes slideIn { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform:none; } }

.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; border:1px solid; }
.alert-success { background:var(--color-success-soft); border-color:#bfe6d0; color:#1e7049; }
.alert-error, .alert-danger { background:var(--color-danger-soft); border-color:#f2c4c4; color:#a83232; }
.alert-warning { background:var(--color-warning-soft); border-color:#ecd3a0; color:#8a6110; }
.alert-info { background:var(--color-info-soft); border-color:#b9dbe9; color:#23677f; }
.alert a { font-weight:600; }

/* ---------- 空状态 ---------- */
.empty {
  text-align:center; padding:48px 20px; color:var(--color-text-muted);
}
.empty .empty-icon { font-size:38px; margin-bottom:12px; }
.empty .empty-title { font-size:16px; color:var(--color-text); font-weight:600; margin-bottom:6px; }
.empty p { font-size:14px; margin-bottom:14px; }

/* 进度条 */
.progress { height:8px; background:#eef0f4; border-radius:20px; overflow:hidden; }
.progress > div { height:100%; background:var(--color-primary); border-radius:20px; transition:width .3s; }
.progress.warn > div { background:var(--color-warning); }
.progress.danger > div { background:var(--color-danger); }
.progress.success > div { background:var(--color-success); }

/* 分段控制 */
.seg { display:inline-flex; background:#eef0f4; border-radius:8px; padding:3px; }
.seg button { border:none; background:none; padding:6px 16px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--color-text-secondary); }
.seg button.active { background:var(--color-surface); color:var(--color-primary); font-weight:600; box-shadow:var(--shadow-sm); }

/* 模态 */
.modal-mask {
  position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:200;
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:60px 16px;
}
.modal-mask.open { display:flex; }
.modal { background:var(--color-surface); border-radius:var(--radius-lg); width:100%; max-width:520px; box-shadow:var(--shadow-md); }
.modal.wide { max-width:720px; }
/* 兼容旧写法（曾把 .modal 当外层容器、内容放 .modal-panel）：
   防止历史遗留的“外层 .modal”直接把表单内容泄漏到页面上造成穿模 */
.content > .modal, body > .modal { display:none; }
.modal-mask > .modal { max-width:calc(100vw - 32px); }
/* 长表单弹窗：卡片内部可滚动，遮罩整体不超出视口 */
.modal-mask.open > .modal { max-height:calc(100vh - 120px); overflow-y:auto; }
.modal-head { display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--color-border); }
.modal-head h3 { margin:0; font-size:17px; }
.modal-head .modal-close { margin-left:auto; background:none; border:none; font-size:20px; color:var(--color-text-muted); cursor:pointer; padding:4px 8px; border-radius:6px;}
.modal-head .modal-close:hover { background:var(--color-page); }
.modal-body { padding:24px; }
/* 确认购买弹窗的套餐摘要卡片 */
.buy-plan-card { border:1px solid var(--color-border); border-radius:10px; padding:14px 16px; background:#f8fafc; }
.buy-plan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.buy-plan-name { font-size:16px; font-weight:700; color:var(--color-text, #172033); line-height:1.4; }
.buy-plan-sub { font-size:12px; color:var(--color-text-muted); margin-top:2px; }
.buy-plan-price { font-size:22px; font-weight:700; color:var(--color-primary); white-space:nowrap; }
.buy-plan-meta { margin-top:10px; font-size:12px; color:var(--color-text-secondary); line-height:1.7; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:10px; }
/* 支付方式卡片（对等展示，不突出默认项） */
.pay-methods { display:flex; gap:12px; flex-wrap:wrap; }
.pay-method {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px; min-width:220px;
  text-decoration:none; border:1px solid var(--color-border); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.pay-method:hover { border-color:var(--color-primary); box-shadow:0 4px 14px rgba(23,32,51,.08); }
.pay-icon {
  width:36px; height:36px; border-radius:8px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:700;
}
.pay-icon-alipay { background:#1677ff; }
.pay-icon-wxpay { background:#07c160; }
.pay-name { flex:1; font-size:15px; font-weight:600; color:var(--color-text); }
.pay-amount { font-size:14px; font-weight:700; color:var(--color-text-secondary); }

.key-once-box {
  background:#0f1b2d; color:#e8f0fe; font-family:var(--font-mono); font-size:14px;
  padding:14px 16px; border-radius:8px; word-break:break-all; user-select:all; border:1px dashed #3d5a85;
}

/* 登录/注册布局 */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--color-page); padding:24px;
}
.auth-card { width:100%; max-width:420px; }
.auth-brand { text-align:center; margin-bottom:26px; }
.auth-brand .brand-logo {
  width:52px; height:52px; border-radius:14px; background:var(--color-primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; margin-bottom:12px;
}
.auth-brand-img {
  max-width:140px; max-height:56px; object-fit:contain;
  margin-bottom:12px; display:inline-block;
}
.auth-brand h1 { font-size:22px; margin:0 0 4px; }
.auth-brand p { color:var(--color-text-muted); font-size:14px; margin:0; }

/* 详情抽屉（用量/线路详情） */
.drawer-mask {
  position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:200; display:none;
}
.drawer-mask.open { display:block; }
.drawer {
  position:fixed; top:0; right:-460px; width:440px; max-width:94vw; height:100vh;
  background:var(--color-surface); z-index:210; transition:right .22s ease;
  display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(23,32,51,.12);
}
.drawer.open { right:0; }
.drawer-head { padding:18px 22px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; }
.drawer-head h3 { margin:0; font-size:16px; }
.drawer-body { flex:1; overflow-y:auto; padding:20px 22px; }
.drawer-body .kv { display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; border-bottom:1px dashed var(--color-border); }
.drawer-body .kv .k { color:var(--color-text-muted); flex:none; }
.drawer-body .kv .v { text-align:right; word-break:break-all; }

/* 代码块示例 */
.codebox { background:#0f1b2d; color:#cdd9ea; border-radius:8px; padding:16px; font-family:var(--font-mono); font-size:13px; line-height:1.7; overflow-x:auto; white-space:pre; }

/* 价格展示 */
.price-main { font-size:22px; font-weight:700; color:var(--color-text); }
.price-unit { font-size:12px; color:var(--color-text-muted); font-weight:400; }

/* 套餐卡 */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.plan-card { display:flex; flex-direction:column; position:relative; }
/* 限购角标（右上角） */
.plan-limit-tag {
  position:absolute; top:14px; right:0;
  background:var(--color-danger); color:#fff;
  font-size:12px; font-weight:600; line-height:1;
  padding:6px 10px; border-radius:10px 0 0 10px;
  box-shadow:0 2px 6px rgba(214,70,70,.25);
  z-index:2;
  white-space:nowrap; max-width:70%;
  overflow:hidden; text-overflow:ellipsis;
}
.plan-card .plan-name { font-size:18px; font-weight:700; }
.plan-card .plan-sub { font-size:13px; color:var(--color-text-muted); }
.plan-card .plan-price { font-size:30px; font-weight:700; color:var(--color-primary); margin:14px 0 4px; }
.plan-card .plan-price small { font-size:13px; color:var(--color-text-muted); font-weight:400; }
.plan-features { list-style:none; padding:0; margin:12px 0 18px; }
.plan-features li { padding:5px 0; font-size:14px; color:var(--color-text-secondary); display:flex; gap:8px; }
/* .plan-features li::before 已改为矢量 mask 勾选（见文件末尾 UI 2.0 视觉层） */

/* 帮助说明页 */
.step-list { counter-reset: step; list-style:none; padding:0; }
.step-list li { position:relative; padding:0 0 20px 40px; }
.step-list li::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  background:var(--color-primary-soft); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}

/* 移动端 */
.hamburger { display:none; }
.mobile-nav-mask { display:none; }

@media (max-width: 900px) {
  .content { padding: 16px 16px 40px; }
  .topbar { padding: 0 16px; }
  .hamburger { display:inline-flex; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.mobile-open { transform:none; box-shadow: var(--shadow-md); }
  .main { margin-left:0; }
  .mobile-nav-mask { position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:25; }
  .mobile-nav-mask.show { display:block; }
  .stat-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .span2 { grid-column: span 1; }
  .page-head-actions { width:100%; margin-left:0; }
  .page-head-actions .btn { flex:1; }
}
@media (max-width: 600px) {
  .plan-grid { grid-template-columns:1fr; }
  .topbar .link-text { display:none; }
}

/* ---------- 移动端：宽表格 / 限制模型名单不撑破页面 ---------- */
@media (max-width: 900px) {
  .scope-tip { max-width:100%; }
}
@media (max-width: 600px) {
  /* 悬停名单弹层改为“视口内居中浮层”，避免把套餐卡片/页面撑超宽 */
  .scope-tip .scope-tip-body {
    position: fixed;
    top: 18%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 0;
    max-width: calc(100vw - 28px);
    max-height: 55vh;
    overflow: auto;
    z-index: 1600;
  }
  /* 名单内单个模型名允许折行，避免长名字撑宽浮层 */
  .scope-tip-body .scope-tip-item {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 打印/通用小工具 */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.flex{display:flex}.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap8{gap:8px}.gap16{gap:16px}
.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}
.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}
.text-primary{color:var(--color-primary)}.text-center{text-align:center}
.text-right{text-align:right}
.small{font-size:13px}.xs{font-size:12px}
.nowrap{white-space:nowrap}
.word-break{word-break:break-all}

/* ---------- 扩展通用类（管理后台等） ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
.form-label-inline { display:inline-block; font-size:14px; font-weight:600; margin-right:8px; vertical-align:middle; }
.checkbox-inline { display:inline-flex; align-items:center; gap:6px; font-size:14px; margin-right:16px; cursor:pointer; }
.form-actions { display:flex; gap:12px; margin:20px 0; }
.filter-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-xs { padding:3px 9px; font-size:12px; border-radius:6px; }
.btn-success-ghost { color: var(--color-success); border-color: var(--color-success); }
.btn-success-ghost:hover:not(:disabled) { background: var(--color-success); color:#fff; }
.td-actions { white-space:nowrap; }
.td-actions .btn { margin-right:4px; }
.table-sub { font-size:12px; color: var(--color-text-muted); }
.empty-cell { text-align:center; color: var(--color-text-muted); padding: 28px 0 !important; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--color-border); }
.list-row:last-child { border-bottom:none; }
.page-link { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1px solid var(--color-border); border-radius:8px; font-size:13px; text-decoration:none; }
.page-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-link.active { background: var(--color-primary); border-color: var(--color-primary); color:#fff; font-weight:600; }
.page-ellipsis { padding:0 4px; color:var(--color-text-muted); }
.badge-warn { background: var(--color-warning-soft); color: var(--color-warning); }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
.radio-card { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--color-border); border-radius:10px; padding:12px 14px; margin-bottom:10px; cursor:pointer; }
.radio-card input { margin-top:3px; }
.radio-card b { display:block; font-size:14px; }
.radio-card small { color:var(--color-text-muted); font-size:12px; }
.ticket-content { background:var(--color-bg, #f7f8fa); border:1px solid var(--color-border); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }

/* ---------- 用量列表：Tokens/缓存 组合列 ---------- */
.tk-cell { display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
.tk-ico { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:11px; line-height:1; font-style:normal; border-radius:4px; vertical-align:-2px; }
/* 矢量图标（替代 ↓ ↑ ⚡ Σ 字符图标）：随色片 currentColor 上色，dark 模式自动适配 */
.tk-ico svg { width:14px; height:14px; display:block; }
/* 「合计」保持原有的克制样式：无底色，仅弱化色图标 */
.tk-sum { display:inline-flex; align-items:center; justify-content:center; color:var(--color-text-muted); vertical-align:-2px; }
.tk-sum svg { width:12px; height:12px; display:block; }
.tk-in  { background:var(--color-info-soft);   color:#2f7fb0; }  /* 输入 蓝 */
.tk-out { background:rgba(34,197,94,.14);     color:#1f9d55; }  /* 输出 绿 */
.tk-cache{ background:rgba(168,85,247,.16);   color:#9b45d8; }  /* 缓存命中 紫 */
.tk-sep { margin:0 5px; color:var(--color-border-strong, #cbd5e1); }
.tk-rate { margin-left:4px; font-size:11px; color:#1f9d55; background:rgba(34,197,94,.12); border-radius:9px; padding:1px 6px; }
.tk-none { color:var(--color-text-muted); }
@media (max-width: 900px) {
  .tk-cell { white-space:normal; }
  .tk-sep { margin:0 3px; }
}
/* ---------- 登录图形数字验证码（常驻表单内） ---------- */
.captcha-inline {
  display: flex; align-items: center; gap: 10px;
}
.captcha-img {
  width: 128px; height: 44px;
  border: 1px solid var(--color-border, #dbe2ea);
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
}
.captcha-img svg { width: 100%; height: 100%; display: block; }
.captcha-img.is-loading { opacity: .6; }
.captcha-load-fail { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: var(--color-danger, #e74c3c); }
.captcha-refresh {
  flex-shrink: 0;
  font-size: 16px; line-height: 1; padding: 8px 10px;
}

/* ========== 邀请返利 / 余额充值 ========== */
.btn-outline { background: transparent; border: 1px solid var(--border, #d9d9d9); color: var(--text, #333); }
.btn-outline:hover { border-color: var(--color-primary, #3478f6); color: var(--color-primary, #3478f6); background: rgba(52,120,246,.04); }
.muted { color: #8a94a6; font-size: 12px; margin-left: 6px; }
.empty-td { text-align: center; color: #8a94a6; padding: 28px 0 !important; }

.stat-grid { display: grid; gap: 12px; }
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat-box { background: var(--bg-soft, #f5f7fa); border-radius: 10px; padding: 14px 16px; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--color-primary, #3478f6); }
.stat-value.money::before { content: '¥'; font-size: 14px; margin-right: 2px; }
.stat-label { font-size: 12px; color: #8a94a6; margin-top: 4px; }

.invite-code-box { display: flex; align-items: center; gap: 10px; background: #f5f7fa; border: 1px dashed #c9d4e4; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.invite-code { font-size: 26px; font-weight: 800; letter-spacing: 3px; font-family: 'SFMono-Regular', Consolas, monospace; color: var(--color-primary, #3478f6); flex: 1; word-break: break-all; }
.invite-link-row { display: flex; gap: 8px; }
.invite-link-row .form-control { flex: 1; }

.recharge-input-wrap { position: relative; }
.recharge-input-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #8a94a6; pointer-events: none; }
.recharge-input-wrap .form-control { padding-left: 30px; font-size: 16px; font-weight: 600; }
.recharge-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.recharge-quick .btn { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ========== 拉新中心 v2 ========== */
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .stat-grid-3 { grid-template-columns: 1fr; } }
.stat-card-money .stat-value { color: #e67e22; }
.text-strong { color: var(--color-success, #27ae60); font-weight: 700; }
.text-danger { color: var(--color-danger, #e74c3c); }
.muted-no-ml { color: #8a94a6; font-size: 12px; }
.muted-no-ml b { color: #5a6474; }
.divider { border: 0; border-top: 1px solid var(--border, #eceff3); margin: 14px 0; }
.input-group .form-control { flex: 1; }

/* ===== 前台 模型与价格：厂商分类横向筛选 ===== */
.vendor-filter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 4px 2px; }
.vendor-filter-label { font-size:12px; color:var(--color-text-muted); font-weight:600; letter-spacing:.5px; margin-right:2px; }
.vendor-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 7px; border-radius:30px;
  background:var(--color-surface); border:1px solid var(--color-border);
  font-size:13px; font-weight:500; color:var(--color-text);
  cursor:pointer; user-select:none; transition:all .15s;
}
.vendor-chip:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-soft); }
.vendor-chip .vlogo {
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--color-primary),#7c5cff);
}
.vendor-chip .vcount {
  min-width:16px; padding:0 5px; text-align:center; line-height:16px; font-size:11px;
  background:#eef0f4; color:var(--color-text-muted); border-radius:10px;
}
.vendor-chip.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; box-shadow:0 4px 12px rgba(53,100,223,.28); }
.vendor-chip.active .vlogo { background:rgba(255,255,255,.22); color:#fff; }
.vendor-chip.active .vcount { background:rgba(255,255,255,.25); color:#fff; }
.vendor-scroll { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; padding:2px; scrollbar-width:thin; max-width:100%; }
@media (max-width: 768px){ .vendor-scroll{ flex-wrap:wrap; overflow-x:visible; } }

/* ===== 前台 API 密钥：可用范围选择 + 模型分组 ===== */
.scope-editor { border:1px solid var(--color-border); border-radius:var(--radius); padding:14px; background:#fbfcfe; }
.scope-modes { display:flex; gap:10px; flex-wrap:wrap; }
.scope-mode {
  display:inline-flex; align-items:baseline; gap:7px; cursor:pointer; user-select:none;
  padding:8px 14px; border-radius:30px; border:1px solid var(--color-border);
  background:var(--color-surface); font-size:13px; font-weight:500; transition:all .15s;
}
.scope-mode:hover { border-color:var(--color-primary); background:var(--color-primary-soft); }
.scope-mode input { margin:0; accent-color:var(--color-primary); }
.scope-mode em { font-style:normal; font-size:11px; color:var(--color-text-muted); }
.scope-mode.active,
.scope-mode:has(input:checked) { border-color:var(--color-primary); background:var(--color-primary-soft); color:var(--color-primary); }
.scope-mode.active em,
.scope-mode:has(input:checked) em { color:var(--color-primary); opacity:.75; }
.scope-pane { margin-top:14px; }
.scope-empty { font-size:13px; color:var(--color-text-muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.model-picker { border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); overflow:hidden; }
.model-picker-tools { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--color-border); flex-wrap:wrap; align-items:center; background:#fafbfd; }
.model-picker-tools .form-control { width:auto; flex:1; min-width:150px; }
.model-picker-actions { display:flex; gap:6px; margin-left:auto; }
.model-picker-list { max-height:260px; overflow-y:auto; }
.model-pick-item {
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  font-size:13px; cursor:pointer; border-bottom:1px solid #f2f4f7;
}
.model-pick-item:last-child { border-bottom:none; }
.model-pick-item:hover { background:var(--color-primary-soft); }
.model-pick-item input { margin:0; accent-color:var(--color-primary); flex:0 0 auto; }
.model-pick-item .mp-name { font-weight:500; }
.model-pick-item .mp-key { font-size:11px; color:var(--color-text-muted); }
.model-pick-item .mp-prov {
  margin-left:auto; font-size:11px; color:var(--color-text-muted);
  background:#eef0f4; border-radius:10px; padding:1px 8px; white-space:nowrap;
}
.model-picker-foot { padding:8px 12px; border-top:1px solid var(--color-border); font-size:12px; color:var(--color-text-muted); background:#fafbfd; }
.model-picker-foot b { color:var(--color-primary); }

.group-cards { display:flex; flex-direction:column; gap:8px; }
.group-card {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface);
}
.group-card-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.group-card-actions { margin-left:auto; display:flex; gap:6px; flex:0 0 auto; }

@media (max-width: 768px) {
  .model-picker-tools .form-control { min-width:100%; }
  .model-picker-actions { margin-left:0; }
  .group-card { flex-wrap:wrap; }
}

/* ==========================================================================
   前台（用户端）侧栏：悬浮卡片式 + 可收起 + 深/浅色主题
   --------------------------------------------------------------------------
   1) 作用域：仅 [data-shell="app"] 生效（由 app/Views/layouts/app.php 设置），
      后台 admin.php 未设置该属性，样式完全不受影响，保持原样。
   2) 浅色模式复用既有 :root 变量，视觉与改造前一致；仅深色模式覆盖变量。
   3) 收起状态：抽屉展开 + 悬停弹出气泡（不改变 DOM 与功能）。
   ========================================================================== */

/* ---------- 前台侧栏容器：改成悬浮卡片 ---------- */
[data-shell="app"] { --sb-w: var(--sidebar-w); }
[data-shell="app"] .sidebar {
  top: 16px; bottom: 16px; left: 16px;
  width: var(--sb-w);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: width .22s ease;
}
[data-shell="app"] .main {
  margin-left: calc(var(--sb-w) + 32px);
  transition: margin-left .22s ease;
}

/* ---------- 品牌区 ---------- */
[data-shell="app"] .sidebar-brand {
  border-bottom: 1px solid var(--color-border);
  padding: 0 14px; gap: 10px;
  height: 60px; flex: none;
}
[data-shell="app"] .brand-text {
  font-weight: 700; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ---------- 导航 ---------- */
[data-shell="app"] .nav-group-title {
  padding: 14px 12px 6px; font-size: 11px; letter-spacing: .6px;
  white-space: nowrap; overflow: hidden;
}
[data-shell="app"] .nav-item { position: relative; white-space: nowrap; }
[data-shell="app"] .nav-item .nav-text { overflow: hidden; text-overflow: ellipsis; }
[data-shell="app"] .nav-item svg { width: 18px; height: 18px; flex: none; }

/* 底部：主题切换 + 收起 */
[data-shell="app"] .sidebar-foot {
  border-top: 1px solid var(--color-border);
  padding: 10px; flex: none;
}
[data-shell="app"] .side-action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--color-text-secondary); font-size: 14px; font-family: inherit;
  transition: background .15s, color .15s;
}
[data-shell="app"] .side-action:hover { background: var(--color-sidebar-hover); color: var(--color-text); }
[data-shell="app"] .side-action svg { width: 18px; height: 18px; flex: none; }
[data-shell="app"] .side-action .side-action-text { white-space: nowrap; overflow: hidden; }

/* ==========================================================================
   收起状态：抽屉展开 + 悬浮气泡
   ========================================================================== */
html.sb-collapsed [data-shell="app"] { --sb-w: 68px; }
html.sb-collapsed [data-shell="app"] .sidebar-brand { justify-content: center; padding: 0; }
html.sb-collapsed [data-shell="app"] .brand-text,
html.sb-collapsed [data-shell="app"] .nav-text,
html.sb-collapsed [data-shell="app"] .nav-group-title,
html.sb-collapsed [data-shell="app"] .side-action-text { display: none; }
html.sb-collapsed [data-shell="app"] .nav-item,
html.sb-collapsed [data-shell="app"] .side-action { justify-content: center; padding: 9px 0; gap: 0; }
/* 收起时隐藏横向滚动条，但不影响纵向滚动（短屏仍可滚动，不丢功能） */
html.sb-collapsed [data-shell="app"] .sidebar-nav { overflow-x: hidden; }

/* 收起状态下的文字提示气泡：固定定位，不受侧栏滚动/裁切影响 */
.sb-tip {
  position: fixed; left: 0; top: 0; z-index: 2000;
  background: var(--color-text); color: var(--color-surface);
  padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 500;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .14s, transform .14s;
  box-shadow: var(--shadow-md);
}
.sb-tip.show { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   深色模式（仅前台）：覆盖变量即可，浅色模式零改动
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  /* 芭乐品牌 · 深色模式（冷色暗夜 / 太空舱） */
  --color-primary: #8B9BFF;
  --color-primary-hover: #A3B0FF;
  --color-primary-soft: rgba(120, 140, 255, 0.18);
  --brand-pink: #E8A0BC;
  --brand-pink-soft: rgba(232, 160, 188, 0.13);
  --brand-teal: #5FC2CC;
  --brand-teal-soft: rgba(95, 194, 204, 0.13);
  --brand-blue-soft: rgba(88, 158, 214, 0.14);
  --accent-cyan: #3EE0F5;
  --accent-cyan-soft: rgba(62, 224, 245, 0.14);
  --brand-grad: linear-gradient(135deg, #6D7CF5 0%, #9C8BF0 52%, #3EC6E8 100%);
  --color-success: #4ED597;
  --color-success-soft: rgba(78, 213, 151, .15);
  --color-warning: #E8B44A;
  --color-warning-soft: rgba(232, 180, 74, .15);
  --color-danger: #F5787F;
  --color-danger-soft: rgba(245, 120, 127, .15);
  --color-info: #5CB8E8;
  --color-info-soft: rgba(92, 184, 232, .15);
  --color-text: #E9EDF9;
  --color-text-secondary: #A7B0CB;
  --color-text-muted: #A6B0CC;
  --color-border: rgba(148, 168, 220, .16);
  --color-border-strong: rgba(148, 168, 220, .28);
  --color-surface: #141B2C;
  --color-page: #070B16;
  --color-sidebar: rgba(20, 27, 44, .58);
  --color-sidebar-hover: rgba(120, 140, 255, .10);
  --color-sidebar-active: rgba(120, 140, 255, .18);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 6px 22px rgba(0,0,0,.5);
  /* 兼容历史代码里 var(--x, 浅色fallback) 的写法 */
  --bg-soft: #1D1A27;
  --border: var(--color-border);
  --text: var(--color-text);
  --color-bg: var(--color-page);
}

/* ---------- 前台侧栏：移动端保持抽屉形态（忽略收起状态） ---------- */
@media (max-width: 900px) {
  [data-shell="app"] .sidebar {
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    border-radius: 0; border: 0; border-right: 1px solid var(--color-border);
  }
  [data-shell="app"] .main { margin-left: 0; }
  /* 移动端一律显示完整文字，不做气泡 */
  html.sb-collapsed [data-shell="app"] .brand-text,
  html.sb-collapsed [data-shell="app"] .nav-text,
  html.sb-collapsed [data-shell="app"] .nav-group-title,
  html.sb-collapsed [data-shell="app"] .side-action-text { display: block; }
  html.sb-collapsed [data-shell="app"] .nav-item,
  html.sb-collapsed [data-shell="app"] .side-action { justify-content: flex-start; padding: 9px 12px; gap: 10px; }
  html.sb-collapsed [data-shell="app"] .sidebar-brand { justify-content: flex-start; padding: 0 14px; }
  [data-shell="app"] .sidebar-toggle { display: none; }
  .sb-tip { display: none; }
}

/* ---------- 深色模式下：历史硬编码浅色背景的等价替换 ---------- */
[data-theme="dark"] code { background: #1f2531; }
[data-theme="dark"] .table tbody tr:hover td { background: #1b212c; }
[data-theme="dark"] .badge-muted,
[data-theme="dark"] .progress,
[data-theme="dark"] .seg,
[data-theme="dark"] .vendor-chip .vcount,
[data-theme="dark"] .model-pick-item .mp-prov { background: #232a36; }
[data-theme="dark"] .buy-plan-card,
[data-theme="dark"] .model-picker-tools,
[data-theme="dark"] .model-picker-foot { background: #1b212c; }
[data-theme="dark"] .invite-code-box { background: #1b212c; border-color: #333a48; }
[data-theme="dark"] .scope-editor { background: #1b212c; }
[data-theme="dark"] .pay-method,
[data-theme="dark"] .scope-tip .scope-tip-body { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .scope-tip .scope-tip-body { color: var(--color-text-secondary); }
[data-theme="dark"] .scope-tip-body .scope-tip-title { color: var(--color-text); }
[data-theme="dark"] .scope-tip-body .scope-tip-item,
[data-theme="dark"] .scope-tip-body .scope-tip-item.model-deleted { background: #232a36; color: var(--color-text-secondary); }
[data-theme="dark"] .scope-tip-body .scope-tip-item.model-off { background: rgba(240,115,111,.16); color: #f79b98; }
[data-theme="dark"] .captcha-img { background: #1b212c; }

/* ==========================================================================
   前台（用户端）全局视觉适配层
   --------------------------------------------------------------------------
   目标：让所有前台页面（首页/密钥/模型/用量/套餐/工单/账户…）与悬浮侧栏
        统一为一套「白卡 + 大圆角 + 极淡边框 + 轻阴影」的卡片语言。
   隔离：全部选择器带 [data-shell="app"]，后台 admin.php 无此属性，
        因此后台样式与改造前完全一致，不受任何影响。
   范围：纯视觉（圆角/边框/阴影/间距/层次），不改结构与功能。
   ========================================================================== */

/* ---------- 作用域设计令牌 ---------- */
[data-shell="app"] {
  --fe-page: #f6f7fb;
  --fe-card-border: #ebedf4;
  --fe-card-shadow: 0 1px 2px rgba(23,32,51,.04), 0 6px 20px rgba(23,32,51,.045);
  --fe-radius: 16px;
  --fe-radius-sm: 12px;
  --fe-hover: rgba(53,100,223,.04);
}
[data-theme="dark"] [data-shell="app"] {
  --fe-page: #0d1017;
  --fe-card-border: #242a35;
  --fe-card-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
  --fe-hover: rgba(109,141,255,.08);
}

/* 页面底色（覆盖 body 的浅灰，整体更接近参考图的淡紫灰） */
[data-shell="app"] { background: var(--fe-page); }

/* ---------- 主区与顶栏 ---------- */
[data-shell="app"] .main {
  margin-left: calc(var(--sb-w) + 32px);
  padding-right: 16px;
  transition: margin-left .22s ease;
}
/* 顶栏也做成悬浮卡片，与侧栏同高、同圆角、同边框 */
[data-shell="app"] .topbar {
  position: sticky; top: 16px; z-index: 20;
  margin: 16px 0 0;
  height: 64px; padding: 0 18px;
  background: var(--color-surface);
  border: 1px solid var(--fe-card-border);
  border-radius: var(--fe-radius);
  box-shadow: var(--fe-card-shadow);
}
[data-shell="app"] .topbar-title { font-size: 16px; font-weight: 650; }
/* 悬浮顶栏上方的 16px 缝隙：用页面同色遮挡，避免滚动时内容从缝里穿出 */
[data-shell="app"] .topbar::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -17px; height: 17px;
  background: var(--fe-page); pointer-events: none;
}
[data-shell="app"] .topbar .icon-btn,
[data-shell="app"] .topbar .link-btn { border-radius: 10px; }
[data-shell="app"] .topbar .icon-btn:hover,
[data-shell="app"] .topbar .link-btn:hover { background: var(--fe-hover); }
[data-shell="app"] .topbar .user-menu-trigger {
  border-radius: 22px; padding: 5px 12px 5px 5px;
  border: 1px solid transparent; transition: all .15s;
}
[data-shell="app"] .topbar .user-menu-trigger:hover {
  background: var(--fe-hover); border-color: var(--fe-card-border);
}
[data-shell="app"] .topbar .balance-chip {
  border-radius: 20px; padding: 6px 14px;
  border: 1px solid var(--fe-card-border);
  background: var(--fe-hover);
  font-weight: 600;
}

/* ---------- 内容区 ---------- */
[data-shell="app"] .content {
  padding: 20px 0 48px;
  max-width: none; margin: 0;
}

/* 页头：做成卡片（与参考图的页面标题卡一致） */
[data-shell="app"] .page-head {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--fe-card-border);
  border-radius: var(--fe-radius);
  box-shadow: var(--fe-card-shadow);
  padding: 20px 24px;
  margin-bottom: 20px;
}
[data-shell="app"] .page-head .page-title { font-size: 21px; letter-spacing: -.2px; }
[data-shell="app"] .page-head .page-desc { margin-top: 3px; font-size: 13.5px; }

/* ---------- 卡片 ---------- */
[data-shell="app"] .card {
  border-radius: var(--fe-radius);
  border-color: var(--fe-card-border);
  box-shadow: var(--fe-card-shadow);
}
[data-shell="app"] .card-head { padding: 18px 22px; }
[data-shell="app"] .card-head h3 { font-size: 15.5px; font-weight: 650; }
[data-shell="app"] .card-body { padding: 22px; }
[data-shell="app"] .card-foot { padding: 16px 22px; }

/* ---------- 指标卡 ---------- */
[data-shell="app"] .stat-grid { gap: 16px; margin-bottom: 20px; }
[data-shell="app"] .stat-card {
  border-radius: var(--fe-radius);
  border-color: var(--fe-card-border);
  box-shadow: var(--fe-card-shadow);
  padding: 20px 22px;
}
[data-shell="app"] .stat-card .stat-label { font-size: 13px; margin-bottom: 8px; }
[data-shell="app"] .stat-card .stat-value { font-size: 26px; letter-spacing: -.4px; }
[data-shell="app"] .stat-card .stat-sub { margin-top: 8px; }
/* 指标卡图标（可选，未加图标时自动不显示） */
[data-shell="app"] .stat-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  background: var(--color-primary-soft); color: var(--color-primary);
}
[data-shell="app"] .stat-ico svg { width: 19px; height: 19px; }
[data-shell="app"] .stat-card.with-ico {
  display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; align-items: start;
}
[data-shell="app"] .stat-card.with-ico .stat-ico { grid-row: span 3; margin-top: 2px; }
[data-shell="app"] .stat-ico.green  { background: var(--color-success-soft); color: var(--color-success); }
[data-shell="app"] .stat-ico.orange { background: var(--color-warning-soft); color: var(--color-warning); }
[data-shell="app"] .stat-ico.red    { background: var(--color-danger-soft);  color: var(--color-danger); }
[data-shell="app"] .stat-ico.blue   { background: var(--color-info-soft);    color: var(--color-info); }
[data-shell="app"] .stat-ico.violet { background: rgba(124,92,255,.14);      color: #7c5cff; }

/* ---------- 按钮 ---------- */
[data-shell="app"] .btn { border-radius: 10px; font-weight: 550; }
[data-shell="app"] .btn-sm { border-radius: 8px; }
[data-shell="app"] .btn-lg { border-radius: 12px; }
[data-shell="app"] .btn-secondary { border-color: var(--fe-card-border); }
[data-shell="app"] .btn-primary { box-shadow: 0 2px 8px rgba(53,100,223,.22); }
[data-shell="app"] .btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(53,100,223,.3); }
[data-shell="app"] .btn-ghost:hover:not(:disabled) { background: var(--fe-hover); }

/* ---------- 表格 ---------- */
[data-shell="app"] .table th {
  background: transparent;
  padding: 12px 16px;
  font-size: 12px; letter-spacing: .3px; font-weight: 600;
}
[data-shell="app"] .table td { padding: 13px 16px; border-bottom-color: var(--fe-card-border); }
[data-shell="app"] .table tbody tr:hover td { background: var(--fe-hover); }
[data-shell="app"] .table-wrap { border-radius: 0 0 var(--fe-radius) var(--fe-radius); }

/* 表格直接放在卡片里时，去掉最后一行的多余底边感 */
[data-shell="app"] .card > .table-wrap:last-child { padding-bottom: 6px; }

/* ---------- 表单 ---------- */
[data-shell="app"] .form-control {
  border-radius: 10px;
  border-color: var(--fe-card-border);
}
[data-shell="app"] .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(53,100,223,.12);
}
[data-shell="app"] .filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--fe-card-border);
  border-radius: var(--fe-radius-sm);
  box-shadow: var(--fe-card-shadow);
  padding: 14px 16px;
  margin-bottom: 20px;
}

/* ---------- 徽章 / 进度 ---------- */
[data-shell="app"] .badge { border-radius: 8px; font-weight: 550; }
[data-shell="app"] .progress { background: #eceef4; }
[data-theme="dark"] [data-shell="app"] .progress { background: #232a36; }

/* ---------- 分段控件 / 分页 ---------- */
[data-shell="app"] .seg { border-radius: 10px; }
[data-shell="app"] .seg button { border-radius: 8px; }
[data-shell="app"] .pagination .btn.current { box-shadow: 0 2px 8px rgba(53,100,223,.25); }
[data-shell="app"] .page-link { border-radius: 9px; }

/* ---------- 空状态 ---------- */
[data-shell="app"] .empty { padding: 54px 20px; }
[data-shell="app"] .empty .empty-icon {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 18px; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fe-hover); color: var(--color-text-muted);
}

/* ---------- 弹窗 / 抽屉 / 下拉 ---------- */
[data-shell="app"] .modal { border-radius: 18px; border: 1px solid var(--fe-card-border); }
[data-shell="app"] .modal-head { padding: 20px 24px; }
[data-shell="app"] .modal-head .modal-close { border-radius: 9px; }
[data-shell="app"] .modal-head .modal-close:hover { background: var(--fe-hover); }
[data-shell="app"] .dropdown {
  border-radius: 12px; border-color: var(--fe-card-border);
  box-shadow: 0 10px 30px rgba(23,32,51,.12); padding: 6px;
}
[data-shell="app"] .dropdown a,
[data-shell="app"] .dropdown button { border-radius: 8px; }
[data-shell="app"] .dropdown a:hover,
[data-shell="app"] .dropdown button:hover { background: var(--fe-hover); }
[data-shell="app"] .drawer { border-radius: 18px 0 0 18px; }

/* ---------- 提示条 ---------- */
[data-shell="app"] .alert { border-radius: 12px; }

/* ---------- 移动端：顶栏恢复通栏（不做悬浮卡片） ---------- */
@media (max-width: 900px) {
  [data-shell="app"] .main { margin-left: 0; padding-right: 0; }
  [data-shell="app"] .topbar {
    position: sticky; top: 0;
    margin: 0; border-radius: 0; box-shadow: none;
    border: 0; border-bottom: 1px solid var(--fe-card-border);
    padding: 0 16px;
  }
  [data-shell="app"] .topbar::before { content: none; }
  [data-shell="app"] .content { padding: 16px 16px 40px; }
  [data-shell="app"] .page-head { padding: 16px 18px; }
  [data-shell="app"] .page-head .page-title { font-size: 19px; }
  [data-shell="app"] .stat-card { padding: 16px 18px; }
  [data-shell="app"] .stat-card .stat-value { font-size: 22px; }
  [data-shell="app"] .card-body { padding: 18px; }
  [data-shell="app"] .filter-bar { padding: 12px; }
}

/* ---------- 工单中心：列表 + 对话（前台专用，作用域 [data-shell="app"]） ---------- */
/* 两栏等高（align-items:stretch）：左侧列表与右侧表单/对话高度统一，消除底部留白 */
[data-shell="app"] .tk-wrap {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  /* 关键①：行高也必须固定。单行 grid 的行默认 auto（按内容撑开），
     只写 height 的话对话一变长仍会把整行顶高，内部 overflow 永远不触发。 */
  grid-template-rows: minmax(0, 1fr);
  gap: 20px; align-items: stretch;
  /* 列表页与详情页统一使用同一高度，避免两个页面互相跳转时忽高忽矮 */
  height: 660px;
}
/* 关键②：栅格项默认 min-height:auto（不能小于内容），会把固定高度撑破，
   必须归零，子元素的 overflow-y 才能真正生效。 */
[data-shell="app"] .tk-wrap > * { min-height: 0; }
[data-shell="app"] .tk-col-list, [data-shell="app"] .tk-col-detail { min-width: 0; }
/* 卡片撑满栅格行高，内部用 flex 分配空间 */
[data-shell="app"] .tk-panel { display: flex; flex-direction: column; overflow: hidden; height: 100%; min-height: 0; }
[data-shell="app"] .tk-panel-head { gap: 10px; }
[data-shell="app"] .tk-panel-head h3 { margin: 0; font-size: 16px; }
[data-shell="app"] .tk-count-chip {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--color-primary); background: var(--color-primary-soft);
  padding: 3px 10px; border-radius: 999px;
}

/* 列表：状态筛选页签 */
[data-shell="app"] .tk-filter {
  display: flex; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--fe-card-border); flex-wrap: wrap;
}
[data-shell="app"] .tk-tab {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fe-card-border); background: transparent;
  color: var(--color-text-secondary); transition: all .15s;
}
[data-shell="app"] .tk-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
[data-shell="app"] .tk-tab.active {
  background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary);
}

/* 列表：条目区（超出部分由内部滚动承担，正常情况下每页 5 条刚好放下）*/
[data-shell="app"] .tk-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 8px 4px;
}
/* 条目固定行高：每页条数不足 5 时高度不抖动 */
[data-shell="app"] .tk-scroll .tk-item {
  min-height: 64px; box-sizing: border-box;
}
[data-shell="app"] .tk-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--fe-radius-sm);
  text-decoration: none; color: inherit;
  border: 1px solid transparent; transition: all .15s;
}
[data-shell="app"] .tk-item + .tk-item { margin-top: 4px; }
[data-shell="app"] .tk-item:hover { background: var(--fe-hover); border-color: var(--fe-card-border); }
[data-shell="app"] .tk-item.is-active {
  background: var(--color-primary-soft); border-color: transparent;
  box-shadow: inset 3px 0 0 var(--color-primary);
}
[data-shell="app"] .tk-item-main { flex: 1; min-width: 0; }
[data-shell="app"] .tk-item-title {
  font-size: 14px; font-weight: 650; color: var(--color-text); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
[data-shell="app"] .tk-item-sub { margin-top: 3px; font-size: 12px; color: var(--color-text-muted); }
[data-shell="app"] .tk-item-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none;
}
[data-shell="app"] .tk-item-time { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; }
[data-shell="app"] .tk-empty { padding: 32px 16px; }

/* 详情：标题头 */
[data-shell="app"] .tk-detail-head {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 22px;
}
[data-shell="app"] .tk-detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-shell="app"] .tk-detail-title h3 { margin: 0; font-size: 17px; line-height: 1.4; }
[data-shell="app"] .tk-detail-meta { font-size: 12.5px; color: var(--color-text-muted); }

/* 对话流：内置限高——高度由 .tk-wrap 的固定高度决定，超出在内部滚动。
   min-height:0 让它在 flex 容器里可以被压缩（否则内容一多就会把面板顶高）；
   不要再加写死的 max-height（如 460px），那会在面板底部留出一块空白。 */
[data-shell="app"] .tk-chat {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 22px; flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--fe-page);
  overscroll-behavior: contain;
}
[data-shell="app"] .tk-msg { display: flex; gap: 10px; align-items: flex-start; }
[data-shell="app"] .tk-msg-admin { flex-direction: row-reverse; }
[data-shell="app"] .tk-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
[data-shell="app"] .tk-avatar-user  { background: linear-gradient(135deg, #6b8dff, #8b5cf6); }
[data-shell="app"] .tk-avatar-admin { background: linear-gradient(135deg, #34d399, #10b981); }
[data-shell="app"] .tk-msg-body { min-width: 0; max-width: 76%; }
[data-shell="app"] .tk-msg-admin .tk-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
[data-shell="app"] .tk-msg-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px;
  font-size: 12px; color: var(--color-text-muted);
}
[data-shell="app"] .tk-msg-admin .tk-msg-head { flex-direction: row-reverse; }
[data-shell="app"] .tk-msg-who { font-weight: 650; color: var(--color-text-secondary); }
[data-shell="app"] .tk-bubble {
  width: fit-content; max-width: 100%;
  border-radius: 14px; padding: 11px 15px;
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.65; font-size: 14px; border: 1px solid;
}
[data-shell="app"] .tk-bubble-user {
  background: linear-gradient(135deg, #6b8dff, #7c5cff);
  border-color: transparent; color: #fff;
  border-bottom-right-radius: 4px;
}
[data-shell="app"] .tk-bubble-admin {
  background: var(--color-surface); border-color: var(--fe-card-border);
  color: var(--color-text); border-bottom-left-radius: 4px;
}
[data-theme="dark"] [data-shell="app"] .tk-bubble-admin {
  background: #1b212c; border-color: #2b323e;
}

/* 底部回复区 */
[data-shell="app"] .tk-foot {
  border-top: 1px solid var(--fe-card-border); padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
[data-shell="app"] .tk-foot-closed { align-items: flex-start; }
[data-shell="app"] .tk-input {
  resize: vertical; min-height: 76px; border-radius: var(--fe-radius-sm);
  background: var(--color-surface);
}
[data-shell="app"] .tk-foot-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
[data-shell="app"] .tk-btn-send { display: inline-flex; align-items: center; gap: 6px; }

/* 列表页：右侧表单 */
[data-shell="app"] .tk-form-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px dashed var(--color-border); padding-top: 14px; margin-top: 4px;
}
/* 提交表单：主体纵向弹性，textarea 跟随卡片高度增长 */
[data-shell="app"] .tk-col-form .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
[data-shell="app"] .tk-col-form form { flex: 1 1 auto; display: flex; flex-direction: column; }
[data-shell="app"] .tk-col-form .form-group:has(textarea) { flex: 1 1 auto; display: flex; flex-direction: column; }
[data-shell="app"] .tk-col-form textarea.form-control { flex: 1 1 auto; min-height: 200px; resize: none; }

/* 列表卡片底部提示：贴底显示，避免列表少时下方大片空白 */
[data-shell="app"] .tk-list-foot {
  margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--fe-card-border);
  font-size: 12px; color: var(--color-text-muted); text-align: center;
  background: var(--fe-page);
}

/* 工单列表分页（每页 5 条，超出时出现，取代滚动条） */
[data-shell="app"] .tk-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 10px 14px;
  border-top: 1px solid var(--fe-card-border);
}
[data-shell="app"] .tk-pager-info { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
[data-shell="app"] .tk-pager-btns { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
[data-shell="app"] .tk-pager-btns .btn {
  min-width: 30px; padding: 4px 8px; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.4; border-radius: 8px;
}
[data-shell="app"] .tk-pager-btns .btn.current {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff; font-weight: 700;
}
[data-shell="app"] .tk-pager-btns .btn:disabled { opacity: .45; cursor: not-allowed; }

/* 窄屏：单列堆叠，列表限高放开 */
@media (max-width: 980px) {
  /* 单列堆叠：钉死高度会把两栏挤扁，改回内容决定高度 */
  [data-shell="app"] .tk-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; height: auto; grid-template-rows: none; }
  [data-shell="app"] .tk-col-list { order: 2; }
  [data-shell="app"] .tk-col-detail { order: 1; }
  [data-shell="app"] .tk-panel { height: auto; }
  /* 堆叠后列表限高、对话给固定高度，避免整体过长 */
  [data-shell="app"] .tk-scroll { max-height: 380px; }
  [data-shell="app"] .tk-chat { height: 420px; flex: 0 0 auto; }
  [data-shell="app"] .tk-col-form textarea.form-control { min-height: 150px; }
  [data-shell="app"] .tk-msg-body { max-width: 86%; }
}

/* ---------- 认证页（登录/注册/找回）：与控制台同一视觉语言 ---------- */
.auth-body { background: var(--color-page); }
.auth-page {
  background:
    radial-gradient(900px 500px at 12% -10%, var(--color-primary-soft), transparent 60%),
    radial-gradient(700px 460px at 100% 0%, rgba(124,92,255,.10), transparent 55%),
    var(--color-page);
}
.auth-card { max-width: 430px; }
.auth-card .card {
  border-radius: 20px;
  border-color: var(--fe-card-border, #ebedf4);
  box-shadow: 0 1px 2px rgba(23,32,51,.04), 0 18px 46px rgba(23,32,51,.09);
}
.auth-card .card-body { padding: 32px !important; }
.auth-brand .brand-logo,
.auth-brand .auth-brand-img { border-radius: 16px; }
.auth-brand h1 { font-size: 23px; letter-spacing: -.3px; }
.auth-card .form-control { border-radius: 11px; padding: 11px 13px; }
.auth-card .btn { border-radius: 11px; }
.auth-card .btn-block { padding: 11px 20px; font-size: 15px; }
[data-theme="dark"] .auth-page {
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(109,141,255,.13), transparent 60%),
    radial-gradient(700px 460px at 100% 0%, rgba(124,92,255,.10), transparent 55%),
    var(--color-page);
}

/* ---------- 首页横幅通知（原为内联硬编码，现变量化） ---------- */
.fe-notice {
  background: var(--color-warning-soft);
  border: 1px solid rgba(200,135,24,.35);
  color: var(--color-warning);
  border-radius: var(--fe-radius-sm);
  padding: 12px 18px; font-size: 14px; margin-bottom: 16px;
}

/* ==========================================================================
   前台首页仪表盘：3×2 指标卡 + 套餐环形进度 + 今日模型统计 + 快捷操作
   ========================================================================== */

/* ---------- 仪表盘主区：两行 × 两列 ----------
   行1：4×2 指标卡（左） | 套餐消耗（右，与指标卡等高）
   行2：今日模型消耗（左）| 快捷操作 2×3（右，靠右变窄）
   ------------------------------------------------------------------ */
[data-shell="app"] .home-dash {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;   /* 同一行两张卡等高 */
}
[data-shell="app"] .home-dash > * { min-width: 0; }

/* ==========================================================================
   移动端顶栏压缩：消除横向溢出（随宽度分三级递进）
   实测依据（macOS 真实字体栈，含 padding/边框/间距）：
     原始：hamburger52 + 标题82 + 喇叭34 + CTA77 + 余额131 + 用户菜单142 ≈ 629px
     → 仅隐藏标题只能省 82px，仍溢出，故按优先级逐级收起：
   ① ≤900px 隐藏左上角标题（本次诉求）+ 汉堡收紧 + 用户菜单只留头像  ≈ 384px
   ② ≤480px 余额只留金额 + 头像再收                                   ≈ 323px
   ③ ≤360px 隐藏「购买套餐」（入口仍保留在侧栏菜单）                      ≈ 244px
   注意：标题移至页面内容区的 .page-title 展示，信息不丢失。
   ========================================================================== */
@media (max-width: 900px) {
  [data-shell="app"] .topbar { padding: 0 14px; gap: 10px; }
  /* ① 隐藏左上角标题（页面标题由内容区 .page-head 承担） */
  [data-shell="app"] .topbar-title { display: none; }
  /* 汉堡按钮：由 52px 收为 38px，保持点击热区 */
  [data-shell="app"] .topbar .hamburger {
    width: 38px; height: 38px; padding: 0; flex: none; border-radius: 10px;
  }
  /* 用户菜单：只留头像，隐藏用户名 */
  [data-shell="app"] .topbar .user-menu-name { display: none; }
}
@media (max-width: 480px) {
  [data-shell="app"] .topbar { padding: 0 12px; gap: 8px; }
  /* ② 余额胶囊只留金额（去掉「余额」二字，语义由 ¥ 与图标承担） */
  [data-shell="app"] .topbar .balance-chip-label { display: none; }
  [data-shell="app"] .topbar .balance-chip { padding: 6px 11px; font-size: 13.5px; }
  [data-shell="app"] .topbar .hamburger { width: 36px; height: 36px; }
  [data-shell="app"] .topbar .topbar-bell { width: 32px; height: 32px; }
  [data-shell="app"] .topbar .avatar { width: 28px; height: 28px; font-size: 12px; }
  [data-shell="app"] .topbar .user-menu-trigger { padding: 4px 10px 4px 4px; }
  [data-shell="app"] .topbar .topbar-cta { padding: 5px 10px; font-size: 12.5px; }
}
@media (max-width: 360px) {
  /* ③ 极窄屏：隐藏 CTA，购买套餐入口仍在侧栏菜单中 */
  [data-shell="app"] .topbar .topbar-cta { display: none; }
}

/* 指标卡：PC 固定 4 列 × 2 行；两行等高并撑满，与右侧套餐卡对齐。
   4 列后单卡变窄，因此收窄内边距/图标并下调数值字号，避免长金额、大数溢出换行 */
[data-shell="app"] .home-stats {
  margin-bottom: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
[data-shell="app"] .home-stats .stat-card { padding: 15px 16px; }
[data-shell="app"] .home-stats .stat-card.with-ico { grid-template-columns: 32px 1fr; gap: 0 12px; }
[data-shell="app"] .home-stats .stat-card .stat-ico { width: 32px; height: 32px; border-radius: 10px; }
[data-shell="app"] .home-stats .stat-card .stat-ico svg { width: 16px; height: 16px; }
[data-shell="app"] .home-stats .stat-card .stat-label { font-size: 12.5px; margin-bottom: 7px; }
[data-shell="app"] .home-stats .stat-card .stat-value { font-size: 20px; }
[data-shell="app"] .home-stats .stat-card .stat-value.mono { font-size: 18px; }
[data-shell="app"] .home-stats .stat-card .stat-sub { font-size: 11.5px; margin-top: 7px; }

/* 数值单位（如「Tokens」）：跟随在大数后面，弱化显示。
   注意 .stat-value 上有 word-break:break-all，单位需 nowrap 以免被拆成 "Token/s"。 */
[data-shell="app"] .home-stats .stat-card .stat-value .stat-unit {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  color: var(--color-text-muted);
  margin-left: 4px; white-space: nowrap;
}

/* ---------- 窄屏保护：4 列后单卡文字列很窄，长数值会换行并撑高整行 ----------
   真实几何（前台 .main margin-left = 侧栏 240 + 32、padding-right 16；.content 无左右内边距；
   .home-dash = 1.75fr | 1fr、gap 20；.home-stats 4 列、gap 16（继承 .stat-grid）；
   .stat-card 内边距 15px 16px；图标列 32px + 间距 12px）。
   用真实 app.css + 复刻骨架在无头 Chromium 实测（值取最坏情况「5841.29万 Tokens」）：
     视口   主内容  左栏   单卡   数值可用宽度   数值行高   结论
     1280    992   619   143     109        19 / 38   该值折两行（受宽度所限）
     1330   1042   650   150     116        19 / 38   折两行
     1366   1078   673   156     122        19 / 38   折两行
     1440   1152   720   168     134           19      单行
     1600   1312   822   194     160           19      单行
     1800   1512   949   225     191           19      单行
     1920   1632  1026   244     166           22      单行（紧凑两列结构，18px 字号）
   → 若不做处理，紧凑两列结构下数值可用宽度 = 单卡内容区 - 44（图标 + 间距），
     1280 时只剩 67px、1440 只剩 92px，长数值必然折行并把同排 4 张卡一起撑高。
     因此 ≤1800px 改为「图标 + 标签同行、数值与副信息通栏」：数值可用宽度由 X-44 提到 X
     （1600 视口 117.5 → 161.5px，+37%；1440 视口 92.1 → 136.1px，+48%），同时下调 1-2px 字号；
     ≥1801px 宽屏仍保持原本紧凑的左右两列结构（1920 实测数值列 166px，单行富余）。
   注：≤1366px（数值可用宽度 <130px）即便通栏仍会折两行，属物理宽度所限；因为卡片是
   grid-auto-rows:1fr + 同行等高，折行只会整行变高，不会错位。 */
@media (max-width: 1800px) {
  [data-shell="app"] .home-stats .stat-card.with-ico {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 10px;
  }
  /* 覆盖上方 ".stat-ico { grid-row: span 3 }"：图标只占第一行，与标签对齐 */
  [data-shell="app"] .home-stats .stat-card.with-ico .stat-ico { grid-row: 1; }
  [data-shell="app"] .home-stats .stat-card.with-ico .stat-label {
    grid-column: 2; grid-row: 1; align-self: center; margin-bottom: 0;
  }
  [data-shell="app"] .home-stats .stat-card.with-ico .stat-value {
    grid-column: 1 / -1; grid-row: 2; margin-top: 7px;
  }
  [data-shell="app"] .home-stats .stat-card.with-ico .stat-sub {
    grid-column: 1 / -1; grid-row: 3; margin-top: 5px;
  }
  /* 通栏后仍略紧，再收 1-2px 字号，给长金额留出余量 */
  [data-shell="app"] .home-stats .stat-card .stat-value { font-size: 18px; }
  [data-shell="app"] .home-stats .stat-card .stat-value.mono { font-size: 16px; }
}

/* 套餐消耗卡：与左侧指标卡等高；内容垂直居中；超高时内部滚动
   注意：overflow 会让另一轴的 visible 计算为 auto，故留出内边距避免裁掉圆环光晕 */
[data-shell="app"] .home-plan-card { display: flex; flex-direction: column; }
[data-shell="app"] .home-plan-card .card-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 18px 16px;
}
[data-shell="app"] .home-plan-card .card-body > .empty { justify-content: center; }

/* 单个「当前套餐」：左右布局（左侧文字纵向明细，右侧大圆环） */
[data-shell="app"] .plan-focus {
  display: flex; flex-direction: row; align-items: center;
  gap: 22px; text-align: left; padding: 0;
}
[data-shell="app"] .plan-focus__info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
}
/* 环形进度：作用域内补齐颜色变量，并放大描边、加柔光底色 */
[data-shell="app"] .plan-focus {
  --ring-track: #e8ebf3;
  --ring-color: var(--color-primary);
}
[data-theme="dark"] [data-shell="app"] .plan-focus { --ring-track: #262d3a; }
[data-shell="app"] .plan-focus .plan-ring__chart { position: relative; flex: none; margin-left: auto; }
[data-shell="app"] .plan-focus .plan-ring__chart svg { display: block; }
[data-shell="app"] .plan-focus .plan-ring__chart::before {
  content: ''; position: absolute; inset: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 72%);
  opacity: .85; pointer-events: none;
}
[data-theme="dark"] [data-shell="app"] .plan-focus .plan-ring__chart::before {
  background: radial-gradient(circle, rgba(109,141,255,.14) 0%, transparent 72%);
}
[data-shell="app"] .plan-focus .plan-ring__bar {
  stroke: var(--ring-color);
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 2px 5px rgba(53,100,223,.28));
}
[data-shell="app"] .plan-focus .plan-ring__bar.warn { stroke: var(--color-warning); filter: drop-shadow(0 2px 5px rgba(200,135,24,.28)); }
[data-shell="app"] .plan-focus .plan-ring__bar.danger { stroke: var(--color-danger); filter: drop-shadow(0 2px 5px rgba(214,70,70,.28)); }
[data-shell="app"] .plan-focus .plan-ring__center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity .18s ease;
}
/* 悬停/聚焦圆环时：中央的百分比淡出，由积分明细“填满”圆环内圈 */
[data-shell="app"] .plan-focus .plan-ring__chart:hover .plan-ring__center,
[data-shell="app"] .plan-focus .plan-ring__chart:focus-visible .plan-ring__center { opacity: 0; }

/* ---------- 圆环悬停浮层：显示具体消耗金额 ---------- */
[data-shell="app"] .plan-focus .plan-ring__chart { cursor: help; outline: none; border-radius: 50%; }
[data-shell="app"] .plan-focus .plan-ring__tip {
  position: absolute; inset: 21px; z-index: 3;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; text-align: center; padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--fe-card-border);
  box-shadow: 0 6px 18px rgba(23,32,51,.14);
  opacity: 0; visibility: hidden; transform: scale(.9);
  transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.3,.64,1), visibility .18s;
  pointer-events: none;
}
[data-shell="app"] .plan-focus .plan-ring__chart:hover .plan-ring__tip,
[data-shell="app"] .plan-focus .plan-ring__chart:focus-visible .plan-ring__tip {
  opacity: 1; visibility: visible; transform: scale(1);
}
[data-theme="dark"] [data-shell="app"] .plan-focus .plan-ring__tip {
  background: #1b2029; box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
[data-shell="app"] .plan-focus .plan-ring__tip-label {
  font-size: 9.5px; color: var(--color-text-muted); letter-spacing: .02em; line-height: 1.2;
}
[data-shell="app"] .plan-focus .plan-ring__tip-used {
  font-size: 14px; font-weight: 750; color: var(--color-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.4px; line-height: 1.25;
}
[data-shell="app"] .plan-focus .plan-ring__tip-used.is-warn { color: var(--color-warning); }
[data-shell="app"] .plan-focus .plan-ring__tip-used.is-danger { color: var(--color-danger); }
[data-shell="app"] .plan-focus .plan-ring__tip-sep {
  width: 34px; height: 1px; margin: 3px 0;
  background: var(--color-border);
}
[data-shell="app"] .plan-focus .plan-ring__tip-sub {
  font-size: 10px; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35;
}
[data-shell="app"] .plan-focus .plan-ring__tip-sub b { font-weight: 650; color: var(--color-text); }
[data-shell="app"] .plan-focus .plan-ring__pct {
  font-size: 27px; font-weight: 750; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
[data-shell="app"] .plan-focus .plan-ring__pct-label {
  font-size: 11px; color: var(--color-text-muted); margin-top: 1px;
}

[data-shell="app"] .plan-focus__name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-start; max-width: 100%;
  font-size: 15px; font-weight: 650; color: var(--color-text);
  line-height: 1.3;
}
[data-shell="app"] .plan-focus__kv {
  width: 100%; display: grid; grid-template-columns: 1fr; gap: 7px;
  border-top: 1px dashed var(--color-border); padding-top: 10px;
}
[data-shell="app"] .plan-focus__kv > div {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; gap: 8px; min-width: 0;
}
[data-shell="app"] .plan-focus__kv > div > span { color: var(--color-text-muted); flex: none; }
[data-shell="app"] .plan-focus__kv > div > b {
  color: var(--color-text); font-weight: 650; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-shell="app"] .plan-focus .form-hint { text-align: left; line-height: 1.55; font-size: 12.5px; }

/* 顶栏「刷新数据」：与主按钮同高，图标随 hover 旋转 */
[data-shell="app"] .page-head-actions [data-refresh] { display: inline-flex; align-items: center; gap: 6px; }
[data-shell="app"] .page-head-actions [data-refresh] svg { transition: transform .5s ease; }
[data-shell="app"] .page-head-actions [data-refresh]:hover svg { transform: rotate(180deg); }

/* 我的套餐：优先使用按钮与当前标记 */
[data-shell="app"] .pref-actions { display: inline-flex; align-items: center; gap: 8px; }
[data-shell="app"] tr.is-pref-row > td { background: var(--fe-hover); }
[data-shell="app"] tr.is-pref-row > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }

/* 其余卡片常规 */
[data-shell="app"] .home-model-card,
[data-shell="app"] .home-quick-card { display: flex; flex-direction: column; }
[data-shell="app"] .home-model-card .card-body,
[data-shell="app"] .home-quick-card .card-body { flex: 1; }

/* ---------- 套餐环形进度 ---------- */
[data-shell="app"] .plan-rings {
  display: flex; flex-direction: column; gap: 18px;
}
[data-shell="app"] .plan-ring {
  display: flex; align-items: center; gap: 22px;
  padding: 18px; border-radius: var(--fe-radius-sm);
  border: 1px solid var(--fe-card-border);
  background: var(--color-page);
  --ring-track: #e8ebf3;
  --ring-color: var(--color-primary);
}
[data-theme="dark"] [data-shell="app"] .plan-ring { --ring-track: #262d3a; background: #171c25; }
[data-shell="app"] .plan-ring.is-pref {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
[data-theme="dark"] [data-shell="app"] .plan-ring.is-pref { background: rgba(109,141,255,.10); }

[data-shell="app"] .plan-ring__chart { position: relative; flex: none; }
[data-shell="app"] .plan-ring__chart svg { display: block; }
[data-shell="app"] .plan-ring__bar { stroke: var(--ring-color); transition: stroke-dashoffset .5s ease; }
[data-shell="app"] .plan-ring__bar.warn { stroke: var(--color-warning); }
[data-shell="app"] .plan-ring__bar.danger { stroke: var(--color-danger); }
[data-shell="app"] .plan-ring__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
[data-shell="app"] .plan-ring__pct { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-shell="app"] .plan-ring__pct-label { font-size: 11px; color: var(--color-text-muted); }

[data-shell="app"] .plan-ring__info { flex: 1; min-width: 0; }
[data-shell="app"] .plan-ring__name {
  font-size: 15px; font-weight: 650; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
[data-shell="app"] .plan-ring__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
[data-shell="app"] .plan-ring__kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--color-text-secondary);
  padding: 4px 0;
}
[data-shell="app"] .plan-ring__kv b { color: var(--color-text); font-weight: 600; }
[data-shell="app"] .plan-ring__btn { margin-top: 12px; width: 100%; }
[data-shell="app"] .plan-ring__btn:disabled { opacity: 1; }

/* ---------- 模型消耗明细：大卡片内嵌小卡片，横向滚动（不限条数） ----------
   设计：不截断条数，超出宽度时底部出现胶囊状滚动条；卡宽加大避免「消耗 Token」折行。 */
[data-shell="app"] .model-cards {
  --mc-w: 176px;
  display: flex; flex-direction: row; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  /* 上下左右各留 6px：既给 hover 阴影/位移留空间，又不影响与卡片头的视觉对齐 */
  padding: 6px 6px 12px; margin: -6px -6px 0;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(53,100,223,.38) transparent;
}
/* 隐藏横向滚动条默认轨道，改用自绘胶囊（WebKit/Blink） */
[data-shell="app"] .model-cards::-webkit-scrollbar { height: 9px; }
[data-shell="app"] .model-cards::-webkit-scrollbar-track {
  background: var(--color-page); border-radius: 99px;
}
[data-shell="app"] .model-cards::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(53,100,223,.50), rgba(53,100,223,.30));
  border: 2px solid transparent; background-clip: padding-box;
  transition: background .18s ease;
}
[data-shell="app"] .model-cards::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(53,100,223,.82), rgba(53,100,223,.56));
  background-clip: padding-box;
}
[data-theme="dark"] [data-shell="app"] .model-cards { scrollbar-color: rgba(109,141,255,.42) transparent; }
[data-theme="dark"] [data-shell="app"] .model-cards::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(109,141,255,.55), rgba(109,141,255,.32));
  background-clip: padding-box;
}
[data-theme="dark"] [data-shell="app"] .model-cards::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(109,141,255,.85), rgba(109,141,255,.6));
  background-clip: padding-box;
}
[data-shell="app"] .model-card {
  flex: 0 0 var(--mc-w); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 14px 15px; border-radius: var(--fe-radius-sm);
  border: 1px solid var(--fe-card-border); background: var(--color-surface);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  min-width: 0;
}
[data-shell="app"] .model-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(53,100,223,.10);
  transform: translateY(-1px);
}
[data-shell="app"] .model-card__head {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
[data-shell="app"] .model-card__rank {
  flex: none; width: 18px; height: 18px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  background: var(--color-page); color: var(--color-text-secondary);
}
[data-shell="app"] .model-card:nth-child(1) .model-card__rank { background: var(--color-primary-soft); color: var(--color-primary); }
[data-shell="app"] .model-card__name {
  font-size: 13px; font-weight: 650; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
}
[data-shell="app"] .model-card__fee {
  font-size: 17px; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
[data-shell="app"] .model-card__fee-label { font-size: 11px; color: var(--color-text-muted); margin-top: -3px; }
/* 模型消耗明细：金额后跟随「积分」（积分不是钱，一律不加 ¥），弱化显示避免与金额抢焦点 */
[data-shell="app"] .model-card__fee .model-card__fee-pts {
  font-size: 12px; font-weight: 600; color: var(--color-primary);
  margin-left: 5px; letter-spacing: 0;
}
[data-shell="app"] .model-card__meta {
  display: flex; flex-direction: column; gap: 5px; flex: 1;
  border-top: 1px dashed var(--color-border); padding-top: 9px;
  font-size: 12px; color: var(--color-text-secondary);
}
[data-shell="app"] .model-card__meta > div:last-child { margin-top: auto; }
[data-shell="app"] .model-card__meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
[data-shell="app"] .model-card__meta > div > span { color: var(--color-text-muted); }
[data-shell="app"] .model-card__meta > div > b { color: var(--color-text); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-shell="app"] .model-card__meta > div > span { white-space: nowrap; }

/* ---------- 快捷操作：2 列 × 3 行 ---------- */
[data-shell="app"] .quick-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
[data-shell="app"] .quick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--fe-radius-sm);
  border: 1px solid var(--fe-card-border);
  background: var(--color-surface);
  color: var(--color-text); font-size: 13.5px; font-weight: 550;
  transition: all .15s;
}
[data-shell="app"] .quick-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transform: translateY(-1px);
}
[data-shell="app"] .quick-item__ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fe-hover); color: var(--color-primary);
}
[data-shell="app"] .quick-item__ico svg { width: 17px; height: 17px; }

/* ---------- 窄屏 / 移动端：保持原有单列堆叠，不做 3×2 强制 ---------- */
@media (max-width: 1100px) {
  [data-shell="app"] .home-dash { grid-template-columns: minmax(0, 1fr); }
  /* 单列后不再需要等高，去掉内部滚动 */
  [data-shell="app"] .home-plan-card .card-body { overflow-y: visible; }
}
@media (max-width: 900px) {
  /* 移动端：指标卡回退为自适应多列（与改造前一致），取消等高拉伸 */
  [data-shell="app"] .home-stats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: auto; }
  /* 套餐卡：窄屏回退为上下布局，圆环居中 */
  [data-shell="app"] .plan-focus { flex-direction: column; align-items: stretch; gap: 14px; }
  [data-shell="app"] .plan-focus .plan-ring__chart { margin-left: 0; align-self: center; }
  [data-shell="app"] .plan-ring { gap: 16px; padding: 14px; }
  [data-shell="app"] .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-shell="app"] .model-cards { --mc-w: 164px; }
}
@media (max-width: 480px) {
  [data-shell="app"] .plan-ring { flex-direction: column; align-items: flex-start; }
  [data-shell="app"] .plan-ring__chart { align-self: center; }
  [data-shell="app"] .plan-ring__btn { width: 100%; }
  /* 模型小卡：窄屏保留横向滚动，卡宽略收以露出「还有更多」 */
  [data-shell="app"] .model-cards { --mc-w: 152px; gap: 9px; }
}

/* ==========================================================================
   顶栏「喇叭」按钮 + 公告弹窗（列表 → 内容）
   设计参考：卡片式弹窗、背景模糊、浅色/深色双主题
   ========================================================================== */
[data-shell="app"] .topbar-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--fe-card-border); background: var(--color-surface);
  color: var(--color-text-secondary); cursor: pointer;
  transition: all .16s; flex: none;
}
[data-shell="app"] .topbar-bell:hover {
  color: var(--color-primary); border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
[data-shell="app"] .topbar-bell-dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; border: 2px solid var(--color-surface);
}

/* 侧栏「售后工单」红点：有客服新回复时显示 */
[data-shell="app"] .nav-item .nav-dot {
  position: absolute; top: 8px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 0 2px var(--color-sidebar);
}
/* 窄屏（侧栏收起为图标条）时不显示，避免叠在图标上 */
@media (max-width: 980px) {
  [data-shell="app"] .nav-item .nav-dot { display: none !important; }
}

/* ---------- 工单回复通知弹窗 ---------- */
.tk-notify-mask {
  display: none; position: fixed; inset: 0; z-index: 1300;
  padding: 8vh 16px;
  align-items: flex-start; justify-content: center; overflow-y: auto;
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(140%);
  animation: ann-fade .18s ease;
}
.tk-notify-mask.open { display: flex; }
.tk-notify {
  width: 100%; max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--fe-card-border, var(--color-border));
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .26);
  animation: ann-rise .22s cubic-bezier(.2,.8,.3,1);
}
.tk-notify-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 16px; position: relative;
}
.tk-notify-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.tk-notify-headtxt { min-width: 0; padding-right: 24px; }
.tk-notify-title { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.tk-notify-desc { margin: 0; font-size: 13px; line-height: 1.65; color: var(--color-text-muted); }
.tk-notify-desc b { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.tk-notify-close {
  position: absolute; top: 14px; right: 14px;
  border: 0; background: none; cursor: pointer; padding: 4px 8px;
  font-size: 16px; line-height: 1; border-radius: 7px;
  color: var(--color-text-muted);
}
.tk-notify-close:hover { background: var(--fe-hover, rgba(148,163,184,.14)); color: var(--color-text); }
.tk-notify-list {
  max-height: 320px; overflow-y: auto;
  padding: 4px 12px 12px;
}
.tk-notify-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--fe-radius-sm, 10px);
  text-decoration: none; color: inherit;
  border: 1px solid transparent; transition: all .15s;
}
.tk-notify-item + .tk-notify-item { margin-top: 4px; }
.tk-notify-item:hover { background: var(--fe-hover, rgba(148,163,184,.12)); border-color: var(--fe-card-border, var(--color-border)); }
.tk-notify-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tk-notify-item-title {
  font-size: 14px; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-notify-item-sub { font-size: 12px; color: var(--color-text-muted); }
.tk-notify-item-arrow { flex: none; color: var(--color-text-muted); font-size: 17px; }
.tk-notify-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--fe-card-border, var(--color-border));
  background: var(--fe-page, var(--color-page));
}
@media (max-width: 480px) {
  .tk-notify-foot .btn { flex: 1; justify-content: center; }
}

/* 遮罩：半透明 + 背景模糊（毛玻璃） */
.ann-mask {
  display: none; position: fixed; inset: 0; z-index: 1200;
  padding: 6vh 16px 8vh;
  align-items: flex-start; justify-content: center; overflow-y: auto;
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(140%);
  animation: ann-fade .18s ease;
}
.ann-mask.open { display: flex; }
@keyframes ann-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ann-rise { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
body.ann-no-scroll { overflow: hidden; }

.ann-modal {
  width: 100%; max-width: 560px;
  background: var(--color-surface);
  border: 1px solid var(--fe-card-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
  overflow: hidden; animation: ann-rise .22s cubic-bezier(.2,.8,.3,1);
}
.ann-modal-detail { max-width: 640px; }

/* 列表弹窗头 */
.ann-head {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 22px; border-bottom: 1px solid var(--fe-card-border);
}
.ann-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.ann-head-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--color-primary-soft); color: var(--color-primary); flex: none;
}
.ann-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 9px;
  border: none; background: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ann-close:hover { background: var(--fe-hover); color: var(--color-text); }

/* 列表 */
.ann-list { max-height: 62vh; overflow-y: auto; padding: 10px 10px 14px; }
.ann-loading, .ann-empty { padding: 40px 16px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.ann-empty-ico { font-size: 30px; margin-bottom: 8px; opacity: .55; }
.ann-empty p { margin: 0; }

.ann-item {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border-radius: 12px; text-align: left;
  border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; color: inherit; transition: all .15s;
}
.ann-item + .ann-item { margin-top: 2px; }
.ann-item:hover { background: var(--fe-hover); border-color: var(--fe-card-border); }
.ann-item:hover .ann-item-arrow { color: var(--color-primary); transform: translateX(2px); }
.ann-item-ico {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.ann-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* 徽标行（置顶 / 未读）：独立一行，不挤压标题 */
.ann-item-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ann-item-badges:empty { display: none; }
.ann-item-new {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1);
  padding: 1px 7px; border-radius: 6px;
}
/* 未读项：标题加重 + 左侧主色竖条，已读项自动弱化 */
.ann-item.is-unread .ann-item-title { font-weight: 700; }
.ann-item.is-unread .ann-item-ico { box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ann-item.is-unread::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}
.ann-item-title {
  font-size: 14.5px; font-weight: 600; color: var(--color-text); line-height: 1.45;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ann-item-ago { font-size: 12px; color: var(--color-text-muted); display: block; }
.ann-item-top {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 1px 7px; border-radius: 6px; margin-bottom: 2px;
}
.ann-item-arrow { flex: none; color: var(--color-text-muted); transition: all .15s; display: inline-flex; }

/* 列表底部：统计 + 一键全部已读 */
.ann-list-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--fe-card-border);
  background: var(--fe-page);
}
.ann-list-foot-tip { font-size: 12.5px; color: var(--color-text-muted); }
.ann-list-foot-tip b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.ann-list-foot .btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ann-list-foot .btn svg { flex: none; }
.ann-list-foot .btn:disabled { opacity: .5; cursor: not-allowed; }
/* 全部已读后按钮转为完成态（保留可点，不误导为可点击操作） */
.ann-list-foot .btn.is-done { color: var(--color-success, #10b981); border-color: transparent; background: none; }

/* 未读提示弹窗（与列表弹窗区分：更窄、内容居中） */
.ann-mask--prompt { align-items: center; padding: 16px; }
.ann-modal-prompt { max-width: 420px; }
.ann-prompt-body { padding: 26px 26px 20px; text-align: center; }
.ann-prompt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 15px; margin-bottom: 14px;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.ann-prompt-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.45; }
.ann-prompt-desc { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--color-text-muted); }
.ann-prompt-desc b { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ann-prompt-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--fe-card-border);
  background: var(--fe-page);
}
/* 窄屏：两个按钮等宽平铺更好点 */
@media (max-width: 480px) {
  .ann-prompt-foot .btn { flex: 1; justify-content: center; }
  .ann-list-foot { padding: 12px 14px; }
}

/* 内容弹窗 */
.ann-detail-head { padding: 20px 26px 14px; border-bottom: 1px solid var(--fe-card-border); }
.ann-detail-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ann-detail-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--color-primary-soft); color: var(--color-primary); flex: none;
}
.ann-detail-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--color-primary); background: var(--color-primary-soft);
  padding: 3px 9px; border-radius: 6px;
}
.ann-detail-title { margin: 0 0 8px; font-size: 20px; font-weight: 750; line-height: 1.4; }
.ann-detail-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12.5px; color: var(--color-text-muted);
}
.ann-detail-read { display: inline-flex; align-items: center; gap: 4px; color: var(--color-success, #10b981); }

.ann-detail-body { padding: 22px 26px; max-height: 52vh; overflow-y: auto; }
.ann-para {
  position: relative; margin: 0 0 14px; padding: 2px 0 2px 15px;
  font-size: 14.5px; line-height: 1.85; color: var(--color-text-secondary);
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #6b8dff, #a855f7) 1;
}
.ann-para:last-child { margin-bottom: 0; }

.ann-detail-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 26px; border-top: 1px solid var(--fe-card-border);
  background: var(--fe-page);
}
.ann-detail-tip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); }

/* 深色模式微调 */
[data-theme="dark"] .ann-modal { background: #151a23; border-color: #262d3a; }
[data-theme="dark"] .ann-mask { background: rgba(3, 6, 12, .62); }
[data-theme="dark"] .ann-detail-foot { background: #11151d; }
[data-theme="dark"] .ann-list-foot,
[data-theme="dark"] .ann-prompt-foot { background: #11151d; border-color: #262d3a; }
[data-theme="dark"] .ann-item.is-unread .ann-item-ico { box-shadow: 0 0 0 3px rgba(59,130,246,.22); }
[data-theme="dark"] .ann-head, [data-theme="dark"] .ann-detail-head { border-color: #262d3a; }
[data-theme="dark"] .ann-para { color: var(--color-text-secondary); }

@media (max-width: 640px) {
  .ann-mask { padding: 4vh 10px 6vh; }
  .ann-modal { border-radius: 16px; }
  .ann-head { padding: 15px 16px; }
  .ann-detail-head { padding: 16px 18px 12px; }
  .ann-detail-title { font-size: 17.5px; }
  .ann-detail-body { padding: 18px; max-height: 54vh; }
  .ann-detail-foot { padding: 12px 18px; }
  [data-shell="app"] .topbar-bell { width: 34px; height: 34px; }
}

/* ==========================================================================
   后台「公告管理」页（作用域 .ann-*，与前台弹窗同名类不冲突：
   前台弹窗类为 .ann-mask/.ann-modal/.ann-list/.ann-item/... 定义在本文件前部，
   此处使用 .ann-stats/.ann-stat/.ann-row/.ann-tab(s)/.ann-search/.ann-form-grid/.ann-check）
   ========================================================================== */
.ann-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.ann-stat {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.ann-stat-num { font-size: 26px; font-weight: 750; line-height: 1.2; letter-spacing: -.5px; }
.ann-stat-num.is-green  { color: #10b981; }
.ann-stat-num.is-blue   { color: var(--color-primary); }
.ann-stat-num.is-orange { color: #f97316; }
.ann-stat-label { margin-top: 4px; font-size: 12.5px; color: var(--color-text-muted); }

.ann-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ann-tab {
  font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
  text-decoration: none; color: var(--color-text-secondary);
  border: 1px solid var(--color-border); background: transparent; transition: all .15s;
}
.ann-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ann-tab.active { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary); }

.ann-search { display: flex; gap: 8px; margin-left: auto; }
.ann-search .form-control { min-width: 220px; }

.ann-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 4px; border-bottom: 1px solid var(--color-border);
}
.ann-row:last-child { border-bottom: none; }
.ann-row-main { flex: 1; min-width: 0; }
.ann-row-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14.5px; }
.ann-row-title strong { font-weight: 650; }
.ann-row-top {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 1px 7px; border-radius: 6px;
}
.ann-row-sub { margin-top: 5px; font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }
.ann-row-sub b { color: var(--color-text-secondary); font-weight: 600; }
.ann-row-preview {
  margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ann-row-ops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 300px; }

.ann-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ann-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding-top: 6px; }
.ann-check input { width: 16px; height: 16px; cursor: pointer; }

@media (max-width: 900px) {
  .ann-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ann-search { margin-left: 0; width: 100%; }
  .ann-search .form-control { min-width: 0; flex: 1; }
  .ann-row { flex-direction: column; gap: 10px; }
  .ann-row-ops { max-width: none; justify-content: flex-start; }
  .ann-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   「订单与账单」入账总览：累计充值 + 卡密兑换拆解（余额 / 套餐 / 合计）
   ========================================================================== */
[data-shell="app"] .bill-stats {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
[data-shell="app"] .bill-stat {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--color-surface); border: 1px solid var(--fe-card-border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--shadow-sm); transition: box-shadow .16s, transform .16s;
}
[data-shell="app"] .bill-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
[data-shell="app"] .bill-stat__ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
[data-shell="app"] .bill-stat__ico svg { width: 20px; height: 20px; }
[data-shell="app"] .bill-stat__body { min-width: 0; flex: 1; }
[data-shell="app"] .bill-stat__label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }
[data-shell="app"] .bill-stat__value {
  margin-top: 5px; font-size: 23px; font-weight: 750; line-height: 1.2;
  letter-spacing: -.4px; color: var(--color-text);
}
[data-shell="app"] .bill-stat__sub { margin-top: 5px; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
[data-shell="app"] .bill-stat__note {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--color-border);
  font-size: 11.5px; color: var(--color-text-muted); line-height: 1.55;
}
[data-shell="app"] .bill-stat__note b { color: var(--color-text-secondary); font-weight: 650; }

/* 累计充值：主色强调 */
[data-shell="app"] .bill-stat--total { border-color: rgba(53,100,223,.28); background: linear-gradient(180deg, rgba(53,100,223,.045), transparent); }
[data-shell="app"] .bill-stat--total .bill-stat__value { color: var(--color-primary); }
/* 卡密：绿色系，与「兑换成功」语义一致 */
[data-shell="app"] .bill-stat--card .bill-stat__ico { background: var(--color-success-soft); color: var(--color-success); }
[data-shell="app"] .bill-stat--card .bill-stat__value { color: var(--color-text); }
/* 合计：紫色强调 */
[data-shell="app"] .bill-stat--sum .bill-stat__ico { background: rgba(124,92,255,.14); color: #7c5cff; }
[data-shell="app"] .bill-stat--sum .bill-stat__value { color: #7c5cff; }

[data-theme="dark"] [data-shell="app"] .bill-stat--total {
  border-color: rgba(109,141,255,.3);
  background: linear-gradient(180deg, rgba(109,141,255,.07), transparent);
}
[data-theme="dark"] [data-shell="app"] .bill-stat--sum .bill-stat__ico { background: rgba(139,110,255,.2); }

@media (max-width: 700px) {
  [data-shell="app"] .bill-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-shell="app"] .bill-stat { padding: 13px 14px; gap: 10px; }
  [data-shell="app"] .bill-stat__value { font-size: 19px; }
  [data-shell="app"] .bill-stat__ico { width: 32px; height: 32px; border-radius: 9px; }
  [data-shell="app"] .bill-stat__ico svg { width: 17px; height: 17px; }
}

/* ==========================================================================
   API 密钥 →「模型分组」弹窗：收紧宽度
   --------------------------------------------------------------------------
   原实现复用 .modal.wide（720px），列表态只有名称+按钮，大片空白；
   编辑态虽有模型选择器，但 720px 在 1440 宽屏上偏远、行过长。
   改为按视图分别定宽：列表 520px、编辑 620px。
   ========================================================================== */
.modal.modal--group-list { max-width: 520px; }
.modal.modal--group-form { max-width: 620px; }
/* 双保险：遮罩下不被 .modal-mask > .modal 的 100vw-32px 反向放大 */
.modal-mask > .modal.modal--group-list { max-width: min(520px, calc(100vw - 32px)); }
.modal-mask > .modal.modal--group-form { max-width: min(620px, calc(100vw - 32px)); }

/* 分组编辑态：模型选择器略降高，让弹窗整体更紧凑 */
.modal--group-form .model-picker-list { max-height: 232px; }

/* 分组名过长时截断，避免撑破行 */
.group-card-main strong {
  display: block; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal--group-list .group-card-main strong { max-width: 260px; }

@media (max-width: 620px) {
  .modal-mask > .modal.modal--group-list,
  .modal-mask > .modal.modal--group-form { max-width: calc(100vw - 24px); }
  .group-card-main strong { max-width: 46vw; }
}

/* ==========================================================================
   card-head 图标：商务企业风（线性 1.8px 描边 + 圆角方形容器）
   --------------------------------------------------------------------------
   取代原先的 emoji（💳 🎫 🎯 💰 📒 🪙 👥）。emoji 在不同系统/字号下
   渲染差异大、色彩不可控、与站点主色脱节；改为可继承 currentColor 的 SVG。
   用法：<div class="card-head"><span class="card-ico"><svg…></svg></span><h3>标题</h3></div>
   ========================================================================== */
[data-shell="app"] .card-ico,
.card-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.card-ico svg { width: 17px; height: 17px; }
/* 语义配色 */
.card-ico--green  { background: var(--color-success-soft); color: var(--color-success); }
.card-ico--orange { background: var(--color-warning-soft); color: var(--color-warning); }
.card-ico--violet { background: rgba(124,92,255,.14); color: #7c5cff; }
.card-ico--info   { background: var(--color-info-soft); color: var(--color-info); }
.card-ico--muted  { background: var(--color-page); color: var(--color-text-muted); }

[data-theme="dark"] .card-ico--violet { background: rgba(139,110,255,.2); }
[data-theme="dark"] .card-ico--muted  { background: #1b212c; }

/* ==========================================================================
   价格「平台价 / 官方价」双值展示
   --------------------------------------------------------------------------
   背景：实际扣费 = 官方单价 × 费率乘数，但前台原先只显示官方单价，
   用户看不出倍率，容易误解「被多收钱」。现改为在同一单元格内并列：
       平台价（加粗，本站实际单价）/ 官方价（淡色，厂商基准价）
   平台价 = 官方价 × 费率乘数（后端 platform_price_micro() 计算）。
   仅展示层改动，不涉及任何计费。
   ========================================================================== */
.price-dual {
  display: inline-flex; align-items: baseline; gap: 4px;
  white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help;
}
.price-dual__plat { font-weight: 700; color: var(--color-primary); }
.price-dual__sep { color: var(--color-text-muted); opacity: .55; font-weight: 400; }
.price-dual__off { color: var(--color-text-muted); font-weight: 400; font-size: .92em; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
[data-theme="dark"] .price-dual__off { text-decoration-color: rgba(255,255,255,.28); }

/* 表格中的双值略紧凑，避免撑高行 */
.table td .price-dual { font-size: 13px; }
/* 详情页大卡片里的双值稍大，突出平台价 */
.stat-card .price-dual { font-size: 19px; }

/* 后台发布价格弹窗：平台价实时预览 */
.price-preview {
  margin-top: 4px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--color-page); border: 1px dashed var(--color-border);
}
.price-preview__head { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.price-preview__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 13px;
}
.price-preview__row + .price-preview__row { border-top: 1px dashed var(--color-border); }
.price-preview__k { color: var(--color-text-muted); }
.price-preview__v { font-variant-numeric: tabular-nums; }
.price-preview__v .pp-plat { color: var(--color-primary); }
.price-preview__v i { font-style: normal; font-size: 12px; color: var(--color-text-muted); }
.price-preview__v .pp-off { color: var(--color-text-muted); }

/* ==========================================================================
   计费增强「峰谷计费 / 上下文分档计费」
   --------------------------------------------------------------------------
   展示层：前台【模型与价格】峰谷双行价格、分档徽标、详情页计费规则卡片；
   管理端：发布价格弹窗的时段表 / 分档表编辑 UI。
   样式全部走主题变量，自动适配深色模式。
   ========================================================================== */

/* ---------- 前台：峰谷两档价格（同一单元格内两行） ---------- */
.price-pv { display: inline-flex; flex-direction: column; gap: 2px; cursor: help; }
.price-pv__row { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.table td .price-pv { font-size: 13px; }
.stat-card .price-pv { font-size: 17px; }
.rule-price-vals .price-pv { font-size: 13px; }

.pv-tag {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 600;
  transform: translateY(-1px);
}
.pv-tag--peak { background: var(--color-warning-soft); color: var(--color-warning); }
.pv-tag--off  { background: var(--color-success-soft); color: var(--color-success); }

/* ---------- 前台：上下文分档徽标 ---------- */
.ctx-badge {
  display: inline-flex; align-items: center; margin-top: 4px;
  padding: 1px 8px; border-radius: 20px; font-size: 11px; line-height: 1.7;
  background: var(--color-warning-soft); color: var(--color-warning);
  white-space: nowrap; cursor: help; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 前台列表：模型名下的计费规则标签 ---------- */
.model-rules-tags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.model-rules-tags .badge { font-size: 11px; padding: 1px 8px; cursor: help; }

/* ---------- 前台详情：计费规则卡片 ---------- */
.rule-title { font-size: 15px; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .rule-price-grid { grid-template-columns: 1fr; } }
.rule-price-item { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 12px; background: var(--color-page); }
.rule-price-name { font-weight: 600; font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rule-price-vals { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.rule-price-vals > span { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rule-schedule td, .rule-schedule th { padding: 6px 10px; }
.rule-schedule td.nowrap { white-space: nowrap; }

/* ---------- 后台：发布价格弹窗（计费增强区块） ---------- */
.billing-rule-box {
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0; background: var(--color-page);
}
.billing-rule-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.billing-rule-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); }
.billing-rule-toggle .text-muted { font-size: 12px; }
.billing-rule-body { margin-top: 12px; }
.billing-rule-body .form-group { margin-bottom: 8px; }

/* 峰谷：时段规则行 */
.pv-rule-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px dashed var(--color-border);
}
.pv-rule-row:last-child { border-bottom: none; }
.pv-days { display: flex; gap: 3px; }
.pv-day {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 12px; cursor: pointer; padding: 0; line-height: 1;
}
.pv-day:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pv-day.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.pv-time { width: 108px; flex: 0 0 auto; }
.pv-arrow { color: var(--color-text-muted); }
.pv-tier { width: 84px; flex: 0 0 auto; }
.pv-del {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--color-danger);
  font-size: 16px; cursor: pointer; border-radius: 6px; line-height: 1; flex: 0 0 auto;
}
.pv-del:hover { background: var(--color-danger-soft); }

/* 上下文：分档行 */
.ctx-tier-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px dashed var(--color-border);
}
.ctx-tier-row:last-child { border-bottom: none; }
.ctx-label { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.ctx-min { width: 110px; flex: 0 0 auto; }
.ctx-mult { width: 78px; flex: 0 0 auto; }

/* ==========================================================================
   用量抽屉：价格明细网格卡片
   --------------------------------------------------------------------------
   背景：峰谷/分档上线后，价格区需展示「本单生效（3 列）+ 版本基准价（3 列）」，
   原"长标签 + 长数值"的 kv 行在窄抽屉里互相挤压，数字会被折行拆散（如 ¥0.1 / 5）。
   改为 4 列网格（行标签 + 输入/输出/缓存），数值禁止折行，窄屏自动缩字号。
   ========================================================================== */
.price-grid {
  margin: 8px 0 10px; padding: 10px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 8px);
  background: var(--color-page);
}
.price-grid__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px;
}
.price-grid__row {
  display: grid; grid-template-columns: 4.6em 1fr 1fr 1fr; gap: 4px 8px;
  padding: 5px 0; align-items: baseline;
}
.price-grid__row--head { padding: 0 0 4px; border-bottom: 1px dashed var(--color-border); }
.price-grid__row + .price-grid__row { border-top: 1px dashed var(--color-border); }
.price-grid__row--head { border-top: none; }
.price-grid__label { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.price-grid__label--eff { color: var(--color-primary); font-weight: 600; }
.price-grid__col { font-size: 11px; color: var(--color-text-muted); text-align: right; white-space: nowrap; }
.price-grid__cell {
  font-size: 12px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.price-grid__cell--eff { font-weight: 600; color: var(--color-text); }
@media (max-width: 520px) {
  .price-grid { padding: 8px 10px; }
  .price-grid__row { grid-template-columns: 3.6em 1fr 1fr 1fr; gap: 4px 6px; }
  .price-grid__cell { font-size: 11px; }
}

/* ==========================================================================
   芭乐品牌主题 · 质感增强层（2026-09-20）
   --------------------------------------------------------------------------
   品牌色板（取自站点 Logo「芭乐 AI」）：
     轨道紫 #5B4A9F · 果肉粉 #D2648A · 果皮青 #3E96A0 · 科技蓝 #3A84BF
   本层只做「配色与质感」增强，不改变任何布局结构：
   渐变主按钮 / 侧栏选中指示 / 指标图标色系 / 空状态图标 / 登录页氛围 / 细节打磨。
   深色模式自动适配（色值均走变量或显式暗色覆盖）。
   ========================================================================== */

/* ---------- 主按钮：品牌渐变（紫 → 粉），悬停微微上浮 ---------- */
.btn-primary {
  background: var(--brand-grad);
  background-size: 160% 160%;
  background-position: 20% 20%;
  box-shadow: 0 2px 8px -2px rgba(91, 74, 159, .35);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-grad);
  background-size: 160% 160%;
  background-position: 75% 30%;
  box-shadow: 0 6px 18px -4px rgba(91, 74, 159, .45);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 4px -1px rgba(91, 74, 159, .4); }

/* ---------- 侧边栏：品牌化选中态（淡紫渐变 + 左侧指示条） ---------- */
[data-shell="app"] .nav-item.active {
  background: linear-gradient(90deg, rgba(91, 74, 159, .11), rgba(91, 74, 159, .03));
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}
[data-theme="dark"] [data-shell="app"] .nav-item.active {
  background: linear-gradient(90deg, rgba(139, 118, 224, .15), rgba(139, 118, 224, .03));
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

/* ---------- 顶栏：轻微悬浮质感 + 余额胶囊细节 ---------- */
[data-shell="app"] .topbar {
  box-shadow: 0 1px 0 rgba(76, 62, 140, .05), 0 6px 16px -14px rgba(76, 62, 140, .25);
}
.topbar .balance-chip {
  border: 1px solid rgba(91, 74, 159, .14);
  transition: box-shadow .15s ease, transform .15s ease;
}
.topbar .balance-chip:hover {
  box-shadow: 0 4px 12px -4px rgba(91, 74, 159, .35);
  transform: translateY(-1px);
}
[data-theme="dark"] .topbar .balance-chip { border-color: rgba(139, 118, 224, .22); }

/* ---------- 指标卡图标：品牌色系（紫 / 粉 / 青 / 蓝） ---------- */
[data-shell="app"] .stat-ico.violet { background: var(--color-primary-soft); color: var(--color-primary); }
[data-shell="app"] .stat-ico.orange { background: var(--brand-pink-soft);  color: var(--brand-pink); }
[data-shell="app"] .stat-ico.green  { background: var(--brand-teal-soft);  color: var(--brand-teal); }
[data-shell="app"] .stat-ico.blue   { background: var(--brand-blue-soft);  color: var(--color-info); }

/* ---------- 品牌 Logo：统一圆角（深浅模式都精致） ---------- */
[data-shell="app"] .brand-logo-img { border-radius: 9px; }
.auth-brand-img { border-radius: 12px; }

/* ---------- 空状态：支持矢量图标（保留 emoji 兼容） ---------- */
.empty .empty-icon svg {
  width: 46px; height: 46px; stroke-width: 1.4;
  color: var(--color-primary); opacity: .78;
}
[data-theme="dark"] .empty .empty-icon svg { opacity: .85; }

/* ---------- 登录 / 注册：品牌氛围背景 ---------- */
.auth-page {
  background:
    radial-gradient(760px 460px at 14% -6%, rgba(91, 74, 159, .10), transparent 62%),
    radial-gradient(680px 420px at 92% 2%, rgba(210, 100, 138, .10), transparent 58%),
    radial-gradient(600px 420px at 62% 110%, rgba(62, 150, 160, .07), transparent 60%),
    var(--color-page);
}
.auth-card { box-shadow: var(--shadow-md); border-radius: var(--radius-lg); }

/* ---------- 细节打磨：紫调浅色 ---------- */
.badge-muted { background: #F1EFF7; }
[data-theme="dark"] .badge-muted { background: #26232F; }
.table tbody tr:hover td { background: #FAFAFD; }
[data-theme="dark"] .table tbody tr:hover td { background: #1D1A27; }
[data-shell="app"] .progress { background: #EDEBF5; }
[data-theme="dark"] [data-shell="app"] .progress { background: #231F2E; }

/* 公告中心空状态：矢量铃铛 */
.ann-empty-ico svg { width: 42px; height: 42px; stroke-width: 1.5; color: var(--color-primary); }

/* ==========================================================================
   UI 2.0 · 科幻玻璃视觉层（v1.9.0）
   --------------------------------------------------------------------------
   原则：**只改视觉**。不新增/改名任何布局类，不改 DOM 结构语义，不动任何交互逻辑。
   技法：斜向渐变玻璃 + 背景模糊 + 顶部内高光 + 镜面反光条 + 渐变边缘反光环 + 悬停外发光（5 层）
   性能：背景光斑只做 1 层；仅动画 transform / opacity；移动端降模糊。
   ========================================================================== */

/* ---------- 1. 玻璃令牌（明暗双主题） ---------- */
:root {
  --glass-tint: 255 255 255;        /* 面板玻璃底色（RGB 三分量） */
  --glass-a1: 0.78;                 /* 斜向渐变起点不透明度 */
  --glass-a2: 0.58;                 /* 斜向渐变终点不透明度（更透） */
  --glass-stroke: 255 255 255;      /* 边框色 */
  --glass-stroke-a: 0.60;
  --glass-inset: 255 255 255;       /* 内高光 / 反光条 */
  --glass-inset-a: 0.92;
  --glass-drop: 88 104 160;         /* 底部收暗 */
  --glass-blur: 22px;
  --glass-sat: 1.4;
  --glass-ring: 76 95 228;          /* 边缘反光环主色 */
  --blob-a1: 0.18;                  /* 背景光斑最强不透明度（越低面板越浅、文字越清晰） */
  --primary-glow: 34 211 238;       /* 冷青发光：仅用于光晕，不承载文字 */
  --primary-grad: linear-gradient(135deg, #3745BE 0%, #4450CC 55%, #1E56AE 100%); /* 承载白字的渐变（已按 4.5:1 校准） */
  --panel-bg: linear-gradient(158deg,
      rgb(var(--glass-tint) / var(--glass-a1)) 0%,
      rgb(var(--glass-tint) / var(--glass-a2)) 100%);
}
[data-theme="dark"] {
  --glass-tint: 30 40 66;
  --glass-a1: 0.66;
  --glass-a2: 0.34;
  --glass-stroke: 168 190 255;
  --glass-stroke-a: 0.18;
  --glass-inset: 210 226 255;
  --glass-inset-a: 0.22;
  --glass-drop: 2 6 18;
  --glass-blur: 26px;
  --glass-ring: 139 155 255;
  --blob-a1: 0.22;
  --primary-glow: 62 224 245;
  --primary-grad: linear-gradient(135deg, #3B49BE 0%, #4653CC 55%, #1F55A6 100%);
}

/* ---------- 2. 背景氛围层：光斑 + 科技网格（装饰性，不参与交互） ---------- */
@keyframes glass-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-fx::before {           /* 冷色光斑（单层，模糊 74px） */
  content: ''; position: absolute; inset: -18%;
  background:
    radial-gradient(38% 34% at 14% 12%, rgb(76 95 228 / .34), transparent 62%),
    radial-gradient(34% 30% at 86% 8%,  rgb(34 211 238 / .26), transparent 64%),
    radial-gradient(40% 36% at 78% 88%, rgb(126 123 245 / .24), transparent 66%),
    radial-gradient(32% 28% at 22% 92%, rgb(42 127 212 / .20), transparent 66%);
  filter: blur(74px);
  animation: glass-drift 34s ease-in-out infinite;
}
.bg-fx::after {            /* 科技网格：边缘径向渐隐 */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(76 95 228 / .085) 1px, transparent 1px),
    linear-gradient(90deg, rgb(76 95 228 / .085) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(88% 78% at 50% 42%, #000 0%, transparent 82%);
          mask-image: radial-gradient(88% 78% at 50% 42%, #000 0%, transparent 82%);
}
[data-theme="dark"] .bg-fx::before {
  background:
    radial-gradient(38% 34% at 14% 12%, rgb(76 95 228 / .40), transparent 62%),
    radial-gradient(34% 30% at 86% 8%,  rgb(62 224 245 / .22), transparent 64%),
    radial-gradient(40% 36% at 78% 88%, rgb(126 123 245 / .26), transparent 66%),
    radial-gradient(32% 28% at 22% 92%, rgb(42 127 212 / .22), transparent 66%);
}
[data-theme="dark"] .bg-fx::after {
  background-image:
    linear-gradient(rgb(139 155 255 / .10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(139 155 255 / .10) 1px, transparent 1px);
}
.layout { position: relative; z-index: 1; }

/* ---------- 3. 图标体系（统一线宽 / 尺寸 / 四态） ---------- */
.icon-sprite { display: none; }            /* 雪碧图容器，必须隐藏 */
.ic {
  width: 16px; height: 16px; flex: 0 0 auto;
  display: inline-block;
  stroke: currentColor;                    /* 随父元素变色 → 悬停/选中/禁用由父级驱动 */
  stroke-width: 2;                         /* ★ 全站线宽唯一来源 */
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
  vertical-align: -0.19em;                 /* 与中文基线对齐 */
  opacity: .95;
  transition: opacity .2s ease, transform .2s ease;
}
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 20px; height: 20px; }
.ic-xl { width: 24px; height: 24px; }
.ic-2xl { width: 28px; height: 28px; }
.ic-3xl { width: 38px; height: 38px; stroke-width: 1.6; }
.ic--glow { filter: drop-shadow(0 0 6px rgb(var(--primary-glow) / .55)); }
.ic--spin { animation: ic-spin 1s linear infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
/* 四态：默认继承父级 color；父级 :hover 提亮；父级 .active 取主色；父级 :disabled 降透明 */
.nav-item:hover .ic, .btn:hover .ic, a:hover > .ic { opacity: 1; }
.nav-item.active .ic, .active > .ic, [aria-current] .ic { color: var(--color-primary); opacity: 1; }
:disabled .ic, .is-disabled .ic, [aria-disabled="true"] .ic { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .ic--spin { animation: none; } }

/* ---------- 4. 玻璃面板核心（5 层一次写全） ---------- */
/* ⚠️ 这里**绝不能**写 position: relative —— .drawer 基线是 fixed（滑入抽屉）、.dropdown 是 absolute，
   一旦被覆盖成 relative 就会掉进文档流：遮罩照常显示但抽屉/下拉不可见（v1.9.0 实测踩中）。
   需要定位的元素在下面单独声明。 */
.card, .stat-card, .modal, .plan-card, .filter-bar,
.auth-card, .seg, .table-wrap {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
  box-shadow:
    inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),   /* 顶部内高光 */
    inset 0 -1px 0 rgb(var(--glass-drop) / .26),                    /* 底部收暗 */
    var(--shadow-sm);
}
/* 镜面反光条：玻璃质感的关键 */
.card::after, .stat-card::after, .modal::after, .plan-card::after, .auth-card::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              rgb(var(--glass-inset) / var(--glass-inset-a)) 50%, transparent);
  pointer-events: none;
}
/* 渐变边缘反光环：左上受光 / 右下收暗（1px，mask 挖空中心） */
.card::before, .stat-card::before, .modal::before, .plan-card::before, .auth-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg,
    rgb(var(--glass-inset) / .95) 0%, rgb(var(--glass-stroke) / .18) 22%,
    transparent 46%, transparent 58%, rgb(var(--glass-ring) / .34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* 承载 ::before/::after 反光层、且基线本就是 static 的元素才补 relative（不动已经定位的元素） */
.card, .stat-card, .modal, .plan-card, .auth-card { position: relative; }
/* 只给「子元素都是静态」的面板补 z-index，避免覆盖掉弹窗/抽屉内绝对定位的子元素（如 .modal-close） */
.card > *, .stat-card > *, .plan-card > * { position: relative; z-index: 1; }
.card, .stat-card, .plan-card { border-radius: var(--radius-lg); overflow: visible; }

/* 悬停外发光：科幻感的来源（仅 transform / box-shadow） */
.card:hover, .stat-card:hover {
  box-shadow:
    inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),
    inset 0 -1px 0 rgb(var(--glass-drop) / .26),
    0 0 0 1px rgb(var(--glass-ring) / .22),
    0 0 34px -8px rgb(var(--primary-glow) / .70),
    var(--shadow-md);
}
.stat-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: rgb(var(--glass-ring) / .38); }

/* ---------- 5. 外壳：侧栏 / 顶栏 / 内容 ---------- */
.sidebar {
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .74), rgb(var(--glass-tint) / .52));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-right: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
  box-shadow: 1px 0 0 rgb(var(--glass-inset) / .5), 18px 0 44px -34px rgb(16 24 48 / .55);
}
.topbar {
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .80), rgb(var(--glass-tint) / .58));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
          backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border-bottom: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
}
.nav-item { position: relative; border-radius: 10px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { transform: translateX(1px); }
.nav-item.active { box-shadow: inset 0 0 0 1px rgb(var(--glass-ring) / .22), 0 0 18px -10px rgb(var(--primary-glow) / .8); }
.nav-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.nav-ico .ic { width: 18px; height: 18px; }
.sidebar-foot { border-top: 1px solid rgb(var(--glass-stroke) / .5); }

/* ---------- 6. 表格 ---------- */
.table-wrap {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .58), rgb(var(--glass-tint) / .40));
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
          backdrop-filter: blur(14px) saturate(var(--glass-sat));
  border: 1px solid rgb(var(--glass-stroke) / calc(var(--glass-stroke-a) * .9));
}
.table th { background: rgb(var(--glass-tint) / .58); border-bottom: 1px solid rgb(var(--glass-stroke) / .55); }
.table td { border-bottom: 1px solid rgb(var(--glass-stroke) / .38); }
.table tbody tr { transition: background .16s ease; }
.table tbody tr:hover td { background: rgb(var(--glass-ring) / .07); }
[data-theme="dark"] .table tbody tr:hover td { background: rgb(var(--glass-ring) / .12); }

/* ---------- 7. 按钮 / 表单 / 徽标 / 分段 ---------- */
.btn { border-radius: 10px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary {
  background-image: var(--primary-grad);           /* 承载白字用暗一点的渐变，保证对比度 */
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 6px 18px -10px rgb(var(--glass-ring) / .9);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 0 0 1px rgb(var(--glass-ring) / .35),
              0 10px 26px -12px rgb(var(--primary-glow) / .85);
}
.btn-secondary, .btn-ghost {
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .68), rgb(var(--glass-tint) / .42));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
}
.btn-ghost:hover, .btn-secondary:hover { border-color: rgb(var(--glass-ring) / .40); }
.form-control {
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .70), rgb(var(--glass-tint) / .52));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  /* 表单控件用「可见的冷灰描边」而不是玻璃白描边：白描边叠在白玻璃卡上会完全看不见边界 */
  border: 1px solid var(--color-border-strong);
  box-shadow: inset 0 1px 0 rgb(var(--glass-inset) / .55);   /* 顶部内高光，保留玻璃感 */
  border-radius: 10px;
}
.form-control:focus {
  border-color: rgb(var(--glass-ring) / .75);
  box-shadow: 0 0 0 3px rgb(var(--glass-ring) / .18), 0 0 20px -8px rgb(var(--primary-glow) / .7);
}
.badge { border: 1px solid rgb(var(--glass-stroke) / .35); backdrop-filter: blur(6px); }
.seg { border: 1px solid rgb(var(--glass-stroke) / .45); border-radius: 10px; }
.seg button.is-active { background: var(--panel-bg); box-shadow: 0 1px 3px rgb(16 24 48 / .12); }
.progress { background: rgb(var(--glass-drop) / .18); }
.progress > div { background-image: var(--primary-grad); }

/* ---------- 8. 弹窗 / 抽屉 / 下拉 / 提示 ---------- */
.drawer-mask, .modal-mask { background: rgb(8 12 26 / .48); backdrop-filter: blur(6px); }
.modal, .drawer { border-radius: var(--radius-lg); }
.dropdown {
  border-radius: 12px; padding: 6px;
  box-shadow: inset 0 1px 0 rgb(var(--glass-inset) / .6), 0 18px 44px -22px rgb(8 12 26 / .55);
}
.alert { border-radius: 12px; backdrop-filter: blur(8px); border: 1px solid rgb(var(--glass-stroke) / .45); }
.empty .empty-icon { color: var(--color-primary); opacity: .8; }

/* ---------- 9. 图标承载位：把文字符号的位置改成图标后统一对齐 ---------- */
.btn .ic, .badge .ic, .nav-item .ic, .empty .ic { margin-right: 6px; }
.btn .ic:only-child, .badge .ic:only-child, .btn .ic:last-child { margin-right: 0; }
.plan-features li { display: flex; gap: 8px; align-items: flex-start; }
.plan-features li::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px;
  background-color: var(--color-success);
  /* 用长手属性：mask 简写会把 data-URI 里的逗号当成"多图层"拆分，导致遮罩失效只剩实心色块 */
  -webkit-mask-image: var(--ico-check);          mask-image: var(--ico-check);
  -webkit-mask-position: center;                 mask-position: center;
  -webkit-mask-size: contain;                    mask-size: contain;
  -webkit-mask-repeat: no-repeat;                mask-repeat: no-repeat;
}
:root { --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- 10. 响应式与降级 ---------- */
@media (max-width: 900px) {
  .ic { vertical-align: -0.16em; }
  .modal, .drawer { -webkit-backdrop-filter: blur(24px) saturate(var(--glass-sat)); backdrop-filter: blur(24px) saturate(var(--glass-sat)); }
}
@media (max-width: 420px) {
  :root { --glass-blur: 52px; }
  [data-theme="dark"] { --glass-blur: 20px; }   /* 模糊半径即 GPU 开销，小屏收敛 */
  .bg-fx::before { filter: blur(52px); }
  .bg-fx::after { background-size: 38px 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-fx::before { animation: none; }
  .stat-card:hover { transform: none; }
  .nav-item:hover { transform: none; }
}
/* 不支持 backdrop-filter 的旧浏览器：退回不透明面板，保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat-card, .modal, .drawer, .dropdown, .plan-card, .filter-bar, .auth-card, .sidebar, .topbar, .table-wrap {
    background: var(--color-surface);
  }
}

/* ==========================================================================
   UI 2.0 · 前台玻璃层（v1.9.1）
   --------------------------------------------------------------------------
   为什么单写一段：前台有一套独立的 `[data-shell="app"]` 设计系统（--fe-* 令牌 + 带外边距的浮起外壳），
   其特异性高于通用 `.card` 规则，会把玻璃材质覆盖成不透明表面。这里用同等特异性 + 更靠后的顺序接管。
   仍然只改视觉：不动任何布局尺寸、间距与交互。
   ========================================================================== */

/* ① 前台画布：让背景氛围层（.bg-fx 的光斑 + 纹理）透出来 */
body { background: var(--color-page); }
[data-shell="app"] {
  background: transparent;                       /* 原来是 --fe-page 不透明底色，会挡住 .bg-fx */
  --fe-page: transparent;
  --fe-radius: var(--radius-lg);
  --fe-card-border: rgb(var(--glass-stroke) / var(--glass-stroke-a));
  --fe-hover: rgb(var(--glass-ring) / .08);
  --fe-card-shadow: inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),
                    inset 0 -1px 0 rgb(var(--glass-drop) / .24), var(--shadow-sm);
}
[data-theme="dark"] [data-shell="app"] {
  --fe-card-border: rgb(var(--glass-stroke) / var(--glass-stroke-a));
  --fe-hover: rgb(var(--glass-ring) / .14);
}

/* ② 浮起式外壳（侧栏/顶栏/页头）→ 完整玻璃 */
[data-shell="app"] .sidebar,
[data-shell="app"] .topbar,
[data-shell="app"] .page-head {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
  box-shadow: inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),
              inset 0 -1px 0 rgb(var(--glass-drop) / .24),
              var(--shadow-sm);
}
[data-shell="app"] .page-head::after,
[data-shell="app"] .topbar::after {                /* 镜面反光条 */
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--glass-inset) / var(--glass-inset-a)) 50%, transparent);
  pointer-events: none;
}
[data-shell="app"] .sidebar > *,
[data-shell="app"] .page-head > * { position: relative; z-index: 1; }

/* ③ 卡片 / 指标卡 / 快速入口 / 认证卡：玻璃描边 + 内高光（覆盖 fe 令牌的平面观感） */
[data-shell="app"] .card,
[data-shell="app"] .stat-card,
[data-shell="app"] .quick-item,
[data-shell="app"] .auth-card,
[data-shell="app"] .modal,
[data-shell="app"] .dropdown {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
  box-shadow: inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),
              inset 0 -1px 0 rgb(var(--glass-drop) / .24),
              var(--shadow-sm);
}
[data-shell="app"] .card,
[data-shell="app"] .stat-card,
[data-shell="app"] .quick-item { position: relative; }
[data-shell="app"] .card::after,
[data-shell="app"] .stat-card::after,
[data-shell="app"] .quick-item::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--glass-inset) / var(--glass-inset-a)) 50%, transparent);
  pointer-events: none;
}
[data-shell="app"] .card > *,
[data-shell="app"] .stat-card > *,
[data-shell="app"] .quick-item > * { position: relative; z-index: 1; }
[data-shell="app"] .stat-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
[data-shell="app"] .stat-card:hover,
[data-shell="app"] .card:hover {
  box-shadow: inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),
              inset 0 -1px 0 rgb(var(--glass-drop) / .24),
              0 0 0 1px rgb(var(--glass-ring) / .20),
              0 0 32px -10px rgb(var(--primary-glow) / .65),
              var(--shadow-md);
}
[data-shell="app"] .stat-card:hover { transform: translateY(-2px); }
[data-shell="app"] .stat-ico,
[data-shell="app"] .card-ico {
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .55), rgb(var(--glass-tint) / .28));
  border: 1px solid rgb(var(--glass-stroke) / calc(var(--glass-stroke-a) * .8));
}
[data-shell="app"] .table th { background: rgb(var(--glass-tint) / .52); }
[data-shell="app"] .table-wrap { border: 1px solid rgb(var(--glass-stroke) / calc(var(--glass-stroke-a) * .85)); border-radius: var(--radius); }

/* ④ 背景纹理加强（浮起外壳与玻璃之间需要一点"材质感"才不像塑料） */
.bg-fx::after {
  background-image:
    /* 斜向织纹（很轻，仅在视觉上增加材质感） */
    repeating-linear-gradient(45deg, rgb(var(--glass-ring) / .045) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgb(var(--glass-ring) / .035) 0 1px, transparent 1px 17px),
    /* 科技网格 */
    linear-gradient(rgb(var(--glass-ring) / .095) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--glass-ring) / .095) 1px, transparent 1px);
  background-size: auto, auto, 52px 52px, 52px 52px;
}
[data-theme="dark"] .bg-fx::after {
  background-image:
    repeating-linear-gradient(45deg, rgb(var(--glass-ring) / .07) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgb(var(--glass-ring) / .05) 0 1px, transparent 1px 17px),
    linear-gradient(rgb(var(--glass-ring) / .11) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--glass-ring) / .11) 1px, transparent 1px);
}
@media (max-width: 420px) {
  .bg-fx::after { background-size: auto, auto, 38px 38px, 38px 38px; }
}

/* ⑤ 前台低配降级：与全局一致（不支持 backdrop-filter 时退回不透明面板） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-shell="app"] .sidebar,
  [data-shell="app"] .topbar,
  [data-shell="app"] .page-head,
  [data-shell="app"] .card,
  [data-shell="app"] .stat-card,
  [data-shell="app"] .quick-item { background: var(--color-surface); }
}

/* ---------- 登录/注册页：背景氛围层透出 + 玻璃卡（v1.9.2） ---------- */
.auth-page {
  background: transparent;                 /* 原为不透明径向渐变，会挡住 .bg-fx 的光斑与纹理 */
  position: relative; z-index: 1;
}
.auth-card, .auth-brand { position: relative; z-index: 1; }
.auth-card .card {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgb(var(--glass-stroke) / var(--glass-stroke-a));
  box-shadow: inset 0 1px 0 rgb(var(--glass-inset) / var(--glass-inset-a)),
              inset 0 -1px 0 rgb(var(--glass-drop) / .24),
              var(--shadow-md);
}

/* ==========================================================================
   UI 2.0 · 前台品牌色回归（v1.9.3）
   --------------------------------------------------------------------------
   背景：v1.9.0 统一改成"冷靛蓝"主色，但用户前台的品牌调性是首页/Logo 的
         **轨道紫 #5B4A9F → 果肉粉 #D2648A**（与落地页 --c-pri/--c-grad 一致）。
   做法：把品牌色**限定在前台作用域**（[data-shell="app"] 与登录页 .auth-body），
         后台继续保持冷色调未来感；玻璃质感与纹理不变。
   ========================================================================== */
[data-shell="app"], body.auth-body {
  --color-primary: #5B4A9F;                 /* 轨道紫（与首页 --c-pri 同值） */
  --color-primary-hover: #4C3D8C;
  --color-primary-soft: #F2EFFA;
  --color-info: #3A84BF;                    /* 科技蓝（首页副色） */
  --color-info-soft: #EAF2FA;
  --brand-grad: linear-gradient(135deg, #5B4A9F 0%, #8A5FB8 52%, #D2648A 100%);
  --glass-ring: 91 74 159;                  /* 边缘反光环 → 品牌紫 */
  --primary-glow: 210 100 138;              /* 发光 → 果肉粉（仅光晕，不承载文字） */
  --primary-grad: linear-gradient(135deg, #54448F 0%, #6D51A0 55%, #8A4F86 100%); /* 承载白字，已按 ≥4.5:1 校准 */
}
[data-theme="dark"] [data-shell="app"], [data-theme="dark"] body.auth-body {
  --color-primary: #B0A2EC;
  --color-primary-hover: #C6BBF5;
  --color-primary-soft: rgba(139, 118, 224, .18);
  --color-info: #58b6d8;
  --color-info-soft: rgba(88, 182, 216, .14);
  --brand-grad: linear-gradient(135deg, #7E6CC9 0%, #9D6FC0 52%, #D8839F 100%);
  --glass-ring: 154 132 232;
  --primary-glow: 232 160 188;
  --primary-grad: linear-gradient(135deg, #5E4CA8 0%, #7A5CA8 55%, #A05B84 100%);
}

/* ---------- 紧凑版弹窗（字段较少的表单，如「编辑 API 密钥」） ---------- */
[data-shell="app"] .modal--compact { max-width: 460px; }
[data-shell="app"] .modal--compact .modal-head { padding: 14px 18px; }
[data-shell="app"] .modal--compact .modal-head h3 { font-size: 15px; }
[data-shell="app"] .modal--compact .modal-body { padding: 16px 18px; }
[data-shell="app"] .modal--compact .form-group { margin-bottom: 12px; }
[data-shell="app"] .modal--compact .form-grid { gap: 0 14px; }
[data-shell="app"] .modal--compact .alert { padding: 9px 12px; font-size: 13px; }
[data-shell="app"] .modal--compact .btn-block { padding: 10px 18px; }