/* =============================================================================
 * applecoffee 皮肤 · 「仪表盘」页（/dashboard）
 * =============================================================================
 * 作用域：所有规则都挂在 html.sk-dash-page 之下。
 *   html.sk-dash-page 由 /skin-dash.js 在路由命中 /dashboard 且统计卡渲染成功后
 *   才添加 => 脚本没加载 / 报错 / 不是仪表盘页时，本文件对页面【零影响】。
 *   ⚠️ 这是密钥页踩过的坑（skin-keys.css 曾有 78 条规则漏了守卫，把「可用渠道」
 *      表格压成竖排）——本文件每条规则都带 html.sk-dash-page / html.dark.sk-dash-page
 *      前缀，没有裸规则。
 *
 * 做了什么（不新增功能、不改布局结构，只改视觉）：
 *   1. 顶部品牌横幅（问候语，由 skin-dash.js 注入）
 *   2. 统掉仪表盘最刺眼的「8 种系统色」：余额=emerald / 密钥=blue / 请求=green /
 *      消费=purple / Token=amber·indigo / 性能=violet·rose 全部收敛成品牌粉渐变
 *   3. 卡片质感：圆角、粉调边框、柔和阴影、hover 轻抬
 *   4. 数值排版：tabular-nums 等宽、字重加粗、层级拉开
 *   5. 卡片标题统一加粉色竖条；图表容器、最近使用、快捷操作、按平台拆分逐块精修
 *   明暗两套配色齐全。
 * ========================================================================== */

