/* ===== Tokeny. Mierky: priestor 4 8 12 16 24 32 48 64, písmo 12 14 16 18 20 24 30, váhy 400/500 a 600/700.
   Farby: 3 palety (data-pal: bleda, krem, zelen) × svetlý/tmavý režim (data-mode, nastaví skript v hlavičke).
   Vzhľad: 3 varianty (data-look: clean, cozy, retro), menia len písmo, zaoblenie, okraje a tiene, nie stavbu obrazoviek.
   Texty majú kontrast aspoň 4,5:1 na --bg, --paper aj --chip; --field (okraj polí) 3:1. Generuje scratchpad/gen-theme.py. ===== */
:root[data-pal="bleda"]{--bg:#F5F5F1;--paper:#FFFFFF;--chip:#EDEDE8;--seg:#E6E6E0;--line:#E9E9E4;--field:#949596;--ink:#16181A;--text-2:#45494D;--text-3:#5A5F64;--accent:#1F6F5C;--accent-strong:#1B5F4F;--accent-soft:#E4EEEB;--accent-ink:#FFFFFF;--tomato:#1F6F5C;--mustard:#F2B33D;--note:#FBF1DC;--note-line:rgba(0,0,0,.07);--hero:#1B1D1F;--hero-ink:#FFFFFF;--hero-sub:#B9BDC1;--hero-tile:#2B2E31;--hero-btn:#3C4044;--ok:#2A7347;--ok-soft:#E4F0E8;--ok-bar:#2A7347;--warn:#7A4B00;--warn-soft:#FBF0D6;--warn-bar:#F2B33D;--on-soon:#2A1E00;--bad:#9A3412;--bad-soft:#F7E6DF;--bad-bar:#C2410C;--bad-bar-ink:#FFFFFF;--bar:#16181A;--bar-text:#B9BDC1;--bar-on:#FFFFFF;--bar-on-bg:rgba(255,255,255,.14);--hard:#16181A;--heart:#D0435B}
:root[data-pal="bleda"][data-mode="dark"]{--bg:#121314;--paper:#1C1E20;--chip:#2A2D30;--seg:#2A2D30;--line:#2C2F32;--field:#67696A;--ink:#ECEDEE;--text-2:#C3C7CB;--text-3:#A3A8AD;--accent:#4DB394;--accent-strong:#66BEA3;--accent-soft:#233431;--accent-ink:#0B1F1A;--tomato:#4DB394;--mustard:#F2B33D;--note:#2E2A1F;--note-line:rgba(255,255,255,.08);--hero:#ECEDEE;--hero-ink:#16181A;--hero-sub:#4A4F54;--hero-tile:#D9DBDC;--hero-btn:#CFD2D4;--ok:#6FCF97;--ok-soft:#1F3329;--ok-bar:#6FCF97;--warn:#F2C66B;--warn-soft:#3A3020;--warn-bar:#F2B33D;--on-soon:#2A1E00;--bad:#F59A7A;--bad-soft:#44261B;--bad-bar:#C2410C;--bad-bar-ink:#FFFFFF;--bar:#1C1E20;--bar-text:#A3A8AD;--bar-on:#FFFFFF;--bar-on-bg:rgba(255,255,255,.10);--hard:#4F555B;--heart:#F06A80}
:root,:root[data-pal="krem"]{--bg:#F3ECDF;--paper:#FFFBF3;--chip:#EFE5D3;--seg:#E8DECB;--line:#EBE0CC;--field:#9B9087;--ink:#3A2A20;--text-2:#55463A;--text-3:#6B5A4C;--accent:#A8472A;--accent-strong:#903D24;--accent-soft:#F5E5DB;--accent-ink:#FFFBF3;--tomato:#A8472A;--mustard:#E8B04A;--note:#F7E7B8;--note-line:rgba(58,42,32,.09);--hero:#3A2A20;--hero-ink:#FFFBF3;--hero-sub:#D7C8B6;--hero-tile:#4A382C;--hero-btn:#5C4839;--ok:#5B6630;--ok-soft:#E9EBD6;--ok-bar:#5B6630;--warn:#6E4800;--warn-soft:#F7E7B8;--warn-bar:#E8B04A;--on-soon:#2A1E00;--bad:#8E3216;--bad-soft:#F6E3D9;--bad-bar:#B8402A;--bad-bar-ink:#FFFFFF;--bar:#3A2A20;--bar-text:#D7C8B6;--bar-on:#F2C35A;--bar-on-bg:rgba(242,195,90,.16);--hard:#3A2A20;--heart:#B84A2E}
:root[data-pal="krem"][data-mode="dark"],:root:not([data-pal])[data-mode="dark"]{--bg:#1C1713;--paper:#28211B;--chip:#362D25;--seg:#362D25;--line:#3A3129;--field:#736C64;--ink:#F3ECDF;--text-2:#D7C8B6;--text-3:#C2B3A2;--accent:#E07F55;--accent-strong:#E4916D;--accent-soft:#442F24;--accent-ink:#1C1713;--tomato:#E07F55;--mustard:#E8B04A;--note:#3A3020;--note-line:rgba(255,255,255,.08);--hero:#F3ECDF;--hero-ink:#3A2A20;--hero-sub:#6B5A4C;--hero-tile:#E6DCCB;--hero-btn:#D9CDB9;--ok:#B5C17A;--ok-soft:#2A2F1E;--ok-bar:#B5C17A;--warn:#F2C35A;--warn-soft:#3A2F1C;--warn-bar:#E8B04A;--on-soon:#2A1E00;--bad:#F0957A;--bad-soft:#4B281F;--bad-bar:#B8402A;--bad-bar-ink:#FFFFFF;--bar:#28211B;--bar-text:#C2B3A2;--bar-on:#F2C35A;--bar-on-bg:rgba(242,195,90,.14);--hard:#7E4F32;--heart:#E8825C}
:root[data-pal="zelen"]{--bg:#DFE6D6;--paper:#FAFBF6;--chip:#EAEFE2;--seg:#D2DAC6;--line:#E1E8D7;--field:#949094;--ink:#2E2433;--text-2:#4E4453;--text-3:#5F5564;--accent:#C8402B;--accent-strong:#AC3725;--accent-soft:#F4E5DE;--accent-ink:#FFFFFF;--tomato:#C8402B;--mustard:#F2C661;--note:#FFF1BF;--note-line:rgba(46,36,51,.09);--hero:#2E2433;--hero-ink:#FAFBF6;--hero-sub:#C9C1CC;--hero-tile:#3D3243;--hero-btn:#4E4255;--ok:#3C6630;--ok-soft:#E3ECDA;--ok-bar:#3C6630;--warn:#7D5200;--warn-soft:#F8EBC6;--warn-bar:#F2C661;--on-soon:#2A1E00;--bad:#A8341F;--bad-soft:#EFE1DA;--bad-bar:#A8341F;--bad-bar-ink:#FFFFFF;--bar:#2E2433;--bar-text:#C9C1CC;--bar-on:#F2C661;--bar-on-bg:rgba(242,198,97,.16);--hard:#2E2433;--heart:#C8402B}
:root[data-pal="zelen"][data-mode="dark"]{--bg:#171B16;--paper:#21271F;--chip:#2D3429;--seg:#2D3429;--line:#30372D;--field:#6C7168;--ink:#EDEFE5;--text-2:#CAD0BF;--text-3:#B4BCA8;--accent:#E8694F;--accent-strong:#EB7E68;--accent-soft:#3F3126;--accent-ink:#171B16;--tomato:#E8694F;--mustard:#F2C661;--note:#35301C;--note-line:rgba(255,255,255,.08);--hero:#EDEFE5;--hero-ink:#2E2433;--hero-sub:#5F5564;--hero-tile:#DCE2D2;--hero-btn:#CDD4C2;--ok:#9CCB86;--ok-soft:#22301F;--ok-bar:#9CCB86;--warn:#F2C661;--warn-soft:#38321D;--warn-bar:#F2C661;--on-soon:#2A1E00;--bad:#F08A6A;--bad-soft:#412A1F;--bad-bar:#A8341F;--bad-bar-ink:#FFFFFF;--bar:#21271F;--bar-text:#B4BCA8;--bar-on:#F2C661;--bar-on-bg:rgba(242,198,97,.14);--hard:#5E6B4E;--heart:#EE7A62}
:root{
  color-scheme:light;
  --e1:0 1px 2px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.05);
  --e2:0 4px 12px rgba(0,0,0,.08);
  --e3:0 8px 20px rgba(0,0,0,.14);
  --e4:0 12px 28px rgba(0,0,0,.18);
  --e5:0 18px 40px rgba(0,0,0,.26);
  --shadow:var(--e1);
  --nav-h:64px;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  /* vzhľad Útulný (predvolený) */
  --sans:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Young Serif",Georgia,serif;
  --dw:400; --dls:0; --h1:32px; --h2:20px; --tw:600;
  --r:18px; --r-sm:12px; --r-lg:24px; --r-ctl:999px; --r-in:14px; --radius:var(--r);
  --bw:0px; --bc:transparent; --card-sh:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
  --hard3:0 0 0 transparent; --ctl-bg:var(--chip); --seg-bg:var(--seg);
}
:root[data-mode="dark"]{color-scheme:dark;
  --e1:0 1px 3px rgba(0,0,0,.35); --e2:0 4px 10px rgba(0,0,0,.35); --e3:0 8px 18px rgba(0,0,0,.4);
  --e4:0 12px 28px rgba(0,0,0,.45); --e5:0 18px 40px rgba(0,0,0,.5);
  --card-sh:0 1px 2px rgba(0,0,0,.25)}
:root[data-look="clean"]{
  --sans:Onest,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --dw:700; --dls:-.02em; --h1:32px; --h2:18px; --tw:600;
  --r:16px; --r-sm:10px; --r-lg:22px; --r-ctl:999px; --r-in:12px;
  --bw:0px; --bc:transparent; --card-sh:none; --seg-bg:var(--chip);
}
:root[data-look="retro"]{
  --sans:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:Fraunces,Georgia,serif;
  --dw:800; --dls:-.02em; --h1:36px; --h2:21px; --tw:800;
  --r:18px; --r-sm:12px; --r-lg:22px; --r-ctl:12px; --r-in:14px;
  --bw:2px; --bc:var(--ink); --card-sh:4px 4px 0 var(--hard); --hard3:3px 3px 0 var(--hard); --ctl-bg:var(--paper); --seg-bg:var(--paper);
}

/* ===== Základ a platforma ===== */
*{box-sizing:border-box}
html,body{margin:0;overscroll-behavior:none}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-padding-top:72px;scroll-padding-bottom:calc(var(--nav-h) + 16px)}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 24px)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.2;margin:0;letter-spacing:-.01em}
h2{font-size:24px}
h3{font-size:18px}
button,input,select,textarea{font:inherit;color:inherit}
button,a,[role="button"],[role="checkbox"],.item,.tile,.rcard,.chip-btn{touch-action:manipulation}
button,[role="button"],[role="checkbox"],.tabs,.seg,.tog,.chip,.chip-btn,.item,.tile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.rtags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ttag{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--chip);color:var(--text-2);white-space:nowrap}
.ttag.opt{background:transparent;border:1px dashed var(--line);font-weight:500}
.sitepill{align-self:center;margin-left:8px;padding:4px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:600 12px/1.3 var(--sans);cursor:pointer;white-space:nowrap}
.onb-or{display:flex;align-items:center;gap:12px;margin:24px 0 16px;color:var(--text-3);font-size:13px}
.onb-or::before,.onb-or::after{content:"";flex:1;height:1px;background:var(--line)}
.onb h3{margin:0 0 6px}
.wz{max-width:560px;margin:0 auto;padding-bottom:24px}
.wzhead{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin-bottom:8px}
.wzdots{display:flex;gap:6px}.wzdots i{width:28px;height:4px;border-radius:2px;background:var(--line);transition:background-color .3s}.wzdots i.on{background:var(--accent-strong)}
.wzlead{color:var(--text-2);margin-top:8px}
.wzl{font-size:13px;font-weight:600;color:var(--text-3);margin:16px 0 8px}
.wzchips{display:flex;flex-wrap:wrap;gap:8px}
.wzppl{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.wzp{display:flex;gap:8px;align-items:center}.wzp input{flex:1;min-width:0}.wzp select{flex:0 0 auto;width:auto;max-width:48%}
.wzsw{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.wzsw input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--accent-strong)}
.wzsw span{display:flex;flex-direction:column;gap:2px}
.wzcard h3{margin:0}
.wzmore{margin-top:8px}.wzmore summary{cursor:pointer;color:var(--text-3);font-size:14px;padding:6px 0}.wzmore .wzchips{margin-top:4px}
.wzsum p{margin:4px 0}
.wznav{display:flex;justify-content:space-between;gap:12px;margin-top:32px}.wznav .btn.primary{flex:1;max-width:320px;margin-left:auto}
.rcf{font-size:12px;color:var(--warn);margin-top:6px}
.ing.off{opacity:.55}
.rtabs{margin-bottom:4px}
.cfilters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.cfilters::-webkit-scrollbar{display:none}
.cct{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.cct h3{margin:0}
.cdesc{font-size:14px;color:var(--text-2);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cdesc.full{display:block;margin-top:8px;font-size:15px}
.ccard .rmeta b{color:var(--ink);font-weight:600}
.cscore{display:flex;gap:12px;font-size:13px;color:var(--text-3);margin-top:auto}
.cscore .taste{color:var(--tomato);font-weight:600}
.cscore .home.ok{color:var(--ok);font-weight:600}
.rvar{font-size:12px;color:var(--ok)}
.cdiets{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;font-weight:600}
.cdiets .ok{color:var(--ok)}.cdiets .no{color:var(--bad)}
.ttag.dok{background:var(--ok-soft);color:var(--ok)}.ttag.dno{background:var(--bad-soft);color:var(--bad)}
.ttag small{font-weight:500}
.rvars{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rvars .swaps{flex-basis:100%}
.ccount{margin-bottom:0}
.sgh{font-size:14px;font-weight:600;color:var(--text-2);margin:18px 0 8px;display:flex;gap:6px;align-items:center;font-family:var(--sans)}
.sgh .count{color:var(--text-3);font-weight:500}
.tcount{opacity:.6;font-weight:500;margin-left:2px}
.shopby{margin-top:4px;gap:10px}.shopby .linkbtn{font-size:13px;text-decoration:none;color:var(--text-3)}.shopby .linkbtn.on{color:var(--ink);font-weight:600;text-decoration:underline}
.hrow2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.hrow2 .main{flex:1 1 160px;min-width:0}.hrow2 .name{font-weight:600}.hrow2 .meta{font-size:12px;color:var(--text-3)}
.hreason{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}.hreason.thrown{background:var(--bad-soft);color:var(--bad)}.hreason.eaten{background:var(--ok-soft);color:var(--ok)}
.hacts{display:flex;gap:6px;flex-basis:100%;justify-content:flex-end}
.tipline{color:var(--text-2);max-width:40em}
.rwarn div+div{margin-top:4px}.rwarn .tiny{margin-top:6px}
.codein{text-transform:uppercase;letter-spacing:.25em;font-weight:700;text-align:center;font-size:20px}
.codein::placeholder{text-transform:none;letter-spacing:normal;font-weight:400;font-size:16px}
.hhm{list-style:none;padding:0;margin:8px 0 12px;display:flex;flex-direction:column;gap:6px}
.hhm li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--chip);border-radius:var(--r-sm);font-size:14px}
.hhtag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:999px;background:var(--mustard);color:var(--ink)}
.code{font-family:var(--sans);letter-spacing:.15em}
.mcpurl{width:100%;font-size:12px;margin-top:6px}
.plrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;grid-template-areas:"n n d" "t s d";gap:6px;align-items:center;margin-top:8px;padding:8px;background:var(--chip);border-radius:var(--r-sm)}
.plrow input,.plrow select{min-width:0;width:100%}
.plrow [data-plk="name"]{grid-area:n;font-weight:600}.plrow [data-plk="type"]{grid-area:t}.plrow [data-plk="site"]{grid-area:s}.plrow .qbtn{grid-area:d;align-self:center}
.sectest li{display:flex;gap:8px;padding:4px 0;font-size:14px;border-bottom:1px solid var(--line)}
.envpill{align-self:center;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--mustard);color:var(--ink);font:700 11px/1.4 var(--sans);letter-spacing:.06em}
.ekvideo{width:100%;max-height:52vh;border-radius:var(--r);background:#000;margin-top:12px;object-fit:cover}
.ektab{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.ektab td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.ektab td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rcrow.off{opacity:.55}
.rcrow.off .rcmore,.rcrow.off .rcsum{display:none}
.rcrow:not(.open) .rcmore{display:none}
.rcrow.open .rcsum{display:none}
.rcrow .rcsum{display:block;text-align:left;font-size:13px;margin-top:4px;padding:4px 0;color:var(--text-2);min-height:32px;text-decoration:none;width:100%}
.rclist{gap:8px}
.rcrow{padding:10px 12px}
.rcname{flex:1;min-width:0;font-weight:600;font-size:16px;min-height:40px;padding:6px 8px}
.rcp{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}
.rcq{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--warn-bar);color:#fff;font-size:12px;font-weight:700;flex:none}
.rcraw{margin-top:4px;overflow-wrap:anywhere}
.rcsz{white-space:nowrap}
.ekraw{max-height:240px;overflow:auto;font-size:11px;background:var(--chip);padding:8px;border-radius:8px;white-space:pre-wrap;word-break:break-all}
.muted{color:var(--text-3)}
.small{font-size:14px}
.tiny{font-size:12px}
.mt{margin-top:16px}.mt2{margin-top:24px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* ===== Hlavička a navigácia ===== */
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px}
header.top.scrolled{border-bottom-color:var(--line);box-shadow:var(--e2)}
.top-inner{max-width:728px;margin:0 auto;display:flex;align-items:center;gap:4px;min-height:40px}
.top-inner h1{font-size:24px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-inner .btn.ghost{width:40px;height:40px;padding:0;justify-content:center;font-size:18px}
.sync{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:8px;margin-right:4px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok-bar);display:inline-block}
.sync.dotonly{font-size:0;gap:0}
@media (max-width:480px){.sitepill{margin-left:4px;padding:4px 8px}}
.dot.demo,.dot.busy{background:var(--warn-bar)}
.dot.off,.dot.bad{background:var(--bad-bar)}
main{max-width:760px;margin:0 auto;padding:16px 16px}

nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom, 0px)}
.tabs-inner{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);height:var(--nav-h);position:relative;--ti:0}
.tab-ind{position:absolute;top:8px;left:0;width:20%;height:32px;display:flex;justify-content:center;pointer-events:none;transform:translateX(calc(var(--ti) * 100%));transition:transform .26s var(--ease-in-out)}
.tab-ind::before{content:"";width:56px;border-radius:999px;background:var(--accent-soft)}
.tabs button{z-index:1;transition:color .25s;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12px;gap:4px;font-size:12px;font-weight:500;color:var(--text-3);cursor:pointer;position:relative}
.tabs button .ic{font-size:20px;line-height:24px;transition:transform .2s var(--ease-out)}
.tabs button.on{color:var(--accent-strong);font-weight:600}
.tabs .badge{position:absolute;top:6px;left:calc(50% + 8px);background:var(--bad);color:#fff;border-radius:999px;font-size:12px;padding:0 6px;min-width:20px;line-height:20px;font-weight:600;box-shadow:0 0 0 2px var(--paper)}

/* ===== Tlačidlá (hierarchia: primary = plné, predvolené = obrys, ghost = ako odkaz) ===== */
.btn{text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:10px 16px;min-height:44px;cursor:pointer;font-weight:500;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;color:var(--ink);transition:transform .16s var(--ease-out),border-color .2s,background-color .2s,color .2s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:var(--e1)}
.btn.danger{color:var(--bad);border-color:transparent;background:transparent}
.btn.small{padding:8px 12px;min-height:36px;font-size:14px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn:disabled{opacity:.4;cursor:default}

/* ===== Plochy ===== */
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--e1);padding:16px}
.list{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r);box-shadow:var(--e1);overflow:hidden}
.chip{display:inline-block;background:var(--chip);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.empty{text-align:center;padding:32px 16px;color:var(--text-3)}

/* ===== Prepínače ===== */
.seg{display:flex;background:var(--chip);border-radius:var(--r);padding:4px;gap:2px;overflow-x:auto}
.seg button{border:0;background:none;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;white-space:nowrap;color:var(--text-3)}
.seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--e1)}
.seg5{display:grid;grid-template-columns:repeat(var(--n,5),1fr);overflow:visible;position:relative}
.seg5 button{position:relative;z-index:1;transition:color .25s,transform .16s var(--ease-out);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:12px;font-weight:500;min-width:0}
.seg5 .si{font-size:18px;line-height:24px}
.seg5 button.on{background:none;box-shadow:none;color:var(--ink)}
.seg-ind{position:absolute;top:4px;bottom:4px;width:calc((100% - 6px - var(--n,5) * 2px) / var(--n,5));left:calc(4px + var(--i) * ((100% - 6px - var(--n,5) * 2px) / var(--n,5) + 2px));background:var(--paper);border-radius:var(--r-sm);box-shadow:var(--e1)}
.invbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.invbar select{flex:1 1 140px;width:auto;min-width:0;min-height:40px;padding:8px 32px 8px 12px;font-size:14px;border-radius:999px;border-color:var(--line);background-color:var(--paper);transition:border-color .25s,color .25s}
.invbar select.set{border-color:var(--accent);color:var(--accent-strong);font-weight:500}
.invbar .tog{flex:1 1 auto;text-align:center}
.tog{transition:background-color .3s,color .3s,border-color .3s,transform .16s var(--ease-out);flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--text-3);border-radius:999px;padding:8px 12px;min-height:40px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.tog.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-strong)}

