:root{--bg-primary: #fdfbf7;--bg-secondary: #f3f0ff;--accent-blue: #dbeafe;--accent-pink: #fce7f3;--accent-purple: #e9d5ff;--accent-green: #d1fae5;--text-primary: #1f2937;--text-secondary: #4b5563;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .5);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--font-main: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--shadow-lg)}.btn-primary{background:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 100%);color:#fff;padding:12px 24px;border-radius:99px;font-weight:600;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:white;color:var(--text-primary);padding:10px 20px;border-radius:99px;font-weight:500;border:1px solid #e5e7eb;transition:all .2s}.btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}.icon-btn{padding:12px;border-radius:50%;background:white;color:var(--text-secondary);box-shadow:var(--shadow-sm);transition:all .2s;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#f3f4f6;transform:scale(1.05)}.icon-btn.active{background:var(--accent-purple);color:#6b21a8}