:root{
  --login-ink:#10203e;
  --login-muted:#6f7c98;
  --login-teal:#0e9c8c;
  --login-teal-2:#17b7a3;
  --login-line:#d7deea;
}
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body.login-page{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3.4vh 5vw 6.5vh;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:var(--login-ink);
  background:
    radial-gradient(circle at 50% 4%, rgba(199,244,239,.38), transparent 32%),
    linear-gradient(135deg,#f7fbfb 0%,#fbfdfd 44%,#e9faf7 100%);
}
.login-bg{ position:fixed; pointer-events:none; z-index:0; }
.login-bg-dots{
  width:190px; height:130px; opacity:.45;
  background-image:radial-gradient(circle, rgba(32,190,170,.34) 0 4px, transparent 4.5px);
  background-size:29px 29px;
}
.login-bg-dots-top{ right:1.5vw; top:-3px; transform:rotate(-5deg); }
.login-bg-dots-bottom{ left:-10px; bottom:2vh; transform:rotate(6deg); opacity:.28; }
.login-wave{ left:-12vw; width:128vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:center; }
.login-wave-one{ height:35vh; bottom:-18vh; background:rgba(119,225,211,.28); transform:rotate(-5deg); }
.login-wave-two{ height:27vh; bottom:-17vh; left:22vw; background:rgba(154,237,227,.32); transform:rotate(7deg); }

.login-shell{
  width:min(1120px,88vw);
  min-height:min(640px,76vh);
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  border:6px solid rgba(255,255,255,.84);
  border-radius:38px;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  box-shadow:0 22px 65px rgba(28,73,81,.17);
}
.login-panel{ min-width:0; }
.login-visual{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 13%, rgba(114,225,210,.17) 0 3px, transparent 3.4px) 0 0/18px 18px,
    linear-gradient(143deg,#edf9f7 0%,#fbfdfd 55%,#d7f6f1 100%);
}
.login-visual::before,
.login-visual::after{
  content:"";
  position:absolute;
  left:-16%; right:-18%;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}
.login-visual::before{ height:220px; bottom:-82px; background:rgba(119,225,211,.20); transform:rotate(-7deg); }
.login-visual::after{ height:178px; bottom:-88px; left:24%; background:rgba(190,244,236,.48); transform:rotate(8deg); }
.login-visual-inner{
  height:100%;
  min-height:628px;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:55px 58px 30px;
}
.login-brand-logo{ width:min(235px,68%); height:auto; object-fit:contain; object-position:left center; }
.login-welcome{ margin-top:34px; max-width:455px; }
.login-accent-line{ display:block; width:52px; height:4px; border-radius:999px; margin-bottom:23px; background:linear-gradient(90deg,#24bea7,#0b9387); }
.login-welcome h1{ margin:0; font-size:clamp(1.72rem,2.15vw,2.2rem); line-height:1.08; font-weight:850; letter-spacing:-.035em; color:#0b1c3b; }
.login-welcome p{ max-width:430px; margin:13px 0 0; color:#657391; font-size:1rem; line-height:1.5; }

.network-illustration{ position:relative; height:270px; margin-top:auto; }
.dashboard-device{ position:absolute; left:31%; right:6%; bottom:8px; height:205px; filter:drop-shadow(0 17px 15px rgba(19,71,76,.15)); }
.dashboard-screen{ position:absolute; inset:0 9% 24px 0; border:9px solid #28333c; border-radius:14px 14px 9px 9px; overflow:hidden; background:#fff; }
.dashboard-base{ position:absolute; left:-3%; right:0; bottom:3px; height:22px; border-radius:2px 2px 10px 10px; background:linear-gradient(#dbe4e7,#bcc9ce); clip-path:polygon(4% 0,96% 0,100% 55%,96% 90%,4% 90%,0 55%); }
.dash-top{ height:25px; padding:0 8px; display:flex; align-items:center; justify-content:space-between; background:#eef8f7; border-bottom:1px solid #e9eeef; }
.dash-brand{ padding:2px 5px; border-radius:4px; background:#087f77; color:#fff; font-size:8px; font-weight:800; }
.dash-dot{ width:6px; height:6px; border-radius:50%; border:1px solid #9fb0bd; }
.dash-body{ height:calc(100% - 25px); display:flex; }
.dash-sidebar{ width:39px; padding-top:17px; display:flex; flex-direction:column; gap:15px; align-items:center; background:#273644; }
.dash-sidebar i{ width:15px; height:4px; border-radius:4px; background:#6c8293; }
.dash-content{ flex:1; padding:13px 13px 11px; background:#fbfdfe; }
.dash-title{ width:64px; height:8px; margin-bottom:11px; border-radius:4px; background:#aab5be; }
.dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dash-stats i{ height:45px; border-radius:8px; border:1px solid #edf0f2; background:linear-gradient(140deg,#fff,#f2f7f7); box-shadow:0 3px 7px rgba(0,0,0,.04); }
.dash-chart{ position:relative; height:79px; margin-top:9px; border:1px solid #eaf0f1; border-radius:8px; background:repeating-linear-gradient(to bottom,#fff 0 18px,#edf4f4 19px); overflow:hidden; }
.dash-chart span{ position:absolute; left:10px; right:10px; top:45%; height:3px; border-radius:5px; background:#20b7a3; transform:rotate(-4deg); box-shadow:26px -10px 0 -1px #20b7a3,55px 5px 0 -1px #20b7a3,86px -12px 0 -1px #20b7a3,118px 1px 0 -1px #20b7a3; }
.router-device{ position:absolute; left:1.5%; bottom:0; width:175px; height:80px; border-radius:20px 20px 25px 25px; background:linear-gradient(145deg,#fff,#e9f0f2); box-shadow:0 19px 25px rgba(30,82,85,.18); }
.router-device::after{ content:""; position:absolute; left:18px; right:18px; bottom:-5px; height:10px; border-radius:50%; background:rgba(31,70,74,.13); filter:blur(5px); z-index:-1; }
.router-antenna{ position:absolute; left:52px; bottom:63px; width:9px; height:92px; border-radius:10px 10px 2px 2px; background:linear-gradient(90deg,#f8fbfb,#dce7ea); box-shadow:inset -2px 0 3px rgba(0,0,0,.04); }
.router-face{ height:100%; display:flex; align-items:center; justify-content:center; gap:11px; padding-top:13px; }
.router-face i{ width:6px; height:6px; border-radius:50%; background:#55caba; box-shadow:0 0 5px rgba(85,202,186,.35); }
.network-signal{ position:absolute; left:0; bottom:128px; width:68px; height:58px; opacity:.18; }
.network-signal span{ position:absolute; left:50%; bottom:0; border:8px solid #20b8a5; border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:translateX(-50%) rotate(180deg); }
.network-signal span:nth-child(1){ width:68px; height:42px; }
.network-signal span:nth-child(2){ width:46px; height:29px; bottom:8px; }
.network-signal span:nth-child(3){ width:22px; height:15px; bottom:15px; }

.login-form-panel{ display:flex; background:rgba(255,255,255,.985); }
.login-form-wrap{ width:min(390px,72%); margin:auto; }
.login-heading h2{ margin:0; color:#099786; font-size:1.86rem; font-weight:850; letter-spacing:-.025em; }
.login-heading p{ margin:6px 0 0; color:#6b7895; font-size:.92rem; }
.login-alert{ margin:20px 0 -1px; border-radius:12px; font-size:.86rem; }
.login-form{ margin-top:31px; }
.login-field + .login-field{ margin-top:20px; }
.login-field label{ display:block; margin-bottom:7px; font-weight:800; font-size:.88rem; color:#14203a; }
.login-input-wrap{ height:50px; position:relative; display:flex; align-items:center; border:1.5px solid #cfd6e2; border-radius:13px; background:#fff; box-shadow:0 2px 3px rgba(18,41,65,.025); transition:border-color .15s ease,box-shadow .15s ease; }
.login-input-wrap:focus-within{ border-color:#3cbcac; box-shadow:0 0 0 4px rgba(23,183,163,.10); }
.login-input-wrap > i{ width:47px; text-align:center; color:#a5afc1; font-size:1.15rem; }
.login-input-wrap input{ flex:1; min-width:0; height:100%; border:0; outline:0; padding:0 14px 0 0; color:#1a2944; font:inherit; background:transparent; }
.login-input-wrap input::placeholder{ color:#a5aec0; }
.password-toggle{ width:46px; height:100%; border:0; background:transparent; color:#9ba7bb; font-size:1.1rem; display:grid; place-items:center; }
.login-options{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#53617d; font-size:.92rem; }
.login-options a{ color:#078f82; text-decoration:none; }
.login-options a:hover{ text-decoration:underline; }
.remember-email{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.remember-email input{ position:absolute; opacity:0; pointer-events:none; }
.remember-box{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; border:1.5px solid #9cadba; background:#fff; color:transparent; transition:.15s ease; }
.remember-email input:checked + .remember-box{ border-color:#0e9689; background:#0e9689; color:#fff; }
.remember-box i{ font-size:.95rem; font-weight:900; line-height:1; }
.login-submit{ width:100%; height:50px; margin-top:25px; border:0; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:18px; color:#fff; font-size:1.03rem; font-weight:800; background:linear-gradient(180deg,#18b5a3,#0d9489); box-shadow:0 8px 18px rgba(10,148,135,.17); transition:transform .15s ease,filter .15s ease,box-shadow .15s ease; }
.login-submit:hover{ filter:brightness(.98); box-shadow:0 10px 22px rgba(10,148,135,.23); transform:translateY(-1px); }
.login-submit:active{ transform:translateY(0); }
.login-submit i{ font-size:1.15rem; }
.login-divider{ position:relative; margin:25px 0 20px; text-align:center; color:#65728b; font-size:.84rem; font-weight:700; }
.login-divider::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#dfe5ec; }
.login-divider span{ position:relative; z-index:1; padding:0 22px; background:#fff; }
.login-register{ width:100%; height:49px; display:flex; align-items:center; justify-content:center; gap:11px; border:1.5px solid #69cfc1; border-radius:12px; color:#0b9386; text-decoration:none; font-weight:800; transition:.15s ease; }
.login-register:hover{ color:#087f75; background:#f2fffc; border-color:#42bdad; }
.login-mobile-brand{ display:none; }
.login-security-note{ position:fixed; z-index:2; bottom:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; color:#71819a; font-size:.92rem; white-space:nowrap; }
.login-security-note i{ color:#17ae9b; font-size:1.25rem; }

@media (max-width:1000px){
  body.login-page{ padding:28px 18px 54px; align-items:flex-start; }
  .login-shell{ width:min(520px,100%); min-height:0; display:block; border-width:5px; border-radius:30px; margin:auto; }
  .login-visual{ display:none; }
  .login-form-panel{ min-height:560px; padding:34px 26px; flex-direction:column; }
  .login-mobile-brand{ display:flex; align-items:center; gap:10px; margin:0 auto 34px; }
  .login-mobile-brand img{ width:132px; height:auto; }
  .login-mobile-brand span{ font-weight:850; font-size:1.02rem; color:#10203e; white-space:nowrap; }
  .login-form-wrap{ width:100%; margin:auto; }
  .login-heading{ text-align:left; }
  .login-form{ margin-top:28px; }
  .login-security-note{ position:absolute; bottom:16px; font-size:.82rem; }
}
@media (max-width:520px){
  body.login-page{ padding:14px 10px 50px; }
  .login-shell{ border-width:3px; border-radius:24px; }
  .login-form-panel{ padding:26px 20px 28px; min-height:535px; }
  .login-mobile-brand{ margin-bottom:28px; }
  .login-mobile-brand img{ width:118px; }
  .login-mobile-brand span{ font-size:.9rem; }
  .login-heading h2{ font-size:1.65rem; }
  .login-heading p{ font-size:.92rem; }
  .login-form{ margin-top:24px; }
  .login-field + .login-field{ margin-top:21px; }
  .login-options{ align-items:flex-start; font-size:.82rem; gap:10px; }
  .login-input-wrap{ height:50px; }
  .login-submit{ height:50px; margin-top:24px; }
  .login-divider{ margin:23px 0 19px; }
  .login-register{ height:49px; }
  .login-security-note{ max-width:calc(100vw - 20px); white-space:normal; text-align:center; justify-content:center; }
}