/* =====================================================================
   Healthy Bowl "Atelier" 2026-10-28 - prenos schvaleneho navrhu
   redizajn-2026-10-23 (smotanovy podklad, svieza zelena, zlate detaily,
   serifove nadpisy, sprievodca Listok, video misky v uvode).
   Nacitava sa PO style.css a mobile.css: iba prepisuje tokeny a doladuje
   komponenty, ziadna logika aplikacie sa nemeni. Rovnaky subor je v mobile/
   aj v app/ui/ (pravidlo: mobil a desktop vzdy spolu).
   ===================================================================== */
:root{
  --canvas:#FBF9F4; --paper:#FFFFFF; --paper-2:#FFFFFF; --sunken:#F3F1EA;
  --ink:#14302A; --ink-soft:#3F5A52;
  --line:#E6E3D9; --line-strong:#D6D2C4;
  --moss:#2E9C63; --moss-deep:#1F7A4B; --moss-soft:#9CCBAA; --moss-bg:#E3F4EA; --mark:#CFEFD9;
  --gold:#C7A24F; --gold-deep:#7A5B12; --gold-line:rgba(199,162,79,.45); --gold-soft:#F6EBD2; --gold-2:#E2C27A;
  --header-bg:rgba(251,249,244,.88);
  --accent-solid:#1F7A4B; --accent-solid-hover:#17613B;
  --shadow:0 10px 24px -18px rgba(20,48,42,.28),0 1px 2px rgba(20,48,42,.05);
  --shadow-hover:0 18px 34px -18px rgba(20,48,42,.34),0 2px 4px rgba(20,48,42,.06);
  --hero-a:#1F7A4B; --hero-b:#2E9C63;
  --font-display:"Fraunces","Georgia Pro","Palatino Linotype",Georgia,"Noto Serif",serif;
  --green:#1F7A4B; --green-bg:#E3F4EA;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0C1712; --paper:#13211B; --paper-2:#13211B; --sunken:#0F1B16;
    --gold:#E2C27A; --gold-deep:#E8CF93; --gold-line:rgba(226,194,122,.4); --gold-soft:rgba(226,194,122,.14);
    --header-bg:rgba(12,23,18,.86); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --canvas:#0C1712; --paper:#13211B; --paper-2:#13211B; --sunken:#0F1B16;
  --gold:#E2C27A; --gold-deep:#E8CF93; --gold-line:rgba(226,194,122,.4); --gold-soft:rgba(226,194,122,.14);
  --header-bg:rgba(12,23,18,.86); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.5);
}

/* jemne zelene a zlate osvetlenie na pozadi (z navrhu) */
body{background-image:radial-gradient(760px 420px at 0% 0%,rgba(46,156,99,.10),transparent 70%),radial-gradient(620px 380px at 100% 12%,rgba(199,162,79,.10),transparent 70%);background-attachment:fixed;}

/* serifove nadpisy, bez zvyraznovaca (jej zamietnutie podciarknutych nadpisov) */
.wordmark{font-weight:500;letter-spacing:.01em;}
.wordmark-text span{font-style:italic;font-weight:400;color:var(--moss-deep);}
.page-title, main h1{font-weight:500;letter-spacing:-.015em;line-height:1.05;}
.page-title .hl, #view-today .hl{background:none;}
.card h2, .card h3, .philosophy-card h2, .hero h2{font-weight:500;letter-spacing:-.005em;}
.eyebrow{font-family:ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,monospace;font-size:var(--fs-11);font-weight:500;letter-spacing:.18em;color:var(--moss-deep);}

/* logo a hlavicka */
.logo-mark{background:linear-gradient(135deg,var(--moss),var(--moss-deep));box-shadow:0 0 0 3px var(--moss-bg);border-radius:50%;}
header.top.scrolled{border-bottom-color:var(--gold-line);}

/* karty: vacsie zaoblenie, jemny zlaty okraj pri hover */
.card, .philosophy-card, .kpi{border-radius:22px;}
@media (hover:hover){.card:hover{border-color:var(--gold-line);}}

