:root {
  /* Brand */
  --brand-1: #D32F2F; /* 对齐登录页红色 */
  --brand-2: #B71C1C;
  --brand-3: #FFB4AB;

  /* Typography */
  --font-ui: 'Zpix', monospace, sans-serif;

  /* Material Tokens (Light) */
  --md-bg: #FFFBFF;
  --md-surface: #FFFBFF;
  --md-surface-2: #fdf2f2;
  --md-text: #1F1B1B;
  --md-text-2: #534343;
  --md-text-3: #857373;
  --md-outline: rgba(133, 115, 115, 0.12);

  --md-brand: var(--brand-1);
  --md-brand-contrast: #ffffff;
  --md-brand-soft: rgba(211, 47, 47, 0.08);

  /* Elevation */
  --md-elev-1: 0 1px 3px rgba(0,0,0,0.08);
  --md-elev-2: 0 4px 12px rgba(0,0,0,0.08);
  --md-elev-nav: 0 -1px 6px rgba(0,0,0,0.04);

  /* Radius */
  --md-r-sm: 12px;
  --md-r-md: 16px;
  --md-r-lg: 24px; /* 对齐登录页 20-24px 圆角 */

  /* Motion */
  --md-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --md-dur-1: 120ms;
  --md-dur-2: 220ms;

  /* Glass / Gaussian Blur Tokens (统一玻璃拟态) */
  --md-glass-blur: 16px;
  --md-glass-sat: 1.25;
  --md-glass-bright: 1.05;
  --md-glass-bg: rgba(255, 255, 255, 0.68);
  --md-glass-border: color-mix(in srgb, var(--md-outline) 80%, transparent);
}

/* Material Tokens (Dark - Support manual toggle via data-theme) */
:root[data-theme="dark"] {
  --md-bg: #161212;
  --md-surface: #1b1717;
  --md-surface-2: #231d1d;
  --md-text: #EAE0DF;
  --md-text-2: rgba(234, 224, 223, 0.74);
  --md-text-3: rgba(234, 224, 223, 0.54);
  --md-outline: rgba(255, 255, 255, 0.08);

  --md-brand-soft: rgba(255, 180, 171, 0.12);

  --md-elev-1: 0 2px 10px rgba(0,0,0,0.45);
  --md-elev-2: 0 8px 30px rgba(0,0,0,0.55);
  --md-elev-nav: 0 -2px 12px rgba(0,0,0,0.50);

  /* Glass / Gaussian Blur Tokens (Dark) */
  --md-glass-blur: 16px;
  --md-glass-sat: 1.15;
  --md-glass-bright: 0.95;
  --md-glass-bg: rgba(27, 23, 23, 0.62);
  --md-glass-border: rgba(255, 255, 255, 0.10);
}

/* Material Tokens (Light - Support manual toggle via data-theme) */
:root[data-theme="light"] {
  --md-bg: #FFFBFF;
  --md-surface: #FFFBFF;
  --md-surface-2: #fdf2f2;
  --md-text: #1F1B1B;
  --md-text-2: #534343;
  --md-text-3: #857373;
  --md-outline: rgba(133, 115, 115, 0.12);

  --md-brand: var(--brand-1);
  --md-brand-contrast: #ffffff;
  --md-brand-soft: rgba(211, 47, 47, 0.08);

  --md-elev-1: 0 1px 3px rgba(0,0,0,0.08);
  --md-elev-2: 0 4px 12px rgba(0,0,0,0.08);
  --md-elev-nav: 0 -1px 6px rgba(0,0,0,0.04);

  --md-glass-bg: rgba(255, 255, 255, 0.68);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-bg: #161212;
    --md-surface: #1b1717;
    --md-surface-2: #231d1d;
    --md-text: #EAE0DF;
    --md-text-2: rgba(234, 224, 223, 0.74);
    --md-text-3: rgba(234, 224, 223, 0.54);
    --md-outline: rgba(255, 255, 255, 0.08);

    --md-brand-soft: rgba(255, 180, 171, 0.12);

    --md-elev-1: 0 2px 10px rgba(0,0,0,0.45);
    --md-elev-2: 0 8px 30px rgba(0,0,0,0.55);
    --md-elev-nav: 0 -2px 12px rgba(0,0,0,0.50);

    /* Glass / Gaussian Blur Tokens (Dark) */
    --md-glass-blur: 16px;
    --md-glass-sat: 1.15;
    --md-glass-bright: 0.95;
    --md-glass-bg: rgba(27, 23, 23, 0.62);
    --md-glass-border: rgba(255, 255, 255, 0.10);
  }
}

/* 通用玻璃拟态：用于需要统一高斯模糊的组件（导航栏/卡片/浮层等） */
.md-glass {
  background: var(--md-glass-bg);
  border: 1px solid var(--md-glass-border);
  backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
  -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .md-glass {
    background: color-mix(in srgb, var(--md-glass-bg) 92%, var(--md-surface));
  }
}

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--md-text);
  /* 对齐登录页的高级渐变背景 */
  background:
    radial-gradient(900px 520px at 15% 10%, color-mix(in srgb, var(--brand-1) 10%, transparent) 0%, transparent 58%),
    radial-gradient(760px 480px at 88% 20%, color-mix(in srgb, var(--brand-1) 8%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,
        color-mix(in srgb, var(--md-surface) 92%, #ffffff) 0%,
        color-mix(in srgb, var(--md-surface) 92%, var(--brand-1) 3%) 100%
    ) !important;
  background-attachment: fixed !important;
}

/* 让粒子只处于背景层：建立 stacking context，内容层覆盖粒子 */
body {
  position: relative;
}

body > :not(#bg-particles):not(script):not(.bottom-nav):not(#splash-screen):not(.splash) {
  position: relative;
  z-index: 1;
}

#bg-particles {
  z-index: 0;
}