usage-board.css

/* usage-board.css — AI Usage Monitor 监控台（dark / light 双主题）
   主题变量挂在 :root（dark 默认）与 [data-theme="light"] 上；
   切换由 usage-board.js 写 <html data-theme>，持久化在 localStorage「aub:theme」。

   调色记录（2026-08-19）：浅色下红/绿状态色降饱和哑光化——
   红 #dc2626 → #b0453c，绿 #16a34a → #3d7a57（含衍生 pill/chip/边框 rgba）。
   深色主题保持荧光感不变。 */

:root {
  /* 结构色（随主题变）— Aurora 版：深靛夜空底 + 玻璃拟态面板 */
  --bg: #090b16;
  --panel: rgba(255,255,255,.045);
  --border: rgba(255,255,255,.09);
  --text: #e8eaf4;
  --text-dim: #9aa1b8;
  --card: rgba(255,255,255,.055); /* 面板内嵌卡片 / pill 组 / select 底 */
  --q-track: rgba(255,255,255,.08); /* 进度条轨道 */
  --tick: rgba(255,255,255,.85); /* 进度条上的时间刻度线 */
  --bar-other: #454e6e;   /* 「其他 N 项」横条 */
  --alert-bg: rgba(239, 68, 68, 0.10);
  --alert-border: rgba(239, 68, 68, 0.45);
  --chart-grid: rgba(255,255,255,.07);
  --chart-axis: #9aa1b8;
  --panel-shadow: 0 18px 50px -22px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.3);

  /* 状态色（两主题语义一致，浅色下另行调色） */
  --blue: #7280ff;        /* 长春花蓝主行动色（Aurora），深底下提亮一档 */
  --lime: #d7f34f;        /* Yandex 式荧光酸橙标记 */
  --lime-soft: rgba(215,243,79,.28);
  --red: #ef4444;
  --yellow: #eab308;
  --green: #22c55e;
  --orange: #f59e0b;

  --radius: 16px;
}

[data-theme="light"] {
  --bg: #f2f3fa;          /* 淡薰衣草 */
  --panel: rgba(255,255,255,.62);
  --border: rgba(30,34,80,.10);
  --text: #1c2033;
  --text-dim: #6b7280;
  --card: rgba(255,255,255,.55);
  --q-track: rgba(30,34,80,.07);
  --tick: rgba(26,29,36,.75);
  --bar-other: #c3c9d4;
  --alert-bg: rgba(254,242,242,.72);
  --alert-border: rgba(176, 69, 60, 0.40);
  --chart-grid: rgba(30,34,80,.08);
  --chart-axis: #6b7280;
  --panel-shadow: 0 1px 2px rgba(24,28,64,.05), 0 16px 40px -16px rgba(24,28,64,.18);

  /* 浅色状态色：哑光、降饱和。红=砖红，绿=灰调鼠尾草 */
  --blue: #4c5df5;
  --lime: #d7f34f;
  --lime-soft: rgba(215,243,79,.6);
  --red: #b0453c;
  --yellow: #a16207;
  --green: #3d7a57;
  --orange: #d97706;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  /* Aurora 字体栈：Avenir Next（macOS 自带，替代 lab 的 Bricolage Grotesque——本模块约定无 CDN） */
  font-family: "Avenir Next", "Avenir", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Aurora 极光背景（四团漂移渐变色，blur 柔焦；reduced-motion 时静止） ---- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(80px); }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; top: -14%; left: -8%; animation: aurora-a 46s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; top: 22%; right: -12%; animation: aurora-b 58s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; bottom: -16%; left: 22%; animation: aurora-c 52s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { width: 26vw; height: 26vw; top: 38%; left: 44%; animation: aurora-d 64s ease-in-out infinite alternate; }
