/* Account screens share the installed theme and preserve fixed bottom navigation. */
.family-page main.app {height:auto!important;min-height:100dvh;overflow:visible!important;padding-bottom:40px!important}
html:has(.family-page),body.family-page {height:auto!important;overflow:auto!important}
.family-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.family-link {color:var(--accent);font-weight:750;text-decoration:none}
a {color:var(--accent)}
#accountMessage {padding:16px;border-radius:16px;background:var(--notice);color:var(--notice-text);margin:14px 0;overflow-wrap:anywhere}
#accountMessage.error {background:#ffe5e8;color:#921a32}
#guest form {margin-top:24px}
.member-row {padding:18px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.member-row strong {display:block;font-size:18px}
.member-row small {display:block;color:var(--muted);margin-top:7px;overflow-wrap:anywhere}
#inviteQr {display:block;max-width:100%;height:auto;margin:20px auto;border-radius:16px}
#childCredentials {white-space:pre-line}
#inviteList {margin-top:18px}
@media(prefers-reduced-motion:no-preference){.family-page .card{animation:kopilka-panel-enter .3s ease both}}

/* Family management */
#profileForm,#familyNameForm {margin:14px 0 22px}
.leave-family {margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.leave-family summary {cursor:pointer;font-weight:750}
.leave-family form {margin-top:14px}
.member-row>div {min-width:0;overflow-wrap:anywhere}
.member-row button {max-width:100%}
.family-page button.danger {background:#c83d53;color:#fff;border-color:#c83d53}
.invitation-history {margin-top:24px}
.invite-filters {display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.invite-filters label {flex:1;min-width:160px}
.invite-filters button {margin-bottom:0}
.invite-row {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--border)}
.invite-details {display:flex;align-items:start;flex-direction:column;gap:6px;min-width:0;overflow-wrap:anywhere}
.invite-details small {color:var(--muted)}
.invite-status {font-size:12px;font-weight:750;padding:4px 9px;border-radius:20px;background:var(--secondary);color:var(--text)}
.invite-status.pending {background:#fff2cf;color:#765200}
.invite-status.used {background:#e0f6e9;color:#14643e}
.invite-status.expired,.invite-status.revoked {background:var(--secondary);color:var(--muted)}
#moreInvites {margin-top:14px;width:100%}
@media(max-width:520px){.member-row>div{flex-basis:100%}.member-row button{flex:1 1 140px}.invite-filters label{min-width:0;flex-basis:100%}}