.login-wrap { background: #fff; }
.login-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}
.login-identity {
  --gutter: clamp(30px, 4.4vw, 86px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(max-content, .75fr) minmax(0, 1.65fr);
  gap: clamp(18px, 3.2vh, 38px);
  padding: clamp(28px, 5vh, 68px) var(--gutter);
  color: #f7f9ff;
  background: #070b16;
}
.login-identity .brand img { width: 38px; height: 38px; }
.login-identity .brand b { font-size: 22px; }
.login-identity .brand small { color: #b5c4da; }
.identity-copy { position: relative; z-index: 1; align-self: center; }
.identity-copy h2 { margin: 0; font-size: clamp(31px, 3.2vw, 58px); letter-spacing: -.045em; line-height: 1.24; }
.identity-copy p { margin: 12px 0 0; color: #b5c4da; font-size: clamp(15px, 1.2vw, 19px); }
.identity-art {
  position: relative;
  align-self: stretch;
  margin-inline: calc(0px - var(--gutter));
}
.identity-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mask-image: linear-gradient(0deg, transparent, #000 12%, #000 86%, transparent);
}
.login-card {
  --form-width: 420px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-content: center;
  grid-template-columns: minmax(0, var(--form-width));
  align-items: center;
  gap: clamp(24px, 5vh, 58px);
  min-width: 0;
  padding: clamp(28px, 5vh, 68px) clamp(26px, 4vw, 84px);
  background: #fff;
}
.login-back, .login-other a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.login-back { justify-self: start; color: var(--muted); font-size: 14px; }
.login-back .icon, .login-other .icon { width: 15px; height: 15px; }
.login-fields { display: grid; gap: 22px; min-width: 0; }
.login-fields h1 { margin: 0; font-size: clamp(29px, 2.3vw, 42px); letter-spacing: -.045em; line-height: 1.24; }
.login-fields header p { margin-top: 9px; color: var(--muted); font-size: 15px; }
.login-fields .error { margin: 0; }
.login-fields .error:empty { display: none; }
.staff-login, .login-field { display: grid; min-width: 0; }
.staff-login { gap: 18px; }
.login-field { gap: 7px; font-size: 14px; font-weight: 600; }
.staff-login input, .invite-form :is(input,select), .invite-created input {
  min-width: 0; background: #fff; color: #16263a; border: 1px solid #b4c1d2;
  border-radius: 7px; min-height: 42px; padding: 8px 12px; font-size: 15px; font-weight: 400;
}
.staff-login input { width: 100%; min-height: 48px; }
.staff-login input::placeholder { color: #697a8f; }
.staff-login .btn.primary { min-height: 48px; margin-top: 4px; justify-content: center; }
.preview-login-note { text-align: center; font-size: 13px; }
.login-switch { text-align: center; font-size: 14px; color: var(--muted); }
.login-switch a { font-weight: 600; }
.login-other { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; }
.login-other span { color: var(--muted); margin-right: auto; }
@media (max-width: 760px) {
  .login-box { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; }
  .login-identity { display: flex; align-items: center; padding: 22px clamp(20px, 6vw, 44px); min-height: 92px; }
  .login-identity .brand { z-index: 1; }
  .login-identity .brand b { font-size: 20px; }
  .identity-copy { display: none; }
  .identity-art { position: absolute; inset: 0 0 0 auto; width: min(32%, 180px); margin: 0; }
  .identity-art img { object-position: right center; mask-image: linear-gradient(90deg, transparent, #000 36%); }
  .login-card { --form-width: 460px; align-items: start; gap: 28px; padding: 20px clamp(20px, 6vw, 44px) max(18px, env(safe-area-inset-bottom)); }
  .login-fields { gap: 20px; }
  .login-other { gap: 4px 12px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .login-card { padding-block: 20px; gap: 20px; }
  .login-identity { padding-block: 25px; }
}
.invite-form-panel { padding: 24px; }
.invite-form-panel h2 { margin: 0 0 15px; }
.provision-switch { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 8px; background: var(--bg,#eef2f6); }
.provision-switch .btn { border-color: transparent; background: transparent; color: var(--muted); }
.provision-switch .btn[aria-pressed=true] { background: #fff; color: #244e99; border-color: var(--line); }
.invite-form { display: grid; gap: 16px; margin-top: 16px; max-width: 840px; }
.invite-form[hidden] { display: none; }
.invite-form > .login-field { max-width: 330px; }
.invite-form > button { justify-self: start; }
.mode-note { color: var(--muted); margin: 0; }
.direct-fields, .invite-extra-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.invite-options { border-top: 1px solid var(--line); padding: 12px 0 0; }
.invite-options summary { cursor: pointer; font-size: 14px; color: #365583; }
.invite-extra-fields { margin: 14px 0 0; }
.invite-extra-fields small { color: var(--muted); font-weight: 400; }
.invite-form .btn { min-height: 42px; }
.invite-form label, .invite-created label { font-size: 13px; }
.invite-form input, .invite-form select { min-width: 0; width: 100%; }
.invite-created { margin-top: 18px; border: 1px solid #b5d3ce; background: #f2faf7; padding: 15px; border-radius: 8px; }
.invite-copy { display: flex; align-items: end; gap: 10px; margin-top: 12px; max-width: 760px; }
.invite-copy label { flex: 1; }
.invite-copy .btn { min-height: 42px; }
.more-account-records { margin: 12px 24px; }
#access-search { padding: 14px clamp(14px,2vw,24px); margin: 0; }
#access-search .search-field input { padding-left: 12px; }
#account-access-dialog { max-width:min(480px,calc(100vw - 24px)); }
#account-access-dialog .dialog-body { overflow-wrap:anywhere; }
#account-profile-dialog { width:min(470px,calc(100vw - 24px)); max-height:90dvh; }
#account-profile-dialog .dialog-body { display:grid; gap:14px; }
#account-profile-dialog .dialog-body p { margin:0; color:var(--muted); overflow-wrap:anywhere; }
#account-profile-dialog summary { cursor:pointer; color:var(--blue); }
#account-profile-dialog details[open] .login-field { margin-top:12px; }
#account-access-dialog [data-access-impact] { margin:10px 0 0; line-height:1.65; color:var(--muted); }
#account-access-dialog[data-intent=archived] .btn.primary { background:#a22b26; border-color:#a22b26; }
button[data-access-action=archived] { color:#9c302d; }
#account-feedback:not(:empty) { color: #9c302d; margin-top: 15px; }
.invite-empty { color: var(--muted); padding: 0 24px 20px; }
#invite-result:not(:empty) { margin-top: 12px; }
@media (max-width: 760px) {
  .direct-fields, .invite-extra-fields { grid-template-columns: minmax(0,1fr); }
  .invite-form-panel { padding: 16px; }
  .invite-copy { flex-wrap: wrap; }
  .invite-copy label { min-width: min(100%,170px); }
}