:root{
  --bg:#6e5a9c; --bg-deep:#57457f; --surface:rgba(36,24,66,.36); --line:rgba(255,255,255,.16);
  --gold:#e9c96c; --gold2:#c8a349; --silver:#d9dae3; --pearl:#f8f5ef; --text:#f5f1fb; --muted:#ddd3ef;
  --red:#ff1a1a; --pink:#ec93b8; --navA:#fbfafd; --navB:#d4d5de; --navText:#54457a; --navOn:#2e2150;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#5a4884;--bg-deep:#44356a;--surface:rgba(24,15,46,.42)}}
:root[data-theme="dark"]{--bg:#5a4884;--bg-deep:#44356a;--surface:rgba(24,15,46,.42)}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);color:var(--gold);font-weight:600;line-height:1.15;margin:0}
h1{font-size:30px} h2{font-size:25px} h3{font-size:20px}
p{margin:.5em 0}
.small{font-size:14px} .muted{color:var(--muted)} .mt{margin-top:14px} .wide{width:100%}
.row{display:flex;align-items:center;justify-content:space-between} .gap{gap:10px;justify-content:flex-start} .wrap{flex-wrap:wrap}

#app{max-width:560px;margin:0 auto;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
#top{position:relative;text-align:center}
.logo-wrap{position:relative;padding-top:6px}
.logo-wrap img{display:block;margin:-6px auto -34px;width:min(84%,380px);height:auto}
.immersive .logo-wrap img{width:140px;margin:-4px auto -18px}
.top-btns{position:absolute;top:10px;right:12px;display:flex;gap:8px}
.top-btns button{min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(30,20,55,.4);color:var(--pearl);font:700 14px var(--sans);cursor:pointer}
main{padding:0 16px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin:0 0 14px}
.btn{appearance:none;border:0;border-radius:999px;padding:12px 20px;font:800 15px var(--sans);cursor:pointer;min-height:44px}
.btn-gold{background:linear-gradient(180deg,#f3dc92,var(--gold2));color:#2d1f4d}
.btn-ghost{background:transparent;border:1.5px solid var(--silver);color:var(--pearl)}
.btn-red{background:var(--red);color:#fff}
.btn-pink{background:var(--pink);color:#3a1830}
.linkbtn{background:none;border:0;color:var(--silver);font:600 14px var(--sans);cursor:pointer;padding:8px 4px;min-height:40px}
.pill{display:inline-block;font:700 12px var(--sans);padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.14)}
.pill.red{background:var(--red);color:#fff} .pill.ok{background:#3f9d6b;color:#fff} .pill.gold{background:var(--gold);color:#2d1f4d}

.av{position:relative;flex:none;width:var(--s,44px);height:var(--s,44px);border-radius:50%;border:3px solid var(--silver);background:var(--h,#7d63b0);display:grid;place-items:center;color:#fff;font:800 calc(var(--s,44px)*.34) var(--sans);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 14px rgba(230,232,245,.35)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:28%;height:28%;min-width:11px;min-height:11px;border-radius:50%;border:2px solid var(--bg);background:#9aa0ad}
.av .dot.on{background:#4fd18b}

.hero{display:flex;gap:18px;align-items:center}
.hero h1{word-break:break-word}
.hero-actions{margin-top:14px}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold))}
.big{font:700 30px var(--serif);color:var(--gold)}
input,textarea,select{width:100%;background:rgba(255,255,255,.09);border:1px solid var(--line);border-radius:12px;color:var(--pearl);padding:11px 12px;font:16px var(--sans)}
select option{color:#222}
label,.lab{display:block;font-size:14px;font-weight:700;color:var(--muted);margin:14px 0 6px}
input[type=file]{padding:9px}
.spot{border-color:var(--pink);background:linear-gradient(160deg,rgba(236,147,184,.28),rgba(36,24,66,.36))}
.spot h2{color:#ffd7e8}
.section-h{margin:24px 0 4px}
.day{font:700 14px var(--sans);color:var(--gold);margin:18px 0 8px}

.post{--c:#b79be6;border:2px solid var(--c);border-radius:18px;padding:14px;margin:0 0 14px;color:var(--pearl);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 32%,#2a1c49),color-mix(in srgb,var(--c) 10%,#2a1c49));
  box-shadow:0 8px 24px color-mix(in srgb,var(--c) 22%,transparent)}
.post header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.post b{color:var(--pearl)}
.post time{display:block;font-size:13px;color:var(--silver)}
.tag{margin-left:auto;font:700 12px var(--sans);padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--c) 45%,transparent);border:1px solid var(--c);color:var(--pearl);white-space:nowrap}
.post p{color:var(--pearl);margin:8px 0}
.post footer{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--silver)}
.media-sm{border-radius:12px;overflow:hidden;margin:6px 0}
.media-sm img,.media-sm video{display:block;width:100%;max-height:340px;object-fit:cover}

/* Discover: full-screen reels */
.viewer{position:relative;margin:0 -16px;overflow:hidden}
.reel{--c:#b79be6;height:100%;transition:transform .22s ease,opacity .22s ease;touch-action:pan-y;user-select:none}
.reel-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.media{height:100%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 75%,#fff 5%),#1b1233 78%)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;font-size:28px;color:#fff;padding-left:5px}
.ov-top{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:10px;align-items:flex-start}
.hint{flex:1;text-align:center;font-size:12.5px;color:#fff;background:rgba(20,10,40,.45);border-radius:14px;padding:6px 10px}
.rb{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(20,10,40,.5);color:#fff;font:800 18px var(--sans);cursor:pointer}
.ov-bottom{position:absolute;left:14px;right:14px;bottom:34px;display:flex;gap:10px;align-items:center;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.scroll-cue{position:absolute;bottom:6px;left:0;right:0;text-align:center;color:#fff;font-size:20px;opacity:.8}
.reel-text{padding:20px 18px 48px;background:linear-gradient(180deg,#221640,color-mix(in srgb,var(--c) 16%,#221640));border-top:3px solid var(--c);color:var(--pearl);min-height:55%}
.reel-text time{font-size:13px;color:var(--silver)}
.reel-text .lead{font-size:18px}
.endcard{height:100%;display:grid;place-items:center;text-align:center;padding:30px}

/* bottom nav: silver & pearl white */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(180deg,var(--navA),var(--navB));border-top:1px solid #fff;box-shadow:0 -6px 22px rgba(20,10,40,.28);padding-bottom:env(safe-area-inset-bottom,0px)}
.navin{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;align-items:start}
#nav button{background:none;border:0;color:var(--navText);font:700 11.5px var(--sans);padding:8px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;min-height:56px}
#nav .i{font-size:22px;line-height:1}
#nav button[aria-current="page"]{color:var(--navOn)}
#nav button[aria-current="page"]::after{content:"";width:18px;height:3px;border-radius:3px;background:var(--gold2)}
#nav .plus .i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-top:-22px;font-size:30px;color:var(--navOn);background:radial-gradient(circle at 35% 30%,#fff,#d8d9e2);border:2px solid var(--gold2);box-shadow:0 4px 14px rgba(40,20,80,.3)}

/* glowing alert button */
#alertFab{position:fixed;z-index:31;right:max(14px,calc((100vw - 560px)/2 + 14px));bottom:calc(88px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;border:3px solid #fff;background:#ff1a1a;color:#fff;font:900 26px var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#alertFab.live{background:var(--red);animation:pulse 1.6s ease-in-out infinite}
#alertFab .badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:#fff;color:var(--red);font:900 12px/22px var(--sans)}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(226,67,59,.75)}50%{transform:scale(1.16);box-shadow:0 0 0 16px rgba(226,67,59,0)}}
@media (prefers-reduced-motion:reduce){#alertFab.live{animation:none;box-shadow:0 0 0 7px rgba(255,26,26,.45)}.reel{transition:none}}

.sheet-wrap{position:fixed;inset:0;z-index:50;background:rgba(15,8,30,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{position:relative;background:var(--bg-deep);width:100%;max-width:560px;max-height:90vh;overflow:auto;border-radius:24px 24px 0 0;padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--gold)}
.close{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--pearl);font:700 18px var(--sans);cursor:pointer}
.sheet h2{padding-right:50px}

.picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.pick{--c:#fff;display:flex;gap:9px;align-items:center;text-align:left;padding:10px;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.07);color:var(--pearl);font:700 13px/1.3 var(--sans);cursor:pointer;min-height:48px}
.pick i{width:20px;height:20px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 10px var(--c)}
.pick[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 26%,transparent)}

.seg{display:flex;background:rgba(255,255,255,.09);border-radius:99px;padding:4px;margin-top:6px}
.seg button{flex:1;border:0;background:none;color:var(--muted);padding:9px 6px;border-radius:99px;font:800 13px var(--sans);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--pearl);color:var(--navOn)}
.al{border-left:4px solid var(--red);background:rgba(226,67,59,.14);border-radius:12px;padding:12px 14px;margin:10px 0}
.al.old{border-left-color:var(--silver);background:rgba(255,255,255,.06)}
.al.q{border-left-color:var(--gold);background:rgba(233,201,108,.1)}
details summary{cursor:pointer;font:700 16px var(--sans);color:var(--gold);padding:8px 0}

.lb{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line)}
.lb .rank{width:30px;text-align:center;font:700 22px var(--serif);color:var(--gold)}
.lb.me{background:rgba(233,201,108,.14);border-radius:14px;border-bottom:0}
.plans{display:grid;gap:10px}
.plan{text-align:left;border:2px solid var(--line);background:rgba(255,255,255,.06);border-radius:16px;padding:14px 16px;color:var(--pearl);font:inherit;cursor:pointer}
.plan[aria-pressed="true"]{border-color:var(--gold);background:rgba(233,201,108,.1)}
.plan ul{margin:6px 0 0;padding-left:20px;font-size:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--pearl)}
.check input{width:22px;height:22px;flex:none;margin-top:2px}
.chak{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.chak i{width:26px;height:26px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 14px var(--c);margin-top:2px}
.prose p{max-width:62ch}
ol.rules{padding-left:22px} ol.rules li{margin:8px 0}
.menu-list button{display:block;width:100%;text-align:left;padding:14px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--pearl);font:700 17px var(--sans);cursor:pointer}

#toast{position:fixed;left:50%;bottom:calc(160px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;background:var(--pearl);color:var(--navOn);padding:11px 18px;border-radius:18px;font:800 14px var(--sans);transition:.25s;z-index:60;max-width:88vw;text-align:center;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* live version */
button:disabled{opacity:.6;cursor:progress}
.chak-btn{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;text-align:left;font:inherit;cursor:pointer;align-items:center}
.chak-btn>span{font-size:24px;color:var(--gold)}
.voice-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:rgba(0,0,0,.2);border-radius:12px}
.voice-box span{font-size:34px}
.voice-box audio{width:100%}
.media .voice-box{width:86%}

/* ---------- emergency call bar ---------- */
.sos{margin:14px 0 6px;padding:14px;border-radius:20px;background:rgba(226,67,59,.16);border:1.5px solid var(--red)}
.sos h3{color:#fff}
.sos-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sos-tile{display:flex;flex-direction:column;background:rgba(20,10,40,.35);border-radius:16px;overflow:hidden}
.sos-tile.sea{grid-column:1/-1}
.sos-call{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 10px;text-decoration:none;color:#fff;text-align:center;min-height:118px;justify-content:center}
.sos-call:active{background:var(--red)}
.sos-i{font-size:40px;line-height:1}
.sos-call b{font-size:15px;line-height:1.25}
.sos-n{font:800 22px var(--sans);color:var(--gold);letter-spacing:.04em}
.sos-wa{display:block;text-align:center;padding:12px;background:#1f8f55;color:#fff;font:800 15px var(--sans);text-decoration:none}
.sos-copy{background:none;border:0;border-top:1px solid var(--line);color:var(--silver);font:600 13px var(--sans);padding:10px 6px;min-height:44px;cursor:pointer}

.check.age18{margin-top:10px;padding:10px 12px;border:2px solid var(--gold);border-radius:12px}

/* kennisbibliotheek */
.lib-head.silver{border-color:var(--silver);background:linear-gradient(160deg,rgba(222,223,235,.28),var(--surface))}
.lib-head.spirit{border-color:#6f5fdc;background:linear-gradient(160deg,rgba(111,95,220,.35),var(--surface))}
.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lib-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);font:600 14px var(--sans);cursor:pointer;min-height:96px}
.lib-i{font-size:26px;line-height:1}
.art{border-top:1px solid var(--line);padding:10px 0}
.art summary{cursor:pointer;display:flex;flex-direction:column;gap:4px;list-style:none}
.art summary::-webkit-details-marker{display:none}
.art-img{max-width:100%;border-radius:12px;margin-top:8px}
.kind{display:inline-block;font:800 11.5px var(--sans);padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.16)}
.kind-science{background:#2f7fc8;color:#fff}.kind-history{background:#a7773a;color:#fff}.kind-philosophy{background:#6a5acd;color:#fff}.kind-spiritual{background:#b99ce8;color:#2d1f4d}.kind-experience{background:#ec93b8;color:#2d1f4d}

#nav .plus .i{width:36px;height:36px;font-size:22px;margin-top:-10px;color:#2d1f4d;background:linear-gradient(180deg,#f3dc92,var(--gold2));border:2px solid #fff}
.spirit-btn{display:flex;gap:14px;align-items:center;width:100%;color:var(--text);font:inherit;cursor:pointer;border-color:#6f5fdc;background:linear-gradient(160deg,rgba(111,95,220,.45),var(--surface))}
.lib-head.silver{border-color:#efe3c2;background:linear-gradient(160deg,rgba(239,227,194,.32),var(--surface))}
.lib-head.men{border-color:#d4a63a;background:linear-gradient(160deg,rgba(212,166,58,.45),var(--surface))}
.card.stats{margin:8px 0 12px;padding:12px}

.mem{border-top:1px solid var(--line);padding:10px 0}.mem:first-child{border-top:0}.mem a{color:var(--gold)}
/* doneerpagina */
.give-btn{border-color:var(--pink);background:linear-gradient(160deg,rgba(236,147,184,.45),var(--surface))}
.give-head{border-color:var(--pink);background:linear-gradient(160deg,rgba(236,147,184,.3),var(--surface))}
.give-home{border-color:var(--gold);background:linear-gradient(160deg,rgba(233,201,108,.22),var(--surface))}
.thank{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.thank:last-child{border-bottom:0}

.heart-wrap{display:flex;justify-content:center;margin:14px 0 6px}
.heart{width:150px;height:auto;filter:drop-shadow(0 4px 14px rgba(236,72,153,.35))}
.heart .wave{animation:wv 2.4s linear infinite}
@keyframes wv{to{transform:translateX(25px)}}
@media (prefers-reduced-motion:reduce){.heart .wave{animation:none}}

#chatList{max-height:55vh;overflow-y:auto;margin:10px 0}
.msg{background:rgba(255,255,255,.08);padding:8px 12px;border-radius:14px;margin:6px 0;max-width:85%}
.msg.me{margin-left:auto;background:rgba(234,199,78,.22)}
.chat-in{display:flex;gap:8px;align-items:flex-end}.chat-in textarea{flex:1;margin:0}
.chat-row{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer}

.logo-wrap img{-webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 60%,transparent 100%)}
#navin .i svg{display:block;margin:0 auto}

/* winkel */
.shop-head{border-color:var(--gold);background:linear-gradient(160deg,rgba(233,201,108,.22),var(--surface))}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.prod img,.prod-noimg{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:rgba(255,255,255,.92)}
.prod-noimg{display:grid;place-items:center;font-size:40px;background:rgba(255,255,255,.08)}
.prod-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-body h3{margin:0;font-size:16px;line-height:1.25}
.prod-body p{margin:0}
.prod-price{color:var(--gold);font-size:17px}
.prod-body .btn{margin-top:auto;padding:10px 8px;font-size:13.5px}
.prod.out img{filter:grayscale(.8);opacity:.6}
.qty{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;border:1.5px solid var(--gold);border-radius:999px;padding:3px}
.qty button{width:38px;height:38px;border-radius:50%;border:0;background:var(--gold);color:#2d1f4d;font:900 20px var(--sans);cursor:pointer}
.thank .qty{max-width:150px;margin-top:8px}
.cart-bar{position:fixed;z-index:29;left:max(14px,calc((100vw - 560px)/2 + 14px));right:max(84px,calc((100vw - 560px)/2 + 84px));bottom:calc(92px + env(safe-area-inset-bottom,0px));min-height:50px;border:2px solid #fff;border-radius:999px;background:linear-gradient(180deg,#f3dc92,var(--gold2));color:#2d1f4d;font:800 15px var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.prod-prev{width:100%;max-height:220px;object-fit:contain;border-radius:14px;background:#fff;margin-top:8px}
.check{display:flex;align-items:center;gap:10px;margin-top:14px}
.check input{width:22px;height:22px;padding:0}
@media (max-width:340px){.shop-grid{grid-template-columns:1fr}}

/* 7 knoppen onderin */
#nav button{font-size:10px;padding:8px 1px 9px;min-width:0}
#nav button:not(.plus) .i{height:26px;display:flex;align-items:center;justify-content:center}
#nav .l{display:block;max-width:100%;line-height:1.15;text-align:center;overflow-wrap:anywhere}