:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #061218;
  color: #f4fbff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(26, 220, 191, .14), transparent 34rem),
    radial-gradient(circle at 82% 78%, rgba(66, 154, 255, .14), transparent 32rem),
    linear-gradient(145deg, #061218 0%, #082532 52%, #071820 100%);
}

.login-glow {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
  pointer-events: none;
}

.login-glow-a { top: -14rem; left: -10rem; background: #21e6c1; }
.login-glow-b { right: -12rem; bottom: -14rem; background: #368dff; }

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.login-card {
  position: relative;
  width: min(100%, 460px);
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid rgba(112, 234, 224, .32);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(8, 32, 43, .96), rgba(5, 21, 29, .98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .06);
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 18px;
  pointer-events: none;
}

.login-brand {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, #66f3d5, #1aa8c1);
  color: #04212a;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(35, 222, 196, .24);
}

.eyebrow {
  margin: 0 0 8px;
  color: #69e8d7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 {
  margin: 0;
  font-size: clamp(31px, 8vw, 44px);
  line-height: 1;
  letter-spacing: -.035em;
}

.login-copy {
  margin: 14px 0 26px;
  color: #b5cbd5;
  font-size: 14px;
  line-height: 1.55;
}
.role-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 18px; padding:6px; border:1px solid rgba(126,200,213,.25); border-radius:14px; background:rgba(2,15,22,.55); }
.role-picker button { min-height:42px; border:0; border-radius:10px; background:transparent; color:#9db4bd; font:800 12px/1 inherit; cursor:pointer; }
.role-picker button[aria-selected="true"] { color:#fff; background:linear-gradient(135deg,rgba(30,190,190,.42),rgba(82,96,235,.4)); box-shadow:inset 0 0 0 1px rgba(108,236,220,.36); }

.login-form { display: grid; gap: 9px; }

.login-form label {
  margin-top: 7px;
  color: #d9eaf0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
}

.login-form input {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(126, 200, 213, .32);
  border-radius: 13px;
  outline: none;
  padding: 0 15px;
  background: rgba(2, 15, 22, .74);
  color: #fff;
  font: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-form input:focus {
  border-color: #5de8d2;
  background: rgba(4, 24, 33, .94);
  box-shadow: 0 0 0 3px rgba(93, 232, 210, .13);
}

.password-field { position: relative; }
.password-field input { padding-right: 76px; }

.password-toggle {
  position: absolute;
  top: 7px;
  right: 7px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  padding: 0 12px;
  background: rgba(77, 206, 191, .14);
  color: #76ead9;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.login-message {
  min-height: 19px;
  margin: 5px 0 0;
  color: #ff8fa8;
  font-size: 12px;
  line-height: 1.45;
}

.login-message.success { color: #6df1c1; }

.login-submit {
  min-height: 52px;
  margin-top: 2px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #64ebd5, #2ab6cf);
  color: #03212a;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(31, 195, 190, .2);
}

.login-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.login-submit:disabled { cursor: wait; filter: saturate(.35); transform: none; opacity: .72; }

.security-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 204, 215, .14);
  color: #7795a1;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-height: 560px) and (orientation: landscape) {
  .login-shell { padding-block: 12px; }
  .login-card { width: min(92vw, 680px); padding: 20px 24px; }
  .login-brand { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; margin: 0; }
  h1 { font-size: 31px; }
  .login-copy { margin: 8px 70px 14px 0; }
  .security-note { display: none; }
}