:root{--orange:#f28c28;--orange-dark:#d96f0f;--cream:#fff8ef;--ink:#2f241d;--muted:#75685e;--line:#eadfd4;--card:#fff;--success:#2e7d32;--danger:#b3261e;--shadow:0 10px 30px rgba(65,45,25,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink)}body{min-height:100vh}button,input{font:inherit}button{cursor:pointer}main{min-height:100vh}.view{max-width:720px;margin:0 auto;padding:20px 16px 92px}.hidden{display:none!important}.login-shell{display:grid;place-items:center;min-height:100vh;padding-bottom:20px}.brand-card{width:min(100%,460px);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}.logo-mark{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--orange);color:#fff;font-size:32px;font-weight:800;margin-bottom:18px}h1,h2,p{margin-top:0}h1{font-size:30px;margin-bottom:6px}h2{font-size:22px;margin-bottom:0}.subtitle{color:var(--muted);font-size:16px;margin-bottom:24px}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-weight:800;font-size:11px;color:var(--orange-dark);margin-bottom:6px}.stack{display:grid;gap:16px}label{display:grid;gap:7px;font-weight:700;font-size:14px}input{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 15px;outline:none}input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,140,40,.13)}.primary,.ghost{border:0;border-radius:14px;padding:13px 16px;font-weight:800}.primary{background:var(--orange);color:#fff}.primary:hover{background:var(--orange-dark)}.primary:disabled{opacity:.55;cursor:not-allowed}.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.compact{padding:9px 12px;font-size:13px}.small{font-size:13px}.muted{color:var(--muted)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 0 20px}.topbar h1{margin-bottom:0}.welcome-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#fff 0%,#fff3e4 100%);border:1px solid var(--line);border-radius:22px;padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}.welcome-card p{margin-bottom:2px}.badge{background:#fff0dc;color:var(--orange-dark);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid #ffd6a7}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#f4e9dd;border-radius:16px;padding:4px;margin-bottom:22px}.tab{border:0;background:transparent;border-radius:12px;padding:11px 8px;font-weight:800;color:var(--muted)}.tab.active{background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(80,50,20,.08)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}.cards{display:grid;gap:13px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;box-shadow:0 5px 16px rgba(65,45,25,.04)}.card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.date{font-weight:900;font-size:18px}.location{font-size:14px;color:var(--muted);margin-top:3px}.slot{font-weight:800;text-align:right;white-space:nowrap}.meta{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}.pill{font-size:12px;font-weight:800;background:#f7f1eb;border-radius:999px;padding:7px 9px;color:var(--muted)}.pill.ok{background:#edf7ee;color:var(--success)}.pill.full{background:#fceeed;color:var(--danger)}.note{font-size:13px;color:var(--muted);padding-top:10px;border-top:1px solid #f1e8df;margin-top:10px}.actions{display:flex;gap:9px;margin-top:14px}.actions button{flex:1}.empty{background:#fff;border:1px dashed #d9c8b6;border-radius:20px;padding:28px;text-align:center;color:var(--muted)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#2f241d;color:#fff;padding:12px 16px;border-radius:999px;font-weight:700;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:1000;max-width:calc(100vw - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.spinner{padding:30px;text-align:center;color:var(--muted)}@media (min-width:700px){.view{padding-top:34px}}

select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 15px;outline:none;font:inherit;color:var(--ink)}
select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,140,40,.13)}
.admin-panel{position:sticky;bottom:12px;margin-top:18px}
.admin-add{width:100%;box-shadow:0 10px 24px rgba(216,111,15,.18)}
.modal{position:fixed;inset:0;background:rgba(47,36,29,.45);display:grid;place-items:end center;z-index:900;padding:16px}
.modal-card{width:min(100%,720px);background:var(--cream);border-radius:24px 24px 12px 12px;padding:20px;max-height:90vh;overflow:auto;box-shadow:0 30px 70px rgba(30,20,10,.25)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:700px){.modal{place-items:center}.modal-card{border-radius:24px;padding:24px}}

