/* ============================================================
   API 情报工作台 — Apple 极简设计系统
   配色统一 #007AFF 苹果蓝，扁平极简，轻量阴影
   ============================================================ */

:root {
  /* === Brand === */
  --color-brand: #007AFF;
  --color-brand-hover: #3395FF;
  --color-brand-light: #EBF5FF;

  /* === Surface === */
  --color-bg: #F5F5F7;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F5F5FA;
  --color-bg-input: #F5F5F7;
  --color-bg-zebra: #FAFAFC;

  /* === Text === */
  --color-text-primary: #1C1C1E;
  --color-text-secondary: #3A3A3C;
  --color-text-muted: #6B7280;
  --color-text-hint: #9CA3AF;

  /* === Border === */
  --color-border: #E5E5EA;
  --color-border-soft: #F0F0F5;
  --color-border-hover: #C7D2FE;

  /* === State === */
  --state-success: #34C759;
  --state-success-bg: #E5FFF0;
  --state-warning: #FF9500;
  --state-warning-bg: #FFF5E5;
  --state-danger: #FF3B30;
  --state-danger-bg: #FFF0F0;
  --state-info: #007AFF;
  --state-info-bg: #EBF5FF;

  /* === Engine accent (provider column colors) === */
  --engine-A: #4F46E5;
  --engine-B: #0066CC;
  --engine-C: #7C3AED;
  --engine-D: #059669;
  --engine-E: #D97706;
  --engine-F: #DB2777;
  --engine-G: #0891B2;

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Shadow === */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-float: 0 8px 30px rgba(0,0,0,0.08);

  /* === Typography === */
  --font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* === Layout === */
  --topbar-height: 52px;
  --sidebar-width: 320px;

  /* Element Plus overrides */
  --el-color-primary: #007AFF;
  --el-color-primary-light-3: #4DA6FF;
  --el-color-primary-light-5: #80BFFF;
  --el-color-primary-light-7: #B3D9FF;
  --el-color-primary-light-9: #EBF5FF;
  --el-color-primary-dark-2: #0062CC;
  --el-border-radius-base: 8px;
  --el-border-color: #E5E5EA;
  --el-border-color-light: #F0F0F5;
  --el-text-color-primary: #1C1C1E;
  --el-text-color-regular: #3A3A3C;
  --el-text-color-secondary: #6B7280;
  --el-text-color-placeholder: #9CA3AF;
  --el-bg-color: #FFFFFF;
  --el-bg-color-page: #F5F5F7;
  --el-fill-color: #F5F5F7;
  --el-fill-color-light: #F5F5FA;
  --el-fill-color-blank: #FFFFFF;
}

/* === Dark theme === */
html[data-theme="dark"] {
  --color-bg: #121214;
  --color-bg-card: #1C1C1E;
  --color-bg-hover: #2C2C2E;
  --color-bg-input: #2C2C2E;
  --color-bg-zebra: #232325;
  --color-text-primary: #F5F5F7;
  --color-text-secondary: #D1D1D6;
  --color-text-muted: #8E8E93;
  --color-text-hint: #636366;
  --color-border: #38383A;
  --color-border-soft: #2C2C2E;

  --el-bg-color: #1C1C1E;
  --el-bg-color-page: #121214;
  --el-fill-color: #2C2C2E;
  --el-fill-color-light: #2C2C2E;
  --el-fill-color-blank: #1C1C1E;
  --el-border-color: #38383A;
  --el-border-color-light: #2C2C2E;
  --el-text-color-primary: #F5F5F7;
  --el-text-color-regular: #D1D1D6;
  --el-text-color-secondary: #8E8E93;
  --el-text-color-placeholder: #636366;
}

