/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;800&display=swap');
/* ── Design Tokens ── */
:root { --color-primary: #7B00D4; --color-primary-hover: #6200A8; --color-primary-light: #F8F0FF; --color-primary-glow: rgba(123, 0, 212, 0.2); --color-gradient-accent: linear-gradient(135deg, #7B00D4 0%, #B44DFF 100%); --color-surface-base: #FFFFFF; --color-surface-section: #FAFAFA; --color-surface-input: #F3F3F5; --color-border: #E5E5EA; --color-border-subtle: #F3F3F5; --color-text-primary: #1A1622; --color-text-secondary: #555555; --color-text-tertiary: #8E8E93; --color-success: #00C853; --color-warning: #FF9500; --color-error: #FF3B30; --color-info: #007AFF; --radius-button: 12px; --radius-card: 16px; --radius-input: 10px; --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Plus Jakarta Sans', 'DM Sans', sans-serif; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-button: 0 2px 8px rgba(123, 0, 212, 0.18); --shadow-button-hover: 0 6px 20px rgba(123, 0, 212, 0.25); --shadow-float: 0 12px 32px rgba(123, 0, 212, 0.12) }
/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
/* Paint the canvas before page CSS arrives so navigation does not flash white. */
html { background: var(--color-surface-section) }
/* ── Base ── */
body { font-family: var(--font-ui); background: var(--color-surface-section); color: var(--color-text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
[hidden] { display: none !important }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
/* Host pages set this on <html> (plus an inline style) so the host chrome cannot paint before auth-guard.js finishes. */
html.pdj-auth-gate { visibility: hidden !important }