* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #020817;
    color: #f5f5f5;
}
a { color: #ffd700; text-decoration: none; }
.page { max-width: 1180px; margin: 0 auto; padding: 20px; }
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 215, 0, .35);
}
.brand { font-weight: 800; font-size: 22px; color: #fff; }
nav { display: flex; gap: 12px; flex-wrap: wrap; }
nav a { color: #fff; opacity: .9; }
.hero { padding: 26px 0 10px; }
.hero h1 { margin-bottom: 8px; }
.date { color: #ffd700; font-weight: bold; }
.card {
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255, 215, 0, .35);
    border-radius: 14px;
    padding: 20px;
    margin: 18px 0;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.live-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.live-left, .dash-user, .slot-person {
    display: flex;
    align-items: center;
    gap: 12px;
}
.live-card.dj-is-live { border-color: rgba(255, 215, 0, .75); }
.label { color: #aaa; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #d81b60;
    color: #fff;
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: bold;
    box-shadow: 0 0 0 rgba(216, 27, 96, .65);
}
.jukebox-badge {
    background: #334155;
    box-shadow: none;
}
.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #fff;
    display: inline-block;
}
.pulse-live { animation: livePulse 1.45s infinite; }
.pulse-live .live-dot { animation: dotPulse 1.45s infinite; }
@keyframes livePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 27, 96, .75); }
    70% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(216, 27, 96, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 27, 96, 0); }
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
.warning { color: #ffd700; }
.hint, .muted { color: #aaa; margin-top: 0; font-size: 14px; }
.ok-text { color: #22c55e; }
.bad-text { color: #ef4444; }
.msg {
    padding: 12px;
    border-radius: 10px;
    margin: 12px 0;
}
.msg.ok { background: rgba(16, 185, 129, .16); border: 1px solid rgba(16, 185, 129, .5); }
.msg.error { background: rgba(239, 68, 68, .16); border: 1px solid rgba(239, 68, 68, .5); }
.form { display: grid; gap: 12px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: grid; gap: 6px; font-weight: bold; }
input, textarea, select {
    width: 100%;
    padding: 11px;
    border: 1px solid #333;
    background: #0f172a;
    color: #fff;
    border-radius: 9px;
}
input:disabled { opacity: .45; cursor: not-allowed; }
.checkline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.checkline input { width: auto; }
.button {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    background: #ffd700;
    color: #111;
    font-weight: 800;
    padding: 11px 18px;
    cursor: pointer;
}
.button.secondary { background: #1f2937; color: #fff; }
.button.danger { background: #b91c1c; color: #fff; }
.button.green { background: #16a34a; color: #fff; }
.button.blue { background: #2563eb; color: #fff; }
.button.small { padding: 7px 12px; font-size: 13px; }
.toolbar, .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 700;
    background: #1f2937;
    color: #e5e7eb;
}
.status-ok { background: rgba(22, 163, 74, .2); color: #bbf7d0; border: 1px solid rgba(22, 163, 74, .45); }
.status-bad { background: rgba(185, 28, 28, .22); color: #fecaca; border: 1px solid rgba(185, 28, 28, .5); }
.status-muted { background: rgba(51, 65, 85, .65); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, .25); }
.schedule { display: grid; }
.row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 12px 0;
}
.row.now { color: #fff; }
.row.now span { font-weight: bold; color: #ffd700; }
.row em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background:#d81b60;
    padding: 4px 9px;
    border-radius:999px;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}
.row em.jukebox-mini { background: #334155; }
.avatar {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid #ffd700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
}
.live-avatar { width: 78px; height: 78px; border-radius: 14px; }
.dash-avatar { width: 58px; height: 58px; border-radius: 12px; }
.tiny-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    border-width: 1px;
}
.tiny-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.requests, .table { display: grid; gap: 10px; }
.request, .table-row {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px;
}
.table-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.request-block {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 14px;
}
.request-block-title {
    color: #ffd700;
    font-weight: 900;
    margin-bottom: 10px;
}
.inline-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.request-bars { display: grid; gap: 12px; }
.request-bar {
    display: grid;
    gap: 8px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 13px;
}
.request-mainline, .request-altline {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: center;
}
.request-number, .request-altline span {
    color: #ffd700;
    font-weight: 900;
}
.request-altline strong { color: #ddd; }
.request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #bbb;
    font-size: 14px;
}
.team-hero {
    text-align: center;
    padding: 28px 0 12px;
}
.team-hero h1 { font-size: 34px; margin-bottom: 8px; }
.team-hero span { color: #ffd700; }
.team-section h2 {
    text-align: center;
    color: #fff;
    margin: 32px 0 18px;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.team-card {
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255, 215, 0, .35);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}
.team-avatar {
    width: 150px;
    height: 150px;
    max-width: 100%;
    object-fit: cover;
    border: 2px solid #ffd700;
    border-radius: 10px;
    background: #111827;
}
.team-card h3 {
    color: #ffd700;
    margin-bottom: 6px;
}
.admin-user-list { display: grid; gap: 12px; }
.admin-user-row {
    display: grid;
    grid-template-columns: 64px 1.3fr .55fr .8fr .8fr .7fr 1.1fr .6fr .9fr auto;
    gap: 10px;
    align-items: end;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 12px;
}
.delete-inline { margin: -4px 0 8px 58px; }
small { color: #bbb; }
hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 20px 0; }

@media (max-width: 900px) {
    .admin-user-row { grid-template-columns: 1fr; }
    .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .top, .live-card, .table-row { flex-direction: column; align-items: flex-start; }
    .grid2, .inline-inputs { grid-template-columns: 1fr; }
    .row { grid-template-columns: 1fr; }
    .request-mainline, .request-altline { grid-template-columns: 1fr; }
}


/* v0.3 live verzoekserver */
.request-live-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.request-separator { color: #64748b; margin: 0 8px; }
.request-bar.is-playing {
    border-color: rgba(34,197,94,.75);
    box-shadow: 0 0 0 1px rgba(34,197,94,.25);
}
.rq-pop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}
.rq-pop.show { display: flex; }
.pop-card {
    width: min(560px, 100%);
    position: relative;
}
.closeX {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.pop-who {
    font-weight: 800;
    margin: 8px 0;
    color: #ffd700;
}
.pop-text {
    white-space: pre-wrap;
    color: #cbd5e1;
    line-height: 1.55;
}
.pop-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}
.photo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 14px;
}
.dz {
    border: 2px dashed rgba(255,215,0,.45);
    border-radius: 14px;
    padding: 26px;
    text-align: center;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    font-weight: 800;
}
.dz.drag {
    background: rgba(255,215,0,.11);
    border-color: #ffd700;
}
.playing-request-box {
    border-color: rgba(34,197,94,.55);
}
.playing-request-head {
    color: #22c55e;
    font-weight: 900;
    margin-bottom: 6px;
}


/* v0.3.2 verbeterde DJ-knoppen */
.dj-console {
    border-color: rgba(255, 215, 0, .5);
}
.dj-console-head {
    margin-bottom: 16px;
}
.dj-control-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.control-group {
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    padding: 14px;
}
.control-title {
    color: #ffd700;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: .02em;
}
.control-group .toolbar {
    margin-bottom: 8px;
}
.control-group form {
    margin: 0;
}
.empty {
    color: #a8b3c7;
    font-weight: 700;
}
@media (max-width: 980px) {
    .dj-control-grid {
        grid-template-columns: 1fr;
    }
}


/* v0.3.4 - gewone formulierknoppen voor verzoekacties */
.inline-form {
    margin: 0;
    display: inline-flex;
}


/* v0.3.5 - handmatig live zichtbaar in programma */
.manual-live-row {
    border: 1px solid rgba(216, 27, 96, .35);
    border-radius: 12px;
    padding-left: 10px;
    padding-right: 10px;
    background: rgba(216, 27, 96, .08);
}


/* v0.3.6 - timer voor Nu op verzoek */
.playing-request-timer {
    color: #22c55e;
    font-weight: 900;
    margin-top: 8px;
}
button[data-playing-id]:disabled {
    opacity: .9;
    cursor: default;
}


/* v0.3.8 - DJ afmelden */
.absence-list {
    display: grid;
    gap: 10px;
}
.absence-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 12px;
}
.absence-row.is-absent {
    border-color: rgba(239, 68, 68, .55);
    background: rgba(127, 29, 29, .18);
}
.absence-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.absence-form input {
    min-width: 220px;
}
@media (max-width: 760px) {
    .absence-row {
        grid-template-columns: 1fr;
    }
    .absence-form {
        flex-direction: column;
        align-items: stretch;
    }
    .absence-form input {
        min-width: 0;
    }
}


/* v0.3.10 - eerste login wachtwoord wijzigen */
.card.narrow h1 {
    margin-top: 0;
}


/* v0.3.11 - DJ foto's vergroten */
.dj-avatar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    text-decoration: none;
    border-radius: inherit;
}
.dj-avatar-link img {
    transition: transform .15s ease, box-shadow .15s ease;
}
.dj-avatar-link:hover img {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, .35);
}
.avatar-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .86);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.avatar-modal-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(92vw, 720px);
    max-height: 86vh;
    border-radius: 18px;
    border: 4px solid rgba(255, 255, 255, .85);
    background: #000;
    box-shadow: 0 20px 70px rgba(0,0,0,.65);
    overflow: hidden;
}
.avatar-modal-photo {
    max-width: min(92vw, 720px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    background: #000;
    display: block;
}
.avatar-modal-visual.has-frame {
    width: min(86vw, 720px);
    height: min(86vw, 720px);
    max-height: 86vh;
}
.avatar-modal-visual.has-frame .avatar-modal-photo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
.avatar-modal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    z-index: 2;
}
.avatar-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.avatar-close:hover {
    background: #b91c1c;
}


/* v0.3.12 - eigen DJ icoontje/smiley */
.dj-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    margin-right: 4px;
    font-size: 1.05em;
    line-height: 1;
}
.admin-dj-icon {
    margin-left: 4px;
}
.icon-form {
    display: inline-flex;
    align-items: end;
    gap: 8px;
    margin: 0;
}
.icon-label {
    font-size: 13px;
    color: #cbd5e1;
}
.icon-label input {
    width: 82px;
    padding: 7px 9px;
    text-align: center;
}


/* v0.3.13 - echte keuzelijst voor DJ icoontjes */
.icon-select {
    min-width: 130px;
    padding: 7px 9px;
}
.icon-form .icon-select {
    width: 130px;
}


/* v0.3.15 - IP blokkeren */
.button.danger.small {
    white-space: nowrap;
}
.request-meta span {
    word-break: break-word;
}


/* v0.3.16 - admin bulk verwijderen verzoekjes */
.bulk-toolbar {
    margin-bottom: 14px;
}
.request-select {
    display: inline-flex;
    width: auto;
    min-width: 24px;
    align-items: center;
}
.request-select input {
    width: auto;
}
.request-admin-row {
    grid-template-columns: auto 1fr auto;
}


/* v0.3.17 - slim schema */
.tiny-icon {
    font-size: 16px;
}


/* v0.3.18 - ingeplande DJ is pas live na Ga live */
.row.now .slot-person {
    font-weight: 800;
}


/* v0.3.19 - duidelijk jukeboxblok op homepage */
.jukebox-is-live .label {
    color: #cbd5e1;
}
.jukebox-note {
    margin: 6px 0 0;
    color: #cbd5e1;
    font-weight: 700;
}
.jukebox-is-live .avatar-placeholder {
    font-size: 44px;
}


/* v0.3.21 - automatisch programma-blok */
.schedule-source-note {
    margin-top: -6px;
    margin-bottom: 14px;
    color: #94a3b8;
    font-size: 14px;
}


/* v0.3.22 - weekprogramma vult lege tijden met jukebox */
.jukebox-row {
    opacity: .92;
}
.jukebox-row .slot-person {
    color: #cbd5e1;
}
.jukebox-row.now {
    opacity: 1;
}


/* v0.3.23 - verzoekformulier alleen bij live DJ */
.jukebox-request-box {
    background: rgba(15, 23, 42, .65);
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 14px;
    padding: 16px;
}
.jukebox-request-box h3 {
    margin-top: 0;
    color: #ffd700;
}


/* v0.3.24 - rustige Nonstop Jukebox weergave */
.jukebox-row .tiny-icon {
    opacity: .95;
}


/* v0.3.25 - live waarschuwing en automatische timeout */
.live-keepalive-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.35;
}


/* v0.3.26 - zichtbare live waarschuwing */
.live-visible-warning {
    border-color: rgba(239, 68, 68, .65);
    background: rgba(127, 29, 29, .28);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.live-visible-warning strong {
    color: #fecaca;
}
.live-visible-warning span {
    color: #fff;
}


/* v0.3.27 - eigen verzoekbox per DJ */
.request-live-list + .empty {
    margin-top: 10px;
}


/* v0.3.28 - Nonstop Jukebox foto */
.admin-jukebox-preview {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid #ffd700;
    display: block;
    margin: 6px 0 8px;
    background: #000;
}
.jukebox-is-live .live-avatar {
    object-fit: cover;
}


/* v0.3.29 - Nonstop foto apart blok in admin */
.nonstop-photo-admin {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.admin-jukebox-preview-large,
.admin-jukebox-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    border: 2px solid #ffd700;
    background: #050816;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}


/* v0.3.30 - mooie dropzone voor Nonstop foto */
.nonstop-drop-form {
    min-width: min(100%, 420px);
}
.photo-dropzone {
    border: 2px dashed rgba(255, 215, 0, .55);
    background: rgba(15, 23, 42, .72);
    border-radius: 18px;
    padding: 22px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.photo-dropzone:hover,
.photo-dropzone:focus,
.photo-dropzone.drag {
    transform: translateY(-1px);
    border-color: #ffd700;
    background: rgba(30, 41, 59, .88);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, .12);
    outline: none;
}
.photo-dropzone-icon {
    font-size: 34px;
    line-height: 1;
}
.photo-dropzone strong {
    color: #ffd700;
    font-size: 17px;
}
.photo-dropzone span,
.photo-dropzone small {
    color: #cbd5e1;
}
.photo-drop-status {
    margin-top: 8px;
    min-height: 20px;
}


/* v0.3.31 - shiny live/nonstop badge in header */
.top {
    align-items: stretch;
}
.top-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-width: 0;
}
.header-live-badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 250px;
    max-width: 360px;
    padding: 10px 14px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    background: rgba(8, 19, 33, .72);
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}
.header-live-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -160%;
    width: 150%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,.07) 28%,
        rgba(255,255,255,.38) 42%,
        rgba(255,255,255,.07) 58%,
        transparent 72%);
    transform: skewX(-20deg);
    mix-blend-mode: screen;
    animation: pkHeaderSweep 5.5s ease-in-out infinite;
}
.header-live-badge:hover::after {
    animation-duration: 3.2s;
}
@keyframes pkHeaderSweep {
    0% { left: -160%; opacity: 0; }
    8% { opacity: .95; }
    42% { left: 110%; opacity: .55; }
    46% { opacity: 0; }
    100% { left: 110%; opacity: 0; }
}
.header-live-badge.is-live {
    border-color: rgba(34, 197, 94, .35);
}
.header-live-badge.is-jukebox {
    border-color: rgba(255, 215, 0, .25);
}
.header-live-img {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(255, 215, 0, .8);
    background: #020817;
    flex: 0 0 auto;
}
.avatar-frame-wrap.header-live-img {
    display: inline-flex;
    overflow: hidden;
    line-height: 0;
}
.avatar-frame-wrap.header-live-img .avatar-frame-photo {
    border-radius: inherit;
}
.header-live-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.header-live-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.header-live-status {
    color: #22c55e;
    font-weight: 900;
    font-size: 13px;
}
.header-live-badge.is-jukebox .header-live-status {
    color: #ffd700;
}
.header-live-name {
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.admin-check {
    align-self: end;
    min-height: 44px;
}
@media (max-width: 760px) {
    .top {
        flex-direction: column;
    }
    .header-live-badge {
        width: 100%;
        max-width: none;
    }
    .header-live-img {
        width: 72px;
        height: 72px;
    }
}


/* v0.3.33 - thema/kleuren via Admin */
body {
    background-color: var(--pk-bg);
    color: var(--pk-text);
}
a,
.date,
.warning,
.header-live-badge.is-jukebox .header-live-status,
.photo-dropzone strong {
    color: var(--pk-primary);
}
.hint,
.muted,
.photo-dropzone span,
.photo-dropzone small {
    color: var(--pk-muted);
}
.top {
    border-bottom-color: color-mix(in srgb, var(--pk-primary) 35%, transparent);
}
.card {
    background: rgba(var(--pk-card-rgb), .72);
    border-color: color-mix(in srgb, var(--pk-primary) 35%, transparent);
    border-radius: var(--pk-radius);
}
input,
textarea,
select {
    color: var(--pk-text);
    border-radius: calc(var(--pk-radius) * .65);
}
.button {
    background: var(--pk-primary);
}
.button.danger,
.live-badge,
.row em {
    background: var(--pk-accent);
}
.avatar,
.header-live-img,
.admin-jukebox-preview,
.admin-jukebox-preview-large,
.admin-jukebox-placeholder {
    border-color: var(--pk-primary);
    border-radius: var(--pk-radius);
}
.photo-dropzone {
    border-color: color-mix(in srgb, var(--pk-primary) 55%, transparent);
    border-radius: calc(var(--pk-radius) + 4px);
}
.photo-dropzone:hover,
.photo-dropzone:focus,
.photo-dropzone.drag {
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-primary) 12%, transparent);
}
.live-card.dj-is-live,
.header-live-badge.is-live {
    border-color: color-mix(in srgb, var(--pk-primary) 75%, transparent);
}
.admin-theme-title {
    grid-column: 1 / -1;
    color: var(--pk-primary);
    font-weight: 900;
    border-top: 1px solid color-mix(in srgb, var(--pk-primary) 25%, transparent);
    padding-top: 12px;
    margin-top: 6px;
}
.admin-theme-bg-preview {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--pk-radius);
    border: 2px solid var(--pk-primary);
    display: block;
    margin: 6px 0 8px;
}


