:root { --ink:#203b5c; --muted:#61758b; --paper:#fffdf8; --mist:#edf4fb; --green:#4d84b8; --green-dark:#285f96; --line:#d5e2ef; --peach:#f3ded0; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:#f4f7fb; font:16px/1.5 Aptos, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
button, input { font:inherit; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 16% 15%, #dce9f6 0 9%, transparent 9.2%), radial-gradient(circle at 85% 75%, #dce9f6 0 13%, transparent 13.2%), #f4f7fb; }
.login-card { width:min(100%, 430px); padding:42px; background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 45px #36513c19; }
.eyebrow { margin:0 0 5px; color:var(--green-dark); font:700 .72rem/1.2 Arial, sans-serif; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { font-size:2.45rem; line-height:1.1; margin-bottom:16px; } h2 { font-size:1.45rem; line-height:1.2; margin-bottom:6px; }.intro,.form-note { color:var(--muted); }
form { display:grid; gap:8px; margin-top:28px; } label { font-weight:bold; margin-top:8px; } input { width:100%; padding:11px 12px; border:1px solid #aec1d5; border-radius:7px; background:#fff; } input:focus { outline:3px solid #c7dcef; border-color:var(--green); }
button { border:0; border-radius:7px; padding:12px 17px; margin-top:14px; color:white; background:var(--green-dark); cursor:pointer; font-weight:bold; } button:hover { background:#1f4f80; }.form-note { margin:9px 0 0; font: .82rem/1.45 Arial,sans-serif; }.form-note.error { color:#9a3726; }
.site { width:min(1240px, calc(100% - 42px)); margin:0 auto; padding:36px 0 54px; }.site-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }.site-header h1 { margin:0; }.header-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }.withdrawal-form { display:block; margin:0; }.header-button { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; margin:0; border:1px solid; border-radius:8px; font-size:.88rem; }.header-button span { font-size:1.05rem; line-height:1; }.management-button { color:var(--green-dark); background:var(--mist); border-color:#aec1d5; text-decoration:none; font-weight:bold; } .management-button:hover { color:#fff; background:var(--green-dark); border-color:var(--green-dark); } .withdrawal-button { color:#875343; background:#fffdf8; border-color:#d9b9ae; }.withdrawal-button:hover { color:#6d3526; background:#f8eee9; }.logout-button { color:#fff; background:var(--green-dark); border-color:var(--green-dark); }.logout-button:hover { background:#1f4f80; border-color:#1f4f80; }
.birthday-card { display:flex; align-items:center; gap:16px; padding:17px 22px; margin-bottom:25px; background:#fff7dc; border:1px solid #ead59a; border-radius:12px; }.birthday-card p:last-child { margin:0; font-size:1.1rem; }.birthday-house-link { color:var(--green-dark); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }.birthday-house-link:hover { color:#1f4f80; text-decoration-thickness:2px; }.birthday-house-link:focus-visible { outline:3px solid #c7dcef; outline-offset:2px; border-radius:3px; }.birthday-icon { display:grid; width:37px; height:37px; place-items:center; flex:none; color:#825b12; background:#f7e6a9; border-radius:50%; font-size:1.35rem; }
.neighborhood { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(300px, .8fr); align-items:start; gap:25px; }.map-card,.profile-card { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 7px 25px #36513c0b; }.map-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; padding:23px 25px 12px; }.map-heading h2 { margin:0; }.map-heading > p { margin:0; color:var(--muted); text-align:right; font: .8rem/1.35 Arial,sans-serif; }.map-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 14px; }.map-legend span { white-space:nowrap; }.map-wrap { padding:0 12px; }.street-map { display:block; width:100%; height:auto; border-radius:9px; background:#f2f6ef; }
.map-credit { padding:11px 25px 18px; margin:0; color:var(--muted); font:.75rem/1.4 Arial,sans-serif; }
.profile-card { min-height:460px; padding:28px; }.profile-empty { display:grid; place-items:center; min-height:400px; color:var(--muted); text-align:center; }.profile-empty span { color:#9bb99e; font-size:3.4rem; }.profile-empty p { max-width:260px; }.profile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:19px; margin-bottom:20px; }.house-badge { padding:7px 10px; color:#fff; background:var(--green); border-radius:6px; font:bold .85rem Arial,sans-serif; }.profile-section { margin:22px 0; }.profile-section h3 { margin:0 0 8px; font-size:1rem; }.profile-section p,.people { margin:0; color:#4d6158; }.people { padding-left:20px; }.family-photo { display:block; width:auto; max-width:100%; height:auto; margin-top:9px; border-radius:8px; image-orientation:from-image; }.not-participating { display:grid; min-height:400px; place-items:center; text-align:center; color:var(--muted); }.not-participating span { font-size:3rem; }
@media (max-width:800px) { .site { width:min(100% - 28px, 620px); padding-top:24px; }.neighborhood { grid-template-columns:1fr; }.profile-card { min-height:0; }.profile-empty,.not-participating { min-height:220px; }.map-heading { align-items:start; flex-direction:column; }.map-heading > p { text-align:left; }.map-legend { justify-content:flex-start; }.login-card { padding:30px 24px; } }

/* Illustratieve plattegrond; de bron-SVG zelf blijft ongewijzigd. */
.street-map { background:#eaf1df; }
.illustration-ground { fill:#dcebd4; }
.street-outline { fill:none; stroke:#c6d0c4; stroke-linecap:round; stroke-linejoin:round; stroke-width:46; }
.street-surface { fill:none; stroke:#fffdf8; stroke-linecap:round; stroke-linejoin:round; stroke-width:40; }
.driveway-outline { fill:none; stroke:#c6d0c4; stroke-linecap:round; stroke-linejoin:round; stroke-width:27; }
.driveway-surface { fill:none; stroke:#fffdf8; stroke-linecap:round; stroke-linejoin:round; stroke-width:21; }
.green-spaces path { fill:#d6e9bf; stroke:#a8c98f; stroke-width:1.2; }
.green-spaces .green-strip { fill:#d6e9bf; stroke:#a8c98f; }
.green-spaces .tree-strip { fill:#aacb92; stroke:#7ba16e; }
.green-spaces .playground { fill:#f4d9a1; stroke:#d2a960; }
.simplified-blocks rect,.garage-blocks rect { fill:#e6ddd0; stroke:#c7bba9; stroke-width:1.2; }
.house-label { fill:#58665a; font:700 13px Arial,sans-serif; text-anchor:middle; cursor:pointer; pointer-events:none; }
.house-label.participating { fill:#fffdf8; }
.house-hit { fill:#f7f1e5; stroke:#a99d87; stroke-width:1.4; cursor:pointer; }
.house-hit.participating { fill:#4d84b8; stroke:#285f96; } .house-hit.unoccupied { fill:#cfd4d6; stroke:#929a9e; cursor:default; } .house-label.unoccupied { fill:#737b7f; cursor:default; }
.house-hit:not(.unoccupied):hover,.house-hit:not(.unoccupied):focus,#house-labels g:hover .house-hit:not(.unoccupied),#house-labels g:focus .house-hit:not(.unoccupied) { fill:#d7895f; stroke:#7c412a; stroke-width:2.5; }

/* Bewonerspaneel */
.profile-card { overflow:hidden; padding:0; }
.profile-head { align-items:center; padding:26px 28px 21px; margin:0; background:linear-gradient(135deg, #f2f7ef, #fffdf8); }
.profile-head h2 { margin:0; font-size:1.7rem; }
.household-landline { display:inline-flex; align-items:center; gap:6px; margin-top:7px; color:var(--green-dark); font-size:.9rem; font-weight:600; text-decoration:none; }
.household-landline:hover { color:#1f4f80; text-decoration:underline; }
.household-landline:focus-visible { outline:3px solid #c7dcef; outline-offset:2px; border-radius:3px; }
.house-badge { display:grid; width:52px; height:52px; place-items:center; padding:0; border-radius:50%; box-shadow:0 3px 8px #2d674a33; font-size:1.35rem; }
.profile-details { padding:0 28px 28px; }
.profile-section { display:flex; flex-direction:column; padding:21px 0 28px; margin:0; }
.profile-section:last-child { padding-bottom:0; }
.section-label { margin:0; padding-bottom:9px; color:var(--green-dark); border-bottom:1px solid #d7e3ef; font:700 .9rem/1.2 Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.section-label + .contact-lines, .section-label + .people { margin-top:24px; }
.contact-lines { margin:0; color:#40564b; line-height:1.65; }
.parent-line { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:7px 0; }
.parent-line:first-child { margin-top:0; }
.parent-name { margin-right:2px; }
.phone-list { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; margin-left:auto; }
.phone-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 7px; color:#285f96; background:#e6f0f9; border-radius:999px; font:600 .8rem/1.2 Aptos, 'Segoe UI', sans-serif; text-decoration:none; }
.phone-chip:hover { color:#fffdf8; background:var(--green-dark); }
.deceased-badge { padding:3px 7px; color:#6e625a; background:#f1ece7; border-radius:999px; font:600 .78rem/1.2 Aptos, 'Segoe UI', sans-serif; }
.child-line { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.child-line > .phone-chip { margin-left:auto; }
.child-name summary { display:flex; align-items:center; gap:7px; cursor:pointer; list-style:none; }
.child-name summary::-webkit-details-marker { display:none; }
.child-name summary::after { content:'⌄'; color:var(--muted); font-size:.8rem; transition:transform .15s ease; }
.child-name[open] summary::after { transform:rotate(180deg); }


.child-extra { margin-top:6px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:#fbfcf9; }
.child-extra > :first-child { margin-top:0; }
.given-name { display:block; margin-top:4px; color:var(--muted); font-size:.88rem; }
.relationship,.birth-date,.next-birthday { display:block; margin-top:4px; color:var(--muted); font-size:.88rem; }
.gender-marker { margin-left:4px; color:var(--muted); font-size:.8rem; font-weight:normal; }
.children-section .people li,.grandchildren-section .people li { padding-left:0; }
.children-section .people li::before,.grandchildren-section .people li::before { content:none; }
.people { display:grid; gap:7px; padding:0; list-style:none; }
.people li { position:relative; padding-left:17px; }
.people li::before { content:'•'; position:absolute; left:1px; color:var(--green); }
.photo-section { padding-top:24px; }
.photo-button { display:block; align-self:center; width:auto; max-width:100%; padding:0; margin:24px auto 0; overflow:visible; background:transparent; border-radius:8px; box-shadow:none; }
.photo-button:hover { background:transparent; }
.photo-button:focus-visible { outline:3px solid #9fc2e1; outline-offset:3px; }
.family-photo,.photo-lightbox img { margin:0; user-select:none; -webkit-user-drag:none; }
.family-photo { box-shadow:0 5px 16px #36513c1c; }
.photo-overlay { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:24px; background:#142639c9; }
.photo-lightbox { position:relative; max-width:min(900px, 100%); max-height:100%; }
.photo-lightbox img { display:block; max-width:100%; max-height:calc(100vh - 48px); border-radius:10px; box-shadow:0 18px 50px #0008; }
.photo-close { position:absolute; top:10px; right:10px; display:grid; width:36px; height:36px; place-items:center; padding:0; margin:0; color:#203b5c; background:#fffdf8; border-radius:50%; box-shadow:0 2px 9px #0004; font-size:1.6rem; line-height:1; }
.photo-close:hover { color:#fffdf8; background:var(--green-dark); }

.withdrawal-dialog { width:min(92vw, 480px); padding:0; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 65px #14263966; }
.withdrawal-dialog::backdrop { background:#142639a8; backdrop-filter:blur(2px); }
.withdrawal-dialog-content { padding:30px; }
.withdrawal-dialog-icon { display:grid; width:44px; height:44px; margin-bottom:17px; place-items:center; color:#875343; background:#f8eee9; border-radius:50%; font-size:1.35rem; }
.withdrawal-dialog h2 { margin:0 0 10px; font-size:1.55rem; }
.withdrawal-dialog p { margin:0; color:var(--muted); }
.withdrawal-dialog .withdrawal-dialog-note { margin-top:12px; font-size:.88rem; }
.withdrawal-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:25px; }
.withdrawal-dialog-actions button { padding:10px 14px; margin:0; border:1px solid; }
.withdrawal-cancel { color:var(--green-dark); background:#fff; border-color:#aec1d5 !important; }
.withdrawal-cancel:hover { background:var(--mist); }
.withdrawal-confirm { color:#fff; background:#875343; border-color:#875343 !important; }
.withdrawal-confirm:hover { background:#6d3526; }

.admin-page { min-height:100vh; padding:36px 21px; }
.admin-shell { width:min(1080px, 100%); margin:0 auto; }
.admin-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
.admin-header h1 { margin:0; }
.admin-header-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.admin-header-actions a { margin:0; }
.admin-card { padding:30px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 7px 25px #36513c0b; }
.admin-card p:last-child { margin-bottom:0; }

.admin-selector-card { margin-bottom:28px; }
.admin-statistics-card { padding:20px 24px; margin-bottom:28px; }
.admin-statistics-card h2 { margin:0; font-size:1.15rem; }
.admin-statistics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:15px 0 0; }
.admin-statistics-grid div { display:flex; min-width:0; flex-direction:column-reverse; padding:12px 14px; background:var(--mist); border:1px solid #d7e3ef; border-radius:9px; }
.admin-statistics-grid dt { color:var(--muted); font-size:.78rem; line-height:1.3; }
.admin-statistics-grid dd { margin:0 0 2px; color:var(--green-dark); font-size:1.55rem; font-weight:bold; line-height:1.1; }
.admin-select-form { display:grid; gap:9px; margin:0; }
.admin-select-form label { margin:0; }
.admin-select-row { display:flex; align-items:stretch; gap:10px; }
.admin-select-row select { min-width:0; flex:1; padding:11px 38px 11px 12px; color:var(--ink); background:#fff; border:1px solid #aec1d5; border-radius:7px; font:inherit; }
.admin-select-row select:focus { outline:3px solid #c7dcef; border-color:var(--green); }
.admin-select-row button { flex:none; margin:0; }
.admin-household-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px; margin:0 2px 18px; }
.admin-household-heading h2 { margin:0; font-size:1.65rem; }
.admin-household-landline { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:7px 0 9px; color:var(--muted); font-size:.9rem; }
.admin-household-landline small { padding:2px 6px; color:#687277; background:#eef0f1; border-radius:999px; font-size:.72rem; }
.admin-contact-button { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; margin:0; color:var(--green-dark); background:var(--mist); border:1px solid #aec1d5; border-radius:8px; font-size:.82rem; }
.admin-contact-button:hover { color:#fff; background:var(--green-dark); border-color:var(--green-dark); }
.admin-contact-button:focus-visible { outline:3px solid #c7dcef; outline-offset:2px; }
.admin-household-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; }
.admin-statuses { display:flex; flex-wrap:wrap; gap:7px; }
.admin-statuses form { margin:0; }
.admin-status { padding:5px 9px; margin:0; border:1px solid; border-radius:999px; font:600 .8rem/1.2 Aptos, 'Segoe UI', sans-serif; cursor:pointer; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.admin-status:not(:disabled):hover { filter:brightness(.96); transform:translateY(-1px); box-shadow:0 2px 5px rgba(32, 52, 64, .14); }
.admin-status:not(:disabled):focus-visible { outline:3px solid #c7dcef; outline-offset:2px; }
.admin-status:disabled { cursor:not-allowed; opacity:.72; }
.admin-clear-household { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; margin:0; color:#9a3726; background:#fff7f5; border:1px solid #d7a79e; border-radius:8px; font-size:.82rem; }
.admin-clear-household:not(:disabled):hover { color:#fff; background:#9a3726; border-color:#9a3726; }
.admin-clear-household:disabled { cursor:not-allowed; opacity:.62; }
.admin-clear-household:focus-visible { outline:3px solid #c7dcef; outline-offset:2px; }
.admin-clear-household svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.admin-status.status-positive { color:#285f96; background:#e6f0f9; border-color:#c3d9ec; }
.admin-status.status-neutral { color:#687277; background:#eef0f1; border-color:#d2d7d9; }
.admin-photo-card { margin-bottom:18px; }
.admin-photo-layout { display:grid; grid-template-columns:minmax(180px,280px) 1fr; gap:22px; align-items:stretch; }
.admin-photo-preview { display:block; align-self:start; width:100%; max-height:240px; object-fit:cover; background:#eef0f1; border:1px solid var(--line); border-radius:9px; }
.admin-photo-details { display:flex; min-width:0; flex-direction:column; }
.admin-photo-details p { margin:0 0 9px; color:var(--muted); }
.admin-photo-details strong { color:var(--ink); }
.admin-photo-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:9px; }
.admin-photo-heading form { margin:0; }
.admin-photo-status { display:inline-block; padding:3px 8px; margin:0; border:1px solid; border-radius:999px; font-size:.72rem; font-weight:bold; line-height:1.2; }
.admin-photo-status.status-positive { color:#285f96; background:#e6f0f9; border-color:#c3d9ec; }
.admin-photo-status.status-neutral { color:#687277; background:#eef0f1; border-color:#d2d7d9; }
button.admin-photo-status:hover { color:#fff; background:var(--green-dark); border-color:var(--green-dark); }
.admin-photo-default { display:inline-block; padding:2px 6px; margin-left:4px; color:#687277; background:#eef0f1; border-radius:999px; font-size:.72rem; font-weight:bold; }
.admin-photo-help,.admin-photo-form-grid small { color:var(--muted); font-size:.8rem; font-weight:normal; }
.admin-photo-actions,.admin-photo-empty { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.admin-photo-actions { margin-top:auto; }
.admin-photo-empty { justify-content:space-between; }
.admin-photo-empty p { margin:0; color:var(--muted); }
.admin-photo-actions button,.admin-photo-empty button { margin:0; }
.admin-photo-delete { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; margin:0; color:#9a3726; background:#fff7f5; border:1px solid #d7a79e; border-radius:8px; font-size:.82rem; }
.admin-photo-delete:hover { color:#fff; background:#9a3726; border-color:#9a3726; }
.admin-photo-delete svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.admin-photo-dialog-body { display:grid; gap:18px; padding:24px 28px 8px; }
.admin-photo-dropzone { position:relative; display:grid; place-items:center; min-height:230px; padding:22px; overflow:hidden; color:var(--muted); background:#f7fafc; border:2px dashed #9fb6ca; border-radius:12px; text-align:center; transition:background-color .16s ease,border-color .16s ease,transform .16s ease; }
.admin-photo-dropzone.is-dragover { background:#e6f0f9; border-color:#285f96; transform:translateY(-1px); }
.admin-photo-file { position:absolute; z-index:2; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.admin-photo-drop-icon { color:#4d84b8; font-size:2.5rem; line-height:1; }
.admin-photo-dropzone strong { margin-top:7px; color:var(--ink); }
.admin-photo-drop-help,.admin-photo-alt-label small { color:var(--muted); font-size:.8rem; font-weight:normal; }
.admin-photo-new-preview { width:auto; max-width:100%; max-height:280px; margin:4px auto 8px; object-fit:contain; border-radius:8px; }
.admin-photo-dropzone.has-preview .admin-photo-drop-icon { display:none; }
.admin-photo-file-name { margin-top:7px; color:var(--green-dark); font-size:.82rem; font-weight:bold; overflow-wrap:anywhere; }
.admin-photo-alt-label { display:grid; gap:6px; font-weight:bold; }
.admin-photo-alt-label input { width:100%; min-width:0; padding:10px 11px; color:var(--ink); background:#fff; border:1px solid #aec1d5; border-radius:7px; font:inherit; }
.admin-photo-alt-label input:focus { outline:3px solid #c7dcef; border-color:var(--green); }
.admin-data-card { margin-bottom:18px; }
.admin-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.admin-section-heading h2 { margin:0; font-size:1.25rem; }
.admin-section-heading > span { display:grid; min-width:28px; height:28px; place-items:center; color:var(--green-dark); background:var(--mist); border-radius:50%; font-size:.82rem; font-weight:bold; }
.admin-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:9px; }
.admin-table { width:100%; border-collapse:collapse; background:#fff; }
.admin-table th,.admin-table td { padding:11px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; white-space:nowrap; }
.admin-table th { color:var(--green-dark); background:#f2f7fb; font-size:.82rem; letter-spacing:.035em; text-transform:uppercase; }
.admin-table tbody tr:last-child td { border-bottom:0; }
.admin-table tbody tr:hover { background:#fafcf9; }
.admin-audit-card { margin-bottom:28px; }
.admin-audit-card .admin-section-heading { align-items:flex-start; }
.admin-audit-card .admin-section-heading h2 { margin-top:2px; }
.admin-audit-table { font-size:.88rem; }
.admin-audit-table .admin-audit-change-start td { border-top:2px solid #c3d9ec; }
.admin-audit-meta { display:block; margin-top:2px; color:#71808a; font-size:.75rem; }
.admin-audit-value { min-width:150px; max-width:290px; white-space:normal !important; overflow-wrap:anywhere; }
.admin-age-months { display:block; margin-top:2px; color:#71808a; font-size:.75rem; }
.admin-deceased-symbol { margin-right:4px; color:#687277; font:700 1.05em/1 Georgia, serif; }
.admin-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.admin-action-column { width:1%; text-align:center !important; white-space:nowrap; }
.admin-edit-button,.admin-delete-button { display:inline-grid; width:32px; height:32px; place-items:center; padding:0; margin:0 2px; border:1px solid; border-radius:50%; font:1rem/1 'Segoe UI Symbol', Aptos, sans-serif; }
.admin-edit-button { color:var(--green-dark); background:var(--mist); border-color:#aec1d5; }
.admin-edit-button:hover { color:#fff; background:var(--green-dark); border-color:var(--green-dark); }
.admin-delete-button { color:#9a3726; background:#fff7f5; border-color:#d7a79e; }
.admin-delete-button:hover { color:#fff; background:#9a3726; border-color:#9a3726; }
.admin-delete-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.admin-edit-button:focus-visible,.admin-delete-button:focus-visible { outline:3px solid #c7dcef; outline-offset:2px; }
.admin-empty { margin:0; color:var(--muted); }
@media (max-width:600px) { .admin-page { padding:24px 14px; } .admin-header { align-items:flex-start; flex-direction:column; } .admin-header-actions { width:100%; justify-content:flex-start; } .admin-card { padding:22px; } .admin-select-row { align-items:stretch; flex-direction:column; } .admin-select-row button { width:100%; } .admin-statistics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.admin-section-actions { display:flex; align-items:center; gap:9px; }
.admin-count { display:grid; min-width:28px; height:28px; place-items:center; color:var(--green-dark); background:var(--mist); border-radius:50%; font-size:.82rem; font-weight:bold; }
.admin-add-button { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; margin:0; font-size:.82rem; }
.admin-add-button span { font-size:1.05rem; line-height:1; }
.admin-notice { padding:11px 14px; margin:0 0 20px; color:#285f96; background:#e6f0f9; border:1px solid #c3d9ec; border-radius:8px; }
.admin-dialog { width:min(94vw, 780px); max-height:92vh; padding:0; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 65px #14263966; }
.admin-dialog::backdrop { background:#142639a8; backdrop-filter:blur(2px); }
.admin-dialog-form { display:block; max-height:92vh; margin:0; overflow:auto; }
.admin-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:25px 28px 19px; background:linear-gradient(135deg, #f2f7ef, #fffdf8); border-bottom:1px solid var(--line); }
.admin-dialog-header h2 { margin:0; font-size:1.45rem; }
.admin-dialog-close { display:grid; width:34px; height:34px; place-items:center; flex:none; padding:0; margin:0; color:#9a3726; background:#fff7f5; border:1px solid #d7a79e; border-radius:50%; font-size:1.35rem; line-height:1; }
.admin-dialog-close:hover { color:#fff; background:#9a3726; border-color:#9a3726; }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; padding:24px 28px 8px; }
.admin-form-grid > label { display:grid; align-content:start; gap:6px; margin:0; font-weight:bold; }
.admin-form-grid input,.admin-form-grid select { width:100%; min-width:0; padding:10px 11px; color:var(--ink); background:#fff; border:1px solid #aec1d5; border-radius:7px; font:inherit; }
.admin-form-grid input:focus,.admin-form-grid select:focus { outline:3px solid #c7dcef; border-color:var(--green); }.admin-form-grid input:disabled,.admin-form-grid select:disabled { color:#66747d; background:#edf0f2; border-color:#cbd3d8; cursor:not-allowed; opacity:1; }
.admin-form-grid [hidden] { display:none; }
.admin-checks { display:grid; gap:0; padding:16px 28px 5px; margin:12px 0 0; border:0; border-top:1px solid var(--line); }
.admin-checks legend { padding:0 7px; color:var(--green-dark); font-weight:bold; }
.admin-checks label { display:flex; align-items:center; gap:14px; min-height:43px; margin:0; border-bottom:1px solid var(--line); font-size:.9rem; font-weight:normal; cursor:pointer; }
.admin-checks label:last-of-type { border-bottom:0; }
.admin-checks input[type="checkbox"] { appearance:none; -webkit-appearance:none; position:relative; order:2; width:42px; height:24px; flex:none; padding:0; margin:0 0 0 auto; background:#cfd6dc; border:1px solid #aeb9c2; border-radius:999px; cursor:pointer; transition:background-color .18s ease, border-color .18s ease; }
.admin-checks input[type="checkbox"]::before { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(32, 52, 64, .3); transition:transform .18s ease; }
.admin-checks input[type="checkbox"]:checked { background:var(--green); border-color:var(--green-dark); }
.admin-checks input[type="checkbox"]:checked::before { transform:translateX(18px); }
.admin-checks input[type="checkbox"]:focus-visible { outline:3px solid #c7dcef; outline-offset:2px; }
.admin-form-error { padding:10px 12px; margin:20px 28px 0; color:#8c3527; background:#f8eee9; border:1px solid #dfbdb2; border-radius:7px; }
.admin-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:20px 28px 25px; }
.admin-dialog-actions button { margin:0; }
.admin-dialog-cancel { color:#9a3726; background:#fff7f5; border:1px solid #d7a79e; }
.admin-dialog-cancel:hover { color:#fff; background:#9a3726; border-color:#9a3726; }
.admin-dialog-actions button:disabled { cursor:not-allowed; opacity:.5; }
.admin-delete-dialog-body { padding:24px 28px 0; }
.admin-delete-dialog-body p { margin:0 0 12px; color:var(--muted); }
.admin-delete-warning { padding:10px 12px; color:#8c3527 !important; background:#f8eee9; border:1px solid #dfbdb2; border-radius:7px; font-weight:bold; }
.admin-delete-confirm { color:#fff; background:#9a3726; border:1px solid #9a3726; }
.admin-delete-confirm:hover { background:#79291f; border-color:#79291f; }
@media (max-width:650px) { .admin-photo-layout { grid-template-columns:1fr; } .admin-section-heading { align-items:flex-start; } .admin-section-actions { align-items:flex-end; flex-direction:column; } .admin-form-grid { grid-template-columns:1fr; padding-inline:20px; } .admin-dialog-header { padding-inline:20px; } .admin-checks { padding-inline:20px; } .admin-dialog-actions { padding-inline:20px; } }
