/* Bento: Eastward-dusk pixel UI. Dark only. */
:root{
  --night:#16132a; --night2:#211c3b; --panel:#2b2448; --panel2:#362d58; --line:#4a3f72;
  --cream:#fbf0d6; --mut:#b4a9cf; --dim:#7d72a3; --dusk:#e9806a; --dusk-d:#b9533f; --peach:#f7bf91;
  --teal:#5fb3a8; --gold:#f6c94f; --rice:#f4ead2; --salmon:#f08a6c; --tamago:#f6c94f; --edamame:#8fc46a;
  --lacquer:#8e2a32; --ink:#120f20; --bad:#ff7a7a;
  --px:"Pixelify Sans", ui-monospace, monospace;
  --body:"M PLUS Rounded 1c", system-ui, -apple-system, sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--cream);font-family:var(--body);font-size:15px;line-height:1.45;overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,textarea,select{font-size:16px} /* prevents iOS zoom */
:focus-visible{outline:2px solid var(--peach);outline-offset:2px}
.spr{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.px{font-family:var(--px)}
.mut{color:var(--mut)}
.dim{color:var(--dim)}
.num{font-family:var(--px);font-variant-numeric:tabular-nums}
.sky-stars{background-image:radial-gradient(rgba(251,240,214,.55) 1px,transparent 1.5px),radial-gradient(rgba(247,191,145,.4) 1px,transparent 1.5px);background-size:97px 61px,149px 89px;background-position:0 0,40px 30px}

/* ---------- app shell ---------- */
#app{height:100%}
.shell{display:flex;flex-direction:column;height:100%;max-width:560px;margin:0 auto;position:relative;background:var(--night)}
.main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--safe-t) + 8px) 14px 24px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0 10px;font-family:var(--px);font-size:13px;color:var(--mut)}
.topbar h1{font-size:18px;color:var(--cream);margin:0;font-weight:500}
.daynav{display:flex;align-items:center;gap:4px}
.daynav button{background:none;border:0;color:var(--mut);font-family:var(--px);font-size:16px;padding:4px 8px}
.daynav button:disabled{opacity:.25}
.stack{display:grid;gap:12px}
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;justify-content:space-between;align-items:center;gap:8px}
.grow{flex:1;min-width:0}

/* tabs */
.tabs{display:flex;background:var(--ink);border-top:3px solid var(--line);font-family:var(--px);font-size:11px;color:var(--mut);padding-bottom:var(--safe-b);flex:none}
.tabs button{flex:1;display:grid;justify-items:center;gap:2px;padding:8px 0 10px;background:none;border:0;color:inherit;font-family:inherit;font-size:inherit}
.tabs button.on{color:var(--cream);background:var(--panel);box-shadow:inset 0 3px 0 var(--dusk)}
.tabs svg{width:20px;height:20px;shape-rendering:crispEdges}

