
.auth-page{background:#171a38;color:#fff;min-height:100vh;background-image:radial-gradient(ellipse at 5% 8%,#6942a599,transparent 48%),radial-gradient(ellipse at 97% 90%,#14878077,transparent 45%);overflow-x:hidden}
.auth-layout{max-width:1240px;margin:auto;padding:30px 36px 46px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:28px 70px;align-items:start;min-height:100vh}.auth-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding-bottom:12px}.auth-brand>a{text-decoration:none;color:white;font-weight:900;font-size:32px;letter-spacing:-1.5px}.auth-brand>a span{color:#c7f57b}.free-label{border:1px solid #ffffff40;border-radius:99px;padding:6px 12px;color:#dedff5;font-size:13px}.auth-hero{padding-top:25px;min-width:0}.auth-eyebrow{letter-spacing:2px;color:#d6cff5;font-size:12px;font-weight:800}.auth-hero h1{font-size:clamp(38px,4.8vw,62px);line-height:1.08;letter-spacing:-2px;margin:17px 0 21px}.auth-hero h1>span{color:#c7f57b}.auth-hero>p:not(.auth-eyebrow){font-size:18px;color:#d8dbf1;max-width:450px;line-height:1.65}.auth-tags{display:flex;gap:8px;flex-wrap:wrap}.auth-tags>span{background:#ffffff0e;border:1px solid #ffffff25;padding:7px 11px;border-radius:99px;color:#e1e5f8;font-size:12px}.auth-box{color:#28354d;background:#fff;border-radius:26px;padding:27px;box-shadow:0 22px 65px #090c2540;min-width:0}.auth-box .panel{box-shadow:none;padding:0;border:0;background:transparent;margin:0 0 22px}.auth-box h1{font-size:27px;letter-spacing:-.7px}.auth-box h2{font-size:21px}.auth-box p{line-height:1.55}.auth-box .btn{background:#6543c0;border-color:#6543c0;border-radius:12px;min-height:48px;font-size:15px}.auth-box .btn:hover{background:#50329e}.auth-box .btn.secondary{background:#f4f1fc;color:#453478;border-color:#d7ceef}.auth-box .btn.secondary:hover{background:#e9e2fb}.auth-box .account-tabs{padding:5px;background:#f0f1f7;display:grid;grid-template-columns:1fr 1fr;margin:20px 0;gap:5px;border-radius:13px}.auth-box .account-tabs button{background:transparent;color:#536077;border:0;padding:9px 5px;font-size:14px}.auth-box .account-tabs button[aria-pressed=true]{background:white;color:#51359f;box-shadow:0 2px 8px #26344f16;border:0}.auth-box .account-tabs button:last-child{grid-column:1/-1;min-height:40px}.auth-box input{background:#f9faff;border:1.5px solid #c7cde0;border-radius:11px;min-height:48px;padding:12px;width:100%;color:#28354d;font:inherit}.auth-box label{font-size:14px;font-weight:750}.auth-box form{display:grid;gap:10px}.auth-box form h2{margin:0 0 8px}.auth-box a:not(.btn){color:#533c99}.auth-box button:disabled{opacity:.6;cursor:wait}.auth-box a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}.auth-box #accountStatus{font-size:14px;padding:11px 13px;border-radius:12px;background:#eef5f3;color:#306451;white-space:pre-wrap}.auth-box #accountStatus.error{background:#fff0ee;color:#963c38}.auth-box .auth-footer{font-size:13px;margin:17px 0 0}.auth-box details{border-top:1px solid #e1e5ee;padding-top:17px;margin-top:19px}.auth-box summary{font-size:15px;font-weight:700;cursor:pointer;padding:6px 0}.auth-box .profiel-waarschuwing{font-size:12px;padding:12px;margin:15px 0 0}.auth-box .sub{font-size:13px}.auth-art{position:relative;height:265px;margin:18px 0 16px;max-width:490px}.art-card{position:absolute;background:#f0edff;color:#282d50;border-radius:18px;box-shadow:0 16px 35px #080e3833}.art-week{width:88%;left:0;top:20px;padding:20px;transform:rotate(-3deg)}.art-week>span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;color:#746394}.art-week>strong{display:block;font-size:21px;margin:7px 0 14px}.art-line{display:flex;align-items:center;gap:8px;font-size:12px;margin:10px 0}.art-line i{display:block;width:15px;height:15px;border:2px solid #9d8ec5;border-radius:5px}.art-line:first-of-type i{background:#7358bc;border-color:#7358bc}.art-line em{margin-left:auto;color:#685f7d;font-size:10px;font-style:normal}.art-focus{right:0;bottom:10px;width:157px;background:#c7f57b;padding:16px;transform:rotate(6deg)}.art-focus>span{font-size:12px;font-weight:750}.art-focus>strong{display:block;font-size:35px;letter-spacing:-1px}.art-progress{height:6px;background:#99c359;border-radius:9px;margin-top:9px}.art-progress:before{content:'';display:block;width:70%;height:6px;background:#374747;border-radius:9px}.art-orbit{position:absolute;right:-20px;top:0;width:210px;height:210px;border:1px solid #a69bea50;border-radius:50%}.art-spark{position:absolute;background:#b3a0ff;width:14px;height:30px;border-radius:3px;transform:rotate(32deg)}.spark-one{right:3px;top:0}.spark-two{left:20px;bottom:10px;width:10px;height:19px;background:#75d9cb;transform:rotate(-20deg)}
@media(max-width:800px){.auth-layout{gap:20px;padding:22px 20px 35px;grid-template-columns:1fr;max-width:570px}.auth-brand{padding:0}.auth-hero{padding-top:0}.auth-hero h1{font-size:40px;margin:10px 0 13px}.auth-hero>p:not(.auth-eyebrow){font-size:16px;margin-bottom:5px}.auth-art{display:none}.auth-tags{margin-top:16px}.auth-box{padding:23px}.auth-eyebrow{font-size:10px}.auth-hero h1{letter-spacing:-1.5px}}
@media(prefers-reduced-motion:no-preference){.art-focus{animation:gentle-float 7s ease-in-out infinite}@keyframes gentle-float{50%{transform:translateY(-7px) rotate(3deg)}}}

/* PLAN IT!: a graphic, focused login screen with an original circuit pattern. */
.auth-page{background:#f5f5fb url('../afbeeldingen/auth-pattern.svg') center top/cover fixed no-repeat;color:#35394e}.auth-layout{display:block;max-width:600px;padding:55px 30px 45px;margin:auto;min-height:100vh}.auth-brand{display:flex;justify-content:center;padding:0;margin:0 0 37px}.auth-brand>a{display:inline-block;position:relative;transform:rotate(-2deg);color:#fff;background:#d90063;padding:6px 20px 10px;font-family:'Arial Black','Segoe UI',Arial,sans-serif;font-size:45px;line-height:1.15;font-weight:950;letter-spacing:-1.8px;border-radius:5px 8px 2px 3px;box-shadow:7px 7px 0 #950c57}.auth-brand>a span{color:white}.auth-brand>a:after{content:'';position:absolute;right:-7px;bottom:-7px;border-left:7px solid #760a46;border-top:7px solid transparent}.auth-box{background:transparent;border-radius:0;padding:0;box-shadow:none}.auth-box>.panel:first-child{text-align:center;margin-bottom:24px}.auth-box>.panel:first-child h2,.auth-box>h2{font-size:28px;font-weight:850;letter-spacing:-.6px;text-align:center;line-height:1.25}.auth-box>p{text-align:center}.auth-box .account-tabs{background:#e8eaf3;border-radius:5px;margin:24px 0 26px;gap:6px;display:flex;flex-wrap:wrap;padding:5px}.auth-box .account-tabs button{flex:1;white-space:nowrap;border-radius:4px;padding:10px;font-size:14px}.auth-box .account-tabs button:last-child{flex-basis:100%}.auth-box .account-tabs button[aria-pressed=true]{color:#9f0753;box-shadow:0 2px 0 #c7ccdb;background:#fff}.auth-box input{background:white;border:1px solid #f0f1f7;border-bottom:3px solid #d7dbe5;border-radius:7px;min-height:51px;padding:13px 15px}.auth-box label{font-size:15px;margin-top:3px}.auth-box form{gap:10px}.auth-box form h2{font-size:21px;margin-bottom:7px}.auth-box form>button[type=submit]{margin-top:12px}.auth-box .btn{background:#d90063;border:0;border-bottom:4px solid #9b084f;border-radius:6px;min-height:49px;color:white;font-weight:800;box-shadow:none;padding:11px 17px}.auth-box .btn:hover{background:#bf0057}.auth-box .btn.secondary{background:#fff;border:1px solid #ced5e4;border-bottom:3px solid #bdc8d9;color:#335671}.auth-box .btn.secondary:hover{background:#eaf1f7}.auth-box a:not(.btn){color:#275f82;font-weight:700}.auth-box #accountStatus{padding:10px 12px;background:#e8f1ef;border-left:4px solid #5b9d91;border-radius:3px;color:#345d57;font-size:13px;text-align:left}.auth-box #accountStatus.error{border-color:#b84450;background:#fff0ee;color:#963c38}.auth-box .auth-footer{border-top:1px solid #dce0eb;margin-top:27px;padding-top:19px;font-size:13px;text-align:center}.auth-box .profiel-waarschuwing{border-radius:5px;background:#ebeef6}.auth-box details{margin-top:27px}.auth-box #greeting{font-size:23px}.auth-box #onlineLinks a{margin:9px 0}.auth-box #accountEmail{overflow-wrap:anywhere}.auth-box #logout{width:100%}
@media(max-width:600px){.auth-layout{padding:32px 22px 30px;max-width:530px}.auth-brand{margin-bottom:30px}.auth-brand>a{font-size:39px}.auth-box{padding:0}.auth-box>.panel:first-child h2,.auth-box>h2{font-size:25px}.auth-page{background-size:auto 100vh;background-attachment:scroll}.auth-box .account-tabs button{font-size:13px}}


.auth-box #googleLogin {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0 auto;
  padding: 4px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.auth-box .provider-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: white;
  border: 1px solid #aebcbb;
  border-radius: 50%;
}
.auth-box #googleLogin:hover .provider-icon { background: #f7f9f9; border-color: #607877; }
.auth-box #googleLogin:disabled { opacity: .6; cursor: wait; }