/* === Reset & Base === */
* { box-sizing: border-box; margin: 0; padding: 0; }
[v-cloak] { display: none; }
body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-brand); text-decoration: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === App Layout === */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === Top Bar (52px Apple style) === */
.top-bar {
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.top-bar-logo {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-bar-logo svg,
.top-bar-logo i {
  width: 20px;
  height: 20px;
}
.version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
  background: var(--color-bg-input);
  color: var(--color-text-muted);
}

/* Segmented Control */
.segmented-control {
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-input);
  height: 34px;
}
.segmented-control button {
  height: 100%;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.segmented-control button.active {
  background: var(--color-brand);
  color: #fff;
}
.segmented-control button:not(.active):hover {
  opacity: 0.7;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* === Buttons === */
.btn-apple {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-apple:hover { opacity: 0.7; }
.btn-apple:active { transform: scale(0.97); }
.btn-apple.btn-primary {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}
.btn-apple.btn-icon {
  padding: 6px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.btn-apple.btn-icon:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.btn-apple.btn-sm {
  padding: 4px 8px;
  font-size: var(--text-xs);
}

.provider-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.provider-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.provider-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--color-brand);
  text-decoration: none;
  transition: color 0.15s ease;
}
.provider-link:hover {
  color: var(--color-brand-dark);
  text-decoration: underline;
}
.provider-link svg {
  width: 10px;
  height: 10px;
}

/* === Main Content Area === */
.content-area {
  flex: 1;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow: hidden;
}

/* === Sidebar === */
.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.app-sidebar.no-scrollbar::-webkit-scrollbar { display: none; }
.app-sidebar { -ms-overflow-style: none; scrollbar-width: none; }

/* === Card === */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}
.card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.card-title svg,
.card-title i {
  width: 16px;
  height: 16px;
  color: var(--color-brand);
}

/* === Stats Row === */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.stat-card .stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.stat-card .stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}
.stat-card .stat-hint {
  font-size: var(--text-xs);
  color: var(--color-text-hint);
  margin-top: var(--space-1);
}
.stat-card.brand .stat-value { color: var(--color-brand); }
.stat-card.success .stat-value { color: var(--state-success); }
.stat-card.warning .stat-value { color: var(--state-warning); }
.stat-card.danger .stat-value { color: var(--state-danger); }

/* === Comparison Summary Table (汽车之家 style) === */
.compare-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
}
.compare-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.compare-section-header h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
}
.compare-section-header .hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.table-scroll-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  border-radius: var(--radius-md);
}
.table-scroll-wrap::-webkit-scrollbar { height: 6px; width: 6px; }
.table-scroll-wrap::-webkit-scrollbar-track { background: var(--color-bg-input); }
.table-scroll-wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.compare-table {
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
}
/* Frozen first column */
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-bg-card);
  min-width: 170px;
  text-align: left;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}
