@font-face{font-family:'Noto Sans Bengali';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/noto-sans-bengali-bengali.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1,U+11DF0-11DF1}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#F3F5F2;
  --surface:#FFFFFF;
  --surface-2:#F8FAF7;
  --sunk:#E8ECE7;
  --line:#DDE2DC;
  --line-2:#C7CEC6;
  --ink:#16201C;
  --ink-2:#4A5550;
  --ink-3:#5F6A64;
  --brass:#C8962B;
  --brass-ink:#7A5500;
  --brass-wash:#F6ECD3;
  --due:#A85A00;
  --due-wash:#FBEBD3;
  --empty:#B3261E;
  --empty-wash:#FBE3E0;
  --ok:#1E6B45;
  --ok-wash:#DCEFE3;
  --shop:#2346C8;
  --shop-ink:#FFFFFF;
  --shop-wash:color-mix(in srgb,var(--shop) 9%,var(--surface));
  --shop-line:color-mix(in srgb,var(--shop) 30%,var(--surface));
  --cat-tint:#EDE4D3;
  --dog-tint:#E2E8D8;
  --bird-tint:#DCEBE6;
  --fish-tint:#DCE6F2;
  --small-tint:#EFE1E4;

  --bn:'Noto Sans Bengali','Onest',system-ui,sans-serif;
  --lat:'Onest','Noto Sans Bengali',system-ui,sans-serif;

  --t-hero:30px;--l-hero:38px;
  --t-h1:23px;--l-h1:32px;
  --t-h2:18.5px;--l-h2:27px;
  --t-body:15.5px;--l-body:24px;
  --t-small:13.5px;--l-small:20px;
  --t-micro:12px;--l-micro:17px;

  --r-xs:6px;--r-s:10px;--r-m:14px;--r-l:20px;--r-pill:999px;
  --sh-card:0 1px 2px rgba(22,32,28,.06),0 12px 28px -20px rgba(22,32,28,.35);
  --sh-float:0 1px 3px rgba(22,32,28,.08),0 18px 40px -18px rgba(22,32,28,.45);
  --sh-sheet:0 -10px 40px -14px rgba(22,32,28,.4);
  --ease:cubic-bezier(.2,.7,.2,1);
  --gut:16px;
  --max:1180px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (min-width:700px){:root{--gut:24px}}
@media (min-width:900px){:root{--t-hero:40px;--l-hero:50px;--t-h1:26px;--l-h1:35px}}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0F1513;--surface:#161E1B;--surface-2:#1A2320;--sunk:#202A26;--line:#26312C;--line-2:#34413B;
    --ink:#E7EDE9;--ink-2:#AAB6B0;--ink-3:#8D9993;
    --brass:#D7A848;--brass-ink:#E4BE6A;--brass-wash:#2B2415;
    --due:#E8A04A;--due-wash:#2D2113;--empty:#F08A80;--empty-wash:#2E1A18;--ok:#6CC596;--ok-wash:#15281E;
    --cat-tint:#2B2720;--dog-tint:#252A21;--bird-tint:#1E2A26;--fish-tint:#1F2530;--small-tint:#2C2226;
    --sh-card:0 1px 2px rgba(0,0,0,.4),0 12px 28px -20px rgba(0,0,0,.9);
    --sh-float:0 1px 3px rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.95);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0F1513;--surface:#161E1B;--surface-2:#1A2320;--sunk:#202A26;--line:#26312C;--line-2:#34413B;
  --ink:#E7EDE9;--ink-2:#AAB6B0;--ink-3:#8D9993;
  --brass:#D7A848;--brass-ink:#E4BE6A;--brass-wash:#2B2415;
  --due:#E8A04A;--due-wash:#2D2113;--empty:#F08A80;--empty-wash:#2E1A18;--ok:#6CC596;--ok-wash:#15281E;
  --cat-tint:#2B2720;--dog-tint:#252A21;--bird-tint:#1E2A26;--fish-tint:#1F2530;--small-tint:#2C2226;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--bn);font-size:var(--t-body);line-height:var(--l-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--shop);outline-offset:2px;border-radius:var(--r-xs)}
