/* Shared Family visual language: ocean blue, clear surfaces and generous controls. */
:root { --family-ink:#18334a; --family-blue:#086bb5; --family-line:#dce5ed; --family-surface:#f3f7fa; --color-blue:var(--family-blue); --blue:var(--family-blue); }
body { color:var(--family-ink); }
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #086bb5; outline-offset:3px; }
:where(button,input,select,textarea) { font:inherit; }
:where(button,a) { touch-action:manipulation; }
:where(input,textarea) { user-select:text; }
:where(.nav-bar,.nav) { border-bottom-color:var(--family-line); }
:where(.form-section,.detail-card,.account-card) { box-shadow:0 3px 16px #18334a06; }
.form-hint { padding:10px 16px 14px; color:#516779; font-size:13px; line-height:1.6; }
.form-row input[type=date],.form-row input[type=datetime-local] { min-width:0; max-width:100%; }
.form-row label { flex-shrink:0; }
.error-banner { line-height:1.6; }
.calendar-toolbar { background:#edf5fb; border-bottom:1px solid var(--family-line); }
.calendar-status { background:#edf5fb; }
.calendar-cell { min-width:0; }
.calendar-cell.is-today { background:#f0f7fd; }
.calendar-cell:focus-visible { outline-offset:-3px; }
.calendar-toolbar .nav-btn { width:auto; min-width:64px; height:40px; min-height:40px; font-size:15px; line-height:1.2; font-weight:600; white-space:nowrap; border:1px solid #c9ddeb; border-radius:10px; padding:6px 14px; background:white; }
.event-pill { font-weight:600; }
.form-page .form-area { max-width:600px; margin-inline:auto; }
.family-home .main { max-width:800px; margin-inline:auto; }
.family-home .app-grid { gap:24px 12px; }
.family-home .greeting { padding:20px 0 12px; }
.family-home .greeting-name { letter-spacing:-.04em; color:var(--family-ink); }
.family-home .app-wrapper { padding:12px 4px; border-radius:16px; }
.family-home .app-wrapper:hover { background:#e6eef5; }
.family-files .sync-strip { position:fixed; bottom:0; left:0; right:0; z-index:210; display:flex; align-items:center; gap:8px; padding:8px 14px calc(8px + env(safe-area-inset-bottom)); background:#edf5fb; border-top:1px solid var(--family-line); font-size:12px; }
.sync-strip span { flex:1; min-width:0; }
.sync-strip button { min-height:36px; padding:5px 10px; border:1px solid #bfd3e3; border-radius:8px; background:white; color:var(--family-blue); cursor:pointer; flex-shrink:0; }
.sync-strip .is-error { color:#b32823; }
.family-files .status-bar { bottom:56px; }
.family-files #main-area { padding-bottom:120px; }
.family-files .upload-panel { bottom:100px; }
.family-files .toolbar { gap:6px; overflow-x:auto; }
.family-files #btn-upload { display:flex; gap:5px; align-items:center; white-space:nowrap; background:#e8f3fc; border-radius:8px; }
.family-files #sort-select { min-width:100px; max-width:145px; }
.family-files .root-card { border:1px solid var(--family-line); border-radius:18px; background:white; padding:22px 12px; }
.family-files .root-card:hover { background:#eef6fc; }
.family-files .empty-state p { color:#455e71; }
.family-files .empty-hint { max-width:330px; font-size:13px; line-height:1.7; }
.family-files .file-list-row:hover { background:#eef6fc; }
.family-files .file-item.selected,.family-files .file-list-row.selected { outline:2px solid #086bb5; outline-offset:-2px; }
@media(max-width:420px) { .family-home .app-grid { grid-template-columns:repeat(3,1fr); } .sync-strip { flex-wrap:wrap; } .sync-strip span { flex-basis:100%; } .family-files #btn-upload span { font-size:12px; } }
@media(min-width:760px) { body:has(.calendar-container) { max-width:860px; } body:has(.calendar-container) .nav-bar, body:has(.calendar-container) .tab-bar { max-width:860px; } body:has(.calendar-container) .calendar-cell { min-height:104px; } body:has(.calendar-container) .event-pill { font-size:12px; padding:3px 5px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
@media(max-width:420px) {
  .family-files .status-bar { bottom:92px; }
  .family-files #main-area { padding-bottom:152px; }
  .family-files .upload-panel { bottom:134px; }
}