:root {
  --brand-navy: #25334A;
  --brand-purple: #7F7099;
  --brand-deep-navy: #101D35;
  --brand-mist: #F3F1F6;
  --bg: #edf2f5;
  --panel: #ffffff;
  --panel-2: #f7f9fa;
  --text: #1b2a35;
  --muted: #566976;
  --line: #d8e0e5;
  --accent: #17324d;
  --accent-2: #2d6da3;
  --accent-soft: #e9f2f8;
  --tab-bg: #dfe7ec;
  --field-line: #bcc9d1;
  --focus-ring: rgba(45,109,163,.25);
  --on-accent: #ffffff;
  --field-bg: #ffffff;
  --event-bg: #f4f7f9;
  --task-event-bg: #fff8e2;
  --danger: #9a3838;
  --danger-bg: #ffffff;
  --ad-bg: rgba(255,255,255,.50);
  --day-track-bg: rgba(255,255,255,.30);
  --today-track-bg: rgba(45,109,163,.045);
  --all-day-bg: rgba(45,109,163,.10);
  --radius: 12px;
  --shadow: 0 2px 12px rgba(20, 42, 58, 0.08);
}

html[data-colour-scheme="ocean"] {
  --bg: #eef6f7; --panel: #ffffff; --panel-2: #f4fafb; --text: #17343b; --muted: #526a70; --line: #d3e3e6;
  --accent: #0d5064; --accent-2: #16849c; --accent-soft: #e1f3f6; --tab-bg: #d8eaed; --field-line: #adcbd1; --focus-ring: rgba(22,132,156,.24);
  --shadow: 0 2px 12px rgba(13,80,100,.08);
}
html[data-colour-scheme="forest"] {
  --bg: #f0f5f1; --panel: #ffffff; --panel-2: #f6f9f6; --text: #26372e; --muted: #596c60; --line: #d7e1d9;
  --accent: #315941; --accent-2: #4f8464; --accent-soft: #e6f0e9; --tab-bg: #dde8e0; --field-line: #b9cbbf; --focus-ring: rgba(79,132,100,.24);
  --shadow: 0 2px 12px rgba(49,89,65,.08);
}
html[data-colour-scheme="plum"] {
  --bg: #f5f1f6; --panel: #ffffff; --panel-2: #faf7fa; --text: #382c3b; --muted: #6b5a70; --line: #e2d8e4;
  --accent: #583d61; --accent-2: #875c91; --accent-soft: #f0e5f2; --tab-bg: #e8deea; --field-line: #cdbbd1; --focus-ring: rgba(135,92,145,.24);
  --shadow: 0 2px 12px rgba(88,61,97,.08);
}
html[data-colour-scheme="sunset"] {
  --bg: #f7f2ed; --panel: #ffffff; --panel-2: #fcf8f4; --text: #3e3026; --muted: #705f54; --line: #e7ddd3;
  --accent: #744722; --accent-2: #b86b31; --accent-soft: #f7e8da; --tab-bg: #eee1d5; --field-line: #d5c0ad; --focus-ring: rgba(184,107,49,.24);
  --shadow: 0 2px 12px rgba(116,71,34,.08);
}
html[data-colour-scheme="slate"] {
  --bg: #f0f2f4; --panel: #ffffff; --panel-2: #f7f8f9; --text: #27323a; --muted: #5e6d77; --line: #d9dfe3;
  --accent: #3b4954; --accent-2: #687b89; --accent-soft: #e8edf0; --tab-bg: #dfe5e8; --field-line: #bec8ce; --focus-ring: rgba(104,123,137,.24);
  --shadow: 0 2px 12px rgba(59,73,84,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; }
button, input, select { min-height: 44px; }
/* Keep editable controls native and selectable on older iPadOS standalone PWAs. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), textarea { -webkit-user-select: text; user-select: text; }
html.legacy-ipad-keyboard input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
html.legacy-ipad-keyboard textarea { touch-action: auto !important; -webkit-user-select: text !important; user-select: text !important; pointer-events: auto !important; }
button { cursor: pointer; }

.app-shell { min-height: 100%; padding: 16px; max-width: 1600px; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.brand-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 48px; height: 48px; border-radius: 12px; display: block; object-fit: contain; padding: 3px; background: #fff; border: 1px solid rgba(37,51,74,.14); box-shadow: 0 2px 8px rgba(16,29,53,.08); flex: 0 0 auto; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 25px; line-height: 1.1; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
.tagline, .muted { color: var(--muted); }
.tagline { font-size: 13px; margin-top: 3px; }
.small { font-size: 13px; }
.clock-wrap { text-align: right; flex: 0 0 auto; }
.clock { font-size: 25px; font-weight: 700; line-height: 1.1; }
.today-label { color: var(--muted); font-size: 13px; margin-top: 3px; }

.tabs { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: var(--tab-bg); margin-bottom: 12px; }
.tab { flex: 1; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-weight: 600; padding: 8px 14px; }
.tab.is-active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }

.page-stage { position: relative; }
.page { display: none; }
.page.is-active { display: block; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 4px 2px 12px; }
.page-heading p { margin: 4px 0 0; }
.calendar-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day-column { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.day-column.today { border: 2px solid var(--accent-2); }
.day-head { padding: 10px 10px 9px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.today .day-head { background: var(--accent-soft); }
.day-name { font-weight: 800; font-size: 17px; }
.day-date { color: var(--muted); font-size: 13px; margin-top: 2px; }
.day-events { padding: 8px; min-height: 220px; }
.event { border-left: 5px solid var(--event-color, var(--accent-2)); border-radius: 7px; background: var(--event-bg); padding: 8px 8px 8px 9px; margin-bottom: 7px; overflow-wrap: anywhere; }
.event-time { font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.event-title { font-weight: 700; font-size: 14px; line-height: 1.25; }
.event-source { font-size: 10px; color: var(--muted); margin-top: 4px; }
.event-button { display: block; width: 100%; min-height: 0; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.event-button:active { transform: translateY(1px); }
.no-events { color: var(--muted); font-size: 13px; padding: 4px; }

.add-item-form { display: grid; grid-template-columns: minmax(180px, 1fr) 105px minmax(175px, 220px) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.field { display: block; min-width: 0; }
.field > span, .field > .field-label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--field-line); border-radius: 8px; background: var(--field-bg); color: var(--text); padding: 9px 11px; font-size: 16px; }
.field textarea { resize: vertical; min-height: 82px; }

.shopping-item-input-wrap { position: relative; min-width: 0; }
.shopping-item-input-wrap > input { width: 100%; }
.shopping-suggestions { z-index: 80; }
.field input:focus, .field select:focus, .field textarea:focus, button:focus { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.button { min-height: 44px; border-radius: 8px; border: 1px solid transparent; padding: 9px 14px; font-weight: 600; }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.secondary { background: var(--panel); color: var(--accent); border-color: #b9c7d0; }
.button.danger { background: var(--danger-bg); color: var(--danger); border-color: #d7abab; }
.button.compact { min-height: 40px; padding: 7px 12px; }
.button:disabled { opacity: .55; cursor: default; }

.shopping-list { padding: 0; margin: 0; display: grid; gap: 14px; }
.shopping-group { min-width: 0; }
.shopping-group-heading { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.shopping-group-heading h3 { margin: 0; font-size: 16px; }
.shopping-group-count { min-width: 26px; height: 26px; margin-left: auto; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 12px; font-weight: 800; }
.shopping-group-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.shopping-item { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 60px; padding: 6px 7px; box-shadow: var(--shadow); }
.shopping-check { width: 44px; height: 44px; margin: 0; accent-color: var(--accent-2); }
.shopping-main { min-width: 0; }
.shopping-name { font-weight: 800; font-size: 17px; overflow-wrap: anywhere; }
.shopping-qty { color: var(--muted); font-size: 13px; margin-top: 2px; }
.shopping-category-select { display: inline-block; max-width: 230px; min-height: 30px; margin-top: 5px; padding: 3px 28px 3px 7px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--field-bg); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; }
.shopping-item.done .shopping-name { text-decoration: line-through; color: var(--muted); }
.shopping-item.done { opacity: .72; }
.icon-button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--danger); font-size: 24px; border-radius: 8px; }
.icon-button:disabled { opacity: .28; }
.shopping-order-card { grid-column: 1 / -1; }
.shopping-category-order { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 10px; margin-top: 12px; counter-reset: shopping-aisle-order; }
.shopping-order-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 40px 40px; gap: 5px; align-items: center; min-height: 48px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); counter-increment: shopping-aisle-order; }
.shopping-order-row.dragging { opacity: .45; }
.shopping-order-grip { color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-align: center; font-size: 17px; cursor: grab; white-space: nowrap; }
.shopping-order-grip::before { content: counter(shopping-aisle-order); min-width: 18px; color: var(--text); font-size: 12px; font-weight: 850; }
.shopping-order-name { min-width: 0; font-weight: 750; }
.shopping-order-row .icon-button { width: 40px; height: 40px; color: var(--accent); font-size: 20px; }
@media (max-width: 760px) { .shopping-category-order { grid-template-columns: 1fr; } .shopping-order-card { grid-column: auto; } }
.empty-state { text-align: center; padding: 42px 16px; color: var(--muted); }
.empty-state h3 { color: var(--text); margin-top: 8px; }
.empty-state p { margin: 6px 0 0; }
.empty-icon { width: 54px; height: 54px; border-radius: 50%; background: #dce9df; color: #2e6b3e; display: flex; align-items: center; justify-content: center; margin: auto; font-size: 28px; font-weight: 800; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.settings-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.settings-card h3 { margin-bottom: 13px; }
.settings-card .field { margin-top: 11px; }
.module-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 8px; }
.module-switch-grid .switch-row { margin: 0; min-height: 40px; }
.module-option-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 230px); gap: 14px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.module-option-row p { margin: 3px 0 0; }
.module-option-row .field { margin: 0; }
.compact-field span { font-size: 11px; }
.colour-scheme-row { display: grid; grid-template-columns: minmax(0,1fr) 156px; gap: 12px; align-items: end; margin-top: 11px; }
.colour-scheme-row .field { margin-top: 0; }
.colour-scheme-preview { height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 9px; }
.colour-scheme-swatch { width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.colour-scheme-swatch.primary { background: var(--accent); }
.colour-scheme-swatch.secondary { background: var(--accent-2); }
.colour-scheme-swatch.surface { background: var(--accent-soft); }
.switch-row { display: flex; gap: 10px; align-items: center; min-height: 48px; margin-top: 8px; font-weight: 700; }
.switch-row input { width: 24px; height: 24px; min-height: 24px; accent-color: var(--accent-2); }
.calendar-form { display: grid; grid-template-columns: 150px minmax(180px,1fr) 82px auto; gap: 8px; align-items: end; }
.calendar-form .field { margin-top: 0; }
.color-field input { padding: 4px; }
.calendar-sources { margin-top: 12px; display: grid; gap: 7px; }
.calendar-source { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 9px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; }
.source-dot { width: 14px; height: 14px; border-radius: 50%; }
.source-name { font-weight: 700; }
.source-url { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair-card { grid-column: 1 / -1; }
.pairing-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 22px; align-items: center; margin-top: 12px; }
.qr-column { text-align: center; }
.pairing-qr { width: 220px; min-height: 220px; margin: 0 auto; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #556772; font-size: 13px; }
.pairing-qr svg { display: block; width: 100%; height: auto; max-width: 200px; }
.qr-help { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.pairing-details { min-width: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.privacy-note { color: var(--muted); font-size: 12px; margin: 11px 0 0; }


.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(8,18,26,.58); display: flex; align-items: center; justify-content: center; padding: 18px; }
.event-modal { width: 100%; max-width: 560px; max-height: calc(100vh - 36px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 48px rgba(0,0,0,.28); padding: 16px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.modal-close { color: var(--muted); }
.event-form .field { margin-top: 12px; }
.event-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.event-all-day { margin-top: 12px; }
.optional { font-weight: 500; }
.event-help { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 12px 0 0; }
.event-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.event-form-right { margin-top: 0; margin-left: auto; }

/* Calendar event detail pop-up: every event is tappable, including read-only feeds. */
.calendar-time-event, .calendar-all-day-event { cursor: pointer; }
.calendar-detail-modal { max-width: 620px; }
.calendar-detail-accent { height: 5px; border-radius: 999px; margin: 2px 0 14px; background: var(--accent-2); }
.calendar-detail-body { display: grid; gap: 12px; }
.calendar-detail-row { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.calendar-detail-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.calendar-detail-notes { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.calendar-detail-link { justify-self: start; text-decoration: none; }
.calendar-detail-actions { justify-content: flex-end; }
.calendar-detail-actions #editCalendarEventDetail { margin-right: auto; }
@media (max-width: 650px) {
  .calendar-detail-row { grid-template-columns: 1fr; gap: 4px; }
  .calendar-detail-actions { flex-direction: row; align-items: center; }
}

.ad-slot { margin-top: 12px; min-height: 50px; border: 1px dashed #bac6ce; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--muted); background: var(--ad-bg); font-size: 12px; padding: 8px 12px; }
.ad-label { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6d7d88; }
.toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: 74px; max-width: 86%; background: #1b2a35; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); z-index: 20; text-align: center; }

@media (max-width: 1000px) {
  .calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calendar-form { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .module-switch-grid { grid-template-columns: 1fr; }
  .module-option-row { grid-template-columns: 1fr; }
  .pair-card { grid-column: auto; }
  .pairing-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .app-shell { padding: 10px; }
  .brand-mark { width: 42px; height: 42px; font-size: 22px; }
  h1 { font-size: 21px; }
  .clock { font-size: 21px; }
  .today-label { display: none; }
  .calendar-grid { grid-template-columns: 1fr; }
  .day-events { min-height: 0; }
  .add-item-form { grid-template-columns: 1fr 90px; }
  .category-field { grid-column: 1 / -1; }
  .add-button { grid-column: 1 / -1; }
  .shopping-category-select { max-width: 100%; }
  .calendar-form { grid-template-columns: 1fr; }
  .page-heading { align-items: center; }
  .calendar-actions { gap: 5px; }
  .calendar-actions .button { padding-left: 9px; padding-right: 9px; }
  .event-form-grid { grid-template-columns: 1fr; }
  .event-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .event-form-right { width: 100%; margin-left: 0; }
  .event-form-right .button, #deleteEvent { flex: 1; }
  .shopping-heading { align-items: flex-start; }
  .tab { padding-left: 6px; padding-right: 6px; }
}

@media (prefers-color-scheme: dark) {
  :root {
  --brand-navy: #25334A;
  --brand-purple: #7F7099;
  --brand-deep-navy: #101D35;
  --brand-mist: #F3F1F6;
    --bg: #111a21; --panel: #1d2831; --panel-2: #25323c; --text: #f3f6f8; --muted: #bac6cd; --line: #465762;
    --accent: #79b7e4; --accent-2: #9bc9eb; --accent-soft: #293d4c; --tab-bg: #24313a; --field-line: #526671; --focus-ring: rgba(121,183,228,.32);
    --on-accent: #10202b; --field-bg: #152029; --event-bg: #283640; --task-event-bg: #463b23; --danger: #ffaaaa; --danger-bg: #2b2023;
    --ad-bg: rgba(29,40,49,.65); --day-track-bg: rgba(29,40,49,.42); --today-track-bg: rgba(121,183,228,.09); --all-day-bg: rgba(121,183,228,.13); --shadow: none;
  }
  html[data-colour-scheme="ocean"] {
    --bg:#0e1a1d; --panel:#17272b; --panel-2:#20353a; --text:#f1f8f9; --muted:#b7cbd0; --line:#40575d;
    --accent:#6cc7da; --accent-2:#95d8e6; --accent-soft:#223f46; --tab-bg:#1c3035; --field-line:#557079; --focus-ring:rgba(108,199,218,.34); --on-accent:#0b252c;
    --field-bg:#122226; --event-bg:#21343a; --task-event-bg:#433b25; --danger:#ffaaaa; --danger-bg:#2b2023; --day-track-bg:rgba(23,39,43,.48); --today-track-bg:rgba(108,199,218,.09); --all-day-bg:rgba(108,199,218,.14);
  }
  html[data-colour-scheme="forest"] {
    --bg:#121b15; --panel:#1c2a20; --panel-2:#26382b; --text:#f2f8f3; --muted:#bdccbf; --line:#475c4c;
    --accent:#8bc89e; --accent-2:#add9ba; --accent-soft:#2a4332; --tab-bg:#223327; --field-line:#5b705f; --focus-ring:rgba(139,200,158,.34); --on-accent:#112719;
    --field-bg:#17231a; --event-bg:#26362a; --task-event-bg:#443c23; --danger:#ffaaaa; --danger-bg:#2b2023; --day-track-bg:rgba(28,42,32,.48); --today-track-bg:rgba(139,200,158,.09); --all-day-bg:rgba(139,200,158,.14);
  }
  html[data-colour-scheme="plum"] {
    --bg:#1a151c; --panel:#291f2d; --panel-2:#372a3c; --text:#faf4fb; --muted:#d0bfd3; --line:#5b485f;
    --accent:#c6a0cf; --accent-2:#dfbce6; --accent-soft:#45324b; --tab-bg:#312538; --field-line:#705a76; --focus-ring:rgba(198,160,207,.34); --on-accent:#2c1731;
    --field-bg:#221a26; --event-bg:#34283a; --task-event-bg:#493b29; --danger:#ffaaaa; --danger-bg:#2b2023; --day-track-bg:rgba(41,31,45,.48); --today-track-bg:rgba(198,160,207,.09); --all-day-bg:rgba(198,160,207,.14);
  }
  html[data-colour-scheme="sunset"] {
    --bg:#1e1712; --panel:#30241c; --panel-2:#403027; --text:#fbf5ef; --muted:#d3c0b1; --line:#624d3f;
    --accent:#e1a36d; --accent-2:#efbd92; --accent-soft:#4c3728; --tab-bg:#382a21; --field-line:#7a604d; --focus-ring:rgba(225,163,109,.34); --on-accent:#351d0b;
    --field-bg:#281e18; --event-bg:#3b2d25; --task-event-bg:#4a3b24; --danger:#ffaaaa; --danger-bg:#2b2023; --day-track-bg:rgba(48,36,28,.48); --today-track-bg:rgba(225,163,109,.09); --all-day-bg:rgba(225,163,109,.14);
  }
  html[data-colour-scheme="slate"] {
    --bg:#15191c; --panel:#22292e; --panel-2:#2d373e; --text:#f4f7f8; --muted:#c0cbd1; --line:#4c5961;
    --accent:#b2c3cd; --accent-2:#cedae0; --accent-soft:#39454d; --tab-bg:#293238; --field-line:#627079; --focus-ring:rgba(178,195,205,.34); --on-accent:#172127;
    --field-bg:#1b2227; --event-bg:#2b353b; --task-event-bg:#443b27; --danger:#ffaaaa; --danger-bg:#2b2023; --day-track-bg:rgba(34,41,46,.48); --today-track-bg:rgba(178,195,205,.09); --all-day-bg:rgba(178,195,205,.14);
  }
  .tabs { background: var(--tab-bg); }
  .field input, .field select, .field textarea { background: var(--field-bg); color: var(--text); border-color: var(--field-line); }
  .event { background: var(--event-bg); }
  .today .day-head { background: var(--accent-soft); }
  .button.secondary, .button.danger { background: var(--panel); }
  .ad-slot { background: var(--ad-bg); }
}


/* Calendar Library */
.calendars-card { grid-column: 1 / -1; }
.calendar-library-header, .manual-calendar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; }
.calendar-library-header h4, .manual-calendar-header h4 { margin: 0 0 3px; font-size: 15px; }
.manual-calendar-header { display: block; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.calendar-library[hidden] { display: none !important; }
.calendar-library { margin-top: 10px; padding: 10px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px; }
.calendar-library-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 8px; align-items: end; margin-bottom: 9px; }
.calendar-library-toolbar .field { margin-top: 0; }
.calendar-library-items { display: grid; gap: 7px; }
.calendar-library-item { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 9px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px; }
.calendar-library-item.is-added { opacity: .82; }
.library-dot { width: 13px; height: 13px; border-radius: 50%; align-self: start; margin-top: 5px; }
.library-copy { min-width: 0; }
.library-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.library-category { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; }
.library-provider { font-weight: 700; text-transform: none; letter-spacing: 0; }
.library-search-status { margin: 5px 2px 0; }
.library-description { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.library-add { min-width: 72px; }
.library-note { margin: 9px 0 0; }
.library-empty { margin: 8px 2px; }
.tiny { font-size: 11px; }

@media (max-width: 720px) {
  .calendars-card { grid-column: auto; }
  .calendar-library-header { align-items: center; }
  .calendar-library-toolbar { grid-template-columns: 1fr; }
  .calendar-library-item { grid-template-columns: 14px minmax(0,1fr); }
  .calendar-library-item .library-add { grid-column: 2; justify-self: start; min-width: 92px; }
}


/* Optional modules */
.module-shopping[hidden],
.module-tasks[hidden],
.module-saved[hidden],
.module-chores[hidden] { display: none !important; }
.settings-divider { height: 1px; background: var(--line); margin: 14px 0 12px; }
.settings-subheading { margin: 0; font-size: 15px; }
.task-filters { display: flex; gap: 6px; width: fit-content; max-width: 100%; padding: 4px; border-radius: 10px; background: var(--tab-bg); margin-bottom: 5px; }
.task-filter { min-height: 38px; border: 0; border-radius: 7px; padding: 6px 14px; background: transparent; color: var(--text); font-weight: 800; }
.task-filter.is-active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }
.task-filter-help { margin: 0 0 10px 2px; }
.task-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.task-item { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 66px; padding: 6px 7px; box-shadow: var(--shadow); }
.task-item.is-overdue { border-left: 4px solid #b24848; }
.task-check { width: 44px; height: 44px; margin: 0; accent-color: var(--accent-2); }
.task-main { width: 100%; min-height: 52px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; padding: 5px 4px; }
.task-main:active { background: var(--panel-2); }
.task-name { font-weight: 800; font-size: 17px; overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 12px; margin-top: 4px; }
.task-notes-preview { color: var(--muted); font-size: 12px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-item.done .task-name { text-decoration: line-through; color: var(--muted); }
.task-due.overdue { color: #a13636; font-weight: 800; }
.task-repeat { font-weight: 750; }
.task-calendar-event .event-title { font-weight: 850; }

@media (max-width: 650px) {
  .tasks-heading { align-items: flex-start; }
  .task-filters { width: 100%; }
  .task-filter { flex: 1; padding-left: 7px; padding-right: 7px; }
}

@media (prefers-color-scheme: dark) {
  .task-filters { background: #24313a; }
}


/* Countdown module */
.module-countdowns[hidden] { display: none !important; }
.home-countdown-section { margin: 0 0 12px; }
.home-countdowns { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 10px; overflow: hidden; padding: 0; }
.home-countdown-panel { flex: 0 1 calc((100% - 20px) / 3); width: calc((100% - 20px) / 3); max-width: 360px; min-width: 0; height: 166px; border: 1px solid var(--line); border-left: 4px solid #8d5d9f; background: var(--panel); color: var(--text); border-radius: 10px; padding: 8px 9px 9px; box-shadow: var(--shadow); overflow: hidden; }
.home-countdown-panel-title { height: 20px; display: flex; align-items: center; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-countdown-panel-items { height: 137px; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.home-countdown-panel-item { width: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 2px 1px; text-align: left; }
.home-countdown-panel-item:last-child { border-bottom: 0; }
.home-countdown-panel-item:active { background: rgba(45, 109, 163, .08); }
.home-countdown-panel-event { min-width: 0; display: block; }
.home-countdown-panel-event-title { display: block; min-width: 0; font-size: 12px; line-height: 1.05; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-countdown-panel-event-date { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-countdown-panel-remaining { color: #734783; font-size: 14px; line-height: 1; font-weight: 900; white-space: nowrap; }
.home-countdowns[data-list-count="1"] .home-countdown-panel,
.home-countdowns[data-list-count="2"] .home-countdown-panel { flex-grow: 0; }
.countdown-list-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.countdown-list-tab { min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); padding: 7px 14px; font-weight: 800; }
.countdown-list-tab.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.countdown-items { display: grid; gap: 8px; }
.countdown-item { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); padding: 11px 12px; text-align: left; box-shadow: var(--shadow); }
.countdown-title { font-size: 17px; font-weight: 850; overflow-wrap: anywhere; }
.countdown-target { margin-top: 4px; color: var(--muted); font-size: 12px; }
.countdown-remaining { font-size: 18px; font-weight: 900; color: #734783; white-space: nowrap; }
.countdown-home-limit-settings { display: grid; gap: 7px; margin-top: 6px; }
.countdown-home-limit-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,auto); gap: 10px; align-items: center; }
.countdown-home-limit-name { min-width: 0; font-weight: 750; overflow-wrap: anywhere; }
.countdown-home-limit-row select { width: 100%; min-width: 145px; }
.countdown-list-manager { display: grid; gap: 8px; margin: 12px 0; }
.countdown-list-row { display: grid; grid-template-columns: minmax(0,1fr) auto 44px; gap: 7px; align-items: center; }
.countdown-list-row input { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--text); font-size: 16px; }
.countdown-list-create { border-top: 1px solid var(--line); padding-top: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
.countdown-list-create .field { margin: 0; }
@media (max-width: 800px) {
  .home-countdowns { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 3px; }
  .home-countdown-panel { flex: 0 0 min(82%, 300px); width: min(82%, 300px); scroll-snap-align: center; }
  .home-countdowns[data-list-count="1"] { justify-content: center; }
}
@media (max-width: 650px) { .countdown-heading { align-items: flex-start; } .countdown-list-create { grid-template-columns: 1fr; } .countdown-item { grid-template-columns: minmax(0,1fr); } .countdown-remaining { justify-self: start; } .countdown-home-limit-row { grid-template-columns: 1fr; gap: 4px; } .countdown-home-limit-row select { min-width: 0; } }
@media (prefers-color-scheme: dark) { .home-countdown-panel-remaining, .countdown-remaining { color: #d1a7df; } }


/* Recipes & saved links module */
.saved-list-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.saved-list-tab { min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); padding: 7px 14px; font-weight: 800; }
.saved-list-tab.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.saved-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.saved-item { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); padding: 11px 12px; box-shadow: var(--shadow); }
.saved-copy { min-width: 0; }
.saved-title { font-size: 16px; line-height: 1.2; font-weight: 850; overflow-wrap: anywhere; }
.saved-host { margin-top: 3px; color: var(--accent); font-size: 11px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-notes-preview { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saved-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.saved-actions .button { min-width: 74px; }
.saved-open { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 800px) { .saved-items { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .saved-heading { align-items: flex-start; } .saved-item { grid-template-columns: minmax(0,1fr); } .saved-actions { flex-direction: row; } }


/* Dedicated YouTube Home shortcut */
.youtube-home-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; background: var(--panel); color: var(--text); border: 1px solid var(--line); white-space: nowrap; max-width: 220px; }
.youtube-home-link[hidden] { display: none !important; }
.youtube-home-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-home-link:hover, .youtube-home-link:focus-visible { border-color: var(--accent); }
.youtube-home-mark { width: 24px; height: 16px; border-radius: 5px; background: #ff0000; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.youtube-home-triangle { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #fff; margin-left: 2px; }
@media (max-width: 650px) { .youtube-home-link { padding-left: 9px; padding-right: 9px; } .youtube-home-mark { width: 22px; height: 15px; } }


/* Reward charts / chores */
.settings-module-countdowns[hidden], .settings-module-chores[hidden], .settings-module-shopping[hidden], .settings-module-tasks[hidden], .settings-module-saved[hidden], .settings-module-meals[hidden], .settings-module-photos[hidden] { display: none !important; }
.settings-divider { height: 1px; background: var(--line); margin: 15px 0; }
.settings-subheading { margin: 0 0 6px; font-size: 15px; }
.settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.settings-section-heading p { margin: 4px 0 0; }
.chore-settings-card { grid-column: 1 / -1; }
.chore-settings-actions { align-items: center; }
.chore-people-manager { display: grid; gap: 10px; margin: 12px 0; }
.chore-person-settings-row { border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); padding: 10px; }
.chore-person-settings-grid { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1.2fr) 120px auto; gap: 8px; align-items: end; }
.chore-person-settings-grid .field { margin: 0; }
.chore-person-settings-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.chore-person-settings-meta .switch-row { min-height: 36px; margin: 0; }
.chore-person-earned { font-size: 13px; font-weight: 850; color: #8b6200; }
.chore-person-settings-actions { margin-left: auto; display: flex; gap: 6px; }
.chore-person-create { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(170px, 1.2fr) 120px auto; gap: 8px; align-items: end; padding-top: 10px; border-top: 1px solid var(--line); }
.chore-person-create .field { margin: 0; }
.chore-settings-list { display: grid; gap: 7px; margin-top: 10px; }
.chore-settings-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); padding: 8px 9px; }
.chore-settings-title { min-width: 0; font-weight: 850; overflow-wrap: anywhere; }
.chore-settings-meta { margin-top: 2px; color: var(--muted); font-size: 12px; }
.chore-settings-stars { white-space: nowrap; font-weight: 900; color: #8b6200; }

.kid-chart-page { --kid-purple: #6d49bd; --kid-yellow: #ffc943; --kid-green: #37a948; --kid-blue: #4e9bd8; --kid-pink: #e66b98; }
.kid-chart-shell { border-radius: 20px; padding: 11px; background: linear-gradient(140deg, #31206d 0%, #4b2f91 52%, #233e8c 100%); box-shadow: 0 8px 24px rgba(26, 20, 74, .18); overflow: hidden; position: relative; }
.kid-chart-shell::before { content: "★  ·  ✦  ·  ★  ·  ✧  ·  ★"; position: absolute; top: 8px; right: 18px; color: rgba(255,255,255,.18); letter-spacing: 8px; pointer-events: none; }
.kid-chart-banner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff; padding: 2px 5px 9px; position: relative; z-index: 1; }
.kid-chart-title-wrap { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kid-star-mascot { width: 54px; height: 54px; border-radius: 18px; background: #ffd54f; color: #7b4f00; display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; transform: rotate(-6deg); box-shadow: 0 4px 0 rgba(86,51,0,.25); text-shadow: 0 1px #fff2a2; }
.kid-chart-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #e9ddff; }
.kid-chart-banner h2 { margin-top: 1px; font-size: 30px; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.16); }
.kid-chart-status { margin: 4px 0 0; font-size: 10px; color: #d8cdf4; }
.chore-chart-tabs { min-width: 0; display: flex; justify-content: flex-end; gap: 7px; overflow-x: auto; padding: 3px 1px; -webkit-overflow-scrolling: touch; }
.chore-chart-tab { min-width: 118px; min-height: 54px; border: 2px solid rgba(255,255,255,.34); border-radius: 14px; padding: 5px 10px; background: rgba(255,255,255,.12); color: #fff; text-align: left; box-shadow: none; }
.chore-chart-tab.is-active { background: #fff; color: #4d328e; border-color: #fff; box-shadow: 0 4px 0 rgba(22,13,62,.18); }
.chore-chart-tab-name { display: block; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chore-chart-tab-stars { display: block; margin-top: 1px; font-size: 12px; font-weight: 850; color: #ffcf38; }
.chore-chart-tab.is-active .chore-chart-tab-stars { color: #a26d00; }
.chore-chart-content { display: grid; gap: 9px; }
.chore-chart-content[hidden], .kid-panel-empty[hidden] { display: none !important; }
.kid-progress-card { min-height: 94px; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 12px; border-radius: 16px; background: linear-gradient(100deg,#fff8d7,#fff 55%,#f7f1ff); border: 3px solid #ffd864; padding: 9px 13px; color: #2a2552; box-shadow: 0 4px 0 rgba(22,13,62,.18); }
.kid-person-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #8b65d0; color: #fff; border: 4px solid #fff; box-shadow: 0 0 0 3px #d8c8ff; font-size: 27px; font-weight: 950; }
.kid-progress-copy { min-width: 0; }
.kid-progress-name { font-size: 22px; line-height: 1.05; font-weight: 950; color: #5b3ba4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-progress-reward { margin-top: 3px; font-size: 12px; font-weight: 800; color: #5a5574; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-progress-track { height: 14px; border-radius: 999px; background: #ece7f4; overflow: hidden; margin-top: 7px; border: 1px solid #d5cee5; }
.kid-progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,#ffc832,#ff9e42); transition: width .25s ease; }
.kid-progress-caption { margin-top: 3px; font-size: 10px; color: #69627c; font-weight: 800; }
.kid-star-total { min-width: 104px; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 0 5px; padding: 5px 10px; border-radius: 14px; background: #f7e8ff; color: #7142a9; text-align: center; }
.kid-star-total-icon { grid-row: 1 / 3; font-size: 29px; color: #ffc627; text-shadow: 0 2px #b27b00; }
.kid-star-total strong { font-size: 28px; line-height: 1; }
.kid-star-total span:last-child { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.kid-progress-card.reward-ready { background: linear-gradient(100deg,#fff7b9,#fff4d7 56%,#ffe7ad); border-color: #ffbd22; }
.kid-progress-card.reward-ready .kid-progress-reward::after { content: "  🎉 Reward ready!"; color: #a04f00; font-weight: 950; }
.kid-chore-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 9px; min-height: 274px; }
.kid-chore-panel { min-width: 0; border-radius: 16px; background: #fffdf7; border: 2px solid rgba(255,255,255,.72); padding: 9px; color: #2e3154; box-shadow: 0 3px 0 rgba(22,13,62,.16); }
.kid-panel-heading { display: flex; align-items: center; gap: 7px; min-height: 28px; margin-bottom: 6px; }
.kid-panel-heading span { font-size: 20px; }
.kid-panel-heading h3 { font-size: 19px; color: #31265c; }
.kid-chore-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(142px, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.kid-chore-card { min-width: 0; height: 217px; display: flex; flex-direction: column; align-items: stretch; border-radius: 14px; border: 2px solid #cce5bf; background: linear-gradient(#effbe9,#fff); padding: 8px; text-align: center; scroll-snap-align: start; }
.kid-chore-card:nth-child(4n+2) { border-color: #ffe098; background: linear-gradient(#fff7db,#fff); }
.kid-chore-card:nth-child(4n+3) { border-color: #d7c6ff; background: linear-gradient(#f4efff,#fff); }
.kid-chore-card:nth-child(4n) { border-color: #bcdff7; background: linear-gradient(#edf8ff,#fff); }
.kid-chore-icon { font-size: 42px; line-height: 1; margin: 1px 0 5px; }
.kid-chore-name { min-height: 38px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1.08; font-weight: 950; color: #2c3b35; }
.kid-chore-due { min-height: 18px; margin-top: 2px; font-size: 10px; font-weight: 800; color: #6c7180; }
.kid-chore-due.overdue { color: #a63434; }
.kid-chore-stars { margin-top: auto; border-radius: 9px; padding: 5px; background: rgba(255,199,39,.14); color: #8a5b00; font-size: 13px; font-weight: 950; }
.kid-chore-done { width: 100%; min-height: 43px; margin-top: 6px; border: 0; border-radius: 11px; background: linear-gradient(#4bc65b,#2ea33e); color: #fff; font-size: 24px; font-weight: 950; box-shadow: 0 3px 0 #1e792c; }
.kid-chore-done:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e792c; }
.kid-upcoming-list { display: grid; gap: 6px; }
.kid-upcoming-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 6px; min-height: 48px; border-radius: 10px; background: #f7f6ff; border: 1px solid #e0dcf0; padding: 5px 6px; }
.kid-upcoming-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #e9f3ff; font-size: 20px; }
.kid-upcoming-name { min-width: 0; font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-upcoming-date { margin-top: 1px; font-size: 9px; color: #68677a; }
.kid-upcoming-stars { font-size: 11px; font-weight: 950; color: #8c5e00; white-space: nowrap; }
.kid-encouragement { margin-top: 8px; border-radius: 10px; padding: 7px 8px; background: #4a2d89; color: #fff; text-align: center; font-size: 11px; font-weight: 900; }
.kid-panel-empty { min-height: 140px; display: flex; align-items: center; justify-content: center; text-align: center; color: #6d6c80; font-size: 13px; font-weight: 800; padding: 16px; }
.kid-chart-empty { min-height: 330px; border-radius: 16px; background: #fffdf7; color: #514a6b; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.kid-chart-empty[hidden] { display: none !important; }
.kid-chart-empty h3 { color: #4d328e; margin-top: 8px; }
.kid-chart-empty p { max-width: 460px; margin: 6px 0 0; }
.kid-empty-star { width: 70px; height: 70px; border-radius: 23px; background: #ffd54f; color: #8b5e00; display: flex; align-items: center; justify-content: center; font-size: 46px; transform: rotate(-5deg); }
.kid-settings-note { margin: 7px 2px 0; color: #ddd3f8; font-size: 10px; text-align: center; }

@media (max-width: 900px) {
  .chore-person-settings-grid, .chore-person-create { grid-template-columns: 1fr 1fr; }
  .chore-person-settings-actions { margin-left: 0; }
  .kid-chart-banner { align-items: flex-start; }
  .chore-chart-tabs { justify-content: flex-start; }
  .kid-chore-layout { grid-template-columns: minmax(0, 2.3fr) minmax(190px, 1fr); }
  .kid-chore-cards { grid-template-columns: repeat(3, minmax(138px,1fr)); }
}
@media (max-width: 650px) {
  .chore-settings-card { grid-column: auto; }
  .chore-person-settings-grid, .chore-person-create { grid-template-columns: 1fr; }
  .settings-section-heading, .chore-settings-actions { flex-direction: column; align-items: stretch; }
  .kid-chart-shell { border-radius: 14px; padding: 8px; }
  .kid-chart-banner { display: block; }
  .kid-chart-title-wrap { margin-bottom: 7px; }
  .kid-star-mascot { width: 44px; height: 44px; font-size: 29px; }
  .kid-chart-banner h2 { font-size: 25px; }
  .chore-chart-tab { min-width: 104px; }
  .kid-progress-card { grid-template-columns: 48px minmax(0,1fr); }
  .kid-person-avatar { width: 46px; height: 46px; font-size: 21px; }
  .kid-star-total { grid-column: 1 / -1; min-width: 0; grid-template-columns: auto auto auto; justify-content: center; gap: 5px; }
  .kid-star-total-icon { grid-row: auto; font-size: 22px; }
  .kid-star-total strong { font-size: 23px; }
  .kid-chore-layout { grid-template-columns: 1fr; }
  .kid-chore-cards { grid-template-columns: none; grid-auto-columns: minmax(145px, 72%); }
}
@media (prefers-color-scheme: dark) {
  .chore-person-earned, .chore-settings-stars { color: #f0c85a; }
  .kid-chart-page { color-scheme: light; }
}



/* Digital photo frame + shared photo backgrounds */
.module-photos[hidden] { display: none !important; }
.photo-frame-actions { display: flex; gap: 7px; }
.photo-frame-actions #photoPrev, .photo-frame-actions #photoNext { min-width: 48px; font-size: 24px; line-height: 1; }
.photo-frame-stage { position: relative; width: 100%; height: calc(100vh - 185px); min-height: 430px; overflow: hidden; border-radius: 16px; background: #0d1115; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.photo-frame-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-frame-image[hidden] { display: none !important; }
.photo-frame-empty { text-align: center; color: #c7d0d6; padding: 30px; }
.photo-frame-empty h3 { color: #fff; margin-top: 8px; }
.photo-frame-empty p { margin: 6px 0 0; }
.photo-frame-empty-icon { width: 68px; height: 56px; margin: 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #26333d; color: #fff; font-size: 34px; }
.photo-frame-overlay { position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 10px; padding: 9px 12px; color: #fff; background: rgba(5,10,14,.62); backdrop-filter: blur(7px); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.photo-frame-overlay[hidden] { display: none !important; }
.photo-frame-overlay strong { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-frame-overlay span { flex: 0 0 auto; color: #d9e2e8; font-size: 12px; }
.photo-settings-card { grid-column: 1 / -1; }
.photo-album-manager { display: grid; gap: 8px; margin: 10px 0; }
.photo-album-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; align-items: center; }
.photo-album-row input { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--panel); color: var(--text); padding: 8px 10px; font-size: 16px; }
.photo-album-create { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
.photo-album-create .field { margin: 0; }
.photo-settings-grid { display: grid; grid-template-columns: minmax(160px,1fr) minmax(150px,.8fr) minmax(170px,.8fr); gap: 10px; align-items: end; }
.photo-settings-grid .field { margin-top: 0; }
.photo-shuffle-row { margin: 0; align-self: end; }
.photo-upload-form { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(220px,1.2fr) minmax(180px,1fr) auto; gap: 8px; align-items: end; }
.photo-upload-form .field { margin: 0; }
.photo-file-field input { padding-top: 7px; padding-bottom: 7px; }

.module-background-controls { display: grid; gap: 12px; }
.module-background-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.module-background-grid[hidden], #sharedBackgroundSettings[hidden] { display: none !important; }
@media (max-width: 680px) { .module-background-grid { grid-template-columns: 1fr; } }
.photo-library { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.photo-library-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 6px; }
.photo-thumb-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 7px; background: #1b252c; display: flex; align-items: center; justify-content: center; }
.photo-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb-badge { position: absolute; top: 5px; left: 5px; border-radius: 999px; padding: 3px 6px; background: rgba(15,35,52,.82); color: #fff; font-size: 9px; font-weight: 850; }
.photo-library-caption { min-width: 0; margin-top: 6px; font-size: 11px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-library-album { color: var(--muted); font-size: 9px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-library-actions { display: grid; grid-template-columns: 1fr auto; gap: 5px; margin-top: 6px; }
.photo-library-actions .button { min-height: 36px; padding: 5px 7px; font-size: 10px; }
.photo-background-active { background-image: linear-gradient(rgba(237,242,245,.70),rgba(237,242,245,.70)), var(--homeboard-photo-bg); background-size: cover; background-position: center; background-attachment: fixed; }
.photo-background-active { --panel: rgba(255,255,255,.90); --panel-2: rgba(247,249,250,.86); }
.photo-background-active .topbar, .photo-background-active .tabs { border-radius: 12px; backdrop-filter: blur(10px); }
.photo-background-active .topbar { padding: 7px 9px; background: rgba(237,242,245,.72); }
@media (prefers-color-scheme: dark) {
  .photo-background-active { background-image: linear-gradient(rgba(10,17,23,.62),rgba(10,17,23,.62)), var(--homeboard-photo-bg); --panel: rgba(29,40,49,.88); --panel-2: rgba(37,50,60,.84); }
  .photo-background-active .topbar { background: rgba(17,26,33,.68); }
}
@media (max-width: 1000px) { .photo-library { grid-template-columns: repeat(4,minmax(0,1fr)); } .photo-upload-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) {
  .photo-heading { align-items: flex-start; }
  .photo-frame-stage { height: 62vh; min-height: 320px; }
  .photo-settings-card { grid-column: auto; }
  .photo-album-create, .photo-album-row, .photo-settings-grid, .photo-upload-form { grid-template-columns: 1fr; }
  .photo-library { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-library-actions { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { flex: 0 0 auto; min-width: 92px; }
}

/* Photo frame fullscreen mode: fit the complete image above the reserved advert strip without cropping. */
html.photo-frame-mode, body.photo-frame-mode { height: 100%; overflow: hidden; overscroll-behavior: none; background: #000; }
body.photo-frame-mode .app-shell { position: relative; width: 100%; max-width: none; height: 100vh; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: #000; }
body.photo-frame-mode .page-stage { position: absolute; inset: 0 0 66px 0; overflow: hidden; }
body.photo-frame-mode .photos-page.is-active { position: absolute; inset: 0; display: block; overflow: hidden; }
body.photo-frame-mode .photo-frame-stage { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #000; overflow: hidden; touch-action: pan-x; }
body.photo-frame-mode .photo-frame-image { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #000; }
body.photo-frame-mode .photo-frame-overlay { bottom: 12px; left: 12px; right: 12px; max-width: min(640px, calc(100% - 24px)); margin-right: auto; }
body.photo-frame-mode .ad-slot { position: absolute; z-index: 40; left: 12px; right: 12px; bottom: 8px; height: 50px; min-height: 50px; margin: 0; padding: 6px 12px; background: rgba(15,24,31,.94); border-color: rgba(255,255,255,.45); color: #d9e2e8; }
body.photo-frame-mode .ad-slot .ad-label { color: #d9e2e8; }
body.photo-frame-mode .topbar,
body.photo-frame-mode .tabs,
body.photo-frame-mode .photo-heading { position: absolute; z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s ease; background: rgba(17,26,33,.82); color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 20px rgba(0,0,0,.24); backdrop-filter: blur(10px); }
body.photo-frame-mode .topbar { top: 12px; left: 16px; right: 16px; margin: 0; padding: 7px 9px; border-radius: 12px; }
body.photo-frame-mode .topbar .tagline, body.photo-frame-mode .topbar .today-label { color: #d7e1e8; }
body.photo-frame-mode .tabs { top: 76px; left: 16px; right: 16px; margin: 0; }
body.photo-frame-mode .tabs .tab { color: #eef4f8; }
body.photo-frame-mode .tabs .tab.is-active { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
body.photo-frame-mode .photo-heading { top: 136px; left: 16px; right: 16px; margin: 0; padding: 8px 10px; border-radius: 12px; align-items: center; }
body.photo-frame-mode .photo-heading .muted { color: #d7e1e8; }
body.photo-frame-mode.photo-controls-visible .topbar,
body.photo-frame-mode.photo-controls-visible .tabs,
body.photo-frame-mode.photo-controls-visible .photo-heading { opacity: 1; pointer-events: auto; }
body.photo-frame-mode .toast { position: fixed; bottom: 74px; }
@media (max-width: 700px) {
  body.photo-frame-mode .tabs { overflow-x: auto; }
  body.photo-frame-mode .tab { flex: 0 0 auto; min-width: 110px; }
  body.photo-frame-mode .photo-heading { top: 136px; }
}

/* Meal planner + photo recipes */
.module-meals[hidden] { display: none !important; }
.recipe-library-section { margin-top: 4px; }
.recipe-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin: 4px 0 10px; }
.recipe-section-heading h3 { margin:0; }
.recipe-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.recipe-card { min-width:0; display:grid; grid-template-columns:minmax(88px,.55fr) minmax(0,1.25fr); border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.recipe-card.no-image { grid-template-columns:1fr; }
.recipe-card-image-wrap { min-height:135px; background:#172129; }
.recipe-card-image { width:100%; height:100%; object-fit:cover; display:block; }
.recipe-card-body { min-width:0; padding:11px; display:flex; flex-direction:column; gap:5px; }
.recipe-card-body h4 { margin:0; font-size:16px; }
.recipe-ingredient-preview { color:var(--text); font-size:11px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.recipe-card-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; }
.recipe-modal { width:min(760px,calc(100vw - 24px)); max-height:min(90vh,850px); overflow:auto; }
.recipe-photo-preview-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.recipe-photo-preview { width:100%; max-height:260px; object-fit:contain; background:#111820; border-radius:8px; }
.recipe-link-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.recipe-link-entry input { min-width:0; width:100%; }
.recipe-link-entry .button { white-space:nowrap; }
@media (max-width:520px) { .recipe-link-entry { grid-template-columns:1fr; } .recipe-link-entry .button { width:100%; } }
.recipe-scan-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.recipe-scan-row .button { flex:0 0 auto; }
.recipe-scan-row .muted { flex:1 1 220px; line-height:1.35; }
.recipe-scan-review { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; padding:9px 10px; border-radius:10px; border:1px solid rgba(127,112,153,.45); background:rgba(127,112,153,.12); }
.recipe-scan-review[hidden] { display:none !important; }
.recipe-scan-review strong { color:var(--text); }
.recipe-scan-review span { color:var(--muted); }
.recipe-ingredients-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-top:4px; }
.recipe-ingredients-heading h4 { margin:0; }
.recipe-ingredient-rows { display:grid; gap:7px; }
.recipe-ingredient-row { display:grid; grid-template-columns:minmax(150px,1fr) 90px 105px 44px; gap:7px; align-items:center; }
.recipe-ingredient-row input, .recipe-ingredient-row select { min-width:0; min-height:44px; border:1px solid var(--field-line); border-radius:8px; background:var(--panel); color:var(--text); padding:8px 9px; font-size:16px; }
.ingredient-name-cell { position:relative; min-width:0; }
.ingredient-name-cell .ingredient-name { width:100%; }
.ingredient-suggestions { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; max-height:260px; overflow:auto; border:1px solid #aebdc7; border-radius:10px; background:var(--panel); box-shadow:0 12px 28px rgba(0,0,0,.22); padding:4px; }
.ingredient-suggestions[hidden] { display:none !important; }
.ingredient-suggestion { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; border-radius:7px; background:transparent; color:var(--text); padding:8px 9px; text-align:left; cursor:pointer; }
.ingredient-suggestion:hover, .ingredient-suggestion:focus { background:var(--panel-2); outline:none; }
.ingredient-suggestion-name { min-width:0; font-size:15px; font-weight:800; overflow-wrap:anywhere; }
.ingredient-suggestion-usage { flex:0 0 auto; font-size:10px; color:var(--muted); white-space:nowrap; }
.meals-heading .calendar-actions { flex-wrap:wrap; }
.meal-week-label { margin:-2px 0 10px; font-size:14px; font-weight:800; color:var(--muted); }
.meal-week-grid { display:grid; grid-template-columns:repeat(7,minmax(116px,1fr)); gap:8px; }
.meal-day-card { min-width:0; border:1px solid var(--line); border-radius:13px; padding:8px; background:var(--panel); box-shadow:var(--shadow); }
.meal-day-card.is-today { outline:2px solid rgba(45,109,163,.45); outline-offset:-1px; }
.meal-day-heading { display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding:2px 2px 8px; border-bottom:1px solid var(--line); }
.meal-day-heading strong { font-size:15px; }
.meal-day-heading span { font-size:10px; color:var(--muted); }
.meal-slot { width:100%; min-height:72px; margin-top:7px; padding:8px; border:1px dashed var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); text-align:left; display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.meal-slot.has-meal { border-style:solid; }
.meal-slot-label { font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }
.meal-slot-title { font-size:13px; line-height:1.25; font-weight:800; overflow-wrap:anywhere; }
.meal-recipe-badge { align-self:flex-start; border-radius:999px; padding:2px 5px; background:rgba(45,109,163,.13); color:#245f8d; font-size:8px; font-weight:900; text-transform:uppercase; }
.meal-help { margin-top:10px; }
@media (max-width: 1000px) {
  .recipe-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .meal-week-grid { overflow-x:auto; grid-template-columns:repeat(7,minmax(135px,1fr)); padding-bottom:6px; }
}
@media (max-width:650px) {
  .recipe-section-heading, .recipe-ingredients-heading { align-items:stretch; flex-direction:column; }
  .recipe-cards { grid-template-columns:1fr; }
  .recipe-ingredient-row { grid-template-columns:minmax(0,1fr) 78px 90px 44px; gap:5px; }
  .recipe-card { grid-template-columns:100px minmax(0,1fr); }
  .recipe-photo-preview-wrap { grid-template-columns:1fr; }
  .meal-week-grid { display:grid; grid-template-columns:repeat(7,minmax(142px,74vw)); overflow-x:auto; }
}

/* Whole-app polish pass v1 — layout only; no feature behaviour changes. */
.app-shell { padding: 12px 14px 14px; }
.topbar { min-height: 48px; margin-bottom: 8px; gap: 12px; }
.brand-wrap { gap: 10px; }
.brand-mark { width: 44px; height: 44px; border-radius: 11px; padding: 3px; }
h1 { font-size: 23px; }
.tagline { font-size: 12px; margin-top: 2px; }
.clock { font-size: 23px; }
.today-label { font-size: 12px; margin-top: 2px; }

.tabs { gap: 4px; padding: 4px; margin-bottom: 9px; border-radius: 11px; }
.tab { min-width: 0; min-height: 42px; padding: 7px 6px; border-radius: 8px; font-size: 14px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.page-heading { min-height: 47px; align-items: center; margin: 2px 2px 9px; gap: 10px; }
.page-heading h2 { line-height: 1.05; }
.page-heading p { margin-top: 3px; }
.calendar-actions { align-items: center; flex-wrap: nowrap; gap: 6px; }
.button.compact { min-height: 38px; padding: 6px 11px; }

/* Keep photo backgrounds decorative rather than competing with information. */
.photo-background-active { background-image: linear-gradient(rgba(237,242,245,.78),rgba(237,242,245,.78)), var(--homeboard-photo-bg); }
.photo-background-active { --panel: rgba(255,255,255,.94); --panel-2: rgba(247,249,250,.91); }
.photo-background-active .topbar,
.photo-background-active .tabs { background-color: var(--panel-2); }
.photo-background-active .day-column,
.photo-background-active .home-countdown-panel { backdrop-filter: blur(3px); }

@media (prefers-color-scheme: dark) {
  .photo-background-active { background-image: linear-gradient(rgba(10,17,23,.73),rgba(10,17,23,.73)), var(--homeboard-photo-bg); --panel: rgba(29,40,49,.93); --panel-2: rgba(37,50,60,.90); }
  .photo-background-active .topbar,
  .photo-background-active .tabs { background-color: var(--panel-2); }
}

/* Tablet wall-display tuning: fit all enabled modules on one clean line. */
@media (min-width: 651px) and (max-width: 1100px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .tabs { overflow: hidden; }
  .tab { font-size: 13px; padding-left: 4px; padding-right: 4px; }
  .page-heading h2 { font-size: 22px; }
  .calendar-actions .button,
  .calendar-actions .youtube-home-link { font-size: 13px; }
}

/* Phones keep a single swipeable module row and a tidy toolbar. */
@media (max-width: 650px) {
  .app-shell { padding: 8px; }
  .topbar { min-height: 44px; margin-bottom: 7px; }
  .tabs { margin-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-width: 88px; scroll-snap-align: center; font-size: 13px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; }
  .calendar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}


/* Calendar-first wall display v2: header navigation + compact countdowns + true time grid. */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.topbar .tabs {
  min-width: 0;
  margin: 0;
  padding: 3px;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.topbar .tabs::-webkit-scrollbar { display: none; }
.topbar .tab {
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 38px;
  padding: 6px 9px;
  font-size: 12px;
  scroll-snap-align: center;
  white-space: nowrap;
}
.topbar .clock-wrap { min-width: 116px; }

/* Keep Home countdown information useful but shallow. */
.home-countdown-section { margin: 0 0 7px; }
.home-countdowns { gap: 7px; overflow: hidden; }
.home-countdown-panel {
  flex: 0 1 calc((100% - 14px) / 3);
  width: calc((100% - 14px) / 3);
  max-width: none;
  height: 58px;
  padding: 5px 7px 6px;
  border-radius: 9px;
}
.home-countdown-panel-title {
  height: 15px;
  border: 0;
  font-size: 8px;
  line-height: 1;
}
.home-countdown-panel-items {
  height: 30px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home-countdown-panel-items::-webkit-scrollbar { display: none; }
.home-countdown-panel-item {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  height: 28px;
  display: inline-flex;
  grid-template-columns: none;
  gap: 5px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  padding: 3px 6px;
}
.home-countdown-panel-event-title { max-width: 86px; font-size: 10px; line-height: 1; }
.home-countdown-panel-remaining { font-size: 10px; line-height: 1; }
.home-countdown-panel-event-date { display: none; }

.calendar-hours-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 11px;
  min-width: 0;
}
.calendar-hours-settings .field {
  margin-top: 0 !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* iOS gives type=time an intrinsic native width that can ignore a grid column.
   Removing only the native field chrome makes it obey the card width while
   retaining the system time picker when tapped. */
.calendar-hours-settings input[type="time"] {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  -webkit-appearance: none;
  appearance: none;
}
.calendar-hours-settings input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.calendar-schedule-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  border-radius: var(--radius);
}
.calendar-time-grid {
  --calendar-timeline-height: 430px;
  display: grid;
  grid-template-rows: auto var(--calendar-timeline-height);
  width: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calendar-time-corner,
.calendar-time-day-head {
  grid-row: 1;
  min-width: 0;
  min-height: 55px;
  padding: 6px 7px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.calendar-time-corner {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8px;
  text-align: right;
  padding-right: 6px;
}
.calendar-time-day-head { position: relative; }
.calendar-time-day-head.today { background: var(--accent-soft); box-shadow: inset 0 3px 0 var(--accent-2); }
.calendar-time-day-head .day-name { font-size: 14px; line-height: 1.05; }
.calendar-time-day-head .day-date { font-size: 10px; margin-top: 1px; }
.calendar-all-day-list { display: flex; gap: 3px; margin-top: 4px; min-width: 0; overflow: hidden; }
.calendar-all-day-event {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 18px;
  border: 0;
  border-left: 3px solid var(--event-color, var(--accent-2));
  border-radius: 4px;
  padding: 2px 3px;
  background: var(--all-day-bg);
  color: var(--text);
  font-size: 8px;
  font-weight: 800;
  text-align: left;
  overflow: hidden;
}
.calendar-all-day-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-all-day-more { flex: 0 0 auto; align-self: center; color: var(--muted); font-size: 7px; white-space: nowrap; }

.calendar-time-axis {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}
.calendar-time-label {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.calendar-day-track {
  grid-row: 2;
  position: relative;
  min-width: 0;
  background: var(--day-track-bg);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.calendar-day-track.today { background: var(--today-track-bg); }
.calendar-hour-line {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  opacity: .78;
  pointer-events: none;
}
.calendar-time-event {
  --event-lane: 0;
  --event-lanes: 1;
  position: absolute;
  z-index: 2;
  left: calc((100% / var(--event-lanes)) * var(--event-lane) + 2px);
  width: calc((100% / var(--event-lanes)) - 4px);
  min-height: 18px;
  border: 0;
  border-left: 4px solid var(--event-color, var(--accent-2));
  border-radius: 5px;
  background: var(--event-bg);
  color: var(--text);
  padding: 3px 4px 3px 5px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,42,58,.10);
}
.calendar-time-event.task-calendar-event { background: var(--task-event-bg); }
.calendar-event-time,
.calendar-event-title,
.calendar-event-source { display: block; overflow: hidden; text-overflow: ellipsis; }
.calendar-event-time { font-size: 8px; line-height: 1.05; font-weight: 900; color: var(--muted); white-space: nowrap; }
.calendar-event-title { margin-top: 1px; font-size: 10px; line-height: 1.05; font-weight: 850; }
.calendar-event-source { margin-top: 2px; font-size: 7px; line-height: 1; color: var(--muted); white-space: nowrap; }
.calendar-time-event:active { filter: brightness(.96); }

.photo-background-active .calendar-time-grid { backdrop-filter: blur(4px); background: var(--panel); }
.photo-background-active .calendar-day-track { background: rgba(255,255,255,.16); }

/* Photo-frame controls now travel together in the combined header. */
body.photo-frame-mode .topbar,
body.photo-frame-mode .photo-heading { position: absolute; z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s ease; background: rgba(17,26,33,.82); color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 20px rgba(0,0,0,.24); backdrop-filter: blur(10px); }
body.photo-frame-mode .topbar { top: 12px; left: 16px; right: 16px; margin: 0; padding: 7px 9px; border-radius: 12px; }
body.photo-frame-mode .topbar .tabs { position: static; opacity: 1; pointer-events: auto; background: rgba(255,255,255,.08); border: 0; box-shadow: none; color: #fff; }
body.photo-frame-mode .topbar .tabs .tab { color: #eef4f8; }
body.photo-frame-mode .topbar .tabs .tab.is-active { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
body.photo-frame-mode .photo-heading { top: 82px; left: 16px; right: 16px; margin: 0; padding: 8px 10px; border-radius: 12px; align-items: center; }
body.photo-frame-mode.photo-controls-visible .topbar,
body.photo-frame-mode.photo-controls-visible .photo-heading { opacity: 1; pointer-events: auto; }
/* Override the old standalone-tabs fullscreen placement now that tabs live in topbar. */
body.photo-frame-mode > .tabs, body.photo-frame-mode .app-shell > .tabs { display: none !important; }

@media (min-width: 651px) and (max-width: 1100px) {
  .calendar-hours-settings { grid-template-columns: 1fr; }
  .topbar .tabs { background: var(--tab-bg); }
  .topbar .tab { min-width: 74px; padding-left: 7px; padding-right: 7px; }
  .clock-wrap { min-width: 105px; }
  .clock { font-size: 21px; }
  .today-label { max-width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calendar-time-grid { border-radius: 10px; }
}

@media (max-width: 650px) {
  .topbar { grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .topbar .tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .topbar .tab { min-width: 84px; }
  .calendar-schedule-scroll { overflow-x: auto; }
  .calendar-time-grid { min-width: calc(54px + (var(--calendar-days) * 132px)); }
  .home-countdowns { justify-content: flex-start; overflow-x: auto; }
  .home-countdown-panel { flex: 0 0 240px; width: 240px; }
  .calendar-hours-settings { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  .calendar-time-day-head.today { background: var(--accent-soft); }
  .calendar-time-event { background: var(--event-bg); }
  .calendar-time-event.task-calendar-event { background: var(--task-event-bg); }
  .calendar-day-track { background: var(--day-track-bg); }
  .photo-background-active .calendar-day-track { background: rgba(29,40,49,.20); }
}


/* Compact Calendar weather strip */
.calendar-weather-settings { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.weather-settings-fields { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; margin-top: 8px; }
.weather-settings-fields .field { margin-top: 0; }
.weather-postcode-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: center; }
.weather-postcode-entry input { min-width: 0; position: relative; z-index: 1; }
.weather-postcode-entry button { min-height: 44px; white-space: nowrap; }
.calendar-weather { margin-top: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 5px 7px 6px; box-shadow: var(--shadow); }
.calendar-weather[hidden] { display: none !important; }
.weather-strip-meta { height: 15px; display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 9px; line-height: 1; }
.weather-strip-meta strong { font-size: 10px; white-space: nowrap; }
.weather-strip-meta .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-attribution { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 8px; white-space: nowrap; }
.weather-days { --weather-days: 5; display: grid; grid-template-columns: repeat(var(--weather-days), minmax(0,1fr)); gap: 5px; min-width: 0; }
.weather-day-card { min-width: 0; height: 46px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); padding: 4px 6px; }
.weather-day-name { grid-column: 1; grid-row: 1; min-width: 0; font-size: 9px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weather-icon { grid-column: 2; grid-row: 1; font-size: 17px; line-height: 1; }
.weather-temp { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: 4px; font-size: 9px; line-height: 1; white-space: nowrap; }
.weather-temp strong { font-size: 12px; }
.weather-temp span { color: var(--muted); }
.weather-rain { grid-column: 2; grid-row: 2; display: block; color: var(--muted); font-size: 7px; white-space: nowrap; }
@media (max-width: 650px) {
  .weather-settings-fields { grid-template-columns: 1fr; }
  .weather-days { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .weather-day-card { flex: 0 0 92px; }
}


@media (max-width: 520px) {
  .colour-scheme-row { grid-template-columns: 1fr; }
  .colour-scheme-preview { justify-content: flex-start; width: 100%; }
}

/* FamilySlate brand identity: independent of user-selectable colour schemes. */
.brand-wrap h1 { font-weight: 700; letter-spacing: -.015em; }
.brand-wrap .tagline { font-weight: 400; }
body.photo-frame-mode .brand-mark { background: rgba(255,255,255,.96); }

/* FamilySlate v0.19.2 — calendar time padding + standalone safe area. */
/* In standalone iPad mode the black-translucent status bar overlays the page.
   Respect the iOS safe-area inset so the FamilySlate header clears the
   system clock/battery strip on every module. constant() supports older iOS. */
.app-shell {
  padding-top: calc(12px + constant(safe-area-inset-top));
  padding-top: calc(12px + env(safe-area-inset-top));
}
@media (max-width: 650px) {
  .app-shell {
    padding-top: calc(8px + constant(safe-area-inset-top));
    padding-top: calc(8px + env(safe-area-inset-top));
  }
}


/* FamilySlate v0.19.3 - fixed Birthdays list and optional Birthday List Home view */
.home-birthday-panel { border-left-color: #b06f8e; }
.home-birthday-date { color: var(--accent); font-size: 10px; line-height: 1; font-weight: 900; white-space: nowrap; }
.home-birthday-empty { color: var(--muted); font-weight: 800; }
.countdown-list-row.is-fixed { grid-template-columns: minmax(0,1fr) auto; min-height: 48px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.countdown-list-fixed { min-width: 0; display: grid; gap: 2px; }
.countdown-list-fixed strong { font-size: 15px; }
.countdown-list-fixed small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.countdown-list-lock { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 801px) {
  .home-countdowns[data-list-count="3"] .home-birthday-panel { order: 3; }
}


/* FamilySlate v0.19.4 - master Birthday Calendar display modes */
.calendar-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
  min-width: 0;
}
.calendar-main-row.has-birthday-sidebar {
  grid-template-columns: minmax(0, 1fr) clamp(170px, 19vw, 220px);
}
.calendar-main-row > .calendar-schedule-scroll { min-width: 0; }
.birthday-sidebar {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid #b06f8e;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.birthday-sidebar[hidden] { display: none !important; }
.birthday-sidebar-title {
  flex: 0 0 auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 16px;
  font-weight: 900;
}
.birthday-sidebar-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.birthday-sidebar-item {
  width: 100%;
  min-height: 47px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 7px 10px;
  text-align: left;
}
.birthday-sidebar-item:last-child { border-bottom: 0; }
.birthday-sidebar-item:active { background: var(--panel-2); }
.birthday-sidebar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 850;
}
.birthday-sidebar-date {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.birthday-sidebar-empty {
  display: flex;
  justify-content: center;
  color: var(--muted);
  font-weight: 800;
}
.photo-background-active .birthday-sidebar { backdrop-filter: blur(4px); background: var(--panel); }

/* The right-hand column is intended for landscape tablets/wall displays.
   On narrower devices keep the same master choice, but turn it into a compact
   strip above the calendar so the day columns remain usable. */
@media (max-width: 800px) {
  .calendar-main-row.has-birthday-sidebar { grid-template-columns: minmax(0, 1fr); }
  .calendar-main-row.has-birthday-sidebar .birthday-sidebar { grid-row: 1; }
  .calendar-main-row.has-birthday-sidebar .calendar-schedule-scroll { grid-row: 2; }
  .birthday-sidebar { display: block; }
  .birthday-sidebar-title { min-height: 34px; padding: 6px 8px; font-size: 12px; }
  .birthday-sidebar-items { display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; padding: 5px; }
  .birthday-sidebar-item { flex: 0 0 auto; width: auto; min-width: max-content; min-height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; gap: 6px; }
  .birthday-sidebar-name { max-width: 110px; font-size: 10px; }
  .birthday-sidebar-date { font-size: 10px; }
}


/* FamilySlate v0.19.5 - flexible countdown strip + full Birthday sidebar */
/* When Birthdays occupy the right-hand calendar column, the remaining custom
   countdown panels share the complete top strip instead of retaining 1/3 widths. */
.home-countdowns[data-birthday-display="side"][data-list-count="1"] .home-countdown-panel {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}
.home-countdowns[data-birthday-display="side"][data-list-count="2"] .home-countdown-panel {
  flex: 1 1 calc((100% - 7px) / 2);
  width: calc((100% - 7px) / 2);
  max-width: none;
}
@media (max-width: 650px) {
  .home-countdowns[data-birthday-display="side"][data-list-count="1"] .home-countdown-panel,
  .home-countdowns[data-birthday-display="side"][data-list-count="2"] .home-countdown-panel {
    flex-grow: 0;
  }
}


/* FamilySlate v0.19.6 - one-screen Birthday column */
/* The right-hand Birthday list is a fixed companion to the calendar. It must
   never add document height or gain its own vertical scrollbar. JavaScript
   shows only the complete birthday rows that fit beside the timeline. */
.calendar-main-row.has-birthday-sidebar { min-height: 0; }
.calendar-main-row.has-birthday-sidebar .birthday-sidebar { align-self: start; max-height: 100%; }
.birthday-sidebar-item[hidden] { display: none !important; }
@media (min-width: 801px) {
  .birthday-sidebar-items { overflow: hidden !important; }
}


/* FamilySlate v0.19.8 - compact phone Birthday strip */
@media (max-width: 800px) {
  .calendar-main-row.has-birthday-sidebar .birthday-sidebar {
    height: auto !important;
    max-height: none;
    align-self: stretch;
  }
  .birthday-sidebar-items {
    min-height: 0;
    flex: none;
  }
}

/* FamilySlate v0.19.9 - keep module navigation available while scrolling Settings */
body.settings-page-active .topbar {
  position: sticky;
  top: calc(constant(safe-area-inset-top) + 4px);
  top: calc(env(safe-area-inset-top) + 4px);
  z-index: 140;
  background: var(--bg);
  padding-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 7px 14px rgba(16,29,53,.10);
}
body.settings-page-active.photo-background-active .topbar {
  background: var(--bg);
}
@media (max-width: 650px) {
  body.settings-page-active .topbar {
    top: calc(constant(safe-area-inset-top) + 2px);
    top: calc(env(safe-area-inset-top) + 2px);
    padding-top: 2px;
    padding-bottom: 5px;
  }
}



/* FamilySlate v0.20.2 Beta - first-run setup persistence fix */
.setup-help-card { grid-column: 1 / -1; }
.setup-help-heading { align-items: center; }
.setup-help-heading h3 { margin: 0 0 4px; }
.setup-help-actions { margin-top: 0; justify-content: flex-end; }
.button.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.button.ghost:hover { background: var(--panel-2); color: var(--text); }

.setup-backdrop[hidden] { display: none !important; }
.setup-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(16,29,53,.72); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.setup-assistant { width: min(880px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.32); padding: 22px; }
.setup-brand { display: flex; align-items: center; gap: 10px; }
.setup-brand img { width: 44px; height: 44px; object-fit: contain; }
.setup-brand div { display: grid; line-height: 1.1; }
.setup-brand strong { font-size: 19px; }
.setup-brand span { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.setup-progress { display: flex; align-items: center; gap: 10px; margin: 16px 0 22px; color: var(--muted); font-size: 12px; font-weight: 800; }
.setup-progress-bar { flex: 1; height: 7px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.setup-progress-bar > span { display: block; height: 100%; width: 20%; background: var(--accent-2); border-radius: inherit; transition: width .2s ease; }
.setup-step { min-height: 330px; }
.setup-step h2 { margin: 3px 0 10px; font-size: clamp(24px, 3vw, 34px); }
.setup-kicker { margin: 0; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.setup-lead { max-width: 690px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.setup-device-hint { margin: 18px 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); line-height: 1.45; }
.setup-device-hint strong { color: var(--text); }
.setup-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.setup-feature-grid span { padding: 13px 10px; border-radius: 11px; background: var(--accent-soft); color: var(--text); text-align: center; font-weight: 800; }
.setup-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.setup-module-grid label { display: flex; gap: 12px; align-items: center; min-height: 70px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.setup-module-grid input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--accent-2); }
.setup-module-grid span { display: grid; gap: 2px; }
.setup-module-grid small { color: var(--muted); font-size: 12px; }
.setup-form-grid, .setup-personalise-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.setup-form-grid .field, .setup-personalise-grid .field { margin-top: 0; }
.setup-inline-switch { margin-top: 0; align-self: end; }
.setup-weather-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,.8fr); gap: 12px; margin-top: 14px; align-items: end; }
.setup-weather-row .field { margin-top: 0; }
.setup-birthday-field { margin-top: 14px; }
.setup-tip { margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--accent-soft); line-height: 1.5; }
.setup-finish-step { min-height: 0; }
.setup-finish-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 22px; align-items: center; margin-top: 18px; }
.setup-pairing-qr { width: 220px; min-height: 220px; }
.setup-finish-copy .field { margin-top: 0; }
.setup-finish-copy .button { margin-top: 10px; }
.setup-finish-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.setup-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.setup-nav-right { display: flex; gap: 8px; }
body.setup-assistant-open { overflow: hidden; }

@media (max-width: 700px) {
  .setup-backdrop { padding-left: 8px; padding-right: 8px; align-items: stretch; }
  .setup-assistant { max-height: none; height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); border-radius: 15px; padding: 16px; }
  .setup-step { min-height: 0; }
  .setup-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .setup-module-grid, .setup-form-grid, .setup-personalise-grid, .setup-weather-row, .setup-finish-layout { grid-template-columns: 1fr; }
  .setup-module-grid label { min-height: 62px; }
  .setup-finish-layout { justify-items: stretch; }
  .setup-pairing-qr { width: min(220px, 100%); min-height: 190px; }
  .setup-finish-actions { flex-direction: column-reverse; }
  .setup-finish-actions .button { width: 100%; }
  .setup-nav { position: sticky; bottom: -16px; margin-left: -16px; margin-right: -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--panel); }
  .setup-help-heading { align-items: stretch; }
  .setup-help-actions { justify-content: stretch; }
  .setup-help-actions .button { flex: 1 1 100%; text-align: center; }
}

.setup-desktop-transfer { margin: -8px 0 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); }
.setup-desktop-transfer p { margin: 5px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.setup-transfer-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.setup-transfer-row input { min-width: 0; }
@media (max-width: 520px) { .setup-transfer-row { grid-template-columns: 1fr; } .setup-transfer-row .button { width: 100%; } }