.beheer-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.beheer-title{margin:8px 0 12px;font-size:1.25rem}
.person-card{padding:18px}
.person-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.person-name{font-weight:800;font-size:1.08rem}
.person-detail{margin-top:4px;color:var(--muted);font-size:.92rem;word-break:break-word}
.person-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.person-actions{display:flex;gap:8px;margin-top:14px}
.person-actions button{flex:1}
.checkrow{display:flex!important;align-items:center;gap:10px}
.checkrow input{width:auto!important;box-shadow:none!important}
.admin-tools{display:flex;gap:8px;margin-top:10px}
.admin-tools button{flex:1;padding:10px 12px;font-size:.9rem}
.danger{border-color:#e6b7ae!important;color:#a33b2c!important;background:#fff!important}
@media(max-width:600px){.beheer-actions{grid-template-columns:1fr}.person-actions,.admin-tools{flex-direction:column}}

.invite-btn{margin-top:10px;width:100%}
.invite-btn:disabled{opacity:.55;cursor:not-allowed}
.login-status{font-size:.86rem;font-weight:700}

/* ZusjesHub startscherm v5 */
.hub-heading{margin-top:4px}.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hub-tile{min-height:132px;border:1px solid var(--line);border-radius:22px;background:#fff;text-align:left;padding:18px;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transition:transform .15s ease,box-shadow .15s ease}.hub-tile:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(65,45,25,.11)}.hub-tile>span:not(.hub-icon){font-size:17px;font-weight:900}.hub-tile small{display:block;margin-top:4px;color:var(--muted);font-weight:600}.hub-icon{font-size:27px;margin-bottom:10px}.hub-tile:last-child{grid-column:1/-1;min-height:112px}.beheer-link{width:100%;margin-top:14px;border:1px solid #ffd6a7;background:#fff3e4;color:var(--orange-dark);border-radius:16px;padding:12px 16px;font-weight:900}.module-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.module-top strong{font-size:18px}.coming-soon{background:#fff;border:1px solid var(--line);border-radius:24px;padding:38px 24px;text-align:center;box-shadow:var(--shadow)}.coming-icon{font-size:42px;margin-bottom:12px}.coming-soon h2{margin-bottom:8px}@media(max-width:480px){.hub-grid{grid-template-columns:1fr 1fr;gap:10px}.hub-tile{min-height:122px;padding:15px}.hub-tile>span:not(.hub-icon){font-size:15px}.hub-tile small{font-size:11px}}

/* ZusjesHub startscherm v7 – stijl Speelotheek De Zusjes */
#appView{max-width:1040px;padding-top:22px}.brand-topbar{padding:0 0 24px}.brand-lockup{display:flex;align-items:center;gap:18px}.brand-symbol{width:86px;height:72px;position:relative;flex:0 0 auto}.brand-symbol i{position:absolute;width:54px;height:43px;border-radius:55% 45% 55% 45%;opacity:.82;transform:rotate(28deg)}.brand-symbol i:nth-child(1){background:#ff4b25;left:2px;top:2px}.brand-symbol i:nth-child(2){background:#ffc94f;left:29px;top:10px;transform:rotate(-18deg)}.brand-symbol i:nth-child(3){background:#4b39ee;left:4px;top:27px;transform:rotate(12deg)}.brand-symbol i:nth-child(4){background:#e600b9;left:30px;top:29px;transform:rotate(-9deg)}.brand-words{display:flex;flex-direction:column;line-height:.92}.brand-words span,.brand-words strong{font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed;font-weight:300;letter-spacing:.035em}.brand-words span{font-size:31px;color:#16120f}.brand-words strong{font-size:31px;color:#f06c13;margin-top:9px}.logout-outline{border:1.5px solid #f27a18;border-radius:20px;background:transparent;color:#e66e10;font-weight:850;padding:12px 18px;font-size:15px}.logout-outline span{font-size:20px;margin-left:5px}.welcome-home{min-height:152px;padding:32px 42px;border-color:#f4d5bd;background:rgba(255,249,242,.72);box-shadow:0 8px 22px rgba(96,61,29,.04);position:relative;overflow:hidden}.welcome-label{font-weight:800;color:#e86e10;font-size:18px;margin-bottom:4px}.welcome-home h2{font-size:42px;line-height:1}.welcome-side{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;min-width:320px}.welcome-side .badge{font-size:14px;padding:9px 18px;border:0;background:#ffead8}.heart-flight{width:280px;height:54px;overflow:visible}.heart-flight path{fill:none;stroke:#6fa16b;stroke-width:2;stroke-dasharray:6 6;stroke-linecap:round;stroke-linejoin:round}.hub-home{margin-top:34px}.green-eyebrow{color:#4d8549;font-size:13px}.hub-title-row{display:flex;align-items:center;gap:14px}.hub-title-row h2{font-size:32px}.outline-heart{color:#f06b0d;font-size:45px;line-height:.8;font-family:Arial,sans-serif;font-weight:300}.hub-grid{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}.hub-tile,.hub-tile:last-child{grid-column:auto;min-height:250px;padding:28px 20px;align-items:center;text-align:center;justify-content:center;border-color:#f2d4bc;border-radius:24px;background:rgba(255,250,244,.76);box-shadow:0 8px 22px rgba(96,61,29,.035)}.hub-tile>span:not(.tile-icon){font-size:21px;font-weight:900;margin-top:14px}.hub-tile small{font-size:14px;margin-top:5px;color:#43525b}.tile-icon{width:94px;height:94px;border-radius:50%;background:#fff0e2;display:grid;place-items:center}.tile-icon svg{width:64px;height:64px;fill:none;stroke:#4f8b51;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.tile-icon svg .accent{stroke:#f27817;fill:none}.tile-icon svg circle.accent{fill:#f27817;stroke:none}.beheer-link{width:390px;max-width:100%;margin:24px auto 0;min-height:88px;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:10px;row-gap:1px;border-color:#f2d4bc;background:rgba(255,249,242,.8);border-radius:22px;color:#e86e10}.beheer-link .gear{color:#4f8b51;font-size:27px}.beheer-link strong{font-size:22px}.beheer-link small{grid-column:1/-1;font-size:13px}.thanks-card{min-height:104px;border:1px solid #f2d4bc;border-radius:22px;margin-top:24px;padding:20px 30px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;background:rgba(255,249,242,.72)}.solid-heart{font-size:42px;color:#ff6a0a}.thanks-card strong{font-size:19px}.thanks-card p{margin:5px 0 0;color:#56616a;font-size:14px}.footer-flower{position:absolute;right:26px;bottom:-8px;width:95px;height:88px}.footer-flower path{fill:none;stroke:#a6c99f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){#appView{padding:16px 14px 70px}.brand-symbol{width:64px;height:58px;transform:scale(.8);transform-origin:left center}.brand-lockup{gap:4px}.brand-words span,.brand-words strong{font-size:21px}.logout-outline{padding:9px 11px;font-size:12px}.welcome-home{padding:22px;min-height:130px}.welcome-home h2{font-size:34px}.welcome-side{min-width:150px}.heart-flight{width:155px}.hub-title-row h2{font-size:27px}.hub-grid{grid-template-columns:repeat(2,1fr);gap:10px}.hub-tile,.hub-tile:last-child{min-height:180px;padding:18px 10px}.tile-icon{width:72px;height:72px}.tile-icon svg{width:50px;height:50px}.hub-tile>span:not(.tile-icon){font-size:16px}.hub-tile small{font-size:11px}.thanks-card{padding:18px 16px}.footer-flower{opacity:.75;right:4px}.thanks-card p{max-width:72%}}

.text-link{border:0;background:transparent;color:#d9650c;font:inherit;font-weight:800;padding:8px 4px;cursor:pointer;text-align:center}.text-link:hover{text-decoration:underline}