/* Edukacija — vizualni sustav CZIS-a
   Plava paleta i geometrija preuzete su s czis.hr. Plohe za čitanje su pune,
   ne staklene: tekst preko poluprozirne podloge na gradijentu gubi kontrast,
   a ovdje se čita tridesetak minuta.
   Fontovi se poslužuju lokalno — podaci polaznika ne odlaze trećoj strani. */

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

/* ---------------------------------------------------------------- tokeni */
:root{
  --bg-1:#040C18;
  --bg-2:#071528;
  --bg-3:#0B213F;
  --staklo:rgba(255,255,255,.075);
  --staklo-jako:#0B1728;
  --puno:#0A1729;
  --puno-2:#0E1E36;
  --rub:rgba(255,255,255,.12);
  --rub-jak:rgba(255,255,255,.26);
  --text:#F4F7FC;
  --tekst:#DBE4F5;
  --muted:#B7C3D8;
  --tiho:#8EA0BA;
  --accent:#2F6DFF;
  --accent-light:#7DB1FF;
  --zelena:#3FBF8F;
  --crvena:#FF6B57;
  --sjena:0 30px 90px rgba(0,0,0,.38);
  --sjena-gumb:0 10px 24px rgba(47,109,255,.32);

  --body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --util:ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Consolas,monospace;

  --r-velik:22px;
  --r-srednji:16px;
  --r-mali:14px;
  --sirina:1120px;
}

/* Svijetla inačica: ista paleta, obrnuta ploha. Naglasak je tamniji jer
   #2F6DFF na bijelom nema dovoljan kontrast za tekst. */
[data-tema="svijetlo"]{
  --bg-1:#EEF2F9;
  --bg-2:#F4F7FC;
  --bg-3:#E4ECFA;
  --staklo:rgba(255,255,255,.7);
  --staklo-jako:#FFFFFF;
  --puno:#FFFFFF;
  --puno-2:#F1F5FC;
  --rub:rgba(10,23,41,.14);
  --rub-jak:rgba(10,23,41,.30);
  --text:#0A1729;
  --tekst:#243349;
  --muted:#4C5B72;
  --tiho:#5C6C86;
  --accent:#1B4FD8;
  --accent-light:#1B4FD8;
  --zelena:#1F7A57;
  --crvena:#B03A28;
  --sjena:0 24px 60px rgba(11,33,63,.12);
  --sjena-gumb:0 10px 22px rgba(27,79,216,.24);
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;min-height:100%}
body{
  color:var(--tekst);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  background:
    radial-gradient(circle at 18% 20%, rgba(18,97,255,.22), transparent 28rem),
    radial-gradient(circle at 80% 15%, rgba(40,120,255,.10), transparent 24rem),
    linear-gradient(135deg,var(--bg-3) 0%, var(--bg-2) 42%, var(--bg-1) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
[data-tema="svijetlo"] body{
  background:
    radial-gradient(circle at 18% 20%, rgba(47,109,255,.10), transparent 28rem),
    linear-gradient(135deg,var(--bg-3) 0%, var(--bg-2) 45%, var(--bg-1) 100%);
}

/* mrežica preko podloge */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
[data-tema="svijetlo"] body::before{
  background-image:
    linear-gradient(rgba(10,23,41,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,23,41,.05) 1px, transparent 1px);
}

:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ------------------------------------------------------------------ kadar
   Modul živi u okviru, ne po cijeloj visini prozora. Na visokom zaslonu bi
   inače podnožje s navigacijom bilo daleko ispod teksta koji se čita. */
.kadar{position:relative;z-index:1;width:min(100% - 40px, 1180px);
  height:min(92vh, 900px);margin:20px auto;display:flex;flex-direction:column;
  overflow:hidden;border:1px solid var(--rub);border-radius:var(--r-velik);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));
  backdrop-filter:blur(18px);box-shadow:var(--sjena)}
[data-tema="svijetlo"] .kadar{background:rgba(255,255,255,.55)}

/* ------------------------------------------------------------- zaglavlje */
.vrh{flex:none;z-index:30}
.zaglavlje{background:var(--staklo-jako);border-bottom:1px solid var(--rub);
  backdrop-filter:blur(14px)}
