:root{
    --paper:#F6F1E6; --card:#FFFDF8;
    --ink:#213D2A; --muted:#6E7E64; --hint:#9CA68C;
    --green:#4FA83C; --green-d:#2E6B2A; --green-l:#86CF5A;
    --cyan:#25CBB5; --magenta:#F0529C; --violet:#9B6BFF; --lime:#8FD14F; --gold:#F2A23C; --coral:#EE6B4D;
    --coral-mut:#C77A63;
    --clay:#DD9B72; --clay-r:#B5703F;
    --leaf-dry:#A8B094;
    --off:rgba(155,107,255,.30);
    --shadow:0 13px 30px -15px rgba(60,80,40,.32); --shadow-sm:0 6px 16px -9px rgba(60,80,40,.26);
    --a1:rgba(37,203,181,.30); --a2:rgba(240,82,156,.24); --a3:rgba(155,107,255,.24); --a4:rgba(143,209,79,.26); --a5:rgba(242,162,60,.16);
    --sky-top:#EAF6FF; --sky-bot:#F6F1E6;
    --sun:#FFCB45; --sunglow:rgba(255,200,80,.5); --ray:rgba(255,205,90,.5);
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%}
  body{background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;justify-content:center;padding:34px 18px 60px;position:relative;overflow-x:hidden;transition:background-color .9s ease}
  body::before{content:'';position:fixed;inset:-18%;z-index:-2;background:radial-gradient(33% 32% at 15% 15%, var(--a1), transparent 62%),radial-gradient(35% 33% at 85% 17%, var(--a2), transparent 62%),radial-gradient(40% 38% at 80% 84%, var(--a3), transparent 64%),radial-gradient(36% 32% at 17% 87%, var(--a4), transparent 62%),radial-gradient(30% 28% at 52% 50%, var(--a5), transparent 60%);filter:blur(34px);animation:drift 26s ease-in-out infinite alternate, auroraShift 34s ease-in-out infinite}
  .sky{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot) 62%);transition:opacity .9s ease}
  .shimmer{position:fixed;inset:-50%;z-index:-1;pointer-events:none;background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(120,220,255,.13), rgba(255,150,220,.1), rgba(180,140,255,.13), rgba(140,235,200,.1), rgba(255,255,255,0));mix-blend-mode:soft-light;animation:spin 55s linear infinite}
  .sun,.moon{position:absolute;top:4px;right:6px;width:50px;height:50px;border-radius:50%;border:none;padding:0;cursor:pointer;z-index:1;display:none;-webkit-tap-highlight-color:transparent}
  .sun{background:radial-gradient(circle at 38% 34%, #FFEFB8, var(--sun));box-shadow:0 0 34px 6px var(--sunglow)}
  .sun::after{content:'';position:absolute;inset:-13px;border-radius:50%;background:repeating-conic-gradient(var(--ray) 0deg 5deg, transparent 5deg 18deg);-webkit-mask:radial-gradient(circle, transparent 56%, #000 58%, #000 70%, transparent 73%);mask:radial-gradient(circle, transparent 56%, #000 58%, #000 70%, transparent 73%);animation:spin 30s linear infinite}
  .sun:focus-visible,.moon:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
  .moon{background:radial-gradient(5px 5px at 33% 58%, rgba(168,166,208,.75), transparent 70%),radial-gradient(4px 4px at 61% 40%, rgba(168,166,208,.65), transparent 70%),radial-gradient(3px 3px at 55% 71%, rgba(168,166,208,.6), transparent 70%),radial-gradient(circle at 40% 36%, #FCFBFF, #D7D4EC);box-shadow:0 0 28px 4px rgba(195,195,255,.45),inset -11px -7px 0 -2px rgba(180,178,220,.55);animation:moonglow 4.6s ease-in-out infinite}
  @keyframes moonglow{0%,100%{box-shadow:0 0 24px 4px rgba(195,195,255,.4),inset -11px -7px 0 -2px rgba(180,178,220,.55)}50%{box-shadow:0 0 42px 10px rgba(205,205,255,.62),inset -11px -7px 0 -2px rgba(180,178,220,.55)}}
  .stars{position:absolute;left:0;right:0;top:0;height:150px;z-index:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
  .star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1.5px rgba(255,255,255,.85);animation:twinkle 3.2s ease-in-out infinite}
  body[data-phase="day"] .sun,body[data-phase="dawn"] .sun,body[data-phase="dusk"] .sun{display:block}
  body[data-phase="night"] .moon{display:block}
  body[data-phase="night"] .stars{opacity:1}
  body[data-phase="dawn"]{--paper:#F7EFE5;--sky-top:#FFE3D2;--sky-bot:#F7EFE5;--a1:rgba(255,154,118,.26);--a2:rgba(255,120,170,.22);--a3:rgba(255,196,120,.24);--a4:rgba(180,150,255,.16);--a5:rgba(255,170,120,.18);--sun:#FFB36B;--sunglow:rgba(255,150,90,.5);--ray:rgba(255,170,110,.5)}
  body[data-phase="dusk"]{--paper:#F0E7EA;--sky-top:#FFC79E;--sky-bot:#E6D6E8;--a1:rgba(255,138,91,.24);--a2:rgba(240,82,156,.26);--a3:rgba(155,107,255,.30);--a4:rgba(255,170,90,.2);--a5:rgba(120,90,220,.18);--sun:#FF8A5B;--sunglow:rgba(255,120,80,.5);--ray:rgba(255,150,100,.45)}
  body[data-phase="night"]{--paper:#E6E3F0;--sky-top:#D6D3E8;--sky-bot:#E6E3F0;--a1:rgba(155,107,255,.30);--a2:rgba(90,110,230,.24);--a3:rgba(37,203,181,.22);--a4:rgba(240,82,156,.20);--a5:rgba(70,90,200,.18)}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes auroraShift{0%{filter:blur(33px) saturate(1.25) hue-rotate(-32deg)}50%{filter:blur(33px) saturate(1.5) hue-rotate(30deg)}100%{filter:blur(33px) saturate(1.25) hue-rotate(-32deg)}}
  .grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  .app{width:100%;max-width:460px;position:relative;z-index:1}

  .hero{position:relative;text-align:center;padding:6px 0 8px}
  .marks{position:absolute;inset:-6px 0 0;pointer-events:none}
  .mk{position:absolute;opacity:.55;font-family:"Quicksand",sans-serif;font-weight:700;line-height:1;animation:floaty 6s ease-in-out infinite, twinkle 4.5s ease-in-out infinite}
  .mk.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
  .mk.plus{font-size:17px}
  .mk.ring{width:12px;height:12px;border:2px solid currentColor;border-radius:50%}
  .mk.spark{width:12px;height:12px;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
  .c-cyan{color:var(--cyan)}.c-mag{color:var(--magenta)}.c-vio{color:var(--violet)}.c-lime{color:var(--lime)}.c-gold{color:var(--gold)}.c-coral{color:var(--coral)}

  .wordmark{position:relative;z-index:2;font-family:"Quicksand",sans-serif;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:14px;margin:0 0 4px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta),var(--lime),var(--cyan));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 10s linear infinite}
  .herocan{position:relative;z-index:2;width:150px;height:auto;cursor:pointer;outline:none;transition:transform .3s ease;filter:drop-shadow(2.5px 3px 0 var(--off))}
  .herocan:hover{transform:scale(1.04) rotate(-1deg)}
  .herocan:focus-visible{outline:3px solid var(--violet);outline-offset:5px;border-radius:18px}
  .tagline{position:relative;z-index:2;font-family:"Quicksand",sans-serif;font-weight:600;font-size:19px;margin:8px 0 0;color:var(--ink)}
  .sub{position:relative;z-index:2;font-size:13px;color:var(--muted);margin:4px 0 0}
  .progress{position:relative;z-index:2;margin:16px auto 0;max-width:300px}
  .track{height:10px;border-radius:99px;background:rgba(95,158,57,.15);overflow:hidden}
  .fill{height:100%;width:25%;border-radius:99px;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--violet),var(--magenta));background-size:300% 100%;animation:flow 7s linear infinite;transition:width .9s cubic-bezier(.22,.61,.36,1)}
  .pcount{font-family:"Quicksand",sans-serif;font-weight:600;font-size:12.5px;color:var(--green);margin:7px 0 0}
  .pcount.party{animation:pop 1s ease}

  .streak{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--card);border-radius:20px;padding:13px 18px;box-shadow:var(--shadow-sm);margin-top:20px}
  .streak-head{display:flex;align-items:center;gap:10px}
  .streak-emblem{width:32px;height:32px;flex:0 0 auto}
  .streak-num{font-family:"Quicksand",sans-serif;font-weight:700;font-size:23px;color:var(--coral);line-height:1}
  .streak-num.bump{animation:pop .6s ease;display:inline-block}
  .streak-label{font-size:13px;color:var(--muted);font-weight:500}
  .week{display:flex;gap:7px}
  .dot2{width:13px;height:13px;border-radius:50%;background:rgba(95,158,57,.16);transition:background .5s ease}
  .dot2.done{background:linear-gradient(160deg,var(--lime),var(--cyan))}
  .dot2.today{box-shadow:0 0 0 2px var(--magenta)}
  .dot2.justdone{animation:dotpop .6s ease}

  .list{display:flex;flex-direction:column;gap:14px;margin-top:18px}
  .card{position:relative;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:22px;padding:14px 16px 14px 10px;box-shadow:var(--shadow-sm);cursor:default;border:1.5px solid transparent;animation:cardin .55s cubic-bezier(.34,1.3,.6,1) backwards;transition:box-shadow .5s ease, border-color .4s ease}
  .card:hover{box-shadow:var(--shadow)}
  .card.watered{background:linear-gradient(160deg,#F6FBEE,#FFFDF8)}
  .plantbox{position:relative;flex:0 0 auto;width:96px;height:104px;border-radius:18px;cursor:pointer;outline:none;transition:transform .3s cubic-bezier(.34,1.3,.6,1)}
  .plantbox:hover{transform:scale(1.07)}
  .plantbox:active{transform:scale(.96)}
  .plantbox:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
  .plantart{width:96px;height:104px;display:block;overflow:visible;transform-origin:50% 96%;animation:sway 5.4s ease-in-out infinite}
  .card.thirsty .plantart{animation-duration:7.2s}
  .info{flex:1 1 auto;min-width:0}
  .name{font-family:"Quicksand",sans-serif;font-weight:600;font-size:17px;color:var(--ink);margin:0;line-height:1.2}
  .spec{font-weight:500;font-size:12.5px;color:var(--hint);font-style:italic}
  .state{font-size:13px;color:var(--coral-mut);margin:5px 0 0;font-weight:500;transition:color .5s ease}
  .state.late{color:var(--coral)}
  .card.watered .state{color:var(--green)}
  .tick{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(79,168,60,.45);color:var(--green);background:transparent;padding:0;cursor:pointer;transition:background .5s ease,border-color .5s ease,color .5s ease,transform .14s ease}
  .tick svg{width:20px;height:20px}
  .tick:hover{transform:scale(1.08)}
  .card.watered .tick{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
  .card.watered .tick:hover{transform:none}

  .foliage{transform-box:fill-box;transform-origin:50% 100%;filter:drop-shadow(2px 2px 0 var(--off));transition:transform .8s cubic-bezier(.34,1.28,.5,1),opacity .6s ease,filter .6s ease}
  .card.thirsty .foliage,.dplant.thirsty .foliage{transform:translateY(3px) scale(.9) rotate(-2.5deg);filter:drop-shadow(1px 1px 0 rgba(155,107,255,.14))}
  .lf{fill:var(--leaf);stroke:var(--green-d);stroke-width:2.4;stroke-linejoin:round;transition:fill .6s ease}
  .card.thirsty .lf,.dplant.thirsty .lf{fill:var(--leaf-dry);stroke:#7E8A6C}
  .pot-b,.pot-r{fill:var(--clay);stroke:var(--clay-r);stroke-width:2.4;stroke-linejoin:round}
  .stem{stroke:var(--green-d);stroke-width:3;fill:none;stroke-linecap:round}
  .card.thirsty .stem,.dplant.thirsty .stem{stroke:#7E8A6C}
  .flower{transform-box:fill-box;transform-origin:50% 85%;transition:transform .8s cubic-bezier(.34,1.5,.5,1),opacity .6s ease}
  .card.thirsty .flower,.dplant.thirsty .flower{transform:scale(.3);opacity:.45}
  .card.watered .flower,.dplant.watered .flower{transform:scale(1);opacity:1}
  .petal{fill:#FFF4E6;stroke:#EAD9BE;stroke-width:1}
  .fcenter{fill:var(--magenta)}
  .card.parched .foliage,.dplant.parched .foliage{transform:translateY(6px) scale(.8) rotate(-5deg)}
  .card.parched .lf,.dplant.parched .lf{fill:#BCAF82;stroke:#897B52}
  .face{pointer-events:none}
  .eye{fill:#6E5337;transform-box:fill-box;transform-origin:center;transition:transform .45s ease,opacity .3s}
  .mouth{fill:none;stroke:#6E5337;stroke-width:2.1;stroke-linecap:round;transition:opacity .4s ease}
  .cheek{fill:#F7A8B0;opacity:0;transition:opacity .55s ease}
  .tear{fill:#34C6DE;opacity:0}
  .m-neutral,.m-sad{opacity:0}
  .card.watered .cheek,.dplant.watered .cheek{opacity:.7}
  .card.thirsty .m-happy,.dplant.thirsty .m-happy{opacity:0}
  .card.thirsty .m-neutral,.dplant.thirsty .m-neutral{opacity:1}
  .card.thirsty .eye,.dplant.thirsty .eye{transform:translateY(.6px) scaleY(.82)}
  .card.parched .m-neutral,.dplant.parched .m-neutral{opacity:0}
  .card.parched .m-sad,.dplant.parched .m-sad{opacity:1}
  .card.parched .eye,.dplant.parched .eye{transform:translateY(1px) scaleY(.66)}
  .card.parched .tear,.dplant.parched .tear{opacity:1;animation:teardrip 2.8s ease-in infinite}
  @keyframes teardrip{0%{transform:translateY(0);opacity:0}18%{opacity:1}68%{opacity:1}100%{transform:translateY(7px);opacity:0}}
  .freshglow{position:absolute;left:50%;top:46%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(90,225,190,.5),rgba(90,225,190,0) 70%);animation:freshglow .95s ease-out forwards}
  @keyframes freshglow{0%{transform:scale(.35);opacity:0}28%{opacity:.95}100%{transform:scale(1.6);opacity:0}}
  .burst{position:fixed;left:50%;top:46%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;z-index:90;pointer-events:none;background:radial-gradient(circle, rgba(255,255,255,.92), rgba(140,235,200,.5) 30%, rgba(155,107,255,.34) 56%, transparent 72%);mix-blend-mode:screen;animation:burst 1.35s cubic-bezier(.2,.7,.3,1) forwards}
  .burst.lunar{background:radial-gradient(circle, rgba(255,255,255,.95), rgba(200,206,255,.52) 30%, rgba(150,140,255,.36) 56%, transparent 72%)}
  @keyframes burst{0%{transform:scale(.2);opacity:0}18%{opacity:1}100%{transform:scale(27);opacity:0}}
  .petal-fx{position:fixed;top:-26px;z-index:90;pointer-events:none;will-change:transform,opacity;border-radius:50%;animation-name:petalfall;animation-timing-function:cubic-bezier(.4,.18,.6,1);animation-fill-mode:forwards}
  .petal-fx.petal{border-radius:50% 50% 50% 50%/64% 64% 40% 40%}
  .petal-fx.star{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
  .petal-fx.lum{box-shadow:0 0 7px 1px rgba(220,222,255,.85)}
  @keyframes petalfall{0%{transform:translate(0,-30px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),106vh) rotate(var(--spin));opacity:0}}
  .partytoast{position:fixed;left:50%;top:36%;z-index:96;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);padding:12px 22px;border-radius:18px;font-family:"Quicksand",sans-serif;font-weight:700;font-size:18px;color:var(--ink);box-shadow:0 14px 32px -12px rgba(60,80,40,.45);pointer-events:none;white-space:nowrap;animation:toastpop 2.7s ease forwards}
  @keyframes toastpop{0%{opacity:0;transform:translate(-50%,-40%) scale(.82)}11%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}}
  .plantbox.bounce,.dplant.bounce{animation:waterbounce .62s cubic-bezier(.3,1.3,.5,1)}
  @keyframes waterbounce{0%{transform:scale(1)}26%{transform:scale(.9) translateY(3px)}58%{transform:scale(1.08) translateY(-4px)}100%{transform:scale(1)}}
  .card.blink .eye,.dplant.blink .eye{animation:blinkonce .24s ease}
  @keyframes blinkonce{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
  .shootingstar{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.9);z-index:0;pointer-events:none;animation:shoot 1.1s ease-in forwards}
  .shootingstar::after{content:'';position:absolute;right:1px;top:50%;width:46px;height:2px;transform:translateY(-50%);background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85));border-radius:2px}
  @keyframes shoot{0%{transform:translate(0,0) scale(0);opacity:0}12%{opacity:1;transform:translate(-12px,18px) scale(1)}100%{transform:translate(-130px,150px) scale(.9);opacity:0}}
  .card.thirsty .tick:active{transform:scale(.88)}
  .water-big:not(:disabled):active{transform:scale(.97)}
  .addcard:active{transform:scale(.98)}
  .typebtn:active{transform:scale(.95)}
  .btn-primary:active{transform:scale(.97)}
  .iconbtn:active{transform:scale(.92)}
  .sun:active,.moon:active{transform:scale(.92)}
  .empty{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:30px 12px 14px;color:var(--muted)}
  .empty[hidden]{display:none}
  .empty svg{margin-bottom:6px;animation:bob 3.4s ease-in-out infinite}
  .empty .et{font-family:"Quicksand",sans-serif;font-weight:700;font-size:17px;color:var(--ink);margin:0}
  .empty .es{font-size:13.5px;margin:0}
  .cardmeta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
  .cardmeta .dropmeter{margin:0}
  .roomtag{font-size:11px;color:var(--muted);background:rgba(110,126,100,.13);padding:2px 9px;border-radius:999px;font-weight:600}
  .dropmeter{display:flex;gap:3px;align-items:center}
  .dropmeter .dx{width:13px;height:13px;color:#C9DCD3;display:inline-flex;transition:color .25s ease,transform .14s ease}
  .dropmeter .dx svg{width:100%;height:100%;fill:currentColor}
  .dropmeter .dx.on{color:#3DAEE6}
  .dropmeter.edit{gap:7px}
  .dropmeter.edit .dx{width:27px;height:27px;cursor:pointer}
  .dropmeter.edit .dx:hover{transform:scale(1.14)}
  .dropmeter.edit .dx:active{transform:scale(.9)}
  .drops-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 2px 0}
  .dr-label{font-size:13px;color:var(--muted);font-weight:600;font-family:"Quicksand",sans-serif}
  .rooms{display:flex;flex-wrap:wrap;gap:8px;padding:2px;margin-top:18px}
  .rooms[hidden]{display:none}
  .roomchip{flex:0 0 auto;border:1.5px solid rgba(79,168,60,.3);background:rgba(255,255,255,.55);color:var(--muted);border-radius:999px;padding:7px 15px;font:inherit;font-family:"Quicksand",sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .14s;white-space:nowrap}
  .roomchip.active{background:var(--green);border-color:var(--green);color:#fff}
  .roomchip:active{transform:scale(.95)}
  .roompick{display:flex;flex-wrap:wrap;gap:8px}
  .roompick .rc{border:1.5px solid rgba(79,168,60,.3);background:#fff;color:var(--muted);border-radius:12px;padding:8px 13px;font:inherit;font-family:"Quicksand",sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .14s}
  .roompick .rc.sel{background:var(--green);border-color:var(--green);color:#fff}
  .roompick .rc:active{transform:scale(.95)}

  .fx{position:absolute;pointer-events:none;z-index:3}
  .drop{width:9px;height:12px;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;background:#29C2D6;opacity:0;animation:dropfall 1s ease-in forwards}
  .spark{width:12px;height:12px;opacity:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:sparkpop 1s ease-out forwards}

  .flycan{position:absolute;top:-26px;left:40px;width:60px;height:60px;pointer-events:none;z-index:4;transform-origin:50% 70%;filter:drop-shadow(2px 2px 0 var(--off));animation:canpour 1.5s cubic-bezier(.34,1.05,.5,1) forwards}
  .flycan svg{width:60px;height:60px;display:block}

  .addcard{width:100%;border:2px dashed rgba(79,168,60,.4);background:rgba(255,255,255,.4);border-radius:22px;padding:16px;font:inherit;font-family:"Quicksand",sans-serif;font-weight:600;font-size:15px;color:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .25s}
  .addcard:hover{background:#fff;border-color:var(--green)}
  .addicon{font-size:20px;line-height:1}

  .modal-backdrop{position:fixed;inset:0;background:rgba(40,52,30,.32);display:flex;align-items:flex-end;justify-content:center;z-index:80;opacity:0;transition:opacity .3s ease}
  .modal-backdrop.show{opacity:1}
  .modal-backdrop[hidden]{display:none}
  .modal{background:var(--card);width:100%;max-width:460px;border-radius:26px 26px 0 0;padding:18px 22px 26px;transform:translateY(24px);transition:transform .38s cubic-bezier(.34,1.2,.6,1);box-shadow:0 -10px 40px rgba(40,52,30,.22);max-height:92vh;overflow:auto}
  .modal-backdrop.show .modal{transform:translateY(0)}
  .grip{width:42px;height:4px;border-radius:99px;background:rgba(40,52,30,.18);margin:0 auto 14px}
  .mtitle{font-family:"Quicksand",sans-serif;font-weight:700;font-size:19px;margin:0 0 14px;color:var(--ink)}
  .fld{display:block;margin:0 0 12px}
  .fld span{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin:0 0 5px}
  .fld input{width:100%;border:1.5px solid rgba(79,168,60,.3);border-radius:13px;padding:11px 13px;font:inherit;font-size:15px;color:var(--ink);background:#fff;outline:none;transition:border-color .2s}
  .fld input:focus{border-color:var(--green)}
  .fld input.shake{animation:shake .45s}
  .flbl{font-size:12.5px;color:var(--muted);font-weight:500;margin:14px 0 7px}
  .sfreq{font-size:12px;color:var(--hint);margin:8px 0 0;font-style:italic}
  .typepick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .typebtn{border:1.5px solid rgba(79,168,60,.25);border-radius:15px;background:#fff;padding:5px;cursor:pointer;transition:border-color .2s, background .2s}
  .typebtn svg{width:100%;height:52px;display:block;animation:none}
  .typebtn.sel{border-color:var(--green);background:#F4FBE9}
  .swatches{display:flex;gap:12px}
  .sw{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;transition:box-shadow .2s, transform .15s}
  .sw:hover{transform:scale(1.08)}
  .sw.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--green-d)}
  .stepper{display:flex;align-items:center;gap:14px}
  .stepper button{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(79,168,60,.3);background:#fff;font-size:20px;color:var(--green);cursor:pointer;line-height:1}
  .ival{font-family:"Quicksand",sans-serif;font-weight:700;font-size:18px;color:var(--ink);min-width:18px;text-align:center}
  .sunit{font-size:14px;color:var(--muted)}
  .mactions{display:flex;gap:12px;margin-top:22px}
  .btn-ghost{flex:1;border:1.5px solid rgba(79,168,60,.3);background:#fff;border-radius:14px;padding:13px;font:inherit;font-weight:600;font-family:"Quicksand",sans-serif;color:var(--muted);cursor:pointer}
  .btn-primary{flex:2;border:none;background:linear-gradient(120deg,var(--cyan),var(--green));color:#fff;border-radius:14px;padding:13px;font:inherit;font-weight:700;font-family:"Quicksand",sans-serif;cursor:pointer;box-shadow:0 8px 18px -8px rgba(60,120,40,.5)}

  .detail{position:fixed;inset:0;z-index:70;background:var(--paper);overflow:auto;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;justify-content:center}
  .detail::before{content:'';position:absolute;inset:-18%;z-index:0;background:radial-gradient(36% 30% at 22% 12%, rgba(37,203,181,.22), transparent 62%),radial-gradient(40% 34% at 82% 86%, rgba(155,107,255,.20), transparent 64%);filter:blur(30px);pointer-events:none}
  .detail.show{transform:translateX(0)}
  .detail[hidden]{display:none}
  .detail-inner{width:100%;max-width:460px;padding:18px 20px 50px;position:relative;z-index:1}
  .detail-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .iconbtn{width:42px;height:42px;border-radius:50%;border:none;background:#fff;color:var(--green-d);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
  .iconbtn svg{width:22px;height:22px}
  .detail-hero{display:flex;justify-content:center;margin:4px 0 0}
  .dplant{position:relative;width:210px;height:215px;display:flex;align-items:flex-end;justify-content:center}
  .dplant svg{width:185px;height:auto}
  .detail-name{font-family:"Quicksand",sans-serif;font-weight:700;font-size:26px;text-align:center;margin:6px 0 0;color:var(--ink)}
  .detail-spec{text-align:center;font-style:italic;color:var(--hint);font-size:14px;margin:2px 0 0}
  .detail-status{text-align:center;font-weight:600;font-family:"Quicksand",sans-serif;font-size:15px;color:var(--coral-mut);margin:8px 0 0}
  .detail-status.late{color:var(--coral)}.detail-status.ok{color:var(--green)}
  .water-big{display:block;width:100%;max-width:300px;margin:18px auto 0;border:none;border-radius:16px;padding:15px;font:inherit;font-family:"Quicksand",sans-serif;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(120deg,var(--cyan),var(--green));cursor:pointer;box-shadow:0 10px 22px -8px rgba(60,120,40,.5)}
  .water-big.done,.water-big:disabled{background:#EAF3DE;color:var(--green);box-shadow:none;cursor:default}
  .detail-info{display:flex;gap:12px;margin:24px 0 0}
  .info-chip{flex:1;background:var(--card);border-radius:16px;padding:13px 15px;box-shadow:var(--shadow-sm)}
  .info-chip span{display:block;font-size:12px;color:var(--hint);margin-bottom:3px}
  .info-chip strong{font-family:"Quicksand",sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
  .badges{display:flex;flex-direction:column;gap:9px}
  .badge{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:11px 14px;font-weight:500;font-size:14px;box-shadow:var(--shadow-sm);color:var(--ink)}
  .badge .badge-ic{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#E6F7F2;color:var(--cyan)}
  .badge .badge-ic svg{width:16px;height:16px}
  .badge.locked{opacity:.5}
  .badge.locked .badge-ic{background:rgba(0,0,0,.06);color:var(--hint)}
  .undo-link{display:block;width:fit-content;margin:12px auto 0;background:#F2EFE8;border:1.5px solid #E3DECF;color:var(--muted);font:inherit;font-weight:700;font-family:"Quicksand",sans-serif;font-size:13px;cursor:pointer;padding:8px 16px;border-radius:999px;text-decoration:none;transition:transform .14s}
  .undo-link[hidden]{display:none}
  .undo-link:active{transform:scale(.96)}
  .snooze-link{display:block;width:fit-content;margin:12px auto 0;background:#EAF4FB;border:1.5px solid #CADFEE;color:#3A86B8;font:inherit;font-weight:700;font-family:"Quicksand",sans-serif;font-size:13px;cursor:pointer;padding:8px 16px;border-radius:999px;text-decoration:none;transition:transform .14s}
  .snooze-link[hidden]{display:none}
  .snooze-link:active{transform:scale(.96)}
  .delete-link{display:block;margin:18px auto 0;background:none;border:none;color:var(--coral);font:inherit;font-weight:600;font-family:"Quicksand",sans-serif;font-size:14px;cursor:pointer;padding:8px}
  .delete-link.danger{color:#fff;background:var(--coral);border-radius:12px;padding:12px 18px}

  .bob{animation:bob 3.4s ease-in-out infinite}
  .can{transform-box:fill-box;transform-origin:52% 92%}
  #herocan.go .can{animation:tilt 3.4s cubic-bezier(.34,1.08,.5,1)}
  .cdrop{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
  #herocan.go .cdrop{animation:fall 1.2s ease-in both}
  #herocan.go .c1{animation-delay:.85s}#herocan.go .c2{animation-delay:1s}#herocan.go .c3{animation-delay:1.15s}
  .streamdrop{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:streamfall .9s ease-in forwards}
  .pourfx{pointer-events:none}
  .plantphoto{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
  .card.thirsty .plantphoto{filter:saturate(.55) brightness(.97);opacity:.86}
  .card.parched .plantphoto{filter:saturate(.32) brightness(.93);opacity:.76}
  .dplant .plantphoto{border-radius:24px;box-shadow:0 12px 30px -12px rgba(60,90,40,.45)}
  .dplant.thirsty .plantphoto{filter:saturate(.55) brightness(.97);opacity:.9}
  .dplant.parched .plantphoto{filter:saturate(.32) brightness(.93);opacity:.82}
  .photo-row{display:flex;gap:10px;margin-top:8px}
  .photo-btn{flex:0 0 auto;border:1.5px solid rgba(79,168,60,.35);background:#fff;color:var(--green);font:inherit;font-family:"Quicksand",sans-serif;font-weight:700;font-size:13px;cursor:pointer;padding:9px 15px;border-radius:12px;transition:transform .14s,background .2s}
  .photo-btn.ghost{color:var(--muted);border-color:#E3DECF;background:#F7F4ED}
  .photo-btn:active{transform:scale(.96)}
  .gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(125% 120% at 50% 0%, #FDFBF4, #EFEADD);transition:opacity .42s ease}
  .gate.out{opacity:0;pointer-events:none}
  .gate-card{width:100%;max-width:340px;text-align:center;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.85);border-radius:28px;padding:30px 26px 22px;box-shadow:0 24px 60px -24px rgba(60,90,40,.42)}
  .gate-card.shake{animation:shake .42s}
  .gate-emoji{width:66px;height:66px;margin:0 auto 8px}
  .gate-emoji svg{width:100%;height:100%}
  .gate-word{font-family:"Quicksand",sans-serif;font-weight:700;font-size:30px;color:var(--ink);margin:0;letter-spacing:.5px}
  .gate-sub{font-size:13.5px;color:var(--muted);margin:4px 0 20px}
  .gate-input{width:100%;box-sizing:border-box;border:1.5px solid #E2DCCE;border-radius:14px;padding:13px 16px;font:inherit;font-family:"Quicksand",sans-serif;font-size:15px;color:var(--ink);background:#fff;text-align:center;outline:none;transition:border-color .2s}
  .gate-input:focus{border-color:var(--green)}
  .gate-input:disabled{opacity:.5}
  .gate-btn{width:100%;margin-top:12px;border:none;border-radius:14px;padding:14px;font:inherit;font-family:"Quicksand",sans-serif;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(120deg,var(--cyan),var(--green));cursor:pointer;box-shadow:0 10px 22px -8px rgba(60,120,40,.5);transition:transform .14s}
  .gate-btn:active{transform:scale(.97)}
  .gate-btn:disabled{opacity:.5;cursor:default;box-shadow:none}
  .gate-msg{min-height:18px;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 0}
  .gate-msg.err{color:var(--coral)}
  .gate-hint{font-size:11px;color:var(--hint);margin:14px 0 0;line-height:1.5}
  .viewswitch{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:28px}
  .vs-label{font-size:12px;color:var(--hint);font-weight:600}
  .vs-btn{border:1.5px solid #E1DDD2;background:#fff;color:var(--muted);font:inherit;font-family:"Quicksand",sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;padding:6px 14px;border-radius:999px;transition:background .2s,color .2s,border-color .2s,transform .14s}
  .vs-btn.active{background:var(--violet);border-color:var(--violet);color:#fff}
  .vs-btn:active{transform:scale(.96)}
  body[data-view="marion"] #addBtn,
  body[data-view="marion"] #editBtn,
  body[data-view="marion"] #undoBtn,
  body[data-view="marion"] #snoozeBtn,
  body[data-view="marion"] #deleteBtn,
  body[data-view="marion"] #photoLabel,
  body[data-view="marion"] .photo-row,
  body[data-view="marion"] .drops-row{display:none}
  body[data-view="marion"] .tick{border-color:#F4C9D8;color:#E1577F}
  body[data-view="marion"] .card.watered .tick{background:#F7AFC4;border-color:#F7AFC4;color:#fff}
  .nudgetag{font-size:11px;color:#E1577F;background:#FDEFF3;padding:2px 9px;border-radius:999px;font-weight:700}
  .floatheart{position:absolute;left:50%;top:28%;color:#E1577F;font-size:26px;pointer-events:none;animation:heartup 1.05s ease-out forwards}
  @keyframes heartup{0%{opacity:0;transform:translate(-50%,6px) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-42px) scale(1.12)}}
  .apptoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:120;background:rgba(40,55,30,.93);color:#fff;padding:12px 18px;border-radius:14px;font-family:"Quicksand",sans-serif;font-weight:600;font-size:13.5px;max-width:84%;text-align:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.4);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
  .apptoast.show{opacity:1;transform:translate(-50%,0)}

  .foot{text-align:center;font-size:12px;color:var(--hint);margin-top:24px}

  @keyframes drift{0%{transform:translate(0,0) scale(1.06) rotate(0deg)}100%{transform:translate(-5%,4%) scale(1.22) rotate(5deg)}}
  @keyframes flow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
  @keyframes sway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes twinkle{0%,100%{opacity:.55}50%{opacity:.18}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes tilt{0%{transform:rotate(0)}12%{transform:rotate(-6deg)}28%{transform:rotate(-32deg)}72%{transform:rotate(-32deg)}100%{transform:rotate(0)}}
  @keyframes streamfall{0%{opacity:0;transform:translateY(-2px) scale(.5)}14%{opacity:.95;transform:translateY(8px) scale(1)}100%{opacity:0;transform:translateY(64px) scale(.8)}}
  @keyframes fall{0%{opacity:0;transform:translateY(0) scale(.5)}18%{opacity:1;transform:translateY(5px) scale(1)}100%{opacity:0;transform:translateY(46px) scale(.9)}}
  @keyframes dropfall{0%{opacity:0;transform:translateY(-10px) scale(.5)}22%{opacity:1}100%{opacity:0;transform:translateY(54px) scale(.95)}}
  @keyframes sparkpop{0%{opacity:0;transform:translate(0,0) scale(0) rotate(0)}40%{opacity:1;transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.5)) scale(1) rotate(30deg)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(70deg)}}
  @keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
  @keyframes dotpop{0%{transform:scale(.4)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  @keyframes cardin{0%{opacity:0;transform:translateY(16px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes canpour{0%{opacity:0;transform:translate(8px,-16px) rotate(8deg) scale(.85)}16%{opacity:1;transform:translate(2px,-4px) rotate(-6deg) scale(1)}42%{transform:translate(0,0) rotate(-30deg) scale(1)}66%{transform:translate(0,0) rotate(-30deg) scale(1)}86%{opacity:1;transform:translate(3px,-8px) rotate(-2deg) scale(1)}100%{opacity:0;transform:translate(10px,-20px) rotate(10deg) scale(.85)}}
  @media (prefers-reduced-motion: reduce){body::before,.bob,.wordmark,.fill,.plantart,.mk,.tear,.shimmer,.star,.sun::after,.moon,.plantbox.bounce,.dplant.bounce,.card.blink .eye,.dplant.blink .eye,.shootingstar{animation:none}.foliage,.flower,.lf,.stem,.fill,.tick,.state{transition-duration:.25s}.flycan{animation-duration:.6s}.detail{transition-duration:.2s}.card{animation:none}#herocan.go .can{animation:tilt 1.2s ease}}