@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/Cormorant-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/Cormorant-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/Cormorant-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/Cormorant-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =====================================================================
   Healthy Bowl "Luxe" (2026-10-28), aplikacia. Rovnaky jazyk ako web:
   Cormorant Garamond, lesna zelena, slonovina, sampanske zlato, ostrejsie
   rohy, tenke zlate linky. Nacitava sa PO atelier.css, meni iba vzhlad.
   Rovnaky subor je v mobile/ aj v app/ui/.
   ===================================================================== */
:root{
  --font-display:"Cormorant Garamond","Cormorant","Georgia Pro",Georgia,serif;
  --canvas:#F3EEE2; --paper:#FBF8F0; --paper-2:#FBF8F0; --sunken:#ECE6D6;
  --ink:#0B1D17; --ink-soft:#4A5A52;
  --line:#DDD5C0; --line-strong:#C9BFA4;
  --gold:#A8843C; --gold-deep:#7A5B12; --gold-2:#DCC283; --gold-line:rgba(168,132,60,.42);
  --moss:#16533A; --moss-deep:#0F3D2B; --moss-bg:#E4E9DC; --moss-soft:#8DAA98;
  --accent-solid:#0F3D2B; --accent-solid-hover:#0B2D20;
  --hero-a:#0B1D17; --hero-b:#14412F;
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 34px -26px rgba(11,29,23,.45);
}
body{background-image:radial-gradient(760px 420px at 0% 0%,rgba(22,83,58,.07),transparent 70%),radial-gradient(620px 380px at 100% 12%,rgba(168,132,60,.10),transparent 70%)}