.zaglavlje-unutra{max-width:var(--sirina);margin:0 auto;padding:14px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.zaglavlje-naziv{font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--text)}
.zaglavlje-org{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.zaglavlje-desno{display:flex;align-items:center;gap:14px}
.zaglavlje-zapis{font-family:var(--util);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.zaglavlje-zapis b{color:var(--text);font-weight:400}

.tema-gumb{font-family:var(--util);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid var(--rub);
  background:var(--staklo-jako);color:var(--muted);cursor:pointer}
.tema-gumb:hover{color:var(--text);border-color:var(--rub-jak)}
/* Ikone sunca i mjeseca, iste kao u Kompasu. Atribut hidden ne djeluje unutar
   SVG-a, pa se prebacuje razredom na gumbu. */
.tema-ikona{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px}
.tema-natpis{font-family:var(--util);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase}
.tema-ikona .ikona-mjesec{display:none}
.tema-ikona.svijetlo .ikona-sunce{display:none}
.tema-ikona.svijetlo .ikona-mjesec{display:inline}

/* ----------------------------------------- kralježnica tečaja (potpis) */
.traka{background:var(--staklo-jako);border-bottom:1px solid var(--rub);backdrop-filter:blur(12px)}
.traka:empty{display:none}
.traka-naslov,.traka-brojac{display:none}
.traka-vodoravna{max-width:var(--sirina);margin:0 auto;padding:10px 34px;
  display:flex;align-items:flex-end;gap:14px;overflow-x:auto}
.blok{display:flex;flex-direction:column;gap:5px;flex:none}
.blok-ime{font-family:var(--util);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:transparent;white-space:nowrap;height:11px}
.blok.tekuci .blok-ime{color:var(--accent-light)}
.segmenti{display:flex;gap:3px;align-items:flex-end}
.segment{width:15px;height:3px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.18);cursor:default}
[data-tema="svijetlo"] .segment{background:rgba(10,23,41,.16)}
.segment.vidjen{background:var(--muted);cursor:pointer}
.blok.tekuci .segment{height:5px}
.segment.tekuci{background:var(--accent);width:26px;box-shadow:0 0 0 4px rgba(47,109,255,.18)}

/* ---------------------------------------------------------------- ploha */
.ljuska{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:38px 34px 34px}
.ljuska > .ploca{max-width:var(--sirina);margin:0 auto}
.ploca{min-height:340px}
.ploca.ulazi{animation:ulaz .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ulaz{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.oznaka-bloka{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
  border-radius:999px;border:1px solid var(--rub);background:var(--staklo-jako);
  color:var(--text);font-size:11.5px;font-weight:600;margin:0 0 20px}
.oznaka-bloka::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent-light);box-shadow:0 0 0 5px rgba(125,177,255,.12);flex:none}

.ploca h1{font-size:clamp(34px,5.4vw,58px);line-height:.98;letter-spacing:-.055em;
  font-weight:800;color:var(--text);margin:0 0 18px;max-width:18ch;text-wrap:balance}
.ploca h2{font-size:clamp(26px,3.6vw,38px);line-height:1.06;letter-spacing:-.04em;
  font-weight:800;color:var(--text);margin:0 0 15px;max-width:22ch;text-wrap:balance}

.tijelo{max-width:62ch}
/* Obostrano poravnanje uz rastavljanje na slogove. Bez rastavljanja bi u
   hrvatskom, gdje su riječi duge, nastajale široke rupe između riječi. */
.tijelo p{margin:0 0 13px;font-size:16px;line-height:1.7;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.tijelo li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.situacija p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ishod p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* Kratki tekst se ne poravnava obostrano — ondje rupe najviše smetaju. */
.tijelo .napomena,.tecaj-opis{text-align:left;hyphens:manual}
.tijelo strong{color:var(--text);font-weight:600}
.tijelo code{font-family:var(--util);font-size:.9em;background:var(--puno-2);
  padding:2px 6px;border-radius:6px;color:var(--text)}
.tijelo ul,.tijelo ol{list-style:none;padding:0;margin:16px 0 0;counter-reset:t}
/* Stavka je blok, ne flex spremnik: uz flex bi svaki <strong> i tekstni čvor
   postao zaseban stupac i rečenica bi se raspala. Brojka je apsolutna. */
.tijelo li{position:relative;padding:13px 18px 13px 48px;margin-bottom:8px;
  border-radius:var(--r-mali);background:var(--puno);border:1px solid var(--rub);
  line-height:1.6;counter-increment:t}
.tijelo li::before{content:counter(t,decimal-leading-zero);position:absolute;
  left:18px;top:17px;font-family:var(--util);font-size:11px;color:var(--accent-light)}
.tijelo .napomena{color:var(--muted);font-size:14.5px}
/* Mjesto koje se popunjava podacima naručitelja. Vidljivo je i polazniku:
   ako ostane nepopunjeno, odmah se primijeti. */
.popuniti{font-style:italic;color:var(--accent-light);
  background:rgba(47,109,255,.10);border:1px dashed rgba(125,177,255,.45);
  border-radius:6px;padding:1px 7px;white-space:normal}
[data-tema="svijetlo"] .popuniti{color:var(--accent);
  background:rgba(27,79,216,.08);border-color:rgba(27,79,216,.35)}

/* ------------------------------------------------------- popis tečajeva */
.tecajevi{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;
  gap:12px;max-width:70ch}
.tecaj-red{padding:20px 22px;border-radius:var(--r-srednji);background:var(--puno);
  border:1px solid var(--rub)}
.tecaj-glava{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:6px}
.tecaj-naziv{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--text);
  margin:0;max-width:none}
.tecaj-opis{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.6}
.tecaj-noga{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;border-top:1px solid var(--rub);padding-top:14px}
.tecaj-podatak{font-family:var(--util);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------- bogatiji sadržaj slajdova */
/* Sve ovo se koristi iz polja "tijelo" u JSON-u tečaja. Slike i crteži moraju
   biti s vlastitog poslužitelja ili ugrađeni kao SVG — sigurnosna politika
   ne dopušta vanjske izvore. */
.tijelo a{color:var(--accent-light);text-decoration:none;
  border-bottom:1px solid rgba(125,177,255,.45)}
.tijelo a:hover{color:var(--text);border-bottom-color:var(--rub-jak)}

.dvostupac{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;align-items:start;max-width:none}
.dvostupac > *{min-width:0}
.dvostupac p:last-child{margin-bottom:0}

.figura{margin:0;padding:18px;border-radius:var(--r-srednji);background:var(--puno);
  border:1px solid var(--rub)}
.figura svg,.figura img{display:block;width:100%;height:auto;border-radius:8px}
.figura figcaption{margin-top:12px;font-family:var(--util);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left}

.ikone{list-style:none;padding:0;margin:16px 0 0;counter-reset:none}
.ikone li{display:flex;gap:14px;align-items:flex-start;padding:13px 18px;
  margin-bottom:8px;border-radius:var(--r-mali);background:var(--puno);
  border:1px solid var(--rub);text-align:left;hyphens:manual}
.ikone li::before{content:none}
.ikone svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent-light)}

/* Prikaz lažne poruke, za vježbe prepoznavanja */
.poruka-primjer{border-radius:var(--r-srednji);border:1px solid var(--rub);
  background:var(--puno);overflow:hidden;margin:0 0 18px}
.poruka-zaglavlje{padding:12px 16px;background:var(--puno-2);
  border-bottom:1px solid var(--rub);font-family:var(--util);font-size:11.5px;
  color:var(--muted);line-height:1.9}
.poruka-tijelo{padding:16px}
.poruka-tijelo p{text-align:left;hyphens:manual;font-size:15px}
.trag{background:rgba(255,107,87,.16);border-bottom:1px dashed var(--crvena);
  padding:0 3px;border-radius:3px}
.trag-opis{font-family:var(--util);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crvena)}

/* Blagi pokret: prekidač za smanjeno gibanje ga isključuje globalno. */
@keyframes puls{0%,100%{opacity:.25}50%{opacity:1}}
.pulsira{animation:puls 2.4s ease-in-out infinite}
@keyframes klizi{from{transform:translateX(0)}to{transform:translateX(14px)}}
.klizi{animation:klizi 1.8s ease-in-out infinite alternate}

@media (max-width:760px){
  .dvostupac{grid-template-columns:1fr;gap:18px}
}

/* -------------------------------------------------------------- pitanja */
.pitanje{margin-top:8px}
.situacija{border-radius:var(--r-srednji);border:1px solid var(--rub);
  border-left:3px solid var(--accent);background:var(--puno);
  padding:18px 22px;margin:0 0 24px;max-width:68ch}
