@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --primary:#4f46e5; --dark:#3730a3; --ink:#172033; --muted:#667085; --line:#d9deea; --danger:#d92d20; }
body { min-width:320px; min-height:100vh; color:var(--ink); font-family:"Be Vietnam Pro","Segoe UI",sans-serif; background:radial-gradient(circle at 8% 8%,#e2e7ff 0,transparent 31rem),radial-gradient(circle at 95% 92%,#d9f7f0 0,transparent 29rem),#f6f7fb; }
.login-page { display:grid; place-items:center; min-height:100vh; padding:32px; }
.login-card { display:grid; grid-template-columns:minmax(360px,.95fr) minmax(400px,1.05fr); width:min(100%,1080px); min-height:650px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.9); border-radius:28px; box-shadow:0 28px 75px rgba(43,52,91,.16); }
.login-left { position:relative; display:flex; flex-direction:column; min-width:0; padding:clamp(32px,5vw,54px); overflow:hidden; color:#fff; background:linear-gradient(145deg,#5b54ec 0%,#4438bf 58%,#30278c 100%); }
.login-left::before { position:absolute; top:-125px; right:-100px; width:310px; height:310px; content:""; border:55px solid rgba(255,255,255,.08); border-radius:50%; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:800; }.brand-icon { display:grid; width:43px; height:43px; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:13px; background:rgba(255,255,255,.16); font-size:22px; }
.welcome-content { position:relative; z-index:1; max-width:370px; margin:auto 0; }.small-title { margin-bottom:18px; font-size:11px; font-weight:700; letter-spacing:.18em; opacity:.76; }.welcome-content h1 { margin-bottom:20px; font-size:clamp(32px,3.1vw,44px); line-height:1.16; letter-spacing:-.04em; }.welcome-content p { color:rgba(255,255,255,.82); font-size:15px; line-height:1.75; }
.login-decoration { position:absolute; right:-86px; bottom:-86px; width:280px; height:280px; border:1px solid rgba(255,255,255,.24); border-radius:50%; }.login-decoration::before,.login-decoration::after { position:absolute; content:""; border:1px solid rgba(255,255,255,.18); border-radius:inherit; }.login-decoration::before { inset:30px; }.login-decoration::after { inset:60px; }.login-decoration span { position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.7); }.login-decoration span:nth-child(1) { top:30px; left:30px; }.login-decoration span:nth-child(2) { top:84px; right:24px; }.login-decoration span:nth-child(3) { bottom:32px; left:75px; }
.login-right { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(38px,6vw,72px); }.login-box { width:100%; }.login-header { margin-bottom:34px; }.login-header h2 { margin-bottom:10px; font-size:31px; line-height:1.2; letter-spacing:-.035em; }.login-header p { color:var(--muted); font-size:14px; line-height:1.65; }
.form-group { margin-bottom:22px; }.form-group label { display:block; margin-bottom:9px; color:#344054; font-size:13px; font-weight:700; }.label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }.label-row a,.login-footer a,.otp-footer a,.text-button { color:var(--primary); font:inherit; font-weight:700; text-decoration:none; }.label-row a { font-size:12px; }.label-row a:hover,.login-footer a:hover,.otp-footer a:hover,.text-button:hover { text-decoration:underline; }
.form-group input { width:100%; height:54px; padding:0 16px; border:1px solid var(--line); border-radius:12px; outline:none; color:var(--ink); background:#fbfcff; font:inherit; font-size:14px; transition:border-color .18s,box-shadow .18s,background .18s; }.form-group input::placeholder { color:#98a2b3; }.form-group input:hover { border-color:#b8c0d4; }.form-group input:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(79,70,229,.13); }
.password-wrapper { position:relative; }.password-wrapper input { padding-right:54px; }.toggle-password { position:absolute; top:50%; right:10px; display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:9px; transform:translateY(-50%); background:transparent; cursor:pointer; font-size:17px; }.toggle-password:hover { background:#eef0ff; }.form-options { margin:4px 0 25px; }.remember-me { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; cursor:pointer; }.remember-me input { width:16px; height:16px; accent-color:var(--primary); }
.login-button { display:flex; width:100%; height:54px; align-items:center; justify-content:center; gap:9px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,#5b54eb,#4338ca); box-shadow:0 10px 18px rgba(79,70,229,.22); cursor:pointer; font:inherit; font-size:14px; font-weight:700; transition:transform .18s,box-shadow .18s; }.login-button:hover { box-shadow:0 14px 22px rgba(79,70,229,.3); transform:translateY(-2px); }.login-button:disabled { opacity:.72; cursor:not-allowed; transform:none; }.button-loading { display:none; }.login-message,.error-message { min-height:21px; margin-top:14px; color:var(--danger); font-size:13px; line-height:1.55; }.login-message.success { color:#067647; }.loading-spinner { width:17px; height:17px; border:2px solid rgba(255,255,255,.38); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }.hidden { display:none; } @keyframes spin { to { transform:rotate(360deg); } }
.login-footer,.otp-footer { margin-top:30px; color:var(--muted); font-size:13px; text-align:center; }.login-footer { display:flex; justify-content:center; gap:5px; }.otp-footer p + p { margin-top:13px; }.text-button { padding:0; border:0; background:transparent; cursor:pointer; font-size:inherit; }
.otp-card { min-height:570px; max-width:920px; grid-template-columns:minmax(300px,.85fr) minmax(390px,1.15fr); }.otp-card .login-left { min-height:570px; }.otp-card .form-group input { height:66px; border-radius:14px; text-align:center; letter-spacing:.48em; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }.otp-card .form-group input::placeholder { letter-spacing:0; font-size:13px; font-weight:400; }
.recovery-card { min-height:600px; max-width:940px; grid-template-columns:minmax(300px,.85fr) minmax(410px,1.15fr); }.recovery-card .login-left { min-height:600px; }.register-card { min-height:720px; }.register-card .login-right { padding-top:42px; padding-bottom:42px; }
.register-toast { position:fixed; z-index:1000; top:22px; left:50%; display:flex; width:min(460px,calc(100vw - 32px)); align-items:flex-start; gap:12px; padding:14px 15px; border:1px solid #a6e6c4; border-radius:12px; color:#075c37; background:#ecfdf3; box-shadow:0 14px 34px rgba(20,43,81,.2); transform:translateX(-50%); animation:noticeIn .22s ease-out; }.register-toast.hidden { display:none; }.register-toast.error { border-color:#fecaca; color:#991b1b; background:#fff1f2; }.register-toast-icon { display:grid; flex:0 0 25px; width:25px; height:25px; place-items:center; border-radius:50%; color:#fff; background:#16a34a; font-size:14px; font-weight:800; }.register-toast.error .register-toast-icon { background:#dc2626; }.register-toast-content { flex:1; }.register-toast strong { display:block; margin-bottom:3px; font-size:14px; }.register-toast p { font-size:12px; line-height:1.55; }.register-toast-close { border:0; color:inherit; background:transparent; cursor:pointer; font-size:20px; line-height:20px; }@keyframes noticeIn { from { opacity:0; transform:translate(-50%,-10px); } to { opacity:1; transform:translate(-50%,0); } }
.progress-steps { display:flex; align-items:center; gap:8px; margin:-8px 0 30px; }.progress-steps span { display:grid; width:25px; height:25px; place-items:center; border:1px solid #d0d5dd; border-radius:50%; color:#98a2b3; background:#fff; font-size:11px; font-weight:700; }.progress-steps span.active { border-color:var(--primary); color:#fff; background:var(--primary); }.progress-steps i { width:42px; height:2px; background:#e4e7ec; }.progress-steps span.active + i { background:#a5b4fc; }.recovery-step { display:none; }.recovery-step.active { display:block; }.otp-input { height:66px !important; border-radius:14px !important; text-align:center; letter-spacing:.48em; font-size:26px !important; font-weight:700 !important; font-variant-numeric:tabular-nums; }.otp-input::placeholder { letter-spacing:0; font-size:13px; font-weight:400; }.agree-terms { display:flex; align-items:flex-start; gap:9px; margin:-2px 0 24px; color:var(--muted); font-size:12px; line-height:1.5; cursor:pointer; }.agree-terms input { width:16px; height:16px; margin-top:1px; accent-color:var(--primary); }
@media (max-width:780px) { .login-page { padding:18px; align-items:start; }.login-card,.otp-card { grid-template-columns:1fr; min-height:0; }.login-left,.otp-card .login-left { min-height:230px; padding:30px; }.welcome-content { margin:42px 0 0; }.welcome-content h1 { margin-bottom:10px; font-size:30px; }.welcome-content p { font-size:13px; }.login-decoration { width:210px; height:210px; }.login-right { padding:36px 30px 40px; } }
@media (max-width:430px) { .login-page { padding:0; }.login-card { border:0; border-radius:0; box-shadow:none; }.login-left { min-height:205px; }.brand { font-size:18px; }.login-right { padding:32px 22px; }.login-header { margin-bottom:27px; }.login-header h2 { font-size:28px; }.label-row { align-items:flex-start; flex-direction:column; gap:5px; }.otp-card .form-group input { font-size:22px; letter-spacing:.34em; } }