/* ===== Formuláre ===== */
input[type=text],input[type=number],input[type=date],input[type=search],input[type=email],input[type=password],select,textarea{width:100%;border:1px solid var(--field);background:var(--paper);border-radius:var(--r);padding:10px 12px;min-height:44px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
textarea{min-height:96px;resize:vertical;line-height:1.5}
label.f{display:block;font-size:14px;font-weight:500;color:var(--text-2);margin:16px 0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}

/* ===== Domov: polica s pohármi, lístok, návrh varenia ===== */
.sjars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 4px 0;align-items:end}
.sjar{position:relative;border:0;cursor:pointer;color:var(--ink);font:inherit;text-align:center;background:var(--paper);border-radius:14px 14px 18px 18px;padding:22px 6px 12px;min-height:118px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;box-shadow:inset 0 0 0 1.5px hsla(285,20%,15%,.10),var(--e1);transition:transform .16s var(--ease-out)}
.sjar::before{content:"";position:absolute;left:12%;right:12%;top:-7px;height:14px;border-radius:6px;background:var(--ok-bar);box-shadow:inset 0 -2px 0 hsla(0,0%,0%,.15)}
.sjar.red::before{background:var(--bad-bar)}.sjar.mustard::before{background:var(--warn-bar)}
.sjar b{font:700 36px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sjar span{font-family:var(--serif);font-size:14px;line-height:1.2}
.sjar small{font-size:12px;color:var(--text-3)}
.sjar.red small{color:var(--bad);font-weight:600}
.sjar:active{transform:scale(.97)}
.dgrid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.dgrid .dsec{margin:0}
.dgrid .dsec.note{margin:4px 0}
.dsub{font-size:16px;margin:12px 0 4px;color:var(--text-2)}
.dcook .dcard{padding:12px 8px 12px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:pointer}
.dcook .dh + .dcard{border-top:0}
.dcard h3{font-size:18px;margin-bottom:8px}
.dcard p{margin:6px 0 0}
.qbtn.tick{border:1.5px solid var(--field);flex:none}
@media (min-width:760px){ .dgrid{grid-template-columns:1fr 1fr} .sjars{gap:20px} }
@media (hover:hover) and (pointer:fine){ .sjar:hover{box-shadow:inset 0 0 0 1.5px hsla(285,20%,15%,.16),var(--e2)} .dcard:hover h3{color:var(--accent-strong)} }

/* ===== Kôš, história ===== */
.qbtn.trash{font-size:16px}
.drow .qbtn.trash{flex:none}
.linkbtn{background:none;border:0;padding:0 2px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;font-size:14px}
.hrow{display:flex;align-items:baseline;gap:12px;padding:12px 16px;background:var(--paper)}
.list > .hrow + .hrow{box-shadow:inset 0 1px 0 var(--line)}
.hrow .hd{width:72px;flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.hrow .hp{flex:1;color:var(--text-2);font-size:14px}
.hrow .hc{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.hrow .hc small{display:block;font-weight:400;font-size:12px;color:var(--text-3)}

/* ===== Čo máme doma ===== */
.avail{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14px;position:relative;padding-bottom:10px}
.avail .ap b{font-family:var(--sans);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.avail .as{font-weight:600}
.avail.ready .as,.avail.minus .as{color:var(--ok)}
.avail.incomplete .as{color:var(--warn)}
.avail.buy .as{color:var(--bad)}
.avail .am{flex-basis:100%;color:var(--text-3);font-size:14px}
.abar{position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:2px;background:var(--chip);overflow:hidden}
.abar i{display:block;height:100%;width:100%;transform-origin:left;background:var(--ok-bar)}
.avail.incomplete .abar i{background:var(--warn-bar)}.avail.buy .abar i{background:var(--bad-bar)}
.ist{display:inline-block;width:20px;font-weight:700;margin-right:4px}
.ist.ok{color:var(--ok)}.ist.unk{color:var(--warn)}.ist.part{color:var(--warn)}.ist.no{color:var(--bad)}

/* ===== Prechody medzi záložkami ===== */
html,body{overflow-x:clip}
.view.sheet-in{position:relative;z-index:5;background:var(--bg);min-height:calc(100dvh - 140px)}
.ghost-wrap{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.ghost-view{position:absolute;margin:0;will-change:transform,opacity}

/* ===== Náhľad Uvarené ===== */
.cplist{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.cprow{padding:12px;border-radius:var(--r);background:var(--chip)}
.cpn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px}
.cpn input{width:20px;height:20px;accent-color:var(--ink)}
.cpn .muted{font-size:14px;margin-left:auto}
.cpsel{display:flex;gap:8px;align-items:center;margin-top:8px}
.cpsel select{flex:1;min-width:0;font-size:14px;min-height:40px;padding:6px 8px}
.cpsel input{width:80px;flex:none;min-height:40px;padding:6px 8px;text-align:right}
.cpu{width:28px;flex:none;font-size:14px;color:var(--text-3)}
.cprow p{margin:6px 0 0}

/* ===== Štatistiky ===== */
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stc{background:var(--chip);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:4px}
.stl{font-size:12px;font-weight:600;color:var(--text-3)}
.stb{font-family:var(--serif);font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.sts{font-size:12px;color:var(--text-2);line-height:1.4}
.tips{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;max-width:36em}
#ptitle{cursor:default;-webkit-user-select:none;user-select:none}

/* ===== Domov ===== */
.dhello{margin:0 0 12px 4px;font-size:14px;color:var(--text-3);font-weight:500}
.dsec{padding:12px 8px 8px 16px;margin-bottom:12px}
.dh{display:flex;align-items:baseline;gap:8px;padding-right:0;margin-bottom:4px}
.dh h2{font-size:18px}
.dh .count{font-size:14px;color:var(--text-3);font-weight:500}
.dh .grow{flex:1}
.drow{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:4px 8px 4px 0;background:none;border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;color:inherit;font:inherit}
.dh + .drow{border-top:0}
.drow .dic{width:24px;text-align:center;flex:none}
.drow .dn{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow .dm{font-size:14px;color:var(--text-3);white-space:nowrap}
.drow .dm.warn{color:var(--warn);font-weight:600}.drow .dm.bad{color:var(--bad);font-weight:600}
.drow .btn.small{min-width:44px}
.dempty{margin:4px 8px 8px 0;color:var(--text-3);font-size:14px}
.dmore{margin:8px 8px 4px 0;font-size:14px;color:var(--text-3)}
.dshop{display:flex;flex-wrap:wrap;gap:8px;padding:4px 8px 4px 0}
.dshop .chip{font-size:14px;padding:4px 12px}

/* ===== Zjedz čoskoro ===== */
.soonbox{background:var(--paper);border-radius:var(--r);box-shadow:var(--e1);padding:12px 0 12px 16px;border-left:4px solid var(--warn-bar)}
.soonbox.bad{border-left-color:var(--bad-bar)}
.soonbox .sh{padding-right:16px;font-weight:600;line-height:1.3}
.soonbox .sh span{display:block;font-size:14px;font-weight:400;color:var(--text-3);margin-top:2px}
.soonchips{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 2px 0;scrollbar-width:none;scroll-snap-type:x proximity}
.soonchips::-webkit-scrollbar{display:none}
.sc{flex:none;scroll-snap-align:start;border:0;border-radius:var(--r-sm);padding:8px 12px;text-align:left;cursor:pointer;background:var(--warn-soft);color:var(--ink);display:flex;flex-direction:column;gap:2px;max-width:180px}
.sc.bad{background:var(--bad-soft)}
.sc b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc span{font-size:12px;font-weight:500;color:var(--warn)}
.sc.bad span{color:var(--bad)}
.alert{border-radius:var(--r);padding:12px 16px;border:1px solid}
.alert.bad{background:var(--bad-soft);border-color:transparent}
.alert.warn{background:var(--warn-soft);border-color:transparent}
.alert.info{background:var(--chip);border-color:transparent}
.alert b{font-weight:600}

/* ===== Zásoby: riadky ===== */
.item{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;background:var(--paper);cursor:pointer;transition:background-color .2s}
.list > .item + .item, .list > .shop + .shop{box-shadow:inset 0 1px 0 var(--line)}
.item .stat{width:8px;height:8px;border-radius:50%;flex:none;background:transparent;transition:background-color .2s ease}
.item .stat.soon{background:var(--warn-bar)}.item .stat.expired{background:var(--bad-bar)}
.item .main{flex:1;min-width:0}
.item .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .meta{font-size:14px;color:var(--text-3);line-height:1.4;margin-top:2px}
.item .meta .st{font-weight:600}
.item .meta .st.soon{color:var(--warn)}.item .meta .st.expired{color:var(--bad)}
.item .side{display:flex;flex-direction:column;align-items:flex-end;flex:none;margin:-4px 0}
.item .qty{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;color:var(--text-2);padding-right:8px}
.qa{display:flex;gap:0}
.qbtn{width:36px;height:36px;border-radius:999px;border:0;background:transparent;color:var(--text-2);font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s var(--ease-out),background-color .2s}
.chip-btn{border:0;background:var(--accent-soft);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600;color:var(--accent-strong);cursor:pointer;margin-left:4px;line-height:16px;vertical-align:1px}
.loc-h{display:flex;align-items:baseline;gap:8px;margin:24px 0 8px 4px;font-family:var(--serif);font-size:18px;font-weight:700}
.loc-h .count{font-family:var(--sans);font-size:14px;color:var(--text-3);font-weight:500}

/* kompaktné dlaždice */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.tile{transition:background-color .2s ease,transform .16s var(--ease-out);position:relative;background:var(--paper);box-shadow:var(--e1);border-radius:var(--r);padding:8px 8px 8px 12px;cursor:pointer;min-height:64px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background-color .2s ease}
.tile.soon::before{background:var(--warn-bar)}.tile.expired::before{background:var(--bad-bar)}
.tile.soon{background:color-mix(in srgb,var(--warn-soft) 50%,var(--paper))}
.tile.expired{background:color-mix(in srgb,var(--bad-soft) 60%,var(--paper))}
.tile .tn{font-weight:600;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:24px;overflow-wrap:break-word;hyphens:auto}
.tile .tm{display:flex;justify-content:space-between;gap:4px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .tm span:first-child{overflow:hidden;text-overflow:ellipsis}
.tile .tm .tl.soon{color:var(--warn);font-weight:600}.tile .tm .tl.expired{color:var(--bad);font-weight:600}
.tile .tq{position:absolute;top:4px;right:4px;width:28px;height:28px;font-size:16px}
.tile .tq.tql{right:auto;left:4px;font-size:13px}

/* ===== Recepty ===== */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.rcard{cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .16s var(--ease-out),box-shadow .2s}
.rcard .rmeta{font-size:14px;color:var(--text-3)}
.rcard .rprice{font-size:14px;color:var(--text-3);margin-top:auto}
.rcard .rprice b{color:var(--ink);font-weight:600}
.rtop{display:flex;align-items:center;gap:4px;margin:-8px 0 8px -8px}
.rtop .grow{flex:1}
.rhero h2{font-size:24px}
.rprice-big{text-align:right}
.rprice-big b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.rprice-big div{font-size:12px;color:var(--text-3);margin-top:2px}
.nut{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}
.nut div{background:var(--chip);border-radius:var(--r-sm);padding:8px 4px}
.nut b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.nut b small{font-size:12px;font-weight:500;color:var(--text-3)}
.nut span{font-size:12px;color:var(--text-3)}
.ract{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rfacts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:14px;color:var(--text-2)}
.pgrid{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start}
.pgrid .rprice-big{margin-left:auto}
.pcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.plab{font-size:12px;font-weight:600;color:var(--text-3)}
.pg{font-size:12px;color:var(--text-3);min-height:16px}
.pgrid .stepper button{width:40px;height:40px}
.pgrid .stepper span{min-width:32px}
.pgram{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:14px;font-weight:500;color:var(--text-2)}
.pgram input{width:88px;min-height:40px;padding:6px 8px;text-align:right}
.pgram .muted{font-weight:400;font-size:12px}
.rbar select{flex:1 1 180px}
.rcard .rprice span{color:var(--text-3)}
@media (max-width:420px){ .pgrid .rprice-big{flex-basis:100%;margin-left:0;text-align:left} }
table.ing{width:100%;border-collapse:collapse}
table.ing td{padding:8px 4px;border-top:1px solid var(--line);vertical-align:top}
table.ing tr:first-child td{border-top:0}
table.ing td.q{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;padding-right:12px;font-weight:600}
table.ing td.p{text-align:right;white-space:nowrap;color:var(--text-3);font-size:14px;width:1%;font-variant-numeric:tabular-nums}
table.ing .chip{margin-left:4px}
ol.steps{padding-left:24px;margin:0}
ol.steps li{margin:0 0 12px;padding-left:4px;max-width:36em}
ol.steps li::marker{font-weight:600;color:var(--text-3)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--field);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.stepper button{border:0;background:none;width:44px;height:44px;font-size:20px;cursor:pointer;color:var(--text-2)}
.stepper span{min-width:72px;text-align:center;font-weight:600}

/* ===== Nákup ===== */
.shop{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--paper);transition:background-color .35s}
.shop.done{background:color-mix(in srgb,var(--paper) 50%,var(--bg))}
.ck{flex:none;width:28px;height:28px;padding:0;border-radius:var(--r-sm);border:2px solid var(--field);background:var(--paper);display:grid;place-items:center;cursor:pointer;position:relative;transition:background-color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.ck::after{content:"";position:absolute;inset:-8px}
.ck svg{width:16px;height:16px;fill:none;stroke:var(--accent-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .24s .04s var(--ease-out)}
.shop.done .ck{background:var(--accent);border-color:var(--accent)}
.shop.done .ck svg{stroke-dashoffset:0}
.shop .main{flex:1;min-width:0;cursor:pointer}
.shop .name{font-weight:500;transition:color .35s}
.shop .sub{font-size:14px;color:var(--text-3);margin-top:2px}
.shop .sub b{font-weight:600;color:var(--text-2)}
.shop .price{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.shop.done .name{text-decoration:line-through;color:var(--text-3)}
.sum{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px);box-shadow:var(--e3);padding:12px 16px}
.sum b{font-size:18px;font-variant-numeric:tabular-nums}

/* ===== Čas od ===== */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.timer{display:flex;flex-direction:column;gap:8px}
.timer .th{display:flex;align-items:center;gap:8px;margin:-4px -8px 0 0}
.timer .th .em{font-size:24px;line-height:1}
.timer .th .tname{flex:1;font-weight:600;line-height:1.3}
.timer .th .btn.ghost{width:40px;height:40px;padding:0;min-height:0}
.timer .big{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.1;margin-top:4px}
.timer .big small{font-family:var(--sans);font-size:14px;color:var(--text-3);font-weight:500}
.timer .tmeta{font-size:12px;color:var(--text-3);margin-bottom:8px}
.timer .btn{margin-top:auto}
.casbar{margin-bottom:12px}
.tlist .trow{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;background:var(--paper)}
.list > .trow + .trow{box-shadow:inset 0 1px 0 var(--line)}
.trow .em{font-size:20px;width:24px;text-align:center;flex:none}
.trow .tmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;cursor:pointer;padding:4px 0}
.trow .tname{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .bar{height:4px}
.trow .tdays{font-size:14px;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.trow .tdays b{font-weight:600;color:var(--text-2)}
.trow .tdays.over b{color:var(--bad)}.trow .tdays.soon b{color:var(--warn)}
.trow .tdone{width:40px;height:40px;font-size:18px}
.trow .tdone.over{background:var(--accent);color:var(--accent-ink)}
.bar{height:6px;background:var(--chip);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--ok-bar);border-radius:999px;transform-origin:left;transition:transform .4s var(--ease-out),background-color .2s ease}
.bar i.soon{background:var(--warn-bar)}.bar i.over{background:var(--bad-bar)}

/* ===== Plávajúce tlačidlo, dialóg, toast ===== */
.fab{transition:transform .2s var(--ease-out),opacity .2s var(--ease-out),box-shadow .2s ease;position:fixed;right:max(16px,calc(50% - 364px));bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);z-index:15;width:56px;height:56px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);font-size:28px;line-height:1;box-shadow:var(--e3);cursor:pointer}
dialog{border:0;border-radius:var(--r-lg);padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);background:var(--paper);color:var(--ink);box-shadow:var(--e5)}
dialog::backdrop{background:hsla(30,30%,8%,.45);backdrop-filter:blur(2px)}
dialog[open]{animation:dlgIn .28s var(--ease-out)}
dialog[open]::backdrop{animation:fadeIn .3s ease}
dialog.closing{animation:dlgOut .18s var(--ease-out) forwards}
dialog.closing::backdrop{animation:fadeOut .22s ease forwards}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes dlgOut{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes sheetIn{from{transform:translateY(100%)}}
@keyframes sheetOut{to{transform:translateY(100%)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.dlg{padding:24px;overflow:auto;max-height:calc(100dvh - 48px);overscroll-behavior:contain}
.dlg h2{font-size:24px}
.dlg-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}
@media (max-width:600px){
  dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92dvh}
  .dlg{max-height:92dvh;padding:16px 16px calc(24px + env(safe-area-inset-bottom, 0px))}
  .dlg::before{content:"";display:block;width:40px;height:4px;border-radius:999px;background:var(--line);margin:-4px auto 16px}
  dialog[open]{animation:sheetIn .4s var(--ease-drawer)}
  dialog.closing{animation:sheetOut .24s var(--ease-drawer) forwards}
  .dlg-foot .btn{flex:1 1 auto}
}
.ingrow{display:grid;grid-template-columns:1fr 64px 64px 64px;gap:8px;margin-bottom:8px;align-items:center}
.ingrow .flags{grid-column:1/-1;display:flex;gap:12px;align-items:center;font-size:14px;color:var(--text-3);margin:-4px 0 8px}
table.prev{width:100%;border-collapse:collapse;font-size:14px}
table.prev th{text-align:left;font-weight:500;color:var(--text-3);font-size:12px;padding:4px}
table.prev td{padding:8px 4px;border-top:1px solid var(--line);vertical-align:middle}
table.prev input[type=number]{width:72px;min-height:40px;padding:4px 8px}
table.prev select{min-height:40px;padding:4px 8px;font-size:14px}
details.shelf summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
details.shelf summary::-webkit-details-marker{display:none}
details.shelf summary::after{content:"▸";color:var(--text-3);transition:transform .15s}
details.shelf[open] summary::after{transform:rotate(90deg)}
details.shelf[open] > :not(summary){animation:rise .3s var(--ease-out)}
.shelf-wrap{overflow-x:auto;margin:0 -4px}
table.shelf-t{table-layout:fixed}
table.shelf-t td:first-child{font-size:14px;line-height:1.3;padding-right:8px}
table.shelf-t th:not(:first-child){text-align:center;white-space:nowrap}
table.shelf-t th:not(:first-child),table.shelf-t td:not(:first-child){width:52px;padding:4px 2px}
table.shelf-t input[type=number]{width:100%;text-align:center;padding:4px 2px;min-height:40px;-moz-appearance:textfield}
table.shelf-t input::-webkit-inner-spin-button,table.shelf-t input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
table.shelf-t input[type=number]::placeholder{color:var(--text-3);opacity:.8}
.fracs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.login{max-width:380px;margin:12vh auto 0;text-align:center;animation:rise .5s var(--ease-out)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 88px);transform:translate(-50%,16px) scale(.96);opacity:0;transition:opacity .2s var(--ease-out),transform .25s var(--ease-out);overflow:hidden;box-shadow:var(--e4);background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:var(--r);max-width:min(calc(100vw - 32px),420px);width:max-content;text-align:center;font-size:14px;font-weight:500;z-index:50;pointer-events:none}
.toast.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.toast .tbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left;animation:tbar linear forwards}
@keyframes tbar{to{transform:scaleX(0)}}
.toast button{background:none;border:0;color:var(--accent-soft);font-weight:700;margin-left:12px;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.toast.two{width:min(calc(100vw - 32px),380px);text-align:left;padding:12px 12px 12px 16px}
.toast.two .acts{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:8px}
.toast.two button{margin:0;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);text-decoration:none}
.toast.two button[data-act="undo"]{color:var(--bg);opacity:.85;margin-left:-12px}
.toast.two button.x{background:var(--accent);color:var(--accent-ink)}

/* ===== Stlačenie (všetky vstupy) a hover (len myš) ===== */
.btn:active,.tog:active,.chip-btn:active,.seg button:active,.stepper button:active{transform:scale(.96)}
.qbtn:active{background:var(--chip);transform:scale(.92)}
.ck:active{transform:scale(.88)}
.fab:active{transform:scale(.9)}
.fab.away{transform:scale(.9);opacity:0;pointer-events:none}
.item:active,.shop .main:active{background-color:var(--chip)}
.tile:active,.rcard:active{transform:scale(.98)}
.tabs button:active .ic{transform:scale(.85)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--field)}
  .btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
  .btn.ghost:hover,.btn.danger:hover{background:var(--chip);border-color:transparent}
  .item:hover{background:color-mix(in srgb,var(--chip) 45%,var(--paper))}
  .qbtn:hover{background:var(--chip)}
  .tile:hover,.rcard:hover{box-shadow:var(--e2)}
  .tog:hover{border-color:var(--field)}
  .sc:hover{filter:brightness(.97)}
  .drow:hover,.trow .tmain:hover .tname{color:var(--accent-strong)}
}

/* =====================================================================
   VZHĽADY. Spoločné pravidlá čítajú tokeny vzhľadu (--bw, --bc, --card-sh, --r-ctl …),
   tu sú len rozdiely, ktoré sa tokenom vyjadriť nedajú (lišta, segment, čipy).
   ===================================================================== */
h1,h2,h3{font-family:var(--serif);font-weight:var(--dw);letter-spacing:var(--dls)}
h2{font-size:var(--h2)}
.top-inner h1{font-size:28px;line-height:1.1}
header.top{background:color-mix(in srgb,var(--bg) 86%,transparent)}
header.top.scrolled{border-bottom-color:var(--line);box-shadow:none}
.ic svg,.top-inner .btn.ghost svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.top-inner .btn.ghost{color:var(--ink);border-radius:999px}

/* plochy */
.card,.list,.dsec,.soonbox,.tile,.stc{background:var(--paper);border-radius:var(--r);border:var(--bw) solid var(--bc);box-shadow:var(--card-sh)}
.list{overflow:hidden}
.chip{border-radius:999px}

/* tlačidlá */
.btn{border:var(--bw) solid var(--bc);background:var(--ctl-bg);color:var(--ink);border-radius:var(--r-ctl);font-weight:600}
.btn.primary{background:var(--accent);border-color:var(--bc);color:var(--accent-ink);box-shadow:var(--hard3)}
.btn.ghost,.btn.danger{border-color:transparent;background:transparent;box-shadow:none}
.btn.danger{color:var(--bad)}
input[type=text],input[type=number],input[type=date],input[type=search],input[type=email],input[type=password],select,textarea{border:1.5px solid var(--field);border-radius:var(--r-in)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stepper{border:1.5px solid var(--field);border-radius:var(--r-in)}

/* segment (prepínač záložiek v obrazovke) */
.seg{background:var(--seg-bg);border:0;border-radius:var(--r-sm);padding:3px}
.seg button{border-radius:calc(var(--r-sm) - 3px);color:var(--text-3)}
.seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg-ind{top:3px;bottom:3px;width:calc((100% - 4px - var(--n,5) * 2px) / var(--n,5));left:calc(3px + var(--i) * ((100% - 4px - var(--n,5) * 2px) / var(--n,5) + 2px));background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:calc(var(--r-sm) - 3px)}
.seg5 button{color:var(--text-3)}
.seg5 button.on{color:var(--ink);font-weight:600}

/* čipy a filtre */
.tog{border:var(--bw) solid var(--bc);background:var(--paper);color:var(--ink);border-radius:var(--r-ctl);font-weight:500}
.tog.on{background:var(--ink);border-color:var(--bc);color:var(--paper);font-weight:600}
.invbar select{border:var(--bw) solid var(--bc);border-radius:var(--r-ctl);background-color:var(--paper)}
.invbar select.set{border-color:var(--accent);color:var(--ink);font-weight:600}

/* blok „treba hneď“: Čistý tmavý, Útulný lístok, Retro žltý s tieňom */
.soonbox{border-left:0;padding:14px 0 12px 16px;background:var(--note);box-shadow:none}
.soonbox .sh{font-family:var(--serif);font-weight:var(--dw);font-size:19px}
.soonbox .sh span{font-family:var(--sans);color:var(--text-3)}
.sc{background:var(--paper);border:1.5px solid var(--warn-bar);border-radius:var(--r-sm)}
.sc.bad{background:var(--paper);border-color:var(--bad-bar)}
.sc b{color:var(--ink)}

/* štítok s dňami v riadku zásob */
.item{padding:0 8px 0 10px;gap:12px;min-height:64px}
.lead{flex:none;width:48px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--r-sm);color:var(--text-2);background:var(--chip);padding:6px 0}
.lead b{font:700 20px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lead small{font-size:12px;font-weight:600;line-height:1}
.lead.soon{background:var(--warn-bar);color:var(--on-soon)}
.lead.expired{background:var(--bad-bar);color:var(--bad-bar-ink)}
.item .main{padding:12px 0}
.item .name{font-weight:var(--tw)}
.item .side{padding:8px 0}
.item .qty{font-weight:600;color:var(--ink)}
.loc-h{font-family:var(--serif);font-weight:var(--dw);font-size:var(--h2);margin:24px 0 8px 2px}

/* spodná lišta: Čistý = celá šírka, Útulný = plávajúca tmavá, Retro = obrys */
nav.tabs{background:var(--paper);border-top:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.tabs button{color:var(--text-3);padding-top:10px;font-weight:500;font-size:11px}
.tabs button.on{color:var(--ink);font-weight:600}
.tab-ind{top:8px;height:28px}
.tab-ind::before{width:52px;border-radius:14px;background:var(--chip)}
.tabs button .ic{height:28px;display:grid;place-items:center}
.tabs .badge{background:var(--bad-bar);color:var(--bad-bar-ink);box-shadow:0 0 0 2px var(--paper)}

:root:not([data-look]) nav.tabs,:root[data-look="cozy"] nav.tabs{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);max-width:736px;margin:0 auto;border:0;border-radius:24px;background:var(--bar);box-shadow:var(--e4);padding-bottom:0}
:root:not([data-look]) .tabs button,:root[data-look="cozy"] .tabs button{color:var(--bar-text)}
:root:not([data-look]) .tabs button.on,:root[data-look="cozy"] .tabs button.on{color:var(--bar-on)}
:root:not([data-look]) .tab-ind::before,:root[data-look="cozy"] .tab-ind::before{background:var(--bar-on-bg)}
:root:not([data-look]) .tabs .badge,:root[data-look="cozy"] .tabs .badge{box-shadow:0 0 0 2px var(--bar)}
:root:not([data-look]),:root[data-look="cozy"]{--nav-gap:12px}
:root:not([data-look]) body,:root[data-look="cozy"] body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 44px)}

:root[data-look="retro"] nav.tabs{border-top:2px solid var(--ink)}
:root[data-look="retro"] .tabs-inner{padding:0 4px}
:root[data-look="retro"] .tabs button{font-weight:800;color:var(--text-3)}
:root[data-look="retro"] .tabs button.on{color:var(--on-soon);font-weight:800}
:root[data-look="retro"] .tab-ind{top:6px;bottom:6px;height:auto;padding:0 3px}
:root[data-look="retro"] .tab-ind::before{width:100%;border-radius:14px;background:var(--warn-bar);border:2px solid var(--ink)}

/* Retro: segment, čipy a začiarknutie ako na kartičke */
:root[data-look="retro"] .seg{border:2px solid var(--ink);padding:0;gap:0;border-radius:14px;overflow:hidden}
:root[data-look="retro"] .seg button{border-radius:0;color:var(--ink);font-weight:700}
:root[data-look="retro"] .seg button + button{border-left:2px solid var(--ink)}
:root[data-look="retro"] .seg button.on{background:var(--warn-bar);color:var(--on-soon);box-shadow:none}
:root[data-look="retro"] .seg5 button{border-left:0!important}
:root[data-look="retro"] .seg-ind{top:0;bottom:0;border-radius:0;background:var(--warn-bar);box-shadow:none;width:calc(100% / var(--n,5));left:calc(var(--i) * 100% / var(--n,5))}
:root[data-look="retro"] .seg5 button.on{color:var(--on-soon)}
:root[data-look="retro"] .tog{font-weight:700}
:root[data-look="retro"] .tog.on{background:var(--warn-bar);color:var(--on-soon);border-color:var(--ink)}
:root[data-look="retro"] .soonbox{background:var(--warn-soft);border:2px solid var(--ink);box-shadow:var(--card-sh)}
:root[data-look="retro"] .ck{border-color:var(--ink);border-radius:9px}
:root[data-look="retro"] .shop.done .ck{border-color:var(--ink)}
:root[data-look="retro"] input[type=text],:root[data-look="retro"] input[type=number],:root[data-look="retro"] input[type=date],:root[data-look="retro"] input[type=search],:root[data-look="retro"] input[type=email],:root[data-look="retro"] input[type=password],:root[data-look="retro"] select,:root[data-look="retro"] textarea{border:2px solid var(--ink)}
:root[data-look="retro"] .stepper{border:2px solid var(--ink)}
:root[data-look="retro"] .lead{border:2px solid var(--ink)}
:root[data-look="retro"] .item .name,:root[data-look="retro"] .shop .name{font-weight:700}
:root[data-look="retro"] dialog{border:2px solid var(--ink)}

/* Čistý: blok „treba hneď“ je tmavý (v tmavom režime svetlý) */
:root[data-look="clean"] .soonbox{background:var(--hero);color:var(--hero-ink)}
:root[data-look="clean"] .soonbox .sh span{color:var(--hero-sub)}
:root[data-look="clean"] .soonbox .sc{background:var(--hero-tile);border-color:transparent}
:root[data-look="clean"] .soonbox .sc b{color:var(--hero-ink)}
:root[data-look="clean"] .soonbox .sc span{color:var(--hero-sub)}
:root[data-look="clean"] .soonbox .sc.bad span{color:var(--hero-ink);font-weight:700}

/* plávajúce tlačidlo, toast */
.fab{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px + var(--nav-gap,0px));background:var(--accent);color:var(--accent-ink);border:var(--bw) solid var(--bc);box-shadow:var(--e3);display:grid;place-items:center}
.fab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}
:root[data-look="retro"] .fab{border-radius:18px;box-shadow:4px 4px 0 var(--hard)}
.toast{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 88px + var(--nav-gap,0px));background:var(--ink);color:var(--paper)}
.toast button{color:var(--paper)}
.toast.two button.x{background:var(--warn-bar);color:var(--on-soon)}
.toast.two button[data-act="undo"]{color:var(--paper)}
.sum{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px + var(--nav-gap,0px))}

