:root{--bg-hue: 240;--bg-sat: 20%;--bg-lit: 10%;--color-bg: hsl(var(--bg-hue), var(--bg-sat), var(--bg-lit));--color-surface: hsl(var(--bg-hue), 15%, 18%);--color-primary: hsl(265, 80%, 60%);--color-primary-glow: hsl(265, 80%, 60%, .5);--color-text: hsl(0, 0%, 95%);--color-text-main: var(--color-text);--color-text-muted: hsl(240, 10%, 70%);--color-warning: #fbbf24;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--glass-button-bg: rgba(255, 255, 255, .1);--glass-button-hover: rgba(255, 255, 255, .2);--glass-button-border: rgba(255, 255, 255, .2);--glass-input-bg: rgba(0, 0, 0, .2);--glass-input-focus: rgba(0, 0, 0, .4);--glass-highlight: rgba(255, 255, 255, .05);--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;--font-sans: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--gradient-text-start: #fff;--gradient-text-end: #a5b4fc}:root.light{--bg-hue: 240;--bg-sat: 20%;--bg-lit: 98%;--color-bg: #f3f4f6;--color-surface: #ffffff;--color-primary: hsl(265, 70%, 55%);--color-primary-glow: hsl(265, 70%, 55%, .3);--color-text: #1f2937;--color-text-main: var(--color-text);--color-text-muted: #6b7280;--color-warning: #d97706;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(0, 0, 0, .1);--glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--glass-button-bg: rgba(0, 0, 0, .05);--glass-button-hover: rgba(0, 0, 0, .1);--glass-button-border: rgba(0, 0, 0, .1);--glass-input-bg: rgba(255, 255, 255, .8);--glass-input-focus: rgba(255, 255, 255, 1);--glass-highlight: rgba(0, 0, 0, .05);--gradient-text-start: #4c1d95;--gradient-text-end: #1d4ed8}body{margin:0;font-family:var(--font-sans);background-color:var(--color-bg);background-image:radial-gradient(circle at 15% 50%,rgba(76,29,149,.15),transparent 25%),radial-gradient(circle at 85% 30%,rgba(29,78,216,.15),transparent 25%);color:var(--color-text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease;overflow-x:hidden}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-lg)}.glass-button{background:var(--glass-button-bg);border:1px solid var(--glass-button-border);color:var(--color-text);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .25s ease;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.glass-button:hover{background:var(--glass-button-hover);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.glass-button:active{transform:translateY(0)}.glass-input{background:var(--glass-input-bg);border:1px solid var(--glass-border);color:var(--color-text);padding:.8rem 1rem;border-radius:var(--radius-md);width:100%;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.glass-input:focus{outline:none;border-color:var(--color-primary);background:var(--glass-input-focus)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-button-bg);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--glass-button-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .5s ease-out}.animate-slide-up{animation:slideUp .5s ease-out forwards}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%;box-sizing:border-box}@media(max-width:600px){.container{padding:1rem}}.grid-matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}@media(max-width:768px){.grid-matrix{grid-template-columns:1fr;gap:1rem}}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em}h1{font-size:2.5rem;background:linear-gradient(to right,var(--gradient-text-start),var(--gradient-text-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}