/* v0.3.34 - thema dropzone + proefvenster */
.theme-bg-label {
    grid-column: span 1;
}
.theme-bg-dropzone {
    border: 2px dashed color-mix(in srgb, var(--pk-primary) 55%, transparent);
    background: rgba(15, 23, 42, .72);
    border-radius: calc(var(--pk-radius) + 4px);
    padding: 18px;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.theme-bg-dropzone:hover,
.theme-bg-dropzone:focus,
.theme-bg-dropzone.drag {
    transform: translateY(-1px);
    border-color: var(--pk-primary);
    background: rgba(30, 41, 59, .88);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-primary) 12%, transparent);
    outline: none;
}
.theme-bg-dropzone strong {
    color: var(--pk-primary);
}
.theme-bg-dropzone span,
.theme-bg-dropzone small {
    color: var(--pk-muted);
}
.theme-preview-wrap {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
}
.theme-preview-head h3 {
    margin: 0 0 3px;
    color: var(--pk-primary);
}
.theme-preview {
    --tp-primary: #ffd700;
    --tp-accent: #d81b60;
    --tp-bg: #020817;
    --tp-card: #000000;
    --tp-text: #f5f5f5;
    --tp-muted: #aaaaaa;
    --tp-radius: 14px;

    border-radius: var(--tp-radius);
    border: 1px solid color-mix(in srgb, var(--tp-primary) 40%, transparent);
    background-color: var(--tp-bg);
    background-size: cover;
    background-position: center;
    color: var(--tp-text);
    padding: 16px;
    overflow: hidden;
    min-height: 270px;
}
.theme-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--tp-primary) 35%, transparent);
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.theme-preview-brand {
    font-weight: 900;
    font-size: 20px;
}
.theme-preview-badge {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tp-accent);
    color: #fff;
    padding: 8px 14px;
    font-weight: 900;
}
.theme-preview-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -140%;
    width: 130%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    animation: pkHeaderSweep 4.5s ease-in-out infinite;
}
.theme-preview-card {
    background: color-mix(in srgb, var(--tp-card) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--tp-primary) 35%, transparent);
    border-radius: var(--tp-radius);
    padding: 16px;
}
.theme-preview-title {
    color: var(--tp-primary);
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 8px;
}
.theme-preview-card p {
    color: var(--tp-muted);
    margin: 0 0 12px;
}
.theme-preview-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 14px;
}
.theme-preview-row strong {
    color: var(--tp-primary);
}
.theme-preview-row em {
    border-radius: 999px;
    background: var(--tp-accent);
    color: #fff;
    font-style: normal;
    padding: 5px 10px;
    font-weight: 900;
}
.admin-theme-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
@media (max-width: 760px) {
    .theme-preview-row {
        grid-template-columns: 1fr;
    }
}


/* v0.3.35 - admin inklapbare vensters + betere thema-layout */
.admin-collapsible {
    overflow: hidden;
    padding: 0;
}
.admin-collapsible > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    font-size: 28px;
    font-weight: 900;
    color: var(--pk-primary);
    border-bottom: 1px solid rgba(255, 215, 0, .18);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.admin-collapsible > summary::-webkit-details-marker {
    display: none;
}
.admin-collapsible > summary::before {
    content: "▸";
    color: var(--pk-accent);
    font-size: 20px;
    transition: transform .18s ease;
}
.admin-collapsible[open] > summary::before {
    transform: rotate(90deg);
}
.admin-collapsible > summary:hover {
    background: rgba(255, 215, 0, .04);
}
.admin-collapsible > .details-body {
    padding: 18px 20px 20px;
}
.theme-radius-label {
    align-self: start;
}
.theme-radius-label input[type="number"] {
    max-width: 210px;
    min-height: 46px;
}
.theme-bg-label {
    grid-column: span 2;
}
.theme-bg-dropzone {
    min-height: 148px;
}
.theme-preview-wrap {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.admin-theme-actions {
    margin-top: 8px;
}
@media (max-width: 980px) {
    .theme-bg-label {
        grid-column: span 1;
    }
}


/* v0.3.36 - teampagina netter uitgelijnd */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 210px));
    justify-content: center;
    gap: 18px;
}
.team-card {
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255, 215, 0, .35);
    border-radius: 14px;
    padding: 18px 16px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
}
.team-card .dj-avatar-link {
    display: inline-flex;
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.team-avatar,
.team-card .avatar-placeholder {
    width: 150px;
    height: 150px;
    max-width: 100%;
    object-fit: cover;
    border: 2px solid #ffd700;
    border-radius: 10px;
    background: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    line-height: 1;
}
.team-card h3 {
    color: #ffd700;
    margin: 14px 0 6px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.team-card p {
    margin-top: 8px;
    color: #fff;
}
@media (max-width: 540px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-card {
        min-height: auto;
    }
}


/* v0.3.37 - team icoon boven naam + nette standaard tegel */
.team-card h3 {
    color: #ffd700;
    margin: 14px 0 6px;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
}
.team-card h3 .dj-icon {
    display: block;
    font-size: 28px;
    line-height: 1;
}
.team-card h3 .dj-name {
    display: block;
    line-height: 1.15;
}
.team-card p {
    margin-top: 8px;
    color: #fff;
}
.team-card .avatar-placeholder-card {
    background:
        radial-gradient(circle at top, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(180deg, rgba(17,24,39,.95), rgba(15,23,42,.95));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
.team-card .avatar-placeholder-icon {
    font-size: 44px;
    line-height: 1;
}
.team-card .avatar-placeholder-text {
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: .2px;
    text-align: center;
}


/* v0.3.38 - programma: nog-geen-foto placeholder klikbaar */
.no-photo-avatar {
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
.no-photo-avatar:hover,
.no-photo-avatar:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, .15);
    outline: none;
}
.tiny-avatar.no-photo-avatar {
    border-radius: 999px;
    padding: 0;
    font-size: 15px;
}
.avatar-modal-empty {
    min-width: 260px;
    min-height: 260px;
    border: 2px solid #ffd700;
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(180deg, rgba(17,24,39,.98), rgba(0,0,0,.98));
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    text-align: center;
}
.avatar-modal-empty-icon {
    font-size: 64px;
    line-height: 1;
}
.avatar-modal-empty strong {
    color: #ffd700;
    font-size: 24px;
}
.avatar-modal-empty span {
    color: #cbd5e1;
    font-size: 16px;
}


/* v0.3.39 - plus/zoom-indicatie op alle avatar-tegels */
.avatar-zoom-link,
.no-photo-avatar {
    position: relative;
    cursor: zoom-in;
}
.avatar-zoom-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.avatar-zoom-link::after,
.no-photo-avatar::after {
    content: "+";
    position: absolute;
    right: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffd700;
    color: #111;
    border: 2px solid #020817;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
    z-index: 3;
}
.avatar-zoom-link:hover::after,
.avatar-zoom-link:focus::after,
.no-photo-avatar:hover::after,
.no-photo-avatar:focus::after {
    opacity: 1;
    transform: scale(1);
}
.tiny-avatar.no-photo-avatar::after,
.slot-person .avatar-zoom-link::after {
    right: -4px;
    top: -4px;
    width: 16px;
    height: 16px;
    font-size: 12px;
    border-width: 1px;
}
.team-card .avatar-zoom-link::after,
.team-card .no-photo-avatar::after {
    right: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    font-size: 17px;
}


/* v0.4.00 - extra robuust klikken op nog-geen-foto in programma */
.slot-person .no-photo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.slot-person button.no-photo-avatar {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #ffd700;
    background: #111827;
}


/* v0.4.01 - titelveld uitzetten wanneer DJ gekozen is */
#scheduleTitleInput:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: rgba(15, 23, 42, .55);
}
#scheduleTitleHint {
    display: block;
    margin-top: 5px;
    color: var(--pk-muted);
    line-height: 1.3;
}


/* v0.4.02 - Eigenaar als apart teamtype bovenaan */
.team-section:first-of-type .team-card {
    border-color: rgba(255, 215, 0, .55);
}


/* v0.4.03 - jukebox host/poort instellingen */
.form small {
    display: block;
    color: var(--pk-muted);
    margin-top: 5px;
    line-height: 1.25;
}
#btnJukeboxStart:disabled,
#btnJukeboxStop:disabled {
    opacity: .65;
    cursor: wait;
}


/* v0.4.07 - PAL downloadblok in admin */
.admin-pal-download {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--pk-primary) 30%, transparent);
    border-radius: var(--pk-radius);
    background: rgba(15, 23, 42, .45);
}
.admin-pal-download h3 {
    margin-top: 0;
    color: var(--pk-primary);
}
.admin-pal-download .button {
    display: inline-flex;
    margin: 6px 8px 0 0;
}


/* v0.4.08 - bereikbaar/niet bereikbaar icoon echt mee laten wisselen */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.reach-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 10px currentColor;
}
.reach-dot.is-ok {
    background: #22c55e;
    color: #22c55e;
}
.reach-dot.is-bad {
    background: #ef4444;
    color: #ef4444;
    animation: pkReachWarningPulse 1.3s ease-in-out infinite;
}
@keyframes pkReachWarningPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: .65;
    }
}


/* v0.4.09 - SAM/PAL bevestigde jukeboxstatus */
#jbMsg.status-bad,
#adminJbMsg.status-bad {
    background: rgba(127, 29, 29, .85);
    color: #fecaca;
    border-color: rgba(248, 113, 113, .55);
}


/* v0.4.10 - PAL callback basis-URL veld */


/* v0.4.12 - admin formulier netter en rustiger */
.admin-collapsible > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.admin-collapsible > summary::-webkit-details-marker {
    display: none;
}

.admin-collapsible > summary::before {
    content: "▸";
    color: var(--pk-accent);
    font-size: 15px;
    transform: translateY(1px);
    transition: transform .16s ease;
}

.admin-collapsible[open] > summary::before {
    transform: rotate(90deg) translateX(1px);
}

.admin-collapsible .details-body {
    padding: 0 24px 24px;
}

.admin-collapsible .form.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 18px 22px;
    align-items: start;
}

.admin-collapsible .form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 800;
    color: var(--pk-text);
}

.admin-collapsible .form label input,
.admin-collapsible .form label select,
.admin-collapsible .form label textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

.admin-collapsible .form small {
    display: block;
    min-height: 34px;
    margin-top: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--pk-muted);
    font-weight: 600;
}

.admin-collapsible input[type="color"] {
    padding: 4px;
    height: 44px;
}

.admin-collapsible .admin-theme-title {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 215, 0, .22);
    font-size: 20px;
    font-weight: 900;
    color: var(--pk-primary);
}