/* zaškrtnutie v nákupe: okrúhle */
.ck{border-radius:50%;border:2px solid var(--text-3)}
.shop.done .ck{background:var(--accent);border-color:var(--accent)}

/* čas od, recepty, štatistiky */
.timer .big{font-family:var(--sans);font-weight:700;font-size:36px;letter-spacing:-.02em}
.trow .tdone.over{background:var(--accent);color:var(--accent-ink)}
.bar{background:var(--chip);height:6px;border-radius:3px}
.bar i{border-radius:3px}
.rcard h3{font-size:19px;line-height:1.25}
.stb{font-family:var(--serif);font-weight:var(--dw)}
.nut b{font-family:var(--sans);font-weight:700}
.dlg h2{font-size:24px}

/* nastavenia vzhľadu: náhľad palety */

/* ===== Načítavanie a obmedzený pohyb ===== */
.sk-wrap{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.sk{border-radius:var(--r);background:linear-gradient(100deg,var(--chip) 30%,color-mix(in srgb,var(--chip) 40%,var(--paper)) 50%,var(--chip) 70%);background-size:300% 100%;animation:shimmer 1.4s infinite linear,fadeIn .4s ease backwards}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion: reduce){
  /* menej a jemnejšie: farby a priehľadnosť ostávajú, pohyb a zmena veľkosti nie */
  *,*::before,*::after{scroll-behavior:auto!important;transition-property:opacity,color,background-color,border-color,box-shadow,stroke-dashoffset!important}
  dialog[open],dialog[open]::backdrop,.login,details.shelf[open] > :not(summary){animation:fadeIn .2s ease!important}
  dialog.closing,dialog.closing::backdrop{animation:fadeOut .15s ease forwards!important}
  .sk{animation:none!important}
  .tab-ind,.bar i{transition:none!important}
}
@media (max-width:520px){ .grid3{grid-template-columns:1fr 1fr} .nut{gap:4px} .nut b{font-size:16px} }

