/* Aanvullingen voor site, accounts en dashboard (bouwt voort op style.css) */
main.wrap{max-width:880px;padding-top:28px}
.topbar{border-bottom:1px solid var(--line);background:rgba(18,15,51,.92);position:sticky;top:0;z-index:30;backdrop-filter:blur(6px)}
.topbar-in{max-width:880px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:24px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:18px;font-weight:600}
.nav a{color:var(--text);text-decoration:none}
.nav a:hover{color:var(--amber)}
.nav .btn{color:#241700;white-space:nowrap}
.inline{display:inline;margin:0}
.btn.small{min-height:40px;padding:8px 14px;font-size:15px;display:inline-flex;align-items:center}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.narrow{max-width:440px;margin:0 auto}
.eyebrow{font-family:var(--display);font-weight:600;color:var(--amber);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.small{font-size:14px}
.alert{padding:12px 14px;border-radius:12px;margin:0 0 16px;background:var(--raise);border-left:3px solid var(--muted)}
.alert.ok{border-color:var(--ok)}
.alert.err{border-color:var(--pink)}
.alert.info{border-color:var(--amber)}
.form h2{margin-top:26px}
.form .btn{margin-top:18px}
.hint{font-size:14px;color:var(--muted);margin-top:6px}
.prefix{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.prefix span{padding:0 0 0 14px;color:var(--muted);white-space:nowrap}
.prefix input{border:0;background:transparent;padding-left:2px}
.prefix:focus-within{border-color:var(--amber)}
.prefix.suffix span{padding:0 14px 0 0}
.prefix.suffix input{padding-left:14px;padding-right:2px;text-align:right}
.sitefoot{max-width:880px;margin:0 auto;padding:28px 18px 40px;color:#6C6890;font-size:14px}

/* Dashboard */
.page-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.page-head h1{margin-bottom:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.card + .card{margin-top:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.events{list-style:none;margin:0;padding:0}
.ev{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev .name{font-weight:700;font-size:18px;color:var(--text);text-decoration:none}
.ev .name:hover{color:var(--amber)}
.ev .sub{color:var(--muted);font-size:14px;margin-top:2px}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--raise);color:var(--muted);vertical-align:middle;margin-left:6px}
.badge.live{background:rgba(91,227,168,.16);color:var(--ok)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.verify{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* Startpagina */
.hero{padding:30px 0 10px}
.hero h1{font-size:clamp(34px,7vw,60px)}
.hero p{font-size:19px;max-width:560px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.features h3{font-family:var(--display);font-size:16px;margin:0 0 6px}
@media (max-width:640px){.grid2,.features{grid-template-columns:1fr}.nav{gap:12px}.nav a:not(.btn){font-size:15px}}
@media (max-width:420px){.logo{height:19px}.topbar-in{padding:10px 14px;gap:10px}.nav{gap:10px}.nav .btn.small{padding:7px 10px;font-size:14px;min-height:36px}}

/* Meekijken door beheer */
.imp-bar{background:var(--amber);color:#241700;padding:8px 18px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:15px;position:sticky;top:0;z-index:40}
.imp-bar .btn.small{background:#241700;color:var(--amber);min-height:34px;padding:6px 12px}
/* Smalle schermen met extra menu-item (Beheer) */
@media (max-width:480px){.topbar-in{flex-wrap:wrap;row-gap:6px}.nav{gap:10px;flex-wrap:wrap}.nav a:not(.btn),.nav .link{font-size:14px}}

/* Beoordelingen */
.head-side p+p{margin-top:4px}
.rt-mini{color:var(--text);text-decoration:none}
.rt-mini:hover strong{color:var(--amber)}
.rt-card{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.rt-big{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:22px}
.rt-num{font-family:var(--display);font-weight:800;font-size:48px;line-height:1;color:var(--amber)}
.rt-dist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.rt-dist li{display:grid;grid-template-columns:34px 1fr 30px;gap:10px;align-items:center}
.rt-dist i{height:8px;border-radius:4px;background:var(--raise);overflow:hidden}
.rt-dist b{display:block;height:100%;background:var(--amber);border-radius:4px}
.rt-list{list-style:none;margin:12px 0 0;padding:0}
.rt-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.rt-list li.is-hidden{opacity:.55}
.rt-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rt-txt{margin-top:6px;overflow-wrap:anywhere}
.rt-list .link.small{font-size:14px;padding:4px 0}
.dj-rating{margin-top:48px;text-align:left}
.dj-rt-sum{display:flex;align-items:center;gap:16px;justify-content:center;font-size:24px}
.dj-rating .rt-list{margin-top:18px}
@media (max-width:560px){.rt-card{grid-template-columns:1fr}}
.dj-brand{margin:12px 0 8px}
.dj-brand img{max-width:min(90%,420px);max-height:120px;width:auto;object-fit:contain}

/* Knoppen in lijsten: vaste kolommen, zodat ze onder elkaar netjes uitlijnen */
.ev-acts{display:grid;grid-template-columns:repeat(2,124px);gap:8px;justify-content:end;align-items:center}
.ev-acts form{margin:0;display:contents}
.ev-acts .btn{min-width:112px;min-height:40px;justify-content:center}
.btn.danger-soft{color:var(--pink);border-color:rgba(255,92,138,.45)}
.btn.danger-soft:hover{border-color:var(--pink)}


/* Eventlijst: schakelaar live/afgesloten vooraan */
.ev{grid-template-columns:150px minmax(0,1fr) auto}
.ev-sw{margin:0}
.ev-help{margin:-4px 0 6px}
.ev .warn{color:var(--pink)}
.sw{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--ink);color:var(--text);font:inherit;font-weight:700;font-size:15px;text-align:left;cursor:pointer}
.sw i{flex:none;position:relative;width:42px;height:24px;border-radius:12px;background:var(--line);transition:background .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.sw[aria-pressed="true"]{border-color:var(--ok)}
.sw[aria-pressed="true"] i{background:var(--ok)}
.sw[aria-pressed="true"] i::after{transform:translateX(18px)}
.sw[aria-pressed="false"]{color:var(--muted)}
@media (max-width:640px){
  .ev{grid-template-columns:1fr;gap:10px}
  .ev-sw{order:2}.ev-acts{order:3}
  .ev-acts{grid-template-columns:1fr 1fr;justify-content:stretch}.ev-acts .btn{min-width:0;width:100%}
}

/* Statistieken */
.st-kpi{grid-template-columns:repeat(6,minmax(0,1fr))}
.st-cols{margin-top:14px}
.st-list{list-style:none;padding:0;margin:0}
.st-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.st-list li:first-child{border-top:0}
.st-r{font-family:var(--display);font-weight:800;color:var(--muted)}
.st-list li:first-child .st-r{color:var(--amber)}
.st-m{min-width:0}
.st-m strong,.st-m .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-v{text-align:right;white-space:nowrap}
.st-v b{font-family:var(--display);color:var(--amber)}
.st-v .small{display:block}
.st-evs{margin-top:14px}
.st-scroll{overflow-x:auto}
.st-table{width:100%;border-collapse:collapse;min-width:560px}
.st-table th,.st-table td{padding:10px 10px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.st-table thead th{border-top:0;color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.st-table th:first-child{text-align:left;white-space:normal}
.st-table tbody th .small{display:block;font-weight:500}
.st-kv dd{text-align:right}
@media (max-width:900px){.st-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.st-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-kv{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}
.st-kv dt,.st-kv dd{margin:0;padding:10px 0;border-top:1px solid var(--line)}
.st-kv dt{color:var(--muted)}
.st-kv dt:first-of-type,.st-kv dt:first-of-type + dd{border-top:0}
.st-kpi .n-sm{font-size:20px;line-height:1.5}

/* Abonnement en facturen */
.bill-cols{margin-top:18px}
.bill-plan{font-size:22px;margin:0;font-family:var(--display)}
.bill-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bill-change{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bill-change .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bill-change select{width:auto;min-width:120px}
.bill-mods{list-style:none;padding:0;margin:8px 0 0}
.bill-mods li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.bill-mods li:first-child{border-top:0}
.seg-pick{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;margin-bottom:12px}
.seg-pick label{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;cursor:pointer;font-weight:700;font-size:14px;margin:0}
.seg-pick input{position:absolute;opacity:0;pointer-events:none}
.seg-pick label:has(input:checked){background:var(--raise);color:var(--text)}
.seg-pick em{font-style:normal;font-weight:600;color:var(--ok);font-size:12px}
.bill-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bill-pc{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;margin:0;position:relative}
.bill-pc input{position:absolute;opacity:0}
.bill-pc:has(input:checked){border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.bp-h{font-family:var(--display);font-weight:600;font-size:17px}
.bp-p{font-family:var(--display);font-weight:800;color:var(--amber)}
.bill-modpick{border:0;padding:0;margin:14px 0 6px}
.bill-modpick legend{color:var(--muted);margin-bottom:2px}
.bill-modpick .check{margin-top:8px}
.bill-inv{list-style:none;padding:0;margin:0}
.bill-inv li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.bill-inv li:first-child{border-top:0}
.bill-inv li > span:first-child .small{display:block}
.bi-amt{font-weight:700}
.bill-live{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
code.sel{user-select:all;word-break:break-all}
td.r,th.r{text-align:right}
@media (max-width:560px){.bill-plans{grid-template-columns:1fr}}
.bill-terms{margin:10px 0 12px;font-size:14px}

/* Eén paginabreedte voor kop, inhoud en voet (gelijk aan de landingspagina) */
.topbar-in{max-width:1080px;padding-left:20px;padding-right:20px}
main.wrap{max-width:1080px;padding-left:20px;padding-right:20px}
.sitefoot{max-width:1080px;padding-left:20px;padding-right:20px}
.sitefoot a{color:inherit}
/* Menu: huidige pagina oplichten */
.nav a:not(.btn){position:relative;padding:6px 0}
.nav a.on{color:var(--amber)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--amber)}
.nav-out{background:none;border:0;padding:6px 0;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.nav-out:hover{color:var(--amber)}
.seg-pick label{position:relative}
.seg-pick input,.bill-pc input{left:0;top:0;width:1px;height:1px;margin:0}
@media (max-width:640px){.nav .nav-out{font-size:15px}}
@media (max-width:480px){.nav .nav-out{font-size:14px}}
/* Wat is er nieuw */
.cl{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column;gap:12px}
.cl > li{margin:0}
.cl-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.cl-h strong{font-family:var(--display);font-size:17px}
.cl ul{margin:0;padding-left:20px}
.cl ul li{margin:4px 0;line-height:1.5}
.cl-now{border-color:var(--amber)}
.cl > li.card{margin:0}
/* Titels in blokken oranje: beter leesbaar in een donkere zaal */
.card h2,.card h3,.card > summary strong{color:var(--amber)}
.danger-zone h2{color:var(--pink)}
/* 0.9.0: passen per feest */
.bill-pass{list-style:none;padding:0;margin:10px 0 0}
.bill-pass > li{padding:14px 0;border-top:1px solid var(--line)}
.bill-pass > li:first-child{border-top:0;padding-top:4px}
.bp-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bp-row strong{font-family:var(--display);font-size:17px}
/* Soort event kiezen bij aanmaken */
.kind-pick{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.kind-pick label{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:600}
.kind-pick input{accent-color:var(--amber);margin:0}
.kind-pick label:has(input:checked){border-color:var(--amber);background:rgba(255,181,71,.08)}
.kind-pick small{color:var(--muted);font-weight:400}
.ev-kind{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--amber);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.kind-pick input[type=radio]{appearance:auto;-webkit-appearance:radio;width:18px;height:18px;min-height:0;flex:none;padding:0;border:0;background:none;box-shadow:none}
.kind-pick label span{display:flex;flex-direction:column;line-height:1.25}
.kind-pick small{display:block;font-size:13px}

/* Breed scherm: dashboard en beheer gebruiken meer van de breedte (laptop/monitor); telefoon en tablet blijven gelijk */
@media (min-width:1200px){
  body.app-wide .topbar-in,body.app-wide main.wrap,body.app-wide .sitefoot{max-width:1600px;padding-left:28px;padding-right:28px}
  .dash-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;align-items:start}
  .dash-cols > div > h2:first-child{margin-top:22px}
  .dash-cols .card{margin-top:22px!important}
}

/* 0.9.26: terugkerende events (reeksen) */
.rk-new{margin-top:16px}
.rk-new summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.rk-new summary::-webkit-details-marker{display:none}
.rk-new[open] summary .btn{display:none}
.rk-form{margin-top:14px}
.rk-form > label,.rk-form .grid4 label,.rk-form .grid2 label{margin-top:12px}
.rk-days{display:flex;flex-wrap:wrap;gap:6px}
.rk-days label{margin:0;cursor:pointer}
.rk-days input{position:absolute;opacity:0;pointer-events:none}
.rk-days span{display:grid;place-items:center;width:46px;height:42px;border:1px solid var(--line);border-radius:12px;font-weight:700;background:var(--panel)}
.rk-days input:checked + span{border-color:var(--amber);background:rgba(255,181,71,.12);color:var(--amber)}
.rk-days input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){.grid4{grid-template-columns:1fr 1fr}}
.seg-mini{display:flex;gap:14px;flex-wrap:wrap;min-height:48px;align-items:center}
.seg-mini label{display:flex;align-items:center;gap:6px;margin:0;font-weight:600;cursor:pointer}
.seg-mini input{width:18px;height:18px;min-height:0;accent-color:var(--amber)}
.rk-form .btn{margin-top:14px}
.rk-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,181,71,.12);color:var(--amber);flex:none}
.rk-ic svg{width:22px;height:22px}
.ok-t{color:var(--ok);font-weight:700}
.ev.rk-ev{grid-template-columns:52px minmax(0,1fr) auto}
@media (max-width:640px){.ev.rk-ev{grid-template-columns:44px minmax(0,1fr)}.ev.rk-ev .ev-acts{grid-column:1 / -1}}
.rk-rec-row{display:flex;flex-wrap:wrap;gap:12px}
.rk-rec-row > div{min-width:160px}
.rk-rec-row select{min-height:48px}
.rk-rec-sum{margin:8px 0 0}
.rk-nth[hidden]{display:none}
.rk-rec-row select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 38px 12px 14px;width:100%;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A9A3D6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:22px}
.rk-rec-row select:focus{border-color:var(--amber);outline:none}
.rk-rec-row select option{background:#1E1A4F;color:#F4F1FF}
.danger-zone details>summary{list-style:none;display:inline-flex;cursor:pointer}
.danger-zone details>summary::-webkit-details-marker{display:none}
.danger-zone details[open]>summary{display:none}
/* Profiel: compacte blokken naast elkaar */
.prof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.pcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.prof-grid .card + .card{margin-top:0}
.prof-grid .card{padding:16px 18px}
.prof-grid .card h2{margin:0 0 4px;font-size:17px}
.prof-grid .form{gap:0}
@media (max-width:860px){.prof-grid{display:flex;flex-direction:column}.pcol{display:contents}}
.prow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.card h2 + .prow,.card h2 + input + .prow{border-top:0;padding-top:4px}
.prow > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.prow strong{font-size:14.5px;color:var(--text)}
.prow .muted.small{overflow-wrap:anywhere}
.prow .check{margin-top:4px;font-size:13.5px}
.prow > .btn,.prow > a,.prow > .lang-sw{flex:none}
details.pfold{display:block}
details.pfold > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer}
details.pfold > summary::-webkit-details-marker{display:none}
details.pfold[open] > summary .btn{opacity:.55}
details.pfold .form{margin-top:10px}
details.pfold > summary > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.prof-grid .card > p.muted,.prof-grid .card > p{font-size:14px}
.prof-grid .card .btn:not(.small){min-height:40px;padding:8px 14px;font-size:15px}
.prof-grid .tf-codes p,.prof-grid .tf-codes li{font-size:14px}

.pcol > .card:last-child{flex:1}
.prof-grid .card > p + .prow,.prof-grid .card > p + details.prow{margin-top:8px}
.prof-grid .form input:not([type=checkbox]){padding-top:10px;padding-bottom:10px;min-height:44px}
.check.is-off{opacity:.55;cursor:not-allowed}
.beta-end{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}

/* 0.9.55: dj-omgeving met dezelfde gloed en diepte als de website (alleen in de standaardweergave) */
html:not([data-theme]) body.app-wide{
  background:
    radial-gradient(900px 420px at 88% -80px, rgba(255,92,138,.2), transparent 60%),
    radial-gradient(760px 400px at 4% -60px, rgba(255,181,71,.15), transparent 60%),
    radial-gradient(900px 520px at 50% calc(100% + 160px), rgba(123,92,255,.12), transparent 70%),
    var(--ink);
  background-repeat:no-repeat;min-height:100vh}
html:not([data-theme]) body.app-wide .card,
html:not([data-theme]) body.app-wide .tile{
  background:linear-gradient(180deg,rgba(39,35,94,.78),rgba(28,25,73,.62));
  box-shadow:0 14px 34px rgba(0,0,0,.22)}
/* Dj-scherm: de lijsten links en rechts als vlak, net als de blokken op de website */
html:not([data-theme]) body.app-wide .col-l,
html:not([data-theme]) body.app-wide .col-r{
  background:linear-gradient(180deg,rgba(28,25,73,.55),rgba(28,25,73,.2));
  border-radius:0 0 16px 16px;padding-left:10px;padding-right:10px;border-bottom:0}
html:not([data-theme]) body.app-wide .tabs-row .tabs,
html:not([data-theme]) body.app-wide .tabs-row{background:rgba(28,25,73,.35);border-radius:14px 14px 0 0}
/* Dj-scherm: bediening boven en schermen onder als band over de hele breedte, zoals de afwisselende blokken op de website */
html:not([data-theme]) body.app-wide #app > section.ctl{
  padding-top:16px;padding-bottom:16px;
  background:rgba(28,25,73,.5);box-shadow:0 0 0 100vmax rgba(28,25,73,.5);clip-path:inset(0 -100vmax)}
html:not([data-theme]) body.app-wide #app > section.ctl-b{margin-top:34px}

/* 0.9.56: meldingen in PLAYTHIS-stijl: kaart met gloed, rond icoon in de kleur van de melding */
.alert{--c:#FFB547;--g:255,181,71;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9l7-4.5z' fill='%23120F33'/%3E%3C/svg%3E");position:relative;min-height:58px;
  padding:16px 18px 16px 58px;border-radius:16px;margin:0 0 18px;border:1px solid var(--line);border-left:1px solid var(--line);
  background:radial-gradient(460px 140px at 0% 50%,rgba(var(--g),.18),transparent 70%),linear-gradient(180deg,rgba(39,35,94,.92),rgba(28,25,73,.85));
  box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);font-weight:600;line-height:1.35;
  animation:ptAlertIn .35s ease-out both}
.alert::before{content:"";position:absolute;left:14px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;background:var(--c) var(--i) center/16px no-repeat;box-shadow:0 0 0 4px rgba(var(--g),.18),0 0 18px rgba(var(--g),.35)}
.alert.ok{--c:#5BE3A8;--g:91,227,168;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23120F33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.alert.err{--c:#FF5C8A;--g:255,92,138;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v5.5' stroke='%23120F33' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12.2' r='1.4' fill='%23120F33'/%3E%3C/svg%3E")}
.alert.info{--c:#FFB547;--g:255,181,71;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4' r='1.4' fill='%23120F33'/%3E%3Cpath d='M8 7.2v5.3' stroke='%23120F33' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
@keyframes ptAlertIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.alert.verify,.alert.beta-end{display:flex}
@media (prefers-reduced-motion:reduce){.alert{animation:none}}
html[data-theme="light"] .alert{background:radial-gradient(460px 140px at 0% 50%,rgba(var(--g),.16),transparent 70%),var(--panel);box-shadow:0 6px 18px rgba(18,15,51,.08)}
html[data-theme="dark"] .alert{background:var(--panel);box-shadow:none}

/* Inloggen, registreren, wachtwoord en 2FA in PLAYTHIS-stijl: gloed achter de pagina, formulier als kaart */
body:has(.auth){background:
  radial-gradient(900px 460px at 85% -80px, rgba(255,92,138,.2), transparent 60%),
  radial-gradient(760px 420px at 5% -60px, rgba(255,181,71,.15), transparent 60%),
  radial-gradient(700px 500px at 50% 110%, rgba(110,80,220,.18), transparent 70%),
  var(--ink);background-attachment:fixed}
.auth{position:relative;max-width:480px;margin:28px auto 40px;padding:30px 30px 24px;border-radius:24px;border:1px solid rgba(255,181,71,.22);
  background:radial-gradient(80% 60% at 100% 0%,rgba(255,92,138,.14),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(255,181,71,.08),transparent 60%),linear-gradient(180deg,rgba(39,35,94,.92),rgba(28,25,73,.86));
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.auth::before{content:"";display:block;width:44px;height:44px;margin:0 0 14px;border-radius:14px;
  background:url(/assets/mark.svg) center/26px no-repeat,linear-gradient(135deg,rgba(255,181,71,.22),rgba(255,92,138,.18));box-shadow:inset 0 0 0 1px rgba(255,181,71,.35)}
.auth h1{margin-top:0}
.auth .form input:not([type=checkbox]):not([type=radio]){background:rgba(18,15,51,.7)}
@media (max-width:520px){.auth{margin:14px auto 28px;padding:22px 18px 18px;border-radius:20px}}
html:has(.auth){background:var(--ink)}
body:has(.auth){min-height:100vh}