/* 浅色：长春花蓝 / 紫 / 粉 / 酸橙 */
[data-theme="light"] .aurora i:nth-child(1) { background: rgba(165,178,255,.72); }
[data-theme="light"] .aurora i:nth-child(2) { background: rgba(214,196,255,.66); }
[data-theme="light"] .aurora i:nth-child(3) { background: rgba(255,215,239,.6); }
[data-theme="light"] .aurora i:nth-child(4) { background: rgba(233,255,176,.55); }
/* 深色：同色系压深压暗，夜空辉光 */
.aurora i:nth-child(1) { background: rgba(64,76,190,.34); }
.aurora i:nth-child(2) { background: rgba(96,64,170,.28); }
.aurora i:nth-child(3) { background: rgba(150,60,120,.22); }
.aurora i:nth-child(4) { background: rgba(120,140,40,.18); }
@keyframes aurora-a { to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes aurora-b { to { transform: translate(-8vw, 9vh) scale(1.08); } }
@keyframes aurora-c { to { transform: translate(7vw, -8vh) scale(1.15); } }
@keyframes aurora-d { to { transform: translate(-6vw, -7vh) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

/* 切主题时的短暂过渡，避免硬闪 */
body, .panel, .ov-card, .q-chip, .alert-box, .alert-chip,
.tab-btn, .range-pills, .range-pills button, #metric-select,
.q-bar, .hbar-track, .theme-toggle {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.page { max-width: 1120px; margin: 0 auto; padding: 20px 24px 60px; position: relative; z-index: 1; }

/* ---- 顶部导航 ---- */
.topnav {
  display: flex; gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.tab-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 14px; font-family: inherit;
  padding: 10px 2px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

.title-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 12px; margin-bottom: 18px;
}
.title-row h1 { font-size: 20px; font-weight: 700; letter-spacing: 0.2px; }
/* Yandex 式荧光标记：标题末词衬酸橙色块并微倾（Aurora 风的识别物） */
.title-row h1 .hl {
  display: inline-block; background: var(--lime); color: #1c2033;
  padding: 0 8px; border-radius: 5px; transform: rotate(-1.2deg);
}
/* meta 行：昵称（左）与同步状态（右）同一基线，横跨标题行整宽 */
.title-meta {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; margin-top: 6px;
}
/* 昵称：多人分享同一份工具时用来区分截图/分享卡归属，本地存储，不上传 */
.user-tag {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 13px; font-weight: 500; padding: 0; font-family: inherit;
  white-space: nowrap;
}
.user-tag:hover { color: var(--blue); }
.user-tag-input {
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 13px; padding: 3px 10px; font-family: inherit;
  width: 160px; outline: none; align-self: center;
}
.user-tag-input:focus { border-color: var(--blue); }
.title-right { display: flex; align-items: center; gap: 12px; }
.local-time { color: var(--text-dim); font-size: 13px; }

.mock-pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--text-dim); border: 1px dashed var(--text-dim);
  padding: 2px 9px; border-radius: 999px;
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
/* dark 下显示太阳（可切浅色），light 下显示月亮 */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---- 告警横幅 ---- */
#alert-banner { margin-bottom: 20px; }
#alert-banner:empty { display: none; }
.alert-box {
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.alert-count { color: var(--red); font-weight: 600; margin-right: 8px; white-space: nowrap; }
.alert-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid;
}
.alert-chip.red { color: var(--red); border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.12); }
.alert-chip.yellow { color: var(--yellow); border-color: rgba(234,179,8,.5); background: rgba(234,179,8,.10); }
[data-theme="light"] .alert-chip.red { border-color: rgba(176,69,60,.45); background: rgba(176,69,60,.08); }
[data-theme="light"] .alert-chip.yellow { border-color: rgba(161,98,7,.45); background: rgba(161,98,7,.08); }

/* ---- 面板通用（玻璃拟态：半透明底 + backdrop 柔焦 + 分层软投影） ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--panel-shadow);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
/* 面板标题的荧光笔标记（下三分之一处衬酸橙，低调的 Yandex 味） */
.panel-head h2 {
  font-size: 15px; font-weight: 700;
  padding: 0 2px;
  background: linear-gradient(transparent 66%, var(--lime-soft) 66%);
}
.panel-sub { color: var(--text-dim); font-size: 12px; }
.panel-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- 面板折叠（Token tab，状态持久化在 localStorage「aub:panel-collapsed」） ---- */
.panel-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1;
}
.panel-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.panel-toggle .chev {
  display: inline-block; transform: rotate(90deg); /* 展开态箭头朝下 */
  transition: transform .22s ease;
}
.panel.collapsed .panel-toggle .chev { transform: rotate(0deg); }
.panel-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .25s ease;
}
.panel.collapsed .panel-body { grid-template-rows: 0fr; }
.panel-body-inner { overflow: hidden; min-height: 0; }
.panel.collapsed .panel-head { margin-bottom: 0; }
.quota-legend { color: var(--text-dim); font-size: 12px; margin: -6px 0 12px; }

