/* Stapsteen Media - Aanmeldscherm ontwerp v1, boven op bestaande werking. */
:root{--ink:#17446f;--green:#208f45;--cream:#fffdf1}
html,body{min-height:100%}body{display:block!important;background:radial-gradient(circle at 84% 10%,#fff59b 0 7%,transparent 8%),radial-gradient(circle at 15% 8%,#d6f48c 0 8%,transparent 9%),linear-gradient(180deg,#83d8ff 0%,#d1f1ff 37%,#c9f1b7 77%,#77be75 100%)!important;color:var(--ink)!important;padding:clamp(10px,3vw,36px);font-family:'Trebuchet MS',Arial,sans-serif!important}
body::before{content:'🦋';font-size:clamp(48px,8vw,130px);position:fixed;top:12%;left:3%;pointer-events:none}body::after{content:'🦊';font-size:clamp(65px,10vw,160px);position:fixed;bottom:2%;right:1%;pointer-events:none}
.card{position:relative;z-index:1;max-width:1080px!important;width:min(100%,1080px)!important;padding:clamp(18px,3vw,40px)!important;margin:auto;background:rgba(255,253,243,.96)!important;border:6px solid #fff!important;box-shadow:0 18px 50px #155b6229;border-radius:38px!important}
.card>img{height:88px!important;width:88px!important;object-fit:contain}.card>h1{font-size:clamp(30px,4vw,55px);line-height:1.1;color:#0a4e99;margin:6px auto 4px}.card>p{color:#47749d;margin:8px}.notice{margin:14px auto;max-width:710px!important;padding:9px!important;background:#fff1c8!important;font-size:13px!important}
#classLoginSection{background:linear-gradient(145deg,#f1ffe9,#d6f2d0);border:3px solid #e4f8d8;border-radius:28px;padding:20px;margin:18px 0!important}#classLoginSection h2{color:#176837;margin:2px auto 16px;font-size:29px}
.classBtn{border:3px solid #fff!important;border-radius:22px!important;box-shadow:0 5px 11px #244f3e16;font-size:clamp(19px,2.5vw,26px)!important;min-height:92px!important}
#classPinForm{margin:16px auto 2px;max-width:500px;border-radius:22px;padding:15px;background:#ffffffbd}
#classPinForm button[type=submit],#loginButton,#adminOpen{background:linear-gradient(#84e45e,#25b74d)!important;color:white!important;text-shadow:0 1px 2px #166c36;border-radius:24px!important;box-shadow:0 6px 0 #188b43;transition:transform .12s}
#classPinForm button[type=submit]:active,#loginButton:active,#adminOpen:active{transform:translateY(3px)}
.card>details{background:linear-gradient(145deg,#e8f4ff,#d3eaff);border:3px solid #fff;border-radius:25px;padding:15px!important;margin:20px 0!important;text-align:left}
.card>details>summary{font-weight:800;color:#155ca6;text-align:center;font-size:24px;list-style:none;cursor:pointer;padding:8px}
.card>details>summary::-webkit-details-marker{display:none}.card>details>summary::before{content:'⚙️ ';font-size:27px}
.card>details[open] form{max-width:550px;margin:12px auto}.card label{color:#245779;font-size:16px}
.card input{background:white;border:2px solid #d3dfea!important;border-radius:16px!important}
#adminWelcome{max-width:600px;margin:15px auto!important;border-radius:24px!important}
#classLoginSection button:focus-visible,.card button:focus-visible,.card summary:focus-visible{outline:5px solid #094ba7;outline-offset:3px}
@media(min-width:960px){.card:has(details[open]){display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}.card:has(details[open])>img,.card:has(details[open])>h1,.card:has(details[open])>p,.card:has(details[open])>.notice,.card:has(details[open])>#adminWelcome,.card:has(details[open])>#welcomeBack,.card:has(details[open])>small{grid-column:1/-1}.card:has(details[open])>#classLoginSection{grid-column:1}.card:has(details[open])>details{grid-column:2;margin:18px 0!important}}
@media(max-width:650px){body{padding:8px}.card{padding:14px!important;border-radius:24px!important}.card>h1{font-size:30px}.classBtn{font-size:17px!important;padding:6px!important;min-height:75px!important}body::after,body::before{opacity:.22}}