/* ===== 一体化智能巡检系统 — 设计 Token (Figma-aligned) ===== */

:root {
  /* ===== Primary Blues ===== */
  --blue-950: #0d0b3e;
  --blue-900: #0d0b4c;
  --blue-850: #0e0d3f;
  --blue-800: #0d2b64;
  --blue-700: #012773;
  --blue-600: #032577;
  --blue-500: #338cff;
  --blue-400: #0078de;
  --blue-300: #3181f6;
  --blue-200: #24b6ff;
  --blue-100: #8dcff8;
  --cyan: #54ffff;
  --cyan-light: #3ffffe;
  --teal: #17e690;

  /* ===== Backgrounds ===== */
  --bg-page: #0d0b3e;
  --bg-card: #0d2b64;
  --bg-card-radius: 8px;
  --bg-sidebar: rgba(13, 11, 62, 0.95);
  --bg-topbar: #ffffff;
  --bg-input: rgba(141, 207, 248, 0.08);
  --bg-table-header: #012773;
  --bg-table-stripe: #ebf1ff;
  --bg-table-row: #e0eaff;
  --bg-table-hover: rgba(51, 140, 255, 0.08);
  --bg-active: rgba(84, 255, 255, 0.1);
  --color-table-border: #6684b1;
  --color-header-border: #6684b1;

  /* ===== Text ===== */
  --text-primary: #ffffff;
  --text-secondary: #e4efff;
  --text-tertiary: #acb5e3;
  --text-disabled: #67686f;
  --text-table-primary: #000000;
  --text-table-secondary: #333333;
  --text-table-header: #ffffff;
  --text-cyan: #54ffff;
  --text-active: #3ffffe;

  /* ===== Stat Card Colors (Figma-aligned) ===== */
  --stat-total: #3ffffe;
  --stat-idle: #17e690;
  --stat-working: #24b6ff;
  --stat-debug: #d0b24d;
  --stat-offline: #ff6666;

  /* ===== Status Colors ===== */
  --status-online: #17e690;
  --status-offline: #ff6666;
  --status-working: #24b6ff;
  --status-debug: #d0b24d;
  --status-idle: #3ffffe;
  --status-warning: #f49504;
  --status-danger: #e91a25;
  --status-info: #338cff;

  /* ===== Borders ===== */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --border-standard: 1px solid rgba(255, 255, 255, 0.1);
  --border-accent: 1px solid rgba(51, 140, 255, 0.35);
  --border-input: 1px solid #8dcff8;
  --border-active: 1px solid #54ffff;
  --border-table: 1px solid #6684b1;

  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 12px rgba(84, 255, 255, 0.25);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* ===== Typography ===== */
  --font-primary: 'PingFang SC', 'Source Han Sans CN', 'Microsoft YaHei', -apple-system, sans-serif;
  --font-title: 'Source Han Sans CN', 'PingFang SC', sans-serif;
  --font-number: 'DINPro', 'DIN Pro', 'SF Mono', 'Menlo', monospace;
  --font-mono: 'SF Mono', 'Menlo', monospace;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-title: 34px;

  /* ===== Spacing ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* ===== Border Radius ===== */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ===== Layout ===== */
  --sidebar-width: 230px;
  --topbar-height: 66px;

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
}
a { color: var(--blue-200); text-decoration: none; }
a:hover { color: var(--cyan); }
.btn.query-btn {
  border: 1px solid #54ffff !important;
  box-shadow: inset 0 0 0 1px rgba(84, 255, 255, 0.08);
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }