/* ==========================================================================
   NCP服务器 · 设计令牌 / 基础重置 / 排版 / 布局
   苹果式极简：大量留白、克制配色、柔和阴影、圆角与毛玻璃
   ========================================================================== */

:root {
  /* 色彩 · 浅色 */
  --bg: #f5f5f7;
  --bg-deep: #ececf0;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.55);
  --surface-hover: rgba(0, 0, 0, 0.035);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --accent-2: #5e5ce6;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --yellow: #ffcc00;
  --purple: #af52de;
  --teal: #32ade6;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 44px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 30px 70px rgba(0, 0, 0, 0.18);
  --glow: 0 0 0 4px rgba(0, 113, 227, 0.16);
  --glass-blur: saturate(180%) blur(20px);

  /* Nova 交互层：只从既有色值派生，不新增硬编码颜色 */
  --surface-elevated: #ffffff;
  --accent-glow: 0 0 0 6px rgba(0, 113, 227, 0.16);
  --accent-line: rgba(0, 113, 227, 0.42);

  /* 圆角 */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;
  --r-pill: 999px;

  /* 动效曲线 */
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-soft: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* 尺寸 */
  --nav-h: 54px;
  --page-max: 1120px;
  --gap: 22px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro SC", "SF Pro Text",
    "PingFang SC", "HarmonyOS Sans SC", "Helvetica Neue", "Microsoft YaHei UI", "Microsoft YaHei",
    system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  --bg: #000000;
  --bg-deep: #0a0a0c;
  --surface: rgba(28, 28, 30, 0.72);
  --surface-solid: #1c1c1e;
  --surface-2: rgba(44, 44, 46, 0.5);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #8e8e93;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.22);
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --surface-elevated: #242426;
  --accent-glow: 0 0 0 6px rgba(10, 132, 255, 0.22);
  --accent-line: rgba(10, 132, 255, 0.5);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.5), 0 22px 50px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 40px 90px rgba(0, 0, 0, 0.7);
}

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

/* 不做全局平滑滚动：滚轮/PageDown 会跟着变成过渡滚动，手感发黏；
   需要平滑的跳转由代码显式传 behavior: 'smooth'。 */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -0.022em; line-height: 1.15; }
h1 { font-size: clamp(34px, 5.4vw, 62px); }
h2 { font-size: clamp(24px, 3.2vw, 36px); }
h3 { font-size: 20px; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent-soft); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* ------------------------------------------------------------------ 布局 */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 22px 120px;
  flex: 1;
}

.page-head { padding: 46px 0 26px; }
.page-head .eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.page-head p.lede { margin-top: 12px; font-size: 17px; color: var(--text-2); max-width: 62ch; }
.page-head .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.section { margin-top: 54px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head h2 { font-size: 26px; }
.section-head .sub { color: var(--text-2); font-size: 14px; margin-top: 4px; }

.grid { display: grid; gap: var(--gap); }
.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-auto { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.center { text-align: center; }
.right { text-align: right; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.divider { height: 1px; background: var(--line); border: 0; margin: 18px 0; }
.tiny { font-size: 12px; }
.small { font-size: 13px; }
.strong { font-weight: 620; }

/* 渐变文字 */
.grad-text {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 45%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%;
  animation: gradientShift 14s ease-in-out infinite;
}

/* 背景装饰光斑
   用 radial-gradient 画出「虚边」而不是 filter: blur()：
   这些光斑固定在视口里并且一直在动，blur 滤镜会让浏览器每帧重新模糊几百像素的图层，
   滚轮滚动时最容易掉帧。渐变边缘几乎看不出差别，但开销接近于零。 */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i {
  position: absolute; display: block; border-radius: 50%; opacity: 0.9;
  animation: floatSlow 22s ease-in-out infinite;
  will-change: transform;
}
.aurora i:nth-child(1) {
  width: 640px; height: 640px; left: -200px; top: -220px;
  background: radial-gradient(closest-side, rgba(0, 113, 227, 0.26), rgba(0, 113, 227, 0));
}
.aurora i:nth-child(2) {
  width: 540px; height: 540px; right: -170px; top: 60px;
  background: radial-gradient(closest-side, rgba(175, 82, 222, 0.2), rgba(175, 82, 222, 0));
  animation-delay: -6s;
}
.aurora i:nth-child(3) {
  width: 600px; height: 600px; left: 28%; bottom: -280px;
  background: radial-gradient(closest-side, rgba(50, 173, 230, 0.18), rgba(50, 173, 230, 0));
  animation-delay: -12s;
}
html[data-theme="dark"] .aurora i { opacity: 0.5; }

/* 响应式 */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3 { grid-column: span 2; }
}
@media (max-width: 720px) {
  :root { --gap: 16px; --r-xl: 24px; }
  .grid-2, .grid-3, .grid-auto { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2, .span-3 { grid-column: span 1; }
  .page { padding: 0 16px 96px; }
  .page-head { padding: 30px 0 18px; }
  .section { margin-top: 40px; }
  .stat .v { font-size: 26px; }
}