/* ============================================================
   AI Gateway — 全局样式 (Slate & Indigo 设计系统, Bootstrap 5.3 适配)

   配色纪律（改动本文件前必读）
   ---------------------------------------------------------
   1. 界面骨架（按钮/选中态/焦点环/描边/链接）只允许使用 --brand-* 一个色相。
      禁止在组件里直接写 hex，必须走令牌。
   2. --accent-* 只用于「数据强调」场景（Token 数值、密钥文本、图表主序列），
      不得用于装饰（分隔线、标题竖条等）。
   3. --success/--warning/--danger/--info 是唯一的语义色出口，四者色相互不重叠。
   4. --chart-* 是隔离命名空间，仅供 ECharts 读取，禁止渗入任何 UI 组件。
   ============================================================ */

:root {
  /* ---- 品牌色阶：靛蓝，界面骨架唯一色相 ---- */
  --brand-50:#EEF2FF;
  --brand-100:      #E0E7FF;
  --brand-200:      #C7D2FE;
  --brand-300:      #A5B4FC;
  --brand-400:      #818CF8;
  --brand-500:      #6366F1;
  --brand-600:      #4F46E5;
  --brand-700:      #4338CA;
  --brand-800:      #3730A3;
  --brand-900:      #312E81;

  /* ---- 中性色阶：冷调石板灰 ---- */
  --slate-50:       #F8FAFC;
  --slate-100:      #F1F5F9;
  --slate-200:      #E2E8F0;
  --slate-300:      #CBD5E1;
  --slate-400:      #94A3B8;
  --slate-500:      #64748B;
  --slate-600:      #475569;
  --slate-700:      #334155;
  --slate-800:      #1E293B;
  --slate-900:      #0F172A;

  /* ---- 语义别名（向后兼容原变量名，全站统一引用入口）---- */
  --primary:        var(--brand-600);
  --primary-hover:  var(--brand-700);
  --primary-active: var(--brand-800);
  --primary-light:  var(--brand-400);
  --primary-subtle: var(--brand-50);
  --primary-border: var(--brand-200);
  --primary-glow:   rgba(79, 70, 229, 0.14);

  /* accent 语义收窄：仅用于数据强调 */
  --accent:         #0D9488;
  --accent-hover:   #0F766E;
  --accent-light:   #14B8A6;
  --accent-subtle:  #F0FDFA;
  --accent-border:  #99F6E4;
  --accent-glow:    rgba(13, 148, 136, 0.14);

  --success:        #059669;
  --success-subtle: #ECFDF5;
  --success-border: #A7F3D0;

  --warning:        #B45309;
  --warning-subtle: #FFFBEB;
  --warning-border: #FDE68A;

  --danger:         #E11D48;
  --danger-hover:   #BE123C;
  --danger-subtle:  #FFF1F2;
  --danger-border:  #FECDD3;
  --danger-glow:    rgba(225, 29, 72, 0.14);

  --info:           var(--brand-600);
  --info-subtle:    var(--brand-50);
  --info-border:    var(--brand-200);

  /* ---- 表面与文字 ---- */
  --bg-base:        var(--slate-50);
  --bg-surface:     #FFFFFF;
  --bg-elevated:    var(--slate-100);
  --bg-sunken:      var(--slate-100);
  --bg-card:        #FFFFFF;
  --bg-hover:       var(--slate-100);

  --border-color:   var(--slate-200);
  --border-color-hover: var(--brand-300);

  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted:     var(--slate-500);

  /* ---- 图表色板：隔离命名空间，仅 ECharts 读取 ---- */
  --chart-1:        #4F46E5;
  --chart-2:        #0D9488;
  --chart-3:        #B45309;
  --chart-4:        #7C3AED;
  --chart-5:        #DB2777;
  --chart-grid:     #E2E8F0;
  --chart-axis:     #94A3B8;
  --chart-label:    #64748B;

  /* ---- 圆角 ---- */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;

  /* ---- 阴影：克制，仅两级 + 聚焦环 ---- */
  --shadow-card:    0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-raised:  0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-pop:     0 12px 28px -6px rgba(15, 23, 42, 0.14);
  --shadow-glow:    0 0 0 3px var(--primary-glow);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.22);

  /* ---- 字号规范（统一表格排版体系，页面禁止再写死 font-size）---- */
  --font-table:      14px;   /* 表格正文 */
  --font-table-head: 13px;   /* 表头 */
  --font-cell-meta:  13px;   /* 单元格次要信息（时间/耗时） */
  --font-cell-sub:   12px;   /* 单元格附加明细行 */
  --font-tag:        12.5px; /* 标签/徽章统一字号 */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* 全站统一的键盘聚焦环：此前仅输入框有焦点样式，键盘用户无法定位 */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ==================== Bootstrap 主题适配 ==================== */
