/* XmasMagicAI auth screens — restrained, enterprise two-panel layout.
   Left: one calm Christmas image with a short line of copy. Right: a clean ivory form panel.
   Christmas shows up as gold accents, a single image and a faint snowfall — nothing more. */
.auth-body{--wine:#5a0f27;--plum:#4a1450;--crimson:#c01f3c;--crimson-d:#8f1431;--gold:#d9a640;--gold-l:#fbe6ad;--ink:#2a1d24;--muted:#6f5f66;--line:#e4dcdd;--paper:#fffdf9;
  margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.auth-snow{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.55}

.auth-split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100vh;min-height:100dvh}

/* ── image panel ─────────────────────────────── */
.auth-visual{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(28px,4.4vw,64px);color:#fff;
  background:linear-gradient(180deg,rgba(48,6,24,.88) 0%,rgba(58,8,30,.8) 34%,rgba(58,8,30,.55) 52%,rgba(48,6,24,.14) 74%,rgba(48,6,24,.3) 100%),var(--hero) 60% bottom/cover no-repeat,#5a0f27}
.auth-logo{display:block;width:clamp(170px,15vw,236px);flex:none}
.auth-logo img{display:block;width:100%;height:auto;aspect-ratio:1200/330;filter:drop-shadow(0 4px 14px rgba(20,0,10,.5))}
.auth-copy{max-width:30em;margin-top:clamp(28px,9vh,104px)}
.auth-label{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l)}
.auth-label:before{content:"";width:34px;height:1px;background:var(--gold)}
.auth-copy h1{margin:16px 0 14px;font:500 clamp(34px,3.5vw,54px)/1.1 'Playfair Display',Georgia,serif;letter-spacing:-.015em;color:#fff;text-shadow:0 2px 20px rgba(30,2,16,.4)}
.auth-copy h1 em{font-style:italic;color:var(--gold-l)}
.auth-copy p{margin:0;max-width:26em;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(255,255,255,.86)}

.auth-features{display:flex;gap:clamp(18px,2.2vw,34px);margin:clamp(22px,4vh,40px) 0 0;padding:0;list-style:none}
.auth-features li{display:grid;justify-items:center;gap:10px;min-width:clamp(96px,8vw,128px);text-align:center;font-size:clamp(12.5px,.95vw,14px);font-weight:600;line-height:1.35;color:#fff;text-shadow:0 1px 10px rgba(30,2,16,.45)}
.auth-features span{display:grid;place-items:center;width:clamp(50px,4.2vw,62px);height:clamp(50px,4.2vw,62px);border-radius:16px;font-size:clamp(21px,1.8vw,26px);color:#fff;background:linear-gradient(150deg,rgba(192,31,60,.9),rgba(122,16,44,.92));border:1px solid rgba(251,230,173,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(30,2,16,.35)}
.auth-features svg,.auth-features .ico{width:1em;height:1em}
@media(max-height:760px){.auth-features{margin-top:20px}.auth-features li{gap:7px}.auth-features span{width:46px;height:46px;font-size:20px}}
@media(max-height:660px){.auth-features{display:none}}

/* ── form panel ──────────────────────────────── */
.auth-pane{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,28px);background:var(--paper);padding:clamp(24px,4.5vh,56px) clamp(24px,5vw,84px)}
.auth-pane:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--crimson-d),var(--gold) 55%,#1f6b43)}
.auth-card{width:min(100%,410px);margin:0;padding:0;background:none;border:0;box-shadow:none}
.auth-card--wide{width:min(100%,500px)}
.auth-heading{margin:0 0 clamp(18px,3vh,30px);text-align:left}
.auth-flake{display:grid;place-items:center;width:42px;height:42px;margin-bottom:clamp(12px,2vh,20px);border-radius:12px;font-size:20px;color:var(--gold);background:#fbf3e2;border:1px solid #f0dfb8}
.auth-flake .ico{width:1em;height:1em}
.auth-heading h2{margin:0 0 8px;font:600 clamp(28px,2.5vw,36px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.01em;color:var(--wine)}
.auth-heading p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.brand-word{font-weight:700;color:var(--crimson-d)}

.auth-form{display:grid;gap:clamp(12px,1.9vh,18px)}
.auth-form>label{display:grid;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink)}
.lbl{display:flex;align-items:center;gap:8px;font-weight:600}.lbl .ico{display:none}
.lbl a{margin-left:auto;font-size:13px;font-weight:600;color:var(--crimson-d)}.lbl a:hover{text-decoration:underline}
.auth-form input:not([type=checkbox]){width:100%;height:48px;padding:0 15px;font:400 15px 'Inter',sans-serif;color:var(--ink);background:#fff;border:1px solid #d9d0d2;border-radius:10px;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.auth-form input::placeholder{color:#9a8e93}
.auth-form input:not([type=checkbox]):hover{border-color:#c8bcbf}
.auth-form input:not([type=checkbox]):focus{outline:0;border-color:var(--crimson-d);box-shadow:0 0 0 3px rgba(143,20,49,.13)}
.field-affix{position:relative;display:block}.field-affix input{padding-right:50px!important}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:none;color:#6f5f66;cursor:pointer}
.pw-toggle svg{width:19px;height:19px}.pw-toggle:hover{background:#f6eff0;color:var(--crimson-d)}.pw-toggle:focus-visible{outline:2px solid var(--crimson-d)}
.check-label,.marketing-consent{display:flex!important;align-items:center;gap:10px!important;font-size:13.5px!important;font-weight:500!important;color:var(--ink)!important;cursor:pointer;line-height:1.45}
.marketing-consent{align-items:flex-start}.marketing-consent input{margin-top:2px!important}
.auth-form input[type=checkbox]{flex:none;width:17px;height:17px;margin:0;accent-color:var(--crimson-d);border-radius:4px}
.auth-form--register .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}.auth-form--register .form-row>label{min-width:0}
.field-hint{margin:-6px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.auth-submit{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:4px;padding:0 52px;border:0;border-radius:10px;font:600 15.5px 'Inter',sans-serif;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#a8173a,#8f1431)!important;box-shadow:0 6px 16px rgba(143,20,49,.22);transition:background .15s,box-shadow .15s,transform .15s}
.auth-submit span{position:absolute;right:20px;margin:0;font-size:1.15em}
.auth-submit:hover{background:linear-gradient(180deg,#b81c42,#9b1635)!important;box-shadow:0 8px 20px rgba(143,20,49,.3);transform:translateY(-1px)}
.auth-submit:focus-visible{outline:3px solid rgba(143,20,49,.35);outline-offset:2px}
.auth-switch{display:block;margin:clamp(16px,2.6vh,24px) 0 0;padding:0;border:0;font-size:14px;color:var(--muted);text-align:left}
.auth-switch:before,.auth-switch:after{display:none}
.auth-switch a{margin-left:4px;font-weight:600;color:var(--crimson-d)}.auth-switch a:hover{text-decoration:underline}
.auth-privacy{display:flex;align-items:center;gap:7px;margin:clamp(14px,2.4vh,22px) 0 0;padding-top:clamp(12px,2vh,18px);border-top:1px solid var(--line);font-size:12.5px;line-height:1.4;color:#8a7d83}.auth-privacy .ico{flex:none;font-size:1.05em;color:var(--gold)}
.auth-foot{margin:0;font-size:12px;color:#a09499}
.flash{border-radius:10px}

/* ── short windows: drop optional copy before anything scrolls ── */
@media(max-height:820px){.auth-flake{display:none}.auth-heading{margin-bottom:18px}}
@media(max-height:740px){.auth-foot{display:none}.auth-form input:not([type=checkbox]){height:44px}.auth-submit{height:46px}.auth-form{gap:12px}}
@media(max-height:680px){.auth-heading p{display:none}.auth-heading h2{font-size:28px;margin:0}.auth-privacy{display:none}.auth-pane{padding-top:18px;padding-bottom:18px}}
@media(max-height:600px){.auth-form input:not([type=checkbox]){height:40px}.auth-submit{height:42px}.auth-form{gap:9px}.auth-form>label{gap:4px;font-size:13px}.auth-heading{margin-bottom:12px}.field-hint{display:none}.auth-switch{margin-top:12px}}

/* ── tablet + phone: image becomes a slim banner above the form ── */
@media(max-width:959px){
  .auth-split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .auth-visual{padding:18px 22px;min-height:clamp(96px,18vh,170px);justify-content:center;background-position:55% 78%}
  .auth-logo{width:clamp(130px,36vw,190px)}
  .auth-copy{display:none}
  .auth-pane{margin-top:-20px;border-radius:22px 22px 0 0;justify-content:flex-start;padding:clamp(22px,4vh,40px) 22px 24px}
  .auth-pane:before{left:22px;right:22px;border-radius:0 0 3px 3px}
  .auth-card,.auth-card--wide{width:min(100%,440px)}.auth-card--wide{width:min(100%,520px)}
  .auth-foot{display:none}
}
@media(max-width:959px) and (max-height:760px){.auth-visual{min-height:84px;padding:12px 20px}.auth-logo{width:clamp(110px,30vw,150px)}.auth-heading p{display:none}.auth-heading{margin-bottom:14px}.auth-privacy{display:none}}
@media(max-width:959px) and (max-height:640px){.auth-visual{min-height:64px;padding:8px 18px}.auth-logo{width:104px}.auth-pane{margin-top:-14px;padding-top:18px;padding-bottom:14px}}
@media(max-width:560px){.auth-form--register .form-row{grid-template-columns:minmax(0,1fr);gap:12px}}
@media(max-width:560px) and (max-height:820px){.auth-card--wide .field-hint{display:none}}
@media(max-width:560px) and (max-height:700px){.auth-card--wide .auth-form{gap:9px}.auth-card--wide .auth-form>label{gap:3px;font-size:12.5px}.auth-card--wide .auth-form input:not([type=checkbox]){height:40px}.auth-card--wide .auth-submit{height:42px}.auth-card--wide .marketing-consent{font-size:12px!important}.auth-card--wide .auth-heading h2{font-size:25px}}
@media(max-width:560px) and (max-height:600px){.auth-card--wide .auth-form input:not([type=checkbox]){height:36px}.auth-card--wide .auth-submit{height:38px}.auth-card--wide .auth-form{gap:6px}.auth-card--wide .auth-switch{margin-top:8px}.auth-card--wide .marketing-consent{font-size:11.5px!important;line-height:1.3}}
@media(max-width:380px){.auth-submit{padding:0 40px;font-size:15px}.auth-submit span{right:14px}}

/* ── phones held sideways: slim image column + compact form ── */
@media(orientation:landscape) and (max-height:520px) and (min-width:560px){
  .auth-split{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);grid-template-rows:none}
  .auth-visual{min-height:0;padding:14px 16px;justify-content:flex-start}.auth-logo{width:clamp(110px,22vw,170px)}
  .auth-pane{margin-top:0;border-radius:0;justify-content:center;padding:8px 22px}.auth-pane:before{left:0;right:0}
  .auth-card,.auth-card--wide{width:min(100%,470px)}
  .auth-flake,.auth-heading p,.auth-privacy,.field-hint,.auth-foot{display:none}
  .auth-heading{margin-bottom:8px}.auth-heading h2{font-size:22px;margin:0}
  .auth-form{gap:6px}.auth-form>label{gap:3px;font-size:12px}
  .auth-form input:not([type=checkbox]){height:34px;font-size:13.5px;padding:0 12px}.auth-submit{height:36px;font-size:13.5px;margin-top:0}
  .auth-switch{margin-top:6px;font-size:12.5px}.check-label,.marketing-consent{font-size:11.5px!important}
  .auth-form--register .form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(prefers-reduced-motion:reduce){.auth-submit{transition:none}}
/* register is the longest form: on phones it never shows the optional decoration */
@media(max-width:560px){
  .auth-card--wide .auth-flake,.auth-card--wide .auth-heading p,.auth-card--wide .field-hint,.auth-card--wide .auth-privacy{display:none}
  .auth-card--wide .auth-heading{margin-bottom:14px}.auth-card--wide .auth-heading h2{font-size:27px;margin:0}
  .auth-card--wide .auth-form{gap:10px}.auth-card--wide .auth-form input:not([type=checkbox]){height:44px}.auth-card--wide .auth-submit{height:46px}
}
@media(max-width:560px) and (max-height:620px){.auth-card--wide .auth-form{gap:7px}.auth-card--wide .auth-form input:not([type=checkbox]){height:38px}.auth-card--wide .auth-submit{height:40px}.auth-card--wide .auth-heading{margin-bottom:8px}.auth-card--wide .auth-heading h2{font-size:24px}.auth-card--wide .auth-switch{margin-top:8px}}