.admin-collapsible .theme-bg-label,
.admin-collapsible .theme-preview-wrap,
.admin-collapsible .admin-theme-actions {
    grid-column: 1 / -1;
}

.admin-collapsible .theme-bg-dropzone {
    max-width: 640px;
}

.admin-collapsible .theme-preview-wrap {
    margin-top: 4px;
}

.admin-collapsible .admin-theme-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* Jukebox/PAL instellingen optisch groeperen */
.admin-collapsible .form.grid3 label:has(input[name="jukebox_status_url"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_host"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_port"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_start_path"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_stop_path"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_confirm_timeout_seconds"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_base_url"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_token"]),
.admin-collapsible .form.grid3 label:has(input[name="jukebox_request_url"]) {
    padding: 14px;
    border: 1px solid rgba(255, 215, 0, .14);
    border-radius: calc(var(--pk-radius) - 2px);
    background: rgba(15, 23, 42, .32);
}

.admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_base_url"]) {
    grid-column: span 2;
}

.admin-collapsible .form.grid3 label:has(input[name="jukebox_request_url"]) {
    grid-column: span 2;
}

.admin-collapsible .checkline.admin-check {
    justify-content: center;
    min-height: 44px;
    padding: 14px;
    border: 1px solid rgba(255, 215, 0, .14);
    border-radius: calc(var(--pk-radius) - 2px);
    background: rgba(15, 23, 42, .32);
}

/* Fallback voor browsers zonder :has(): blijft gewoon netjes bruikbaar */
@supports not selector(:has(*)) {
    .admin-collapsible .form.grid3 label {
        padding: 0;
        border: 0;
        background: transparent;
    }
}

@media (max-width: 1050px) {
    .admin-collapsible .form.grid3 {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_base_url"]),
    .admin-collapsible .form.grid3 label:has(input[name="jukebox_request_url"]) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .admin-collapsible > summary {
        padding: 16px 18px;
        font-size: 23px;
    }

    .admin-collapsible .details-body {
        padding: 0 16px 18px;
    }

    .admin-collapsible .form.grid3 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_base_url"]),
    .admin-collapsible .form.grid3 label:has(input[name="jukebox_request_url"]) {
        grid-column: auto;
    }
}


/* v0.4.13 - SAM encoder nummer veld */
.admin-collapsible .form.grid3 label:has(input[name="jukebox_encoder_index"]) {
    padding: 14px;
    border: 1px solid rgba(255, 215, 0, .14);
    border-radius: calc(var(--pk-radius) - 2px);
    background: rgba(15, 23, 42, .32);
}


/* v0.4.14 - PAL callback diagnose */
.pal-diagnose {
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed rgba(255, 215, 0, .35);
    border-radius: var(--pk-radius);
    background: rgba(0, 0, 0, .2);
}
.pal-diagnose h4 {
    margin: 0 0 8px;
    color: var(--pk-primary);
}
.pal-diagnose .button {
    margin: 6px 8px 6px 0;
}
.pal-diagnose-url {
    display: block;
    margin-top: 8px;
    padding: 10px;
    max-width: 100%;
    overflow: auto;
    white-space: nowrap;
    background: rgba(15, 23, 42, .8);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: var(--pk-muted);
}


/* v0.4.15 - PAL callback bestandspad */
.admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_file_path"]) {
    padding: 14px;
    border: 1px solid rgba(255, 215, 0, .14);
    border-radius: calc(var(--pk-radius) - 2px);
    background: rgba(15, 23, 42, .32);
    grid-column: span 2;
}
@media (max-width: 720px) {
    .admin-collapsible .form.grid3 label:has(input[name="jukebox_callback_file_path"]) {
        grid-column: auto;
    }
}


/* v0.4.16 - WebToStr response callback PAL */


/* v0.4.19 - SAM draait al status */
#jbMsg.status-ok,
#adminJbMsg.status-ok {
    white-space: nowrap;
}


/* v0.4.20 - losse start/stop PAL downloads */


/* v0.4.21 - admin jukebox logboek */
.activity-log-table .activity-log-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.activity-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .75);
    color: var(--pk-muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .activity-log-table .activity-log-row {
        grid-template-columns: 1fr;
    }
    .activity-action {
        justify-content: flex-start;
        width: fit-content;
    }
}


/* v0.4.22 - DJ verzoekjes bovenaan, afmelden inklapbaar en IP-knop rustiger */
.dj-absence-collapsible {
    padding: 0;
    overflow: hidden;
}
.dj-absence-collapsible > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.dj-absence-collapsible > summary::-webkit-details-marker {
    display: none;
}
.dj-absence-collapsible > summary::before {
    content: "▸";
    color: var(--pk-accent);
    font-size: 15px;
    transform: translateY(1px);
    transition: transform .16s ease;
}
.dj-absence-collapsible[open] > summary::before {
    transform: rotate(90deg) translateX(1px);
}
.dj-absence-collapsible > summary span {
    flex: 1;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 900;
}
.dj-absence-collapsible > summary small {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .75);
    border: 1px solid rgba(255, 215, 0, .18);
    color: var(--pk-muted);
    font-weight: 800;
    white-space: nowrap;
}
.dj-absence-collapsible .details-body {
    padding: 0 24px 24px;
}

/* Extra ruimte tussen verzoekactie-knoppen; Blokkeer IP staat bewust losser */
.request-bar .toolbar {
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}
.request-bar .inline-form {
    display: inline-flex;
}
.request-bar .toolbar .inline-form:last-child {
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px solid rgba(248, 113, 113, .28);
}
.request-bar .button.danger {
    box-shadow: 0 0 0 1px rgba(248, 113, 113, .14);
}

@media (max-width: 720px) {
    .dj-absence-collapsible > summary {
        padding: 18px;
        align-items: flex-start;
    }
    .dj-absence-collapsible > summary span {
        font-size: 22px;
    }
    .dj-absence-collapsible .details-body {
        padding: 0 18px 18px;
    }
    .request-bar .toolbar .inline-form:last-child {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}


/* v0.4.23 - blokkeer IP rechtsboven + extra bevestiging */
.request-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.request-lines {
    min-width: 0;
}

.request-block-ip-form {
    justify-self: end;
    align-self: start;
}

.request-block-ip-btn {
    white-space: nowrap;
}

.request-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

@media (max-width: 720px) {
    .request-head {
        grid-template-columns: 1fr;
    }

    .request-block-ip-form {
        justify-self: start;
        order: 3;
        margin-top: 6px;
    }

    .request-actions {
        gap: 8px;
    }
}


/* v0.4.24 - station branding + muziek delen */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-icon {
    flex: 0 0 auto;
}

.brand-logo {
    max-width: 180px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.05;
    min-width: 0;
}

.brand-name {
    font-weight: 900;
    color: var(--pk-text);
}

.brand-slogan {
    font-size: 11px;
    color: var(--pk-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-station-logo-preview {
    display: block;
    max-width: 260px;
    max-height: 90px;
    width: auto;
    height: auto;
    margin: 6px 0;
    padding: 8px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(255, 215, 0, .22);
}

.station-logo-label {
    grid-column: span 2;
}

.admin-collapsible .form.grid3 label:has(input[name="music_share_url"]),
.admin-collapsible .form.grid3 label:has(input[name="station_home_url"]),
.admin-collapsible .form.grid3 label:has(input[name="station_slogan"]) {
    padding: 14px;
    border: 1px solid rgba(255, 215, 0, .14);
    border-radius: calc(var(--pk-radius) - 2px);
    background: rgba(15, 23, 42, .32);
}

@media (max-width: 720px) {
    .brand-logo {
        max-width: 140px;
        max-height: 42px;
    }

    .brand-slogan {
        display: none;
    }

    .station-logo-label {
        grid-column: auto;
    }
}


/* v0.4.25 - Logboek naam + bewaren */
.activity-log-table {
    margin-top: 12px;
}

.activity-log-table .activity-log-row strong {
    color: var(--pk-text);
}

.activity-log-table .activity-log-row small {
    line-height: 1.35;
}


/* v0.4.26 - muziek delen zichtbaar + admin netter */

/* DJ-scherm: muziek delen duidelijk zichtbaar */
.dj-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.dj-console-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.music-share-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pk-primary) 70%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--pk-primary) 22%, transparent),
            rgba(15, 23, 42, .78) 48%,
            color-mix(in srgb, var(--pk-accent) 18%, transparent)
        );
    color: var(--pk-text);
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.music-share-hero:hover {
    transform: translateY(-1px);
    border-color: var(--pk-primary);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .32);
}

.music-share-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pk-primary) 28%, transparent);
    font-size: 20px;
}

.music-share-hero strong {
    display: block;
    line-height: 1.1;
}

.music-share-hero small {
    display: block;
    color: var(--pk-muted);
    font-size: 12px;
    margin-top: 2px;
}

.music-share-button {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--pk-primary) 80%, #ffffff 6%),
            color-mix(in srgb, var(--pk-accent) 65%, #000000 12%)
        );
    color: #fff !important;
    border-color: color-mix(in srgb, var(--pk-primary) 60%, transparent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

/* Admin: Algemeen / uiterlijk rustiger en compacter */
.admin-collapsible > .details-body {
    padding: 22px 24px 26px;
}

.admin-collapsible .form.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    gap: 18px 22px;
    align-items: start;
}

.admin-collapsible .form.grid3 > label,
.admin-collapsible .form.grid3 > .checkline {
    min-width: 0;
}

.admin-collapsible .form label {
    line-height: 1.25;
}

.admin-collapsible .form label input,
.admin-collapsible .form label select,
.admin-collapsible .form label textarea {
    margin-top: 7px;
}

.admin-collapsible .form small {
    display: block;
    margin-top: 7px;
    color: var(--pk-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.admin-theme-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 18px 0 2px;
    padding: 12px 16px !important;
    border: 1px solid color-mix(in srgb, var(--pk-primary) 28%, transparent) !important;
    border-radius: calc(var(--pk-radius) + 2px);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--pk-primary) 10%, transparent),
            rgba(15, 23, 42, .22)
        );
    font-size: 22px;
    letter-spacing: .01em;
}

.admin-theme-title:first-of-type {
    margin-top: 0;
}

.admin-theme-title::before {
    content: "▸";
    color: var(--pk-accent);
    font-size: 16px;
}

.admin-collapsible input[type="color"] {
    height: 44px;
    padding: 4px;
}

/* Checkbox-kaarten niet meer zo lomp/groot */
.admin-collapsible .checkline.admin-check {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 215, 0, .16);
    border-radius: calc(var(--pk-radius) + 1px);
    background: rgba(15, 23, 42, .32);
}

.admin-collapsible .checkline.admin-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.admin-collapsible .checkline.admin-check span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-collapsible .checkline.admin-check strong {
    color: var(--pk-text);
}

.admin-collapsible .checkline.admin-check small {
    margin: 0;
}

/* Brandingvelden mooi groeperen */
.admin-collapsible .form.grid3 label:has(input[name="station_name"]),
.admin-collapsible .form.grid3 label:has(input[name="station_slogan"]),
.admin-collapsible .form.grid3 label:has(input[name="station_home_url"]),
.admin-collapsible .form.grid3 label:has(input[name="music_share_label"]),
.admin-collapsible .form.grid3 label:has(input[name="music_share_url"]),
.admin-collapsible .form.grid3 .station-logo-label {
    padding: 14px 16px;
    border: 1px solid rgba(255, 215, 0, .14);
    border-radius: calc(var(--pk-radius) + 1px);
    background: rgba(15, 23, 42, .30);
}

.station-logo-label {
    grid-column: span 2;
}

.music-share-check {
    align-self: stretch;
}

.admin-station-logo-preview {
    max-width: 220px;
    max-height: 76px;
}

/* Lange URL's beter passend */
.admin-collapsible input[name="music_share_url"],
.admin-collapsible input[name="station_home_url"],
.admin-collapsible input[name="jukebox_callback_base_url"],
.admin-collapsible input[name="jukebox_request_url"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* Responsive admin */
@media (max-width: 1100px) {
    .admin-collapsible .form.grid3 {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }
}

@media (max-width: 720px) {
    .dj-console-head {
        align-items: flex-start;
    }

    .music-share-hero {
        width: 100%;
        justify-content: center;
        border-radius: calc(var(--pk-radius) + 4px);
    }

    .admin-collapsible > .details-body {
        padding: 16px;
    }

    .admin-collapsible .form.grid3 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .station-logo-label {
        grid-column: auto;
    }

    .admin-theme-title {
        font-size: 19px;
    }
}


/* v0.4.27 - admin subsecties inklapbaar + één Muziek delen knop */
.admin-theme-title.admin-subtoggle {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 52px !important;
}

.admin-theme-title.admin-subtoggle::before {
    content: "▾";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(216, 27, 96, .18);
    color: var(--pk-accent);
    transition: transform .18s ease, background .18s ease;
}

.admin-theme-title.admin-subtoggle.is-collapsed::before {
    content: "▸";
    background: rgba(255, 215, 0, .14);
    color: var(--pk-primary);
}

.admin-theme-title.admin-subtoggle::after {
    content: "Klik om in/uit te klappen";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pk-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    opacity: .85;
}

.admin-theme-title.admin-subtoggle.is-collapsed {
    margin-bottom: 8px;
    border-color: rgba(255, 215, 0, .22) !important;
}

.admin-subsection-item[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .admin-theme-title.admin-subtoggle::after {
        content: "";
        display: none;
    }
}


/* v0.4.28 - DJ icoon badges + los verzoekvenster */

/* Admin DJ lijst: icoontje netjes als badge over de avatar in plaats van los eronder */
.admin-user-avatar {
    position: relative;
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.admin-user-avatar .tiny-avatar,
.admin-user-avatar .tiny-icon,
.admin-user-avatar .avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 999px;
    margin: 0;
}

.admin-user-avatar .admin-dj-icon {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, .75);
    background: rgba(2, 8, 23, .95);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .35);
    font-size: 14px;
    line-height: 1;
    z-index: 2;
}

.admin-user-row {
    align-items: center;
}

/* Los verzoekvenster knop */
.request-window-button {
    white-space: nowrap;
}

/* Los verzoekvenster pagina */
.request-popup-body {
    min-height: 100vh;
    color: var(--pk-text);
    background-color: var(--pk-bg);
}