body {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
  --bs-primary: var(--primary);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
}

/* 焦点环统一由 :focus-visible 接管，移除 Bootstrap 默认 outline，避免双环 */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-400);
  box-shadow: var(--focus-ring);
}
.form-control:focus,
.form-select:focus,
.form-control.is-invalid,
.form-select.is-invalid {
  background-color: var(--bg-surface);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 20px;
}
/* 内边距与表格首列的24px 对齐：同一页只保留一条左对齐基线 */
.card-body { padding: 20px 24px; }
.card-body.flush { padding: 0; }

.table {
  --bs-table-bg: var(--bg-surface);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
  --bs-table-hover-bg: var(--bg-hover);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-striped-bg: var(--slate-50);
  --bs-table-striped-color: var(--text-primary);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { background-color: var(--bs-table-bg); color: var(--bs-table-color); padding: 12px 14px; }
.table thead th {
  font-size: var(--font-table-head);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  background: var(--bg-surface);
  letter-spacing: 0.02em;
}
.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table thead th:last-child { border-top-right-radius: var(--radius-md); }
/* 首列/末列与卡片边缘保持呼吸感（解决文字贴边） */
.table > :not(caption) > * > th:first-child,
.table > :not(caption) > * > td:first-child { padding-left: 24px; }
.table > :not(caption) > * > th:last-child,
.table > :not(caption) > * > td:last-child { padding-right: 24px; }

/* ---- 紧凑型表格：日志类多行表使用（table 追加 table-compact 类）---- */
.table-compact > :not(caption) > * > * { padding: 9px 12px; font-size: 13px; }
.table-compact > :not(caption) > * > th:first-child,
.table-compact > :not(caption) > * > td:first-child { padding-left: 20px; }
.table-compact > :not(caption) > * > th:last-child,
.table-compact > :not(caption) > * > td:last-child { padding-right: 20px; }

/* ---- 表格列宽与截断基元 ----------------------------------------------
   问题：单元格内容（API Key / URL / 标题）过长时会把列撑开，
        文字视觉上溢出并压到相邻列上。
   方案：table-layout: fixed 让列宽由 <colgroup> 决定而非内容决定，
        配合 .cell-truncate 做单行省略。
   注意：overflow/text-overflow 对 inline 元素无效，
        必须作用在 block/flex/grid 容器上 —— 这是此前截断失效的根因。 */
.table-fixed { table-layout: fixed; width: 100%; }
.table-fixed th,
.table-fixed td { overflow: hidden; }

/* 单行省略容器：父级需为 block/flex/grid */
.cell-truncate {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 弹性布局下的省略：子项自身需 min-width:0 */
.cell-truncate-flex { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cell-truncate-flex > * { min-width: 0; }

/* 表格行内操作按钮组：左对齐 + 固定间距，防止挤压相邻列 */
.row-actions { display: flex; gap: 6px; justify-content: flex-start; align-items: center; }

/* ---- 表格单元格文字角色类 ---- */
.cell-strong { font-size: var(--font-table); font-weight: 600; color: var(--text-primary); }
.cell-meta { font-size: var(--font-cell-meta); color: var(--text-secondary); }
.cell-sub { font-size: var(--font-cell-sub); color: var(--text-muted); }
.mono-text { font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; color: var(--text-primary); }
.key-text { font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; color: var(--accent); word-break: break-all; }
.form-hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ---- 表格公共元素（统一收编，禁止页面内重复定义）----
   注意：标签类元素同为inline-block，若承载长文本会撑高行高，
   因此在表格上下文中额外约束为块级截断。 */
.provider-badge {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 4px;
  color: var(--brand-800);
  font-size: var(--font-tag);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.model-id-tag {
  display: inline-block;
  max-width: 100%;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  color: var(--slate-700);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: var(--font-tag);
  font-weight: 600;
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.call-type-tag { border-radius: 4px; font-size: var(--font-tag); font-weight: 600; padding: 2px 8px; }
.call-type-tag.standard { background: var(--slate-100); border: 1px solid var(--slate-300); color: var(--slate-700); }
.call-type-tag.stream   { background: var(--brand-50); border: 1px solid var(--brand-200); color: var(--brand-800); }
/* 标签组：允许换行（nowrap 会导致多标签合计超出列宽），
   同时标签自身受max-width 约束，不会撑破单元格 */
.protocol-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.protocol-tags > .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-cell { display: flex; flex-direction: column; }
.token-total { font-size: 14px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.token-detail { font-size: var(--font-cell-sub); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.user-cell { display: flex; align-items: center; gap: 8px; }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.clickable-row { cursor: pointer; }
.date-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: var(--slate-100); border: 1px solid var(--slate-200);
  color: var(--text-secondary); font-size: var(--font-tag);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* 日期圆片固定 yyyy-MM-dd，禁止被长列挤压折行 */
}
.metric-badge {
  display: inline-flex; min-width: 30px; justify-content: center;
  padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: var(--font-tag);
  font-variant-numeric: tabular-nums;
}
.metric-badge.neutral { background: var(--slate-100); color: var(--slate-600); }
.metric-badge.danger  { background: var(--danger-subtle); color: var(--danger); }
.meta-key { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.form-control, .form-select, .form-check-input {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--slate-400); }
.form-control:disabled, .form-select:disabled { background-color: var(--bg-base); color: var(--text-muted); }
.form-label { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
/* 水平表单行：label 左侧固定列宽，控件右侧自适应 */
.form-row-h { display: flex; align-items: center; gap: 12px; }
.form-row-h > .form-label { flex: 0 0 108px; margin: 0; text-align: right; }
.form-row-h > .form-control,
.form-row-h > .form-select { flex: 1 1 auto; min-width: 0; }
.form-row-h.form-row-top { align-items: flex-start; }        /* 多行控件（textarea）顶部对齐 */
.form-row-h.form-row-top > .form-label { padding-top: 7px; } /* label 与 textarea 首行对齐 */
/* 复合控件列：控件不是 input/select 直接子元素，或控件后需要跟 .form-hint 时，用该列占据右侧空间 */
.form-row-h > .field-col { flex: 1 1 auto; min-width: 0; }
/* checkbox/radio 组：作为水平表单的一整个控件列 */
.choice-group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.choice-group .form-check { margin: 0; }
/* 与水平表单控件列起点对齐（label 108px + gap 12px） */
.control-indent { margin-left: 120px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-text { color: var(--text-muted); }
.input-group-text { background-color: var(--bg-elevated); border-color: var(--border-color); color: var(--text-secondary); }
.input-group > .form-control:not(:focus) { border-right-color: var(--border-color); }
.input-group-text + .form-control { border-left: 0; }
.input-group-text:has(+ .form-control:focus) { border-color: var(--brand-400); }

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  color: var(--text-primary);
}
.modal-header { border-bottom: 1px solid var(--border-color); padding: 16px 20px; }
.modal-title { font-size: 17px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border-color); padding: 14px 20px; }
.btn-close { filter: none; opacity: 0.5; }
.btn-close:hover { opacity: 0.9; }

.dropdown-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
}
.dropdown-item {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-divider { border-top-color: var(--border-color); margin: 4px 0; }

.pagination {
  --bs-pagination-bg: var(--bg-surface);
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-hover-bg: var(--bg-hover);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-hover-border-color: var(--border-color-hover);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-bg: var(--bg-base);
  --bs-pagination-disabled-color: var(--slate-400);
  --bs-pagination-disabled-border-color: var(--border-color);
  --bs-pagination-border-radius: var(--radius-sm);
}
.pagination .page-link:focus { box-shadow: var(--focus-ring); }
/* 分页跳转输入框：隐藏 number 自带 spinner，小宽度下保持干净 */
.page-jumper::-webkit-outer-spin-button,
.page-jumper::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-jumper { -moz-appearance: textfield; appearance: textfield; text-align: center; }

/* ---- 徽章：全部走语义令牌 ---- */
.badge { font-weight: 500; font-size: var(--font-tag); }
.badge-tag-success  { background: var(--success-subtle); border: 1px solid var(--success-border); color: var(--success); }
.badge-tag-danger   { background: var(--danger-subtle);  border: 1px solid var(--danger-border);  color: var(--danger); }
.badge-tag-warning  { background: var(--warning-subtle); border: 1px solid var(--warning-border); color: var(--warning); }
.badge-tag-info     { background: var(--brand-50);        border: 1px solid var(--brand-200);        color: var(--brand-700); }
.badge-tag-primary  { background: var(--brand-50);        border: 1px solid var(--brand-200);        color: var(--brand-700); }
.badge-tag-secondary{ background: var(--slate-100);       border: 1px solid var(--slate-200);       color: var(--slate-600); }

.text-muted-custom { color: var(--text-muted) !important; }
.text-secondary-custom { color: var(--text-secondary) !important; }

/* ==================== 按钮体系 ==================== */
/* 主操作：唯一实心品牌色按钮 */
.btn-neon {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-card) !important;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
.btn-neon:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
  box-shadow: var(--shadow-raised) !important;
}
.btn-neon:active { background: var(--primary-active) !important; }
.btn-neon:disabled, .btn-neon.disabled {
  background: var(--slate-300) !important;
  border-color: var(--slate-300) !important;
  box-shadow: none !important;
}

/* 次级操作：描边，中性色，不与主按钮争夺注意力 */
.btn-outline-purple {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-outline-purple:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--slate-300);
}

/* 强调描边（聚焦品牌色，用于次要但需要被看见的操作） */
.btn-outline-accent {
  background: var(--bg-surface);
  border: 1px solid var(--brand-300);
  color: var(--brand-700);
  transition: background-color .16s ease, border-color .16s ease;
}
.btn-outline-accent:hover { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-400); }

/* 危险描边 */
.btn-outline-danger-custom {
  background: transparent;
  border: 1px solid var(--danger-border);
  color: var(--danger);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-outline-danger-custom:hover { background: var(--danger-subtle); color: var(--danger-hover); border-color: var(--danger); }

.action-icon-btn { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ==================== 布局 ==================== */
.layout { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
}
.sidebar-logo:hover { color: inherit; }
.sidebar-logo .logo-icon {
  width: 34px; height: 34px;
  background: var(--brand-600);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; font-size: 17px;
}
.sidebar-logo .logo-text { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }

.sidebar-menu { flex: 1; padding: 8px 0 12px; }
.menu-group-label {
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 20px 6px; font-weight: 600;
}
/* 组标签紧贴其下首个菜单项，组间留白在标签上方形成节奏 */
.sidebar-menu .menu-group-label:not(:first-child) { margin-top: 6px; }
.sidebar-menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 9px 12px;
  margin: 1px 12px;
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, color .15s ease;
  font-size: 14.5px;
}
.sidebar-menu .menu-item i { font-size: 16px; color: var(--slate-400); transition: color .15s ease; }
.sidebar-menu .menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar-menu .menu-item:hover i { color: var(--text-secondary); }
.sidebar-menu .menu-item.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.sidebar-menu .menu-item.active i { color: var(--brand-600); }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-color); }
.user-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.user-badge .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-badge.user .avatar { background: var(--accent); }
.user-badge .user-info { flex: 1; min-width: 0; }
.user-badge .username { font-size: 14px; color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-badge .role-tag { font-size: 11.5px; color: var(--brand-700); }
.user-badge.user .role-tag { color: var(--accent); }
.user-badge .icon-btn {
  color: var(--text-muted); cursor: pointer; transition: color .16s ease;
  background: none; border: none; padding: 4px; font-size: 16px; line-height: 1;
}
.user-badge .icon-btn:hover { color: var(--text-primary); }

.main-content { flex: 1; overflow-y: auto; background: var(--bg-base); }
.content-inner { padding: 28px 32px; max-width: 1440px; }

/* ==================== 页头 ==================== */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-title {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; margin: 0;
  letter-spacing: -0.01em;
}
.page-title::before {
  content: ''; display: inline-block; width: 3px; height: 18px;
  background: var(--brand-600); border-radius: 2px; margin-right: 10px;
}
.page-title span { color: var(--brand-700); }
.page-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 6px; }

/* ==================== 统计卡片 ==================== */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow-card);
  height: 100%;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-600);
  opacity: .7; transition: opacity .18s ease;
}
.stat-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-raised); }
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-value {
  font-size: 30px; font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
/* 统一使用 bootstrap-icons 线性图标（替代 emoji，跨平台字形一致） */
.stat-card .stat-icon {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--brand-50);
  color: var(--brand-600);
  transition: background-color .18s ease, color .18s ease;
}
.stat-card:hover .stat-icon { background: var(--brand-600); color: #fff; }

/* ==================== 空状态 / 加载 ==================== */
.empty-state { text-align: center; padding: 56px 0; color: var(--text-muted); }
.empty-state i { font-size: 40px; display: block; margin-bottom: 12px; color: var(--slate-300); }

.loading-spinner { text-align: center; padding: 48px 0; color: var(--primary); }

/* ==================== Toast 容器 ==================== */
.toast-container { z-index: 1090; }
.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-pop);
  border-radius: var(--radius-md);
}
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error   { border-left: 3px solid var(--danger); }
.toast.toast-warning { border-left: 3px solid var(--warning); }
.toast.toast-info    { border-left: 3px solid var(--info); }

