:root {
  --ink: #171717;
  --muted: #747077;
  --blue: #f73760;
  --blue-dark: #d91f47;
  --blue-soft: #fff0f3;
  --line: #ebe6e8;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f4f5fa; }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
.auth-shell { min-height: 100vh; padding: 30px 18px; display: grid; place-items: center; overflow: hidden; position: relative; background: radial-gradient(circle at 16% 10%, rgba(247, 55, 96, .14), transparent 30%), radial-gradient(circle at 88% 82%, rgba(255, 107, 107, .1), transparent 28%), linear-gradient(145deg, #ffffff, #f4f5fa 72%); }
.auth-shell::before, .auth-shell::after { content: ""; position: absolute; border: 1px solid rgba(247, 55, 96, .1); border-radius: 50%; pointer-events: none; }.auth-shell::before { width: 580px; height: 580px; top: -310px; right: -160px; }.auth-shell::after { width: 430px; height: 430px; bottom: -260px; left: -100px; }
.auth-card { width: min(455px, 100%); padding: 40px; position: relative; z-index: 1; border: 1px solid #eee9eb; border-radius: 26px; background: rgba(255,255,255,.98); box-shadow: 0 30px 80px rgba(36, 22, 27, .12), inset 0 1px 0 #fff; }
.auth-brand { width: fit-content; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.auth-mark { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #ffd6df; border-radius: 13px; background: linear-gradient(145deg, #fff, #fff0f3); color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 10px 24px rgba(247, 55, 96, .14); }
.auth-brand-name > span { color: var(--blue); font-weight: 720; }
.auth-heading { margin: 44px 0 25px; }
.eyebrow { margin: 0; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.auth-heading h1 { margin: 8px 0 10px; font-size: clamp(34px, 8vw, 43px); font-weight: 790; line-height: 1; letter-spacing: -.05em; }
.auth-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; color: #565157; font-size: 11px; font-weight: 750; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: #fbfbfc; color: var(--ink); font-size: 14px; transition: .18s ease; }
.auth-form input:focus { border-color: #ff9eb3; background: #fff; box-shadow: 0 0 0 4px rgba(247,55,96,.09); }
.auth-form small { color: #8a9793; font-size: 10px; font-weight: 500; }
.auth-button { height: 49px; margin-top: 5px; border: 1px solid #e52851; border-radius: 12px; background: linear-gradient(135deg, #ff5b7e, #f73760); color: white; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(247,55,96,.24), inset 0 1px 0 rgba(255,255,255,.24); transition: .18s ease; }
.auth-button:hover { background: linear-gradient(135deg, #f9476d, #d91f47); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(247,55,96,.28); }
.auth-button:disabled { cursor: wait; opacity: .7; }
.auth-error { margin: -5px 0 18px; padding: 11px 13px; border: 1px solid #efc7bd; border-radius: 10px; background: #fff2ef; color: #9b4938; font-size: 11px; line-height: 1.45; }
.auth-footnote { margin: 22px 0 0; color: #899692; font-size: 10px; text-align: center; }
.text-button { width: 100%; margin-top: 20px; border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 750; cursor: pointer; }

@media (max-width: 520px) {
  .auth-shell { padding: 14px; }
  .auth-card { padding: 30px 22px; border-radius: 18px; }
  .auth-heading { margin-top: 34px; }
}