*{box-sizing:border-box} html,body{overscroll-behavior:none;background:#fff} :root{--ink:#14213d;--muted:#667085;--blue:#1670f8;--pink:#ff416c;--purple:#7c3aed;--orange:#f57c00;--green:#16a05d;--line:#e8edf4;--shadow:0 12px 35px rgba(27,45,80,.10)} body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}.hidden{display:none!important}button,input,textarea,select{font:inherit}button{cursor:pointer}.muted{color:var(--muted)}.small{font-size:12px}.primary,.secondary{border:0;border-radius:14px;padding:12px 18px;font-weight:700}.primary{background:var(--blue);color:#fff}.secondary{background:#f1f4f8;color:var(--ink)}#toast{position:fixed;z-index:1000;left:50%;bottom:110px;transform:translate(-50%,20px);background:#182230;color:#fff;padding:12px 18px;border-radius:14px;opacity:0;pointer-events:none;transition:.2s;margin:0;border:0;box-shadow:none;max-width:min(90vw,420px);width:max-content}#toast::backdrop{background:transparent}#toast[open]{display:block}#toast.show{opacity:1;transform:translate(-50%,0)}
#updateBanner{display:none;position:fixed;z-index:1001;left:0;right:0;top:0;margin:0;border:0;border-radius:0;box-shadow:0 4px 16px #18223022;background:var(--blue);color:#fff;padding:calc(20px + env(safe-area-inset-top)) 18px 20px;align-items:center;justify-content:center;gap:14px;font-weight:700;font-size:14px;width:100%;max-width:100%}#updateBanner[open]{display:flex}#updateBanner::backdrop{background:transparent}#updateBanner span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#updateBannerBtn{flex-shrink:0;border:0;background:#fff;color:var(--blue);font-weight:800;font-size:13px;padding:8px 16px;border-radius:20px}
.auth-shell,.center-screen{position:fixed;inset:0;z-index:200;overflow-y:auto;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#f7fbff,#fff7f9)}.auth-card,.message-card{width:min(480px,100%);background:#fff;padding:34px;border-radius:28px;box-shadow:var(--shadow);text-align:center}.auth-brand{display:flex;justify-content:center;align-items:center;gap:14px}.brand-photo,.top-family-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#bfe1ff,#ffd8df);font-weight:800}.brand-photo{width:76px;height:76px}.script-logo{font-family:Pacifico,cursive;color:#111;font-size:27px}.script-logo b{color:var(--blue)}.auth-brand h1{margin:-4px 0 0;font-size:34px}.tabs{display:flex;background:#f3f1f1;border-radius:14px;padding:4px;margin:24px 0}.tab{flex:1;border:0;background:transparent;padding:12px;border-radius:11px}.tab.active{background:#fff;box-shadow:0 2px 8px #0001}.stack{display:grid;gap:14px}.stack input,.stack textarea,.dialog-card input,.dialog-card textarea,.dialog-card select,.tool-card input,.tool-card select,.tool-card textarea{width:100%;border:1px solid #dfe5ec;border-radius:14px;padding:14px;background:#fff}.text-link{border:0;background:none;color:#8c6655;text-align:right}.profile-photo-button{border:0}
#appView{position:relative;z-index:1}
.app{min-height:100vh;padding-bottom:100px;background:#fff}.topbar{height:130px;display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;background:#fff;position:relative;z-index:10}.brand-button{display:flex;align-items:center;gap:16px;border:0;background:none;text-align:left}.top-family-avatar{width:84px;height:84px;font-size:20px}.brand-words{display:grid}.brand-words strong{font-size:30px;line-height:1}.brand-words small{margin-top:8px;color:var(--muted);font-size:15px}.top-actions{display:flex;align-items:center;gap:18px}.icon-btn{border:0;background:transparent;font-size:28px;position:relative}.icon-btn i{position:absolute;width:9px;height:9px;background:#ff416c;border-radius:50%;right:2px;top:0}.top-profile{width:62px;height:62px;padding:0;border:0;border-radius:50%;overflow:hidden;background:#eef3f8;font-weight:800;flex-shrink:0}.top-profile img{display:block;width:100%;height:100%;object-fit:cover}.main{width:100%;max-width:1500px;padding:0 18px;box-sizing:border-box;margin:0 auto}.page{animation:fade .22s ease}@keyframes fade{from{transform:translateY(4px)}}
/* Home specifically gets a cheaper hide than the app-wide display:none - it's
   the page people bounce back to constantly (every tab bar tap returns here),
   and display:none makes WebKit fully discard its rendering/decoded images,
   forcing a visible one-frame blank flash while everything gets redrawn from
   scratch on return. visibility:hidden keeps it in the render tree (just
   invisible+non-interactive+out of layout flow), so WebKit has much less
   work to redo when it's shown again - no more flash. Scoped to just this
   one page rather than the whole .page class so we're not keeping every
   page's images/DOM silently alive in memory at once. */
#homePage.hidden{
  display:block!important;
  visibility:hidden!important;
  position:absolute!important;
  top:0!important; left:0!important; right:0!important;
  height:0!important; overflow:hidden!important;
  pointer-events:none!important;
}
#mediaSectionPage{background:#fbfcfe;min-height:100%}
#mediaSectionPage .page-body-card{padding-top:22px;background:transparent;box-shadow:none;border-radius:0}
.family-cover{height:min(540px,54vw);min-height:420px;border-radius:30px;overflow:hidden;position:relative;background:#dbe7f2;box-shadow:var(--shadow)}.cover-image{position:absolute;inset:0;background-position:center;background-size:cover;background-image:url('https://images.unsplash.com/photo-1504151932400-72d4384f04b3?auto=format&fit=crop&w=1800&q=88')}.cover-content{position:absolute;left:6%;top:18%;color:white;text-shadow:0 2px 16px #0006}.cover-script{font-family:Pacifico,cursive;font-size:42px}.cover-content h1{font-size:clamp(60px,8vw,120px);line-height:.95;margin:8px 0 18px}.cover-content p{font-size:clamp(18px,2vw,30px);line-height:1.45}.camera-fab{position:absolute;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;border:0;background:#fff;font-size:22px;box-shadow:0 6px 18px #0003}.family-space-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:22px 0}.family-space-card{min-height:225px;border:0;border-radius:28px;padding:26px;text-align:left;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.family-space-card h3{font-size:25px;margin:8px 0}.family-space-card p{font-size:16px;line-height:1.6;color:#475467;max-width:240px}.card-art{font-size:64px;filter:drop-shadow(0 8px 10px #0001)}.memories-card{background:linear-gradient(145deg,#e9f4ff,#dbeaff)}.trips-card{background:linear-gradient(145deg,#fff0f4,#ffe1e9)}.celebrations-card{background:linear-gradient(145deg,#f4efff,#e9ddff)}.study-card{background:linear-gradient(145deg,#fff7e9,#ffebc7)}.memories-card h3{color:var(--blue)}.trips-card h3{color:var(--pink)}.celebrations-card h3{color:var(--purple)}.study-card h3{color:var(--orange)}.round-arrow{position:absolute;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:28px}.memories-card .round-arrow{background:var(--blue)}.trips-card .round-arrow{background:var(--pink)}.celebrations-card .round-arrow{background:var(--purple)}.study-card .round-arrow{background:var(--orange)}
.section-theme{background:#fff;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}.section-hero{min-height:170px;padding:28px 36px;display:flex;align-items:center;gap:28px;position:relative}.section-hero .hero-art{font-size:72px}.section-hero h1{font-size:34px;margin:0 0 10px}.section-hero p{margin:0;color:#475467}.hero-add{margin-left:auto;border:0;border-radius:16px;padding:13px 18px;color:#fff;font-weight:700}.memories-theme .section-hero{background:#e8f4ff}.trips-theme .section-hero{background:#fff0f4}.celebrations-theme .section-hero{background:#f3edff}.study-theme .section-hero{background:#fff5e7}.memories-theme .section-hero h1,.memories-theme .link-button{color:var(--blue)}.trips-theme .section-hero h1,.trips-theme .link-button{color:var(--pink)}.celebrations-theme .section-hero h1,.celebrations-theme .link-button{color:var(--purple)}.study-theme .section-hero h1,.study-theme .link-button{color:var(--orange)}.memories-theme .hero-add{background:var(--blue)}.trips-theme .hero-add{background:var(--pink)}.celebrations-theme .hero-add{background:var(--purple)}.study-theme .hero-add{background:var(--orange)}.filter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px 28px;border-bottom:1px solid var(--line)}.filter{border:0;background:#f8fafc;border-radius:18px;padding:16px 8px;display:grid;gap:6px;font-size:23px}.filter span{font-size:13px}.filter.active{box-shadow:inset 0 0 0 2px #d8e7ff}.content-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 12px}.content-heading h2{margin:0}.link-button{border:0;background:none;font-weight:700}.folder-grid{padding:12px 28px 32px}.visual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.folder-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;display:flex;align-items:center;gap:14px;min-height:110px;position:relative;box-shadow:0 6px 20px #1822300a}.folder-icon{font-size:38px}.folder-info{min-width:0}.folder-info h3{margin:0 0 6px}.folder-info p{margin:0;color:var(--muted);font-size:13px}.folder-menu{margin-left:auto;padding:8px;background:transparent}
.field-label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.dialog-inline-error{margin:0;padding:10px 14px;background:#fef2f2;color:#dc2626;border-radius:12px;font-size:13px;font-weight:600}
.date-field{position:relative;width:100%;box-sizing:border-box}
.date-field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--muted);pointer-events:none}
.date-field input{width:100%;box-sizing:border-box;border:1px solid #dfe5ec;border-radius:14px;padding:14px 14px 14px 42px;background:#fff;-webkit-appearance:none;appearance:none;font:inherit;color:var(--ink)}
.event-card{width:100%;border:1px solid var(--line);border-radius:20px;background:#fff;padding:10px 14px;box-shadow:0 6px 20px #1822300a;text-align:left}
.event-card:empty{visibility:hidden;border-color:transparent;box-shadow:none}
.event-card-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.event-card-icon-img{flex-shrink:0;width:31px;height:31px;border-radius:50%;object-fit:cover}
.event-card-title{flex:1;min-width:0;font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-card-add{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;border:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.event-card-row{display:flex;align-items:center;gap:8px}
.event-card-emoji{flex-shrink:0;width:31px;font-size:25px;text-align:center;line-height:1}
.event-card-info{flex:1 1 0%;min-width:0;width:0;overflow:hidden}
.event-card-info h3{margin:0 0 1px;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-card-info p{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-card-date{color:var(--muted)}
.event-card-dot{color:var(--muted);margin:0 6px}
.event-card-days{color:var(--pink);font-weight:700}
.event-card-empty-main{margin:0;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-card-empty-sub{margin:1px 0 0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-icon img{width:34px;height:auto;display:block;flex-shrink:0}.list-grid{display:grid;gap:10px}.list-grid .folder-card{min-height:74px}.folder-browser{padding:24px}.folder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.folder-toolbar>div,.folder-toolbar-desc{flex:1}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.content-grid>.empty-state,.content-grid>.empty{grid-column:1/-1}.content-card{border:1px solid var(--line);border-radius:20px;padding:14px;background:#fff;min-width:0;overflow:hidden}.content-card h3{overflow-wrap:anywhere;word-break:break-word}.content-preview{width:100%;max-width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#eef2f7;display:block}
.video-wrap{position:relative}
.video-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.video-play-btn svg{width:20px;height:20px;margin-left:2px}
.video-fs-btn{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:8px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;line-height:1}.delete-item{margin-top:10px;width:100%;border:1px solid #fecaca;background:#fef2f2;color:#dc2626;border-radius:12px;padding:9px;font-weight:600;font-size:13px}.meta{font-size:12px;color:var(--muted);margin-top:10px}.empty{padding:28px;text-align:center;color:var(--muted);background:#f8fafc;border-radius:18px}
.empty-state{padding:44px 24px;text-align:center;border:2px dashed var(--line);border-radius:22px;display:flex;flex-direction:column;align-items:center}
.empty-state-icon{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:16px}
.empty-state h3{margin:0 0 6px;font-size:19px;color:var(--ink)}
.empty-state p{margin:0 0 20px;color:var(--muted);font-size:14px}
.empty-state-cta{border:0;border-radius:14px;padding:13px 22px;color:#fff;font-weight:700;font-size:14px}
.empty-state.type-memory{background:linear-gradient(180deg,#f3f8ff,#fff)}
.empty-state.type-memory .empty-state-icon{background:#e3efff}
.empty-state.type-memory .empty-state-cta{background:var(--blue)}
.empty-state.type-trip{background:linear-gradient(180deg,#f3f8ff,#fff)}
.empty-state.type-trip .empty-state-icon{background:#e3efff}
.empty-state.type-trip .empty-state-cta{background:var(--blue)}
.empty-state.type-celebration{background:linear-gradient(180deg,#f3f8ff,#fff)}
.empty-state.type-celebration .empty-state-icon{background:#e3efff}
.empty-state.type-celebration .empty-state-cta{background:var(--blue)}
.empty-state.type-study{background:linear-gradient(180deg,#f3f8ff,#fff)}
.empty-state.type-study .empty-state-icon{background:#e3efff}
.empty-state.type-study .empty-state-cta{background:var(--blue)}.study-tools{margin:0 28px 30px;border:1px solid var(--line);border-radius:18px;padding:16px}.study-tools summary{font-weight:700;cursor:pointer}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2px}.tool-card{padding:16px;background:#f8fafc;border-radius:18px}.periodic-image-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;background:#fff;position:relative}
#toolPanel-periodic{background:#fff}
.periodic-image-scroll img{display:block;height:340px;width:auto;max-width:none;border-radius:14px}
@media (max-width:480px){.periodic-image-scroll:not(.landscape-view){overflow-x:hidden!important}.periodic-image-scroll:not(.landscape-view) img{display:block!important;height:auto!important;width:100%!important;max-width:100%!important}}
.periodic-image-scroll.landscape-view{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:900;border-radius:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:calc(38px + env(safe-area-inset-top)) 0 calc(8px + env(safe-area-inset-bottom));box-sizing:border-box}
.periodic-image-scroll.landscape-view img{height:calc(100vh - 46px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:auto;max-width:none;border-radius:0;margin:0 auto;display:block}
.periodic-rotate-hint{display:none;flex-direction:column;align-items:center;gap:14px;padding:32px;text-align:center;color:var(--ink);max-width:320px}
.periodic-rotate-hint .rotate-icon{font-size:56px;display:inline-block;animation:periodicRotateHint 1.6s ease-in-out infinite}
@keyframes periodicRotateHint{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
.periodic-rotate-hint strong{display:block;font-size:17px;margin-bottom:4px}
.periodic-image-scroll.landscape-view.orient-portrait .periodic-rotate-hint{display:flex}
.periodic-image-scroll.landscape-view.orient-portrait img{display:none}
.periodic-exit-btn{position:absolute;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));z-index:901;border:0;background:rgba(0,0,0,.72);color:#fff;border-radius:12px;padding:9px 16px;font-weight:700;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.calc-actions,.converter-row{display:flex;gap:10px;margin-top:10px}.result-box{margin-top:12px;padding:14px;background:#fff;border-radius:12px}
.timer-preset-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.timer-preset-row button{padding:12px 2px;font-size:16px;font-weight:700}
#toolPanel-timer .calc-actions{justify-content:center}
#toolPanel-timer .calc-actions button{font-size:16px;padding:12px 22px}
.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.calendar-header button{border:0;background:#eef2f7;border-radius:10px;width:30px;height:30px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px}
.calendar-grid .cal-day{padding:6px 0;border-radius:8px;background:#f8fafc;cursor:pointer}
.calendar-grid .cal-day.empty-cell{background:none;cursor:default}
.calendar-grid .cal-day.has-event{background:#fde68a;font-weight:700}
#toolPanel-calendar .converter-row{margin-top:8px}
#toolPanel-calendar .result-box{margin-top:8px;padding:10px}
.section-hero.hero-compact{padding:12px 20px;gap:10px}
.section-hero.hero-compact .hero-art{font-size:26px}
.section-hero.hero-compact h1{font-size:20px;margin:0}
.section-hero.hero-compact p{font-size:12px;margin:2px 0 0}
.section-hero.page-hero-photo{background:none!important;min-height:0;padding:0;display:block;margin:0 -18px 12px;width:calc(100% + 36px)}
.hero-photo{width:100%;height:auto;max-height:320px;object-fit:contain;background:#fff;border-radius:0;display:block}
#studyPage .hero-photo{height:170px;max-height:170px;object-fit:cover}
#memoriesPage .hero-photo,#tripsPage .hero-photo,#celebrationsPage .hero-photo,#mediaHubPage .hero-photo,#mediaSectionPage .hero-photo{height:230px;max-height:230px;object-fit:cover}
.page-body-card{padding-bottom:8px}
.hub-card-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 16px 0}
.hub-select-card{display:flex;align-items:center;gap:10px;border:0;border-radius:18px;padding:13px 12px;cursor:pointer;text-align:left}
.hub-select-card.hub-blue{background:#e7f0ff;color:#1d4ed8}
.hub-select-card.hub-green{background:#e6f7ec;color:#1a7a44}
.hub-select-card .hub-select-ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 6px #0001}
.hub-select-card .hub-select-text{flex:1;font-size:14px}
.hub-select-card .hub-select-arrow{font-size:18px;opacity:.6}
.content-heading.study-tools-heading{display:block!important;padding:14px 16px 0!important}
.content-heading.study-tools-heading.hidden{display:none!important}
.study-tools-heading h2{font-size:18px;margin:0}
.study-tools-heading p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.tool-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 16px 16px}
.tool-icon-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:14px;padding:13px 4px;background:#fff;font-size:12px;font-weight:700;line-height:1.25;cursor:pointer;text-align:center;color:#1e2a3a}
.tool-icon-badge{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tool-icon-badge .tool-icon-emoji{font-size:20px}
.tool-icon-badge.badge-1{background:#dbeeff}
.tool-icon-badge.badge-2{background:#dcf7e6}
.tool-icon-badge.badge-3{background:#ece3ff}
.tool-icon-badge.badge-4{background:#fff2cf}
.tool-icon-badge.badge-5{background:#ffe0e6}
.tool-icon-badge.badge-6{background:#ece3ff}
.tool-icon-badge.badge-7{background:#dbeeff}
.tool-icon-badge.badge-8{background:#dcf7e6}
.tool-icon-badge.badge-9{background:#ffe9d1}
.tool-icon-tile:active{background:#f3f6fb}
.tool-panel-back{display:inline-block;border:0;background:none;color:var(--blue,#3b82f6);font-weight:700;font-size:17px;padding:0 0 12px;margin:22px 0 0 16px;cursor:pointer}
@media (max-width:480px){.tool-icon-grid{gap:8px}.tool-icon-tile{padding:11px 3px;font-size:11px}.tool-icon-badge{width:38px;height:38px}.tool-icon-badge .tool-icon-emoji{font-size:18px}.hub-card-row{gap:8px}.hub-select-card{padding:11px 8px}}
.tool-card.wide-card{grid-column:1/-1}
.calc-display{font-size:22px;text-align:right;padding:14px;font-family:monospace}
.calc-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.calc-keys button{padding:14px 0;border:1px solid #dfe5ec;border-radius:12px;background:#fff;font-size:15px;font-weight:600;cursor:pointer}
.calc-keys button.calc-num{background:#f8fafc}
.calc-keys button.calc-eq{background:var(--blue,#3b82f6);color:#fff;grid-row:span 2}
.calc-keys button:active{opacity:.7}
.timer-display{font-size:44px;font-weight:800;text-align:center;padding:18px;font-family:monospace}
.periodic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;margin-top:12px;max-height:320px;overflow-y:auto}
.periodic-grid button{padding:6px 2px;border:1px solid #dfe5ec;border-radius:8px;background:#f8fafc;font-size:11px;line-height:1.3;cursor:pointer}
.periodic-grid button:hover{background:#eef4ff}
.flash-stage{margin-top:14px;min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:#fff;border-radius:14px;cursor:pointer;font-weight:600;font-size:16px}
.flash-stage .empty{background:none;padding:0}
.utility-page{background:#fff;border-radius:30px;min-height:600px;padding:38px;box-shadow:var(--shadow)}.search-box{margin-top:24px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:8px 16px;font-size:24px}.search-box input{flex:1;border:0;outline:0;padding:12px;font-size:18px}.search-results{margin-top:20px}.profile-panel{max-width:650px;margin:auto;text-align:center}.profile-large{width:120px;height:88px;border:0;border-radius:50%;background:linear-gradient(145deg,#dbeeff,#ffe2e8);font-size:30px;position:relative;overflow:hidden}.profile-large img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-large small{position:absolute;right:22px;bottom:4px;background:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px}.profile-menu{margin-top:28px;display:grid;gap:10px;text-align:left}.profile-menu button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px;display:flex;gap:14px;font-size:16px}.profile-menu button span{flex:1}.member-row{display:flex;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}.admin-invite-form{margin:20px 0 30px}.admin-invite-form select{width:100%;border:1px solid #dfe5ec;border-radius:14px;padding:14px;background:#fff}.admin-subheading{margin:26px 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ===== Family Admin page redesign ===== */
.admin-page{background:transparent!important;box-shadow:none!important;padding:0!important;display:grid;gap:18px}

.admin-tree-card,.admin-invite-card,.admin-list-card{background:#fff;border-radius:26px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:26px}

.admin-tree-card{text-align:center}
.admin-tree-title{font-size:28px;font-weight:800;color:#0f172a;margin:0}
.admin-tree-heart{color:#f43f5e}
.admin-tree-tagline{color:#64748b;margin:6px 0 22px}
.admin-tree-avatars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;justify-items:center;align-items:start;width:min(360px,100%);margin:0 auto;padding:0 4px}
.admin-tree-member{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:140px}
.admin-tree-avatar-wrap{position:relative;width:74px;height:74px}
.admin-tree-avatar{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:22px;object-fit:cover;overflow:hidden;background:#eef2f7}
.admin-tree-avatar-empty{background:#eef2f7;color:#94a3b8;font-size:30px}
.admin-tree-skeleton{background:#eef2f7}
.admin-tree-skeleton-text{display:inline-block;width:56px;height:12px;border-radius:6px;background:#eef2f7}
.admin-tree-skeleton,.admin-tree-skeleton-text{animation:adminTreePulse 1.1s ease-in-out infinite}
@keyframes adminTreePulse{0%,100%{opacity:1}50%{opacity:.45}}
.admin-tree-avatar-photo{border:2px solid #fff;box-shadow:none;background:#fff}
.admin-tree-editable{cursor:pointer}
.admin-tree-edit-badge{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:11px;border:2px solid #fff}
.admin-tree-name{font-weight:700;font-size:13px;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}

.admin-invite-heading{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 18px;color:#1d4ed8}
.admin-invite-icon{font-size:18px}
.admin-invite-fields{display:grid;gap:12px;margin-bottom:14px}
@media(min-width:520px){.admin-invite-fields{grid-template-columns:2fr 1fr}}
.admin-field{display:flex;align-items:center;gap:10px;border:1px solid #dfe5ec;border-radius:16px;padding:14px 16px;background:#f8fafc}
.admin-field input,.admin-field select{flex:1;border:0;background:transparent;font-size:15px;outline:0}
.admin-field-icon{opacity:.7}
.admin-send-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;padding:16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:16px}
.admin-send-icon{font-size:15px;transform:rotate(45deg)}
.admin-invite-hint{text-align:center;margin:14px 0 0}

.admin-lists-grid{display:grid;gap:18px}
@media(min-width:760px){.admin-lists-grid{grid-template-columns:1fr 1fr}}
.admin-list-card{padding:22px}
.admin-list-heading{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 14px;color:#0f172a}
.admin-count-badge{background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px}
.admin-count-badge-green{background:#dcfce7;color:#16a34a}

.admin-member-row,.admin-invite-row-item{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid #f1f4f8}
.admin-member-row:last-child,.admin-invite-row-item:last-child{border-bottom:0}
.admin-row-avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px}
.admin-row-avatar-photo{object-fit:cover}
.admin-row-avatar-invite{background:#ede9fe;color:#7c3aed;font-size:16px}
.admin-row-body{flex:1;min-width:0}
.admin-row-body strong{display:block;font-size:14.5px}
.admin-invite-date{margin-top:2px}
.admin-row-chevron{color:#94a3b8;font-size:20px}
.admin-approve-btn{border:0;border-radius:12px;padding:9px 16px;background:#2563eb;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.admin-cancel-btn{border:1px solid #fecaca;border-radius:12px;padding:9px 14px;background:#fff;color:#dc2626;font-weight:700;font-size:13px;flex-shrink:0}
.admin-row-actions{display:flex;gap:8px;flex-shrink:0}
.admin-icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc;font-size:15px;display:grid;place-items:center}
.admin-icon-btn-danger{border-color:#fecaca;background:#fef2f2}
.mobile-bottom-nav{position:fixed;z-index:50;left:0;right:0;bottom:calc(24px - env(safe-area-inset-bottom));width:100%;height:65px;border:1px solid #e7ecf2;border-width:1px 0 0 0;border-radius:0;background:rgba(255,255,255,.96);box-shadow:0 -2px 8px #18223010;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;backdrop-filter:blur(12px)}dialog{border:0;border-radius:24px;padding:0;box-shadow:var(--shadow);width:min(560px,calc(100% - 30px))}dialog::backdrop{background:#15223877;backdrop-filter:blur(3px)}.dialog-card{padding:24px;display:grid;gap:14px}
#settingsDialog .dialog-card{padding:22px;gap:16px}
#storageUsageSection{display:grid;gap:14px}
.settings-divider{height:1px;background:var(--line);margin:0}
.settings-subhead{font-size:15px;margin:0}
.usage-dashboard-links{display:flex;gap:8px;margin:0}
.usage-block{background:#f8fafc;border-radius:12px;padding:12px 14px;display:grid;gap:9px}
.usage-block-head{display:flex;align-items:center;justify-content:space-between}
.usage-bar{height:7px;border-radius:5px;background:#e7ecf2;overflow:hidden}
.usage-bar-fill{height:100%;width:0%;background:var(--blue);border-radius:5px;transition:width .3s ease,background .3s ease}
.usage-bar-fill.usage-warn{background:#f5821f}
.usage-bar-fill.usage-danger{background:#dc2626}
.usage-threshold-row{display:flex;align-items:center;gap:6px}
.usage-threshold-row input{width:56px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.usage-block p.small{margin:0}
.usage-dashboard-link{flex:1;text-align:center;padding:7px;border-radius:9px;background:#eef2f7;font-weight:600;font-size:12px;color:#1e2a3a;text-decoration:none}.dialog-head,.dialog-actions{display:flex;align-items:center;justify-content:space-between}.dialog-card textarea{min-height:110px}.file-picker{padding:16px;border:1px dashed #b8c4d3;border-radius:14px}.quick-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-add-grid button{border:0;border-radius:18px;padding:24px;background:#f5f8fc;font-size:32px;display:grid;gap:8px}.quick-add-grid span{font-size:14px;font-weight:700}.folder-options-list{display:grid;gap:10px}.folder-option-btn{width:100%;text-align:left;padding:16px 18px;border-radius:14px;background:#f5f8fc;font-weight:600;font-size:15px}.folder-option-btn.danger{background:#fef2f2;color:#dc2626}.event-delete-btn{flex-shrink:0;width:30px;height:30px;border:0;border-radius:50%;background:#fef2f2;color:#dc2626;font-size:14px;display:flex;align-items:center;justify-content:center}.media-hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:20px}.media-hub-grid-top{grid-template-columns:1fr 1fr}.media-hub-grid-bottom{grid-template-columns:1fr 1fr 1fr}.media-hub-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#1e2a3a;box-shadow:0 6px 20px #1822300a}.media-hub-ico{width:44px;height:44px;color:#93a2b8}.media-hub-ico svg{width:100%;height:100%}.ico-blue .media-hub-ico{color:#2f7dfa}.ico-orange .media-hub-ico{color:#f5821f}.ico-red .media-hub-ico{color:#ff3b5c}.ico-teal .media-hub-ico{color:#14b8b3}.ico-purple .media-hub-ico{color:#9333ea}.media-theme .section-hero{background:linear-gradient(135deg,#eef3ff,#f7f0ff)}.media-overlay{position:fixed;inset:0;height:100vh;height:100dvh;z-index:500;background:#000;display:flex;flex-direction:column;touch-action:none;overscroll-behavior:contain}.media-overlay.hidden{display:none}.slideshow-stage{flex:1;position:relative;overflow:hidden;background:#000}
.slideshow-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
transition:opacity .35s ease;
will-change:opacity;
-webkit-user-drag:none;
user-select:none;
pointer-events:none
}
.slideshow-img.active{opacity:1;z-index:2}
.slideshow-img:not(.active){z-index:1}.media-overlay-empty{color:#fff;font-size:16px;text-align:center;padding:24px}.overlay-btn{position:absolute;border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:50%;width:46px;height:46px;font-size:22px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}.overlay-btn svg{width:22px;height:22px}.overlay-close{top:calc(16px + env(safe-area-inset-top));right:16px}.overlay-close.static{position:static;margin-right:12px}
.slideshow-toolbar{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(20,26,38,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px;border-radius:32px;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .3s ease,transform .3s ease;z-index:2}
.tb-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.14);color:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
.tb-btn svg{width:19px;height:19px}
.tb-btn.tb-nav{width:36px;height:36px;font-size:15px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.tb-btn.tb-delete{background:rgba(255,90,90,.22);border-color:rgba(255,120,120,.35);color:#ffb4b4}
.tb-btn.tb-close{font-weight:600;font-size:17px}
.tb-btn.muted{opacity:.55}
.tb-btn.has-music{opacity:1}
.slideshow-title,.slideshow-counter{transition:opacity .3s ease}
#slideshowOverlay.hide-controls .slideshow-toolbar{opacity:0;pointer-events:none}
#slideshowOverlay.hide-controls .slideshow-toolbar{transform:translateX(-50%) translateY(10px)}

.slideshow-title{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:700;background:rgba(255,255,255,.15);padding:4px 14px;border-radius:20px;max-width:64%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px)}.slideshow-counter{position:absolute;top:calc(46px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,.15);padding:4px 12px;border-radius:20px}.video-gallery-head{display:flex;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;color:#fff}.video-gallery-head h2{flex:1;font-size:18px}.video-gallery-list{flex:1;overflow-y:auto;padding:8px 16px calc(20px + env(safe-area-inset-bottom))}.video-gallery-item{width:100%;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:0;color:#fff;border-radius:14px;padding:14px;margin-bottom:10px;text-align:left;font-size:15px;font-weight:600}.video-thumb{width:38px;height:38px;background:#1670f8;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.video-thumb svg{width:20px;height:20px;color:#fff}.video-player-wrap{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) 12px 12px}.video-player-wrap.hidden{display:none}.video-player-title{color:#fff;font-size:14px;font-weight:700;text-align:center;padding:8px 40px 4px;margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.video-player-wrap video{flex:1;width:100%;min-height:0;border-radius:12px;background:#000}
/* (old pre-!important mobile block removed - fully superseded by the block below) */

/* ===== Desktop/tablet styling for elements the mobile block below customizes ===== */
/* These had NO styling outside the mobile media query, so on screens over 900px
   they rendered as unstyled default buttons/images - this was the "duplicated" look on PC */
.card-camera-btn{position:absolute;top:16px;right:16px;width:40px;height:40px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.15);font-size:16px;z-index:10;display:grid;place-items:center;border:0}


/* Prevent grid items from forcing the layout wider than the viewport (classic CSS Grid gotcha - items default to min-width:auto) */
.app,.main{overflow-x:hidden}
.family-space-grid,.family-space-card{min-width:0}
.family-space-card h3,.family-space-card p{overflow-wrap:break-word;word-break:break-word}
html{width:100%;max-width:100vw;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100vw;overflow-x:clip}
#appView{max-width:100vw;overflow-x:clip}

/* Bottom nav buttons - had zero styling outside the mobile block, rendered as plain default buttons */
html,body{overflow-x:hidden}
.mobile-bottom-nav{grid-template-columns:repeat(4,1fr);justify-items:center}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;background:none;border:0;padding:8px 0;margin:0;color:#1670f8;width:100%;height:100%}
.mobile-nav-item .nav-ico{width:26px;height:26px;line-height:1;display:flex;align-items:center;justify-content:center;color:#1670f8}
.mobile-nav-item .nav-ico svg{width:100%;height:100%;display:block}
.mobile-nav-item small{font-size:12px;font-weight:700;color:#1670f8;line-height:1}
.mobile-nav-item.add-main{justify-content:center}
.mobile-nav-item.add-main .add-plus{width:22px;height:22px;border-radius:50%;background:#1670f8;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:5px;padding:5px;box-sizing:border-box}
.mobile-nav-item.add-main .add-plus svg{width:100%;height:100%;display:block}


/* =========================================================================
   MOBILE APP SHELL — v2 (single source of truth)
   -------------------------------------------------------------------------
   This replaces every previous "V8 / V9 / V12 / V17 / FINAL / ChatGPT
   refinements" mobile patch that used to stack on top of each other with
   competing !important rules (several of them targeting classes like
   .mobile-nav, .nav-label, .home-card, .add-main that don't even exist in
   index.html anymore, and several redefining .app/.main/.topbar height with
   conflicting hardcoded numbers). All of that is gone. Phone-width layout
   now lives in exactly one place, top to bottom in the order the app is
   built: shell -> topbar -> scroll area -> Home -> Gallery -> other pages
   -> bottom nav.

   Layout model:
   - .app is pinned to the viewport height (100dvh) and never scrolls itself.
   - .main is the ONE scrollable region between the topbar and the nav.
     It always reserves clearance at its own bottom so nothing can ever
     render underneath the fixed nav.
   - Most pages (.main>.page) just take their natural content height, and
     .main scrolls if that content is taller than the screen.
   - Home and the Gallery hub are fixed, short menus meant to fit in one
     screen with no scrolling. Each hands its one flexible child (the cover
     photo on Home, the card grid on Gallery) any leftover vertical space,
     so extra room becomes a slightly bigger photo/cards instead of a dead
     blank gap above the nav.
   ========================================================================= */
@media (max-width:1024px){

  html,body{ height:100%; }

  /* ---------- App shell ---------- */
  .app{
    height:100dvh!important; height:100svh!important; min-height:0!important;
    display:flex!important; flex-direction:column!important;
    overflow:hidden!important; padding-bottom:0!important;
    background:#fff!important;
  }

  /* ---------- Topbar ---------- */
  .topbar{
    flex:0 0 auto!important;
    height:auto!important; min-height:52px!important;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important;
    background:#fff!important; border-bottom:1px solid #eef2f7!important;
    display:flex!important; align-items:center!important; justify-content:space-between!important;
  }
  .brand-button{ gap:0!important; border:0!important; background:none!important; text-align:left!important; padding:0!important; }
  .brand-words{ display:flex!important; flex-direction:column!important; line-height:1.05!important; gap:2px!important; }
  .brand-words .script-logo{ font-family:Pacifico,cursive!important; font-size:19px!important; line-height:1.1!important; margin:0 0 1px!important; display:block!important; }
  .brand-words .script-logo b{ color:#ef4444!important; }
  .brand-words strong{ font-size:15px!important; color:#1670f8!important; line-height:1.1!important; display:block!important; margin:0!important; }
  .brand-words small{ font-size:10.5px!important; color:#6b7280!important; line-height:1!important; margin-top:2px!important; display:block!important; }
  .top-family-avatar{ display:none!important; }
  .top-profile{ width:36px!important; height:36px!important; padding:0!important; flex-shrink:0!important; border-radius:50%!important; background:#eef4ff!important; border:2px solid #fff!important; box-shadow:0 2px 8px rgba(0,0,0,.12)!important; display:grid!important; place-items:center!important; font-size:18px!important; overflow:hidden!important; }
  .top-profile img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; }
  #notificationBtn{ display:none!important; }

  /* ---------- Scroll region (topbar to nav) ---------- */
  .main{
    flex:1 1 auto!important; min-height:0!important;
    display:flex!important; flex-direction:column!important;
    width:100%!important; max-width:480px!important; margin:0 auto!important;
    padding:0 8px!important;
    overflow-y:auto!important; -webkit-overflow-scrolling:touch!important;
    /* reserved clearance above the fixed nav for every page */
    padding-bottom:calc(50px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
  }
  .main:has(#mediaSectionPage:not(.hidden)){ background:#fbfcfe!important; }

  /* Default: a page is exactly as tall as its content; .main scrolls if
     the content is taller than the available space. */
  .main>.page{ flex:0 0 auto!important; }

  /* Home & Gallery: fixed one-screen layouts that fill the available
     height instead of leaving blank space below them. Gallery's
     overflow:hidden lives on its inner body-card (not the page itself)
     so the hero photo's edge-to-edge negative margin isn't clipped. */
  #homePage.page:not(.hidden){
    flex:1 1 auto!important;
    display:flex!important; flex-direction:column!important;
    min-height:0!important; gap:16px!important;
    padding-bottom:0!important; margin-bottom:0!important;
  }
  #homePage .event-card{ flex:0 0 auto!important; width:auto!important; margin:0 14px!important; padding:7px 12px!important; min-height:0!important; box-sizing:border-box!important; background:linear-gradient(145deg,#eaf5ff,#dcedff)!important; border-color:#cfe4ff!important; box-shadow:none!important; }
  #homePage .event-card-icon-img{ width:27px!important; height:27px!important; }
  #homePage .event-card-info{ flex:1 1 0%!important; min-width:0!important; width:0!important; overflow:hidden!important; }
  #homePage .event-card-title{ font-size:13.5px!important; }
  #homePage .event-card-info h3{ font-size:13.5px!important; }
  #homePage .event-card-info p{ font-size:11.3px!important; }
  #homePage .event-card-empty-main{ font-size:12.3px!important; }
  #homePage .event-card-empty-sub{ font-size:10.3px!important; }
  #homePage .event-card-add{ width:24px!important; height:24px!important; font-size:15px!important; flex-shrink:0!important; }
  #homePage .event-card-top{ gap:8px!important; margin-bottom:4px!important; }
  #homePage .event-card-row{ gap:8px!important; }
  #homePage .event-card-emoji{ width:27px!important; font-size:21px!important; }
  #mediaHubPage.page:not(.hidden){
    flex:1 1 auto!important;
    display:flex!important; flex-direction:column!important;
    min-height:0!important; gap:8px!important;
    padding-bottom:0!important; margin-bottom:0!important;
  }
  #mediaHubPage.page:not(.hidden) .page-body-card{
    flex:1 1 auto!important; display:flex!important; flex-direction:column!important;
    min-height:0!important; overflow:hidden!important;
  }

  /* ---------- Home ---------- */
  .family-cover{
    flex:0 0 auto!important;
    height:195px!important;
    min-height:195px!important;
    max-height:195px!important;
    border-radius:0!important;
    margin:0 -18px 3px!important;
    width:calc(100% + 36px)!important;
    position:relative!important;
    overflow:hidden!important;
  }
  .cover-image{ position:absolute!important; inset:0!important; background-size:cover!important; background-position:center 38%!important; }
  .cover-content{ position:absolute!important; left:28px!important; top:12px!important; right:60px!important; max-width:62%!important; text-shadow:0 1px 6px rgba(0,0,0,.35)!important; z-index:2!important; }
  .cover-script{ font-family:Pacifico,cursive!important; font-size:15px!important; line-height:1!important; margin:0 0 2px!important; display:block!important; color:#fff!important; }
  .cover-content h1{ font-size:26px!important; line-height:.9!important; margin:0 0 3px!important; font-weight:800!important; color:#fff!important; }
  .cover-content p{ font-size:9px!important; line-height:1.2!important; margin:0!important; color:rgba(255,255,255,.92)!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; }
  .camera-fab{ width:26px!important; height:26px!important; left:10px!important; right:auto!important; bottom:8px!important; background:rgba(255,255,255,.9)!important; backdrop-filter:blur(8px)!important; border-radius:50%!important; font-size:10px!important; box-shadow:0 2px 8px rgba(0,0,0,.15)!important; display:grid!important; place-items:center!important; z-index:3!important; }

  .family-space-grid{
    /* Fixed minimum so the cards can never be squeezed shorter than
       readable (title + 2-line description). If total page content
       is taller than the screen, the page scrolls instead of clipping -
       far more robust than shrinking cards to fit no matter what. */
    flex:1 1 0!important; min-height:290px!important;
    display:grid!important; grid-template-columns:1fr 1fr!important; grid-template-rows:1fr 1fr!important;
    gap:16px!important; margin:0 14px!important;
  }
  .family-space-card{ height:100%!important; min-height:0!important; border-radius:14px!important; padding:0!important; position:relative!important; overflow:hidden!important; background:#fff!important; box-shadow:none!important; border:0!important; }
  /* Flat pastel card colours, resampled directly from each icon image's
     own background so the image blends in seamlessly with no visible
     seam (see .card-local-image using object-fit:contain below). */
  .memories-card{ background:#b8d0f0!important; }
  .trips-card{ background:#fcd0e0!important; }
  .celebrations-card{ background:#ccb4f0!important; }
  .study-card{ background:#f8d8b0!important; }
  .card-default-content{ height:100%!important; min-height:0!important; padding:6px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; gap:4px!important; position:relative!important; z-index:2!important; }
  .card-local-image{ flex:0 0 auto!important; width:100%!important; aspect-ratio:4/3!important; margin:0 0 2px!important; border-radius:12px!important; object-fit:contain!important; object-position:center!important; }
  .family-space-card h3{ font-size:12px!important; margin:1px 0!important; line-height:1.1!important; }
  .family-space-card p{ font-size:9px!important; line-height:1.25!important; margin:0!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; }
  .round-arrow{ width:16px!important; height:16px!important; right:5px!important; bottom:5px!important; font-size:9px!important; }
  

  /* ---------- Gallery hub (mediaHub) ---------- */
  #mediaHubPage .section-hero{ flex:0 0 auto!important; min-height:0!important; margin-bottom:12px!important; padding:22px 18px!important; gap:16px!important; }
  #mediaHubPage .section-hero.page-hero-photo{ padding:0!important; margin:0 -18px 12px!important; min-height:0!important; gap:0!important; }
  #mediaHubPage .section-hero .hero-art{ font-size:54px!important; }
  #mediaHubPage .section-hero h1{ font-size:27px!important; margin:0 0 5px!important; }
  #mediaHubPage .section-hero p{ font-size:13.5px!important; line-height:1.3!important; }
  #mediaHubPage .media-hub-grid-top,#mediaHubPage .media-hub-grid-bottom{
    flex:0 0 auto!important;
    display:grid!important;
    gap:10px!important; padding:0 6px!important; min-height:0!important;
  }
  #mediaHubPage .media-hub-grid-top{ grid-template-columns:1fr 1fr!important; margin:24px 0 18px!important; }
  #mediaHubPage .media-hub-grid-bottom{ grid-template-columns:1fr 1fr 1fr!important; }
  #mediaHubPage .media-hub-card{ padding:28px 6px!important; border-radius:18px!important; gap:10px!important; font-size:13.5px!important; min-height:0!important; justify-content:center!important; }
  #mediaHubPage .media-hub-grid-bottom .media-hub-card{ padding:36px 6px!important; }
  #mediaHubPage .media-hub-ico{ width:38px!important; height:38px!important; }
  .video-fs-btn{ top:6px!important; right:6px!important; bottom:auto!important; }
  .video-play-btn{ width:30px!important; height:30px!important; }
  .video-play-btn svg{ width:14px!important; height:14px!important; }

  /* ---------- Fullscreen photo/video overlays ---------- */
  /* Now siblings of <main> in the DOM (not nested inside its scrolling
     container), so position:fixed reliably covers the full viewport,
     including the area behind the topbar and bottom nav. */
  .media-overlay{ padding-bottom:env(safe-area-inset-bottom)!important; }
  .slideshow-toolbar{ gap:6px; padding:7px; }
  .tb-btn{ width:40px; height:40px; }
  .tb-btn.tb-nav{ width:34px; height:34px; }

  /* ---------- Other pages (Memories/Trips/Celebrations/Study Hub,
     Search/Profile/Admin) — variable-length content, scrolls inside
     .main using the default flex:0 0 auto + the reserved bottom
     clearance set on .main above ---------- */
  .section-theme{ background:transparent!important; border-radius:0!important; box-shadow:none!important; }
  .folder-grid{ padding:8px 20px 16px!important; }
  .visual-grid{ grid-template-columns:1fr 1fr!important; gap:18px!important; }
  .folder-card{ padding:8px!important; gap:6px!important; min-height:0!important; border-radius:14px!important; }
  .folder-icon{ font-size:22px!important; }
  .folder-info h3{ font-size:13px!important; margin:0 0 2px!important; }
  .folder-info p{ font-size:11px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
  .folder-menu{ padding:4px!important; }
  .content-grid{ grid-template-columns:repeat(4,1fr)!important; gap:6px!important; }
  .content-card{ padding:5px!important; border-radius:12px!important; }
  .content-preview{ border-radius:9px!important; }
  .content-card h3{ font-size:12px!important; margin:4px 0 0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
  .content-card .meta{ font-size:9px!important; margin-top:4px!important; }
  .content-card p{ display:none!important; }
  .delete-item{ font-size:10px!important; padding:5px!important; margin-top:4px!important; border-radius:8px!important; }
  .content-heading{ padding:20px 16px 10px!important; }
  .tool-grid{ grid-template-columns:1fr!important; }
  .utility-page{ padding:24px 18px 130px!important; border-radius:22px!important; background:transparent!important; box-shadow:none!important; }

  /* ---------- Folder browser (e.g. Celebrations > Family) ---------- */
  .folder-browser{ padding:16px!important; }
  .folder-toolbar{ gap:10px!important; margin-bottom:14px!important; flex-wrap:wrap!important; }
  .folder-toolbar .back-folders{ font-size:13px!important; padding:9px 12px!important; border-radius:11px!important; }
  .folder-toolbar h2{ font-size:19px!important; margin:0 0 2px!important; }
  .folder-toolbar p{ font-size:12.5px!important; }
  .folder-toolbar .upload-folder{ font-size:13px!important; padding:9px 14px!important; border-radius:11px!important; }
  .empty{ padding:18px!important; font-size:13px!important; border-radius:14px!important; line-height:1.5!important; }
  .empty-state{ padding:32px 18px!important; border-radius:18px!important; }
  .empty-state-icon{ width:60px!important; height:60px!important; font-size:28px!important; margin-bottom:12px!important; }
  .empty-state h3{ font-size:16px!important; }
  .empty-state p{ font-size:12.5px!important; margin-bottom:16px!important; }
  .empty-state-cta{ font-size:13px!important; padding:11px 18px!important; }

  /* ---------- Bottom nav ---------- */
  /* Sizing/shape comes entirely from the base .mobile-bottom-nav rule
     (floating rounded pill) so there's exactly one definition, no
     second conflicting docked-style override fighting it. */
  .mobile-nav-item{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; gap:5px!important; background:none!important; border:0!important; padding:9px 0 5px!important; margin:0!important; color:#1670f8!important; width:100%!important; height:100%!important; }
  .mobile-nav-item .nav-ico{ width:26px!important; height:26px!important; line-height:1!important; display:flex!important; align-items:center!important; justify-content:center!important; color:#1670f8!important; }
  .mobile-nav-item .nav-ico svg{ width:100%!important; height:100%!important; display:block!important; }
  .mobile-nav-item small{ font-size:12px!important; font-weight:700!important; color:#1670f8!important; line-height:1!important; }

  /* Gallery page specifically needs the flexible-fill above to actually
     reach the nav; pull its trailing margin in to close the last gap. */
  /* (margin-bottom hack removed - #mediaHubPage .media-hub-grid above
     now reliably fills remaining space on its own via flex-basis:0) */
}

.card-camera-btn,#changeCoverBtn{display:none!important}



/* ===== Step 3 Home Image Styling (desktop / >900px only - the mobile
   block above is authoritative below 900px) ===== */

.cover-local-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.family-cover{
  min-height:430px;
}

.card-default-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:18px 16px 18px;
}

.card-local-image{
  display:block;
  width:100%;
  height:88px;
  aspect-ratio:500/333;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
  margin:0 0 8px;
}

.family-space-card{
  min-height:210px;
  cursor:pointer;
}

.card-default-content h3{
  margin:4px 0;
}

.card-default-content p{
  margin:0;
}

.round-arrow{
  display:none!important;
}

/* ===== Profile avatar circle fix ===== */
.profile-large{
  width:120px !important;
  height:120px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
}

.profile-large img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

.profile-large small{
  width:24px !important;
  height:24px !important;
  font-size:11px !important;
  right:15px !important;
  bottom:15px !important;
}

/* Android only — scoped to body.android, so none of this touches iOS/iPhone.
   Root cause of "cards trimmed off / upcoming event missing": this block used
   to make the hero photo and cards BIGGER (205px / fixed 165px) than the
   default, which pushed total Home content taller than Android's real
   viewport. Because the bottom nav is a fixed, floating pill, the overflow
   didn't just require a scroll — it rendered permanently underneath the nav,
   unreachable. Shrinking these (and tightening the nav clearance below,
   which was tuned around iPhone's ~34px safe-area-inset-bottom and left a
   gap on Android where that inset is 0) fixes both symptoms at once. */
body.android .family-cover{
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
}

body.android .family-space-grid{
    min-height:225px !important;
}

body.android .family-space-card{
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
}

/* Shorter bottom nav on Android, and clearance that actually matches its
   real footprint (offset + height) instead of relying on an iPhone-style
   safe-area inset Android mostly doesn't report. Fixes the nav overlapping/
   sitting flush against content on every non-Home page. */
body.android .mobile-bottom-nav{
    height:54px !important;
    bottom:env(safe-area-inset-bottom) !important;
}
body.android .mobile-nav-item{
    padding:6px 0 4px !important;
    gap:3px !important;
}
body.android .mobile-nav-item .nav-ico{
    width:22px !important;
    height:22px !important;
}
body.android .mobile-nav-item small{
    font-size:11px !important;
}
body.android .mobile-nav-item.add-main .add-plus{
    width:18px !important;
    height:18px !important;
    margin-bottom:3px !important;
}
body.android .main{
    padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important;
}

/* ===== Admin page balance + avatar polish ===== */
@media (max-width: 1024px){
  #adminPage.utility-page{
    padding: 12px 12px calc(100px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #adminPage.admin-page{
    gap: 14px !important;
  }

  #adminPage .admin-tree-card,
  #adminPage .admin-invite-card,
  #adminPage .admin-list-card{
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #adminPage .admin-tree-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #adminPage .admin-tree-avatars{
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin: 2px auto 0 !important;
    padding: 0 !important;
    gap: 16px 18px !important;
    justify-items: center !important;
  }

  #adminPage .admin-tree-member{
    max-width: none !important;
  }

  #adminPage .admin-tree-avatar-wrap{
    width: 72px !important;
    height: 72px !important;
  }

  #adminPage .admin-tree-avatar-photo{
    box-shadow: none !important;
    border: 0 !important;
    background: #fff !important;
  }

  #adminPage .admin-tree-edit-badge{
    right: 0 !important;
    bottom: 0 !important;
    transform: translate(35%,35%) !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #fff !important;
    background: #2563eb !important;
  }

  #adminPage .admin-tree-edit-badge svg{
    width: 12px !important;
    height: 12px !important;
    display: block !important;
  }
}