/* ==========================================================================
   NROMS · 基础样式与设计令牌 (Design Tokens)
   网络资源与运维管理平台 · 合同编号 XZK-XS-2026-023
   视觉主题：深海青蓝 · 玻璃质感运维指挥台
   ========================================================================== */

:root {
  /* 品牌主色 —— 电光青蓝 */
  --c-primary: #0891b2;
  --c-primary-700: #0e7490;
  --c-primary-600: #0891b2;
  --c-primary-500: #06b6d4;
  --c-primary-400: #22d3ee;
  --c-primary-300: #67e8f9;
  --c-primary-100: #cffafe;
  --c-primary-50: #ecfeff;

  /* 强调色 —— 靛紫（用于模块区分） */
  --c-accent: #6366f1;
  --c-accent-100: #e0e7ff;

  /* 语义色 */
  --c-success: #059669;
  --c-success-100: #10b981;
  --c-success-bg: #d1fae5;
  --c-warning: #d97706;
  --c-warning-100: #f59e0b;
  --c-warning-bg: #fef3c7;
  --c-danger: #e11d48;
  --c-danger-100: #f43f5e;
  --c-danger-bg: #ffe4e6;
  --c-info: #0284c7;
  --c-info-100: #0ea5e9;
  --c-info-bg: #e0f2fe;
  --c-purple: #7c3aed;
  --c-purple-100: #a78bfa;
  --c-purple-bg: #ede9fe;
  --c-neutral: #64748b;
  --c-neutral-bg: #f1f5f9;

  /* 中性色 —— 冷调蓝灰 */
  --c-bg: #eef2f7;
  --c-bg-grad: radial-gradient(1200px 600px at 12% -10%, #dbeafe 0%, transparent 60%),
               radial-gradient(1000px 520px at 96% 0%, #cffafe 0%, transparent 55%);
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-surface-glass: rgba(255, 255, 255, .72);
  --c-border: #e2e8f0;
  --c-border-strong: #cbd5e1;
  --c-text: #0f1e33;
  --c-text-2: #48607f;
  --c-text-3: #93a4bd;
  --c-text-inv: #f8fafc;

  /* 侧边栏（深海渐变 + 发光激活） */
  --c-nav-bg: #081525;
  --c-nav-bg-2: #0d2138;
  --c-nav-bg-3: #12304d;
  --c-nav-text: #9fb6d4;
  --c-nav-text-active: #ffffff;
  --c-nav-hover: rgba(34, 211, 238, .10);
  --c-nav-active: #22d3ee;

  /* 圆角 —— 大圆角软质感 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* 阴影 —— 分层柔和投影 */
  --sh-1: 0 1px 2px rgba(13, 33, 56, .06);
  --sh-2: 0 2px 6px rgba(13, 33, 56, .07), 0 1px 2px rgba(13, 33, 56, .04);
  --sh-3: 0 8px 20px rgba(13, 33, 56, .09);
  --sh-4: 0 16px 38px rgba(13, 33, 56, .13);
  --sh-5: 0 28px 68px rgba(13, 33, 56, .20);
  --sh-glow: 0 0 0 1px rgba(34, 211, 238, .28), 0 8px 24px rgba(8, 145, 178, .18);

  /* 尺寸 */
  --h-topbar: 60px;
  --h-tabbar: 0px;
  --w-sidebar: 244px;
  --w-sidebar-collapsed: 66px;

  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  /* 品牌渐变 */
  --grad-brand: linear-gradient(135deg, #06b6d4 0%, #3b82f6 55%, #6366f1 100%);
  --grad-sidebar: linear-gradient(175deg, #0b1c31 0%, #081525 45%, #061220 100%);
  --grad-surface: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);

  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

img, svg, canvas { display: block; max-width: 100%; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

code, pre, kbd { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c7d0dd;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #9aa7ba; background-clip: content-box; }

/* ---------- 排版工具类 ---------- */
.t-xs { font-size: 12px; }
.t-sm { font-size: 13px; }
.t-lg { font-size: 16px; }
.t-xl { font-size: 20px; }
.t-2xl { font-size: 26px; }
.t-muted { color: var(--c-text-3); }
.t-sub { color: var(--c-text-2); }
.t-bold { font-weight: 600; }
.t-heavy { font-weight: 700; }
.t-mono { font-family: var(--font-mono); font-size: 12.5px; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-nowrap { white-space: nowrap; }
.t-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-danger { color: var(--c-danger); }
.t-success { color: var(--c-success); }
.t-warning { color: var(--c-warning); }
.t-primary { color: var(--c-primary); }

/* ---------- 布局工具类 ---------- */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.center { align-items: center; }
.between { justify-content: space-between; }
.around { justify-content: space-around; }
.end { justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink0 { flex-shrink: 0; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; }
.g12 { gap: 12px; } .g16 { gap: 16px; } .g20 { gap: 20px; } .g24 { gap: 24px; }

.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
.mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; } .mb20 { margin-bottom: 20px; } .mb24 { margin-bottom: 24px; }
.ml8 { margin-left: 8px; } .ml16 { margin-left: 16px; } .mr8 { margin-right: 8px; }

.hidden { display: none !important; }
.pointer { cursor: pointer; }
.relative { position: relative; }

/* ---------- 网格 ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 1400px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* ---------- 动画 ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }