/* ==========================================================================
   Krug demo - raspored aplikacije. Boje i komponente dolaze iz tokeni.css.
   Mobile-first: telefon JE okvir; na desktopu centrirana kolona 420 px.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  min-height: 100dvh;
}

#app {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--paper);
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* desktop: kolona sa senkom na mirnoj pozadini */
@media (min-width: 480px) {
  body { background: #E3E8E3; }
  #app {
    min-height: 100vh;
    box-shadow: 0 0 0 1px rgba(18,63,56,.06), 0 24px 80px rgba(18,63,56,.18);
  }
}

/* --- gornja traka (svi ekrani osim Danas) ------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font: 600 19px/1.2 var(--font-h); letter-spacing: -.01em; flex: 1; }
.topbar .nazad {
  width: 40px; height: 40px; border: none; background: var(--card);
  border-radius: 50%; box-shadow: var(--sh-card); cursor: pointer;
  display: grid; place-items: center; color: var(--ink); flex: none;
}

/* dugme za hitno - na svakom ekranu, gore desno (F08: jedan tap odasvud) */
.hitno-btn {
  width: 40px; height: 40px; border: none; cursor: pointer; flex: none;
  background: var(--a100); color: var(--a600);
  border-radius: 50%; display: grid; place-items: center;
}

/* --- hero (Danas) -------------------------------------------------------- */
.k-hero { position: relative; }
.k-hero { padding-top: calc(10px + env(safe-area-inset-top)); }
.hero-red { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hero-datum {
  font: 700 10.5px var(--font-b); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin: 16px 0 7px;
}
.demo-bedz {
  display: inline-block;
  font: 700 10px var(--font-b); letter-spacing: .14em;
  color: rgba(255,255,255,.92); border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 999px; padding: 6px 13px; margin-top: 16px;
}
.k-hero .hitno-btn {
  background: transparent; color: #fff; margin-top: 26px;
  width: 54px; height: 54px; border: 2px solid rgba(255,255,255,.9);
}

/* --- sadržaj ------------------------------------------------------------- */
.sadrzaj { padding: 0 16px; }
.sadrzaj .k-card + .k-card { margin-top: 12px; }
.sekcija-naslov {
  font: 600 10.5px var(--font-b); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 22px 4px 9px;
}

/* red sa ikonom u kartici */
.red { display: flex; align-items: center; gap: 12px; }
.red .txt { flex: 1; min-width: 0; }
.red h2 { margin: 0 0 2px; }

/* akcijski link u kartici - koral */
.k-link {
  display: inline-block; margin-top: 12px;
  font: 700 14px var(--font-h); color: var(--a600);
  background: none; border: none; padding: 0; cursor: pointer;
}

/* bento red: dve kartice razlicite sirine */
.bento { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; margin-top: 12px; align-items: stretch; }
.bento .k-card { margin-top: 0 !important; }

/* carousel: horizontalni skrol sa snap-om; sledeća kartica viri = poziv na skrol */
.carousel {
  display: flex; gap: 12px; margin-top: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 16px 14px; margin-left: -16px; margin-right: -16px;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: none; margin-top: 0 !important; }
.carousel .k-card { width: 78%; }
.carousel .k-card.uska { width: 46%; min-height: 178px; }
.carousel-hint {
  display: flex; gap: 5px; justify-content: center; margin-top: -6px;
}
.carousel-hint span { width: 6px; height: 6px; border-radius: 50%; background: var(--p300); }
.carousel-hint span:first-child { background: var(--p700); width: 16px; border-radius: 99px; }

/* nedeljski vodič - navy broj nedelje */
.nedelja-bedz {
  display: inline-block; font: 800 12px var(--font-h); letter-spacing: .06em;
  background: var(--p100); color: var(--p900);
  border-radius: 999px; padding: 6px 12px; margin-bottom: 10px;
}

/* prečica kartica u srednjem carouselu */
.precica h2 { font-size: 16px; }
.precica .k-ico { margin-bottom: 10px; }

/* stat kartica - veliki broj (broj stavki spiska, ne agregat unosa) */
.stat-kartica {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; border: none; font-family: var(--font-b);
  min-height: 150px;
}
.stat-kartica { background: #DDD7F1; position: relative; overflow: hidden; }
.noc .stat-kartica { background: var(--p100); }
.stat-kartica .broj { font: 800 54px/1 var(--font-h); color: var(--p900); letter-spacing: -.02em; }
.stat-kartica .opis { font: 500 14px/1.3 var(--font-b); color: var(--p900); margin-top: 8px; }
/* stetoskop u pozadini - kaže „pedijatrijska" i pre čitanja */
.stat-kartica .vodeni-zig {
  position: absolute; right: -14px; bottom: -12px; z-index: 1;
  color: var(--p900); opacity: .16; pointer-events: none;
}
.stat-kartica > span { position: relative; z-index: 2; }

/* --- trijaža ---------------------------------------------------------------- */
.trijaza-korak { font: 700 10.5px var(--font-b); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 14px 4px 8px; }
.zastavica {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--p100);
  font: 500 14.5px/1.45 var(--font-b); color: var(--ink);
}
.zastavica:last-child { border-bottom: none; }
.zastavica .tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--a500); flex: none; margin-top: 6px; }
.trijaza-akcije { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pitanje-veliko { font: 700 22px/1.25 var(--font-h); letter-spacing: -.01em; color: var(--ink); margin: 4px 0 18px; }
.odgovori3 { display: flex; flex-direction: column; gap: 10px; }
.odgovori3 button {
  min-height: 54px; border: none; cursor: pointer; text-align: center;
  border-radius: var(--r-pill); font: 700 15px var(--font-h);
  background: var(--card); color: var(--p700);
  box-shadow: inset 0 0 0 1.5px var(--p700);
}
.odgovori3 button.neznam { box-shadow: inset 0 0 0 1.5px var(--p300); color: var(--mut); }
.ishod-hero { border-radius: var(--r-card); padding: 20px 18px; position: relative; overflow: hidden; }
.ishod-hero h2 { font: 800 21px/1.2 var(--font-h); margin: 0 0 6px; }
.ishod-hero p { font: 400 14px/1.55 var(--font-b); margin: 0; }
.ishod-hero.hitno { background: var(--a100); }
.ishod-hero.hitno h2 { color: var(--a600); }
.ishod-hero.lekar { background: #DDD7F1; }
.ishod-hero.lekar h2, .ishod-hero.lekar p { color: var(--p900); }
.ishod-hero.kucno { background: var(--p100); }
.ishod-hero.kucno h2 { color: var(--p900); }
.koraci { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }
.koraci div { display: flex; gap: 11px; align-items: flex-start; font: 500 14px/1.45 var(--font-b); color: var(--ink); }
.koraci b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--p100); color: var(--p900); font: 700 11.5px var(--font-b); display: grid; place-items: center; margin-top: 1px; }

/* blobovi u herou (pozicije) - desni klaster, ne prelaze preko naslova */
.blob-b1 { width: 160px; height: 160px; background: var(--blob-roze);    top: -95px;  right: -25px; }
.blob-b2 { width: 120px; height: 120px; background: var(--blob-koral);   top: -40px;  right: -45px; }
.blob-b3 { width: 150px; height: 150px; background: var(--blob-lavanda); top: 105px;  right: -75px; }
.blob-b4 { width: 80px;  height: 80px;  background: var(--blob-breskva); top: -45px;  right: 170px; opacity: .9; }

/* koral blob u kartici uvida */
.blob-k1 { width: 150px; height: 150px; background: var(--blob-koral);   top: -70px; right: -45px; z-index: 1; }
.blob-k2 { width: 60px;  height: 60px;  background: var(--blob-roze);    top: 55px;  right: -20px; z-index: 1; opacity:.9; }

/* brzi odgovori (praćenje) */
.brzi { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.brzi button {
  min-height: var(--touch); padding: 10px 18px; cursor: pointer;
  background: var(--p100); color: var(--p900);
  border: none; border-radius: var(--r-pill);
  font: 700 14px var(--font-h);
}
.brzi button.puno { background: var(--p700); color: #fff; box-shadow: var(--sh-btn); }
.brzi button.sekundarno { background: transparent; box-shadow: inset 0 0 0 1.5px var(--p700); color: var(--p700); }

/* fiksno „Pitaj" na Danas */
.pitaj-fiks {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: min(100% - 32px, 388px); z-index: 25;
}

/* --- tab bar -------------------------------------------------------------- */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 420px; z-index: 30;
  display: flex; align-items: flex-end;
  background: var(--card);
  box-shadow: 0 -1px 0 rgba(18,63,56,.06), 0 -8px 24px rgba(18,63,56,.07);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
}
#tabbar a {
  flex: 1; min-height: 52px; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--faint); font: 600 10.5px var(--font-h);
}
#tabbar a.aktivan { color: var(--p700); }
#tabbar a svg { display: block; }

/* centralni „Pitaj" tab */
#tabbar a.tab-pitaj { position: relative; }
#tabbar a.tab-pitaj .kruzic {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--p700); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sh-btn); margin-top: -22px;
}
#tabbar a.tab-pitaj.aktivan .kruzic { background: var(--p900); }

/* --- „Više" meni ---------------------------------------------------------- */
.vise-stavka {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: none; text-align: left; cursor: pointer;
  border-radius: var(--r-card); box-shadow: var(--sh-card);
  padding: 14px 16px; margin-top: 10px; min-height: var(--touch);
  font-family: var(--font-b); color: var(--ink);
}
.vise-stavka .txt { flex: 1; }
.vise-stavka h3 { font: 600 15px var(--font-h); margin: 0 0 2px; }
.vise-stavka p { font: 400 12.5px/1.45 var(--font-b); color: var(--mut); margin: 0; }
.vise-stavka .strelica { color: var(--faint); flex: none; }

/* --- placeholder ekrana u pripremi --------------------------------------- */
.uskoro {
  margin-top: 14px; border-radius: var(--r-card);
  border: 1.5px dashed var(--p300); padding: 16px 18px;
  font: 400 13px/1.5 var(--font-b); color: var(--mut);
  background: var(--p100);
}
.uskoro b { color: var(--p900); font-family: var(--font-h); }

/* --- hitno ekran ----------------------------------------------------------- */
.hitno-kartica { border: none; }
.hitno-red {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--p100);
}
.hitno-red:last-child { border-bottom: none; }
.hitno-red .txt { flex: 1; min-width: 0; }
.hitno-red h3 { font: 600 15px var(--font-h); margin: 0 0 2px; }
.hitno-red p { font: 400 12.5px/1.4 var(--font-b); color: var(--mut); margin: 0; }
.hitno-red a.poziv {
  flex: none; min-width: var(--touch); min-height: var(--touch);
  display: grid; place-items: center; text-decoration: none;
  background: var(--p100); color: var(--p900);
  border-radius: var(--r-pill); padding: 0 16px;
  font: 600 14px var(--font-h); font-variant-numeric: tabular-nums;
}
.hitno-red.istaknuto a.poziv { background: var(--a600); color: #fff; }

/* --- chat (Pitaj) ---------------------------------------------------------- */
.chat-tok { display: flex; flex-direction: column; gap: 10px; padding-bottom: 140px; }
.msg { max-width: 86%; border-radius: 18px; padding: 11px 14px; font: 400 14px/1.5 var(--font-b); }
.msg.ja { align-self: flex-end; background: var(--p700); color: #fff; border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: var(--card); box-shadow: var(--sh-card); border-bottom-left-radius: 6px; }
.msg.ai .izvor {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--p100);
  font: 500 11px var(--font-b); color: var(--faint);
}
.msg.kuca span { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--faint); margin:0 1.5px; animation: kuca 1s infinite; }
.msg.kuca span:nth-child(2){ animation-delay:.15s } .msg.kuca span:nth-child(3){ animation-delay:.3s }
@keyframes kuca { 0%,60%,100%{opacity:.3} 30%{opacity:1} }