/* ---- 配额面板 ---- */
.quota-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.q-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim); background: var(--card);
}
.q-chip.ok { color: var(--green); border-color: rgba(34,197,94,.4); }
.q-chip.warn { color: var(--yellow); border-color: rgba(234,179,8,.4); }
.q-chip.bad { color: var(--red); border-color: rgba(239,68,68,.4); }
[data-theme="light"] .q-chip.ok { border-color: rgba(61,122,87,.45); }
[data-theme="light"] .q-chip.warn { border-color: rgba(161,98,7,.45); }
[data-theme="light"] .q-chip.bad { border-color: rgba(176,69,60,.45); }

.ch-block { padding: 14px 0; border-top: 1px solid var(--border); }
.ch-block:first-child { border-top: none; padding-top: 2px; }
.ch-head { display: flex; justify-content: space-between; align-items: center; }
.ch-name { font-weight: 600; font-size: 14px; }

/* ---- 渠道图标（品牌色 tile + SVG 字形；ink 类 = 黑白标跟随文字墨色） ---- */
.ch-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  background: color-mix(in srgb, var(--ch-c, var(--text)) 13%, transparent);
  color: var(--ch-c, var(--text));
}
.ch-ic svg { width: 14px; height: 14px; display: block; }
.ch-name, .api-name, .hbar-name, .cost-name { display: inline-flex; align-items: center; gap: 8px; }
.hbar-name .ch-ic, .cost-name .ch-ic, .api-name .ch-ic { width: 18px; height: 18px; border-radius: 5px; }
.hbar-name .ch-ic svg, .cost-name .ch-ic svg, .api-name .ch-ic svg { width: 12px; height: 12px; }
.ch-right { display: flex; align-items: center; gap: 10px; }
.ch-last { color: var(--text-dim); font-size: 12px; }

.pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid;
}
.pill.online, .pill.operational { color: var(--green); border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10); }
.pill.offline { color: var(--red); border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.pill.degraded { color: var(--yellow); border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.10); }
.pill.unconfigured, .pill.dormant { color: var(--text-dim); border-color: var(--border); background: var(--card); }
.pill.stale { color: var(--yellow); border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.10); }
[data-theme="light"] .pill.stale { border-color: rgba(161,98,7,.5); background: rgba(161,98,7,.08); }
[data-theme="light"] .pill.online, [data-theme="light"] .pill.operational { border-color: rgba(61,122,87,.5); background: rgba(61,122,87,.08); }
[data-theme="light"] .pill.offline { border-color: rgba(176,69,60,.5); background: rgba(176,69,60,.08); }
[data-theme="light"] .pill.degraded { border-color: rgba(161,98,7,.5); background: rgba(161,98,7,.08); }

.ch-sub { font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; }
.ch-sub.danger { color: var(--red); }
.ch-sub.warn { color: var(--yellow); }

