:root {
  --bg: #f6f4ef;
  --ink: #1d1c1a;
  --muted: #6b6a64;
  --panel: #ffffff;
  --line: #e6e0d7;
  --accent: #0f766e;
  --accent-2: #f59e0b;
  --theme-rgb: 124, 58, 237;
  --theme-secondary-rgb: 219, 39, 119;
  --theme-ring: conic-gradient(from 0deg, rgba(var(--theme-rgb), 0.2), rgba(var(--theme-secondary-rgb), 0.46), rgba(14, 165, 233, 0.28), rgba(var(--theme-rgb), 0.2));
  --theme-gradient: linear-gradient(135deg, #A78BFA 0%, #7C3AED 52%, #DB2777 100%);
  --theme-soft-gradient: linear-gradient(135deg, rgba(167, 139, 250, 0.92) 0%, rgba(124, 58, 237, 0.94) 100%);
  --theme-dialog-gradient: linear-gradient(180deg, rgba(84, 35, 174, 0.96) 0%, rgba(59, 20, 122, 0.96) 100%);
  --theme-title-gradient: linear-gradient(135deg, #5B3ADF 0%, #7C3AED 45%, #DB2777 100%);
  --shadow: 0 10px 30px rgba(23, 23, 23, 0.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html {
  background:
    radial-gradient(56rem 40rem at -6% -10%, rgba(var(--theme-rgb), 0.22) 0%, rgba(var(--theme-rgb), 0.08) 34%, transparent 62%),
    radial-gradient(44rem 32rem at 104% 8%, rgba(var(--theme-secondary-rgb), 0.18) 0%, rgba(var(--theme-secondary-rgb), 0.08) 36%, transparent 66%),
    radial-gradient(34rem 28rem at 84% 72%, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.06) 38%, transparent 70%),
    radial-gradient(32rem 26rem at 8% 82%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.05) 36%, transparent 68%),
    var(--clay-canvas);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body {
  font-family: "Space Grotesk","Segoe UI",Arial,sans-serif;
  margin: 24px;
  color: var(--ink);
  background: transparent;
}
.wrap { max-width: 1280px; margin: 0 auto; }