.chat-unos {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom));
  width: 100%; max-width: 420px; padding: 10px 16px;
  background: linear-gradient(transparent, var(--paper) 30%);
  z-index: 25;
}
.chat-ponude { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.chat-ponude::-webkit-scrollbar { display: none; }
.chat-ponude button {
  flex: none; background: var(--card); border: none; cursor: pointer;
  box-shadow: var(--sh-card); border-radius: var(--r-pill);
  padding: 10px 14px; font: 500 13px var(--font-b); color: var(--p900);
  min-height: 40px;
}
.chat-red { display: flex; gap: 8px; }
.chat-red input {
  flex: 1; min-height: var(--touch); border: none; border-radius: var(--r-pill);
  background: var(--card); box-shadow: var(--sh-card);
  padding: 0 18px; font: 400 15px var(--font-b); color: var(--ink); outline: none;
}
.chat-red button {
  flex: none; width: var(--touch); height: var(--touch); border: none; cursor: pointer;
  border-radius: 50%; background: var(--p700); color: #fff; box-shadow: var(--sh-btn);
  display: grid; place-items: center;
}

/* --- ishrana --------------------------------------------------------------- */
.trazi input {
  width: 100%; min-height: var(--touch); border: none; outline: none;
  border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh-card);
  padding: 0 18px; font: 400 15px var(--font-b); color: var(--ink);
}
.nam-cipovi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nam-cipovi button {
  background: var(--card); border: none; cursor: pointer; box-shadow: var(--sh-card);
  border-radius: var(--r-pill); padding: 10px 15px; min-height: 40px;
  font: 500 13.5px var(--font-b); color: var(--ink);
}
.verdikt { display: inline-block; font: 600 11px var(--font-b); letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; margin-bottom: 9px; }
.verdikt.sme    { background: var(--p100); color: var(--p900); }
.verdikt.oprez  { background: var(--a100); color: #8F4F26; }
.verdikt.kapija { background: var(--a100); color: #8F4F26; }
.verdikt.ne     { background: #F3E2DE; color: #8A3B2E; }
.nam-meta { font: 500 12px var(--font-b); color: var(--faint); margin-top: 10px; }

/* --- zajednica ------------------------------------------------------------- */
.nit { padding: 12px 0; border-bottom: 1px solid var(--p100); }
.nit:last-child { border-bottom: none; }
.nit h3 { font: 600 14.5px/1.35 var(--font-h); margin: 0 0 3px; }
.nit p { font: 400 12.5px var(--font-b); color: var(--faint); margin: 0; }

/* --- pomoćno ---------------------------------------------------------------- */
.napomena-demo {
  margin: 26px 0 8px; text-align: center;
  font: 400 11.5px/1.5 var(--font-b); color: var(--faint);
}
.razmak { height: 10px; }

/* --- E4: kalendar ------------------------------------------------------------ */
.tl-stavka { width: 100%; text-align: left; cursor: pointer; border: none; font-family: var(--font-b); }
.tl-stavka.proslo { opacity: .78; }
.tl-datum { font: 700 10.5px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 18px 4px 8px; }
.cetiri-dela h3 { font: 700 11px var(--font-b); letter-spacing: .13em; text-transform: uppercase; color: var(--a600); margin: 16px 0 5px; }
.cetiri-dela h3.mirno { color: var(--p700); }
.cetiri-dela p { font: 400 14px/1.55 var(--font-b); color: var(--ink); margin: 0; }
.ishod-cip { display: inline-block; background: var(--p100); color: var(--p900); font: 600 12px var(--font-b); border-radius: 999px; padding: 5px 11px; margin-top: 10px; }

/* --- E4: lekovi --------------------------------------------------------------- */
.tacke7 { display: flex; gap: 9px; margin-top: 12px; }
.tacke7 i { width: 13px; height: 13px; border-radius: 50%; background: var(--p100); }
.tacke7 i.da { background: var(--p700); }
.doza-red { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--p100); }
.doza-red:last-child { border-bottom: none; }
.doza-red .vreme { font: 700 14px var(--font-h); color: var(--ink); width: 52px; font-variant-numeric: tabular-nums; }
.doza-red .ko { flex: 1; font: 400 13.5px var(--font-b); color: var(--mut); }
.doza-cek { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--p100); color: var(--p900); font: 700 15px var(--font-b); }
.doza-cek.ne { background: transparent; box-shadow: inset 0 0 0 1.5px var(--p300); color: transparent; }

/* --- E4: merenja --------------------------------------------------------------- */
.prirast-hero { border-radius: var(--r-card); padding: 20px 18px; background: #DDD7F1; position: relative; overflow: hidden; }
.noc .prirast-hero { background: var(--p100); }
.prirast-hero .veliki { font: 800 40px/1 var(--font-h); color: var(--p900); letter-spacing: -.02em; }
.prirast-hero .mali { font: 500 13.5px var(--font-b); color: var(--p900); margin-top: 6px; }
.prirast-red { display: flex; gap: 10px; margin-top: 12px; }
.prirast-red .pilula { background: rgba(255,255,255,.55); border-radius: 999px; padding: 8px 13px; font: 600 12.5px var(--font-b); color: var(--p900); }
.noc .prirast-red .pilula { background: rgba(255,255,255,.08); }
.mer-red { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--p100); font: 500 13.5px var(--font-b); color: var(--ink); }
.mer-red:last-child { border-bottom: none; }
.mer-red .d { width: 52px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mer-red .v { flex: 1; font-variant-numeric: tabular-nums; }
.mer-red .cip { font: 600 10.5px var(--font-b); letter-spacing: .04em; background: var(--p100); color: var(--p900); border-radius: 999px; padding: 4px 9px; }
.mer-red .cip.kuca { background: var(--a100); color: #8A4A22; }
.mer-forma { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.mer-forma input { flex: 1; min-width: 110px; min-height: var(--touch); border: none; outline: none; border-radius: var(--r-pill);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--p300); padding: 0 16px; font: 500 15px var(--font-b); color: var(--ink); }
.mer-forma .izvor-cip { min-height: 40px; padding: 8px 14px; border: none; cursor: pointer; border-radius: 999px;
  background: var(--p100); color: var(--p900); font: 600 12.5px var(--font-b); }
.mer-forma .izvor-cip.aktivan { background: var(--p700); color: #fff; }

/* --- E5: ishrana ---------------------------------------------------------------- */
.segmenti { display: flex; gap: 6px; background: var(--card); border-radius: 999px; padding: 5px; box-shadow: var(--sh-card); margin-bottom: 14px; }
.segmenti button { flex: 1; min-height: 40px; border: none; cursor: pointer; border-radius: 999px;
  font: 700 13px var(--font-h); color: var(--mut); background: transparent; }
.segmenti button.aktivan { background: var(--p700); color: #fff; }
.uz-grupa { margin-top: 4px; }
.uz-cipovi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.uz-cipovi span { background: var(--p100); color: var(--p900); font: 600 13px var(--font-b); border-radius: 999px; padding: 8px 13px; }
.uz-cipovi span.toplo { background: var(--a100); color: #8A4A22; }
.ne-red { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--p100); font: 400 13.5px/1.45 var(--font-b); color: var(--mut); }
.ne-red:last-child { border-bottom: none; }
.ne-red b { color: var(--ink); font-weight: 700; flex: none; }
.plan-dan { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--p100); }
.plan-dan:last-child { border-bottom: none; }
.plan-dan b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--p100); color: var(--p900);
  font: 700 12px var(--font-b); display: grid; place-items: center; }
.plan-dan p { font: 400 13.5px/1.5 var(--font-b); color: var(--ink); margin: 2px 0 0; }
.sastojci { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sastojci button { background: var(--p100); color: var(--p900); border: none; cursor: pointer;
  font: 600 12.5px var(--font-b); border-radius: 999px; padding: 8px 13px; min-height: 36px; }
.shop-red { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--p100); }
.shop-red:last-child { border-bottom: none; }
.shop-red .txt { flex: 1; min-width: 0; }
.shop-red h4 { font: 700 14px var(--font-h); color: var(--ink); margin: 0 0 2px; }
.shop-red p { font: 400 12.5px var(--font-b); color: var(--mut); margin: 0; }
.shop-red .cena { font: 800 14px var(--font-h); color: var(--p900); font-variant-numeric: tabular-nums; flex: none; }
.partner-oznaka { display: inline-block; font: 600 10px var(--font-b); letter-spacing: .08em; text-transform: uppercase;
  color: #8A4A22; background: var(--a100); border-radius: 999px; padding: 3px 8px; margin-left: 6px; }

/* --- E7: pitanja za pedijatra --------------------------------------------------- */
.pit-red { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--p100); }
.pit-red:last-child { border-bottom: none; }
.pit-red .txt { flex: 1; min-width: 0; }
.pit-red .t { font: 500 14.5px/1.45 var(--font-b); color: var(--ink); }
.pit-red .odakle { display: inline-block; margin-top: 5px; font: 600 10.5px var(--font-b); letter-spacing: .05em;
  background: var(--p100); color: var(--p900); border-radius: 999px; padding: 4px 9px; }
.pit-red .brisi { flex: none; width: 32px; height: 32px; border: none; cursor: pointer; border-radius: 50%;
  background: transparent; color: var(--faint); font: 500 16px var(--font-b); }
.pit-forma { display: flex; gap: 8px; margin-top: 12px; }
.pit-forma input { flex: 1; min-height: var(--touch); border: none; outline: none; border-radius: var(--r-pill);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--p300); padding: 0 16px; font: 400 14.5px var(--font-b); color: var(--ink); }
.pit-forma button { flex: none; width: var(--touch); height: var(--touch); border: none; cursor: pointer;
  border-radius: 50%; background: var(--p700); color: #fff; box-shadow: var(--sh-btn); display: grid; place-items: center; }

/* --- E7: sažetak za lekara - gušći, klinički ton -------------------------------- */
.saz-sekcija { font: 700 10.5px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--p700);
  margin: 15px 0 6px; padding-top: 12px; border-top: 1px solid var(--p100); }
.saz-sekcija:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.saz-red { font: 400 13.5px/1.55 var(--font-b); color: var(--ink); margin: 3px 0; }
.saz-red b { font-weight: 700; }
.saz-red .app-oznaka { font: 600 10px var(--font-b); letter-spacing: .06em; text-transform: uppercase;
  background: var(--p100); color: var(--p900); border-radius: 999px; padding: 2px 7px; margin-left: 4px; }
.saz-napomena { font: 400 11.5px/1.5 var(--font-b); color: var(--faint); margin-top: 12px; }
.prekidac-red { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.prekidac-red .txt { flex: 1; font: 500 13.5px/1.45 var(--font-b); color: var(--ink); }
.prekidac { width: 46px; height: 28px; border-radius: 999px; border: none; cursor: pointer; position: relative;
  background: var(--p300); transition: background .15s; flex: none; }
.prekidac.da { background: var(--p700); }
.prekidac::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: left .15s; }
.prekidac.da::after { left: 21px; }
body.cekaonica #tabbar, body.cekaonica .ne-u-cekaonici { display: none !important; }

/* --- E8: traka „poslednji put" --------------------------------------------------- */
.traka { display: flex; gap: 9px; margin-bottom: 14px; }
.traka button {
  flex: 1; border: none; cursor: pointer; text-align: left;
  background: var(--card); box-shadow: var(--sh-card); border-radius: 18px;
  padding: 12px 13px; min-height: 74px; font-family: var(--font-b);
}
.traka .naziv { font: 700 11px var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.traka .kad { font: 700 15px var(--font-h); color: var(--ink); margin-top: 5px; font-variant-numeric: tabular-nums; }
.traka .sat { font: 400 11.5px var(--font-b); color: var(--faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
.traka button.prazno .kad { color: var(--p300); }

/* --- E8: log --------------------------------------------------------------------- */
.log-red { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--p100); }
.log-red:last-child { border-bottom: none; }
.log-red .v { font: 700 13.5px var(--font-h); color: var(--ink); width: 46px; flex: none; font-variant-numeric: tabular-nums; }
.log-red .o { flex: 1; font: 400 14px/1.45 var(--font-b); color: var(--ink); }
.log-red .o em { font-style: normal; color: var(--mut); }
.log-red .ko { font: 600 11px var(--font-b); color: var(--p900); background: var(--p100); border-radius: 999px; padding: 3px 9px; flex: none; }
.oznake { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.oznake button { background: var(--p700); color: #fff; border: none; cursor: pointer; box-shadow: var(--sh-btn);
  border-radius: 999px; padding: 11px 17px; min-height: 44px; font: 700 13.5px var(--font-h); }
.oznake button.sek { background: var(--card); color: var(--p700); box-shadow: inset 0 0 0 1.5px var(--p700); }

/* --- E8: rezime ------------------------------------------------------------------- */
.rez-tacka { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; font: 400 14px/1.5 var(--font-b); color: var(--ink); }
.rez-tacka i { width: 7px; height: 7px; border-radius: 50%; background: var(--p700); flex: none; margin-top: 8px; }

/* --- E9: zajednica ---------------------------------------------------------------- */
.nit-btn { width: 100%; text-align: left; border: none; cursor: pointer; background: transparent; font-family: var(--font-b); padding: 0; }
.poruka { padding: 12px 0; border-bottom: 1px solid var(--p100); }
.poruka:last-child { border-bottom: none; }
.poruka .meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.poruka .autor { font: 700 13px var(--font-h); color: var(--ink); }
.poruka .autor.anon { color: var(--p700); }
.poruka .mod-oznaka { font: 600 9.5px var(--font-b); letter-spacing: .08em; text-transform: uppercase;
  background: var(--p100); color: var(--p900); border-radius: 999px; padding: 3px 8px; }
.poruka .kad { font: 400 11.5px var(--font-b); color: var(--faint); }
.poruka p { font: 400 14px/1.5 var(--font-b); color: var(--ink); margin: 0; }
.puls-bar { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.puls-bar .lab { width: 40px; font: 700 13px var(--font-h); color: var(--ink); font-variant-numeric: tabular-nums; }
.puls-bar .staza { flex: 1; height: 10px; border-radius: 99px; background: var(--p100); overflow: hidden; }
.puls-bar .staza i { display: block; height: 100%; border-radius: 99px; background: var(--p700); }
.puls-bar .proc { width: 42px; text-align: right; font: 700 13px var(--font-h); color: var(--p900); font-variant-numeric: tabular-nums; }
.grupa-red { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--p100); }
.grupa-red:last-child { border-bottom: none; }
.grupa-red .txt { flex: 1; }
.grupa-red h3 { font: 700 15px var(--font-h); color: var(--ink); margin: 0 0 2px; }
.grupa-red p { font: 400 12.5px var(--font-b); color: var(--mut); margin: 0; }
.grupa-red .cl { font: 600 11px var(--font-b); color: var(--p900); background: var(--p100); border-radius: 999px; padding: 4px 9px; flex: none; }
.grupa-red .cl.tate { background: var(--a100); color: #8A4A22; }

/* --- E11: check-in ------------------------------------------------------------------ */
.ck-odgovori { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.ck-odgovori button { min-height: 50px; border: none; cursor: pointer; border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--p300); font: 600 14px var(--font-b); }
.ck-odgovori button:active { box-shadow: inset 0 0 0 2px var(--p700); }
.sos-uvek { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 26;
  background: var(--a100); color: #8A4A22; border: none; cursor: pointer; border-radius: 999px;
  padding: 12px 18px; font: 700 13px var(--font-h); box-shadow: var(--sh-card); }


/* --- E10/E12 + tajmer podoja --- */
.taj { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.taj .txt { flex: 1; }
.taj .txt strong { font: 700 15px var(--font-h); color: var(--ink); }
.taj .txt p { font: 400 12.5px var(--font-b); color: var(--mut); margin: 2px 0 0; }
.taj .k-btn { flex: none; }
.taj--ziv { display: block; }
.taj-vrh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.taj-broj { font: 800 34px var(--font-h); color: var(--p900); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.taj-dugmad { display: flex; gap: 9px; }
.taj-dugmad .k-btn { flex: 1; }
.taj-nap { font: 400 12px/1.5 var(--font-b); color: var(--faint); margin: 10px 0 0; }
.noc .taj-broj { color: var(--nk-ink, #F1EDE6); }

.edu-kartica { display: block; width: 100%; text-align: left; border: none; cursor: pointer; margin-bottom: 12px; }
.edu-kartica h3 { font: 700 16px var(--font-h); color: var(--ink); margin: 8px 0 4px; }
.edu-kartica p { font: 400 13.5px/1.5 var(--font-b); color: var(--mut); margin: 0; }
.edu-nap { font: 400 12.5px/1.5 var(--font-b); color: var(--faint); margin: 4px 2px 0; }
.lek-h { font: 700 11.5px var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--a600t, var(--a600)); margin: 16px 0 6px; }

.cek-red { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: none;
  cursor: pointer; padding: 9px 0; text-align: left; font: 500 14px/1.4 var(--font-b); color: var(--ink);
  border-bottom: 1px solid var(--p100); }
.cek-red:last-of-type { border-bottom: none; }
.cek-red .kut { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--pozadina, #FDF5EE);
  box-shadow: inset 0 0 0 1.5px var(--p300, #B9C0D6); display: grid; place-items: center;
  font: 700 14px var(--font-b); color: #fff; }
.cek-red.cek .kut { background: var(--p700); box-shadow: none; }
.cek-red.cek span:last-child { color: var(--faint); text-decoration: line-through; }
.noc .cek-red { border-color: rgba(255,255,255,.08); }

.cene-red { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--p100); font: 400 13px/1.4 var(--font-b); color: var(--ink); }
.cene-red span:nth-child(2), .cene-red span:nth-child(3) { color: var(--mut); }
.cene-red span:nth-child(3) { color: var(--ink); font-weight: 600; }
.cene-glava { font: 700 11px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.cene-glava span { color: var(--faint) !important; }
.noc .cene-red { border-color: rgba(255,255,255,.08); }

.kpi-red { display: flex; gap: 9px; margin-top: 12px; }
.kpi { flex: 1; background: var(--p100); border-radius: 14px; padding: 12px 8px; text-align: center; }
.kpi b { display: block; font: 800 22px var(--font-h); color: var(--p900); font-variant-numeric: tabular-nums; }
.kpi span { font: 600 10.5px var(--font-b); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.noc .kpi { background: rgba(255,255,255,.07); }
.noc .kpi b { color: #F1EDE6; }


/* --- E13/E14 --- */
.tisina-ekran { min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  padding: 34px 26px 90px; position: relative; overflow: hidden; }
.tisina-ekran h1 { font: 800 34px var(--font-h); color: var(--ink); margin: 0 0 10px; }
.tisina-ekran p { font: 400 15.5px/1.6 var(--font-b); color: var(--mut); margin: 0 0 26px; max-width: 300px; }
.tisina-ekran .k-btn { width: 100%; margin-bottom: 10px; }
.tisina-ekran .blob { opacity: .5; }

.priv-tab { overflow-x: auto; margin-top: 10px; }
.priv-red { display: grid; grid-template-columns: 118px repeat(5, minmax(64px, 1fr)); gap: 6px;
  padding: 7px 0; border-bottom: 1px solid var(--p100); font: 400 11.5px/1.35 var(--font-b); color: var(--ink);
  min-width: 470px; }
.priv-red span:first-child { font-weight: 600; }
.priv-red span.ne { color: var(--faint); }
.priv-glava { font: 700 10px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.priv-glava span { color: var(--faint); }
.noc .priv-red { border-color: rgba(255,255,255,.08); }


/* --- F49 onboarding --- */
.ob-ekran { min-height: 100vh; padding: 18px 22px 40px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; }
.ob-vrh { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 8px; }
.ob-nazad { width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--card);
  box-shadow: var(--sh-card); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.ob-tacke { display: flex; gap: 7px; }
.ob-tacke span { width: 8px; height: 8px; border-radius: 50%; background: var(--p100); }
.ob-tacke span.p { background: var(--p700); }
.ob-ekran h2 { font: 800 26px/1.25 var(--font-h); color: var(--ink); margin: 14px 0 16px; }
.ob-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; }
.ob-hero h1 { font: 800 34px/1.15 var(--font-h); color: var(--ink); margin: 0 0 12px; }
.ob-veliki { font: 400 16.5px/1.55 var(--font-b); color: var(--mut); margin: 0 0 18px; max-width: 310px; }
.ob-dalje { width: 100%; margin-top: 22px; min-height: 54px; }
.ob-bezbedno { display: flex; align-items: center; gap: 9px; margin-top: 16px; border: none; background: none;
  cursor: pointer; font: 600 13.5px/1.4 var(--font-b); color: var(--a600t, #D23A44); text-align: left; padding: 10px 0; }
.ob-opcija { display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  background: var(--card); border-radius: 22px; box-shadow: var(--sh-card); padding: 18px 20px; margin-bottom: 12px; }
.ob-opcija h3 { font: 700 17px var(--font-h); color: var(--ink); margin: 0 0 3px; }
.ob-opcija p { font: 400 13px/1.45 var(--font-b); color: var(--mut); margin: 0; }
.ob-opcija:active { transform: scale(.985); }
.ob-nap { font: 400 12.5px/1.5 var(--font-b); color: var(--faint); margin: 8px 2px 0; }
.ob-labela { display: block; font: 700 11px var(--font-b); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 7px; }
.ob-input { width: 100%; border: none; border-radius: 16px; background: var(--card); box-shadow: var(--sh-card);
  padding: 14px 16px; font: 500 15.5px var(--font-b); color: var(--ink); }
.ob-input:focus { outline: 2px solid var(--p700); }
.ob-cipovi { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-cip { border: none; cursor: pointer; border-radius: 999px; padding: 11px 16px; min-height: 44px;
  background: var(--card); box-shadow: var(--sh-card); font: 600 13.5px var(--font-b); color: var(--ink); }
.ob-cip.aktivan { background: var(--p700); color: #fff; }
.noc .ob-opcija, .noc .ob-input, .noc .ob-cip, .noc .ob-nazad { background: var(--nk-card, #1A2036); }

/* --- kontrakcije --- */
.kx-start { width: 100%; min-height: 74px; font-size: 17.5px; }
.kx-ziv { text-align: center; }
.kx-ziv .taj-broj { display: block; margin: 10px 0 14px; font-size: 44px; }
.kx-red { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--p100);
  font: 400 14px var(--font-b); color: var(--ink); }
.kx-red:last-child { border-bottom: none; }
.kx-red .v { font: 700 14px var(--font-h); color: var(--p900); font-variant-numeric: tabular-nums; }
.kx-red .o { flex: 1; }
.kx-red .ko { color: var(--mut); font-variant-numeric: tabular-nums; }
.noc .kx-red { border-color: rgba(255,255,255,.08); }
.noc .kx-red .v { color: #F1EDE6; }

/* --- kontakt modal --- */
.modal-poz { position: fixed; inset: 0; background: rgba(16,20,42,.45); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--pozadina, #FDF5EE); border-radius: 26px 26px 0 0; padding: 24px 22px 30px;
  width: 100%; max-width: 420px; }
.modal h3 { font: 800 19px/1.3 var(--font-h); color: var(--ink); margin: 0 0 8px; }
.modal p { font: 400 13.5px/1.5 var(--font-b); color: var(--mut); margin: 0 0 14px; }
.modal .ob-input { margin-bottom: 8px; }
.noc .modal { background: #161B2E; }


/* ==========================================================================
   F49 v3 - tour: carousel + scene (prave komponente koje se animiraju)
   ========================================================================== */
.ob-input--veliki { padding: 17px 18px; font-size: 17px; }
.ob-tekst-dugme { display: block; width: 100%; border: none; background: none; cursor: pointer;
  padding: 14px 0; margin-top: 4px; font: 600 14.5px var(--font-b); color: var(--mut); }

.tour { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.tour-vrh { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 4px; flex: none; }
.tour-vrh .ob-tekst-dugme { width: auto; margin: 0; padding: 8px 4px; }
.tour-traka { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tour-traka::-webkit-scrollbar { display: none; }
.tour-slajd { min-width: 100%; scroll-snap-align: start; padding: 8px 22px 6px;
  display: flex; flex-direction: column; overflow: hidden; }
.tour-oznaka { display: inline-block; font: 700 11.5px var(--font-b); letter-spacing: .12em;
  color: var(--a600t, #D23A44); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.tour-tekst { flex: none; }
.tour-tekst h1 { font: 800 clamp(25px, 7.4vw, 31px)/1.16 var(--font-h); color: var(--ink); margin: 0 0 9px; }
.tour-tekst p { font: 400 14.5px/1.5 var(--font-b); color: var(--mut); margin: 0; max-width: 330px; }
.tour-dno { flex: none; padding: 10px 22px calc(20px + env(safe-area-inset-bottom)); }
.tour-dno .k-btn { width: 100%; min-height: 54px; }

.scena-kut { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 24px 0 4px; }
.scena { width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* svaki element scene je skriven dok slajd ne postane vidljiv */
.sc { opacity: 0; }
.tour-slajd.zivi .sc { animation: scUlaz .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes scUlaz { from { opacity: 0; transform: translateY(14px) scale(.97); }
                    to   { opacity: 1; transform: none; } }

.sc-zag { font: 700 10.5px var(--font-b); letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); }
.sc-pit { font: 600 14.5px/1.4 var(--font-b); color: var(--ink); }
.sc-cip { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: var(--p700); color: #fff; border-radius: 999px; padding: 10px 16px;
  font: 600 14px var(--font-b); box-shadow: var(--sh-card); }
.sc-cip b { font-size: 12px; opacity: .85; }
.sc-ishod { background: var(--card); border-radius: 18px; box-shadow: var(--sh-card);
  padding: 15px 17px; font: 700 15px/1.4 var(--font-h); color: var(--ink); }
.sc-poziv { display: flex; align-items: center; gap: 10px; background: var(--a100);
  border-radius: 16px; padding: 13px 16px; font: 700 14.5px var(--font-b);
  color: var(--a600t, #D23A44); }
.sc-poziv svg { flex: none; }

.sc-bal { max-width: 86%; padding: 13px 16px; font: 400 14px/1.5 var(--font-b);
  border-radius: 20px; box-shadow: var(--sh-card); }
.sc-bal--ja { align-self: flex-end; background: var(--p700); color: #fff; border-bottom-right-radius: 7px; }
.sc-bal--ai { align-self: flex-start; background: var(--card); color: var(--ink); border-bottom-left-radius: 7px; }
.sc-tacke { align-self: flex-start; display: flex; gap: 5px; padding: 12px 15px;
  background: var(--card); border-radius: 20px; box-shadow: var(--sh-card); }
.sc-tacke span { width: 7px; height: 7px; border-radius: 50%; background: var(--p300, #B9C0D6); }
.tour-slajd.zivi .sc-tacke span { animation: scTacka 1s ease-in-out infinite; }
.tour-slajd.zivi .sc-tacke span:nth-child(2) { animation-delay: .16s; }
.tour-slajd.zivi .sc-tacke span:nth-child(3) { animation-delay: .32s; }
@keyframes scTacka { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.sc-granica { font: 400 12.5px/1.5 var(--font-b); color: var(--faint); padding-left: 2px; }

.sc-log { display: flex; align-items: baseline; gap: 10px; background: var(--card);
  border-radius: 14px; box-shadow: var(--sh-card); padding: 12px 15px; font: 400 13.5px var(--font-b); color: var(--ink); }
.sc-log .v { font: 700 13.5px var(--font-h); color: var(--p900); font-variant-numeric: tabular-nums; flex: none; }
.sc-log .o { flex: 1; min-width: 0; }
.sc-log .ko { flex: none; background: var(--p100); color: var(--p900); border-radius: 999px;
  padding: 3px 10px; font: 600 11.5px var(--font-b); }
.sc-log.jak { background: var(--p900); }
.sc-log.jak .v, .sc-log.jak .o { color: #fff; }
.sc-log.jak .ko { background: rgba(255,255,255,.16); color: #fff; }

.sc-bar { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font-b); color: var(--ink); }
.sc-bar .ozn { flex: none; width: 84px; }
.sc-bar .traka { flex: 1; height: 12px; border-radius: 999px; background: var(--p100); overflow: hidden; }
.sc-bar .traka i { display: block; height: 100%; border-radius: 999px; background: var(--p700); width: 0; }
.tour-slajd.zivi .sc-bar .traka i { animation: scBar .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay: inherit; }
@keyframes scBar { from { width: 0; } to { width: var(--w); } }
.sc-bar .pr { flex: none; width: 42px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--p900); }

.sc-kart { background: var(--card); border-radius: 18px; box-shadow: var(--sh-card); padding: 14px 16px; }
.sc-kart h4 { font: 700 14.5px var(--font-h); color: var(--ink); margin: 0 0 3px; }
.sc-kart p { font: 400 13px/1.45 var(--font-b); color: var(--mut); margin: 0; }
.sc-pitred { display: flex; gap: 9px; align-items: baseline; background: var(--card);
  border-radius: 14px; box-shadow: var(--sh-card); padding: 12px 15px;
  font: 500 13.5px/1.45 var(--font-b); color: var(--ink); }
.sc-pitred b { color: var(--a600t, #D23A44); }
.sc-nema { display: flex; align-items: center; gap: 10px; font: 400 14px var(--font-b); color: var(--faint); }
.sc-nema span { text-decoration: line-through; }
.sc-nema::before { content: '\2715'; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--p100); color: var(--mut); font-size: 11px; display: grid; place-items: center; }

/* putanja na završnom slajdu */
.sc-putanja { width: 100%; margin-top: 18px; }
.sc-putanja svg { width: 100%; height: 8px; display: block; }
.sc-putanja .linija { fill: none; stroke: var(--p300, #B9C0D6); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300; }
.tour-slajd.zivi .sc-putanja .linija { animation: scCrtaj 1.3s ease-out .3s both; }
@keyframes scCrtaj { to { stroke-dashoffset: 0; } }
.sc-putanja .stanice { display: flex; justify-content: space-between; margin-top: -5px; }
.sc-putanja .stanica { display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 1; opacity: 0; }
.tour-slajd.zivi .sc-putanja .stanica { animation: scUlaz .5s cubic-bezier(.22,1,.36,1) both; }
.sc-putanja .stanica i { width: 11px; height: 11px; border-radius: 50%; background: var(--p700);
  box-shadow: 0 0 0 4px var(--pozadina, #FDF5EE); }
.sc-putanja .stanica em { font: 600 11.5px var(--font-b); color: var(--mut); font-style: normal; text-align: center; }

.ob-pilule { display: flex; gap: 7px; flex-wrap: wrap; flex: none; padding-top: 16px; }
.ob-pilule span { background: var(--p100); color: var(--p900); border-radius: 999px;
  padding: 8px 14px; font: 600 12.5px var(--font-b); }

/* kontekstualna kartica (F49 §4) */
.kt-kart { background: var(--card); border-radius: 22px; box-shadow: var(--sh-card);
  padding: 17px 19px; margin-bottom: 12px; }
.kt-kart h3 { font: 700 16px var(--font-h); color: var(--ink); margin: 0 0 4px; }
.kt-kart p { font: 400 13.5px/1.5 var(--font-b); color: var(--mut); margin: 0 0 12px; }
.kt-kart .kt-red { display: flex; gap: 8px; }
.kt-kart .kt-red .ob-input { flex: 1; }
.kt-kart .kt-cipovi { display: flex; gap: 8px; flex-wrap: wrap; }

.noc .sc-ishod, .noc .sc-bal--ai, .noc .sc-tacke, .noc .sc-log, .noc .sc-kart,
.noc .sc-pitred, .noc .kt-kart { background: var(--nk-card, #1A2036); }
.noc .sc-log.jak { background: #F1EDE6; }
.noc .sc-log.jak .v, .noc .sc-log.jak .o { color: #10142A; }
.noc .sc-log.jak .ko { background: rgba(16,20,42,.12); color: #10142A; }
.noc .sc-putanja .stanica i { box-shadow: 0 0 0 4px #10142A; }


/* ==========================================================================
   v0.3 - onboarding v4: ilustrovane kartice, datum korak, mozaik, spring ulaz
   ========================================================================== */
.k-btn--neaktivan { background: var(--p300); box-shadow: none; }
.ob-3d { position: absolute; top: -30px; right: -40px; width: 230px; height: 230px; pointer-events: none; opacity: .95; }
.ob-3d canvas { display: block; }
.ob-3d:not(:empty) + .ob-blob-fallback { display: none; }
.ob-ekran h1.e { font-size: 34px; line-height: 1.1; margin: 0 0 12px; color: var(--ink); }
.ob-ekran h2 { font: 800 28px/1.15 var(--font-h); letter-spacing: -.015em; }
.ob-input--veliki { padding: 17px 18px; font-size: 17px; }
.ob-input:focus { outline: 0; box-shadow: var(--sh-card), 0 0 0 2px var(--p700); transform: translateY(-1px); }
.ob-input { transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.ob-tekst-dugme { display: block; width: 100%; border: none; background: none; cursor: pointer; padding: 14px 0;
  margin-top: 4px; font: 600 14.5px var(--font-b); color: var(--mut); min-height: 44px; }
.ob-bezbedno i { flex: none; width: 18px; height: 18px; }

/* stagger ulaz elemenata onboardinga */
.ob-an { animation: obUlaz .48s var(--spring) both; }
.ob-ekran .ob-an:nth-child(1), .ob-hero .ob-an:nth-child(1) { animation-delay: .04s }
.ob-ekran .ob-an:nth-child(2), .ob-hero .ob-an:nth-child(2) { animation-delay: .10s }
.ob-ekran .ob-an:nth-child(3), .ob-hero .ob-an:nth-child(3) { animation-delay: .16s }
.ob-ekran .ob-an:nth-child(4), .ob-hero .ob-an:nth-child(4) { animation-delay: .22s }
.ob-ekran .ob-an:nth-child(5), .ob-hero .ob-an:nth-child(5) { animation-delay: .28s }
.ob-ekran .ob-an:nth-child(6) { animation-delay: .34s }
.ob-faze .ob-an:nth-child(1) { animation-delay: .18s } .ob-faze .ob-an:nth-child(2) { animation-delay: .26s } .ob-faze .ob-an:nth-child(3) { animation-delay: .34s }
@keyframes obUlaz { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* faza kartice sa ilustracijom */
.ob-faze { display: flex; flex-direction: column; gap: 12px; }
.ob-faza { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 14px 16px 14px 14px; border: 0; text-align: left; cursor: pointer; width: 100%;
  transition: transform var(--t-card) var(--spring), box-shadow var(--t-card), opacity 220ms; }
.ob-faza:active { transform: scale(.985); }
.ob-faza h3 { font: 700 17px var(--font-h); color: var(--ink); margin: 0 0 3px; }
.ob-faza p { font: 400 13px/1.45 var(--font-b); color: var(--mut); margin: 0; }
.ob-faza .txt { flex: 1; }
.ob-faza.izabrana { transform: scale(1.03); box-shadow: 0 2px 4px rgba(27,42,85,.05), 0 14px 34px rgba(27,42,85,.12); z-index: 2; }
.ob-faza.bledi { opacity: 0; transform: translateY(10px); }

/* placeholder ilustracija: organske forme + zrno (menja se <img> istih klasa) */
.ilu { flex: none; width: 84px; height: 84px; border-radius: 22px; position: relative; overflow: hidden; background: var(--paper); display: block; }
.ilu i { position: absolute; display: block; }
.ilu::after { content: ''; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"); }
.ilu--plan i:nth-child(1) { width: 70%; height: 62%; left: 8%; top: 22%; background: var(--lilac); border-radius: 58% 42% 55% 45% / 55% 50% 50% 45%; }
.ilu--plan i:nth-child(2) { width: 38%; height: 38%; right: 8%; top: 10%; background: var(--p700); border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%; opacity: .85; }
.ilu--plan i:nth-child(3) { width: 26%; height: 14%; left: 22%; bottom: 12%; background: var(--sage); border-radius: 50%; }
.ilu--trud i:nth-child(1) { width: 64%; height: 78%; left: 18%; top: 12%; background: var(--peach); border-radius: 48% 52% 45% 55% / 60% 55% 45% 40%; }
.ilu--trud i:nth-child(2) { width: 30%; height: 30%; left: 36%; top: 4%; background: var(--a500); border-radius: 50%; opacity: .9; }
.ilu--trud i:nth-child(3) { width: 44%; height: 26%; left: 4%; bottom: 6%; background: var(--lilac); border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
.ilu--dete i:nth-child(1) { width: 74%; height: 56%; left: 12%; bottom: 8%; background: var(--sage); border-radius: 52% 48% 60% 40% / 45% 55% 45% 55%; }
.ilu--dete i:nth-child(2) { width: 34%; height: 34%; left: 20%; top: 12%; background: var(--p700); border-radius: 50%; opacity: .9; }
.ilu--dete i:nth-child(3) { width: 24%; height: 24%; right: 14%; top: 22%; background: var(--sky); border-radius: 50%; }
.noc .ilu { background: #1A2036; }

/* tour v4 */
.tour-tekst h1.e { font-size: clamp(26px, 7.6vw, 31px); line-height: 1.14; margin: 0 0 9px; color: var(--ink); }
.ob-tacke span { transition: background .2s, width .32s var(--spring); }
.ob-tacke span.p { width: 22px; border-radius: 4px; }
.swipe-hint { display: block; text-align: center; font: 500 12px var(--font-b); color: var(--faint); margin-top: 8px; transition: opacity .2s; }
.tour-slajd.zivi .sc { animation: scUlaz .46s var(--spring) both; }
@keyframes scUlaz { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.tour-slajd.zivi .sc-tap { animation: scUlaz .46s var(--spring) both, scTap .3s var(--ease-out) both; animation-delay: inherit; }
@keyframes scTap { 0%, 55% { transform: scale(1); } 75% { transform: scale(.93); } 100% { transform: scale(1); } }
.sc-izvor { display: flex; align-items: center; gap: 6px; font: 500 11.5px var(--font-b); color: var(--faint); }
.sc-izvor i { width: 14px; height: 14px; color: var(--ok); }
.sc-poziv i { width: 18px; height: 18px; flex: none; }

/* mozaik funkcionalnosti */
.mozaik { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mz { background: var(--card); border-radius: 18px; box-shadow: var(--sh-card); padding: 13px 13px 12px; position: relative; min-height: 104px; }
.mz-ik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--p100); color: var(--p700); margin-bottom: 9px; }
.mz-ik i { width: 18px; height: 18px; }
.mz h4 { font: 700 14px var(--font-h); color: var(--ink); margin: 0 0 2px; }
.mz p { font: 400 12px/1.4 var(--font-b); color: var(--mut); margin: 0; }
.mz-tacke { position: absolute; top: 14px; right: 12px; display: flex; gap: 3px; }
.mz-tacke span { width: 5px; height: 5px; border-radius: 50%; background: var(--p300); animation: tacka 1s ease-in-out infinite; }
.mz-tacke span:nth-child(2) { animation-delay: .16s } .mz-tacke span:nth-child(3) { animation-delay: .32s }
@keyframes tacka { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.mz-bar { position: absolute; left: 13px; right: 13px; bottom: 10px; height: 5px; border-radius: 999px; background: var(--p100); overflow: hidden; }
.mz-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--a500); }
.tour-slajd.zivi .mz-bar i { animation: mzBar .9s var(--ease-out) .9s both; }
@keyframes mzBar { to { width: var(--w); } }
.mz-broj { position: absolute; top: 10px; right: 13px; font: 800 22px var(--font-h); color: var(--p900); }
.mz:has(.mz-broj) .mz-ik { margin-right: 40px; }
.noc .mz { background: #1A2036; }
.noc .mz-broj { color: #F1EDE6; }

/* pilule na završnom slajdu ulaze posle putanje */
.ob-pilule span { opacity: 0; }
.tour-slajd.zivi .ob-pilule span { animation: scUlaz .4s var(--spring) both; }

/* Fraunces mora da pobedi starije `font:` shorthand-e po specifičnosti */
.ob-hero h1.e, .ob-ekran h1.e, .tour-tekst h1.e, .k-hero h1.e, .k-card h2.e {
  font-family: var(--font-h); font-weight: 800; letter-spacing: -.015em; }
.ob-3d { opacity: .8; top: -50px; right: -60px; }


/* ==========================================================================
   v0.3 - IA: tabbar sa klizećim pill-om, hubovi, meni; Danas v4; izvor-red; verdikt „još ne“
   ========================================================================== */
#tabbar a .ik, .topbar .nazad i, .topbar .hitno-btn i { display: grid; place-items: center; }
#tabbar a .ik { width: 44px; height: 30px; border-radius: 999px; transition: background .25s, transform .32s var(--spring); }
#tabbar a .ik i { width: 22px; height: 22px; }
#tabbar a.aktivan .ik { background: var(--p100); transform: translateY(-2px); }
#tabbar a.aktivan { color: var(--p700); }
#tabbar .tab-pitaj .kruzic i { width: 24px; height: 24px; }
#tabbar a i[data-lucide], #tabbar a svg { pointer-events: none; }
.topbar .nazad i, .topbar .hitno-btn i, .topbar .nazad svg, .topbar .hitno-btn svg { width: 20px; height: 20px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--lilac); color: var(--p900);
  font: 700 14px var(--font-h); display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.avatar--veliki { width: 56px; height: 56px; font-size: 20px; flex: none; }
.hero-dugmad { display: flex; gap: 8px; align-items: center; }
.k-hero--v4 { position: relative; overflow: hidden; }
.k-hero--v4 .hero-red { position: relative; z-index: 2; }
.hero-3d { position: absolute; right: -40px; top: -30px; width: 220px; height: 220px; opacity: .85; z-index: 1; pointer-events: none; }
.hero-3d canvas { display: block; }
.k-hero--v4 h1.e { font-size: 32px; line-height: 1.1; margin: 4px 0 6px; }
.k-hero--v4 .sub { max-width: 260px; }
/* reč po reč */
h1 .w { display: inline-block; opacity: 0; animation: recUlaz .5s var(--spring) both; }
@keyframes recUlaz { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* dve veličine kartice */
.k-card--edit { border-radius: 24px; padding: 20px 22px; }
.k-card--edit h2.e { font-size: 21px; line-height: 1.25; margin: 6px 0 6px; }
.k-card--act { border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; cursor: pointer; width: 100%; font-family: inherit; }
.k-card--act .txt { flex: 1; min-width: 0; }
.k-card--act h3 { font: 700 16px var(--font-h); color: var(--ink); margin: 2px 0 3px; }
.k-card--act p { font: 400 13px/1.45 var(--font-b); color: var(--mut); margin: 0; }
.k-card--act .stat { flex: none; text-align: center; background: var(--p100); border-radius: 14px; padding: 8px 10px; min-width: 62px; }
.k-card--act .stat b { display: block; font: 800 22px/1 var(--font-h); color: var(--p900); }
.k-card--act .stat small { display: block; font: 600 9.5px/1.2 var(--font-b); color: var(--mut); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.k-tag i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.sadrzaj > .k-card + .k-card, .sadrzaj > .k-card + .kt-kart, .sadrzaj > .kt-kart + .k-card, .sadrzaj > .k-card + .brze { margin-top: 12px; }
/* stagger ulaz kartica na Danas/hubovima */
.k-an { animation: kUlaz .5s var(--spring) both; }
.sadrzaj .k-an:nth-child(1) { animation-delay: .06s } .sadrzaj .k-an:nth-child(2) { animation-delay: .13s } .sadrzaj .k-an:nth-child(3) { animation-delay: .20s }
.sadrzaj .k-an:nth-child(4) { animation-delay: .27s } .sadrzaj .k-an:nth-child(5) { animation-delay: .34s } .sadrzaj .k-an:nth-child(6) { animation-delay: .41s }
.sadrzaj .k-an:nth-child(7) { animation-delay: .48s } .sadrzaj .k-an:nth-child(8) { animation-delay: .55s } .sadrzaj .k-an:nth-child(9) { animation-delay: .62s }
@keyframes kUlaz { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* brze radnje */
.brze { display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 12px -20px 0; padding: 2px 20px 6px; }
.brze::-webkit-scrollbar { display: none; }
.brze button { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 7px; border: 0; background: var(--card); box-shadow: var(--sh-card);
  border-radius: 999px; padding: 11px 15px; font: 600 13.5px var(--font-b); color: var(--ink); cursor: pointer; min-height: 44px; }
.brze button i { width: 16px; height: 16px; color: var(--p700); }
.brze button:active { transform: scale(.97); }

/* hub redovi i meni */
.hub-uvod { font: 400 14.5px/1.5 var(--font-b); color: var(--mut); margin: 0 2px 14px; }
.hub-red { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--card); border-radius: 18px; box-shadow: var(--sh-card); padding: 13px 14px; margin-bottom: 10px; min-height: 64px; }
.hub-red .txt { flex: 1; min-width: 0; }
.hub-red h3 { font: 700 15px var(--font-h); color: var(--ink); margin: 0 0 2px; }
.hub-red p { font: 400 12.5px/1.4 var(--font-b); color: var(--mut); margin: 0; }
.hub-red .strelica { width: 18px; height: 18px; color: var(--p300); flex: none; }
.hub-red .k-ico i { width: 20px; height: 20px; }
.hub-red:active { transform: scale(.985); }
.meni-glava { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.meni-glava h2.e { margin: 0 0 2px; }
.meni-glava p { margin: 0; }

/* izvor i verdikt */
.izvor-red { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 500 11.5px var(--font-b); color: var(--faint); }
.izvor-red i { width: 14px; height: 14px; color: var(--ok); flex: none; }
.verdikt.jos { background: var(--p100); color: var(--p900); }
.k-link .partner-oznaka { margin-left: 6px; vertical-align: middle; }

/* safety banner u Pitaj - stabilan, tanak, uvek vidljiv */
.safety-banner { display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); margin: 6px 20px 0; border: 0; cursor: pointer;
  background: var(--a100); color: var(--ink); border-radius: 14px; padding: 11px 14px; font: 400 13px/1.35 var(--font-b); text-align: left; }
.safety-banner b { font-weight: 700; }
.safety-banner span { flex: 1; }
.safety-banner i { width: 18px; height: 18px; color: var(--a600); flex: none; }

.noc .k-card--act .stat, .noc #tabbar a.aktivan .ik { background: rgba(255,255,255,.08); }
.noc .k-card--act .stat b { color: #F1EDE6; }
.noc .hub-red, .noc .brze button { background: #1A2036; }
.noc .safety-banner { background: #3A2430; color: #F1EDE6; }


/* --- WP1: nocni kontrast za komponente v0.3 (nigde cisto bela povrsina, tekst >= 4,5:1) --- */
.noc .ob-faza, .noc .kt-kart, .noc .k-card--act, .noc .k-card--edit { background: var(--card); }
.noc .ob-faza h3, .noc .hub-red h3, .noc .k-card--act h3, .noc .mz h4, .noc .sc-kart h4, .noc .sc-pit, .noc .sc-ishod, .noc .sc-log, .noc .sc-pitred, .noc .sc-bal--ai,
.noc .ob-ekran h1.e, .noc .ob-ekran h2, .noc .tour-tekst h1, .noc .kt-kart h3, .noc .hub-uvod, .noc .k-card--edit h2 { color: var(--ink); }
.noc .ob-faza p, .noc .hub-red p, .noc .k-card--act p, .noc .mz p, .noc .tour-tekst p, .noc .kt-kart p, .noc .ob-veliki { color: var(--mut); }
.noc .k-btn--neaktivan { background: #2A3350; color: rgba(241,237,230,.55); }
.noc .ob-tekst-dugme { color: var(--mut); }
.noc .ob-input { background: var(--card); color: var(--ink); }
.noc .ob-input::placeholder { color: var(--faint); }
.noc .ob-tacke span { background: rgba(255,255,255,.14); } .noc .ob-tacke span.p { background: #F1EDE6; }
.noc .mz-ik, .noc .k-card--act .k-ico, .noc .hub-red .k-ico { background: rgba(255,255,255,.08); color: #F1EDE6; }
.noc .safety-banner i { color: #F26973; }
.noc .izvor-red { color: var(--faint); } .noc .izvor-red i { color: #7BC4A4; }
.noc .sc-cip { background: #F1EDE6; color: #10142A; }
.noc .sc-bal--ja { background: #F1EDE6; color: #10142A; }
.noc .sc-poziv { background: rgba(242,105,115,.16); color: #F7A0A6; }
.noc .sc-granica, .noc .sc-zag, .noc .swipe-hint, .noc .ob-nap, .noc .edu-nap { color: var(--faint); }
.noc .avatar { background: #3A3F63; color: #F1EDE6; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.noc #tabbar a.aktivan { color: #F1EDE6; }
.noc .verdikt.jos { background: rgba(255,255,255,.1); color: #F1EDE6; }
.noc .ob-3d, .noc .hero-3d { opacity: .55; }
.noc .modal { background: #161B2E; } .noc .modal h3 { color: #F1EDE6; } .noc .modal p { color: var(--mut); }

/* kontekstualna kartica: polje i dugme dele red (dugme je uzimalo 280 px) */
.kt-kart .kt-red .ob-input { flex: 1 1 auto; min-width: 0; width: auto; }
.kt-kart .kt-red .k-btn { flex: 0 0 auto; width: auto; min-width: 0; padding: 0 18px; min-height: 50px; }


/* ==========================================================================
   WP3: onboarding v5. Naslov = naziv modula; špil karata (3D stack).
   ========================================================================== */
.tour-oznaka { display: block; font: 600 13px/1.4 var(--font-b); letter-spacing: 0; text-transform: none; color: var(--a600); margin-bottom: 6px; }
.tour-tekst h1.e { font: 800 clamp(26px, 7.6vw, 31px)/1.12 var(--font-h); letter-spacing: -.015em; }

/* Feature story: context lives in the typography, not a notification banner. */
.tour--prica { height: 100dvh; background: var(--paper); }
.tour--prica .tour-vrh { padding: max(12px, env(safe-area-inset-top)) 22px 2px; gap: 12px; }
.tour-potpis { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); font: 650 11px/1.3 var(--font-b); }
.tour-potpis svg { width: 16px; height: 16px; color: var(--a600); flex: none; }
.tour--prica .tour-vrh button { font-size: 12px; }
.tour--prica .tour-progres { flex: none; gap: 6px; margin: 0 22px 22px; }
.tour--prica .tour-progres span { flex: 1; width: auto; height: 3px; border-radius: 99px; background: var(--p100); }
.tour--prica .tour-progres span.prosao { background: var(--p300); }
.tour--prica .tour-progres span.p { background: var(--p700); }
.tour--prica .tour-traka { min-height: 0; }
.tour--prica .tour-slajd { flex: 0 0 100%; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 18px; }
.tour--prica .tour-oznaka { margin-bottom: 13px; color: var(--mut); font: 650 10px/1.4 var(--font-b); letter-spacing: .12em; text-transform: uppercase; }
.tour--prica .tour-tekst h1.e { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.22; letter-spacing: -.035em; margin-bottom: 18px; }
.tour-akcenat { color: var(--ink); padding: 0 .07em; border-radius: 5px; background: linear-gradient(transparent 48%, var(--peach) 48%, var(--peach) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tour-slajd:nth-child(even) .tour-akcenat { background-image: linear-gradient(transparent 48%, var(--blob-roze) 48%, var(--blob-roze) 94%, transparent 94%); }
.tour--prica .tour-tekst p { max-width: 350px; font-size: 14px; line-height: 1.55; }
.tour--prica .scena-kut { flex: 0 0 auto; padding-top: 22px; }
.tour-primer { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--mut); font: 600 11px/1.4 var(--font-b); }
.tour-primer svg { width: 14px; height: 14px; }
.tour-primer > span { margin-left: auto; font-size: 10px; color: var(--faint); }
.tour--prica .tour-dno { padding-top: 12px; background: var(--paper); box-shadow: 0 -12px 22px var(--paper); z-index: 1; }
.noc .tour--prica .tour-akcenat { background-image: linear-gradient(transparent 48%, #594052 48%, #594052 94%, transparent 94%); }
.noc .tour--prica .tour-progres span.p { background: var(--ink); }
@media (max-height: 720px) {
  .tour--prica .tour-progres { margin-bottom: 12px; }
  .tour--prica .tour-tekst h1.e { font-size: 28px; margin-bottom: 12px; }
  .tour--prica .tour-oznaka { margin-bottom: 8px; }
  .tour--prica .scena-kut { padding-top: 16px; }
}

.spil { width: 100%; display: flex; flex-direction: column; align-items: center; }
.spil-brojac { align-self: flex-start; font: 600 12px var(--font-b); color: var(--faint); margin-bottom: 6px; }
.spil-brojac b { font: 800 16px var(--font-h); color: var(--p900); margin-right: 2px; }
.spil-scena { position: relative; width: 100%; height: 318px; perspective: 1100px; touch-action: pan-x; user-select: none; }
.karta { top: 62px; }
.karta { position: absolute; left: 6%; right: 6%; top: 34px; height: 232px; border: 0; border-radius: 24px; background: var(--card);
  box-shadow: 0 10px 30px rgba(27,42,85,.10), 0 2px 4px rgba(27,42,85,.05); padding: 18px 18px 16px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; font-family: inherit;
  transform: translateY(calc(var(--r) * -18px)) translateZ(calc(var(--r) * -70px)) rotate(calc(var(--r) * var(--s, 1) * 2.2deg)) scale(calc(1 - var(--r) * 0.035));
  opacity: calc(1 - var(--r) * 0.14); z-index: calc(20 - var(--r));
  outline: 1px solid rgba(27,42,85,.06);
  transition: transform .42s var(--spring), opacity .3s; }
.karta[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.karta .karta-txt { display: flex; flex-direction: column; gap: 3px; }
.karta .karta-txt b { font: 800 22px/1.15 var(--font-h); color: var(--ink); letter-spacing: -.01em; }
.karta .karta-txt small { font: 500 14px var(--font-b); color: var(--mut); }
.karta .karta-broj { position: absolute; top: 16px; right: 18px; font: 800 13px var(--font-h); color: var(--p300); }
.karta.tip-podoj { background: linear-gradient(160deg, var(--tip-podoj-bg) 0%, var(--card) 70%); }
.karta.tip-san   { background: linear-gradient(160deg, var(--tip-san-bg) 0%, var(--card) 70%); }
.karta.tip-pelena{ background: linear-gradient(160deg, var(--tip-pelena-bg) 0%, var(--card) 70%); }
.karta.tip-obrok { background: linear-gradient(160deg, var(--tip-obrok-bg) 0%, var(--card) 70%); }
.karta.tip-lek   { background: linear-gradient(160deg, var(--tip-lek-bg) 0%, var(--card) 70%); }
.karta.tip-mer   { background: linear-gradient(160deg, var(--tip-mer-bg) 0%, var(--card) 70%); }
.karta.tip-dok   { background: linear-gradient(160deg, var(--tip-dok-bg) 0%, var(--card) 70%); }
.karta.tip-kal   { background: linear-gradient(160deg, var(--tip-kal-bg) 0%, var(--card) 70%); }
.karta.tip-uci   { background: linear-gradient(160deg, var(--tip-uci-bg) 0%, var(--card) 70%); }
.karta.tip-zaj   { background: linear-gradient(160deg, var(--tip-zaj-bg) 0%, var(--card) 70%); }
.karta.prednja:active { transform: translateY(0) scale(.985); }
.spil-dugmad { margin-top: 4px; }
.spil-dugmad .k-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.spil-dugmad .k-btn i { width: 18px; height: 18px; }

.spil-fokus { position: fixed; inset: 0; z-index: 70; background: rgba(16,20,42,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.karta--fokus { position: relative; left: auto; right: auto; top: auto; width: min(360px, 100%); height: auto; transform: none !important; opacity: 1 !important;
  gap: 10px; padding: 22px 22px 20px; cursor: default; box-shadow: 0 30px 80px rgba(16,20,42,.35); }
.karta--fokus h3 { font: 800 24px/1.15 var(--font-h); color: var(--ink); margin: 6px 0 0; }
.karta--fokus .karta-x { font: 600 14px var(--font-b); color: var(--a600); margin: 0; }
.karta--fokus .karta-o { font: 400 15px/1.55 var(--font-b); color: var(--mut); margin: 0 0 6px; }
.karta--fokus .k-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .spil-scena { height: auto; perspective: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .karta { position: static; transform: none !important; opacity: 1 !important; height: auto; min-height: 120px; }
  .karta[aria-hidden="true"] { opacity: 1 !important; pointer-events: auto; }
  .spil-dugmad, .spil-brojac { display: none; }
}
.noc .karta { background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.noc .karta .karta-txt b, .noc .karta--fokus h3 { color: var(--ink); }
.noc .spil-fokus { background: rgba(0,0,0,.65); }


/* ==========================================================================
   WP2: Danas v5. Pitaj kutija, widgeti, pin u hubovima, tile boje.
   ========================================================================== */
.pitaj-box { padding: 14px 14px 12px; }
.pitaj-red { display: flex; align-items: center; gap: 10px; }
.pitaj-in { flex: 1; min-width: 0; border: 0; background: var(--paper); border-radius: 16px; padding: 13px 14px; font: 500 15px var(--font-b); color: var(--ink); outline: 0; }
.pitaj-in:focus { box-shadow: 0 0 0 2px var(--p700); }
.pitaj-in::placeholder { color: var(--faint); }
.pitaj-posalji { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--p700); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh-btn); }
.pitaj-posalji i { width: 20px; height: 20px; }
.pitaj-posalji:active { transform: scale(.95); }
.pitaj-cipovi { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; margin: 12px -14px 0; padding: 0 14px 2px; scroll-snap-type: x proximity; }
.pitaj-cipovi::-webkit-scrollbar { display: none; }
.pitaj-cipovi button { flex: none; scroll-snap-align: start; border: 0; cursor: pointer; background: var(--p100); color: var(--p900); border-radius: 999px; padding: 9px 13px; font: 600 12.5px var(--font-b); min-height: 36px; }

.widget { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: inherit;
  background: var(--card); border-radius: 18px; box-shadow: var(--sh-card); padding: 13px 14px; margin-top: 12px; position: relative; overflow: hidden; }
.widget::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--p300); }
.widget.tip-podoj::before { background: var(--tip-podoj); } .widget.tip-san::before { background: var(--tip-san); } .widget.tip-pelena::before { background: var(--tip-pelena); }
.widget.tip-obrok::before { background: var(--tip-obrok); } .widget.tip-lek::before { background: var(--tip-lek); } .widget.tip-mer::before { background: var(--tip-mer); }
.widget.tip-dok::before { background: var(--tip-dok); } .widget.tip-kal::before { background: var(--tip-kal); } .widget.tip-uci::before { background: var(--tip-uci); } .widget.tip-zaj::before { background: var(--tip-zaj); }
.widget .w-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.widget h3 { font: 700 15px var(--font-h); color: var(--ink); margin: 0 0 1px; }
.w-linija { font: 400 12.5px/1.4 var(--font-b); color: var(--mut); } .w-linija b { color: var(--ink); font-weight: 700; }
.w-stat { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px var(--font-b); color: var(--mut); margin-right: 10px; }
.w-stat b { color: var(--ink); } .w-stat .tacka { width: 8px; height: 8px; }
.widget .w-strelica { width: 18px; height: 18px; color: var(--p300); flex: none; }
.w-uredi { display: block; margin: 10px 4px 0; }
.prazno-widgeti { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 14px 16px; }
.prazno-widgeti p { font: 400 13.5px/1.5 var(--font-b); color: var(--mut); margin: 0; }
.prazno-widgeti b { color: var(--ink); }

.hub-red { padding: 0; overflow: hidden; }
.hub-red .hub-otvori { flex: 1; display: flex; align-items: center; gap: 12px; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; padding: 13px 0 13px 14px; min-width: 0; }
.hub-red .hub-otvori .txt { flex: 1; min-width: 0; }
.hub-red .pin { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; cursor: pointer;
  padding: 10px 12px; min-width: 64px; min-height: 64px; color: var(--faint); font: 600 10px var(--font-b); border-left: 1px solid var(--p100); }
.hub-red .pin i { width: 18px; height: 18px; }
.hub-red .pin.on { color: var(--p700); background: var(--p100); }
.epizoda { border-left: 4px solid var(--a500); }
.brze button.tip-podoj i { color: var(--tip-podoj); } .brze button.tip-san i { color: var(--tip-san); } .brze button.tip-pelena i { color: var(--tip-pelena); }
.brze button.tip-lek i { color: var(--tip-lek); } .brze button.tip-kal i { color: var(--tip-kal); } .brze button.tip-mer i { color: var(--tip-mer); }
.brze button.tip-dok i { color: var(--tip-dok); } .brze button.tip-uci i { color: var(--tip-uci); } .brze button.tip-zaj i { color: var(--tip-zaj); }
.k-card--breskva.grad { background: var(--grad-peach); }
.noc .pitaj-in { background: var(--paper); color: var(--ink); }
.noc .pitaj-cipovi button { background: rgba(255,255,255,.08); color: var(--ink); }
.noc .widget, .noc .prazno-widgeti { background: var(--card); }
.noc .hub-red .pin { border-color: rgba(255,255,255,.08); } .noc .hub-red .pin.on { background: rgba(255,255,255,.08); color: #F1EDE6; }
.noc .k-card--breskva.grad { background: linear-gradient(160deg, #3A2A2E 0%, #1B2140 100%); }


/* ==========================================================================
   WP4: zajednica. Mame kao i ti, Puls dana, grupe i prepiska.
   ========================================================================== */
.puls h2 { font: 800 18px/1.3 var(--font-h); color: var(--ink); margin: 10px 0 12px; }
.puls-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.puls-uc { font: 500 12px var(--font-b); color: var(--mut); } .puls-uc b { font: 800 14px var(--font-h); color: var(--p900); }
.puls-opcije { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.puls-opc { border: 0; cursor: pointer; border-radius: 16px; min-height: 64px; padding: 10px 8px; font: 700 13.5px/1.3 var(--font-b); color: var(--ink);
  transition: transform .2s var(--spring); }
.puls-opc:active { transform: scale(.96); }
.puls-opc.tip-podoj { background: var(--tip-podoj-bg); } .puls-opc.tip-pelena { background: var(--tip-pelena-bg); } .puls-opc.tip-san { background: var(--tip-san-bg); }
.puls-tacke { display: flex; gap: 6px; margin-top: 12px; }
.puls-tacke span { width: 8px; height: 8px; border-radius: 50%; background: var(--p100); } .puls-tacke span.p { background: var(--p700); }
.puls-zakljucak { font: 800 19px/1.3 var(--font-h); color: var(--ink); }
.puls-blok { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--p100); }
.puls-pit { font: 600 13px var(--font-b); color: var(--mut); margin: 0 0 6px; }
.puls-bar { display: flex; align-items: center; gap: 8px; font: 500 12.5px var(--font-b); color: var(--ink); margin: 4px 0; }
.puls-bar .lab { flex: none; width: 118px; color: var(--mut); } .puls-bar.moj .lab { color: var(--ink); font-weight: 700; }
.puls-bar .staza { flex: 1; height: 10px; border-radius: 999px; background: var(--p100); overflow: hidden; }
.puls-bar .staza i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--p300); animation: pulsRast .9s var(--ease-out) .2s both; }
.puls-bar.moj .staza i { background: var(--a500); }
@keyframes pulsRast { to { width: var(--w); } }
.puls-bar .proc { flex: none; width: 38px; text-align: right; font-weight: 700; color: var(--p900); }

.nit-btn { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; padding: 12px 8px; border-bottom: 1px solid var(--p100); }
.nit-btn:last-child { border-bottom: 0; }
.nit-btn .nit { flex: 1; min-width: 0; } .nit-btn .strelica { width: 18px; height: 18px; color: var(--p300); flex: none; }
.cm-ini { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-h); color: #fff; background: var(--p300); }
.cm-ini.tip-podoj { background: var(--tip-podoj); } .cm-ini.tip-san { background: var(--tip-san); } .cm-ini.tip-pelena { background: var(--tip-pelena); }
.cm-ini.tip-mer { background: var(--tip-mer); } .cm-ini.tip-uci { background: var(--tip-uci); } .cm-ini.tip-zaj { background: var(--tip-zaj); }
.cm-ini.tip-kal { background: var(--tip-kal); } .cm-ini.tip-dok { background: var(--tip-dok); }

.grupa .grupa-glava { display: flex; align-items: center; gap: 12px; }
.grupa .grupa-glava .txt { flex: 1; min-width: 0; }
.grupa h3 { font: 700 16px var(--font-h); color: var(--ink); margin: 0 0 2px; } .grupa p { font: 400 12.5px/1.4 var(--font-b); color: var(--mut); margin: 0; }
.grupa-akcije { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.grupa-akcije .k-btn { min-height: 44px; padding: 0 16px; font-size: 14px; flex: 1; }
.grupa-pregled { flex: 1; text-align: right; font: 500 12px var(--font-b); color: var(--faint); }
.sadrzaj > .grupa + .grupa { margin-top: 12px; }

.cm-tok { padding: 12px 16px 120px; display: flex; flex-direction: column; gap: 10px; }
.cm-uvod { display: flex; gap: 10px; align-items: center; background: var(--p100); border-radius: 16px; padding: 10px 12px; margin-bottom: 4px; }
.cm-uvod p { font: 400 12.5px/1.45 var(--font-b); color: var(--p900); margin: 0; }
.cm { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.cm.moja { align-self: flex-end; flex-direction: row-reverse; }
.cm-telo { background: var(--card); border-radius: 18px; border-bottom-left-radius: 6px; box-shadow: var(--sh-card); padding: 9px 13px 10px; }
.cm.moja .cm-telo { background: var(--p700); color: #fff; border-radius: 18px; border-bottom-right-radius: 6px; }
.cm-meta { display: flex; align-items: center; gap: 6px; font: 500 11px var(--font-b); color: var(--faint); margin-bottom: 3px; }
.cm-meta b { color: var(--ink); font-weight: 700; } .cm.moja .cm-meta b, .cm.moja .cm-meta span { color: rgba(255,255,255,.8); }
.cm-telo p { font: 400 14px/1.45 var(--font-b); color: var(--ink); margin: 0; } .cm.moja .cm-telo p { color: #fff; }
.cm-pravila { display: flex; gap: 8px; align-items: flex-start; font: 400 12px/1.45 var(--font-b); color: var(--mut); background: var(--paper); border: 1px dashed var(--p300); border-radius: 14px; padding: 10px 12px; margin-top: 6px; }
.cm-pravila i { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 1px; }
.noc .cm-telo { background: var(--card); } .noc .cm.moja .cm-telo { background: #F1EDE6; } .noc .cm.moja .cm-telo p, .noc .cm.moja .cm-meta b, .noc .cm.moja .cm-meta span { color: #10142A; }
.noc .puls-opc.tip-podoj { background: rgba(232,93,138,.2); } .noc .puls-opc.tip-pelena { background: rgba(240,138,60,.2); } .noc .puls-opc.tip-san { background: rgba(92,107,192,.25); }
.noc .cm-pravila { background: var(--card); }


/* ==========================================================================
   WP5a: forme (kontakt, dogadjaj, spisak), timeline sa tackama u boji tipa
   ========================================================================== */
.forma h3 { font: 700 17px var(--font-h); color: var(--ink); margin: 0 0 4px; }
.forma .ob-labela { margin-top: 12px; }
.forma-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forma-dugmad { display: flex; gap: 8px; margin-top: 16px; }
.forma-dugmad .k-btn { flex: 1; min-height: 48px; padding: 0 14px; font-size: 14.5px; }
.obrisi-mali { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.obrisi-mali i { width: 16px; height: 16px; }
.obrisi-mali:hover { background: var(--p100); color: var(--a600); }
.hitno-red .tile { margin-right: 10px; }
.sadrzaj > .k-card + .sekcija-naslov { margin-top: 16px; }

/* ==========================================================================
   Stage 1 — premium editorial polish. IA i tokovi ostaju nepromenjeni.
   ========================================================================== */

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 4%, rgba(245,146,189,.13), transparent 23%),
    radial-gradient(circle at 92% 24%, rgba(252,208,196,.18), transparent 26%);
}

#app { position: relative; overflow-x: hidden; }

@media (min-width: 480px) {
  body {
    background-color: #f4e9e4;
    background-image:
      radial-gradient(circle at 18% 14%, rgba(245,146,189,.2), transparent 24%),
      radial-gradient(circle at 84% 78%, rgba(171,163,210,.18), transparent 25%);
  }
  #app { box-shadow: 0 24px 90px rgba(27,42,85,.16); }
}

.topbar {
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.topbar h1 { font-weight: 800; font-size: 21px; letter-spacing: -.025em; }
.topbar .nazad, .hitno-btn, .avatar { transition: transform .18s var(--ease-out), box-shadow .18s; }
.topbar .nazad:active, .hitno-btn:active, .avatar:active { transform: scale(.92); }

.k-card, .widget, .hub-red {
  border: 1px solid color-mix(in srgb, var(--p100) 58%, transparent);
  box-shadow: 0 2px 4px rgba(27,42,85,.035), 0 12px 30px rgba(27,42,85,.075);
}
.k-card { border-radius: 26px; }
.k-btn { min-height: 54px; letter-spacing: -.01em; }

.k-hero--v4 {
  min-height: 260px;
  padding: calc(12px + env(safe-area-inset-top)) 22px 42px;
  border-radius: 0 0 38px 38px;
  background:
    radial-gradient(circle at 108% -5%, var(--blob-koral) 0 22%, transparent 22.5%),
    radial-gradient(circle at 94% 52%, rgba(245,146,189,.94) 0 18%, transparent 18.5%),
    linear-gradient(145deg, #1b2a55 0%, #2f4682 100%);
}
.k-hero--v4::after {
  content: ''; position: absolute; width: 150px; height: 150px; right: -72px; bottom: -72px;
  border: 22px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none;
}
.k-hero--v4 .hero-red { min-height: 170px; }
.k-hero--v4 h1.e { font-size: 36px; max-width: 245px; margin-top: 8px; }
.k-hero--v4 .sub { font-size: 14.5px; line-height: 1.55; max-width: 245px; }
.hero-3d { right: -45px; top: 24px; width: 210px; height: 210px; opacity: .9; }
.hero-dugmad { position: relative; z-index: 3; }

.k-hero--v4 + .sadrzaj { position: relative; margin-top: -24px; z-index: 3; padding-inline: 18px; }
.pitaj-box { padding: 15px; border-radius: 24px; }
.pitaj-in { background: #fff9f5; }
.pitaj-cipovi button { border: 1px solid rgba(36,52,95,.06); }

.home-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin: 22px 3px 10px;
}
.home-section-head h2 { font: 800 20px/1.15 var(--font-h); color: var(--ink); letter-spacing: -.02em; }
.home-kicker, .hub-kicker { display: block; margin-bottom: 5px; font: 700 10px var(--font-b); letter-spacing: .16em; text-transform: uppercase; color: var(--a600); }
.home-count { min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; background: var(--p100); color: var(--p900); font: 800 13px var(--font-h); }
.widget { min-height: 76px; padding: 15px 15px 15px 17px; border-radius: 21px; }
.widget::before { top: 17px; bottom: 17px; width: 4px; }
.widget h3 { font-size: 15.5px; }
.w-uredi { display: inline-flex; align-items: center; gap: 6px; margin: 13px 4px 2px; }
.w-uredi svg { width: 15px; height: 15px; }

/* postojeći Prati/Otkrij ostaju glavne destinacije; dobijaju jasniji identitet */
.hub-hero {
  min-height: 180px; margin: 2px 0 16px; padding: 24px 22px; position: relative; overflow: hidden;
  border-radius: 30px; color: #fff; box-shadow: 0 18px 38px rgba(27,42,85,.2);
}
.hub-hero--prati { background: linear-gradient(145deg, #1b2a55, #324a88); }
.hub-hero--otkrij { background: linear-gradient(145deg, #ef6f7a, #d23a56); }
.hub-hero-copy { position: relative; z-index: 2; max-width: 245px; }
.hub-hero h2 { font: 800 25px/1.12 var(--font-h); letter-spacing: -.025em; margin: 0 0 8px; }
.hub-hero p { font: 400 13.5px/1.5 var(--font-b); color: rgba(255,255,255,.85); max-width: 230px; }
.hub-hero .hub-kicker { color: rgba(255,255,255,.72); }
.hub-hero-icon { position: absolute; z-index: 2; right: 22px; bottom: 20px; width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.hub-hero-icon svg { width: 25px; height: 25px; }
.hub-shape { position: absolute; border-radius: 50%; pointer-events: none; }
.hub-shape--one { width: 145px; height: 145px; right: -48px; top: -54px; background: var(--blob-roze); }
.hub-shape--two { width: 105px; height: 105px; right: 45px; bottom: -70px; background: var(--blob-breskva); opacity: .7; }
.hub-uvod { margin: 0 4px 15px; font-size: 13.5px; }
.hub-red { border-radius: 22px; min-height: 76px; margin-bottom: 12px; }
.hub-red .hub-otvori { padding: 15px 0 15px 15px; }
.hub-red h3 { font-size: 15.5px; }
.hub-red .pin { min-height: 76px; border-left-color: rgba(36,52,95,.07); }

/* Stage 2: Prati kao radni prostor, Otkrij kao urednička biblioteka */
.hub-page { padding-top: 8px; }
.hub-page .hub-hero { margin-bottom: 22px; }
.hub-hero-meta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.1);
  font: 650 10.5px var(--font-b); color: rgba(255,255,255,.9); backdrop-filter: blur(7px);
}
.hub-hero-meta svg { width: 13px; height: 13px; }
.hub-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 25px 3px 11px; }
.hub-section-head h2 { margin: 0; font: 800 20px/1.15 var(--font-h); letter-spacing: -.025em; color: var(--ink); }
.hub-section-head > span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--p100); color: var(--p900); font: 800 11px var(--font-h); }
.hub-section-head--quick { margin-top: 0; }
.hub-quick { margin-bottom: 4px; }
.hub-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.hub-quick-grid button {
  min-height: 108px; padding: 13px 9px 12px; border: 1px solid color-mix(in srgb, var(--p100) 66%, transparent);
  border-radius: 21px; background: var(--card); box-shadow: var(--sh-card); color: var(--ink); cursor: pointer;
  font: 700 11.5px/1.25 var(--font-b); text-align: center; transition: transform .18s var(--spring), box-shadow .18s;
}
.hub-quick-grid button span { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 15px; background: var(--p100); color: var(--p700); }
.hub-quick-grid button:nth-child(2) span { background: var(--tip-lek-bg); color: var(--tip-lek); }
.hub-quick-grid button:nth-child(3) span { background: var(--tip-mer-bg); color: var(--tip-mer); }
.hub-quick-grid button svg { width: 19px; height: 19px; }
.hub-quick-grid button:active { transform: scale(.96); }

.hub-red--v2 { display: block; position: relative; min-height: 88px; padding: 0; }
.hub-red--v2 .hub-otvori { width: 100%; padding: 15px 62px 15px 15px; }
.hub-red--v2 .tile { align-self: flex-start; margin-top: 1px; }
.hub-red--v2 .txt { padding-right: 1px; }
.hub-red--v2 .hub-row-top { display: block; margin-bottom: 4px; }
.hub-red--v2 .hub-row-top h3 { margin: 0; }
.hub-red--v2 .hub-row-top small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 9.5px var(--font-b); color: var(--a600); }
.hub-red--v2 .hub-chevron { width: 17px; height: 17px; color: var(--p300); flex: none; }
.hub-red--v2 .pin {
  position: absolute; right: 0; top: 0; bottom: 0; min-width: 58px; min-height: 0; border-left: 1px solid rgba(36,52,95,.07);
  justify-content: center; border-radius: 0 22px 22px 0;
}
.hub-red--v2 .pin span { font-size: 8.5px; }
.hub-red--v2[hidden], .hub-group[hidden], .hub-search-empty[hidden] { display: none !important; }
.hub-calm-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 4px 4px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--sage) 55%, var(--card)); }
.hub-calm-note svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 1px; }
.hub-calm-note p { margin: 0; color: var(--mut); font: 500 12.5px/1.45 var(--font-b); }

.discover-feature {
  width: 100%; min-height: 165px; display: flex; align-items: stretch; overflow: hidden; margin: 0 0 14px; padding: 0;
  border: 0; border-radius: 28px; background: linear-gradient(145deg, #fff 0%, #fff0e9 100%); box-shadow: var(--sh-card);
  color: var(--ink); text-align: left; cursor: pointer;
}
.discover-feature-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 21px 8px 19px 20px; position: relative; z-index: 2; }
.discover-feature-copy strong { max-width: 225px; font: 800 20px/1.17 var(--font-h); letter-spacing: -.025em; }
.discover-feature-copy small { max-width: 218px; margin-top: 7px; color: var(--mut); font: 450 12.5px/1.42 var(--font-b); }
.discover-feature-copy em { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; color: var(--p700); font: normal 750 12px var(--font-b); }
.discover-feature-copy em svg { width: 14px; height: 14px; }
.discover-feature-art { width: 112px; position: relative; display: grid; place-items: center; color: var(--a600); }
.discover-feature-art::before, .discover-feature-art::after, .discover-feature-art b { content: ''; position: absolute; display: block; border-radius: 50%; }
.discover-feature-art::before { width: 130px; height: 130px; right: -36px; top: -35px; background: var(--blob-roze); opacity: .75; }
.discover-feature-art::after { width: 88px; height: 88px; right: 35px; bottom: -44px; background: var(--blob-lavanda); opacity: .72; }
.discover-feature-art b { width: 68px; height: 68px; border: 13px solid rgba(255,255,255,.45); right: -18px; bottom: 4px; }
.discover-feature-art > svg { position: relative; z-index: 2; width: 38px; height: 38px; stroke-width: 1.65; }
.hub-search { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-top: 16px; border-radius: 19px; background: var(--card); border: 1px solid color-mix(in srgb, var(--p100) 72%, transparent); box-shadow: var(--sh-card); }
.hub-search > svg { width: 19px; height: 19px; color: var(--p700); }
.hub-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 14px var(--font-b); }
.hub-search input::placeholder { color: var(--faint); }
.hub-search > span { flex: none; padding: 7px 9px; border-radius: 999px; background: var(--p100); color: var(--p900); font: 700 9px var(--font-b); text-transform: uppercase; letter-spacing: .08em; }
.hub-topic-chips { display: flex; gap: 8px; overflow-x: auto; margin: 11px -18px 0; padding: 2px 18px 5px; scrollbar-width: none; }
.hub-topic-chips::-webkit-scrollbar { display: none; }
.hub-topic-chips button { flex: none; min-height: 38px; padding: 8px 13px; border: 1px solid rgba(36,52,95,.08); border-radius: 999px; background: color-mix(in srgb, var(--card) 90%, var(--a100)); color: var(--ink); font: 650 11.5px var(--font-b); cursor: pointer; }
.hub-search-empty { margin: 22px 0 4px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 22px; background: var(--card); color: var(--mut); }
.hub-search-empty svg { width: 28px; height: 28px; color: var(--p300); margin-bottom: 8px; }
.hub-search-empty b { color: var(--ink); font: 750 15px var(--font-h); }
.hub-search-empty span { max-width: 250px; margin-top: 4px; font: 450 12px/1.4 var(--font-b); }

.noc .hub-quick-grid button, .noc .discover-feature, .noc .hub-search, .noc .hub-search-empty { background: var(--card); }
.noc .hub-search input { color: var(--ink); }
.noc .hub-calm-note { background: rgba(207,226,212,.08); }

@media (max-width: 370px) {
  .hub-quick-grid { gap: 7px; }
  .hub-quick-grid button { min-height: 102px; padding-inline: 6px; font-size: 10.5px; }
  .hub-search > span { display: none; }
}

/* Stage 4: isti premium jezik na ključnim funkcionalnim tokovima */
.calendar-overview, .medicine-overview, .nutrition-overview {
  min-height: 162px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 2px 0 13px; padding: 22px 20px; border-radius: 29px; box-shadow: 0 16px 34px rgba(27,42,85,.13);
}
.calendar-overview { background: linear-gradient(145deg, #e8e4f7, #f6f2ff); }
.medicine-overview { background: linear-gradient(145deg, #24345f, #3d5189); color: #fff; }
.nutrition-overview { background: linear-gradient(145deg, #ffe1cf, #fff4e9); }
.calendar-overview::after, .medicine-overview::after, .nutrition-overview::after { content: ''; position: absolute; width: 145px; height: 145px; right: -63px; top: -67px; border-radius: 50%; background: var(--blob-roze); opacity: .72; }
.medicine-overview::after { background: rgba(239,111,122,.48); }
.nutrition-overview::after { background: var(--blob-koral); opacity: .42; }
.calendar-overview > div, .medicine-overview > div, .nutrition-overview > div { position: relative; z-index: 1; flex: 1; }
.calendar-overview h2, .medicine-overview h2, .nutrition-overview h2 { max-width: 270px; margin: 5px 0 7px; font: 800 22px/1.16 var(--font-h); letter-spacing: -.025em; color: var(--ink); }
.medicine-overview h2 { color: #fff; }
.calendar-overview p, .medicine-overview p, .nutrition-overview p { max-width: 245px; margin: 0; color: var(--mut); font: 450 12.5px/1.42 var(--font-b); }
.medicine-overview p { color: rgba(255,255,255,.78); }
.medicine-overview .hub-kicker { color: rgba(255,255,255,.66); }
.calendar-overview-icon, .medicine-overview > span, .nutrition-overview > span { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: 18px; background: rgba(255,255,255,.6); color: var(--p700); backdrop-filter: blur(9px); }
.medicine-overview > span { background: rgba(255,255,255,.17); color: #fff; }
.nutrition-overview > span { color: var(--a600); }
.calendar-overview-icon svg, .medicine-overview > span svg, .nutrition-overview > span svg { width: 25px; height: 25px; }
.calendar-add { width: 100%; min-height: 68px; display: grid; grid-template-columns: 40px 1fr 19px; grid-template-rows: auto auto; align-items: center; gap: 0 11px; padding: 11px 14px; border: 1px solid rgba(36,52,95,.07); border-radius: 21px; background: var(--card); color: var(--ink); box-shadow: var(--sh-card); text-align: left; cursor: pointer; }
.calendar-add > span { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--p700); color: #fff; }
.calendar-add > span svg { width: 19px; height: 19px; }
.calendar-add strong { align-self: end; font: 700 14px var(--font-h); }
.calendar-add small { align-self: start; color: var(--mut); font: 450 11.5px var(--font-b); }
.calendar-add > svg { grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--p300); }
.sheet-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(16,20,42,.54); backdrop-filter: blur(7px); animation: fadeIn .2s both; }
.app-sheet { width: min(480px, 100%); max-height: min(88vh, 760px); overflow-y: auto; padding: 8px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 30px 30px 24px 24px; background: var(--card); box-shadow: 0 26px 80px rgba(16,20,42,.36); animation: sheetUp .4s var(--spring) both; }
@keyframes sheetUp { from { transform: translateY(28px); opacity: 0; } }
.app-sheet-handle { width: 42px; height: 4px; margin: 2px auto 12px; border-radius: 99px; background: var(--p100); }
.app-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app-sheet-head h3 { margin: 2px 0 0; color: var(--ink); font: 800 23px var(--font-h); }
.app-sheet-head button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 16px; background: var(--p100); color: var(--p700); cursor: pointer; }
.app-sheet-head button svg { width: 19px; height: 19px; }
.app-sheet .forma-dugmad { position: sticky; bottom: -22px; margin: 18px -20px -22px; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); }
.medicine-page .k-card + .k-card { margin-top: 12px; }
.medicine-card { padding: 18px; }
.medicine-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.medicine-card-head .k-tag { margin: 0; }
.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 99px; background: var(--tip-kal-bg); color: var(--tip-kal); font: 750 8.5px var(--font-b); text-transform: uppercase; letter-spacing: .07em; }
.status-chip--done { background: var(--tip-uci-bg); color: #27694d; }
.status-chip svg { width: 12px; height: 12px; }
.medicine-card .doza-red { min-height: 54px; border-radius: 14px; padding-inline: 10px; }
.medicine-card .doza-red:nth-child(2n) { background: color-mix(in srgb, var(--p100) 37%, transparent); }
.trust-note { background: color-mix(in srgb, var(--p100) 70%, var(--card)); box-shadow: none; border: 1px solid rgba(36,52,95,.055); }
.nutrition-page > .segmenti { margin: 3px 0 16px; padding: 4px; border-radius: 17px; background: color-mix(in srgb, var(--p100) 68%, transparent); }
.nutrition-page > .segmenti button { min-height: 42px; border-radius: 13px; }
.nutrition-page > .segmenti button.aktivan { background: var(--card); box-shadow: 0 5px 15px rgba(27,42,85,.1); }
.nutrition-page .trazi { position: relative; }
.nutrition-page .trazi::before { content: ''; position: absolute; z-index: 2; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2324345F' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.nutrition-page .trazi input { min-height: 56px; padding-left: 48px; border: 1px solid rgba(36,52,95,.08); border-radius: 19px; background: var(--card); box-shadow: var(--sh-card); }
.adviser-intro { display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; padding: 17px; border-radius: 24px; background: linear-gradient(145deg, var(--p100), color-mix(in srgb, var(--card) 80%, var(--p100))); }
.adviser-intro > span { width: 49px; height: 49px; display: grid; place-items: center; flex: none; border-radius: 17px; background: var(--p700); color: #fff; box-shadow: 0 9px 20px rgba(36,52,95,.2); }
.adviser-intro > span svg { width: 23px; height: 23px; }
.adviser-intro h2 { margin: 2px 0 4px; color: var(--ink); font: 800 17px/1.2 var(--font-h); }
.adviser-intro p { margin: 0; color: var(--mut); font: 450 11.5px/1.4 var(--font-b); }
.community-trust { min-height: 62px; display: flex; align-items: center; gap: 11px; margin: 4px 0 12px; padding: 11px 13px; border-radius: 20px; background: color-mix(in srgb, var(--tip-uci-bg) 75%, var(--card)); color: var(--ink); }
.community-trust > span { width: 39px; height: 39px; display: grid; place-items: center; flex: none; border-radius: 14px; background: #fff; color: #277153; }
.community-trust > span svg { width: 19px; height: 19px; }
.community-trust p { margin: 0; color: var(--mut); font: 450 11.5px/1.4 var(--font-b); }
.community-trust b { color: var(--ink); }
.noc .calendar-overview, .noc .nutrition-overview, .noc .adviser-intro, .noc .community-trust, .noc .trust-note { background: var(--card); }
.noc .app-sheet { background: var(--card); }
@media (max-width: 370px) {
  .calendar-overview, .medicine-overview, .nutrition-overview { min-height: 150px; padding: 18px 16px; }
  .calendar-overview h2, .medicine-overview h2, .nutrition-overview h2 { font-size: 20px; }
  .calendar-overview-icon, .medicine-overview > span, .nutrition-overview > span { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .sheet-backdrop, .app-sheet { animation: none; } }

/* Stage 5: Alati za demo kao kompaktan test centar */
.profile-demo {
  overflow: hidden; margin-top: 25px; border-radius: 28px; background: linear-gradient(145deg, var(--p900), #3d5189);
  box-shadow: 0 18px 38px rgba(27,42,85,.18);
}
.profile-demo summary {
  min-height: 86px; grid-template-columns: 48px 1fr auto 20px; grid-template-rows: 1fr; column-gap: 12px;
  padding: 15px 16px; border: 0; border-radius: 0; background: transparent; color: #fff;
}
.profile-demo summary > span:first-child { grid-row: 1; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 17px; background: rgba(255,255,255,.13); color: #fff; backdrop-filter: blur(8px); }
.profile-demo summary > .profile-demo-title { grid-row: 1; width: auto; height: auto; min-width: 0; display: flex; flex-direction: column; place-items: initial; gap: 4px; border-radius: 0; background: none; color: #fff; }
.profile-demo-title strong { color: #fff; font: 750 15px var(--font-h); }
.profile-demo-title small { color: rgba(255,255,255,.67); font: 450 10.5px var(--font-b); }
.profile-demo summary > .demo-count { grid-row: 1; width: auto; height: auto; display: inline-flex; padding: 6px 8px; border: 1px solid rgba(255,255,255,.17); border-radius: 99px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.82); font: 700 8.5px var(--font-b); text-transform: uppercase; letter-spacing: .07em; }
.profile-demo summary > svg { grid-column: 4; grid-row: 1; color: rgba(255,255,255,.68); }
.demo-panel { margin: 0 5px 5px; padding: 14px; border-radius: 24px; background: var(--paper); }
.demo-panel-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.demo-panel-intro > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 13px; background: var(--p100); color: var(--p700); }
.demo-panel-intro > span svg { width: 18px; height: 18px; }
.demo-panel-intro p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.demo-panel-intro b { color: var(--ink); font: 700 12.5px var(--font-h); }
.demo-panel-intro small { color: var(--mut); font: 450 10.5px var(--font-b); }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.demo-tile {
  min-height: 136px; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px;
  border: 1px solid rgba(36,52,95,.07); border-radius: 20px; background: var(--card); color: var(--ink); text-align: left;
  box-shadow: 0 7px 19px rgba(27,42,85,.06); cursor: pointer; transition: transform .18s var(--spring), box-shadow .18s, border-color .18s;
}
.demo-tile:active { transform: scale(.97); }
.demo-tile.aktivan { border-color: rgba(239,111,122,.32); background: linear-gradient(145deg, var(--a100), var(--card)); }
.demo-tile-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px; background: var(--p100); color: var(--p700); }
.demo-tile:nth-child(2) .demo-tile-icon { background: var(--tip-uci-bg); color: var(--tip-uci); }
.demo-tile:nth-child(3) .demo-tile-icon { background: var(--tip-obrok-bg); color: var(--tip-obrok); }
.demo-tile:nth-child(4) .demo-tile-icon { background: var(--tip-zaj-bg); color: var(--tip-zaj); }
.demo-tile-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.demo-tile-status { position: absolute; right: 10px; top: 12px; padding: 5px 6px; border-radius: 99px; background: var(--paper); color: var(--faint); font: 700 7.5px var(--font-b); text-transform: uppercase; letter-spacing: .07em; }
.demo-tile.aktivan .demo-tile-status { background: var(--a600); color: #fff; }
.demo-tile strong { padding-right: 18px; font: 700 13px/1.2 var(--font-h); }
.demo-tile small { margin-top: 4px; color: var(--mut); font: 450 10.5px/1.35 var(--font-b); }
.demo-tile-arrow { position: absolute; right: 11px; bottom: 11px; width: 15px; height: 15px; color: var(--p300); }
.demo-reset { width: 100%; min-height: 62px; display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(210,58,86,.12); border-radius: 18px; background: color-mix(in srgb, var(--a100) 62%, var(--card)); color: var(--a600); text-align: left; cursor: pointer; }
.demo-reset > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--a600); color: #fff; }
.demo-reset > span:first-child svg { width: 17px; height: 17px; }
.demo-reset > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.demo-reset strong { font: 700 12.5px var(--font-h); }
.demo-reset small { color: var(--mut); font: 450 10px var(--font-b); }
.demo-reset > svg { width: 16px; height: 16px; }
.noc .profile-demo { background: linear-gradient(145deg, #1c2548, #313d68); }
.noc .demo-panel { background: var(--paper); }
@media (max-width: 360px) {
  .profile-demo summary { grid-template-columns: 45px 1fr 18px; }
  .profile-demo summary > .demo-count { display: none; }
  .profile-demo summary > svg { grid-column: 3; }
  .demo-grid { gap: 7px; }
  .demo-tile { min-height: 132px; padding: 10px; }
}

/* onboarding: originalna ilustracija + geometrijski motivi iz odobrenih mockupova */
.ob-ekran { padding: 20px 24px 34px; }
.ob-art { position: absolute; inset: 0 0 auto 0; height: 44vh; min-height: 300px; pointer-events: none; overflow: hidden; }
.ob-art img { position: absolute; z-index: 2; width: min(66vw, 270px); max-height: 285px; object-fit: contain; right: -2px; top: 32px; filter: drop-shadow(0 18px 28px rgba(27,42,85,.1)); }
.ob-art-blob { position: absolute; display: block; border-radius: 50%; }
.ob-art-blob--pink { width: 230px; height: 230px; left: -115px; top: -100px; background: var(--blob-roze); }
.ob-art-blob--navy { width: 190px; height: 190px; right: -112px; top: -80px; background: var(--p700); }
.ob-ekran:has(.ob-art) .ob-hero { justify-content: flex-end; padding-top: min(39vh, 320px); }
.ob-ekran:has(.ob-art) .ob-hero h1.e { font-size: 36px; max-width: 330px; }
.ob-ekran:has(.ob-art) .ob-veliki { font-size: 15px; max-width: 340px; }
.ob-ekran:has(.ob-art) .ob-input { padding-left: 52px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237E86A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 18px center; }
.ob-bezbedno { width: 100%; margin-top: 18px; padding: 13px 15px; border-radius: 18px; background: rgba(242,105,115,.11); color: var(--a600); font-weight: 650; text-align: left; }
.ob-faza { min-height: 108px; padding: 12px 16px 12px 12px; }
.ilu { width: 88px; height: 88px; }
.ilu .ilu-orbit { position: absolute; display: block; width: 58px; height: 58px; left: 15px; top: 15px; border-radius: 42% 58% 54% 46% / 52% 42% 58% 48%; transform: rotate(-12deg); }
.ilu i.ilu-symbol, .ilu svg.ilu-symbol { position: absolute; z-index: 3; width: 28px; height: 28px; left: 30px; top: 30px; background: none; border-radius: 0; color: var(--p700); stroke-width: 1.8; opacity: 1; }
.ilu--plan .ilu-orbit { background: var(--lilac); }
.ilu--trud .ilu-orbit { background: var(--peach); transform: rotate(10deg); }
.ilu--dete .ilu-orbit { background: var(--sage); transform: rotate(-4deg); }
.ilu--trud i.ilu-symbol, .ilu--trud svg.ilu-symbol { color: var(--a600); }
.ilu--dete i.ilu-symbol, .ilu--dete svg.ilu-symbol { color: var(--ok); }

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--a500) 65%, transparent);
  outline-offset: 3px;
}

#tabbar {
  padding: 8px 5px calc(7px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -1px 0 rgba(27,42,85,.05), 0 -14px 34px rgba(27,42,85,.1);
}
#tabbar a { min-height: 56px; }
#tabbar a.tab-pitaj .kruzic { width: 52px; height: 52px; margin-top: -26px; box-shadow: 0 10px 25px rgba(27,42,85,.34); }

.noc .hub-hero--prati, .noc .hub-hero--otkrij { background: linear-gradient(145deg, #232d55, #374477); }
.noc .ob-art img { filter: saturate(.8) brightness(.82); }
.noc .pitaj-in { background: #12162b; }

@media (max-height: 720px) {
  .ob-art { height: 35vh; min-height: 235px; }
  .ob-art img { max-height: 230px; top: 12px; }
  .ob-ekran:has(.ob-art) .ob-hero { padding-top: min(31vh, 235px); }
  .ob-ekran:has(.ob-art) .ob-hero h1.e { font-size: 31px; }
}

.timeline { padding: 4px 8px; position: relative; }
.tl-red { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; padding: 12px 6px 12px 26px; border-bottom: 1px solid var(--p100); }
.tl-red:last-child { border-bottom: 0; }
.tl-red::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--p100); }
.tl-red:first-child::before { top: 50%; } .tl-red:last-child::before { bottom: 50%; } .tl-red:only-child::before { display: none; }
.tl-red .tl-tacka { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; box-shadow: 0 0 0 3px var(--card); }
.tl-red .txt { flex: 1; min-width: 0; }
.tl-red .tl-kad { display: block; font: 700 10.5px var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.tl-red h3 { font: 700 15px var(--font-h); color: var(--ink); margin: 0; }
.tl-red .strelica { width: 18px; height: 18px; color: var(--p300); flex: none; }
.tl-red.proslo { opacity: .7; }
.tl-datum { font: 700 11px var(--font-b); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 16px 4px 8px; }

.cek-red { align-items: center; }
.cek-red .cek-tap { flex: 1; display: flex; align-items: center; gap: 11px; border: 0; background: none; text-align: left; cursor: pointer; font: 500 14px/1.4 var(--font-b); color: var(--ink); padding: 9px 0; }
.cek-red.cek .cek-tap span:last-child { color: var(--faint); text-decoration: line-through; }
.sp-ime { border: 0; background: none; font: 700 17.5px var(--font-h); color: var(--ink); width: 100%; padding: 0; outline: 0; border-bottom: 1px dashed transparent; }
.sp-ime:focus { border-bottom-color: var(--p300); }
.sp-tip { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; cursor: pointer; font-family: inherit; background: var(--card); border-radius: 16px; box-shadow: var(--sh-card); padding: 11px 12px; margin-bottom: 8px; }
.sp-tip .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-tip b { font: 700 14.5px var(--font-h); color: var(--ink); } .sp-tip small { font: 400 12px var(--font-b); color: var(--mut); }
.sp-tip .strelica { width: 18px; height: 18px; color: var(--p700); flex: none; }
.noc .tl-red { border-color: rgba(255,255,255,.08); } .noc .tl-red::before { background: rgba(255,255,255,.1); } .noc .tl-red .tl-tacka { box-shadow: 0 0 0 3px var(--card); }
.noc .sp-tip { background: var(--card); }


/* ==========================================================================
   WP5b: lekcije (kartice + kviz) i programi (dani)
   ========================================================================== */
.lek-vrh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lek-tacke { display: flex; gap: 5px; }
.lek-tacke span { width: 7px; height: 7px; border-radius: 50%; background: var(--p100); transition: width .32s var(--spring), background .2s; }
.lek-tacke span.p { background: var(--p300); } .lek-tacke span.a { background: var(--p700); width: 18px; border-radius: 4px; }
.lek-tacke span.kv { border-radius: 2px; }
.lek-karta { position: relative; background: var(--card); border-radius: 24px; box-shadow: var(--sh-card); padding: 26px 22px 22px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.lek-karta.tip-podoj { background: linear-gradient(160deg, var(--tip-podoj-bg), var(--card) 65%); } .lek-karta.tip-san { background: linear-gradient(160deg, var(--tip-san-bg), var(--card) 65%); }
.lek-karta.tip-obrok { background: linear-gradient(160deg, var(--tip-obrok-bg), var(--card) 65%); } .lek-karta.tip-mer { background: linear-gradient(160deg, var(--tip-mer-bg), var(--card) 65%); }
.lek-karta.tip-uci { background: linear-gradient(160deg, var(--tip-uci-bg), var(--card) 65%); } .lek-karta.tip-zaj { background: linear-gradient(160deg, var(--tip-zaj-bg), var(--card) 65%); }
.lek-karta.tip-kal { background: linear-gradient(160deg, var(--tip-kal-bg), var(--card) 65%); } .lek-karta.tip-lek { background: linear-gradient(160deg, var(--tip-lek-bg), var(--card) 65%); }
.lek-ilu { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--p100); color: var(--p700); }
.lek-ilu i { width: 40px; height: 40px; }
.lek-ilu.tip-podoj { background: var(--tip-podoj-bg); color: var(--tip-podoj); } .lek-ilu.tip-san { background: var(--tip-san-bg); color: var(--tip-san); }
.lek-ilu.tip-obrok { background: var(--tip-obrok-bg); color: var(--tip-obrok); } .lek-ilu.tip-mer { background: var(--tip-mer-bg); color: var(--tip-mer); }
.lek-ilu.tip-uci { background: var(--tip-uci-bg); color: var(--tip-uci); } .lek-ilu.tip-zaj { background: var(--tip-zaj-bg); color: var(--tip-zaj); }
.lek-ilu.tip-kal { background: var(--tip-kal-bg); color: var(--tip-kal); } .lek-ilu.tip-lek { background: var(--tip-lek-bg); color: var(--tip-lek); }
.lek-t { font: 500 19px/1.45 var(--font-h); color: var(--ink); margin: 0; letter-spacing: -.005em; }
.lek-broj { position: absolute; top: 18px; right: 20px; font: 800 12px var(--font-h); color: var(--p300); }
.lek-karta.kviz { justify-content: flex-start; gap: 12px; min-height: 0; }
.lek-karta.kviz h3 { font: 800 18px/1.3 var(--font-h); color: var(--ink); margin: 0; }
.kviz-opcije { display: flex; flex-direction: column; gap: 8px; }
.kviz-opc { border: 0; cursor: pointer; text-align: left; border-radius: 14px; padding: 13px 15px; background: var(--paper); font: 600 14.5px/1.35 var(--font-b); color: var(--ink); min-height: 48px; transition: transform .15s; }
.kviz-opc:active { transform: scale(.985); }
.kviz-opc.tacno { background: var(--tip-uci-bg); color: #1F5C43; box-shadow: inset 0 0 0 2px var(--tip-uci); }
.kviz-opc.netacno { background: var(--a100); color: #8A3B2E; }
.kviz-opc.bledo { opacity: .5; }
.kviz-z { font: 400 13.5px/1.5 var(--font-b); color: var(--mut); margin: 0; } .kviz-z.ok { color: #1F5C43; }
.lek-karta.kraj h3 { font: 800 22px var(--font-h); color: var(--ink); margin: 0; }
.lek-danas .red { align-items: center; gap: 14px; }
.lek-danas .k-link { display: inline-block; margin-top: 10px; }
.lek-napredak { display: flex; align-items: center; gap: 12px; margin: 12px 4px 0; font: 500 13px var(--font-b); color: var(--mut); }
.lek-napredak b { color: var(--ink); }
.lek-traka { flex: 1; height: 8px; border-radius: 999px; background: var(--p100); overflow: hidden; }
.lek-traka i { display: block; height: 100%; border-radius: 999px; background: var(--tip-uci); transition: width .6s var(--ease-out); }
.prog-traka { height: 6px; border-radius: 999px; background: var(--p100); overflow: hidden; margin-top: 12px; }
.prog-traka i { display: block; height: 100%; border-radius: 999px; background: var(--p700); }
.prog-dani { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.prog-dan { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--card); box-shadow: var(--sh-card); font: 700 13px var(--font-h); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.prog-dan i { width: 16px; height: 16px; }
.prog-dan.u { background: var(--tip-uci-bg); color: var(--tip-uci); }
.prog-dan.danas { box-shadow: inset 0 0 0 2px var(--p700); }
.prog-dan.akt { background: var(--p700); color: #fff; }
.prog-dan.buduci { color: var(--faint); background: var(--paper); box-shadow: none; }
.noc .kviz-opc { background: var(--paper); } .noc .prog-dan { background: var(--card); } .noc .prog-dan.buduci { background: rgba(255,255,255,.04); }
.noc .lek-karta { background: var(--card); }

/* ==========================================================================
   Stage 3: slikovni onboarding carousel + organizovan profil
   ========================================================================== */
.spil { align-items: stretch; }
.spil-vrh { min-height: 48px; display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.spil-brojac { align-self: auto; display: flex; align-items: baseline; gap: 4px; margin: 0; }
.spil-strelice { display: flex; align-items: center; gap: 9px; }
.spil-strelice button {
  width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(36,52,95,.1);
  border-radius: 16px; background: var(--card); color: var(--p700); box-shadow: 0 7px 18px rgba(27,42,85,.08); cursor: pointer;
  transition: transform .18s var(--spring), background .18s, color .18s;
}
.spil-strelice button:last-child { background: var(--p700); color: #fff; box-shadow: 0 9px 22px rgba(36,52,95,.23); }
.spil-strelice button:active { transform: scale(.93); }
.spil-strelice svg { width: 19px; height: 19px; }
.spil-scena { height: 302px; perspective: none; touch-action: pan-y; overflow: hidden; border-radius: 29px; }
.karta.karta--viz {
  inset: 0 5px auto; top: 0; height: 292px; padding: 0; overflow: hidden; border-radius: 28px; outline: none;
  background: var(--p900); box-shadow: 0 18px 38px rgba(27,42,85,.2); color: #fff;
  transform: translateX(calc(var(--x) * 104%));
  opacity: 1; z-index: 10; transition: transform .42s var(--spring), opacity .28s, box-shadow .28s;
}
.karta.karta--viz.daleko { opacity: 0; pointer-events: none; }
.karta.karta--viz:not(.prednja) { pointer-events: none; box-shadow: none; transform: translateX(calc(var(--x) * 104%)) scale(.95); z-index: 1; }
.karta.karta--viz.prednja:active { transform: scale(.985); }
.karta--viz > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.karta-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,66,.04) 18%, rgba(20,30,66,.38) 52%, rgba(20,30,66,.97) 100%); }
.karta-top { position: absolute; inset: 16px 16px auto; display: flex; align-items: center; justify-content: space-between; }
.karta--viz .karta-ik { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 16px; background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(12px); }
.karta--viz .karta-ik svg { width: 22px; height: 22px; }
.karta--viz .karta-broj { position: static; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 99px; background: rgba(20,30,66,.38); color: #fff; backdrop-filter: blur(8px); }
.karta--viz .karta-txt { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; gap: 5px; color: #fff; }
.karta--viz .karta-txt b { color: #fff; font-size: 23px; letter-spacing: -.025em; }
.karta--viz .karta-txt small { max-width: 285px; color: rgba(255,255,255,.84); font-size: 13.5px; line-height: 1.38; }
.karta--viz .karta-txt em { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #fff; font: normal 700 10.5px var(--font-b); text-transform: uppercase; letter-spacing: .09em; }
.karta--viz .karta-txt em svg { width: 14px; height: 14px; }
.spil-pager { min-height: 22px; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 7px 0 2px; }
.spil-pager button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--p100); cursor: pointer; transition: width .32s var(--spring), background .22s; }
.spil-pager button.aktivan { width: 24px; background: var(--p700); }
.spil-hint { margin: 3px 0 0; text-align: center; }
.spil-fokus { align-items: flex-end; padding: 18px; backdrop-filter: blur(7px); }
.karta-detalj { width: min(420px, 100%); overflow: hidden; border-radius: 30px; background: var(--card); box-shadow: 0 28px 80px rgba(16,20,42,.42); }
.karta-detalj-art { position: relative; height: 205px; overflow: hidden; }
.karta-detalj-art > img { width: 100%; height: 100%; object-fit: cover; }
.karta-detalj-art > span:not(.karta-ik) { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,30,66,.58)); }
.karta-detalj-art .karta-ik { position: absolute; left: 18px; bottom: 16px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.92); color: var(--p700); }
.karta-detalj-art .karta-ik svg { width: 23px; height: 23px; }
.karta-detalj-art > button { position: absolute; right: 14px; top: 14px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 16px; background: rgba(20,30,66,.32); color: #fff; backdrop-filter: blur(10px); cursor: pointer; }
.karta-detalj-art > button svg { width: 20px; height: 20px; }
.karta-detalj-copy { padding: 21px 22px 22px; }
.karta-detalj-copy h3 { margin: 3px 0 8px; color: var(--ink); font: 800 25px/1.12 var(--font-h); letter-spacing: -.025em; }
.karta-detalj-copy p { margin: 0 0 19px; color: var(--mut); font: 450 14px/1.55 var(--font-b); }
.karta-detalj-copy .k-btn { width: 100%; }

.profile-page { padding-top: 8px; }
.profile-hero { min-height: 138px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px; margin-bottom: 13px; padding: 22px 19px; border-radius: 29px; background: linear-gradient(145deg, var(--p900), #3d5189); color: #fff; box-shadow: 0 17px 36px rgba(27,42,85,.2); }
.profile-hero-orb { position: absolute; width: 155px; height: 155px; right: -58px; top: -75px; border-radius: 50%; background: rgba(239,111,122,.55); }
.profile-avatar { position: relative; z-index: 1; width: 68px; height: 68px; display: grid; place-items: center; flex: none; border: 1px solid rgba(255,255,255,.38); border-radius: 23px; background: rgba(255,255,255,.2); font: 800 27px var(--font-h); backdrop-filter: blur(10px); }
.profile-hero-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.profile-hero-copy > span { color: rgba(255,255,255,.68); font: 700 9.5px var(--font-b); letter-spacing: .12em; text-transform: uppercase; }
.profile-hero-copy h2 { margin: 3px 0 3px; color: #fff; font: 800 24px/1.1 var(--font-h); letter-spacing: -.02em; }
.profile-hero-copy p { margin: 0; color: rgba(255,255,255,.79); font: 500 12px var(--font-b); }
.profile-hero > button { position: relative; z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; flex: none; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(255,255,255,.13); color: #fff; cursor: pointer; }
.profile-hero > button svg { width: 18px; height: 18px; }
.profile-safety { width: 100%; min-height: 76px; display: grid; grid-template-columns: 43px 1fr 20px; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid rgba(239,111,122,.15); border-radius: 22px; background: linear-gradient(135deg, var(--a100), color-mix(in srgb, var(--card) 88%, var(--a100))); color: var(--ink); text-align: left; cursor: pointer; }
.profile-safety > span:first-child { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 15px; background: var(--a600); color: #fff; }
.profile-safety > span:first-child svg { width: 21px; height: 21px; }
.profile-safety > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.profile-safety strong { font: 750 14.5px var(--font-h); }
.profile-safety small { color: var(--mut); font: 450 11.5px/1.35 var(--font-b); }
.profile-safety > svg { width: 18px; height: 18px; color: var(--a600); }
.profile-section { margin-top: 22px; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 9px; }
.profile-section-head span { color: var(--ink); font: 750 13px var(--font-h); }
.profile-section-head small { color: var(--faint); font: 600 9.5px var(--font-b); text-transform: uppercase; letter-spacing: .07em; }
.profile-group { overflow: hidden; border: 1px solid rgba(36,52,95,.07); border-radius: 23px; background: var(--card); box-shadow: 0 9px 25px rgba(27,42,85,.065); }
.profile-row { width: 100%; min-height: 74px; display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 0; border-bottom: 1px solid rgba(36,52,95,.065); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.profile-row:last-child { border-bottom: 0; }
.profile-row:active { background: color-mix(in srgb, var(--p100) 40%, transparent); }
.profile-row-icon { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border-radius: 15px; background: var(--p100); color: var(--p700); }
.profile-row:nth-child(2n) .profile-row-icon { background: var(--tip-uci-bg); color: var(--tip-uci); }
.profile-row:nth-child(3n) .profile-row-icon { background: var(--tip-obrok-bg); color: var(--tip-obrok); }
.profile-row-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.profile-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.profile-row-copy strong { font: 700 14.5px/1.2 var(--font-h); }
.profile-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); font: 450 11.5px var(--font-b); }
.profile-row-badge { flex: none; padding: 5px 7px; border-radius: 99px; background: var(--a100); color: var(--a600); font: 750 8.5px var(--font-b); text-transform: uppercase; letter-spacing: .07em; }
.profile-chevron { width: 17px; height: 17px; flex: none; color: var(--p300); }
.profile-demo { margin-top: 23px; }
.profile-demo summary { min-height: 70px; display: grid; grid-template-columns: 42px 1fr 20px; grid-template-rows: auto auto; align-items: center; column-gap: 11px; padding: 12px 14px; border: 1px dashed rgba(36,52,95,.14); border-radius: 21px; background: color-mix(in srgb, var(--card) 86%, var(--p100)); cursor: pointer; list-style: none; }
.profile-demo summary::-webkit-details-marker { display: none; }
.profile-demo summary > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--p100); color: var(--p700); }
.profile-demo summary > span svg { width: 19px; height: 19px; }
.profile-demo summary strong { align-self: end; font: 700 14px var(--font-h); color: var(--ink); }
.profile-demo summary small { align-self: start; color: var(--faint); font: 450 10.5px var(--font-b); }
.profile-demo summary > svg { grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--p300); transition: transform .25s; }
.profile-demo[open] summary > svg { transform: rotate(180deg); }
.profile-demo .profile-group { margin-top: 9px; }
.profile-row--danger { color: var(--a600); }
.profile-row--danger .profile-row-icon { background: var(--a100); color: var(--a600); }
.noc .profile-group, .noc .profile-demo summary { background: var(--card); }
.noc .profile-hero { background: linear-gradient(145deg, #202a4e, #34426f); }

@media (prefers-reduced-motion: reduce) {
  .spil-scena { height: 302px; display: block; }
  .karta.karta--viz { position: absolute; height: 292px; opacity: 1 !important; transition: none !important; }
  .karta.karta--viz[aria-hidden="true"] { pointer-events: none; }
  .spil-brojac { display: flex; }
}
@media (max-width: 370px) {
  .spil-scena { height: 282px; }
  .karta.karta--viz { height: 272px; }
  .karta--viz .karta-txt b { font-size: 21px; }
  .profile-row-copy small { max-width: 190px; }
}

/* ==========================================================================
   Stage 6: Dnevne aktivnosti + planiranje spavanja
   ========================================================================== */
.da-page, .sleep-page { padding-top: 8px; }
.da-hero { position: relative; overflow: hidden; min-height: 246px; padding: 18px; border-radius: 30px; color: #fff;
  background: radial-gradient(circle at 105% -5%, rgba(239,111,122,.9) 0 27%, transparent 27.5%), linear-gradient(145deg, #1b2a55, #344d89);
  box-shadow: 0 20px 46px rgba(27,42,85,.22); }
.da-hero::after { content: ''; position: absolute; width: 130px; height: 130px; right: -68px; bottom: -64px; border: 20px solid rgba(255,255,255,.08); border-radius: 50%; }
.da-hero-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.da-hero-top > span { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.74); font: 700 10px var(--font-b); letter-spacing: .1em; text-transform: uppercase; }
.da-hero-top > span svg { width: 16px; height: 16px; }
.da-hero-top button { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(255,255,255,.11); color: #fff; font: 700 10.5px var(--font-b); cursor: pointer; backdrop-filter: blur(8px); }
.da-hero-top button svg { width: 13px; height: 13px; }
.da-awake { position: relative; z-index: 1; display: flex; flex-direction: column; margin-top: 22px; }
.da-awake strong { color: #fff; font: 800 42px/.98 var(--font-h); letter-spacing: -.045em; }
.da-awake small { margin-top: 7px; color: rgba(255,255,255,.7); font: 500 12px var(--font-b); }
.da-window { position: relative; z-index: 1; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin-top: 20px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.da-window > svg { width: 21px; height: 21px; justify-self: center; color: #ffd6df; }
.da-window span { display: flex; flex-direction: column; gap: 2px; }
.da-window b { color: #fff; font: 700 12.5px var(--font-h); }
.da-window small { color: rgba(255,255,255,.7); font: 450 10.5px/1.35 var(--font-b); }
.da-window.sada { background: rgba(255,255,255,.17); }
.da-window.kasno > svg { color: #ffd3a3; }

.da-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 13px; }
.da-quick button { min-width: 0; min-height: 110px; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 8px; border: 1px solid rgba(36,52,95,.055); border-radius: 20px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 9px 24px rgba(27,42,85,.07); }
.da-quick button:active { transform: scale(.96); }
.da-quick button > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 13px; }
.da-quick button > span svg { width: 19px; height: 19px; }
.da-quick .tip-san > span { background: var(--tip-san-bg); color: var(--tip-san); }
.da-quick .tip-obrok > span { background: var(--tip-obrok-bg); color: var(--tip-obrok); }
.da-quick .tip-pelena > span { background: var(--tip-pelena-bg); color: var(--tip-pelena); }
.da-quick .tip-lek > span { background: var(--tip-lek-bg); color: var(--tip-lek); }
.da-quick b { overflow: hidden; width: 100%; color: var(--ink); font: 700 11.5px/1.2 var(--font-h); text-overflow: ellipsis; }
.da-quick small { margin-top: 3px; color: var(--faint); font: 450 8.5px/1.3 var(--font-b); }

.da-next { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; margin-top: 13px; padding: 13px 14px; border: 1px solid rgba(239,111,122,.15); border-radius: 22px; background: linear-gradient(135deg, var(--a100), var(--card)); }
.da-next > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 15px; background: var(--a600); color: #fff; }
.da-next > span svg { width: 20px; height: 20px; }
.da-next div { min-width: 0; display: flex; flex-direction: column; }
.da-next div small { color: var(--a600); font: 700 8.5px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.da-next div b { margin-top: 2px; color: var(--ink); font: 700 13.5px var(--font-h); }
.da-next div p { overflow: hidden; margin: 2px 0 0; color: var(--mut); font: 450 10.5px var(--font-b); text-overflow: ellipsis; white-space: nowrap; }
.da-next > em { padding: 5px 7px; border-radius: 99px; background: var(--card); color: var(--a600); font: normal 700 9px var(--font-b); }

.da-last { gap: 8px; margin: 14px 0; }
.da-last button { min-height: 82px; padding: 11px; border-radius: 19px; box-shadow: 0 7px 20px rgba(27,42,85,.055); }
.da-last .naziv { font-size: 9px; }
.da-last .kad { font-size: 13px; }
.da-last .sat { font-size: 10px; }
.da-guide, .sleep-today, .sleep-safe { margin-top: 13px; padding: 18px; border: 1px solid rgba(36,52,95,.07); border-radius: 26px; background: var(--card); box-shadow: var(--sh-card); }
.da-guide { background: linear-gradient(150deg, var(--tip-obrok-bg), var(--card) 72%); }
.da-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.da-section-head > span { min-width: 0; }
.da-section-head small { color: var(--faint); font: 700 9px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.da-section-head h2 { margin: 3px 0 0; color: var(--ink); font: 800 18px/1.2 var(--font-h); letter-spacing: -.02em; }
.da-section-head > svg { width: 23px; height: 23px; color: var(--tip-obrok); }
.da-guide > p, .sleep-safe > p { margin: 12px 0; color: var(--mut); font: 450 13px/1.55 var(--font-b); }
.da-guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 11px; border-top: 1px solid rgba(36,52,95,.07); }
.da-guide-foot span { color: var(--faint); font: 600 9.5px var(--font-b); }
.da-guide-foot a, .sleep-safe a { display: inline-flex; align-items: center; gap: 4px; color: var(--p700); font: 700 10px var(--font-b); text-decoration: none; }
.da-guide-foot a svg, .sleep-safe a svg { width: 13px; height: 13px; }

.da-log { margin-top: 13px; padding: 18px; }
.da-log-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.da-log-head span { color: var(--faint); font: 700 9px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.da-log-head h2 { margin: 3px 0 0; color: var(--ink); font: 800 19px var(--font-h); }
.da-log-head > small { padding: 5px 8px; border-radius: 99px; background: var(--p100); color: var(--p700); font: 700 9px var(--font-b); }
.da-log .log-red { align-items: center; gap: 9px; padding: 10px 0; }
.da-log .log-red .v { width: 39px; font-size: 12.5px; }
.da-log .log-red .o { font-size: 12.5px; }
.da-log .log-red .ko { padding: 3px 6px; font-size: 8.5px; }
.da-log-note { display: flex; gap: 9px; align-items: flex-start; margin: 13px -4px -4px; padding: 12px; border-radius: 16px; background: var(--p100); color: var(--p900); }
.da-log-note > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.da-log-note span { font: 450 10.5px/1.45 var(--font-b); }

.da-sheet { position: fixed; z-index: 150; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 14px; background: rgba(16,20,42,.45); backdrop-filter: blur(7px); animation: fadeIn .2s both; }
.da-sheet > section { width: min(452px, 100%); max-height: min(82vh, 720px); overflow-y: auto; padding: 9px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 30px 30px 24px 24px; background: var(--card); box-shadow: 0 28px 80px rgba(16,20,42,.4); animation: slideUp .38s var(--spring) both; }
.da-sheet-handle { width: 42px; height: 4px; margin: 0 auto 13px; border-radius: 4px; background: var(--p100); }
.da-sheet-head { display: grid; grid-template-columns: 46px 1fr 42px; align-items: center; gap: 11px; margin-bottom: 18px; }
.da-sheet-head > .tile { width: 46px; height: 46px; border-radius: 16px; }
.da-sheet-head small { color: var(--faint); font: 700 8.5px var(--font-b); letter-spacing: .09em; text-transform: uppercase; }
.da-sheet-head h2 { margin: 2px 0 0; color: var(--ink); font: 800 20px var(--font-h); }
.da-sheet-head > button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 15px; background: var(--paper); color: var(--mut); cursor: pointer; }
.da-sheet-head > button svg { width: 18px; height: 18px; }
.da-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.da-form-grid label, .da-label { display: flex; flex-direction: column; gap: 6px; }
.da-form-grid label > span, .da-label > span { color: var(--mut); font: 650 10px var(--font-b); }
.da-sheet .ob-input { width: 100%; min-width: 0; min-height: 50px; margin: 0; border: 1.5px solid var(--p100); border-radius: 16px; background: var(--paper); box-shadow: none; }
.da-label + .da-form-grid { margin-top: 11px; }
.da-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.da-choice button, .da-interval button { min-height: 39px; padding: 6px; border: 0; border-radius: 12px; background: var(--paper); color: var(--mut); font: 700 10px var(--font-b); cursor: pointer; }
.da-choice button.aktivan, .da-interval button.aktivan { background: var(--p700); color: #fff; }
.da-form-hint, .da-warning { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 11px; border-radius: 15px; background: var(--p100); color: var(--p900); font: 500 10.5px/1.4 var(--font-b); }
.da-warning { background: var(--a100); color: #8a394a; }
.da-form-hint svg, .da-warning svg { width: 16px; height: 16px; flex: none; }
.da-switch { display: flex; align-items: center; gap: 9px; margin-top: 15px; cursor: pointer; }
.da-switch input { position: absolute; opacity: 0; pointer-events: none; }
.da-switch > span { width: 42px; height: 24px; position: relative; flex: none; border-radius: 99px; background: var(--p100); transition: background .2s; }
.da-switch > span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(27,42,85,.18); transition: transform .2s var(--spring); }
.da-switch input:checked + span { background: var(--p700); }
.da-switch input:checked + span::after { transform: translateX(18px); }
.da-switch b { color: var(--ink); font: 650 12px var(--font-b); }
.da-interval { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 9px; }
.da-interval.sakriven { display: none; }
.da-save { width: 100%; margin-top: 18px; }

.sleep-hero { position: relative; overflow: hidden; min-height: 280px; padding: 22px 19px; border-radius: 31px; background: linear-gradient(155deg, #ddd7f1, #f5dce9 65%, #ffe5d6); color: var(--p900); box-shadow: 0 18px 42px rgba(63,58,111,.13); }
.sleep-hero::after { content: ''; position: absolute; width: 170px; height: 170px; right: -88px; bottom: -80px; border: 22px solid rgba(36,52,95,.07); border-radius: 50%; }
.sleep-orb { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 19px; background: var(--p700); color: #fff; box-shadow: 0 12px 25px rgba(36,52,95,.2); }
.sleep-orb svg { width: 25px; height: 25px; }
.sleep-hero > small { color: var(--p700); font: 700 9px var(--font-b); letter-spacing: .1em; text-transform: uppercase; }
.sleep-hero h1 { margin: 4px 0 8px; color: var(--p900); font: 800 34px/1.05 var(--font-h); letter-spacing: -.04em; }
.sleep-hero > p { max-width: 300px; margin: 0; color: rgba(36,52,95,.7); font: 500 12px/1.5 var(--font-b); }
.sleep-range { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 19px; }
.sleep-range > span { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.42); border-radius: 16px; background: rgba(255,255,255,.45); backdrop-filter: blur(8px); }
.sleep-range small { color: rgba(36,52,95,.6); font: 600 8.5px var(--font-b); }
.sleep-range b { color: var(--p900); font: 750 12px var(--font-h); }
.sleep-add { width: 100%; margin-top: 13px; }
.sleep-add svg { width: 18px; height: 18px; margin-right: 5px; }
.sleep-today .da-section-head > em { padding: 5px 8px; border-radius: 99px; background: var(--tip-san-bg); color: var(--tip-san); font: normal 700 9px var(--font-b); }
.sleep-stats { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 14px; }
.sleep-stats > span { min-height: 82px; display: flex; flex-direction: column; justify-content: center; padding: 11px; border-radius: 17px; background: var(--paper); }
.sleep-stats b { color: var(--ink); font: 750 14px/1.25 var(--font-h); }
.sleep-stats small { margin-top: 4px; color: var(--faint); font: 500 9px var(--font-b); }
.sleep-line { margin-top: 12px; }
.sleep-line > div { display: grid; grid-template-columns: 12px 1fr; gap: 8px; padding: 7px 0; }
.sleep-line i { width: 9px; height: 9px; margin-top: 4px; border: 2px solid var(--tip-san); border-radius: 50%; }
.sleep-line span { display: flex; flex-direction: column; gap: 2px; }
.sleep-line b { color: var(--ink); font: 650 11.5px var(--font-b); }
.sleep-line small { color: var(--faint); font: 450 9.5px var(--font-b); }
.sleep-learn { display: grid; grid-template-columns: 48px 1fr; gap: 12px; margin-top: 13px; padding: 17px; border-radius: 25px; background: linear-gradient(145deg, var(--p900), #3d5189); color: #fff; box-shadow: 0 15px 34px rgba(27,42,85,.17); }
.sleep-learn > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: rgba(255,255,255,.12); }
.sleep-learn > span svg { width: 22px; height: 22px; }
.sleep-learn small { color: rgba(255,255,255,.62); font: 700 8px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.sleep-learn h2 { margin: 4px 0 6px; color: #fff; font: 750 16px/1.25 var(--font-h); }
.sleep-learn p { margin: 0; color: rgba(255,255,255,.72); font: 450 10.5px/1.48 var(--font-b); }
.sleep-safe { background: linear-gradient(145deg, var(--p100), var(--card) 72%); }
.sleep-safe .da-section-head > svg { color: var(--p700); }

.noc .da-hero, .noc .sleep-learn { background: linear-gradient(145deg, #182141, #303d69); }
.noc .da-quick button, .noc .da-guide, .noc .da-log, .noc .sleep-today, .noc .sleep-safe, .noc .da-sheet > section { background: var(--card); }
.noc .sleep-hero { background: linear-gradient(145deg, #29294d, #3a3154); }
.noc .sleep-hero h1, .noc .sleep-hero > small, .noc .sleep-hero > p { color: var(--ink); }
.noc .sleep-range > span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
.noc .sleep-range b, .noc .sleep-range small { color: var(--ink); }

@media (max-width: 360px) {
  .da-quick { grid-template-columns: repeat(2, 1fr); }
  .da-quick button { min-height: 94px; }
  .da-last { overflow-x: auto; }
  .da-last button { min-width: 108px; }
  .da-choice { grid-template-columns: repeat(2, 1fr); }
  .da-interval { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .da-sheet, .da-sheet > section { animation: none; }
}

/* potvrda čuvanja i greška uz polje u dnevniku (bez oslanjanja samo na boju) */
.da-potvrda { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 16px; border-radius: 16px; background: var(--p100); color: var(--p900); font: 600 14px/1.3 var(--font-b); }
.da-potvrda i { width: 18px; height: 18px; flex: none; }
.da-greska { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--a100); color: var(--a600); font: 600 13.5px/1.35 var(--font-b); }
.noc .da-potvrda { background: rgba(255,255,255,.08); color: #F1EDE6; }
.noc .da-greska { background: rgba(242,105,115,.16); }