/* Native adaptation of the user's smoky login reference. Loaded after the
   shared glass theme; this dark material belongs only to the login page. */
body.login-reference {
  color-scheme: dark;
  --bg: #0b0b0d;
  --bg-elevated: #171719;
  --surface: rgb(255 255 255 / 10%);
  --surface-raised: rgb(255 255 255 / 12%);
  --surface-soft: rgb(255 255 255 / 6%);
  --text: #f7f7f8;
  --ink: var(--text);
  --text2: #e0e0e3;
  --text3: #c4c4c9;
  --text-muted: var(--text3);
  --muted: var(--text3);
  --accent: #f4f4f5;
  --accent-strong: #ffffff;
  --accent2: #ffffff;
  --accent-soft: rgb(255 255 255 / 10%);
  --accent-border: rgb(255 255 255 / 38%);
  --blue: var(--accent);
  --blue-dark: var(--accent-strong);
  --blue-soft: var(--accent-soft);
  --border: rgb(255 255 255 / 20%);
  --border-strong: rgb(255 255 255 / 52%);
  --ring: #f7f7f8;
  --error: #ffd0d0;
  --error-soft: rgb(146 43 43 / 25%);
  --glass-filter: blur(16px) saturate(100%);
  --glass-edge: rgb(255 255 255 / 42%);
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.login-reference .login-atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 70%, rgb(132 132 139 / 28%), transparent 52%),
    radial-gradient(ellipse at 80% 18%, rgb(115 115 123 / 22%), transparent 50%),
    radial-gradient(ellipse at 65% 80%, rgb(81 81 88 / 18%), transparent 44%),
    #0b0b0d;
}

.login-reference .login-smoke {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 480ms ease;
}

.login-reference .login-smoke.smoke-ready { opacity: 1; }

.login-reference .login-atmosphere-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 44% 70% at 50% 50%, rgb(0 0 0 / 12%), rgb(0 0 0 / 32%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 10%), transparent 40%, rgb(0 0 0 / 12%));
}

.login-reference .login-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(48px, env(safe-area-inset-top)) 24px max(68px, env(safe-area-inset-bottom));
  place-items: center;
}

.login-reference .login-card {
  position: relative;
  width: min(100%, 400px);
  margin: 0;
  padding: 34px 32px 26px;
  border: 1px solid var(--border);
  border-top-color: var(--glass-edge);
  border-radius: 24px;
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    inset -1px -1px 0 rgb(255 255 255 / 7%),
    0 24px 64px rgb(0 0 0 / 28%);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

.login-reference .login-card .brand-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 16px;
  background: rgb(255 255 255 / 8%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 6px 16px rgb(0 0 0 / 10%);
}

.login-reference .brand-mark svg { width: 25px; height: 25px; }
.login-reference .login-heading { margin-bottom: 32px; text-align: center; }
.login-reference .eyebrow { color: var(--text3); font-weight: 500; letter-spacing: .15em; }

.login-reference .login-heading h1 {
  margin: 9px 0 8px;
  color: var(--text);
  font-size: clamp(30px, 7vw, 34px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.25;
}

.login-reference .login-heading p { color: var(--text-muted); font-size: 14px; }
.login-reference .login-form { gap: 26px; }
.login-reference .field-group { display: block; }
.login-reference .floating-field { position: relative; padding-top: 12px; }

body.login-reference .login-card .floating-field input[id] {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 16px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  outline: none;
  color: var(--text);
  background: transparent;
  font-size: 16px;
  caret-color: var(--text);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.login-reference .login-card .password-field input[id] { padding-right: 48px; }

.login-reference .floating-field label {
  position: absolute;
  top: 28px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text3);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  transform-origin: left top;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1), color 160ms ease;
}

.login-reference .floating-field label svg { width: 17px; height: 17px; }

body.login-reference .login-card .floating-field input[id]:focus + label,
body.login-reference .login-card .floating-field input[id]:not(:placeholder-shown) + label {
  color: var(--text2);
  transform: translateY(-23px) scale(.8);
}

body.login-reference .login-card .floating-field input[id]:autofill + label {
  transform: translateY(-23px) scale(.8);
}

body.login-reference .login-card .floating-field input[id]:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: inset 0 0 0 100px #2a2a2d;
}

