/*
 * Snoeten herbruikbare popup-shell
 *
 * Gebruik:
 *   .snoeten-popup-shell
 *   .snoeten-popup-shell__header
 *   .snoeten-popup-shell__title
 *   .snoeten-popup-shell__tabsbar      (optioneel, grijze tabplaat)
 *   .snoeten-popup-shell__tabs         (optioneel)
 *   .snoeten-popup-shell__tab          (optioneel)
 *   .snoeten-popup-shell__content
 *   .snoeten-popup-shell__toolbar      (optioneel)
 *   .snoeten-popup-shell__body         (optioneel)
 *   .snoeten-popup-shell__surface      (wit invoer-/paneelvlak)
 *   .snoeten-popup-shell__footer
 *
 * Andere popups, zoals Indeling aanpassen, kunnen dezelfde classes gebruiken.
 * Per popup zijn kleuren/maten aanpasbaar via de CSS-variabelen op de shell.
 */

.snoeten-popup-shell {
    --snoeten-popup-bg: #BCDDF5;
    --snoeten-popup-border: #000000;
    --snoeten-popup-header-bg: linear-gradient(180deg, #f7b457 0%, #f19620 55%, #df8310 100%);
    --snoeten-popup-header-color: #ffffff;
    --snoeten-popup-header-border: #c97812;
    --snoeten-popup-content-bg: #D9E6EA;
    --snoeten-popup-content-border: #8EAAB4;
    --snoeten-popup-surface-bg: #ffffff;
    --snoeten-popup-surface-border: #8EAAB4;
    --snoeten-popup-backdrop-bg: rgba(34, 49, 63, .46);
    --snoeten-popup-backdrop-filter: blur(1.5px) saturate(92%);
    --snoeten-popup-footer-bg: #E9F4FE;
    --snoeten-popup-radius: 0px;
    --snoeten-popup-content-radius: 0px;
    --snoeten-popup-surface-radius: 10px;
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-tabs-height: 50px;
    --snoeten-popup-tabs-bg: #F0F0F0;
    --snoeten-popup-tabs-border: #CCCCCC;
    --snoeten-popup-footer-height: 72px;
    --snoeten-popup-content-margin: 0px;
    --snoeten-popup-width: min(1000px, calc(100vw - 40px));
    --snoeten-popup-height: min(790px, calc(100dvh - 40px));
    --snoeten-popup-max-width: 1000px;
    --snoeten-popup-shadow: 0 28px 78px rgba(0, 0, 0, .52), 0 8px 24px rgba(0, 0, 0, .36);
    --guestbook-window-x: 0px;
    --guestbook-window-y: 0px;

    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 12000 !important;
    display: none !important;
    width: var(--snoeten-popup-width) !important;
    max-width: var(--snoeten-popup-max-width) !important;
    height: var(--snoeten-popup-height) !important;
    max-height: calc(100dvh - 40px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate3d(
        calc(-50% + var(--guestbook-window-x)),
        calc(-50% + var(--guestbook-window-y)),
        0
    ) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid var(--snoeten-popup-border) !important;
    border-radius: var(--snoeten-popup-radius) !important;
    background: var(--snoeten-popup-bg) !important;
    box-shadow: var(--snoeten-popup-shadow) !important;
    outline: 0 !important;
}

/*
 * Gedeelde donkere achtergrond voor iedere geopende popup-shell.
 * Hiermee gebruiken Profielgegevens, Prikbordbericht plaatsen en Indeling aanpassen
 * exact dezelfde dimlaag. De laag verdwijnt bij minimaliseren.
 */
html:has(body .snoeten-popup-shell.is-open:not(.is-minimized)) body::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 11990 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background: var(--snoeten-popup-backdrop-bg, rgba(34, 49, 63, .46)) !important;
    backdrop-filter: var(--snoeten-popup-backdrop-filter, blur(1.5px) saturate(92%)) !important;
    -webkit-backdrop-filter: var(--snoeten-popup-backdrop-filter, blur(1.5px) saturate(92%)) !important;
}


/* Een geopende nieuwe popup-shell beheert ook zelf de paginascroll.
   Hierdoor zijn oude body-classes zoals profile-bio-editor-open en
   profile-layout-editor-open niet meer nodig. */
html:has(body .snoeten-popup-shell.is-open:not(.is-minimized)),
body:has(.snoeten-popup-shell.is-open:not(.is-minimized)) {
    overflow: hidden !important;
}

/* Profielgegevens gebruikt dezelfde shell, met behoud van het ruimere profielvenster. */
.snoeten-popup-shell--profile-details {
    --snoeten-popup-width: min(1200px, calc(100vw - 40px));
    --snoeten-popup-max-width: 1200px;
    --snoeten-popup-height: min(760px, calc(100dvh - 40px));
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-tabs-height: 50px;
    --snoeten-popup-footer-height: 64px;
    --snoeten-popup-content-margin: 0px;
}

.snoeten-popup-shell.is-open {
    display: grid !important;
    grid-template-areas:
        "popup-header"
        "popup-content"
        "popup-footer" !important;
    grid-template-rows: var(--snoeten-popup-header-height) minmax(0, 1fr) var(--snoeten-popup-footer-height) !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Optionele tabplaat direct tussen header en content. */
.snoeten-popup-shell.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized) {
    grid-template-areas:
        "popup-header"
        "popup-tabs"
        "popup-content"
        "popup-footer" !important;
    grid-template-rows:
        var(--snoeten-popup-header-height)
        var(--snoeten-popup-tabs-height)
        minmax(0, 1fr)
        var(--snoeten-popup-footer-height) !important;
}

.snoeten-popup-shell__tabsbar {
    grid-area: popup-tabs !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--snoeten-popup-tabs-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--snoeten-popup-tabs-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-tabs-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.snoeten-popup-shell__tabs {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--snoeten-popup-tabs-height) !important;
    margin: 0 !important;
    padding: 8px 14px 7px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    box-shadow: none !important;
    scrollbar-width: thin !important;
}

.snoeten-popup-shell__tab {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    color: #202020 !important;
    font: 400 var(--base-font-size, 16px)/1.3 Tahoma, Arial, sans-serif !important;
    text-align: left !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.snoeten-popup-shell__tab::before,
.snoeten-popup-shell__tab::after {
    content: none !important;
    display: none !important;
}

.snoeten-popup-shell__tab:hover {
    color: #111111 !important;
    background: #E5F1FB !important;
    border-color: #70A9D8 !important;
    box-shadow: none !important;
}

.snoeten-popup-shell__tab:focus-visible {
    color: #111111 !important;
    outline: 1px dotted #111111 !important;
    outline-offset: -4px !important;
}

.snoeten-popup-shell__tab:is(.is-active, [aria-selected="true"]) {
    z-index: 2 !important;
    color: #111111 !important;
    font-weight: 400 !important;
    background: #D9EAF7 !important;
    border-color: #5B9BD5 !important;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9) !important;
}

.snoeten-popup-shell__tabpanel[hidden],
.snoeten-popup-shell [data-site-layout-tab-panel][hidden] {
    display: none !important;
}

.snoeten-popup-shell__header {
    grid-area: popup-header !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: var(--snoeten-popup-header-height) !important;
    margin: 0 !important;
    padding: 0 10px 0 18px !important;
    gap: 10px !important;
    overflow: hidden !important;
    color: var(--snoeten-popup-header-color) !important;
    background: var(--snoeten-popup-header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-header-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
}

.snoeten-popup-shell.is-dragging .snoeten-popup-shell__header {
    cursor: grabbing !important;
}

.snoeten-popup-shell.is-dragging,
.snoeten-popup-shell.is-resizing {
    transition: none !important;
}

.snoeten-popup-shell__header::before,
.snoeten-popup-shell__header::after {
    content: none !important;
    display: none !important;
}

.snoeten-popup-shell__title {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--snoeten-popup-header-color) !important;
    -webkit-text-fill-color: var(--snoeten-popup-header-color) !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.snoeten-popup-shell__controls {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}


.snoeten-popup-shell__controls {
    gap: 10px !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__control,
.snoeten-popup-shell__controls .guestbook-window-control,
.snoeten-popup-shell__controls .status-window-control {
    position: relative !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 25px !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    border: 1px solid #707070 !important;
    border-radius: 3px !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__control:hover,
.snoeten-popup-shell__controls .snoeten-popup-shell__control:focus-visible,
.snoeten-popup-shell__controls .guestbook-window-control:hover,
.snoeten-popup-shell__controls .guestbook-window-control:focus-visible,
.snoeten-popup-shell__controls .status-window-control:hover,
.snoeten-popup-shell__controls .status-window-control:focus-visible {
    border-color: #3c7fb1 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    box-shadow: 0 0 3px #a7d9f5 !important;
    outline: 0 !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__control:active,
.snoeten-popup-shell__controls .guestbook-window-control:active,
.snoeten-popup-shell__controls .status-window-control:active {
    background: linear-gradient(to bottom, #d5d5d5 0%, #e0e0e0 42%, #ececec 47%, #f2f2f2 100%) !important;
    box-shadow: inset 0 -1px 6px rgba(0,0,0,.18) !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__minimize::before,
.snoeten-popup-shell__controls .guestbook-window-minimize::before,
.snoeten-popup-shell__controls .status-window-minimize::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    bottom: 6px !important;
    width: 12px !important;
    height: 2px !important;
    background: #4e4e4e !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__maximize::before,
.snoeten-popup-shell__controls .guestbook-window-maximize::before,
.snoeten-popup-shell__controls .status-window-maximize::before {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 5px !important;
    width: 12px !important;
    height: 10px !important;
    box-sizing: border-box !important;
    border: 2px solid #4e4e4e !important;
    border-top-width: 3px !important;
    background: rgba(255,255,255,.42) !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__close,
.snoeten-popup-shell__controls .guestbook-window-close,
.snoeten-popup-shell__controls .status-window-close {
    border-color: #8f2923 !important;
    background: linear-gradient(to bottom, #f7aaa4 0%, #ed8178 42%, #dc5c52 47%, #c84239 100%) !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__close:hover,
.snoeten-popup-shell__controls .snoeten-popup-shell__close:focus-visible,
.snoeten-popup-shell__controls .guestbook-window-close:hover,
.snoeten-popup-shell__controls .guestbook-window-close:focus-visible,
.snoeten-popup-shell__controls .status-window-close:hover,
.snoeten-popup-shell__controls .status-window-close:focus-visible {
    border-color: #792019 !important;
    background: linear-gradient(to bottom, #ffc0bb 0%, #f58f86 42%, #e9675d 47%, #d24a40 100%) !important;
    box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__close::before,
.snoeten-popup-shell__controls .snoeten-popup-shell__close::after,
.snoeten-popup-shell__controls .guestbook-window-close::before,
.snoeten-popup-shell__controls .guestbook-window-close::after,
.snoeten-popup-shell__controls .status-window-close::before,
.snoeten-popup-shell__controls .status-window-close::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 11px !important;
    width: 14px !important;
    height: 2px !important;
    border-radius: 1px !important;
    background: #fff !important;
}

.snoeten-popup-shell__controls .snoeten-popup-shell__close::before,
.snoeten-popup-shell__controls .guestbook-window-close::before,
.snoeten-popup-shell__controls .status-window-close::before { transform: rotate(45deg) !important; }
.snoeten-popup-shell__controls .snoeten-popup-shell__close::after,
.snoeten-popup-shell__controls .guestbook-window-close::after,
.snoeten-popup-shell__controls .status-window-close::after { transform: rotate(-45deg) !important; }

.snoeten-popup-shell__content {
    grid-area: popup-content !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: var(--snoeten-popup-content-margin) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--snoeten-popup-content-bg) !important;
    border: 1px solid var(--snoeten-popup-content-border) !important;
    border-radius: var(--snoeten-popup-content-radius) !important;
    box-shadow: none !important;
}

.snoeten-popup-shell__toolbar {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.snoeten-popup-shell__body {
    position: relative !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.snoeten-popup-shell__surface {
    box-sizing: border-box !important;
    background: var(--snoeten-popup-surface-bg) !important;
    border: 0 !important;
    border-radius: var(--snoeten-popup-surface-radius) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Optionele rand voor witte werk-/schrijfplaten. */
.snoeten-popup-shell__surface--bordered {
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
}

/* Vierkante variant voor schrijf-/werkvlakken zonder afgeronde hoeken. */
.snoeten-popup-shell__surface--square {
    border-radius: 0 !important;
}

.snoeten-popup-shell__field {
    color: #222 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.snoeten-popup-shell__field:focus,
.snoeten-popup-shell__field:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.snoeten-popup-shell__field.snoeten-popup-shell__surface--bordered:focus,
.snoeten-popup-shell__field.snoeten-popup-shell__surface--bordered:focus-visible {
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
}

.snoeten-popup-shell__field[data-placeholder]:empty::before {
    content: attr(data-placeholder) !important;
    display: block !important;
    color: #8a8f96 !important;
    font: inherit !important;
    pointer-events: none !important;
}

.snoeten-popup-shell__footer {
    grid-area: popup-footer !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: var(--snoeten-popup-footer-height) !important;
    min-height: var(--snoeten-popup-footer-height) !important;
    max-height: var(--snoeten-popup-footer-height) !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: var(--snoeten-popup-footer-bg) !important;
    border: 0 !important;
    border-top: 1px solid var(--snoeten-popup-content-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.snoeten-popup-shell__footer > nav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

.snoeten-popup-shell.is-minimized {
    height: 42px !important;
    max-height: 42px !important;
    grid-template-areas: "popup-header" !important;
    grid-template-rows: 42px !important;
    background: #f19620 !important;
}

.snoeten-popup-shell.is-minimized > .snoeten-popup-shell__tabsbar,
.snoeten-popup-shell.is-minimized > .snoeten-popup-shell__content,
.snoeten-popup-shell.is-minimized > .snoeten-popup-shell__footer {
    display: none !important;
}

.snoeten-popup-shell.is-minimized > .snoeten-popup-shell__header {
    min-height: 42px !important;
}


.snoeten-popup-shell.is-maximized {
    width: calc(100vw - 40px) !important;
    max-width: none !important;
    height: calc(100dvh - 40px) !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
}

.snoeten-popup-shell .snoeten-popup-resize-handle {
    position: absolute !important;
    z-index: 40 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    touch-action: none !important;
    user-select: none !important;
}
.snoeten-popup-shell .snoeten-popup-resize-handle[data-popup-resize="nw"] { top: 0 !important; left: 0 !important; cursor: nwse-resize !important; }
.snoeten-popup-shell .snoeten-popup-resize-handle[data-popup-resize="ne"] { top: 0 !important; right: 0 !important; cursor: nesw-resize !important; }
.snoeten-popup-shell .snoeten-popup-resize-handle[data-popup-resize="sw"] { bottom: 0 !important; left: 0 !important; cursor: nesw-resize !important; }
.snoeten-popup-shell .snoeten-popup-resize-handle[data-popup-resize="se"] { right: 0 !important; bottom: 0 !important; cursor: nwse-resize !important; }
.snoeten-popup-shell:is(.is-minimized,.is-maximized) .snoeten-popup-resize-handle { display: none !important; }

@media (max-width: 700px) {
    .snoeten-popup-shell.is-open {
        --snoeten-popup-header-height: 48px;
        --snoeten-popup-footer-height: 70px;
        grid-template-rows: var(--snoeten-popup-header-height) minmax(0, 1fr) auto !important;
    }

    .snoeten-popup-shell.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized) {
        grid-template-rows:
            var(--snoeten-popup-header-height)
            var(--snoeten-popup-tabs-height)
            minmax(0, 1fr)
            auto !important;
    }

    .snoeten-popup-shell__header {
        padding-left: 12px !important;
    }

    .snoeten-popup-shell__footer {
        height: auto !important;
        min-height: var(--snoeten-popup-footer-height) !important;
        max-height: none !important;
        padding: 10px 12px !important;
    }
}





/* === POPUP-WINDOW: MIGRATED VORMGEVING CONTENT START === */
/*
   Vormgeving gebruikt geen profile-popup-media-clean / profile-unified-editor
   meer. De interne opmaak voor Afbeeldingen, Tekst en Indeling staat daarom
   nu samen met de nieuwe venster-shell in popup-window.css.
*/
/* r905 — Vormgeving > Afbeeldingen: interne inhoud van Profielfoto/Cover/Achtergrond herstellen.
   Alleen de inhoudsstructuur; de nieuwe witte Media-popup-shell blijft leidend. */

/* Subtabs + actief paneel. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tabs-shell {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtabs {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 35px !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab {
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-width: 160px !important;
    min-height: 34px !important;
    margin: 0 -1px 0 0 !important;
    padding: 6px 18px !important;
    border: 1px solid #a8a39d !important;
    border-radius: 5px 5px 0 0 !important;
    background: linear-gradient(180deg,#f7f5f2 0%,#e5e0da 100%) !important;
    color: #222 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    cursor: pointer !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab:last-child {
    margin-right: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab:hover,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab:focus-visible {
    z-index: 2 !important;
    border-color: #918b84 !important;
    background: linear-gradient(180deg,#fff 0%,#ece8e3 100%) !important;
    outline: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab:is(.is-active,[aria-selected="true"]) {
    z-index: 3 !important;
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-color: #9f9992 !important;
    border-bottom-color: #fff !important;
    background: #fff !important;
    font-weight: 700 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-surface {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-panel {
    box-sizing: border-box !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-panel[hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-panel:not([hidden]) {
    display: block !important;
}

/* Gemeenschappelijke uploadkaart in alle drie subtabs. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-card {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-heading {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-heading > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-heading h2 {
    margin: 0 0 5px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-heading p {
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .drop-area.profile-layout-drop-area {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 140px !important;
    min-height: 140px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: hidden !important;
    text-align: left !important;
    border: 2px dashed #a9b1ba !important;
    border-radius: 8px !important;
    background: #fbfbfb !important;
    cursor: pointer !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .drop-area.profile-layout-drop-area .fileInput {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-drop-icon {
    display: grid !important;
    box-sizing: border-box !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !important;
    margin: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    color: #477c9d !important;
    border-radius: 50% !important;
    background: #e7f1f6 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-drop-icon svg {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-drop-copy {
    display: grid !important;
    min-width: 0 !important;
    max-width: 520px !important;
    gap: 4px !important;
    justify-items: start !important;
    text-align: left !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-status:empty {
    display: none !important;
}

/* Cover: inklapvelden, positie-preview en glans weer volledig structureren. */
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-placement {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details + .profile-cover-setting-details {
    margin-top: 6px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details > summary {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    align-items: center !important;
    gap: 10px !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 700 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details > summary::-webkit-details-marker {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details > summary::before {
    order: 1 !important;
    display: block !important;
    height: 1px !important;
    min-width: 20px !important;
    flex: 1 1 auto !important;
    content: "" !important;
    background: #cfcfcf !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details > summary::after {
    order: 2 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 2px 0 0 !important;
    flex: 0 0 auto !important;
    content: "" !important;
    border-top: 6px solid #444 !important;
    border-right: 5px solid transparent !important;
    border-bottom: 0 !important;
    border-left: 5px solid transparent !important;
    background: transparent !important;
    transform: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-details[open] > summary::after {
    transform: rotate(180deg) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-setting-content {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 0 14px !important;
    border: 0 !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-position-track {
    position: relative !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 112px !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
    cursor: grab !important;
    border: 1px solid #b9c2cb !important;
    border-radius: 7px !important;
    background: #dfe4e9 !important;
    touch-action: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-position-track.is-dragging { cursor: grabbing !important; }
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-position-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: var(--profile-cover-preview-position,50%) center !important;
    border: 0 !important;
    pointer-events: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-position-row {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    width: 100% !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-position-row input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-scale-toggle {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    align-items: center !important;
    gap: 9px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-scale-toggle[hidden],
html body #layoutEdit.snoeten-popup-shell--profile-layout [data-cover-position-controls][hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-control {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-switch.switch {
    position: relative !important;
    display: inline-block !important;
    width: 48px !important;
    height: 26px !important;
    flex: 0 0 48px !important;
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-switch.switch input {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-switch.switch .slider {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 13px !important;
    background: #cc0000 !important;
    cursor: pointer !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-switch.switch .slider::before {
    position: absolute !important;
    left: 3px !important;
    bottom: 3px !important;
    width: 20px !important;
    height: 20px !important;
    content: "" !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: transform .2s ease !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-switch.switch input:checked + .slider {
    background: #66bb6a !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-cover-gloss-switch.switch input:checked + .slider::before {
    transform: translateX(22px) !important;
}

/* Achtergrondmaker: patronen/velden/preview weer als normale twee-koloms tool. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 0 !important;
    padding: 18px !important;
    border: 1px solid #d3d7dc !important;
    border-radius: 8px !important;
    background: #fff !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-heading {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e4e8 !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-heading h3 { margin: 0 !important; }
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-heading p { margin: 5px 0 0 !important; }
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(300px,38%) !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-controls,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-preview-wrap {
    min-width: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-patterns {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-patterns legend {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-weight: 700 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
    max-height: 294px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    align-content: start !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-option {
    position: relative !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    min-height: 52px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    align-items: center !important;
    border: 1px solid #b9bec4 !important;
    border-radius: 5px !important;
    background: #f7f7f7 !important;
    cursor: pointer !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-option.is-selected {
    border-color: #777 !important;
    background: #e7e7e7 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-option input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-swatch {
    display: block !important;
    width: 44px !important;
    height: 34px !important;
    border: 1px solid #bfc4c8 !important;
    border-radius: 3px !important;
    background-color: #f2f2f2 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(.profile-background-color-grid,.profile-background-text-grid,.profile-background-slider-grid) {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(.profile-background-color-field,.profile-background-text-field,.profile-background-slider-field) {
    display: block !important;
    min-width: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-color-control {
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    gap: 7px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-color-control input[type="color"] {
    box-sizing: border-box !important;
    width: 46px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 2px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(.profile-background-color-control input[type="text"],.profile-background-text-field input) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-slider-field input[type="range"] {
    width: 100% !important;
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-preview-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages canvas.profile-background-creator-preview {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 8 / 5 !important;
    max-width: 100% !important;
    border: 1px solid #adb3b9 !important;
    border-radius: 5px !important;
    background: #f2f2f2 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-preview-hint {
    display: block !important;
    margin-top: 6px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e1e4e8 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-status {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-status:empty { display: none !important; }

@media (max-width: 900px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-layout {
        grid-template-columns: 1fr !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}
@media (max-width: 720px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-surface {
        padding: 14px !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .drop-area.profile-layout-drop-area {
        min-height: 140px !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-drop-copy {
        justify-items: center !important;
        text-align: center !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(.profile-background-color-grid,.profile-background-text-grid,.profile-background-slider-grid) {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   r906 — VORMGEVING > TEKST inhoud herstellen
   Alleen structurele inhoud; popup-shell blijft r905.
   ========================================================= */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance:not([hidden]) {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: visible !important;
    background: #fff !important;
}

/* Compact profielvoorbeeld. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview {
    --profile-preview-text: #222;
    position: relative !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 280px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--profile-preview-text) !important;
    font-family: var(--profile-preview-font-family, var(--base-font, Tahoma, Arial, sans-serif)) !important;
    font-size: var(--profile-preview-font-size, var(--base-font-size, 16px)) !important;
    background-color: #e7e7e7 !important;
    background-image: var(--profile-preview-background, none) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 1px solid #cbd1d7 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 170px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #7893ba, #4b72aa) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-cover::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    height: 72px !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.38)) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-avatar {
    position: absolute !important;
    z-index: 2 !important;
    left: 18px !important;
    bottom: 16px !important;
    box-sizing: border-box !important;
    width: 88px !important;
    height: 88px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 4px solid #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.24) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-identity {
    position: absolute !important;
    z-index: 2 !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 120px !important;
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
    color: var(--profile-preview-text) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.42) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-identity strong {
    overflow: hidden !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-identity span {
    font-family: inherit !important;
    font-size: inherit !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-content {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    padding: 18px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-copy {
    display: flex !important;
    width: min(520px,100%) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
    color: var(--profile-preview-text) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-copy :is(strong,span,a) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-copy strong { font-weight: 700 !important; }
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-copy a {
    width: fit-content !important;
    text-decoration: underline !important;
    pointer-events: none !important;
}

/* Opties onder preview: twee nette kaarten, zonder uitrekken. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-settings-grid {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-option-card {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid #d3d8dd !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-option-card h2 {
    margin: 0 0 6px !important;
    font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 700 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-options-help {
    margin: 0 0 14px !important;
}

/* Tekstkleur. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .color-row {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance #colorDisplay {
    display: block !important;
    box-sizing: border-box !important;
    width: 46px !important;
    height: 42px !important;
    border: 1px solid #aeb7c0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance #colorPicker {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance #textColorInput {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    color: #202833 !important;
    background: #fff !important;
    border: 1px solid #aeb7c0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance #textColorInput:focus {
    border-color: #5b9bd5 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(91,155,213,.14) !important;
}

/* Lettertype + tekstgrootte. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-typography-fields {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-typography-field {
    display: grid !important;
    min-width: 0 !important;
    gap: 7px !important;
    font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-typography-field > span {
    font: inherit !important;
    font-weight: 700 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-typography-field select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    color: #25282c !important;
    background: #fff !important;
    border: 1px solid #c9d0d8 !important;
    border-radius: 4px !important;
    font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance :is(#colorStatus,#typographyStatus).status-box {
    width: 100% !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance :is(#colorStatus,#typographyStatus).status-box:empty {
    display: none !important;
}

@media (max-width: 760px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance {
        padding: 14px !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-settings-grid,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-typography-fields {
        grid-template-columns: minmax(0,1fr) !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview {
        min-height: 250px !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-cover {
        min-height: 145px !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-avatar {
        width: 76px !important;
        height: 76px !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-text-preview-identity {
        left: 108px !important;
    }
}



/* Indeling-tab: interne drag/drop-kaarten. */
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-section-heading--compact {
    margin-bottom: 10px !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-removed {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 48px;
    margin: 0 0 12px;
    padding: 8px 10px;
    align-items: center;
    gap: 12px;
    color: #222;
    font-family: var(--base-font, Tahoma, Arial, sans-serif);
    font-size: var(--base-font-size, 14px);
    background: #f1f1f1;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-removed > strong {
    flex: 0 0 auto;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-removed-list {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-removed-empty {
    color: #666;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-manager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout :is(.profile-layout-manager-column, .profile-layout-manager-wide) {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 10px;
    background: #f3f3f3;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    transition: background .12s ease, border-color .12s ease;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-wide {
    grid-column: 1 / -1;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout :is(.profile-layout-manager-column, .profile-layout-manager-wide).is-drag-over {
    background: #eaf4fb;
    border-color: #6ba5d3;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout :is(.profile-layout-manager-column, .profile-layout-manager-wide) > h2 {
    margin: 0 0 8px;
    padding: 0;
    color: #222;
    font-family: var(--base-font, Tahoma, Arial, sans-serif);
    font-size: var(--base-font-size, 14px);
    font-weight: 700;
    line-height: 1.35;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-zone {
    display: flex;
    min-height: 48px;
    flex-direction: column;
    gap: 7px;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-wide .profile-layout-manager-zone {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-block {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 6px 6px 6px 9px;
    align-items: center;
    gap: 8px;
    color: #222;
    font-family: var(--base-font, Tahoma, Arial, sans-serif);
    font-size: var(--base-font-size, 14px);
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    cursor: grab;
    user-select: none;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-block:active {
    cursor: grabbing;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-block.is-dragging {
    opacity: .5;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-block-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-empty {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 12px;
    color: #777;
    font: inherit;
    text-align: center;
    background: rgba(255, 255, 255, .55);
    border: 1px dashed #c9c9c9;
    border-radius: 3px;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-actions {
    display: flex;
    margin-top: 12px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-manager-status,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-reset-status,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-manager-status,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-reset-status {
    margin: 0;
    padding: 0;
    min-height: 0;
    background: transparent;
    border: 0;
}

[data-profile-hidden-block-pool] {
    display: none !important;
}

@media (max-width: 720px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout.profile-unified-editor .profile-layout-editor-field {
        padding: 8px !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-manager {
        grid-template-columns: 1fr;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-wide {
        grid-column: auto;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-manager-wide .profile-layout-manager-zone {
        grid-template-columns: 1fr;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-removed {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}
/* === POPUP-WINDOW: MIGRATED VORMGEVING CONTENT END === */

/* Vormgeving: compacter dan Profielgegevens, met interne scroll voor de uitgebreidere panelen. */
.snoeten-popup-shell--profile-layout {
    --snoeten-popup-width: min(980px, calc(100vw - 40px));
    --snoeten-popup-max-width: 980px;
    --snoeten-popup-height: min(700px, calc(100dvh - 40px));
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-tabs-height: 50px;
    --snoeten-popup-footer-height: 64px;
    --snoeten-popup-content-margin: 0px;
}

/* De vormgevingsinhoud mag scrollen binnen de nieuwe shell; vensterchrome blijft volledig in popup-window.css. */
html body #layoutEdit.snoeten-popup-shell--profile-layout > .snoeten-popup-shell__content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Oude Media-inhoudsregels mogen de nieuwe shellmarge en -achtergrond niet opheffen. */
html body #layoutEdit.snoeten-popup-shell--profile-layout > .snoeten-popup-shell__content.profile-layout-editor-content {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--snoeten-popup-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Vormgeving > Afbeeldingen: de subtabs staan boven de witte inhoudsplaat. */
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar {
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 0 !important;
    overflow: hidden !important;
    background: var(--snoeten-popup-content-bg) !important;
    border: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar[hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar + .profile-layout-editor-field {
    margin: 0 10px 10px !important;
    width: auto !important;
    min-height: 0 !important;
    background: var(--snoeten-popup-surface-bg) !important;
    border: 1px solid var(--snoeten-popup-surface-border) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar:not([hidden]) + .profile-layout-editor-field {
    border-top-left-radius: 0 !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout > .snoeten-popup-shell__content > .snoeten-popup-shell__body.profile-layout-editor-field {
    min-height: 0 !important;
    background: var(--snoeten-popup-surface-bg) !important;
}

/* Vormgeving: voorkom dat interne onderdelen buiten het compactere popupvenster lopen.
   De inhoud reageert op de breedte van de popup zelf, ook nadat het venster is versleept/resized. */
.snoeten-popup-shell--profile-layout {
    container-type: inline-size !important;
    container-name: snoeten-profile-layout-popup !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-editor-field,
html body #layoutEdit.snoeten-popup-shell--profile-layout [data-layout-panel],
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-tabs-shell,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-tab-surface,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-upload-card,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-background-creator,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-background-creator-layout,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-settings-grid,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-typography-fields,
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-block-manager {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* De drie Afbeeldingen-subtabs mogen nooit de witte plaat uit steken. */
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtabs {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Formuliervelden, previews en afbeeldingen blijven binnen de beschikbare inhoudsbreedte. */
html body #layoutEdit.snoeten-popup-shell--profile-layout :is(input, select, textarea, canvas, img) {
    max-width: 100% !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout :is(
    .profile-layout-upload-heading,
    .profile-layout-drop-area,
    .profile-cover-placement,
    .profile-cover-setting-content,
    .profile-background-creator-controls,
    .profile-background-creator-preview-wrap,
    .profile-layout-text-preview,
    .profile-layout-option-card,
    .profile-layout-manager-column,
    .profile-layout-manager-wide,
    .profile-layout-manager-zone,
    .profile-layout-manager-actions
) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

@container snoeten-profile-layout-popup (max-width: 760px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-layout,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-settings-grid,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-typography-fields,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder .profile-layout-block-manager {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder .profile-layout-manager-wide {
        grid-column: auto !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@container snoeten-profile-layout-popup (max-width: 560px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout > .snoeten-popup-shell__content > .snoeten-popup-shell__body.profile-layout-editor-field {
        padding: 12px !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-surface,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance:not([hidden]) {
        padding: 12px !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-pattern-grid,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(.profile-background-color-grid,.profile-background-text-grid,.profile-background-slider-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-actions,
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder .profile-layout-manager-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* =========================================================
   Bio aanpassen — volledig op de gedeelde popup-window shell.
   De vensterchrome, overlay, werkruimte en footer komen uit dit bestand;
   alleen de WYSIWYG-inhoud houdt zijn bestaande functionele classes.
   ========================================================= */
.snoeten-popup-shell--profile-bio {
    --snoeten-popup-width: min(1000px, calc(100vw - 40px));
    --snoeten-popup-max-width: 1000px;
    --snoeten-popup-height: min(700px, calc(100dvh - 40px));
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-footer-height: 64px;
    --snoeten-popup-content-margin: 0px;
    --snoeten-popup-content-bg: #BCDDF5;
}

html body #bioEdit.snoeten-popup-shell--profile-bio > .profile-bio-popup-content.snoeten-popup-shell__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* WYSIWYG-lint direct boven het witte schrijfvlak. */
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-content-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-ribbon {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 12px 7px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    border: 0 !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-ribbon-group {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 32px 14px !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding: 0 9px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    border: 0 !important;
    border-right: 1px solid #D0D0D0 !important;
    background: transparent !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-ribbon-group:last-child {
    border-right: 0 !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-ribbon-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-ribbon-label {
    display: block !important;
    width: 100% !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #555 !important;
    font: 600 10px/14px var(--base-font, Tahoma, Arial, sans-serif) !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Bio-toolbarbuttons gebruiken uitsluitend de globale .button-opmaak. */

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-tool-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-letter-icon {
    display: inline-grid !important;
    min-width: 19px !important;
    min-height: 19px !important;
    place-items: center !important;
    color: currentColor !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-letter-icon.is-italic { font-style: italic !important; }
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-letter-icon.is-underline { text-decoration: underline !important; }
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-letter-icon.is-strike { text-decoration: line-through !important; }

html body #bioEdit.snoeten-popup-shell--profile-bio #profileBioEditorContent.snoeten-popup-shell__body {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    gap: 10px !important;
    overflow: hidden !important;
    background: #BCDDF5 !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio #profileBioEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio #bioEditField {
    position: static !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    position: static !important;
    box-sizing: border-box !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
    display: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-surface-border) !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) h2 {
    margin: 0 !important;
    padding: 0 !important;
    font: 700 var(--base-font-size, 16px)/1.3 var(--base-font, Comfortaa, Arial, sans-serif) !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
}

/* Footer bevat alleen gewone globale .button-knoppen. */
html body #bioEdit.snoeten-popup-shell--profile-bio > .snoeten-popup-shell__footer {
    display: flex !important;
    grid-template-columns: none !important;
}

@media (max-width: 760px) {
    .snoeten-popup-shell--profile-bio {
        --snoeten-popup-width: calc(100vw - 16px);
        --snoeten-popup-height: calc(100dvh - 16px);
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio #profileBioEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(220px, 1fr) minmax(180px, .8fr) !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}


/* =========================================================
   POPUP-WINDOW r1119 — gedeelde scrollplaat + betrouwbare tabs
   ---------------------------------------------------------
   - De blauwe #BCDDF5-laag is in iedere nieuwe popup de scrollviewport.
   - De inhoudsplaat ligt daarbinnen; scrollbars horen dus visueel bij blauw.
   - [hidden] is altijd leidend voor popup-tabpanelen, ook tegenover oude CSS.
   ========================================================= */

/* Nooit een verborgen tabpaneel door oude display-regels laten terugkomen. */
.snoeten-popup-shell [role="tabpanel"][hidden],
.snoeten-popup-shell [data-layout-panel][hidden],
.snoeten-popup-shell [data-profile-image-panel][hidden],
.snoeten-popup-shell [data-profile-details-panel][hidden],
.snoeten-popup-shell [data-site-layout-tab-panel][hidden] {
    display: none !important;
}

/* De blauwe plaat is voortaan in alle popup-window popups de hoofd-scrollviewport. */
html body .snoeten-popup-shell > .snoeten-popup-shell__content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    background: #BCDDF5 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scrollbar-color: #8EAAB4 #BCDDF5;
}
html body .snoeten-popup-shell > .snoeten-popup-shell__content::-webkit-scrollbar-track {
    background: #BCDDF5 !important;
}
html body .snoeten-popup-shell > .snoeten-popup-shell__content::-webkit-scrollbar-thumb {
    background: #8EAAB4 !important;
    border: 2px solid #BCDDF5 !important;
    border-radius: 8px !important;
}

/* Een body is de inhoudsplaat binnen de blauwe scrollviewport. */
html body .snoeten-popup-shell > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Profielgegevens: de witte werkplaat blijft wit, maar scrollt niet meer zelf. */
html body #detailsModal.snoeten-popup-shell > .snoeten-popup-shell__content > .profile-details-popup-body {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    background: #fff !important;
}

/* Indeling aanpassen: ook hier zit de scrollbar op de blauwe buitenplaat. */
html body [data-site-layout-window].snoeten-popup-shell > .site-layout-dialog-content.snoeten-popup-shell__content {
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
}
html body [data-site-layout-window].snoeten-popup-shell .site-layout-dialog-body.snoeten-popup-shell__body {
    display: block !important;
    padding: 18px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
}

/* Vormgeving: subtabs staan op de blauwe plaat, BOVEN de #D9E6EA inhoudsplaat. */
html body #layoutEdit.snoeten-popup-shell--profile-layout > .profile-layout-editor-content.snoeten-popup-shell__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtabs {
    margin: 0 0 -1px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout > .profile-layout-editor-content > .profile-layout-editor-field.snoeten-popup-shell__body {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar[hidden] + .profile-layout-editor-field {
    margin-top: 0 !important;
}

/* Hoofdtabbladen Vormgeving: één actief paneel tegelijk, zonder legacy-display. */
html body #layoutEdit.snoeten-popup-shell--profile-layout [data-layout-panel][hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages:not([hidden]) {
    display: block !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance:not([hidden]),
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder:not([hidden]) {
    display: flex !important;
}

/* Bio: geen scrollbar meer op de binnenplaat/editor; de blauwe contentlaag scrollt. */
html body #bioEdit.snoeten-popup-shell--profile-bio > .profile-bio-popup-content.snoeten-popup-shell__content {
    display: block !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    margin: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio #profileBioEditorContent.snoeten-popup-shell__body {
    height: auto !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio #bioEditField {
    height: auto !important;
    min-height: 400px !important;
    overflow: visible !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    overflow: visible !important;
}

/* Prikbordbericht plaatsen gebruikt dezelfde regel: scroll op #BCDDF5, niet in het witte schrijfvak. */
html body #form-posts #dashboardComposer.snoeten-popup-shell > .dashboard-post-compose-content.snoeten-popup-shell__content {
    display: block !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
}
html body #form-posts #dashboardComposer.snoeten-popup-shell > .dashboard-post-compose-content > .profile-bio-editor-content.snoeten-popup-shell__body {
    height: auto !important;
    min-height: 430px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
}
html body #form-posts #dashboardComposer.snoeten-popup-shell > .dashboard-post-compose-content > .profile-bio-editor-content > .profile-bio-editor-field {
    height: auto !important;
    min-height: 400px !important;
    overflow: visible !important;
}

/* =========================================================
   POPUP-WINDOW r1121 — Vormgeving subtabs + vaste scrolllaag
   ---------------------------------------------------------
   - Profielfoto / Cover / Achtergrond staan op de blauwe
     #BCDDF5-scrolllaag, direct BOVEN de #D9E6EA-inhoudsplaat.
   - De subtabs bestaan uitsluitend onder Afbeeldingen.
   - De scrollbar blijft op .snoeten-popup-shell__content;
     de D9E6EA-plaat zelf krijgt nooit de hoofdscrollbar.
   ========================================================= */
html body #layoutEdit.snoeten-popup-shell--profile-layout > .profile-layout-editor-content.snoeten-popup-shell__content {
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar {
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar[hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtabs {
    margin: 0 0 -1px !important;
    padding: 0 !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtab:is(.is-active,[aria-selected="true"]) {
    background: #D9E6EA !important;
    border-bottom-color: #D9E6EA !important;
}

/* De plaat onder de subtabs is altijd #D9E6EA. Bij Tekst/Indeling
   schuift deze rechtstreeks naar boven omdat de subtabs dan hidden zijn. */
html body #layoutEdit.snoeten-popup-shell--profile-layout > .profile-layout-editor-content > .profile-layout-editor-field.snoeten-popup-shell__body {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar:not([hidden]) + .profile-layout-editor-field {
    min-height: calc(100% - 37px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar[hidden] + .profile-layout-editor-field {
    min-height: 100% !important;
}


/* =========================================================
   POPUP-WINDOW r1122 — Vormgeving één plaat + Bio toolbar in plaat
   ========================================================= */

/* Vormgeving: de #D9E6EA inhoudsplaat blijft, maar zonder een tweede
   omlijnde blauwe laag. De scrollbar blijft op de buitenste #BCDDF5-laag. */
html body #layoutEdit.snoeten-popup-shell--profile-layout
> .profile-layout-editor-content
> .profile-layout-editor-field.snoeten-popup-shell__body {
    background: #D9E6EA !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout
:is(#profileLayoutImages,#profileLayoutAppearance,#profileLayoutBlockOrder) {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Bio: de WYSIWYG hoort bij dezelfde #D9E6EA-plaat als het invoerveld. */
html body #bioEdit.snoeten-popup-shell--profile-bio
> .profile-bio-popup-content.snoeten-popup-shell__content
> #profileBioEditorContent.snoeten-popup-shell__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
}

/* WYSIWYG: geen losse grijze balk, rand, schaduw of decoratieve groepsvlakken. */
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > .profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > .profile-bio-editor-toolbar .profile-bio-ribbon {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > .profile-bio-editor-toolbar .profile-bio-ribbon-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Alleen de eigenlijke WYSIWYG-knoppen; de extra groepslabels verdwijnen. */
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > .profile-bio-editor-toolbar .profile-bio-ribbon-label {
    display: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > .profile-bio-editor-toolbar .profile-bio-ribbon-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Het witte bio-invoerveld staat direct onder de WYSIWYG. */
html body #bioEdit.snoeten-popup-shell--profile-bio #bioEditField {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 400px !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
:is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

@media (max-width: 760px) {
    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(220px, 1fr) minmax(180px, .8fr) !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio #bioEditField {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}


/* =========================================================
   POPUP-WINDOW r1123 — één blauwe scrollplaat, scrollbar aan rand
   ---------------------------------------------------------
   De popup-content vult de volledige breedte van het venster.
   Geen tweede #BCDDF5-laag door margin/border van legacy CSS.
   De scrollbar zit daardoor direct tegen de rechter popup-rand.
   ========================================================= */
html body .snoeten-popup-shell > .snoeten-popup-shell__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #BCDDF5 !important;
    scrollbar-gutter: auto !important;
}

/* Vormgeving: legacy profielregels hadden meer specificiteit en maakten
   opnieuw een 10px blauwe buitenrand + contentborder. */
html body #layoutEdit.snoeten-popup-shell--profile-layout
> .profile-layout-editor-content.snoeten-popup-shell__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #BCDDF5 !important;
    scrollbar-gutter: auto !important;
}

/* Bio: dezelfde scrollviewport zonder buitenmarge. */
html body #bioEdit.snoeten-popup-shell--profile-bio
> .profile-bio-popup-content.snoeten-popup-shell__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #BCDDF5 !important;
    scrollbar-gutter: auto !important;
}

/* Prikbordbericht plaatsen had nog een tweemaal-ID specifieke oude marge/rand. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
> .dashboard-post-compose-content.snoeten-popup-shell__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #BCDDF5 !important;
    scrollbar-gutter: auto !important;
}

/* Profielgegevens en Indeling aanpassen volgen exact dezelfde randloze
   scrollviewport. */
html body #detailsModal.snoeten-popup-shell
> .profile-details-popup-content.snoeten-popup-shell__content,
html body [data-site-layout-window].snoeten-popup-shell
> .site-layout-dialog-content.snoeten-popup-shell__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #BCDDF5 !important;
    scrollbar-gutter: auto !important;
}

/* =========================================================
   POPUP-WINDOW r1124 — rand D9E6EA + Prikbord WYSIWYG in plaat
   ========================================================= */

/* De #D9E6EA-inhoudsplaat heeft overal weer één duidelijke blauwgrijze rand.
   De buitenste #BCDDF5-scrollviewport blijft randloos. */
html body #layoutEdit.snoeten-popup-shell--profile-layout
> .profile-layout-editor-content
> .profile-layout-editor-field.snoeten-popup-shell__body,
html body #bioEdit.snoeten-popup-shell--profile-bio
> .profile-bio-popup-content.snoeten-popup-shell__content
> #profileBioEditorContent.snoeten-popup-shell__body,
html body #form-posts #dashboardComposer.snoeten-popup-shell
> .dashboard-post-compose-content.snoeten-popup-shell__content
> #profileBioEditorContent.snoeten-popup-shell__body,
html body [data-site-layout-window].snoeten-popup-shell
.site-layout-dialog-body.snoeten-popup-shell__body {
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Prikbordbericht plaatsen: WYSIWYG en schrijfveld vormen samen één
   #D9E6EA-plaat. De toolbar staat direct boven het witte schrijfveld. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
> .dashboard-post-compose-content.snoeten-popup-shell__content
> #profileBioEditorContent.snoeten-popup-shell__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions.profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon,
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group,
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-buttons {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon {
    margin: 0 !important;
    padding: 0 !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditField {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 400px !important;
    margin: 0 !important;
}

/* Wanneer Plaatjes of Emoji wordt geopend, blijft de toolbar boven beide kolommen. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

@media (max-width: 760px) {
    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(220px, 1fr) minmax(180px, .8fr) !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent > #bioEditField {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

/* Oude Windows-dialog toolbarplaatsing mag de geneste Prikbord-toolbar niet
   terug naar een losse grid-area trekken. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions.profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-area: auto !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
}
/* === POPUP-WINDOW r1125 — Bio = Prikbord WYSIWYG + D9E6EA kaarten === */

/* Bio aanpassen: neem de WYSIWYG-indeling van Prikbordbericht plaatsen over,
   maar houd de werkbalk transparant binnen de D9E6EA-plaat. */
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions.profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-end !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group {
    position: static !important;
    box-sizing: border-box !important;
    display: grid !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    grid-template-columns: minmax(0, auto) !important;
    grid-template-rows: 32px 14px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 2px !important;
    row-gap: 5px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid #aebdc3 !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group:first-child {
    padding-left: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-buttons {
    box-sizing: border-box !important;
    display: flex !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-label {
    position: static !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    grid-row: 2 !important;
    overflow: hidden !important;
    color: #555 !important;
    font: 600 10px/14px "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* De WYSIWYG-knoppen blijven gewone .button-knoppen; alleen de maat/uitlijning
   is gelijk aan Prikbordbericht plaatsen. Geen tweede kleur- of glowstijl. */
html body #bioEdit.snoeten-popup-shell--profile-bio
#profileBioEditorContent > #bioEditOptions button.button {
    box-sizing: border-box !important;
    display: inline-grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 4px !important;
    place-items: center !important;
    vertical-align: top !important;
}

@media (max-width: 700px) {
    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin !important;
    }
    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group {
        flex: 0 0 auto !important;
    }
}

/* Profielgegevens: verwijder de witte hoofdplaat. De kaarten zelf zijn D9E6EA
   met de gedeelde popup-rand; de oude 20px padding van de witte wrapper vervalt. */
html body #detailsModal.snoeten-popup-shell--profile-details
> .profile-details-popup-content.snoeten-popup-shell__content
> .profile-details-popup-body.snoeten-popup-shell__body {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #detailsModal.snoeten-popup-shell--profile-details
:is(.profile-details-vormgeving-field-card,.profile-details-vormgeving-account-card) {
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78) !important;
    background-clip: padding-box !important;
}

/* Vormgeving: hetzelfde principe als Profielgegevens. Geen witte hoofdplaat;
   de functionele kaarten zijn D9E6EA met dezelfde rand. */
html body #layoutEdit.snoeten-popup-shell--profile-layout
> .profile-layout-editor-content.snoeten-popup-shell__content
> .profile-layout-editor-field.snoeten-popup-shell__body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-image-tab-surface {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages
:is(.profile-layout-upload-card,.profile-background-creator),
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-option-card,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder
:is(.profile-layout-removed,.profile-layout-manager-column,.profile-layout-manager-wide) {
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* De voormalige witte uploadkaart heeft nu zelf de binnenruimte die eerst
   op de witte buitenplaat zat. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-layout-upload-card {
    padding: 14px !important;
}

/* Tekst en Indeling hebben geen witte paneelachtergrond/padding meer. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance:not([hidden]),
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder:not([hidden]) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance:not([hidden]) {
    gap: 12px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder:not([hidden]) {
    flex-direction: column !important;
}

/* De actieve Afbeeldingen-subtab sluit aan op de D9E6EA-kaart eronder. */
html body #layoutEdit.snoeten-popup-shell--profile-layout
.profile-image-subtabs-bar .profile-image-subtab:is(.is-active,[aria-selected="true"]) {
    background: #D9E6EA !important;
    border-bottom-color: #D9E6EA !important;
}


/* =========================================================
   r1125a — Bio aanpassen: Plaatjes + Emoji exact dezelfde
   layout als Prikbordbericht plaatsen.
   ========================================================= */
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 360px !important;
    height: 100% !important;
    max-height: calc(100dvh - 200px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 0 !important;
    border-left: 1px solid #d5dbe0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] { display: none !important; }
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 8px 12px 8px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #d5dbe0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) h2 {
    margin: 0 !important;
    color: #222222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-close,.profile-bio-emoji-close,[data-bio-picture-close],[data-bio-emoji-close]) {
    width: 34px !important;
    min-width: 34px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio :is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-panel-body { overflow: auto !important; }
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-storage {
    display: block !important;
    margin: 0 0 10px !important;
    color: #555 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    line-height: 1.4 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-panel-body .photo-manager-ui {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #ffffff !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-panel-body .picture-list {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-panel-body .picture-list > .profile-bio-picture-card {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #d5dbe0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-preview {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-height: 170px !important;
    aspect-ratio: 4 / 3 !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    background-color: #fff !important;
    background-image: linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%) !important;
    background-position: 0 0,0 8px,8px -8px,-8px 0 !important;
    background-size: 16px 16px !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-preview img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-card-actions {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f3f0e9 !important;
    border-top: 1px solid #d5dbe0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    background: linear-gradient(to bottom,#f2f2f2 0%,#ebebeb 42%,#dddddd 47%,#cfcfcf 100%) !important;
    border: 1px solid #707070 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action:is(:hover,:focus-visible) {
    color: #000 !important;
    background: linear-gradient(to bottom,#eaf6fd 0%,#d9f0fc 42%,#bee6fd 47%,#bce5fc 58%,#a7d9f5 100%) !important;
    border-color: #3c7fb1 !important;
    outline: 0 !important;
    box-shadow: 0 0 3px #a7d9f5 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-picture-card-action svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .picture-upload-drop {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
    color: #5c5c5c !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 2px dashed #aaa !important;
    border-radius: 8px !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .picture-upload-drop-icon {
    width: 42px !important;
    height: 42px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body {
    display: block !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .profile-bio-emoji-popover,
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-picker {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar {
    position: relative !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button { display: none !important; }
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 160px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    background: #ffffff !important;
    border: 1px solid #a9a39c !important;
    border-bottom-color: #ffffff !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):is(:hover,:focus-visible) {
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    background: #ffffff !important;
    border-color: #a9a39c !important;
    border-bottom-color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    flex: 0 0 38px !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    place-items: center !important;
    color: #333333 !important;
    background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
    border: 1px solid #a9a39c !important;
    border-radius: 0 4px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #444444 !important;
    fill: currentColor !important;
    stroke: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select option {
    color: #222222 !important;
    background: #ffffff !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    align-content: start !important;
    gap: 7px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #a9a39c !important;
    border-radius: 0 4px 4px 4px !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 5px !important;
    place-items: center !important;
    color: #111 !important;
    font: 400 24px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1px solid #aaa !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 1px 0 #fff !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
    background: #e8f2ff !important;
    border-color: #316ac5 !important;
    outline: 1px dotted #111 !important;
    outline-offset: -4px !important;
}

/* Bio + Prikbord: actieve Emoji-tab heeft ook rechtsboven radius. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]),
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Bio sluitknop: harde CSS fallback. */
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-controls > button.bio-window-close {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 1px solid #8f2923 !important;
    background: linear-gradient(to bottom,#f7aaa4 0%,#ed8178 42%,#dc5c52 47%,#c84239 100%) !important;
    background-color: #c84239 !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-controls > button.bio-window-close:is(:hover,:focus-visible) {
    border-color: #792019 !important;
    background: linear-gradient(to bottom,#ffc0bb 0%,#f58f86 42%,#e9675d 47%,#d24a40 100%) !important;
    background-color: #d24a40 !important;
    box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}


/* =========================================================
   r927 — Prikbord: Emoji zonder rand + hover exact als Bio.
   Prikbord plaatje bewerken gebruikt dezelfde popup-layout
   als de Bio-variant door de losse picture-editor selectors
   ook op de status/guestbook overlay te forceren.
   ========================================================= */

/* Prikbord Emoji: geen rand op de tegels of img; hover exact zoals Bio aanpassen. */
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid {
    border: 1px solid #a9a39c !important;
    border-radius: 0 4px 4px 4px !important;
    background: #ffffff !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
    background: #dceefd !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button img,
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button .emoji,
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button .emoji-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* r929 — Plaatje bewerken: extra r927 override verwijderd.
   Bio en Prikbord gebruiken weer de stabiele gedeelde r926-layout. */

/* =========================================================
   r928 — Profielgegevens: introductieblok weg + veldkaarten lichtgrijs.
   ========================================================= */
html body #detailsModal.profile-popup-media-clean .profile-details-panel-heading {
    display: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-panel {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-form-grid,
html body #detailsModal.profile-popup-media-clean .profile-details-account-list,
html body #detailsModal.profile-popup-media-clean .profile-details-account-form-grid {
    display: grid !important;
    gap: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-field-card,
html body #detailsModal.profile-popup-media-clean .profile-details-account-card,
html body :is(#emailModal,#passwordModal,#plusModal).profile-popup-media-clean :is(.profile-details-account-form,.profile-details-help-card,.profile-details-account-card) {
    box-sizing: border-box !important;
    background: #f3f3f3 !important;
    border: 1px solid #cfd5d9 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-field-card {
    padding: 14px 14px 16px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-account-card,
html body :is(#emailModal,#passwordModal,#plusModal).profile-popup-media-clean :is(.profile-details-account-form,.profile-details-help-card,.profile-details-account-card) {
    padding: 16px !important;
}


/* r930 — Prikbord Emoji hover/focus exact gelijk aan Bio aanpassen. */
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button {
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
    background: #f7f5f2 !important;
    border-color: #a8a39d !important;
    box-shadow: none !important;
    outline: 0 !important;
}


/* =========================================================
   r931 — Prikbord Emoji volledig gelijk aan de goede Bio-versie.
   ========================================================= */
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body {
    display: block !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .profile-bio-emoji-popover,
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-picker {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    overflow: visible !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button { display: none !important; }
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 160px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    background: #ffffff !important;
    border: 1px solid #a9a39c !important;
    border-bottom-color: #ffffff !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):is(:hover,:focus-visible) {
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
    background: #ffffff !important;
    border-color: #a9a39c !important;
    border-bottom-color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    flex: 0 0 38px !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    place-items: center !important;
    color: #333333 !important;
    background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
    border: 1px solid #a9a39c !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #444444 !important;
    fill: currentColor !important;
    stroke: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select option {
    color: #222222 !important;
    background: #ffffff !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid {
    box-sizing: border-box !important;
    display: grid !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
    background: #ffffff !important;
    border: 1px solid #9f9992 !important;
    border-radius: 0 4px 4px 4px !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    color: #111111 !important;
    font: 400 23px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
    background: #f7f5f2 !important;
    border-color: #a8a39d !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button img,
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button .emoji,
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button .emoji-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #bioEdit.snoeten-popup-shell--profile-bio .profile-bio-emoji-panel-body .emoji-grid button.is-image-emoji img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: auto !important;
    object-fit: contain !important;
}

/* =========================================================
   Prikbordcomposer — volledige WYSIWYG + gelijke witte platen
   ========================================================= */

/* De WYSIWYG is altijd de volledige bovenste rij van de D9E6EA-plaat,
   ook wanneer Emoji of Plaatjes als tweede kolom geopend is. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent.snoeten-popup-shell__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(400px, 1fr) !important;
    gap: 10px !important;
    align-content: stretch !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 40%) !important;
    grid-template-rows: auto minmax(400px, 1fr) !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions.profile-bio-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Verdeel de vier WYSIWYG-groepen over de volledige beschikbare breedte. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group {
    flex: 1 1 0 !important;
    min-width: 140px !important;
}

/* Schrijfveld en de twee invoegpanelen gebruiken exact dezelfde buitenplaat. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditField.profile-bio-editor-field,
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > .profile-bio-picture-tools-content,
html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > .profile-bio-emoji-tools-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 400px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > #bioEditField.profile-bio-editor-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 20px 22px !important;
    overflow: auto !important;
}

html body #form-posts #dashboardComposer.snoeten-popup-shell
#profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Geen oude ronde witte kop/body meer binnen Emoji of Plaatjes. */
html body #form-posts #dashboardComposer.snoeten-popup-shell
:is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header,
    .profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(260px, 1fr) minmax(260px, 1fr) !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent > #bioEditField.profile-bio-editor-field,
    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        min-height: 260px !important;
    }
}

/* =========================================================
   POPUP-WINDOW r1127 — uniforme WYSIWYG in iedere schrijf-popup
   ---------------------------------------------------------
   - De toolbar ZELF beslaat de volledige breedte.
   - De groepen worden niet uitgerekt; ze blijven compact naast elkaar.
   - Schrijfveld, Emoji en Plaatjes hebben dezelfde witte buitenplaat.
   - Geen eigen button-design: normale .button blijft leidend.
   ========================================================= */

/* Bio aanpassen + Prikbordbericht plaatsen: één vaste editoropbouw. */
html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent.snoeten-popup-shell__body {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(360px, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    gap: 10px !important;
    align-items: stretch !important;
    align-content: stretch !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 40%) !important;
}

/* Volledige bovenrij, maar GEEN 25%-verdeling van de groepen. */
html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > #bioEditOptions.profile-bio-editor-toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-flow: row nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group {
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 4px !important;
    align-content: end !important;
    justify-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group:first-child {
    padding-left: 0 !important;
}
html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-group:last-child {
    padding-right: 0 !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > #bioEditOptions .profile-bio-ribbon-buttons {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Schrijfvlak en zijpanelen: exact dezelfde buiten-CSS. */
html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > :is(
    .profile-bio-editor-field,
    .profile-bio-picture-tools-content,
    .profile-bio-emoji-tools-content
) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 360px !important;
    height: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > .profile-bio-editor-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 20px 22px !important;
    overflow: auto !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
    display: none !important;
}

/* De binnenkant van Emoji/Plaatjes mag geen tweede buitenplaat suggereren. */
html body :is(
    #bioEdit.snoeten-popup-shell--profile-bio,
    #form-posts #dashboardComposer.snoeten-popup-shell
) :is(
    .profile-bio-picture-panel-header,
    .profile-bio-emoji-panel-header,
    .profile-bio-picture-panel-body,
    .profile-bio-emoji-panel-body
) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Gastenboek en Bericht sturen gebruiken dezelfde compacte WYSIWYG-rij.
   Alleen de omringende popup blijft voorlopig zijn eigen vensterstructuur houden. */
html body :is(
    #guestbookForm.guestbook-composer,
    #bioEdit.messages-compose-editor
) .profile-bio-editor-toolbar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
}

html body :is(
    #guestbookForm.guestbook-composer,
    #bioEdit.messages-compose-editor
) .profile-bio-editor-toolbar .profile-bio-ribbon {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-flow: row nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

html body :is(
    #guestbookForm.guestbook-composer,
    #bioEdit.messages-compose-editor
) .profile-bio-editor-toolbar .profile-bio-ribbon-group {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

html body :is(
    #guestbookForm.guestbook-composer,
    #bioEdit.messages-compose-editor
) :is(
    .profile-bio-editor-field,
    .profile-bio-picture-tools-content,
    .profile-bio-emoji-tools-content
) {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

@media (max-width: 760px) {
    html body :is(
        #bioEdit.snoeten-popup-shell--profile-bio,
        #form-posts #dashboardComposer.snoeten-popup-shell
    ) #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(260px, 1fr) minmax(260px, 1fr) !important;
    }

    html body :is(
        #bioEdit.snoeten-popup-shell--profile-bio,
        #form-posts #dashboardComposer.snoeten-popup-shell
    ) #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: 260px !important;
    }

    html body :is(
        #bioEdit.snoeten-popup-shell--profile-bio,
        #form-posts #dashboardComposer.snoeten-popup-shell
    ) #profileBioEditorContent > .profile-bio-editor-field {
        min-height: 260px !important;
    }
}


/* =========================================================
   POPUP-WINDOW — Gastenboekbericht plaatsen
   Volledig gemigreerd van guestbook-window naar de gedeelde shell.
   ========================================================= */

html body #guestbookForm.snoeten-popup-shell--guestbook {
    --snoeten-popup-width: min(1000px, calc(100vw - 40px));
    --snoeten-popup-max-width: 1000px;
    --snoeten-popup-height: min(790px, calc(100dvh - 40px));
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-footer-height: 72px;
    --snoeten-popup-content-margin: 0px;

    width: var(--snoeten-popup-width) !important;
    max-width: var(--snoeten-popup-max-width) !important;
    height: var(--snoeten-popup-height) !important;
    max-height: calc(100dvh - 40px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #BCDDF5 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: var(--snoeten-popup-shadow) !important;
}

/* Blauwe scrollplaat: 20px binnenruimte, scrollbar helemaal rechts. */
html body #guestbookForm.snoeten-popup-shell--guestbook
> .guestbook-popup-content.snoeten-popup-shell__content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
    background: #BCDDF5 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Eén D9E6EA-plaat met rand; toolbar boven het witte schrijfveld. */
html body #guestbookForm.snoeten-popup-shell--guestbook
> .guestbook-popup-content
> #guestbookEditorContent.snoeten-popup-shell__body {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
}

/* WYSIWYG: volledige bovenrij, maar compacte groepen. */
html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > #guestbookFormOptions.guestbook-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-flow: row nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon-group {
    position: static !important;
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 10px !important;
    grid-template-columns: minmax(0, auto) !important;
    grid-template-rows: 32px 14px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 2px !important;
    row-gap: 5px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid #aebdc3 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon-group:first-child {
    padding-left: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon-group:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon-buttons {
    box-sizing: border-box !important;
    display: flex !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon-label {
    position: static !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    grid-row: 2 !important;
    overflow: hidden !important;
    color: #555 !important;
    font: 600 10px/14px "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Gewone WYSIWYG-knoppen blijven de centrale .button; hier alleen maat/uitlijning. */
html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions button.button {
    box-sizing: border-box !important;
    display: inline-grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 4px !important;
    place-items: center !important;
    vertical-align: top !important;
}

/* Schrijfveld en Emoji/Plaatjes hebben exact dezelfde witte buitenplaat. */
html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > :is(
    #guestbookFormField,
    .profile-bio-picture-tools-content,
    .profile-bio-emoji-tools-content
) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 400px !important;
    height: auto !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > #guestbookFormField {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 20px 22px !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 400px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
    display: none !important;
}

/* Paneelkoppen/-body's gelijk aan Bio/Prikbord, zonder oude grijze guestbook-laag. */
html body #guestbookForm.snoeten-popup-shell--guestbook
:is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 8px 12px 8px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #d5dbe0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
:is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) h2 {
    margin: 0 !important;
    color: #222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
:is([data-guestbook-picture-close],[data-guestbook-emoji-close]) {
    width: 34px !important;
    min-width: 34px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
:is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body {
    overflow: auto !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-storage {
    display: block !important;
    margin: 0 0 10px !important;
    color: #555 !important;
    font: inherit !important;
}

/* Emoji: witte inhoud en dezelfde tab/rasteropbouw als de nieuwe Bio-popup. */
html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-panel-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-panel-body :is(.profile-bio-emoji-popover,.emoji-picker) {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-bar .emoji-categories {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-bar .emoji-categories > button {
    display: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
    min-width: 160px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #202020 !important;
    font: 400 var(--base-font-size, 16px)/1 var(--base-font, Arial, sans-serif) !important;
    white-space: nowrap !important;
    background: #ffffff !important;
    border: 1px solid #a9a39c !important;
    border-bottom-color: #ffffff !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-select-control {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    flex: 0 0 38px !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    place-items: center !important;
    color: #333 !important;
    background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
    border: 1px solid #a9a39c !important;
    border-radius: 0 4px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-select-control > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #444 !important;
    fill: currentColor !important;
    stroke: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-panel-body .emoji-grid {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #9f9992 !important;
    border-radius: 0 4px 4px 4px !important;
    box-shadow: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-panel-body .emoji-grid button {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    color: #111 !important;
    font: 400 23px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
    background: #f7f5f2 !important;
    border-color: #a8a39d !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Footer hoort nu bij de gedeelde popup-shell. */
html body #guestbookForm.snoeten-popup-shell--guestbook
> .snoeten-popup-shell__footer .guestbook-popup-footer-title {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #333 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

@media (max-width: 760px) {
    html body #guestbookForm.snoeten-popup-shell--guestbook {
        --snoeten-popup-width: calc(100vw - 24px);
        --snoeten-popup-height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px) !important;
    }

    html body #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(260px, auto) minmax(260px, auto) !important;
    }

    html body #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > #guestbookFormField {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 260px !important;
    }

    html body #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: 260px !important;
    }

    html body #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookFormOptions .profile-bio-ribbon {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin !important;
    }

    html body #guestbookForm.snoeten-popup-shell--guestbook
    > .snoeten-popup-shell__footer .guestbook-popup-footer-title {
        display: none !important;
    }
}

/* =========================================================
   GASTENBOEK r20260906d — volledig los van legacy container
   ---------------------------------------------------------
   #guestbookForm wordt door guestbook-composer.js rechtstreeks onder body
   geplaatst. Daardoor gelden oude selectors onder #guestbookFormContainer
   niet meer. Deze eindlaag borgt de nieuwe volgorde en volle breedte.
   ========================================================= */
html body > #guestbookForm.snoeten-popup-shell--guestbook
> .guestbook-popup-content.snoeten-popup-shell__content {
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent.snoeten-popup-shell__body {
    grid-area: auto !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > #guestbookFormOptions.guestbook-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > #guestbookFormField {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: 2 !important;
}

@media (max-width: 760px) {
    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

/* =========================================================
   GASTENBOEK WYSIWYG ICONEN — gelijk aan Prikbordbericht
   ---------------------------------------------------------
   Alleen de inhoud van de knoppen wordt hier gestyled.
   De knoppen zelf blijven uitsluitend de centrale .button-opmaak gebruiken.
   ========================================================= */
html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-tool-icon {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-tool-icon.is-align {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.1 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-tool-icon.is-youtube rect {
    fill: #e33b32 !important;
    stroke: #b72520 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-tool-icon.is-youtube path {
    fill: #fff !important;
    stroke: #fff !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-icon-accent {
    stroke: #d33a34 !important;
    stroke-width: 2.8 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-icon-highlight {
    stroke: #f0c52f !important;
    stroke-width: 3.5 !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-letter-icon {
    position: relative !important;
    display: inline-grid !important;
    min-width: 20px !important;
    min-height: 20px !important;
    place-items: center !important;
    color: currentColor !important;
    font: 700 18px/20px Georgia, "Times New Roman", serif !important;
    pointer-events: none !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-letter-icon.is-italic {
    font-style: italic !important;
    transform: skew(-10deg) !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-letter-icon.is-underline {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
}

html body #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-letter-icon.is-strike {
    text-decoration: line-through !important;
    text-decoration-thickness: 2px !important;
}

/* =========================================================
   GASTENBOEK r20260906i — positie + Plaatjes gelijk aan Prikbord
   ---------------------------------------------------------
   De composer staat rechtstreeks onder body, maar draagt bewust niet meer
   de legacy .editor-class. Daarmee kan body > .editor.is-open uit fixes.css
   het venster niet fullscreen trekken. Deze eindlaag borgt dezelfde vaste
   centrering als de gedeelde Prikbord-popup.
   ========================================================= */
html body > #guestbookForm.snoeten-popup-shell--guestbook.is-open {
    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate3d(
        calc(-50% + var(--guestbook-window-x, 0px)),
        calc(-50% + var(--guestbook-window-y, 0px)),
        0
    ) !important;
}

/* Plaatjes gebruikt dezelfde paneelgeometrie als Prikbordbericht plaatsen. */
html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > .profile-bio-picture-tools-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 400px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > .profile-bio-picture-tools-content[hidden] {
    display: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .pictureManage,
html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .photo-manager-ui,
html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .profile-bio-picture-library-view {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   GASTENBOEK r20260906h — zichtbaarheid nieuwe popup-shell
   ---------------------------------------------------------
   Alleen de nieuwe popup-shell bepaalt de open/gesloten toestand.
   ========================================================= */
html body > #guestbookForm.snoeten-popup-shell--guestbook.is-open {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 12000 !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook:not(.is-open) {
    display: none !important;
}

/* =========================================================
   WYSIWYG — Emoji open: toolbar altijd volledige editorbreedte
   ---------------------------------------------------------
   Het Emoji-zijpaneel mag alleen de tweede inhoudsrij opdelen.
   De WYSIWYG-toolbar blijft boven schrijfveld + Emoji over de
   volledige breedte staan en mag niet horizontaal worden afgeknipt.
   ========================================================= */
@media (min-width: 761px) {
    html body :is(
        #bioEdit.snoeten-popup-shell--profile-bio,
        #form-posts #dashboardComposer.snoeten-popup-shell
    ) #profileBioEditorContent.snoeten-popup-shell__body.is-emoji-tools-open
      > #bioEditOptions.profile-bio-editor-toolbar {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    html body :is(
        #bioEdit.snoeten-popup-shell--profile-bio,
        #form-posts #dashboardComposer.snoeten-popup-shell
    ) #profileBioEditorContent.snoeten-popup-shell__body.is-emoji-tools-open
      > #bioEditOptions .profile-bio-ribbon {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-flow: row nowrap !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    html body :is(
        #bioEdit.snoeten-popup-shell--profile-bio,
        #form-posts #dashboardComposer.snoeten-popup-shell
    ) #profileBioEditorContent.snoeten-popup-shell__body.is-emoji-tools-open
      > #bioEditOptions .profile-bio-ribbon-group {
        flex: 0 1 auto !important;
    }
}

/* =========================================================
   r1193 — natuurlijke hoogte voor alle popup-window shells
   ---------------------------------------------------------
   Normale vensters erven niet langer één vaste hoogte.
   Iedere popup neemt de hoogte van zijn eigen inhoud aan.
   Alleen wanneer de inhoud hoger is dan het viewport wordt de
   bestaande inhouds-/scrolllaag begrensd. Minimaliseren,
   maximaliseren en handmatig resizen blijven ongewijzigd.
   ========================================================= */
html body .snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized),
html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized),
html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized):not(.is-maximized),
html body .site-layout-window.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized) {
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 40px) !important;
}

/* Zonder tabs: header + eigen inhoudshoogte + footer. */
html body .snoeten-popup-shell.is-open:not(.snoeten-popup-shell--with-tabs):not(.is-minimized):not(.is-maximized),
html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized),
html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized):not(.is-maximized) {
    grid-template-rows:
        var(--snoeten-popup-header-height)
        auto
        var(--snoeten-popup-footer-height) !important;
}

/* Met tabs: de inhoud bepaalt eveneens de hoogte. */
html body .snoeten-popup-shell.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized):not(.is-maximized) {
    grid-template-rows:
        var(--snoeten-popup-header-height)
        var(--snoeten-popup-tabs-height)
        auto
        var(--snoeten-popup-footer-height) !important;
}

/* Grote inhoud blijft binnen het scherm. De module-eigen scrolllaag blijft
   leidend; dit is alleen de bovengrens van het centrale inhoudsvak. */
html body .snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
> .snoeten-popup-shell__content {
    max-height: calc(
        100dvh
        - var(--snoeten-popup-header-height)
        - var(--snoeten-popup-footer-height)
        - 40px
    ) !important;
}

html body .snoeten-popup-shell.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized):not(.is-maximized)
> .snoeten-popup-shell__content {
    max-height: calc(
        100dvh
        - var(--snoeten-popup-header-height)
        - var(--snoeten-popup-tabs-height)
        - var(--snoeten-popup-footer-height)
        - 40px
    ) !important;
}

/* De prikbord- en gastenboekcomposer hebben ID-specifieke oude regels.
   Deze eindlaag houdt ook daar de natuurlijke hoogte leidend. */
html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
> .dashboard-post-compose-content.snoeten-popup-shell__content,
html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized):not(.is-maximized)
> .guestbook-popup-content.snoeten-popup-shell__content {
    height: auto !important;
}

@media (max-width: 700px) {
    html body .snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized),
    html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized),
    html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized):not(.is-maximized),
    html body .site-layout-window.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized) {
        height: fit-content !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 16px) !important;
    }

    html body .snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
    > .snoeten-popup-shell__content {
        max-height: calc(
            100dvh
            - var(--snoeten-popup-header-height)
            - var(--snoeten-popup-footer-height)
            - 16px
        ) !important;
    }

    html body .snoeten-popup-shell.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized):not(.is-maximized)
    > .snoeten-popup-shell__content {
        max-height: calc(
            100dvh
            - var(--snoeten-popup-header-height)
            - var(--snoeten-popup-tabs-height)
            - var(--snoeten-popup-footer-height)
            - 16px
        ) !important;
    }
}

/* =========================================================
   r1194 — #BCDDF5 is de enige flexibele popup-scrollplaat
   ---------------------------------------------------------
   Na de natuurlijke popuphoogtes uit r1193 mag de centrale
   blauwe plaat wel krimpen wanneer het venster hoger wordt
   dan het viewport. Zo scrollt uitsluitend #BCDDF5, terwijl
   header, tabs, footer en de interne D9E6EA/witte platen hun
   bestaande geometrie en volgorde behouden.
   ========================================================= */
html body .snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized) {
    grid-template-rows:
        var(--snoeten-popup-header-height)
        minmax(0, auto)
        var(--snoeten-popup-footer-height) !important;
}

html body .snoeten-popup-shell.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized):not(.is-maximized) {
    grid-template-rows:
        var(--snoeten-popup-header-height)
        var(--snoeten-popup-tabs-height)
        minmax(0, auto)
        var(--snoeten-popup-footer-height) !important;
}

/* De blauwe plaat zelf is de scrollviewport. Een vaste scrollbar-gutter
   voorkomt dat de platen erbinnen horizontaal verspringen wanneer scrollen
   wel/niet nodig is. De kinderen behouden hun eigen layout en positie. */
html body .snoeten-popup-shell.is-open:not(.is-minimized)
> .snoeten-popup-shell__content {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    background: #BCDDF5 !important;
}

/* Module-specifieke contentlagen blijven exact dezelfde scrollplaat. */
html body #layoutEdit.snoeten-popup-shell--profile-layout.is-open:not(.is-minimized)
> .profile-layout-editor-content.snoeten-popup-shell__content,
html body #bioEdit.snoeten-popup-shell--profile-bio.is-open:not(.is-minimized)
> .profile-bio-popup-content.snoeten-popup-shell__content,
html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized)
> .dashboard-post-compose-content.snoeten-popup-shell__content,
html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized)
> .guestbook-popup-content.snoeten-popup-shell__content,
html body #detailsModal.snoeten-popup-shell.is-open:not(.is-minimized)
> .profile-details-popup-content.snoeten-popup-shell__content,
html body [data-site-layout-window].snoeten-popup-shell.is-open:not(.is-minimized)
> .site-layout-dialog-content.snoeten-popup-shell__content {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    background: #BCDDF5 !important;
}

/* Binnenplaten mogen nooit een tweede hoofdscrollbar overnemen. */
html body .snoeten-popup-shell.is-open:not(.is-minimized)
> .snoeten-popup-shell__content
> .snoeten-popup-shell__body {
    height: auto !important;
    overflow: visible !important;
}

/* =========================================================
   r1195 — echte begrenzing van de #BCDDF5-scrollplaat
   ---------------------------------------------------------
   Enkele module-specifieke legacyregels (met name Vormgeving)
   zetten nog `max-height:none !important` op de contentlaag.
   Daardoor kon de blauwe plaat ondanks r1194 blijven groeien en
   de footer buiten het venster duwen. Deze eindlaag heeft bewust
   hogere specificiteit en begrenst alleen de blauwe contentlaag.
   Kleine popups houden hun natuurlijke hoogte; alleen wanneer de
   inhoud te hoog wordt, scrollt #BCDDF5 intern.
   ========================================================= */
html body #layoutEdit.snoeten-popup-shell--profile-layout.is-open:not(.is-minimized):not(.is-maximized)
> .profile-layout-editor-content.snoeten-popup-shell__content,
html body #bioEdit.snoeten-popup-shell--profile-bio.is-open:not(.is-minimized):not(.is-maximized)
> .profile-bio-popup-content.snoeten-popup-shell__content,
html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
> .dashboard-post-compose-content.snoeten-popup-shell__content,
html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized):not(.is-maximized)
> .guestbook-popup-content.snoeten-popup-shell__content,
html body #detailsModal.snoeten-popup-shell--profile-details.is-open:not(.is-minimized):not(.is-maximized)
> .profile-details-popup-content.snoeten-popup-shell__content,
html body [data-site-layout-window].snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
> .site-layout-dialog-content.snoeten-popup-shell__content {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(
        100dvh
        - var(--snoeten-popup-header-height)
        - var(--snoeten-popup-footer-height)
        - 40px
    ) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #BCDDF5 !important;
}

/* Vensters met de grijze hoofdtabplaat moeten ook de tabhoogte reserveren. */
html body #layoutEdit.snoeten-popup-shell--profile-layout.snoeten-popup-shell--with-tabs.is-open:not(.is-minimized):not(.is-maximized)
> .profile-layout-editor-content.snoeten-popup-shell__content,
html body #detailsModal.snoeten-popup-shell--profile-details.snoeten-popup-shell--with-tabs.is-open:not(.is-minimized):not(.is-maximized)
> .profile-details-popup-content.snoeten-popup-shell__content {
    max-height: calc(
        100dvh
        - var(--snoeten-popup-header-height)
        - var(--snoeten-popup-tabs-height)
        - var(--snoeten-popup-footer-height)
        - 40px
    ) !important;
}

/* Vormgeving: de subtabs en D9E6EA/witte inhoud blijven onderdeel van
   dezelfde documentflow. Zij krijgen zelf geen hoofdscrollbar en behouden
   daardoor exact hun bestaande onderlinge positie binnen #BCDDF5. */
html body #layoutEdit.snoeten-popup-shell--profile-layout.is-open:not(.is-minimized)
> .profile-layout-editor-content.snoeten-popup-shell__content
> :is(.profile-image-subtabs-bar,.profile-layout-editor-field) {
    flex-shrink: 0 !important;
}

@media (max-width: 700px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout.is-open:not(.is-minimized):not(.is-maximized)
    > .profile-layout-editor-content.snoeten-popup-shell__content,
    html body #bioEdit.snoeten-popup-shell--profile-bio.is-open:not(.is-minimized):not(.is-maximized)
    > .profile-bio-popup-content.snoeten-popup-shell__content,
    html body #form-posts #dashboardComposer.snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
    > .dashboard-post-compose-content.snoeten-popup-shell__content,
    html body #guestbookForm.snoeten-popup-shell--guestbook.is-open:not(.is-minimized):not(.is-maximized)
    > .guestbook-popup-content.snoeten-popup-shell__content,
    html body #detailsModal.snoeten-popup-shell--profile-details.is-open:not(.is-minimized):not(.is-maximized)
    > .profile-details-popup-content.snoeten-popup-shell__content,
    html body [data-site-layout-window].snoeten-popup-shell.is-open:not(.is-minimized):not(.is-maximized)
    > .site-layout-dialog-content.snoeten-popup-shell__content {
        max-height: calc(
            100dvh
            - var(--snoeten-popup-header-height)
            - var(--snoeten-popup-footer-height)
            - 16px
        ) !important;
    }

    html body #layoutEdit.snoeten-popup-shell--profile-layout.snoeten-popup-shell--with-tabs.is-open:not(.is-minimized):not(.is-maximized)
    > .profile-layout-editor-content.snoeten-popup-shell__content,
    html body #detailsModal.snoeten-popup-shell--profile-details.snoeten-popup-shell--with-tabs.is-open:not(.is-minimized):not(.is-maximized)
    > .profile-details-popup-content.snoeten-popup-shell__content {
        max-height: calc(
            100dvh
            - var(--snoeten-popup-header-height)
            - var(--snoeten-popup-tabs-height)
            - var(--snoeten-popup-footer-height)
            - 16px
        ) !important;
    }
}


/* Weather location popup: dezelfde herbruikbare shell als Prikbordbericht plaatsen. */
.weather-location-modal {
    z-index: 12000 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.weather-location-modal:has(.snoeten-popup-shell--weather-location.is-minimized) {
    pointer-events: none !important;
}

body.weather-location-modal-open:has(.snoeten-popup-shell--weather-location.is-minimized) {
    overflow: auto !important;
}

.weather-location-modal .snoeten-popup-shell--weather-location {
    --snoeten-popup-width: min(620px, calc(100vw - 40px));
    --snoeten-popup-max-width: 620px;
    --snoeten-popup-height: min(520px, calc(100dvh - 40px));
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-footer-height: 70px;
    --snoeten-popup-content-margin: 0px;
    pointer-events: auto !important;
}

.weather-location-modal .snoeten-popup-shell--weather-location > .weather-location-modal-header {
    grid-area: popup-header !important;
}

.weather-location-modal .snoeten-popup-shell--weather-location > .weather-location-modal-body {
    grid-area: popup-content !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: auto !important;
    background: var(--snoeten-popup-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.weather-location-modal .weather-location-modal-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

.weather-location-modal .weather-location-tools {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    gap: 14px !important;
    background: var(--snoeten-popup-surface-bg) !important;
    border: 1px solid var(--snoeten-popup-surface-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Weerlocatie: één actiebalk met de browserlocatie links en Profiel > Locatie rechts. */
.weather-location-modal .weather-location-auto-row {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--snoeten-popup-surface-border) !important;
    border-radius: 6px !important;
}

.weather-location-modal .weather-location-auto-row > .weather-location-auto {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.weather-location-modal .weather-profile-location-shortcut {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    background: transparent !important;
    color: #4B72AA !important;
    border: 0 !important;
    border-left: 1px solid var(--snoeten-popup-surface-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.weather-location-modal .weather-profile-location-shortcut:hover,
.weather-location-modal .weather-profile-location-shortcut:focus-visible {
    background: #eef5fa !important;
    color: #355E96 !important;
    outline: 0 !important;
}

.weather-location-modal .weather-profile-location-shortcut:disabled {
    opacity: .6 !important;
    cursor: wait !important;
}

.weather-location-modal .weather-location-modal-footer {
    grid-area: popup-footer !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: var(--snoeten-popup-footer-height) !important;
    min-height: var(--snoeten-popup-footer-height) !important;
    max-height: var(--snoeten-popup-footer-height) !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    gap: 18px !important;
    background: var(--snoeten-popup-footer-bg) !important;
    border: 0 !important;
    border-top: 1px solid var(--snoeten-popup-content-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.weather-location-modal .weather-location-modal-footer > h1 {
    min-width: 0 !important;
    margin: 0 !important;
    color: #000 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: calc(var(--base-font-size, 16px) + 6px) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    text-align: left !important;
}

.weather-location-modal .weather-location-modal-footer > nav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

.weather-location-modal .weather-location-modal-footer .button {
    min-height: 42px !important;
    margin: 0 !important;
}

.weather-location-modal .weather-location-heading,
.weather-location-modal .weather-location-form,
.weather-location-modal .weather-live-location-card,
.weather-location-modal .weather-location-status {
    min-width: 0 !important;
}

@media (max-width: 680px) {
    .weather-location-modal .snoeten-popup-shell--weather-location {
        --snoeten-popup-width: calc(100vw - 16px);
        --snoeten-popup-height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px) !important;
    }

    .weather-location-modal .snoeten-popup-shell--weather-location > .weather-location-modal-body {
        padding: 10px !important;
    }

    .weather-location-modal .weather-location-modal-inner {
        padding: 0 !important;
    }

    .weather-location-modal .weather-location-tools {
        padding: 14px !important;
    }

    .weather-location-modal .weather-profile-location-shortcut {
        padding: 0 10px !important;
    }

    .weather-location-modal .weather-location-modal-footer {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .weather-location-modal .weather-location-modal-footer > h1 {
        font-size: calc(var(--base-font-size, 16px) + 4px) !important;
    }
}


/* =========================================================
   Poll toevoegen — Snoeten popup-window shell
   ========================================================= */
.snoeten-popup-shell--poll {
    --snoeten-popup-width: min(760px, calc(100vw - 40px));
    --snoeten-popup-max-width: 760px;
    --snoeten-popup-height: min(650px, calc(100dvh - 40px));
    --snoeten-popup-header-height: 50px;
    --snoeten-popup-footer-height: 68px;
    --snoeten-popup-content-margin: 14px;
}

.snoeten-popup-shell--poll > .snoeten-popup-shell__content {
    overflow: auto !important;
}

.snoeten-popup-shell--poll > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    min-height: 100% !important;
    padding: 24px 26px !important;
    overflow: visible !important;
    background: #ffffff !important;
}

.snoeten-popup-shell--poll .welcome-poll-admin-form {
    display: grid !important;
    gap: 16px !important;
}

.snoeten-popup-shell--poll .welcome-poll-options {
    display: grid !important;
    gap: 12px !important;
}

.snoeten-popup-shell--poll .welcome-poll-field-row {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 0 !important;
}

.snoeten-popup-shell--poll .welcome-poll-field-label {
    font-weight: 700 !important;
    color: #33475f !important;
}

.snoeten-popup-shell--poll .welcome-poll-field-control input {
    width: 100% !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

@media (max-width: 620px) {
    .snoeten-popup-shell--poll {
        --snoeten-popup-width: calc(100vw - 18px);
        --snoeten-popup-height: calc(100dvh - 18px);
        --snoeten-popup-content-margin: 10px;
    }

    .snoeten-popup-shell--poll > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
        padding: 18px !important;
    }

    .snoeten-popup-shell--poll .welcome-poll-field-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}


/* =========================================================
   Poll toevoegen — footerknoppen r1208
   Antwoord toevoegen links; plaatsen/annuleren rechts met ademruimte.
   ========================================================= */
html body .welcome-poll-modal .snoeten-popup-shell--poll > .welcome-poll-modal-footer {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

html body .welcome-poll-modal .snoeten-popup-shell--poll > .welcome-poll-modal-footer > .welcome-poll-footer-status:empty {
    display: none !important;
}

html body .welcome-poll-modal .snoeten-popup-shell--poll > .welcome-poll-modal-footer > nav {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

html body .welcome-poll-modal .snoeten-popup-shell--poll > .welcome-poll-modal-footer > nav > [data-poll-add-option] {
    margin-right: auto !important;
}

html body .welcome-poll-modal .snoeten-popup-shell--poll > .welcome-poll-modal-footer > nav > [data-poll-modal-close] {
    margin-right: 4px !important;
}

/* =========================================================
   Pollbeheer — planningsoverzicht zoals Logo beheren
   ========================================================= */
.snoeten-popup-shell--poll {
    --snoeten-popup-width: min(900px, calc(100vw - 40px));
    --snoeten-popup-max-width: 900px;
    --snoeten-popup-height: min(760px, calc(100dvh - 40px));
}

.snoeten-popup-shell--poll .welcome-poll-manager-tabs {
    display: flex;
    gap: 5px;
    margin: 10px 14px -1px;
    position: relative;
    z-index: 2;
}

.snoeten-popup-shell--poll .welcome-poll-manager-tab.button {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 7px 7px 0 0;
    background: #e2e5e9;
    color: #3c444d;
    font-weight: 700;
}

.snoeten-popup-shell--poll .welcome-poll-manager-tab.button[aria-selected="true"],
.snoeten-popup-shell--poll .welcome-poll-manager-tab.button.is-active {
    border-bottom-color: #fff;
    background: #fff;
    color: #4B72AA;
}

.snoeten-popup-shell--poll > .snoeten-popup-shell__content > .welcome-poll-modal-content {
    min-height: calc(100% - 48px) !important;
    padding: 18px !important;
}

.snoeten-popup-shell--poll .welcome-poll-manager-intro {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid #cfd9e4;
    border-radius: 7px;
    background: #E9F4FE;
    color: #3b4f66;
}

.snoeten-popup-shell--poll .welcome-poll-manager-intro strong {
    color: #4B72AA;
    font-size: 1.05em;
}

.snoeten-popup-shell--poll .welcome-poll-manager-section + .welcome-poll-manager-section {
    margin-top: 18px;
}

.snoeten-popup-shell--poll .welcome-poll-manager-section > h3 {
    margin: 0 0 8px;
    color: #33475f;
    font-size: 1em;
}

.snoeten-popup-shell--poll .welcome-poll-manager-list {
    display: grid;
    gap: 7px;
}

.snoeten-popup-shell--poll .welcome-poll-manager-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid #d5dce4;
    border-radius: 7px;
    background: #fff;
}

.snoeten-popup-shell--poll .welcome-poll-manager-row.is-today {
    border-color: #aec1db;
    background: #f4f9fe;
    box-shadow: inset 3px 0 #F19620;
}

.snoeten-popup-shell--poll .welcome-poll-manager-row.is-past {
    background: #f7f7f7;
    opacity: .88;
}

.snoeten-popup-shell--poll .welcome-poll-manager-date,
.snoeten-popup-shell--poll .welcome-poll-manager-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.snoeten-popup-shell--poll .welcome-poll-manager-status {
    width: max-content;
    padding: 2px 6px;
    border-radius: 3px;
    background: #E9F4FE;
    color: #4B72AA;
    font-size: .88em;
    font-weight: 700;
}

.snoeten-popup-shell--poll .welcome-poll-manager-row.is-today .welcome-poll-manager-status {
    background: #fff0dc;
    color: #a65c00;
}

.snoeten-popup-shell--poll .welcome-poll-manager-row.is-past .welcome-poll-manager-status {
    background: #eceff2;
    color: #68717b;
}

.snoeten-popup-shell--poll .welcome-poll-manager-date strong,
.snoeten-popup-shell--poll .welcome-poll-manager-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.snoeten-popup-shell--poll .welcome-poll-manager-copy > span {
    color: #75808b;
    font-size: .92em;
}

.snoeten-popup-shell--poll .welcome-poll-manager-actions {
    display: flex;
    justify-content: flex-end;
}

.snoeten-popup-shell--poll .welcome-poll-manager-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed #cfd6de;
    background: #f8f9fa;
    color: #68717b;
}

.snoeten-popup-shell--poll .welcome-poll-field-control {
    min-width: 0;
}

.snoeten-popup-shell--poll .welcome-poll-field-control input[type="date"] {
    width: min(260px, 100%) !important;
}

.snoeten-popup-shell--poll .welcome-poll-field-control small {
    display: block;
    margin-top: 5px;
    color: #737f8c;
    font-weight: 400;
}

html body .welcome-poll-modal [data-poll-add-option][hidden],
html body .welcome-poll-modal [data-poll-save][hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .snoeten-popup-shell--poll .welcome-poll-manager-row {
        grid-template-columns: 1fr;
    }

    .snoeten-popup-shell--poll .welcome-poll-manager-actions {
        justify-content: flex-start;
    }
}

html body .welcome-poll-modal .welcome-poll-modal-footer > nav.is-overview {
    justify-content: flex-end !important;
}


/* Poll/locatie opslaan: altijd de gewone Snoeten button-stijl gebruiken. */
html body .welcome-poll-modal .poll-save-button.button,
html body .weather-location-modal .snoeten-save-button.button {
    appearance: none !important;
    min-height: var(--button-height, 32px) !important;
    padding: 5px 12px !important;
    border-radius: var(--button-radius, 4px) !important;
    font: inherit !important;
}




/* r1233 — behoud de oorspronkelijke rand van de #D9E6EA-platen en
   plaats de witte lijn BINNEN die rand. */
html body #detailsModal.snoeten-popup-shell--profile-details
:is(.profile-details-vormgeving-field-card,.profile-details-vormgeving-account-card),
html body #detailsModal.profile-details-r671 .profile-question-editor-fields,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages
:is(.profile-layout-upload-card,.profile-background-creator),
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-option-card,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder
:is(.profile-layout-removed,.profile-layout-manager-column,.profile-layout-manager-wide) {
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    box-shadow: inset 0 0 0 1px #ffffff !important;
    background-clip: padding-box !important;
}

/* =========================================================
   GASTENBOEK — Emoji/Plaatjes rechts van schrijfveld (2026-09-23)
   ---------------------------------------------------------
   De WYSIWYG-toolbar blijft altijd over de volledige popupbreedte.
   Alleen de tweede rij splitst in schrijfveld + rechter zijpaneel.
   Op smalle schermen schuift het paneel onder het schrijfveld.
   ========================================================= */
html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent.snoeten-popup-shell__body {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
    grid-template-rows: auto minmax(400px, auto) !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > #guestbookFormOptions.guestbook-editor-toolbar.snoeten-popup-shell__toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    overflow: visible !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > #guestbookFormField {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 400px !important;
    align-self: stretch !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
#guestbookFormOptions .profile-bio-ribbon {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Plaatjes-upload: dezelfde stabiele bibliotheekopbouw als in Bio bewerken. */
html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .photo-manager-ui,
html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .profile-bio-picture-library-view {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #fff !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
    color: #5c5c5c !important;
    text-align: center !important;
    background: #fff !important;
    border: 2px dashed #aaa !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop:is(:hover,:focus-visible,.is-dragover) {
    color: #355e96 !important;
    background: #f4f9fd !important;
    border-color: #6f9fc4 !important;
    outline: 0 !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop.is-uploading {
    opacity: .68 !important;
    pointer-events: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop .picture-upload {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop-icon {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop strong {
    display: block !important;
    margin: 0 !important;
    color: inherit !important;
    font: 700 15px/1.35 var(--base-font, Arial, sans-serif) !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-drop span {
    display: block !important;
    margin: 0 !important;
    color: #777 !important;
    font: 400 12px/1.35 var(--base-font, Arial, sans-serif) !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-status {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #555 !important;
    font: 400 12px/1.4 var(--base-font, Arial, sans-serif) !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .picture-upload-status:empty {
    display: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .picture-list {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .picture-list > .profile-bio-picture-card {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d5dbe0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .profile-bio-picture-preview {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 170px !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    background-color: #fff !important;
    background-image: linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%) !important;
    background-position: 0 0,0 8px,8px -8px,-8px 0 !important;
    background-size: 16px 16px !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .profile-bio-picture-preview img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .profile-bio-picture-card-actions {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f3f0e9 !important;
    border-top: 1px solid #d5dbe0 !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook
.profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    align-items: center !important;
    justify-content: center !important;
}

html body > #guestbookForm.snoeten-popup-shell--guestbook .profile-bio-picture-card-action svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

@media (max-width: 760px) {
    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(260px, auto) minmax(260px, auto) !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: 260px !important;
    }
}


/* === MEDIA POPUPS: centrale popup-window shell ===
   De Media-formulieren behouden hun eigen inhoud, maar header/chrome/content/footer
   worden vanaf hier door popup-window.css bestuurd. */
html body #profile .profile-photo-modal.profile-media-bio-modal {
    z-index: 12050 !important;
    padding: 0 !important;
    place-items: unset !important;
    background: transparent !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal.is-open {
    pointer-events: auto !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell {
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-tabs-height: 50px;
    --snoeten-popup-footer-height: 72px;
    --snoeten-popup-content-margin: 0px;
    --snoeten-popup-content-radius: 0px;
    --snoeten-popup-surface-radius: 0px;
    display: none !important;
    grid-template-areas:
        "popup-header"
        "popup-content"
        "popup-footer" !important;
    grid-template-rows: var(--snoeten-popup-header-height) minmax(0, auto) var(--snoeten-popup-footer-height) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
    background: var(--snoeten-popup-bg) !important;
    border: 1px solid var(--snoeten-popup-border) !important;
    border-radius: var(--snoeten-popup-radius) !important;
    box-shadow: var(--snoeten-popup-shadow) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal.is-open .profile-media-bio-window.snoeten-popup-shell.is-open {
    display: grid !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal.is-open .profile-media-bio-window.snoeten-popup-shell.snoeten-popup-shell--with-tabs:not(.is-minimized) {
    grid-template-areas:
        "popup-header"
        "popup-tabs"
        "popup-content"
        "popup-footer" !important;
    grid-template-rows:
        var(--snoeten-popup-header-height)
        var(--snoeten-popup-tabs-height)
        minmax(0, auto)
        var(--snoeten-popup-footer-height) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__header {
    grid-area: popup-header !important;
    min-height: var(--snoeten-popup-header-height) !important;
    height: var(--snoeten-popup-header-height) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__tabsbar {
    grid-area: popup-tabs !important;
    min-height: var(--snoeten-popup-tabs-height) !important;
    height: var(--snoeten-popup-tabs-height) !important;
    margin: 0 !important;
    padding: 8px 14px 7px !important;
    background: var(--snoeten-popup-tabs-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-tabs-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__content.profile-layout-editor-content {
    grid-area: popup-content !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    background: var(--snoeten-popup-content-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__content > .snoeten-popup-shell__body.profile-media-create-editor-field {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--snoeten-popup-surface-bg) !important;
    border: 1px solid var(--snoeten-popup-surface-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__footer {
    grid-area: popup-footer !important;
    width: 100% !important;
    height: var(--snoeten-popup-footer-height) !important;
    min-height: var(--snoeten-popup-footer-height) !important;
    max-height: var(--snoeten-popup-footer-height) !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: var(--snoeten-popup-footer-bg) !important;
    border: 0 !important;
    border-top: 1px solid var(--snoeten-popup-content-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__footer[hidden] {
    display: none !important;
}

/* Wanneer Media bewerken bewust geen buitenfooter heeft, krijgt de content direct de rest van de shell. */
html body #profile [data-media-edit-modal].profile-photo-modal.profile-media-bio-modal.is-open .profile-media-bio-window.snoeten-popup-shell:has(> .snoeten-popup-shell__footer[hidden]) {
    grid-template-areas: "popup-header" "popup-content" !important;
    grid-template-rows: var(--snoeten-popup-header-height) minmax(0, auto) !important;
}

@media (max-width: 700px) {
    html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
    html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__content.profile-layout-editor-content {
        padding: 8px !important;
    }
    html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__content > .snoeten-popup-shell__body.profile-media-create-editor-field {
        padding: 14px !important;
    }
}
/* === MEDIA POPUPS: centrale popup-window shell END === */

/* Media gebruikt opnieuw de gedeelde popup-window dimlaag; popup-shared zette die vroeger bewust uit. */
html:has(#profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell.is-open:not(.is-minimized)) body.profile-photo-modal-open::before,
html:has(#profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell.is-open:not(.is-minimized)) body.profile-photo-modal-open.profile-bio-editor-open::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 11990 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background: var(--snoeten-popup-backdrop-bg, rgba(34, 49, 63, .46)) !important;
    backdrop-filter: var(--snoeten-popup-backdrop-filter, blur(1.5px) saturate(92%)) !important;
    -webkit-backdrop-filter: var(--snoeten-popup-backdrop-filter, blur(1.5px) saturate(92%)) !important;
}

/* =========================================================
   MEDIA POPUPS — professionele formulierlaag (2026-09-23)
   ---------------------------------------------------------
   Alleen de formulieren binnen de nieuwe popup-window shell.
   De oude Media-pagina zelf blijft hiermee volledig ongemoeid.
   ========================================================= */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media {
    --media-form-border: #cbd5dc;
    --media-form-border-strong: #9fb0bc;
    --media-form-panel: #f6f8fa;
    --media-form-panel-soft: #fbfcfd;
    --media-form-text: #263746;
    --media-form-muted: #657786;
    --media-form-focus: #4b72aa;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(.profile-media-details-form,.profile-photo-popup-form) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--media-form-text) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* De vensterkop bevat de titel al; in het formulier blijft alleen de nuttige toelichting staan. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-intro {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 2px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #dce3e8 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-intro > h1 {
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-intro > p {
    margin: 0 !important;
    color: var(--media-form-muted) !important;
    font: 400 13px/1.55 var(--base-font, Arial, sans-serif) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-grid {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-card {
    box-sizing: border-box !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: var(--media-form-panel-soft) !important;
    border: 1px solid var(--media-form-border) !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(31, 45, 61, .04) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
.profile-media-details-card--wide {
    grid-column: 1 / -1 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(
    .profile-media-details-card > h2,
    .profile-media-details-card > label > span:first-child,
    .profile-media-details-card > .profile-photo-form-field > span:first-child,
    .profile-media-details-card legend,
    .profile-photo-form-field > span:first-child,
    .profile-media-setting-title
) {
    margin: 0 !important;
    color: #34495a !important;
    font: 700 13px/1.35 var(--base-font, Arial, sans-serif) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(label,.profile-photo-form-field,.profile-media-setting-field) {
    box-sizing: border-box !important;
    display: flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 7px !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
small {
    color: #7b8790 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(input[type="text"],input[type="search"],input[type="url"],input[type="email"],input[type="number"],select,textarea) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 11px !important;
    color: #243746 !important;
    font: 400 14px/1.4 var(--base-font, Arial, sans-serif) !important;
    background: #fff !important;
    border: 1px solid var(--media-form-border-strong) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(27, 42, 56, .05) !important;
    outline: 0 !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(input[type="text"],input[type="search"],input[type="url"],input[type="email"],input[type="number"],select) {
    height: 40px !important;
    min-height: 40px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media textarea {
    min-height: 96px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    resize: vertical !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(input,select,textarea):focus {
    border-color: var(--media-form-focus) !important;
    box-shadow: 0 0 0 2px rgba(75, 114, 170, .14), inset 0 1px 2px rgba(27, 42, 56, .04) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media
:is(input,textarea)::placeholder {
    color: #98a4ad !important;
    opacity: 1 !important;
}

/* Bestandsveld Video: gewoon bruikbaar, maar visueel niet meer browser-achtig. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="file"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 4px !important;
    color: #4b5b67 !important;
    font: 400 13px/1.4 var(--base-font, Arial, sans-serif) !important;
    background: #fff !important;
    border: 1px solid var(--media-form-border-strong) !important;
    border-radius: 4px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="file"]::file-selector-button {
    height: 32px !important;
    margin: 0 9px 0 0 !important;
    padding: 0 12px !important;
    color: #334b61 !important;
    font: 700 12px/1 var(--base-font, Arial, sans-serif) !important;
    background: #eef3f6 !important;
    border: 1px solid #bcc9d2 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="file"]::file-selector-button:hover {
    background: #e4edf3 !important;
}

/* Foto-upload als duidelijke dropzone. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-photo-drop-area {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 190px !important;
    margin: 0 !important;
    padding: 24px 18px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #506474 !important;
    text-align: center !important;
    background: #f8fafb !important;
    border: 2px dashed #b8c6d0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-photo-drop-area:is(:hover,:focus-visible,.is-dragover) {
    color: #355e96 !important;
    background: #f1f6fa !important;
    border-color: #6f91b5 !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-photo-drop-area.has-file {
    background: #f4f8f2 !important;
    border-color: #8fa989 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-drop-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    color: currentColor !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-layout-drop-copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-layout-drop-copy > strong {
    color: #34495a !important;
    font-size: 15px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-drop-file {
    margin-top: 6px !important;
    padding: 5px 8px !important;
    color: #385b32 !important;
    font-size: 11px !important;
    background: #e8f1e5 !important;
    border: 1px solid #bfd0b9 !important;
    border-radius: 3px !important;
}

/* Uitklapopties onder de foto-upload. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-photo-extra-settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-setting-details {
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--media-form-border) !important;
    border-radius: 4px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-setting-details > summary {
    min-height: 40px !important;
    padding: 10px 12px !important;
    color: #34495a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: #f6f8fa !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-setting-content {
    padding: 12px !important;
    background: #fff !important;
    border-top: 1px solid #e1e6ea !important;
}

/* WYSIWYG in Media: één nette plaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--media-form-border-strong) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    gap: 4px !important;
    background: #eef2f5 !important;
    border: 0 !important;
    border-bottom: 1px solid #d6dde2 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar > button {
    width: 30px !important;
    height: 28px !important;
    min-width: 30px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #c7d0d7 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    overflow-y: auto !important;
    color: #243746 !important;
    font: 400 14px/1.5 var(--base-font, Arial, sans-serif) !important;
    background: #fff !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Playlistkleur: compacte, klikbare keuzes. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-theme-field {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-theme-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-theme-option {
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #fff !important;
    border: 1px solid var(--media-form-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-theme-option:has(input:checked) {
    background: #f3f7fb !important;
    border-color: #6f91b5 !important;
    box-shadow: inset 0 0 0 1px #6f91b5 !important;
}

/* Video zoeken / selecteren. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-search-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    align-items: center !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-results {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-result {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 8px !important;
    gap: 10px !important;
    align-items: center !important;
    text-align: left !important;
    background: #fff !important;
    border: 1px solid var(--media-form-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-result:is(:hover,:focus-visible) {
    background: #f7fafc !important;
    border-color: #91a8b9 !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-result.is-selected {
    background: #eef4fa !important;
    border-color: #4b72aa !important;
    box-shadow: inset 0 0 0 1px #4b72aa !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-result img {
    display: block !important;
    width: 92px !important;
    height: 54px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
}

/* Foto bewerken: interne tabs laten aansluiten op de nieuwe window-shell. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-edit-tabs {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 6px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    background: #eef2f5 !important;
    border: 1px solid #d5dde3 !important;
    border-radius: 4px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-edit-tab {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    color: #425464 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-edit-tab.is-active {
    color: #fff !important;
    background: #4b72aa !important;
    border-color: #3e6294 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-settings-card {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    background: var(--media-form-panel-soft) !important;
    border: 1px solid var(--media-form-border) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* Statusfeedback zit altijd op een vaste, rustige plek onder het formulier. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-form-feedback:not(:empty),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-selected-status:not(:empty):not([data-music-feedback]) {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 9px 11px !important;
    color: #3d566e !important;
    font: 600 12px/1.4 var(--base-font, Arial, sans-serif) !important;
    background: #eef5fb !important;
    border: 1px solid #c9dbea !important;
    border-radius: 4px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-form-feedback.is-error:not(:empty) {
    color: #8b2f2f !important;
    background: #fff2f2 !important;
    border-color: #e0b8b8 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

@media (max-width: 760px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-grid,
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-photo-extra-settings,
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-results {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-theme-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-search-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* === MEDIA POPUPS professional forms END === */

/* 2026-09-23c — Media-popups: extra verfijning voor compactere vensters. */
html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell {
    --snoeten-popup-header-height: 50px;
    --snoeten-popup-tabs-height: 48px;
    --snoeten-popup-footer-height: 64px;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__content.profile-layout-editor-content {
    padding: 8px !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .profile-media-bio-window.snoeten-popup-shell > .snoeten-popup-shell__content > .snoeten-popup-shell__body.profile-media-create-editor-field {
    padding: 14px !important;
    align-content: start !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-grid {
    gap: 12px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card {
    padding: 14px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer {
    padding: 10px 18px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer nav {
    min-height: 42px !important;
}

/* 2026-09-23d — Media volledig los van de oude guestbook/windows-dialog chrome.
   Deze laag staat bewust als laatste zodat Media altijd binnen de viewport blijft. */
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
    width: min(var(--media-popup-width, 820px), calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translate3d(
        calc(-50% + var(--guestbook-window-x, 0px)),
        calc(-50% + var(--guestbook-window-y, 0px)),
        0
    ) !important;
    color: #1f2328 !important;
    background: var(--snoeten-popup-bg) !important;
    border: 1px solid var(--snoeten-popup-border) !important;
    border-radius: var(--snoeten-popup-radius) !important;
    box-shadow: var(--snoeten-popup-shadow) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal.is-open .snoeten-popup-shell--media.is-open {
    display: grid !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__header {
    grid-area: popup-header !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 10px 0 16px !important;
    gap: 9px !important;
    color: #fff !important;
    background: var(--snoeten-popup-header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-header-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__header > .snoeten-popup-shell__title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content {
    min-height: 0 !important;
    max-height: calc(100dvh - 146px) !important;
    padding: 8px !important;
    overflow: hidden !important;
    background: var(--snoeten-popup-content-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    box-sizing: border-box !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 162px) !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid var(--snoeten-popup-surface-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer {
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    padding: 10px 18px !important;
    background: var(--snoeten-popup-footer-bg) !important;
    border: 0 !important;
    border-top: 1px solid var(--snoeten-popup-content-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media.is-maximized {
    top: 8px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    transform: none !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media.is-maximized > .snoeten-popup-shell__content,
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media.is-maximized > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    max-height: none !important;
}

@media (max-width: 700px) {
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content {
        max-height: calc(100dvh - 130px) !important;
        padding: 6px !important;
    }
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
        max-height: calc(100dvh - 142px) !important;
        padding: 10px !important;
    }
}

/* 2026-09-23f — Media gebruikt nu letterlijk dezelfde popup-opbouw als Profiel. */
html body #profile .profile-photo-modal.profile-media-bio-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12010 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal[hidden] {
    display: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal.is-open {
    pointer-events: auto !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media {
    --snoeten-popup-bg: #BCDDF5;
    --snoeten-popup-border: #000000;
    --snoeten-popup-header-bg: linear-gradient(180deg, #f7b457 0%, #f19620 55%, #df8310 100%);
    --snoeten-popup-header-color: #ffffff;
    --snoeten-popup-header-border: #c97812;
    --snoeten-popup-content-bg: #BCDDF5;
    --snoeten-popup-content-border: #8EAAB4;
    --snoeten-popup-surface-bg: #D9E6EA;
    --snoeten-popup-surface-border: #8EAAB4;
    --snoeten-popup-footer-bg: #E9F4FE;
    --snoeten-popup-tabs-bg: #F0F0F0;
    --snoeten-popup-tabs-border: #CCCCCC;
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-tabs-height: 50px;
    --snoeten-popup-footer-height: 64px;
    --snoeten-popup-content-margin: 0px;
    --snoeten-popup-radius: 0px;
    color: #202833 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 10px 0 18px !important;
    color: #fff !important;
    background: var(--snoeten-popup-header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--snoeten-popup-header-border) !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__header .snoeten-popup-shell__title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__tabsbar {
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 10px 20px 8px !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    border-bottom: 1px solid #CCCCCC !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Net als Profiel: een blauwe scrollplaat met daarbinnen D9E6EA-formulierplaten. */
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .profile-media-popup-content.snoeten-popup-shell__content,
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .profile-media-playlist-editor-content.snoeten-popup-shell__content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content > .profile-media-create-editor-field.snoeten-popup-shell__body {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(.profile-media-details-panel,.profile-photo-settings-card) {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #D9E6EA !important;
    border: 1px solid #8EAAB4 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px #FFFFFF !important;
    background-clip: padding-box !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro {
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > h1 {
    display: block !important;
    margin: 0 0 8px !important;
    color: #202833 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > p {
    margin: 0 !important;
    color: #505b66 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    background: rgba(255,255,255,.38) !important;
    border: 1px solid rgba(142,170,180,.82) !important;
    border-radius: 5px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card--wide {
    grid-column: 1 / -1 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-card > h2,
    .profile-media-details-card > label > span:first-child,
    .profile-photo-form-field > span:first-child,
    .profile-media-setting-title,
    legend
) {
    color: #202833 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(input,select,textarea,.profile-photo-description-editor) {
    color: #303b4a !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(input[type="text"],input[type="search"],input[type="url"],input[type="email"],select,textarea) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 9px 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #b8c4cd !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media textarea {
    min-height: 120px !important;
    resize: vertical !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(input,select,textarea):focus {
    border-color: #5B9BD5 !important;
    box-shadow: 0 0 0 1px rgba(91,155,213,.22) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer {
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 10px 24px !important;
    background: #E9F4FE !important;
    border: 0 !important;
    border-top: 1px solid #8EAAB4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-left: auto !important;
}

@media (max-width: 760px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-grid {
        grid-template-columns: minmax(0,1fr) !important;
    }
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .profile-media-popup-content.snoeten-popup-shell__content,
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .profile-media-playlist-editor-content.snoeten-popup-shell__content {
        padding: 12px !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(.profile-media-details-panel,.profile-photo-settings-card) {
        padding: 16px !important;
    }
}

html body #profile [data-media-edit-modal].profile-photo-modal.profile-media-bio-modal.is-open
.snoeten-popup-shell--media:has(> .snoeten-popup-shell__footer[hidden]) {
    grid-template-areas:
        "popup-header"
        "popup-content" !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
}

/* ========================================================================
   MEDIA POPUPS — HARD RESET / PIXEL-PERFECT LAYOUT (2026-09-23g)
   Laat oudere Media/Profile editorregels niet meer de window-grid bepalen.
   ======================================================================== */
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media {
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(var(--snoeten-popup-width, 860px), calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: hidden !important;
    background: #BCDDF5 !important;
    border: 1px solid #000 !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal.is-open .snoeten-popup-shell--media.is-open:not(.is-minimized) {
    display: grid !important;
    grid-template-areas:
        "popup-header"
        "popup-content"
        "popup-footer" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px minmax(0, auto) 64px !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal.is-open .snoeten-popup-shell--media.is-open.snoeten-popup-shell--with-tabs:not(.is-minimized) {
    grid-template-areas:
        "popup-header"
        "popup-tabs"
        "popup-content"
        "popup-footer" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 50px minmax(0, 1fr) 64px !important;
    height: min(720px, calc(100dvh - 40px)) !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > :is(
    .snoeten-popup-shell__header,
    .snoeten-popup-shell__tabsbar,
    .snoeten-popup-shell__content,
    .snoeten-popup-shell__footer
) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__header {
    grid-area: popup-header !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 10px 0 18px !important;
    overflow: hidden !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__tabsbar {
    grid-area: popup-tabs !important;
    display: flex !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 8px 18px 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    border-bottom: 1px solid #CCCCCC !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__tabsbar[hidden] {
    display: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__tabsbar .snoeten-popup-shell__tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content {
    grid-area: popup-content !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 156px) !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #BCDDF5 !important;
    border: 0 !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media.snoeten-popup-shell--with-tabs > .snoeten-popup-shell__content {
    max-height: calc(100dvh - 206px) !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer {
    grid-area: popup-footer !important;
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 10px 22px !important;
    background: #E9F4FE !important;
    border: 0 !important;
    border-top: 1px solid #8EAAB4 !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer[hidden] {
    display: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer > nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin: 0 0 0 auto !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__footer .profile-media-footer-status {
    min-width: 0 !important;
    margin-right: auto !important;
}

/* Formulierplaat: zelfde materiaal als Profiel > Locatie. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-form,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-tab-panel,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-search-panel {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-tab-panel[hidden] {
    display: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-panel {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    background: #D9E6EA !important;
    border: 1px solid #8EAAB4 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px #FFFFFF !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > h1 {
    display: block !important;
    margin: 0 0 6px !important;
    color: #202833 !important;
    font: 700 24px/1.25 var(--base-font, Comfortaa, Arial, sans-serif) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > p {
    max-width: 760px !important;
    margin: 0 !important;
    color: #5A6570 !important;
    font: 400 var(--base-font-size, 16px)/1.5 var(--base-font, Comfortaa, Arial, sans-serif) !important;
}

/* Alle basisvelden onder elkaar; geen smalle halve kaarten meer. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-grid,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-grid--single {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card--wide {
    box-sizing: border-box !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    background: rgba(255,255,255,.40) !important;
    border: 1px solid #AFC0C8 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card > :is(label,.profile-photo-form-field),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-setting-field {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-card > h2,
    .profile-media-details-card > label > span:first-child,
    .profile-photo-form-field > span:first-child,
    .profile-media-setting-title,
    legend
) {
    margin: 0 !important;
    color: #202833 !important;
    font: 700 var(--base-font-size,16px)/1.35 var(--base-font,Comfortaa,Arial,sans-serif) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    input[type="text"], input[type="search"], input[type="url"], input[type="email"],
    select, textarea
) {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    color: #303B4A !important;
    font: 400 var(--base-font-size,16px)/1.4 var(--base-font,Comfortaa,Arial,sans-serif) !important;
    background: #FFFFFF !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media textarea {
    min-height: 120px !important;
}

/* Foto toevoegen. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-settings-card {
    padding: 16px !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-drop-area {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 170px !important;
    margin: 0 !important;
    padding: 22px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    background: #FFFFFF !important;
    border: 1px dashed #94ADBE !important;
    border-radius: 5px !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-extra-settings {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 0 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-details {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-details > summary {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    background: #F7F9FA !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
}

/* WYSIWYG altijd volledige kaartbreedte. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    flex-wrap: wrap !important;
    padding: 5px !important;
    overflow: visible !important;
    background: #EEF2F5 !important;
    border: 0 !important;
    border-bottom: 1px solid #D2D9DE !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    padding: 10px 11px !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
}

/* Video zoeken. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-search-form {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-search-form .button {
    min-width: 100px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-results,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-album-video-grid {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 0 !important;
}

/* Playlist bewerken / toevoegen. */
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-media-playlist-theme-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-media-playlist-theme-option {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
}
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-playlist-manage-editor[hidden] {
    display: none !important;
}

/* Maximized blijft een echte vier-rij shell. */
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media.is-maximized {
    top: 8px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    transform: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media.is-maximized > .snoeten-popup-shell__content {
    max-height: none !important;
}

@media (max-width: 760px) {
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
    html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content {
        padding: 10px !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-panel {
        padding: 16px !important;
    }
    html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-extra-settings,
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-results,
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playlist-album-video-grid {
        grid-template-columns: minmax(0,1fr) !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-music-search-form {
        grid-template-columns: minmax(0,1fr) !important;
    }
    html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-media-playlist-theme-options {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

/* ========================================================================
   MEDIA POPUPS — intro buiten de plaat + één scrollbar (2026-09-23h)
   Alleen de blauwe popup-contentplaat scrollt. Binnen de D9E6EA-hoofdplaat
   staan velden direct op de plaat, zonder extra kaartlagen.
   ======================================================================== */
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content > .snoeten-popup-shell__body {
    overflow: visible !important;
    max-height: none !important;
}

/* Titel + ondertekst staan op de blauwe plaat, vóór de formulierplaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > h1 {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #202833 !important;
    font: 700 24px/1.25 var(--base-font, Comfortaa, Arial, sans-serif) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > p {
    display: block !important;
    max-width: 900px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #5A6570 !important;
    font: 400 var(--base-font-size, 16px)/1.5 var(--base-font, Comfortaa, Arial, sans-serif) !important;
}

/* Eén hoofdplaat: hier komt voortaan alle formulierinhoud direct op te staan. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-panel,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-settings-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 1px solid #8EAAB4 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px #FFFFFF !important;
}

/* Oude interne kaarten/platen volledig vlak maken. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-grid,
    .profile-media-details-grid--single,
    .profile-media-details-card,
    .profile-media-details-card--wide,
    .profile-layout-settings-grid,
    .profile-layout-option-card,
    .profile-media-photo-settings-grid,
    .profile-media-photo-settings-card,
    .profile-media-search-panel,
    .profile-media-playlist-tab-panel
) {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-grid,
    .profile-media-details-grid--single,
    .profile-layout-settings-grid,
    .profile-media-photo-settings-grid
) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-card,
    .profile-media-details-card--wide,
    .profile-layout-option-card,
    .profile-media-photo-settings-card
) {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Velden krijgen ritme via spacing, niet via losse platen. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-card + .profile-media-details-card,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-layout-option-card + .profile-layout-option-card {
    margin-top: 2px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-card > label,
    .profile-photo-form-field,
    .profile-media-setting-field,
    .profile-media-playlist-theme-field
) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Foto toevoegen: upload, beschrijving en album direct op de hoofdplaat. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-settings-card {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-settings-card > h2 {
    margin: 0 0 10px !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-extra-settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-details {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-details > summary {
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    background: #FFFFFF !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-details[open] > summary {
    border-radius: 4px 4px 0 0 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-setting-content {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

/* Geen tweede verticale scrollbars in WYSIWYG/resultaten/formulierdelen. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-details-form,
    .profile-media-details-panel,
    .profile-media-details-grid,
    .profile-media-details-card,
    .profile-photo-settings-card,
    .profile-media-playlist-tab-panel,
    .profile-media-search-panel,
    .profile-media-music-results,
    .profile-media-playlist-album-video-grid,
    .profile-photo-rich-editor,
    .profile-photo-description-editor,
    .profile-photo-edit-workspace,
    .profile-photo-edit-panel
) {
    max-height: none !important;
    overflow-y: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    min-height: 120px !important;
    height: auto !important;
}

@media (max-width: 760px) {
    html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-extra-settings {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-panel,
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-settings-card {
        padding: 16px !important;
    }
}

/* ========================================================================
   MEDIA POPUPS — formulierafwerking 2026-09-23i
   Eén hoofdplaat, standaard sitefont/-size en consistente WYSIWYG.
   ======================================================================== */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-create-editor-field,
    .profile-media-details-form,
    .profile-media-details-panel,
    .profile-media-form-stack,
    .profile-media-form-field,
    .profile-media-form-label,
    input,
    select,
    textarea,
    button,
    summary,
    legend
) {
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-form-stack {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-form-field {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-form-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    background: transparent !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-form-label small {
    color: #66727c !important;
    font: inherit !important;
    font-size: .85em !important;
    font-weight: 400 !important;
}

/* Foto: geen extra titel boven de uploadzone en Beschrijving/Album onder elkaar. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-settings-card > h2 {
    display: none !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-photo-extra-settings {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Beschrijving/Album zijn geen losse witte kaarten meer. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media :is(
    .profile-media-setting-details,
    .profile-media-setting-content,
    .profile-media-setting-field
) {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Alle echte velden gebruiken dezelfde standaardmaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    select,
    textarea
) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.4 !important;
    background: #FFFFFF !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* WYSIWYG: altijd volle breedte, rustige toolbar, geen eigen scrollbalk. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #FFFFFF !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    align-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    background: #D9E6EA !important;
    border: 0 !important;
    border-bottom: 1px solid #B8C4CD !important;
    border-radius: 3px 3px 0 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar > button {
    box-sizing: border-box !important;
    display: inline-grid !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    flex: 0 0 30px !important;
    color: #30363c !important;
    font: inherit !important;
    background: #FFFFFF !important;
    border: 1px solid #AEB9C2 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar > button:is(:hover,:focus-visible,.is-active) {
    color: #234d78 !important;
    background: #EAF3FC !important;
    border-color: #7F9FBE !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .emoji-trigger {
    margin-left: auto !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-divider {
    width: 1px !important;
    height: 22px !important;
    margin: 0 2px !important;
    flex: 0 0 1px !important;
    background: #B8C4CD !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    overflow: visible !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.5 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 0 3px 3px !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Album/Playlist: geen extra binnenplaat rond de velden. */
html body #profile :is([data-album-create-modal],[data-playlist-create-modal]) .snoeten-popup-shell--media :is(
    .profile-media-details-grid,
    .profile-media-details-card,
    .profile-layout-settings-grid,
    .profile-layout-option-card,
    .profile-media-playlist-tab-panel
) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-playlist-manage-editor[hidden] {
    display: none !important;
}

/* Video: status in de footer transparant, met dezelfde randkleur als de scheiding main/footer. */
html body #profile [data-music-create-modal] .snoeten-popup-shell--media [data-music-feedback] {
    box-sizing: border-box !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    color: inherit !important;
    font: inherit !important;
    background: transparent !important;
    border: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body #profile [data-music-create-modal] .snoeten-popup-shell--media .profile-media-footer-status {
    min-width: 0 !important;
}
html body #profile [data-music-create-modal] .snoeten-popup-shell--media .profile-media-music-results:not(:empty) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* Titel/subtekst houden hun profielpopup-hiërarchie; alle overige tekst is standaardmaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > h1 {
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-intro > p,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    .profile-media-video-help,
    .profile-layout-drop-copy,
    .profile-media-music-hint,
    .profile-photo-form-feedback,
    .profile-media-selected-status
) {
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}

@media (max-width: 900px) {
    html body #profile [data-music-create-modal] .snoeten-popup-shell--media .profile-media-music-results:not(:empty) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 620px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .emoji-trigger {
        margin-left: 0 !important;
    }
    html body #profile [data-music-create-modal] .snoeten-popup-shell--media .profile-media-music-results:not(:empty) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 2026-09-23j — Media: inklapbare beschrijving + grijze WYSIWYG-platen. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-details {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: inherit !important;
    font: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-details > summary {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    align-items: center !important;
    gap: 8px !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    list-style: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    user-select: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-details > summary::-webkit-details-marker {
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-details > summary::marker {
    content: "" !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-summary-title {
    flex: 0 0 auto !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-details > summary small {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #68737c !important;
    font: inherit !important;
    font-size: .85em !important;
    font-weight: 400 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-summary-line {
    display: block !important;
    height: 1px !important;
    min-width: 28px !important;
    margin: 0 4px !important;
    flex: 1 1 auto !important;
    background: var(--snoeten-popup-content-border, #8EAAB4) !important;
    opacity: .7 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-summary-arrow {
    box-sizing: border-box !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 3px 0 2px !important;
    flex: 0 0 auto !important;
    border-top: 6px solid #4f5962 !important;
    border-right: 5px solid transparent !important;
    border-bottom: 0 !important;
    border-left: 5px solid transparent !important;
    transform: rotate(0deg) !important;
    transform-origin: 50% 45% !important;
    transition: transform .15s ease !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-details[open] .profile-media-description-summary-arrow {
    transform: rotate(180deg) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* De volledige WYSIWYG-plaat gebruikt F0F0F0; de knoppen blijven wit voor contrast. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    background: #F0F0F0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    border-color: #B8C4CD !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar {
    border-bottom-color: #C5CDD3 !important;
}

/* 2026-09-23k — Media: teller/zoekveld/selectveld verfijning. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    line-height: 1.35 !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="search"]:focus {
    border-color: #5B9BD5 !important;
    outline: 2px solid rgba(91,155,213,.18) !important;
    outline-offset: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="search"]::-webkit-search-decoration,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="search"]::-webkit-search-cancel-button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="search"]::-webkit-search-results-button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
}

/* Foto toevoegen > Album: dezelfde veldopbouw als een selectveld in Profiel. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-select-field {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #202833 !important;
    font: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-select-field > h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #202833 !important;
    font: 700 var(--base-font-size, 16px)/1.35 var(--base-font, Arial, Helvetica, sans-serif) !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-select-help {
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #5B6570 !important;
    font: inherit !important;
    line-height: 1.4 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-select-control {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-select-control select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-select-control select:focus {
    border-color: #5B9BD5 !important;
    outline: 2px solid rgba(91,155,213,.18) !important;
    outline-offset: 0 !important;
}


/* 2026-09-23l — Media: Profiel-velden, wit schrijfvlak en inklapbare playerkleur. */
/* De WYSIWYG-omlijsting/toolbar blijft grijs; het daadwerkelijke schrijfveld is wit. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar {
    background: #F0F0F0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    color: #202833 !important;
    font: inherit !important;
    line-height: 1.5 !important;
    background: #FFFFFF !important;
}

/* Playerkleur gebruikt exact dezelfde inklapregel als Beschrijving. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playercolor-details {
    margin: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playercolor-content {
    padding-top: 8px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-playercolor-content .profile-media-playlist-theme-options {
    margin-top: 0 !important;
}

/* Tekstvelden exact volgens popup Profiel. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="password"]
) {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    line-height: 1.35 !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media :is(
    input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="password"]
):focus {
    border-color: #5B9BD5 !important;
    outline: 2px solid rgba(91,155,213,.18) !important;
    outline-offset: 0 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
}

/* 2026-09-23m — Foto toevoegen > Album: inklapbaar en veld als Vragen > Land. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-details {
    overflow: visible !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-details[open] {
    position: relative !important;
    z-index: 20 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-details-content {
    overflow: visible !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-details-content .profile-media-select-help {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #5B6570 !important;
    font: inherit !important;
    line-height: 1.4 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 9px 44px 9px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    line-height: 1.35 !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
    outline: 0 !important;
    cursor: pointer !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-input:focus {
    border-color: #4B72AA !important;
    outline: 2px solid rgba(75,114,170,.15) !important;
    outline-offset: 0 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    z-index: 4 !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    color: #33404C !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid transparent !important;
    border-radius: 0 3px 3px 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-toggle:is(:hover,:focus-visible),
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control.is-open .profile-media-album-suggestion-toggle {
    color: #315F9E !important;
    background: #EEF5FC !important;
    border-left-color: #D3DFEC !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-toggle:focus-visible {
    outline: 2px solid rgba(75,114,170,.25) !important;
    outline-offset: -2px !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-toggle svg {
    display: block !important;
    width: 13px !important;
    height: 9px !important;
    transition: transform 120ms ease !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control.is-open .profile-media-album-suggestion-toggle svg {
    transform: rotate(180deg) !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-menu[hidden] {
    display: none !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-menu {
    box-sizing: border-box !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 230px !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: 0 5px 14px rgba(32,44,58,.16) !important;
    scrollbar-color: #8EAAB4 #FFFFFF !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-option {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-option:is(:hover,:focus-visible,.is-selected) {
    color: #233F69 !important;
    background: #E9F4FE !important;
    outline: 0 !important;
}

/* 2026-09-23n — Video toevoegen: 'Geselecteerd' is gewone, randloze popuptekst. */
html body #profile [data-music-create-modal] .snoeten-popup-shell--media [data-music-feedback],
html body #profile [data-music-create-modal] .snoeten-popup-shell--media .profile-media-selected-status {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* 2026-09-23o — Foto toevoegen: Album aanmaken als vaste actie onderaan de albumkeuze. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-create {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 5px !important;
    padding-top: 9px !important;
    border-top: 1px solid #D2D7DB !important;
    border-radius: 0 0 3px 3px !important;
    color: #315F9E !important;
    font-weight: 700 !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-create > span:first-child {
    display: inline-grid !important;
    width: 18px !important;
    height: 18px !important;
    place-items: center !important;
    flex: 0 0 18px !important;
    font: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
}


/* 2026-09-23p — Video toevoegen: geselecteerd-status is echt gewone footer-tekst. */
html body #profile .profile-photo-modal.profile-media-bio-modal[data-music-create-modal]
.snoeten-popup-shell.snoeten-popup-shell--media
> .snoeten-popup-shell__footer.profile-media-selection-footer
.profile-media-footer-status {
    display: block !important;
    min-width: 0 !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal[data-music-create-modal]
.snoeten-popup-shell.snoeten-popup-shell--media
> .snoeten-popup-shell__footer.profile-media-selection-footer
.profile-media-footer-status
.profile-media-selected-status[data-music-feedback]:not(:empty) {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* 2026-09-23q — Foto toevoegen > Album: snelle actie in geopende inklapregel. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-create-inline {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    flex: 0 0 auto !important;
    margin: 0 2px 0 4px !important;
    padding: 0 !important;
    color: #315F9E !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-details[open] .profile-media-album-create-inline {
    display: inline-block !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-create-inline:is(:hover,:focus-visible) {
    color: #244D86 !important;
    text-decoration: underline !important;
    outline: 0 !important;
}


/* 2026-09-23r — Media WYSIWYG: exact dezelfde toolplaten als Prikbordbericht plaatsen,
   maar zonder de knoppen Plaatjes en YouTube. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #F0F0F0 !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar.profile-bio-editor-toolbar {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 6px 8px 0 !important;
    overflow: visible !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    border-bottom: 1px solid #C5CDD3 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    align-content: stretch !important;
    justify-content: flex-start !important;
    flex-flow: row nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scrollbar-width: thin !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--snoeten-popup-content-border, #8EAAB4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group:first-child {
    padding-left: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-buttons {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 32px !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-label {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #555 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar button.button.profile-bio-tool-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 4px !important;
    place-items: center !important;
    color: #000 !important;
    vertical-align: top !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    border: 1px solid #707070 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar button.button.profile-bio-tool-button:is(:hover,:focus-visible) {
    color: #000 !important;
    border-color: #3c7fb1 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    box-shadow: 0 0 3px #a7d9f5 !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar button.button.profile-bio-tool-button:is(:active,.is-active,[aria-pressed="true"],[aria-expanded="true"]) {
    color: #000 !important;
    border-color: #3c7fb1 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    box-shadow: inset 0 -1px 6px rgba(0,0,0,.20), inset 0 -.7em #bee6fd, 0 0 3px #a7d9f5 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-tool-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-tool-icon.is-align {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-letter-icon {
    display: block !important;
    min-width: 19px !important;
    min-height: 19px !important;
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    line-height: 19px !important;
    text-align: center !important;
    pointer-events: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-letter-icon.is-bold { font-weight: 800 !important; }
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-letter-icon.is-italic { font-style: italic !important; }
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-letter-icon.is-underline { text-decoration: underline !important; }
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-letter-icon.is-strike { text-decoration: line-through !important; }
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-icon-accent { stroke: #d33a34 !important; }
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-icon-highlight { stroke: #e0a51b !important; }

/* Het schrijfvlak blijft wit; alleen de toolplaat is F0F0F0. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    line-height: 1.5 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar.profile-bio-editor-toolbar {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group {
        flex: 0 0 auto !important;
    }
}

/* 2026-09-23s — Foto toevoegen: 'Album aanmaken' hoort ín het geopende
   albumveld, direct links van het omhoog-pijltje. Geen dubbele actie meer. */
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control .profile-media-album-create-field {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 1px !important;
    right: 41px !important;
    z-index: 5 !important;
    display: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    color: #315F9E !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    white-space: nowrap !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-left: 1px solid #D3DFEC !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control.is-open .profile-media-album-create-field {
    display: block !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control.is-open .profile-media-album-suggestion-input {
    padding-right: 166px !important;
}
html body #profile [data-photo-upload-modal] .snoeten-popup-shell--media .profile-media-album-suggestion-control .profile-media-album-create-field:is(:hover,:focus-visible) {
    color: #244D86 !important;
    background: #EEF5FC !important;
    outline: 0 !important;
    text-decoration: underline !important;
}

/* De blauwe plaat is de enige verticale scrollbar van de Media-popups. */
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media > .snoeten-popup-shell__content > .snoeten-popup-shell__body,
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-form,
html body #profile .profile-photo-modal.profile-media-bio-modal .snoeten-popup-shell--media .profile-media-details-panel {
    max-height: none !important;
    overflow: visible !important;
}

/* 2026-09-23t — Media WYSIWYG: afgeronde toolplaat + Emoji rechts van het schrijfveld,
   gelijk aan de Prikbord-opbouw. Geldt voor alle Media-beschrijvingseditors. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor.is-emoji-tools-open {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 38%) !important;
}

/* De grijze toolplaat is een zelfstandige, afgeronde plaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar.profile-bio-editor-toolbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    background: #F0F0F0 !important;
    border: 1px solid #B8C4CD !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
    outline: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon {
    min-height: 52px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Schrijfveld links, net als bij Prikbordbericht plaatsen. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor {
    grid-column: 1 !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 190px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    color: #202833 !important;
    font: inherit !important;
    line-height: 1.5 !important;
    background: #FFFFFF !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-description-editor:focus {
    border-color: #4B72AA !important;
    box-shadow: 0 0 0 1px rgba(75,114,170,.16) !important;
}

/* Emoji is een echt rechter zijpaneel; niet meer boven/onder het schrijfvlak. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
    grid-column: 2 !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 190px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.profile-bio-emoji-tools-content[style*="display: flex"] {
    display: flex !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 7px 8px 7px 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 1px solid #D5DBE0 !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header h2 {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-close {
    box-sizing: border-box !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.profile-bio-emoji-popover,.emoji-picker) {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar .emoji-categories {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar .emoji-categories > button {
    display: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
    min-width: 150px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #202020 !important;
    font: inherit !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    background: #FFFFFF !important;
    border: 1px solid #A9A39C !important;
    border-bottom-color: #FFFFFF !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-select-control {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    flex: 0 0 38px !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    place-items: center !important;
    color: #333 !important;
    background: linear-gradient(180deg,#F7F5F2 0%,#E2DDD6 100%) !important;
    border: 1px solid #A9A39C !important;
    border-radius: 0 4px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-select-control > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #444 !important;
    fill: currentColor !important;
    stroke: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 120px !important;
    margin: 0 !important;
    padding: 10px !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 6px !important;
    align-content: start !important;
    overflow: visible !important;
    background: #FFFFFF !important;
    border: 1px solid #9F9992 !important;
    border-radius: 0 4px 4px 4px !important;
    box-shadow: none !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px !important;
    place-items: center !important;
    color: #111 !important;
    font: 400 22px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
    cursor: pointer !important;
    background: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:is(:hover,:focus-visible) {
    background: #F7F5F2 !important;
    border-color: #A8A39D !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button img {
    display: block !important;
    max-width: 30px !important;
    max-height: 30px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Forceer schrijfveld en Emoji-paneel op exact dezelfde bovenlijn. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor.is-emoji-tools-open > .profile-photo-description-editor,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor.is-emoji-tools-open > .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
    align-self: start !important;
    margin-top: 0 !important;
}

/* Alleen op echt smalle schermen stapelt Emoji onder het schrijfveld.
   Op normale/kleinere desktopvensters blijft het paneel rechts en exact bovenaan uitgelijnd. */
@media (max-width: 600px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor.is-emoji-tools-open {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}


/* 2026-09-23v — Emoji-categorie selector robuust en netjes in alle popupplaten. */
.profile-bio-emoji-category-bar {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}
.profile-bio-emoji-category-bar .emoji-categories {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.profile-bio-emoji-category-bar .emoji-categories > button {
    display: none !important;
}
.profile-bio-emoji-category-select-control {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.profile-bio-emoji-category-select-control > svg {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    color: #6B7785 !important;
    fill: currentColor !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 36px 0 12px !important;
    opacity: 1 !important;
    color: #222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
    cursor: pointer !important;
}
.profile-bio-emoji-category-select-control .profile-bio-emoji-category-select:is(:hover,:focus) {
    border-color: #8EAAB4 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1px rgba(142,170,180,.35), inset 0 1px 2px rgba(0,0,0,.04) !important;
}
.profile-bio-emoji-category-select-control .profile-bio-emoji-category-select option {
    color: #222 !important;
    background: #FFFFFF !important;
}

/* 2026-09-23w — Media Emoji: geen native select-overlay meer, eigen Snoeten-dropdown. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar .emoji-categories {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar .emoji-categories > button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-control {
    position: relative !important;
    z-index: 30 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-toggle {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 10px 0 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
    cursor: pointer !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-toggle:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-control.is-open .profile-media-emoji-category-toggle {
    border-color: #8EAAB4 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1px rgba(142,170,180,.28), inset 0 1px 2px rgba(0,0,0,.04) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-toggle > svg {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    color: #66717D !important;
    fill: currentColor !important;
    transition: transform .12s ease !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-control.is-open .profile-media-emoji-category-toggle > svg {
    transform: rotate(180deg) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: -10px !important;
    right: 0 !important;
    z-index: 100 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #AEB9C2 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu[hidden] {
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    color: #222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option.is-active {
    color: #FFFFFF !important;
    background: #4B72AA !important;
    outline: 0 !important;
}


/* 2026-09-23x — Media Emoji: categorie in kop + lege Meest-gebruikt plaat weg + geen afkappen. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
    min-height: 330px !important;
    height: clamp(330px, 42vh, 430px) !important;
    max-height: 430px !important;
    overflow: hidden !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    position: relative !important;
    z-index: 20 !important;
    display: flex !important;
    min-height: 50px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header > h2,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header > h2[hidden] {
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    z-index: 40 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-toggle {
    height: 36px !important;
    min-height: 36px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    top: calc(100% + 3px) !important;
    max-height: 240px !important;
    z-index: 200 !important;
}
/* De oude categoriebalk blijft alleen als verborgen bron voor de pickerlogica bestaan. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body .profile-bio-emoji-category-bar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body :is(.profile-bio-emoji-popover,.emoji-picker) {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}
/* Als 'Meest gebruikt' leeg is: geen middelste kaart/plaat met rand en padding. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid.is-empty-most-used {
    display: block !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid.is-empty-most-used .profile-bio-emoji-empty {
    margin: 0 !important;
    padding: 2px 0 !important;
    color: #66717D !important;
    font: inherit !important;
    line-height: 1.45 !important;
    background: transparent !important;
    border: 0 !important;
}


/* 2026-09-24 — Opslagstatus staat op de voormalige Plaatjes-titelpositie. */
.profile-bio-picture-panel-header > .profile-bio-picture-storage,
.profile-bio-picture-tools-content > header > .profile-bio-picture-storage,
.groups-wysiwyg-side > header > .profile-bio-picture-storage {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 2026-09-24y — Media Emoji: categorie als platte koptekst, correcte stacking, klassieke minimale scrollbar. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body {
    position: relative !important;
    z-index: 1 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-control.is-open {
    position: relative !important;
    z-index: 1100 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-toggle {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    color: #222 !important;
    font-family: var(--base-font, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-toggle:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control.is-open .profile-media-emoji-category-toggle {
    color: #355E96 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-toggle > svg {
    width: 12px !important;
    height: 12px !important;
    color: currentColor !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 5000 !important;
    width: min(260px, calc(100vw - 80px)) !important;
    min-width: 190px !important;
    max-height: min(260px, 48vh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 1px solid #AEB9C2 !important;
    border-radius: 4px !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.20) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid {
    position: relative !important;
    z-index: 1 !important;
}

/* Alleen pijltjes + schuifknop zichtbaar; de track zelf blijft transparant. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu) {
    scrollbar-width: auto !important;
    scrollbar-color: #92AAB6 transparent !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-track,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-track-piece,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-corner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-thumb {
    min-height: 28px !important;
    background: #92AAB6 !important;
    border: 3px solid transparent !important;
    border-radius: 8px !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-thumb:hover {
    background: #7F9AA7 !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-button:single-button {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 8px 8px !important;
    border: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236F8793' d='M1 5.5 4 2l3 3.5z'/%3E%3C/svg%3E") !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.emoji-grid,.profile-media-emoji-category-menu)::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236F8793' d='m1 2.5 3 3.5 3-3.5z'/%3E%3C/svg%3E") !important;
}

/* 2026-09-24z — Media Emoji: categorie-menu zweeft OVER de smileyplaat en neemt geen layoutruimte in. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    position: relative !important;
    z-index: 9000 !important;
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control.is-open {
    position: relative !important;
    z-index: 9100 !important;
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 9999 !important;
    margin: 0 !important;
    transform: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body :is(.profile-bio-emoji-popover,.emoji-picker),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid {
    position: relative !important;
    z-index: 1 !important;
}

/* 2026-09-24 — Media emoji-paneel: vlakke opbouw zonder interne platen/randen. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-body {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji :is(.profile-bio-emoji-popover,.emoji-picker) {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-menu,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-dropdown,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji [data-emoji-category-menu] {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-menu > *,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-category-dropdown > *,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji [data-emoji-category-menu] > * {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* 2026-09-24b — categorielijst vlak, direct over de smileyplaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    top: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10000 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* 2026-09-24c — Emoji-categorieën: volledige vlakke overlay over de smileyplaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.is-category-menu-open .emoji-grid {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.is-category-menu-open .emoji-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    top: 100% !important;
    left: -8px !important;
    right: auto !important;
    width: calc(100% + 54px) !important;
    height: var(--media-emoji-category-menu-height, 280px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10000 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option {
    min-height: 42px !important;
    padding: 8px 22px !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option.is-active {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 2026-09-24d — Emoji categorie-menu: maar één actieve blauwe regel; hover rustig grijs. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option {
    color: #222 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option:not(.is-active):is(:hover,:focus-visible) {
    color: #222 !important;
    background: #F0F0F0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option.is-active,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option.is-active:is(:hover,:focus-visible) {
    color: #FFFFFF !important;
    background: #4B72AA !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}


/* 2026-09-24e — Media Emoji-categorieën openen zoals Foto > Album. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 10000 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: min(280px, calc(100vw - 80px)) !important;
    min-width: 220px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 230px !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 1px solid #BFC5CA !important;
    border-radius: 4px !important;
    box-shadow: 0 5px 14px rgba(32,44,58,.16) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu[hidden] {
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    color: #202833 !important;
    font: inherit !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option:not(.is-active):is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option.is-active,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option.is-active:is(:hover,:focus-visible) {
    color: #233F69 !important;
    background: #E9F4FE !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* Het menu is alleen een dropdown; het smiley-overzicht blijft eronder zichtbaar/scrollbaar. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.is-category-menu-open .emoji-grid {
    overflow-y: auto !important;
    scrollbar-width: auto !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji.is-category-menu-open .emoji-grid::-webkit-scrollbar {
    display: initial !important;
    width: 14px !important;
}


/* 2026-09-24w — Emoji categorielijst valt exact top/right/bottom/left 0 over de smileyplaat. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji {
    position: relative !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-menu {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    z-index: 10150 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-media-emoji-category-option {
    margin: 0 !important;
    padding: 10px 20px !important;
}


/* 2026-09-24j — Emoji categorie + sluiten als aangesloten .button splitgroep. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    justify-content: flex-end !important;
    gap: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control {
    margin: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header button.button.profile-media-emoji-category-toggle {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: min(240px, calc(100% - 32px)) !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #000 !important;
    font-family: var(--base-font) !important;
    font-size: var(--base-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    border: 1px solid #707070 !important;
    border-radius: 3px 0 0 3px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header button.button.profile-media-emoji-category-toggle:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control.is-open button.button.profile-media-emoji-category-toggle {
    color: #000 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    border-color: #3C7FB1 !important;
    box-shadow: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close.button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close {
    box-sizing: border-box !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    margin-left: -1px !important;
    padding: 0 !important;
    border-radius: 0 3px 3px 0 !important;
}


/* 2026-09-24k — linker Emoji-categoriebutton vult de kop exact tot aan Sluiten. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header button.button.profile-media-emoji-category-toggle {
    width: 100% !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    justify-content: space-between !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close.button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close {
    flex: 0 0 32px !important;
    align-self: stretch !important;
    height: 28px !important;
    min-height: 28px !important;
}

/* 2026-09-24l — Emoji categorie + sluiten pixelstrak naast elkaar. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header button.button.profile-media-emoji-category-toggle {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 3px 0 0 3px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close.button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close {
    flex: 0 0 32px !important;
    width: 32px !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
}

/* 2026-09-24m — Emoji categorie + sluiten exact dezelfde top/bottom-lijn. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    padding: 8px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-media-emoji-category-control {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header button.button.profile-media-emoji-category-toggle {
    display: flex !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    align-self: stretch !important;
    border-radius: 3px 0 0 3px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close.button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .profile-bio-emoji-panel-header .profile-bio-emoji-close {
    display: flex !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
}


/* 2026-09-24l — Media Emoji hover blijft volledig binnen de eigen cel. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid span {
    transform: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:hover,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:focus-visible,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid span:hover {
    transform: none !important;
}


/* 2026-09-24n — Media Emoji hover gebruikt dezelfde Snoeten-blauwe kleur als de categorielijst. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid span:hover {
    background: #4B72AA !important;
    border-color: #4B72AA !important;
    box-shadow: none !important;
    outline: 0 !important;
}


/* 2026-09-24o — zichtbare Emoji-hover: geen kleur, alleen smiley iets groter. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button {
    overflow: hidden !important;
    transition: font-size .12s ease !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:is(:hover,:focus-visible),
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid span:hover {
    background: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:is(:hover,:focus-visible) {
    font-size: 28px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button img,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid span img {
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform .12s ease !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid button:is(:hover,:focus-visible) img,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-emoji .emoji-grid span:hover img {
    transform: scale(1.18) !important;
}


/* 2026-09-24p — Media WYSIWYG: Emoji ook bij Album/Playlist exact rechts naast schrijfveld. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-rich-editor {
    display: grid !important;
    grid-template-areas:
        "toolbar toolbar"
        "editor emoji" !important;
    grid-template-columns: minmax(0, 1fr) 0 !important;
    grid-template-rows: auto minmax(190px, auto) !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-rich-editor.is-emoji-tools-open {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 38%) !important;
    column-gap: 10px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-rich-toolbar.profile-bio-editor-toolbar {
    grid-area: toolbar !important;
    width: 100% !important;
    min-width: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-description-editor {
    grid-area: editor !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 190px !important;
    margin: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
    grid-area: emoji !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 190px !important;
    margin: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-rich-emoji.profile-bio-emoji-tools-content[style*="display: flex"] {
    display: flex !important;
}
@media (max-width: 560px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-media-description-content .profile-photo-rich-editor.is-emoji-tools-open {
        grid-template-areas:
            "toolbar"
            "editor"
            "emoji" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 0 !important;
    }
}


/* 2026-09-24q — Media WYSIWYG structure: editor and Emoji are true siblings in row 2. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor {
    display: grid !important;
    grid-template-areas:
        "toolbar toolbar"
        "editor emoji" !important;
    grid-template-columns: minmax(0,1fr) 0 !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor.is-emoji-tools-open {
    grid-template-columns: minmax(0,1fr) minmax(260px,38%) !important;
    column-gap: 10px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor > .profile-photo-rich-toolbar {
    grid-area: toolbar !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor > .profile-photo-description-editor {
    grid-area: editor !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor > .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
    grid-area: emoji !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
}
@media (max-width: 560px) {
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor.is-emoji-tools-open {
        grid-template-areas:
            "toolbar"
            "editor"
            "emoji" !important;
        grid-template-columns: minmax(0,1fr) !important;
        column-gap: 0 !important;
    }
    html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-editor > .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

/* 2026-09-24 — sitebrede Emoji-kiezer: popup-eindlaag. */
html body .snoeten-emoji-sitewide-panel {
    position: relative !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #8EAAB4 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-header,
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-panel-header {
    position: relative !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 34px !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-panel-header > h2,
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-panel-header > h2[hidden] {
    display: none !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-category-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .snoeten-emoji-sitewide-panel button.button.snoeten-emoji-sitewide-category-toggle {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 10px 0 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 3px 0 0 3px !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-close,
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-close {
    display: flex !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
}
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-panel-body,
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-picker,
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-popover {
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body .snoeten-emoji-sitewide-panel .emoji-categories,
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-category-bar,
html body .snoeten-emoji-sitewide-panel .profile-bio-emoji-category-select-control:not(.snoeten-emoji-sitewide-category-control) {
    display: none !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-grid,
html body .snoeten-emoji-sitewide-panel .emoji-grid {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 170px !important;
    max-height: 320px !important;
    margin: 0 !important;
    padding: 8px !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .snoeten-emoji-sitewide-panel .emoji-grid button,
html body .snoeten-emoji-sitewide-panel .emoji-grid span {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .snoeten-emoji-sitewide-panel .emoji-grid button:is(:hover,:focus-visible),
html body .snoeten-emoji-sitewide-panel .emoji-grid span:hover {
    font-size: 28px !important;
    background: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body .snoeten-emoji-sitewide-panel .emoji-grid button img,
html body .snoeten-emoji-sitewide-panel .emoji-grid span img {
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform .12s ease !important;
}
html body .snoeten-emoji-sitewide-panel .emoji-grid button:is(:hover,:focus-visible) img,
html body .snoeten-emoji-sitewide-panel .emoji-grid span:hover img {
    transform: scale(1.18) !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-menu {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-menu[hidden] { display: none !important; }
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-option {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-option:not(.is-active):is(:hover,:focus-visible) {
    color: #202833 !important;
    background: #EEF3F8 !important;
}
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-option.is-active,
html body .snoeten-emoji-sitewide-panel .snoeten-emoji-sitewide-option.is-active:is(:hover,:focus-visible) {
    color: #FFFFFF !important;
    background: #4B72AA !important;
}


/* 2026-09-24 — Media > Foto toevoegen is de canonieke Emoji-plaat.
   Prikbordbericht plaatsen, Gastenboekbericht plaatsen en Bio aanpassen
   gebruiken exact dezelfde plaat, zonder oude popupvarianten. */
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone.profile-bio-emoji-tools-content {
    position: relative !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 250px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid var(--snoeten-popup-surface-border, #8EAAB4) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone.profile-bio-emoji-tools-content:not([hidden]) {
    display: flex !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone.profile-bio-emoji-tools-content[hidden] {
    display: none !important;
}

html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-bio-emoji-panel-header {
    position: relative !important;
    z-index: 9000 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-bio-emoji-panel-header > h2,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-bio-emoji-panel-header > h2[hidden] {
    display: none !important;
}

html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-media-emoji-category-control,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .snoeten-emoji-sitewide-category-control {
    position: relative !important;
    z-index: 9100 !important;
    display: block !important;
    grid-column: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone button.button.profile-media-emoji-category-toggle,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone button.button.snoeten-emoji-sitewide-category-toggle {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 10px 0 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
    color: #000 !important;
    font-family: var(--base-font) !important;
    font-size: var(--base-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    border: 1px solid #707070 !important;
    border-radius: 3px 0 0 3px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone button.button.profile-media-emoji-category-toggle:is(:hover,:focus-visible),
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone button.button.snoeten-emoji-sitewide-category-toggle:is(:hover,:focus-visible),
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-control,.snoeten-emoji-sitewide-category-control).is-open button.button {
    color: #000 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    border-color: #3C7FB1 !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-toggle,.snoeten-emoji-sitewide-category-toggle) > svg {
    display: block !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    fill: currentColor !important;
}

html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-bio-emoji-panel-header .profile-bio-emoji-close.button,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-bio-emoji-panel-header .profile-bio-emoji-close {
    display: flex !important;
    grid-column: 2 !important;
    box-sizing: border-box !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
}

html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .profile-bio-emoji-panel-body {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-bio-emoji-popover,.emoji-picker) {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-categories,.profile-bio-emoji-category-bar,.profile-bio-emoji-category-select-control:not(.snoeten-emoji-sitewide-category-control):not(.profile-media-emoji-category-control)) {
    display: none !important;
}

html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 170px !important;
    height: auto !important;
    max-height: 320px !important;
    margin: 0 !important;
    padding: 8px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid button,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid span {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px !important;
    place-items: center !important;
    overflow: hidden !important;
    color: #111 !important;
    font: 400 22px/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
    cursor: pointer !important;
    background: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    transition: font-size .12s ease !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid button:is(:hover,:focus-visible),
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid span:hover {
    font-size: 28px !important;
    background: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid button img,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid span img {
    display: block !important;
    max-width: 30px !important;
    max-height: 30px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform .12s ease !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid button:is(:hover,:focus-visible) img,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone .emoji-grid span:hover img {
    transform: scale(1.18) !important;
}

/* Categorieën liggen, net als in Foto toevoegen, over de complete Emoji-plaat:
   dus ook over de categorienaam en de sluitknop. */
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10150 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu)[hidden] {
    display: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-option,.snoeten-emoji-sitewide-option) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    color: #202833 !important;
    font: inherit !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-option,.snoeten-emoji-sitewide-option):not(.is-active):is(:hover,:focus-visible) {
    color: #202833 !important;
    background: #F0F0F0 !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-option,.snoeten-emoji-sitewide-option).is-active,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.profile-media-emoji-category-option,.snoeten-emoji-sitewide-option)[aria-selected="true"] {
    color: #FFFFFF !important;
    background: #4B72AA !important;
}

html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-grid,.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu) {
    scrollbar-width: auto !important;
    scrollbar-color: #92AAB6 transparent !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-grid,.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu)::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-grid,.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu)::-webkit-scrollbar-track,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-grid,.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu)::-webkit-scrollbar-track-piece,
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-grid,.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu)::-webkit-scrollbar-corner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body :is(#form-posts #dashboardComposer, #bioEdit.snoeten-popup-shell--profile-bio, #guestbookForm) .snoeten-media-emoji-clone :is(.emoji-grid,.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu)::-webkit-scrollbar-thumb {
    min-height: 28px !important;
    background: #92AAB6 !important;
    border: 3px solid transparent !important;
    border-radius: 8px !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}


/* =========================================================
   2026-09-24 r1210 — Prikbord: compacter Emoji-paneel + stabiele WYSIWYG-balk
   ---------------------------------------------------------
   - Het Emoji/Plaatjes-zijpaneel in Prikbordbericht plaatsen wordt compacter
     zodat het geen halve popup meer inneemt.
   - De WYSIWYG-balk gebruikt bij Emoji en Plaatjes exact dezelfde breedte- en
     uitlijnlogica; groepen blijven compact links en rekken niet uit.
   ========================================================= */
@media (min-width: 761px) {
    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
        grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 320px) !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        width: 100% !important;
        max-width: clamp(260px, 28vw, 320px) !important;
        justify-self: stretch !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open)
      > #bioEditOptions.profile-bio-editor-toolbar {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open)
      > #bioEditOptions .profile-bio-ribbon {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    #profileBioEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open)
      > #bioEditOptions .profile-bio-ribbon-group {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    html body #form-posts #dashboardComposer .snoeten-media-emoji-clone.profile-bio-emoji-tools-content,
    html body #form-posts #dashboardComposer .profile-bio-picture-tools-content {
        max-width: clamp(260px, 28vw, 320px) !important;
    }
}


/* =========================================================
   2026-09-24 — Prikbord Emoji/Plaatjes vaste zijbreedte
   ---------------------------------------------------------
   De rechter tools-kolom is voor Emoji en Plaatjes exact gelijk.
   De categorie-overlay blijft altijd BINNEN de Emoji-plaat.
   De WYSIWYG-balk blijft over de volle editorbreedte staan.
   ========================================================= */
@media (min-width: 761px) {
    html body #form-posts #dashboardComposer.snoeten-popup-shell
    > .dashboard-post-compose-content
    > #profileBioEditorContent.profile-bio-editor-content:is(.is-emoji-tools-open,.is-picture-tools-open) {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    > .dashboard-post-compose-content
    > #profileBioEditorContent.profile-bio-editor-content
    > :is(#profileBioEmojiToolsContent,#profileBioPictureToolsContent) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    > .dashboard-post-compose-content
    > #profileBioEditorContent.profile-bio-editor-content:is(.is-emoji-tools-open,.is-picture-tools-open)
    > #bioEditOptions.profile-bio-editor-toolbar {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    > .dashboard-post-compose-content
    > #profileBioEditorContent.profile-bio-editor-content:is(.is-emoji-tools-open,.is-picture-tools-open)
    > #bioEditOptions .profile-bio-ribbon {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    html body #form-posts #dashboardComposer.snoeten-popup-shell
    > .dashboard-post-compose-content
    > #profileBioEditorContent.profile-bio-editor-content:is(.is-emoji-tools-open,.is-picture-tools-open)
    > #bioEditOptions .profile-bio-ribbon-group {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* De categorie-overlay is nooit groter dan de Emoji-plaat zelf. */
html body #form-posts #dashboardComposer
#profileBioEmojiToolsContent.snoeten-media-emoji-clone {
    position: relative !important;
    isolation: isolate !important;
    contain: layout paint !important;
    overflow: hidden !important;
}

html body #form-posts #dashboardComposer
#profileBioEmojiToolsContent.snoeten-media-emoji-clone
:is(.profile-media-emoji-category-menu,.snoeten-emoji-sitewide-menu) {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
}


/* =========================================================
   2026-09-24 — Gastenboekbericht: Emoji/Plaatjes naast schrijfveld
   ---------------------------------------------------------
   Desktop gebruikt één stabiele tweekoloms-editor: links schrijven,
   rechts exact 320px voor zowel Emoji als Plaatjes. De toolbar blijft
   altijd over de volledige bovenrij staan. Op mobiel blijven de panelen
   bewust onder het schrijfveld staan.
   ========================================================= */
@media (min-width: 761px) {
    html body > #guestbookForm.snoeten-popup-shell--guestbook
    > .guestbook-popup-content
    > #guestbookEditorContent.snoeten-popup-shell__body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(400px, auto) !important;
        align-items: stretch !important;
        align-content: start !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    > .guestbook-popup-content
    > #guestbookEditorContent.snoeten-popup-shell__body:is(.is-picture-tools-open,.is-emoji-tools-open) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 320px !important;
        grid-template-rows: auto minmax(400px, auto) !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > #guestbookFormOptions.guestbook-editor-toolbar {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > #guestbookFormField {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        box-sizing: border-box !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        margin: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content):not([hidden]) {
        display: flex !important;
        flex-direction: column !important;
    }

    html body > #guestbookForm.snoeten-popup-shell--guestbook
    #guestbookEditorContent > :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
        display: none !important;
    }
}


/* =========================================================
   2026-09-24 — Bio aanpassen: tools echt naast schrijfveld
   ---------------------------------------------------------
   Desktop: toolbar over volle breedte, schrijfveld links en een vaste
   rechterkolom van 320px voor zowel Emoji als Plaatjes. Alleen mobiel
   stapelt de toolplaat onder het schrijfveld.
   ========================================================= */
@media (min-width: 761px) {
    html body #bioEdit.snoeten-popup-shell--profile-bio
    > .profile-bio-popup-content
    > #profileBioEditorContent.snoeten-popup-shell__body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(360px, auto) !important;
        align-items: stretch !important;
        align-content: start !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    > .profile-bio-popup-content
    > #profileBioEditorContent.snoeten-popup-shell__body:is(.is-emoji-tools-open,.is-picture-tools-open) {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > #bioEditOptions.profile-bio-editor-toolbar {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > #bioEditField.profile-bio-editor-field {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        align-self: stretch !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > :is(#profileBioEmojiToolsContent,#profileBioPictureToolsContent) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        box-sizing: border-box !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        margin: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > :is(#profileBioEmojiToolsContent,#profileBioPictureToolsContent):not([hidden]) {
        display: flex !important;
        flex-direction: column !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent > :is(#profileBioEmojiToolsContent,#profileBioPictureToolsContent)[hidden] {
        display: none !important;
    }
}


/* =========================================================
   2026-09-24 — Foto toevoegen + Bio aanpassen: definitieve zijpanelen
   ---------------------------------------------------------
   Eindlaag na alle module-CSS. Op desktop staat Emoji/Plaatjes altijd
   rechts naast het schrijfveld. De toolbar blijft over de volle bovenrij.
   ========================================================= */
@media (min-width: 761px) {
    /* Bio aanpassen */
    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent.profile-bio-editor-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(360px, auto) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent.profile-bio-editor-content:is(.is-emoji-tools-open,.is-picture-tools-open) {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent.profile-bio-editor-content > #bioEditOptions {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent.profile-bio-editor-content > #bioEditField {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body #bioEdit.snoeten-popup-shell--profile-bio
    #profileBioEditorContent.profile-bio-editor-content > :is(#profileBioEmojiToolsContent,#profileBioPictureToolsContent) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        box-sizing: border-box !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        margin: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    /* Foto toevoegen */
    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor {
        display: grid !important;
        grid-template-areas:
            "toolbar toolbar"
            "editor emoji" !important;
        grid-template-columns: minmax(0, 1fr) 0 !important;
        grid-template-rows: auto minmax(190px, auto) !important;
        column-gap: 0 !important;
        row-gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor.is-emoji-tools-open {
        grid-template-columns: minmax(0, 1fr) 320px !important;
        column-gap: 10px !important;
    }

    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor > .profile-photo-rich-toolbar {
        grid-area: toolbar !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor > .profile-photo-description-editor {
        grid-area: editor !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor > .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
        grid-area: emoji !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        position: relative !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
        justify-self: stretch !important;
        transform: none !important;
        overflow: hidden !important;
    }

    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor.is-emoji-tools-open
    > .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (max-width: 760px) {
    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor.is-emoji-tools-open {
        grid-template-areas:
            "toolbar"
            "editor"
            "emoji" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 0 !important;
    }
    html body #profile [data-photo-upload-modal] .profile-photo-rich-editor > .profile-photo-rich-emoji.profile-bio-emoji-tools-content {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* 2026-09-24 — Media WYSIWYG: overal exact 1px witte binnenrand; buitenrand blijft behouden. */
html body #profile .profile-photo-modal.profile-media-bio-modal .profile-photo-rich-toolbar {
    position: relative !important;
}
html body #profile .profile-photo-modal.profile-media-bio-modal .profile-photo-rich-toolbar::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px 3px 0 0 !important;
    background: transparent !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 1px 0 0 #FFFFFF,
        inset -1px 0 0 #FFFFFF,
        inset 0 -1px 0 #FFFFFF !important;
    pointer-events: none !important;
    z-index: 20 !important;
}


/* 2026-09-24 — Media WYSIWYG: scheidingslijnen exact dezelfde kleur als de labels (o.a. “Alinea”). */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar {
    --profile-media-wysiwyg-label-color: #555;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-label {
    color: var(--profile-media-wysiwyg-label-color) !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group {
    border-right-color: var(--profile-media-wysiwyg-label-color) !important;
}

/* 2026-09-24 — Media WYSIWYG: vier toolgroepen gelijk verdeeld met 1px witte scheidingslijn van rand tot rand. */
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon {
    justify-content: stretch !important;
    /* Niet clippen: de scheidingslijnen lopen 6px omhoog door de toolbar-padding
       en moeten exact aansluiten op de witte binnenrand boven en onder. */
    overflow: visible !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group {
    position: relative !important;
    flex: 1 1 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    border-right: 0 !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group:first-child,
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group:last-child {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group::after {
    content: none !important;
    display: none !important;
}
html body #profile .profile-media-bio-modal .snoeten-popup-shell--media .profile-photo-rich-toolbar .profile-bio-ribbon-group:not(:last-child)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -6px !important;
    right: -0.5px !important;
    bottom: -1px !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    transform: scaleX(0.7) !important;
    transform-origin: center center !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 21 !important;
}

/* 2026-09-24 — Playlist bewerken: selectie-status rustig en Video’s beheren als eigen tab. */
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media [data-playlist-tab-feedback]:not(.is-error) {
    box-sizing: border-box !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 14px) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-media-playlist-tab-panel[data-playlist-edit-panel="manage"] .profile-playlist-manage-editor {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body #profile [data-playlist-create-modal] .snoeten-popup-shell--media .profile-media-playlist-tab-panel[data-playlist-edit-panel="manage"] .profile-media-playlist-manage-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 130px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    color: #6f7478 !important;
    font: inherit !important;
    font-weight: 400 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* 2026-10-18 — Vormgeving > Afbeeldingen > Achtergrond:
   de achtergrondmaker is geen losse plaat, maar het onderste gedeelte van
   dezelfde Achtergrond-plaat, met uitsluitend een witte tussenlijn. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages
.profile-layout-upload-card[data-upload-type="background"] > .profile-background-creator,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages
.profile-layout-upload-card[data-upload-type="background"] > .profile-background-creator {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
}
/* De witte lijn loopt tot aan de linker- en rechterrand van de kaart.
   De achtergrondmaker zelf behoudt zijn oorspronkelijke uitlijning. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages
.profile-layout-upload-card[data-upload-type="background"] > .profile-background-creator::before,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages
.profile-layout-upload-card[data-upload-type="background"] > .profile-background-creator::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: -14px !important;
    right: -14px !important;
    height: 1px !important;
    background: #fff !important;
    pointer-events: none !important;
}


/* 2026-10-18 — Zelf achtergrond maken: meerdere patroonlagen, binnen dezelfde plaat. */
#layoutEdit #profileLayoutImages .profile-background-layers-hint {
    margin: 4px 0 12px !important;
    color: #5b6570 !important;
    line-height: 1.4 !important;
}
#layoutEdit #profileLayoutImages .profile-background-layers-list {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer {
    padding: 12px !important;
    background: rgba(255,255,255,.33) !important;
    border: 1px solid rgba(142,170,180,.75) !important;
    border-radius: 6px !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-heading,
#layoutEdit #profileLayoutImages .profile-background-layer-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-heading {
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 30px !important;
    padding: 0 6px !important;
    border: 1px solid #9aafc5 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #375c91 !important;
    cursor: pointer !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-actions button:disabled {
    cursor: default !important;
    opacity: .35 !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-visible {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 400 !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 14px !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-fields label {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    color: #28384b !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-fields select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    border: 1px solid #bcc8d1 !important;
    border-radius: 4px !important;
    background: #fff !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-fields input[type="range"] {
    width: 100% !important;
    margin: 0 !important;
}
#layoutEdit #profileLayoutImages .profile-background-layer-fields input[type="color"] {
    width: 48px !important;
    height: 36px !important;
    padding: 2px !important;
    border: 1px solid #bcc8d1 !important;
    border-radius: 4px !important;
}
#layoutEdit #profileLayoutImages .profile-background-add-layer {
    margin-top: 2px !important;
}
#layoutEdit #profileLayoutImages .profile-background-layers-limit {
    display: block !important;
    margin-top: 7px !important;
    color: #5b6570 !important;
}
@media (max-width: 650px) {
    #layoutEdit #profileLayoutImages .profile-background-layer-fields {
        grid-template-columns: 1fr !important;
    }
}


/* 2026-10-18 v177 — Afbeeldingen: normale tekst zwart, aanwijzingen grijs.
   De kleuren van acties, iconen en de afbeelding die de gebruiker maakt blijven gelijk. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(
    .profile-layout-upload-heading h2,
    .profile-layout-drop-copy strong,
    .profile-background-creator-heading h3,
    .profile-background-patterns legend,
    .profile-background-pattern-option > span:last-child,
    .profile-background-setting-details > summary,
    .profile-cover-placement .profile-cover-setting-details > summary,
    .profile-background-color-field > span:first-child,
    .profile-background-text-field > span:first-child,
    .profile-background-slider-field > span:first-child,
    .profile-background-creator-preview-label,
    .profile-background-layer-heading strong,
    .profile-background-layer-visible,
    .profile-background-layer-fields label,
    .profile-background-layer-fields select,
    .profile-background-color-control input[type="text"],
    .profile-background-text-field input[type="text"],
    .profile-background-layer-actions button
) {
    color: #000 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages :is(
    .profile-layout-upload-heading p,
    .profile-layout-drop-copy small,
    .profile-background-creator-preview-hint,
    .profile-background-layers-hint,
    .profile-background-layers-limit,
    .profile-background-slider-field small,
    .profile-cover-position-hint
) {
    color: #5b6570 !important;
}
/* Ook bij verouderde (gecachete) editor-HTML de verwijderde beschrijving verbergen. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages
.profile-layout-upload-card[data-upload-type="background"] > .profile-layout-upload-heading p {
    display: none !important;
}


/* 2026-10-18 v179 — Achtergrondmaker: compacte kop, meescrollend voorbeeld, laagposities. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-heading,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-heading {
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-layout,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-layout {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: start !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-preview-wrap,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-preview-wrap {
    position: sticky !important;
    top: 12px !important;
    align-self: start !important;
    z-index: 2 !important;
}
#layoutEdit #profileLayoutImages .profile-background-position-reset {
    margin-top: 12px !important;
}
#layoutEdit #profileLayoutImages .profile-background-position-grid output,
#layoutEdit #profileLayoutImages .profile-background-layer-fields output {
    font-variant-numeric: tabular-nums !important;
}
/* In een enkelkoloms venster blijft het voorbeeld in de normale volgorde staan. */
@container snoeten-profile-layout-popup (max-width: 760px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-preview-wrap,
    html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-preview-wrap {
        position: static !important;
    }
}
@media (max-width: 900px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutImages .profile-background-creator-preview-wrap,
    html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-preview-wrap {
        position: static !important;
    }
}

/* v180 — Vormgeving: Kleuren gebruikt exact dezelfde subtabbalk als Afbeeldingen.
   De drie panelen hergebruiken dezelfde doorlopende lichtblauwgrijze plaat. */
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-color-subtabs[hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-color-subtabs {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    overflow-x: auto !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-color-subtabs .profile-color-subtab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    color: #000 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-color-subtabs .profile-color-subtab:is(.is-active,[aria-selected="true"]) {
    color: #000 !important;
    background: #D9E6EA !important;
    border-bottom-color: #D9E6EA !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    background: #D9E6EA !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-surface {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #D9E6EA !important;
    border: 1px solid #8EAAB4 !important; /* grijsblauwe buitenrand */
    border-radius: 0 0 6px 6px !important;
    box-shadow: inset 0 0 0 1px #FFFFFF !important; /* witte binnenrand */
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-color-tab-panel[hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-color-tab-panel {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-group-heading {
    padding: 16px 20px 12px !important;
    color: #000 !important;
    background: transparent !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors :is(.profile-theme-color-copy strong,.profile-theme-color-group-heading h2) {
    color: #000 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors :is(.profile-theme-color-copy span,.profile-theme-color-group-heading p) {
    color: #5b6570 !important;
}
/* De witte lijnen lopen van plaatrand tot plaatrand; alleen de rij-inhoud houdt padding. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-list {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-card {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-inline: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-card + .profile-theme-color-card {
    border-top: 1px solid #fff !important;
}


/* v181 — Kleuren: gebruik het standaard lettertype en de standaardgrootte.
   Uitleg blijft grijs, labels zwart; geen afwijkende 12/13/14px teksten. */
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-color-subtabs .profile-color-subtab,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-surface {
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors :is(
    .profile-theme-color-group-heading h2,
    .profile-theme-color-group-heading p,
    .profile-theme-color-copy strong,
    .profile-theme-color-copy span,
    .profile-theme-color-card [data-profile-surface-input],
    .profile-theme-color-default
) {
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
/* v180 — Tekst en Indeling: gewone UI-tekst zwart, alleen uitleg grijs. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance :is(.profile-layout-option-card h2, .profile-layout-typography-field > span, .profile-layout-typography-field select, #textColorInput),
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder :is(.profile-layout-section-heading h1, .profile-layout-removed > strong, .profile-layout-manager-column > h2, .profile-layout-manager-wide > h2, .profile-layout-manager-block-title, .profile-layout-manager-block) {
    color: #000 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance .profile-layout-options-help,
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder :is(.profile-layout-section-heading p,.profile-layout-removed-empty,.profile-layout-manager-empty,.status-box) {
    color: #5b6570 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder :is(.profile-layout-removed,.profile-layout-manager-column,.profile-layout-manager-wide) {
    background: #D9E6EA !important;
    border-color: #8EAAB4 !important;
}

html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-image-subtabs-bar .profile-image-subtabs[hidden] {
    display: none !important;
}

/* Tabs scheiden de groepen al: geen extra lijn boven een nieuw kleurpaneel. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-group + .profile-theme-color-group {
    border-top: 0 !important;
}

/* Kleurvelden herschikken op basis van de vensterbreedte, niet de monitor. */
@container snoeten-profile-layout-popup (max-width: 760px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-card {
        grid-template-columns: minmax(0,1fr) !important;
    }
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-controls {
        width: 100% !important;
        grid-template-columns: minmax(0,1fr) auto !important;
    }
}
@container snoeten-profile-layout-popup (max-width: 460px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-controls {
        grid-template-columns: minmax(0,1fr) !important;
    }
}

/* v183: Kleuren -- rij-inhoud met padding, witte scheidingslijnen rand-tot-rand. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-card {
    padding: 16px 20px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-card + .profile-theme-color-card {
    border-top: 1px solid #fff !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-opacity {
    display: grid !important;
    grid-template-columns: auto minmax(70px, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    grid-column: 1 / -1 !important;
    color: #000 !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-opacity [data-profile-surface-opacity] {
    min-width: 0 !important;
    width: 100% !important;
    accent-color: #4B72AA !important;
    cursor: pointer !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-opacity output {
    min-width: 44px !important;
    text-align: right !important;
    color: #000 !important;
    font: inherit !important;
}
@container snoeten-profile-layout-popup (max-width: 460px) {
    html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutColors .profile-theme-color-card {
        padding: 14px !important;
    }
}

/* v185 – Tekst en Indeling: afgeronde inhoudsplaten, niet het tabpaneel. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance
:is(.profile-layout-text-preview, .profile-layout-option-card),
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutBlockOrder
:is(.profile-layout-removed, .profile-layout-manager-column, .profile-layout-manager-wide) {
    border-radius: 8px !important;
}

/* v185 – Herstelopties staan links in de vaste footer, Sluiten blijft rechts. */
html body #layoutEdit.snoeten-popup-shell--profile-layout > .profile-layout-popup-footer {
    justify-content: space-between !important;
    gap: 12px !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-footer-reset-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-footer-reset-actions > button[hidden] {
    display: none !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout .profile-layout-footer-reset-actions > .button {
    margin: 0 !important;
    white-space: normal !important;
}
html body #layoutEdit.snoeten-popup-shell--profile-layout > .profile-layout-popup-footer > nav {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}


/* v190 — Tekstpreview: echte profielplaatkleur, anders een witte plaat. */
html body #layoutEdit.snoeten-popup-shell--profile-layout #profileLayoutAppearance
.profile-layout-text-preview-content {
    background-color: #ffffff;
    border-radius: 0 0 6px 6px;
}
#layoutEdit #profileTextPaletteOptions[hidden] { display: none !important; }
#layoutEdit .profile-text-effects-options { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
#layoutEdit .profile-text-effects-options label,
#layoutEdit .profile-text-palette label { display:flex; align-items:center; gap:7px; color:#000; }
#layoutEdit .profile-text-palette { display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
#layoutEdit .profile-text-palette input[type=color] { width:44px; height:34px; padding:2px; cursor:pointer; }
#layoutEdit .profile-layout-text-preview.profile-preview-rainbow :is(
    .profile-layout-text-preview-identity strong, .profile-layout-text-preview-identity span,
    .profile-layout-text-preview-copy strong, .profile-layout-text-preview-copy span,
    .profile-layout-text-preview-copy a
) {
    background: var(--profile-text-gradient, linear-gradient(95deg,#f19620,#35b8e5,#9954bf)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
#layoutEdit .profile-layout-text-preview.profile-preview-3d :is(
    .profile-layout-text-preview-identity strong, .profile-layout-text-preview-identity span,
    .profile-layout-text-preview-copy strong, .profile-layout-text-preview-copy span,
    .profile-layout-text-preview-copy a
) {
    text-shadow: 1px 1px 0 rgba(22,30,48,.28), 2px 2px 0 rgba(22,30,48,.22),
                 3px 3px 1px rgba(22,30,48,.14) !important;
}

/* r386 — Gastenboek legen: oorspronkelijke blauwe popupkleur en één plaat. */
html body .snoeten-popup-shell--guestbook-clear {
    --snoeten-popup-width: min(520px, calc(100vw - 24px));
    --snoeten-popup-max-width: 520px;
    --snoeten-popup-height: auto;
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-footer-height: 68px;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(570px, calc(100dvh - 24px)) !important;
}
html body .snoeten-popup-shell--guestbook-clear.is-open {
    grid-template-rows: 52px minmax(0, 1fr) 68px !important;
}
html body .snoeten-popup-shell--guestbook-clear .snoeten-popup-shell__content {
    overflow-y: auto !important;
}
html body .snoeten-popup-shell--guestbook-clear .snoeten-popup-shell__body {
    padding: 22px !important;
    color: #23354a !important;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-intro { margin: 0 0 16px !important; }
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-options {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    border: 0 !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-legend {
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-choice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #a8beca !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-choice:has(input:checked) {
    border-color: #4b78be !important;
    background: #f1f7ff !important;
}
html body .snoeten-popup-shell--guestbook-clear input[type="radio"],
html body .snoeten-popup-shell--guestbook-clear input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 3px 0 0 !important;
    accent-color: #4b78be !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-choice strong,
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-choice small {
    display: block !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-choice small {
    margin-top: 3px !important;
    color: #5b6572 !important;
    font-size: 13px !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-remember {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    cursor: pointer !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-warning {
    margin: 14px 0 0 !important;
    color: #76501c !important;
    font-size: 13px !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-error {
    margin: 10px 0 0 !important;
    color: #a42020 !important;
}
html body .snoeten-popup-shell--guestbook-clear .guestbook-clear-error[hidden] { display: none !important; }
/* r387: verwijderen heeft dezelfde tekstkleur als de andere standaard .button-knoppen. */
@media (max-width: 480px) {
    html body .snoeten-popup-shell--guestbook-clear .snoeten-popup-shell__body { padding: 14px !important; }
    html body .snoeten-popup-shell--guestbook-clear .snoeten-popup-shell__footer { padding: 9px 12px !important; }
}


/* r416 — Accountbeveiliging gebruikt uitsluitend de gedeelde popup-window-shell.
   Geen oude editor- of gastenboekvensterklassen: daarmee blijven titelbalk,
   inhoud en knoppen correct uitgelijnd. De hoogte volgt de formulierinhoud. */
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account {
    --snoeten-popup-width: min(690px, calc(100vw - 32px));
    --snoeten-popup-max-width: 690px;
    --snoeten-popup-height: auto;
    --snoeten-popup-header-height: 52px;
    --snoeten-popup-footer-height: 64px;
    --snoeten-popup-surface-radius: 9px;
    font-family: var(--base-font, Comfortaa, Arial, sans-serif) !important;
    font-size: var(--base-font-size, 16px) !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account.is-open:not(.is-minimized):not(.is-maximized) {
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    grid-template-areas: "popup-header" "popup-content" "popup-footer" !important;
    grid-template-rows: var(--snoeten-popup-header-height) minmax(0, auto) var(--snoeten-popup-footer-height) !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account > .snoeten-popup-shell__content {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 148px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #D9E6EA !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .snoeten-popup-shell__body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-substack.snoeten-popup-shell__surface {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #D9E6EA !important;
    box-shadow: none !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account :is(.profile-account-info-card, .profile-account-edit-card) {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #D9E6EA !important;
    box-shadow: none !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-info-card > h3 {
    margin: 0 0 10px !important;
    font-size: 1.06em !important;
    font-weight: 700 !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-info-card > p {
    margin: 0 0 8px !important;
    line-height: 1.5 !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-info-card > p:last-child {
    margin-bottom: 0 !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-edit-card label {
    display: block !important;
    margin: 0 0 7px !important;
    font-weight: 700 !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-edit-card input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 0 14px !important;
    padding: 8px 12px !important;
    color: #25282c !important;
    border: 1px solid #b8c7d0 !important;
    border-radius: 4px !important;
    background: #fff !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-edit-card input:last-of-type {
    margin-bottom: 0 !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-feedback[hidden] { display: none !important; }
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-delete-warning {
    margin: 0 0 14px !important;
    line-height: 1.5 !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account > .snoeten-popup-shell__footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 10px 18px !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account > .snoeten-popup-shell__footer > nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
@media (max-width: 600px) {
    html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account > .snoeten-popup-shell__content { padding: 10px !important; }
    html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .profile-account-substack.snoeten-popup-shell__surface { padding: 12px !important; }
    html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account :is(.profile-account-info-card, .profile-account-edit-card) { padding: 12px !important; }
    html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account > .snoeten-popup-shell__footer { padding: 8px 10px !important; }
}

/* r417 — geen witte binnenplaten: drie accountvensters hebben één zachte inhoudskleur. */
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account {
    --snoeten-popup-bg: #D9E6EA !important;
    --snoeten-popup-content-bg: #D9E6EA !important;
    --snoeten-popup-surface-bg: #D9E6EA !important;
    background: #D9E6EA !important;
}
html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account .snoeten-popup-shell__body {
    background: #D9E6EA !important;
}

html body :is(#emailModal, #passwordModal, #deleteProfileModal).snoeten-popup-shell--account > .snoeten-popup-shell__footer {
    background: #D9E6EA !important;
    border-top: 1px solid #afc2cb !important;
}