/* =====================================================================
   DO THE CHANGE — TEMA (jedino mjesto za boje, slova i stil)
   Zadano: "Topla zora". Druga opcija: "Grafit i narančasta" (Profil → Izgled).
   Učitava se nakon app.css i samo mijenja izgled.
   ===================================================================== */

/* ---------- 1) TOKENI: TOPLA ZORA (zadano) ---------- */
:root, :root[data-tema="zora"] {
  --font: "DM Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nasl: var(--font);

  --pozadina:
    radial-gradient(120% 60% at 95% -5%, #FFA868 0%, rgba(255,168,104,0) 62%),
    radial-gradient(110% 55% at -10% 100%, #FF9460 0%, rgba(255,148,96,0) 62%),
    linear-gradient(170deg, #FFF3E8, #FFE4D2 55%, #FFD6BE);
  --bg: #FFF3E8;                         /* jednobojna zamjena (iframe, sticky) */

  --tekst: #2A1A12;                      /* glavni tekst */
  --siva: #6B5244;                       /* sporedni tekst (na karticama) */
  --siva-poz: #5A4336;                   /* sporedni tekst izravno na pozadini (kontrast i preko sjaja) */
  --siva2: #6A5043;                      /* treći tekst: osi, sitne napomene (≥ 4.5:1 i preko sjaja) */
  --nar-jaki: #C24A0C;                   /* naglasak: velike brojke, prsteni, crte, obrubi */
  --nar: #943606;                        /* naglasak za sitan tekst (oznake, aktivna stavka): ≥ 4.5:1 i preko sjaja */
  --nar-t: #9E3B08;
  --nar-m: rgba(194,74,12,.13);          /* blaga podloga, trake */
  --nar-m2: rgba(194,74,12,.24);
  --crta: rgba(107,82,68,.2);            /* razdjelnici i crte grafikona */
  --crta2: rgba(107,82,68,.3);           /* obrubi polja */

  --gumb: linear-gradient(180deg, #E86A22, #DB5F17);   /* gumbi s tekstom (tamni tekst ≥ 5:1) */
  --gumb-tekst: #1F0E03;
  --gumb-sjena: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px rgba(184,70,11,.28);
  --gotovo: linear-gradient(180deg, #E0651C, #B8460B);  /* odrađene stavke (bijela ikona / kvačica) */

  --kartica: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.58));
  --kartica-rub: 1px solid rgba(255,255,255,.8);
  --kartica-sjena: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px rgba(170,80,25,.16);
  --redak: rgba(255,255,255,.72);
  --redak-gotovo: rgba(255,255,255,.42);
  --pov: rgba(255,255,255,.72);          /* sitne podloge (polja, gumbi s obrubom) */
  --pov2: rgba(255,255,255,.55);
  --ploca: #FFF6EF;                      /* pune podloge: prozori, padajući izbornici */
  --zastor: rgba(42,26,18,.45);
  --zakljucano-rub: rgba(107,82,68,.35);
  --zakljucano-bg: rgba(107,82,68,.1);

  --ok: #1F7A4A; --ok-m: rgba(46,158,98,.14);
  --opasno: #B3261E; --opasno-m: rgba(214,69,65,.12);
  --uspjeh-bg: rgba(46,158,98,.14); --uspjeh-tekst: #1A5E3A;
  --istaknuto: rgba(255,236,222,.9);     /* kartice koje traže pažnju */
  --tost: #2A1A12; --tost-tekst: #FFF3E8;
  --logo-tamni: block; --logo-svijetli: none;
  color-scheme: light;
}

/* ---------- 2) TOKENI: GRAFIT I NARANČASTA ---------- */
:root[data-tema="grafit"] {
  --pozadina:
    radial-gradient(120% 55% at 100% -5%, rgba(214,92,24,.55) 0%, rgba(214,92,24,0) 60%),
    radial-gradient(110% 50% at -10% 105%, rgba(196,78,18,.45) 0%, rgba(196,78,18,0) 60%),
    linear-gradient(170deg, #1C1715, #141110 55%, #0F0C0B);
  --bg: #141110;

  --tekst: #F6EEE8;
  --siva: #C9B8AD;
  --siva-poz: #D2C3B9;
  --siva2: #C2B1A6;
  --nar-jaki: #FF8A3D;
  --nar: #FFA266;
  --nar-t: #FFA466;
  --nar-m: rgba(255,138,61,.16);
  --nar-m2: rgba(255,138,61,.3);
  --crta: rgba(255,255,255,.12);
  --crta2: rgba(255,255,255,.2);

  --gumb: linear-gradient(180deg, #FF9A4D, #F2711F);
  --gumb-tekst: #1F0E03;
  --gumb-sjena: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(255,122,40,.28);
  --gotovo: linear-gradient(180deg, #FF9A4D, #F2711F);

  --kartica: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  --kartica-rub: 1px solid rgba(255,255,255,.1);
  --kartica-sjena: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.4);
  --redak: rgba(255,255,255,.06);
  --redak-gotovo: rgba(255,255,255,.03);
  --pov: rgba(255,255,255,.07);
  --pov2: rgba(255,255,255,.05);
  --ploca: #1E1917;
  --zastor: rgba(0,0,0,.6);
  --zakljucano-rub: rgba(255,255,255,.22);
  --zakljucano-bg: rgba(255,255,255,.08);

  --ok: #6FD39C; --ok-m: rgba(111,211,156,.14);
  --opasno: #FF8A80; --opasno-m: rgba(255,138,128,.14);
  --uspjeh-bg: rgba(111,211,156,.12); --uspjeh-tekst: #9BE3BB;
  --istaknuto: rgba(255,138,61,.1);
  --tost: #F6EEE8; --tost-tekst: #1F0E03;
  --logo-tamni: none; --logo-svijetli: block;
  color-scheme: dark;
}

/* ---------- 3) OSNOVA ---------- */
html { background: var(--bg); }
body { background: var(--pozadina); background-attachment: fixed; background-color: var(--bg); color: var(--tekst); font-family: var(--font); }
h1, h2, h3, h4 { font-family: var(--font); }
a { color: var(--nar); }
.wrap { padding: 0 18px; }
.mali { color: var(--siva); }
.logo-tamni { display: var(--logo-tamni) !important; }
.logo-svijetli { display: var(--logo-svijetli) !important; }

/* male oznake iznad naslova i u karticama */
.oznaka { font: 700 11.5px/1.2 var(--font); letter-spacing: 1.5px; color: var(--siva); }
.oznaka.siva { color: var(--siva); }
.naslov-ekrana { margin: 4px 0 14px; }
.naslov-ekrana .oznaka { color: var(--siva-poz); }
.naslov-ekrana h1 { font-size: 34px; font-weight: 800; letter-spacing: -.8px; line-height: 1.08; color: var(--tekst); }
.naslov-ekrana p { color: var(--siva-poz); }

/* ---------- 4) GLOSS KARTICE ---------- */
.kartica, .kartica.topla, .stat3 > div, .lista-stavka, .dan-stavka, .jezici button, .rezultat-kartica, .unos-plocica, .kal-krug-kartica, .mat-slika {
  background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.kartica, .rezultat-kartica { border-radius: 24px; margin-bottom: 14px; }
.stat3 > div, .unos-plocica, .kal-krug-kartica, .mat-slika, .jezici button { border-radius: 20px; }
.lista-stavka, .dan-stavka { border-radius: 18px; }
.kartica .kartica { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.unos-plocica.gotovo { background: linear-gradient(160deg, var(--nar-m), transparent 70%), var(--kartica); border-color: var(--nar-m2); }

/* ---------- 5) GUMBI (najmanje 44px) ---------- */
.gumb { background: var(--gumb); color: var(--gumb-tekst); font-weight: 700; box-shadow: var(--gumb-sjena); min-height: 50px; }
.gumb.obrub { background: var(--pov); color: var(--tekst); border: 1.5px solid var(--crta2); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.gumb.obrub.nar { color: var(--nar); border-color: var(--nar); }
.gumb.mali-g { min-height: 44px; }
.veza { color: var(--nar); min-height: 44px; }
button.cip { min-height: 44px; }
.cip { font-weight: 700; }
.cip.nar { background: var(--nar-m); color: var(--nar); }
.cip.siva { background: var(--zakljucano-bg); color: var(--siva); }
.cip.ok { background: var(--ok-m); color: var(--ok); }
.ikona-kvadrat { background: var(--gotovo); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(184,70,11,.3); }
.ikona-kvadrat svg { color: #fff; }

/* ---------- 6) VRH, PREKIDAČ, DONJI IZBORNIK ---------- */
.vrh { background: transparent; }
/* zamućenje je na zasebnom sloju IZA loga i imena (iOS Safari inače zna zamutiti i sam sadržaj zaglavlja) */
.vrh { isolation: isolate; }
.vrh::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); opacity: 0; transition: opacity .2s;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.vrh.spusteno::before { opacity: .9; }
.vrh .wrap { position: relative; }
.vrh.spusteno { border-bottom-color: var(--crta); box-shadow: none; }
.vrh .wrap > .mali { font-size: 15px; font-weight: 500; color: var(--siva-poz); }
.prekidac { background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 4px; margin: 6px 0 14px; }
.prekidac button { min-height: 44px; height: 44px; padding: 0 10px; font: 700 13px/1 var(--font); letter-spacing: 1.5px; color: var(--siva); background: transparent; }
.prekidac button[aria-pressed=true] { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }

nav.dno { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 26px;
  background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); max-width: 536px; margin: 0 auto; }
nav.dno .wrap { padding: 0; gap: 2px; }
nav.dno button { border-radius: 20px; min-height: 56px; padding: 8px 0 7px; font-size: 11px; font-weight: 500; color: var(--siva); gap: 4px; }
nav.dno button svg { width: 22px; height: 22px; }
nav.dno button[aria-current=page] { color: var(--nar); font-weight: 700; background: var(--nar-m); }
/* sadržaj nikad ne ostaje ispod plutajućeg izbornika */
main.wrap { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.tost { bottom: calc(100px + env(safe-area-inset-bottom)); background: var(--tost); color: var(--tost-tekst); }
.nova-verzija { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ---------- 7) MOJ DAN ---------- */
.prsten-kartica { gap: 16px; }
.prsten { width: 104px; height: 104px; }
.prsten .broj b { font: 800 25px/1 var(--font); color: var(--tekst); }
.prsten .broj small { font-weight: 700; letter-spacing: 1.5px; color: var(--siva); }
.prsten-kartica .oznaka { color: var(--nar); }
.prsten-kartica h3 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.prsten-kartica .mali { font-size: 13px; }
.kartica h3 { color: var(--tekst); }
[data-vodic="navike"] h3 { font-size: 17px; font-weight: 800; }
.postotak { font: 800 26px/1 var(--font); color: var(--nar); }
.traka { height: 7px; background: var(--nar-m); }
.traka i { background: var(--gotovo); }
.navika { min-height: 64px; margin-top: 8px; border-radius: 18px; background: var(--redak); border: var(--kartica-rub); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
:root[data-tema="grafit"] .navika { box-shadow: none; border-color: rgba(255,255,255,.07); }
.navika .ik { width: 42px; height: 42px; background: var(--nar-m); color: var(--nar); }
.navika .t b { font-size: 15px; font-weight: 700; }
.navika .t small { font-size: 12.5px; color: var(--siva); }
.navika .kv { width: 28px; height: 28px; border: 2px solid var(--nar); }
.navika button.kv { width: 44px; height: 44px; }
.navika .kv svg { width: 16px; height: 16px; }
.navika.gotovo { background: var(--redak-gotovo); }
.navika.gotovo .ik { background: var(--gotovo); color: #fff; }
.navika.gotovo .kv { background: var(--gotovo); border-color: transparent; color: #fff; }
.navika.gotovo .t b { color: var(--siva); }
.navika .kv[data-makni], .navika .kv[data-makni-zadatak] { border-color: var(--crta2); }
.baner { background: var(--istaknuto); border: 1px solid var(--nar-m2); border-radius: 20px; color: var(--tekst); }
.uspjeh { background: var(--uspjeh-bg); color: var(--uspjeh-tekst); }

/* DTC score i dnevni unosi */
.prsten-sredina { background: var(--kartica); }
:root[data-tema="grafit"] .prsten-sredina { background: radial-gradient(circle at 50% 28%, #2A2320, #181412 75%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.45); }
.dan-traka { background: var(--nar-m); }
.dan-traka span { background: var(--gotovo); }
.dan-traka-oznake, .dr-trend-vrh { color: var(--siva); }
.unos-ikona { background: var(--nar-m); color: var(--nar); }
.unos-plocica.gotovo .unos-ikona { background: var(--gotovo); }
.pilule, .stepper { background: var(--pov); border-color: var(--crta2); }
.pilule button { color: var(--siva); }
.pilule button[aria-pressed="true"], .ocjene button[aria-pressed="true"], .stepper button { background: var(--gumb); color: var(--gumb-tekst); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.ocjene button { background: var(--pov); border-color: var(--crta2); min-height: 44px; }
.stepper button { width: 44px; height: 44px; }

/* ---------- 8) IZAZOV ---------- */
.dani button { background: var(--redak); border: var(--kartica-rub); color: var(--siva); }
.dani button.prosao { background: var(--nar-m); color: var(--nar); }
.dani button.danas { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }
.dan-stavka .krug, .inicijali { background: var(--nar-m); color: var(--nar); }
.dan-stavka.danas .krug { background: var(--gotovo); color: #fff; }
.dan-stavka .tt small { font-weight: 700; letter-spacing: 1.5px; color: var(--siva); }
.dan-stavka > button { min-height: 64px; }
.dan-tijelo { border-top-color: var(--crta); }
.dan-tijelo p { color: var(--tekst); }
.znas-li { background: var(--nar-m); }

/* ---------- 9) NAPREDAK ---------- */
.stat3 > div { padding: 12px; display: flex; flex-direction: column; }
.stat3 small { font: 700 10px/1.25 var(--font); letter-spacing: 1.5px; color: var(--siva); min-height: 2.5em; display: flex; align-items: flex-start; }
.stat3 b { font: 800 26px/1 var(--font); color: var(--nar); margin-top: auto; }
.stat3 b em { font-size: 13px; font-weight: 700; color: var(--tekst); }
.an-sub { color: var(--siva); }
.graf text { font-size: 12px; fill: var(--siva); font-family: var(--font); }
.graf .mali { text-align: center; font-size: 13px; }
.vremenska li { min-height: 64px; border-top-color: var(--crta); padding: 10px 0; }
.vremenska .t b { font-weight: 700; }
.tocka { width: 20px; height: 20px; border: 2px solid var(--zakljucano-rub); background: transparent; }
.vremenska li.otvoren .tocka { border-color: var(--nar); box-shadow: 0 0 10px rgba(255,138,61,.35); }
:root[data-tema="grafit"] .vremenska li.otvoren .tocka { box-shadow: 0 0 12px rgba(255,138,61,.55); }
.tocka.puna { background: var(--gotovo); border-color: transparent; }
.vremenska button.cip.unesi { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); padding: 0 18px; }
.vremenska .cip.zakljucano { background: var(--zakljucano-bg); color: var(--siva); border: 1px solid var(--zakljucano-rub); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; }
.foto-slot { background: var(--pov2); border-color: var(--nar-m2); color: var(--siva); }
.foto-slot b, .foto-slot svg { color: var(--nar); }

/* ---------- 10) PROFIL ---------- */
.avatar { background: var(--gotovo); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.postavka { min-height: 52px; border-top-color: var(--crta); color: var(--tekst); }
.postavka svg { color: var(--siva); }
.klizac { background: var(--zakljucano-bg); box-shadow: inset 0 0 0 1px var(--zakljucano-rub); }
[aria-checked="true"] > .klizac { background: var(--gotovo); box-shadow: none; }
.kvacica.sw input { background: var(--zakljucano-bg); box-shadow: inset 0 0 0 1px var(--zakljucano-rub); }
.kvacica.sw input:checked { background: var(--gotovo); box-shadow: none; }
.kvacica { border-top-color: var(--crta); }
.link-kutija { background: var(--redak); border: var(--kartica-rub); }
.tema-izbor { display: grid; gap: 10px; margin-top: 12px; }
.tema-izbor button { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border-radius: 18px; background: var(--redak); border: 1.5px solid var(--crta2); text-align: left; }
.tema-izbor button[aria-pressed="true"] { border-color: var(--nar); box-shadow: 0 0 0 3px var(--nar-m); }
.tema-izbor .uzorak { width: 44px; height: 44px; border-radius: 14px; flex: none; border: 1px solid var(--crta2); }
.tema-izbor b { display: block; } .tema-izbor small { color: var(--siva); font-size: 12.5px; }

/* ---------- 11) ACTION MODE ---------- */
.brojac { border-top-color: var(--crta); }
.brojac .k button { width: 44px; height: 44px; border-color: var(--crta2); background: var(--pov); }
.brojac .k button.plus { background: var(--gumb); color: var(--gumb-tekst); border-color: transparent; box-shadow: var(--gumb-sjena); }
.lista-stavka .ik { background: var(--nar-m); color: var(--nar); }
.clan { border-top-color: var(--crta); }
.sek-cipovi .cip { background: var(--pov); color: var(--siva); }
.sek-cipovi .cip[aria-selected="true"] { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }
.an-traka .b, .an-stupci { background: transparent; }
.an-traka .b { background: var(--nar-m); }
.an-traka .b i, .an-stupci i { background: var(--gotovo); }
.an-red { border-top-color: var(--crta); }
.an-os { color: var(--siva); font-size: 12px; }
.kal-dan { background: var(--redak); color: var(--tekst); }
.kal-dan.proslo { color: var(--siva2); }
.kal-dan.odabran { background: var(--gumb); color: var(--gumb-tekst); }
.kal-dan.danas { box-shadow: inset 0 0 0 2px var(--nar); }
.kal-nav, .kal-mali { width: 44px; height: 44px; border-color: var(--crta2); background: var(--pov); }
.kal-ukupno { background: var(--nar-m); }
.kal-ukupno b { color: var(--nar); }
.kal-ev { border-top-color: var(--crta); }
.kal-ev-datum { background: color-mix(in srgb, var(--nijansa) 16%, transparent); }
#kal-dan .brojac input { background: var(--pov); border-color: var(--crta2); }
.tg-foto { background: var(--pov2); }
.bedz { background: var(--opasno); }

/* ---------- 12) FORME, PROZORI, OSTALO ---------- */
.polje label { font-weight: 700; letter-spacing: 1.5px; color: var(--siva); }
.polje input, .polje select, .polje textarea, textarea, .tekst-unos, #z-novi, #n-nova { background: var(--pov) !important; border-color: var(--crta2) !important; color: var(--tekst); }
.polje input:focus, .polje select:focus { border-color: var(--nar); box-shadow: 0 0 0 4px var(--nar-m); }
select option { background: var(--ploca); color: var(--tekst); }
.zastor { background: var(--zastor); }
.ploca { background: var(--ploca); color: var(--tekst); border-top: var(--kartica-rub); }
.oko { color: var(--siva); }
.greska { color: var(--opasno); }
.vodic-oblacic { background: var(--ploca); color: var(--tekst); }
.vodic-dobrodoslica .kartica { background: var(--ploca); }
.blokada .kartica { background: var(--ploca); }
.auth .podnaslov, .auth .dno-link { color: var(--siva-poz); }
.trening-okvir { background: transparent; }

/* prsten DTC scorea: staza i oznake prate temu */
:root { --prsten-staza: rgba(107,82,68,.14); --prsten-oznake: rgba(107,82,68,.28); }
:root[data-tema="grafit"] { --prsten-staza: rgba(255,255,255,.08); --prsten-oznake: rgba(255,255,255,.16); }
.prsten-luk { background: conic-gradient(from 0deg, var(--b0) 0deg, var(--b1) calc(var(--ugao) * .5), var(--b2) var(--ugao), var(--prsten-staza) var(--ugao) 360deg); }
.prsten-oznake { background: repeating-conic-gradient(from -1deg, var(--prsten-oznake) 0 1.2deg, transparent 1.2deg 7.5deg); }
.demo-traka { background: #2A1A12; }

/* velike brojke, prsteni i crte koriste puni naglasak (#C24A0C / #FF8A3D) */
.postotak, .stat3 b, .kal-ukupno b, .prsten-kartica .oznaka { color: var(--nar-jaki); }
.prsten-kartica .oznaka { color: var(--nar); }
.navika .kv, .tocka { border-color: var(--nar-jaki); }
.vremenska li:not(.otvoren) .tocka:not(.puna) { border-color: var(--zakljucano-rub); }
.vremenska li.otvoren .tocka { border-color: var(--nar-jaki); }
.kal-dan.danas { box-shadow: inset 0 0 0 2px var(--nar-jaki); }

/* ---------- Neon obrub koji lagano kruži (Profil → Moji referralni linkovi) ---------- */
@property --kut { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --neon: #E0651C; --neon-sjaj: rgba(224,101,28,.55); }
:root[data-tema="grafit"] { --neon: #FF8A3D; --neon-sjaj: rgba(255,138,61,.7); }
.link-kutija.neon, .sudac-kartica, .dtc-spojeno { position: relative; isolation: isolate; border-color: var(--nar-m2); }
.link-kutija.neon::before, .link-kutija.neon::after, .sudac-kartica::before, .sudac-kartica::after, .dtc-spojeno::before, .dtc-spojeno::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--kut), transparent 0deg 220deg, var(--neon) 290deg, #FFF3E8 318deg, var(--neon) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: neon-kruzi 6s linear infinite;
}
.link-kutija.neon::after, .sudac-kartica::after, .dtc-spojeno::after { inset: -3px; padding: 4px; filter: blur(6px); opacity: .9;
  background: conic-gradient(from var(--kut), transparent 0deg 230deg, var(--neon-sjaj) 300deg, var(--neon-sjaj) 335deg, transparent 360deg); }
.link-kutija.neon + .link-kutija.neon::before, .link-kutija.neon + .link-kutija.neon::after, .admin-kartica::before, .admin-kartica::after { animation-delay: -3s; }
.dtc-spojeno::before, .dtc-spojeno::after { animation-duration: 8s; }
@keyframes neon-kruzi { to { --kut: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .link-kutija.neon::before, .link-kutija.neon::after, .sudac-kartica::before, .sudac-kartica::after, .dtc-spojeno::before, .dtc-spojeno::after { animation: none; background: none; }
  .link-kutija.neon, .sudac-kartica, .dtc-spojeno { border-color: var(--neon); box-shadow: 0 0 10px var(--neon-sjaj); }
}

/* =====================================================================
   PRIKAZ PO VELIČINI EKRANA (automatski)
   mobitel < 700 px · tablet 700–1099 px · laptop/računalo ≥ 1100 px · veliki ekran ≥ 1500 px
   ===================================================================== */

/* ---------- tablet: šire, ali i dalje jedan stupac i donji izbornik ---------- */
@media (min-width: 700px) {
  .wrap { max-width: 760px; padding: 0 28px; }
  nav.dno { max-width: 620px; }
  .ploca { border-radius: 26px; margin-bottom: 24px; max-width: 600px; }
  .zastor { align-items: center; padding: 24px; }
  .naslov-ekrana h1 { font-size: 38px; }
}

/* ---------- laptop i računalo: izbornik lijevo, sadržaj u dva stupca ---------- */
@media (min-width: 1100px) {
  :root { --rail: 104px; }
  .wrap { max-width: 1180px; padding: 0 32px 0 calc(var(--rail) + 56px); }
  .vrh .wrap { height: 72px; }
  .logo img { height: 42px; }
  main.wrap { padding-bottom: 48px; }

  /* donji izbornik postaje okomita traka uz lijevi rub */
  nav.dno { left: 24px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: var(--rail); max-width: none; margin: 0; padding: 8px; }
  nav.dno .wrap { flex-direction: column; gap: 6px; max-width: none; padding: 0; }
  nav.dno button { min-height: 72px; padding: 12px 4px; font-size: 12px; }
  nav.dno button svg { width: 24px; height: 24px; }
  .bedz { top: 8px; }

  .prekidac { max-width: 460px; }
  main > .baner { max-width: 620px; }
  .naslov-ekrana h1 { font-size: 40px; }

  /* dva stupca na preglednim ekranima */
  #ekran[data-ekran="today"], #ekran[data-ekran="progress"], #ekran[data-ekran="profile"],
  #ekran[data-ekran="s_today"], #ekran[data-ekran="support"], #ekran[data-ekran="team"], #ekran[data-ekran="materials"] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  #ekran > .naslov-ekrana, #ekran > .stat3, #ekran > .unosi, #ekran > .polje, #ekran > .profil-vrh, #ekran > .prekidac,
  #ekran > .baner, #ekran > .uspjeh, #ekran > .sek-cipovi, #ekran > #mat-tijelo, #ekran > .gumb, #ekran > #odjava, #ekran > p.mali { grid-column: 1 / -1; }
  #ekran > #odjava { max-width: 420px; }
  #ekran[data-ekran="team"] > .kartica:last-child { grid-column: 1 / -1; }

  /* kalendar na Moj dan (Action mode): odbrojavanje i eventi lijevo, mjesec i dan desno */
  #ekran[data-ekran="s_today"] > #kal-okvir { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }

  /* materijali: popis i galerije u dva/tri stupca */
  #mat-tijelo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }
  #mat-tijelo > .mat-mreza, #mat-tijelo > .podrska-grid, #mat-tijelo > p.oznaka { grid-column: 1 / -1; }
  .mat-mreza { grid-template-columns: repeat(4, 1fr); }

  /* izazov: mreža dana i popis u dva stupca */
  #ekran[data-ekran="challenge"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }
  #ekran[data-ekran="challenge"] > .naslov-ekrana, #ekran[data-ekran="challenge"] > .dani { grid-column: 1 / -1; }
  #ekran[data-ekran="challenge"] > .dan-stavka[aria-expanded], #ekran[data-ekran="challenge"] > .dan-stavka:has(.dan-tijelo) { grid-column: 1 / -1; }
  .dani { max-width: 640px; }

  /* trening: modul je pravljen za mobitel, pa je u sredini u čitljivoj širini */
  #ekran[data-ekran="training"] { max-width: 760px; }

  /* prozori kao kartica u sredini ekrana */
  .zastor { align-items: center; }
  .ploca { max-height: 86vh; }
  .tost { bottom: 32px; }
  .nova-verzija { bottom: 32px; left: calc(var(--rail) + 56px); right: 32px; }
  .vodic-oblacic { max-width: 440px; }
}

/* ---------- veliki ekran: tri stupca gdje ima smisla ---------- */
@media (min-width: 1500px) {
  .wrap { max-width: 1480px; }
  #ekran[data-ekran="support"], #ekran[data-ekran="materials"], #ekran[data-ekran="team"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #mat-tijelo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mat-mreza { grid-template-columns: repeat(5, 1fr); }
}

/* prijava i registracija: uska kartica u sredini na većim ekranima */
@media (min-width: 700px) {
  .auth { max-width: 480px; }
}
@media (min-width: 1100px) { .wrap.auth { padding: calc(30px + env(safe-area-inset-top)) 24px 40px; } }

/* ---------- Moj tim (popis i struktura), kartica osobe, Telegram, brisanje ---------- */
.tim-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.tim-gumbi .gumb { font-size: 13px; padding: 10px 12px; }
.jedan-red { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tim-red { align-items: flex-start; }
.tim-red > .inicijali { margin-top: 2px; }
.tim-cipovi { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.tim-cipovi .cip { padding: 4px 9px; font-size: 11.5px; }
.tim-red .prekidac-g { align-self: center; }
.clan .tim-cipovi .cip + .cip { margin-left: 0; }
.detalji-g { color: var(--nar-jaki); font-weight: 700; font-size: 13px; padding: 6px 4px; min-height: 32px; background: none; border: 0; }
.prekidac-g { background: none; border: 0; padding: 7px 0; min-height: 44px; display: inline-flex; align-items: center; flex: none; }
.cip.opasno { background: var(--opasno-m); color: var(--opasno); }
.stablo, .stablo ul { list-style: none; margin: 0; padding: 0; }
.stablo ul { margin-left: 17px; padding-left: 12px; border-left: 2px solid var(--crta2); }
.stablo li { position: relative; }
.stablo ul > li::before { content: ""; position: absolute; left: -12px; top: 30px; width: 12px; border-top: 2px solid var(--crta2); }
.st-red { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.st-tog { width: 34px; height: 44px; flex: none; display: grid; place-items: center; color: var(--siva); background: none; border: 0; }
.st-tog svg { width: 16px; height: 16px; transition: transform .2s; transform: rotate(90deg); }
.st-tog[aria-expanded="false"] svg { transform: rotate(0deg); }
.st-tog.prazno { visibility: hidden; }
.st-osoba { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 4px; border-radius: 14px; background: none; border: 0; color: inherit; min-height: 44px; }
button.st-osoba:hover { background: var(--istaknuto); }
.st-t { flex: 1; min-width: 0; }
.st-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-t small { display: block; font-size: 11.5px; letter-spacing: .03em; color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osoba-vrh { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.osoba-k { padding: 14px 18px; margin-bottom: 12px; }
.osoba-k .an-red a { color: var(--nar-jaki); font-weight: 600; }
.osoba-k .an-red > b { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.osoba-k .stat3 b em { font-size: 12px; font-style: normal; margin-left: 2px; color: var(--siva); }
.upravljanje { border-color: var(--nar-m2); }
.seg { display: flex; gap: 4px; background: var(--pov); border: 1px solid var(--crta); border-radius: 16px; padding: 4px; }
.seg button { flex: 1; min-height: 44px; border-radius: 12px; font: 600 13px/1.15 var(--font); color: var(--siva); padding: 6px 4px; background: none; border: 0; }
.seg button[aria-checked="true"] { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }
.opasno-g { color: var(--opasno) !important; border-color: var(--opasno) !important; margin-top: 4px; }
.opasno-pun { background: var(--opasno); color: #fff; box-shadow: none; }
.opasno-pun:disabled { opacity: .45; }
@media (min-width: 700px) {
  #ekran[data-ekran="team"] { display: block !important; max-width: 1040px; }
}

/* ---------- Upute za slikanje (Napredak) ---------- */
.upute-gumb { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; margin: 0 0 14px; border-radius: 22px; color: var(--tekst);
  background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); min-height: 64px; }
.upute-gumb > svg:first-child { width: 42px; height: 42px; padding: 10px; border-radius: 14px; background: var(--gumb); color: var(--gumb-tekst); flex: none; }
.upute-gumb > svg:last-child { width: 18px; height: 18px; color: var(--siva); flex: none; }
.upute-gumb span { flex: 1; min-width: 0; } .upute-gumb b { display: block; font-size: 16px; } .upute-gumb small { display: block; color: var(--siva); font-size: 13px; margin-top: 2px; }
.up-vrh { padding: 2px 0 0; } .up-vrh h2 { font-size: 26px; margin: 2px 0 0; } .up-vrh .oznaka { margin: 0; color: var(--nar-jaki); }
.up-primjeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.up-primjeri figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #EEE9E4; aspect-ratio: 3 / 5; }
.up-primjeri img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.up-primjeri figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 6px; font: 700 11px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.up-ok { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.up-ok svg { width: 14px; height: 14px; stroke-width: 3; }
.up-blok { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--crta); }
.up-br { width: 38px; height: 38px; border-radius: 12px; background: var(--nar-m); color: var(--nar-jaki); display: grid; place-items: center; flex: none; }
.up-br svg { width: 19px; height: 19px; }
.up-blok h3, .up-pazi h3, .up-provjera h3 { font-size: 15.5px; margin: 0 0 6px; }
.up-lista { list-style: none; margin: 0; padding: 0; }
.up-lista li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; padding: 3px 0; }
.up-lista li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ok); stroke-width: 2.6; }
.up-pazi { margin: 8px 0 14px; padding: 14px 16px; border-radius: 18px; background: var(--opasno-m); border: 1px solid var(--opasno); }
.up-pazi h3 { color: var(--opasno); display: flex; gap: 8px; align-items: center; } .up-pazi h3 svg { width: 18px; height: 18px; }
.up-pazi ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; } .up-pazi li + li { margin-top: 6px; }
.up-provjera { padding: 12px 16px 4px; border-radius: 18px; background: var(--pov); border: 1px solid var(--crta); margin-bottom: 14px; }
.up-provjera .uspjeh { margin: 4px 0 12px; }
.up-gdpr { font-size: 11.5px; line-height: 1.5; margin: 14px 2px 0; }
@media (min-width: 700px) { .ploca.ploca-siroka { max-width: 640px; } .up-primjeri { gap: 12px; } }
.up-lista li.ne svg { color: var(--opasno); }

/* ---------- Sudačka kartica (ispod Izazov | Action mode) ---------- */
.sudac-kartica { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 0 0 14px; padding: 16px 18px; min-height: 68px;
  border-radius: 22px; border: 1px solid var(--nar-m2); background: linear-gradient(135deg, var(--istaknuto), var(--pov)); color: var(--tekst); }
.sudac-kartica .ik { width: 44px; height: 44px; border-radius: 14px; background: var(--gumb); color: var(--gumb-tekst); display: grid; place-items: center; flex: none; }
.sudac-kartica .ik svg { width: 22px; height: 22px; }
.sudac-kartica .t { flex: 1; min-width: 0; } .sudac-kartica .t b { display: block; font-size: 17px; } .sudac-kartica .t small { display: block; color: var(--siva); font-size: 13px; }
.sudac-kartica > svg { width: 18px; height: 18px; color: var(--siva); flex: none; }
body.bez-skrola { overflow: hidden; }

/* ---------- izbor izvora slike i kamera ---------- */
.izvor-g { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px; min-height: 64px;
  border-radius: 18px; border: 1.5px solid var(--crta2); background: var(--pov); color: var(--tekst); }
.izvor-g.preporuka { border-color: var(--nar); background: var(--istaknuto); }
.izvor-g > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--nar-m); color: var(--nar-jaki); flex: none; }
.izvor-g.preporuka > svg { background: var(--gumb); color: var(--gumb-tekst); }
.izvor-g b { display: block; } .izvor-g small { display: block; color: var(--siva); font-size: 12.5px; }
.foto-slot .up-sumnja { position: absolute; bottom: 6px; left: 6px; z-index: 1; padding: 3px 8px; font-size: 11px; }
.kamera { position: fixed; inset: 0; z-index: 400; background: #000; color: #fff; display: flex; flex-direction: column; }
.kamera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera video.zrcalo { transform: scaleX(-1); }
.kam-obris { position: absolute; left: 50%; top: 50%; height: 78%; width: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -52%); fill: none; stroke: rgba(255,255,255,.75); stroke-width: .6; stroke-dasharray: 2 1.4; pointer-events: none; }
.kam-vrh { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.kam-vrh b { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.kam-vrh button, .kam-dno button:not(.gumb) { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; border: 0; }
.kam-vrh svg { width: 22px; height: 22px; }
.kam-savjet { position: relative; margin: 0 auto; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: 13px; }
.kam-broj { position: absolute; inset: 0; display: grid; place-items: center; font: 800 120px/1 var(--font); text-shadow: 0 4px 30px rgba(0,0,0,.6); pointer-events: none; }
.kam-dno { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.6)); gap: 12px; }
.kam-dno .kam-tajmer, .kam-dno .kam-galerija { width: 64px !important; height: 64px !important; border-radius: 18px !important; display: flex !important; flex-direction: column; gap: 2px; font-size: 11px; }
.kam-dno svg { width: 22px; height: 22px; }
.kam-okidac { width: 78px !important; height: 78px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 0 0 9px rgba(255,138,61,.6); border: 0; }
.kam-pregled { position: absolute; inset: 0; background: #000; }
.kam-pregled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kam-pregled .kam-dno .gumb { flex: 1; max-width: 220px; }
.kam-pregled .gumb.obrub { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- Sudački panel (preko cijelog ekrana) ---------- */
.sudac { position: fixed; inset: 0; z-index: 300; background: var(--pozadina, #FFF7F0); color: var(--tekst); overflow-y: auto; overscroll-behavior: contain; }
:root[data-tema="grafit"] .sudac { background: #120E0C; }
:root:not([data-tema="grafit"]) .sudac { background: linear-gradient(180deg, #FFF3E8, #FFFAF6 320px); }
.sud-vrh { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
  background: color-mix(in srgb, var(--pov) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--crta); }
.sud-naslov { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sud-naslov > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--gumb); color: var(--gumb-tekst); flex: none; }
.sud-naslov b { display: block; font-size: 18px; } .sud-naslov small { display: block; color: var(--siva); font-size: 12.5px; }
.sud-x { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--crta2); background: var(--pov); color: var(--tekst); display: grid; place-items: center; flex: none; }
.sud-x svg { width: 20px; height: 20px; }
.sud-tijelo { padding: 16px 20px 60px; max-width: 1800px; margin: 0 auto; }
.sud-alati { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sud-alati input, .sud-alati select { min-height: 46px; border-radius: 14px; border: 1.5px solid var(--crta2); background: var(--pov); color: var(--tekst); padding: 0 14px; font: inherit; }
.sud-alati input { flex: 1 1 240px; } .sud-alati select { flex: 0 1 170px; }
.sud-alati .gumb { width: auto; min-height: 46px; }
.sud-alati .gumb svg { width: 16px; height: 16px; }
.sud-filteri { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.sud-filteri button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--crta2); background: var(--pov); color: var(--siva); font: 600 13px var(--font); }
.sud-filteri button[aria-pressed="true"] { background: var(--gumb); color: var(--gumb-tekst); border-color: transparent; }
.sud-tablica { border: 1px solid var(--crta); border-radius: 20px; background: var(--pov); overflow: hidden; }
.sud-red { display: grid; grid-template-columns: 46px minmax(160px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr) 90px 100px minmax(170px, 1.1fr) 24px; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--crta); cursor: pointer; min-height: 60px; }
.sud-red:first-child { border-top: 0; }
.sud-red:hover:not(.zaglavlje), .sud-red:focus-visible { background: var(--istaknuto); outline: none; }
.sud-red.zaglavlje { cursor: default; min-height: 44px; font: 700 11.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--siva); background: var(--pov2, transparent); }
.sud-ime b { display: block; } .sud-ime small { display: block; color: var(--siva); font-size: 12px; }
.sud-ime .sud-bez { color: var(--nar-jaki); font-weight: 600; }
.sud-m i, .sud-br i { display: none; font-style: normal; }
.sud-m { font-size: 14px; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sud-br { font: 800 17px var(--font); font-variant-numeric: tabular-nums; }
.dolje { color: var(--ok); }
.sud-st { display: flex; gap: 6px; flex-wrap: wrap; } .sud-st .cip { padding: 4px 9px; font-size: 11.5px; }
.sud-strelica svg { width: 16px; height: 16px; color: var(--siva2); }
.sud-zv { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--crta2); background: var(--pov); color: var(--crta2); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.sud-zv[aria-pressed="true"] { color: #F5A623; border-color: #F5A623; background: rgba(245,166,35,.12); }
@media (max-width: 899px) {
  .sud-red { grid-template-columns: 42px 1fr auto; grid-template-areas: "zv ime str" "zv m1 m1" "zv m2 m2" "zv br br" "zv st st"; row-gap: 4px; padding: 12px 14px; }
  .sud-red.zaglavlje { display: none; }
  .sud-red > .sud-zv { grid-area: zv; align-self: start; } .sud-red > .sud-ime { grid-area: ime; } .sud-red > .sud-strelica { grid-area: str; }
  .sud-red > .sud-m:nth-of-type(2) { grid-area: m1; } .sud-red > .sud-m:nth-of-type(3) { grid-area: m2; }
  .sud-m i { display: inline; color: var(--siva); font-size: 12px; margin-right: 6px; text-transform: uppercase; letter-spacing: .05em; }
  .sud-red > .sud-br { display: inline-flex; gap: 6px; align-items: baseline; } .sud-br i { display: inline; color: var(--siva); font: 600 12px var(--font); }
  .sud-red > .sud-br:nth-of-type(4) { grid-area: br; } .sud-red > .sud-br:nth-of-type(5) { grid-area: br; justify-self: end; }
  .sud-red > .sud-st { grid-area: st; }
}
.sud-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sud-nav .gumb { width: auto; } .sud-nav-g { display: flex; gap: 8px; } .sud-nav-g .gumb { min-width: 46px; font-size: 20px; }
.sud-glava { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sud-glava > div { flex: 1; min-width: 200px; } .sud-glava h2 { font-size: 26px; margin: 0; } .sud-glava .mali { margin: 4px 0 6px; }
.sud-glava .gumb { width: auto; } .sud-glava .gumb svg { width: 16px; height: 16px; }
.sud-rez { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.sud-rez > div { background: var(--pov); border: 1px solid var(--crta); border-radius: 18px; padding: 12px 16px; }
.sud-rez small { display: block; color: var(--siva); font: 700 11px var(--font); letter-spacing: .07em; text-transform: uppercase; }
.sud-rez b { font: 800 26px var(--font); font-variant-numeric: tabular-nums; }
.sud-raspored { display: grid; gap: 20px; }
@media (min-width: 1100px) { .sud-raspored { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .sud-mjere { position: sticky; top: 90px; } }
.sud-slike section { margin-bottom: 18px; } .sud-slike h3, .sud-mjere h3 { font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--siva); margin: 0 0 8px; }
.sud-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sud-par figure { margin: 0; }
.sud-slika { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #1a1513; cursor: zoom-in; aspect-ratio: 3 / 4; }
.sud-slika img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sud-nema { aspect-ratio: 3 / 4; border-radius: 16px; border: 1.5px dashed var(--crta2); display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--siva); }
.sud-nema svg { width: 26px; height: 26px; }
.sud-par figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.sud-dl { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--crta2); background: var(--pov); color: var(--tekst); font: 600 13px var(--font); }
.sud-dl svg { width: 15px; height: 15px; }
.sud-info { margin-top: 6px; font-size: 12px; color: var(--siva); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sud-info .cip { padding: 3px 8px; font-size: 11px; white-space: normal; }
.sud-mjere { background: var(--pov); border: 1px solid var(--crta); border-radius: 20px; padding: 16px; }
.sud-mjere table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.sud-mjere th, .sud-mjere td { padding: 9px 4px; border-top: 1px solid var(--crta); text-align: right; }
.sud-mjere thead th { border-top: 0; font: 700 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--siva); }
.sud-mjere th[scope="row"] { text-align: left; font-weight: 600; }
.sud-mjere .zbroj th, .sud-mjere .zbroj td { border-top: 2px solid var(--crta2); }
.sud-mjere .gumb { width: 100%; }

/* povećalo */
.lupa { position: fixed; inset: 0; z-index: 500; background: rgba(8,6,5,.96); color: #fff; display: flex; flex-direction: column; }
.lupa-vrh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.lupa-naslov { font-size: 14px; opacity: .85; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lupa-g { display: flex; gap: 6px; flex: none; }
.lupa-g button { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; border: 0; font: 700 15px var(--font); display: grid; place-items: center; }
.lupa-g svg { width: 20px; height: 20px; }
.lupa-polje { position: relative; flex: 1; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: grab; }
.lupa-polje img { max-width: none; transform-origin: center center; user-select: none; -webkit-user-drag: none; will-change: transform; }
.lupa-str { position: absolute; top: 50%; width: 48px; height: 64px; margin-top: -32px; border-radius: 14px; background: rgba(255,255,255,.14); color: #fff; border: 0; font-size: 30px; }
.lupa-str.lijevo { left: 10px; } .lupa-str.desno { right: 10px; } .lupa-str:disabled { opacity: .2; }

/* rezultat */
.rez-kartica { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; margin: 0 0 14px; border-radius: 22px; border: 0; color: #fff;
  background: linear-gradient(135deg, #2A1A12, #120C0A); box-shadow: 0 14px 30px rgba(194,74,12,.25); }
.rez-k-br { display: flex; flex-direction: column; flex: none; } .rez-k-br b { font: 800 22px/1.15 var(--font); color: #FF8A3D; font-variant-numeric: tabular-nums; }
.rez-kartica > span:nth-child(2) { flex: 1; min-width: 0; } .rez-kartica > span:nth-child(2) b { display: block; font-size: 17px; } .rez-kartica small { display: block; opacity: .75; font-size: 13px; }
.rez-kartica > svg { width: 18px; height: 18px; opacity: .7; flex: none; }
.rez-vrh .oznaka { color: var(--nar-jaki); margin: 0; } .rez-vrh h2 { font-size: 26px; margin: 2px 0 10px; }
.rez-brojke { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rez-brojke > div { background: var(--istaknuto); border-radius: 18px; padding: 12px 16px; display: flex; align-items: baseline; gap: 6px; }
.rez-brojke b { font: 800 30px var(--font); color: var(--nar-jaki); font-variant-numeric: tabular-nums; } .rez-brojke small { color: var(--siva); font-weight: 600; }
.rez-slika { border-radius: 18px; overflow: hidden; background: #1a1513; aspect-ratio: 4 / 5; display: grid; place-items: center; margin-bottom: 14px; }
.rez-slika img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rez-slika .mali { color: #ccc; }
.gumb > svg:not([width]) { width: 18px; height: 18px; flex: none; }
.sud-rez b { white-space: nowrap; font-size: clamp(18px, 5.4vw, 26px); }

/* ---------- Moj dan: zadatak dana u kartici izazova ---------- */
.zadatak-k { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "prsten glava" "opis opis" "akcije akcije"; column-gap: 16px; row-gap: 12px; align-items: center; }
.zadatak-k > .prsten { grid-area: prsten; }
.zadatak-k .zk-tekst { grid-area: glava; min-width: 0; }
.zadatak-k .zk-tekst h3 { overflow-wrap: anywhere; }
.zadatak-k .zk-opis { grid-area: opis; margin: 0; font-size: 15px; line-height: 1.5; color: var(--tekst); }
.zk-akcije { grid-area: akcije; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gumb.mali-g.zk-gumb { flex: 1 1 160px; width: auto; min-height: 48px; text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 15px; }
.zk-kv { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--crta2); background: var(--pov); color: var(--tekst); font: 700 15px var(--font); }
.zk-kocka { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--nar-jaki); display: grid; place-items: center; flex: none; }
.zk-kocka svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; color: #fff; }
.zk-kv[aria-checked="true"] { border-color: var(--ok); background: var(--ok-m); color: var(--ok); }
.zk-kv[aria-checked="true"] .zk-kocka { background: var(--ok); border-color: var(--ok); }
.zk-kv[aria-checked="true"] .zk-kocka svg { opacity: 1; }
.zadatak-k.gotovo .gumb.zk-gumb { opacity: .75; }
@media (min-width: 520px) {
  .zadatak-k { grid-template-areas: "prsten glava" "prsten opis" "akcije akcije"; row-gap: 6px; }
  .zadatak-k .zk-tekst { align-self: end; } .zadatak-k .zk-opis { align-self: start; }
  .zk-akcije { margin-top: 8px; }
}

/* ---------- Action mode: eventi s odbrojavanjem u retku ---------- */
:root { --kal-staza: rgba(0,0,0,.08); --kal-crta: var(--crta); }
:root[data-tema="grafit"] { --kal-staza: rgba(255,255,255,.1); --kal-crta: rgba(255,255,255,.08); }
.kal-ev { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "lijevo tekst gumbi"; align-items: center; column-gap: 12px; min-height: 84px; padding: 13px 0; border-top: 1px solid var(--kal-crta); }
.kal-ev > .kal-ev-datum, .kal-ev > .kal-ev-prsten { grid-area: lijevo; }
.kal-ev-datum { width: 58px; height: 58px; border-radius: 16px; }
.kal-ev-datum b { font-size: 19px; }
.kal-ev-prsten { position: relative; width: 58px; height: 58px; }
.kal-ev-prsten svg { width: 58px; height: 58px; display: block; }
.kal-ev-prsten > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.kal-ev-prsten b { font: 800 19px/1 var(--font); color: var(--nar-jaki, var(--nar)); }
.kal-ev-prsten b.danas { font-size: 12px; }
.kal-ev-prsten small { font: 700 9px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--siva); margin-top: 3px; }
.kal-ev-tekst { grid-area: tekst; }
.kal-ev-tekst b { font-size: 17px; font-weight: 700; line-height: 1.25; }
.kal-ev-tekst small { display: block; font-size: 13px; color: var(--siva); margin-top: 3px; }
.kal-ev-gumbi { grid-area: gumbi; display: flex; align-items: center; gap: 6px; }
.kal-ev-gumbi .cip { min-height: 44px; }
/* admin na uskom ekranu: naziv dobiva cijelu širinu, gumbi (Pratiš, olovka, kanta) idu u red ispod */
@media (max-width: 479px) {
  .kal-ev.admin { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "lijevo tekst" "lijevo gumbi"; row-gap: 8px; }
  .kal-ev.admin .kal-ev-gumbi { justify-self: start; }
}

/* ---------- Anketa (prva prijava) ---------- */
.anketa { position: fixed; inset: 0; z-index: 350; overflow-y: auto; background: var(--bg); }
:root:not([data-tema="grafit"]) .anketa { background: linear-gradient(180deg, #FFF3E8, #FFFAF6 360px); }
.anketa-okvir { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
.anketa-vrh { display: flex; justify-content: space-between; align-items: center; min-height: 46px; }
.anketa-x { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--crta2); background: var(--pov); color: var(--tekst); display: grid; place-items: center; }
.anketa-x svg { width: 20px; height: 20px; }
.anketa-traka { height: 6px; border-radius: 999px; background: var(--nar-m); margin: 10px 0 0; overflow: hidden; }
.anketa-traka i { display: block; height: 100%; border-radius: inherit; background: var(--gumb); transition: width .3s; }
.anketa h2 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin: 14px 0 4px; }
.anketa-opcije { display: grid; gap: 10px; }
.anketa-opcije button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; text-align: left; border-radius: 18px;
  border: 1.5px solid var(--crta2); background: var(--kartica); color: var(--tekst); font: 600 15.5px/1.3 var(--font); }
.anketa-opcije .ao-kv { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--crta2); display: grid; place-items: center; flex: none; }
.anketa-opcije [role="checkbox"] .ao-kv { border-radius: 8px; }
.anketa-opcije .ao-kv svg { width: 15px; height: 15px; stroke-width: 3; color: #fff; opacity: 0; }
.anketa-opcije button[aria-checked="true"] { border-color: var(--nar); background: var(--istaknuto); }
.anketa-opcije button[aria-checked="true"] .ao-kv { background: var(--nar-jaki, var(--nar)); border-color: var(--nar-jaki, var(--nar)); }
.anketa-opcije button[aria-checked="true"] .ao-kv svg { opacity: 1; }
.anketa-napomena { margin: 14px 2px 0; font-size: 12.5px; }
.anketa-dno { display: flex; gap: 10px; margin-top: 18px; }
.anketa-dno .gumb { flex: 1; }
.anketa-dno .gumb.obrub { flex: 0 1 140px; }

/* ---------- Moj dan: Tvoji proizvodi ---------- */
.proizvodi-k .pk-red { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.proizvodi-k .pk-red > span { display: block; color: var(--siva); font-size: 13px; font-weight: 600; }
.pk-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.pk-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--istaknuto); font-size: 15px; line-height: 1.35; }
.pk-lista li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--nar-jaki, var(--nar)); stroke-width: 2.6; }
.proizvodi-k .gumb svg { width: 18px; height: 18px; }
.pk-promijeni { display: block; margin: 8px auto 0; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; }

/* ---------- DTC score: traka dana 0–24 h s oznakama sati ---------- */
.dan-sati { position: relative; height: 15px; margin: 2px 0 0; font: 600 10.5px/1 var(--font); color: var(--siva); font-variant-numeric: tabular-nums; }
.dan-sati span { position: absolute; top: 0; transform: translateX(-50%); }
.dan-sati span::after { content: ""; position: absolute; left: 50%; top: 11px; width: 1px; height: 4px; background: currentColor; opacity: .55; }
.dan-sati span:first-child { transform: none; } .dan-sati span:first-child::after { left: 1px; }
.dan-sati span:last-child { transform: translateX(-100%); } .dan-sati span:last-child::after { left: auto; right: 1px; }
.dan-traka span { background: linear-gradient(90deg, #7A2E08 0%, #C9561A 25%, #FFB877 50%, #C9561A 75%, #7A2E08 100%); background-repeat: no-repeat; background-position: left center; }

/* ---------- Božićni ukrasi (obje teme) ---------- */
.bozic #app { position: relative; z-index: 1; }
.snijeg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.snijeg i { position: absolute; top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(150,105,80,.45); animation-name: snijeg-pada, snijeg-njise; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
:root[data-tema="grafit"] .snijeg i { box-shadow: 0 0 6px rgba(255,255,255,.55); }
@keyframes snijeg-pada { to { top: 102%; } }
@keyframes snijeg-njise { from { margin-left: -14px; } to { margin-left: 14px; } }
.lampice { position: absolute; left: 0; right: 0; bottom: -12px; height: 16px; z-index: 1; pointer-events: none; color: rgba(60,40,30,.45); }
:root[data-tema="grafit"] .lampice { color: rgba(255,255,255,.3); }
.lampice svg { position: absolute; inset: 0 0 auto; width: 100%; height: 14px; }
.lampice span { position: absolute; top: 9px; width: 7px; height: 10px; margin-left: -3.5px; border-radius: 50% 50% 45% 45%; background: var(--b); box-shadow: 0 0 6px 1px var(--b); animation: lampica 1.8s ease-in-out infinite; }
.lampice span::before { content: ""; position: absolute; left: 1.5px; top: -2px; width: 4px; height: 3px; border-radius: 1px; background: #8C7B70; }
@keyframes lampica { 0%, 100% { opacity: 1; box-shadow: 0 0 8px 2px var(--b); } 50% { opacity: .55; box-shadow: 0 0 2px 0 var(--b); } }
/* dar na prvoj kartici svakog ekrana */
.bozic #ekran > .kartica:not(.kartica ~ .kartica) { position: relative; }
.bozic #ekran > .kartica:not(.kartica ~ .kartica)::after { content: ""; position: absolute; top: -16px; right: 16px; width: 38px; height: 38px; pointer-events: none; z-index: 2;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='6' y='17' width='28' height='19' rx='3' fill='%23E53935'/%3E%3Crect x='4' y='12' width='32' height='8' rx='2.5' fill='%23F0524F'/%3E%3Crect x='17.5' y='12' width='5' height='24' fill='%23FFC93C'/%3E%3Cpath d='M20 12c-3-6-10-7-10-2.5 0 3 5 3 10 2.5zM20 12c3-6 10-7 10-2.5 0 3-5 3-10 2.5z' fill='%23FFC93C' stroke='%23E0A800' stroke-width='1'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.22)); transform: rotate(8deg); }
@media (prefers-reduced-motion: reduce) {
  .snijeg i { animation: none; top: auto; bottom: calc(var(--y, 50) * 1%); }
  .lampice span { animation: none; }
}

/* ---------- donji prozor: X za zatvaranje (ostaje vidljiv kod pomicanja) ---------- */
.ploca-x { position: sticky; top: 0; float: right; z-index: 3; width: 44px; height: 44px; margin: -8px -6px 0 10px; border-radius: 50%; border: 1px solid var(--crta2);
  background: var(--pov); color: var(--tekst); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-tema="grafit"] .ploca-x { background: #2A2320; }
.ploca-x svg { width: 18px; height: 18px; }
/* prozori otvoreni iz sudačkog panela idu iznad njega */
body.sudac-otvoren .zastor { z-index: 320; }

/* ---------- privole kad zatrebaju, instalacija ---------- */
.privola-vrh { text-align: center; padding: 6px 0 2px; }
.privola-vrh h2 { font-size: 23px; margin: 10px 0 0; }
.privola-ik { width: 56px; height: 56px; margin: 0 auto; border-radius: 18px; background: var(--gumb); color: var(--gumb-tekst); display: grid; place-items: center; }
.privola-ik svg { width: 26px; height: 26px; }
.privola-lista { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; gap: 8px; }
.privola-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--istaknuto); font-size: 15px; line-height: 1.4; }
.privola-lista svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok); stroke-width: 2.6; }
.ponuda { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ponuda-g { flex: 1 1 160px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 14px; border-radius: 16px;
  border: 1.5px solid var(--nar); background: var(--istaknuto); color: var(--tekst); font: 700 14px/1.2 var(--font); text-align: left; }
.ponuda-g svg { width: 18px; height: 18px; color: var(--nar-jaki, var(--nar)); flex: none; }

/* ---------- Alati: kalkulatori ---------- */
.alat { padding: 0; overflow: hidden; }
.alat-vrh { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 18px; text-align: left; background: none; border: 0; color: var(--tekst); }
.alat-ik { width: 42px; height: 42px; border-radius: 14px; background: var(--nar-m); color: var(--nar-jaki, var(--nar)); display: grid; place-items: center; flex: none; }
.alat-ik svg { width: 21px; height: 21px; }
.alat-t { flex: 1; min-width: 0; } .alat-t b { display: block; font-size: 17px; } .alat-t small { display: block; color: var(--siva); font-size: 13px; margin-top: 2px; }
.alat-str svg { width: 18px; height: 18px; color: var(--siva); transition: transform .22s ease; transform: rotate(90deg); }
.alat-vrh[aria-expanded="true"] .alat-str svg { transform: rotate(-90deg); }
.alat-tijelo { padding: 0 18px 18px; border-top: 1px solid var(--crta); animation: alat-otvori .22s ease; }
@keyframes alat-otvori { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alat-tijelo { animation: none; } .alat-str svg { transition: none; } }
.alat .al-oz { margin: 14px 4px 6px; font-weight: 600; }
.alat .polje { margin-top: 12px; }
.alat .polje input, .alat .polje select { min-height: 48px; font-size: 16px; }
.alat .seg button { font-size: 14px; }
.al-prazno { margin: 16px 0 0; padding: 14px; border-radius: 14px; background: var(--istaknuto); font-size: 15px; text-align: center; }
.al-rez3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.al-rez3.dva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-rez3 > div { background: var(--pov); border: 1px solid var(--crta); border-radius: 16px; padding: 10px 10px 12px; min-width: 0; }
.al-rez3 > div.istaknut { background: var(--istaknuto); border-color: var(--nar-m2); }
.al-rez3 span { display: block; font: 700 10.5px/1.25 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--siva); min-height: 26px; }
.al-rez3 b { display: block; font: 800 22px/1.1 var(--font); color: var(--tekst); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.al-rez3 .istaknut b { color: var(--nar-jaki, var(--nar)); }
.al-rez3 small { display: block; font-size: 12px; color: var(--siva); margin-top: 3px; line-height: 1.3; }
.al-makro { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 16px 0 8px; background: var(--nar-m); }
.al-makro i { display: block; height: 100%; }
.al-makro .p, .al-legenda .p { background: #C9561A; } .al-makro .m, .al-legenda .m { background: #F5B23D; } .al-makro .u, .al-legenda .u { background: #2E9E62; }
.al-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.al-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.al-oz2 { margin: 16px 0 0; font-weight: 700; font-size: 15px; }
.al-proizvodi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al-proizvodi li { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--pov); border: 1px solid var(--crta); }
.al-proizvodi img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; flex: none; }
.al-proizvodi span { flex: 1; min-width: 0; } .al-proizvodi b { display: block; font-size: 14.5px; } .al-proizvodi small { color: var(--siva); font-size: 12.5px; }
.al-proizvodi em { font: 800 15px var(--font); font-style: normal; color: var(--nar-jaki, var(--nar)); white-space: nowrap; }
.al-napomena { margin: 0 4px 16px; font-size: 12.5px; }

/* ---------- analitika osobe ---------- */
.an-ime { display: block; padding: 0; margin: 0; background: none; border: 0; font: 700 15px var(--font); color: var(--tekst); text-align: left; min-height: 24px; }
.pa-stupci { height: 64px; }
.sud-razdoblje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--istaknuto); border: 1px solid var(--nar-m2); }
.sud-razdoblje span { font: 700 12px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--siva); }
.sud-razdoblje select { flex: 1 1 130px; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--crta2); background: var(--pov); color: var(--tekst); padding: 0 12px; font: 600 16px var(--font); }
.sud-mjesto { font-style: normal; color: var(--nar-jaki, var(--nar)); font-weight: 800; }
.sud-pct { display: block; font: 600 12px var(--font); color: var(--siva); }

/* ---------- Izazov | Action mode u zaglavlju, između loga i imena ---------- */
.vrh .wrap { gap: 10px; }
.vrh .logo { flex: none; }
.prekidac.prekidac-vrh { flex: 0 1 236px; min-width: 0; margin: 0 auto; padding: 3px; }
.prekidac-vrh button { min-height: 44px; height: 44px; padding: 0 8px; font: 700 11.5px/1.1 var(--font); letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrh-ime { flex: 0 1 auto; min-width: 0; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
  .vrh .logo img { height: 30px; }
  .vrh-ime { max-width: 58px; font-size: 13.5px !important; }
  .prekidac-vrh button { font-size: 10.5px; letter-spacing: .2px; padding: 0 6px; }
}
@media (min-width: 1100px) { .prekidac.prekidac-vrh { flex-basis: 320px; } .prekidac-vrh button { font-size: 12.5px; letter-spacing: 1px; } }

/* ---------- DTC score i 3 unosa u jednoj kartici ---------- */
.rezultat-kartica.dtc-spojeno { display: block; padding: 16px; overflow: visible; }
.dtc-spojeno .dtc-gore { display: flex; align-items: center; gap: 16px; }
.dtc-spojeno .unosi { margin: 16px 0 0; }
.dtc-spojeno .unos-plocica { background: var(--pov); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vrh-inicijal { display: none; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--nar-m); color: var(--nar-jaki, var(--nar)); font: 800 15px/34px var(--font); text-align: center; }
@media (max-width: 400px) { .vrh .wrap:has(.prekidac-vrh) .vrh-ime { display: none; } .vrh .wrap:has(.prekidac-vrh) .vrh-inicijal { display: block; } }

/* ---------- DESKTOP: preglednije, bez rupa ---------- */
@media (min-width: 1100px) {
  /* prekidač Izazov | Action mode preko cijelog zaglavlja */
  .vrh .wrap { gap: 28px; }
  .prekidac.prekidac-vrh { flex: 1 1 auto; max-width: none; margin: 0; }
  .prekidac-vrh button { font-size: 13px; letter-spacing: 1.5px; }
  /* Moj dan, Napredak i Profil: kartice slažu se u dva stupca bez praznina (kao zid), redoslijed odozgo prema dolje */
  #ekran[data-ekran="today"], #ekran[data-ekran="progress"], #ekran[data-ekran="profile"] { display: block !important; columns: 2; column-gap: 20px; }
  #ekran[data-ekran="today"] > *, #ekran[data-ekran="progress"] > *, #ekran[data-ekran="profile"] > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
  #ekran[data-ekran="today"] > .kartica, #ekran[data-ekran="progress"] > .kartica, #ekran[data-ekran="profile"] > .kartica,
  #ekran[data-ekran="profile"] > .lista-stavka, #ekran[data-ekran="profile"] > .sudac-kartica, #ekran[data-ekran="progress"] > .upute-gumb, #ekran[data-ekran="progress"] > .rez-kartica { width: 100%; margin-bottom: 18px; }
  main > .baner { max-width: none; }
  #ekran[data-ekran="profile"] > .sudac-kartica, #ekran[data-ekran="profile"] > .lista-stavka, #ekran[data-ekran="progress"] > .upute-gumb, #ekran[data-ekran="progress"] > .rez-kartica { display: flex; }
  #ekran > .naslov-ekrana, #ekran > .stat3, #ekran > .profil-vrh, #ekran > #odjava, #ekran > p.mali:last-child { column-span: all; }
  /* odjava preko cijele širine */
  #ekran > #odjava { max-width: none !important; width: 100%; margin-top: 4px; }
  /* DTC score: tri unosa u redu ispod prstena */
  .dtc-spojeno .unosi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) { #ekran[data-ekran="today"], #ekran[data-ekran="profile"] { columns: 2; } }

/* ---------- Božić: kapa Djeda Božićnjaka i šećerni štapići (animirano, obje teme) ---------- */
.bozic .vrh .logo { position: relative; }
.bozic .vrh .logo::after { content: ""; position: absolute; left: -9px; top: -13px; width: 30px; height: 25px; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 52%22%3E%3Cpath d=%22M8 40 C14 18 30 6 46 8 C54 9 58 16 56 24 C52 20 46 20 42 24 C38 30 40 38 40 40 Z%22 fill=%22%23D62828%22/%3E%3Cpath d=%22M46 8 C54 9 58 16 56 24 C54 22 50 21 48 22 C50 16 49 11 46 8Z%22 fill=%22%23B01E1E%22/%3E%3Crect x=%224%22 y=%2236%22 width=%2242%22 height=%2212%22 rx=%226%22 fill=%22%23FFFFFF%22/%3E%3Crect x=%224%22 y=%2236%22 width=%2242%22 height=%2212%22 rx=%226%22 fill=%22none%22 stroke=%22%23E8E1DC%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2257%22 cy=%2226%22 r=%226%22 fill=%22%23FFFFFF%22 stroke=%22%23E8E1DC%22 stroke-width=%221.5%22/%3E%3C/svg%3E"); transform-origin: 30% 90%; animation: kapa-njise 3.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
@media (min-width: 1100px) { .bozic .vrh .logo::after { width: 36px; height: 30px; left: -11px; top: -16px; } }
@keyframes kapa-njise { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-4deg) translateY(-1px); } }
.bozic .profil-vrh .avatar, .bozic .osoba-vrh .avatar { position: relative; overflow: visible; }
.bozic .profil-vrh .avatar::after, .bozic .osoba-vrh .avatar::after { content: ""; position: absolute; left: -10px; top: -18px; width: 44px; height: 36px; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 52%22%3E%3Cpath d=%22M8 40 C14 18 30 6 46 8 C54 9 58 16 56 24 C52 20 46 20 42 24 C38 30 40 38 40 40 Z%22 fill=%22%23D62828%22/%3E%3Cpath d=%22M46 8 C54 9 58 16 56 24 C54 22 50 21 48 22 C50 16 49 11 46 8Z%22 fill=%22%23B01E1E%22/%3E%3Crect x=%224%22 y=%2236%22 width=%2242%22 height=%2212%22 rx=%226%22 fill=%22%23FFFFFF%22/%3E%3Crect x=%224%22 y=%2236%22 width=%2242%22 height=%2212%22 rx=%226%22 fill=%22none%22 stroke=%22%23E8E1DC%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2257%22 cy=%2226%22 r=%226%22 fill=%22%23FFFFFF%22 stroke=%22%23E8E1DC%22 stroke-width=%221.5%22/%3E%3C/svg%3E"); transform-origin: 30% 90%; animation: kapa-njise 3.6s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.lampice .stapic { position: absolute; top: 2px; width: 11px; height: 30px; margin-left: -5.5px; background: no-repeat center top / contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 64%22%3E%3Cdefs%3E%3CclipPath id=%22c%22%3E%3Cpath d=%22M18 64V18a6 6 0 0 0-12 0v3h-4v-3a10 10 0 0 1 20 0v46z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d=%22M18 64V18a6 6 0 0 0-12 0v3h-4v-3a10 10 0 0 1 20 0v46z%22 fill=%22%23FFFFFF%22 stroke=%22%23E2D6D0%22 stroke-width=%221%22/%3E%3Cg clip-path=%22url(%23c)%22 stroke=%22%23E53935%22 stroke-width=%224%22%3E%3Cpath d=%22M-4 30 L30 12M-4 42 L30 24M-4 54 L30 36M-4 66 L30 48M-4 78 L30 60M-4 18 L30 0%22/%3E%3C/g%3E%3C/svg%3E");
  transform-origin: 50% 0; animation: stapic-njise 2.6s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)); }
@keyframes stapic-njise { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }
@media (prefers-reduced-motion: reduce) { .bozic .vrh .logo::after, .bozic .profil-vrh .avatar::after, .bozic .osoba-vrh .avatar::after, .lampice .stapic { animation: none; } }

/* ---------- pozdrav pri prvoj prijavi ---------- */
.dobrodoslica .anketa-okvir { padding-top: calc(28px + env(safe-area-inset-top)); }
.dd-logo .logo-v { margin: 0 0 18px; } .dd-logo img { height: 56px; width: auto; }
.dobrodoslica h2 { font-size: 28px; line-height: 1.15; margin: 0 0 10px; }
.dd-uvod { font-size: 16.5px; line-height: 1.5; margin: 0 0 16px; }
.dd-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.dd-lista li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--kartica); border: 1px solid var(--crta); font-size: 15.5px; line-height: 1.45; }
.dd-ik { width: 36px; height: 36px; border-radius: 12px; background: var(--nar-m); color: var(--nar-jaki, var(--nar)); display: grid; place-items: center; flex: none; }
.dd-ik svg { width: 19px; height: 19px; }
.dd-mentor { margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--istaknuto); border: 1px solid var(--nar-m2); font-size: 15.5px; }
.dd-ankete { margin: 0 2px 16px; }

/* Alati: treninzi (INSYDE okvir) poravnati s karticama kalkulatora — okvir ima 16 px unutarnjeg ruba, pa ga izvana proširimo */
.trening-okvir { width: calc(100% + 32px); max-width: none; margin: 0 -16px; }


/* ---------- DESKTOP: Action mode Moj dan i Podrška slažu se kao zid (bez rupa između kartica) ---------- */
@media (min-width: 1100px) {
  #ekran[data-ekran="s_today"], #ekran[data-ekran="support"] { display: block !important; columns: 2; column-gap: 20px; }
  #ekran[data-ekran="s_today"] > *, #ekran[data-ekran="support"] > *, #ekran[data-ekran="s_today"] > #kal-okvir > * { break-inside: avoid; -webkit-column-break-inside: avoid; width: 100%; margin-bottom: 18px; }
  #ekran[data-ekran="s_today"] > #kal-okvir { display: contents; }
  #ekran[data-ekran="s_today"] > .naslov-ekrana, #ekran[data-ekran="support"] > .naslov-ekrana, #ekran[data-ekran="support"] > .polje { column-span: all; }
  #ekran[data-ekran="support"] > .kartica, #ekran[data-ekran="s_today"] > .kartica, #ekran[data-ekran="s_today"] > #kal-okvir > .kartica { display: block; }
}
@media (min-width: 1500px) { #ekran[data-ekran="support"] { columns: 3; } }

/* ---------- PROIZVODI i PROMOCIJA ---------- */
.pr-sl { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--nar-m); display: grid; place-items: center; overflow: hidden; font-size: 24px; line-height: 1; }
.pr-sl img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pr-sl.mala { width: 40px; height: 40px; font-size: 22px; }
.pr-sl.srednja { width: 86px; height: 86px; border-radius: 18px; font-size: 44px; }
.pr-sl.velika { width: 112px; height: 112px; border-radius: 22px; font-size: 58px; }
:root[data-tema="grafit"] .pr-sl { background: #2A2019; }
.pr-red { width: 100%; text-align: left; }
.pr-red .t small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pr-gr { margin: 18px 4px 8px; }
.pr-katalog-t { margin: 22px 4px 0; grid-column: 1 / -1; }
#mat-tijelo > .pr-gr { grid-column: 1 / -1; }
.pr-det-vrh { display: flex; gap: 16px; align-items: center; padding-right: 44px; }
.pr-tekst { white-space: pre-line; line-height: 1.55; margin: 14px 0 0; }
.pr-sadrzi { padding: 10px 0; border-bottom: 1px solid var(--crta); } .pr-sadrzi:last-of-type { border-bottom: 0; }
.pr-sadrzi p { margin: 4px 0 0; color: var(--siva); font-size: 14px; line-height: 1.5; }
.pr-okusi { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pr-okusi > div { text-align: center; padding: 10px 6px; border: 1px solid var(--crta); border-radius: 14px; background: var(--pov); }
.pr-ok-sl { width: 60px; height: 60px; margin: 0 auto 6px; border-radius: 12px; display: grid; place-items: center; font-size: 32px; overflow: hidden; }
.pr-ok-sl img { width: 100%; height: 100%; object-fit: contain; }
.pr-okusi small { display: block; font-size: 12.5px; line-height: 1.3; } .pr-okusi em { display: block; font-style: normal; font-size: 11px; color: var(--nar-jaki, var(--nar)); margin-top: 3px; }
.pr-poruka { padding: 14px 16px; border-radius: 16px; background: var(--nar-m); line-height: 1.5; }
.promo-k { display: block; }
.promo-tijelo { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 8px 0 0; color: inherit; font: inherit; cursor: pointer; }
.promo-t { flex: 1; min-width: 0; } .promo-t b { display: block; font-size: 17px; line-height: 1.25; } .promo-t small { display: block; color: var(--siva); font-size: 13px; margin-top: 2px; }
.promo-opis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--siva); font-size: 14px; line-height: 1.45; margin-top: 6px; }
.promo-t .veza { display: inline-block; margin-top: 6px; font-size: 14px; }
.promo-javi { margin-top: 14px; }
.ladica { max-height: 56vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain; }
.ladica-red { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--crta); border-radius: 14px; background: var(--pov); color: inherit; font: inherit; margin-bottom: 8px; cursor: pointer; }
.ladica-red:hover, .ladica-red:focus-visible { border-color: var(--nar-m2); }
.ladica-red b { display: block; font-size: 15px; line-height: 1.3; } .ladica-red small { display: block; color: var(--siva); font-size: 12.5px; }

/* ---------- MATERIJALI: dijeli, preuzmi, ispiši ---------- */
.mat-st { align-items: flex-start; }
.mat-akcije { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mat-akcije .cip { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; cursor: pointer; }
.mat-akcije svg { flex: none; }
.mat-slika figcaption { flex-wrap: wrap; } .mat-slika .mat-akcije { margin-top: 6px; width: 100%; }
.naslov-ekrana .ap-uredi-mat { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- ADMIN PANEL ---------- */
.admin-panel .sud-tijelo { max-width: 1100px; margin: 0 auto; padding: 18px 20px 60px; }
.ap-tabovi { margin: 0 0 18px; max-width: 640px; }
.ap-dani { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ap-dan { text-align: left; padding: 12px; border: 1px solid var(--crta); border-radius: 16px; background: var(--pov); color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 104px; }
.ap-dan small { color: var(--siva); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.ap-dan b { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.ap-dan .cip { align-self: flex-start; font-size: 11.5px; }
.ap-dan.ima { border-color: var(--nar-m2); }
.ap-forma { max-width: 720px; }
.ap-forma textarea, .admin-panel textarea, .zastor textarea { width: 100%; resize: vertical; font: inherit; }
.ap-slika { border: 1px dashed var(--crta2); border-radius: 16px; min-height: 80px; display: grid; place-items: center; overflow: hidden; }
.ap-slika img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.ap-datoteka { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ap-datoteka span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.ap-mat-lista .lista-stavka .ik { overflow: hidden; }
@media (min-width: 1100px) { .ap-mat-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } }
.promo-naslov { font: 800 20px/1.25 var(--nasl, inherit); margin: 6px 0 0; }
.promo-tekst { margin: 8px 0 4px; line-height: 1.5; white-space: pre-line; }
.dan-promo { margin-top: 16px; }
.dan-promo.promo-k { margin-bottom: 0; }
.ap-promo-dio { margin: 6px 0 16px; padding: 16px; border-radius: 18px; border: 1px solid var(--nar-m2); background: var(--nar-m); }
.ap-promo-dio .ladica-red { margin-bottom: 12px; }
.ap-dan .cip + .cip { margin-top: 2px; }
.ap-promo-dio .ladica-red small { white-space: nowrap; } .ap-promo-dio .ladica-red .cip { flex: none; }

/* ---------- DTC score: naslov gore, tijek dana, povijest 7 / 30 / 90 dana ---------- */
.dtc-spojeno .dtc-naslov { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.dtc-spojeno .dtc-tijek { display: block; margin: 0 0 6px; font-size: 11px; }
.dtc-spojeno .dr-trend { margin: 16px 0 0; padding: 14px 14px 12px; border-radius: 18px; background: var(--pov); border: 1px solid var(--crta); }
.dtc-spojeno .dr-trend-vrh { font-size: 12px; margin-bottom: 8px; } .dtc-spojeno .dr-trend-vrh b { font-size: 14px; color: var(--nar-jaki, var(--nar)); }
.dtc-spojeno .dr-stupci { height: 64px; gap: 4px; }
.dtc-spojeno .dr-stupci.r30 { grid-template-columns: repeat(30, 1fr); gap: 2px; }
.dtc-spojeno .dr-stupci.r30 span { border-radius: 2px; }
.dtc-spojeno .dr-stupci.r90 { grid-template-columns: repeat(13, 1fr); gap: 3px; }
:root[data-tema="grafit"] .dtc-spojeno .dr-stupci span.prazan { background: rgba(255,255,255,.07); }
.dtc-spojeno .an-os { margin-top: 4px; }
.dr-rasponi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; padding: 4px; border-radius: 999px; background: var(--nar-m); }
.dr-rasponi button { border: 0; background: none; color: var(--tekst); font: 700 12.5px/1 var(--font, inherit); padding: 9px 6px; border-radius: 999px; cursor: pointer; }
.dr-rasponi button[aria-checked="true"] { background: var(--gumb); color: var(--gumb-tekst); box-shadow: 0 4px 12px rgba(224,101,28,.25); }

/* ---------- Između izazova ---------- */
.pauza-k { border-color: var(--nar-m2); }
.pauza-dan { border-color: var(--nar-m2); }
.ap-vrsta { margin: 0 0 14px; max-width: 520px; }

/* ---------- NEWSLETTER (Admin panel) ---------- */
.nl-raspored { display: grid; gap: 20px; margin-top: 14px; }
.nl-stavka { padding: 14px; border-radius: 18px; border: 1px solid var(--crta); background: var(--pov); margin: 0 0 14px; }
.nl-stavka .polje { margin-bottom: 10px; }
.nl-pregled iframe { width: 100%; height: 640px; border: 1px solid var(--crta); border-radius: 18px; background: #FBF1E8; }
@media (min-width: 1100px) { .nl-raspored { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .nl-pregled { position: sticky; top: 90px; } .nl-pregled iframe { height: 78vh; } }
@media (max-width: 700px) { .admin-panel .ap-tabovi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; gap: 4px; } .admin-panel .ap-tabovi button { border-radius: 18px; } }
.admin-panel .sud-tijelo { overflow-x: hidden; }

/* ---------- Recept generator (Alati) ---------- */
.alat-gumb { display: block; width: 100%; text-align: left; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.alat-gumb .alat-vrh { pointer-events: none; }
.recepti-panel { display: flex; flex-direction: column; overflow: hidden; }
.recepti-okvir { flex: 1; width: 100%; border: 0; display: block; background: transparent; }
.alat-gumb .alat-str { transform: rotate(-90deg); }

/* =====================================================================
   MOJ DAN v2: zaglavlje u jednom redu, kartica zadatka, DTC score
   ===================================================================== */
/* --- zaglavlje --- */
.vrh .wrap { gap: 8px; }
.vrh .logo { flex: none; }
.vrh .logo img { height: 30px; }
.prekidac.prekidac-vrh { flex: 1 1 auto; min-width: 0; max-width: 300px; margin: 0 auto; padding: 0; height: 44px; border-radius: 999px; }
.prekidac-vrh button { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; padding: 3px; font: 800 12px/1 var(--font); letter-spacing: 1px; white-space: nowrap;
  background-clip: content-box !important; border-radius: 999px; }
.prekidac-vrh button > span, .prekidac-vrh button { overflow: hidden; text-overflow: ellipsis; }
.prekidac-vrh .m-kratak { display: none; }
@media (max-width: 400px) { .prekidac-vrh .m-dug { display: none; } .prekidac-vrh .m-kratak { display: inline; } .prekidac-vrh button { letter-spacing: .6px; } }
.vrh-ime, .vrh-inicijal { display: none !important; }
.vrh-desno { display: flex; align-items: center; gap: 8px; flex: none; }
.vrh-avatar, .vrh-tg { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer; position: relative; }
.vrh-avatar { border: 1px solid var(--nar-m2); background: var(--nar-m); color: var(--nar-jaki, var(--nar)); font: 800 17px/1 var(--font); }
.vrh-tg { border: 1px solid var(--nar-m2); background: var(--nar-m); color: var(--nar-jaki, var(--nar)); }
.vrh-tg svg { width: 20px; height: 20px; }
.vrh-tocka { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--nar-jaki, var(--nar)); box-shadow: 0 0 0 2px var(--pozadina, #fff); }
:root[data-tema="grafit"] .vrh-tocka { box-shadow: 0 0 0 2px #141110; }
@media (min-width: 1100px) { .prekidac.prekidac-vrh { max-width: none; } .vrh .logo img { height: 42px; } }

/* --- pozdrav --- */
#ekran[data-ekran="today"] > .naslov-ekrana { margin: 14px 0 18px; }
#ekran[data-ekran="today"] > .naslov-ekrana h1 { font-size: 28px; font-weight: 800; line-height: 1.15; margin-top: 4px; }

/* --- kartica dnevnog zadatka --- */
.prsten-kartica { display: block !important; padding: 16px !important; border-radius: 24px !important; overflow: hidden; }
.prsten-kartica .zk-glava { display: flex; gap: 16px; align-items: flex-start; }
.prsten-kartica .prsten { width: 96px; height: 96px; flex: none; }
.prsten-kartica .prsten .broj b { font: 800 26px/1 var(--font); }
.prsten-kartica .prsten .broj small { font-size: 10.5px; }
.prsten-kartica .zk-tekst { flex: 1; min-width: 0; padding-top: 2px; }
.prsten-kartica .zk-oznaka { margin: 0 0 6px !important; font: 800 12px/1.2 var(--font) !important; letter-spacing: 2px; text-transform: uppercase; color: var(--nar-jaki, var(--nar)) !important; }
.prsten-kartica .zk-tekst h3 { font-size: 19px !important; font-weight: 700 !important; line-height: 1.25; letter-spacing: -.2px; margin: 0; overflow-wrap: anywhere; }
.prsten-kartica .zk-opis { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--siva) !important; }
.zadatak-k { grid-template-areas: none !important; }
.zk-traka { display: grid; grid-template-columns: 1fr 1fr; margin: 16px -16px -16px; border-top: 1px solid var(--zk-crta); }
.zk-traka.jedan { grid-template-columns: 1fr; }
:root { --zk-crta: var(--crta); }
:root[data-tema="grafit"] { --zk-crta: rgba(255,255,255,.1); }
.zk-traka > * { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; height: 48px; padding: 0 10px; border: 0; border-radius: 0 !important;
  font: 700 15px/1.1 var(--font); text-decoration: none; cursor: pointer; background: none; box-shadow: none !important; width: auto; min-width: 0; }
.zk-traka > * > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zk-traka > * + * { border-left: 1px solid var(--zk-crta); }
.zk-traka .zk-gumb { color: var(--tekst); }
.zk-traka .zk-gumb svg { flex: none; color: var(--tekst); }
.zk-traka .zk-kv { color: var(--ok); background: var(--ok-m); }
.zk-traka .zk-kocka { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--ok); }
.zk-traka .zk-kocka svg { color: #fff; }
.zk-traka .zk-kv[aria-checked="true"] { background: var(--ok-m); }
.zk-traka .zk-kv[aria-checked="true"] .zk-kocka { background: var(--ok); }
.zadatak-k.gotovo .zk-gumb { opacity: .8; }

/* --- DTC score v2 --- */
.dtc-v2 { padding: 16px !important; border-radius: 24px !important; overflow: hidden !important; }
.dtc-v2 { --sc: var(--sc-svj); } :root[data-tema="grafit"] .dtc-v2 { --sc: var(--sc-tam); }
.dtc-vrh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dtc-oznaka { display: block; font: 800 12px/1.2 var(--font); letter-spacing: 2px; text-transform: uppercase; color: var(--siva); }
.dtc-broj-red { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.dtc-broj { font: 800 52px/1 var(--font); color: var(--sc); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.dtc-broj.prazan { color: var(--siva); }
.dtc-status { font: 800 12px/1.2 var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--sc); }
.dtc-prvi { font-size: 13px; color: var(--siva); }
.dtc-desno { text-align: right; flex: none; }
.dtc-desno small { display: block; font-size: 12px; color: var(--siva); }
.dtc-desno b { display: block; font: 800 20px/1.2 var(--font); color: var(--tekst); margin-top: 2px; }
.dtc-tijek { margin: 14px 0 0; }
.dtc-tijek .dan-traka-oznake { font-size: 11.5px; color: var(--siva); }
.dr-pilule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.dr-pil { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--crta2, var(--crta));
  background: var(--pov); color: var(--tekst); font: 700 14px/1 var(--font); cursor: pointer; min-width: 0; }
.dr-pil > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-pil-krug { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1.5px solid var(--siva); display: grid; place-items: center; }
.dr-pil.gotovo { border-color: var(--nar-m2); background: var(--nar-m); }
.dr-pil.gotovo .dr-pil-krug { border: 0; background: var(--nar-jaki, var(--nar)); color: #fff; }
.dr-pil-krug svg { width: 14px; height: 14px; stroke-width: 3; }
.dr-pil.nova .dr-pil-krug { animation: iskoci .45s cubic-bezier(.2,1.4,.4,1); }
.dtc-v2 .dr-trend { margin: 14px 0 0; }
.dtc-v2 .dr-trend[hidden] { display: none !important; }
.dr-graf-g { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% + 32px); margin: 14px -16px -16px; min-height: 44px; height: 44px;
  border: 0; border-top: 1px solid var(--zk-crta); background: none; color: var(--nar-jaki, var(--nar)); font: 700 14px/1 var(--font); cursor: pointer; }
.dr-graf-g svg { width: 18px; height: 18px; transition: transform .2s; }
.dr-graf-g[aria-expanded="true"] svg { transform: rotate(180deg); }

/* neonski rub ide IZA sadržaja (na nekim računalima maska ne radi pa bi mutni sjaj prekrio karticu) */
.link-kutija.neon::before, .link-kutija.neon::after, .sudac-kartica::before, .sudac-kartica::after, .dtc-spojeno::before, .dtc-spojeno::after { z-index: -1; }
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .link-kutija.neon::before, .link-kutija.neon::after, .sudac-kartica::before, .sudac-kartica::after, .dtc-spojeno::before, .dtc-spojeno::after { display: none; }
}
/* stupci na računalu: bez zamućenja pozadine (Chrome na Windowsu ga u stupcima krivo iscrta) */
@media (min-width: 1100px) {
  #ekran[data-ekran="today"] > *, #ekran[data-ekran="progress"] > *, #ekran[data-ekran="profile"] > *, #ekran[data-ekran="s_today"] > *, #ekran[data-ekran="support"] > * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
.dr-pil { padding: 0 6px !important; gap: 6px; letter-spacing: 0; text-transform: none; }
@media (max-width: 380px) { .dr-pilule { gap: 6px; } .dr-pil { font-size: 13.5px; } }
.odbroj-k { padding: 16px !important; border-radius: 24px !important; overflow: hidden; }
.odbroj-k .zk-glava { display: flex; gap: 16px; align-items: flex-start; }
.odbroj-k .prsten { width: 96px; height: 96px; flex: none; }
.odbroj-k .prsten .broj b { font: 800 30px/1 var(--font); }
.odbroj-k .zk-tekst { flex: 1; min-width: 0; }
.odbroj-k .zk-oznaka { margin: 0 0 6px !important; font: 800 12px/1.2 var(--font) !important; letter-spacing: 2px; color: var(--nar-jaki, var(--nar)) !important; }
.odbroj-k h3 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0; }
.odbroj-k .zk-opis { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--siva); }
.odbroj-k .zk-traka .odbroj-g { color: var(--nar-jaki, var(--nar)); background: var(--nar-m); }
.odbroj-k .zk-traka .odbroj-g svg { color: var(--nar-jaki, var(--nar)); }
.prsten-kartica[hidden] { display: none !important; }
.ap-pr-odabran { padding: 12px; border-radius: 16px; border: 1px solid var(--crta); background: var(--pov); margin: 0 0 12px; }
.ap-pr-vrh { display: flex; align-items: center; gap: 12px; }
.ap-pr-ime { flex: 1; min-width: 0; } .ap-pr-ime b { display: block; font-size: 16px; line-height: 1.3; } .ap-pr-ime small { display: block; color: var(--siva); font-size: 13px; margin-top: 2px; }
.ap-pr-gumbi { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.ap-pr-gumbi .gumb { margin: 0; min-height: 44px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; }
/* eventi: krug, tekst i gumbi uvijek u jednom redu */
.kal-ev, .kal-ev.admin { grid-template-columns: 52px minmax(0, 1fr) auto !important; grid-template-areas: "lijevo tekst gumbi" !important; column-gap: 10px; row-gap: 0; }
.kal-ev .kal-ev-datum, .kal-ev .kal-ev-prsten, .kal-ev .kal-ev-prsten svg { width: 52px; height: 52px; }
.kal-ev-tekst { min-width: 0; }
.kal-ev-tekst b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 16px; }
.kal-ev-tekst small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kal-ev-gumbi { flex-wrap: nowrap; gap: 6px; justify-self: end !important; }
.kal-ev-gumbi .kal-mali { width: 44px; height: 44px; min-width: 44px; flex: none; }
.kal-ev-gumbi .kal-prati.cip { padding: 0 14px; white-space: nowrap; }
.kal-prati.da { background: var(--ok-m); border-color: var(--ok); color: var(--ok); }
.kal-prati.da svg { width: 20px; height: 20px; stroke-width: 2.6; }

/* =====================================================================
   ACTION MODE → MOJ DAN (pozdrav · tjedan · sljedeći event · Danas · lekcija)
   ===================================================================== */
:root, :root[data-tema="zora"] { --md-dan: #2A1A12; --md-dan-tekst: #FFF3E8; --md-dan-sitno: #E9D6C9; --md-stup-prazno: rgba(255,243,232,.32); }
:root[data-tema="grafit"] { --md-dan: rgba(255,255,255,.08); --md-dan-tekst: #F6EEE8; --md-dan-sitno: #D2C3B9; --md-stup-prazno: rgba(255,255,255,.22); }
.md-akcija { display: block; }
.md-akcija > * { margin-bottom: 14px; }
.md-akcija .kartica { margin-bottom: 0; }

/* 1) pozdrav i mjesec */
.md-vrh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.md-bok { font: 800 22px/1.2 var(--font); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); }
.md-mj { flex: none; min-height: 44px; padding: 0 4px 0 10px; border: 0; background: none; font: 500 13px/1 var(--font); color: var(--siva-poz); cursor: pointer; border-radius: 12px; }
.md-mj b { color: var(--nar); font-weight: 800; }

/* 2) tjedan */
.md-tjedan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.md-dan { height: 78px; min-width: 0; border: 0; border-radius: 16px; background: var(--md-dan); color: var(--md-dan-tekst); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 8px 2px 9px; cursor: pointer; box-shadow: 0 6px 16px rgba(42,26,18,.14); outline-offset: 2px; }
.md-dan b { font: 800 12px/1 var(--font); letter-spacing: .02em; }
.md-dan small { font: 500 11px/1 var(--font); color: var(--md-dan-sitno); white-space: nowrap; }
.md-stup { height: 24px; display: flex; align-items: flex-end; margin-bottom: 3px; }
.md-stup i { display: block; width: 8px; border-radius: 4px; background: var(--md-stup-prazno); }
.md-stup i.ima { background: var(--nar-jaki); }
:root:not([data-tema="grafit"]) .md-dan:not(.danas) .md-stup i.ima { background: #FF8A3D; }
.md-dan.danas { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }
.md-dan.danas small { color: var(--gumb-tekst); }
.md-dan.danas .md-stup i { background: rgba(31,14,3,.28); }
.md-dan.danas .md-stup i.ima { background: var(--gumb-tekst); }
.md-dan[aria-pressed="true"]:not(.danas) { box-shadow: 0 0 0 3px #FF8A3D, 0 6px 16px rgba(42,26,18,.14); }

/* 3) sljedeći event */
.md-ev { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 14px 14px 14px; cursor: pointer; color: var(--tekst); font: inherit; min-height: 84px; }
.md-prsten { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.md-prsten svg { position: absolute; inset: 0; width: 56px; height: 56px; }
.md-prsten > span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.md-prsten b { font: 800 19px/1 var(--font); color: var(--tekst); }
.md-prsten b.md-danas-t { font-size: 11px; }
.md-prsten small { font: 700 8.5px/1 var(--font); letter-spacing: .04em; color: var(--siva); margin-top: 2px; }
.md-prsten.prazno { border-radius: 50%; background: var(--nar-m); color: var(--nar); }
.md-prsten.prazno svg { position: static; width: 24px; height: 24px; }
.md-ev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.md-ev-t small { font: 700 11px/1 var(--font); letter-spacing: .06em; color: var(--nar); }
.md-ev-t b { font: 700 16px/1.25 var(--font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.md-ev-t > span { font-size: 13px; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-ides { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1 var(--font); color: var(--ok); }
.md-ides svg { width: 15px; height: 15px; stroke-width: 2.6; }
.md-str { flex: none; color: var(--siva); display: grid; place-items: center; }
.md-str svg { width: 18px; height: 18px; }

/* 4) kartica Danas */
.md-danas-vrh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.md-datum { margin: 0; font: 700 12px/1.2 var(--font); letter-spacing: .07em; color: var(--nar); }
.md-gotovo { margin: 4px 0 0; font: 800 20px/1.2 var(--font); color: var(--tekst); }
.md-olovka { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--crta2); background: var(--pov); color: var(--tekst); display: grid; place-items: center; cursor: pointer; }
.md-olovka svg { width: 18px; height: 18px; }
.md-brojaci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.md-brojac { border: 1px solid var(--crta); border-radius: 18px; background: var(--pov); padding: 12px 8px 8px; min-width: 0; transition: background .15s, border-color .15s; }
.md-brojac.ima { background: var(--nar-m); border-color: var(--nar-m2); }
.md-br-ime { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 700 13px/1.2 var(--font); color: var(--tekst); min-width: 0; }
.md-br-ime svg { width: 16px; height: 16px; flex: none; color: var(--nar-jaki); }
.md-br-ime span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-br-red { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.md-br-red b { font: 800 30px/1 var(--font); color: var(--tekst); min-width: 0; text-align: center; flex: 1; font-variant-numeric: tabular-nums; }
.md-minus, .md-plus { width: 44px; height: 44px; flex: none; border-radius: 50%; font: 600 22px/1 var(--font); display: grid; place-items: center; cursor: pointer; padding: 0; }
.md-minus { border: 1.5px solid var(--crta2); background: transparent; color: var(--tekst); }
.md-minus:disabled { opacity: .45; cursor: default; }
.md-plus { border: 0; background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }
.md-kvacice { list-style: none; margin: 0; padding: 0; }
.md-kvacice li + li { border-top: 1px solid var(--crta); }
.md-kv { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; border: 0; background: none; text-align: left; font: 500 15px/1.3 var(--font); color: var(--tekst); cursor: pointer; }
.md-kv[aria-pressed="true"] span { color: var(--siva2); }
.md-kruzic { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--crta2); display: grid; place-items: center; }
.md-kv[aria-pressed="true"] .md-kruzic, .md-kruzic.on { background: var(--gumb); border-color: transparent; color: var(--gumb-tekst); }
.md-kruzic svg { width: 16px; height: 16px; stroke-width: 3; }
.md-nova { width: 100%; height: 48px; margin-top: 12px; border: 1.5px dashed var(--crta2); border-radius: 16px; background: transparent; color: var(--nar); font: 700 14px/1 var(--font); cursor: pointer; }

/* 5) lekcija dana */
.md-lek { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; text-align: left; cursor: pointer; color: var(--tekst); font: inherit; }
.md-lek-ik { width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--nar-m); color: var(--nar); display: grid; place-items: center; }
.md-lek-ik svg { width: 18px; height: 18px; }
.md-lek-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--siva); }
.md-lek-t b { color: var(--tekst); }

/* Nova aktivnost */
.md-polje label { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; }
.md-polje input { height: 50px; font-size: 16px; }
.md-vrste { display: grid; gap: 10px; margin-bottom: 14px; }
.md-vrsta { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 14px; text-align: left; border-radius: 18px; border: 1.5px solid var(--crta2); background: var(--pov); color: var(--tekst); cursor: pointer; font: inherit; }
.md-vrsta[aria-checked="true"] { border-color: var(--nar-jaki); background: var(--nar-m); box-shadow: 0 0 0 1px var(--nar-jaki) inset; }
.md-vrsta b { display: block; font: 700 15px/1.2 var(--font); }
.md-vrsta small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--siva); }
.md-vr-pr { width: 74px; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.md-vr-pr b { font: 800 17px/1 var(--font); }
.md-mini { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--crta2); display: grid; place-items: center; font: 600 14px/1 var(--font); font-style: normal; }
.md-mini.plus { border: 0; background: var(--gumb); color: var(--gumb-tekst); }

/* Uredi zadatke */
.md-ur { padding: 10px 0; border-bottom: 1px solid var(--crta); }
.md-ur input { width: 100%; min-height: 48px; border: 1.5px solid var(--crta2); background: var(--pov); border-radius: 14px; padding: 10px 12px; font-size: 16px; color: var(--tekst); }
.md-ur-dno { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.md-ur-dno .seg { flex: 1; }
.md-ur-x { width: 44px; height: 44px; }

/* desktop: Moj dan u Action modeu je jedan stupac u čitljivoj širini */
@media (min-width: 900px) {
  #ekran[data-ekran="s_today"] { display: block !important; columns: auto !important; max-width: 640px; }
  #ekran[data-ekran="s_today"] > .md-akcija > * { break-inside: avoid; }
  .md-vrh { margin-top: 18px; }
}

.md-danas { padding: 16px 14px; }
.md-br-red b { font-size: 28px; }
@media (min-width: 400px) { .md-br-red b { font-size: 30px; } .md-danas { padding: 18px; } }

/* Dugačke riječi u novim jezicima (švedski, danski, norveški, mađarski…) ne smiju širiti ekran */
.stat3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat3 small { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; letter-spacing: 1px; }
h1, h2, h3, .kartica b, .cip, .gumb, button { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Zaslon odbrojavanja do starta izazova (3 · 2 · 1 dan) */
.odbroj-zaslon { padding-top: 6px; }
.odbroj-zaslon .odbroj-veliki { width: 176px; height: 176px; margin: 0 auto; }
.odbroj-zaslon .odbroj-veliki .broj b { font-size: 64px; color: var(--nar-jaki, var(--nar)); }
.odbroj-zaslon .odbroj-veliki .broj small { font-size: 13px; font-weight: 700; letter-spacing: .12em; }
@media (prefers-reduced-motion: no-preference) { .odbroj-zaslon .odbroj-veliki svg circle:last-child { animation: odbroj-luk 1.1s cubic-bezier(.2,.8,.2,1) both; } }
@keyframes odbroj-luk { from { stroke-dashoffset: 326.7; } }

/* Admin panel → Sadržaj izazova: godina, mjesec, jezik + prikaz u izazovu */
.ap-filteri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ap-filteri .polje { margin-bottom: 10px; }
@media (max-width: 420px) { .ap-filteri { grid-template-columns: 1fr 1fr; } .ap-filteri .polje:last-child { grid-column: 1 / -1; } }
.ap-prikaz { margin: 2px 0 14px !important; padding: 14px !important; }
.ap-mj-naslov { margin: 4px 0 10px; font-size: 20px; text-transform: capitalize; }

/* Analitika: 3× tjedno na vrhu */
.an-3x { border-color: var(--nar-m2) !important; }
.an-3x-vrh { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 8px; }
.an-3x-vrh b { font: 800 44px/1 var(--font); color: var(--nar-jaki, var(--nar)); }
.an-3x-vrh b em { font-style: normal; font-size: 22px; margin-left: 2px; }
.an-3x-vrh span { font-size: 14px; color: var(--siva); line-height: 1.35; }
.an-3x-bar { height: 10px; border-radius: 99px; background: var(--nar-m); overflow: hidden; }
.an-3x-bar i { display: block; height: 100%; border-radius: inherit; background: var(--nar-jaki, var(--nar)); }

/* Fit izazov: gumbi zadatka (Piši savjetniku · Odrađeno) stoje ispod Jutro / Dan / Večer u kartici DTC score */
.zk-traka.dtc-zk { margin: 12px 0 0; border: 1px solid var(--zk-crta, var(--crta)); border-radius: 18px; overflow: hidden; background: var(--pov); }
.zk-traka.dtc-zk > * { height: 50px; min-height: 50px; }
.prsten-kartica.zadatak-k { padding-bottom: 18px; }

/* ===================== NAPREDAK → TVOJ NAPREDAK (koraci 1 · 7 · 15 · 21 + graf) ===================== */
.pn-kartica { padding: 16px !important; }
.pn-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.pn-naslov { margin: 0; font: 800 12px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--siva); }
.pn-prekidac { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--pov); border: 1px solid var(--crta); flex: none; }
.pn-prekidac button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--tekst); font: 700 14px/1 var(--font); cursor: pointer; }
.pn-prekidac button[aria-pressed="true"] { background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); }
/* koraci i graf dijele istu širinu: krug od 36px je središtem točno iznad dana na osi */
.pn-plot { padding: 0 18px; }
.pn-koraci { position: relative; height: 80px; }
.pn-traka { position: absolute; left: 0; right: 0; top: 16.5px; height: 3px; border-radius: 3px; background: var(--crta2, var(--crta)); }
.pn-traka i { display: block; height: 100%; border-radius: inherit; background: var(--nar-jaki, var(--nar)); }
.pn-korak { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; min-height: 76px;
  padding: 0; border: 0; background: none; color: var(--tekst); cursor: pointer; font-family: var(--font); -webkit-tap-highlight-color: transparent; }
.pn-korak.pn-lijevo { transform: translateX(-18px); align-items: flex-start; text-align: left; }
.pn-korak.pn-desno { transform: translateX(calc(-100% + 18px)); align-items: flex-end; text-align: right; }
.pn-krug { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; position: relative; }
.pn-krug svg { width: 18px; height: 18px; stroke-width: 2.6; }
.pn-dan { font-size: 13px; font-weight: 800; line-height: 1.15; margin-top: 2px; white-space: nowrap; }
.pn-st { font-size: 11px; line-height: 1.2; white-space: nowrap; color: var(--siva); }
.pn-upisano .pn-krug { background: var(--nar-jaki, var(--nar)); color: #1F0E05; }
.pn-upisano .pn-st, .pn-danas .pn-st { color: var(--nar-t, var(--nar)); font-weight: 700; }
.pn-danas .pn-krug { background: var(--nar-jaki, var(--nar)); color: #1F0E05; }
.pn-danas .pn-krug::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--nar-jaki, var(--nar)); opacity: 0; animation: pn-puls 1.8s ease-out infinite; }
@keyframes pn-puls { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.pn-propusteno .pn-krug { background: var(--ploca, var(--bg)); border: 2px solid var(--nar-jaki, var(--nar)); color: var(--nar-jaki, var(--nar)); }
.pn-zakljucano { cursor: default; }
.pn-zakljucano .pn-krug { background: var(--pov); border: 2px solid var(--crta2, var(--crta)); color: var(--siva); }
:root[data-tema="grafit"] .pn-zakljucano .pn-krug { background: rgba(0,0,0,.28); }
.pn-zakljucano .pn-dan { color: var(--siva); }
.pn-korak:focus-visible { outline: none; } .pn-korak:focus-visible .pn-krug { box-shadow: 0 0 0 3px var(--nar-m2); }
.pn-graf { position: relative; margin-top: 4px; }
.pn-graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.pn-prazno { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--siva); }
.pn-os { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; font-size: 12px; color: var(--siva); }
.pn-os span:nth-child(2) { color: var(--tekst); font-weight: 700; }
.pn-pregled .an-red b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pn-danas .pn-krug::after { animation: none; opacity: .5; transform: scale(1.15); } }

/* ===================== IZAZOV: traka 21 dana · današnji dan · prethodni dani ===================== */
.iz-vrh { margin-bottom: 14px; }
.iz-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iz-glava h1 { margin: 0; color: var(--tekst); }
.iz-od { color: var(--siva); font-weight: 700; }
.iz-ostalo { font-size: 13px; font-weight: 700; color: var(--siva); white-space: nowrap; }
.iz-traka { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 3px; margin: 0 0 18px; }
.iz-traka i { height: 6px; border-radius: 6px; background: rgba(120,100,90,.18); }
:root[data-tema="grafit"] .iz-traka i { background: rgba(255,255,255,.1); }
.iz-traka i.prosao { background: linear-gradient(90deg, var(--nar-jaki, var(--nar)), var(--nar)); }
.iz-traka i.danas { background: var(--nar-m2); box-shadow: inset 0 0 0 1.5px var(--nar-jaki, var(--nar)); }
.iz-danas { position: relative; border: 1.5px solid var(--nar-m2) !important; padding: 18px !important; }
:root .iz-danas { border-color: color-mix(in srgb, var(--nar-jaki, var(--nar)) 45%, transparent) !important; }
.iz-danas-glava { display: flex; align-items: flex-start; gap: 12px; }
.iz-broj { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gumb); color: var(--gumb-tekst); font: 800 18px/1 var(--font); box-shadow: var(--gumb-sjena); }
.iz-danas-tt { min-width: 0; }
.iz-danas-tt small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nar-t, var(--nar)); margin-top: 2px; }
.iz-danas-tt h2 { margin: 4px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.iz-danas-tijelo { margin-top: 8px; }
.iz-tekst { white-space: pre-line; line-height: 1.55; }
.iz-procitano { width: 100%; min-height: 48px; margin-top: 14px; text-transform: none; letter-spacing: 0; font-size: 16px; }
.iz-procitano.gotovo { background: var(--ok-m); color: var(--ok); box-shadow: none; border: 1px solid var(--ok); }
.iz-procitano svg { width: 18px; height: 18px; vertical-align: -3px; }
.iz-preth { padding: 0 !important; overflow: hidden; }
.iz-preth-g { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border: 0; background: none; color: var(--tekst); font: 600 15px/1.3 var(--font); text-align: left; cursor: pointer; }
.iz-preth-g svg, .iz-red-g > svg { width: 18px; height: 18px; flex: none; color: var(--siva); transform: rotate(-90deg); transition: transform .2s; }
.iz-preth-g[aria-expanded="true"] svg, .iz-red-g[aria-expanded="true"] > svg { transform: rotate(0deg); }
.iz-preth-lista { border-top: 1px solid var(--crta); }
.iz-red + .iz-red { border-top: 1px solid var(--crta); }
.iz-red-g { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border: 0; background: none; color: var(--tekst); text-align: left; cursor: pointer; font-family: var(--font); }
.iz-krug { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--crta2, var(--crta)); color: var(--nar-jaki, var(--nar)); }
.iz-krug.gotov { border-color: transparent; background: var(--nar-m); }
.iz-krug svg { width: 18px; height: 18px; stroke-width: 2.6; }
.iz-red-tt { flex: 1; min-width: 0; }
.iz-red-tt small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--siva); }
.iz-red-tt b { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.iz-red-tijelo { padding: 0 18px 16px 70px; }
@media (max-width: 380px) { .iz-red-tijelo { padding-left: 18px; } }
.iz-preth-g:focus-visible, .iz-red-g:focus-visible { outline: 3px solid var(--nar-m2); outline-offset: -3px; }
/* vijenac teme mjeseca ispod zaglavlja ne smije prekrivati naslov ekrana */
:root[data-mjesec] #ekran > .naslov-ekrana:first-child { padding-top: 26px; }
@media (min-width: 1100px) { :root[data-mjesec] #ekran > .naslov-ekrana:first-child { padding-top: 30px; } }

/* ---------- KICKOFF 2027 i Događaji (Materijali) ---------- */
.ko { grid-column: 1 / -1; max-width: 720px; width: 100%; }
.ko-vrh { margin: 0 4px 8px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0; }
.ko-vrh h2 { margin: 0; font-size: 19px; letter-spacing: .01em; }
.ko-vrh .mali { margin: 0; font-size: 13px; }
.ko-slider { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--sjena, 0 6px 20px rgba(0,0,0,.08)); background: #fff; }
.ko-traka { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.ko-traka::-webkit-scrollbar { display: none; }
.ko-slajd { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 16 / 9; }
.ko-slajd img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ko-str { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: #1C1A1B; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; padding: 0; }
.ko-str svg { width: 20px; height: 20px; }
.ko-str.l { left: 8px; } .ko-str.l svg { transform: rotate(180deg); }
.ko-str.d { right: 8px; }
.ko-br { position: absolute; right: 10px; bottom: 10px; background: rgba(28,26,27,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ko-tocke { display: flex; justify-content: center; gap: 6px; margin: 8px 0 10px; }
.ko-tocke i { width: 7px; height: 7px; border-radius: 99px; background: var(--crta2, #ddd); transition: width .2s, background .2s; }
.ko-tocke i.on { width: 22px; background: var(--nar, #EE712A); }
.ko-opis { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 80px); background: rgba(28,26,27,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-kupi { text-decoration: none; font-size: 17px; min-height: 56px; }
.ko-kupi svg { width: 20px; height: 20px; }
.ko-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ko-m { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; aspect-ratio: 16 / 9; min-height: 44px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ko-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ko-m span { position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; background: rgba(28,26,27,.75); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.dog { padding: 0; overflow: hidden; }
.dog-sl { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; height: auto; }
.dog-t { padding: 14px 16px 12px; }
.dog-t b { font-size: 18px; display: block; }
.dog .gumb { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); }
.dog .gumb.obrub { margin-bottom: 16px; }

.mat-h1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mat-h1 h1 { margin: 0; }
.mat-naslov .ap-uredi-mat { margin: 0; }

/* Izazov / Lekcije na širem ekranu: jedan stupac, sve poravnato (traka, današnji dan, prethodni dani) */
@media (min-width: 700px) {
  #ekran[data-ekran="challenge"] { display: block !important; max-width: 760px; margin-left: auto; margin-right: auto; }
  #ekran[data-ekran="challenge"] > * { max-width: none; }
  .iz-traka { gap: 4px; }
  .iz-traka i { height: 8px; }
}
.ko-vrh .ko-uredi { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.de-sl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--crta); }
.de-sl:first-child { border-top: 0; }
.de-sl > img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; flex: none; background: #fff; }
.de-sl-t { flex: 1; min-width: 0; display: grid; gap: 8px; }
.de-sl-t input { width: 100%; min-height: 44px; border: 1.5px solid var(--crta2); background: var(--pov); border-radius: 12px; padding: 8px 12px; font: inherit; color: var(--tekst); }
.de-sl-g { display: flex; gap: 8px; flex-wrap: wrap; }
.de-sl-g .cip { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.de-sl-g { gap: 6px; }

/* ---------- Materijali → Prezentacije ---------- */
.ko-baner { margin-bottom: 4px; }
.ko-na-dog { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pz-lista { display: grid; gap: 10px; grid-column: 1 / -1; max-width: 720px; width: 100%; }
.pz-gumb { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border-radius: 18px; border: 0; cursor: pointer; text-align: left;
  background: var(--gumb); color: var(--gumb-tekst); box-shadow: var(--gumb-sjena); font: 700 16px/1.25 var(--font); }
.pz-gumb.prazno { background: var(--pov); color: var(--tekst); box-shadow: none; border: 1.5px dashed var(--crta2); }
.pz-gumb > svg { width: 18px; height: 18px; flex: none; margin-left: auto; opacity: .8; }
.pz-ik { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.18); }
.pz-gumb.prazno .pz-ik { background: var(--istaknuto, rgba(0,0,0,.05)); color: var(--nar-t, var(--nar)); }
.pz-ik svg { width: 22px; height: 22px; }
.pz-t { min-width: 0; }
.pz-t small { display: block; font-weight: 500; font-size: 12.5px; opacity: .75; margin-top: 2px; }
#pz-uredi { grid-column: 1 / -1; max-width: 720px; }
.mat-pod { grid-column: 1 / -1; margin: 18px 4px 8px; }


/* ---------- Moj tim: Kontakti · Klijenti · Članovi ---------- */
.tim-odj .tim-o { position: relative; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 84px; cursor: pointer;
  border-radius: 20px; background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--tekst); font-family: var(--font); }
.tim-odj .tim-o[aria-selected="true"] { outline: 2px solid var(--nar-jaki, var(--nar)); outline-offset: -2px; }
.tim-zvono { position: absolute; bottom: 12px; right: 10px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 5px; border-radius: 999px; background: var(--gumb); color: var(--gumb-tekst); font: 800 11px/1 var(--font); }
.tim-zvono svg { width: 13px; height: 13px; }
.tim-zvono i { font-style: normal; }
.tim-sekcija { grid-column: 1 / -1; }
.tim-zad-t { margin: 18px 4px 8px; }
.tim-zad-k { padding-top: 4px !important; padding-bottom: 4px !important; }
.tim-zad + .tim-zad { border-top: 1px solid var(--crta); }
.tim-zad .tim-cipovi { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tim-zad .cip { min-height: 36px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.tim-svi { margin: 16px 4px 8px; }
.kt-red { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.kt-red > svg { width: 16px; height: 16px; color: var(--siva); flex: none; }
.kt-red + .kt-red { border-top: 1px solid var(--crta); }

/* svaki događaj je svoja cjelina (kartica s pozadinom) */
#mat-tijelo > .ko[data-dog]:not(.ko-baner) { background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 26px; padding: 16px 14px 18px; margin-bottom: 18px; }
#mat-tijelo > .ko[data-dog]:not(.ko-baner) .ko-vrh { margin: 2px 4px 12px; }
#mat-tijelo > .ko[data-dog]:not(.ko-baner) .ko-slider { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.tim-brojke { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 4px 14px; font-size: 13px; color: var(--siva); }
.tim-brojke b { color: var(--tekst); font-weight: 800; }
.tim-brojke .uk { margin-left: auto; }
.up-k { grid-column: 1 / -1; max-width: 720px; width: 100%; margin-top: 16px; }
.up-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-g .gumb { min-height: 48px; font-size: 14px; gap: 6px; }
.up-g .gumb svg { width: 16px; height: 16px; }
.kt-lead { font-size: 10.5px; padding: 2px 8px; min-height: 0; vertical-align: 1px; }
.kt-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kt-status .cip { min-height: 36px; }
.kt-lead-k { padding: 14px !important; }
.kt-wa { background: #25D366 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(37,211,102,.28) !important; text-decoration: none; margin: 6px 0 12px; }
/* programi i cijene: kartice, proizvodi s količinom, cijena */
.pg-k { padding: 14px 16px; margin: 0 0 10px; }
.pg-k.prep { border: 1.5px solid var(--nar, #EE712A); }
.pg-pr { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--crta2, #eee); }
.pg-pr-ime { flex: 1; min-width: 0; font-size: 14px; }
.pg-kol { display: inline-flex; align-items: center; gap: 6px; }
.pg-kol b { min-width: 16px; text-align: center; }
.pg-pr .cip { min-width: 34px; justify-content: center; padding-left: 0; padding-right: 0; }
.pg-cij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.pg-cij b { font-size: 22px; }
/* vodič po ulozi */
.vodic-sloj.iznad { z-index: 400; }
.v2-novo { list-style: none; padding: 0; margin: 14px 0 0; }
.v2-novo li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--crta2, #eee); }
.v2-novo li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--nar, #EE712A); font-weight: 800; }
.v2-novo b { display: block; } .v2-novo small { display: block; color: var(--siva); font-size: 13px; margin-top: 2px; }
/* Creator: analitika po TAB timovima */
.cr-tab { border-top: 1px solid var(--crta2, #eee); padding: 4px 0; }
.cr-tab summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; }
.cr-tab summary::-webkit-details-marker { display: none; }
.cr-tab .t { flex: 1; min-width: 0; } .cr-tab .t b, .cr-tab .t small { display: block; } .cr-tab .t small, .cr-p small { color: var(--siva); font-size: 12px; }
.cr-p { text-align: right; } .cr-p b { display: block; font-size: 18px; }
.cr-tab[open] summary { border-bottom: 1px dashed var(--crta2, #eee); margin-bottom: 4px; }
/* oblačić vodiča: puna (neprozirna) podloga i čitljiv tekst u svim temama */
.vodic-oblacic { background: var(--ploca) !important; color: var(--tekst) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important; border: 1px solid var(--crta2, rgba(0,0,0,.08)); }
.vodic-oblacic h4 { color: var(--tekst) !important; }
.vodic-oblacic p { color: var(--tekst) !important; opacity: .92; }
:root[data-tema="grafit"] .vodic-oblacic { background: #1E1917 !important; color: #fff !important; border-color: rgba(255,255,255,.16); box-shadow: 0 14px 44px rgba(0,0,0,.6); }
:root[data-tema="grafit"] .vodic-oblacic h4, :root[data-tema="grafit"] .vodic-oblacic p { color: #fff !important; }
:root[data-tema="grafit"] .vodic-oblacic .veza { color: rgba(255,255,255,.75) !important; }
/* Moj tim: desno prekidač pristupa (gore) i DTC score osobe ispod njega */
.tim-red .tim-desno { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; align-self: flex-start; margin-top: -6px; }
.tim-red .tim-desno .prekidac-g { align-self: flex-end; }
.tim-dtc { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; row-gap: 4px; min-width: 64px; justify-items: end; cursor: default; }
.tim-dtc small { font-size: 10px; letter-spacing: .08em; color: var(--siva); font-weight: 700; }
.tim-dtc b { font-size: 18px; line-height: 1; color: var(--tekst); }
.tim-dtc i { grid-column: 1 / -1; width: 64px; height: 6px; border-radius: 999px; background: var(--crta2, rgba(0,0,0,.1)); overflow: hidden; display: block; }
.tim-dtc u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E5484D, #F0A04B 55%, #3FB27F); background-size: 64px 100%; text-decoration: none; }

/* ---------- PODSJETNICI ZA VODU (Alati) — plavi naglasak umjesto narančastog ---------- */
:root { --voda: #5BB8F0; --voda-2: #8FD0F7; --voda-t: #17638F; --voda-m: rgba(91,184,240,.14); --voda-rub: rgba(91,184,240,.55); }
:root[data-tema="grafit"] { --voda-t: #8FD0F7; --voda-m: rgba(91,184,240,.16); }
.voda-k { padding: 16px 18px; }
.voda-vrh, .voda-sh-vrh { display: flex; align-items: center; gap: 14px; }
.voda-sh-vrh { padding-right: 52px; margin-top: 2px; } .voda-sh-vrh h2 { font-size: 21px; line-height: 1.2; }
.voda-ik { width: 42px; height: 42px; border-radius: 14px; background: var(--voda-m); color: var(--voda-t); display: grid; place-items: center; flex: none; }
.voda-ik svg { width: 22px; height: 22px; }
.voda-t { flex: 1; min-width: 0; } .voda-t b { display: block; font-size: 17px; } .voda-t small { display: block; color: var(--siva); font-size: 13px; margin-top: 2px; line-height: 1.4; }
.voda-t small.voda-stanje { color: var(--voda-t); font-weight: 700; }
.voda-sw[aria-checked="true"] > .klizac { background: linear-gradient(180deg, var(--voda-2), var(--voda)); }
.voda-polja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.voda-polja > div { background: var(--voda-m); border-radius: 14px; padding: 10px 10px 9px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.voda-polja small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; color: var(--siva); overflow-wrap: anywhere; hyphens: auto; }
.voda-polja b { display: block; font-size: 18px; color: var(--voda-t); margin-top: 2px; }
.voda-sazetak { margin: 0 0 8px; }
.voda-termini { display: flex; flex-wrap: wrap; gap: 6px; }
.voda-cip { font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: var(--istaknuto, rgba(0,0,0,.05)); color: var(--tekst); border: 1px solid var(--crta); }
.voda-cip.sljedeci { background: var(--voda-m); border-color: var(--voda); color: var(--voda-t); }
.voda-promijeni { margin-top: 14px; min-height: 44px; }
.voda-pit { margin: 18px 2px 8px; }
.voda-izbor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.voda-izbor button { min-height: 48px; border-radius: 14px; border: 1.5px solid var(--crta2); background: var(--kartica); color: var(--tekst); font: 700 15px/1 var(--font); padding: 0 4px; }
.voda-izbor button[aria-checked="true"] { border: 2px solid var(--voda); background: var(--voda-m); color: var(--voda-t); }
.voda-pregled { margin: 16px 0 6px; padding: 14px; border-radius: 16px; background: var(--voda-m); border: 1px solid var(--voda-rub); }
.voda-spremi { min-height: 52px; width: 100%; margin-top: 10px; }
.pods-voda-s { margin: -4px 4px 4px; } .pods-voda-s .veza { min-height: 44px; padding: 0 2px; }

/* ---------- KASNI UPIS POČETKA (prozor odozdo na Moj dan) ---------- */
.kasni-ploca { padding-top: 10px !important; transition: transform .2s ease; }
.kasni-rucica { width: 44px; height: 5px; border-radius: 99px; background: var(--crta2); margin: 0 auto 14px; }
.kasni-dan { margin: 0 0 6px; font: 800 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--nar-t, var(--nar)); }
.kasni-h { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.kasni-p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--siva); }
.kasni-redovi { margin: 0 0 16px; }
.kasni-red { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 2px; background: none; border: 0; border-top: 1px solid var(--crta); color: var(--tekst); text-align: left; }
.kasni-red > svg:last-child { width: 18px; height: 18px; color: var(--siva); flex: none; }
.kasni-ik { width: 40px; height: 40px; border-radius: 12px; background: var(--nar-m); color: var(--nar-jaki, var(--nar)); display: grid; place-items: center; flex: none; }
.kasni-ik svg { width: 21px; height: 21px; }
.kasni-t { flex: 1; min-width: 0; } .kasni-t b { display: block; font-size: 16px; } .kasni-t small { display: block; font-size: 13px; color: var(--siva); margin-top: 2px; }
.kasni-nema { font-size: 13px; font-weight: 800; color: var(--nar-t, var(--nar)); white-space: nowrap; }
.kasni-ok { width: 26px; height: 26px; border-radius: 50%; background: #2E8B57; color: #fff; display: grid; place-items: center; flex: none; }
.kasni-ok svg { width: 15px; height: 15px; stroke-width: 3; }
.kasni-gumb { min-height: 48px; width: 100%; }
.kasni-kasnije { display: block; width: 100%; min-height: 44px; margin-top: 6px; font-weight: 700; text-align: center; }

/* ---------- ISKUSTVO U 60 SEKUNDI ---------- */
.pr-kartica { display: block; width: 100%; text-align: left; color: var(--tekst); background: var(--istaknuto, rgba(232,98,26,.08)) !important; border: 1.5px solid var(--nar-m2) !important; padding: 16px 18px; margin-bottom: 14px; cursor: pointer; }
.pr-k-vrh { display: flex; justify-content: space-between; align-items: center; font: 800 11.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--nar-t, var(--nar)); }
.pr-k-s { display: inline-flex; align-items: center; gap: 4px; } .pr-k-s svg { width: 15px; height: 15px; }
.pr-k-h { display: block; font-size: 20px; font-weight: 800; margin: 8px 0 2px; }
.pr-k-s2 { display: block; font-size: 14px; color: var(--siva); }
.pr-k-st { display: block; margin-top: 10px; }
.pr-cip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 6px 10px; border-radius: 999px; line-height: 1.2; }
.pr-cip svg { width: 14px; height: 14px; flex: none; }
.pr-cip.siva { background: var(--istaknuto, rgba(0,0,0,.06)); color: var(--siva); border: 1px solid var(--crta); }
.pr-cip.ok { background: rgba(46,139,87,.14); color: #1F6B42; }
:root[data-tema="grafit"] .pr-cip.ok { color: #7BD3A0; }
.pr-cip.nar { background: var(--nar-m); color: var(--nar-t, var(--nar)); }
.pr-sloj { position: fixed; inset: 0; z-index: 320; background: var(--pozadina, #FFF7F0); background-color: var(--bg, #FFF7F0); color: var(--tekst); overflow-y: auto; overscroll-behavior: contain; }
.pr-okvir { max-width: 560px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.pr-vrh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pr-natrag { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--crta); background: var(--kartica); color: var(--tekst); display: grid; place-items: center; flex: none; }
.pr-natrag svg { width: 20px; height: 20px; transform: rotate(180deg); } .pr-natrag.pr-x svg { transform: none; }
.pr-put { font: 800 11.5px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--siva); }
.pr-h-red { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.pr-h1 { font-size: 24px; font-weight: 800; line-height: 1.15; margin: 0; }
.pr-h1 em { font-style: normal; color: var(--nar-t, var(--nar)); }
.pr-napisano { font-size: 13px; font-weight: 700; color: var(--siva); }
.pr-uvod { margin: 0 0 14px; }
.pr-korak { padding: 14px 16px; }
.pr-k-glava { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.pr-krug { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 15px/1 var(--font); background: var(--nar-m); color: var(--nar-t, var(--nar)); }
.pr-krug.gotovo { background: var(--gotovo, var(--nar)); color: #fff; } .pr-krug svg { width: 16px; height: 16px; stroke-width: 3; }
.pr-k-n { display: block; font-size: 16px; font-weight: 800; }
.pr-k-u { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--siva); }
.pr-polje { width: 100%; min-height: 56px; font: 16px/1.5 var(--font); padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--crta2); background: var(--ploca, #fff); color: var(--tekst); resize: none; overflow: hidden; box-sizing: border-box; }
.pr-polje:focus { outline: none; border-color: var(--nar); }
.pr-dno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pr-g { min-height: 48px; padding: 0 10px; font-size: 15px; } .pr-g svg { width: 18px; height: 18px; vertical-align: -3px; }
.pr-g52 { min-height: 52px; }
.pr-savjet { margin: 12px 2px 0; text-align: center; }
.pr-sat { position: relative; width: 200px; height: 200px; margin: 18px auto 10px; }
.pr-sat svg { width: 200px; height: 200px; transform: rotate(-90deg); }
.pr-sat-staza { fill: none; stroke: var(--nar-m); stroke-width: 12; }
.pr-sat-luk { fill: none; stroke: var(--nar); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.pr-sat-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pr-sat-t b { font-size: 44px; font-weight: 800; line-height: 1; } .pr-sat-t small { font-size: 13px; color: var(--siva); margin-top: 4px; }
.pr-pon { text-align: center; font-weight: 800; font-size: 16px; margin: 4px 0 8px; }
.pr-tocke { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.pr-tocke i { width: 12px; height: 12px; border-radius: 50%; background: var(--nar-m2); } .pr-tocke i.puna { background: var(--nar); }
.pr-tvoja { padding: 14px 16px; }
.pr-recenica { margin: 0 0 8px; font-size: 15px; line-height: 1.5; } .pr-recenica b { color: var(--nar-t, var(--nar)); margin-right: 4px; }
.pr-izgovoreno { margin: 8px 0 0; }
.pr-v-gumbi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .pr-v-gumbi > :only-child { grid-column: 1 / -1; }
.pr-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.pr-tri-g { min-height: 64px; border-radius: 16px; border: 1.5px solid var(--crta2); background: var(--kartica); color: var(--tekst); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 14px/1.1 var(--font); }
.pr-tri-g svg { width: 20px; height: 20px; color: var(--nar-t, var(--nar)); }
.pr-tri-g.istaknut { border: 2px solid var(--nar); background: var(--nar-m); }
.pr-povratna { padding: 16px; } .pr-povratna b { font-size: 16px; }
.pr-salje { margin: 0 0 8px; }
.pr-posalji { min-height: 52px; width: 100%; } .pr-posalji svg { width: 18px; height: 18px; vertical-align: -3px; }
.pr-odgovor { padding: 14px 16px; border-left: 4px solid var(--nar) !important; } .pr-odgovor.odobreno { border-left-color: #2E8B57 !important; }
.pr-odg-glava { display: flex; align-items: center; gap: 10px; } .pr-odg-glava b { display: block; } 
.pr-komentar { margin: 10px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.pr-provjera-k { border-color: var(--nar-m2) !important; background: var(--istaknuto) !important; }
.pr-red { width: 100%; background: none; border: 0; color: var(--tekst); min-height: 56px; }
.pr-red > svg { width: 18px; height: 18px; color: var(--siva); flex: none; }
@media (max-width: 380px) { .pr-tri-g { font-size: 13px; } .pr-g { font-size: 14px; } }
.pods-voda .kvacica.sw input:checked { background: linear-gradient(180deg, var(--voda-2), var(--voda)) !important; }
.pn-jed { font-size: 13px; font-weight: 700; color: var(--siva); }
.mj-neob { display: block; font: 600 11px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--siva); margin-top: 2px; }
/* potvrda u stilu aplikacije */
.potvrda { position: fixed; inset: 0; z-index: 500; background: rgba(20,12,8,.55); display: grid; place-items: center; padding: 16px; animation: alat-otvori .18s ease; }
.potvrda-k { width: 100%; max-width: 400px; background: var(--ploca, #FFF8F2); color: var(--tekst); border-radius: 26px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.potvrda-k h2 { font-size: 21px; margin: 0 0 8px; line-height: 1.25; }
.potvrda-k p { margin: 0 0 18px; color: var(--siva); font-size: 15px; line-height: 1.5; }
.potvrda-k .gumb { min-height: 48px; width: 100%; }

/* ---------- ZAJEDNICA (zid izazova) ---------- */
nav.dno .wrap > button:nth-last-child(n+6), nav.dno .wrap > button:nth-last-child(n+6) ~ button { font-size: 10px; letter-spacing: -.01em; }
nav.dno .wrap > button:nth-last-child(n+6) svg, nav.dno .wrap > button:nth-last-child(n+6) ~ button svg { width: 21px; height: 21px; }
.zv-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.zv-live > div { background: var(--kartica); border: var(--kartica-rub); box-shadow: var(--kartica-sjena); border-radius: 18px; padding: 10px 12px; min-width: 0; }
.zv-live b { display: block; font-size: 22px; color: var(--nar-jaki, var(--nar)); line-height: 1.1; } .zv-live small { display: block; font-size: 12px; font-weight: 700; color: var(--siva); line-height: 1.25; margin-top: 2px; }
.zv-mj, .zv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .zv-mj .cip, .zv-tabs .cip { min-height: 40px; padding: 0 14px; }
.zv-nova { padding: 14px; }
.zv-tip { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.zv-tip button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--crta2); background: var(--ploca, #fff); color: var(--tekst); font: 700 14px/1 var(--font); }
.zv-tip button[aria-checked="true"] { border-color: var(--nar); background: var(--nar-m); color: var(--nar-t, var(--nar)); }
.zv-nova textarea, .zv-kom-novi textarea { width: 100%; box-sizing: border-box; font: 16px/1.45 var(--font); padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--crta2); background: var(--ploca, #fff); color: var(--tekst); resize: none; overflow: hidden; min-height: 56px; }
.zv-nova textarea:focus, .zv-kom-novi textarea:focus { outline: none; border-color: var(--nar); }
.zv-kad { margin: 10px 0 0; }
.zv-nova-dno { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .zv-nova-dno small { color: var(--siva); font-size: 12px; }
.zv-objavi { width: auto !important; min-height: 44px; padding: 0 22px; }
.zv-pravila { margin: 10px 2px 0; }
.zv-k { padding: 14px 16px; } .zv-k.skr { opacity: .75; border-style: dashed !important; } .zv-k.zv-fokus { box-shadow: 0 0 0 3px var(--nar), var(--kartica-sjena); }
.zv-pin { border: 1.5px solid var(--nar-m2) !important; background: var(--istaknuto) !important; }
.zv-oz { margin: 0 0 8px; font: 800 11.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--nar-t, var(--nar)); }
.zv-g { display: flex; gap: 10px; align-items: center; }
.zv-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 14px/1 var(--font); background: var(--nar-m); color: var(--nar-t, var(--nar)); }
.zv-av.dtc { background: var(--gumb); color: var(--gumb-tekst, #fff); font-size: 12px; }
.zv-gt { flex: 1; min-width: 0; } .zv-gt b { display: block; font-size: 15px; line-height: 1.3; } .zv-gt small { display: block; font-size: 12.5px; color: var(--siva); }
.zv-cip, .zv-tim { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--nar-m); color: var(--nar-t, var(--nar)); margin-left: 4px; vertical-align: 1px; line-height: 1.2; }
.zv-cip.pit { background: rgba(91,184,240,.16); color: var(--voda-t, #17638F); }
.zv-tim { background: var(--istaknuto, rgba(0,0,0,.05)); color: var(--siva); border: 1px solid var(--crta); }
.zv-vise { width: 44px; height: 44px; border: 0; background: none; color: var(--siva); display: grid; place-items: center; border-radius: 50%; flex: none; margin-right: -8px; }
.zv-vise svg { width: 20px; height: 20px; }
.zv-t { margin: 10px 0; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.zv-skr { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--opasno, #B3261E); }
.zv-odg { margin: -2px 0 10px; font-size: 13px; font-weight: 700; color: #1F6B42; display: flex; align-items: center; gap: 5px; } .zv-odg svg { width: 15px; height: 15px; }
:root[data-tema="grafit"] .zv-odg { color: #7BD3A0; }
.zv-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zv-rb { min-height: 44px; min-width: 56px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--crta2); background: var(--ploca, #fff); color: var(--tekst); font: 700 14px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.zv-rb.on { border-color: var(--nar); background: var(--nar-m); }
.zv-kb { margin-left: auto; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--siva); font: 700 13.5px/1 var(--font); }
.zv-kom:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--crta); }
.zv-kom-r { margin: 0 0 8px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .zv-kom-r.skr { opacity: .55; text-decoration: line-through; } .zv-kom-r b { margin-right: 2px; }
.zv-kom-x { border: 0; background: none; color: var(--nar-t, var(--nar)); font: 700 12px/1 var(--font); padding: 0 8px; min-height: 44px; vertical-align: middle; }
.zv-kom-novi { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; } .zv-kom-novi textarea { min-height: 44px; padding: 10px 12px; }
.zv-kom-g { width: 44px !important; min-height: 44px; padding: 0; flex: none; display: grid; place-items: center; } .zv-kom-g svg { width: 18px; height: 18px; }
.zv-zak { padding: 12px 16px; }
.zv-nove { position: sticky; top: calc(76px + env(safe-area-inset-top)); z-index: 5; display: block; margin: 0 auto 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--gumb); color: var(--gumb-tekst, #fff); font: 800 14px/1 var(--font); box-shadow: var(--gumb-sjena); }

/* ---------- Lekcija dana na zaslonu Danas ---------- */
.lk-k { position: relative; border: 1.5px solid var(--nar-m2) !important; }
:root .lk-k { border-color: color-mix(in srgb, var(--nar-jaki, var(--nar)) 40%, transparent) !important; }
.lk-k.gotovo { border-color: var(--crta2, rgba(120,100,90,.18)) !important; }
.lk-glava { align-items: center; margin-bottom: 8px; }
.lk-oznaka { margin: 0 !important; }
.lk-traka { margin: 0 0 12px; }
.lk-k h3 { margin: 0; font-size: 19px; line-height: 1.25; display: flex; align-items: center; gap: 8px; }
.lk-k h3 svg { width: 20px; height: 20px; color: var(--zelena, #3a9d5d); flex: none; }
.lk-pod { margin: 6px 0 0 !important; }
.lk-video { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--nar-jaki, var(--nar)); }
.lk-zadatak { margin: 10px 0 0; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; background: var(--nar-m, rgba(240,140,90,.1)); }
.lk-k .lk-gumb { width: 100%; margin-top: 14px; }
.lk-tocka { width: 10px; height: 10px; border-radius: 50%; background: var(--nar-jaki, var(--nar)); box-shadow: 0 0 0 4px var(--nar-m2); flex: none; }
.lk-procitano { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--zelena, #3a9d5d); white-space: nowrap; }
.lk-procitano svg { width: 15px; height: 15px; }
.ploca.ploca-lekcija { max-height: 96vh; min-height: 70vh; }
.ploca-lekcija .lk-ekran .naslov-ekrana { padding-right: 48px; }
@media (min-width: 700px) { .ploca.ploca-lekcija { max-height: 92vh; } }

/* ---------- Moj dan: pozdrav ---------- */
#ekran > .naslov-ekrana.pozdrav-glava, .naslov-ekrana.pozdrav-glava { margin: 16px 0 14px; text-align: center; }
.naslov-ekrana.pozdrav-glava h1 { font-size: 28px !important; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }

/* ---------- Moj dan: kartica zadatka dana ---------- */
.kartica.zd-k { display: block; padding: 12px 14px 14px !important; border-radius: 24px; }
.zd-oznaka { display: block; margin: 0 0 10px; font: 800 11px/1.3 var(--font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--nar-jaki, var(--nar)); }
.zd-red { display: flex; gap: 10px; align-items: stretch; }
.zd-crta { width: 14px; flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.zd-tocka { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--nar-jaki, var(--nar)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nar-jaki, var(--nar)) 18%, transparent), 0 0 12px color-mix(in srgb, var(--nar-jaki, var(--nar)) 45%, transparent); }
.zd-linija { width: 2px; flex: 1; min-height: 16px; margin-top: 6px; border-radius: 2px; background: linear-gradient(180deg, var(--nar-jaki, var(--nar)), color-mix(in srgb, var(--nar-jaki, var(--nar)) 6%, transparent)); }
.zd-sadrzaj { flex: 1; min-width: 0; }
.zd-sadrzaj h3 { margin: 0; font: 800 17px/1.25 var(--font); letter-spacing: -.2px; color: var(--tekst); overflow-wrap: anywhere; }
.zd-opis { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--siva); }
.gumb.zd-gumb { display: flex; width: 100%; height: 44px; min-height: 44px; margin-top: 10px; padding: 0 14px; gap: 8px; font-size: 15px; text-transform: none; letter-spacing: 0; text-decoration: none; border-radius: 14px; }
.gumb.zd-gumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gumb.zd-gumb svg { flex: none; }
/* odrađeno: zelena točka i crta, oznaka je tipka za sažimanje */
.zd-k.zd-gotov { border: 1.5px solid color-mix(in srgb, var(--ok) 35%, transparent) !important; }
.zd-gotov .zd-tocka { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.zd-gotov .zd-linija { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 6%, transparent)); }
.zd-sazmi { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% + 28px); min-height: 44px; margin: -12px -14px 0; padding: 0 14px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ok); }
.zd-sazmi svg { transform: rotate(180deg); flex: none; }
.zd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* sažeto stanje: jedan redak */
.kartica.zd-k.zd-sazeto { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px !important; text-align: left; font: inherit; color: var(--tekst); cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--ok) 35%, transparent) !important; }
.zd-prsten { position: relative; width: 44px; height: 44px; flex: none; color: var(--ok); display: grid; place-items: center; }
.zd-prsten > svg:first-child { position: absolute; inset: 0; width: 44px; height: 44px; }
.zd-prsten > svg + svg { position: relative; stroke-width: 3; }
.zd-st { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zd-st small { font: 800 11px/1.3 var(--font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ok); }
.zd-st b { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tekst); overflow-wrap: anywhere; }
.zd-str { flex: none; color: var(--siva); display: grid; place-items: center; }

/* ---------- DTC score: broj +10 % ---------- */
.dtc-broj { font-size: 57px; }
.zd-prsten-pod { stroke: var(--crta2, rgba(120,100,90,.22)); }
.gumb.zd-gumb { font-size: 14px; }

/* kamera: jasna tipka za prednju / stražnju kameru */
.kam-vrh button.kam-okreni { width: auto; min-width: 48px; padding: 0 14px; border-radius: 24px; display: inline-flex; gap: 6px; align-items: center; font: 700 14px/1 var(--font); }
.kam-vrh button.kam-okreni svg { width: 20px; height: 20px; }

/* kamera: namještanje slike u okvir 3:4 */
.kam-pregled { display: flex; flex-direction: column; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px 0; }
.kam-uredi-t { margin: 0 0 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.kam-uredi-t b { font-size: 17px; }
.kam-uredi-t span { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.8); }
.kam-okvir { position: relative; width: min(100%, calc((100dvh - 290px) * .75)); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: #111; touch-action: none; cursor: grab; outline: 2px solid rgba(255,255,255,.85); }
.kam-pregled .kam-okvir img { position: absolute; inset: auto; left: 50%; top: 50%; max-width: none; object-fit: fill; transform-origin: center; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.kam-okvir-obris { position: absolute; inset: 4% 0 2%; width: 100%; height: 94%; fill: none; stroke: rgba(255,255,255,.6); stroke-width: .6; stroke-dasharray: 2 1.4; pointer-events: none; }
.kam-alati { display: flex; gap: 12px; margin: 12px 0 0; }
.kam-alati button { min-width: 48px; height: 48px; padding: 0 16px; border-radius: 24px; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 700 14px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; }
.kam-alati svg { width: 22px; height: 22px; }
.kam-pregled .kam-dno { position: absolute; }

/* ---------- Profilne slike (lice) i bedž statusa u Herbalifeu ---------- */
.lice { position: relative; overflow: visible; }
.lice-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.lice.ima-sliku, .avatar.ima-sliku { color: transparent !important; background: var(--pov2) !important; }
.hl-bedz { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--hl, #8A8F98); color: #fff;
  box-shadow: 0 0 0 2px var(--pov, #fff), 0 1px 3px rgba(0,0,0,.25); font: 800 9px/1 var(--font); letter-spacing: -.2px; }
img.hl-bedz { background: none; object-fit: contain; box-shadow: none; }
.hl-bedz b { font: inherit; }
.hl-bedz.hl-veliki { width: 34px; height: 34px; font-size: 10.5px; }
.hl-bedz.hl-mali { position: absolute; right: -4px; bottom: -4px; width: 44%; height: auto; aspect-ratio: 1; min-width: 15px; max-width: 26px; font-size: 6.5px; letter-spacing: -.3px; }
.hl-bedz.hl-mali b { transform: scale(.95); }
#shell.mod-izazov .vrh-avatar .hl-mali { display: none; }
.vrh-avatar.lice { overflow: visible; }
.vrh-avatar .lice-img { border-radius: 50%; }
.cip.hl-cip { background: color-mix(in srgb, #B8962E 18%, transparent); color: var(--tekst); border: 1px solid color-mix(in srgb, #B8962E 45%, transparent); }
/* profil: tipka za profilnu */
.profil-vrh .avatar.av-gumb { position: relative; border: 0; padding: 0; cursor: pointer; overflow: visible; flex: none; }
.av-gumb .av-kamera { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pov, #fff); color: var(--nar-jaki, var(--nar)); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.av-gumb .av-kamera svg { width: 15px; height: 15px; }
.pv-ime { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-ime h2 { min-width: 0; overflow-wrap: anywhere; }
/* kartica osobe: izbor statusa */
.hl-izbor { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.hl-izbor select { flex: 1; min-width: 0; min-height: 44px; }
.hl-prazno { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--crta2); color: var(--siva); flex: none; }
.hl-k .gumb { width: 100%; min-height: 44px; }
/* USPJESI feed */
.us-feed { margin: 0 0 6px; }
.kartica.us-k { padding: 14px 16px !important; }
.us-vrh { display: flex; align-items: center; gap: 12px; }
.avatar.us-av { width: 44px; height: 44px; border-radius: 50%; font-size: 16px; flex: none; }
.us-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.us-t small { font-size: 12px; color: var(--siva); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.us-t b { font-size: 16px; overflow-wrap: anywhere; }
.us-x { width: 44px; height: 44px; border: 0; background: none; color: var(--siva); display: grid; place-items: center; flex: none; cursor: pointer; }
.us-x svg { width: 18px; height: 18px; }
.us-status { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px; border-radius: 16px; background: color-mix(in srgb, #B8962E 10%, transparent); }
.us-status b { display: block; font: 800 18px/1.2 var(--font); color: var(--tekst); }
.us-status small { display: block; margin-top: 2px; font-size: 13px; color: var(--siva); }
.us-cest { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--crta2); background: var(--pov); color: var(--tekst); font: 700 14px/1 var(--font); cursor: pointer; }
.us-cest.da { border-color: var(--nar-jaki, var(--nar)); background: var(--nar-m); }
.us-cest em { font-style: normal; color: var(--siva); }
#us-vise { width: 100%; min-height: 44px; }

/* Moj tim: kartice izazova za članove */
.tim-iz-k > .clan:first-child { border-top: 0; padding-top: 0; }
.tim-iz-g { min-height: 44px; padding: 0 16px; }

/* TAB panel: statusi */
.clan.tp-red { flex-wrap: wrap; row-gap: 8px; }
.clan.tp-red > span:nth-child(2) { flex: 1 1 calc(100% - 60px) !important; }
.clan.tp-red select { flex: 1 1 100%; width: auto; max-width: calc(100% - 50px); margin-left: 50px; min-height: 44px; }

/* podsjetnik za kotizaciju: mali i miran */
.fee-pods { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 8px 6px 8px 14px; border-radius: 16px; background: var(--pov); border: 1px solid var(--crta2); color: var(--tekst); }
.fee-pods > svg { width: 18px; height: 18px; flex: none; color: var(--siva); }
.fee-pods p { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.fee-pods b { font-size: 14px; font-weight: 700; }
.fee-pods span { font-size: 12.5px; color: var(--siva); line-height: 1.35; }
.fee-x { width: 44px; height: 44px; flex: none; border: 0; background: none; color: var(--siva); display: grid; place-items: center; cursor: pointer; }
.fee-x svg { width: 16px; height: 16px; }
.fee-pods .fee-tab { flex: none; min-height: 36px; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.fee-pods { flex-wrap: wrap; } .fee-pods .fee-tab { order: 3; margin: 0 0 4px 28px; }
.fee-pods p { flex: 1 1 calc(100% - 80px); }
.fee-pods .fee-x { order: 2; }
.fee-pods { position: relative; padding-right: 46px; }
.fee-pods .fee-x { position: absolute; top: 0; right: 0; }
.fee-pods p { flex: 1 1 calc(100% - 30px); }
.sud-filteri.sud-grupe { padding-bottom: 0; }

/* USPJESI: rang liste i priznanja */
.kartica.us-rang { padding: 14px 16px !important; }
.us-rr { align-items: center; gap: 10px; }
.us-rr[hidden] { display: none !important; }
.us-med { width: 28px; flex: none; text-align: center; font-size: 22px; line-height: 1; }
.us-rb { font: 800 15px/1 var(--font); color: var(--siva); }
.us-n { font: 800 20px/1 var(--font); color: var(--nar-jaki, var(--nar)); flex: none; min-width: 28px; text-align: right; }
.us-top { width: 100%; min-height: 44px; margin-top: 10px; }
.us-k .zv-g .zv-av { width: 44px; height: 44px; }
.us-k .us-status { margin: 10px 0 12px; }
.hl-bedz.hl-pin { width: 64px; height: 64px; font-size: 13px; }