/* Inlogscherm: tweekoloms (links uitleg op groen, rechts het formulier), zoals Jarvis/Audio Hub.
   Bouwt op de .auth-form/.auth-error/.auth-brand-componenten uit app.css. */
.auth-split{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;}

/* Links: merk-panel met uitleg (volgt het thema; console = indigo). */
.auth-aside{position:relative;display:flex;align-items:center;padding:56px 60px;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,var(--console-c) 0%,var(--accent) 52%,var(--console-b) 100%);}
.auth-aside::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-150px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);}
.auth-aside-in{position:relative;z-index:1;max-width:470px;}
.auth-aside .auth-logo{margin-bottom:34px;}
.auth-aside .auth-logo img{height:56px;width:auto;display:block;}
.auth-aside .eyebrow{color:rgba(255,255,255,.82);}
.auth-aside h1{font-size:34px;font-weight:600;line-height:1.16;letter-spacing:-.02em;margin:14px 0 30px;}
.auth-points{list-style:none;display:flex;flex-direction:column;gap:16px;}
.auth-points li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.94);}
.auth-points li::before{content:"\2713";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:rgba(255,255,255,.2);}

/* Rechts: het formulier. */
.auth-main{display:grid;place-items:center;padding:40px 32px;background:var(--bg);}
.auth-form-wrap{width:100%;max-width:380px;}
.auth-form-wrap .auth-brand h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:6px;}
.auth-form-wrap .auth-brand .muted{margin-top:8px;font-size:14px;}

.auth-ok{margin-top:18px;padding:12px 14px;border-radius:11px;background:var(--accent-soft);
  color:var(--accent-strong);font-size:13.5px;font-weight:600;line-height:1.5;}

/* De vaste 'Powered by'-pil (uit base.html) hoort niet op het inlogscherm: het merk staat al
   prominent in de groene aside, en de fixed pil zou over het formulier zweven. */
.auth-page .powered-by{display:none;}

/* Sessiesleutel als noodtoegang (alleen zichtbaar via ?key=...): visueel losgekoppeld van de magic-link. */
.auth-breakglass{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.auth-breakglass label{color:var(--muted);}

@media(max-width:860px){
  .auth-split{grid-template-columns:1fr;}
  .auth-aside{display:none;}
  .auth-main{min-height:100vh;}
}