.request-popup-body.request-popup-themed {
    background:
        radial-gradient(circle at top left, rgba(var(--pk-primary-rgb), .10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(var(--pk-accent-rgb), .08), transparent 30%),
        var(--pk-bg);
}

.request-popup-body.request-popup-plain {
    background: var(--pk-bg);
}

.request-popup-shell {
    width: min(980px, calc(100% - 28px));
    margin: 18px auto;
}

.request-popup-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--pk-primary-rgb), .28);
    border-radius: calc(var(--pk-radius) + 2px);
    background: rgba(var(--pk-card-rgb), .82);
}

.request-popup-top h1 {
    margin: 0 0 6px;
    font-size: clamp(22px, 3vw, 32px);
}

.request-popup-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.request-popup-card {
    margin: 0;
}

.request-popup-card h2 {
    margin-top: 0;
}

.request-popup-request {
    padding: 16px;
}

@media (max-width: 720px) {
    .request-popup-top {
        flex-direction: column;
    }

    .request-popup-tools {
        justify-content: flex-start;
    }
}


/* v0.4.29 - los verzoekvenster achtergrond + admin instelling */
.request-popup-body .card,
.request-popup-body .request-popup-top {
    backdrop-filter: blur(6px);
}

.request-popup-body .request-popup-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .30);
}

.request-popup-body .empty {
    color: color-mix(in srgb, var(--pk-muted) 82%, var(--pk-text));
}

.admin-collapsible .form.grid3 label:has(input[name="request_window_theme_enabled"]) {
    align-self: stretch;
}


/* v0.4.30 - Live blokkeren als jukebox draait */
.button:disabled,
button:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.25);
}

.live-jukebox-warning {
    margin: 12px 0 0;
    border-color: rgba(251, 191, 36, .45);
    background: rgba(251, 191, 36, .10);
    color: #fde68a;
}

.admin-test-mode-check {
    border-color: rgba(251, 191, 36, .38) !important;
    background:
        linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(15, 23, 42, .34)) !important;
}

.admin-test-mode-check strong {
    color: #fde68a !important;
}


/* v0.4.31 - SAM/jukebox overrulet live-weergave */
.live-jukebox-warning {
    line-height: 1.4;
}


/* v0.4.32 - Live-overname verzoek */
.live-takeover-info {
    margin: 12px 0 0;
    border-color: rgba(59, 130, 246, .45);
    background: rgba(59, 130, 246, .12);
    color: #bfdbfe;
    line-height: 1.45;
}

.takeover-card {
    max-width: 520px;
}

.takeover-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}

.takeover-actions .button {
    min-width: 120px;
}


/* v0.4.33 - Live-overname weigerreden */
.takeover-form {
    margin-top: 14px;
}

.takeover-reason-label {
    display: block;
    color: var(--pk-text);
    font-weight: 800;
    margin-top: 12px;
}

.takeover-reason-label textarea {
    width: 100%;
    resize: vertical;
    min-height: 82px;
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: calc(var(--pk-radius) - 4px);
    border: 1px solid rgba(148, 163, 184, .28);
    background: rgba(15, 23, 42, .82);
    color: var(--pk-text);
    font: inherit;
    font-weight: 700;
}

.takeover-reason-label textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--pk-primary) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-primary) 18%, transparent);
}


/* v0.4.36 - Geplande DJ tonen wanneer jukebox draait */
.planned-dj-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 215, 0, .10);
    border: 1px solid rgba(255, 215, 0, .28);
    color: var(--pk-primary);
    font-weight: 900;
}

.planned-dj-note::before {
    content: "📅";
}

.planned-dj-note.is-absent {
    color: var(--pk-muted);
    border-color: rgba(148, 163, 184, .26);
    background: rgba(148, 163, 184, .08);
}

.header-live-planned {
    color: var(--pk-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.slot-planned-note {
    display: block;
    margin-top: 3px;
    color: var(--pk-primary);
    font-weight: 800;
    font-size: 12px;
}


/* v0.4.37 - Jukebox storingsmail */
.mail-alert-check {
    border-color: rgba(239, 68, 68, .38) !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, .12), rgba(15, 23, 42, .34)) !important;
}

.mail-alert-check strong {
    color: #fecaca !important;
}

.mail-alert-status {
    grid-column: span 2;
}

.mail-alert-status code {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .72);
    color: var(--pk-primary);
    white-space: normal;
    word-break: break-all;
}

.mail-test-toolbar {
    margin-top: 12px;
    align-items: center;
}

@media (max-width: 720px) {
    .mail-alert-status {
        grid-column: auto;
    }
}


/* v0.4.38 - Embedcodes / iframes */
.embed-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(var(--pk-primary-rgb), .08), transparent 34%),
        var(--pk-bg);
    color: var(--pk-text);
}

.embed-body.embed-transparent {
    background: transparent !important;
    min-height: 0;
}

.embed-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
}

.embed-shell .card,
.embed-shell .team-section,
.embed-shell .team-hero {
    margin: 0 0 12px;
}

.embed-shell .hero {
    margin: 0 0 12px;
}

.embed-live-card {
    margin: 0 !important;
}

.embed-card h2,
.embed-day-card h2 {
    margin-top: 0;
}

.embed-empty-card {
    padding: 16px 18px;
}

.embed-schedule .row {
    grid-template-columns: 110px 1fr auto;
}

.embed-team-hero {
    padding: 18px 20px;
}

.embed-team-section {
    padding: 10px 0;
}

.embed-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
}

.embed-admin-card {
    padding: 16px;
    border: 1px solid rgba(255, 215, 0, .18);
    border-radius: calc(var(--pk-radius) + 2px);
    background: rgba(15, 23, 42, .34);
}

.embed-admin-card h3 {
    margin: 0 0 6px;
    color: var(--pk-primary);
}

.embed-admin-card label {
    display: block;
    margin-top: 12px;
    color: var(--pk-text);
    font-weight: 900;
}

.embed-admin-card input,
.embed-admin-card textarea {
    width: 100%;
    margin-top: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.embed-admin-card textarea {
    resize: vertical;
}

.embed-transparent-option {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    background: rgba(2, 6, 23, .22);
}

.embed-transparent-option summary {
    cursor: pointer;
    color: var(--pk-muted);
    font-weight: 900;
}

.embed-admin-help {
    margin-top: 16px;
}

@media (max-width: 850px) {
    .embed-admin-grid {
        grid-template-columns: 1fr;
    }

    .embed-schedule .row {
        grid-template-columns: 1fr;
    }
}


/* v0.4.39 - Admin is beheerder, geen DJ */
.admin-user-row.is-admin-user {
    border-color: rgba(59, 130, 246, .30);
    background: rgba(59, 130, 246, .07);
}

.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.role-badge.role-admin {
    color: #bfdbfe;
    border: 1px solid rgba(59, 130, 246, .45);
    background: rgba(59, 130, 246, .16);
}

.role-badge.role-dj {
    color: var(--pk-primary);
    border: 1px solid rgba(255, 215, 0, .36);
    background: rgba(255, 215, 0, .12);
}

.admin-user-row.is-admin-user .admin-dj-icon {
    border-color: rgba(59, 130, 246, .75);
}


/* v0.4.40 - Admin kan optioneel ook DJ-profiel zijn */
.role-badge.role-admin-dj {
    color: #ddd6fe;
    border: 1px solid rgba(168, 85, 247, .48);
    background: rgba(168, 85, 247, .16);
}

.admin-user-row.is-admin-user.has-dj-profile {
    border-color: rgba(168, 85, 247, .34);
    background: rgba(168, 85, 247, .08);
}

.admin-user-row.no-dj-profile {
    opacity: .95;
}


/* v0.4.41 - Verzoek popup widget */
.embed-admin-card-highlight {
    border-color: rgba(105, 229, 255, .34);
    background:
        radial-gradient(circle at top left, rgba(105, 229, 255, .10), transparent 38%),
        rgba(15, 23, 42, .38);
}

.embed-admin-card-highlight h3 {
    color: #69e5ff;
}


/* v0.4.42 - admin gebruikers netter */
.admin-user-add-form {
    gap: 16px;
}
.admin-user-add-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.admin-user-add-options {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: 14px;
    align-items: stretch;
}
.admin-user-add-submit {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}
.checkstack {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 12px 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
}
.checkstack .checkline {
    margin: 0;
}
.checkstack small {
    color: #b8c0cf;
    line-height: 1.4;
}
.admin-user-item {
    display: grid;
    gap: 8px;
}
.admin-user-list {
    display: grid;
    gap: 18px;
}
.admin-user-card {
    display: grid;
    gap: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 16px;
}
.admin-user-card.is-admin-user {
    background: linear-gradient(180deg, rgba(37,99,235,.09), rgba(255,255,255,.03));
    border-color: rgba(59,130,246,.28);
}
.admin-user-card.has-dj-profile {
    box-shadow: inset 0 0 0 1px rgba(255,215,0,.08);
}
.admin-user-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-user-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.admin-user-head-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.admin-user-head-text strong {
    font-size: 18px;
    line-height: 1.1;
}
.admin-user-head-sub {
    color: #aab4c5;
    font-size: 13px;
}
.admin-user-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
.admin-user-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: stretch;
}
.admin-user-save {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}
.delete-inline {
    margin: 0 0 0 16px;
}
.delete-inline .button {
    min-width: 0;
}
.role-badge {
    white-space: nowrap;
}
.admin-user-avatar {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
}
.admin-user-avatar .tiny-avatar,
.admin-user-avatar .tiny-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
}
.admin-dj-icon {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    border: 1px solid rgba(255,215,0,.6);
    font-size: 12px;
}
@media (max-width: 1180px) {
    .admin-user-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .admin-user-options,
    .admin-user-add-options {
        grid-template-columns: 1fr 1fr;
    }
    .admin-user-save,
    .admin-user-add-submit {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
@media (max-width: 900px) {
    .admin-user-add-grid,
    .admin-user-fields,
    .admin-user-options,
    .admin-user-add-options {
        grid-template-columns: 1fr;
    }
    .admin-user-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .delete-inline {
        margin-left: 0;
    }
}


/* v0.4.43 - DJ uitlegpagina */
.dj-help-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dj-help-hero h1 {
    margin: 4px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.dj-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.dj-help-quick h2,
.dj-help-requestbox h2 {
    margin-top: 0;
}

.dj-help-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dj-help-steps div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(var(--pk-primary-rgb), .24);
    border-radius: var(--pk-radius);
    background: rgba(var(--pk-card-rgb), .52);
}

.dj-help-steps strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--pk-primary);
    color: #07111f;
    font-weight: 1000;
}

.dj-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dj-help-card {
    margin: 0;
    overflow: hidden;
}

.dj-help-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dj-help-card-head h2 {
    margin: 0 0 6px;
    color: var(--pk-primary);
}

.dj-help-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 180px;
}

.dj-help-image-link {
    display: block;
    border-radius: calc(var(--pk-radius) + 4px);
    overflow: hidden;
    border: 1px solid rgba(var(--pk-primary-rgb), .26);
    background: rgba(0, 0, 0, .35);
}

.dj-help-image {
    display: block;
    width: 100%;
    height: auto;
}

.dj-help-missing {
    padding: 28px;
    border: 1px dashed rgba(var(--pk-primary-rgb), .42);
    border-radius: calc(var(--pk-radius) + 4px);
    background: rgba(var(--pk-primary-rgb), .06);
}

.dj-help-missing code {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(2, 8, 23, .8);
    color: var(--pk-primary);
    word-break: break-all;
}

.dj-help-button-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dj-help-button-info {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: var(--pk-radius);
    background: rgba(var(--pk-card-rgb), .60);
    border: 1px solid rgba(255,255,255,.10);
}

.dj-help-button-info strong {
    font-size: 18px;
}

.dj-help-button-info.blue { border-color: rgba(59, 130, 246, .45); }
.dj-help-button-info.yellow { border-color: rgba(var(--pk-primary-rgb), .45); }
.dj-help-button-info.pink { border-color: rgba(236, 72, 153, .45); }
.dj-help-button-info.green { border-color: rgba(34, 197, 94, .45); }

@media (max-width: 980px) {
    .dj-help-grid,
    .dj-help-steps,
    .dj-help-button-grid {
        grid-template-columns: 1fr;
    }

    .dj-help-hero,
    .dj-help-card-head {
        flex-direction: column;
    }

    .dj-help-actions,
    .dj-help-card-actions {
        justify-content: flex-start;
        min-width: 0;
    }
}


/* v0.4.44 - Programma 4 weken met tabs */
.program-hero .date strong {
    color: var(--pk-primary);
    font-size: 1.05em;
}

.program-hero .date span {
    color: var(--pk-muted);
}

.program-week-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 12px;
}

.program-week-tab {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, .20);
    background: rgba(15, 23, 42, .54);
    color: var(--pk-text);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.program-week-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 215, 0, .50);
    background: rgba(255, 215, 0, .08);
}

.program-week-tab strong {
    color: var(--pk-primary);
    font-size: 16px;
}

.program-week-tab span {
    color: var(--pk-muted);
    font-size: 13px;
}

.program-week-tab.active {
    border-color: rgba(34, 197, 94, .58);
    background: linear-gradient(135deg, rgba(34, 197, 94, .16), rgba(15, 23, 42, .62));
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .18) inset;
}

.program-week-tab.active strong {
    color: #86efac;
}

.program-week-arrows {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 22px;
}

.program-week-arrows .button {
    min-width: 150px;
    text-align: center;
}

.button.disabled,
.button[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.25);
    pointer-events: none;
}

.day-card.today-card {
    border-color: rgba(34, 197, 94, .42);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .12) inset;
}

.schedule .row.past-slot {
    opacity: .62;
}

.absence-mini {
    background: rgba(239, 68, 68, .16) !important;
    border-color: rgba(239, 68, 68, .42) !important;
    color: #fecaca !important;
}

@media (max-width: 900px) {
    .program-week-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .program-week-nav {
        grid-template-columns: 1fr;
    }

    .program-week-arrows {
        flex-direction: column;
    }

    .program-week-arrows .button {
        width: 100%;
    }
}


/* v0.4.45 - Weeknummer terug bij vandaag/schema */
.today-weekline {
    margin: 6px 0 8px;
    color: var(--pk-primary);
    font-weight: 900;
    font-size: 1.05rem;
}

.today-weekline span {
    color: var(--pk-text);
    opacity: .92;
}

