/* © 2026 Németh András. Minden jog fenntartva. */
/* ---- betűtípusok: Montserrat (címek) + Inter (szöveg), helyben tárolva (fonts/, SIL OFL licenc), változtatható vastagsággal ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations');
  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; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- színek: világos, pozitív design (lásd design-javaslat.html). Alapból mindig világos;
   a sötét változat a :root[data-theme="dark"] alatt van (később az Én → Megjelenés kapcsolója állítja). ---- */
:root {
  --font: 'Inter', system-ui, 'Segoe UI', sans-serif; --font-head: 'Montserrat', 'Inter', system-ui, sans-serif;
  --radius: 18px; --card-shadow: 0 6px 22px rgba(31, 42, 36, .07); --shadow-sm: var(--card-shadow);
  /* 🎨 PeliCook arculat (2026-10-12, szin-javaslat.html — Andras: „kifejezetten jó”): narancs-fekete.
     A FEKETE a szöveg és a fő gombok színe (--btn), a NARANCS a kiemelés: --brand a kitöltésekre (gyűrű, csík, ＋, kijelölés),
     --accent az égetett narancs SZÖVEGRE / keretre (fehér alapon is olvasható). A ZÖLD (--green) csak a „kész / rendben” jele,
     a PIROS (--warn) a figyelmeztetés — a narancs már a márkáé. A régi zöld téma: git-történet (2026-10-12 előtt). */
  /* (2026-10-31, kontraszt-ellenőrzés) --muted #7A6E64 → #6B6057 és --accent #B45309 → #A14A07: a színes / barack hátterű
     csempéken és csipeszeken épp a 4,5:1-es olvashatósági határ alatt voltak; fehér alapon alig látszik a különbség */
  --bg: #FFF8F0; --card: #FFFFFF; --text: #17130F; --muted: #6B6057; --line: #F1E6D8; --field: #FFFFFF;
  --accent: #A14A07; --accent-soft: #FFEFD6; --green: #2FA36B; --green-soft: #DDF3E6; --green-ink: #1E7A4E;
  --brand: #F59E0B; --brand-soft: #FCE9CC; --btn: #17130F; --btn-ink: #FFFFFF;
  --warn: #C62828; --warn-soft: #FDECEC; --done: #A59C93;                  /* piros: figyelem */
  --peach: #FF8A5B; --peach-btn: #E2622F; --sun: #F5B82E; --sun-soft: #FFF5D9; --sun-ink: #8A6200;
  --berry: #7C6CF2; --berry-soft: #EFEDFF; --berry-ink: #5446C9; --sky: #3BA7E0; --sky-soft: #E5F4FC; --peach-soft: #FFEEE5;
  --shadow: 0 18px 50px rgba(23, 19, 15, .14); --card-shadow: 0 6px 22px rgba(23, 19, 15, .07);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121110; --card: #1E1C1A; --text: #F5EFE7; --muted: #A39A90; --line: #2E2A26; --field: #1A1816;
  --accent: #FBBF4A; --accent-soft: #3A2A12; --green: #4CC38A; --green-soft: #1C3328; --green-ink: #7FD1A3;
  --brand: #F59E0B; --brand-soft: #3A2A12; --btn: #F59E0B; --btn-ink: #17130F;
  --warn: #FF8A80; --warn-soft: #3A1B1B; --done: #7a817c;
  --sun-soft: #3a3016; --sun-ink: #f0c860; --berry-soft: #2a2747; --berry-ink: #b7adff; --sky-soft: #1b3240; --peach-soft: #3d2a1e;
  --card-shadow: 0 6px 22px rgba(0, 0, 0, .35); --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* 🎨 Témák (2026-11-07, Andras; vászon: https://claude.ai/artifact/AghpJdtt6WZkkNgp7zdwbA). html[data-color], üres = narancs; public/themes.js, p.colorTheme.
   A jelentéssel bíró színek NEM változnak: --warn (allergén), --green (kész), --ai (AI). A --brand kitöltésen sötét szöveg áll, ezért elég világos legyen.
   --cf-*: a mindig sötét főzés nézet kiemelő színei; --brand-rgb: áttetsző brand-kitöltésekhez. */
:root { --brand-rgb: 245, 158, 11; --cf-rgb: 245, 158, 11; --cf-hi: #FFC56B; --cf-hi2: #FFE2B0; }
:root[data-color="ocean"] { --bg: #F3F8F9; --line: #DCE9EC; --muted: #56676B; --accent: #11707C; --accent-soft: #DDF1F3; --brand: #1F9AA8; --brand-soft: #D3ECEF; --btn: #102226; --text: #10191B;
  --sun-soft: #DDF1F3; --sun-ink: #11616B; --peach-soft: #E4F2F4; --brand-rgb: 31, 154, 168; --cf-rgb: 60, 180, 194; --cf-hi: #7FDCE8; --cf-hi2: #C9F0F5; }
:root[data-color="sage"] { --bg: #F7F7EF; --line: #E6E6D4; --muted: #65675A; --accent: #5C6B1F; --accent-soft: #EEF1D6; --brand: #8A9A3B; --brand-soft: #E6EBC6; --btn: #1F2212; --text: #1A1C10;
  --sun-soft: #EEF1D6; --sun-ink: #515E1A; --peach-soft: #F1F3DF; --brand-rgb: 138, 154, 59; --cf-rgb: 166, 183, 80; --cf-hi: #CBDB80; --cf-hi2: #E8F0BE; }
:root[data-color="rose"] { --bg: #FDF6F5; --line: #F3E3E0; --muted: #73595E; --accent: #A63D58; --accent-soft: #FBE6EA; --brand: #D9738A; --brand-soft: #F8DAE1; --btn: #2A161B; --text: #1F1215;
  --sun-soft: #FBE6EA; --sun-ink: #93324B; --peach-soft: #FCECEF; --brand-rgb: 217, 115, 138; --cf-rgb: 229, 140, 160; --cf-hi: #F7B4C4; --cf-hi2: #FBDDE4; }
:root[data-color="graphite"] { --bg: #F6F5F3; --line: #E6E3DE; --muted: #6A665F; --accent: #3A3733; --accent-soft: #ECE9E4; --brand: #8A857D; --brand-soft: #E4E1DB; --btn: #17130F;
  --sun-soft: #ECE9E4; --sun-ink: #3A3733; --peach-soft: #EFEDE9; --brand-rgb: 138, 133, 125; --cf-rgb: 216, 212, 205; --cf-hi: #E6E3DD; --cf-hi2: #F2F0EC; }
:root[data-theme="dark"][data-color="ocean"] { --bg: #0F1617; --card: #182224; --text: #F0F5F5; --muted: #9AA9AC; --line: #263335; --field: #141D1F; --accent: #5CC8D6; --accent-soft: #123036; --brand: #3CB4C2; --brand-soft: #123036; --btn: #3CB4C2; --btn-ink: #0E1B1E;
  --sun-soft: #14292D; --sun-ink: #8FDCE6; --peach-soft: #16282B; --brand-rgb: 60, 180, 194; }
:root[data-theme="dark"][data-color="sage"] { --bg: #131410; --card: #1E1F19; --text: #F3F3E8; --muted: #A3A595; --line: #2D2F25; --field: #191A14; --accent: #BECF6A; --accent-soft: #2B3015; --brand: #A6B750; --brand-soft: #2B3015; --btn: #A6B750; --btn-ink: #17190D;
  --sun-soft: #272B14; --sun-ink: #CBDB80; --peach-soft: #282B1A; --brand-rgb: 166, 183, 80; }
:root[data-theme="dark"][data-color="rose"] { --bg: #161112; --card: #211A1C; --text: #F7EEF0; --muted: #ADA0A4; --line: #33292B; --field: #1B1517; --accent: #F0A3B4; --accent-soft: #3A1F27; --brand: #E58CA0; --brand-soft: #3A1F27; --btn: #E58CA0; --btn-ink: #2A161B;
  --sun-soft: #332025; --sun-ink: #F3B5C3; --peach-soft: #33232A; --brand-rgb: 229, 140, 160; }
:root[data-theme="dark"][data-color="graphite"] { --bg: #121212; --card: #1D1D1D; --text: #F2F2F0; --muted: #A3A3A0; --line: #2C2C2C; --field: #181818; --accent: #E6E3DD; --accent-soft: #2E2E2C; --brand: #D8D4CD; --brand-soft: #2E2E2C; --btn: #D8D4CD; --btn-ink: #17130F;
  --sun-soft: #262625; --sun-ink: #E6E3DD; --peach-soft: #282826; --brand-rgb: 216, 212, 205; }
.cf { --brand: rgb(var(--cf-rgb)); --brand-rgb: var(--cf-rgb); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, legend, .eyebrow, .tabs a, .weeknav strong { font-family: var(--font-head); letter-spacing: -.005em; }
h2, h3 { font-weight: 700; }
h4, h5 { font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }

input, select, button, textarea { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { cursor: pointer; transition: background-color .15s, border-color .15s, filter .15s; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.link { background: none; border: none; padding: 2px 4px; color: var(--accent); }
button.link:hover { text-decoration: underline; }
button.small, .link.small { font-size: .8rem; padding: 2px 6px; }
button.danger { color: var(--warn); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
/* saját jelölőnégyzet (a natív kék helyett) — ugyanaz a pipa, mint a .jt-chk-é, kisebben */
.chk input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; border-radius: 8px;
  border: 2px solid var(--line); background: var(--card); cursor: pointer; }
.chk input[type=checkbox]:checked { border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.chk input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* fejléc + fülek */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 16px; }
.top h1 { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.top h1 .logo { width: 28px; height: 28px; }
.top h1 .wm { display: block; height: 30px; width: auto; } /* ✍️ Wukie wordmark (2026-11-07): filctoll, 10 fokkal dőlve */
@media (max-width: 440px) { header.top { column-gap: 4px; } .top h1 .wm { height: 24px; } } /* telefonon egy sorba férjen a sok gombbal */
@media (max-width: 370px) { .top h1 .wm { height: 20px; } header.top #ai-btn, header.top #help-btn, header.top #bug-btn, header.top #undo-top, header.top #fb-btn { width: 38px !important; min-width: 38px !important; padding: 0 !important; } }
/* ↶ 2026-11-07: öt gomb is kifér egy sorba, a méretük akkor sem változik, ha a ↶ megjelenik; a felső sáv telefonon sosem törik két sorba */
@media (max-width: 700px) { header.top { flex-wrap: nowrap; } header.top h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; } header.top .fb-btn, header.top .hh-pill { flex: none; } }
@media (min-width: 371px) and (max-width: 400px) { header.top #ai-btn, header.top #help-btn, header.top #bug-btn, header.top #undo-top, header.top #fb-btn { width: 40px !important; min-width: 40px !important; padding: 0 !important; } }
/* a felirat telefonon nagyobb (2026-11-07, Andras: kisebbnek tűnt a gomboknál); ahol szűk, ott a rés és a gomb enged egy keveset */
/* (a felirat 2,75-ször olyan széles, mint magas; a méretek a ↶ gombbal együtt is kiférnek. Ha több tag miatt mégsem, a felirat zsugorodik, nem vágódik le) */
@media (max-width: 700px) { .top h1 .wm { height: 36px; max-width: 100%; flex: 0 1 auto; min-width: 0; } .top h1 .home-link { min-width: 0; } }
@media (max-width: 429px) { header.top { column-gap: 3px; } }
@media (min-width: 390px) and (max-width: 429px) { .top h1 .wm { height: 32px; } header.top #ai-btn, header.top #help-btn, header.top #bug-btn, header.top #undo-top, header.top #fb-btn { width: 40px !important; min-width: 40px !important; padding: 0 !important; } }
@media (min-width: 375px) and (max-width: 389px) { .top h1 .wm { height: 28px; } }
@media (min-width: 371px) and (max-width: 389px) { header.top #ai-btn, header.top #help-btn, header.top #bug-btn, header.top #undo-top, header.top #fb-btn { width: 39px !important; min-width: 39px !important; } }
@media (min-width: 360px) and (max-width: 374px) { .top h1 .wm { height: 25px; } }
@media (max-width: 359px) { .top h1 .wm { height: 20px; } }
@media (max-width: 340px) { html:has(#undo-top:not([hidden])) header.top #bug-btn { display: none; } }
.top h1 .home-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; } /* a logó = kezdőlap */
.tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
.tabs a { padding: 6px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.tabs a:hover { color: var(--text); }
.tabs a.active { background: var(--accent-soft); color: var(--accent); }
.tabs .ti { font-size: 1rem; line-height: 1; display: inline-grid; place-items: center; }
/* ✨ vonalas ikonok a fülsorban és a felső sáv gombjain (2026-10-26) */
.tabs .ti .ic { width: 24px; height: 24px; }
.tabs a.active .ti .ic { color: var(--accent); stroke-width: 1.9; }
.fb-btn .ic { width: 21px; height: 21px; flex: none; }
.tabs .ts { display: none; } /* rövid felirat: csak az alsó fülsorban */

/* telefon: alsó fülsor ikonokkal, a fejlécben csak a név és az állapot */
@media (max-width: 700px) {
  .top { padding: 8px 12px; }
  .top h1 { font-size: 1.05rem; }
  /* (telefonon az app.js a <body> aljára teszi — a ragadós fejlécben a 10-es rétegbe zárva maradt, iPhone-on a tartalom alá csúszott) */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; justify-content: space-around; gap: 0; overflow: visible;
    background: var(--card); border-top: 1px solid var(--line); padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); }
  .tabs a { flex: 1 1 0; flex-direction: column; gap: 1px; padding: 4px 0; border-radius: 10px; font-size: .64rem; min-width: 0; }
  .tabs .ti { font-size: 1.25rem; }
  .tabs .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tabs a:has(.ts) .tl { display: none; }
  .tabs .ts { display: inline; }
  body > main { padding: 12px 12px calc(80px + env(safe-area-inset-bottom)); } /* a fülsor ne takarja a lista alját */
  /* ⬇️ lefelé görgetve a fülsor lecsúszik, felfelé visszajön (scroll.js initTabsAutoHide, 2026-10-27); a lista lebegő gombjai vele */
  /* (Andras: „lefelé kicsúszva tűnjön el, becsúszva jelenjen meg”) látható csúszás: hosszabb, lágy lassulás mindkét irányban */
  body > .tabs { transition: transform .38s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
  html.tabs-away body > .tabs { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); } /* (a fülsor lebeg, alatta hézag) */
  .li-float { transition: bottom .26s var(--ease-out, ease), transform .2s; }
  html.tabs-away .li-float { bottom: calc(24px + env(safe-area-inset-bottom)); }
  html.tabs-away .shop-actions { bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* a visszavonás-sáv és az időzítők az alsó fülsor fölött (body-val erősebb, mint a későbbi alap-szabály) */
  body .undo, body .timer-dock { bottom: calc(72px + env(safe-area-inset-bottom)); }
  body .undo { max-width: calc(100vw - 24px); }
  /* iPhone: 16 px alatti betűs mezőre fókuszálva ránagyít az oldalra → telefonon minden mező legalább 16 px */
  /* (!important: több helyen erősebb szabály kicsinyíti a mezőket — telefonon ennek mindenhol nyernie kell) */
  input, select, textarea { font-size: 16px !important; }
}
/* telepített appként (önálló ablakban) a fejléc ne lógjon az értesítési sáv alá */
@media (display-mode: standalone) { .top { padding-top: max(10px, env(safe-area-inset-top)); } }
/* állapotüzenet: alul felbukkanó kis buborék, pár másodperc múlva eltűnik (nem tolja le az oldalt) */
/* (2026-10-31, Andras: az Admin mód „Frissítést kérek” gombjánál nem látszott a visszajelzés) a buborék minden lap és
   teljes képernyős oldal (.wz 200–210, alsó lapok 50) fölött — eddig 45-ön alattuk maradt */
.status { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); font-size: .85rem; font-weight: 600; padding: 8px 16px; border-radius: 10px; box-shadow: var(--shadow);
  max-width: calc(100vw - 32px); width: max-content; text-align: center; transition: opacity .2s, transform .25s var(--ease-out, ease); }
.status.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.status.error { background: var(--warn); color: #fff; border-radius: 16px; }
/* ha a visszavonás-sáv is látszik, a buborék fölé kerül */
body:has(.undo:not([hidden])) .status { margin-bottom: 56px; }

main { max-width: 1500px; margin: 0 auto; padding: 16px; }
.view { display: none; }
.view.active { display: block; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.toolbar input[type=search] { min-width: 240px; flex: 0 1 320px; }

/* készlet-jelvények */
.avail { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.avail.ok { background: var(--accent-soft); color: var(--accent); }
.avail.miss { background: var(--warn-soft); color: var(--warn); }
.avail.done { background: var(--line); color: var(--muted); }

/* ---- Tervezés: hét ---- */
.weeknav { display: flex; align-items: center; gap: 8px; }
.weeknav strong { min-width: 150px; text-align: center; }
.week-scroll { overflow-x: auto; padding-bottom: 6px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(172px, 1fr)); gap: 10px; min-width: 1240px; }
.day { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 10px 6px; display: flex; flex-direction: column; }
.day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.day-head { height: 78px; padding: 10px 0 6px; border-bottom: 1px solid var(--line); overflow: hidden; }
.day-head h2 { font-size: .95rem; margin: 0; display: flex; justify-content: space-between; gap: 6px; }
.day-head .dname::first-letter { text-transform: uppercase; }
.day-head .ddate { color: var(--muted); font-weight: 400; font-size: .85rem; }
.day-head .totals { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-head .link { padding: 0; }

.cell { height: 118px; padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cell:last-child { border-bottom: none; }
.cell-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cell-add { border-style: dashed; color: var(--muted); background: transparent; text-align: left; }
.cell-add:hover { color: var(--accent); border-color: var(--accent); }
.cell-add-row { display: flex; gap: 4px; }
.cell-add-row .cell-add { flex: 1; }
.cell-rand { border-style: dashed; background: transparent; padding: 4px 8px; }
.cell-rand:hover { border-color: var(--accent); }
.cell .link.small { align-self: flex-start; padding: 0; }
.cell-name { background: none; border: none; padding: 0; text-align: left; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.cell-name:hover { color: var(--accent); }
.cell-meta { font-size: .78rem; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cell-actions { display: flex; gap: 10px; margin-top: auto; }
.cell.prepared .cell-name { color: var(--done); }

@media (max-width: 760px) {
  .week { grid-template-columns: 1fr; min-width: 0; }
  .day-head { height: auto; }
  .cell { height: auto; min-height: 84px; }
}

/* ---- választó ---- */
.picker { position: fixed; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.picker-top { padding: 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.picker-top input[type=search] { width: 100%; }
.picker-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.picker-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; border-right: 1px solid var(--line); }
.picker-list .group { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 2px; }
.picker-list .opt { padding: 6px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.picker-list .opt.active { background: var(--accent-soft); }
.picker-list .opt.selected .opt-name::before { content: "● "; color: var(--accent); }
.picker-list .empty { padding: 12px; color: var(--muted); }
.opt-name { font-weight: 500; }
.opt-meta { font-size: .75rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.picker-detail { padding: 12px; overflow-y: auto; font-size: .88rem; }
.picker-detail h3 { margin: 0 0 6px; font-size: 1rem; }
.picker.sheet { left: 0; right: 0; bottom: 0; top: 12vh; border-radius: 14px 14px 0 0; }
.picker.sheet .picker-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.picker.sheet .picker-list { border-right: none; border-bottom: 1px solid var(--line); }
.picker.sheet .picker-detail { max-height: 34vh; }

/* recept-összefoglaló */
.macros { color: var(--muted); margin: 6px 0; font-size: .85rem; }
.ings { list-style: none; padding: 0; margin: 6px 0; }
.ing { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.ing.spice { color: var(--muted); font-style: italic; }
.ing-ok { color: var(--accent); }
.ing-miss { color: var(--warn); font-size: .8rem; white-space: nowrap; }

/* ---- felugró ablak (recept, recept-űrlap): gépen középen, telefonon alulról felcsúszó teljes képernyős lap ---- */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; display: none; }
.backdrop.open { display: block; }
.drawer { position: fixed; left: 50%; top: 50%; width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  background: var(--card); z-index: 21; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translate(-50%, -46%); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.drawer.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
@media (max-width: 600px) {
  .drawer { left: 0; top: 0; width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; transform: translateY(100%); transition: transform .2s ease, visibility .2s; opacity: 1; }
  .drawer.open { transform: none; }
  /* főképernyős appban az ablak teteje az állapotsor (óra, akku) alá esik, ahol az iPhone elnyeli a koppintást
     → a × az állapotsor alá kerül (Andras: a × nem zárt be) */
  html:not(.has-dock) .drawer-top { padding-top: max(6px, env(safe-area-inset-top)); }
}
/* nyitott ablaknál a háttér (az oldal) nem görgethető */
/* nyitott ablaknál a háttér nem görög — a tiltás a html-en, a görgetősáv helye megmarad (különben eltűnik, és a háttér
   oldalra csúszik, bezáráskor vissza — 2026-10-26) */
html { scrollbar-gutter: stable; }
html:has(.drawer.open) { overflow: hidden; }
/* felső sáv: rögzített, tömör háttér (a tartalom alatta görög el, alján finom áttűnéssel) — ez a lehúzási sáv is (drawer.js, 72 px) */
.drawer-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; align-items: center;
  min-height: 52px; padding: 6px 8px; background: var(--card); }
.drawer-top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
  background: linear-gradient(var(--card), transparent); }
.drawer-close { font-size: 1.3rem; line-height: 1; padding: 4px 10px; }
/* 📱 telefonon nincs ragadós elem a görgethető ablakban (iPhone: rossz helyre vette a koppintást — Andras, 2026-10-11):
   a felső sáv a tartalommal görög, a × egy önálló, rögzített kerek gomb (drawer.js `floatX`), fölötte az állapotsor sávja */
.drawer-x, .drawer-cap, .drawer-fgrip, .drawer-band, .drawer-ftitle { display: none; }
@media (max-width: 600px) {
  #drawer .drawer-top { position: relative; }
  #drawer .drawer-top::after { display: none; }
  #drawer .drawer-close { visibility: hidden; }
  body.drawer-on .drawer-x { display: grid; place-items: center; position: fixed; z-index: 23; right: 12px; top: calc(var(--top-off, 0px) + max(8px, env(safe-area-inset-top)) + 6px);
    width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--card) !important; color: var(--text);
    box-shadow: 0 4px 16px rgba(31, 42, 36, .18); animation: fadeIn .25s ease both; }
  .drawer-x svg { width: 20px; height: 20px; }
  .drawer-x:active { transform: scale(.92); }
  body.drawer-on .drawer-cap { display: block; position: fixed; z-index: 23; left: 0; right: 0; top: var(--top-off, 0px); height: env(safe-area-inset-top); background: var(--card); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* a felugró kis ablakok (modal) az × fölött vannak */
.drawer-body { padding: 6px 20px 40px; } /* felül annyi hely, hogy az áttűnés görgetés nélkül ne takarjon */
.drawer h2 { margin: 2px 0 8px; font-size: 1.25rem; }
.drawer h4 { margin: 18px 0 6px; }
.eyebrow { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.steps { color: var(--muted); }
/* recept alján: betervezés összefoglaló + gomb; a naptár külön ablakban (openPlanSheet) */
.plan-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--accent-soft); }
.plan-card-t { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-on { color: var(--accent); font-weight: 600; }
.plan-on::first-letter { text-transform: uppercase; }
.plan-card .primary { min-height: 44px; border-radius: 10px; padding: 0 18px; }
.pl-modal { width: min(460px, 100%); }
.pl-sub { margin: -6px 0 0; }
.pl-nav { display: flex; align-items: center; justify-content: space-between; }
.pl-nav button { width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 1.2rem; }
.pl-wl { margin: 4px 2px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pl-tile { display: flex !important; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 !important; min-height: 66px; border-radius: 14px !important;
  border: 2px dashed var(--line) !important; background: transparent !important; color: var(--muted); font-size: .7rem; font-weight: 700; }
.pl-tile b { font: 800 1.05rem var(--font-head); color: var(--text); }
.pl-ic { font-style: normal; font-size: .9rem; line-height: 1.1; }
.pl-tile.other { border-style: solid !important; border-color: var(--line) !important; background: var(--card) !important; }
.pl-tile.other .pl-ic { color: var(--peach); }
.pl-tile.same { border: 2px solid var(--green) !important; background: var(--green) !important; color: #e9fff3; }
.pl-tile.same b { color: #fff; }
.pl-tile.today:not(.same) { border-color: var(--accent) !important; }
.pl-tile.past { opacity: .5; }
.pl-tile.asking { box-shadow: 0 0 0 3px var(--peach); }
.pl-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--peach-soft); border-radius: 12px; padding: 10px 12px; }
.pl-ask > .small { flex: 1 1 200px; }
.pl-ask-b { display: flex; gap: 6px; }
.pl-ask-b button { min-height: 40px; border-radius: 10px !important; }
.pl-key { margin: 0; }
.pl-k { display: inline-block; min-width: 18px; text-align: center; border-radius: 6px; font-weight: 800; }
.pl-k.same { background: var(--green-ink); color: #fff; } .pl-k.other { color: var(--accent); } /* (2026-11-02, átnézés: a halvány barack pötty 3,5:1 volt) */ .pl-k.empty { border: 1px dashed var(--line); }

/* saját görgetősáv mindenhol (nem a rendszeré): vékony, lekerekített, az app színeivel */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 70%, transparent); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* ---- Receptek ---- */
.recipe-list { display: flex; flex-direction: column; gap: 8px; }
.rec { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; gap: 16px; justify-content: space-between; }
.rec h3 { margin: 0; font-size: 1rem; }
.rec-sub { font-size: .8rem; color: var(--muted); }
.rec-ings { font-size: .82rem; margin-top: 4px; }
.rec-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.rec-btns { display: flex; gap: 6px; }
@media (max-width: 600px) {
  .rec { flex-direction: column; }
  .rec-side { flex-direction: row; align-items: center; }
  .toolbar input[type=search] { min-width: 0; flex: 1 1 100%; }
}

/* ---- Itthon van ---- */
.stock-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 6px 22px; }
.stock-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.stock-row.have .stock-name label { font-weight: 600; }
.stock-name { display: flex; flex-direction: column; }
.stock-sub { font-size: .72rem; color: var(--muted); }
.stock-sub .pg { width: 46px; padding: 0 4px; font-size: .72rem; text-align: right; }
.stock-input { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.stock-input input { width: 80px; text-align: right; }
.stock-tools { display: flex; align-items: center; gap: 8px; min-width: 130px; justify-content: flex-end; }
.staple-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.staple-toggle button { border: none; border-radius: 0; padding: 4px 10px; font-size: .82rem; color: var(--muted); }
.staple-toggle button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.staple-toggle button.on.off { background: var(--warn-soft); color: var(--warn); }

/* ---- Főzés ---- */
.cook-list { display: flex; flex-direction: column; gap: 10px; }
.cook { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.cook.open { border-color: var(--accent); }
.cook-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cook-title { flex: 1 1 220px; display: flex; flex-direction: column; }
.cook-title h3 { margin: 0; font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--muted); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip input { margin: 0; }
.cook-body { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.cook-ings { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cook-ings th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.cook-ings td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.ci-name { font-weight: 600; }
.ci-need { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ci-ctrl { white-space: nowrap; }
.left-input { margin-left: 6px; color: var(--muted); }
.left-input input { width: 70px; text-align: right; padding: 3px 6px; }
.cook-body h4 { margin: 12px 0 4px; }
.cook-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.cook-done { margin-top: 22px; }
.cook-done h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cook-done ul { list-style: none; padding: 0; margin: 0; }
.cook-done li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.cook-done li span::first-letter { text-transform: uppercase; }
@media (max-width: 700px) {
  .cook-ings thead { display: none; }
  .cook-ings tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--line); }
  .cook-ings td { border: none; padding: 0; }
  .ci-have, .ci-ctrl { grid-column: 1 / -1; }
  .ci-ctrl { white-space: normal; }
}

/* ---- Profil ---- */
.profile-form { max-width: 820px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.pf-grid .field input, .pf-grid .field select { font-size: .95rem; color: var(--text); }
.pf-grid .wide { grid-column: span 2; }
.pf-result { margin-top: 14px; }
.calc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0 0 8px; }
.calc div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.calc div.hl { border-color: var(--accent); background: var(--accent-soft); }
.calc dt { font-size: .75rem; color: var(--muted); }
.calc dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.warn { color: var(--warn); font-size: .88rem; }
.pf-apply { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
.pf-apply legend { font-weight: 600; padding: 0 6px; }
.radio { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.radio input { margin-top: 4px; }
@media (max-width: 600px) { .pf-grid .wide { grid-column: 1 / -1; } }

.health { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.health.bad { border-color: var(--warn); background: var(--warn-soft); }
.health-warn { color: var(--warn); font-weight: 600; margin: 6px 0; }
.health p.small { margin: 6px 0; }
.forecast { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.forecast h4 { margin: 0 0 6px; }
.forecast p { margin: 4px 0; }

/* ---- Részletes útmutató ---- */
.gtag { color: var(--accent); font-weight: 600; }
.guide { margin-top: 10px; }
.gmeta { font-size: .85rem; color: var(--muted); }
.gboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.gbox { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .88rem; }
.gbox h5 { margin: 0 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.gbox ul { margin: 0; padding-left: 18px; }
.gsteps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gstep { display: grid; grid-template-columns: auto 40px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.gstep.done { opacity: .55; }
.gstep.done strong { text-decoration: line-through; }
.gcheck input { width: 20px; height: 20px; margin: 10px 0 0; }
.gico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.gicon { width: 26px; height: 26px; }
.gtext p { margin: 4px 0; }
.gwhy { font-size: .85rem; color: var(--muted); }
.gwhy span { font-weight: 700; color: var(--accent); }
.timer { margin-top: 4px; font-variant-numeric: tabular-nums; }
.timer.run { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }
.timer.ring { background: var(--warn); color: var(--bg); border-color: var(--warn); font-weight: 700; animation: ring 1s infinite; }
@keyframes ring { 50% { opacity: .5; } }
/* párhuzamos („közben”) lépések */
.gstep.meanwhile { margin-left: 26px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.gpar { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 8px; margin-bottom: 3px; }
.gwin { font-size: .85rem; background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; }
.timer.oven { border-color: var(--warn); }
.timer.oven.run { background: var(--warn); border-color: var(--warn); }
@media (max-width: 600px) { .gstep.meanwhile { margin-left: 10px; } }

/* saját recept űrlap */
.avail.mine { background: var(--sky-soft); color: #1d6f9c; }
.avail.bazis { background: var(--berry-soft); color: var(--berry-ink); }
/* étrend */
.pf-diet { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.pf-diet legend { font-weight: 700; padding: 0 6px; }
.pf-diet h5 { margin: 6px 0 0; }
.pf-diet-q { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
/* 🩺 PCOS keretek (profile.js pcosHtml, 2026-10-20) */
.pf-combo { margin: 4px 0 10px; padding: 10px 14px 12px; border-radius: 14px; background: var(--bg); } /* ➕ mellé választott étrendek (2026-10-21) */
.pf-combo h5 { margin: 0 0 8px; }
.pf-pcos { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.pf-pcos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-pcos-grid .field { font-size: .82rem; }
.pf-pcos-grid input { width: 100%; font-size: 16px; }
.pf-sens { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.diet-line { font-size: .85rem; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.diet-chip { font-size: .75rem; padding: 1px 8px; border-radius: 6px; background: var(--accent-soft); }
.diet-no { color: var(--warn); font-size: .8rem; }
:root[data-theme="dark"] .diet-no { color: #e0a526; }
.rec-tools { display: flex; gap: 8px; margin: 4px 0 10px; }
.recipe-form { display: flex; flex-direction: column; gap: 10px; }
.recipe-form h4 { margin: 10px 0 0; }
.recipe-form .field input, .recipe-form .field select, .recipe-form textarea { width: 100%; font-size: .95rem; color: var(--text); }
.recipe-form textarea { font: inherit; resize: vertical; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.ing-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ing-row { display: grid; grid-template-columns: 1fr 70px 110px auto; gap: 6px; align-items: center; }
.ing-row input, .ing-row select { min-width: 0; padding: 5px 7px; }
.ir-pg { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); padding-left: 4px; }
.ing-group { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; }
.ig-name { font-weight: 700; border-style: dashed; }
.rf-addbtns { display: flex; gap: 14px; }
.hnote { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .85rem; margin: 8px 0; }
.hnote h5 { margin: 0 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hnote ul { margin: 0; padding-left: 18px; }
.hnote-ok { color: var(--accent); margin: 6px 0 0; font-weight: 600; }
.hnote.over { border-color: transparent; background: var(--peach-soft, #FFEEE5); }
.hnote-over { margin: 6px 0 2px; font-weight: 600; color: var(--warn); }
.hnote-treat { margin: 2px 0 0; }
:root[data-theme="dark"] .hnote-over { color: #e0a526; }
.ai-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); }
.ai-modal { width: min(640px, 100%); }
.ai-modal textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); resize: vertical; }
.ai-tag { margin: 0; }
/* részletes lépésszerkesztő */
.ge-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ge-step { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ge-head { display: grid; grid-template-columns: auto 150px 1fr auto; gap: 6px; align-items: center; }
.ge-num { font-weight: 700; color: var(--accent); }
.ge-title { font-weight: 600; min-width: 0; }
.ge-btns { display: flex; gap: 2px; }
.ge-btns button { padding: 3px 8px; }
.ge-text { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); resize: vertical; }
.ge-why { font-size: .85rem; }
.ge-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); }
.ge-nums input { width: 60px; padding: 2px 6px; }
.ge-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }
.ge-extra .wide { grid-column: 1 / -1; }
.ge-extra textarea { font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
@media (max-width: 600px) { .ge-head { grid-template-columns: auto 1fr auto; } .ge-head .ge-title { grid-column: 1 / -1; } }
.ir-pgv.estimated, #rf-servings.estimated { border-color: #e0a526; background: rgba(224, 165, 38, .12); }
.ai-imgs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ai-pick { display: inline-block; cursor: pointer; padding: 7px 14px; border-radius: 8px; background: var(--accent); color: var(--bg); font-weight: 600; }
.ai-thumbs { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.ai-thumbs:empty { display: none; }
.ai-thumb { position: relative; }
.ai-thumb img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.ai-thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 1; }
/* ételfotó-felismerés: széles ablak, felismerés után két hasáb (bal: fotó + mi ez, jobb: hasonló receptek + diétás recept) */
.food-modal.has-result { width: min(1000px, 100%); }
.food-modal.has-result .food-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.food-side h4:first-child { margin-top: 0; }
@media (max-width: 760px) { .food-modal.has-result .food-grid { display: block; } }
.food-side .ai-box + .ai-box { margin-top: 8px; }
.food-web { width: 100%; }
.food-web:empty { display: none; }
.food-web .food-matches { margin: 4px 0; }
.food-web .food-matches li { background: var(--card); }
.food-web a { color: var(--text); }
.ai-url { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.food-res { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.food-res h4 { margin: 4px 0; }
.food-res p { margin: 4px 0; }
.food-diet { background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; }
.food-matches { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.food-matches li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.calc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.calc-info { font-size: .85rem; background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; }
.ing-grp { font-weight: 700; font-size: .85rem; padding: 8px 0 2px; color: var(--accent); }
.ir-pg input { width: 60px; padding: 2px 5px; }
.nutri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 600px) { .nutri-grid { grid-template-columns: repeat(2, 1fr); } .ing-row { grid-template-columns: 1fr 60px 95px auto; } }

/* hét kitöltése időszakokkal */
.fill-modal { width: min(520px, 100%); }
/* 📅 Hét kitöltése (2026-10-27): napok kerek pipával kihagyhatók, kapszulák helyett kapcsoló + beállítás-sorok */
.fill-days { padding: 0 12px; margin-top: 10px; }
/* gyors, egymás utáni koppintásnál a böngésző ne dupla koppintásra várjon (:where = nem ír felül semmilyen saját touch-action szabályt) */
:where(button, a, label, [role="button"]) { touch-action: manipulation; }
/* a Hét kitöltése első kérdése: hét nagy napcsempe (2026-11-07) */
.fd-first { margin-top: 10px; }
.fd-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.fd-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 60px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--line) !important; color: var(--muted) !important; transition: background .15s ease, color .15s ease; }
.fd-t b { font-size: var(--fs-body); font-weight: 800; }
.fd-t small { font-size: var(--fs-small); font-weight: 600; }
.fd-t.on { background: var(--btn) !important; color: var(--btn-ink, #fff) !important; box-shadow: none !important; }
.fd-t:disabled { opacity: .4; }
/* „Hányszor főzöl?” (2026-11-07): gombsor, alatta a főzések sorai, a kézi beosztás csak kérésre */
.fd-cooks .fp-seg { display: flex; width: 100%; }
.fd-cooks .fp-seg button { flex: 1 1 0; min-width: 0; min-height: 44px !important; padding: 0 !important; }
.fd-groups { margin: 10px 2px 0; }
.fd-g { margin: 3px 0 0; font-size: var(--fs-body); line-height: 1.35; }
.fd-g b { font-weight: 700; }
.fd-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--sun-soft); color: var(--text); font-size: var(--fs-small); line-height: 1.35; }
.fd-hand { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--accent) !important; font-weight: 600; font-size: var(--fs-small); }
.fd-hand i { font-style: normal; }
/* 📊 a Terv rácsának alsó sora: naponta a betervezett kcal + csík a célhoz (2026-11-08) */
.pc-kcl { align-self: center; padding-left: 8px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pc-kc { display: flex !important; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 40px; margin-top: 2px; padding: 4px 1px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; }
.pc-kc b { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-kc i { display: block; width: 80%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pc-kc s { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.pc-kc.ok s { background: var(--green); }
.pc-kc.over s { background: var(--warn); }
.pc-kc.over b { color: var(--warn); }
.pc-kc.on { background: var(--brand-soft) !important; }
/* 📊 a nap tápértéke (nutsum.js): Terv napnézet + Ma alsó lap */
.ns-card { margin: 10px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ns-h { margin: 0 0 8px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ns-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ns-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ns-l { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ns-t b { font: 800 1.15rem/1.1 var(--font-head); color: var(--text); }
.ns-t b small { font: 600 var(--fs-small) var(--font); color: var(--muted); }
.ns-bar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.ns-bar i { display: block; height: 100%; border-radius: 6px; background: var(--brand); }
.ns-t.ok .ns-bar i { background: var(--green); }
.ns-t.over .ns-bar i { background: var(--warn); }
.ns-g { font-size: var(--fs-small); color: var(--muted); }
.ns-t.over .ns-g { color: var(--warn); font-weight: 700; }
.ns-f { margin: 10px 0 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.ns-sheet .ns-card { margin-top: 0; }
/* 🎨 témaválasztó (Én → Kinézet, kérdőív): minden sor a saját témája színeivel, ezért sötét módban is ugyanígy néz ki */
.th-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.th-o { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px !important; border: 0 !important; border-radius: 14px !important; color: #17130F !important; text-align: left; font-weight: 700; font-size: var(--fs-body); box-shadow: inset 0 0 0 1px rgba(23, 19, 15, .12) !important; }
.th-o.on { box-shadow: inset 0 0 0 2px var(--th-a) !important; }
.th-sw { display: flex; flex: none; }
.th-sw i { width: 24px; height: 24px; border-radius: 50%; }
.th-sw i + i { margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.th-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.th-t small { font-size: var(--fs-small); font-weight: 500; color: #5C554B; }
.th-o .ic { width: 20px; height: 20px; color: var(--th-a); flex: none; }
.fd-row { display: flex; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--line); }
.fd-row:last-child { border-bottom: 0; }
.fd-ck { width: 32px; height: 44px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; display: grid; place-items: center; flex: none; }
.fd-ck.on .rf-ck { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.fd-ck:disabled { opacity: .45; }
.fd-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fd-name b { font-weight: 700; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-name b::first-letter { text-transform: uppercase; }
.fd-name small { font-size: var(--fs-small); color: var(--muted); }
.fd-row.off .fd-name b { color: var(--muted); font-weight: 600; }
/* mindig 7 betűnyi hely, balra igazítva — kevesebb betűnél az A nem csúszik el */
.fd-letters { display: flex; gap: 3px; flex: none; width: calc(7 * 30px + 6 * 3px); justify-content: flex-start; }
.fd-sum { margin: 8px 2px 0; color: var(--muted); }
/* (2026-10-28, Andras: telefonon a „csütörtök”-ből csak „csütört” látszott) keskeny képernyőn a nap rövid neve (H, K, Sze…) */
.fd-short { display: none; }
@media (max-width: 480px) { .fill-days .fd-long { display: none; } .fill-days .fd-short { display: inline; } }
/* 🍽 mely étkezések + kézzel beírt étel (2026-10-28) */
.fill-slots { padding: 0 12px; }
.fs-row .fd-name { flex: 0 0 auto; width: 92px; }
.fs-fix { flex: 1; min-width: 0; font-size: 16px !important; min-height: 40px; padding: 6px 10px !important; }
.fs-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.fs-recent small { color: var(--muted); font-size: var(--fs-small); }
.fs-q { min-height: 34px; padding: 0 10px !important; border-radius: 10px !important; border: 0 !important; background: var(--card) !important;
  box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); font-weight: 600; }
.fp-seg { display: flex !important; width: 100%; }
.fp-seg button { flex: 1 1 0; min-height: 40px !important; padding: 0 4px !important; font-size: var(--fs-small) !important; white-space: nowrap; }
.fp-segrow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fp-segrow:last-child { border-bottom: 0; }
.fill-modal > .rf-card + .rf-card { margin-top: 12px; }
/* 🧺 „Hasonló alapanyagokból” — melyik napok (2026-10-27) */
.fd-sharec { margin-top: 12px; }
.fd-share { padding: 2px 0 12px; }
.fd-share > small { display: block; font-size: var(--fs-small); color: var(--muted); }
.fd-sh-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.fd-sh { min-height: 40px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important;
  font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.fd-sh.on { background: var(--btn) !important; color: var(--btn-ink); box-shadow: none !important; }
.fd-sh:disabled { opacity: .35; }
.fill-modal .fp-allergy { margin: 8px 2px 0; }
.fl { width: 30px; height: 30px; padding: 0; border-radius: 8px; font-weight: 700; color: var(--muted); }
.fl.on { color: #fff; border-color: transparent; }
.fl-A.on { background: #2f7a55; } .fl-B.on { background: #2b6cb0; } .fl-C.on { background: #b5541c; } .fl-D.on { background: #7b4bb3; }
.fl-E.on { background: #a33b6b; } .fl-F.on { background: #237373; } .fl-G.on { background: #6b6f2a; }
@media (max-width: 600px) { .fl { width: 28px; height: 32px; } .fd-letters { gap: 2px; width: calc(7 * 28px + 6 * 2px); } .fd-row { gap: 8px; } .fd-ck { width: 28px; } }
@media (max-width: 380px) { .fl { width: 25px; } .fd-letters { gap: 2px; width: calc(7 * 25px + 6 * 2px); } }

/* mindig látható időzítő-sáv */
.timer-dock { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; flex-direction: column; gap: 6px; max-width: min(360px, calc(100vw - 32px)); }
.timer-dock[hidden] { display: none; }
.dock-row { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px 6px 12px; box-shadow: var(--shadow); font-size: .85rem; }
.dock-row span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dock-row small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-row strong { font-variant-numeric: tabular-nums; }
.dock-row button { padding: 3px 9px; }
.dock-row.oven-on { border-color: var(--warn); }
.dock-ico { font-style: normal; font-size: 1.1rem; }
.dock-row.rang { border-color: var(--warn); background: var(--warn-soft); animation: ring 1s infinite; }
.orig { margin-top: 10px; font-size: .85rem; }
.orig summary { cursor: pointer; color: var(--muted); }

/* kedvencek */
.fav { border: none; background: none; padding: 0 2px; font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer; vertical-align: -1px; }
.fav.on, .fav-mark { color: var(--sun); }
.fav:hover { color: var(--sun); }
.picker-filters { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* visszavonás-sáv */
.undo { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px;
  background: var(--text); color: var(--bg); padding: 8px 10px 8px 16px; border-radius: 10px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); font-size: .9rem; }
.undo[hidden] { display: none; }
.undo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo button { background: var(--accent); color: var(--bg); border: none; font-weight: 700; white-space: nowrap; }
.undo button.undo-close { background: transparent; color: var(--bg); opacity: .75; font-size: 1.2rem; line-height: 1; padding: 2px 6px; margin-left: -6px; }
.undo button.undo-close:hover { opacity: 1; }

/* ---- Napló ---- */
.journal { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.j-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.j-card h3 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.j-stats { margin: 0 0 8px; }
.chart-wrap { position: relative; }
.wchart { width: 100%; height: auto; display: block; }
.wchart .grid { stroke: var(--line); stroke-width: 1; }
.wchart .axis { fill: var(--muted); font-size: 11px; }
.wchart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wchart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.wchart .hit { fill: transparent; cursor: pointer; }
.wchart .goal { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tip { position: absolute; transform: translate(-50%, -100%); background: var(--text); color: var(--bg); font-size: .8rem; padding: 3px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.journal { max-width: 720px; }
.journal[hidden] { display: none; }
/* 📈 Előzmények a Terv kapcsolója alatt: a heti rács (gépen) helyett az Előzmények */
#tervezes.hist .week-scroll { display: none; }
#tervezes #journal-body { margin-top: 10px; }
/* Előzmények: a hét rácsa (oszlop = nap, koppintva kiválasztja) */
.hw { display: grid; grid-template-columns: auto repeat(7, minmax(0, 1fr)); gap: 4px 3px; align-items: center; }
.hw-l { font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; padding-right: 4px; }
.hw-h, .hw-c { border: 0 !important; background: transparent !important; padding: 4px 0 !important; min-height: 36px; border-radius: 10px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; color: var(--muted); font-weight: 600; min-width: 0; }
.hw-h b { font: 800 1rem var(--font-head); color: var(--text); }
.hw-h.today:not(.on) b { color: var(--accent); }
.hw-h.on, .hw-c.on { background: var(--accent-soft) !important; }
.hw-h.on { background: var(--accent) !important; color: #e9fff3; } .hw-h.on b { color: #fff; }
.hw-n { font-weight: 700; color: var(--text); font-size: .78rem; } .hw-n.ok { color: var(--accent); }
.hw-kg { font-weight: 700; color: var(--text); font-size: .74rem; }
.hw-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); vertical-align: -2px; }
.hw-dot.sky.part { background: var(--sky-soft); border-color: var(--sky); } .hw-dot.sky.full { background: var(--sky); border-color: var(--sky); }
.hw-dot.peach.part { background: var(--peach-soft); border-color: var(--peach); } .hw-dot.peach.full { background: var(--peach); border-color: var(--peach); }
/* jelmagyarázat: semleges szín (a sorok saját színűek — a kék magyarázat a narancs lépés-pöttynél félrevezető volt) */
.hw-dot.key.part { background: transparent; border-color: var(--muted); } .hw-dot.key.full { background: var(--muted); border-color: var(--muted); }
.hw-key { margin: 8px 0 0; }
.hd { display: flex; flex-direction: column; gap: 8px; }
.hd h3 { text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--text); font-family: var(--font-head); }
.hd-sum { margin: 0; color: var(--muted); }
.hd-list { display: flex; flex-direction: column; gap: 8px; }
.hd-w { background: var(--accent-soft); border-radius: 16px; padding: 8px; }
/* Feladataim (a Terv alján) */
.plan-tasks { margin-top: 16px; max-width: 720px; }
.te { display: flex; flex-direction: column; gap: 8px; }
.te h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); font-family: var(--font-head); margin: 0; }
.te-wk { font: 600 .82rem var(--font); color: var(--muted); }
.te-h { margin: 8px 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.te-h .small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.te-row { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.te-row .jt-ic { width: 36px; height: 36px; font-size: 1.1rem; }
.te-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.te-t b, .jt-txt b { overflow-wrap: anywhere; hyphens: auto; } /* hosszú szó (pl. „Gyulladáscsökkentő”) ne lógjon a gombokba */
.te-miss { color: var(--warn); }
.te-del { border: 0 !important; background: transparent !important; color: var(--muted); font-size: 1.3rem; width: 40px; height: 40px; padding: 0 !important; flex: none; }
.te-del:hover { color: var(--warn); }
.te-pw { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.te-pw b { width: 3.4em; flex: none; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; } /* fix szélesség: a − és + mindig egy vonalban (Andras) */
.te-pw button { width: 34px; height: 34px; padding: 0 !important; border-radius: 10px !important; font-weight: 700; }
.te-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.te-sub .te-pw b { color: var(--text); }
.te-sub-l { width: 4.6em; flex: none; } /* „naponta” / „hetente” egyforma széles → a számlálók egy vonalban */
.te-flex { border-top: 1px solid var(--line); padding-top: 4px; }
.te-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 2px 0 8px 46px; }
.te-day { min-height: 40px; padding: 0 !important; border-radius: 12px !important; border: 2px solid var(--line) !important; background: transparent !important;
  font-weight: 700; font-size: .78rem; color: var(--muted); }
.te-day.today { border-color: var(--accent) !important; }
.te-day.on { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff; }
.te-day.done { background: var(--green) !important; border-color: var(--green) !important; }
.te-add { border-style: dashed !important; min-height: 44px; width: 100%; }
/* ✅ Feladataim egyszerűsítve (Andras, 2026-10-11): csoportok, egyszerű sorok, koppintva kis alsó lap */
/* saját és közös: külön, színezett buborék címmel (Andras, 2026-10-11 — jobban elkülönüljenek) */
.te2 { display: flex; flex-direction: column; background: var(--accent-soft); border-radius: 24px; padding: 14px 12px 16px; }
.te2.te2-shared { background: var(--sky-soft); }
.te2 + .te2 { margin-top: 16px; }
.te2-title { margin: 0 4px 2px; font: 800 1.05rem var(--font-head); color: var(--text); }
.te2-title small { display: block; font-family: var(--font); font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
.te2 .te2-add { background: var(--card) !important; box-shadow: var(--card-shadow); }
.te2-h { margin: 14px 4px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.te2-card { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 2px 12px; }
.te2-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 9px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: none !important; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.te2-row:last-child { border-bottom: 0 !important; }
.te2-row:active { opacity: .7; }
.te2-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.te2-t b { font-weight: 650; }
.te2-go { color: var(--muted); font-size: 1.3rem; flex: none; }
.te2-empty { margin: 0; padding: 14px 0; }
.te2-add { align-self: flex-start; margin-top: 8px; border: 0 !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 700;
  border-radius: 10px !important; padding: 8px 16px !important; min-height: 40px; }
.te-sheet { display: flex; flex-direction: column; gap: 12px; }
.te-sheet > p { margin: 0; }
.te-sh-head { display: flex; align-items: center; gap: 12px; }
.te-sh-head b { font: 700 1.1rem var(--font-head); }
.te-sh-name { flex: 1; min-width: 0; font-size: 16px !important; font-weight: 650; }
.te-sh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.te-sh-l { font-weight: 650; }
.te-sheet .te-days { padding: 0; }
/* ✍️ cserélhető ikon (2026-10-28): az ikon gomb — halvány keret jelzi, hogy koppintható */
button.jt-ic.qm-ic { border: 0 !important; padding: 0 !important; min-height: 0; cursor: pointer; background: var(--bg) !important;
  box-shadow: inset 0 0 0 1px var(--line); position: relative; }
button.jt-ic.qm-ic::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20l4-1 10-10-3-3L5 16z'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 0 1px var(--line); }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; }
.ic-pick { min-height: 48px; font-size: 1.5rem; padding: 0 !important; border-radius: 12px !important; border: 0 !important; background: var(--bg) !important; }
.ic-pick.on { box-shadow: inset 0 0 0 2px var(--accent) !important; }
/* új feladat: mező + jól látható „＋ Hozzáad” gomb (telefonon eddig csak a billentyűzet pipájával lehetett) */
.te-addrow { display: flex; gap: 8px; align-items: center; }
.te-addrow .te-add { flex: 1; min-width: 0; font-size: 16px; }
.te-addbtn { flex: none; min-height: 44px; padding: 0 14px !important; border-radius: 12px !important; font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) { .te-days { padding-left: 0; } }
/* Terv telefonon: Nap · Hét kapcsoló és a heti lista */
.pv-seg { margin-bottom: 0; }
/* „📈 Előzmények” a Nap · Hét kapcsoló harmadik gombjaként (a Terv alá költözött, 2026-10-10) */
.pv-seg .pv-hist { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; padding: 9px 4px;
  color: var(--muted); font-weight: 650; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.pv-seg .pv-hist:hover { color: var(--text); }
.pw-day { background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 4px 12px 8px; display: flex; flex-direction: column; }
.pw-day.today { box-shadow: 0 0 0 2px var(--green), var(--card-shadow); }
.pw-head { display: flex !important; align-items: baseline; gap: 6px; border: 0 !important; background: transparent !important; padding: 8px 0 !important;
  text-align: left; color: var(--text); min-height: 44px; }
.pw-head b { font-family: var(--font-head); }
.pw-kcal { margin-left: auto; white-space: nowrap; }
.pw-meal, .pw-empty { display: flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0 !important; border: 0 !important;
  border-top: 1px solid var(--line) !important; background: transparent !important; border-radius: 0 !important; text-align: left; cursor: pointer; width: 100%; }
.pw-meal b { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-meal .ma-tag, .pw-empty .ma-tag { flex: none; width: 68px; text-align: center; align-self: center; } /* a .ma-tag alapból a sor tetejére igazodna */
.pw-meal .allergy-badge { align-self: center; margin-top: 0; }
.pw-meal.done b { color: var(--muted); }
.pw-done { color: var(--green); font-weight: 800; }
.pw-empty { color: var(--muted); font-size: .88rem; }
/* profil: súlymérés kapcsoló */
.pf-track { grid-column: 1 / -1; }

/* ---- Listák (Listonic-szerű) ---- */
.list-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ltab { white-space: nowrap; border-radius: 10px; padding: 6px 14px; color: var(--muted); }
.ltab.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.ltab.add { border-style: dashed; }
.lcount { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: .75rem; font-weight: 700; }
.li-head { margin-bottom: 8px; }
.li-add-wrap { position: relative; display: flex; gap: 8px; max-width: 640px; }
.li-add-wrap input { flex: 1; font-size: 1rem; padding: 9px 12px; }
.ac { position: absolute; top: 100%; left: 0; right: 90px; z-index: 15; list-style: none; margin: 4px 0 0; padding: 4px 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.ac[hidden] { display: none; }
.ac li { padding: 7px 12px; cursor: pointer; }
.ac li.active, .ac li:hover { background: var(--accent-soft); }
.li-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* elhúzós sor: elöl a tétel (.li-fg), mögötte jobbra a két gomb (.li-acts) */
.li-fg { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center; min-height: inherit; padding: 8px 0;
  background: var(--card); transition: transform .28s var(--ease-out, ease); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* (2026-10-17, Andras: „még mindig dobozos”) kerek ikon-gombok kis felirattal, a sor mögött „levegősen”: a húzás mértékével
   (--p 0…1, lists.js setP) kicsiből nőnek és előtűnnek, egymás után (előbb a jobb szélső Törlés, aztán a Szerkesztés); a félrehúzott
   tétel jobb széle lekerekedik és enyhe árnyékot kap, mintha felemelnéd. Szerkesztés: lágy narancs, Törlés: piros. */
.li-row { --p: 0; }
.li-acts { position: absolute; top: 0; right: 0; bottom: 0; width: 214px; display: flex; align-items: center; justify-content: space-evenly; padding: 0 4px 0 12px; }
/* (egysoros tételnél a sor ~52 px magas: kör 36 + 3 + felirat ~10 — 42 px-es körnél a teteje levágódott, Andras képe, okt. 17.) */
.li-act { flex: none; width: 62px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0 !important; background: none !important;
  min-height: 44px; padding: 0; color: var(--text) !important;
  opacity: clamp(0, calc(var(--p) * 1.8 - .5), 1); transform: scale(calc(.6 + .4 * clamp(0, calc(var(--p) * 1.8 - .5), 1)));
  transition: opacity .22s ease, transform .28s var(--ease-out, ease); }
/* a jobb szélső (Törlés) bukkan elő előbb — húzáskor az látszik meg először */
.li-act-rm { opacity: clamp(0, calc(var(--p) * 1.6), 1); transform: scale(calc(.6 + .4 * clamp(0, calc(var(--p) * 1.6), 1))); }
.li-row.swiping .li-act { transition: none; } /* húzás közben pontosan az ujjat követi */
.li-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  transition: transform .15s; }
.li-act-rm .li-ic { background: #E5484D; color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, #E5484D 35%, transparent); }
.li-act:active .li-ic { transform: scale(.88); }
.li-act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.li-lb { font-size: .64rem; line-height: 1.1; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.li-act-rm .li-ic { box-shadow: 0 3px 8px color-mix(in srgb, #E5484D 30%, transparent) !important; } /* kisebb árnyék — a sor ne vágja le */
.li-row.open .li-fg, .li-row.swiping .li-fg { border-radius: 0 16px 16px 0; box-shadow: 10px 0 18px -12px rgba(0, 0, 0, .28); }
.li-row:not(.open, .swiping, .li-peek) .li-acts { visibility: hidden; transition: visibility 0s .3s; } /* csukva ne látsszon a széle */
.li-row.li-peek { --p: 1; }
.li-row.li-peek .li-fg { border-radius: 0 16px 16px 0; box-shadow: 10px 0 18px -12px rgba(0, 0, 0, .28); }
/* törlés: a sor elhalványul, balra csúszik és összecsukódik (a saját és a másik családtag törlése is — lists.js `li-gone`) */
/* (2026-10-31) két lépés: .li-gone = elúszik (átlátszóság + eltolás, 0,16 mp), .li-shut = utána a helye csukódik össze (0,24 mp);
   egy teljesen kiürülő kategória a kártyájával együtt (.shop-section.li-gone) */
#li-items .li-empty-in { animation: liEmptyIn .32s cubic-bezier(.22, .7, .2, 1) both; }
@keyframes liEmptyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#li-items .li-row.li-gone, #li-items .shop-section.li-gone, #li-items .li-swipe-tip.li-gone { overflow: hidden; opacity: 0; transform: translateX(-28px); transition: opacity .16s ease, transform .16s ease; }
/* (a .li-shut az elúszás átmenetét is megtartja — különben a csere megszakítja, ha az épp az utolsó képkockánál tart) */
#li-items .li-row.li-shut { min-height: 0 !important; border-bottom-color: transparent; transition: height .24s cubic-bezier(.3, 0, .2, 1), border-color .24s, opacity .16s ease, transform .16s ease; }
#li-items .shop-section.li-shut { margin-bottom: 0 !important; transition: height .24s cubic-bezier(.3, 0, .2, 1), margin .24s cubic-bezier(.3, 0, .2, 1), opacity .16s ease, transform .16s ease; }
/* pipáláskor a sor lágyan halványul el (nem egy pillanat alatt) */
#li-items .li-row { transition: opacity .2s ease; }
.li-grip { border: 0 !important; background: none !important; color: var(--muted); font-size: 1.15rem; line-height: 1; width: 40px; min-height: 44px; padding: 0; margin: 0 -4px 0 -12px; } /* (2026-10-31: az .7-es halványítás miatt alig látszott) */ /* 28 px-nél a szélén mellé lehetett nyúlni */
.li-grip:hover { color: var(--accent); opacity: 1; }
.li-swipe-tip { margin: 8px 0 0; }
/* bemutató: az első sor egyszer kicsit balra csúszik, és látszik, mi van mögötte */
/* (Andras, 2026-10-10: félig húzva „rosszul méretezettnek” tűnt — most teljesen kinyílik, mindkét gomb látszik, kis ideig nyitva marad) */
.li-row.li-peek .li-fg { animation: liPeek 2.2s .5s var(--ease-out, ease) backwards; }
@keyframes liPeek { 0% { transform: none; } 22%, 72% { transform: translateX(-214px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .li-row.li-peek .li-fg { animation: none; } }
/* becsült ár — TESZT */
.cost-card.cost-off { background: none; box-shadow: none; padding: 0; }
.cost-on { align-self: flex-start; border: 1px dashed var(--line) !important; background: none !important; border-radius: 10px !important; padding: 6px 12px; font-size: .85rem; color: var(--muted); min-height: 36px; }
.cost-test { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cost-test .link { margin-left: auto; }
.test-badge { display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: #FFE9A8; color: #7A5600; vertical-align: middle; }
.li-row:last-child { border-bottom: none; }
.li-text { display: flex; flex-direction: column; }
.li-note { font-size: .75rem; color: var(--muted); }
/* bevásárlási napló */
.log-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.log-name { min-width: 0; }
.li-qtyv { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.li-edit { border: none; background: none; color: var(--muted); font-size: 1rem; padding: 2px 6px; }
.li-edit:hover { color: var(--accent); }
.li-btns { display: inline-flex; gap: 2px; }
.li-rm:hover { color: var(--warn); }
.ac-custom { color: var(--accent); font-weight: 600; }
/* Terv alapján */
.plan-item { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plan-item:last-child { border-bottom: none; }
.pi-name { font-weight: 600; }
.plan-item.home .pi-name, .plan-item.home .shop-amount { text-decoration: line-through; color: var(--muted); }
.plan-item.sent { opacity: .75; }
.home-btn { font-size: .8rem; padding: 3px 10px; border-radius: 6px; white-space: nowrap; }
.home-btn:hover { border-color: var(--accent); color: var(--accent); }
.shop-actions .send-bar { margin: 0; color: var(--muted); }
.li-row.done .shop-name, .li-row.done .li-qtyv { text-decoration: line-through; color: var(--muted); }
.li-row.done { opacity: .55; }
.ac li { display: flex; justify-content: space-between; gap: 10px; }
.ac-cat { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* felugró ablak (tétel felvétele / szerkesztése) */
.modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.modal { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
/* nyitott felugró ablaknál a háttér (az oldal) nem görgethető — a görgő az ablakot teker */
body:has(.modal-bg) { overflow: hidden; }
.modal h3 { margin: 0; }
.modal .field input, .modal .field select { font-size: 1rem; color: var(--text); width: 100%; }
.m-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.stepper { display: flex; }
.stepper input { text-align: center; border-radius: 0; min-width: 0; }
.stepper button { width: 40px; font-size: 1.1rem; font-weight: 700; }
.stepper button:first-child { border-radius: 8px 0 0 8px; }
.stepper button:last-child { border-radius: 0 8px 8px 0; }
.m-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.m-gap { flex: 1; }
/* (2026-10-27, Andras: a Hét kitöltése „túl magasan” jött be a recept-ablakhoz képest) telefonon a felugró lap ugyanott ér véget
   felül, mint a recept-lap (--sheet-gap: a képernyő ~21%-a), ugyanazzal a lekerekítéssel */
@media (max-width: 600px) { .modal-bg { place-items: end stretch; padding: 0; }
  .modal { border-radius: 22px 22px 0 0; max-height: calc(100dvh - max(calc(env(safe-area-inset-top) + 56px), 21vh)); } }
.shop-section.cart { opacity: .8; }
.send-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: .9rem; }
@media (max-width: 600px) { .li-qty { width: 110px; } .ac { right: 0; } }

/* ---- Bevásárlólista ---- */
.field { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 3px; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-end; }
.shop-period { margin: 0 0 6px; }
.notes p { margin: 4px 0; font-size: .85rem; color: var(--warn); }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; margin: 12px 0; align-items: start; }
.shop-section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.shop-section h3 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.shop-section ul { list-style: none; margin: 0; padding: 0; }
.shop-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: center; }
.shop-row:last-child { border-bottom: none; }
.shop-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.shop-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
.shop-name { font-weight: 600; }
.shop-amount { text-align: right; font-variant-numeric: tabular-nums; }
.shop-uses { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); padding-left: 30px; }
.shop-bought { grid-column: 1 / -1; padding-left: 30px; font-size: .85rem; color: var(--muted); }
.shop-bought input { width: 70px; text-align: right; padding: 2px 6px; }
.shop-row.in-cart .shop-name, .shop-row.in-cart .shop-amount { text-decoration: line-through; color: var(--muted); }
.shop-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.shop-actions button:disabled { opacity: .5; cursor: default; }
@media (max-width: 600px) {
  .shop-list { grid-template-columns: 1fr; }
  .stock-list { grid-template-columns: 1fr; }
  .stock-tools { min-width: 0; }
}

/* =====================================================================================
   ÚJ DESIGN — 1. lépés: egységes, világos, barátságos megjelenés a mostani szerkezeten
   (puha, kerek kártyák keret helyett árnyékkal; nagyobb, kerekebb gombok; lebegő alsó fülsor;
   étkezésenként saját szín). A szabályok szándékosan a fájl végén vannak, hogy a régieket felülírják.
   ===================================================================================== */

/* kártyák: keret helyett finom árnyék, nagyobb lekerekítés */
.day, .rec, .cook, .pf-grid, .calc div, .pf-apply, .health, .forecast, .j-card, .shop-section, .pf-diet,
.hnote, .gbox, .food-res, .modal, .picker, .stock-list > *, .li-row-card {
  border: 0; border-radius: var(--radius); box-shadow: var(--card-shadow); background: var(--card);
}
.hnote, .gbox { box-shadow: none; background: var(--bg); }
.hnote.over { background: var(--peach-soft); }
.health.bad { background: var(--warn-soft); }
.calc div.hl { background: var(--accent-soft); box-shadow: none; }
.cook.open { box-shadow: 0 0 0 2px var(--green), var(--card-shadow); }
.day.today { box-shadow: 0 0 0 2px var(--green), var(--card-shadow); }
.rec { padding: 14px 16px; }
.rec + .rec { margin-top: 2px; }
.modal { padding: 20px; }
.drawer { border: 0; border-radius: 24px; }
.drawer-close { border-radius: 50%; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; font-size: 1.6rem; box-shadow: var(--card-shadow); z-index: 2; }
/* telefonon: fogantyú felül — jelzi, hogy az ablak lehúzással is bezárható (drawer.js) */
.drawer-grip { display: none; }
@media (max-width: 700px) {
  .drawer-grip { display: block; position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; margin-left: -22px; border-radius: 99px; background: var(--muted); opacity: .35; }
  .drawer-close { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* mezők és gombok: kerekebb, levegősebb, nagyobb érintési felület */
input, select, textarea { border-radius: 12px; border-color: var(--line); background: var(--field); padding: 8px 12px; }
button { border-radius: 12px; padding: 8px 14px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(31, 138, 86, .25); }
button.primary:hover:not(:disabled) { filter: brightness(1.07); }
button.small, .link.small { border-radius: 10px; }
button.link { color: var(--accent); font-weight: 600; }
/* :where() → nulla prioritás: az egyedi gomb-stílusok (pl. hétsáv, pipák) mindig felülírhatják */
button:where(:not(.primary, .link, .li-edit, .fav, .ltab, .drawer-close)) { background: var(--card); border-color: var(--line); }
.home-btn { border-radius: 10px; }
.ai-box { border: 0; border-radius: var(--radius); background: var(--accent-soft); }

/* fejléc és fülek */
.top { background: var(--bg); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.top h1 { color: var(--accent); }
.tabs a { border-radius: 14px; }
.tabs a.active { background: var(--accent-soft); color: var(--accent); }
.list-tabs { border-bottom: 0; }
.ltab { border-radius: 10px; background: var(--card); border: 0; box-shadow: var(--card-shadow); }
.ltab.on { background: var(--text); color: var(--bg); box-shadow: none; } /* var(--bg): sötét módban is olvasható */
.ltab.add { box-shadow: none; border: 2px dashed var(--line); background: transparent; }

/* telefon: lebegő alsó fülsor */
@media (max-width: 700px) {
  .tabs { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px;
    box-shadow: var(--shadow); padding: 6px; }
  /* a kijelölt fül íve kövesse a sáv ívét: belső sugár = külső (24) − körben egyforma belső margó (6) */
  .tabs a { border-radius: 18px; font-size: .62rem; letter-spacing: -.01em; padding: 4px 0; }
  .tabs .tl, .tabs .ts { overflow: visible; }
  body > main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body .undo, body .timer-dock { bottom: calc(86px + env(safe-area-inset-bottom)); }
  body .status { bottom: calc(92px + env(safe-area-inset-bottom)); }
  /* (2026-10-31, átnézés) a „Terv alapján” ragadós „…a listára” sávja fölé — különben a buborék eltakarta a gomb feliratát */
  body:has(#bevasarlas.active #shop-plan-view:not([hidden]) .shop-actions) .status { bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* jelvények, címkék */
.avail { border-radius: 10px; }
.avail.ok { background: var(--accent-soft); color: var(--accent); }
.avail.miss { background: var(--warn-soft); color: var(--warn); }
.diet-chip { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip { border: 0; box-shadow: var(--card-shadow); background: var(--card); }
.gpar { background: var(--sky-soft); color: #1d6f9c; }

/* étkezések saját színe (tervező): reggeli napsárga, ebéd zöld, snack barack, vacsora lila */
.cell-label { display: inline-block; align-self: flex-start; font-weight: 700; padding: 1px 9px; border-radius: 6px; letter-spacing: .04em; }
.cell.slot-reggeli .cell-label { background: var(--sun-soft); color: var(--sun-ink); }
.cell.slot-ebed .cell-label { background: var(--accent-soft); color: var(--accent); }
.cell.slot-snack .cell-label { background: var(--peach-soft); color: var(--warn); }
.cell.slot-vacsora .cell-label { background: var(--berry-soft); color: var(--berry-ink); }
.cell-add, .cell-rand { border: 2px dashed var(--line); border-radius: 12px; }

/* visszavonás-sáv és állapotsor */
.undo { border-radius: 16px; }
.undo button:not(.undo-close) { background: var(--green); }

/* hétsáv (Terv napi nézet) */
.jd-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.jd { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; border: 0; border-radius: 14px;
  background: var(--card); box-shadow: var(--card-shadow); color: var(--muted); font-size: .7rem; font-weight: 600; }
.jd b { font-family: var(--font-head); font-size: 1.05rem; color: var(--text); line-height: 1.2; }
.jd.today:not(.on) b { color: var(--accent); }
.plan-day .jd.on { background: var(--accent); color: #e9fff3; box-shadow: 0 6px 16px rgba(31, 138, 86, .3); } /* erősebb az általános gomb-szabálynál */
.jd.on b { color: #fff; }
.jdots { display: flex; gap: 2px; margin-top: 3px; max-width: 90%; flex-wrap: wrap; justify-content: center; }
.jdots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.jdots i.f { background: var(--green); }
.jd.on .jdots i { background: rgba(255, 255, 255, .35); } .jd.on .jdots i.f { background: #fff; }
/* súlykártya */
.jw { padding: 14px; }
.jw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jw-mid { text-align: center; flex: 1; min-width: 0; }
.jw-val { width: 5.2ch; border: 0 !important; background: transparent; text-align: right; padding: 0; font: 800 1.7rem var(--font-head) !important; color: var(--text); }
.jw-val.ghost { color: var(--muted); }
.jw-kg { font: 700 1.1rem var(--font-head); margin-left: 4px; color: var(--muted); }
.jw-pm { width: 48px; height: 48px; border-radius: 16px !important; border: 0 !important; background: var(--accent-soft) !important; color: var(--accent);
  font-size: 1.5rem; font-weight: 700; padding: 0; flex: none; }
.jw-good { color: var(--accent); font-weight: 600; }
.jw .chart-wrap { margin-top: 8px; }
/* feladatsorok */
.jt-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 4px 0; }
.jt-head h3 { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jt { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--card-shadow); cursor: pointer; }
.jt.done .jt-txt b { color: var(--muted); }
.jt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.jc-sun { background: var(--sun-soft); } .jc-green { background: var(--accent-soft); } .jc-peach { background: var(--peach-soft); }
.jc-berry { background: var(--berry-soft); } .jc-sky { background: var(--sky-soft); }
.jt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.jt-txt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-chk { appearance: none; -webkit-appearance: none; width: 34px; height: 34px; margin: 0; border-radius: 12px; border: 2px solid var(--line);
  background: var(--card); flex: none; display: grid; place-items: center; cursor: pointer; }
/* a pipa képként (nem ::after szövegként): iPhone-on a szöveges pipa a jobb alsó sarokba csúszott */
.jt-chk:checked { border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.jt-add { border-radius: 10px !important; font-size: .82rem; font-weight: 600; color: var(--accent); background: var(--accent-soft) !important; border: 0 !important; white-space: nowrap; }
.jt-mini, .jt-del { border: 0 !important; background: transparent !important; color: var(--muted); font-size: 1.1rem; padding: 4px 8px; }
.jt-del { color: var(--warn); }

/* ---- 3. lépés: „Ma” és „Én” képernyő, vissza-sáv, választó alsó lapként, nagyobb betűk ---- */
html.big-text { font-size: 112.5%; }
html.big-text body { font-size: 17px; }
.ma { max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.ma-date { margin: 0; color: var(--muted); font-size: .85rem; }
.ma-hello { margin: 0 0 4px; font-size: 1.45rem; font-weight: 800; }
/* „Ma” oldal: gyors koppintgatásnál (víz, pipák) ne jelölődjön ki a szöveg — a mezők írhatók maradnak */
#ma-body { -webkit-user-select: none; user-select: none; }
#ma-body :is(input, textarea) { -webkit-user-select: text; user-select: text; }
/* „Ma” dashboard: egy sor egyforma gyűrű (feladatok · víz · lépések · edzés) — saját kártya nélkül */
.ma-rings { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; margin: 2px 0 4px; }
.ma-rg { display: flex !important; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0 !important; border: 0 !important;
  background: transparent !important; color: var(--text); text-decoration: none; cursor: pointer; font: inherit;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
div.ma-rg { cursor: default; } /* a feladat- és lépésgyűrű csak mutat */
.ma-ring { --p: 0%; --rc: var(--green); --rs: var(--accent-soft); width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--rc) 0 var(--p), var(--rs) var(--p) 100%); }
.ma-ring > span { width: 50px; height: 50px; border-radius: 50%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; font: 800 1rem var(--font-head); }
.ma-ring small { font: 700 .7rem var(--font); color: var(--muted); }
.ma-rg-ic { font-style: normal; font-size: 1.15rem; line-height: 1.1; }
.ma-ring.rc-sky { --rc: var(--sky); --rs: var(--sky-soft); }
.ma-ring.rc-peach { --rc: var(--peach); --rs: var(--peach-soft); }
.ma-rg.full .ma-ring > span { background: var(--rs); }
.ma-rg.off .ma-ring { --rs: var(--line); opacity: .6; }
.ma-rg-l { font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ma-plus { color: #1d6f9c; }
/* „Ma” teteje (2026-10-10): két kártya — ✅ Feladatok és 💧 Víz — kis gyűrűvel, mellette a szöveg */
.ma-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.ma-st { display: flex !important; align-items: center; gap: 10px; min-width: 0; min-height: 72px; padding: 10px 12px !important; margin: 0;
  border: 0 !important; border-radius: 20px !important; background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--text);
  font: inherit; text-align: left; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button.ma-st { cursor: pointer; }
button.ma-st:active { transform: scale(.97); }
.ma-st.ma-rg-water { background: var(--sky-soft) !important; }
.ma-st.full:not(.ma-rg-water) { background: var(--accent-soft) !important; }
.ma-ring.ma-ring-s { width: 50px; height: 50px; }
.ma-ring.ma-ring-s > span { width: 38px; height: 38px; font-size: .85rem; }
.ma-st .ma-plus { font-weight: 800; }
.ma-st.full .ma-ring > span { background: var(--rs); }
.ma-st-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ma-st-t b { font: 800 1.05rem var(--font-head); white-space: nowrap; }
.ma-st-t small { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-st-of { font: 600 .82rem var(--font); color: var(--muted); }
.ma-st.ma-rg-water .ma-ring > span { background: var(--card); }
.ma-bar { height: 8px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; margin-top: 4px; }
.ma-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
/* csoportfejléc jobb oldali gombbal (🍳 Főzés, Lista ›) */
.ma-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ma-sec-row .ma-sec { margin-top: 0; }
.ma-sec-sub { font-weight: 600; letter-spacing: 0; text-transform: none; }
.ma-sec-sub.ok { color: var(--green); } /* 🩺 rost: a napi cél megvan */
.ma-head-btn { text-decoration: none; font-weight: 700; font-size: .88rem; color: var(--accent); background: var(--accent-soft); border-radius: 10px;
  padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; }
/* mára teendő: a kész halványan a helyén marad; a bevásárlás tétele kipipálva kiúszik */
.ma-todo { display: flex; flex-direction: column; gap: 8px; }
.ma-todo-row.done { opacity: .75; } /* mint a kipipált ételek */
.hd-hint { margin: -2px 0 8px; }
.ma-sec-done { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: .85rem; }
/* bevásárlás: a listák neve a „Ma” oldalon — koppintva felugró ablakban pipálható (openListSheet) */
.ma-list { display: flex !important; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0 !important; background: var(--card) !important;
  border-radius: var(--radius) !important; box-shadow: var(--card-shadow); padding: 10px 12px !important; color: var(--text); min-height: 60px; }
.ma-list-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ma-list-t .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-list-go { color: var(--muted); font-size: 1.4rem; }
/* 💚 „Magamért” a „Ma” oldalon */
.ma-self { display: flex; flex-direction: column; gap: 8px; background: var(--accent-soft); border-radius: var(--radius); padding: 12px; }
/* fix méret (nem méretezhető): 3 sor, hogy a minta-szöveg (placeholder) telefonon is kiférjen */
.ma-self textarea, .hd-self-ta { width: 100%; height: calc(3 * 1.45em + 22px); line-height: 1.45; resize: none; border-radius: 12px; font: inherit; font-size: 1rem; }
/* írás közben és mentés után UGYANAKKORA (Andras: ne ugráljon alatta minden): a Mentés gomb a mező jobb alsó sarkában */
.ma-self, .ma-self-done { height: 116px; box-sizing: border-box; }
.ma-self { position: relative; }
.ma-self textarea { height: 92px; padding-right: 112px; } /* a Mentés gomb (kb. 90 px + 8 px rés) ne lógjon rá a szövegre */
.ma-self .primary { position: absolute; right: 20px; bottom: 20px; min-height: 36px; border-radius: 10px; padding: 0 16px; }
.ma-self-done { display: flex !important; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0 !important; overflow: hidden;
  background: var(--accent-soft) !important; border-radius: var(--radius) !important; padding: 12px 14px !important; color: var(--text); }
.ma-self-t { flex: 1; min-width: 0; font-weight: 600; line-height: 1.4; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ma-self-ed { color: var(--accent); }
.hd-selfl { display: flex; flex-direction: column; gap: 4px; background: var(--accent-soft); border-radius: 12px; padding: 10px; }
.hw-dot.green.full { background: var(--green); border-color: var(--green); }
/* 🧍 „Nyújtózz egyet” (posture.js): ízületes figura (posefig.js, 2026-11-01) — a mozgást JS végzi, itt csak a színek */
:root { --pf-ink: #2B2622; --pf-far: #A79A8E; --pf-prop: #CDBFAE; --pf-bg: var(--accent-soft); }
:root[data-theme="dark"] { --pf-ink: #F1E9DF; --pf-far: #8A7E73; --pf-prop: #5E544B; --pf-bg: var(--accent-soft); }
.pf { display: block; overflow: visible; }
.pf-big { width: 190px; height: 250px; margin: 6px auto 2px; }
.pf-bg { fill: var(--pf-bg); }
.pf-l { stroke: var(--pf-ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pf-h { stroke-width: 9.5; }
.pf-f { stroke-width: 7; }
.pf-n { stroke-width: 7; }
.pf-fg { stroke-width: 3; }
.pf-far { stroke: var(--pf-far); }
.pf-t, .pf-hd { fill: var(--pf-ink); }
.pf-t { stroke: var(--pf-ink); stroke-width: 3; stroke-linejoin: round; }
.pf-hl { stroke: var(--brand); }
.pf-t.pf-hl, .pf-hd.pf-hl { fill: var(--brand); }
.pf-far.pf-hl { stroke: color-mix(in srgb, var(--brand) 55%, var(--card)); }
.pf-sh { fill: rgba(23, 19, 15, .09); }
.pf-prop { fill: none; stroke: var(--pf-prop); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pf-wall { fill: var(--pf-prop); opacity: .45; }
.pf-glow { fill: var(--brand); }
.pf-gz { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.pf-tg { fill: var(--brand); opacity: .6; }
.st-sheet { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; }
.st-sheet > p { margin: 0; }
.st-title { margin: 2px 0 6px !important; font-family: var(--font-head); }
.st-tip { background: var(--accent-soft); border-radius: 12px; padding: 8px 12px; }
.st-steps { margin: 8px 0 4px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.st-acts { display: flex; gap: 10px; margin-top: 12px; }
.st-acts button { flex: 1; min-height: 50px; border-radius: 10px !important; font-weight: 700; }
.st-timer { --t: 0%; background: linear-gradient(90deg, var(--accent-soft) var(--t), var(--card) var(--t)) !important; border: 2px solid var(--accent) !important; color: var(--accent); }
.st-next { align-self: center; margin: 10px 0 4px; min-height: 44px; font-weight: 700; }
.st-note { text-align: center; }
/* 🧺 „Mit főzzek?” (pantry.js) és a „Mi ez az étel?” szöveges mezője */
.pt-modal textarea { height: calc(3 * 1.45em + 18px); line-height: 1.45; resize: none; font-size: 1rem; }
.pt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-acts .primary { margin-left: auto; min-height: 44px; border-radius: 10px; padding: 0 18px; }
.pt-acts .ai-pick { min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; }
.pt-modal [hidden] { display: none !important; } /* a display:flex ne írja felül az elrejtést */
.pt-modal > * { flex-shrink: 0; } /* sok találatnál se nyomódjon össze a mező (az ablak görgethető) */
.pt-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--accent-soft); border-radius: 12px; padding: 8px; }
.pt-res { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pt-have { color: var(--accent); font-weight: 600; }
.pt-miss { color: var(--warn); }
.pt-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pt-btns button { min-height: 36px; border-radius: 10px !important; white-space: nowrap; }
/* „AI dolgozik” sáv (aibusy.js): felül, rögzítve, az időzítők alatt; minden felugró ablak fölött */
.ai-dock { position: fixed; left: 50%; transform: translateX(-50%); top: calc(6px + env(safe-area-inset-top) + var(--top-off, 0px));
  width: min(460px, calc(100vw - 16px)); z-index: 70; pointer-events: none; }
.ai-dock[hidden] { display: none; }
.ai-row { position: relative; overflow: hidden; border: 2px solid #8b5cf6 !important; padding-right: 14px; }
.ai-row .ai-dock-badge { flex: none; font-size: .78rem; }
.ai-dock-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(139, 92, 246, .18); }
.ai-dock-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: #8b5cf6; border-radius: 99px; animation: aiSlide 1.4s ease-in-out infinite; }
@keyframes aiSlide { from { left: -35%; } to { left: 100%; } }
/* webes receptkeresés találatai: mini-értékelés, az ajánlott kiemelve */
.web-res li { align-items: flex-start; flex-wrap: wrap; }
.web-main { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* keskeny képernyőn a gomb a szöveg alá kerül */
.web-sum { color: var(--text); line-height: 1.35; }
.web-best { border: 2px solid var(--green) !important; }
.web-pick { align-self: flex-start; font-size: .72rem; font-weight: 800; color: #fff; background: var(--green); border-radius: 6px; padding: 1px 8px; }
.web-nofit { margin: 6px 0; background: var(--sun-soft); color: var(--text); border-radius: 10px; padding: 8px 10px; }
.ai-box.web-best { border: 2px solid var(--green); }
.ai-box > .web-pick { margin-bottom: 2px; }
.web-res li > button { align-self: center; flex: none; margin-left: auto; min-height: 40px; }
/* Receptek keresés: a „nem neked való” találatok külön, összecsukható csoportban; allergén miatt rejtettek csak névvel */
.rc-others { grid-column: 1 / -1; background: var(--peach-soft); border-radius: var(--radius); padding: 10px 12px; }
.rc-others > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; }
.rc-others > summary::-webkit-details-marker { display: none; }
.rc-others > summary::before { content: '›'; font-size: 1.3rem; color: var(--warn); transition: transform .2s; }
.rc-others[open] > summary::before { transform: rotate(90deg); }
.rc-others-body { overflow: hidden; } /* a lenyitás animációja a magasságot mozgatja (recipes.js) */
.rc-others-body > p { margin: 4px 0 10px; }
.rc-others > summary::before { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.rc-dim { opacity: .78; }
.rc-allergy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #FDECEA; border-radius: var(--radius); padding: 10px 12px; }
:root[data-theme="dark"] .rc-allergy { background: #3a1513; }
.rc-allergy-b { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-allergy-b button { min-height: 40px; border-radius: 10px !important; }
/* Receptek: keresés szövegből AI-val (a találatok alatt, a rács teljes szélességében) */
.rc-aisearch { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px;
  background: var(--accent-soft); border-radius: var(--radius); }
.rc-aisearch button { min-height: 44px; border-radius: 10px !important; font-weight: 700; }
/* naponta többször elvégzendő feladat: számláló gomb „1/3” (koppintva +1), mellette „−” */
.cnt-wrap { display: flex; flex-direction: row-reverse; align-items: center; gap: 2px; flex: none; }
.cnt-btn { min-width: 52px; height: 40px; flex: none; padding: 0 10px !important; border-radius: 10px !important; border: 2px solid var(--line) !important;
  background: var(--card) !important; font: 800 .95rem var(--font-head); color: var(--text); }
.cnt-btn.full { background: var(--green) !important; border-color: var(--green) !important; color: #fff; }
.cnt-minus { width: 34px; height: 34px; flex: none; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--muted); font-size: 1.3rem; }
/* Lista: a frissen felvett tétel egyszer felvillan (a kategóriájával együtt felülre kerül) */
/* az új tétel felvillanása: lekerekített „pirula” a sor mögött, kicsit túlnyúlva a kártya belső margójába (Andras, 2026-10-14:
   eddig a sor széléig érő, levágott — szögletes — sáv volt a kerek kártyában); felvillanás közben a sor nem vág le semmit */
.li-row.li-new { overflow: visible; }
.li-row.li-new .li-fg::before { content: ''; position: absolute; inset: 3px -8px; z-index: -1; border-radius: 14px; pointer-events: none;
  background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); animation: liNew 1.6s var(--ease-out, ease) forwards; }
@keyframes liNew { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
/* ⚡ a másik családtag új tétele (élő frissítés): felülről a helyére pottyan, kicsit rugózva, mögötte kék pirula,
   mellette pár mp-ig a felíró neve (lists.js `li-drop`, `--d` = egymás utáni tételek késleltetése) */
.li-row.li-drop { overflow: visible; animation: liDrop .6s cubic-bezier(.3, 1.45, .5, 1) var(--d, 0ms) backwards; }
@keyframes liDrop { 0% { opacity: 0; transform: translateY(-28px) scale(.95); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.li-row.li-drop .li-fg::before { content: ''; position: absolute; inset: 3px -8px; z-index: -1; border-radius: 14px; pointer-events: none;
  background: var(--sky-soft); box-shadow: inset 0 0 0 2px var(--sky); animation: liNew 2.4s var(--ease-out, ease) var(--d, 0ms) both; }
.li-by { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: .68rem; font-weight: 800;
  background: var(--sky-soft); color: #1d6f9c; animation: liBy 3.2s ease forwards; }
:root[data-theme="dark"] .li-by { color: #8fd0f2; }
@keyframes liBy { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.ls-title { margin: 0; font-family: var(--font-head); font-size: 1.3rem; }
.ls-sec { margin-top: 12px; }
.ls-sec h3 { margin: 0 0 2px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ls-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ls-row .jt-chk { width: 30px; height: 30px; border-radius: 50%; }
.ls-row .jt-chk:checked { background-size: 18px; }
.ls-n { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.ls-q { white-space: nowrap; }
.ls-row.done .ls-n { color: var(--muted); text-decoration: line-through; }
.ls-row.done { opacity: .75; }
.ls-finish { width: 100%; margin-top: 14px; min-height: 48px; }
.ls-open { display: block; text-align: center; margin: 14px 0 6px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 10px; }
.ac-on { color: var(--accent); }
/* súly a „Ma” oldalon (ha a profilban kérted) */
.ma-wt { display: flex; align-items: center; gap: 8px; background: var(--sun-soft); border-radius: var(--radius); padding: 10px 12px; }
.ma-wt-ic { font-size: 1.4rem; flex: none; }
.ma-wt-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ma-wt-l { color: var(--sun-ink); font-weight: 700; }
.ma-wt-val { width: 4.6ch; border: 0 !important; background: transparent !important; padding: 0 !important; font: 800 1.45rem var(--font-head) !important; color: var(--text); min-height: 0; }
.ma-wt-val.ghost { color: var(--muted); }
/* keret nélküli nagy szám-mezők (súly): fókusznál doboz helyett finom aláhúzás */
.ma-wt-val, .jw-val { border-bottom: 2px dashed transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.ma-wt-val:hover, .jw-val:hover { border-bottom-color: var(--line) !important; }
.ma-wt-val:focus, .jw-val:focus { outline: none !important; border-bottom: 2px solid var(--accent) !important; color: var(--text); }
.ma-wt-kg { font: 700 1rem var(--font-head); color: var(--muted); margin-left: 2px; }
.ma-wt-pm, .ma-wt-ok-btn { width: 44px; height: 44px; flex: none; padding: 0 !important; border: 0 !important; border-radius: 14px !important;
  background: var(--card) !important; color: var(--sun-ink); font: 800 1.3rem var(--font-head); box-shadow: var(--card-shadow); }
.ma-wt-ok-btn { background: var(--green) !important; color: #fff; }
/* a súly-kártya mérés előtt és után is pontosan ugyanakkora (eddig utána kis pirula lett, és alatta minden feljebb ugrott) */
.ma-wt { height: 68px; box-sizing: border-box; }
/* 💪 tömegnövelés: súlytempó-javaslat (today.js gainTrendHtml, 2026-10-20) */
.ma-gain { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--sky-soft); }
.ma-gain.fast { background: var(--peach-soft, var(--sun-soft)); }
.ma-gain p { margin: 0; font-size: .9rem; line-height: 1.4; }
.ma-gain-b { display: flex; gap: 8px; }
.ma-gain-b button { min-height: 40px; }
.ma-wt-done { width: 100%; border: 0 !important; background: var(--sun-soft) !important; border-radius: var(--radius) !important; padding: 10px 12px !important;
  text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.ma-wt-v { font: 800 1.45rem var(--font-head); }
.ma-wt-edit { flex: none; color: var(--sun-ink); font-weight: 700; font-size: .85rem; padding-right: 4px; }
.ma-wt-ok { color: var(--green); font-weight: 800; }
.ma-sec { margin: 8px 4px 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ma-meal { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 10px; cursor: pointer; }
.ma-meal.done { opacity: .75; }
/* víz-emlékeztető beállítása az „Én” oldalon */
.en-water { gap: 8px; }
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.w-grid label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.w-grid input, .w-grid select { width: 100%; min-height: 44px; color: var(--text); }
.w-unit { display: flex; align-items: center; gap: 6px; color: var(--text); }
.w-plan, .w-ok { margin: 0; }
.w-ok { color: var(--accent); font-weight: 600; }
.w-tests { display: flex; flex-wrap: wrap; gap: 8px; }
.w-rec, .w-test { align-self: flex-start; border-radius: 10px !important; font-weight: 600; min-height: 44px; }

/* lépésszámláló az „Én” oldalon: heti oszlopok, célvonal, beállítási leírás */
.en-steps { gap: 8px; }
.st-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 130px; padding-top: 4px; }
.st-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.st-val { font-size: .66rem; color: var(--muted); font-weight: 600; }
.st-col { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; background: var(--peach-soft); border-radius: 8px; overflow: hidden; }
.st-col i { display: block; width: 100%; background: var(--peach); border-radius: 8px; transition: height .8s var(--ease-out, ease); }
.st-col i.ok { background: var(--green); }
.st-lbl { font-size: .72rem; font-weight: 700; color: var(--muted); }
.st-day.today .st-lbl { color: var(--accent); }
.st-col { position: relative; }
.st-gl { position: absolute; left: -3px; right: -3px; height: 0; border-top: 2px dashed var(--accent); opacity: .55; } /* a napi cél szintje */
.st-help summary { cursor: pointer; font-weight: 650; color: var(--accent); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.st-help ol { padding-left: 20px; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; }
.st-help code { font-size: .8em; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
.st-url { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0; }

/* víz-mennyiség választó (a „Ma” víz-gyűrűjét hosszan nyomva) */
.w-minus { margin-top: 4px; min-height: 44px; color: var(--warn); }
.w-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.w-amounts button { min-height: 48px; text-align: center !important; font-weight: 700; background: var(--sky-soft) !important; border: 0 !important; color: #1d6f9c; }
/* 🥛 (2026-11-01) felül pohárban — ezt tudják az emberek; alatta a pontos mennyiségek halványabban */
.w-glasses { grid-template-columns: repeat(4, 1fr); }
.w-glasses button { min-height: 54px; font-size: .92rem; white-space: nowrap; padding: 0 4px !important; }
/* 🥛📷 pohárméret fotóból (Én → Víz) */
.w-gphoto { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-top: 10px; border-radius: 16px; background: var(--bg); cursor: pointer; min-height: 56px; }
.w-gphoto.busy { opacity: .55; pointer-events: none; }
.w-gphoto-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.w-gphoto-ic .ic { width: 20px; height: 20px; color: var(--text); }
.w-gphoto-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-gphoto-t b { font-weight: 650; }
.w-gres { margin: 8px 2px 0; animation: fadeUp .25s ease both; }
.w-gres p { margin: 0 0 8px; }
.w-gres.err { color: var(--warn); }
.wm-glass .w-gphoto { margin: 10px 0 2px; text-align: left; }
.wm-glass .w-gres { text-align: left; }
.w-or { margin: 10px 0 6px; }
.w-or + .w-amounts button { min-height: 42px; font-weight: 600; background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.w-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; margin-top: 4px; }
.w-custom input { width: 5em; }
.ma-book { display: none; border: 0 !important; background: transparent !important; font-size: 1.2rem; padding: 6px !important; }
@media (hover: hover) { .ma-book { display: block; } } /* egérrel nincs hosszú nyomás → külön gomb a recepthez */
.ma-meal .jt-chk { order: 2; } /* a DOM-ban a pipa az első (a <label> azt kapcsolja), látszani a 📖 után */
.ma-thumb { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.ma-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.ma-txt b { font-size: .98rem; }
.ma-tag { align-self: flex-start; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 8px; border-radius: 6px; }
.tag-reggeli { background: var(--sun-soft); color: var(--sun-ink); } .tag-ebed { background: var(--accent-soft); color: var(--accent); }
.tag-snack { background: var(--peach-soft); color: var(--warn); } .tag-vacsora { background: var(--berry-soft); color: var(--berry-ink); }
.ma-empty { border: 2px dashed var(--line) !important; background: transparent !important; border-radius: var(--radius) !important; padding: 16px !important; color: var(--muted); text-align: center; }
.ma-remind { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); background: var(--peach-soft); border-radius: 16px; padding: 12px 14px; font-size: .88rem; }
.ma-remind span:nth-child(1) { flex: 1; }
.ma-go { color: var(--warn); font-weight: 700; white-space: nowrap; }
.ma-tip { margin: 4px; }
[data-recipe] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Én */
.en-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.en-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.en-head select { padding: 2px 8px; margin-left: 4px; }
.en-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 14px 16px; }
.en-row { display: flex; justify-content: space-between; align-items: center; }
.en-row b, .en-card > b { font-family: var(--font-head); }
.en-go { color: var(--muted); font-size: 1.3rem; }
/* Én: ikonrács (Andras, 2026-10-10: a beállítások ikonok mögött, több fér ki egyszerre) */
.en-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.en-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 86px; min-width: 0; padding: 8px 4px; text-align: center;
  text-decoration: none; color: var(--text); background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--card-shadow); cursor: pointer; font: inherit; }
button.en-tile { background: var(--card); border: 0; }
.en-tile:active { transform: scale(.96); }
.en-ic { font-size: 1.7rem; line-height: 1.2; }
.en-lb { font-family: var(--font-head); font-weight: 650; font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-sb { font-size: .72rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-spark { width: 100%; height: 46px; margin-top: 6px; }
.en-spark polyline { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.en-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.en-set:last-child { border-bottom: 0; }
.en-set > span { display: flex; flex-direction: column; }
/* (2026-10-31, Andras: „a fehér gomb lent van, nem középen”) az általános mező-keret (1 px) és -belső tér ide nem kell — a
   gomb a keret belső széléhez igazodott, így lent / jobbra csúszott */
.en-toggle { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex: none; margin: 0; cursor: pointer; transition: background .15s;
  border: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
.en-toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
.en-toggle:checked { background: var(--green); }
.en-toggle:checked::after { left: 23px; }
.en-copy { text-align: center; margin: 8px 0 0; }
/* egységes aloldal-fejléc (Andras, 2026-10-10: a „‹ Én” mindenhol másképp nézett ki): kerek vissza gomb + nagy cím (+ jobbra egy gomb) —
   Én aloldalai, Étrend és adataim, Főzés, egy bevásárlólista, és a külön oldalak (admin, rendszer, képválasztó, adatvédelem) */
.pg-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; min-height: 44px; }
.pg-head h2 { flex: 1; min-width: 0; margin: 0; font: 800 1.25rem var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-head h1 { flex: 1; min-width: 0; margin: 0; font: 800 1.35rem/1.25 var(--font-head); }
.pg-back { flex: none; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; display: grid; place-items: center;
  background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--text); text-decoration: none; cursor: pointer; transition: transform .15s; }
.pg-back svg { width: 22px; height: 22px; margin-left: -2px; }
.pg-back:hover { color: var(--accent); }
.pg-back:active { transform: scale(.92); }
/* az Én aloldalain a cím már a fejlécben van — a kártya saját címsora ne ismételje */
.en-sec > .en-card > b:first-child, .en-sec > .en-card > .en-row:has(> b:only-child) { display: none; }
/* Étrend és adataim: a keretes csoportok címe a kártyán belül, mint az Én kártyáin (nem a keret vonalán) */
.pf-diet > legend, .pf-apply > legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font: 700 1rem var(--font-head); }
.pf-diet > legend + *, .pf-apply > legend + * { clear: both; }
.pf-title { grid-column: 1 / -1 !important; font: 700 1rem var(--font-head); }
.en-sec > .en-card > :is(b:first-child, .en-row:has(> b:only-child)) + p { margin-top: 0; }
/* receptválasztó telefonon: alsó lap fejléccel, sötétített háttérrel */
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.picker-head b { font-family: var(--font-head); }
.picker-close { border: 0 !important; background: var(--bg) !important; border-radius: 50% !important; width: 36px; height: 36px; padding: 0 !important; font-size: 1rem; }
.picker:not(.sheet) .picker-head { display: none; }
.picker-bg { position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .4); }
.picker.sheet { top: 14vh; border-radius: 24px 24px 0 0; }
.picker.sheet .picker-detail { display: none; } /* telefonon a lista a fontos; a részletek hosszú nyomásra / a receptben */
.picker.sheet .picker-list .opt { padding: 12px 16px; border-bottom: 1px solid var(--line); }
body:has(.picker.sheet) { overflow: hidden; }

/* ---- 4. lépés: Terv — a „C” kockarács (2026-10-17 óta gépen is: a régi heti táblázat oldalra görgetett — Andras) ---- */
#tervezes .week-scroll { display: none; }
.plan-day { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
@media (min-width: 701px) {
  #tervezes > .toolbar { display: none; }
  #tervezes:not(.tasks) #plan-tasks { display: none; }
  #tervezes.tasks #plan-tasks { margin-top: 0; }
  #tervezes.tasks #plan-tasks > .te:first-child > h3 { display: none; }
  .plan-day { margin-inline: auto; }
}
@media (max-width: 700px) {
  #tervezes .toolbar { gap: 8px 10px; margin-bottom: 12px; }
  #tervezes .weeknav { flex: 1 1 100%; gap: 6px; }
  #tervezes .weeknav strong { flex: 1; min-width: 0; text-align: left; font: 800 1.2rem var(--font-head); }
  #tervezes .weeknav button:not(.link) { width: 44px; height: 44px; padding: 0; border-radius: 14px; font-size: 1.3rem; }
  #fill-random { order: 2; margin-left: auto; border-radius: 10px; border: 0; box-shadow: var(--card-shadow); font-weight: 600; min-height: 44px; }
  #tervezes .toolbar .chk { order: 1; flex: 1 1 0; min-width: 0; font-size: .82rem; line-height: 1.3; color: var(--muted); }
}
/* 🗓️ telefonos Terv: „C” látványterv (2026-10-10) — fejléc, hétváltó, 7 × 4 rács, alatta a kijelölés */
@media (max-width: 700px) {
  #tervezes > .toolbar { display: none; } /* a hétváltó, ★ és a „Hét kitöltése” a fejlécbe / ⋯ menübe került */
  #tervezes:not(.tasks) #plan-tasks { display: none; } /* ✅ Feladataim: külön lap */
  #tervezes.tasks #plan-tasks { margin-top: 0; }
  #tervezes.tasks #plan-tasks > .te:first-child > h3 { display: none; } /* a cím már a lap fejlécében van */
}
.pc-head { display: flex; align-items: center; gap: 8px; }
.pc-head h2 { flex: 1; min-width: 0; margin: 0; font: 800 1.45rem var(--font-head); }
/* fejléc-ikonok: vonalas ikon + apró felirat, háttér-karika nélkül (Andras, 2026-10-10) */
.pc-ic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 54px; height: 50px; padding: 2px 4px !important;
  border: 0 !important; border-radius: 14px !important; background: transparent !important; box-shadow: none; color: var(--text); flex: none; transition: background .15s, transform .15s; }
.pc-ic svg { width: 24px; height: 24px; }
.pc-ic span { font-size: .6rem; font-weight: 650; color: var(--muted); letter-spacing: -.01em; }
.pc-ic:hover { color: var(--accent); }
.pc-ic { position: relative; }
.pc-ic .pc-badge { position: absolute; top: 0; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #7C5CD6; color: #fff;
  font: 800 .62rem/18px var(--font, inherit); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 400px) { .pc-head { gap: 2px; } .pc-ic { min-width: 50px; } }
.pc-ic:active { background: var(--accent-soft) !important; transform: scale(.94); }
.pc-wl svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 2px; color: var(--muted); }
.pc-today { flex: none; min-height: 40px; border: 0 !important; border-radius: 10px !important; padding: 0 14px !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 800; }
/* a semmiből megjelenő étel (kitöltés, ötlet, csere) */
.pc-cell.pop { animation: cellPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes cellPop { 0% { transform: translateY(-10px) scale(.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
/* a rács oldalra húzható (hétváltás); az új hét a lapozás irányából csúszik be */
.pc-grid { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
#plan-day .pc-detail { touch-action: pan-y; } /* a rács alatt oldalra húzva napot vált (plan.js shiftDay, 2026-10-19) */
:is(.pc-grid, .pc-detail, .dl-log).wk-in-next { animation: calInNext .3s var(--ease-out, ease) both; }
:is(.pc-grid, .pc-detail, .dl-log).wk-in-prev { animation: calInPrev .3s var(--ease-out, ease) both; }
@media (prefers-reduced-motion: reduce) { :is(.pc-grid, .pc-detail, .dl-log).wk-in-next, :is(.pc-grid, .pc-detail, .dl-log).wk-in-prev { animation: none; } }

/* 📒 Rács · Napló kapcsoló + heti napló két hasábban (2026-10-31, naplo-javaslat.html „C”) */
.pc-vseg { display: flex; background: var(--line); border-radius: 12px; padding: 3px; margin: 10px 0 2px; }
.pc-vseg button { flex: 1; min-height: 36px; border: 0 !important; background: none !important; border-radius: 9px !important; padding: 0 !important; font-weight: 700; font-size: var(--fs-small); color: var(--text); box-shadow: none !important; }
.pc-vseg button.on { background: var(--btn) !important; color: var(--btn-ink) !important; }
.dl-log { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.dl-hd { display: grid; grid-template-columns: 52px 1fr 1fr; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dl-hd span { padding-left: 10px; }
.dl-day { display: grid; grid-template-columns: 52px 1fr 1fr; align-items: stretch; width: 100%; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
  background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; text-align: left; color: var(--text); min-height: 0; cursor: pointer; }
/* a mai keret a tartalom FÖLÖTT (a dátum-oszlop sárga háttere eltakarta a bal oldalát — Andras, 2026-11-01) */
.dl-day { position: relative; }
.dl-day.today::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--brand); pointer-events: none; }
.dl-day.past { opacity: .62; }
.dl-d { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sun-soft, #FFF3C4); line-height: 1.05; padding: 8px 0; }
.dl-d small { font-size: var(--fs-label); font-weight: 800; color: var(--accent); text-transform: uppercase; }
.dl-d b { font: 800 1.15rem var(--font-head); }
.dl-c { display: flex; flex-direction: column; justify-content: center; padding: 7px 10px; font-size: .8rem; line-height: 1.38; min-width: 0; }
.dl-c + .dl-c { border-left: 1px solid var(--line); }
.dl-c > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-e { color: var(--muted); }
.dl-x { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.dl-more { color: var(--accent); font-weight: 700; font-size: .74rem; }
.dl-tm { color: var(--warn); font-weight: 800; }
.dl-tip { margin: 4px 2px 0; font-size: var(--fs-small); color: var(--muted); text-align: center; }
/* a nap-lap: a recept-ablak (21) és a választó (30) a modal-bg (50) ALATT van → a lap addig elbújik (ds-hide) */
.ds-bg.ds-hide { visibility: hidden; pointer-events: none; }
.ds-sheet { display: flex; flex-direction: column; gap: 8px; }
.ds-head { display: flex; align-items: center; gap: 8px; }
.ds-title { flex: 1; text-align: center; display: flex; flex-direction: column; line-height: 1.2; }
.ds-title b { font: 800 var(--fs-sub) var(--font-head); }
.ds-title small { color: var(--muted); font-size: var(--fs-small); }
.ds-nav { width: 40px; height: 40px; min-height: 40px; border-radius: 50% !important; padding: 0 !important; border: 0 !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); font-size: 1.3rem; line-height: 1; }
.ds-l { margin: 6px 2px 0; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ds-card { background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); padding: 2px 12px; }
.ds-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); width: 100%; }
.ds-card > .ds-row:last-of-type { border-bottom: 0; }
button.ds-row, .ds-meal { border: 0 !important; background: none !important; padding: 6px 0 !important; text-align: left; color: var(--text); border-radius: 0 !important; box-shadow: none !important; min-height: 52px; }
.ds-meal { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0 !important; }
.ds-tm { width: 38px; flex: none; font-size: var(--fs-small); color: var(--muted); }
.ds-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.05rem; }
.ds-ic .ic { width: 17px; height: 17px; color: var(--muted); }
.ds-ic.ds-pic { position: relative; overflow: hidden; box-shadow: none; }
.ds-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.app .ds-pic img { pointer-events: none; }
.ds-n { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ds-n small { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
.ds-add .ds-n { color: var(--accent); }
.ds-empty .ds-n, .ds-moved .ds-n { color: var(--muted); }
.ds-todo.done .ds-n { color: var(--muted); text-decoration: line-through; }
.ds-todo > .ds-ck, .ds-todo > .cnt-wrap { order: 9; }
.ds-todo > .ds-x { order: 8; }
.ds-ck { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; min-width: 26px; margin: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); background: transparent center / 15px no-repeat; }
.ds-ck:checked { background-color: var(--green); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ds-x { flex: none; width: 36px; height: 36px; min-height: 36px; border: 0 !important; background: none !important; padding: 0 !important; color: var(--muted); font-size: 1.35rem; line-height: 1; }
.ds-sh { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0; color: var(--accent); font-weight: 700; font-size: inherit; }
.ds-none { margin: 10px 0; color: var(--muted); font-size: var(--fs-small); }
.ds-addrow { display: flex; gap: 8px; align-items: center; padding: 10px 0 4px; }
.ds-addrow input { flex: 1; min-width: 0; font-size: 16px !important; min-height: 44px; }
.ds-card > .ma-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 0 12px; }
/* 📅 több napra (2026-10-31): a naptár-gomb a beíró mező mellett + a napválasztó lap */
.ma-mdbtn { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border-radius: 12px !important; display: grid; place-items: center;
  background: var(--card) !important; color: var(--text) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line); }
.ma-mdbtn .ic { width: 20px; height: 20px; }
.md-nav { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--fs-small); }
.md-nav .ds-nav:disabled { opacity: .35; }
.md-sheet .md-days { padding: 0; }
.md-day { min-height: 48px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-weight: 800; }
.md-day small { font-size: var(--fs-label); font-weight: 700; }
.md-day:disabled { opacity: .3; }
.ds-ma { margin-top: 4px; border: 0 !important; background: none !important; color: var(--muted); font-weight: 600; font-size: var(--fs-small); min-height: 40px; }
/* ↔️ étel áthúzása: a felemelt „szellem” követi az ujjat, a forrás halvány, a cél kiemelve */
.pc-cell img { -webkit-touch-callout: none; pointer-events: none; } /* hosszú nyomásra ne jöjjön a kép mentése menü */
.pc-cell { -webkit-touch-callout: none; }
.pc-cell.pc-ghost { position: fixed !important; z-index: 300; margin: 0; pointer-events: none; opacity: .95; box-shadow: 0 14px 30px rgba(31, 42, 36, .28) !important; transition: none !important; animation: none !important; }
.pc-cell.drag-src { opacity: .25; }
.pc-cell.drop-on { box-shadow: 0 0 0 3px var(--accent) !important; transform: scale(1.1); opacity: 1; z-index: 2; transition: transform .12s, box-shadow .12s; }
/* a cél felirata (a lebegő étel fölött) és a „célkereszt” a rács szélén */
.pc-dropcap { position: fixed; z-index: 301; pointer-events: none; text-align: center; padding: 8px 12px; border-radius: 14px; background: var(--text); color: var(--bg);
  font-size: .8rem; font-weight: 600; line-height: 1.3; box-shadow: 0 10px 24px rgba(31, 42, 36, .25); }
.pc-dropcap b, .pc-dropcap span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-dropcap b { font-weight: 800; font-size: .84rem; }
.pc-dropcap.on { background: var(--accent); color: #fff; }
.pc-dh.drop-axis, .pc-sl.drop-axis { background: var(--accent) !important; color: #fff !important; }
.pc-dh.drop-axis small { color: #e3f7ec; }
html.pc-dragging, html.pc-dragging * { -webkit-user-select: none; user-select: none; cursor: grabbing; }
/* 🎲 a kijelölt nap / étkezés gyors sorsolása */
.pc-rand { border: 0 !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 700; border-radius: 16px !important; padding: 12px !important; min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .pc-cell.pop { animation: none; } }
.pc-week { display: flex; gap: 8px; }
.pc-nav, .pc-wl { min-height: 40px; border: 0 !important; background: var(--card) !important; box-shadow: var(--card-shadow); border-radius: 10px !important; font-weight: 700; color: var(--text); }
.pc-nav { width: 40px; padding: 0 !important; font-size: 1.2rem; flex: none; }
.pc-wl { flex: 1; font: 700 .95rem var(--font-head); }
.pc-grid { display: grid; grid-template-columns: 70px repeat(7, minmax(0, 1fr)); gap: 4px; background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 10px 8px; }
.pc-dh { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 3px 0 !important; min-height: 0; min-width: 0; width: 100%; border: 0 !important; background: none !important; border-radius: 9px !important;
  font: 800 .72rem var(--font-head); color: var(--text); }
.pc-dh small { font: 600 .62rem var(--font); color: var(--muted); }
/* nagyobb koppintási felület a rács fejlécein (a kinézet nem változik): láthatatlan ráhagyás a gomb körül */
.pc-dh, .pc-sl { position: relative; }
.pc-dh::after { content: ''; position: absolute; inset: -6px -2px -2px; } /* lefelé csak a résig — ne takarja a kockákat */
.pc-sl::after { content: ''; position: absolute; inset: -8px -4px; }
.pc-sl { overflow: visible !important; } /* a nevek kiférnek (az „Uzsonna” is) — a vágás elnyelte volna a ráhagyást */
.pc-dh.today { color: var(--accent); }
.pc-dh.on { background: var(--accent) !important; color: #fff; }
.pc-dh.on small { color: #e3f7ec; }
/* étkezés neve: balra igazítva (egy vonalban kezdődnek), kijelölve a szóra szabott kapszula, két oldalt egyforma hellyel —
   a szöveg kijelölve és anélkül is ugyanott áll (Andras, 2026-10-10: a teljes oszlopnyi zöld téglalapban balra lógott) */
.pc-sl { justify-self: start; align-self: center; width: auto; max-width: 100%; text-align: left; padding: 7px 8px !important; /* 8 px: 5 étkezésnél az „Uzsonna” is kifér */ min-height: 0; min-width: 0; height: auto; line-height: 1.2;
  border: 0 !important; background: none !important; border-radius: 10px !important; font-size: .74rem; font-weight: 700; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: -6px; }
.pc-sl.on { color: #fff; background: var(--accent) !important; }
.pc-sl.sl-tizorai.on { background: #2F8FC4 !important; } /* 🍓 Tízórai (5 étkezésnél) */
.tag-tizorai { background: var(--sky-soft); color: #1d6f9c; }
:root[data-theme="dark"] .tag-tizorai { color: #8fd0f5; }
.pc-sl.sl-reggeli.on { background: #C98A00 !important; } .pc-sl.sl-snack.on { background: #D2622F !important; } .pc-sl.sl-vacsora.on { background: #6B5CE0 !important; }
.pc-cell { position: relative; width: 100%; min-width: 0; height: auto; aspect-ratio: 1; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 9px !important; overflow: hidden; display: grid; place-items: center;
  font-size: .95rem; transition: opacity .2s, box-shadow .2s; }
.pc-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-cell.e { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.pc-cell.dim { opacity: .4; }
.pc-cell.sel { box-shadow: 0 0 0 2.5px var(--text); }
.pc-cell.in.e { box-shadow: inset 0 0 0 2px var(--accent); }
.pc-cell.done::after { content: '✓'; position: absolute; right: 1px; bottom: 0; font-size: .6rem; font-weight: 800; color: #fff; background: var(--accent); border-radius: 6px; padding: 0 3px; line-height: 1.4; }
.pc-detail { display: flex; flex-direction: column; gap: 10px; }
.pc-kcal { font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.pc-kcal.over { color: #B4531F; background: var(--peach-soft); }
.pc-ideas { display: flex; align-items: center; gap: 6px; margin: -4px 0 2px 4px; overflow-x: auto; scrollbar-width: none; }
.pc-idea { flex: none; max-width: 70%; border: 0 !important; background: var(--card) !important; box-shadow: var(--card-shadow); border-radius: 10px !important; padding: 6px 12px !important;
  font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 36px; color: var(--text); }
.pc-big { background: var(--card); border-radius: 20px; box-shadow: var(--card-shadow); overflow: hidden; }
.pc-big-img { position: relative; display: grid; place-items: center; width: 100%; height: 130px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; font-size: 3.2rem; overflow: hidden; }
.pc-big-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-big-bd { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pc-big-n { font: 700 1.08rem/1.3 var(--font-head); }
.pc-acts { display: flex; gap: 6px; margin-top: 8px; }
.pc-acts button { flex: 1 1 auto; border: 0 !important; background: var(--bg) !important; border-radius: 10px !important; padding: 8px 10px !important; font-weight: 600; font-size: .82rem; min-height: 40px; white-space: nowrap; }
.pc-acts button:last-child { flex: 0 0 44px; }
/* üres kijelölt kocka (2026-10-14, „A1 + 2×2”): nagy kártya szaggatott „képhellyel”, két nagy gomb, alatta képes ötletek */
.pc-empty { background: var(--card); border-radius: 20px; box-shadow: var(--card-shadow); overflow: hidden; }
.pc-empty-img { display: grid; place-content: center; justify-items: center; gap: 4px; width: calc(100% - 20px); height: 118px; margin: 10px 10px 0; padding: 0 !important;
  border: 2px dashed var(--line) !important; border-radius: 14px !important; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--bg) 0 10px, color-mix(in srgb, var(--brand-soft) 45%, var(--bg)) 10px 20px) !important; }
.pc-empty-e { font-size: 2.3rem; line-height: 1; } .pc-empty-img small { font-size: .8rem; font-weight: 700; }
.pc-empty-bd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px 14px; }
.pc-empty-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; }
.pc-eb { min-height: 48px; border: 0 !important; border-radius: 14px !important; font-weight: 800; font-size: .92rem; }
.pc-eb.dark { background: var(--btn) !important; color: var(--btn-ink); } .pc-eb.brand { background: var(--brand) !important; color: #17130F; }
.pc-ideas-l { margin: 6px 4px -2px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc-ig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-ix { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 !important; border: 0 !important; border-radius: 16px !important; overflow: hidden;
  background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--text); text-align: left; font: inherit; }
.pc-ix:active { transform: scale(.97); }
.pc-ix-p { position: relative; display: grid; place-items: center; height: 92px; flex: none; font-size: 2rem; overflow: hidden; }
.pc-ix-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-ix-lk { position: absolute; top: 6px; left: 6px; font-size: .72rem; background: rgba(255, 255, 255, .92); padding: 1px 6px; border-radius: 6px; }
.pc-ix-plus { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #17130F; display: grid; place-items: center;
  font-weight: 900; font-size: 1.1rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.pc-ix-t { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.pc-ix-t b { font-size: .84rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pc-ix-t small { font-size: .72rem; color: var(--muted); }
.pc-ix-more { align-items: center; justify-content: center; gap: 2px; min-height: 150px; text-align: center; border: 2px dashed var(--line) !important; background: transparent !important; box-shadow: none; }
.pc-ix-more span { font-size: 1.5rem; } .pc-ix-more b { color: var(--accent); font-size: .88rem; } .pc-ix-more small { font-size: .72rem; color: var(--muted); }
.pd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 4px 0; }
.pd-head b { font-family: var(--font-head); font-size: 1.05rem; }
.pd-more { color: var(--muted); font-size: 1.3rem; padding: 0 6px; }
.pd-empty-row { display: flex; gap: 8px; }
.pd-empty { flex: 1; border: 2px dashed var(--line) !important; background: transparent !important; border-radius: var(--radius) !important;
  padding: 16px 12px !important; color: var(--muted); text-align: center; min-height: 64px; }
.pd-rand { width: 64px; flex: none; border: 2px dashed var(--line) !important; background: transparent !important; border-radius: var(--radius) !important; font-size: 1.4rem; padding: 0 !important; }
.pd-copy { border: 0 !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 700; border-radius: 16px !important; padding: 13px !important; }
/* ===== Terv — új nap- és kockanézet (2026-10-17, Andras jóváhagyta: Design-vászon „Terv — új napnézet és kockanézet”) ===== */
.pd-head2 { display: flex; align-items: center; gap: 10px; margin: 2px 2px 0; }
.pd-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pd-ht b { font: 800 1.12rem var(--font-head); }
.pd-ht small { font-size: .8rem; color: var(--muted); }
.pd-ht small b { font: 800 .8rem var(--font); color: var(--text); }
.pd-ht small b.pd-over { color: #B4531F; }
.pd-fill { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px !important; border: 0 !important; border-radius: 12px !important;
  background: var(--accent-soft) !important; color: var(--accent); font-weight: 800; font-size: .86rem; }
.pd-fill svg { width: 17px; height: 17px; }
/* „↻ Mint tegnap” (2026-10-18): másodlagos — kártya-fehér, hogy a „Kitöltés” maradjon a fő gomb; a kettő között kisebb hézag */
.pd-fill.pd-copy { background: var(--card) !important; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); padding: 0 12px !important; }
.pd-copy + .pd-fill { margin-left: -4px; }
.pd-copy .pd-s { display: none; }
/* keskeny telefonon (≤ 420 px), ha mindkét gomb látszik: „↻ Tegnapi” + csak a 🎲 ikon — így a nap összesítője nem törik 3 sorra */
@media (max-width: 420px) {
  .pd-head2:has(.pd-copy) .pd-copy .pd-l { display: none; }
  .pd-head2:has(.pd-copy) .pd-copy .pd-s { display: inline; }
  .pd-head2:has(.pd-copy) .pd-fill:not(.pd-copy) { padding: 0 12px !important; }
  .pd-head2:has(.pd-copy) .pd-fill:not(.pd-copy) .pd-l { display: none; }
}
.pd-meal { position: relative; }
.pd-qa { display: flex; gap: 4px; flex: none; }
.pd-qa button { width: 40px; height: 40px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--bg) !important; color: var(--body, #4A4038); display: grid; place-items: center; }
.pd-qa button svg { width: 18px; height: 18px; }
.pd-qa button:hover { color: var(--accent); }
.pd-slot { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--line); background: color-mix(in srgb, var(--card) 55%, transparent); }
.pd-slot-h { display: flex; align-items: center; gap: 6px; }
.pd-slot-l { flex: 1; min-width: 0; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-pick { min-height: 40px; padding: 0 14px !important; border: 0 !important; border-radius: 12px !important; background: var(--btn) !important; color: var(--btn-ink) !important; font-weight: 700; font-size: .86rem; }
.pd-dice { width: 40px; height: 40px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--accent-soft) !important; font-size: 1.05rem; }
.pd-ideas { display: flex; flex-direction: column; gap: 6px; }
.pd-idea { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 6px 8px !important; border: 0 !important; border-radius: 12px !important; background: var(--card) !important;
  text-align: left; color: var(--text); box-shadow: none; }
@media (hover: hover) { .pd-idea:hover { box-shadow: 0 4px 14px rgba(23, 19, 15, .08); } }
.pd-idea.wish { box-shadow: inset 0 0 0 2px #B9A6F5; }
.pd-idea-p { position: relative; width: 38px; height: 38px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 1.1rem; pointer-events: none; }
.pd-idea-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-idea-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pd-idea-t b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-idea-t small { font-size: .72rem; color: var(--muted); }
.pd-idea-plus { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; }
/* kockanézet */
.pc-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 8px !important; border: 0 !important; border-radius: 10px !important;
  background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--body, #4A4038); font-weight: 700; font-size: .84rem; }
.pc-back svg { width: 16px; height: 16px; }
.pc-big-tag { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-size: .68rem !important; font-weight: 800; border-radius: 6px; padding: 4px 10px; background: var(--card) !important; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.pc-chips span { font-size: .76rem; font-weight: 700; background: var(--bg); border-radius: 10px; padding: 5px 10px; }
.pc-chips span.ok { color: var(--green-ink); background: var(--green-soft); }
.pc-acts2 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 44px; gap: 6px; margin-top: 6px; }
.pc-acts2 button { min-height: 44px; padding: 0 8px !important; border: 0 !important; border-radius: 12px !important; background: var(--bg) !important; font-weight: 700; font-size: .86rem; color: var(--text); }
.pc-acts2 .pc-a-main { background: var(--btn) !important; color: var(--btn-ink) !important; }
.pc-acts2 .pc-a-del { background: var(--warn-soft) !important; color: var(--warn); font-weight: 800; }
.pc-note { margin: 0; padding: 11px 14px; border-radius: 16px; background: var(--sun-soft); font-size: .84rem; color: var(--text); }
.pd-tip { margin: 4px; }
/* allergia: feltűnő piros jelzések (kártyán jelvény, receptben sáv), a profilban kiemelt rész */
.allergy-badge { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: 6px; background: #D93025; color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4; }
/* ⚠️ allergén-csipeszek mindenhol (allergen-javaslat.html): piros = te, narancs = a háztartás más tagja, szürke = egyéb
   (a szürke egy fokkal erősebb a látványtervnél — Andras, 2026-10-10) */
.alg-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.alg { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; line-height: 1.3; padding: 2px 8px 2px 6px; border-radius: 6px; white-space: nowrap;
  background: #ECE6DC; color: #3D4842; box-shadow: inset 0 0 0 1px #D9CFBF; }
.alg.me { background: #D93025; color: #fff; box-shadow: none; }
.alg.hh { background: #FFF1DD; color: #A65200; box-shadow: inset 0 0 0 1.5px #F2C38B; }
.alg.ok { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.alg.more { background: transparent; box-shadow: none; color: var(--muted); padding-left: 2px; font-variant-numeric: tabular-nums; }
/* receptkártya: mindig egy sor — a fitAlgRows rejti el, ami nem fér ki, és írja ki „+N allergén”-nek */
.alg-row.fit { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.alg-row.fit > .alg { flex-shrink: 0; }
.alg-row.fit > .alg[hidden] { display: none; }
.alg.more.pill { background: var(--chip-bg, #EEEAE0); color: var(--muted); padding: 2px 7px; }
:root[data-theme="dark"] .alg.more.pill { background: #3a3a35; }
:root[data-theme="dark"] .alg:not(.me, .hh, .ok, .more) { background: #3a3a35; color: #e6e1d6; box-shadow: inset 0 0 0 1px #55524a; }
:root[data-theme="dark"] .alg.hh { background: #3d2a12; color: #ffc078; box-shadow: inset 0 0 0 1.5px #7a4c14; }
.rc-card:has(.alg.me), .ma-meal:has(.alg.me), .pc-big:has(.alg.me) { box-shadow: 0 0 0 2.5px #D93025, var(--card-shadow); }
.alg-box { background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 12px 14px; margin: 8px 0; }
.alg-box h3 { margin: 0 0 4px; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.alg-box .alg { font-size: .8rem; padding: 4px 10px 4px 7px; }
.alg-box p { margin: 8px 0 0; }
.alg-who { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 10px; font-size: .84rem; }
.ing-alg { display: inline-block; margin-left: 6px; font-size: .7rem; font-weight: 700; color: #4F5A53; white-space: nowrap; }
.ing-alg.me { color: #C2271D; } .ing-alg.hh { color: #A65200; }
.alg-dot { position: absolute; top: 2px; right: 2px; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #D93025; box-shadow: 0 0 0 1.5px #fff; }
.alg-dot.hh { background: #F08A1C; }
.allergy-banner { background: #FDECEA; border: 2px solid #D93025; color: #8C1D18; border-radius: 14px; padding: 10px 12px; margin: 6px 0 10px; font-size: .9rem; }
:root[data-theme="dark"] .allergy-banner { background: #3a1513; color: #ffb4ab; }
.pf-allergy { border: 2px solid #D93025; border-radius: 14px; padding: 10px 12px; margin: 10px 0; background: #FFF8F7; }
:root[data-theme="dark"] .pf-allergy { background: #2a1615; }
.pf-allergy h5 { margin-top: 0; color: #B3261E; }
.pf-allergy-note { margin: 6px 0 0; color: var(--muted); }
.fp-allergy { margin: 6px 0 0; color: #B3261E; font-weight: 600; }
/* sorsolási feltételek (hét kitöltése, 🎲 hosszú nyomás) */
.fp-lbl { margin: 10px 0 4px; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fp-lbl .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fp-sub { margin: 8px 0 2px; font-size: .78rem; font-weight: 700; color: var(--muted); } /* 🗂 diéta-csoport címe (plan.js) */
.fp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-row .rc-chip { min-height: 40px; }
.cell-rand, .pd-rand { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pd-clear { border: 0 !important; background: transparent !important; color: var(--warn); font-weight: 650; padding: 10px !important; min-height: 44px; }
.day-acts { display: flex; justify-content: space-between; gap: 6px; }
.day-acts .link.small { padding: 0; }
.pd-menu { display: flex; flex-direction: column; gap: 8px; }
.pd-menu h3 { margin: 0 0 6px; font-family: var(--font-head); }
.pd-menu p { margin: 0; }
.pd-menu button { text-align: left; min-height: 48px; font-size: 1rem; font-weight: 600; }
.pd-menu button.link { text-align: center; }
.pd-menu .pd-del { color: var(--warn); }

/* ---- 5. lépés: Receptek — kereső, címkék („csipeszek”), kártyák két (gépen több) oszlopban ---- */
.rc-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-width: 900px; }
.rc-search { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 4px 14px; }
.rc-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent; padding: 10px 0; font-size: 1rem; outline: none; }
/* kereső + „Szűrők” gomb egy sorban; alatta fix étkezés-kapcsoló; egysoros összefoglaló (ami nem fér ki: „…”) */
.rc-srow { display: flex; gap: 8px; align-items: stretch; }
.rc-srow .rc-search { flex: 1; min-width: 0; transition: box-shadow .15s; }
/* fókuszban a TELJES kereső kap keretet (a 🔍-vel együtt), nem a belső mező — különben „doboz a dobozban”,
   és a kurzor a belső doboz bal szélén állt (Andras, 2026-10-11) */
.rc-search input:focus { box-shadow: none !important; border: 0 !important; }
.rc-search:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.rc-fbtn { position: relative; flex: none; width: 52px; min-height: 52px; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
  background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--text); display: grid; place-items: center; }
.rc-fbtn svg { width: 22px; height: 22px; }
.rc-fbtn.on { color: var(--accent); }
.rc-fbtn i { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff;
  font: 800 .7rem/20px var(--font, inherit); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.rc-fbtn i[hidden] { display: none; }
.rc-seg { display: flex; gap: 2px; background: var(--line); border-radius: 14px; padding: 4px; }
.rc-seg button { flex: 1 1 0; min-width: 0; min-height: 38px; border: 0 !important; background: transparent !important; border-radius: 10px !important; padding: 0 2px !important;
  font-size: .82rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
.rc-seg button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.rc-sum { margin: 0 4px; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sum b { color: var(--text); font-weight: 700; }
/* a „Szűrők” alsó lap: fejléc · gördülő rész · gomb (a gomb NEM ragadós elem, hanem a lap saját, nem gördülő alja) */
.modal.rf-sheet { display: flex; flex-direction: column; max-height: min(88dvh, 760px); overflow: hidden; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
@media (max-width: 600px) { .modal.rf-sheet { max-height: calc(100dvh - max(calc(env(safe-area-inset-top) + 56px), 21vh)); } }
.rf-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.rf-h h3 { margin: 0; font-family: var(--font-head); }
.rf-h .link { font-weight: 700; color: var(--accent); min-height: 44px; padding: 0 4px !important; }
.rf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px 6px; }
.rf-tg { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.rf-tg small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.rf-l { margin: 16px 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rf-l span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rf-lrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.rf-lrow .rf-l { margin: 0; }
.rf-grp { margin: 14px 0 6px; font-size: .78rem; font-weight: 700; color: var(--muted); } /* 🗂 diéta-csoport (Szűrők lap) — NEM .rf-sub: az az űrlap alcíme (−6 px margó, összecsúszott) */
.rf-lrow:has(.rf-mode) .rf-l span { display: none; } /* a kapcsoló mellett nem fér ki a magyarázat */
.rf-mode { display: inline-flex; background: var(--line); border-radius: 6px; padding: 2px; flex: none; }
.rf-mode button { border: 0 !important; background: transparent !important; border-radius: 10px !important; padding: 0 10px !important; min-height: 30px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.rf-mode button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* törésnél a csipeszek egyforma magasak, egyforma résekkel */
.rf-chips button { min-height: 40px; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; background: var(--bg) !important;
  box-shadow: inset 0 0 0 1.5px var(--line); font-size: .85rem; font-weight: 650; color: var(--text); white-space: nowrap; }
.rf-chips button.on { background: var(--accent-soft) !important; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rf-go { flex: none; margin-top: 12px; min-height: 52px; font-size: 1rem; font-weight: 800; }
.rc-chip { flex: none; border: 0 !important; border-radius: 10px !important; background: var(--card) !important; box-shadow: var(--card-shadow);
  font-size: .85rem; font-weight: 600; color: var(--muted); padding: 8px 14px; min-height: 40px; white-space: nowrap; }
.rc-chip.on { background: var(--text) !important; color: var(--bg); box-shadow: none; }
.rc-bar { display: flex; align-items: center; gap: 8px; }
.rc-bar #rec-new { margin-left: auto; }
.rc-pill { border-radius: 10px !important; font-weight: 600; font-size: .85rem; min-height: 40px; }
button.rc-pill:not(.primary) { border: 0; box-shadow: var(--card-shadow); }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.rc-sent { grid-column: 1 / -1; height: 1px; margin-top: -12px; } /* a darabolt receptlista „figyelője” (recipes.js) */
.rc-card { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
@media (hover: hover) { .rc-card:hover { box-shadow: 0 0 0 2px var(--accent-soft), var(--card-shadow); } }
.rc-img { position: relative; height: 96px; display: grid; place-items: center; font-size: 2.5rem; }
.rc-img .fav { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; font-size: 1.35rem; padding: 0; }
.rc-img .fav:not(.on) { color: rgba(0, 0, 0, .3); }
.rc-slot { position: absolute; left: 8px; bottom: 8px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 8px; border-radius: 6px; }
.rc-bd { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
/* az allergén-sor mindig a kártya aljára igazítva — egy sorban lévő kártyákon egy vonalban (Andras, 2026-10-11) */
.rc-bd > .alg-row { margin-top: auto; padding-top: 5px; }
.rc-nm { font-size: .9rem; line-height: 1.25; font-weight: 650; }
.rc-mt { font-size: .74rem; color: var(--muted); }
.rc-badge { align-self: flex-start; font-size: .66rem; font-weight: 700; color: var(--muted); }
.rc-badge.mine { color: var(--accent); }
.rc-badge.no { color: var(--warn); }
.rc-none { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .rc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rc-img { height: 86px; font-size: 2.2rem; }
  /* a három gomb egy sorban maradjon (az AI-jelvénnyel is) — keskeny telefonon rövidebb feliratokkal, nem tör */
  .rc-pill { padding: 8px 11px !important; font-size: .8rem; white-space: nowrap; }
  .rc-bar { gap: 6px; }
}
/* (2026-10-28) 390 px-en (mai iPhone-ok) a „Mi ez az étel?” már nem fért ki — a „＋ Új” kilógott: 430 alatt a rövid „Mi ez?” */
@media (max-width: 430px) { .rc-long, .rc-long2 { display: none; } }
@media (max-width: 380px) { .rc-seg button { font-size: .76rem; } }
@media (max-width: 340px) { .rc-pill { padding: 8px 8px !important; } .rc-bar { gap: 4px; } }

/* ---- 6. lépés: Lista — szegmens-kapcsoló, beviteli sáv, nagy kerek pipák, összecsukható időszak, egy fő gomb ---- */
.shop-seg { display: flex; gap: 4px; background: var(--line); border-radius: 16px; padding: 4px; margin-bottom: 12px; max-width: 640px; }
.shop-seg button { flex: 1 1 0; min-width: 0; border: 0 !important; background: transparent !important; border-radius: 12px !important; padding: 9px 4px !important;
  font-size: .82rem; font-weight: 650; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; }
.shop-seg button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.shop-seg .lcount { font-size: .68rem; vertical-align: 1px; }
@media (max-width: 520px) { .shop-seg .seg-ic { display: none; } .shop-seg button { font-size: .78rem; padding: 9px 2px !important; } }
#bevasarlas .list-tabs { margin-bottom: 6px; padding: 2px 2px 6px; }
#bevasarlas .li-head { margin-bottom: 6px; }
/* beviteli sáv */
.li-add-wrap { background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 4px 4px 4px 14px; align-items: center; margin-bottom: 4px; }
.li-add-wrap input { border: 0 !important; background: transparent; padding: 10px 0; outline: none; }
#li-add-btn { width: 46px; height: 46px; padding: 0; border-radius: 13px; font-size: 1.5rem; line-height: 1; flex: none; }
.ac { right: 0; }
/* tételek: nagy kerek pipa */
.shop-check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); cursor: pointer; flex: none; }
.shop-check input[type=checkbox]:checked { border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px no-repeat; }
.li-row { min-height: 52px; }
.shop-check { gap: 12px; min-height: 44px; }
.shop-section { border: 0; }
/* „Terv alapján”: összecsukható időszak-választó */
.sp-sum { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; text-align: left; border: 0 !important; background: var(--card) !important;
  border-radius: 16px !important; box-shadow: var(--card-shadow); padding: 12px 14px !important; }
.sp-ic { font-size: 1.4rem; }
.sp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sp-txt b { font-family: var(--font-head); }
.sp-chev { color: var(--muted); transition: transform .15s; }
.sp-sum[aria-expanded="true"] .sp-chev { transform: rotate(180deg); }
.sp-box { max-width: 640px; background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 12px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.sp-box[hidden] { display: none; }
.sp-box .quick { align-self: stretch; gap: 8px; }
.sp-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-dates .field { flex: 1 1 140px; }
.sp-box p { margin: 0; }
#shop-notes { margin-top: 8px; }
.plan-item { min-height: 48px; }
.home-btn { min-height: 36px; }
/* alsó gombsor: egy fő gomb, a többi kicsi */
.shop-actions { justify-content: flex-start; align-items: center; }
.shop-actions #send-btn, .shop-actions #li-finish { min-height: 48px; font-weight: 700; padding: 10px 18px; }
#li-finish:not(:disabled) { background: var(--peach-btn); border-color: var(--peach-btn); box-shadow: 0 6px 16px rgba(226, 98, 47, .3); }
#li-finish:disabled { background: var(--line); border-color: var(--line); color: var(--muted); box-shadow: none; opacity: 1; }
.shop-stock { max-width: 900px; }

/* bevásárlási mód (💰 Spórolós · ✨ Minőségi) és becsült árak */
.pm-seg { display: inline-flex; gap: 4px; background: var(--line); border-radius: 6px; padding: 3px; margin: 0 0 10px; }
.pm-seg[hidden] { display: none; }
.pm-seg button { border: 0 !important; background: transparent !important; border-radius: 10px !important; padding: 7px 14px !important; font-weight: 650; font-size: .85rem; color: var(--muted); min-height: 38px; }
.pm-seg button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.cost-card { max-width: 640px; background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 10px 14px; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.cost-card:empty { display: none; }
.cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cost-row > b { font-family: var(--font-head); white-space: nowrap; }
.cost-alt { margin: 0 0 4px; }
.pi-price { display: block; font-size: .75rem; color: var(--accent); font-weight: 650; }
.pi-tip { display: block; color: var(--warn); font-size: .74rem; }
.cost-line { margin: 4px 0 8px; font-size: .9rem; }
/* hozzávaló ára a recept-ablakban: a sor végén, egy oszlopba igazítva */
.ing > span:first-child { flex: 1; min-width: 0; }
.ing-ft { min-width: 4.8em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); }
.price-row .stock-input input { width: 6.5em; }

/* AI-jelvény: minden gombon, ami AI-t hív (pénzbe kerül) — egységes, jól látható jel */
.ai-badge { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 7px; border-radius: 6px; font: 800 .66rem/1.5 var(--font);
  letter-spacing: .05em; color: #fff; background: linear-gradient(135deg, #7C6CF2, #B05CE0); box-shadow: 0 1px 3px rgba(84, 70, 201, .35); }
.ai-badge::before { content: '✦ '; font-weight: 400; }

/* Lista: telefonon az alsó gombsor a lebegő fülsor FÖLÖTT ragadjon (eddig a fülsor eltakarta) */
@media (max-width: 700px) {
  .shop-actions { bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 5; gap: 8px; padding: 8px 10px; margin: 0 -4px;
    border-top: 0; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); align-items: center; }
  .shop-actions .send-bar { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
  .shop-actions .send-bar select { flex: 1; min-width: 0; }
  .shop-actions #send-btn { flex: 1 1 100%; order: -1; }
  .shop-actions #li-finish { flex: 1 1 auto; min-width: 0; } /* a „Lista másolása” a ⋯ menüben */
}

/* =====================================================================================
   MOZGÁS — finom, „modern” átmenetek (Andras kérése):
   csíkok és gyűrű feltöltődése, fülváltáskor beúszó tartalom, rugalmasan nyíló ablakok.
   A rendszer „csökkentett mozgás” beállításánál minden kikapcsol (a fájl legvégén).
   ===================================================================================== */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.36, .64, 1); }

/* feltöltődés: a csíkok szélessége és a haladás-gyűrű (--p) animálható (today.js indítja a régi értékről) */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.ma-ring { transition: --p 1s var(--ease-out); }
.ma-bar i { transition: width .9s var(--ease-out); }
/* „hullámzó” fény a csíkon, amíg tölt */
.ma-bar i.filling::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%); animation: shine .9s var(--ease-out); }
@keyframes shine { to { transform: translateX(100%); } }
.ma-rg-ic.pop { display: inline-block; animation: pop .45s var(--ease-spring); }
button.ma-rg:active .ma-ring { transform: scale(.94); }
.ma-ring { transition: --p 1s var(--ease-out), transform .12s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* a beúszó animáció alatt se jelenjen meg vízszintes görgetősáv (clip: nem lesz görgethető, a ragadós elemek maradnak) */
body > main { overflow-x: clip; }
/* fülváltás: az új oldal a fülsor irányából úszik be (előre: jobbról, vissza: balról) */
.view.in-fwd { animation: viewFwd .38s var(--ease-out); }
.view.in-back { animation: viewBack .38s var(--ease-out); }
@keyframes viewFwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes viewBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* kisebb váltások (Lista szegmensei, Terv napjai): rövid felúszás */
.fade-in { animation: fadeUp .3s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* fülre lépve az oldal EGYBEN úszik be, minden fülön ugyanúgy (2026-10-31, Andras: a Terv fentről lefelé „töltődött”,
   a többi fül nem — nem illett hozzájuk). A régi elemenkénti, lépcsőzetes beúszás megszűnt. */

/* felugró ablak (recept): a háttér elsötétül, az ablak rugalmasan érkezik; bezáráskor gyorsabban távozik */
.backdrop { display: block; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.backdrop.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.backdrop { touch-action: none; overscroll-behavior: contain; } /* az érintés ne jusson az alatta lévő oldalhoz (app.js) */
.drawer { transform: translate(-50%, -47%) scale(.96); transition: opacity .2s ease, transform .2s ease-in, visibility .2s; }
.drawer.open { transform: translate(-50%, -50%); transition: opacity .3s ease, transform .45s var(--ease-out), visibility 0s; }
@media (max-width: 600px) {
  .drawer { transform: translateY(100%); transition: transform .28s cubic-bezier(.4, 0, 1, 1), visibility .28s; }
  .drawer.open { transform: none; transition: transform .5s var(--ease-out), visibility 0s; }
}
/* kisebb ablakok (menük, kérdések, víz, AI) és a receptválasztó */
.modal-bg { animation: bgIn .25s ease; }
.modal-bg > .modal { animation: popIn .4s var(--ease-out); }
@keyframes bgIn { from { background: rgba(0, 0, 0, 0); } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .modal-bg > .modal { animation: sheetUp .45s var(--ease-out); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
/* zárás (inputs.js: .modal-bg.closing, 0,2 mp): a háttér elhalványul, az ablak lecsúszik (gépen kicsit összemegy) */
.modal-bg.closing { pointer-events: none; animation: bgOut .2s ease forwards; }
.modal-bg.closing > .modal { animation: popOut .2s ease-in forwards; }
@media (max-width: 600px) { .modal-bg.closing > .modal { animation: sheetDown .2s cubic-bezier(.4, 0, 1, 1) forwards; } }
@keyframes bgOut { to { background: rgba(0, 0, 0, 0); } }
@keyframes popOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sheetDown { from { transform: none; } to { transform: translateY(100%); } }
.picker-bg { animation: fadeOnly .25s ease; }
@keyframes fadeOnly { from { opacity: 0; } }
.picker.sheet { animation: sheetUp .45s var(--ease-out); }
.picker:not(.sheet) { animation: popIn .25s var(--ease-out); }
/* gombok: lenyomva enyhén „besüllyednek” */
button:active:not(:disabled), .rc-card:active, .ma-meal:active, .pd-meal:active { transform: scale(.97); }
button, .rc-card, .ma-meal, .pd-meal { transition: background-color .15s, border-color .15s, filter .15s, transform .12s ease; }

/* =====================================================================================
   Andras jegyzetei (2026-10-06): főzés mód, időzítők felül, lehúzható ablakok, víz-beállítás telefonon
   ===================================================================================== */
/* felugró ablakok telefonon: rögzített fogantyús sáv felül (innen lehúzható), a tartalom alatta görög — nem „folyik ki” */
@media (max-width: 600px) {
  .modal-bg > .modal { padding-top: 0; }
  .modal-bg > .modal::before { content: ''; position: sticky; top: 0; z-index: 3; flex: none; height: 26px; margin: 0 -20px -4px;
    background: linear-gradient(var(--muted), var(--muted)) center 10px / 44px 5px no-repeat, var(--card); opacity: 1; border-radius: 14px 14px 0 0;
    box-shadow: 0 10px 8px -2px var(--card); } /* finom áttűnés: a görgetett tartalom a sáv alatt elhalványul */
}

/* időzítők: felül, ragadósan, egymás alatt; a fejléc és a recept-ablak lejjebb kerül, hogy ne takarják egymást */
.timer-dock { top: calc(6px + env(safe-area-inset-top) + var(--bug-h, 0px)); bottom: auto !important; left: 50%; right: auto; transform: translateX(-50%);
  width: min(460px, calc(100vw - 16px)); max-width: none; z-index: 60; }
.dock-row { border: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); min-height: 48px; }
.dock-row button { min-width: 40px; min-height: 40px; border-radius: 12px; }
.dock-open { cursor: pointer; }
.dock-open small::after { content: ''; }
html.has-dock .top { position: static; } /* futó időzítőnél a fejléc görög a tartalommal, felül csak az időzítő marad */
html.has-dock body, html.bug-on body { padding-top: var(--top-off, 0px); } /* az oldal teteje (fejléc) ne bújjon az időzítő alá */
/* előkészítés (Főzés): összefoglaló kártyák a listában, a többi az alulról feljövő ablakban */
.cook-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; margin-bottom: 10px; }
.cook-sum h3 { margin: 0 0 2px; font-size: 1rem; }
.cook-sum .primary { flex: none; min-height: 40px; }
.cook-ask { display: flex; flex-direction: column; gap: 10px; background: var(--accent-soft); border-radius: 16px; padding: 14px; margin: 8px 0; }
.cook-ask p { margin: 0; }
.cook-ask button { min-height: 46px; }
.cook-portion { background: var(--sky-soft); border-radius: 16px; padding: 12px 14px; margin: 12px 0; }
.cook-portion h4 { margin: 0 0 6px; }
.cook-portion ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
#drawer .cook-actions { padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); }
#drawer .cook-actions button { width: 100%; min-height: 48px; font-weight: 700; }
#drawer .cook-actions.quiet button { background: none; border: 1px solid var(--line); color: var(--muted); font-weight: 600; box-shadow: none; }
@media (max-width: 600px) {
  .drawer { top: var(--top-off, 0px); height: calc(100dvh - var(--top-off, 0px)); }
}

/* recept-ablak: a névre koppintva másol */
.rec-title { cursor: copy; }
.rec-title:active { background: var(--accent-soft); border-radius: 6px; }

/* főzés mód: nagy, könnyen pipálható lépések és allépések, haladás-csík; megnézéskor nincs pipa */
.gstep { grid-template-columns: 40px 1fr; }
.gstep.cookmode { grid-template-columns: auto 40px 1fr; cursor: pointer; border-width: 2px; }
.gstep.cookmode .gcheck input, .gsub input { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; margin: 4px 0 0; border-radius: 10px;
  border: 2px solid var(--line); background: var(--card); cursor: pointer; flex: none; }
.gsub input { width: 26px; height: 26px; margin: 0; border-radius: 8px; }
.gstep.cookmode .gcheck input:checked, .gsub input:checked { border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.gstep.cookmode.done { opacity: .5; }
.gsubs { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.gsub { display: flex; align-items: center; gap: 10px; padding: 6px 4px; min-height: 40px; cursor: pointer; }
.gsub.done { color: var(--muted); text-decoration: line-through; }
/* lépés-kártya elrendezése: felül egy sorban pipa · ikon · cím, alatta a tartalom a kártya TELJES szélességén
   (Andras: kevesebb üres hely bal oldalt). A .gtext „feloldódik”, a gyerekei közvetlenül a rácsba kerülnek. */
.gstep { align-items: center; row-gap: 6px; }
.gstep > .gtext { display: contents; }
.gstep > .gtext > * { grid-column: 1 / -1; margin: 0; }
.gstep > .gtext > strong { grid-column: -2 / -1; grid-row: 1; align-self: center; line-height: 1.3; }
.gstep .gcheck, .gstep .gico { grid-row: 1; align-self: center; }
.gstep .gcheck input { margin: 0 !important; }
.gstep > .gtext > .gpar, .gstep > .gtext > button.timer { justify-self: start; }
.gsub { justify-content: flex-start; }
.gsub .muted { margin-left: auto; font-size: .8rem; }
.gprogress { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; font-size: .9rem; }
.gprogress .ma-bar i { transition: width .4s var(--ease-out); }
.gnotes { background: var(--sun-soft); border-radius: 14px; padding: 10px 14px; margin-top: 10px; font-size: .9rem; }
.gnotes h5 { margin: 0 0 4px; }
.gnotes p { margin: 4px 0; }

/* víz-emlékeztető beállítás: a mezők ne lógjanak ki a dobozból (iPhone időmező) */
.w-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.w-grid label { min-width: 0; }
.w-grid input, .w-grid select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.w-grid input[type=time] { -webkit-appearance: none; appearance: none; display: block; text-align: left; padding: 8px 12px; }
.w-unit input { flex: 1; width: auto; }

/* ===== 📷 RECEPT-FOTÓK (photos.js) — fotó nélkül marad a színes emoji ===== */
.rc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: phIn .35s var(--ease-out) both; }
.rc-img:has(.rc-photo) .fav:not(.on) { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.rc-img .fav, .rc-img .rc-slot { z-index: 1; }
.ph-thumb { overflow: hidden; background: var(--line); position: relative; }
.ph-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-ic { font-size: 1.4rem; } /* csak akkor látszik, ha a kép nem jön be */
.rec-hero { position: relative; margin: 0 -20px 14px; aspect-ratio: 4 / 3; max-height: 46vh; width: calc(100% + 40px); overflow: hidden; background: var(--line); }
.rec-hero img { width: 100%; height: 100%; object-fit: cover; display: block; animation: phIn .4s var(--ease-out) both; }
.rec-hero-btn { position: absolute; right: 12px; bottom: 12px; border: 0 !important; border-radius: 10px !important; min-height: 44px; padding: 8px 16px !important;
  background: rgba(20, 28, 24, .72) !important; color: #fff !important; font-weight: 650; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rec-ill { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 6px; font-size: .72rem; font-weight: 700;
  background: rgba(255, 255, 255, .85); color: #1F2A24; }
.rec-addphoto { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 14px; padding: 22px 12px !important; min-height: 92px;
  border: 2px dashed var(--line) !important; background: transparent !important; border-radius: var(--radius) !important; color: var(--text); font-weight: 650; font-size: 1rem; }
.rec-addphoto:hover { border-color: var(--accent) !important; }
.ph-hint { padding: 0 4px; }
/* „✥ Melyik rész látsszon?” — a keret a receptkártya arányával (2:1) */
.ph-crop { display: flex; flex-direction: column; gap: 10px; }
.ph-crop h3 { margin: 0; font-family: var(--font-head); }
.ph-crop p { margin: 0; }
.pc-frame { position: relative; aspect-ratio: 2 / 1; border-radius: 18px; overflow: hidden; background: var(--line); cursor: grab; touch-action: none;
  box-shadow: 0 0 0 3px var(--accent); user-select: none; -webkit-user-select: none; }
.pc-frame.dragging { cursor: grabbing; }
.pc-frame img, .pc-mini img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.pc-minis { display: flex; gap: 18px; align-items: flex-end; }
.pc-minis figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-mini { display: block; overflow: hidden; background: var(--line); }
.pc-sq { width: 56px; height: 56px; border-radius: 16px; }
.pc-43 { width: 96px; height: 72px; border-radius: 10px; }
@media (min-width: 701px) { .rec-hero { margin: 0 0 14px; width: 100%; border-radius: var(--radius); } }
/* 📖 recept nézet „C” (Andras, 2026-10-11 — recept-javaslat.html) */
.rv-hero { position: relative; margin: -6px -20px 0; height: min(62vw, 300px); overflow: hidden; display: grid; place-items: center; }
.rv-hero .rec-hero { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; border-radius: 0; }
.rv-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.6)); pointer-events: none; z-index: 1; }
.rv-hero:not(.has-photo)::after { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.42)); }
.rv-emoji { font-size: 5.2rem; margin-bottom: 40px; }
.rv-hero .rec-ill { top: 16px; right: 12px; left: auto; bottom: auto; z-index: 2; } /* jobb fent (bal fent a gombok) */
@media (max-width: 600px) { .rv-hero .rec-ill { top: 64px; } } /* telefonon a lebegő × alatt */
/* 📸 Wolt-módra (Andras, 2026-10-18/19): telefonon a recept-ablak lap felül réssel és lekerekített sarkokkal, a kép a lap tetejéig ér,
   a lehúzó fül fehéren a képen; a fogantyú-zóna (drawer.js sheetDrag) ugyanúgy működik. Csak a recept-ablak
   (az első elem a .rv-hero) — a többi felugró ablak (lista-lap, főzés, űrlap) marad, ahogy volt. */
@media (max-width: 600px) {
  /* 2026-10-19 (Andras: „Wolton tetszik, hogy nem megy fel teljesen” — képpel): a recept-ablak LAP, nem teljes képernyő — felül
     rés (az állapotsor + 14 px), ahol halványan látszik az oldal, a lap teteje lekerekített; így az óra alá sem bújik semmi, és a
     fehér állapotsor-sáv (.drawer-cap) sem kell. A × és a fül a lap tetejéhez igazodik. */
  /* (2026-10-19 délután, Andras: „jöhet még lejjebb picit, hasonlóan a Wolthoz”: 14 px → a képernyő ~8%-a az óra alatt) */
  /* (2026-10-19 este, Andras: „pontosan, mint a Wolt” — a Wolt-képén a lap a képernyő ~21%-ánál kezdődik, az állapotsorral együtt) */
  #drawer:has(> .drawer-body > .rv-hero:first-child) { --sheet-gap: max(calc(env(safe-area-inset-top) + 56px), 21vh);
    top: calc(var(--top-off, 0px) + var(--sheet-gap)); height: calc(100dvh - var(--top-off, 0px) - var(--sheet-gap));
    border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    /* (2026-10-20, Andras képe: feltöltött fotó fölött vékony fehér csík) a lekerekített, görgethető lap fehér háttere a kép
       szélén „kiszivárgott” (Safari élsimítás, tört pixeles tetőnél még jobban) → a lap legteteje (a kép mögött) átlátszó, a háttér
       a tartalommal görög (local), és a tető egész pixelre kerekítve */
    background: linear-gradient(transparent 0 48px, var(--card) 48px) local; }
  #drawer .drawer-body > .rv-hero.has-photo:first-child { background-color: #2b2622; } /* amíg a fotó betölt: ne látsszon át */
  @supports (top: round(1.5px, 1px)) {
    #drawer:has(> .drawer-body > .rv-hero:first-child) { top: round(calc(var(--top-off, 0px) + var(--sheet-gap)), 1px); }
  }
  body.drawer-on:has(#drawer > .drawer-body > .rv-hero:first-child) .drawer-cap { display: none; }
  body.drawer-on:has(#drawer > .drawer-body > .rv-hero:first-child) .drawer-x { top: calc(var(--top-off, 0px) + max(calc(env(safe-area-inset-top) + 56px), 21vh) + 12px); }
  #drawer:has(> .drawer-body > .rv-hero:first-child) > .drawer-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; min-height: 0;
    height: 44px; padding: 0 !important; background: transparent; pointer-events: none; }
  #drawer:has(> .drawer-body > .rv-hero:first-child) .drawer-grip { top: 8px; background: #fff; opacity: .92;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
  #drawer:has(> .drawer-body > .rv-hero:first-child) > .drawer-body { padding-top: 0; }
  #drawer .drawer-body > .rv-hero:first-child { margin-top: 0; }
  /* a Pixabay-felirat és a × ne fedje egymást: a × a lap jobb felső sarkában van */
  #drawer:has(> .drawer-body > .rv-hero:first-child) .rv-hero .rec-ill { top: 62px; }
  /* lehúzáskor a bezárási határon túl (drawer.js `.drag-arm`): a fül megnő és kiemelődik — „engedd el, és bezárul” */
  .drawer-grip { transition: width .18s ease, margin-left .18s ease, opacity .18s ease, background-color .18s ease; }
  #drawer.drag-arm .drawer-grip { width: 68px; margin-left: -34px; opacity: 1; background: var(--brand); }
  /* 🔽 rögzített fogó (drawer.js floatGrip, 2026-10-27): görgetéskor is a lap tetején marad — a képen és a fehér tartalmon is látszik */
  #drawer .drawer-grip { display: none; }
  body.drawer-on .drawer-fgrip { display: block; position: fixed; z-index: 23; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 99px; pointer-events: none;
    top: calc(var(--top-off, 0px) + env(safe-area-inset-top) + 8px); background: rgba(40, 32, 26, .42); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
    animation: fadeIn .22s ease .2s backwards; }
  body.drawer-on:has(#drawer > .drawer-body > .rv-hero:first-child) .drawer-fgrip { top: calc(var(--top-off, 0px) + max(calc(env(safe-area-inset-top) + 56px), 21vh) + 8px); }
  @supports (top: round(1.5px, 1px)) {
    body.drawer-on:has(#drawer > .drawer-body > .rv-hero:first-child) .drawer-fgrip { top: calc(round(calc(var(--top-off, 0px) + max(calc(env(safe-area-inset-top) + 56px), 21vh)), 1px) + 8px); }
  }
  /* görgetett recept-lapon fehér sáv a fogó és a × mögött (drawer.js floatBand, 2026-10-28) — a tartalom nem lóg a × alá */
  body.drawer-on .drawer-band { display: block; position: fixed; z-index: 22; left: 0; right: 0; height: 60px; pointer-events: none;
    top: calc(var(--top-off, 0px) + env(safe-area-inset-top)); background: var(--card); border-radius: 22px 22px 0 0;
    box-shadow: 0 1px 0 var(--line), 0 6px 14px -10px rgba(0, 0, 0, .25); opacity: 0; }
  /* ✍️ a recept neve a fejlécben: a görgetés viszi ide a valódi név másolatát (drawer.js syncTitle); az opacity is a görgetéstől függ */
  .db-t { position: absolute; left: var(--db-l, 16px); right: 60px; top: 27px; opacity: 0; font: 800 18px/1.2 var(--font-head); letter-spacing: -.015em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.drawer-on .drawer-ftitle { position: fixed; z-index: 23; left: 0; top: 0; margin: 0; pointer-events: none; transform-origin: 0 0; will-change: transform; }
  body.rv-tfloat #drawer .rv-title { visibility: hidden; }
  body.drawer-on:has(#drawer > .drawer-body > .rv-hero:first-child) .drawer-band { top: calc(var(--top-off, 0px) + max(calc(env(safe-area-inset-top) + 56px), 21vh)); }
  @supports (top: round(1.5px, 1px)) {
    body.drawer-on:has(#drawer > .drawer-body > .rv-hero:first-child) .drawer-band { top: round(calc(var(--top-off, 0px) + max(calc(env(safe-area-inset-top) + 56px), 21vh)), 1px); }
  }
  body:has(#drawer.drag-arm) .drawer-fgrip { width: 68px; margin-left: -34px; background: var(--brand); box-shadow: none; }
  /* a tetején túlhúzva ne rugózzon (Andras videója: kilátszott a fehér háttér a kép fölött) */
  #drawer:has(> .drawer-body > .rv-hero:first-child) { overscroll-behavior-y: none; }
  /* felül halvány sötétítés: világos fotón is látszik a fül, a × és a kapszula */
  .rv-hero.has-photo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.14) 45%, rgba(0,0,0,0)); }
}
/* alul lágyabb, fokozatos átmenet a cím alatt (több megállóval — „easing” színátmenet, nem egyenletes sötét köd) */
.rv-hero.has-photo::after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,.05) 56%, rgba(0,0,0,.16) 66%,
  rgba(0,0,0,.34) 78%, rgba(0,0,0,.56) 90%, rgba(0,0,0,.68) 100%); }
/* a kép bal felső sarkában (2026-10-14, Andras: „A” — ikon-javaslat.html): egy elmosott fehér „kapszula”, benne
   ☆ · 📅 | 👍 · 👎 saját vonalas ikonnal; bekapcsolva: ☆ narancs kitöltés, 📅 narancs + napok száma, 👍 zöld, 👎 tompa piros */
.rv-hacts { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; align-items: center; padding: 0 4px; border-radius: 10px;
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 4px 16px rgba(0, 0, 0, .14); }
.rv-hsep { width: 1px; height: 22px; margin: 0 2px; background: rgba(23, 19, 15, .14); }
.rv-hb { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: none !important; box-shadow: none !important; color: #17130F; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.rv-hb:active { transform: scale(.88); }
.rv-hi { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.rv-hb[data-k="fav"][data-on], .rv-hb[data-k="plan"][data-on] { color: #E08A00; }
.rv-hb[data-k="fav"][data-on] .rv-hi { fill: var(--brand); stroke: #E08A00; }
.rv-hb[data-k="up"][data-on] { color: #2FA36B; } .rv-hb[data-k="up"][data-on] .rv-hi { fill: #2FA36B; fill-opacity: .18; }
.rv-hb[data-k="down"][data-on] { color: #D9534F; } .rv-hb[data-k="down"][data-on] .rv-hi { fill: #D9534F; fill-opacity: .18; }
.rv-hnum { position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--brand); color: #17130F;
  font: 800 .6rem/16px var(--font-body, 'Inter'), sans-serif; text-align: center; }
/* kis visszajelzés bekapcsoláskor: kipattan (+ szikrák a csillagnál), a hüvelykujj megbillen */
.rv-hb.pop .rv-hi { animation: rvPop .45s cubic-bezier(.3, 1.6, .5, 1); }
.rv-hb.tilt .rv-hi { animation: rvTilt .5s ease; }
@keyframes rvPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes rvTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg) scale(1.15); } 60% { transform: rotate(8deg); } }
.rv-spark { position: absolute; inset: 0; pointer-events: none; }
.rv-spark i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--brand); opacity: 0; }
.rv-hb.pop .rv-spark i { animation: rvSpark .5s ease-out; }
@keyframes rvSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
.rv-ov { position: absolute; left: 20px; right: 20px; bottom: 34px; z-index: 2; color: #fff; }
.rv-ov .ma-tag { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.rv-src { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.9); margin-left: 4px; }
.rv-title { margin: 6px 0 0; font: 800 1.4rem/1.2 var(--font-head); color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); cursor: pointer; }
.rv-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin: -24px 0 0; padding: 10px 2px; background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); }
.rv-stats div { text-align: center; border-right: 1px solid var(--line); min-width: 0; }
.rv-stats div:last-child { border-right: 0; }
.rv-stats b { display: block; font: 800 1.02rem var(--font-head); white-space: nowrap; }
.rv-stats span { font-size: .66rem; font-weight: 600; color: var(--muted); }
/* (2026-10-18, Andras: a számok 1 adagra szólnak — ez eddig nem látszott) alul mindig ott: „Fent: 1 adag · N adag összesen: …”;
   fix 2 sor magas, hogy az adagszám állításakor ne ugráljon a kártya */
.rv-stats .rv-stats-f { grid-column: 1 / -1; margin: 8px 10px 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: .74rem; line-height: 1.35; color: var(--muted); text-align: center;
  min-height: calc(3 * 1.35em); }
.rv-stats .rv-stats-f span { display: block; }
.rv-stats .rv-stats-f b { display: inline; font: inherit; font-weight: 700; color: var(--text); white-space: normal; margin-right: 3px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; }
.rv-chips .alg { font-size: .74rem; padding: 3px 9px 3px 7px; }
.rv-diet { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.rv-nofit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--peach-soft); }
.rv-note { margin: 10px 2px 0; }
.rv-h { margin: 20px 4px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* ➖➕ adag-választó a Hozzávalók fejlécében; a gombok 32 px-esek, de a koppintási felületük 44 px (::after) */
.rv-h-row { display: flex; justify-content: space-between; align-items: center; }
.rv-portion { display: inline-flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--text); }
.rv-portion b { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.rv-portion button { position: relative; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 10px; border: 0 !important;
  background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--accent); font-size: 1.15rem; font-weight: 700; line-height: 1; }
.rv-portion button::after { content: ''; position: absolute; inset: -6px; }
.rv-pnote { color: var(--warn); }
.rv-portion button:disabled { color: var(--muted); opacity: .45; box-shadow: none; }
.rv-card { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 6px 14px; }
/* 🛒 recept → bevásárlólista (recipes.js gomb, shopping.js openRecipeToList, 2026-10-20) */
.rv-tolist { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 8px 0 8px;
  border: 0 !important; border-radius: 12px !important; background: var(--brand-soft) !important; color: var(--text); font-weight: 800; font-size: .92rem; }
.rl-modal { display: flex; flex-direction: column; gap: 8px; }
.rl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; }
.rl-port { display: inline-flex; align-items: center; gap: 10px; }
.rl-port button { width: 40px; height: 40px; border-radius: 50% !important; padding: 0 !important; font-size: 1.1rem; }
.rl-lbl { margin: 6px 0 0; font-weight: 800; font-size: .85rem; }
.rl-items { display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto; }
.rl-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px !important; text-align: left; border-radius: 12px !important;
  background: var(--bg) !important; border: 0 !important; color: var(--muted); font: inherit; }
.rl-it.on { color: var(--text); background: var(--card) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.rl-ck { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: .8rem;
  box-shadow: inset 0 0 0 2px var(--line); }
.rl-it.on .rl-ck { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.rl-n { flex: 1; min-width: 0; }
.rl-n em { font-style: normal; font-size: .75rem; color: var(--muted); margin-left: 4px; }
.rl-q { flex: none; font-size: .85rem; font-weight: 700; }
/* 📖 összecsukott elkészítés (recipes.js, 2026-10-20): az első lépések látszanak, alul lágyan elhalványul, alatta a nyitó gomb */
.rv-guide { position: relative; }
.rv-guide.shut { padding: 4px 10px; } /* csukva csak a nyitó gomb (Andras: „az első lépés nélkül is”) */
.rv-steps-t { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 4px 0 6px;
  border: 0 !important; border-radius: 12px !important; background: var(--brand-soft) !important; color: var(--text); font-weight: 800; font-size: .92rem; }
.rv-guide.shut .rv-steps-t { margin: 4px 0; }
.rv-ings .macros { display: none; } /* a számok fent, a kártyán vannak */
.rv-ings .ings { margin: 0; }
.rv-list { padding: 0 14px; }
.rv-more { border-bottom: 1px solid var(--line); }
.rv-list > :last-child, .rv-list > .rv-row:last-child { border-bottom: 0 !important; }
.rv-more-s, .rv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 0 !important; cursor: pointer;
  border: 0 !important; border-radius: 0 !important; background: none !important; text-align: left; color: var(--text); font: inherit; font-weight: 600; }
.rv-row { border-bottom: 1px solid var(--line) !important; }
.rv-more-r { color: var(--muted); font-weight: 500; font-size: .84rem; white-space: nowrap; }
.rv-more i, .rv-row i { font-style: normal; color: var(--muted); font-size: 1.2rem; display: inline-block; transition: transform .2s; }
.rv-more.open .rv-more-s i { transform: rotate(90deg); }
.rv-more-b { padding: 0 0 12px; }
.rv-more-b .alg-box, .rv-more-b .plan-card { box-shadow: none; padding: 0; margin: 0; background: none; }
.rv-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; margin: 18px -20px -40px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 35%); }
.rv-cook { flex: 1; min-height: 52px; border-radius: 16px !important; font-size: 1rem; font-weight: 800; box-shadow: 0 8px 18px rgba(31, 138, 86, .3); }
.rv-cook-gap { flex: 1; }
.rv-ic { width: 52px; height: 52px; flex: none; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--card) !important; box-shadow: var(--card-shadow); font-size: 1.3rem; color: var(--text); }
.rv-ic.on { color: #E0A400; }
@media (min-width: 701px) { .rv-hero { margin: 0; border-radius: var(--radius); } .rv-bar { margin-left: 0; margin-right: 0; border-radius: 0 0 16px 16px; } }
/* telefonon a gombsor NEM a görgethető ablakban van (iPhone: a ragadó elem miatt rossz helyre számolta a koppintásokat), hanem külön, rögzítve */
@media (max-width: 700px) {
  .drawer .rv-bar { display: none; }
  .drawer-body:has(.rv-hero) { padding-bottom: 110px; }
}
.rv-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; display: flex; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 0%, transparent), var(--card) 32%); animation: dockIn .55s .28s cubic-bezier(.22, .8, .24, 1) both; } /* késleltetve: ne lebegjen a lista fölött, amíg az ablak beúszik */
/* (2026-10-27, Andras: „picit lassabban, kevésbé hirtelen”) a „Főzöm most” sáv lágyan, lassan úszik be alulról */
@keyframes dockIn { from { opacity: 0; transform: translateY(28px); } 60% { opacity: 1; } }
@media (min-width: 701px) { .rv-dock { display: none; } }
/* választóból nyitva két gomb: egy sorban maradjon a felirat, egyforma szélesek */
.rv-dock button, .rv-bar button { white-space: nowrap; min-width: 0; }
.rv-dock:has(.rv-cook2) { padding-left: 16px; padding-right: 16px; }
.rv-dock .rv-cook2 { flex: 1 1 auto !important; padding: 0 10px !important; }
.rv-dock .rv-cook2 + button { flex: 1 1 auto; padding: 0 10px; }
@media (max-width: 370px) { .rv-dock:has(.rv-cook2) button { font-size: 14px; gap: 5px; } .rv-dock:has(.rv-cook2) { gap: 6px; } }
@keyframes phIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== 📱 TABLET: „Hét” heti tábla (week.js) — csak html.tablet alatt (érintőképernyő + ≥ 900 px, vagy ?tablet=1) ===== */
html:not(.tablet) .tab-het { display: none !important; }
:root { --appt: #D64545; }
:root[data-theme="dark"] { --appt: #FF8A80; }
.wk-time { color: var(--appt); font-variant-numeric: tabular-nums; }
.wk-strip { --wk-n: 4; --wk-gap: 12px; position: relative; display: flex; gap: var(--wk-gap); align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; }
.wk-strip::-webkit-scrollbar { display: none; }
.wk-strip { user-select: none; -webkit-user-select: none; cursor: grab; } /* húzáskor ne jelöljön ki szöveget */
.wk-strip.dragging { cursor: grabbing; }
.wk-strip input, .wk-strip button, .wk-meal { cursor: pointer; }
#het-body .wk-today { position: fixed; right: 16px; top: 8px; z-index: 21;
  min-height: 44px; padding: 0 20px !important; border-radius: 10px !important; border: 0 !important; background: var(--accent) !important; color: #fff !important;
  font-weight: 700; box-shadow: 0 6px 20px rgba(31, 42, 36, .25); margin: 0; }
#het-body .wk-today[hidden] { display: none; }
.wk-strip > .wk-day { flex: 0 0 calc((100% - (var(--wk-n) - 1) * var(--wk-gap)) / var(--wk-n)); } /* nincs „bepattanás” (Andras: darabosnak érződött) — szabad, folyamatos húzás */
.wk-day { background: var(--card); border-radius: 20px; box-shadow: var(--card-shadow); padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 4px;
  height: var(--wk-h, 70vh); overflow: hidden; }
/* a nap neve felül, a víz + „Időpont” alul marad; a középső rész görög, ha sok a teendő */
.wk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 6px; }
.wk-day.today { box-shadow: 0 0 0 3px var(--accent), var(--card-shadow); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.wk-day.past { opacity: .72; }
.wk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; border-bottom: 2px solid var(--line); padding-bottom: 6px; margin-bottom: 2px; }
.wk-head b { font-family: var(--font-head); font-size: 1.05rem; }
.wk-head span { color: var(--muted); font-weight: 650; font-size: .9rem; }
.wk-day.today .wk-head span { color: var(--accent); }
.wk-day h5 { margin: 8px 0 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wk-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: .98rem; line-height: 1.3; cursor: pointer; }
.wk-row .jt-chk { width: 28px; height: 28px; border-radius: 9px; flex: none; }
.wk-row.done .wk-t { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.wk-t { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word; hyphens: auto; padding-top: 3px; }
.wk-cnt { align-items: center; cursor: default; }
.wk-cnt .wk-t { flex: 1; padding-top: 0; }
.wk-cnt .cnt-wrap { flex: none; }
.wk-cnt .cnt-btn { min-width: 40px; min-height: 34px; font-size: .8rem; padding: 0 6px !important; }
.wk-water small { font-weight: 500; color: var(--muted); }
.wk-sub { font-size: .75rem; color: var(--muted); }
.wk-late { color: var(--appt); font-style: normal; font-weight: 800; margin-right: 4px; }
.wk-meal { all: unset; cursor: pointer; display: inline-flex; vertical-align: top; align-items: center; gap: 6px; min-width: 0; padding-top: 2px; }
.wk-meal .ph-thumb { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.wk-meal .ph-ic { font-size: .9rem; }
.wk-m:not(:has(.jt-chk)) { padding-left: 36px; }
.wk-xtra { cursor: default; }
.wk-ev { align-items: flex-start; }
.wk-x { margin-left: auto; border: 0 !important; background: transparent !important; color: var(--muted); font-size: 1.3rem; line-height: 1; min-width: 36px; min-height: 36px; padding: 0 !important; }
.wk-empty { border: 2px dashed var(--line) !important; background: transparent !important; color: var(--muted); border-radius: 12px !important; min-height: 40px; font-size: .88rem; padding: 4px 8px !important; text-align: left; }
.wk-none { margin: 2px 0; color: var(--muted); }
.wk-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.wk-water { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 48px; border-radius: 14px !important; background: color-mix(in srgb, #4AA8E0 14%, var(--card)) !important; border: 0 !important; font-weight: 650; padding: 6px 10px !important; }
.wk-water b { color: #1D6A9C; font-size: .85rem; white-space: nowrap; } /* (2026-11-02, átnézés: #2F86C0 3,8:1 volt) */
:root[data-theme="dark"] .wk-water b { color: #8CC8EE; }
.wk-water.full span::after { content: ' ✓'; }
.wk-add { min-height: 44px; border-radius: 12px !important; border: 2px dashed var(--line) !important; background: transparent !important; color: var(--muted); font-weight: 650; font-size: .88rem; }
.wk-evm { display: flex; flex-direction: column; gap: 12px; }
.wk-evm h3 { margin: 0; }
.wk-evm label { display: flex; flex-direction: column; gap: 4px; }
.wk-evm input { font-size: 16px; min-height: 44px; }
/* tableten nagyobb betűk a messzebbről olvasáshoz */
html.tablet main { max-width: none; }
html.tablet #het-body { font-size: 1.04rem; }
/* főzés tableten: szélesebb ablak, két hasáb, nagy betű */
.drawer.cook-wide { width: min(1240px, calc(100vw - 32px)); }
.cook2 { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 24px; align-items: start; font-size: 1.12rem; }
.cook2-ing { position: sticky; top: 64px; max-height: calc(100dvh - 140px); overflow: auto; background: var(--bg); border-radius: var(--radius); padding: 12px 14px; }
.cook2-steps { min-width: 0; }

/* ===== 🌐 FIÓK (account.js): belépés, háztartás, visszajelzés, frissítés-jelzés ===== */
body.login-mode > header, body.login-mode > main, body.login-mode > nav.tabs { display: none; } /* telefonon a fülsor a body gyereke (placeTabs) */
/* belépőképernyő — 2026-10-19 (Andras: „modernizáljuk”): telefonon felül a meleg háttéren logó + meghívó-kártya, alul fehér lap
   (lekerekített teteje, felúszik) a belépéssel; gépen ugyanez egy kártyában. A logó egyet „pattan”. */
.login { min-height: 100dvh; display: flex; justify-content: center; align-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(70% 45% at 50% 18%, var(--brand-soft) 0%, transparent 70%), var(--bg); }
.login-card { width: min(440px, 100%); background: var(--card); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(23, 19, 15, .12), var(--card-shadow); animation: fadeUp .6s var(--ease-out) both; }
.lg-top { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 36px 24px 26px;
  background: radial-gradient(80% 90% at 50% 0%, var(--brand-soft) 0%, transparent 75%), var(--bg); }
.login-logo { width: 92px; height: 92px; border-radius: 26px; box-shadow: 0 14px 30px rgba(23, 19, 15, .22); animation: pop .6s var(--ease-spring) .15s both; }
.login-card h1 { margin: 0; font: 900 2rem/1 var(--font-head); letter-spacing: -.03em; color: var(--text); }
.login-card h1.lg-wm img { display: block; height: 40px; width: auto; } /* (2026-11-08: a belépőn még „PeliCook” állt) */
:root[data-theme="dark"] .login-card h1.lg-wm img { filter: invert(1) hue-rotate(180deg); }
.login-tag { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 18rem; }
.lg-inv { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 6px; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--card);
  box-shadow: 0 8px 24px rgba(23, 19, 15, .08); font-size: .9rem; color: var(--muted); line-height: 1.35; animation: fadeUp .5s var(--ease-out) .25s both; }
.lg-inv b { color: var(--text); }
.lg-inv > span:last-child > b:first-child { display: block; font-size: 1rem; }
.lg-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent); font: 800 1.2rem var(--font-head); }
.lg-inv.warn { background: var(--warn-soft, #FFF1EC); }
.lg-inv.warn .lg-av { background: var(--warn); color: #FFF; }
.lg-sheet { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 26px 24px 22px; }
.lg-sheet h2 { margin: 0; font: 800 1.35rem var(--font-head); }
.lg-sub { margin: -8px 0 2px; color: var(--muted); font-size: .92rem; }
.login-g { min-height: 44px; }
.lg-steps { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lg-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--bg); font-size: .8rem; font-weight: 700; line-height: 1.25; }
.lg-steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); font: 800 .8rem var(--font-head); }
.lg-steps small { display: block; font-weight: 600; color: var(--muted); }
.login-privacy { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 2px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.login-privacy svg { flex: none; margin-top: 1px; }
.lg-web { font-weight: 700; font-size: .92rem; color: var(--accent); text-decoration: none; padding: 10px 14px; min-height: 44px; box-sizing: border-box; }
.login-dev, .login-choose { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.login-dev input { font-size: 16px; min-height: 44px; }
.login-choose button { min-height: 48px; font-size: 1rem; }
/* telefonon: teljes képernyő — felül a fejrész középen, alul a fehér lap */
@media (max-width: 600px) {
  .login { padding: 0; align-items: stretch; background: var(--bg); }
  .login-card { width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none; background: transparent; animation: none; }
  .lg-top { flex: 1; justify-content: center; padding: calc(28px + env(safe-area-inset-top)) 20px 28px; background: radial-gradient(90% 55% at 50% 30%, var(--brand-soft) 0%, transparent 75%); }
  .lg-sheet { background: var(--card); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgba(23, 19, 15, .10); padding: 26px 20px calc(16px + env(safe-area-inset-bottom));
    animation: lgUp .6s var(--ease-out) .1s both; }
}
@keyframes lgUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .login-card, .login-logo, .lg-inv, .lg-sheet { animation: none; } }
.hh-card { gap: 10px; }
.hh-members { display: flex; flex-wrap: wrap; gap: 12px; }
.hh-m { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; }
.hh-m img, .hh-m > b { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.1rem; }
.hh-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.hh-btns button, .btn-like { min-height: 44px; }
.btn-like { display: inline-flex; align-items: center; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.hh-invite { display: flex; flex-direction: column; gap: 8px; background: var(--accent-soft); border-radius: var(--radius); padding: 12px; }
.hh-invite input { font-size: 16px; width: 100%; }
.hh-invite[hidden] { display: none; }
/* betöltés: üres képernyő helyett lüktető logó (csak ha ~0,3 mp-nél tovább tart, hogy gyors netnél ne villanjon) */
.boot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 28vh; color: var(--muted); font-weight: 600;
  opacity: 0; animation: bootIn .3s ease .15s forwards; }
/* (2026-10-28, átnézés: belépéskor / meghívóból jövet ~1 mp-ig az üres app-keret látszott — fejléc gombok + alsó menü tartalom
   nélkül) amíg az app nem töltött be, csak a logó és a „Betöltés…” látszik */
html:not(.ready) body:not(.login-mode) .tabs, html:not(.ready) header.top .fb-btn, html:not(.ready) #hh-btn { visibility: hidden; }
.boot img { width: 56px; height: 56px; animation: bootPulse 1.2s ease-in-out infinite; }
html.ready .boot { display: none; }
@keyframes bootIn { to { opacity: 1; } }
@keyframes bootPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .boot img { animation: none; } }

/* Étrend / allergiák / étrendi döntések: csipesz-gombok a régi apró, natív jelölőnégyzetek helyett (mint a Receptek szűrői) */
.pf-sens { gap: 8px; }
.pf-sens label.chk, .pf-diet-q label.radio { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font-size: .92rem; user-select: none; -webkit-user-select: none;
  transition: background .15s, border-color .15s, color .15s; }
.pf-sens label.chk input, .pf-diet-q label.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pf-sens label.chk:has(input:focus-visible), .pf-diet-q label.radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-sens label.chk:has(input:checked), .pf-diet-q label.radio:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.pf-sens label.chk:has(input:checked)::before { content: '✓'; }
/* az allergia piros: a bejelölt allergén figyelmeztető színű */
.pf-allergy .pf-sens label.chk:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

.pf-goal-off { display: block; padding: 10px 0 2px; }

/* ===== 🪟 Saját ablakok a natívak helyett (dialog.js; 2026-10-10): megerősítés, naptár, időválasztó ===== */
.dlg { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.dlg h3 { margin: 0; }
.dlg p { margin: 0; }
button.danger-btn { background: var(--warn) !important; border-color: var(--warn) !important; color: #fff !important; font-weight: 700; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-head b { font-family: var(--font-head); }
.cal-head button { width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; font-size: 1.3rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* hónapváltás: az új hónap a lapozás irányából csúszik be (gombbal és húzással is) */
.cal-grid.cal-in-next { animation: calInNext .3s var(--ease-out, ease) both; }
.cal-grid.cal-in-prev { animation: calInPrev .3s var(--ease-out, ease) both; }
@keyframes calInNext { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes calInPrev { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal-grid.cal-in-next, .cal-grid.cal-in-prev { animation: none; } }
.dlg-cal { overflow-x: hidden; }
.cal-grid i { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--muted); padding: 4px 0; }
.cal-grid button { aspect-ratio: 1; min-height: 40px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; font-weight: 600; }
.cal-grid .cal-pad { aspect-ratio: 1; min-height: 40px; } /* üres hely a 6. sorig — ugyanakkora, mint egy nap */
.cal-grid button:hover { background: var(--bg) !important; }
.cal-grid button.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-grid button.wk { background: var(--accent-soft) !important; color: var(--accent); }
.cal-grid button.on { background: var(--accent) !important; color: #fff; }
.cal-grid button:disabled { opacity: .3; }
.tp-big { text-align: center; font: 800 2rem var(--font-head); color: var(--accent); }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 220px; }
.tp-col { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 2px; border-radius: 14px; background: var(--bg); }
.tp-col button { flex: none; min-height: 44px; border: 0 !important; background: transparent !important; border-radius: 10px !important; font: 700 1.05rem var(--font-head); }
.tp-col button.on { background: var(--accent) !important; color: #fff; }
/* dátum- és időmező: a natív kinézet helyett az app mezője + kis ikon (a választó az app saját ablaka) */
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; min-height: 44px; cursor: pointer; font-size: 16px; text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a72' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px !important; }
input[type=time] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a72' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { display: none; }
/* „Adagok az egész appban”: a rádiógombok helyett választható kártyák */
.pf-apply label.radio { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 6px 0; border: 1.5px solid var(--line);
  border-radius: 14px; cursor: pointer; }
.pf-apply label.radio input { position: absolute; opacity: 0; pointer-events: none; }
.pf-apply label.radio::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); }
.pf-apply label.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pf-apply label.radio:has(input:checked)::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, var(--card) 50%); }
.pf-apply label.radio:has(input:disabled) { opacity: .55; cursor: default; }
.pf-apply label.radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* csúszka (admin AI-keret): saját sáv és fogantyú */
input[type=range] { -webkit-appearance: none; appearance: none; height: 32px; background: transparent; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: var(--line); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }

/* ===== ✍️ Beviteli mezők (2026-10-10, Andras: „az ilyen inputos nézet nem tetszik”) ===== */
/* lágyabb mezők: nincs nyújtó-fogantyú, fókuszban zöld keret + halvány „glória” a kemény körvonal helyett */
textarea { resize: none; line-height: 1.45; }
:is(input, textarea, select):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:is(input, textarea)::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
/* legördülő: saját nyíl (a natív helyett), a lenyíló lista az app alsó lapja (inputs.js) */
select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 34px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7a72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
.sel-sheet { display: flex; flex-direction: column; gap: 8px; max-width: 460px; max-height: min(80vh, 640px); }
.sel-sheet h3 { margin: 0; }
.sel-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; margin: 0 -6px; padding: 0 6px 4px; }
.sel-opt { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 14px !important; text-align: left;
  border: 0 !important; border-radius: 14px !important; background: transparent !important; font-weight: 550; }
.sel-opt:hover { background: var(--bg) !important; }
.sel-opt.on { background: var(--accent-soft) !important; color: var(--accent); font-weight: 750; }
.sel-tick { color: var(--accent); }
.sel-grp { margin: 8px 6px 2px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* 💬 visszajelzés: nagyobb, kártyaszerű szövegmező; a kép csatolása másodlagos (eddig nagy zöld sáv volt) */
.fb-modal textarea { min-height: 130px; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.fb-attach { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1.5px dashed var(--line); color: var(--text); font-weight: 600; font-size: .9rem; cursor: pointer; }
.fb-attach:hover { border-color: var(--accent); color: var(--accent); }

/* ===== 🛒 Lista főoldal + alnézetek (Listonic-szerűen, 2026-10-10) ===== */
.sh-h { margin: 6px 4px 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sh-h:not(:first-child) { margin-top: 18px; }
.sh-lists { display: flex; flex-direction: column; gap: 10px; }
.sh-card { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px !important; text-align: left;
  border: 0 !important; border-radius: var(--radius) !important; background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--text); font: inherit; cursor: pointer; }
.sh-card:active { transform: scale(.985); }
.sh-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); font-size: 1.3rem; }
.sh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-t b { font-size: 1.02rem; }
.sh-bar { display: block; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 4px; }
.sh-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.sh-go { color: var(--muted); font-size: 1.4rem; }
.sh-new { background: transparent !important; box-shadow: none; border: 2px dashed var(--line) !important; }
.sh-new .sh-ic { background: transparent; color: var(--accent); font-weight: 800; }
/* alnézet fejléce: ‹ Listák · cím · ⋯ */
.shop-sub-head { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; } /* (Andras: kis hely kell a fejléc és a mező közé) */
.shop-sub-head[hidden] { display: none; }
.shop-sub-head h2 { flex: 1; min-width: 0; margin: 0; font: 800 1.2rem var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-more[hidden] { display: none; }
#li-copy { display: grid; place-items: center; } #li-copy svg { width: 20px; height: 20px; } #li-copy[hidden] { display: none; }
/* lebegő ＋ (a lista nézetben): a „Mit kell venni?” mezőt nyitja */
/* a ＋ és mellette (ha van kipipált) a „🧹 N kipipált eltávolítása” — a body-ban (lists.js), csak a lista nézetben látszik */
.li-float { position: fixed; right: 18px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 12; display: none; align-items: center; gap: 10px;
  transition: transform .25s var(--ease-out, ease); pointer-events: none; }
body:has(#bevasarlas.active #shop-list-view:not([hidden])):not(.drawer-on) .li-float:not([hidden]) { display: flex; }
.li-float > * { pointer-events: auto; }
.li-fab { width: 60px; height: 60px; padding: 0 !important; flex: none;
  border-radius: 50% !important; font-size: 1.8rem; font-weight: 700; line-height: 1; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.li-clear-fab { min-height: 48px; padding: 0 18px !important; border-radius: 10px !important; border: 0 !important; background: var(--card) !important; color: var(--text);
  font-weight: 750; font-size: .92rem; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); animation: fadeUp .25s var(--ease-out, ease) both; }
.li-clear-fab[hidden] { display: none; }
/* a visszavonás-sáv ne takarja el a ＋ gombot: amíg látszik, a gomb fölé csúszik (Andras, 2026-10-10) */
body:has(.undo:not([hidden])) .li-float { transform: translateY(-64px); }
@media (min-width: 701px) { .li-float { bottom: 28px; right: 28px; } }
.li-add-wrap[hidden] { display: none !important; }
#shop-list-view { padding-bottom: 84px; } /* a lebegő gombok ne takarják az utolsó tételt / a becsült árat */
/* „🧹 N kipipált eltávolítása” a lista alján */
.li-clear { display: block; width: 100%; margin: 12px 0 0; min-height: 48px; border: 2px dashed var(--line) !important; background: transparent !important;
  border-radius: var(--radius) !important; color: var(--muted); font-weight: 650; }

/* ===== 🛒 Lista, Listonic-szerűen (2026-10-10) ===== */
/* egy sor: listaváltó (vízszintesen görgethető) + ⋯ menü; nincs külön névmező / törlés-sor / mód-kapcsoló a tetején */
.li-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.li-bar .list-tabs { flex: 1; min-width: 0; margin: 0 !important; padding: 2px 2px 4px !important; scrollbar-width: none; }
.li-bar .list-tabs::-webkit-scrollbar { display: none; }
.li-bar .ltab { min-height: 38px; }
.li-bar .ltab.add { min-width: 40px; padding: 6px 10px; font-weight: 700; }
.li-more { flex: none; width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: var(--card) !important;
  box-shadow: var(--card-shadow); font-size: 1.3rem; line-height: 1; color: var(--text); }
/* a „Mit kell venni?” mező görgetéskor a fejléc alatt marad — mindig elérhető */
#shop-list-view .li-add-wrap { position: sticky; top: calc(var(--top-h, 0px) + 6px); z-index: 8; margin-bottom: 10px; max-width: none;
  box-shadow: 0 -8px 0 4px var(--bg), var(--card-shadow); } /* a fejléc és a mező közti résben ne látsszon át a lista */
#shop-list-view .li-add-wrap input { font-size: 16px; padding: 10px 6px !important; min-width: 0; } /* min-width: 0 — különben a „✓ Kész” kicsúszott jobbra (Andras, 2026-10-14) */
/* fókuszban nem a mező kap keretet (az a fal mellől indult), hanem az egész kártya halvány zöld fényt */
#shop-list-view .li-add-wrap input:focus { border: 0 !important; box-shadow: none !important; }
#shop-list-view .li-add-wrap:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent), 0 -8px 0 4px var(--bg); }
/* javaslatok a lista elején, ugyanolyan kártyában és sorokban, mint a lista (nem lebegő doboz) */
#shop-list-view .ac.ac-inline { position: static; margin: 0 0 12px; padding: 4px 14px; border: 0; border-radius: var(--radius); background: var(--card);
  box-shadow: var(--card-shadow); max-height: none; overflow: visible; }
#shop-list-view .ac.ac-inline::before { content: 'Javaslatok'; display: block; padding: 10px 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
#shop-list-view .ac.ac-inline li { min-height: 52px; padding: 6px 0; margin: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#shop-list-view .ac.ac-inline li:last-child { border-bottom: 0; }
#shop-list-view .ac.ac-inline li.active { background: transparent; }
#shop-list-view .ac.ac-inline li:hover { background: transparent; }
#shop-list-view .ac.ac-inline li.ac-onlist { background: transparent; }
#shop-list-view .ac.ac-inline li.ac-onlist .ac-n { font-weight: 700; }
#shop-list-view .ac.ac-inline li.ac-custom .ac-n, #shop-list-view .ac.ac-inline li.ac-custom > span:first-child { font-weight: 700; }
.ac-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.ac-cat { display: inline-flex; align-items: center; gap: 6px; }
.ac-plus { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.1rem; }
#li-add-btn { width: 44px; height: 44px; padding: 0 !important; border-radius: 12px !important; font-size: 1.4rem; font-weight: 700; flex: none; transition: width .2s var(--ease-out, ease); }
/* ✕ a keresőkben (inputs.js): csak ha van beírt szöveg */
.in-clear { flex: none; width: 30px; height: 30px; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; display: grid; place-items: center;
  background: var(--line) !important; color: var(--muted); font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer; }
.in-clear:hover { color: var(--text); }
input:placeholder-shown + .in-clear { display: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* a böngésző saját ×-e helyett a miénk */
#li-add-btn.li-add-done { width: 84px; font-size: .95rem; white-space: nowrap; } /* üres mezőnél „✓ Kész” */
/* javaslatok: a listán már rajta lévők elöl, zöld pipával és „＋1”-gyel */
.ac { max-height: min(60vh, 420px); overflow-y: auto; }
.ac li { min-height: 44px; align-items: center; }
.ac li.ac-onlist { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.ac li.ac-onlist + li:not(.ac-onlist) { border-top: 1px solid var(--line); }
.ac-tick { color: var(--accent); }
/* (Andras, 2026-10-13) ami MÉG NINCS a listán, az halványabb — a listán lévő (✓) és az „+ új felvétele” marad erős */
.ac li:not(.ac-onlist):not(.ac-custom) .ac-n { color: var(--muted); font-weight: 500 !important; }
.ac li:not(.ac-onlist):not(.ac-custom) .ac-plus { background: var(--bg); color: var(--muted); }
@media (hover: hover) { .ac li:not(.ac-onlist):not(.ac-custom):hover .ac-n { color: var(--text); } }
.ac-more { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 700; font-size: .72rem; }
/* ⋯ menü (alsó lap) */
.li-menu { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.li-menu h3 { margin: 0 0 4px; }
.li-menu button { min-height: 48px; text-align: left; padding: 0 16px !important; border-radius: 14px !important; font-weight: 600; }
.li-menu button.danger { color: var(--warn); }
.li-menu .li-menu-x { text-align: center; margin-top: 4px; }
/* ⋯ menük (2026-10-12): egy kártya, ikonos sorok vonallal elválasztva, a magyarázat a cím alatt */
.lm-list { display: flex; flex-direction: column; background: var(--bg); border-radius: 16px; overflow: hidden; }
.lm-list button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--text); }
.lm-list button + button { border-top: 1px solid var(--line) !important; }
.lm-list button:disabled { opacity: .45; }
.lm-list button.danger { color: var(--warn); }
.lm-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--card); font-size: 1.05rem; }
.lm-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lm-t b { font-weight: 650; }
.lm-t span { font-size: .76rem; font-weight: 400; color: var(--muted); }
.li-menu .li-menu-x { border: 0 !important; background: none !important; color: var(--muted); }
/* tömör sorok: a megjegyzés (melyik ételhez) és az ár-tipp egy-egy sor, a vége „…” — a teljes szöveg a ✎ ablakban */
#li-items .shop-check { min-width: 0; }
#li-items .li-text { min-width: 0; }
#li-items .li-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#li-items .li-fg { padding: 6px 0; }
/* a 💰/✨ kapcsoló a becsült ár kártyáján */
.pm-seg.pm-in { margin: 10px 0 0; }

/* Készlet → 💰 Árak: a kereső is teljes szélességű, mint a többi mező */
#price-search { width: 100%; font-size: 16px; }
.hh-invite button.copied, .hh-code button.copied { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
/* 🏠 meghívás: csatlakozási kód nagy betűkkel + gombok; „Másik háztartás…” lenyíló; kis ablakok (átnevezés, kód, csatlakozás) */
.hh-join { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.hh-join > p { margin: 0; }
.hh-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hh-code-v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.45rem; font-weight: 700; letter-spacing: .12em;
  background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 6px 14px; user-select: all; -webkit-user-select: all; }
.hh-code button { min-height: 44px; }
/* ↷ heti feladat átcsúsztatása (Ma): „holnapra” a sorban, „Ezen a héten még” lenyíló a lista alatt */
.ma-shift { display: inline; border: 0 !important; background: none !important; padding: 0 !important; min-height: 0; color: var(--accent); font-weight: 700; font-size: inherit; cursor: pointer; }
.ma-later { margin-top: 8px; }
.ma-later summary { cursor: pointer; padding: 8px 2px; font-weight: 650; font-size: .92rem; }
.ma-later-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ma-later-row .jt-txt { flex: 1; min-width: 0; }
.ma-pull { flex: none; min-height: 40px; border-radius: 10px !important; padding: 0 12px !important; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.hh-share { border-top: 1px solid var(--line); padding-top: 10px; }
.hh-share > p { margin: 0 0 2px; }
.hh-share .en-set:has(input:disabled) { cursor: default; opacity: .75; }
.hh-more summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: 6px 0; min-height: 32px; }
.hh-more .hh-btns { margin-top: 6px; }
.hh-modal { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.hh-modal h3 { margin: 0; }
.hh-modal p { margin: 0; }
.hh-modal input { font-size: 16px; width: 100%; }
.hh-modal .hh-code-in { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.fb-modal { display: flex; flex-direction: column; gap: 10px; }
.fb-modal h3 { margin: 0; }
.fb-modal textarea { font-size: 16px; width: 100%; }
.fb-thumb img { max-width: 160px; max-height: 160px; border-radius: 12px; }
.update-bar { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 40; width: min(460px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0 !important; border-radius: 18px !important; padding: 12px 16px !important;
  background: var(--accent) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(31, 42, 36, .3); animation: fadeUp .4s var(--ease-out) both; }
.update-bar span { font-size: .85rem; opacity: .92; }
/* „✨ Frissült az app” (egyszer, az új változat első indulásakor): világosabb, „Rendben ✓”-vel zárul */
.update-bar.whats-new { background: var(--card) !important; color: var(--text) !important; box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(31, 42, 36, .2); }
.update-bar.whats-new b { color: var(--accent); }
.update-bar .wn-ok { align-self: flex-end; margin-top: 4px; font-weight: 800; color: var(--accent); opacity: 1; }
/* 💬 visszajelzés-gomb a felső sáv jobb szélén (minden oldalon) — telefonon csak az ikon */
.fb-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px !important; border-radius: 10px !important;
  border: 0 !important; background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 700; font-size: .88rem; }
.fb-btn[hidden] { display: none; }
.fb-btn.fb-update { background: var(--accent) !important; color: #fff !important; animation: fbPulse 1.6s ease-in-out infinite; }
@keyframes fbPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
/* 🧭 súgó-mód gombja a 💬 előtt (2026-10-17) — bekapcsolva narancs kitöltés */
.help-btn { margin-left: auto; }
.help-btn + .fb-btn { margin-left: 0; }
.help-btn b { font-family: Montserrat, Inter, sans-serif; font-size: 1.05rem; font-weight: 900; line-height: 1; }
.help-btn.on { background: var(--accent) !important; color: #fff !important; }
@media (max-width: 1100px) { .top { column-gap: 10px; } .fb-btn { min-width: 44px; min-height: 40px; padding: 0 !important; justify-content: center; font-size: 1.15rem; } .fb-btn-t { display: none; } }
/* 🤖 AI-keret: az AI-ablakok alján és az Én oldalon; kevés maradt (< 20%) → narancs */
.ai-meter { margin: 4px 0 0; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.ai-meter b { color: var(--text); }
.ai-meter .ai-bar { height: 6px; }
.ai-meter.low b { color: var(--warn); }
.ai-meter.low .ai-bar i { background: var(--warn); }
/* AI-gombok: a jelvény a felirattal egy sorban maradjon (különben magasra nő a gomb) */
.m-actions { flex-wrap: wrap; } /* ha nem fér ki, a gombok törnek új sorba — nem a feliratuk */
.m-actions button { white-space: nowrap; }
.food-modal .m-actions button { flex: 1 1 auto; } .food-modal .m-actions .m-gap { display: none; } /* ha törnek, a sorokat kitöltik */
.m-actions button .ai-badge { vertical-align: middle; }
.ai-card { gap: 8px; }
.ai-left { font-weight: 700; color: var(--accent); }
.ai-card.low .ai-left { color: var(--warn); }
.ai-bar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ai-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; } /* a maradék, mint az akku (2026-10-31) */
.ai-card.low .ai-bar i { background: var(--warn); }
@media (min-width: 701px) { .update-bar { bottom: 24px; } }

/* ===== 📊 TÁPÉRTÉK FOTÓBÓL (nutriphoto.js) ===== */
.nu-res { display: flex; flex-direction: column; gap: 10px; }
.nu-res h4, .nu-res p { margin: 0; }
.nu-tot { display: flex; flex-direction: column; gap: 2px; background: var(--accent-soft); border-radius: var(--radius); padding: 12px 14px; }
.nu-kcal { font-family: var(--font-head); font-size: 1.5rem; }
.nu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nu-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.nu-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nu-g { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nu-g input { width: 76px; font-size: 16px; text-align: right; padding: 8px 10px; }
.nu-kc { grid-column: 1 / -1; color: var(--muted); }
.nu-scale { display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 12px 14px; }
.nu-w { display: inline-flex; align-items: center; gap: 6px; }
.nu-seg { align-self: flex-start; margin: 0; }
.nu-plates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nu-plates .rc-chip { min-height: 40px; }
.nu-padd { border-style: dashed !important; }
/* grammok szövegként; „✎ Mennyiségek javítása” után mezőként */
.nu-gv { font-weight: 700; white-space: nowrap; }
.nu-fromscale { margin: 0; color: var(--accent); font-weight: 650; }
.nu-gedit { align-self: flex-start; margin-top: -4px; }
/* súly-mező: a „g” a mezőben, jobbra */
.nu-w { position: relative; display: inline-flex; align-items: center; align-self: flex-start; }
.nu-w input { width: 130px !important; padding-right: 30px !important; font-size: 1.05rem !important; font-weight: 700; }
.nu-w > span { position: absolute; right: 12px; color: var(--muted); font-weight: 600; pointer-events: none; }
.nu-tip { margin: 0; }
.nu-log { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nu-log button { min-height: 44px; }
.nu-logged { color: var(--accent); font-weight: 650; }
.ma-extra { cursor: default; }
.ma-xdel { border: 0 !important; background: transparent !important; color: var(--muted); font-size: 1.5rem; line-height: 1; min-width: 44px; min-height: 44px; padding: 0 !important; }

/* ---- 🧭 Beállítás 2 percben (kerdoiv-javaslat.html): teljes képernyő — fejléc · gördülő kérdés · alsó gomb (nem ragadós: külön sáv) ---- */
.wz { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: wzIn .35s var(--ease-out, ease) both; }
@media (min-width: 561px) { .wz { box-shadow: 0 0 0 100vmax rgba(20, 28, 24, .35); } }
/* a kérdőív (200) FÖLÖTT nyíljanak a belőle nyitott lapok — választó, időválasztó, meghívó (2026-10-25, Andras: „az
   albeállításokba nem tudok belekattintani” — a lap a kérdőív mögött nyílt meg) */
.wz:not(.tk) ~ .modal-bg { z-index: 210; }
body.wz-on { overflow: hidden; }
@keyframes wzIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.wz.closing { pointer-events: none; animation: wzOut .2s ease-in forwards; }
@keyframes wzOut { to { opacity: 0; transform: translateY(18px); } }
.wz-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; }
.wz-top .pg-back { flex: none; }
.wz-prog { flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.wz-prog i { display: block; height: 100%; border-radius: 99px; background: var(--green); transition: width .35s var(--ease-out, ease); }
.wz-step { flex: none; font-size: .78rem; font-weight: 700; color: var(--muted); min-width: 34px; text-align: right; }
.wz-x { flex: none; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--card) !important;
  box-shadow: var(--card-shadow); color: var(--muted); font-size: 1rem; }
.wz-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.wz-body.wz-in-next { animation: calInNext .3s var(--ease-out, ease) both; }
.wz-body.wz-in-prev { animation: calInPrev .3s var(--ease-out, ease) both; }
.wz-foot { flex: none; display: flex; gap: 8px; padding: 10px 16px 16px; }
.wz-foot button { flex: 1; min-height: 54px; border-radius: 16px !important; font-size: 1rem; font-weight: 800; }
.wz-foot button.primary { flex: 1.6; }
.wz-foot button:disabled { opacity: .45; }
.wz-q { font: 800 1.4rem/1.25 var(--font-head); margin: 14px 2px 4px; }
.wz-sub { color: var(--muted); font-size: .9rem; margin: 0 2px 16px; }
.wz-l { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; }
.wz-note { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: 12px 2px 0; }
/* választható kártyák: ikon · cím + magyarázat · (Ajánlott) — a szöveg tör, az ikon és a jelvény a helyén marad */
.wz-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; margin-bottom: 10px; padding: 12px 14px !important; text-align: left;
  border: 2px solid transparent !important; border-radius: 18px !important; background: var(--card) !important; box-shadow: var(--card-shadow); transition: border-color .15s, background .15s; }
.wz-opt.on { border-color: var(--green) !important; background: color-mix(in srgb, var(--green) 7%, var(--card)) !important; }
.wz-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; }
.wz-ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wz-ot b { font-size: .98rem; line-height: 1.25; }
.wz-ot span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.wz-rec { flex: none; align-self: flex-start; font-size: .64rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.wz-seg { display: flex; gap: 2px; background: var(--line); border-radius: 14px; padding: 4px; margin-bottom: 12px; }
.wz-seg button { flex: 1; min-height: 44px; border: 0 !important; background: transparent !important; border-radius: 10px !important; font-weight: 700; color: var(--muted); }
.wz-seg button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.wz-flds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-fld { display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 10px 14px; cursor: text; }
.wz-fld:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.wz-fld small { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wz-fld span { display: flex; align-items: baseline; gap: 4px; }
.wz-fld input { flex: 1; min-width: 0; width: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 800 1.3rem var(--font-head); color: var(--text); }
.wz-fld input::placeholder { font: 500 .9rem var(--font, inherit); color: var(--muted); opacity: .8; }
.wz-fld em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted); }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chips button { min-height: 40px; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; background: var(--card) !important;
  box-shadow: inset 0 0 0 1.5px var(--line); font-size: .86rem; font-weight: 650; white-space: nowrap; }
.wz-chips button.al.on { background: #FDECEC !important; color: #B3261E; box-shadow: inset 0 0 0 1.5px #F1B2AE; }
.wz-chips button.pf.on, .wz-chips button.none.on { background: var(--accent-soft) !important; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
:root[data-theme="dark"] .wz-chips button.al.on { background: #4a2523 !important; color: #ffb4ab; }
.wz-freq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.wz-freq button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 14px 4px 10px !important; min-height: 92px;
  border: 2px solid transparent !important; border-radius: 18px !important; background: var(--card) !important; box-shadow: var(--card-shadow); }
.wz-freq button.on { border-color: var(--green) !important; background: color-mix(in srgb, var(--green) 7%, var(--card)) !important; }
.wz-freq button:disabled { opacity: .55; }
.wz-freq b { font: 800 1.6rem var(--font-head); line-height: 1.1; }
.wz-freq span { font-size: .72rem; color: var(--muted); font-weight: 600; line-height: 1.25; text-align: center; }
.wz-freq .wz-rec, .wz-freq .wz-soon { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); }
.wz-freq .wz-rec { color: #fff; background: var(--green-ink); }
.wz-soon { font-size: .6rem !important; font-weight: 800 !important; color: var(--muted) !important; background: var(--line); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.wz-times { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 2px 14px; }
.wz-times div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 650; }
.wz-times div:last-child { border-bottom: 0; }
.wz-times em { font-style: normal; font-size: .76rem; color: var(--muted); font-weight: 600; }
.wz-times i { font-style: normal; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 6px; font-size: .8rem; min-width: 52px; text-align: center; }
.wz-res-h { text-align: center; margin: 10px 0 14px; }
.wz-md { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: var(--accent-soft); font-size: 1.9rem; animation: msMedal .8s var(--ease-spring, ease) both; }
.wz-res-h h2 { font: 800 1.35rem var(--font-head); margin: 0; }
.wz-res-h p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.wz-res { background: var(--card); border-radius: 20px; box-shadow: var(--card-shadow); padding: 2px 14px; }
.wz-rr { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.wz-rr:last-child { border-bottom: 0; }
.wz-rr .wz-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }
.wz-rr > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.wz-rr b { font-size: .94rem; line-height: 1.3; }
.wz-rr b + span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
/* 🏃 részletes mozgás (2026-10-21): tevékenység-kártyák, bekapcsolva alattuk „hetente 1–2× · 3–4× · 5–6× · naponta” */
.wz-lh { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.wz-moves { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wz-mv.on { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); }
.wz-mv .wz-opt { margin: 0; }
.wz-mv.on .wz-opt { box-shadow: none; }
.wz-ck { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800;
  background: var(--bg); color: var(--muted); }
.wz-mv.on .wz-ck { background: var(--brand); color: #17130F; }
.wz-fq { display: flex; align-items: center; gap: 5px; padding: 2px 12px 12px; flex-wrap: wrap; }
.wz-fq small { font-size: .76rem; color: var(--muted); font-weight: 700; margin-right: 2px; }
.wz-fq button { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 4px !important; border-radius: 99px !important; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.wz-fq button.on { background: var(--btn) !important; color: var(--btn-ink) !important; border-color: var(--btn) !important; }
/* 🗓 erősítés napjai a mozgás-lépésen (2026-10-28): 7 egyforma oszlop, a felirat fölötte */
.wz-fq.wz-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wz-fq.wz-days small { grid-column: 1 / -1; margin: 0 0 2px; }
.wz-fq.wz-days button { border-radius: 12px !important; padding: 0 !important; }
/* ⏱ egy alkalom hossza (2026-10-28): „alkalmanként − 45 perc +” */
.wz-fq.wz-dur { justify-content: space-between; flex-wrap: nowrap; padding-bottom: 6px; }
.wz-fq.wz-dur .wz-step button { flex: none; width: 38px; min-height: 38px; height: 38px; border-radius: 50% !important; font-size: 1.05rem; color: var(--text); }
.wz-fq.wz-dur .wz-step button:disabled { opacity: .35; }
.wz-fq.wz-dur .wz-step b { min-width: 64px; font-size: .9rem; }
/* 🖊 vonalas ikonok (icons.js) — egy stílus mindenhol: a szöveg színe, 1,6-os vonal */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wz-ic .ic { width: 26px; height: 26px; color: var(--ink2, var(--text)); }
.wz-ic.ln { width: 32px; height: 32px; background: none !important; color: var(--muted); }
.wz-ic.ln .ic { color: inherit; }
.wz-mv.on .wz-ic.ln { color: var(--green); }
.wz-mvn { margin-left: auto; flex: none; font-style: normal; font-size: .74rem; font-weight: 700; color: var(--green); white-space: nowrap; }
.wz-ck.ic { padding: 5px; background: var(--brand); color: #17130F; stroke-width: 2.4; }
.wz-rr .wz-ic .ic { width: 22px; height: 22px; }
.wz-push .ic { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
/* „B” mozgás-kártyák: az egész kártya (fejléc + „hetente” sor) egy keretben, kijelölve halványzöld */
.wz-c .wz-mv { border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.wz-c .wz-mv.on { background: color-mix(in srgb, var(--green) 7%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent); }
.wz-c .wz-moves .wz-mv .wz-opt, .wz-c .wz-moves .wz-mv.on .wz-opt { background: transparent !important; border-color: transparent !important; min-height: 64px; }
.wz-c .wz-fq button { background: var(--card) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.wz-c .wz-fq button.on { background: var(--green) !important; box-shadow: none; color: #fff !important; }
/* 🖊 „B” választó-rács (racs-javaslat.html, Andras, 2026-10-25): krém csempék, kijelölve halvány kitöltés + pipa a sarokban */
.wz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.wz-t { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 78px; padding: 6px 3px !important;
  border: 0 !important; border-radius: 16px !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted);
  font-size: .72rem; font-weight: 600; line-height: 1.15; text-align: center; transition: background .15s, box-shadow .15s, color .15s; }
.wz-t span { color: var(--text); hyphens: manual; }
.wz-t .ic { width: 26px; height: 26px; }
.wz-t.on { font-weight: 700; }
.wz-t.al.on { background: color-mix(in srgb, var(--warn) 9%, var(--card)) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.wz-t.pf.on { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.wz-t.on span { color: inherit; }
.wz-t .wz-tick { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: currentColor; }
.wz-t .wz-tick path { stroke: var(--card); stroke-width: 3; }
.wz-t:active { transform: scale(.97); }
.wz-none { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 8px; border: 0 !important;
  border-radius: 14px !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; font-weight: 700; color: var(--text); }
.wz-none.on { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.wz-none .ic { width: 18px; height: 18px; stroke-width: 2.2; }
@media (max-width: 340px) { .wz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wz-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-t.cu em { font-style: normal; font-size: 1.5rem; line-height: 1; }
.wz-t.cu span { padding: 0 4px; }
/* 🍳 nagy adag: tipp a lépésnél (guide.js bigTip) és felül egy sor (2026-10-26) */
.gbig { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--sky-soft, #E3F1FB); font-size: .84rem; line-height: 1.4; }
.gbig-head { margin: 0 0 10px; }
/* 🍽 túl könnyű étel: „jól jön mellé…” (data.js fitGap) */
.fit-hint { display: inline-block; margin-top: 3px; font-size: .74rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 8px; }
/* ugyanazon a lépésen belüli újrarajzolás: se a borító-emoji, se a fent maradó sáv nem animál (nincs „pislogás”) */
.wz-hem.still { animation: none; } /* (tartósan — a .quiet levételekor újraindult volna az animáció) */
.wz-c.quiet .wz-mini > div { transition: none; }
/* 🎨 Kérdőív — „C: színes lapok” (2026-10-25, Andras választása): színes borító + lekerekített fehér lap, nagy csempék */
.wz-body.wz-c { padding: 0; background: var(--card); }
.wz-hero { position: relative; padding: 16px 20px 34px; }
.wz-hero.h-peach { background: var(--peach-soft); } .wz-hero.h-sky { background: var(--sky-soft); } .wz-hero.h-green { background: var(--green-soft); }
.wz-hero.h-berry { background: var(--berry-soft); } .wz-hero.h-sun { background: var(--sun-soft); }
.wz-hem { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: 8px; animation: wzHem .5s var(--ease-spring, ease) both; }
@keyframes wzHem { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
.wz-hero .wz-q { font-size: 1.6rem; margin: 0 0 4px; letter-spacing: -.01em; }
.wz-hero .wz-sub { margin: 0; color: var(--text); opacity: .72; }
.wz-hero > h2 { font: 800 1.6rem/1.2 var(--font-head); margin: 0 0 4px; }
.wz-hero > p { margin: 0; opacity: .75; font-size: .9rem; }
/* rögzített mini-sáv (a nagy borító felcsúszásakor): nulla magasságú sticky tartó, a sáv belőle csúszik le */
.wz-mini { position: sticky; top: 0; height: 0; z-index: 3; background: none !important; }
.wz-mini > div { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 18px; transform: translateY(-100%); opacity: 0;
  transition: transform .22s var(--ease-out, ease), opacity .18s ease; box-shadow: 0 6px 16px rgba(23,19,15,.08); }
.wz-mini.h-peach > div { background: var(--peach-soft); } .wz-mini.h-sky > div { background: var(--sky-soft); } .wz-mini.h-green > div { background: var(--green-soft); }
.wz-mini.h-berry > div { background: var(--berry-soft); } .wz-mini.h-sun > div { background: var(--sun-soft); }
.wz-c.mini-on .wz-mini > div { transform: none; opacity: 1; }
.wz-mem { font-size: 1.5rem; line-height: 1; } .wz-mem img { width: 30px; height: 30px; display: block; }
.wz-mini b { font: 800 1.08rem/1.2 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-hero { transition: opacity .2s ease; } .wz-c.mini-on .wz-hero > * { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .wz-mini > div { transition: none; } }
.wz-sheet { position: relative; margin-top: -18px; background: var(--card); border-radius: 26px 26px 0 0; padding: 18px 16px 20px; min-height: 60%; }
.wz-c .wz-l:first-child { margin-top: 0; }
/* csempék: két hasáb, a csempe a saját színével */
.wz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.wz-tiles .wz-opt { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 120px; margin: 0;
  border: 2px solid transparent !important; box-shadow: none !important; border-radius: 18px !important; padding: 14px !important; }
.wz-tiles .wz-opt .wz-ic { background: rgba(255,255,255,.7) !important; width: 42px; height: 42px; }
.wz-tiles .wz-opt .wz-ot b { font-size: .95rem; } .wz-tiles .wz-opt .wz-ot span { font-size: .74rem; }
.wz-tiles .wz-opt:has(.jc-peach) { background: var(--peach-soft) !important; } .wz-tiles .wz-opt:has(.jc-sky) { background: var(--sky-soft) !important; }
.wz-tiles .wz-opt:has(.jc-green) { background: var(--green-soft) !important; } .wz-tiles .wz-opt:has(.jc-berry) { background: var(--berry-soft) !important; }
.wz-tiles .wz-opt:has(.jc-sun) { background: var(--sun-soft) !important; }
.wz-tiles .wz-opt.on { border-color: var(--text) !important; }
.wz-tiles .wz-opt .wz-rec { position: absolute; top: 10px; right: 10px; }
.wz-tiles .wz-opt { position: relative; }
.wz-tiles.t3 .wz-opt:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; }
/* 🙈 elrejtett számok (Én → Megjelenés / kérdőív, p.showNums === false): a .nm jelölt számok és a recept makró-sora */
html.no-nums .nm, html.no-nums .macros { display: none !important; }
/* 🙈 a számok kapcsolója az eredmény lapon (2026-10-28) — kártya + az en-toggle-lel egyező kapcsoló */
.wz-nums { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 12px 14px !important; text-align: left;
  background: var(--card) !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--card-shadow); color: var(--text); }
.wz-nums .wz-ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-nums .wz-ot > span { font-size: var(--fs-small); color: var(--muted); font-weight: 500; line-height: 1.35; }
.wz-sw { width: 48px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.wz-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
.wz-nums.on .wz-sw { background: var(--green); }
.wz-nums.on .wz-sw::after { left: 23px; }
.wz-nums:disabled { opacity: .8; cursor: default; } /* (izomépítésnél a súlymérés kötelező) */
.wz-kbig { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.wz-kbig b { font: 800 2.8rem/1 var(--font-head); letter-spacing: -.02em; }
.wz-kbig span { color: var(--muted); font-weight: 700; font-size: .9rem; }
.wz-kbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--line); }
.wz-kbar i { display: block; height: 100%; }
.wz-klg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 16px; font-size: .76rem; color: var(--muted); }
.wz-klg span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--c); vertical-align: -1px; }
/* a sima kártyák (mozgás, szokások, eredmény) a fehér lapon halvány háttérrel */
.wz-c .wz-sheet > .wz-opt, .wz-c .wz-mv .wz-opt { background: var(--bg) !important; box-shadow: none !important; }
.wz-c .wz-sheet > .wz-opt.on, .wz-c .wz-mv.on .wz-opt { background: var(--green-soft) !important; }
.wz-c .wz-res, .wz-c .wz-calc, .wz-c .wz-card, .wz-c .wz-hab { box-shadow: none; background: var(--bg); }
.wz-c .wz-hab.on { background: var(--card); box-shadow: var(--card-shadow); }
/* 🔔 „Ebben is segíthetek” lap a kérdőív végén (2026-10-25): szokás-kártyák, bekapcsolva alattuk a beállításaik */
/* (2026-10-25, Andras: „jobban el kéne választani a részeket”) minden szokás önálló kártya, köztük levegő; bekapcsolva az egész
   kártya zöld keretes, a fejléce halványzöld, a beállítások egy vonallal alatta */
.wz-hab { margin-bottom: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; border: 1.5px solid transparent; }
.wz-hab .wz-opt { margin: 0; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.wz-hab.on { border-color: var(--green); }
.wz-hab.on .wz-opt { background: var(--green-soft) !important; }
.wz-hab .wz-opt.on .wz-ck { background: var(--brand); color: #17130F; }
.wz-hset { padding: 4px 14px 12px 14px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); }
.wz-sec { margin: 22px 0 10px !important; padding-top: 14px; border-top: 2px dashed var(--line); }
.wz-hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-top: 1px solid var(--line); padding-top: 6px; font-size: .9rem; }
.wz-hset > .wz-hrow:first-child { border-top: 0; }
.wz-hrow > span:first-child { color: var(--muted); font-weight: 600; }
.wz-hrow select { max-width: 52%; }
.wz-tt { display: flex; align-items: center; gap: 4px; }
.wz-tt input, .wz-tt .dt-wrap { width: 92px; }
.wz-step { display: flex; align-items: center; gap: 10px; }
.wz-step button { width: 40px; height: 40px; border-radius: 50% !important; padding: 0 !important; font-size: 1.1rem; font-weight: 800; }
.wz-step b { min-width: 52px; text-align: center; }
.wz-hnote { margin: 2px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.wz-card { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.wz-card .wz-fld { margin: 0; }
.wz-hh b { font-size: 1rem; }
.wz-push { width: 100%; min-height: 48px; font-weight: 700; border-radius: 14px !important; }
/* 🧮 „Hogyan számoltuk?” (2026-10-21) — lépések, végösszeg, saját szám */
.wz-calc { margin-top: 12px; background: var(--card); border-radius: 20px; box-shadow: var(--card-shadow); padding: 4px 14px 14px; }
.wz-calc > .wz-l { margin: 10px 0 2px; }
.wz-cs { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.wz-cs > i { flex: none; width: 22px; font-style: normal; font-weight: 800; color: var(--accent); text-align: center; font-size: 1rem; line-height: 1.3; }
.wz-cs > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-cs b { font-size: .9rem; line-height: 1.3; } .wz-cs small { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.wz-cs > em { flex: none; font-style: normal; font-weight: 800; font-size: .92rem; white-space: nowrap; }
.wz-cs.tot { border-bottom: 0; } .wz-cs.tot > em { font-size: 1.05rem; color: var(--accent); }
.wz-cs.tot.off > em, .wz-cs.tot.off b { color: var(--muted); text-decoration: line-through; }
.wz-cs.own { background: var(--accent-soft); border-radius: 12px; padding: 9px 10px; margin: 0 -4px; }
.wz-cfix { align-self: flex-start; margin-top: 4px; min-height: 34px; padding: 0 12px !important; border-radius: 10px !important; font-size: .8rem; font-weight: 700; }
.wz-own { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.wz-own > button { align-self: flex-start; min-height: 40px; padding: 0 14px !important; border-radius: 10px !important; font-weight: 700; }
.wz-own > small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.wz-own label { display: flex; flex-direction: column; gap: 4px; } .wz-own label small { font-size: .78rem; color: var(--muted); }
.wz-own label span { display: flex; align-items: center; gap: 8px; } .wz-own input { flex: 1; min-width: 0; font-size: 16px; } .wz-own em { font-style: normal; color: var(--muted); font-weight: 700; }
.wz-why { font-size: .84rem; line-height: 1.45; margin: 12px 2px 0; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); }
.wz-why.warn { background: var(--warn-soft, #FFF1DD); }
.wz-fix { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wz-fix button { min-height: 44px; padding: 0 16px !important; border-radius: 10px !important; font-weight: 700; background: var(--card) !important; border: 0 !important; box-shadow: var(--card-shadow); }
/* Étrend és adataim: áttekintő kártya (olvasásra) + „Részletes beállítások” lenyíló — a sorok egyforma felépítésűek,
   a szöveg tör, az ikon és a › a helyén marad */
.pf-sum { max-width: 640px; margin: 0 0 12px; padding: 6px 14px 4px; background: var(--card); border-radius: 20px; box-shadow: var(--card-shadow); }
.pf-sum-h { margin: 10px 2px 4px; font: 800 1rem var(--font-head); }
.pf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0 !important; text-align: left;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; color: var(--text); }
.pf-row:last-child { border-bottom: 0 !important; }
.pf-row .wz-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }
.pf-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-row-t b { font-size: .95rem; line-height: 1.3; }
.pf-row-t span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.pf-row-t .pf-warn { color: var(--warn); font-weight: 700; }
.pf-row > i { flex: none; font-style: normal; color: var(--muted); font-size: 1.2rem; }
.pf-more { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 640px; min-height: 52px; margin: 0 0 12px; padding: 0 16px !important;
  border: 0 !important; border-radius: 16px !important; background: var(--card) !important; box-shadow: var(--card-shadow); font-weight: 700; color: var(--text); }
.pf-more i { font-style: normal; color: var(--muted); font-size: 1.2rem; transition: transform .25s var(--ease-out, ease); }
.pf-more[aria-expanded="true"] i { transform: rotate(90deg); }
#pf-details[hidden] { display: none; }
.pf-flash { animation: pfFlash 1.4s ease; border-radius: 14px; }
@keyframes pfFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* belépési pont az Adataim tetején */
.wz-entry { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; margin: 0 0 14px; padding: 14px 16px !important; text-align: left;
  border: 0 !important; border-radius: 18px !important; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--card))) !important; box-shadow: var(--card-shadow); }
.wz-entry .wz-ic { background: var(--card); }
.wz-entry b { display: block; font-size: 1rem; }
.wz-entry span.t { font-size: .8rem; color: var(--muted); }
.wz-entry .go { margin-left: auto; color: var(--accent); font-size: 1.3rem; font-weight: 800; }

/* ---- 📅 Heti áttekintő (weekreview.js): fejléc · 3–4 egyforma szám-oszlop · gombsor (a nagy gomb kitölti, a „Köszi” a helyén marad) ---- */
.wr-card { margin-top: 12px; padding: 14px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); animation: msIn .5s var(--ease-out, ease) both; }
.wr-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.wr-h b { font-family: var(--font-head); font-size: 1rem; }
.wr-stats { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.wr-st { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 14px; background: var(--bg); text-align: center; min-width: 0; }
.wr-st span { font-size: 1.05rem; line-height: 1.2; }
.wr-st b { font: 800 1.05rem var(--font-head); line-height: 1.25; white-space: nowrap; }
.wr-st small { font-size: .68rem; color: var(--muted); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wr-acts { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.wr-acts .primary { flex: 1; min-width: 0; min-height: 44px; border-radius: 14px !important; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-acts > button:last-child { flex: none; min-height: 44px; padding: 0 14px !important; border-radius: 14px !important; font-weight: 700; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.wr-next { margin: 10px 2px 0; font-size: .82rem; color: var(--muted); }
.wr-next b { color: var(--text); }
.wr-ok { flex: 1; font-size: .84rem; color: var(--accent); font-weight: 700; }

/* ---- 👍 / 👎 Ízlett? (ratings.js): három egyforma gomb — a felirat tör, a gombok magassága egyforma ---- */
.rt-sheet h3 { margin: 0; font-family: var(--font-head); }
.rt-name { margin: 2px 0 14px; }
.rt-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rt-btns button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 108px; padding: 12px 6px !important;
  border: 2px solid transparent !important; border-radius: 18px !important; background: var(--bg) !important; font-weight: 800; font-size: .9rem; }
.rt-btns button span { font-size: 1.9rem; line-height: 1.1; }
.rt-btns button small { font-size: .7rem; font-weight: 600; color: var(--muted); line-height: 1.25; text-align: center; }
.rt-btns button.on { border-color: var(--accent) !important; background: var(--accent-soft) !important; }

/* ---- 🏅 Mérföldkövek (szuro-merfold-javaslat.html): „Ma” arany gratuláló kártya + Előzmények jelvény-kártya ---- */
:root { --gold: #E0A526; --gold-soft: #FFF3D6; --gold-ink: #6B5320; }
:root[data-theme="dark"] { --gold-soft: #3a3020; --gold-ink: #f0dca8; }
.ms-cele { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin-top: 12px; padding: 14px;
  border-radius: 20px; background: linear-gradient(135deg, #FFF6DD, #FFE9C2); box-shadow: 0 10px 26px rgba(224, 165, 38, .22); animation: msIn .55s var(--ease-spring, ease) both; }
:root[data-theme="dark"] .ms-cele { background: linear-gradient(135deg, #3d3220, #4a3a1e); }
.ms-medal { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem;
  background: radial-gradient(circle at 35% 30%, #FFE7A3, var(--gold)); box-shadow: 0 4px 12px rgba(224, 165, 38, .4); animation: msMedal 1s .2s var(--ease-spring, ease) both; }
.ms-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--gold-ink); font-size: .84rem; line-height: 1.35; }
.ms-txt b { font-family: var(--font-head); font-size: 1rem; color: var(--text); line-height: 1.25; }
.ms-txt small { opacity: .8; font-size: .74rem; }
.ms-ok { justify-self: end; min-height: 40px; padding: 0 16px !important; border: 0 !important; border-radius: 10px !important; background: rgba(255, 255, 255, .75) !important;
  color: var(--gold-ink); font-weight: 800; font-size: .85rem; }
:root[data-theme="dark"] .ms-ok { background: rgba(0, 0, 0, .25) !important; }
.ms-conf { position: absolute; top: -12px; left: var(--x); width: 7px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0; pointer-events: none;
  animation: msConf 1.8s var(--d) ease-in forwards; transform: rotate(var(--r)); }
@keyframes msIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes msMedal { 0% { transform: scale(.3) rotate(-25deg); } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
@keyframes msConf { 0% { opacity: .95; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(150px) rotate(calc(var(--r) + 300deg)); } }
/* Előzmények: jelvények 4-esével; a felirat legfeljebb 2 sor, fix magasság → a rács sorai mindig egyformák */
.ms-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ms-n { font: 600 .78rem var(--font, inherit); color: var(--muted); }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin-top: 8px; }
.ms-b { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text); }
.ms-c { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem;
  background: radial-gradient(circle at 35% 30%, #FFE7A3, var(--gold)); box-shadow: 0 3px 10px rgba(224, 165, 38, .3); }
.ms-l { font-size: .68rem; font-weight: 700; line-height: 1.2; text-align: center; height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ms-b.lock .ms-c { background: var(--line); box-shadow: none; filter: grayscale(1); opacity: .55; }
.ms-b.lock .ms-l { color: var(--muted); }
.ms-next { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .84rem; }
.ms-prog { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ms-prog i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }

/* ===== 🧂 Készlet és 📅 Terv alapján — a bevásárlólista mintájára (2026-10-12, Andras: „a régi kinézetet idézik”;
   a készlet sorai külön kártya-cellák voltak belső margó nélkül) ===== */
.shop-stock .j-card { padding: 14px 16px 6px; }
.stock-list { row-gap: 0; }
.stock-list > * { box-shadow: none; border-radius: 0; background: none; border-bottom: 1px solid var(--line); } /* egy kártya, benne vonallal elválasztott sorok */
.stock-row { gap: 10px; padding: 8px 0; min-height: 52px; }
.stock-row:last-child { border-bottom: 0; }
.stock-name label { font-weight: 600; }
#staple-list .stock-row:not(.have) .stock-name label { color: var(--warn); }
.staple-toggle { border: 0; background: var(--line); border-radius: 6px; padding: 3px; gap: 2px; }
.staple-toggle button { border: 0 !important; background: transparent !important; border-radius: 10px !important; padding: 0 12px !important; min-height: 34px; font-weight: 650; font-size: .82rem; }
.staple-toggle button.on { background: var(--card) !important; color: var(--accent); box-shadow: var(--card-shadow); }
.staple-toggle button.on.off { background: var(--warn-soft) !important; color: var(--warn); }
.stock-row .li-rm { width: 36px; height: 36px; padding: 0; margin-right: -8px; border-radius: 50%; font-size: 1.15rem; }
.stock-input { font-size: .85rem; }
.stock-input input { width: 64px; padding: 6px 8px; border-radius: 10px; font-size: 16px; text-align: right; }
.shop-stock .toolbar input[type=search], #price-search { width: 100%; }
.price-row { grid-template-columns: minmax(0, 1fr) auto; }
.price-row .stock-input { grid-column: 1; grid-row: 2; flex-wrap: wrap; }
.price-row .stock-input input { width: 5.5em; }
.price-row .li-rm { grid-column: 2; grid-row: 1 / 3; }
.stock-name .avail { align-self: flex-start; margin-top: 2px; }

#shop-plan-view .shop-section { padding: 12px 16px 2px; }
.pi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1px 10px; padding: 8px 0; min-height: 56px; border-bottom: 1px solid var(--line); }
.pi:last-child { border-bottom: 0; }
.pi-main { display: contents; } /* név: 1. sor, „mihez kell”: alatta a gombig kiszélesedve */
.pi-n { grid-column: 1; grid-row: 1; }
.pi-sub { grid-column: 1 / 3; grid-row: 2; min-width: 0; }
.pi-qty { grid-column: 2; grid-row: 1; }
.pi-btn { grid-column: 3; grid-row: 1 / 3; }
.pi-qs { display: block; font-size: .72rem; }
.pi-n { font-weight: 650; }
.pi-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-flag { color: var(--accent); font-weight: 700; margin-right: 6px; }
.pi-qty { max-width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem; line-height: 1.25; color: var(--muted); }
.pi-qty small { display: block; color: var(--accent); font-weight: 650; }
.pi-btn { border: 0 !important; border-radius: 10px !important; background: var(--bg) !important; color: var(--muted); padding: 0 12px !important; min-height: 36px; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.pi-btn.home { background: var(--accent-soft) !important; color: var(--accent); }
.pi.sent .pi-n { color: var(--muted); }
.pi:is(.home, .bought) .pi-n, .pi:is(.home, .bought) .pi-qty { text-decoration: line-through; color: var(--muted); }
#shop-plan-view .shop-section.cart { opacity: 1; }
/* csak a hiányzó rész (2026-10-14): „＋ még ennyi · összesen …” · fölösleg a listán: „Javítsam?” · a tervhez már nem kell */
.pi-flag.more { color: var(--green-ink); }
.pi-fix { grid-column: 1 / 4; grid-row: 3; font-size: .78rem; color: var(--text); background: var(--sun-soft); border-radius: 10px; padding: 6px 10px; margin-top: 4px; }
.pi-fix .link { font-weight: 800; color: var(--accent); padding: 0 !important; min-height: 0; border: 0 !important; background: none !important; text-decoration: underline; }
.shop-section.stale { background: var(--sun-soft) !important; }
.shop-section.stale > p { margin: -4px 0 4px; }
#shop-notes p { display: flex; gap: 8px; max-width: 640px; margin: 8px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--peach-soft); color: var(--text); font-size: .85rem; line-height: 1.4; }
/* 👪 hány főre számol (2026-10-18) — kék, hogy elváljon a figyelmeztetésektől; a gomb jobbra, egy ujjnyi */
#shop-notes p.sp-serv { align-items: center; background: var(--sky-soft, #E5F4FC); }
#shop-notes p.sp-serv > span:nth-child(2) { flex: 1; min-width: 0; }
#shop-notes p.sp-serv .link { flex: none; min-height: 40px; padding: 0 4px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.sa-plan { gap: 8px; }
.sa-target { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .78rem; font-weight: 650; color: var(--muted); }
.sa-target select { max-width: 9.5em; min-height: 44px; border-radius: 12px; }
/* 🎲 Hét kitöltése / sorsolási feltételek: a kijelölt csipesz zöld (mint a Receptek szűrőjén), a gombok teljes szélességben */
.fill-modal :is(.ltab, .rc-chip).on { background: var(--accent-soft) !important; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fill-modal .m-actions .m-gap { display: none; }
.fill-modal .m-actions button { flex: 1 1 0; min-height: 48px; font-weight: 700; }
/* ➕ Új recept (urlap-javaslat.html): kártyák a recept-ablak mintájára */
.rf2 { gap: 12px; }
.rf-title { margin: 0; font: 800 1.4rem var(--font-head); }
.rf-sub { margin: -6px 0 0; }
.rf-imp { display: flex !important; align-items: center; gap: 12px; text-align: left; border: 0 !important; border-radius: var(--radius) !important; padding: 12px 14px !important;
  background: linear-gradient(135deg, #F3F0FF, #FBF0FF) !important; color: var(--text); font: inherit; }
:root[data-theme="dark"] .rf-imp { background: linear-gradient(135deg, #2a2747, #33213d) !important; }
.rf-imp-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--card); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.rf-imp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rf-imp-t > span { font-size: .78rem; color: var(--muted); }
.rf-imp > i { font-style: normal; color: var(--muted); font-weight: 800; }
.rf-photo { min-height: 110px; } .rf-photo .ph-drop-in { min-height: 110px; }
.rf-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rf-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rf-lbl span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rf-fld { display: flex; flex-direction: column; gap: 4px; }
.rf-fld + .rf-fld { border-top: 1px solid var(--line); padding-top: 10px; }
.rf-fld > small, .rf-serv small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.rf-fld > input { width: 100%; font-size: 1rem; }
.rf-seg { display: flex; background: var(--line); border-radius: 14px; padding: 3px; gap: 2px; }
.rf-seg button { flex: 1; min-height: 40px; padding: 0 4px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: var(--muted); font-weight: 700; font-size: .84rem; }
.rf-seg button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.rf-serv { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.rf-serv > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.rf-step { display: flex; align-items: center; gap: 6px; flex: none; }
.rf-step button { width: 40px; height: 40px; border-radius: 50% !important; border: 0 !important; background: var(--accent-soft) !important; color: var(--accent); font: 800 1.2rem var(--font-head); padding: 0 !important; }
.rf-step input { width: 3ch; text-align: center; border: 0 !important; background: transparent !important; font: 800 1.25rem var(--font-head) !important; padding: 0 !important; min-height: 0; }
/* hozzávaló-sor: tömör nézet, rákoppintva a mezők */
.rf2 .ing-rows { gap: 0; }
.rf2 .ing-row { display: block; border-bottom: 1px solid var(--line); }
.rf2 .ing-row:last-child { border-bottom: 0; }
.ir-show { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 0 !important; border: 0 !important; background: none !important; color: var(--text); text-align: left; font: inherit; }
.ir-sn { flex: 1; min-width: 0; font-weight: 600; }
.ir-sq { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-sq.miss { color: var(--warn); font-weight: 700; }
.ir-dots { color: var(--muted); opacity: .7; width: 18px; text-align: center; }
.ir-edit { display: none; }
.rf2 .ing-row.editing .ir-show { display: none !important; }
.rf2 .ing-row.editing .ir-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; }
.ir-edit .ir-name { width: 100%; font-size: 1rem; }
.ir-qty { display: flex; gap: 6px; align-items: center; }
.rf2 .ir-qty .ir-amount { flex: 1 1 0; min-width: 0; font-size: 1rem; }
.rf2 .ir-qty .ir-unit { flex: 1 1 0; min-width: 0; font-size: 1rem; }
.ir-ok, .rf2 .ir-qty .li-rm { width: 44px; height: 44px; flex: none; padding: 0 !important; border: 0 !important; border-radius: 12px !important; }
.ir-ok { background: var(--accent) !important; color: #fff; font-weight: 800; }
.rf2 .ir-qty .li-rm { background: var(--warn-soft) !important; color: var(--warn); }
.rf2 .ir-pg { padding: 0; }
.rf2 .ing-group { display: flex; gap: 8px; align-items: center; padding: 8px 0 4px; }
.rf2 .ing-group .ig-name { flex: 1; font-size: .95rem; }
.rf-add { display: flex; gap: 8px; align-items: center; background: var(--bg); border-radius: 14px; padding: 4px 4px 4px 12px; }
.rf-add input, .rf-add textarea { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; font-size: 1rem; resize: none; }
.rf-add button { width: 40px; height: 40px; flex: none; padding: 0 !important; border: 0 !important; border-radius: 11px !important; background: var(--btn-strong, var(--accent)) !important; color: #fff; font: 800 1.3rem var(--font-head); }
.rf-grp { align-self: flex-start; }
/* tápérték: négy nagy szám */
.rf-nut { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
.rf-nut label { background: var(--bg); border-radius: 12px; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; }
.rf-nut input { width: 100%; text-align: center; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 2px 0 !important; min-height: 0;
  font: 800 1.1rem var(--font-head) !important; color: var(--text); }
.rf-nut span { font-size: .64rem; font-weight: 700; color: var(--muted); }
.rf2 #rf-calc { align-self: flex-start; }
/* lépések */
.rf-steps2 { list-style: none; margin: 0; padding: 0; }
.rf-st { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rf-st:last-child { border-bottom: 0; }
.rf-st > i { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 800 .78rem/26px var(--font); text-align: center; font-style: normal; flex: none; margin-top: 4px; }
.rf2 .rf-st-t, .rf2 .rf-add textarea { resize: none !important; }
.rf-st-t { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px 0 !important; font: inherit; font-size: .95rem; resize: none; overflow: hidden; color: var(--text); }
.rf-st-tm { flex: none; margin-top: 6px; font-size: .7rem; font-weight: 800; color: var(--warn); background: var(--peach-soft); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.rf-st-rm { width: 32px; height: 32px; flex: none; padding: 0 !important; border: 0 !important; background: none !important; color: var(--muted); font-size: 1.1rem; }
.rf-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rf-acts .primary { min-height: 52px; font-weight: 800; font-size: 1rem; }
.rf-acts button:not(.primary) { min-height: 44px; }
.rf-acts .link.danger { align-self: center; }
/* 🏠 Háztartás (urlap-javaslat.html): arc + Tagok · Meghívás · Mi közös? · Fiók, alul Kijelentkezés */
.hh2 { display: flex; flex-direction: column; gap: 12px; }
.hh2 .en-card { gap: 0; }
.hh-face { align-items: center; text-align: center; padding: 18px 16px 14px; }
.hh-face h3 { margin: 6px 0 0; font: 800 1.2rem var(--font-head); }
.hh-face .link { min-height: 0; padding: 0; font-size: inherit; }
.hh-avs { display: flex; justify-content: center; }
.hh-av { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--card); display: grid; place-items: center; font: 800 1.15rem var(--font-head); margin-left: -12px; box-shadow: var(--card-shadow); overflow: hidden; flex: none; }
.hh-av:first-child { margin-left: 0; }
.hh-av img { width: 100%; height: 100%; object-fit: cover; }
.hh-av.add { background: var(--bg) !important; color: var(--accent); border: 2px dashed var(--accent-soft) !important; padding: 0; font-size: 1.3rem; }
.hh-av.sm { width: 38px; height: 38px; margin: 0; border: 0; box-shadow: none; font-size: .9rem; }
.hh-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.hh-lbl span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hh-mem { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hh-mem:last-of-type { border-bottom: 0; }
.hh-mem em { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 800; color: var(--sun-ink); background: var(--sun-soft); padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.hh-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.hh-rt b { font-weight: 650; }
.hh-rt span { font-size: .76rem; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.hh-note { margin: 8px 0 0; }
.hh-code2 { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 16px; padding: 8px 8px 8px 14px; margin-top: 4px; }
.hh-code2 b { flex: 1; font: 800 1.4rem var(--font-head); letter-spacing: .16em; color: var(--accent); }
.hh-code2 button { width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--card) !important; box-shadow: var(--card-shadow); font-size: 1.1rem; flex: none; }
.hh-code2 button.copied { background: var(--accent) !important; color: #fff !important; }
/* ＋ Meghívás alsó lap (2026-10-18, haztartas-javaslat.html „C”) */
.inv-btns { display: flex; flex-direction: column; gap: 8px; }
.inv-b { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px !important; border-radius: 16px !important; text-align: left; width: 100%; }
.inv-b:not(.primary) { background: var(--bg) !important; border: 0 !important; }
.inv-b i { font-style: normal; font-size: 1.2rem; width: 24px; text-align: center; flex: none; display: grid; place-items: center; }
.inv-b i .ic { width: 21px; height: 21px; }
.inv-h { display: flex; align-items: center; gap: 8px; }
/* 🎁 kívánság-lap: kapcsoló-sorok (2026-10-28) — sok tagnál vízszintesen görgethető */
.wi-seg { overflow-x: auto; scrollbar-width: none; }
.wi-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 0 auto !important; padding: 0 10px !important; }
.inv-h .ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.hh-btns button .ic { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.inv-b span { display: flex; flex-direction: column; line-height: 1.25; }
.inv-b small { font-weight: 500; font-size: .78rem; opacity: .75; }
.inv-b.copied { background: var(--green-soft, #DDF3E6) !important; color: #1E6B45 !important; }
.inv-b:disabled { opacity: .6; }
.inv-or { text-align: center; font-size: .78rem; color: var(--muted); font-weight: 600; }
.hh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hh-two button { min-height: 48px; border: 0 !important; border-radius: 14px !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 750; }
.hh-adm { margin-top: 8px; align-self: flex-start; }
.hh2 .hh-invite { margin-top: 10px; }
.hh-set { gap: 12px; justify-content: flex-start; }
.hh-set .en-toggle { margin-left: auto; }
.hh-ric { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex: none; background: var(--bg); }
.hh-row { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; color: var(--text); text-decoration: none; text-align: left; font: inherit; }
.hh-row:last-child { border-bottom: 0 !important; }
.hh-row > i { font-style: normal; color: var(--muted); font-weight: 800; }
.hh-logout { min-height: 50px; border: 0 !important; border-radius: 16px !important; background: var(--warn-soft) !important; color: var(--warn); font-weight: 800; }
.hh-who { text-align: center; margin: -4px 0 0; }
/* 🥗 Adataim (urlap-javaslat.html): mezők 2 oszlopos számkártyákban, napi cél nagyban, levezetés egy sorban,
   BMI színes csíkon, várható fogyás oszlopokkal, adag-mód két választó-kártyán */
#pf-details .pf-grid > * { min-width: 0; }
#pf-details .pf-grid > .field .muted { display: block; white-space: normal; font-size: .72rem; line-height: 1.3; }
#pf-details .pf-grid > .field :is(input, select) { width: 100%; }
#pf-details .pf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; background: none; box-shadow: none; border: 0; padding: 0; margin-top: 14px; }
#pf-details .pf-grid > .pf-title { margin: 4px 2px 2px; }
#pf-details .pf-grid > .field, #pf-goal > .field { background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 8px 12px; gap: 0;
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#pf-details .pf-grid > .field .muted, #pf-goal .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
#pf-details .pf-grid > .field :is(input, select), #pf-goal .field select { border: 0 !important; background-color: transparent !important; box-shadow: none !important;
  padding: 2px 0 !important; min-height: 32px; font: 800 1.15rem var(--font-head) !important; color: var(--text); text-transform: none; letter-spacing: 0; }
#pf-details .pf-grid > .field select, #pf-goal .field select { font-size: 1rem !important; }
#pf-details .pf-grid > .field input::placeholder { font: 500 1rem var(--font); color: var(--muted); }
#pf-details .pf-grid > .pf-track { background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 10px 12px; }
#pf-details .pf-grid .wide { grid-column: 1 / -1; }
.pf-goal-off { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); }
.pf-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 2px 6px; }
.pf-target { display: flex; flex-direction: column; background: var(--accent-soft); border-radius: 18px; padding: 12px 14px; }
.pf-target small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.pf-target b { font: 800 1.7rem var(--font-head); color: var(--accent); line-height: 1.2; }
.pf-target b em { font: 600 .85rem var(--font); font-style: normal; color: var(--muted); }
.pf-target > span { font-size: .78rem; color: var(--text); }
.pf-chain { margin-top: 8px; background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 10px 14px; font-size: .8rem; color: var(--muted); }
.pf-chain b { color: var(--text); font-variant-numeric: tabular-nums; }
.pf-card { padding: 12px 14px !important; margin-top: 10px; }
.pf-card > p { margin: 6px 0 0; }
.pf-bmi-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pf-bmi-top b { font: 800 1.5rem var(--font-head); }
.pf-bmi { position: relative; height: 10px; border-radius: 99px; margin: 10px 0 4px;
  background: linear-gradient(90deg, #9CC9F0 0 14%, #7FD1A3 14% 40%, #F4C76B 40% 60%, #F09A7A 60%); }
.pf-bmi i { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.pf-bmi i.goal { background: var(--card); box-shadow: 0 0 0 2px var(--text); width: 6px; margin-left: -3px; }
.pf-bmi-l { display: grid; grid-template-columns: 14% 26% 20% 40%; font-size: .64rem; font-weight: 700; color: var(--muted); }
.pf-bmi-l span:nth-child(2), .pf-bmi-l span:nth-child(3) { text-align: center; } .pf-bmi-l span:last-child { text-align: right; }
.pf-fc { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-top: 10px; }
.pf-fc span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; }
.pf-fc i { display: block; border-radius: 6px 6px 2px 2px; background: var(--accent-soft); }
.pf-fc i.on { background: var(--accent); }
.pf-fc small { font-size: .62rem; color: var(--muted); text-align: center; font-weight: 700; }
.pf-apply2 { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin-top: 16px; }
.pf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-choice label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); border: 2px solid transparent; cursor: pointer; }
.pf-choice label.on { border-color: var(--accent); background: var(--accent-soft); }
.pf-choice label.off { opacity: .55; cursor: default; }
.pf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pf-choice label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-choice b { font-size: .9rem; } .pf-choice span { font-size: .74rem; color: var(--muted); }
/* 📈 Előzmények napi nézete: súly + víz a „Ma” tömör soraival */
.hd-rows { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.hd-wa { background: var(--sky-soft); }
.hd-wa .ma-wt-l, .hd-wa .ma-wt-pm { color: #1d6f9c; }
.hd-wa .ma-wt-pm:disabled { opacity: .4; }
:root[data-theme="dark"] .hd-wa .ma-wt-l, :root[data-theme="dark"] .hd-wa .ma-wt-pm { color: #8fd0f2; }
/* 🧾 Vásárlások: a bevásárlólista sor-mintája, a „+ listára” puha kerek gomb (≥ 36 px) */
.log-day { padding: 12px 16px 2px; }
.log-row { min-height: 52px; padding: 6px 0; gap: 2px 10px; }
.log-row:last-child { border-bottom: 0; }
.log-name { font-weight: 600; }
.log-row [data-rebuy-log] { min-height: 36px; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 650; text-decoration: none; white-space: nowrap; }
/* dátum- és időmezők: a saját magyar felirat a mező fölött (inputs.js dateFace) */
.dt-wrap { position: relative; display: block; }
.dt-wrap > input { width: 100%; color: transparent !important; -webkit-text-fill-color: transparent; }
.dt-wrap > input::-webkit-datetime-edit { color: transparent; }
.dt-face { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; pointer-events: none; color: var(--text); font-size: 1rem; white-space: nowrap; overflow: hidden; }
/* „Mi ez az étel?”: nagy szaggatott fotó-mező (mint a recept fotójánál), a kép a helyén; alatta két gomb egy sorban */
.ph-drop { display: block; cursor: pointer; border: 2px dashed var(--line); border-radius: 18px; background: var(--bg); min-height: 150px; overflow: hidden; position: relative; margin: 4px 0 2px; }
.ph-drop-in { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--muted); padding: 12px; }
.ph-drop-in b { color: var(--accent); font-size: 1.05rem; }
.ph-drop.has { border-style: solid; border-color: transparent; }
.ph-drop.has .ph-drop-in { padding: 0; }
.ph-drop.has img { width: 100%; height: 220px; object-fit: cover; display: block; }
.ph-drop-swap { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; font-weight: 650; padding: 6px 12px; border-radius: 10px; }
@media (pointer: coarse) { .only-mouse { display: none; } }
.food-modal .food-acts { display: flex; gap: 8px; }
.food-modal .food-acts button { flex: 1 1 0; min-height: 48px; font-weight: 700; }
/* „Mit főzzek?”: egy fő gomb, alatta a fotós lehetőség kártyaként */
.pt-find { width: 100%; min-height: 48px; font-weight: 700; }
/* 🧺 „Mit szeretnél?” — három út (2026-10-25) + a „Mindkettő” kitalált receptje kártyaként */
.pt-ml { margin: 6px 0 -2px; font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
/* egymás alatt, teljes szélességben (2026-10-25: három hasábban telefonon összenyomódott) */
.pt-modes { display: flex; flex-direction: column; gap: 6px; }
.pt-modes button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px !important; border-radius: 14px !important;
  text-align: left; line-height: 1.3; }
.pt-modes button > i { font-style: normal; font-size: 1.1rem; flex: none; width: 44px; text-align: center; white-space: nowrap; letter-spacing: -2px; }
.pt-modes button > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pt-modes button b { font-size: .92rem; }
.pt-modes button small { font-size: .76rem; color: var(--muted); font-weight: 600; }
.pt-modes button.on { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1.5px var(--accent); }
.pt-modes button.on b { color: var(--accent); }
.pt-cost { margin: 2px 2px 0; line-height: 1.4; }
.pt-grp { margin: 12px 0 4px; font-weight: 800; font-size: .9rem; }
.pt-grp.ok { color: var(--green-ink); } .pt-grp.buy { color: var(--accent); }
.pt-grp-t { margin: 0 0 6px; }
.pt-aicard { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); margin: 4px 0 10px; }
.pt-aicard > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-rm { background: var(--card) !important; border: 1px solid var(--line) !important; font-weight: 800; }
.pt-pick { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--bg); cursor: pointer; min-height: 56px; }
.pt-pick-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--card); font-size: 1.1rem; }
.pt-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-pick-t b { font-weight: 650; }
/* 🍳 Főzés oldal: időszak-kártya + ételkártyák a „Ma” mintájára */
#fozes .sp-sum { margin-bottom: 0; }
.cook-hint { margin: 10px 2px 12px; }
.cook-sum { justify-content: flex-start; gap: 12px; border: 0; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 10px 12px; }
.cook-sum .cook-title { flex: 1; min-width: 0; gap: 2px; }
.cook-sum h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.ck-go { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; font-weight: 700; }
.cook-done { background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 12px 16px 4px; }
.cook-done:empty { display: none; }
.cook-done h3 { margin: 0 0 4px; font-size: .78rem; }
.cook-done li { min-height: 48px; }
.cook-done li:last-child { border-bottom: 0; }
@media (max-width: 700px) {
  .shop-actions.sa-plan { flex-wrap: nowrap; }
  .shop-actions.sa-plan #send-btn { flex: 1 1 auto; order: 0; min-width: 0; padding: 10px 12px; }
}

/* ===== 📅 Lapozható „Ma” (today.js dayHeadHtml; ma-lapozas-javaslat.html) ===== */
.md-strip { display: flex; align-items: center; gap: 8px; }
.md-ar { width: 44px; height: 44px; flex: none; border-radius: 50% !important; border: 0 !important; background: var(--card) !important; box-shadow: var(--card-shadow); font: 800 1.3rem var(--font-head); padding: 0 !important; color: var(--text); }
.md-ar:disabled { opacity: .3; }
/* a nyilak mindig ugyanott (a címke + dátum mellett), akkor is, ha alatta van köszönés-sor — különben húzáskor a két nap nyilai elcsúsztak */
.md-strip > .md-ar { align-self: flex-start; margin-top: 2px; }
.md-mid { flex: 1; min-width: 0; display: flex !important; flex-direction: column; align-items: center; gap: 1px; border: 0 !important; background: none !important; padding: 2px 0 !important; color: var(--text); font: inherit; }
.md-mid b { font: 800 1.2rem var(--font-head); line-height: 1.2; text-align: center; }
.md-sub { font-size: .8rem; color: var(--muted); text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* mindig egy sor: minden napon ugyanolyan magas a fejléc */
.md-pill { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 9px; border-radius: 6px; background: var(--brand); color: #17130F; }
.md-pill.past { background: var(--line); color: var(--muted); }
.md-pill.fut { background: var(--sky-soft); color: #1d6f9c; }
:root[data-theme="dark"] .md-pill.fut { color: #8fd0f2; }
.md-dots { display: flex; justify-content: center; gap: 5px; margin: 4px 0 2px; }
.md-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width .2s; }
.md-dots i.today { box-shadow: 0 0 0 2px var(--brand-soft); }
.md-dots i.on { width: 18px; background: var(--brand); }
.md-back { align-self: center; display: block; margin: 4px auto 0; border: 0 !important; border-radius: 10px !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 800; font-size: .85rem; padding: 0 16px !important; min-height: 36px; }
.md-banner { margin: 6px 0 2px; padding: 8px 12px; border-radius: 12px; background: var(--line); color: var(--muted); font-size: .82rem; text-align: center; }
.md-banner.fut { background: var(--sky-soft); color: #1d6f9c; }
:root[data-theme="dark"] .md-banner.fut { color: #8fd0f2; }
.ma-eye { flex: none; color: var(--muted); font-size: 1rem; width: 30px; text-align: center; }
.ma-meal.ma-fut, .ma-todo-row.ma-fut { cursor: default; }
.ma-st-fut { cursor: default; opacity: .85; }
#ma-body { touch-action: pan-y; will-change: transform; } /* a vízszintes húzás a miénk, a függőleges görgetés a böngészőé */
/* húzás közben a szomszéd nap ott van mellette (today.js `.md-ghost`); a kilógó rész nem ad vízszintes görgetést */
#ma { position: relative; overflow-x: clip; }
.md-ghost { position: absolute; margin: 0; pointer-events: none; will-change: transform; }
.md-peek { position: fixed; top: 50%; left: 14px; z-index: 6; transform: translateY(-50%); pointer-events: none; opacity: 0; visibility: hidden;
  font: 800 .9rem var(--font-head); color: var(--text); background: var(--card); box-shadow: var(--card-shadow); padding: 10px 14px; border-radius: 10px; }
.md-peek.right { left: auto; right: 14px; }
.md-peek.on { visibility: visible; }
/* (backwards, nem both: a végén elengedi a transform-ot — különben a következő húzás nem mozdítaná az oldalt) */
/* (2026-10-19, Andras: a fejléc — dátum, pöttyök, „Vissza a mára”, sáv — áll, csak alatta úszik be az új nap) */
#ma-body.md-in-r > :not(.md-strip, .md-dots) { animation: mdInR .28s var(--ease-out, ease) backwards; }
#ma-body.md-in-l > :not(.md-strip, .md-dots) { animation: mdInL .28s var(--ease-out, ease) backwards; }
/* gombbal / naptárból lapozva a dátum-szöveg is az irányából úszik be (a nyilak a helyükön) */
#ma-body.md-in-r > .md-strip > .md-mid { animation: mdHeadR .32s var(--ease-out, ease) backwards; }
#ma-body.md-in-l > .md-strip > .md-mid { animation: mdHeadL .32s var(--ease-out, ease) backwards; }
@keyframes mdHeadR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes mdHeadL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.md-dots i { transition: width .25s, background-color .25s; }
/* a húzás közbeni szomszéd napon a fejléc láthatatlan (helyet foglal, így a kártyák egy vonalban) — a valódi fejléc áll */
/* a szellem fejlécéből csak a dátum-szöveg és a pöttyök látszanak (átúsznak a valódi fölött); a nyilak a valódi napéi */
.md-ghost > .md-strip > .md-ar { visibility: hidden; }
@keyframes mdInR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes mdInL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* ===== 🎓 Bemutató (tour.js): lenyíló témák, rajzolt mini-képernyő számozott jelölőkkel ===== */
.tr { display: flex; flex-direction: column; gap: 10px; }
.tr-lead { margin: 0 2px 2px; font-size: .9rem; }
.tr-topic { padding: 0 !important; gap: 0 !important; overflow: hidden; scroll-margin-top: 80px; }
.tr-head { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px !important; border: 0 !important; border-radius: 0 !important; background: none !important; text-align: left; color: var(--text); font: inherit; }
.tr-hic { width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.tr-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-ht b { font: 700 1rem var(--font-head); } .tr-ht span { font-size: .78rem; color: var(--muted); }
.tr-head > i { font-style: normal; color: var(--muted); font-weight: 800; transition: transform .2s; }
.tr-topic.open .tr-head > i { transform: rotate(90deg); }
.tr-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
/* 🧭 súgó-mód kapcsoló a „Hogy használd?” tetején */
.tr-help { display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 10px 12px; padding: 14px !important; border: 2px solid var(--accent) !important; }
.tr-help .tr-ht span { font-size: .82rem; line-height: 1.35; }
.tr-help .tr-ht span b { color: var(--accent); font: inherit; font-weight: 900; }
.tr-help > button { grid-column: 1 / -1; min-height: 44px; padding: 0 18px !important; border-radius: 12px !important; font-weight: 800; }
.tr-help > .tr-hbtn { grid-column: 1 / -1; border-bottom: 0; border-top: 1px solid var(--line); padding: 10px 0 0; margin-top: 2px; }
.tr-hbtn .hh-rt { display: flex; flex-direction: column; } .tr-hbtn .hh-rt b { font-size: .92rem; } .tr-hbtn .hh-rt span { font-size: .78rem; color: var(--muted); }
/* a „?” gomb elrejtve (p.helpBtn = false): a 🐞 kerül a helyére */
.help-btn[hidden] { display: none !important; }
.bug-btn, .bug-btn + .fb-btn { margin-left: 0; }
.help-btn[hidden] + .bug-btn { margin-left: auto; }
.hh-pill:not([hidden]) ~ .bug-btn { margin-left: 0; }
@media (min-width: 1000px) { .help-btn[hidden] + .bug-btn { margin-top: auto; margin-left: 0; } }
/* ↶ Visszavonás a felső sávban (data.js showUndoBar). 2026-11-07: külön gomb (#undo-top), amíg van mit visszavonni, ott marad; az első 10 mp-ben
   fekete, a narancs csík a gomb SAJÁT méretén belül fut (inset: 0, Andras: ne legyen nagyobb a mellette lévőknél), utána olyan, mint a többi */
@property --undo-p { syntax: '<number>'; inherits: false; initial-value: 1; }
.undo-btn, .undo-btn + .fb-btn { margin-left: 0; }
.fb-btn.fb-undo { position: relative; background: var(--btn) !important; color: var(--btn-ink, #fff) !important; animation: undoPop .3s ease-out; }
.fb-btn.fb-undo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: conic-gradient(var(--brand) calc(var(--undo-p) * 360deg), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: undoRing 10s linear forwards; }
@keyframes undoRing { from { --undo-p: 1; } to { --undo-p: 0; } }
@keyframes undoPop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.undo-tip { position: fixed; z-index: 65; max-width: min(300px, calc(100vw - 24px)); padding: 8px 12px; border-radius: 12px; background: var(--btn); color: var(--btn-ink, #fff);
  font-size: .82rem; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); pointer-events: none; touch-action: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* egy sor: a felső sávban marad (2026-10-19) */
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.undo-tip.side { transform: translate(-4px, -50%); }
.undo-tip.show { opacity: 1; transform: none; pointer-events: auto; } /* látható állapotban megfogható: felfelé húzva / koppintva eltűnik */
.undo-tip.side.show { transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .fb-btn.fb-undo, .fb-btn.fb-undo::after { animation: none; } }
/* 🐞 hibanapló (2026-10-18, buglog.js): felvétel közben a gomb piros és lüktet, felül a futó idő sávja */
.bug-btn.on { background: var(--warn) !important; color: #fff !important; animation: fbPulse 1.6s ease-in-out infinite; }
/* a sáv saját helyet kap legfelül (teljes szélesség, FIX magasság — nem ugrál), semmit nem takar: a fejléc, az ablakok és a
   teljes képernyős oldalak --bug-h-val lejjebb kerülnek (a buglog.js méri; mint az időzítősávnál a --dock-h) */
:root { --top-off: calc(var(--dock-h, 0px) + var(--bug-h, 0px)); }
.bug-bar { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-top)); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: #2B1712; color: #fff; overflow: hidden; }
.bug-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF4D3D; flex: none; animation: bugBlink 1s steps(2, start) infinite; }
.bug-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bug-tx b { font-size: .9rem; white-space: nowrap; }
.bug-tx .bug-t { display: inline-block; min-width: 3.2em; font-variant-numeric: tabular-nums; }
.bug-tx .bug-sub { font-size: .76rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bug-tx .bug-sub.warn { color: #FFC9A8; opacity: 1; }
.bug-stop { flex: none; height: 40px; min-height: 0; padding: 0 16px !important; border-radius: 12px !important; border: 0 !important; background: #fff !important; color: #2B1712 !important; font-weight: 800; }
html.bug-on:not(.has-dock) .top { top: var(--bug-h, 0px); }
html.bug-on :is(.modal-bg, .wz, .backdrop, .picker-bg) { top: var(--bug-h, 0px); }
html.bug-on #het-body .wk-today { top: calc(8px + var(--bug-h, 0px)); }
@media (min-width: 1000px) {
  html.bug-on .top { top: var(--bug-h, 0px) !important; }
  html.bug-on body.app { padding-top: var(--top-off, 0px); }
}
@media (min-width: 601px) { html.bug-on .drawer { top: calc(50% + var(--bug-h, 0px) / 2); max-height: calc(100dvh - 48px - var(--bug-h, 0px)); } }
@keyframes bugBlink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .bug-dot, .bug-btn.on { animation: none; } }
.fb-log { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 14px; background: var(--accent-soft); }
.fb-log > span:first-child { font-size: 1.3rem; }
.fb-log > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.fb-log small { font-size: .78rem; color: var(--muted); }
.fb-log button { width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; flex: none; }
.tr-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #17130F; font: 800 .7rem/1 var(--font); font-style: normal; flex: none; box-shadow: 0 0 0 2px var(--card); }
.tr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tr-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.tr-steps li .tr-n { margin-top: 1px; }
.tr-tip { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-size: .84rem; line-height: 1.45; }
.tr-foot { text-align: center; margin: 4px 0 0; }
/* a mini-képernyő */
.tr-ph { background: var(--bg); border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; position: relative; }
.tr-ph .tr-n { position: absolute; top: -7px; left: -7px; }
.tr-ph > *, .tr-ph .tr-card, .tr-ph .tr-gc, .tr-ph .tr-sq, .tr-ph .tr-fab, .tr-ph .tr-swipe, .tr-ph .tr-alg, .tr-ph .tr-fb, .tr-ph .tr-tile, .tr-ph .tr-chips span, .tr-ph .tr-li { position: relative; }
.tr-card { background: var(--card); border-radius: 14px; box-shadow: var(--card-shadow); padding: 8px 10px; }
.tr-row { display: flex; align-items: center; gap: 8px; }
.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-ic, .tr-th { width: 30px; height: 30px; border-radius: 9px; background: var(--bg); display: grid; place-items: center; flex: none; font-size: .95rem; }
.tr-th { background: var(--green-soft); }
.tr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-tag { align-self: flex-start; font-size: .58rem; font-weight: 800; text-transform: uppercase; padding: 0 6px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); }
.tr-chev { margin-left: auto; color: var(--muted); font-weight: 800; }
.tr-chk { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); flex: none; margin-left: auto; }
.tr-chk.on { background: var(--green); border-color: var(--green); }
.tr-st { display: flex; align-items: center; gap: 8px; }
.tr-sky { background: var(--sky-soft); }
.tr-ring { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--brand) 40%, var(--brand-soft) 0); display: grid; place-items: center; flex: none; font-size: .7rem; }
.tr-ring.sky { background: conic-gradient(var(--sky) 30%, var(--card) 0); }
.tr-grid { display: grid; grid-template-columns: 54px repeat(3, 1fr); gap: 5px; align-items: center; }
.tr-gh { text-align: center; font-weight: 800; font-size: .7rem; }
.tr-gl { font-size: .66rem; font-weight: 700; color: var(--muted); }
.tr-gc { height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .9rem; }
.tr-gc.sun { background: var(--sun-soft); } .tr-gc.grn { background: var(--green-soft); } .tr-gc.e { box-shadow: inset 0 0 0 1.5px var(--line); }
.tr-gc.on { box-shadow: 0 0 0 2px var(--text); }
.tr-gc .tr-n { position: absolute; top: -8px; right: -8px; left: auto; }
.tr-rand { justify-content: center; background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.tr-icons { justify-content: flex-end; gap: 10px; color: var(--muted); font-weight: 700; font-size: .68rem; }
.tr-search { flex: 1; background: var(--card); border-radius: 12px; padding: 7px 10px; color: var(--muted); box-shadow: var(--card-shadow); }
.tr-sq { width: 32px; height: 32px; border-radius: 10px; background: var(--card); box-shadow: var(--card-shadow); display: grid; place-items: center; }
.tr-sq .tr-n { position: absolute; top: -8px; right: -8px; left: auto; }
.tr-rc { display: flex; flex-direction: column; gap: 3px; padding: 0 0 8px; overflow: visible; }
.tr-rc b { padding: 0 8px; font-size: .74rem; line-height: 1.2; }
.tr-rci { height: 38px; border-radius: 14px 14px 0 0; display: grid; place-items: center; font-size: 1.1rem; position: relative; }
.tr-rci.sun { background: var(--sun-soft); } .tr-rci.grn { background: var(--green-soft); } .tr-rci.pch { background: var(--peach-soft); }
.tr-rci .tr-n { position: absolute; top: -7px; right: -7px; left: auto; }
.tr-alg { align-self: flex-start; margin: 0 8px; font-size: .6rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--line); }
.tr-alg.ok { background: var(--green-soft); color: var(--green-ink); }
.tr-alg.me { background: #D93025; color: #fff; }
.tr-alg.hh { background: var(--card); color: #B3261E; box-shadow: inset 0 0 0 1.5px #F1B2AE; }
.tr-alg .tr-n { position: absolute; top: -12px; right: -8px; left: auto; }
.tr-algrow { display: flex; flex-wrap: wrap; gap: 10px 4px; padding-top: 6px; }
.tr-me { box-shadow: 0 0 0 2.5px #D93025, var(--card-shadow); }
.tr-chips { flex-wrap: wrap; gap: 6px; }
.tr-chips span { background: var(--card); border-radius: 10px; padding: 5px 10px; box-shadow: var(--card-shadow); font-weight: 700; font-size: .7rem; }
.tr-chips .tr-n { position: absolute; top: -9px; right: -7px; left: auto; }
.tr-ai { font-style: normal; font-size: .55rem; color: #fff; background: linear-gradient(135deg, #7C6CF2, #B05CE0); padding: 0 5px; border-radius: 10px; }
.tr-fab, .tr-chips .tr-fab { background: var(--brand) !important; color: #17130F; }
.tr-prog { height: 7px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; } .tr-prog i { display: block; height: 100%; width: 40%; background: var(--brand); border-radius: 99px; }
.tr-small { font-size: .66rem; color: var(--muted); }
.tr-timer { margin-left: auto; font-size: .66rem; font-weight: 800; color: var(--warn); background: var(--peach-soft); padding: 1px 7px; border-radius: 6px; }
.tr-li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.tr-li:last-child { border-bottom: 0; }
.tr-li em { margin-left: auto; font-style: normal; color: var(--muted); }
.tr-li > .tr-n { position: absolute; top: -6px; left: -14px; }
.tr-ci { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.tr-ci.on { background: var(--green); border-color: var(--green); }
.tr-done { text-decoration: line-through; color: var(--muted); }
.tr-swipe { background: var(--brand); color: #17130F; border-radius: 8px; padding: 2px 8px; font-weight: 800; font-size: .7rem; }
.tr-swipe .tr-n { position: absolute; top: -10px; left: -10px; }
.tr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tr-tile { background: var(--card); border-radius: 12px; box-shadow: var(--card-shadow); padding: 6px 4px; text-align: center; font-size: .64rem; font-weight: 700; display: flex; flex-direction: column; }
.tr-tile b { font-size: 1rem; }
.tr-tile .tr-n { position: absolute; top: -7px; left: -7px; }
.tr-top b { flex: 1; font: 800 .9rem var(--font-head); }
.tr-fb { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; }
.tr-fb .tr-n { position: absolute; top: -6px; right: -8px; left: auto; }
.tr-upd { background: var(--green-soft); color: var(--green-ink); justify-content: center; }
/* ===== 🎨 PeliCook arculat — célzott felülírások (a változók a fájl elején; szin-javaslat.html) ===== */
button.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); box-shadow: 0 6px 16px rgba(23, 19, 15, .18); }
:root[data-theme="dark"] button.primary { box-shadow: 0 6px 16px rgba(var(--brand-rgb), .25); }
.plan-day .jd.on { background: var(--btn); color: var(--btn-ink); box-shadow: 0 6px 16px rgba(23, 19, 15, .2); }
.rv-cook { box-shadow: 0 8px 18px rgba(23, 19, 15, .22); }
.top h1 { color: var(--text); }
.brand-c { color: #E07B00; } :root[data-theme="dark"] .brand-c { color: var(--brand); }
.ma-ring { --rc: var(--brand); --rs: var(--brand-soft); }
.ma-bar i, .sh-bar i { background: var(--brand); }
.li-fab, #rec-new { background: var(--brand) !important; border-color: var(--brand) !important; color: #17130F !important; box-shadow: 0 10px 24px rgba(var(--brand-rgb), .35); }
.jc-green { background: var(--green-soft); }
.tag-ebed { background: var(--green-soft); color: var(--green-ink); }
.alg.ok { background: var(--green-soft); color: var(--green-ink); }
/* a háztartás más tagjának allergiája: eddig narancs (az most a márka) → halvány piros keretes; a tiéd marad tömör piros */
.alg.hh { background: var(--card); color: #B3261E; box-shadow: inset 0 0 0 1.5px #F1B2AE; }
:root[data-theme="dark"] .alg.hh { background: #2A1716; color: #FF9C93; box-shadow: inset 0 0 0 1.5px #6B2A26; }
.alg-dot.hh { background: #E57373; }
.rf-add button, .ir-ok { background: var(--btn) !important; color: var(--btn-ink) !important; }

/* ---- 🔥 Ízlés-kör és 💞 Közös kedvencek (tinder-javaslat.html, tastes.js) ---- */
.rc-lovebtn { font-size: 1.35rem; background: linear-gradient(135deg, #FFE1C2, #FFD2DE) !important; }
:root[data-theme="dark"] .rc-lovebtn { background: linear-gradient(135deg, #4A3420, #4A2532) !important; }
.rc-lovebtn i { background: #C23E68 !important; } /* (2026-10-31: fehér „99+” olvashatóbban) */
.rc-love { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .92); font-size: .8rem; line-height: 1.5; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
/* amit a háztartásból más 👎-olt: halványabb kártya, a sarkában a neve (koppintva / fókuszban teljes) */
.rc-card.rc-odown { opacity: .55; transition: opacity .2s; }
.rc-card.rc-odown:hover, .rc-card.rc-odown:focus-visible { opacity: 1; }
.rc-down { position: absolute; top: 6px; left: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 3px; border-radius: 6px;
  background: rgba(255, 255, 255, .92); font-size: .74rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.rc-down .tk-av + .tk-av { margin-left: -6px; }
.rf-mem { display: flex; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--line); }
.rf-mnm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-mem .rf-mode button { min-width: 44px; min-height: 44px; padding: 0 8px !important; } /* gyakori gomb: ≥ 44 px (ellenőrzés, 2026-10-17) */
.tk-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 800 .72rem/1 var(--font-head, inherit); box-shadow: 0 0 0 2px var(--card); }
.tk-av.sm { width: 20px; height: 20px; font-size: .56rem; }
.tk-av.q { background: #C9BDB0; }
.tk-avs { display: inline-flex; flex: none; }
.tk-avs .tk-av + .tk-av { margin-left: -8px; }
.wz.tk { z-index: 19; } /* a recept-ablak (21) és az alsó lapok (50) ez fölött nyílnak */
/* a fejléc (‹, étkezés-választó) saját, legfelső rétegen: iPhone-on a görgethető / animált kártyák rétege elvette tőle
   a koppintást (Andras, 2026-10-16: „a felső gombok nem nyomhatóak”) */
.tk-top { position: relative; z-index: 10; padding-bottom: 8px; background: var(--bg); }
.tk-progrow { position: relative; z-index: 9; }
.tk-deck, .tk-body { position: relative; z-index: 1; }
.tk-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-ttl b { font: 800 1.15rem/1.2 var(--font-head); }
.tk-ttl small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.tk-body > * { flex: none; }
.tk-kbar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px !important; border: 0 !important; border-radius: 18px !important;
  background: var(--card) !important; box-shadow: var(--card-shadow); text-align: left; color: var(--text); }
.tk-kic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--accent-soft); }
.tk-kt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tk-kt b { font-size: .95rem; } .tk-kt small { color: var(--muted); font-size: .78rem; }
.tk-go { flex: none; background: var(--btn); color: var(--btn-ink); font-size: .8rem; font-weight: 800; padding: 9px 14px; border-radius: 10px; }
.tk-love { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, #FFE1C2, #FFD2DE); color: #3A2418; }
.tk-love .tk-av { width: 34px; height: 34px; font-size: .8rem; box-shadow: 0 0 0 2px #FFE6D6; }
.tk-love b { font: 800 1.05rem/1.25 var(--font-head); display: block; } .tk-love small { font-size: .78rem; color: #6B4A3A; }
:root[data-theme="dark"] .tk-love { background: linear-gradient(135deg, #4A3420, #4A2532); color: var(--text); }
:root[data-theme="dark"] .tk-love small { color: var(--muted); }
.tk-note { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.tk-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tk-tally button { display: flex; flex-direction: column; align-items: center; min-height: 54px; padding: 6px 2px !important; border: 0 !important; border-radius: 14px !important;
  background: var(--card) !important; box-shadow: var(--card-shadow); font-size: .72rem; color: var(--muted); }
.tk-tally button b { font: 800 1.05rem/1.2 var(--font-head); color: var(--text); }
.tk-tally button.on { box-shadow: inset 0 0 0 2px var(--btn), var(--card-shadow); color: var(--text); }
.tk-rand { min-height: 52px; border: 0 !important; border-radius: 16px !important; background: var(--brand) !important; color: #17130F; font-weight: 800; font-size: .95rem;
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), .3); }
.tk-empty { margin: 4px 0 0; padding: 22px 16px; text-align: center; border-radius: 18px; border: 2px dashed var(--line); color: var(--muted); font-size: .88rem; line-height: 1.45; }
.tk-grid { margin: 0; }
/* ízlés-kör */
.tk-cat { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0 !important; background: transparent !important; padding: 0 4px !important; color: var(--text); }
.tk-cat b { font: 800 1.15rem var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cat i { font-style: normal; font-size: .75rem; color: var(--muted); background: var(--line); border-radius: 99px; width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.tk-top .tk-avs { min-width: 44px; justify-content: flex-end; }
.tk-progrow { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; }
.tk-progrow small { flex: none; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.tk-progrow .wz-prog i { background: var(--brand); }
.tk-deck { position: relative; flex: 1 1 auto; min-height: 0; margin: 4px 16px 0; }
.tk-card { position: absolute; inset: 0 0 18px; display: flex; flex-direction: column; border-radius: 26px; background: var(--card); box-shadow: 0 12px 30px rgba(23, 19, 15, .16);
  overflow: hidden; cursor: grab; touch-action: none; transition: transform .35s var(--ease-out, ease), opacity .35s; }
.tk-card.back1 { transform: scale(.95) translateY(12px); pointer-events: none; }
.tk-card.back2 { transform: scale(.9) translateY(24px); pointer-events: none; }
/* „backwards”, nem „both”: a lefutott animáció nem tarthatja fogva a transformot — különben a húzás (inline transform) nem mozdítja a kártyát */
.tk-card:not(.back1):not(.back2) { animation: tkIn .25s var(--ease-out, ease) backwards; }
@keyframes tkIn { from { transform: scale(.95) translateY(12px); } to { transform: none; } }
.tk-ph { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.tk-ph .rec-hero { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; pointer-events: none; }
.tk-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55)); pointer-events: none; }
.tk-emoji { font-size: 5.5rem; }
/* (2026-11-02, Andras: a kép nélküli kártyán az alsó sötét sáv „nem fedte le” a kártyát) — fotó nélkül nincs sötét átmenet:
   a halvány színes lapon középen a csendes ikon, a név sötét betűvel */
.tk-ph.tk-nophoto::after { display: none; }
.tk-ph.tk-nophoto .tf { position: absolute; inset: 0; display: grid; place-items: center; background: none; }
.tk-ph.tk-nophoto .tf .ic { width: 76px; height: 76px; color: color-mix(in srgb, var(--text) 30%, transparent); }
.tk-ph.tk-nophoto .tk-nm { color: var(--text); }
.tk-ph.tk-nophoto .tk-nm b { text-shadow: none; }
.tk-ph .rec-ill { left: auto; right: 10px; bottom: auto; top: 10px; z-index: 2; font-size: .62rem; }
.tk-ph:has(.tk-wait) .rec-ill { display: none; }
.tk-wait { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 225, 194, .96), rgba(255, 210, 222, .96)); font-size: .76rem; font-weight: 700; color: #8A2D4A; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); text-align: left; }
.tk-wait .tk-av { width: 24px; height: 24px; font-size: .6rem; }
.tk-nm { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; text-align: left; }
.tk-nm b { display: block; font: 800 1.3rem/1.2 var(--font-head); text-shadow: 0 1px 8px rgba(0, 0, 0, .3); margin-top: 4px; }
.tk-stamp { position: absolute; top: 64px; z-index: 4; padding: 4px 12px; border: 3px solid; border-radius: 12px; font: 900 1.4rem var(--font-head); letter-spacing: .04em;
  opacity: 0; background: rgba(255, 255, 255, .88); pointer-events: none; }
.tk-stamp.yes { left: 18px; color: var(--green); transform: rotate(-14deg); }
.tk-stamp.no { right: 18px; color: var(--warn); transform: rotate(14deg); }
.tk-info { flex: none; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.tk-meta { display: flex; gap: 12px; font-size: .82rem; color: var(--muted); } .tk-meta b { color: var(--text); }
.tk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); background: var(--bg); border-radius: 12px; padding: 5px 8px; }
.tk-who span:not(.tk-av) { margin-right: 6px; }
.tk-done { position: absolute; inset: 0 0 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
  border-radius: 26px; border: 2px dashed var(--line); }
.tk-done > span { font-size: 3rem; } .tk-done b { font: 800 1.2rem var(--font-head); } .tk-done small { color: var(--muted); }
.tk-done button { width: 100%; max-width: 320px; min-height: 48px; border-radius: 14px !important; }
.tk-btns { flex: none; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 8px 16px 0; }
.tk-btns button { border: 0 !important; background: var(--card) !important; box-shadow: 0 6px 18px rgba(23, 19, 15, .14); border-radius: 50% !important; display: grid; place-items: center; padding: 0 !important; }
.tk-btns button:disabled { opacity: .4; }
.tk-btns .big { width: 66px; height: 66px; } .tk-btns .sm { width: 48px; height: 48px; }
.tk-btns svg { width: 28px; height: 28px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-btns .sm svg { width: 20px; height: 20px; }
.tk-btns .no svg { stroke: var(--warn); } .tk-btns .yes svg { stroke: var(--green); }
.tk-btns button:not(:disabled):active { transform: scale(.92); }
.tk-hint { flex: none; margin: 0; padding: 8px 16px 14px; min-height: 2.6em; text-align: center; font-size: .74rem; color: var(--muted); }
.tk-cs h3 { margin: 0 0 10px; }
.tk-csl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-cso { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px !important; border: 2px solid transparent !important; border-radius: 16px !important; text-align: left; color: var(--text); }
.tk-cso.wide { grid-column: 1 / -1; }
.tk-cso.on { border-color: var(--btn) !important; }
.tk-cse { font-size: 1.5rem; } .tk-cso b { display: block; font-size: .9rem; } .tk-cso small { font-size: .72rem; color: var(--muted); }
.tk-match { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: linear-gradient(160deg, rgba(255, 214, 170, .97), rgba(255, 190, 210, .97)); color: #3A2418; animation: wzIn .3s var(--ease-out, ease) both; overflow: hidden; }
.tk-match h2 { margin: 0; font: 900 1.8rem var(--font-head); color: #8A2D4A; } .tk-match p { margin: 0; color: #6B4A3A; }
.tk-mpic { position: relative; width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; font-size: 4rem; border: 5px solid #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.tk-mpic .rec-hero { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 50%; }
.tk-mpic .rec-ill { display: none; }
.tk-mpic .tk-avs { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); }
.tk-mpic .tk-av { width: 36px; height: 36px; font-size: .85rem; box-shadow: 0 0 0 3px #fff; }
.tk-match .primary { width: 100%; max-width: 320px; min-height: 52px; border-radius: 14px !important; margin-top: 8px; }
.tk-match .link { color: #8A2D4A; font-weight: 800; min-height: 44px; }
/* kis szöveges linkek koppintási felülete (ellenőrzés, 2026-10-17): a látvány marad, a felület ~44 px */
button.link[data-acc="rename"] { padding: 12px 8px !important; margin: -12px -8px; }

/* ---- ✨ „Neked való változat” előszűrés: hasonló, neked való receptek (foodphoto.js similarSheet) ---- */
.ad-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.ad-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 14px !important; border-radius: 14px !important; text-align: left; color: var(--text); }
.ad-row b { font-size: .92rem; } .ad-row small { font-size: .74rem; color: var(--muted); }
.ad-note { margin: 8px 0 0; }
.rf-stwait { margin: 6px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--bg); color: var(--muted); font-size: .88rem; line-height: 1.45; animation: rfWait 1.6s ease-in-out infinite; }
@keyframes rfWait { 50% { opacity: .55; } }

/* ---- 👪 Mindenki mást ehet (csalad-javaslat.html 1–4., family.js) ---- */
.pc-alt { position: absolute; right: -3px; bottom: -3px; z-index: 1; font-style: normal; font-size: .6rem; font-weight: 900; line-height: 15px; min-width: 16px; padding: 0 3px;
  border-radius: 10px; background: var(--card); color: #7C5CD6; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.pc-who { margin-top: 10px; padding: 8px 14px 12px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
.pc-who-l { margin: 4px 0 4px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pw-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pw-th { position: relative; width: 36px; height: 36px; flex: none; border-radius: 11px; overflow: hidden; display: grid; place-items: center; font-size: 1.1rem; }
.pw-th .rc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pw-t b { font-size: .9rem; line-height: 1.25; } .pw-t small { font-size: .72rem; color: var(--muted); }
.pw-pill { flex: none; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.pw-x { flex: none; width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--bg) !important; color: var(--muted); font-weight: 800; }
.pw-hint { margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--sun-soft); color: var(--text); font-size: .8rem; line-height: 1.35; }
.pw-add { width: 100%; margin-top: 10px; min-height: 44px; border: 2px dashed var(--line) !important; border-radius: 14px !important; background: transparent !important; color: var(--accent); font-size: .84rem; font-weight: 800; }
.pw-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.pw-sum b { color: var(--text); }
.pw-n { flex: none; display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border-radius: 6px; padding: 2px; }
.pw-n button { width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--card) !important; font-weight: 800; box-shadow: var(--card-shadow); }
.pw-n button:disabled { opacity: .4; }
.pw-n b { min-width: 38px; text-align: center; font-size: .82rem; }
.al-sheet .fp-row { flex-wrap: wrap; }
.al-sheet .rc-chip .tk-av { margin: -2px 2px -2px -4px; }
.al-sub { margin: -4px 0 4px; }
.al-seg { display: flex; gap: 3px; margin: 10px 0 4px; padding: 3px; border-radius: 14px; background: var(--line); }
.al-seg button { flex: 1; min-height: 40px; border: 0 !important; border-radius: 11px !important; background: transparent !important; font-size: .82rem; font-weight: 750; color: var(--muted); }
.al-seg button.on { background: var(--card) !important; color: var(--text); box-shadow: var(--card-shadow); }
.al-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.al-idea { display: flex; flex-direction: column; gap: 4px; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left; color: var(--text); }
.al-idea b { font-size: .74rem; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.al-ip { position: relative; height: 70px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; font-size: 1.7rem; }
.al-ip .rc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.al-idea.on .al-ip { box-shadow: inset 0 0 0 3px var(--btn); }
.al-tag { position: absolute; top: 4px; left: 4px; z-index: 1; max-width: calc(100% - 8px); font-size: .58rem; font-weight: 800; background: rgba(255, 255, 255, .94); color: var(--text); padding: 1px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-btns { display: flex; gap: 8px; margin-top: 12px; } .al-btns button { flex: 1; min-height: 46px; border-radius: 14px !important; font-weight: 800; }
.al-clear { display: block; margin: 10px auto 0; }
.sv-n { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 6px; }
.sv-n b { font: 800 1.6rem var(--font-head); min-width: 90px; text-align: center; }
.sv-n button { width: 52px; height: 52px; padding: 0 !important; border-radius: 50% !important; font-size: 1.5rem; font-weight: 800; }
.sv-n button:disabled { opacity: .4; }
.sv-hint { text-align: center; }
.ma-meal.ma-away { opacity: .7; }

/* ---- 🎁 Kívánságlista (csalad-javaslat.html, wishes.js) ---- */
.pc-ix.wish .pc-ix-p { box-shadow: inset 0 0 0 2.5px #7C5CD6; }
.pc-ix-wish { position: absolute; top: 6px; left: 6px; max-width: calc(100% - 12px); z-index: 1; font-size: .62rem; font-weight: 800; color: #5B3FC4; background: rgba(255, 255, 255, .94);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pc-idea.wish { box-shadow: inset 0 0 0 2px #7C5CD6, var(--card-shadow); }
.wi-sheet .fp-row { flex-wrap: wrap; }
.wi-sheet .rc-chip .tk-av { margin: -2px 2px -2px -4px; }
.wi-in { width: 100%; margin: 4px 0 2px; }
.wi-hint { margin: 2px 0 0; }
.wi-slots { margin-top: 6px; }
.wi-add { flex: none; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--card) !important; box-shadow: var(--card-shadow); font-size: 1.3rem; font-weight: 700; color: var(--text); }
.wi-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #EFEAFF, #FFE6F0); color: #2E2250; }
.wi-head > span { font-size: 1.5rem; } .wi-head b { display: block; font: 800 1rem var(--font-head); } .wi-head small { font-size: .74rem; color: #5B4A8A; }
:root[data-theme="dark"] .wi-head { background: linear-gradient(135deg, #2E2645, #43283A); color: var(--text); }
:root[data-theme="dark"] .wi-head small { color: var(--muted); }
.wi-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.wi-row.done { opacity: .6; box-shadow: none; background: transparent; border: 1.5px dashed var(--line); }
.wi-th { position: relative; width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; overflow: visible; }
.wi-th .rc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.wi-th i { position: absolute; right: -5px; bottom: -5px; z-index: 1; }
.wi-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left; color: var(--text); }
.wi-t b { font-size: .9rem; line-height: 1.25; } .wi-t small { font-size: .72rem; color: var(--muted); line-height: 1.35; }
.wi-acts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wi-go { min-height: 36px; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: var(--btn) !important; color: var(--btn-ink); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.wi-go.s { background: var(--bg) !important; color: var(--text); }
.wi-x { width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--bg) !important; color: var(--muted); font-weight: 800; }
.wi-lbl { margin-top: 6px !important; font-weight: 800; text-transform: uppercase; font-size: .7rem !important; letter-spacing: .05em; }
.wr-love { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; min-height: 52px; padding: 8px 12px !important; border: 0 !important; border-radius: 14px !important;
  background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; }
.wr-love > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wr-love b { font-size: .86rem; } .wr-love small { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-love i { font-style: normal; font-weight: 900; color: var(--muted); }
/* ✨ heti áttekintő sorai (2026-11-01): ikon · felirat · 7 pötty · szám, hajszálvonallal elválasztva */
.wr-rows { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.wr-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; }
.wr-row + .wr-row { border-top: 1px solid var(--line); }
.wr-row > .ic { width: 18px; height: 18px; flex: none; color: var(--muted); }
.wr-l { flex: 1; min-width: 0; font-size: var(--fs-body, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-row b { font: 800 .95rem var(--font-head); white-space: nowrap; min-width: 44px; text-align: right; }
.wr-dots { display: inline-flex; gap: 4px; flex: none; }
.wr-dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 28%, transparent); }
.wr-dots i.on { background: var(--green); }
.wr-dots i.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.tk-conf { position: absolute; inset: 0; pointer-events: none; }
.tk-conf i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: tkFall 2.6s linear infinite; }
@keyframes tkFall { to { transform: translateY(110vh) rotate(540deg); } }
.pc-dh.on, .pc-sl.on { background: var(--btn) !important; color: var(--btn-ink); }
.pc-dh.on small { color: inherit; opacity: .9; }
.pc-cell.in.e { box-shadow: inset 0 0 0 2px var(--brand); }
/* alsó fülsor (Andras, 2026-10-13: „vannak állapotok, ahol beleolvadnak a környezetükbe” — fehér kártyák fölött):
   vékony keret + kétrétegű árnyék + enyhe üveghatás (a mögötte görgő tartalom elmosódik), a kijelölt fül erősebb */
@media (max-width: 700px) {
  .tabs { background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border: 1px solid rgba(23, 19, 15, .08) !important; box-shadow: 0 2px 6px rgba(23, 19, 15, .10), 0 12px 32px rgba(23, 19, 15, .20); }
  :root[data-theme="dark"] .tabs { border-color: rgba(255, 255, 255, .10) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .65); }
  .tabs a.active { background: var(--brand-soft); color: var(--text); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35); }
  :root[data-theme="dark"] .tabs a.active { color: var(--accent); }
}

/* ===== 📱 app-érzet (2026-10-16, Andras: hosszan nyomva a képek és az emoji-ikonok kijelölődtek / másolhatók voltak, mint a szöveg) =====
   Az appban alapból nincs kijelölés és „másolás / kép mentése” menü; kivétel: beviteli mezők, és a recept szövege
   (hozzávalók, lépések, megjegyzés), hogy egy receptet ki lehessen másolni. Csak az app oldalán (body.app) — az admin / rendszer oldalakon marad. */
body.app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.app :is(img, svg) { -webkit-user-drag: none; -webkit-touch-callout: none; }
/* a díszítő képek (kártya, recept nagy képe, bélyegképek, ötletek) ne is fogadjanak érintést — így az iPhone kép-menüje
   („Share… / Save to Photos / Copy / Copy Subject”, Andras videója) nem jöhet elő; a koppintást a kártya / gomb kapja */
body.app :is(.rc-img, .rv-hero, .rec-hero, .ma-thumb, .pc-cell, .pc-big-img, .pc-ix-p, .ph-thumb, .wi-th, .tk-mpic, .pw-th, .al-ip) img { pointer-events: none; }
body.app :is(input, textarea, select, [contenteditable]),
body.app :is(.rv-ings, .rv-guide, .rv-note) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body.app :is(.rv-ings, .rv-guide) :is(img, svg, button, .alg, .ing-ok, .ing-miss) { -webkit-user-select: none; user-select: none; }

/* ===== 👤 Én oldal „B1” (2026-10-14, terv-en-javaslat.html): „rólad” kártya + csoportos lista, Értesítések és emlékeztetők ===== */
#en-body { display: flex; flex-direction: column; gap: 10px; }
.en2-prof { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, #FFE7C2, #FFF6EA); box-shadow: var(--card-shadow); }
:root[data-theme="dark"] .en2-prof { background: var(--accent-soft); }
.en2-prof:active { transform: scale(.985); }
.en2-av { width: 56px; height: 56px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; font: 800 1.35rem var(--font-head); flex: none; }
.en2-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.en2-pt b { font: 800 1.15rem var(--font-head); } .en2-pt small { font-size: .8rem; color: var(--muted); }
.en2-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.en2-chips span { font-size: .7rem; font-weight: 750; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .8); }
:root[data-theme="dark"] .en2-chips span { background: rgba(255, 255, 255, .1); }
.en2-chips .al { background: #FFE1DD; color: #B42318; }
.en2-go { font-weight: 900; color: var(--accent); font-size: 1.2rem; }
.en2-switch { margin: 0 4px; }
.en2-lbl { margin: 8px 6px -4px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.en2-grp { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.en2-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; background: none !important; color: var(--text); font: inherit; text-align: left; text-decoration: none; }
.en2-row:first-child { border-top: 0 !important; }
.en2-row:active { background: var(--line) !important; }
.en2-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex: none; background: var(--line); }
.en2-ic.bg-sky { background: var(--sky-soft); } .en2-ic.bg-green { background: var(--green-soft); } .en2-ic.bg-berry { background: var(--berry-soft); }
.en2-ic.bg-sun { background: var(--sun-soft); } .en2-ic.bg-acc { background: var(--accent-soft); }
.en2-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.en2-t b { font-size: .95rem; font-weight: 700; } .en2-t small { font-size: .78rem; color: var(--muted); }
.en2-ar { color: var(--muted); font-weight: 900; opacity: .6; }
.en2-right { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.en2-mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.en2-mini span { font-size: .7rem; font-weight: 750; padding: 1px 7px; border-radius: 6px; background: var(--green-soft); color: var(--green-ink); }
.en2-mini span.off { background: var(--line); color: var(--muted); }
.en2-bar { display: block; height: 6px; border-radius: 99px; background: var(--line); margin-top: 5px; overflow: hidden; }
.en2-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
/* Értesítések és emlékeztetők */
.en-sec:has(> .en2-dev) { display: flex; flex-direction: column; gap: 10px; }
.en-sec > [data-wtest] { align-self: flex-start; }
.en2-dev { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--sky-soft); }
.en2-dev-ic { font-size: 1.5rem; flex: none; }
.en2-dev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .en2-dev-t b { font-size: .95rem; } .en2-dev-t small { font-size: .78rem; color: var(--muted); }
.en2-rem { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.en2-rem-h { display: flex; align-items: center; gap: 12px; }
.en2-rem.off .en2-t { opacity: .55; }
.en2-rem-f { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.en2-gap { flex: 1; }
.en2-pill { min-height: 36px; padding: 0 12px !important; border-radius: 10px !important; border: 0 !important; background: var(--bg) !important; color: var(--text); font-size: .8rem; font-weight: 750; }
.en2-pill.acc { background: var(--accent-soft) !important; color: var(--accent); }

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

/* ===== 🧭 „Hogy használd?” súgó-mód (helpmode.js, 2026-10-17) ===== */
.hm-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.hm-mark { position: absolute; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font: 900 .72rem/1 Montserrat, Inter, sans-serif; font-style: normal;
  box-shadow: 0 0 0 2px var(--card), 0 2px 6px rgba(0, 0, 0, .18); }
.hm-layer.hm-first .hm-mark { animation: hmPop .25s ease-out backwards; } /* csak bekapcsoláskor — utána nem villog */
@keyframes hmPop { from { transform: scale(.3); opacity: 0; } }
.hm-bar { position: fixed; left: 12px; right: 12px; bottom: 96px; z-index: 45; display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--btn); color: var(--btn-ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: .8rem; line-height: 1.3; animation: hmDrop .3s ease-out; }
.hm-bar span { flex: 1; min-width: 0; }
.hm-bar .hm-off { flex: none; min-height: 44px; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; background: var(--brand) !important; color: #17130F !important; font-weight: 800; }
@keyframes hmDrop { from { transform: translateY(16px); opacity: 0; } }
:root[data-theme="dark"] .hm-bar .hm-off { background: #17130F !important; color: #fff !important; }.hm-tip { position: fixed; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 14px; border-radius: 18px; background: var(--card); color: var(--text);
  border: 2px solid var(--accent); box-shadow: 0 14px 36px rgba(0, 0, 0, .25); animation: hmPop .2s ease-out; }
.hm-tip .hm-t { display: block; font-family: Montserrat, Inter, sans-serif; font-size: .95rem; margin-bottom: 4px; }
.hm-tip p { margin: 0 0 10px; font-size: .86rem; line-height: 1.4; }
.hm-acts { display: flex; gap: 8px; justify-content: flex-end; }
.hm-acts button { min-height: 44px; padding: 0 14px !important; border-radius: 12px !important; font-weight: 800; }
.hm-try { background: var(--bg) !important; border: 1px solid var(--line) !important; color: var(--text); }
.hm-focus { outline: 3px solid var(--accent) !important; outline-offset: 2px; border-radius: 12px; }
body.help-on main, body.help-on #drawer { cursor: help; }

/* ===== 🖥 Széles képernyő (gép, tablet fekvő, ≥ 1000 px; 2026-10-17, Andras: „gépen csak egy keskeny oszlop”) =====
   Telefonon semmi nem változik: a hasáb-dobozok (`.ma-col`) ott „display: contents”, vagyis mintha ott sem lennének. */
.ma-col, .en2-cols, .en2-gw { display: contents; }
@media (min-width: 1000px) {
  /* „Ma”: fejléc középen, alatta két hasáb (balra kártyák + súly + ételek, jobbra teendők + 💚 + bevásárlás) */
  #ma-body, .md-ghost { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-items: start; }
  #ma-body > :not(.ma-col), .md-ghost > :not(.ma-col) { grid-column: 1 / -1; }
  #ma-body .md-strip, .md-ghost .md-strip { width: 100%; max-width: 620px; margin-inline: auto; }
  #ma-body .md-banner { width: 100%; max-width: 620px; margin-inline: auto; }
  #ma-body .ma-col, .md-ghost .ma-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  #ma-body .ma-col-b > .ma-sec:first-child { margin-top: 0; }
  #ma-body .ma-col-a > .ma-sec-row { margin-top: 8px; }
  /* ha nincs jobb hasáb (pl. jövőbeli nap teendő nélkül), a bal középre kerül */
  #ma-body:not(:has(.ma-col-b)) { grid-template-columns: minmax(0, 640px); justify-content: center; }

  /* „Én”: középre zárva; a „rólad” kártya alatt a csoportok két hasábban (újságszerűen, a csoport nem törik ketté) */
  #en-body { max-width: 1040px; margin-inline: auto; }
  #en-body .en2-cols { display: block; columns: 2; column-gap: 24px; }
  #en-body .en2-gw { display: flex; flex-direction: column; gap: 10px; break-inside: avoid; padding-bottom: 14px; }
  /* Én aloldalai: az értesítések kártyái két hasábban, a többi egy kényelmes szélességű oszlop középen */
  #en-body .en-sec:has(> .en2-dev) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  #en-body .en-sec:has(> .en2-dev) > :not(.en2-rem) { grid-column: 1 / -1; }
  #en-body:has(> .en-sec) { max-width: 860px; }
  #en-body:has(> .en-sec > :is(.en2-dev, .hh2)) { max-width: 1040px; }
  #en-body .hh2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  #en-body .hh2 > :is(.hh-face, .hh-logout, .hh-who, :last-child:nth-child(even)) { grid-column: 1 / -1; }

  /* 🥗 Étrend és adataim: középre zárva, teljes szélességű kártyák; az áttekintő sorai két hasábban */
  #profil { max-width: 1040px; margin-inline: auto; }
  #profil :is(.wz-entry, .pf-sum, .pf-more) { max-width: none; }
  #profil .profile-form { max-width: none; }
  #profil .pf-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  #profil .pf-sum > :not(.pf-row) { grid-column: 1 / -1; }

  /* Lista fül: a főoldal kártyái rácsban; a kategóriák (lista, Terv alapján, Vásárlások) újságszerű hasábokban —
     a rácsban egy hosszú kategória mellett nagy üres folt maradt */
  #shop-home .sh-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
  #shop-home .sh-card { height: 100%; }
  .shop-list { display: block; column-width: 420px; column-gap: 16px; }
  .shop-list > * { break-inside: avoid; margin: 0 0 14px; }
  .shop-list > :only-child { max-width: 760px; }

  /* Terv: a két feladat-buborék (saját · közös) egymás mellett */
  #plan-tasks:has(> .te2) { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #plan-tasks > .te2 + .te2 { margin-top: 0; padding-top: 0 !important; border-top: 0 !important; } /* egymás mellett nincs elválasztó vonal */
  #plan-tasks > :not(.te2) { grid-column: 1 / -1; }

  /* Előzmények (Terv alatt): mérföldkövek és súly egymás mellett, alattuk a hét rácsa teljes szélességben */
  .journal#journal-body { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .journal#journal-body > :last-child:nth-child(odd), .journal#journal-body > :only-child { grid-column: 1 / -1; }

  /* Főzés: az ételek két hasábban */
  #cook-list.cook-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #cook-list.cook-list > :not(.cook-sum) { grid-column: 1 / -1; }
}

/* ===== 🖥 Oldalsáv gépen és tableten (2026-10-17, Andras jóváhagyta — Design-vászon „Gépes és tabletes nézet — oldalsáv”) =====
   1000–1199 px (és tablet): keskeny, ikonos sáv (88 px) · ≥ 1200 px: teljes sáv (248 px) felirattal és a lenyitott alpontokkal (sidebar.js).
   Telefonon (≤ 700 px) az alsó fülsor marad; 701–999 px között a régi felső sáv. */
.side-sub, .side-me { display: none; }
@media (min-width: 1000px) {
  :root { --side-w: 88px; }
  body.app { padding-left: var(--side-w); }
  .top { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); z-index: 12; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
    gap: 6px; padding: 18px 8px 14px; border-bottom: 0; border-right: 1px solid var(--line); background: var(--card); overflow-y: auto; scrollbar-width: none; }
  .top h1 { margin: 0 0 12px; }
  .top h1 .home-link > span { display: none; }
  .top h1 .logo { width: 40px; height: 40px; border-radius: 10px; }
  .top h1 .wm { height: 24px; }
  .tabs { flex-direction: column; gap: 4px; overflow: visible; width: 100%; align-items: center; max-width: none; }
  .tabs a { width: 72px; min-height: 60px; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 16px; font-size: .72rem; color: var(--muted); }
  .tabs a .ti { font-size: 1.3rem; }
  .tabs a.active { background: var(--accent-soft); color: var(--text); font-weight: 800; }
  .help-btn, .fb-btn { margin: 0; width: 44px; min-width: 44px; min-height: 44px; padding: 0 !important; justify-content: center; }
  .help-btn { margin-top: auto; }
  .help-btn .fb-btn-t, .fb-btn .fb-btn-t { display: none; }
  .side-me { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 4px; border-radius: 14px; text-decoration: none; color: var(--text); }
  .side-av { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; font-weight: 800; }
  .side-mt { display: none; }
  /* a középre igazított lebegők a tartalom közepére (nem a sáv alá) */
  .status { left: calc(50% + var(--side-w) / 2); }
  .hm-bar { left: calc(var(--side-w) + 12px); }

  /* Terv: a kockarács balra, a kijelölt étel / nap / étkezés jobbra (oldalra görgetés nélkül) */
  #tervezes:not(.hist):not(.tasks) .plan-day { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 14px 22px; align-items: start; }
  .plan-day > * { grid-column: 1 / -1; }
  .plan-day > .pc-week { max-width: 560px; }
  .plan-day > .pc-grid { grid-column: 1; grid-template-columns: 84px repeat(7, minmax(0, 1fr)); gap: 8px; padding: 16px; border-radius: 24px; }
  .plan-day > .pc-detail { grid-column: 2; position: sticky; top: 16px; }
  .plan-day .pc-cell { border-radius: 14px !important; font-size: 1.5rem; aspect-ratio: 5 / 4; } /* alacsonyabb kockák: a rács és a panel egy képernyőre fér */
  .plan-day .pc-dh { font-size: .82rem; padding: 6px 0 !important; }
  .plan-day .pc-big-img { height: 180px; }
  .plan-day .pc-dh small { font-size: .7rem; }
  .plan-day .pc-sl { font-size: .82rem; }
  #tervezes:is(.hist, .tasks) .plan-day { max-width: none; }

  /* Receptek: a fejléc teljes szélességben — kereső és gombok egy sorban, alatta az étkezés-kapcsoló */
  .rc-top { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; }
  .rc-top > .rc-head { grid-row: 1; }
  .rc-top > .rc-srow { grid-column: 1; grid-row: 2; }
  .rc-top > .rc-bar { grid-column: 2; grid-row: 2; }
  .rc-top > :not(.rc-srow):not(.rc-bar) { grid-column: 1 / -1; }
  .rc-bar #rec-new { margin-left: 0; }

  /* Ma: a dátum balra, oldalcímként; a napváltó gombok mellette jobbra (a két szélén nem marad üres sáv) */
  #ma-body .md-strip, .md-ghost .md-strip { max-width: none; margin-inline: 0; }
  #ma-body .md-strip > .md-mid, .md-ghost .md-strip > .md-mid { order: 1; align-items: flex-start; text-align: left; }
  #ma-body .md-strip > .md-mid b, .md-ghost .md-strip > .md-mid b { font-size: 1.6rem; text-align: left; }
  #ma-body .md-strip > .md-ar, .md-ghost .md-strip > .md-ar { order: 2; align-self: center; margin-top: 0; }
  #ma-body .md-dots, .md-ghost .md-dots { display: none; }
  #ma-body .md-banner { max-width: none; margin-inline: 0; }

  /* Kívánságok, Közös kedvencek (.wz.tk): gépen nem felugró, keskeny „telefonos” réteg, hanem a tartalom helyére nyíló oldal az
     oldalsáv mellett — az oldalsáv kattintható marad (Andras, 2026-10-17: „menüpontokat egymás után nem lehet nyomni”; másik
     menüpontra kattintva a sidebar.js bezárja). A kérdőív (.wz, nem .tk) marad középre zárt ablak. */
  .wz.tk { left: var(--side-w); right: 0; max-width: none; margin: 0; box-shadow: none; animation: fadeInWz .25s ease both; }
  .wz.tk > .wz-top, .wz.tk > .wz-body { width: 100%; max-width: 1180px; margin-inline: auto; padding-left: 40px; padding-right: 40px; }
  .wz.tk > .wz-top { padding-top: 28px; }
  .wz.tk .tk-ttl b { font-size: 1.6rem; }
  /* a Kívánságok listája és az ízlés-kör paklija kényelmes, középre zárt szélességben */
  .wz.tk.wi-page > .wz-top, .wz.tk.wi-page > .wz-body { max-width: 860px; }
  .wz.tk:has(.tk-deck) > * { width: 100%; max-width: 620px; margin-inline: auto; }
}
@keyframes fadeInWz { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1200px) {
  :root { --side-w: 248px; }
  .top { align-items: stretch; padding: 22px 16px 16px; }
  .top h1 { margin: 0 0 18px; padding: 0 6px; }
  .top h1 .home-link > span { display: inline; font-size: 1.35rem; }
  .top h1 .logo { width: 36px; height: 36px; border-radius: 9px; }
  .top h1 .wm { height: 38px; }
  .tabs { align-items: stretch; }
  .tabs a { width: auto; min-height: 50px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 10px; border-radius: 16px; font-size: .98rem; color: var(--text); font-weight: 600; }
  .tabs a .ti { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; }
  .tabs a:hover { background: var(--bg); }
  .tabs a.active { background: var(--accent-soft); }
  .tabs a.active .ti { background: var(--brand); }
  .tabs a.active .ti .ic { color: #17130F; width: 20px; height: 20px; }
  /* lenyitott főpont: a főpont és az alpontjai egy közös panel; vezetővonal + pöttyök; az aktív alpont fehér kártya narancs csíkkal */
  .tabs a.active:has(+ .side-sub) { border-radius: 16px 16px 0 0; }
  .tabs a.active:has(+ .side-sub)::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); }
  .side-sub { display: flex; flex-direction: column; gap: 3px; margin: -4px 0 4px; padding: 2px 6px 10px 40px; background: var(--accent-soft); border-radius: 0 0 16px 16px; position: relative; }
  .side-sub::before { content: ''; position: absolute; left: 26px; top: 4px; bottom: 14px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
  .ss-it { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 10px 0 12px !important; border: 0 !important; border-radius: 11px !important;
    background: none !important; color: var(--body, #4A4038); font-weight: 600; font-size: .9rem; text-align: left; box-shadow: none; }
  :root[data-theme="dark"] .ss-it { color: var(--text); }
  .ss-it::before { content: ''; position: absolute; left: -17px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 35%, transparent); }
  .ss-it:hover { background: color-mix(in srgb, var(--card) 70%, transparent) !important; }
  .ss-it.on { background: var(--card) !important; color: var(--text); font-weight: 700; box-shadow: 0 3px 10px rgba(180, 83, 9, .10), inset 3px 0 0 var(--brand); }
  .ss-it.on::before { left: -19px; width: 10px; height: 10px; margin-top: -5px; background: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); }
  .ss-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--btn); color: var(--btn-ink); font: 800 .7rem/22px var(--font, inherit); font-style: normal; text-align: center; }
  .ss-new { color: var(--accent) !important; }
  .ss-new::before { display: none; }
  .ss-sep { height: 1px; margin: 4px 10px 4px 0; background: color-mix(in srgb, var(--accent) 18%, transparent); }
  .help-btn, .fb-btn { width: 100%; justify-content: flex-start; gap: 12px; padding: 0 14px !important; border-radius: 14px !important; }
  .help-btn .fb-btn-t, .fb-btn .fb-btn-t { display: inline; }
  .side-me { padding: 10px; background: var(--bg); }
  .side-mt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .side-mt b { font-size: .92rem; } .side-mt small { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* a Terv fejlécének Kívánságok / Előzmények / Feladataim ikonja az oldalsávban van (a ⋯ menü marad) */
  .pc-head .pc-ic:is([data-act="wishes"], [data-act="hist"], [data-act="tasks"]) { display: none; }
  /* (a teljes képernyős oldalak szabályai a ≥ 1000 px-es részben — „Kívánságok, Közös kedvencek” ) */
  /* gépen a listák az oldalsávban — a „‹ Listák” vissza-gomb fölösleges */
  #shop-sub-head #shop-back { display: none; }
}

/* ===== 👆 App-héj érintőképernyőn (2026-10-18, scroll.js — gorgetes-teszt.html „B”): nem az egész oldal görög, hanem a <main>;
   a fejléc és a fülsor a görgetőn kívül van, így iPhone-on görgetés közben is elsőre reagálnak (natív app módjára).
   A belépőképernyő (body.login-mode) kimarad. ===== */
html.shell:not(:has(body.login-mode)), html.shell body:not(.login-mode) { height: 100%; overflow: hidden; }
html.shell body:not(.login-mode) { display: flex; flex-direction: column; }
html.shell body:not(.login-mode) > header.top { flex: none; }
html.shell body:not(.login-mode) > main { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
/* a ragadós elemek a görgető (main) belső margóján BELÜL ragadnak (Andras visszajelzése, 2026-10-18: a „Mehet a listára” a képernyő
   közepén lebegett) — a margót levonjuk, hogy ugyanott üljenek, mint az app-héj előtt: a sáv a fülsor fölött, a mező a fejléc alatt */
@media (max-width: 700px) {
  html.shell body:not(.login-mode) > main .shop-actions { bottom: -16px; } /* = 80 px + safe-area a képernyő aljától (a main alsó margója 96 px + safe-area) */
  html.shell body:not(.login-mode) > main #shop-list-view .li-add-wrap { top: -6px; } /* = 6 px a fejléc alatt (a main felső margója 12 px) */
}

/* ===== 👪 „Közösen” (2026-10-18, haztartas-javaslat.html — hub.js): a tagok körei a felső sávban → a háztartás oldala ===== */
.hh-pill { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 6px !important;
  border: 0 !important; border-radius: 10px !important; background: var(--card) !important; color: var(--text) !important; box-shadow: var(--card-shadow); }
.hh-pill[hidden] { display: none; }
.hh-pill:not([hidden]) ~ .help-btn { margin-left: 0; }
.hh-pill .tk-av { width: 26px; height: 26px; font-size: .66rem; }
.hb-avs .tk-av + .tk-av { margin-left: -9px; }
.tk-av.hb-add { background: var(--card); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft), 0 0 0 2px var(--card); font-size: .85rem; }
.hb-t { display: none; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; text-align: left; }
.hb-t b { font-size: .92rem; } .hb-t small { font-size: .74rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hb-n { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #2A7FC0; color: #fff;
  font: 800 .64rem/19px var(--font, inherit); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
@media (min-width: 1000px) {
  .hh-pill { margin: 10px 0 0 !important; padding: 8px !important; border-radius: 16px !important; background: var(--bg) !important; box-shadow: none; flex-direction: column; gap: 4px; }
  .hh-pill .hb-avs { flex-wrap: wrap; justify-content: center; max-width: 64px; }
}
@media (min-width: 1200px) {
  .hh-pill { flex-direction: row; justify-content: flex-start; gap: 10px; width: 100%; padding: 10px 12px !important; }
  .hh-pill .hb-avs { flex-wrap: nowrap; max-width: none; }
  .hb-t { display: flex; flex: 1; }
  .hb-n { position: static; box-shadow: none; }
}
/* az oldal */
.hub-body { display: flex; flex-direction: column; gap: 12px; }
.hub-face { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 14px 16px; }
.hub-face h3 { margin: 8px 0 0; font-size: 1.2rem; }
.hub-avs .tk-av.lg { width: 50px; height: 50px; font-size: 1.1rem; box-shadow: 0 0 0 3px var(--card); }
.hub-avs .tk-av.lg + .tk-av.lg { margin-left: -12px; }
.hub-inv { margin-top: 10px; min-height: 44px; padding: 0 20px !important; border-radius: 10px !important; }
.hub-inv.wide { width: 100%; border-radius: 16px !important; }
.hub-sec { display: flex; flex-direction: column; padding-bottom: 6px; }
.hub-ev { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none; text-align: left; color: var(--text); font-weight: 400; min-height: 44px; position: relative; }
.hub-ev:last-child { border-bottom: 0 !important; }
.hub-ev .tk-av { margin-top: 1px; }
.hub-ev.new::before { content: ''; position: absolute; left: -9px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: #2A7FC0; }
.hub-tx { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.35; }
.hub-tx small { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.hub-t { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.hub-none { margin: 6px 0 8px; }
.hub-tonight { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--text); font-weight: 400; border: 0 !important; }
.hub-th { position: relative; width: 56px; height: 56px; flex: none; border-radius: 14px; overflow: hidden; display: grid; place-items: center; font-size: 1.6rem; pointer-events: none; }
.hub-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-tonight .hub-tx b { display: block; font-size: 1rem; }
.hub-tonight .hub-tx small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hub-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 86px; padding: 12px !important; border: 0 !important; border-radius: 18px !important;
  background: var(--card) !important; box-shadow: var(--card-shadow); color: var(--text); text-align: left; font-weight: 400; }
.hub-tile i { font-style: normal; font-size: 1.3rem; }
.hub-tile b { font-size: .92rem; } .hub-tile small { font-size: .78rem; color: var(--muted); }
.hub-tile em { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #2A7FC0; color: #fff; font: 800 .66rem/20px var(--font, inherit); font-style: normal; text-align: center; }
.hub-set { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; min-height: 52px; border: 0 !important; color: var(--text); font-weight: 700; text-align: left; }
.hub-set span { flex: 1; } .hub-set i { font-style: normal; color: var(--muted); font-weight: 900; }
.hub-alone { text-align: center; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hub-ill { font-size: 3rem; line-height: 1; }
.hub-alone h3 { margin: 6px 0 0; font-size: 1.2rem; }
.hub-ben { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; }
.hub-ben li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.35; }
.hub-ben i { font-style: normal; }
.wz.tk.hub-page > .wz-top, .wz.tk.hub-page > .wz-body { max-width: 720px; }

/* ===== 🛠 Admin mód (2026-10-20, adminmode.js — admin-mod-javaslat.html): sötét „Admin mód” sáv, fülek, kártyák ===== */
.adm-page { --adm: #2B2F3A; --amblue: #2A7FC0; }
/* ↻ frissítés-kérés eredménye a gomb alatt (2026-10-31) */
.am-res { margin: 8px 2px 0; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-small); line-height: 1.4; background: color-mix(in srgb, var(--green) 12%, var(--card)); color: var(--text); }
.am-res.warn { background: color-mix(in srgb, var(--warn) 10%, var(--card)); }
button.am-sent { opacity: 1 !important; background: color-mix(in srgb, var(--green) 16%, var(--card)) !important; color: var(--text) !important; }
.adm-page > .wz-top, .adm-page > .wz-body { max-width: 720px; }
.am-bar { flex: none; width: 100%; display: flex; align-items: center; gap: 10px; background: var(--adm); color: #fff;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 16px; box-sizing: border-box; }
.am-bar b { font-family: var(--head, inherit); font-size: 1rem; }
.am-pill { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.14); }
.am-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0 !important; background: rgba(255,255,255,.12) !important; color: #fff !important; font-size: 1.05rem; padding: 0 !important; }
.am-top { padding-top: 10px !important; }
.am-seg { display: flex; gap: 4px; background: var(--card); border-radius: 14px; padding: 4px; box-shadow: var(--card-shadow); width: 100%; }
.am-seg button { flex: 1; min-height: 40px; border: 0 !important; background: none !important; box-shadow: none; padding: 0 2px !important; border-radius: 10px !important;
  font-size: .82rem; font-weight: 800; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) { .am-seg button { font-size: .7rem; letter-spacing: -.01em; } } /* 5 fül (2026-11-01: + Funkciók) telefonon is kiférjen */
.am-seg button.on { background: var(--adm) !important; color: #fff; }
.am-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 40px; }
.am-body > *, .am-user > * { margin: 0; }
.am-lbl { margin: 4px 0 6px !important; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.am-lbl span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.am-sub { font-size: .8rem; color: var(--muted); margin: 0; }
.am-ok { text-align: center; color: var(--muted); padding: 14px; margin: 0; }
.am-card { display: block; width: 100%; box-sizing: border-box; background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 12px 14px; text-align: left; color: var(--text); border: 0; }
button.am-card { font: inherit; cursor: pointer; }
.am-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.am-kpi { display: block; text-align: left; background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 12px 14px; border: 0 !important; color: var(--text); font: inherit; }
.am-kpi b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.am-kpi span { font-size: .78rem; color: var(--muted); font-weight: 700; }
.am-kpi.warn b { color: var(--warn); }
.am-alert { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px !important; border-radius: 14px !important; border: 0 !important; background: var(--card) !important;
  box-shadow: var(--card-shadow); font: inherit; font-size: .88rem; line-height: 1.35; text-align: left; color: var(--text); }
.am-alert i { font-style: normal; } .am-alert > span { flex: 1; min-width: 0; }
.am-alert small { display: block; color: var(--muted); font-size: .76rem; }
.am-alert em { font-style: normal; font-weight: 900; color: var(--muted); }
.am-alert.red { box-shadow: inset 3px 0 0 var(--warn), var(--card-shadow); }
.am-alert.blue { box-shadow: inset 3px 0 0 var(--amblue), var(--card-shadow); }
.am-alert.sun { box-shadow: inset 3px 0 0 var(--brand), var(--card-shadow); }
.am-spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-bottom: 6px; }
.am-spark i { flex: 1; background: #FCD38D; border-radius: 3px 3px 0 0; } .am-spark i.t { background: var(--brand); }
.am-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 800 .74rem var(--font, inherit); border: 2px solid var(--card); flex: none; position: relative; box-sizing: border-box; }
.am-av.lg { width: 40px; height: 40px; font-size: .92rem; } .am-av.xl { width: 60px; height: 60px; font-size: 1.3rem; border-width: 3px; }
.am-av i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--card); background: #C9C0B6; }
.am-av i.on { background: var(--green); }
.am-avs { display: inline-flex; flex: none; } .am-avs .am-av + .am-av { margin-left: -10px; }
.am-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-t b { font-size: .95rem; } .am-t small { font-size: .78rem; color: var(--muted); }
.am-hh { display: flex; flex-direction: column; gap: 8px; }
.am-hh.alone { opacity: .88; }
.am-hh-top, .am-mem, .am-sig-h, .am-inv { display: flex; align-items: center; gap: 10px; }
.am-hh-top em, .am-mem em { font-style: normal; font-weight: 900; color: var(--muted); }
.am-mem { width: 100%; padding: 8px 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none; font: inherit; text-align: left; color: var(--text); }
.am-lbl + .am-mem { border-top: 0 !important; }
.am-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.am-mini span { font-size: .76rem; font-weight: 700; background: var(--bg); padding: 4px 9px; border-radius: 6px; }
.am-mini .muted { background: none; padding-left: 0; color: var(--muted); }
.am-wk { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.am-wk small { font-size: .76rem; color: var(--muted); }
.am-week { display: flex; gap: 3px; } .am-week i { width: 14px; height: 8px; border-radius: 3px; background: var(--line); }
.am-week i.h { background: #FCD38D; } .am-week i.f { background: var(--brand); }
.am-days { display: flex; gap: 2px; margin-top: 3px; } .am-days i { width: 9px; height: 9px; border-radius: 3px; background: var(--line); } .am-days i.on { background: var(--green); }
.am-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.am-lbl + .am-r { border-top: 0; }
/* 📊 Funkciók fül (2026-11-01): soronként név · arány-csík · % · 7 napos darab + trend; alatta a „ki mit használ” rács */
.am-fhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.am-fsort { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--bg); }
.am-fsort button { min-height: 30px; padding: 0 10px !important; border: 0 !important; border-radius: 10px !important; background: none !important; font-size: .74rem; font-weight: 700; color: var(--muted); box-shadow: none; }
.am-fsort button.on { background: var(--card) !important; color: var(--text); box-shadow: 0 1px 3px rgba(23, 19, 15, .1); }
.am-fr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(40px, 1fr) 46px 64px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.am-fhead + .am-fr { border-top: 0; }
@media (max-width: 440px) { /* telefonon a funkció neve külön sorban, alatta a csík és a számok */
  .am-fr { grid-template-columns: minmax(0, 1fr) 46px 64px; row-gap: 4px; }
  .am-fl { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; }
}
.am-fl { display: flex; flex-direction: column; min-width: 0; }
.am-fl b { font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-fl small, .am-fn small { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.am-fbar { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.am-fbar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.am-fn { display: flex; flex-direction: column; align-items: flex-end; }
.am-fn b { font: 800 .9rem var(--font-head); }
.am-tr { font-style: normal; font-weight: 800; color: var(--muted); }
.am-tr.up { color: var(--green-ink, #1F7A4D); } .am-tr.down { color: var(--warn); } /* (2026-11-02, átnézés: a világos zöld nyíl 3,2:1 volt) */
.am-mx { display: grid; grid-template-columns: minmax(84px, 1.4fr) repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: center; overflow-x: auto; }
.am-mxh { font-size: .6rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; padding: 4px 0; }
.am-mxn { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 0 !important; border: 0 !important; background: none !important; box-shadow: none; font: inherit; font-size: .8rem; color: var(--text); text-align: left; }
.am-mxn span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-mxn .am-av { width: 22px; height: 22px; font-size: .7rem; flex: none; }
.am-mxc { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--bg); font-size: .68rem; font-weight: 800; color: var(--text); }
.am-mxc.l1 { background: #FDE7C2; color: #7A4A06; } .am-mxc.l2 { background: #F9C46B; color: #17130F; } .am-mxc.l3 { background: var(--brand); color: #17130F; }
/* 📈 görbe (Funkciók fül): választható funkciók, egy tengely, halvány rács, mozgatva függőleges vonal + értékek */
.am-chctl { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
.am-chleg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; font-size: .76rem; font-weight: 700; color: var(--text); }
.am-chleg span, .am-chtip span { display: inline-flex; align-items: center; gap: 5px; }
.am-chleg i, .am-chtip i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.am-chbox { position: relative; touch-action: pan-y; }
.am-ch { display: block; width: 100%; height: auto; overflow: visible; }
.am-chg { stroke: var(--line); stroke-width: 1; }
.am-cht { font-size: 9px; fill: var(--muted); font-family: var(--font); }
.am-chx { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.am-chd { stroke: var(--card); stroke-width: 2; }
.am-chtip { position: absolute; top: -6px; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: var(--card);
  box-shadow: 0 4px 16px rgba(23, 19, 15, .16), inset 0 0 0 1px var(--line); font-size: .74rem; color: var(--text); pointer-events: none; white-space: nowrap; transform: translateY(-100%); }
.am-chpick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.am-chpick button { min-height: 32px; padding: 0 11px !important; border-radius: 10px !important; border: 0 !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line);
  font-size: .74rem; font-weight: 700; color: var(--muted); }
.am-chpick button.on { color: var(--text); box-shadow: inset 0 0 0 2px var(--c, var(--brand)); background: var(--card) !important; }
/* sötét módban a halvány cellán is legyen olvasható a szám (Andras képe, 2026-11-01) */
:root[data-theme="dark"] .am-mxc.l1 { background: rgba(var(--brand-rgb), .28); color: var(--cf-hi2); }
:root[data-theme="dark"] .am-mxc.l2 { background: rgba(var(--brand-rgb), .6); color: #17130F; }
.am-r > b { text-align: right; font-size: .86rem; }
.am-cut { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.am-cut small { display: block; color: var(--muted); font-size: .74rem; }
.adm-page .warn, .am-user .warn { color: var(--warn); } .adm-page .ok, .am-user .ok { color: var(--green-ink); }
.am-pg { display: flex; align-items: center; gap: 10px; }
.am-pg h2 { margin: 0; font-size: 1.3rem; }
.am-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.am-btns > button { flex: 1; min-height: 44px; }
.am-btns .danger { color: var(--warn) !important; }
.am-link { display: block; width: 100%; text-align: center; padding: 12px; color: var(--accent); font-weight: 700; text-decoration: none; }
.am-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.am-chips button { flex: none; min-height: 36px; padding: 0 12px !important; border-radius: 10px !important; font-size: .82rem; font-weight: 700; }
.am-chips button.on { background: var(--adm) !important; color: #fff !important; border-color: var(--adm) !important; }
.am-sig { display: flex; flex-direction: column; gap: 8px; }
.am-sig.chk { box-shadow: inset 3px 0 0 var(--amblue), var(--card-shadow); }
.am-sig.err { box-shadow: inset 3px 0 0 var(--warn), var(--card-shadow); }
.am-sig code { font-size: .78rem; white-space: pre-wrap; word-break: break-word; background: var(--bg); padding: 6px 8px; border-radius: 8px; }
.am-txt { margin: 0; font-size: .92rem; line-height: 1.4; white-space: pre-wrap; }
.am-note { margin: 0; font-size: .84rem; background: color-mix(in srgb, var(--amblue) 10%, transparent); padding: 8px 10px; border-radius: 10px; }
.am-img img { max-width: 100%; max-height: 220px; border-radius: 10px; display: block; }
.am-st { flex: none; font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.am-st.ellenorizendo { background: color-mix(in srgb, var(--amblue) 14%, transparent); color: var(--amblue); }
.am-st.uj { background: var(--accent-soft); color: var(--accent); }
.am-st.kesz { background: var(--green-soft); color: var(--green-ink); }
.am-st.felirva { background: color-mix(in srgb, #7C5CD6 14%, transparent); color: #7C5CD6; }
.am-st.err { background: var(--warn-soft); color: var(--warn); }
.am-inv { padding: 8px 0; border-top: 1px solid var(--line); }
.am-lbl + .am-inv { border-top: 0; }
.am-inv button { flex: none; min-height: 40px; padding: 0 12px !important; }
.am-user { --amblue: #2A7FC0; display: flex; flex-direction: column; gap: 10px; background: var(--bg) !important; }
.am-uh { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.am-uh h3 { margin: 6px 0 0; font-size: 1.2rem; }
.am-uh small { font-size: .8rem; color: var(--muted); }
.am-user input[type=range] { width: 100%; margin: 8px 0 4px; accent-color: var(--accent); }
.am-meter { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.am-meter i { display: block; height: 100%; background: var(--accent); }
.am-priv { border: 2px dashed #E6D7C3; border-radius: 16px; padding: 10px 12px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.am-priv b { color: var(--text); }
:root[data-theme="dark"] .am-priv { border-color: var(--line); }

/* ✨ Ma — „prémium” (2026-10-26, premium-javaslat.html 2. változat): napsárga borító hét-sávval, „Most” kártya, három kis szám,
   a nap menetrendje külön kerek pipával, összecsukott sorok. A régi két kártya, a ‹ › fejléc és az egész napos húzás megszűnt. */
#ma-body { touch-action: auto; will-change: auto; }
.mc-cover { background: var(--sun-soft); border-radius: 26px; padding: 14px 14px 12px; }
.mc-hi { margin: 0 4px; font-size: .82rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-date { display: flex !important; align-items: center; gap: 8px; width: 100%; border: 0 !important; background: none !important; padding: 0 4px !important; min-height: 0; text-align: left; color: var(--text); }
.mc-date h2 { margin: 2px 0 0; font: 800 1.6rem/1.15 var(--font-head); letter-spacing: -.01em; }
.mc-date .mc-cal { width: 20px; height: 20px; color: var(--muted); margin-top: 4px; }
.mw-week { display: flex; gap: 4px; margin-top: 12px; touch-action: pan-y; }
.mw-d { flex: 1; min-width: 0; display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px !important; min-height: 0;
  border: 0 !important; border-radius: 14px !important; background: transparent !important; color: var(--muted); font-weight: 700; transition: background .2s, box-shadow .2s; }
.mw-d small { font-size: .62rem; font-weight: 700; }
.mw-d b { font: 800 1rem/1.1 var(--font-head); color: var(--text); }
.mw-d i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text) 16%, transparent); }
.mw-d i.full { background: var(--green); } .mw-d i.half { background: var(--sun, #F5B82E); }
.mw-d.sel { background: var(--card) !important; box-shadow: inset 0 0 0 1.5px var(--text); }
.mw-d.today { background: var(--btn) !important; color: color-mix(in srgb, var(--btn-ink) 75%, transparent); box-shadow: none; }
.mw-d.today b { color: var(--btn-ink); } .mw-d.today i:not(.full):not(.half) { background: var(--brand); }
.mw-d:disabled { opacity: .35; }
.mc-banner { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: .8rem; color: var(--muted); }
.mc-banner .ic { width: 18px; height: 18px; }
.mc-banner span { flex: 1; min-width: 0; }
.mc-banner button { flex: none; min-height: 34px; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: var(--accent-soft) !important; color: var(--accent); font-weight: 800; font-size: .78rem; }
#ma-body.mc-in > :not(.mc-cover) { animation: mcIn .26s var(--ease-out, ease) both; }
@keyframes mcIn { from { opacity: 0; transform: translateY(6px); } }
/* napváltáskor csak a ténylegesen megváltozott elem tűnik át (today.js fadeChanged) */
#ma-body .mc-chg { animation: mcFade .24s var(--ease-out, ease) both; }
@keyframes mcFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #ma-body .mc-chg { animation: none; } }
/* „Most” kártya */
/* 🧭 „Beállítás 2 percben” a Ma tetején, amíg a kérdőív nincs kész (2026-10-31) */
.ma-wz { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin-bottom: 12px; padding: 14px 16px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1.5px var(--brand); }
.ma-wz-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ma-wz-ic .ic { width: 22px; height: 22px; }
.ma-wz-t b { display: block; font-size: var(--fs-sub); }
.ma-wz-t span { display: block; color: var(--muted); font-size: var(--fs-small); line-height: 1.35; margin-top: 2px; }
.ma-wz-b { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.ma-wz-b .primary { flex: 1; min-height: 44px; }
.en-set .en-hint { display: block; margin-top: 2px; font-weight: 400; line-height: 1.35; }
.en2-wz { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 4px; padding: 12px 16px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--brand); text-align: left; color: var(--ink); cursor: pointer; }
.en2-wz > .ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.en2-wz span { flex: 1; min-width: 0; }
.en2-wz b { display: block; }
.en2-wz small { display: block; color: var(--muted); font-size: var(--fs-small); }
.en2-wz i { font-style: normal; color: var(--muted); font-size: 1.3rem; }
.mn-card { border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); overflow: hidden; }
.mn-k { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.mn-k .ic { width: 15px; height: 15px; }
.mn-t { display: block; font: 800 1.12rem/1.2 var(--font-head); margin: 3px 0 2px; }
.mn-s { display: block; font-size: .8rem; color: var(--muted); }
.mn-acts { display: flex; gap: 8px; margin-top: 12px; }
.mn-acts > * { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 14px !important; font-weight: 800; text-decoration: none; }
.mn-acts .ic { width: 19px; height: 19px; }
.mn-eat { border: 0 !important; background: var(--card) !important; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--text); }
.mn-a.primary { background: var(--btn); color: var(--btn-ink); }
.mn-meal .mn-img { position: relative; display: block !important; width: 100%; height: 132px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: hidden; }
.mn-img .mn-emo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; }
.mn-img .rc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mn-img .mn-when { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.92); color: #17130F; font-size: .7rem; font-weight: 800; }
.mn-bd { padding: 12px 14px 14px; }
.mn-bd .alg-row { margin-top: 6px; }
.mn-self, .mn-w, .mn-empty, .mn-done { padding: 14px; }
.mn-self textarea { width: 100%; margin-top: 8px; min-height: 64px; resize: none; }
.mn-w .ma-wt { margin-top: 8px; box-shadow: none; background: var(--bg); }
.mn-w .ma-wt-ic { display: none; } /* (a „Reggeli mérés” címke már jelzi) */
.mn-done { text-align: center; }
.mn-done .mn-big { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 2.4; margin: 2px auto 4px; display: block; }
.mn-done .mn-acts { justify-content: center; } .mn-done .mn-acts > * { flex: 0 1 180px; }
.mn-tom { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.mn-tom .ic { width: 16px; height: 16px; flex: none; }
.mn-tom span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* három kis szám */
.mc-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mc-chips:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 🙈 kcal nélkül két szám */
.mc-chip { display: flex !important; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; min-height: 58px; padding: 9px 11px !important; text-align: left;
  border: 0 !important; border-radius: 16px !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.mc-chip b { display: flex; align-items: center; gap: 4px; font: 800 1rem/1.15 var(--font-head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-chip .mc-of { font: 600 .74rem var(--font, inherit); color: var(--muted); }
.mc-chip small { font-size: .66rem; color: var(--muted); line-height: 1.25; }
.mc-chip .ma-rg-ic { display: inline-flex; color: var(--sky, #3BA7E0); } .mc-chip .ma-rg-ic .ic { width: 15px; height: 15px; }
.mc-chip.full { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 8%, var(--card)) !important; }
/* a nap menetrendje */
.ma-lbl { display: flex; align-items: center; margin: 10px 4px -2px; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ma-lbl-a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--accent); text-decoration: none; min-height: 32px; }
.ma-lbl-a .ic { width: 17px; height: 17px; }
.ma-day { border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); padding: 2px 14px; }
.ma-tl { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: none !important; text-align: left; color: var(--text); cursor: pointer; }
.ma-tl:last-child { border-bottom: 0 !important; }
.ma-tl time { flex: none; width: 40px; font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ma-tl.next time { color: var(--accent); }
.tl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-t b { font-size: .92rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-t small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-t .alg-row { margin-top: 3px; } .tl-t .fit-hint { align-self: flex-start; }
.ma-tl.done .tl-t b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ma-tl.empty .tl-t b { color: var(--accent); }
.ma-tl.away { opacity: .6; }
.tl-ck { flex: none; position: relative; width: 44px; height: 44px; display: grid; place-items: center; margin-right: -8px; cursor: pointer; }
.tl-ck input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tl-ck span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); color: transparent; transition: background .15s, box-shadow .15s; pointer-events: none; }
.tl-ck span .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.tl-ck input:checked + span { background: var(--green); box-shadow: none; color: #fff; }
.tl-ck input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* összecsukott sorok */
.ma-more { display: flex !important; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 0 14px !important; border: 0 !important; border-radius: 18px !important;
  background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; text-decoration: none; font-weight: 700; font-size: .9rem; }
.ma-more > .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.ma-more .mm-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-more em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
.ma-more .mm-ch { color: color-mix(in srgb, var(--muted) 60%, transparent); font-size: 1.2rem; line-height: 1; transition: transform .2s; }
.ma-more.open .mm-ch { transform: rotate(90deg); }
.ma-more.open { border-radius: 18px 18px 6px 6px !important; }
.ma-remind2 .mm-t { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { #ma-body.mc-in > :not(.mc-cover) { animation: none; } }
/* ✨ tipográfiai csempe (recipes.js tileFace, 2026-10-26): kép nélkül a recept neve nagy betűvel a kategória színén + az étkezés
   vonalas ikonja a sarokban; kicsiben csak az ikon. A szülő (rc-img, pc-big-img, pc-ix-p, mn-img…) adja a háttérszínt. */
.tf { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 10px 11px; text-align: left; pointer-events: none; }
.tf b { font: 800 1rem/1.08 var(--font-head); letter-spacing: -.01em; color: var(--text); max-width: calc(100% - 26px);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.tf .ic { align-self: flex-end; width: 22px; height: 22px; color: color-mix(in srgb, var(--text) 42%, transparent); }
.tf-sm { position: static; inset: auto; padding: 0; justify-content: center; align-items: center; width: 100%; height: 100%; }
.tf-sm .ic { align-self: center; width: 46%; height: 46%; min-width: 16px; min-height: 16px; max-width: 64px; max-height: 64px; }
.rc-img .tf { padding: 10px 10px 30px; } /* (alul az étkezés-címke) */
/* (ahol a csempén ott a név, alatta nem ismételjük — a receptkártyán 2026-10-31 óta nincs név a csempén) */
.pc-big:has(.pc-big-img > .tf:not(.tf-sm):not(.tf-q)) .pc-big-n, .mn-meal:has(.mn-img > .tf:not(.tf-sm):not(.tf-q)) .mn-t { display: none; }
/* ✍️ recept nélküli étel (2026-10-28): az ikonja középen — kicsiben (ma-thumb, opt-pic, rács) és nagyban */
.tf.tf-q { justify-content: center; align-items: center; padding: 0; font-size: 3rem; line-height: 1; }
.tf.tf-q.tf-sm { font-size: 1.45rem; }
.pc-cell .tf.tf-q { font-size: 1.05rem; }
.rc-img .tf b { font-size: 1.02rem; }
.pc-ix-p .tf { padding: 8px; } .pc-ix-p .tf b { font-size: .8rem; -webkit-line-clamp: 4; } .pc-ix-p .tf .ic { width: 16px; height: 16px; }
.pc-big-img .tf { padding: 14px 14px 40px; } .pc-big-img .tf b { font-size: 1.35rem; }
.mn-img .tf { padding: 14px 14px 44px; } .mn-img .tf b { font-size: 1.4rem; max-width: 80%; }
.mn-img .tf .ic { position: absolute; right: 14px; bottom: 12px; width: 26px; height: 26px; }
.pc-big-img .tf .ic { position: absolute; right: 14px; bottom: 12px; }
.rv-tf { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.55); }
.rv-tf .ic { width: 46px; height: 46px; color: color-mix(in srgb, var(--text) 50%, transparent); }
.rv-hero:not(.has-photo) .rv-title { font-size: 1.7rem; line-height: 1.12; }
.tk-ph .tf-sm .ic { width: 84px; height: 84px; max-width: none; max-height: none; }
:root[data-theme="dark"] .rv-tf { background: rgba(255,255,255,.08); }
/* 📷 a főzés végén, az „Ízlett?” lap alján: „Lefotózod? Legközelebb ez lesz a képe.” (ratings.js askRating {photo}) */
.rt-photo { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.rt-photo .rt-ph-ic { font-size: 1.5rem; }
.rt-photo > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-photo b { font-size: .95rem; } .rt-photo small { font-size: .78rem; color: var(--muted); }
/* ✨ Betűméret-skála (2026-10-26, premium-javaslat.html 5.): öt méret — cím · alcím · szöveg · apró · címke. Új elemnél
   ezekből válassz (a régi oldalak az átalakításukkor kerülnek rá). */
:root { --fs-title: 1.625rem; --fs-sub: 1.0625rem; --fs-body: .9375rem; --fs-small: .75rem; --fs-label: .66rem; }
.pg-head h2, .pg-head h1, .mc-date h2 { font-size: var(--fs-title); letter-spacing: -.01em; }
.mn-t, .wr-h b { font-size: var(--fs-sub); }
.tl-t b, .ma-more { font-size: var(--fs-body); }
.tl-t small, .mn-s, .mc-chip small, .mc-hi { font-size: var(--fs-small); }
.ma-lbl, .mn-k, .ma-sec { font-size: var(--fs-label); }
/* ✨ „A heted” kártya új stílusban (2026-10-26): mint a „Most” kártya — vonalas ikonok, krém csempék, hajszálkeret */
.wr-card { box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); border-radius: 22px; }
.wr-h b { font: 800 1.08rem/1.25 var(--font-head); margin-top: 3px; }
.wr-h .mn-k .ic { width: 15px; height: 15px; }
.wr-st { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); gap: 3px; padding: 9px 2px; }
.wr-st .ic { width: 20px; height: 20px; color: var(--muted); }
.wr-acts .primary { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; }
.wr-acts .primary .ic { width: 18px; height: 18px; }
.wr-acts .primary small { font-weight: 600; opacity: .7; }
.wr-ok { display: inline-flex; align-items: center; gap: 6px; } .wr-ok .ic { width: 18px; height: 18px; color: var(--green); }
.wr-love .ic { width: 20px; height: 20px; flex: none; color: var(--accent); }
.rt-ph-go { flex: none; padding: 9px 14px; border-radius: 12px; background: var(--btn); color: var(--btn-ink); font-weight: 800; font-size: .85rem; }
@media (min-width: 1000px) { #ma-body .mc-cover, #ma-body .mc-banner { width: 100%; max-width: none; } }
/* ✨ Receptek (2026-10-26, premium-javaslat.html 2.): semleges nagy fejléc, hajszálkeretes kereső / gombok, fekete étkezés-
   kapcsoló, kártyán: kép (fotó vagy tipográfiai csempe) + csillag fehér körben, alatta apró címke, név, ikonos számok */
.rc-head { padding: 2px 4px 0; }
.rc-head h1 { margin: 0; font: 800 var(--fs-title)/1.1 var(--font-head); letter-spacing: -.01em; }
.rc-head .rc-sum { margin: 3px 0 0; font-size: var(--fs-small); }
.rc-head .rc-sum b { font-weight: 600; color: var(--muted); }
.rc-search { box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; }
.rc-search > .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.rc-fbtn { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 14px !important; color: var(--text); }
.rc-fbtn .ic { width: 22px; height: 22px; }
.rc-fbtn.on { color: var(--accent); }
.rc-lovebtn, :root[data-theme="dark"] .rc-lovebtn { background: var(--card) !important; }
.rc-lovebtn .ic { color: #C2416B; }
.rc-seg { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 13px; padding: 3px; }
.rc-seg button { color: var(--muted); font-weight: 700; }
.rc-seg button.on { background: var(--btn) !important; color: var(--btn-ink) !important; box-shadow: none; }
.rc-pill { display: inline-flex !important; align-items: center; gap: 6px; }
.rc-pill .ic { width: 17px; height: 17px; flex: none; }
button.rc-pill:not(.primary) { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.rc-card { box-shadow: inset 0 0 0 1px var(--line); }
/* (2026-11-02, Andras: görgetés közben megérintett kártyán a kiemelés rajta maradt) — érintőképernyőn a :hover „ragad”,
   ezért csak egérrel van kiemelés */
@media (hover: hover) { .rc-card:hover { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--accent-soft); } }
.rc-img { height: 104px; } /* kép nélkül is ugyanennyi (2026-10-31: egységes kártya) */
.rc-typo .rc-img .tf-sm .ic { width: 38px; height: 38px; color: color-mix(in srgb, var(--text) 30%, transparent); }
.rc-img .tf { padding: 10px 11px; }
.rc-img .rc-star { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; display: grid; place-items: center;
  background: color-mix(in srgb, var(--card) 88%, transparent) !important; color: var(--text); text-shadow: none; }
.rc-img:has(.rc-photo) .rc-star:not(.on) { color: var(--text); text-shadow: none; }
.rc-img .rc-star::after { content: ''; position: absolute; inset: -7px; } /* 44 px-es koppintási terület */
.rc-star .ic { width: 16px; height: 16px; }
.rc-star.on { color: var(--brand); }
.rc-star.on .ic { fill: currentColor; }
.rc-love { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; top: 7px; left: 7px; }
.rc-love .ic { width: 16px; height: 16px; color: #C2416B; fill: currentColor; }
.rc-bd { gap: 2px; padding: 9px 11px 11px; }
.rc-cat { font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (+ konyha, 2026-10-28: egy sorban) */
.rc-nm { font-size: .9rem; font-weight: 700; line-height: 1.22; }
/* (2026-11-02, Andras) a nagyon hosszú nevek legfeljebb 3 sorban, „…”-tal; a teljes név a recept-ablakban */
.rc-nm { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rc-mt { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.rc-mt > span { display: inline-flex; align-items: center; gap: 3px; }
.rc-mt .ic { width: 13px; height: 13px; }
@media (max-width: 600px) { .rc-img { height: 96px; } }
/* ✨ Recept-ablak (2026-10-26, premium-javaslat.html 2.): kép nélkül a nagy csempe — sötét, nagy név a kategória színén,
   sarokban a vonalas ikon (a régi kör-ikon helyett); a 4 szám krém csempékben ikonnal; hozzávalók: név balra, mennyiség jobbra */
.rv-hero:not(.has-photo)::after { display: none; }
.rv-hero:not(.has-photo) .rv-title { color: var(--text); text-shadow: none; font-size: 1.85rem; line-height: 1.08; letter-spacing: -.015em; max-width: 92%; }
.rv-hero:not(.has-photo) .rv-src { color: color-mix(in srgb, var(--text) 62%, transparent); }
.rv-hero:not(.has-photo) .rv-ov .ma-tag { box-shadow: none; }
.rv-tfi { position: absolute; right: 20px; bottom: 40px; z-index: 2; }
.rv-tfi .ic { width: 30px; height: 30px; color: color-mix(in srgb, var(--text) 40%, transparent); }
.rv-hero:not(.has-photo) .rv-ov { right: 64px; }
.rv-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 20px; }
.rv-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px 8px; border: 0; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.rv-stats > div .ic { width: 18px; height: 18px; color: var(--muted); margin-bottom: 1px; }
.rv-stats .rv-stats-f { margin: 4px 6px 0; padding-top: 6px; border-top: 0; font-size: var(--fs-small); }
.rv-ings .ing { align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
.rv-ings .ing:last-child { border-bottom: 0; }
.ing-n { flex: 1; min-width: 0; }
.ing-q { flex: none; font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ing-n .ing-ok, .ing-n .ing-miss { display: inline-block; margin-left: 6px; font-size: var(--fs-small); font-weight: 600; }
.rv-cook { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; background: var(--btn) !important; color: var(--btn-ink) !important; }
.rv-cook .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.rv-more-s > span:first-child, .rv-row > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.rv-more-s > span:first-child .ic, .rv-row > span:first-child .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.rv-tolist .ic { width: 18px; height: 18px; }
/* ✨ Kép felirat nélkül (2026-10-26, Andras: „kevesebb felirattal kéne takarni a képeket”): a fotón csak a kép (és a ✕);
   alatta apró Pixabay-felirat, címke, nagy név, és a négy gomb felirattal egy sorban, krém csempékben */
.rv-hero.has-photo::after { display: none; }
.rv-head { padding: 14px 2px 0; display: flex; flex-direction: column; }
.rv-head .rec-ill { position: static; align-self: flex-end; margin: -8px 0 4px; padding: 0; background: none !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--muted) !important; font-size: .66rem; font-weight: 600; }
.rv-lbl { font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rv-ov .rv-lbl { color: color-mix(in srgb, var(--text) 62%, transparent); }
.rv-head .rv-title { margin: 4px 0 0; color: var(--text); text-shadow: none; font-size: 1.6rem; line-height: 1.12; letter-spacing: -.015em; }
.rv-acts2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.rv-acts2 .rv-hb { width: auto; height: auto; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 14px !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--text); }
.rv-acts2 .rv-hb:active { transform: scale(.94); }
.rv-acts2 .rv-hi { width: 21px; height: 21px; }
.rv-hl { font-size: var(--fs-small); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.rv-acts2 .rv-hb[data-on] { box-shadow: inset 0 0 0 1.5px currentColor !important; }
/* 🎁 öt gomb (a „Kívánom” is, ha mások is vannak a háztartásban) — telefonon kisebb felirat, hogy kiférjen */
.rv-acts2.n5 { grid-template-columns: repeat(5, 1fr); gap: 5px; }
.rv-acts2.n5 .rv-hl { font-size: var(--fs-label); }
/* (2026-11-02, Andras képe: nagyobb betűkkel a „Betervezem” kilógott) — a hasábok nem nőhetnek a felirattal (minmax 0),
   a felirat két sorba törhet („Nem / ízlett”), a gombon belül kevesebb a margó */
.rv-acts2, .rv-acts2.n5 { grid-template-columns: repeat(var(--rv-n, 4), minmax(0, 1fr)); }
.rv-acts2.n5 { --rv-n: 5; }
.rv-acts2 .rv-hb { min-width: 0; padding-left: 3px !important; padding-right: 3px !important; }
.rv-acts2 .rv-hl { white-space: normal; text-align: center; max-width: 100%; }
.rv-hb[data-k="wish"][data-on] { color: #C2417A; } .rv-hb[data-k="wish"][data-on] .rv-hi { fill: #C2417A; fill-opacity: .14; }
.rv-head ~ .rv-stats { margin-top: 12px; }
/* saját recept kép nélkül: barátságos kérés a fotóra (2026-11-07, Andras: képkeresés helyett biztatás) */
.rv-addph { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-top: 12px; padding: 10px 14px !important; border: 0 !important; border-radius: 16px !important; background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--text) !important; text-align: left; }
.rv-addph > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-addph b { font-size: var(--fs-body); font-weight: 700; }
.rv-addph small { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.rv-addph > i { font-style: normal; font-size: 1.2rem; color: var(--muted); }
.rv-addph-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.rv-addph-ic .ic { width: 20px; height: 20px; }
/* ✨ Aloldalak (2026-10-26, Andras: „a Ma, Terv és Receptek alatti menüpontok is örököljék az új nézetet”): a fejléc címe
   nagy, emoji nélkül, alatta apró alcím; szakaszcímek vonalas ikonnal; kapcsolók hajszálkeretes kártyában */
.pg-head h2 { font-size: var(--fs-title); letter-spacing: -.01em; }
.pg-head h2 .pg-sub { display: block; font: 600 var(--fs-small)/1.3 var(--font); color: var(--muted); letter-spacing: 0; margin-top: 1px; }
.tk-ttl b { font-size: var(--fs-title); letter-spacing: -.01em; line-height: 1.1; }
.tk-ttl small { font-size: var(--fs-small); margin-top: 2px; }
.j-card { box-shadow: inset 0 0 0 1px var(--line); }
.j-card h3, .rf-l { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.j-card h3 > .ic, .rf-l > .ic { width: 15px; height: 15px; flex: none; }
.ms-card h3 { justify-content: flex-start; } .ms-card h3 .ms-n { margin-left: auto; }
.te2-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: var(--fs-sub); }
.te2-title > .ic { width: 20px; height: 20px; color: var(--muted); }
.te2-title small { flex-basis: 100%; }
.rf-card { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; margin-top: 6px; }
.rf-card > :last-child { border-bottom: 0; }
.rf-tg > .rf-ic { width: 20px; height: 20px; color: var(--muted); flex: none; margin-right: -2px; }
.rf-tg > span { flex: 1; min-width: 0; }
/* ⏱ Elkészítési idő: a sor szövege a lapon belüli idő-listát nyitja, jobbra a kapcsoló (2026-10-31) */
.rf-time { cursor: default; }
.rf-tbtn { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.rf-tbtn > span { display: block; }
.rf-tbtn small { display: flex; align-items: center; gap: 4px; font-weight: 500; color: var(--accent); font-size: .76rem; line-height: 1.3; }
.rf-tbtn small i { font-style: normal; font-size: 1rem; line-height: 1; }/* Szűrők: csoport-sorok és a lapon belül nyíló listák (kapszulák helyett, 2026-10-26) */
.rf-row, .rf-opt { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--text); text-align: left; font-weight: 600; }
.rf-card > .rf-row:last-child, .rf-card > .rf-opt:last-child { border-bottom: 0 !important; }
.rf-row > span, .rf-opt > span { flex: 1; min-width: 0; }
.rf-row small { display: block; font-weight: 500; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-row small.on { color: var(--accent); font-weight: 700; }
.rf-row > i { font-style: normal; font-size: 1.2rem; color: var(--muted); }
.rf-row > .rf-ic, .rf-opt > .rf-ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.rf-opt > .rf-emo { width: 20px; text-align: center; font-size: 1.05rem; flex: none; }
.rf-ck { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 40%, transparent); color: transparent; }
.rf-ck .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.rf-opt.on .rf-ck { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.rf-opt.on > span { font-weight: 700; }
.rf-subh { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.rf-subh b { flex: 1; font: 800 var(--fs-sub) var(--font-head); }
.rf-back { width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; font-size: 1.5rem; line-height: 1; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; color: var(--text); }
.rf-subh .link { font-weight: 700; color: var(--accent); min-height: 44px; }
.rf-subp { margin: 2px 2px 8px; }
/* (2026-10-26, Andras: „a csúszka találkozik az elemekkel, ahogy görgetünk — inkább el kéne rejteni”) az alsó lapokon nincs
   látható görgetősáv; érintőképernyőn a recept-lapon sem (görgetni ugyanúgy lehet) */
.modal-bg .modal, .modal-bg .modal * { scrollbar-width: none; }
.modal-bg .modal::-webkit-scrollbar, .modal-bg .modal *::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (pointer: coarse) {
  #drawer, #drawer * { scrollbar-width: none; }
  #drawer::-webkit-scrollbar, #drawer *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.rf-mode { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 3px; }
.rf-mode button { border-radius: 9px !important; }
.rf-mode button.on { background: var(--btn) !important; color: var(--btn-ink); box-shadow: none; }
.rf-mem .rf-mode button { min-height: 38px; display: grid; place-items: center; }
.rf-mode .rv-hi { width: 18px; height: 18px; }
.rf-lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
/* Ma → kinyitott „Mára teendő”: egy kártya a sor alatt, kerek pipák (mint „A napod” .tl-ck) */
#ma-body .ma-todo { margin-top: -8px; padding: 2px 14px; border-radius: 6px 6px 18px 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 0; }
#ma-body .ma-todo > .jt { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 9px 0 !important; border-bottom: 1px solid var(--line); }
#ma-body .ma-todo > :last-child { border-bottom: 0; }
#ma-body .ma-todo .jt-ic { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); }
#ma-body .ma-todo .jt-chk { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; min-width: 26px; margin: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); background: transparent center / 15px no-repeat; transition: background-color .15s, box-shadow .15s; }
#ma-body .ma-todo .jt-chk:checked { background-color: var(--green); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
#ma-body .ma-todo .jt-chk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ✍️ (2026-10-28) a pipa / számláló a kódban elöl (a <label> arra irányítja a koppintást), látszatra a sor végén */
.ma-todo-row > .jt-chk, .ma-todo-row > .cnt-wrap { order: 9; }
.ma-todo-row > .ma-xdel { order: 8; min-width: 36px; min-height: 36px; font-size: 1.3rem; }
.ma-icbtn { cursor: pointer; position: relative; }
.ma-todo-row.ma-moved { opacity: .6; }
.ma-todo-row.ma-moved b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
/* új teendő erre a napra + a korábban beírtak */
#ma-body .ma-todo > .ma-addtodo { display: flex; gap: 8px; align-items: center; padding: 10px 0 4px; border-bottom: 0; }
.ma-addtodo input { flex: 1; min-width: 0; font-size: 16px !important; min-height: 44px; }
.ma-addbtn { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border-radius: 12px !important; display: grid; place-items: center;
  background: var(--btn) !important; color: var(--btn-ink) !important; border: 0 !important; }
.ma-addbtn .ic { width: 20px; height: 20px; stroke-width: 2.2; }
#ma-body .ma-todo > .ma-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 0 12px; }
.ma-sug:empty { display: none !important; }
.ma-sug small { color: var(--muted); font-size: var(--fs-small); margin-right: 2px; }
.ma-sugb { min-height: 34px; padding: 0 10px !important; border-radius: 10px !important; border: 0 !important; background: var(--bg) !important;
  box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.sp-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.sp-ic .ic { width: 20px; height: 20px; color: var(--muted); }
.lm-list:has(.lm-ic > .ic) { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.lm-ic:has(> .ic) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.lm-ic > .ic { width: 19px; height: 19px; color: var(--text); }
.danger .lm-ic > .ic { color: var(--warn); }
.pt-pick-ic .ic, .pt-modes i .ic { width: 20px; height: 20px; color: var(--text); }
.pt-pick-ic:has(.ic) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
/* 🍳 Főzés fókusz mód (cookfocus.js, 2026-10-26): egy lépés = egy képernyő, mindig sötét háttéren, nagy betűvel.
   A felső időzítősáv (z 45) fölötte marad; az alsó lapok (Ízlett?, sütő) fölé nyílnak. */
.cf { position: fixed; left: 0; right: 0; bottom: 0; top: var(--top-off, 0px); z-index: 30; display: flex; flex-direction: column; background: #17130F; color: #F5EFE6;
  padding: max(10px, env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
html.has-dock .cf { padding-top: 10px; }
@media (min-width: 641px) { .cf { box-shadow: 0 0 0 100vmax rgba(10, 8, 6, .7); } }
body.cf-on { overflow: hidden; }
.cf-top { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.cf-name { flex: 1; min-width: 0; text-align: center; font: 700 var(--fs-body)/1.2 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(245, 239, 230, .78); }
.cf-rb { width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; display: grid; place-items: center; background: rgba(255, 255, 255, .09) !important; color: #F5EFE6 !important; box-shadow: none !important; }
.cf-rb .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.cf-seg { display: flex; gap: 4px; margin: 6px 0 4px; }
.cf-seg i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); transition: background .25s; }
.cf-seg i.done { background: var(--brand); }
.cf-seg i.now { background: #F5EFE6; }
.cf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 2px 12px; scrollbar-width: none; }
.cf-body::-webkit-scrollbar { display: none; }
.cf-dir-fwd { animation: cfIn .32s var(--ease-out) both; }
.cf-dir-back { animation: cfInBack .32s var(--ease-out) both; }
@keyframes cfIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cfInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cf-dir-fwd, .cf-dir-back { animation: none; } }
.cf-k { display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 239, 230, .55); }
.cf-body h2 { margin: 8px 0 12px; font: 800 1.9rem/1.12 var(--font-head); letter-spacing: -.015em; color: #fff; }
.cf-text { margin: 0; font-size: 1.18rem; line-height: 1.5; color: rgba(245, 239, 230, .92); -webkit-user-select: text; user-select: text; }
/* 🧂 kezdő mennyiség az „ízlés szerint” helyett (seasoning.js) */
.cf-taste { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(var(--brand-rgb), .14); color: var(--cf-hi2); font-size: 1rem; line-height: 1.45; }
.cf-taste .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--brand); }
.gtaste { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: .86rem; line-height: 1.4; }
.cf-par { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; color: var(--cf-hi); font-size: var(--fs-small); font-weight: 700; }
.cf-par .ic { width: 15px; height: 15px; }
.cf-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); font-size: var(--fs-body); line-height: 1.45; color: rgba(245, 239, 230, .88); }
.cf-note .ic { width: 20px; height: 20px; flex: none; color: var(--cf-hi); margin-top: 1px; }
.cf-subs { display: flex; flex-direction: column; margin-top: 4px; border-radius: 18px; background: rgba(255, 255, 255, .06); padding: 0 14px; }
.cf-sub { display: flex !important; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: #F5EFE6 !important; text-align: left; font-size: 1.05rem; font-weight: 600; }
.cf-sub:last-child { border-bottom: 0 !important; }
.cf-sub.on > span { color: rgba(245, 239, 230, .5); text-decoration: line-through; }
.cf-ck { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); color: transparent; }
.cf-ck .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.cf-sub.on .cf-ck { background: var(--brand); box-shadow: none; color: #17130F; }
.cf-timers { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.cf .timer { width: 100%; min-height: 64px; border: 0 !important; border-radius: 20px !important; background: rgba(255, 255, 255, .1) !important; color: #fff !important;
  font: 800 1.25rem var(--font-head) !important; letter-spacing: .01em; box-shadow: none !important; }
.cf .timer.run { background: rgba(var(--brand-rgb), .2) !important; color: var(--cf-hi) !important; font-variant-numeric: tabular-nums; }
.cf .timer.ring { background: var(--brand) !important; color: #17130F !important; animation: cfRing 1s ease-in-out infinite; }
@keyframes cfRing { 50% { transform: scale(1.02); } }
.cf-whyb { margin-top: 16px; padding: 0 !important; min-height: 44px; border: 0 !important; background: none !important; box-shadow: none !important; color: rgba(245, 239, 230, .7) !important; font-weight: 700; font-size: var(--fs-body); }
.cf-whyb i { font-style: normal; }
.cf-why { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: rgba(245, 239, 230, .75); }
.cf-card { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.cf-card b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 239, 230, .6); }
.cf-card b .ic { width: 16px; height: 16px; }
.cf-card p { margin: 8px 0 0; font-size: 1.05rem; line-height: 1.5; }
.cf-nav { display: flex; gap: 10px; padding-top: 10px; }
.cf-nav .cf-back { width: 58px; min-height: 58px; flex: none; padding: 0 !important; display: grid; place-items: center; border: 0 !important; border-radius: 18px !important; background: rgba(255, 255, 255, .1) !important; color: #F5EFE6 !important; box-shadow: none !important; }
.cf-nav .cf-back .ic { width: 22px; height: 22px; stroke-width: 2; }
.cf-nav .cf-back:disabled { opacity: .3; }
.cf-next { flex: 1; min-height: 58px; border: 0 !important; border-radius: 18px !important; background: #F5EFE6 !important; color: #17130F !important; font: 800 1.05rem var(--font-head) !important; box-shadow: none !important; }
.cf-start { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 6px 0 14px; border-radius: 16px !important; font-weight: 800; }
.cf-start .ic { width: 20px; height: 20px; }
.rv-cook2 { flex: 0 0 auto !important; background: var(--card) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line) !important; padding: 0 16px !important; }
/* ✨ Csendes AI-azonosító (2026-10-26, Andras: „illenek-e az AI-elemek a prémium megközelítéshez”): a jelvény halvány
   levendula alapon lila „AI” + vonalas szikra (nincs színátmenet / árnyék); sötét gombon áttetsző; a „dolgozik” sáv fehér
   kártya, mint az időzítősáv, alul vékony futó lila csík */
:root { --ai: #6A55D8; --ai-soft: #EFEBFF; }
:root[data-theme="dark"] { --ai: #B5A8FF; --ai-soft: rgba(181, 168, 255, .14); }
.ai-badge { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; margin-left: 5px; padding: 1px 6px 1px 5px; border-radius: 6px;
  font: 800 .64rem/1.5 var(--font); letter-spacing: .06em; color: var(--ai); background: var(--ai-soft); box-shadow: none; }
.ai-badge::before { content: ''; width: 10px; height: 10px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
button.primary .ai-badge, .primary .ai-badge { color: #fff; background: rgba(255, 255, 255, .16); }
/* ✦ AI válasza (2026-11-01, Andras: a sima szürke szöveg kilógott az app stílusából): halvány levendula kártya, bal felső sarokban a szikra */
.ai-note { position: relative; margin: 10px 0 0; padding: 11px 14px 11px 36px; border-radius: 14px; background: var(--ai-soft); color: var(--text); font-size: var(--fs-body, 15px); line-height: 1.45; text-align: left; }
.ai-note::before { content: ''; position: absolute; left: 13px; top: 14px; width: 14px; height: 14px; background: var(--ai);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ai-note.small { font-size: var(--fs-small, 13px); }
.ai-note p { margin: 0; }
.ai-note .w-gres-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.ai-note .w-gres-v { font: 800 1.35rem/1.2 var(--font-head); }
.ai-note .w-gres-a { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.ai-note .w-ok { margin: 0; }
.ai-row { border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 10px 14px 12px !important; gap: 10px !important; box-shadow: 0 8px 24px rgba(23, 19, 15, .12) !important; }
.ai-row > .ic { width: 20px; height: 20px; flex: none; color: var(--ai); animation: aiPulse 1.6s ease-in-out infinite; }
@keyframes aiPulse { 50% { opacity: .45; transform: scale(.9); } }
.ai-dock-bar { height: 2px; background: var(--ai-soft); }
.ai-dock-bar::after { background: var(--ai); }
@media (prefers-reduced-motion: reduce) { .ai-row > .ic { animation: none; } }
/* AI-gombok: vonalas ikon az emoji helyett */
button > .ic.ai-ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; }
.ai-meter .ic, .ai-card .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; color: var(--ai); }
/* 🔋 AI-keret „akku” a felső sávban (2026-10-31, Andras): szikra + elem, a töltöttség = a maradék keret; koppintva az AI-keret lap */
.ai-btn { margin-left: auto; }
.hh-pill:not([hidden]) ~ .ai-btn { margin-left: 0; }
.ai-btn:not([hidden]) ~ .help-btn, .ai-btn:not([hidden]) ~ .bug-btn, .ai-btn:not([hidden]) ~ .help-btn[hidden] + .bug-btn { margin-left: 0; }
.ic.ai-bat { width: 30px; height: 24px; }
.ai-btn .ic.ai-bat { width: 30px; height: 24px; }
.ai-bat .ai-bat-spark { fill: var(--ai); stroke: none; }
.ai-bat .ai-bat-fill { fill: var(--green); stroke: none; }
.ai-bat.low .ai-bat-fill { fill: var(--brand); }
.ai-bat.empty .ai-bat-fill { fill: var(--warn); }
.ai-bat.empty { color: var(--warn); }
/* telefonon nem fér ki minden egy sorba (logó + háztartás + akku + ? + hiba + 💬) → az akkuval a logó mellől a „PeliCook” felirat kimarad */
@media (max-width: 440px) { html:has(#ai-btn:not([hidden])) header.top .home-link > span { display: none; } }
/* az AI-keret lap: nagy akku + százalék, alatta „Mi mennyit visz el?” */
.ai-big { display: flex; align-items: center; gap: 14px; }
.ai-card .ai-big .ic.ai-bat { width: 66px; height: 52px; margin: 0; vertical-align: 0; color: var(--text); }
.ai-big b { display: block; font: 800 var(--fs-title)/1.1 Montserrat, Inter, sans-serif; }
.ai-big small { color: var(--muted); font-size: var(--fs-small); }
.ai-costs { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.ai-costs > b { margin-bottom: 4px; }
.ai-cost { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--fs-small); border-bottom: 1px solid var(--line); }
.ai-cost:last-child { border-bottom: 0; }
.ai-cost b { white-space: nowrap; color: var(--text); font-weight: 600; }
.ai-more { margin-top: 2px; }
/* a Receptek keresésénél: „Van még N recept…” és az AI-keresés doboza semleges kártya (az allergén-doboz piros marad) */
.rc-others, .rc-aisearch { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); border-radius: 18px; }
.rc-others > summary { flex-wrap: nowrap; font-weight: 600; }
.rc-others > summary::before { content: none; }
.rc-others > summary > span { flex: 1; min-width: 0; }
.rc-others > summary > i { font-style: normal; font-size: 1.2rem; color: var(--muted); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.rc-others[open] > summary > i { transform: rotate(90deg); }
.rc-aisearch button:not(.primary) { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; }
.rc-aisearch button { border-radius: 14px !important; }
.ph-drop:not(.has) { border: 1.5px dashed color-mix(in srgb, var(--muted) 40%, transparent); background: var(--card); }
.ph-drop-in > .ic { width: 28px; height: 28px; color: var(--muted); margin-bottom: 2px; }
.ph-drop-in b { color: var(--text); }
/* ✨ Lista (2026-10-26, premium-javaslat.html): főoldal semleges fejléccel és vonalas ikonokkal; a listában a név alatt
   „5 / 13 megvéve” + haladás-csík, kategóriánként a címke a kártya FÖLÖTT, hajszálkeretes kártya; a recept-megjegyzés a ⋮ mögött */
.sh-head { margin: 0 0 12px; }
.sh-card { box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; border-radius: 18px !important; }
.sh-ic { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sh-ic .ic { width: 21px; height: 21px; color: var(--text); }
.sh-new { box-shadow: none !important; border: 1.5px dashed color-mix(in srgb, var(--muted) 40%, transparent) !important; }
.sh-new .sh-ic { box-shadow: none; background: transparent; }
.sh-more { margin-bottom: 8px; }
#shop-sub-title .pg-sub { margin-top: 2px; }
.li-prog { display: block; height: 4px; margin-top: 7px; max-width: 220px; border-radius: 99px; background: var(--line); overflow: hidden; }
.li-prog i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .35s var(--ease-out); }
#shop-sub-head h2 { white-space: normal; }
#log-days .shop-section { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 14px; }
#log-days .shop-section h3 { margin: 0 2px 7px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; color: var(--muted); }
#log-days .shop-section ul { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
#log-days [data-rebuy-log] { border-radius: 12px !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--text) !important; text-decoration: none; padding: 6px 10px !important; font-weight: 700; }
#li-items .shop-section { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 14px; }
#li-items .shop-section h3 { margin: 0 2px 7px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; color: var(--muted); }
#li-items .shop-section ul { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; overflow: hidden; }
#li-items .li-row:last-child { border-bottom: 0; }
#li-items .shop-name { font-weight: 600; }
#li-items .li-qtyv { color: var(--text); font-weight: 600; }
#li-items .li-row.done .li-qtyv { color: var(--muted); font-weight: 500; }
#shop-plan-view .shop-section:not(.stale) { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 14px; }
#shop-plan-view .shop-section:not(.stale) > h3 { margin: 0 2px 7px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; color: var(--muted); }
#shop-plan-view .shop-section:not(.stale) > ul { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
#shop-plan-view .pi:last-child { border-bottom: 0; }
#shop-plan-view .pi-btn { border-radius: 12px !important; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; color: var(--text) !important; font-weight: 700; }
.staple-toggle { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 3px; }
.staple-toggle button { border-radius: 9px !important; color: var(--muted); }
.staple-toggle button.on { background: var(--card) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(23, 19, 15, .14); }
.staple-toggle button.on.off { background: var(--warn-soft) !important; color: var(--warn) !important; box-shadow: none; }
#shop-notes p, #shop-notes p.sp-serv { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 16px; align-items: center; }
#shop-notes p > .ic { width: 19px; height: 19px; flex: none; color: var(--muted); }
#shop-notes p > span { flex: 1; min-width: 0; }
/* ✨ Terv (2026-10-26, premium-javaslat.html 3.): nagy cím + „N / 28 étkezés”, ikonok felirat nélkül kerek gombokban;
   semleges kártyák, apró szürke étkezés-címke a színes pirula helyett; „Áthelyezés” mód a rácson */
.pc-head h2 { font-size: var(--fs-title); letter-spacing: -.01em; line-height: 1.1; }
.pc-head h2 .pg-sub { display: block; font: 600 var(--fs-small)/1.3 var(--font); color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.pc-head { gap: 6px; }
.pc-ic { min-width: 0; width: 42px; height: 42px; padding: 0 !important; border-radius: 50% !important; background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; color: var(--text); }
.pc-ic svg { width: 20px; height: 20px; }
.pc-ic > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* (felirat csak felolvasónak) */
.pc-ic .pc-badge { top: -4px; right: -4px; }
.pd-lbl { display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pd-meal { box-shadow: inset 0 0 0 1px var(--line) !important; }
.pd-fill { background: var(--card) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.pd-qa button { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.pd-slot { box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--muted) 35%, transparent); background: transparent; }
.pd-slot-l { color: var(--muted) !important; font-size: var(--fs-label); letter-spacing: .07em; }
/* (2026-10-27, Andras: az üres hely nem volt egyértelmű — „mintha az alatta lévő kettő választva lenne”) nagy felirat,
   meleg alap, az ötletek külön címke alatt, keret nélkül és halványabban */
.pd-slot { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 6%, transparent); padding: 12px; }
.pd-slot-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pd-slot-tt .pd-slot-l { flex: none; }
.pd-slot-e { font: 800 var(--fs-sub) var(--font-head); line-height: 1.2; color: var(--text); }
.pd-ideas-l { margin-top: 4px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pd-slot .pd-idea { background: transparent !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 22%, transparent); min-height: 44px; }
.pd-slot .pd-idea-p { width: 32px; height: 32px; opacity: .85; }
.pd-slot .pd-idea-t b { font-weight: 600; color: color-mix(in srgb, var(--text) 80%, transparent); }
.pd-dice { display: grid; place-items: center; background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--text); }
.pd-dice .ic { width: 19px; height: 19px; }
.pc-big { box-shadow: inset 0 0 0 1px var(--line) !important; }
.pc-big .pd-lbl { margin-bottom: 2px; }
.pc-chips span { display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.pc-chips .ic { width: 14px; height: 14px; color: var(--muted); }
.pc-chips span.ok .ic { color: var(--green-ink); }
.pc-acts2 button:not(.pc-a-main) { box-shadow: inset 0 0 0 1px var(--line); }
.pc-move { display: flex !important; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; margin-top: 6px; border: 0 !important; border-radius: 12px !important;
  background: transparent !important; color: var(--text); font-weight: 700; font-size: .86rem; box-shadow: inset 0 0 0 1px var(--line); }
.pc-move .ic { width: 17px; height: 17px; }
.pc-empty-e .ic { width: 36px; height: 36px; color: var(--muted); }
.pc-eb { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; }
.pc-eb .ic { width: 18px; height: 18px; }
.pc-eb.brand { background: var(--card) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line); }
.pc-movecap { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 16px; background: var(--btn); color: var(--btn-ink); }
.pc-movecap > .ic { width: 20px; height: 20px; flex: none; color: var(--brand); }
.pc-movecap > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-movecap small { opacity: .75; font-size: var(--fs-small); }
.pc-movecap button { flex: none; min-height: 38px; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: rgba(255, 255, 255, .14) !important; color: inherit !important; font-weight: 700; }
.pc-grid.moving .pc-cell:not(.mv-src) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent); }
.pc-grid.moving .pc-cell.mv-src { outline: 2.5px solid var(--brand); outline-offset: -2px; opacity: .55; }
/* ☑ kijelölés mód (2026-11-03): a kijelölt kocka fekete kerettel és pipával, a többi nem halványul */
.pc-grid.multi .pc-cell { position: relative; }
.pc-grid.multi .pc-cell.msel { box-shadow: 0 0 0 2.5px var(--text); }
.pc-grid.multi .pc-cell.msel::after { content: '✓'; position: absolute; right: -5px; top: -6px; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); color: var(--card); font: 800 11px/18px var(--font-body, Inter, sans-serif); text-align: center; }
.pc-multibar { display: flex; gap: 8px; margin: 0 0 10px; }
.pc-multibar button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-weight: 700; }
.pc-multibar button .ic { width: 18px; height: 18px; }
.pc-multibar button:disabled { opacity: .45; }
/* ✨ Én (2026-10-26, premium-javaslat.html 3.): nagy „Én” cím, semleges profil-kártya, vonalas ikon krém négyzetben, soronként
   egy halvány adat; az aloldalak gombjai / kártyái hajszálkeretesek */
.en2-head { margin-bottom: 12px; }
.en2-prof, :root[data-theme="dark"] .en2-prof { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.en2-chips span, :root[data-theme="dark"] .en2-chips span { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; }
.en2-chips .al { background: var(--warn-soft) !important; color: var(--warn); box-shadow: none; }
.en2-chips .ic { width: 12px; height: 12px; }
.en2-grp { box-shadow: inset 0 0 0 1px var(--line) !important; }
.en2-lbl { font-size: var(--fs-label); letter-spacing: .07em; }
.en2-ic, .en2-ic[class*="bg-"] { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.en2-ic .ic { width: 20px; height: 20px; }
.en2-one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en2-dev-ic .ic { width: 24px; height: 24px; color: var(--muted); }
.en2-dev { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.en2-rem { box-shadow: inset 0 0 0 1px var(--line) !important; }
.en2-pill { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 12px !important; box-shadow: inset 0 0 0 1px var(--line); }
.en2-pill.acc { background: var(--bg) !important; color: var(--text); }
.en2-pill .ic, .w-test .ic, .w-rec .ic, .w-ok .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.w-ok .ic { color: var(--green); }
#en-body .en-card { box-shadow: inset 0 0 0 1px var(--line) !important; }
.pf-sum { box-shadow: inset 0 0 0 1px var(--line) !important; }
.pf-row .pf-ic { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); display: grid; place-items: center; }
.pf-row .pf-ic .ic { width: 20px; height: 20px; }
.wz-entry { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; }
.wz-entry .wz-ic { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--ai); }
.wz-entry .wz-ic .ic { width: 22px; height: 22px; }
.wz-entry .go { color: var(--muted); }
.hh-ric, .hh-ric[class*="jc-"] { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.hh-ric .ic, .hh-code2 button .ic { width: 20px; height: 20px; }
.hh-code2 button { display: grid !important; place-items: center; box-shadow: inset 0 0 0 1px var(--line) !important; }
.hh-two button { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; }
.hh-two button:not(.primary) { background: var(--card) !important; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
/* (2026-10-31, Andras: „a + Meghívás rettentően világos”) a fő gomb fekete, mint az app többi fő gombja (eddig halvány barack + fehér betű) */
.hh-two button.primary { background: var(--btn) !important; color: var(--btn-ink) !important; }
.hh-two button .ic { width: 18px; height: 18px; }
/* ✨ Receptválasztó (2026-10-26, Andras: „nem illik a többi elemhez”): kép / csempe a sorban, ikonos számok, ★ és ✓,
   nagy cím + kerek ✕, hajszálkeretes kereső, csillagos „Csak kedvencek” gomb */
.picker { border-radius: 20px; box-shadow: 0 18px 48px rgba(23, 19, 15, .22); border: 0; }
.picker-top { padding: 14px 16px 10px; gap: 10px; border-bottom: 1px solid var(--line); }
.picker-head b { font: 800 var(--fs-sub) var(--font-head); }
.picker-close { display: grid !important; place-items: center; width: 40px; height: 40px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.picker-close .ic { width: 18px; height: 18px; stroke-width: 2; }
.pk-search { box-shadow: inset 0 0 0 1px var(--line); padding: 2px 14px; }
.pk-search input { font-size: 1rem; }
.pk-fav { display: inline-flex !important; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px !important; border: 0 !important; border-radius: 12px !important;
  background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 700; font-size: .85rem; }
.pk-fav .ic { width: 16px; height: 16px; }
.pk-fav.on { background: var(--btn) !important; color: var(--btn-ink); box-shadow: none; }
.pk-fav.on .ic { fill: var(--brand); stroke: var(--brand); }
.picker-list { padding: 4px 0; }
.picker-list .opt { flex-direction: row !important; align-items: center; gap: 12px; padding: 9px 16px !important; border-bottom: 1px solid var(--line); }
.picker-list .opt:last-child { border-bottom: 0; }
.picker-list .opt.active { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.picker-list .opt.selected .opt-name::before { content: none; }
.picker-list .opt.selected { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.opt-pic { position: relative; flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.opt-pic img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opt-name { font-weight: 700; font-size: var(--fs-body); line-height: 1.25; }
.opt-meta { gap: 9px; font-size: var(--fs-small); }
.opt-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.opt-meta .ic { width: 13px; height: 13px; }
.opt-t .alg-row { margin-top: 2px; }
.opt-fav .ic { width: 17px; height: 17px; fill: var(--brand); stroke: var(--brand); }
.opt-on { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; flex: none; }
.opt-on .ic { width: 15px; height: 15px; stroke-width: 2.6; }
body.app .opt-pic img { pointer-events: none; }
/* (2026-10-27, Andras: „kevés infó a valós döntéshez, és a receptet sem lehet megnyitni”) — telefonon a sorra koppintva
   lenyílik a részlet: számok, hozzávalók, allergének, mikor főzted legutóbb + „Teljes recept” / „Ezt választom” */
.opt-x { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); cursor: default; animation: fadeIn .2s ease; }
.opt-x-st { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-x-st span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); font-weight: 700; }
.opt-x-st .ic { width: 14px; height: 14px; color: var(--muted); }
.opt-x-ing { margin: 0; font-size: .85rem; line-height: 1.4; color: var(--text); }
.opt-x-ing b { display: block; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.opt-x-note { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.opt-x-btns { display: flex; gap: 8px; }
.opt-x-btns button { flex: 1; white-space: nowrap; padding: 0 10px !important; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; border-radius: 12px !important; font-weight: 700; }
.opt-x-btns .ic { width: 17px; height: 17px; }
.opt-x-btns .pk-open { background: var(--card) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line); border: 0 !important; }
.picker-list .opt.open { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); border-bottom-color: transparent; }
.picker-detail .opt-x-btns { margin-top: 12px; }
.picker.pk-hide, .picker-bg.pk-hide { display: none; }
/* ✍️ recept nélkül (2026-10-28): a beírt név sora és a korábban beírtak — ikon krém négyzetben; üresen egy halvány tipp */
.opt-qic { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.6rem; }
.picker-list .opt-qnew .opt-name { color: var(--accent); }
.opt-qhint { display: flex; gap: 10px; align-items: center; padding: 10px 16px; font-size: var(--fs-small); color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.35; cursor: text; }
.opt-qhint .ic { width: 16px; height: 16px; flex: none; }
/* telefonon nincs egér / billentyű-kijelölés → az „aktív” sor kiemelése csak megtévesztett (Andras: „folyamatosan kijelöltnek tűnik”) */
.picker.sheet .picker-list .opt.active:not(.open):not(.selected) { background: none; }
/* a recept-ablak ✕-e csak akkor jelenjen meg, amikor a lap már felcsúszott (Andras, 2026-10-27: előbb volt ott, mint a recept) */
@media (max-width: 600px) { body.drawer-on .drawer-x { animation: xIn .22s var(--ease-out) .24s backwards; } }
@keyframes xIn { from { opacity: 0; transform: scale(.6); } }
.ph-ic .ic { width: 45%; height: 45%; color: var(--muted); opacity: .6; }
.rf-key { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: -2px 2px 8px; }
.rf-key .rv-hi { width: 15px; height: 15px; }
.tr-hic { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.tr-hic .ic { width: 21px; height: 21px; }
/* a takarításban emoji helyére került vonalas ikonok mérete (rács, gombok, sávok) */
.ma-wt-ic .ic { width: 20px; height: 20px; color: var(--muted); }
.pc-ix-more .ic, .wi-head .ic { width: 22px; height: 22px; }
.pc-ideas .ic { width: 15px; height: 15px; }
.dock-ico .gicon { width: 18px; height: 18px; }
.lm-ic .ic, #li-clear-fab .ic { width: 18px; height: 18px; }
#li-clear-fab .ic { margin-right: 6px; vertical-align: -3px; }
.hub-tile i .ic, .hub-ill .ic { width: 24px; height: 24px; }
.hub-ill .ic { width: 40px; height: 40px; color: var(--muted); }
/* 👪 egyedül: narancs „＋ Meghívás” pirula (2026-10-31, haztartas-bemutato-javaslat.html) */
.hh-pill.hb-alone { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1.5px var(--brand) !important; }
.hh-pill.hb-alone .tk-av.hb-add { background: var(--card); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 2px var(--accent-soft); }
.hh-pill .tk-av.hb-add .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.hh-pill.hb-alone .hb-t small { color: var(--accent); font-weight: 700; }
/* „Így nézne ki ketten” */
/* (a lap osztálya „hb-two” — a „hb-alone” a felső sáv pirulájáé, 2026-10-31: az ütközés egymás alá tette a köröket) */
.hb-two { display: flex; flex-direction: column; gap: 10px; }
.hb-h { font: 800 var(--fs-title, 26px)/1.15 Montserrat, Inter, sans-serif; margin: 4px 2px 0; }
.hb-s { margin: -4px 2px 4px; }
.hb-card { padding: 12px 14px !important; display: flex; flex-direction: column; gap: 2px; }
.hb-k { display: flex; justify-content: space-between; gap: 10px; font: 800 var(--fs-label, 10.5px) Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hb-k span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hb-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body, 15px); padding: 5px 0; }
.hb-row .tk-av { width: 24px; height: 24px; font-size: .62rem; flex: none; }
.hb-q { margin-left: auto; font-size: var(--fs-small, 12px); color: var(--muted); text-align: right; }
.hb-ghost { opacity: .6; }
.hb-ghost-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #3A7BE0; }
.hb-new { border-radius: 10px; background: color-mix(in srgb, #3A7BE0 8%, transparent); padding: 5px 8px; margin: 2px -8px; opacity: 1; }
.hb-new .hb-q { color: #2457B5; font-weight: 600; }
.hb-note { display: flex; gap: 8px; align-items: center; font-size: var(--fs-small, 12px); color: color-mix(in srgb, #2457B5 80%, var(--text)); background: color-mix(in srgb, #3A7BE0 11%, var(--card)); border-radius: 10px; padding: 7px 10px; margin-top: 6px; }
.hb-note .ic { width: 16px; height: 16px; flex: none; }
.hb-priv { display: flex; gap: 8px; align-items: center; margin: 2px 4px; }
.hb-priv .ic { width: 16px; height: 16px; flex: none; }
.hb-two .hub-inv { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hb-two .hub-inv .ic { width: 18px; height: 18px; stroke-width: 2; }
.hb-join { text-align: center; margin: 0; }
/* a Ma oldalon: „Egyedül főzöl?” és „… csatlakozott!” (a kérdőív kártyájának mintájára) */
.ma-wz.hb-joined { box-shadow: inset 0 0 0 1.5px #3A7BE0; }
.ma-wz.hb-joined .ma-wz-ic { background: color-mix(in srgb, #3A7BE0 12%, var(--card)); color: #2457B5; }
.ma-wz.hb-joined .ma-wz-b { justify-content: flex-end; }
.hb-steps { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hb-steps button { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--bg); padding: 8px 10px; font: 600 var(--fs-small, 12px)/1.3 Inter, sans-serif; font-size: .88rem; color: var(--text); cursor: pointer; }
.hb-steps i { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font: 800 .74rem Montserrat, sans-serif; font-style: normal; }
.hb-steps em { margin-left: auto; font-style: normal; color: var(--muted); }
.ma-wz-b .hb-no { color: var(--muted); }
/* 👆 (2026-10-31, Andras: a PeliCook logóra koppintva szürke háttér villant) az iPhone saját szürke koppintás-kiemelése
   mindenhol ki — öröklődik, így minden linkre és gombra érvényes; a gombok saját :active visszajelzése marad */
html { -webkit-tap-highlight-color: transparent; }
.home-link { transition: transform .12s ease; }
.home-link:active { transform: scale(.94); }
/* 🔒 hozzájárulási lap (2026-10-31, account.js consentGate) — teljes képernyő, minden fölött, belépés után */
.cg { position: fixed; inset: 0; z-index: 280; background: var(--bg); overflow-y: auto; display: flex; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); transition: opacity .2s; }
.cg.closing { opacity: 0; }
.cg-in { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 12px; }
.cg-logo { width: 44px; height: 44px; border-radius: 12px; }
.cg h1 { font: 800 var(--fs-title)/1.15 Montserrat, Inter, sans-serif; margin: 4px 0 0; }
.cg-lead { color: var(--muted); margin: 0; }
.cg-pts { list-style: none; margin: 4px 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.cg-pts li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); line-height: 1.4; }
.cg-pts .ic { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }
.cg-ck { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; line-height: 1.4; }
.cg-ck input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--btn); }
.cg-ck a { color: var(--accent); font-weight: 700; }
.cg-go { min-height: 50px; margin-top: 4px; }
.cg-go:disabled { opacity: .45; }
.cg-msg { color: var(--warn); margin: 0; }
.cg-out { align-self: center; color: var(--muted); }
/* Én → Adatvédelem */
.pv-card { display: flex; flex-direction: column; gap: 8px; }
.pv-row { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.pv-row:last-of-type { border-bottom: 0; }
.pv-row .ic { width: 20px; height: 20px; color: var(--accent); }
.pv-row span { flex: 1; }
.pv-row i { font-style: normal; color: var(--muted); }
.pv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* 🧪 próbafiók (2026-10-31): „Próba” jelvény a felső sávban a logó mellett, koppintva a vissza / újrakezdés lap */
.demo-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 11px 0 9px !important; border: 0; border-radius: 10px !important;
  background: #2E2A26 !important; color: #FFE8B8 !important; font: 800 .78rem Montserrat, Inter, sans-serif; letter-spacing: .02em; cursor: pointer; flex: none; }
.demo-chip .ic { width: 16px; height: 16px; stroke-width: 2; }
@media (min-width: 1000px) { .demo-chip { margin: 8px 0 0; align-self: flex-start; } }
@media (max-width: 440px) { html.demo-on header.top .home-link > span { display: none; } .demo-chip { padding: 0 9px 0 7px !important; } }
.demo-sheet h3 { display: flex; align-items: center; gap: 8px; }
.demo-sheet h3 .ic { width: 22px; height: 22px; color: var(--accent); }
.demo-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.demo-acts button { min-height: 46px; }
/* 🧺 a „Most” kártyán: „Mit főzzek abból, ami itthon van?” (üres napon / délután üres vacsoránál) */
.mn-pantry { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 12px; border: 0; border-radius: 14px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 .9rem/1.3 Inter, sans-serif; text-align: left; cursor: pointer; }
.mn-pantry .ic { width: 20px; height: 20px; flex: none; color: var(--accent); }
.mn-pantry span { flex: 1; min-width: 0; }
.mn-pantry i { font-style: normal; color: var(--muted); }
.mn-done .mn-pantry { margin-top: 12px; }
.hub-set .ic { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.rc-allergy > .ic { width: 20px; height: 20px; flex: none; color: var(--warn); }
.rt-ph-ic .ic { width: 22px; height: 22px; }
.tk-kic .ic { width: 22px; height: 22px; }
.tk-rand .ic, [data-tk="mplan"] .ic, .ai-pick .ic { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.rf-imp-ic .ic { width: 22px; height: 22px; color: var(--ai); }
button > .ic { flex: none; }
.plan-card .primary .ic { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
/* (2026-10-27, Andras: „a betervezés gomb is kapszula”) teljes szélességű, lekerekített sarkú gomb, mint a lap többi gombja */
.plan-card { flex-direction: column; align-items: stretch; }
.plan-card-t { flex: none; }
.plan-card .primary { width: 100%; min-height: 48px; border-radius: 14px !important; display: flex; align-items: center; justify-content: center; gap: 8px; }
.plan-card .primary .ic { margin-right: 0; }
.hw-l { display: inline-flex; align-items: center; gap: 4px; }
.hw-l > .ic { width: 14px; height: 14px; color: var(--muted); flex: none; }

/* ✨ Prémium „Részletes beállítások” (2026-10-27, Andras: „még a régi designt felemlegető kinézet”) — kapszulák és keretes
   dobozok helyett a Szűrők lap nyelve: kártya, sorok, kerek pipa, kapcsoló; a mező a sor jobb szélén */
#pf-details { max-width: 640px; }
#pf-details .rf-card { margin-top: 0; }
#pf-details .rf-l:first-child { margin-top: 4px; }
.pfx-gap { margin-top: 12px; }
.pfx-line, .pfx-stack, .pfx-sub, .pfx-note, .pfx-opt { border-bottom: 1px solid var(--line); }
.pfx-line { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; font-weight: 600; }
.pfx-line > span { flex: 1; min-width: 0; }
.pfx-line small, .pfx-stack small, .pfx-sub small, .pfx-opt small { display: block; font-weight: 500; font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }
.pfx-line input, .pfx-line select { flex: 0 1 46%; width: 46%; min-width: 0; min-height: 40px; text-align: right; border: 0 !important; background-color: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 16px; font-weight: 600; color: var(--text); }
.pfx-line select { text-align-last: right; padding-right: 22px !important; }
.pfx-line select, .pfx-stack select { background-position: 100% 50% !important; text-overflow: ellipsis; }
.pfx-line input::placeholder { font-weight: 500; }
.pfx-line em { flex: none; font-style: normal; color: var(--muted); font-weight: 500; margin-left: -4px; }
.pfx-val { font-weight: 700; flex: none; }
.pfx-stack { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.pfx-stack > span { font-size: var(--fs-small); color: var(--muted); font-weight: 700; }
.pfx-stack select, .pfx-stack input { width: 100%; min-height: 40px; border: 0 !important; background-color: transparent !important; box-shadow: none !important; padding: 0 24px 0 0 !important; font-size: 16px; font-weight: 600; color: var(--text); }
.pfx-stack input::placeholder { font-weight: 500; }
.pfx-sub { padding: 12px 0; }
.pfx-sub > b { display: block; }
.pfx-gap6 { margin-top: 8px; }
.pfx-note { margin: 0; padding: 12px 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.pfx-foot { margin: 8px 2px 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.pfx-cks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 4px; }
.rf-card > .pfx-cks { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pfx-ck { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; cursor: pointer; font-size: var(--fs-body); line-height: 1.25; min-width: 0; }
.pfx-ck > span { min-width: 0; }
.pfx-ck input, .pfx-opt input, .pfx-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pfx-ck:has(input:checked) .rf-ck, .pfx-opt:has(input:checked) .rf-ck { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.pfx-ck:has(input:checked) > span, .pfx-opt:has(input:checked) > span { font-weight: 700; }
.pf-allergy .pfx-ck:has(input:checked) .rf-ck { background: var(--warn); color: #fff; }
.pfx-ck:has(input:focus-visible) .rf-ck, .pfx-opt:has(input:focus-visible) .rf-ck { outline: 2px solid var(--accent); outline-offset: 2px; }
#pf-details .rf-card.pf-allergy { border: 0; margin: 0; padding: 0 14px; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, var(--line)); }
.pfx-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; cursor: pointer; font-weight: 600; }
.pfx-opt > span { flex: 1; min-width: 0; }
.pfx-opt.off { opacity: .5; cursor: default; }
.pfx-seg { display: flex; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 3px; margin: 10px 0; }
.pfx-seg label { position: relative; flex: 1; display: grid; place-items: center; min-height: 36px; border-radius: 9px; font-size: var(--fs-small); font-weight: 700; color: var(--muted); cursor: pointer; }
.pfx-seg label:has(input:checked) { background: var(--btn); color: var(--btn-ink); }
.pfx-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.pfx-nums label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--muted); font-weight: 700; }
.pfx-nums input { width: 100%; font-size: 16px; }
#pf-details .pf-result { margin-top: 0; }
#pf-details .pf-card, #pf-details .pf-chain { background: var(--card); border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line) !important; }
#pf-details .pf-card > p { font: 500 var(--fs-body)/1.45 var(--font); color: var(--text); }
#pf-details .pf-card > p.small, #pf-details .pf-card > p.muted { font-size: var(--fs-small); color: var(--muted); }
#pf-details .pf-result > p.muted.small { margin: 10px 2px 0; }
#pf-details .pf-result > .pf-lbl:first-child, #pf-details .pf-result > .rf-card:first-child + .pf-lbl { margin-top: 16px; }
@media (max-width: 340px) { .pfx-cks { grid-template-columns: 1fr; } }
/* ⚖️ kezdősúly → most → cél (2026-10-27) */
.pf-prog { margin: 4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pf-prog-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-prog-row span { display: flex; flex-direction: column; min-width: 0; }
.pf-prog-row span:nth-child(2) { text-align: center; } .pf-prog-row span:last-child { text-align: right; }
.pf-prog-row small { font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-prog-row b { font: 800 var(--fs-sub) var(--font-head); font-variant-numeric: tabular-nums; }
.pf-prog-bar { height: 8px; margin: 10px 0 6px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pf-prog-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); transition: width .5s var(--ease-out, ease); }
.pf-prog-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }

/* 🌙 Sötét mód javításai (2026-11-02, teljes átnézés): sötétben a narancs (--accent) és a zöld világos, ezért a rajtuk lévő
   fehér betű alig látszott (mai nap, kijelölt nap, szűrő-szám, ✓ a Betervezésben, AI-jelvény a narancs gombon);
   és néhány címke sötétben is sötét színű maradt (allergén a hozzávalónál, „közben”, a Közösen kék sora) */
:root[data-theme="dark"] .hw-h.on, :root[data-theme="dark"] .hw-h.on b, :root[data-theme="dark"] .te-day.on, :root[data-theme="dark"] .te-day.on *,
:root[data-theme="dark"] .rc-fbtn i, :root[data-theme="dark"] .pl-k.same { color: #17130F; }
:root[data-theme="dark"] #rec-lcount { color: #fff; } /* (a 💞 gomb száma rózsaszín alapon — ott a fehér marad) */
:root[data-theme="dark"] button.primary .ai-badge, :root[data-theme="dark"] .primary .ai-badge { color: #17130F; background: rgba(23, 19, 15, .14); }
:root[data-theme="dark"] .ing-alg { color: #B4BFB8; }
:root[data-theme="dark"] .gpar { color: #9BD0EE; }
:root[data-theme="dark"] .hb-new .hb-q { color: #9DBDF7; }

/* 📖 Szójegyzék (2026-11-02, glossary.js): a ritkább konyhai szó pontozottan aláhúzva, rákoppintva kis buborék (`.gl-pop`) */
.gl-w { cursor: help; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--accent) 80%, transparent); text-underline-offset: 3px; text-decoration-thickness: 2px;
  border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.gl-w:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf .gl-w { text-decoration-color: rgba(255,255,255,.6); }
.gl-pop { position: fixed; z-index: 80; max-width: min(300px, calc(100vw - 20px)); padding: 10px 12px; border-radius: 14px; background: var(--card); color: var(--text);
  box-shadow: 0 10px 30px rgba(23, 19, 15, .22), inset 0 0 0 1px var(--line); font-size: .86rem; line-height: 1.4;
  opacity: 0; transform: translateY(6px) scale(.86); transform-origin: var(--ax, 50%) 100%;
  transition: opacity .2s var(--ease-out, ease), transform .32s var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)); }
.gl-pop.down { transform: translateY(-6px) scale(.86); transform-origin: var(--ax, 50%) 0; }
.gl-pop.in { opacity: 1; transform: none; }
.gl-pop.out { opacity: 0; transform: scale(.94); transition: opacity .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .gl-pop, .gl-pop.down { transform: none; transition: opacity .12s; } }
.gl-pop b { display: block; margin-bottom: 2px; font: 800 .9rem var(--font-head); }
/* (2026-11-02, Andras: beleolvadt a környezetébe) jól látható narancsos keret, a nyílon is */
.gl-pop { --gl-bd: color-mix(in srgb, var(--accent) 55%, var(--line)); border: 1.5px solid var(--gl-bd); box-shadow: 0 12px 32px rgba(23, 19, 15, .26); }
.gl-pop::after { content: ''; position: absolute; left: var(--ax, 50%); width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border: 1.5px solid var(--gl-bd); }
.gl-pop.up::after { bottom: -7.5px; border-top: 0; border-left: 0; }
.gl-pop.down::after { top: -7.5px; border-bottom: 0; border-right: 0; }
.gl-pop.dark { --gl-bd: rgba(255, 196, 120, .55); background: #2E2721; color: rgba(255,255,255,.85); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.gl-pop.dark b { color: #fff; }

/* 🔥 Sütő-kártya (2026-11-02, ovenmode.js): a sütő gombján lévő jel + hőfok, alatta a másik mód hőfoka */
.ov-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ov-main, .ov-alt { display: inline-flex; align-items: center; gap: 10px; }
.ov-main .ov-ic { width: 34px; height: 34px; flex: none; }
.ov-alt .ov-ic { flex: none; }
.ov-main b { display: block; font: 800 var(--fs-sub) var(--font-head); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-main small { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ov-alt { gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ov-alt .ov-ic { width: 20px; height: 20px; }
.cf .ov-card.cf-oven { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); margin: 14px 0 6px; }
.cf .ov-card.cf-oven .ov-ic, .cf .ov-card.cf-oven b { color: #fff; }
.cf .ov-card.cf-oven small, .cf .ov-card.cf-oven .ov-alt { color: rgba(255,255,255,.72); }
/* 🔥 Lángerősség-kártya (2026-11-03, heat.js): láng-ikon, név, „a gombon kb. N a 9-ből”, 5 oszlopos jel */
.ht-card { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ht-row { display: flex; align-items: center; gap: 10px; }
.ht-row.ht-then { padding-left: 44px; }
.ht-ic { width: 34px; height: 34px; flex: none; color: var(--accent); }
.ht-t { flex: 1; min-width: 0; }
.ht-t b { display: block; font: 800 var(--fs-body) var(--font-head); line-height: 1.2; }
.ht-t small { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.knob { width: 36px; height: 36px; flex: none; margin-left: auto; }
.knob circle { fill: var(--card); stroke: var(--text); stroke-width: 1.6; }
.knob path { stroke: var(--line); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.knob path.on { stroke: var(--brand); }
.knob .knob-p { stroke: var(--text); stroke-width: 2.2; }
.ov-main { width: 100%; }
.dn-th { color: var(--muted); }
/* ⊘ nincs a boltban */
.li-act-miss .li-ic { background: color-mix(in srgb, #2F7BD6 16%, var(--card)); color: #1F5FAD; }
.li-miss { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, #2F7BD6 14%, var(--card)); color: #1F5FAD; font-size: var(--fs-label); font-weight: 700; }
:root[data-theme="dark"] .li-miss, :root[data-theme="dark"] .li-act-miss .li-ic { color: #9CC6F5; }
.ms-sheet h3 { margin: 0 0 8px; }
.ms-row { display: block; width: 100%; padding: 11px 14px; min-height: 44px; border: 0; border-top: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; }
.rf-card > .ms-row:first-child { border-top: 0; }
.ms-row b { display: block; font-weight: 700; font-size: var(--fs-body); }
.ms-row small, .ms-use small { display: block; color: var(--muted); font-size: var(--fs-small); }
.ms-solo { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; }
.ms-own { display: flex; gap: 8px; margin-top: 10px; }
.ms-own input { flex: 1; min-width: 0; }
.ms-use { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.rf-card > .ms-use:first-child { border-top: 0; }
.ms-use span { min-width: 0; }
.ms-use b { display: block; font-weight: 600; font-size: var(--fs-body); }
.ms-use button { flex: none; min-height: 44px; }
.gtrick { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--bg); font-size: var(--fs-small); } /* (2026-11-07: a régi #F6F4EE sötét módban olvashatatlan volt) */
.gtrick b { font-weight: 800; }
/* 🍳 főzés: összefoglaló + görgethető lépések (2026-11-07, fozes-javaslat.html) */
.cfo-t { margin: 0 0 12px; color: rgba(245, 239, 230, .8); font-size: var(--fs-body); }
.cfo-l { margin: 20px 0 6px; font: 800 var(--fs-sub) var(--font-head); color: #fff; }
.cfo-steps { margin: 0; padding: 0 0 0 22px; font-size: var(--fs-body); line-height: 1.35; color: rgba(245, 239, 230, .88); }
.cfo-steps li { padding: 4px 0; }
.cfo-steps li::marker { color: var(--brand); font-weight: 700; }
.wo-tip { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.cf .wo-tip { color: rgba(255,255,255,.66); }
.cfo-bars { display: grid; gap: 10px; margin: 6px 0 4px; }
.cfo-r { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; font-size: var(--fs-small); }
.cfo-r > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(245, 239, 230, .85); font-weight: 600; }
.cfo-r > em { font-style: normal; color: rgba(245, 239, 230, .6); font-variant-numeric: tabular-nums; }
.cfo-tr { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.cfo-tr i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--brand); }
.cfo-tr i.rest { background: rgba(255, 255, 255, .32); }
.cf-chips { display: flex; gap: 2px; flex: none; margin: 2px -16px 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12); }
.cf-chips::-webkit-scrollbar { display: none; }
/* (2026-11-07, Andras: nem szeretjük a kapszulát) sima szöveges fülek, az aktuális alatt narancs vonal */
.cf-chip { flex: none; max-width: 200px; min-height: 44px; padding: 0 10px !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: rgba(245, 239, 230, .72) !important; box-shadow: none !important; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-chip.done { color: rgba(245, 239, 230, .6) !important; }
.cf .dn-card.cf-done .dn-th { color: rgba(255, 255, 255, .72); }
.cf-chip { transition: color .3s ease, box-shadow .3s ease; }
.cf-chip.on { color: #fff !important; font-weight: 800; box-shadow: inset 0 -2px 0 var(--brand) !important; }
.cf-list { position: relative; padding: 2px 2px 40vh; scroll-behavior: auto; }
.cfs { display: block; width: 100%; margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); text-align: left; }
.cfs.on { padding: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px var(--brand); }
/* (2026-11-07, Andras: túl nagyok voltak a betűk az aktív lépésnél) */
.cfs.on h2 { margin: 4px 0 8px; font-size: 1.2rem; line-height: 1.2; }
.cfs.on .cf-text { font-size: 1rem; line-height: 1.45; }
.cfs.on .cf-sub, .cfs.on .cf-sub > span { font-size: var(--fs-body); font-weight: 600; }
.cfs.on .cf-sub { min-height: 46px; }
.cfs.on .cf-for { font-size: 14px; font-weight: 600; }
.cfs.on .cf-taste, .cfs.on .cf-note, .cfs.on .cf-amt { font-size: 14px; }
.cfs.mini { border: 0 !important; box-shadow: none !important; background: rgba(255, 255, 255, .05) !important; color: #F5EFE6 !important; font-weight: 400; min-height: 44px; }
.cfs.mini small { display: block; font-size: var(--fs-label); font-weight: 700; color: rgba(245, 239, 230, .55); }
.cfs.mini b { display: block; font: 700 var(--fs-body)/1.3 var(--font-head); }
.cfs.mini span { display: -webkit-box; margin-top: 3px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-small); line-height: 1.4; color: rgba(245, 239, 230, .65); }
.cfs.mini.done { opacity: .55; }
.cf-mw { display: flex !important; gap: 10px; align-items: flex-start; width: 100%; margin: 12px 0 0; padding: 10px 12px !important; border: 0 !important; border-radius: 12px !important; background: rgba(var(--brand-rgb), .16) !important; color: var(--cf-hi2) !important; box-shadow: none !important; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; text-align: left; }
.cf-mw .ic { width: 18px; height: 18px; flex: none; color: var(--brand); }
.fp-ing { margin-bottom: 10px; }
.fp-ing input { width: 100%; box-sizing: border-box; }
/* ⚖️ kész étel lemérése */
.wo { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.wo-l { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: var(--fs-small); }
.wo-in { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 600; }
.wo-in input { width: 92px; text-align: right; }
.wo-out { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }
.wo-out b { color: var(--text); }
.cf .wo { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #fff; }
.cf .wo-out { color: rgba(255,255,255,.72); }
.cf .wo-out b { color: #fff; }
.food-note { margin-top: 10px; }
.food-note input { width: 100%; box-sizing: border-box; }
/* ⏸ feladat szüneteltetése */
.te-pause { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 12px; padding: 12px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font-size: var(--fs-small); text-align: left; }
.te-pause span { color: var(--muted); }
.te-pause b { font-weight: 700; }
/* ↶ visszavonás-lista */
.ul-sheet h3 { margin: 0 0 10px; }
.ul-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ul-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 52vh; overflow-y: auto; }
.ul-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.ul-row:first-child { border-top: 0; }
.ul-t { flex: 1; min-width: 0; }
.ul-t b { display: block; font-size: var(--fs-body); font-weight: 600; }
.ul-t small { display: block; color: var(--muted); font-size: var(--fs-small); }
.ul-go { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font-weight: 700; font-size: var(--fs-small); }
.gtimer-h { margin: 8px 0 0; font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
/* 🌡 „Átsült? Így nézd meg” (2026-11-03, doneness.js): jelek ránézésre + maghőmérséklet, alatta mit tegyél, ha még nem jó */
.dn-card { margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 45%, var(--line)); }
.dn-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.dn-ic { width: 30px; height: 30px; flex: none; color: var(--warn); }
.dn-h b { display: block; font: 800 var(--fs-body) var(--font-head); line-height: 1.2; }
.dn-h small { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.dn-k ul { margin: 0; padding-left: 18px; font-size: var(--fs-small); }
.dn-k li { margin: 2px 0; }
.dn-kt { display: block; font-size: var(--fs-small); margin-top: 6px; }
.dn-t { margin: 4px 0 0; font-size: var(--fs-small); }
.dn-t b { font-variant-numeric: tabular-nums; }
.dn-no { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }
.cf .dn-card.cf-done { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(240, 122, 122, .55); margin: 14px 0 6px; color: #fff; }
.cf .dn-card.cf-done .dn-ic { color: #F07A7A; }
.cf .dn-card.cf-done small, .cf .dn-card.cf-done .dn-no { color: rgba(255,255,255,.72); }
.cf .dn-card.cf-done .dn-k ul, .cf .dn-card.cf-done .dn-t { font-size: var(--fs-body); }
/* 🔢 átszámolt mennyiség a lépés szövegében (guide.js scaleStepText) + „N adagra méred ki” a kimérés tetején */
.gsc { font-weight: 800; color: var(--accent); }
.cf .gsc { color: var(--brand); }
.gfor { margin: 6px 0 4px; font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
.cf-for { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--brand-rgb), .14); color: #fff; font-weight: 700; }
.cf-for .ic { width: 20px; height: 20px; flex: none; color: var(--brand); margin-top: 1px; }
/* a lépés hozzávalóinak mennyisége („Ennyi kell: …”, guide.js stepAmounts) */
.gamt { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--peach-soft); font-size: var(--fs-small); font-weight: 600; }
.gamt span { color: var(--accent); font-weight: 800; margin-right: 4px; }
.cf .ht-card.cf-heat { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); margin: 14px 0 6px; }
.cf .ht-card.cf-heat b { color: #fff; }
.cf .ht-card.cf-heat small { color: rgba(255,255,255,.72); }
.cf .ht-card.cf-heat .ht-ic { color: var(--brand); }
.cf .knob circle { fill: transparent; stroke: #fff; }
.cf .knob path { stroke: rgba(255,255,255,.25); }
.cf .knob path.on { stroke: var(--brand); }
.cf .knob .knob-p { stroke: #fff; }
.cf .gtimer-h { color: var(--brand); }
.cf-amt { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(var(--brand-rgb), .14); color: #fff; font-size: var(--fs-body); }
.cf-amt .ic { width: 20px; height: 20px; flex: none; color: var(--brand); margin-top: 2px; }
.cf-amt b { color: var(--brand); margin-right: 4px; }

.pf-prog-t .link { min-height: 32px; padding: 0 !important; font-size: var(--fs-small); font-weight: 700; color: var(--accent); background: none !important; border: 0 !important; }
.pfx-ath { margin: 8px 0 0; color: var(--text); }
/* 🏃 fogyási tempó (2026-10-27): a kérdőívben egy oszlopban (hosszabb leírás), az Adataimban egy sor a haladás alatt */
.wz-tiles.wz-tempo { grid-template-columns: 1fr; }
.wz-hnote.wz-warn { color: var(--warn); }
/* ↓ „Lejjebb még N lehetőség” a Tovább fölött, amíg a lap alja nem látszik (wizard.js checkMore, 2026-10-27) */
.wz > .wz-foot { position: relative; }
.wz.more-below > .wz-foot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 92%, transparent)); }
.wz-morehint { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 2; transform: translateX(-50%); display: inline-flex !important; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; white-space: nowrap;
  background: var(--card) !important; color: var(--text); font-size: var(--fs-small); font-weight: 700; box-shadow: 0 4px 16px rgba(31, 26, 20, .16), inset 0 0 0 1px var(--line) !important;
  animation: mhIn .25s var(--ease-out, ease) both; }
.wz-morehint svg { width: 16px; height: 16px; animation: mhBob 1.6s ease-in-out infinite; }
@keyframes mhIn { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes mhBob { 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .wz-morehint, .wz-morehint svg { animation: none; } }
.wz-note.wz-warnbox { margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); color: var(--text); }
.pf-tempo-l { margin: 0 0 10px; color: var(--text); }
/* ✨ (2026-10-28, átnézés — Andras: „igen, mindet”) a maradék kapszula-gombok kerekített négyszögek, a Feladataim két színes
   buboréka semleges: a szín csak a cím ikonjában marad (saját = narancs, közös = kék) */
.en2-pill { border-radius: 10px !important; min-height: 38px; }
.w-rec, .w-test { border-radius: 12px !important; }
.rc-pill { border-radius: 12px !important; }
.te2, .te2.te2-shared { background: transparent; padding: 0; border-radius: 0; }
.te2 + .te2 { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.te2-title > .ic { color: var(--accent); }
.te2-shared .te2-title > .ic { color: var(--sky, #2b6cb0); }
.te2-card { box-shadow: inset 0 0 0 1px var(--line) !important; }
.te2 .te2-add, .te2-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px !important; border-radius: 12px !important;
  background: var(--card) !important; color: var(--text); box-shadow: inset 0 0 0 1px var(--line) !important; font-weight: 700; }
/* 🍽 „Mit ennél?” — a keresés tetején (2026-10-28) */
/* a keresőmezőben csendes „AI” jel: itt AI-jal is lehet keresni — gépeléskor eltűnik (ott a ✕ és a „Mit ennél?” kártya) */
.rc-aihint { flex: none; pointer-events: none; }
.rc-search input:not(:placeholder-shown) ~ .rc-aihint, .rc-search.no-ai .rc-aihint { display: none; }
.rc-want { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 28%, var(--line)); }
.rc-want-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ai-soft); color: var(--ai); }
.rc-want-ic .ic { width: 22px; height: 22px; }
.rc-want-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-want-t b { overflow-wrap: anywhere; }
.rc-want-t small { font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }
.rc-want button { flex: none; min-height: 44px; padding: 0 12px !important; border-radius: 12px !important; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rc-want button:not(.primary) { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; }
@media (max-width: 420px) { .rc-want { flex-wrap: wrap; } .rc-want button { width: 100%; justify-content: center; } }
/* ✨ „Új recept” űrlap a prémium sor-nyelven (2026-10-28, Eszter: „nagyon retek”) — csak a .rf2 alatt */
.rf2 .rf-card { padding: 2px 14px 12px; gap: 0; }
.rf2 .rf-lbl { margin: 12px 0 4px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rf2 .rf-lbl span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rf2-name input { width: 100%; min-height: 52px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px 0 8px !important;
  font: 800 1.35rem var(--font-head); color: var(--text); }
.rf2-name input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); font-weight: 700; }
.rf2 .rf-seg { margin: 4px 0 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
.rf2 .rf-seg button.on { background: var(--btn) !important; color: var(--btn-ink); box-shadow: none; }
.rf2-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0; border-top: 1px solid var(--line); font-weight: 600; }
.rf2-row > span:first-child { flex: 1; min-width: 0; }
.rf2-row small { display: block; font-weight: 500; font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }
.rf2-row select, .rf2-note input { flex: 0 1 50%; min-width: 0; border: 0 !important; background-color: transparent !important; box-shadow: none !important; font-size: 16px; font-weight: 600; color: var(--text); }
.rf2-row select { text-align: right; text-align-last: right; padding: 0 22px 0 0 !important; background-position: 100% 50% !important; }
.rf2-note input { text-align: right; padding: 0 !important; }
.rf2 .rf-step button { background: var(--bg) !important; color: var(--text); box-shadow: inset 0 0 0 1px var(--line) !important; font-size: 1.1rem; }
.rf2 .rf-add { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.rf2 .rf-add button { border-radius: 10px !important; }
.rf2-link { display: inline-flex !important; align-items: center; gap: 6px; }
.rf2-link .ic { width: 16px; height: 16px; flex: none; }
.rf2 .rf-nut label { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; padding: 8px 4px; }
.rf2 .rf-nut input { font: 800 1.15rem var(--font-head) !important; }
.rf2 .rf-acts .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px !important; }
.rf2 .rf-acts .primary .ic { width: 19px; height: 19px; }
.rf2 .rf-st-tm { display: inline-flex; align-items: center; gap: 4px; }
.rf2 .rf-st-tm .ic { width: 13px; height: 13px; }
.rf2 .rf-imp { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 22%, transparent); }
/* 🗓 erősítés napjai (2026-10-27) */
.pf-sdays .fd-sh-days { margin-top: 8px; }
.pf-sdays small.pf-swarn { color: var(--warn); font-weight: 600; }
.wz-card.wz-sdays .pfx-sub { border-bottom: 0; padding: 0; }
.wz-card.wz-sdays { margin-top: 10px; }
/* ✨ Terv: „Töltsd ki a hetet” kiemelt gomb a fejléc alatt (2026-10-27); az Előzmények a ⋯ menüben */
.pc-head .pc-ic.pc-hide { display: none; }
.pc-fillbig { display: flex !important; align-items: center; gap: 12px; width: 100%; height: 64px; min-height: 64px; margin: 12px 0 2px; padding: 10px 14px !important; text-align: left;
  border: 0 !important; border-radius: 18px !important; background: var(--btn) !important; color: var(--btn-ink) !important; box-shadow: none !important; }
.pc-fillbig:active { transform: scale(.985); }
.pc-fb-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--brand); color: #1d1a17; }
.pc-fb-ic .ic { width: 22px; height: 22px; stroke-width: 1.9; }
.pc-fb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-fb-t b, .pc-fb-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* egy-egy sor: a gomb mindig ugyanakkora */
.pc-fb-t b { font: 800 var(--fs-body) var(--font-head); }
.pc-fb-t small { font-size: var(--fs-small); opacity: .88; line-height: 1.3; }
.pc-fb-go { flex: none; font-size: 1.3rem; opacity: .6; }
:root[data-theme="dark"] .pc-fb-ic { background: rgba(0, 0, 0, .2); color: var(--btn-ink); } /* sötétben a gomb maga narancs — az ikon-négyzet ne olvadjon bele */
.pc-fillbig:disabled { background: var(--bg) !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--line) !important; opacity: 1; cursor: default; transform: none; }
.pc-fillbig:disabled .pc-fb-ic { background: var(--line); color: var(--muted); }
.pc-fillbig:disabled .pc-fb-go { visibility: hidden; }
/* elmúlt nap üres helye: csak tájékoztat (nincs Választok / 🎲 / ötlet), halványan; a fejléc magassága ugyanannyi (2026-10-27) */
.pd-slot.past { border-color: color-mix(in srgb, var(--muted) 30%, transparent) !important; background: transparent !important; }
.pd-slot.past .pd-slot-h { min-height: 44px; }
.pd-slot.past .pd-slot-e { color: var(--muted); font-weight: 600; }
.pc-empty.past .pc-empty-img { cursor: default; opacity: .65; }
.pc-empty.past .pc-big-n { color: var(--muted); font-weight: 600; }
.pfx-athtg { margin-top: 6px; border-top: 1px solid var(--line); border-bottom: 0 !important; }

/* 💡 Tippek (tipbook.js) */
.tb { display: flex; flex-direction: column; gap: 10px; }
.tb-lead { margin: 0; font-size: var(--fs-body); color: var(--muted); }
.tb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tb h3 { margin: 0; font-size: var(--fs-sub); }
.tb-h2 { margin-top: 12px !important; }
.tb-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font-weight: 700; font-size: var(--fs-small); }
.tb-add .ic { width: 16px; height: 16px; }
.tb-empty { margin: 0; }
.tb-own .en2-t b { font-weight: 600; white-space: normal; }
.tb-card { padding: 14px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tb-card h4 { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 700; }
.tb-card p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text); }
.tb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tb-a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 600; font-size: var(--fs-small); }
.tb-a .ic { width: 16px; height: 16px; }
.tb-a { padding-left: 0; color: var(--accent); font-weight: 700; }
.tb-card .tb-where { display: block; margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }
button.tb-where { min-height: 44px; margin: 0 !important; padding: 0; border: 0; background: transparent; text-align: left; font-weight: 600; }
.tb-a:active { background: var(--line); }
.tb-l { display: block; margin: 10px 0 4px; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.tb-sheet textarea { width: 100%; box-sizing: border-box; resize: none; line-height: 1.4; }
.tb-sheet select { width: 100%; }
.tb-in { margin: 10px 0 0; }
.tb-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tb-btns button { min-height: 48px; }
.tb-del { color: var(--warn) !important; background: transparent !important; border-color: transparent !important; }
.tb-cancel { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; }
.tb-place { display: flex; flex-direction: column; }
.tb-place h3 { margin: 0 0 8px; }
.tb-quote { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.4; }
.tb-search { position: relative; }
.tb-search .ic { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.tb-search input { width: 100%; box-sizing: border-box; padding-left: 38px; }
.tb-list { flex: 1; min-height: 120px; max-height: 42vh; overflow-y: auto; margin-top: 6px; }
.tb-lbl { margin: 12px 0 2px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tb-none { margin: 12px 0; }
.tb-row { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 2px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; color: var(--text) !important; text-align: left; font-weight: 600; font-size: var(--fs-body); }
.tb-row > span { flex: 1; min-width: 0; }
.tb-row small { display: block; font-weight: 500; font-size: var(--fs-small); color: var(--muted); }
.tb-ck { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); color: #17130F; }
.tb-ck .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.tb-row.on .tb-ck { background: var(--brand); box-shadow: none; }
.tb-foot { margin-top: 10px; }
.tb-cost { margin: 0 0 8px; text-align: center; }
.tb-err { margin: 0 0 8px; color: var(--warn); text-align: center; }
.tb-go { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.tb-go button { min-height: 48px; }
.tb-go .primary { flex: 1; }
.gmytip { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--accent-soft); font-size: var(--fs-small); }
.gmytip b { font-weight: 800; color: var(--accent); }
.cf-mytip { margin: 14px 0 0; padding: 12px 14px 6px; border-radius: 16px; background: rgba(var(--brand-rgb), .14); }
.cf-mytip p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cf-hi2); }
.cf-mytip b { color: var(--cf-hi); font-weight: 800; }
.cf-mytip button { min-height: 44px; padding: 0; border: 0; background: transparent; color: rgba(245, 239, 230, .78); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }