:root {
    --pink: #ec4899;
    --pink-dark: #be185d;
    --purple: #8b5cf6;
    --blue: #3b82f6;
    --orange: #f97316;
    --green: #10b981;
    --yellow: #fbbf24;
    --ink: #3f3452;
    --muted: #7d728d;
    --line: #eadff0;
    --paper: rgba(255,255,255,.93);
    --shadow: 0 18px 50px rgba(99, 72, 120, .14);
    --radius: 24px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #fff7fb; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:
    radial-gradient(circle at 8% 5%, rgba(251,191,36,.18), transparent 25rem),
    radial-gradient(circle at 92% 10%, rgba(139,92,246,.14), transparent 28rem),
    linear-gradient(150deg,#fff7fb 0%,#f8f6ff 46%,#f2fbff 100%); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: .82rem .92rem; color: var(--ink); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: #d8a4c4; box-shadow: 0 0 0 4px rgba(236,72,153,.10); }
textarea { resize: vertical; }
label > span, legend { display: block; font-size: .82rem; font-weight: 800; color: #665a78; margin: 0 0 .38rem; }
fieldset { border: 0; margin: 0; padding: 0; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem,2vw,2rem); }
h2 { margin-bottom: 0; font-size: clamp(1.25rem,2vw,1.75rem); }
h3 { margin-bottom: .25rem; }
.eyebrow { margin-bottom: .25rem; color: var(--pink-dark); text-transform: uppercase; letter-spacing: .11em; font-size: .7rem; font-weight: 900; }
.hint { color: var(--muted); font-size: .86rem; margin: .75rem 0 0; }
.hidden { display: none !important; }
.wide { width: 100%; }
.primary-button,.soft-button,.danger-button,.icon-button,.round-button,.view-button { border: 0; border-radius: 14px; font-weight: 850; transition: transform .12s, box-shadow .12s, background .12s; }
.primary-button { color: white; padding: .78rem 1rem; background: linear-gradient(135deg,var(--pink),var(--purple)); box-shadow: 0 10px 22px rgba(190,24,93,.18); }
.soft-button { color: #665071; padding: .72rem .95rem; background: #f7edf6; }
.danger-button { color: #b42342; padding: .72rem .95rem; background: #fff0f3; }
.icon-button,.round-button { width: 42px; height: 42px; background: #f8eef7; color: #765b80; font-size: 1.4rem; }
.round-button { border-radius: 50%; font-size: 1rem; }
.primary-button:hover,.soft-button:hover,.danger-button:hover,.icon-button:hover,.round-button:hover,.view-button:hover { transform: translateY(-1px); }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.login-card { width: min(440px,100%); text-align: center; padding: 2.2rem; border-radius: 32px; background: var(--paper); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(14px); }
.logo-bloom { width: 78px; height: 78px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 28px; font-size: 2.25rem; background: linear-gradient(145deg,#ffe4f1,#eee5ff); box-shadow: 0 12px 24px rgba(139,92,246,.15); }
.login-copy { color: var(--muted); line-height: 1.55; }
.stack-form { display: grid; gap: 1rem; text-align: left; margin-top: 1.5rem; }
.stay-note { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; }
.form-error { min-height: 1.15rem; color: #b42342; font-size: .84rem; margin: 0; }

.app-shell,.admin-shell { min-height: 100vh; }
.app-header,.admin-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem,3vw,2.4rem); background: rgba(255,250,253,.88); border-bottom: 1px solid rgba(234,223,240,.8); backdrop-filter: blur(18px); }
.brand-wrap,.header-actions { display: flex; align-items: center; gap: .75rem; }
.mini-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg,#ffe1ef,#ece3ff); font-size: 1.25rem; }
.user-chip { display: inline-flex; align-items: center; max-width: 220px; padding: .55rem .8rem; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(99,72,120,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 750; font-size: .85rem; }
.app-main,.admin-main { padding: 1rem clamp(.75rem,2.4vw,2rem) 7rem; max-width: 1600px; margin: 0 auto; }
.screen { display: none; gap: 1rem; }
.screen.active { display: grid; }
#calendar-screen.active { grid-template-columns: minmax(0,1fr) 310px; }
.calendar-card,.page-card,.upcoming-card { background: var(--paper); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius); box-shadow: var(--shadow); }
.calendar-card,.page-card { padding: clamp(.9rem,2vw,1.5rem); }
.upcoming-card { padding: 1.2rem; align-self: start; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; }
.calendar-topbar,.period-heading,.section-heading,.dialog-header,.dialog-actions,.inline-form,.settings-panel,.family-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.calendar-topbar { margin-bottom: 1rem; }
.period-heading { margin-bottom: .9rem; }
.view-switch { display: flex; gap: .25rem; padding: .25rem; background: #f8eef7; border-radius: 16px; }
.view-button { padding: .58rem .9rem; color: #715e7d; background: transparent; }
.view-button.active { color: white; background: linear-gradient(135deg,var(--pink),var(--purple)); box-shadow: 0 7px 16px rgba(139,92,246,.18); }
.calendar-nav { display: flex; align-items: center; gap: .4rem; }
.calendar-view { display: none; }
.calendar-view.active { display: block; }
.weekday-row,.month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.weekday-row { padding: .3rem 0 .55rem; color: var(--muted); text-align: center; font-size: .76rem; font-weight: 850; }
.month-grid { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.month-day { position: relative; min-height: 116px; padding: .48rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; }
.month-day:nth-child(7n) { border-right: 0; }
.month-day:nth-last-child(-n+7) { border-bottom: 0; }
.month-day.other-month { background: #fbf9fc; color: #afa5b8; }
.month-day.today { background: linear-gradient(160deg,#fff7fb,#f8f4ff); box-shadow: inset 0 0 0 2px rgba(236,72,153,.35); }
.day-number-button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-weight: 900; }
.today .day-number-button { color: #fff; background: var(--pink); }
.month-events { display: grid; gap: .22rem; margin-top: .2rem; }
.event-pill { min-width: 0; width: 100%; border: 0; border-left: 4px solid var(--event-color); border-radius: 8px; padding: .3rem .4rem; text-align: left; background: color-mix(in srgb,var(--event-color) 13%,white); color: #473a51; font-size: .7rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-pill.school::before { content: "🎒 "; }
.more-events { color: var(--muted); font-size: .68rem; font-weight: 800; padding-left: .3rem; }

.week-grid { min-width: 880px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; }
#week-view { overflow-x: auto; }
.week-head { display: grid; grid-template-columns: 58px repeat(7,1fr); position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); }
.week-head > div { padding: .65rem .35rem; text-align: center; border-left: 1px solid var(--line); }
.week-head > div:first-child { border-left: 0; }
.week-day-head { border: 0; background: transparent; color: var(--ink); font-weight: 850; }
.week-day-head.today { color: var(--pink-dark); }
.week-all-day { display: grid; grid-template-columns: 58px repeat(7,1fr); border-bottom: 1px solid var(--line); min-height: 48px; }
.week-all-day > div { border-left: 1px solid var(--line); padding: .25rem; }
.week-all-day > div:first-child { border-left: 0; color: var(--muted); font-size: .67rem; padding-top: .5rem; text-align: center; }
.week-hours { position: relative; display: grid; grid-template-columns: 58px repeat(7,1fr); }
.week-time-col,.week-day-col { position: relative; height: 1020px; }
.week-day-col { border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom,transparent 0,transparent 59px,var(--line) 60px); }
.week-time-label { position: absolute; right: .4rem; transform: translateY(-50%); color: var(--muted); font-size: .66rem; }
.time-slot-button { position: absolute; inset-inline: 0; height: 60px; border: 0; background: transparent; }
.time-slot-button:hover { background: rgba(236,72,153,.04); }
.week-event { position: absolute; left: 4px; right: 4px; min-height: 28px; z-index: 1; overflow: hidden; border: 0; border-left: 4px solid var(--event-color); border-radius: 9px; padding: .28rem .35rem; text-align: left; color: #44374f; background: color-mix(in srgb,var(--event-color) 18%,white); font-size: .68rem; font-weight: 800; box-shadow: 0 4px 10px rgba(80,55,90,.08); }

.day-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 1rem; }
.all-day-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.all-day-event { border: 0; border-left: 5px solid var(--event-color); border-radius: 12px; padding: .55rem .7rem; background: color-mix(in srgb,var(--event-color) 15%,white); font-weight: 800; color: var(--ink); }
.day-timeline { position: relative; height: 1440px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(to bottom,#fff 0,#fff 59px,var(--line) 60px); }
.day-hour-label { position: absolute; left: .55rem; width: 54px; transform: translateY(-50%); color: var(--muted); font-size: .72rem; text-align: right; }
.day-slot { position: absolute; left: 70px; right: 0; height: 60px; border: 0; border-left: 1px solid var(--line); background: transparent; }
.day-slot:hover { background: rgba(236,72,153,.035); }
.day-event { position: absolute; left: 78px; right: 10px; min-height: 32px; z-index: 2; border: 0; border-left: 5px solid var(--event-color); border-radius: 12px; padding: .42rem .55rem; text-align: left; background: color-mix(in srgb,var(--event-color) 18%,white); color: var(--ink); box-shadow: 0 7px 15px rgba(80,55,90,.10); overflow: hidden; }
.day-event strong { display: block; }
.day-event small { opacity: .75; }
.day-sidebar { display: grid; gap: 1rem; align-self: start; position: sticky; top: 92px; }
.quote-card,.day-plan-card { border-radius: 20px; padding: 1rem; background: linear-gradient(145deg,#fff3f9,#f3efff); border: 1px solid #f0ddeb; }
.quote-card blockquote { margin: .5rem 0 0; font-size: 1.05rem; line-height: 1.5; font-weight: 780; }
.day-plan-card { display: grid; gap: .85rem; background: #fff; }

.upcoming-list { display: grid; gap: .9rem; }
.upcoming-day-group { display: grid; gap: .45rem; }
.upcoming-day-heading { display: flex; align-items: center; gap: .65rem; padding: 0 .15rem; color: var(--ink); }
.upcoming-day-heading::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.upcoming-day-heading strong { font-size: .82rem; font-weight: 900; }
.upcoming-day-items { display: grid; gap: .45rem; }
.upcoming-item { width: 100%; border: 1px solid var(--line); border-left: 5px solid var(--event-color); border-radius: 15px; padding: .72rem; text-align: left; color: var(--ink); background: #fff; }
.upcoming-item strong,.upcoming-item span { display: block; }
.upcoming-item span { color: var(--muted); margin-top: .2rem; font-size: .76rem; }
.empty-state { padding: 1.3rem; text-align: center; color: var(--muted); border: 1px dashed #dfd1e5; border-radius: 16px; }

.month-tabs { display: flex; gap: .35rem; overflow-x: auto; padding: .8rem 0; scrollbar-width: none; }
.month-tab { flex: 0 0 auto; border: 0; border-radius: 999px; padding: .55rem .85rem; background: #f7eef7; color: #715e7d; font-weight: 800; }
.month-tab.active { color: white; background: linear-gradient(135deg,var(--pink),var(--purple)); }
.special-date-list { display: grid; gap: .65rem; }
.special-row { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line); border-left: 6px solid var(--item-color); border-radius: 16px; padding: .75rem; background: white; }
.special-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb,var(--item-color) 15%,white); font-size: 1.25rem; }
.special-copy { flex: 1; }
.special-copy strong,.special-copy span { display: block; }
.special-copy span { color: var(--muted); font-size: .8rem; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: .75rem; margin-top: 1rem; }
.member-card { position: relative; border: 1px solid var(--line); border-top: 6px solid var(--member-color); border-radius: 18px; padding: .9rem; background: #fff; text-align: left; }
.member-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--member-color) 18%,white); font-weight: 900; font-size: 1.15rem; }
.member-card strong,.member-card small { display: block; margin-top: .45rem; }
.member-card small { color: var(--muted); }
.family-actions { justify-content: flex-start; margin-top: 1rem; }
.calendar-list { display: grid; gap: .65rem; margin-top: 1rem; }
.calendar-row { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: 16px; padding: .75rem; background: #fff; }
.calendar-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--calendar-color); }
.calendar-row .calendar-copy { flex: 1; }
.calendar-row strong,.calendar-row small { display: block; }
.calendar-row small { color: var(--muted); }

.quotes-page { min-height: 480px; text-align: center; display: grid; place-items: center; align-content: center; background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,240,248,.94),rgba(240,235,255,.94)); }
.quote-sparkles { font-size: 2rem; margin-bottom: .6rem; }
.big-quote { max-width: 760px; margin: 1.2rem auto 1.5rem; font-size: clamp(1.5rem,4vw,2.8rem); line-height: 1.3; font-weight: 850; color: #59456c; }
.profile-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.settings-panel { margin-top: .85rem; padding: .9rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.settings-panel > div:nth-child(2) { flex: 1; }
.settings-panel p { margin: 0; color: var(--muted); }
.settings-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: #f7eef7; font-size: 1.2rem; }
.subtle-panel { background: #fcf9fc; }
.settings-logout { margin-top: 1rem; }

.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: max(.55rem,env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: .25rem; padding: .38rem; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 14px 40px rgba(73,49,91,.20); backdrop-filter: blur(18px); }
.nav-button { min-width: 72px; border: 0; border-radius: 17px; padding: .55rem .6rem; background: transparent; color: #7a6c86; font-weight: 800; }
.nav-button span,.nav-button small { display: block; }
.nav-button span { font-size: 1.1rem; }
.nav-button small { font-size: .66rem; margin-top: .15rem; }
.nav-button.active { color: white; background: linear-gradient(135deg,var(--pink),var(--purple)); }
.floating-add { display: none; position: fixed; z-index: 31; right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); width: 56px; height: 56px; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--pink),var(--purple)); box-shadow: 0 14px 25px rgba(190,24,93,.30); font-size: 2rem; }

.pretty-dialog { width: min(620px,calc(100vw - 1.2rem)); max-height: min(90vh,850px); overflow: auto; border: 0; border-radius: 25px; padding: 0; color: var(--ink); box-shadow: 0 25px 80px rgba(54,35,68,.3); }
.pretty-dialog.wide-dialog { width: min(760px,calc(100vw - 1.2rem)); }
.pretty-dialog::backdrop { background: rgba(52,37,62,.38); backdrop-filter: blur(4px); }
.pretty-dialog form { display: grid; gap: .9rem; padding: 1.2rem; }
.dialog-header { padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.dialog-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f7eef7; color: #755e7f; font-size: 1.4rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.full-field { display: block; }
.check-row { display: flex; align-items: center; gap: .55rem; }
.check-row input { width: auto; }
.person-chips,.reminder-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.person-chips label,.reminder-chips label { position: relative; }
.person-chips input,.reminder-chips input { position: absolute; opacity: 0; pointer-events: none; }
.person-chips span,.reminder-chips span { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 999px; padding: .52rem .72rem; background: #fff; font-weight: 800; font-size: .8rem; }
.person-chips input:checked + span,.reminder-chips input:checked + span { color: white; background: var(--chip-color,linear-gradient(135deg,var(--pink),var(--purple))); border-color: transparent; }
.dialog-spacer { flex: 1; }

.admin-main { display: grid; gap: 1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr)); gap: .75rem; }
.stat-card { padding: 1rem; border-radius: 20px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.stat-card strong { display: block; font-size: 1.8rem; color: var(--purple); }
.stat-card span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.inline-form { align-items: end; }
.inline-form label { flex: 1; }
.admin-user-list { display: grid; gap: .6rem; margin-top: 1rem; }
.admin-user-row { display: grid; grid-template-columns: minmax(150px,1.4fr) minmax(110px,.8fr) minmax(120px,1fr) auto; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: 16px; padding: .75rem; background: #fff; }
.admin-user-row strong,.admin-user-row small { display: block; }
.admin-user-row small { color: var(--muted); }
.status-badge { display: inline-flex; width: fit-content; padding: .35rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 900; }
.status-badge.active { color: #087652; background: #dff9ef; }
.status-badge.disabled { color: #a32442; background: #ffe7ed; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 6.2rem; transform: translate(-50%,20px); max-width: calc(100vw - 2rem); padding: .78rem 1rem; color: #fff; background: #493a55; border-radius: 14px; opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; box-shadow: 0 12px 25px rgba(50,34,60,.25); }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1050px) {
    #calendar-screen.active { grid-template-columns: 1fr; }
    .upcoming-card { position: static; max-height: none; }
    .day-layout { grid-template-columns: 1fr; }
    .day-sidebar { position: static; grid-template-columns: 1fr 1fr; }
    .stat-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 760px) {
    .app-header,.admin-header { padding: .7rem .8rem; }
    .user-chip { max-width: 110px; }
    .app-main,.admin-main { padding: .65rem .55rem 7.2rem; }
    .calendar-card,.page-card,.upcoming-card { border-radius: 20px; padding: .8rem; }
    .calendar-topbar { align-items: stretch; flex-direction: column; }
    .view-switch { justify-content: stretch; }
    .view-button { flex: 1; }
    .calendar-nav { justify-content: center; }
    #desktop-add-event { display: none; }
    .floating-add { display: block; }
    .month-day { min-height: 88px; padding: .28rem; }
    .event-pill { padding: .22rem .28rem; font-size: .62rem; border-left-width: 3px; }
    .month-events .event-pill:nth-child(n+3) { display: none; }
    .day-sidebar { grid-template-columns: 1fr; }
    .profile-form,.form-grid { grid-template-columns: 1fr; }
    .bottom-nav { left: .4rem; right: .4rem; transform: none; justify-content: space-around; }
    .nav-button { min-width: 0; flex: 1; padding-inline: .25rem; }
    .family-actions,.dialog-actions { flex-wrap: wrap; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .admin-user-row { grid-template-columns: 1fr auto; }
    .admin-user-row > div:nth-child(2),.admin-user-row > div:nth-child(3) { grid-column: 1; }
    .inline-form { align-items: stretch; flex-direction: column; }
}
@media (max-width: 480px) {
    .weekday-row { font-size: .65rem; }
    .month-day { min-height: 76px; }
    .day-number-button { width: 25px; height: 25px; font-size: .75rem; }
    .period-heading h2 { font-size: 1.15rem; }
    .mini-logo { display: none; }
    .header-actions { gap: .35rem; }
    .month-events .event-pill:nth-child(n+2) { display: none; }
    .big-quote { font-size: 1.55rem; }
}


.period-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.jump-month-label{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--muted)}.jump-month-label input{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:8px 10px;color:var(--ink);font:inherit}.field-hint{align-self:end;padding:10px 2px;color:var(--muted);font-size:.82rem;line-height:1.35}
@media(max-width:700px){.period-title-row{align-items:flex-start;flex-direction:column;gap:8px}.jump-month-label{width:100%}.jump-month-label input{flex:1}}

/* v2.2: handwritten quotes, picture categories and private Cycle Tracker */
.quote-card blockquote,.big-quote{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-weight:600;letter-spacing:.01em}
.category-chips{display:flex;flex-wrap:wrap;gap:.5rem}.category-chips label{position:relative}.category-chips input{position:absolute;opacity:0;pointer-events:none}.category-chips span{display:inline-flex;align-items:center;padding:.58rem .78rem;border:2px solid color-mix(in srgb,var(--category-color) 30%,white);background:color-mix(in srgb,var(--category-color) 10%,white);border-radius:999px;font-weight:850;cursor:pointer}.category-chips input:checked+span{background:var(--category-color);border-color:var(--category-color);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--category-color) 30%,transparent)}
.cycle-page{max-width:1000px;margin:auto}.cycle-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0}.cycle-summary{padding:1rem;border-radius:22px;background:linear-gradient(135deg,#fff0f7,#f2ecff);border:1px solid var(--line)}.cycle-summary span,.cycle-summary small{display:block;color:var(--muted)}.cycle-summary strong{display:block;font-size:1.35rem;margin:.35rem 0;color:var(--purple)}.cycle-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;align-items:end;padding:1rem;border:1px solid var(--line);border-radius:20px;background:#fff}.cycle-settings .check-row{align-self:center}.cycle-period-list{display:grid;gap:.6rem;margin-top:1rem}.cycle-period-row{display:flex;width:100%;gap:.75rem;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:18px;padding:.85rem}.cycle-period-row:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.cycle-period-row div{display:grid;gap:.2rem}.cycle-period-row small{color:var(--muted)}.cycle-drop{color:#ec4899;font-size:1.4rem}.hidden{display:none!important}@media(max-width:760px){.cycle-summary-grid,.cycle-settings{grid-template-columns:1fr}.bottom-nav{overflow-x:auto;justify-content:flex-start}.nav-button{min-width:68px}}

/* v2.3 planner-style week and day views */
#week-view{overflow:visible}.week-grid{min-width:0;border:0;background:transparent;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem;overflow:visible}.week-planner-card{min-width:0;border:1px solid var(--line);border-top:5px solid #d8c7e2;border-radius:18px;padding:.7rem;background:#fff;box-shadow:0 8px 20px rgba(80,55,90,.06)}.week-planner-card.today{border-top-color:var(--pink);background:linear-gradient(160deg,#fff7fb,#fff)}.week-planner-heading{width:100%;display:flex;justify-content:space-between;gap:.4rem;align-items:baseline;border:0;background:transparent;color:var(--ink);padding:0 0 .55rem;text-align:left}.week-day-name{font-weight:900}.week-day-date{font-size:.72rem;color:var(--muted);font-weight:800}.week-dinner{width:100%;border:0;border-radius:12px;padding:.55rem;text-align:left;background:#fff6ea;color:#70533c;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.week-card-events{display:grid;gap:.42rem;margin-top:.6rem}.week-card-event{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem;align-items:start;border:0;border-left:4px solid var(--event-color);border-radius:10px;padding:.48rem;background:color-mix(in srgb,var(--event-color) 10%,white);text-align:left;color:var(--ink)}.week-event-time{font-size:.66rem;color:var(--muted);font-weight:900;white-space:nowrap}.week-event-title{font-size:.75rem;font-weight:850;overflow:hidden;text-overflow:ellipsis}.week-empty{padding:.65rem;color:var(--muted);font-size:.75rem;text-align:center;border:1px dashed var(--line);border-radius:10px}.week-note{margin-top:.55rem;padding:.5rem;border-radius:10px;background:#faf6fc;color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-planner{max-width:900px;margin:0 auto;display:grid;gap:1rem}.day-top-card{padding:1.25rem 1.35rem}.day-top-card blockquote{font-size:1.35rem}.day-plan-stack{display:grid;gap:1rem}.day-section{display:grid;gap:.75rem;padding:1rem;border:1px solid var(--line);border-radius:20px;background:#fff}.dinner-section{background:linear-gradient(145deg,#fff8ec,#fff)}.day-section-heading{display:flex;align-items:center;gap:.75rem}.day-section-heading h3{margin:.05rem 0 0;font-size:1.05rem}.day-section-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#f7eef7;font-size:1.2rem}.day-schedule-list{display:grid;gap:.55rem}.day-schedule-event{display:grid;grid-template-columns:70px minmax(0,1fr);gap:.7rem;align-items:start;width:100%;border:0;border-left:5px solid var(--event-color);border-radius:13px;padding:.7rem;background:color-mix(in srgb,var(--event-color) 10%,white);text-align:left;color:var(--ink)}.day-schedule-time{font-size:.75rem;font-weight:900;color:var(--muted)}.day-schedule-copy strong,.day-schedule-copy small{display:block}.day-schedule-copy small{margin-top:.15rem;color:var(--muted)}
@media(max-width:1100px){.week-grid{grid-template-columns:repeat(4,minmax(180px,1fr));overflow-x:auto;padding-bottom:.35rem}}
@media(max-width:760px){.week-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:.1rem .1rem .7rem}.week-planner-card{flex:0 0 min(82vw,330px);scroll-snap-align:start}.day-top-card blockquote{font-size:1.18rem}.day-schedule-event{grid-template-columns:58px minmax(0,1fr)}}

/* v2.3.2: keep the page at viewport width and scroll only inside the week-card row */
#calendar-screen.active,
.calendar-card,
#week-view,
.week-grid {
    min-width: 0;
}

@media (max-width: 760px) {
    html,
    body,
    .app-shell,
    .app-main,
    #calendar-screen.active,
    .calendar-card {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #week-view {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    #week-view .week-grid {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: .75rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: none;
        touch-action: pan-x pan-y;
        padding: .1rem .1rem .7rem;
    }

    #week-view .week-planner-card {
        flex: 0 0 calc(100% - .2rem);
        width: auto;
        max-width: none;
        scroll-snap-align: none;
    }
}

/* v2.3.3: keep the Dates page inside the phone viewport; scroll only month tabs */
#dates-screen,
#dates-screen .page-card,
#special-month-tabs,
#special-date-list {
    min-width: 0;
}

@media (max-width: 760px) {
    #dates-screen.active {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #dates-screen .page-card {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #special-month-tabs {
        display: flex;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        padding: .8rem 0 .65rem;
        scrollbar-width: none;
    }

    #special-month-tabs::-webkit-scrollbar {
        display: none;
    }

    #special-month-tabs .month-tab {
        flex: 0 0 auto;
    }

    #special-date-list,
    #special-date-list .empty-state,
    #special-date-list .special-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #special-date-list .empty-state {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
}

/* v2.3.4: app-wide mobile viewport containment audit */
html,
body,
.app-shell,
.admin-shell {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

.app-header,
.admin-header,
.app-main,
.admin-main,
.screen,
.screen > *,
.calendar-card,
.page-card,
.upcoming-card,
.calendar-view,
.day-layout,
.day-planner,
.day-plan-stack,
.day-section,
.member-grid,
.member-card,
.calendar-list,
.calendar-row,
.settings-card,
.settings-panel,
.cycle-page,
.cycle-summary-grid,
.cycle-settings,
.cycle-period-list,
.cycle-period-row,
.stat-grid,
.admin-user-list,
.admin-user-row,
.inline-form,
.section-heading,
.period-heading,
.calendar-topbar,
.dialog-header,
.dialog-actions,
.pretty-dialog,
.pretty-dialog form {
    min-width: 0;
}

.screen,
.screen > *,
.calendar-card,
.page-card,
.upcoming-card,
.calendar-view {
    max-width: 100%;
}

.brand-wrap,
.header-actions,
.section-heading > *,
.period-heading > *,
.calendar-topbar > *,
.settings-panel > *,
.calendar-row > *,
.special-row > *,
.member-card > *,
.cycle-period-row > *,
.admin-user-row > *,
.day-schedule-copy,
.week-event-title,
.special-copy,
.calendar-copy {
    min-width: 0;
}

h1,
h2,
h3,
p,
strong,
small,
span {
    overflow-wrap: anywhere;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

@media (max-width: 760px) {
    html,
    body,
    .app-shell,
    .admin-shell,
    .app-header,
    .admin-header,
    .app-main,
    .admin-main,
    .screen.active,
    .screen > *,
    .calendar-card,
    .page-card,
    .upcoming-card {
        width: 100%;
        max-width: 100%;
    }

    .app-header,
    .admin-header {
        overflow: hidden;
    }

    .brand-wrap {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .brand-wrap > div:last-child {
        min-width: 0;
    }

    .brand-wrap h1,
    .brand-wrap .eyebrow {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        flex: 0 0 auto;
    }

    .section-heading,
    .period-heading,
    .settings-panel,
    .calendar-row,
    .special-row,
    .cycle-period-row {
        max-width: 100%;
    }

    .section-heading,
    .period-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .section-heading > div:first-child,
    .period-heading > div:first-child {
        flex: 1 1 12rem;
    }

    .settings-panel,
    .calendar-row,
    .special-row,
    .cycle-period-row {
        overflow: hidden;
    }

    .settings-panel > div:nth-child(2),
    .calendar-copy,
    .special-copy,
    .cycle-period-row > div {
        overflow: hidden;
    }

    .settings-panel strong,
    .settings-panel small,
    .calendar-copy strong,
    .calendar-copy small,
    .special-copy strong,
    .special-copy small,
    .cycle-period-row strong,
    .cycle-period-row small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .member-grid,
    .stat-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .admin-user-row {
        width: 100%;
        max-width: 100%;
    }

    .pretty-dialog {
        max-width: calc(100vw - 1rem);
        margin-inline: auto;
    }

    .pretty-dialog form {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .dialog-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dialog-header h2,
    .dialog-header .eyebrow {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dialog-actions {
        width: 100%;
    }

    .dialog-actions .dialog-spacer {
        display: none;
    }

    .dialog-actions button {
        flex: 1 1 auto;
        min-width: 0;
    }

    .category-chips,
    .person-chips,
    .reminder-chips {
        max-width: 100%;
    }

    .category-chips span,
    .person-chips span,
    .reminder-chips span {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .bottom-nav {
        max-width: calc(100vw - .8rem);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bottom-nav::-webkit-scrollbar {
        display: none;
    }
}


/* v2.3.5: keep all six planner navigation buttons visible on phones */
@media (max-width: 760px) {
    .bottom-nav {
        overflow-x: hidden;
        justify-content: space-around;
    }

    .bottom-nav .nav-button {
        flex: 1 1 0;
        min-width: 0;
    }

    .bottom-nav.has-cycle {
        gap: .08rem;
        padding-inline: .26rem;
    }

    .bottom-nav.has-cycle .nav-button {
        padding: .5rem .08rem;
        border-radius: 15px;
    }

    .bottom-nav.has-cycle .nav-button span {
        font-size: 1rem;
    }

    .bottom-nav.has-cycle .nav-button small {
        font-size: .58rem;
        letter-spacing: -.01em;
    }
}


/* v2.4.0: family dashboard, quick add, ownership colours and friendly states */
:root{--profile-color:#8B5CF6}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,color-mix(in srgb,var(--profile-color) 12%,white),#fff)}
.dashboard-hero h2{margin:.15rem 0;font-size:clamp(1.55rem,4vw,2.35rem)}.dashboard-date{margin:0;color:var(--muted);font-weight:700}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.dashboard-card{min-width:0;padding:1rem;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);border-left:5px solid color-mix(in srgb,var(--profile-color) 70%,white)}
.dashboard-schedule,.dashboard-upcoming{grid-column:span 2}.dashboard-card-heading{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}.dashboard-card-heading>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--profile-color) 10%,white);font-size:1.25rem}.dashboard-card-heading h3{margin:.05rem 0 0}.dashboard-card blockquote{margin:.4rem 0 .75rem;font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:1.12rem;line-height:1.45}
.dashboard-list{display:grid;gap:.75rem}.dashboard-upcoming-day{display:grid;gap:.4rem}.dashboard-upcoming-date{display:flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:900;color:var(--muted)}.dashboard-upcoming-date::after{content:"";height:1px;flex:1;background:var(--line)}.dashboard-upcoming-items{display:grid;gap:.45rem}.dashboard-event{display:grid;grid-template-columns:68px minmax(0,1fr);gap:.65rem;align-items:start;width:100%;padding:.65rem;border:0;border-left:4px solid var(--item-color);border-radius:13px;background:color-mix(in srgb,var(--item-color) 9%,white);text-align:left;color:var(--ink)}.dashboard-event span:last-child strong,.dashboard-event span:last-child small{display:block}.dashboard-event small{color:var(--muted);margin-top:.1rem}.dashboard-time{font-size:.72rem;font-weight:900;color:var(--muted)}.dashboard-event.compact{grid-template-columns:58px minmax(0,1fr)}
.dashboard-empty{display:flex;align-items:center;gap:.55rem;padding:.7rem;border-radius:14px;background:#faf8fb;color:var(--muted)}.dashboard-empty p{margin:0}.dashboard-line,.dashboard-check-item{display:flex;align-items:center;gap:.55rem;padding:.55rem;border-radius:12px;background:#faf8fb}.dashboard-line small{margin-left:auto;color:var(--muted)}.dashboard-check-item>span:first-child{color:var(--profile-color);font-weight:900}.dashboard-feature>strong{display:block;padding:.85rem;border-radius:15px;background:linear-gradient(135deg,#fff5e8,#fff);font-size:1.15rem}.text-button{border:0;background:transparent;color:var(--purple);font-weight:850;padding:.55rem 0 0;text-align:left}.weather-content{display:grid;gap:.15rem;margin-bottom:.7rem}.weather-temp{font-size:2rem}.weather-content small{color:var(--muted);line-height:1.4}
.quick-add-dialog{max-width:520px}.quick-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.quick-add-grid button{display:flex;align-items:center;gap:.7rem;min-width:0;padding:.85rem;border:1px solid var(--line);border-radius:17px;background:#fff;color:var(--ink);text-align:left}.quick-add-grid button span{font-size:1.35rem}.quick-add-grid button:hover{background:#faf5ff;transform:translateY(-1px)}
.event-pill,.upcoming-item,.day-schedule-event{border-left-color:var(--event-color)}
@media(max-width:760px){.dashboard-hero{align-items:flex-start}.dashboard-hero .primary-button{padding-inline:.75rem}.dashboard-grid{grid-template-columns:1fr}.dashboard-schedule,.dashboard-upcoming{grid-column:auto}.dashboard-card{padding:.9rem}.dashboard-event{grid-template-columns:58px minmax(0,1fr)}.quick-add-grid{grid-template-columns:1fr 1fr}.bottom-nav .nav-button{padding-inline:.08rem}.bottom-nav .nav-button small{font-size:.58rem}}
@media(max-width:390px){.dashboard-hero{display:grid}.dashboard-hero .primary-button{width:100%}.quick-add-grid{grid-template-columns:1fr}}

/* v2.4.1: polished Quick Add sheet */
.quick-add-dialog {
    width: min(760px, calc(100vw - 1rem));
    max-width: 760px;
    max-height: min(92dvh, 900px);
    padding: 0;
    overflow-x: hidden;
    border-radius: 30px;
    background: linear-gradient(180deg, #fff 0%, #fff 82%, #fbf4ff 100%);
    box-shadow: 0 28px 90px rgba(57, 37, 68, .36);
}
.quick-add-dialog::backdrop {
    background: rgba(42, 31, 49, .44);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.quick-add-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.45rem 1.55rem .9rem;
}
.quick-add-header .eyebrow { margin: 0 0 .45rem; color: #7137d4; }
.quick-add-header h2 { margin: 0; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.12; }
.quick-add-header .dialog-close {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(83, 52, 105, .14);
    color: #4a3158;
    font-size: 1.7rem;
}
.quick-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    padding: .7rem 1.55rem 1rem;
}
.quick-add-grid button {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    min-height: 132px;
    padding: 1rem;
    border: 1px solid #eadff0;
    border-radius: 26px;
    background: rgba(255,255,255,.97);
    color: var(--ink);
    text-align: left;
    box-shadow: 0 9px 24px rgba(73, 46, 88, .09);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.quick-add-grid button:active { transform: scale(.985); }
.quick-add-grid button:hover { background: #fff; box-shadow: 0 13px 28px rgba(73, 46, 88, .13); }
.quick-add-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 2rem;
}
.quick-add-icon.event { background: #eee1ff; }
.quick-add-icon.reminder { background: #fff1d5; }
.quick-add-icon.birthday { background: #ffe5ef; }
.quick-add-icon.anniversary { background: #fde4fa; }
.quick-add-icon.homework { background: #e6f8e6; }
.quick-add-icon.dinner { background: #ffeadf; }
.quick-add-icon.note { background: #e3f1ff; }
.quick-add-copy { min-width: 0; display: grid; gap: .25rem; }
.quick-add-copy strong { font-size: 1.08rem; line-height: 1.15; }
.quick-add-copy small { color: #4f4357; font-size: .86rem; line-height: 1.35; }
.quick-add-arrow { color: #9a72ae; font-size: 2rem; line-height: 1; }
.quick-add-grid .quick-add-wide { grid-column: 1 / -1; min-height: 112px; }
.quick-add-footer {
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    overflow: hidden;
    color: #c792ff;
    font-size: 1.4rem;
}
.quick-add-footer::before {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -62px;
    height: 125px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(135deg, #f5e7ff, #ead8ff);
}
.quick-add-clipboard { position: relative; z-index: 1; font-size: 3.4rem; filter: drop-shadow(0 6px 8px rgba(98,62,120,.15)); }
.quick-add-footer > span:not(.quick-add-clipboard) { position: relative; z-index: 1; }

@media (max-width: 760px) {
    .quick-add-dialog {
        width: calc(100vw - 1rem);
        border-radius: 28px;
    }
    .quick-add-header { padding: 1.15rem 1rem .65rem; }
    .quick-add-grid { gap: .62rem; padding: .55rem 1rem .8rem; }
    .quick-add-grid button {
        grid-template-columns: 50px minmax(0, 1fr) 12px;
        gap: .55rem;
        min-height: 108px;
        padding: .72rem;
        border-radius: 21px;
    }
    .quick-add-icon { width: 50px; height: 50px; font-size: 1.55rem; }
    .quick-add-copy strong { font-size: .98rem; }
    .quick-add-copy small { font-size: .72rem; }
    .quick-add-arrow { font-size: 1.55rem; }
    .quick-add-grid .quick-add-wide { min-height: 92px; }
    .quick-add-footer { min-height: 72px; }
    .quick-add-clipboard { font-size: 2.7rem; }
}

@media (max-width: 370px) {
    .quick-add-header h2 { font-size: 1.3rem; }
    .quick-add-grid button { grid-template-columns: 44px minmax(0,1fr) 10px; min-height: 100px; padding: .58rem; }
    .quick-add-icon { width: 44px; height: 44px; font-size: 1.35rem; }
    .quick-add-copy strong { font-size: .9rem; }
    .quick-add-copy small { font-size: .66rem; }
}

.calendar-import-panel{align-items:flex-start}.calendar-import-copy{min-width:0;flex:1}.calendar-import-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;margin-top:.8rem}.calendar-import-fields .check-row{grid-column:1/-1}.calendar-import-fields input[type=file]{padding:.7rem;background:#fff}.calendar-import-panel>.primary-button{align-self:center}@media(max-width:760px){.calendar-import-panel{display:grid;grid-template-columns:auto minmax(0,1fr);}.calendar-import-panel>.primary-button{grid-column:1/-1;width:100%}.calendar-import-fields{grid-template-columns:minmax(0,1fr)}}

/* v2.5.0 multi-family administration */
.admin-family-list{display:grid;gap:.7rem;margin-top:1rem}.admin-family-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(80px,.25fr) auto;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:18px;padding:.85rem;background:#fff}.admin-family-row strong,.admin-family-row small{display:block}.admin-family-row small{color:var(--muted);overflow-wrap:anywhere}.family-color-dot{width:18px;height:42px;border-radius:999px;background:var(--family-celebration-color,#22C55E);box-shadow:0 0 0 5px color-mix(in srgb,var(--family-celebration-color,#22C55E) 14%,transparent)}.dialog-section-label{font-weight:800;margin:1rem 0 .55rem;color:var(--ink)}@media(max-width:620px){.admin-family-row{grid-template-columns:auto minmax(0,1fr) auto}.admin-family-row>div:nth-child(3){grid-column:2}.admin-family-row>button{grid-column:3;grid-row:1/3}}


/* v2.5.1 support inbox */
.support-badge{display:inline-grid;place-items:center;min-width:1.55rem;height:1.55rem;padding:0 .35rem;border-radius:999px;background:#ef4444;color:#fff;font-size:.75rem;vertical-align:middle}.support-thread-list{display:grid;gap:.7rem}.support-thread-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;border:1px solid rgba(139,92,246,.14);background:#fff;border-radius:18px;padding:.9rem 1rem;color:inherit}.support-thread-row.unread{border-color:#8b5cf6;background:#faf7ff;box-shadow:0 8px 24px rgba(139,92,246,.10)}.support-thread-main{display:grid;gap:.2rem;min-width:0}.support-thread-main strong,.support-thread-main small{overflow-wrap:anywhere}.support-status{flex:none;padding:.28rem .55rem;border-radius:999px;font-size:.72rem;text-transform:capitalize;background:#eef2ff;color:#4338ca}.support-status.closed{background:#f1f5f9;color:#64748b}.support-status.waiting{background:#fef3c7;color:#92400e}.support-messages{display:grid;gap:.75rem;max-height:min(52vh,520px);overflow-y:auto;padding:.35rem}.support-message{max-width:85%;padding:.8rem .95rem;border-radius:18px;background:#f5f3ff;justify-self:start}.support-message.admin{background:#e9f9ef;justify-self:end}.support-message strong,.support-message small{display:block}.support-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:.35rem 0}.support-message small{opacity:.62;font-size:.72rem}.support-reply-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem;align-items:end;margin-top:1rem}.support-reply-form textarea{min-width:0}.support-toolbar{display:flex;justify-content:flex-end;margin-bottom:1rem}.support-unread-note{display:inline-block;margin-top:.35rem;color:#7c3aed;font-weight:700;font-size:.8rem}@media(max-width:560px){.support-reply-form{grid-template-columns:1fr}.support-thread-row{gap:.55rem;padding:.8rem}.support-message{max-width:92%}}


/* Polished support hub */
.support-hub-dialog{width:min(92vw,620px);max-width:620px;padding:0;overflow:hidden;border:1px solid rgba(139,92,246,.12);border-radius:30px;background:linear-gradient(180deg,#fff 0%,#fdfaff 100%);box-shadow:0 30px 85px rgba(54,34,67,.28)}
.support-hub-dialog::backdrop{background:rgba(35,24,43,.48);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.support-hub-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.65rem 1.65rem 1.1rem;background:radial-gradient(circle at 90% 0,rgba(236,72,153,.10),transparent 38%),linear-gradient(135deg,#fff,#fcf7ff)}
.support-hub-header .eyebrow{margin:0 0 .45rem;color:#7137d4}.support-hub-header h2{margin:0;font-size:clamp(1.55rem,4vw,2.15rem);line-height:1.08}.support-hub-header p:not(.eyebrow){margin:.55rem 0 0;max-width:440px;color:#695d70;line-height:1.45}
.support-hub-header .dialog-close{position:static;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 9px 24px rgba(72,45,88,.13);font-size:1.65rem}
.support-hub-body{display:grid;gap:1rem;padding:.4rem 1.65rem 1rem}.support-new-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;padding:1rem 1.1rem;border:1px solid rgba(139,92,246,.14);border-radius:22px;background:#fff;text-align:left;color:var(--ink);box-shadow:0 10px 26px rgba(75,45,91,.08)}.support-new-card:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(75,45,91,.12)}.support-new-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#f1e5ff,#ffe7f3);font-size:1.75rem}.support-new-card strong,.support-new-card small{display:block}.support-new-card strong{font-size:1.05rem}.support-new-card small{margin-top:.25rem;color:#675a6d}.support-new-arrow,.support-thread-arrow{color:#9a72ae;font-size:2rem;line-height:1}.support-section-label{padding:.2rem .15rem 0;color:#8b5cf6;font-size:.74rem;font-weight:800;letter-spacing:.13em}
.support-hub-dialog .support-thread-list{display:grid;gap:.72rem}.support-hub-dialog .support-thread-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.9rem;border-radius:20px;box-shadow:0 7px 20px rgba(75,45,91,.06)}.support-thread-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#f3e9ff;font-size:1.35rem}.support-thread-end{display:flex;align-items:center;gap:.35rem}.support-hub-dialog .support-status{white-space:nowrap}.support-empty{display:grid;justify-items:center;text-align:center;gap:.35rem;padding:1.45rem 1rem;border:1px dashed rgba(139,92,246,.22);border-radius:22px;background:#fff}.support-empty-icon{font-size:2rem}.support-empty strong{font-size:1rem}.support-empty span:last-child{max-width:360px;color:#746879;line-height:1.45}
.support-hub-footer{position:relative;display:flex;align-items:center;justify-content:center;gap:2.3rem;min-height:86px;color:#bc8ee8;font-size:1.2rem;overflow:hidden}.support-hub-footer::before{content:"";position:absolute;inset:28px -10% -45px;background:linear-gradient(135deg,#f5e8ff,#fbecff 55%,#f1e6ff);border-radius:50% 50% 0 0}.support-hub-footer>*{position:relative}.support-help-icon{font-size:2.75rem;filter:drop-shadow(0 5px 8px rgba(98,62,120,.12))}
@media(max-width:560px){.support-hub-dialog{width:calc(100vw - 24px);max-height:min(84dvh,760px);border-radius:28px}.support-hub-header{padding:1.2rem 1.05rem .85rem}.support-hub-header p:not(.eyebrow){font-size:.86rem}.support-hub-header .dialog-close{width:42px;height:42px}.support-hub-body{padding:.25rem 1rem .85rem;overflow-y:auto}.support-new-card{grid-template-columns:50px minmax(0,1fr) auto;padding:.8rem}.support-new-icon{width:50px;height:50px;font-size:1.5rem}.support-hub-dialog .support-thread-row{grid-template-columns:42px minmax(0,1fr) auto;padding:.75rem;gap:.6rem}.support-thread-icon{width:42px;height:42px}.support-hub-dialog .support-status{display:none}.support-hub-footer{min-height:66px}.support-help-icon{font-size:2.25rem}}


/* v2.5.3 polished administrator support conversation */
.admin-support-dialog{width:min(94vw,760px);max-width:760px;max-height:min(90dvh,860px);padding:0;overflow:hidden;border:1px solid rgba(139,92,246,.14);border-radius:30px;background:linear-gradient(180deg,#fff 0%,#fdfaff 100%);box-shadow:0 30px 90px rgba(45,28,56,.32)}
.admin-support-dialog::backdrop{background:rgba(32,22,39,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.admin-support-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.6rem 1.7rem 1.2rem;background:radial-gradient(circle at 92% 0,rgba(236,72,153,.12),transparent 38%),linear-gradient(135deg,#fff,#fcf7ff);border-bottom:1px solid rgba(139,92,246,.11)}
.admin-support-header .eyebrow{margin:0 0 .42rem;color:#7137d4}.admin-support-header h2{margin:0;font-size:clamp(1.55rem,4vw,2.15rem);line-height:1.08}.admin-support-meta{display:inline-flex;align-items:center;max-width:100%;margin:.65rem 0 0;padding:.38rem .68rem;border-radius:999px;background:#f2eaff;color:#69537a;font-size:.78rem;font-weight:700;overflow-wrap:anywhere}
.admin-support-header .dialog-close{position:static;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 9px 24px rgba(72,45,88,.13);font-size:1.65rem}
.admin-support-body{display:grid;gap:.85rem;padding:1.1rem 1.7rem 1.2rem;min-height:0}.admin-support-section-label{display:flex;align-items:center;gap:.45rem;color:#8b5cf6;font-size:.74rem;font-weight:850;letter-spacing:.12em}.admin-support-messages{min-height:190px;max-height:min(43dvh,430px);padding:.75rem;border:1px solid rgba(139,92,246,.12);border-radius:22px;background:linear-gradient(180deg,#fbf9ff,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.admin-support-dialog .support-message{padding:.85rem 1rem;border-radius:20px 20px 20px 7px;background:#f0e8ff;box-shadow:0 5px 14px rgba(75,45,91,.07)}.admin-support-dialog .support-message.admin{border-radius:20px 20px 7px 20px;background:#e8f8ee}.admin-support-dialog .support-message strong{font-size:.82rem}.admin-support-dialog .support-message p{line-height:1.48}.admin-support-dialog .support-message small{margin-top:.2rem}
.admin-support-reply-form{display:grid;gap:.5rem;margin:0}.admin-support-reply-form>label{font-size:.78rem;font-weight:800;color:#675a6d}.admin-support-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem;align-items:end;padding:.55rem;border:1px solid rgba(139,92,246,.16);border-radius:21px;background:#fff;box-shadow:0 8px 24px rgba(75,45,91,.07)}.admin-support-composer textarea{min-width:0;min-height:88px;resize:vertical;border:0!important;background:transparent!important;box-shadow:none!important;padding:.65rem .7rem}.admin-support-composer textarea:focus{outline:none}.admin-support-composer .primary-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;white-space:nowrap}
.admin-support-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.7rem 1.2rem;border-top:1px solid rgba(139,92,246,.11);background:linear-gradient(135deg,#fbf5ff,#f6edff)}.admin-support-footer>div:first-child{display:flex;align-items:center;gap:.7rem;min-width:0}.admin-support-footer-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 7px 18px rgba(75,45,91,.08);font-size:1.35rem}.admin-support-footer strong,.admin-support-footer small{display:block}.admin-support-footer small{margin-top:.15rem;color:#746879}.admin-support-actions{display:flex;align-items:center;gap:.55rem;flex:none}.danger-soft{color:#b4233f;background:#fff1f4;border-color:#ffd1dc}
@media(max-width:620px){.admin-support-dialog{width:calc(100vw - 22px);max-height:88dvh;border-radius:28px}.admin-support-header{padding:1.2rem 1.05rem .9rem}.admin-support-header .dialog-close{width:42px;height:42px}.admin-support-meta{border-radius:14px}.admin-support-body{padding:.9rem 1rem 1rem}.admin-support-messages{min-height:160px;max-height:38dvh;padding:.55rem}.admin-support-composer{grid-template-columns:1fr}.admin-support-composer .primary-button{width:100%}.admin-support-footer{align-items:stretch;flex-direction:column;padding:.85rem 1rem calc(.9rem + env(safe-area-inset-bottom))}.admin-support-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.admin-support-actions button{width:100%}}

/* v2.5.4 unified user support dialogs */
.support-compose-dialog,
.support-conversation-dialog{
    width:min(94vw,720px);
    max-width:720px;
    max-height:min(90dvh,860px);
    padding:0;
    overflow:hidden;
    border:1px solid rgba(139,92,246,.14);
    border-radius:30px;
    background:linear-gradient(180deg,#fff 0%,#fdfaff 100%);
    box-shadow:0 30px 90px rgba(45,28,56,.32);
}
.support-compose-dialog::backdrop,
.support-conversation-dialog::backdrop{
    background:rgba(32,22,39,.52);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.support-compose-dialog .support-compose-shell{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:0;
    width:100%;
    max-width:100%;
    max-height:min(90dvh,860px);
    padding:0;
    overflow:hidden;
}
.support-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    min-width:0;
    padding:1.6rem 1.7rem 1.2rem;
    border-bottom:1px solid rgba(139,92,246,.11);
    background:radial-gradient(circle at 92% 0,rgba(236,72,153,.12),transparent 38%),linear-gradient(135deg,#fff,#fcf7ff);
}
.support-modal-header>div{flex:1 1 auto;min-width:0}
.support-modal-header .eyebrow{margin:0 0 .42rem;color:#7137d4;white-space:normal;overflow-wrap:anywhere}
.support-modal-header h2{margin:0;font-size:clamp(1.55rem,4vw,2.15rem);line-height:1.08;white-space:normal;overflow-wrap:anywhere}
.support-modal-header p:not(.eyebrow){margin:.55rem 0 0;max-width:520px;color:#695d70;line-height:1.45}
.support-modal-header .dialog-close{
    position:static;
    flex:none;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 9px 24px rgba(72,45,88,.13);
    font-size:1.65rem;
}
.support-compose-body{
    display:grid;
    gap:1rem;
    min-height:0;
    padding:1.15rem 1.7rem 1.25rem;
    overflow-y:auto;
}
.support-field{display:grid;gap:.45rem;min-width:0}
.support-field>span,.support-user-reply-form>label{font-size:.78rem;font-weight:800;color:#675a6d}
.support-field input,.support-field textarea{
    width:100%;
    min-width:0;
    border:1px solid rgba(139,92,246,.16);
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 24px rgba(75,45,91,.06);
}
.support-field textarea{min-height:180px;resize:vertical}
.support-modal-footer{
    border-top:1px solid rgba(139,92,246,.11);
    background:linear-gradient(135deg,#fbf5ff,#f6edff);
}
.support-compose-actions{
    display:flex;
    justify-content:flex-end;
    gap:.65rem;
    padding:1rem 1.7rem calc(1.15rem + env(safe-area-inset-bottom));
}
.support-compose-actions .primary-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.support-conversation-dialog{display:none;grid-template-rows:auto minmax(0,1fr) auto}
.support-conversation-dialog[open]{display:grid}
.support-conversation-body{
    display:grid;
    grid-template-rows:auto minmax(150px,1fr) auto;
    gap:.85rem;
    min-height:0;
    padding:1.05rem 1.7rem 1.15rem;
    overflow:hidden;
}
.support-conversation-label{
    display:flex;
    align-items:center;
    gap:.45rem;
    color:#8b5cf6;
    font-size:.74rem;
    font-weight:850;
    letter-spacing:.12em;
}
.support-user-messages{
    min-height:190px;
    max-height:min(43dvh,430px);
    padding:.75rem;
    overflow-y:auto;
    border:1px solid rgba(139,92,246,.12);
    border-radius:22px;
    background:linear-gradient(180deg,#fbf9ff,#fff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.support-conversation-dialog .support-message{
    padding:.85rem 1rem;
    border-radius:20px 20px 20px 7px;
    background:#f0e8ff;
    box-shadow:0 5px 14px rgba(75,45,91,.07);
}
.support-conversation-dialog .support-message.admin{
    border-radius:20px 20px 7px 20px;
    background:#e8f8ee;
}
.support-conversation-dialog .support-message strong{font-size:.82rem}
.support-conversation-dialog .support-message p{line-height:1.48}
.support-conversation-dialog .support-message small{margin-top:.2rem}
.support-user-reply-form{display:grid;gap:.5rem;margin:0;padding:0!important}
.support-user-composer{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.65rem;
    align-items:end;
    padding:.55rem;
    border:1px solid rgba(139,92,246,.16);
    border-radius:21px;
    background:#fff;
    box-shadow:0 8px 24px rgba(75,45,91,.07);
}
.support-user-composer textarea{
    min-width:0;
    min-height:88px;
    resize:vertical;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding:.65rem .7rem;
}
.support-user-composer textarea:focus{outline:none}
.support-user-composer .primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:46px;
    white-space:nowrap;
}
.support-conversation-footer{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.9rem 1.7rem calc(1rem + env(safe-area-inset-bottom));
}
.support-footer-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 7px 18px rgba(75,45,91,.08);
    font-size:1.35rem;
}
.support-conversation-footer strong,.support-conversation-footer small{display:block}
.support-conversation-footer small{margin-top:.15rem;color:#746879}
@media(max-width:620px){
    .support-compose-dialog,.support-conversation-dialog{
        width:calc(100vw - 22px);
        max-width:calc(100vw - 22px);
        max-height:88dvh;
        margin-inline:auto;
        border-radius:28px;
    }
    .support-compose-dialog .support-compose-shell{max-height:88dvh}
    .support-modal-header{padding:1.15rem 1.05rem .9rem}
    .support-modal-header .dialog-close{width:42px;height:42px}
    .support-modal-header p:not(.eyebrow){font-size:.86rem}
    .support-compose-body{padding:.95rem 1rem 1rem}
    .support-field textarea{min-height:150px}
    .support-compose-actions{display:grid;grid-template-columns:1fr 1fr;padding:.85rem 1rem calc(.9rem + env(safe-area-inset-bottom))}
    .support-compose-actions button{width:100%}
    .support-conversation-body{padding:.9rem 1rem 1rem;grid-template-rows:auto minmax(145px,1fr) auto}
    .support-user-messages{min-height:145px;max-height:36dvh;padding:.55rem}
    .support-user-composer{grid-template-columns:1fr}
    .support-user-composer .primary-button{width:100%}
    .support-conversation-footer{padding:.8rem 1rem calc(.85rem + env(safe-area-inset-bottom))}
}

/* v2.5.5 support conversation scrolling */
.support-conversation-dialog,
.admin-support-dialog{
    height:min(90dvh,860px);
}
.support-conversation-body,
.admin-support-body{
    min-height:0;
}
.support-user-messages,
.admin-support-messages{
    min-height:0;
    height:100%;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    scrollbar-gutter:stable;
}
.support-user-messages{align-self:stretch}
.admin-support-messages{align-self:stretch}
@media(max-width:620px){
    .support-conversation-dialog,
    .admin-support-dialog{
        height:88dvh;
        max-height:88dvh;
    }
    .support-conversation-body{
        grid-template-rows:auto minmax(0,1fr) auto;
    }
    .admin-support-body{
        grid-template-rows:auto minmax(0,1fr) auto;
        overflow:hidden;
    }
    .support-user-messages,
    .admin-support-messages{
        min-height:0;
        height:100%;
        max-height:none;
    }
}


/* v2.7.0: per-user Soft, Classic and Dark themes */
.theme-fieldset { grid-column: 1 / -1; margin-top: .2rem; }
.theme-fieldset legend { margin-bottom: .25rem; }
.theme-help { margin: 0 0 .7rem; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.theme-choice { position: relative; display: grid; gap: .38rem; min-width: 0; padding: .7rem; border: 2px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; transition: transform .15s,border-color .15s,box-shadow .15s; }
.theme-choice:hover { transform: translateY(-1px); }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-choice:has(input:checked) { border-color: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb,var(--pink) 13%,transparent); }
.theme-choice strong,.theme-choice small { display: block; min-width: 0; }
.theme-choice small { color: var(--muted); font-size: .74rem; line-height: 1.3; }
.theme-preview { position: relative; display: block; height: 62px; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg,#fff7fb,#f0ebff); border: 1px solid rgba(99,72,120,.12); }
.theme-preview i { position: absolute; left: 8px; right: 8px; top: 8px; height: 13px; border-radius: 7px; background: linear-gradient(90deg,#ec4899,#8b5cf6); }
.theme-preview b { position: absolute; left: 8px; width: 44%; bottom: 8px; top: 27px; border-radius: 7px; background: rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(99,72,120,.10); }
.theme-preview em { position: absolute; right: 8px; width: 35%; bottom: 8px; top: 27px; border-radius: 7px; background: #f7eef7; }
.theme-classic .theme-preview { background: linear-gradient(145deg,#eef3f8,#dbe5ef); }
.theme-classic .theme-preview i { background: linear-gradient(90deg,#315a7d,#64748b); }
.theme-classic .theme-preview em { background: #d5dee8; }
.theme-dark .theme-preview { background: linear-gradient(145deg,#0b1120,#172033); border-color: #334155; }
.theme-dark .theme-preview i { background: linear-gradient(90deg,#60a5fa,#818cf8); }
.theme-dark .theme-preview b { background: #1e293b; box-shadow: none; }
.theme-dark .theme-preview em { background: #334155; }

.install-settings-panel { align-items: start; }
.install-settings-copy { min-width: 0; }
.install-icon-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin-top: .75rem; }
.install-icon-choice { min-width: 0; display: grid; grid-template-columns: 50px minmax(0,1fr); align-items: center; gap: .6rem; padding: .58rem; border: 2px solid var(--line); border-radius: 17px; background: #fff; color: var(--ink); text-align: left; }
.install-icon-choice:hover { transform: translateY(-1px); }
.install-icon-choice.selected { border-color: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb,var(--pink) 12%,transparent); }
.install-icon-choice img { width: 50px; height: 50px; border-radius: 13px; box-shadow: 0 6px 14px rgba(50,40,65,.14); }
.install-icon-choice strong,.install-icon-choice small { display: block; overflow-wrap: anywhere; }
.install-icon-choice small { margin-top: .15rem; color: var(--muted); font-size: .72rem; line-height: 1.25; }

html[data-theme="classic"] { background: #e9eff5; }
body[data-theme="classic"] {
    --pink: #315a7d;
    --pink-dark: #24445f;
    --purple: #64748b;
    --blue: #2563eb;
    --orange: #c56a1a;
    --green: #168267;
    --yellow: #d59a16;
    --ink: #172033;
    --muted: #64748b;
    --line: #cbd5e1;
    --paper: rgba(255,255,255,.96);
    --shadow: 0 16px 42px rgba(30,52,73,.13);
    --radius: 17px;
    background: radial-gradient(circle at 10% 0,rgba(49,90,125,.12),transparent 28rem),radial-gradient(circle at 92% 8%,rgba(100,116,139,.13),transparent 26rem),linear-gradient(150deg,#eef3f8 0%,#e6edf4 52%,#f5f7fa 100%);
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body[data-theme="classic"] input:focus,body[data-theme="classic"] select:focus,body[data-theme="classic"] textarea:focus { border-color: #7697b2; box-shadow: 0 0 0 4px rgba(49,90,125,.12); }
body[data-theme="classic"] .app-header,body[data-theme="classic"] .admin-header { background: rgba(244,247,250,.9); border-bottom-color: rgba(148,163,184,.45); }
body[data-theme="classic"] .mini-logo,body[data-theme="classic"] .logo-bloom { background: linear-gradient(145deg,#dce7f0,#cbd8e4); box-shadow: 0 10px 22px rgba(49,90,125,.14); }
body[data-theme="classic"] .soft-button,body[data-theme="classic"] .icon-button,body[data-theme="classic"] .round-button,body[data-theme="classic"] .settings-icon,body[data-theme="classic"] .dialog-close,body[data-theme="classic"] .view-switch,body[data-theme="classic"] .month-tab { color: #31516b; background: #e2eaf1; }
body[data-theme="classic"] .quote-card,body[data-theme="classic"] .quotes-page { background: linear-gradient(145deg,#f7f9fb,#e7edf3); border-color: #cfd9e3; }
body[data-theme="classic"] .bottom-nav { background: rgba(248,250,252,.94); border-color: rgba(203,213,225,.9); box-shadow: 0 14px 36px rgba(30,52,73,.20); }
body[data-theme="classic"] .nav-button { color: #526579; }
body[data-theme="classic"] .calendar-card,body[data-theme="classic"] .page-card,body[data-theme="classic"] .upcoming-card,body[data-theme="classic"] .dashboard-card { border-color: rgba(203,213,225,.8); }
body[data-theme="classic"] .theme-choice,body[data-theme="classic"] .install-icon-choice { border-radius: 13px; }
body[data-theme="classic"] .calendar-card,body[data-theme="classic"] .page-card,body[data-theme="classic"] .upcoming-card,body[data-theme="classic"] .dashboard-card,body[data-theme="classic"] .settings-panel,body[data-theme="classic"] .member-card,body[data-theme="classic"] .calendar-row { border-radius: 14px; }

html[data-theme="dark"] { background: #0b1120; }
body[data-theme="dark"] {
    color-scheme: dark;
    --pink: #60a5fa;
    --pink-dark: #93c5fd;
    --purple: #818cf8;
    --blue: #60a5fa;
    --orange: #fb923c;
    --green: #34d399;
    --yellow: #fbbf24;
    --ink: #f8fafc;
    --muted: #aab7c8;
    --line: #334155;
    --paper: rgba(15,23,42,.94);
    --shadow: 0 20px 54px rgba(0,0,0,.34);
    --radius: 19px;
    background: radial-gradient(circle at 8% 0,rgba(59,130,246,.18),transparent 30rem),radial-gradient(circle at 95% 8%,rgba(129,140,248,.14),transparent 28rem),linear-gradient(150deg,#0b1120 0%,#111827 48%,#0f172a 100%);
}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea { color: #f8fafc; background: #111827; border-color: #3b4a5e; }
body[data-theme="dark"] input:focus,body[data-theme="dark"] select:focus,body[data-theme="dark"] textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.14); }
body[data-theme="dark"] label>span,body[data-theme="dark"] legend,body[data-theme="dark"] .admin-support-reply-form>label { color: #cbd5e1; }
body[data-theme="dark"] .app-header,body[data-theme="dark"] .admin-header { background: rgba(11,17,32,.88); border-bottom-color: rgba(51,65,85,.9); }
body[data-theme="dark"] .mini-logo,body[data-theme="dark"] .logo-bloom { background: linear-gradient(145deg,#1e293b,#334155); box-shadow: 0 12px 28px rgba(0,0,0,.3); }
body[data-theme="dark"] .user-chip,body[data-theme="dark"] .calendar-card,body[data-theme="dark"] .page-card,body[data-theme="dark"] .upcoming-card,body[data-theme="dark"] .dashboard-card,body[data-theme="dark"] .settings-panel,body[data-theme="dark"] .day-plan-card,body[data-theme="dark"] .upcoming-item,body[data-theme="dark"] .special-row,body[data-theme="dark"] .member-card,body[data-theme="dark"] .calendar-row,body[data-theme="dark"] .stat-card,body[data-theme="dark"] .admin-user-row,body[data-theme="dark"] .admin-family-row,body[data-theme="dark"] .support-thread-row,body[data-theme="dark"] .support-new-card,body[data-theme="dark"] .support-empty,body[data-theme="dark"] .theme-choice,body[data-theme="dark"] .install-icon-choice { color: var(--ink); background: #111827; border-color: #334155; }
body[data-theme="dark"] .calendar-card,body[data-theme="dark"] .page-card,body[data-theme="dark"] .upcoming-card { border-color: rgba(51,65,85,.92); }
body[data-theme="dark"] .soft-button,body[data-theme="dark"] .icon-button,body[data-theme="dark"] .round-button,body[data-theme="dark"] .settings-icon,body[data-theme="dark"] .dialog-close,body[data-theme="dark"] .view-switch,body[data-theme="dark"] .month-tab { color: #dbeafe; background: #243247; }
body[data-theme="dark"] .danger-button,body[data-theme="dark"] .danger-soft { color: #fecdd3; background: #3a1720; border-color: #6b2635; }
body[data-theme="dark"] .month-grid,body[data-theme="dark"] .week-grid,body[data-theme="dark"] .week-head,body[data-theme="dark"] .month-day { color: var(--ink); background: #111827; }
body[data-theme="dark"] .month-day.other-month { color: #6f7d91; background: #0d1525; }
body[data-theme="dark"] .month-day.today { background: linear-gradient(160deg,#132138,#17213b); box-shadow: inset 0 0 0 2px rgba(96,165,250,.55); }
body[data-theme="dark"] .day-timeline { background: repeating-linear-gradient(to bottom,#111827 0,#111827 59px,#334155 60px); }
body[data-theme="dark"] .event-pill,body[data-theme="dark"] .week-event,body[data-theme="dark"] .all-day-event,body[data-theme="dark"] .day-event { color: #f8fafc; background: color-mix(in srgb,var(--event-color) 30%,#111827); }
body[data-theme="dark"] .special-icon,body[data-theme="dark"] .member-avatar { background: color-mix(in srgb,var(--item-color,var(--member-color)) 28%,#111827); }
body[data-theme="dark"] .quote-card,body[data-theme="dark"] .quotes-page { color: var(--ink); background: linear-gradient(145deg,#172033,#1e293b); border-color: #334155; }
body[data-theme="dark"] .subtle-panel { background: #0e1728; }
body[data-theme="dark"] .bottom-nav { background: rgba(15,23,42,.94); border-color: rgba(51,65,85,.95); box-shadow: 0 16px 42px rgba(0,0,0,.42); }
body[data-theme="dark"] .nav-button { color: #aab7c8; }
body[data-theme="dark"] .pretty-dialog,body[data-theme="dark"] .support-hub-dialog,body[data-theme="dark"] .admin-support-dialog { color: var(--ink); background: linear-gradient(180deg,#111827 0%,#0f172a 100%); border-color: #334155; }
body[data-theme="dark"] .support-hub-header,body[data-theme="dark"] .admin-support-header { background: radial-gradient(circle at 92% 0,rgba(96,165,250,.16),transparent 38%),linear-gradient(135deg,#111827,#172033); border-color: #334155; }
body[data-theme="dark"] .support-hub-header .dialog-close,body[data-theme="dark"] .admin-support-header .dialog-close,body[data-theme="dark"] .admin-support-footer-icon { background: #243247; }
body[data-theme="dark"] .support-thread-row.unread { background: #17213b; border-color: #818cf8; }
body[data-theme="dark"] .support-thread-icon,body[data-theme="dark"] .support-message { background: #252445; }
body[data-theme="dark"] .support-message.admin { background: #12372f; }
body[data-theme="dark"] .admin-support-messages { background: linear-gradient(180deg,#0d1525,#111827); border-color: #334155; box-shadow: none; }
body[data-theme="dark"] .admin-support-composer { background: #111827; border-color: #334155; }
body[data-theme="dark"] .admin-support-footer,body[data-theme="dark"] .support-hub-footer::before { background: linear-gradient(135deg,#111827,#1e293b); border-color: #334155; }
body[data-theme="dark"] .support-new-card small,body[data-theme="dark"] .support-empty span:last-child,body[data-theme="dark"] .admin-support-footer small { color: var(--muted); }
body[data-theme="dark"] .support-status { background: #25345d; color: #c7d2fe; }
body[data-theme="dark"] .support-status.closed { background: #263445; color: #cbd5e1; }
body[data-theme="dark"] .support-status.waiting { background: #4a3514; color: #fde68a; }
body[data-theme="dark"] .theme-preview { border-color: #3b4a5e; }

@media (max-width:760px) {
    .theme-choice-grid,.install-icon-grid { grid-template-columns: 1fr; }
    .theme-choice { grid-template-columns: 82px minmax(0,1fr); align-items: center; }
    .theme-choice .theme-preview { grid-row: 1 / 3; height: 56px; }
    .theme-choice strong { align-self: end; }
    .theme-choice small { align-self: start; }
    .install-settings-panel { grid-template-columns: auto minmax(0,1fr); }
    .install-settings-panel #install-button { grid-column: 2; width: 100%; }
}


/* v2.7.0 theme completeness for planner, dashboard, cycle and support surfaces */
body[data-theme="classic"] .quote-card blockquote,
body[data-theme="classic"] .big-quote,
body[data-theme="classic"] .dashboard-card blockquote,
body[data-theme="dark"] .quote-card blockquote,
body[data-theme="dark"] .big-quote,
body[data-theme="dark"] .dashboard-card blockquote { font-family: inherit; letter-spacing: normal; }
body[data-theme="classic"] .big-quote { color: #24384b; }
body[data-theme="classic"] .dashboard-hero { background: linear-gradient(135deg,#f8fafc,#e2eaf1); }
body[data-theme="classic"] .dashboard-card { border-left-color: #315a7d; }
body[data-theme="classic"] .dashboard-card-heading>span,
body[data-theme="classic"] .day-section-icon { background: #e2eaf1; }
body[data-theme="classic"] .dashboard-empty,
body[data-theme="classic"] .dashboard-line,
body[data-theme="classic"] .dashboard-check-item,
body[data-theme="classic"] .week-note { background: #edf2f6; }
body[data-theme="classic"] .dashboard-feature>strong,
body[data-theme="classic"] .week-dinner,
body[data-theme="classic"] .dinner-section { background: linear-gradient(135deg,#f3f6f9,#fff); color: #334155; }
body[data-theme="classic"] .cycle-summary { background: linear-gradient(135deg,#eef3f8,#e2eaf1); }
body[data-theme="classic"] .cycle-settings,
body[data-theme="classic"] .cycle-period-row,
body[data-theme="classic"] .week-planner-card,
body[data-theme="classic"] .day-section { background: #fff; border-color: #cbd5e1; }
body[data-theme="classic"] .week-planner-card.today { background: linear-gradient(160deg,#eef5fb,#fff); }
body[data-theme="classic"] .cycle-drop { color: #315a7d; }
body[data-theme="classic"] .support-modal-header { background: radial-gradient(circle at 92% 0,rgba(49,90,125,.12),transparent 38%),linear-gradient(135deg,#fff,#edf2f6); border-color: #cbd5e1; }
body[data-theme="classic"] .support-modal-header .eyebrow,
body[data-theme="classic"] .support-conversation-label,
body[data-theme="classic"] .admin-support-section-label,
body[data-theme="classic"] .support-section-label { color: #315a7d; }
body[data-theme="classic"] .support-modal-header p:not(.eyebrow),
body[data-theme="classic"] .support-field>span,
body[data-theme="classic"] .support-user-reply-form>label { color: #526579; }
body[data-theme="classic"] .support-user-messages { background: linear-gradient(180deg,#f4f7fa,#fff); border-color: #cbd5e1; }
body[data-theme="classic"] .support-user-composer,
body[data-theme="classic"] .support-field input,
body[data-theme="classic"] .support-field textarea { border-color: #cbd5e1; box-shadow: 0 8px 22px rgba(30,52,73,.07); }
body[data-theme="classic"] .support-modal-footer { background: linear-gradient(135deg,#edf2f6,#e2eaf1); border-color: #cbd5e1; }
body[data-theme="classic"] .support-conversation-dialog .support-message { background: #e5edf5; }
body[data-theme="classic"] .support-conversation-dialog .support-message.admin { background: #e4f1ea; }

body[data-theme="dark"] .big-quote { color: #e2e8f0; }
body[data-theme="dark"] .dashboard-hero { background: linear-gradient(135deg,#172033,#1e293b); }
body[data-theme="dark"] .dashboard-card { border-left-color: #60a5fa; }
body[data-theme="dark"] .dashboard-card-heading>span,
body[data-theme="dark"] .dashboard-empty,
body[data-theme="dark"] .dashboard-line,
body[data-theme="dark"] .dashboard-check-item,
body[data-theme="dark"] .day-section-icon,
body[data-theme="dark"] .week-note { color: #e2e8f0; background: #1e293b; }
body[data-theme="dark"] .dashboard-feature>strong,
body[data-theme="dark"] .week-dinner,
body[data-theme="dark"] .dinner-section { color: #f8fafc; background: linear-gradient(135deg,#1e293b,#172033); }
body[data-theme="dark"] .cycle-summary,
body[data-theme="dark"] .cycle-settings,
body[data-theme="dark"] .cycle-period-row,
body[data-theme="dark"] .week-planner-card,
body[data-theme="dark"] .day-section { color: var(--ink); background: #111827; border-color: #334155; }
body[data-theme="dark"] .week-planner-card.today { background: linear-gradient(160deg,#17213b,#111827); }
body[data-theme="dark"] .cycle-drop { color: #60a5fa; }
body[data-theme="dark"] .dashboard-event { color: var(--ink); background: color-mix(in srgb,var(--item-color) 28%,#111827); }
body[data-theme="dark"] .week-card-event,
body[data-theme="dark"] .day-schedule-event { color: var(--ink); background: color-mix(in srgb,var(--event-color) 28%,#111827); }
body[data-theme="dark"] .category-chips span { color: var(--ink); border-color: color-mix(in srgb,var(--category-color) 50%,#334155); background: color-mix(in srgb,var(--category-color) 25%,#111827); }
body[data-theme="dark"] .support-modal-header { background: radial-gradient(circle at 92% 0,rgba(96,165,250,.16),transparent 38%),linear-gradient(135deg,#111827,#172033); border-color: #334155; }
body[data-theme="dark"] .support-modal-header .eyebrow,
body[data-theme="dark"] .support-conversation-label,
body[data-theme="dark"] .admin-support-section-label,
body[data-theme="dark"] .support-section-label { color: #93c5fd; }
body[data-theme="dark"] .support-modal-header p:not(.eyebrow),
body[data-theme="dark"] .support-field>span,
body[data-theme="dark"] .support-user-reply-form>label { color: #cbd5e1; }
body[data-theme="dark"] .support-modal-header .dialog-close,
body[data-theme="dark"] .support-footer-icon { background: #243247; }
body[data-theme="dark"] .support-field input,
body[data-theme="dark"] .support-field textarea,
body[data-theme="dark"] .support-user-composer { color: var(--ink); background: #111827; border-color: #334155; box-shadow: none; }
body[data-theme="dark"] .support-user-messages { background: linear-gradient(180deg,#0d1525,#111827); border-color: #334155; box-shadow: none; }
body[data-theme="dark"] .support-conversation-dialog .support-message { background: #252445; }
body[data-theme="dark"] .support-conversation-dialog .support-message.admin { background: #12372f; }
body[data-theme="dark"] .support-modal-footer { background: linear-gradient(135deg,#111827,#1e293b); border-color: #334155; }
body[data-theme="dark"] .support-conversation-footer small { color: var(--muted); }
@media (max-width:760px) {
    .install-settings-panel { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; }
    .install-settings-panel #install-button { grid-column: 2; width: 100%; }
}


/* v2.7 family chores, shopping and wall display */
.family-tool-dialog{width:min(720px,calc(100vw - 24px));max-height:min(90vh,900px);overflow:auto}.tool-add-form{display:grid;gap:14px;padding:0 22px 20px}.tool-add-form>label{display:grid;gap:6px}.family-tool-list{display:grid;gap:9px;padding:0 22px 24px}.family-tool-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface);cursor:pointer}.family-tool-row input{width:22px;height:22px;flex:0 0 auto}.family-tool-row>span{display:grid;gap:2px;flex:1}.family-tool-row small{opacity:.72}.family-tool-row.done strong{text-decoration:line-through;opacity:.65}.icon-delete{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--danger,#c24141)}.tool-list-actions{display:flex;justify-content:flex-end;padding:0 22px 12px}.dashboard-chores,.dashboard-shopping{min-height:230px}
.family-display-mode .app-header{padding:24px 34px}.family-display-mode .bottom-nav,.family-display-mode .floating-add,.family-display-mode #notification-shortcut{display:none!important}.family-display-mode .app-main{padding-bottom:24px;max-width:1600px}.family-display-mode .dashboard-grid{grid-template-columns:repeat(3,minmax(260px,1fr));gap:22px}.family-display-mode .dashboard-card{font-size:1.08rem;min-height:260px}.family-display-mode .dashboard-hero h2{font-size:2.4rem}.family-display-mode .dashboard-quote{display:none}.family-display-mode .text-button{font-size:1rem}@media(max-width:900px){.family-display-mode .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.family-display-mode .dashboard-grid{grid-template-columns:1fr}}

/* v2.7.1 universal modal viewport and scrolling repair */
html:has(dialog[open]),
body:has(dialog[open]) {
    overflow: hidden;
}

.pretty-dialog {
    box-sizing: border-box;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.pretty-dialog[open] {
    animation: dialog-in .16s ease-out;
}

.pretty-dialog > form {
    box-sizing: border-box;
    max-width: 100%;
    max-height: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.pretty-dialog .dialog-header,
.pretty-dialog .quick-add-header,
.pretty-dialog .support-hub-header,
.pretty-dialog .support-modal-header,
.pretty-dialog .admin-support-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface, #fff);
}

.pretty-dialog .dialog-close {
    flex: 0 0 auto;
    touch-action: manipulation;
}

.family-tool-dialog {
    display: none;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(720px, calc(100vw - 1rem));
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
    overflow: hidden;
}

.family-tool-dialog[open] {
    display: grid;
}

.family-tool-dialog > .dialog-header {
    margin: 0;
    padding: 1rem 1.15rem .9rem;
    background: var(--surface, #fff);
}

.family-tool-dialog > .tool-add-form,
.family-tool-dialog > .family-tool-list,
.family-tool-dialog > .tool-list-actions {
    min-width: 0;
}

.family-tool-dialog > .tool-add-form {
    overflow: visible;
}

.family-tool-dialog > .family-tool-list:last-child {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .pretty-dialog,
    .pretty-dialog.wide-dialog,
    .family-tool-dialog,
    .quick-add-dialog,
    .support-hub-dialog,
    .support-compose-dialog,
    .support-conversation-dialog,
    .admin-support-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - max(.5rem, env(safe-area-inset-top)) - max(.5rem, env(safe-area-inset-bottom)));
        border-radius: 24px;
    }

    .pretty-dialog > form {
        padding: 0;
        gap: 0;
    }

    .pretty-dialog > form > .dialog-header {
        margin: 0;
        padding: 1rem 1rem .85rem;
    }

    .pretty-dialog > form > :not(.dialog-header):not(.dialog-actions) {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .pretty-dialog > form > .dialog-header + * {
        margin-top: 1rem;
    }

    .pretty-dialog > form > .dialog-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin-top: 1rem;
        padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .pretty-dialog .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .family-tool-dialog {
        grid-template-rows: auto minmax(0, 1fr);
        overflow-y: auto;
    }

    .family-tool-dialog > .dialog-header {
        padding: 1rem;
    }

    .family-tool-dialog > .tool-add-form {
        padding: 1rem;
        gap: .85rem;
    }

    .family-tool-dialog > .tool-add-form .primary-button {
        position: sticky;
        bottom: .5rem;
        z-index: 3;
        width: 100%;
    }

    .family-tool-dialog > .tool-list-actions {
        padding: 0 1rem .75rem;
    }

    .family-tool-dialog > .family-tool-list {
        padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
    }

    .support-compose-dialog .support-compose-shell,
    .support-conversation-dialog,
    .admin-support-dialog,
    .support-hub-dialog {
        max-height: calc(100dvh - max(.5rem, env(safe-area-inset-top)) - max(.5rem, env(safe-area-inset-bottom)));
    }

    .support-compose-body,
    .support-conversation-body,
    .admin-support-body,
    .support-hub-body,
    .quick-add-grid {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

body[data-theme="dark"] .pretty-dialog .dialog-header,
body[data-theme="dark"] .pretty-dialog .quick-add-header,
body[data-theme="dark"] .pretty-dialog .support-hub-header,
body[data-theme="dark"] .pretty-dialog .support-modal-header,
body[data-theme="dark"] .pretty-dialog .admin-support-header,
body[data-theme="dark"] .pretty-dialog > form > .dialog-actions {
    background: #111827;
}


/* v2.7.3 permission-controlled Family Display launch and exit */
.family-display-login-option{border:1px solid var(--line);border-radius:18px;padding:.85rem 1rem;text-align:left;background:rgba(255,255,255,.55)}
.family-display-login-option .check-row{margin:0}.family-display-login-option .hint{margin:.35rem 0 0 2rem}
.mini-logo-button{border:0;cursor:pointer;font:inherit}.family-display-mode .mini-logo-button{cursor:default}
.compact-dialog{width:min(480px,calc(100vw - 24px))}
.family-display-mode .app-header .user-chip{display:none}
.family-display-mode #family-label{max-width:40ch}
body[data-theme="dark"] .family-display-login-option{background:#111827;border-color:#334155}

/* v2.8.2 compact calendar preferences and categorized shopping */
.calendar-appearance-panel{display:block;padding:0;overflow:hidden}
.calendar-appearance-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:1rem;cursor:pointer;list-style:none}
.calendar-appearance-summary::-webkit-details-marker{display:none}
.calendar-appearance-summary-copy{display:grid;gap:.15rem;min-width:0}
.calendar-appearance-summary-copy strong{font-size:1rem}
.calendar-appearance-summary-copy small{color:var(--muted);line-height:1.3}
.calendar-appearance-chevron{font-size:1.5rem;font-weight:900;transition:transform .2s ease}
.calendar-appearance-panel[open] .calendar-appearance-chevron{transform:rotate(180deg)}
.calendar-appearance-body{padding:0 1rem 1rem;border-top:1px solid var(--line)}
.calendar-appearance-help{margin:.8rem 0;color:var(--muted);font-size:.9rem}
.calendar-preference-list{display:grid;gap:.5rem}
.calendar-preference-row{--calendar-preview-color:#8B5CF6;border:1px solid var(--line);border-left:5px solid var(--calendar-preview-color);border-radius:16px;background:var(--surface);overflow:hidden;transition:opacity .15s ease}
.calendar-preference-row.calendar-hidden-preview{opacity:.62}
.calendar-pref-summary{display:grid;grid-template-columns:40px minmax(0,1fr) 22px auto 18px;gap:.65rem;align-items:center;padding:.65rem .7rem;cursor:pointer;list-style:none}
.calendar-pref-summary::-webkit-details-marker{display:none}
.calendar-pref-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--calendar-preview-color) 15%,white);font-size:1.25rem}
.calendar-pref-title{display:grid;min-width:0;line-height:1.15}
.calendar-pref-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.calendar-pref-title small{color:var(--muted);font-size:.72rem}
.calendar-pref-swatch{width:18px;height:18px;border-radius:50%;background:var(--calendar-preview-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--calendar-preview-color) 15%,transparent)}
.calendar-pref-visible{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-weight:800;font-size:.82rem;white-space:nowrap;cursor:pointer}
.calendar-pref-visible input{width:20px;height:20px;margin:0}
.calendar-pref-chevron{font-weight:900;transition:transform .2s ease}
.calendar-preference-row[open] .calendar-pref-chevron{transform:rotate(180deg)}
.calendar-pref-editor{display:grid;grid-template-columns:minmax(90px,.35fr) minmax(0,1fr) minmax(160px,.65fr);gap:.7rem;padding:.7rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 90%,var(--calendar-preview-color) 10%)}
.calendar-pref-field{display:grid;gap:.3rem;min-width:0;margin:0}
.calendar-pref-field>span{font-size:.75rem;font-weight:850;color:var(--muted)}
.calendar-pref-name{width:100%;min-width:0;height:44px}
.calendar-pref-colour-control{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.55rem;align-items:center}
.calendar-pref-color{width:64px;height:44px;min-width:0;padding:.15rem;border-radius:12px;cursor:pointer}
.calendar-pref-colour-value{font-size:.78rem;font-weight:800;color:var(--muted)}
.calendar-preference-save{width:100%;margin-top:.8rem}
@media(max-width:600px){
    .calendar-appearance-summary{padding:.85rem}
    .calendar-appearance-summary .settings-icon{width:42px;height:42px}
    .calendar-appearance-body{padding:0 .75rem .75rem}
    .calendar-pref-summary{grid-template-columns:38px minmax(0,1fr) 18px auto 16px;gap:.5rem;padding:.58rem .6rem}
    .calendar-pref-icon{width:38px;height:38px}
    .calendar-pref-visible span{display:none}
    .calendar-pref-editor{grid-template-columns:1fr;padding:.65rem}
    .calendar-pref-colour-control{grid-template-columns:72px minmax(0,1fr)}
}
@media(max-width:370px){
    .calendar-pref-summary{grid-template-columns:36px minmax(0,1fr) 18px 20px 14px}
    .calendar-pref-icon{width:36px;height:36px}
    .calendar-pref-title small{display:none}
}
body[data-theme="dark"] .calendar-preference-row{background:#111827;border-color:#334155}
body[data-theme="dark"] .calendar-pref-icon{background:color-mix(in srgb,var(--calendar-preview-color) 24%,#111827)}
body[data-theme="dark"] .calendar-pref-editor{background:color-mix(in srgb,#111827 88%,var(--calendar-preview-color) 12%)}
.shopping-list-toolbar{display:grid;grid-template-columns:minmax(150px,1fr) 1.4fr auto;gap:.7rem;align-items:end;margin-bottom:1rem}
.shopping-list-toolbar form{display:flex;gap:.5rem}.shopping-list-toolbar form input{min-width:0}
.shopping-category-title{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin:1rem .2rem .35rem;color:var(--muted)}
@media(max-width:760px){
    .shopping-list-toolbar{grid-template-columns:1fr}.shopping-list-toolbar form{width:100%}
}


/* v2.8.3 display-only accounts */
.display-content-settings{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:16px}.display-content-settings legend{font-weight:800;padding:0 .35rem}.display-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .8rem;margin-bottom:.8rem}.display-content-settings>label{display:grid;gap:.35rem}.family-display-mode .app-header .header-actions,.family-display-mode .bottom-nav,.family-display-mode .floating-add{display:none!important}@media(max-width:620px){.display-content-grid{grid-template-columns:1fr}}


/* Family Display recovery controls */
.family-display-exit-dialog{max-width:min(92vw,460px)}
.family-display-exit-dialog form{display:grid;gap:1rem}
.display-emergency-hint{margin:.25rem 0 0;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.family-display-emergency-exit{white-space:nowrap}
.family-display-mode .family-display-emergency-exit:not(.hidden){display:inline-flex!important}
.family-display-mode #family-display-logo{touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media (pointer:fine){.family-display-mode .family-display-emergency-exit{display:inline-flex!important}}

/* v2.9.0 compact Settings accordion */
.settings-card{display:grid;gap:.75rem}
.settings-accordion-panel{display:block!important;margin-top:0!important;padding:0!important;overflow:hidden}
.settings-accordion-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.9rem;cursor:pointer;list-style:none;min-height:74px}
.settings-accordion-summary::-webkit-details-marker{display:none}
.settings-accordion-copy{display:grid;gap:.12rem;min-width:0}
.settings-accordion-copy strong{font-size:1rem;line-height:1.2}
.settings-accordion-copy small{color:var(--muted);line-height:1.3;white-space:normal}
.settings-accordion-chevron{font-size:1.45rem;font-weight:900;transition:transform .18s ease}
.settings-accordion-panel[open] .settings-accordion-chevron{transform:rotate(180deg)}
.settings-accordion-body{padding:.2rem .9rem .9rem;border-top:1px solid var(--line);display:grid;gap:.85rem}
.settings-accordion-body>.profile-form{margin-top:.7rem}
.settings-action-body{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-top:.9rem}
.settings-form-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:.2rem}
.settings-form-actions button{min-width:110px}
.settings-accordion-body .calendar-import-panel{display:grid;gap:.85rem;margin:0;padding:.7rem 0 0;border:0;background:transparent}
.settings-accordion-body .calendar-import-panel>.calendar-import-copy{width:100%}
.settings-accordion-body .install-settings-copy{width:100%}
.settings-card>.danger-button{display:none}
body.settings-screen-active #floating-quick-add{display:none!important}
@media(max-width:640px){
  .settings-card{padding:.75rem}
  .settings-accordion-summary{padding:.78rem;min-height:68px;gap:.65rem}
  .settings-accordion-summary .settings-icon{width:46px;height:46px;flex:0 0 46px}
  .settings-accordion-copy strong{font-size:.98rem}
  .settings-accordion-copy small{font-size:.82rem}
  .settings-accordion-body{padding:.15rem .75rem .75rem}
  .settings-action-body{grid-template-columns:1fr}
  .settings-action-body button{width:100%}
  .settings-form-actions{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));z-index:3;background:var(--surface,#fff);padding:.65rem 0 .1rem}
  .settings-form-actions button{flex:1;min-width:0}
}


/* v2.9.0 category-driven event colours */
.event-category-fieldset{display:grid;gap:.65rem}.category-help{margin:0}.event-colour-preview{display:inline-flex;align-items:center;gap:.55rem;width:max-content;max-width:100%;padding:.55rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--panel-soft)}.event-colour-preview span{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--category-preview-color,#8B5CF6);box-shadow:0 0 0 4px color-mix(in srgb,var(--category-preview-color,#8B5CF6) 18%,transparent)}
.category-preference-list{display:grid;gap:.65rem}.category-preference-row{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 1.2rem 3.5rem;align-items:center;gap:.75rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel-soft);cursor:pointer}.category-preference-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.8rem;background:color-mix(in srgb,var(--category-preference-color) 15%,white);font-size:1.35rem}.category-preference-name{font-weight:850}.category-preference-swatch{width:1rem;height:1rem;border-radius:50%;background:var(--category-preference-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--category-preference-color) 17%,transparent)}.category-preference-row input[type="color"]{width:3.5rem;height:2.5rem;padding:.15rem;border-radius:.7rem;cursor:pointer}
@media(max-width:520px){.category-preference-row{grid-template-columns:2.4rem minmax(0,1fr) 1rem 3rem;padding:.6rem}.category-preference-icon{width:2.4rem;height:2.4rem}.category-preference-row input[type="color"]{width:3rem}}

/* v2.9.1 person-driven event colours and split multi-person bars */
.event-pill,.week-card-event,.day-schedule-event,.upcoming-item,.dashboard-event{position:relative;}
.event-pill.multi-assignee-colors,.week-card-event.multi-assignee-colors,.day-schedule-event.multi-assignee-colors,.upcoming-item.multi-assignee-colors,.dashboard-event.multi-assignee-colors{border-left-color:transparent;}
.event-pill.multi-assignee-colors::before,.week-card-event.multi-assignee-colors::before,.day-schedule-event.multi-assignee-colors::before,.upcoming-item.multi-assignee-colors::before,.dashboard-event.multi-assignee-colors::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:5px;background:var(--event-strip);border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0;pointer-events:none;}
.event-pill.multi-assignee-colors::before,.week-card-event.multi-assignee-colors::before{width:4px;}

/* v2.9.4 scrollable calendar settings list */
.calendar-appearance-panel[open] .calendar-appearance-body{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:.7rem;
  max-height:min(68dvh,680px);
  overflow:hidden;
}
.calendar-appearance-body .calendar-appearance-help{margin:.65rem 0 0}
.calendar-appearance-body .calendar-preference-list{
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:.1rem .25rem .45rem 0;
  scroll-padding-bottom:1rem;
}
.calendar-appearance-body .settings-form-actions{
  position:relative;
  bottom:auto;
  z-index:4;
  margin:0;
  padding:.7rem 0 0;
  border-top:1px solid var(--line);
  background:var(--surface,#fff);
}
body[data-theme="dark"] .calendar-appearance-body .settings-form-actions{background:#111827}
@media(max-width:640px){
  .calendar-appearance-panel[open] .calendar-appearance-body{
    max-height:calc(100dvh - 235px - env(safe-area-inset-bottom));
    min-height:320px;
  }
  .calendar-appearance-body .calendar-preference-list{padding-right:.15rem}
  .calendar-appearance-body .settings-form-actions{
    padding:.65rem 0 .05rem;
  }
}
@media(max-height:650px) and (orientation:landscape){
  .calendar-appearance-panel[open] .calendar-appearance-body{
    max-height:calc(100dvh - 150px - env(safe-area-inset-bottom));
    min-height:220px;
  }
}

/* v2.9.5 keep calendar preference rows at their natural height inside scroll area */
.calendar-appearance-body .calendar-preference-list{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.calendar-appearance-body .calendar-preference-row{
  flex:0 0 auto;
  min-height:max-content;
}
.calendar-appearance-body .calendar-preference-row[open]{
  overflow:visible;
}
.calendar-appearance-body .calendar-preference-row[open] .calendar-pref-editor{
  min-height:max-content;
}


/* v2.9.6 viewer-specific assignee colours and usable celebration settings */
.category-appearance-panel[open] .settings-accordion-body{overflow:visible;max-height:none;}
.category-appearance-panel .settings-form-actions{position:relative;bottom:auto;z-index:1;margin-top:.15rem;padding:.65rem 0 0;border-top:1px solid var(--line);background:var(--surface,#fff);}
body[data-theme="dark"] .category-appearance-panel .settings-form-actions{background:#111827;}
@media(max-width:640px){
  .category-appearance-panel .settings-form-actions{position:relative;bottom:auto;}
  .category-preference-list{overflow:visible;}
}

/* v2.9.8 shopping dialog mobile layout repair */
#shopping-dialog[open] {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

#shopping-dialog > .dialog-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

#shopping-dialog .shopping-list-toolbar {
    box-sizing: border-box;
    padding: 1rem 22px 0;
    margin: 0 0 1rem;
}

#shopping-dialog .shopping-list-toolbar > label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

#shopping-dialog .shopping-list-toolbar > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
}

#shopping-dialog .shopping-list-toolbar input,
#shopping-dialog .shopping-list-toolbar select,
#shopping-dialog .shopping-list-toolbar button {
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 760px) {
    #shopping-dialog .shopping-list-toolbar {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
        padding: 1rem 1rem 0;
    }

    #shopping-dialog .shopping-list-toolbar > form {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    #shopping-dialog .shopping-list-toolbar > form .soft-button {
        white-space: normal;
        min-width: 7.2rem;
    }

    #shopping-dialog #delete-shopping-list {
        width: 100%;
    }

    #shopping-dialog > .tool-add-form {
        padding-top: 0;
    }
}

@media (max-width: 420px) {
    #shopping-dialog .shopping-list-toolbar > form {
        grid-template-columns: minmax(0, 1fr) 7rem;
    }
}

.weather-alerts{display:grid;gap:.45rem;margin-top:.45rem}.weather-alert{padding:.65rem .75rem;border-radius:12px;background:#fff3df;color:#6f4510;font-weight:800;line-height:1.35}.weather-calm{margin-top:.45rem;padding:.6rem .7rem;border-radius:12px;background:#f1f8f3;color:#326242;font-size:.88rem;line-height:1.35}

.calendar-pref-emoji-field input{font-size:1.35rem;text-align:center;max-width:110px}


/* v2.9.14 configurable wall-tablet bento dashboard */
.family-display-clock{display:grid;justify-items:end;gap:2px;color:var(--muted)}
.family-display-clock span{font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.family-display-clock strong{font-size:1.25rem;color:var(--ink);line-height:1}
.display-mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;align-content:start}
.display-cal-weekday{font-size:.68rem;font-weight:900;text-align:center;color:var(--muted);padding-bottom:3px}
.display-cal-day{display:grid;place-items:center;min-height:28px;border-radius:9px;font-size:.78rem;font-weight:750;background:color-mix(in srgb,var(--surface) 88%,var(--profile-color) 12%)}
.display-cal-day.outside{opacity:.3;background:transparent}.display-cal-day.today{background:var(--profile-color);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--profile-color) 35%,transparent)}
.family-display-mode{background:radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--profile-color) 32%,transparent),transparent 46%),#07111f;color:#f5f8ff}
.family-display-mode .app-shell{min-height:100dvh;background:transparent}
.family-display-mode .app-header{padding:12px 24px;background:rgba(5,14,27,.86);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.family-display-mode .brand-wrap .eyebrow,.family-display-mode .family-display-clock span{color:#9eb0c8}.family-display-mode .brand-wrap h1,.family-display-mode .family-display-clock strong{color:#fff}
.family-display-mode .app-main{max-width:none;width:100%;padding:14px 20px 20px}
.family-display-mode .dashboard-hero{display:none}
.family-display-mode .dashboard-grid{display:grid;grid-template-columns:1.25fr 1fr .88fr;grid-auto-rows:minmax(180px,1fr);gap:14px;height:calc(100dvh - 92px)}
.family-display-mode .dashboard-card{min-height:0!important;height:auto;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(145deg,rgba(24,43,68,.96),rgba(12,28,49,.96));box-shadow:0 12px 32px rgba(0,0,0,.26);color:#f7faff;overflow:hidden}
.family-display-mode .dashboard-card h3,.family-display-mode .dashboard-card strong{color:#fff}.family-display-mode .dashboard-card .eyebrow,.family-display-mode .dashboard-card small{color:#9fb1c9}
.family-display-mode .dashboard-quote{grid-column:1;grid-row:1}.family-display-mode .dashboard-schedule{grid-column:2;grid-row:1}.family-display-mode .dashboard-mini-calendar{grid-column:3;grid-row:1}
.family-display-mode .dashboard-chores{grid-column:1;grid-row:2}.family-display-mode .dashboard-weather{grid-column:2;grid-row:2}.family-display-mode .dashboard-shopping{grid-column:3;grid-row:2}
.family-display-mode .dashboard-dinner,.family-display-mode [data-display-section="specials"],.family-display-mode [data-display-section="checklist"],.family-display-mode .dashboard-upcoming{grid-column:auto;grid-row:auto}
.family-display-mode .dashboard-grid>.dashboard-card:not(.hidden):nth-last-child(n+7){font-size:.92rem}
.family-display-mode .dashboard-list{overflow:auto;min-height:0;scrollbar-width:none}.family-display-mode .dashboard-list::-webkit-scrollbar{display:none}
.family-display-mode .dashboard-card-heading{margin-bottom:10px}.family-display-mode .dashboard-card-heading>span{font-size:1.35rem}.family-display-mode .dashboard-card-heading h3{font-size:1.05rem}
.family-display-mode .dashboard-event,.family-display-mode .family-tool-row{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08);color:#fff}
.family-display-mode .dashboard-empty{color:#9fb1c9}.family-display-mode .weather-temp{font-size:2.3rem}.family-display-mode #weather-enable{display:none!important}
.family-display-mode .display-cal-day{background:rgba(255,255,255,.055);color:#dce8f6}.family-display-mode .display-cal-day.outside{background:transparent;color:#7890ab}.family-display-mode .display-cal-day.today{background:var(--profile-color);color:#fff}
@media(max-width:1000px){.family-display-mode .dashboard-grid{grid-template-columns:1.2fr 1fr .9fr;gap:10px}.family-display-mode .dashboard-card{padding:12px;border-radius:17px}.family-display-mode .display-mini-calendar{gap:3px}.family-display-mode .display-cal-day{min-height:24px}}
@media(max-width:760px){.family-display-mode .dashboard-grid{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(220px,auto)}.family-display-mode .dashboard-card{grid-column:auto!important;grid-row:auto!important}.family-display-mode .dashboard-mini-calendar{min-height:280px!important}}

/* v2.9.15 reliable Family Display exit: tap the clock five times */
.family-display-mode #family-display-clock{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.family-display-mode #family-display-clock:focus-visible{outline:3px solid color-mix(in srgb,var(--profile-color) 75%,white);outline-offset:5px;border-radius:10px}

/* v2.9.16: keep the visible clock/exit target in Family Display while hiding normal header controls */
.family-display-mode .app-header .header-actions{
    display:flex!important;
    margin-left:auto;
    align-items:center;
    justify-content:flex-end;
}
.family-display-mode .app-header .header-actions > :not(#family-display-clock):not(#family-display-emergency-exit){
    display:none!important;
}
.family-display-mode #family-display-clock{
    display:grid!important;
    min-width:110px;
    min-height:48px;
    padding:6px 10px;
    border-radius:12px;
    position:relative;
    z-index:20;
}
.family-display-mode #family-display-clock.hidden{display:grid!important}

/* v2.9.17 dedicated shared Grocery module */
.grocery-page{max-width:980px;margin:auto}.grocery-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.4fr) auto;gap:.7rem;align-items:end}.grocery-toolbar label,.grocery-quick-add label{display:grid;gap:.35rem}.grocery-new-list{display:flex;gap:.5rem}.grocery-new-list input{min-width:0}.grocery-quick-add{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:end;margin:1rem 0}.grocery-quick-add textarea{resize:vertical}.grocery-view-actions{display:flex;justify-content:flex-end;gap:.55rem;flex-wrap:wrap;margin-bottom:.5rem}.grocery-list{display:grid;gap:.45rem}.grocery-category-title{margin:1rem 0 .25rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.grocery-item{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(120px,170px) auto;gap:.65rem;align-items:center;padding:.72rem .8rem;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff)}.grocery-item input[type=checkbox]{width:22px;height:22px}.grocery-item.completed .grocery-item-name{text-decoration:line-through;opacity:.6}.grocery-completed-heading{display:flex;justify-content:space-between;align-items:center;margin-top:1.1rem}.settings-link-card{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;text-align:left;padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--surface,#fff);margin-bottom:.8rem}.settings-link-card span:nth-child(2){display:grid;gap:.15rem}.settings-link-card small{color:var(--muted)}@media(max-width:700px){.grocery-toolbar{grid-template-columns:1fr}.grocery-new-list{width:100%}.grocery-quick-add{grid-template-columns:1fr}.grocery-item{grid-template-columns:auto minmax(0,1fr) auto}.grocery-item select{grid-column:2/4}.bottom-nav .nav-button{min-width:62px}}


/* v2.9.18 clean categorized grocery rows */
.grocery-list{gap:0}.grocery-category-title{margin:1.25rem 0 .35rem;padding-bottom:.35rem;border-bottom:1px solid var(--line);font-size:.82rem}.grocery-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.35rem;align-items:center;padding:.18rem 0;border:0;border-radius:0;background:transparent}.grocery-check{width:28px;height:28px;border:2px solid var(--line);border-radius:50%;background:transparent;color:var(--profile-color);font-weight:900;line-height:1;display:grid;place-items:center;cursor:pointer}.grocery-item.completed .grocery-check{background:color-mix(in srgb,var(--profile-color) 15%,transparent);border-color:var(--profile-color)}.grocery-item-edit{border:0;background:transparent;text-align:left;padding:.55rem .35rem;cursor:pointer;border-radius:10px;color:inherit;font:inherit}.grocery-item-edit:hover,.grocery-item-edit:focus-visible{background:color-mix(in srgb,var(--profile-color) 8%,transparent);outline:none}.grocery-item-name{font-size:1rem}.grocery-item.completed .grocery-item-name{text-decoration:line-through;opacity:.58}.grocery-completed-heading{padding-top:.75rem;border-top:1px solid var(--line)}@media(max-width:700px){.grocery-item{grid-template-columns:34px minmax(0,1fr)}}


/* v2.9.19: native date/time picker plus a keyboard-friendly typed time field. */
.event-date-time-grid{align-items:start}
.date-time-field{display:grid;gap:.4rem;min-width:0}
.date-time-field>label{font-weight:800;font-size:.88rem;color:var(--ink)}
.date-time-field>input[type="datetime-local"]{width:100%;min-width:0}
.typed-time-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:center;margin-top:.15rem;padding:.55rem .65rem;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft)}
.typed-time-row label{font-size:.78rem;font-weight:850;color:var(--muted);white-space:nowrap}
.typed-time-input{min-width:0;width:100%;padding:.55rem .65rem!important;background:var(--surface,#fff)!important;font-weight:800;letter-spacing:.01em}
.typed-time-input.invalid-time{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}
.time-entry-hint{padding:0 .15rem!important;align-self:auto!important}
@media(max-width:520px){.typed-time-row{grid-template-columns:1fr;gap:.3rem}.typed-time-row label{white-space:normal}.typed-time-input{font-size:16px}}


/* v2.9.21 global grocery category administration */
.admin-shopping-category-list{display:grid;gap:.65rem}
.admin-shopping-category-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8rem;align-items:center;padding:.8rem .9rem;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff)}
.admin-shopping-category-row>div{display:grid;gap:.15rem}.admin-shopping-category-row small{color:var(--muted)}.admin-shopping-category-row.disabled{opacity:.68}
@media(max-width:620px){.admin-shopping-category-row{grid-template-columns:minmax(0,1fr) auto}.admin-shopping-category-row>button{grid-column:1/3;width:100%}}

/* v2.9.23 admin user manager */
.admin-user-manager-dialog { width: min(760px, calc(100vw - 1.25rem)); }
.admin-user-family-fields { margin: .85rem 0; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--accent-soft) 35%, #fff); transition: opacity .15s ease; }
.admin-user-family-fields .dialog-section-label { margin-top: 0; }
.admin-user-family-fields.disabled-fields { opacity: .52; }
body[data-theme="dark"] .admin-user-family-fields { background: #111827; border-color: #334155; }

/* v2.9.24 shopping list sharing */
@media(max-width:520px){.grocery-view-actions>button{flex:1 1 145px}}


/* Repeating family schedule bands */
.month-schedule-bands{display:flex;flex-direction:column;gap:2px;margin:0 -6px 4px;position:relative;z-index:1}.month-schedule-band{background:var(--band-color);color:#fff;font-weight:800;font-size:.68rem;line-height:1.25;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.family-schedule-list{display:grid;gap:10px;margin:12px 0}.family-schedule-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px}.family-schedule-row small{display:block;color:var(--muted);margin-top:3px}.family-schedule-swatch{width:14px;height:38px;border-radius:999px;background:var(--band-color)}

/* Family schedule-band visibility and list rows */
.schedule-visibility{margin-top:14px;border:1px solid var(--line);border-radius:16px;padding:12px}.schedule-visibility legend{padding:0 6px;font-weight:800}.schedule-band-list-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;margin:8px 0;border-radius:14px;background:color-mix(in srgb,var(--band-color) 14%,var(--surface));border-left:6px solid var(--band-color)}.schedule-band-list-row.compact{padding:8px 10px;margin:6px 0}.schedule-band-list-label{display:grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:var(--band-color);color:#fff;font-weight:900}.schedule-band-list-row span:last-child{display:flex;flex-direction:column;min-width:0}.schedule-band-list-row small{opacity:.72;margin-top:2px}

.recurring-action-copy{margin:.25rem 0 1rem;color:var(--muted-text,#64748b)}
.recurring-action-list{display:grid;gap:.65rem}
.recurring-action-list button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:.9rem 1rem;width:100%}
.recurring-action-list button small{margin-top:.2rem;opacity:.75}

/* v2.9.38 standardized modal shell and recurring-action repair */
.pretty-dialog > .dialog-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    width: 100%;
    max-width: 100%;
    max-height: inherit;
    padding: 0;
    overflow: hidden;
}
.pretty-dialog > .dialog-shell > .dialog-header {
    margin: 0;
    padding: 1rem 1.15rem .9rem;
}
.pretty-dialog > .dialog-shell > .dialog-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 1.15rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.pretty-dialog > .dialog-shell > .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 0;
    padding: .85rem 1.15rem max(.85rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface, #fff) 96%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.recurring-action-dialog {
    width: min(560px, calc(100vw - 1rem));
    overflow: hidden;
}
.recurring-action-dialog .dialog-header > div {
    min-width: 0;
}
.recurring-action-dialog .dialog-header h2,
.recurring-action-dialog .dialog-header .eyebrow {
    white-space: normal;
    overflow-wrap: anywhere;
}
.recurring-action-copy {
    margin: 0 0 .85rem;
}
.recurring-action-list {
    gap: .7rem;
}
.recurring-action-list button {
    min-height: 76px;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.recurring-action-list button strong,
.recurring-action-list button small {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.recurring-action-dialog .dialog-actions {
    justify-content: flex-end;
}
.recurring-action-dialog .dialog-actions button {
    min-width: 120px;
}
@media (max-width: 760px) {
    .pretty-dialog > .dialog-shell > .dialog-header {
        padding: 1rem .95rem .85rem;
    }
    .pretty-dialog > .dialog-shell > .dialog-body {
        padding: .9rem .95rem;
    }
    .pretty-dialog > .dialog-shell > .dialog-actions {
        padding: .8rem .95rem max(.8rem, env(safe-area-inset-bottom));
    }
    .recurring-action-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
    .recurring-action-list button {
        min-height: 72px;
    }
    .recurring-action-dialog .dialog-actions button {
        width: 100%;
    }
}


/* v3.0.2: keep the primary navigation anchored to the visual viewport on iOS/PWA.
   Avoid backdrop-filter on the mobile fixed layer because WebKit can incorrectly
   composite it into the scrolling document after long/accelerated scrolls. */
@media (max-width: 760px) {
    .bottom-nav {
        position: fixed !important;
        top: auto !important;
        left: .4rem !important;
        right: .4rem !important;
        bottom: calc(max(.55rem, env(safe-area-inset-bottom))) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        z-index: 1000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        isolation: isolate;
        touch-action: manipulation;
    }

    .app-main {
        padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
    }
}