/* ───────── tokeny ───────── */
:root{
  --bg:#EFF2F1;          /* chłodna szarozieleń, nie krem */
  --surface:#FFFFFF;
  --surface-2:#F6F9F8;
  --surface-3:#E8EDEB;
  --line:#D9E1DF;
  --line-soft:#E6ECEA;
  --ink:#121A19;
  --ink-2:#566361;
  --ink-3:#84908D;
  --accent:#14503F;
  --accent-ink:#FFFFFF;
  --accent-soft:#DCEBE4;

  --b:#A8322F;  --b-soft:#F6E4E2;   /* białko   */
  --w:#96681A;  --w-soft:#F6EBD7;   /* węgle    */
  --t:#2A6180;  --t-soft:#DFEAF1;   /* tłuszcze */

  --ok:#1F6B4A;
  --warn:#9A5B12;

  --r-s:6px; --r-m:12px; --r-l:18px;
  --shadow:0 1px 2px rgba(18,26,25,.06), 0 8px 24px -12px rgba(18,26,25,.22);
  --sans:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1514; --surface:#171F1E; --surface-2:#1E2726; --surface-3:#26302E;
    --line:#2B3634; --line-soft:#222B2A;
    --ink:#E7EEEC; --ink-2:#9EACA9; --ink-3:#6D7A77;
    --accent:#7FD6B4; --accent-ink:#07231B; --accent-soft:#1C332C;
    --b:#EF8C83; --b-soft:#33201F;
    --w:#E0B25C; --w-soft:#31281A;
    --t:#7FBBDD; --t-soft:#1A2A33;
    --ok:#6FCFA3; --warn:#DCA85C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1514; --surface:#171F1E; --surface-2:#1E2726; --surface-3:#26302E;
  --line:#2B3634; --line-soft:#222B2A;
  --ink:#E7EEEC; --ink-2:#9EACA9; --ink-3:#6D7A77;
  --accent:#7FD6B4; --accent-ink:#07231B; --accent-soft:#1C332C;
  --b:#EF8C83; --b-soft:#33201F;
  --w:#E0B25C; --w-soft:#31281A;
  --t:#7FBBDD; --t-soft:#1A2A33;
  --ok:#6FCFA3; --warn:#DCA85C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
button,input{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
[hidden]{display:none !important;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

.app{
  max-width:660px;margin-inline:auto;
  min-height:100dvh;
  display:flex;flex-direction:column;
}

/* ───────── nagłówek ───────── */
.top{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-inline:16px;
  padding-top:max(10px, env(safe-area-inset-top));
}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;}
.brand{display:flex;align-items:center;gap:9px;min-width:0;}
.brand-mark{width:15px;height:15px;flex:none;display:block;}
.brand-name{
  font-weight:700;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:"wdth" 112;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.icon-btn{
  border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:5px 12px;font-size:.78rem;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;
}
.icon-btn.close{border-radius:999px;width:34px;height:34px;padding:0;justify-content:center;font-size:.95rem;}

/* pasek posiłków */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px 0 9px;}
.mbtn{
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-m);padding:7px 2px 6px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:border-color .15s, background .15s;
}
.mbtn[aria-current="true"]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink);}
.mbtn-n{font-family:var(--mono);font-size:.8rem;font-weight:600;line-height:1;color:var(--ink-2);}
.mbtn[aria-current="true"] .mbtn-n{color:var(--ink);}
.mbtn-bars{display:flex;gap:2px;}
.mbtn-bars i{width:9px;height:3px;border-radius:2px;background:var(--surface-3);display:block;}
.mbtn-bars i.f-b{background:var(--b);} .mbtn-bars i.f-w{background:var(--w);} .mbtn-bars i.f-t{background:var(--t);}
.mbtn-bars i.p{opacity:.42;}

