:root {
  --pc-font-body: 16px;
  --pc-font-control: 14px;
  --pc-font-caption: 12px;
  --page-inset: clamp(32px, 2.5vw, 48px);
  --site-width: min(1680px, calc(100vw - var(--page-inset) - var(--page-inset)));
  --header-width: var(--site-width);
  --pc-brand: #5d4cf1;
  --pc-brand-dark: #4f3de5;
  --pc-brand-soft: #f0efff;
  --pc-canvas: #fff;
  --pc-surface: #fbfcff;
  --pc-text: #171927;
  --pc-text-secondary: #667085;
  --pc-text-muted: #98a0b3;
  --pc-border: #e9ecf3;
  --pc-success: #31b987;
  --pc-warning: #f2a23a;
  --pc-danger: #ef6d68;
  --pc-sidebar-width: 207px;
  --pc-header-height: 60px;
  --pc-content-max: 100%;
  --pc-frame-width: var(--site-width);
  --pc-frame-gutter: max(var(--page-inset), calc((100vw - var(--site-width)) / 2));
  --pc-radius-sm: 6px;
  --pc-radius-md: 10px;
  --pc-radius-lg: 12px;
  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 12px;
  --pc-space-4: 16px;
  --pc-space-5: 20px;
  --pc-space-6: 24px;
  --pc-shadow-sm: 0 2px 10px rgba(25, 35, 70, .05);
  --pc-shadow-md: 0 10px 28px rgba(37, 47, 96, .10);
  --pc-brand-gradient: linear-gradient(105deg, #5d4cf1, #755cf7);
}

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

html { font-size: 16px; color: var(--pc-text); background: var(--pc-canvas); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }

body { margin: 0; background: #f5f6fa; font-size: var(--pc-font-body); line-height: 1.5; }

button, input, textarea, select { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

button { cursor: pointer; }

@media (max-width: 680px) {
  :root {
    --page-inset: 12px;
    --site-width: calc(100% - 24px);
    --header-width: var(--site-width);
  }
}