@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg:#0c0c0f;--surface-1:#161619;--surface-2:#1f1f24;--surface-3:#27272d;--border:#2d2d35;--border-light:#3d3d48;--primary:#7c3aed;--primary-hover:#6d28d9;--primary-light:#7c3aed26;--primary-glow:#7c3aed66;--success:#10b981;--success-light:#10b98126;--warning:#f59e0b;--warning-light:#f59e0b26;--error:#ef4444;--error-light:#ef444426;--text:#f0f0f5;--text-muted:#8888a0;--text-dim:#555568;--xp-color:#f59e0b;--streak-color:#f97316;--level-color:#a78bfa;--radius:8px;--radius-lg:12px;--radius-xl:16px;--font:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-size:15px;line-height:1.6}img,video{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font);background:0 0;border:none}input,textarea,select{font-family:var(--font)}ul,ol{list-style:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--surface-1)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.btn{border-radius:var(--radius);white-space:nowrap;cursor:pointer;border:1px solid #0000;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;line-height:1;transition:all .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 0 20px var(--primary-glow)}.btn-ghost{color:var(--text-muted);border-color:var(--border);background:0 0}.btn-ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-light)}.btn-success{background:var(--success);color:#fff;border-color:var(--success)}.btn-success:hover{background:#0da271;box-shadow:0 0 20px #10b98166}.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:14px 28px;font-size:16px}.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:border-color .15s}.card:hover{border-color:var(--border-light)}.badge{border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:12px;font-weight:600;line-height:1.4;display:inline-flex}.badge-primary{background:var(--primary-light);color:var(--level-color)}.badge-success{background:var(--success-light);color:var(--success)}.badge-warning{background:var(--warning-light);color:var(--warning)}.badge-error{background:var(--error-light);color:var(--error)}.input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);outline:none;padding:10px 14px;font-size:14px;transition:border-color .15s,box-shadow .15s;display:block}.input::placeholder{color:var(--text-dim)}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.input.error{border-color:var(--error);box-shadow:0 0 0 3px var(--error-light)}.form-label{color:var(--text-muted);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.form-group{flex-direction:column;gap:6px;display:flex}.divider{background:var(--border);height:1px}.container{max-width:1200px;margin:0 auto;padding:0 24px}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}.slide-up-enter-active,.slide-up-leave-active{transition:opacity .25s,transform .25s}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateY(12px)}