@font-face {
  font-family: "Clap Sans";
  src: url("/assets/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { color-scheme: dark; font-family: "Clap Sans", Arial, sans-serif; color: #f5f5f5; background: #090909; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { display: grid; place-items: center; min-width: 320px; min-height: 100svh; margin: 0; padding: 32px; background: radial-gradient(ellipse at 68% 20%, #1b1b1b 0, #0b0b0b 45%, #070707 100%); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: #fff; color: #111; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.auth-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(1180px, 100%); min-height: min(760px, calc(100svh - 64px)); padding: 12px; overflow: hidden; border: 1px solid #2a2a2a; border-radius: 28px; background: #111213; box-shadow: 0 32px 100px #0005; }
.auth-close { position: absolute; z-index: 2; top: 26px; right: 26px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff13; border-radius: 50%; background: #161616a8; color: #fff; backdrop-filter: blur(14px); transition: background 160ms ease; }
.auth-close:hover { background: #383838d9; }
.auth-form-panel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 40px 44px; }
.auth-content { width: min(100%, 384px); }
.auth-heading { margin-bottom: 35px; text-align: center; }
.auth-brand { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 23px; border-radius: 8px; }
.auth-brand img { display: block; width: 38px; height: 38px; }
.auth-heading h1 { margin: 0; font-size: clamp(24px, 2.25vw, 30px); font-weight: 650; line-height: 1.25; letter-spacing: -1.1px; }
.auth-heading p { margin: 12px 0 0; color: #96989b; font-size: 14px; line-height: 1.5; letter-spacing: -.1px; }
.auth-providers { display: grid; gap: 12px; }
.auth-provider { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px 20px; border: 1px solid #303133; border-radius: 12px; background: transparent; color: #f8f8f8; font-size: 14px; font-weight: 550; line-height: 1.4; transition: border-color 160ms ease, background 160ms ease; }
.auth-provider svg { flex-shrink: 0; }
.auth-provider:hover { border-color: #595b5e; background: #ffffff06; }
.auth-provider:active { background: #ffffff0b; }
.auth-provider:disabled { cursor: wait; opacity: .65; }
.auth-divider { display: flex; align-items: center; gap: 17px; margin: 25px 0 24px; color: #74777b; font-size: 11px; line-height: 1; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #262729; }
.auth-form { margin: 0; }
.auth-email-field { margin-bottom: 15px; }
.auth-email-field > label { display: block; margin: 0 0 10px; color: #a3a5a8; font-size: 12px; line-height: 1.5; }
.auth-email-field input { display: block; width: 100%; min-height: 53px; padding: 14px 16px; border: 1px solid #303133; border-radius: 11px; outline: none; background: transparent; color: #f5f5f5; font-size: 14px; line-height: 1.5; transition: border-color 160ms ease, box-shadow 160ms ease; }
.auth-email-field input::placeholder { color: #72767c; opacity: 1; }
.auth-email-field input:hover { border-color: #515254; }
.auth-email-field input:focus { border-color: #9b9b9b; box-shadow: 0 0 0 3px #ffffff09; }
.auth-email-field input[aria-invalid="true"] { border-color: #d9a49d; }
.auth-email-field input:-webkit-autofill { -webkit-text-fill-color: #f5f5f5; box-shadow: 0 0 0 1000px #191a1b inset; caret-color: #fff; }
.auth-field-error { margin: 8px 0 0; color: #e1b7b0; font-size: 11px; line-height: 1.5; }
.auth-password-help { margin: 8px 0 0; color: #96989b; font-size: 11px; line-height: 1.5; }
.auth-recovery { display: block; margin: 14px auto 0; padding: 3px; border: 0; background: transparent; color: #bbbdbf; font-size: 12px; }
.auth-recovery:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#auth-session .auth-status { margin-bottom: 18px; overflow-wrap: anywhere; }
.auth-continue { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 45px; padding: 12px 18px; border: 1px solid #fff; border-radius: 10px; background: #fff; color: #111; font-size: 14px; font-weight: 650; line-height: 1.4; transition: background 160ms ease, border-color 160ms ease; }
.auth-continue:hover:not(:disabled) { background: #dcdcdc; border-color: #dcdcdc; }
.auth-continue:disabled { border-color: #292b2d; background: #292b2d; color: #777b80; cursor: not-allowed; }
.auth-continue[aria-busy="true"] { cursor: wait; }
.auth-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: auth-spin 700ms linear infinite; }
.auth-consent { margin-top: 19px; }
.auth-consent-label { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.auth-consent-label input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #fff; cursor: pointer; }
.auth-consent-label span { color: #bbbdbf; font-size: 11px; line-height: 1.55; }
.auth-consent-label a { color: #eee; text-decoration: underline; text-underline-offset: 2px; }
.auth-consent-label a:hover { color: #fff; }
.auth-consent-label input[aria-invalid="true"] { outline: 1px solid #d9a49d; outline-offset: 2px; }
.auth-status { margin: 19px 0 0; padding: 12px 14px; border: 1px solid #353638; border-radius: 10px; color: #c8c9ca; background: #ffffff03; font-size: 12px; line-height: 1.6; }
.auth-switch { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #292a2b; color: #8e9195; font-size: 12px; line-height: 1.6; text-align: center; }
.auth-switch a { margin-left: 3px; color: #f2f2f2; font-weight: 550; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-motion { position: relative; min-width: 0; min-height: 100%; overflow: hidden; border-radius: 17px; background: #1b1c1c url("/assets/auth/poster.webp") center / cover no-repeat; }
.auth-motion video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.auth-motion[data-motion="still"] video { opacity: 0; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (min-width: 1600px) {
  .auth-shell { width: min(1280px, 100%); min-height: min(820px, calc(100svh - 80px)); }
  .auth-content { width: min(100%, 398px); }
}
@media (max-width: 1020px) {
  body { padding: 22px; }
  .auth-shell { min-height: min(740px, calc(100svh - 44px)); grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .auth-form-panel { padding: 40px 28px; }
  .auth-heading h1 { font-size: 26px; }
}
@media (max-width: 720px) {
  body { padding: 14px; }
  .auth-shell { display: flex; align-items: center; width: min(480px, 100%); min-height: calc(100svh - 28px); padding: 0; border-radius: 23px; }
  .auth-form-panel { width: 100%; padding: 62px 32px 35px; }
  .auth-motion { display: none; }
  .auth-close { top: 17px; right: 17px; background: #222426; }
  .auth-heading { margin-bottom: 30px; }
  .auth-heading h1 { font-size: 27px; }
  .auth-brand { margin-bottom: 24px; }
  .auth-email-field input { font-size: 16px; }
}
@media (max-width: 380px) {
  body { padding: 10px; }
  .auth-shell { min-height: calc(100svh - 20px); border-radius: 20px; }
  .auth-form-panel { padding: 60px 22px 30px; }
  .auth-heading h1 { font-size: 24px; letter-spacing: -.8px; }
  .auth-provider { min-height: 55px; padding-inline: 12px; font-size: 13px; }
  .auth-heading p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .auth-spinner { animation-duration: 1500ms; }
}

/* The parent overlay owns the backdrop, outside spacing and viewport sizing. */
html.auth-is-embedded { background: transparent; }
.auth-is-embedded body { min-width: 0; min-height: 100svh; padding: 0; background: transparent; }
.auth-is-embedded .auth-shell { width: 100%; min-height: 100svh; margin: 0; }