/* ============================================================
   设计变量与基础
   来源：2.1.1 基准概览页原型 / styles.css（2026-09-15 机械搬迁）
   ============================================================ */

/* ============================================================
   2.1.1 基准概览页 · 视觉规范
   方向：科技蓝白（Tech Light）——浅蓝白底、白色卡面、
   科技蓝主色、冷色域标、等宽数字、精密网格与微光
   ============================================================ */

:root {
  /* 背景与卡面 */
  --bg: #f4f7fe;
  --bg-2: #eaf1ff;
  --surface: #ffffff;
  --surface-2: #f8faff;

  /* 文字 */
  --ink: #0b1b33;
  --ink-2: #334166;
  --ink-3: #6b7a99;
  --ink-4: #9aaac6;

  /* 描边 */
  --line: #e1e9f7;
  --line-2: #eef3fb;

  /* 主色：科技蓝 */
  --blue: #0f62fe;
  --blue-700: #0043ce;
  --blue-wash: rgba(15, 98, 254, 0.07);
  --blue-wash-2: rgba(15, 98, 254, 0.14);
  --blue-glow: rgba(15, 98, 254, 0.18);

  /* 测试域色（冷色系） */
  --d-general: #0f62fe;
  --d-special: #00a3c4;
  --d-industry: #5c4ee5;

  /* 状态色 */
  --ok: #0e9f6e;
  --ok-wash: rgba(14, 159, 110, 0.09);
  --warn: #d97706;
  --warn-wash: rgba(217, 119, 6, 0.09);
  --off: #94a3b8;
  --off-wash: rgba(148, 163, 184, 0.14);

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;

  --shadow-card: 0 1px 2px rgba(12, 38, 90, 0.05), 0 2px 8px rgba(12, 38, 90, 0.045);
  --shadow-lift: 0 14px 34px rgba(12, 50, 140, 0.13), 0 2px 6px rgba(12, 50, 140, 0.06);
  --shadow-pop: 0 18px 44px rgba(9, 40, 110, 0.16);
  --shadow-drawer: -30px 0 60px rgba(9, 40, 110, 0.14);

  --font-display: "Sora", "IBM Plex Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "IBM Plex Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rail-w: 214px;
  --topbar-h: 58px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(880px 460px at 84% -14%, rgba(15, 98, 254, 0.13), transparent 68%),
    radial-gradient(720px 420px at 2% 6%, rgba(0, 163, 196, 0.1), transparent 66%),
    radial-gradient(620px 380px at 50% 108%, rgba(92, 78, 229, 0.08), transparent 70%),
    linear-gradient(to right, rgba(15, 98, 254, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 98, 254, 0.055) 1px, transparent 1px);
  background-size: auto, auto, auto, 56px 56px, 56px 56px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
}

button { font-family: inherit; }
input { font-family: inherit; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
svg.ic { width: 16px; height: 16px; flex: none; }