.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  padding: 32px;
  background: radial-gradient(circle at 10% 10%, #e2f3ff 0, transparent 31%), #f2f7fc;
}

.login-card {
  width: min(1040px, 100%);
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(15, 39, 65, .16);
}

.login .login-form {
  order: 1;
  display: grid;
  place-items: center;
  padding: 58px;
}

.login .login-art {
  order: 2;
  display: grid;
  place-items: center;
  padding: 64px;
  background: linear-gradient(145deg, #07172c, #0b345a);
}

.login .login-art::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(25, 190, 208, .09);
  filter: blur(60px);
  top: 40px;
  right: 30px;
}

.login .login-art::after {
  width: 380px;
  height: 380px;
  right: -160px;
  bottom: -190px;
  border-radius: 38px;
  transform: rotate(-9deg);
  border: 1px solid rgba(81, 188, 255, .16);
  box-shadow: 0 0 0 38px rgba(48, 153, 221, .025);
}

.login .auth-card { width: min(420px, 100%); }
.login-logo { display: block; width: 245px; height: auto; margin: 0 0 65px; }
.auth-copy { margin-bottom: 28px; }
.login .auth-card h2 { margin: 0 0 7px; font-size: 27px; }
.auth-copy p { margin: 0; color: var(--muted); }

.login .login-copy { max-width: 390px; text-align: center; z-index: 1; }
.login .login-copy h1 { margin: 25px 0 16px; font-size: 32px; line-height: 1.18; letter-spacing: -1px; }
.login .login-copy p { font-size: 15px; line-height: 1.7; color: #bdcee0; }

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(94, 190, 255, .25);
  border-radius: 30px;
  background: rgba(255, 255, 255, .06);
  color: #c8def1;
  font-size: 12px;
  font-weight: 650;
}

.trust-pill i { width: 6px; height: 6px; border-radius: 50%; background: #42c9e3; }
.trust-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 38px; }
.trust-stats b, .trust-stats span { display: block; }
.trust-stats b { color: #48b8ff; font-size: 20px; }
.trust-stats span { margin-top: 5px; color: #8ca8c2; font-size: 11px; }
.secure-note { margin-top: 22px; color: #6f8295; font-size: 12px; }
.secure-note span { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 7px; border-radius: 50%; background: #dcf8e8; color: #11955e; font-weight: 800; }
.login .btn.primary { background: linear-gradient(90deg, #16a9dc, #3973ff); }

.sidebar .brand span { display: none; }
.sidebar .brand img { content: url('/assets/logo.png'); width: 185px; height: auto; }

@media (max-width: 950px) {
  .login-card { max-width: 560px; min-height: 0; grid-template-columns: 1fr; }
  .login .login-art { display: none; }
  .sidebar .brand img { content: url('/assets/logo-mark.png'); width: 42px; height: 42px; }
}

@media (max-width: 600px) {
  .login { padding: 16px; }
  .login .login-form { padding: 36px 28px; }
  .login-logo { width: 210px; margin-bottom: 45px; }
}

/* Brand balance refinement */
.login-logo {
  width: 330px;
  max-width: 100%;
  margin: 0 auto 62px;
}

.sidebar {
  background: #3f4b5a;
  color: #d7dee8;
}

.sidebar .brand {
  justify-content: center;
  margin: -4px -2px 0;
  padding: 12px 10px 22px;
  border-bottom-color: rgba(255, 255, 255, .13);
}

.sidebar .brand img {
  width: 194px;
  border-radius: 8px;
}

.nav button:hover,
.nav button.active {
  background: #2f6fb5;
  color: #fff;
}

.nav .section { color: #aab6c5; }
.side-user { border-top-color: rgba(255, 255, 255, .13); }
.main { background: #edf5ff; }
.top { background: #dcecff; border-bottom-color: #c8ddf5; }
.content { min-height: calc(100vh - 72px); }

@media (max-width: 950px) {
  .sidebar .brand { margin: -4px -8px 0; padding-inline: 6px; }
  .sidebar .brand img { width: 46px; height: 46px; border-radius: 7px; }
}

@media (max-width: 600px) {
  .login-logo { width: 275px; margin-bottom: 48px; }
}

/* White navigation + dark brand workspace */
.sidebar {
  background: #fff;
  color: #43536a;
  border-right: 1px solid #e4eaf1;
  box-shadow: 8px 0 30px rgba(4, 18, 35, .08);
}

.sidebar .brand {
  margin: 0;
  padding: 2px 4px 25px;
  border: 0;
  justify-content: center;
}

.sidebar .brand img {
  width: 205px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav { border-top: 1px solid #edf1f5; padding-top: 22px; }
.nav button { color: #53647a; font-weight: 570; }
.nav button:hover { background: #eff7ff; color: #126eb9; }
.nav button.active {
  background: linear-gradient(90deg, #e8f6ff, #eef2ff);
  color: #0d67b2;
  box-shadow: inset 3px 0 #18bcd1;
}
.nav .section { color: #92a0b2; }
.side-user { border-top-color: #e8edf3; }
.side-user strong { color: #17243a; }
.side-user span { color: #78879a; }

.main {
  background:
    radial-gradient(circle at 88% 3%, rgba(25, 190, 208, .17), transparent 28%),
    linear-gradient(145deg, #071425 0%, #0a2440 55%, #0b3154 100%);
}

.top {
  background: rgba(6, 19, 35, .84);
  border-bottom-color: rgba(103, 174, 226, .16);
  color: #fff;
  backdrop-filter: blur(16px);
}
.top .btn { color: #c8daec; }
.content { min-height: calc(100vh - 72px); }
.toolbar h2 { color: #fff; }

.content .stat,
.content .card {
  background: rgba(14, 39, 66, .86);
  border-color: rgba(91, 159, 210, .18);
  color: #f5f9ff;
  box-shadow: 0 14px 34px rgba(0, 7, 17, .16);
}
.content .stat .label,
.content .stat .sub,
.content .card p,
.content .empty,
.content td { color: #aebfd2; }
.content .empty b,
.content td b,
.content .card-head h2 { color: #f5f9ff; }
.content th { color: #7895b1; }
.content th,
.content td { border-bottom-color: rgba(112, 164, 204, .14); }
.content .progress { background: rgba(255, 255, 255, .1); }

@media (max-width: 950px) {
  .sidebar .brand { margin: 0; padding: 3px 4px 22px; }
  .sidebar .brand img { width: 48px; height: 48px; }
}