:root {
        --avanti-green: #37b24d;
        --avanti-green-dark: #1f7a35;
        --avanti-yellow: #ffe066;
        --avanti-yellow-strong: #ffd43b;
        --avanti-text: #1f2933;
        --avanti-muted: #64748b;
        --avanti-card: rgba(255, 255, 255, 0.94);
        --avanti-border: rgba(55, 178, 77, 0.35);
        --avanti-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    }

    body {
        background:
            radial-gradient(circle at top left, rgba(255, 224, 102, 0.65), transparent 35%),
            radial-gradient(circle at top right, rgba(55, 178, 77, 0.35), transparent 32%),
            linear-gradient(135deg, #fffbe6 0%, #f3fff4 45%, #ffffff 100%);
    }

    .bestuur-alert {
        padding: 16px 18px;
        border-radius: 18px;
        margin-bottom: 18px;
        background: rgba(255,255,255,0.94);
        border: 2px dashed rgba(255,193,7,0.45);
        box-shadow: var(--avanti-shadow);
        color: #6b5200;
        font-weight: 800;
    }

    .bestuur-alert.success {
        border-color: rgba(55,178,77,0.38);
        color: var(--avanti-green-dark);
    }

    .bestuur-admin-box {
        margin-bottom: 24px;
        padding: 22px;
        border-radius: 24px;
        background: rgba(255,255,255,0.95);
        border: 2px dashed var(--avanti-border);
        box-shadow: var(--avanti-shadow);
    }

    .bestuur-admin-head {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }

    .bestuur-admin-head h2 {
        margin: 0;
        color: var(--avanti-green-dark);
        font-size: 1.45rem;
        font-weight: 950;
    }

    .bestuur-admin-head p {
        margin: 6px 0 0;
        color: var(--avanti-muted);
    }

    .bestuur-admin-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .bestuur-admin-item {
        padding: 15px;
        border-radius: 18px;
        background: rgba(55,178,77,0.055);
        border: 1px solid rgba(55,178,77,0.18);
    }

    .bestuur-admin-label {
        display: block;
        margin-bottom: 8px;
        color: var(--avanti-text);
        font-weight: 900;
    }

    .bestuur-admin-textarea {
        width: 100%;
        min-height: 118px;
        resize: vertical;
        border-radius: 14px;
        border: 1px solid rgba(31,122,53,0.22);
        padding: 12px 13px;
        font: inherit;
        outline: none;
        background: #fff;
    }

    .bestuur-admin-textarea:focus {
        border-color: var(--avanti-green);
        box-shadow: 0 0 0 4px rgba(55,178,77,0.13);
    }

    .bestuur-save {
        margin-top: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        padding: 12px 20px;
        background: linear-gradient(135deg, var(--avanti-green-dark), var(--avanti-green));
        color: #fff;
        font-weight: 950;
        box-shadow: 0 14px 28px rgba(55,178,77,0.25);
        cursor: pointer;
    }

    .bestuur-save:hover {
        filter: brightness(1.04);
    }

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

    .bestuur-card {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 260px;
        padding: 22px;
        border-radius: 22px;
        background: var(--avanti-card);
        border: 2px dashed var(--avanti-border);
        box-shadow: var(--avanti-shadow);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .bestuur-card:hover {
        transform: translateY(-4px);
        border-color: rgba(55,178,77,0.72);
        box-shadow: 0 24px 56px rgba(15,23,42,0.16);
    }

    .bestuur-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 8px;
        background: linear-gradient(90deg, var(--avanti-yellow-strong), var(--avanti-green));
    }

    .bestuur-card-head {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 18px;
    }

    .bestuur-avatar {
        flex: 0 0 auto;
        width: 102px;
        height: 102px;
        border-radius: 30px;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
            radial-gradient(circle at 30% 20%, rgba(255,255,255,0.65), transparent 35%),
            linear-gradient(135deg, var(--avanti-yellow-strong), var(--avanti-green));
        color: #15351f;
        font-size: 1.22rem;
        font-weight: 950;
        box-shadow: 0 12px 24px rgba(55,178,77,0.24);
    }

    .bestuur-avatar.has-photo {
        background: #ffffff;
        border: 3px solid rgba(255, 212, 59, 0.85);
        box-shadow: 0 14px 30px rgba(55,178,77,0.28);
    }

    .bestuur-avatar img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bestuur-avatar.no-photo,
    .bestuur-admin-photo-preview.no-photo {
        background: #37b24d;
        border: 3px solid rgba(255, 212, 59, 0.9);
        box-shadow: 0 14px 30px rgba(55,178,77,0.28);
    }

    .bestuur-unknown-avatar {
        width: 88%;
        height: 88%;
        display: block;
        filter: drop-shadow(0 7px 10px rgba(31,122,53,0.16));
    }

    .bestuur-unknown-avatar .unknown-bg {
        fill: rgba(255,255,255,0.18);
    }

    .bestuur-unknown-avatar .unknown-head,
    .bestuur-unknown-avatar .unknown-body {
        fill: #1f7a35;
    }

    .bestuur-unknown-avatar .unknown-body {
        opacity: 0.9;
    }

    .bestuur-unknown-avatar .unknown-smile {
        fill: none;
        stroke: rgba(255,255,255,0.95);
        stroke-width: 4;
        stroke-linecap: round;
    }

    .bestuur-name {
        min-width: 0;
    }

    .bestuur-name h2 {
        margin: 0;
        color: var(--avanti-text);
        font-size: 1.25rem;
        line-height: 1.15;
        font-weight: 950;
    }

    .bestuur-email {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255,212,59,0.24);
        border: 1px solid rgba(255,193,7,0.34);
        color: #5f4700;
        font-size: 0.9rem;
        font-weight: 850;
        text-decoration: none;
        width: fit-content;
        max-width: 100%;
        word-break: break-word;
    }

    .bestuur-email:hover {
        color: #15351f;
        background: rgba(55,178,77,0.14);
        border-color: rgba(55,178,77,0.28);
        text-decoration: none;
    }

    .bestuur-admin-email {
        display: block;
        margin-top: 4px;
        color: var(--avanti-green-dark);
        font-size: 0.88rem;
        font-weight: 800;
        word-break: break-word;
    }

    .bestuur-admin-photo-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin: 12px 0 12px;
        padding: 10px;
        border-radius: 16px;
        background: rgba(255,255,255,0.72);
        border: 1px dashed rgba(55,178,77,0.24);
    }

    .bestuur-admin-photo-preview {
        flex: 0 0 auto;
        width: 82px;
        height: 82px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
            radial-gradient(circle at 30% 20%, rgba(255,255,255,0.65), transparent 35%),
            linear-gradient(135deg, var(--avanti-yellow-strong), var(--avanti-green));
        color: #15351f;
        font-weight: 950;
        box-shadow: 0 10px 20px rgba(55,178,77,0.18);
    }

    .bestuur-admin-photo-preview.has-photo {
        background: #fff;
        border: 2px solid rgba(255, 212, 59, 0.85);
    }

    .bestuur-admin-photo-preview img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bestuur-admin-photo-controls {
        min-width: 0;
        flex: 1 1 auto;
    }

    .bestuur-admin-file {
        display: block;
        width: 100%;
        max-width: 360px;
        padding: 8px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid rgba(31,122,53,0.18);
        font-size: 0.9rem;
    }

    .bestuur-admin-help {
        margin-top: 6px;
        color: var(--avanti-muted);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .bestuur-remove-photo {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 7px;
        color: #7a5700;
        font-size: 0.86rem;
        font-weight: 800;
    }

    .bestuur-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: auto;
    }

    .bestuur-tag {
        display: inline-flex;
        align-items: center;
        padding: 7px 11px;
        border-radius: 999px;
        background: rgba(55,178,77,0.11);
        border: 1px solid rgba(55,178,77,0.22);
        color: #226b36;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .bestuur-tag.empty {
        background: rgba(255,212,59,0.22);
        border-color: rgba(255,193,7,0.32);
        color: #7a5700;
    }

    @media (max-width: 980px) {
        .bestuur-grid,
        .bestuur-admin-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 620px) {
        .bestuur-grid,
        .bestuur-admin-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bestuur-card {
            min-height: auto;
            padding: 19px;
            border-radius: 20px;
        }

        .bestuur-card-head {
            align-items: flex-start;
        }

        .bestuur-avatar {
            width: 88px;
            height: 88px;
            border-radius: 26px;
        }

        .bestuur-admin-box {
            padding: 17px;
            border-radius: 20px;
        }
    }