@charset "UTF-8";
:root { color-scheme: dark; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #eaf5f1; background: #071219; font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
html,body { min-height: 100%; margin: 0; }
body { min-height: 100dvh; line-height: 1.5; letter-spacing: -.01em; }
[hidden] { display: none !important; }
button,input { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
::selection { background: #a7e9cf; color: #0e2c23; }
:focus-visible { outline: 2px solid #bdffe4; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

#auth-background,.auth-backdrop { position: fixed; inset: 0; width: 100%; height: 100dvh; pointer-events: none; }
#auth-background { z-index: 0; object-fit: cover; object-position: center; background: #071219; }
.auth-backdrop { z-index: 0; background: radial-gradient(ellipse at 50% 48%,rgba(3,13,19,0) 0%,rgba(3,13,19,.05) 45%,rgba(3,13,19,.12) 100%),linear-gradient(180deg,rgba(3,12,18,.03),rgba(3,12,18,0) 50%,rgba(3,12,18,.08)); }
.auth-layout { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100dvh; padding: 64px 24px; }
.auth-card {
  position: relative; width: min(380px,100%); padding: 34px 31px 32px;
  border: 1px solid rgba(204,239,230,.22); border-radius: 23px;
  background: linear-gradient(145deg,rgba(21,42,47,.78),rgba(8,24,32,.84));
  box-shadow: 0 28px 90px rgba(0,5,11,.42),0 4px 24px rgba(0,8,14,.2),inset 0 1px rgba(235,255,246,.09);
  -webkit-backdrop-filter: blur(28px) saturate(125%); backdrop-filter: blur(28px) saturate(125%);
}
.auth-card::before { position: absolute; top: -1px; left: 21%; right: 21%; height: 1px; content: ""; background: linear-gradient(90deg,transparent,rgba(213,255,237,.7),transparent); pointer-events: none; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 34px; color: #f1fcf7; }
.auth-brand img { width: 31px; height: 31px; border: 1px solid rgba(200,249,226,.19); border-radius: 9px; box-shadow: 0 3px 12px rgba(0,0,0,.14); }
.auth-brand > span { font-size: 22px; font-weight: 650; letter-spacing: -.045em; }
.auth-brand small { margin-left: 2px; color: #a8c5bd; font-size: 10px; font-weight: 550; letter-spacing: .025em; }
.auth-description:empty { display: none; }
.auth-description { margin: -6px 0 23px; color: #b5cbc7; font-size: 12px; line-height: 1.7; }
#auth-form label { display: block; margin: 19px 0 8px; color: #cfe4dd; font-size: 11px; font-weight: 500; letter-spacing: .01em; }
#auth-form > label:first-child { margin-top: 0; }
#auth-form input {
  display: block; width: 100%; min-height: 51px; padding: 13px 14px;
  border: 1px solid rgba(178,216,210,.24); border-radius: 10px; outline: none;
  background: rgba(4,19,27,.57); box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
  color: #f3fcf8; font-size: 14px; line-height: 1.55; letter-spacing: .01em;
  transition: border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#auth-form input:hover:not(:disabled) { border-color: rgba(186,234,219,.42); }
#auth-form input:focus { border-color: #b3efd3; background: rgba(7,27,33,.74); box-shadow: 0 0 0 3px rgba(164,233,204,.1); }
#auth-form input:disabled { opacity: .48; }
#auth-form input:-webkit-autofill { -webkit-text-fill-color: #f1fbf7; -webkit-box-shadow: 0 0 0 1000px #10282d inset; caret-color: #f1fbf7; }
.auth-password-shell { position: relative; }
#auth-form .auth-password-shell input { padding-right: 49px; }
#auth-password-toggle { position: absolute; top: 50%; right: 7px; display: grid; place-items: center; width: 37px; height: 37px; padding: 10px; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #8eaea8; }
#auth-password-toggle:hover { color: #e2fff0; background: rgba(201,245,224,.06); }
#auth-password-toggle svg { width: 17px; height: 17px; }
#auth-password-toggle[data-visible="false"] .password-visible,#auth-password-toggle[data-visible="true"] .password-hidden { display: none; }
.auth-field-note { margin: 7px 1px 0; color: #9cbcb0; font-size: 10px; }
.auth-submit {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  width: 100%; min-height: 49px; margin-top: 27px; padding: 12px 16px;
  border: 1px solid rgba(223,255,237,.75); border-radius: 10px;
  background: linear-gradient(180deg,#c8f7df,#b8edcf);
  box-shadow: 0 5px 20px rgba(111,207,157,.09),inset 0 1px rgba(255,255,255,.6);
  color: #13392b; font-size: 12px; font-weight: 650; letter-spacing: .005em;
  transition: background .16s ease,box-shadow .16s ease;
}
.auth-submit:hover:not(:disabled) { background: #d6ffe9; box-shadow: 0 6px 25px rgba(137,229,181,.18),inset 0 1px rgba(255,255,255,.65); }
.auth-submit:active:not(:disabled) { background: #b9edcf; box-shadow: inset 0 2px 4px rgba(16,58,38,.09); }
.auth-submit:disabled { opacity: .42; }
.auth-submit svg { width: 15px; height: 15px; }
.auth-error { margin-top: 17px; padding: 10px 12px; border: 1px solid rgba(239,161,150,.25); border-radius: 9px; background: rgba(112,38,33,.2); color: #f9c3ba; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-status { margin: 17px 0 0; color: #9fbdb2; font-size: 10px; line-height: 1.65; text-align: center; }
.auth-status:empty,body[data-auth-state="submitting"] .auth-status { display: none; }
.auth-retry { display: block; margin: 7px auto -3px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: #c2e3d5; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.auth-retry:hover { color: #eafff2; background: rgba(197,241,218,.05); }
body[data-auth-state="setup-pending"] .auth-status { color: #b3c9bd; }
body[data-auth-state="setup-pending"] #auth-password-toggle { opacity: .48; }

.auth-footer { position: fixed; right: max(22px,env(safe-area-inset-right)); bottom: max(22px,env(safe-area-inset-bottom)); z-index: 2; }
#auth-motion { display: grid; place-items: center; width: 38px; height: 38px; padding: 10px; border: 1px solid rgba(196,229,218,.19); border-radius: 50%; background: rgba(6,23,30,.45); color: #b6d3c8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: color .16s ease,border-color .16s ease; }
#auth-motion:hover { border-color: rgba(198,245,220,.44); color: #e5fff1; }
#auth-motion svg { width: 16px; height: 16px; }
#auth-motion[data-paused="true"] .motion-pause,#auth-motion[data-paused="false"] .motion-play { display: none; }
@media (min-width: 1600px) { .auth-card { width: 390px; padding: 37px 33px 34px; }.auth-brand { margin-bottom: 36px; } }
@media (max-width: 600px) {
  .auth-layout { padding: 54px 22px 75px; }
  .auth-card { width: min(370px,100%); padding: 31px 26px 29px; border-radius: 21px; background: linear-gradient(145deg,rgba(19,40,45,.8),rgba(7,24,31,.87)); }
  .auth-brand { margin-bottom: 31px; }
  .auth-brand > span { font-size: 21px; }
  #auth-form input { min-height: 52px; font-size: 16px; }
  #auth-form label { font-size: 11px; }
  .auth-submit { min-height: 49px; }
  .auth-footer { right: 17px; bottom: max(17px,env(safe-area-inset-bottom)); }
  #auth-motion { width: 36px; height: 36px; padding: 9px; }
}
@media (max-width: 360px) { .auth-layout { padding-left: 18px; padding-right: 18px; }.auth-card { padding-left: 23px; padding-right: 23px; } }
@media (max-height: 600px) { .auth-layout { padding-top: 35px; padding-bottom: 70px; }.auth-card { padding-top: 27px; padding-bottom: 26px; }.auth-brand { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { #auth-form input,.auth-submit,#auth-motion { transition: none; } }