.pinbex-login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.pinbex-login-card{background:var(--color-card);border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:440px;padding:48px 40px;position:relative;overflow:hidden}.pinbex-login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-brand)}.pinbex-login-icon{width:min(180px, 60%);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.pinbex-login-icon img{display:block;width:80px;max-width:100%;height:auto;object-fit:contain}.pinbex-login-title{font-size:var(--font-size-2xl);font-weight:700;text-align:center;margin-bottom:8px;color:var(--color-text-primary)}.pinbex-login-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;margin-bottom:32px;line-height:1.8}.pinbex-login-field{margin-bottom:20px}.pinbex-login-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-primary);margin-bottom:8px}.pinbex-login-input-wrap{position:relative;display:flex;align-items:center;border:2px solid var(--color-border);border-radius:var(--element-radius);transition:var(--transition-base);background:var(--color-bg)}.pinbex-login-input-wrap:focus-within{border-color:var(--color-blue);background:#fff;box-shadow:0 0 0 4px rgb(30 136 255 / .1)}.pinbex-login-prefix{padding:0 16px;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);border-right:2px solid var(--color-border);height:48px;display:flex;align-items:center;user-select:none;white-space:nowrap}.pinbex-login-input-wrap:focus-within .pinbex-login-prefix{border-left-color:var(--color-blue)}.pinbex-login-input{flex:1;border:none;outline:none;background:#fff0;padding:14px 16px;font-size:var(--font-size-base);font-family:var(--font-family);color:var(--color-text-primary);direction:ltr;text-align:left}.pinbex-login-input::placeholder{color:var(--color-gray)}.pinbex-login-otp-wrap{display:flex;gap:10px;direction:ltr;justify-content:center}.pinbex-login-otp-input{width:52px;height:60px;text-align:center;font-size:var(--font-size-xl);font-weight:700;font-family:var(--font-family);border:2px solid var(--color-border);border-radius:var(--element-radius);background:var(--color-bg);color:var(--color-text-primary);outline:none;transition:var(--transition-base);caret-color:#fff0}.pinbex-login-otp-input:focus{border-color:var(--color-blue);background:#fff;box-shadow:0 0 0 4px rgb(30 136 255 / .1)}.pinbex-login-otp-input.filled{border-color:var(--color-blue);background:rgb(30 136 255 / .05)}.pinbex-send-otp-btn{width:100%;padding:16px;border:none;border-radius:var(--element-radius);background:var(--gradient-brand);color:#fff;font-size:var(--font-size-base);font-weight:600;font-family:var(--font-family);cursor:pointer;transition:var(--transition-base);position:relative;overflow:hidden}.pinbex-send-otp-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgb(30 136 255 / .3)}.pinbex-send-otp-btn:active{transform:translateY(0)}.pinbex-send-otp-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.pinbex-send-otp-btn .spinner{display:none;width:20px;height:20px;border:2px solid rgb(255 255 255 / .3);border-top-color:#fff;border-radius:50%;animation:pinbex-spin 0.6s linear infinite;margin:0 auto}.pinbex-send-otp-btn.loading .spinner{display:block}.pinbex-send-otp-btn.loading .btn-text{display:none}@keyframes pinbex-spin{to{transform:rotate(360deg)}}.pinbex-login-error{background:rgb(255 71 87 / .08);color:var(--color-sale);border:1px solid rgb(255 71 87 / .2);border-radius:var(--element-radius);padding:12px 16px;font-size:var(--font-size-sm);margin-bottom:20px;display:none;text-align:center}.pinbex-login-error.show{display:block}.pinbex-login-success{background:rgb(46 213 115 / .08);color:#1a9d52;border:1px solid rgb(46 213 115 / .2);border-radius:var(--element-radius);padding:12px 16px;font-size:var(--font-size-sm);margin-bottom:20px;display:none;text-align:center}.pinbex-login-success.show{display:block}.pinbex-login-footer{margin-top:24px;text-align:center}.pinbex-login-resend{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.pinbex-login-resend-btn{background:none;border:none;color:var(--color-blue);font-weight:600;cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-sm);padding:0;text-decoration:underline;text-underline-offset:2px}.pinbex-login-resend-btn:disabled{color:var(--color-gray);cursor:not-allowed;text-decoration:none}.pinbex-login-timer{font-size:var(--font-size-sm);color:var(--color-gray);margin-top:8px}.pinbex-login-step{display:none}.pinbex-login-step.active{display:block;animation:pinbex-fade-in 0.3s ease}@keyframes pinbex-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.pinbex-login-back{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;background:none;border:none;font-family:var(--font-family);padding:4px 8px;border-radius:6px;margin-bottom:20px;transition:var(--transition-fast)}.pinbex-login-back:hover{color:var(--color-blue);background:rgb(30 136 255 / .06)}.pinbex-login-back svg{width:16px;height:16px}@media (max-width:480px){.pinbex-login-card{padding:36px 24px}.pinbex-login-otp-input{width:44px;height:52px;font-size:var(--font-size-lg)}}