/* ==========================================================================
   theme-v2.css — 控制台视觉层（必须最后加载，才能盖过 desktop.css 的窗口样式）
   ========================================================================== */
/* ==========================================================================
   v2 视觉系统（Ultimate，2026-10）
   --------------------------------------------------------------------------
   方向：紧凑型运维控制台。层级靠「字号 + 字重 + 三级文字色」，不靠色块；
   强调色只保留一个青绿，用在主按钮、选中态和关键数字上。
   标志性细节：1px 描边 + 极淡阴影的卡片，行悬停时左侧 2px 品牌条。
   ========================================================================== */
:root{
  --bg:#f6f7f8;
  --surface:#ffffff;
  --surface-2:#f2f4f6;
  --surface-3:#e7eaee;
  --border:#e2e6ea;
  --border-soft:#eceff2;
  --fg:#14181d;
  --fg-muted:#5f6b76;
  --fg-subtle:#8d99a5;
  --brand:#0f9d76;
  --brand-strong:#0b8563;
  --brand-ink:#0a6e53;
  --brand-soft:rgba(15,157,118,.10);
  --brand-grad:var(--brand);
  --warn:#c2410c; --warn-bar:#ea580c; --warn-soft:rgba(234,88,12,.10);
  --danger:#d92d20; --danger-soft:rgba(217,45,32,.09);
  --ok:#12805c; --ok-soft:rgba(18,128,92,.10);
  --r-sm:7px; --r:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(16,24,32,.04);
  --sh-2:0 1px 3px rgba(16,24,32,.05), 0 12px 28px rgba(16,24,32,.05);
  --sh-pop:0 12px 32px rgba(16,24,32,.14);
  --wb-primary:var(--brand); --wb-primary-d:var(--brand-strong);
  --wb-grad:var(--brand); --wb-bg:var(--bg); --wb-surface:var(--surface-2); --wb-border:var(--border);
}
:root[data-theme="dark"]{
  --bg:#0b0f12; --surface:#12171b; --surface-2:#191f24; --surface-3:#222a30;
  --border:rgba(255,255,255,.09); --border-soft:rgba(255,255,255,.06);
  --fg:#e6edf3; --fg-muted:#94a3ac; --fg-subtle:#6b7883;
  --brand:#2fbf93; --brand-strong:#27a67f; --brand-ink:#5ad9b2;
  --brand-soft:rgba(47,191,147,.14);
  --warn:#fb923c; --warn-soft:rgba(251,146,60,.16);
  --danger:#ff6467; --danger-soft:rgba(255,100,103,.14);
  --ok:#3ddc97; --ok-soft:rgba(61,220,151,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.30);
  --sh-2:0 1px 3px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.30);
  --sh-pop:0 14px 34px rgba(0,0,0,.48);
}
body{ font-size:13.5px; }