/* ==================== 代码块 / 日志详情 ==================== */
.code-block {
  background: var(--slate-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
}

.detail-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.detail-value { color: var(--text-primary); margin-bottom: 16px; word-break: break-all; }

/* Markdown 渲染内容 */
.markdown-body { color: var(--text-primary); line-height: 1.75; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight: 600; margin: 20px 0 10px; }
.markdown-body h1 { font-size: 20px; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body p { margin: 10px 0; }
.markdown-body pre {
  background: var(--slate-50); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto;
}
.markdown-body code {
  color: var(--brand-800);
  background: var(--brand-50);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
}
.markdown-body pre code { color: var(--text-secondary); background: transparent; padding: 0; }
.markdown-body table { border-collapse: collapse; width: 100%; margin: 14px 0; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border-color); padding: 8px 12px; }
.markdown-body th { background: var(--bg-elevated); font-weight: 600; }
.markdown-body blockquote {
  border-left: 3px solid var(--brand-400);
  padding: 4px 0 4px 14px;
  color: var(--text-secondary);
  margin: 14px 0;
  background: var(--brand-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.markdown-body a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.markdown-body a:hover { color: var(--brand-800); }

/* ==================== 快捷操作卡片（Admin/Dashboard）==================== */
/* 同色相同明度：并列项目靠图标区分，不靠色相制造伪层级 */
.action-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  background: var(--brand-600);
}
.action-icon:hover { background: var(--brand-700); }
/* Configuration forms share a responsive two-column layout and keep dialog actions visible. */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.settings-section { min-width: 0; }
.settings-section + .settings-section { margin-top: 24px; }
.settings-heading { font-size: 14px; font-weight: 600; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.settings-details { padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.settings-details > summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.settings-details[open] > summary { margin-bottom: 16px; }
.settings-details .form-row-h > .form-label { flex-basis: 88px; }
@media (max-width: 767px) {
    .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .content-inner { padding: 20px 16px; }
    .form-row-h > .form-label { flex-basis: 96px; }
}

.main-content { min-width: 0; min-height: 0; }
.sidebar-toggle { display: none; }
@media (max-width: 767px) {
    .layout { flex-direction: column; height: 100vh; height: 100dvh; }
    .sidebar { width: 100%; height: auto; max-height: 65vh; position: relative; }
    .sidebar-logo { min-height: 60px; height: 60px; padding: 12px 16px; }
    .sidebar-toggle { display: inline-flex; position: absolute; top: 14px; right: 16px; align-items: center; gap: 4px; }
    .sidebar-menu, .sidebar-footer { display: none; }
    .sidebar-open .sidebar-menu { display: block; overflow-y: auto; }
    .sidebar-open .sidebar-footer { display: block; }
    .page-header { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
}