:root {
  color-scheme: dark;
  --hf-red: #7c3aed;
  --hf-red-deep: #7c3aed;
  --hf-ink: #0a0a0c;
  --hf-panel: #121216;
  --hf-line: #29292f;
  --hf-text: #f3f2f4;
  --hf-muted: #93929a;
  --hf-green: #42d69a;
}

* { box-sizing: border-box; }
body.hf-auth-page {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background: var(--hf-ink);
  color: var(--hf-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hf-auth-shell {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 34px;
  place-items: center;
  overflow: hidden;
  background-color: var(--hf-ink);
  background-image: linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 54px 54px;
}
.hf-auth-shell::before {
  position: absolute;
  width: min(62vw, 820px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .75), transparent);
  content: "";
  transform: rotate(-26deg) translateY(-230px);
}

.hf-auth-frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr);
  width: min(1080px, 100%);
  min-height: 590px;
  overflow: hidden;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  background: #0d0d10;
  box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.hf-auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 36px 42px;
  overflow: hidden;
  border-right: 1px solid var(--hf-line);
  background: #101014;
}
.hf-auth-brand::after {
  position: absolute;
  right: -100px;
  bottom: -130px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(59, 130, 246, .32);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(59, 130, 246, .025), 0 0 0 105px rgba(59, 130, 246, .018);
  content: "";
}
.hf-brand-lockup { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: inherit; text-decoration: none; }
.hf-brand-lockup img { width: 46px; height: 46px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(59, 130, 246, .28), 0 12px 30px rgba(29, 78, 216, .15); }
.hf-brand-lockup span { display: grid; gap: 2px; }
.hf-brand-lockup strong { font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.hf-brand-lockup small { color: #898890; font-size: 9px; font-weight: 750; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
.hf-brand-copy { position: relative; z-index: 1; max-width: 500px; margin: auto 0; }
.hf-eyebrow { display: block; color: var(--hf-red); font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.hf-brand-copy h1 { max-width: 510px; margin: 17px 0 18px; color: #f7f6f7; font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px, 4.1vw, 56px); font-weight: 400; letter-spacing: 0; line-height: .99; }
.hf-brand-copy em { color: var(--hf-red); font-weight: 400; }
.hf-brand-copy p { max-width: 355px; margin: 0; color: #9b9aa1; font-size: 14px; line-height: 1.65; }
.hf-brand-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #99989f; font-size: 11px; font-weight: 650; }
.hf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hf-green); box-shadow: 0 0 0 5px rgba(66,214,154,.09); }

.hf-auth-form-area { display: flex; flex-direction: column; justify-content: center; padding: 48px; background: var(--hf-panel); }
.hf-auth-form-head h2 { margin: 10px 0 7px; color: #f6f5f6; font-size: 32px; font-weight: 760; letter-spacing: 0; line-height: 1; }
.hf-auth-form-head p { margin: 0 0 30px; color: var(--hf-muted); font-size: 13px; line-height: 1.5; }
.hf-login-form { display: grid; gap: 17px; }
.hf-field { display: grid; gap: 7px; }
.hf-field label { color: #d5d3d7; font-size: 11px; font-weight: 750; }
.hf-input-wrap { position: relative; display: flex; align-items: center; min-height: 50px; border: 1px solid #33333a; border-radius: 6px; background: #0b0b0e; transition: border-color .18s ease, box-shadow .18s ease; }
.hf-input-wrap:focus-within { border-color: rgba(59, 130, 246, .85); box-shadow: 0 0 0 3px rgba(59, 130, 246, .11); }
.hf-input-wrap > svg { position: absolute; left: 15px; width: 17px; color: #828089; pointer-events: none; }
.hf-input-wrap input { width: 100%; min-width: 0; height: 48px; padding: 0 44px 0 45px; border: 0; outline: 0; background: transparent; color: var(--hf-text); font: inherit; font-size: 14px; }
.hf-input-wrap input::placeholder { color: #64636b; }
.hf-password-toggle { position: absolute; right: 4px; display: grid; width: 40px; height: 40px; border: 0; border-radius: 5px; place-items: center; background: transparent; color: #898790; cursor: pointer; }
.hf-password-toggle:hover { background: #202026; color: #f0eff1; }
.hf-password-toggle svg { width: 17px; }
.hf-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 7px; padding: 0 16px 0 18px; border: 1px solid var(--hf-red); border-radius: 6px; background: var(--hf-red); color: white; font: inherit; font-size: 14px; font-weight: 780; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.hf-submit:hover { border-color: #3b82f6; background: #7c3aed; transform: translateY(-1px); }
.hf-submit:active { transform: translateY(0); }
.hf-submit svg { width: 19px; }
.hf-register-copy { margin: 24px 0 0; color: #8f8d95; font-size: 12px; text-align: center; }
.hf-register-copy a { color: #f7f5f6; font-weight: 750; text-decoration: underline; text-decoration-color: var(--hf-red); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hf-auth-alert { margin: 0 0 20px; padding: 11px 13px; border: 1px solid #4c1d95; border-radius: 6px; background: #151026; color: #c084fc; font-size: 12px; line-height: 1.45; }
.hf-auth-alert--success { border-color: #245640; background: #10231a; color: #a9e9c8; }

@media (max-width: 820px) {
  .hf-auth-shell { display: block; padding: 0; background-image: none; }
  .hf-auth-shell::before { display: none; }
  .hf-auth-frame { grid-template-columns: 1fr; width: 100%; min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }
  .hf-auth-brand { min-height: 255px; padding: 24px 22px 25px; border-right: 0; border-bottom: 1px solid var(--hf-line); }
  .hf-auth-brand::after { right: -88px; bottom: -145px; width: 235px; height: 235px; box-shadow: 0 0 0 42px rgba(59, 130, 246, .024); }
  .hf-brand-lockup img { width: 40px; height: 40px; }
  .hf-brand-lockup strong { font-size: 16px; }
  .hf-brand-copy { margin: auto 0 0; }
  .hf-brand-copy h1 { margin: 15px 0 0; font-size: 32px; line-height: 1.04; }
  .hf-brand-copy p, .hf-brand-footer { display: none; }
  .hf-auth-form-area { flex: 1; justify-content: flex-start; padding: 34px 22px max(30px, env(safe-area-inset-bottom)); }
  .hf-auth-form-head h2 { font-size: 29px; }
}

@media (max-width: 380px) {
  .hf-auth-brand { min-height: 232px; }
  .hf-auth-form-area { padding-inline: 18px; }
  .hf-brand-copy h1 { font-size: 29px; }
}