:root{--cream:#FDF8F0;--orange:#F4732B;--orange-dark:#E05A1C;--orange-deep:#C24B14;--green:#2E9E5B;--green-deep:#1E7A44;--ink:#2B2E33;--line:#EFE6D8;--muted:#8A8378;--coral:#EF6C5C;--coral-soft:#FDECE9}
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(circle at 12% -5%, #FFE9D6 0%, var(--cream) 42%) fixed, var(--cream);color:var(--ink);font-family:'Nunito',sans-serif;line-height:1.5;min-height:100vh}
h1,h2,.logo{font-family:'Fredoka',sans-serif}
.wrap{max-width:720px;margin:0 auto;padding:28px 20px 80px}
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.logo{font-size:20px;font-weight:700;display:flex;align-items:center;gap:9px}.logo span{color:var(--orange)}
.logo img{height:76px;width:auto;filter:drop-shadow(0 4px 10px rgba(244,115,43,.18))}
.signout{font-size:13px;font-weight:800;color:var(--muted);text-decoration:none;cursor:pointer;background:none;border:none}

/* centered states (loading / login / pending / error) */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 15%, #FFF6EC 0%, var(--cream) 55%)}
.card{background:#fff;border:1px solid var(--line);border-bottom:5px solid var(--line);border-radius:28px;padding:38px 34px;max-width:420px;width:100%;text-align:center;box-shadow:0 24px 60px -22px rgba(43,46,51,.22), 0 2px 8px rgba(43,46,51,.05)}
.card .emoji{font-size:38px;margin-bottom:6px}
.card h1{font-size:23px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.card p{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:18px}
.brandlogo{height:52px;width:auto;margin:0 auto 16px;display:block;filter:drop-shadow(0 6px 14px rgba(244,115,43,.22))}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.brandlogo{animation:floaty 3.5s ease-in-out infinite}
.row{display:flex;gap:8px}
.field{margin-bottom:12px;text-align:left}
.field label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;padding-left:2px}
input{width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:13px;font-size:14.5px;font-family:'Nunito';font-weight:700;outline:none;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,115,43,.15)}
input::placeholder{color:#C9C2B4;font-weight:700}
button.primary{width:100%;background:var(--orange);color:#fff;border:none;border-bottom:4px solid var(--orange-deep);font-family:'Fredoka';font-weight:600;font-size:15px;padding:13px 18px;border-radius:13px;cursor:pointer;transition:background .15s,transform .1s,border-bottom-width .1s}
button.primary:hover{background:var(--orange-dark)}
button.primary:active{transform:translateY(3px);border-bottom-width:1px}
.pwwrap{position:relative}
.pwtoggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:15px;cursor:pointer;padding:4px;line-height:1;opacity:.6}
.pwtoggle:hover{opacity:1}
.pwhint{font-size:11.5px;font-weight:700;margin:4px 0 10px 2px;min-height:14px;text-align:left}
.pwhint.err{color:#C0392B}
.pwhint.ok{color:#1F6B41}
button.primary:disabled{opacity:.55;cursor:default;transform:none}
.msg{font-size:12.5px;font-weight:700;margin-top:10px;display:none;line-height:1.4}
.msg.show{display:block}
.msg.ok{color:var(--green)}
.msg.err{color:#D14343}

/* auth card specifics */
.authtabs{display:flex;background:var(--cream);border-radius:13px;padding:4px;margin-bottom:20px}
.authtab{flex:1;padding:9px 10px;border:none;background:none;font-family:'Fredoka';font-weight:600;font-size:13.5px;color:var(--muted);border-radius:10px;cursor:pointer;transition:all .15s}
.authtab.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(43,46,51,.1)}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:13px;padding:12px 16px;font-family:'Fredoka';font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s,border-bottom-width .1s}
.gbtn:hover{border-color:#D9D1C0;box-shadow:0 2px 10px rgba(43,46,51,.08)}
.gbtn:active{transform:translateY(3px);border-bottom-width:1px}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.linkbtn{background:none;border:none;color:var(--orange-dark);font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0}
.authfoot{margin-top:16px;font-size:12.5px;color:var(--muted);font-weight:700}
.otpcode{width:100%;padding:14px;border:2px solid var(--line);border-radius:13px;font-size:18px;font-weight:800;text-align:center;letter-spacing:.25em;font-family:'Fredoka';outline:none;transition:border-color .15s,box-shadow .15s}
.otpcode:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,115,43,.15)}
.backlink{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--muted);font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer;margin-bottom:14px}
.disclaimer{font-size:11px;color:var(--muted);font-weight:700;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);line-height:1.5}

/* unpaid / checkout card specifics */
.pricepick{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:6px}
.priceopt{position:relative;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:14px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.priceopt:hover{transform:translateY(-1px)}
.priceopt.rec{border-color:var(--orange);border-bottom-color:var(--orange-deep);background:#FFF3EA}
.priceopt .nm{font-weight:800;font-size:14.5px}
.priceopt .per{color:var(--muted);font-size:12px;font-weight:700}
.priceopt .pr{font-family:'Fredoka';font-size:18px;font-weight:600}
.pricebadge{position:absolute;top:-9px;left:14px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.3px}
.pswitchlist{display:flex;flex-direction:column;gap:10px}
.pswitch{position:relative;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:14px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.pswitch:hover{transform:translateY(-1px)}
.pswitch.current{border-color:var(--green);border-bottom-color:var(--green-deep);background:#EFFAF3;cursor:default}
.pswitch.current:hover{transform:none}
.pswitch.disabled{opacity:.5;pointer-events:none}
.pswitch .nm{font-weight:800;font-size:14.5px}
.pswitch .per{color:var(--muted);font-size:12px;font-weight:700}
.pswitch .pr{font-family:'Fredoka';font-size:17px;font-weight:600}
.pswitchbadge{position:absolute;top:-9px;left:14px;background:var(--green);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.3px}

/* plan header */
.planhead{background:linear-gradient(135deg,#fff 0%,#FFF6EC 100%);border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;padding:26px 26px;margin-bottom:20px;box-shadow:0 20px 46px -22px rgba(244,115,43,.28);position:relative;overflow:hidden}
.planhead::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(244,115,43,.16) 0%,transparent 70%)}
.planhead h1{font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.planhead .track{display:inline-block;background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);color:#fff;font-weight:800;font-size:12.5px;padding:5px 13px;border-radius:99px;margin-bottom:10px;box-shadow:0 6px 14px -4px rgba(244,115,43,.5)}
.banner{background:var(--coral-soft);border:2px solid #F4C9C2;border-radius:14px;padding:12px 16px;font-size:13px;font-weight:700;color:#8B3A30;margin-top:10px}

/* calendar / progress path */
.calwrap{background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;padding:20px 22px 22px;margin-bottom:22px;box-shadow:0 16px 40px -22px rgba(43,46,51,.16)}
.calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.calhead h2{font-size:15px;font-weight:600}
.calstreak{font-size:12.5px;font-weight:800;color:var(--orange-dark);background:#FFF3EA;padding:4px 10px;border-radius:99px}
/* ===== Premium top bar: persistent streak + notifications bell ===== */
.navright{display:flex;align-items:center;gap:6px}
.topstreak{display:flex;align-items:center;gap:3px;background:#FFF3EA;border:2px solid #FBD9BE;border-radius:99px;padding:4px 11px 4px 8px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;color:var(--orange-deep);line-height:1}
.topstreak b{font-weight:700}
.bellbtn{background:none;border:none;cursor:pointer;font-size:19px;padding:3px 5px;line-height:1;position:relative}
.bellbtn:active,.soundtoggle:active{transform:scale(.88)}
/* ===== Notifications slide-in panel (the bell) ===== */
.notifoverlay{position:fixed;inset:0;background:rgba(43,46,51,.35);z-index:1000;display:flex;justify-content:flex-end}
.notifpanel{width:min(92vw,400px);height:100%;background:var(--cream);box-shadow:-20px 0 50px -20px rgba(43,46,51,.45);display:flex;flex-direction:column;overflow-y:auto}
.notifpanelhead{position:sticky;top:0;background:var(--cream);display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px;z-index:2}
.notifpanelhead h2{font-family:'Fredoka',sans-serif;font-size:22px;font-weight:700}
.notifclose{width:34px;height:34px;border-radius:50%;border:none;background:#F0E9DC;font-size:15px;cursor:pointer;color:var(--muted)}
.n-quests{background:linear-gradient(135deg,#7C6BF0,#5E4CC7);border-radius:20px;padding:16px 18px;color:#fff;margin:2px 16px 12px;box-shadow:0 16px 30px -16px rgba(124,107,240,.6)}
.n-quests h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;font-family:'Fredoka',sans-serif;margin:0}
.q-row{display:flex;align-items:center;gap:10px;margin-top:11px;font-weight:800;font-size:13px}
.q-check{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.55);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.q-check.done{background:#fff;color:#5E4CC7;border-color:#fff}
.q-row.done span:last-child{opacity:.7;text-decoration:line-through}
.n-list{padding:2px 16px 34px;display:flex;flex-direction:column;gap:10px}
.n-card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:13px 14px;display:flex;gap:12px;align-items:flex-start;position:relative}
.n-card.unread{border-color:#FBD9BE;background:#FFFDFA}
.n-card.unread::before{content:"";position:absolute;top:15px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.n-ic{width:42px;height:42px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px}
.n-ic.due{background:#FFF0E4}.n-ic.streak{background:#FFF3D6}.n-ic.photo{background:#E9F6EE}.n-ic.cal{background:#E7F0FF}
.n-body{flex:1;min-width:0}
.n-t{font-family:'Fredoka',sans-serif;font-weight:600;font-size:14.5px;line-height:1.2}
.n-s{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:3px;line-height:1.4}
.n-act{margin-top:9px;background:var(--orange);color:#fff;border:none;border-bottom:3px solid var(--orange-deep);border-radius:11px;padding:8px 15px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer}
.n-act:active{transform:translateY(2px);border-bottom-width:1px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calweek{display:contents}
.daychip{position:relative;aspect-ratio:1;border-radius:13px;background:var(--cream);border:2px solid var(--line);border-bottom:4px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;transition:transform .12s,border-bottom-width .12s,background .15s,color .15s}
.daychip:hover{transform:translateY(-2px)}
.daychip:active{transform:translateY(3px);border-bottom-width:1px}
.daychip.today{background:#fff;border-color:var(--orange);border-bottom-color:var(--orange-deep);color:var(--orange-dark);box-shadow:0 6px 16px -6px rgba(244,115,43,.4);animation:pulseglow 2s ease-in-out infinite}
@keyframes pulseglow{0%,100%{box-shadow:0 6px 16px -6px rgba(244,115,43,.4)}50%{box-shadow:0 6px 24px -4px rgba(244,115,43,.75)}}
.daychip.done{background:var(--green);border-color:var(--green-deep);border-bottom-color:var(--green-deep);color:#fff}
.daychip .dot{width:5px;height:5px;border-radius:50%;background:currentColor;margin-top:3px;opacity:.5}
.daychip.done .dot,.daychip.today .dot{opacity:.9}

/* week groups */
.week{margin-bottom:16px}
.weektitle{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:18px 4px 8px}
.day{background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden;transition:transform .12s,box-shadow .15s,border-color .15s}
.day:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(43,46,51,.2)}
.day.open{border-color:var(--orange);border-bottom-color:var(--orange-deep)}
.day.done{border-color:var(--green);border-bottom-color:var(--green-deep)}
.daybtn{width:100%;text-align:left;background:none;border:none;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Nunito';font-weight:700}
.daybtn .num{color:var(--orange);font-weight:800;margin-right:8px}
.daybtn .time{font-size:12px;color:var(--muted);font-weight:800}
.daybody{display:none;padding:0 18px 20px}
.day.open .daybody{display:block}
.daybody .goal{font-size:14px;color:var(--muted);font-weight:700;margin-bottom:10px}
.daybody ul{margin:0 0 10px 18px}
.daybody li{font-size:14px;margin-bottom:4px}
.daybody .mistake,.daybody .success{font-size:12.5px;font-weight:700;padding:8px 10px;border-radius:10px;margin-top:6px}
.daybody .mistake{background:#FFF3EA;color:var(--orange-dark)}
.daybody .success{background:#EAF7EF;color:#1E7A44}
.donebtn{margin-top:12px;width:100%;background:var(--cream);color:var(--ink);border:2px solid var(--line);border-bottom:4px solid var(--line);font-family:'Fredoka';font-weight:600;font-size:13.5px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .1s,border-bottom-width .1s,background .15s,color .15s}
.donebtn:active{transform:translateY(3px);border-bottom-width:1px}
.donebtn.isdone{background:var(--green);color:#fff;border-color:var(--green-deep);border-bottom-color:var(--green-deep)}

/* bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--line);z-index:50;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0));box-shadow:0 -10px 30px -18px rgba(43,46,51,.25)}
.tabbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;background:none;border:none;cursor:pointer;color:var(--muted);font-family:'Fredoka',sans-serif;font-weight:600;font-size:12px;letter-spacing:.01em;border-radius:16px;transition:transform .12s,background .15s}
.tabbtn:active{transform:scale(.9)}
.tabbtn .ticon{font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;height:38px;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.tabbtn .ticon img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 50%;box-shadow:0 3px 8px rgba(43,46,51,.18);border:2px solid var(--line);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,border-color .18s}
.tabbtn.active{color:var(--orange-dark);background:#FFF3EA}
.tabbtn.active .ticon{transform:translateY(-3px) scale(1.12)}
.tabbtn.active .ticon img{border-color:var(--orange);box-shadow:0 6px 16px -4px rgba(244,115,43,.55);transform:scale(1.08)}
.wrap.shell{padding-bottom:108px}
@keyframes viewIn{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.wrap.shell,.daypage{animation:viewIn .28s cubic-bezier(.2,.8,.2,1)}
.bubblerow{animation:viewIn .22s ease-out}
.celebrate-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--green);color:#fff;font-family:'Fredoka';font-weight:600;font-size:14px;padding:12px 22px;border-radius:99px;box-shadow:0 10px 30px -10px rgba(30,122,68,.5);z-index:100;opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap}
.celebrate-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.confetti-piece{position:fixed;top:-24px;z-index:99;pointer-events:none;animation:confettifall 1.7s ease-in forwards}
@keyframes confettifall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(360deg);opacity:0}}

/* Week-complete celebration — a bigger, once-a-week moment layered on top of the daily toast */
.weekcelebrate{position:fixed;inset:0;background:rgba(43,46,51,.55);z-index:210;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.weekcelebrate.show{opacity:1;pointer-events:auto}
.weekcelebrate-card{background:#fff;border-radius:26px;padding:32px 26px;max-width:340px;width:100%;text-align:center;box-shadow:0 30px 70px -20px rgba(43,46,51,.4);transform:scale(.9);transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.weekcelebrate.show .weekcelebrate-card{transform:scale(1)}
.weekcelebrate-card img{width:96px;height:96px;object-fit:contain;margin-bottom:12px}
.weekcelebrate-card .wc-h{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.weekcelebrate-card .wc-p{font-size:13.5px;font-weight:700;color:var(--muted);line-height:1.55}

/* progress ring fills in smoothly instead of snapping to its value on load */
.chartring circle.ringfill{transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1)}

/* whole tab content softly settles in on every switch — Plan/Koa/Progress/Settings all get this */
.wrap.shell{animation:shellIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes shellIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* staggered entrance for list-like content (day rows, week bars, stat tiles) */
.stagger-in{animation:staggerIn .38s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes staggerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* satisfying pop the moment a day's "done" state lands — triggered once via JS, not on every render */
@keyframes checkPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.donebtn.pop{animation:checkPop .32s cubic-bezier(.34,1.56,.64,1)}

.soundtoggle{background:none;border:none;cursor:pointer;font-size:15px;opacity:.5;padding:4px 6px;line-height:1;transition:opacity .15s,transform .1s}
.soundtoggle:hover{opacity:.9}
.soundtoggle:active{transform:scale(.88)}

/* compact day row (each day opens its own screen, Duolingo-style) */
.dayrow{width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:16px;margin-bottom:10px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:transform .12s,box-shadow .15s;font-family:'Nunito'}
.dayrow:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(43,46,51,.2)}
.dayrow:active{transform:scale(.97) translateY(1px)}
.daychip:active{transform:scale(.9) translateY(2px)}
.dayrow.done{border-color:var(--green);border-bottom-color:var(--green-deep)}
.dayrow .num{color:var(--orange);font-weight:800;margin-right:8px;font-family:'Fredoka'}
.dayrow .ttl{font-weight:700;font-size:14.5px}
.dayrow .meta{display:flex;align-items:center;gap:10px}
.dayrow .time{font-size:12px;color:var(--muted);font-weight:800}
.dayrow .check{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.dayrow.done .check{background:var(--green);border-color:var(--green-deep)}

/* day detail — its own full screen */
.daypage{max-width:720px;margin:0 auto;padding:20px 20px 100px}
.daypage .backrow{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.daypage .backbtn{background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:12px;width:38px;height:38px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.daypage .backbtn:active{transform:translateY(2px);border-bottom-width:1px}
.daypage .dayhead{background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;padding:24px 26px;margin-bottom:18px;box-shadow:0 16px 40px -22px rgba(43,46,51,.16)}
.daypage .dnum{display:inline-block;background:#FFF3EA;color:var(--orange-dark);font-weight:800;font-size:12.5px;padding:4px 12px;border-radius:99px;margin-bottom:10px}
.daypage h1{font-size:21px;font-weight:600;margin-bottom:6px}
.daypage .goal{font-size:14.5px;color:var(--muted);font-weight:700;margin-top:6px}
.daypage .stepscard{background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;padding:22px 24px;margin-bottom:18px;box-shadow:0 16px 40px -22px rgba(43,46,51,.16)}
.daypage .stepscard ul{margin:0 0 4px 18px}
.daypage .stepscard li{font-size:14.5px;margin-bottom:8px;font-weight:600}
.daypage .mistake,.daypage .success{font-size:13px;font-weight:700;padding:10px 12px;border-radius:12px;margin-top:10px}
.daypage .mistake{background:#FFF3EA;color:var(--orange-dark)}
.daypage .success{background:#EAF7EF;color:#1E7A44}
.daypage .donebtn{margin-top:6px;width:100%;background:var(--orange);color:#fff;border:none;border-bottom:4px solid var(--orange-deep);font-family:'Fredoka';font-weight:600;font-size:15px;padding:14px 18px;border-radius:14px;cursor:pointer}
.daypage .donebtn.isdone{background:var(--green);border-bottom-color:var(--green-deep)}
.daypage .donebtn:active{transform:translateY(3px);border-bottom-width:1px}

/* Koa chat tab */
.koapanel{display:contents}
.chattop{display:flex;align-items:center;gap:13px;text-align:left;padding:12px 2px;margin-bottom:6px;border-bottom:2px solid var(--line)}
.chattop img{width:54px;height:54px;border-radius:50%;background:transparent;object-fit:cover;object-position:50% 6%;flex-shrink:0;box-shadow:0 8px 18px -8px rgba(244,115,43,.4);animation:koabreathe 3.2s ease-in-out infinite}
.chattopinfo{min-width:0}
.konline{font-family:'Nunito',sans-serif;font-size:10.5px;font-weight:800;color:var(--green-deep);background:#E9F6EE;padding:3px 9px 3px 8px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.03em}
.konline::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(46,158,91,.2)}
@keyframes koabreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.03)}}

/* ---- Koa animation system (idle=koabreathe above; greet/bounce/tailwag layer on top for
   real moments — chat tab open, a message sent, a reply landing) ---- */
@keyframes koaGreet{0%{transform:rotate(0deg) scale(1)}15%{transform:rotate(-8deg) scale(1.05)}30%{transform:rotate(6deg) scale(1.05)}45%{transform:rotate(-5deg) scale(1.03)}60%{transform:rotate(3deg) scale(1.02)}100%{transform:rotate(0deg) scale(1)}}
.chattop img.koa-greet{animation:koaGreet .9s cubic-bezier(.34,1.56,.64,1) 1, koabreathe 3.2s ease-in-out infinite .9s}
@keyframes koaBounce{0%{transform:scale(1)}30%{transform:scale(.94,1.08)}55%{transform:scale(1.06,.95)}100%{transform:scale(1)}}
.bubble.koa-bounce{animation:koaBounce .4s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes koaTailWag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-8deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-5deg)}}
.av.koa-tailwag{animation:koaTailWag .5s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.chattop img.koa-greet,.bubble.koa-bounce,.av.koa-tailwag{animation:none}}

/* ---- Branded loading state — replaces a bare "Loading…" with the same spinning-ring language
   used on the quiz funnel, so the very first thing anyone sees never looks like a generic browser spinner ---- */
.loadring{width:56px;height:56px;border-radius:50%;border:6px solid var(--line);border-top-color:var(--orange);margin:6px auto 4px;animation:loadspin .85s linear infinite}
@keyframes loadspin{to{transform:rotate(360deg)}}
.chattop h1{font-size:20px;font-weight:600;display:flex;align-items:center;gap:8px}
.chattop p{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:2px}
.chatmsgs{display:flex;flex-direction:column;gap:10px;padding:4px 2px 16px;min-height:120px}
.bubblerow{display:flex;gap:8px;align-items:flex-end}
.bubblerow.user{justify-content:flex-end}
.bubblerow .av{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:#E9F6EE;object-fit:cover;object-position:50% 50%}
.bubble{max-width:92%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.55;font-weight:600;white-space:pre-wrap}
.bubble.user{background:var(--orange);color:#fff;border-bottom-right-radius:4px}
.bubble.koa{background:#fff;border:2px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.bubble.typing{display:flex;gap:4px;padding:15px 15px}
.bubble.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:tbounce 1.2s infinite}
.bubble.typing span:nth-child(2){animation-delay:.2s}.bubble.typing span:nth-child(3){animation-delay:.4s}
@keyframes tbounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ratebar{display:flex;gap:4px;margin:2px 0 0 34px}
.ratebtn{background:none;border:none;padding:2px 4px;font-size:12px;cursor:pointer;opacity:.35;transition:opacity .15s,transform .1s;line-height:1}
.ratebtn:hover{opacity:.7}
.ratebtn.active{opacity:1;transform:scale(1.15)}
.chattoolrow{display:flex;gap:8px;padding:4px 0 10px}
.chatinputrow{display:flex;gap:8px;position:sticky;bottom:92px;background:var(--cream);padding:12px 0 10px;margin-top:2px;z-index:10}
.chatinput{flex:1;min-width:0;padding:13px 14px;border:2px solid var(--line);border-radius:16px;font-family:'Nunito';font-weight:700;font-size:14px;outline:none;background:#fff;resize:none;max-height:100px;transition:border-color .15s,box-shadow .15s}
.chatinput:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,115,43,.15)}
.chatsend{flex-shrink:0;white-space:nowrap;background:var(--orange);color:#fff;border:none;border-bottom:4px solid var(--orange-deep);border-radius:16px;padding:0 18px;font-family:'Fredoka';font-weight:600;cursor:pointer;font-size:14px}
.chatsend:active{transform:translateY(3px);border-bottom-width:1px}
.chatsend:disabled{opacity:.5;cursor:default}
.chatsuggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.chatsuggest button{background:#fff;border:2px solid var(--line);border-radius:99px;padding:8px 14px;font-family:'Nunito';font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer}
.chatsuggest button:hover{border-color:var(--orange)}
.chatempty{text-align:center;padding:20px 10px;color:var(--muted);font-size:13px;font-weight:700}
.chatphotobtn{background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:14px;font-weight:800;color:var(--muted);font-family:'Nunito';cursor:pointer;transition:transform .1s,border-bottom-width .1s,background .15s,border-color .15s}
.chatphotobtn:active{transform:translateY(3px);border-bottom-width:1px}
#chatImgPreview:not(:empty){margin-top:10px}
.imgpreviewwrap{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px 10px 6px 6px;margin:4px 0 10px}
.imgpreviewwrap img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.imgpreviewwrap button{background:var(--coral-soft);color:#D14343;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;font-weight:800;cursor:pointer}
.msgimg{max-width:220px;border-radius:14px;display:block;margin-bottom:6px;box-shadow:0 8px 18px -8px rgba(43,46,51,.3)}
/* ===== Premium Koa chat: clean airy layout, Pupgress-skinned (Koa on every reply, warm palette) ===== */
.chattools{margin-left:auto;display:flex;gap:2px;flex-shrink:0}
.chattools .ttbtn{width:34px;height:34px;border-radius:50%;border:none;background:none;font-size:16px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chattools .ttbtn:active{transform:scale(.88)}
.krow{display:flex;gap:10px;margin-bottom:20px;align-items:flex-start;animation:viewIn .22s ease-out}
.krow .kav{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 8%;flex-shrink:0;margin-top:2px;background:transparent;border:2px solid var(--line)}
.krow .ktext{font-size:14.5px;line-height:1.62;font-weight:600;color:var(--ink);white-space:pre-wrap;padding-top:2px;min-width:0}
.krow .ktext strong{font-weight:800;color:var(--orange-deep)}
.urow{display:flex;justify-content:flex-end;margin-bottom:20px;animation:viewIn .22s ease-out}
.urow .utext{background:#FFF0E4;border:1.5px solid #FBDBC2;color:var(--orange-deep);font-weight:700;font-size:14px;padding:11px 15px;border-radius:18px 18px 5px 18px;max-width:82%;line-height:1.5;white-space:pre-wrap}
.msgimg2{max-width:200px;border-radius:14px;display:block;margin-bottom:8px}
.ktyping{display:inline-flex;gap:4px;padding:8px 2px}
.ktyping span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:tbounce 1.2s infinite}
.ktyping span:nth-child(2){animation-delay:.2s}.ktyping span:nth-child(3){animation-delay:.4s}
.composer2{position:sticky;bottom:0;background:linear-gradient(0deg,var(--cream) 74%,rgba(253,248,240,0));padding:10px 0 14px;z-index:10}
.attachrow2{display:flex;gap:8px;margin:0 2px 9px;flex-wrap:wrap}
.achip{background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:7px 13px;font-size:12.5px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.achip.vid{border-color:#E3D6FB;color:#5E4CC7;background:#F6F2FF}
.achip:active{transform:scale(.95)}
.inbar{display:flex;align-items:flex-end;gap:8px;background:#fff;border:2px solid var(--line);border-radius:26px;padding:6px 6px 6px 16px;box-shadow:0 10px 26px -14px rgba(43,46,51,.2);transition:border-color .15s,box-shadow .15s}
.inbar:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,115,43,.12)}
.inbar textarea{flex:1;border:none;outline:none;resize:none;font-family:'Nunito',sans-serif;font-weight:700;font-size:14.5px;background:none;color:var(--ink);padding:9px 0;max-height:100px;min-width:0}
.sendcirc{width:40px;height:40px;border-radius:50%;background:var(--orange);border:none;color:#fff;font-size:19px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -4px rgba(244,115,43,.6);transition:transform .1s}
.sendcirc:active{transform:scale(.9)}

/* Progress tab */
.progresshead{font-size:22px;font-weight:600;font-family:'Fredoka',sans-serif;letter-spacing:-.01em;margin:2px 0 18px}
.chartwrap{background:linear-gradient(135deg,#fff 0%,#FFF6EC 100%);border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;padding:24px;margin-bottom:18px;box-shadow:0 20px 46px -22px rgba(43,46,51,.18);display:flex;align-items:center;gap:22px}
.chartring{flex-shrink:0;position:relative;width:118px;height:118px}
.chartring svg{transform:rotate(-90deg)}
.chartring .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.chartring .pct b{font-family:'Fredoka';font-size:24px;color:var(--orange-dark)}
.chartring .pct span{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.statrow{display:flex;flex-direction:column;gap:10px;flex:1}
.statmini{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:800}
.statmini .v{font-family:'Fredoka';font-size:17px;color:var(--ink)}
.ringcopy{flex:1}
.ringcopy-t{font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;line-height:1.18}
.ringcopy-s{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:6px;line-height:1.42}
.pstats{display:flex;gap:10px;margin-bottom:18px}
/* ===== Training calendar (Progress) ===== */
.calwrap2{margin-bottom:18px}
.calwraphead{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px;flex-wrap:wrap;gap:6px}
.calwraphead h2{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600}
.calsub{font-size:11.5px;font-weight:800;color:var(--orange-dark);background:#FFF3EA;padding:4px 11px;border-radius:99px}
.cal-card{background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 18px 40px -22px rgba(43,46,51,.18)}
.cal-nav{text-align:center;margin-bottom:12px}
.cal-nav .mo{font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{font-size:10px;font-weight:900;color:var(--muted);text-align:center;text-transform:uppercase;padding-bottom:4px}
.cal-day{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink);position:relative}
.cal-day.pad{visibility:hidden}
.cal-day.done{background:var(--green);color:#fff}
.cal-day.today{background:var(--orange);color:#fff;box-shadow:0 0 0 3px rgba(244,115,43,.22)}
.cal-day .fl{font-size:8px;line-height:1;margin-top:1px}
.cal-legend{display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:11px;font-weight:800;color:var(--muted)}
.cal-legend i{width:11px;height:11px;border-radius:4px;display:inline-block;vertical-align:-1px;margin-right:4px}
/* ===== Level system + dashboard cards (Progress) ===== */
.lvlhero{position:relative;margin:2px 0 16px;background:linear-gradient(150deg,#FF8A3D 0%,var(--orange) 52%,var(--orange-deep) 120%);border-radius:26px;padding:18px 18px 20px;overflow:hidden;box-shadow:0 24px 44px -20px rgba(224,90,28,.55)}
.lvlhero .glow{position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.13);top:-95px;right:-75px}
.lvlheror{display:flex;align-items:center;gap:13px;position:relative;z-index:2}
.lvlemblem{width:66px;height:66px;border-radius:19px;background:rgba(255,255,255,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 18px -8px rgba(120,40,10,.5)}
.lvlemblem .lv{font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;color:var(--orange-deep);line-height:.9}
.lvlemblem .lvl{font-size:8.5px;font-weight:900;color:var(--orange);text-transform:uppercase;letter-spacing:.08em}
.lvlwho .lvlnm{color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:21px;line-height:1}
.lvlwho .lvlxp{color:#FFE9D8;font-weight:800;font-size:13px;margin-top:3px}
.lvlkoa{position:absolute;right:-6px;bottom:-12px;width:82px;filter:drop-shadow(0 8px 12px rgba(120,40,10,.4));z-index:1}
.lvlbar{height:13px;background:rgba(255,255,255,.28);border-radius:99px;overflow:hidden;margin-top:15px;position:relative;z-index:2}
.lvlfill{height:100%;background:linear-gradient(90deg,#FFE08A,#FFC24B);border-radius:99px;box-shadow:0 0 10px rgba(255,194,75,.6)}
.lvlnext{color:#FFEAD8;font-weight:800;font-size:11.5px;margin-top:7px;text-align:right;position:relative;z-index:2}
.pgcard{background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--line);border-radius:22px;margin-bottom:16px;padding:16px;box-shadow:0 18px 40px -22px rgba(43,46,51,.2)}
.pgcardhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pgcardhd h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15.5px}
.pgcardhd .tag{font-size:11px;font-weight:800;color:var(--green-deep);background:#E9F6EE;padding:3px 10px;border-radius:99px}
.pgchart{width:100%;height:140px;display:block}
.pgchartcap{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:8px;text-align:center}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px}
.badge{text-align:center}
.badge .b{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 5px;box-shadow:0 8px 14px -8px rgba(43,46,51,.3)}
.badge.on .b{background:linear-gradient(135deg,#FFF0DA,#FFE0B0)}
.badge.locked .b{background:#F1EADF;filter:grayscale(1);opacity:.5}
.badge .bn{font-size:9px;font-weight:800;color:var(--ink);line-height:1.1}
.badge.locked .bn{color:var(--muted)}
/* ===== Password strength meter ===== */
.setopt{font-weight:700;color:var(--muted);font-size:10.5px}
.pwstrength{margin-top:8px;display:flex;align-items:center;gap:10px}
.pwstrengthbar{flex:1;height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.pwstrengthbar i{display:block;height:100%;width:0;border-radius:99px;background:#EF6C5C;transition:width .25s,background .25s}
.pwstrength.s1 .pwstrengthbar i,.pwstrength.s2 .pwstrengthbar i{background:#F5A623}
.pwstrength.s3 .pwstrengthbar i,.pwstrength.s4 .pwstrengthbar i{background:var(--green)}
.pwstrengthlbl{font-size:11px;font-weight:800;color:var(--muted);min-width:68px;text-align:right}
/* ===== Invite-a-friend (premium) ===== */
.invitepremium{position:relative;background:linear-gradient(150deg,#FF8A3D,var(--orange) 55%,var(--orange-deep));border-radius:22px;padding:20px 18px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(224,90,28,.5);margin-bottom:14px}
.invkoa{position:absolute;right:-8px;bottom:-12px;width:92px;filter:drop-shadow(0 8px 12px rgba(120,40,10,.4))}
.invbig{color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:25px;line-height:1.05;position:relative;z-index:2}
.invsub{color:#FFEAD8;font-weight:800;font-size:12.5px;line-height:1.5;margin-top:8px;max-width:225px;position:relative;z-index:2}
.invsub b{color:#fff}
.invsteps{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.invstep{display:flex;align-items:center;gap:11px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:11px 13px;font-size:12.5px;font-weight:800;color:var(--ink)}
.invstep .ic{font-size:18px}
.invsharebtn{width:100%;background:var(--orange);color:#fff;border:none;border-bottom:5px solid var(--orange-deep);border-radius:16px;padding:15px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;cursor:pointer;margin-bottom:10px}
.invsharebtn:active{transform:translateY(3px);border-bottom-width:2px}
.invlinkrow{display:flex;gap:8px;margin-bottom:14px}
.invlink{flex:1;min-width:0;background:#F4EEE2;border-radius:12px;padding:12px 14px;font-size:12px;font-weight:800;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.invcopy{background:#fff;border:2px solid var(--line);border-bottom:3px solid var(--line);border-radius:12px;padding:0 16px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink);flex-shrink:0}
.invcopy:active{transform:translateY(2px);border-bottom-width:1px}
.invstats{display:flex;gap:10px}
.invstat{flex:1;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:16px;padding:12px;text-align:center}
.invstat .n{font-family:'Fredoka',sans-serif;font-weight:700;font-size:22px;color:var(--orange-deep)}
.invstat .l{font-size:10.5px;font-weight:800;color:var(--muted);margin-top:2px}
.statcard{flex:1;border-radius:18px;padding:18px 14px;text-align:center;box-shadow:0 14px 30px -16px rgba(43,46,51,.3);position:relative;overflow:hidden}
.statcard.st-streak{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%)}
.statcard.st-days{background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%)}
.statcard.st-pct{background:linear-gradient(135deg,#5B8DEF 0%,#3D66C4 100%)}
.statcard .num{font-family:'Fredoka';font-size:26px;font-weight:600;color:#fff}
.statcard .lbl{font-size:11px;font-weight:800;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.weekbar{background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;transition:transform .12s,margin-bottom .15s;cursor:pointer}
.weekbar:hover{transform:translateY(-2px)}
.weekbar.open{margin-bottom:0;border-radius:16px 16px 0 0;border-bottom-width:2px}
.weekbar .wtop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:13px;font-weight:800;margin-bottom:8px}
.weekbar .wtop .cnt{display:flex;align-items:center;gap:6px}
.weekbar .chev{font-size:11px;color:var(--muted);transition:transform .2s ease-out}
.weekbar.open .chev{transform:rotate(180deg)}
.weekbar .track{height:10px;background:var(--cream);border-radius:99px;overflow:hidden}
.weekbar .fill{height:100%;background:linear-gradient(90deg,var(--green) 0%,#3FBE79 100%);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
/* Settings section headers -> premium (scoped to [data-sec] so Progress week bars are unaffected) */
.weekbar[data-sec]{padding:16px 18px}
.weekbar[data-sec] .wtop{margin-bottom:0;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15.5px}
.weekbar[data-sec] .chev{font-size:12px}
/* Smooth expand/collapse via a max-height + opacity transition — the grid-rows "0fr/1fr" trick
   looks elegant but Chrome/Safari won't actually shrink the track below the child's own padding
   box (measured at 18px instead of 0 here), so it never fully collapsed. max-height is the boring,
   reliably-supported alternative; the opacity fade masks the "grows faster than it should for short
   content" artifact that a generous max-height ceiling otherwise causes. */
.weekdetail{background:var(--cream);border:2px solid var(--line);border-top:none;border-radius:0 0 16px 16px;margin:0 0 10px;max-height:0;overflow:hidden;opacity:0;transition:max-height .32s cubic-bezier(.16,1,.3,1),opacity .22s ease}
.weekdetail.open{max-height:2000px;opacity:1}
.weekdetail-inner{padding:4px 16px 14px}
.weekdetail .wgoal{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.5;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
.weekdetail .wgoal b{color:var(--orange-dark)}
.weekdetail ul{margin:0;padding-left:16px}
.weekdetail li{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px;line-height:1.4}
/* ===== Premium Plan redesign (visual layer only) ===== */
.planhero{position:relative;margin:8px 0 0;background:linear-gradient(150deg,#FF8A3D 0%,var(--orange) 55%,var(--orange-deep) 120%);border-radius:28px;padding:16px 126px 16px 20px;overflow:hidden;min-height:150px;box-shadow:0 22px 40px -18px rgba(224,90,28,.55)}
.planhero .hglow{position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.14);top:-90px;right:-70px}
.planhero .hkick{color:#FFE4CE;font-family:'Fredoka';font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.planhero h2{color:#fff;font-size:26px;line-height:1.05;margin:6px 0 8px;font-weight:700;max-width:215px}
.planhero .hmeta{color:#FFE9D8;font-weight:800;font-size:13px}
.planhero .hbubble{margin-top:13px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:15px 15px 15px 4px;padding:10px 13px;font-weight:800;font-size:13px;max-width:200px;position:relative;z-index:2}
.planhero .hstart{margin-top:15px;background:#fff;color:var(--orange-deep);border:none;border-bottom:5px solid #E9CBB4;border-radius:15px;padding:14px;width:100%;font-family:'Fredoka';font-weight:700;font-size:16px;cursor:pointer;position:relative;z-index:2}
.planhero .hstart:active{transform:translateY(3px);border-bottom-width:2px}
.planhero .hkoa{position:absolute;right:6px;bottom:8px;width:120px;filter:drop-shadow(0 10px 14px rgba(120,40,10,.35));z-index:1;animation:koabreathe 3.2s ease-in-out infinite}
.planstats{display:flex;gap:10px;margin:14px 0 0}
.planstats .st{flex:1;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:16px;padding:11px 6px;text-align:center}
.planstats .st .n{font-family:'Fredoka';font-weight:700;font-size:21px;line-height:1}
.planstats .st .l{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.jpath{position:relative;padding:8px 0 6px}
.jpath .jwk{font-family:'Fredoka';font-weight:700;font-size:15px;margin:16px 0 2px;padding-left:4px}
.jpath .jwk small{color:var(--muted);font-weight:600;font-size:12px;margin-left:6px}
.jline{position:absolute;left:52px;top:10px;bottom:10px;width:4px;background:repeating-linear-gradient(#E4D8C4 0 8px,transparent 8px 16px);z-index:0}
.jnode{position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:7px 4px;font-family:'Nunito'}
.jnode:active{transform:scale(.98)}
.jdisc{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;font-size:18px;border:3px solid var(--cream)}
.jdisc.done{background:var(--green);color:#fff;box-shadow:0 8px 16px -6px rgba(46,158,91,.55)}
.jdisc.now{background:var(--orange);color:#fff;box-shadow:0 0 0 6px rgba(244,115,43,.2),0 12px 22px -6px rgba(244,115,43,.65);animation:jpulse 2s ease-in-out infinite}
.jdisc.next{background:#fff;color:var(--orange-dark);border:3px solid var(--line)}
@keyframes jpulse{0%,100%{box-shadow:0 0 0 6px rgba(244,115,43,.2),0 12px 22px -6px rgba(244,115,43,.65)}50%{box-shadow:0 0 0 12px rgba(244,115,43,.06),0 12px 22px -6px rgba(244,115,43,.65)}}
.jinfo .jt{font-family:'Fredoka';font-weight:600;font-size:15px;line-height:1.12}
.jinfo .js{font-size:11.5px;font-weight:800;color:var(--muted);margin-top:2px}
.jinfo .jnow{display:inline-block;background:var(--orange);color:#fff;font-family:'Fredoka';font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;margin-bottom:3px}
.jnode.isdim .jt{color:var(--muted)}

/* Settings tab */
.setlabel{display:block;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.setinput{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:13px;font-family:'Nunito';font-weight:700;font-size:14px;background:#fff;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.setinput:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,115,43,.15)}
.setbtn{width:100%;background:var(--orange);color:#fff;border:none;border-bottom:4px solid var(--orange-deep);font-family:'Fredoka';font-weight:600;font-size:14px;padding:12px 16px;border-radius:13px;cursor:pointer;margin-top:8px;transition:transform .1s,border-bottom-width .1s}
.setbtn:active{transform:translateY(2px);border-bottom-width:2px}
.setbtn:disabled{opacity:.6;cursor:default}
.setbtn.danger{background:var(--coral);border-bottom-color:#C94534}
.sethelp{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.5;margin:6px 0 4px}
.setmsg{font-size:12.5px;font-weight:800;margin-top:10px;min-height:1px}
.setmsg.ok{color:var(--green-deep)}
.setmsg.err{color:var(--coral)}
.setwarn{background:var(--coral-soft);color:#B4402F;border:2px solid #F3C5BC;border-radius:14px;padding:12px 14px;font-size:12.5px;font-weight:800;margin-bottom:14px;line-height:1.5}
.toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink);padding:8px 0;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--orange);cursor:pointer}
.dangerzone{margin-top:22px;padding-top:18px;border-top:2px dashed var(--line)}

/* ---- Notification preferences: real toggle switches, master pause switch styled distinctly
   (coral, since it turns everything off) from the individual green per-type switches below it. ---- */
.notifpanel{margin-top:8px}
.notifswitch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line)}
.notiflist .notifswitch:last-child{border-bottom:none}
.notifswitch input{position:absolute;opacity:0;width:0;height:0}
.notifswitch .switchtrack{position:relative;width:40px;height:24px;background:var(--line);border-radius:99px;flex-shrink:0;transition:background .2s}
.notifswitch .switchtrack::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.notifswitch input:checked + .switchtrack{background:var(--green)}
.notifswitch input:checked + .switchtrack::after{transform:translateX(16px)}
.notifswitch-master{font-family:'Fredoka',sans-serif;font-weight:600;font-size:14.5px;padding-bottom:12px;margin-bottom:6px;border-bottom:2px solid var(--line)}
.notifswitch-master input:checked + .switchtrack{background:var(--coral)}
.notiflist{display:flex;flex-direction:column;transition:opacity .2s}
.notifswitch-marketing{margin-top:4px;padding-top:14px;border-top:1px dashed var(--line)}
.notifswitch-marketing .mktlabel{display:flex;flex-direction:column;gap:2px}
.notifswitch-marketing .mktsub{font-size:11px;font-weight:700;color:var(--muted)}
.billrow{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:700;padding:9px 0;border-bottom:1px solid var(--line)}
.billrow b{font-family:'Fredoka';color:var(--ink)}
.dogcard{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px}
.dogcard.active{border-color:var(--orange);background:#FFF3EA}
.dogphoto{width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--cream);flex-shrink:0}
.dogphoto-placeholder{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);border:2px dashed var(--line);opacity:.85}
.dogcardinfo{flex:1;min-width:0}
.dogcardname{font-family:'Fredoka';font-weight:600;font-size:14px;color:var(--ink)}
.dogactivetag{display:inline-block;background:var(--orange);color:#fff;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:4px;vertical-align:middle}
.dogcardmeta{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px}
.dogcardactions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.dogcardactions button{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:11px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap}
.dogdeletebtn{color:var(--coral)!important}
.dogeditform{background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px;margin-top:6px}
.reflinkbox{background:#fff;border:2px dashed var(--line);border-radius:13px;padding:12px 14px;font-size:12.5px;font-weight:700;color:var(--orange-dark);word-break:break-all;margin-bottom:4px}
.refstats{display:flex;gap:10px;margin-top:16px}
.refstats .statmini{flex:1;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;flex-direction:column;align-items:flex-start;gap:4px}
.weekbar-invite{background:linear-gradient(135deg,var(--orange) 0%,var(--coral) 100%);border-color:var(--orange-dark);box-shadow:0 12px 26px -12px rgba(244,115,43,.6);position:relative;overflow:hidden}
.weekbar-invite::after{content:"";position:absolute;top:-40%;right:-10%;width:120px;height:220%;background:rgba(255,255,255,.14);transform:rotate(20deg)}
.weekbar-invite .wtop{color:#fff}
.weekbar-invite .chev{color:rgba(255,255,255,.9)}
.weekbar-invite:hover{transform:translateY(-2px) scale(1.008)}
.invite-hero{background:linear-gradient(135deg,var(--orange) 0%,var(--coral) 100%);border-radius:16px;padding:18px;margin-bottom:14px;color:#fff;text-align:center;box-shadow:0 12px 26px -12px rgba(244,115,43,.55)}
.invite-hero .big{font-size:23px;font-weight:800;font-family:'Fredoka',sans-serif;letter-spacing:-.01em;line-height:1.25}
.invite-hero .big b{background:rgba(255,255,255,.22);padding:1px 8px;border-radius:8px}
.invite-hero .sub{font-size:12px;font-weight:700;opacity:.92;margin-top:6px}

/* Koa's guided onboarding tour — shown once on first visit */
.onboard-backdrop{position:fixed;inset:0;background:rgba(43,46,51,.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease-out}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.onboard-card{background:#fff;border-radius:26px;max-width:380px;width:100%;padding:34px 28px 28px;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.4);border:2px solid var(--line);border-bottom:6px solid var(--line);animation:onboardPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes onboardPop{0%{opacity:0;transform:scale(.85) translateY(14px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.onboard-card img{width:88px;height:88px;border-radius:50%;background:#E9F6EE;padding:10px;margin-bottom:14px;box-shadow:0 12px 26px -8px rgba(244,115,43,.4);object-fit:cover;object-position:50% 50%}
.onboard-card h2{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.onboard-card p{color:var(--muted);font-size:14px;font-weight:700;line-height:1.55;margin-bottom:22px}
.onboard-dots{display:flex;gap:6px;justify-content:center;margin-bottom:20px}
.onboard-dots span{width:7px;height:7px;border-radius:99px;background:var(--line);transition:all .2s}
.onboard-dots span.active{background:var(--orange);width:20px}
.onboard-actions{display:flex;gap:10px;align-items:center}
.onboard-skip{background:none;border:none;color:var(--muted);font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer;padding:12px 8px}
.onboard-next{flex:1;background:var(--orange);color:#fff;border:none;border-bottom:4px solid var(--orange-deep);font-family:'Fredoka';font-weight:600;font-size:15px;padding:13px 18px;border-radius:13px;cursor:pointer;transition:transform .1s,border-bottom-width .1s}
.onboard-next:active{transform:translateY(3px);border-bottom-width:1px}

/* ---- Bottom nav: buttons live in an inner row so they can be re-centered/tightened on wide
   screens without touching the outer full-bleed bar (background/border/shadow stay edge to edge) ---- */
.tabbar-inner{display:flex;width:100%}

/* ---- Generic danger-confirm modal (used for deleting a dog) — same overlay/card pattern as the
   week-celebration modal, styled for a destructive action with a type-to-confirm gate. ---- */
.confirmmodal{position:fixed;inset:0;background:rgba(43,46,51,.55);z-index:220;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s}
.confirmmodal.show{opacity:1;pointer-events:auto}
.confirmmodal-card{background:#fff;border-radius:22px;padding:26px 24px;max-width:340px;width:100%;box-shadow:0 30px 70px -20px rgba(43,46,51,.4);transform:scale(.94);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.confirmmodal.show .confirmmodal-card{transform:scale(1)}
.confirmmodal-card h3{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;color:var(--ink);margin:0 0 8px}
.confirmmodal-card p{font-size:13.5px;font-weight:700;color:var(--muted);line-height:1.5;margin:0 0 14px}
.confirmmodal-card input{width:100%;box-sizing:border-box;padding:11px 13px;border:2px solid var(--line);border-radius:12px;font-family:'Nunito';font-weight:700;font-size:14px;margin-bottom:14px;outline:none}
.confirmmodal-card input:focus{border-color:var(--coral)}
.confirmmodal-actions{display:flex;gap:10px}
.confirmmodal-cancel{flex:1;background:#fff;border:2px solid var(--line);border-bottom:4px solid var(--line);border-radius:13px;padding:11px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;transition:transform .1s,border-bottom-width .1s}
.confirmmodal-cancel:active{transform:translateY(3px);border-bottom-width:1px}
.confirmmodal-danger{flex:1;background:var(--coral);border:none;border-bottom:4px solid #a83a2e;border-radius:13px;padding:11px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;color:#fff;cursor:not-allowed;opacity:.45;transition:transform .1s,border-bottom-width .1s,opacity .15s}
.confirmmodal-danger.armed{opacity:1;cursor:pointer}
.confirmmodal-danger.armed:active{transform:translateY(3px);border-bottom-width:1px}

/* ---- Desktop layout polish: more breathing room around the chat, and a tightened, centered
   bottom nav instead of 4 buttons spread across the full window width. Mobile is untouched. ---- */
@media (min-width: 860px){
  .wrap{padding-top:48px}
  .chattop{padding-top:8px}
  .chatinputrow{padding-bottom:20px}
  .tabbar-inner{max-width:460px;margin:0 auto}
  .koapanel{display:flex;flex-direction:column;height:calc(100vh - 128px);max-width:680px;margin:0 auto;background:#fff;border:2px solid var(--line);border-radius:24px;box-shadow:0 30px 70px -34px rgba(43,46,51,.35);padding:10px 24px 0;overflow:hidden}
  .koapanel .chattop{padding-top:10px}
  .koapanel .chatmsgs{flex:1;overflow-y:auto;min-height:0;padding-right:4px}
  .koapanel .chatinputrow{position:static;background:transparent;padding-bottom:14px}
}