:root{--navy:#083b82;--blue:#0a75de;--aqua:#24d0f2;--sky:#dff8ff;--card:#ffffffee;--ink:#0a2b59;--muted:#6683a4;--shadow:0 12px 30px rgba(7,61,126,.18);font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#00aee4;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;position:relative;overflow-x:hidden;background:linear-gradient(180deg,#6ee9ff 0,#18c5f3 22%,#078edb 60%,#0464ba 100%);padding-bottom:106px}.ocean-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:radial-gradient(circle at 50% -20%,rgba(255,255,255,.9),transparent 43%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,47,126,.12))}.ocean-bg:after{content:"";position:absolute;inset:20% 0 0;opacity:.24;background-image:radial-gradient(ellipse at 12% 35%,#0b4b93 0 2%,transparent 2.2%),radial-gradient(ellipse at 88% 50%,#0b4b93 0 2.5%,transparent 2.7%),radial-gradient(ellipse at 20% 65%,#0b4b93 0 1.7%,transparent 1.9%),radial-gradient(ellipse at 78% 72%,#0b4b93 0 2%,transparent 2.2%)}.bubble{position:absolute;border:2px solid #ffffffb5;border-radius:50%;box-shadow:inset 0 0 10px #fff9}.b1{width:42px;height:42px;left:4%;top:6%}.b2{width:20px;height:20px;right:7%;top:10%}.b3{width:28px;height:28px;left:8%;top:42%}.b4{width:50px;height:50px;right:3%;top:39%}.b5{width:18px;height:18px;left:3%;top:73%}.b6{width:30px;height:30px;right:9%;top:79%}.coral{position:absolute;bottom:-20px;width:180px;height:180px;border-radius:50%;filter:blur(.2px);opacity:.9}.coral-left{left:-35px;background:radial-gradient(circle at 30% 80%,#ff58bd 0 11%,transparent 12%),radial-gradient(circle at 48% 65%,#00d796 0 12%,transparent 13%),radial-gradient(circle at 65% 78%,#ffd048 0 14%,transparent 15%),radial-gradient(circle at 40% 90%,#6c45f5 0 26%,transparent 27%)}.coral-right{right:-30px;background:radial-gradient(circle at 60% 70%,#ff814a 0 13%,transparent 14%),radial-gradient(circle at 45% 82%,#21db75 0 13%,transparent 14%),radial-gradient(circle at 72% 87%,#884df3 0 21%,transparent 22%)}.hero-header{position:relative;z-index:2;min-height:240px;padding:25px 20px 70px;text-align:center}.parent-approved-logo{display:block;width:min(220px,46vw);margin:0 auto 15px;border-radius:16px;box-shadow:0 5px 15px #0673c947} .brand-lockup{display:inline-flex;align-items:center;gap:7px;color:#0457b8;background:#ffffffd9;border:3px solid #fff;border-radius:26px;padding:6px 12px;box-shadow:0 5px 15px #0673c947;margin-bottom:16px}.brand-tooth{width:43px;height:43px;display:grid;place-items:center;border-radius:45% 45% 55% 55%;background:#fff;color:#075fca;border:3px solid #0b80e6;font-size:28px;font-weight:950;font-style:italic}.brand-text{display:flex;flex-direction:column;line-height:.82;text-align:left;font-size:16px;font-weight:900}.brand-text span{font-size:21px}.hero-header h1{margin:4px auto 0;font-size:clamp(27px,6vw,40px);font-weight:950;letter-spacing:-.04em;text-shadow:0 2px 0 #fff7}.icon-button{position:absolute;top:102px;width:54px;height:54px;border:0;border-radius:20px;background:#fff;box-shadow:var(--shadow);font-size:32px;color:var(--navy);z-index:5}.back{left:max(24px,calc(50% - 220px))}.bell{right:max(24px,calc(50% - 220px));font-size:22px}.notification-dot{position:absolute;right:11px;top:10px;width:10px;height:10px;background:#f52543;border:2px solid #fff;border-radius:50%}.mascot{position:absolute;z-index:-1;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,80,160,.2))}.mascot-coco{left:max(-30px,calc(50% - 360px));top:24px;width:185px;transform:rotate(-4deg)}.mascot-louis{right:max(-25px,calc(50% - 360px));top:35px;width:185px;transform:rotate(4deg)}.side-note{position:absolute;top:145px;color:#074ca6;font-weight:900;font-size:16px;line-height:1.15;transform:rotate(-7deg);text-shadow:0 1px #fff}.side-note.left{left:max(10px,calc(50% - 390px));text-align:left}.side-note.right{right:max(8px,calc(50% - 395px));transform:rotate(5deg);text-align:right}.content{position:relative;z-index:3;width:min(94%,760px);margin:-58px auto 0}.card{background:linear-gradient(180deg,#fff,#f9fdff);border:1px solid #bfefff;border-radius:28px;margin:0 0 14px;box-shadow:var(--shadow);overflow:hidden}.profile-card{min-height:148px;display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:14px;padding:18px 20px}.avatar-wrap{width:96px;height:96px;border-radius:28px;background:linear-gradient(145deg,#eee4ff,#d6f7ff);overflow:hidden;display:grid;place-items:center}.avatar-wrap img{width:90%;height:90%;object-fit:contain}.profile-copy h2,.section-heading h2{margin:0;font-size:clamp(23px,5vw,34px);line-height:1.04;letter-spacing:-.04em}.profile-copy p{margin:8px 0 0;color:#52749f;font-size:15px}.pill-button{border:0;background:linear-gradient(180deg,#dcf7ff,#bfeeff);color:#0570d5;font-weight:900;border-radius:24px;padding:14px 18px;font-size:18px}.section-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 20px 10px}.text-link{border:0;background:transparent;color:#0875cf;font-weight:900;font-size:17px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 18px}.stat{min-height:110px;border:0;border-radius:24px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:16px;text-align:left;color:var(--ink);box-shadow:inset 0 0 0 1px #ffffff99}.stat-icon{grid-row:1/3;font-size:38px;margin-right:10px}.stat strong{font-size:31px;line-height:1}.stat small{font-size:14px;font-weight:800}.stat-blue{background:#e0f7ff}.stat-purple{background:#eee7ff}.stat-gold{background:#fff1bd}.stat-gold:active{transform:scale(.98)}.appointment-card,.education-card,.menu-card{padding-bottom:8px}.list-row{width:100%;border:0;border-top:1px solid #e4eff7;background:transparent;display:grid;grid-template-columns:58px 1fr 24px;gap:14px;align-items:center;padding:14px 20px;text-align:left;color:var(--ink)}.row-icon{width:50px;height:50px;border-radius:17px;background:#dff5ff;display:grid;place-items:center;font-size:25px;font-weight:950}.calendar{background:linear-gradient(#ff6d6d 0 25%,#fff 26%);border:1px solid #d9eafa;color:#183f73;padding-top:9px}.row-copy{display:flex;flex-direction:column;min-width:0}.row-copy strong{font-size:17px}.row-copy small{color:#6683a4;font-size:13px;white-space:normal}.chev{font-size:27px;color:#7393b1}.see-all{padding:8px 20px 12px}.demo-hint{text-align:center;color:#e8fbff;font-size:12px;margin:14px 10px 4px}.bottom-nav{position:fixed;z-index:20;left:0;right:0;bottom:0;padding:8px max(10px,calc((100vw - 760px)/2)) calc(8px + env(safe-area-inset-bottom));background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(3,53,110,.22);display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.bottom-nav button{border:0;background:transparent;color:#55708e;border-radius:24px;padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:900}.bottom-nav button span{font-size:27px}.bottom-nav button small{font-size:12px}.bottom-nav button.active{background:#dff5ff;color:#0782dc}.modal-backdrop{position:fixed;z-index:50;inset:0;background:#042d66aa;display:grid;place-items:end center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(100%,720px);max-height:88vh;overflow:auto;background:#fff;border-radius:28px;padding:20px;box-shadow:0 30px 80px #001d4d66}.modal.compact{max-width:520px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;font-size:26px}.close{width:42px;height:42px;border:0;border-radius:50%;background:#edf7ff;color:#0b4f9a;font-size:29px}.modal-sub{color:#6583a4}.character-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.character-option{border:2px solid #dceffa;background:#f8fdff;border-radius:24px;padding:12px;color:var(--ink);display:flex;flex-direction:column;align-items:center;min-height:190px}.character-option img{width:105px;height:125px;object-fit:contain}.character-option strong{font-size:15px}.character-option small{color:#6c85a2}.appointment-form{display:grid;gap:12px}.appointment-form label{display:grid;gap:6px;font-weight:800}.appointment-form input{border:1px solid #bddceb;border-radius:14px;padding:13px}.primary-action{border:0;background:linear-gradient(180deg,#0d8cf0,#0769c9);color:#fff;border-radius:18px;padding:15px;font-weight:950;font-size:17px}.reward-layer{position:fixed;z-index:100;inset:0;pointer-events:none;display:none;overflow:hidden}.reward-layer.play{display:block}.fairy{position:absolute;left:-100px;top:42%;font-size:66px;filter:drop-shadow(0 0 12px #fff);transform:translate(-50%,-50%);animation:flyToChest 2s cubic-bezier(.2,.8,.25,1) forwards}.wing{position:absolute;width:42px;height:62px;border-radius:70% 20% 70% 20%;background:#d8fbffbb;border:2px solid white;top:2px;z-index:-1}.wing-a{left:-12px;transform:rotate(-28deg)}.wing-b{right:-9px;transform:scaleX(-1) rotate(-28deg)}.treasure{position:absolute;right:7%;bottom:120px;width:110px;height:85px;filter:drop-shadow(0 10px 10px #00386b66)}.treasure .box{position:absolute;bottom:0;width:110px;height:55px;background:linear-gradient(#d99328,#9e5614);border:5px solid #ffd86a;border-radius:10px}.treasure .lid{position:absolute;left:0;bottom:49px;width:110px;height:38px;background:linear-gradient(#e3a13b,#b76718);border:5px solid #ffd86a;border-radius:55px 55px 8px 8px;transform-origin:10px 35px}.treasure.open .lid{animation:openChest .5s ease forwards}.chest-star{position:absolute;left:38px;bottom:17px;font-size:34px;z-index:2}.sparkles{position:absolute;right:4%;bottom:180px;font-size:38px;color:#fff9a4;opacity:0}.sparkles.show{animation:sparklePop .9s ease forwards}.reward-message{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%) scale(.7);background:#fff;color:#075db8;border-radius:30px;padding:16px 26px;font-size:clamp(22px,6vw,36px);font-weight:950;box-shadow:0 15px 50px #005bb75c;opacity:0;white-space:nowrap}.reward-message.show{animation:messagePop 1.2s ease forwards}@keyframes flyToChest{0%{left:-10%;top:46%;transform:translate(-50%,-50%) rotate(-12deg)}60%{left:65%;top:38%;transform:translate(-50%,-50%) rotate(8deg)}85%{left:84%;top:67%;transform:translate(-50%,-50%) rotate(-8deg) scale(.9)}100%{left:86%;top:72%;transform:translate(-50%,-50%) rotate(0) scale(.8)}}@keyframes openChest{to{transform:rotate(-45deg) translate(-7px,-7px)}}@keyframes sparklePop{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(1.8)}}@keyframes messagePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}@media(max-width:700px){.hero-header{min-height:210px;padding-top:16px}.mascot{width:145px}.mascot-coco{left:-35px}.mascot-louis{right:-30px}.side-note{display:none}.brand-lockup{transform:scale(.86)}.icon-button{top:88px;width:48px;height:48px}.back{left:18px}.bell{right:18px}.hero-header h1{margin-top:3px}.content{margin-top:-40px;width:calc(100% - 22px)}.profile-card{grid-template-columns:82px 1fr;min-height:130px;padding:14px}.avatar-wrap{width:78px;height:78px;border-radius:22px}.pill-button{grid-column:2;justify-self:start;padding:10px 14px;font-size:15px}.profile-copy h2{font-size:24px}.profile-copy p{font-size:13px}.stats-grid{gap:7px;padding:0 10px 12px}.stat{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center;padding:10px 5px;min-height:112px}.stat-icon{grid-row:auto;font-size:28px;margin:0}.stat strong{font-size:27px}.stat small{font-size:12px}.section-heading{padding:14px 15px 8px}.section-heading h2{font-size:23px}.text-link{font-size:14px}.list-row{padding:12px 14px;grid-template-columns:50px 1fr 18px;gap:10px}.row-icon{width:44px;height:44px;border-radius:14px}.character-grid{grid-template-columns:repeat(2,1fr)}.reward-message{top:24%}}