@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&family=Nunito:wght@700;800;900&display=swap");:root{--bg-color:#0F172A;--card-bg:#1E293B;--text-primary:#F8FAFC;--text-secondary:#94A3B8;--accent:#34D399;--accent-hover:#10B981;--noyan-color:#818CF8;--artun-color:#F9A8D4;--error-color:#EF4444}body{margin:0;font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-primary);overflow-x:hidden}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow:hidden}.animated-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;overflow:hidden;background:radial-gradient(circle at 20% 30%,rgba(129,140,248,.15) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(249,168,212,.15) 0,transparent 50%)}.shape{position:absolute;font-size:2rem;opacity:.3;animation:float 20s linear infinite}.shape-1{top:10%;left:10%;animation-duration:25s;animation-delay:0s;font-size:3rem}.shape-2{top:20%;right:15%;animation-duration:20s;animation-delay:-5s;font-size:2.5rem}.shape-3{bottom:15%;left:20%;animation-duration:22s;animation-delay:-10s;font-size:2.5rem}.shape-4{bottom:25%;right:10%;animation-duration:18s;animation-delay:-15s;font-size:3rem}@keyframes float{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(15px,20px) rotate(15deg)}50%{transform:translateY(35px) rotate(0deg)}75%{transform:translate(-15px,15px) rotate(-15deg)}to{transform:translate(0) rotate(0deg)}}.login-card{position:relative;z-index:1;background:var(--card-bg);border-radius:24px;padding:2.5rem 2rem;width:100%;max-width:420px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-section{text-align:center;margin-bottom:2.5rem}.app-title{font-family:Nunito,sans-serif;font-size:2.5rem;font-weight:900;margin:0 0 .5rem;background:linear-gradient(135deg,var(--noyan-color),var(--artun-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;justify-content:center;gap:.5rem}.app-title .emoji{-webkit-text-fill-color:initial}.subtitle{font-family:Nunito,sans-serif;font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0 0 .5rem}.tagline{font-size:.95rem;color:var(--text-secondary);margin:0}.form-section{display:flex;flex-direction:column;gap:2rem}.input-group label{display:block;font-size:.875rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}.otp-container{display:flex;gap:.5rem;justify-content:space-between}.otp-input{width:100%;aspect-ratio:1;max-width:3.5rem;background:rgba(15,23,42,.5);border:2px solid rgba(255,255,255,.1);border-radius:12px;color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:1.5rem;font-weight:700;text-align:center;transition:all .2s ease;outline:none}.otp-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(52,211,153,.1);transform:translateY(-2px)}.otp-input.filled{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}.otp-input.error{border-color:var(--error-color);color:var(--error-color)}.name-selector{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem}.name-btn{background:rgba(15,23,42,.5);border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:1rem;color:var(--text-primary);font-family:Nunito,sans-serif;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1)}.name-btn .avatar{font-size:2rem;transition:transform .2s ease}.name-btn:hover{background:rgba(255,255,255,.05)}.name-btn:hover .avatar{transform:scale(1.1)}.name-btn.selected{border-color:var(--accent);background:rgba(52,211,153,.1);box-shadow:0 0 20px rgba(52,211,153,.1)}.login-submit-btn{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#000;border:none;border-radius:16px;padding:1.25rem;font-family:Nunito,sans-serif;font-size:1.2rem;font-weight:800;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;justify-content:center;align-items:center;box-shadow:0 10px 25px -5px rgba(52,211,153,.4);margin-top:.5rem}.login-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 15px 30px -5px rgba(52,211,153,.5)}.login-submit-btn:active:not(:disabled){transform:translateY(0)}.login-submit-btn:disabled{opacity:.7;cursor:not-allowed}.loader{width:24px;height:24px;border:3px solid rgba(0,0,0,.2);border-bottom-color:#000;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.shake-animation{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}