.today-schedule-card .schedule-source-note {
    margin-top: 0;
}

.program-week-tab span {
    line-height: 1.35;
}


/* v0.4.46 - DJ-themaframes / fotoframes */
.avatar-frame-wrap {
    position: relative;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    isolation: isolate;
}

.avatar-frame-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    position: relative;
    z-index: 1;
}

.avatar-frame-overlay {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
}

.avatar-frame-link {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
}

.frame-select {
    min-width: 150px;
}

.icon-form {
    align-items: end;
    gap: 10px;
}

.icon-form .icon-label {
    min-width: 130px;
}

.team-avatar.avatar-frame-wrap {
    margin-inline: auto;
}

.avatar-frame-wrap.dash-avatar,
.avatar-frame-wrap.live-avatar,
.avatar-frame-wrap.tiny-avatar {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .icon-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .icon-form .button {
        width: 100%;
    }
}


/* v0.4.49 - Header live badge fotoframe fix */
.header-live-badge .avatar-frame-wrap.header-live-img,
.header-live-badge .avatar-frame-wrap.avatar-frame-header {
    position: relative;
    width: 86px;
    height: 86px;
    min-width: 86px;
    min-height: 86px;
    display: inline-flex;
    overflow: hidden;
    border: 2px solid var(--pk-primary);
    border-radius: var(--pk-radius);
    background: #020817;
    box-sizing: border-box;
}

.header-live-badge .avatar-frame-wrap.header-live-img .avatar-frame-photo,
.header-live-badge .avatar-frame-wrap.avatar-frame-header .avatar-frame-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.header-live-badge .avatar-frame-wrap.header-live-img .avatar-frame-overlay,
.header-live-badge .avatar-frame-wrap.avatar-frame-header .avatar-frame-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 4;
    pointer-events: none;
}

@media (max-width: 760px) {
    .header-live-badge .avatar-frame-wrap.header-live-img,
    .header-live-badge .avatar-frame-wrap.avatar-frame-header {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
    }
}


/* v0.4.50 - Schema vandaag geplande DJ + automatische blokrefresh */
.slot-planned-note.is-warning {
    color: #fbbf24;
}

.today-schedule-card .row.now .slot-planned-note {
    margin-top: 5px;
}


/* v0.4.51 - Themaframe als portretlijst
   De DJ-foto wordt IN het frame geplaatst. Daardoor werkt het ook als een frame-PNG
   per ongeluk geen transparant midden heeft: de foto ligt boven het midden. */
.avatar-frame-wrap {
    --pk-frame-photo-inset: 11%;
    background: transparent;
}

.avatar-frame-wrap .avatar-frame-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: inherit;
}

.avatar-frame-wrap .avatar-frame-photo {
    position: absolute;
    inset: var(--pk-frame-photo-inset);
    width: calc(100% - (var(--pk-frame-photo-inset) * 2));
    height: calc(100% - (var(--pk-frame-photo-inset) * 2));
    object-fit: cover;
    z-index: 2;
    border-radius: max(8px, calc(var(--pk-frame-photo-inset) * 1.7));
    background: #020817;
}

/* Kleine avatars mogen iets meer foto houden */
.avatar-frame-wrap.tiny-avatar {
    --pk-frame-photo-inset: 9%;
}

/* Grote/team avatars houden meer rand over */
.avatar-frame-wrap.team-avatar,
.avatar-frame-wrap.dash-avatar,
.avatar-frame-wrap.live-avatar,
.avatar-frame-wrap.header-live-img,
.avatar-frame-wrap.avatar-frame-header {
    --pk-frame-photo-inset: 10%;
}

/* Lightbox: foto groot in het frame, frame als rand erachter */
.avatar-modal-visual.has-frame {
    width: min(86vw, 720px);
    height: min(86vw, 720px);
    max-height: 86vh;
    background: transparent;
}

.avatar-modal-visual.has-frame .avatar-modal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.avatar-modal-visual.has-frame .avatar-modal-photo {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    z-index: 2;
    border-radius: 24px;
    background: #020817;
}

/* Zonder frame blijft de oude normale fotoweergave gelden */
.avatar-modal-visual:not(.has-frame) .avatar-modal-photo {
    position: static;
}


/* v0.4.52 - Themaframe strakker alleen rond de foto
   Doel: het frame voelt als lijstje rond de avatar, niet als rand om de hele livekaart.
   Werkt ook op dj.php bij de DJ-profiel/avatar bovenaan. */
.avatar-frame-wrap {
    overflow: hidden;
    box-sizing: border-box;
}

/* Standaard: frame als achtergrond/lijst, foto in het midden erbovenop */
.avatar-frame-wrap .avatar-frame-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

.avatar-frame-wrap .avatar-frame-photo {
    position: absolute;
    inset: 12%;
    width: 76%;
    height: 76%;
    object-fit: cover;
    z-index: 2;
    border-radius: 12px;
    background: #020817;
}

/* Header rechtsboven: alleen het foto-vak krijgt frame, de kaart zelf blijft rustig */
.header-live-badge .avatar-frame-wrap.header-live-img,
.header-live-badge .avatar-frame-wrap.avatar-frame-header {
    width: 86px;
    height: 86px;
    min-width: 86px;
    min-height: 86px;
    border-radius: 14px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.header-live-badge .avatar-frame-wrap.header-live-img .avatar-frame-photo,
.header-live-badge .avatar-frame-wrap.avatar-frame-header .avatar-frame-photo {
    inset: 13%;
    width: 74%;
    height: 74%;
    border-radius: 11px;
}

.header-live-badge .avatar-frame-wrap.header-live-img .avatar-frame-overlay,
.header-live-badge .avatar-frame-wrap.avatar-frame-header .avatar-frame-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DJ-dashboard / dj.php: maak het themaframe net iets groter zodat het zichtbaar blijft */
.dj-console-title .avatar-frame-wrap.dash-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 14px;
    border: 0;
    background: transparent;
}

.dj-console-title .avatar-frame-wrap.dash-avatar .avatar-frame-photo {
    inset: 12%;
    width: 76%;
    height: 76%;
    border-radius: 11px;
}

.dj-console-title .avatar-frame-wrap.dash-avatar .avatar-frame-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Kleine programma-avatar: frame subtiel houden */
.slot-person .avatar-frame-wrap.tiny-avatar,
.schedule .avatar-frame-wrap.tiny-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border: 0;
}

.slot-person .avatar-frame-wrap.tiny-avatar .avatar-frame-photo,
.schedule .avatar-frame-wrap.tiny-avatar .avatar-frame-photo {
    inset: 11%;
    width: 78%;
    height: 78%;
    border-radius: 999px;
}

/* Lightbox: frame als lijst rond de foto, foto blijft groot zichtbaar */
.avatar-modal-visual.has-frame {
    width: min(86vw, 680px);
    height: min(86vw, 680px);
    max-height: 86vh;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.avatar-modal-visual.has-frame .avatar-modal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.avatar-modal-visual.has-frame .avatar-modal-photo {
    position: absolute;
    inset: 12%;
    width: 76%;
    height: 76%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    z-index: 2;
    border-radius: 28px;
    background: #020817;
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.avatar-modal-visual:not(.has-frame) {
    border: 4px solid rgba(255, 255, 255, .85);
    box-shadow: 0 20px 70px rgba(0,0,0,.65);
}

@media (max-width: 760px) {
    .header-live-badge .avatar-frame-wrap.header-live-img,
    .header-live-badge .avatar-frame-wrap.avatar-frame-header {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
    }

    .dj-console-title .avatar-frame-wrap.dash-avatar {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
    }
}


/* v0.4.53 - Themaframe laag-fix
   Juiste opbouw:
   laag 1 = DJ-foto volledig gevuld
   laag 2 = transparant PNG-frame er bovenop

   Let op: het framebestand moet zelf echt transparant zijn.
   Als er grijs/witte Photoshop-blokjes zichtbaar blijven, zitten die blokjes als pixels in de PNG.
*/
.avatar-frame-wrap {
    position: relative;
    overflow: hidden;
    background: #020817;
    box-sizing: border-box;
}

.avatar-frame-wrap .avatar-frame-photo {
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 1;
    border-radius: inherit;
    background: #020817;
}

.avatar-frame-wrap .avatar-frame-overlay {
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: transparent;
}

/* Header rechtsboven */
.header-live-badge .avatar-frame-wrap.header-live-img,
.header-live-badge .avatar-frame-wrap.avatar-frame-header {
    width: 86px;
    height: 86px;
    min-width: 86px;
    min-height: 86px;
    border-radius: 14px;
    border: 2px solid rgba(255, 215, 0, .65);
    background: #020817;
}

/* DJ-dashboard bovenaan */
.dj-console-title .avatar-frame-wrap.dash-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 14px;
    background: #020817;
}

/* Grote live/avatar */
.avatar-frame-wrap.live-avatar {
    background: #020817;
}

/* Kleine programma-avatar */
.slot-person .avatar-frame-wrap.tiny-avatar,
.schedule .avatar-frame-wrap.tiny-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 999px;
    background: #020817;
}

/* Lightbox/popup: foto achter het frame en mooi gevuld */
.avatar-modal-visual.has-frame {
    position: relative;
    width: min(86vw, 720px);
    height: min(86vw, 720px);
    max-height: 86vh;
    background: #020817;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    border-radius: 22px;
}

.avatar-modal-visual.has-frame .avatar-modal-photo {
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: cover;
    z-index: 1;
    border-radius: inherit;
    background: #020817;
    box-shadow: none;
}

.avatar-modal-visual.has-frame .avatar-modal-frame {
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 2;
    border: 0;
    box-shadow: none;
    background: transparent;
    pointer-events: none;
}

/* Zonder frame blijft gewone lightbox normaal */
.avatar-modal-visual:not(.has-frame) {
    border: 4px solid rgba(255, 255, 255, .85);
    box-shadow: 0 20px 70px rgba(0,0,0,.65);
}

@media (max-width: 760px) {
    .header-live-badge .avatar-frame-wrap.header-live-img,
    .header-live-badge .avatar-frame-wrap.avatar-frame-header {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
    }

    .dj-console-title .avatar-frame-wrap.dash-avatar {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
    }
}


/* v0.4.57 - DJ bio / Onze Kanjers profiel */
.dj-profile-card textarea,
.admin-user-bio-field textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

.dj-bio-form {
    display: grid;
    gap: 14px;
}

.bio-preview-box {
    padding: 14px 16px;
    border: 1px solid rgba(255, 215, 0, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.bio-preview-box p {
    margin: 8px 0 0;
    color: var(--pk-muted);
    line-height: 1.55;
}

.team-card p {
    text-align: left;
    line-height: 1.55;
    color: var(--pk-muted);
    margin-top: 10px;
}

.admin-user-bio-field {
    grid-column: 1 / -1;
}

.admin-user-bio-field small {
    color: var(--pk-muted);
}


/* v0.4.58 - DJ dashboard als iframe zonder bovenste site-header */
body.dj-embed-body {
    background: transparent;
}

.dj-embed-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px;
}

.dj-embed-body .top,
.dj-embed-body .site-top,
.dj-embed-body header.top {
    display: none !important;
}

.dj-embed-body .card:first-child {
    margin-top: 0;
}

@media (max-width: 760px) {
    .dj-embed-page {
        padding: 10px;
    }
}


/* v0.4.61 - Onze Kanjers bio netter + SAM/IP test */
.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    justify-content: center;
    align-items: start;
}

.team-card {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.team-card h3 {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.team-bio {
    margin-top: 12px;
    text-align: left;
    border: 1px solid rgba(255, 215, 0, .18);
    background: rgba(255, 255, 255, .035);
    border-radius: 12px;
    padding: 10px 12px;
    overflow: hidden;
}

.team-bio summary {
    cursor: pointer;
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
    text-align: center;
    list-style-position: inside;
}

.team-bio p {
    margin: 10px 0 0;
    max-width: 100%;
    color: var(--pk-muted, #b8c0cf);
    line-height: 1.55;
    font-size: 14px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.admin-info-box {
    border: 1px solid rgba(105, 229, 255, .24);
    background: rgba(105, 229, 255, .06);
    border-radius: 14px;
    padding: 14px 16px;
}

.admin-info-box p {
    margin: 8px 0 12px;
    color: var(--pk-muted, #b8c0cf);
    line-height: 1.45;
}

.admin-jukebox-test-box {
    grid-column: 1 / -1;
}


/* v0.4.62 - modernere scheiding op Onze Kanjers */
.team-section {
    margin: 34px 0 8px;
}

.team-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 24px;
}

.team-divider::before,
.team-divider::after {
    content: "";
    flex: 1 1 120px;
    max-width: 280px;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255,215,0,0),
        rgba(255,215,0,.6) 45%,
        rgba(255,215,0,.9),
        rgba(255,215,0,.6) 55%,
        rgba(255,215,0,0));
    opacity: .9;
}

.team-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, .55);
    background: linear-gradient(180deg, rgba(255,215,0,.12), rgba(255,215,0,.05));
    box-shadow:
        0 0 0 1px rgba(255,215,0,.08) inset,
        0 8px 24px rgba(0,0,0,.22);
    color: #ffd700;
    font-size: clamp(22px, 3vw, 26px);
    font-weight: 900;
    letter-spacing: .2px;
    text-align: center;
    white-space: nowrap;
}

.team-section h2 {
    text-align: center;
    color: #fff;
    margin: 32px 0 18px;
}

@media (max-width: 640px) {
    .team-divider {
        gap: 10px;
        margin-bottom: 18px;
    }

    .team-divider::before,
    .team-divider::after {
        flex-basis: 40px;
    }

    .team-divider span {
        min-height: 46px;
        padding: 0 16px;
        font-size: 19px;
        white-space: normal;
        line-height: 1.1;
    }
}


/* v0.4.63 - automatische herstart zichtbaar in admin */
.admin-auto-restart-box {
    grid-column: 1 / -1;
    border-color: rgba(255, 215, 0, .28);
    background: linear-gradient(180deg, rgba(255, 215, 0, .07), rgba(255, 255, 255, .025));
}

.admin-auto-restart-box .admin-check {
    margin: 12px 0 14px;
}

.auto-restart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .auto-restart-grid {
        grid-template-columns: 1fr;
    }
}