.compare-table th:first-child {
  background: var(--color-brand-light);
  z-index: 4;
}
/* Frozen header row */
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-bg-card);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  min-width: 130px;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  white-space: nowrap;
}
/* Provider column colors */
.compare-table thead th:nth-child(2) { color: var(--engine-A); }
.compare-table thead th:nth-child(3) { color: var(--engine-B); }
.compare-table thead th:nth-child(4) { color: var(--engine-C); }
.compare-table thead th:nth-child(5) { color: var(--engine-D); }
.compare-table thead th:nth-child(6) { color: var(--engine-E); }
.compare-table thead th:nth-child(7) { color: var(--engine-F); }
.compare-table thead th:nth-child(8) { color: var(--engine-G); }
/* Clickable provider header */
.compare-table thead th.th-provider {
  text-align: center;
  white-space: nowrap;
  cursor: default;
}
.compare-table thead th.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.compare-table thead th.th-sortable:hover { opacity: 0.7; }
.th-provider-name {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.th-provider-name:hover { opacity: 0.7; }
.th-sort {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-hint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  margin-left: 2px;
}
.th-sort:hover {
  background: var(--color-brand-light);
}
/* 升序（价格由低到高）红色，降序绿色 —— 红涨绿跌 */
.th-sort.sort-asc { color: #E5484D; }
.th-sort.sort-desc { color: #16A34A; }
.th-sort.sort-asc:hover, .th-sort.sort-desc:hover { opacity: 0.8; }
.th-sort.active {
  color: var(--color-brand);
  background: var(--color-brand-light);
}

/* SiliconFlow official reference column */
.compare-table thead th.th-official {
  text-align: center;
  white-space: nowrap;
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-weight: var(--font-semibold);
}
.compare-table td.cell-official {
  font-weight: var(--font-semibold);
  color: var(--color-brand);
  white-space: nowrap;
}
.approx-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  vertical-align: middle;
}
.ratio-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 16px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  vertical-align: middle;
  cursor: help;
}
.ratio-badge.ratio-lower {
  color: #0a8a4a;
  background: rgba(16, 185, 129, 0.12);
}
.ratio-badge.ratio-higher {
  color: #c2410c;
  background: rgba(249, 115, 22, 0.12);
}
[data-theme="dark"] .ratio-badge.ratio-lower { color: #34d399; }
[data-theme="dark"] .ratio-badge.ratio-higher { color: #fb923c; }


/* Table cells */
.compare-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  vertical-align: middle;
  white-space: nowrap;
  background: var(--color-bg-card);
}
.compare-table tbody tr:hover td {
  background: var(--color-bg-hover);
}
/* Zebra striping for readability (skip section dividers & highlighted rows) */
.compare-table tbody tr:nth-child(even):not(.tr-section):not(.row-lowest) td {
  background: var(--color-bg-zebra);
}
.compare-table tbody tr:nth-child(even):not(.tr-section):not(.row-lowest):hover td {
  background: var(--color-bg-hover);
}

/* Section divider row */
.compare-table .tr-section td {
  background: var(--color-bg-input);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-3);
  text-align: left !important;
  font-size: var(--text-base);
}

/* Cell states */
.cell-success { color: var(--state-success); font-weight: var(--font-bold); font-size: 24px; }
.cell-danger { color: var(--state-danger); font-weight: var(--font-bold); font-size: 24px; }
.cell-muted { color: var(--color-text-hint); }

.verification-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.verification-demo {
  color: #9a5b00;
  background: #fff2cc;
}

.verification-needs_verification {
  color: #9a3412;
  background: #ffedd5;
}

[data-theme="dark"] .verification-demo {
  color: #fde68a;
  background: #78350f;
}

[data-theme="dark"] .verification-needs_verification {
  color: #fed7aa;
  background: #7c2d12;
}
.cell-price { font-family: var(--font-mono); font-weight: var(--font-semibold); }
/* Cost estimator controls */
.cost-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.cost-controls label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

/* Compare tab stacked sections */
.compare-section + .compare-section {
  margin-top: var(--space-4);
}

/* Better price highlight in compare cells */
.compare-table td strong {
  font-weight: var(--font-semibold);
}

/* Hover override for lowest row to remain visible */
.compare-table tbody tr.row-lowest td {
  background: var(--state-success-bg);
}
.compare-table tbody tr.row-lowest td:first-child::after {
  content: "最低";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--state-success);
  background: rgba(52, 199, 89, 0.12);
  border-radius: var(--radius-full);
  vertical-align: middle;
}
.compare-table tbody tr.row-lowest:hover td {
  background: var(--state-success-bg) !important;
}

/* Risk levels */
.risk-low { color: var(--state-success); font-weight: var(--font-medium); }
.risk-medium { color: var(--state-warning); font-weight: var(--font-medium); }
.risk-high { color: var(--state-danger); font-weight: var(--font-medium); }
.risk-unknown { color: var(--color-text-hint); }

/* Health badges */
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.health-healthy { background: var(--state-success-bg); color: var(--state-success); }
.health-degraded { background: var(--state-warning-bg); color: var(--state-warning); }
.health-credential_required { background: var(--state-info-bg); color: var(--state-info); }
.health-unreachable { background: var(--state-danger-bg); color: var(--state-danger); }
.health-unknown { background: var(--color-bg-input); color: var(--color-text-muted); }

