/* WAKE 语音 · 品牌皮肤（与产品端 /app 同一套色）
   用法：<html data-wk-skin="wake">  深色；<html data-wk-skin="wake-light">  浅色
   ★走属性选择器而不是 .skin-* 类：库的 applySkin 只认它自己的 12 个类，
     不会把我们的皮肤类清掉；属性选择器优先级也高于库的 .skin-xxx 令牌块。
   ★只覆盖令牌，不改组件选择器（库升级不会打架）。 */

/* ---------- 深色（产品端主色） ---------- */
html.wk[data-wk-skin="wake"]{
  --wk-brand-1:#7dd95e;      /* 品牌亮绿（黑盒实测 #7DD95E） */
  --wk-brand-2:#93e878;
  --wk-brand-3:#2d7d46;
  --wk-brand-weak:rgba(125,217,94,.14);
  --wk-grad-1:#2d7d46;
  --wk-grad-2:#1f5c33;
  --wk-brand-on:#0d1a09;

  --wk-bg:#15171a;
  --wk-bg-1:#1a1c1f;
  --wk-bg-2:#1f2225;
  --wk-bg-3:#26292e;
  --wk-border:#303237;
  --wk-border-2:#3e414b;
  --wk-text:#ffffff;
  --wk-text-2:#d2d3d7;
  --wk-text-3:#8b8d94;

  --wk-card-bg:#1f2225;
  --wk-card-border:#303237;
  --wk-drawer-bg:#191b1e;
  --wk-input-bg:#26292e;
  --wk-input-border:#3a3f46;
  --wk-input-focus-border:#7dd95e;
  --wk-table-header-bg:#23262b;
  --wk-table-row-hover:rgba(255,255,255,.04);
  --wk-table-stripe:rgba(255,255,255,.02);
  --wk-table-border:#303237;
  --wk-menu-item-active-bg:rgba(125,217,94,.14);
  --wk-menu-item-active-text:#ffffff;
  --wk-hover:rgba(255,255,255,.06);
  --wk-active:rgba(255,255,255,.10);
  --wk-fill-weak:rgba(255,255,255,.04);
  --wk-tag-bg:rgba(255,255,255,.07);
  --wk-mask:rgba(0,0,0,.62);
  --wk-mask-weak:rgba(0,0,0,.35);
  --wk-shadow:0 12px 32px rgba(0,0,0,.45);
  --wk-shadow-sm:0 1px 3px rgba(0,0,0,.35);
  --wk-danger:#f64e54;
  --wk-success:#7dd95e;
  --wk-warning:#ffb40a;
}

/* ---------- 浅色（同一品牌绿 · 白底） ---------- */
html.wk[data-wk-skin="wake-light"]{
  --wk-brand-1:#2d7d46;
  --wk-brand-2:#3f9257;
  --wk-brand-3:#1f5c33;
  --wk-brand-weak:rgba(45,125,70,.10);
  --wk-grad-1:#2d7d46;
  --wk-grad-2:#1f5c33;
  --wk-brand-on:#ffffff;

  --wk-bg:#f5f6f8;
  --wk-bg-1:#ffffff;
  --wk-bg-2:#f2f3f5;
  --wk-bg-3:#e9ebef;
  --wk-border:#d9dde5;
  --wk-border-2:#c3c9d4;
  --wk-text:#14161a;
  --wk-text-2:#454952;
  --wk-text-3:#6a6f79;

  --wk-card-bg:#ffffff;
  --wk-card-border:#e1e4e8;
  --wk-drawer-bg:#ffffff;
  --wk-input-bg:#ffffff;
  --wk-input-border:#c9cfd9;
  --wk-input-focus-border:#2d7d46;
  --wk-table-header-bg:#eef1f6;
  --wk-table-row-hover:#f6f7f9;
  --wk-table-stripe:#fafbfc;
  --wk-table-border:#dde1e8;
  --wk-menu-item-active-bg:rgba(45,125,70,.10);
  --wk-menu-item-active-text:#1f5c33;
  --wk-hover:rgba(17,24,39,.05);
  --wk-active:rgba(17,24,39,.08);
  --wk-fill-weak:rgba(17,24,39,.03);
  --wk-tag-bg:#f2f3f5;
  --wk-mask:rgba(17,24,39,.45);
  --wk-mask-weak:rgba(17,24,39,.18);
  --wk-shadow:0 10px 28px rgba(17,24,39,.10);
  --wk-shadow-sm:0 1px 2px rgba(17,24,39,.08);
  --wk-danger:#d92d20;
  --wk-success:#2d7d46;
  --wk-warning:#b45309;
}

