@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
:root{--agen-primary:#6c63ff;--agen-primary-light:#8b85ff;--agen-primary-dark:#4e46e5;--agen-secondary:#ff6b6b;--agen-accent:#ffd93d;--agen-success:#06d6a0;--agen-warning:#ffb347;--skill-listening:#38bdf8;--skill-speaking:#f472b6;--skill-reading:#4ade80;--skill-writing:#a78bfa;--bg-base:#0f0e17;--bg-surface:#1a1827;--bg-elevated:#232136;--bg-glass:#ffffff0a;--bg-glass-hover:#ffffff14;--text-primary:#e8e6f0;--text-secondary:#9b97b2;--text-muted:#5e5a7a;--text-on-primary:#fff;--border-subtle:#ffffff14;--border-medium:#ffffff24;--gradient-primary:linear-gradient(135deg, #6c63ff 0%, #8b85ff 100%);--gradient-hero:linear-gradient(135deg, #6c63ff 0%, #ff6b6b 50%, #ffd93d 100%);--gradient-card:linear-gradient(135deg, #6c63ff26 0%, #ff6b6b1a 100%);--gradient-success:linear-gradient(135deg, #06d6a0 0%, #38bdf8 100%);--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 8px 24px #0006;--shadow-lg:0 16px 48px #00000080;--shadow-glow:0 0 32px #6c63ff4d;--shadow-success:0 0 24px #06d6a04d;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--font-sans:"Plus Jakarta Sans", "Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--agen-primary-dark);border-radius:var(--radius-full)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:700;line-height:1.2}h1{font-size:clamp(2rem,5vw,3rem)}h2{font-size:clamp(1.5rem,3.5vw,2.25rem)}h3{font-size:clamp(1.2rem,2.5vw,1.5rem)}p{color:var(--text-secondary)}a{color:var(--agen-primary-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--text-primary)}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:none;padding:12px 24px;font-size:.95rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn-primary{background:var(--gradient-primary);color:var(--text-on-primary);box-shadow:0 4px 16px #6c63ff66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6c63ff80}.btn-primary:active{transform:translateY(0)}.btn-ghost{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn-ghost:hover{background:var(--bg-glass-hover);border-color:var(--border-medium)}.btn-success{background:var(--gradient-success);color:#fff;box-shadow:0 4px 16px #06d6a04d}.btn-success:hover{transform:translateY(-2px)}.btn-lg{border-radius:var(--radius-lg);padding:16px 32px;font-size:1.05rem}.btn-sm{border-radius:var(--radius-sm);padding:8px 16px;font-size:.85rem}.btn-full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-base)}.card-hover:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.card-gradient{background:var(--gradient-card);border-radius:var(--radius-lg);border:1px solid #6c63ff33}.skill-badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:6px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-flex}.skill-listening{color:var(--skill-listening);background:#38bdf826}.skill-speaking{color:var(--skill-speaking);background:#f472b626}.skill-reading{color:var(--skill-reading);background:#4ade8026}.skill-writing{color:var(--skill-writing);background:#a78bfa26}.progress-bar{background:var(--bg-elevated);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);background:var(--gradient-primary);height:100%;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.xp-badge{color:var(--agen-accent);border-radius:var(--radius-full);background:#ffd93d26;align-items:center;gap:4px;padding:4px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.streak-badge{color:var(--agen-secondary);border-radius:var(--radius-full);background:#ff6b6b26;align-items:center;gap:4px;padding:4px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.form-group{gap:var(--spacing-xs);flex-direction:column;display:flex}.form-label{color:var(--text-secondary);letter-spacing:.3px;font-size:.875rem;font-weight:600}.form-input{background:var(--bg-elevated);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition-fast);outline:none;width:100%;padding:12px 16px;font-size:.95rem}.form-input::placeholder{color:var(--text-muted)}.form-input:focus{border-color:var(--agen-primary);box-shadow:0 0 0 3px #6c63ff33}.level-badge{border-radius:var(--radius-full);letter-spacing:1px;background:var(--gradient-primary);color:#fff;align-items:center;padding:3px 10px;font-size:.75rem;font-weight:800;display:inline-flex}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 12px #6c63ff4d}50%{box-shadow:0 0 32px #6c63ff99}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce-in{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.animate-fade-in-up{animation:.5s both fadeInUp}.animate-pulse-glow{animation:2s ease-in-out infinite pulse-glow}.animate-bounce-in{animation:.4s both bounce-in}.skeleton{background:var(--bg-elevated);border-radius:var(--radius-md);position:relative;overflow:hidden}.skeleton:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff0f 50%,#0000 100%);animation:1.4s infinite skeleton-sweep;position:absolute;inset:0;transform:translate(-100%)}@keyframes skeleton-sweep{to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.skeleton:after{animation:none}}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.container{max-width:1200px;padding:0 var(--spacing-lg);margin:0 auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.text-center{text-align:center}.text-gradient{background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@media (max-width:768px){h1{font-size:2.2rem}h2{font-size:1.8rem}.container{padding:0 var(--spacing-md)}.card{padding:var(--spacing-md)}.grid-cols-2{grid-template-columns:1fr!important}body{padding-bottom:70px}}