/* =====================================================================
   NOVÉ PRVKY (redizajn): ikony, akcie v hlavičke, blok „treba hneď“, dlaždice po dvoch, riadky
   ===================================================================== */
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.pgacts{display:flex;gap:2px}
.pgacts:empty{display:none}
.top-inner .btn.ghost svg.i{width:22px;height:22px}
.top-inner .btn.ghost.on{background:var(--chip)}
@media (max-width:480px){ .sync{font-size:0;gap:0;margin:0 6px} }
.top-inner h1{min-width:96px}

/* záložky miest s ikonou */
.segi{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));position:relative;overflow:visible}
.segi button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:4px 2px;font-size:12px;font-weight:500;min-width:0;background:none;box-shadow:none;transition:color .25s}
.segi button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.segi button svg.i{width:18px;height:18px}
.segi button.on{background:none;box-shadow:none;color:var(--ink);font-weight:600}
.segi .seg-ind{transition:left .28s var(--ease-in-out)}
:root[data-look="retro"] .segi button{font-size:11px}
:root[data-look="retro"] .segi button + button{border-left:2px solid var(--ink)}
:root[data-look="retro"] .segi button.on{color:var(--on-soon)}

/* hľadanie */
.searchf{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0 4px 0 14px;background:var(--paper);border:1.5px solid var(--field);border-radius:var(--r-in);color:var(--text-3)}
.searchf input[type=search]{border:0;background:transparent;padding:10px 8px 10px 0;box-shadow:none!important;min-height:44px}
.searchf:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:root[data-look="retro"] .searchf{border:2px solid var(--ink)}

