.access-shell { max-width:1100px; min-height:100dvh; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; padding:32px max(20px,env(safe-area-inset-left)); }
.access-art { overflow:hidden; border-radius:36px; border:3px solid var(--ink); background:#f5c6dc; box-shadow:8px 8px 0 var(--ink); position:relative; aspect-ratio:4/5; }
.access-art img { height:100%; width:300%; max-width:none; object-fit:cover; object-position:left; }
.access-art>span { position:absolute; left:20px; bottom:20px; font-size:clamp(24px,4vw,42px); font-weight:900; background:var(--paper); border:2px solid var(--ink); border-radius:16px; padding:10px 18px; }
.access-card { max-width:500px; width:100%; margin:auto; }
.access-logo { margin-bottom:12px; }
.access-card h1 { font-size:clamp(28px,4vw,40px); margin:6px 0 12px; }
.access-card>p { line-height:1.6; }
.access-card form { margin:22px 0; }
.access-links { display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:18px; }
.shared-status { padding:7px 20px; text-align:center; font-size:12px; background:#e5f3eb; color:#244a39; }
.shared-status.offline { background:#ffedc2; color:#6b4515; }
.shared-family { margin-top:24px; padding:24px; }
.shared-family h2,.shared-family h3 { margin:4px 0 12px; }
.shared-family p { line-height:1.6; }
.family-actions { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }
.shared-notice { border:2px solid #cba5c5; background:#fff3fb; color:#34273c; border-radius:16px; padding:18px; margin:18px 0; overflow-wrap:anywhere; }
.shared-notice .field { margin:12px 0; }
.invite-code { font-family:ui-monospace,monospace; font-size:16px; width:100%; }
.family-list,.family-data,#shared-password-form { margin:24px 0; padding-top:20px; border-top:1px solid #ddd3d5; }
.family-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #eee4e5; }
.family-row small { display:block; opacity:.75; margin-top:4px; }
.family-row button { min-height:44px; flex-shrink:0; }
.family-data form { margin-top:20px; }
#shared-password-form { max-width:480px; }
.shared-family input[type=file] { max-width:100%; padding:12px 0; }
@media(min-width:700px) and (min-height:560px) {
  body[data-shared="true"][data-mode="child"][data-child-tab="home"] #app { grid-template-rows:auto auto minmax(0,1fr); }
}
@media(max-width:700px) { .access-shell { display:block; min-height:100dvh; padding:24px 20px; }.access-art {display:none}.access-card {max-width:440px}.shared-family {padding:18px}.family-actions>.button {width:100%}.shared-status {font-size:11px;padding:6px 12px} }