/* ───────── główna treść ───────── */
main{flex:1;padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;}
.eyebrow{
  margin:0;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;font-variation-settings:"wdth" 108;
}
h1{font-size:1.5rem;margin:.1rem 0 0;font-weight:700;font-variation-settings:"wdth" 108;letter-spacing:-.012em;text-wrap:balance;}
h2{font-size:1.08rem;margin:0;font-weight:700;font-variation-settings:"wdth" 106;letter-spacing:-.008em;}
h3{font-size:.95rem;margin:0;font-weight:650;}
p{margin:0;}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.summary{font-size:.86rem;color:var(--ink-2);text-wrap:pretty;}
.summary b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}

/* ───────── karta slotu ───────── */
.slots{display:flex;flex-direction:column;gap:10px;}
.slot{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;
  display:flex;
}
.slot-rail{width:4px;flex:none;background:var(--tone);}
.slot-in{flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px;}
.slot--b{--tone:var(--b);--tone-soft:var(--b-soft);}
.slot--w{--tone:var(--w);--tone-soft:var(--w-soft);}
.slot--t{--tone:var(--t);--tone-soft:var(--t-soft);}

.slot-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.slot-name{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--tone);font-variation-settings:"wdth" 108;
}
.slot-need{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.slot-need.done{color:var(--ok);}

.pick{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-m);padding:9px 10px 9px 12px;
}
.pick-txt{min-width:0;}
.pick-name{font-size:.93rem;font-weight:550;line-height:1.25;}
.pick-sub{font-size:.72rem;color:var(--ink-3);margin-top:2px;}
.pick-right{display:flex;align-items:center;gap:6px;flex:none;}
.pick-g{font-family:var(--mono);font-size:1.02rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.pick-x{
  width:26px;height:26px;border-radius:999px;flex:none;
  display:grid;place-items:center;color:var(--ink-3);font-size:.8rem;
  border:1px solid var(--line);
}
.pick-x:hover{color:var(--b);border-color:var(--b);}

.add{
  width:100%;text-align:left;
  border:1px dashed var(--line);border-radius:var(--r-m);
  padding:11px 12px;color:var(--ink-2);font-size:.88rem;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface-2);
}
.add:hover{border-color:var(--tone);color:var(--tone);background:var(--tone-soft);}
.add-g{font-family:var(--mono);font-weight:600;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.add:hover .add-g{color:var(--tone);}

.covered{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--tone-soft);border-radius:var(--r-m);padding:10px 12px;
  font-size:.83rem;line-height:1.35;color:var(--ink);
}
.covered .ck{color:var(--tone);font-weight:700;flex:none;font-family:var(--mono);}
.covered b{font-weight:650;}
.covered .undo{margin-left:auto;flex:none;font-size:.74rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;}

/* ───────── plakietki ───────── */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
  padding:2px 7px;border-radius:999px;border:1px solid currentColor;
  white-space:nowrap;
}
.chip--w{color:var(--w);background:var(--w-soft);}
.chip--t{color:var(--t);background:var(--t-soft);}
.chip--auto{color:var(--ink-3);background:var(--surface-2);}
.chip--rzadko{color:var(--warn);background:transparent;}
.chip--wlasny{color:var(--accent);background:var(--accent-soft);}

/* ───────── przyciski akcji ───────── */
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn{
  border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:9px 15px;font-size:.85rem;font-weight:550;color:var(--ink-2);
}
.btn:hover{border-color:var(--ink-3);color:var(--ink);}
.btn--pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn--pri:hover{color:var(--accent-ink);filter:brightness(1.08);}
.btn--wide{flex:1;text-align:center;justify-content:center;}

/* ───────── notki / banery ───────── */
.note{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-m);padding:11px 13px;font-size:.83rem;color:var(--ink-2);line-height:1.45;
  display:flex;gap:10px;align-items:flex-start;
}
.note b{color:var(--ink);font-weight:650;}
.note .x{margin-left:auto;flex:none;color:var(--ink-3);font-size:.9rem;}

