/* Egosh auth pages (sign in / create account) — editorial dark, band-split. */
:root {
  --a-bg: #08080a; --a-panel: #101014; --a-ink: #f4f2ec;
  --a-dim: rgba(244,242,236,0.52); --a-line: rgba(244,242,236,0.12); --a-accent: #e0483a;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--a-bg); font-family: 'Bricolage Grotesque', system-ui, sans-serif; color: var(--a-ink); -webkit-font-smoothing: antialiased; }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.auth-split { width: 100%; max-width: 940px; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr); background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85); }
.auth-media { position: relative; min-width: 0; min-height: 540px; background: #0a0a0c; }
.auth-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0.30), rgba(8,8,10,0.78)); }
.auth-media-in { position: absolute; inset: 0; z-index: 2; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-brand { font-weight: 800; font-size: 1.42rem; letter-spacing: 0.06em; text-transform: uppercase; }
.auth-poem { font-size: 1.55rem; line-height: 1.25; max-width: 12ch; color: rgba(255,255,255,0.9); font-weight: 300; letter-spacing: -0.01em; }
.auth-form { min-width: 0; padding: clamp(32px,4vw,52px) clamp(26px,4vw,46px); display: flex; flex-direction: column; justify-content: center; }
.auth-eyebrow { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--a-dim); }
.auth-h { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; margin: 9px 0 5px; }
.auth-tag { color: var(--a-dim); font-size: 0.88rem; margin-bottom: 26px; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 12px; border-radius: 10px; background: #fff; color: #1f1f1f; font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 0; cursor: pointer; transition: opacity 0.2s; font-family: inherit; }
.auth-google:hover { opacity: 0.9; }
.auth-google svg { flex: none; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--a-dim); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ''; height: 1px; flex: 1; background: var(--a-line); }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-dim); margin-bottom: 7px; }
.auth-input { width: 100%; min-width: 0; box-sizing: border-box; background: rgba(0,0,0,0.35); border: 1px solid var(--a-line); border-radius: 10px; padding: 12px 14px; color: #fff; font-size: 0.95rem; font-family: inherit; transition: border-color 0.2s; }
.auth-input:focus { outline: none; border-color: var(--a-accent); }
.auth-pw { position: relative; }
.auth-pw .auth-input { padding-right: 44px; }
.auth-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; color: var(--a-dim); cursor: pointer; padding: 0; border-radius: 8px; }
.auth-eye:hover { color: var(--a-ink); }
.auth-eye .eye-off { display: none; }
.auth-eye.on .eye-on { display: none; }
.auth-eye.on .eye-off { display: block; }
.auth-pw-err { display: none; color: #ffb4ab; font-size: 0.82rem; margin: -6px 0 12px; }
.auth-btn { width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: 10px; background: var(--a-accent); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; transition: background 0.2s, transform 0.2s; }
.auth-btn:hover { background: #f0574a; transform: translateY(-1px); }
.auth-alt { margin-top: 22px; font-size: 0.86rem; color: var(--a-dim); }
.auth-alt a { color: var(--a-ink); text-decoration: none; border-bottom: 1px solid var(--a-line); padding-bottom: 1px; }
.auth-alt a:hover { border-color: var(--a-accent); }
.auth-back { display: inline-block; margin-top: 16px; color: var(--a-dim); font-size: 0.8rem; text-decoration: none; }
.auth-back:hover { color: var(--a-ink); }
.auth-flash { grid-column: 1 / -1; padding: 12px 15px; font-size: 0.86rem; text-align: center; }
.auth-flash.error { background: rgba(224,72,58,0.2); color: #ffb4ab; }
.auth-flash.success { background: rgba(79,165,133,0.2); color: #a7e8cf; }
.auth-forgot { display: inline-block; margin-top: 12px; font-size: 0.82rem; color: var(--a-dim); text-decoration: none; }
.auth-forgot:hover { color: var(--a-ink); }
.account-box { width: 100%; max-width: 440px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 16px; padding: 36px 30px 30px; text-align: center; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85); }
.account-avatar { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 16px; background: var(--a-accent); display: grid; place-items: center; font-weight: 800; font-size: 1.9rem; color: #fff; overflow: hidden; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-name { font-weight: 800; font-size: 1.4rem; }
.account-sub { color: var(--a-dim); font-size: 0.9rem; margin-top: 5px; word-break: break-word; }
.account-badge { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(224,72,58,0.18); color: #ffb4ab; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; }
.account-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.account-actions form { margin: 0; }
.account-ghost { display: block; width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--a-line); background: transparent; color: var(--a-ink); font-weight: 600; font-size: 0.94rem; text-decoration: none; cursor: pointer; font-family: inherit; }
.account-ghost:hover { background: rgba(255,255,255,0.06); }
@media (max-width: 760px) {
  .auth-split { display: block; max-width: min(430px, calc(100vw - 28px)); }
  .auth-media { min-height: 156px; }
  .auth-media-in { padding: 20px; }
  .auth-poem { display: none; }
}