/* 夏天成长记 · 蓝天绘本，手机单列布局 */
:root{--sky:#83d4f6;--blue:#56a9ed;--paper:#fffefa;--ink:#354455;--muted:#8c98a6;--line:#edf0f3;--pink:#f49bb1;--yellow:#ffe58f;--radius:18px;font:14px/1.65 'Microsoft YaHei','Noto Sans SC','PingFang SC',sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#e4f4fc;background-image:radial-gradient(#fff9 1.3px,transparent 1.3px);background-size:22px 22px}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{cursor:not-allowed;opacity:.58}button svg{pointer-events:none}button:focus-visible,a:focus-visible{outline:3px solid #62b4e5;outline-offset:3px}a{color:inherit;text-decoration:none}svg{vertical-align:middle;flex-shrink:0}h1,h2,h3,p{margin:0}input,textarea,select{width:100%;border:1px solid #dce7ef;border-radius:12px;padding:11px 12px;background:#fff;color:var(--ink);outline:none;min-width:0}input:focus,textarea:focus,select:focus{border-color:#82c7ed;box-shadow:0 0 0 3px #8bd4f21d}input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);flex-shrink:0}input[type=radio]{accent-color:var(--blue)}textarea{resize:vertical;min-height:100px}small{font-size:11px}
.app-shell{max-width:460px;margin:0 auto;min-height:100dvh;background:var(--paper);box-shadow:0 0 70px #649fbd14;position:relative;overflow:clip}.main{min-width:0}.content{padding:14px 18px 100px}.app-topbar{height:58px;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 18px;z-index:20;background:var(--paper)}.top-left{min-width:75px;display:flex;align-items:center}.wordmark{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:750;letter-spacing:.5px}.top-title{font-size:16px;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;letter-spacing:.6px}.top-right{display:flex;gap:8px;align-items:center;position:relative;z-index:1}.mode-pill{display:flex;align-items:center;gap:4px;font-size:10px;line-height:1;padding:8px;border:1px solid #e5edf1;border-radius:20px;background:#fff8;color:#788b9a;white-space:nowrap}.mode-pill>svg:last-child{transform:rotate(90deg)}.top-notice{height:28px;width:24px;padding:0;display:grid;place-items:center;color:#7d91a1;position:relative}.top-notice i{height:5px;width:5px;position:absolute;top:2px;right:2px;background:var(--pink);border:1px solid #fff;border-radius:50%}.back-button{height:32px;width:27px;display:grid;place-items:center;color:#6e8493;padding:0}.back-button svg{transform:rotate(180deg)}.theme-overview .app-topbar{background:#82d3f3;color:white}.theme-overview .mode-pill{background:#ffffff42;color:#fff;border-color:#ffffff60}.theme-overview .top-notice,.theme-overview .wordmark{color:#fff}.theme-overview .content{padding-top:0}
.mobile-bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;height:calc(74px + env(safe-area-inset-bottom));padding:5px 8px calc(7px + env(safe-area-inset-bottom));background:#56a8ed;border-radius:18px 18px 0 0;z-index:70;display:flex;justify-content:space-around;box-shadow:0 -3px 10px #7bb1d012}.mobile-bottom a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;flex:1;position:relative;color:#eff9ff;font-size:10px;letter-spacing:.4px;min-width:0}.nav-sticker{height:36px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.mobile-bottom a.active .nav-sticker{transform:translateY(-2px) rotate(-4deg)}.mobile-bottom a.active{color:#fff;font-weight:700}.mobile-bottom a.active:after{content:'';position:absolute;bottom:-4px;width:15px;height:3px;background:#ffe394;border-radius:8px}.mobile-bottom a:hover .nav-sticker{transform:translateY(-3px)}
.storybook-hero{height:266px;margin:0 -18px;position:relative;background:#82d3f3;overflow:hidden}.hero-cat{position:absolute;inset:0;z-index:0}.hero-cat>svg{width:270px;height:240px;position:absolute;right:-15px;bottom:0}.hero-cat>img{height:100%;width:100%;object-fit:cover;object-position:center;display:block}.hero-title{position:relative;z-index:2;padding:19px 24px;width:100%;pointer-events:none}.hero-tiny{display:block;font-size:8px;letter-spacing:1.2px;color:#f3fcff;margin-bottom:8px;font-weight:650}.hero-title h1{font-size:31px;letter-spacing:1.3px;line-height:1.35;color:#fff;font-weight:900;text-shadow:0 2px 0 #5bbde44a;max-width:285px;transform:rotate(-3deg);transform-origin:left center;paint-order:stroke fill;-webkit-text-stroke:.5px #fff}.title-flower{font-size:22px;color:#fff2a6;display:inline-block;margin-left:5px;vertical-align:top;line-height:1.2}.hero-title p{font-size:11px;letter-spacing:1.3px;color:#fffef5;margin-top:9px;transform:rotate(-3deg);transform-origin:left center}.handdrawn-line{display:block;width:115px;height:7px;border-top:2px solid #ffea96;border-radius:50%;transform:rotate(-4deg);margin-top:7px}.hero-greeting{position:absolute;z-index:2;bottom:34px;left:19px;max-width:218px;color:#6a8ea1;background:#fffcedef;box-shadow:0 2px 0 #fff4;border-radius:7px 13px 11px 5px;padding:8px 11px;font-size:9px;transform:rotate(-2deg);line-height:1.6}.greeting-star{color:#e6b760;margin-right:2px}.hero-wave{position:absolute;z-index:3;left:-2%;right:-2%;bottom:-1px;height:20px;background:var(--paper);clip-path:polygon(0 52%,8% 64%,19% 39%,30% 55%,42% 24%,56% 45%,70% 25%,82% 41%,94% 13%,100% 25%,100% 100%,0 100%)}.cloud{display:none}.home-body{position:relative}.home-shortcuts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px 0 7px}.home-shortcuts button{padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.home-shortcuts button>span{height:53px;width:55px;display:grid;place-items:center;border-radius:15px;background:#e8f6ff}.home-shortcuts button:nth-child(2)>span{background:#fcebf0}.home-shortcuts button:nth-child(3)>span{background:#fff5d8}.home-shortcuts button:nth-child(4)>span{background:#edf2ff}.home-shortcuts button:nth-child(5)>span{background:#fff3d2}.home-shortcuts strong{font-size:10px;letter-spacing:.3px;font-weight:550;white-space:nowrap}.home-shortcuts button:hover>span{transform:rotate(-4deg)}.home-section{margin-top:21px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px}.section-title h2{font-size:15px;font-weight:750;letter-spacing:1px;line-height:1.5}.section-title h2>small{font-size:11px;font-weight:400;letter-spacing:0;color:#7e96ac}.section-more{font-size:10px;display:flex;gap:2px;align-items:center;color:#93a2af;padding:2px 0}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.feature-card{border-radius:12px;min-height:96px;padding:13px 9px;display:flex;gap:8px;align-items:center;position:relative;text-align:left;overflow:hidden}.feature-card.butter{background:#fff7df}.feature-card.lavender{background:#f0edfc}.feature-card.ice{background:#eaf7ff}.feature-card.blush{background:#ffedf0}.feature-sticker{flex-shrink:0;width:47px;display:flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:3px;transform:rotate(-7deg)}.feature-sticker svg{width:47px;height:47px}.feature-copy{display:block;min-width:0;align-self:flex-start;padding-top:5px}.feature-copy strong{font-size:11px;line-height:1.7;display:block;font-weight:650;white-space:nowrap}.feature-copy small{font-size:9px;color:#8e989d;line-height:1.6;display:block;margin-top:4px;max-width:99px}.feature-arrow{position:absolute;bottom:9px;right:8px;width:17px;height:17px;border-radius:50%;background:#ffffff90;display:grid;place-items:center;color:#dfb859}.lavender .feature-arrow{color:#b6a4d9;background:#e7dffa}.ice .feature-arrow{color:#75bce1;background:#d7efff}.blush .feature-arrow{color:#e5a6b7;background:#ffe1e8}.feature-card:hover{filter:brightness(.99)}.today-note{display:flex;align-items:center;gap:5px;margin-top:-1px;margin-bottom:11px;font-size:10px;color:#8f9ea8;line-height:1.5}.tiny-flower{color:#f2b5c2;font-size:15px;margin-left:auto}.home-reward-banner{display:flex;text-align:left;align-items:center;justify-content:space-between;background:#fff0d3;width:100%;border-radius:14px;min-height:118px;margin-top:22px;padding:16px 17px;overflow:hidden;position:relative}.home-reward-banner>div{position:relative;z-index:1}.home-reward-banner small{font-size:7px;letter-spacing:1px;color:#c2a568}.home-reward-banner strong{display:block;font-size:18px;color:#c79b47;letter-spacing:1px;margin:5px 0 6px;transform:rotate(-2deg)}.home-reward-banner strong span{font-size:18px;color:#edbb65}.home-reward-banner p{font-size:9px;color:#bfab7d}.home-reward-banner>span{position:relative;margin-right:-2px;transform:rotate(7deg);z-index:0}.footer{font-size:9px;text-align:center;color:#aab4ba;margin-top:23px}.footer button{font-size:9px;color:inherit;padding:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:550;line-height:1.7;border-radius:20px;border:1px solid transparent;padding:9px 15px;white-space:nowrap;transition:filter .2s,transform .2s}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn.primary{background:#69b8f0;color:#fff;box-shadow:0 3px 0 #4f9fda13}.btn.secondary{background:#fff;border-color:#e4ecf2;color:#7d95a7}.btn.soft{background:#fff1d9;color:#c69b4e}.btn.green{background:#e8f5e7;color:#7d9f74}.btn.danger{background:#fff0f2;color:#c58394}.btn.ghost{background:transparent;color:#84a3bb}.btn.sm{padding:5px 10px;font-size:10px}.btn.wide{width:100%}.card{border:1px solid #eef1f2;border-radius:17px;background:#fff;box-shadow:0 3px 9px #71889b04}.tasks-card{padding:0 13px}.task-row{display:flex;align-items:center;gap:10px;min-height:81px;padding:13px 0;border-bottom:1px dashed #edf0f3}.task-row:last-child{border-bottom:0}.task-icon{height:43px;width:43px;flex-shrink:0;border-radius:13px;display:grid;place-items:center}.task-icon.study{background:#e8f5ff;color:#89b7d8}.task-icon.health{background:#eaf5e4;color:#9bbb82}.task-icon.life{background:#fff3d5;color:#d6b978}.task-info{flex:1;min-width:0}.task-info h3{font-size:12px;font-weight:600;line-height:1.7;overflow-wrap:anywhere}.task-info p{font-size:10px;color:#879ba8;line-height:1.6;margin-top:3px;max-width:174px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-meta{display:flex;gap:7px;align-items:center;flex-shrink:0}.time{display:none}.points{display:inline-flex;align-items:center;gap:3px;font-size:11px;white-space:nowrap;color:#cf9d48}.task-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:58px;background:#fff2d9;color:#c6994d;border-radius:15px;font-size:10px;padding:6px 8px;white-space:nowrap}.task-btn.approved{color:#86a57a;background:#eef7e9}.task-btn.pending{color:#a090bb;background:#f1edfa}.task-btn.rejected{color:#c98a99;background:#fff0f3}.home-tasks .task-row{min-height:78px}.task-footer{font-size:9px;color:#95a6af;padding:14px 0;text-align:center}.page-heading{margin:5px 0 23px}.page-heading>div:first-child>h1{font-size:19px;font-weight:750;letter-spacing:.5px;line-height:1.7}.page-heading>div:first-child>p{font-size:11px;color:#8d9eac;line-height:1.8;margin-top:6px}.heading-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:16px}.page-illustrated-title{display:flex;align-items:center;justify-content:space-between;margin:2px 0 16px;padding:0 1px;gap:4px;min-height:76px}.page-illustrated-title h1{font-size:22px;letter-spacing:.8px;font-weight:800;color:#526d82;line-height:1.65}.page-illustrated-title h1>span{font-size:16px;color:#efc76b;display:inline-block;vertical-align:top;margin:0 0 0 3px}.page-illustrated-title p{font-size:10px;letter-spacing:.5px;color:#8d9fab;margin-top:5px}.title-sticker{display:block;transform:rotate(7deg);flex-shrink:0;max-width:69px}.theme-tasks .app-topbar,.theme-rewards .app-topbar{background:#fffcf2}.theme-tasks,.theme-rewards{background:#fffcf2}.theme-tasks .hero-wave,.theme-rewards .hero-wave{background:#fffcf2}.theme-tasks .page-illustrated-title h1{color:#a38c55}.theme-rewards .page-illustrated-title h1{font-size:20px;color:#ad8e59}.theme-rewards .page-illustrated-title p{font-size:9px;color:#aa9a7d}
.child-summary{padding:16px 15px;margin-bottom:20px;border:0;box-shadow:0 4px 12px #b4a37e10}.child-summary-top{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:15px}.child-selector{position:relative;min-width:0}.child-choice{display:flex;align-items:center;gap:9px;text-align:left;padding:0;min-width:130px}.avatar{height:43px;width:43px;border-radius:50%;background:#fff1df;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.avatar svg{width:100%;height:100%}.avatar.small{width:32px;height:32px}.avatar.large{width:57px;height:57px}.child-choice strong{font-size:14px;font-weight:650}.child-choice small{display:block;font-size:10px;color:#8c9dab;font-weight:400;margin-top:1px;white-space:nowrap}.child-choice>svg{color:#c3b38c;transform:rotate(90deg);margin-left:5px}.child-dropdown{position:absolute;left:0;top:calc(100% + 10px);z-index:50;width:205px;border:1px solid #e5edf1;background:white;box-shadow:0 10px 30px #51718a1f;border-radius:15px;padding:6px}.child-dropdown button{width:100%;display:flex;align-items:center;gap:9px;border-radius:9px;text-align:left;padding:10px;font-size:12px}.child-dropdown button:hover{background:#edf8ff}.child-dropdown button>svg{margin-left:auto;color:#91b3c9}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:0}.profile-stats>div{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:0}.profile-stats>div:not(:last-child):after{content:'';position:absolute;height:20px;right:0;bottom:8px;width:1px;background:#edf0f3}.profile-stats strong{font-size:24px;font-weight:750;color:#dfac5a;line-height:1.5}.profile-stats span{font-size:9px;color:#8e9da8;line-height:1.8;white-space:nowrap}.calendar-card{padding:17px 16px;margin-bottom:23px}.card-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;letter-spacing:.4px}.card-title svg{color:#8fb7d0}.calendar-top{display:flex;align-items:center;justify-content:space-between;margin:14px 0}.calendar-month{font-size:11px;font-weight:550;color:#8b9aa7}.calendar-nav{display:flex;gap:8px}.calendar-nav button{display:grid;place-items:center;background:#f2f8fc;border-radius:7px;height:25px;width:25px;color:#9db5c8}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 3px;text-align:center}.weekday{font-size:10px;color:#a0afba;padding-bottom:6px}.calendar-day{height:36px;width:36px;justify-self:center;border-radius:50%;font-size:12px;color:#7f93a3;position:relative;display:grid;place-items:center;padding:0}.calendar-day:hover{background:#edf8ff}.calendar-day.today{background:#8cccf5;color:#fff;font-weight:700}.calendar-day.has-checkin:after{content:'';height:4px;width:4px;background:#f3c771;position:absolute;bottom:1px;border-radius:50%}.calendar-day.today:after{background:#fff1af;bottom:3px}.calendar-day.future{color:#bdc8d0;opacity:1}.calendar-day.blank{pointer-events:none}.calendar-legend{display:flex;gap:17px;align-items:center;justify-content:center;margin-top:11px;font-size:9px;color:#99acb9}.calendar-legend span{display:flex;align-items:center;gap:4px}.dot{height:4px;width:4px;display:inline-block;background:#f3c771;border-radius:50%}.dot.orange{background:#8cccf5}.calendar-streak{border-top:1px dashed #e6edf1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;padding-top:13px;font-size:10px;color:#92aabd}.calendar-streak strong{font-weight:450;display:flex;align-items:center;gap:5px;font-size:11px;color:#8aa9bd}.calendar-streak b{font-size:15px;color:#d7ae61}.calendar-streak svg{color:#ebbd76}.section-progress{font-size:10px;color:#a1aa9c}.section-progress b{color:#c6a366;font-weight:550}.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px;flex-wrap:wrap}.pill-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pill-tabs button{padding:5px 11px;font-size:11px;color:#91a2ae;border-radius:17px;line-height:1.7}.pill-tabs button.active{background:#e7f5fd;color:#6f9fbd}.pill-tabs.warm button.active{background:#fff0d4;color:#bc9657}.gentle-note{display:flex;align-items:center;justify-content:center;gap:5px;text-align:center;font-size:9px;color:#9daeb8;margin:20px 0 6px}.badge{font-size:9px;line-height:1.8;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;background:#fff1d9;border-radius:8px;color:#cba460}.tiny-label{font-size:8px;color:#c2a97d;letter-spacing:1px}
.reward-tabs{margin:2px -18px 19px;display:grid;grid-template-columns:repeat(3,1fr);background:#fff}.reward-tabs button{display:flex;align-items:center;justify-content:center;gap:5px;padding:13px 0;font-size:12px;color:#8da1b2;border-bottom:2px solid transparent}.reward-tabs button.active{color:#d2a059;border-bottom-color:#eac17d}.reward-tabs button.active svg{stroke:#d2a059}.wish-banner{border-radius:15px;background:#e8f5ff;min-height:153px;position:relative;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:19px 22px}.wish-banner small{font-size:8px;letter-spacing:1.5px;color:#87b0ce}.wish-banner h2{font-size:22px;letter-spacing:2px;line-height:1.65;color:#81b7dd;margin-top:6px;font-weight:750;transform:rotate(-3deg);position:relative;z-index:1}.wish-banner>span{height:112px;width:112px;position:absolute;right:14px;bottom:3px;transform:rotate(8deg)}.wish-banner>span>svg{height:100%;width:100%}.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.reward-card{background:white;border:1px solid #eef1f4;border-radius:17px;overflow:hidden}.reward-image{height:133px;display:grid;place-items:center;position:relative;background:#fff5e6}.reward-image>svg{width:93px;height:93px}.reward-image.game{background:#edf5ff}.reward-image.toy{background:#f3edfc}.reward-image.trip{background:#eef7e9}.reward-image.book{background:#ffedf0}.reward-image.star{background:#fffae2}.reward-edit{position:absolute;right:9px;top:9px;display:grid;place-items:center;background:#ffffffc9;border-radius:50%;width:26px;height:26px;padding:0;color:#a4b0ba}.reward-content{padding:14px 12px 15px}.reward-content h3{font-size:12px;line-height:1.65;font-weight:600}.reward-content>p{font-size:9px;color:#8fa2af;line-height:1.7;margin-top:5px;min-height:32px;overflow-wrap:anywhere}.reward-bottom{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:10px}.reward-bottom .points{font-size:17px;font-weight:650;color:#d4a256}.reward-bottom .btn{font-size:10px;padding:5px 9px}.points-stat-card{padding:18px 13px;margin-bottom:16px}.points-stat-card h2{display:flex;align-items:center;gap:6px;color:#91af77;font-size:12px;font-weight:550;border-bottom:1px solid #f0f2f4;margin:0 4px 14px;padding-bottom:13px}.points-stat-card .profile-stats strong{font-size:23px;color:#91af77}.points-stat-card.spending h2,.points-stat-card.spending .profile-stats strong{color:#d6a767}.points-stat-card+.section-title{margin-top:24px}.records-list{padding:0 16px}.record-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 0;border-bottom:1px dashed #eaf0f4}.record-row:last-child{border:0}.record-main{display:flex;align-items:center;gap:9px;min-width:0}.record-main h3{font-size:11px;font-weight:550;overflow-wrap:anywhere}.record-main p{font-size:9px;color:#91a5b4;line-height:1.7;margin-top:4px;overflow-wrap:anywhere}.record-side{display:flex;gap:7px;align-items:center;flex-shrink:0}.record-status{font-size:9px;color:#92a980;background:#f1f7e9;border-radius:7px;padding:3px 6px;white-space:nowrap}.record-status.pending{color:#bba071;background:#fff6e4}.record-status.rejected{color:#c697a2;background:#fff0f3}.amount-positive{color:#91ad7b;font-size:14px;font-weight:600;white-space:nowrap}.amount-negative{color:#cfa16e;font-size:14px;font-weight:600;white-space:nowrap}.load-more{text-align:center;padding:13px}
.apps-child{border:1px solid #fff0d6;background:#fffaed;padding:14px 16px;border-radius:15px;margin-bottom:20px}.apps-child .child-choice{width:100%}.apps-child .child-choice>svg{margin-left:auto}.apps-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.app-tool{border-radius:17px;background:#fff;min-height:157px;padding:18px 12px 16px;border:1px solid #edf1f4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.app-tool>span{width:61px;height:61px;border-radius:17px;display:grid;place-items:center;background:#eaf8ff;margin-bottom:9px}.app-tool:nth-child(4n+2)>span{background:#fff2d8}.app-tool:nth-child(4n+3)>span{background:#fff0f4}.app-tool:nth-child(4n+4)>span{background:#edf7e9}.app-tool strong{font-size:13px;font-weight:550;color:#5e7489}.app-tool small{font-size:10px;line-height:1.65;color:#8da4b6;margin-top:4px;max-width:145px}.app-tool:hover>span{transform:rotate(5deg)}.profile-cover{position:relative;margin:-14px -18px 0;min-height:202px;background:#8dd7f5;padding:29px 24px;overflow:hidden}.profile-cover>div:first-child{position:relative;z-index:1}.profile-cover small{font-size:8px;letter-spacing:1.8px;color:#edfaff}.profile-cover h1{font-size:26px;letter-spacing:1px;color:#fff;font-weight:800;line-height:1.65;margin-top:8px;transform:rotate(-3deg);transform-origin:left center}.profile-cover h1>span{font-size:17px;color:#fff0a1;vertical-align:top}.profile-cover p{font-size:10px;color:#f1fbff;letter-spacing:1px;margin-top:9px}.profile-cover>span{position:absolute;width:133px;height:133px;right:0;bottom:0;transform:rotate(5deg)}.profile-cover>span svg{width:100%;height:100%}.profile-cover .hero-wave{height:21px}.my-child{position:relative;margin-top:3px;padding:17px 17px 16px;z-index:4;box-shadow:0 3px 12px #9bb3c90a}.my-child .section-title{margin-bottom:9px}.my-child .section-title h2{font-size:13px;color:#698398}.my-child-top{display:flex;align-items:center;gap:11px;padding-bottom:16px}.my-child-top>div{flex:1;min-width:0}.my-child-top h2{font-size:16px;font-weight:650}.my-child-top p{font-size:10px;color:#90a3b1;margin-top:4px}.my-child .profile-stats{background:#fffaed;border-radius:12px;padding:12px 2px}.my-child .profile-stats strong{font-size:22px}.profile-menu-label{font-size:11px;color:#95abbb;margin:22px 10px 9px}.profile-menu{padding:0 17px}.profile-menu-row{display:flex;width:100%;text-align:left;align-items:center;gap:11px;padding:14px 0;min-height:58px;border-bottom:1px solid #eff2f4}.profile-menu-row:last-child{border:0}.profile-menu-row strong{font-size:12px;font-weight:450;flex:1}.profile-menu-row small{font-size:10px;color:#99adbb;margin-left:auto}.profile-menu-row>svg{color:#bdc8cf;margin-left:auto}.profile-menu-icon{display:flex;align-items:center}.profile-quote{display:flex;gap:12px;align-items:center;justify-content:center;margin:29px 0 4px}.profile-quote p{font-size:10px;line-height:1.9;color:#a4b1ba;letter-spacing:1px}
.management-header{border-radius:13px;background:#eef8ff;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#7da3bf;padding:13px;margin:0 0 18px}.management-header>div{display:flex;align-items:center;gap:6px}.habit-row-meta{font-size:9px;color:#9baeba;display:flex;gap:7px;margin-top:5px;align-items:center;flex-wrap:wrap}.habit-actions{display:flex;gap:5px}.icon-button{border:1px solid #e7eef3;background:#fff;height:30px;width:30px;display:inline-grid;place-items:center;border-radius:9px;color:#9db2c0;padding:0}.habit-actions .icon-button{width:27px;height:27px}.notice{font-size:11px;color:#85a5bc;border-radius:13px;background:#edf8ff;padding:13px 14px;display:flex;gap:8px;align-items:flex-start;line-height:1.85;margin-bottom:18px}.notice>svg{margin-top:3px}.notice.warm{color:#b49a70;background:#fff6e5}.family-grid{display:grid;grid-template-columns:1fr;gap:17px}.family-card{border:1px solid #e9f0f5;background:white;position:relative;border-radius:19px;padding:22px}.family-card.active{border-color:#b7def5}.family-card .badge{position:absolute;right:16px;top:15px}.family-top{display:flex;align-items:center;gap:13px}.family-top h2{font-size:18px}.family-top p{font-size:11px;color:#99acba;margin-top:3px}.family-metrics{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:0;margin:20px 0;padding-top:17px;border-top:1px dashed #e5eef3}.family-metrics b{font-size:21px;color:#90b5ce;display:block;line-height:1.5}.family-metrics small{font-size:10px;color:#9aafbd}.family-buttons{display:flex;gap:9px}.family-buttons .btn{flex:1}.add-family-card{border:1px dashed #bddded;min-height:160px;background:#f6fcff;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:9px;flex-direction:column;color:#90afc2}.add-family-card>span{width:42px;height:42px;border-radius:50%;background:#eaf7ff;display:grid;place-items:center}.add-family-card strong{font-size:12px;font-weight:500}.add-family-card small{font-size:10px}.onboarding-box{border-radius:14px;padding:17px;background:#fffaed;border:1px solid #f9efd6;margin:20px 0}.onboarding-box strong{font-size:12px;color:#ae975f;font-weight:550}.onboarding-box p{font-size:11px;color:#aa9c7c;line-height:1.9;margin-top:8px}.settings-grid{display:block}.settings-card{padding:21px;margin-bottom:19px}.settings-card h2{font-size:14px;font-weight:650;margin-bottom:20px}.settings-card p{font-size:11px;color:#8da5b5;line-height:1.95;margin-bottom:18px}.settings-card .btn+.btn{margin-top:9px}.settings-note{font-size:10px;color:#a1b2be;line-height:1.85;margin-top:11px}.settings-card .notice{font-size:10px}
.report-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:21px}.report-stat{padding:17px}.report-stat p{font-size:11px;color:#91a8ba}.report-stat h3{font-size:27px;line-height:1.5;color:#7faac6;margin:8px 0 5px}.report-stat small{font-size:9px;color:#9fB2bf}.report-grid{display:grid;gap:19px}.report-chart,.category-stats{padding:20px}.report-chart h2,.category-stats h2{font-size:14px;font-weight:600}.bar-chart{height:181px;display:flex;align-items:flex-end;gap:14px;padding-top:15px;margin-top:8px}.bar-column{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;min-width:0}.bar-track{height:125px;width:100%;max-width:34px;border-radius:7px;background:#f2f8fc;overflow:hidden;display:flex;align-items:flex-end}.bar-fill{width:100%;border-radius:7px;background:#b6ddf6;min-height:2px}.bar-column:last-child .bar-fill{background:#f6da8d}.bar-column small{font-size:9px;color:#99afbe}.chart-tooltip{font-size:9px;color:#9db7c8}.category-stats h2{margin-bottom:22px}.category-line{margin-top:22px}.category-line>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#8fa7b9}.progress-bar{height:7px;border-radius:10px;overflow:hidden;background:#f1f6f9;margin-top:10px}.progress-bar>div{background:#b8dcee;height:100%;border-radius:10px}.ledger-title{display:flex;align-items:center;justify-content:space-between;margin:25px 0 13px}.ledger-title h2{font-size:14px}.empty-state{padding:40px 13px;text-align:center;color:#a1bac9}.empty-state>svg{margin-bottom:15px;color:#c6dae7}.empty-state h3{font-size:14px;color:#81a1b5;font-weight:550;margin-bottom:7px}.empty-state p{font-size:11px;line-height:1.8;color:#9aafbd}.hero{position:relative;background:#e2f6ff;border-radius:18px;padding:24px;overflow:hidden;min-height:250px}.hero-copy{position:relative;z-index:1;max-width:260px}.hero-eyebrow{font-size:9px;letter-spacing:1px;color:#89b6d0;margin-bottom:15px}.hero-copy h2{font-size:25px;color:#7caecc;line-height:1.7}.hero-copy h2 em{font-style:normal;color:#c9ae70}.hero-copy p{font-size:10px;color:#94b3c6;margin:10px 0 20px}.hero-art{position:absolute;right:-30px;bottom:-10px;width:230px}.hero-art>svg{width:100%;height:auto}.weekly-card{padding:20px;margin-top:20px}.weekly-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.weekly-header p{font-size:9px;color:#a4b6c3}.goal-card,.review-card{margin:18px 0;padding:18px;border-radius:17px;background:#fff6e3}.review-card{background:white}.goal-head,.goal-bottom,.review-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.goal-head h2,.review-heading h2{font-size:14px}.goal-body{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.goal-body h3{font-size:12px}.goal-body p{font-size:10px;color:#b5aa89}.goal-art{height:65px;width:65px}.goal-art svg{height:100%;width:100%}.goal-bottom{font-size:9px;color:#b9ac85;margin-top:9px}.review-item{display:flex;align-items:center;gap:9px;margin:17px 0}.review-item h3{font-size:12px}.review-item p{font-size:10px;color:#96adbd}.review-actions{display:flex;gap:10px}.review-actions .btn{flex:1}.guide-cat{width:120px;height:120px;margin:0 auto 10px}.guide-cat svg{width:100%;height:100%}.guide-steps p{font-size:11px;line-height:1.9;color:#829fb3;margin-bottom:15px}.guide-steps b{font-size:18px;color:#d8b86a;margin-right:8px;font-weight:700}
.modal-overlay{position:fixed;inset:0;z-index:100;background:#52677855;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade-in .2s}.modal{width:100%;max-width:425px;max-height:89dvh;overflow:auto;border-radius:23px;background:#fffefb;box-shadow:0 20px 80px #3e637022;animation:modal-up .2s}.modal.large{max-width:465px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:23px 22px 15px}.modal-head h2{font-size:17px;font-weight:650;color:#68879e;line-height:1.6}.modal-head .icon-button{height:28px;width:28px;border:0;border-radius:50%;background:#eef7fc;color:#abc5d5;flex-shrink:0}.modal-body{padding:4px 22px 25px}.modal-desc{font-size:11px;color:#8da6b6;line-height:1.95;margin-bottom:20px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}.field>label{font-size:12px;color:#819cac;font-weight:500}.field small{font-size:10px;color:#9ab1c0;line-height:1.7}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.checkbox-label{display:flex;align-items:center;gap:8px;color:#8ba6b8;font-size:11px;margin:16px 0}.week-picker{display:flex;gap:6px}.week-picker label{height:33px;flex:1;display:flex;align-items:center;justify-content:center;background:#f4faff;border:1px solid #e5eff6;border-radius:10px;color:#8daabd;font-size:10px;position:relative;cursor:pointer}.week-picker input{opacity:0;position:absolute;width:0;height:0}.week-picker label:has(input:checked){background:#e5f5ff;color:#73a5c3;border-color:#c3e5f7}.week-picker label:focus-within{outline:2px solid #9cd5ef}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;flex-wrap:wrap}.modal-actions .btn{min-width:89px}.form-error{font-size:11px;color:#bd8293;line-height:1.9;background:#fff0f4;border-radius:10px;padding:9px 12px;margin-top:10px}.checkin-preview{display:flex;align-items:center;gap:10px;padding:14px;background:#f0f9ff;border-radius:14px;margin-bottom:20px}.checkin-preview>div{flex:1;min-width:0}.checkin-preview h3{font-size:12px;line-height:1.8}.checkin-preview p{font-size:10px;color:#8da9bd;margin-top:5px}.checkin-preview .points{font-size:12px}.review-note{padding:14px 16px;font-size:12px;color:#8aa8bc;line-height:1.95;border-radius:12px;background:#f0f8fc;border-left:3px solid #c6e2f4;margin-bottom:20px;overflow-wrap:anywhere}.modal-success{text-align:center}.success-icon{height:65px;width:65px;border-radius:50%;margin:12px auto 19px;background:#ebf7e6;color:#a2bd8d;display:grid;place-items:center}.modal-success h3{font-size:19px;color:#86aac2;margin-bottom:9px}.modal-success p{font-size:11px;line-height:1.9;color:#96afc0}.modal-success .btn{margin-top:24px;min-width:160px}.pin-icon{height:56px;width:56px;border-radius:17px;background:#fff3d8;color:#cfb781;display:grid;place-items:center;margin-bottom:19px}.pin-input{letter-spacing:12px;text-align:center;font-size:26px;padding:10px 12px}.avatar-picker{display:flex;gap:15px}.avatar-picker label{padding:3px;border:2px solid transparent;border-radius:50%;cursor:pointer;position:relative}.avatar-picker input{position:absolute;width:0;height:0;opacity:0}.avatar-picker label:has(input:checked){border-color:#abd7ee}.notification-item{padding:17px 0;border-bottom:1px dashed #e4eef4}.notification-item:last-child{border:0}.notification-item strong{font-size:12px;font-weight:550}.notification-item p{font-size:10px;color:#91adbf;line-height:1.85;margin:6px 0 12px}.privacy-note{font-size:11px;line-height:2;color:#869fb1}.toast{position:fixed;left:50%;bottom:94px;z-index:200;transform:translateX(-50%);display:flex;align-items:center;gap:7px;max-width:calc(100vw - 32px);width:max-content;background:#649cbbef;color:#fff;box-shadow:0 5px 20px #5c9ebe22;backdrop-filter:blur(8px);font-size:11px;line-height:1.8;border-radius:15px;padding:12px 17px;animation:fade-in .2s}.toast.error{background:#c994a5ef}.confetti{position:fixed;inset:0;pointer-events:none;z-index:160;overflow:hidden}.confetti span{position:absolute;top:-15px;left:var(--x);width:8px;height:13px;border-radius:3px;background:var(--c);animation:confetti-fall 1.7s ease-in var(--d) both}@keyframes confetti-fall{to{transform:translateY(105vh) rotate(650deg);opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:700px){body{padding:25px 0}.app-shell{border-radius:28px 28px 0 0;min-height:calc(100dvh - 25px)}.mobile-bottom{border-radius:18px 18px 0 0}.modal-overlay{padding:25px}.theme-overview .app-topbar{border-radius:28px 28px 0 0}}
@media(max-width:390px){.content{padding-left:14px;padding-right:14px}.app-topbar{padding-left:14px;padding-right:14px}.storybook-hero{margin-left:-14px;margin-right:-14px;height:245px}.hero-title{padding:20px}.hero-title h1{font-size:28px}.hero-title p{font-size:10px}.hero-greeting{max-width:189px;font-size:8px;left:15px;bottom:30px}.home-shortcuts{gap:4px}.home-shortcuts button>span{width:48px;height:48px;border-radius:13px}.home-shortcuts strong{font-size:9px}.feature-grid{gap:8px}.feature-card{padding:11px 8px;gap:5px;min-height:92px}.feature-sticker{width:37px}.feature-sticker svg{width:39px;height:43px}.feature-copy strong{font-size:10px}.feature-copy small{font-size:8px}.task-info h3{font-size:11px}.task-info p{max-width:124px;font-size:9px}.task-icon{height:36px;width:36px;border-radius:11px}.task-meta{gap:5px}.task-btn{font-size:9px;min-width:53px;padding:6px}.task-meta .points{font-size:10px}.task-row{gap:8px}.tasks-card{padding:0 11px}.page-illustrated-title h1{font-size:20px}.theme-rewards .page-illustrated-title h1{font-size:18px}.page-illustrated-title p{font-size:9px}.title-sticker svg{max-width:60px}.reward-tabs{margin-left:-14px;margin-right:-14px}.calendar-day{width:32px;height:32px}.wish-banner{padding:19px}.wish-banner h2{font-size:21px}.profile-cover{margin-left:-14px;margin-right:-14px}.profile-cover h1{font-size:24px}.profile-cover p{font-size:9px}.profile-menu-row{gap:9px}.profile-menu-row strong{font-size:11px}.profile-menu-row small{font-size:9px}.reward-grid{gap:11px}.reward-image{height:120px}.reward-content{padding:12px 10px}.reward-bottom .btn{font-size:9px;padding:5px 7px}.reward-bottom .points{font-size:16px}.home-reward-banner{padding:15px}.home-reward-banner strong{font-size:16px}.home-reward-banner p{font-size:8px}.home-reward-banner>span svg{width:60px}.my-child-top{gap:8px}.my-child-top .btn{padding:5px 8px;font-size:9px}.record-status{font-size:8px}.record-side{gap:4px}.record-side .btn{font-size:9px;padding:5px 8px}.top-title{font-size:15px}.mode-pill{font-size:9px}.top-right{gap:5px}.management-header{font-size:10px}.management-header>div>svg{display:none}.apps-grid{gap:12px}.app-tool{padding-left:9px;padding-right:9px}.app-tool small{font-size:9px}.home-section{margin-top:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact calendar matches the reference habit page; full month opens on demand. */
.calendar-full-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.calendar-card.compact-calendar{padding:15px 16px 14px;margin-bottom:24px}
.calendar-compact-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0;text-align:left}
.calendar-compact-toggle h2{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:650;color:#5b7286;letter-spacing:.5px}
.calendar-compact-toggle>span{font-size:10px;color:#9baebc;white-space:nowrap}
.calendar-compact-toggle b{color:#8cb9d6;font-weight:500}
.calendar-compact-toggle>span>svg{transform:rotate(90deg);margin-left:3px}
.compact-progress{display:flex;align-items:center;gap:10px;margin-top:13px}
.compact-progress .progress-bar{flex:1;margin:0;height:6px;background:#f1f5f8}
.compact-progress .progress-bar>div{background:#a5d8f5}
.compact-progress>span{font-size:10px;color:#9ebed3}
.hero-title h1{text-shadow:0 2px 2px #53a9ce70,0 0 12px #64bee138}
/* Flat cartoon edition: pure fills and clean UI, matching the latest reference. */
:root{--sky:#5ccde8;--blue:#209fd2;--paper:#fff;--ink:#3e464b;--muted:#8e999f}
body{background:#f0f5f7;background-image:none}
.app-shell{box-shadow:0 0 40px #557e8d0a}
.theme-overview .app-topbar,.storybook-hero,.profile-cover{background:#5ccde8}
.hero-title{padding:112px 22px 0;width:56%}
.hero-tiny,.handdrawn-line,.hero-greeting{display:none}
.hero-title h1{font-size:24px;max-width:210px;font-weight:800;line-height:1.5;letter-spacing:.3px;transform:none;text-shadow:none;-webkit-text-stroke:0}
.hero-title p{font-size:10px;line-height:1.65;letter-spacing:0;transform:none;max-width:155px;margin-top:6px;color:#fff}
.title-flower{font-size:18px;vertical-align:top;line-height:1.4}
.hero-cat>img{object-position:right center}
.hero-wave{clip-path:none;height:26px;bottom:-13px;border-radius:50% 50% 0 0;background:#fff}
.home-badge-stats{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);width:60%;max-width:242px;gap:10px;margin-top:-20px;padding:0 2px 8px}
.home-badge-stats>div{display:flex;flex-direction:column;align-items:center}
.home-badge-stats>div>span{width:49px;height:46px;display:grid;place-items:center;background:#eefbfe;border-radius:16px}
.home-badge-stats strong{font-size:15px;color:#567477;font-weight:650;margin-top:4px;line-height:1.5}
.home-badge-stats small{font-size:8px;color:#9aadb3}
.home-shortcuts{padding-top:18px;padding-bottom:10px}
.home-shortcuts button>span{background:#98e0ed;border-radius:19px}
.home-shortcuts button:nth-child(2)>span{background:#ffcbd0}
.home-shortcuts button:nth-child(3)>span{background:#ffd6ed}
.home-shortcuts button:nth-child(4)>span{background:#dcd5fb}
.home-shortcuts button:nth-child(5)>span{background:#bce8cf}
.home-shortcuts strong{font-size:11px;color:#4f565b}
.home-section{margin-top:22px}
.home-section .feature-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:5px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-18px;padding-right:18px}
.home-section .feature-grid::-webkit-scrollbar{display:none}
.home-section .feature-card{flex:0 0 84%;min-height:109px;border-radius:18px;background:#f7f8f9;gap:13px;padding:17px 15px;scroll-snap-align:start}
.home-section .feature-sticker{width:45px;align-self:center;transform:none;margin:0}
.home-section .feature-copy{align-self:center;padding:0}
.home-section .feature-copy strong{font-size:14px;font-weight:600;white-space:normal;color:#485258}
.home-section .feature-copy small{font-size:11px;color:#85939b;line-height:1.6;max-width:175px;margin-top:4px}
.home-section .feature-arrow{background:transparent;color:#aab7bd;right:11px;bottom:12px}
.section-title h2{font-size:16px;color:#424b50;letter-spacing:.3px}
.section-more{font-size:11px;color:#a1adb3}
.card{box-shadow:none;border-color:#edf0f3}
.theme-tasks,.theme-rewards,.theme-tasks .app-topbar,.theme-rewards .app-topbar{background:#fff}
.theme-tasks .page-illustrated-title h1,.theme-rewards .page-illustrated-title h1{color:#4e6b79}
.theme-rewards .page-illustrated-title p{color:#94a7b2}
.profile-stats strong{color:#50b0cd}
.my-child .profile-stats{background:#eef9fc}
.mobile-bottom{background:#229fd1;border-radius:0;box-shadow:none}
.mobile-bottom a.active:after{display:none}
.mobile-bottom a.active .nav-sticker{background:#ffffff29;border-radius:12px;transform:none}
.nav-sticker{width:44px;height:37px}
.home-reward-banner{background:#e6f7fa}
.home-reward-banner strong{color:#66b4c8;transform:none}
.home-reward-banner p,.home-reward-banner small{color:#91b4bd}
.profile-cover h1,.profile-cover>span{transform:none}
@media(min-width:700px){.mobile-bottom{border-radius:0}}
@media(max-width:390px){.hero-title{padding:96px 20px 0;width:58%}.hero-title h1{font-size:22px;transform:none}.hero-title p{font-size:9px}.home-badge-stats{width:61%;gap:6px}.home-badge-stats>div>span{width:44px;height:43px}.home-shortcuts strong{font-size:10px}.home-section .feature-grid{margin-right:-14px;padding-right:14px}.home-section .feature-card{flex-basis:85%;gap:10px;padding:15px 13px}.home-section .feature-copy strong{font-size:13px}.home-section .feature-copy small{font-size:10px;max-width:155px}}

/* iPad and larger screens keep the flat cartoon theme while using the space. */
@media (min-width:700px){
  body{padding:16px 0 0}
  .app-shell{width:calc(100% - 32px);max-width:1100px;min-height:calc(100dvh - 16px);border-radius:24px 24px 0 0}
  .content{padding:24px 26px calc(116px + env(safe-area-inset-bottom))}
  .app-topbar{height:72px;padding:0 26px}
  .theme-overview .app-topbar{border-radius:24px 24px 0 0}
  .top-left{min-width:110px}
  .wordmark{font-size:20px;gap:10px}
  .top-title{font-size:21px}
  .top-right{gap:12px}
  .mode-pill{min-height:44px;padding:10px 13px;font-size:13px;gap:7px}
  .top-notice,.back-button{height:44px;width:44px}
  .top-notice i{top:7px;right:8px}
  .mobile-bottom{width:calc(100% - 32px);max-width:1100px;height:calc(88px + env(safe-area-inset-bottom));padding:8px 30px calc(9px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
  .mobile-bottom a{font-size:13px;gap:4px;min-height:64px}
  .nav-sticker{width:49px;height:41px}
  .nav-sticker svg{width:36px;height:36px}
  .btn{min-height:46px;font-size:14px;padding:10px 18px;gap:7px}
  .btn.sm{min-height:44px;font-size:13px;padding:8px 13px}
  .icon-button,.habit-actions .icon-button,.reward-edit{height:44px;width:44px;border-radius:12px}
  .icon-button svg,.habit-actions .icon-button svg,.reward-edit svg{width:18px;height:18px}
  .section-more{min-height:44px;font-size:13px;gap:5px;padding:8px 0 8px 10px}
  .section-title{min-height:44px;margin-bottom:14px}
  .section-title h2,.ledger-title h2{font-size:19px;letter-spacing:.5px}
  .section-title h2>small{font-size:13px}
  .section-progress{font-size:13px}
  .page-heading{margin:5px 0 26px}
  .page-heading>div:first-child>h1{font-size:27px}
  .page-heading>div:first-child>p{font-size:14px;line-height:1.9;max-width:700px}
  .heading-actions{gap:14px;margin-top:20px}
  .page-illustrated-title{min-height:104px;margin-bottom:21px;gap:18px}
  .page-illustrated-title h1,.theme-rewards .page-illustrated-title h1{font-size:29px}
  .page-illustrated-title h1>span{font-size:22px}
  .page-illustrated-title p,.theme-rewards .page-illustrated-title p{font-size:14px;line-height:1.8;margin-top:7px}
  .title-sticker{max-width:86px}
  .title-sticker>svg{width:82px;height:82px}
  .card{border-radius:20px}
  .footer{margin-top:28px;font-size:12px}
  .footer button{min-height:44px;font-size:12px;padding:8px}

  /* Home: a roomy illustration, large shortcuts and two companion columns. */
  .storybook-hero{height:330px;margin:0 -26px}
  .hero-cat{left:34%;right:0;width:auto}
  .hero-cat>img{object-fit:contain;object-position:right bottom}
  .hero-title{width:49%;padding:110px 36px 0}
  .hero-title h1{font-size:36px;max-width:300px;line-height:1.5}
  .hero-title p{font-size:14px;max-width:280px;line-height:1.85;margin-top:9px}
  .title-flower{font-size:24px}
  .home-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .home-badge-stats{grid-column:1/-1;width:278px;max-width:none;gap:20px;margin-top:-24px;margin-bottom:0;padding-bottom:0}
  .home-badge-stats>div>span{width:60px;height:56px;border-radius:19px}
  .home-badge-stats>div>span>svg{width:38px;height:38px}
  .home-badge-stats strong{font-size:21px;margin-top:6px}
  .home-badge-stats small{font-size:12px}
  .home-shortcuts{grid-column:1/-1;max-width:680px;width:100%;justify-self:center;gap:24px;padding:0 8px 10px}
  .home-shortcuts button{min-height:100px;gap:10px}
  .home-shortcuts button>span{width:70px;height:70px;border-radius:23px}
  .home-shortcuts button>span>svg{width:48px;height:48px}
  .home-shortcuts strong{font-size:14px}
  .home-section{min-width:0;margin-top:0}
  .home-section .feature-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .home-section .feature-card{width:100%;min-width:0;min-height:112px;flex-basis:auto;padding:20px 18px;gap:15px;border-radius:18px}
  .home-section .feature-sticker{width:51px}
  .home-section .feature-sticker>svg{width:51px;height:51px}
  .home-section .feature-copy{min-width:0;flex:1}
  .home-section .feature-copy strong{font-size:16px;line-height:1.75}
  .home-section .feature-copy small{font-size:13px;max-width:none;line-height:1.85}
  .home-section .feature-arrow{height:28px;width:28px;bottom:13px;right:10px}
  .home-body>.home-section:nth-of-type(3){grid-column:1/-1}
  .today-note{font-size:13px;gap:8px;margin-bottom:15px}
  .home-reward-banner{grid-column:1/-1;min-height:144px;margin-top:0;padding:24px 28px}
  .home-reward-banner strong{font-size:25px;margin:7px 0 8px}
  .home-reward-banner small{font-size:10px}
  .home-reward-banner p{font-size:13px}
  .home-reward-banner>span>svg{width:90px;height:90px}

  /* Habits and calendars have larger type and comfortable finger targets. */
  .child-summary{padding:22px;margin-bottom:22px}
  .child-summary-top{margin-bottom:22px;gap:14px}
  .child-choice{min-height:52px;gap:12px}
  .child-choice strong{font-size:18px}
  .child-choice small{font-size:13px}
  .child-choice .avatar{width:52px;height:52px}
  .child-dropdown{width:250px;padding:8px}
  .child-dropdown button{min-height:50px;padding:11px;font-size:15px}
  .profile-stats strong{font-size:30px}
  .profile-stats span{font-size:12px}
  .profile-stats>div:not(:last-child):after{height:28px;bottom:10px}
  .badge{font-size:12px;padding:4px 10px}
  .tiny-label{font-size:11px;letter-spacing:1.2px}
  .calendar-card{padding:21px;margin-bottom:24px}
  .calendar-card.compact-calendar{padding:18px 20px 20px;margin-bottom:24px}
  .calendar-compact-toggle{min-height:44px;gap:14px}
  .calendar-compact-toggle h2,.card-title{font-size:17px;gap:9px}
  .calendar-compact-toggle>span{font-size:13px}
  .compact-progress{gap:15px;margin-top:14px}
  .compact-progress>span{font-size:13px}
  .compact-progress .progress-bar{height:8px}
  .calendar-month{font-size:14px}
  .calendar-nav button{height:44px;width:44px;border-radius:12px}
  .calendar-grid{column-gap:0;row-gap:6px}
  .weekday{font-size:13px;padding-bottom:7px}
  .calendar-day{height:44px;width:44px;font-size:14px}
  .calendar-legend{font-size:12px;gap:22px;margin-top:16px}
  .calendar-streak{font-size:12px;margin-top:18px;padding-top:17px}
  .calendar-streak strong{font-size:13px}
  .calendar-streak b{font-size:19px}
  .page-toolbar{gap:12px;margin-bottom:17px}
  .pill-tabs{gap:7px}
  .pill-tabs button{min-height:44px;padding:8px 17px;font-size:14px;min-width:59px}
  .tasks-card{padding:0 19px}
  .task-row,.home-tasks .task-row{min-height:96px;padding:17px 0;gap:14px}
  .task-icon{height:50px;width:50px;border-radius:15px}
  .task-icon>svg{height:26px;width:26px}
  .task-info h3{font-size:15px;line-height:1.8}
  .task-info p{font-size:12px;max-width:none;line-height:1.8;margin-top:4px}
  .task-meta{gap:12px}
  .points{font-size:14px;gap:5px}
  .task-btn{min-height:44px;min-width:82px;font-size:13px;padding:8px 12px}
  .home-tasks .time{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#a1b3bf}
  .task-footer,.gentle-note{font-size:12px;line-height:1.9}
  .gentle-note{margin:24px 0 9px}
  .habit-row-meta{font-size:11px;gap:10px}
  .habit-actions{gap:8px}
  .management-header{padding:18px 20px;font-size:14px;margin-bottom:22px}
  .notice{font-size:13px;padding:17px 20px;gap:10px;line-height:1.9}

  /* Toolbox and rewards use the available tablet width instead of phone tiles. */
  .apps-child{padding:19px 22px;margin-bottom:24px}
  .apps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
  .app-tool{min-height:190px;padding:23px 16px;border-radius:20px}
  .app-tool>span{height:73px;width:73px;border-radius:22px;margin-bottom:13px}
  .app-tool>span>svg{height:56px;width:56px}
  .app-tool strong{font-size:17px}
  .app-tool small{font-size:12px;max-width:190px;line-height:1.8;margin-top:6px}
  .reward-tabs{margin:4px -26px 24px}
  .reward-tabs button{min-height:58px;font-size:16px;padding:15px 0;gap:8px}
  .reward-tabs button>svg{height:19px;width:19px}
  .wish-banner{min-height:188px;padding:27px 32px;margin-bottom:26px}
  .wish-banner h2{font-size:28px;line-height:1.6}
  .wish-banner small{font-size:11px}
  .wish-banner>span{height:155px;width:155px;right:40px;bottom:0}
  .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
  .reward-image{height:165px}
  .reward-image>svg{height:118px;width:118px}
  .reward-content{padding:18px 17px}
  .reward-content h3{font-size:15px;line-height:1.75}
  .reward-content>p{font-size:12px;line-height:1.8;min-height:44px}
  .reward-bottom{gap:8px;margin-top:15px;flex-wrap:wrap}
  .reward-bottom .points{font-size:21px}
  .reward-bottom .btn{font-size:13px;padding:8px 12px;min-height:44px}
  .reward-edit{top:12px;right:12px}
  .points-stat-card{padding:23px 20px;margin-bottom:21px}
  .points-stat-card h2{font-size:15px;padding-bottom:16px;margin-bottom:18px}
  .points-stat-card .profile-stats strong{font-size:29px}
  .records-list{padding:0 22px}
  .record-row{min-height:88px;padding:20px 0;gap:16px}
  .record-main{gap:13px}
  .record-main h3{font-size:14px}
  .record-main p{font-size:12px;line-height:1.85}
  .record-side{gap:12px}
  .record-status{font-size:12px;padding:5px 9px}
  .amount-positive,.amount-negative{font-size:18px}

  /* Reports, family and settings remain ordinary sections with wider cards. */
  .report-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
  .report-stat{padding:21px 17px}
  .report-stat p{font-size:13px}
  .report-stat h3{font-size:31px;margin:10px 0 7px}
  .report-stat small{font-size:11px;line-height:1.8}
  .report-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px}
  .report-chart,.category-stats{padding:23px;min-width:0}
  .report-chart h2,.category-stats h2{font-size:17px}
  .category-line>div:first-child{font-size:13px}
  .bar-chart{height:213px;gap:15px}
  .bar-track{height:151px;max-width:39px}
  .bar-column small,.chart-tooltip{font-size:11px}
  .family-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .family-card{padding:25px;min-width:0}
  .family-top h2{font-size:22px}
  .family-top p{font-size:13px}
  .family-metrics b{font-size:25px}
  .family-metrics small{font-size:12px}
  .family-buttons{flex-wrap:wrap}
  .family-buttons .btn{min-width:105px}
  .add-family-card{min-height:270px}
  .add-family-card strong{font-size:16px}
  .add-family-card small{font-size:13px}
  .onboarding-box{padding:21px 24px;margin:24px 0}
  .onboarding-box strong{font-size:15px}
  .onboarding-box p{font-size:13px;line-height:2}
  .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
  .settings-card{padding:23px;min-width:0}
  .settings-card h2{font-size:18px}
  .settings-card p{font-size:13px;line-height:2}
  .settings-card .notice,.settings-note{font-size:12px}
  .settings-card .btn+.btn{margin:10px 0 0}
  .profile-cover{margin:-24px -26px 0;min-height:248px;padding:39px 36px}
  .profile-cover small{font-size:11px}
  .profile-cover h1{font-size:35px;line-height:1.6;margin-top:13px}
  .profile-cover p{font-size:14px;margin-top:12px}
  .profile-cover>span{width:190px;height:190px;right:28px;bottom:0}
  .my-child{padding:24px;margin-top:7px}
  .my-child .section-title h2{font-size:16px}
  .my-child-top{gap:17px;padding-bottom:23px}
  .avatar.large{width:70px;height:70px}
  .my-child-top h2{font-size:22px}
  .my-child-top p{font-size:13px}
  .my-child .profile-stats{padding:18px 12px}
  .my-child .profile-stats strong{font-size:29px}
  .profile-menu-label{font-size:14px;margin:27px 13px 12px}
  .profile-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;padding:0 22px}
  .profile-menu-row{min-height:72px;padding:16px 0;gap:12px;min-width:0}
  .profile-menu-row strong{font-size:14px}
  .profile-menu-row small{font-size:12px;white-space:nowrap}
  .profile-menu-row:nth-last-child(2){border-bottom:0}
  .profile-quote{margin-top:32px;gap:16px}
  .profile-quote p{font-size:13px;line-height:1.9}

  /* Larger forms and controls prevent Safari zoom and make touch entry easier. */
  .modal{max-width:560px;border-radius:25px}
  .modal.large{max-width:720px}
  .modal-head{padding:26px 28px 18px}
  .modal-head h2{font-size:22px}
  .modal-head .icon-button{height:44px;width:44px}
  .modal-body{padding:5px 28px 29px}
  .modal-desc{font-size:14px;line-height:1.9}
  .field{gap:9px;margin-bottom:22px}
  .field>label{font-size:15px}
  .field small{font-size:12px}
  input,textarea,select{font-size:16px;min-height:48px;padding:12px 14px}
  input[type=checkbox]{min-height:0;width:22px;height:22px}
  input[type=radio]{min-height:0}
  .checkbox-label{min-height:44px;font-size:14px;gap:10px}
  .week-picker{gap:9px}
  .week-picker label{height:44px;font-size:13px}
  .week-picker input,.avatar-picker input{min-height:0}
  .form-row{gap:19px}
  .modal-actions{gap:13px;margin-top:27px}
  .form-error{font-size:13px}
  .checkin-preview{padding:19px;gap:14px}
  .checkin-preview h3{font-size:16px}
  .checkin-preview p{font-size:13px}
  .checkin-preview .points{font-size:16px}
  .review-note,.privacy-note{font-size:14px;line-height:1.95}
  .modal-success h3{font-size:24px}
  .modal-success p{font-size:14px}
  .notification-item{padding:21px 0}
  .notification-item strong{font-size:15px}
  .notification-item p{font-size:13px;line-height:1.9}
  .empty-state{padding:51px 20px}
  .empty-state h3{font-size:18px}
  .empty-state p{font-size:14px}
  .toast{bottom:110px;font-size:14px;padding:15px 21px;max-width:min(680px,calc(100vw - 60px))}
}

/* Landscape iPads have room for a persistent summary beside the habit list. */
@media (min-width:900px){
  .theme-tasks .content{display:grid;grid-template-columns:348px minmax(0,1fr);grid-template-rows:auto min-content 1fr auto;gap:24px;align-items:start}
  .theme-tasks .page-illustrated-title{grid-column:1/-1;margin-bottom:0}
  .theme-tasks .child-summary{grid-column:1;grid-row:2;margin-bottom:0;padding:21px 18px}
  .theme-tasks .calendar-card{grid-column:1;grid-row:3;margin-bottom:0;padding:18px 16px}
  .theme-tasks .habits-section{grid-column:2;grid-row:2/span 2;min-width:0}
  .theme-tasks .footer{grid-column:1/-1;grid-row:4;margin-top:0}
  .theme-tasks .child-choice{min-width:0;gap:9px}
  .theme-tasks .child-choice strong{font-size:17px}
  .theme-tasks .child-choice small{font-size:11px}
  .theme-tasks .child-choice .avatar{width:43px;height:43px}
  .theme-tasks .child-summary-top{gap:8px}
  .theme-tasks .child-summary-top .btn{font-size:12px;padding:8px 10px}
  .theme-tasks .profile-stats strong{font-size:27px}
  .theme-tasks .profile-stats span{font-size:11px}
  .theme-tasks .calendar-grid{column-gap:0}
  .theme-tasks .calendar-compact-toggle{gap:9px}
  .theme-tasks .calendar-compact-toggle h2{font-size:16px}
  .theme-tasks .calendar-compact-toggle>span{font-size:12px}
  .theme-tasks .task-row{gap:11px}
  .theme-tasks .task-info h3{font-size:14px}
  .theme-tasks .task-info p{font-size:11px}
  .theme-tasks .task-meta{gap:8px}
  .theme-tasks .task-icon{height:44px;width:44px}
  .theme-tasks .task-btn{min-width:78px;font-size:12px;padding:8px 10px}
  .theme-tasks .pill-tabs{gap:3px}
  .theme-tasks .pill-tabs button{min-width:48px;font-size:12px;padding:8px 11px}
  .theme-tasks .page-toolbar>.btn{font-size:12px;padding:8px 11px}
}

@media (min-width:1000px){
  .content{padding-left:32px;padding-right:32px}
  .app-topbar{padding-left:32px;padding-right:32px}
  .storybook-hero{height:350px;margin-left:-32px;margin-right:-32px}
  .hero-title{padding:118px 46px 0}
  .hero-title h1{font-size:40px;max-width:340px}
  .hero-title p{font-size:15px;max-width:320px}
  .home-body{gap:28px}
  .home-shortcuts{max-width:760px}
  .home-section .feature-card{min-height:122px;padding:22px;gap:19px}
  .home-section .feature-copy strong{font-size:17px}
  .home-section .feature-copy small{font-size:14px}
  .home-shortcuts button>span{width:76px;height:76px}
  .home-shortcuts strong{font-size:15px}
  .apps-grid,.reward-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .app-tool{min-height:204px}
  .reward-tabs{margin-left:-32px;margin-right:-32px}
  .profile-cover{margin-left:-32px;margin-right:-32px;padding-left:44px;min-height:262px}
  .profile-cover h1{font-size:38px}
  .profile-cover>span{height:210px;width:210px;right:48px}
  .theme-tasks .content{grid-template-columns:348px minmax(0,1fr)}
  .theme-tasks .task-info h3{font-size:15px}
  .theme-tasks .task-info p{font-size:12px}
  .theme-tasks .task-btn{font-size:13px;min-width:84px}
}

/* Small tablets and Split View retain generous cards without crowded columns. */
@media (min-width:700px) and (max-width:899px){
  .home-tasks .time{display:none}
  .home-badge-stats{margin-top:-22px}
  .hero-title{padding-left:28px;padding-right:12px}
  .hero-title h1{font-size:33px}
  .hero-title p{font-size:13px;max-width:250px}
  .home-section .feature-card{padding:18px 15px;gap:12px}
  .home-section .feature-sticker,.home-section .feature-sticker>svg{width:46px;height:46px}
  .home-section .feature-copy strong{font-size:15px}
  .home-section .feature-copy small{font-size:12px}
  .report-grid{grid-template-columns:minmax(0,1fr)}
  .profile-menu{grid-template-columns:minmax(0,1fr)}
  .profile-menu-row:nth-last-child(2){border-bottom:1px solid #eff2f4}
  .family-card{padding:20px}
  .family-top{gap:10px}
  .family-top .avatar.large{width:56px;height:56px}
  .family-top h2{font-size:20px}
  .family-top p{font-size:12px}
  .settings-grid{gap:16px}
  .settings-card{padding:19px}
  .settings-card .btn{max-width:100%;white-space:normal}
}

/* Family cloud connection: the same flat style on phone and iPad. */
.cloud-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 18px;background:#eef9fc;color:#79a9bb;border-top:1px solid #e8f5fa;font-size:10px}
.cloud-status>span{display:flex;align-items:center;gap:5px;line-height:1.6}
.cloud-status>button{display:flex;align-items:center;gap:3px;font-size:10px;color:#68a8c3;white-space:nowrap;padding:4px 0}
.cloud-status.has-error{background:#fff6e6;color:#bc9a68}
.cloud-locked .content{display:block!important}
.cloud-welcome{grid-column:1/-1;max-width:640px;margin:0 auto;padding:22px 4px 12px;text-align:center}
.cloud-welcome-art{display:block;width:150px;height:145px;margin:0 auto 15px;background:#e6f7fd;border-radius:45% 55% 50% 48%}
.cloud-welcome-art>svg{height:100%;width:100%}
.cloud-welcome>small{font-size:8px;letter-spacing:1.3px;color:#627b89}
.cloud-welcome h1{font-size:23px;color:#35728f;line-height:1.6;margin:10px 0 12px;font-weight:750}
.cloud-welcome>p{font-size:12px;line-height:1.95;color:#557184;margin-bottom:23px}
.cloud-entry-buttons{display:flex;flex-direction:column;gap:11px;max-width:345px;margin:0 auto}
.cloud-entry-buttons>.btn{min-height:44px}
.cloud-welcome-note{margin-top:23px;font-size:10px;line-height:1.9;color:#627989}
.cloud-welcome .notice{text-align:left;font-size:11px}
.cloud-modal-switch{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:14px;border-top:1px dashed #e5eff5;padding-top:14px}
.cloud-code-input{font-size:23px;text-align:center;letter-spacing:4px}
.cloud-code-input::placeholder{font-size:12px;letter-spacing:0}
.cloud-connected{display:flex;align-items:center;gap:11px;background:#edf8fd;padding:15px;border-radius:15px;margin-bottom:18px}
.cloud-connected>div{flex:1;min-width:0}
.cloud-connected h3{font-size:14px;color:#47738d;font-weight:600}
.cloud-connected p{font-size:10px;color:#556f80;margin-top:4px;overflow-wrap:anywhere}
.cloud-pair-section{background:#fff9e8;padding:17px;border-radius:15px;margin:20px 0}
.cloud-pair-section h3,.cloud-device-section h3{font-size:13px;font-weight:600;color:#526d68;margin-bottom:9px}
.cloud-pair-section>p{font-size:10px;line-height:1.9;color:#66715b;margin-bottom:14px}
.cloud-pair-code{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px dashed #e7d8ad;padding:13px 15px;border-radius:13px;margin:13px 0}
.cloud-pair-code strong{font-size:29px;letter-spacing:4px;font-weight:700;color:#8a681f}
.cloud-device-section{margin:21px 0}
.cloud-device-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px dashed #e4eef4;padding:13px 0}
.cloud-device-row>div{min-width:0}
.cloud-device-row strong{font-size:12px;font-weight:500;color:#526f83;overflow-wrap:anywhere}
.cloud-device-row small{display:block;font-size:10px;color:#627989;margin-top:4px}
.cloud-panel-actions{display:flex;gap:9px;justify-content:space-between;margin-top:20px}
@media(min-width:700px){.cloud-status{padding:8px 28px;font-size:12px}.cloud-status>button{font-size:12px;min-height:38px}.cloud-welcome{padding:32px 20px}.cloud-welcome-art{width:180px;height:175px}.cloud-welcome h1{font-size:29px}.cloud-welcome>p{font-size:14px}.cloud-welcome-note{font-size:12px}.cloud-connected h3{font-size:16px}.cloud-connected p,.cloud-pair-section>p{font-size:12px}.cloud-pair-section h3,.cloud-device-section h3{font-size:15px}.cloud-device-row strong{font-size:14px}.cloud-device-row small{font-size:12px}.cloud-device-row .btn{min-height:40px}}