:root {
  color-scheme: dark;
  --bg-canvas: #0B0D14;
  --bg-canvas-alt: #0E1019;
  --bg-sidebar: #10131F;
  --bg-topbar: #0D0F17;
  --surface-1: #151827;
  --surface-2: #1A1E2F;
  --surface-3: #20253A;
  --surface-hover: #252A42;

  --text-primary: #F6F7FB;
  --text-secondary: #B7BCD0;
  --text-tertiary: #858CA7;
  --text-disabled: #5E647A;

  --brand-300: #C4B5FD;
  --brand-400: #A78BFA;
  --brand-500: #8B5CF6;
  --brand-600: #7C3AED;

  --success: #3DDC84;
  --warning: #F6C453;
  --danger: #FF5D68;
  --info: #6DA8FF;

  --border-subtle: rgba(139,148,180,.18);
  --border-default: rgba(139,148,180,.28);
  --border-strong: rgba(157,166,201,.42);
  --border-accent: rgba(139,92,246,.68);

  --gradient-primary: linear-gradient(135deg,#6D28D9 0%,#8B5CF6 55%,#A855F7 100%);
  --gradient-active: linear-gradient(180deg,rgba(124,58,237,.52),rgba(98,44,195,.36));

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  --shadow-card: 0 12px 32px rgba(0,0,0,.22);
  --shadow-accent: 0 0 0 1px rgba(139,92,246,.38), 0 8px 30px rgba(124,58,237,.22);
  --shadow-button: 0 0 22px rgba(139,92,246,.40);

  /* Page-specific topbar heights are frozen in reference-frame-geometry.json. */
  --page-gap: 18px;
  --page-pad-x: 24px;
  --page-pad-y: 18px;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 72% 12%, rgba(124,58,237,.08), transparent 32%),
    var(--bg-canvas);
  color: var(--text-primary);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ui-card {
  background: linear-gradient(180deg, rgba(31,35,54,.92), rgba(20,23,37,.96));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.ui-glass {
  background: rgba(22,25,40,.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-default);
}

.ui-button-primary {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(190,160,255,.34);
  border-radius: 10px;
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-button);
}

.ui-button-secondary {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: rgba(28,32,49,.84);
  color: var(--text-primary);
}

.ui-active {
  background: var(--gradient-active);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-accent);
}