/* hero dnesnej misky: zelena s jemnou zlatou ziarou */
.hero{background:radial-gradient(120% 140% at 100% 0%,#3DB373 0%,var(--hero-b) 34%,var(--hero-a) 100%);box-shadow:0 20px 34px -20px rgba(31,122,75,.55),0 0 0 1px var(--gold-line);border-radius:26px;}
.hero::before{content:"";position:absolute;left:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(226,194,122,.30),transparent);pointer-events:none;}
.hero-tags span{background:rgba(255,255,255,.88);color:var(--ink);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:500;letter-spacing:.02em;}
.hero-photo{box-shadow:0 18px 40px rgba(0,0,0,.30),0 0 0 6px rgba(226,194,122,.38);}

/* tlacidla: zelena s hlbkou */
.btn:not(.ghost):not(.danger){background:linear-gradient(135deg,var(--moss),var(--moss-deep));border-color:transparent;box-shadow:0 12px 24px -12px rgba(46,156,99,.75);}

/* spodna lista na telefone: biela s jemnym rozmazanim a zlatou bodkou pod aktivnou polozkou */
@media (max-width:720px){
  nav.tabs{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top-color:var(--line);box-shadow:0 -10px 28px -16px rgba(20,48,42,.25);}
  nav.tabs button.active::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 auto;}
}

/* ---------- uvod: video misky v prvom kroku sprievodcu ---------- */
.atl-video{position:relative;border-radius:20px;overflow:hidden;margin:0 0 14px;background:#0F2621;border:1px solid var(--gold-line);aspect-ratio:16/10;}
.atl-video video{width:100%;height:100%;object-fit:cover;display:block;}
.atl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;border:0;background:rgba(255,255,255,.94);color:#14302A;font:inherit;font-weight:700;font-size:var(--fs-13);cursor:pointer;box-shadow:0 14px 30px -10px rgba(20,48,42,.6);}
.atl-play i{width:30px;height:30px;border-radius:50%;background:var(--moss);display:grid;place-items:center;flex:none;}
.atl-play svg{width:14px;height:14px;fill:#fff;}
.atl-play[hidden]{display:none;}
.atl-mute{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#14302A;display:grid;place-items:center;cursor:pointer;}
.atl-mute svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.atl-mute[hidden]{display:none;}
.atl-mute .atl-off{display:none;} .atl-mute.is-muted .atl-off{display:block;} .atl-mute.is-muted .atl-on{display:none;}

/* ---------- sprievodca Listok ---------- */
.atl-open{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:49;display:flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--gold-line);box-shadow:0 20px 40px -16px rgba(20,48,42,.45);cursor:pointer;font:inherit;font-weight:700;font-size:var(--fs-13);color:var(--ink);}
.atl-open[hidden]{display:none;}
.atl-open i,.atl-guide .atl-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--moss),var(--moss-deep));display:grid;place-items:center;flex:none;}
.atl-open svg,.atl-av svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:720px){.atl-open{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:8px;}.atl-open span{display:none;}}
.atl-guide{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:230;width:min(380px,calc(100vw - 32px));background:var(--paper);color:var(--ink);border:1px solid var(--gold-line);border-radius:22px;padding:16px;box-shadow:0 30px 60px -20px rgba(20,48,42,.5);display:flex;flex-direction:column;gap:10px;}
@media (max-width:720px){.atl-guide{bottom:calc(84px + env(safe-area-inset-bottom,0px));}}
.atl-guide[hidden]{display:none;}
.atl-gh{display:flex;align-items:center;gap:10px;}
.atl-av{width:40px;height:40px;box-shadow:0 0 0 3px var(--moss-bg);}
.atl-name{font-family:var(--font-display);font-size:var(--fs-16);font-weight:500;line-height:1.1;}
.atl-step{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--fs-10);letter-spacing:.14em;color:var(--moss-deep);text-transform:uppercase;}
.atl-tools{margin-left:auto;display:flex;gap:6px;}
.atl-ib{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font:inherit;font-size:18px;line-height:1;}
.atl-ib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.atl-ib.on{background:var(--moss-bg);border-color:transparent;color:var(--moss-deep);}
.atl-ib.speaking{animation:atlTalk 1s ease-in-out infinite;}
@keyframes atlTalk{50%{box-shadow:0 0 0 5px var(--moss-bg);}}
.atl-title{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;line-height:1.15;margin:0;}
.atl-text{margin:0;font-size:var(--fs-14);color:var(--ink-soft);line-height:1.5;}
.atl-dots{display:flex;gap:5px;}
.atl-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-strong);}
.atl-dots i.on{background:var(--moss);width:16px;}
.atl-nav{display:flex;gap:8px;align-items:center;}
.atl-nav button{font:inherit;font-weight:700;font-size:var(--fs-13);border-radius:12px;padding:10px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;}
.atl-nav button.pri{margin-left:auto;background:linear-gradient(135deg,var(--moss),var(--moss-deep));color:#fff;border-color:transparent;box-shadow:0 10px 20px -10px rgba(46,156,99,.8);}
.atl-nav button[disabled]{opacity:.45;cursor:default;}
.atl-guide button:focus-visible,.atl-open:focus-visible,.atl-play:focus-visible,.atl-mute:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.atl-spot{position:relative;z-index:1;border-radius:22px;box-shadow:0 0 0 3px var(--gold-2),0 0 0 9px rgba(226,194,122,.25),0 18px 40px -16px rgba(199,162,79,.7)!important;animation:atlSpot 1.6s ease-in-out infinite;}
@keyframes atlSpot{0%,100%{box-shadow:0 0 0 3px var(--gold-2),0 0 0 9px rgba(226,194,122,.25);}50%{box-shadow:0 0 0 3px var(--gold-2),0 0 0 14px rgba(226,194,122,.08);}}
@media (prefers-reduced-motion:reduce){.atl-spot,.atl-ib.speaking{animation:none;}}

/* doladenie po prvom teste */
.hero h2, .view-head h1{font-family:var(--font-display);}
.atl-play{white-space:nowrap;}
.atl-video ~ .onboarding-emoji{display:none;}
.atl-spot{scroll-margin-top:120px;scroll-margin-bottom:260px;}

/* =====================================================================
   Kolo 2 (2026-10-28): luxusnejsi dojem - zlate linky, textura, hlbka,
   plavajuca spodna lista, velke serifove cisla. Len vzhlad.
   ===================================================================== */
::selection{background:var(--gold-2);color:#14302A;}
html{scrollbar-width:thin;scrollbar-color:var(--gold-line) transparent;}
:focus-visible{outline-color:var(--gold);}

/* jemna papierova textura (data: SVG, CSP img-src to povoluje) */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0 0.52 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
:root[data-theme="dark"] body::after{opacity:.18;mix-blend-mode:screen;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::after{opacity:.18;mix-blend-mode:screen;}}

/* nadpis stranky: zlata linka pod uvodnym riadkom */
.view-head{position:relative;padding-bottom:14px;margin-bottom:20px;}
.view-head::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);}
.eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:middle;margin-right:10px;}
.page-title, main h1{font-size:clamp(var(--fs-30),7vw,var(--fs-36));}