/* ---------------------------------------------------------------- 设计变量 */
html.sk-dash-page {
  --sk-accent: #e04a8c;
  --sk-accent-2: #db2777;
  --sk-accent-3: #9d174d;
  --sk-soft: rgba(224, 74, 140, 0.07);
  --sk-soft-2: rgba(224, 74, 140, 0.13);
  --sk-text: #2b1a22;
  --sk-text-2: #63525b;
  --sk-text-3: #6f5f68;
  --sk-card: #ffffff;
  --sk-card-bd: rgba(224, 74, 140, 0.16);
  --sk-card-sh: 0 1px 2px rgba(157, 23, 77, 0.05), 0 14px 32px -24px rgba(157, 23, 77, 0.5);
  --sk-card-sh-h: 0 2px 6px rgba(157, 23, 77, 0.07), 0 22px 44px -26px rgba(157, 23, 77, 0.55);
  --sk-hero-bg: linear-gradient(115deg, #fdeaf3 0%, #fbd8e9 42%, #f6c1da 100%);
  --sk-hero-bd: rgba(224, 74, 140, 0.2);
  --sk-glass: rgba(255, 255, 255, 0.74);
  --sk-glass-bd: rgba(255, 255, 255, 0.95);
  --sk-radius: 18px;
  --sk-page-bg: linear-gradient(180deg, #fff8fb 0%, #fdf1f7 42%, #fbe6ee 100%);
  /* 统计卡图标块：统一品牌粉渐变（本轮美化的核心——消掉彩虹色） */
  --sk-ico-bg: linear-gradient(140deg, #db2777 0%, #f0589b 62%, #f98fbd 100%);
  --sk-ico-sh: 0 7px 16px -8px rgba(157, 23, 77, 0.85);
  --sk-row-bg: rgba(224, 74, 140, 0.055);
  --sk-row-bg-h: rgba(224, 74, 140, 0.1);
}

html.dark.sk-dash-page {
  --sk-soft: rgba(224, 74, 140, 0.1);
  --sk-soft-2: rgba(224, 74, 140, 0.18);
  --sk-text: #f5eff2;
  --sk-text-2: #ad9fa6;
  --sk-text-3: #8b7d84;
  --sk-card: #1c1318;
  --sk-card-bd: rgba(224, 74, 140, 0.17);
  --sk-card-sh: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 34px -24px rgba(0, 0, 0, 0.9);
  --sk-card-sh-h: 0 2px 8px rgba(0, 0, 0, 0.55), 0 24px 46px -26px rgba(0, 0, 0, 0.95);
  --sk-hero-bg: linear-gradient(115deg, #2d1322 0%, #3d1729 45%, #4c162e 100%);
  --sk-hero-bd: rgba(224, 74, 140, 0.24);
  --sk-glass: rgba(255, 255, 255, 0.06);
  --sk-glass-bd: rgba(255, 255, 255, 0.1);
  --sk-page-bg: linear-gradient(180deg, #0a0709 0%, #100a0d 45%, #150b11 100%);
  --sk-ico-bg: linear-gradient(140deg, #be185d 0%, #db2777 60%, #e9589d 100%);
  --sk-ico-sh: 0 7px 16px -9px rgba(0, 0, 0, 0.95);
  --sk-row-bg: rgba(255, 255, 255, 0.035);
  --sk-row-bg-h: rgba(224, 74, 140, 0.13);
}

/* --------------------------------------------------------- 页面底层画布 */
html.sk-dash-page,
html.sk-dash-page body {
  background: var(--sk-page-bg) !important;
  background-attachment: fixed;
  background-color: transparent !important;
}
/* 应用壳自带 bg-gray-50 / dark:bg-dark-950，让位给上面的渐变 */
html.sk-dash-page div.min-h-screen.bg-gray-50 {
  background-color: transparent !important;
  background-image: none !important;
}

/* ======================================================================
 * 1. 顶部品牌横幅（skin-dash.js 注入）
 * ==================================================================== */
html.sk-dash-page main .sk-dhero {
  position: relative;
  padding: 19px 22px 17px;
  margin-bottom: 18px;
  border: 1px solid var(--sk-hero-bd);
  border-radius: 22px;
  background: var(--sk-hero-bg);
  box-shadow: 0 18px 40px -30px rgba(157, 23, 77, 0.8);
  overflow: hidden;
}
html.sk-dash-page main .sk-dhero::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 66%);
  pointer-events: none;
}
html.dark.sk-dash-page main .sk-dhero::before {
  background: radial-gradient(circle at 50% 50%, rgba(224, 74, 140, 0.26), rgba(224, 74, 140, 0) 68%);
}
/* 右下角装饰圆点 */
html.sk-dash-page main .sk-dhero::after {
  content: "";
  position: absolute;
  right: 96px;
  bottom: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sk-accent);
  opacity: 0.5;
  box-shadow: 16px -12px 0 -2px rgba(224, 74, 140, 0.32),
    30px 4px 0 -2.5px rgba(224, 74, 140, 0.22);
  pointer-events: none;
}
html.sk-dash-page main .sk-dhero-main {
  position: relative;
  z-index: 1;
  min-width: 0;
}
html.sk-dash-page main .sk-dhero-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--sk-accent-3);
  background: var(--sk-glass);
  border: 1px solid var(--sk-glass-bd);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
html.dark.sk-dash-page main .sk-dhero-kicker {
  color: #f7b6d1;
}
html.sk-dash-page main .sk-dhero-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sk-text);
}
html.dark.sk-dash-page main .sk-dhero-title {
  color: #fdeef5;
}
html.sk-dash-page main .sk-dhero-spark {
  margin-left: 6px;
  font-size: 13px;
  color: var(--sk-accent-3);
  vertical-align: 2px;
}
html.dark.sk-dash-page main .sk-dhero-spark {
  color: #f2a3c6;
}
html.sk-dash-page main .sk-dhero-sub {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sk-text-2);
}
html.dark.sk-dash-page main .sk-dhero-sub {
  color: #c9b6bf;
}

/* ======================================================================
 * 2. 卡片通用质感
 * ==================================================================== */