/* blok „Zjedz čo najskôr“ */
.hero{margin-top:14px;padding:12px 10px 10px;border-radius:var(--r);background:var(--note);color:var(--ink)}
.hero-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 4px}
.hero-h h2{font-size:19px;margin:0}
.hero-h span{font-size:13px;color:var(--text-3)}
.hero .tiles2{margin-top:10px}
:root[data-look="clean"] .hero{background:var(--hero);color:var(--hero-ink);border-radius:20px}
:root[data-look="clean"] .hero-h h2{font-size:15px;font-weight:700}
:root[data-look="clean"] .hero-h span,:root[data-look="clean"] .hero .meta{color:var(--hero-sub)}
:root[data-look="clean"] .hero .tile2{background:var(--hero-tile);color:var(--hero-ink);box-shadow:none;border:0}
:root[data-look="clean"] .hero .mini{background:var(--hero-btn);color:var(--hero-ink)}
:root[data-look="retro"] .hero{background:var(--warn-soft);border:2px solid var(--ink);box-shadow:var(--card-sh)}
:root[data-look="retro"] .hero-h h2{font-size:20px}
:root[data-look="retro"] .hero .tile2{box-shadow:none}

/* dlaždice po dvoch: názov a pod ním množstvo a dni, vpravo mínus */
.tiles2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile2{display:flex;align-items:center;gap:8px;min-height:68px;padding:10px 8px 10px 12px;background:var(--paper);border-radius:14px;border:var(--bw) solid var(--bc);box-shadow:var(--card-sh);cursor:pointer;transition:transform .16s var(--ease-out),background-color .2s}
:root[data-look="retro"] .tile2{box-shadow:var(--hard3)}
.tile2 .main{flex:1;min-width:0}
.tile2 .name{font-size:14px;font-weight:var(--tw);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;hyphens:auto}
.tile2 .meta,.irow .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.tile2 .acts{display:flex;flex-direction:column;gap:4px}
.dl.warn{color:var(--warn);font-weight:600}
.dl.bad{color:var(--bad);font-weight:600}
:root[data-look="retro"] .dl{font-weight:800;color:var(--ink)}
:root[data-look="clean"] .hero .dl{color:var(--hero-sub)}
.dchip{font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap}
.dchip.bad{background:var(--bad-bar);color:var(--bad-bar-ink)}
.dchip.soon{background:var(--warn-soft);color:var(--warn)}
:root[data-look="clean"] .dchip.soon{background:var(--warn-bar);color:var(--on-soon)}
:root[data-look="retro"] .dchip{border:1.5px solid var(--ink)}
:root[data-look="retro"] .dchip.soon{background:var(--warn-bar);color:var(--on-soon)}