/* ---------- pixel kit ---------- */
.pbox{background:var(--panel);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--panel2),inset 0 -4px 0 2px rgba(0,0,0,.22);padding:10px 12px;position:relative}
.pbox.flat{box-shadow:inset 0 0 0 2px var(--panel2)}
.pbox.dashed{background:transparent;border:3px dashed var(--line);box-shadow:none}
.dlg{background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--cream),inset 0 0 0 4px #d2a679;padding:10px 12px 12px;position:relative;font-family:var(--px);font-size:15px;line-height:1.35;min-height:52px}
.dlg .tag{position:absolute;top:-14px;left:10px;background:var(--teal);color:var(--cream);border:3px solid var(--ink);padding:0 6px;font-size:11px;line-height:1.5}
.dlg .caret{position:absolute;right:8px;bottom:2px;font-size:10px;animation:blink 1s steps(2) infinite}
.dlg b{color:#b8452f}
.lbl{font-family:var(--px);font-size:11.5px;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.pbtn{font-family:var(--px);background:var(--dusk);color:var(--ink);border:3px solid var(--ink);box-shadow:inset 0 -4px 0 var(--dusk-d),0 3px 0 var(--ink);padding:9px 14px 11px;font-size:16px;text-align:center;display:block;width:100%;transition:transform .05s}
.pbtn:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 var(--dusk-d),0 0 0 var(--ink)}
.pbtn.alt{background:var(--panel2);color:var(--cream);box-shadow:inset 0 -4px 0 #241d3d,0 3px 0 var(--ink)}
.pbtn.teal{background:var(--teal);box-shadow:inset 0 -4px 0 #3c8279,0 3px 0 var(--ink)}
.pbtn.sm{font-size:13px;padding:5px 10px 7px;width:auto;display:inline-block}
.pbtn:disabled{opacity:.5}
.chip{font-family:var(--px);font-size:12px;border:2px solid var(--line);padding:2px 8px;color:var(--cream);background:var(--night2);display:inline-flex;align-items:center;gap:4px}
button.chip{cursor:pointer}
.chip.on{background:var(--teal);color:var(--ink);border-color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--peach);font-family:var(--px);font-size:13px;padding:4px}
.pin{background:var(--night);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--line);padding:8px 10px;font-family:var(--px);color:var(--cream);font-size:16px;width:100%;border-radius:0;-webkit-appearance:none;appearance:none}
.pin::placeholder{color:var(--dim)}
.pin:focus{outline:none;box-shadow:inset 0 0 0 2px var(--peach)}
textarea.pin{font-family:var(--body);font-size:15px;resize:vertical}
.field{display:grid;gap:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pr{font-family:var(--px);font-size:11px;background:var(--gold);color:var(--ink);padding:0 5px;border:2px solid var(--ink);white-space:nowrap}
.err{color:var(--bad);font-size:13px;font-family:var(--px)}
.empty{color:var(--mut);text-align:center;padding:18px 8px;font-size:14px}
hr.dash{border:0;border-top:2px dashed var(--line);margin:4px 0}
@keyframes blink{50%{opacity:0}}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes wobble{0%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}60%{transform:translateY(1px)}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bob{animation:bob 1.4s steps(2) infinite}
.fadein{animation:fadein .35s ease-out both}

/* ---------- bento ---------- */
.bento{background:var(--lacquer);border:3px solid var(--ink);box-shadow:inset 0 0 0 3px #b8434a,inset 0 0 0 5px #5e1820,0 5px 0 var(--ink);padding:9px;display:grid;gap:7px;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:96px 96px}
.cmp{position:relative;background:#241a1c;border:3px solid var(--ink);box-shadow:inset 0 3px 0 rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:5px 7px;font-family:var(--px);color:var(--ink);text-align:left}
button.cmp{cursor:pointer}
.cmp .fill{position:absolute;left:0;right:0;bottom:0;transition:height .9s steps(10)}
.cmp .fill::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:inherit;filter:brightness(1.12)}
.cmp>span,.cmp>b{position:relative;z-index:1}
.cmp>span{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cmp>b{font-weight:700;font-size:17px;line-height:1}
.cmp>b small{font-size:11px;font-weight:400;opacity:.8}
.cmp.top-dark>span{color:var(--cream);opacity:.85}
.cmp.low>b{color:var(--cream)}
.cmp.kcal{grid-row:span 2}
.cmp.kcal>b{font-size:26px}
.cmp.fat{grid-column:2 / span 2}
.cmp.full::after{content:"✦";position:absolute;right:6px;top:4px;color:var(--cream);text-shadow:0 0 0 var(--ink);font-size:14px;animation:blink 1.6s steps(2) infinite;z-index:2}
.cmp.over .fill{box-shadow:0 -6px 0 -3px rgba(244,234,210,.5)}
.cmp.wob{animation:wobble .5s steps(4)}
.f-rice{background:var(--rice);background-image:radial-gradient(#d9ccae 1px,transparent 1.4px);background-size:6px 5px}
.f-salmon{background:var(--salmon);background-image:repeating-linear-gradient(-30deg,transparent 0 7px,#f6b39d 7px 9px)}
.f-tamago{background:var(--tamago);background-image:repeating-linear-gradient(0deg,transparent 0 9px,#e0ad2e 9px 11px)}
.f-edamame{background:var(--edamame);background-image:radial-gradient(#b4dc8c 2px,transparent 2.6px);background-size:10px 10px}
.bento.mini{grid-template-rows:56px 56px;padding:6px;gap:5px}
.bento.mini .cmp>b{font-size:13px}
.bento.mini .cmp.kcal>b{font-size:17px}
.drops{display:flex;gap:4px;font-family:var(--px);font-size:12px}
.drops span{flex:1;text-align:center;padding:3px 0;border:2px solid var(--ink);color:var(--ink)}

/* metrics row */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.metrics button{background:var(--night2);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:6px 4px;text-align:center;font-family:var(--px);color:var(--cream)}
.metrics b{display:block;font-size:15px;font-weight:500}
.metrics span{font-size:10.5px;color:var(--mut)}
.metrics .unset b{color:var(--dim)}

/* lists */
.item{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:8px 0;border-bottom:2px dashed var(--line);align-items:center;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;color:inherit}
.item:last-child{border-bottom:0}
.item b{font-weight:700;font-size:14.5px}
.item small{color:var(--mut);font-size:12px;grid-column:1}
.item .k{font-family:var(--px);color:var(--peach);grid-row:span 2;font-size:15px;text-align:right}
.meal-h{display:flex;justify-content:space-between;align-items:center}
.meal-h h3{margin:0;font-family:var(--px);font-weight:500;font-size:16px}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumbs img{width:64px;height:64px;object-fit:cover;border:3px solid var(--ink);box-shadow:0 0 0 2px var(--line)}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(10,8,20,.6);z-index:40;animation:fadein .2s both}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:92%;overflow-y:auto;background:var(--night2);border-top:3px solid var(--ink);box-shadow:0 -3px 0 var(--line),0 -20px 40px rgba(0,0,0,.5);padding:10px 14px calc(18px + var(--safe-b));z-index:41;display:grid;gap:10px;animation:sheetup .25s steps(5) both}
@keyframes sheetup{from{transform:translateY(40%);opacity:.3}to{transform:none;opacity:1}}
.sheet .grab{width:44px;height:5px;background:var(--line);margin:0 auto}
.sheet h2{margin:0;font-family:var(--px);font-weight:500;font-size:18px}
.src{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.src button{background:var(--panel);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--line);text-align:center;font-family:var(--px);font-size:11px;padding:6px 2px;color:var(--cream)}
.src button.on{background:var(--teal);color:var(--ink)}
.src i{display:block;font-style:normal;font-size:17px;line-height:1.2}
.qty{display:flex;gap:6px;align-items:center}
.qty .pin{flex:1;text-align:center;font-size:20px}
.qty .pbtn{width:52px}
.list-scroll{max-height:44vh;overflow-y:auto}

/* workout */
.ex{display:grid;gap:6px}
.ex .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ex .h b{font-family:var(--px);font-size:16px;font-weight:500}
.sets{display:grid;gap:4px;align-items:center;font-family:var(--px);font-size:14px}
.sets .hd{font-size:10.5px;color:var(--mut);text-transform:uppercase;text-align:center}
.sets input{background:var(--night);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--line);text-align:center;padding:4px 0;width:100%;font-family:var(--px);font-size:16px;color:var(--cream);border-radius:0;-webkit-appearance:none;appearance:none;min-width:0}
.sets input::placeholder{color:#6f6496}
.sets .ok{width:32px;height:30px;border:2px solid var(--ink);background:var(--night);display:grid;place-items:center;font-size:14px;color:var(--mut);padding:0}
.sets .ok.y{background:var(--edamame);color:var(--ink)}
.more{display:flex;gap:5px;flex-wrap:wrap}
.more button{font-family:var(--px);font-size:11.5px;color:var(--mut);border:2px dashed var(--line);padding:1px 7px;background:none}
.more button.open{border-style:solid;border-color:var(--teal);color:var(--teal)}
.restbar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;background:var(--teal);color:var(--ink);border:3px solid var(--ink);padding:5px 10px;font-family:var(--px);z-index:5}
.restbar b{font-size:22px}
.restbar button{background:none;border:0;font-family:var(--px);color:var(--ink);font-size:14px;padding:4px 6px}
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kinds button{background:var(--panel);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--panel2),0 3px 0 var(--ink);padding:10px 2px 8px;font-family:var(--px);font-size:12px;color:var(--cream);display:grid;justify-items:center;gap:4px}

/* us */
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;text-align:center;font-family:var(--px)}
.duel .n{font-size:44px;line-height:1;font-weight:700}
.board{display:grid;gap:6px}
.board div{display:grid;grid-template-columns:28px auto 1fr auto;gap:8px;align-items:center;font-family:var(--px)}
.team{height:18px;border:3px solid var(--ink);background:var(--night);display:flex}
.team i{display:block;height:100%}
.feed{display:grid;gap:6px}
.ev{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;background:var(--night2);border:2px solid var(--ink);padding:8px 10px}
.ev time{font-size:11px;color:var(--dim)}
.react{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.react button{font-size:12px;border:2px solid var(--line);padding:0 6px;background:var(--panel);color:var(--cream);line-height:1.6}
.react button.mine{border-color:var(--teal);background:#2c4a54}
.xpbar{height:10px;border:2px solid var(--ink);background:var(--night)}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--peach))}
.hats{display:flex;gap:6px;flex-wrap:wrap}
.hats button{background:var(--night);border:2px solid var(--line);padding:3px}
.hats button.on{border-color:var(--gold)}
.hats button:disabled{opacity:.3}

/* stats */
.seg{display:flex;font-family:var(--px);font-size:12.5px}
.seg button{flex:1;text-align:center;border:2px solid var(--ink);padding:5px 0;color:var(--mut);background:var(--night2)}
.seg button.on{background:var(--panel2);color:var(--cream);box-shadow:inset 0 -3px 0 var(--dusk)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:2px}
.heat i{aspect-ratio:1;background:#2a2342;border:1px solid var(--ink)}
.heat i.l1{background:#5a3f5a}.heat i.l2{background:#a5574f}.heat i.l3{background:var(--dusk)}.heat i.l4{background:var(--peach)}
.heat i.fut{background:transparent;border-color:transparent}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--px);font-size:10px;fill:var(--mut)}
select.pin{background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}

/* modal / celebration */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(10,8,20,.75);animation:fadein .2s both}
.modal .card{width:100%;max-width:380px;animation:pop .35s steps(6) both}
.victory{background:linear-gradient(#2f43c4,#0d1660);border:3px solid #e9ecff;box-shadow:0 0 0 3px var(--ink);padding:16px;text-align:center;font-family:var(--px);display:grid;gap:10px;justify-items:center}
.victory h2{margin:0;font-size:30px;color:var(--gold);text-shadow:3px 3px 0 var(--ink);font-weight:700}
.victory .gold{color:var(--gold)}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);background:var(--cream);color:var(--ink);border:3px solid var(--ink);padding:8px 14px;font-family:var(--px);z-index:70;animation:pop .3s steps(5) both;max-width:90vw;text-align:center}

/* login / onboarding */
.dusk-bg{background:linear-gradient(#16132a 0%,#2d2150 38%,#7a4060 60%,#e9806a 74%,#f7bf91 80%,#2a1f2d 80.2%);min-height:100%;position:relative;display:flex;flex-direction:column}
.dusk-bg .stars{position:absolute;inset:0 0 45%;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#ffd9a8 1px,transparent 1.5px);background-size:41px 27px,59px 37px;opacity:.7;pointer-events:none}
.logo{font-family:var(--px);font-weight:700;font-size:64px;line-height:1;letter-spacing:2px;color:var(--cream);text-shadow:4px 4px 0 var(--dusk),8px 8px 0 var(--ink);animation:drop .7s steps(7) both}
@keyframes drop{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.ground-strip{background:#2a1f2d;border-top:4px solid var(--ink);padding:16px 14px calc(16px + var(--safe-b))}
.steps-dots{display:flex;gap:6px;justify-content:center}
.steps-dots i{width:10px;height:10px;background:var(--line);border:2px solid var(--ink)}
.steps-dots i.on{background:var(--peach)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:38px;height:38px;border:3px solid var(--ink);box-shadow:0 0 0 2px transparent}
.swatches button.on{box-shadow:0 0 0 3px var(--cream)}

/* wrapped */
.wrapped{position:fixed;inset:0;z-index:80;background:linear-gradient(#16132a,#2d2150 55%,#7a4060);display:flex;flex-direction:column;padding:calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 20px);font-family:var(--px)}
.wrapped .bars{display:flex;gap:4px}
.wrapped .bars i{flex:1;height:4px;background:rgba(251,240,214,.25)}
.wrapped .bars i.on{background:var(--cream)}
.wrapped .slide{flex:1;display:grid;place-content:center;justify-items:center;text-align:center;gap:14px;animation:fadein .4s both}
.wrapped .big{font-size:76px;line-height:.9;color:var(--peach);text-shadow:4px 4px 0 var(--ink)}
.wrapped .t{font-size:24px;max-width:320px}
.wrapped .s{font-size:16px;color:var(--mut);max-width:320px}

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