:root {
    --background: #f8fafc;
    --surface: #f8fafc;
    --surface-container-low: #f1f5f9;
    --surface-container: #e2e8f0;
    --surface-container-highest: #cbd5e1;
    --surface-container-lowest: #ffffff;
    --on-surface: #0f172a;
    --on-surface-variant: #475569;
    --outline-variant: rgba(71, 85, 105, 0.2);
    --secondary: #4cd7f6;
    --secondary-container: #03b5d3;
    --on-secondary-fixed: #001f26;
    --tertiary: #d0bcff;
    --on-background: #0f172a;
    --primary-container: #f1f5f9;
}
.dark {
    --background: #0b1326;
    --surface: #0b1326;
    --surface-container-low: #131b2e;
    --surface-container: #171f33;
    --surface-container-highest: #2d3449;
    --surface-container-lowest: #060e20;
    --on-surface: #dae2fd;
    --on-surface-variant: #c6c6cd;
    --outline-variant: rgba(69, 70, 77, 0.15);
    --on-background: #dae2fd;
    --primary-container: #0f172a;
}
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-panel { background: rgba(var(--surface-rgb, 11, 19, 38), 0.6); backdrop-filter: blur(20px); }
.hero-gradient { background: linear-gradient(135deg, #4cd7f6 0%, #03b5d3 100%); }
.text-glow { text-shadow: 0 0 15px rgba(76, 215, 246, 0.3); }
.ghost-border { border: 1px solid var(--outline-variant); }
.ai-pulse { box-shadow: 0 0 15px rgba(208, 188, 255, 0.4); animation: pulse-glow 2s infinite; }
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(208, 188, 255, 0.4); }
    50% { box-shadow: 0 0 25px rgba(208, 188, 255, 0.7); }
}