/* —— 侧栏 —— */
.app-side{ width:232px; padding:18px 10px 14px; background:var(--surface-2); border-right:1px solid var(--border); }
.side-brand{ padding:0 8px 18px; margin-bottom:6px; border-bottom:1px solid var(--border); gap:11px; }
.side-brand img{ width:34px; height:34px; border-radius:10px; box-shadow:var(--sh-1); }
.side-brand .brand-name{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.side-brand .brand-sub{ font-size:10.5px; color:var(--fg-subtle); letter-spacing:.04em; margin-top:3px; }
.side-group{
  padding:16px 10px 6px; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  color:var(--fg-subtle); text-transform:uppercase;
}
.side-nav > .side-group:first-child{ padding-top:4px; }
.side-item{ min-height:36px; padding:8px 10px; gap:10px; font-size:12.5px; border-radius:8px; font-weight:450; }
.side-item:hover{ background:rgba(15,23,42,.045); }
.side-item.active{
  background:var(--surface); color:var(--fg); font-weight:600;
  box-shadow:inset 2px 0 0 var(--brand), var(--sh-1);
}
.side-item.active .ui-icon, .side-item.active i{ color:var(--brand); }
.side-item .side-dot{ height:16px; min-width:16px; font-size:9.5px; background:var(--warn); }
.side-foot{ padding:12px 10px 0; display:flex; flex-direction:column; gap:6px; font-size:11px; }
.side-author{ font-size:10.5px; color:var(--fg-subtle); letter-spacing:.02em; }
.version-button{ font-size:10.5px; }

/* —— 顶栏：只留面包屑，标题交给面板自己的 h1 —— */
.desktop-topbar{
  min-height:52px; height:52px; padding:0 28px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
}
.topbar-breadcrumb{ font-size:11px; letter-spacing:.06em; color:var(--fg-subtle); }
.topbar-breadcrumb span{ margin:0 6px; opacity:.6; }
.topbar-heading h2{ display:none; }
/* 没有 .page-head 的面板（模型/分组/用量/客户端/设置）：给工具条标题加 .page-title，
 * 让它与 .page-head h1 同尺寸，保证每个面板只有一个视觉锚点。 */
.page-title{ font-size:19px; font-weight:600; letter-spacing:-.028em; margin:0; }
.topbar-status{ font-size:11.5px; padding:5px 10px; border-radius:999px; }
.topbar-endpoint, .topbar-update{ height:32px; font-size:12px; }
.app-body{ max-width:1280px; padding:28px 32px 56px; }

/* —— 页头 —— */
.page-head{ margin:0 0 18px; }
.page-head h1{ font-size:21px; letter-spacing:-.028em; }
.page-head p{ font-size:12px; margin-top:5px; }

/* —— 指标条：一条 4 格，细分割线，去渐变去光晕 —— */
.stat-grid{
  gap:0; border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  background:var(--surface); box-shadow:var(--sh-1); margin-bottom:26px;
}
.stat, .stat.is-warn, .stat.is-danger, .stat.is-brand{
  background:var(--surface); border:0; border-radius:0; padding:16px 20px 15px;
}
.stat + .stat{ border-left:1px solid var(--border-soft); }
.stat::after{ display:none; }
.stat .stat-label{ font-size:11px; letter-spacing:.02em; color:var(--fg-muted); }
.stat .stat-value{ font-size:26px; font-weight:600; letter-spacing:-.03em; margin:8px 0 5px; }
.stat .stat-sub{ font-size:11px; color:var(--fg-subtle); }
.stat.is-warn .stat-value{ color:var(--warn); }
.stat.is-danger .stat-value{ color:var(--danger); }

/* —— 按钮与输入 —— */
.console-btn{ height:34px; border-radius:8px; font-size:12.5px; font-weight:500; padding:0 12px; }
.console-btn.primary{ background:var(--brand); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.console-btn.primary:hover{ background:var(--brand-strong); }
.console-btn:hover{ background:var(--surface-2); }
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  border-radius:8px; border-color:var(--border); transition:border-color .15s, box-shadow .15s;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}

/* —— 表格 —— */
.acc-table thead th, .tbl thead th{ font-size:10.5px; letter-spacing:.05em; color:var(--fg-subtle); font-weight:600; }
.acc-table tbody td, .tbl tbody td{ padding:12px 16px; font-size:12.5px; }
.acc-table tbody tr:hover td, .tbl tbody tr:hover td{ background:var(--surface-2); }
.tbl tbody tr:hover td:first-child, .acc-table tbody tr:hover td:first-child{ box-shadow:inset 2px 0 0 var(--brand); }
.account-toolbar{ margin-bottom:12px; }
.account-filters{ background:var(--surface-2); }

/* —— 登录页：左品牌 + 右表单 —— */
.login-shell{ min-height:100vh; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); background:var(--surface); }
/* `.hidden`（Tailwind）必须能盖过上面的 grid 显示：这里用 :not(.hidden) 提高优先级 */
.login-shell:not(.hidden){ display:grid; }
.login-shell.hidden{ display:none; }
.login-brand{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#0c1512; color:#e9f6f1; padding:56px;
}
.login-brand::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse at 30% 30%, #000 20%, transparent 72%);
}
.login-brand::after{
  content:""; position:absolute; width:520px; height:520px; right:-180px; bottom:-220px;
  background:radial-gradient(circle, rgba(47,191,147,.30), transparent 62%);
  filter:blur(10px);
}
.login-brand-inner{ position:relative; z-index:1; max-width:420px; width:100%; }
.login-brand .who{ display:flex; align-items:center; gap:12px; }
.login-brand .who img{ width:40px; height:40px; border-radius:11px; box-shadow:0 0 0 1px rgba(47,191,147,.28), 0 6px 18px rgba(0,0,0,.35); }
.login-brand .who strong{ font-size:15px; letter-spacing:-.01em; font-weight:600; }
.login-brand h2{ font-size:38px; line-height:1.15; letter-spacing:-.04em; font-weight:600; margin:52px 0 14px; }
.login-brand .tagline{ font-size:14px; line-height:1.7; color:#a9c4bb; margin:0 0 34px; }
.login-points{ list-style:none; display:grid; gap:12px; padding:0; margin:0; font-size:12.5px; color:#cfe3dc; }
.login-points li{ display:flex; align-items:center; gap:10px; }
.login-points svg{ width:15px; height:15px; color:#4ed3a6; flex:none; }
.login-author{ margin-top:56px; font-size:11px; letter-spacing:.12em; color:#6f8a81; text-transform:uppercase; }
.login-panel{ display:flex; align-items:center; justify-content:center; padding:40px 28px; }
.login-card{ width:100%; max-width:352px; }
.login-eyebrow{ display:inline-block; font-size:11px; letter-spacing:.1em; color:var(--brand-ink); text-transform:uppercase; }
.login-card h1{ font-size:24px; letter-spacing:-.03em; font-weight:600; margin:10px 0 6px; }
.login-card .login-sub{ font-size:12.5px; color:var(--fg-muted); margin:0 0 26px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11.5px; font-weight:500; color:var(--fg-muted); margin-bottom:6px; }
.field input{
  width:100%; height:40px; padding:0 12px; font-size:13px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); color:var(--fg); transition:border-color .15s, box-shadow .15s;
}
.field input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.login-submit{
  width:100%; height:42px; margin-top:6px; border:0; border-radius:9px; cursor:pointer;
  background:var(--brand); color:#fff; font-size:13.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s;
}
.login-submit:hover{ background:var(--brand-strong); }
.login-submit:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:3px; }
.login-err{ margin-top:12px; font-size:12px; color:var(--danger); text-align:center; }
.login-err[hidden]{ display:none; }
@media (max-width:900px){
  .login-shell{ grid-template-columns:1fr; }
  .login-brand{ display:none; }
  .login-panel{ min-height:100vh; padding:32px 22px; background:var(--bg); }
  .login-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px 22px; box-shadow:var(--sh-2); }
}

/* —— v2 移动端修正：上面的桌面规则必须让位给抽屉/顶栏布局 —— */
@media (max-width:900px){
  .app-side{
    width:auto; height:auto; padding:8px 12px; position:sticky; top:0;
    background:var(--surface); border-right:0; border-bottom:1px solid var(--border);
  }
  .side-brand{ padding:0; border-bottom:0; }
  .side-brand .side-title{ display:none; }
  .side-item{ min-height:42px; padding:10px 12px; font-size:13.5px; }
  .app-body{ padding:16px 14px 40px; }
  .page-head h1{ font-size:19px; }
  .desktop-topbar{ height:auto; min-height:48px; padding:6px 14px; background:var(--surface); border-bottom:1px solid var(--border); gap:10px; }
  .topbar-actions{ gap:8px; }
  /* 移动端顶栏只留状态与刷新：API 地址在 API Keys 面板里有完整入口 */
  .app-main .topbar-actions .topbar-endpoint{ display:none; }
  .topbar-status{ display:flex; font-size:11px; padding:4px 9px; }
  .topbar-heading{ display:none; }
  .topbar-actions{ width:100%; justify-content:space-between; }
  .topbar-status{ order:-1; }
  .stat .stat-value{ font-size:22px; }
}
/* 桌面：导航独立滚动，页脚钉在底部（分组后总高度会超出 900px 视口） */
@media (min-width:901px){
  .side-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px; }
  .side-foot{ flex:none; }
  .side-group{ padding-top:12px; }
  .side-group:first-child{ padding-top:2px; }
  .side-brand{ padding-bottom:14px; }
  .desktop-topbar{ border-bottom:1px solid var(--border); }
}
.login-version{ margin:22px 0 0; font-size:10.5px; letter-spacing:.08em; color:var(--fg-subtle); text-align:center; }

