/* =========================================================
   BAYTI v4 — visual system
   Light, warm and clean by default (dark remains available).
   One accent colour for the main action; quiet everything else.
   Loaded after app.css, ui.css and design-system.css (kids.css comes after this).
   ========================================================= */

/* ---------- Typography: clean and confident (both themes) ---------- */
:root{--display:'Rubik','Segoe UI',system-ui,sans-serif}
h1,h2,h3,.page-head h1{font-family:'Rubik','Segoe UI',system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(26px,4.6vw,36px);line-height:1.15}
h2{font-size:clamp(18px,2.6vw,21px);line-height:1.3}
.page-head p,.muted{line-height:1.55}
/* small labels above titles: quiet, not orange */
.eyebrow{color:var(--dust)!important;font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:none}
.eyebrow .ic{color:var(--dust)}

/* ---------- Inline icons that replace emoji ---------- */
.ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.18em;line-height:0}
.ic .ui-ic{width:1.15em;height:1.15em;stroke-width:1.9}
.home-next-ico .ui-ic,.family-tile>span .ui-ic,.home-dinner-ico .ui-ic{width:26px;height:26px}
.family-tile>span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--surface-2);color:var(--ember);font-size:0}
.home-next-ico,.home-dinner-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--surface-2);color:var(--ember);flex:none}
.hint-ico .ui-ic{width:20px;height:20px;color:var(--ember)}

/* ---------- Quiet chips and pills; orange only where it matters ---------- */
.chip{border-color:var(--line);color:var(--text);font-weight:600}
.chip:hover{border-color:var(--line-2);background:var(--surface-2)}
.pill{background:var(--surface-2);color:var(--dust);border-color:transparent}
.pill.urgent,.pill.high{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.tag{background:var(--surface-2);color:var(--dust);border-color:transparent}

/* ---------- Header menu (settings, language, theme, sign out) ---------- */
.hb-more{position:relative}
.hb-more>summary{list-style:none;cursor:pointer}
.hb-more>summary::-webkit-details-marker{display:none}
.hb-more-panel{position:absolute;z-index:80;inset-inline-end:0;top:calc(100% + 10px);min-width:220px;padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 44px -18px rgba(0,0,0,.45);display:grid;gap:2px}
.hb-more-panel a,.hb-more-panel button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--text);text-decoration:none;font:inherit;font-weight:600;background:none;border:0;cursor:pointer;text-align:start;width:100%}
.hb-more-panel a:hover,.hb-more-panel button:hover{background:var(--surface-2)}
.hb-more-panel .ui-ic{width:20px;height:20px;color:var(--dust)}
.hb-more-panel.is-float{position:fixed;inset-inline:auto;z-index:1000}
.hb-more-panel.is-float[hidden]{display:none}
.hb-more-out{color:var(--danger)!important}
.hb-more-out .ui-ic{color:var(--danger)!important}

/* ---------- Hints: one compact line, not a banner ---------- */
.hint-box{padding:10px 14px!important;gap:10px!important;border-radius:16px!important;align-items:center!important}
.hint-box .hint-text b{font-size:14px}
.hint-box .hint-text p{font-size:13px;margin:2px 0 0}
.hint-box .hint-x{min-height:34px!important;padding:6px 12px!important;font-size:13px!important}

/* ---------- Empty states with a small illustration ---------- */
.empty{display:grid;justify-items:center;gap:10px;padding:34px 16px!important;text-align:center;color:var(--dust)}
.empty::before,body.light .empty::before{content:''!important;display:block;width:92px;height:92px;border-radius:50%;border:1px solid var(--line)!important;background-color:var(--surface-2)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 64' fill='none' stroke='%23C9A98A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 30 38 8l28 22'/%3E%3Cpath d='M16 26v30h44V26'/%3E%3Cpath d='M32 56V40h12v16'/%3E%3Ccircle cx='60' cy='12' r='5' stroke='%23F0A94E'/%3E%3Cpath d='M60 2v2M60 20v2M50 12h2M68 12h2'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:center 46%!important;background-size:58px auto!important;font-size:0;opacity:1}

/* ---------- Primary action: one solid colour ---------- */
.primary,button.primary,a.primary{background:var(--ember)!important;background-image:none!important;color:var(--flame-ink)!important;border-radius:14px!important;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--ember) 70%,transparent)!important;font-weight:700}
.primary:hover{filter:brightness(1.05)}
.primary:active{transform:translateY(1px)}

