/* Account screen uses the approved app icon as its illustration. */
.auth-view {
  position:relative;
  isolation:isolate;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:hidden;
  background:#071b2d;
  padding:calc(var(--ui-safe-top) + 36px) max(5vw,24px) calc(var(--ui-safe-bottom) + 36px);
}
.auth-art {
  position:absolute;
  z-index:-2;
  inset:0 34% 0 0;
  background:url('/assets/icon-512-v0.1.40.png') center / cover no-repeat;
}
.auth-art::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,27,45,.05) 42%,#071b2d 99%),linear-gradient(0deg,rgba(7,27,45,.6),transparent 40%);
}
.auth-card {
  position:relative;
  width:min(410px,42%);
  margin:0;
  padding:32px;
  border:1px solid rgba(175,239,232,.2);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(21,53,73,.9),rgba(9,28,47,.96));
  box-shadow:0 24px 80px rgba(0,10,22,.42),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.auth-heading {display:flex;gap:14px;align-items:center;margin-bottom:24px;}
.auth-logo {width:52px;height:52px;border-radius:16px;object-fit:cover;box-shadow:0 4px 16px rgba(0,0,0,.18);}
.auth-card h1 {text-align:left;font-size:25px;line-height:1.1;letter-spacing:-.045em;margin:0 0 5px;}
.auth-welcome {color:#a7ccc9;font-size:13px;}
.auth-tabs {gap:4px;margin:0 0 24px;padding:4px;border:1px solid rgba(184,230,234,.12);border-radius:15px;background:rgba(4,17,31,.48);}
.auth-tabs .tab {min-height:44px;border:0;border-radius:11px;font-size:13px;font-weight:700;color:#b0c7d5;padding:9px 6px;}
.auth-tabs .tab.active {background:rgba(140,231,210,.13);color:#b7f6e3;box-shadow:inset 0 0 0 1px rgba(148,230,212,.28);}
.auth-card form {gap:17px;}
.auth-card label {font-size:12px;letter-spacing:.02em;color:#cfdfeb;gap:8px;font-weight:600;}
.auth-card input {min-height:52px;border-radius:13px;background:rgba(3,16,29,.64);border:1px solid rgba(173,212,230,.18);padding:12px 14px;color:#f6fcff;}
.auth-card input::placeholder {color:#728d9f;font-weight:400;}
.auth-card input:focus {outline:2px solid #9de6d0;outline-offset:2px;}
.auth-card input[aria-invalid=true] {border-color:#ffadb1;}
.auth-card button:focus-visible {outline:2px solid #b7f6e3;outline-offset:3px;}
.auth-password-field {position:relative;display:block;}
.auth-password-field input {padding-right:70px;}
.auth-password-toggle {position:absolute;right:7px;top:4px;min-height:44px;border:0;background:none;padding:0 10px;border-radius:9px;font-size:12px;font-weight:700;color:#b1ded5;}
.auth-password-toggle:hover {background:rgba(140,231,210,.1);}
.auth-password-hint {font-size:11px;font-weight:400;color:#93b1c0;letter-spacing:0;}
.auth-caps-warning {color:#ffdf93;}
.auth-card .primary {margin-top:5px;min-height:52px;border-radius:14px;font-size:16px;background:linear-gradient(120deg,#b6f2d4,#77d8d0);box-shadow:0 8px 24px rgba(92,213,179,.14);}
.auth-card .primary:disabled {opacity:.7;cursor:wait;}
.auth-card .message {min-height:0;padding-top:0;font-size:12px;line-height:1.5;text-align:left;}
.auth-card .message:not(:empty) {margin-top:16px;padding:12px;border-radius:12px;background:rgba(4,17,31,.5);}
.auth-card .message.error {color:#ffc5c6;border:1px solid rgba(255,154,160,.22);}
@media(max-width:700px) {
  .auth-view {align-items:flex-end;justify-content:center;min-height:100svh;padding:calc(var(--ui-safe-top) + 280px) 20px calc(var(--ui-safe-bottom) + 26px);}
  .auth-art {inset:0 0 auto;height:560px;background-position:center -16px;background-size:max(100vw,440px) auto;}
  .auth-art::after {background:linear-gradient(0deg,#071b2d 0%,rgba(7,27,45,.93) 12%,rgba(7,27,45,.2) 38%,transparent 68%);}
  .auth-card {width:min(410px,100%);padding:24px;border-radius:25px;background:linear-gradient(145deg,rgba(21,53,73,.85),rgba(9,28,47,.97));}
  .auth-heading {margin-bottom:21px;}
  .auth-logo {width:46px;height:46px;border-radius:13px;}
  .auth-card h1 {font-size:23px;}
}
@media(max-width:380px) {.auth-view {padding-left:14px;padding-right:14px;} .auth-card {padding:21px;} }
@media(max-height:620px) and (max-width:700px) {
  .auth-view {align-items:center;padding-top:calc(var(--ui-safe-top) + 22px);padding-bottom:calc(var(--ui-safe-bottom) + 22px);}
  .auth-art {opacity:.35;background-position:center top;}
}