:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#FFF5F7;--surface:#FFFFFF;--sunk:#FFEEF3;--ink:#3A2633;--muted:#86697A;--line:#F1D9E2;
  --saffron:#F5A623;--saffron-text:#A35A00;--barberry:#D93A54;--pistachio:#6FA84F;--tq:#1FA394;
  --s-b:#FFF2C2;--s-l:#FFE3BD;--s-n:#FCDDE6;--s-d:#E9E1FA;
  --lift:0 10px 30px rgba(150,70,100,.16);
  --display:"Lalezar","Vazirmatn",system-ui,-apple-system,Tahoma,sans-serif;
  --body:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1E1620;--surface:#2A1F2C;--sunk:#241A26;--ink:#F6E9F0;--muted:#B49DAC;--line:#3D2E40;
    --saffron:#FFB547;--saffron-text:#FFC266;--barberry:#FF6B81;--pistachio:#8DC86E;--tq:#3CC9B8;
    --s-b:#3A321C;--s-l:#41301A;--s-n:#432534;--s-d:#2F2745;
    --lift:0 10px 30px rgba(0,0,0,.45);color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.locked,html.locked body{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-tap-highlight-color:transparent;padding:10px 16px 118px;min-height:100vh}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;text-align:inherit}
button:disabled{opacity:.55;cursor:default}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto}
svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:14px;margin:4px 2px 10px;line-height:1.8}