/* v0.4.64 - zichtbare diagnose op DJ scherm */
.jukebox-diagnose-panel {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.jukebox-diagnose-result {
    border-radius: 12px;
    padding: 11px 13px;
    font-weight: 800;
    line-height: 1.45;
    border: 1px solid rgba(148, 163, 184, .28);
    background: rgba(15, 23, 42, .7);
}

.jukebox-diagnose-result.is-loading {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, .45);
    background: rgba(37, 99, 235, .16);
}

.jukebox-diagnose-result.is-ok {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, .55);
    background: rgba(22, 163, 74, .18);
}

.jukebox-diagnose-result.is-bad {
    color: #fde68a;
    border-color: rgba(245, 158, 11, .55);
    background: rgba(120, 53, 15, .22);
}


/* v0.4.65 - DJ diagnose inklapbaar en compacter */
.jukebox-diagnose-panel {
    margin-top: 12px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 14px;
    background: rgba(15, 23, 42, .42);
    overflow: hidden;
}

.jukebox-diagnose-panel summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    color: #e5e7eb;
    font-weight: 900;
}

.jukebox-diagnose-panel summary::-webkit-details-marker {
    display: none;
}

.jukebox-diagnose-panel summary span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jukebox-diagnose-panel summary small {
    color: var(--pk-muted, #94a3b8);
    font-weight: 700;
    line-height: 1.25;
}

.jukebox-diagnose-panel[open] summary {
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .025);
}

.jukebox-diagnose-body {
    display: grid;
    gap: 9px;
    padding: 10px 12px 12px;
}

.jukebox-diagnose-body .button {
    justify-self: start;
}

.jukebox-diagnose-body small {
    line-height: 1.35;
    color: var(--pk-muted, #94a3b8);
}


/* v0.4.66 - duidelijke testknop voor storingsmail */
.mail-test-box {
    grid-column: 1 / -1;
    border-color: rgba(34, 197, 94, .28);
    background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(255,255,255,.025));
}

.mail-test-box p {
    margin: 8px 0 12px;
    color: var(--pk-muted, #b8c0cf);
    line-height: 1.45;
}

.mail-test-box small {
    display: block;
    margin-top: 10px;
    color: var(--pk-muted, #b8c0cf);
}


/* v0.4.67 - invalbeurten aanmelden + admin goedkeuren */
.substitution-list,
.substitution-admin-list {
    display: grid;
    gap: 12px;
}

.substitution-card,
.substitution-admin-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, .18);
    background: rgba(255, 255, 255, .035);
}

.substitution-card strong,
.substitution-admin-card strong {
    color: var(--pk-primary, #ffd700);
}

.substitution-card small,
.substitution-admin-card small {
    display: block;
    margin-top: 4px;
    color: var(--pk-muted, #b8c0cf);
}

.substitution-action,
.substitution-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.substitution-action input,
.substitution-admin-actions input {
    min-width: 180px;
    max-width: 240px;
}

.substitution-approved {
    color: #bbf7d0 !important;
    font-weight: 800;
}

.substitution-message {
    margin: 8px 0 0;
    color: var(--pk-muted, #b8c0cf);
    line-height: 1.45;
}

.substitution-admin-actions form {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 760px) {
    .substitution-card,
    .substitution-admin-card {
        grid-template-columns: 1fr;
    }

    .substitution-action,
    .substitution-admin-actions,
    .substitution-admin-actions form {
        justify-content: flex-start;
        width: 100%;
    }

    .substitution-action input,
    .substitution-admin-actions input {
        width: 100%;
        max-width: none;
    }
}

/* v0.4.68 */
.dj-substitution-collapsible summary span { color: var(--pk-primary, #ffd700); }


/* v0.4.69 - mail bij DJ-afmelding en invalaanmelding */
.dj-notify-box {
    grid-column: 1 / -1;
    border-color: rgba(250, 204, 21, .28);
    background: linear-gradient(180deg, rgba(250, 204, 21, .07), rgba(255,255,255,.025));
}

.dj-notify-box p {
    margin: 8px 0 12px;
    color: var(--pk-muted, #b8c0cf);
    line-height: 1.45;
}

.dj-notify-box > label {
    margin-top: 10px;
}


/* v0.4.71 - invalaanmelding blokkeert zelf intrekken */
.absence-actions small {
    display: block;
    margin-top: 6px;
    color: var(--pk-muted, #b8c0cf);
}

.absence-locked {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.absence-locked small {
    color: var(--pk-muted, #b8c0cf);
    font-size: .85rem;
}


/* v0.4.73 - invalaanmeldingen tekst + opschonen */
.substitution-cleanup-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.substitution-cleanup-bar h3 {
    margin: 0;
}

@media (max-width: 700px) {
    .substitution-cleanup-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* v0.4.75 - toegewezen invalbeurten + programma vervangt */
.substitution-card.is-assigned {
    border-color: rgba(34, 197, 94, .38);
    background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(255,255,255,.03));
}

.assigned-substitution-list {
    margin-bottom: 16px;
}

.slot-planned-note {
    display: inline-block;
    margin-left: 8px;
}


/* v0.4.76 - ingevulde invalbeurten niet meer als beschikbaar tonen */
.substitution-note {
    display: inline-block !important;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 215, 0, .10);
    border: 1px solid rgba(255, 215, 0, .28);
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
}


/* v0.4.77 - openstaande afmeldingen zonder invaller zichtbaar in admin */
.open-absence-list {
    margin: 10px 0 18px;
}

.open-absence-card {
    border-color: rgba(250, 204, 21, .28);
    background: linear-gradient(180deg, rgba(250,204,21,.06), rgba(255,255,255,.025));
}


/* v0.4.78 - programma vervangertekst duidelijk zichtbaar */
.schedule .substitution-note {
    display: inline-block !important;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .10);
    border: 1px solid rgba(34, 197, 94, .28);
    color: #bbf7d0;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .schedule .substitution-note {
        display: block !important;
        margin-left: 0;
        margin-top: 5px;
        white-space: normal;
    }
}


/* v0.4.79 - huidige dag en huidig tijdvak duidelijk markeren */
.day-card.today-card {
    border-color: rgba(34, 197, 94, .55) !important;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, .18) inset,
        0 0 28px rgba(34, 197, 94, .08);
    position: relative;
}

.day-card.today-card > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.today-label {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .34);
    color: #bbf7d0;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.schedule .row.current-slot {
    border-radius: 14px;
    padding: 13px 14px;
    margin: 3px 0;
    background:
        linear-gradient(90deg, rgba(255, 215, 0, .13), rgba(34, 197, 94, .08), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 215, 0, .32);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, .08) inset,
        0 0 24px rgba(255, 215, 0, .10);
}

.schedule .row.current-slot strong,
.schedule .row.current-slot .slot-person {
    color: #fff;
}

.schedule .row.current-slot strong::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    color: var(--pk-primary, #ffd700);
    font-size: .8rem;
}

.schedule .row.current-slot .jukebox-mini,
.schedule .row.current-slot .live-mini {
    transform: scale(1.04);
}

@media (max-width: 700px) {
    .day-card.today-card > h2 {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .schedule .row.current-slot {
        padding: 11px 10px;
    }
}


/* v0.4.80 - huidige tijdvak highlight ook in Schema vandaag */
.today-schedule-card .row.current-slot {
    border-radius: 14px;
    padding: 13px 14px;
    margin: 3px 0;
    background:
        linear-gradient(90deg, rgba(255, 215, 0, .13), rgba(34, 197, 94, .08), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 215, 0, .32);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, .08) inset,
        0 0 24px rgba(255, 215, 0, .10);
}

.today-schedule-card .row.current-slot strong::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    color: var(--pk-primary, #ffd700);
    font-size: .8rem;
}

.today-schedule-card .row.current-slot .jukebox-mini,
.today-schedule-card .row.current-slot .live-mini {
    transform: scale(1.04);
}


/* v0.4.81 - aaneengesloten gelijke blokken visueel samenvoegen */
.merged-slot-note {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .10);
    border: 1px solid rgba(148, 163, 184, .20);
    color: var(--pk-muted, #b8c0cf);
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 700px) {
    .merged-slot-note {
        display: inline-flex;
        margin-left: 0;
        margin-top: 4px;
    }
}


/* v0.4.82 - schemaregels in admin per dag inklapbaar */
.schedule-admin-days {
    display: grid;
    gap: 10px;
}

.schedule-day-section {
    border: 1px solid rgba(255, 215, 0, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    overflow: hidden;
}

.schedule-day-section[open] {
    border-color: rgba(255, 215, 0, .30);
    background: rgba(255, 255, 255, .035);
}

.schedule-day-section > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-weight: 900;
    color: var(--pk-primary, #ffd700);
}

.schedule-day-section > summary small {
    color: var(--pk-muted, #b8c0cf);
    font-weight: 800;
}

.schedule-day-table {
    padding: 0 12px 12px;
}

.schedule-day-empty {
    padding: 0 16px 14px;
}


/* v0.4.84 - WhatsApp/verzoekformulier widget met 2 knoppen */
.soft-separator {
    border: 0;
    border-top: 1px solid rgba(255, 215, 0, .16);
    margin: 22px 0;
}

.dj-whatsapp-form {
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, .24);
    background: rgba(34, 197, 94, .045);
    padding: 16px;
}

.dj-whatsapp-form h3 {
    margin-top: 0;
    color: #bbf7d0;
}

.request-widget-info {
    grid-column: 1 / -1;
}

.request-widget-info code {
    display: block;
    white-space: normal;
    word-break: break-word;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .75);
    color: var(--pk-primary, #ffd700);
}

.request-choice-widget {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 215, 0, .22);
    background: rgba(0, 0, 0, .38);
}

.request-choice-widget h3 {
    margin: 0 0 8px;
    color: var(--pk-primary, #ffd700);
}

.request-widget-now {
    margin: 0 0 12px;
    color: var(--pk-text, #fff);
}

.request-widget-buttons {
    display: grid;
    gap: 10px;
}

.request-widget-button {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.whatsapp-button {
    background: #16a34a !important;
    color: #fff !important;
    border-color: rgba(34, 197, 94, .45) !important;
}

.whatsapp-button::before {
    content: "💬";
    margin-right: 6px;
}

.request-widget-help {
    display: block;
    margin-top: 10px;
    color: var(--pk-muted, #b8c0cf);
    line-height: 1.35;
}

.embed-request-widget .embed-shell {
    padding: 0;
}


/* v0.4.86 - losse embedknoppen voor WhatsApp en verzoekformulier */
.request-single-widget {
    padding: 10px;
}

.request-widget-unavailable {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: rgba(148, 163, 184, .08);
    color: var(--pk-muted, #b8c0cf);
}

.request-widget-unavailable strong {
    display: block;
    color: var(--pk-text, #fff);
    margin-bottom: 4px;
}

.request-widget-unavailable small {
    display: block;
    line-height: 1.35;
}


/* v0.4.87 - weeknavigatie ook in embed-programma */
.embed-program-week-nav {
    margin: 12px 0;
}

.embed-program-week-arrows {
    margin-bottom: 14px;
}

.embed-program .program-week-tab {
    text-decoration: none;
}


/* v0.4.88 - live/vervangingsbalk ook in embedded programma en vandaag */
.embed-schedule .substitution-note {
    display: inline-block !important;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .10);
    border: 1px solid rgba(34, 197, 94, .28);
    color: #bbf7d0;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}

.embed-schedule .row.current-slot {
    border-radius: 14px;
    padding: 13px 14px;
    margin: 3px 0;
    background:
        linear-gradient(90deg, rgba(255, 215, 0, .13), rgba(34, 197, 94, .08), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 215, 0, .32);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, .08) inset,
        0 0 24px rgba(255, 215, 0, .10);
}

.embed-schedule .row.current-slot strong::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    color: var(--pk-primary, #ffd700);
    font-size: .8rem;
}

@media (max-width: 700px) {
    .embed-schedule .substitution-note {
        display: block !important;
        margin-left: 0;
        margin-top: 5px;
        white-space: normal;
    }
}


/* v0.4.89 - tijdvak in embedded programma niet laten afbreken */
.embed-schedule .row > strong,
.embed-program .schedule .row > strong,
.embed-day-card .schedule .row > strong,
.today-schedule-card .row > strong {
    white-space: nowrap;
    min-width: 104px;
    flex: 0 0 104px;
}

.embed-schedule .row.current-slot > strong::before,
.embed-program .schedule .row.current-slot > strong::before,
.embed-day-card .schedule .row.current-slot > strong::before,
.today-schedule-card .row.current-slot > strong::before {
    margin-right: 6px;
}

@media (max-width: 520px) {
    .embed-schedule .row > strong,
    .embed-program .schedule .row > strong,
    .embed-day-card .schedule .row > strong,
    .today-schedule-card .row > strong {
        min-width: 92px;
        flex-basis: 92px;
        font-size: 14px;
    }
}


/* v0.4.90 - verzoekformulier opent als popup vanuit embedknop */
.pk-request-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(4px);
}

.pk-request-modal.show {
    display: flex;
}

.pk-request-modal-card {
    position: relative;
    width: min(960px, 96vw);
    height: min(760px, 92vh);
    border: 1px solid rgba(255, 215, 0, .38);
    border-radius: 20px;
    background: #050816;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
    overflow: hidden;
}

.pk-request-modal-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.pk-request-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .96);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

.pk-request-modal-close:hover {
    background: var(--pk-accent, #d91668);
}

@media (max-width: 700px) {
    .pk-request-modal {
        padding: 8px;
    }

    .pk-request-modal-card {
        width: 100vw;
        height: 94vh;
        border-radius: 14px;
    }
}


/* v0.4.91 - header live-badge embed + DJ stijlkeuze */
.live-badge-style-form {
    border-color: rgba(34, 197, 94, .22);
}

.embed-header-live {
    background: transparent;
}

.header-live-embed {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 215, 0, .58);
    background:
        radial-gradient(circle at top left, rgba(255, 215, 0, .08), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .96));
    color: var(--pk-text, #fff);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 0 26px rgba(217, 22, 104, .18);
}

.header-live-embed.is-live {
    animation: pkHeaderPulse 2.2s ease-in-out infinite;
}

.header-live-media {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 12px;
    border: 2px solid var(--pk-primary, #ffd700);
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .88);
    overflow: hidden;
    font-size: 28px;
}

.header-live-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-live-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.header-live-content .header-live-status {
    color: #22c55e;
    font-size: 13px;
    font-weight: 900;
}

.header-live-content strong {
    color: #fff;
    font-size: 19px;
    line-height: 1.15;
    word-break: break-word;
}

.header-live-content small {
    color: var(--pk-primary, #ffd700);
    font-weight: 800;
    line-height: 1.2;
}

@keyframes pkHeaderPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(217,22,104,.16), 0 0 0 rgba(255,215,0,0); }
    50% { box-shadow: 0 0 34px rgba(217,22,104,.36), 0 0 18px rgba(255,215,0,.18); }
}

.header-live-embed.live-style-equalizer {
    border-color: rgba(34, 211, 238, .65);
}

.header-live-embed.live-style-equalizer .live-eq {
    display: inline-flex;
    gap: 3px;
    align-items: end;
    margin-left: auto;
}

.header-live-embed.live-style-equalizer .live-eq i {
    display: block;
    width: 4px;
    height: 14px;
    border-radius: 4px;
    background: #22d3ee;
    animation: pkEq 1s ease-in-out infinite;
}

.header-live-embed.live-style-equalizer .live-eq i:nth-child(2) { animation-delay: .18s; height: 22px; }
.header-live-embed.live-style-equalizer .live-eq i:nth-child(3) { animation-delay: .32s; height: 17px; }

@keyframes pkEq {
    0%, 100% { transform: scaleY(.5); opacity: .55; }
    50% { transform: scaleY(1.25); opacity: 1; }
}

.header-live-embed.live-style-neon {
    border-color: rgba(236, 72, 153, .8);
    box-shadow: 0 0 18px rgba(236,72,153,.34), inset 0 0 18px rgba(34,211,238,.08);
}

.header-live-embed.live-style-neon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(34, 211, 238, .55);
    pointer-events: none;
    animation: pkNeon 1.7s ease-in-out infinite;
}

@keyframes pkNeon {
    0%, 100% { opacity: .32; }
    50% { opacity: 1; }
}

.header-live-embed.live-style-compact {
    min-width: 230px;
    padding: 9px 13px;
    border-radius: 999px;
}

.header-live-embed.live-style-compact .header-live-media {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    font-size: 20px;
}

.header-live-embed.live-style-compact .header-live-content strong {
    font-size: 16px;
}

.header-live-embed.live-style-spotlight {
    border-color: rgba(255, 215, 0, .75);
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 0, 40, .96));
}

.header-live-embed.live-style-spotlight .live-spark {
    position: absolute;
    top: -40%;
    left: -30%;
    width: 40%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(18deg);
    animation: pkSpot 3.2s ease-in-out infinite;
}

@keyframes pkSpot {
    0% { left: -45%; opacity: 0; }
    20% { opacity: .95; }
    55% { left: 120%; opacity: 0; }
    100% { left: 120%; opacity: 0; }
}

.header-live-embed.is-jukebox {
    border-color: rgba(148, 163, 184, .34);
    box-shadow: none;
}

.header-live-embed.is-jukebox .header-live-status {
    color: var(--pk-primary, #ffd700);
}

@media (max-width: 520px) {
    .header-live-embed {
        min-width: 0;
        width: 100%;
        padding: 10px 12px;
    }

    .header-live-media {
        width: 58px;
        height: 58px;
    }

    .header-live-content strong {
        font-size: 16px;
    }
}


/* v0.4.92 - DJ live-badge stijl werkt ook op de normale hoofdheader */
.header-live-badge.live-style-glow.is-live {
    animation: pkHeaderPulse 2.2s ease-in-out infinite;
    border-color: rgba(255, 215, 0, .58);
    box-shadow: 0 0 26px rgba(217, 22, 104, .18);
}

.header-live-badge.live-style-equalizer {
    border-color: rgba(34, 211, 238, .65);
}

.header-live-badge.live-style-equalizer .live-eq {
    display: inline-flex;
    gap: 3px;
    align-items: end;
    margin-left: auto;
    flex: 0 0 auto;
}

.header-live-badge.live-style-equalizer .live-eq i {
    display: block;
    width: 4px;
    height: 14px;
    border-radius: 4px;
    background: #22d3ee;
    animation: pkEq 1s ease-in-out infinite;
}

.header-live-badge.live-style-equalizer .live-eq i:nth-child(2) {
    animation-delay: .18s;
    height: 22px;
}

.header-live-badge.live-style-equalizer .live-eq i:nth-child(3) {
    animation-delay: .32s;
    height: 17px;
}

.header-live-badge.live-style-neon {
    border-color: rgba(236, 72, 153, .8);
    box-shadow: 0 0 18px rgba(236,72,153,.34), inset 0 0 18px rgba(34,211,238,.08);
}

.header-live-badge.live-style-neon::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(34, 211, 238, .55);
    pointer-events: none;
    animation: pkNeon 1.7s ease-in-out infinite;
}

.header-live-badge.live-style-compact {
    min-width: 230px;
    max-width: 320px;
    padding: 9px 13px;
    border-radius: 999px;
}

.header-live-badge.live-style-compact .header-live-img {
    width: 52px;
    height: 52px;
}

.header-live-badge.live-style-compact .header-live-name {
    font-size: 15px;
}

.header-live-badge.live-style-spotlight {
    border-color: rgba(255, 215, 0, .75);
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 0, 40, .96));
}

