.family-status{padding:10px 16px;background:var(--accent-soft);color:var(--text);font-size:13px;text-align:center;border-bottom:1px solid var(--border)}
.family-actions{display:flex;justify-content:center;gap:10px;padding:8px}.family-actions button{width:auto;flex:1;max-width:230px;min-height:44px;font-size:12px;padding:8px 12px}
.family-feed-tools{padding:12px 20px;display:grid;gap:12px}.family-feed-tools form{padding-top:12px}.family-feed-tools p,.family-photo-note{font-size:12px;color:var(--text-muted);margin:10px 0}
.family-rights{display:flex;gap:10px;font-size:13px;margin:14px 0}.family-rights input{width:24px;flex-shrink:0}
.family-link-card{display:flex;align-items:center;justify-content:center;min-height:150px;background:var(--accent-soft);color:var(--text);font-weight:600}
.family-dialog{position:fixed;z-index:40000;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.family-dialog[hidden]{display:none!important}.family-panel{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:18px;padding:20px;width:min(100%,540px);max-height:calc(var(--visible-height,100dvh) - 40px);overflow:auto;overscroll-behavior:contain}
.family-panel h2{font-size:20px;margin-bottom:14px}.family-panel p{margin:10px 0;overflow-wrap:anywhere;font-size:13px}.family-panel button{min-height:44px}.family-panel .row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.family-panel input:not([type=checkbox]){width:100%;font-size:16px;min-height:44px}.family-panel label{display:block;margin:12px 0}.family-panel progress{width:100%}.family-close{float:right;padding:5px 12px;font-size:22px}
.family-backup-options{margin:20px 0;padding:16px;background:var(--accent-soft);border-radius:14px;display:grid;gap:12px}
html[data-theme=dark]{--bg:#202126;--card:#292A31;--text:#F0E9ED;--text-muted:#BEB3BD;--border:#48414B;--accent:#C58DA4;--accent-soft:#3B303B}
html[data-theme=dark] .family-panel{background:#292A31}.family-status[data-error=true]{border:1px solid #B5667C}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,textarea,select{font-size:max(16px,1em)}
@media(max-width:600px){.modal{max-height:calc(var(--visible-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}.family-panel{padding:16px}.family-actions{flex-wrap:wrap}}