/* Children's presentation is scoped; the parent's workspace stays compact. */
.child-picker button{display:flex;align-items:center;justify-content:center;gap:8px}.profile-mascot{width:34px;height:34px;object-fit:contain;flex-shrink:0}
body[data-mode="kid"] .profile-mascot{width:48px;height:48px;filter:drop-shadow(0 3px 2px #263b3515)}
.mode-switcher{display:flex;gap:6px;max-width:400px;margin:0 0 18px;padding:5px;background:#e9eee5;border-radius:16px}
.mode-switcher button{flex:1;background:transparent}.mode-switcher .active{background:#fff;box-shadow:0 2px 6px #253b3210}
.hero{display:flex;align-items:center;gap:24px}.hero-copy{flex:1;min-width:0}
.day-journey{margin-top:20px;max-width:450px}.day-journey label{font-size:13px;font-weight:600;line-height:1.6;margin:0 0 9px}
progress{display:block;width:100%;height:11px;border:0;border-radius:20px;overflow:hidden;accent-color:var(--green);background:#fff9}
progress::-webkit-progress-bar{background:#fff9;border-radius:20px}progress::-webkit-progress-value{background:var(--green);border-radius:20px;transition:width .5s ease}
progress::-moz-progress-bar{background:var(--green);border-radius:20px}
.mascot{display:none}.kid-help{display:none}.task-actions{display:flex;gap:8px;flex-wrap:wrap}
.task .complete-button{width:auto;min-width:52px;height:auto;min-height:48px;padding:11px 14px;font-size:14px}
.task .listen-button{background:#eff2fb;color:#454779}.task.is-speaking{outline:2px solid #9989c3;outline-offset:3px}
.listen-button.is-speaking{background:#eee6fb;color:#594184}
body[data-mode="parent"] .day-journey{display:none}
body[data-mode="parent"] .task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
body[data-mode="parent"] .task-content{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px}
body[data-mode="parent"] .task-icon{grid-row:1/5;font-size:32px;margin:0}
body[data-mode="parent"] .task-title{font-size:17px}
body[data-mode="parent"] .task-meta{grid-column:2}
body[data-mode="parent"] .task-actions{grid-column:1/-1}
body[data-mode="parent"] .done .task-title{padding-bottom:0}
body[data-mode="parent"] .done .task-title::before,body[data-mode="parent"] .done .task-title::after{display:none}
body[data-mode="parent"] *,body[data-mode="parent"] *::before,body[data-mode="parent"] *::after{animation:none!important}

body[data-mode="kid"]{--bg:#faf8f0;--ink:#263b35;--green:#347460;--muted:#61736b;--line:#e4e8dc;--nav-height:86px;background:radial-gradient(ellipse at 92% 5%,#f1e9fc80 0,transparent 38%),var(--bg)}
body[data-mode="kid"][data-child="finn"]{--green:#397695}
body[data-mode="kid"] main{max-width:1330px}
body[data-mode="kid"] header{margin-bottom:20px}
body[data-mode="kid"] h1{font-size:clamp(28px,3vw,38px);font-weight:850;letter-spacing:-1px}
body[data-mode="kid"] .eyebrow{letter-spacing:1.8px;color:#65776c}
body[data-mode="kid"] button{transition:transform .17s ease,box-shadow .17s ease,background .17s ease}
body[data-mode="kid"] button:not(:disabled):active{transform:scale(.95)}
body[data-mode="kid"] #accountButton{border:1px solid var(--line);background:#fff;font-size:14px}
body[data-mode="kid"] .child-picker{gap:12px;max-width:550px}
body[data-mode="kid"] .child-picker button{min-height:62px;background:#fff;border:2px solid var(--line);border-radius:20px;font-size:17px;padding:15px 12px}
body[data-mode="kid"] .child-picker .active{border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 5px 0 #254b3824}
body[data-mode="kid"] .hero{position:relative;overflow:hidden;min-height:260px;border:1px solid #d9e7d8;border-radius:30px;background:linear-gradient(115deg,#e7f1df 0%,#eef4df 60%,#fbefd1 100%);padding:26px}
body[data-mode="kid"][data-child="finn"] .hero{background:linear-gradient(115deg,#e5f2f7,#f8efdf);border-color:#d5e7ee}
body[data-mode="kid"] .hero h2{font-size:clamp(26px,3vw,36px);line-height:1.2;font-weight:850;letter-spacing:-1px;margin:18px 0 10px}
body[data-mode="kid"] .hero p{font-size:15px;line-height:1.6;margin:0;max-width:480px}
body[data-mode="kid"] .pill{display:inline-flex;align-items:center;font-weight:650;font-size:12px;box-shadow:0 2px 0 #34553408}
body[data-mode="kid"] .day-journey{margin-top:18px}
body[data-mode="kid"] .mascot{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;flex:0 0 210px;width:210px;height:220px;align-self:center}
.mascot-circle{position:relative;display:grid;place-items:center;width:170px;height:170px;border-radius:50%;background:linear-gradient(150deg,#fffaf0,#ffe4a4);border:8px solid #fff8;box-shadow:0 14px 30px #ae9b4e13}
body[data-child="finn"] .mascot-circle{background:linear-gradient(150deg,#fffaf0,#cce5f2)}
.mascot-face{display:block;position:relative;z-index:1;width:154px;height:154px;object-fit:contain;transform-origin:50% 70%;animation:mascot-hello 2s ease-in-out 2}
.mascot-ground{position:absolute;width:85px;height:12px;bottom:18px;border-radius:50%;background:#ba98562b;filter:blur(3px)}
.mascot-message{position:absolute;bottom:5px;z-index:2;background:#fff;padding:10px 14px;border-radius:15px;font-size:12px;font-weight:750;box-shadow:0 4px 12px #ad984a15;transform:rotate(-3deg)}
.mascot-spark{position:absolute;font-size:28px;color:#b9882b;animation:gentle-twinkle 1.8s ease-in-out 3}
.spark-one{top:18px;left:9px}.spark-two{top:58px;right:0;color:#9b7fb9;font-size:32px;animation-delay:.35s}
.mascot-orbit{position:absolute;z-index:2;top:0;right:27px;font-size:28px;transform:rotate(12deg);animation:star-float 2s ease-in-out 2}
.mascot.all-done .mascot-circle{box-shadow:0 0 0 8px #f5d97550,0 14px 30px #ae9b4e13}
body[data-mode="kid"] .stats{gap:10px;margin:18px 0 22px}
body[data-mode="kid"] .stats>div{border:0;background:#fff;border-radius:21px;padding:18px 13px;box-shadow:0 3px 0 #e9e4d470;font-size:13px}
body[data-mode="kid"] .stats>div:first-child{background:#fff1ca}
body[data-mode="kid"] .stats>div:nth-child(2){background:#e6f0e6}
body[data-mode="kid"] .stats>div:nth-child(3){background:#eee8f7}
body[data-mode="kid"] .stats strong{font-size:30px;font-weight:850;margin-top:8px;line-height:1.1}
body[data-mode="kid"] #view-tasks>.card{background:transparent;border:0;padding:0}
body[data-mode="kid"] .section-heading h2{font-size:24px;font-weight:800}
body[data-mode="kid"] .periods{max-width:560px;background:#eeeede;border-radius:18px;gap:6px;margin-bottom:14px;padding:6px}
body[data-mode="kid"] .periods button{min-height:50px;font-size:16px;font-weight:750;border-radius:14px}
body[data-mode="kid"] .periods button.active{box-shadow:0 3px 0 #3455340b}
body[data-mode="kid"] .hint{display:none}
body[data-mode="kid"] .kid-help{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#62726a;font-size:14px;line-height:1.5;margin:16px 0 18px}
body[data-mode="kid"] #tasksList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:16px;align-items:start}
body[data-mode="kid"] .task{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;padding:22px;border:2px solid #e4e9df;background:#fff;border-radius:26px;box-shadow:0 5px 0 #e7e8da;transition:border-color .2s,box-shadow .2s}
body[data-mode="kid"] .task:nth-child(3n+2){border-color:#e7dff0;box-shadow:0 5px 0 #eae3f1}
body[data-mode="kid"] .task:nth-child(3n+3){border-color:#f0e1d3;box-shadow:0 5px 0 #efe4d5}
body[data-mode="kid"] .task-content{grid-column:1/-1}
body[data-mode="kid"] .task-icon{display:grid;place-items:center;width:64px;height:64px;font-size:38px;background:#f3f3e7;border-radius:21px;margin-bottom:15px}
body[data-mode="kid"] .task:nth-child(3n+2) .task-icon{background:#f2edf9}
body[data-mode="kid"] .task:nth-child(3n+3) .task-icon{background:#fff0e3}
body[data-mode="kid"] .task-title{display:block;font-size:21px;font-weight:800;line-height:1.35;padding-right:0;word-break:normal}
body[data-mode="kid"] .task-meta{font-size:13px;line-height:1.6;margin-top:8px}
body[data-mode="kid"] .task-description{font-size:15px;color:#475f55;margin-top:10px;line-height:1.55}
body[data-mode="kid"] .points{position:absolute;top:24px;right:22px;border-radius:12px;background:#fff3ce;font-weight:750;font-size:14px;padding:8px 10px}
body[data-mode="kid"] .task-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
body[data-mode="kid"] .task-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;width:100%;border-radius:16px;font-size:16px;font-weight:750}
body[data-mode="kid"] .listen-button{color:#57517d;background:#eeeaf8;box-shadow:0 3px 0 #e2dced}
body[data-mode="kid"] .listen-button.is-speaking{background:#ded5f1;color:#4c3b6b;box-shadow:0 3px 0 #c5b6df}
body[data-mode="kid"] .is-speaking .task-icon{animation:listen-pulse 1.3s ease-in-out infinite}
body[data-mode="kid"] .task .complete-button{width:100%;height:auto;border:0;background:var(--green);color:white;box-shadow:0 4px 0 #254b3829;font-size:16px;padding:13px 12px}
body[data-mode="kid"] .task.done{background:#f1f7ed;border-color:#c4d9bf;box-shadow:0 5px 0 #d8e5d2}
body[data-mode="kid"] .done .complete-button{background:#dcebd8;color:#376647;box-shadow:none;animation:none}
body[data-mode="kid"] .done .task-title{padding-bottom:0}
body[data-mode="kid"] .done .task-title::before{display:none}
body[data-mode="kid"] .done .task-title::after{bottom:-4px;height:3px;transform:scaleX(1);animation:none}
body[data-mode="kid"] .done .task-icon{animation:none}
body[data-mode="kid"] #sidebar{background:#fffffff2;backdrop-filter:blur(12px)}
body[data-mode="kid"] nav button{border-radius:16px;min-height:58px;font-weight:750;font-size:13px}
body[data-mode="kid"] nav button>span:first-child{font-size:27px}
body[data-mode="kid"] nav button.active{background:#e5f0e0;color:#347460;box-shadow:0 2px 0 #d4e4cb}
body[data-mode="kid"] .list-row .row-title{font-size:18px}
body[data-mode="kid"] #rewardsList>.list-row{padding:22px 0}
body[data-mode="kid"] #rewardsList button{min-height:52px;padding:12px 22px;background:#fff0c3;color:#665025}
body[data-mode="kid"] .reward-icon{font-size:44px}
body[data-mode="kid"] footer{margin-top:28px;font-size:12px}
.completion-cheer{position:fixed;z-index:40;bottom:calc(var(--nav-height) + 20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);border:2px solid #f0d99c;border-radius:23px;padding:17px 22px;background:#fff9df;box-shadow:0 12px 40px #523e232b}
.cheer-face{font-size:40px}.completion-cheer strong{display:block;font-size:19px}.completion-cheer div>span{display:block;margin-top:4px;font-size:14px}
.confetti{position:fixed;z-index:35;pointer-events:none;left:var(--confetti-x);top:-16px;width:9px;height:15px;border-radius:3px;animation:confetti-fall 1.4s var(--confetti-delay) ease-in both}
@keyframes mascot-hello{0%,100%{transform:translateY(0) rotate(-4deg)}40%{transform:translateY(-7px) rotate(5deg)}70%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes gentle-twinkle{0%,100%{opacity:.65;transform:scale(.8) rotate(-8deg)}50%{opacity:1;transform:scale(1.15) rotate(10deg)}}
@keyframes star-float{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-8px) rotate(25deg)}}
@keyframes listen-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(85vh) rotate(var(--confetti-turn))}}
@media(hover:hover){body[data-mode="kid"] .task-actions button:not(:disabled):hover{transform:translateY(-2px)}body[data-mode="kid"] .child-picker button:not(:disabled):hover{transform:translateY(-2px)}}
@media(min-width:768px){body[data-mode="kid"] #sidebar{width:215px;padding:28px 18px}body[data-mode="kid"] main{margin-left:215px;padding:32px 32px 44px}body[data-mode="kid"] nav button{font-size:15px;gap:13px;min-height:62px}body[data-mode="kid"] .hero{padding:28px 30px}body[data-mode="kid"].collapsed #sidebar{width:82px}body[data-mode="kid"].collapsed main{margin-left:82px}.completion-cheer{bottom:30px}}
@media(max-width:520px){body[data-mode="kid"] main{padding:22px 16px calc(var(--nav-height) + 34px + env(safe-area-inset-bottom))}body[data-mode="kid"] .hero{min-height:220px;padding:22px 20px;gap:0}body[data-mode="kid"] .hero-copy{position:relative;z-index:1}body[data-mode="kid"] .hero h2{max-width:230px;padding-right:50px;font-size:26px}body[data-mode="kid"] .hero p{position:relative;max-width:235px;font-size:13px;padding-right:8px}body[data-mode="kid"] .mascot{position:absolute;top:26px;right:2px;width:90px;height:140px;opacity:.94}body[data-mode="kid"] .mascot-circle{width:87px;height:87px;border-width:5px}body[data-mode="kid"] .mascot-face{font-size:56px}body[data-mode="kid"] .mascot-message{display:none}body[data-mode="kid"] .mascot-spark{font-size:17px}.mascot-ground{width:45px;height:7px;bottom:9px}.spark-one{top:15px;left:-7px}.spark-two{top:68px;right:0}.mascot-orbit{top:8px;right:8px;font-size:17px}body[data-mode="kid"] .stats>div{font-size:11px;padding:15px 10px}body[data-mode="kid"] .stats strong{font-size:26px}body[data-mode="kid"] .child-picker button{font-size:14px;padding:13px 9px;min-height:56px}body[data-mode="kid"] .roleline{font-size:12px}body[data-mode="kid"] #status{font-size:12px;min-height:28px;padding:3px 0}.completion-cheer{padding:14px 17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti,.flying-star{display:none!important}}
@media(max-width:520px){body[data-mode="kid"] .hero h2{max-width:none;padding-right:86px;font-size:24px}body[data-mode="kid"] .hero p{max-width:none;padding-right:20px;font-size:13px}body[data-mode="kid"] .day-journey label{font-size:12px}}
@media(max-width:520px){body[data-mode="kid"] .mascot-face{width:82px;height:82px}body[data-mode="kid"] .profile-mascot{width:38px;height:38px}body[data-mode="kid"] .child-picker button{gap:5px;padding:9px 6px}}