.header-live-badge.live-style-spotlight .live-spark {
    position: absolute;
    top: -40%;
    left: -30%;
    width: 40%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(18deg);
    animation: pkSpot 3.2s ease-in-out infinite;
    pointer-events: none;
}

.header-live-badge.live-style-jukebox {
    border-color: rgba(148, 163, 184, .34);
    box-shadow: none;
}


/* v0.4.94 - admin gebruikers echt compact/inklapbaar */
.admin-user-list-compact {
    display: grid;
    gap: 12px;
}

.admin-user-card.admin-user-compact {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    background: rgba(15, 23, 42, .60);
}

.admin-user-compact .admin-user-head {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.admin-user-edit-details {
    margin-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, .16);
    padding-top: 10px;
}

.admin-user-edit-details > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .74);
    border: 1px solid rgba(255, 215, 0, .16);
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
    list-style: none;
}

.admin-user-edit-details > summary::-webkit-details-marker {
    display: none;
}

.admin-user-edit-details > summary::before {
    content: "▸";
    color: var(--pk-accent, #d91668);
    margin-right: 2px;
}

.admin-user-edit-details[open] > summary::before {
    content: "▾";
}

.admin-user-edit-details > summary small {
    margin-left: auto;
    color: var(--pk-muted, #b8c0cf);
    font-weight: 800;
}

.admin-user-edit-details[open] > summary {
    border-color: rgba(255, 215, 0, .32);
    background: rgba(255, 215, 0, .055);
}

.admin-user-edit-form {
    margin-top: 14px;
}

.admin-user-delete-inside {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(239, 68, 68, .18);
}

@media (max-width: 700px) {
    .admin-user-edit-details > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user-edit-details > summary small {
        margin-left: 0;
    }
}


/* v0.4.95 - DJ pagina: instellingen los van verzoekjes */
.dj-settings-card {
    border-color: rgba(34, 197, 94, .20);
}

.dj-settings-section {
    margin-top: 4px;
}

.dj-settings-section h3 {
    margin: 0 0 8px;
    color: var(--pk-primary, #ffd700);
}

.dj-settings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .44);
}

.dj-settings-toolbar .icon-form {
    margin: 0;
}

.dj-settings-toolbar .checkline {
    align-self: center;
}

#verzoekjes {
    border-color: rgba(255, 215, 0, .20);
}

@media (max-width: 760px) {
    .dj-settings-toolbar {
        display: grid;
        gap: 12px;
    }

    .dj-settings-toolbar .icon-form {
        width: 100%;
    }
}


/* v0.4.96 - alternatief verzoek ook als Nu op verzoek kunnen tonen */
.alt-playing-btn {
    border-color: rgba(34, 197, 94, .38) !important;
    color: #bbf7d0 !important;
}

.request-actions {
    flex-wrap: wrap;
}


/* v0.4.97 - wachtwoord vergeten */
.login-help {
    margin-top: 14px;
    text-align: center;
}

.login-help a {
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
    text-decoration: none;
}

.login-help a:hover {
    text-decoration: underline;
}


/* v0.4.98 - DJ whitelist en zelf account aanmaken */
.login-sep {
    display: inline-block;
    margin: 0 8px;
    color: var(--pk-muted, #aaaaaa);
}

.admin-whitelist-form {
    margin-bottom: 14px;
}

.admin-whitelist-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.admin-whitelist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 215, 0, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.admin-whitelist-row small {
    display: block;
    color: var(--pk-muted, #aaaaaa);
    margin-top: 3px;
}

@media (max-width: 760px) {
    .admin-whitelist-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* v0.4.99 - eerste login profiel afronden */
.admin-quick-dj-form {
    margin-bottom: 18px;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 16px;
    padding: 14px;
    background: rgba(34, 197, 94, .045);
}

.profile-setup-card {
    max-width: 760px;
}

.profile-setup-card textarea {
    min-height: 110px;
}


/* v05.00 - verzoekkaarten zoals oude systeem + DJ naamkleur */
.dj-colored-name {
    color: var(--pk-text, #fff);
    font-weight: 900;
}

.jukebox-display-name {
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
}

input[type="color"] {
    min-height: 42px;
    padding: 4px;
    cursor: pointer;
}

.request-bar {
    position: relative;
    border: 1px solid rgba(255, 215, 0, .22);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .76));
    padding: 14px;
    margin-bottom: 12px;
}

.request-bar .request-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 215, 0, .12);
}

.request-bar .request-lines {
    display: grid;
    gap: 8px;
}

.request-bar .request-line,
.request-bar .request-altline,
.request-bar .request-meta span {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 10px;
    background: rgba(2, 6, 23, .42);
}

