/* WRA ONE — Login Concept A / Obsidian Executive */
body.auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  padding: 80px 7vw 80px 52vw;
  background: #06111f url('/assets/wra-login-bg.png') center/cover fixed no-repeat;
  color: #f7f4ec;
}

body.auth::before {
  content: '';
  position: fixed;
  z-index: 2;
  top: 38px;
  left: 46px;
  width: 245px;
  height: 82px;
  background: url('/assets/wra-logo.png') left center/contain no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.42));
}

body.auth::after {
  content: 'ONE PLATFORM.\A EVERY OPERATION.\A\A PEOPLE  •  PROCESS  •  PERFORMANCE';
  position: fixed;
  z-index: 2;
  left: 6vw;
  bottom: 9vh;
  white-space: pre-line;
  color: rgba(246,248,251,.92);
  font-size: clamp(16px, 1.55vw, 25px);
  font-weight: 750;
  line-height: 1.34;
  letter-spacing: .12em;
  text-shadow: 0 3px 20px rgba(0,0,0,.7);
}

body.auth .login {
  position: relative;
  z-index: 5;
  width: min(430px, 92vw);
  padding: 34px 36px 32px;
  gap: 12px;
  color: #f8fafc;
  background: linear-gradient(145deg, rgba(13,28,43,.94), rgba(5,14,25,.91));
  border: 1px solid rgba(222,174,71,.42);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

body.auth .login::before {
  content: 'SECURE ACCESS';
  justify-self: end;
  color: #d9ad4f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

body.auth .login .mark {
  width: 64px;
  height: 64px;
  margin: -20px 0 5px;
  font-size: 0;
  background: transparent url('/assets/wra-icon.png') center/contain no-repeat;
  box-shadow: none;
}

body.auth .login .login-logo {
  max-width: 180px;
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
}

body.auth .login h1 {
  margin: 0;
  color: #fff;
  font-size: 0;
  letter-spacing: -.025em;
}

body.auth .login h1::before {
  content: 'WRA Control';
  font-size: 29px;
}

body.auth .login p { color: #9db0c5; margin: -3px 0 8px; font-size: 0; }
body.auth .login p::before { content: 'One Platform. Every Operation.'; font-size: 14px; }
body.auth .login label { color: #dce6ef; font-size: 13px; font-weight: 650; }
body.auth .login input {
  color: #fff;
  background: rgba(3,12,21,.72);
  border: 1px solid #284158;
  border-radius: 10px;
  padding: 12px 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
body.auth .login input:focus {
  border-color: #d6a841;
  box-shadow: 0 0 0 3px rgba(214,168,65,.14);
}
body.auth .login button {
  margin-top: 8px;
  padding: 13px 16px;
  color: #07111d;
  background: linear-gradient(135deg, #f2d47d, #bd8425);
  border: 0;
  border-radius: 10px;
  font-weight: 850;
  box-shadow: 0 12px 28px rgba(181,126,30,.24);
}
body.auth .login button:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.auth .login .error { color: #ffb6b6; background: rgba(164,35,45,.22); border: 1px solid rgba(255,90,98,.35); border-radius: 9px; padding: 9px 11px; }

@media (max-width: 820px) {
  body.auth { padding: 118px 20px 28px; overflow: auto; place-items: center; background-position: 42% center; }
  body.auth::before { top: 20px; left: 22px; width: 190px; height: 64px; }
  body.auth::after { display: none; }
  body.auth .login { padding: 30px 26px 27px; }
}

@media (prefers-reduced-motion: reduce) {
  body.auth .login button { transition: none; }
}