/* De opmaak van de landingpagina en het bouwbord.

   Het eerste deel is een letterlijke kopie van het style-blok in
   templates/login.html, zodat beide pagina's er hetzelfde uitzien als het
   inlogscherm. Bewust letterlijk: bijwerken is het blok opnieuw overnemen, en
   in een diff zie je meteen wat er verschilt.

   Ongebruikte regels (.err, .field, .divider, .signup) blijven staan om die
   kopie letterlijk te houden.

   Waarom een kopie en geen gedeeld bestand met de applicatie: deze pagina's
   worden door Caddy van schijf geserveerd en komen nooit langs Flask. Ze
   moeten online kunnen staan terwijl de app eronder plat ligt. */

:root{--bg:#06111d;--panel:#0b1b2a;--line:#183249;--text:#eef5fb;--muted:#8da2b6;--blue:#168cff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;padding:28px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 16% 14%,rgba(22,140,255,.17),transparent 30%),radial-gradient(circle at 82% 84%,rgba(18,90,145,.12),transparent 28%),var(--bg);color:var(--text);display:grid;place-items:center}
.shell{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(430px,1.08fr);width:min(1050px,100%);min-height:610px;border:1px solid #183047;border-radius:28px;overflow:hidden;background:#081725;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.intro{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:48px;background:linear-gradient(150deg,#0b2640 0%,#081928 62%,#071522 100%);overflow:hidden}
.intro:before{content:"";position:absolute;width:320px;height:320px;right:-150px;top:-120px;border:1px solid rgba(70,171,255,.17);border-radius:50%;box-shadow:0 0 0 48px rgba(43,141,225,.035),0 0 0 96px rgba(43,141,225,.025)}
.brand{position:relative;display:flex;align-items:center;gap:13px}.brand img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(27,145,255,.3))}.brand-name{font-size:22px;font-weight:900;letter-spacing:5px;background:linear-gradient(90deg,#4ca8ff,#178cff 58%,#21cee9);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-copy{position:relative;margin:50px 0 auto;padding-top:70px}.intro-copy h1{max-width:390px;margin:0;color:#f7fbff;font-size:38px;line-height:1.13;letter-spacing:-1.1px}.intro-copy p{max-width:390px;margin:18px 0 0;color:#9db0c2;font-size:15px;line-height:1.7}.features{position:relative;display:grid;gap:12px;margin-top:38px}.feature{display:flex;align-items:center;gap:11px;color:#b9c9d7;font-size:13px}.feature:before{content:"✓";display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border:1px solid #176ba3;border-radius:8px;background:#0a3455;color:#51b7ff;font-weight:900}
.copyright{position:relative;margin-top:40px;color:#526b81;font-size:11px}
.login-panel{display:grid;place-items:center;padding:48px;background:linear-gradient(145deg,#0c1c2b,#091725)}
.login-wrap{width:min(390px,100%)}.mobile-brand{display:none}.eyebrow{color:#319fff;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.login-wrap h2{margin:9px 0 7px;color:#f8fbfe;font-size:29px;letter-spacing:-.6px}.sub{margin:0 0 28px;color:var(--muted);font-size:14px;line-height:1.5}
.field{margin:15px 0}.field label{display:block;margin-bottom:7px;color:#b6c5d3;font-size:12px;font-weight:800}.field input{width:100%;min-height:48px;padding:12px 13px;border:1px solid #203c53;border-radius:12px;outline:0;background:#071521;color:#f3f8fc;font-size:16px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.field input::placeholder{color:#526b80}.field input:hover{border-color:#2a4b64}.field input:focus{border-color:#258fff;background:#081a29;box-shadow:0 0 0 3px rgba(37,143,255,.15)}
.login-button,.signup{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border-radius:12px;font:inherit;font-size:14px;font-weight:850;text-align:center;text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.login-button{margin-top:20px;border:1px solid #328fff;background:linear-gradient(135deg,#167fe7,#1757dd);color:#fff;box-shadow:0 9px 24px rgba(18,92,210,.24)}.login-button:hover{transform:translateY(-1px);box-shadow:0 12px 27px rgba(18,92,210,.32)}.signup{margin-top:11px;border:1px solid #203c53;background:#0a1a28;color:#c4d2de}.signup:hover{background:#0d2335;border-color:#2b526f;color:#fff}
.divider{display:flex;align-items:center;gap:12px;margin:21px 0 0;color:#5f768a;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.55px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#183249}
.err{margin:0 0 16px;padding:11px 12px;border:1px solid #6f2832;border-radius:11px;background:rgba(128,30,42,.18);color:#ff9ca7;font-size:13px;line-height:1.45}
@media(max-width:780px){body{padding:0;background:#071421}.shell{display:block;width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none}.intro{display:none}.login-panel{min-height:100dvh;padding:calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom))}.mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:54px}.mobile-brand img{width:44px;height:44px;object-fit:contain}.mobile-brand span{font-size:19px;font-weight:900;letter-spacing:4px;color:#299aff}.login-wrap h2{font-size:27px}}
@media(max-width:380px){.login-panel{padding-left:16px;padding-right:16px}.mobile-brand{margin-bottom:36px}}

/* Enkel voor deze twee pagina's. */
.status{display:flex;align-items:center;gap:11px;margin-top:26px;padding:14px 15px;border:1px solid #203c53;border-radius:12px;background:#0a1a28;color:#c4d2de;font-size:13px;line-height:1.5}
.status:before{content:"";flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#51b7ff;box-shadow:0 0 0 4px rgba(81,183,255,.16)}
.mobile-features{display:none}
@media(max-width:780px){.mobile-features{display:grid;gap:12px;margin-top:26px}.mobile-features .feature{display:flex;align-items:center;gap:11px;color:#b9c9d7;font-size:13px}.mobile-features .feature:before{content:"✓";display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border:1px solid #176ba3;border-radius:8px;background:#0a3455;color:#51b7ff;font-weight:900}}