.request-bar .request-line > span:first-child,
.request-bar .request-altline > span:first-child,
.request-bar .request-meta span::first-letter {
    color: var(--pk-muted, #b8c0cf);
}

.request-bar .request-line strong,
.request-bar .request-altline strong {
    color: var(--pk-text, #fff);
    letter-spacing: .02em;
}

.request-bar .request-meta {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.request-bar .request-meta span {
    grid-template-columns: 135px minmax(0, 1fr);
}

.request-bar .request-meta span:nth-child(1)::before {
    content: "Van:";
    color: var(--pk-muted, #b8c0cf);
}

.request-bar .request-meta span:nth-child(2)::before {
    content: "Bericht:";
    color: var(--pk-muted, #b8c0cf);
}

.request-bar .request-meta span:nth-child(3)::before {
    content: "IP/tijd:";
    color: var(--pk-muted, #b8c0cf);
}

.request-bar .request-meta span {
    font-weight: 800;
}

.request-bar .request-meta span {
    color: var(--pk-text, #fff);
}

.request-bar .request-actions {
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 215, 0, .10);
}

.request-bar .button.blue {
    background: linear-gradient(135deg, #ffd700, #ffb000);
    color: #111827;
}

.request-bar .alt-playing-btn {
    background: rgba(34, 197, 94, .14) !important;
}

.request-bar.done {
    opacity: .72;
}

@media (max-width: 760px) {
    .request-bar .request-head {
        grid-template-columns: 1fr;
    }

    .request-bar .request-line,
    .request-bar .request-altline,
    .request-bar .request-meta span {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .request-bar .request-actions {
        justify-content: flex-start;
    }
}


/* v05.01 - Onze Kanjers naamkleur en naam-effect */
.team-dj-name,
.dj-colored-name {
    color: var(--pk-text, #fff);
    font-weight: 900;
}

.jukebox-display-name {
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
}

.team-dj-name.dj-name-effect-neon,
.dj-name-effect-neon {
    text-shadow:
        0 0 5px currentColor,
        0 0 12px currentColor,
        0 0 22px rgba(255, 255, 255, .22);
}

.team-dj-name.dj-name-effect-soft-glow,
.dj-name-effect-soft-glow {
    text-shadow:
        0 0 8px currentColor,
        0 0 18px rgba(255, 255, 255, .14);
}

.team-dj-name.dj-name-effect-sparkle,
.dj-name-effect-sparkle {
    position: relative;
    display: inline-block;
}

.team-dj-name.dj-name-effect-sparkle::after,
.dj-name-effect-sparkle::after {
    content: " ✦";
    font-size: .72em;
    color: currentColor;
    opacity: .82;
    animation: pkNameSparkle 1.8s ease-in-out infinite;
}

@keyframes pkNameSparkle {
    0%, 100% { opacity: .35; transform: translateY(0) scale(.9); }
    50% { opacity: 1; transform: translateY(-1px) scale(1.15); }
}

.team-dj-name.dj-name-effect-rainbow,
.dj-name-effect-rainbow {
    background: linear-gradient(90deg, #ffd700, #22c55e, #38bdf8, #d91668, #ffd700);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: pkNameRainbow 4s linear infinite;
    text-shadow: 0 0 18px rgba(255, 215, 0, .22);
}

@keyframes pkNameRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 280% 50%; }
}

.dj-settings-toolbar .icon-label input[type="color"] {
    min-width: 88px;
}


/* v05.02 - extra DJ naam-effecten + effecten ook in programma/live */
.dj-name-effect {
    font-weight: 900;
}

.dj-name-effect-shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.dj-name-effect-shine::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -80%;
    width: 55%;
    height: 170%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
    transform: rotate(18deg);
    animation: pkNameShine 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pkNameShine {
    0% { left: -80%; opacity: 0; }
    18% { opacity: .9; }
    42% { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

.dj-name-effect-gold-pulse {
    color: #ffd700 !important;
    text-shadow:
        0 0 7px rgba(255, 215, 0, .75),
        0 0 18px rgba(255, 176, 0, .38);
    animation: pkNameGoldPulse 1.8s ease-in-out infinite;
}

@keyframes pkNameGoldPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
}

.dj-name-effect-ice {
    color: #7dd3fc !important;
    text-shadow:
        0 0 6px rgba(125, 211, 252, .9),
        0 0 18px rgba(56, 189, 248, .48),
        0 0 28px rgba(255, 255, 255, .18);
}

.dj-name-effect-fire {
    color: #fb923c !important;
    text-shadow:
        0 0 6px rgba(251, 146, 60, .9),
        0 0 16px rgba(239, 68, 68, .52),
        0 0 28px rgba(255, 215, 0, .22);
    animation: pkNameFire 1.2s ease-in-out infinite alternate;
}

@keyframes pkNameFire {
    0% { text-shadow: 0 0 5px rgba(251,146,60,.8), 0 0 14px rgba(239,68,68,.45); }
    100% { text-shadow: 0 0 8px rgba(255,215,0,.85), 0 0 22px rgba(239,68,68,.65); }
}

/* In schema/live moet het effect compact blijven */
.slot-person .dj-name-effect,
.live-card .dj-name-effect,
.header-live-name.dj-name-effect {
    display: inline-block;
}


/* v05.03 - DJ naam-effecten duidelijk los zichtbaar in admin */
.dj-name-effects-admin-card {
    border-color: rgba(34, 197, 94, .28);
}

.dj-name-effects-admin-card > summary {
    color: var(--pk-primary, #ffd700);
}

.dj-name-effects-admin-card .details-body {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, .06), transparent 34%),
        rgba(2, 6, 23, .18);
}


/* v05.05 - Nu op verzoek als kaart zoals jukebox-verzoekpopup */
.next-request-box.playing-request-box {
    border: 1px solid rgba(255, 215, 0, .34);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(255, 215, 0, .07), transparent 35%),
        rgba(2, 6, 23, .70);
    box-shadow: 0 0 24px rgba(255, 215, 0, .06);
}

.next-request-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pk-primary, #ffd700);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 12px;
}

.siren-light {
    display: inline-block;
    animation: pkSirenPulse 1.25s ease-in-out infinite;
}

@keyframes pkSirenPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 7px rgba(255, 0, 0, .75)); transform: scale(1.06); }
}

.next-request-card {
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 15px;
    background: rgba(15, 23, 42, .76);
    padding: 14px 16px;
}

.next-request-artist {
    color: #b9d7ff;
    font-weight: 900;
    margin-bottom: 4px;
}

.next-request-title {
    color: var(--pk-text, #fff);
    font-size: 22px;
    font-weight: 950;
    line-height: 1.18;
    letter-spacing: .02em;
    margin-bottom: 8px;
}

.next-request-duration,
.next-request-message {
    color: var(--pk-muted, #b8c0cf);
    font-weight: 750;
    margin-top: 8px;
}

.next-request-duration#pk-pr-name {
    color: #bbf7d0;
    font-weight: 900;
}

.next-request-message {
    color: var(--pk-text, #fff);
}

.next-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.next-request-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pk-primary, #ffd700), #fff176);
    color: #111827;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 215, 0, .18);
}

.next-request-link:hover {
    transform: translateY(-1px);
}

.playing-request-timer {
    margin: 10px 0 0;
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
}

.embed-playing-request-box {
    margin: 0;
}

@media (max-width: 640px) {
    .next-request-title {
        font-size: 18px;
    }

    .next-request-link {
        width: 100%;
    }
}


/* v05.07 - team zichtbaarheid herstel */
.team-restore-admin-card {
    border-color: rgba(255, 215, 0, .32);
}

.team-restore-admin-card > summary {
    color: var(--pk-primary, #ffd700);
}

.team-restore-admin-card .details-body {
    background: rgba(255, 215, 0, .035);
}


/* v05.08 - website-layout integratie + team/herstel gecombineerd */
.public-shell-header,
.public-shell-footer {
    width: 100%;
}

.public-shell-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.public-shell-main {
    min-width: 0;
}

.public-shell-sidebar {
    min-width: 0;
}

.public-shell-sidebar .card,
.public-shell-header .card,
.public-shell-footer .card {
    margin-bottom: 16px;
}

.public-shell-admin-card {
    border-color: rgba(56, 189, 248, .28);
}

.public-shell-admin-card > summary {
    color: var(--pk-primary, #ffd700);
}

.public-shell-admin-card textarea {
    min-height: 120px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.has-public-shell .page {
    max-width: 1500px;
}

@media (max-width: 1020px) {
    .public-shell-layout {
        grid-template-columns: 1fr;
    }
}


/* v05.09 - eerste login gebruikersnaam vriendelijker */
.profile-setup-card label small strong {
    color: var(--pk-primary, #ffd700);
}


/* v05.10 - embeds strakker in bestaande website */
.embed-transparent,
.embed-transparent .embed-shell {
    background: transparent !important;
}

.embed-transparent .embed-card,
.embed-transparent .card,
.embed-transparent .day-card {
    background: rgba(0, 0, 0, .18) !important;
    box-shadow: none !important;
}

.embed-transparent .program-hero {
    background: rgba(0, 0, 0, .16) !important;
}

.embed-transparent .program-week-tab {
    background: rgba(10, 14, 22, .42) !important;
}

.embed-transparent .program-week-tab.active {
    background: rgba(0, 60, 35, .38) !important;
}

.embed-transparent .row,
.embed-transparent .schedule .row {
    background: transparent !important;
}

.embed-transparent .current-slot {
    background: rgba(255, 215, 0, .075) !important;
}


/* v05.12 - embed transparanter en strakker op bestaande hoofdsite */
html:has(body.embed-transparent),
body.embed-transparent {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.embed-transparent .embed-shell {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.embed-transparent .program-hero,
.embed-transparent .embed-card,
.embed-transparent .card,
.embed-transparent .day-card,
.embed-transparent .today-card {
    background: rgba(0, 0, 0, .10) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.embed-transparent .today-card {
    background: rgba(0, 45, 28, .13) !important;
}

.embed-transparent .program-week-tab {
    background: rgba(10, 14, 22, .28) !important;
    box-shadow: none !important;
}

.embed-transparent .program-week-tab.active {
    background: rgba(0, 60, 35, .25) !important;
}

.embed-transparent .row,
.embed-transparent .schedule .row,
.embed-transparent .jukebox-row {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.embed-transparent .current-slot {
    background: rgba(255, 215, 0, .06) !important;
}

.embed-transparent .program-week-arrows {
    margin-bottom: 14px;
}

.embed-transparent .button {
    box-shadow: none !important;
}


/* v05.14 - embed transparantie zoals de hoofdsite/widgets */
html:has(body.embed-transparent),
body.embed-transparent {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body.embed-transparent .embed-shell {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/*
  De embed moet de achtergrond van de hoofdsite laten doorschijnen.
  Daarom geen harde zwarte vlakken, maar dezelfde glasachtige panelen als de sidebar-widgets.
*/
body.embed-transparent .card,
body.embed-transparent .embed-card,
body.embed-transparent .program-hero,
body.embed-transparent .day-card,
body.embed-transparent .today-card {
    background: rgba(0, 0, 0, .34) !important;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)),
        radial-gradient(circle at top left, rgba(255, 215, 0, .045), transparent 38%) !important;
    border-color: rgba(255, 215, 0, .42) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(1.5px);
}

body.embed-transparent .today-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)),
        radial-gradient(circle at top left, rgba(34, 197, 94, .10), transparent 42%),
        rgba(0, 0, 0, .28) !important;
    border-color: rgba(34, 197, 94, .48) !important;
}

body.embed-transparent .program-week-tab {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)),
        rgba(0, 0, 0, .30) !important;
    border-color: rgba(255, 215, 0, .34) !important;
    box-shadow: none !important;
    backdrop-filter: blur(1.5px);
}

body.embed-transparent .program-week-tab.active {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, .16), transparent 48%),
        rgba(0, 0, 0, .26) !important;
    border-color: rgba(34, 197, 94, .62) !important;
}

body.embed-transparent .row,
body.embed-transparent .schedule .row,
body.embed-transparent .jukebox-row {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.embed-transparent .row + .row,
body.embed-transparent .schedule .row {
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}

body.embed-transparent .current-slot {
    background:
        radial-gradient(circle at left, rgba(255, 215, 0, .13), transparent 50%),
        rgba(255, 215, 0, .045) !important;
    border-color: rgba(255, 215, 0, .40) !important;
}

body.embed-transparent .button {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
}

body.embed-transparent .avatar,
body.embed-transparent .tiny-avatar,
body.embed-transparent .tiny-icon {
    background-color: rgba(15, 23, 42, .72) !important;
}


/* v05.17 - embed generator admin, zonder bestaande functies te overschrijven */
.embed-generator-admin-card {
    border-color: rgba(56, 189, 248, .30);
}

.embed-generator-admin-card > summary {
    color: var(--pk-primary, #ffd700);
}

.embed-generator-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.embed-generator-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.embed-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

#pkEmbedCodeOutput {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    min-height: 260px;
}

.soft-card {
    background: rgba(15, 23, 42, .45);
    box-shadow: none;
}

@media (max-width: 1000px) {
    .embed-generator-grid,
    .embed-generator-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .embed-generator-grid,
    .embed-generator-options {
        grid-template-columns: 1fr;
    }
}


/* v05.20 - aparte server-side embed generator */
.embed-generator-admin-card {
    border-color: rgba(56, 189, 248, .30);
}

.embed-generator-admin-card > summary,
.embed-generator-advanced > summary {
    color: var(--pk-primary, #ffd700);
}

.embed-generator-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.embed-generator-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.embed-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 16px;
}

.embed-generator-advanced {
    margin: 12px 0;
    border: 1px solid rgba(255, 215, 0, .20);
    border-radius: 12px;
    padding: 10px 12px;
}

@media (max-width: 1000px) {
    .embed-generator-grid,
    .embed-generator-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .embed-generator-grid,
    .embed-generator-options {
        grid-template-columns: 1fr;
    }
}


/* v05.22 - theme=glass veel transparanter op hoofdsite */
body.embed-transparent,
html:has(body.embed-transparent) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body.embed-transparent .embed-shell,
body.embed-transparent main,
body.embed-transparent .container,
body.embed-transparent .wrap {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/*
  Echte glas-look:
  minder zwarte vulling, meer achtergrond van hoofdsite zichtbaar.
*/
body.embed-transparent .program-hero,
body.embed-transparent .card,
body.embed-transparent .embed-card,
body.embed-transparent .day-card,
body.embed-transparent .today-card,
body.embed-transparent section.card,
body.embed-transparent section.day-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        rgba(0, 0, 0, .16) !important;
    background-color: rgba(0, 0, 0, .16) !important;
    border-color: rgba(255, 215, 0, .46) !important;
    box-shadow: none !important;
    backdrop-filter: blur(1px);
}

body.embed-transparent .today-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        rgba(0, 35, 20, .13) !important;
    background-color: rgba(0, 35, 20, .13) !important;
    border-color: rgba(34, 197, 94, .56) !important;
}

body.embed-transparent .program-week-tab {
    background: rgba(0, 0, 0, .14) !important;
    background-color: rgba(0, 0, 0, .14) !important;
    border-color: rgba(255, 215, 0, .36) !important;
    box-shadow: none !important;
}

body.embed-transparent .program-week-tab.active {
    background: rgba(0, 70, 38, .18) !important;
    background-color: rgba(0, 70, 38, .18) !important;
    border-color: rgba(34, 197, 94, .65) !important;
}

body.embed-transparent .row,
body.embed-transparent .schedule .row,
body.embed-transparent .jukebox-row,
body.embed-transparent .slot-row {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.embed-transparent .row + .row,
body.embed-transparent .schedule .row {
    border-bottom-color: rgba(255,255,255,.11) !important;
}

body.embed-transparent .current-slot,
body.embed-transparent .now.current-slot {
    background:
        radial-gradient(circle at left, rgba(255, 215, 0, .13), transparent 55%),
        rgba(255, 215, 0, .035) !important;
    border-color: rgba(255, 215, 0, .52) !important;
}

/* Als je hem nóg doorzichtiger wilt: wijzig .16 hierboven naar .08 */


/* v05.23 - definitieve transparantie override voor embeds
   Deze regels staan helemaal onderaan zodat ze eerdere donkere regels overschrijven. */

html,
body.embed-transparent,
body.embed-transparent .page,
body.embed-transparent .embed-shell,
body.embed-transparent main,
body.embed-transparent .container,
body.embed-transparent .wrap,
body.embed-transparent .content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Theme glass: bijna geen donkere plaat meer, alleen lichte leeslaag */
body.embed-transparent .program-hero,
body.embed-transparent .card,
body.embed-transparent .embed-card,
body.embed-transparent .day-card,
body.embed-transparent .today-card,
body.embed-transparent section.card,
body.embed-transparent section.day-card,
body.embed-transparent .program-week-tab {
    background: rgba(0, 0, 0, .06) !important;
    background-color: rgba(0, 0, 0, .06) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,0)) !important;
    box-shadow: none !important;
}

/* Vandaag mag iets zichtbaar blijven, maar ook transparant */
body.embed-transparent .today-card {
    background: rgba(0, 35, 20, .07) !important;
    background-color: rgba(0, 35, 20, .07) !important;
}

/* De grote lijsten en regels echt doorzichtig */
body.embed-transparent .row,
body.embed-transparent .schedule .row,
body.embed-transparent .jukebox-row,
body.embed-transparent .slot-row,
body.embed-transparent .program-row,
body.embed-transparent .day-row {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Huidige rij alleen subtiel geel */
body.embed-transparent .current-slot,
body.embed-transparent .now.current-slot {
    background: rgba(255, 215, 0, .035) !important;
    background-color: rgba(255, 215, 0, .035) !important;
    background-image: none !important;
}

/* Als de browser :has ondersteunt, forceer de root ook transparant */
html:has(body.embed-transparent) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* v05.24 - extra fallback: embed-program.php bevat nu ook inline transparantie.
   Deze CSS blijft als reserve staan. */
body.embed-transparent,
body.embed-transparent * {
    box-shadow: none;
}

body.embed-transparent .program-hero,
body.embed-transparent .card,
body.embed-transparent .embed-card,
body.embed-transparent .day-card,
body.embed-transparent .today-card,
body.embed-transparent .program-week-tab {
    background-color: rgba(0, 0, 0, .04) !important;
    background-image: none !important;
}


/* v05.25 - extra: transparantie krijgt nu ook inline style in embed-program.php.
   Deze CSS is alleen fallback. */
body.embed-transparent .program-hero,
body.embed-transparent .card,
body.embed-transparent .embed-card,
body.embed-transparent .day-card,
body.embed-transparent .today-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* v05.07 - standaard DJ-naam zonder gekozen kleur is wit; Jukebox blijft geel */
.team-dj-name,
.dj-colored-name {
    color: var(--pk-text, #fff);
    font-weight: 900;
}

.jukebox-display-name {
    color: var(--pk-primary, #ffd700);
    font-weight: 900;
}