.auth-shell{
  min-height:100vh;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 18%, rgba(64, 187, 255, .34), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(29, 120, 255, .32), transparent 22%),
    radial-gradient(circle at 78% 82%, rgba(95, 204, 255, .18), transparent 18%),
    linear-gradient(135deg, #0b56b9 0%, #0b4aa3 26%, #083983 58%, #062d69 100%);
  position:relative;
  overflow:hidden;
}

.auth-shell::before,
.auth-shell::after{
  content:"";
  position:absolute;
  inset:auto;
  border-radius:999px;
  pointer-events:none;
  filter: blur(2px);
  opacity:.85;
}

.auth-shell::before{
  width:380px;
  height:120px;
  left:-50px;
  bottom:60px;
  background:linear-gradient(135deg, rgba(173, 228, 255, .34), rgba(101, 182, 255, .08));
  box-shadow: inset -20px -12px 40px rgba(255,255,255,.08), inset 16px 14px 24px rgba(255,255,255,.18);
}

.auth-shell::after{
  width:320px;
  height:110px;
  right:-10px;
  bottom:36px;
  background:linear-gradient(135deg, rgba(173, 228, 255, .36), rgba(100, 169, 255, .12));
  box-shadow: inset -16px -12px 34px rgba(255,255,255,.06), inset 16px 14px 24px rgba(255,255,255,.16);
}

.auth-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.auth-shape{
  position:absolute;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(173, 228, 255, .45), rgba(173, 228, 255, .08));
  box-shadow:
    inset 10px 10px 24px rgba(255,255,255,.14),
    inset -18px -18px 32px rgba(0,0,0,.12),
    0 18px 35px rgba(0,0,0,.18);
  opacity:.8;
}

.auth-shape.s1{ width:86px; height:28px; left:17%; top:32%; transform:rotate(-42deg); }
.auth-shape.s2{ width:56px; height:20px; left:14%; top:41%; transform:rotate(-42deg); }
.auth-shape.s3{ width:130px; height:40px; left:26%; top:56%; transform:rotate(-24deg); }
.auth-shape.s4{ width:160px; height:48px; right:16%; top:24%; transform:rotate(34deg); opacity:.35; }
.auth-shape.s5{ width:90px; height:26px; right:23%; top:52%; transform:rotate(26deg); }
.auth-shape.s6{ width:62px; height:18px; right:19%; top:59%; transform:rotate(26deg); }
.auth-shape.s7{ width:120px; height:34px; left:6%; bottom:18%; transform:rotate(42deg); opacity:.22; }
.auth-shape.s8{ width:120px; height:34px; right:31%; bottom:19%; transform:rotate(118deg); opacity:.22; }
.auth-ring{
  position:absolute;
  width:76px;
  height:76px;
  left:25%;
  top:6%;
  border-radius:50%;
  border:10px solid rgba(40, 225, 255, .16);
  border-top-color: rgba(40, 225, 255, .9);
  border-right-color: rgba(40, 225, 255, .56);
  box-shadow:0 0 18px rgba(40, 225, 255, .25);
}

.auth-grid{
  width:min(1180px, 100%);
  min-height:min(760px, calc(100vh - 48px));
  position:relative;
  display:grid;
  place-items:center;
  padding:44px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(6, 39, 90, .44), rgba(6, 39, 90, .28));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 100px rgba(2, 13, 32, .32), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}

.auth-grid::before{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.04);
}

.auth-card-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.auth-card{
  width:min(430px, 100%);
  background:linear-gradient(180deg, rgba(80, 168, 255, .26), rgba(27, 90, 194, .28));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 22px 60px rgba(2, 13, 32, .35),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
  border-radius:24px;
  color:#f7fbff;
}

.auth-card .card-body{
  padding:34px 30px !important;
}

.auth-brand{
  text-align:center;
  margin-bottom:18px;
}

.auth-brand-mark{
  width:58px;
  height:58px;
  margin:0 auto 10px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  font-weight:800;
  color:#06346d;
  background:linear-gradient(135deg, #d5efff, #73b5ff);
  box-shadow:0 14px 30px rgba(34, 145, 255, .28);
}

.auth-brand-title{
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.01em;
}

.auth-brand-sub{
  color:rgba(233, 244, 255, .68);
  font-size:.9rem;
  margin-top:4px;
}

.auth-title{
  font-weight:700;
  letter-spacing:-.02em;
  font-size:1.45rem;
  margin-bottom:4px;
}

.auth-subtitle{
  color:rgba(233, 244, 255, .72);
  font-size:.92rem;
}

.auth-form{
  margin-top:22px;
}

.auth-form .form-label{
  font-size:.82rem;
  font-weight:600;
  color:rgba(247, 251, 255, .85);
  margin-bottom:7px;
}

.auth-form .form-control{
  min-height:44px;
  border-radius:9px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
  font-size:.92rem;
}

.auth-form .form-control:focus{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 .2rem rgba(146, 208, 255, .22);
}

.auth-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 18px;
  color:rgba(233, 244, 255, .78);
  font-size:.84rem;
}

.auth-meta a{
  color:#dff2ff;
  text-decoration:none;
}

.auth-submit{
  min-height:46px;
  border:0;
  border-radius:10px;
  background:linear-gradient(180deg, #0b356f, #082955);
  color:#fff;
  font-weight:700;
  box-shadow:0 14px 28px rgba(2, 13, 32, .25);
}

.auth-submit:hover{
  background:linear-gradient(180deg, #0d3e80, #093161);
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 14px;
  color:rgba(233, 244, 255, .62);
  font-size:.8rem;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.14);
}

.auth-social{
  display:flex;
  justify-content:center;
  gap:10px;
}

.auth-social-btn{
  width:42px;
  height:34px;
  border-radius:8px;
  display:grid;
  place-items:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.92);
  color:#0b2d62;
  font-weight:700;
}

.auth-footer-note{
  text-align:center;
  margin-top:14px;
  color:rgba(233, 244, 255, .62);
  font-size:.74rem;
}

.auth-footer-note a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

.auth-theme-toggle{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  border-radius:999px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
}

.auth-page-note{
  position:absolute;
  left:28px;
  bottom:20px;
  z-index:2;
  color:rgba(222, 239, 255, .55);
  font-size:.82rem;
}

.form-check-input:checked{
  background-color:#0b356f;
  border-color:#0b356f;
}

html[data-theme="dark"] .auth-card{
  background:linear-gradient(180deg, rgba(53, 127, 214, .24), rgba(18, 62, 136, .36));
}

@media (max-width: 991.98px){
  .auth-shell{ padding:14px; }
  .auth-grid{
    min-height:calc(100vh - 28px);
    padding:18px;
  }
  .auth-page-note{
    display:none;
  }
  .auth-ring{ left:12%; top:5%; }
}

@media (max-width: 575.98px){
  .auth-card .card-body{
    padding:28px 20px !important;
  }
  .auth-grid{
    padding:12px;
    border-radius:22px;
  }
  .auth-shape.s4,
  .auth-shape.s7,
  .auth-shape.s8{
    display:none;
  }
}