/* Mozgić — osnovni stilovi (tokeni iz DIZAJN-SISTEM.md). Tailwind dolazi kroz Vite kasnije. */
:root{
  --bg:#FFF6E9; --surface:#fff; --ink:#2B2440; --ink2:#6E6688;
  --p500:#FF7847; --p600:#E9531D; --p700:#C43F10; --p100:#FFE8DC;
  --teal:#0FA3A3; --teal7:#0B7C7C; --teal1:#DFF3F3;
  --gold:#FFC532; --gold1:#FFF3D2; --gold7:#8A5F00;
  --green:#3FA65C; --green1:#E3F4E8; --red:#E5484D; --red1:#FDEBEC;
  --shadow:0 6px 20px rgb(43 36 64 / 8%);
}
*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` mora da pobijedi naše klase. Pregledač ga nosi kao `display:none`
   iz svojih podrazumijevanih stilova, pa ga svaka naša klasa sa `display`
   (`.btn`, `.row`, `.p-screen`…) nadjača — element ostane na ekranu iako ga je
   kod sakrio. Nađeno na kartici podsjetnika: „Isključi" se vidio i dok
   podsjetnik nije bio uključen. */
[hidden]{display:none!important}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--ink);
     min-height:100dvh;font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
.container{max-width:480px;margin:0 auto;padding:20px}
.container-wide{max-width:960px;margin:0 auto;padding:20px}
h1{font-size:28px;font-weight:900;line-height:1.2}
h2{font-size:22px;font-weight:900}
.muted{color:var(--ink2);font-size:14.5px}
.card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
/* `margin-bottom` ovdje nije razmak radi ljepote nego radi sjenke: svaka
   varijanta dugmeta nosi `box-shadow:0 4px 0`, a sjenka se crta IZVAN okvira.
   Sljedeći element sa svojom pozadinom — kartica ili drugo dugme — stane tačno
   preko tog pojasa i dugmetu odsiječe donju ivicu, pa na ekranu izgleda kao da
   je dugme prepolovljeno. 12px je 4px sjenke + 8px vazduha. */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;
     border-radius:16px;font-size:17px;font-weight:900;border:none;cursor:pointer;
     font-family:inherit;text-decoration:none;transition:transform .12s ease-out,box-shadow .12s ease-out;
     touch-action:manipulation;margin-bottom:12px}
/* U redu dugmad dijele liniju i razmak im daje `gap`, pa bi margina odozdo
   samo razvukla red. Isto važi za posljednje dugme u kartici — kartica ispod
   sebe već ima svojih 14px. */
.row>.btn,.card>.btn:last-child{margin-bottom:0}
.btn-p{background:var(--p600);color:#fff;box-shadow:0 4px 0 var(--p700)}
.btn-p:active{transform:translateY(3px);box-shadow:0 1px 0 var(--p700)}
.btn-t{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal7)}
.btn-t:active{transform:translateY(3px);box-shadow:0 1px 0 var(--teal7)}
.btn-ghost{background:var(--surface);color:var(--ink);border:2px solid #E8E2F2;box-shadow:0 4px 0 #E8E2F2}
/* Google dugme je bijelo i mirno namjerno: narandžasto je u ovoj aplikaciji
   ono što korisnik zaista radi („Kreiraj profil"), a prijava tuđim nalogom je
   sporedan put do istog mjesta. Slovo ostaje Googleovo, u bojama kakve traže
   njihova pravila. */
.btn-google{background:#fff;color:var(--ink);border:2px solid #E8E2F2;box-shadow:0 4px 0 #E8E2F2;font-size:16px}
.btn-google:active{transform:translateY(3px);box-shadow:0 1px 0 #E8E2F2}
/* Vodoravna crta sa riječju u sredini: dvije linije rastu iz `flex`-a, pa
   razmak oko riječi ne zavisi od njene dužine („ili" latinicom, „или"
   ćirilicom). */
.razdvojnik{display:flex;align-items:center;gap:12px;margin:4px 0 14px;
     color:var(--ink2);font-size:13px;font-weight:800}
.razdvojnik::before,.razdvojnik::after{content:"";flex:1;height:2px;background:#EFE9F7}
.field{margin-bottom:14px}
.field label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.field input,.field select{width:100%;min-height:52px;border:2px solid #E8E2F2;border-radius:14px;
     padding:0 14px;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);background:#fff}
.field input:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal1)}
.hint{font-size:12.5px;color:var(--ink2);margin-top:5px}
.error{background:var(--red1);color:#8C2328;border-radius:12px;padding:10px 14px;
       font-weight:700;font-size:14px;margin-bottom:12px}
.success{background:var(--green1);color:#1E5C33;border-radius:12px;padding:10px 14px;
         font-weight:700;font-size:14px;margin-bottom:12px}
/* Upozorenje NIJE ocjena, pa ne smije da bude crveno: zeleno i crveno su po
   DIZAJN-SISTEM.md rezervisani za tačno/netačno. Zlatna nosi „stani i pogledaj". */
.warn{background:var(--gold1);color:var(--gold7);border-radius:12px;padding:10px 14px;
      font-weight:700;font-size:14px;margin-bottom:12px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;
      font-weight:800;font-size:12.5px}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0}
.brand{font-weight:900;font-size:19px;color:var(--p600);text-decoration:none}
.script-toggle{background:none;border:2px solid #E8E2F2;border-radius:999px;padding:7px 14px;
               font-weight:900;font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink)}
/* ===== Birač u koracima (država → program → razred) ===== */
/* Dodir, a ne padajući spisak: na telefonu se `<select>` otvara preko cijelog
   ekrana i pokaže samo tekst, pa se šest programa sa istim nazivima razreda
   nije razlikovalo. Ovdje se sve vidi odjednom, a svaki red je sam po sebi
   dovoljno velik za palac (44px je donja granica po WCAG-u). */
/* `auto-fit` a ne `flex-wrap`: kad se sakrije jedna država, njena dugmad
   ispadnu iz protoka i preostala tri programa sama podijele red na tri
   jednaka dijela. Sa `flex-wrap` bi ostao jedan gore i dva dolje. */
.birac{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
/* Znak iznad natpisa, a ne pored: „Gimnazija" pored ikone u ćeliji od trećine
   reda prelomi se na dva reda i dugme naraste preko susjednih. */
.birac-dugme{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
             min-height:64px;padding:8px 6px;border:2px solid #E8E2F2;border-radius:14px;background:#fff;
             font-family:inherit;font-size:13.5px;font-weight:800;line-height:1.2;text-align:center;
             color:var(--ink);cursor:pointer;
             touch-action:manipulation;transition:border-color .12s ease-out,background .12s ease-out}
.birac-znak{font-size:21px;line-height:1}
.birac-dugme[aria-pressed=true]{border-color:var(--p600);background:var(--p100);color:var(--p700)}
/* Razredi su brojevi, pa im mreža sa jednakim ćelijama daje red koji se čita
   odozgo nadolje kao spisak razreda, a ne kao gomila dugmadi. */
.birac-mreza{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.birac-plocica{display:flex;align-items:center;justify-content:center;min-height:50px;
               border:2px solid #E8E2F2;border-radius:14px;background:#fff;
               font-family:inherit;font-size:17px;font-weight:900;color:var(--ink);cursor:pointer;
               touch-action:manipulation;transition:border-color .12s ease-out,background .12s ease-out}
.birac-plocica[aria-pressed=true]{border-color:var(--p600);background:var(--p600);color:#fff}
/* Vrtićke grupe se ne zovu brojem nego rečenicom („Mlađa grupa (3–4 godine)"),
   pa im ćelija od jedne petine reda ne bi bila dovoljna. */
.birac-siroka{grid-column:1/-1;font-size:15px;font-weight:800;padding:0 12px;text-align:center}
.hint-jak{color:var(--p700);font-weight:800}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Lesson Player ===== */
.player-top{display:flex;align-items:center;gap:12px;padding:6px 0 14px}
.lprog{flex:1;height:14px;background:#EFE9DB;border-radius:99px;overflow:hidden}
.lprog i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),#FFB01F);
         border-radius:99px;transition:width .4s ease-out}
.mascot-bubble{font-size:40px;flex-shrink:0}
/* Sovica-narator uz oblačić: crtež umjesto emojija, blaga sjenka kao dio
   lika. Veličina prati prototip (58px) — dovoljno da ima izraz lica. */
.maskota-narator{flex-shrink:0;filter:drop-shadow(0 4px 8px rgb(43 36 64/14%))}
.bubble{background:var(--surface);border-radius:20px;padding:15px 16px;box-shadow:var(--shadow);
        position:relative;font-size:15.5px;line-height:1.6;font-weight:700;margin-bottom:16px}
.q-prompt{font-weight:900;font-size:16.5px;margin-bottom:14px}
.opt{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 16px;
     border:2px solid #E8E2F2;border-radius:16px;background:var(--surface);font-size:16.5px;
     font-weight:800;color:var(--ink);box-shadow:0 4px 0 #E8E2F2;margin-bottom:11px;cursor:pointer;
     font-family:inherit;text-align:left;transition:all .15s ease-out;touch-action:manipulation}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #E8E2F2}
.opt .key{width:30px;height:30px;border-radius:9px;background:#F4EFE4;display:flex;align-items:center;
          justify-content:center;font-size:13.5px;font-weight:900;color:var(--ink2);flex-shrink:0}
.opt.good{border-color:var(--green);background:var(--green1);box-shadow:0 4px 0 var(--green);animation:pop .25s ease-out}
.opt.good .key{background:var(--green);color:#fff}
.opt.bad{border-color:var(--red);background:var(--red1);box-shadow:0 4px 0 var(--red);animation:shake .3s ease-out}
/* „Više tačnih": izabrano ≠ tačno. Zelena/crvena su rezervisane za ocjenu
   servera, pa izbor prije provjere nosi teal — isto stanje kao .tile.active,
   da dijete ne pomisli da je već pogodilo. Kvačica jer boja sama nije dovoljna.

   `:not(.good):not(.bad)` je obavezno, ne ukras. Plejer na provjeru DODAJE
   `good`/`bad`, a `sel` ostaje na dugmetu; kako `.opt.sel` i `.opt.good` nose
   istu specifičnost (0,2,0), pobjeđivao je onaj koji je niže u fajlu — `sel`.
   Izmjereno na 390×844 u bloku „Više tačnih": i `opt sel bad` i `opt sel good`
   su davali istu sliku kao goli `opt sel` — ivica #0FA3A3, pozadina #DFF3F3,
   kvačica u teal kvadratiću. Zelena (#3FA65C) i crvena (#E5484D) nikad nisu
   stizale do ekrana: dijete koje pogriješi ne vidi crveno na svojim izborima,
   a dijete koje pogodi ne vidi zeleno — jedina razlika je tekst objašnjenja. */
.opt.sel:not(.good):not(.bad){border-color:var(--teal);background:var(--teal1);color:var(--teal7);box-shadow:0 4px 0 var(--teal)}
.opt.sel:not(.good):not(.bad) .key{background:var(--teal);color:#fff;font-size:0}
.opt.sel:not(.good):not(.bad) .key::after{content:'✓';font-size:15px}
.btn:disabled{opacity:.45;box-shadow:none;transform:none;cursor:default}
.explain{border-radius:16px;padding:13px 15px;font-size:14px;font-weight:700;line-height:1.55;margin-top:6px}
.explain.g{background:var(--green1);color:#1E5C33}
.explain.r{background:var(--red1);color:#8C2328}
.explain.show{animation:rise .3s ease-out}
.xp-toast{position:absolute;right:14px;top:8px;font-weight:900;color:#7A5800;background:var(--gold);
          padding:4px 12px;border-radius:99px;font-size:14px;animation:floatUp 1s ease-out forwards;
          pointer-events:none;z-index:9}
.blank{display:inline-flex;min-width:86px;min-height:34px;border-bottom:3px dashed #B9AFD1;
       align-items:center;justify-content:center;font-weight:900;color:var(--teal7);padding:0 8px}
.blank.f{border-bottom-color:var(--teal);background:var(--teal1);border-radius:10px}
.tiles{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.tile{padding:10px 18px;border-radius:14px;background:var(--surface);border:2px solid #E8E2F2;
      box-shadow:0 3px 0 #E8E2F2;font-weight:900;font-size:15.5px;min-height:46px;cursor:pointer;
      font-family:inherit;color:var(--ink);transition:all .15s ease-out;touch-action:manipulation}
.tile:active{transform:translateY(2px)}
.tile.active{border-color:var(--teal);background:var(--teal1);color:var(--teal7)}
.tile.used{opacity:.35;pointer-events:none}
.order-row{display:flex;gap:7px;flex-wrap:wrap;min-height:36px;margin-top:10px}
.order-chip{background:var(--teal1);color:var(--teal7);border-radius:999px;padding:6px 12px;
            font-weight:800;font-size:13px}
.pairs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pairs-col{display:flex;flex-direction:column;gap:9px}
.pairs-col .tile{width:100%;text-align:center}
.targets-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.target-box{border:2px dashed #B9AFD1;border-radius:16px;padding:12px;min-height:92px;
            display:flex;flex-direction:column;gap:7px;align-items:center;cursor:pointer}
.num-input{flex:1;min-height:52px;border:2px solid #E8E2F2;border-radius:14px;padding:0 14px;
           font-family:inherit;font-size:18px;font-weight:900;color:var(--ink);text-align:center}
.num-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal1)}
.conf{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:99}
.finish-card{text-align:center;padding:28px 20px}

/* ===== Kvest staza (mapa) ===== */
.qnode{display:flex;align-items:center;gap:14px;position:relative;padding:10px 4px}
.qnode .knob{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
             flex-shrink:0;position:relative;z-index:2;font-size:20px;text-decoration:none}
.qnode.done .knob{background:var(--gold);box-shadow:0 4px 0 #B8860B}
.qnode.current .knob{background:var(--p600);box-shadow:0 4px 0 var(--p700),0 0 0 7px var(--p100)}
.qnode.locked .knob{background:#E8E2F2;box-shadow:0 4px 0 #CFC6E0}
.qline{position:absolute;left:31px;top:56px;bottom:-12px;width:6px;border-radius:99px;background:#E8E2F2;z-index:1}
.qnode.done .qline{background:var(--gold)}
.qnode h4{font-weight:900;font-size:15px;margin:0}
.qnode .qmeta{font-size:12.5px;color:var(--ink2);font-weight:700}
.qnode.locked h4{color:#A49BC0}
.mlevel{display:inline-flex;gap:3px;vertical-align:middle}
.mlevel i{width:12px;height:12px;border-radius:4px;background:#EBE4F4}
.mlevel i.f{background:var(--gold)}
/* Blokovi „Slikovna priča" i „Dodirni sliku" pišu se za vrtić, ali se
   otvore i ovdje — kad admin pregleda lekciju ili kad je stariji brat
   pokrene sa svog profila. Bez ovih pravila `.pick` bi bio golo dugme,
   pa slika ne bi ni bila vidljiva. Prava vrtićka mjera (108 px+) je u
   public/css/preschool.css; ovo je isti sadržaj u odraslom rasporedu. */
.scene{font-size:56px;line-height:1.2;letter-spacing:4px;text-align:center;margin-bottom:12px}
.pick-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}
.pick{width:104px;min-height:104px;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:4px;padding:10px 6px;border:3px solid #E8E2F2;border-radius:20px;
      background:var(--surface);box-shadow:0 4px 0 #E8E2F2;font-family:inherit;cursor:pointer;
      transition:all .15s ease-out;touch-action:manipulation}
.pick:active{transform:translateY(3px);box-shadow:0 1px 0 #E8E2F2}
.pick-emoji{font-size:44px;line-height:1}
.pick-word{font-size:13px;font-weight:800;color:var(--ink2)}
.pick.good{border-color:var(--green);background:var(--green1);box-shadow:0 4px 0 var(--green);
           animation:pop .25s ease-out}
/* Pogrešan dodir se ne boji crvenim ni ovdje: pravilo „greška ništa ne
   oduzima" pripada bloku, ne ekranu na kom se blok zatekne. */
.pick.wobble{animation:wobble .5s ease-out}
@keyframes wobble{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}
                  30%{transform:translateX(7px)}45%{transform:translateX(-5px)}
                  60%{transform:translateX(5px)}80%{transform:translateX(-2px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes floatUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-46px);opacity:0}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.rise{animation:rise .3s ease-out both}

/* ===== Zadavanje testa: dva koraka (parent/test-subject, parent/test-create) =====
   Ranije je ovo bila jedna lista od 82 pitanja u 70 kartica — 11.984px na
   telefonu širine 390px, s dugmetom „Zadaj test" na 11.910px od vrha. Odatle
   sve što slijedi: sklopljene oblasti, ljepljiva traka s dugmetom i brojačem,
   i traka koraka koja kaže gdje se roditelj nalazi. */

/* Traka koraka. Broj koraka je stanje, pa ga nosi boja; predmet je identitet,
   pa njega nosi znak (Subject::emoji()) — DIZAJN-SISTEM.md, „boja = stanje". */
.step-line{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.step{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
      font-weight:900;font-size:13px;background:#E8E2F2;color:#8B82A8;flex-shrink:0}
.step.is-now{background:var(--p600);color:#fff}
.step.is-done{background:var(--teal);color:#fff}
.step-line i{width:22px;height:4px;border-radius:99px;background:#E8E2F2;flex-shrink:0}
.step-line i.is-done{background:var(--teal)}

/* Znak predmeta: 48px kvadrat u vrlo blijedoj boji predmeta. */
.subj-chip{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
           font-size:22px;flex-shrink:0}

/* Kartica koja je veza. `min-height:72px` je iznad 44px iz dizajn-sistema, jer
   cijela kartica jeste dodirna meta — ne samo naziv u njoj.

   NE zove se `.pick`: pod tim imenom već stoji vrtićka pločica igre (gore,
   ~198. red) — kvadrat 104px, uspravan raspored. Kad je birač predmeta nosio
   `.pick`, pločica igre ga je pretvarala u uski uspravni stubac umjesto u
   široku traku. Zato ovdje `.pick-card`. */
.pick-card{transition:transform .12s ease-out,box-shadow .12s ease-out}
.pick-card:active{transform:translateY(2px);box-shadow:0 2px 10px rgb(43 36 64 / 10%)}

/* Preklopnik načina: nasumično / ručno. Segmentirana kontrola — jastuk boje
   ispod aktivnog jezička, ostalo prozirno. Meta dodira je cijela širina/2. */
.mode-switch{display:flex;gap:4px;background:#F1ECE1;border-radius:14px;padding:4px;margin-bottom:14px}
.mode-tab{flex:1;min-height:44px;border:none;border-radius:11px;background:transparent;
          font-family:inherit;font-weight:800;font-size:14px;color:var(--ink2);cursor:pointer;
          transition:background .15s ease-out,color .15s ease-out}
.mode-tab.is-active{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgb(43 36 64 / 10%)}

/* Red oblasti u nasumičnom načinu — ista dodirna mjera kao red pitanja. */
.area-row{padding:11px 0;border-bottom:1px solid #F1ECE1;cursor:pointer;min-height:44px}
.area-row:last-child{border-bottom:none}

/* Plus/minus uz broj pitanja. Kvadrat 44px, isti jezik kao ostatak. */
.stepper{width:44px;height:44px;flex-shrink:0;border:2px solid #E8E2F2;border-radius:12px;
         background:#fff;font-family:inherit;font-weight:900;font-size:20px;color:var(--ink);
         cursor:pointer;line-height:1}
.stepper:active{transform:translateY(2px)}

/* Oblast (vještina) kao sklopiva grupa. */
.skill-group summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
                     min-height:44px;padding:2px 0}
.skill-group summary::-webkit-details-marker{display:none}
.skill-group summary::after{content:'▾';margin-left:auto;font-weight:900;color:var(--ink2);
                            transition:transform .15s ease-out}
.skill-group[open] summary::after{transform:rotate(180deg)}
.skill-group summary strong{flex:1}

/* Red s pitanjem. Ispod 44px se ne smije spustiti ni kad je pitanje kratko. */
.qrow{padding:11px 0;border-bottom:1px solid #F1ECE1;cursor:pointer;align-items:flex-start;min-height:44px}
.qrow:last-child{border-bottom:none}
.qrow input:disabled + span{opacity:.45}

/* Mala pomoćna dugmad („Izaberi sve" / „Očisti"). */
.mini{background:#fff;border:2px solid #E8E2F2;border-radius:999px;padding:8px 14px;min-height:40px;
      font-family:inherit;font-weight:800;font-size:13px;color:var(--ink);cursor:pointer}
.mini:active{transform:translateY(2px)}

/* Ljepljiva traka: dugme i brojač su uvijek na ekranu, pa se do njih ne skroluje.
   `env(safe-area-inset-bottom)` je zbog trake za gestove na iPhoneu.

   Puna pozadina, a ne blijeđenje. Traka je ranije imala prelaz koji postaje
   neproziran tek na trećini visine, pa je brojač izabranih stajao u providnom
   dijelu: preko istog reda čitalo se i „Nijedno pitanje nije izabrano" i tekst
   pitanja koje se zateklo ispod. Kraći prelaz to ne rješava — samo pomjeri
   duh teksta uz ivicu brojača. Sjenka odozgo kaže isto što je prelaz htio da
   kaže (sadržaj prolazi ispod), a ništa ne pušta kroz sebe. */
.sticky-bar{position:sticky;bottom:0;z-index:5;margin-top:6px;
            padding:12px 0 calc(12px + env(safe-area-inset-bottom));
            background:var(--bg);box-shadow:0 -12px 16px -10px rgb(45 32 74 / 22%)}
/* Traka ispod dugmeta već ima svojih 12px, koliko sjenci i treba. */
.sticky-bar>.btn:last-child{margin-bottom:0}

/* ===== Instalirana aplikacija (PWA) ===== */

/* Kad se stranica otvori iz ikone na početnom ekranu, nema adresne trake koja
   inače „gura" sadržaj ispod ureza na iPhoneu i ispod statusne trake na
   Androidu. Zato se odmak dodaje samo tada — u pregledaču bi bio višak. */
.u-aplikaciji .container,
.u-aplikaciji .container-wide{padding-top:calc(20px + env(safe-area-inset-top));
     padding-bottom:calc(20px + env(safe-area-inset-bottom));
     padding-left:calc(20px + env(safe-area-inset-left));
     padding-right:calc(20px + env(safe-area-inset-right))}

/* Poziv „instaliraj" stoji u zaglavlju pored prekidača pisma. Namjerno je
   sitan: to je ponuda, a ne zadatak koji roditelj mora da obavi. */
.pwa-poziv{background:var(--gold1);border:2px solid var(--gold);border-radius:999px;
     padding:7px 13px;min-height:38px;font-family:inherit;font-weight:900;font-size:12.5px;
     color:var(--gold7);cursor:pointer;white-space:nowrap;touch-action:manipulation}
.pwa-poziv:active{transform:translateY(2px)}

/* Uputstvo za iPhone — Safari nema dugme za instalaciju, pa se koraci pokazuju. */
.pwa-uputstvo{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
     max-width:456px;margin:0 auto;background:var(--surface);border-radius:20px;
     box-shadow:0 -6px 30px rgb(43 36 64 / 18%);padding:18px;z-index:50}
.pwa-uputstvo p{font-size:14.5px;font-weight:700;margin-bottom:8px;line-height:1.5}
.pwa-uputstvo p:first-child{font-size:16px}
.pwa-uputstvo em{color:var(--p600);font-style:normal;font-weight:900}
.pwa-uputstvo button{width:100%;min-height:48px;margin-top:8px;border:none;border-radius:14px;
     background:var(--p600);color:#fff;font-family:inherit;font-weight:900;font-size:16px;cursor:pointer}

/* ===== Nema srpskog glasa na uređaju ===== */
/* Poruka je za ODRASLOG, ne za dijete: zato sitno slovo i mirna zlatna
   boja (zelena i crvena su rezervisane za tačno/netačno), i zato stoji u
   dnu — dijete gleda u sredinu ekrana, roditelj pogleda niže. */
.glas-napomena{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
     max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;
     background:var(--gold1);border:2px solid var(--gold);border-radius:16px;
     padding:10px 12px;box-shadow:0 -4px 20px rgb(43 36 64 / 12%);z-index:60}
.glas-napomena p{flex:1;margin:0;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--gold7)}
.glas-napomena button{flex:0 0 auto;min-height:38px;padding:0 14px;border:none;border-radius:12px;
     background:var(--gold7);color:#fff;font-family:inherit;font-weight:900;font-size:12.5px;cursor:pointer}

/* ===== Listić (public/js/uredjaj.js) ===== */
/* Pitanje „prekinuti lekciju?" kad se na Androidu pritisne hardversko „nazad".
   Ne koristi se `confirm()`: sistemski prozor ne zna naše pismo ni naš font,
   na Androidu piše „OK/Cancel" engleski, a u WebViewu zamrzne stranu.

   Ide iz dna, ne iz sredine: „nazad" se pritiska prstom pri dnu ekrana, pa
   odgovor treba da bude tu gdje je prst već. Zlatna je boja opomene — zelena
   i crvena znače isključivo tačan i netačan odgovor djeteta. */
.listic-zavjesa{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
     background:rgb(43 36 64 / 46%);animation:listic-zavjesa-ulaz .16s ease-out}
.listic{width:100%;max-width:520px;margin:0 auto;background:var(--surface);
     border-top:3px solid var(--gold);border-radius:22px 22px 0 0;
     padding:18px 18px calc(16px + env(safe-area-inset-bottom));
     box-shadow:0 -10px 34px rgb(43 36 64 / 24%);animation:listic-ulaz .2s ease-out}
.listic-naslov{display:block;font-size:18px;font-weight:900;color:var(--ink);line-height:1.3}
.listic-tekst{margin:6px 0 14px;font-size:14.5px;font-weight:700;line-height:1.5;color:var(--ink2)}
/* Dugmad u listiću dijele red, pa im margina iz `.btn` ovdje samo pravi razmak
   koji `.row` već daje. */
.listic .row{gap:10px}

@keyframes listic-zavjesa-ulaz{from{opacity:0}to{opacity:1}}
@keyframes listic-ulaz{from{transform:translateY(18px)}to{transform:translateY(0)}}

/* Ko je isključio animacije, dobija listić bez ulaza — ne bez listića. */
@media (prefers-reduced-motion:reduce){
    .listic-zavjesa,.listic{animation:none}
}

/* ===== Tastatura preko polja ===== */
/* `--tastatura` postavlja `uredjaj.js` na visinu koju tastatura zauzima (na
   stolnom računaru je uvijek 0). Klasa se dodaje ekranima gdje polje sjedi na
   dnu, pa strana može da se izdigne umjesto da se piše u polje koje se ne vidi. */
:root{--tastatura:0px}

/* Odmak ide kroz `::after`, a NE kroz `padding-bottom`: klasa se stavlja na
   `.card`, a kartica već ima svojih 18px odozdo — postavljanje `padding-bottom`
   bi ih pregazilo i dugme bi zalijepilo za ivicu kartice na svakom ekranu,
   uključujući stolni računar gdje tastature nema. Ovako je odmak dodatak. */
.pod-tastaturom::after{content:'';display:block;height:var(--tastatura);
     transition:height .12s ease-out}

/* ===== Zapisano bez mreže (public/js/red.js) ===== */
/* Kartica dobija `zapisano` kad odgovor nije ocijenjen nego upisan u red.
   Sve zelene oznake tog zadatka prelaze u zlatno — jednim pravilom ovdje, a ne
   na deset mjesta u plejeru gdje se `good` dodaje. Zelena znači „tačno"; dok
   se tačnost ne zna, nema prava na nju.

   Namjerno se NE koristi crvena za suprotno: odgovor nije netačan, samo još
   nije provjeren. Zlatna je boja čekanja i opomene u cijeloj aplikaciji. */
.explain.w{background:var(--gold1);color:var(--gold7)}

.card.zapisano .opt.good{border-color:var(--gold);background:var(--gold1);
     box-shadow:0 4px 0 var(--gold)}
.card.zapisano .opt.good .key{background:var(--gold);color:var(--gold7)}
.card.zapisano .blank.f{border-bottom-color:var(--gold);background:var(--gold1)}
.card.zapisano .order-chip{background:var(--gold1);color:var(--gold7)}

/* Traka pri dnu ekrana dok red nije prazan. Fiksirana je jer dijete odgovor
   daje na sredini ekrana i ne bi vidjelo poruku koja stoji u toku strane.
   `pointer-events:none` je namjerno: traka nije dugme, a dijete pritiska sve
   što izgleda kao da se može pritisnuti — pa bi ovako nešto samo krala dodire
   dugmetu koje stoji ispod nje. */
.traka-red{position:fixed;left:0;right:0;bottom:0;z-index:70;pointer-events:none;
     padding:9px 14px calc(9px + env(safe-area-inset-bottom));
     background:var(--gold1);color:var(--gold7);border-top:2px solid var(--gold);
     font-size:13px;font-weight:800;text-align:center;line-height:1.35;
     animation:traka-ulaz .2s ease-out}
.traka-red[data-stanje='slanje']{background:var(--teal1);color:var(--teal7);border-top-color:var(--teal)}
.traka-red[data-stanje='poslato']{background:var(--green1);color:#1E5C33;border-top-color:var(--green)}

@keyframes traka-ulaz{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== Ljuska i identitet (Faza 1 — vidi docs/DIZAJN-ANALIZA.md) =====

   „Zavjesa" je gradijentni heder koji ne završava ravnom ivicom nego
   elipsom koja se prelije u krem pozadinu — potpis prototipa. Negativne
   margine poništavaju padding kontejnera (20px) da heder ide od ivice do
   ivice; krivina je ::after elipsa u boji pozadine, šira od ekrana da luk
   bude blag. Boja imenuje ULOGU, ne stranicu: tirkiz je učenje (dijete),
   tamnoljubičasta odrasli svijet (roditelj), narandžasta je poziv (landing). */
.zavjesa{position:relative;margin:0 -20px 24px;padding:20px 20px 46px;color:#fff;overflow:hidden}
.zavjesa::after{content:"";position:absolute;left:-30px;right:-30px;bottom:-26px;height:52px;
     background:var(--bg);border-radius:50% 50% 0 0}
.zavjesa-ucenje{background:linear-gradient(150deg,var(--teal),var(--teal7))}
.zavjesa-hero{background:linear-gradient(160deg,#FF9A62 0%,var(--p500) 45%,var(--p600) 100%)}
.zavjesa-odrasli{background:linear-gradient(150deg,#3E3560,#2B2440)}

/* Pilula sa brojkom u hederu (streak, XP): staklo preko gradijenta. */
.statpill{background:rgb(255 255 255/16%);border:1.5px solid rgb(255 255 255/35%);border-radius:999px;
     padding:6px 12px;display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:14px;
     white-space:nowrap;font-variant-numeric:tabular-nums}

/* Prsten dnevnog cilja: krug se crta strokeom, rotiran da počne od vrha.
   Brojka stoji u sredini. Obim kruga (r=31) je ~194.8 — šablon računa
   dasharray iz procenta. Zlatna na tirkizu: nagrada koja se puni. */
.goalring{width:74px;height:74px;position:relative;flex-shrink:0}
.goalring svg{width:74px;height:74px;transform:rotate(-90deg)}
.goalring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
     font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}

/* Maskota uskoči (landing, pozdravi). Sjenka je dio crteža, ne kartice. */
.maskota-pop{animation:pop .4s ease-out both;filter:drop-shadow(0 8px 14px rgb(0 0 0/22%))}

/* Red zastavica pod hero naslovom. */
.flagrow{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.flag{background:rgb(255 255 255/18%);border:1.5px solid rgb(255 255 255/45%);border-radius:999px;
     padding:5px 12px;font-size:12.5px;font-weight:800}

/* Kartica prednosti na landingu: obojeni kvadratić sa ikonom + tekst. */
.feat{display:flex;gap:12px;align-items:flex-start}
.feat .fic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;
     justify-content:center;flex-shrink:0}
.feat h4{font-size:15.5px;font-weight:900;margin-bottom:2px}
.feat p{font-size:13.5px;color:var(--ink2);line-height:1.5}
.fikona{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;
     stroke-linecap:round;stroke-linejoin:round}

/* Sadržaj „izroni" pri ulasku; stepenovanje po 60ms za spisak kartica. */
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.rise{animation:rise .3s ease-out both}
.rise-2{animation-delay:60ms}
.rise-3{animation-delay:120ms}

/* ===== Donja navigacija (Faza 2) =====

   Četiri taba, uvijek na dnu, poravnata sa kontejnerom (max 480px). Aktivni
   tab je narandžast na svom jastučetu — ista boja kojom dijete svuda „radi".
   Ikone su stroke SVG (`.fikona`), ne emoji: hrom aplikacije mora izgledati
   isto na svakom telefonu. Traka se NE prikazuje u lekciji, lektiri i testu —
   tamo dijete treba da bude u zadatku, ne na raskrsnici. */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
     z-index:60;background:var(--surface);border-top:1px solid #EFE9DB;display:flex;
     padding:7px 6px calc(9px + env(safe-area-inset-bottom));
     box-shadow:0 -6px 20px rgb(43 36 64/7%)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
     font-size:11.5px;font-weight:800;color:#A49BC0;padding:7px 0;border-radius:14px;
     min-height:52px;text-decoration:none;transition:background .15s ease-out,color .15s ease-out}
.bnav a.on{color:var(--p600);background:var(--p100)}
.bnav .fikona{width:24px;height:24px}
/* Prostor na dnu sadržaja da fiksirana traka ne prekrije zadnje dugme. */
.bnav-prostor{height:86px}
/* Traka reda (offline) se izdigne iznad navigacije kad obje postoje. */
body:has(.bnav) .traka-red{bottom:72px}

/* ===== Noćna prijava (Faza 3) =====

   Dječja prijava je jedini ekran sa noćnim nebom: dijete se prijavljuje
   poslije škole, pred veče — i ovo je „njegov" ulaz, drugačiji od svega
   roditeljskog. Zvjezdice su fiksirane tačke, avatari veliki (cijela figura
   je meta), a PIN se kuca na tastaturi NA EKRANU: bez sistemske tastature
   koja pokrije pola ekrana, a tačkice se pune zlatnom — isto zlato koje
   svuda znači nagradu. */
body.noc{background:linear-gradient(180deg,#1E4B63 0%,#0F3A50 60%,#0B2E40 100%);color:#fff}
body.noc .brand{color:#fff}
body.noc .script-toggle{color:#fff;border-color:rgb(255 255 255/35%)}
body.noc .muted{color:#9FC3D4}
body.noc .field label{color:#fff}
.zvijezde i{position:fixed;width:4px;height:4px;border-radius:50%;background:#FFD97A;
     opacity:.8;pointer-events:none}
.avpick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 2px}
.av{display:flex;flex-direction:column;align-items:center;gap:7px;font-weight:800;font-size:13px;
     color:#BFD9E6;padding:10px;border-radius:18px;min-width:84px;background:none;border:none;
     cursor:pointer;font-family:inherit;transition:background .15s ease-out}
.av .face{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
     justify-content:center;font-size:30px;border:3px solid transparent;background:#173B4F}
.av.on{background:rgb(255 255 255/10%);color:#fff}
.av.on .face{border-color:var(--gold)}
.pindots{display:flex;gap:14px;justify-content:center;margin:14px 0}
.pindots i{width:16px;height:16px;border-radius:50%;border:2.5px solid #7FA8BC;
     transition:all .15s ease-out}
.pindots i.f{background:var(--gold);border-color:var(--gold);transform:scale(1.1)}
.pindots.tres{animation:shake .3s ease-out}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;
     margin:0 auto;width:100%}
.pinpad button{min-height:58px;border-radius:18px;background:rgb(255 255 255/9%);color:#fff;
     font-size:23px;font-weight:900;border:none;font-family:inherit;cursor:pointer;
     touch-action:manipulation;transition:background .12s ease-out,transform .12s ease-out}
.pinpad button:active{background:rgb(255 255 255/22%);transform:scale(.95)}
.pinpad button:disabled{opacity:.4}

/* Pozdrav poslije prijave: sovica preko cijelog ekrana, jedan dodir i nestaje. */
.pozdrav{position:fixed;inset:0;z-index:80;background:rgb(11 46 64/.94);display:flex;
     flex-direction:column;align-items:center;justify-content:center;gap:12px;
     text-align:center;padding:24px;color:#fff}

/* ===== Roditeljska analitika (Faza 5) =====

   Tabovi djece u tamnom hederu: roditelj sa dvoje djece skače između njih
   jednim dodirom, bez vraćanja na spisak. Aktivno dijete je svijetla pilula
   na tamnom — ista logika kao aktivni tab donje navigacije. */
.kidtabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kidtab{display:inline-flex;align-items:center;gap:8px;background:rgb(255 255 255/10%);
     border:1.5px solid rgb(255 255 255/22%);padding:6px 13px 6px 7px;border-radius:999px;
     font-weight:800;font-size:13.5px;color:#D9D3EC;min-height:44px;text-decoration:none;
     transition:background .15s ease-out}
.kidtab.on{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.kidtab .face{width:30px;height:30px;border-radius:50%;background:var(--teal1);display:flex;
     align-items:center;justify-content:center;font-size:15px;flex-shrink:0}

/* Trio brojeva ispod hedera: tri ravnopravne kartice, broj krupno. */
.stat3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.stat3 .card{padding:13px 10px;text-align:center;margin:0}
.stat3 b{font-size:21px;font-weight:900;display:block;font-variant-numeric:tabular-nums}
.stat3 span{font-size:11.5px;font-weight:800;color:var(--ink2)}

/* ===== Čitanje naglas (1–2. razred) =====

   Zvučnik pored svakog teksta: dijete koje još ne zna sva slova dodirne
   krug i uređaj mu pročita. Tirkiz — pomoć, ne nagrada i ne ocjena
   (zlatno je nagrada, zeleno/crveno su tačno/netačno i tu se ne diraju).
   `bez-citanja` na body sakriva sve zvučnike (preklopnik u vrhu lekcije). */
.zvuk{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
     border-radius:50%;background:var(--teal1);color:var(--teal7);flex-shrink:0;cursor:pointer;
     margin-left:8px;vertical-align:middle;transition:transform .12s ease-out,background .12s ease-out}
.zvuk:active{transform:scale(.86);background:var(--teal);color:#fff}
.zvuk svg{width:17px;height:17px}
/* U dugmetu odgovora (flex red) zvučnik stoji skroz desno. */
.opt .zvuk{margin-left:auto}
body.bez-citanja .zvuk{display:none}

/* Preklopnik u vrhu lekcije: uključeno = tirkizno, isključeno = sivo
   sa precrtanim zvučnikom. */
.citanje-preklopnik{display:inline-flex;align-items:center;justify-content:center;width:40px;
     height:40px;border-radius:12px;background:var(--teal1);color:var(--teal7);border:none;
     cursor:pointer;flex-shrink:0;transition:background .15s ease-out,color .15s ease-out}
.citanje-preklopnik[aria-pressed="false"]{background:#EFEAF7;color:#A49BC0}
.citanje-preklopnik svg{width:20px;height:20px}
.citanje-preklopnik[aria-pressed="false"] .crta{display:block}
.citanje-preklopnik .crta{display:none}

@media (prefers-reduced-motion:reduce){
    .traka-red,.rise,.rise-2,.rise-3,.maskota-pop,.pindots.tres{animation:none}
}

/* Birač znaka za nagradu. Roditelj ne kuca emoji — bira ga dodirom iz mreže.
   Radio dugme je skriveno, cio kvadrat je meta (min 48px), a izabrani dobija
   zlatni okvir: nagrada je zlatna kroz cijelu aplikaciju, pa je i njen znak
   bira u istoj boji. Zeleno/crveno se ovdje NAMJERNO ne dira — te dvije boje
   znače tačno/netačno i nemaju šta ovdje da traže. */
.znak-birac{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));
     gap:8px;margin-top:6px}
.znak-opcija{position:relative;display:flex;align-items:center;justify-content:center;
     min-height:52px;border:2px solid #E8E2F2;border-radius:14px;background:var(--surface);
     font-size:26px;line-height:1;cursor:pointer;user-select:none;
     transition:transform .1s ease-out,border-color .1s ease-out,background .1s ease-out}
.znak-opcija input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.znak-opcija:active{transform:translateY(2px)}
.znak-birac:has(input:checked) .znak-opcija{border-color:#E8E2F2;background:var(--surface)}
.znak-opcija:has(input:checked){border-color:var(--gold);background:var(--gold1);
     box-shadow:0 3px 0 var(--gold)}
.znak-opcija input:focus-visible{outline:none}
.znak-opcija:has(input:focus-visible){box-shadow:0 0 0 3px var(--teal1);border-color:var(--teal)}

/* ---------- donacije (prijava, registracija, roditeljska tabla) ----------
   Kompaktna zlatna kutija: iznos + način grade tekst dugmeta (JS), a bez
   JS-a forma šalje 5 € mjesečno. Ista logika kao na landing strani. */
.donbox{background:linear-gradient(120deg,#FFF8E6,var(--gold1));border:2px solid var(--gold)}
.don-tgl{display:flex;background:rgb(255 255 255/70%);border-radius:999px;padding:4px;margin:12px 0}
.don-tgl button{flex:1;border:none;background:none;font:inherit;font-weight:800;font-size:13.5px;
     padding:8px 0;border-radius:999px;cursor:pointer;color:var(--ink2);min-height:38px}
.don-tgl button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.don-iznosi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.don-iznosi button{border:2px solid #E8E2F2;background:var(--surface);border-radius:12px;
     font:inherit;font-weight:900;font-size:15px;min-height:44px;cursor:pointer;color:var(--ink);
     transition:all .12s ease-out}
.don-iznosi button.on{border-color:var(--gold);background:var(--gold1);box-shadow:0 3px 0 var(--gold)}
.don-red{display:flex;align-items:center;justify-content:space-between;gap:10px;
     background:var(--surface);border-radius:12px;padding:10px 14px;margin-top:8px;
     font-weight:800;font-size:14px}
.don-red .muted{font-size:12.5px;font-weight:700}
.don-otkazi{border:1.5px solid var(--red);color:var(--red);background:var(--surface);
     border-radius:999px;padding:6px 14px;font:inherit;font-weight:800;font-size:12.5px;
     cursor:pointer;min-height:34px;flex-shrink:0}