.situacija p{margin:0;color:var(--text)}
.pitanje-tekst{font-size:22px;font-weight:800;letter-spacing:-.03em;
  color:var(--text);margin:0 0 15px;line-height:1.2}

.opcije{display:flex;flex-direction:column;gap:9px;max-width:68ch}
.opcija{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  padding:15px 18px;border-radius:var(--r-mali);background:var(--puno);
  border:1px solid var(--rub);color:var(--tekst);font:inherit;font-size:15px;
  line-height:1.5;cursor:pointer;transition:border-color .15s,background .15s}
.opcija:hover:not(:disabled){border-color:var(--rub-jak);background:var(--puno-2)}
.opcija:disabled{cursor:default}
.opcija-oznaka{font-family:var(--util);font-size:11px;color:var(--muted);
  padding-top:2px;flex:none}
.opcija.odabrana{border-color:var(--accent)}
.opcija.tocna{border-color:var(--zelena);background:rgba(63,191,143,.12)}
.opcija.tocna .opcija-oznaka{color:var(--zelena)}
.opcija.netocna{border-color:var(--crvena);background:rgba(255,107,87,.12)}
.opcija.netocna .opcija-oznaka{color:var(--crvena)}

.ishod{margin-top:18px;max-width:68ch;padding:16px 20px;border-radius:var(--r-mali);
  border:1px solid var(--rub);background:var(--puno)}
.ishod.da{border-color:rgba(63,191,143,.32);background:rgba(63,191,143,.08)}
.ishod.ne{border-color:rgba(255,107,87,.30);background:rgba(255,107,87,.08)}
.ishod-naslov{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 7px}
.ishod.da .ishod-naslov{color:var(--zelena)}
.ishod.ne .ishod-naslov{color:var(--crvena)}
.ishod p{margin:0;font-size:14.5px;line-height:1.65}

.kviz-zaglavlje{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--rub);padding-bottom:12px;margin-bottom:24px}
.kviz-korak{font-family:var(--util);font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* ------------------------------------------------------------- rezultat */
.rezultat-broj{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.05em;
  margin:0 0 6px}
.rezultat-broj.da{color:var(--zelena)}
.rezultat-broj.ne{color:var(--crvena)}
.teme{list-style:none;padding:0;margin:16px 0 0;max-width:62ch}
.tema{display:flex;gap:12px;padding:13px 18px;margin-bottom:8px;
  border-radius:var(--r-mali);background:var(--puno);border:1px solid var(--rub)}
.tema::before{content:"\2192";color:var(--accent-light);font-family:var(--util);flex:none}

.podaci{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.podatak{padding:14px 18px;border-radius:var(--r-srednji);border:1px solid var(--rub);
  background:var(--staklo);min-width:132px}
.podatak-ime{font-family:var(--util);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.podatak-vrijednost{font-size:24px;font-weight:800;letter-spacing:-.03em;
  color:var(--text);margin:0}

/* -------------------------------------------------------------- podnožje */
.podnozje{flex:none;z-index:20;background:var(--staklo-jako);
  border-top:1px solid var(--rub);backdrop-filter:blur(14px)}
.podnozje-unutra{max-width:var(--sirina);margin:0 auto;padding:12px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.podnozje-status{font-family:var(--util);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tiho)}
.izradio{display:flex;align-items:center;gap:11px;font-family:var(--util);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tiho)}
/* Znak je jednobojan i crtan s currentColor. Kroz <img> to ne djeluje, pa se
   crta maskom — tako poprima boju teksta i vidljiv je u objema temama. */
.izradio .znak{width:21px;height:27px;flex:none;background-color:currentColor;
  -webkit-mask:url("/static/ikone/czis-logo.svg") center/contain no-repeat;
  mask:url("/static/ikone/czis-logo.svg") center/contain no-repeat}
.izradio span{opacity:.9}
.radnje{display:flex;gap:10px}

.gumb{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.005em;
  padding:12px 22px;border-radius:999px;border:1px solid var(--rub);
  background:var(--staklo-jako);color:var(--text);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,filter .15s}
.gumb:hover:not(:disabled){border-color:var(--rub-jak)}
.gumb:disabled{color:var(--tiho);cursor:default;opacity:.55}
.gumb.glavni{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--sjena-gumb)}
.gumb.glavni:hover:not(:disabled){filter:brightness(1.08)}
.gumb.glavni:disabled{background:var(--puno-2);border-color:var(--rub);
  color:var(--tiho);box-shadow:none}
.gumb.sitni{padding:9px 16px;font-size:12px}

/* ------------------------------------------------- kartice i obrasci */
.usko{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:64px 22px}
.kartica{border:1px solid var(--rub);border-radius:var(--r-velik);padding:36px 34px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.045));
  backdrop-filter:blur(18px);box-shadow:var(--sjena)}
[data-tema="svijetlo"] .kartica{background:var(--puno)}
.znak-marke{display:block;width:34px;height:44px;margin:0 0 18px;
  background-color:var(--accent-light);
  -webkit-mask:url("/static/ikone/czis-logo.svg") center/contain no-repeat;
  mask:url("/static/ikone/czis-logo.svg") center/contain no-repeat}
[data-tema="svijetlo"] .znak-marke{background-color:var(--accent)}
.kartica h1{font-size:34px;font-weight:800;letter-spacing:-.045em;color:var(--text);
  margin:0 0 6px}
.kartica p{margin:0 0 18px}
.podnaslov-org{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 26px}

.polje{margin-bottom:16px}
.polje label{display:block;font-family:var(--util);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.polje input{width:100%;padding:13px 15px;border-radius:var(--r-mali);
  background:var(--puno);color:var(--text);border:1px solid var(--rub);
  font:inherit;font-size:15px}
.polje input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 4px rgba(47,109,255,.18)}
.polje input.mono,.mono{font-family:var(--util);letter-spacing:.12em}
.polje-greska{margin:7px 0 0;font-family:var(--util);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crvena)}
.polje input.nedostaje{border-color:var(--crvena)}
.polje input.nedostaje:focus{box-shadow:0 0 0 4px rgba(255,107,87,.18)}
.polje-s-gumbom{position:relative;display:block}
.polje-s-gumbom input{padding-right:52px}
.prikazi-lozinku{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;border:1px solid transparent;background:transparent;
  color:var(--muted);cursor:pointer;padding:0}
