:root {
  color-scheme: light;

  --pangu-bg: #ffffff;
  --pangu-surface: #ffffff;
  --pangu-surface-sunken: #fcfcfd;
  --pangu-bg-hover: rgba(27, 36, 51, 0.05);
  --pangu-overlay: rgba(15, 23, 42, 0.45);

  --pangu-text: #1d1d1f;
  --pangu-text-2: #6e6e73;
  --pangu-text-3: #86868b;
  --pangu-content-strong: #16202c;
  --pangu-content-secondary: #5b6572;
  --pangu-content-muted: #939ba8;
  --pangu-text-on-brand: #ffffff;

  --pangu-border: rgba(15, 23, 42, 0.08);
  --pangu-border-strong: rgba(15, 23, 42, 0.18);

  --pangu-brand: #0071e3;
  --pangu-brand-hover: #0062c4;
  --pangu-brand-soft: #edf6ff;
  --pangu-brand-ink: #0058be;

  --pangu-success: #248a3d;
  --pangu-success-soft: #eef9f0;
  --pangu-success-ink: #0f7038;
  --pangu-warning: #9a6700;
  --pangu-warning-soft: #fff8e6;
  --pangu-warning-ink: #92400e;
  --pangu-danger: #d70015;
  --pangu-danger-soft: #fff0f1;
  --pangu-danger-ink: #991b1b;
  --pangu-security-surface: #ffffff;
  --pangu-security-border: #fecaca;
  --pangu-security-icon-surface: #fef2f2;
  --pangu-security-ink: #991b1b;
  --pangu-security-icon-ink: #b42318;
  --pangu-info: #0071e3;
  --pangu-info-soft: #edf6ff;
  --pangu-info-ink: #0058be;
  --pangu-info-border: #dbeafe;
  --pangu-info-panel: linear-gradient(158deg, #eff6ff 0%, #e0edff 52%, #dbe7ff 100%);
  --pangu-accent-violet: #7c3aed;
  --pangu-accent-violet-soft: #f3efff;
  --pangu-accent-rose: #e11d48;
  --pangu-accent-rose-soft: #fff0f3;
  --pangu-accent-teal: #0f766e;
  --pangu-accent-teal-soft: #e8faf6;
  --pangu-accent-amber: #b45309;
  --pangu-accent-amber-soft: #fff7df;
  --pangu-accent: #0f9f8f;
  --pangu-accent-alt: #14b8a6;
  --pangu-info-hover: #2f8bff;

  --pangu-shadow: none;
  --pangu-shadow-h: none;
  --pangu-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --pangu-material-glass: rgba(255, 255, 255, 0.66);
  --pangu-material-glass-edge: rgba(255, 255, 255, 0.72);
  --pangu-material-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 34%);
  --pangu-material-inset-shadow: inset 0 1.5px 4px rgba(22, 32, 44, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  --pangu-material-raise-shadow: 0 1px 1px rgba(16, 32, 48, 0.035), 0 10px 28px -14px rgba(22, 32, 44, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --pangu-material-raise-hover-shadow: 0 2px 3px rgba(16, 32, 48, 0.04), 0 18px 40px -16px rgba(22, 32, 44, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --pangu-material-field: rgba(247, 249, 251, 0.78);
  --pangu-material-inset-panel: rgba(246, 249, 251, 0.55);
  --pangu-material-button: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 246, 249, 0.88));
  --pangu-material-avatar: linear-gradient(160deg, #14b8a6, #0f9f8f);
  --pangu-material-primary: linear-gradient(180deg, #2f8bff 0%, #0071e3 100%);
  --pangu-material-icon: linear-gradient(180deg, rgba(232, 250, 247, 0.95), rgba(215, 244, 239, 0.85));
  --pangu-material-blur: saturate(180%) blur(26px);

  /* ==========================================================================
     收敛后统一设计阶梯：字号 ≤ 8 档，圆角 ≤ 5 档，间距 4/8/12/16/24/32
     ========================================================================== */
  /* 圆角阶梯 (收敛至 5 档) */
  --pangu-radius-xs: 6px;       /* 徽标、微型标签、Tooltips */
  --pangu-radius-sm: 10px;      /* 按钮、输入框、下拉单、标签页 */
  --pangu-radius-md: 14px;      /* 标准卡片、提示浮岛、列表项 */
  --pangu-radius-lg: 20px;      /* 大面板、标准弹窗容器 */
  --pangu-radius-full: 9999px;  /* 胶囊药丸、圆形头像 */

  /* 兼容历史别名映射 */
  --pangu-radius: var(--pangu-radius-lg);
  --pangu-radius-xl: var(--pangu-radius-lg);
  --pangu-radius-2xl: var(--pangu-radius-lg);
  --pangu-radius-avatar: var(--pangu-radius-full);

  /* 间距阶梯 (收敛至 6 档: 4/8/12/16/24/32) */
  --pangu-space-1: 4px;
  --pangu-space-2: 8px;
  --pangu-space-3: 12px;
  --pangu-space-4: 16px;
  --pangu-space-5: 24px;
  --pangu-space-6: 32px;

  /* 字号阶梯 (收敛至 7 档，相邻档位差异清晰一眼可辨) */
  --pangu-fs-xs: 12px;          /* 辅助说明、微型时间戳、代码标签 */
  --pangu-fs-sm: 14px;          /* 标准正文、表单文本、表格单元格 */
  --pangu-fs-body: 14px;        /* 正文字号别名 */
  --pangu-fs-md: 16px;          /* 卡片标题、菜单强调项、大按钮 */
  --pangu-fs-lg: 20px;          /* 面板标题、区域大标题 */
  --pangu-fs-xl: 24px;          /* 页面一级主标题 (Page Title) */
  --pangu-fs-2xl: 30px;         /* 重点展示标题、引导大字 */
  --pangu-fs-metric: 38px;      /* 核心金额、关键数字指标 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  --pangu-bg: #080e1a;
  --pangu-surface: #121a2b;
  --pangu-surface-sunken: #0d1422;
  --pangu-bg-hover: rgba(255, 255, 255, 0.06);
  --pangu-overlay: rgba(0, 0, 0, 0.62);

  --pangu-text: #f8fafc;
  --pangu-text-2: #a8b3c2;
  --pangu-text-3: #8b95a3;
  --pangu-content-strong: #f8fafc;
  --pangu-content-secondary: #a8b3c2;
  --pangu-content-muted: #8b95a3;
  --pangu-text-on-brand: #06121c;

  --pangu-border: rgba(255, 255, 255, 0.08);
  --pangu-border-strong: rgba(255, 255, 255, 0.18);

  --pangu-brand: #38bdf8;
  --pangu-brand-hover: #7dd3fc;
  --pangu-brand-soft: rgba(56, 189, 248, 0.12);
  --pangu-brand-ink: #9fdfff;

  --pangu-success: #34c759;
  --pangu-success-soft: rgba(52, 199, 89, 0.15);
  --pangu-success-ink: #7ee2ab;
  --pangu-warning: #f59e0b;
  --pangu-warning-soft: rgba(245, 158, 11, 0.15);
  --pangu-warning-ink: #f5c98a;
  --pangu-danger: #ef4444;
  --pangu-danger-soft: rgba(239, 68, 68, 0.15);
  --pangu-danger-ink: #ffb3ac;
  --pangu-security-surface: rgba(239, 68, 68, 0.15);
  --pangu-security-border: #ef4444;
  --pangu-security-icon-surface: rgba(239, 68, 68, 0.15);
  --pangu-security-ink: #ffb3ac;
  --pangu-security-icon-ink: #ffb3ac;
  --pangu-info: #38bdf8;
  --pangu-info-soft: rgba(56, 189, 248, 0.15);
  --pangu-info-ink: #9fdfff;
  --pangu-info-border: rgba(56, 189, 248, 0.38);
  --pangu-info-panel: rgba(56, 189, 248, 0.15);
  --pangu-accent-violet: #a78bfa;
  --pangu-accent-violet-soft: rgba(167, 139, 250, 0.14);
  --pangu-accent-rose: #fb7185;
  --pangu-accent-rose-soft: rgba(251, 113, 133, 0.14);
  --pangu-accent-teal: #5eead4;
  --pangu-accent-teal-soft: rgba(94, 234, 212, 0.13);
  --pangu-accent-amber: #fbbf24;
  --pangu-accent-amber-soft: rgba(251, 191, 36, 0.14);
  --pangu-accent: #5eead4;
  --pangu-accent-alt: #2dd4bf;
  --pangu-info-hover: #7cc2ff;

  --pangu-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --pangu-shadow-h: 0 12px 36px rgba(0, 0, 0, 0.45);
  --pangu-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.35);
  --pangu-material-glass: rgba(18, 26, 43, 0.78);
  --pangu-material-glass-edge: rgba(255, 255, 255, 0.1);
  --pangu-material-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%);
  --pangu-material-inset-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --pangu-material-raise-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 12px 30px -14px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --pangu-material-raise-hover-shadow: 0 2px 3px rgba(0, 0, 0, 0.26), 0 18px 42px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --pangu-material-field: rgba(8, 14, 26, 0.72);
  --pangu-material-inset-panel: rgba(8, 14, 26, 0.52);
  --pangu-material-button: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(18, 26, 43, 0.9));
  --pangu-material-avatar: linear-gradient(160deg, #5eead4, #0f9f8f);
  --pangu-material-primary: linear-gradient(180deg, #4aa8ff 0%, #0071e3 100%);
  --pangu-material-icon: linear-gradient(180deg, rgba(94, 234, 212, 0.16), rgba(15, 159, 143, 0.1));
  --pangu-material-blur: saturate(150%) blur(26px);

  }
}

:root.portal-theme-dark,
html.portal-theme-dark,
html.dark,
:root[data-theme="dark"] {
  color-scheme: dark;

  --pangu-bg: #080e1a;
  --pangu-surface: #121a2b;
  --pangu-surface-sunken: #0d1422;
  --pangu-bg-hover: rgba(255, 255, 255, 0.06);
  --pangu-overlay: rgba(0, 0, 0, 0.62);

  --pangu-text: #f8fafc;
  --pangu-text-2: #a8b3c2;
  --pangu-text-3: #8b95a3;
  --pangu-content-strong: #f8fafc;
  --pangu-content-secondary: #a8b3c2;
  --pangu-content-muted: #8b95a3;
  --pangu-text-on-brand: #06121c;

  --pangu-border: rgba(255, 255, 255, 0.08);
  --pangu-border-strong: rgba(255, 255, 255, 0.18);

  --pangu-brand: #38bdf8;
  --pangu-brand-hover: #7dd3fc;
  --pangu-brand-soft: rgba(56, 189, 248, 0.12);
  --pangu-brand-ink: #9fdfff;

  --pangu-success: #34c759;
  --pangu-success-soft: rgba(52, 199, 89, 0.15);
  --pangu-success-ink: #7ee2ab;
  --pangu-warning: #f59e0b;
  --pangu-warning-soft: rgba(245, 158, 11, 0.15);
  --pangu-warning-ink: #f5c98a;
  --pangu-danger: #ef4444;
  --pangu-danger-soft: rgba(239, 68, 68, 0.15);
  --pangu-danger-ink: #ffb3ac;
  --pangu-security-surface: rgba(239, 68, 68, 0.15);
  --pangu-security-border: #ef4444;
  --pangu-security-icon-surface: rgba(239, 68, 68, 0.15);
  --pangu-security-ink: #ffb3ac;
  --pangu-security-icon-ink: #ffb3ac;
  --pangu-info: #38bdf8;
  --pangu-info-soft: rgba(56, 189, 248, 0.15);
  --pangu-info-ink: #9fdfff;
  --pangu-info-border: rgba(56, 189, 248, 0.38);
  --pangu-info-panel: rgba(56, 189, 248, 0.15);
  --pangu-accent-violet: #a78bfa;
  --pangu-accent-violet-soft: rgba(167, 139, 250, 0.14);
  --pangu-accent-rose: #fb7185;
  --pangu-accent-rose-soft: rgba(251, 113, 133, 0.14);
  --pangu-accent-teal: #5eead4;
  --pangu-accent-teal-soft: rgba(94, 234, 212, 0.13);
  --pangu-accent-amber: #fbbf24;
  --pangu-accent-amber-soft: rgba(251, 191, 36, 0.14);
  --pangu-accent: #5eead4;
  --pangu-accent-alt: #2dd4bf;
  --pangu-info-hover: #7cc2ff;

  --pangu-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --pangu-shadow-h: 0 12px 36px rgba(0, 0, 0, 0.45);
  --pangu-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.35);
  --pangu-material-glass: rgba(18, 26, 43, 0.78);
  --pangu-material-glass-edge: rgba(255, 255, 255, 0.1);
  --pangu-material-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%);
  --pangu-material-inset-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --pangu-material-raise-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 12px 30px -14px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --pangu-material-raise-hover-shadow: 0 2px 3px rgba(0, 0, 0, 0.26), 0 18px 42px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --pangu-material-field: rgba(8, 14, 26, 0.72);
  --pangu-material-inset-panel: rgba(8, 14, 26, 0.52);
  --pangu-material-button: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(18, 26, 43, 0.9));
  --pangu-material-avatar: linear-gradient(160deg, #5eead4, #0f9f8f);
  --pangu-material-primary: linear-gradient(180deg, #4aa8ff 0%, #0071e3 100%);
  --pangu-material-icon: linear-gradient(180deg, rgba(94, 234, 212, 0.16), rgba(15, 159, 143, 0.1));
  --pangu-material-blur: saturate(150%) blur(26px);
}