/* typografia: Cormorant je jemnejsi a mensi nez Fraunces, preto vacsie velkosti */
.page-title,main h1,.view-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,8vw,56px);letter-spacing:-.01em;line-height:1}
.card h2,.card h3,.philosophy-card h2,.fb-head h2,.atl-title,.atl-name,.onboarding-overlay h2,.onboarding-overlay h3,.modal h2,.modal h3{font-family:var(--font-display);font-weight:500;letter-spacing:0}
.card h2,.philosophy-card h2{font-size:clamp(24px,2.4vw,30px);line-height:1.05}
.wordmark{font-family:var(--font-display);font-size:25px;font-weight:500}
.wordmark-text span{color:var(--gold)}
.eyebrow,.fb-eb,.atl-step{font-family:var(--font,Inter,system-ui,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{background:var(--gold);width:26px}
.view-head::after{width:96px;background:linear-gradient(90deg,var(--gold),transparent)}

/* ostrejsie rohy, hairline namiesto tienov */
.card,.philosophy-card,.kpi,.fb-card,.atl-guide,.onboarding-card,.modal,.panel{border-radius:3px}
.card,.philosophy-card,.kpi{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
@media (hover:hover){.card:hover,.kpi:hover{transform:none;border-color:var(--gold)}}
input,select,textarea{border-radius:2px}
.badge,.chip,.pill,.tag{border-radius:2px}

/* KPI: kruhova obrysova ikona a velke cisla */
.kpi{padding:18px 18px 16px}
.kpi-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.kpi-ic{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--gold-line);color:var(--gold-deep)}
.kpi-val{font-family:var(--font-display);font-size:clamp(34px,3.2vw,44px);font-weight:500;letter-spacing:-.01em;margin:10px 0 2px}
.kpi-sub{font-size:12px}

/* hero dnesnej misky: tmava lesna zelena so zlatym lemom */
.hero{border-radius:3px;background:radial-gradient(120% 140% at 100% 0%,#1D5B42 0%,var(--hero-b) 40%,var(--hero-a) 100%);box-shadow:0 0 0 1px var(--gold-line),0 0 0 7px rgba(168,132,60,.07),0 30px 50px -28px rgba(11,29,23,.7);color:#F6F1E4}
.hero::before{background:radial-gradient(closest-side,rgba(220,194,131,.22),transparent)}
.hero h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-.01em;color:#F6F1E4}
.hero p,.hero .hero-sub{color:rgba(246,241,228,.82)}
.hero-tags span{border-radius:2px;background:rgba(11,29,23,.55);color:#F6F1E4;border:1px solid rgba(220,194,131,.45);font-family:var(--font,Inter,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.hero-photo{box-shadow:0 26px 50px rgba(0,0,0,.5),0 0 0 6px rgba(11,29,23,.9),0 0 0 7px var(--gold-2),0 0 0 17px rgba(220,194,131,.08),0 0 0 18px rgba(220,194,131,.35)}

/* tlacidla: obdlzniky, tracked, zlata linka */
.btn{border-radius:2px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.btn:not(.ghost):not(.danger){background:var(--moss-deep);color:#F6F1E4;border:1px solid var(--gold);box-shadow:none}
.btn:not(.ghost):not(.danger):hover{background:#0B2D20;box-shadow:0 0 0 3px rgba(168,132,60,.2)}
.btn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.icon-btn{border-radius:50%;border-color:var(--gold-line);background:transparent}
.icon-btn:hover{border-color:var(--gold)}

/* navigacia: obrysove kruhove ikony, aktivna vyplnena zelena + zlato */
.tab-ic{width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid var(--gold-line);color:var(--gold-deep)}
nav.tabs button.active{background:transparent;color:var(--ink)}
nav.tabs button.active .tab-ic{background:var(--moss-deep);color:var(--gold-2);border-color:var(--gold)}
nav.tabs button{letter-spacing:.04em}
@media (min-width:721px){
  nav.tabs button{border-radius:0;border-left:2px solid transparent;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
  nav.tabs button.active{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(168,132,60,.12),transparent)}
}
@media (max-width:720px){
  nav.tabs{border-radius:4px;background:color-mix(in srgb,var(--paper) 90%,transparent);border-color:var(--gold-line)}
  nav.tabs button.active::after{background:var(--gold)}
}

/* hlavicka a Listok */
.logo-mark{background:var(--moss-deep);box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(168,132,60,.18)}
.atl-open{border-radius:2px;border-color:var(--gold)}
.atl-open i,.atl-guide .atl-av{background:var(--moss-deep);box-shadow:0 0 0 1px var(--gold)}
.atl-nav button{border-radius:2px;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.atl-nav button.pri{background:var(--moss-deep);border-color:var(--gold);box-shadow:none}
.atl-dots i.on{background:var(--gold)}
.atl-spot{border-radius:3px}
.atl-video{border-radius:3px}

/* uvodny sprievodca */
.onboarding-overlay [class*="dot"].active,.onboarding-overlay [class*="dot"].on{background:var(--gold)}

/* tmavy rezim: lesna zelena a zlato */
:root[data-theme="dark"]{
  --canvas:#08130F; --paper:#0F1D17; --paper-2:#0F1D17; --sunken:#0B1712;
  --ink:#F1EBDA; --ink-soft:#A9B3AB; --line:#22332B; --line-strong:#33473D;
  --gold:#DCC283; --gold-deep:#E8D49C; --moss:#2C7A57; --moss-deep:#1E5B41;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --canvas:#08130F; --paper:#0F1D17; --paper-2:#0F1D17; --sunken:#0B1712;
  --ink:#F1EBDA; --ink-soft:#A9B3AB; --line:#22332B; --line-strong:#33473D;
  --gold:#DCC283; --gold-deep:#E8D49C; --moss:#2C7A57; --moss-deep:#1E5B41;
}}

/* doladenie: grafy a stitky v palete (bez ruzovej/modrej/oranzovej) */
.progress-bar{fill:var(--moss-deep)}
.progress-bar:hover{fill:var(--gold)}
.progress-area-fill{fill:rgba(168,132,60,.16)}
.progress-area-line{stroke:var(--gold);stroke-width:1.6}
.progress-area-dot{fill:var(--gold)}
.progress-kpi-tile,.progress-kpi-tile::after{border-radius:3px}
.progress-kpi-tile::after,.progress-kpi-tile:nth-child(n)::after{background:var(--gold);width:2px}
.progress-kpi-tile .label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.progress-kpi-tile .value{font-family:var(--font-display);font-size:34px;font-weight:500}
.hero-tags span{border-radius:2px}
@media (max-width:720px){
  .btn{letter-spacing:.1em;font-size:11.5px}
  .hero-tags{flex-wrap:wrap;overflow:visible;margin-right:0;padding-right:0}
  .hero-tags span{font-size:10px;letter-spacing:.1em;padding:5px 8px}
  .kpi-val{font-size:32px}
}
.kpi-val,.progress-kpi-tile .value,.hero h2,.page-title,main h1,.card h2{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}

/* =====================================================================
   Kolo 2: zvysok dna (panely, odznaky, grafy, zoznamy) v rovnakej palete
   ===================================================================== */
/* farebne panely (mentova/modra/...) -> slonovina s hairline */
.panel{--acc-bg:var(--paper)!important;background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow)}
.panel .sec-head{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
/* ocislovane odznaky: obrys + zlata cislica v serife */
.sec-head .badge{--b:transparent!important;width:42px;height:42px;background:transparent!important;color:var(--gold-deep);border:1px solid var(--gold);box-shadow:none;font-family:var(--font-display);font-size:24px;font-weight:500;font-feature-settings:"lnum" 1}
.sec-head .badge .ic{color:var(--gold-deep);stroke:currentColor}
.sec-head h2{font-size:clamp(24px,2.2vw,30px)!important;line-height:1.05}
.sec-head p{font-size:12.5px}
/* surovinove karty */
.ing-card{border-radius:3px;border-color:var(--line);box-shadow:none}
@media (hover:hover){.ing-card:hover{transform:none;border-color:var(--gold);box-shadow:0 18px 30px -22px rgba(11,29,23,.5)}}
/* seria dni */
.streak-days i{border-radius:1px;height:6px}
.streak-days i.on{background:var(--gold)}
/* makra: tenke pruhy, farby len zlato/zelena */
.macro-bar{height:3px;border-radius:0;background:var(--line-strong)}
.macro-bar .band{background:var(--moss);opacity:.55;border-radius:0}
.macro-bar .marker{background:var(--gold);width:3px;border-radius:0}
.macro-tile .label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.macro-tile .label::before{border-radius:0;width:8px;height:8px;background:var(--gold)}
.macro-tile .value{font-family:var(--font-display);font-size:30px;font-weight:500;font-feature-settings:"lnum" 1}
.macro-bar-caption{border-radius:2px;background:transparent;border:1px solid var(--gold-line);color:var(--moss-deep)}
/* alergeny a stitky */
.allergen-chip,.diet-badge,.diet-chip{border-radius:2px}
.allergen-num{border-radius:50%;background:transparent;color:#8C2A3A;border:1px solid currentColor}
.allergen-chip{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
/* krok pripravy a kontrola surovin */
.prep-ring .bar{stroke:var(--gold)}
.prep-ring span{font-family:var(--font-display);font-size:18px}
/* poslednych 7 dni */
.week-day{border-radius:2px;background:transparent}
.week-day:hover{transform:none;box-shadow:none;border-color:var(--gold)}
.week-day.active{border-color:var(--gold);background:rgba(168,132,60,.12)}
.week-day-num{font-family:var(--font-display);font-size:26px;font-weight:500;font-feature-settings:"lnum" 1}
.week-day-dow{letter-spacing:.2em}
.week-day-dot{border-radius:0;background:var(--gold)}
/* nalada / check-in */
.checkin-mood{border-radius:2px}
/* odznaky karty (ikonky v nadpisoch) a rozne farebne ikonky */
[class*="-ic"]:not(.tab-ic):not(.kpi-ic){border-radius:50%}
.streak-chip{border-radius:2px;background:transparent;border:1px solid var(--gold-line);color:var(--gold-deep)}
.streak-chip svg,.streak-chip .ic{color:var(--gold)}
/* formulare */
input,select,textarea{border-color:var(--line-strong);background:var(--paper)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:0;box-shadow:0 0 0 3px rgba(168,132,60,.18)}
/* spodne karty: tip dna, tento mesiac */
.tip-icon{border-radius:50%;background:transparent;border:1px solid var(--gold-line);color:var(--gold-deep)}

/* hero: prva veta ("Jedna miska, 900 g.") vzdy v jednom riadku */
.hero h2 .hero-l1{white-space:nowrap}
@media (max-width:720px){.hero h2{font-size:clamp(24px,7.2vw,30px)}}

/* nakupny zoznam: paleta, tabulka a celkova cena */
.shopping-store-picker{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--gold)}
.shopping-store-picker h2,.shopping-store-picker h3,.shopping-store-group h2,.shopping-store-group h3{font-family:var(--font-display);font-size:28px;font-weight:500;line-height:1.05}
.shopping-store-options .chip,.shopping-store-options button,.shopping-store-options label{border-radius:2px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.shopping-store-options .chip:hover,.shopping-store-options button:hover{border-color:var(--gold)}
.shopping-store-options [aria-pressed="true"],.shopping-store-options .active,.shopping-store-options .on{background:var(--moss-deep);color:var(--gold-2);border-color:var(--gold)}
.shopping-cat-row td{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);border-bottom:1px solid var(--gold-line)}
.shopping-cat-count{border-radius:50%;background:transparent;border:1px solid var(--gold-line);color:var(--gold-deep)}
table thead th,.shopping-table th{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.total-row td{border-top:1px solid var(--gold)}
.shopping-total-banner{border-radius:3px;background:var(--moss-deep);border:1px solid var(--gold);box-shadow:0 0 0 5px rgba(168,132,60,.08),0 24px 36px -24px rgba(11,29,23,.7);color:#F6F1E4;text-transform:uppercase;letter-spacing:.18em;font-size:12px;padding:18px 22px}
.shopping-total-banner .value{font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:0;color:var(--gold-2);text-transform:none;font-feature-settings:"lnum" 1}
input[type="checkbox"]{accent-color:var(--moss-deep)}
.shopping-cat-row td{border-bottom:0;padding-bottom:10px}
.shopping-cat-row{border-bottom:1px solid var(--gold-line)}

/* ---- oprava: nic sa nesmie posuvat do stran ---- */
html,body{max-width:100%;overflow-x:hidden}
main,.view,.card,.panel,.day-header,.controls{min-width:0;max-width:100%}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.controls .btn{flex:0 1 auto}
@media (max-width:720px){
  .controls input[type="date"]{flex:1 1 130px;min-width:0}
  .controls .range-sep{display:none}
  .controls .btn{flex:1 1 140px;padding-left:10px;padding-right:10px}
  .btn{letter-spacing:.06em;font-size:11px}
  .shopping-list-actions .btn{flex:1 1 auto}
}
/* zaskrtavacie polia: citatelne v oboch rezimoch */
input[type="checkbox"]{accent-color:var(--moss-deep);background:transparent}
:root[data-theme="dark"] input[type="checkbox"]{accent-color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) input[type="checkbox"]{accent-color:var(--gold)}}
@media (max-width:720px){.controls input[type="date"]{flex:1 1 44%}.controls .btn{flex:1 1 44%}}
@media (max-width:720px){
  #view-shopping .controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #view-shopping .controls input[type="date"],#view-shopping .controls .btn{width:100%;min-width:0;flex:none}
}

/* ---- uvodna hero obrazovka pri spusteni ---- */
.hb-splash{position:fixed;inset:0;z-index:9999;background:#0B1D17;color:#F6F1E4;opacity:0;transition:opacity .6s ease;overflow:hidden}
.hb-splash.in{opacity:1}
.hb-splash.out{opacity:0;pointer-events:none}
.hb-sp-bg,.hb-sp-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-sp-bg{background:radial-gradient(120% 90% at 80% 0%,#1D5B42,#0B1D17 70%)}
.hb-sp-bg video{opacity:.55;transform:scale(1.04)}
.hb-sp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,23,.72) 0%,rgba(11,29,23,.35) 38%,rgba(11,29,23,.88) 100%)}
.hb-sp-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:max(26px,env(safe-area-inset-top)) clamp(24px,6vw,72px) max(28px,env(safe-area-inset-bottom));max-width:1280px;margin:0 auto}
.hb-sp-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:28px;font-weight:500}
.hb-sp-logo em{color:var(--gold-2);font-weight:400}
.hb-sp-mark{width:38px;height:38px;border:1px solid var(--gold-2);border-radius:50%;display:grid;place-items:center;color:var(--gold-2)}
.hb-sp-mid{max-width:760px}
.hb-sp-eb{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.hb-sp-eb::before{content:"";width:34px;height:1px;background:var(--gold-2)}
.hb-sp-h{font-family:var(--font-display);font-weight:300;font-size:clamp(52px,12vw,116px);line-height:.95;letter-spacing:-.02em;margin:0 0 22px;color:#F6F1E4}
.hb-sp-h em{display:block;font-style:italic;font-weight:400;color:var(--gold-2)}
.hb-sp-p{font-size:clamp(15px,2vw,18px);line-height:1.6;color:rgba(246,241,228,.78);max-width:32em;margin:0 0 30px}
.hb-sp-go{font:inherit;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:18px 30px;background:var(--gold-2);color:#0B1D17;border:1px solid var(--gold-2);border-radius:2px;cursor:pointer;display:inline-flex;gap:14px;align-items:center}
.hb-sp-go:hover{background:#E8D49C}
.hb-sp-go:focus-visible{outline:2px solid #F6F1E4;outline-offset:3px}
.hb-sp-foot{font-size:11px;letter-spacing:.3em;color:rgba(220,194,131,.75)}
.hb-sp-mid>*{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.hb-splash.in .hb-sp-mid>*{opacity:1;transform:none}
.hb-splash.in .hb-sp-mid>*:nth-child(2){transition-delay:.12s}.hb-splash.in .hb-sp-mid>*:nth-child(3){transition-delay:.26s}.hb-splash.in .hb-sp-mid>*:nth-child(4){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.hb-splash,.hb-sp-mid>*{transition:none}}