/* ---------- avatars ---------- */
.av{--s:28px;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;background:var(--cs);box-shadow:inset 0 0 0 2px var(--c);font-size:calc(var(--s) * .56);line-height:1}
.av.on::after{content:"";position:absolute;bottom:-1px;left:-1px;width:calc(var(--s) * .3);height:calc(var(--s) * .3);min-width:8px;min-height:8px;border-radius:50%;background:var(--tq);box-shadow:0 0 0 2px var(--surface)}
.stack{display:inline-flex;align-items:center}
.stack .av+.av{margin-inline-start:-9px}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.house{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 4px 4px 12px;border-radius:999px;position:relative}
.house .av{box-shadow:inset 0 0 0 2px var(--c),0 0 0 2.5px var(--bg)}
.hn{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hn b{font:400 24px/1.25 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn small{font-size:12.5px;color:var(--muted);font-weight:600}
.badge{position:absolute;top:0;inset-inline-start:22px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--barberry);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.net{margin-inline-start:auto;width:10px;height:10px;border-radius:50%;background:var(--tq);flex:none;transition:background .3s}
.net.off{background:var(--muted);box-shadow:0 0 0 4px var(--sunk)}
.me-btn{flex:none;border-radius:50%}

/* ---------- mascot ---------- */
.hero{display:flex;align-items:center;gap:8px;background:var(--s-n);border-radius:28px;padding:10px 12px 10px 14px;margin-bottom:14px}
.pot-btn{flex:none;width:96px;height:88px;border-radius:24px}
.pot{width:100%;height:100%;overflow:visible;display:block}
.bubble{position:relative;flex:1;margin:0;background:var(--surface);border-radius:20px;padding:12px 14px;font-weight:600;font-size:15px;line-height:1.75;min-height:58px;display:flex;align-items:center}
.bubble::before{content:"";position:absolute;inset-inline-start:-6px;top:50%;width:14px;height:14px;background:var(--surface);transform:translateY(-50%) rotate(45deg);border-radius:3px}
.pot .steam path{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;opacity:.45;animation:steam 2.8s ease-in-out infinite}
.pot .steam path:nth-child(2){animation-delay:.45s}
.pot .steam path:nth-child(3){animation-delay:.9s}
.pot.sleepy .steam{display:none}
.pot.excited .steam path{animation-duration:1.3s}
.m-ln{fill:none;stroke:#4A2A3A;stroke-width:3.2;stroke-linecap:round}
.m-z{fill:var(--muted);font:800 13px var(--body)}
@keyframes steam{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-4px);opacity:.7}}
.pot.bounce{animation:bounce .55s ease}
@keyframes bounce{30%{transform:translateY(-10px) scale(1.05,.95)}60%{transform:translateY(0) scale(.96,1.04)}100%{transform:none}}

/* ---------- common blocks ---------- */
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:14px;margin-bottom:12px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 10px}
.card-head h2{margin:0;font:400 20px/1.35 var(--display)}
.card-head .muted{font-size:13.5px;font-weight:600}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 12px}
.h2{margin:0;font:400 28px/1.2 var(--display)}
.nav{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
.nav-mid{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.nav h2{margin:0;font:400 22px/1.35 var(--display);text-align:center}
.round{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line)}
.round svg{width:20px;height:20px;stroke-width:2.4}
.link{color:var(--saffron-text);font-weight:700;font-size:13px;padding:2px 8px;text-decoration:underline;text-underline-offset:4px}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;white-space:nowrap;transition:transform .12s}
.chip small{color:var(--muted);font-weight:700}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip.on small{color:inherit;opacity:.75}
.chip.danger{color:var(--barberry)}
.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.scroller{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 1px}
.scroller::-webkit-scrollbar{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:16px;background:var(--ink);color:var(--surface);font-weight:800;font-size:16px;transition:transform .12s;text-align:center}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.danger{color:var(--barberry)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:999px}
.btn.big{width:100%;padding:15px;font-size:17px;border-radius:18px}
.btn.saffron{background:var(--saffron);color:#3A2633}
.seg{display:flex;background:var(--sunk);border-radius:15px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 6px;border-radius:11px;font-weight:700;font-size:14px;color:var(--muted);text-align:center;white-space:nowrap}
.seg button[aria-checked="true"],.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(60,20,40,.14)}
.field,.search input{display:block;width:100%;font-size:16px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--sunk);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.field:focus,.search input:focus{border-color:var(--saffron)}
textarea.field{resize:vertical;min-height:110px;line-height:1.85}
.field::placeholder,.search input::placeholder{color:var(--muted);opacity:.9}
.search{display:block;margin-bottom:10px}
.ltr{direction:ltr;text-align:left}
input.ltr:placeholder-shown{direction:rtl;text-align:right}
.empty{color:var(--muted);text-align:center;padding:18px 8px;font-size:15px;margin:0;line-height:1.8}
.pill{font-size:12px;font-weight:800;background:var(--saffron);color:#3A2633;border-radius:999px;padding:2px 10px}
.plus{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sunk);color:var(--ink);font-weight:800;font-size:16px;line-height:1}
.x{flex:none;width:38px;height:38px;border-radius:50%;color:var(--muted);font-size:14px;text-align:center}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pop{animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{0%{transform:scale(.9)}100%{transform:none}}
.enter{animation:enter .28s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- auth ---------- */
.auth{max-width:440px;margin:0 auto;padding-top:4vh}
.auth-hero{text-align:center;margin-bottom:18px}
.auth-hero .pot{width:150px;height:138px;margin:0 auto}
.auth-hero h1{margin:4px 0 0;font:400 54px/1.1 var(--display)}
.auth-hero p{margin:6px 0 0;color:var(--muted);font-weight:600}
.auth form{display:grid;gap:10px;margin-top:14px}
.auth-err{min-height:24px;color:var(--barberry);font-weight:700;text-align:center;margin:4px 0 0;font-size:14.5px}
.pick-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pick-row button{width:44px;height:44px;border-radius:50%;font-size:24px;display:grid;place-items:center;background:var(--sunk);transition:transform .15s}
.pick-row button[aria-pressed="true"]{background:var(--s-l);box-shadow:inset 0 0 0 2.5px var(--saffron);transform:scale(1.1)}
.swatches{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 5.5px var(--c)}
.label{font-size:13.5px;font-weight:800;color:var(--muted);margin:6px 2px 2px}

/* ---------- today: calorie rings ---------- */
.rings{display:flex;justify-content:space-around;gap:10px;flex-wrap:wrap}
.ring-card{display:flex;flex-direction:column;align-items:center;gap:2px;width:132px;position:relative;text-align:center}
.ring{width:118px;height:118px;display:block}
.ring .trk{fill:none;stroke:var(--sunk);stroke-width:11}
.ring .arc{fill:none;stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dashoffset:var(--off);animation:ringIn 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes ringIn{from{stroke-dashoffset:var(--C)}}
.ring-mid{position:absolute;top:0;left:0;right:0;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.ring-mid .e{font-size:22px;line-height:1.2}
.ring-mid b{font:400 22px/1.2 var(--display)}
.ring-mid small{font-size:11.5px;color:var(--muted);font-weight:700}
.ring-name{font-weight:800;font-size:14.5px}
.ring-sub{font-size:12.5px;color:var(--muted);font-weight:600}
.ring-sub.over{color:var(--barberry)}
.legend{display:flex;justify-content:center;gap:14px;font-size:12.5px;color:var(--muted);font-weight:600;margin:10px 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px;background:var(--ink)}
.legend i.pl{background:var(--line)}

/* ---------- today: meals ---------- */
.tm-slot{border-radius:18px;padding:8px 10px 6px;margin-bottom:8px}
.tm-head{font-size:13px;font-weight:800;color:var(--muted);margin:0 2px 4px}
.tm-row{display:flex;align-items:center;gap:8px;min-height:46px}
.tm-dish,.tm-empty{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 4px;border-radius:12px}
.tm-dish .emo{font-size:22px;line-height:1;flex:none}
.tm-dish .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-dish small{margin-inline-start:auto;color:var(--muted);font-weight:700;font-size:12.5px;white-space:nowrap}
.tm-empty{color:var(--muted);font-weight:600;font-size:14.5px}
.eat{flex:none;width:34px;height:34px;border-radius:12px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;color:#fff;font-weight:900;font-size:16px;transition:background .15s,border-color .15s}
.eat.on{background:var(--pistachio);border-color:var(--pistachio)}
.eat.ro{width:26px;height:26px;border-radius:9px;font-size:12px;opacity:.75}
.logs{display:grid;gap:6px;margin-bottom:10px}
.log{display:flex;align-items:center;gap:10px;background:var(--sunk);border-radius:14px;padding:4px 4px 4px 12px}
.log .emo{font-size:20px}
.log .nm{flex:1;font-weight:700}
.log small{color:var(--muted);font-weight:700}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick .chip{padding:7px 11px;font-size:13.5px}
.mini-form{display:flex;gap:8px;margin-top:10px}
.mini-form .field{padding:10px 12px}
.mini-form .k{width:96px;flex:none}

/* ---------- today: partner ---------- */
.nudges{display:flex;gap:8px}
.nudge{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:18px;background:var(--sunk);font-weight:800;font-size:13.5px;transition:transform .15s}
.nudge span{font-size:28px;line-height:1}
.nudge:active{transform:scale(.92)}
.invite p{margin:0 2px 10px;line-height:1.8}
.inv-row{display:flex;gap:8px}
.inv-row .field{flex:1;min-width:0}
.me-tag{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;background:var(--sunk);border-radius:14px;padding:8px 12px;font-weight:700}

/* ---------- plan ---------- */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar .seg{flex:none}
.who{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.who::-webkit-scrollbar{display:none}
.who .chip{padding:5px 10px 5px 6px}
.who .chip.all{padding:7px 12px}
.meter-top{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:700;margin-bottom:8px}
.meter-top span:last-child{color:var(--muted);font-weight:600}
.bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--pistachio);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.chart{width:100%;height:auto;display:block;margin-top:12px;overflow:visible}
.chart .bar-r{transform-box:fill-box;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.chart text{font:700 11px var(--body);fill:var(--muted)}
.day{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:12px;margin-bottom:12px}
.day.today{border:2px solid var(--saffron);padding:11.5px}
.day.past{opacity:.62}
.day-head{display:flex;align-items:center;gap:8px;margin:0 4px 8px}
.day-head h3{margin:0;font:400 21px/1.3 var(--display)}
.date{margin-inline-start:auto;color:var(--muted);font-size:14px;font-weight:600}
.kcs{display:flex;gap:6px;margin:-2px 2px 8px;flex-wrap:wrap}
.kc{font-size:12px;font-weight:800;padding:2px 9px 2px 7px;border-radius:999px;background:var(--sunk);box-shadow:inset 0 0 0 1.5px var(--c)}
.slots{display:grid;gap:8px}
.slot{width:100%;display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 12px;border-radius:16px;border:1.5px solid transparent}
.s-b{background:var(--s-b)}.s-l{background:var(--s-l)}.s-n{background:var(--s-n)}.s-d{background:var(--s-d)}
.slot.empty{background:transparent;border:1.5px dashed var(--line)}
.slot-name{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.slot-dish{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;min-width:0}
.slot-dish .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-dish .emo{font-size:23px;line-height:1;flex:none}
.slot.empty .slot-dish{color:var(--muted);font-weight:600;font-size:14.5px}
.ents{margin-inline-start:auto;display:grid;gap:4px;min-width:0;justify-items:end}
.ent{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;min-width:0;max-width:100%}
.ent .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent .emo{font-size:18px;line-height:1;flex:none}
.tbl-wrap{overflow-x:auto;border-radius:22px;border:1.5px solid var(--line);background:var(--surface);margin-bottom:12px}
.tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:340px}
.tbl th,.tbl td{padding:5px 4px;text-align:center;vertical-align:middle;border-bottom:1.5px dashed var(--line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-size:12px;font-weight:800;color:var(--muted);line-height:1.5;padding:9px 4px}
.tbl tbody th{font-weight:400;white-space:nowrap;padding-inline-start:10px;text-align:start}
.tbl tbody th b{display:block;font:400 16px/1.3 var(--display)}
.tbl tbody th small{color:var(--muted);font-size:11.5px;font-weight:700}
.tbl tr.is-today th b{color:var(--saffron-text)}
.tbl tr.is-past{opacity:.6}
.tc{width:100%;min-height:58px;border-radius:14px;padding:4px 3px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px}
.tc-empty{color:var(--muted);font-weight:800;font-size:18px;text-align:center}
.tc-ent{display:flex;flex-direction:column;align-items:center;border-radius:9px;padding:2px 2px 3px;box-shadow:inset 0 -3px 0 var(--c,transparent)}
.tc-ent.shared{box-shadow:none}
.tc-emo{font-size:18px;line-height:1.2}
.tc-nm{font-size:11px;font-weight:700;line-height:1.35;max-width:76px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk{font-size:11.5px;font-weight:800;white-space:nowrap}
.tk span{display:block;color:var(--c)}

/* ---------- shopping ---------- */
.shop-top{font-weight:800;margin:0 2px 2px}
.shop-row{display:flex;align-items:center;gap:4px;border-top:1.5px dashed var(--line)}
.shop-row:first-child{border-top:0}
.shop-main{flex:1;display:flex;align-items:center;gap:12px;padding:11px 2px;min-width:0}
.check{flex:none;width:26px;height:26px;border-radius:9px;border:2px solid var(--line);display:grid;place-items:center;color:transparent;font-weight:900;font-size:15px;transition:background .15s}
.done .check{background:var(--pistachio);border-color:var(--pistachio);color:#fff;animation:pop .4s cubic-bezier(.2,1.5,.4,1)}
.shop-text{flex:1;min-width:0}
.shop-text b{display:block;font-weight:700}
.shop-text small{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done .shop-text b{text-decoration:line-through;color:var(--muted)}
.count{flex:none;font-weight:800;font-size:13px;background:var(--sunk);border-radius:999px;padding:2px 10px}
.add-row{display:flex;gap:8px;margin-top:12px}
.add-row .field{flex:1;min-width:0}

/* ---------- notes board ---------- */
.nc-butter{--nb:#FFF1B8}.nc-rose{--nb:#FFD9E2}.nc-mint{--nb:#D4F2E3}.nc-lilac{--nb:#E6DCFB}.nc-peach{--nb:#FFE0C7}.nc-sky{--nb:#D6EBFF}
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.board .col{display:flex;flex-direction:column;min-width:0}
.note{--r:0deg;display:block;width:100%;margin:10px 0 16px;position:relative;background:var(--nb);color:#3A2633;border-radius:6px 6px 18px 6px;padding:20px 12px 8px;transform:rotate(var(--r));box-shadow:0 1px 1px rgba(0,0,0,.06),0 8px 18px -10px rgba(90,40,60,.45);transition:transform .2s}
.note:active{transform:rotate(var(--r)) scale(.985)}
.note .tape{position:absolute;top:-9px;left:50%;width:62px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.08);border-radius:2px}
.note .pin{position:absolute;top:-12px;right:8px;font-size:20px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.note .sticker{position:absolute;top:6px;left:6px;font-size:28px;transform:rotate(-12deg);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.note.has-st .note-text,.note.has-st .items{padding-left:30px}
.note-text{margin:0 0 8px;white-space:pre-wrap;word-break:break-word;font-weight:600;font-size:15px;line-height:1.75}
.items{display:grid;gap:2px;margin-bottom:6px}
.item{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-weight:600;font-size:14.5px;line-height:1.6;text-align:start}
.item .box{flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;border:2px solid rgba(58,38,51,.35);display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff}
.item.done .box{background:#6FA84F;border-color:#6FA84F;animation:pop .35s cubic-bezier(.2,1.5,.4,1)}
.item.done span:last-child{text-decoration:line-through;opacity:.55}
.note-foot{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:rgba(58,38,51,.6)}
.note-foot .av{box-shadow:inset 0 0 0 2px var(--c),0 0 0 2px var(--nb)}
.note-foot .more{margin-inline-start:auto;width:32px;height:28px;border-radius:10px;font-size:18px;font-weight:900;color:rgba(58,38,51,.7)}
.rx{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.rx-btn{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.45);font-size:14px;transition:transform .15s}
.rx-btn b{font-size:11.5px;font-weight:800}
.rx-btn.on{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(58,38,51,.25)}
.rx-btn:active{transform:scale(1.25)}
.note.land{animation:land .75s cubic-bezier(.2,1.35,.4,1) both}
@keyframes land{0%{opacity:0;transform:translateY(-46px) rotate(calc(var(--r) - 12deg)) scale(.82)}60%{opacity:1;transform:translateY(4px) rotate(calc(var(--r) + 2deg)) scale(1.02)}100%{transform:rotate(var(--r))}}
.note.bye{animation:bye .48s ease-in forwards;pointer-events:none}
@keyframes bye{30%{transform:rotate(calc(var(--r) - 6deg)) scale(.9)}100%{opacity:0;transform:translate(-40px,70px) rotate(calc(var(--r) + 35deg)) scale(.25)}}
.note-edit{background:var(--nb);border-radius:6px 6px 18px 6px;padding:18px 12px 10px;margin-bottom:12px;position:relative;transform:rotate(-1deg);transition:background .25s}
.note-edit textarea{width:100%;min-height:120px;border:0;background:transparent;color:#3A2633;font-weight:600;font-size:16px;line-height:1.8;resize:vertical;outline:none}
.note-edit textarea::placeholder{color:rgba(58,38,51,.5)}
.note-edit .tape{position:absolute;top:-9px;left:50%;width:62px;height:20px;transform:translateX(-50%) rotate(2deg);background:rgba(255,255,255,.6);border-radius:2px}
.stickers{display:flex;flex-wrap:wrap;gap:6px}
.stickers button{width:42px;height:42px;border-radius:12px;font-size:22px;background:var(--sunk);display:grid;place-items:center}
.stickers button[aria-pressed="true"]{background:var(--s-l);box-shadow:inset 0 0 0 2px var(--saffron)}
.nsw{width:36px;height:36px;border-radius:12px;background:var(--nb);box-shadow:inset 0 0 0 1.5px rgba(58,38,51,.12)}
.nsw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}
.fab{position:fixed;z-index:39;left:50%;transform:translateX(-50%);bottom:calc(98px + env(safe-area-inset-bottom,0px));padding:12px 22px;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:800;box-shadow:var(--lift);animation:fabIn .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes fabIn{from{transform:translate(-50%,30px);opacity:0}}
.notes-empty{text-align:center;padding:10px 10px 30px}
.notes-empty .pot{width:120px;height:110px;margin:0 auto}

/* ---------- dishes ---------- */
.row{display:flex;align-items:center;gap:4px;border-top:1.5px dashed var(--line)}
.row:first-child{border-top:0}
.row-main{flex:1;display:flex;align-items:center;gap:12px;padding:10px 2px;min-width:0}
.row-main .emo{font-size:27px;width:38px;text-align:center;flex:none;line-height:1}
.row-text{min-width:0}
.row-text b{display:block;font-weight:700}
.row-text small{display:block;color:var(--muted);font-size:12.5px}
.heart{flex:none;width:44px;height:44px;border-radius:50%;font-size:22px;color:var(--muted);text-align:center;transition:transform .15s}
.heart.on{color:var(--barberry)}
.heart:active{transform:scale(1.25)}

/* ---------- sheets ---------- */
#sheet-root{position:fixed;inset:0;z-index:50;display:none}
#sheet-root.open{display:block}
.backdrop{position:absolute;inset:0;background:rgba(40,18,32,.4);opacity:0;transition:opacity .25s}
#sheet-root.in .backdrop{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;max-height:90%;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-radius:28px 28px 0 0;padding:4px 18px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(104%);transition:transform .32s cubic-bezier(.2,.85,.2,1);box-shadow:var(--lift);outline:none}
#sheet-root.in .sheet{transform:none}
.grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:8px auto 12px}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sheet-head h2{margin:0;flex:1;min-width:0;font:400 23px/1.35 var(--display)}
.sheet-head h2 small{display:block;font:600 13px/1.6 var(--body);color:var(--muted)}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line);font-size:16px;font-weight:800}
.sheet-actions{display:flex;gap:10px;margin-top:16px}
.sheet-actions .btn{flex:1}
.section{margin-bottom:20px}
.section h3{margin:0 2px 10px;font-size:14px;color:var(--muted);font-weight:800}
.for{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.for>span{font-weight:800;color:var(--muted);font-size:14px}
.for-chips{display:flex;gap:6px;flex-wrap:wrap}
.for-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 5px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:14px;opacity:.6;transition:opacity .15s}
.for-chip[aria-pressed="true"]{opacity:1;background:var(--s-l);border-color:var(--saffron)}
.cur{display:grid;gap:6px;margin-bottom:10px}
.cur-row{display:flex;align-items:center;gap:8px;background:var(--sunk);border-radius:14px;padding:6px 8px}
.cur-row .nm{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur-row small{color:var(--muted);font-weight:700;white-space:nowrap}
.stepper{display:flex;align-items:center;gap:2px;background:var(--surface);border-radius:999px;padding:2px}
.stepper button{width:28px;height:28px;border-radius:50%;font-weight:900;font-size:16px}
.stepper b{min-width:30px;text-align:center;font-size:13px}
.group-title{font-size:13px;font-weight:800;color:var(--muted);margin:16px 2px 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.dish-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px;background:var(--sunk);border:1.5px solid transparent;font-weight:700;font-size:14.5px;transition:transform .12s}
.dish-chip:active{transform:scale(.95)}
.dish-chip .emo{font-size:18px;line-height:1}
.dish-chip small{color:var(--muted);font-size:11.5px;font-weight:700}
.dish-chip .fv{color:var(--barberry);font-size:12px}
.dish-chip.on{border-color:var(--saffron);background:var(--s-l)}
.dish-chip.new{background:var(--s-b);border:1.5px dashed var(--saffron)}
.roll{margin:12px 0 2px;padding:16px;border-radius:22px;background:var(--s-b);text-align:center}
.roll-face{font:400 25px/1.4 var(--display);min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.roll-face .emo{display:block;font-size:46px;line-height:1.15}
.roll-face.landed{animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
.roll-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.ed-top{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.emo-btn{flex:none;width:60px;height:60px;border-radius:20px;background:var(--s-b);font-size:33px;line-height:1;display:grid;place-items:center}
.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;background:var(--sunk);border-radius:18px;padding:8px;margin-bottom:10px}
.emoji-grid button{font-size:24px;height:42px;border-radius:12px;text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kcal-row{display:flex;align-items:center;gap:8px;margin:10px 0}
.kcal-row label{font-weight:800;flex:1}
.kcal-row .field{width:120px;flex:none}
.fav-toggle{margin-top:12px;padding:9px 16px;border-radius:999px;background:var(--sunk);font-weight:800}
.fav-toggle.on{background:var(--s-n);color:var(--barberry)}
.member{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1.5px dashed var(--line)}
.member:first-child{border-top:0}
.member b{display:block}
.member small{display:block;color:var(--muted);font-weight:600;font-size:12.5px}
.member .tag{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--muted)}
.member .tag.on{color:var(--tq)}
.reqcard{background:var(--s-n);border-radius:18px;padding:12px;margin-bottom:8px}
.reqcard p{margin:0 0 10px;line-height:1.8;font-weight:600}
.reqcard .actions{margin-top:0}
.suggest{background:var(--s-b);border-radius:16px;padding:12px;margin-top:10px;line-height:1.8}
.suggest b{font:400 22px/1.3 var(--display)}

/* ---------- tab bar, toast, effects ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));pointer-events:none}
.tabs-in{pointer-events:auto;max-width:560px;margin:0 auto;display:flex;gap:2px;background:var(--surface);background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid var(--line);border-radius:28px;padding:6px;box-shadow:var(--lift)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 1px 6px;border-radius:22px;font-size:11.5px;font-weight:800;color:var(--muted);transition:background .2s,color .2s;position:relative}
.tab svg{width:23px;height:23px}
.tab[aria-current="page"]{background:var(--s-l);color:var(--ink)}
.tab .dot{position:absolute;top:5px;inset-inline-end:24%;width:8px;height:8px;border-radius:50%;background:var(--barberry)}
#toast{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:70;background:#3A2633;color:#FFF5F7;border-radius:22px;padding:10px 18px;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700;width:max-content;max-width:calc(100% - 32px);transition:opacity .2s,transform .2s;box-shadow:0 10px 30px rgba(40,10,30,.3);border:1px solid rgba(255,255,255,.1)}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{color:#FFB547;font-weight:800;flex:none}
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:80}
.spark{position:absolute;font-size:22px;animation:spark .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.3);opacity:0}}
.floaty{position:absolute;bottom:-50px;font-size:var(--sz,30px);animation:floaty var(--d,3s) ease-in forwards}
@keyframes floaty{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}50%{transform:translate(var(--x),-55vh) rotate(var(--r))}100%{transform:translate(calc(var(--x) * -.6),-110vh) rotate(calc(var(--r) * -1));opacity:0}}
.confetti{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;animation:fall 1.9s cubic-bezier(.25,.6,.45,1) forwards}
@keyframes fall{to{transform:translate3d(var(--x),110vh,0) rotate(var(--r))}}
.splash{display:grid;place-items:center;min-height:70vh;text-align:center;color:var(--muted);font-weight:700}
.splash .pot{width:120px;height:110px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- push banner ---------- */
#push-banner{position:fixed;bottom:calc(68px + env(safe-area-inset-bottom,0px));inset-inline-start:0;inset-inline-end:0;margin:0 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;box-shadow:var(--lift);z-index:200;animation:slideup .25s ease}
#push-banner span{flex:1;min-width:0;color:var(--ink);line-height:1.4}
#push-banner button{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;flex:none}
#push-banner #push-yes{background:var(--barberry);color:#fff}
#push-banner #push-no{color:var(--muted)}
@keyframes slideup{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-color-scheme: dark){#push-banner{box-shadow:0 10px 30px rgba(0,0,0,.5)}}