/* malé okrúhle tlačidlo (mínus, kôš); dotyková plocha 44 px cez ::after */
.mini{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;border:0;border-radius:16px;background:var(--chip);color:var(--ink);cursor:pointer;transition:transform .16s var(--ease-out),background-color .2s}
.mini::after{content:"";position:absolute;inset:-6px}
.mini svg.i{width:15px;height:15px;stroke-width:2.3}
.mini.ghost{background:transparent;color:var(--text-2)}
.mini:active{transform:scale(.9)}
:root[data-look="retro"] .mini{border:2px solid var(--ink);border-radius:10px}
:root[data-look="retro"] .mini.ghost{border-color:transparent}
.tiles2 .mini::after{inset:-6px -6px}

/* ovládanie pod blokom: zoskupenie a zoznam/dlaždice */
.invctl{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:14px}
.dd{position:relative;display:flex;align-items:center;color:var(--text-3)}
.dd select{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;min-height:40px;width:auto;padding:6px 22px 6px 8px;font-size:13px;color:var(--text-3);cursor:pointer}
.dd svg.i{position:absolute;right:4px;width:13px;height:13px;stroke-width:2.2;pointer-events:none}
.vtog{display:flex;padding:2px;border-radius:10px;background:var(--seg-bg)}
.vtog button{position:relative;width:36px;height:32px;border:0;border-radius:8px;display:grid;place-items:center;background:transparent;color:var(--text-3);cursor:pointer}
.vtog button::after{content:"";position:absolute;inset:-6px -1px}
.vtog button svg.i{width:15px;height:15px;stroke-width:2}
.vtog button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
:root[data-look="retro"] .vtog{padding:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper)}
:root[data-look="retro"] .vtog button{border-radius:0;color:var(--ink)}
:root[data-look="retro"] .vtog button + button{border-left:2px solid var(--ink)}
:root[data-look="retro"] .vtog button.on{background:var(--warn-bar);color:var(--on-soon);box-shadow:none}

.grp-h{margin:16px 4px 8px;font-family:var(--sans);font-size:15px;font-weight:var(--tw);letter-spacing:0;color:var(--ink)}
:root[data-look="cozy"] .grp-h{color:var(--text-2)}

/* riadok zásob */
.irow{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 12px 8px 16px;background:var(--paper);cursor:pointer;transition:background-color .2s}
.list > .irow + .irow{box-shadow:inset 0 1px 0 var(--line)}
:root[data-look="retro"] .list > .irow + .irow{box-shadow:none;border-top:2px dashed var(--line)}
.irow .main{flex:1;min-width:0}
.irow .name{font-weight:var(--tw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irow .meta{font-size:13px}
.irow .chip-btn{margin-left:0}
.irow:active{background:var(--chip)}
.tile2:active{transform:scale(.98)}
.invfoot{text-align:center;margin:24px 0 8px}
.invfoot .linkbtn{color:var(--text-3);font-size:13px;min-height:44px}
@media (hover:hover) and (pointer:fine){ .irow:hover{background:color-mix(in srgb,var(--chip) 45%,var(--paper))} .mini:hover{filter:brightness(.96)} }
:root[data-look="retro"] .segi button.on{background:none}
.hero-more{display:block;width:100%;min-height:44px;margin-top:8px;border:0;border-radius:12px;background:transparent;color:inherit;font:600 14px/1 var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ===== Domov ===== */
.hello{padding:4px 2px 0}
.hello p{margin:0;font-size:14px;color:var(--text-3)}
.hello h1{margin:2px 0 0;font-size:var(--h1);line-height:1.1}
.sech{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:28px 2px 10px}
.sech h2{margin:0}
.sech .linkbtn{font-size:14px;color:var(--text-3);min-height:32px}
button.hero,button.card{width:100%;font:inherit;text-align:left;cursor:pointer}
.sumrow{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border:0}
.sumrow .main,.sumcard .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sumrow .main b,.sumcard .main b{font-size:16px;font-weight:var(--tw)}
.sumrow .main span,.sumcard .main span{font-size:13px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-look="clean"] .sumrow .main span{color:var(--hero-sub)}
.sumrow > svg.i,.sumcard > svg.i{width:18px;height:18px;stroke-width:2}
.badge-n{width:48px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;font-size:17px;font-weight:700;background:var(--paper);color:var(--warn)}
.badge-n.bad{background:var(--bad-bar);color:var(--bad-bar-ink)}
:root[data-look="clean"] .badge-n{background:var(--warn-bar);color:var(--on-soon)}
:root[data-look="clean"] .badge-n.bad{background:var(--bad-bar);color:var(--bad-bar-ink)}
:root[data-look="retro"] .badge-n{border:2px solid var(--ink);border-radius:14px}
.sumcard{display:flex;align-items:center;gap:12px;padding:14px;color:var(--ink)}
.sum-n{font-size:15px;font-weight:var(--tw);white-space:nowrap}
.hscroll{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 16px}
.hscroll::-webkit-scrollbar{display:none}
.cook{flex:none;width:250px;padding:14px;display:flex;flex-direction:column;gap:10px;scroll-snap-align:start;cursor:pointer}
.cook .name{font-size:17px;font-weight:var(--tw);line-height:1.25;min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cook .have-t{margin-top:6px}
.plist{padding:0 14px}
.trow2{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 0}
.trow2 + .trow2{border-top:1px solid var(--line)}
:root[data-look="retro"] .trow2 + .trow2{border-top:2px dashed var(--line)}
.trow2 .main{flex:1;min-width:0}
.trow2 .name{font-size:16px;font-weight:var(--tw)}
.trow2 .sub{font-size:13px;color:var(--text-3)}
.trow2 .sub.bad{color:var(--bad);font-weight:600}
.plist .dempty{padding:16px 0;margin:0}
.plist .dsub{margin:12px 0 0;font-size:13px;font-family:var(--sans);font-weight:600;color:var(--text-3)}
.wzinvite h2{margin:0 0 4px}

/* bar „máte doma“ */
.track{height:6px;border-radius:3px;overflow:hidden;background:var(--chip)}
.track i{display:block;height:100%;width:100%;border-radius:3px;transform-origin:left;background:var(--ok-bar);transition:transform .4s var(--ease-out)}
.track i.mid{background:var(--warn-bar)}
.track i.low{background:var(--bad-bar)}
:root[data-look="retro"] .track{border:1.5px solid var(--ink);height:8px}
.have{flex:1;min-width:0}
.have-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.have-t span{color:var(--text-3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.have-t b{font-weight:var(--tw);white-space:nowrap}
.rc .have-t{margin-bottom:6px}
.rc .have-t span{text-align:left}

/* ===== Recepty: karty ===== */
.rgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rc{padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:transform .16s var(--ease-out),box-shadow .2s}
.rc-top{display:flex;gap:10px;align-items:flex-start}
.rc-top h3{flex:1;min-width:0;margin:0;font-size:18px;line-height:1.25}
:root[data-look="clean"] .rc-top h3{font-size:17px}
.rc-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--text-2)}
.cook .rc-meta{font-size:13px;color:var(--text-3);gap:4px 14px}
.rc-low{display:flex;gap:16px;align-items:flex-end}
.rc-low .grow{flex:1}
.bm svg.i{width:16px;height:16px;stroke-width:2}
.bm.on{color:var(--accent)}
.bm.on svg.i{fill:currentColor}
.heart{flex:none;display:flex;align-items:center;gap:6px;padding-left:6px;color:var(--heart)}
.heart b{font-size:15px;font-weight:var(--tw);color:var(--ink)}
.hz{position:relative;width:24px;height:22px;flex:none}
.hz svg{width:24px;height:22px;display:block}
.hf{position:absolute;left:0;right:0;bottom:0;overflow:hidden}
.hf svg{position:absolute;left:0;bottom:0;fill:currentColor}
.ho{position:absolute;left:0;top:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
:root[data-look="retro"] .ho{stroke:var(--ink)}
.rc-tags{display:flex;flex-wrap:wrap;gap:6px}
.dtag{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--bad-soft);color:var(--bad)}
:root[data-look="retro"] .dtag{border:1.5px solid var(--ink);border-radius:8px}
.recbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 2px 10px}
.recbar-r{display:flex;align-items:center;gap:4px;flex:none}
.dd.strong select{color:var(--ink);font-size:14px}
.dd.strong{color:var(--ink)}
.rtabs button{font-size:14px;min-height:42px}
.cfilters .tog{min-height:36px;padding:6px 13px}
.tsel{position:relative;display:inline-flex;align-items:center;padding:0!important}
.tsel select{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;color:inherit;font:inherit;font-size:14px;min-height:36px;padding:6px 28px 6px 13px;width:auto;cursor:pointer}
.tsel svg.i{position:absolute;right:9px;width:13px;height:13px;stroke-width:2.2;pointer-events:none}
:root[data-look="retro"] .tsel.on{color:var(--on-soon)}

/* prepínače v nastaveniach kariet */
.swlist{margin-top:10px;display:flex;flex-direction:column}
.swrow{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.swrow span{flex:1}
.sw{position:relative;width:46px;height:28px;flex:none;border-radius:14px;background:var(--seg);transition:background-color .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(18px)}
:root[data-look="retro"] .sw{border:2px solid var(--ink)}
:root[data-look="retro"] .sw.on{background:var(--warn-bar)}
:root[data-look="retro"] .sw::after{top:1px;left:1px;border:2px solid var(--ink);box-shadow:none;width:22px;height:22px;box-sizing:border-box}
.searchf input,:root[data-look="retro"] .searchf input{border:0;background:transparent;border-radius:0}

/* ===== Nákup ===== */
.qadd{display:flex;gap:8px;align-items:stretch}
.qadd .searchf{flex:1;min-width:0;margin-top:0}
.qadd .btn{min-height:48px}
.invctl.spread2{justify-content:space-between;margin-top:10px}
.shop{min-height:60px;padding:8px 14px;gap:12px}
.list > .shop + .shop{box-shadow:inset 0 1px 0 var(--line)}
:root[data-look="retro"] .list > .shop + .shop{box-shadow:none;border-top:2px dashed var(--line)}
.shop .name{font-weight:var(--tw)}
.shop .sub{font-size:13px;margin-top:1px}
.shop .price{color:var(--text-3);font-size:13px}
.shop.done{background:var(--paper)}
.shop.done .name{color:var(--text-3)}
.shoptotal{text-align:right;margin:14px 4px 0;font-size:14px;color:var(--text-3)}
.shoptotal b{color:var(--ink);font-weight:var(--tw)}
.movepill-space{height:72px}
.movepill{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 14px + var(--nav-gap,0px));z-index:16;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:var(--bw) solid var(--bc);border-radius:24px;background:var(--accent);color:var(--accent-ink);font:600 15px/1 var(--sans);box-shadow:var(--e3);cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease-out)}
.movepill svg.i{width:20px;height:20px;stroke-width:2}
:root[data-look="retro"] .movepill{border-radius:16px;box-shadow:4px 4px 0 var(--hard);font-weight:800}
.movepill:active{transform:scale(.96)}

/* ===== Čas od ===== */
.kicker{margin:0 2px;font-size:14px;color:var(--text-3)}
.tdue{margin-top:14px;padding:14px 14px 4px}
.tdue .hero-h{padding:0}
.trow3{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 0}
.trow3 + .trow3{border-top:1px solid var(--note-line)}
:root[data-look="clean"] .trow3 + .trow3{border-top-color:rgba(255,255,255,.12)}
:root[data-look="clean"][data-mode="dark"] .trow3 + .trow3{border-top-color:rgba(0,0,0,.12)}
:root[data-look="retro"] .trow3 + .trow3{border-top:2px dashed color-mix(in srgb,var(--ink) 20%,transparent)}
.trow3 .main{flex:1;min-width:0;cursor:pointer}
.trow3 .name{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:var(--tw)}
.trow3 .name svg.i{width:18px;height:18px}
.trow3 .name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow3 .sub{font-size:13px;color:var(--text-3)}
:root[data-look="clean"] .trow3 .sub{color:var(--hero-sub)}
.trow3 .badge-n{font-size:13px}
.trow3 .btn.small{min-height:36px}
:root[data-look="clean"] .hero .btn{background:var(--hero-btn);color:var(--hero-ink);border:0}
:root[data-look="cozy"] .hero .btn{background:transparent;border:1.5px solid var(--text-3)}
.trow4{display:flex;gap:12px;align-items:flex-start;padding:14px 0;cursor:pointer}
.trow4 + .trow4{border-top:1px solid var(--line)}
:root[data-look="retro"] .trow4 + .trow4{border-top:2px dashed var(--line)}
.itile{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--chip);color:var(--ink)}
.itile svg.i{width:22px;height:22px;stroke-width:1.8}
:root[data-look="cozy"] .itile{background:var(--note);border-radius:14px}
:root[data-look="retro"] .itile{border:2px solid var(--ink);border-radius:14px}
.trow4 .main{flex:1;min-width:0}
.trow4 .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trow4 .name{font-size:16px;font-weight:var(--tw)}
.trow4 .next{font-size:14px;font-weight:var(--tw);white-space:nowrap}
.trow4 .track{margin-top:10px}
.trow4 .sub{font-size:13px;color:var(--text-3);margin-top:6px}
.icpick{display:flex;flex-wrap:wrap;gap:6px}
.icopt{position:relative;display:grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink);font-size:13px;font-weight:600}
.icopt input{position:absolute;opacity:0;pointer-events:none}
.icopt:has(input:checked){border:2px solid var(--ink);background:var(--chip)}
.icopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.empty h3{margin:0 0 6px;color:var(--ink)}
.empty p{margin:0 auto;max-width:32em}
.dd select,.tsel select{field-sizing:content}