.lat{font-family:var(--lat)}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h1{font-size:var(--t-h1);line-height:var(--l-h1);font-weight:700;text-wrap:balance}
.h2{font-size:var(--t-h2);line-height:var(--l-h2);font-weight:650;text-wrap:balance}
.small{font-size:var(--t-small);line-height:var(--l-small)}
.micro{font-size:var(--t-micro);line-height:var(--l-micro)}
.muted{color:var(--ink-2)}
.meta{color:var(--ink-3);font-size:var(--t-small);line-height:var(--l-small)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico.s{width:18px;height:18px}
.ico.l{width:28px;height:28px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-s);font-weight:600;font-size:15.5px;white-space:nowrap;transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);user-select:none}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--shop);color:var(--shop-ink)}
.btn.primary:hover{background:color-mix(in srgb,var(--shop) 88%,#000)}
.btn.secondary{background:var(--surface);border:1px solid var(--line-2)}
.btn.secondary:hover{border-color:var(--ink-3)}
.btn.quiet{min-height:40px;padding:0 10px;color:var(--shop);font-weight:600}
.btn.quiet:hover{background:var(--shop-wash)}
.btn.block{width:100%}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:var(--r-xs)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.busy{color:transparent!important;position:relative;pointer-events:none}
.btn.busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--shop-ink);border-right-color:transparent;animation:spin .7s linear infinite}
.btn.secondary.busy::after{border-color:var(--ink);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

.field{display:grid;gap:6px;align-content:start}
.field>label,.field>.lbl{font-size:var(--t-small);font-weight:600;color:var(--ink-2)}
.input{width:100%;min-height:48px;padding:11px 14px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--surface);transition:border-color .16s,box-shadow .16s}
textarea.input{min-height:84px;resize:vertical}
.input:focus{outline:none;border-color:var(--shop);box-shadow:0 0 0 3px color-mix(in srgb,var(--shop) 18%,transparent)}
.input:user-invalid{border-color:var(--empty)}
.hint{font-size:var(--t-small);color:var(--ink-3)}
.err{font-size:var(--t-small);color:var(--empty);font-weight:600}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg>label,.chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);font-size:14.5px;font-weight:550;cursor:pointer;transition:all .16s var(--ease)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg>label:has(input:checked),.chip[aria-pressed="true"],.chip.on{border-color:var(--shop);background:var(--shop-wash);color:var(--shop);box-shadow:inset 0 0 0 1px var(--shop)}
.seg>label:has(input:focus-visible){outline:2.5px solid var(--shop);outline-offset:2px}

.tag{--sz:44px;position:relative;width:var(--sz);height:var(--sz);flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:calc(var(--sz)*.4);color:var(--ink);background:var(--cat-tint);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brass);overflow:visible}
.tag img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.tag::before{content:"";position:absolute;top:-9px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:2px solid var(--brass);background:transparent}
.tag.sp-dog{background:var(--dog-tint)}.tag.sp-bird{background:var(--bird-tint)}.tag.sp-fish{background:var(--fish-tint)}.tag.sp-small{background:var(--small-tint)}
.tag.sz-s{--sz:32px;box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px var(--brass)}
.tag.sz-s::before{top:-7px;width:6px;height:6px;margin-left:-3px;border-width:1.5px}
.tag.sz-l{--sz:72px}
.tags{display:flex}
.tags>.tag+.tag{margin-left:-8px}

.bowl{display:grid;gap:6px}
.bowl__track{height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.bowl__fill{height:100%;border-radius:inherit;background:var(--brass);transform-origin:left;animation:fill .9s var(--ease) both}
.bowl.due .bowl__fill{background:var(--due)}
.bowl.out .bowl__fill{background:var(--empty)}
.bowl__label{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-small);line-height:var(--l-small);color:var(--ink-2)}
.bowl__label b{color:var(--ink);font-weight:650}
.bowl.due .bowl__label b{color:var(--due)}
.bowl.out .bowl__label b{color:var(--empty)}
@keyframes fill{from{transform:scaleX(0)}}

.dot{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-small);font-weight:600}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.dot.new{color:var(--shop)}.dot.wait{color:var(--due)}.dot.done{color:var(--ok)}.dot.off{color:var(--ink-3)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}

dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:min(92dvh,900px);border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-sheet);overscroll-behavior:contain;display:flex;flex-direction:column}
dialog.sheet:not([open]){display:none}
dialog.sheet::backdrop{background:rgba(12,18,15,.42);overflow:hidden;overscroll-behavior:contain}
dialog.sheet[open]{animation:up .24s var(--ease)}
@media (min-width:900px){
  dialog.sheet{margin:0 0 0 auto;height:100dvh;max-height:100dvh;max-width:460px;border-radius:var(--r-l) 0 0 var(--r-l)}
  dialog.sheet[open]{animation:side .24s var(--ease)}
  dialog.sheet.center{margin:auto;height:auto;max-height:90dvh;border-radius:var(--r-l)}
  dialog.sheet.center[open]{animation:pop .2s var(--ease)}
}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes side{from{transform:translateX(40px);opacity:0}}
@keyframes pop{from{transform:scale(.97);opacity:0}}
.sheet__head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px 20px;border-bottom:1px solid var(--line)}
.sheet__head .h2{flex:1}
.sheet__close{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.sheet__close:hover{background:var(--sunk)}
.sheet__body{padding:18px 20px;overflow:auto;flex:1;display:grid;gap:16px;align-content:start}
.sheet__foot{padding:12px 20px calc(12px + var(--safe-b));border-top:1px solid var(--line);display:grid;gap:8px}

.toast{position:fixed;left:50%;bottom:calc(88px + var(--safe-b));transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:12px 16px;border-radius:var(--r-s);background:var(--ink);color:var(--ground);font-size:14.5px;box-shadow:var(--sh-float);animation:toast .2s var(--ease)}
.toast button{color:var(--brass);font-weight:700}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}}

.skel{background:linear-gradient(90deg,var(--sunk),var(--surface-2),var(--sunk));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--r-s)}
@keyframes sk{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}