/* Category badges */
.cat-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin: 1px;
}
.cat-code { background: var(--state-info-bg); color: var(--state-info); }
.cat-text { background: var(--state-success-bg); color: var(--state-success); }
.cat-image { background: var(--state-warning-bg); color: var(--state-warning); }
.cat-video { background: var(--state-danger-bg); color: var(--state-danger); }
.cat-audio { background: #F0F0FA; color: #6366F1; }

/* === Provider Cards Grid === */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.provider-mini-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: all 0.15s ease;
  cursor: pointer;
}
.provider-mini-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.provider-mini-card .pmc-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.provider-mini-card .pmc-info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.provider-mini-card .pmc-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}

/* === Filter Tags === */
.filter-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--color-border);
  background: var(--color-bg-input);
  color: var(--color-text-secondary);
}
.filter-tag:hover { opacity: 0.7; }
.filter-tag.active {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}
.filter-tag.active::before {
  content: "\2713 ";
  font-weight: var(--font-bold);
}

/* === Form Controls === */
.form-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  transition: border-color 0.15s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-brand);
}

/* === Element Plus Overrides === */
.el-input__wrapper,
.el-select .el-input__wrapper,
.el-textarea__inner {
  background: var(--color-bg-input) !important;
  box-shadow: 0 0 0 1px var(--color-border) inset !important;
  border-radius: var(--radius-md) !important;
}
.el-input__wrapper.is-focus,
.el-select .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--color-brand) inset !important;
}
.el-input__inner,
.el-textarea__inner {
  color: var(--color-text-primary) !important;
}
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: var(--color-text-hint) !important;
}
.el-button {
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-medium);
}
.el-button--primary {
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}
.el-button--primary:hover {
  background: var(--color-brand-hover) !important;
  border-color: var(--color-brand-hover) !important;
}
.el-table {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: var(--color-bg-input);
  --el-table-border-color: var(--color-border);
  --el-table-text-color: var(--color-text-primary);
  --el-table-header-text-color: var(--color-text-secondary);
  --el-table-row-hover-bg-color: var(--color-bg-hover);
}
.el-table th.el-table__cell {
  background: var(--color-bg-input) !important;
}
.el-card {
  border-radius: var(--radius-lg) !important;
  border-color: var(--color-border) !important;
  background: var(--color-bg-card) !important;
}
.el-dialog {
  border-radius: var(--radius-xl) !important;
  background: var(--color-bg-card) !important;
}
.el-dialog__header {
  border-bottom: 1px solid var(--color-border);
}
.el-tabs__item {
  color: var(--color-text-secondary) !important;
  font-weight: var(--font-medium);
}
.el-tabs__item.is-active {
  color: var(--color-brand) !important;
}
.el-tag {
  border-radius: var(--radius-full) !important;
}
.el-message {
  border-radius: var(--radius-md) !important;
}

/* === Toast === */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: var(--space-2) var(--space-4);
  background: var(--color-text-primary);
  color: var(--color-bg-card);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-float);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Empty State === */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-hint);
}
.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: var(--space-2);
}
.empty-state .empty-text {
  font-size: var(--text-sm);
}

/* === Main Scroll Area === */
.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}
.main-scroll::-webkit-scrollbar { width: 6px; }
.main-scroll::-webkit-scrollbar-track { background: transparent; }
.main-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* === Section Heading === */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.section-heading h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.section-heading .eyebrow {
  font-size: var(--text-xs);
  color: var(--color-brand);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

/* === Responsive === */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .app-sidebar { width: 260px; }
  .segmented-control { display: none; }
}
@media (max-width: 768px) {
  .content-area { flex-direction: column; }
  .app-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
  .app-sidebar .card { min-width: 200px; }
  .stats-row { grid-template-columns: 1fr; }
  .provider-grid { grid-template-columns: 1fr; }
  .top-bar { flex-wrap: wrap; height: auto; padding: var(--space-2); }
}