.prikazi-lozinku:hover{color:var(--text);background:var(--puno-2);border-color:var(--rub)}
/* Atribut hidden ne djeluje na elemente unutar SVG-a — oni nisu u HTML
   imenskom prostoru, pa ih zadani stil preglednika ne pokriva. Zato se
   prebacivanje radi razredom na gumbu. */
.prikazi-lozinku .oko-zatvoreno{display:none}
.prikazi-lozinku.vidljivo .oko-otvoreno{display:none}
.prikazi-lozinku.vidljivo .oko-zatvoreno{display:inline}

.poruka{padding:13px 17px;border-radius:var(--r-mali);border:1px solid var(--rub);
  border-left:3px solid var(--muted);background:var(--puno);
  font-size:14.5px;margin-bottom:18px}
.poruka.da{border-left-color:var(--zelena)}
.poruka.ne{border-left-color:var(--crvena)}
.uputa{font-size:14px;color:var(--muted)}
.razmak-dolje{margin-bottom:22px}
.izdavatelj-noga{text-align:center;margin-top:26px;font-family:var(--util);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tiho)}

/* ------------------------------------------------------- administracija */
.admin{position:relative;z-index:1;max-width:1260px;margin:0 auto;padding:30px 26px 60px}
.naslov-s-znakom{display:flex;align-items:center;gap:16px}
.znak-marke.mali{width:26px;height:33px;margin:0;flex:none}
.admin-vrh{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rub);padding-bottom:18px;margin-bottom:26px;gap:16px}
.admin h1{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--text);margin:0}
/* Alatna traka je podijeljena u skupine po namjeni: uvoz polaznika,
   poveznice i dodjela nisu ista radnja i ne smiju stajati u istom nizu. */
.alatna{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-bottom:22px}
.skupina{flex:1 1 300px;padding:14px 16px;border-radius:var(--r-srednji);
  border:1px solid var(--rub);background:var(--staklo);display:flex;
  flex-direction:column;gap:10px}
.skupina-naslov{margin:0;font-family:var(--util);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.skupina-napomena{margin:0;font-size:12.5px;color:var(--muted)}
.skupina-siroka{flex:1 1 100%}
.redak-polja{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.redak-polja > form{display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* Jedinstven izgled polja u svim trakama, uključujući repozitorij. */
.alatna select,.alatna input[type=number],.filtri select,.filtri input[type=search]{
  padding:10px 12px;border-radius:var(--r-mali);background:var(--puno);
  color:var(--text);border:1px solid var(--rub);font:inherit;font-size:13px}
.alatna select:focus,.alatna input:focus,
.filtri select:focus,.filtri input:focus{border-color:var(--accent);outline:none}
.alatna .skupina select{flex:1 1 200px;max-width:100%}
.alatna .redak-polja{width:100%}
.alatna input[type=number]{width:78px}
/* Ugrađeno polje za datoteku ima tekst koji se ne da skratiti ni prevesti,
   pa se skriva, a odabir ide preko oznake i vlastitog ispisa naziva. */
.alatna input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0)}
.odabir-datoteke{cursor:pointer}
.alatna input[type=file]:focus + .naziv-datoteke,
.alatna input[type=file]:focus-visible ~ .odabir-datoteke{outline:2px solid var(--accent)}
.naziv-datoteke{font-family:var(--util);font-size:11px;color:var(--muted);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uvoz-oznaka{font-family:var(--util);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}

table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;
  border:1px solid var(--rub);border-radius:var(--r-srednji);overflow:hidden;
  background:var(--staklo)}
th{font-family:var(--util);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  hyphens:none;
  color:var(--muted);text-align:left;padding:12px 14px;font-weight:400;
  border-bottom:1px solid var(--rub-jak)}
td{padding:13px 14px;border-bottom:1px solid var(--rub);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.04)}
[data-tema="svijetlo"] tbody tr:hover{background:rgba(10,23,41,.03)}

.znacka{font-family:var(--util);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid var(--rub);color:var(--muted);
  white-space:nowrap;display:inline-block}
.znacka.zavrseno{border-color:rgba(63,191,143,.5);color:var(--zelena)}
.znacka.u_tijeku{border-color:rgba(47,109,255,.5);color:var(--accent-light)}
.znacka.neuspjelo{border-color:rgba(255,107,87,.5);color:var(--crvena)}
.znacka.poslano{border-color:var(--rub-jak)}
.znacka.ceka{border-color:rgba(125,177,255,.55);color:var(--accent-light)}
.znacka.zatvoren{border-color:rgba(255,107,87,.5);color:var(--crvena)}

/* Ispune za točno/netočno u svijetloj inačici: prozirnost izvedena iz tamnih
   tonova na bijeloj podlozi gotovo se ne vidi, pa se zadaju zasebno. */