html.sk-dash-page main .card {
  border: 1px solid var(--sk-card-bd);
  border-radius: var(--sk-radius);
  background-color: var(--sk-card);
  box-shadow: var(--sk-card-sh);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
html.dark.sk-dash-page main .card {
  background-color: var(--sk-card);
}

/* 卡片标题统一加粉色竖条（绝对定位到标题左侧，不改标题本身位置 → 不破坏布局） */
html.sk-dash-page main .card h2,
html.sk-dash-page main .card h3 {
  position: relative;
}
html.sk-dash-page main .card h2::before,
html.sk-dash-page main .card h3::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0.92em;
  border-radius: 2px;
  background: linear-gradient(180deg, #f472b6, var(--sk-accent-2));
}

/* ======================================================================
 * 3. 统计卡（8 张）：图标统一品牌粉 + 数值排版 + hover
 * ==================================================================== */
html.sk-dash-page main .card[data-sk-k] {
  padding: 15px 16px;
}
html.sk-dash-page main .card[data-sk-k]:hover {
  box-shadow: var(--sk-card-sh-h);
  border-color: rgba(224, 74, 140, 0.38);
  transform: translateY(-2px);
}
html.dark.sk-dash-page main .card[data-sk-k]:hover {
  border-color: rgba(224, 74, 140, 0.42);
}

/* 3.1 图标方块：8 种系统色 → 品牌粉渐变（浅色 / 暗色两套） */
html.sk-dash-page main .card[data-sk-k] [data-sk-ico] {
  background-image: var(--sk-ico-bg);
  background-color: transparent;
  border-radius: 12px;
  box-shadow: var(--sk-ico-sh);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html.sk-dash-page main .card[data-sk-k]:hover [data-sk-ico] {
  transform: scale(1.06);
}
html.sk-dash-page main .card[data-sk-k] [data-sk-ico] svg {
  color: #ffffff !important;
}

/* 3.2 标签（余额 / API 密钥 / …） */
html.sk-dash-page main .card[data-sk-k] [data-sk-lab] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sk-text-2);
}
html.dark.sk-dash-page main .card[data-sk-k] [data-sk-lab] {
  color: #b3a3ab;
}

/* 3.3 数值：等宽数字，位数对齐不跳动；字重拉满 */
/* ⚠️ 前置：内容容器必须 min-width:0，否则 flex 子项会被长数字撑开
 *    （flex 默认 min-width:auto），下面 fitValues() 的溢出检测就永远测不到。 */
html.sk-dash-page main .card[data-sk-k] > div > div:last-child {
  min-width: 0;
}
html.sk-dash-page main .card[data-sk-k] [data-sk-v] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sk-text);
  /* 不折行 —— 超长数值交给 skin-dash.js 的 fitValues() 逐步缩字号 */
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.3;
}
html.dark.sk-dash-page main .card[data-sk-k] [data-sk-v] {
  color: #fdf3f8;
}
/* 值里的次要部分（如 "$0.0000 / $0.0000" 的斜杠、"/ 8 启用" 的小字）降一档 */
html.sk-dash-page main .card[data-sk-k] [data-sk-v] span {
  font-weight: 500;
  opacity: 0.85;
}