.quota-row {
  display: grid;
  grid-template-columns: 52px 1fr 216px;
  align-items: center; gap: 14px;
  padding: 5px 0;
}
.q-label { color: var(--text-dim); font-size: 12px; }
.ch-block.wide-label .quota-row { grid-template-columns: 104px 1fr 216px; }
.q-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--q-track); overflow: visible;
}
.q-fill { height: 100%; border-radius: 4px; }
.q-fill.g { background: var(--green); }
.q-fill.o { background: var(--orange); }
.q-fill.r { background: var(--red); }
.q-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--tick); border-radius: 1px;
}
.q-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; gap: 8px; }
.q-pct-wrap { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.q-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.q-pct.g { color: var(--green); } .q-pct.o { color: var(--orange); } .q-pct.r { color: var(--red); }
.q-rem { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.q-reset { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11px; }
.q-nodata { color: var(--text-dim); font-size: 12px; font-style: italic; padding: 5px 0 5px 66px; }

.balance-line {
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 4px 0;
}
.balance-line .cur { color: var(--text-dim); font-weight: 400; font-size: 13px; margin-right: 4px; }

/* ---- API 状态 ---- */
.api-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.api-row:first-child { border-top: none; }
.api-name { flex: 1; }
.api-latency { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 12px; }

/* ---- Token tab ---- */
.sync-row {
  color: var(--text-dim); font-size: 13px; white-space: nowrap;
}
.sync-row .dot { color: var(--green); margin-right: 6px; }

.overview-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ov-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  min-width: 0; /* 一排四列时允许收缩，长数值不撑破 */
}
.ov-num {
  font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px; white-space: nowrap;
}
.ov-num.num-sm { font-size: 24px; } /* 一排四列装不下时由 JS 单独降级（fitOverviewNums） */
.ov-label { color: var(--text); font-size: 13px; margin-top: 2px; }
.ov-sub { color: var(--text-dim); font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ov-sub.dim { opacity: .75; margin-top: 2px; }

.trend-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.range-pills { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.range-pills button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-dim); font-size: 12px; padding: 4px 12px; border-radius: 6px;
}
.range-pills button:hover { color: var(--text); }
.range-pills button.active { background: var(--blue); color: #fff; }
#metric-select {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; font-family: inherit; padding: 6px 10px; cursor: pointer;
}

.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 10px; }
.lg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.lg-dot { width: 9px; height: 9px; border-radius: 2px; }

.chart-wrap { width: 100%; }
#trend-canvas { display: block; width: 100%; height: 280px; }
.chart-summary { color: var(--text-dim); font-size: 12px; margin-top: 10px; }

