:root{--login-red:#ed1c2f;--login-black:#09090a;--login-line:#dedee0;--login-muted:#69696f}
.login-body{background:#fff;color:#0b0b0d;font-family:Poppins,Arial,sans-serif}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(440px,1.08fr) minmax(440px,.92fr)}
.login-visual{position:relative;display:flex;flex-direction:column;min-height:100vh;padding:46px clamp(38px,5vw,84px);overflow:hidden;background:#080809 url('https://onlinegroeibasis.nl/assets/website-design-studio.webp') center/cover no-repeat;color:#fff}
.login-visual:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,6,.96),rgba(5,5,6,.77) 58%,rgba(5,5,6,.38))}.login-visual:after{content:'';position:absolute;left:0;bottom:0;width:38%;height:5px;background:var(--login-red)}
.login-logo,.login-visual-copy,.login-visual-foot{position:relative;z-index:1}.login-logo{display:flex;align-items:center;gap:13px;width:max-content;color:#fff}.login-logo-mark{width:48px;height:48px;position:relative;background:var(--login-red)}
.login-logo-mark:before{content:'';position:absolute;left:10px;bottom:8px;width:18px;height:18px;border:4px solid #fff;border-radius:50%}.login-logo-mark:after{content:'↗';position:absolute;right:7px;top:0;color:#fff;font-size:29px;font-weight:700;line-height:1}
.login-logo strong{display:flex;font-size:25px;line-height:1;font-weight:700;letter-spacing:-.055em}.login-logo em{color:var(--login-red);font-style:normal}
.login-visual-copy{margin:auto 0;max-width:720px;padding:80px 0}.login-kicker{display:flex;align-items:center;gap:14px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.login-kicker:before{content:'';width:34px;height:2px;background:var(--login-red)}
.login-visual h1{margin:25px 0 26px;font-size:clamp(48px,5vw,78px);line-height:.96;letter-spacing:-.065em}.login-visual h1 em{color:var(--login-red);font-style:italic}.login-visual-copy p{max-width:560px;margin:0;color:#b9b9bd;font-size:15px;line-height:1.8}.login-visual-foot{color:#88888d;font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.login-panel{display:flex;flex-direction:column;min-height:100vh;padding:42px clamp(34px,5.5vw,92px) 30px;background:#fff}.login-form-wrap{width:min(470px,100%);margin:auto}.login-kicker.dark{color:#111}.login-panel h2{margin:22px 0 9px;font-size:clamp(39px,4vw,58px);line-height:1;letter-spacing:-.06em}.login-intro{margin:0 0 38px;color:var(--login-muted);font-size:14px}
.login-panel .alert,.login-panel .error{margin:0 0 22px;border-radius:0}.login-field{margin-bottom:22px}.login-field label{display:block;margin-bottom:9px;color:#222226;font-size:11px;font-weight:700}.login-label-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.login-label-row a{margin-bottom:9px;color:#66666b;font-size:10px;font-weight:600}.login-label-row a:hover{color:var(--login-red)}
.login-field input{width:100%;height:58px;padding:0 17px;border:1px solid var(--login-line);border-radius:0;background:#fff;outline:0;font-size:14px;transition:border-color .16s,box-shadow .16s}.login-field input:hover{border-color:#aaa}.login-field input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(237,28,47,.08)}
.login-remember{display:flex;align-items:center;gap:10px;width:max-content;margin:2px 0 27px;color:#55555b;font-size:11px;cursor:pointer}.login-remember input{accent-color:var(--login-red);width:16px;height:16px;margin:0}
.login-submit{width:100%;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border:1px solid var(--login-red);border-radius:0;background:var(--login-red);color:#fff;font:700 11px Poppins;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.login-submit:hover{border-color:#0b0b0d;background:#0b0b0d;transform:translateY(-2px)}.login-submit b{font-size:19px;font-weight:400;transition:transform .18s}.login-submit:hover b{transform:translate(3px,-3px)}
.login-support{margin:25px 0 0;color:#77777d;font-size:11px}.login-support a{color:#111;font-weight:700;border-bottom:1px solid #111}.login-panel>footer{display:flex;gap:18px;justify-content:space-between;padding-top:24px;border-top:1px solid #e5e5e7;color:#99999e;font-size:9px}.login-panel>footer a:hover{color:#111}
@media(max-width:900px){.login-page{grid-template-columns:1fr}.login-visual{min-height:310px;padding:28px 24px}.login-visual-copy{padding:55px 0 35px}.login-visual h1{max-width:620px;font-size:46px}.login-visual-copy p{display:none}.login-panel{min-height:calc(100vh - 310px);padding:50px 24px 24px}.login-form-wrap{margin:0 auto 58px}}
@media(max-width:520px){.login-visual{min-height:265px}.login-logo-mark{width:40px;height:40px}.login-logo-mark:before{left:8px;bottom:7px;width:15px;height:15px;border-width:3px}.login-logo-mark:after{font-size:24px}.login-logo strong{font-size:21px}.login-visual-copy{padding:42px 0 22px}.login-visual h1{margin:18px 0 0;font-size:37px}.login-visual-foot{display:none}.login-panel{min-height:calc(100vh - 265px);padding-top:40px}.login-panel h2{font-size:40px}.login-intro{margin-bottom:30px}.login-field input,.login-submit{height:54px}}
@media(prefers-reduced-motion:reduce){.login-submit,.login-submit b,.login-field input{transition:none!important}}