:root{--login-bg:#0f1117;--login-card:#1a1e2a;--login-border:#ffffff14;--login-text:#f0f2f8;--login-muted:#f0f2f899;--login-dim:#f0f2f859;--login-amber:#f59e0b;--login-emerald:#10b981;--login-error:#f87171}.login-wrap{background:var(--login-bg);min-height:100vh;color:var(--login-text);flex-direction:column;align-items:center;padding-top:100px;display:flex}.login-card{background:var(--login-card);border:1px solid var(--login-border);border-radius:24px;width:100%;max-width:400px;padding:40px;box-shadow:0 20px 40px #0006}.login-title{text-align:center;margin-bottom:8px;font-size:24px;font-weight:700}.login-subtitle{color:var(--login-muted);text-align:center;margin-bottom:32px;font-size:14px}.login-field{margin-bottom:24px}.login-label{text-transform:uppercase;letter-spacing:.1em;color:var(--login-dim);margin-bottom:8px;font-size:12px;font-weight:700;display:block}.login-input{border:1px solid var(--login-border);color:#fff;background:#0003;border-radius:12px;outline:none;width:100%;padding:14px 16px;font-size:16px;transition:all .2s}.login-input:focus{border-color:var(--login-amber);box-shadow:0 0 0 4px #f59e0b1a}.login-btn{background:var(--login-amber);color:#000;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.login-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b4d}.login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.login-error{color:var(--login-error);text-align:center;background:#f871711a;border:1px solid #f8717133;border-radius:12px;margin-bottom:24px;padding:12px;font-size:13px}.otp-box{justify-content:center;gap:12px;margin-bottom:24px;display:flex}.otp-digit{border:2px solid var(--login-border);text-align:center;color:#fff;background:#0003;border-radius:12px;outline:none;width:48px;height:60px;font-size:24px;font-weight:700;transition:all .2s}.otp-digit:focus{border-color:var(--login-amber)}.login-back{color:var(--login-dim);cursor:pointer;text-align:center;margin-top:24px;font-size:13px;transition:color .2s}.login-back:hover{color:var(--login-muted)}@keyframes spin{to{transform:rotate(360deg)}}.loader{animation:1s linear infinite spin}