/* ===== Pohyb: indikátory sa posúvajú transformom, stlačenie, dlhé podržanie ===== */
.seg-ind{left:3px!important;transform:translateX(calc(var(--i) * (100% + 2px)));transition:transform .26s var(--ease-in-out)}
:root[data-look="retro"] .seg-ind{left:0!important;transform:translateX(calc(var(--i) * 100%))}
.segi .seg-ind{transition:transform .26s var(--ease-in-out)}
.rc,.cook,.sumrow,.sumcard,.trow4,.irow,.tile2{transition:transform .16s var(--ease-out),background-color .2s,box-shadow .2s}
.rc:active,.cook:active,.sumrow:active,.sumcard:active{transform:scale(.98)}
.trow4:active{background:color-mix(in srgb,var(--chip) 50%,transparent)}
.irow.pressing,.tile2.pressing{transform:scale(.97);transition:transform .45s var(--ease-out)}
/* Retro: stlačené tlačidlo „zapadne“ do svojho tieňa */
:root[data-look="retro"] .btn.primary:active,:root[data-look="retro"] .fab:active,:root[data-look="retro"] .movepill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard)}
:root[data-look="retro"] .tile2:active,:root[data-look="retro"] .rc:active,:root[data-look="retro"] .cook:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--hard)}
@media (hover:hover) and (pointer:fine){ .rc:hover,.cook:hover{box-shadow:var(--card-sh),var(--e2)} :root[data-look="retro"] .rc:hover{box-shadow:5px 5px 0 var(--hard)} .sumcard:hover .main b,.trow4:hover .name{color:var(--accent-strong)} }
@media (prefers-reduced-motion: reduce){ .irow.pressing,.tile2.pressing{transform:none} .seg-ind{transition:none} }
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

/* ===== Prvé kroky (návod na Domove) ===== */
.fsteps{padding:16px}
.fsteps-h{display:flex;justify-content:space-between;align-items:baseline}
.fsteps-h h2{margin:0}
.fsteps-h span{font-size:13px;color:var(--text-3)}
.fsteps .track{margin:10px 0 4px}
.fsteps ol{list-style:none;margin:0;padding:0}
.fsteps li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.fsteps li:first-child{border-top:0}
.fsteps li b{font-weight:var(--tw);display:block;line-height:28px}
.fsteps li.ok b{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--line)}
.fsteps li p{margin:0 0 10px;font-size:14px;color:var(--text-2)}
.stn{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--chip);color:var(--text-2);font-size:13px;font-weight:700}
.fsteps li.cur .stn{background:var(--accent);color:var(--accent-ink)}
.fsteps li.ok .stn{background:var(--ok-soft);color:var(--ok)}
.stn svg.i{width:15px;height:15px;stroke-width:2.6}
:root[data-look="retro"] .fsteps .stn{border:2px solid var(--ink)}
.fsteps .linkbtn{margin-top:6px;font-size:13px;color:var(--text-3);min-height:36px}
.wzfeat{list-style:none;margin:12px 0 4px;padding:0;display:flex;flex-direction:column;gap:12px}
.wzfeat li{display:flex;gap:12px;align-items:flex-start}
.wzfeat li > svg.i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--chip);stroke-width:1.8;flex:none}
:root[data-look="cozy"] .wzfeat li > svg.i{background:var(--note)}
.wzfeat b{display:block;font-weight:var(--tw)}
.wzfeat span{font-size:14px;color:var(--text-2)}

/* rýchle menu po podržaní */
.qm{display:flex;flex-direction:column;margin-top:12px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.qmb{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:0;border-top:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 16px/1 var(--sans);text-align:left;cursor:pointer}
.qmb:first-child{border-top:0}
.qmb.bad{color:var(--bad)}
.qmb:active{background:var(--chip)}
.empty .row .btn svg.i{width:18px;height:18px}
.fsteps li[role="button"]{cursor:pointer}
.fsteps li[role="button"]:active b{color:var(--accent-strong)}
.wz h2{font-size:28px;line-height:1.15}

/* ===== Čipy (filtre, dotazník): v Útulnom a Čistom vzhľade majú obrys, nech vyzerajú ako tlačidlá ===== */
.tog{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tog svg.i{width:17px;height:17px;flex:none}
:root:not([data-look="retro"]) .tog{border:1.5px solid color-mix(in srgb,var(--ink) 20%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.04)}
:root:not([data-look="retro"]) .tog.on{border-color:var(--ink)}
.wzchips{gap:8px}
.ttag svg.i{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}
.btn svg.i{width:18px;height:18px}

/* ===== Výber vzhľadu ===== */
.pk-l{margin:16px 0 8px;font-size:14px;font-weight:600;color:var(--text-2)}
.pk-l:first-child{margin-top:0}
.lookcards,.palcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lookcards button,.palcards button{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px;border:1.5px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .16s var(--ease-out)}
.lookcards button.on,.palcards button.on{border:2px solid var(--accent);padding:7.5px;box-shadow:0 0 0 3px var(--accent-soft)}
.lookcards button:active,.palcards button:active{transform:scale(.97)}
.lt b,.palcards b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.lt small{display:block;font-size:12px;color:var(--text-3);line-height:1.3;margin-top:2px}
.lk{position:relative;height:58px;border-radius:10px;background:var(--bg);padding:8px 10px;overflow:hidden;display:flex;flex-direction:column;gap:4px}
.lk b{font-size:20px;line-height:1;color:var(--ink)}
.lk i{display:block;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 25%,transparent);width:70%}
.lk i + i{width:45%}
.lk-clean b{font-family:Onest,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.lk-cozy{background:var(--note)}
.lk-cozy b{font-family:"Young Serif",Georgia,serif;font-weight:400}
.lk-retro{background:var(--warn-soft);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--hard)}
.lk-retro b{font-family:Fraunces,Georgia,serif;font-weight:800}
.swatch{display:flex;height:40px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch i{flex:1}
.swatch i:first-child{flex:2}
.palcards button{gap:6px}
.segc{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border-radius:12px;background:var(--seg-bg)}
.segc button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 8px;border:0;border-radius:9px;background:transparent;color:var(--text-3);font:500 14px/1.2 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.segc button svg.i{width:17px;height:17px}
.segc button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}
:root[data-look="retro"] .segc{padding:0;gap:0;border:2px solid var(--ink);overflow:hidden}
:root[data-look="retro"] .segc button{border-radius:0;color:var(--ink);font-weight:700}
:root[data-look="retro"] .segc button + button{border-left:2px solid var(--ink)}
:root[data-look="retro"] .segc button.on{background:var(--warn-bar);color:var(--on-soon);box-shadow:none}
:root[data-look="retro"] .lookcards button.on,:root[data-look="retro"] .palcards button.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--hard)}

