:root{--pink:#f08ad0;--deep:#e255b4;--lilac:#a98bff;--ink:#3b2a4d;--soft:#7d6a90}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Poppins","Segoe UI",system-ui,sans-serif;color:var(--ink);min-height:100vh;
background:linear-gradient(160deg,#ffe3f3,#efe3ff 55%,#e3f0ff);overflow-x:hidden}
.blob{position:fixed;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;animation:drift 14s ease-in-out infinite alternate}
.b1{width:300px;height:300px;background:#ffb5e3;top:-80px;left:-80px}.b2{width:320px;height:320px;background:#c3adff;bottom:60px;right:-100px;animation-delay:-6s}
@keyframes drift{to{transform:translate(40px,60px) scale(1.15)}}
main{max-width:480px;margin:auto;padding:18px 16px 110px;animation:in .5s ease}
@keyframes in{from{opacity:0;transform:translateY(12px)}}
h1{font-size:22px;margin:4px 0}h2{font-size:16px;margin:18px 0 8px}p{margin:4px 0;color:var(--soft);font-size:14px;line-height:1.5}
.card{background:rgba(255,255,255,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);
border-radius:24px;padding:16px;margin:12px 0;box-shadow:0 8px 30px rgba(190,120,200,.18)}
.row{display:flex;gap:10px}.row>*{flex:1}.between{display:flex;justify-content:space-between;align-items:center}
.week{display:flex;gap:6px;justify-content:space-between;margin:8px 0}
.wd{flex:1;text-align:center;font-size:11px;color:var(--soft)}.wd b{display:block;margin-top:4px;padding:8px 0;border-radius:50%;background:rgba(255,255,255,.7);font-size:13px;color:var(--ink)}
.wd.on b{background:var(--deep);color:#fff;box-shadow:0 4px 14px rgba(226,85,180,.5)}
.ringwrap{position:relative;width:250px;margin:6px auto}.ringwrap .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.mid big{font-size:34px;font-weight:700}.mid small{color:var(--soft)}
.dot{animation:pulse 2s infinite}@keyframes pulse{50%{r:11}}
.mascot{width:150px;margin:auto;display:block;animation:float 3.2s ease-in-out infinite;cursor:pointer}
@keyframes float{50%{transform:translateY(-10px)}}.mascot.hop{animation:hop .6s}
@keyframes hop{30%{transform:translateY(-34px) scale(.95,1.08)}60%{transform:translateY(0) scale(1.08,.92)}}
.bubble{background:#fff;border-radius:18px;padding:10px 14px;text-align:center;font-size:14px;margin:6px auto;max-width:300px;position:relative;box-shadow:0 4px 14px rgba(190,120,200,.2)}
.tile{border-radius:22px;padding:14px;color:#fff;min-height:96px;position:relative;overflow:hidden}
.t1{background:linear-gradient(135deg,#8fa8ff,#a98bff)}.t2{background:linear-gradient(135deg,#ff9ed2,#f06ac0)}.t3{background:linear-gradient(135deg,#ff9f9f,#ff7a8a)}.t4{background:linear-gradient(135deg,#7fd6ff,#6aa8ff)}
.tile small{opacity:.9;display:block}.tile b{font-size:20px}
.btn{border:0;border-radius:999px;padding:11px 18px;background:linear-gradient(135deg,var(--pink),var(--deep));color:#fff;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 6px 16px rgba(226,85,180,.4);transition:transform .15s}
.btn:active{transform:scale(.94)}.btn.ghost{background:#fff;color:var(--deep);box-shadow:none}
.bar{height:12px;border-radius:9px;background:#fff;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#7fd6ff,#6aa8ff);border-radius:9px;transition:width .8s}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 13px;border-radius:999px;background:#fff;font-size:13px;cursor:pointer;border:2px solid transparent}.chip.on{border-color:var(--deep);color:var(--deep);font-weight:600}
.moods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mood{background:#fff;border-radius:20px;padding:8px;text-align:center;cursor:pointer;border:2px solid transparent;font-size:13px}.mood.on{border-color:var(--deep);transform:scale(1.04)}.mood svg{width:70px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.cal span{font-size:11px;color:var(--soft)}
.cal b{font-weight:500;font-size:13px;aspect-ratio:1;display:grid;place-content:center;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer}
.cal b.p{background:var(--deep);color:#fff}.cal b.pp{background:#ffd3ee;border:2px dashed var(--pink)}.cal b.f{background:#d9ccff}.cal b.t{outline:2px solid var(--ink)}.cal b.s{box-shadow:0 0 0 3px var(--lilac)}
nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;padding:8px 10px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 10px 30px rgba(170,100,200,.3);z-index:5}
nav button{width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:21px;cursor:pointer;transition:.25s}nav button.on{background:linear-gradient(135deg,var(--pink),var(--lilac));transform:translateY(-6px) scale(1.1);box-shadow:0 8px 18px rgba(226,85,180,.45)}
input,select{width:100%;padding:11px 14px;border-radius:14px;border:1px solid #e6d3f2;font:inherit;margin:4px 0 10px;background:#fff}
#toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-90px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;transition:.4s;z-index:9;font-size:13px}#toast.show{transform:translate(-50%,0)}
.hearts{position:fixed;pointer-events:none;font-size:22px;animation:up 1.4s forwards;z-index:8}@keyframes up{to{transform:translateY(-120px);opacity:0}}
.foot{text-align:center;font-size:11px;color:var(--soft);margin-top:20px}
#alertbox{position:fixed;inset:0;background:rgba(60,30,80,.45);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20;animation:fade .3s}@keyframes fade{from{opacity:0}}
.acard{background:#fff;width:min(340px,90vw);border-radius:32px;padding:14px 14px 20px;text-align:center;box-shadow:0 20px 60px rgba(120,50,160,.4);animation:pop .55s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.6) translateY(40px);opacity:0}}
label{font-size:13px;color:var(--soft)}
/* stickers */
.stk{position:relative;display:inline-block;width:var(--sz);cursor:pointer;user-select:none;-webkit-user-select:none}
.stk img{width:100%;height:auto;display:block;transform-origin:50% 90%;filter:drop-shadow(0 6px 10px rgba(180,90,160,.28))}
.s-hero img{animation:ahero 3.4s ease-in-out infinite}
@keyframes ahero{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-8px)}}
.s-happy img{animation:ahappy 1.1s ease-in-out infinite}@keyframes ahappy{0%,100%{transform:translateY(0) scale(1.02,.98)}40%{transform:translateY(-14px) scale(.98,1.03)}}
.s-playful img{animation:awig 1.6s ease-in-out infinite}@keyframes awig{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.s-confident img{animation:apop 1.8s ease-in-out infinite}@keyframes apop{0%,40%,100%{transform:scale(1) rotate(0)}15%{transform:scale(1.09) rotate(-3deg)}}
.s-loved img{animation:abeat 1.3s ease-in-out infinite}@keyframes abeat{0%,28%,70%,100%{transform:scale(1)}14%{transform:scale(1.08)}42%{transform:scale(1.06)}}
.s-calm img{animation:abr 4s ease-in-out infinite}@keyframes abr{50%{transform:scale(1.035) translateY(-4px)}}
.s-dreamy img{animation:adr 3.6s ease-in-out infinite}@keyframes adr{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(5px,-8px) rotate(2deg)}}
.s-tired img{animation:atr 3.4s ease-in-out infinite}@keyframes atr{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(3deg) translateY(5px)}}
.s-sad img{animation:asd 3s ease-in-out infinite}@keyframes asd{0%,100%{transform:translateY(0)}45%{transform:translateY(5px)}55%,65%{transform:translate(-2px,5px)}60%,70%{transform:translate(2px,5px)}}
.s-angry img{animation:ang 2.2s linear infinite}@keyframes ang{0%,55%,100%{transform:translateX(0)}60%,70%{transform:translateX(-4px) rotate(-1.5deg)}65%,75%{transform:translateX(4px) rotate(1.5deg)}}
.stk.hop img{animation:ahop .65s ease!important}@keyframes ahop{30%{transform:translateY(-34px) scale(.96,1.08)}60%{transform:translateY(0) scale(1.08,.92)}}
.fx{position:absolute;font-size:calc(var(--sz)*.17);opacity:0;pointer-events:none}
.f1{top:6%;right:2%;animation:fxup 2.6s infinite}.f2{top:22%;left:0;animation:fxup 2.6s 1.2s infinite}
@keyframes fxup{0%{transform:translateY(10px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-26px) scale(1);opacity:0}}
.moods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mood{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px}
.mood .stk{pointer-events:none}.mood .fx{display:none}
.mood .stk img{animation-play-state:paused}.mood:hover .stk img,.mood.on .stk img{animation-play-state:running}
/* special message + phase */
.special{position:relative;display:flex;gap:14px;align-items:center;padding:16px;border-radius:26px;margin:12px 0;color:#fff;background:linear-gradient(135deg,#f06ac0,#a98bff);box-shadow:0 12px 32px rgba(226,85,180,.4);overflow:hidden}
.special::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shine 4.5s infinite;pointer-events:none}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.sp-av{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #fff;flex:none;animation:ahero 3.4s ease-in-out infinite}
.special small{font-weight:600}.sp-q{color:#fff;font-size:16px;font-weight:600;margin:4px 0}.sp-a{color:#ffeaf8;margin:0}
.spk{position:absolute;font-size:16px;opacity:0;animation:fxup 3s infinite}.k1{top:10px;right:16px}.k2{bottom:10px;right:44px;animation-delay:1s}.k3{top:40%;right:6px;animation-delay:2s}
.phase{text-align:left;margin-top:16px;padding-top:14px;border-top:1px dashed #e8c6e0}
.phase .chip{cursor:default;font-size:12px;padding:6px 11px}.phase .mind{margin-top:10px;color:var(--ink)}.late{color:#d23a7a!important;margin-top:6px}
.gbtn{width:100%;background:#fff;color:#3b2a4d;box-shadow:0 6px 18px rgba(120,80,160,.25)}

/* ===== reminder popups: sticker scenes ===== */
#alertbox.out{animation:fadeo .22s forwards}#alertbox.out .acard{animation:cardo .22s forwards}
@keyframes fadeo{to{opacity:0}}@keyframes cardo{to{transform:scale(.92) translateY(14px);opacity:0}}
.acard h1{font-size:23px;margin:12px 0 2px}.acard p{margin:0 8px}
.acts{margin-top:16px;padding:0 4px}.acts .btn{padding:13px 8px;white-space:nowrap}
.acts .btn:not(.ghost){box-shadow:0 8px 20px rgba(226,85,180,.45)}
.scn{position:relative;width:100%;height:244px;border-radius:26px;overflow:hidden;isolation:isolate}
.scn *{pointer-events:none}
.sc-stk{position:absolute;left:50%;bottom:0;width:158px;margin-left:-79px;z-index:2;animation:scbob 3.4s ease-in-out infinite}
.sc-stk img{display:block;width:100%;height:auto;transform-origin:50% 95%;filter:drop-shadow(0 8px 12px rgba(120,60,150,.3))}
@keyframes scbob{50%{transform:translateY(-5px)}}
.sc-glow{position:absolute;left:50%;top:56%;width:230px;height:230px;margin:-115px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 68%);animation:glw 3.4s ease-in-out infinite;z-index:0}
@keyframes glw{50%{transform:scale(1.12);opacity:.8}}
/* shared particle spots */
.p1{--l:8%;--t:14%;--s:12px;--d:0s;--dx:-30px}.p2{--l:20%;--t:60%;--s:8px;--d:-1.1s;--dx:-12px}.p3{--l:34%;--t:26%;--s:6px;--d:-2.3s;--dx:14px}
.p4{--l:70%;--t:12%;--s:9px;--d:-.6s;--dx:26px}.p5{--l:82%;--t:48%;--s:12px;--d:-1.8s;--dx:-8px}.p6{--l:90%;--t:20%;--s:6px;--d:-2.9s;--dx:10px}
.p7{--l:56%;--t:8%;--s:8px;--d:-3.4s;--dx:20px}.p8{--l:12%;--t:38%;--s:5px;--d:-.3s;--dx:0}.p9{--l:46%;--t:70%;--s:5px;--d:-2s;--dx:0}
.fx2{position:absolute;font-size:20px;opacity:0;z-index:3;animation:fxup 3.2s infinite}
.x1{left:12%;top:30%}.x2{right:12%;top:24%;animation-delay:1.1s}.x3{right:20%;top:56%;animation-delay:2.1s}

/* water */
.sc-water{background:linear-gradient(180deg,#e7f5ff,#d9e8ff 55%,#f3dcff)}
.rip{position:absolute;left:50%;bottom:-30px;width:210px;height:70px;margin-left:-105px;border-radius:50%;border:3px solid rgba(110,175,255,.55);animation:ripl 3.6s ease-out infinite;z-index:1}.rip.r2{animation-delay:1.8s}
@keyframes ripl{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.bub{position:absolute;left:var(--l);bottom:-16px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.25));border:1.5px solid rgba(255,255,255,.9);animation:bubu 5.5s linear infinite;animation-delay:var(--d);z-index:1}
@keyframes bubu{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),-250px);opacity:0}}
.glass{position:absolute;left:50%;bottom:18px;width:58px;height:87px;margin-left:34px;z-index:4;overflow:visible;animation:gl 4.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(70,120,200,.3))}
.glass .wlvl{animation:wl 4.4s ease-in-out infinite}.glass .wcounter{transform-origin:32px 48px;transform-box:view-box;animation:wc 4.4s ease-in-out infinite}.glass .wave{animation:wv 1.6s linear infinite}
@keyframes wv{to{transform:translateX(-64px)}}
@keyframes gl{0%,10%{transform:none}30%{transform:translate(-40px,-28px) rotate(-14deg)}40%,60%{transform:translate(-50px,-26px) rotate(-60deg)}74%{transform:translate(-40px,-28px) rotate(-14deg)}92%,100%{transform:none}}
@keyframes wc{0%,10%{transform:none}30%{transform:rotate(14deg)}40%,60%{transform:rotate(58deg)}74%{transform:rotate(14deg)}92%,100%{transform:none}}
@keyframes wl{0%,12%{transform:translateY(24px)}40%{transform:translateY(30px)}60%,80%{transform:translateY(62px)}95%,100%{transform:translateY(24px)}}
.gb{animation:gbu 2.2s ease-in infinite}.gb2{animation-delay:-.8s}.gb3{animation-delay:-1.5s}@keyframes gbu{from{transform:translateY(8px);opacity:1}to{transform:translateY(-34px);opacity:0}}
.sip img{animation:sipi 4.4s ease-in-out infinite}
@keyframes sipi{0%,24%{transform:none}38%{transform:rotate(-3deg) translateY(3px)}44%{transform:rotate(-3deg) translateY(3px) scale(1.03,.97)}49%{transform:rotate(-3deg) translateY(3px) scale(.99,1.02)}54%{transform:rotate(-3deg) translateY(3px) scale(1.03,.97)}60%{transform:rotate(-3deg) translateY(3px)}76%{transform:rotate(1deg) scale(1.03)}88%,100%{transform:none}}
.dp{position:absolute;left:50%;top:128px;width:7px;height:10px;margin-left:-10px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:linear-gradient(#b4e4ff,#5b9bff);opacity:0;z-index:3;animation:dpf 4.4s ease-in infinite}
.dp.p1{animation-delay:1.7s}.dp.p2{animation-delay:1.95s}.dp.p3{animation-delay:2.2s}.dp.p4{animation-delay:2.45s}
@keyframes dpf{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}22%{opacity:0;transform:translate(calc(var(--dx)*.6),64px)}100%{opacity:0}}

/* walk */
.sc-walk{background:linear-gradient(180deg,#ffd9ef,#eadfff 58%,#d8edff)}
.sun{position:absolute;right:24px;top:20px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#fff7cf,#ffd36b);box-shadow:0 0 0 10px rgba(255,214,107,.28),0 0 0 22px rgba(255,214,107,.14);animation:sunp 3.4s ease-in-out infinite}
@keyframes sunp{50%{transform:scale(1.08)}}
.cloud{position:absolute;width:58px;height:18px;border-radius:99px;background:#fff;opacity:.92;left:-70px;animation:cld 24s linear infinite}
.cloud::before{content:"";position:absolute;left:10px;top:-10px;width:24px;height:24px;border-radius:50%;background:#fff}.cloud::after{content:"";position:absolute;left:28px;top:-14px;width:18px;height:18px;border-radius:50%;background:#fff}
.c1{top:34px}.c2{top:78px;transform:scale(.7);animation-duration:34s;animation-delay:-14s}
@keyframes cld{to{left:105%}}
.lay{position:absolute;left:0;width:200%;display:block}
.hills{bottom:38px;height:96px;animation:scr 18s linear infinite}.trees{bottom:30px;height:96px;animation:scr 6.5s linear infinite}.grass{bottom:0;height:50px;z-index:3;animation:scr 2.4s linear infinite}
@keyframes scr{to{transform:translateX(-50%)}}
.sc-stk.walk{width:150px;margin-left:-75px;bottom:-4px;animation:none}
.walk img{animation:stp .62s ease-in-out infinite}
@keyframes stp{0%,100%{transform:translateY(0) rotate(-2.5deg) scale(1.03,.97)}50%{transform:translateY(-10px) rotate(2.5deg) scale(.98,1.03)}}

/* stretch */
.sc-stretch{background:radial-gradient(circle at 50% 75%,#fff6d2,#ffd3e8 55%,#e3d6ff)}
.ring{position:absolute;left:50%;top:58%;width:90px;height:90px;margin:-45px;border-radius:50%;border:3px solid rgba(255,255,255,.9);animation:rgx 3.6s ease-out infinite;z-index:1}.ring.r2{animation-delay:1.2s}.ring.r3{animation-delay:2.4s}
@keyframes rgx{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.sc-stk.str{animation:none}.str img{animation:strc 3.6s ease-in-out infinite}
@keyframes strc{0%,14%{transform:none}34%,56%{transform:scale(.95,1.11) translateY(-6px)}70%{transform:rotate(-5deg) translateY(-2px)}82%{transform:rotate(5deg) translateY(-2px)}94%,100%{transform:none}}
.ray{position:absolute;width:30px;height:5px;border-radius:5px;background:#fff;opacity:0;z-index:3;animation:ray 3.6s ease-in-out infinite}
.a1{left:16%;top:22%;transform:rotate(-35deg)}.a2{left:12%;top:36%;transform:rotate(-10deg)}.a3{right:16%;top:22%;transform:rotate(35deg)}.a4{right:12%;top:36%;transform:rotate(10deg)}
@keyframes ray{0%,26%,66%,100%{opacity:0;scale:.5}40%,54%{opacity:1;scale:1}}

/* sleep */
.sc-sleep{background:linear-gradient(180deg,#2c2464,#5a47a6 60%,#9a7fd8)}
.moon{position:absolute;right:26px;top:20px;width:38px;height:38px;border-radius:50%;box-shadow:inset -11px -3px 0 0 #ffeaa8;filter:drop-shadow(0 0 10px rgba(255,234,168,.7));animation:sunp 4s ease-in-out infinite}
.star{position:absolute;left:var(--l);top:var(--t);width:var(--s);height:var(--s);background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.sc-stk.zz{animation:none}.zz img{animation:brth 4.2s ease-in-out infinite}
@keyframes brth{0%,100%{transform:rotate(-1deg) scale(1)}50%{transform:rotate(2.5deg) translateY(4px) scale(1.03)}}
.z{position:absolute;left:60%;top:52%;color:#fff;font-size:18px;opacity:0;z-index:3;animation:zf 3.6s ease-out infinite}.z2{font-size:24px;animation-delay:1.2s}.z3{font-size:30px;animation-delay:2.4s}
@keyframes zf{0%{transform:translate(0,10px) rotate(-8deg);opacity:0}25%{opacity:.95}100%{transform:translate(34px,-70px) rotate(10deg);opacity:0}}

@media (prefers-reduced-motion:reduce){.scn *,.stk img,.blob{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ===== journal ===== */
.jtease{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;margin:12px 0;padding:14px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,236,248,.9));box-shadow:0 8px 24px rgba(190,120,200,.2);transition:transform .15s}
.jtease:active{transform:scale(.98)}
.jt-ic{flex:none;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,#ffd0ec,#dcd0ff);animation:jpen 3.2s ease-in-out infinite}
@keyframes jpen{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-2px)}}
.jt-tx{display:flex;flex-direction:column;min-width:0}.jt-tx b{font-size:15px}.jt-tx span{font-size:13px;color:var(--soft);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jt-go{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:28px;line-height:1;color:var(--deep)}.jt-go em{font-style:normal;font-size:12px;font-weight:600;background:#fff;border-radius:99px;padding:3px 9px}
.jback{padding:7px 14px;margin-bottom:6px}
textarea{width:100%;padding:12px 14px;border-radius:16px;border:1px solid #e6d3f2;font:inherit;font-size:15px;line-height:1.55;margin:8px 0 12px;background:#fff;color:var(--ink);resize:vertical;min-height:120px}
textarea:focus,input:focus{outline:2px solid var(--lilac);outline-offset:1px}
.jp{background:#fff;border-radius:14px;padding:9px 12px;margin-top:10px;color:var(--ink);font-size:13px}
.jent{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:12px 14px;margin:10px 0;box-shadow:0 6px 20px rgba(190,120,200,.12)}
.jh{display:flex;align-items:center;gap:10px;cursor:pointer}.jh small{color:var(--soft)}.jm{font-size:22px}.jc{margin-left:auto;color:var(--deep);font-size:18px}
.jx{margin-top:6px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jent.open .jx{display:block;-webkit-line-clamp:unset}.jb{margin-top:10px}.jb .btn{padding:8px}

/* ===== calendar events ===== */
.cal b{position:relative}
.cal b.ev::after{content:"";position:absolute;bottom:3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--lilac)}
.cal b.p.ev::after{background:#fff}
.legdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lilac)}
.evr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #ecd5e8}.evr:last-child{border-bottom:0}
.evr>div{flex:1;min-width:0}.evr b{display:block;font-size:14px;overflow-wrap:anywhere}.evr small{color:var(--soft)}
.evd{flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--lilac))}
.evx{border:0;background:#fff;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:14px;flex:none}
.lnk{color:var(--deep);font-weight:600;cursor:pointer}
.tile[data-act]{cursor:pointer}
.card label{display:block}
.sc-event{background:linear-gradient(180deg,#fff3c4,#ffd6ea 60%,#e6dcff)}
.cf{position:absolute;left:var(--l);top:-14px;width:8px;height:14px;border-radius:2px;z-index:1;animation:cfl 3.6s linear infinite;animation-delay:var(--d)}
.cf.p1,.cf.p4,.cf.p7{background:#ff7ab8}.cf.p2,.cf.p5,.cf.p8{background:#ffd36b}.cf.p3,.cf.p6,.cf.p9{background:#a98bff}
@keyframes cfl{to{transform:translate(var(--dx),270px) rotate(540deg)}}
.bell{position:absolute;right:22px;top:14px;font-size:36px;z-index:3;transform-origin:50% 8%;animation:ringb 1.5s ease-in-out infinite}
@keyframes ringb{0%,55%,100%{transform:rotate(0)}8%{transform:rotate(-20deg)}18%{transform:rotate(20deg)}28%{transform:rotate(-14deg)}38%{transform:rotate(14deg)}48%{transform:rotate(-6deg)}}
.sc-stk.evs{animation:none}.evs img{animation:evj 1s ease-in-out infinite}
@keyframes evj{0%,100%{transform:scale(1.02,.98)}40%{transform:translateY(-10px) scale(.98,1.03)}}

/* ===== new sticker set: mood animations ===== */
.moods{grid-template-columns:repeat(4,1fr);gap:8px}.mood{padding:8px 2px;font-size:12px}
.s-cute img,.s-love img{animation:abeat 1.3s ease-in-out infinite}
.s-excited img{animation:ahappy .9s ease-in-out infinite}
.s-surprised img{animation:asur 2.4s ease-in-out infinite}@keyframes asur{0%,60%,100%{transform:scale(1)}68%{transform:translateY(-12px) scale(1.07)}78%{transform:translateY(0) scale(.97,1.03)}}
.s-shy img{animation:ashy 3.2s ease-in-out infinite}@keyframes ashy{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg) translateY(2px)}}
.s-sleepy img{animation:atr 3.4s ease-in-out infinite}
.s-thinking img{animation:adr 3.6s ease-in-out infinite}
.s-cool img{animation:apop 1.8s ease-in-out infinite}
.s-confused img{animation:acon 3s ease-in-out infinite}@keyframes acon{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.s-grateful img{animation:abr 4s ease-in-out infinite}
/* ===== logo ===== */
.logo-s{width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(190,100,170,.3);flex:none;animation:lg 6s ease-in-out infinite}
@keyframes lg{50%{transform:rotate(6deg) scale(1.04)}}
.logo-l{width:170px;height:170px;border-radius:50%;background:#fff;box-shadow:0 14px 36px rgba(190,100,170,.35);animation:lg 6s ease-in-out infinite}
.jstk{width:78px;height:auto;flex:none;animation:ahero 3.4s ease-in-out infinite}
.jt-ic{width:54px;height:54px;border-radius:18px}.jt-ic img{width:48px;height:auto;display:block}
/* ===== cycle wheel ===== */
.ringwrap{width:min(100%,310px);aspect-ratio:1;margin:4px auto}
.wheel{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 8px 18px rgba(190,100,170,.22))}
.wheel .petals{transform-origin:180px 180px;animation:pspin 70s linear infinite}@keyframes pspin{to{transform:rotate(360deg)}}
.wheel .cur{animation:curp 1.8s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(0,0,0,.28))}@keyframes curp{50%{stroke-width:5}}
.wheel text{font-family:inherit;pointer-events:none}
.ringwrap .mid{inset:auto;width:104px;left:50%;top:50%;transform:translate(-50%,-50%);line-height:1.2}
.mid big{font-size:26px}.mid small{font-size:11px}
.wleg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:2px 0 12px;font-size:11px;color:var(--soft)}
.wleg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
/* ===== suggestions ===== */
.sg{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px dashed #ecd5e8}.sg:first-of-type{margin-top:10px}
.sg>span{font-size:20px;flex:none}.sg p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.note{display:block;margin-top:6px;color:var(--soft);font-size:11.5px}
/* ===== reminder scenes: new sticker proportions ===== */
.sc-water .sc-stk{width:200px;margin-left:-100px}
.scn .sc-stk.walk{width:178px;margin-left:-89px;bottom:-2px}
.sc-stretch .sc-stk{width:190px;margin-left:-95px}
.sc-sleep .sc-stk{width:210px;margin-left:-105px}
.sc-event .sc-stk{width:190px;margin-left:-95px}
.sp-av{background:#fff;object-position:50% 18%}

.row>*{min-width:0}.card input[type=date],.card input[type=time],.card select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.card select{padding:12px 10px;border-radius:14px;border:1px solid #e6d3f2;font:inherit;font-size:14px;background:#fff;color:var(--ink)}