/* ---- 浮标（柱状图 / 热力图共用） ---- */
:root { --tip-bg: rgba(22,25,42,.92); --tip-text: #e8eaf4; --tip-dim: #9aa1b8; }
[data-theme="light"] { --tip-bg: rgba(255,255,255,.9); --tip-text: #1c2033; --tip-dim: #6b7280; }
.aub-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--tip-bg); color: var(--tip-text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; line-height: 1.6;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  max-width: 280px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.aub-tip .tip-date { font-weight: 600; margin-bottom: 2px; }
.aub-tip .tip-total { color: var(--tip-dim); margin-bottom: 4px; }
.aub-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.aub-tip .tip-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.aub-tip .tip-name { color: var(--tip-dim); flex: 1; }
.aub-tip .tip-val { font-variant-numeric: tabular-nums; }

/* ---- 每日用量热力图（GitHub/Codex 风格，一年视图，周一起始，月份标签在底部） ---- */
.hm-wrap { padding-bottom: 4px; }
.hm { display: flex; gap: 3px; width: 100%; }
.hm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-label { height: 14px; font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: visible; }
.hm-cell {
  width: 100%; aspect-ratio: 1; /* 列宽均分面板，格子正方形自适应 */
  border-radius: 2.5px; background: var(--q-track);
  border: 1px solid transparent; /* 与未来格的虚线框对齐尺寸 */
}
.hm-cell.hm-future { background: transparent; border-color: var(--border); border-style: dashed; }
[data-theme="light"] .hm-cell.hm-future { border-color: var(--text-dim); opacity: .45; }

.panel-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-duo .panel { margin-bottom: 20px; }

.hbar-row { padding: 6px 0; }
.hbar-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.hbar-name { color: var(--text); }
.hbar-tag {
  margin-left: 8px; font-size: 11px; font-weight: 400;
  color: var(--text-dim); border: 1px solid var(--border);
  padding: 0 7px; border-radius: 999px; white-space: nowrap;
}
.hbar-val { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hbar-val .pct { margin-left: 8px; }
.hbar-track { height: 7px; background: var(--q-track); border-radius: 4px; }
.hbar-fill { height: 100%; border-radius: 4px; }

/* 模型面板「其他 N 项」抽屉 */
.hbar-toggle { cursor: pointer; border-radius: 6px; }
.hbar-toggle:hover .hbar-name { color: var(--blue); }
.hbar-toggle .chev {
  display: inline-block; margin-left: 8px; color: var(--text-dim);
  transition: transform .22s ease; font-size: 13px;
}
.hbar-toggle.open .chev { transform: rotate(90deg); }
.model-drawer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.model-drawer.open { grid-template-rows: 1fr; }
.model-drawer-inner { overflow: hidden; min-height: 0; }

/* ---- 费用预估与套餐回报 ---- */
.cost-row {
  display: grid; grid-template-columns: 150px 130px 1fr 90px;
  align-items: baseline; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px;
}
.cost-row:first-child { border-top: none; }
.cost-name { font-weight: 600; }
.cost-equiv { font-variant-numeric: tabular-nums; font-weight: 600; }
.cost-tilde { color: var(--text-dim); margin-left: 1px; }
.cost-sub { color: var(--text-dim); font-size: 12px; }
.cost-roi { text-align: right; }
.cost-roi-num { font-size: 20px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.cost-roi-num.dim { color: var(--text-dim); font-size: 14px; }
.cost-note { color: var(--text-dim); font-size: 12px; margin-top: 12px; }

/* ---- 页脚版权 ---- */
.site-footer {
  position: relative; z-index: 1;
  max-width: 1120px; margin: -8px auto 0; padding: 0 24px 28px;
  text-align: center; color: var(--text-dim); font-size: 12px;
}
.site-footer a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--blue); border-bottom-color: var(--blue); }

/* ---- 一键分享弹层 ---- */
#share-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,6,12,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#share-overlay[hidden] { display: none; }
.share-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  width: min(860px, 92vw);
  max-height: calc(100vh - 48px); /* 全开面板时卡面很高，弹层内部滚动 */
  overflow-y: auto;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--panel-shadow);
}
.share-img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--border); }
.share-panels { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.share-panel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none;
}
.share-panel:hover { color: var(--text); }
.share-panel input { accent-color: var(--blue); cursor: pointer; margin: 0; }
.share-panel.dim { opacity: 0.5; cursor: default; }
.share-panel.dim input { cursor: default; }
.share-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.share-btn {
  font-family: inherit; font-size: 13px; cursor: pointer;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px;
}
.share-btn:hover { border-color: var(--text-dim); }
.share-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }

.unconfigured-toggle-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.unconfigured-toggle-btn {
  background: var(--card);
  border: 1px dashed var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.unconfigured-toggle-btn:hover {
  color: var(--text);
  border-color: var(--blue);
  background: var(--panel);
}

@media (max-width: 860px) {
  .overview-cards { grid-template-columns: repeat(2, 1fr); }
  .panel-duo { grid-template-columns: 1fr; }
  .quota-row { grid-template-columns: 44px 1fr 140px; gap: 8px; }
}