:root {
	color-scheme: dark;
	--ink: #edf3f7;
	--muted: #93a2b0;
	--line: #2b3947;
	--paper: #0b1016;
	--panel: #151d26;
	--teal: #79d5d0;
	--teal-dark: #3fa9aa;
	--coral: #6da5ff;
	--coral-soft: #172944;
	font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	color: var(--ink);
	background: var(--paper);
}

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 43%) 1fr; }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 42px clamp(32px, 6vw, 92px); overflow: hidden; background: #101d2b; color: #f2f7fb; }
.auth-story::before { content: ""; position: absolute; width: 390px; height: 390px; right: -170px; bottom: -145px; border: 1px solid #ffffff40; border-radius: 50%; box-shadow: 0 0 0 34px #ffffff0d, 0 0 0 68px #ffffff08; }
.auth-story::after { content: ""; position: absolute; width: 14px; height: 14px; right: 21%; top: 23%; background: var(--coral); transform: rotate(45deg); }
.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: inherit; text-decoration: none; font-size: 1.25rem; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px 9px 9px 2px; background: var(--coral); color: white; font-family: Georgia, serif; font-size: 1.25rem; font-style: italic; }
.story-copy { position: relative; z-index: 1; max-width: 390px; margin: auto 0; }
.eyebrow { margin: 0 0 18px; color: var(--coral); font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.auth-story .eyebrow { color: #91e1dd; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
h1 { max-width: 410px; font-size: clamp(3rem, 5vw, 5rem); line-height: .97; }
.story-text { max-width: 340px; margin: 28px 0 0; color: #afc0cf; font-size: 1rem; line-height: 1.65; }
.story-note { position: relative; z-index: 1; margin: 0; color: #8195a8; font-size: .78rem; }
.auth-panel { display: grid; place-items: center; padding: 48px 28px; background: radial-gradient(circle at 100% 0, #18283a 0, transparent 32%), var(--paper); }
.auth-panel-inner { width: min(100%, 390px); }
.mobile-brand { display: none; margin-bottom: 55px; color: var(--teal); }
h2 { font-size: clamp(2rem, 4vw, 2.65rem); line-height: 1.05; }
.intro { margin: 12px 0 32px; color: var(--muted); font-size: .95rem; }
.auth-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
label { font-size: .78rem; font-weight: 700; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
input { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--panel); color: var(--ink); font: inherit; font-size: .9rem; transition: border-color .2s, box-shadow .2s; }
input::placeholder { color: #718292; }
input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px #79d5d026; }
.quiet-link, .switch-auth a { color: var(--teal); font-weight: 700; text-decoration: none; }
.quiet-link { font-size: .72rem; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; padding: 15px 17px; border: 0; border-radius: 7px; background: var(--coral); color: #08111d; cursor: pointer; font: inherit; font-weight: 700; transition: background .2s, transform .2s; }
.primary-button:hover { background: #91bcff; transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .7; transform: none; }
.button-arrow { font-size: 1.3rem; line-height: .7; }
.form-message { min-height: 20px; margin: -4px 0 0; font-size: .8rem; line-height: 1.4; }
.form-message.is-error { color: #ff8f8f; }
.form-message.is-success { color: var(--teal); }
.switch-auth { margin: 32px 0 0; color: var(--muted); font-size: .85rem; }
.legal { margin: 48px 0 0; color: #687887; font-size: .7rem; }

@media (max-width: 720px) {
	.auth-shell { display: block; }
	.auth-story { min-height: 255px; padding: 25px 25px 30px; }
	.auth-story::before { width: 270px; height: 270px; right: -125px; bottom: -155px; }
	.story-copy { margin: 45px 0 0; }
	.story-copy .eyebrow { margin-bottom: 10px; }
	h1 { max-width: 330px; font-size: 2.65rem; }
	.story-text, .story-note { display: none; }
	.auth-panel { min-height: calc(100vh - 255px); padding: 38px 25px 46px; background: radial-gradient(circle at 100% 0, #18283a 0, transparent 45%), var(--paper); }
	.mobile-brand { display: block; }
	.auth-panel-inner { width: min(100%, 430px); }
	.mobile-brand + .eyebrow { margin-bottom: 14px; }
	.legal { margin-top: 35px; }
}