/* karty: jemny prechod, vrstveny tien a zlata linka na hrane */
.card, .philosophy-card, .kpi{
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 88%,#FFF8E6),var(--paper));
  border-color:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(20,48,42,.04),0 18px 36px -24px rgba(20,48,42,.34);
}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .philosophy-card,:root[data-theme="dark"] .kpi{background:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 36px -24px rgba(0,0,0,.6);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .philosophy-card,:root:not([data-theme="light"]) .kpi{background:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 36px -24px rgba(0,0,0,.6);}}
@media (hover:hover){.card,.kpi{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;}.card:hover,.kpi:hover{transform:translateY(-2px);}}

/* KPI: velke serifove cisla (editorialny dojem) */
.kpi .kpi-val, .kpi strong, .kpi b{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;}

/* hero: hlbsi, s jemnou textura a zlatym lemom */
.hero{padding:26px 24px;}
.hero h2{font-size:clamp(var(--fs-22),6vw,var(--fs-30));line-height:1.08;letter-spacing:-.015em;text-wrap:balance;}
.hero::after{background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent);}
.hero-photo{box-shadow:0 22px 44px rgba(0,0,0,.34),0 0 0 5px rgba(255,255,255,.16),0 0 0 6px rgba(226,194,122,.7);}

/* tlacidla: zlata linka okolo primarneho, vnutorny odlesk, jemne pismo */
.btn{letter-spacing:.015em;}
.btn:not(.ghost):not(.danger){box-shadow:0 0 0 1px rgba(226,194,122,.55),inset 0 1px 0 rgba(255,255,255,.28),0 14px 26px -12px rgba(46,156,99,.8);}
.btn.ghost{border-color:var(--line-strong);}
.btn:active{transform:translateY(1px);}