/* ───────── widok Dzień ───────── */
.day-list{display:flex;flex-direction:column;gap:8px;}
.day-row{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:11px 13px;display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;
}
.day-row:hover{border-color:var(--ink-3);}
.day-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.day-row-n{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.day-row-state{font-size:.74rem;color:var(--ink-3);}
.day-row-state.ok{color:var(--ok);font-weight:600;}
.day-items{font-size:.85rem;color:var(--ink);line-height:1.4;}
.day-items span{color:var(--ink-3);}
.day-items em{font-style:normal;color:var(--ink-3);}

.tally{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:13px;display:flex;flex-direction:column;gap:10px;
}
.tally-row{display:flex;align-items:center;gap:10px;font-size:.85rem;}
.tally-row .lbl{width:110px;flex:none;color:var(--ink-2);}
.tally-row .val{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto;}
.bar{flex:1;height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;background:var(--tone);}
.tally-row.--b{--tone:var(--b);} .tally-row.--w{--tone:var(--w);} .tally-row.--t{--tone:var(--t);}

/* ───────── listy produktów ───────── */
.grp{
  position:sticky;top:0;z-index:2;
  background:var(--bg);
  padding:14px 0 6px;margin:0;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  font-variation-settings:"wdth" 108;
}
.sheet-body .grp{background:var(--surface);}
.prow{
  width:100%;text-align:left;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:11px 12px;border-radius:var(--r-m);
  border:1px solid var(--line-soft);background:var(--surface);
  margin-bottom:6px;
}
.prow:hover{border-color:var(--tone,var(--ink-3));background:var(--surface-2);}
.prow-txt{min-width:0;display:flex;flex-direction:column;gap:4px;}
.prow-name{font-size:.92rem;font-weight:520;line-height:1.25;}
.prow-tags{display:flex;gap:5px;flex-wrap:wrap;}
.prow-g{font-family:var(--mono);font-size:1.05rem;font-weight:600;flex:none;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.prow-g small{font-size:.66em;font-weight:500;color:var(--ink-3);margin-left:1px;}

.empty{color:var(--ink-3);font-size:.86rem;padding:18px 2px;text-align:center;}

/* ───────── zasady ───────── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:15px 16px;display:flex;flex-direction:column;gap:11px;
}
.card h3{font-variation-settings:"wdth" 106;}
.card p, .card li{font-size:.86rem;color:var(--ink-2);line-height:1.55;}
.card b{color:var(--ink);font-weight:650;}
.card ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:5px;}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding:6px 0;border-bottom:1px dashed var(--line-soft);}
.kv:last-child{border-bottom:0;}
.kv dt{color:var(--ink-2);}
.kv dd{margin:0;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;}
.dl{margin:0;display:flex;flex-direction:column;}
.macro-line{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--surface-3);}
.macro-line i{display:block;height:100%;}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-2);}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend b{width:8px;height:8px;border-radius:2px;display:inline-block;}

.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.86rem;width:100%;text-align:left;}
.switch .tgl{width:42px;height:24px;border-radius:99px;background:var(--surface-3);position:relative;flex:none;transition:background .18s;}
.switch .tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s;}
.switch[aria-pressed="true"] .tgl{background:var(--accent);}
.switch[aria-pressed="true"] .tgl::after{transform:translateX(18px);}

/* ───────── pasek zakładek ───────── */
.tabbar{
  position:sticky;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  padding:9px 4px 11px;font-size:.7rem;font-weight:600;letter-spacing:.03em;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.tab-i{font-size:1rem;line-height:1;}
.tab[aria-selected="true"]{color:var(--ink);}
.tab[aria-selected="true"] .tab-i{color:var(--accent);}

/* ───────── arkusz wyboru ───────── */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;}
.sheet-scrim{position:absolute;inset:0;background:rgba(10,16,15,.5);backdrop-filter:blur(2px);animation:fade .18s ease;}
.sheet{
  position:relative;width:100%;max-width:660px;
  height:min(92dvh, 860px);
  background:var(--surface);
  border-radius:var(--r-l) var(--r-l) 0 0;
  border:1px solid var(--line);border-bottom:0;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -8px 40px -12px rgba(0,0,0,.4);
  animation:up .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes up{from{transform:translateY(14px);opacity:.7}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .sheet,.sheet-scrim{animation:none;} * {transition:none !important;} }

.sheet-top{padding:14px 16px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;flex:none;}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sheet-head h2{font-size:1.22rem;margin-top:1px;}
#szukaj{
  width:100%;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--r-m);padding:10px 12px;font-size:.95rem;
}
#szukaj::placeholder{color:var(--ink-3);}
.porcje{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.porcja{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-s);
  padding:7px 4px;font-size:.78rem;color:var(--ink-2);text-align:center;font-weight:550;
}
.porcja[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 26px;}
.sheet-ctx{
  font-size:.82rem;color:var(--ink-2);background:var(--surface-2);
  border-radius:var(--r-m);padding:9px 12px;line-height:1.4;
  border:1px solid var(--line-soft);
}
.sheet-ctx b{color:var(--ink);font-weight:650;}

/* ───────── toast ───────── */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(74px + env(safe-area-inset-bottom));z-index:80;
  background:var(--ink);color:var(--bg);
  padding:9px 15px;border-radius:999px;font-size:.83rem;font-weight:550;
  box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center;
}

