@charset "UTF-8";
/* Banking Tycoon — publieke login en beveiligde accountpagina. */
.auth-page{min-height:100vh;display:flex;flex-direction:column;background:#06131f}
.auth-topbar{position:relative;z-index:1;background:#061420;box-shadow:0 7px 20px #0004;border-bottom:1px solid #284052}
.auth-topbar-content{height:77px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.auth-brand{display:flex;align-items:center;gap:12px;font:small-caps 27px/.95 Georgia,'Times New Roman',serif;letter-spacing:-.01em}
.auth-bank-icon{color:#f3c76d;width:46px;height:46px}
.auth-back{display:inline-flex;align-items:center;gap:10px;color:#d1deeb;border:1px solid #506475;border-radius:6px;padding:11px 15px;font-size:13px;transition:color .2s,border-color .2s}
.auth-back:hover{color:#f3c76d;border-color:#c09c56}
.auth-back span{font-size:19px;line-height:1}
.auth-main{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(470px,.87fr);flex:1;min-height:640px}
.auth-visual{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:#0e2339 url('../img/hero_city.webp') center / cover no-repeat;isolation:isolate;border-right:1px solid #2b4256}
.auth-visual::before{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(90deg,#061321df 0%,#06132190 45%,#06132130 100%),linear-gradient(0deg,#05121dec 0%,transparent 47%,#05121d24)}
.auth-visual-content{padding:60px clamp(28px,6.1vw,105px);max-width:850px;text-shadow:0 2px 13px #0008}
.auth-visual-content .eyebrow{letter-spacing:.22em}
.auth-visual h1{font:700 clamp(52px,5.3vw,90px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:20px 0 24px;text-transform:none}
.auth-visual h1 span{color:#f3c76d}
.auth-visual-content>p{max-width:550px;font-size:19px;color:#ebf0f6;line-height:1.55;margin:0 0 42px}
.auth-visual-list{display:grid;gap:17px;color:#f0f4f8;font-size:15px}
.auth-visual-list span{display:flex;align-items:center;gap:15px}
.auth-visual-list b{color:#e5b65a;font-size:15px}
.auth-photo-credit{position:absolute;bottom:21px;left:clamp(28px,6.1vw,105px);color:#ebd6ae;font-size:10px;letter-spacing:.16em}
.auth-photo-credit span{margin-inline:9px}
.auth-login-area{background:radial-gradient(ellipse at 40% 13%,#15344e 0%,#091a2b 50%,#05131f 100%);padding:45px clamp(28px,5vw,90px);display:flex;justify-content:center;align-items:center}
.auth-panel{width:100%;max-width:435px}
.auth-mark{border:1px solid #9b753b;background:linear-gradient(140deg,#193248,#0b1c2b);display:grid;place-items:center;border-radius:13px;width:70px;height:70px;margin:0 0 22px;box-shadow:0 7px 24px #0004}
.auth-mark svg{color:#f3c76d;width:44px;height:44px}
.auth-eyebrow{letter-spacing:.23em}
.auth-panel h2{font:700 46px/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:10px 0 11px}
.auth-intro{line-height:1.55;color:#b9c9d7;font-size:15px;margin:0 0 30px}
.auth-form{display:flex;flex-direction:column}
.auth-form label{font-size:14px;font-weight:650;color:#f0f4f8;margin:0 0 9px}
.auth-label-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.auth-input-wrap{display:flex;align-items:center;position:relative;min-height:53px;border:1px solid #455b6c;border-radius:6px;background:#091b2c;transition:border-color .2s,box-shadow .2s}
.auth-input-wrap:focus-within{border-color:#f3c76d;box-shadow:0 0 0 3px #e3b75b24}
.auth-input-wrap>svg{width:20px;height:20px;color:#8cabbc;flex:none;margin-left:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth-input-wrap input{background:transparent;color:#fff;border:0;outline:none;min-width:0;flex:1;font:15px 'Segoe UI',Arial,sans-serif;height:52px;padding:0 14px}
.auth-input-wrap input::placeholder{color:#8195a8}
.auth-password-wrap input{padding-right:3px}
.auth-reveal{background:transparent;border:0;color:#f3c76d;min-width:62px;align-self:stretch;padding:0 13px;font-size:13px;font-weight:650}
.auth-reveal:hover{text-decoration:underline}
.auth-submit{min-height:54px;font-size:16px;margin-top:26px;display:flex;justify-content:center;gap:15px}
.auth-submit span{font-size:22px;font-weight:400;line-height:1}
.auth-divider{position:relative;text-align:center;margin:29px 0 23px;color:#8298aa;font-size:11px;letter-spacing:.2em}
.auth-divider:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #314759}
.auth-divider span{position:relative;z-index:1;background:#091a29;padding:0 17px}
.auth-register{text-align:center}
.auth-register p{font-size:15px;margin:0 0 9px;font-weight:650}
.auth-register span{font-size:13px;color:#a7bdcd;line-height:1.5}
.auth-security{display:flex;align-items:center;gap:9px;justify-content:center;color:#829cad;font-size:12px;border-top:1px solid #2b4354;padding-top:23px;margin-top:30px}
.auth-security svg{width:18px;height:18px;color:#f3c76d;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.auth-notice,.auth-error{border-left:3px solid #f3c76d;padding:12px 14px;background:#233443;color:#f9e4be;border-radius:4px;margin-bottom:21px;line-height:1.45;font-size:13px}
.auth-error{border-left-color:#f28b84;color:#ffe3df;background:#3d242c}
.auth-success{border-left:3px solid #8bdaa7;padding:12px 14px;color:#c1f7d3;background:#163e34;border-radius:4px;margin-bottom:21px;line-height:1.45;font-size:13px}
.caps-hint{margin:9px 0 0;color:#e3c58b;font-size:12px}
.auth-footer{background:#061420;border-top:1px solid #23384a;color:#879caa;font-size:11px}
.auth-footer>.container{display:flex;justify-content:space-between;align-items:center;min-height:52px;gap:12px}
.dashboard-main{flex:1;padding-top:80px;padding-bottom:80px}
.dashboard-welcome h1{font:700 clamp(32px,4vw,49px)/1.2 Georgia,'Times New Roman',serif;margin:14px 0}
.dashboard-welcome p{color:#bacddb;font-size:17px;margin:0 0 36px}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dashboard-card{padding:30px;background:linear-gradient(155deg,#122d42,#081b2c);border:1px solid #38546a;border-radius:10px}
.dashboard-card h2{font:700 25px Georgia,'Times New Roman',serif;margin:14px 0}
.dashboard-card p{color:#cbdae6;font-size:15px;line-height:1.6}
.dashboard-card .btn{padding:11px 17px;margin-top:12px}
.auth-status{font-size:13px;color:#a0ebbe;padding-top:10px}
.logout-form{margin-top:31px}
.logout-form .btn{padding:12px 26px}
@media(max-width:1080px){
 .auth-main{grid-template-columns:minmax(0,1fr) minmax(410px,1fr)}
 .auth-visual-content{padding:45px 38px}
 .auth-visual h1{font-size:58px}
 .auth-visual-content>p{font-size:16px}
 .auth-photo-credit{left:38px}
 .auth-login-area{padding:34px}
}
@media(max-width:770px){
 .auth-topbar-content{height:68px}
 .auth-main{grid-template-columns:1fr}
 .auth-visual{min-height:320px}
 .auth-visual-content{padding:35px 28px 45px}
 .auth-visual h1{font-size:50px;margin:12px 0 12px}
 .auth-visual-content>p{margin:0;max-width:580px}
 .auth-visual-list,.auth-photo-credit{display:none}
 .auth-login-area{padding:42px 24px 55px}
 .auth-panel{max-width:490px}
 .auth-mark{width:56px;height:56px}
 .auth-mark svg{width:34px;height:34px}
 .auth-panel h2{font-size:41px}
 .dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:470px){
 .auth-brand{font-size:20px;gap:7px}
 .auth-bank-icon{width:35px;height:35px}
 .auth-back{padding:9px 10px;font-size:12px}
 .auth-visual{min-height:262px}
 .auth-visual h1{font-size:43px}
 .auth-visual-content>p{font-size:14px}
 .auth-login-area{padding:33px 18px 42px}
 .auth-panel h2{font-size:38px}
 .auth-footer>.container{flex-direction:column;align-items:flex-start;padding-block:15px}
 .dashboard-main{padding-top:40px}
}

/* v1.2 — Registreren (dezelfde donkerblauw/gouden vormentaal). */
.auth-secondary{width:100%;min-height:46px;margin-top:12px;padding:11px 20px}
.register-main{grid-template-columns:minmax(0,1.05fr) minmax(470px,.95fr)}
.register-main .auth-visual{align-items:flex-start}
.register-main .auth-visual-content{padding-top:125px}
.register-modes{margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:630px}
.register-modes>div{background:#071b2cde;border:1px solid #94723e;border-radius:9px;padding:18px 18px 16px;box-shadow:0 5px 20px #0005}
.register-modes .mode-age{display:block;color:#f3c76d;font-weight:750;letter-spacing:.08em;font-size:12px;margin-bottom:10px}
.register-modes strong{display:block;font:700 21px/1.2 Georgia,'Times New Roman',serif;margin-bottom:9px}
.register-modes small{display:block;font-size:12px;line-height:1.5;color:#d4e0e9}
.register-main .auth-login-area{align-items:flex-start;padding-top:60px;padding-bottom:70px}
.register-panel{max-width:540px}
.register-panel .auth-mark{width:56px;height:56px;margin-bottom:20px}
.register-panel .auth-mark svg{width:35px;height:35px}
.register-panel h2{font-size:43px}
.register-panel .auth-intro{margin-bottom:24px}
.register-panel .auth-form{gap:0}
.register-label-spaced{margin-top:17px!important}
.register-hint{color:#96adbe;font-size:12px;line-height:1.5;margin:7px 0 0}
.register-two-col{display:grid;grid-template-columns:minmax(160px,.78fr) minmax(185px,1.22fr);gap:14px}
.register-two-col label{display:block;min-height:32px;font-size:13px}
.auth-select-wrap{padding:0 13px}
.auth-select-wrap select{flex:1;width:100%;background:#091b2c;border:0;color:#f6f8fb;outline:0;font:14px 'Segoe UI',Arial,sans-serif;min-height:50px;min-width:0;cursor:pointer}
.auth-select-wrap select option{color:#151e2a;background:#f6f8fb}
.register-mode-feedback{margin-top:12px;padding:12px 14px;background:#152f41;border:1px solid #40637a;border-radius:7px;color:#e6d09f;font-size:13px;line-height:1.45}
.register-check{display:flex!important;align-items:flex-start;gap:12px;margin-top:23px!important;line-height:1.5!important;font-weight:500!important;color:#dce6eb!important}
.register-check input{appearance:auto;flex:none;accent-color:#e7b653;width:19px;height:19px;margin:2px 0 0;cursor:pointer}
.register-privacy-note{font-size:12px;line-height:1.65;color:#b0c1cf;margin:10px 0 0}
.register-honey{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.register-success-link{margin:0 0 24px}
@media(max-width:1080px){
  .register-main{grid-template-columns:minmax(0,1fr) minmax(420px,1fr)}
  .register-main .auth-visual-content{padding-top:80px}
  .register-modes{grid-template-columns:1fr}
}
@media(max-width:770px){
  .register-main{grid-template-columns:1fr}
  .register-main .auth-visual-content{padding-top:35px;padding-bottom:46px}
  .register-modes{display:none}
  .register-main .auth-login-area{padding-top:42px}
}
@media(max-width:470px){
  .register-two-col{grid-template-columns:1fr;gap:14px}
  .register-two-col label{min-height:0}
  .register-main .auth-visual h1{font-size:41px}
  .register-panel h2{font-size:40px}
}