:root{
  --login-blue:#1261d6;
  --login-blue-dark:#0b4fb8;
  --login-bg:#e8edf5;
  --login-ink:#102447;
  --login-muted:#68758b;
  --login-line:#dce4ef;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%}
body{
  margin:0;
  min-height:100vh;
  padding:24px;
  display:grid;
  place-items:center;
  overflow:auto;
  background:
    radial-gradient(circle at 12% 12%,rgba(18,97,214,.10),transparent 28%),
    radial-gradient(circle at 88% 88%,rgba(13,86,200,.08),transparent 30%),
    var(--login-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--login-ink);
}
.login-shell{
  width:min(1120px,100%);
  height:min(650px,calc(100vh - 48px));
  min-height:560px;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid rgba(16,36,71,.06);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(26,48,80,.18);
  background:#fff;
}
.login-panel{min-width:0}
.login-form-panel{background:#fff;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.login-form-wrap{width:min(380px,calc(100% - 64px));margin:0 auto;padding:0}
.login-brand{display:flex;align-items:center;gap:10px;color:var(--login-blue);font-weight:800;font-size:20px;margin-bottom:28px}
.login-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#176bdc,#0d55c0);color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(18,97,214,.24)}
h1{font-size:28px;line-height:1.2;margin:0 0 9px;font-weight:800;letter-spacing:-.035em}
.login-subtitle{font-size:13px;line-height:1.6;color:var(--login-muted);margin:0 0 26px}
.login-form{display:flex;flex-direction:column;gap:9px}
.login-form>label{font-size:12px;font-weight:750;margin-top:5px;color:#243b60}
.login-input{height:48px;border:1px solid var(--login-line);border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fbfcfe;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.login-input span{color:#6c7e9c;font-size:14px}
.login-input input{width:100%;border:0;outline:0;background:transparent;color:var(--login-ink);font-size:13px}
.login-input input::placeholder{color:#9ba8b9}
.login-input:focus-within{background:#fff;border-color:var(--login-blue);box-shadow:0 0 0 4px rgba(18,97,214,.1)}
.login-options{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0 16px;font-size:11px;color:var(--login-muted)}
.remember{display:flex;align-items:center;gap:6px}.remember input{accent-color:var(--login-blue)}
.login-help{color:var(--login-blue);text-align:right}
.login-submit{height:48px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--login-blue),#0d55c0);color:#fff;font-size:13px;font-weight:750;cursor:pointer;box-shadow:0 9px 18px rgba(18,97,214,.22);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.login-submit:hover{background:linear-gradient(135deg,#0f59ca,var(--login-blue-dark));transform:translateY(-1px);box-shadow:0 12px 24px rgba(18,97,214,.25)}
.login-submit:active{transform:translateY(0)}
.login-footer{text-align:center;color:#9aa6b8;font-size:11px;margin:28px 0 0}
.login-art-panel{background:linear-gradient(145deg,#176bdc 0%,#0d56c8 58%,#0a49ad 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px;position:relative;overflow:hidden}
.login-art-panel:before,.login-art-panel:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.055)}
.login-art-panel:before{width:340px;height:340px;right:-155px;top:-120px}.login-art-panel:after{width:260px;height:260px;left:-130px;bottom:-120px}
.art-orbit{width:390px;height:310px;position:relative;max-width:100%;margin-bottom:30px}
.orbit-ring{position:absolute;width:292px;height:292px;border-radius:50%;left:50%;top:0;transform:translateX(-50%);background:rgba(48,145,255,.30);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 40px rgba(43,139,255,.12)}
.art-window{position:absolute;right:10px;top:55px;width:205px;height:175px;border-radius:12px;background:#f7fbff;color:#7890ad;box-shadow:0 18px 34px rgba(0,0,0,.17);padding:12px}
.window-bar{display:flex;gap:5px;margin-bottom:14px}.window-bar i{width:7px;height:7px;border-radius:50%;background:#ffbd4a}.window-bar i:nth-child(2){background:#ff6b6b}.window-bar i:nth-child(3){background:#45d483}
.window-row{height:36px;border:1px solid #dce5ef;border-radius:7px;margin-bottom:7px;padding:7px 9px;display:flex;justify-content:space-between;align-items:center;font-size:10px}.window-row b{color:#607795}.window-row span{color:#1a9b63;font-weight:700}
.art-node{position:absolute;width:52px;height:52px;border-radius:50%;background:#f4f8ff;color:var(--login-blue);display:grid;place-items:center;font-size:22px;font-weight:900;border:5px solid rgba(255,255,255,.28);box-shadow:0 8px 18px rgba(0,0,0,.16);z-index:2}.node-one{left:30px;top:45px}.node-two{left:0;top:150px}.node-three{left:35px;top:245px}
.art-copy{text-align:center;position:relative;z-index:2}.art-copy h2{font-size:23px;line-height:1.35;margin:0 0 10px;font-weight:800;letter-spacing:-.02em}.art-copy p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.8);max-width:320px;margin:0 auto}.art-dots{display:flex;justify-content:center;gap:10px;margin-top:28px}.art-dots>*{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}.art-dots b{background:#fff}
.alert{border-radius:10px;font-size:12px}
@media(max-width:800px){
  body{padding:18px;display:flex;align-items:center;justify-content:center}
  .login-shell{grid-template-columns:1fr;width:min(500px,100%);height:auto;min-height:min(620px,calc(100vh - 36px))}
  .login-art-panel{display:none}
  .login-form-wrap{width:min(380px,calc(100% - 52px));padding:42px 0}
  .login-form-panel{min-height:min(620px,calc(100vh - 36px))}
}
@media(max-height:620px) and (min-width:801px){
  body{place-items:start center}
  .login-shell{height:560px;min-height:560px}
}