/* 外壳底色（库的 body 背景走 --wk-bg，这里只补一层保险） */
html.wk[data-wk-skin] body{background:var(--wk-bg);color:var(--wk-text)}

/* 浅色下图片/头像容易糊在白底上 ⇒ 统一一像素描边 */
html.wk[data-wk-skin="wake-light"] img,
html.wk[data-wk-skin="wake-light"] .wk-avatar img{box-shadow:inset 0 0 0 1px rgba(17,24,39,.10)}

/* 概览页：状态条 / 双列键值 / 快捷入口（本皮肤内置，页面结构见 views/usage.js） */
.ov-hero{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 16px;border:1px solid var(--wk-card-border);
  background:linear-gradient(90deg,var(--wk-brand-weak),transparent 60%),var(--wk-card-bg);border-radius:12px;margin-bottom:16px}
.ov-hero .h-main{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--wk-text)}
.ov-hero .h-sub{color:var(--wk-text-3);font-size:12px}
.ov-hero .h-grow{flex:1;min-width:8px}
.ov-hero .h-metric{min-width:132px}
.ov-hero .h-metric b{display:block;font-size:18px;line-height:1.3;color:var(--wk-text)}
.ov-hero .h-metric span{font-size:12px;color:var(--wk-text-3)}
.ov-hero .h-bar{height:6px;border-radius:99px;background:var(--wk-fill-weak);overflow:hidden;margin-top:6px}
.ov-hero .h-bar i{display:block;height:100%;background:var(--wk-brand-1);border-radius:99px}

.kvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px}
@media (max-width:900px){.kvgrid{grid-template-columns:1fr}}
.kvgrid .kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--wk-border)}
.kvgrid .kv .k{color:var(--wk-text-3);font-size:12.5px;flex:none}
.kvgrid .kv .v{color:var(--wk-text);text-align:right;word-break:break-all}

.quick{display:flex;gap:10px;flex-wrap:wrap}
.quick .q{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--wk-card-border);background:var(--wk-bg-2);transition:background .15s,border-color .15s;min-width:150px}
.quick .q:hover{background:var(--wk-brand-weak);border-color:var(--wk-brand-1)}
.quick .q b{font-size:13px;font-weight:600;color:var(--wk-text)}
.quick .q span{font-size:12px;color:var(--wk-text-3)}

/* 主题切换：三档小按钮 */
.themeseg{display:inline-flex;border:1px solid var(--wk-border);border-radius:8px;overflow:hidden}
.themeseg button{appearance:none;border:0;background:transparent;color:var(--wk-text-2);font-size:12px;line-height:1;
  padding:7px 9px;cursor:pointer;transition:background .15s,color .15s}
.themeseg button+button{border-left:1px solid var(--wk-border)}
.themeseg button:hover{background:var(--wk-hover);color:var(--wk-text)}
.themeseg button.on{background:var(--wk-brand-weak);color:var(--wk-brand-1);font-weight:600}

/* 用量趋势：纯 CSS 柱状图（不引第三方图库，跟着令牌换肤） */
.trend{display:flex;align-items:flex-end;gap:10px;height:132px;padding:8px 2px 0}
.trend .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.trend .col .v{font-size:11px;color:var(--wk-text-2);line-height:1}
.trend .col .b{display:block;width:100%;max-width:46px;min-height:2px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--wk-brand-2),var(--wk-brand-1));transition:height .25s ease}
.trend .col:hover .b{background:var(--wk-brand-1);filter:brightness(1.08)}
.trend .col .d{font-size:11px;color:var(--wk-text-3);line-height:1}

/* KPI 单位：库里 .wk-stat .val em 用 --wk-text-3，浅色下只有 2.9:1 ⇒ 提到 text-2 */
html.wk[data-wk-skin="wake"] .wk-stat .val em,
html.wk[data-wk-skin="wake-light"] .wk-stat .val em { color: var(--wk-text-2) !important; }

/* 表格头在浅色下要有「表头感」：加粗 + 文字用主色（默认 text-2 太弱） */
html.wk[data-wk-skin="wake-light"] .wk-table th { color: var(--wk-text) !important; font-weight: 600; }
html.wk[data-wk-skin="wake"] .wk-table th { color: var(--wk-text-2) !important; font-weight: 600; }