/* —— 移动端数据表：横滑专用，行高压缩，首列固定 —— */
@media (max-width:900px){
  .tbl, .acc-table{ min-width:640px; }
  .tbl tbody td, .acc-table tbody td{ white-space:nowrap; padding:11px 14px; }
  .tbl thead th, .acc-table thead th{ position:sticky; top:0; }
  .tbl tbody td:first-child, .acc-table tbody td:first-child{
    position:sticky; left:0; background:var(--surface); z-index:1;
    box-shadow:1px 0 0 var(--border-soft);
  }
  .tbl tbody tr:hover td:first-child, .acc-table tbody tr:hover td:first-child{ background:var(--surface-2); }
}
/* 侧栏滚动区底部渐隐，提示「还有内容」 */
@media (min-width:901px){
  .side-nav{
    mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%);
  }
}

/* —— 工具条：面板标题 + 右侧操作。Tailwind 的 gap-2 没进预编译产物，
 *    这里用显式 flex 间距兜底，并统一按钮尺寸与主色。 —— */
.panel-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.panel-toolbar .tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.panel-toolbar .tools button{
  height:34px; padding:0 12px; border-radius:8px; font-size:12.5px; font-weight:500;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.panel-toolbar .tools button:hover{ background:var(--surface-2); border-color:var(--fg-subtle); }
.panel-toolbar .tools button.btn-primary{
  background:var(--brand); border-color:transparent; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.panel-toolbar .tools button.btn-primary:hover{ background:var(--brand-strong); }