/* 3.4 副文本（可用 / 总计: 29 / 输入: 0 · 输出: 0 …） */
html.sk-dash-page main .card[data-sk-k] [data-sk-note] {
  font-size: 11.5px;
  color: var(--sk-text-3);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
html.dark.sk-dash-page main .card[data-sk-k] [data-sk-note] {
  color: #9a8b93;
}

/* 3.5 余额卡做视觉强调（用户最关心的数字） */
html.sk-dash-page main .card[data-sk-k="余额"] {
  background-image: linear-gradient(135deg, rgba(224, 74, 140, 0.1) 0%, rgba(224, 74, 140, 0.02) 62%, transparent 100%);
  border-color: rgba(224, 74, 140, 0.3);
}
html.dark.sk-dash-page main .card[data-sk-k="余额"] {
  background-image: linear-gradient(135deg, rgba(224, 74, 140, 0.17) 0%, rgba(224, 74, 140, 0.05) 62%, transparent 100%);
  border-color: rgba(224, 74, 140, 0.34);
}
html.sk-dash-page main .card[data-sk-k="余额"] [data-sk-v] {
  font-size: 24px;
  /* 亮端收在 #db2777：渐变文字最亮处也要对白底 ≥4.5:1
     （原来收到 #ec4899 时，超长数字被 fitValues 缩到 17px 后不再算「大字」，
      最亮端只有 3.6:1） */
  background: linear-gradient(115deg, #9d174d 0%, #c9266a 55%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #db2777;
}
html.dark.sk-dash-page main .card[data-sk-k="余额"] [data-sk-v] {
  background: linear-gradient(115deg, #fda4d0 0%, #f472b6 55%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f9a8d4;
}

/* ======================================================================
 * 4.「按平台拆分」平台小卡
 * ==================================================================== */
html.sk-dash-page main .card [data-testid="platform-card"] {
  border-color: var(--sk-card-bd);
  border-radius: 14px;
  background-color: var(--sk-row-bg);
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
html.sk-dash-page main .card [data-testid="platform-card"]:hover {
  background-color: var(--sk-row-bg-h);
  border-color: rgba(224, 74, 140, 0.4);
  transform: translateY(-1px);
}

/* ======================================================================
 * 5. 工具栏（时间范围 / 刷新 / 粒度）
 * ==================================================================== */
html.sk-dash-page main .card .date-picker-trigger {
  border-color: var(--sk-card-bd) !important;
  border-radius: 12px !important;
  background-color: var(--sk-row-bg) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
html.sk-dash-page main .card .date-picker-trigger:hover {
  border-color: rgba(224, 74, 140, 0.4) !important;
  background-color: var(--sk-row-bg-h) !important;
}
html.sk-dash-page main .card .btn-secondary {
  border-radius: 12px;
}

/* ======================================================================
 * 6. 图表卡（模型分布 / Token 使用趋势）
 * ==================================================================== */
/* 图表是 Chart.js 画的 canvas，调色板硬编码在打包后的 JS 里（sub2api 按需
 * 打包，没有全局 Chart 对象，运行时改不了实例）。这里用色相旋转把原厂的
 * 蓝 / 绿 系整体旋到粉紫色相（217°→333°，+116°），与品牌粉主题同调。
 * 纯 CSS、只作用于仪表盘的 canvas，删掉一行即可回滚；灰色网格线与轴文字
 * 饱和度接近 0，几乎不受影响。 */
html.sk-dash-page main .card canvas {
  filter: hue-rotate(116deg) saturate(1.04);
  border-radius: 12px;
}
/* 环形图容器与折线图容器给一点内衬底色，让图表"有托" */
html.sk-dash-page main .card > .h-48,
html.sk-dash-page main .card > div > .h-48 {
  border-radius: 14px;
  background-color: var(--sk-row-bg);
}
/* 模型分布左侧表格：表头弱化、行 hover 上色 */
html.sk-dash-page main .card table thead tr {
  border-color: var(--sk-card-bd);
}
html.sk-dash-page main .card table tbody tr {
  transition: background-color 0.18s ease;
}
html.sk-dash-page main .card table tbody tr:hover {
  background-color: var(--sk-row-bg-h);
}

/* ======================================================================
 * 7.「最近使用」列表行
 * ==================================================================== */
html.sk-dash-page main .card div[class~="rounded-xl"][class~="bg-gray-50"] {
  background-color: var(--sk-row-bg);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
html.sk-dash-page main .card div[class~="rounded-xl"][class~="bg-gray-50"]:hover {
  background-color: var(--sk-row-bg-h);
  border-color: var(--sk-card-bd);
  transform: translateX(2px);
}

/* ======================================================================
 * 8.「快捷操作」按钮
 * ==================================================================== */
html.sk-dash-page main .card button[class~="rounded-xl"][class~="bg-gray-50"] {
  background-color: var(--sk-row-bg);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
html.sk-dash-page main .card button[class~="rounded-xl"][class~="bg-gray-50"]:hover {
  background-color: var(--sk-row-bg-h);
  border-color: rgba(224, 74, 140, 0.34);
  transform: translateX(3px);
}
/* 图标块统一粉色渐变（由 skin-dash.js 打 data-sk-qico） */
html.sk-dash-page main .card [data-sk-qico] {
  background-image: var(--sk-ico-bg);
  background-color: transparent;
  box-shadow: var(--sk-ico-sh);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
html.sk-dash-page main .card [data-sk-qico] svg {
  color: #ffffff !important;
}
html.sk-dash-page main .card button:hover [data-sk-qico] {
  transform: scale(1.07);
}
/* 右侧箭头跟随右移 */
html.sk-dash-page main .card button:hover svg[class*="h-5"] {
  transform: translateX(2px);
}

/* ======================================================================
 * 9. 小额金额的绿色（上游原有设计）
 * ======================================================================
 * 「最近使用」的消费金额与「模型分布」的实际列用 text-green-600 = #16A34A，
 * 在白底上只有 3.1~3.3:1（低于 4.5）——这是上游就有的问题，换肤不背这个锅。
 * 既然在做本页精修，顺手收敛到 green-700：#15803d，白底 5.0:1。
 * 只作用于浅色（暗色下上游用 dark:text-green-400，对比本来就够）。 */
html:not(.dark).sk-dash-page main .card [class~="text-green-600"] {
  color: #15803d;
}