/* Sign-in pages in the Cirque Tickets back office style: Slate surfaces,
   one blue action, Inter. The Circus Vargas logo says whose books these are. */
:root {
  --s1: #FCFCFD; --s2: #F4F6FA; --s3: #ECEFF6; --s4: #E6EAF3; --s5: #DCE1EE; --s8: #A8B3D2; --s9: #7B85A2; --s11: #545C76; --s12: #1A1F2E;
  --b9: #0090FF; --b11: #0D74CE; --b12: #113264; --t9: #E54D2E; --t11: #D13415;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--s3); color: var(--s12); font: 400 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.auth { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 20px; padding: 32px 16px; }
.auth-card { width: min(420px, 100%); background: #fff; border: 1px solid var(--s5); border-radius: 16px; padding: 32px 28px 28px; }
.auth-logo { display: block; width: 168px; height: auto; margin: 0 auto 6px; }
.auth-app { text-align: center; font-size: 12px; color: var(--s11); margin-bottom: 22px; }
.auth-app span { color: var(--s9); }
h1 { font-size: 20px; font-weight: 500; margin: 0 0 14px; line-height: 1.2; }
.lead { color: var(--s11); margin: -4px 0 18px; }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; font-weight: 500; }
.field small { font-size: 12px; color: var(--s11); }
.inp { height: 42px; border: 1px solid var(--s6); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--s12); background: #fff; outline: none; width: 100%; }
.inp:hover, .inp:focus { border-color: var(--s8); }
.inp.err { border-color: var(--t9); }
.error { font-size: 12px; color: var(--t9); margin-top: -8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--s6); background: #fff; color: var(--s12); font: 500 14px Inter, system-ui, sans-serif; cursor: pointer; }
.btn:hover { background: var(--s2); }
.btn.primary { background: var(--b9); border-color: var(--b9); color: #FBFDFF; width: 100%; }
.btn.primary:hover { background: var(--b11); border-color: var(--b11); }
.btn.primary:active { background: var(--b12); }
.hint { font-size: 12px; color: var(--s11); margin: 18px 0 0; text-align: center; }
.consent-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.consent-actions form { margin: 0; }
.inline { display: inline; margin: 0; }
.link { border: 0; background: none; color: var(--b11); font: inherit; cursor: pointer; padding: 0; }
.by-ct { display: inline-flex; align-items: center; gap: 7px; color: var(--s11); font-size: 12px; text-decoration: none; opacity: .9; }
.by-ct img { height: 15px; width: auto; display: block; }
.by-ct:hover { opacity: 1; }