* { box-sizing: border-box; }
html { background: #101113; color: #f6f5f7; color-scheme: dark; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: #101113; min-height: 100vh; min-height: 100dvh; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #a6dfef; outline-offset: 4px; }
.auth-stable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, 48%); min-height: 100vh; min-height: 100dvh; }
.auth-brand { display: flex; align-items: flex-end; position: relative; isolation: isolate; padding: 64px; background: #191719 url("/only-crushes-auth-community.png") center / cover no-repeat; min-width: 0; }
.brand-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #10111300 10%, #101113c4 62%, #101113f5); }
.brand-content { max-width: 580px; }
.brand-content img { display: block; width: 290px; max-width: 100%; height: auto; margin: 0 0 42px; }
.brand-content h1 { font-size: 44px; line-height: 1.12; font-weight: 680; letter-spacing: 0; margin: 14px 0 24px; overflow-wrap: break-word; }
.brand-content > p:last-child { font-size: 16px; line-height: 1.8; color: #ceccd5; max-width: 420px; margin-bottom: 0; }
.eyebrow { color: #69dbbb; text-transform: uppercase; font-size: 11px; font-weight: 650; letter-spacing: 0; }
.auth-panel { width: 100%; max-width: 610px; margin: auto; padding: 42px 54px; min-width: 0; }
.language-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 36px; }
.language-row label { color: #8d8e9b; font-size: 11px; margin: 0; font-weight: 500; }
.language-row select { font-size: 12px; padding: 8px 12px; min-height: 40px; color: #d9d8e0; background: #191a1e; border: 1px solid #303137; border-radius: 6px; }
.auth-heading .eyebrow { margin: 0 0 12px; }
.auth-heading h2 { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: 0; margin: 0 0 12px; }
.auth-heading > p:last-child { color: #aaaab5; font-size: 14px; line-height: 1.7; margin: 0 0 28px; }
form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
label { display: block; min-width: 0; }
label > span:first-child { display: block; color: #d8d6e0; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
input { display: block; background: #191a1e; color: #fff; border: 1px solid #3b3c43; border-radius: 6px; min-height: 50px; width: 100%; min-width: 0; padding: 12px 14px; font-size: 16px; }
input:focus, select:focus { border-color: #ff80b8; outline: 2px solid #ff5ba22b; outline-offset: 2px; }
small { display: block; color: #91929f; font-size: 11px; line-height: 1.6; margin-top: 7px; }
.check-row { display: flex; align-items: flex-start; gap: 12px; }
.check-row input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; accent-color: #ff5ba2; }
.check-row > span { color: #aaaab5; font-size: 12px; font-weight: 400; line-height: 1.7; margin: 0; }
.check-row > span span { display: inline; font-size: inherit; font-weight: inherit; margin: 0; }
a { color: #ff8ebf; text-underline-offset: 4px; }
.check-row a { color: #e5e0e8; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 20px; background: #ff5ba2; color: #25101a; border: 0; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; }
.primary-button:hover { background: #ff83b9; }
.primary-button:disabled { cursor: wait; opacity: .6; }
.primary-button > span:last-child { font-size: 21px; line-height: 1; }
.form-message { display: none; border: 1px solid #a95260; background: #3d2329; color: #ffd5df; border-radius: 6px; padding: 14px; font-size: 13px; line-height: 1.6; }
.form-message.visible { display: block; }
.form-message.success { color: #bcf3dc; border-color: #356c58; background: #1a352b; }
.form-message[hidden] { display: none; }
.auth-switch { color: #aaaab5; text-align: center; font-size: 13px; line-height: 1.8; margin: 26px 0 0; }
.auth-switch a { font-weight: 650; }
.forgot-link { font-size: 12px; text-align: right; margin: 18px 0 0; }
.back-home { border-top: 1px solid #303137; padding-top: 22px; font-size: 11px; text-align: center; margin: 28px 0 0; }
.back-home a { color: #92939f; }
@media (max-width: 1100px) {
  .auth-brand { padding: 40px; }
  .brand-content h1 { font-size: 36px; }
  .auth-panel { padding: 36px; }
}
@media (max-width: 800px) {
  .auth-stable { grid-template-columns: 1fr; }
  .auth-brand { min-height: 142px; padding: 28px 28px 22px; align-items: center; background-position: center 35%; }
  .brand-shade { background: linear-gradient(90deg, #101113ed, #101113a6); }
  .brand-content img { width: 224px; margin: 0; }
  .brand-content h1, .brand-content > p { display: none; }
  .auth-panel { max-width: 600px; padding: 22px 28px calc(40px + env(safe-area-inset-bottom)); }
  .language-row { margin-bottom: 22px; }
  .auth-heading h2 { font-size: 32px; }
  .auth-heading > p:last-child { margin-bottom: 26px; font-size: 13px; }
}
@media (max-width: 480px) {
  .auth-brand { min-height: 126px; padding-inline: 24px; }
  .brand-content img { width: 208px; }
  .auth-panel { padding: 18px 24px calc(40px + env(safe-area-inset-bottom)); }
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .auth-heading h2 { font-size: 30px; }
  .language-row { margin-bottom: 20px; }
  .language-row select { max-width: 155px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }