:root{
  --navy:#0b1f4d;--blue:#2563eb;--cyan:#06b6d4;--green:#10b981;
  --ink:#0f1c3a;--muted:#6b7a94;--line:#e2e8f3;--danger:#dc2626;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg,#071a40 0%,#0b3a8f 55%,#0e7ad8 100%);
  display:flex;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  position:relative;overflow-x:hidden;
}
.bg-shape{position:fixed;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0}
.bg-shape.s1{width:340px;height:340px;background:#06b6d4;top:-110px;left:-90px;animation:float 14s ease-in-out infinite}
.bg-shape.s2{width:380px;height:380px;background:#10b981;bottom:-150px;right:-110px;opacity:.4;animation:float 18s ease-in-out infinite reverse}
.bg-shape.s3{width:220px;height:220px;background:#7c3aed;top:45%;left:60%;opacity:.3;animation:float 16s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.08)}}

.login-wrap{
  position:relative;z-index:1;width:100%;max-width:420px;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.6);
  border-radius:24px;padding:34px 28px 26px;
  box-shadow:0 30px 80px rgba(2,12,40,.45);
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.brand{text-align:center;margin-bottom:24px}
.logo{
  width:70px;height:70px;border-radius:20px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  display:grid;place-items:center;margin:0 auto 14px;
  box-shadow:0 12px 28px rgba(37,99,235,.38);
}
.logo svg{width:34px;height:34px;stroke:#fff}
h1{font-size:25px;line-height:1.2;margin:0 0 6px;color:var(--navy);letter-spacing:-.3px}
.sub{color:var(--muted);font-size:13.5px;line-height:1.45}

.alert{
  display:flex;gap:9px;align-items:flex-start;border-radius:12px;
  padding:11px 13px;font-size:13px;line-height:1.4;margin-bottom:18px;
}
.alert svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.alert.error{background:#fef2f2;border:1px solid #fecaca;color:var(--danger);animation:shake .4s ease}
.alert.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.field{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:600;color:#26385c;margin:0 0 7px}
.input-box{position:relative}
.input-box .ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:#8a99b3;pointer-events:none;transition:stroke .2s;
}
input{
  width:100%;height:52px;border:1.5px solid var(--line);border-radius:14px;
  padding:0 14px 0 44px;font-size:16px;font-family:inherit;color:var(--ink);
  background:#f8fafd;outline:0;transition:border-color .2s,box-shadow .2s,background .2s;
}
input::placeholder{color:#a3afc4}
input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.input-box:focus-within .ico{stroke:var(--blue)}
.input-box.has-toggle input{padding-right:50px}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px}

.toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;border-radius:10px;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:#8a99b3;
}
.toggle:hover{background:#eef2f9;color:var(--blue)}
.toggle svg{width:20px;height:20px;stroke:currentColor}
.toggle .eye-off{display:none}
.toggle.on .eye{display:none}
.toggle.on .eye-off{display:block}

.row{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.link{color:var(--blue);font-size:13px;font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

.btn{
  width:100%;height:52px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),#0ea5e9);
  color:#fff;font-size:16px;font-weight:700;font-family:inherit;letter-spacing:.2px;
  cursor:pointer;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 26px rgba(37,99,235,.35);
  transition:transform .15s,box-shadow .2s,filter .2s;
}
.btn:hover{filter:brightness(1.06);box-shadow:0 16px 32px rgba(37,99,235,.42)}
.btn:active{transform:scale(.98)}
.btn .spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.loading{pointer-events:none;opacity:.88}
.btn.loading .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.divider{display:flex;align-items:center;gap:12px;color:#9aa7bd;font-size:12px;margin:20px 0 16px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-outline{
  display:flex;align-items:center;justify-content:center;width:100%;height:50px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);
  font-size:15px;font-weight:700;text-decoration:none;transition:border-color .2s,background .2s;
}
.btn-outline:hover{border-color:var(--blue);background:#f4f8ff}

.back{text-align:center;margin-top:20px;font-size:13px;color:var(--muted)}
.note{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;color:#8a96a8;font-size:12px;margin-top:20px}
.note svg{width:14px;height:14px;stroke:var(--green)}

@media (max-width:420px){
  .login-wrap{padding:28px 20px 22px;border-radius:20px}
  h1{font-size:22px}
}
@media (max-height:600px){body{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}