:root{
  --indigo:#4338ca; --indigo-dark:#312e81; --indigo-soft:#eef2ff;
  --sun:#f59e0b; --sun-soft:#fef3c7; --teal:#14b8a6;
  --ink:#1e1b4b; --muted:#6b7280; --line:#e5e7eb; --cream:#fffbf2;
  --danger:#dc2626;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(135deg,#eef2ff 0%,#fffbf2 55%,#ecfeff 100%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;position:relative;overflow-x:hidden;
}
h1,h2{font-family:'Fredoka',sans-serif}

/* floating doodles */
.bg-shapes .shape{position:fixed;font-size:34px;opacity:.13;color:var(--indigo);animation:float 9s ease-in-out infinite}
.s1{top:8%;left:6%}.s2{top:70%;left:4%;color:var(--sun)!important;animation-delay:1s}
.s3{top:12%;right:8%;color:var(--sun)!important;animation-delay:2s}
.s4{bottom:8%;right:6%;color:var(--teal)!important;animation-delay:3s}
.s5{top:45%;right:3%;animation-delay:4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}

.login-wrap{
  position:relative;z-index:1;width:100%;max-width:980px;
  display:grid;grid-template-columns:1.05fr 1fr;
  background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(49,46,129,.35);
}

/* brand panel */
.brand-panel{
  background:linear-gradient(160deg,var(--indigo) 0%,var(--indigo-dark) 100%);
  color:#fff;padding:44px 40px;display:flex;flex-direction:column;gap:26px;position:relative;overflow:hidden;
}
.brand-panel > *{position:relative;z-index:1}
.brand-panel::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;
  border-radius:50%;background:var(--sun);opacity:.18;
}
.brand-top{display:flex;align-items:center;gap:14px}
.logo{
  width:56px;height:56px;border-radius:16px;background:var(--sun);color:var(--indigo-dark);
  display:grid;place-items:center;font-size:26px;flex-shrink:0;
  box-shadow:0 8px 18px -6px rgba(245,158,11,.7);
}
.brand-top h1{font-size:28px;line-height:1.1}
.brand-top .sub{font-size:13.5px;opacity:.85;margin-top:2px}
.illustration svg{width:100%;height:auto;max-height:240px}
.features{list-style:none;display:grid;gap:12px}
.features li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}
.features i{
  width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);
  display:grid;place-items:center;color:var(--sun);font-size:15px;flex-shrink:0;
}

/* form panel */
.form-panel{padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.form-head{margin-bottom:22px}
.form-head .wave{font-size:30px;display:inline-block;animation:wave 2.4s ease-in-out infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}}
.form-head h2{font-size:27px;margin-top:6px;color:var(--indigo-dark)}
.form-head p{color:var(--muted);margin-top:4px}

.alert{
  background:#fef2f2;color:var(--danger);border:1px solid #fecaca;border-radius:12px;
  padding:11px 14px;font-size:14px;font-weight:700;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start;
}
label{display:block;font-weight:800;font-size:13.5px;margin:14px 0 6px;color:var(--ink)}
.field{position:relative;display:flex;align-items:center}
.field > i{position:absolute;left:15px;color:#9ca3af;font-size:15px;pointer-events:none}
.field input{
  width:100%;padding:13px 46px 13px 44px;font:inherit;font-size:15px;color:var(--ink);
  border:2px solid var(--line);border-radius:14px;background:var(--cream);transition:.2s;
}
.field input:focus{outline:none;border-color:var(--indigo);background:#fff;box-shadow:0 0 0 4px var(--indigo-soft)}
.field input:focus + .toggle-pass, .field:focus-within > i{color:var(--indigo)}
.field input:disabled{opacity:.6;cursor:not-allowed}
.toggle-pass{
  position:absolute;right:8px;width:36px;height:36px;border:0;border-radius:10px;
  background:transparent;color:#6b7280;cursor:pointer;font-size:16px;
}
.toggle-pass:hover{background:var(--indigo-soft);color:var(--indigo)}

.captcha-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.captcha-row img{border-radius:12px;border:2px dashed #fcd34d;background:var(--sun-soft);max-width:100%;height:auto}
.refresh{
  width:44px;height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;
  color:var(--indigo);cursor:pointer;font-size:16px;transition:.2s;flex-shrink:0;
}
.refresh:hover{border-color:var(--indigo);transform:rotate(90deg)}

.btn-login{
  margin-top:24px;width:100%;padding:14px;border:0;border-radius:14px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,var(--indigo),#6366f1);
  box-shadow:0 12px 24px -10px rgba(67,56,202,.7);display:flex;justify-content:center;align-items:center;gap:10px;
  transition:transform .15s, box-shadow .15s;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 16px 28px -10px rgba(67,56,202,.8)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;transform:none}
.foot{margin-top:22px;text-align:center;color:var(--muted);font-size:12.5px}

/* tablet */
@media (max-width:900px){
  .login-wrap{grid-template-columns:1fr;max-width:560px}
  .brand-panel{padding:30px 30px 26px}
  .illustration{display:none}
  .features{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .features li{flex-direction:column;text-align:center;font-size:13px;gap:8px}
  .form-panel{padding:32px 30px}
}
/* mobile */
@media (max-width:520px){
  body{padding:0;align-items:stretch}
  .login-wrap{border-radius:0;min-height:100vh;box-shadow:none}
  .brand-panel{padding:24px 20px;border-radius:0 0 26px 26px}
  .brand-top h1{font-size:23px}
  .features{display:none}
  .form-panel{padding:26px 20px 30px}
  .form-head h2{font-size:23px}
  .bg-shapes{display:none}
}