:root {
  --ink: #1f2b35;
  --muted: #7d8990;
  --line: #e9e4de;
  --cream: #fffaf4;
  --paper: #ffffff;
  --navy: #243a4d;
  --coral: #ef8065;
  --coral-dark: #d9654d;
  --mint: #bfe5d3;
  --mint-deep: #4d9d7b;
  --lilac: #d9d1ef;
  --sun: #ffd777;
  --shadow: 0 18px 45px rgba(50, 60, 70, 0.08);
  --soft-shadow: 0 8px 22px rgba(50, 60, 70, 0.06);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--cream); }

body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--cream); }

button, input { font: inherit; }

button { border: 0; cursor: pointer; }

button:focus-visible, input:focus-visible { outline: 3px solid rgba(239, 128, 101, 0.35); outline-offset: 2px; }

h1, h2, h3, p { margin: 0; }

h1, h2, h3, .brand, .eyebrow, .nav-item, .primary-button, .light-button, .day-pill, .activity-total { font-family: 'Space Grotesk', 'DM Sans', sans-serif; }

.hidden { display: none !important; }

.background-shape { position: fixed; z-index: -1; width: 370px; height: 370px; border-radius: 50%; filter: blur(3px); pointer-events: none; opacity: .55; }

.shape-one { top: -170px; right: 11%; background: #f6dfbd; }

.shape-two { bottom: -230px; left: -80px; background: #dcefe6; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.04em; }

.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: #fff; background: var(--coral); box-shadow: 0 6px 13px rgba(239, 128, 101, .25); font-size: 17px; }

.brand-light { color: #fff; }

.brand-light .brand-mark { color: var(--navy); background: var(--sun); box-shadow: none; }

.eyebrow { display: block; color: #a0938a; font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }

.light-eyebrow { color: rgba(255, 255, 255, .62); }

/* Auth */

.auth-shell { display: grid; grid-template-columns: minmax(450px, .98fr) minmax(470px, 1.02fr); width: min(1420px, calc(100% - 32px)); min-height: calc(100vh - 32px); margin: 16px auto; border-radius: 29px; box-shadow: var(--shadow); background: rgba(255, 255, 255, .5); overflow: hidden; }

.auth-story { position: relative; display: flex; flex-direction: column; min-height: 750px; padding: 37px 52px 26px; color: #fff; background: var(--navy); overflow: hidden; }

.auth-story::before { position: absolute; top: -140px; right: -110px; width: 420px; height: 420px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; content: ''; box-shadow: 0 0 0 36px rgba(255, 255, 255, .018), 0 0 0 78px rgba(255, 255, 255, .012); }

.auth-story::after { position: absolute; bottom: -220px; left: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(126, 198, 166, .13); content: ''; }

.story-copy { position: relative; z-index: 1; max-width: 440px; margin-top: 110px; }

.story-copy h1 { margin: 13px 0 17px; font-size: clamp(40px, 4.5vw, 65px); font-weight: 600; letter-spacing: -.065em; line-height: .98; }

.story-copy h1 em, .welcome-copy h2 em { color: var(--sun); font-style: normal; }

.story-copy p { max-width: 360px; color: rgba(255, 255, 255, .68); font-size: 15px; line-height: 1.65; }

.story-scene { position: relative; flex: 1; min-height: 310px; margin-top: 18px; }

.sun-disc { position: absolute; top: 37px; left: 24%; width: 112px; height: 112px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 18px rgba(255, 215, 119, .08); }

.scene-cloud { position: absolute; width: 88px; height: 24px; border-radius: 30px; background: rgba(255, 255, 255, .09); }

.scene-cloud::before, .scene-cloud::after { position: absolute; border-radius: 50%; background: inherit; content: ''; }

.scene-cloud::before { bottom: 0; left: 16px; width: 30px; height: 30px; }

.scene-cloud::after { bottom: 0; left: 40px; width: 25px; height: 25px; }

.cloud-left { top: 18px; right: 18%; }

.cloud-right { top: 121px; left: 8%; transform: scale(.65); opacity: .5; }

.scene-ground { position: absolute; bottom: 41px; left: 8%; width: 78%; height: 86px; border-radius: 50% 50% 0 0; background: #6aa987; transform: perspective(200px) rotateX(24deg); opacity: .55; }

.story-pet { position: absolute; z-index: 2; bottom: 86px; left: 39%; display: grid; place-items: center; width: 132px; height: 132px; border: 7px solid #fff; border-radius: 49% 49% 46% 46%; background: #efd0a4; box-shadow: 0 16px 0 rgba(23, 44, 58, .15); transform: rotate(-4deg); }

.story-pet span { font-size: 76px; filter: drop-shadow(0 7px 3px rgba(60, 42, 22, .18)); }

.story-pet i { position: absolute; top: -27px; right: -20px; color: var(--sun); font-size: 24px; font-style: normal; }

.story-pet b { position: absolute; right: -24px; bottom: 16px; display: grid; place-items: center; width: 48px; height: 48px; border: 4px solid var(--navy); border-radius: 16px; color: var(--navy); background: var(--sun); font-size: 16px; transform: rotate(8deg); }

.story-house { position: absolute; z-index: 1; bottom: 70px; left: 23%; width: 184px; height: 140px; border-radius: 50% 50% 9px 9px; background: #e8876a; transform: rotate(-1deg); }

.story-house::before { position: absolute; top: -52px; left: -14px; border-right: 106px solid transparent; border-bottom: 80px solid #d86556; border-left: 106px solid transparent; content: ''; }

.story-house span { position: absolute; bottom: 0; left: 65px; width: 54px; height: 76px; border-radius: 30px 30px 0 0; background: var(--navy); }

.story-house i { position: absolute; top: 39px; left: 26px; width: 38px; height: 31px; border-radius: 7px; background: #ffd979; box-shadow: 92px 0 0 #ffd979; content: ''; }

.story-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 14px; background: rgba(255, 255, 255, .13); box-shadow: 0 10px 30px rgba(11, 25, 34, .16); backdrop-filter: blur(8px); }

.story-card-top { top: 107px; right: 0; }

.story-card-bottom { bottom: 28px; left: 0; }

.story-card strong { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; }

.story-card small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .62); font-size: 9px; white-space: nowrap; }

.mini-icon, .mini-star { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--navy); background: var(--mint); font-size: 14px; font-weight: 800; }

.mini-star { color: #996b1e; background: var(--sun); }

.story-footer { position: relative; z-index: 1; display: flex; gap: 9px; color: rgba(255, 255, 255, .43); font-size: 10px; }

.auth-panel { display: grid; place-items: center; padding: 40px 52px; background: rgba(255, 253, 250, .88); }

.auth-panel-inner { width: min(100%, 470px); }

.auth-panel-inner > .brand { display: none; }

.auth-heading { margin-top: 62px; }

.auth-heading h2 { margin: 10px 0 9px; font-size: clamp(28px, 3vw, 39px); letter-spacing: -.06em; line-height: 1.08; }

.auth-heading p { color: var(--muted); font-size: 14px; line-height: 1.5; }

.auth-tabs { display: flex; gap: 24px; margin: 35px 0 23px; border-bottom: 1px solid var(--line); }

.auth-tab { position: relative; padding: 0 0 12px; color: #a6a09b; background: none; font-size: 13px; font-weight: 700; }

.auth-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 3px; background: transparent; content: ''; }

.auth-tab.active { color: var(--ink); }

.auth-tab.active::after { background: var(--coral); }

.auth-form { display: flex; flex-direction: column; gap: 15px; }

.auth-form label, .pet-choice-fieldset legend { color: #5e6b71; font-size: 11px; font-weight: 700; }

.auth-form label { display: flex; flex-direction: column; gap: 7px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-form input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #e6e1dc; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-size: 13px; transition: border .15s, box-shadow .15s; }

.auth-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(239, 128, 101, .1); }

.auth-form input::placeholder { color: #b4b2ae; }

.label-hint { align-self: flex-end; margin-bottom: -24px; color: #aaa39d; font-size: 10px; font-weight: 500; }

.primary-button, .light-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 47px; padding: 0 19px; border-radius: 12px; font-size: 12px; font-weight: 700; transition: transform .16s, box-shadow .16s, background .16s; }

.primary-button { color: #fff; background: var(--coral); box-shadow: 0 9px 18px rgba(239, 128, 101, .18); }

.primary-button:hover, .light-button:hover, .secondary-button:hover { transform: translateY(-2px); }

.full-button { width: 100%; margin-top: 7px; }

.pet-choice-fieldset { margin: 1px 0 0; padding: 0; border: 0; }

.pet-choice-fieldset legend { margin-bottom: 8px; }

.pet-choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.pet-choice { position: relative; display: grid !important; place-items: center; gap: 3px !important; min-height: 66px; padding: 6px; border: 1px solid #e9e4df; border-radius: 12px; background: #fff; cursor: pointer; transition: border .15s, background .15s, transform .15s; }

.pet-choice:has(input:checked) { border-color: var(--coral); background: #fff4ef; box-shadow: inset 0 0 0 1px var(--coral); }

.pet-choice:hover { transform: translateY(-2px); }

.pet-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.pet-choice span { font-size: 25px; line-height: 1; }

.pet-choice small { color: #807b75; font-size: 9px; font-weight: 700; }

.form-note { margin: -2px 0 0; color: #a09a94; font-size: 10px; line-height: 1.45; }

.form-message { min-height: 19px; margin-top: 14px; color: var(--coral-dark); font-size: 11px; font-weight: 600; line-height: 1.5; }

.form-message.success { color: var(--mint-deep); }

.demo-entry { margin-top: 22px; padding: 13px 14px 12px; border: 1px solid #f0e1d1; border-radius: 14px; background: #fff8ef; }

.demo-entry-label { display: block; color: #776e66; font-size: 10px; font-weight: 700; }

.demo-button { display: inline-flex; align-items: center; gap: 10px; margin-top: 5px; padding: 0; color: var(--coral-dark); background: none; font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; }

.demo-button span { font-size: 16px; transition: transform .16s; }

.demo-button:hover span { transform: translateX(3px); }

.demo-entry small { display: block; margin-top: 4px; color: #a69b91; font-size: 9px; line-height: 1.45; }

.privacy-note { display: flex; align-items: center; gap: 6px; margin-top: 20px; color: #a29c95; font-size: 10px; }

.privacy-note span { color: var(--mint-deep); font-size: 18px; }

.analytics-consent { position: fixed; z-index: 45; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 18px; width: min(620px, calc(100% - 32px)); box-sizing: border-box; padding: 15px 17px; border: 1px solid #eadfd2; border-radius: 16px; background: rgba(255, 253, 249, .97); box-shadow: 0 17px 45px rgba(52, 63, 70, .18); }

.analytics-consent > div:first-child { min-width: 0; flex: 1; }

.analytics-consent strong { color: var(--ink); font-size: 11px; }

.analytics-consent p { margin-top: 5px; color: #918981; font-size: 9px; line-height: 1.5; }

.analytics-consent-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.analytics-consent button { min-height: 33px; padding: 0 11px; border-radius: 9px; font-size: 9px; font-weight: 800; white-space: nowrap; }

.consent-secondary { color: #8c8177; background: #f7f3ed; }

.consent-primary { min-height: 33px; padding: 0 12px; box-shadow: none; }

.story-seo-lede { margin-top: 13px; max-width: 370px !important; color: rgba(255, 255, 255, .58) !important; font-size: 11px !important; line-height: 1.5 !important; }

.story-seo-lede strong { color: var(--sun); }

.seo-content { width: min(1420px, calc(100% - 32px)); margin: 0 auto 32px; padding: 38px clamp(25px, 5vw, 68px) 44px; border: 1px solid #eee5dc; border-radius: 24px; background: rgba(255, 255, 255, .72); box-shadow: var(--soft-shadow); }

.seo-content-inner { max-width: 1080px; margin: 0 auto; }

.seo-content h2 { margin-top: 9px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); font-weight: 600; letter-spacing: -.065em; }

.seo-content-inner > p { max-width: 760px; margin-top: 12px; color: #747f84; font-size: 13px; line-height: 1.7; }

.seo-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 27px; }

.seo-feature-grid article { display: flex; gap: 12px; padding: 17px; border: 1px solid #eee8e1; border-radius: 16px; background: #fff; }

.seo-feature-grid article > span { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: #fff3df; font-size: 20px; }

.seo-feature-grid article:nth-child(2) > span { background: #fff4c9; }

.seo-feature-grid article:nth-child(3) > span { background: #eaf6ed; }

.seo-feature-grid h3 { color: #58666d; font-size: 13px; letter-spacing: -.03em; }

.seo-feature-grid p { margin-top: 6px; color: #9a918a; font-size: 10px; line-height: 1.55; }

.seo-faq { margin-top: 33px; padding-top: 28px; border-top: 1px solid #eee8e1; }

.seo-faq h2 { font-size: 21px; }

.seo-faq article { margin-top: 16px; }

.seo-faq h3 { color: #5d6a70; font-size: 12px; }

.seo-faq p { max-width: 800px; margin-top: 5px; color: #968e87; font-size: 11px; line-height: 1.6; }

/* App shell */

.app-shell { display: flex; min-height: 100vh; background: #faf9f7; }

.sidebar { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; width: 250px; height: 100vh; flex-shrink: 0; padding: 31px 21px 24px; border-right: 1px solid #eeeae6; background: rgba(255, 253, 250, .92); }

.sidebar-top { display: flex; flex-direction: column; }

.sidebar-close { display: none; }

.family-card { display: flex; align-items: center; gap: 9px; margin-top: 48px; padding: 10px; border: 1px solid #ece7e0; border-radius: 14px; background: #fff; }

.family-avatar, .header-avatar { display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; color: #885749; background: #f9dccb; font-size: 11px; font-weight: 800; }

.family-avatar { width: 35px; height: 35px; }

.family-card div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.family-card strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.family-card small { color: #aaa19a; font-size: 9px; }

.online-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #73bf8f; box-shadow: 0 0 0 3px #e2f4e7; }

.main-nav { display: flex; flex-direction: column; gap: 7px; margin-top: 34px; }

.nav-item { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0 13px; border-radius: 11px; color: #9a928b; background: none; font-size: 12px; font-weight: 600; text-align: left; transition: color .15s, background .15s; }

.nav-item span { display: grid; place-items: center; width: 22px; color: #a9a39e; font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 400; }

.nav-item.active, .nav-item:hover { color: var(--coral-dark); background: #fff0eb; }

.nav-item.active span { color: var(--coral); }

.sidebar-bottom { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }

.side-tip { display: flex; gap: 9px; padding: 12px 10px; border-radius: 13px; background: #eff8f2; }

.side-tip > span { color: var(--mint-deep); font-size: 18px; }

.side-tip strong { display: block; color: #488466; font-size: 10px; }

.side-tip p { margin-top: 4px; color: #7ba18d; font-size: 9px; line-height: 1.35; }

.signout-button { display: flex; align-items: center; gap: 11px; padding: 0 10px; color: #a59d96; background: none; font-size: 11px; font-weight: 600; text-align: left; }

.signout-button > .signout-icon { font-size: 18px; }

.signout-button:hover { color: var(--coral-dark); }

.version-label { padding: 0 10px; color: #c0b9b3; font-size: 9px; }

.sidebar-overlay { display: none; }

.main-panel { width: min(100%, 1360px); min-width: 0; margin: 0 auto; padding: 31px clamp(25px, 4vw, 66px) 52px; }

.main-header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin-bottom: 38px; }

.header-title { display: flex; align-items: center; gap: 13px; }

.header-title h1 { margin-top: 7px; color: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -.055em; }

.mode-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 4px 7px; border-radius: 7px; color: #9b6e1f; background: #fff3ca; font-size: 8px; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: none; vertical-align: middle; }

.header-actions { display: flex; align-items: center; gap: 17px; }

.sound-button { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #9b7652; background: #fff4e8; font-size: 15px; transition: transform .16s, background .16s, filter .16s; }

.sound-button:hover { transform: translateY(-2px); background: #ffead9; }

.sound-button[aria-pressed="false"] { filter: grayscale(.9); color: #aaa29a; background: #f4f2ef; }

.notification-button { position: relative; display: grid; place-items: center; width: 33px; height: 33px; color: #90999c; background: none; font-size: 25px; transform: rotate(45deg); }

.notification-button i { position: absolute; top: 4px; right: 1px; width: 6px; height: 6px; border: 2px solid #faf9f7; border-radius: 50%; background: var(--coral); }

.header-avatar { width: 36px; height: 36px; border-radius: 13px; }

.mobile-menu { display: none; width: 35px; height: 35px; border-radius: 10px; color: var(--ink); background: #fff; font-size: 18px; }

.content-view[hidden] { display: none; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .9fr); gap: 20px; }

.welcome-card { position: relative; min-height: 340px; padding: 38px 38px 0; border-radius: 22px; color: #fff; background: #5b7890; overflow: hidden; box-shadow: var(--soft-shadow); }

.welcome-card::before { position: absolute; top: -120px; right: -95px; width: 310px; height: 310px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; content: ''; box-shadow: 0 0 0 35px rgba(255, 255, 255, .035), 0 0 0 72px rgba(255, 255, 255, .025); }

.welcome-copy { position: relative; z-index: 1; max-width: 310px; }

.welcome-copy h2 { margin: 12px 0 10px; color: #fff; font-size: clamp(31px, 3.3vw, 49px); font-weight: 600; letter-spacing: -.08em; line-height: .98; }

.welcome-copy p { max-width: 270px; color: rgba(255, 255, 255, .67); font-size: 12px; line-height: 1.55; }

.light-button { min-height: 39px; margin-top: 24px; color: var(--navy); background: var(--sun); font-size: 10px; }

.welcome-stars { position: absolute; top: 0; right: 0; width: 49%; height: 73%; }

.welcome-stars .star { position: absolute; color: rgba(255, 255, 255, .7); }

.star-one { top: 43px; right: 28%; font-size: 22px; }

.star-two { top: 105px; right: 6%; font-size: 12px; }

.star-three { top: 71px; right: 17%; font-size: 29px; opacity: .45; }

.sun-orb { position: absolute; top: 70px; right: 24%; display: grid; place-items: center; width: 98px; height: 98px; border-radius: 50%; color: #d3923c; background: var(--sun); box-shadow: 0 0 0 13px rgba(255, 215, 119, .11); font-size: 42px; }

.welcome-wave { position: absolute; right: -7%; bottom: -20px; left: -7%; height: 103px; border-radius: 50% 50% 0 0; background: #708da0; transform: rotate(-3deg); }

.welcome-stats { position: absolute; z-index: 2; right: 36px; bottom: 20px; left: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.welcome-stats div { display: flex; flex-direction: column; gap: 4px; }

.welcome-stats small { color: rgba(255, 255, 255, .58); font-size: 9px; }

.welcome-stats strong { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: -.04em; }

.welcome-stats strong small { color: rgba(255, 255, 255, .6); font-size: 9px; font-weight: 500; }

.pet-card { position: relative; z-index: 1; order: -1; min-height: 410px; padding: 23px 24px 20px; border: 1px solid #ebe6e0; border-radius: 22px; background: #fff; box-shadow: var(--soft-shadow); overflow: hidden; }

.card-heading, .panel-heading, .section-heading, .page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }

.card-heading h2, .panel-heading h2, .section-heading h2 { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.055em; }

.more-button { width: 29px; height: 29px; border-radius: 9px; color: #a7a09a; background: #f7f5f2; font-size: 12px; letter-spacing: 2px; }

.pet-stage { position: relative; height: 185px; margin-top: 8px; overflow: hidden; }

.pet-glow { position: absolute; top: 35px; left: 50%; width: 130px; height: 130px; border-radius: 50%; background: #fff3ce; transform: translateX(-50%); }

.pet-avatar { position: absolute; z-index: 3; top: 42px; left: 50%; display: grid; place-items: center; width: 105px; height: 105px; padding: 0; border: 5px solid #fff; border-radius: 43% 43% 48% 48%; background: #f5d5a6; box-shadow: 0 13px 17px rgba(70, 57, 42, .15); font-size: 62px; line-height: 1; transform: translateX(-50%) rotate(-3deg); transition: transform .25s, filter .25s; }

.pet-avatar:hover { filter: brightness(1.04); }

.pet-avatar:focus-visible { outline: 3px solid rgba(239, 128, 101, .35); outline-offset: 3px; }

.pet-avatar.pet-bounce { animation: pet-bounce .55s ease; }

.pet-avatar.pet-level-up { animation: pet-level-up 1.7s cubic-bezier(.2,.8,.2,1); }

@keyframes pet-bounce { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 35% { transform: translateX(-50%) translateY(-13px) rotate(4deg); } 70% { transform: translateX(-50%) translateY(0) rotate(-4deg); } }

@keyframes pet-level-up { 0% { transform: translateX(-50%) scale(.72) rotate(-3deg); filter: brightness(1); } 35% { transform: translateX(-50%) scale(1.28) rotate(-5deg); filter: brightness(1.35); } 58% { transform: translateX(-50%) scale(.94) rotate(4deg); } 78% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1) rotate(-3deg); filter: brightness(1); } }

.pet-spark { position: absolute; z-index: 3; color: var(--coral); font-size: 18px; }

.spark-a { top: 29px; left: 26%; }

.spark-b { top: 71px; right: 24%; color: #8fc3a7; font-size: 11px; }

.pet-bubble { position: absolute; z-index: 4; top: 8px; right: 6%; padding: 7px 10px; border-radius: 10px 10px 10px 3px; color: #6f665e; background: #fff5e8; font-size: 9px; font-weight: 600; }

.pet-floor { position: absolute; right: 10%; bottom: 8px; left: 10%; height: 31px; border-radius: 50%; background: #eff8f1; transform: perspective(80px) rotateX(28deg); }

.pet-progress { position: relative; z-index: 2; }

.progress-label { display: flex; justify-content: space-between; color: #a29890; font-size: 10px; }

.progress-label strong { color: var(--ink); }

.progress-label b { color: var(--mint-deep); }

.progress-track { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 9px; background: #edf0ed; }

.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mint-deep); transition: width .3s ease; }

.pet-progress p { margin-top: 7px; color: #a39b93; font-size: 9px; }

.pet-picker { position: absolute; z-index: 6; right: 17px; bottom: 17px; left: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid #eee3d9; border-radius: 13px; background: rgba(255, 255, 255, .97); box-shadow: var(--soft-shadow); }

.pet-picker > span { color: #8e847b; font-size: 9px; font-weight: 700; }

.pet-picker > div { display: flex; gap: 5px; }

.pet-picker button { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #fff4eb; font-size: 16px; }

.pet-picker button:hover { background: #e9f7ee; }

/* Companion home, vehicle and level progression, adapted from the original pet machine. */

.pet-home { position: absolute; z-index: 1; bottom: 11px; left: 4%; width: 108px; height: 84px; pointer-events: none; filter: drop-shadow(0 5px 4px rgba(84, 62, 43, .13)); }

.home-chimney { position: absolute; z-index: 1; top: 8px; left: 70px; width: 12px; height: 25px; border: 2px solid #fff8dc; border-bottom: 0; border-radius: 4px 4px 0 0; background: #bd7445; }

.home-wall { position: absolute; z-index: 2; top: 28px; right: 0; left: 11px; height: 49px; border: 2px solid #fff8dc; border-radius: 6px 6px 4px 4px; background: linear-gradient(160deg, rgba(255,255,255,.3), transparent 55%), #ffedc6; box-shadow: inset 0 -5px 0 rgba(128,91,53,.08); }

.home-roof { position: absolute; z-index: 3; top: 0; left: 0; width: 108px; height: 43px; background: #cf784f; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 3px 0 rgba(96,63,42,.18)); }

.home-window { position: absolute; z-index: 1; top: 11px; width: 13px; height: 13px; border: 2px solid #fff8dc; border-radius: 4px; background: #9dcfe0; box-shadow: inset 0 0 0 1px rgba(58,91,104,.1); }

.home-window-left { left: 18px; }

.home-window-right { right: 23px; }

.home-door { position: absolute; z-index: 2; right: 5px; bottom: 0; width: 20px; height: 29px; border: 2px solid #fff8dc; border-bottom: 0; border-radius: 8px 8px 0 0; background: #9c5c46; }

.home-door::after { position: absolute; top: 15px; right: 3px; width: 3px; height: 3px; border-radius: 50%; background: #ffe9a8; content: ''; }

.home-sign { position: absolute; z-index: 2; top: -2px; right: 35px; display: grid; place-items: center; width: 17px; height: 16px; border: 2px solid #fff8dc; border-radius: 5px; color: #fff8dc; background: #cf784f; font-size: 9px; line-height: 1; }

.home-ground { position: absolute; z-index: 0; right: -5px; bottom: 6px; left: 1px; height: 16px; border-radius: 50%; background: #80be85; }

.home-path { position: absolute; z-index: 1; right: 0; bottom: 0; width: 27px; height: 14px; border-radius: 50% 50% 0 0; background: #ead09a; transform: rotate(-10deg); }

.home-flower { position: absolute; z-index: 2; bottom: 15px; color: #fff5bd; font-size: 10px; line-height: 1; text-shadow: 0 1px 2px rgba(82,66,39,.18); }

.home-flower-one { left: 3px; }

.home-flower-two { right: -2px; bottom: 19px; color: #f8b5ad; }

.pet-vehicle { position: absolute; z-index: 4; right: 2%; bottom: 10px; width: 88px; height: 42px; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(45,55,47,.2)); }

.vehicle-scooter { position: absolute; right: 17px; bottom: 2px; width: 57px; height: 34px; color: #4e7184; }

.scooter-wheel { position: absolute; bottom: 0; width: 10px; height: 10px; border: 3px solid #354653; border-radius: 50%; background: #e8f0ec; }

.scooter-wheel.rear { left: 4px; }

.scooter-wheel.front { right: 2px; }

.scooter-deck { position: absolute; bottom: 6px; left: 6px; width: 42px; height: 5px; border-radius: 5px; background: linear-gradient(#99d5df, #518da4); box-shadow: 0 1px 0 #365f72; }

.scooter-stem { position: absolute; right: 8px; bottom: 13px; width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(90deg, #567b8e, #d8eced); transform: rotate(-16deg); transform-origin: bottom; }

.scooter-handle { position: absolute; top: 1px; right: 3px; width: 15px; height: 4px; border-radius: 4px; background: #435b69; }

.scooter-lamp { position: absolute; top: 8px; right: 0; width: 5px; height: 5px; border-radius: 50%; background: #ffe9a1; box-shadow: 0 0 5px #fff2bd; }

.vehicle-car { --car-width: 72px; --car-color: #8ea7a5; --car-window: #d9f3f2; --wheel-accent: #52636c; display: none; position: absolute; right: 0; bottom: 1px; width: var(--car-width); height: 40px; }

.car-body { position: absolute; z-index: 2; bottom: 6px; left: 0; width: var(--car-width); height: 14px; border: 1px solid rgba(52,67,73,.22); border-radius: 5px 11px 5px 5px; background: linear-gradient(180deg, rgba(255,255,255,.54), transparent 45%), var(--car-color); box-shadow: inset 0 -3px 0 rgba(50,60,66,.12); }

.car-roof { position: absolute; z-index: 1; bottom: 18px; left: var(--roof-left,19px); width: var(--roof-width,37px); height: var(--roof-height,13px); border-radius: 12px 12px 2px 2px; background: var(--car-color); clip-path: polygon(21% 0,78% 0,100% 100%,0 100%); }

.car-window { position: absolute; z-index: 3; bottom: 20px; left: calc(var(--roof-left,19px) + 5px); width: calc(var(--roof-width,37px) - 10px); height: 8px; border-radius: 8px 8px 1px 1px; background: linear-gradient(140deg, #f5ffff, var(--car-window) 50%, #a9c9d2); clip-path: polygon(20% 0,78% 0,100% 100%,0 100%); }

.car-wheel { position: absolute; z-index: 4; bottom: 1px; left: 10px; width: 12px; height: 12px; border: 3px solid #35414a; border-radius: 50%; background: #dce4df; box-shadow: inset 0 0 0 1px var(--wheel-accent); }

.car-wheel.front { left: calc(var(--car-width) - 21px); }

.car-light { position: absolute; z-index: 3; bottom: 10px; width: 5px; height: 4px; border-radius: 3px; }

.car-light.front { right: 1px; background: #fff3b3; box-shadow: 0 0 4px #fff6c7; }

.car-light.rear { left: 0; background: #ff8174; }

.car-body::after { position: absolute; top: 3px; left: 50%; width: 1px; height: 8px; background: rgba(52,67,73,.2); content: ''; }

.pet-stage:is([data-level="8"],[data-level="9"],[data-level="10"],[data-level="11"],[data-level="12"],[data-level="13"],[data-level="14"],[data-level="15"],[data-level="16"],[data-level="17"],[data-level="18"],[data-level="19"],[data-level="20"]) .vehicle-scooter { display: none; }

.pet-stage:is([data-level="8"],[data-level="9"],[data-level="10"],[data-level="11"],[data-level="12"],[data-level="13"],[data-level="14"],[data-level="15"],[data-level="16"],[data-level="17"],[data-level="18"],[data-level="19"],[data-level="20"]) .vehicle-car { display: block; }

.pet-stage[data-level="8"] .vehicle-car { --car-width: 68px; --car-color: #79aa8a; --roof-left: 18px; --roof-width: 35px; --roof-height: 12px; --wheel-accent: #47755b; }

.pet-stage[data-level="9"] .vehicle-car { --car-width: 71px; --car-color: #78a8c8; --roof-left: 19px; --roof-width: 37px; --wheel-accent: #4e758e; }

.pet-stage[data-level="10"] .vehicle-car { --car-width: 74px; --car-color: #d76c57; --roof-left: 20px; --roof-width: 37px; --wheel-accent: #954b43; }

.pet-stage[data-level="11"] .vehicle-car { --car-width: 78px; --car-color: #619c72; --roof-left: 19px; --roof-width: 43px; --roof-height: 15px; --wheel-accent: #416849; }

.pet-stage[data-level="12"] .vehicle-car { --car-width: 79px; --car-color: #d9a655; --roof-left: 17px; --roof-width: 47px; --roof-height: 17px; --wheel-accent: #94733d; }

.pet-stage[data-level="13"] .vehicle-car { --car-width: 81px; --car-color: #42a99d; --roof-left: 19px; --roof-width: 45px; --roof-height: 16px; --wheel-accent: #337e77; }

.pet-stage[data-level="14"] .vehicle-car { --car-width: 80px; --car-color: #aab6c0; --roof-left: 22px; --roof-width: 39px; --wheel-accent: #667581; }

.pet-stage[data-level="15"] .vehicle-car { --car-width: 82px; --car-color: #ece9dc; --car-window: #b8dce3; --roof-left: 23px; --roof-width: 40px; --wheel-accent: #a27948; }

.pet-stage[data-level="16"] .vehicle-car { --car-width: 84px; --car-color: #dd5548; --roof-left: 27px; --roof-width: 35px; --roof-height: 10px; --wheel-accent: #a43d35; }

.pet-stage[data-level="17"] .vehicle-car { --car-width: 84px; --car-color: #e7b848; --roof-left: 33px; --roof-width: 28px; --roof-height: 5px; --wheel-accent: #9c7733; }

.pet-stage[data-level="17"] .car-window { height: 4px; bottom: 21px; }

.pet-stage[data-level="18"] .vehicle-car { --car-width: 86px; --car-color: #eb7647; --roof-left: 29px; --roof-width: 34px; --roof-height: 8px; --wheel-accent: #a95035; }

.pet-stage[data-level="19"] .vehicle-car { --car-width: 88px; --car-color: #496fc0; --car-window: #b7f3ed; --roof-left: 31px; --roof-width: 35px; --roof-height: 9px; --wheel-accent: #c3a660; }

.pet-stage[data-level="20"] .vehicle-car { --car-width: 90px; --car-color: #734da9; --car-window: #a9f4f1; --roof-left: 32px; --roof-width: 36px; --roof-height: 10px; --wheel-accent: #edca76; filter: drop-shadow(0 0 5px rgba(138,102,213,.45)); }

.pet-level-badge { position: absolute; z-index: 5; top: 55px; right: 29%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #fff; background: var(--coral); box-shadow: 0 5px 10px rgba(239,128,101,.22); font-size: 12px; transform: rotate(10deg); }

.equipment-bar { position: relative; z-index: 2; margin-top: 8px; padding: 7px 9px; border: 1px solid #f0e5db; border-radius: 13px; background: #fffaf5; }

.equipment-bar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #765e45; font-size: 10px; }

.equipment-bar-heading span { color: #aa9b8d; font-size: 9px; }

.equipment-items { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 1px; scrollbar-width: thin; }

.equipment-chip { display: inline-flex; flex: none; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 8px; color: #704f35; background: #fff3db; font-size: 9px; font-weight: 800; white-space: nowrap; }

.equipment-chip span { font-size: 12px; }

.equipment-empty { color: #9b8e82; font-size: 9px; white-space: nowrap; }

/* Growth gallery: each card makes the next home, vehicle or companion upgrade visible. */

.level-showcase { margin: 28px 0 3px; min-width: 0; }

.level-showcase-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 2px 11px; }

.level-showcase-heading h2 { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.055em; }

.level-showcase-heading > span { padding: 6px 9px; border-radius: 10px; color: #b36c4d; background: #fff0e6; font-size: 9px; font-weight: 700; text-align: right; }

.level-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 9px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-color: #e4c8ae transparent; scrollbar-width: thin; }

.level-card { position: relative; display: flex; min-height: 153px; flex-direction: column; align-items: center; overflow: hidden; padding: 10px 8px; border: 1px solid #eadfd4; border-radius: 18px; background: rgba(255,255,255,.72); scroll-snap-align: start; }

.level-card.current { border: 2px solid var(--coral); background: #fff8ed; box-shadow: 0 7px 18px rgba(224,107,67,.15); }

.level-card.locked { filter: saturate(.55); opacity: .7; }

.level-card.unlocked::after { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #61b88a; content: '✓'; font-size: 10px; }

.level-number { align-self: flex-start; color: #9b7652; font-size: 9px; font-weight: 900; }

.level-preview { position: relative; display: grid; place-items: center; height: 58px; transform: scale(var(--preview-size)); transform-origin: 50% 55%; }

.preview-pet { color: var(--ink); filter: drop-shadow(0 4px 3px rgba(76,54,38,.15)); font-size: 36px; line-height: 1; }

.level-preview i { position: absolute; top: 2px; right: -8px; color: #d3923c; font-size: 17px; font-style: normal; }

.level-card > strong { margin-top: 2px; font-size: 10px; text-align: center; }

.level-card > small { height: 24px; margin-top: 2px; color: #9b7652; font-size: 8px; line-height: 1.35; text-align: center; }

.level-card > b { margin-top: 4px; padding: 3px 7px; border-radius: 8px; color: #88715d; background: #f3ece4; font-size: 8px; white-space: nowrap; }

.level-card.current > b { color: #fff; background: var(--coral); }

.level-card.locked > b { background: #eee9e3; }

.section-heading { align-items: flex-end; margin: 34px 0 15px; }

.text-button { padding: 4px 0; color: var(--coral-dark); background: none; font-size: 10px; font-weight: 700; }

.text-button span { margin-left: 4px; font-size: 15px; }

.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.insight-card { display: flex; align-items: center; gap: 11px; min-height: 93px; padding: 15px; border: 1px solid #ebe7e1; border-radius: 17px; background: #fff; box-shadow: var(--soft-shadow); }

.insight-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; font-size: 17px; }

.icon-coral { color: #dc725e; background: #fff0e9; }

.icon-mint { color: #4d9d7b; background: #e8f5ed; }

.icon-lilac { color: #8678b3; background: #f0ecfb; }

.insight-card div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.insight-card small { color: #9b9189; font-size: 9px; }

.insight-card strong { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -.05em; }

.insight-card strong small { color: #8e9892; font-size: 9px; font-weight: 500; }

.insight-card p { overflow: hidden; color: #aaa29a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.insight-arrow { align-self: flex-start; margin-left: auto; color: #c1b8af; font-size: 17px; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 18px; margin-top: 18px; }

.panel-card { padding: 23px 24px; border: 1px solid #ebe7e1; border-radius: 19px; background: #fff; box-shadow: var(--soft-shadow); }

.round-arrow { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: var(--coral); font-size: 16px; }

.routine-preview-list, .activity-list { display: flex; flex-direction: column; }

.routine-preview-list { gap: 9px; margin-top: 21px; }

.routine-row { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px; border-radius: 12px; background: #fcfbf9; }

.routine-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; font-size: 18px; }

.tone-peach { background: #fff0e8; }
.tone-lilac { background: #f0ecfb; }
.tone-mint { background: #e8f6ed; }
.tone-sun { background: #fff8d9; }
.tone-blue { background: #e8f2fa; }
.tone-sage { background: #edf5ea; }

.routine-row-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }

.routine-row-copy strong { overflow: hidden; color: #526069; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.routine-row-copy small { overflow: hidden; color: #aaa29b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.routine-check { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid #e6e1dc; border-radius: 8px; color: #b4aba4; background: #fff; font-size: 13px; font-weight: 800; }

.routine-check.done { border-color: var(--mint-deep); color: #fff; background: var(--mint-deep); }

.routine-row.is-done { background: #f2faf4; }

.routine-row.is-done .routine-row-copy strong { color: #6f8f7d; text-decoration: line-through; text-decoration-color: #b6d9c2; }

.compact-activity { gap: 0; margin-top: 15px; }

.activity-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0ece7; }

.activity-item:last-child { border-bottom: 0; }

.activity-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: #fff4e8; font-size: 17px; }

.activity-item > div { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }

.activity-item strong { overflow: hidden; color: #69757a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.activity-item small { color: #aaa29a; font-size: 9px; }

.activity-points { color: var(--mint-deep); font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; }

.empty-activity { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 170px; padding: 20px; text-align: center; }

.empty-activity > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 13px; color: #d99855; background: #fff6de; font-size: 22px; }

.empty-activity strong { color: #727d80; font-size: 11px; }

.empty-activity p { margin-top: 5px; color: #afa7a0; font-size: 9px; line-height: 1.45; }

/* Routines and activity pages */

.page-intro { align-items: flex-end; margin-bottom: 26px; }

.page-intro h2 { margin: 8px 0 7px; font-size: 30px; font-weight: 600; letter-spacing: -.07em; }

.page-intro p { color: #918982; font-size: 12px; line-height: 1.5; }

.day-pill, .activity-total { display: flex; flex-direction: column; gap: 4px; min-width: 145px; padding: 12px 15px; border-radius: 13px; color: #6d9b80; background: #eaf6ed; text-align: right; }

.day-pill span, .activity-total span { color: #91ad9b; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600; }

.day-pill strong { font-size: 13px; }

.routine-banner { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; padding: 14px 16px; border-radius: 15px; background: #fff1e9; }

.banner-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #d76850; background: #fff; font-size: 17px; }

.routine-banner div { flex: 1; }

.routine-banner strong { color: #8a5d51; font-size: 11px; }

.routine-banner p { margin-top: 4px; color: #b58b80; font-size: 9px; }

.banner-stars { color: #dd856b; font-size: 10px; font-weight: 700; }

.routine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.routine-card { position: relative; display: flex; flex-direction: column; min-height: 193px; padding: 19px; border: 1px solid #ebe7e1; border-radius: 17px; background: #fff; box-shadow: var(--soft-shadow); transition: transform .18s, box-shadow .18s; }

.routine-card:hover { transform: translateY(-3px); box-shadow: 0 13px 25px rgba(50, 60, 70, .1); }

.routine-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.routine-card .routine-icon { width: 43px; height: 43px; font-size: 22px; }

.routine-points { padding: 6px 8px; border-radius: 8px; color: #7e9b88; background: #eef8f0; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; }

.routine-card h3 { margin-top: 18px; color: #53616a; font-size: 14px; letter-spacing: -.04em; }

.routine-card p { margin-top: 6px; color: #a39a92; font-size: 10px; line-height: 1.45; }

.routine-card .routine-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 33px; margin-top: auto; padding: 0 12px; border-radius: 9px; color: #d86e58; background: #fff2ed; font-size: 10px; font-weight: 700; }

.routine-card .routine-action:hover { background: #ffe7df; }

.routine-card.is-done { border-color: #cfe8d6; background: #f7fcf8; }

.routine-card.is-done .routine-action { color: #fff; background: var(--mint-deep); }

.routine-card.is-done h3 { color: #699078; }

.activity-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 19px; }

.timeline-count { padding: 6px 9px; border-radius: 8px; color: #79a089; background: #eef8f0; font-size: 9px; font-weight: 700; }

.full-activity { margin-top: 18px; }

.large-empty { min-height: 270px; }

.secondary-button { min-height: 34px; margin-top: 15px; color: #5b8e71; background: #ebf7ee; font-size: 10px; }

.parent-note { align-self: start; padding: 25px 22px; border: 0; background: #344c5e; color: #fff; }

.note-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 13px; color: #9ed5b8; background: rgba(255, 255, 255, .1); font-size: 21px; }

.parent-note .eyebrow { color: rgba(255, 255, 255, .52); }

.parent-note h3 { margin-top: 13px; color: #fff; font-size: 24px; font-weight: 500; letter-spacing: -.07em; line-height: 1.02; }

.parent-note > p { margin-top: 15px; color: rgba(255, 255, 255, .64); font-size: 11px; line-height: 1.65; }

.note-signature { display: flex; align-items: center; gap: 8px; margin-top: 38px; color: #a7d8bc; font-size: 10px; font-weight: 700; }

.note-signature span { font-size: 17px; }

/* Parent management */

.parent-access-pill { display: flex; min-width: 154px; flex-direction: column; gap: 4px; padding: 12px 15px; border: 1px solid #f2e4b6; border-radius: 13px; color: #9a762c; background: #fff8df; text-align: right; }

.parent-access-pill span { color: #b49a5e; font-size: 9px; font-weight: 600; }

.parent-access-pill strong { font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-size: 12px; }

.parent-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 19px; }

.parent-account-card, .parent-settings-card { min-height: 264px; }

.parent-routines-card { grid-column: 1 / -1; }

.parent-lock, .settings-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--mint-deep); background: #ebf7ee; font-size: 14px; }

.settings-icon { color: #c98945; background: #fff3df; }

.parent-card-copy { margin-top: 15px; color: #968d86; font-size: 11px; line-height: 1.55; }

.parent-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 15px; margin-top: 23px; }

.parent-facts div { min-width: 0; padding: 11px 12px; border-radius: 11px; background: #faf8f5; }

.parent-facts small { display: block; color: #aaa098; font-size: 9px; }

.parent-facts strong { display: block; overflow: hidden; margin-top: 5px; color: #59676e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.parent-settings-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 13px; margin-top: 17px; }

.parent-settings-form label { display: flex; flex-direction: column; gap: 7px; color: #776e66; font-size: 10px; font-weight: 700; }

.parent-settings-form input, .parent-settings-form select { width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid #e6e1dc; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }

.parent-settings-form input:focus, .parent-settings-form select:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(239, 128, 101, .1); }

.parent-settings-form button { grid-column: 1 / -1; min-height: 39px; margin-top: 2px; }

.parent-settings-message { min-height: 17px; margin-top: 10px; }

.parent-routine-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 17px; }

.parent-routine-list .routine-row { min-width: 0; background: #fbfaf8; }

.parent-routines-card .secondary-button { margin-top: 17px; }

/* Celebrations */

.confetti { position: fixed; z-index: 40; inset: 0; overflow: hidden; pointer-events: none; }

.confetti i { position: absolute; top: 9%; width: 8px; height: 13px; border-radius: 3px; opacity: 0; animation: confetti-fall 1.8s ease-out forwards; }

@keyframes confetti-fall { 0% { opacity: 0; transform: translate3d(0, -15px, 0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift), 82vh, 0) rotate(620deg); } }

.celebration { position: fixed; z-index: 35; inset: 0; display: grid; place-items: center; visibility: hidden; background: rgba(35, 52, 65, .12); opacity: 0; pointer-events: none; transition: visibility .2s, opacity .2s; }

.celebration.show { visibility: visible; opacity: 1; }

.celebration-card { position: relative; display: flex; width: min(300px, calc(100% - 40px)); flex-direction: column; align-items: center; padding: 28px 25px 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 26px; background: #fffdf9; box-shadow: 0 25px 70px rgba(52,39,29,.24); transform: translateY(14px) scale(.88); transition: transform .28s cubic-bezier(.2,.8,.2,1.2); }

.celebration.show .celebration-card { transform: translateY(0) scale(1); }

.celebration-pet { display: grid; place-items: center; width: 98px; height: 98px; border: 5px solid #fff; border-radius: 43% 43% 48% 48%; background: #f5d5a6; box-shadow: 0 13px 17px rgba(70,57,42,.15); font-size: 58px; animation: celebration-pet-bounce .9s ease-in-out infinite alternate; }

@keyframes celebration-pet-bounce { to { transform: translateY(-9px) rotate(4deg); } }

.celebration-card strong { margin-top: 17px; color: var(--ink); font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-size: 20px; letter-spacing: -.05em; }

.celebration-card p { margin-top: 5px; color: #8e8882; font-size: 11px; text-align: center; }

.celebration-level { margin-top: 13px; padding: 6px 10px; border-radius: 9px; color: #9b6e1f; background: #fff3ca; font-size: 9px; font-weight: 800; }

.celebration-spark { position: absolute; color: var(--coral); font-size: 24px; }

.celebration-spark-one { top: 25px; left: 34px; }

.celebration-spark-two { top: 79px; right: 38px; color: #76b995; font-size: 14px; }

/* Toast */

.toast { position: fixed; z-index: 20; right: 26px; bottom: 25px; display: flex; align-items: center; gap: 11px; min-width: 220px; max-width: min(360px, calc(100% - 32px)); padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; color: var(--ink); background: rgba(255, 255, 255, .96); box-shadow: 0 14px 36px rgba(51, 65, 75, .18); transform: translateY(130%); transition: transform .25s ease; }

.toast.show { transform: translateY(0); }

.toast > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: #ce754f; background: #fff1e8; }

.toast strong { display: block; font-size: 11px; }

.toast p { margin-top: 3px; color: #8e8882; font-size: 9px; }

@media (max-width: 1080px) {
  .auth-shell { grid-template-columns: minmax(390px, .9fr) minmax(440px, 1.1fr); }
  .auth-story { padding-right: 36px; padding-left: 36px; }
  .story-copy { margin-top: 85px; }
  .auth-panel { padding-right: 34px; padding-left: 34px; }
  .main-panel { padding-right: 35px; padding-left: 35px; }
  .welcome-card { padding-left: 29px; }
  .welcome-stats { left: 29px; }
  .routine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; width: min(100% - 20px, 580px); min-height: auto; margin: 10px auto; }
  .auth-story { min-height: 430px; padding: 25px 28px 21px; }
  .story-copy { margin-top: 47px; }
  .story-copy h1 { max-width: 410px; font-size: 46px; }
  .story-scene { min-height: 210px; }
  .sun-disc { top: 10px; left: 24%; width: 78px; height: 78px; }
  .story-house { bottom: 20px; left: 24%; transform: scale(.75); transform-origin: bottom left; }
  .story-pet { bottom: 42px; left: 42%; transform: scale(.76) rotate(-4deg); }
  .story-card-top { top: 27px; right: 0; }
  .story-card-bottom { bottom: 2px; left: 0; }
  .auth-panel { min-height: 650px; padding: 35px 28px 45px; }
  .auth-panel-inner > .brand { display: inline-flex; }
  .auth-heading { margin-top: 42px; }
  .seo-content { width: min(100% - 20px, 580px); padding: 30px 28px 35px; }
  .seo-feature-grid { grid-template-columns: 1fr; }
  .app-shell { position: relative; }
  .sidebar { position: fixed; left: 0; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 12px 0 35px rgba(31, 43, 53, .14); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { position: absolute; top: 28px; right: 20px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #9d958d; background: #f8f5f1; font-size: 20px; }
  .sidebar-overlay { position: fixed; z-index: 9; inset: 0; display: block; visibility: hidden; background: rgba(31, 43, 53, .22); opacity: 0; transition: visibility .22s, opacity .22s; }
  .sidebar-overlay.open { visibility: visible; opacity: 1; }
  .main-panel { width: 100%; padding: 24px 22px 45px; }
  .mobile-menu { display: block; }
  .main-header { margin-bottom: 28px; }
  .header-title h1 { font-size: 22px; }
  .hero-grid { grid-template-columns: 1fr; }
  .welcome-card { min-height: 310px; }
  .pet-card { min-height: 410px; }
}

@media (max-width: 620px) {
  .auth-story { min-height: 370px; }
  .story-copy h1 { font-size: 39px; }
  .story-copy p { max-width: 300px; font-size: 13px; }
  .story-scene { min-height: 175px; }
  .story-pet { left: 41%; transform: scale(.63) rotate(-4deg); }
  .story-house { left: 17%; transform: scale(.62); }
  .story-card { transform: scale(.88); transform-origin: bottom left; }
  .story-card-top { top: 20px; right: -12px; transform-origin: top right; }
  .story-footer { font-size: 9px; }
  .auth-panel { padding-right: 20px; padding-left: 20px; }
  .seo-content { width: min(100% - 20px, 580px); padding: 27px 20px 32px; }
  .form-row { grid-template-columns: 1fr; gap: 15px; }
  .auth-heading h2 { font-size: 32px; }
  .main-panel { padding-right: 15px; padding-left: 15px; }
  .main-header { align-items: flex-start; }
  .header-actions { gap: 8px; }
  .header-title h1 { font-size: 19px; }
  .header-title .eyebrow { font-size: 8px; }
  .mode-badge { margin-left: 4px; padding: 3px 5px; font-size: 7px; }
  .welcome-card { min-height: 335px; padding: 29px 25px 0; }
  .welcome-copy h2 { font-size: 39px; }
  .welcome-stars { width: 43%; }
  .sun-orb { right: 14%; width: 73px; height: 73px; font-size: 30px; }
  .welcome-stats { right: 25px; bottom: 18px; left: 25px; }
  .welcome-stats strong { font-size: 16px; }
  .section-heading { margin-top: 27px; }
  .section-heading h2, .panel-heading h2 { font-size: 17px; }
  .insight-grid { grid-template-columns: 1fr; gap: 9px; }
  .insight-card { min-height: 67px; }
  .content-grid { grid-template-columns: 1fr; }
  .panel-card { padding: 19px 17px; }
  .page-intro { align-items: flex-start; flex-direction: column; gap: 15px; }
  .page-intro h2 { font-size: 28px; }
  .day-pill, .activity-total { align-self: stretch; min-width: 0; text-align: left; }
  .routine-grid { grid-template-columns: 1fr; }
  .routine-banner { align-items: flex-start; }
  .banner-stars { display: none; }
  .activity-layout { grid-template-columns: 1fr; }
  .parent-note { order: -1; }
  .parent-grid { grid-template-columns: 1fr; }
  .parent-routines-card { grid-column: auto; }
  .parent-access-pill { align-self: stretch; min-width: 0; text-align: left; }
  .parent-routine-list { grid-template-columns: 1fr; }
  .notification-button { display: none; }
  .toast { right: 16px; bottom: 16px; }
  .analytics-consent { right: 10px; bottom: 10px; width: calc(100% - 20px); align-items: flex-start; flex-direction: column; gap: 11px; }
  .analytics-consent-actions { width: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confetti { display: none; }
}