.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 42px;
  background:
    radial-gradient(circle at 12% 10%, #cbeaff 0, transparent 32%),
    linear-gradient(120deg, #e9f7ff 0%, #f7fbff 52%, #e8f5fd 100%);
}

.login-shell {
  width: min(980px, 88vw);
  min-height: 550px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 58px rgba(34, 105, 150, .18);
}

.login-showcase {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px;
  color: #fff;
  background: linear-gradient(145deg, #075a91 0%, #0b75b8 58%, #1188d1 100%);
}

.orb {
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}

.orb-top { left: -180px; top: -130px; }
.orb-bottom { right: -205px; bottom: -190px; }

.login-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.login-brand img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #fff;
}

.login-brand strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .5px;
}

.login-brand span {
  display: block;
  margin-top: 6px;
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: .4px;
}

.showcase-copy { position: relative; z-index: 1; }
.showcase-copy h2 { margin: 0 0 14px; font-size: 25px; font-weight: 800; }
.showcase-copy p { margin: 0; color: #eef8ff; font-size: 14px; line-height: 1.75; }
.login-panel { display: grid; place-items: center; padding: 44px 54px; background: #fff; }
.login-form-wrap { width: 100%; max-width: 390px; }
.eyebrow { margin-bottom: 8px; color: #0070d4; font-family: Georgia, serif; font-weight: 800; }
.login-form-wrap h1 { margin: 0; color: #111827; font-size: 32px; line-height: 1.1; }
.login-intro { margin: 9px 0 38px; color: #63708a; font-size: 14px; }
.login-field { margin-bottom: 15px; }
.login-field label { display: block; margin-bottom: 6px; color: #25324a; font-family: Georgia, serif; font-weight: 700; }
.input-wrap { position: relative; }

.input-wrap input {
  height: 54px;
  padding: 0 82px 0 15px;
  border: 1px solid #c9d6e3;
  border-radius: 12px;
  background: #fbfdff;
  font-size: 16px;
}

.input-wrap input:focus { border-color: #148de3; outline: 4px solid #d8efff; }
.input-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; }
.password-toggle { position: absolute; z-index: 2; right: 56px; top: 50%; transform: translateY(-50%); padding: 5px; background: transparent; color: #263342; font-size: 20px; }
.password-toggle:hover { background: transparent; }

.login-submit {
  width: 100%;
  height: 54px;
  margin-top: 10px;
  border-radius: 12px;
  background: linear-gradient(90deg, #0f83d3, #075c93);
  box-shadow: 0 14px 28px rgba(9, 112, 178, .23);
  font-family: Georgia, serif;
  font-size: 17px;
}

.secure-note { margin-top: 22px; color: #8795b2; text-align: center; font-size: 12px; }

@media (max-width: 900px) {
  .login-screen { padding: 20px; }
  .login-shell { grid-template-columns: 1fr; max-width: 580px; }
  .login-showcase { min-height: 270px; padding: 36px; }
  .login-brand { margin-bottom: 30px; }
  .login-brand img { width: 76px; height: 76px; }
  .login-brand strong { font-size: 29px; }
  .showcase-copy h2 { font-size: 24px; }
  .showcase-copy p { font-size: 14px; }
  .login-panel { padding: 45px 35px; }
  .login-intro { margin-bottom: 34px; }
}

@media (max-width: 520px) {
  .login-screen { display: block; padding: 0; }
  .login-shell { width: 100%; min-height: 100vh; border-radius: 0; }
  .login-showcase { min-height: 220px; padding: 28px 24px; }
  .login-brand { margin-bottom: 24px; }
  .login-brand img { width: 62px; height: 62px; }
  .login-brand strong { font-size: 25px; }
  .login-brand span { font-size: 12px; }
  .showcase-copy h2 { font-size: 21px; }
  .showcase-copy p { line-height: 1.55; }
  .login-panel { padding: 36px 24px; }
  .login-form-wrap h1 { font-size: 32px; }
  .input-wrap input { height: 58px; font-size: 16px; }
}

/* Sidebar identity */
.sidebar-brand {
  min-height: 100px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid #edf2f7;
}

.sidebar-brand img {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
}

.sidebar-brand strong {
  display: block;
  color: #075e91;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2px;
}

.sidebar-brand small {
  display: block;
  margin-top: 5px;
  color: #49647a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .55px;
}