body.login-reference .login-card .floating-field input[id]:-webkit-autofill + label {
  transform: translateY(-23px) scale(.8);
}

body.login-reference .login-card .floating-field input[id]:hover { border-color: #dedee1; }
body.login-reference .login-card .floating-field input[id]:focus-visible { border-color: #ffffff; box-shadow: 0 2px 0 #ffffff; }
body.login-reference .login-card .floating-field input[id][aria-invalid="true"] { border-color: var(--error); background: transparent; }

.login-reference .password-toggle {
  top: 17px;
  right: -6px;
  min-width: 44px;
  min-height: 44px;
  color: var(--text3);
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.login-reference .password-toggle:hover { color: #ffffff; background: rgb(255 255 255 / 8%); }
.login-reference .password-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

body.login-reference #login-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 3px;
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 12px;
  color: #ffffff;
  background: rgb(255 255 255 / 18%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 5px 12px rgb(0 0 0 / 10%);
  font-weight: 600;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}

body.login-reference #login-submit:hover { background: rgb(255 255 255 / 25%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), 0 7px 16px rgb(0 0 0 / 12%); }
body.login-reference #login-submit:not(:disabled):active { transform: scale(.975); opacity: 1; }
body.login-reference #login-submit:disabled { opacity: .6; }
body.login-reference #login-submit:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
body.login-reference #login-submit svg { transition: transform 180ms ease; }
body.login-reference #login-submit:hover svg { transform: translateX(3px); }

.login-reference .auth-links {
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: 16px;
  color: var(--text3);
  font-size: 13px;
}

.login-reference .auth-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text2); font-weight: 500; }
.login-reference .auth-links a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.login-reference .auth-links a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.login-reference .auth-link-disabled { color: var(--text3); }
.login-reference .security-note { margin-top: 10px; color: var(--text3); font-size: 12px; }

.login-reference .form-error,
.login-reference .form-success {
  margin: -4px 0 -4px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.login-reference .form-error { border-color: rgb(255 166 166 / 38%); color: var(--error); background: var(--error-soft); }
.login-reference .form-success { border-color: rgb(255 255 255 / 30%); color: var(--text); background: rgb(255 255 255 / 10%); }

.login-reference .background-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 99px;
  color: var(--text3);
  background: rgb(15 15 17 / 48%);
  box-shadow: none;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.login-reference .background-toggle[hidden] { display: none; }
.login-reference .background-toggle:hover { color: #ffffff; background: rgb(15 15 17 / 70%); }
.login-reference .background-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

@media (max-width: 520px) {
  .login-reference .login-shell { padding: max(32px, env(safe-area-inset-top)) 20px max(76px, env(safe-area-inset-bottom)); }
  .login-reference .login-card { padding: 30px 26px 24px; border-radius: 22px; margin: 0; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-reference .login-card { background: rgb(35 35 39 / 96%); }
}

@media (prefers-reduced-motion: reduce) {
  .login-reference *, .login-reference *::before, .login-reference *::after { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .login-reference .login-card { background: #252528; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .login-reference .login-atmosphere { background: #111113; }
  body.login-reference #login-submit, .login-reference .brand-mark { background: #39393e; }
  body.login-reference .liquid-control-lens { display: none; }
}

@media (forced-colors: active) {
  body.login-reference { background: Canvas; color: CanvasText; }
  .login-reference .login-atmosphere { display: none; }
  .login-reference .login-card { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .login-reference .login-heading h1, .login-reference .login-heading p, .login-reference .eyebrow, .login-reference .floating-field label, .login-reference .security-note { color: CanvasText; }
  body.login-reference .login-card .floating-field input[id] { color: CanvasText; border-color: CanvasText; }
  body.login-reference #login-submit, .login-reference .brand-mark, .login-reference .password-toggle { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  .login-reference .auth-links a { color: LinkText; }
  .login-reference .form-error, .login-reference .form-success { color: CanvasText; border-color: CanvasText; background: Canvas; }
}