/* =========================================================
   LIGHT (default)
   ========================================================= */
body.light{
 --night:#F7F3EE;--surface:#FFFFFF;--surface-2:#F6F0E9;--line:#ECE3D8;--line-2:#E0D3C4;
 --text:#1E1914;--dust:#6E6155;--dust-2:#958778;--field:#FFFFFF;--glass:rgba(247,243,238,.86);
 --ember:#DE5D26;--clay:#C24F1C;--sage:#2D9566;--danger:#D2443A;--flame-1:#DE5D26;--flame-2:#DE5D26;--flame-ink:#FFFFFF;
 --ring:0 0 0 4px rgba(222,93,38,.18);
 --bayti-bg:#F7F3EE;--bayti-surface:#FFFFFF;--bayti-surface-2:#F6F0E9;--bayti-surface-3:#FBF8F4;
 --bayti-line:#E0D3C4;--bayti-line-soft:#ECE3D8;--bayti-text:#1E1914;--bayti-muted:#6E6155;
 --bayti-accent:#DE5D26;--bayti-accent-2:#C24F1C;--bayti-success:#2D9566;--bayti-danger:#D2443A;--bayti-info:#2F6FD6;
 --bayti-shadow:0 1px 2px rgba(30,25,20,.04),0 12px 32px -18px rgba(30,25,20,.22);
 --bayti-shadow-soft:0 1px 2px rgba(30,25,20,.04),0 6px 16px -10px rgba(30,25,20,.14);
 background:#F7F3EE!important;background-image:none!important;color:#1E1914}
body.light::before,body.light::after{display:none!important}
/* surfaces: white, thin line, soft shadow; no gradients */
body.light .card,body.light .panel,body.light .modal-card,body.light .auth-card{background:#fff!important;background-image:none!important;border:1px solid var(--line)!important;box-shadow:var(--bayti-shadow)!important}
body.light .card .card,body.light .panel .card,body.light .card .panel{background:var(--surface-2)!important;box-shadow:none!important;border-color:transparent!important}
body.light .row{border-color:var(--line)}
/* header and bottom navigation */
body.light .topbar{background:rgba(247,243,238,.86)!important;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)!important;box-shadow:none!important}
body.light .topbar .icon{background:#fff;border:1px solid var(--line);color:var(--text)}
body.light .topbar .icon:hover{background:var(--surface-2);border-color:var(--line-2)}
body.light .desktop-nav a{color:var(--dust)}
body.light .desktop-nav a[aria-current]{color:var(--text);background:#fff;box-shadow:var(--bayti-shadow-soft)}
body.light .mobile-nav{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line)!important;box-shadow:0 14px 34px -16px rgba(30,25,20,.3)!important}
body.light .mobile-nav a{color:var(--dust-2)}
body.light .mobile-nav a[aria-current]{color:var(--ember);background:color-mix(in srgb,var(--ember) 9%,transparent)}
body.light .brand .logo{background:var(--ember);color:#fff;box-shadow:none}
/* fields */
body.light input:not([type=checkbox]):not([type=radio]),body.light select,body.light textarea{background:#fff!important;border:1px solid var(--line-2)!important;color:var(--text)!important}
body.light input:focus,body.light select:focus,body.light textarea:focus{border-color:var(--ember)!important;box-shadow:var(--ring)!important;outline:none}
body.light ::placeholder{color:var(--dust-2)}
/* check buttons */
body.light .check{background:#fff;border-color:var(--line-2);color:transparent}
body.light .check:hover{border-color:var(--sage);color:var(--sage)}
body.light .check.checked{background:var(--sage);border-color:var(--sage);color:#fff}
/* hints */
body.light .hint-box{background:#fff!important;border:1px solid var(--line)!important;box-shadow:none!important}
/* home */
body.light .home-next{background:#fff!important;border:1px solid var(--line)!important}
body.light .home-next-time{color:var(--ember)}
body.light .home-member{background:#fff;border-color:var(--line);box-shadow:var(--bayti-shadow-soft)}
body.light .home-alert{color:#1E1914}
body.light .home-alert.is-conflict{background:#FDEDEB;border-color:#F4C3BD}
body.light .home-alert.is-late{background:#FFF5E8;border-color:#F6D9AE}
body.light .home-drive.is-conflict time{color:var(--danger)}
body.light .home-member .avatar,body.light .avatar{background:color-mix(in srgb,var(--ember) 14%,#fff);color:var(--clay)}
/* today */
body.light .today-person{background:#fff;border-color:var(--line)}
body.light .today-person.is-on{background:color-mix(in srgb,var(--ember) 8%,#fff);border-color:var(--ember)}
body.light .today-line.is-conflict{background:#FDEDEB}
/* calendar */
body.light .cal-views,body.light .family-tabs{background:#EFE7DD;border-color:transparent}
body.light .cal-views a,body.light .family-tabs a{color:var(--dust)}
body.light .cal-views a[aria-current=page],body.light .family-tabs a.is-on{background:#fff;color:var(--text);box-shadow:var(--bayti-shadow-soft)}
body.light .cal-daycol{background:#fff;border-color:var(--line)}
body.light .cal-occ{background:var(--surface-2);border-color:transparent}
body.light .cal-occ.is-conflict{background:#FDEDEB}
body.light .cal-conflict{background:#FDEDEB;border-color:#F4C3BD;color:#7A231B}
body.light .cal-role{background:#fff;color:var(--dust)}
body.light .cal-role.is-drive{background:#EAF1FD;color:#2557B0}
/* family hub */
body.light .family-tile{background:#fff!important}
body.light .family-tile>span{background:color-mix(in srgb,var(--ember) 10%,#fff)}
body.light .family-scope-note{background:#EEF8F2;border-color:#CFEBDC;color:#1E1914}
body.light .family-scope-note.is-community{background:#EEF3FC;border-color:#D3E0F7}
body.light .family-rot{background:var(--surface-2)}
body.light .family-member-day .chip.is-late{color:var(--danger);border-color:#F4C3BD}
/* gallery */
body.light .album-priv{background:#EEF8F2;color:#1F7A50}
body.light .album-priv.is-shared{background:#EEF3FC;color:#2557B0}
body.light .album-priv.is-mixed{background:#FFF5E8;color:#9A5A0A}
/* modals and overlays */
body.light .modal{background:rgba(30,25,20,.38)!important}
/* bottom nav badge, bell badge */
body.light .bell-badge{background:var(--danger);color:#fff;border-color:#fff}

/* ---------- Dark theme: same calm hierarchy ---------- */
body:not(.light) .primary{color:#1b1208!important}
body:not(.light) .home-next{background:var(--bayti-surface)!important}

/* ---------- Motion: gentle, and none for people who prefer less ---------- */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* icon spacing next to text, and readable alert icons */
.primary .ic,.chip .ic,.eyebrow .ic,.cal-role .ic,.family-tabs .ic,.family-scope-note .ic,.cal-conflict .ic,.home-alert>.ic{margin-inline-end:.4em}
.home-alert>.ic .ui-ic,.cal-conflict .ic .ui-ic{width:19px;height:19px}
.home-alert.is-conflict>.ic,.cal-conflict .ic{color:var(--danger)}
.home-alert.is-late>.ic{color:#B7650E}

/* =========================================================
   LIGHT = DARK, structurally. Only colours change between themes:
   the same frames, the same backgrounds and the same places in the accent colour.
   (Checked element by element against dark mode.)
   ========================================================= */
/* frames dark has (light had dropped them) */
body.light .cal-occ.is-conflict{border:1px solid #F1BDB6!important}
body.light .card.event-card{border:1px solid var(--line)!important}
body.light .feed-tab.active{border:1px solid var(--line-2)!important}
body.light .cal-views,body.light .family-tabs{border:1px solid var(--line)!important}
/* frames dark does not have (light had added them) */
body.light .pill,body.light .pill.urgent,body.light .pill.high,body.light .tag{border-color:transparent!important}
body.light input.qty-input:not([type=checkbox]):not([type=radio]){border-color:transparent!important;background:transparent!important;box-shadow:none!important}
/* backgrounds dark does not have */
body.light .qty-btn,body.light .home-upcoming .event,body.light div.event,body.light .album-card{background:transparent!important}
/* the same places in the accent colour */
body.light .panel-head>a.chip,body.light .datebox,
body.light .datebox b,body.light .calendar-list-wrap .datebox small,body.light .task-check-progress strong,body.light .gallery-day-head>span,body.light .cal-daynum,body.light .cal-cell-today .cal-daynum,
body.light .repeat-instance,body.light .today-link-card span,body.light .today-link-card .ic,
body.light .today-type.task-type,body.light .calendar-sync-icon{color:var(--ember)!important}
body.light .feed-subtab.active{border:1px solid var(--line-2)!important}
body.light .rotation-row{background:transparent!important}
body.light .pb-remix,body.light .chip.following{color:var(--ember)!important}
body.light .feed-icon-btn,body.light .like-btn.comment-btn,body.light .feed-subtab:not(.active){background:transparent!important}
body.light .like-btn.liked{border-color:transparent!important}

/* =========================================================
   BAYTI v5 — components: hierarchy, states, motion, rhythm
   (applies to every page of the app; same in light and dark)
   ========================================================= */
/* ---------- type and spacing rhythm ---------- */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px}
main.wrap>*+*{margin-top:var(--sp-4)}
main.wrap>section+section,main.wrap>.card+.card{margin-top:var(--sp-4)}
small,.muted small,.row small,.grow small{font-size:13px;line-height:1.45}
p,.muted{line-height:1.6}
.panel-head{margin-bottom:var(--sp-3)}
.panel-head h2{margin:2px 0 0}
/* ---------- card hierarchy ---------- */
/* lead cards: the one thing to look at first */
.home-next,.kid-today,.dq-card,.score-card,.today-cta,.family-hub-hero{position:relative}
.home-next::before,.dq-card::before,.score-card::before,.today-cta::before{content:'';position:absolute;inset-block:16px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:var(--ember)}
[dir=rtl] .home-next::before,[dir=rtl] .dq-card::before,[dir=rtl] .score-card::before,[dir=rtl] .today-cta::before{border-radius:4px 0 0 4px}
body.light .home-next,body.light .dq-card,body.light .score-card,body.light .today-cta{box-shadow:0 1px 2px rgba(30,25,20,.05),0 18px 40px -20px rgba(30,25,20,.28)!important}
/* standard cards respond to the pointer when they are links */
a.card,a.family-tile,a.home-member,a.family-member,a.home-dinner{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
a.card:hover,a.family-tile:hover,a.home-member:hover,a.family-member:hover,a.home-dinner:hover{transform:translateY(-2px)}
body.light a.card:hover,body.light a.family-tile:hover,body.light a.home-member:hover,body.light a.family-member:hover{box-shadow:0 2px 4px rgba(30,25,20,.05),0 20px 36px -20px rgba(30,25,20,.3)!important;border-color:var(--line-2)!important}
/* ---------- buttons and fields: every state ---------- */
.primary,.chip,.check,.icon,button{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s}
.chip:active,.icon:active,button:active{transform:scale(.97)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--ember) 55%,transparent)!important;outline-offset:2px!important;border-radius:12px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important}
button:disabled,.primary:disabled,.chip[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none!important;filter:grayscale(.2)}
/* loading: app.js setLoading() adds .is-loading and a .spinner before the label; this styles it */
.is-loading{cursor:progress;opacity:.92}
.is-loading .spinner{display:inline-block;width:16px;height:16px;margin-inline-end:8px;vertical-align:-3px;border-radius:50%;border:2.2px solid currentColor;border-right-color:transparent;animation:hbSpin .7s linear infinite}
@keyframes hbSpin{to{transform:rotate(360deg)}}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 16%,transparent)!important}
/* the check: a satisfying pop when something gets done */
.check.checked{animation:hbPop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes hbPop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
/* ---------- motion: calm and short ---------- */
@keyframes hbRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main.wrap>*{animation:hbRise .38s cubic-bezier(.2,.8,.2,1) both}
main.wrap>*:nth-child(2){animation-delay:.03s}main.wrap>*:nth-child(3){animation-delay:.06s}main.wrap>*:nth-child(4){animation-delay:.09s}main.wrap>*:nth-child(5){animation-delay:.12s}main.wrap>*:nth-child(n+6){animation-delay:.15s}
.modal.open .modal-card{animation:hbSheet .3s cubic-bezier(.2,.8,.2,1)}
@keyframes hbSheet{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* ---------- one colour per family member, everywhere ---------- */
.avatar.mc-0{background:#DE5D26!important;color:#fff!important}.avatar.mc-1{background:#2F6FD6!important;color:#fff!important}
.avatar.mc-2{background:#2D9566!important;color:#fff!important}.avatar.mc-3{background:#7A55D8!important;color:#fff!important}
.avatar.mc-4{background:#D2443A!important;color:#fff!important}.avatar.mc-5{background:#0E8A9A!important;color:#fff!important}
.avatar.mc-6{background:#B7650E!important;color:#fff!important}.avatar.mc-7{background:#C2357F!important;color:#fff!important}
.mdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px;vertical-align:1px}
.mdot.mc-0{background:#DE5D26}.mdot.mc-1{background:#2F6FD6}.mdot.mc-2{background:#2D9566}.mdot.mc-3{background:#7A55D8}.mdot.mc-4{background:#D2443A}.mdot.mc-5{background:#0E8A9A}.mdot.mc-6{background:#B7650E}.mdot.mc-7{background:#C2357F}
@media (prefers-reduced-motion:reduce){main.wrap>*,.modal.open .modal-card,.check.checked{animation:none!important}a.card:hover,a.family-tile:hover,a.home-member:hover,a.family-member:hover{transform:none}}

/* =========================================================
   BRAND — illustrations (assets/illustrations/*.svg)
   One drawing language: the icons' rounded 2.4 stroke, soft brand fills, the logo's family dots.
   ========================================================= */
/* empty states: the family by default, a fitting scene per page */
.empty::before,body.light .empty::before{width:150px!important;height:112px!important;border-radius:0!important;border:0!important;background-color:transparent!important;
 background-image:url("illustrations/day.svg")!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}
body[data-page=tasks] .empty::before,body[data-page=templates] .empty::before,body[data-page=rotations] .empty::before,body .home-tasks .empty::before{background-image:url("illustrations/tasks.svg")!important}
body[data-page=today] .empty::before,body[data-page=calendar] .empty::before,body[data-page=timeclock] .empty::before{background-image:url("illustrations/day.svg")!important}
body[data-page=gallery] .empty::before,body[data-page=household_profile] .empty::before{background-image:url("illustrations/gallery.svg")!important}
body[data-page=notifications] .empty::before,body[data-page=activity] .empty::before{background-image:url("illustrations/bell.svg")!important}
body[data-page=shopping] .empty::before,body[data-page=meals] .empty::before,body[data-page=budget] .empty::before{background-image:url("illustrations/shopping.svg")!important}
body[data-page=notes] .empty::before,body[data-page=documents] .empty::before,body[data-page=trash] .empty::before{background-image:url("illustrations/notes.svg")!important}
body[data-page=feed] .empty::before,body[data-page=friends] .empty::before,body[data-page=blocked] .empty::before,body[data-page=playbooks] .empty::before,body[data-page=invite] .empty::before{background-image:url("illustrations/community.svg")!important}
body[data-page=points] .empty::before,body[data-page=challenges] .empty::before,body[data-page=recap] .empty::before{background-image:url("illustrations/trophy.svg")!important}
body[data-page=search] .empty::before,body[data-page=errors] .empty::before{background-image:url("illustrations/error.svg")!important}
/* brand moments: entry cards, onboarding, maintenance */
.brand-illo{display:block;width:min(180px,60%);height:auto;margin:0 auto 6px}
.auth-card .brand-illo{margin-top:-6px}
.brand-illo-side{float:inline-end;width:120px;margin:-6px 0 6px 12px}
@media (max-width:480px){.brand-illo-side{width:96px}}
.maint-card .brand-illo{width:min(220px,70%)}
body:not(.light) .brand-illo,body:not(.light) .empty::before{opacity:.92}
/* the brand mark in the header keeps its two-tone weight */
.ui-logo path{stroke-width:2.7}

/* ===== moved from inline style="" attributes (theme-aware colours, readable minimum size) ===== */
.u-01c47d{font-size:28px;font-weight:800;margin-top:4px}
.u-116e33{text-decoration:none}
.u-13076d{text-align:center}
.u-134748{margin-top:14px;display:grid;gap:8px}
.u-1386d5{margin:0}
.u-176884{padding:12px}
.u-180d23{display:flex;flex-wrap:wrap;gap:8px}
.u-186553{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));inset-inline-start:14px}
.u-19fb39{font-size:13px;margin:6px 0 12px}
.u-1c38ea{margin-top:-6px}
.u-1c489a{display:grid;gap:6px;color:var(--dust);font-size:13px}
.u-2071f9{display:block;color:var(--dust)}
.u-2937bf{margin-bottom:6px}
.u-2a34d2{display:block;width:100%;margin-top:8px}
.u-34229e{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.u-3ae1f6{margin-top:20px}
.u-3e033b{text-align:end;padding:14px}
.u-3eec79{text-align:center;margin-top:10px}
.u-45dad3{font-size:13px;padding:6px 10px}
.u-48b58b{color:inherit;text-decoration:none}
.u-522d1d{text-align:center;margin-top:8px;font-size:13px}
.u-535870{font-size:13px;margin:10px 0 0}
.u-5371db{margin-top:10px}
.u-53896a{margin-top:0}
.u-5668a6{margin:0 0 14px;padding-inline-start:20px;color:var(--dust);font-size:13px}
.u-5978fe{display:block;text-align:center;margin-top:8px}
.u-5a4ff3{font-size:13px;margin-top:10px}
.u-5aa615{color:var(--danger)}
.u-5d4276{text-align:center;background:linear-gradient(155deg,#3ec95f,#1f8a3c)}
.u-62afee{font-size:13px;margin:6px 0}
.u-63a53d{display:inline-block;margin-top:8px}
.u-665dd0{display:block;white-space:pre-wrap;word-break:break-all;background:#161620;padding:10px;border-radius:8px;font-size:13px}
.u-685cf0{display:flex;flex-direction:column;gap:8px}
.u-6b9c17{font-size:13px}
.u-75f6ec{display:block;overflow-wrap:anywhere;color:var(--dust)}
.u-77dbc1{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.u-835497{margin:-6px 0 14px}
.u-85789c{font-size:13px;margin:10px 0 0}
.u-899835{font-size:13px;margin:-6px 0 0}
.u-8b6852{font-size:13px}
.u-8be1f5{display:block;margin-top:2px;font-size:13px}
.u-8c46f2{display:block;text-align:center;margin-top:10px;padding:10px}
.u-8e86e5{padding:12px 16px}
.u-97aad9{flex:1;min-width:120px}
.u-9c6869{display:flex;gap:8px}
.u-9e3c4c{margin-top:6px}
.u-a18ac8{margin-top:4px}
.u-a6bae2{text-align:center;margin-top:14px}
.u-a7409f{margin-bottom:10px}
.u-a8be46{display:grid;gap:5px;color:var(--dust);font-size:13px}
.u-ac326c{font-size:15px;font-weight:700;margin-bottom:14px}
.u-b0043e{margin-top:16px}
.u-b4f122{background:var(--danger)}
.u-b5053b{align-items:flex-start}
.u-b7619d{margin:8px 0;overflow-wrap:anywhere}
.u-b9b6f2{width:100%;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 38%,transparent)}
.u-bbdee5{--w:71%}
.u-bfc934{margin:-6px 0 0;font-size:13px}
.u-c9d437{margin:0 0 12px}
.u-cca180{margin:10px 0}
.u-d331bc{width:24px;height:24px;font-size:13px}
.u-d3c169{text-align:end}
.u-d40836{display:grid;gap:5px}
.u-d43169{margin-top:8px}
.u-d6330a{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 38%,transparent)}
.u-dad92a{font-size:13px;margin:0}
.u-ddc34a{margin-top:12px;text-align:center}
.u-defe7d{margin-top:-4px}
.u-e0e9ec{display:flex;gap:8px;flex-wrap:wrap}
.u-e1489c{text-align:end;padding:10px 0}
.u-e21139{width:100%;height:120px}
.u-e633ae{display:block;text-align:center}
.u-ede8d2{--w:60%}
.u-ee0936{margin:-4px 0 0;font-size:13px}
.u-f10510{font-size:13px;margin:-6px 0 14px}
.u-f47a4b{margin:0 auto}
.u-fa3e1c{margin-bottom:12px}
.u-feb055{text-align:center;margin-bottom:10px}

/* =========================================================
   v7 — motion identity, onboarding, smooth navigation, branded errors
   ========================================================= */
/* the logo, drawn in */
.logo-anim{width:88px;height:88px;color:var(--ember);overflow:visible}
.logo-anim .la-roof{stroke-dasharray:24;stroke-dashoffset:24;animation:laDraw .7s cubic-bezier(.2,.8,.2,1) .1s forwards}
.logo-anim circle{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:laPop .42s cubic-bezier(.3,1.6,.5,1) forwards}
.logo-anim .la-d1{animation-delay:.6s}.logo-anim .la-d2{animation-delay:.75s}.logo-anim .la-d3{animation-delay:.9s}
@keyframes laDraw{to{stroke-dashoffset:0}}
@keyframes laPop{to{transform:scale(1)}}
/* onboarding */
.ob-body{min-height:100dvh;display:grid;place-items:center;padding:24px 18px calc(24px + env(safe-area-inset-bottom,0px))}
.ob-body .ob{width:min(440px,100%);position:relative}
.ob-body .ob-progress{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.ob-body .ob-progress i{width:28px;height:5px;border-radius:99px;background:var(--line-2);transition:background .3s,width .3s}
.ob-body .ob-progress i.on{background:var(--ember);width:40px}
.ob-body .ob-step{display:none;text-align:center;padding:32px 26px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--bayti-shadow);position:relative;overflow:hidden}
.ob-body .ob-step.is-on{display:grid;gap:14px;justify-items:center;animation:hbRise .4s cubic-bezier(.2,.8,.2,1)}
.ob-body .ob-step h1,.ob-body .ob-step h2{margin:4px 0 0}
.ob-body .ob-lead{margin:0;color:var(--dust);font-size:16px;line-height:1.6;max-width:34ch}
.ob-body .ob-form{width:100%;display:grid;gap:12px;text-align:start}
.ob-body .ob-form label{display:grid;gap:6px;font-size:13px;color:var(--dust)}
.ob-body .ob-ideas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ob-body .ob-skip{background:none;border:0;color:var(--dust);font:inherit;font-weight:600;padding:8px 14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ob-body .ob-err{color:var(--danger);font-weight:600;margin:0;font-size:14px}
.ob-body .ob-celebrate{position:absolute;left:50%;top:38%;width:0;height:0;pointer-events:none}
.ob-body .ob-celebrate i{position:absolute;border-radius:50%;transform:translate(-50%,-50%);animation:obBurst 1.1s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes obBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}75%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1)}}
/* smooth page-to-page navigation (Chrome, Edge, Safari 18+; others simply switch pages) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .18s ease both}
::view-transition-new(root){animation:vtIn .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}
.mobile-nav,.topbar{view-transition-name:none}
/* a thin progress line while the next page loads */
.nav-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:2000;pointer-events:none;background:linear-gradient(90deg,transparent,var(--ember),transparent);background-size:40% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s}
body.is-navigating .nav-progress{opacity:1;animation:navSlide 1s ease-in-out infinite}
@keyframes navSlide{from{background-position:-40% 0}to{background-position:140% 0}}
body.is-navigating main.wrap{opacity:.55;transition:opacity .2s}
/* skeleton blocks (used while lists load in place) */
.skeleton{border-radius:12px;background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in srgb,var(--surface-2) 60%,var(--line)) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
/* the designed completion moment: the family dots burst from the check (everyone; kids keep their stars) */
.done-burst{position:fixed;z-index:9998;width:10px;height:10px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:doneBurst .75s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes doneBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1)}}
/* branded error pages */
.err-page{min-height:100dvh;display:grid;place-items:center;padding:24px;text-align:center}
.err-card{width:min(440px,100%);display:grid;gap:12px;justify-items:center;padding:36px 26px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--bayti-shadow)}
.err-code{font-weight:800;font-size:15px;letter-spacing:.12em;color:var(--dust)}
@media (prefers-reduced-motion:reduce){.logo-anim .la-roof{stroke-dashoffset:0;animation:none}.logo-anim circle{transform:none;animation:none}.ob-body .ob-step.is-on{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}body.is-navigating .nav-progress{animation:none}}