@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
	--red: #e11d2e;
	--red-dark: #b91222;
	--ink: #17181c;
	--muted: #737780;
	--line: #e5e6e9;
	--paper: #fff;
	--wash: #fff6f4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; color: var(--ink); background: linear-gradient(135deg, #fff 0%, var(--wash) 100%); font-family: 'DM Sans', sans-serif; }
a { color: inherit; }
.auth-header { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: auto; padding: 1.6rem clamp(1.2rem, 5vw, 4rem); }
.brand { color: var(--red); font: 700 clamp(1.35rem, 3vw, 1.8rem) 'Space Grotesk', sans-serif; text-decoration: none; }
.back-link { color: var(--muted); font-size: .9rem; text-decoration: none; transition: color .2s ease; }
.back-link:hover { color: var(--red); }
.auth-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 470px); align-items: center; gap: clamp(2rem, 9vw, 9rem); max-width: 1050px; min-height: calc(100vh - 156px); margin: auto; padding: 2rem clamp(1.2rem, 5vw, 4rem); }
.auth-intro { padding-bottom: 2rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--red); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-intro h1 { max-width: 510px; margin: 1.25rem 0 1rem; font: 700 clamp(2.7rem, 5vw, 4.7rem)/1.02 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.auth-intro > p { max-width: 420px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.intro-points { display: grid; gap: .9rem; margin-top: 2.5rem; color: #454850; font-size: .9rem; font-weight: 600; }
.intro-points span { display: flex; align-items: center; gap: .7rem; }
.intro-points i { color: var(--red); font-size: 1.15rem; }
.auth-card { padding: clamp(1.6rem, 4vw, 2.5rem); background: var(--paper); border: 1px solid rgba(224, 25, 45, .1); border-radius: 14px; box-shadow: 0 18px 55px rgba(42, 23, 24, .11); }
.card-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.8rem; }
.icon-badge { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; color: var(--red); background: #fff0ee; border-radius: 9px; font-size: 1.25rem; }
.card-heading h2 { font: 700 1.5rem 'Space Grotesk', sans-serif; }
.card-heading p { margin-top: .2rem; color: var(--muted); font-size: .83rem; }
.auth-form { display: grid; gap: 1rem; }
.field-group { display: grid; gap: .42rem; }
label { font-size: .84rem; font-weight: 700; }
.label-row { display: flex; justify-content: space-between; gap: 1rem; }
.muted-link, .switch-auth a { color: var(--red); font-size: .8rem; font-weight: 700; text-decoration: none; }
.input-wrap { display: flex; align-items: center; gap: .7rem; min-height: 3.1rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 7px; color: #8b8f97; transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225, 29, 46, .1); }
.input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .9rem; }
.input-wrap input::placeholder { color: #aeb1b7; }
.password-toggle { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border: 0; color: #858991; background: transparent; cursor: pointer; }
.field-error { min-height: .9rem; color: var(--red-dark); font-size: .73rem; }
.check-row { display: flex; align-items: center; gap: .6rem; color: #60646b; font-size: .8rem; font-weight: 500; }
.check-row input { accent-color: var(--red); }
.submit-button { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.15rem; margin-top: .25rem; border: 0; border-radius: 7px; color: #fff; background: var(--red); font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; }
.submit-button:hover { background: var(--red-dark); transform: translateY(-1px); }
.form-status { min-height: 1.2rem; color: #23814d; font-size: .8rem; text-align: center; }
.form-status.error { color: var(--red-dark); }
.switch-auth { margin-top: 1.5rem; color: var(--muted); font-size: .83rem; text-align: center; }
.auth-footer { padding: 1rem; color: #989ba2; font-size: .75rem; text-align: center; }
@media (max-width: 760px) { .auth-layout { grid-template-columns: 1fr; gap: 1rem; min-height: auto; padding-top: 2.5rem; } .auth-intro { padding-bottom: 1rem; text-align: center; } .auth-intro h1, .auth-intro > p { margin-left: auto; margin-right: auto; } .intro-points { justify-items: center; margin-top: 1.5rem; } }
@media (max-width: 420px) { .auth-header { padding: 1.25rem; } .back-link { font-size: .78rem; } .auth-card { padding: 1.3rem; } .auth-intro h1 { font-size: 2.7rem; } }