/* plavajuca spodna lista na telefone */
@media (max-width:720px){
  nav.tabs{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom,0px));padding:6px 4px;border:1px solid var(--gold-line);border-radius:26px;
    background:color-mix(in srgb,var(--paper) 82%,transparent);box-shadow:0 22px 40px -18px rgba(20,48,42,.5),0 0 0 1px rgba(255,255,255,.6) inset;}
  main{padding-bottom:110px;}
  .atl-open,.atl-guide{bottom:calc(96px + env(safe-area-inset-bottom,0px));}
}
:root[data-theme="dark"] nav.tabs{box-shadow:0 22px 40px -18px rgba(0,0,0,.7);}

/* hlavicka: tenka zlata linka namiesto hrubeho okraja */
header.top{border-bottom:1px solid transparent;background-image:linear-gradient(90deg,transparent,var(--gold-line),transparent);background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;}

/* jemne vynorenie kariet (iba ked to prehliadac dovoli) */
@media (prefers-reduced-motion:no-preference){
  .reveal,.card{animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
}

/* hero stitky: pevna tmava farba (aj v tmavom rezime je stitok svetly) a mensie pismo, aby sa nic neorezalo */
.hero-tags span{color:#14302A;font-size:var(--fs-11);letter-spacing:0;padding:5px 9px;}

/* Karta Z Facebooku (nahradila galeriu misiek) */
.fb-vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.fb-vids figure{margin:0}
.fb-vids video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#14302A;display:block}
.fb-vids figcaption{font-size:12px;text-align:center;opacity:.7;margin-top:4px}
.fb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fb-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
@media(min-width:900px){.fb-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fb-grid a{display:block}

/* Z Facebooku v2: karusely, citatelne karty, lightbox */
.fb-card{padding:22px 0 18px !important;overflow:hidden}
.fb-head{padding:0 20px 6px}
.fb-eb{font:600 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:#1F7A4B}
.fb-head h2{font-family:"Fraunces","Georgia Pro",Georgia,"Noto Serif",serif;font-size:26px;line-height:1.15;margin:8px 0 6px;font-weight:600}
.fb-head p{margin:0;opacity:.7;font-size:14px}
.fb-sub{margin:22px 20px 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;font-weight:700}
.fb-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.fb-rail::-webkit-scrollbar{display:none}
.fb-rail>*{scroll-snap-align:start;flex:0 0 auto}
.fb-v{margin:0}
.fb-vbox{position:relative;height:300px;border-radius:20px;overflow:hidden;background:#14302A;box-shadow:0 14px 30px -16px rgba(20,48,42,.6)}
.fb-v.r916 .fb-vbox{aspect-ratio:9/16}.fb-v.r11 .fb-vbox{aspect-ratio:1/1}.fb-v.r169 .fb-vbox{aspect-ratio:16/9}
.fb-vbox video{width:100%;height:100%;object-fit:cover;display:block}
.fb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -8px rgba(0,0,0,.5)}
.fb-play svg{width:24px;height:24px;fill:#1F7A4B;margin-left:3px}
.fb-v figcaption{font-size:13px;margin-top:8px;opacity:.75;padding-left:4px}
.fb-p{padding:0;border:0;background:none;cursor:zoom-in;width:260px;height:260px;border-radius:18px;overflow:hidden;box-shadow:0 12px 26px -16px rgba(20,48,42,.55)}
.fb-p img{width:100%;height:100%;object-fit:cover;display:block}
.fb-lb{position:fixed;inset:0;z-index:9999;background:rgba(10,24,20,.9);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.fb-lb img{max-width:100%;max-height:92vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.fb-lb button{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:26px;line-height:1;cursor:pointer}
@media(min-width:900px){.fb-vbox{height:340px}.fb-p{width:300px;height:300px}}
.fb-v.r34 .fb-vbox{aspect-ratio:3/4}