.family-login-page { margin: 0; background: #f3f7f3; color: #273c31; font: 16px/1.45 system-ui,sans-serif; }
.family-login-box { box-sizing: border-box; max-width: 420px; margin: 6vh auto; padding: 28px 24px; background: white; border: 1px solid #e0e8e1; border-radius: 16px; }
.family-logo { display: grid; place-items: center; width: 40px; height: 40px; background: #356149; color: white; border-radius: 12px; font: 25px Georgia,serif; }
.family-login-box h1 { margin: 14px 0 0; font-size: 26px; }
.family-login-box p, .family-hint { color: #627469; font-size: 13px; }
.family-login-box form, .family-login-box label, .family-form { display: grid; gap: 8px; }
.family-login-box form { gap: 16px; margin: 20px 0 10px; }
.family-login-box input, .family-panel input, .family-panel select { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; min-height: 44px; border: 1px solid #ccd9ce; border-radius: 8px; font: inherit; background: white; }
.family-login-box button, .family-panel button { min-height: 44px; padding: 8px 12px; border: 1px solid #ccd9ce; border-radius: 8px; background: #356149; color: white; cursor: pointer; font: inherit; }
.family-login-box button:disabled, .family-panel button:disabled { opacity: .55; cursor: default; }
.family-login-box .family-secondary, .family-panel .family-secondary { color: #356149; background: white; }
.family-login-box [hidden], .family-panel [hidden] { display: none !important; }
#family-login-error, .family-error { color: #a52a2a; font-size: 14px; }
.family-bar { display: flex; align-items: center; gap: 8px; padding: 6px 30px; border-bottom: 1px solid #e0e8e1; background: #f4f8f4; }
.family-bar label { min-width: 0; flex: 1; }
.family-bar select { max-width: 260px; width: 100%; min-width: 0; min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: #356149; font: 500 14px system-ui; }
.family-bar button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: #356149; font-size: 13px; padding: 6px 10px; }
.family-panel { width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 0; border: 1px solid #e0e8e1; border-radius: 12px; color: #273c31; }
.family-panel::backdrop { background: rgb(15 23 42 / 40%); }
.family-panel > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: white; border-bottom: 1px solid #e0e8e1; gap: 10px; }
.family-panel h2 { font-size: 19px; margin: 0; overflow-wrap: anywhere; }
.family-panel > header button { font-size: 24px; background: transparent; color: #356149; border: 0; flex: 0 0 44px; }
.family-content { padding: 16px; overflow-wrap: anywhere; }
.family-content h3 { font-size: 15px; margin-top: 22px; }
.family-member, .family-invite, .family-day-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e0e8e1; }
.family-member > span { min-width: 0; }
.family-member small, .family-day-item small { display: block; color: #627469; font-size: 12px; }
.family-panel .family-day-item { width: 100%; text-align: left; color: #273c31; background: white; border-radius: 0; }
.family-invite-url { margin: 8px 0; font-size: 14px !important; }
.family-audit { padding-left: 20px; font-size: 12px; color: #627469; }
.family-form { margin: 14px 0; }
.family-viewer-note { margin: 0 12px; padding: 8px; color: #627469; font-size: 12px; }
@media(max-width:760px) {
  .family-bar { padding: 2px 12px; gap: 4px; }
  .family-bar select, .family-bar button { min-height: 40px; }
  .family-bar select { font-size: 14px; }
  .family-bar button { font-size: 12px; padding: 4px 7px; }
  .family-panel { margin: 8px auto; max-height: calc(var(--visible-height,100dvh) - 16px); top: var(--visible-top,0px); }
  .family-login-box { margin: 16px 10px; padding: 22px 18px; }
}