/* ───────── szersze ekrany ───────── */
@media (min-width:760px){
  .app{max-width:900px;}
  main{padding:22px 24px 26px;}
  .top{padding-inline:24px;}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
  .sheet{border-radius:var(--r-l);height:min(84dvh,820px);margin-bottom:28px;border-bottom:1px solid var(--line);}
  .sheet-wrap{align-items:center;}
  .plist{columns:2;column-gap:14px;}
  .plist .prow{break-inside:avoid;}
  .plist .grp{column-span:all;}
}

/* ───────── przełącznik typu dnia ───────── */
.dayswitch{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  background:var(--surface-3);border-radius:999px;padding:3px;
}
.dayswitch button{
  border-radius:999px;padding:8px 6px;font-size:.82rem;font-weight:600;
  color:var(--ink-2);transition:background .15s,color .15s;
}
.dayswitch button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}
.dayswitch button[aria-pressed="true"][data-typ="t"]{color:var(--accent);}
.mono.tren::after{content:" ⚡";}

/* ───────── formularze ───────── */
.forma{display:flex;flex-direction:column;gap:8px;}
.forma input,.forma select{
  width:100%;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--r-m);padding:10px 12px;font-size:.95rem;min-width:0;
}
.forma input::placeholder{color:var(--ink-3);}
.forma .pod{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:2px;}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.trio label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--ink-2);min-width:0;}
.szuk{display:flex;gap:6px;align-items:stretch;}
.szuk input{flex:1;}
.szuk .btn{flex:none;white-space:nowrap;}

/* ───────── tabela porównawcza ───────── */
.tab2{width:100%;border-collapse:collapse;font-size:.86rem;}
.tab2 th{
  text-align:right;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:0 0 7px;
}
.tab2 th:first-child{text-align:left;}
.tab2 td{padding:7px 0;border-top:1px solid var(--line-soft);text-align:right;color:var(--ink);}
.tab2 td:first-child{text-align:left;color:var(--ink-2);}
.tab2 .sum td{border-top:1px solid var(--line);font-weight:650;color:var(--ink-2);}
.cyt{color:var(--ink-3);}
.wzor{
  font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line-soft);
  padding:9px 11px;border-radius:var(--r-m);font-size:.78rem;color:var(--ink);
}
.covered.warn{background:transparent;border:1px dashed var(--warn);color:var(--warn);}
.covered.warn .ck{color:var(--warn);}

/* ───────── Open Food Facts ───────── */
.card.off{border-left:3px solid var(--t);}
.offlist{display:flex;flex-direction:column;gap:0;margin-top:2px;}
.offlist .prow{align-items:flex-start;}
.prow-sub{font-size:.72rem;color:var(--ink-3);font-family:var(--mono);line-height:1.35;}
.prow-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;}
.btn--mini{padding:5px 11px;font-size:.76rem;}
.zrodlo{font-size:.72rem;color:var(--ink-3);padding:2px 2px 0;line-height:1.4;}
.kamera{border-radius:var(--r-m);overflow:hidden;background:#000;aspect-ratio:4/3;max-width:100%;}
.kamera video{width:100%;height:100%;object-fit:cover;display:block;}