/* ===== Nastavenia ===== */
.acct{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:12px;border-radius:var(--r);background:var(--chip)}
.av{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-weight:700;font-size:14px}
.av.big{width:44px;height:44px;font-size:18px;background:var(--accent);color:var(--accent-ink)}
.mm{flex:1;min-width:0;display:flex;flex-direction:column}
.mm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm small{font-size:13px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sset{margin-top:28px}
.sset > h3,.dev summary h3{margin:0 2px 8px;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink)}
.sset > .hint{margin:-4px 2px 10px}
.hint{margin:0;font-size:14px;color:var(--text-3);line-height:1.45}
.sbox{border-radius:var(--r);background:var(--paper);border:1px solid var(--line);overflow:hidden}
:root[data-look="retro"] .sbox{border:2px solid var(--ink)}
.sbox.pad{padding:14px}
.srow{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;width:100%;background:none;border:0;font:inherit;color:var(--ink);text-align:left}
.sbox > * + *{border-top:1px solid var(--line)}
:root[data-look="retro"] .sbox > * + *{border-top:2px dashed var(--line)}
.srow.col{flex-direction:column;align-items:stretch;gap:8px}
.srow.col > b{font-weight:600}
.srow > label{font-weight:600;flex:none}
.sctl{flex:1;display:flex;gap:8px;min-width:0}
.sctl input{flex:1;min-width:0}
.srow.swrow span{flex:1;display:flex;flex-direction:column}
.srow.swrow small,.disc summary small{font-size:13px;color:var(--text-3)}
.srow.swrow{cursor:pointer}
details.disc{display:block;padding:0}
details.disc > summary{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;cursor:pointer;list-style:none}
details.disc > summary::-webkit-details-marker{display:none}
details.disc > summary span{flex:1;display:flex;flex-direction:column}
details.disc > summary b{font-weight:600}
details.disc > summary svg.i,.dev summary svg.i{width:18px;height:18px;color:var(--text-3);transition:transform .2s var(--ease-out)}
details.disc[open] > summary svg.i,.dev[open] summary svg.i{transform:rotate(180deg)}
details.disc[open]{padding-bottom:14px}
details.disc > :not(summary){margin-left:14px;margin-right:14px}
details.disc[open] > :not(summary){animation:rise .3s var(--ease-out)}
.dev summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;min-height:44px}
.dev summary::-webkit-details-marker{display:none}
.dev summary h3{margin:0}
.dev[open] .sbox{animation:rise .3s var(--ease-out)}
.hhm{margin:0;padding:6px 14px;gap:0}
.hhm li{background:none;padding:8px 0;border-radius:0;gap:12px;justify-content:flex-start}
.hhm li + li{border-top:1px solid var(--line)}
.hhm .btn{margin-left:auto}
.hhtag{background:var(--warn-soft);color:var(--warn);font-size:12px;letter-spacing:0;padding:2px 8px}
.sfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.sfoot .btn.ghost{color:var(--text-2)}
.mcpurl{font-size:12px}
.plrow{background:var(--chip)}
.pllist{margin-top:8px}
.itile.sm{width:40px;height:40px}
.itile.sm svg.i{width:20px;height:20px}

/* ===== Logo (len znak, bez dlaždice) ===== */
.logo{display:block;flex:none}
.logo .lg-fg{fill:var(--accent);stroke:var(--accent)}
.logo .lg-fg rect,.logo .lg-fg g path{stroke:none}
.logo .lg-steam{stroke:var(--accent)}
.logo.big{width:64px;height:auto;margin:0 auto 20px}

/* aktívna záložka v lište: zvýraznenie pod ikonou aj názvom (ako v Retro), nie len pod ikonou */
:root{--nav-h:68px}
.tab-ind{top:5px;bottom:5px;height:auto;padding:0 4px}
.tab-ind::before{width:100%;max-width:76px;border-radius:16px}
.tabs button{padding-top:0;justify-content:center;gap:3px}
:root[data-look="retro"] .tab-ind{top:5px;bottom:5px}

/* Domov: dátum a pozdrav priamo v hlavičke */
#ptitle.hello2{white-space:normal;line-height:1.1;font-size:var(--h1)}
#ptitle.hello2 small{display:block;font:400 13px/1.3 var(--sans);letter-spacing:0;color:var(--text-3);margin-bottom:2px}
.sumrow{margin-top:4px}

/* bez označovania textu a bez systémovej bubliny pri podržaní (iOS); kopírovať sa dá len tam, kde to dáva zmysel */
body,dialog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable],ol.steps,table.ing,.cdesc.full,.mcpurl,code,.code,.tipline,.hint code{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* bez zväčšovania stránky prstami a dvojťukom */
html{touch-action:pan-x pan-y}

/* nadpis v hlavičke: dosť miesta nad písmenami, nech sa mäkčeň v „Č“ neoreže */
.top-inner h1{line-height:1.3;padding-top:2px}
#ptitle.hello2{line-height:1.2}

/* ikonové tlačidlá: Safari na iPhone a iPade pridáva tlačidlám vlastný vnútorný okraj a ikonu posúva,
   preto nulový okraj a centrovanie cez flex (funguje vo všetkých prehliadačoch rovnako) */
.mini,.fab,.vtog button,.top-inner .btn.ghost,.segi button,.qbtn,.ck,.segc button,.icopt,.qmb{-webkit-appearance:none;appearance:none}
.mini,.fab,.vtog button,.top-inner .btn.ghost,.qbtn,.ck{padding:0;display:inline-flex;align-items:center;justify-content:center}
.fab{display:flex}
.mini > svg,.fab > svg,.vtog button > svg,.top-inner .btn.ghost > svg,.qbtn > svg,.ck > svg{flex:none;margin:0;display:block}

/* =====================================================================
   ŠIRŠIE OBRAZOVKY: tablet, počítač a telefón na šírku
   ===================================================================== */
.grps,.dcols,.cgrid{display:block}
@media (min-width:768px){
  main{max-width:1120px;padding:16px 24px}
  .grps:not(.t){display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0 20px;align-items:start}
  .tiles2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .hero .tiles2{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .dcols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 24px;align-items:start}
  .dcol > .fsteps:first-child,.dcol > .wzinvite:first-child{margin-top:18px}
  .rgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}
  .cgrid.one{grid-template-columns:minmax(0,1fr)}
  .cgrid .cplan .sech{margin-top:14px}
  .cgrid.one .cplan .sech{margin-top:28px}
  .invctl,.recbar{max-width:none}
  dialog{width:min(640px,calc(100vw - 48px))}
  /* hlavička zarovnaná s obsahom */
  .top-inner{max-width:1072px}
  header.top{padding-left:24px;padding-right:24px}
}

/* bočná lišta namiesto spodnej: počítač, tablet na šírku a telefón na šírku */
@media (min-width:1000px),(orientation:landscape) and (max-height:540px){
  :root{--rail:88px;--nav-h:0px;--nav-gap:0px}
  body{padding-left:calc(var(--rail) + env(safe-area-inset-left, 0px));padding-right:env(safe-area-inset-right, 0px);padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 32px)}
  :root:not([data-look]) body,:root[data-look="cozy"] body{padding-left:calc(var(--rail) + 12px + env(safe-area-inset-left, 0px));padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 32px)}
  nav.tabs,:root[data-look] nav.tabs{top:0;bottom:0;left:0;right:auto;width:calc(var(--rail) + env(safe-area-inset-left, 0px));max-width:none;margin:0;padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);border-top:0;border-right:1px solid var(--line);border-radius:0;display:flex;align-items:center}
  :root:not([data-look]) nav.tabs,:root[data-look="cozy"] nav.tabs{top:12px;bottom:12px;left:12px;width:var(--rail);border:0;border-radius:24px}
  :root[data-look="retro"] nav.tabs{border-top:0;border-right:2px solid var(--ink)}
  .tabs-inner{width:100%;height:auto;grid-template-columns:1fr;grid-auto-rows:72px}
  .tab-ind,:root[data-look="retro"] .tab-ind{top:0;bottom:auto;left:0;width:100%;height:72px;padding:5px 8px;transform:translateY(calc(var(--ti) * 100%))}
  .tab-ind::before{max-width:none}
  .tabs .badge{top:8px}
  .fab{right:calc(16px + env(safe-area-inset-right, 0px))}
  .movepill{left:var(--rail)}
  .toast{left:calc(50% + var(--rail) / 2)}
  header.top{padding-left:24px;padding-right:24px}
}

/* telefón na šírku: málo výšky, všetko o kúsok menšie a tesnejšie */
@media (orientation:landscape) and (max-height:540px){
  .tabs-inner{grid-auto-rows:60px}
  .tab-ind,:root[data-look="retro"] .tab-ind{height:60px;padding:4px 8px}
  .tabs button{font-size:10px}
  header.top{padding-top:calc(env(safe-area-inset-top, 0px) + 4px);padding-bottom:4px}
  .top-inner{min-height:36px}
  .top-inner h1{font-size:22px}
  #ptitle.hello2{font-size:24px}
  #ptitle.hello2 small{font-size:12px}
  main{padding-top:8px}
  .hero{margin-top:10px}
  .sech{margin:20px 2px 8px}
  .fab{width:48px;height:48px;bottom:calc(env(safe-area-inset-bottom, 0px) + 12px)}
  dialog{max-height:calc(100dvh - 16px)}
  .dlg{max-height:calc(100dvh - 16px)}
}

/* recept na širokej obrazovke: suroviny vľavo (ostanú na očiach), postup vpravo vo väčšom písme */
.rcols{display:block}
@media (min-width:768px){
  .rcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:0 20px;align-items:start}
  .rcols .rings{position:sticky;top:84px;max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain}
  ol.steps li{max-width:none;font-size:17px;line-height:1.55;margin-bottom:14px}
  .rhero .pgrid,.rhero .nut{max-width:760px}
  /* Domov: návrhy na varenie v mriežke namiesto posúvania do strany, nič sa neoreže */
  .hscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;overflow:visible;margin:0;padding:0}
  .hscroll .cook{width:auto}
}
@media (min-width:1000px){ ol.steps li{font-size:18px} }