[data-tema="svijetlo"] .opcija.tocna{background:#E4F5EE;border-color:#1F7A57}
[data-tema="svijetlo"] .opcija.netocna{background:#FBE7E3;border-color:#B03A28}
[data-tema="svijetlo"] .ishod.da{background:#EDF8F3;border-color:#9AD4BE}
[data-tema="svijetlo"] .ishod.ne{background:#FDF0ED;border-color:#E4B0A5}
[data-tema="svijetlo"] .situacija{background:#FFFFFF}

.prazno{padding:46px 0;text-align:center;color:var(--muted);font-size:15px}

/* ------------------------------------------------- okvir s poveznicom */
.okvir-sjena{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(4,12,24,.72);
  backdrop-filter:blur(4px)}
.okvir-sjena[hidden]{display:none}
.okvir{width:min(100%,620px);border:1px solid var(--rub);border-radius:var(--r-velik);
  background:var(--carbon);padding:30px 32px;box-shadow:var(--sjena)}
.okvir-oznaka{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.okvir-naslov{font-size:26px;font-weight:800;letter-spacing:-.04em;color:var(--text);
  margin:0 0 12px}
.okvir-tekst{margin:0 0 18px;font-size:14.5px;color:var(--tekst)}
.okvir-poveznica{padding:14px 16px;border-radius:var(--r-mali);background:var(--puno);
  border:1px solid var(--rub);margin-bottom:20px}
.okvir-poveznica code{font-family:var(--util);font-size:12.5px;color:var(--accent-light);
  word-break:break-all}
.okvir-radnje{display:flex;gap:10px;justify-content:flex-end}
.okvir-tekst p{margin:0 0 12px}
.okvir-tekst p:last-child{margin-bottom:0}
.gumb.opasno{background:var(--crvena);border-color:var(--crvena);color:#fff;
  box-shadow:0 10px 24px rgba(192,82,63,.30)}
body.bez-pomicanja{overflow:hidden}

/* ------------------------------------------------------------- uređivač */
.urednik-stranica{max-width:1600px}
.urednik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start}
.urednik-kod,.urednik-pregled{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--staklo);overflow:hidden;display:flex;flex-direction:column;
  height:calc(100vh - 300px);min-height:460px}
.urednik-glava{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--rub);background:var(--puno-2)}
.urednik-nav{display:flex;align-items:center;gap:8px}
/* Isticanje trenutnog slajda mora preživjeti tipkanje, a obična selekcija
   nestaje čim se pritisne tipka. Zato ispod prozirne tekstualne plohe stoji
   sloj s istim tekstom u kojem je označen samo traženi dio. */
.kod-omot{position:relative;flex:1;min-height:0;background:var(--puno)}
/* Traka s brojevima redaka. Širina mora biti ista u sloju i u plohi za unos,
   inače se redci lome na različitim mjestima. */
.kod-omot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:52px;
  background:var(--puno-2);border-right:1px solid var(--rub);pointer-events:none}
.kod-sjena,#kod{
  position:absolute;inset:0;margin:0;padding:14px 14px 14px 64px;border:0;
  font-family:var(--util);font-size:12.5px;line-height:1.65;tab-size:2;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;
  letter-spacing:normal}
.redak{position:relative}
.redak::before{content:attr(data-broj);position:absolute;left:-52px;width:38px;
  text-align:right;color:var(--tiho);opacity:.75;
  -webkit-user-select:none;user-select:none}
.redak.greska::before{color:var(--crvena);opacity:1;font-weight:600}
.redak.greska{background:rgba(255,107,87,.07);
  box-shadow:-52px 0 0 rgba(255,107,87,.07)}
.kod-sjena{overflow:hidden;pointer-events:none;color:transparent;z-index:0}
.kod-sjena mark{background:rgba(47,109,255,.28);color:transparent;
  border-radius:3px;box-shadow:0 0 0 1px rgba(125,177,255,.45)}
.kod-sjena mark.greska{background:rgba(255,107,87,.30);
  box-shadow:0 0 0 1px rgba(255,107,87,.6)}
[data-tema="svijetlo"] .kod-sjena mark.greska{background:rgba(176,58,40,.20)}
[data-tema="svijetlo"] .kod-sjena mark{background:rgba(27,79,216,.18)}
#kod{overflow-y:auto;resize:none;background:transparent;color:var(--text);z-index:1}
#kod:focus{outline:none}
.pregled-ploha{flex:1;overflow-y:auto;padding:26px 24px;background:var(--ink)}
.pregled-ploha .ploca{min-height:0}
.pregled-ploha h1{font-size:38px}
.pregled-ploha h2{font-size:26px}
.pregled-ploha .pitanje{margin-top:26px;padding-top:20px;border-top:1px solid var(--rub)}
#greske{white-space:normal}
#greske ul{margin:8px 0 0;padding-left:20px}
#greske li{margin-bottom:4px}
#stanje.da{color:var(--zelena)}
#stanje.ne{color:var(--crvena)}

@media (max-width:1100px){
  .urednik{grid-template-columns:1fr}
  .urednik-kod,.urednik-pregled{height:auto;min-height:380px}
  #kod{min-height:340px}
}

.stupac-odabir input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* Fiksne širine stupaca: bez njih se raspored mijenja pri svakom filtriranju.
   Uz fiksni raspored sadržaj se mora smjeti lomiti, inače prelije susjedni stupac. */
table{table-layout:fixed}
td,th{overflow-wrap:break-word}
.stupac-edukacija{white-space:normal}
/* Postoci, ne pikseli: uz fiksni raspored zbroj fiksnih širina zna pojesti
   stupac kojemu je ostavljeno 'auto'. */
.stupac-odabir{width:3%}
.s-ime{width:12%}
.s-mail{width:22%}
/* Adresa u mono slovima zauzima previše prostora i lomi se u više redaka;
   uobičajeni font je uži i stane u jedan. */
.stupac-mail{font-family:var(--body);font-size:12.5px;letter-spacing:0;
  color:var(--tekst);overflow-wrap:anywhere}
.s-jedinica{width:9%}
.s-edukacija{width:16%}
.s-status{width:11%}
.s-pokusaja{width:8%}
.s-rezultat{width:8%}
.s-potvrda{width:10%}
.s-radnja{width:13%}
/* Stupac radnji: sadržaj se slaže okomito i ne izlazi iz tablice.
   Uvjet :not(:only-child) je nužan — redak praznog popisa ima jednu ćeliju
   preko svih stupaca, pa bi je flex pretvorio iz tablične ćelije u okvir i
   time poništio colspan. */
tbody tr > td:last-child:not(:only-child){display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;white-space:normal}
tbody tr > td:last-child:not(:only-child) .znacka,
tbody tr > td:last-child:not(:only-child) .gumb{max-width:100%}

.redanje{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.redanje:hover{color:var(--text)}
.redanje.aktivno{color:var(--accent-light)}
.strelica{font-size:9px;opacity:.7}
.upis-podatak{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
/* Osoba se proteže preko svih svojih edukacija; crta se povlači samo ispod
   zadnje, da retci iste osobe vizualno drže zajedno. */
tr.red-nastavak > td{border-top:0}
tr.red-prvi > td{border-top:1px solid var(--rub-jak)}
tbody tr:hover{background:transparent}
tbody tr.red-prvi:hover td,
tbody tr.red-nastavak:hover td{background:rgba(255,255,255,.03)}
[data-tema="svijetlo"] tbody tr.red-prvi:hover td,
[data-tema="svijetlo"] tbody tr.red-nastavak:hover td{background:rgba(10,23,41,.03)}
.dodjela{display:inline-flex;align-items:center;gap:6px;margin:0 6px 5px 0;
  padding:4px 6px 4px 10px;border-radius:999px;border:1px solid var(--rub);
  background:var(--puno-2);font-size:12px;color:var(--tekst)}
.dodjela-ime{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.dodjela-x{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:0 3px}
.dodjela-x:hover{color:var(--crvena)}
.filtri{gap:10px;flex-wrap:wrap;align-items:center;padding:14px 16px;
  border-radius:var(--r-srednji);border:1px solid var(--rub);background:var(--staklo);
  margin-bottom:22px}
/* Polja u traci filtara imaju istu širinu da traka ne izgleda nasumično. */
.filtri input[type=search],.filtri select{width:280px;flex:none}

/* -------------------------------------------------------------- mobilno */
@media (max-width:760px){
  body{font-size:15.5px}
  .kadar{width:100%;height:auto;min-height:100vh;margin:0;border:0;border-radius:0;
    background:none;backdrop-filter:none;box-shadow:none}
  .ljuska{overflow:visible;padding:26px 16px 120px}
  .podnozje{position:fixed;left:0;right:0;bottom:0}
  .zaglavlje-unutra{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .zaglavlje-org{width:100%;order:3}
  .traka-vodoravna{padding:9px 16px;gap:10px}
  .ljuska{padding:28px 16px 124px}
  .ploca h1{font-size:32px}
  .ploca h2{font-size:25px}
  .podnozje-unutra{padding:11px 16px}
  .podnozje-status,.izradio{display:none}
  .gumb{padding:12px 18px}
  .usko{padding:34px 16px}
  .kartica{padding:26px 20px;border-radius:var(--r-srednji)}
  .podaci{gap:10px}
  .alatna{padding:14px}
  table{font-size:13px}
}

/* ==================================================================
   Dodatne komponente sadržaja (uvedeno s tečajem `phishing`).
   Sve je isključivo CSS: tijelo slajda ulazi kroz innerHTML pa se
   <script> ne izvršava — interakcija ide kroz <details>/<summary>.
   ================================================================== */

:root{--zuta:#E8B44C}
[data-tema="svijetlo"]{--zuta:#8A6116}

/* Pločice: rešetka kartica s ikonom, naslovom i opisom. */
.plocice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  list-style:none;padding:0;margin:16px 0 0}
.plocice.tri{grid-template-columns:repeat(3,minmax(0,1fr))}
.tijelo .plocice li{padding:16px 18px;margin:0;text-align:left;hyphens:manual}
.tijelo .plocice li::before{content:none}
.plocica-ikona{display:block;font-size:20px;line-height:1;margin-bottom:10px}
.plocica-naslov{display:block;font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin-bottom:4px}
.plocice p{margin:0;font-size:14px;color:var(--muted);text-align:left;hyphens:manual}
.tijelo .plocice li.naglasak{border-color:var(--accent);
  background:linear-gradient(160deg,rgba(47,109,255,.16),var(--puno) 60%)}

/* Odjeljak s naslovom u boji: crvene zastavice i pomagala. */
.pod-naslov{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin:22px 0 4px}
.pod-naslov.crveni{color:var(--crvena)}
.pod-naslov.zuti{color:var(--zuta)}
.tijelo .zastavice li::before{content:"⚑";font-family:var(--body);font-size:13px;
  color:var(--crvena);top:14px}
.tijelo .pomagala li{padding-left:44px}
.tijelo .pomagala li::before{content:"✦";font-family:var(--body);font-size:13px;
  color:var(--zuta);top:14px}

/* Istaknuta napomena. */
.isticaj{border-radius:var(--r-mali);border:1px solid var(--rub);
  background:var(--puno);padding:15px 19px;margin:18px 0 0;max-width:68ch}
.isticaj p{margin:0;text-align:left;hyphens:manual;font-size:14.5px}
.isticaj-naslov{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 6px}
.isticaj.info{border-color:rgba(125,177,255,.4);background:rgba(47,109,255,.08)}
.isticaj.info .isticaj-naslov{color:var(--accent-light)}
.isticaj.oprez{border-color:rgba(232,180,76,.45);background:rgba(232,180,76,.07)}
.isticaj.oprez .isticaj-naslov{color:var(--zuta)}
.isticaj.uspjeh{border-color:rgba(63,191,143,.4);background:rgba(63,191,143,.07)}
.isticaj.uspjeh .isticaj-naslov{color:var(--zelena)}
[data-tema="svijetlo"] .isticaj.info{background:rgba(27,79,216,.06)}
[data-tema="svijetlo"] .isticaj.oprez{background:rgba(138,97,22,.06)}
[data-tema="svijetlo"] .isticaj.uspjeh{background:rgba(31,122,87,.06)}

/* Koraci sa slovom ili brojem u znački (SLAM, postupci). */
.tijelo .koraci li{padding-left:66px}
.tijelo .koraci li::before{content:attr(data-slovo);width:34px;height:34px;
  left:15px;top:12px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:linear-gradient(160deg,var(--accent),#1d47b8);
  color:#fff;font-family:var(--body);font-size:15px;font-weight:800;letter-spacing:0}
[data-tema="svijetlo"] .tijelo .koraci li::before{
  background:linear-gradient(160deg,var(--accent),#1638A0)}

/* Razlaganje adrese: obojeni dijelovi i legenda. */
.url-crta{font-family:var(--util);font-size:15px;line-height:2.1;
  border-radius:var(--r-mali);border:1px solid var(--rub);background:var(--puno);
  padding:14px 18px;margin:14px 0 0;overflow-wrap:anywhere;text-align:left;hyphens:manual}
.url-dio{padding:3px 2px;border-radius:5px}
.url-dio.tiho{color:var(--tiho)}
.url-dio.mamac{color:var(--crvena);background:rgba(255,107,87,.14);
  border-bottom:2px dashed var(--crvena)}
.url-dio.domena{color:#fff;background:var(--accent);font-weight:600;
  border-bottom:2px solid var(--accent-light)}
[data-tema="svijetlo"] .url-dio.domena{border-bottom-color:#1638A0}

/* Anatomija poruke: zone koje se otvaraju dodirom (details/summary). */
.anatomija{padding:0}
.anatomija .zona{border-top:1px solid var(--rub)}
.anatomija .zona:first-of-type{border-top:none}.anatomija summary{list-style:none;display:flex;gap:14px;align-items:flex-start;
  padding:13px 16px;cursor:pointer}
.anatomija summary::-webkit-details-marker{display:none}
.anatomija summary:hover{background:var(--puno-2)}
.anatomija summary:focus-visible{outline:2px solid var(--accent-light);
  outline-offset:-2px}
.anatomija .zona[open]{background:var(--puno-2);
  box-shadow:inset 3px 0 0 var(--accent)}
.anatomija .pin{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--crvena);color:#fff;font-family:var(--util);font-size:11px;
  font-weight:600;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(255,107,87,.22);margin-top:1px}
.anatomija .zona[open] .pin{background:var(--zelena);
  box-shadow:0 0 0 4px rgba(63,191,143,.22)}
.zona-sadrzaj{min-width:0;font-size:14.5px;line-height:1.6;text-align:left;
  hyphens:manual;overflow-wrap:anywhere}
.zona-sadrzaj .adresa{font-family:var(--util);font-size:12.5px;color:var(--muted)}
.tijelo .zona-objasnjenje{margin:0;padding:2px 16px 14px 54px;font-size:14px;
  line-height:1.6;color:var(--muted);text-align:left;hyphens:manual}
.zona-objasnjenje strong{color:var(--text)}

@media (max-width:760px){
  .plocice,.plocice.tri{grid-template-columns:1fr}
}

/* Slajd s vizualnim komponentama smije biti širi od proznog stupca;
   sam tekst unutar njega ostaje na čitljivoj mjeri. */
.tijelo:has(.plocice,.anatomija,.koraci){max-width:880px}
.tijelo:has(.plocice,.anatomija,.koraci) > p{max-width:62ch}
.tijelo:has(.plocice,.anatomija,.koraci) > ul.zastavice,
.tijelo:has(.plocice,.anatomija,.koraci) > ul.pomagala{max-width:70ch}

/* ==================================================================
   Sadržajne komponente koje oživljava sadrzaj.js (anatomija, url).
   Bez JavaScripta vrijedi osnovni oblik: details/summary u slijedu i
   statična legenda — ova pravila ništa od toga ne kvare.
   ================================================================== */

/* Traka prozora poruke (crta je sadrzaj.js, pa bez JS-a ni ne postoji). */
.an-traka{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:#E2E7F0;border-bottom:1px solid #D3DAE7}
.an-traka .an-tocka{width:10px;height:10px;border-radius:50%;background:#C3CBDA}
.an-traka b{margin-left:6px;font-family:var(--util);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:#5A657E;font-weight:600}

/* — inačica A: poruka lijevo, ljepljivi panel s objašnjenjem desno — */
.an-omot{margin:16px 0 0}
@media (min-width:920px){
  .an-omot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
    gap:16px;align-items:start}
  .an-omot > .anatomija{margin:0}
  .an-panel{position:sticky;top:16px}
}
.an-panel{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--puno);padding:18px;min-height:170px;margin-top:14px}
@media (min-width:920px){.an-panel{margin-top:0}}
.an-prazno{display:flex;flex-direction:column;gap:8px;color:var(--muted);
  font-size:14.5px}
.an-prazno-ruka{font-size:26px;line-height:1}
.an-panel-oznaka{font-family:var(--util);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-light);margin:0 0 8px}
.an-panel-tekst{font-size:14.5px;line-height:1.65;color:var(--muted);
  text-align:left;hyphens:manual}
.an-panel-tekst strong{color:var(--text)}
.an-panel-brojac{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin:14px 0 0;padding-top:12px;
  border-top:1px dashed var(--rub)}
.anatomija .zona.videna .pin{background:var(--zelena);
  box-shadow:0 0 0 4px rgba(63,191,143,.22)}
.anatomija .zona.aktivna summary{background:#E3EBFF;
  box-shadow:inset 3px 0 0 var(--accent)}
/* Kad panel radi, ugrađeno objašnjenje unutar zone se ne prikazuje dvaput. */
.an-omot .zona .zona-objasnjenje{display:none}

/* — inačica B: objašnjenje ispod zone; brojač u podnožju — */
.an-noga{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin:0;padding:11px 16px;border-top:1px solid var(--rub);
  background:var(--puno)}

/* — inačica C: vođeni pregled — */
.an-vodeno .zona.zatamnjena summary{opacity:.38;filter:saturate(.5)}
.an-vodeno .zona.aktivna summary{background:#E3EBFF;
  box-shadow:inset 3px 0 0 var(--accent)}
.an-vodic{display:flex;align-items:center;gap:14px;padding:11px 14px;
  border-top:1px solid var(--rub);background:var(--puno)}
.an-vodic-gumb{width:38px;height:34px;border-radius:9px;border:1px solid var(--rub);
  background:var(--staklo);color:var(--text);font-size:15px;cursor:pointer}
.an-vodic-gumb:hover:not(:disabled){border-color:var(--accent)}
.an-vodic-gumb:disabled{opacity:.35;cursor:default}
.an-vodic-polozaj{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);flex:1;text-align:center;text-transform:uppercase}

/* — razlaganje adrese: panel s objašnjenjem odabranog dijela — */
.url-dio[role="button"]{cursor:pointer}
.url-dio[role="button"]:hover{outline:1px dashed var(--rub-jak)}
.url-dio.aktivan{outline:2px solid var(--accent-light)}
.url-panel{border:1px solid var(--rub);border-top:none;
  border-radius:0 0 var(--r-mali) var(--r-mali);background:var(--puno);
  padding:13px 16px;margin:0 0 4px}
.url-crta:has(+ .url-panel){border-radius:var(--r-mali) var(--r-mali) 0 0;
  margin-bottom:0}
.url-panel-uputa{font-family:var(--util);font-size:10px;letter-spacing:.12em;
  color:var(--muted);margin:0;text-transform:uppercase}
.url-panel-tekst{font-size:14px;line-height:1.6;color:var(--muted);margin:0;
  text-align:left;hyphens:manual}
.url-panel-tekst strong{color:var(--text)}

/* Traka napretka smije klizati vodoravno kad je uska, ali bez vidljivog
   klizača — on na Windowsima stoji stalno i para sučelje na pola. */
.traka-vodoravna{scrollbar-width:none}
.traka-vodoravna::-webkit-scrollbar{display:none}

/* Anatomija poruke je uvijek svijetla, kao stvarni klijent e-pošte — u obje
   teme. Poruka je "snimka tuđeg ekrana", ne dio našeg sučelja, i upravo taj
   kontrast (svijetla poruka u tamnom sučelju) nosi vjerodostojnost primjera. */
.poruka-primjer.anatomija{background:#F3F5F9;border-color:#D3DAE7}
.anatomija .zona{border-top-color:#DCE2ED}
.anatomija summary:hover{background:#E9EEF8}
.anatomija .zona[open]{background:transparent;box-shadow:none}
.anatomija .zona.aktivna summary,
.an-vodeno .zona.aktivna summary{background:#E3EBFF;
  box-shadow:inset 3px 0 0 var(--accent)}
.anatomija .zona-sadrzaj{color:#1B2233}
.anatomija .zona-sadrzaj strong{color:#0E1526}
.anatomija .zona-sadrzaj .adresa{color:#5A657E}
/* Objašnjenje unutar svijetle poruke (inačice B i C) — tamna slova. */
.anatomija .zona-objasnjenje{color:#333C52;
  box-shadow:inset 3px 0 0 var(--accent)}
.anatomija .zona-objasnjenje strong{color:#0E1526}
/* Podnožja komponente (brojač, vodič) ostaju dio našeg sučelja — uz rub
   svijetle poruke trebaju vlastitu pozadinu, ne prozirnu. */
.an-noga,.an-vodic{background:#E9EDF4;border-top:1px solid #D3DAE7;
  color:#5A657E}
.an-vodic-polozaj{color:#5A657E}
.an-vodic-gumb{background:#fff;border-color:#C9D2E3;color:#1B2233}
.an-vodeno .zona.zatamnjena summary{opacity:.45}

/* Otkriveni dio adrese: tiha potvrda, u paru sa zelenim pinom anatomije. */
.url-dio.viden{box-shadow:inset 0 -2px 0 var(--zelena)}

/* ==================================================================
   Dorade dogovorene nakon usporedbe s izvornom HTML edukacijom.
   ================================================================== */

/* --- Modul lista klizačem preglednika, ne unutarnjim okvirom. -------
   Vrijedi samo za stranicu modula (body[data-prag]); administracija
   zadržava unutarnje klizanje. Zaglavlje s trakom napretka lijepi se
   uz vrh, podnožje s gumbima uz dno — sadržaj teče između njih. */
body[data-prag] .kadar{height:auto;min-height:calc(100vh - 40px);
  overflow:visible}   /* overflow:hidden bi odsjekao sticky zaglavlje */
body[data-prag] .zaglavlje{border-radius:var(--r-velik) var(--r-velik) 0 0}
body[data-prag] .podnozje{border-radius:0 0 var(--r-velik) var(--r-velik)}
body[data-prag] .ljuska{overflow:visible;overscroll-behavior:auto}
body[data-prag] .vrh{position:sticky;top:0}
body[data-prag] .podnozje{position:sticky;bottom:0}
@media (min-width:920px){
  /* Ljepljivi panel anatomije mora stati ispod ljepljivog zaglavlja. */
  body[data-prag] .an-panel{top:132px}
}

/* --- Uvodna definicija: plava crta uz pojam, kao u izvorniku. ------- */
.tijelo .uvod{border-left:3px solid var(--accent);padding:6px 0 6px 18px;
  margin:6px 0 20px;font-size:17px;line-height:1.65;color:var(--tekst);
  font-weight:500;max-width:68ch}
.tijelo .uvod strong{color:var(--tekst)}

/* --- Pločice: obrub oživi na prelazak, naglasak ostaje stalan. ------ */
.tijelo .plocice li{transition:border-color .18s ease, transform .18s ease}
.tijelo .plocice li:hover{border-color:var(--accent);transform:translateY(-2px)}

/* --- Usporedba dva pristupa (masovni / ciljani). -------------------- */
.usporedba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:16px 0 0}
.usporedba-strana{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--puno);padding:18px}
.usporedba-strana.opasna{border-color:rgba(255,107,87,.5)}
.usporedba-naslov{display:flex;gap:9px;align-items:center;font-weight:800;
  letter-spacing:-.02em;margin:0 0 12px;font-size:16.5px}
.usporedba-strana.opasna .usporedba-naslov{color:var(--crvena)}
.tijelo .usporedba ul{margin:0;padding:0}
.tijelo .usporedba li{padding:8px 0 8px 20px;margin:0;background:none;border:none;
  border-radius:0;box-shadow:none;border-top:1px dashed var(--rub);
  font-size:14.5px;color:var(--muted);text-align:left;hyphens:manual}
.tijelo .usporedba li:first-child{border-top:none}
.tijelo .usporedba li::before{content:"·";width:auto;height:auto;left:4px;top:8px;
  background:none;color:var(--accent-light);font-weight:800;font-size:16px}
.usporedba-strana.opasna li::before{color:var(--crvena)}
@media (max-width:760px){.usporedba{grid-template-columns:1fr}}

/* --- Anatomija: zaglavlje poruke po uzoru na Outlook. --------------- */
.an-oznaka{display:inline-block;min-width:64px;font-family:var(--util);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5A657E}
.an-predmet{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:#0E1526}
.an-posiljatelj b{color:#0E1526}
.an-posiljatelj .adresa{font-family:var(--util);font-size:12.5px;color:#5A657E}
.an-prima{display:block;margin-top:3px;font-size:12.5px;color:#5A657E}
.an-privitak{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid #C9D2E3;border-radius:8px;padding:7px 12px;
  font-family:var(--util);font-size:12.5px;color:#1B2233}
.an-poveznica{color:#1B4FD8;text-decoration:underline;font-weight:600}


/* --- Zastavice i pomagala kao objedinjeni panel (kao u izvorniku). --- */
.odjeljak{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--puno);margin:18px 0 0;overflow:hidden;max-width:72ch}
.odjeljak-naslov{margin:0;padding:12px 18px;font-family:var(--util);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--rub)}
.odjeljak.crveni .odjeljak-naslov{color:var(--crvena);background:rgba(255,107,87,.07)}
.odjeljak.zuti .odjeljak-naslov{color:var(--zuta);background:rgba(232,180,76,.06)}
.tijelo .odjeljak ul{margin:6px 0;padding:0}
.tijelo .odjeljak li{background:none;border:none;border-radius:0;box-shadow:none;
  margin:0;padding:9px 18px 9px 46px;font-size:14.5px;color:var(--muted);
  text-align:left;hyphens:manual}
.tijelo .odjeljak li + li{border-top:1px dashed var(--rub)}
.tijelo .odjeljak.crveni li::before{content:"⚑";width:auto;height:auto;left:18px;
  top:9px;background:none;color:var(--crvena);font-size:13px;font-family:var(--body)}
.tijelo .odjeljak.zuti li::before{content:"✦";width:auto;height:auto;left:18px;
  top:9px;background:none;color:var(--zuta);font-size:13px;font-family:var(--body)}

/* --- Dijelovi adrese pozivaju na dodir dok nisu otkriveni. --------- */
.url-dio[data-obj]:not(.viden){outline:1px dashed var(--rub-jak);outline-offset:2px}
.url-dio[data-obj]:not(.viden):hover{outline-color:var(--accent-light)}
.url-panel-brojac{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--rub)}