/* Kidsboeken account/licentie pages — Knutselboek look (same palette as index.html) */
:root{--ink:#3B2A1A;--ink2:#5A4330;--red:#E0553F;--red-d:#B23A27;--sun:#F4B63F;--blue:#3A82C4;--green:#5BA84A;--paper:#FFFDF5}
body{margin:0;font-family:Nunito,sans-serif;color:var(--ink);background-color:#DCBB8A;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(83deg,#0000 0 3px,#ffffff0d 3px 4px,#0000 4px 9px),repeating-linear-gradient(-7deg,#0000 0 5px,#7a4f1f0a 5px 6px,#0000 6px 13px),radial-gradient(ellipse at 20% 10%,#E8CDA2 0,#0000 60%),radial-gradient(ellipse at 90% 80%,#CFA978 0,#0000 55%);
background-size:300px 300px,auto,auto,100% 100%,100% 100%;background-attachment:scroll,scroll,scroll,fixed,fixed;min-height:100vh}
.w{max-width:1000px;margin:0 auto;padding:0 18px 50px}
header{position:relative;display:flex;align-items:center;gap:12px;padding:28px 0 12px;font:400 52px 'Patrick Hand',cursive;-webkit-text-stroke:.8px var(--ink);color:var(--ink);letter-spacing:.5px}
header>a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px}
header .logo{height:64px;width:auto;transform:rotate(-8deg);filter:drop-shadow(2px 3px 0 #0002)}
#acct{margin-left:auto;align-self:center;-webkit-text-stroke:0;display:flex;align-items:center;gap:6px;border:2.5px solid var(--ink);background:var(--paper);border-radius:12px 7px 14px 6px;padding:7px 12px;box-shadow:3px 3px 0 var(--ink);font:800 15px Nunito,sans-serif;color:var(--ink);text-decoration:none;transform:rotate(-1.5deg);white-space:nowrap}
#acct .ai{font-size:20px;line-height:1}
#lang{margin-left:12px;position:relative;align-self:center;-webkit-text-stroke:0}
#lang>button{border:2.5px solid var(--ink);background:var(--paper);border-radius:14px 6px 12px 7px;padding:7px 10px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;display:flex;align-items:center;gap:6px;font:800 14px Nunito,sans-serif;color:var(--ink)}
#lang img{width:45px;height:30px;object-fit:cover;border-radius:3px;display:block;outline:1px solid #0003;image-rendering:auto}
#lang ul{display:none;position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);z-index:10}
#lang.open ul{display:block}#lang li{padding:7px;border-radius:8px;cursor:pointer}#lang li:hover,#lang li.on{background:#FBE7B5}
h1{display:inline-block;font:400 46px 'Patrick Hand',cursive;-webkit-text-stroke:.7px var(--ink);margin:8px 0 18px;line-height:1.1;padding-bottom:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23E0553F' stroke-linecap='round'%3E%3Cpath d='M4 8 C50 3 90 11 130 6 S205 4 236 7' stroke-width='6' opacity='.85'/%3E%3Cpath d='M10 10 C60 6 120 12 170 8 S220 7 232 9' stroke-width='2.5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") left bottom/100% 14px no-repeat}
h2{font:400 32px 'Patrick Hand',cursive;-webkit-text-stroke:.4px var(--ink);margin:0 0 12px;line-height:1.1}
p{font-size:18px;line-height:1.5;color:var(--ink2)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;align-items:start}
.card{position:relative;background:var(--paper);padding:26px 26px 24px;border-radius:3px;box-shadow:0 2px 2px #0002,4px 10px 18px #5a3a1240;margin-bottom:30px}
.card::before{content:"";position:absolute;top:-13px;left:50%;width:110px;height:28px;margin-left:-55px;background:#FFF3C4b8;box-shadow:0 1px 3px #0002;transform:rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 30%,97% 55%,100% 100%,2% 96%,0 62%,3% 35%,0 8%)}
.grid .card:nth-child(1){transform:rotate(-.8deg)}.grid .card:nth-child(2){transform:rotate(.7deg)}.grid .card:nth-child(2)::before{background:#CDEBFFb8}
label{display:block;font-weight:800;margin:12px 0 5px;font-size:16px}
input,select{box-sizing:border-box;width:100%;font:700 17px Nunito,sans-serif;color:var(--ink);padding:10px 12px;border:2.5px solid var(--ink);border-radius:10px 6px 10px 7px;background:#fff}
input:focus,select:focus{outline:3px solid var(--sun);outline-offset:1px}
.btn{display:inline-block;margin-top:16px;background:var(--green);color:#fff;padding:7px 24px;border:2.5px solid var(--ink);border-radius:30px 12px 28px 10px/12px 28px 10px 30px;box-shadow:3px 3px 0 var(--ink);font:400 24px 'Patrick Hand',cursive;cursor:pointer;text-decoration:none;letter-spacing:.3px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.red{background:var(--red)}.btn.blue{background:var(--blue)}.btn.sun{background:var(--sun);color:var(--ink)}.btn.paper{background:var(--paper);color:var(--ink)}
.btn.sm{font-size:18px;padding:3px 14px;margin:2px 4px 2px 0;box-shadow:2px 2px 0 var(--ink);border-width:2px}
.btn[disabled]{opacity:.55;cursor:wait}
.msg{margin:14px 0 0;padding:10px 14px;border-radius:8px;font-weight:700;font-size:16px}
.msg.err{background:#FBD9D2;color:#8A2414}.msg.ok{background:#DDF1D6;color:#24561A}.msg.info{background:#FBE7B5;color:var(--ink)}
.price{font:400 54px 'Patrick Hand',cursive;-webkit-text-stroke:.6px var(--ink);margin:4px 0}
.price small{font:700 15px Nunito,sans-serif;-webkit-text-stroke:0;color:var(--ink2)}
ul.f{padding-left:22px;margin:8px 0;font-size:17px;line-height:1.6}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links .btn{margin-top:6px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:8px 6px;border-bottom:1.5px dashed #C9B48F;vertical-align:middle}
th{font:400 20px 'Patrick Hand',cursive}
.tag{display:inline-block;font-weight:800;font-size:13px;padding:1px 8px;border-radius:10px;background:#eee}
.tag.active{background:#DDF1D6}.tag.unused{background:#FBE7B5}.tag.deactivated,.tag.expired{background:#FBD9D2}
.cred{font:700 20px ui-monospace,Menlo,monospace;background:#fff;border:2px dashed var(--ink);padding:12px 16px;border-radius:8px;margin-top:12px;line-height:1.6}
.count{font:400 30px 'Patrick Hand',cursive}
.scroll{overflow-x:auto}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 180px}
.muted{color:var(--ink2);font-size:15px}
@media(max-width:800px){.grid{grid-template-columns:1fr}}
@media(max-width:640px){
header{font-size:40px;padding-right:112px}header>a{gap:8px}header .logo{height:50px}
#lang{position:absolute;right:0;top:26px;margin:0}#lang img{width:36px;height:24px}
#acct{position:absolute;right:74px;top:27px;padding:5px 7px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}#acct .ai{font-size:18px}#acct .al{display:none}
h1{font-size:38px}.card{padding:22px 16px 20px}
}
@media(max-width:420px){header .logo{height:42px}}
.kl .acts{white-space:nowrap}
@media(max-width:640px){.kl th:nth-child(3),.kl td:nth-child(3){display:none}.kl .acts{white-space:normal;text-align:right}.kl .acts .btn{margin:3px 0}}
[hidden]{display:none!important}

#acct,#lang>button{height:48px;box-sizing:border-box;border-radius:14px;transform:none;padding:0 14px;border-width:2.5px;box-shadow:3px 3px 0 var(--ink)}@media(max-width:640px){#acct,#lang>button{height:42px;padding:0 9px;border-width:2px;border-radius:12px;box-shadow:2px 2px 0 var(--ink)}#acct{top:26px}}