/* =============================================
   VIZUALNI OKVIR: TOKENI (15.09.2026., v. docs/VIZUALNI-OKVIR.md)
   Novi CSS koristi ove varijable; stari heks-literali se mijenjaju kad ih QA
   dotakne. Prijelomi: 640 / 768 / 1024 (min-width, mobile-first).
   ============================================= */
:root {
  --ing-plava: #2563eb;        /* brend, gumbi, poveznice */
  --ing-plava-tamna: #1e40af;  /* gradijent zaglavlja */
  --ing-plava-svijetla: #3b82f6;
  --ing-tinta: #0f172a;        /* glavni tekst */
  --ing-siva: #475569;         /* sekundarni tekst */
  --ing-siva-svijetla: #94a3b8;
  --ing-rub: #e2e8f0;
  --ing-podloga: #f8fafc;
  --ing-uspjeh: #16a34a;
  --ing-greska: #dc2626;
  --ing-upozorenje: #f59e0b;
  --ing-radius: 12px;
  --ing-radius-pilula: 999px;
  --ing-dodir: 44px;           /* najmanja dodirna meta */

  /* NIJANSE ZNACAJKI (Drago, 24.09.2026.): kartica nosi vrlo blagu boju one
     znacajke u koju vodi, ikona stoji na njoj, a ploha kartice je bijela.
     BOJA JE BOJA ODREDISTA (Drago, 24.09.2026.: „Kolege su zelene, a kad
     udes u njih stil Kolega je roskast... Skripta je plava kartica, a kad
     udes u nju je zelena"): svaka nijansa je preuzeta iz ekrana koji se
     otvara, ne birana zasebno. Tri vrijednosti po znacajki: ploha polja,
     rub kartice i puna crta uz lijevi rub. */
  --ton-plava-ploha: #eff6ff;       --ton-plava-rub: #bfdbfe;      /* Moj plan, Kviz */
  --ton-zelena-ploha: #ecfdf5;      --ton-zelena-rub: #a7f3d0;     /* Skripta */
  --ton-nebeska-ploha: #f0f9ff;     --ton-nebeska-rub: #bae6fd;    /* Uci sad, Audioknjiga */
  --ton-roza-ploha: #fdf2f8;        --ton-roza-rub: #fbcfe8;       /* Ispit */
  --ton-koraljna-ploha: #fff1f2;    --ton-koraljna-rub: #fecdd3;   /* Kolege */
  --ton-ljubicasta-ploha: #f5f3ff;  --ton-ljubicasta-rub: #ddd6fe; /* Niz genija */
  --ton-zuta-ploha: #fffbeb;        --ton-zuta-rub: #fde68a;       /* Liga genija */
  /* PROVJERA: FUKSIJA (Drago, 25.09.2026., u dva koraka: najprije „Provjera
     ista boja ko Niz genija", pa „Provjera je sad zelena a to ne bi tribala
     bit"). Bila je #f7f3ff uz Niz na #f5f3ff, dakle dva ulaza u istoj boji, a
     crta im je bila DOSLOVNO ista (#7c3aed). Zelena je bila prva zamjena i
     odbijena je. Fuksija je odabrana jer je ruzicasti kraj gradijenta koji
     sam ekran Provjere nosi (plava -> ruzicasta): toplija je od Nizove
     ljubicaste i ljubicastija od Kolegine koraljne, pa se razdvaja od obje. */
  --ton-prijelaz-ploha: #fdf4ff;    --ton-prijelaz-rub: #f5d0fe;   /* Provjera */
  --ton-polje: #ffffff;             /* ploha kartice */
  --ton-plava-crta: #3b82f6;        --ton-zelena-crta: #10b981;
  --ton-nebeska-crta: #0ea5e9;      --ton-roza-crta: #ec4899;
  --ton-koraljna-crta: #f43f5e;     --ton-ljubicasta-crta: #7c3aed;
  --ton-zuta-crta: #f59e0b;         --ton-prijelaz-crta: #d946ef;
}
html.dark-theme {
  --ing-tinta: #e5e7eb; --ing-siva: #cbd5e1; --ing-siva-svijetla: #94a3b8;
  --ing-rub: #3b3a37; --ing-podloga: #1f1e1d;
  /* Na tamnoj temi ista logika, samo od druge strane: polje ispod ikone je
     tamno s natruhom boje, rub korak svjetliji, ploha kartice neutralna
     (bijeli kvadrat bi na tamnom ekranu bio svjetiljka). */
  --ton-plava-ploha: #222838;       --ton-plava-rub: #363f57;
  --ton-zelena-ploha: #1f2b26;      --ton-zelena-rub: #32463c;
  --ton-nebeska-ploha: #1c2a33;     --ton-nebeska-rub: #2e4553;
  --ton-roza-ploha: #2e2130;        --ton-roza-rub: #4a3149;
  --ton-koraljna-ploha: #2f2226;    --ton-koraljna-rub: #4b3339;
  --ton-ljubicasta-ploha: #272337;  --ton-ljubicasta-rub: #3d3557;
  --ton-zuta-ploha: #2e2a20;        --ton-zuta-rub: #4a4130;
  --ton-prijelaz-ploha: #272337;    --ton-prijelaz-rub: #3d3557;
  --ton-polje: #2a2927;
  /* Na tamnoj plohi ista crta izgleda tamnije nego sto jest, pa ide korak
     svjetlija. */
  --ton-plava-crta: #60a5fa;        --ton-zelena-crta: #34d399;
  --ton-nebeska-crta: #38bdf8;      --ton-roza-crta: #f472b6;
  --ton-koraljna-crta: #fb7185;     --ton-ljubicasta-crta: #a78bfa;
  --ton-zuta-crta: #fbbf24;         --ton-prijelaz-crta: #a78bfa;
}

/* =============================================
   FONT SIZE SETTINGS
   ============================================= */
html.font-small  { font-size: 14px; }
html.font-medium { font-size: 16px; }
html.font-large  { font-size: 18px; }

/* Gumb „Stani" ispod maskote dok model odgovara (15.09.2026.). */
.chat-stani {
  display: inline-block; margin: 6px 0 0 8px; padding: 6px 14px; min-height: 36px;
  border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
  color: #475569; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chat-stani:hover { background: #f1f5f9; }
html.dark-theme .chat-stani { background: #2a2927; color: #e5e7eb; border-color: #3b3a37; }

/* Zumiranje je dopusteno (bez user-scalable=no); dvostruki dodir na gumbu
   vise ne zumira stranicu, QA 15.09.2026. */
button, a, label, summary, select, [role="button"], .tutor-suggestion-btn { touch-action: manipulation; }

/* iPhone NE POVECAVA STRANICU NA DODIR POLJA (Ivo, 16.09.2026., slika „Moj
   profil": stranica se dala vuci lijevo-desno). Safari i WKWebView povecaju
   stranicu cim se dodirne polje s tekstom manjim od 16 px, i poslije je ne
   vrate, pa sirina vise nije ekran. Profil ima `text-sm` (14 px) na svim
   poljima; isto vrijedi za svako manje polje u aplikaciji.
   NE `maximum-scale=1` u viewportu: u WKWebViewu to gasi i zumiranje prstima,
   koje je namjerno ostavljeno (v. pravilo iznad). Zato samo iOS (klasa iz
   native-bridge.js; `-webkit-touch-callout` postoji samo na iOS-u), samo polja
   za upis, i `!important` jer Tailwindov `text-sm` nosi svoj. */
html.ios-native :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
    font-size: max(16px, 1em) !important;
}
@supports (-webkit-touch-callout: none) {
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
        font-size: max(16px, 1em) !important;
    }
}

/* Dijalog potvrde i upisa: window.potvrdi / window.upisi u utils.js, QA 15.09.2026. */
.ing-dijalog-sloj {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, .45);
}
.ing-dijalog {
  width: 100%; max-width: 400px; box-sizing: border-box;
  background: #fff; color: var(--ing-tinta);
  border-radius: var(--ing-radius); padding: 20px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .25);
}
html.dark-theme .ing-dijalog { background: var(--ing-podloga); }
.ing-dijalog-naslov { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ing-tinta); }
.ing-dijalog-tekst { margin: 0 0 14px; color: var(--ing-siva); font-size: .92rem; line-height: 1.5; white-space: pre-line; }
.ing-dijalog-polje {
  width: 100%; box-sizing: border-box; min-height: var(--ing-dodir);
  margin: 0 0 14px; padding: 8px 12px; font-size: 1rem;
  color: var(--ing-tinta); background: var(--ing-podloga);
  border: 1px solid var(--ing-rub); border-radius: var(--ing-radius);
}
.ing-dijalog-gumbi { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ing-dijalog-gumb {
  min-height: var(--ing-dodir); padding: 0 16px; cursor: pointer;
  border: 1px solid var(--ing-rub); border-radius: var(--ing-radius-pilula);
  background: transparent; color: var(--ing-siva); font-weight: 600; font-size: .92rem;
}
.ing-dijalog-gumb.je-glavni { background: var(--ing-plava); border-color: var(--ing-plava); color: #fff; }
.ing-dijalog-gumb.je-opasno { background: var(--ing-greska); border-color: var(--ing-greska); }
.ing-dijalog-gumb:focus-visible, .ing-dijalog-polje:focus-visible { outline: 2px solid var(--ing-plava-svijetla); outline-offset: 2px; }

/* =============================================
   SETTINGS PANEL
   ============================================= */
/* POSTAVKE: kompaktnije, i u vise stupaca na sirokom zaslonu.
   Ivo (26.08.): „nije kompaktan (…) previse je praznog mista." Izmjereno:
   razmak medu odjeljcima bio je 20 px, a na Onyxu (1264 px) je sav sadrzaj
   stajao u traci sirokoj kao telefon, s praznom polovicom zaslona desno.

   `column-count` a ne grid: odjeljci su razlicito visoki, pa ih stupci sami
   rasporede bez rucnog slaganja po redcima. `break-inside: avoid` drzi svaki
   odjeljak na okupu, inace bi ga stupac presjekao na pola. */
/* SVAKA STAVKA U JEDAN REDAK: natpis lijevo, izbor desno.
   Ivo (27.08.): „settings je još pre velike ikone. Neka bude samo opcija i
   padajuči izbornik za sve stavke, kompaktno u jednom malom retku za svaku
   stavku."

   Radi se STILOM, ne prepisivanjem dvanaest blokova: svaki je vec
   `<div><label>…</label><kontrola></div>`, pa ih isto pravilo poravna sve.
   Prepisivanje bi znacilo dvanaest prilika za promasaj, a ovako ih nema. */
.settings-mreza > div:not(.pos-lista) {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid #f1f5f9;
    break-inside: avoid;
}
.settings-mreza > div:not(.pos-lista) > .settings-label {
    flex: 1 1 auto; margin: 0;
    text-transform: none; letter-spacing: 0; font-size: .84rem;
    color: #334155; font-weight: 600;
}
/* Kontrola ide desno; sve sto je siroko (opis, kartice) pada u novi redak. */
.settings-mreza > div:not(.pos-lista) > *:not(.settings-label):not(p) { margin-left: auto; }
.settings-mreza > div:not(.pos-lista) > p { flex: 1 0 100%; margin: 0; }
/* Opisi ispod postavki samo trose visinu kad je sve u jednom retku. Ostaju u
   DOM-u (citaci ekrana ih citaju), ali se ne crtaju. */
.settings-mreza > div:not(.pos-lista) > p.text-xs { display: none; }
.settings-mreza > * { break-inside: avoid; }
html.dark-theme .settings-mreza > div:not(.pos-lista) { border-bottom-color: #2a2927; }
body.eink-look .settings-mreza > div:not(.pos-lista) { border-bottom-color: #000; }
@media (min-width: 900px) {
    .settings-mreza { column-count: 2; column-gap: 2rem; }
    /* Racun ide preko oba stupca — on je zaglavlje, ne postavka. */
    .settings-mreza > *:first-child { column-span: all; }
}
@media (min-width: 1400px) {
    .settings-mreza { column-count: 3; }
}

.settings-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

/* =============================================
   DARK THEME
   ============================================= */
html.dark-theme body { background-color: #1f1e1d; }
html.dark-theme .bg-gray-100 { background-color: #1f1e1d; }
html.dark-theme .bg-white,
html.dark-theme .bg-slate-50 { background-color: #2a2927; }

/* Main header */
html.dark-theme header.bg-white { background-color: #2a2927; border-color: #3b3a37; }
html.dark-theme #current-subject { color: #e2e8f0; }

/* Content area */
html.dark-theme #content-container { background-color: #1f1e1d; }
html.dark-theme #welcome-msg { color: #94a3b8; }

/* Mode tabs */
html.dark-theme #mode-tabs { background-color: #3b3a37; }
html.dark-theme #mode-tabs button { color: #94a3b8; }
html.dark-theme #mode-tabs button.bg-slate-800 { background-color: #1f1e1d; color: #f1f5f9; }

/* Input area */
html.dark-theme #input-area { background-color: #2a2927; border-color: #3b3a37; }
html.dark-theme #user-input { background-color: #1f1e1d; border-color: #3b3a37; color: #e2e8f0; }

/* Chat messages */
html.dark-theme .msg-bot { background: rgba(15,23,42,.65); border-color: rgba(148,163,184,.22); color: #e2e8f0; }
html.dark-theme .msg-user { background: #3b82f6; color: white; }

/* Script view */
html.dark-theme .script-view { background: #2a2927; border-color: #3b3a37; color: #e2e8f0; }

/* Dashboard cards */
html.dark-theme #view-dashboard { background-color: #1f1e1d !important; }
html.dark-theme #view-dashboard button { background-color: #2a2927; border-color: #3b3a37; }
html.dark-theme #view-dashboard button:hover { border-color: inherit; }
html.dark-theme #view-dashboard .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-dashboard .text-slate-500,
html.dark-theme #view-dashboard .text-slate-400 { color: #94a3b8; }

/* Quiz/Exam cards */
html.dark-theme .stat-card { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .stat-value { color: #e2e8f0; }
html.dark-theme .stat-label { color: #94a3b8; }

/* General text overrides */
html.dark-theme .text-slate-800,
html.dark-theme .text-slate-700 { color: #e2e8f0; }
html.dark-theme .text-slate-600,
html.dark-theme .text-slate-500 { color: #94a3b8; }
/* TIHI TEKST SE U TAMNOJ TEMI NE SPUSTA, NEGO DIZE (Drago QA 16.09.2026.):
   #64748b na podlozi citaca #1f1e1d daje 3,05:1, ispod praga 4,5:1 za mali
   tekst. Pogadalo je „Objasni vise", „Nastavi bez racuna", brojac niza i
   „poglavlje 1 / 13". Tailwindova vlastita vrijednost (#94a3b8) na tamnoj
   podlozi daje 6,42:1, pa tekst ostaje tisi od glavnog, ali citljiv. */
html.dark-theme .text-slate-400 { color: #94a3b8; }

/* Prose (markdown rendered content) */
html.dark-theme .prose { color: #cbd5e1; }
html.dark-theme .prose h1 { color: #93c5fd; }
html.dark-theme .prose h2 { color: #93c5fd; }
html.dark-theme .prose strong { color: #e2e8f0; }
html.dark-theme .prose code:not(.hljs) { background-color: #3b3a37; color: #e2e8f0; }

/* Inline code */
html.dark-theme .prose code:not(.hljs) { background-color: #3b3a37; color: #e2e8f0; }

/* Scrollbar */
html.dark-theme ::-webkit-scrollbar-track { background: #2a2927; }
html.dark-theme ::-webkit-scrollbar-thumb { background: #475569; }

/* Modals keep their own styling (dark header, white body) — no override needed */

/* Setup screen */
html.dark-theme #setup-screen { background-color: #1f1e1d; }
html.dark-theme #setup-screen .bg-white { background-color: #2a2927; }
html.dark-theme #setup-screen .bg-slate-50 { background-color: #1f1e1d; }
html.dark-theme #setup-screen .text-slate-700 { color: #e2e8f0; }
html.dark-theme #setup-screen .border-slate-200 { border-color: #3b3a37; }

/* Quiz/Exam view cards in dark mode.
   `#view-learn` JE DODAN 04.09.2026. (Ivo: „tema tamna za 'uci odma' nije
   dobra"). „Uci sad" crta ISTU karticu kviza (`renderQuizCard`), samo u svoje
   slajdove — a pravilo je bilo vezano uz ID pogleda, pa je ista kartica u
   kvizu bila tamna, a u „Uci sad" bijela. Vezati izgled uz mjesto na kojem se
   kartica zatekne, a ne uz nju samu, znaci da svaka nova povrsina koja je
   posudi pocne od bijele — pa je uz ID dodan i razred kartice. */
html.dark-theme [id^="view-quiz"] .bg-white,
html.dark-theme [id^="view-exam"] .bg-white,
html.dark-theme #view-learn .bg-white,
html.dark-theme .learn-feed .bg-white { background-color: #2a2927; }
html.dark-theme [id^="view-quiz"] .border-slate-200,
html.dark-theme [id^="view-exam"] .border-slate-200,
html.dark-theme #view-learn .border-slate-200,
html.dark-theme .learn-feed .border-slate-200 { border-color: #3b3a37; }
html.dark-theme #view-learn .text-slate-800,
html.dark-theme .learn-feed .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-learn .text-slate-700,
html.dark-theme .learn-feed .text-slate-700 { color: #cbd5e1; }
html.dark-theme #view-learn .text-slate-500,
html.dark-theme #view-learn .text-slate-400,
html.dark-theme .learn-feed .text-slate-500,
html.dark-theme .learn-feed .text-slate-400 { color: #94a3b8; }
html.dark-theme #view-learn .bg-slate-100,
html.dark-theme .learn-feed .bg-slate-100 { background-color: #3b3a37; }
html.dark-theme #view-learn .hover\:bg-slate-50:hover,
html.dark-theme .learn-feed .hover\:bg-slate-50:hover { background-color: #3b3a37 !important; }
/* Naslov predmeta iznad kartice ostaje citljiv i kad je „uppercase" i sivo. */
html.dark-theme #view-learn .learn-course, html.dark-theme .learn-feed .learn-course { color: #94a3b8; }

/* Settings — subject manager drag state. The row being dragged pops above
   the lists; touch-action:none on the handle so the modal doesn't scroll
   while dragging. */
.subj-drag-handle { touch-action: none; }
.subj-row.subj-dragging {
    opacity: 0.85;
    box-shadow: 0 8px 22px -6px rgba(15, 23, 42, 0.35) !important;
    border-color: #93c5fd !important;
    position: relative; z-index: 5;
    cursor: grabbing;
}
html.dark-theme .subj-row { background-color: #1f1e1d; border-color: #3b3a37; }

/* Settings modal dark theme override for inputs */
html.dark-theme #settings-modal-body input,
html.dark-theme #settings-modal-body select { background-color: #1f1e1d; border-color: #3b3a37; color: #e2e8f0; }
html.dark-theme .settings-label { color: #94a3b8; }

.prose img { max-width: 100%; border-radius: 8px; margin: 10px 0; }
.prose h1 { font-size: 1.5em; font-weight: bold; color: #1e3a8a; margin-top: 10px; }
.prose h2 { font-size: 1.2em; font-weight: bold; color: #1e40af; margin-top: 8px; }
.prose p { margin-bottom: 8px; line-height: 1.6; }
.prose strong { font-weight: 700; color: #334155; }

/* --- TABLICE (truth tables, konvergencija itd.) — marked generira <table>, ali
   Tailwind CDN nema typography plugin pa custom .prose mora eksplicitno stilizirati
   tablice; bez ovoga ćelije nemaju border/padding i math-pune header-ćelije se
   skupe u "pqp∧q…". --- */
.prose table { border-collapse: collapse; margin: 14px 0; font-size: 0.95em; }
.prose th, .prose td { border: 1px solid #cbd5e1; padding: 6px 14px; text-align: center; }
.prose thead th { background: #f1f5f9; font-weight: 600; }
html.dark-theme .prose th, html.dark-theme .prose td { border-color: #475569; }
html.dark-theme .prose thead th { background: #2a2927; color: #e2e8f0; }

/* --- FIX ZA LISTE (1. 2. 3. i točke) --- */
.prose ol {
    list-style-type: decimal !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
}

.prose ul {
    list-style-type: disc !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
}

.prose li {
    display: list-item !important; /* Ovo prisiljava browser da crta broj/točku */
    margin-bottom: 0.4rem !important;
    line-height: 1.6;
}

/* Osiguraj da se brojevi vide i na mobitelu */
@media (max-width: 768px) {
    .prose ol, .prose ul {
        margin-left: 1.2rem !important;
    }
}


.prose { text-align: left; }
.prose h1, .prose h2, .prose h3, .prose h4 { text-align: left; }


/* Stil za slike unutar skripte i Markdown renderiranog sadržaja (kviz/ispit) */
.script-image, 
.prose img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;       /* Na mobitelu zauzmi dostupnu širinu */
    height: auto;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
}


/* --- CODE BLOCK FIX --- */

/* 1. Resetiraj stilove koje Tailwind (prose) forsira na pre i code */
.prose pre {
    background-color: transparent !important; /* Pusti da highlight.js odredi boju */
    padding: 0 !important;
    margin: 1.5em 0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important; /* Da se ne prelijeva van */
}

/* 2. Highlight.js stilovi */
/* Ovo je stvarna kutija s kodom */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1.2em !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.5;
    background: #282c34 !important; /* Atom One Dark pozadina */
    color: #abb2bf !important;      /* Osnovna boja teksta */
    border-radius: 0.5rem;
}

/* 3. Sakrij backtickove (`) u inline kodu */
.prose :where(code):not(:where([class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"] *))::after {
    content: "" !important;
}

/* 4. Malo uljepšaj inline kod (onaj koji nije u bloku) */
.prose code:not(.hljs) {
    background-color: #f1f5f9; /* Svijetlo siva pozadina */
    color: #1e293b;            /* <--- PROMIJENJENO: Tamna boja (umjesto crvene #ef4444) */
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;          /* Opcionalno: malo manji font da se ljepše uklopi */
}




/* SAMO za ekrane šire od mobitela (npr. tableti i desktop) */
@media (min-width: 768px) {
    .script-image, 
    .prose img {
        width: auto;       /* Vrati prirodni omjer/širinu */
        max-width: 260px;  /* OGRANIČENJE NA CCA 6-7cm */
        max-height: 400px; /* Dodatno ograničenje visine da ne bude previsoko */
    }
}

/* INZENJERKOV ODGOVOR KAO U CHATU PODPOGLAVLJA (Drago QA 25.09.2026.: „da prati
   kao i inzenjerko u pricaj inzenjerko, ista ova da bude pilula i bez ovih
   ravnih linija oko nje"). Bijeli zaobljeni balon s tankim rubom, kao
   `.subchat-ing`; bez sjene (Tailwindov shadow-sm je !important). */
.msg-bot { background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 0.9rem; box-shadow: none !important; }
.msg-user { background: #3b82f6; color: white; border-radius: 12px 12px 0 12px; margin-left: auto; }

.script-view { background: #ffffff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulseOnce { 0% { transform: scale(0.98); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.animate-pulse-once { animation: pulseOnce 0.3s ease-out forwards; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

body { -webkit-tap-highlight-color: transparent; }
input, button { touch-action: manipulation; }


/* Progress traka za kviz */
.quiz-progress-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    justify-content: center;
}

/* Tanje i mirnije pilule (Drago, 22.09.2026.: „malo tanje, elegantnije, na svim
   ekranima koji ih imaju"): 5 px, pun polukrug, aktivna tek malo deblja. */
.quiz-step {
    flex: 1;
    max-width: 30px;
    height: 5px;
    background-color: #e2e8f0; /* Default siva */
    border-radius: 999px;
    transition: all 0.3s ease;
}

.quiz-step.active {
    background-color: #3b82f6; /* Plava (trenutno pitanje) */
    transform: scaleY(1.3);
}
/* BOJA ISPITA = BOJA KARTICE „ISPIT" NA PLOCI PREDMETA (Drago, 22.09.2026.,
   nakon dva kruga: „aj vrati na ovo", slika s ruzicastim). Isti par kao
   `.dash-quick-card.theme-ispit`: #be185d natpis, #db2777 radnja. Ne ide kroz
   Tailwind jer build nema te razrede (purge). Koraci, lijeva traka, natpis
   PITANJE i gumbi Potvrdi odgovor / Sljedece. */
.exam-progress .quiz-step.active { background-color: #db2777; }
/* Koraci u HUD retku kviza i Blitza: bez donjeg razmaka, pune sirinu izmedu
   pilule „1 / 10" i niza; aktivni korak u boji nacina (Drago, 22.09.2026.). */
.qhud .quiz-progress-bar { display: flex; flex: 1 1 auto; margin: 0; min-width: 0; justify-content: flex-start; }
.qhud .quiz-progress-bar .quiz-step { max-width: none; }
.blitz-progress .quiz-step.active { background-color: #f59e0b; }
.kviz-progress .quiz-step.active { background-color: #2563eb; }
/* Uvodni kviz ne ocjenjuje (Drago, 23.09.2026.): prijedjeni koraci su plavi,
   bez zelene i crvene, jer je to upoznavanje, a ne provjera. */
.quiz-progress-bar.bez-ocjene .quiz-step.prijedjen { background-color: #2563eb; }
.quiz-progress-bar.bez-ocjene .quiz-step.active { background-color: #93c5fd; }
html.dark-theme .quiz-progress-bar.bez-ocjene .quiz-step.prijedjen { background-color: #60a5fa; }
.ispit-kartica { border-left-color: #db2777; }
.ispit-naslov { color: #be185d; }
.ispit-akcija { background-color: #db2777; }
.ispit-akcija:hover { background-color: #be185d; }

.quiz-step.correct {
    background-color: #22c55e; /* Zelena */
}

.quiz-step.incorrect {
    background-color: #ef4444; /* Crvena */
}

/* Stil za kartice izvještaja */
.stat-card {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}
.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.quiz-step.partial {
    background-color: #facc15; /* Žuta boja */
}

/* --- IZMJENA 2: RESPONSIVE FORMULE --- */

/* Cilja block-level MathJax formule (one u $$...$$) */
mjx-container[display="true"] {
    overflow-x: auto !important; /* Dozvoli horizontalni scroll */
    overflow-y: hidden;
    max-width: 100%;             /* Ne smije biti šire od ekrana mobitela */
    display: block !important;   /* Osiguraj da se ponaša kao blok */
    padding: 10px 0;             /* Malo mjesta za prst */
    -webkit-overflow-scrolling: touch; /* Glatko skrolanje na iOS-u */
}
/* INLINE math (bez display atributa) MORA teći u retku s tekstom. Nakon prelaska
   na SVG izlaz inline kontejneri su računali display:inline i svaki se simbol
   (ε, δ, f(c)…) lomio u zasebni red — pitanja su izgledala razbijeno
   (Ivo, 2026-07-21). */
mjx-container:not([display="true"]) {
    display: inline-block !important;
    vertical-align: -0.15em;
}
/* Ograda za SVE mjx kontejnere, na SVIM širinama (Ivo, 2026-08-04). Do sad je
   max-width:100% postojao samo u mobile.css (≤768px), pa je na širem prozoru
   inline kontejner narastao na punu prirodnu širinu, virio iz uske kartice, a
   fit-prolaz u utils.js — koji raspoloživo mjeri po clientWidth kontejnera —
   mislio da sve stane dok je .prose clip tiho rezao višak. S ogradom
   clientWidth govori istinu i smanjivanje se pali gdje treba. */
mjx-container {
    max-width: 100%;
}

/* Formula koju ni smanjenje ne uspije stisnuti u karticu (klasu stavlja
   fitMathInElement() u utils.js). Tri stvari koje scroll ovdje traži:

   1. VIDLJIV scrollbar. Telefon crta overlay scrollbar tek dok vučeš, pa je
      odrezana formula izgledala kao greška, a ne kao "ima još desno".
      `::-webkit-scrollbar { height }` na Blinku vraća klasičnu, stalno
      vidljivu traku — to je jedina afordancija koju student dobije.
   2. touch-action. `html, body` u mobile.css drži `pan-y pinch-zoom` da se
      cijeli ekran ne može vući lijevo-desno; ovdje se pan-x mora vratiti,
      inače gesta nikad ne dođe do ovog scrollera.
   3. Inline formula MORA postati blok — inline kutija nema što skrolati.

   Prag je namjerno u JS-u, ne u CSS-u: klasa dolazi samo kad stvarno viri
   preko poda smanjenja, pa se ne vraća lažni scrollbar na sub-pixel prelijev
   koji su Android WebViewi crtali na svakoj kviz opciji (Ivo, 2026-07-18). */
/* Formula koju je fit-pass morao smanjiti dobiva natrag bočni padding kartice
   — 2×14px je skoro 10% širine telefona i često je razlika između "stane" i
   "ne stane". Selektor mora nadglasati `.chunk-card mjx-container[display]`
   koji taj padding postavlja s !important. */
mjx-container.math-wide,
.chunk-card mjx-container[display="true"].math-wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

mjx-container.math-scrolls {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
mjx-container:not([display="true"]).math-scrolls {
    display: block !important;
    vertical-align: baseline;
    margin: 0.25em 0;
}
mjx-container.math-scrolls::-webkit-scrollbar { height: 4px; }
mjx-container.math-scrolls::-webkit-scrollbar-track { background: transparent; }
mjx-container.math-scrolls::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .45);
    border-radius: 4px;
}
html.dark-theme mjx-container.math-scrolls::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .5);
}

/* Osigurava da se sam tekst ne širi.
   `clip` umjesto `hidden` (Ivo, 2026-08-04): hidden na jednoj osi po specu
   tiho pretvara `visible` druge osi u `auto`, pa je SVAKI .prose postao
   scroll-kontejner — na Androidu je svaka kviz opcija uz sub-pixel overflow
   MathJax SVG-a crtala vlastiti scrollbar palac. clip reže jednako, ali ne
   stvara scroller; hidden ispod ostaje kao fallback za starije browsere. */
.prose, .script-view {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    word-wrap: break-word; /* Lomi dugačke riječi ako treba */
}


/* Progress Circle Styles */
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
/* Zakljucana stavka izbornika: ikona i natpis blijede, katanac ostaje citak
   (Ivo, 10.09.2026. — nacrtao katance uz mentora, plan i Kolege). */
.nav-zakljucano > span:not(.nav-katanac) {
    filter: grayscale(1);
    opacity: .55;
}
.nav-katanac {
    font-size: .95rem;
    line-height: 1;
    flex: none;
    opacity: .85;
}

/* Prozor: sto je znacajka, jedna recenica, i jedan put dalje. */
.zak-sloj {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.zak-karta {
    width: 100%;
    max-width: 20rem;
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
}
.zak-karta-znak { font-size: 1.9rem; line-height: 1; margin-bottom: .5rem; }
.zak-karta-ime { font-size: 1rem; font-weight: 800; color: #0f172a; }
.zak-karta-opis {
    font-size: .8125rem;
    line-height: 1.35;
    color: #64748b;
    margin: .4rem 0 1rem;
}
.zak-karta-dalje {
    width: 100%;
    border: 0;
    border-radius: .75rem;
    padding: .7rem 1rem;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: .875rem;
    cursor: pointer;
}
.zak-karta-ne {
    width: 100%;
    margin-top: .5rem;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
html.dark-theme .zak-karta { background: #0f172a; }
html.dark-theme .zak-karta-ime { color: #e2e8f0; }

/* ── ODABIR PREDMETA U V2: KLIZANJE PO GODINAMA (Ivo, 10.09.2026.) ───────
   „da ide glatko po ekranima-godinama kao na pozadini mobitela."
   Traka nosi tri ploce (prethodna godina, tekuca, sljedeca) i pomice se
   zajedno s prstom. `touch-action: pan-y` pusta okomiti skrol popisu, a
   vodoravni traci. */
/* PLOCICE IDU DO RUBA EKRANA (Ivo, 10.09.2026.: „kad slajdan, plocica neide
   do kraja ekrana nego neki kao prazni prostor se pojavi (…) kao da je ikona
   odrezana").

   Okvir je bio uzi od zaslona za rub sloja, pa je pri klizanju izmedu dvije
   ploce nastajala prazna traka siroka dva takva ruba — a plocica je izgledala
   odrezano. Sada je okvir SIROK KOLIKO I ZASLON, a rub je njegov PADDING:
   `overflow` reze na padding-boxu, pa susjedna ploca kliznuvsi u taj rub jos
   uvijek biva nacrtana. Plocice zato u mirovanju stoje uvuceno kao i prije, a
   pri klizanju teku bez praznine, do samog ruba zaslona. */
.v2-sem-okvir {
    overflow-x: hidden;
    touch-action: pan-y;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    /* Zadano: okvir je sirok koliko i stupac uhodavanja. */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
/* PUNI BLEED SAMO DOK JE ZASLON UZI OD STUPCA (Drago QA 16.09.2026.): `width:
   100vw` uz negativne margine bjezalo je iz `.v2-tijelo` (max-width: 480px, a
   uz `overflow-y: auto` mu je `overflow-x` po specifikaciji auto, dakle REZE).
   Na tabletu i desktopu su zato lijevi i desni stupac plocica lezali izvan
   reza: 6 od 9 predmeta prve godine nije se moglo ni vidjeti ni kliknuti (klik
   na njihovo srediste padao je na `.v2-overlay`, brojac je ostajao 0), a ni
   vodoravni skrol ih nije dosezao. Do 512 px (480 stupac + 2x16 padding) je
   100vw upravo sirina stupca, pa ondje pravilo vrijedi kao i dosad. */
@media (max-width: 512px) {
    .v2-sem-okvir {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}
.v2-sem-traka { display: flex; align-items: flex-start; will-change: transform; }
.v2-sem-ploca { flex: 0 0 100%; min-width: 100%; }
/* TOCNO DVIJE PLOCICE PO RETKU (Ivo, 10.09.2026.: „mislim da budu dvi plocice
   po retku"). Otkad okvir ide preko cijelog zaslona, `auto-fill` je dobio
   mjesta za TRI stupca i nazivi su se rezali („Matemati", „Uvod u racunarst").
   Broj stupaca je odluka, ne posljedica sirine. */
/* DVA STUPCA I NA SIROKOM ZASLONU (Drago QA 16.09.2026.): tri stupca su bila
   vezana uz `@media (min-width: 700px)`, a medijski upit mjeri PROZOR dok
   mreza zivi u stupcu od 480 px. Otkad okvir vise ne bjezi iz tog stupca (v.
   gore), tri stupca ondje znace ~146 px po plocici i opet rezani nazivi. */
.v2-sem-ploca > .v2-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Savjet u prozoru poglavlja je DODIRLJIV (Drago, 10.09.2026.: „kaze ponovi
   taj dio skripte a ne nudi mi je otvorit"). Bez treceg gumba: obecanje se
   ispunjava ondje gdje je i dano. */
.kmap-advice--klik { cursor: pointer; }
.kmap-advice--klik:active { transform: scale(.995); }
.kmap-advice-cta { margin-top: .5rem; font-size: .75rem; font-weight: 800; color: #1d4ed8; }

/* ── ZAKLJUCANA ZNACAJKA (Ivo, 10.09.2026.) ──────────────────────────────
   „zasivi i stavi katanaca na znacajke koje su zakljucane."

   Sadrzaj ostaje gdje jest, samo bez boje i bez dodira; preko njega stoji
   tipka s katancem koja nudi racun. Prazan ekran ne kaze sto propustas — ovo
   kaze i to i sto treba uciniti. */
.zakljucano { position: relative; }
/* MALO PROZIRNO, BEZ SIVILA (Ivo, 10.09.2026.: „blize originalu samo tekst da
   je malo proziran"). Prozirnost dovoljno kaze „ne sada", a kutija ostaje ono
   sto jest; `grayscale` je od plave tipke radio olovnu plocu.

   Selektor ide na DJECU: omotaca (`.zakljucano-sadrzaj`) vise nema — bio je
   jedino dijete flex spremnika i traka pokazatelja je zbog njega pala iz
   retka u stupac. Dok je stajao ovdje, a u JS-u ga vise nije bilo, NISTA se
   nije zatamnjivalo — vidio se samo katanac. */
.zakljucano > *:not(.zakljucano-katanac) {
    opacity: .5;
    /* MALO SIVILA, NE OLOVNA PLOCA (Ivo, 10.09.2026.: „ovo u predmetu bi isto
       zasivija malo"). Pola zasicenja: plava kartica Mape znanja se povuce iza
       katanca, ali se i dalje vidi da je to ona ista kartica. Puni `grayscale`
       je vec jednom bio i bio je „pretjerano". */
    filter: grayscale(.5);
    pointer-events: none;
    user-select: none;
}
/* ZAKLJUCANA KUTIJA NEMA POZIVA NA RADNJU (Ivo, 10.09.2026.: „ovaj samo mali
   krug za poslat pitanje ispod katanca, to makni dok je zakljucano" i „ove
   tipke ispod katanca bi maknija dok je zakljucano"). Katanac stoji tocno nad
   njima, pa se kroz njega naziru dva znaka jedan preko drugoga; a tipka koja
   nista ne radi — sve unutra je vec `pointer-events: none` — samo obecava
   radnju koje nema. Ostaje NASLOV i TEKST: oni kazu sto je iza katanca.

   POPIS JE IMENOVAN, NE „sve tipke". Prvo je ovdje stajalo
   `.zakljucano button:not(.zakljucano-katanac)`, i to je pojelo traku
   pokazatelja na pocetnoj (razina, niz, cilj, XP) — njene su plocice
   `<button>`, ali su SADRZAJ, ne poziv na radnju (Ivo, 10.09.2026.: „fale mi
   ode one ikone"). Zato se imenuje ono sto doista zove na radnju. */
.zakljucano .dash-resume-btn,
.zakljucano .kd-cta,
.zakljucano .kd-sub,
.zakljucano .kmap-advice-cta,
.zakljucano .dash-chatbar-send { display: none; }
/* Zadano: znak u kutu. Povrsina cijelog bloka i dalje prima dodir, ali se
   ne pise nista — sivilo je vec receno, katanac kaze zasto (Ivo, 10.09.2026.:
   „pojednostavni prikaz"). Puna recenica dolazi uz `.zk-pilula-sredina`. */
.zakljucano-katanac {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: .45rem;
}
.zakljucano-katanac.zk-sredina {
    align-items: center;
    justify-content: center;
    padding: 0;
}
.zakljucano-katanac:not(.zk-sredina) .zk-tekst { display: none; }
.zakljucano-katanac:not(.zk-sredina) .zk-pilula {
    padding: .22rem .42rem;
    font-size: .95rem;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .16);
}
.zakljucano-katanac .zk-pilula {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .92);
    color: #1d4ed8;
    font-size: .75rem;
    font-weight: 800;
    border-radius: 999px;
    padding: .3rem .75rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .14);
    white-space: nowrap;
}
.zakljucano-katanac:active .zk-pilula { transform: scale(.97); }
html.dark-theme .zakljucano-katanac .zk-pilula {
    background: rgba(15, 23, 42, .92);
    color: #93c5fd;
}

/* ── ODABIR PREDMETA: DVA STUPCA I ZAMAH PO SEMESTRIMA (Ivo, 10.09.2026.) ─
   „ovo je izgledalo bolje kao u dva stupca (…) kad se scrolla livo desno neka
   se pokazuje slide ikona iz susjednog ekrana."

   Broj stupaca je posao CSS-a, ne JS-a: na uskom telefonu dva, na sirokom
   ekranu tri. Traka nosi tri ploce (prethodni, tekuci, sljedeci semestar) i
   pomice se zajedno s prstom, pa se susjedni semestar vidi dok potez traje.
   `touch-action: pan-y` pusta okomiti skrol popisu, a vodoravni nama. */
.setup-mreza {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}
@media (min-width: 900px) {
    .setup-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.setup-sem-okvir {
    overflow: hidden;
    touch-action: pan-y;
}
.setup-sem-traka {
    display: flex;
    align-items: flex-start;
    will-change: transform;
}
.setup-sem-ploca {
    flex: 0 0 100%;
    min-width: 100%;
}
/* Uzi stupac znaci uzi naslov: tri retka umjesto dva, i manja slova, da
   „Osnove umjetne inteligencije" stane bez rezanja na pola rijeci. */
.setup-plocica .flex-1 {
    -webkit-line-clamp: 3 !important;
    font-size: 0.8125rem;
    line-height: 1.15rem;
    word-break: break-word;
}

/* ── PRIJAVA PREKO CIJELOG EKRANA NA MOBITELU (Ivo, 10.09.2026.) ─────────
   „ovaj prozor za prijavu neka bude full screen ne floating."

   Kartica `max-w-sm` na mobitelu suzava obrazac bez potrebe, a tipkovnica je
   pri otvaranju gura pa polja odu pod rub. Na tabletu i stolnom racunalu
   kartica ostaje — ondje bi cijeli ekran izgledao kao kvar.

   Selektori idu preko ID-a jer utility klase iz prekompajliranog Tailwinda
   nose `!important`; veca specificnost je jedini nacin da pravilo prode. */
@media (max-width: 767px) {
    #auth-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }
    #auth-modal-content {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Zaglavlje ispod statusne trake, a ne pod njom. */
    #auth-modal-content > div:first-child {
        padding-top: calc(1rem + var(--safe-top, 0px)) !important;
        flex: none;
    }
    /* Tijelo se skrola samo za sebe: kad tipkovnica pojede pola ekrana,
       polje ostaje dohvatljivo umjesto da cijeli sloj ode gore. */
    #auth-modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(1.5rem + var(--safe-bottom, 0px)) !important;
    }
}

.stat-modal-overlay {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}


/* --- FINO PODEŠAVANJE ZA LATEX U GUMBIMA --- */
.tutor-suggestion-btn {
    /* Povećavamo line-height da visoki simboli poput Sume ne lome tekst */
    line-height: 1.6 !important; 
}

.tutor-suggestion-btn mjx-container {
    margin: 0 3px !important;
    display: inline-block !important;
    
    /* KLJUČNO ZA VISINU: 
       Umjesto 'middle', spuštamo formulu malo dolje.
       Ovo rješava problem da u_n izgleda kao da lebdi. */
    vertical-align: -0.4ex !important; 
    
    /* Malo smanjujemo font matematike unutar gumba (na 95%) 
       kako bi se bolje uklopio u tekući tekst */
    font-size: 95% !important;
}

/* Dodatni osigurač za SVG renderiranje (najčešće u MathJax 3) */
.tutor-suggestion-btn mjx-container > svg {
    display: inline-block;
    vertical-align: middle; 
}

/* Uklanjamo padding s glavnog kontejnera jer smo ga dodali unutar samih kutija (chunkova) */
.chunk-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: transparent !important; /* Osigurava da se vidi siva pozadina aplikacije */
}

/* Osiguravamo da su formule unutar bijelih kutija dobro centrirane */
.chunk-container .bg-white mjx-container[display="true"] {
    margin: 1.5em 0 !important;
}

/* Dodatni spacing za slike unutar okvira */
.chunk-container .script-image {
    margin-top: 1.5rem;
    border: 1px solid #f1f5f9;
}








/* --- OPTIMIZACIJA ZA MOBITEL (OD RUBA DO RUBA) --- */
@media (max-width: 768px) {

    /* 1. ŠIRINA KONTEJNERA: Smanjujemo padding cijelog ekrana skripte */
    #view-script {
        padding-left: 4px !important;  /* Minimalni razmak od lijevog ruba */
        padding-right: 4px !important; /* Minimalni razmak od desnog ruba */
    }

    /* 2. TAILWIND PROSE RESET: Ovo popunjava "prazno mjesto s desne strane" */
    /* Scoped na #view-script tako da ne forsira širinu na chat bubble-e
       (koji isto koriste .prose za markdown rendering ali se trebaju
       skupiti na sadržaj). */
    #view-script .prose {
        max-width: 100% !important; /* Prisiljava tekst da ide do desnog ruba */
        min-width: 100% !important;
    }

    /* 3. GLAVNI NASLOV: Pomičemo "1. Uvod..." skroz ulijevo */
    #view-script .prose h1 {
        margin-left: 0 !important;
        padding-left: 2px !important;
        font-size: 1.3em !important; /* Malo manji font da stane u jedan red ako je moguće */
        text-align: left !important;
    }

    /* 4. HIJERARHIJA (LINIJA I PODNASLOVI): Smanjujemo "stepenice" */
    /* Ovo cilja vertikalnu liniju i uvlačenje podnaslova (1.1, 1.2...) */
    .ml-2.pl-4.border-l-2.border-slate-200 {
        margin-left: 2px !important;    /* Linija se miče skroz ulijevo */
        padding-left: 8px !important;   /* Smanjuje razmak između linije i teksta podnaslova */
    }

    /* 5. GUMBI PODNASLOVA: Da ne bježe udesno */
    [id^="btn-chunk-"] {
        padding-left: 0 !important;
        margin-left: 0 !important;
        font-size: 0.95rem !important; /* Čitljiviji naslov na mobitelu */
    }

    /* 6. OBLAČIĆ (BIJELI OKVIR): Širimo ga da iskoristi sav dobiveni prostor */
    .chunk-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important; 
    }

    /* Unutarnji stil oblačića */
    .chunk-container .bg-white.border.rounded-xl {
        width: 100% !important;
        margin: 0 !important;
        /* Side padding trimmed 10px → 6px so the reveal boxes inside get the
           width back (Ivo, 2026-07-27: "neka ovi boxovi budu malo širi").
           The bottom is a STRIP FOR THE CHEVRONS: they are absolutely
           positioned at the card's bottom, and this rule — four classes, so
           it outranks `.carousel-stage > .chunk-card` — was quietly winning
           with 12px and letting them sit on top of the last box. */
        padding: 12px 6px 53px !important;
        border-radius: 6px !important; /* Manji radius da izgleda "ozbiljnije" na malom ekranu */
    }
    /* Only the carousel has chevrons; a lone card keeps the tight bottom. */
    .chunk-container:not(.carousel-stage) .bg-white.border.rounded-xl {
        padding-bottom: 12px !important;
    }
    
    /* 7. FORMULE (MathJax): Prisiljava scroll ako je formulu nemoguće stisnuti */
    mjx-container[display="true"] {
        margin: 0.5em 0 !important;
        padding: 5px 0 !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }
}

/* =============================================
   CLASSMATES / CLASSROOM
   ============================================= */
html.dark-theme #view-classmates { background-color: #1f1e1d; }
html.dark-theme #view-classmates .bg-white { background-color: #2a2927; }
html.dark-theme #view-classmates .border-slate-200 { border-color: #3b3a37; }
html.dark-theme #view-classmates .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-classmates .text-slate-500,
html.dark-theme #view-classmates .text-slate-400 { color: #94a3b8; }
html.dark-theme #view-classmates .bg-slate-50 { background-color: #1f1e1d; }
html.dark-theme #view-classmates .bg-slate-100 { background-color: #3b3a37; }
html.dark-theme #view-classmates input,
html.dark-theme #view-classmates textarea { background-color: #1f1e1d; border-color: #3b3a37; color: #e2e8f0; }

/* =============================================
   MENTOR PORTRAIT (Savonius / Savoniusa + moods)
   ============================================= */
.mentor-portrait-wrap {
    position: relative;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s ease;
}
.mentor-portrait-wrap:hover { transform: scale(1.04); }

.mentor-portrait-glow {
    position: absolute;
    inset: -10px;
    border-radius: 9999px;
    filter: blur(22px);
    opacity: .55;
    transition: background-color .6s ease, opacity .6s ease;
    z-index: 0;
}
.mentor-portrait-glow.mood-neutral   { background-color: #c4b5fd; }
.mentor-portrait-glow.mood-happy     { background-color: #fde68a; opacity: .75; }
.mentor-portrait-glow.mood-proud     { background-color: #86efac; opacity: .7; }
.mentor-portrait-glow.mood-concerned { background-color: #fca5a5; opacity: .6; }
.mentor-portrait-glow.mood-thinking  { background-color: #93c5fd; opacity: .55; }

.mentor-portrait-img {
    position: relative;
    z-index: 1;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    object-fit: cover;
    object-position: center 18%;
    box-shadow: 0 12px 28px -8px rgba(30,41,59,.35);
    border: 3px solid #fff;
    animation: mentor-breathe 4.2s ease-in-out infinite;
    transition: opacity .25s ease;
}
html.dark-theme .mentor-portrait-img { border-color: #2a2927; }

@keyframes mentor-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

.mentor-portrait-wrap.mood-concerned .mentor-portrait-img { filter: saturate(.9); }
.mentor-portrait-wrap.mood-thinking  .mentor-portrait-img { animation-duration: 6s; }

/* Speaking pulse — applied while the greeting / chat reply is streaming */
.mentor-portrait-wrap.is-speaking .mentor-portrait-img {
    animation: mentor-speaking .6s ease-in-out infinite;
}
@keyframes mentor-speaking {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.5px); }
}

@media (max-width: 768px) {
    .mentor-portrait-wrap,
    .mentor-portrait-img { width: 8rem; height: 8rem; }
}
html.dark-theme .classroom-subtabs { background-color: #2a2927; border-color: #3b3a37; }

/* =============================================
   CONCEPT CROSS-REFERENCE LINKS
   Inline anchors emitted by services/concept_refs.py for {ref:...}
   tokens. Click-to-navigate handled by openConceptRef() in app.js.
   ============================================= */
a.concept-ref {
    color: #2563eb;            /* blue-600 */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #93c5fd;   /* blue-300 dashed underline */
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    padding: 0 1px;
    border-radius: 2px;
}
a.concept-ref:hover {
    color: #1d4ed8;            /* blue-700 */
    border-bottom-color: #2563eb;
    background-color: #eff6ff; /* blue-50 */
}
a.concept-ref:focus-visible {
    outline: 2px solid #3b82f6;  /* blue-500 */
    outline-offset: 2px;
}
html.dark-theme a.concept-ref {
    color: #60a5fa;            /* blue-400 in dark */
    border-bottom-color: #1e40af;
}
html.dark-theme a.concept-ref:hover {
    color: #93c5fd;
    background-color: #1e3a8a33;
}

/* =============================================
   TEXTBOOK CHUNK STYLE — promoted from GUI_comparisons test bench.
   Light = variant B (pure black 400 / 700)
   Dark  = variant A (slate-400 body / slate-100 800 bold)
   Title = banner-minimal-underline; Layout = carousel; Arrows = corner
   ============================================= */

/* Variant B: chunk body in light mode */
.chunk-container { color: #000000; font-weight: 400; }
.chunk-container strong { color: #000000; font-weight: 700; }
.chunk-container h3,
.chunk-container h4 { color: #000000; font-weight: 700; font-size: 1.1em; line-height: 1.35; }

/* Variant A: chunk body in dark mode */
html.dark-theme .chunk-container { color: #94a3b8; font-weight: 400; }
html.dark-theme .chunk-container strong { color: #f1f5f9; font-weight: 800; }
html.dark-theme .chunk-container h3,
html.dark-theme .chunk-container h4 { color: #f1f5f9; font-weight: 800; }

/* Each part card is the carousel stop and the anchor for corner arrows */
.chunk-card { position: relative; }

/* Banner-minimal: first chunk h4 becomes a centered title with hairline */
.chunk-card.banner-minimal > h4:first-child {
    display: block;
    text-align: center;
    margin: -0.25rem -1.25rem 1.125rem -1.25rem;
    padding: 0 1.25rem 0.625rem 1.25rem;
    border-bottom: 2px solid #e2e8f0;
    font-size: 1.05em;
    border-radius: 0;
    line-height: 1.35;
}
@media (min-width: 768px) {
    .chunk-card.banner-minimal > h4:first-child {
        margin: -0.25rem -1.75rem 1.125rem -1.75rem;
        padding: 0 1.75rem 0.625rem 1.75rem;
    }
}
html.dark-theme .chunk-card.banner-minimal > h4:first-child {
    border-bottom-color: #3b3a37;
}

/* Corner-button carousel arrows (small chevrons in card top corners) */
.title-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    height: 28px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0 0.5rem;
}
.title-arrow .arrow-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.title-arrow .arrow-chevron {
    font-size: 1rem;
    line-height: 1;
}
.title-arrow:hover:not(:disabled) {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}
.title-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.title-arrow.corner {
    /* Anchor the prev/next chevrons to the BOTTOM corners of the chunk
       card. Previously top: 8px — putting them at the bottom keeps the
       title clean and matches reading flow (you navigate after you've
       finished the card content). */
    position: absolute;
    bottom: 8px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.85);
}
.title-arrow.corner.prev { left: 10px; }
.title-arrow.corner.next { right: 10px; }
/* Reserve enough bottom padding inside the chunk card so the absolute-
   positioned chevrons don't overlap the last line of content. Only
   applied when the carousel is active (>=2 cards). */
.carousel-stage > .chunk-card {
    /* Strip for the chevrons: they are 28 px tall and sit 9 px off the card's
       bottom edge, so 53 px leaves a ~16 px breath under the last element.
       In PX on purpose — the chevrons don't grow with the reader's font
       setting, so a rem reserve over-shot at the larger sizes (Ivo,
       2026-07-27: first they overlapped, then they were "pre daleko"). */
    padding-bottom: 53px;
}
/* The reserve only works if the last element's bottom edge is predictable.
   A trailing margin (12 px under the last reveal) made the same reserve read
   as 51 px of dead space, while the button case — no margin — nearly
   collided. Zero them so both land in the same place. */
.chunk-card > .wex-solution { margin-bottom: 0; }
.wex-solution > details.wex-step:last-child { margin-bottom: 0 !important; }
/* Worked examples stack boxes inside the card, so the card's own side padding
   is doubled framing — each box already has its border. Trim it on phones so
   the boxes get the width back; the desktop card is wide enough not to care. */
@media (max-width: 640px) {
    .carousel-stage > .chunk-card { padding-left: 0.6rem; padding-right: 0.6rem; }
}
html.dark-theme .title-arrow {
    border-color: #3b3a37;
    color: #cbd5e1;
}
html.dark-theme .title-arrow:hover:not(:disabled) {
    background: #3b3a37;
    color: #f1f5f9;
    border-color: #475569;
}
html.dark-theme .title-arrow.corner { background: rgba(30, 41, 59, 0.85); }

/* =============================================
   MASCOT WELCOME SPLASH
   ============================================= */
.mascot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    /* UVOD SE REZAO NA 320x568 (Drago QA 16.09.2026.): stupac uvoda je na
       niskom zaslonu visok 623 px, a `justify-content: center` uz
       `overflow: hidden` je visak dijelio na OBA kraja: prvi redak pozdrava
       odrezan gore, „Vec imam racun" 11 px ispod donjeg ruba, i nista se nije
       dalo povuci. Isti recept kao `.v2-tijelo`: `safe center` pada na start
       kad sadrzaj ne stane, a skrol je uzmak za slucaj da ni smanjeni stupac
       (v. @media max-height: 640px nize) ne stane. */
    justify-content: center;
    justify-content: safe center;
    align-items: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 50%, #f0f9ff 100%);
    overflow-x: hidden;
    overflow-y: auto;
    animation: mascot-splash-in 0.4s ease-out;
    cursor: pointer;
}

.mascot-splash--out {
    /* Duration matches mascot's launch arc (~1.5s wall time after the
       flyaway phase-skip in mascot-splash.js dismissSplash()), so the
       splash fades away in parallel with the mascot rocketing up. */
    animation: mascot-splash-out 1.5s ease-in forwards;
    pointer-events: none;
}

.mascot-splash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.mascot-splash-bg::before,
.mascot-splash-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.mascot-splash-bg::before {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 70%);
    animation: mascot-pulse 4s ease-in-out infinite;
}

.mascot-splash-bg::after {
    width: 400px;
    height: 400px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    animation: mascot-pulse 5s ease-in-out infinite 1s;
}

.mascot-splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
    cursor: default;
    padding: 1rem;
}

.mascot-stage {
    display: flex;
    flex-direction: column-reverse;       /* bubble (DOM-2nd) on top, mascot below */
    align-items: center;
    justify-content: center;
    gap: 1.1rem;                          /* room for the downward tail (16px) */
    flex-wrap: nowrap;
}

/* Maskota se na uvodnom ekranu smije uhvatiti, podignuti i gurnuti
   (Ivo, 10.09.2026.) — `touch-action: none` znaci da povlacenje po njoj NIJE
   skrol stranice, a `cursor: grab` to kaze i misu. */
.mascot-image-wrap {
    width: 240px;
    height: 320px;                           /* 3:4 to match stage ratio */
    flex-shrink: 0;
    animation: mascot-bob 3.2s ease-in-out infinite;
    filter: drop-shadow(0 22px 25px rgba(30, 64, 175, 0.25));
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.mascot-image-wrap:active { cursor: grabbing; }

.mascot-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    /* Entry pop only — Rive runtime drives the "alive" feel via bone        */
    /* keyframes, so we just give the canvas a soft scale-in on mount.       */
    animation: mascot-scale-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mascot-speech-bubble {
    background: white;
    padding: 1.1rem 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 18px 40px -12px rgba(30, 64, 175, 0.35);
    max-width: min(85vw, 22rem);
    text-align: center;
    position: relative;
    transform-origin: bottom center;     /* bubble pops up out of the mouth */
    /* Pop in shortly after the mascot lands. Delay kept SHORT — a long
       delay with `both` fill leaves the bubble invisible if the browser
       throttles animations (background tab at load), which reads as a
       broken empty screen. initSplash() also force-reveals at 2.5s.    */
    animation: mascot-bubble-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

/* Comic-strip tail: triangle pointing DOWN from the bubble toward the mouth */
.mascot-speech-bubble::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 11px 0 11px;
    border-color: white transparent transparent transparent;
    filter: drop-shadow(0 3px 3px rgba(30, 64, 175, 0.12));
}

.mascot-greeting {
    font-weight: 800;
    font-size: 1.4rem;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.mascot-catchphrase {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0.4rem 0 0;
    line-height: 1.4;
    min-height: 1.4em;
}

.mascot-skip-btn {
    /* ISTA pilula kao .v2-dalje i CTA-i kroz aplikaciju (Drago, 08.09.:
       „kakve su pilule u appu takve trebaju biti u onboardingu") — bila
       je plavo-ljubičasta i uža, jedina drukčija u cijelom toku. */
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: white;
    padding: 13px 38px;
    width: min(280px, 75vw);
    border-radius: 16px;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.25s ease;
    /* Pop in just after the speech bubble (which pops at 0.9s).      */
    animation: mascot-bubble-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
    border: none;
    cursor: pointer;
}

.mascot-skip-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 32px -5px rgba(59, 130, 246, 0.65);
}

.mascot-skip-btn:active {
    transform: translateY(0) scale(0.97);
}

/* DRUGA TIPKA UVODA — „Već imam račun" (Ivo, 09.09.2026.).
   Ista širina i oblik kao glavna, ali obrisna: prvi ekran nudi dva puta, a
   samo jedan od njih je onaj kojim ide većina. Pojavljuje se korak iza glavne
   da se redoslijed čita sam od sebe. */
.mascot-second-btn {
    background: transparent;
    color: #1d4ed8;
    padding: 12px 30px;
    margin-top: 10px;
    width: min(280px, 75vw);
    border-radius: 16px;
    border: 2px solid rgba(29, 78, 216, 0.35);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    animation: mascot-bubble-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both;
}

.mascot-second-btn:hover {
    background: rgba(29, 78, 216, 0.06);
    border-color: rgba(29, 78, 216, 0.55);
}

.mascot-second-btn:active { transform: scale(0.97); }

/* KLASA JE `dark-theme`, NE `dark` (Drago QA 16.09.2026.): pravilo je ciljalo
   `html.dark`/`body.dark`, a settings.js na korijen stavlja `dark-theme`, pa se
   tamna inacica nikad nije primijenila i „Vec imam racun" ostajao je #1d4ed8 na
   splashu #1f1e1d, kontrast 2,48:1. Bilo je to jedino mjesto s golim `dark` u
   cijelom style.css. */
html.dark-theme .mascot-second-btn {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.45);
}

/* ---- Hero gamification chips (dashboard) ---- */
.hero-gamify {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
    justify-content: center;
}
/* First run only (no cached values yet): hold the strip's height so the hero
   doesn't grow — and push the whole page down — when the chips land. 46px is
   the measured height of the filled strip (tallest chip = the ringed level). */
.hero-gamify:empty { min-height: 46px; }
.hg-chip {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(37,99,235,.18);
    box-shadow: 0 4px 14px -6px rgba(30,64,175,.25);
    color: #1e293b; border-radius: 999px; padding: 6px 14px 6px 8px;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
    animation: hg-in .4s ease-out both;
}
/* No per-chip stagger. The chips are one strip, not four arrivals — the
   .06/.12/.18s delays made the hero look like it was still assembling
   itself every single time home opened. */
.hg-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(30,64,175,.35); }
.hg-chip:active { transform: scale(.97); }
.hg-done { border-color: rgba(22,163,74,.5); background: rgba(240,253,244,.9); }
.hg-icon-wrap { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.hg-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hg-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; }
.hg-emoji { font-size: 18px; width: 30px; text-align: center; }
/* Minimal badge chips (⚡ XP · 🔥 streak · 🎯 quests) — icon + value only,
   uniform height so the whole row reads as one clean strip. */
.hg-badge { gap: 5px; padding: 8px 14px 8px 10px; }
.hg-badge .hg-emoji { width: auto; }
.hg-badge .hg-txt b { font-size: 14.5px; }
.hg-streak .hg-txt b { color: #c2410c; }
html.dark-theme .hg-streak .hg-txt b { color: #fb923c; }
/* Level chip = the ringed icon alone (tap → Razine genija; name in tooltip). */
.hg-level { padding: 5px 7px; }

/* Modal close (×) — a real 36×36 hit area instead of a bare glyph.
   Shared by every modal header (leaderboard, settings, stats, auth…). */
.modal-x {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 1.45rem; line-height: 1; border-radius: 0.6rem;
    transition: background-color .15s ease, color .15s ease;
}
.modal-x:hover { background: rgba(255,255,255,.12); }
.hg-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.hg-txt b { font-size: 13.5px; font-weight: 800; color: #1e40af; }
.hg-txt small { font-size: 10.5px; color: #64748b; }
html.dark-theme .hg-chip { background: rgba(30,41,59,.85); border-color: rgba(148,163,184,.25); color: #e2e8f0; }
html.dark-theme .hg-txt b { color: #93c5fd; }
html.dark-theme .hg-txt small { color: #94a3b8; }
@keyframes hg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Level-up celebration (confetti + card) ---- */
.levelup-overlay {
    position: fixed; inset: 0; z-index: 10060;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
    animation: hg-in .25s ease-out;
    cursor: pointer;
}
.levelup-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.levelup-confetti i {
    position: absolute; top: -16px; border-radius: 2px; opacity: .95;
    animation-name: confetti-fall; animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); }
    100% { transform: translateY(105vh) rotate(660deg); opacity: .8; }
}
.levelup-card {
    position: relative; background: linear-gradient(160deg,#1e3a8a,#2563eb);
    color: #fff; border-radius: 24px; padding: 34px 46px; text-align: center;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
    animation: levelup-pop .5s cubic-bezier(.34,1.56,.64,1);
    cursor: default;
}
@keyframes levelup-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.levelup-icon { font-size: 56px; line-height: 1; margin-bottom: 10px; animation: levelup-bounce 1.4s ease-in-out infinite; }
@keyframes levelup-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.levelup-title { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #bfdbfe; }
.levelup-name { font-size: 30px; font-weight: 900; margin: 4px 0 18px; }
.levelup-btn {
    background: #fbbf24; color: #78350f; border: none; cursor: pointer;
    font-weight: 800; font-size: 14px; padding: 10px 30px; border-radius: 999px;
    transition: transform .15s ease; box-shadow: 0 10px 24px -8px rgba(251,191,36,.7);
}
.levelup-btn:hover { transform: translateY(-2px) scale(1.04); }

/* X GORE UMJESTO GUMBA DOLJE (Drago, 23.09.2026.: „bez ovog idemo nego
   samo moze biti x gore kao kod svih popupova"). Isti oblik kao
   .streak-modal-x, samo u bojama plave kartice na kojoj stoji. */
.levelup-x {
    position: absolute; top: .6rem; right: .7rem;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 13px; font-weight: 800; cursor: pointer; line-height: 1;
    display: grid; place-items: center;
    transition: background .15s ease, transform .12s ease;
}
.levelup-x:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) {
    .levelup-x:hover { background: rgba(255, 255, 255, .3); }
}
@media (prefers-reduced-motion: reduce) { .levelup-x { transition: none; } }

/* ---- Liga genija modal: entrance choreography ---- */
.lb-podium .lb-pod-col { animation: pod-rise .5s cubic-bezier(.34,1.56,.64,1) both; }
.lb-podium .lb-pod-col:nth-child(1) { animation-delay: .12s; }
.lb-podium .lb-pod-col:nth-child(2) { animation-delay: 0s; }
.lb-podium .lb-pod-col:nth-child(3) { animation-delay: .2s; }
@keyframes pod-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lb-pod-stand-1 { position: relative; overflow: hidden; }
.lb-pod-stand-1::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
    animation: gold-shimmer 2.6s ease-in-out infinite; left: -60%;
}
@keyframes gold-shimmer { 0% { left: -60%; } 55% { left: 120%; } 100% { left: 120%; } }
.lb-row { animation: hg-in .35s ease-out both; }
.lb-row-you { animation: you-pop .55s cubic-bezier(.34,1.56,.64,1) both .25s; }
@keyframes you-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ---- Liga genija: "your level" strip + level badge ---- */
#leaderboard-modal-body { padding: 1rem 1.25rem; }
.lb-mylevel {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff; border-radius: 12px; padding: 9px 14px; margin-bottom: 9px;
}
.lb-ml-icon { font-size: 23px; line-height: 1; flex-shrink: 0; }
.lb-ml-info { flex: 1; min-width: 0; }
.lb-ml-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lb-ml-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #bfdbfe; }
.lb-ml-name { font-size: 15px; font-weight: 800; }
.lb-ml-bar { height: 6px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.lb-ml-fill { height: 100%; background: #fbbf24; border-radius: 999px; transition: width .5s ease; }
.lb-ml-sub { font-size: 11px; color: #dbeafe; margin-top: 3px; }

.lb-badge { font-size: 13px; margin-right: 4px; vertical-align: -1px; }

.lb-countdown {
    text-align: center; font-size: 11.5px; font-weight: 700; color: #b45309;
    background: #fef3c7; border-radius: 8px; padding: 5px; margin-bottom: 9px;
}
html.dark-theme .lb-countdown { background: #422006; color: #fbbf24; }

.lb-flame { font-size: 11px; margin-left: 5px; color: #ea580c; font-weight: 700; }

/* Arcade "+N XP" reward — big, floats up over the question card. */
.xp-toast {
    position: fixed; left: 50%; top: 40%;
    /* Above EVERY overlay (the daily-challenge modal sits at ~2.1e9) so the
       celebration is never hidden behind a modal. */
    z-index: 2147483647; pointer-events: none; text-align: center;
    animation: xp-float 2s ease-out forwards;
}
.xp-toast-main {
    display: inline-block; font-size: 46px; font-weight: 900; color: #16a34a;
    text-shadow: 0 0 22px rgba(34,197,94,.5), 0 3px 10px rgba(0,0,0,.18);
    letter-spacing: -0.01em;
}
.xp-toast-lucky .xp-toast-main {
    color: #d97706;
    text-shadow: 0 0 26px rgba(251,191,36,.7), 0 3px 10px rgba(0,0,0,.18);
}
.xp-toast-combo {
    display: block; margin-top: 4px; font-size: 18px; font-weight: 800; color: #ea580c;
    text-shadow: 0 1px 6px rgba(255,255,255,.7);
}
@keyframes xp-float {
    0%   { opacity: 0; transform: translate(-50%, 16px) scale(.5); }
    18%  { opacity: 1; transform: translate(-50%, 0) scale(1.25); }
    32%  { transform: translate(-50%, -4px) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -90px) scale(.95); }
}
/* Snappy variant for rapid-fire play (Niz genija) — a quick punch that clears
   in ~1s so consecutive rewards give rhythm, not overlap. */
.xp-toast-fast { animation: xp-float-fast .9s cubic-bezier(.2, .9, .25, 1) forwards; }
.xp-toast-fast .xp-toast-main { font-size: 38px; }
@keyframes xp-float-fast {
    0%   { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
    16%  { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
    32%  { transform: translate(-50%, -2px) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -66px) scale(.9); }
}

/* Quiz results — Inženjerko REACTS in a bubble next to his head, styled
   EXACTLY like the warm kmap "Inženjerkov savjet" card (same amber palette,
   same uppercase mini-title) so his voice looks the same everywhere in the
   app. XP is a chip INSIDE the bubble instead of a shouting gold card
   (Drago, 2026-08-04; ring experiment reverted — blue TOČNOST card stays). */
.qr-bubble { min-width: 0; background: #fffbeb; border: 1px solid #fcd34d;
    border-radius: 1rem; padding: 9px 12px;
    animation: you-pop .55s cubic-bezier(.34,1.56,.64,1) both .15s; }
.qr-bubble-head { display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #92400e; margin-bottom: 4px; }
.qr-bubble-msg { font-size: 13px; line-height: 1.5; color: #78350f; font-weight: 600; }
/* XP + combo chip sits on the RESULT card (the reward belongs to the score,
   not to the advice — Drago, 2026-08-04); centered under the score pill. */
.qr-xp-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.qr-xp-chip { display: inline-flex; align-items: center; gap: 4px;
    background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px;
    padding: 3px 10px; font-size: 12.5px; font-weight: 800; color: #92400e; }
.qr-xp-chip .qr-xp-more { font-weight: 700; color: #b45309; }
html.dark-theme .qr-bubble { background: #33290f; border-color: #8a6414; }
html.dark-theme .qr-bubble-head { color: #fcd34d; }
html.dark-theme .qr-bubble-msg { color: #fde68a; }
html.dark-theme .qr-xp-chip { background: rgba(0,0,0,.25); border-color: #8a6414; color: #fde68a; }

/* Quiz results — compact single-screen layout (Drago, 2026-08-03). The
   pieces are squeezed so a phone shows everything at once, and the action
   row is sticky at the scroller's bottom edge as the hard guarantee that
   "back to textbook" never needs a scroll to reach. */
.qr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qr-stats .stat-card { padding: 8px 4px; }
.qr-stats .stat-value { font-size: 1rem; }
.qr-stats .stat-label { font-size: 0.58rem; letter-spacing: 0.02em; }
.qr-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Grid items refuse to shrink below their content by default (min-width:
   auto), so a long topic name BLEW THROUGH the card edge instead of
   ellipsizing — truncate needs the item itself to be shrinkable. */
.qr-analysis > * { min-width: 0; }
/* Phones: the humanized topic names ("Algebarska evaluacija limesa") are the
   payload of the analysis — side-by-side 160px columns ellipsize them into
   noise, so the two areas stack full-width instead. */
@media (max-width: 480px) {
    .qr-analysis { grid-template-columns: 1fr; gap: 6px; }
}
.qr-mini-label { font-size: 10px; color: #94a3b8; font-weight: 700;
    text-transform: uppercase; }
/* Ingeniko 3D icons on the quiz-results screen — sized to the text they sit
   next to; replaces the OS-dependent emoji (Drago, 2026-08-04). */
.qr-ic { width: 1.25em; height: 1.25em; display: inline-block;
    vertical-align: -0.25em; object-fit: contain; }
/* Result-hero / CTA gradients as REAL css — the compiled Tailwind build has
   no from-amber-500/to-orange-600 stops, so class-built gradients rendered
   transparent (white-on-white "empty card", 2026-08-04). */
.qr-grad-blue  { background: linear-gradient(90deg, #2563eb, #1e40af); }
/* Blitz/Ispit DEEP GOLD — flat yellow with brown text read washed-out and
   melted into the yellow savjet bubble below (Drago). A dark-amber →
   gold diagonal gives the card the same depth the blue quiz hero has,
   keeps white text readable, and still says "Blitz žuta" at a glance. */
/* Blitz: ravna amber #f59e0b s bijelim tekstom (Drago, 22.09.2026., birao
   od sest boja: „prva je najbolja"); tamna #d97706 ravnog skina bila je „jako ruzna". */
.qr-grad-amber { background: #f59e0b; color: #fff; }
/* Zeleni (interaktivni) i ruzicasti (ispit) par plavoj i narancastoj: isti
   kraj u sva cetiri moda, samo boja featurea (Drago, 22.09.2026.). */
.qr-grad-green { background: linear-gradient(90deg, #059669, #047857); color: #fff; }
.qr-grad-pink  { background: linear-gradient(135deg, #be185d 0%, #db2777 55%, #f472b6 100%); color: #fff; }
.qr-grad-hover:hover { filter: brightness(1.05); }

/* Icon plate inside the action buttons — the same small rounded square the
   analysis rows use, white so the icon pops off the coloured button. */
.qr-btn-ic { display: inline-flex; align-items: center; justify-content: center;
    width: 2.4em; height: 2.4em; background: #fff; border-radius: 0.6em;
    vertical-align: -0.6em; margin-right: 2px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); }
/* Ikona u plocici krupnija (Drago QA 22.09.2026.: „premala ikona iskreno",
   ispit.png ima vise praznog ruba pa je na 1.3em bio mrvica). */
.qr-btn-ic .qr-ic { width: 1.9em; height: 1.9em; vertical-align: 0; }
.qr-btn-ic--soft { background: #f1f5f9; box-shadow: none; }
/* Secondary "Pokreni novi …" wears a LIGHT tint of its mode colour (Drago:
   same family as the hero above, just lighter) — like the TOC chips. */
.qr-cta-soft-blue  { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
/* Tihi gumb interaktivnog na kraju (zeleni par, kao plavi u kvizu). */
.qr-cta-soft-green { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.qr-cta-soft-blue:hover  { background: #dbeafe; }
.qr-cta-soft-amber { background: #fffbeb; border: 1px solid #fcd34d; color: #b45309; }
.qr-cta-soft-amber:hover { background: #fef3c7; }
.qr-cta-soft-pink  { background: #fdf2f8; border: 1px solid #fbcfe8; color: #be185d; }
.qr-cta-soft-pink:hover  { background: #fce7f3; }

/* Score pill = THE door to the answer review. Styled as a real button the
   thumb wants to press — white on the deep-blue card is the strongest
   affordance on screen, the inset shade gives it "depth" to push, and a
   double nudge-pulse right after landing invites the tap without a word. */
.qr-score-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #fff; color: #1e3a8a; font-weight: 800; font-size: 0.78rem;
    padding: 0.32rem 0.95rem; border-radius: 999px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.28), inset 0 -2px 0 rgba(30, 58, 138, 0.14);
    transition: transform .12s ease, box-shadow .15s ease;
    animation: qrScoreNudge 2.2s ease 1.1s 2;
}
.qr-score-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2, 6, 23, 0.34), inset 0 -2px 0 rgba(30, 58, 138, 0.14); }
.qr-score-btn:active { transform: scale(0.94); }
@keyframes qrScoreNudge {
    0%, 24%, 100% { transform: scale(1); }
    8%  { transform: scale(1.09); }
    16% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .qr-score-btn { animation: none; } }

/* Isti gumb, ali IZVAN plave kartice: grana znatizelje nema brojke na
   rezultatu (N43, Drago 16.09.2026.), pa bijeli gumb na bijeloj podlozi ne bi
   imao ni rub ni metu. Tokeni s vrha datoteke (docs/VIZUALNI-OKVIR.md). */
.qr-score-btn--tih {
    background: var(--ing-podloga); color: var(--ing-plava);
    border: 1px solid var(--ing-rub); box-shadow: none;
    min-height: var(--ing-dodir); padding: 0.5rem 1.1rem;
}
.qr-score-btn--tih:hover { background: #fff; box-shadow: 0 4px 12px rgba(2, 6, 23, 0.1); }
html.dark-theme .qr-score-btn--tih { background: #2a2927; color: #e5e7eb; }
/* Pilula koja NIJE gumb (interaktivni nema pregled odgovora): bez poziva na dodir. */
.qr-score-btn--mirna { animation: none; cursor: default; }
.qr-score-btn--mirna:hover { transform: none; }
/* Prazan XP utor ne smije trositi razmak resetke (.qr ima gap). */
.qr > .exi-daily-xp:empty { display: none; }
.qr-bubble-msg.exi-sazetak p { margin: 0 0 .4em; } .qr-bubble-msg.exi-sazetak p:last-child { margin-bottom: 0; }

/* TOČNO / NETOČNO stat cards double as filtered entrances to the review. */
.qr-stat-click { cursor: pointer; transition: transform .1s ease, box-shadow .12s ease; }
.qr-stat-click:hover { box-shadow: 0 4px 12px rgba(2, 6, 23, 0.1); transform: translateY(-1px); }
.qr-stat-click:active { transform: scale(0.95); }

/* 🎯 "Vježbaj baš ovo" — full-width CTA under the weakest area; same blue
   gradient family as the Learn Now / Niz genija pills so it reads Ingeniko.
   Sized as the card's PRIMARY action (the first-quiz trends note that used
   to sit under it is gone — the button carries the closing weight now). */
.qr-practice { display: block; width: 100%; margin-top: 12px; padding: 12px 14px;
    border-radius: 14px; font-weight: 800; font-size: 14.5px; color: #fff;
    text-align: center; background: #2563eb;
    box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.5);
    transition: transform .1s ease, filter .12s ease; }
.qr-practice:hover { filter: brightness(1.07); }
.qr-practice:active { transform: scale(0.98); }
.qr-actions { position: sticky; bottom: 0; z-index: 5; padding: 8px 0 2px;
    background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0)); }
/* Buttons centre their content with flex — the baseline trick around the
   icon plate floated the label a few px above centre, differently per
   button (Drago). Same treatment for both rows and the single variant. */
.qr-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.qr-actions .qr-btn-ic { vertical-align: unset; margin-right: 0; }
/* Short phones (SE/older Androids, ~667px viewports): the compact layout is
   still ~50px over one screen — trade the decorative bits (mascot head, big
   paddings) for a true no-scroll fit. Taller phones keep the roomier look. */
/* RASPORED REZULTATA (Drago, 09.09., slika: „previše praznog prostora, stisnuto").
   Ekran ima četiri bloka (naslov, kartica, savjet, gumbi) pa se ne stišće nego
   RAZMIČE po visini: .qr popuni pogled i blokove rasporedi ravnomjerno, a
   naslov i postotak su veći. Viši od ekrana (desktop, dug P.S.) i dalje skrola. */
/* v3 (Drago, 09.09.: „cijeli rezultat kao popup kartica, iza bijela pozadina,
   rezultati u obloj kućici"): SVE (naslov, rezultat, savjet, gumbi) živi u
   jednoj zaobljenoj kartici centriranoj u pogledu (#view-quiz > *:only-child
   ima margin-block:auto), pozadina pogleda je mirna svijetla. Blokovi unutra
   stoje zajedno s jednakim razmakom. Viša od ekrana i dalje skrola. */
.qr { display: flex; flex-direction: column; flex: 0 0 auto; gap: 14px; padding: 20px 14px 12px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 24px;
    box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .35), 0 2px 8px rgba(15, 23, 42, .06); }
.qr.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
.qr > .qr-actions { margin-top: 2px; padding-bottom: 0; }
#view-quiz:not(.hidden):has(> .qr), #view-exam:not(.hidden):has(> .qr) { background: #eef2f7; padding: 14px 10px; }
html.dark-theme .qr { background: #1f2937; border-color: #374151; }
html.dark-theme #view-quiz:not(.hidden):has(> .qr), html.dark-theme #view-exam:not(.hidden):has(> .qr) { background: #111827; }
.qr h2 { font-size: 1.6rem; text-wrap: balance; }
/* Ikona naslova rezultata: nasa 3D ikona moda ima prazan rub, pa treba
   biti krupnija od emojija da stoji uz naslov jednako tesko (Drago, 22.09.2026.). */
.qr-naslov-ic { display: inline-flex; line-height: 1; flex: 0 0 auto; }
.qr-naslov-ic .qr-ic { width: 2.6rem; height: 2.6rem; vertical-align: 0; }
/* BIJELI TRAG ISPOD HEADERA (Drago, 10.09.). `#app-top-scrim` je bijeli
   preljev preko gornjih 64 px, da sadrzaj mekano klizi pod header. Podloga
   ekrana rezultata je siva (#eef2f7), pa se taj bijeli preljev vidio kao
   traka. Ekran rezultata ionako nema sto kliziti pod header. */
body:has(#view-quiz:not(.hidden) > .qr) #app-top-scrim,
body:has(#view-exam:not(.hidden) > .qr) #app-top-scrim { display: none; }
.qr .qr-grad-blue, .qr .qr-grad-amber, .qr .qr-grad-green, .qr .qr-grad-pink { padding: 1.25rem 1rem; }
.qr .qr-grad-blue .text-4xl, .qr .qr-grad-amber .text-4xl, .qr .qr-grad-green .text-4xl, .qr .qr-grad-pink .text-4xl { font-size: 3rem; line-height: 1.05; margin-bottom: 0; }
/* Kartica rezultata VODORAVNO (Drago, 09.09.: „sve jedno ispod drugog, čudno"):
   lijevo natpis + postotak, desno pilula pregleda i XP čipovi. */
/* v2: DVA REDA (Drago: ni ispod ni pored): veliki postotak, ispod njega u
   jednom redu pilula pregleda i XP čipovi. Natpis „Točnost" je maknut. */
.qr-score { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 1rem 1rem 1.1rem; }
.qr-score-l { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.qr-score-r { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.qr-score .qr-xp-row { margin-top: 0; justify-content: center; }
.qr-bubble { padding: 12px 14px; }
.qr-bubble-msg { font-size: 14px; }
.qr-actions button { padding-top: 0.9rem; padding-bottom: 0.9rem; }
@media (max-width: 880px) and (max-height: 640px) {
    .qr h2 { font-size: 1.35rem; }
    .qr .qr-grad-blue .text-4xl, .qr .qr-grad-amber .text-4xl, .qr .qr-grad-green .text-4xl, .qr .qr-grad-pink .text-4xl { font-size: 2.4rem; }
    .qr-bubble-msg { font-size: 13px; }
}
}
html.dark-theme .qr-actions {
    background: linear-gradient(to top, #1f1e1d 70%, rgba(15,23,42,0)); }
html.dark-theme .qr-mini-label { color: #64748b; }

/* ==== Mentor tool widgets (mw-*) — Ingeniko jezik iz rezultata kviza ====
   Umjesto 10 pastelnih Tailwind kutijica raznih boja: BIJELA kartica s
   Ingeniko 3D ikonom u malom kvadratiću (kao qr-btn-ic), deblji progress
   bar s pravim gradijentom i jedan primarni CTA u praksa-plavoj (#2563eb,
   isti kao "Vježbaj baš ovo"). Tip widgeta nosi ikona i tanka gornja
   traka, ne cijela pozadina (Drago, 2026-08-06). */
.mw-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
    padding: 12px 14px; box-shadow: 0 1px 3px rgba(2, 6, 23, 0.05);
    position: relative; overflow: hidden; }
.mw-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, #2563eb, #1e40af); }
.mw-card--red::before   { background: linear-gradient(90deg, #dc2626, #ef4444); }
.mw-card--green::before { background: linear-gradient(90deg, #16a34a, #22c55e); }
.mw-card--gold::before  { background: linear-gradient(90deg, #d97706, #fbbf24); }
.mw-card--plain::before { display: none; }
.mw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mw-head-title { font-weight: 800; font-size: 13.5px; color: #1e293b; flex: 1;
    min-width: 0; }
.mw-head-val { font-weight: 800; font-size: 15px; color: #2563eb; }
.mw-ic-plate { display: inline-flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; background: #f1f5f9; border-radius: 0.55em;
    flex-shrink: 0; }
.mw-ic-plate .qr-ic { width: 1.45em; height: 1.45em; vertical-align: 0; }
.mw-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px;
    margin: 0 -6px; border-radius: 10px; font-size: 13px; color: #1e293b;
    border-bottom: 1px solid #f1f5f9; }
.mw-row:last-child { border-bottom: 0; }
.mw-row--tap { cursor: pointer; transition: background .12s ease; }
.mw-row--tap:hover { background: #f8fafc; }
.mw-row--tap:active { background: #f1f5f9; }
.mw-row .mw-chev { color: #cbd5e1; font-size: 12px; flex-shrink: 0; }
.mw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 600; }
.mw-sub { display: block; font-size: 11px; color: #94a3b8; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-bar { width: 3.6rem; height: 7px; background: #f1f5f9; border-radius: 999px;
    overflow: hidden; flex-shrink: 0; }
.mw-bar-fill { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #3b82f6); }
.mw-bar-fill--green { background: linear-gradient(90deg, #16a34a, #22c55e); }
.mw-bar-fill--gold  { background: linear-gradient(90deg, #d97706, #fbbf24); }
.mw-bar-fill--red   { background: linear-gradient(90deg, #dc2626, #f87171); }
.mw-pct { width: 2.6rem; text-align: right; font-weight: 800; font-size: 12px;
    flex-shrink: 0; }
.mw-pct--green { color: #16a34a; } .mw-pct--gold { color: #d97706; }
.mw-pct--red { color: #dc2626; }  .mw-pct--zero { color: #94a3b8; }
/* Postotak-značka za slaba područja (crveni kvadratić kao NAJSLABIJE) */
.mw-badge { display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; padding: 3px 6px; border-radius: 8px; font-weight: 800;
    font-size: 12px; background: #fef2f2; color: #dc2626;
    border: 1px solid #fecaca; flex-shrink: 0; }
.mw-cta { display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    font-weight: 800; font-size: 13.5px; color: #fff; text-align: center;
    background: #2563eb; box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5);
    transition: transform .1s ease, filter .12s ease; }
.mw-cta:hover { filter: brightness(1.07); }
.mw-cta:active { transform: scale(0.98); }
.mw-cta .qr-ic { width: 1.15em; height: 1.15em; }
/* Pokrenuta akcija — kvacica + prigusen izgled, ali i dalje klikabilno. */
.mw-cta--used { background: #16a34a; opacity: .78;
    box-shadow: 0 6px 16px -6px rgba(22, 163, 74, 0.45); }
/* Mala potvrda akcije (navigacija, postavka, memorija) — jedna tanka
   pilula umjesto obojene kutije. */
.mw-pill { display: flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 999px; padding: 7px 13px;
    font-size: 12.5px; color: #334155; box-shadow: 0 1px 3px rgba(2,6,23,.05); }
.mw-pill .mw-pill-dot { width: 8px; height: 8px; border-radius: 50%;
    background: #2563eb; flex-shrink: 0; }
.mw-pill--ok .mw-pill-dot { background: #16a34a; }
.mw-pill--mem .mw-pill-dot { background: #7c3aed; }
/* Poglavlje-čip u planu učenja */
.mw-chip { display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px;
    padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: #334155; }
.mw-chip button { display: inline-flex; align-items: center; justify-content: center;
    width: 1.7em; height: 1.7em; border-radius: 0.45em; background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.07); transition: transform .1s ease; }
.mw-chip button:hover { transform: scale(1.08); }
.mw-chip--done { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.mw-chip--part { background: #fffbeb; border-color: #fde68a; color: #b45309; }
/* Widget se pojavi mekim ulaskom (usklađeno s typewriterom poruke) */
.mw-card { animation: mwIn .28s ease; }
@keyframes mwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mw-card { animation: none; } }

/* Meta linija uz poruku: avatar mentora + ime + vrijeme (bot), vrijeme (user) */
.mchat-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px;
    color: #94a3b8; margin: 0 4px 3px; }
.mchat-meta--user { justify-content: flex-end; }
.mchat-name { font-weight: 700; color: #64748b; }
.mchat-ava { width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
    border: 1px solid #e2e8f0; background: #fff; }
/* Separator "Nastavak razgovora" pri vrhu obnovljene povijesti */
.mchat-resume { display: flex; align-items: center; gap: 10px; color: #94a3b8;
    font-size: 11px; font-weight: 600; margin: 6px 0 10px; }
.mchat-resume::before, .mchat-resume::after { content: ''; flex: 1; height: 1px;
    background: #e2e8f0; }

/* Typewriter reveal: jedinice (riječi / KaTeX / kod) ulaze redom.
   Sadržaj već zauzima svoju visinu (samo opacity) — nema reflowa ni
   poskakivanja scrolla. */
.tw-unit { opacity: 0; animation: twIn .2s ease forwards; }
/* Živi stream: treptajući kursor na kraju balončića dok odgovor teče */
.tw-live::after { content: '▍'; color: #2563eb; animation: twCaret 1s steps(2) infinite; }
@keyframes twCaret { 50% { opacity: 0; } }
@keyframes twIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tw-unit { opacity: 1; animation: none; } }

/* Brzi chip prijedlozi ispod zadnjeg odgovora */
.mentor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 2px 10px; }
.mentor-chips button { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
    font-weight: 700; font-size: 12px; padding: 6px 11px; border-radius: 999px;
    transition: background .12s ease, transform .1s ease; }
.mentor-chips button:hover { background: #dbeafe; }
.mentor-chips button:active { transform: scale(.96); }

/* JEDAN STIL ČIPOVA (Drago, 2.9.2026.: "sve triba biti u istom stilu ti
   čipovi") — ista plava pilula kao .mentor-chips/.chat-src-btn, za startere
   i follow-up prijedloge koje su dosad bile bijele Tailwind kartice. */
.ing-chip { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
    font-weight: 700; font-size: 12px; padding: 7px 13px; border-radius: 999px;
    cursor: pointer; font-family: inherit; text-align: left; max-width: 20rem;
    transition: background .12s ease, transform .1s ease; }
.ing-chip:hover { background: #dbeafe; }
.ing-chip:active { transform: scale(.96); }
html.dark-theme .ing-chip { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }

/* Kontekst čip: "Pričamo o: predmet / Svi predmeti" — plutajuća oznaka na
   rubu chat trake (Jedan Inženjerko). U predmetu je klikabilna → mentor. */
#input-area { position: relative; }
#ctx-chip { position: absolute; top: -12px; left: 16px; z-index: 6;
    font-size: 11px; font-weight: 800; color: #1d4ed8; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 999px; padding: 3px 11px;
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.08); white-space: nowrap;
    max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
#ctx-chip.ctx-chip--tap { cursor: pointer; }
#ctx-chip.ctx-chip--tap:hover { background: #dbeafe; }
html.dark-theme #ctx-chip { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }

/* Mini-kviz kroz predmete: opcije s pravim ocjenjivanjem */
.mwq-q { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; }
.mwq-opt { padding: 6px 9px; border-radius: 8px; font-size: 12.5px; cursor: pointer;
    border: 1px solid transparent; transition: background .1s ease; }
@media (hover: hover) and (pointer: fine) { .mwq-opt:hover { background: #f8fafc; } }
.mwq-q[data-done] .mwq-opt { cursor: default; }
@media (hover: hover) and (pointer: fine) { .mwq-q[data-done] .mwq-opt:hover { background: transparent; } }
.mwq-opt--right { background: #f0fdf4 !important; border-color: #bbf7d0; color: #15803d; font-weight: 700; }
.mwq-opt--wrong { background: #fef2f2 !important; border-color: #fecaca; color: #b91c1c; font-weight: 700; }

/* Plan učenja preko cijelog zaslona (mpo-*) — otvara se iz plan widgeta */
#mentor-plan-overlay, .mpo-shell { position: fixed; inset: 0; z-index: 80; background: #f8fafc;
    display: flex; flex-direction: column; animation: mwIn .22s ease; }
.mpo-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    background: #fff; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.04); }

/* ==== Plan v2: hero s prstenom napretka + staza s čvorovima ==============
   "Pre easy i pre jeftino" (Drago, 2026-08-07) — plan sad IZGLEDA kao
   putovanje: gore prsten koliko je dana svladano, dolje Duolingo-staza
   (✓ zeleno svladano, DANAS pulsira, jantarno = nadoknadi, sivo = slijedi). */
/* Plan je EKRAN unutar app shella (#view-plan): app header s ☰ i ikonom je
   iznad njega, pa plan nema vlastitu traku ni X (Drago, 2026-08-07). */
#view-plan { background: #f8fafc; }
html.dark-theme #view-plan { background: #1f1e1d; }
/* Sažetak plana — što ovim planom želimo postići */
/* Sažetak plana kao hero — ista plava obitelj kao Liga/level-up kartice,
   jantarni progress kao XP traka (Drago, 2026-08-11: "na razini appa") */
/* Sažetak plana kao svijetloplava ploča, bez gradijenta i sjaja (Drago,
   22.09.2026.: „smiriti boje“); DANAS je bijela kartica u njoj. */
.mpo-summary { position: relative; overflow: hidden; color: #1e3a8a;
    background: #eff6ff; border: 1px solid #dbeafe;
    border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
.mpo-summary-title { font-weight: 800; font-size: 15px; color: #1e3a8a;
    margin-bottom: 3px; }
.mpo-summary-txt { font-size: 13.5px; color: #475569; line-height: 1.45;
    cursor: pointer; position: relative; z-index: 1; }
/* Opis plana stane u 2 retka; klik ga raširi (Drago, 2026-08-11) */
.mpo-summary-txt--clamp { display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
.mpo-summary-prog { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.mpo-summary .mw-bar { background: #dbeafe; height: 7px; }
.mpo-summary .mw-bar-fill { background: #2563eb; }
.mpo-summary-meta { font-size: 12px; font-weight: 800; color: #1e40af;
    white-space: nowrap; }
/* Prebacivanje između planova (npr. Matematika ↔ Biologija) */
/* ==== JEDAN JEZIK OTVARANJA PROZORA (Drago, 2026-08-07) ==================
   Svaki prozor preko zaslona (modali, fullscreen pregledi, sheetovi) otvara
   se isto: podloga blago potamni, sadržaj naraste zadnjih 2 % uz kratki
   pomak prema gore. Neutralno i brzo (~200 ms), nikad dvaput u istom kadru.
   Poštuje "smanji animacije" u sustavu. */
@keyframes ingFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ingRise {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
/* VAŽNO: stari modali (Liga, Postavke, Napredak, Info, prijava…) već imaju
   svoju animaciju kroz JS (opacity + scale-95→100) i ONA OSTAJE — Drago:
   "neke animacije su radile top". Ovdje animiramo SAMO prozore koji nisu
   imali nikakvu: fullscreen pregledi i sheetovi (plan, "Zašto baš ovo?",
   stranica predmeta, Moj smjer). Dvostruka animacija na istom elementu
   (keyframes transform vs. transition transform) zna zapeti u skoku. */
.mpo-shell, #view-plan:not(.hidden) {
    animation: ingRise .2s cubic-bezier(.2, .7, .3, 1) both;
}
/* Zaglavlje/tijelo fullscreen pregleda ulaze s minimalnim kašnjenjem — daje
   dojam "prozor se slaže", bez efekta po efektu. */
.mpo-shell .mpo-body, #view-plan:not(.hidden) .mpo-body {
    animation: ingRise .24s cubic-bezier(.2, .7, .3, 1) .04s both;
}
/* Bešavna bijela ploha planera NE ulazi skalirana: ingRise (scale .985 +
   pomak) na njoj otkrije pozadinu po rubovima, pa gornji kutovi na 240ms
   bljesnu kao „zarezi" — Drago je to ulovio na screenshotu 04.09. i s
   pravom pitao što je s kutovima. Ploha samo fade-a. */
#view-plan:not(.hidden) .mpo-body--pset {
    animation: ingFadeIn .2s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .mpo-shell, #view-plan, .mpo-body { animation: none !important; }
}

/* "Zašto baš ovo?" — kartica dana je klikabilna i otvara objašnjenje */
.mpo-day--tap { cursor: pointer; transition: box-shadow .12s ease, transform .1s ease; }
.mpo-day--tap:hover { box-shadow: 0 4px 14px rgba(2, 6, 23, .09); }
.mpo-day--tap:active { transform: scale(.995); }
.why-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 12px 14px; margin-bottom: 10px; }
.why-sec-h { display: flex; align-items: center; gap: 7px; font-size: 12px;
    color: #2563eb; margin-bottom: 5px; }
.why-sec-h .qr-ic { width: 1.15em; height: 1.15em; }
.why-sec-t { font-size: 13.5px; line-height: 1.5; color: #334155; }
.why-load { display: flex; align-items: center; gap: 9px; color: #64748b;
    font-size: 13px; padding: 18px 4px; }
.why-spin { width: 15px; height: 15px; border: 2px solid #cbd5e1;
    border-top-color: #2563eb; border-radius: 50%; animation: whySpin .8s linear infinite; }
@keyframes whySpin { to { transform: rotate(360deg); } }
html.dark-theme .why-sec { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .why-sec-t { color: #cbd5e1; }

/* PLAN ↔ MAPA ZNANJA: pločice koje su u planu nose plavi prsten, današnja
   pulsira; ispod mape red koji vodi u plan (Drago, 2026-08-07). */
#dash-kmap .kmap-cell.k-plan { box-shadow: inset 0 0 0 2px #2563eb; }
#dash-kmap .kmap-cell.k-plan-today { box-shadow: inset 0 0 0 2px #2563eb,
    0 0 0 3px rgba(37, 99, 235, .22); }
.kmap-planrow { display: flex; align-items: center; gap: 8px; width: 100%;
    margin-top: 8px; padding: 7px 10px; border-radius: 11px; background: #eff6ff;
    border: 1px solid #bfdbfe; font-size: 12px; color: #1e3a8a; text-align: left; }
.kmap-planrow img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.kmap-planrow span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.kmap-planrow-go { color: #60a5fa; font-weight: 800; }
.kmap-planrow:hover { background: #dbeafe; }
html.dark-theme .kmap-planrow { background: #1e3a8a; border-color: #1d4ed8; color: #dbeafe; }

/* Vodoravna traka koja se skrola — plan po predmetu (Drago, 2026-08-07) */
.mpo-switch { display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 2px 2px;
    scrollbar-width: none; }
.mpo-switch::-webkit-scrollbar { display: none; }
.mpo-switch > * { flex: 0 0 auto; }
/* Natpis stoji PRIKOVAN uz lijevi rub dok kartice klize ispod njega (Drago,
   2026-08-12). Bez ikakvog prelijevanja preko kartice: pozadina je puna i
   staje TOČNO na svom rubu — gradijent-rep je izbačen jer je svijetlio preko
   plave kartice koja stoji odmah do njega. */
.mpo-switch-lbl { position: sticky; left: 0; z-index: 2;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #94a3b8;
    /* Puna visina reda — inače plava viri iznad i ispod natpisa. */
    align-self: stretch; display: flex; align-items: center;
    background: #f8fafc; padding: 0 8px 0 0; scroll-snap-align: none; }
html.dark-theme .mpo-switch-lbl { background: #1f1e1d; }
.mpo-switch-btn { font-size: 11.5px; font-weight: 700; padding: 5px 11px;
    border-radius: 999px; background: #fff; border: 1px solid #e2e8f0;
    color: #1d4ed8; transition: background .12s ease; }
.mpo-switch-btn:hover { background: #eff6ff; }
/* Kartice planova na vrhu ekrana — malo zraka ispod, iznad sažetka plana.
   Lijevi padding je 0 da kartica ne proviri lijevo od prikovanog natpisa.
   Kartica nikad ne ostaje presječena: pusti je na pola i sama sjedne uz
   natpis, kao u svakoj drugoj aplikaciji (Drago). CSS scroll-snap je ovdje
   ISPROBAN I ODBAČEN — sa sticky natpisom u istom redu njegove snap-točke
   ispadnu pomaknute (kartica sjedne 60 px ulijevo, pola pod natpisom), pa
   poravnanje radi JS kad se klizanje smiri. */
.mpo-switch--tabs { margin-bottom: 10px; padding-left: 0; }
/* Plan na kojem si — jedini pokazatelj nakon geste, pa mora bosti u oko. */
.mpo-switch-btn--on { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.mpo-switch-btn--on:hover { background: #bfdbfe; }
html.dark-theme .mpo-switch-btn--on { background: #2563eb; border-color: #2563eb; color: #fff; }
/* Hero sažetka nosi vlastite boje (gradient) — u dark temi ostaje isti */
html.dark-theme .mpo-summary .mw-bar { background: rgba(255, 255, 255, .25); }
html.dark-theme .mpo-switch-btn { background: #2a2927; border-color: #3b3a37; color: #bfdbfe; }
html.dark-theme .mpo-appbar { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .mpo-appbar-title { color: #e2e8f0; }
/* ==== Planer v4: dan = zadaci s minutama =================================
   "Plan mora prestati biti poglavlje po danu" (Drago, 2026-08-07). Dan se
   puni do dnevnog budžeta, ponavljanja su na vrhu, svaki redak vodi ravno u
   gradivo, a kvačica lijevo je studentova (čitanje se ne može izmjeriti). */
.mpo-min { font-size: 11px; font-weight: 800; color: #1d4ed8; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 8px;
    white-space: nowrap; }
.mpo-tasks { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.mpo-task-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px;
    border-radius: 11px; background: #f8fafc; border: 1px solid #eef2f7;
    cursor: pointer; transition: background .12s ease, transform .1s ease; }
.mpo-task-row:hover { background: #eff6ff; }
.mpo-task-row:active { transform: scale(.995); }
.mpo-task-row.is-review { background: #fffbeb; border-color: #fde68a; }
.mpo-task-row.is-review:hover { background: #fef3c7; }
.mpo-task-row.is-done { opacity: .55; }
.mpo-task-row.is-done .mpo-task-title { text-decoration: line-through; }
.mpo-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid #cbd5e1; background: #fff; color: #16a34a; font-weight: 900;
    font-size: 12px; line-height: 1; display: flex; align-items: center;
    justify-content: center; transition: border-color .12s ease; }
.mpo-check:hover { border-color: #2563eb; }
.mpo-task-row.is-done .mpo-check { border-color: #16a34a; background: #dcfce7; }
.mpo-task-ic { width: 1.45em; height: 1.45em; flex-shrink: 0; }
.mpo-task-txt { flex: 1; min-width: 0; }
.mpo-task-title { display: block; font-size: 13px; font-weight: 700; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpo-task-sub { display: block; font-size: 10.5px; color: #94a3b8; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpo-part { font-size: 10px; font-weight: 800; color: #7c3aed; background: #f5f3ff;
    border: 1px solid #ddd6fe; border-radius: 999px; padding: 1px 6px; }
.mpo-task-min { font-size: 11px; font-weight: 800; color: #64748b; white-space: nowrap; }
.mpo-why { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px;
    padding: 6px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700;
    color: #2563eb; background: transparent; transition: background .12s ease; }
.mpo-why:hover { background: #eff6ff; }
.mpo-why .mw-chev { margin-left: auto; }
.mpo-why .mpo-xp { margin-left: auto; }
.mpo-why .mpo-xp + .mw-chev { margin-left: 6px; }
/* Podešavanje plana: tri pitanja (min/dan, dana/tjedan, ispit) kao čipovi */
.mpo-chiprow { display: flex; align-items: center; gap: 6px; margin-top: 8px;
    flex-wrap: wrap; }
/* SMIRENE BOJE PLANA (Drago, 22.09.2026.: „smiriti boje, prejaka plava, da ne
   blješte“): odabrani čip je svijetloplava ploča s tamnoplavim slovima, ne puna
   plava sa sjenom; puna plava ostaje samo na glavnom gumbu. Fontovi kao ostatak
   aplikacije (12,5 do 13,5 px), ne 10,5 do 12. */
.mpo-chiplbl { font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #94a3b8; min-width: 92px; }
.mpo-chip { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155;
    transition: background .12s ease; }
.mpo-chip:hover { background: #e2e8f0; }
.mpo-chip--on { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a;
    box-shadow: none; }
/* Čipovi u pset ekranima (sastavljanje/podešavanje) — malo veća meta za prst.
   Dugo ime predmeta se lomi u dva retka: tekst lijevo uz ikonu, ne po sredini
   (Drago, 22.09.2026.: „ovo treba biti poravnato, imena predmeta"). */
.pset-chips .mpo-chip { padding: 7px 13px; font-size: 13px; text-align: left; max-width: 100%; }
.pset-chips .mpo-chip[data-k="course"] > span { align-items: flex-start !important; }
.pset-chips .mpo-chip[data-k="course"] > span > span:last-child { text-align: left; line-height: 1.3; }
.pset-chips .mpo-chip[data-k="course"] .pset-chip-ik { margin-top: 0; }
/* Prava ikona predmeta u čipu sjedi na bijeloj pločici — na plavom
   (odabranom) čipu tamna sličica inače nestane (Drago, 04.09.). */
.pset-chip-ik { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px; background: #fff; flex: none;
    box-shadow: inset 0 0 0 1px rgba(2, 6, 23, .08); }
.pset-chip-ik img { width: 15px; height: 15px; }
.mpo-date { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 9px;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; }
.mpo-setup { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e2e8f0; }
.mpo-setup-h { font-size: 11.5px; font-weight: 700; color: #64748b; margin-bottom: 4px; }
.mw-daylbl { font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #2563eb; margin: 4px 0 3px; }
#view-plan.mpo-busy { opacity: .55; pointer-events: none; transition: opacity .12s ease; }
html.dark-theme .mpo-task-row { background: #1f1e1d; border-color: #3b3a37; }
html.dark-theme .mpo-task-row:hover { background: #1e3a8a; }
html.dark-theme .mpo-task-row.is-review { background: #2a2410; border-color: #6b5d1f; }
html.dark-theme .mpo-task-title { color: #e2e8f0; }
html.dark-theme .mpo-check { background: #2a2927; border-color: #475569; }
html.dark-theme .mpo-chip { background: #3b3a37; border-color: #475569; color: #cbd5e1; }
html.dark-theme .mpo-chip--on { background: #2563eb; border-color: #2563eb; color: #fff; }
html.dark-theme .mpo-date { background: #3b3a37; border-color: #475569; color: #cbd5e1; }
html.dark-theme .mpo-min { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }
html.dark-theme .mpo-part { background: #2e1065; border-color: #6d28d9; color: #ddd6fe; }
html.dark-theme .mpo-setup { border-color: #3b3a37; }

/* ==== Ekran za sastavljanje plana (pset-*) ===============================
   Klik na "Moj plan" bez plana otvarao je razgovor s mentorom (Drago QA,
   2026-08-07) — sad otvara OVO: tko, koliko, koliko dana, kad je ispit. */
.pset { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
    padding: 16px 16px 18px; box-shadow: 0 10px 30px -18px rgba(2, 6, 23, .3); }
/* Sastavljanje/podešavanje plana na uskom prozoru: kartica-u-stranici se
   raspadala na šavove — procjep ispod headera, zaobljeni rub, traka podloge
   ispod gumba (Drago, 04.09.: „iskidano, prelama se"). Ploha ide od ruba do
   ruba, kao pravi ekran; unutarnje kartice (hero) ostaju kartice. */
@media (max-width: 700px) {
    /* Dragine presude 04.09., sve tri odjednom: „ne smije biti scroll",
       „treba raspoložit po ekranu" i „nema ništa protiv lipog filleta i
       oblaka". Dakle: kartica OSTAJE oblak (radius, rub, sjena), ali sjedi
       u jednakom okviru sa svih strana, rasteže se do dna i višak visine
       dijeli u jednake razmake među sekcijama — ne u prugu na dnu.
       (Dvostruka klasa: opći `.mpo-body` blok dolje u datoteci inače
       pobijedi redoslijedom uz istu specifičnost.) */
    /* Konačna presuda (Drago, 04.09., nakon isprobane tonirane podloge:
       „daj stavi da je sve bilo, ovo ne valja ovako"): SVE BIJELO — jedna
       bešavna ploha od headera do dna, bez okvira i vidljive kartice.
       Ostaje: raspored po ekranu i bez skrola. */
    /* Gornji kutovi ZAOBLJENI (Drago, 04.09., zaokružio baš njih: „kako ne
       možeš lipo zaobljeno napravit") — ploha je sheet koji izranja ispod
       headera: 8px odmaka + fillet 18px gore, dolje ravno do dna ekrana. */
    /* clip-path umjesto overflow:hidden (22.09.2026.): overflow bi od plohe
       napravio vlastiti okvir pa ljepljivi gumb Slozi mi plan ne bi lijepio
       uz dno skrolera; kutovi ostaju zaobljeni. */
    .mpo-body.mpo-body--pset { padding: 0; max-width: none;
        margin-top: 8px; border-radius: 18px 18px 0 0; clip-path: inset(0 round 18px 18px 0 0);
        min-height: calc(100% - 8px); box-sizing: border-box; background: #fff;
        display: flex; flex-direction: column; }
    html.dark-theme .mpo-body.mpo-body--pset { background: #1e293b; }
    .mpo-body--pset .pset { flex: 1; box-sizing: border-box;
        border: 0; border-radius: 0; box-shadow: none;
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* Hero sastavljanja/podešavanja plana — SMIRENA svijetloplava kartica, isti
   jezik kao „Uči sad!" banner. Tamnoplavi gradijent (Liga obitelj) je na
   bijeloj plohi bio „pre žarka boja plave" (Drago, 04.09.); vrištao je. */
/* Hero slaganja plana: ista svijetloplava ploča kao sažetak plana (Drago,
   22.09.2026.: „smiriti boje“). */
.pset-hero { position: relative; overflow: hidden; display: flex;
    align-items: flex-start; gap: 12px; margin-bottom: 14px;
    background: #eff6ff; border: 1px solid #dbeafe;
    /* 18px kao ostale kartice/banneri: 14px je uz fit-zum (×0.85–0.9) padao
       na efektivnih ~12 i čitao se kao škrto/„iskidano" (Drago, 04.09.). */
    border-radius: 18px; padding: 13px 14px; }
.pset-hero-txt { flex: 1; min-width: 0; }
.pset-face { flex-shrink: 0; }
.pset-hero .pset-face { display: flex; background: #fff; border-radius: 12px;
    padding: 4px; box-shadow: 0 3px 8px -3px rgba(37, 99, 235, .35); }
.pset-title { font-weight: 800; font-size: 18px; color: #1e293b; margin-bottom: 3px; }
.pset-intro { font-size: 13.5px; color: #64748b; line-height: 1.45; }
.pset-hero .pset-title { color: #1e3a8a; margin-bottom: 2px; }
.pset-hero .pset-intro { color: #475569; }
html.dark-theme .pset-hero { background: #1e3a5f; border-color: #2c4a75; }
html.dark-theme .pset-hero .pset-title { color: #dbeafe; }
html.dark-theme .pset-hero .pset-intro { color: #94a3b8; }
.pset-x { position: relative; z-index: 1; margin-left: auto; width: 30px;
    height: 30px; border-radius: 10px; flex-shrink: 0; font-size: 14px;
    font-weight: 700; background: rgba(255, 255, 255, .18); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s ease; }
.pset-x:hover { background: rgba(255, 255, 255, .32); }
/* Hero je od 22.09.2026. svijetloplav, pa bijeli ✕ na njemu nije bio vidljiv. */
.pset-hero .pset-x { color: #1e3a8a; background: rgba(37, 99, 235, .10); }
.pset-hero .pset-x:hover { background: rgba(37, 99, 235, .18); }
.pset-q { padding: 11px 0; border-top: 1px solid #f1f5f9; }
/* POTEZ KORAKA SLAGANJA PLANA (Drago, 22.09.2026.): točkice po sredini kao u
   potezu savjeta u kvizu, buduce ugasene; koraci u vodoravnom potezu sa
   snapom, bez gumba Dalje. */
/* Sadrzaj od vrha: bez space-between iz .pset, inace tockice plutaju daleko
   pod herom, a korak visi u sredini ekrana. */
.pset--potez { justify-content: flex-start !important; }
.pset-tocke { margin: 2px 0 10px; gap: 7px; }
.pset-tocke .qfb-dot { width: 8px; height: 6px; border: 0; padding: 0; }
.pset-tocke .qfb-dot--on { width: 22px; background: #2563eb; }
.pset-tocke .qfb-dot.je-buduca { cursor: default; opacity: .6; }
.pset-potez { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
.pset-potez:active { cursor: grabbing; }
.pset-potez::-webkit-scrollbar { display: none; }
.pset-korak { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
    box-sizing: border-box; min-height: 150px; }
.pset-q--potez { border-top: 0; padding-top: 4px; }
/* Korak u potezu je sam na ekranu, pa smije biti krupniji (Drago, 22.09.2026.:
   „ovo cak moze biti veci natpis, premalo prostora zauzme tekst"). */
.pset-q--potez .pset-q-lbl { font-size: 16px; margin-bottom: 12px; }
.pset-q--potez .pset-n { width: 22px; height: 22px; font-size: 12px; }
.pset-q--potez .pset-chips { gap: 8px; }
.pset-q--potez .mpo-chip { font-size: 14px; padding: 9px 15px; }
/* Odabrano u potezu jasno plavo (Drago, 22.09.2026.: „treba biti plavije
   odabir“): jedan izbor po ekranu, pa smije biti puna plava. */
.pset-q--potez .mpo-chip--on { background: #2563eb; border-color: #2563eb; color: #fff; }
.pset-q--potez .mpo-chip--on .pset-chip-ik { box-shadow: none; }
/* Prvi korak je visestruki izbor (predmeti), pa ga dodir ne nosi dalje kao
   minute i dane: sitan natpis kaze kako se ide dalje (Drago, 22.09.2026.:
   „kako cemo ako odznacimo predmet ici dalje“). */
.pset-povuci { display: block; margin: 14px auto 0; padding: 6px 12px; border: 0;
    background: none; color: #2563eb; font-size: 13px; font-weight: 700; cursor: pointer; }
.pset-povuci:hover { text-decoration: underline; }
/* Odabran rok zove na zadnji potez: gumb dvaput kratko dahne (Drago, 22.09.2026.:
   „rok je isto vrsta dalje“). */
@keyframes psetZove { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .6); }
    50% { transform: scale(1.035); box-shadow: 0 12px 26px -8px rgba(37, 99, 235, .75); } }
.pset-go--zove { animation: psetZove .8s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .pset-go--zove { animation: none; } }
.pset-q-lbl { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
    font-weight: 800; color: #334155; margin-bottom: 8px; }
.pset-n { width: 19px; height: 19px; border-radius: 50%; background: #eff6ff;
    color: #2563eb; font-size: 11px; font-weight: 800; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; }
.pset-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pset-pct { font-size: 10px; font-weight: 800; opacity: .65; }
.pset-go { display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; padding: 13px; border-radius: 14px;
    background: #2563eb; color: #fff; font-weight: 800; font-size: 14.5px;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .6);
    transition: transform .1s ease, filter .12s ease; }
.pset-go:hover { filter: brightness(1.07); }
/* GLAVNI GUMB UVIJEK NA EKRANU (Drago, 22.09.2026.: „zasto nema dole Slozi
   plan"): na desktopu se ekran vise ne zumira ispod 1, pa gumb zna ostati
   ispod ruba; ljepljiv na dnu skrolera (#view-plan), a tijelo slaganja ne
   smije biti vlastiti skroler da ljepljivost radi. */
#view-plan:not(.hidden) .mpo-body--pset { overflow: visible; }   /* skroler je #view-plan, ne tijelo */
.mpo-body--pset .pset-go { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 2; }
.pset-go:active { transform: scale(.985); }
.pset-go .qr-ic { width: 1.3em; height: 1.3em; }
.pset-go-sub { font-size: 12.5px; font-weight: 700; opacity: .8; }
.pset-note { font-size: 12.5px; color: #94a3b8; text-align: center; margin-top: 9px;
    line-height: 1.4; }
.pset-empty { font-size: 13px; color: #64748b; line-height: 1.5; padding: 6px 0 2px; }
.pset--busy { text-align: center; }
.pset--busy .pset-face { display: block; margin: 6px auto 8px; }
.pset--busy .why-load { justify-content: center; }
html.dark-theme .pset { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .pset-title { color: #e2e8f0; }
html.dark-theme .pset-hero .pset-title { color: #fff; }
html.dark-theme .pset-q { border-color: #3b3a37; }
html.dark-theme .pset-q-lbl { color: #cbd5e1; }
html.dark-theme .pset-n { background: #1e3a8a; color: #bfdbfe; }

/* Kartica DANAS — jedan klik od plana do učenja */
.mpo-today-card { display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
    padding: 12px 14px; border-radius: 16px; background: #2563eb; color: #fff;
    box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .8); }
.mpo-today-card--done { background: #16a34a;
    box-shadow: 0 10px 24px -12px rgba(22, 163, 74, .8); }
/* Danas nije dan učenja → ista kartica, mirnija boja: pokazuje SLJEDEĆI dan
   umjesto da ekran ostane prazan. */
.mpo-today-card--next { background: #475569;
    box-shadow: 0 10px 24px -12px rgba(71, 85, 105, .7); }
.mpo-today-card--next .mpo-tc-go { color: #334155; }
.mpo-tc-main { flex: 1; min-width: 0; }
.mpo-tc-lbl { font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; opacity: .85; }
.mpo-tc-task { font-size: 14px; font-weight: 800; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpo-tc-dots { display: flex; gap: 4px; margin-top: 7px; }
.mpo-tc-dot { width: 16px; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, .35); }
.mpo-tc-dot.is-done { background: #fff; }
.mpo-tc-go { flex-shrink: 0; padding: 10px 16px; border-radius: 12px;
    background: #fff; color: #1d4ed8; font-weight: 800; font-size: 13px;
    transition: transform .1s ease; }
.mpo-today-card--done .mpo-tc-go { color: #15803d; }
.mpo-tc-go:active { transform: scale(.95); }
/* DANAS unutar sažetka (Drago, 22.09.2026.): bijela kartica u svijetloplavoj
   plohi, jedan plavi gumb; gotov dan zeleno slovo, sljedeći dan sivo. */
.mpo-today-card--u, .mpo-today-card--u.mpo-today-card--done, .mpo-today-card--u.mpo-today-card--next {
    position: relative; z-index: 1; margin: 10px 0 0; padding: 10px 12px;
    background: #fff; color: #0f172a; box-shadow: none; border: 1px solid #dbeafe; }
.mpo-today-card--u .mpo-tc-lbl { color: #2563eb; opacity: 1; }
.mpo-today-card--u.mpo-today-card--done .mpo-tc-lbl { color: #16a34a; }
.mpo-today-card--u.mpo-today-card--next .mpo-tc-lbl { color: #64748b; }
.mpo-today-card--u .mpo-tc-dot { background: #dbeafe; }
.mpo-today-card--u .mpo-tc-dot.is-done { background: #2563eb; }
.mpo-today-card--u .mpo-tc-go, .mpo-today-card--u.mpo-today-card--next .mpo-tc-go {
    background: #2563eb; color: #fff; }
.mpo-today-card--u.mpo-today-card--done .mpo-tc-go { background: #16a34a; color: #fff; }
/* TISE DANAS (Drago QA 23.09.2026.: „preupadljivo, pogotovo ova pilula Kreni").
   Redak ostaje prvi na ekranu, ali ne vice: rub umjesto plave plohe, natpis
   DANAS mirniji, pilula puna boja tek kad je dan gotov (zeleno je nagrada). */
.mpo-today-card--u { border-color: var(--ing-rub); }
.mpo-today-card--u .mpo-tc-lbl { font-weight: 700; letter-spacing: .04em; color: var(--ing-siva); }
.mpo-today-card--u .mpo-tc-task { font-weight: 700; }
.mpo-today-card--u .mpo-tc-go, .mpo-today-card--u.mpo-today-card--next .mpo-tc-go {
    background: #eff6ff; color: var(--ing-plava); border: 1px solid #bfdbfe;
    font-weight: 700; padding: 9px 14px; }
.mpo-today-card--u .mpo-tc-go:hover { background: #dbeafe; }
html.dark-theme .mpo-today-card--u .mpo-tc-go,
html.dark-theme .mpo-today-card--u.mpo-today-card--next .mpo-tc-go {
    background: #1e293b; color: #bfdbfe; border-color: #334155; }
.mpo-switch-btn--new { color: #16a34a; font-weight: 800; }
/* IKONA U GUMBU TREBA SVOJ OKVIR (Drago QA 23.09.2026.: zupcanik preko pola
   ekrana). `_navIcon` vraca <img class="w-full h-full">, sto je racunato na
   sidro fiksne velicine u navigaciji; bez njega slika uzme sirinu retka. */
.mpo-switch-btn .mpo-switch-ik { display: inline-block; width: 15px; height: 15px;
    vertical-align: -2px; margin-right: 3px; }
.mpo-switch-btn .mpo-switch-ik img { width: 100%; height: 100%; object-fit: contain; }
.mpo-switch-btn--warn { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
html.dark-theme .mpo-switch-btn--warn { background: #450a0a; border-color: #7f1d1d; color: #fecaca; }

/* Inženjerkov savjet u planu — ista žuta obitelj kao savjet na kraju kviza */
/* Inženjerkov savjet: ista žuta obitelj kao na kraju kviza, na svim ekranima
   (Drago, 22.09.2026.: „savjet mora biti isto kao u svim ekranima“). */
.mpo-advice { background: #fefce8; border: 1px solid #fde68a; border-radius: 14px;
    padding: 10px 13px; margin-bottom: 10px; }
.mpo-advice-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
    color: #854d0e; margin-bottom: 4px; }
.mpo-advice-txt { font-size: 13.5px; color: #713f12; line-height: 1.45; }
html.dark-theme .mpo-advice { background: #2a2410; border-color: #6b5d1f; }
html.dark-theme .mpo-advice-txt { color: #fde68a; }

/* Veza plan → Uči sad: TANKA jednoredna pilula (Drago: "očajno preveliko"),
   detalje ionako priča plan tour. */
.mpo-learn-note { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
    padding: 6px 11px; border-radius: 999px; background: #eff6ff; border: 1px solid #bfdbfe; }
.mpo-learn-note-ic { flex-shrink: 0; font-size: 14px; line-height: 1; }
.mpo-learn-note-txt { flex: 1; min-width: 0; font-size: 12px; color: #1e40af;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Isti bijeli gumb kao "Kreni" na kartici DANAS, samo u mjerilu pilule. */
.mpo-learn-note-go { flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #bfdbfe; color: #1d4ed8;
    font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .1s ease; }
.mpo-learn-note-go:active { transform: scale(.95); }

html.dark-theme .mpo-learn-note { background: #172554; border-color: #1e40af; }
html.dark-theme .mpo-learn-note-txt { color: #bfdbfe; }
html.dark-theme .mpo-ring-txt { color: #e2e8f0; }
html.dark-theme .mpo-pick { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }

.mpo-path { padding-top: 18px; }
.mpo-step { display: flex; gap: 10px; }
.mpo-node-col { display: flex; flex-direction: column; align-items: center;
    width: 38px; flex-shrink: 0; }
.mpo-node { width: 34px; height: 34px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-weight: 800;
    font-size: 14px; background: #e2e8f0; color: #64748b;
    border: 3px solid #fff; box-shadow: 0 1px 4px rgba(2, 6, 23, .12);
    flex-shrink: 0; }
.mpo-node-line { flex: 1; width: 3px; background: #e2e8f0; margin: 2px 0;
    border-radius: 999px; min-height: 14px; }
.mpo-step:last-child .mpo-node-line { display: none; }
.mpo-step--done .mpo-node { background: #16a34a; color: #fff; }
.mpo-step--done .mpo-node-line { background: #86efac; }
.mpo-step--done .mpo-day { border-color: #bbf7d0; background: #f6fdf8; }
.mpo-step--today .mpo-node { background: #2563eb; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .mpo-step--today .mpo-node { animation: mpoPulse 1.8s ease-out infinite; }
    @keyframes mpoPulse {
        0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
        70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
        100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    }
}
.mpo-step--missed .mpo-node { background: #f59e0b; color: #fff; }
/* Današnji zadatak odrađen (plan quest 3/3) — kvačica bez čekanja mastery 70% */
.mpo-step--todaydone .mpo-node { background: #16a34a; color: #fff; animation: none; }
.mpo-step--todaydone .mpo-today-badge { background: #16a34a; }
.mpo-step--todaydone .mpo-xp { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.mpo-step--future .mpo-day { opacity: .72; }
.mpo-step .mpo-day { flex: 1; min-width: 0; }
.mpo-score-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mpo-xp { font-size: 10.5px; font-weight: 800; color: #b45309;
    background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px;
    padding: 2px 8px; white-space: nowrap; }
html.dark-theme .mpo-node { border-color: #1f1e1d; background: #3b3a37; color: #94a3b8; }
html.dark-theme .mpo-node-line { background: #3b3a37; }
html.dark-theme .mpo-step--done .mpo-day { background: #142a1e; border-color: #14532d; }
.mpo-header .mw-ic-plate { width: 2.4em; height: 2.4em; }
.mpo-header-txt { flex: 1; min-width: 0; }
.mpo-title { font-weight: 800; font-size: 16px; color: #1e293b; }
.mpo-sub { font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.mpo-close { width: 34px; height: 34px; border-radius: 10px; background: #f1f5f9;
    color: #475569; font-size: 15px; font-weight: 700; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s ease; }
.mpo-close:hover { background: #e2e8f0; }
.mpo-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    max-width: 640px; margin: 0 auto; width: 100%; }
.mpo-day { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
    padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(2,6,23,.05); }
.mpo-day--today { border-color: #2563eb; border-width: 2px;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.35); }
.mpo-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mpo-day-no { font-weight: 800; font-size: 13px; color: #1e293b; }
.mpo-day-date { font-size: 11.5px; color: #94a3b8; flex: 1; }
.mpo-today-badge { background: #2563eb; color: #fff; font-weight: 800;
    font-size: 10px; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }
.mpo-task { display: flex; align-items: center; gap: 10px; }
.mpo-task-main { flex: 1; min-width: 0; }
.mpo-chapter { font-weight: 700; font-size: 13.5px; color: #1e293b; }
.mpo-course { font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.mpo-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mpo-btn { display: flex; align-items: center; gap: 5px; font-weight: 700;
    font-size: 12px; padding: 8px 11px; border-radius: 10px;
    background: #f1f5f9; color: #334155; transition: transform .1s ease, filter .12s ease; }
.mpo-btn:active { transform: scale(.96); }
.mpo-btn--primary { background: #2563eb; color: #fff;
    box-shadow: 0 5px 14px -5px rgba(37, 99, 235, 0.5); }
.mpo-btn--primary:hover { filter: brightness(1.07); }
@media (max-width: 480px) {
    .mpo-task { flex-direction: column; align-items: stretch; }
    .mpo-actions { justify-content: stretch; }
    .mpo-actions .mpo-btn { flex: 1; justify-content: center; }
}
html.dark-theme #mentor-plan-overlay, html.dark-theme .mpo-shell { background: #1f1e1d; }
html.dark-theme .mpo-header { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .mpo-title { color: #e2e8f0; }
html.dark-theme .mpo-day { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .mpo-chapter, html.dark-theme .mpo-day-no { color: #e2e8f0; }
html.dark-theme .mpo-btn { background: #3b3a37; color: #cbd5e1; }
html.dark-theme .mpo-close { background: #3b3a37; color: #cbd5e1; }

html.dark-theme .mchat-name { color: #94a3b8; }
html.dark-theme .mchat-resume::before, html.dark-theme .mchat-resume::after { background: #3b3a37; }
html.dark-theme .mentor-chips button { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }
html.dark-theme .mwq-q { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .mw-card { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .mw-head-title, html.dark-theme .mw-row { color: #e2e8f0; }
html.dark-theme .mw-row { border-color: #3b3a37; }
html.dark-theme .mw-ic-plate { background: #3b3a37; }
html.dark-theme .mw-bar { background: #3b3a37; }
html.dark-theme .mw-pill { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }
html.dark-theme .mw-chip { background: #1f1e1d; border-color: #3b3a37; color: #cbd5e1; }

/* Daily quests panel (league modal). */
.lb-quests {
    background: #f8fafc; border: 1px solid #eef2f7;
    border-radius: 12px; padding: 8px 12px; margin-bottom: 9px;
}
.lb-q-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.lb-q-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.lb-q-icon { width: 20px; text-align: center; font-size: 13px; }
.lb-q-main { flex: 1; min-width: 0; }
.lb-q-name { display: block; font-size: 12px; color: #1e293b; margin-bottom: 2px; }
.lb-q-bar { display: block; height: 4px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.lb-q-fill { display: block; height: 100%; background: #2563eb; border-radius: 999px; transition: width .4s ease; }
.lb-q-meta { font-size: 12px; font-weight: 800; color: #64748b; white-space: nowrap; }
.lb-q-done .lb-q-name { color: #16a34a; }
.lb-q-done .lb-q-fill { background: #16a34a; }
.lb-q-done .lb-q-meta { color: #16a34a; }
html.dark-theme .lb-quests { background: #1f1e1d; border-color: #3b3a37; }
html.dark-theme .lb-q-name { color: #e2e8f0; }
html.dark-theme .lb-q-bar { background: #3b3a37; }

/* Community weekly goal (cooperation bar). */
.lb-team {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0; border-radius: 12px;
    padding: 8px 12px; margin-bottom: 9px;
}
.lb-team-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.lb-team-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #15803d; }
.lb-team-count { font-size: 10.5px; font-weight: 700; color: #16a34a; }
.lb-team-bar { height: 7px; background: #dcfce7; border-radius: 999px; overflow: hidden; }
.lb-team-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 999px; transition: width .6s ease; }
.lb-team-full { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.lb-team-sub { font-size: 11.5px; color: #166534; margin-top: 4px; }
.lb-team-desc { font-size: 10.5px; color: #4d7c0f; margin-top: 1px; }

/* Not-yet-drafted teaser (fresh player, before their first Monday draft). */
.lb-team-pending { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.lb-team-pending-ic { font-size: 22px; line-height: 1; }
.lb-team-pending-h { font-size: 12.5px; font-weight: 800; color: #15803d; }
.lb-team-pending-sub { font-size: 11px; color: #4d7c0f; margin-top: 1px; }
html.dark-theme .lb-team-pending-h { color: #86efac; }
html.dark-theme .lb-team-pending-sub { color: #bbf7d0; }
html.dark-theme .lb-team { background: #052e16; border-color: #166534; }
html.dark-theme .lb-team-sub { color: #bbf7d0; }
html.dark-theme .lb-team-desc { color: #86efac; }

/* Tap-to-unfold contributor breakdown inside the community-goal card. */
.lb-team-toggle {
    font-size: 10.5px; font-weight: 800; color: #15803d;
    margin-top: 6px; user-select: none;
}
.lb-team-chev { font-size: 9px; }
.lb-team-contribs { list-style: none; margin: 5px 0 0; padding: 5px 0 0; border-top: 1px dashed #bbf7d0; }
/* XP U STUPCU (Drago, 23.09.2026., slika 4: „xp ne stoje lijepo jedan ispod
   drugog"). Uzrok je bio `space-between` nad retkom koji ima dva ili tri
   djeteta: red bez gumba za poziv gurao je svoj XP skroz desno, a red s
   gumbom ga je vukao u sredinu. Sada ime uzima visak, XP ima svoju sirinu i
   tabularne brojke, a poziv uvijek zauzima isto mjesto (prazan span kad ga
   nema), pa su i XP i gumbi dva uredna stupca. Ista vodoravna uvlaka na
   svim retcima: zeleni okvir „Ti" inace pomakne sadrzaj za 4 px. */
.lb-tc-row {
    display: flex; align-items: center; gap: .35rem;
    font-size: 11.5px; color: #166534; padding: 2px 6px;
}
.lb-tc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tc-prazno { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; margin-left: .45rem; }
.lb-tc-row.lb-tc-you { font-weight: 800; background: #dcfce7; border-radius: 6px; }
/* BOCNI KOLEGU (Drago, 22.09.2026.: „da mogu kliknit na kolegu i samo ga
   bockat"). Mali okrugli gumb na kraju retka; posluzitelj mu salje obavijest. */
.lb-tc-bocni {
    margin-left: .45rem; flex: 0 0 auto; width: 1.7rem; height: 1.7rem;
    border-radius: 999px; border: 1px solid #86efac; background: #f0fdf4;
    font-size: .85rem; line-height: 1; cursor: pointer;
}
.lb-tc-bocni:hover { background: #dcfce7; }
.lb-tc-bocni[disabled] { opacity: .6; cursor: default; }
html.dark-theme .lb-tc-bocni { background: #14532d; border-color: #166534; }
.lb-tc-pts {
    flex: 0 0 auto; min-width: 4.6rem; text-align: right;
    font-variant-numeric: tabular-nums; font-weight: 700; color: #16a34a;
}
html.dark-theme .lb-team-toggle { color: #86efac; }
html.dark-theme .lb-team-contribs { border-top-color: #166534; }
html.dark-theme .lb-tc-row { color: #bbf7d0; }
html.dark-theme .lb-tc-row.lb-tc-you { background: #14532d; }

/* Daily-streak celebration toast (top center). */
.streak-toast {
    position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
    /* IZNAD .v2-overlay (100000): „Odaberi barem jedan predmet" na v2
       ekranu predmeta se crtao ISPOD onboardinga pa je Nastavi izgledao
       kao mrtvi klik (audit 08.09.). Toast je prolazna obavijest — smije
       biti navrh svega. */
    z-index: 100050; background: linear-gradient(135deg,#ea580c,#f59e0b);
    color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px;
    /* 1.1rem, NOT 999px: the pill radius turned multi-line streak info
       into a giant orange ball on narrow screens. Width capped so the
       text wraps into a card, not a column. */
    border-radius: 1.1rem;
    width: max-content; max-width: min(92vw, 400px);
    box-shadow: 0 12px 30px -8px rgba(234,88,12,.6);
    animation: streak-pop .3s ease-out, xp-fadeout .5s ease-in 3.5s forwards;
}
.streak-toast small { font-weight: 600; opacity: 0.95; }
@keyframes streak-pop { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes xp-fadeout { to { opacity: 0; } }

/* ---- Streak "wow" modal (tap the 🔥 chip) ------------------------------
   The auto-toasts stay corner pills; a DELIBERATE tap earns the full
   centered moment — a living flame that leaps in over a dimmed backdrop. */
.streak-modal-back {
    position: fixed; inset: 0; z-index: 10060;
    display: grid; place-items: center; padding: 20px;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: sm-back-in .2s ease-out;
}
.streak-modal-back.is-closing { animation: sm-back-out .2s ease-in forwards; }
@keyframes sm-back-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-back-out { to { opacity: 0; } }

.streak-modal {
    position: relative; width: min(90vw, 340px);
    background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74; border-radius: 1.4rem;
    padding: 2.4rem 1.5rem 1.5rem; text-align: center;
    box-shadow: 0 24px 60px -12px rgba(234, 88, 12, .55), 0 0 0 6px rgba(249, 115, 22, .08);
    animation: sm-card-in .42s cubic-bezier(.18, 1.35, .5, 1) both;
}
.streak-modal-back.is-closing .streak-modal { animation: sm-card-out .2s ease-in forwards; }
@keyframes sm-card-in  { 0% { opacity: 0; transform: scale(.5) translateY(30px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sm-card-out { to { opacity: 0; transform: scale(.9); } }

.streak-modal-x {
    position: absolute; top: .6rem; right: .7rem;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(124, 45, 18, .1); color: #9a3412;
    font-size: 13px; font-weight: 800; cursor: pointer; line-height: 1;
    display: grid; place-items: center; transition: background .15s ease, transform .12s ease;
}
.streak-modal-x:hover { background: rgba(124, 45, 18, .2); }
.streak-modal-x:active { transform: scale(.9); }

/* Flame stage — glow + pulsing ring + ember sparks + the number badge. */
.streak-flame-stage {
    position: relative; width: 128px; height: 128px; margin: 0 auto .5rem;
    display: grid; place-items: center;
}
.streak-flame {
    font-size: 74px; line-height: 1; position: relative; z-index: 2;
    filter: drop-shadow(0 6px 14px rgba(234, 88, 12, .5));
    animation: sm-flame-in .5s cubic-bezier(.2, 1.5, .4, 1) both, sm-flame-flick 2.4s ease-in-out .5s infinite;
    transform-origin: 50% 90%;
}
@keyframes sm-flame-in    { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes sm-flame-flick { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06, .97) rotate(-2deg); } 60% { transform: scale(.97, 1.05) rotate(2deg); } }

.streak-flame-glow {
    position: absolute; inset: 14px; z-index: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, .8) 0%, rgba(249, 115, 22, .35) 45%, transparent 70%);
    animation: sm-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes sm-glow-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.streak-flame-ring {
    position: absolute; inset: 0; z-index: 0; border-radius: 50%;
    border: 3px solid rgba(249, 115, 22, .45);
    animation: sm-ring 1.3s ease-out .1s 2;
}
@keyframes sm-ring { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.25); } }

.streak-flame-badge {
    position: absolute; z-index: 3; right: 14px; bottom: 12px;
    min-width: 34px; height: 34px; padding: 0 8px;
    display: grid; place-items: center;
    background: #fff; color: #ea580c; font-weight: 900; font-size: 18px;
    border-radius: 999px; box-shadow: 0 4px 12px -2px rgba(234, 88, 12, .55);
    animation: sm-badge-in .4s cubic-bezier(.2, 1.6, .4, 1) .28s both;
}
@keyframes sm-badge-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }

.streak-spark {
    position: absolute; z-index: 1; left: 50%; top: 50%;
    width: 7px; height: 7px; border-radius: 50%; opacity: 0;
    animation: sm-spark .6s ease-out var(--sd) 1 forwards;
}
@keyframes sm-spark {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}

.streak-modal-title { font-size: 1.35rem; font-weight: 900; color: #9a3412; margin-bottom: .35rem; }
.streak-modal-how   { font-size: .84rem; font-weight: 600; color: #b45309; line-height: 1.45; margin-bottom: 1rem; }

.streak-modal-next { margin-bottom: .7rem; }
.smn-bar {
    height: 9px; border-radius: 999px; overflow: hidden; margin-bottom: .4rem;
    background: rgba(234, 88, 12, .15);
}
.smn-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #ea580c);
    animation: sm-bar-grow .7s ease-out .35s both;
}
@keyframes sm-bar-grow { from { width: 0 !important; } }
.smn-txt  { font-size: .8rem; font-weight: 800; color: #c2410c; }
.smn-max  { color: #b45309; }

.streak-modal-shield {
    display: inline-block; margin-top: .2rem; padding: .3rem .8rem;
    background: rgba(255, 255, 255, .7); border: 1px solid #fdba74;
    border-radius: 999px; font-size: .78rem; font-weight: 800; color: #9a3412;
}

html.dark-theme .streak-modal {
    background: linear-gradient(160deg, #2a1608 0%, #37200c 100%);
    border-color: #9a3412;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 0 6px rgba(249, 115, 22, .12);
}
html.dark-theme .streak-modal-title  { color: #fdba74; }
html.dark-theme .streak-modal-how    { color: #fbbf24; }
html.dark-theme .smn-txt             { color: #fdba74; }
html.dark-theme .streak-modal-x      { background: rgba(255, 255, 255, .1); color: #fdba74; }
html.dark-theme .streak-modal-x:hover{ background: rgba(255, 255, 255, .2); }
html.dark-theme .streak-modal-shield { background: rgba(255, 255, 255, .08); color: #fdba74; }

@media (prefers-reduced-motion: reduce) {
    .streak-modal, .streak-flame, .streak-flame-glow, .streak-flame-ring,
    .streak-flame-badge, .streak-spark, .smn-bar i { animation: none !important; }
    .streak-spark { display: none; }
}

/* ---- Liga genija: view navigation (board / levels / quests) ---- */
.lb-minirow { display: flex; gap: 8px; margin-bottom: 9px; }
.lb-mini {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 8px 10px; font-size: 12.5px; color: #334155; cursor: pointer;
    transition: all .15s ease;
}
.lb-mini:hover { background: #eff6ff; border-color: #93c5fd; transform: translateY(-1px); }
.lb-mini b { color: #1e40af; }
.lb-mini small { color: #94a3b8; font-size: 11px; }
.lb-mini-arrow { color: #94a3b8; font-weight: 700; margin-left: 2px; }
.lb-mini-done { border-color: #86efac; background: #f0fdf4; }
.lb-back {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #2563eb;
    padding: 0 0 10px; transition: transform .15s ease;
}
.lb-back:hover { transform: translateX(-2px); }
.lb-week-sum {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 9px 12px; margin-bottom: 9px;
    font-size: 12px; font-weight: 700; color: #1e40af; text-align: center;
}
html.dark-theme .lb-mini { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }
html.dark-theme .lb-week-sum { background: #172554; border-color: #1e40af; color: #bfdbfe; }

/* ---- Daily goals view: day strip + weekly-standing card ---- */
.lb-q-day { color: #16a34a; }
.lb-daystrip {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 8px 10px 6px; margin-bottom: 9px;
}
.lb-ds-row { display: flex; gap: 4px; }
.lb-ds-day {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 5px 2px; border-radius: 9px; border: 1.5px solid transparent;
}
.lb-ds-cur { border-color: #93c5fd; background: #eff6ff; }
.lb-ds-name { font-size: 11px; font-weight: 800; color: #1e40af; }
.lb-ds-done { color: #fff; background: #16a34a; width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.lb-ds-today { width: 15px; height: 15px; border-radius: 50%; background: #2563eb; }
.lb-ds-miss { width: 15px; height: 15px; border-radius: 50%; background: #e2e8f0; }
.lb-ds-lock { font-size: 12px; opacity: .55; }
.lb-ds-hint { font-size: 10.5px; color: #94a3b8; text-align: center; margin-top: 5px; }

.lb-weekrank {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
    padding: 9px 12px; margin-bottom: 9px;
}
.lb-wr-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #1e40af; margin-bottom: 6px; }
.lb-wr-body { display: flex; align-items: center; gap: 14px; }
.lb-wr-cell { display: flex; flex-direction: column; gap: 3px; }
.lb-wr-cell b { font-size: 13px; color: #1e3a8a; }
.lb-wr-cell small { font-size: 10.5px; color: #60a5fa; }
.lb-wr-bar { display: flex; gap: 3px; }
.lb-wr-seg { width: 16px; height: 6px; border-radius: 999px; background: #dbeafe; }
.lb-wr-seg-on { background: #2563eb; }
.lb-wr-rank { margin-left: auto; align-items: flex-end; }
.lb-wr-rank b { font-size: 16px; color: #b45309; }
html.dark-theme .lb-daystrip { background: #1f1e1d; border-color: #3b3a37; }
html.dark-theme .lb-weekrank { background: #172554; border-color: #1e40af; }
html.dark-theme .lb-wr-cell b { color: #bfdbfe; }

/* ---- Liga genija / Dnevni ciljevi: springy modal entrance -----------
   The plain scale-95→100 fade felt inert. On open the card now springs
   up with an overshoot, and a light sweeps once across the dark header —
   so the screen ARRIVES instead of just appearing. */
#leaderboard-modal-content.lb-open-pop {
    animation: lb-pop-in .52s cubic-bezier(.18, 1.4, .35, 1) both;
    transform-origin: center bottom;
}
@keyframes lb-pop-in {
    0%   { opacity: 0; transform: scale(.82) translateY(26px); }
    55%  { opacity: 1; transform: scale(1.03) translateY(0); }
    75%  { transform: scale(.99); }
    100% { opacity: 1; transform: scale(1); }
}
/* One-shot sheen across the header bar on open. */
#leaderboard-modal-content.lb-open-pop > div:first-child { position: relative; overflow: hidden; }
#leaderboard-modal-content.lb-open-pop > div:first-child::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: translateX(-160%); animation: lb-head-sheen .9s ease-out .18s 1;
}
@keyframes lb-head-sheen { to { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
    #leaderboard-modal-content.lb-open-pop { animation: none !important; }
    #leaderboard-modal-content.lb-open-pop > div:first-child::after { display: none; }
}

/* ---- Daily-goals "wow" pass ------------------------------------------
   The four cards used to snap in flat. Now they RISE in sequence, the
   progress bars GROW from zero with a light-sweep, finished goals POP
   green, and today's dot beacons — so opening the view feels alive. */
.lb-quests, .lb-daystrip, .lb-weekrank, .lb-team {
    animation: gq-rise .5s cubic-bezier(.2, .8, .25, 1) both;
}
.lb-daystrip { animation-delay: .07s; }
.lb-weekrank { animation-delay: .14s; }
.lb-team     { animation-delay: .21s; }
@keyframes gq-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Quest bars: thicker, they grow from 0, and a gloss sweeps across the
   ones still in progress (a "keep going" shimmer). */
.lb-q-row { padding: 5px 6px; border-radius: 9px; transition: background .2s ease; }
.lb-q-bar { height: 6px; position: relative; }
.lb-q-fill {
    position: relative; overflow: hidden;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    animation: gq-fill 1s cubic-bezier(.2, .8, .2, 1) .15s both;
}
@keyframes gq-fill { from { width: 0 !important; } }
.lb-q-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: gq-sweep 2.2s ease-in-out 1.1s infinite;
}
@keyframes gq-sweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(220%); } }

/* Finished goal: the whole row goes green, the ✅ pops, the fill glows. */
.lb-q-done { background: #f0fdf4; }
.lb-q-done .lb-q-icon { animation: gq-pop .45s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes gq-pop { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.lb-q-done .lb-q-fill { background: linear-gradient(90deg, #22c55e, #16a34a); box-shadow: 0 0 8px rgba(34, 197, 94, .55); }
.lb-q-done .lb-q-fill::after { animation: none; }
html.dark-theme .lb-q-done { background: #052e16; }

/* Today's dot in the strip: a soft pulsing beacon = "you are here". */
.lb-ds-today { animation: gq-beacon 1.8s ease-in-out infinite; }
@keyframes gq-beacon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .5); }
    50%      { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0); }
}
.lb-ds-cur { animation: gq-cur-glow 2.4s ease-in-out infinite; }
@keyframes gq-cur-glow { 0%, 100% { border-color: #93c5fd; } 50% { border-color: #3b82f6; } }

/* Weekly-rank segments fill in one-by-one; team bar grows + shimmers. */
.lb-wr-seg-on { animation: gq-seg .4s ease-out both; }
.lb-wr-seg-on:nth-child(1) { animation-delay: .25s; } .lb-wr-seg-on:nth-child(2) { animation-delay: .32s; }
.lb-wr-seg-on:nth-child(3) { animation-delay: .39s; } .lb-wr-seg-on:nth-child(4) { animation-delay: .46s; }
.lb-wr-seg-on:nth-child(5) { animation-delay: .53s; } .lb-wr-seg-on:nth-child(6) { animation-delay: .60s; }
.lb-wr-seg-on:nth-child(7) { animation-delay: .67s; }
@keyframes gq-seg { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

.lb-team-fill { position: relative; overflow: hidden; animation: gq-fill 1.1s cubic-bezier(.2, .8, .2, 1) .3s both; }
.lb-team-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
    transform: translateX(-120%); animation: gq-sweep 2.6s ease-in-out 1.4s infinite;
}
.lb-team-full { box-shadow: 0 0 10px rgba(245, 158, 11, .6); }

@media (prefers-reduced-motion: reduce) {
    .lb-quests, .lb-daystrip, .lb-weekrank, .lb-team,
    .lb-q-fill, .lb-q-done .lb-q-icon, .lb-ds-today, .lb-ds-cur,
    .lb-wr-seg-on, .lb-team-fill { animation: none !important; }
    .lb-q-fill::after, .lb-team-fill::after { display: none; }
}

/* ---- Phones: the Dnevni ciljevi view must fit WITHOUT a scroll ---------
   Give the modal the full screen height (capped, flex column so the header
   stays put) and tighten every card so all four fit in one glance. */
@media (max-width: 768px) {
    #leaderboard-modal-content {
        max-height: 94vh; display: flex; flex-direction: column;
        width: 100%;
    }
    #leaderboard-modal-body {
        max-height: none !important; flex: 1 1 auto; min-height: 0;
        padding: 12px !important;
    }
    /* Compact the four daily-goals cards (saves ~60px vertically). */
    .lb-quests, .lb-daystrip, .lb-weekrank, .lb-team { margin-bottom: 6px; }
    .lb-back { padding-bottom: 6px; }
    .lb-quests { padding: 6px 10px; }
    .lb-q-title { margin-bottom: 2px; }
    .lb-q-row { padding: 2px 6px; }
    .lb-daystrip { padding: 6px 8px 4px; }
    .lb-ds-day { padding: 4px 2px; }
    .lb-ds-hint { margin-top: 3px; }
    .lb-weekrank { padding: 7px 10px; }
    .lb-wr-title { margin-bottom: 4px; }
    .lb-team { padding: 6px 10px; }
}

/* ---- Levels ladder view ---- */
.lv-ladder { display: flex; flex-direction: column; gap: 6px; }
.lv-row {
    display: flex; align-items: center; gap: 12px;
    border-radius: 12px; padding: 10px 14px;
    animation: hg-in .3s ease-out both;
}
.lv-icon { font-size: 20px; width: 28px; text-align: center; }
.lv-main { flex: 1; min-width: 0; }
.lv-name { display: block; font-size: 14px; font-weight: 800; color: #1e293b; }
.lv-min { display: block; font-size: 11px; color: #94a3b8; }
.lv-cur { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.lv-cur .lv-name { color: #fff; }
.lv-cur .lv-min { color: #bfdbfe; }
.lv-tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; background: #fbbf24; color: #78350f; padding: 3px 9px; border-radius: 999px; }
.lv-done { background: #f0fdf4; }
.lv-done .lv-name { color: #15803d; }
.lv-check { color: #16a34a; font-weight: 800; font-size: 15px; }
.lv-locked { background: #f8fafc; opacity: .75; }
.lv-need { font-size: 11px; font-weight: 700; color: #94a3b8; white-space: nowrap; }
html.dark-theme .lv-done { background: #052e16; }
html.dark-theme .lv-locked { background: #1f1e1d; }
html.dark-theme .lv-name { color: #e2e8f0; }

/* ==== "WOW" pass: Razine genija + XP/Liga — streak-level life ==========
   Same language as the 🔥 modal: rich gradients, a living glow, a light
   sweep, spring easing and goal-gradient bars — so these read as one
   celebratory system, not generic lists. Reuses gq-* keyframes. */

/* ---- "Tvoja razina" strip: gradient + gold goal bar that grows + sheen -- */
.lb-mylevel {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #6366f1 100%);
    box-shadow: 0 12px 28px -12px rgba(37, 99, 235, .7);
    animation: gq-rise .5s cubic-bezier(.2, .8, .25, 1) both;
}
.lb-mylevel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .18) 50%, transparent 58%);
    transform: translateX(-120%); animation: gq-sweep 3.6s ease-in-out 1s infinite;
}
.lb-ml-icon { animation: wow-bob 3s ease-in-out infinite; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35)); }
@keyframes wow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.lb-ml-fill {
    position: relative; overflow: hidden;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 10px rgba(251, 191, 36, .75);
    animation: gq-fill 1s cubic-bezier(.2, .8, .2, 1) .3s both;
}
.lb-ml-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: translateX(-120%); animation: gq-sweep 2.6s ease-in-out 1.4s infinite;
}

/* ---- Levels ladder: climb-in stagger, live current rung, icon pops ----- */
.lv-row { animation: lv-climb .46s cubic-bezier(.2, 1.3, .4, 1) both; }
.lv-row:nth-child(1) { animation-delay: .04s; }
.lv-row:nth-child(2) { animation-delay: .10s; }
.lv-row:nth-child(3) { animation-delay: .16s; }
.lv-row:nth-child(4) { animation-delay: .22s; }
.lv-row:nth-child(5) { animation-delay: .28s; }
.lv-row:nth-child(6) { animation-delay: .34s; }
@keyframes lv-climb { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.lv-icon { display: inline-block; animation: lv-icon-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes lv-icon-pop { 0% { transform: scale(0) rotate(-18deg); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.lv-done .lv-check { display: inline-block; animation: gq-pop .5s cubic-bezier(.2, 1.7, .4, 1) both .2s; }

/* The CURRENT rung is ALIVE — richer gradient, breathing glow, light sweep,
   floating icon, pulsing "TI" tag. */
.lv-cur {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4f46e5 100%);
    animation: lv-climb .46s cubic-bezier(.2, 1.3, .4, 1) .2s both,
               lv-cur-glow 2.6s ease-in-out .7s infinite;
}
@keyframes lv-cur-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 8px 22px -12px rgba(37, 99, 235, .6); }
    50%      { box-shadow: 0 0 0 3px rgba(96, 165, 250, .4), 0 12px 28px -8px rgba(37, 99, 235, .85); }
}
.lv-cur::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
    transform: translateX(-120%); animation: gq-sweep 3s ease-in-out 1.1s infinite;
}
.lv-cur .lv-icon { animation: lv-cur-float 2.6s ease-in-out infinite; }
@keyframes lv-cur-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.1); } }
.lv-tag { animation: lv-tag-pulse 1.8s ease-in-out infinite; }
@keyframes lv-tag-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* ---- Podium + rank list: crown bounce, gold ring, medal pop, you-glow --- */
.lb-pod-crown { display: inline-block; animation: wow-crown 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wow-crown {
    0%, 100% { transform: translateY(0) rotate(0); }
    30%      { transform: translateY(-4px) rotate(-7deg); }
    62%      { transform: translateY(-1px) rotate(6deg); }
}
.lb-pod-ava-1 { border-radius: 50%; animation: wow-ring 2.4s ease-in-out infinite; }
@keyframes wow-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
    60%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}
.lb-pod-medal { display: inline-block; animation: gq-pop .5s cubic-bezier(.2, 1.7, .4, 1) both .3s; }
.lb-row:nth-child(1) { animation-delay: .04s; } .lb-row:nth-child(2) { animation-delay: .09s; }
.lb-row:nth-child(3) { animation-delay: .14s; } .lb-row:nth-child(4) { animation-delay: .19s; }
.lb-row:nth-child(5) { animation-delay: .24s; } .lb-row:nth-child(6) { animation-delay: .29s; }
.lb-row-you {
    animation: you-pop .55s cubic-bezier(.34, 1.56, .64, 1) .25s both,
               you-glow 2.4s ease-in-out 1s infinite;
}
@keyframes you-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(147, 197, 253, .55); }
}

@media (prefers-reduced-motion: reduce) {
    .lb-mylevel, .lb-mylevel::after, .lb-ml-icon, .lb-ml-fill, .lb-ml-fill::after,
    .lv-row, .lv-icon, .lv-done .lv-check, .lv-cur, .lv-cur::after, .lv-cur .lv-icon,
    .lv-tag, .lb-pod-crown, .lb-pod-ava-1, .lb-pod-medal, .lb-row-you { animation: none !important; }
    .lb-mylevel::after, .lb-ml-fill::after, .lv-cur::after { display: none; }
}

/* ---- Gamified skeleton loaders: shimmer in the FINAL shape, so the swap to
   real data feels seamless — never a dead "Učitavanje…" line. ------------- */
.skel { position: relative; overflow: hidden; background: #e6edf6; border-radius: 8px; }
html.dark-theme .skel { background: #2a2927; }
.skel::after, .ml-sb::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: skel-shimmer 1.2s ease-in-out infinite;
}
html.dark-theme .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }

/* ladder skeleton rows */
.lv-skel { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #f8fafc; }
html.dark-theme .lv-skel { background: #1f1e1d; }
.lv-skel .s-col { flex: 1; }
.lv-skel .s-ic { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.lv-skel .s-l1 { height: 12px; width: 46%; }
.lv-skel .s-l2 { height: 9px; width: 28%; margin-top: 7px; }
.lv-skel .s-tag { width: 34px; height: 16px; border-radius: 999px; flex-shrink: 0; }

/* "Tvoja razina" skeleton (reads on the blue gradient) */
.ml-sb { position: relative; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .22); }
.ml-sb::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); }

/* podium + list skeleton */
.lb-pod-skel { display: flex; justify-content: center; align-items: flex-end; gap: 12px; padding: 10px 0 6px; }
.lb-pod-skel .p { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.lb-pod-skel .s-av { width: 42px; height: 42px; border-radius: 50%; }
.lb-pod-skel .s-st { width: 56px; border-radius: 8px 8px 0 0; }
.lb-pod-skel .p1 .s-st { height: 62px; } .lb-pod-skel .p1 .s-av { width: 50px; height: 50px; }
.lb-pod-skel .p2 .s-st { height: 44px; } .lb-pod-skel .p3 .s-st { height: 34px; }
.lb-skel-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.lb-skel-row .s-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.lb-skel-row .s-nm { height: 11px; flex: 1; }
.lb-skel-row .s-xp { height: 11px; width: 34px; flex-shrink: 0; }

/* daily-goals view skeletons — quest rows, day strip, summary cards */
.lb-q-skel { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.lb-q-skel .s-ic { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; }
.lb-q-skel .s-main { flex: 1; }
.lb-q-skel .s-nm { height: 11px; width: 56%; margin-bottom: 8px; }
.lb-q-skel .s-bar { height: 8px; width: 100%; border-radius: 999px; }
.lb-q-skel .s-meta { width: 30px; height: 11px; flex-shrink: 0; }
.lb-ds-skel { display: flex; justify-content: space-between; gap: 5px; padding: 4px 0; }
.lb-ds-skel .s-d { flex: 1; height: 42px; border-radius: 9px; }
.lb-card-skel { height: 64px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
    .skel::after, .ml-sb::after { animation: none; }
}

/* ---- Leaderboard: weekly/all-time toggle ---- */
.lb-period {
    display: flex; gap: 5px; background: #f1f5f9; border-radius: 999px;
    padding: 3px; margin-bottom: 9px;
}
.lb-period-btn {
    flex: 1; border: none; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #64748b;
    padding: 6px 4px; border-radius: 999px; transition: all .15s ease;
}
.lb-period-on { background: #2563eb; color: #fff; font-weight: 700; }
html.dark-theme .lb-period { background: #2a2927; }
html.dark-theme .lb-period-btn { color: #94a3b8; }
html.dark-theme .lb-period-on { background: #3b82f6; color: #fff; }

/* ---- Leaderboard: podium + ranked list (gamified) ---- */
.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin: 0.25rem 0 0.6rem;
}
.lb-pod-col { flex: 1; max-width: 122px; text-align: center; }
.lb-pod-crown { font-size: 17px; line-height: 1; margin-bottom: 1px; }
.lb-pod-ava {
    width: 40px; height: 40px; margin: 0 auto 5px;
    display: flex; align-items: center; justify-content: center;
}
.lb-pod-ava-1 { width: 52px; height: 52px; }
.lb-pod-ava > span, .lb-pod-ava > img { width: 100%; height: 100%; }
.lb-pod-ava-1 > span { border: 3px solid #f59e0b; background: #fef3c7 !important; color: #92400e !important; }
.lb-pod-name {
    font-size: 13px; font-weight: 700; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-pod-pts { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.lb-pod-stand {
    border-radius: 10px 10px 0 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #f1f5f9;
}
/* min-height, ne height: 38px za 3. mjesto bilo je NIŽE od vlastitog
   sadržaja (medalja ~20 + „3." ~19), pa su medalja i broj virili iz sivog
   (Drago, 04.09.: „ispada iz sivog"). S min-height kutija naraste sa
   sadržajem (font, zum), a ljestve visina 68>48>44 i dalje se čitaju. */
.lb-pod-stand-1 { background: #fef3c7; min-height: 68px; }
.lb-pod-stand-2 { min-height: 48px; }
.lb-pod-stand-3 { min-height: 44px; }
.lb-pod-medal { font-size: 20px; line-height: 1; }
.lb-pod-place { font-size: 14px; font-weight: 800; color: #64748b; }
.lb-pod-stand-1 .lb-pod-place { color: #92400e; }

.lb-list { border-top: 1px solid #eef2f7; }
.lb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 4px; border-bottom: 1px solid #f1f5f9;
}
.lb-row:last-child { border-bottom: none; }
.lb-row-rank { width: 22px; text-align: center; font-weight: 800; color: #94a3b8; }
.lb-row-main { flex: 1; min-width: 0; }
.lb-row-name {
    display: block; font-size: 14px; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-row-hint { font-size: 11px; color: #2563eb; margin-top: 1px; }
.lb-row-pts { font-size: 14px; font-weight: 800; color: #1e293b; }
.lb-row-sep { text-align: center; color: #cbd5e1; letter-spacing: 3px; padding: 4px 0; }
.lb-row-you {
    background: #eff6ff; border: 2px solid #93c5fd; border-radius: 12px;
    margin: 6px 0; padding: 10px; border-bottom: 2px solid #93c5fd;
}
.lb-row-you .lb-row-rank { color: #2563eb; }
.lb-row-you .lb-row-name { font-weight: 800; color: #1e40af; }
.lb-row-you .lb-row-pts { color: #1e40af; font-size: 15px; }

html.dark-theme .lb-pod-name, html.dark-theme .lb-row-name { color: #e2e8f0; }
html.dark-theme .lb-row-pts { color: #e2e8f0; }
html.dark-theme .lb-pod-stand, html.dark-theme .lb-pod-stand-2, html.dark-theme .lb-pod-stand-3 { background: #2a2927; }
html.dark-theme .lb-list, html.dark-theme .lb-row { border-color: #3b3a37; }
html.dark-theme .lb-row-you { background: #1e3a5f; border-color: #3b82f6; }

/* ---- Brand intro slides (mascot hello → feature pitch → login) ---- */
.intro-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.intro-slide[hidden] { display: none; }

.intro-slide--feature {
    gap: 0.85rem;
    text-align: center;
    max-width: min(85vw, 24rem);
    padding: 2.25rem 0;
    animation: mascot-bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.intro-feature-icon {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 12px 18px rgba(30, 64, 175, 0.22));
}
/* Od 23.09.2026. je ovdje SLIKA, ne emoji: kutija je zadrzala mjeru od 4 rem
   pa crtez sjeda tocno gdje je emoji stajao. */
.intro-feature-icon img {
    width: 4rem; height: 4rem; display: block; margin: 0 auto;
    object-fit: contain; user-select: none;
}

.intro-feature-title {
    font-weight: 800;
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0;
}

.intro-feature-text {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.intro-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.intro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.25s ease;
}

.intro-dot--active {
    background: #3b82f6;
    width: 22px;
    border-radius: 6px;
}

.intro-skip-link {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    transition: color 0.15s ease;
}
.intro-skip-link:hover { color: #64748b; }

html.dark-theme .intro-feature-title { color: #e2e8f0; }
html.dark-theme .intro-feature-text  { color: #94a3b8; }
html.dark-theme .intro-dot           { background: #475569; }
html.dark-theme .intro-dot--active   { background: #3b82f6; }

@keyframes mascot-splash-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mascot-splash-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.04); }
}

@keyframes mascot-bob {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-14px) rotate(2deg); }
}

/* Hand-wave: short bursts of left-right rotation around the mascot's right */
/* shoulder (transform-origin set on .mascot-image). With the off-center    */
/* pivot, his LEFT hand (viewer-right) sweeps back and forth like a wave.   */
@keyframes mascot-wave {
    0%, 50%, 100% { transform: rotate(0deg); }
    60%           { transform: rotate(-9deg); }
    68%           { transform: rotate(9deg); }
    76%           { transform: rotate(-7deg); }
    84%           { transform: rotate(7deg); }
    92%           { transform: rotate(-3deg); }
}

@keyframes mascot-scale-in {
    0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.08) rotate(3deg);  opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes mascot-bubble-pop {
    0%   { opacity: 0; transform: translateY(8px) scale(0.4); }
    65%  { opacity: 1; transform: translateY(0)   scale(1.06); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes mascot-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

/* Dark theme overrides */
html.dark-theme .mascot-splash {
    background: linear-gradient(135deg, #1f1e1d 0%, #2a2927 50%, #1f1e1d 100%);
}
html.dark-theme .mascot-speech-bubble { background: #2a2927; }
html.dark-theme .mascot-speech-bubble::before {
    border-color: #2a2927 transparent transparent transparent;
}
html.dark-theme .mascot-greeting { color: #e2e8f0; }
html.dark-theme .mascot-catchphrase { color: #94a3b8; }

@media (max-width: 720px) {
    .mascot-image-wrap { width: 200px; height: 267px; }
    .mascot-greeting   { font-size: 1.2rem; }
    .mascot-catchphrase{ font-size: 0.88rem; }
}

/* NISKI ZASLON (Drago QA 16.09.2026.): na 320x568 je stupac uvoda bio 623 px
   visok u 568 px prozoru, pa se rezao gore i dolje. Maskota i razmaci se
   skupe toliko da pozdrav i oba gumba stanu bez skrola; uz veliko slovo
   ostatak preuzima skrol s `.mascot-splash`. */
@media (max-height: 640px) {
    .mascot-splash-content { gap: 1rem; padding: 0.5rem; }
    .mascot-stage { gap: 0.9rem; }
    .mascot-image-wrap { width: 150px; height: 200px; }
    .mascot-speech-bubble { padding: 0.85rem 1.1rem; }
    .mascot-greeting { font-size: 1.1rem; }
    .mascot-catchphrase { font-size: 0.85rem; }
    .mascot-second-btn { margin-top: 6px; }
}
/* PILULA JEZIKA NE LEZI NA POZDRAVU (Drago QA 16.09.2026.): `.jk` je fiksna
   gore desno (jezik-kugla.js) i ne zna nista o sadrzaju ispod sebe, a oblacic
   je na 320 px sirok 272 px pa mu je prvi redak zavrsavao ispod pilule
   (presjek 59x22 px). Gornja traka se zato REZERVIRA umjesto da se dva fiksna
   polozaja sudaraju. Pravilo ide POSLIJE niskog zaslona: ondje skracenica
   `padding` nulira ovaj odmak. */
@media (max-width: 400px) {
    .mascot-splash-content { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-image-wrap { animation: none; }
    .mascot-splash-bg::before,
    .mascot-splash-bg::after { animation: none; }
}
@keyframes setupModalPop {
    0%   { transform: scale(0.94); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ── Rich subject dashboard (hero + widgets + chat bar) ── */
#view-dashboard.dash-rich {
    align-items: stretch;
    /* Top-anchored, same as #view-home: vertical centring paints a large
       blank band above the hero on tall screens (iPad Pro portrait). */
    justify-content: flex-start;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: left;
}
/* Home view: ALWAYS top-anchored. The Tailwind justify-center on
   #view-home vertically centres the column — on tablets that painted a
   huge blank band above the hero (short content) or pushed the top out
   of reach (tall content). Content starts at the top, like every feed. */
#view-home.dash-rich {
    align-items: stretch;
    justify-content: flex-start;
    /* Dno je 0.5rem, ne 1.5rem. Ivo (26.08.): „doli izmedu dna input-box i dna
       ekrana ima neki nepotrebni prazni prostor."
       IZMJERENO na 1572x1200: od donjeg ruba bijele kartice do dna zaslona
       bilo je 38 px, jer su se ZBRAJALE dvije donje razmaknice — 24 px odavde
       i 13,6 px `margin-bottom` na samoj kartici. Na telefonu su obje vec bile
       ugasene (`@media max-width: 880px`), samo desktop nije bio doveden u red. */
    padding: 1.25rem 1.25rem 0.5rem;
    text-align: left;
}
/* Kartica se odiže od ruba zbog iOS home-indikatora i Androidove geste; na
   desktopu ondje nema nicega, pa je taj razmak samo praznina. Ispod 880 px
   pravilo nize vec radi isto — ovo je njegov par za velike ekrane. */
@media (min-width: 881px) {
    #view-home #home-chatbar .dash-chatbar { margin-bottom: 0; }
}
.dash-rich-wrap {
    width: 100%; max-width: 1180px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 0.7rem;
}
/* Children keep their natural height. Without this, any time the page is
   taller than the viewport the flex column SHRINKS every card (the hero
   collapsed to 30px and its content spilled over the sections below). */
.dash-rich-wrap > * { flex-shrink: 0; }

.dash-hero {
    position: relative;
    border-radius: 1.5rem;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #ede9fe 100%);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 14px 30px -16px rgba(30, 64, 175, 0.25);
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr auto;
    align-items: center;
    gap: 1.25rem;
    /* Hero height is bounded — long course summaries get line-clamped on
       the tagline below so the dashboard's "above-the-fold" stays the
       three Brzi-pristup tiles, not a wall of text. */
    min-height: 220px;
    max-height: 260px;
}
/* Ovdje su stajala ukrasna slova A i lambda u kutovima naslovnice. Maknuta
   15.08.2026. — prvo s pocetne, isti dan i s predmetne ("to bi maknuo da ne
   stoji na ovom ekranu", gledano na Windowsu). Ostaje Inzenjerko i ikona
   predmeta; kutovi su prazni namjerno. */
.dash-hero-mascot {
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    max-height: 230px; min-height: 180px; overflow: visible; pointer-events: none;
}
.dash-hero-mascot canvas, .dash-hero-mascot > div { width: 100%; height: 100%; }
.dash-hero-bubble {
    position: absolute; top: 0.5rem; right: -0.5rem; transform: translateX(40%);
    background: white; padding: 0.65rem 1rem; border-radius: 1rem; max-width: 220px;
    box-shadow: 0 10px 24px -8px rgba(30, 64, 175, 0.25); font-size: 0.82rem;
    line-height: 1.35; color: #1e293b; opacity: 0; animation: dashBubbleIn 0.6s 0.4s ease forwards;
    z-index: 5;
}
.dash-hero-bubble::after {
    content: ''; position: absolute; left: -8px; bottom: 14px;
    width: 14px; height: 14px; background: white; transform: rotate(45deg);
    box-shadow: -2px 2px 4px -2px rgba(30,64,175,0.1);
}
@keyframes dashBubbleIn { 0% { opacity: 0; transform: translateX(40%) translateY(8px) scale(0.92); } 100% { opacity: 1; transform: translateX(40%) translateY(0) scale(1); } }

.dash-hero-content { min-width: 0; }
.dash-hero-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: white; padding: 0.4rem 0.9rem; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; color: #1e293b;
    box-shadow: 0 4px 10px -2px rgba(30,64,175,0.18);
}
.dash-hero-content h1 { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-top: 0; line-height: 1.25; }
.dash-hero-content h1 .accent { display: block; color: #2563eb; font-size: 1.5rem; }
/* Cap the visible summary at ~4 lines so the hero never exceeds its
   max-height regardless of the course's `summary_short` length.
   Line-clamp gracefully ellipsizes anything longer; the full text is
   still in the DOM (and read by screen readers / inspectable). */
.dash-hero-content p.tagline {
    color: #475569;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
    max-width: 640px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dash-hero-features { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.dash-feature {
    display: flex; align-items: center; gap: 0.55rem;
    background: rgba(255,255,255,0.85); padding: 0.55rem 0.85rem;
    border-radius: 0.85rem; border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 10px -2px rgba(30,64,175,0.1);
}
.dash-feature-icon { width: 1.65rem; height: 1.65rem; border-radius: 0.5rem; display: grid; place-items: center; flex-shrink: 0; font-size: 0.9rem; }
.dash-feature-text .ft { font-size: 0.78rem; font-weight: 700; color: #0f172a; }
.dash-feature-text .fd { font-size: 0.7rem; color: #64748b; }

.dash-hero-deco {
    position: relative; width: 110px; height: 110px;
    display: grid; place-items: center;
}
.dash-hero-deco .books { font-size: 4rem; filter: drop-shadow(0 6px 12px rgba(30, 64, 175, 0.25)); }

/* Home hero: side columns are mirrored (mascot left, deco right, SAME width)
   so the greeting + chips block sits on the true center of the card. */
.dash-hero--home { grid-template-columns: minmax(180px, 220px) 1fr minmax(180px, 220px); }
.dash-hero--home .dash-hero-content { text-align: center; }
.dash-hero--home .dash-hero-content h1 { margin-bottom: 0; }
.dash-hero--home .dash-hero-content p.tagline { margin-left: auto; margin-right: auto; }
.dash-hero--home .dash-hero-deco { justify-self: center; }

@media (max-width: 880px) {
    .dash-hero, .dash-hero--home { grid-template-columns: 1fr; min-height: auto; padding: 1.25rem; }
    .dash-hero-mascot { max-width: 220px; margin: 0 auto; }
    .dash-hero-deco { display: none; }
    .dash-hero-bubble { position: static; transform: none; max-width: none; margin-bottom: 0.5rem; }
    .dash-hero-bubble::after { display: none; }
}

.dash-section-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.95rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem;
}
.dash-section-bolt {
    width: 1.65rem; height: 1.65rem; border-radius: 0.5rem;
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8; font-size: 0.85rem;
    box-shadow: 0 2px 4px -1px rgba(30, 64, 175, 0.2);
}
.dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
}
.dash-quick-card {
    display: flex; flex-direction: row; align-items: center;
    text-align: left;
    padding: 1rem 1.1rem;
    background: var(--card-bg, white);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 1.1rem;
    cursor: pointer; gap: 0.85rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative; overflow: hidden;
}
.dash-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -12px rgba(15, 23, 42, 0.18);
    border-color: var(--card-title, #94a3b8);
}
.dash-quick-icon {
    width: 3.4rem; height: 3.4rem;
    display: grid; place-items: center; flex-shrink: 0;
    background: transparent; padding: 0;
    transition: transform .18s ease;
}
.dash-quick-icon img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.16));
    user-select: none; pointer-events: none;
}
.dash-quick-card:hover .dash-quick-icon { transform: scale(1.08) translateY(-1px); }
.dash-quick-text { flex: 1; min-width: 0; }
.dash-quick-text .qt {
    font-weight: 700; font-size: 0.95rem;
    color: var(--card-title, #0f172a);
    margin: 0 0 0.18rem;
}
.dash-quick-text .qd {
    font-size: 0.74rem; color: #64748b; line-height: 1.35;
}
.dash-quick-arrow {
    width: 1.85rem; height: 1.85rem; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--card-arrow-bg, #f1f5f9);
    color: var(--card-arrow-fg, #64748b);
    font-size: 0.9rem; font-weight: 700; line-height: 1;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.dash-quick-card:hover .dash-quick-arrow { transform: translateX(3px); }

/* ── Per-card themes ── */
.dash-quick-card.theme-skripta {
    --card-bg: linear-gradient(180deg, #ecfdf5 0%, #ffffff 80%);
    --card-border: #a7f3d0;
    --card-title: #047857;
    --card-arrow-bg: #d1fae5; --card-arrow-fg: #047857;
}
.dash-quick-card.theme-kviz {
    --card-bg: linear-gradient(180deg, #eff6ff 0%, #ffffff 80%);
    --card-border: #bfdbfe;
    --card-title: #1d4ed8;
    --card-arrow-bg: #dbeafe; --card-arrow-fg: #1d4ed8;
}
.dash-quick-card.theme-zadaci {
    --card-bg: linear-gradient(180deg, #fffbeb 0%, #ffffff 80%);
    --card-border: #fde68a;
    --card-title: #b45309;
    --card-arrow-bg: #fef3c7; --card-arrow-fg: #b45309;
}
.dash-quick-card.theme-ispit {
    --card-bg: linear-gradient(180deg, #fdf2f8 0%, #ffffff 80%);
    --card-border: #fbcfe8;
    --card-title: #be185d;
    --card-arrow-bg: #fce7f3; --card-arrow-fg: #be185d;
}
.dash-quick-card.theme-audioknjiga {
    --card-bg: linear-gradient(180deg, #f0f9ff 0%, #ffffff 80%);
    --card-border: #bae6fd;
    --card-title: #0369a1;
    --card-arrow-bg: #e0f2fe; --card-arrow-fg: #0369a1;
}
.dash-quick-card.theme-kolege {
    --card-bg: linear-gradient(180deg, #fff1f2 0%, #ffffff 80%);
    --card-border: #fecdd3;
    --card-title: #be123c;
    --card-arrow-bg: #ffe4e6; --card-arrow-fg: #be123c;
}

.dash-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; align-items: stretch; }
/* Peek slot whose fetch came back empty (course without that bank, or the
   server was unreachable) — hidden instead of a stuck "Učitavam…". */
.dash-widget.peek-unavailable { display: none !important; }
/* WIDE desktop only (>1160px — where .dash-widgets really is a 3-col grid):
   Kviz dana (2/3) and Liga genija (1/3) share one row. In the 881–1160 zone
   the widgets stack in ONE column, and a span-2 there conjured a phantom 0px
   grid track that crushed every card. */
@media (min-width: 1161px) {
    #view-dashboard #kviz-dana { grid-column: span 2; }
    #view-dashboard #kviz-dana .kd-card { height: 100%; }
    #view-dashboard .dash-widget-leaderboard { grid-column: span 1; }
}
@media (min-width: 881px) {
    /* Gentle vertical trim so the tutor chat bar reaches a desktop screen:
       the hero drops its 220px min-height (that floor, not its content, was
       the height) and the excerpt clamps. Fonts and paddings stay as
       designed — an aggressive shrink read worse than the scroll it saved. */
    #view-dashboard .dash-hero { padding: 0.85rem 1.5rem; min-height: 0; }
    #view-dashboard .dash-hero-mascot { max-height: 150px; min-height: 110px; }
    #view-dashboard .peek-excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
    /* Mapa znanja adapts to its card: the row's height is set by the tallest
       sibling (usually Brza provjera), so the chip grid centres itself in
       the leftover space and the legend pins to the bottom — no dead void,
       no oversized card. */
    #view-dashboard #dash-map-widget { display: flex; flex-direction: column; }
    #view-dashboard #dash-map-widget .kmap { flex: 1 1 auto; align-content: center; }
    #view-dashboard #dash-map-widget .kmap-foot { margin-top: auto; padding-top: 0.4rem; }
    /* Quiz-card rows a touch tighter — four options plus the CTA are the
       tallest column in the widget row. */
    #view-dashboard .peek-opt { padding: 5px 10px; }
    #view-dashboard .peek-actions { margin-top: 0.2rem; }
    /* The Inženjerko chat bar is the one thing that must ALWAYS be on
       screen, so on laptops whose height forces a scroll it sticks to the
       bottom edge and the content scrolls beneath it — same pattern (and
       same frosted look) as the pinned bar on phones. When everything fits
       (e.g. 1080p) sticky simply rests at its natural place, unchanged. */
}
/* APP-SHELL — ALL devices (the chat-app pattern, owner request): the view is
   a flex column — content SCROLLS in a region that ENDS above the chat bar,
   and the bar (moved out of the wrap by the render, see app.js) sits below
   it, always on screen. Nothing ever slides under or over the chat, there is
   always room for the last card, and no frosted strip is needed anywhere. */
/* :not(.hidden) is LOAD-BEARING: this id+class selector outranks Tailwind's
   `.hidden { display:none }`, so without it a "hidden" view stayed painted
   and covered the active one (home showing under a subject header). */
#view-home.dash-rich:not(.hidden),
#view-dashboard.dash-rich:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
#view-home.dash-rich .dash-rich-wrap,
#view-dashboard.dash-rich .dash-rich-wrap {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    /* No visible scrollbar: it stole width from the cards INSIDE the scroll
       region while the docked bar below kept the full column — a 6-15px
       misalignment whenever the dashboard scrolled. Wheel/touch still work. */
    scrollbar-width: none;
}
#view-home.dash-rich .dash-rich-wrap::-webkit-scrollbar,
#view-dashboard.dash-rich .dash-rich-wrap::-webkit-scrollbar { display: none; }
#view-home.dash-rich > #home-chatbar,
#view-dashboard.dash-rich > #dash-chatbar-wrap {
    flex: 0 0 auto; padding-top: 0.6rem;
    /* Same column as the content above it — outside the wrap the bar lost
       the wrap's max-width and stretched across the whole window. */
    width: 100%; max-width: 1180px; margin: 0 auto;
}
/* minmax(0,…): a plain 1fr track's min size is the content — one long
   nowrap course title inside a widget blows the card past the viewport
   on phones. min-width:0 on the card is the same guard at item level. */
@media (max-width: 880px) { .dash-widgets { grid-template-columns: minmax(0, 1fr); } }

/* Small tablets (iPad Mini/Air, 768–880) navigate like phones: the
   persistent sidebar eats a third of the screen, so it goes off-canvas
   with the hamburger + dark overlay instead. Tailwind's md: variants
   turn the desktop layout on at exactly 768 — these overrides push that
   boundary up to 880. */
@media (min-width: 768px) and (max-width: 880px) {
    /* Tablet portrait uses the PHONE-style column, but Tailwind's md: fires
       at exactly 768 and let the desktop-only peek cards leak into it —
       overgrown column, leaderboard pushed under the chat bar. Keep them
       desktop-only for real (>880). */
    #home-peek-read, #home-peek-quiz, #subj-peek-read, #subj-peek-quiz { display: none !important; }
    #sidebar { position: fixed !important; width: 18rem !important; }
    #sidebar.\-translate-x-full { transform: translateX(-100%) !important; }
    header .md\:hidden { display: block !important; }          /* ☰ */
    #sidebar .md\:hidden { display: revert !important; }       /* ✕ u sidebaru */
    #mobile-overlay:not(.hidden) { display: block !important; }
}

/* Quick-access on small tablets (iPad Mini/Air, 768–880): the cards are
   too narrow for title + description — same icon-only treatment as
   phones. (≤767 is handled by mobile.css; this extends it upward.) */
@media (max-width: 880px) {
    .dash-quick { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.6rem !important; }
    .dash-quick-card {
        padding: 0.25rem !important;
        gap: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 / 1 !important;
        max-height: 6rem !important;
        max-width: 6rem !important;
        width: 100% !important;
        justify-self: center !important;
        border-radius: 0.8rem !important;
    }
    .dash-quick-icon {
        width: 4.8rem !important; height: 4.8rem !important;
        margin: 0 auto !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
    .dash-quick-icon > img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    .dash-quick-text, .dash-quick-arrow { display: none !important; }
}

/* Phones (≤600): keep ALL feature cards on a SINGLE row — the 880px rule's
   3 columns pushed the 4th (Kolege) onto a second row. Four equal columns
   with smaller icons so Skripta / Kviz / Audioknjiga / Kolege always fit
   one row, even on a 360px screen. */
@media (max-width: 600px) {
    .dash-quick { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.4rem !important; }
    .dash-quick-card {
        max-width: none !important;
        max-height: none !important;
        padding: 0.15rem !important;
        border-radius: 0.7rem !important;
    }
    .dash-quick-icon { width: 3.3rem !important; height: 3.3rem !important; }
}

/* EVERY dashboard hero (home AND subject) on tablets, phones and narrow
   windows (≤1160): the desktop 3-column hero has no room next to a
   ~280px sidebar — the title squeezed to a word per line and max-height
   CLIPPED the content below the mascot. Compact variant instead: no
   mascot, no deco, no corner glyphs, content centred, natural height.
   The full mascot hero needs ≥1160 to breathe (sidebar 256 + two 220px
   side columns + ~380px of content). */
@media (max-width: 1160px) {
    /* Tablets: widgets stack one per row (3 squeezed columns read badly
       next to the sidebar), and quick-access settles into a 2×2 of roomy
       labelled cards — 3 columns left the 4th card alone on a second row,
       which read as broken. */
    .dash-widgets { grid-template-columns: minmax(0, 1fr); }
    .dash-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dash-hero {
        display: block;
        padding: 1rem 0.95rem 0.95rem;
        min-height: 0;
        max-height: none;
    }
    .dash-hero > .relative,
    .dash-hero .dash-hero-mascot,
    .dash-hero .dash-hero-deco { display: none; }
    .dash-hero .dash-hero-content { text-align: center; }
    .dash-hero .dash-hero-content h1 { font-size: 1.1rem; margin-bottom: 0; }
    .dash-hero .dash-hero-content h1 .accent { display: inline; font-size: 1.1rem; }
    .dash-hero .dash-hero-content p.tagline {
        font-size: 0.78rem; margin-top: 0.3rem;
        margin-left: auto; margin-right: auto;
    }
    .dash-hero .hero-gamify { margin-top: 10px; }
}
.dash-widget {
    background: white; border: 1px solid #e2e8f0; border-radius: 1rem;
    padding: 1.1rem 1.15rem;
    display: flex; flex-direction: column;
    min-width: 0;
}
.dash-widget h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin-bottom: 0.7rem; }
/* Header row (title + "Pogledaj sve →") — guaranteed breathing room so the
   link never glues to a wrapping title on narrow 3-col layouts (iPad). */
.dash-widget > .flex.items-center.justify-between { gap: 0.6rem; }
.dash-widget > .flex.items-center.justify-between > button { flex-shrink: 0; white-space: nowrap; }

/* „Pogledaj sve" kao mala pilula (Drago, 04.09.): goli podcrtani link je
   stršao iz jezika aplikacije — radnje su svugdje pilule i kartice. */
.sve-pilula {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 11px; font-weight: 700; color: #2563eb;
    background: #eff6ff; border: 1px solid #dbeafe;
    padding: 3px 10px; border-radius: 999px;
    white-space: nowrap; flex-shrink: 0;
    transition: transform 0.12s ease, background 0.12s ease;
}
.sve-pilula:hover { background: #dbeafe; }
.sve-pilula:active { transform: scale(0.95); }
.sve-pilula:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
html.dark-theme .sve-pilula {
    color: #93c5fd; background: rgba(37, 99, 235, 0.16);
    border-color: rgba(96, 165, 250, 0.35);
}
html.dark-theme .sve-pilula:hover { background: rgba(37, 99, 235, 0.28); }

/* Keyboard/a11y: a clear focus ring on the custom interactive surfaces
   (chips, course cards, modal ×) — hover-only affordances exclude
   keyboard users and screen-reader navigation. */
.hg-chip:focus-visible, .home-course-card:focus-visible, .modal-x:focus-visible,
.dash-quick-card:focus-visible, .lb-back:focus-visible {
    outline: 2px solid #2563eb; outline-offset: 2px;
}

/* Near-empty league list: nudge to invite classmates instead of a void. */
.dash-lb-invite {
    font-size: 0.72rem; color: #64748b; font-style: italic;
    padding: 0.45rem 0.5rem 0.2rem; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.dash-lb-empty {
    display: grid; justify-items: center; gap: 0.4rem;
    padding: 0.8rem 0.5rem; text-align: center;
    font-size: 0.78rem; color: #64748b;
}
/* Ljestvica s manje imena nego mjesta (Drago, 24.09.2026.): jedna tiha
   recenica umjesto praznine ispod zadnjeg imena. Tisa je od imena, da se ne
   cita kao jos jedan igrac. */
.dash-lb-jos {
    padding: 0.35rem 0.1rem 0; text-align: center;
    /* Ista siva kao prazna ljestvica (#64748b, 4,8:1): #94a3b8 bi na bijelom
       bio 2,6:1, a ovo je recenica koja se cita. */
    font-size: 0.72rem; font-style: italic; color: #64748b;
}
html.dark-theme .dash-lb-jos { color: #8f9bb0; }

/* =====================================================================
   MASKOTA U TRENUCIMA — the real Inženjerko's head (composited from the
   controller's PNG layers) shows up in celebrations, tips and empty
   states. Zero layout cost: overlays, toasts, existing empty space.
   ===================================================================== */
/* Tutor/mentor intro avatar: the head sticker centred on a soft radial
   ground inside the existing circle (full-body mount cropped the helmet). */
.intro-head-circle {
    display: grid; place-items: center;
    background: radial-gradient(circle at 38% 30%, #f0f7ff, #dbeafe 78%);
}
.intro-head-circle img { width: 62%; height: auto; filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.25)); }
html.dark-theme .intro-head-circle { background: radial-gradient(circle at 38% 30%, #1e3a8a, #172554 78%); }

/* Die-cut sticker of the real head — the white helmet outline IS the
   frame, so no circle, no border, just a soft shadow for separation. */
.ing-head {
    position: relative; display: inline-flex;
    flex-shrink: 0; vertical-align: middle;
}
.ing-head img {
    /* Fills the box the wrapper carries (mascotHeadHTML writes it inline), so
       an ancestor `img` rule — .prose img { width:100% } — can no longer
       stretch the head.
       margin/border-radius are reset for the SAME reason: the textbook's
       figure rule also gives every img `margin: 15px 0` and rounded corners.
       Inside a 19x16 wrapper those margins pushed the head clean out of its
       button, bottom-left (Ivo, 2026-08-05). The earlier fix measured the
       head's SIZE and found it correct — it never checked that the head was
       still INSIDE its box. */
    width: 100%; height: 100%; max-width: none; object-fit: contain;
    margin: 0; border-radius: 0;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.28));
}

/* 1 · greeting avatar — only on the compact (mascot-less) hero.
   The head PEEKS over the card's top edge like a die-cut sticker:
   depth + character, and half the head costs no card height. */
.hero-head-slot { display: none; }
@media (max-width: 1160px) {
    .dash-hero--home, #view-dashboard .dash-hero {
        overflow: visible;            /* let the head stick out */
        /* Room for the peeking head. 26px je bilo na žilet (3px zraka), a
           fit-osigurač (app.js) zumira karticu pa margina padne na 26·z dok
           rub reza (vrh skrolera) stoji — na z=0.88 glava je bila TOČNO na
           nuli i na stvarnim uređajima se rezala (Drago, 04.09.). 34px drži
           ~6px zraka i na podu zuma (0.85). */
        margin-top: 34px;
    }
    .hero-head-slot {
        display: flex; justify-content: center;
        margin: -34px 0 2px;
    }
    /* Sizes the WRAPPER now, not the img — the img fills its box (see
       .ing-head img). 56×46 keeps the same peeking head as before. */
    .hero-head-slot .ing-head {
        width: 56px !important; height: 46px !important;
    }
    .hero-head-slot img {
        filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.3));
    }

    /* Tagline: first visit only (hero-first) — after that it's noise. */
    .dash-hero--home .dash-hero-content p.tagline { display: none; }
    .dash-hero--home.hero-first .dash-hero-content p.tagline { display: -webkit-box; }
}
/* SEGMENTIRANA TRAKA NA SVAKOJ SIRINI (Drago QA 16.09.2026.): pravila ispod su
   stajala u `@media (max-width: 1160px)`, pa je iznad praga `.hero-gamify`
   ostajao blokovni spremnik PUNE sirine stupca s plocicama centriranim u
   njemu. Katanac gosta je njegovo dijete s `position: absolute; inset: 0` i
   poravnanjem desno, pa je na 1280x800 lebdio oko x=942, stotinjak piksela
   desno od trake koju zakljucava, bez vidljive veze s njom. Skupljanjem trake
   na njezin sadrzaj (`inline-flex`) katanac ostaje NA pokazateljima na svakoj
   sirini, a desktop izgleda kao tablet. Tamna inacica trake (`html.dark-theme`
   ispod) ionako je oduvijek stajala izvan upita, dakle racunala je na ovaj
   izgled i na sirokom zaslonu. Ostatak upita (glava koja viri, tagline) ostaje
   vezan uz usku sirinu. */

    /* 4 floating pills → ONE segmented status strip. Reads as a single
       instrument; numbers mono, gold only on rewards (🔥 / ⚡). Each
       segment keeps its own tap action. */
    .dash-hero--home .hero-gamify {
        display: inline-flex; flex-wrap: nowrap; gap: 0;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(37, 99, 235, 0.16);
        border-radius: 14px;
        box-shadow: 0 4px 14px -8px rgba(30, 64, 175, 0.35);
        margin: 10px auto 0;
        overflow: hidden;
    }
    .dash-hero--home .hg-chip {
        background: none; border: 0; box-shadow: none; border-radius: 0;
        display: grid; justify-items: center; gap: 1px;
        padding: 7px 14px; animation: none;
    }
    .dash-hero--home .hg-chip:hover { transform: none; box-shadow: none; background: rgba(37, 99, 235, 0.06); }
    .dash-hero--home .hg-chip + .hg-chip { border-left: 1px solid rgba(37, 99, 235, 0.12); }
    .dash-hero--home .hg-chip .hg-emoji { width: auto; font-size: 15px; line-height: 1; }
    .dash-hero--home .hg-chip .hg-txt b {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-variant-numeric: tabular-nums; font-size: 12.5px;
    }
    .dash-hero--home .hg-level { padding: 5px 12px; }
    .dash-hero--home .hg-icon-wrap { width: 30px !important; height: 30px !important; }
    .dash-hero--home .hg-chip:last-child .hg-txt b { color: #b45309; }   /* ⚡ XP = gold */
html.dark-theme .dash-hero--home .hero-gamify { background: rgba(30, 41, 59, 0.92); border-color: rgba(148, 163, 184, 0.2); }
/* Tamna inacica segmentirane trake ide uz nju, dakle bez upita o sirini
   (Drago QA 16.09.2026.) — traka je sada segmentirana na svakoj sirini. */
html.dark-theme .dash-hero--home .hg-chip + .hg-chip { border-left-color: rgba(148, 163, 184, 0.18); }
html.dark-theme .dash-hero--home .hg-chip:last-child .hg-txt b { color: #fbbf24; }

/* 2 · suggest title: head sits inline before the words */
.dash-suggest-title .ing-head { margin-right: 0.15rem; vertical-align: -8px; }

/* 3 · level-up: the animated controller stage above the card */
.levelup-mascot {
    width: 130px; height: 165px; margin: -10px auto 2px;
    pointer-events: none;
}
.levelup-mascot canvas, .levelup-mascot > div { width: 100%; height: 100%; }

/* 4 · quiz results: the gold XP card was replaced by the Inženjerko chat
   bubble (.qr-mascot-row / .qr-bubble, defined with the score hero) —
   the mascot now SPEAKS the result instead of decorating a card. */

/* 5 · pill toasts: his head delivers the message */
.streak-toast { display: flex; align-items: center; gap: 0.5rem; }
.toast-head {
    background: #fff; border-radius: 50%; flex-shrink: 0;
    width: 30px; height: 30px; display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* "Inženjerko predlaže" — adaptive next-step card (subject dashboard).
   Gold = reward/gamification accent; the card turns the student's own
   mistakes into ONE concrete next action. */
.dash-suggest {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
}
.dash-suggest-title {
    font-size: 0.78rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #b45309; margin-bottom: 0.3rem;
}
.dash-suggest-text { font-size: 0.85rem; color: #78350f; line-height: 1.5; }
.dash-suggest-text b { color: #92400e; }
.dash-suggest-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.dash-suggest-btn {
    background: #f59e0b; color: #fff; font-weight: 700; font-size: 0.78rem;
    padding: 0.5rem 0.95rem; border-radius: 0.6rem;
    box-shadow: 0 4px 10px -4px rgba(245, 158, 11, .6);
    transition: filter .15s ease, transform .12s ease;
}
.dash-suggest-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dash-suggest-btn:active { transform: scale(.97); }
.dash-suggest-ghost {
    background: transparent; color: #b45309;
    border: 1.5px solid #f59e0b; box-shadow: none;
}
html.dark-theme .dash-suggest { background: linear-gradient(135deg, #292008 0%, #33290f 100%); border-color: #92400e; border-left-color: #f59e0b; }
html.dark-theme .dash-suggest-title { color: #fbbf24; }
html.dark-theme .dash-suggest-text { color: #fde68a; }
html.dark-theme .dash-suggest-text b { color: #fcd34d; }
html.dark-theme .dash-suggest-ghost { color: #fbbf24; }
/* Head row: title + chevron. The chevron only exists visually on compact
   screens where the card is collapsible. */
.dash-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dash-suggest-head .dash-suggest-title { margin-bottom: 0; }
.dash-suggest-chev { display: none; color: #b45309; font-size: 12px; }
html.dark-theme .dash-suggest-chev { color: #fbbf24; }
.dash-suggest-body { margin-top: 0.35rem; }
@media (max-width: 1160px) {
    .dash-suggest { cursor: pointer; padding: 0.7rem 1rem; }
    .dash-suggest-chev { display: inline; }
    .dash-suggest:not(.open) .dash-suggest-body { display: none; }
    .dash-suggest.open .dash-suggest-body { margin-top: 0.5rem; }
}

/* =====================================================================
   DARK THEME — home + subject dashboards. Without these the new home
   view kept near-black titles and white cards on the dark background.
   ===================================================================== */
html.dark-theme .dash-hero,
html.dark-theme .dash-hero--home {
    background: linear-gradient(135deg, #2a2927 0%, #1e3a8a 55%, #312e81 100%);
    border-color: rgba(148, 163, 184, 0.18);
}
html.dark-theme .dash-hero-content h1 { color: #f1f5f9; }
html.dark-theme .dash-hero-content h1 .accent { color: #93c5fd; }
html.dark-theme .dash-hero-content p.tagline { color: #cbd5e1; }
html.dark-theme .dash-section-title { color: #e2e8f0; }
html.dark-theme .dash-widget { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .dash-widget h3 { color: #e2e8f0; }
html.dark-theme .home-course-card { background: #2a2927; border-color: #3b3a37; }
@media (hover: hover) and (pointer: fine) {
  html.dark-theme .home-course-card:hover { border-color: #3b82f6; }
}
html.dark-theme .home-course-card:active { background-color: #34332f; }
html.dark-theme .home-course-title { color: #e2e8f0; }
html.dark-theme .home-course-sub { color: #94a3b8; }
html.dark-theme .home-course-icon { background: #172554; }
html.dark-theme .dash-lb-row { background: #1f1e1d; border-color: #3b3a37; }
html.dark-theme .dash-lb-name { color: #cbd5e1; }
html.dark-theme .dash-lb-rank { color: #94a3b8; }
html.dark-theme .dash-lb-you { background: #451a03; border-color: #b45309; }
html.dark-theme .dash-lb-you .dash-lb-name { color: #fcd34d; }
html.dark-theme .dash-lb-you .dash-lb-rank,
html.dark-theme .dash-lb-you .dash-lb-score { color: #fbbf24; }
html.dark-theme .dash-lb-invite { color: #94a3b8; }
html.dark-theme .dash-chatbar { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .dash-chatbar input { color: #e2e8f0; background: transparent; }
html.dark-theme .dash-chatbar-desc { color: #94a3b8; }
html.dark-theme .dash-progress-ring { background: conic-gradient(#3b82f6 var(--p, 0%), #3b3a37 0); }
html.dark-theme .dash-progress-ring::before { background: #2a2927; }
html.dark-theme .dash-progress-ring > span { color: #93c5fd; }
/* Tailwind slate text utilities inside the dashboards — flip for dark. */
html.dark-theme #view-home .text-slate-800, html.dark-theme #view-dashboard .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-home .text-slate-700, html.dark-theme #view-dashboard .text-slate-700 { color: #cbd5e1; }
html.dark-theme #view-home .text-slate-500, html.dark-theme #view-dashboard .text-slate-500 { color: #94a3b8; }
html.dark-theme #view-home .bg-slate-100, html.dark-theme #view-dashboard .bg-slate-100 { background-color: #1f1e1d; }
.dash-progress-ring {
    width: 88px; height: 88px; flex-shrink: 0; position: relative;
    background: conic-gradient(#3b82f6 var(--p, 0%), #e2e8f0 0); border-radius: 50%;
    display: grid; place-items: center;
}
.dash-progress-ring::before { content: ''; position: absolute; inset: 8px; background: white; border-radius: 50%; }
.dash-progress-ring > span { position: relative; font-weight: 800; color: #2563eb; font-size: 1.05rem; }
.dash-progress-ring > small { position: relative; display: block; font-size: 0.6rem; color: #94a3b8; margin-top: -0.1rem; font-weight: 600; }

/* Leaderboard widget — matches base .dash-widget look (white + slate
   border) so it reads as a peer of "Nastavi gdje si stao" and
   "Tvoj napredak". The grid's align-items: stretch keeps all three
   widgets the same height; .dash-lb-list flexes to fill remaining
   vertical space. Only the "Ti" row carries an amber accent so the
   student can spot their position at a glance. */
.dash-lb-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.22rem;
    flex: 1 1 auto;
    /* Rows stack from the top — with few players the list must not be
       stretched apart to fill the widget's height. */
    justify-content: flex-start;
}
.dash-lb-row {
    display: grid;
    grid-template-columns: 1.1rem 1rem 1fr auto;
    align-items: center; gap: 0.4rem;
    padding: 0.16rem 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    font-size: 0.74rem;
    line-height: 1.15;
}
/* Placeholder ladder — the exact box of a real row, so the widget opens at
   its final height on a first run and the arriving rows swap in without
   moving anything below them. Static on purpose: a pulsing skeleton is one
   more thing flickering on a screen that should read as already there. */
.dash-lb-skel { background: #f8fafc; border-color: #eef2f7; }
/* The cells keep their real classes so the row measures itself; only the
   ink is replaced — the medal glyph sets the line box invisibly, the name
   becomes a bar. */
.dash-lb-skel .dash-lb-medal { visibility: hidden; }
.dash-lb-skel .dash-lb-name > i {
    display: block; height: 0.7rem; border-radius: 0.25rem; background: #e9eef5;
}
html.dark-theme .dash-lb-skel { background: rgba(30,41,59,.5); border-color: rgba(148,163,184,.16); }
html.dark-theme .dash-lb-skel .dash-lb-name > i { background: rgba(148,163,184,.18); }

.dash-lb-rank { font-weight: 700; color: #475569; text-align: right; font-size: 0.7rem; }
.dash-lb-medal { text-align: center; font-size: 0.85rem; line-height: 1; }
.dash-lb-name { color: #1e293b; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lb-score { color: #2563eb; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.74rem; }
.dash-lb-you {
    background: #fef3c7;
    border-color: #f59e0b;
}
.dash-lb-you .dash-lb-rank { color: #92400e; }
.dash-lb-you .dash-lb-name { color: #78350f; font-weight: 800; }
.dash-lb-you .dash-lb-score { color: #b45309; }

/* =====================================================================
   HOME DASHBOARD (global landing view)
   ===================================================================== */

/* Enrolled-course quick-access grid — 6 cards in a 3-column row at
   desktop, 2-col at mid-width, 1-col on mobile. Mirrors .dash-quick. */
/* Praćenje čitanja u audioknjizi: rečenica koja se upravo čita (Ivo,
   2026-08-10). Posivljena podloga, ne obojano slovo — oko je prati bez napora
   a tekst ostaje čitljiv i kad se pogled vrati unatrag.
   Cijeli tekst je klikabilan: klik na rečenicu premota zvuk na nju, pa je
   `cursor: pointer` obećanje koje se drži. */
.ab-sent { cursor: pointer; border-radius: 3px; transition: background-color .25s ease; }
.ab-sent.is-now { background: #e2e8f0; color: #0f172a; }
/* `:hover` SAMO ondje gdje pokazivac stvarno lebdi (Ivo, 22.08.2026.: „ova
   prva recenica koja je kliknuta nemora ostat oznacena, samo trenutna koja se
   cita"). Na dodirnom zaslonu `:hover` ostane zalijepljen na zadnjem
   dodirnutom elementu dok se ne dodirne nesto drugo — pa su na ekranu bile
   DVIJE osjencane recenice: ona koja se cita (`is-now`) i ona koju je student
   kliknuo prije toga. */
@media (hover: hover) and (pointer: fine) {
  .ab-sent:hover { background: #f1f5f9; }
}
@media (prefers-color-scheme: dark) {
  .ab-sent.is-now { background: #334155; color: #f8fafc; }
}
@media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine) {
  .ab-sent:hover { background: #1e293b; }
}

/* Learn Now daily-goal bar. Fixed under the app header rather than in the
   feed: the feed is a snap scroller of full-screen slides, so a bar in the
   flow would leave with the first swipe — and a goal you have to scroll back
   up to see is not a goal. */
#learn-plan-bar {
    position: fixed; left: 0; right: 0; top: var(--learn-top, 54px);
    /* 16 > #app-top-scrim (15): traka je krom kao i header, pa je scrimova
       bijela maglica ne smije izblijediti kad sjedne pod sam vrh ekrana. */
    z-index: 16;
    padding: 6px 14px 7px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e2e8f0;
}
#learn-plan-bar .lpb-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
}
#learn-plan-bar .lpb-label { font-size: 11px; font-weight: 700; color: #334155; }
#learn-plan-bar .lpb-meta  { font-size: 10px; color: #94a3b8; }
#learn-plan-bar .lpb-track {
    height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
#learn-plan-bar .lpb-fill {
    height: 100%; border-radius: 999px; background: #3b82f6;
    transition: width .35s ease;
}
#learn-plan-bar.lpb-done .lpb-fill  { background: #16a34a; }
#learn-plan-bar.lpb-done .lpb-label { color: #15803d; }
/* Skriveni header (scroll dolje; klasu stavlja setHidden u app.js): traka ne
   smije ostati na staroj visini headera — iznad nje bi zjapio mrtvi pojas
   (Ivo, 20.08.2026.). Digne se na vrh istom safe-area računicom koju koristi
   i sam header (--safe-top minus claw-back); na webu su obje varijable
   nedefinirane pa ispadne 0. Namjerno BEZ tranzicije — toggle headera na
   snap feedu je instantan, pa i traka mora skočiti u istom kadru. */
html.app-hdr-hidden #learn-plan-bar {
    top: max(0px, calc(var(--safe-top, 0px) - var(--safe-top-trim, 0px)));
}
/* The feed starts below the bar when it is there. */
#view-learn:has(~ #learn-plan-bar), body:has(#learn-plan-bar) #view-learn {
    padding-top: 38px;
}.home-courses-grid {
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .home-courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* minmax(0,…) is load-bearing: with plain 1fr the track's min size is the
   content — a nowrap course title forces the card past the viewport and
   the whole page scrolls sideways on phones. */
@media (max-width: 640px)  { .home-courses-grid { grid-template-columns: minmax(0, 1fr); } }

.home-course-card {
    min-width: 0;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* PODIZANJE SAMO GDJE POKAZIVAC STVARNO LEBDI (Ivo, 16.09.2026., iPhone:
   „ovo se dogodi kad kliknem na predmet" — bijela ploha preko vrha kartice,
   rub i pola naslova odrezani).

   Na dodirnom zaslonu `:hover` ostane ZALIJEPLJEN na dodirnutoj kartici, a
   kartica stoji u vodoravnoj traci s `overflow-x: auto`. WebKit transform +
   sjenu na djetetu takvog skrolera iscrta u zasebnom sloju s krivim izrezom,
   pa preko kartice ostane bijeli pravokutnik. Na obje Ivine slike kvar je
   bio tocno na kartici svijetloplavog ruba — a to je boja ovog `:hover`
   stanja (#bfdbfe).

   Isto pravilo kao `.ab-sent:hover` (22.08.): efekt koji je za mis, samo za
   mis. Dodir dobiva svoju povratnu informaciju bez transforma ispod. */
@media (hover: hover) and (pointer: fine) {
  .home-course-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.15);
      border-color: #bfdbfe;
  }
}
/* Dodir: kratko zatamnjenje dok je prst dolje — bez transforma i bez sjene,
   pa nema ni sloja koji WebKit moze krivo izrezati. */
.home-course-card:active { background-color: #f1f5f9; }
/* Prvi ulaz (Faza C): kartica pripremljenog predmeta samo pulsira plavo
   (Drago 09.09.: „neka samo svitli", bez oznake) — oblačić nema gumb,
   kartica sama zove. */
.home-course-card.hcc-prvi {
    border-color: #2563eb;
    animation: hccPrviPuls 1.7s ease-in-out infinite;
}
@keyframes hccPrviPuls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
    55%      { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
}
html.dark-theme .home-course-card.hcc-prvi { border-color: #3b82f6; }
@media (prefers-reduced-motion: reduce) {
    .home-course-card.hcc-prvi { animation: none; }
}
.hcc-icon {
    flex-shrink: 0; width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    background: #eff6ff;
    border-radius: 0.65rem;
}
/* IKONA SE RAVNA PREMA SVOJOJ KUTIJI, ne obrnuto.
   Ikona dolazi iz JS-a s `w-10 h-10` (40px), a kutija ima TRI različite
   veličine kroz breakpointe (2,75rem ovdje, 1,6rem na uskom, 2,4rem u
   mobilnom preslagivanju). Gdje je kutija manja od 40px slika je visjela
   preko ruba i podloga je izgledala kao da je pobjegla — na telefonu je to
   bilo 25,6px kutije ispod 40px ikone, dakle pola ikone van (Ivo, 12.08.,
   dvaput prijavljeno; prvi popravak je dirao samo jedan od tri slučaja).
   Tailwind je prekompajliran s !important, pa i ovo mora biti !important. */
.hcc-icon > img, .hcc-icon > div {
    width: 100% !important; height: 100% !important;
    object-fit: contain; padding: 2px;
}
/* Predmet bez PNG-a pada na emoji u <div>. Slova ne poštuju `object-fit`,
   pa se glif ravna veličinom fonta — bez ovoga je na uskom ekranu izlazio
   2,6px ispod kutije (izmjereno). 1,1rem stane i u najmanju (28px). */
.hcc-icon > div {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; line-height: 1; overflow: hidden;
}
.hcc-main { flex: 1; min-width: 0; display: grid; gap: 0.3rem; }
.hcc-title {
    font-size: 0.85rem; font-weight: 700; color: #0f172a;
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hcc-prog { display: flex; align-items: center; gap: 0.5rem; }
.hcc-bar { flex: 1; height: 5px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.hcc-bar i { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.hcc-pc {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.68rem; font-weight: 700; color: #64748b; flex-shrink: 0;
}
.hcc-add {
    border-style: dashed; justify-content: center;
    color: #94a3b8; font-weight: 700; font-size: 0.82rem;
}
.hcc-add:hover { color: #2563eb; }
/* Desktop "＋ Dodaj još": a small header link beside the section title — the
   dashed tile is a phone-rail thing and used to wrap the row on desktop. */
.hcc-add-link { display: none; }
@media (min-width: 881px) {
    .hcc-add-link {
        display: inline-flex; align-items: center; gap: 0.25rem;
        font-size: 0.78rem; font-weight: 700; color: #94a3b8;
        border: none; background: none; cursor: pointer; padding: 4px 8px;
    }
    .hcc-add-link:hover { color: #2563eb; }
    #home-add-tile { display: none; }
    /* Courses ride ONE horizontal rail on desktop too (same logic as the
       phone swipe row, wide cards): no second row, extra courses scroll. */
    .home-courses-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }
    .home-course-card { flex: 0 0 340px; }
}
html.dark-theme .hcc-icon { background: #172554; }
html.dark-theme .hcc-title { color: #e2e8f0; }
html.dark-theme .hcc-bar { background: #3b3a37; }
html.dark-theme .hcc-pc { color: #94a3b8; }
/* „poglavlje 1 / 13" ispod naziva: tvrdi #64748b bez tamne inacice davao je
   3,05:1 na tamnoj kartici (Drago QA 16.09.2026.). */
html.dark-theme .hcw-where { color: #94a3b8; }

/* Continue widget extras */
/* .hcb-ch: chapter badge shown INSTEAD of the arrow inside the round
   phone button ("P3" = where you stopped); desktop keeps text + arrow. */
.hcb-ch { display: none; }
.hcw-where { font-size: 0.72rem; color: #64748b; margin-top: 0.1rem; }
.hcw-bar { height: 5px; border-radius: 99px; background: rgba(37, 99, 235, 0.15); overflow: hidden; margin: 0.55rem 0 0.15rem; }
.hcw-bar i { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.hcw-meta { display: flex; justify-content: space-between; font-size: 0.66rem; color: #94a3b8; }
.hcw-meta b { font-family: ui-monospace, Consolas, monospace; color: #475569; }
.dash-widget-continue {
    background: linear-gradient(135deg, #eff6ff 0%, #e0eaff 100%);
    border: 1px solid #bfdbfe;
}
html.dark-theme .dash-widget-continue { background: linear-gradient(135deg, #182747, #1a2c58); border-color: #294a86; border-left-color: #3b82f6; }
html.dark-theme .hcw-meta b { color: #cbd5e1; }

/* Progress widget: per-course rows, 2 visible + fold */
.hpr {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px 36px;
    gap: 0.5rem; align-items: center;
    padding: 0.32rem 0; font-size: 0.78rem; cursor: pointer;
}
.hpr + .hpr, .hpr-rest .hpr:first-child { border-top: 1px dashed #e2e8f0; }
.hpr-i { width: 22px; height: 22px; border-radius: 6px; background: #eff6ff; display: grid; place-items: center; }
.hpr-n { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpr:hover .hpr-n { color: #2563eb; }
.hpr-b { height: 4px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.hpr-b i { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.hpr-p {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.7rem; font-weight: 700; color: #475569; text-align: right;
}
.hpr-more {
    display: block; width: 100%;
    border: 0; border-top: 1px dashed #e2e8f0; background: none;
    margin-top: 0.15rem; padding: 0.45rem 0 0.1rem;
    font-size: 0.72rem; font-weight: 700; color: #2563eb; cursor: pointer;
}
.hpr-week {
    font-size: 0.7rem; color: #64748b;
    margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid #e2e8f0;
}

/* Ukupan napredak = overall ring + per-course mini rows side by side.
   The ring is the aggregate across subjects; the rows are the map. */
#home-progress-widget .hpw-body { display: flex; align-items: center; gap: 0.85rem; }
#home-progress-widget .hpw-ring { width: 56px; height: 56px; flex-shrink: 0; }
#home-progress-widget .hpw-ring::before { inset: 5px; }
#home-progress-widget .hpw-ring > span { font-size: 0.82rem; }
#home-progress-widget .hpw-rows { flex: 1; min-width: 0; }
#home-progress-widget .hpw-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.2rem;
}

/* All-progress modal: this-week vs last-week race bars */
.apm-wk-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.apm-wk-lbl { font-size: 0.7rem; color: #64748b; width: 5.2rem; flex-shrink: 0; }
.apm-wk-bar {
    flex: 1; height: 10px; border-radius: 6px; background: #e2e8f0; overflow: hidden;
}
.apm-wk-bar i { display: block; height: 100%; border-radius: 6px; background: #94a3b8; }
.apm-wk-bar i.apm-win { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.apm-wk-bar i.apm-now { background: #3b82f6; }
.apm-wk-num {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.72rem; color: #1e293b; width: 4rem; text-align: right; flex-shrink: 0;
}
html.dark-theme .apm-wk-bar { background: #3b3a37; }
html.dark-theme .apm-wk-num { color: #e2e8f0; }
html.dark-theme .hpr-i { background: #172554; }
html.dark-theme .hpr-n { color: #cbd5e1; }
html.dark-theme .hpr-b { background: #3b3a37; }
html.dark-theme .hpr-p { color: #94a3b8; }
html.dark-theme .hpr + .hpr, html.dark-theme .hpr-rest .hpr:first-child { border-top-color: #3b3a37; }
html.dark-theme .hpr-more { border-top-color: #3b3a37; }
html.dark-theme .hpr-week { color: #94a3b8; border-top-color: #3b3a37; }

/* Subject continue: chapter-dots strip (✓ passed / current / upcoming) */
.chapdots { display: flex; gap: 4px; margin: 0.6rem 0 0.2rem; }
.chapdots i { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; }
.chapdots i.done { background: #16a34a; }
.chapdots i.cur { background: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); }
html.dark-theme .chapdots i { background: #3b3a37; }

/* Subject knowledge map: one P-tile per CHAPTER, coloured by YOUR accuracy */
.kmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 0.35rem; }
.kmap-cell {
    aspect-ratio: 1 / 1; border-radius: 0.55rem; border: 0; cursor: pointer;
    display: grid; place-items: center;
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.68rem; font-weight: 700; color: #fff;
    transition: transform .12s ease, filter .12s ease;
}
.kmap-cell:hover { transform: translateY(-2px); filter: brightness(1.06); }
.kmap-cell.k-off { color: #94a3b8; }
.kmap-panel {
    margin-top: 0.55rem; border: 1px dashed #e2e8f0; border-radius: 0.7rem;
    padding: 0.55rem 0.7rem; display: grid; gap: 0.45rem;
}
.kmap-panel-title { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.76rem; color: #0f172a; }
.kmap-panel-acc {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.7rem; font-weight: 700; color: #475569; white-space: nowrap;
}
/* Inženjerkov savjet — the heart of the chapter modal: what's slipping
   and what to do about it, in the mascot's voice. Warm "savjet" card. */
.kmap-advice {
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: 0.8rem;
    padding: 0.6rem 0.75rem; font-size: 0.8rem; color: #78350f; line-height: 1.5;
}
.kmap-advice-head {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: #92400e; margin-bottom: 0.3rem;
}
html.dark-theme .kmap-advice { background: #33290f; border-color: #8a6414; color: #fde68a; }
html.dark-theme .kmap-advice-head { color: #fcd34d; }

/* Targeted task slot — the peek card answered right inside the modal. */
.kmap-task {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.8rem;
    padding: 0.75rem;
}
html.dark-theme .kmap-task { background: #16213a; border-color: #2b3a5e; }

/* "Zadatak za tebe" overlay footer: stacked actions + praise line. */
#kmt-after { display: flex; flex-direction: column; gap: 0.5rem; }
.kmt-praise {
    text-align: center; font-weight: 800; color: #15803d;
    font-size: 0.95rem; padding: 0.2rem 0;
}
html.dark-theme .kmt-praise { color: #86efac; }

/* Secondary action (full chapter quiz) under the primary task button. */
.kmap-go-alt {
    background: transparent !important; color: #2563eb !important;
    border: 1px solid #bfdbfe !important; box-shadow: none !important;
}
html.dark-theme .kmap-go-alt { color: #93c5fd !important; border-color: #1e3a8a !important; }
html.dark-theme .kmap-panel { border-color: #3b3a37; }
html.dark-theme .kmap-panel-title { color: #e2e8f0; }
html.dark-theme .kmap-panel-acc { color: #94a3b8; }
.kmap-seg { flex: 1 1 24px; min-width: 18px; max-width: 44px; height: 16px; border-radius: 5px; }
.k-hi  { background: #16a34a; }
.k-mid { background: #84cc16; }
.k-low { background: #f59e0b; }
.k-bad { background: #ef4444; }
.k-off { background: #e2e8f0; }
html.dark-theme .k-off { background: #3b3a37; }
.kmap-foot { margin-top: 0.55rem; }
.kmap-empty { font-size: 0.72rem; color: #64748b; font-style: italic; }
.kmap-legend { display: flex; gap: 0.7rem; align-items: center; font-size: 0.66rem; color: #94a3b8; flex-wrap: wrap; }
.kmap-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.kmap-weak {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: 999px;
    padding: 0.3rem 0.75rem; font-size: 0.7rem; font-weight: 700; color: #b45309;
    cursor: pointer; transition: filter .15s ease;
}
.kmap-weak:hover { filter: brightness(1.05); }
html.dark-theme .kmap-weak { background: #33290f; border-color: #8a6414; color: #fbbf24; }
html.dark-theme .kmap-empty { color: #94a3b8; }

/* Compact screens: course cards become a horizontal tile rail. */
@media (max-width: 1160px) {
    .home-courses-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0.45rem !important;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    .home-courses-grid::-webkit-scrollbar { display: none; }
    .home-course-card {
        flex: 0 0 108px;
        flex-direction: column; align-items: center;
        gap: 0.25rem; padding: 0.5rem 0.5rem 0.45rem;
        text-align: center; border-radius: 0.8rem;
    }
    /* „Dodaj jos" je pomocna plocica, ne predmet: manja, tisa i gurnuta
       desno, da ne stoji rame uz rame s predmetima (Drago, 13.09.). */
    .home-course-card.hcc-add {
        flex: 0 0 58px; margin-left: auto; align-self: center;
        justify-content: center; padding: 0.4rem 0.3rem;
        font-size: 0.68rem; line-height: 1.15; color: #a3aab8;
        border-width: 1.5px; min-height: 0;
    }
    .hcc-icon { width: 1.6rem; height: 1.6rem; }
    .hcc-main { width: 100%; gap: 0.25rem; }
    .hcc-title {
        font-size: 0.72rem; white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
        -webkit-box-orient: vertical; line-height: 1.2; min-height: 2.1em;
    }
    .hcc-pc { font-size: 0.62rem; }
}

.dash-topic-chip {
    display: inline-flex; align-items: center; padding: 0.35rem 0.75rem;
    background: #eff6ff; color: #1d4ed8; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; margin: 0.15rem;
    border: 1px solid #dbeafe; cursor: pointer; transition: background-color .15s ease;
}
.dash-topic-chip:hover { background: #dbeafe; }
.dash-topic-chip.alt-violet { background: #f5f3ff; color: #6d28d9; border-color: #ede9fe; }
.dash-topic-chip.alt-violet:hover { background: #ede9fe; }
.dash-topic-chip.alt-rose   { background: #fff1f2; color: #be123c; border-color: #ffe4e6; }
.dash-topic-chip.alt-rose:hover   { background: #ffe4e6; }
.dash-topic-chip.alt-emerald{ background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.dash-topic-chip.alt-emerald:hover { background: #d1fae5; }
.dash-topic-chip.alt-amber  { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.dash-topic-chip.alt-amber:hover  { background: #fef3c7; }

/* ── FAQ chips (Ingeniko soft-blue, centered) ── */
.dash-faq-list { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.dash-faq-chip {
    display: block; width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #1e3a8a;
    text-align: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.05);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.dash-faq-chip:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
    box-shadow: 0 6px 14px -6px rgba(30, 64, 175, 0.25);
    transform: translateY(-1px);
}

.dash-chatbar {
    background: white; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.85rem;
    display: flex; align-items: center; gap: 0.75rem; transition: border-color .15s ease, box-shadow .15s ease;
    /* Float off the bottom edge like it does on iOS (where the home-indicator
       safe-area lifts it). Android's gesture inset is ~0, so give a fixed floor
       here; iOS still gets its safe-area on top via the container (Ivo, 2026-07-21). */
    margin-bottom: 0.85rem;
}
/* Android native sat too low — lift the dashboard chat bar a bit more there only
   (iOS + web unchanged; Ivo, 2026-07-21). */
html.android-native .dash-chatbar {
    margin-bottom: 2.1rem;
}
.dash-chatbar:hover, .dash-chatbar:focus-within { border-color: #93c5fd; box-shadow: 0 8px 20px -8px rgba(30, 64, 175, 0.18); }
.dash-chatbar-avatar { width: 2.6rem; height: 2.6rem; border-radius: 999px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%); display: grid; place-items: center; }
.dash-chatbar-text { flex: 1; min-width: 0; }
.dash-chatbar input { width: 100%; font-size: 1rem; font-weight: 600; color: #0f172a; background: transparent; border: 0; outline: none; padding: 0; }
.dash-chatbar input::placeholder { color: #334155; }
.dash-chatbar-desc { font-size: 0.72rem; color: #64748b; margin-top: 0.15rem; }
.dash-chatbar-send { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #2563eb; color: white; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.dash-chatbar-send:hover { background: #1d4ed8; }
.dash-chatbar-send:active { transform: scale(0.95); }
.dash-chatbar-send.is-empty { background: #cbd5e1; cursor: default; }

/* MOBILE HOME: pin the "Ask Inženjerko" chat bar to the bottom of the screen
   so it is ALWAYS visible without scrolling (Drago's feedback), and compact
   the sections above so the home fits close to a single screen. Scoped to
   #view-home so the pinned bar disappears when another view is shown. */
@media (max-width: 880px) {
    /* App-shell handles the docking now (bar = view's bottom flex row);
       phones only compact the card and honour the home-bar safe area. No
       fixed positioning, no frosted strip, no reserved padding. The tight
       paddings keep the bar row at the old pinned-bar height, so the
       hand-tuned phone layouts still fit scroll-free. */
    /* No horizontal padding of its own — the view's gutter already frames
       it, so the bar's edges line up EXACTLY with the cards above. */
    #view-home.dash-rich > #home-chatbar {
        /* Lifted off the screen edge like the chat view's input bar (its
           pb-5 float) — was 0.2rem, which read as glued to the bottom.
           0.6rem, ne 1rem (Drago, 25.09.2026.): sigurni pojas uredaja se i
           dalje zbraja, a Pocetna je dobila 6 px bez ijedne nize kartice. */
        padding: 0.15rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    }
    #view-home #home-chatbar .dash-chatbar { margin: 0; padding: 0.55rem 0.7rem; }
    #view-home #home-chatbar .dash-chatbar-desc { display: none; }
    #view-home.dash-rich { padding-bottom: 0; }
    #view-home .dash-rich-wrap { padding-bottom: 0; gap: 0.55rem; }
    /* Trim vertical footprint to bring everything closer to one screen. */
    #view-home .dash-hero { padding: 0.8rem 0.9rem; }
    #view-home .dash-hero h1 { font-size: 1.15rem; }
    #view-home .dash-widgets { gap: 0.55rem; }
}

/* LEARN NOW! launcher on the home dashboard — a light card (so it doesn't
   compete with the bold purple Niz genija banner below it) that opens the
   Learn Now feed. Full-width in the dash-widgets grid. */
.ln-banner { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 14px;
  background: linear-gradient(120deg, #ecfeff 0%, #eff6ff 55%, #eef2ff 100%);
  border: 1px solid #cffafe; cursor: pointer; overflow: hidden;
  box-shadow: 0 5px 14px rgba(14, 165, 233, 0.10);
  transition: box-shadow .14s ease, transform .1s ease; }
.ln-banner::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px;
  border-radius: 50%; background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 70%); pointer-events: none; }
.ln-banner:hover { box-shadow: 0 9px 22px rgba(14, 165, 233, 0.20); }
.ln-banner:active { transform: scale(0.99); }
/* Holds the branded Learn Now! PNG (_navIcon('learn')). The cyan gradient
   badge that used to sit here was chrome BEHIND a white emoji glyph — our
   icon carries its own colour and shading, so a coloured plate behind it
   only fights it. Size and centring stay; the plate is gone. */
.ln-ic { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; font-size: 15px; }
.ln-ic--sm { width: 24px; height: 24px; font-size: 12px; }
.ln-main { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.ln-title { display: block; font-weight: 800; font-size: 14px; color: #0c4a6e; line-height: 1.2;
  letter-spacing: -0.01em; }
.ln-sub { display: block; font-size: 11.5px; color: #0369a1; opacity: 0.8; margin-top: 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* CTA pill — same shape/typography as the Niz genija "Igraj ➜" pill so the
   two banners read as one family; ln keeps its cyan-blue brand gradient. */
.ln-cta { flex: 0 0 auto; font-weight: 800; font-size: 12.5px; color: #fff;
  background: linear-gradient(135deg, #22d3ee, #3b82f6); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.33);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; position: relative; z-index: 1;
  min-width: 4.6rem; text-align: center; }
html.dark-theme .ln-banner { background: linear-gradient(120deg, #0e2a3a, #12243f); border-color: #164e63; }
html.dark-theme .ln-title { color: #a5f3fc; }
html.dark-theme .ln-sub { color: #7dd3fc; }

/* MOBILE SUBJECT DASHBOARD chat bar — app-shell docks it (view's bottom flex
   row); phones only compact the card and honour the safe area. */
@media (max-width: 880px) {
    /* KOMPAKTNO, BEZ SKROLA, BEZ DIRANJA KARTICA (Drago, 25.09.2026.: „zelim
       da visine kartica ostanu iste ali da nema scrolla, jako bitno da bude
       kompaktno"). Visina se zato skupljala samo iz praznog prostora: gornji
       uzmak ekrana 20 -> 12,8 px, razmak medu blokovima 10,4 -> 8, uzmak para
       nad trakom 16 -> 8 i podloga trake 16 -> 9,6. Zajedno oko 28 px, a
       nijedna kartica nije niza ni uza. */
    #view-dashboard.dash-rich { padding-bottom: 0; padding-top: 0.8rem; }
    #view-dashboard .dash-rich-wrap { gap: 0.5rem; }
    #view-dashboard.dash-rich > #dash-chatbar-wrap {
        /* Same lift off the screen edge as #home-chatbar — 0.2rem read as
           glued to the bottom on phones. */
        padding: 0.15rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    }
    #view-dashboard #dash-chatbar-wrap .dash-chatbar { margin: 0; padding: 0.55rem 0.7rem; }
    #view-dashboard #dash-chatbar-wrap .dash-chatbar-desc { display: none; }
}

/* ── Mode selector: subtle empty state (Ingeniko soft-blue) ── */
#mode-current-btn.mode-empty {
    width: 2.1rem; height: 2.1rem; padding: 0;
    justify-content: center; gap: 0; border-radius: 0.7rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px -2px rgba(30, 64, 175, 0.15);
}
#mode-current-btn.mode-empty:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
}
#mode-current-btn.mode-empty #mode-current-label { display: none; }
#mode-current-btn.mode-empty > span:last-child {
    color: #2563eb; font-size: 0.8rem; line-height: 1;
}

/* ── Personalised onboarding (PERSONAL card → mentor) — strip app chrome ── */
/* When the body has this class, the user is in the first-time chatbox.   */
/* Sidebar, header, and mentor tabs all hide so only portrait + chat +    */
/* input remain. Default mentor flow (no class) is unaffected.            */
body.personalised-onboarding #sidebar,
body.personalised-onboarding header,
body.personalised-onboarding #mentor-tabs {
    display: none !important;
}

/* ── Onboarding header (Natrag · Korak 3 od 3) — visible only in   ── */
/* personalised flow. Sits where the regular header would be, since   */
/* `header` is hidden by the .personalised-onboarding rule above.     */
#onboarding-header { display: none; }
body.personalised-onboarding #onboarding-header { display: flex; }

/* Online indicator pulse — outer ring expands & fades to feel "alive". */
@keyframes mentorOnlinePulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.2); opacity: 0;    }
    100% { transform: scale(2.2); opacity: 0;    }
}

/* Setup footer counter — quiet "Odabrani predmeti" label + Ingeniko-blue
   pill around the count. Two-span structure rendered by setup.js
   updateSetupSelectedCounter; mobile.css can re-tune sizes for narrow
   viewports without redefining the visual identity. */
#setup-selected-counter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    line-height: 1;
}
/* Label is itself a column so each word stacks ("Odabrani" / "predmeti")
   while the count pill stays to the right of the whole stack. */
#setup-selected-counter .setup-counter-label {
    display: inline-flex;
    flex-direction: column;
    color: #64748b;        /* slate-500 — quiet, doesn't compete with the button */
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    text-align: left;
}
#setup-selected-counter .setup-counter-label > span {
    display: block;
    line-height: 1.05;
}
#setup-selected-counter .setup-counter-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);   /* Ingeniko blue */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.25);
}

/* --- Wizard "O tebi": spacing that Tailwind's purge ate --------------------
   These classes are applied from setup.js (renderYouStep); the precompiled
   tailwind.css drops gap-* utilities that never appear in templates, so the
   rhythm of the step lives here instead. */
.setup-you-wrap { gap: 1.4rem; }
.setup-you-foot { gap: 1.5rem; }
/* Inženjerkova glava nad korakom „O tebi" (Drago, 04.09.) — die-cut, bez
   okvira; margin-bottom negativan da točkice napretka priljubi uz glavu. */
.setup-you-glava { display: flex; justify-content: center; margin-bottom: -0.4rem; }
.setup-you-glava .ing-head img { filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.25)); }

/* =====================================================================
   INŽENJERKO V2 — novi onboarding (proba iz Postavki; onboarding-v2.js).
   Izgled po Draginom mockupu 05.09.: plavi gradijent gore, bijelo
   tijelo, zaobljene opcijske kartice, točkice koje ne lažu.
   ===================================================================== */
/* z iznad intro splasha (9999): dev ↺ gumb pokreće v2 odmah na bootu,
   pa proba mora prekriti i splash i setup ispod sebe.
   Podloga = ISTI gradijent kao stari onboarding (#setup-screen) — Dragina
   presuda 05.09.: „pozadinske boje iz starog onbordinga zadrži"; čisto
   bijelo „ne valja". Sadržaj i dalje raspoređen, bez mrtvog pojasa. */
.v2-overlay { position: fixed; inset: 0; z-index: 100000;
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 50%, #f0f9ff 100%);
    display: flex; flex-direction: column; }
html.dark-theme .v2-overlay { background: #0f172a; }
/* Login gate u v2 ruhu (Drago, 08.09.) — ista pozadina kao onboarding;
   kartica ostaje bijela i u tamnoj temi (kao stari dizajn gatea). */
#login-gate { background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 50%, #f0f9ff 100%); }
html.dark-theme #login-gate { background: #0f172a; }
/* BEZ plave trake gore (Drago, 05.09.: „samo smeta, imamo više prostora
   za glavu Inženjerka") — ostaje samo plutajući ✕ u kutu. */
.v2-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 999px;
    border: 0; cursor: pointer; background: rgba(15, 23, 42, .07);
    color: #64748b; font-size: 14px; font-weight: 700; }
.v2-x:hover { background: rgba(15, 23, 42, .15); }
html.dark-theme .v2-x { background: rgba(255, 255, 255, .12); color: #cbd5e1; }
/* Strelica NATRAG (Drago, 08.09.) — zrcalo ✕ u lijevom kutu; crtajKorak
   je pokazuje tek kad iza postoji korak (idx > 1), ista logika kao
   hardverska tipka natrag. SAMO DESKTOP (Drago, 08.09.: „ovo ne treba
   na mobitelu") — telefon i tablet imaju tipku/gestu natrag koja radi
   isto, pa se na uskom ekranu i na dodirnim uređajima skriva. */
.v2-natrag { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px));
    left: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 999px;
    border: 0; cursor: pointer; background: rgba(15, 23, 42, .07);
    color: #64748b; font-size: 16px; font-weight: 700; }
.v2-natrag:hover { background: rgba(15, 23, 42, .15); }
html.dark-theme .v2-natrag { background: rgba(255, 255, 255, .12); color: #cbd5e1; }
/* NA TELEFONU SE OSLANJAMO NA SUSTAVNI „NATRAG" — ALI IPHONE GA NEMA
   (Ivo, 16.09.2026.: „na androidu za vrime onboardinga ima ona doli strelica
   za nazad a to nema na iphone; na iphone bi triba gori livo bit kruzic malo
   za nazad kako je standard na iphone").

   Android nosi svoju traku s tri gumba ili gestu, pa bi naša strelica bila
   drugi gumb za istu stvar. iOS nema ni jedno ni drugo unutar aplikacije —
   ondje je standard upravo ovo: mali kružić gore lijevo. Zato se skriva svugdje
   OSIM na iOS-u (`html.ios-native` postavlja native-bridge.js). */
@media (max-width: 768px), (pointer: coarse) {
    .v2-natrag { display: none !important; }
    html.ios-native .v2-natrag { display: inline-flex !important; }
}
/* Na iOS-u je to jedini put natrag, pa mora biti dodirljiv po Appleovoj mjeri
   (44x44) i vidljiv na svijetloj pozadini uvodnih ekrana. */
html.ios-native .v2-natrag {
    width: 40px; height: 40px; font-size: 19px;
    align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .10);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
/* PRAVNI I LOGIN ZID IZNAD v2 (QA 07.09.): legal-gate (16+/uvjeti) zna
   stići asinkrono NAKON što v2 overlay već krene — mora ga prekriti,
   inače korisnik prođe onboarding bez pristanka. Tailwind z-[200/210]
   iz auth.js je ispod v2-overlayevih 100000. */
#login-gate { z-index: 100001 !important; }
#legal-gate { z-index: 100002 !important; }
/* OPIS PREDMETA IZNAD v2 SLOJA (Drago QA 16.09.2026.): dugi pritisak na
   pločicu otvara #course-details-overlay (Tailwind z-300 iz setup.js), pa je
   prozor nastajao 99.700 slojeva ISPOD onboardinga: nevidljiv, nezatvoriv, a
   na prvom Homeu je pokrivao cijeli ekran i gutao halo prvog koraka. Ispod je
   pravni zid, koji i dalje ima prednost. */
body.v2-aktivan #course-details-overlay { z-index: 100001; }
/* Mala HR/EN pilula uz ✕ (Drago, 07.09.) — isti kut, uklopljena u v2. */
.v2-jezici { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px));
    right: 54px; z-index: 5; display: flex; gap: 2px; padding: 2px;
    border-radius: 999px; background: rgba(15, 23, 42, .07); }
.v2-jezikbtn { border: 0; cursor: pointer; background: transparent;
    color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: .02em;
    padding: 3px 8px; border-radius: 999px; }
.v2-jezikbtn--on { background: #fff; color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
html.dark-theme .v2-jezici { background: rgba(255, 255, 255, .12); }
html.dark-theme .v2-jezikbtn { color: #94a3b8; }
html.dark-theme .v2-jezikbtn--on { background: #1e3a5f; color: #dbeafe; }
.v2-tijelo { flex: 1; overflow-y: auto; display: flex; flex-direction: column;
    /* `safe center`: obično centriranje uz preljev ODSIJEČE vrh sadržaja
       (flex zamka); safe pada na start kad ne stane. Fit-osigurač uz to
       drži da preljeva ni nema (v. crtajKorak). */
    align-items: center; justify-content: center; justify-content: safe center;
    gap: 12px;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    width: 100%; max-width: 480px; margin: 0 auto; }
/* Uvodni pozdrav: oblačić + puna maskota (ekran 0). */
.v2-oblacic { position: relative; background: #fff; border-radius: 20px;
    padding: 16px 18px; margin-top: 8vh; max-width: 340px; text-align: center;
    box-shadow: 0 12px 30px -12px rgba(2, 6, 23, .18); }
.v2-oblacic-naslov { font-size: 19px; font-weight: 800; color: #1e293b; }
.v2-oblacic-tekst { font-size: 13px; color: #64748b; line-height: 1.5; margin-top: 6px; }
.v2-oblacic-rep { position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px;
    background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
/* I ovdje se maskota smije uhvatiti i baciti (Ivo, 11.09.2026.) — isto kao na
   uvodnom ekranu: bez `touch-action: none` bi povlacenje po njoj bilo skrol. */
.v2-maskota { width: 170px; height: 200px; position: relative; overflow: hidden;
    margin-top: 10px; display: flex; align-items: center; justify-content: center;
    touch-action: none; cursor: grab;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.v2-maskota:active { cursor: grabbing; }
.v2-glava { display: flex; justify-content: center; }
.v2-glava .ing-head img { filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .25)); }
/* Glava se na ekranima uhodavanja smije gurnuti i zakotrljati (Ivo,
   11.09.2026.) — bez `touch-action: none` bi potez po njoj bio skrol. */
.v2-glava .ing-head { touch-action: none; cursor: grab; -webkit-user-select: none;
    user-select: none; -webkit-touch-callout: none; }
.v2-glava .ing-head:active { cursor: grabbing; }
.v2-dots { display: flex; gap: 6px; align-items: center; }
.v2-dot { width: 6px; height: 6px; border-radius: 999px; background: #cbd5e1; transition: all .15s; }
.v2-dot--on { width: 20px; background: #2563eb; }
/* Prijeđeni koraci: plavkasto + ruka — klik vraća NA taj korak (samo nazad). */
.v2-dot--proslo { background: #93c5fd; cursor: pointer; width: 9px; height: 9px; }
.v2-dot--proslo:hover { background: #60a5fa; }
.v2-naslov { font-size: 20px; font-weight: 800; color: #1e293b; text-align: center; margin-top: 2px; }
.v2-pod { font-size: 12.5px; color: #64748b; text-align: center; margin-top: -6px; line-height: 1.45; }
.v2-lista { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.v2-opcija { display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 16px; border-radius: 16px; text-align: left; cursor: pointer;
    background: #fff; border: 2px solid #e2e8f0; font-weight: 700; color: #334155;
    font-size: 14.5px; transition: all .12s; box-shadow: 0 1px 3px rgba(2, 6, 23, .05); }
/* Prelazak misem samo na uredajima s misem: na dodir (i u emulaciji mobitela) opcija ispod prsta nakon prethodnog ekrana izgledala je ODABRANO, Drago QA 15.09.2026. */
@media (hover: hover) and (pointer: fine) { .v2-opcija:hover { border-color: #93c5fd; background: #eff6ff; } }
.v2-opcija:active { transform: scale(.97); }
.v2-opcija--on { border-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
/* RASKRIZJE „Prilagodi sad / Udi u app" (Ivo, 16.09.2026.).
   Dvije tipke NISU ravnopravne po tezini: glavna je preporuka, druga je
   izlaz. Da su obje iste, izbor bi izgledao kao „odaberi jedno od dva
   jednako dobra", a nije — druga samo odgadja. */
.v2-opcija--glavna { justify-content: center; background: #2563eb;
    border-color: #2563eb; color: #fff; font-size: 15.5px; padding: 16px; }
.v2-opcija--glavna:hover { background: #1d4ed8; border-color: #1d4ed8; }
.v2-opcija--tiha { justify-content: center; background: transparent;
    border-color: #cbd5e1; color: #475569; }
.v2-opcija--tiha:hover { background: #f1f5f9; border-color: #94a3b8; }
/* Recenica ispod tipki: objasnjenje, ne uputa — zato sitna i siva. */
.v2-sitno { margin-top: 2px; text-align: center; font-size: 12px;
    line-height: 1.45; color: #94a3b8; }
html.dark-theme .v2-opcija--tiha { background: transparent; border-color: #475569; color: #cbd5e1; }
html.dark-theme .v2-sitno { color: #64748b; }

/* „Preskoci kviz" — doli desno, tiho (Ivo, 16.09.2026.). Mora biti IZNAD
   kartice kviza i uz sigurni rub, da ga traka s gumbima ne pojede. */
.v2-preskoci-kviz { position: absolute; z-index: 6;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(15, 23, 42, .06); color: #64748b;
    font-size: 12.5px; font-weight: 600; }
.v2-preskoci-kviz:hover { background: rgba(15, 23, 42, .12); color: #475569; }
html.dark-theme .v2-preskoci-kviz { background: rgba(255, 255, 255, .10); color: #cbd5e1; }
/* 34px, ne 26: skin varijante (python line-art) na 26px postanu
   neprepoznatljive mrljice — Drago nije mogao prepoznati ni audioknjigu
   koju je sam zaokružio u Brzom pristupu (05.09.). */
.v2-opcija-ik { font-size: 22px; flex: none; width: 36px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center; }
.v2-opcija-img { width: 34px; height: 34px; object-fit: contain; pointer-events: none; }
/* Dashboard/mode set ima velik prazan rub u PNG-u pa na 34px ispadne
   manji od namjenskih you/ ikona — Drago: „svaki ekran mora imat jednaku
   veličinu ikona". Scale ne dira layout-kutiju. */
.v2-opcija-img[src*="/dashboard/"], .v2-opcija-img[src*="/mode/"] { transform: scale(1.3); }
/* Tekst opcije gura kvačicu na desni rub (ekran predmeta). */
.v2-opcija-tx { flex: 1; min-width: 0; }
/* ZAŠTO ISPOD NAZIVA, U DVA RETKA (Drago QA 16.09.2026.): plan problema je uz
   dugo modelovo obrazloženje narastao toliko da su glava, točkice i naslov
   izašli iznad ekrana, a analiza ostala odrezana. Naziv predmeta ostaje
   čitljiv, obrazloženje se skrati. */
.v2-opcija-zasto { display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    margin-top: 2px; font-size: 12px; font-weight: 500; color: #64748b;
    line-height: 1.35; }
html.dark-theme .v2-opcija-zasto { color: #94a3b8; }
/* Buba za prijavu greške ne stoji preko onboardinga ni splasha (Drago,
   09.09.: prvi ulaz bez ikakvog šuma; na mobitelu je prekrivala zadnju
   karticu smjera). */
body:has(.v2-overlay) #bug-report-btn, body:has(#mascot-splash) #bug-report-btn, body.v2-aktivan #bug-report-btn { display: none !important; }
/* Tiha kartica prvog uspjeha (QA 09.09.): buba dolje lijevo sjedala je preko njezina ruba. */
body:has(.pu-kartica.pu-in) #bug-report-btn { display: none !important; }
/* Kartica pitanja na mobitelu (QA 09.09.): buba je sjedala preko „Savjeta" i
   glave uz „Objasni više". Vraća se na ekranu rezultata. */
@media (max-width: 768px) { body:has(#quiz-options-list) #bug-report-btn { display: none !important; } }
/* I na ekranu rezultata (Drago, 09.09., snimka 375x667): buba je sjedala preko
   „Pokreni novi kviz" jer su gumbi prilijepljeni uz dno. */
@media (max-width: 768px) { body:has(#view-quiz:not(.hidden) .qr) #bug-report-btn, body:has(#view-exam:not(.hidden) .qr) #bug-report-btn { display: none !important; } }
/* Šifra predmeta i varijanta u tihom drugom redu (naslov ostaje čitljiv). */
.v2-sifra { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: #94a3b8; letter-spacing: .01em; }
/* Zbijeni JEDNOSTUPČANI popis (smjerovi/područja/teme): stari wizard
   slaže svih 8 kartica u jedan stupac bez scrolla, pa može i v2 — „samo
   smanjiš kartice" (Drago, 05.09.). Mrvicu veće od prve verzije i BEZ
   šarenih rubova (Dragina presuda: „ne trebaju imat ove boje okolo"). */
.v2-lista--zbito { gap: 9px; }
.v2-lista--zbito .v2-opcija { padding: 11px 14px; font-size: 13.5px;
    border-radius: 14px; gap: 10px; line-height: 1.3; }
.v2-lista--zbito .v2-opcija-ik { width: 32px; }
.v2-lista--zbito .v2-opcija-img { width: 31px; height: 31px; }
/* Naziv centriran kao na starom ekranu smjera. */
.v2-lista--zbito .v2-opcija-tx { text-align: center; }
/* „Iznenadi me": Inženjerkova udica — kartica s „Jesi li znao…". */
.v2-udica { background: #fff; border-radius: 18px; padding: 18px 20px;
    font-size: 15.5px; font-weight: 700; color: #1e293b; line-height: 1.5;
    text-align: center; box-shadow: 0 12px 30px -12px rgba(2, 6, 23, .18);
    margin-top: 4px; }
html.dark-theme .v2-udica { background: #1e293b; color: #e2e8f0; }
/* Ekran predmeta: semestar fiksno gore, SAMO popis skrola, noga
   (Odabrano + Nastavi jedno do drugoga) uvijek vidljiva — jedini v2
   ekran s unutarnjim scrollom (Drago, 05.09.). */
.v2-lista--predmeti { flex: 1; min-height: 0; }
/* SIROKI ZASLON: POPIS RASTE SAMO DO SVOJE VISINE (Drago QA 16.09.2026.).
   S `flex: 1` je popis bio jedini rastezljivi element u tijelu i pojeo je svu
   slobodnu visinu, pa je noga (Odabrano + Nastavi) padala na dno bez obzira na
   broj plocica: na 768x1024 je izmedu zadnjeg retka i noge stajalo 491 px
   prazne pozadine, na 1280x800 267 px. `flex: 0 1 auto` uz `min-height: 0` i
   dalje pusta skrol kad plocica ima vise nego sto stane, a kad stanu,
   `justify-content: safe center` na `.v2-tijelo` opet centrira cijeli stupac s
   nogom odmah ispod plocica. Na telefonu popis redovito prelije ekran, pa se
   ondje nista ne mijenja. */
@media (min-width: 700px) {
    .v2-lista--predmeti { flex: 0 1 auto; }
}
.v2-svitak { flex: 1; min-height: 0; overflow-y: auto; display: flex;
    flex-direction: column; gap: 10px; padding: 2px 2px 6px; }
/* Noga = zaobljena bijela kartica u stilu semestar-izbornika (Drago,
   05.09.: „Nastavi je prenapadno… da piše u ovom zaobljenom
   pravokutniku kao semestar"), s malim gumbom desno. */
.v2-noga { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%; background: #fff; border: 2px solid #e2e8f0;
    border-radius: 14px; padding: 7px 7px 7px 14px;
    box-shadow: 0 1px 3px rgba(2, 6, 23, .05); }
.v2-noga .v2-dalje { flex: none; width: auto;
    /* skroz DESNO u nozi, kao prije (Drago, 08.09.), samo novi stil */
    margin: 0 0 0 auto;
    padding: 9px 20px; font-size: 14px; border-radius: 10px;
    box-shadow: 0 4px 12px -4px rgba(59, 130, 246, .5); }
.v2-brojac { flex: none; white-space: nowrap; font-size: 12.5px;
    font-weight: 700; color: #64748b; }
html.dark-theme .v2-noga { background: #1e293b; border-color: #334155; }
html.dark-theme .v2-brojac { color: #94a3b8; }
/* „Odabrano: N" otvara popis odabranog, a izgleda kao i prije (Drago QA
   17.09.2026.: „vrati onaj stil, samo da se moze kliknit"). */
.v2-brojac--gumb { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Mala traka „Istraži inženjerstvo" (razumjeti/ocjene) — niža od
   kartica predmeta, otvara pop-up s područjima. */
.v2-traka { display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 5px 12px; border-radius: 12px; text-align: left; cursor: pointer;
    background: #eff6ff; border: 2px dashed #bfdbfe; font-weight: 700;
    color: #1d4ed8; font-size: 13px; transition: all .12s; }
@media (hover: hover) and (pointer: fine) { .v2-traka:hover { background: #dbeafe; } }
.v2-traka .v2-opcija-tx { text-align: center; }
.v2-traka-broj { flex: none; font-size: 12px; font-weight: 800; color: #2563eb; }
html.dark-theme .v2-traka { background: #1e3a5f; border-color: #334155; color: #93c5fd; }
/* Pop-up s područjima — unutar v2 overlaya, iznad svega. */
.v2-popup { position: absolute; inset: 0; z-index: 20;
    background: rgba(15, 23, 42, .45); display: flex; align-items: center;
    justify-content: center; padding: 20px; }
.v2-popup-kartica { background: #fff; border-radius: 20px; padding: 12px;
    width: 100%; max-width: 340px; max-height: 94%; overflow-y: auto;
    box-shadow: 0 24px 60px -20px rgba(2, 6, 23, .45); }
.v2-popup-naslov { font-weight: 800; font-size: 16px; color: #1e293b;
    text-align: center; }
/* Zbijenije od običnog zbito da 6 područja + Gotovo stane BEZ scrolla
   (Drago, 05.09.: „ovdje ne smije biti scroll, Gotovo može manje"). */
.v2-popup .v2-lista--zbito { gap: 7px; }
.v2-popup .v2-opcija { padding: 7px 10px; font-size: 12.5px; border-radius: 12px; }
.v2-popup .v2-opcija-ik { width: 27px; }
.v2-popup .v2-opcija-img { width: 25px; height: 25px; }
.v2-popup-gotovo { display: block; width: fit-content; margin: 10px auto 0;
    padding: 8px 36px; font-size: 13.5px; border-radius: 12px; }
html.dark-theme .v2-popup-kartica { background: #1e293b; }
html.dark-theme .v2-popup-naslov { color: #e2e8f0; }
/* Mala najava (matura: pojačana priprema) — informacija, ne odluka. */
.v2-napomena { font-size: 12px; color: #64748b; text-align: center;
    line-height: 1.45; margin-top: 2px; padding: 0 8px; }
/* VEZA NA PRIJAVU NA PRVOM KORAKU (Drago QA 16.09.2026.): tiha, ispod
   odgovora, i vidljiva na dodirnom ekranu — ondje strelice natrag nema, pa je
   ovo jedini put natrag do racuna. Visina 44 px: povrsina za prst. */
.v2-prijava {
    margin-top: 14px; padding: 10px 18px; min-height: 44px;
    background: transparent; border: 0; border-radius: 12px;
    color: #1d4ed8; font-weight: 700; font-size: 13px;
    text-decoration: underline; cursor: pointer;
}
.v2-prijava:hover { background: rgba(29, 78, 216, .06); }
.v2-prijava:active { transform: scale(.97); }
html.dark-theme .v2-prijava { color: #93c5fd; }
/* PREPORUKA TRIJU OSI na kraju v2 (07.09.2026.): jedna kartica, tri retka —
   profesor (+ alternativa), zašto, brojke. Posuđuje .v2-napomena za okvir. */
.v2-osi { text-align: left; line-height: 1.45; }
.v2-osi-alt { color: #64748b; font-weight: 500; }
.v2-osi-zasto { color: #475569; font-size: .8rem; margin-top: .2rem; }
.v2-osi-red { color: #334155; font-size: .8rem; margin-top: .35rem; }
html.dark-theme .v2-osi-zasto, html.dark-theme .v2-osi-red { color: #cbd5e1; }
/* MATERIJALI U V2 (07.09.2026.): dva gumba (kamera / prilozi), popis odabranog
   s uklanjanjem, sve u v2 ruhu. Ulaz <input type=file> je skriven — gumb je label. */
.v2-mat-red { display: flex; gap: .5rem; margin: .25rem 0 .5rem; }
.v2-mat-gumb {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .6rem .5rem; border: 1px dashed #93c5fd; border-radius: .75rem;
    background: #eff6ff; color: #1d4ed8; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.v2-mat-gumb:active { background: #dbeafe; }
.v2-mat-popis { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.v2-mat-stavka {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem;
    border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; font-size: .85rem;
}
.v2-mat-ime { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.v2-mat-mb { color: #94a3b8; font-size: .75rem; }
.v2-mat-x { border: 0; background: none; color: #94a3b8; font-size: 1rem; cursor: pointer; padding: 0 .2rem; }
.v2-mat-x:hover { color: #dc2626; }
html.dark-theme .v2-mat-gumb { background: #1e3a5f; border-color: #3b82f6; color: #bfdbfe; }
html.dark-theme .v2-mat-stavka { background: #1e293b; border-color: #334155; }
html.dark-theme .v2-mat-ime { color: #e2e8f0; }
html.dark-theme .v2-napomena { color: #94a3b8; }
/* Naslov sekcije na srednjoškolskom ekranu sadržaja („Uči za školu" /
   „Istraži inženjerstvo"). */
.v2-sekcija { width: 100%; text-align: left; font-size: 11.5px;
    font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #475569; margin: 6px 2px -2px; }
html.dark-theme .v2-sekcija { color: #94a3b8; }
/* Jezična oznaka kolegija bez varijante na jeziku sučelja (kao stari
   ekran): EN plavo, HR crveno. */
.v2-jezik { display: inline-block; margin-left: 6px; padding: 1px 5px;
    border-radius: 5px; font-size: 9px; font-weight: 800;
    vertical-align: middle; background: #dbeafe; color: #1d4ed8; }
.v2-jezik--hr { background: #fee2e2; color: #dc2626; }
/* PLOČICE predmeta (Ivo, 09.09.2026.): kompaktna mreža, samo ikona i naziv,
   a odabir se vidi kao PRSTEN oko ikone — ne kao točka sa strane. */
.v2-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px; align-content: start; }
/* IKONA LIJEVO, TEKST DESNO (Ivo, 10.09.2026.). Prije je bilo jedno ispod
   drugoga i sredinom poravnato; ovako se dugi naziv cita kao redak, a ne kao
   toranj od tri rijeci. */
/* Dugi pritisak otvara NAS opis, ne Androidov „Copy / Translate / Select all"
   (Ivo, 10.09.2026., slika). Plocica je gumb, ali joj tekst dosad nije bio
   zasticen od oznacavanja. */
.v2-plocica, .setup-plocica { -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; }
.v2-plocica { display: flex; flex-direction: row; align-items: center; gap: 9px;
    padding: 10px; border: 2px solid #e2e8f0; border-radius: 14px;
    background: #fff; cursor: pointer; text-align: left; font: inherit;
    color: #0f172a; transition: border-color .12s, box-shadow .12s, transform .12s; }
.v2-plocica:active { transform: scale(.97); }
.v2-plocica--on { border-color: #2563eb; box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .55); }
/* BEZ PRSTENA OKO IKONE (Ivo, 10.09.2026.: „samo okvir neka se oznaci a ne
   unutra"). Ikona ostaje ista i kad je plocica odabrana; jedina oznaka je
   okvir plocice. */
.v2-plocica-ik { width: 40px; height: 40px; flex: none; display: inline-flex;
    align-items: center; justify-content: center; font-size: 24px; }
.v2-plocica-ik .v2-plocica-img, .v2-plocica-ik img { width: 34px; height: 34px; object-fit: contain; }
.v2-plocica-tx { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; }
html.dark-theme .v2-plocica { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.dark-theme .v2-plocica--on { border-color: #3b82f6; }
@media (max-width: 380px) {
    .v2-mreza { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
    .v2-plocica-ik { width: 34px; height: 34px; }
    .v2-plocica-tx { font-size: 12px; }
}

/* GODINE STRELICAMA, ne padajucim izbornikom (Ivo, 10.09.2026.: „samo da se
   moze kliknit desno na druga godina i strelica da ima a livo ce u pocetku
   bit mozda srednja skola isto strelica"). Strelica koja nema kamo ostaje na
   mjestu ali blijedi — da se traka ne skakuce dok se listaju godine. */
.v2-godred { display: flex; align-items: center; gap: 8px; width: 100%;
    box-sizing: border-box; padding: 6px 6px; border-radius: 14px;
    border: 2px solid #e2e8f0; background: #fff; }
.v2-godstr { flex: none; width: 38px; height: 38px; border: 0; border-radius: 12px;
    background: transparent; color: #1d4ed8; font-size: 20px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, opacity .12s; }
@media (hover: hover) and (pointer: fine) { .v2-godstr:hover { background: #eff6ff; } }
.v2-godstr:disabled { opacity: .25; cursor: default; background: transparent; }
.v2-godime { flex: 1; text-align: center; font-weight: 800; color: #334155;
    font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
html.dark-theme .v2-godred { background: #1e293b; border-color: #334155; }
html.dark-theme .v2-godime { color: #e2e8f0; }
html.dark-theme .v2-godstr { color: #93c5fd; }
@media (hover: hover) and (pointer: fine) { html.dark-theme .v2-godstr:hover { background: #172554; } }
/* Ekran predmeta u v2 stilu: izbornik godine + retci s kvačicama. */
.v2-god { width: 100%; box-sizing: border-box; padding: 11px 12px;
    border-radius: 14px; border: 2px solid #e2e8f0; background: #fff;
    font-weight: 700; color: #334155; font-size: 13.5px; cursor: pointer; }
.v2-god:focus { outline: none; border-color: #93c5fd; }
.v2-kvacica { flex: none; width: 22px; height: 22px; border-radius: 999px;
    border: 2px solid #cbd5e1; display: inline-flex; align-items: center;
    justify-content: center; font-size: 12px; color: #fff; transition: all .12s; }
.v2-opcija--on .v2-kvacica { background: #2563eb; border-color: #2563eb; }
html.dark-theme .v2-god { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark-theme .v2-kvacica { border-color: #475569; }
.v2-dalje {
    /* KOMPAKTNA pilula kao na splashu (Drago, 08.09.: „predugo je ovo")
       — ne preko cijele širine; login forma je iznimka (v. #login-gate). */
    width: min(280px, 100%); display: block;
    margin: 8px auto 0; padding: 13px 38px; border: 0; border-radius: 16px;
    cursor: pointer; font-weight: 800; font-size: 15px; color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, .55); }
#login-gate .v2-dalje { width: 100%; padding: 13px; }
.v2-dalje:active { transform: scale(.97); }
/* ONEMOGUCEN GUMB SE VIDI (Drago QA 16.09.2026.): dok je upis imena ili
   priprema pitanja u tijeku, gumb je izgledao isto kao aktivan, pa se tapkalo
   po ekranu koji ne reagira (POST /api/profile je pod opterecenjem znao
   trajati i 30 s). Blijedi, kursor kaze da se ceka, dodir ne skace. */
.v2-dalje:disabled { opacity: .62; cursor: progress; }
.v2-dalje:disabled:active { transform: none; }
/* Upozorenje uz gumb kad pilula (showPillToast) nije dostupna — umjesto
   sistemskog alert() koji blokira ekran i ne zna za jezik sucelja (pravilo 9,
   Drago QA 16.09.2026.). Isti ton kao greska ispod polja imena. */
.v2-javi { font-size: 12px; color: #ef4444; text-align: center;
    margin-top: 6px; min-height: 16px; line-height: 1.35; }
/* SVG strelica CTA-a (Drago, 08.09.: tekstualna „→" jeftina i preblizu
   tekstu): tekst ostaje centriran, strelica se lijepi uz desni rub. */
.v2-dalje, .mascot-skip-btn { position: relative; }
.v2-dalje .cta-strelica, .mascot-skip-btn .cta-strelica {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
/* Na tekstualnim poveznicama i kompaktnim pilulama strelica ide u toku. */
.cta-strelica { vertical-align: -3px; margin-left: 4px; display: inline; }
.v2-noga .v2-dalje .cta-strelica { position: static; transform: none; margin-left: 6px; }
/* „DALJE" NE PADA ISPOD RUBA U ONBOARDING KVIZU (Drago QA 16.09.2026.).
   Na 320x568 je kartica pitanja visoka 619-1048 px, a fit-osigurac (app.js)
   ne ide ispod zuma 0.85, pa `.v2-tijelo` ipak skrola. Po dolasku na pitanje
   je glavna radnja bila 54 px ispod zaslona i nista je nije najavljivalo:
   jedan automatski prolaz je 129 puta odgovorio na isto pitanje jer gumb
   nikad nije usao u kadar. Red s „Objasni vise" i „Dalje" zato stoji u
   ljepljivoj nozi, isto kao `.v2-noga` na ostalim v2 koracima. SAMO u
   onboardingu: pravi kviz u aplikaciji skrola cijelom stranicom i ondje se
   nista ne mijenja. */
.v2-overlay .quiz-fb-noga { position: sticky; bottom: 0; z-index: 2;
    padding: 8px 0 2px; background: #fff; }
html.dark-theme .v2-overlay .quiz-fb-noga { background: #2a2927; }
/* Kviz „Dalje": strelica uz rub pilule kao i ostale (Drago, 08.09.). */
#quiz-next-btn { position: relative; padding-right: 34px !important; }
#quiz-next-btn .cta-strelica { position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); margin-left: 0; }
/* python-look: iste plosnate pilule i u onboardingu (Drago: „python
   stil je okej, samo neka je sve konzistentno"). */
body.python-look .v2-dalje { background-image: none; background-color: #2563eb; box-shadow: none; }
html.dark-theme .v2-naslov { color: #e2e8f0; }
html.dark-theme .v2-opcija { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark-theme .v2-opcija--on { border-color: #3b82f6; background: #1e3a5f; color: #dbeafe; }
/* PODNASLOV UHODAVANJA (Drago QA 16.09.2026.): #64748b na tamnoj plohi
   overlaya (#0f172a) daje 3,75:1 na svih sest ekrana, a tekst je 12,5 px.
   Susjedni `.v2-opcija-zasto` tamnu inacicu vec ima, ovo je bio propust. */
html.dark-theme .v2-pod { color: #94a3b8; }
/* UVODNI OBLACIC (Drago QA 16.09.2026.): rezervni pozdrav „Bok, ja sam
   Inzenjerko!" crta se kad mascot-splash.js ne stigne, a boje su mu tvrdo
   svijetle i bez tamne inacice: bijela ploha usred tamnog overlaya. Pravi
   splash oblacic (`.mascot-speech-bubble`) tamnu inacicu ima. Rep mora dobiti
   istu boju kao ploha, inace ostane bijeli trokutic. */
html.dark-theme .v2-oblacic,
html.dark-theme .v2-oblacic-rep { background: #1e293b; }
html.dark-theme .v2-oblacic-naslov { color: #e2e8f0; }
html.dark-theme .v2-oblacic-tekst { color: #94a3b8; }
/* ZUTA KARTICA NALAZA (Drago QA 16.09.2026.): gradi se iz Tailwind klasa
   (`bg-amber-50 border-amber-100 text-slate-700`), koje tamnu inacicu nemaju,
   dok globalno pravilo za `.text-slate-700` tekst u tamnoj temi posvijetli na
   #e2e8f0. Ishod je bio zuta ploha sa svijetlim slovima, kontrast 1,19:1.
   Zatamnjuje se ploha, ne tekst: tako vrijedi za sva tri mjesta u
   onboarding-v2.js bez diranja niza klasa. */
html.dark-theme .v2-overlay .bg-amber-50 { background-color: #1e293b; border-color: #334155; }
/* Option-card icon chip: fixed box so PNG icons and emoji fallback align. */
.you-opt-ic {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.you-opt-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* Empty-name submit: red ring + shake on the input, hint below it. */
.setup-input-error {
    border-color: #f87171 !important;
    animation: setup-input-shake 0.3s ease;
}
.setup-you-err {
    width: 100%;
    text-align: center;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: -0.9rem;   /* tuck under the input, inside the wrap gap */
}
@keyframes setup-input-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Thinking bubble + tutor quick replies */
.think-row { display: flex; align-items: flex-end; gap: 0.45rem; }
.think-bub {
    display: inline-flex; gap: 5px; align-items: center;
    background: #eff6ff; border-radius: 14px 14px 14px 4px;
    padding: 11px 14px;
}
.think-bub i {
    width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
    animation: think-bounce 1.2s infinite;
}
.think-bub i:nth-child(2) { animation-delay: 0.2s; }
.think-bub i:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .think-bub i { animation: none; } }
html.dark-theme .think-bub { background: #172554; }

/* "Iz skripte:" — odakle je odgovor došao; klik otvara to potpoglavlje.
   Tiše od brzih odgovora: ovo je trag, ne poziv na akciju. */
.chat-src { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
    margin: 0.35rem 0 0.15rem 2.1rem; }
.chat-src-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #94a3b8; }
/* Drago, 2.9.2026.: sive isprekidane pilule izgledale "ugašeno" — sad su
   žive plave tipke s 📖, na prvi pogled klikabilne. */
.chat-src-btn { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.65rem;
    border-radius: 999px; background: #eff6ff; color: #1d4ed8;
    border: 1px solid #bfdbfe; max-width: 15rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; transition: all .12s ease;
    cursor: pointer; }
.chat-src-btn::before { content: "📖 "; }
.chat-src-btn:hover { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
html.dark-theme .chat-src-btn { background: #1e3a5f; color: #bfdbfe;
    border-color: #1d4ed8; }
html.dark-theme .chat-src-btn:hover { background: #1e40af; color: #eff6ff; }

.chat-qr { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem 2.1rem; }
/* isti stil kao .mentor-chips button — jedan Inženjerko, jedan izgled čipa
   (Drago, 2.9.2026.: "sve triba biti u istom stilu ti čipovi") */
.chat-qr button {
    border: 1px solid #bfdbfe; color: #1d4ed8; background: #eff6ff;
    border-radius: 999px; padding: 6px 11px;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background .12s ease, transform .1s ease;
}
.chat-qr button:hover { background: #dbeafe; }
.chat-qr button:active { transform: scale(.96); }
html.dark-theme .chat-qr button { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }
html.dark-theme .chat-qr button:hover { background: #1e40af; }

/* Quiz HUD */
.qhud { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.qhud-pill {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    background: #eff6ff; color: #2563eb; border-radius: 999px;
    padding: 0.15rem 0.65rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.qhud-bar { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.qhud-bar i { display: block; height: 100%; background: #2563eb; border-radius: 99px; transition: width .4s ease; }
html.dark-theme .qhud-pill { background: #172554; color: #93c5fd; }
html.dark-theme .qhud-bar { background: #3b3a37; }

/* Live combo flame in the quiz HUD — the run count with escalating
   stages. No cap, no bar: the number grows, the colour heats up. */
.qhud-combo {
    display: inline-flex; align-items: center; gap: 1px;
    flex-shrink: 0; font-size: 0.82rem; color: #94a3b8;
}
.qhud-combo b {
    font-family: ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums; font-weight: 800;
}
.qhud-combo.qc-1 { color: #f59e0b; }
.qhud-combo.qc-2 { color: #ea580c; text-shadow: 0 0 10px rgba(234, 88, 12, 0.35); }
.qhud-combo.qc-3 {
    color: #dc2626; text-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
    animation: qc-inferno 1.2s ease-in-out infinite;
}
.qhud-combo.qc-break { color: #94a3b8; opacity: 0.75; }
/* Prekinut niz nosi NASU ikonu dima (Drago, 23.09.2026.): prije je tu bio
   emoji, pa moja ugasena vatrica koju Drago nije htio („asocira na pozar").
   Ikona je vec siva, pa joj ovdje ne treba nikakav filtar. */
.qc-pop { animation: qc-pop 0.25s ease-out; }
.qhud-combo.qc-3.qc-pop { animation: qc-pop 0.25s ease-out, qc-inferno 1.2s ease-in-out 0.25s infinite; }
@keyframes qc-pop { 50% { transform: scale(1.4); } }
@keyframes qc-inferno { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
    .qc-pop, .qhud-combo.qc-3 { animation: none !important; }
}
html.dark-theme .qhud-combo { color: #64748b; }
html.dark-theme .qhud-combo.qc-1 { color: #fbbf24; }
html.dark-theme .qhud-combo.qc-2 { color: #fb923c; }
html.dark-theme .qhud-combo.qc-3 { color: #f87171; }

/* Answer states */
.opt-ok, .opt-no { position: relative; }
.opt-ok::after {
    content: '\2713'; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
    color: #16a34a; font-weight: 800; font-size: 1.05rem;
}
.opt-no::after {
    content: '\2715'; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
    color: #dc2626; font-weight: 800; font-size: 1rem;
}
.opt-no { opacity: 0.9; }
/* Oznaka ✓/✕ ne preko zadnje riječi (QA 09.09.: „…ide prema✕ gore"). */
#quiz-options-list button.opt-ok, #quiz-options-list button.opt-no { padding-right: 2.4rem; }
/* Trakica pagera objašnjenja (quiz.js _vanjskiTrakica). */
#quiz-fb-dots { gap: 6px; }
.qfb-dot { display: inline-block; width: 6px; height: 4px; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.qfb-dot--on { width: 16px; background: #0ea5e9; }
html.dark-theme .qfb-dot { background: #475569; }
html.dark-theme .qfb-dot--on { background: #38bdf8; }
/* Tamna tema (QA 09.09.): ploče objašnjenja/savjeta/elaboracije i zadržani
   odgovori su ostajali svijetli sa svijetlim tekstom (kontrast ~1.5:1). */
html.dark-theme #quiz-expl-box, html.dark-theme #quiz-fb-savjet-tekst, html.dark-theme #quiz-explain-out, html.dark-theme #quiz-hint-out {
    background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0; }
html.dark-theme #quiz-options-list button.opt-ok { background: rgba(22, 101, 52, .35) !important; }
html.dark-theme #quiz-options-list button.opt-no { background: rgba(153, 27, 27, .35) !important; }
html.dark-theme #quiz-options-list button.opt-ok .prose, html.dark-theme #quiz-options-list button.opt-no .prose { color: #f1f5f9; }
#quiz-xp-count { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Knowledge map merged card: ring on the CURRENT chapter tile */
.kmap-cell.k-cur { box-shadow: 0 0 0 2.5px #2563eb; }
html.dark-theme .kmap-cell.k-cur { box-shadow: 0 0 0 2.5px #60a5fa; }
/* Chapter detail modal body */
.kmap-modal { display: grid; gap: 0.6rem; }
.kmap-modal .dash-suggest-btn { justify-self: start; }


/* Knowledge map as a thin clickable health-bar (compact screens).
   Each segment is a 30px-tall button; the coloured bar inside is 10px. */
.kbar { display: none; }
.kbar-sum { display: none; }
@media (max-width: 1160px) {
    #dash-map-widget .kmap { display: none; }          /* grid -> desktop only */
    #dash-map-widget .kmap-foot { display: none; }     /* legend too */
    .kbar { display: flex; gap: 3px; margin-top: 0.35rem; }
    .kbar-seg {
        flex: 1; height: 30px; min-width: 0;
        background: none; border: 0; padding: 0; cursor: pointer;
        display: grid; align-items: center;
    }
    .kbar-seg i { display: block; height: 10px; border-radius: 4px; background: #e2e8f0; }
    .kbar-seg i.k-hi  { background: #16a34a; }
    .kbar-seg i.k-mid { background: #84cc16; }
    .kbar-seg i.k-low { background: #f59e0b; }
    .kbar-seg i.k-bad { background: #ef4444; }
    .kbar-seg i.k-cur { outline: 2px solid #2563eb; outline-offset: 1.5px; }
    html.dark-theme .kbar-seg i { background: #3b3a37; }
    html.dark-theme .kbar-seg i.k-cur { outline-color: #60a5fa; }
    .kbar-sum {
        display: block; font-size: 0.68rem; color: #475569; margin-top: 0.3rem;
    }
    .kbar-sum b { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
    html.dark-theme .kbar-sum { color: #94a3b8; }
}


/* Subject page: desktop = 3 separate cards (Nastavi | Mapa | Liga);
   compact = the map card absorbs the continue row, desktop card hides. */
.kmerge-cont { display: none; }
@media (max-width: 1160px) {
    #view-dashboard .dash-widget-continue.kv-desktop { display: none; }
    .kmerge-cont { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 0.55rem; }
    #dash-map-widget {
        background: linear-gradient(135deg, #eff6ff 0%, #e0eaff 100%);
        border: 1px solid #bfdbfe;
    }
    html.dark-theme #dash-map-widget {
        background: linear-gradient(135deg, #182747, #1a2c58);
        border-color: #294a86; border-left-color: #3b82f6;
    }
}


/* Merged map card (compact): quieter chrome — the bar is the story. */
@media (max-width: 1160px) {
    #dash-map-widget #dash-map-detail {
        color: #94a3b8; font-weight: 600; font-size: 10px;
    }
    #dash-map-widget #dash-map-detail:hover { color: #2563eb; }
    html.dark-theme #dash-map-widget #dash-map-detail { color: #64748b; }
}

/* "Nastavi →" — same pill family as Uči / Igraj / Riješi (999px, 5rem),
   in the map card's blue. Overrides the Tailwind utility classes on the
   button. */
.dash-resume-btn {
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important; font-weight: 800 !important;
    min-width: 5.5rem; text-align: center; box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.33);
}
/* Phones: the pill trio (Nastavi / Riješi / 1×dan) a notch smaller — at
   320px they crowded the cards. */
@media (max-width: 767px) {
    .dash-resume-btn { font-size: 11px !important; padding: 4px 10px !important; min-width: 4.7rem; }
}


/* Map card header = the whole title taps into the detail view. */
.kmap-title {
    display: flex; align-items: center; gap: 0.3rem; width: 100%;
    background: none; border: 0; padding: 0; margin: 0 0 0.25rem;
    cursor: pointer; font-family: inherit; text-align: left;
}
.kmap-title h3 { margin: 0; }
.kmap-chev {
    color: #94a3b8; font-size: 1.05rem; line-height: 1; font-weight: 700;
    display: inline-flex; align-items: center; align-self: center;
    transform: translateY(-1.5px);              /* › glyph sits low on its baseline */
    transition: transform .15s ease, color .15s ease;
}
.kmap-title:hover .kmap-chev { color: #2563eb; transform: translate(2px, -1.5px); }
/* Drugi redak („prije 2 dana") stize tek kad se procita zadnja lokacija, a
   dotad je PRAZAN pa se skupi na nulu — i onda kartica naraste za jedan redak
   i gurne sve ispod. Izmjereno pri ulasku u predmet: 24 -> 43 px.
   `min-height` u `em` drzi mu redak i dok je prazan, i prati vlastitu velicinu
   slova pa se ne mora odrzavati ako se font promijeni. */
.kmerge-cont .dash-cont-where {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 1.35em;
}
@media (max-width: 1160px) {
    .kbar-seg i { height: 12px; border-radius: 5px; }
}


/* Chapter modal: status header + full-width practice action */
.kmap-status {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.55rem 0.75rem; border-radius: 0.7rem; background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.kmap-status-lbl { font-size: 0.72rem; font-weight: 700; color: #64748b; }
.kmap-status-num {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 1.35rem; font-weight: 800; color: #2563eb; line-height: 1;
}
.kmap-status-sub { font-family: ui-monospace, Consolas, monospace; font-size: 0.7rem; color: #94a3b8; }
html.dark-theme .kmap-status { background: #1f1e1d; border-color: #3b3a37; }
.kmap-go {
    width: 100%; border: 0; cursor: pointer; font-family: inherit;
    background: #2563eb; color: #fff; font-weight: 700; font-size: 0.85rem;
    padding: 0.7rem 1rem; border-radius: 0.7rem;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.7);
    transition: filter .15s ease, transform .12s ease;
}
.kmap-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.kmap-go:active { transform: scale(0.98); }

/* "Zadatak za tebe" on SHORT phones only (SE class, ≤740px viewports): the
   wrong-answer state (question + explanation + savjet + rescue buttons)
   overflows the 88vh sheet there. Tighten the CHROME — paddings, gaps,
   button heights — never the content and never the layout; buttons stay
   stacked full-width (the 2×2 grid read cramped on normal phones, which
   this media query no longer touches — Drago, 2026-08-04). */
/* OD 22.09.2026. ISTO STEZANJE NA SVAKOM TELEFONU, ne samo na kratkima (Drago
   QA, dvije slike: „ovo je too much, nije kompaktno" / „moze bit kompaktnije").
   Raspored ostaje: gumbi slozeni jedan pod drugim (Dragina odluka 04.08.),
   samo su nizi, a pitanje, odgovori i objasnjenje nose velicinu kartice s
   pocetne umjesto krupnijeg kroja iz „Uci sad" feeda. */
@media (max-height: 740px), (max-width: 768px) {
    #kmap-task-overlay > div > div:first-child { padding: 0.6rem 1rem; }
    #kmap-task-overlay .peek-q { font-size: 0.9rem; line-height: 1.35; }
    #kmap-task-overlay .peek-opt { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
    #kmap-task-overlay .peek-opts { gap: 0.3rem; }
    #kmap-task-overlay .peek-expl { font-size: 0.78rem; padding: 0.5rem 0.65rem; }
    #kmap-task-overlay .kmt-praise { font-size: 0.88rem; padding: 0; }
    #kmap-task-overlay .kmap-advice-head { font-size: 0.72rem; }
    #kmap-task-overlay h2 { font-size: 1rem; }
    #kmap-task-overlay .overflow-y-auto { padding: 0.6rem 0.7rem 0.7rem; }
    #kmap-task-overlay .kmap-go { padding: 0.5rem 0.75rem; font-size: 0.8rem; border-radius: 0.6rem; }
    #kmap-task-overlay #kmt-after { gap: 0.35rem; margin-top: 0.5rem !important; }
    #kmap-task-overlay .kmap-advice { padding: 0.45rem 0.6rem; font-size: 0.75rem; }
    #kmap-task-overlay .kmap-advice-head { margin-bottom: 0.15rem; }
    #kmap-task-overlay .peek-opt { padding: 0.45rem 0.6rem; }
    #kmap-task-overlay #kmt-slot .peek-card { padding: 0.6rem 0.7rem; }
}


/* Chapter modal: human description of what the chapter teaches */
.kmap-desc { font-size: 0.8rem; color: #475569; line-height: 1.55; }
html.dark-theme .kmap-desc { color: #a9b6d0; }

/* Home course-card usage streak badge (🔥N) — review: per-subject flame. */
.hcc-streak{display:inline-flex;align-items:center;gap:1px;font-size:.72rem;font-weight:800;
  color:#c2410c;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;
  padding:0 .35rem;line-height:1.3;vertical-align:middle;white-space:nowrap}

/* ── Content peek cards (home) + "Learn now" feed (learn.js) ─────────────── */
.peek-card{display:flex;flex-direction:column;gap:.4rem;text-align:left;cursor:pointer}
.peek-head{display:flex;align-items:center;gap:.4rem}
.peek-ic{width:20px;height:20px;object-fit:contain}
.peek-kicker{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.peek-go{margin-left:auto;color:#2563eb;font-weight:800;font-size:.9rem}
.peek-q{font-size:.86rem;font-weight:600;color:#1e293b;line-height:1.35}
.peek-title{font-size:.9rem;font-weight:800;color:#1e293b;line-height:1.25}
.peek-sub{font-size:.72rem;font-weight:600;color:#475569}
.peek-excerpt{font-size:.78rem;color:#475569;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.peek-opts{display:flex;flex-direction:column;gap:.3rem;margin-top:.15rem}
/* Povratna informacija u Learn Now kao u kvizu (learn.js, 16.09.2026.): crta,
   tockice, pa stranice savjet/objasnjenje. Mjere kao `#quiz-fb-pager`. */
.peek-fb{margin-top:1rem;padding-top:1rem;border-top:1px solid #e2e8f0}
.peek-fb-tocke{display:flex;justify-content:center;gap:6px;margin-bottom:.5rem}
.peek-fb-tocke[hidden]{display:none}
.peek-fb-pager{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.peek-fb-pager::-webkit-scrollbar{display:none}
.peek-fb-ploca{min-width:100%;scroll-snap-align:start}
html.dark-theme .peek-fb{border-top-color:#334155}
html.dark-theme .peek-fb-ploca > div{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0}
.peek-opt{text-align:left;font-size:.8rem;padding:.4rem .6rem;border:1px solid #e2e8f0;border-radius:.55rem;
  background:#fff;color:#334155;transition:.12s;cursor:pointer}
@media (hover: hover) and (pointer: fine) { .peek-opt:hover:not(:disabled){background:#f1f5f9} }
.peek-opt:disabled{cursor:default;opacity:.9}
.peek-opt.peek-ok{background:#dcfce7;border-color:#86efac;color:#166534;font-weight:700}
.peek-opt.peek-bad{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
/* Objasnjenje se mora VIDJETI da je stiglo (Ivo, 02.09.): lijevi rub u boji i
   podebljan naslov, jer je dosad izgledalo kao nastavak istog sivog bloka. */
.peek-expl{font-size:.76rem;color:#475569;background:#f8fafc;border:1px solid #eef2f7;border-radius:.5rem;
  border-left:3px solid #2563eb;
  padding:.45rem .6rem;margin-top:.45rem;line-height:1.4}
.peek-expl-n{color:#1d4ed8;font-weight:800}
/* Prvi odlomak iz markdowna tece uz naslov umjesto da skoci u novi red. */
.peek-expl > p:first-of-type{display:inline}
html.dark-theme .peek-expl{background: #1f1e1d;border-color: #2a2927;border-left-color: #3b82f6;color:#cbd5e1}
html.dark-theme .peek-expl-n{color:#93c5fd}
body.eink-look .peek-expl{border-left:3px solid #000}
body.eink-look .peek-expl-n{color:#000}
.peek-foot{margin-top:.15rem}
.peek-enter{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;color:#2563eb;
  background:none;border:0;padding:.15rem 0;cursor:pointer}
.peek-enter .peek-go{margin-left:0}

/* Learn-now vertical feed */
/* TikTok-style: ONE item per screen. The feed is a fixed-height scroll
   container (below the header; --learn-top is set by openLearnFeed) and each
   slide fills it, so mandatory snap shows exactly one quiz / chapter / FAQ at
   a time — scroll to the next. */
/* Status-bar scrim — a fixed white->transparent fade at the very top of the
   main app area (Ivo, 2026-07-18). Every tab's content eases into the white
   native status strip when the header hides on scroll, instead of a hard
   colour seam under the clock. It fades to transparent, so it works for any
   tab background (Kolege pink, Learn Now bluish, white script, …) without
   knowing the colour. Solid white through the status inset (so the clock area
   matches the native strip), then a soft fade into the content. z-15 keeps it
   above the views (z-auto/10) but below the header (relative, z-20), so the
   header text stays crisp. pointer-events:none so it never blocks taps. */
/* Own compositing layer (2026-08-03): this is a translucent GRADIENT parked
   over the top strip of a scroller. Without a layer of its own, iOS has to
   re-blend it against freshly painted content on every scrolled frame instead
   of scrolling a finished texture underneath it — paint cost right where the
   reader's eye is. `translateZ(0)` is the promotion; nothing moves. */
#app-top-scrim{position:absolute;top:0;left:0;right:0;z-index:15;
  transform:translateZ(0);will-change:transform;
  pointer-events:none;height:calc(env(safe-area-inset-top,0px) + 64px);
  background:linear-gradient(to bottom, #ffffff 0,
    #ffffff calc(env(safe-area-inset-top,0px) + 4px), rgba(255,255,255,0) 100%)}
html.dark-theme #app-top-scrim{
  background: linear-gradient(to bottom, #1f1e1d 0,
    #1f1e1d calc(env(safe-area-inset-top,0px) + 4px), rgba(15,23,42,0) 100%)}

/* The bluish #f8fafc slate is the feed's identity colour, with the same
   white->bluish top fade the global #app-top-scrim gives other tabs. The feed
   sits at z-40 (above the z-15 scrim), so it carries its own fade rather than
   relying on the scrim. */
.learn-feed{position:fixed;left:0;right:0;bottom:0;top:var(--learn-top,54px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  /* mandatory = strict one-item-per-screen paging (Ivo wants exactly one Q/item
     per screen, 2026-07-21). The old "stuck between slides" bug came from slides
     TALLER than the viewport; that's fixed by making each .learn-slide exactly
     one screen tall and scrolling any overflow INSIDE the slide (see .learn-slide
     height:100% + overflow-y:auto below), so no slide ever exceeds the snapport. */
  scroll-snap-type:y mandatory;padding:0;margin:0;display:block;z-index:40;
  background-color:#f8fafc;background-repeat:no-repeat;
  background-image:linear-gradient(to bottom, #ffffff,
    #f8fafc calc(env(safe-area-inset-top,0px) + 96px))}
html.dark-theme .learn-feed{background-color: #1f1e1d;
  background-image:linear-gradient(to bottom, #1e293b,
    #0f172a calc(env(safe-area-inset-top,0px) + 96px))}
/* Learn Now! loading interstitial (learn.js _learnLoadingOverlay): covers the
   feed with a spinner + one fun fact for ~7s while the first slides seed. */
.learn-loading{position:absolute;inset:0;z-index:50;background:inherit;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  transition:opacity .4s ease}
.learn-loading--out{opacity:0;pointer-events:none}
.learn-loading-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;max-width:32rem}
.learn-loading .ll-spin{width:2.1rem;height:2.1rem;border:3px solid #dbeafe;
  border-top-color:#2563eb;border-radius:999px;animation:spin 0.8s linear infinite}
.learn-loading .ll-card{background:#eff6ff;border:1px solid #dbeafe;border-radius:1rem;
  padding:1rem 1.15rem;text-align:center}
.learn-loading .ll-kicker{font-size:.7rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#1d4ed8;margin-bottom:.4rem}
.learn-loading .ll-fact{font-size:.95rem;line-height:1.55;color:#334155}
html.dark-theme .learn-loading .ll-card{background: #2a2927;border-color: #3b3a37}
html.dark-theme .learn-loading .ll-fact{color:#cbd5e1}
@keyframes spin{to{transform:rotate(360deg)}}
/* Reverted to the ORIGINAL scroll model (Ivo preferred it, 2026-07-21): each
   slide is min-height:100% (grows with content) and the WHOLE feed is one scroll
   surface — no nested overflow-y. The 1.1.12 "TikTok" rework (height:100% +
   overflow-y:auto per slide) added a nested scroll container that fought the
   outer snap and made scrolling jerky on both iOS and Android. */
.learn-slide{width:100%;max-width:none;min-height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.35rem;padding:1.25rem;scroll-snap-align:start;scroll-snap-stop:always}
.learn-slide > *{width:100%;max-width:40rem}
/* An UNEXPANDED slide is a full screen tall, so the next item is a swipe away
   and separation takes care of itself. Expanding ("Keep reading") breaks that:
   the slide grows past the viewport and the next item's course label starts
   ~20+20px below the card, which reads as one continuous page rather than two
   posts (Ivo, 2026-08-03, iPhone). The gap belongs to the item that grew, so
   it lives on the expanded slide's bottom padding — and the extra travel is
   itself the point: sliding from one item to the next should take a deliberate
   push, not a nudge. */
.learn-slide.learn-slide-expanded{justify-content:flex-start;padding-bottom:5rem}
/* Inline-expanded subchapter text + code blocks in quiz peeks stay readable
   and never force the page to scroll sideways. */
/* Expanded read: REMOVE the line-clamp (the collapsed excerpt clamps to a few
   lines with an ellipsis; without this the full text stays clipped to ~8
   lines). !important beats the more specific .peek-feed-item.peek-read rule. */
.peek-excerpt-full{max-height:none !important;-webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;display:block !important;overflow:visible !important}
.peek-excerpt-full pre,.peek-q pre{overflow-x:auto;white-space:pre;
  background:#0f172a;color:#e2e8f0;padding:.6rem .7rem;border-radius:.5rem;
  font-size:.8rem;line-height:1.4}
.peek-excerpt-full p{margin:0 0 .6rem}
/* (The Learn Now! close button was dropped by design — you leave the feed via
   any menu item or the back button. Its styles and the code that hid/showed it
   outlived the element itself and were removed 2026-07-19.) */
.learn-slide-course{font-size:.72rem;font-weight:800;color:#94a3b8;text-transform:uppercase;
  letter-spacing:.04em;margin:0 0 .35rem .2rem}

/* SLIKA U FEEDU (Ivo, 10.09.2026.: „dodat da se prikazuju slike"). Kartica je
   slika, ispod nje opis, pa sitno odakle je. Okvir ima STALNU visinu (55 % of
   ekrana) i sliku unutar sebe uklapa cijelu: dimenzije se ne znaju prije nego
   slika stigne, a bez okvira bi svaka pristigla slika gurnula opis ispod sebe
   usred citanja. Svijetla podloga jer su dijagrami crtani na bijelom. */
.peek-slika{cursor:default;gap:.55rem}
.peek-slika-okvir{max-height:55vh;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #e2e8f0;border-radius:.8rem;padding:.6rem;overflow:hidden}
.peek-slika-okvir img{max-width:100%;max-height:calc(55vh - 1.2rem);width:auto;height:auto;
  object-fit:contain}
.peek-slika-opis{font-size:.95rem;line-height:1.45;color:#1e293b}
.peek-slika-odakle{font-size:.75rem;color:#2563eb;background:none;border:0;padding:.15rem 0;text-align:left;cursor:pointer;font-weight:600}
.peek-slika-odakle:disabled{color:#94a3b8;cursor:default;font-weight:400}
/* Tinta: bez sjena i bez sivila — crno na bijelom, kao i ostatak izgleda. */
body.eink-look .peek-slika-okvir{border-color:#000}
body.eink-look .peek-slika-opis,body.eink-look .peek-slika-odakle{color:#000}

/* Guided tutor-questions slide (Learn Now! feed). Three tappable questions;
   each opens an inline step list where every sub-question reveals its answer
   on tap, then the main answer. Self-contained — no mode jump. */
.peek-tutor .peek-title{margin-top:.15rem}
.peek-tutor-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.peek-tutor-item{border:1px solid #e2e8f0;border-radius:.7rem;overflow:hidden;background:#fff}
/* Focus mode: opening one question hides the other two (Ivo 2026-07-17). */
.peek-tutor-item.peek-tutor-collapsed{display:none}
.peek-tutor-q{display:flex;align-items:flex-start;gap:.5rem;width:100%;text-align:left;
  padding:.7rem .8rem;background:#f8fafc;border:0;cursor:pointer;font:inherit}
.peek-tutor-q:hover{background:#f1f5f9}
.peek-tutor-qtext{flex:1;font-size:.85rem;font-weight:600;color:#1e293b;line-height:1.35}
.peek-tutor-caret{color:#94a3b8;font-size:.8rem;transition:transform .15s;margin-top:.15rem}
.peek-tutor-q.peek-tutor-open{background:#eef2ff}
.peek-tutor-q.peek-tutor-open .peek-tutor-caret{transform:rotate(180deg)}
.peek-tutor-steps{display:flex;flex-direction:column;gap:.4rem;padding:.6rem .8rem .75rem}
.peek-tutor-step{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;
  width:100%;text-align:left;padding:.55rem .65rem;border:1px solid #e2e8f0;
  border-radius:.55rem;background:#fff;cursor:pointer;font:inherit;transition:.12s}
.peek-tutor-step:hover{background:#f8fafc}
.peek-tutor-stepq{font-size:.8rem;font-weight:600;color:#334155;line-height:1.35}
.peek-tutor-stepa{font-size:.8rem;color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:.45rem;padding:.4rem .55rem;line-height:1.4;width:100%}
.peek-tutor-reveal{font-size:.68rem;font-weight:800;color:#2563eb;letter-spacing:.02em}
.peek-tutor-step-open{cursor:default}
.peek-tutor-step-open .peek-tutor-reveal{display:none}
.peek-tutor-final{font-size:.8rem;color:#475569;background:#f8fafc;border:1px solid #eef2f7;
  border-radius:.5rem;padding:.5rem .65rem;line-height:1.4;margin-top:.15rem}
/* Main answer reveal sits at the TOP of the expansion (before the sub-questions)
   with a blue accent so it reads as "the answer", distinct from the grey steps. */
.peek-tutor-mainans{border-color:#bfdbfe;background:#eff6ff;margin-bottom:.15rem}
.peek-tutor-mainans .peek-tutor-stepq{color:#1d4ed8;font-weight:700}
html.dark-theme .peek-tutor-mainans{background: #0f213f;border-color: #1e40af}
html.dark-theme .peek-tutor-mainans .peek-tutor-stepq{color:#93c5fd}
html.dark-theme .peek-tutor-item{background: #2a2927;border-color: #3b3a37}
html.dark-theme .peek-tutor-q{background: #1f1e1d;color:#e2e8f0}
html.dark-theme .peek-tutor-qtext{color:#e2e8f0}
html.dark-theme .peek-tutor-step{background: #2a2927;border-color: #3b3a37}
html.dark-theme .peek-tutor-stepq{color:#cbd5e1}
.peek-feed-item{background:#fff;border:1px solid #e6edf5;border-radius:1rem;padding:1rem 1.1rem;
  box-shadow:0 6px 20px -12px rgba(15,23,42,.25);cursor:default}
.peek-feed-item .peek-q{font-size:1rem}
.peek-feed-item .peek-title{font-size:1.15rem}
.peek-feed-item .peek-excerpt{-webkit-line-clamp:6;font-size:.9rem}

/* Compact peek layout (override): icon+title/question inline, action pill bottom-right */
.peek-line{display:flex;align-items:flex-start;gap:.45rem}
.peek-line .peek-ic{margin-top:2px;flex-shrink:0}
.peek-line .peek-q,.peek-line .peek-title{flex:1;min-width:0}
.peek-actions{display:flex;justify-content:flex-end;margin-top:.4rem}
.peek-actions .peek-enter{background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;
  padding:.28rem .7rem;color:#2563eb;font-weight:800;font-size:.72rem}
.peek-actions .peek-enter:hover{background:#dbeafe}
.peek-go{margin-left:0;color:inherit;font-weight:800}
.peek-opt b{color:#64748b;font-weight:800;margin-right:.1rem}
.peek-read .peek-actions .peek-enter{background:#eff6ff}

/* Mobile: keep peek cards compact so a quiz peek fits without a huge scroll */
@media (max-width:768px){
  .peek-q,.peek-title{font-size:.84rem}
  .peek-opt{font-size:.76rem;padding:.32rem .5rem}
  .peek-excerpt{-webkit-line-clamp:2}
  .dash-widget .peek-opts{max-height:9.5rem;overflow:auto}
}

/* Peek: options cropped to one line; the action pill has its own row */
.peek-opt{display:flex;align-items:center;gap:.3rem}
.peek-opt>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Learn Now! feed has a full screen per card, so show whole answers (wrap)
   instead of cropping each option to one line with an ellipsis. */
.peek-feed-item .peek-opt{align-items:flex-start}
.peek-feed-item .peek-opt>span{white-space:normal;overflow:visible;text-overflow:clip}
/* Chapter: excerpt fills more (there's room), pill tight bottom-right */
.peek-read .peek-excerpt{-webkit-line-clamp:5}
.peek-feed-item.peek-read .peek-excerpt{-webkit-line-clamp:8}
.peek-read .peek-actions{margin-top:.2rem}

/* ---- Kolege feed (Querencia logika, Inženjerko dizajn) ----
   Visual language mirrors the subject dashboard: the rose "kolege" theme
   tokens (see .dash-quick-card.theme-kolege), 1.1rem card radius, pastel
   gradient hero, hover-lift, PNG icon, mascot empty-state. */

.kolege-wrap{max-width:46rem;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:.85rem}

/* HERO — same shape as a dash card, in the kolege palette */
.kolege-hero{
  display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;
  background:linear-gradient(180deg,#fff1f2 0%,#ffffff 85%);
  border:1px solid #fecdd3;border-radius:1.1rem;position:relative;overflow:hidden;
}
.kolege-hero-icon{width:3.4rem;height:3.4rem;display:grid;place-items:center;flex-shrink:0;font-size:2rem}
.kolege-hero-icon img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(15,23,42,.16));user-select:none;pointer-events:none}
.kolege-hero-text{flex:1;min-width:0}
.kolege-hero-text .kt{font-weight:800;font-size:1.02rem;color:#be123c;margin:0 0 .1rem}
.kolege-hero-text .kd{font-size:.76rem;color:#64748b;line-height:1.35}
.kolege-refresh{
  width:2.1rem;height:2.1rem;border-radius:999px;display:grid;place-items:center;flex-shrink:0;
  background:#ffe4e6;color:#be123c;font-size:1rem;font-weight:700;
  transition:transform .35s ease,background .15s ease;
}
.kolege-refresh:hover{transform:rotate(180deg);background:#fecdd3}
.kolege-chapter-chip{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.4rem;
  padding:.16rem .6rem;border-radius:999px;background:#ffe4e6;color:#9f1239;
  font-size:.68rem;font-weight:700;max-width:100%;white-space:normal;line-height:1.3;text-align:left;
}

/* Composer */
.kolege-composer{
  background:#fff;border:1px solid #e2e8f0;border-radius:1.1rem;
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;
}
.kolege-composer textarea{
  width:100%;border:1px solid #e2e8f0;border-radius:.7rem;padding:.6rem .8rem;
  font-size:.9rem;resize:none;overflow:hidden;outline:none;background:#fff;color:#0f172a;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.kolege-composer textarea:focus{border-color:#fda4af;box-shadow:0 0 0 3px rgba(244,63,94,.14)}
.kolege-composer-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.kolege-anon{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;color:#64748b;cursor:pointer;user-select:none}
.kolege-anon input{accent-color:#be123c;width:.9rem;height:.9rem}
.kolege-send{
  padding:.55rem 1.2rem;border-radius:.7rem;background:#be123c;color:#fff;
  font-weight:700;font-size:.85rem;
  transition:background .15s ease,transform .15s ease;
}
.kolege-send:hover{background:#9f1239;transform:translateY(-1px)}
.kolege-send:disabled{opacity:.5;transform:none}

/* Post card — dash-card body language */
.kolege-card{
  position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:1.1rem;
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kolege-card:hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(15,23,42,.18)}
.kolege-card.is-relevant{border-color:#fda4af;box-shadow:0 0 0 1px #fecdd3}
.kolege-card.is-fresh{border-color:#fb7185;box-shadow:0 0 0 2px #fecdd3}
.kolege-name{font-size:.85rem;font-weight:700;color:#334155}
.kolege-meta{font-size:.72rem;color:#94a3b8}
.kolege-text{color:#334155;font-size:.93rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:break-word}
.kolege-ghost{font-size:.72rem;color:#cbd5e1;transition:color .15s ease}
.kolege-badge{
  display:inline-flex;align-items:center;gap:.25rem;padding:.14rem .55rem;border-radius:999px;
  background:#f1f5f9;color:#64748b;font-size:.64rem;font-weight:800;flex-shrink:0;
}
.kolege-badge.is-hot{background:#be123c;color:#fff}

/* Avatars */
.kolege-av{
  width:2.25rem;height:2.25rem;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0;
}
.kolege-av-sm{width:1.75rem;height:1.75rem;font-size:.6rem}
.kolege-av-anon{background:#f1f5f9;font-size:1rem}

/* Reaction pills — Hvala / Podrška / I ja učim (heart|hug|here) */
.kolege-pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:999px;
  border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:.74rem;font-weight:700;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .12s ease;
}
.kolege-pill:hover{border-color:#fda4af;color:#be123c;transform:translateY(-1px)}
.kolege-pill.active{background:#ffe4e6;border-color:#fda4af;color:#9f1239}
.kolege-pill.is-static{pointer-events:none;color:#94a3b8}
.kolege-pill-replies svg{flex-shrink:0}

/* Thread (replies) */
.kolege-thread{
  border-top:1px solid #ffe4e6;background:#fff7f7;
  padding:1rem;display:flex;flex-direction:column;gap:.7rem;
}
.kolege-reply-input{
  flex:1;border:1px solid #e2e8f0;border-radius:.7rem;padding:.5rem .8rem;
  font-size:.85rem;outline:none;background:#fff;color:#0f172a;
  /* Input se po defaultu NE DA stisnuti ispod svoje intrinzicne sirine
     (min-width:auto u flexu) — na telefonu je red input+gumb bio siri od
     kartice i "Odgovori" je bjezao s ekrana (Drago, 2026-08-06). */
  min-width:0;
}
.kolege-thread .kolege-send{flex-shrink:0;white-space:nowrap}
/* Dok student TIPKA odgovor, "+" FAB nema sto traziti preko tipkovnice /
   reply reda — classroom.js stavlja klasu na body na focusin u threadu. */
body.kolege-replying .kolege-fab,
body.kolege-replying .kolege-fab-center{display:none}
.kolege-reply-input:focus{border-color:#fda4af;box-shadow:0 0 0 3px rgba(244,63,94,.14)}
/* IG model komentara (Drago, 2026-08-06): kad je thread otvoren, OBJAVA
   ostaje FIKSNA na vrhu kartice, a skrolaju se SAMO komentari između nje
   i docka za odgovor. Kartica prestaje biti scroller; thread ga preuzima
   i proteže se do rubova kartice. Dugačak tekst objave dobiva vlastiti
   mali scroll da komentarima uvijek ostane prostora. */
.kolege-page-card:has(> .kolege-thread){overflow:hidden}
.kolege-page-card:has(> .kolege-thread) > :not(.kolege-thread){flex:0 0 auto}
/* flex:0 0 auto (NE shrink!) — sa shrinkom je thread STISNUO tekst objave
   na par redaka (Drago: "makla se objava, smanjila"). Prirodna visina do
   26vh; tek stvarno dugacak tekst dobiva vlastiti scroll. */
.kolege-page-card:has(> .kolege-thread) > .kolege-page-text{overflow-y:auto;max-height:26vh;flex:0 0 auto}
.kolege-page-card > .kolege-thread{
  flex:1 1 auto;min-height:7rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:0 -1.4rem -1.3rem;
  /* sticky dock ne moze u padding zonu roditelja — dno ostaje docku */
  padding-bottom:0;
}
.kolege-page-card > .kolege-thread .kolege-reply-dock{bottom:0;margin-bottom:0;padding-bottom:.7rem}
.kolege-page-card > .kolege-thread .kolege-reply-dock::after{display:none}

/* Red za odgovor ZALIJEPLJEN za dno scrollera komentara: polje je uvijek
   na dohvat; "+" se skriva dok je thread otvoren (body.kolege-thread-open,
   sinkronizira _rerenderFeedOnly). */
.kolege-reply-dock{
  position:sticky;bottom:-1rem;z-index:3;
  margin:.2rem -1rem -1rem;padding:.55rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)/2);
  background:#fff7f7;border-top:1px solid #ffe4e6;
  display:flex;flex-direction:column;gap:.4rem;
  box-shadow:0 -8px 16px -12px rgba(159,18,57,.28);
}
/* Prorez ispod docka (paddinzi kartice) kroz koji je provirivao sljedeci
   komentar — prekriven neprozirnim produzetkom. */
.kolege-reply-dock::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:1.4rem;background:#fff7f7;
}
html.dark-theme .kolege-reply-dock{background: #2a2927;border-color: #3b3a37}
html.dark-theme .kolege-reply-dock::after{background: #2a2927}
/* Tanki razdjelnici izmedju top-level komentara — thread dise, a
   ugnijezdeni ostaju vizualno vezani uz roditelja. */
.kolege-thread > .flex.gap-2:not(.kolege-reply-child) ~ .flex.gap-2:not(.kolege-reply-child){
  border-top:1px solid #ffe9ec;padding-top:.55rem;
}
html.dark-theme .kolege-thread > .flex.gap-2:not(.kolege-reply-child) ~ .flex.gap-2:not(.kolege-reply-child){border-color: #3b3a37}
body.kolege-thread-open .kolege-fab,
body.kolege-thread-open .kolege-fab-center{display:none}

/* Empty state — mascot invitation */
.kolege-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.4rem 1rem;gap:.35rem}
.kolege-empty-head{
  width:5.2rem;height:5.2rem;border-radius:999px;display:grid;place-items:center;margin-bottom:.4rem;
  background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 100%);border:1px solid #fecdd3;
}
.kolege-empty-head img{width:3.6rem;height:3.6rem;object-fit:contain;user-select:none;pointer-events:none}
.kolege-empty .ket{font-weight:800;font-size:.98rem;color:#0f172a}
.kolege-empty .kes{font-size:.78rem;color:#94a3b8}

/* 🔔 inbox (personal notifications) */
.kolege-bell{position:relative;overflow:visible}
.kolege-bell-badge{
  position:absolute;top:-.3rem;right:-.3rem;min-width:1rem;height:1rem;padding:0 .25rem;
  border-radius:999px;background:#dc2626;color:#fff;font-size:.58rem;font-weight:800;
  display:grid;place-items:center;border:2px solid #fff;
}
.kolege-inbox-panel{
  position:absolute;top:4.2rem;right:1rem;z-index:40;width:20rem;max-width:calc(100vw - 2rem);
  max-height:60%;overflow-y:auto;background:#fff;border:1px solid #fecdd3;border-radius:1.1rem;
  padding:.85rem 1rem;box-shadow:0 24px 48px -18px rgba(15,23,42,.35);
  animation:kolegeSheetUp .2s ease;
}
.kolege-inbox-item{
  display:block;width:100%;text-align:left;padding:.45rem .4rem;border-radius:.6rem;
  border-bottom:1px solid #f8fafc;transition:background .15s ease;
}
.kolege-inbox-item:hover{background:#fff1f2}
.kolege-inbox-item .kii-head{display:block;font-size:.74rem;color:#475569}
.kolege-inbox-item .kii-text{display:block;font-size:.72rem;color:#94a3b8;margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.dark-theme .kolege-inbox-panel{background: #2a2927;border-color: rgba(251,113,133,.35)}
html.dark-theme .kolege-inbox-item:hover{background: rgba(190,18,60,.15)}
html.dark-theme .kolege-inbox-item .kii-head{color:#cbd5e1}

/* @mentions: highlighted in text, autocomplete dropdown, push button */
.kolege-mention{color:#be123c;font-weight:700;background:#fff1f2;border-radius:.3rem;padding:0 .2rem}
html.dark-theme .kolege-mention{background: rgba(190,18,60,.2);color:#fda4af}
/* Fiksni sloj na <body> (classroom.js ga pozicionira prema VIZUALNOM
   viewportu). Unutar kartice bi ga overflow:hidden odrezao. */
.kolege-mention-dd{
  /* IZNAD lista za objavu (.kolege-sheet-backdrop, z-index 10060) — inače
     popis kolega ostane ispod zatamnjenja: vidi se sivo i tap ga ne pogađa,
     pa spominjanje "ne radi" (testerica na iPhoneu, 2026-08-12). */
  position:fixed;z-index:10080;min-width:11rem;max-height:11rem;overflow-y:auto;
  background:#fff;border:1px solid #fecdd3;border-radius:.7rem;
  box-shadow:0 14px 28px -12px rgba(15,23,42,.3);
}
.kolege-mention-dd button{display:block;width:100%;text-align:left;padding:.55rem .8rem;
  font-size:.85rem;font-weight:600;color:#334155;transition:background .12s ease}
.kolege-mention-dd button:hover{background:#fff1f2;color:#be123c}
html.dark-theme .kolege-mention-dd{background: #2a2927;border-color: rgba(251,113,133,.35)}
html.dark-theme .kolege-mention-dd button{color:#cbd5e1}
.kolege-push-enable{
  display:block;width:100%;text-align:center;margin-bottom:.5rem;
  padding:.45rem .8rem;border-radius:.7rem;border:1px dashed #fda4af;
  font-size:.75rem;font-weight:700;color:#be123c;background:#fff7f7;
  transition:background .15s ease;
}
.kolege-push-enable:hover{background:#ffe4e6}
html.dark-theme .kolege-push-enable{background: rgba(190,18,60,.12);color:#fda4af}

/* 'Hvala' heart on replies */
.kolege-reply-heart{
  font-size:.64rem;font-weight:700;color:#94a3b8;padding:.06rem .45rem;
  border-radius:999px;border:1px solid transparent;filter:grayscale(1);opacity:.6;
  transition:all .15s ease;
}
.kolege-reply-heart:hover{filter:none;opacity:1;border-color:#fda4af}
.kolege-reply-heart.active{filter:none;opacity:1;background:#ffe4e6;color:#9f1239;border-color:#fda4af}
.kolege-reply-heart.is-static{pointer-events:none;filter:none;opacity:.8}
html.dark-theme .kolege-reply-heart.active{background: rgba(190,18,60,.25);color:#fda4af}

/* Weekly pulse line on the end card */
.kolege-end-pulse{font-size:.75rem;color:#64748b;line-height:1.6;text-align:center;
  background:#f8fafc;border-radius:.7rem;padding:.5rem .9rem;margin-bottom:.3rem}
html.dark-theme .kolege-end-pulse{background: #1f1e1d;color:#94a3b8}

/* Nested replies (one level) + "replying to" chip + jump flash */
.kolege-reply-child{margin-left:2.2rem;padding-left:.6rem;border-left:2px solid #ffe4e6}
html.dark-theme .kolege-reply-child{border-left-color: rgba(190,18,60,.35)}
.kolege-replying-chip{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;
  padding:.2rem .6rem;border-radius:999px;background:#ffe4e6;color:#9f1239;
  font-size:.7rem;font-weight:600;
}
html.dark-theme .kolege-replying-chip{background: rgba(190,18,60,.25);color:#fda4af}
.kolege-jump-flash{animation:kolegeJumpFlash 2s ease}
@keyframes kolegeJumpFlash{0%,60%{box-shadow:0 0 0 3px #fb7185}100%{box-shadow:0 0 0 0 transparent}}

/* Skeleton loaders (shimmer) */
.kolege-skel{position:relative;overflow:hidden;background:#f1f5f9;border-radius:1.1rem}
.kolege-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:kolegeShimmer 1.2s infinite}
.skel-hero{height:5rem}
.skel-card{height:8.5rem}
@keyframes kolegeShimmer{100%{transform:translateX(100%)}}
html.dark-theme .kolege-skel{background: #2a2927}
html.dark-theme .kolege-skel::after{background: linear-gradient(90deg,transparent,rgba(148,163,184,.15),transparent)}

/* Reddit-style sort tabs: Za tebe / Novo / Top */
.kolege-sort{display:flex;gap:.35rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:.2rem;width:max-content}
.kolege-sort-tab{padding:.3rem .85rem;border-radius:999px;font-size:.72rem;font-weight:700;color:#64748b;transition:background .15s ease,color .15s ease}
.kolege-sort-tab:hover{color:#be123c}
.kolege-sort-tab.active{background:#be123c;color:#fff}
html.dark-theme .kolege-sort{background: #1f1e1d;border-color: #3b3a37}
html.dark-theme .kolege-sort-tab{color:#94a3b8}

/* Saved bookmark + OP badge + invite pill */
.kolege-save.is-saved{color:#be123c;filter:none}
.kolege-save{filter:grayscale(1);opacity:.55;transition:filter .15s ease,opacity .15s ease}
.kolege-save:hover,.kolege-save.is-saved{filter:none;opacity:1}
.kolege-op-badge{display:inline-flex;align-items:center;gap:.2rem;padding:.08rem .5rem;border-radius:999px;
  background:#E6F1FB;color:#0C447C;font-size:.62rem;font-weight:800}
html.dark-theme .kolege-op-badge{background: #0C447C;color:#B5D4F4}
.kolege-pill-replies.is-invite{border-style:dashed;border-color:#fda4af;color:#be123c}

/* Featured first card — Querencia peach gradient */
.kolege-card.is-featured{background:linear-gradient(180deg,#fff7ed 0%,#ffffff 55%);border-color:#fed7aa}
html.dark-theme .kolege-card.is-featured{background: linear-gradient(180deg,rgba(180,83,9,.14) 0%,#2a2927 55%);border-color: rgba(254,215,170,.3)}

/* Post-publish moment ("released into the circle" 🌿) */
.kolege-published-overlay{
  position:fixed;inset:0;z-index:10070;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.35);animation:kolegePubFade 1.7s ease forwards;pointer-events:none;
}
.kolege-published-card{
  background:#fff;border:1px solid #fecdd3;border-radius:1.3rem;padding:1.6rem 2.2rem;text-align:center;
  box-shadow:0 24px 48px -20px rgba(190,18,60,.35);animation:kolegePubCard 1.7s ease forwards;
}
.kolege-published-card .kpo-leaf{font-size:2.2rem;animation:kolegePubLeaf 1.5s ease}
.kolege-published-card .kpo-title{font-weight:800;font-size:1.05rem;color:#0f172a;margin-top:.3rem}
.kolege-published-card .kpo-sub{font-size:.78rem;color:#64748b;margin-top:.15rem}
html.dark-theme .kolege-published-card{background: #2a2927;border-color: rgba(251,113,133,.35)}
html.dark-theme .kolege-published-card .kpo-title{color:#e2e8f0}
@keyframes kolegePubFade{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes kolegePubCard{0%{transform:scale(.85) translateY(12px)}18%{transform:scale(1) translateY(0)}80%{transform:scale(1)}100%{transform:scale(.97) translateY(-8px)}}
@keyframes kolegePubLeaf{0%{transform:rotate(-12deg) scale(.7)}40%{transform:rotate(8deg) scale(1.15)}70%{transform:rotate(-4deg) scale(1)}100%{transform:rotate(0) scale(1)}}

/* Stories strip — one circle per subject, rose ring = unseen posts */
.kolege-stories{display:flex;gap:.7rem;overflow-x:auto;padding:.15rem .1rem .3rem;scrollbar-width:none}
.kolege-stories::-webkit-scrollbar{display:none}
.kolege-story{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;flex-shrink:0;width:3.6rem}
.kolege-story .ks-ring{width:3.1rem;height:3.1rem;border-radius:999px;padding:2px;background:#e2e8f0;display:grid;place-items:center;transition:transform .15s ease}
.kolege-story:hover .ks-ring{transform:scale(1.07)}
.kolege-story.has-new .ks-ring{background:conic-gradient(#fb7185,#be123c,#fda4af,#fb7185)}
.kolege-story .ks-av{width:100%;height:100%;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;border:2px solid #fff}
.kolege-story .ks-name{max-width:100%;font-size:.6rem;font-weight:700;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kolege-story .ks-count{position:absolute;top:-.1rem;right:.15rem;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:999px;background:#be123c;color:#fff;font-size:.58rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.kolege-stories.is-compact{padding:0;gap:.4rem;max-width:14rem}
.kolege-stories.is-compact .kolege-story{width:2.1rem}
.kolege-stories.is-compact .ks-ring{width:1.9rem;height:1.9rem}
.kolege-stories.is-compact .ks-av{font-size:.55rem;border-width:1px}
.kolege-stories.is-compact .ks-count{top:-.25rem;right:-.15rem;transform:scale(.85)}
html.dark-theme .kolege-story .ks-ring{background: #3b3a37}
html.dark-theme .kolege-story.has-new .ks-ring{background: conic-gradient(#fb7185,#be123c,#fda4af,#fb7185)}
html.dark-theme .kolege-story .ks-av{border-color: #2a2927}
html.dark-theme .kolege-story .ks-name{color:#94a3b8}

/* End-of-feed pager card (momentum hand-off) */
.kolege-page-end{align-items:center;text-align:center;gap:.6rem}
.kolege-page-end .ket{font-weight:800;font-size:1.05rem;color:#0f172a}
.kolege-page-end .kes{font-size:.8rem;color:#94a3b8;margin-bottom:.4rem}
html.dark-theme .kolege-page-end .ket{color:#e2e8f0}

/* Nav badge: N new posts since last visit */
.kolege-nav-badge{
  margin-left:auto;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;
  background:#dc2626;color:#fff;font-size:.62rem;font-weight:800;
  display:inline-grid;place-items:center;flex-shrink:0;
}

/* Double-tap heart overlay: pops up from the centre of the card and fades. */
.kolege-heart-pop{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.4);
  font-size:3rem;pointer-events:none;z-index:5;opacity:0;
  animation:kolegeHeartPop .8s ease-out forwards;
}
@keyframes kolegeHeartPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  60%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-80%) scale(.9)}
}
/* Burst of mini hearts flying off on double-tap (Instagram juice) */
.kolege-heart-mini{
  position:absolute;left:50%;top:42%;font-size:1rem;pointer-events:none;z-index:5;opacity:0;
  animation:kolegeHeartMini .9s ease-out forwards;
}
@keyframes kolegeHeartMini{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-120px))) scale(1.1) rotate(var(--dr,0deg))}
}

/* Dark theme */
html.dark-theme .kolege-hero{background: linear-gradient(180deg,rgba(190,18,60,.16) 0%,#2a2927 85%);border-color: rgba(251,113,133,.35)}
html.dark-theme .kolege-hero-text .kt{color:#fda4af}
html.dark-theme .kolege-hero-text .kd{color:#94a3b8}
html.dark-theme .kolege-refresh{background: rgba(190,18,60,.25);color:#fda4af}
html.dark-theme .kolege-chapter-chip{background: rgba(190,18,60,.25);color:#fda4af}
html.dark-theme .kolege-composer,
html.dark-theme .kolege-card{background: #2a2927;border-color: #3b3a37}
html.dark-theme .kolege-composer textarea,
html.dark-theme .kolege-reply-input{background: #1f1e1d;border-color: #3b3a37;color:#e2e8f0}
html.dark-theme .kolege-name{color:#e2e8f0}
html.dark-theme .kolege-text{color:#cbd5e1}
html.dark-theme .kolege-badge{background: #3b3a37;color:#94a3b8}
html.dark-theme .kolege-badge.is-hot{background: #be123c;color:#fff}
.kolege-badge.is-echo{background:#EEEDFE;color:#3C3489}
html.dark-theme .kolege-badge.is-echo{background: #312e81;color:#c7d2fe}
.kolege-badge.is-discover{background:#FAEEDA;color:#633806}
html.dark-theme .kolege-badge.is-discover{background: #78350f;color:#fde68a}

/* 🔥 Vruće teme — trending-term chips above the feed */
.kolege-trending{align-items:center}
.kolege-trending-label{font-size:.66rem;font-weight:800;color:#be123c;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
html.dark-theme .kolege-trending-label{color:#fda4af}
.kolege-chip .ktc{opacity:.55;font-size:.62rem;margin-left:.25rem;font-weight:700}

/* 💡 Slične rasprave — pre-post duplicate lookup inside the composer */
#kolege-similar:empty{display:none}
/* Height-capped with its own scroll so the sheet's Objavi button NEVER
   gets pushed off-screen (small phones, keyboard open). The sheet's own
   gap handles spacing — no extra margins that would shift the layout. */
#kolege-similar{display:flex;flex-direction:column;gap:.35rem;max-height:9rem;overflow-y:auto;flex-shrink:1;min-height:0}
.kolege-similar-title{font-size:.66rem;font-weight:800;color:#0C447C;text-transform:uppercase;letter-spacing:.03em}
html.dark-theme .kolege-similar-title{color:#93c5fd}
.kolege-similar-item{display:flex;flex-direction:column;flex-shrink:0;gap:.15rem;text-align:left;padding:.5rem .65rem;border:1px solid #dbeafe;border-radius:.65rem;background:#eff6ff;cursor:pointer;transition:background .15s}
.kolege-similar-item:hover{background:#dbeafe}
html.dark-theme .kolege-similar-item{background: #1e3a5f;border-color: #1e40af}
html.dark-theme .kolege-similar-item:hover{background: #1e40af}
.kolege-similar-item .ksi-text{font-size:.8rem;color:#0f172a;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.dark-theme .kolege-similar-item .ksi-text{color:#e2e8f0}
.kolege-similar-item .ksi-meta{font-size:.68rem;font-weight:700;color:#2563eb}
html.dark-theme .kolege-similar-item .ksi-meta{color:#93c5fd}

/* 🔥 Daily streak chip (Snapchat DNA) — hero + pager HUD */
.kolege-streak{
  display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .65rem;border-radius:999px;
  background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;font-size:.78rem;font-weight:800;
  flex-shrink:0;cursor:default;
}
.kolege-streak.is-cold{opacity:.55;filter:grayscale(.4)}
.kolege-streak.is-compact{padding:.2rem .5rem;font-size:.72rem}
html.dark-theme .kolege-streak{background: #431407;border-color: #7c2d12;color:#fdba74}

/* ⚑ Admin moderation rail card */
.kolege-mod-card{border-color:#fbbf24 !important}
.kolege-mod-item{display:flex;flex-direction:column;gap:.15rem;padding:.4rem 0;border-top:1px solid #f1f5f9}
.kolege-mod-item:first-of-type{border-top:none}
.kolege-mod-item .kmi-text{font-size:.75rem;color:#334155;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kolege-mod-item .kmi-meta{font-size:.64rem;color:#94a3b8;font-weight:700}
.kolege-mod-item .kmi-actions{display:flex;gap:.4rem}
.kolege-mod-item .kmi-actions button{font-size:.66rem;font-weight:800;color:#059669;padding:.15rem .4rem;border-radius:.4rem;background:#ecfdf5}
.kolege-mod-item .kmi-actions button.is-del{color:#dc2626;background:#fef2f2}
html.dark-theme .kolege-mod-item{border-top-color: #3b3a37}
html.dark-theme .kolege-mod-item .kmi-text{color:#cbd5e1}
html.dark-theme .kolege-mod-item .kmi-actions button{background: #064e3b;color:#6ee7b7}
html.dark-theme .kolege-mod-item .kmi-actions button.is-del{background: #450a0a;color:#fca5a5}

/* ↳ Top-reply preview (FB "top comment" peeking out of the thread) */
.kolege-top-reply{
  display:flex;align-items:baseline;gap:.4rem;width:100%;text-align:left;
  margin-top:.55rem;padding:.4rem .6rem;border-radius:.55rem;
  background:#f8fafc;border-left:3px solid #e2e8f0;cursor:pointer;
  transition:background .15s;
}
.kolege-top-reply:hover{background:#f1f5f9}
.kolege-top-reply .ktr-name{font-size:.72rem;font-weight:800;color:#475569;white-space:nowrap;flex-shrink:0}
.kolege-top-reply .ktr-text{font-size:.78rem;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kolege-top-reply .ktr-hearts{font-size:.66rem;color:#be123c;font-weight:700;flex-shrink:0;margin-left:auto}
html.dark-theme .kolege-top-reply{background: #1f1e1d;border-left-color: #3b3a37}
html.dark-theme .kolege-top-reply:hover{background: #2a2927}
html.dark-theme .kolege-top-reply .ktr-name{color:#cbd5e1}
html.dark-theme .kolege-top-reply .ktr-text{color:#94a3b8}

/* ⬆ Live "N novih objava" pill (floating, IG/Twitter return hook) */
.kolege-new-pill{
  position:absolute;top:.9rem;left:50%;transform:translateX(-50%);z-index:60;
  padding:.45rem 1rem;border-radius:999px;background:#be123c;color:#fff;
  font-size:.78rem;font-weight:800;box-shadow:0 8px 20px -6px rgba(190,18,60,.5);
  animation:kolegePillIn .25s ease;
}
@keyframes kolegePillIn{from{transform:translate(-50%,-120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* 🚫 Blocks + 🗑 purge (privacy rail card) */
.kolege-unblock{margin-left:auto;font-size:.66rem;font-weight:800;color:#2563eb;padding:.15rem .4rem;border-radius:.4rem;background:#eff6ff}
html.dark-theme .kolege-unblock{background: #1e3a5f;color:#93c5fd}
.kolege-purge{margin-top:.6rem;font-size:.68rem;font-weight:800;color:#dc2626;padding:.25rem .5rem;border-radius:.45rem;background:#fef2f2;align-self:flex-start}
html.dark-theme .kolege-purge{background: #450a0a;color:#fca5a5}

/* ⚡ Flash (24h ephemeral) countdown badge */
.kolege-badge.is-flash{background:#FEF9C3;color:#854D0E}
.kolege-badge.is-uspjeh{background:#FEF3C7;color:#92400E}
html.dark-theme .kolege-badge.is-uspjeh{background:#78350f;color:#fde68a}
html.dark-theme .kolege-badge.is-flash{background: #713f12;color:#fef08a}

/* 📊 Anketa — options before voting, FB-style result bars after */
.kolege-poll{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.kolege-poll-opt{
  text-align:left;padding:.5rem .8rem;border:1.5px solid #fda4af;border-radius:.65rem;
  background:#fff;color:#be123c;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s;
}
@media (hover: hover) and (pointer: fine) { .kolege-poll-opt:hover{background:#fff1f2;border-color:#be123c} }
html.dark-theme .kolege-poll-opt{background: #2a2927;border-color: #9f1239;color:#fda4af}
@media (hover: hover) and (pointer: fine) { html.dark-theme .kolege-poll-opt:hover{background: #4c0519} }
.kolege-poll-bar{
  position:relative;overflow:hidden;text-align:left;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;border:1px solid #e2e8f0;border-radius:.65rem;background:#f8fafc;
  font-size:.82rem;cursor:pointer;
}
.kolege-poll-bar .kpb-fill{
  position:absolute;inset:0 auto 0 0;background:#fecdd3;transition:width .35s ease;
}
.kolege-poll-bar .kpb-label{position:relative;color:#334155;font-weight:600;min-width:0;overflow-wrap:anywhere}
.kolege-poll-bar .kpb-pct{position:relative;margin-left:auto;color:#64748b;font-weight:800;font-size:.72rem;flex-shrink:0}
.kolege-poll-bar.is-mine{border-color:#be123c}
.kolege-poll-bar.is-mine .kpb-label{color:#be123c;font-weight:800}
html.dark-theme .kolege-poll-bar{background: #1f1e1d;border-color: #3b3a37}
html.dark-theme .kolege-poll-bar .kpb-fill{background: #4c0519}
html.dark-theme .kolege-poll-bar .kpb-label{color:#cbd5e1}
html.dark-theme .kolege-poll-bar.is-mine .kpb-label{color:#fda4af}
.kolege-poll-total{font-size:.68rem;color:#94a3b8;font-weight:700}

/* Poll editor in the composer (2-4 option inputs) */
#kolege-poll-editor{display:flex;flex-direction:column;gap:.4rem}
#kolege-poll-editor.hidden{display:none}
.kolege-poll-input{
  width:100%;border:1px solid #e2e8f0;border-radius:.6rem;padding:.45rem .7rem;
  font-size:.85rem;outline:none;background:#fff;color:#0f172a;
}
.kolege-poll-input:focus{border-color:#fda4af;box-shadow:0 0 0 3px rgba(244,63,94,.14)}
.kolege-poll-input.is-missing{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.kolege-poll-add{
  align-self:flex-start;font-size:.72rem;font-weight:800;color:#be123c;
  padding:.2rem .3rem;border-radius:.4rem;
}
.kolege-poll-add.hidden{display:none}
html.dark-theme .kolege-poll-input{background: #1f1e1d;border-color: #3b3a37;color:#e2e8f0}
html.dark-theme .kolege-poll-add{color:#fda4af}

/* Kviz-echo card (wrong answers resurfacing inside the feed) */
.kolege-review{border-color:#CECBF6 !important;background:linear-gradient(180deg,#EEEDFE 0%,#ffffff 60%)}
html.dark-theme .kolege-review{background: linear-gradient(180deg,rgba(83,74,183,.2) 0%,#2a2927 60%)}
.kolege-review-head{font-size:.66rem;font-weight:800;color:#3C3489;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.4rem}
html.dark-theme .kolege-review-head{color:#c7d2fe}
.kolege-review-q{font-size:.95rem;font-weight:600;color:#0f172a;line-height:1.5;margin-bottom:.7rem}
html.dark-theme .kolege-review-q{color:#e2e8f0}
.kolege-review-opts{display:flex;flex-direction:column;gap:.4rem}
.kolege-review-opt{
  text-align:left;padding:.55rem .8rem;border-radius:.7rem;border:1px solid #CECBF6;
  background:#fff;font-size:.85rem;color:#334155;transition:border-color .15s ease,background .15s ease;
}
@media (hover: hover) and (pointer: fine) { .kolege-review-opt:hover{border-color:#534AB7;background:#EEEDFE} }
html.dark-theme .kolege-review-opt{background: #1f1e1d;border-color: #3C3489;color:#cbd5e1}
.kolege-review-result{font-size:.9rem;padding:.6rem .8rem;border-radius:.7rem}
.kolege-review-result.is-ok{background:#E1F5EE;color:#0F6E56;font-weight:700}
.kolege-review-result.is-no{background:#FCEBEB;color:#791F1F}
html.dark-theme .kolege-review-result.is-ok{background: rgba(15,110,86,.25);color:#9FE1CB}
html.dark-theme .kolege-review-result.is-no{background: rgba(163,45,45,.25);color:#F7C1C1}
html.dark-theme .kolege-pill{background: #1f1e1d;border-color: #3b3a37;color:#94a3b8}
html.dark-theme .kolege-pill.active{background: rgba(190,18,60,.25);border-color: #fb7185;color:#fda4af}
html.dark-theme .kolege-thread{background: #16202f;border-top-color: #3b3a37}
html.dark-theme .kolege-av-anon{background: #3b3a37}
html.dark-theme .kolege-empty .ket{color:#e2e8f0}
html.dark-theme .kolege-empty-head{background: linear-gradient(180deg,rgba(190,18,60,.2) 0%,#2a2927 100%);border-color: rgba(251,113,133,.3)}

/* Subject tag on posts in "svoj krug" (Querencia circle tag: dot + name);
   fixed pastel colour per subject, tapping it enters that subject's circle. */
.kolege-subject-tag{
  display:inline-flex;align-items:center;gap:.35rem;padding:.16rem .6rem;
  border-radius:999px;border:none;
  font-size:.66rem;font-weight:800;flex-shrink:1;min-width:0;
  max-width:11rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:filter .15s ease;
}
.kolege-subject-tag:hover{filter:brightness(.95)}
.kolege-subject-tag .dot{width:.45rem;height:.45rem;border-radius:999px;flex-shrink:0;opacity:.7}

/* Genius-level badge next to the author's name (Liga genija credibility) */
.kolege-level{
  display:inline-flex;align-items:center;gap:.2rem;padding:.08rem .5rem;
  border-radius:999px;background:#EEEDFE;color:#3C3489;
  font-size:.62rem;font-weight:800;white-space:nowrap;
}
.kolege-level.is-bot{background:#ffe4e6;color:#9f1239}
html.dark-theme .kolege-level{background: #312e81;color:#c7d2fe}
html.dark-theme .kolege-level.is-bot{background: rgba(190,18,60,.3);color:#fda4af}

/* Best answer */
.kolege-best-badge{
  display:inline-flex;align-items:center;gap:.2rem;padding:.08rem .5rem;
  border-radius:999px;background:#E1F5EE;color:#0F6E56;font-size:.62rem;font-weight:800;
}
.kolege-mark-best{
  font-size:.64rem;font-weight:700;color:#94a3b8;border:1px dashed #cbd5e1;
  border-radius:999px;padding:.06rem .5rem;transition:color .15s ease,border-color .15s ease;
}
.kolege-mark-best:hover{color:#0F6E56;border-color:#5DCAA5}
.kolege-best-reply{background:#f0fdf7;border-radius:.7rem;padding:.4rem;margin:-.4rem}
.kolege-bot-reply{background:#fff7f7;border-radius:.7rem;padding:.4rem;margin:-.4rem}
html.dark-theme .kolege-best-reply{background: rgba(15,110,86,.15)}
html.dark-theme .kolege-bot-reply{background: rgba(190,18,60,.12)}
html.dark-theme .kolege-best-badge{background: rgba(15,110,86,.3);color:#9FE1CB}

/* Bot avatar (Inženjerko reply) */
.kolege-av-bot{background:#ffe4e6;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.kolege-av-bot img{width:80%;height:80%;object-fit:contain}

/* Hero stats (social proof) */
.kolege-hero-stats{display:block;font-size:.68rem;font-weight:700;color:#9f1239;margin-top:.25rem}
html.dark-theme .kolege-hero-stats{color:#fda4af}

/* Desktop layouts (Facebook shape): nav rail · centred feed · info rail.
   ≥1240px = 3 columns; 1024–1239 = feed + right rail; below = one column. */
.kolege-wrap-wide{max-width:62rem;display:grid;grid-template-columns:minmax(0,1fr) 15rem;
  gap:.85rem;align-items:start}
.kolege-wrap-3col{max-width:78rem;display:grid;
  grid-template-columns:14rem minmax(0,46rem) 15rem;
  gap:1rem;align-items:start;justify-content:center}
.kolege-wrap-wide .kolege-main,
.kolege-wrap-3col .kolege-main{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.kolege-wrap:not(.kolege-wrap-wide):not(.kolege-wrap-3col) .kolege-main{display:flex;flex-direction:column;gap:.85rem}

/* Left nav rail items (krugovi + prečaci) */
.kolege-nav-item{
  display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;
  padding:.42rem .55rem;border-radius:.7rem;font-size:.8rem;font-weight:600;color:#475569;
  transition:background .15s ease,color .15s ease;
}
.kolege-nav-item:hover{background:#fff1f2;color:#be123c}
.kolege-nav-item.active{background:#ffe4e6;color:#9f1239;font-weight:800}
.kolege-nav-item .knd{width:.8rem;height:.8rem;border-radius:999px;flex-shrink:0}
.kolege-nav-item .kni{width:.9rem;text-align:center;flex-shrink:0}
.kolege-nav-item .knl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.dark-theme .kolege-nav-item{color:#94a3b8}
html.dark-theme .kolege-nav-item:hover{background: rgba(190,18,60,.15);color:#fda4af}
html.dark-theme .kolege-nav-item.active{background: rgba(190,18,60,.28);color:#fda4af}

/* Right rail extras */
.kolege-rail-card .krc-row.is-me{background:#fff1f2;border-radius:.5rem;padding:.15rem .35rem;margin:0 -.35rem}
html.dark-theme .kolege-rail-card .krc-row.is-me{background: rgba(190,18,60,.2)}
.kolege-fact .krc-body{font-style:italic;color:#475569}
.kolege-fact .krc-src{margin-top:.35rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#94a3b8}
html.dark-theme .kolege-fact .krc-body{color:#cbd5e1}
.kolege-rail{display:flex;flex-direction:column;gap:.85rem;position:sticky;top:.5rem}
.kolege-rail-card{background:#fff;border:1px solid #e2e8f0;border-radius:1.1rem;padding:.85rem 1rem}
.kolege-rail-card .krc-title{font-size:.7rem;font-weight:800;color:#64748b;margin-bottom:.5rem}
.kolege-rail-card .krc-row{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:#334155;padding:.15rem 0}
.kolege-rail-card .krc-n{color:#94a3b8;font-weight:700}
.kolege-rail-card .krc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.kolege-rail-card .krc-xp{color:#3C3489;font-weight:800;font-size:.72rem}
.kolege-rail-card .krc-body{font-size:.75rem;color:#64748b;line-height:1.5}
html.dark-theme .kolege-rail-card{background: #2a2927;border-color: #3b3a37}
html.dark-theme .kolege-rail-card .krc-row{color:#cbd5e1}
html.dark-theme .kolege-rail-card .krc-xp{color:#c7d2fe}

/* Composer subject chips in "svoj krug" (pick the target circle) */
/* LIST ZA OBJAVU: DVA PITANJA, DVA GLASA (Drago, 11.09.: „ovo triba
   elegantnije, ovo popis predmeta i krugova i uopce o cemu je").

   Vrsta objave i predmet dijelili su iste klase, pa je sheet postavljao dva
   razlicita pitanja istim glasom i bez ijednog natpisa. Deset predmeta k
   tome lomilo se u pet neravnih redova i zauzimalo pola lista, iako je to
   sporedan izbor: vrsta objave je ono sto covjek bira, predmet je najcesce
   onaj na kojem vec jest.

   Nista se ne skriva iza skrolanja ni iza „prikazi jos" (Drago, 04.09.:
   „nervira me scroll") — samo se stisne i utisa. */
/* BEZ VLASTITIH MARGINA: `.kolege-sheet` je flex s `gap`, pa je margina ovdje
   bila dvostruko razmicanje (gap .7rem + margina .55rem). Drago, 11.09.:
   „Kolege mi taj dio malo da je kompaktnije". */
.kolege-polje{margin:0}
.kolege-polje-nat{font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#94a3b8;margin:0 0 .18rem .15rem}
html.dark-theme .kolege-polje-nat{color:#64748b}
.kolege-chips--predmeti{gap:.3rem}
.kolege-chip--tih{font-size:.66rem;font-weight:600;padding:.22rem .55rem;
  border-radius:999px;border-color:#eef1f5;color:#94a3b8;max-width:9.5rem}
.kolege-chip--tih.active{font-weight:800}
html.dark-theme .kolege-chip--tih{border-color:#2b2a28;color:#7c8595}
/* Predmet skupljen u jedan redak (Drago, 11.09.): ime izabranog + strelica.
   Popis svih upisanih trosio je pola lista na izbor koji se rijetko mijenja. */
.kolege-predmet-gumb{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;width:100%;padding:.42rem .7rem;border:1px solid #eef1f5;
  border-radius:11px;background:#fff;color:#475569;font-size:.78rem;font-weight:700;
  text-align:left;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.kolege-predmet-gumb:hover{border-color:#fda4af;color:#be123c}
.kolege-predmet-ime{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kolege-predmet-str{flex:0 0 auto;color:#94a3b8;font-size:.9rem;line-height:1}
html.dark-theme .kolege-predmet-gumb{background:#1f1e1d;border-color:#3b3a37;color:#cbd5e1}
html.dark-theme .kolege-predmet-str{color:#64748b}

/* Buba stoji iznad svega i sjedila je tocno preko „Prilozi datoteku" u ovom
   listu (slika, 11.09.). Ne gasi se (mora biti na svim ekranima, 13.08.) nego
   se dok je list otvoren die u zamucenu pozadinu iznad njega: dno lista drze
   privitak lijevo i „Objavi" desno, pa ondje nema mjesta ni s jedne strane.
   Specificnost mora nadglasati `#bug-report-btn` iz bug-report.js. */
body.kolege-list-otvoren #bug-report-btn{top:84px;bottom:auto;left:12px;opacity:.3}

.kolege-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.kolege-chip{
  padding:.3rem .75rem;border-radius:999px;border:1px solid #e2e8f0;
  background:#fff;color:#64748b;font-size:.72rem;font-weight:700;
  max-width:12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.kolege-chip:hover{border-color:#fda4af;color:#be123c}
.kolege-chip.active{background:#ffe4e6;border-color:#fda4af;color:#9f1239}
html.dark-theme .kolege-subject-tag{background: #1f1e1d;border-color: #3b3a37;color:#94a3b8}
html.dark-theme .kolege-subject-tag:hover{background: rgba(190,18,60,.2);border-color: #fb7185;color:#fda4af}
html.dark-theme .kolege-chip{background: #1f1e1d;border-color: #3b3a37;color:#94a3b8}
html.dark-theme .kolege-chip.active{background: rgba(190,18,60,.25);border-color: #fb7185;color:#fda4af}

/* Reaction pill micro-interactions */
.kolege-pill:active{transform:scale(.92)}
.kolege-pill.active{animation:kolegePillPop .25s ease}
@keyframes kolegePillPop{0%{transform:scale(.88)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

/* List entrance: cards slide up with a small stagger */
#kolege-feed .kolege-card{animation:kolegeCardIn .35s ease both}
#kolege-feed .kolege-card:nth-child(2){animation-delay:.05s}
#kolege-feed .kolege-card:nth-child(3){animation-delay:.1s}
#kolege-feed .kolege-card:nth-child(4){animation-delay:.15s}
#kolege-feed .kolege-card:nth-child(5){animation-delay:.2s}
#kolege-feed .kolege-card:nth-child(n+6){animation-delay:.25s}
@keyframes kolegeCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── "Vrti" pager (Querencia krug.tsx: TikTok-style vertical snap) ── */
.kolege-pager-host{overflow:hidden !important;position:relative}
.kolege-pager{
  position:absolute;inset:0;overflow-y:auto;
  /* mandatory = strict one-post-per-screen paging (same as Learn Now). The old
     "stuck between posts" bug came from posts taller than the viewport; fixed by
     scrolling a tall post INSIDE its own page (overflow-y:auto below) so no page
     exceeds the snapport (Ivo, 2026-07-21). */
  scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;
}
.kolege-pager::-webkit-scrollbar{display:none}
.kolege-page{
  height:100%;overflow-y:auto;scroll-snap-align:start;scroll-snap-stop:normal;
  display:flex;align-items:center;justify-content:safe center;
  padding:1.2rem;position:relative;
  background:radial-gradient(circle at 50% 18%, #fff1f2 0%, transparent 62%);
}
.kolege-page-card{
  width:100%;max-width:40rem;max-height:86%;overflow-y:auto;
  background:#fff;border:1px solid #fecdd3;border-radius:1.3rem;
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;
  box-shadow:0 24px 48px -20px rgba(190,18,60,.28);
}
.kolege-page-text{
  font-size:1.05rem;line-height:1.65;color:#334155;
  white-space:pre-wrap;overflow-wrap:break-word;
}
.kolege-av-lg{width:2.75rem;height:2.75rem;font-size:.85rem}
.kolege-pager-hud{
  position:absolute;top:.8rem;right:.9rem;z-index:10;
  display:flex;align-items:center;gap:.5rem;
}
.kolege-pager-counter{
  background:rgba(255,255,255,.88);border:1px solid #fecdd3;color:#be123c;
  font-weight:800;font-size:.72rem;padding:.28rem .7rem;border-radius:999px;
  backdrop-filter:blur(4px);
}
.kolege-pager-exit{
  width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.88);border:1px solid #fecdd3;color:#be123c;
  font-size:.85rem;font-weight:700;backdrop-filter:blur(4px);
  transition:background .15s ease;
}
.kolege-pager-exit:hover{background:#ffe4e6}
.kolege-swipe-hint{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  font-size:.72rem;font-weight:700;color:#be123c;
  background:rgba(255,255,255,.88);border:1px solid #fecdd3;
  padding:.3rem .85rem;border-radius:999px;backdrop-filter:blur(4px);
  animation:kolegeHintBounce 1.7s ease-in-out infinite;pointer-events:none;
}
@keyframes kolegeHintBounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(6px)}
}
.kolege-fab{
  position:absolute;bottom:1.1rem;right:1.1rem;z-index:10;
  width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;
  background:#be123c;color:#fff;font-size:1.15rem;
  box-shadow:0 12px 24px -8px rgba(190,18,60,.55);
  transition:transform .15s ease,background .15s ease;
}
.kolege-fab:hover{transform:translateY(-2px) scale(1.05);background:#9f1239}

/* Desktop/list compose entry: + button floating bottom-CENTRE of the view
   (the composer card is gone — this is the one way to start a post). */
.kolege-fab-center{
  left:50%;right:auto;transform:translateX(-50%);
  width:3.4rem;height:3.4rem;font-size:1.6rem;font-weight:700;line-height:1;
  bottom:1.2rem;
}
.kolege-fab-center:hover{transform:translateX(-50%) translateY(-2px) scale(1.05)}

/* News items in the right rail */
.kolege-news-item{display:block;padding:.3rem 0;border-bottom:1px solid #f1f5f9}
.kolege-news-item:last-child{border-bottom:none}
.kolege-news-item .knt{display:block;font-size:.75rem;font-weight:600;color:#334155;line-height:1.35;
  transition:color .15s ease}
.kolege-news-item:hover .knt{color:#be123c}
.kolege-news-item .kns{display:block;margin-top:.1rem;font-size:.6rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:#94a3b8}
html.dark-theme .kolege-news-item{border-bottom-color: #3b3a37}
html.dark-theme .kolege-news-item .knt{color:#cbd5e1}


/* Mobile compose sheet (✏️ FAB u pageru — pager nema inline composer) */
.kolege-sheet-backdrop{
  position:fixed;inset:0;z-index:10060;background:rgba(15,23,42,.45);
  display:flex;align-items:flex-end;justify-content:center;
}
.kolege-sheet{
  width:100%;max-width:40rem;background:#fff;border-radius:1.3rem 1.3rem 0 0;
  /* Zbijeno (Drago, 11.09.): gornji razmak i razmak medu blokovima spusteni,
     jer je list s vise predmeta gurao „Objavi" prema rubu. */
  padding:0.5rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:.5rem;
  box-shadow:0 -18px 40px -18px rgba(15,23,42,.4);
  animation:kolegeSheetUp .25s ease;
}
@keyframes kolegeSheetUp{from{transform:translateY(30%);opacity:.4}to{transform:none;opacity:1}}
.kolege-sheet-grip{width:2.6rem;height:.3rem;border-radius:999px;background:#e2e8f0;margin:.1rem auto .2rem}
.kolege-sheet textarea{
  width:100%;border:1px solid #e2e8f0;border-radius:.7rem;padding:.6rem .8rem;
  font-size:.95rem;resize:none;overflow:hidden;outline:none;background:#fff;color:#0f172a;
}
.kolege-sheet textarea:focus{border-color:#fda4af;box-shadow:0 0 0 3px rgba(244,63,94,.14)}
html.dark-theme .kolege-sheet{background: #2a2927}
html.dark-theme .kolege-sheet-grip{background: #3b3a37}
html.dark-theme .kolege-sheet textarea{background: #1f1e1d;border-color: #3b3a37;color:#e2e8f0}

/* Dok je bilo koji sheet (composer/hub) otvoren, "+" nema sto raditi. */
body.kolege-sheet-open .kolege-fab,
body.kolege-sheet-open .kolege-fab-center{display:none}

/* Compose window: bottom sheet on phones, centred modal on desktop.
   (Must come AFTER the base rules above — same specificity.) */
@media (min-width: 769px){
  .kolege-sheet-backdrop{align-items:center;padding:1.5rem}
  .kolege-sheet{max-width:34rem;border-radius:1.3rem}
  .kolege-sheet-grip{display:none}
}

/* Pager — dark theme */
html.dark-theme .kolege-page{background: radial-gradient(circle at 50% 18%, rgba(190,18,60,.18) 0%, transparent 62%)}
html.dark-theme .kolege-page-card{background: #2a2927;border-color: rgba(251,113,133,.35);box-shadow:0 24px 48px -20px rgba(0,0,0,.5)}
html.dark-theme .kolege-page-text{color:#cbd5e1}
html.dark-theme .kolege-pager-counter,
html.dark-theme .kolege-pager-exit,
html.dark-theme .kolege-swipe-hint{background: rgba(30,41,59,.88);border-color: rgba(251,113,133,.35);color:#fda4af}

/* ---- Privici (📎) ------------------------------------------------------
   Slike se vide na kartici; PDF je redak, jer ga server servira kao
   preuzimanje (inline PDF bi vrtio svoj JavaScript na našoj domeni). */
.kolege-att-picker{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.kolege-att-add{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  font-size:.78rem;font-weight:700;color:#be123c;
  border:1px dashed #fecdd3;border-radius:10px;padding:.35rem .7rem;
}
.kolege-att-add:hover{background:#fff1f2}
.kolege-att-add input{display:none}
.kolege-att-hint{font-size:.68rem;color:#94a3b8}
#kolege-att-list{display:flex;flex-wrap:wrap;gap:.35rem;width:100%}
.kolege-att-chip{
  display:inline-flex;align-items:center;gap:.35rem;max-width:100%;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;
  padding:.22rem .3rem .22rem .6rem;font-size:.72rem;color:#475569;
}
.kolege-att-chip .kac-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11rem}
.kolege-att-chip .kac-size{color:#94a3b8;font-variant-numeric:tabular-nums}
.kolege-att-chip button{
  width:1.15rem;height:1.15rem;border-radius:999px;border:0;cursor:pointer;
  background:#e2e8f0;color:#475569;font-size:.65rem;line-height:1;
}
.kolege-att-err{font-size:.7rem;font-weight:700;color:#be123c;width:100%}

.kolege-att-wrap{display:flex;flex-direction:column;gap:.4rem}
.kolege-att-thumbs{display:grid;gap:.3rem}
.kolege-att-thumbs.n1{grid-template-columns:1fr}
.kolege-att-thumbs.n2{grid-template-columns:1fr 1fr}
.kolege-att-thumbs.n3{grid-template-columns:repeat(3,1fr)}
.kolege-att-thumb{
  padding:0;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;
  background:#f8fafc;cursor:zoom-in;display:block;
}
.kolege-att-thumbs.n1 .kolege-att-thumb img{max-height:22rem;object-fit:contain}
.kolege-att-thumb img{width:100%;height:100%;max-height:11rem;object-fit:cover;display:block}
.kolege-att-file{
  display:flex;align-items:center;gap:.45rem;text-decoration:none;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
  padding:.5rem .7rem;font-size:.8rem;font-weight:600;color:#334155;
}
.kolege-att-file:hover{background:#f1f5f9}
.kolege-att-file .kaf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kolege-att-file .kaf-size{margin-left:auto;font-size:.7rem;font-weight:500;
  color:#94a3b8;font-variant-numeric:tabular-nums;flex-shrink:0}

html.dark-theme .kolege-att-hint{color:#64748b}
html.dark-theme .kolege-att-add{color:#fda4af;border-color: rgba(251,113,133,.4)}
html.dark-theme .kolege-att-add:hover{background: rgba(190,18,60,.15)}
html.dark-theme .kolege-att-chip,
html.dark-theme .kolege-att-file,
html.dark-theme .kolege-att-thumb{background: #1f1e1d;border-color: #3b3a37;color:#cbd5e1}
html.dark-theme .kolege-att-file{color:#cbd5e1}
html.dark-theme .kolege-att-file:hover{background: #2a2927}
html.dark-theme .kolege-att-chip button{background: #3b3a37;color:#cbd5e1}

/* Mobile: tighter padding, pills wrap under the text */
@media (max-width: 640px){
  .kolege-wrap{padding:.7rem}
  .kolege-hero{padding:.85rem .9rem}
  .kolege-hero-icon{width:2.8rem;height:2.8rem}
  .kolege-page{padding:.7rem}
  .kolege-page-card{max-height:92%}
}

/* ============================================================================
   TABLET PORTRAIT (768–880) — the Material "medium" window class, done the
   way the industry does it: richer than a phone, calmer than a desktop.
   Two-column rhythm, feature cards keep their labels, the knowledge map
   shows its full chip grid, the leaderboard shows a real ladder. Phones
   (≤767) and desktop (≥881) are untouched. Placed at the end of the sheet
   so it wins the phone-rail and icon-only rules it upgrades.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 880px) {
    /* Brzi pristup: 2×2 cards WITH title + description (desktop look). */
    .dash-quick { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.7rem !important; }
    .dash-quick-card {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        aspect-ratio: auto !important;
        max-width: none !important; max-height: none !important;
        width: auto !important;
        justify-self: stretch !important;
        gap: 0.7rem !important;
        padding: 0.7rem 0.9rem !important;
        border-radius: 1rem !important;
    }
    .dash-quick-icon { width: 3.2rem !important; height: 3.2rem !important; margin: 0 !important; }
    .dash-quick-text { display: block !important; }

    /* Home courses: 2-col grid of full row-style cards, not the 108px rail. */
    .home-courses-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .home-course-card {
        flex: 1 1 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 0.75rem !important;
        padding: 0.7rem 0.9rem !important;
        border-radius: 1rem !important;
    }
    .home-course-card.hcc-add { justify-content: center !important; }
    .hcc-icon { width: 2.4rem !important; height: 2.4rem !important; }
    .hcc-main { width: auto !important; gap: 0.3rem !important; }
    .hcc-title {
        display: block !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        line-height: 1.25 !important;
        min-height: 0 !important;
    }

    /* Mapa znanja: the full chip grid (there is room), not the thin bar.
       auto-fill at desktop chip size — the base 6-col template scaled the
       squares up to ~120px on a full-width tablet card and the map ate
       half the screen. */
    #dash-map-widget .kmap {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important;
    }
    #dash-map-widget .kmap-cell { max-height: 56px; }
    #dash-map-widget .kmap-foot { display: block !important; }
    .kbar { display: none !important; }
}

/* ── Native safe-area (iOS + Android edge-to-edge) ─────────
   html.safe-inset means "the webview draws UNDER the system bars, so the page
   owes them padding". Was `.ios-native` until 2026-07-19; renamed rather than
   duplicated because every rule under it is the same idea and Android now
   needs exactly that. Anything genuinely iOS-only belongs on the separate
   `.ios-native` class, which native-bridge.js still sets.

   WHAT PUTS THE WEBVIEW UNDER THE BARS (Capacitor 8, SystemBars.java):
       shouldPassthroughInsets = webViewMajorVersion >= 140 && hasViewportCover
   Both halves are required. `hasViewportCover` is Capacitor evaluating the
   page's own viewport meta for viewport-fit=cover, and it only ever runs when
   SystemBars' insetsHandling is left at its default "css" — setting it to
   "disable" returns early from both onDOMReady and the inset listener, which
   is how an earlier attempt silently did nothing at all.
   When the check fails, Android 15+ takes the other branch: Capacitor pads the
   webview below the bars and ZEROES the safe-area insets, so the page cannot
   colour the strip by any means. That is the pre-140 fallback, and it is fine
   — it just looks like the old build.

   Everything reads --safe-top / --safe-bottom rather than env() directly, so
   native-bridge.js can override the pair (iOS probe fallback) and the whole
   chrome follows. Also covers the fixed-position chrome the in-flow header
   can't. --safe-area-inset-* is what Capacitor injects; env() is the standard
   spelling; the fallback chain takes whichever is real. */
.safe-inset {
    --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    /* How much of the top inset the chrome is allowed to claw back. iOS's
       59pt Dynamic Island inset has room to spare, so 8px goes back to the
       header (Ivo, 2026-07-18). Android's inset is exactly the bar height and
       the system paints that bar OPAQUE over our content — clawing anything
       back there hides content instead of tightening it. It cost the first
       line of every two-line course title in the header. */
    --safe-top-trim: 0px;
}
/* 8->16->22->36px: Ivo wants the header icon pushed right to the top on iPhone
   (2026-07-21) — but ONLY while the status bar is hidden. That request was made
   in full screen, where the 59pt Dynamic-Island inset is empty space and the
   claw-back is free. With the clock VISIBLE the same 36px drags the header up
   UNDER it: on 21.08. Ivo could not tap ☰ or his avatar at all, and turning
   full screen off did not help because the trim applied there too ("kad san
   iskljucija full screen, nije mi se iskljucija"). Now iOS follows the same
   rule Android already did one line below: claw back only when there is no bar
   to collide with. */
.safe-inset.ios-native.bars-hidden { --safe-top-trim: 36px; }
/* In full screen (immersive.js .bars-hidden) the status bar is hidden, so the
   header no longer needs to reserve its full height — the ☰ + view icon sat in
   a ~48px empty band on top (Ivo, 2026-07-20). Claw most of it back on Android
   so they ride higher; a ~24px margin stays so a swipe-peeked status bar never
   overlaps them, and any top cutout is cleared. iOS keeps the conservative 8px
   because of the Dynamic Island. */
.bars-hidden:not(.ios-native) { --safe-top-trim: 24px; }
/* Hamburger (☰) enlarged to match the view icon on BOTH platforms — text-lg is a
   Tailwind !important utility so this needs !important too (Ivo, 2026-07-21). */
#nav-menu-btn span { font-size: 1.5rem !important; line-height: 1 !important; }
/* Header now shows just the current screen's icon next to ☰ (app.js
   updateHeaderIcon), not the full name — keeps the top strip compact on both
   platforms (Ivo, 2026-07-20). Sized to sit on the same baseline whether it's
   an emoji glyph or a course's <img>/<svg> badge. */
.hdr-view-icon { display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; line-height: 1; height: 2.0rem; min-width: 2.0rem;
    /* ZNAK, NE GUMB (Drago QA 16.09.2026.): kucica uz ☰ izgledala je kao gumb
       Pocetna, a po odluci od 03.09. ikona namjerno nema radnju. Bez pokazivaca
       i bez dodira vise nista ne obecava klik; razmak je odvaja od izbornika. */
    cursor: default; pointer-events: none; margin-left: .25rem; }  /* toned down from 1.85 (Drago, 2026-07-23): the enlarged icon bulked up the header and ate the vertical space the adaptive-zoom column assumes */
/* Izvan naslovnice predmeta ikona je gumb natrag na nju (Ivo, 21.09.2026.). */
.hdr-view-icon.hdr-view-gumb { cursor: pointer; pointer-events: auto;
    background: none; border: 0; padding: 0; border-radius: var(--ing-radius); }
.hdr-view-icon img, .hdr-view-icon svg { width: 1.8rem !important; height: 1.8rem !important; object-fit: contain; }
.hdr-view-icon > span { display: inline-flex; align-items: center; justify-content: center; }
/* !important is REQUIRED here, not defensive styling: the header carries the
   Tailwind utilities h-16 / py-3 and this build's Tailwind emits utilities as
   !important, so they beat any plain rule regardless of specificity. That is
   why mobile.css's long-standing `#app-header { padding-top: env(...) }` never
   moved the header even once viewport-fit made env() report real values. */
/* The 59pt Dynamic-Island inset already gives plenty of breathing room, so
   the header ROW itself shrinks on iOS (3.25rem instead of 4rem) and gives
   back 8px of the inset — 103px total instead of 123px, with the title
   sitting ~20px higher, while still clearing the island. Ivo, 2026-07-18. */
.safe-inset #app-header {
    padding-top: calc(var(--safe-top) - var(--safe-top-trim)) !important;
    min-height: calc(2.6rem + var(--safe-top) - var(--safe-top-trim)) !important;
    height: auto !important;
}
.safe-inset #sidebar-nav { top: calc(2.6rem + var(--safe-top) - var(--safe-top-trim)) !important; }
.safe-inset #sidebar { padding-top: var(--safe-top) !important; }
.safe-inset #app-top-scrim { height: calc(var(--safe-top) + 64px); }
.safe-inset #setup-screen,
.safe-inset #info-modal,
.safe-inset #stats-modal,
.safe-inset #all-continue-modal,
.safe-inset #all-progress-modal,
.safe-inset #auth-modal,
.safe-inset #leaderboard-modal,
.safe-inset #settings-modal,
.safe-inset [id$="-overlay"].fixed {
    padding-top: var(--safe-top) !important;
}
/* Genius Run is a fixed inset:0 overlay whose own purple top bar carries the
   ✕. At 14px padding that button landed INSIDE the status-bar inset, hidden
   under the system bar and untappable. Two classes + an id so this beats the
   .ng-topbar rule nizgenija.js injects at runtime (later in the cascade). */
.safe-inset #view-nizgenija .ng-topbar {
    padding-top: calc(14px + var(--safe-top));
}
.safe-inset .streak-toast { top: calc(var(--safe-top) + 18px); }
/* Image-lightbox close X is inline-styled top:14px → needs the bump. */
.safe-inset #mob-lb-x { top: calc(var(--safe-top) + 14px) !important; }
/* Immersive reading (immersive.js): a tap on empty space clears the screen.
   The header is handled by hideAppHeader/revealAppHeader so this does not
   fight the hide-on-scroll logic; what is left is the bottom chrome. Hidden
   rather than removed so nothing reflows and the content does not jump. */
/* The top scrim exists ONLY to soften content sliding under the clock. Where
   the status bar is hidden (immersive.js sets .bars-hidden) there is no clock,
   so it just greys out the first line of real text for nothing (Ivo,
   2026-07-19: the faded "ubrzanje → trzaj"). It is an overlay ABOVE the views,
   which is why it washes text out; the Learn Now! feed's own top fade is a
   background-image BEHIND its content and cannot, so that one is left alone.
   Nothing else hides with the bars — the header answers to scrolling and the
   chat bar always stays (Ivo: "on ode triba stat uvik"). */
html.bars-hidden #app-top-scrim { display: none !important; }

/* Failure notice inside a mode view (api.js _showSendError). Deliberately
   plain and calm — it replaces a blank screen, so it must read as "this one
   request failed", not as an app crash. */
.send-error-box {
    max-width: 32rem;
    margin: 2rem auto;
    padding: 0.9rem 1.1rem;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.875rem;
    text-align: center;
}
html.dark-theme .send-error-box {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.25);
    color: #fecaca;
}
/* Izlaz iz te obavijesti kad je uzrok „za ovo treba racun" (Ivo, 10.09.2026.).
   Bez njega je gost gledao crvenu kutiju na praznom ekranu bez ijedne tipke. */
.send-error-cta {
    margin-top: 0.7rem;
    padding: 0.45rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}
.send-error-cta:hover { background: #1d4ed8; }

/* Home-indicator clearance for the bottom-anchored bits.
   These are the flip side of the passthrough: once the webview draws under the
   bars, anything anchored to the bottom of the viewport lands UNDER the gesture
   bar. Found on the emulator (WebView 150) — the setup footer's "Let's go"
   button was half-swallowed by it, so a first-run user on a modern WebView
   could not finish onboarding. Pad the element itself rather than the screen
   container so its background still fills the inset strip. */
.safe-inset #input-area { padding-bottom: calc(1.25rem + var(--safe-bottom)) !important; }
/* Two ids on purpose: mobile.css compacts this bar with
   `#setup-screen .p-6.border-t` (id + TWO classes), which outranks a plain
   `.safe-inset #setup-actions` no matter the source order — the first attempt
   at this fix computed to 11.2px instead of 48px and changed nothing. */
.safe-inset #setup-screen #setup-actions {
    padding-bottom: calc(0.7rem + var(--safe-bottom)) !important;
}
/* Kolege pins its swipe hint and compose button 1.1rem off the bottom of a
   full-height page — less than the gesture bar's own inset, so both sat
   underneath it. */
.safe-inset .kolege-swipe-hint,
.safe-inset .kolege-fab { bottom: calc(1.1rem + var(--safe-bottom)); }
.safe-inset .kolege-fab-center { bottom: calc(1.2rem + var(--safe-bottom)); }

/* Quiz: centre the question card in the viewport (Ivo, 2026-07-18).
   A single MCQ card is much shorter than a phone screen, so it used to sit
   pinned under the header with the bottom half of the screen blank. `safe
   center` centres it only while it FITS — once the card is taller than the
   viewport (long question, opened explanation, drill feedback, the results
   screen) the keyword degrades to flex-start, so the top never becomes
   unreachable the way plain `center` would make it. Engines without `safe`
   drop the declaration entirely and keep today's top-aligned layout.

   :not(.hidden) is LOAD-BEARING — same guard as #view-home/#view-dashboard
   above. An ID selector outranks Tailwind's `.hidden`, so a bare `#view-quiz
   { display:flex }` pins the quiz permanently visible: every hide call
   (switchMode, openMentor, openKolegeGlobal) sets the class and nothing
   happens, and the configurator bleeds through the chat / Kolege / mentor
   views stacked in the same absolute-inset-0 container. */
#view-quiz:not(.hidden) {
    display: flex;
    flex-direction: column;
}
/* Center the single quiz card when it fits, but let a TALL card (long question
   + expanded explanation) scroll normally so "Dalje" at the bottom is always
   reachable. `justify-content: safe center` was the intent, but iOS Safari's
   support for the `safe` keyword is unreliable and it degraded to plain
   `center`, which clips the overflow → the next button was unreachable on tall
   cards (Ivo, 2026-07-22, iPhone). `margin-block:auto` centers when there's
   spare room and collapses to 0 (top-aligned, scrollable) when there isn't —
   well-supported everywhere. Only-child so it never fights sibling widgets. */
#view-quiz:not(.hidden) > *:only-child {
    margin-block: auto;
}
/* PROVJERA SE CENTRIRA ISTO KAO KVIZ (Drago, 10.09.: „kartica zadnjeg ekrana
   na ispitu je vise put gore, treba bit po sredini identicno kvizu"). Isti par
   pravila i iz istih razloga kao gore: `:not(.hidden)` da skrivanje i dalje
   radi, `margin-block:auto` samo na jedinom djetetu, pa se visoka kartica
   normalno skrola umjesto da se odsijece. */
#view-exam:not(.hidden) {
    display: flex;
    flex-direction: column;
}
#view-exam:not(.hidden) > *:only-child {
    margin-block: auto;
}

/* ============================================================================
   WORKED-EXAMPLES PROGRESSIVE REVEAL (P6 v2.9, 2026-07-27)
   ----------------------------------------------------------------------------
   `.wex-step` = one authored sub-goal (`**Set up.**`, `**Evaluate.**`,
   `**Interpret.**`) auto-wrapped in <details> by installProgressiveReveal.
   First step opens by default; the rest are click-to-reveal — student sees
   ONE step at a time, motivated to attempt before peeking. Applies to every
   worked-example Solution card, no per-example authoring.

   Also styles native <details><summary> from author-side `structure: chunked`
   / `reveal-final` / `predict-first` — same visual treatment so a mixed
   feed reads uniformly.
   ============================================================================ */
details.wex-step,
.chunk-card details {
    border: 1px solid #cbd5e1;                 /* slate-300 */
    border-radius: 10px;
    margin: 12px 0;
    background: #f8fafc;                        /* slate-50 */
    overflow: hidden;
}
details.wex-step[open],
.chunk-card details[open] {
    background: #ffffff;
    border-color: #93c5fd;                      /* blue-300 */
    box-shadow: 0 1px 2px rgba(30, 58, 138, 0.06);
}
details.wex-step > summary,
.chunk-card details > summary {
    list-style: none;                           /* kill default marker */
    cursor: pointer;
    user-select: none;
    padding: 6px 12px 6px 32px;
    font-weight: 600;
    /* Explicit, and BELOW body size. Without it the title inherited the
       card's font — which the reader's font-size setting scales — so on a
       phone the step titles came out as big as headings and each box ate a
       chunk of the screen before showing any content (Ivo, 2026-07-27:
       "Naslovi ovih prozora su pre veliki za mobitel"). */
    font-size: 0.875rem;
    line-height: 1.3;
    color: #1e40af;                             /* blue-800 */
    /* Transparent, not a filled plate. The blue bar read as a heavy band
       across every box and, stacked four deep in one solution, dominated the
       screen (Ivo, 2026-07-27: "ja nebi da je placa nego prozirna, i manja
       neka bude, manja po visini"). The chevron and the weight carry the
       affordance now. */
    background: transparent;
    position: relative;
    transition: background 120ms ease;
    min-height: 34px;
    display: flex;
    align-items: center;
}
details.wex-step > summary::-webkit-details-marker,
.chunk-card details > summary::-webkit-details-marker { display: none; }
details.wex-step > summary::before,
.chunk-card details > summary::before {
    content: '';
    position: absolute;
    left: 12px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid #3b82f6;            /* blue-500 */
    border-bottom: 2px solid #3b82f6;
    transform: translateY(-70%) rotate(-45deg); /* ▶ */
    transition: transform 180ms ease;
}
details.wex-step[open] > summary::before,
.chunk-card details[open] > summary::before {
    transform: translateY(-30%) rotate(45deg);  /* ▼ */
}
details.wex-step > summary:hover,
.chunk-card details > summary:hover { background: rgba(219, 234, 254, .55); }
details.wex-step > *:not(summary):not(mjx-container),
.chunk-card details > *:not(summary):not(mjx-container) {
    padding-left: 14px;
    padding-right: 14px;
}
/* Display math gets its gutter from ONE place, wherever it sits. It is a
   block that scrolls sideways when the expression is too wide, and it was
   the only element in a card with no horizontal padding of its own — so it
   ran flush into the box border and read as spilling out (Ivo, 2026-07-27:
   "formule nekad ispadaju van kutije"). Excluded from the rule above so the
   two never stack. */
/* A lead-in phrase and the equation under it are ONE sentence — "Izračunajte"
   has the formula as its object. Marked ends the paragraph, MathJax adds its
   own margin and padding, and the two ended up 27 px apart, reading as two
   disconnected blocks (Ivo, 2026-07-27: "ovo izracunajte pa limes u sljedecoj
   liniji mi cudno izgleda"). Close the gap when the equation directly follows
   text; equations after other equations keep their breathing room. */
/* Selector shaped to OUT-SPECIFY `.chunk-container .bg-white
   mjx-container[display="true"] { margin: 1.5em 0 !important }` a few hundred
   lines up — that rule is (0,3,1) with !important, so the shorter
   `.chunk-card p + …` lost silently and measured 27 px anyway. */
.chunk-container .bg-white p + mjx-container[display="true"] {
    margin-top: 0.35em !important;
    padding-top: 2px !important;
}

/* Centre a displayed equation — but SAFELY. MathJax emits an <svg>, a block
   box, so the container's text-align:center never moved it and every formula
   sat flush left. `margin: 0 auto` centres it when it fits AND collapses to 0
   when the formula is wider than the card, so an over-wide expression still
   starts at the left edge and stays reachable by scrolling. Plain
   text-align/flex centring would push its start off-screen with no way to
   scroll back — the phone case Ivo flagged. */
.chunk-card mjx-container[display="true"] > svg,
.chunk-card mjx-container[display="true"] > mjx-math {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.chunk-card mjx-container[display="true"] {
    /* !important because MathJax injects its own sheet for this element and
       wins on plain declarations — the same reason overflow-x above is
       marked. Without it the gutter silently computed to 0. */
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
details.wex-step > *:last-child,
.chunk-card details > *:last-child { padding-bottom: 10px; }

/* Dark theme */
html.dark-theme details.wex-step,
html.dark-theme .chunk-card details {
    background: #2a2927;                        /* slate-800 */
    border-color: #475569;                      /* slate-600 */
}
html.dark-theme details.wex-step[open],
html.dark-theme .chunk-card details[open] {
    background: #1f1e1d;                        /* slate-900 */
    border-color: #60a5fa;                      /* blue-400 */
}
html.dark-theme details.wex-step > summary,
html.dark-theme .chunk-card details > summary {
    color: #93c5fd;                             /* blue-300 */
    background: linear-gradient(to right, #2a2927, #1f1e1d 60%);
}
html.dark-theme details.wex-step > summary:hover,
html.dark-theme .chunk-card details > summary:hover { background: #3b3a37; }

/* =============================================================
   IN-APP GUIDED TOUR ("Pomoć") — coach-mark spotlight + mascot
   All motion CSS-native; a single box-shadow dims around the
   spotlight. Respects prefers-reduced-motion.
   ============================================================= */
html.itour-lock, html.itour-lock body { overflow: hidden; }

.itour-root { position: fixed; inset: 0; z-index: 100000;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s; }
.itour-root.is-open { opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .22s ease; }

/* The spotlight: transparent window, huge shadow dims everything else,
   thin accent ring + a soft pulsing halo draw the eye. */
/* Position (left/top/width/height) is driven by the Web Animations API in
   tour.js — NOT a CSS transition, which froze at the start value when the
   value changed in the same tick as a synchronous scrollIntoView. */
/* Code spans in the CONTENTS list. Subchapter names are authored with
   backticks (`if` / `elif` / `else`) and the TOC is not markdown-rendered, so
   they used to print as literal quote marks (Ivo, 2026-08-06). Same grey chip
   as the body's `.prose code`, one size down — a contents row is already
   smaller type, and the body rule does not reach here. */
.toc-code {
    background-color: #f1f5f9; color: #1e293b;
    padding: 0.1em 0.35em; border-radius: 4px;
    font-size: 0.88em; font-weight: 600;
}
html.dark-theme .toc-code { background-color: #3b3a37; color: #e2e8f0; }

/* ---- "Pitaj Inženjerka" under a subchapter (skripta) ----
   Unrolls under the Kviz row; stays out of the layout until the head is
   tapped, so the reading page is unchanged for anyone who never asks. */
.subchat-panel {
    margin: -0.35rem 0 0.9rem;
    border: 1px solid #e0f2fe;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #f8fdff 0%, #ffffff 60%);
    padding: 0.6rem 0.7rem;
}
.subchat-thread { display: flex; flex-direction: column; gap: 0.45rem; }
.subchat-thread:empty { display: none; }
.subchat-turn {
    max-width: 92%; padding: 0.45rem 0.65rem; border-radius: 0.7rem;
    font-size: 0.86rem; line-height: 1.5; white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.subchat-me {
    align-self: flex-end; background: #eef2ff; border: 1px solid #e0e7ff;
    color: #1e1b4b;
}
.subchat-ing {
    align-self: flex-start; background: #ffffff; border: 1px solid #e2e8f0;
    color: #0f172a;
}
.subchat-ing.is-waiting { color: #94a3b8; font-style: italic; }
/* Tap-through to the subchapter Inženjerko pointed at. */
.subchat-go {
    display: inline-flex; align-items: center; margin-top: 0.45rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    background: #0284c7; color: #fff;
    font-size: 0.76rem; font-weight: 700; line-height: 1.4;
}
.subchat-go:hover { background: #0369a1; }
/* Alatna traka chata podpoglavlja: za sada jedan gumb (prepis gradiva), ali
   je red zato sto ce ih biti vise — kviz i slike stizu. */
.subchat-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
/* JEDAN RED CIPOVA, NE TRI OKVIRA (Drago QA 22.09.2026.: „previse, dva okvira
   za chat, pitaj Inzenjerka na dva tri mista"). Prepis i „Pitaj Inzenjerka"
   stoje jedan do drugoga, istog kroja; pozdrav iznad njih je goli tekst bez
   okvira, jer je uputa, ne poruka. */
.subchat-red { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.5rem; }
.subchat-red .subchat-tools { margin-top: 0; }
.subchat-tools--vrh { margin-top: 0; margin-bottom: 0.5rem; }
.subchat-red .subchat-jos {
    display: inline-flex; align-items: center; width: auto; margin-top: 0;
    padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.subchat-turn.subchat-hello { background: transparent; border: 0; padding: 0.1rem 0.2rem; max-width: 100%; }
.subchat-tool {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    border: 1px solid #bae6fd; background: #f0f9ff; color: #0369a1;
    font-size: 0.78rem; font-weight: 700; line-height: 1.3;
}
.subchat-tool:hover { background: #e0f2fe; }
.subchat-tool[disabled] { opacity: .55; }
.subchat-vrzn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; width: 100%; position: relative; }
/* Dugi pritisak ne oznacava tekst ni ne otvara sistemski Copy/Look Up (Ivo, 25.09.2026.). */
.subchat-vrzn, .subchat-vrzn-i, .subchat-vpop {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.subchat-vmenu.subchat-vpop {
    position: absolute; z-index: 20; display: flex; flex-direction: column; min-width: 8.5rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem; padding: 0.25rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}
.subchat-vmenu.subchat-vpop button {
    text-align: left; padding: 0.45rem 0.65rem; border-radius: 0.45rem;
    font-size: 0.85rem; font-weight: 600; color: #0f172a; background: transparent; border: 0;
}
.subchat-vmenu.subchat-vpop button:hover, .subchat-vmenu.subchat-vpop button:focus-visible { background: #f1f5f9; }
.subchat-vrzn-i {
    min-width: 1.9rem; height: 1.9rem; padding: 0 0.35rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
button.subchat-vrzn-i:hover { background: #f0f9ff; border-color: #bae6fd; }
.subchat-vrzn-i.je-sad { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.subchat-stilovi { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; margin-top: 0.1rem; }
.subchat-tool--stil { background: #fff; }
.subchat-tool--stil.je-odabran { background: #e0f2fe; border-color: #7dd3fc; }
.subchat-stil-vlastito { display: flex; gap: 0.4rem; align-items: flex-end; width: 100%; }
.subchat-stil-unos {
    flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: 0.85rem;
    padding: 0.4rem 0.7rem; border-radius: 1rem; border: 1px solid #cbd5e1; background: #fff;
}
.subchat-stil-unos:focus { outline: 2px solid #7dd3fc; outline-offset: 0; border-color: #7dd3fc; }
.subchat-tool--undo { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
html.dark-theme .subchat-tool { background: rgba(2,132,199,.16); border-color: rgba(56,189,248,.35); color: #7dd3fc; }
html.dark-theme .subchat-tool--undo { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.3); color: #cbd5e1; }
.subchat-ask, .bil-ask { display: flex; gap: 0.4rem; margin-top: 0.55rem; align-items: flex-end; }
/* PRAZNO POLJE NIJE PORUKA (Ivo, 12.09.2026.). Dok student nista ne pita, pod
   pozdravom stoji samo poziv; traka dolazi na njegov dodir. */
.subchat-jos, .bil-jos {
    display: block; margin-top: .6rem; width: 100%;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .7rem;
    color: #1d4ed8; cursor: pointer; font-size: .82rem; font-weight: 600;
    padding: .5rem .7rem; text-align: center;
}
html.dark-theme .subchat-jos, html.dark-theme .bil-jos {
    background: rgba(37,99,235,.16); border-color: rgba(37,99,235,.35); color: #93c5fd;
}
/* TRAKA ZA UNOS NIJE DIO POVIJESTI (Ivo, 12.09.2026.: „kad korisnik pocme
   pitat inzenjerka, neka se povise tipkovnice otvori ovaj za prikaz unosa dio
   a ne da on bude dio chat povijesti").

   Bila je `sticky` unutar ploce razgovora, pa je i izgledala kao njen zadnji
   redak — i, dok ispod nje nije bilo jos toka, znala ostati nasred stranice.
   Sada je `fixed` preko dna ekrana: iznad tipkovnice, izvan povijesti.

   `--kb-lift` postavlja JS: iOS ne smanjuje raspored kad tipkovnica izade, pa
   bi dno bilo ISPOD tipkovnice. Na webu i Androidu ostaje 0. */
.subchat-ask.is-docked, .bil-ask.is-docked {
    position: sticky; z-index: 8;
    bottom: var(--kb-lift, 0px);
    margin: 0;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
}
html.dark-theme .subchat-ask.is-docked, html.dark-theme .bil-ask.is-docked {
    background: rgba(15, 23, 42, 0.98); border-top-color: rgba(148,163,184,.25);
}
/* Podignuta iznad tipkovnice: bez uvlake za traku za dom (nje ondje nema) i s
   tjesnjim rubom, da polje sjedne na tipke umjesto da lebdi nad njima. */
.subchat-ask.is-docked.is-lifted { padding: 0.35rem 0.7rem 0.35rem; }
/* Dok je tipkovnica gore traka je fiksna i sjedi na njoj (api.js _subchatFiksna). */
.subchat-ask.is-docked.je-fiksna, .bil-ask.is-docked.je-fiksna {
    position: fixed; left: 0; right: 0; bottom: auto; z-index: 70;
}
.subchat-ask.is-docked.is-lifted .subchat-input { padding-top: 0.3rem; padding-bottom: 0.3rem; }
/* UHODAVANJE SE NE OZNACAVA (Ivo, 11.09.2026.: „ode mogu oznacavat tekst, ne
   to nigdi dopustit u onboardingu"). Dugi pritisak po pozdravu je dizao
   Androidov „Copy / Translate / Select all" preko oblacica — izbornik za
   kopiranje naseg uvodnog teksta, i to na ekranu na kojem se nema sto kopirati.
   Polja za unos su iznimka: ondje se tekst mora moci oznaciti i ispraviti. */
#mascot-splash, .v2-overlay, #login-gate {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#mascot-splash input, #mascot-splash textarea,
.v2-overlay input, .v2-overlay textarea,
#login-gate input, #login-gate textarea {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* RAZGOVOR KAO ZASEBNA STRANICA NA TINTI (Ivo, 11.09.2026.: „za eInk,
   inzenjerko bi mozda mogao biti zasebna skroz stranica (…) jer e-ink ima
   ghosting"). Sloj 65: iznad citaca (60), ispod ploce sadrzaja i vrata za
   prijavu. Bijela ploha bez prozirnosti — na tinti se poluprozirno slaze u
   sivilo koje ostaje i poslije osvjezavanja. */
body.eink-look .subchat-panel.je-stranica {
    position: fixed; inset: 0; z-index: 65; margin: 0; border-radius: 0;
    background: #fff; border: 0;
    padding: 10px 14px calc(10px + var(--safe-bottom, 0px));
    display: flex; flex-direction: column; overflow: hidden;
}
body.eink-look .subchat-panel.je-stranica .subchat-thread {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
body.eink-look .subchat-natrag {
    align-self: flex-start; background: transparent; border: 1.5px solid #000;
    border-radius: .35rem; color: #000; cursor: pointer;
    font-size: .85rem; font-weight: 700; padding: .3rem .7rem; margin-bottom: .6rem;
}
/* REDAK S INZENJERKOM SE LIJEPI NA VRH DOK TRAJE RAZGOVOR (Ivo, 11.09.2026.:
   „ostaje ista glava i sve isto, samo se 'snipa' ovaj redak s inzenjerkom na
   vrh ekrana ili odma ispod glavne trake").

   Prva izvedba je dodavala NOVU, lebdecu glavu gore lijevo — krivo citanje:
   glava se ne dodaje, postojeci redak se lijepi. `top: 0` je vrh SKROLERA, a
   on pocinje ispod glavne trake, pa je to tocno trazeno mjesto. Podloga je
   neprozirna jer ispod retka prolazi gradivo. */
/* NASLOV POTPOGLAVLJA SE NE SKRIVA POD ZALIJEPLJENIM RETKOM (Drago QA
   16.09.2026.): „Nastavi bez racuna" dok citac nije otvoren skrolao je naslov
   tocno na vrh skrolera, a ondje stoji zalijepljeno podnozje prethodnog
   potpoglavlja, pa je naslov („Pravokutni i polarni momenti tromosti") bio
   odrezan ispod trake. Odmak vrijedi za svako skrolanje na te naslove. */
[id^="btn-chunk-"], [id^="chunk-"] { scroll-margin-top: 60px; }
.subchapter-quiz-footer.je-zalijepljen {
    position: sticky; top: 0; z-index: 6;
    background: #fff; margin-left: -.25rem; margin-right: -.25rem;
    padding-left: .25rem; padding-right: .25rem;
}
html.dark-theme .subchapter-quiz-footer.je-zalijepljen { background: #1f1e1d; }
/* ZALIJEPLJENI REDAK IDE ISPOD ZAGLAVLJA, NE POD NJEGA (Drago QA 22.09.2026.,
   slika s telefona: prazna bijela traka pod zaglavljem, tekst odrezan ispod
   nje). Zaglavlje citaca lebdi PREKO toka (`html.ec-aktivan #app-header`,
   z 61) i vraca se na potez gore; redak s glavom stoji na `top: 0` skrolera,
   koji pocinje 1.4rem od vrha ekrana, pa ga zaglavlje (visine `--ec-vrh`)
   pokrije i ostavi vidljiv samo njegov donji rub: tu bjelinu je Drago vidio.
   Dok je zaglavlje na ekranu, redak sjeda tocno ispod njega. */
html.ec-aktivan.ec-traka #eink-citac.ec-skrol .subchapter-quiz-footer.je-zalijepljen {
    top: max(0px, calc(var(--ec-vrh, 49px) - 1.4rem));
}

/* ---- BILJESKE (biljeske.js, Ivo 11.09.2026.) -------------------------------
   Izbornik nad oznacenim tekstom: tamna pilula kod prsta, kao sistemski
   izbornik — a ne traka na dnu, koju oko mora traziti. Hvataljke ostaju
   sustavne, ovo je samo ponuda. */
.bil-izbornik {
    position: fixed; z-index: 300; display: flex; gap: 2px;
    background: #0f172a; border-radius: .6rem; padding: .25rem;
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .55);
}
.bil-izbornik button {
    background: transparent; border: 0; color: #fff; cursor: pointer;
    font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: .4rem;
}
.bil-izbornik .bil-izb-da { background: rgba(255, 255, 255, .14); }
.bil-izbornik button:active { background: rgba(255, 255, 255, .28); }

/* Olovka stoji u retku s Inzenjerkovom glavom, bez brojke: redak popisa je
   sam pocetak zapisanog (Ivo, 11.09.2026.). */
.bil-cip {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
    font-size: .72rem; font-weight: 700; line-height: 1;
    padding: .35rem .55rem; border-radius: .55rem;
    background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c;
}
.bil-cip.je-na { background: #ffedd5; border-color: #fdba74; }
.bil-upute { font-size: .85rem; line-height: 1.45; color: #64748b; padding: .6rem .75rem; }
.bil-cip-ik { font-size: .85rem; line-height: 1; }
@keyframes bil-titraj { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-3px); } }
.bil-cip.je-nova { animation: bil-titraj .32s ease 2; }
html.dark-theme .bil-cip { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); color: #fbbf24; }

/* SVAKA BILJESKA U SVOM ZUTOM OKVIRU (Ivo, 11.09.2026.: „neka svaki i ovi sta
   nisu expandane biljeske budu u svom okviru zutome"). Ista jantarna obitelj
   kao olovka, trag u tekstu i kartica u chatu — po boji se odmah vidi da je
   sve to jedna stvar. Zatvorena i otvorena razlikuju se samo po tome koliko
   pokazuju, ne po boji. */
.bil-popis { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0 .2rem; }
.bil-red {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: .6rem;
    padding: .38rem .6rem;
}
.bil-sazetak {
    font-size: .8rem; line-height: 1.45; color: #92400e; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Ista olovka kao na cipu i na kartici u chatu — po njoj se redak cita kao
   studentov zapis, a ne kao dio gradiva. */
.bil-sazetak::before, .bil-red.je-otvorena .bil-puna::before {
    content: '✎'; color: #b45309; margin-right: .35rem; font-size: .78rem;
}
/* Puni tekst i radnje se vide tek kad je biljeska otvorena; zadnja je otvorena
   sama od sebe (v. `osvjezi`). */
.bil-puna, .bil-radnje { display: none; }
.bil-red.je-otvorena { background: #fef3c7; border-color: #fcd34d; }
.bil-red.je-otvorena .bil-sazetak { display: none; }
.bil-red.je-otvorena .bil-puna {
    display: block; font-size: .82rem; line-height: 1.6; color: #78350f;
    cursor: pointer;
}
.bil-red.je-otvorena .bil-radnje {
    display: flex; gap: .9rem; padding: .45rem 0 .1rem;
    border-top: 1px solid rgba(180, 83, 9, .22); margin-top: .45rem;
}
.bil-radnje button {
    background: transparent; border: 0; cursor: pointer; padding: 0;
    font-size: .74rem; font-weight: 700; color: #b45309;
}
.bil-radnje .bil-obrisi { color: #a8a29e; }
html.dark-theme .bil-red { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .32); }
html.dark-theme .bil-red.je-otvorena { background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .45); }
html.dark-theme .bil-sazetak, html.dark-theme .bil-red.je-otvorena .bil-puna { color: #fcd34d; }
html.dark-theme .bil-radnje button { color: #fbbf24; }
body.eink-look .bil-red { background: none; border-color: #000; }
body.eink-look .bil-red.je-otvorena { background: none; border-color: #000; border-width: 2px; }
body.eink-look .bil-sazetak, body.eink-look .bil-red.je-otvorena .bil-puna,
body.eink-look .bil-radnje button { color: #000; }
.bil-mat { font-style: normal; }

/* Odabir u tijeku: ista topla boja kao gotova biljeska, samo jaca — vidi se
   sto ce biti zapisano prije nego se potvrdi. */
.bil-izbor {
    background: #fde68a; color: inherit; border-radius: 2px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
html.dark-theme .bil-izbor { background: rgba(245, 158, 11, .45); }
/* PLOHA ODABIRA (Ivo, 11.09.2026.: „neka sve lipo zazuti izmedu pocetka i
   kraja cili redak po cijeloj visini"). Crta se iz pravokutnika raspona, pa
   pokriva cijelu visinu retka i ide kroz podebljano, formule i odlomke — bez
   diranja gradiva. Ne prima dodir: ispod nje je tekst. */
.bil-ploha {
    position: fixed; z-index: 298; pointer-events: none;
    background: #fde68a; border-radius: 2px; mix-blend-mode: multiply;
}
html.dark-theme .bil-ploha { background: rgba(245, 158, 11, .45); mix-blend-mode: screen; }
body.eink-look .bil-ploha { background: rgba(0, 0, 0, .18); mix-blend-mode: normal; }

/* RAZGOVOR UNUTAR BILJESKE (Ivo, 12.09.2026.: „neka svaka biljeska bude svoj
   chat zasebni i samo se u biljeskama vidi"). Zatvara se s biljeskom, jer je
   njen — zato i zivi u `.bil-red`, a ne u ploci Inzenjerkovog chata. */
.bil-chat { margin-top: .55rem; border-top: 1px solid rgba(180, 83, 9, .22); padding-top: .55rem; }
.bil-nit { display: flex; flex-direction: column; gap: .45rem; }
.bil-unos {
    flex: 1; min-width: 0; resize: none; font: inherit; font-size: .85rem;
    border: 1px solid #cbd5e1; border-radius: .7rem; padding: .45rem .6rem;
    background: #fff; color: #0f172a;
}
html.dark-theme .bil-unos { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.bil-posalji {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px;
    background: #2563eb; color: #fff; cursor: pointer; font-size: 1rem;
}

/* Hvataljke: kruzici na krajevima odabira, po jedan na svakom kraju (Ivo,
   11.09.2026.: „oznaceni rubovi s nekim kruzicem da se moze jos malo
   prilagodit sirina bilješke"). Sustavne smo izgubili zajedno sa sustavnom
   trakom, pa su ovo nase. */
.bil-hvat {
    position: fixed; z-index: 299; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border-radius: 999px; background: #2563eb; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .35); touch-action: none;
}
body.eink-look .bil-hvat { background: #000; border-color: #fff; box-shadow: none; }

/* TRAG BILJESKE U GRADIVU (Ivo, 11.09.2026.: „u eink, biljeska je samo
   podcrtano a ovdje da je oznaceno u neku boju ljepo zuckasto"). U boji je
   topla podloga bez obruba; na tinti podloga postaje siva mrlja koja preziva
   osvjezavanje ploce, pa ondje ostaje samo crta ispod. */
/* ISPUNA BEZ RUPA IZMEDU REDAKA (Ivo, 12.09.2026.: „volija bi da kad je
   oznaceno da bude skroz oznaceno s bojom ispuna skroz bez rupa izmedu
   redaka").

   Pozadina na tekstu pokriva samo visinu SLOVA, a prored ostaje bijel — pa je
   oznaceni odlomak izgledao kao niz traka. Okomita ispuna u visini poluproreda
   spusti pozadinu do ruba retka, i redci se dodiruju. `box-decoration-break`
   je uvjet: bez njega se ispuna crta samo na prvom i zadnjem retku.

   `.bil-oznaka-el` je formula ili slicica koja je upala u odabir: nema tekstni
   cvor pa je omatanje ne moze dohvatiti, a bez boje bi usred oznake ostala
   bijela rupa (biljeske.js, `_obojiBezteksta`). */
.bil-oznaka, .bil-oznaka-el {
    background: #fef3c7; color: inherit; border-radius: 0;
    /* `--bil-ispuna` MJERI biljeske.js: točno pola razlike između proreda i
       prirodne visine retka. Time se susjedni redci iste bilješke dodiruju
       (bez bijelih crta), a blok ne izlazi izvan svog retka — pa dvije bliske
       bilješke ostaju razdvojene punim bijelim pojasom (Ivo, 12.09.2026.).
       `.2em` je uzmak dok mjera ne stigne. */
    padding: var(--bil-ispuna, .2em) 0;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* RUBNI RECI BILJEŠKE GUBE PO 1,6 px (Ivo, 12.09.2026.: „izmedju zadnjeg retka
   prvog komentara i prvog retka drugog komentara malo vertikalnog razmaka
   dodat"). Unutar bilješke se ništa ne mijenja — susjedni redci i dalje nose
   punu ispunu s obje strane — a dvije bilješke jedna ispod druge razdvaja
   3,2 px bijelog. Razrede dijeli biljeske.js, koji oznaku reže po retku; bez
   toga ih CSS ne bi mogao razlikovati. */
.bil-oznaka.bil-pocetak { padding-top: max(0px, calc(var(--bil-ispuna, .2em) - 1.6px)); }
.bil-oznaka.bil-kraj { padding-bottom: max(0px, calc(var(--bil-ispuna, .2em) - 1.6px)); }
.bil-oznaka-el { display: inline-block; padding-left: 0; padding-right: 0; }
html.dark-theme .bil-oznaka, html.dark-theme .bil-oznaka-el {
    background: rgba(245, 158, 11, .28);
}
body.eink-look .bil-oznaka {
    background: none; padding: 0; text-decoration: underline; text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
}
body.eink-look .bil-oznaka-el { background: none; padding: 0; }

/* „DALJE" U REDAK S INZENJERKOM (Ivo, 12.09.2026.: „da ova tipka dalje bude u
   istom retku di je inzenjerko i biljeske i kviz ali desno skroz i da bude
   manja po visini"). Isti gumb, samo skupljen na visinu cipova i gurnut do
   desnog ruba. */
.subchapter-quiz-footer .ec-dalje--u-retku {
    width: auto; max-width: none; margin: 0 0 0 auto;
    padding: .3rem .7rem; gap: .3rem;
    border-radius: 9999px; font-size: .78rem; letter-spacing: .02em;
    box-shadow: none;
}
.subchapter-quiz-footer .ec-dalje--u-retku .ec-dalje-znak { width: .85rem; height: .85rem; }
/* DALJE UVIJEK SKROZ DESNO (Ivo, 25.09.2026.): znakovi uspjeha dosad su nosili
   svoj `ml-auto` i dijelili prostor s DALJE, pa je gumb zavrsio u sredini.
   Znakovi idu ispred njega, DALJE je zadnji u retku. */
.subchapter-quiz-footer:has(.ec-dalje--u-retku) .sub-badges { margin-left: auto; }
.subchapter-quiz-footer:has(.sub-badges) .ec-dalje--u-retku { margin-left: .5rem; }
.subchapter-quiz-footer .ec-dalje--u-retku { order: 99; }
.subchapter-quiz-footer .ec-dalje--u-retku svg { width: 100%; height: 100%; display: block; }

/* SAVJET NA KARTICI U „Uci sad" (Ivo, 12.09.2026.). Tih gumb ispod ponuda —
   jedan savjet po pitanju, pa nestane. Ista plava obitelj kao savjet u kvizu,
   da se prepozna kao ista stvar. */
.peek-savjet-red { margin-top: .5rem; }
.peek-savjet {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .6rem;
    color: #1d4ed8; cursor: pointer; font-size: .78rem; font-weight: 600;
    padding: .35rem .7rem;
    /* Glava Inzenjerka umjesto zarulje, kao u kvizu (Drago QA 22.09.2026.). */
    display: inline-flex; align-items: center; gap: .35rem;
}
.peek-savjet[disabled] { opacity: .6; }
.peek-savjet-out {
    margin-top: .45rem; font-size: .82rem; line-height: 1.55; color: #1e3a8a;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .6rem;
    padding: .5rem .65rem;
}
/* PAGER SAVJETA I RJESENJA (Drago QA 22.09.2026.): isti potez kao
   `#quiz-fb-pager` u kvizu, za Ispit i Blitz drill (exam.js SavjetPager). */
.savjet-pager {
    display: flex; overflow-x: auto; gap: 12px; margin-top: .45rem;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.savjet-pager::-webkit-scrollbar { display: none; }
.savjet-ploca { min-width: 100%; scroll-snap-align: start; }
.savjet-ploca > .peek-savjet-out { margin-top: 0; }
.savjet-tocke { display: flex; justify-content: center; gap: 6px; margin: .4rem 0 .1rem; }
/* Kucica za pitanje u ploci razgovora (kviz i ispit): obican okvir u toku,
   nista se ne sidri na dno ekrana. */
.subchat-ask.je-u-ploci { margin-top: .55rem; }
/* Glava uz Inzenjerkov balon u ploci razgovora (kviz, ispit). */
.subchat-red-glava { display: flex; align-items: flex-start; gap: .4rem; max-width: 100%; }
.subchat-red-glava .subchat-glava { flex: 0 0 auto; margin-top: .1rem; line-height: 0; }
.subchat-red-glava .subchat-turn { max-width: calc(100% - 2.2rem); }
.savjet-ploca .subchat-panel, #quiz-fb-pchat .subchat-panel { margin-top: 0; }
html.dark-theme .peek-savjet, html.dark-theme .peek-savjet-out {
    background: rgba(37,99,235,.16); border-color: rgba(37,99,235,.35); color: #93c5fd;
}
body.eink-look .peek-savjet, body.eink-look .peek-savjet-out {
    background: none; border-color: #000; color: #000;
}

/* Ishod kviza PODPOGLAVLJA. Namjerno nije isti ekran kao za poglavlje ili
   kolokvij: u podpoglavlju je sve jedno podrucje, pa "najjace/najslabije
   podrucje" i trendovi nemaju o cemu govoriti (Ivo, 22.08.). Kad je rijeseno,
   ostaje samo zvjezdica i put natrag. */
.qsub { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 0.9rem; text-align: center;
    padding: 2.2rem 1.2rem; }
.qsub-star { font-size: 4.4rem; line-height: 1;
    animation: qsub-pop 720ms cubic-bezier(.2,1.4,.4,1) both; }
@keyframes qsub-pop {
    0%   { transform: scale(0.2) rotate(-25deg); opacity: 0; }
    60%  { transform: scale(1.18) rotate(6deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0);        opacity: 1; }
}
.qsub-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.qsub-msg   { font-size: 0.92rem; color: #475569; max-width: 22rem; line-height: 1.55; }
.qsub-score { font-size: 0.85rem; font-weight: 700; color: #64748b; }
html.dark-theme .qsub-title { color: #e2e8f0; }
html.dark-theme .qsub-msg   { color: #cbd5e1; }
/* „4 od 5 tocno" je jedini broj na ekranu: bez tamne inacice padao je na
   3,50:1 (Drago QA 16.09.2026.). */
html.dark-theme .qsub-score { color: #94a3b8; }

/* Zvjezdica u podnozju podpoglavlja kad je upravo zaradena: kratak puls, da
   student vidi ZASTO se vratio bas tu. */
@keyframes sub-star-pulse {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.5); }
    65%      { transform: scale(0.94); }
}
.sub-badges .just-earned {
    display: inline-block;
    animation: sub-star-pulse 1s ease-in-out 2;
}

/* ODABIR TEKSTA SAMO UNUTAR GRADIVA (Ivo, 22.08.: "ovo oznacavanje teksta bi
   dopustio samo unutar podsekcije a ne ovako"). Sadrzaj, naslovi i cipovi nisu
   tekst koji se prepisuje nego navigacija — povuces prstom da skrolas, a
   dobijes plavo obojenu pola stranice i sistemski izbornik preko nje.
   Ctrl+A vise ne moze pokupiti cijeli ekran: `user-select: none` na omotacu
   iskljucuje i njega. */
#view-script { -webkit-user-select: none; user-select: none; }
#view-script .chunk-container,
#view-script .chunk-card {
    -webkit-user-select: text; user-select: text;
}
/* ISTO VRIJEDI I U CITACU (Ivo, 06.09.2026.: „nemoj da ode mogu oznacavat kad
   dugo drzin nego neka bude isto ono download to pdf ili share").
   Pravilo iznad gadja `#view-script`, a citac je zaseban spremnik — pa je u
   njegovom sadrzaju dugi dodir i dalje davao sistemski Copy/Translate. Isti
   raspored: navigacija se ne oznacava, gradivo se oznacava.
   `touch-callout` je Androidov/iOS-ov vlastiti skocni izbornik nad odabirom;
   bez njega se pojavi i kad je `user-select` iskljucen. */
#eink-citac {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
/* GRADIVO SE NE OZNACAVA SUSTAVNO (Ivo, 11.09.2026.: „nerade bilješke" — uz
   sliku Androidove trake „Copy / Translate / Select all"). Ta traka nije nas
   element i nijedan poziv sa stranice je ne mice: pojavljuje se uvijek kad se
   oznaci obicno oznaciv tekst. Dok je tekst bio oznaciv, dobivali smo i
   sustavnu ponudu, a nase „Dodaj bilješku" nije imalo gdje stati.

   Zato odabir radi `biljeske.js` sam: dugi pritisak uzme recenicu, dvije
   hvataljke je sire po rijecima. Chat i polja za unos ostaju oznacivi — ondje
   je studentov vlastiti tekst. */
#eink-citac .chunk-container,
#eink-citac .chunk-card {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
#eink-citac .subchat-panel, #eink-citac input, #eink-citac textarea,
#view-script .subchat-panel {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
#view-script .chunk-container {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* …ali ne i podnozje s gumbima unutar odlomka: ono je opet navigacija. */
#view-script .subchapter-quiz-footer,
#view-script .subchat-panel,
#view-script .subchat-verzije {
    -webkit-user-select: none; user-select: none;
}

/* Plutajuci izbornik nad naslovom (dugi pritisak / desni klik). Lezi kod
   prsta, kao sistemski izbornik — ne gura sadrzaj kao sto je gurao dok je bio
   umetnut u tekst. */
.script-hmenu {
    position: fixed; z-index: 300; min-width: 12rem;
    display: flex; flex-direction: column; padding: 0.25rem;
    border-radius: 0.75rem; background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
.script-hmenu button {
    text-align: left; padding: 0.6rem 0.75rem; border-radius: 0.5rem;
    font-size: 0.85rem; font-weight: 600; color: #1e293b; background: none;
    border: 0;
}
.script-hmenu button:hover { background: #f1f5f9; }
/* Potvrda kopiranja — kratka i neupadljiva, ne dijalog. */
.script-hmenu-javi {
    position: fixed; z-index: 301; left: 50%; bottom: 12%;
    transform: translateX(-50%);
    padding: 0.5rem 0.9rem; border-radius: 9999px;
    background: rgba(15, 23, 42, .9); color: #fff;
    font-size: 0.8rem; font-weight: 600;
}
html.dark-theme .script-hmenu { background: #1f1e1d; border-color: rgba(148,163,184,.3); }
html.dark-theme .script-hmenu button { color: #e2e8f0; }
html.dark-theme .script-hmenu button:hover { background: rgba(148,163,184,.15); }
html.dark-theme .script-hmenu { background: rgba(49,46,129,.3); }
html.dark-theme .script-hmenu button { background: rgba(15,23,42,.6); border-color: rgba(148,163,184,.3); color: #c7d2fe; }

/* A4 ispis: sve osim gradiva ispada, formule se ne smiju lomiti preko
   stranice. `@page` daje prave margine — bez njega preglednik uzme svoje. */
@media print {
    @page { size: A4; margin: 18mm 16mm; }
    body { background: #fff !important; }
    /* `#bug-report-btn`, ne `#bug-widget-btn` — gumb se tako zove u
       bug-report.js (BTN_ID); staro ime nije postojalo nigdje, pa se buba
       ispisivala na A4 papiru preko gradiva. */
    #app-header, #sidebar, #sidebar-nav, #input-area, #bug-report-btn,
    .subchapter-quiz-footer, .subchat-panel, .subchat-verzije,
    .script-hmenu, .tier-circle-slot, .chapter-mode-actions { display: none !important; }
    .print-hide { display: none !important; }
    .chunk-container { display: block !important; }
    mjx-container, pre, table, figure, .ingeniko-figure { break-inside: avoid; }
    h1, h2, h3, h4 { break-after: avoid; }
}

/* Olovka u redu s Inzenjerkom. Ista visina kao susjedni cipovi, bez natpisa
   — u tom je redu sve ikona. */
.subchat-olovka {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.25rem 0.45rem; border-radius: 0.375rem;
    border: 1px solid #fde68a; background: #fffbeb;
    font-size: 0.85rem; line-height: 1;
}
.subchat-olovka:hover { background: #fef3c7; }
html.dark-theme .subchat-olovka { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }

/* Popis ranijih verzija prepisanog podpoglavlja. Otvara ga olovka u alatnoj
   traci; svaki redak je jedan tekst na koji se student moze vratiti. */
.subchat-verzije { display: flex; flex-direction: column; gap: 0.25rem;
    margin-top: 0.4rem; padding: 0.4rem; border: 1px solid #e0f2fe;
    border-radius: 0.6rem; background: #f8fdff; }
.subchat-verzija { display: flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.5rem; border-radius: 0.4rem; font-size: 0.78rem;
    color: #0f172a; text-align: left; }
.subchat-verzija:hover { background: #e0f2fe; }
.subchat-verzija[disabled] { opacity: .55; }
.subchat-verzija .kad { margin-left: auto; color: #94a3b8; font-size: 0.72rem; }
html.dark-theme .subchat-verzije { background: rgba(15,23,42,.5); border-color: rgba(148,163,184,.22); }
html.dark-theme .subchat-verzija { color: #e2e8f0; }
/* Izbornik nad jednom verzijom — otvara ga dugi pritisak (mobitel) ili desni
   klik (racunalo). Namjerno nije stalno vidljiv: popis verzija se cita u
   jednom pogledu, a pet gumbica po retku od njega bi napravili konzolu. */
.subchat-vmenu { display: flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.35rem 0.5rem; margin: 0.1rem 0 0.3rem;
    border-radius: 0.5rem; background: #eff6ff; }
.subchat-vmenu button {
    padding: 0.25rem 0.55rem; border-radius: 0.35rem; font-size: 0.74rem;
    font-weight: 700; background: #fff; border: 1px solid #dbeafe; color: #1e40af;
}
.subchat-vmenu button:hover { background: #dbeafe; }
.subchat-vmenu button[data-v="izbrisi"] { color: #b91c1c; border-color: #fecaca; }
.subchat-vmenu button[data-v="izbrisi"]:hover { background: #fee2e2; }
.subchat-vhint { font-size: 0.68rem; color: #94a3b8; padding: 0.15rem 0.5rem 0; }
html.dark-theme .subchat-vmenu { background: rgba(30,58,138,.25); }
html.dark-theme .subchat-vmenu button { background: rgba(15,23,42,.6); border-color: rgba(148,163,184,.3); color: #bfdbfe; }

/* Redak tude verzije u popisu: isti oblik kao svoje, plus tiha zastavica za
   prijavu. Zastavica je namjerno mala i bez teksta — kontrola mora postojati,
   ali student koji je ne treba ne smije je ni primijetiti. */
.subchat-verzija--tudja { border-top: 1px dashed #e0f2fe; }
.subchat-prijavi { margin-left: 0.3rem; opacity: .35; font-size: 0.72rem;
    padding: 0.15rem 0.3rem; border-radius: 0.3rem; }
.subchat-prijavi:hover { opacity: 1; background: #fee2e2; }
.subchat-podijeli { border-top: 1px solid #e0f2fe; margin-top: 0.2rem;
    padding-top: 0.4rem; color: #0369a1; font-weight: 700; }
/* Pozdrav je uputa, ne odgovor — neka se i cita tako. */
.subchat-turn.subchat-hello { color: #64748b; font-style: italic; }
html.dark-theme .subchat-turn.subchat-hello { color: #94a3b8; }
.subchat-input {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid #cbd5e1; border-radius: 1.1rem;
    padding: 0.42rem 0.8rem; font-size: 0.85rem; background: #fff;
    /* line-height is FIXED because the 5-line ceiling is computed from it. */
    line-height: 1.35rem;
    resize: none; overflow-y: hidden;
    font-family: inherit;
}
.subchat-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.subchat-send {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px;
    background: #0284c7; color: #fff; font-weight: 700; line-height: 1;
    display: grid; place-items: center;
}
.subchat-send:hover { background: #0369a1; }
.subchat-open.is-open { background: #e0f2fe; border-color: #7dd3fc; }
/* Icon-only: square it up so it reads as a sibling of the Kviz chip rather
   than a stray image, and drop the flex gap that a label would have used. */
.subchat-open { gap: 0; padding-left: 0.45rem; padding-right: 0.45rem; }
html.dark-theme .subchat-panel { background: rgba(30,41,59,.55); border-color: rgba(148,163,184,.22); }
html.dark-theme .subchat-ing { background: rgba(15,23,42,.65); border-color: rgba(148,163,184,.22); color: #e2e8f0; }
html.dark-theme .subchat-me { background: rgba(49,46,129,.55); border-color: rgba(129,140,248,.3); color: #e0e7ff; }
html.dark-theme .subchat-input { background: rgba(15,23,42,.7); border-color: rgba(148,163,184,.3); color: #e2e8f0; }

/* Step held because its anchor is covered by another overlay: the dimming
   backdrop stays (the tour is still modal), but the ring and the bubble go
   quiet rather than pointing at something the user cannot act on. tour.js
   reveals them the moment the anchor is uncovered. */
.itour-root--waiting .itour-spot,
/* DOK SE CEKA DA SE PREKRIVAC MAKNE, UPUTA SE I DALJE CITA (Drago,
   04.09.2026.). Oblacic je ovdje bio `opacity: 0`, pa je vodic za to vrijeme
   bio potpuno nevidljiv — a s korisnikove strane „Dalje" tada naprosto ne radi
   nista. Gasi se samo halo: on doista nema sto osvijetliti dok je sidro
   pokriveno. */
.itour-root--waiting .itour-spot { opacity: 0; }
.itour-root--waiting .itour-bubble { opacity: .96; }
/* Priprema novog koraka (tour.js start): root je otvoren radi mjerenja, ali
   prosli prsten i prosli tekst ne smiju bljesnuti do place(). */
.itour-root--priprema .itour-spot,
.itour-root--priprema .itour-bubble { visibility: hidden; }
/* Svjetlo bez prstena (`mekoSvjetlo`): zatamnjenje ostaje, prsten i puls
   prstena ne. Ono sto se bira unutar svjetla svijetli samo (hcc-prvi). */
.itour-root--meko .itour-spot { box-shadow: 0 0 0 9999px rgba(9, 11, 20, .62); }
.itour-root--meko .itour-spot::after { display: none; }
/* Korak bez sidra: oblacic po sredini, bez zatamnjenja i bez prstena. */
.itour-root--bez-sidra .itour-spot { opacity: 0; box-shadow: 0 0 0 9999px rgba(9, 11, 20, .62); }

.itour-spot { position: fixed; border-radius: 14px; background: transparent;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.95),
                0 0 0 9999px rgba(9, 11, 20, .62); }
.itour-spot::after { content: ''; position: absolute; inset: -3px;
    border-radius: inherit; border: 2px solid rgba(99,102,241,.55);
    animation: itourPulse 1.8s ease-out infinite; }
@keyframes itourPulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}

.itour-bubble { position: fixed; width: 300px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px; padding: 16px; box-sizing: border-box;
    box-shadow: 0 18px 46px rgba(9,11,20,.28);
    transition: left .40s cubic-bezier(.34,1.36,.5,1), top .40s cubic-bezier(.34,1.36,.5,1); }
html.dark-theme .itour-bubble { background: #1f1e1d; border-color: rgba(148,163,184,.18); color: #e2e8f0; }

/* entrance: fade + rise + subtle scale, replayed each step */
.itour-bubble.itour-in { animation: itourBubbleIn .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes itourBubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Caret: a rotated square sharing the bubble's surface; two borders form the
   visible arrow edge. --up sits on the top edge (bubble below the spotlight),
   --down on the bottom edge (bubble flipped above). */
.itour-caret { position: absolute; width: 14px; height: 14px; background: #fff;
    transform: rotate(45deg); pointer-events: none; }
.itour-caret--up { top: -8px; border-left: 1px solid rgba(15,23,42,.08); border-top: 1px solid rgba(15,23,42,.08); }
.itour-caret--down { bottom: -8px; border-right: 1px solid rgba(15,23,42,.08); border-bottom: 1px solid rgba(15,23,42,.08); }
/* Oblacic pokraj mete (nizak vodoravni prozor): strelica nema uz koji rub
   stajati, pa se ne crta (Drago QA 16.09.2026.). */
.itour-caret--bok { display: none; }
/* Stit nad ekranom koji se nacrta pod prstom: prozirni sloj koji kratko (400 ms)
   guta dodire nakon sto vodic proslijedi dodir meti, da drugi brzi dodir ne
   padne na nesto sto se tek pojavilo na istoj tocki (Drago QA 16.09.2026.).
   Ispod `.zak-sloj` (2147482000) da prozor koji vec stoji ostane upotrebljiv. */
.itour-stit { position: fixed; inset: 0; z-index: 2147481500; background: transparent; }
/* Element u osvijetljenom podrucju koji NIJE meta koraka (tour.js `nemeta`):
   vidi se da sad ne radi, umjesto da odvede drugdje (Drago QA 16.09.2026.). */
/* `!important` + gasenje animacije: kartice predmeta pod halom pulsiraju
   (opacity keyframes), a puls bi inace pregazio prigusenje. */
.itour-prigusen { opacity: .45 !important; animation: none !important; transition: opacity .15s; }
html.dark-theme .itour-caret { background: #1f1e1d; }
html.dark-theme .itour-caret--up { border-color: rgba(148,163,184,.18); }
html.dark-theme .itour-caret--down { border-color: rgba(148,163,184,.18); }

.itour-mascot { position: absolute; top: -30px; left: 14px;
    width: 56px; height: 56px; border-radius: 50%;
    background: #eef2ff; border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(79,70,229,.28); overflow: hidden; }
html.dark-theme .itour-mascot { background: #1e1b4b; border-color: #1f1e1d; }
.itour-mascot-canvas { width: 100%; height: 100%; }
/* contain, not cover: the head PNG is 96x79 (wider than tall) — cover crops
   the chin/sides inside the circle. Slight padding floats the whole head on
   the light disc like an avatar. */
.itour-mascot-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 5px; box-sizing: border-box; }
.itour-mascot-img.itour-bob { animation: itourBob .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes itourBob {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-4px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
}

.itour-copy { margin-top: 30px; }
.itour-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: #0f172a; }
html.dark-theme .itour-title { color: #f1f5f9; }
/* Ikona koraka desno od naslova (prvi-predmet: ikona odabranog načina učenja). */
.itour-title-ic { width: 24px; height: 24px; object-fit: contain; display: inline-block;
    vertical-align: -6px; margin-left: 6px; pointer-events: none; }
/* Uređivo polje u oblačiću (prvi uspjeh: pripremljena objava). */
.itour-polje { display: block; width: 100%; box-sizing: border-box; margin-top: 10px;
    padding: 9px 11px; border-radius: 10px; border: 1px solid #cbd5e1; background: #f8fafc;
    color: #0f172a; font: inherit; font-size: 13px; line-height: 1.45; resize: none; }
.itour-polje:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
html.dark-theme .itour-polje { background: #1f2937; border-color: #475569; color: #f1f5f9; }
/* PRVI USPJEH (prvi-uspjeh.js): tiha kartica pri dnu, bez zatamnjenja i bez
   blokiranja. Iznad donje trake na mobitelu; sama nestane. */
.pu-kartica { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 24px); opacity: 0; z-index: 2147483100;
    width: min(420px, calc(100vw - 24px)); box-sizing: border-box;
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 36px 12px 12px;
    background: #fff; border: 1px solid #dbe4f0; border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .35);
    transition: transform .26s cubic-bezier(.22,1,.36,1), opacity .26s ease; }
.pu-kartica.pu-in { transform: translate(-50%, 0); opacity: 1; }
.pu-glava { flex-shrink: 0; width: 40px; height: 40px; }
.pu-glava img { width: 40px; height: auto; display: block; }
.pu-tekst { flex: 1; min-width: 0; }
.pu-naslov { font-weight: 700; font-size: 14px; color: #0f172a; display: flex; align-items: center; gap: 6px; }
.pu-ikona { width: 20px; height: 20px; object-fit: contain; }
.pu-tijelo { font-size: 13px; color: #475569; margin-top: 2px; line-height: 1.4; }
/* Gumb ide uz DESNI rub kartice (Drago, 10.09.: „moze li ovo Jasno biti na
   desnom kraju"). `row-reverse` drzi glavni gumb uz rub i kad ih je dvoje,
   pa je sporedni („Kasnije") lijevo od njega. */
.pu-gumbi { display: flex; flex-direction: row-reverse; justify-content: flex-start;
    align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.pu-podijeli { background: #2563eb; color: #fff; border: 0; border-radius: 999px;
    padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pu-podijeli:hover { filter: brightness(1.06); }
.pu-nesad { background: transparent; color: #64748b; border: 0; font-size: 13px; font-weight: 500; cursor: pointer; padding: 7px 4px; }
/* Engleski natpisi kartice gosta su dvostruko duzi od hrvatskih („Continue
   without an account" prema „Nastavi bez racuna"), pa se na 375 px red nije
   prelamao nego SU SE LOMILI GUMBI: sporedni na tri retka, glavni na dva
   (Drago QA 16.09.2026.). Red se sada smije prelomiti, a ispod 420 px gumbi
   idu jedan ispod drugog punom sirinom; glavni ostaje zadnji, kao i u redu
   gdje sjedi uz desni rub. */
@media (max-width: 420px) {
    .pu-gumbi { flex-direction: column-reverse; align-items: stretch; }
    .pu-podijeli, .pu-nesad { width: 100%; text-align: center; }
}
.pu-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 999px; border: 0;
    background: rgba(15, 23, 42, .06); color: #94a3b8; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; }
html.dark-theme .pu-kartica { background: #1f2937; border-color: #374151; }
html.dark-theme .pu-naslov { color: #f1f5f9; }
html.dark-theme .pu-tijelo { color: #cbd5e1; }
/* „Nastavi bez racuna" je jedini izlaz iz kartice: na #1f2937 je tvrdi #64748b
   davao 3,08:1, pa se sporedni put jedva vidio (Drago QA 16.09.2026.). */
html.dark-theme .pu-nesad { color: #94a3b8; }
@media (max-width: 768px) { .pu-kartica { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* TRAKA CHATA JE USIDRENA I NA DESKTOPU (Drago QA 16.09.2026.): podizanje
   kartice vrijedilo je samo do 768 px, a traka „Pitaj Inzenjerka" je zadnji
   redak pogleda na SVAKOJ sirini, pa je kartica s `bottom: 24px` sjedala na
   nju (izmjereno na 1280x800: kartica do 776, traka od 710). Podizanje se
   zato veze uz PRISUTNOST usidrene trake, a ne uz to je li zaslon mobilni.
   IZNOS JE DRUGI NEGO NA TELEFONU jer traka ondje stoji uz sam donji rub, a
   na sirokom zaslonu je jos iznad njega: izmjereno 82 px trake + 11 px
   njezina gornjeg razmaka + 9 px podloge pogleda + 32 px ljuske = 134 px, pa
   148 px ostavlja 25 px zraka. Zato ovdje stoji 148, a ne 84 kao gore.
   Kartica u sredini ekrana (`--sredina`) je izuzeta: njoj je `bottom: auto`. */
@media (min-width: 769px) {
    body:has(#view-home.dash-rich:not(.hidden) #home-chatbar) .pu-kartica:not(.pu-kartica--sredina),
    body:has(#view-dashboard.dash-rich:not(.hidden) #dash-chatbar-wrap) .pu-kartica:not(.pu-kartica--sredina) {
        bottom: calc(148px + env(safe-area-inset-bottom, 0px));
    }
}
@media (prefers-reduced-motion: reduce) { .pu-kartica { transition: none; } }
/* Popup preko sredine na ekranima rezultata (Drago, 09.09.): zastor kao u
   onboardingu, kartica u sredini. Iza medijskog pravila da pobijedi `bottom`. */
/* IZNAD EKRANA PREKO CIJELOG ZASLONA (Drago, 10.09.: „Niz genija nisam
   vidio halo"). `#view-nizgenija` se crta na z-index 2147483000, pa je
   kartica na 9000 bila iza njega: postojala je i mjerila se kao vidljiva,
   a covjek je nije vidio. Ostaje ispod vrata prijave i pravne ograde, koje
   ionako guse svaku karticu. */
.pu-zastor { position: fixed; inset: 0; z-index: 2147483099; background: rgba(15, 23, 42, .55);
    opacity: 0; transition: opacity .26s ease; }
.pu-zastor.pu-in { opacity: 1; }
/* Proziran zastor (prije pu-in i dok blijedi) ne smije gutati dodire:
   opacity 0 i dalje hvata klik (23.09.2026., „nista nece da klikne"). */
.pu-zastor:not(.pu-in) { pointer-events: none; }
.pu-kartica.pu-kartica--sredina { top: 50%; bottom: auto; transform: translate(-50%, calc(-50% + 24px)); }
.pu-kartica.pu-kartica--sredina.pu-in { transform: translate(-50%, -50%); }
@media (max-width: 768px) { .pu-kartica.pu-kartica--sredina { bottom: auto; } }
/* Korak bez gumba: dalje se ide samo dodirom kartice u halou (ili ✕). */
.itour-root--bez-gumba .itour-foot, .itour-root--bez-gumba .itour-dots { display: none; }
.itour-body { font-size: 13px; line-height: 1.55; color: #475569; margin: 0; }
html.dark-theme .itour-body { color: #cbd5e1; }

.itour-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
    border-radius: 999px; border: 0; cursor: pointer; font-size: 11px; font-weight: 700;
    background: rgba(15, 23, 42, .06); color: #94a3b8; line-height: 1; }
.itour-x:hover { background: rgba(15, 23, 42, .12); color: #64748b; }
html.dark-theme .itour-x { background: rgba(255,255,255,.10); color: #94a3b8; }
.itour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.itour-count { font-size: 12px; color: #94a3b8; }
.itour-actions { display: flex; gap: 8px; }
.itour-skip, .itour-next, .itour-back { font-size: 13px; font-weight: 500; border-radius: 9px;
    padding: 6px 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s ease, background .15s ease; }
.itour-skip { background: transparent; color: #64748b; border-color: rgba(100,116,139,.28); }
.itour-skip:hover { background: rgba(100,116,139,.10); }
.itour-back { background: transparent; color: #64748b; border-color: rgba(100,116,139,.28);
    padding: 6px 10px; font-size: 15px; line-height: 1; }
.itour-back:hover { background: rgba(100,116,139,.10); }
.itour-next { background: #2563eb; color: #fff; position: relative; }
.itour-next .cta-strelica { vertical-align: -2px; margin-left: 5px; }
.itour-next:hover { filter: brightness(1.06); }

.itour-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.itour-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(100,116,139,.35);
    transition: width .25s ease, background .25s ease; }
.itour-dot.is-on { width: 18px; border-radius: 3px; background: #2563eb; }

/* "Za tebe" personal chip inside a tour bubble — the line that matches the
   user's onboarding answer (kontekst učenja) shines instead of blending
   into the body text: soft indigo gradient pill, pop-in, then a shimmer
   sweep across it. */
.itour-personal {
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
    animation: itour-personal-pop 0.35s ease 0.15s backwards;
}
.itour-personal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: itour-personal-shine 1.1s ease 0.5s 2;
}
@keyframes itour-personal-pop {
    from { opacity: 0; transform: translateY(5px) scale(0.96); }
}
.itour-personal-ic {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -4px;
    margin: 0 1px;
    pointer-events: none;
}
@keyframes itour-personal-shine {
    to { transform: translateX(100%); }
}

/* Final tour card: Preskoči is redundant next to the finish action and the
   long "Probaj — pitaj me nešto ✍️" label needs the whole row — without
   this the footer wrapped into a cramped mess (Drago). */
.itour-root--last .itour-skip { display: none; }
.itour-root--last .itour-actions { flex: 1; }
.itour-root--last .itour-next {
    flex: 1;
    text-align: center;
    padding: 9px 14px;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 6px 16px -6px rgba(59, 130, 246, 0.55);
}
.itour-root--last .itour-foot { align-items: center; gap: 10px; }

/* "Probaj" hand-off glow — pulses around the tutor chat bar so the focus
   is visible even when the input itself shows only a thin caret. */
.itour-try-glow {
    animation: itour-try-glow 1.3s ease 2;
    border-radius: 1rem;
}
@keyframes itour-try-glow {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0); }
}

/* Welcome-back greeting (.splash-wb on #mascot-splash): the bubble and the
   Dalje button enter TOGETHER in one calm fade — overriding the fresh-intro
   stagger (bubble at 0.9s, button at 1.4s), which made the quick greeting
   feel like it loaded in pieces and vanished mid-read. */
.splash-wb .mascot-speech-bubble,
.splash-wb #mascot-skip-btn {
    animation: wb-fade-in 0.45s ease-out 0.25s both !important;
}
@keyframes wb-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .splash-wb .mascot-speech-bubble,
    .splash-wb #mascot-skip-btn { animation: none !important; opacity: 1; }
}

/* PWA install nudge (3rd+ session day, never during onboarding) */
#ob-install-nudge { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 90000; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 14px;
    padding: 10px 12px 10px 16px; box-shadow: 0 14px 40px rgba(9,11,20,.22);
    font-size: 14px; font-weight: 600; color: #0f172a; max-width: calc(100vw - 24px); }
html.dark-theme #ob-install-nudge { background: #1f1e1d; border-color: rgba(148,163,184,.18); color: #e2e8f0; }
#ob-install-nudge button[data-act="go"] { background: #4f46e5; color: #fff; border: 0;
    border-radius: 9px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
#ob-install-nudge button[data-act="go"]:hover { filter: brightness(1.08); }
#ob-install-nudge button[data-act="x"] { background: transparent; border: 0; cursor: pointer;
    color: #94a3b8; font-size: 14px; padding: 4px 6px; }

/* Help picker — right-click / long-press on the Pomoć menu item */
#itour-picker { position: fixed; z-index: 100002; min-width: 180px;
    background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 14px;
    padding: 6px; box-shadow: 0 18px 46px rgba(9,11,20,.25);
    animation: itourBubbleIn .22s cubic-bezier(.22,1,.36,1) both; }
html.dark-theme #itour-picker { background: #1f1e1d; border-color: rgba(148,163,184,.18); }
.itour-picker-title { font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #94a3b8; padding: 6px 10px 4px; }
#itour-picker button { display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; font-size: 14px; font-weight: 500; color: #0f172a;
    padding: 8px 10px; border-radius: 9px; background: transparent; border: 0; cursor: pointer; }
#itour-picker button:hover { background: rgba(99,102,241,.10); }
html.dark-theme #itour-picker button { color: #e2e8f0; }
html.dark-theme #itour-picker button:hover { background: rgba(99,102,241,.22); }
.itour-picker-ico { width: 20px; text-align: center; }

/* Send-off toast after completing the tour */
/* „Ne prikazuj vise" — vlastita plocica, ne `confirm()`: sistemski dijalog
   usred vodica izgleda kao greska, a i ne da se prevesti. Pojavi se tek nakon
   DRUGOG izlaska, jer pitati odmah znaci traziti odluku od nekoga tko jos ne
   zna sto odbija. */

.itour-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px);
    background: #4f46e5; color: #fff; font-size: 14px; font-weight: 500;
    padding: 10px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(79,70,229,.35);
    opacity: 0; z-index: 100001; pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.36,.5,1); }
.itour-toast--show { opacity: 1; transform: translate(-50%, 0); }
/* CTA variant: clickable "first task" send-off after the home tour */
.itour-toast--cta { pointer-events: auto; cursor: pointer; border: 0;
    font-weight: 700; padding: 12px 22px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.itour-toast--cta:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
    .itour-spot, .itour-bubble { transition: none; }
    .itour-spot::after { animation: none; }
    .itour-bubble.itour-in { animation: none; }
    .itour-toast { transition: none; }
}

/* When a chunk-card contains progressive-reveal steps, dissolve its OWN
   border/background so the reveals become the visual containers — not boxes
   nested inside another box. Ivo (2026-07-27): "puno box pa u njemu još
   jedan box, pa ako dodje jednadzba je jos jedan box".
   Modern browsers support :has(); older ones fall back to the older nested
   look, which is still legible. */
/* Class only — the `:has(> details.wex-step)` variants that used to sit here
   were removed 2026-07-27. Once the PROBLEM went into a details.wex-step box
   too, they matched the example card itself and stripped its padding to 0,
   which let the absolutely-positioned prev/next chevrons ride over the last
   line of content. The class is added in JS to solution content only, which
   is what this rule was always meant to catch. */
.chunk-card--reveals {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 24px;
}
/* Solution/Sanity heading above the reveals: keep it as a small label,
   not a full h4, so it doesn't dominate visually. */
.chunk-card--reveals > h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;                             /* slate-500 */
    margin: 0 0 8px 4px;
    font-weight: 600;
}
html.dark-theme .chunk-card--reveals > h4 {
    color: #94a3b8;                             /* slate-400 */
}
/* ---- Worked-example card: no frame of its own ------------------------ */
/* Three levels of framing stacked up on a phone: the ToC's chapter rail on
   the far left, then this card's border, then a bordered box per part. The
   middle one held nothing but the example title, so it goes — the boxes are
   the containers now and the reader sees two lines, not three.
   The border is made TRANSPARENT rather than removed so the box model, and
   with it the chevron strip measured in the rule above, stays put. */
.chunk-card--wex {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* The title's negative side margins existed to stretch its underline across
   the card's padding. With no padding left to cancel, they would hang the
   title off both edges. */
.chunk-card--wex.banner-minimal > h4:first-child {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
html.dark-theme .chunk-card--wex {
    background: transparent !important;
    border-color: transparent !important;
}

/* ---- "Show solution" gate (groupWorkedExamples) ---------------------- */
/* The solution's cards are folded into the problem's card and hidden behind
   this button, so paging left/right moves between EXAMPLES and seeing the
   answer stays a deliberate act. Full-width and quiet — it is a step in the
   reading flow, not a call to action competing with the problem above it. */
.wex-show-solution {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 11px 16px;
    border: 1px solid #93c5fd;                  /* blue-300 */
    border-radius: 10px;
    background: #eff6ff;                        /* blue-50 */
    color: #1d4ed8;                             /* blue-700 */
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.wex-show-solution:hover { background: #dbeafe; border-color: #60a5fa; }
/* Open state reads as "you are here", not as a fresh invitation to click. */
.wex-show-solution.is-open {
    background: transparent;
    border-color: #cbd5e1;                      /* slate-300 */
    color: #64748b;                             /* slate-500 */
    font-weight: 500;
}
.wex-show-solution.is-open:hover { background: #f1f5f9; border-color: #94a3b8; }
html.dark-theme .wex-show-solution.is-open {
    background: transparent; border-color: #3b3a37; color: #94a3b8;
}
/* The descriptive half of the example heading, first line inside the box. */
.wex-problem-title { margin: 0 0 0.5rem; }

/* Authored "Pokaži odgovor" box ({structure: reveal-final}). Neutral, like
   the problem box — blue stays reserved for the solution's own steps, so the
   card reads problem → answer → solution rather than three blue invitations. */
/* Not `.chunk-card > …`: the box is a child of .wex-solution once the
   solution is folded in, so the direct-child selector never matched. */
details.wex-answer > summary { color: #334155; }
details.wex-answer > summary::before { border-color: #64748b; }
details.wex-answer[open] { border-color: #cbd5e1; }
html.dark-theme details.wex-answer > summary { color: #cbd5e1; }
.wex-show-solution:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
html.dark-theme .wex-show-solution {
    border-color: #1e40af; background: rgba(30, 64, 175, .18); color: #93c5fd;
}
html.dark-theme .wex-show-solution:hover { background: rgba(30, 64, 175, .3); }

/* The problem box carries the same frame as the steps but a neutral tint —
   it is the given, not a step the reader works through. Open on arrival. */
details.wex-problem > summary {
    color: #334155;                             /* slate-700 */
    background: transparent;
}
details.wex-problem > summary::before { border-color: #64748b; }  /* slate-500 */
details.wex-problem[open] { border-color: #cbd5e1; }              /* slate-300 */
html.dark-theme details.wex-problem > summary { color: #cbd5e1; }

.wex-solution { margin-top: 16px; }
/* The solution card's own frame was already dissolved when it held reveals;
   keep that once its content lives here instead. */
.wex-solution.chunk-card--reveals {
    border: 0; background: transparent; box-shadow: none; padding: 0;
}
/* "Rješenje" as a small label, whether or not the solution has reveal steps.
   The button the reader just pressed already announced it; drawn full size
   it was a second, larger announcement of the same thing. */
.wex-solution > h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;                             /* slate-500 */
    margin: 0 0 8px 4px;
    font-weight: 600;
    text-align: left;
}
html.dark-theme .wex-solution > h4 { color: #94a3b8; }

/* Each reveal becomes a proper card: same shadow/rounding as chunk-card. */
details.wex-step {
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    margin: 0 0 12px 0 !important;
}
details.wex-step[open] {
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.10) !important;
}

/* Fakultet uz nadimak autora objave (Kolege). Svjetliji i tanji od imena —
   kontekst, ne naslov; na uskom ekranu se ne lomi u novi red sam za sebe. */
.kolege-fak {
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Uredi predmet: jedan popis (Ivo, 22.08.2026.) ────────────────────────
   Kolokvij nije zaseban zaslon nego CRTA u popisu; poglavlje se otvara
   dodirom, a hvata dugim pritiskom. */
.uredi-granica {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0.9rem 0.25rem 0.5rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #4338ca;
}
.uredi-granica::after {
    content: ''; flex: 1; height: 2px; border-radius: 2px; background: #e0e7ff;
}
.uredi-poglavlje { border-radius: 0.75rem; margin-bottom: 0.35rem; }
.uredi-poglavlje.is-vuce { opacity: .35; }
.uredi-red {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 0.6rem; border-radius: 0.75rem;
    border: 1px solid #e2e8f0; background: #fff;
    cursor: pointer; touch-action: pan-y;
}
.uredi-red:hover { background: #f8fafc; }
.uredi-hvat { color: #cbd5e1; font-size: 1rem; line-height: 1; }
.uredi-ime { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 700;
    color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uredi-broj { font-size: 0.72rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.uredi-strelica { color: #94a3b8; font-size: 0.7rem; }
.uredi-subs { padding: 0.35rem 0.6rem 0.5rem 1.6rem; }
.uredi-sub { display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.3rem 0; font-size: 0.84rem; color: #475569; cursor: pointer; }
.uredi-sub.is-locked { opacity: .5; cursor: default; }
.uredi-sub input { margin-top: 0.2rem; accent-color: #2563eb; }
.uredi-prazno { font-size: 0.8rem; font-style: italic; color: #94a3b8; padding: 0.3rem 0; }

/* Klon koji putuje s prstom — pravi redak ostaje na mjestu i blijedi. */
.uredi-klon {
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 400; pointer-events: none; opacity: .95;
    box-shadow: 0 12px 30px -8px rgba(15,23,42,.45);
}

/* Inzenjerko iza zadnjeg poglavlja. */
.uredi-ing { display: flex; align-items: center; gap: 0.6rem;
    margin: 1rem 0.25rem 0.25rem; }
.uredi-ing-btn { width: 40px; height: 40px; border-radius: 9999px;
    border: 1px solid #e0e7ff; background: #eef2ff;
    display: flex; align-items: center; justify-content: center; }
.uredi-ing-btn:hover { background: #e0e7ff; }
.uredi-ing-tekst { font-size: 0.82rem; font-weight: 600; color: #64748b; }
.uredi-chat-panel { border: 1px solid #e2e8f0; border-radius: 0.75rem;
    padding: 0.6rem; margin: 0.25rem; background: #f8fafc; }
.uredi-chat-tok { max-height: 12rem; overflow-y: auto; display: flex;
    flex-direction: column; gap: 0.35rem; }
.uredi-chat-m { padding: 0.45rem 0.6rem; border-radius: 0.6rem;
    font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; }
.uredi-chat-m--ja { background: #dbeafe; color: #1e3a8a; align-self: flex-end; }
.uredi-chat-m--ing { background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.uredi-chat-unos { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.uredi-chat-unos input { flex: 1; min-width: 0; padding: 0.5rem 0.65rem;
    border: 1px solid #e2e8f0; border-radius: 0.6rem; font-size: 0.85rem; }
.uredi-chat-unos button { padding: 0.5rem 0.8rem; border-radius: 0.6rem;
    background: #2563eb; color: #fff; font-size: 0.82rem; font-weight: 700; }
.uredi-chat-nota { margin-top: 0.45rem; font-size: 0.72rem; color: #94a3b8;
    line-height: 1.4; }

/* Oznaka da je na toj razini/varijanti student vec uredjivao (V.1). Malena i
   uz sam tekst — to je STANJE, ne gumb, pa se ne smije citati kao radnja. */
.uredjeno-olovka {
    font-size: 0.72em; margin-left: 0.25em; line-height: 1;
    vertical-align: baseline; pointer-events: none;
}

/* Prilog u razgovoru o uredjivanju (V.6). */
.uredi-chat-spajalica { display: flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; font-size: 0.95rem; }
.uredi-chat-spajalica:hover { background: #f1f5f9; }
.uredi-chat-prilog { display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.45rem; padding: 0.35rem 0.55rem; border-radius: 0.5rem;
    background: #eef2ff; color: #3730a3; font-size: 0.76rem; font-weight: 600; }
.uredi-chat-prilog span { color: #6366f1; font-weight: 500; }
.uredi-chat-prilog button { margin-left: auto; color: #6366f1; font-weight: 700; }

/* Jedna olovka na kraju retka s razinama + popis izmjena (V.1, prerada). */
.uredjeno-olovka {
    font-size: 0.8em; margin-left: 0.4em; line-height: 1; cursor: pointer;
    background: none; border: 0; padding: 0 0.15em; vertical-align: middle;
}
.uredjeno-olovka:hover { opacity: .7; }
.izmjene-popis {
    position: fixed; z-index: 320; max-width: min(20rem, 92vw);
    max-height: 60vh; overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .3); padding: 0.6rem;
}
.izmjene-naslov { font-size: 0.7rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 0.4rem; }
.izmjene-red { display: flex; align-items: baseline; gap: 0.4rem;
    padding: 0.28rem 0; font-size: 0.8rem; color: #334155;
    border-top: 1px solid #f1f5f9; }
.izmjene-red:first-of-type { border-top: 0; }
.izmjene-broj { font-variant-numeric: tabular-nums; color: #94a3b8;
    font-weight: 700; flex-shrink: 0; }
.izmjene-ime { flex: 1; min-width: 0; }
.izmjene-tier { font-size: 0.68rem; color: #4338ca; background: #eef2ff;
    padding: 0.05rem 0.35rem; border-radius: 9999px; flex-shrink: 0; }
.izmjene-n { font-size: 0.68rem; color: #94a3b8; flex-shrink: 0; }
.izmjene-prazno { font-size: 0.8rem; font-style: italic; color: #94a3b8; }


/* ============================================================
   PYTHON-LOOK — ciste kucice, bez gradijenta
   ============================================================
   Ivo (24.08.): „ovaj mod bi triba prominit i ovo da nema gradijenata nego
   da budu 'ciste' kucice."

   Ovo NIJE tema (svijetlo/tamno) nego IZGLED: ikone su ravne plohe bez
   preljeva, pa bi kartica pod njima s trobojnim gradijentom bila jedina
   stvar na ekranu koja jos ima volumen.

   Ne dira se svih 90 gradijenata u ovoj datoteci — samo POVRSINE na kojima
   ikone stoje. Traka napretka, isticanje i sjaj na gumbima ostaju: ondje
   gradijent nosi znacenje (koliko je gotovo), a ne ukras.
   Klasu na <body> postavlja `icon-palette.js`. */
body.python-look .dash-hero,
body.python-look .dash-hero--home,
body.python-look .dash-quick-card,
body.python-look .mw-card,
body.python-look .qr-card {
    background-image: none;
    background-color: var(--card-bg, #ffffff);
    box-shadow: none;
}
body.python-look .dash-hero,
body.python-look .dash-hero--home {
    background-color: #f7f9fc;
    border-color: #e2e8f0;
}
body.python-look .dash-quick-card {
    border-color: #dfe3e8;
}
body.python-look .dash-quick-card:hover {
    /* Bez podizanja i sjene — plosnat izgled se drzi i u dodiru. */
    transform: none;
    box-shadow: none;
    border-color: #1a63d8;
}
body.python-look .dash-quick-icon,
body.python-look .dash-section-bolt {
    background-image: none;
    box-shadow: none;
}
/* TAMNA TEMA JE APLIKACIJINA, NE SUSTAVOVA.
   Prva izvedba je koristila `@media (prefers-color-scheme: dark)` — a
   aplikacija temu drzi sama (`root.classList.toggle('dark-theme')`,
   settings.js). Na uredaju s tamnim sustavom i svijetlom temom u aplikaciji
   kartice su tako pocrnjele dok je tekst ostao taman: Ivo je dobio crne
   kucice s necitljivim natpisima. Uvjet mora biti isti onaj koji aplikacija
   i inace koristi. */
.dark-theme body.python-look .dash-hero,
.dark-theme body.python-look .dash-hero--home,
body.python-look.dark-theme .dash-hero,
body.python-look.dark-theme .dash-hero--home { background-color: #171a21;
                                               border-color: #2a2f3a; }
.dark-theme body.python-look .dash-quick-card,
body.python-look.dark-theme .dash-quick-card { background-color: #171a21;
                                               border-color: #2a2f3a; }


/* Python-look: i TRAKE su kucice. `ln-banner` („Uci sad!") i `ng-banner`
   („Niz genija") nose gradijent i mekani krug u kutu — Ivo (24.08.): „ovo uci
   mi se jos pari ko da je gradijent". Boja ostaje, preljev odlazi. */
body.python-look .ln-banner,
body.python-look .ng-banner,
body.python-look [class*="-banner"] {
    background-image: none;
    box-shadow: none;
}
body.python-look .ln-banner { background-color: #eef6fb; border-color: #d6e6f2; }
/* SAMO STANJE „IGRAJ" JE LJUBICASTO (Drago QA 23.09.2026.: „ovo mi je ruzno
   kad se odigra, ne vidi se tekst ni nista"). Pravilo je dosad gadalo SVAKU
   `.ng-banner`, pa je i traka „odigrano danas" dobivala tamnu ljubicastu, a
   ona nosi TAMAN tekst (#3730a3): tamno na tamnom. Biljeska iznad kaze da je
   boja citljiva „jer nosi bijeli tekst", sto vrijedi samo za stanje igraj. */
body.python-look .ng-banner--play { background-color: #4f2fd1; }
body.python-look .ng-banner--done { background-color: #eef2ff; border-color: #e0e7ff; }
html.dark-theme body.python-look .ng-banner--done {
    background-color: #1e1b4b; border-color: #312e81; color: #c7d2fe;
}
html.dark-theme body.python-look .ng-banner--done .ng-banner-ic {
    background-color: #312e81; color: #c7d2fe;
}
body.python-look .ln-banner::after,
body.python-look .ng-banner::after { display: none; }
body.python-look .ln-banner:hover,
body.python-look .ng-banner:hover { box-shadow: none; }
/* TAMNA TEMA MORA NADVLADATI IZGLED (Drago QA 16.09.2026.): pravila iznad
   imaju ISTU specificnost (0,2,1) kao `html.dark-theme .ln-banner` na ~4400, a
   dolaze kasnije u datoteci, pa su pobjedivala: `background-image: none` je
   ubijao tamni gradijent, a `background-color: #eef6fb` vracao skoro bijelu
   plohu. Cijan naslov i podnaslov iz tamne teme ostajali su na njoj: 1,14:1 i
   1,53:1. Vrijedilo je UVIJEK jer je `python` zatecena paleta (DEFAULT u
   icon-palette.js), pa `python-look` stoji na body i bez korisnikova izbora.
   `.ng-banner` ne treba isto: njegova python-look boja (#4f2fd1) je tamna i
   nosi bijeli tekst, pa je citljiva u obje teme. */
html.dark-theme body.python-look .ln-banner { background-color: #0e2a3a; border-color: #164e63; }


/* === Python-look: preljevi koje prva runda nije pokrila === */
/* Prva runda je poravnala trake i kartice, ali ne i ono U njima — Ivo
   (25.08.): „ovo 'Uci' je jos gradijent", misleci na `.ln-cta` unutar
   `.ln-banner` koji JEST bio sreden.

   Boja NIJE prvi zaustavni ton nego onaj koji tekst cini citljivim: na
   tom gumbu bijeli tekst na `#22d3ee` daje 1,81:1, a na `#3b82f6` 3,68:1
   — „uzmi prvi" bi dakle citljivost pogorsao u odnosu na sam preljev.
   Kad je tekst svijetao uzima se NAJTAMNIJI ton, inace prvi. Iz palete se
   ne izlazi.

   Sjena odlazi zajedno s preljevom — isti su jezik — osim na onome sto
   PLUTA (dijalozi, izbornici, obavijesti), gdje sjena nosi podatak da je
   element iznad stranice. Ukrasni `::after` dobiva samo `none`. */
body.python-look .mascot-splash { background-image: none; background-color: #eef2ff; }
body.python-look .mascot-splash-bg::before { background-image: none; }
body.python-look .mascot-splash-bg::after { background-image: none; }
body.python-look .mascot-skip-btn { background-image: none; background-color: #2563eb; box-shadow: none; }
body.python-look .levelup-card { background-image: none; background-color: #1e3a8a; box-shadow: none; }
body.python-look .lb-pod-stand-1::after { background-image: none; }
body.python-look .lb-mylevel { background-image: none; background-color: #1e3a8a; }
body.python-look .qr-grad-blue { background-image: none; background-color: #2563eb; }
body.python-look .qr-grad-amber { background-image: none; background-color: #f59e0b; }
body.python-look .qr-grad-green { background-image: none; background-color: #059669; }
body.python-look .qr-grad-pink { background-image: none; background-color: #db2777; }
body.python-look .qr-actions { background-image: none; background-color: #fff; }
html.dark-theme body.python-look .qr-actions { background-image: none; background-color: #1f1e1d; }
body.python-look .mw-bar-fill { background-image: none; background-color: #2563eb; }
body.python-look .mw-bar-fill--green { background-image: none; background-color: #16a34a; }
body.python-look .mw-bar-fill--gold { background-image: none; background-color: #d97706; }
body.python-look .mw-bar-fill--red { background-image: none; background-color: #dc2626; }
body.python-look .mpo-summary { background-image: none; background-color: #eff6ff; box-shadow: none; }
body.python-look .mpo-summary .mw-bar-fill { background-image: none; background-color: #2563eb; }
/* python-look je hero bojao u punu tamnoplavu — otkad je hero smirena
   svijetloplava kartica (04.09.), skin NE smije vraćati „pre žarku" boju. */
/* Hero plana i zaglavlje kalendara: ista svijetloplava kao sažetak (Drago, 22.09.2026.). */
body.python-look .pset-hero { background-image: none; background-color: #eff6ff; box-shadow: none; }
body.python-look .kal-vrh { background-image: none; background-color: #eff6ff; }
body.python-look .pset-hero::after { background-image: none; }
body.python-look .lb-team { background-image: none; background-color: #ecfdf5; }
body.python-look .lb-team-fill { background-image: none; background-color: #22c55e; }
body.python-look .lb-team-full { background-image: none; background-color: #f59e0b; }
body.python-look .streak-toast { background-image: none; background-color: #ea580c; }
body.python-look .streak-modal { background-image: none; background-color: #fff7ed; }
body.python-look .streak-flame-glow { background-image: none; }
body.python-look .smn-bar i { background-image: none; background-color: #f59e0b; }
html.dark-theme body.python-look .streak-modal { background-image: none; background-color: #2a1608; }
body.python-look #leaderboard-modal-content.lb-open-pop > div:first-child::after { background-image: none; }
body.python-look .lb-q-fill { background-image: none; background-color: #3b82f6; }
body.python-look .lb-q-fill::after { background-image: none; }
body.python-look .lb-q-done .lb-q-fill { background-image: none; background-color: #22c55e; box-shadow: none; }
body.python-look .lb-team-fill::after { background-image: none; }
body.python-look .lv-cur { background-image: none; background-color: #1e3a8a; }
body.python-look .lb-mylevel::after { background-image: none; }
body.python-look .lb-ml-fill { background-image: none; background-color: #fbbf24; box-shadow: none; }
body.python-look .lb-ml-fill::after { background-image: none; }
body.python-look .lv-cur::after { background-image: none; }
body.python-look .skel::after { background-image: none; }
body.python-look .ml-sb::after { background-image: none; }
html.dark-theme body.python-look .skel::after { background-image: none; }
html.dark-theme body.python-look .mascot-splash { background-image: none; background-color: #1f1e1d; }
body.python-look .intro-head-circle { background-image: none; background-color: #f0f7ff; }
html.dark-theme body.python-look .intro-head-circle { background-image: none; background-color: #1e3a8a; }
body.python-look .dash-suggest { background-image: none; background-color: #fffbeb; }
html.dark-theme body.python-look .dash-suggest { background-image: none; background-color: #292008; }
html.dark-theme body.python-look .dash-progress-ring { background-image: none; background-color: #3b82f6; }
body.python-look .dash-progress-ring { background-image: none; background-color: #3b82f6; }
body.python-look .dash-widget-continue { background-image: none; background-color: #eff6ff; }
html.dark-theme body.python-look .dash-widget-continue { background-image: none; background-color: #182747; }
body.python-look .apm-wk-bar i.apm-win { background-image: none; background-color: #f59e0b; }
body.python-look .dash-faq-chip { background-image: none; background-color: #eff6ff; box-shadow: none; }
body.python-look .dash-faq-chip:hover { background-image: none; background-color: #dbeafe; box-shadow: none; }
body.python-look .dash-chatbar-avatar { background-image: none; background-color: #dbeafe; }
body.python-look .ln-cta { background-image: none; background-color: #3b82f6; box-shadow: none; }
body.python-look #mode-current-btn.mode-empty { background-image: none; background-color: #eff6ff; box-shadow: none; }
body.python-look #mode-current-btn.mode-empty:hover { background-image: none; background-color: #dbeafe; }
body.python-look #setup-selected-counter .setup-counter-num { background-image: none; background-color: #1e40af; box-shadow: none; }
body.python-look #dash-map-widget { background-image: none; background-color: #eff6ff; }
html.dark-theme body.python-look #dash-map-widget { background-image: none; background-color: #182747; }
body.python-look #app-top-scrim { background-image: none; background-color: #ffffff; }
html.dark-theme body.python-look #app-top-scrim { background-image: none; background-color: #1f1e1d; }
body.python-look .learn-feed { background-image: none; background-color: #ffffff; }
html.dark-theme body.python-look .learn-feed { background-image: none; background-color: #2a2927; }
body.python-look .kolege-hero { background-image: none; background-color: #fff1f2; }
body.python-look .kolege-empty-head { background-image: none; background-color: #fff1f2; }
body.python-look .kolege-skel::after { background-image: none; }
html.dark-theme body.python-look .kolege-skel::after { background-image: none; }
body.python-look .kolege-card.is-featured { background-image: none; background-color: #fff7ed; }
html.dark-theme body.python-look .kolege-card.is-featured { background-image: none; background-color: #2a2927; }
body.python-look .kolege-story.has-new .ks-ring { background-image: none; background-color: #fb7185; }
html.dark-theme body.python-look .kolege-story.has-new .ks-ring { background-image: none; background-color: #fb7185; }
html.dark-theme body.python-look .kolege-hero { background-image: none; background-color: #2a2927; }
body.python-look .kolege-review { background-image: none; background-color: #EEEDFE; }
html.dark-theme body.python-look .kolege-review { background-image: none; background-color: #2a2927; }
html.dark-theme body.python-look .kolege-empty-head { background-image: none; background-color: #2a2927; }
body.python-look .kolege-page { background-image: none; background-color: #fff1f2; }
html.dark-theme body.python-look .kolege-page { background-image: none; }
html.dark-theme body.python-look .chunk-card details > summary { background-image: none; background-color: #2a2927; }
body.python-look .subchat-panel { background-image: none; background-color: #f8fdff; }
body.python-look .itour-personal { background-image: none; background-color: #eef2ff; }
body.python-look .itour-personal::after { background-image: none; }
body.python-look .itour-root--last .itour-next { background-image: none; background-color: #2563eb; box-shadow: none; }
body.python-look .itour-next { background-color: #2563eb; }
body.python-look .itour-toast--cta { background-image: none; background-color: #2563eb; }


/* === Python-look: ikone predmeta bez plocice === */
/* Ivo (25.08.): „kad je python look, da ove ikone nemaju ovu pozadinu svoju i
   mozda mogu bit mrvicu vece onda" — ikone u karticama predmeta.

   Ploca odlazi. Povecava se GLIF, ne kutija: `.hcc-icon` ima TRI velicine
   kroz prijelome (2,75rem / 1,6rem usko / 2,4rem u mobilnom preslagivanju), pa
   bi upisivanje nove velicine ovdje pregazilo sve tri i vratilo kvar zbog
   kojeg je onaj komentar iznad uopce napisan — slika koja visi preko ruba
   kutije. `scale` raste iz sredista i postuje svaki prijelom sam od sebe, a
   bez ploce se ni najmanje prelijevanje nema o sto zapeti. */
body.python-look .hcc-icon {
    background: transparent;
    border-radius: 0;
}
body.python-look .hcc-icon > img {
    padding: 0;
    transform: scale(1.12);
}


/* === Moji predmeti === */
/* Stranica popisa predmeta (Ivo, 25.08.). Redak nosi dva dodira: ikona ulazi
   u predmet, ostatak siri naziv i otkriva modove. Zato ikona MORA biti
   vlastiti gumb — da je cijeli redak jedan gumb, ne bi se dalo razlikovati. */
/* NASLOVI SKUPINA IDU LIJEVO (Drago, prijava 04.09.2026. 09:21: „Trenutno
   slusam / polozeno - po sredini je a treba biti lijevo ovako je cudno").
   Centrirani naslov iznad popisa cije su sve stavke poravnate lijevo nema s
   cime biti u ravnini -- oko ga cita kao da pripada necem drugom. Popis je
   ljestvica, a ljestvica pocinje s lijeve strane. */
.msub-h { font-size: 1.05rem; font-weight: 800; color: #1e293b;
    text-align: left; margin: 0.25rem 0 0.9rem; }
.msub-prazno { text-align: center; color: #64748b; font-size: .9rem; }
/* ISTA SIRINA KAO POCETNA (Ivo, 26.08.: „na veliki ekran, ovo je pre siroko").
   1180 px nije nova brojka nego ona koju vec drze `.dash-rich-wrap` i traka za
   pitanje — da se ekrani poklope kad se medu njima prelazi, umjesto da svaki
   ima svoju sirinu.
   Ogranicava se SADRZAJ, ne sam pogled: `#view-subjects` je `absolute inset-0`
   i mora ostati preko cijelog okna jer on skrola. */
#view-subjects > * { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }
.msub-list { display: flex; flex-direction: column; gap: .55rem; }

.msub-card { display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border: 1px solid #dbeafe; border-radius: .75rem;
    background: #fff; }
.msub-item.is-open .msub-card { border-color: #93c5fd; }

.msub-go { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: grid;
    place-items: center; border-radius: .5rem; background: transparent; }
.msub-go:hover { background: #eff6ff; }
.msub-go img { width: 100%; height: 100%; object-fit: contain; }

/* Naziv je SKRACEN dok redak nije otvoren. Gumb mora imati `min-width: 0`,
   inace flex stavci ne dopusti da se suzi ispod sadrzaja i `ellipsis` se
   nikad ne pojavi — tekst umjesto toga gura krug s desna van kartice. */
.msub-open { flex: 1 1 auto; min-width: 0; text-align: left; background: none; }
/* PUNI NAZIV SE MORA MOCI VIDJETI (Drago, 10.09.2026.: „ka zivcira me sta ne
   mogu nigdi vidit puni naziv predmetaaaaa"). Popis „Moji predmeti" je jedino
   mjesto na kojem predmet ima cijeli redak za sebe — a naziv je ovdje bio
   rezan na jednu liniju s tri tocke, pa se puni nije vidio NIGDJE otkad
   plocice nose kratko ime. Sada se prelama u najvise tri retka; otvoren
   redak i dalje pokazuje sve. */
.msub-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    font-weight: 700; font-size: .92rem; color: #1e3a8a;
    white-space: normal; overflow: hidden; line-height: 1.25; }
.msub-item.is-open .msub-name { -webkit-line-clamp: unset; overflow: visible; }

/* Malo veci otkad u njemu stoji broj — na 1,9rem je dvoznamenkasti postotak
   bio na granici citljivosti. */
.msub-ring-wrap { flex: 0 0 auto; width: 2.35rem; height: 2.35rem; display: block; }
.msub-ring { width: 100%; height: 100%; display: block; }
.msub-ring-track { fill: none; stroke: #e2e8f0; stroke-width: 4; }
.msub-ring-arc { fill: none; stroke-width: 4; stroke-linecap: round;
    transition: stroke-dasharray .35s ease; }
/* Velicina u jedinicama viewBoxa (36), ne u px — broj tako raste s krugom.
   `dominant-baseline` sam po sebi ne centrira u svim preglednicima, pa ide
   zajedno s `text-anchor`. */
/* 10, ne 11: „100%" je pri 11 mjerilo 28,4 jedinice, a unutar prstena ih
   ima 27 (r 15,5 minus pola poteza 4 s obje strane) — broj bi se popeo na
   sam prsten. Pri 10 je 25,8 i stane s malo zraka. Mjereno `getBBox`, ne
   procijenjeno po broju znamenki. */
.msub-ring-txt { font-size: 10px; font-weight: 800; text-anchor: middle;
    dominant-baseline: central; }

.msub-modes { display: flex; justify-content: space-around; gap: .25rem;
    padding: .45rem .3rem .1rem; }
.msub-mode { width: 3.6rem; display: flex; flex-direction: column;
    align-items: center; gap: .15rem; padding: .3rem 0; border-radius: .5rem; }
.msub-mode:hover { background: #eff6ff; }
.msub-mode-ic { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; }
.msub-mode-ic img { width: 100%; height: 100%; object-fit: contain; }
.msub-mode-lb { font-size: .62rem; line-height: 1.1; color: #64748b; }

html.dark-theme .msub-h { color: #e2e8f0; }
html.dark-theme .msub-card { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .msub-name { color: #bfdbfe; }
html.dark-theme .msub-ring-track { stroke: #334155; }
html.dark-theme .msub-go:hover,
html.dark-theme .msub-mode:hover { background: rgba(59,130,246,.15); }


/* razrada iza brojke u krugu */
/* Popis poglavlja se koristi UNUTAR prozora; ugradena razrada u retku je
   maknuta 25.08. jer je gurala ostale predmete s ekrana. */
.msub-pop { position: fixed; inset: 0; z-index: 320; display: flex;
    align-items: flex-end; justify-content: center;
    background: rgba(15, 23, 42, .45); }
@media (min-width: 640px) { .msub-pop { align-items: center; padding: 1rem; } }
.msub-pop-card { background: #fff; width: 100%; max-width: 27rem;
    max-height: 88vh; display: flex; flex-direction: column;
    border-radius: 1rem 1rem 0 0; overflow: hidden; }
@media (min-width: 640px) { .msub-pop-card { border-radius: 1rem; } }
.msub-pop-head { display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1rem; border-bottom: 1px solid #e2e8f0; }
.msub-pop-head h3 { flex: 1 1 auto; min-width: 0; font-size: .92rem;
    font-weight: 800; color: #1e293b; }
.msub-pop-x { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 9999px;
    color: #64748b; }
.msub-pop-x:hover { background: #f1f5f9; }
/* Tijelo je JEDINO sto se skrola — zaglavlje i podnozje s prijedlogom moraju
   ostati vidljivi, inace se do prijedloga treba skrolati. */
.msub-pop-body { flex: 1 1 auto; overflow-y: auto; padding: .85rem 1rem; }
.msub-pop-kart { display: flex; gap: .5rem; margin-bottom: .85rem; }
.msub-kart { flex: 1 1 0; min-width: 0; text-align: center; padding: .5rem .25rem;
    border-radius: .6rem; background: #f8fafc; }
.msub-kart b { display: block; font-size: 1.15rem; font-weight: 800; color: #1e3a8a;
    line-height: 1.15; }
/* 0,62rem je bilo ispod granice citljivosti na telefonu — natpis uz broj mora
   se moci procitati bez priblizavanja. */
.msub-kart span { display: block; font-size: .7rem; color: #64748b; margin-top: .12rem; }
.msub-pop-noga { flex: 0 0 auto; padding: .75rem 1rem 1rem;
    border-top: 1px solid #e2e8f0; }
.msub-pop-zasto { font-size: .72rem; color: #64748b; margin-bottom: .45rem;
    text-align: center; }
.msub-pop-cta { width: 100%; display: flex; align-items: center;
    justify-content: center; gap: .5rem; padding: .7rem; border-radius: .7rem;
    background: #3b82f6; color: #fff; font-weight: 800; font-size: .88rem; }
.msub-pop-cta img { width: 1.3rem; height: 1.3rem; object-fit: contain; }
html.dark-theme .msub-pop-card { background: #1f1e1d; }
html.dark-theme .msub-pop-head { border-bottom-color: #3b3a37; }
html.dark-theme .msub-pop-head h3 { color: #e2e8f0; }
html.dark-theme .msub-kart { background: #2a2927; }
html.dark-theme .msub-kart b { color: #bfdbfe; }
html.dark-theme .msub-pop-noga { border-top-color: #3b3a37; }
.msub-det-popis { display: flex; flex-direction: column; gap: .28rem; }
.msub-det-red { display: flex; align-items: center; gap: .45rem; }
/* `min-width: 0` je uvjet da se dugacak naziv poglavlja skrati umjesto da
   gura traku i postotak izvan kartice. */
.msub-det-ime { flex: 1 1 auto; min-width: 0; font-size: .74rem; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Traka je bila siroka 3,2 rem, dakle kraca od postotka uz nju — citala se kao
   ukras, a ne kao mjera. Sad uzima prostor koji preostane, pa se dva poglavlja
   mogu usporediti pogledom, bez citanja brojeva. */
.msub-det-trak { flex: 1 1 4.5rem; min-width: 3rem; height: .4rem;
    border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.msub-det-trak i { display: block; height: 100%; background: #3b82f6;
    border-radius: 999px; transition: width .35s ease; }
/* Ime vise ne gura traku: dobiva svoju mjeru, a visak se skrati trotockom. */
.msub-det-ime { flex: 0 1 9rem; }
.msub-det-pc { flex: 0 0 2.1rem; text-align: right; font-size: .7rem;
    font-weight: 700; color: #475569; }
.msub-det-prazno { font-size: .74rem; color: #94a3b8; }
html.dark-theme .msub-det-ime { color: #cbd5e1; }
html.dark-theme .msub-det-trak { background: #3b3a37; }


/* === Python-look: sjene ispod crteza === */
/* Ivo (25.08.): „na onoj pocetnoj stranici, cini mi se da gori oko glave
   inzenjerka ima neki gradijent, to bi isto uklonio". Nije gradijent nego
   `filter: drop-shadow` — mekana sjena oko crteza koja se cita kao svjetlosni
   oreol.

   Prvi prolaz kroz python-look ovo je PROMASIO: hvatao je `background-image` i
   `box-shadow`, a `filter` je treci nacin da se dobije isti sjaj. Ovdje se
   gasi na svih deset mjesta koja ga imaju. Ravni stil sjenu ne treba —
   likovi imaju debeli obris, koji odvaja i bez nje. */
body.python-look .dash-hero-deco .books,
body.python-look .dash-quick-icon img,
body.python-look .hero-head-slot img,
body.python-look .kolege-hero-icon img,
body.python-look .lb-ml-icon,
body.python-look .streak-flame,
body.python-look .hcc-icon > img { filter: none; }

/* NAMJERNO IZOSTAVLJENI — pozdravni zaslon i uvodne maskote (Ivo, 25.08.:
   „na ovoj skroz pocetnoj ima gradijent, ali na njoj mi se to svida za sada"):

       .mascot-image-wrap        maskota na pozdravnom zaslonu i u postavljanju
       .intro-head-circle img    uvodna glava u mentoru i tutoru
       .intro-feature-icon       ikone uz uvodni popis

   Ondje sjaj ostaje dok se ne odluci drukcije. Zapisano ovdje, a ne
   preskoceno u tisini, da se pri sljedecem prolazu ne "popravi" natrag.

   Repic govornog oblacica (`.mascot-speech-bubble::before`) je ISPUNA, ne
   sjena — `filter: none` bi mu uzeo jedini nacin na koji se crta. */


/* === Reakcije statične glave === */
/* Glava u zaglavlju pocetne je obicna slika — reakcije na dodir idu CSS-om,
   jer ispod 1160 px cijela maskota nije nacrtana (v. `.dash-hero-mascot`
   `display: none`) pa `jump` i `wave` iz rigga ondje nemaju sto pokazati.

   `transform-origin` je DNO glave: vrat je tocka oko koje se glava prirodno
   naginje, a rotacija oko sredista izgleda kao da lebdi. */
/* `.ing-glava` dobiva SVAKA maskota koju promatrac ozici — na Pocetnoj, u
   planu, u razgovoru s mentorom. Prije je pravilo vrijedilo samo za Pocetnu,
   pa bi se glava u planu vrtjela oko sredista i izgledala kao da lebdi. */
.hero-head-slot .ing-head,
.ing-glava { transform-origin: 50% 100%; will-change: transform; }
.ing-glava { cursor: pointer; }

@keyframes ing-kimne {
    0%, 100% { transform: translateY(0) rotate(0); }
    35%      { transform: translateY(4px) rotate(0); }
    70%      { transform: translateY(-1px) rotate(0); }
}
@keyframes ing-nagne {
    0%, 100% { transform: rotate(0); }
    40%      { transform: rotate(-11deg); }
    75%      { transform: rotate(4deg); }
}
@keyframes ing-strese {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    45%      { transform: translateX(4px); }
    70%      { transform: translateX(-2px); }
}
@keyframes ing-poskoci {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    25%      { transform: translateY(0) scale(1.08, 0.92); }
    55%      { transform: translateY(-9px) scale(0.96, 1.05); }
    80%      { transform: translateY(0) scale(1.04, 0.97); }
}
@keyframes ing-vrti {
    0%       { transform: rotate(0); }
    100%     { transform: rotate(360deg); }
}
/* „Zmirkanje" NIJE pravo zatvaranje ociju i ne moze biti: glava je JEDNA
   slika, a na njoj su oci vec nacrtane zatvorene (luk `^ ^`) — i u ravnom i u
   sjajnom stilu. Rig na desktopu trepce tako da SLOJ oka stisne na `scaleY
   0.1`; ovdje tog sloja nema.
   Zato se stisne cijela glava, kratko i brzo. Oko to procita kao zmirkanje jer
   su oci ono najuocljivije na njoj. Za pravo trepatanje trebala bi druga
   slika, s otvorenim ocima — to je posao za Images. */
@keyframes ing-zmirne {
    0%, 100% { transform: scaleY(1) translateY(0); }
    45%      { transform: scaleY(0.82) translateY(3px); }
    70%      { transform: scaleY(1.04) translateY(-1px); }
}
/* Mirno njihanje — najtise iz repertoara, da svaki dodir ne bude cirkus. */
@keyframes ing-njise {
    0%, 100% { transform: rotate(0) translateX(0); }
    25%      { transform: rotate(4deg) translateX(2px); }
    75%      { transform: rotate(-4deg) translateX(-2px); }
}
/* Trzaj iznenadenja: naglo naraste pa se smiri. */
@keyframes ing-iznenadi {
    0%, 100% { transform: scale(1) translateY(0); }
    30%      { transform: scale(1.14) translateY(-4px); }
    55%      { transform: scale(0.95) translateY(1px); }
    80%      { transform: scale(1.03) translateY(0); }
}
.ing-r-zmirne   { animation: ing-zmirne   .42s ease-in-out; }
.ing-r-njise    { animation: ing-njise    .8s  ease-in-out; }
.ing-r-iznenadi { animation: ing-iznenadi .65s ease-in-out; }
.ing-r-kimne   { animation: ing-kimne   .6s ease-in-out; }
.ing-r-nagne   { animation: ing-nagne   .7s ease-in-out; }
.ing-r-strese  { animation: ing-strese  .6s ease-in-out; }
.ing-r-poskoci { animation: ing-poskoci .7s ease-in-out; }
.ing-r-vrti    { animation: ing-vrti    .9s ease-in-out; }

/* Tko je u postavkama sustava trazio manje gibanja, dobiva samo kratki trzaj
   umjesto vrtnje i skoka — reakcija ostaje, ali ne leti po ekranu. */
@media (prefers-reduced-motion: reduce) {
    .ing-r-kimne, .ing-r-nagne, .ing-r-strese, .ing-r-poskoci, .ing-r-vrti,
    .ing-r-njise, .ing-r-iznenadi { animation: ing-kimne .4s ease-in-out; }
    /* Zmirkanje ostaje kakvo jest: ono se ne mice po ekranu nego samo stisne,
       pa nije ono na sto se pravilo o manjem gibanju odnosi. */
}


/* === Traka za pitanje iznad tipkovnice === */
/* Ivo (25.08., iPhone): „kad upres na inzenjerka za pitat na naslovnici,
   tipkovnica otide priko onoga za upis".

   Na iOS-u tipkovnica NE smanjuje raspored — ljuska aplikacije ostaje pune
   visine i traka za unos, koja je na njezinu dnu, zavrsi ispod tipkovnice.
   `--kb` objavljuje `window.KB` (utils.js) i zna visinu iz oba izvora: iz
   viewporta i od samog Keyboard plugina, koji je na iOS-u jedini pouzdan
   otkad je instaliran.

   Podize se TRANSFORMOM, ne promjenom visine ili dna: transform kompozitira,
   a promjena rasporeda bi na svakom kadru pomicanja tipkovnice preracunala
   cijeli ekran — isti razlog zbog kojeg je i zaglavlje preslo na transform. */
/* SKRACUJE SE CIJELI STUPAC, ne pojedine trake.
   Luka (25.08.): „radi sad, podigne se traka za upis, jos triba omogucit da se
   scrolla ostatk zaslona dok se upisuje".

   Podizanje transformom je traku dovelo iznad tipkovnice, ali sadrzaj IZA nje
   je ostao zarobljen: raspored je i dalje bio pune visine, pa se do donjeg
   dijela nije imalo kako doskrolati.

   `#app-column` drzi zaglavlje, sadrzaj i traku. Kad se ON skrati za visinu
   tipkovnice, sve unutra se posloži samo: spremnik sadrzaja se smanji pa
   njegovi pogledi skrolaju do kraja, a traka sjedne tocno iznad tipkovnice.
   Time otpadaju tri zasebna pravila za tri razlicite trake — sto je i bio
   izvor prosle greske, jer sam popravio jednu a prijava se ticala druge. */
html.kb-open #app-column {
    height: calc(100% - var(--kb, 0px));
}
/* Trake gube donju sigurnu zonu dok su podignute — iznad tipkovnice to nije
   rub ekrana nego prazan pojas. */
html.kb-open #home-chatbar,
html.kb-open #dash-chatbar-wrap,
html.kb-open #input-area {
    /* Donja sigurna zona ima smisla samo kad traka STOJI NA DNU. Podignuta
       iznad tipkovnice, ta je uvlaka mrtav bijeli pojas izmedu polja i tipaka
       (na iPhoneu ~34 px) — isto je vec zapisano uz traku chata.
       `!important` je NUZAN: Tailwind je prekompajliran s !important, pa bi
       `pb-5` na ovom elementu inace pobijedio (izmjereno — bez toga je ostalo
       11,2 px umjesto 12). */
    padding-bottom: 0.75rem !important;
}


/* === Palci uz pitanje === */
/* Diskretno i U KUTU, ne u toku odgovora (Ivo, 25.08.: „doli desno na ekranu
   diskretni palac gori i palac doli"). U toku bi gurali „Dalje" i tjerali na
   odluku; ovako se mogu i preskociti.

   S gumbom za prijavu buba nema sudara — on stoji lijevo. Podizu se s
   tipkovnicom preko `--kb`, iz istog vlasnika kao i sve ostalo. */
.palci {
    position: fixed; right: 0.9rem; z-index: 60;
    bottom: calc(0.9rem + var(--safe-bottom, 0px) + var(--kb, 0px));
    display: flex; gap: 0.4rem;
    opacity: .55; transition: opacity .2s ease;
}
.palci:hover, .palci:focus-within { opacity: 1; }
.palci-b {
    width: 2.4rem; height: 2.4rem; border-radius: 9999px;
    display: grid; place-items: center; font-size: 1.05rem;
    background: #fff; border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.palci-b:hover { transform: translateY(-1px); }
/* Odabrani se OBOJI, drugi izblijedi — potvrda mora biti vidljiva i bez
   teksta, jer teksta ovdje namjerno nema. */
.palci-b.je-gore  { background: #dcfce7; border-color: #16a34a; }
.palci-b.je-dolje { background: #fee2e2; border-color: #ef4444; }
.palci-b.bez-boje { opacity: .25; }
.palci-b[disabled] { cursor: default; }
html.dark-theme .palci-b { background: #2a2927; border-color: #3b3a37; }
html.dark-theme .palci-b.je-gore  { background: #14532d; border-color: #22c55e; }
html.dark-theme .palci-b.je-dolje { background: #7f1d1d; border-color: #f87171; }


/* Podignute trake gube donju sigurnu zonu — iznad tipkovnice ona nije rub
   ekrana nego prazan pojas izmedu polja i tipaka. */
html.kb-open #home-chatbar,
html.kb-open #dash-chatbar-wrap {
    padding-bottom: 0.15rem !important;
}


/* === E-ink: crno-bijelo, bez gibanja === */
/* Ivo (26.08.): „eink je monochrome samo crno i bijelo (…) mislija san na
   optimizacije kad se animiraju neki prjelazi i slicno, kako refreshanje
   ekrana ide".

   Elektronska tinta se ne osvjezava kadar po kadar nego po PROMJENI, a veca
   promjena trazi puni prolaz koji vidljivo bljesne. Zato ovdje vrijedi obrnuto
   od obicnog zaslona: trenutacna promjena je JEFTINIJA od glatke, a trajna
   animacija je najgore sto postoji — ploca se nikad ne smiri i ostaju duhovi.

   Ovaj izgled nasljeduje `python-look` (obje klase stoje na <body>), pa se
   ravne plohe i debeli obrisi ne pisu ponovno. Ovdje se dodaje samo ono sto je
   za tintu posebno. */

/* 1. GIBANJE ODLAZI, SVE. Ne usporava se nego gasi: 234 prijelaza i animacija
      u ovom listu svaki je na tinti jedno titranje.
      `!important` jer mnogi su pisani inline ili u utility klasama. */
body.eink-look *,
body.eink-look *::before,
body.eink-look *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* 2. CRNO I BIJELO, bez medutonova. Uredaj sive razlaže u uzorak, pa svaki
      medution daje mrljav trag. `contrast` gura ono sto ostane prema krajevima
      skale. Filtar na <body> hvata I slike I ikone I maskotu odjednom —
      pojedinacno bojenje stotinu mjesta bilo bi i nepotpuno i krhko.

      ZASTO JE FILTAR NA <body> OVDJE SIGURAN. `filter` na elementu pretvara
      ga u containing block za sve `position: fixed` potomke — inace bi to
      odlijepilo zaglavlje, traku za unos i skocne prozore od zaslona. Ovdje
      ne odlijepi jer je `<body class="h-[100dvh] flex overflow-hidden">`: ima
      TOCNO visinu zaslona i NE skrola, pa mu se ishodiste i veličina poklapaju
      sa zaslonom. Sadrzaj skrola unutar `#content-container`, ne na tijelu.

      AKO IKAD TIJELO POCNE SKROLATI — makni `overflow-hidden` ili `h-[100dvh]`
      i ovaj filtar mora otici s njim, inace ce fiksne trake otputovati sa
      sadrzajem. Tada filtar ide na `img, svg, canvas` a boje se gase pravilima. */
body.eink-look {
    filter: grayscale(1) contrast(1.35);
    background: #fff;
}

/* 3. ZNACENJE NA OBLIK, ne na boju. Tocno i netocno su danas zeleno i crveno;
      na sivom su to dvije skoro iste plohe. Zato se razlikuju DEBLJINOM okvira
      i punom/praznom ispunom — isto pravilo koje vec vrijedi za crteze u
      knjizi („ispunu razlikuj po debljini, ne svjetlini"). */
/*    Kvacica i krizic vec postoje (`.opt-ok::after` / `.opt-no::after`) i oni
      su pravi nositelj razlike — ali su obojeni, pa na sivom postaju dvije
      skoro iste plohe. Ovdje se boja gasi u cistu crnu, a `ring-2` iz
      Tailwinda (koji je box-shadow, dakle siva mrlja) makne se s puta da ne
      natjece s okvirom. */
body.eink-look .opt-ok,
body.eink-look .opt-no   { box-shadow: none !important; background: #fff !important; }
/* Ivo (28.08.): „kad se upre u kvizu pitanje, tocan odgovor se oznaci malo
   „boldan" i time se poveca malo ta kucica i pomaknu se ove ispod. To
   inace nebi na nijednoj varijanti tema (…) ako se one „boldaju" neka
   ostanu tocno di jesu i kucice i okolina."

   `border: 3px` je ULAZIO u raspored: izmjereno 58 -> 62 px visine, a
   iduca kucica se spustila 4 px. Unutarnja sjena crta istu debljinu
   unutar iste kutije, pa se ne mice nista. Isto je vec jednom uhvaceno
   na biracu kolokvija — `border` mijenja raspored, `box-shadow` ne. */
body.eink-look .opt-ok   {
    border-width: 1px !important;
    box-shadow: inset 0 0 0 2px #000 !important;
}
body.eink-look .opt-no   { border: 1px dashed #000 !important; opacity: 1; }
body.eink-look .opt-ok::after,
body.eink-look .opt-no::after { color: #000; }
body.eink-look .palci-b.je-gore  { border: 3px solid #000; background: #fff; }
body.eink-look .palci-b.je-dolje { border: 1px dashed #000; background: #fff; }

/* 4. Rubovi umjesto sjena — sjena je na tinti siva mrlja bez informacije. */
body.eink-look .msub-card,
body.eink-look .home-course-card,
body.eink-look .dash-quick-card,
body.eink-look .palci-b,
body.eink-look .msub-pop-card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
}

/* 5. Prozirnost izblijedjelog stanja ne prolazi — 25 % sive je na tinti
      uzorak koji se jedva vidi. Umjesto toga se element makne s puta. */
body.eink-look .palci-b.bez-boje { opacity: 1; visibility: hidden; }


/* === E-ink: Onyxova pravila razvoja === */
/* Onyx ima svoj vodic za razvoj aplikacija ("How to develop Apps for BOOX
   eink device", doc/Eink-Develop-Guide.md u onyx-intl/OnyxAndroidDemo). Sest
   pravila; tri od njih su ovdje, jer se rjesavaju stilom.

   IZMJERENO na pocetnom ekranu (273 elementa) prije ovih pravila:
       font ispod 14px   26 elemenata (24 na 12px, jedan 10px, jedan 11,2px)
       prozirnih slojeva 11
       premalih gumba    5  (`nav-menu-btn` 37px, a uz rub treba 48)

   Popisi klasa nisu pisani napamet nego IZVEDENI grepom nad stablom:
       grep -roh -E "(bg|border|text)-[a-z]+(-[0-9]+)?/[0-9]+" templates static/js
       grep -roh "text-\[[^]]*\]" templates static/js
   Ako se doda nova prozirna klasa, isti grep je nalazi. Ovo je popis, ne
   mehanizam — i to je namjerno: mehanizam bi trazio da CSS zna citati
   izracunatu alfu, a to ne moze. */

/* --- Pravilo 5: font ne manji od 14sp ---------------------------------
   Goli SPAN/DIV/STRONG koji su mjereni na 12px NASLIJEDE velicinu od
   roditelja s `text-xs`, pa ih popravlja isti redak — ne treba ih nabrajati. */
body.eink-look .text-xs,
body.eink-look .text-\[9px\],
body.eink-look .text-\[10px\],
body.eink-look .text-\[11px\] { font-size: 14px !important; }

/* --- Pravilo 2: bez prozirnih slojeva nad tekstom i slikama -----------
   Poluprozirna ploha se na tinti ne mijesa nego RAZLAZE u uzorak tockica,
   pa ispod nje tekst posivi i zamrlja se. Zato sve postaje puna ploha.

   `opacity-0` je iznimka: to nije prozirnost nego SKRIVANJE. Da ga ovo
   pokupi, na zaslon bi ispalo sve sto je namjerno sakriveno. */
body.eink-look [class*="opacity-"]:not(.opacity-0) { opacity: 1 !important; }
body.eink-look * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Bijele i blijede ispune -> cista bijela. */
body.eink-look [class*="bg-white/"],
body.eink-look [class*="-50/"] { background-color: #fff !important; }

/* Zastor ispod skocnog prozora. Na LCD-u je crn i proziran; na tinti bi to
   bila velika tamna ploha — najskuplji moguci zahvat za plocu, uz to i
   zamrljan. E-citaci to rjesavaju obrnuto: zastor je BIJEL, a prozor iznad
   njega se izdvaja debelim crnim rubom. */
body.eink-look [class*="bg-black/"],
body.eink-look [class*="bg-slate-900/"] { background-color: #fff !important; }
body.eink-look [class*="border-white/"] { border-color: #000 !important; }
/* Ova tri ne dolaze iz Tailwinda nego iz ovog lista, pa ih gornji uzorci po
   klasi ne mogu vidjeti — nadeni su mjerenjem izracunatog stila, ne citanjem.
   `.stat-modal-overlay` je JEDAN zastor za svih pet skocnih prozora
   (stats, all-continue, all-progress, auth, leaderboard). */
body.eink-look .stat-modal-overlay {
    background: #fff !important;
    backdrop-filter: none !important;
}
body.eink-look .stat-modal-overlay > * { border: 2px solid #000; }
/* Gumb za bube je namjerno poluproziran da ne smeta; na tinti poluprozirnost
   ne postoji kao takva nego kao uzorak, pa je citljiviji kao obicna ploha
   s rubom. */
body.eink-look #bug-report-btn {
    opacity: 1 !important;
    background: #fff !important;
    border: 1px solid #000;
}
body.eink-look .settings-label { font-size: 14px !important; }

body.eink-look [class*="text-white/"],
body.eink-look [class*="text-blue-100/"],
body.eink-look [class*="text-slate-400/"] { color: inherit !important; }

/* --- Pravilo 6: gumb u sredini >=36dp, uz rub >=48dp ------------------
   SAMO GUMBI, ne i tekstualne poveznice. Onyxovo pravilo govori o ikonama
   gumba; da se primijeni na svaki `<a>`, poveznica usred recenice bi narasla
   na 36px i razbila redak. Izmjereno: dvije takve poveznice u tekstu su
   16px i tu i ostaju. */
body.eink-look button,
body.eink-look [role="button"] { min-width: 36px; min-height: 36px; }

/* Uz rub je prag 48: ondje prst promasuje jer nema prostora s obje strane.
   Trake su `position: fixed`, pa je "uz rub" ovdje odredivo imenom, ne
   racunom. */
body.eink-look header button,
body.eink-look #nav-menu-btn,
body.eink-look #input-area button,
body.eink-look #bug-report-btn { min-width: 48px; min-height: 48px; }


/* === E-ink: bez gradijenata === */
/* Ivo s Onyxa (26.08., fotografija zaslona): „ove gradijente NE za onyx".
   Na fotografiji su oko oblacica i maskote sivi mrljavi oblaci — to je
   gradijent kakvim ga tinta jedino zna prikazati. Ploca nema medutonove nego
   ih razlaze u uzorak tockica, pa svaki prijelaz boje postane mrlja.

   IZMJERENO: 129 gradijenata u stablu (102 u ovom listu + 27 inline u JS-u),
   a `background-image: url()` — NIJEDAN. Zato se gasi jednim pravilom umjesto
   popisom od 129 mjesta; provjereno i u pogonu, na uvodnom zaslonu nijedan
   element nema pravu sliku u pozadini. */
body.eink-look *,
body.eink-look *::before,
body.eink-look *::after { background-image: none !important; }

/* IZBORNIK GODINE MORA IZGLEDATI KAO IZBORNIK (Ivo, 02.09.: „nejasan
   padajuci izbornik").
   Pravilo iznad gasi obje pozadinske slike `#setup-year-select` -- i ikonu
   semestra i strelicu prema dolje -- a `appearance-none` je vec maknuo i
   sustavnu strelicu. Ostajala je gola bijela kutija s 2,5 rem praznine
   lijevo: nista na njoj nije govorilo da se moze otvoriti.

   Strelica se zato vraca kao ZNAK, ne kao slika: `::after` s trokutom nije
   pozadina pa ga gornje pravilo ne dira, a na tinti se crta ostro. Kutija
   dobiva deblji rub i cijelu sirinu praznine natrag. */
/* STRELICA NATRAG NA TINTI (Ivo: „izrazenija strelica natrag").
   Gumb je bijel na gradijentu, a gradijent se na tinti gasi -- ostajao je
   bijeli znak na bijelome. Dobiva crni okvir i crni znak, i Onyxovih 48 px
   dodirne mete, koje ga inace preskacu jer se love po `bg-*` klasama koje
   ovaj gumb nema. */
body.eink-look .setup-natrag {
    border: 2px solid #000 !important;
    color: #000 !important;
    width: 48px !important; height: 48px !important;
}
body.eink-look .setup-natrag > span { color: #000 !important; font-size: 1.6rem; }

body.eink-look .setup-god-kut { position: relative; display: block; }
body.eink-look .setup-god-kut::after {
    content: ''; position: absolute; right: 0.9rem; top: 50%;
    width: 0; height: 0; margin-top: -0.15rem; pointer-events: none;
    border-left: 0.38rem solid transparent;
    border-right: 0.38rem solid transparent;
    border-top: 0.42rem solid #000;
}
body.eink-look #setup-year-select {
    border: 2px solid #000 !important;
    padding-left: 0.8rem !important;
    padding-right: 2.2rem !important;
    min-height: 48px;
    font-weight: 700;
}

/* NAZIV PREDMETA SE NE SMIJE PRELITI PREKO KVACICE (Ivo: „naziv se
   preklapa"). Redak je flex; naziv ima `flex-1`, ali bez `min-w-0` flex
   stavka ne smije pasti ispod svoje prirodne sirine, pa dugacak naziv gura
   kvacicu van umjesto da se prelomi. Kvacica usto nema `shrink-0`, pa se
   stisne. Na tinti je gore nego drugdje jer pravilo `body.eink-look
   .text-xs...` dize jezicnu oznaku s 9 na 14 px, pa redak jos naraste. */
body.eink-look #setup-list[data-step="subjects"] .flex-1 { min-width: 0; }
body.eink-look #setup-list[data-step="subjects"] .check-icon { flex-shrink: 0; }

/* ---- ALI GRADIJENT KOJI NOSI PODATAK SE NE SMIJE UGASITI --------------
   Prvo sam htio stati na pravilu iznad. Provjera je pokazala da bi to
   obrisalo NAPREDAK: trake i krugovi postotka crtaju se bas gradijentom.
   Dvije vrste, i ne rjesavaju se isto:

   TRAKE — vrijednost nosi SIRINA ispune, boja je ukras. Puna crna ploha
   kaze isto, i na tinti citljivije nego prijelaz. */
body.eink-look .mw-bar-fill,
body.eink-look .mw-bar-fill--green,
body.eink-look .mw-bar-fill--gold,
body.eink-look .mw-bar-fill--red,
body.eink-look .mpo-summary .mw-bar-fill,
body.eink-look .lb-team-fill,
body.eink-look .lb-q-fill,
body.eink-look .lb-ml-fill,
body.eink-look .apm-wk-bar i.apm-win { background: #000 !important; }

/*  KRUGOVI — vrijednost nosi KUT, pa gradijent MORA ostati; samo mu se boje
    zamijene crnom i svijetlom. Da je i on ugasen, krug postotka bi ostao
    prazan i „0 %" bi izgledalo isto kao „100 %". */
body.eink-look .dash-progress-ring {
    background-image: conic-gradient(#000 var(--p, 0%), #d1d5db 0) !important;
}

/* ---- SJAJ ODLAZI, PRSTEN OSTAJE --------------------------------------
   Zamucena sjena je na tinti ista mrlja kao gradijent (na fotografiji je to
   pravokutni oblak iza oblacica). Ali sjena s nula zamucenja je CIST OKVIR i
   nosi znacenje — Tailwindov `ring-*` tako oznacava odabrano i fokus.

   Razlikuju se po tome tko ih nosi: `ring-` je uvijek klasa na elementu, a
   sjaj dolazi iz vlastitih pravila. Zato izuzece ide po klasi, ne po popisu. */
body.eink-look *:not([class*="ring-"]) { box-shadow: none !important; }
/* Trenutno poglavlje u karti znanja oznaceno je sjenom bez `ring-` klase, pa
   bi ga pravilo iznad progutalo. Okvir kaze isto. */
body.eink-look .kmap-cell.k-cur { box-shadow: none !important; outline: 2.5px solid #000; }


/* === E-ink: Glava treba VLASTITU sliku === */
/* POVUCENO 26.08., isti dan kad je i napisano. Ovdje je stajao filtar
   `brightness(1.55) contrast(14)`, koji je glavu pretvarao u crn obris na
   bijelom. Ivo s Onyxa: „nestale su oci inzenjerku."

   Mjerenje je bilo tocno, citanje mjerenja nije. Tri sloja crteza su:
       obris        L <= 0,30
       ISPUNA       L  = 0,35
       oci i osmijeh L = 0,90        <- ovo sam nazvao „svijetli prsten"
   Oci su SVIJETLE na tamnoj ispuni. Svaki prag koji ispunu digne u bijelo
   nuzno digne i oci, jer su s iste strane praga — pa glava ostane prazna.

   I to nije stvar biranja boljeg praga. Lice je citljivo SAMO zato sto je
   ispuna tamna; obris i lice ne mogu istovremeno biti crni na bijelom dok
   ih dijeli jedan monotoni prijelaz. Za crtez na bijelom treba DRUGI CRTEZ,
   gdje su i obris i lice tamni.

   Zato se ovdje ne filtrira nista, nego se trazi vlastita slika — v.
   `icon-palette.js`, koji na e-inku gadja `glava-eink/` i tiho pada natrag na
   ravnu glavu dok ta slika ne postoji. Ivo (26.08.): „ovako nesto bi inace
   mogla bit i ikona za inzenjerka ova kao prilagodena za eink, a to da bude
   posebna ikona neka detektira kad je eink." */


/* === E-ink: kviz raste prema dolje, ne pomice vec nacrtano === */
/* Ivo s Onyxa (26.08.): „bilo bi bolje da pitanja nisu ovako skroz po sredini
   nego maki 'gori' tako da kad korisnik upre i dobije odgovor, da se samo
   dodaju stvari na ekran. Na primjer, odgovor ce samo bit dodan ovdje a ne da
   se gornji dio (pitanje i ponudeni odgovor) mora pomicat."

   To je najvaznija stvar na cijeloj listi. Kartica je centrirana
   (`margin-block: auto`), pa kad se ispod odgovora doda objasnjenje, kartica
   naraste i centriranje je POMAKNE UVIS — pitanje i ponudeni odgovori se
   prekrizu na novo mjesto iako im se sadrzaj nije promijenio. Na obicnom
   zaslonu to nitko ne primijeti; na tinti je to PONOVNO CRTANJE CIJELOG
   ZASLONA umjesto dodavanja jednog odlomka.

   Zalijepljeno na vrh, dodavanje objasnjenja dira samo prazan prostor ispod. */
body.eink-look #view-quiz:not(.hidden) > *:only-child { margin-block: 0 !important; }

/* ---- Traka napretka: crna, i drzi stanje oblikom ---------------------
   Ivo: „ova livo verikalna traka, neka bude skroz crna." Bila je blijedo siva
   (#e2e8f0), sto tinta jedva nacrta.

   Stanja se NE smiju izgubiti, a boja ih na sivom ne moze nositi — pa se
   koristi isti kljuc kao kod ponudenih odgovora, da student ne uci dva:
       neodgovoreno   tanak crn obris, prazno
       tocno          puna crna
       netocno        crtkan obris, prazno
       trenutno       puna crna i vise (`scaleY` je vec ondje) */
body.eink-look .quiz-step {
    background-color: #fff !important;
    border: 1px solid #000;
    transition: none !important;
}
body.eink-look .quiz-step.active,
body.eink-look .quiz-step.correct { background-color: #000 !important; }
body.eink-look .quiz-step.incorrect { border-style: dashed; background-color: #fff !important; }

/* ---- Gumbi: tanak crn obrub, crn tekst, bijelo unutra ----------------
   Ivo: „ovo NEXT, neka bude samo bili tanki crni obrub i unutra crno next."

   Puna tamna ploha je na tinti najskuplji zahvat — velika promjena piksela
   trazi puni prolaz koji bljesne. Obrub kaze isto, a mice se gotovo nista.

   Bira se po OBITELJI boje, ne po popisu gumba: `bg-blue-600` se pojavljuje
   46 puta, `bg-blue-700` 23, i tako dalje kroz osam obitelji. Popis pojedinih
   gumba bi se razisao pri prvom novom ekranu; obitelj boje ne. Ograniceno na
   `button` i `a` da kartice i trake ne pokupe obrub. */
body.eink-look button[class*="bg-blue-"],
body.eink-look button[class*="bg-indigo-"],
body.eink-look button[class*="bg-violet-"],
body.eink-look button[class*="bg-purple-"],
body.eink-look button[class*="bg-emerald-"],
body.eink-look button[class*="bg-green-"],
body.eink-look button[class*="bg-amber-"],
body.eink-look button[class*="bg-red-"],
body.eink-look button[class*="bg-slate-"],
body.eink-look a[class*="bg-blue-"],
body.eink-look a[class*="bg-indigo-"],
body.eink-look a[class*="bg-emerald-"],
body.eink-look a[class*="bg-slate-"] {
    background-color: #fff !important;
    color: #000 !important;
    /* 1,5 px — TANKO. Nakratko je ovdje stajalo 3 px i to je bila moja
       pretjerana primjena: Ivo je trazio deblji rub SAMO ondje gdje se bira
       teorija/zadaci i kolokvij 1/2, a ja sam ga stavio na svaki ispunjen
       gumb u aplikaciji. Ivo (27.08.): „podeblja si u svin izbornicima ove
       crte okvire, prije su bili lipši."
       Deblji rub je sada dolje, i to imenom, samo na tim biracima. */
    border: 1.5px solid #000;
}
/* `text-white` na DJETETU gumba nadjacava boju s gumba — bez ovoga bi natpis
   ostao bijel na bijelom, dakle nevidljiv. */
body.eink-look button[class*="bg-"] *,
body.eink-look a[class*="bg-"] * { color: #000 !important; }


/* === E-ink: Sto lebdi, dobiva obrub === */
/* Ivo s Onyxa (26.08.): „kad se otvori glavni padajuci izbornik, fali mu tanki
   crni okvir oko njega."

   Uzrok je moj: izbornik se od pozadine odvajao DVOSTRUKO — `border-blue-200`
   i `shadow-xl`. Blijedoplavi rub je na sivom nevidljiv, a sjene sam ugasio
   nekoliko pravila iznad. Ostao je bez ijedne granice i stopio se sa
   sadrzajem ispod.

   Isto vrijedi za sve sto lebdi, ne samo za izbornik — i zato se ne popisuje
   po imenu. Tailwindova klasa `shadow-lg` / `shadow-xl` / `shadow-2xl` JEST
   izjava „ovo je iznad stranice"; na tinti se ta izjava samo izgovara drukcije,
   obrubom umjesto sjenom. `shadow-sm` (56 mjesta) namjerno NIJE tu: to su
   kartice u toku stranice, one ne lebde i ne treba im okvir. */
body.eink-look [class*="shadow-lg"],
body.eink-look [class*="shadow-xl"],
body.eink-look [class*="shadow-2xl"],
body.eink-look #sidebar-nav,
body.eink-look .msub-pop-card {
    border: 1.5px solid #000 !important;
}


/* === E-ink: Audioknjiga — okvir oko recenice, ne sjena === */
/* Ivo s Onyxa (26.08.): „na onyx neka oko recenice koja se trenutno cita bude
   samo dodan tanki crni okvir koji se brise i pomice a tekst stoji na isto
   misto."

   Sivo isticanje (`.ab-sent.is-now { background: #e2e8f0 }`) na tinti postane
   uzorak tockica preko slova, pa se recenica koja se cita cita LOSIJE od
   ostalih — tocno obrnuto od namjere.

   `outline`, NE `border`. To je cijela poanta njegove recenice „tekst stoji na
   isto misto": `border` ulazi u raspored i gurne svaki sljedeci redak za dva
   piksela, pa bi svaki prijelaz na novu recenicu preslozio cijeli odlomak —
   na tinti ponovno crtanje cijele stranice umjesto jednog okvira. `outline` se
   crta IZVAN okvira elementa i ne zauzima prostor, pa se doslovno samo doda i
   makne. */
body.eink-look .ab-sent.is-now {
    background: transparent !important;
    color: inherit !important;
    outline: 2px solid #000;
    outline-offset: 1px;
}


/* Kostur ljestvice: pravi redak bez sadrzaja. Blijedo, da se vidi da nesto
   dolazi, ali da ne izgleda kao podatak. Na tinti se ne pulsira — svako
   pulsiranje je ondje novo osvjezavanje ploce. */
.dash-lb-kostur { opacity: .45; }
/* Prazno stanje se smjesta U zakljucani okvir umjesto da ga rastegne. */
.dash-lb-empty { max-height: 100%; overflow: hidden; }
.dash-lb-list { display: flex; flex-direction: column; justify-content: flex-start; }
.dash-lb-kostur .dash-lb-name {
    background: #e2e8f0; border-radius: 4px; max-width: 60%;
}
body.eink-look .dash-lb-kostur .dash-lb-name {
    background: transparent; border-bottom: 1px solid #000;
}


/* === E-ink citac: skripta kao knjiga === */
/* Cijeli zaslon, jedno podpoglavlje, stranice se okrecu livo-desno.
   Vidi `static/js/eink-citac.js` za razloge; ovdje je samo izgled. */
#eink-citac { display: none; }
#eink-citac.je-otvoren {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 60;
    background: #fff;
    /* CITAC NAMJERNO NE RACUNA S TRAKOM.
       Ivo je pokazao Booxov citac (26.08.): tekst je preko cijelog zaslona, a
       i izbornik aplikacije i sistemski sat crtaju se PREKO njega — tekst
       ostaje gdje je bio.

       Time pada moja ranija tvrdnja da se ne moze istovremeno zadrzati
       prostor i ne pomaknuti sadrzaj. Moze, i to je treci put koji nisam
       naveo: raspored se jednostavno ne veze uz `--safe-top`. Cijena je da
       traka nakratko PREKRIJE vrh, a ne da ga pomakne — za citac je to dobra
       zamjena, jer je vrh ionako samo naslov s odmakom.

       Za zaglavlje aplikacije rezervacija ostaje (v. native-bridge.js): ondje
       bi trajno stajanje pod satom bilo kvar, a ne trenutak. */
    /* GRADIVO IDE PREKO CIJELOG ZASLONA (Ivo, 04.09.2026.: „ja bi da bude full
       screen tekst").
       Ovdje je nakratko stajao uzmak `+ var(--safe-top)`, kao pokusaj da se
       objasni odrezan prvi redak. Bila je to kriva dijagnoza i vracena je:
       tekst nije rezala sistemska traka nego nadoknada skrola u `setHidden`
       (app.js), koja je citacu dodavala visinu zaglavlja na `scrollTop`.
       Uzmak je samo krao prostor, a rez ostavljao. */
    padding: 1.4rem 1.1rem 0.6rem;
}
/* SIRINA STUPCA NA SIROKOM ZASLONU (Ivo, 03.09.2026.: „opet su pre-siroki
   prozori na desktop, pogledaj razmak izmedu live i desne strane, to ogranici
   na neki maksimum").
   Citac postavlja sirinu stupca IZ JS-a, jednaku `clientWidth` spremnika — i to
   pravilo se ne smije dirati (v. komentar uz `.ec-tok`: cim se korak i sirina
   raziđu, tekst se rezao s lijeva). Zato se NE ogranicava stupac nego LJUSKA:
   `clientWidth` time postane 56rem, pravilo ostaje netaknuto, a redak prestaje
   biti dug preko cijelog zaslona.
   56rem (~900 px) daje oko 90 znakova u retku pri zadanom fontu — gornja
   granica onoga sto se jos ugodno cita; sve preko toga oko mora skakati natrag
   preko pola zaslona da nade sljedeci red.
   Vrijedi tek od 1024 px: na telefonu i tabletu je zaslon ionako uzi, a
   `inset: 0` ondje mora ostati da se ne pojave bijele trake sa strane. */
@media (min-width: 1024px) {
    #eink-citac.je-otvoren {
        left: 50%; right: auto;
        width: min(56rem, 100vw);
        transform: translateX(-50%);
    }
}
/* Dok je citac otvoren, ispod njega se nema sto skrolati. */
html.ec-aktivan, html.ec-aktivan body { overflow: hidden; }

.ec-vrh { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.ec-naslov { flex: 1; min-width: 0; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.ec-broj { color: #000; margin-right: .45rem; }
/* Strelica za sadrzaj: GORE DESNO. Ivo (26.08.): „tekst je left-aligned pa
   onda bolje da je desno malo gori pri vrhu jer tu je manja sansa da ce se
   preklapat s tekstom." Diskretna, ali dovoljno velika za prst (Onyxovo
   pravilo: >=48 dp uz rub). */
/* JEZICAK uz sam desni rub: spljosteni polukrug s tri vodoravne crtice.
   Ivo (26.08.): „neka strelica ta bude skroz uz desno stranu, i neka ima neki
   ka polu-krug a unutar polu-kruga ono tri crtice horzintalne. Mozda ne
   polukrug nego malo plosnatiji polu-krug."
   Zato radijus nije pola visine (to bi bio pravi polukrug) nego manji — oblik
   je plosnat. Sirina 26 px drzi ga diskretnim, a visina 56 px prstu daje sto
   mu treba (Onyxov prag uz rub je 48). */
.ec-jezicak {
    /* VRACENO na malo i bijelo (Ivo, 26.08.: „vrati ovo kako je bilo, ono
       bijeli tanki obrub a crnim linijama i da bude onako mali ko i prije").
       Nakratko je bio puna crna traka visoka 22 % zaslona, jer sam „vidljivije"
       procitao kao „vece" — a Ivo je htio samo da se bolje vidi, ne da preuzme
       rub stranice. */
    position: absolute; right: 0; top: 10px;
    width: 26px; height: 56px; padding: 0;
    border: 1.5px solid #000; border-right: 0;
    border-radius: 16px 0 0 16px;
    background: #fff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px;
    /* IZNAD ploce sadrzaja, ne ispod. Kad je ploca preko cijelog zaslona
       (telefon), jezicak na nizem sloju ostaje ZAKOPAN pod njom — a s njim i
       zastor, pa se sadrzaj nije imao cime zatvoriti. Ivo (26.08.): „ovi ToC
       mi je uvik prikazan". */
    z-index: 6;
}
.ec-jezicak i { display: block; width: 12px; height: 1.5px; background: #000; }
/* Otvoreno: obrne se, pa se vidi da isti gumb sada zatvara. */
#eink-citac.toc-otvoren .ec-jezicak { background: #000; border-color: #000; }
#eink-citac.toc-otvoren .ec-jezicak i { background: #fff; }

/* PLUTAJUCI SADRZAJ s desne strane, ne preko cijelog zaslona. */
.ec-toc {
    /* 90 % VISINE, NE 100 % (Ivo, 28.08.): „neka ne zauzima 100% visine malo
       bi smanjio na npr 90% visine da se vidi i da se vidi kao gornja i donja
       kontura koja ne prilazi gori priko glavnr trake."

       Ploca preko cijele visine je izgledala kao da je zaslon podijeljen na
       dvoje; s 90 % se vidi da je to PLOCA POVRH teksta, jer joj se vide i
       gornji i donji brid. Gore ostaje i mjesta da ne naleti na glavnu traku
       aplikacije. */
    /* VISINA SE VEZE UZ STVARNU TRAKU, NE UZ POSTOTAK (Ivo, 02.09.: „triba ga
       jos malo smanjit s gornje strane visinu tako da ne prolazi gori kroz
       glavnu traku").
       5 % je bilo dobro na telefonu, a na Onyxu je 5 % od ~1400 px otprilike
       tocno visina trake — pa ju je ploca dodirivala. `--ec-vrh` postavlja
       citac iz izmjerene visine zaglavlja (v. eink-citac.js), pa razmak vise
       ne ovisi o tome koliko je zaslon visok. Uzmak od 64 px vrijedi dok
       mjerenje ne stigne. */
    /* PLOCA ISPOD SVOJE IKONE, KAO LIJEVI IZBORNIK (Ivo, 02.09.: „neka ovi ToC
       bude odma ispod ovog ToC simbola (…) triba izgledat i imat stil i okvir
       kao ovaj livo padajuci glavni izbornik (…) nece ic skroz do desnog
       ruba").
       Ranije je bila prilijepljena uz desni rub i razvucena od vrha do 5 % od
       dna — dakle uvijek pune visine, bez obzira ima li predmet tri poglavlja
       ili trinaest.
       VISINA SE SAD RACUNA IZ SADRZAJA: `height: auto` + `max-height`, pa
       kratak sadrzaj zauzme malo, a dug naraste do gornje granice — tocno kako
       je Ivo trazio. `bottom` se zato NE postavlja; postavljen bi ponistio
       `auto` i vratio punu visinu. */
    position: fixed; right: .75rem; bottom: auto;
    /* „Mrvicu" veci razmak od trake (Ivo, 03.09.). Vrijedi kao uzmak; kad se
       ploca otvara iz zaglavlja, tocan `top` mjeri `otvoriToc` iz gumba. */
    /* Malo nize, da ne dodiruje gornju traku (Ivo, 10.09.2026.). */
    top: calc(var(--ec-vrh, 56px) + 1.4rem);
    /* 23rem JE IZMJEREN, ne odabran (Ivo, 03.09.2026.: „ograniči širinu na
       neku razumnu, malo veću od prosječnog naslova da npr svaki 8mi
       podnaslov bude u dva retka").
       Nad 3 900 stvarnih podnaslova iz `toc-tree-v1.6`: medijan je 33
       znaka, a 87,5. percentil — dakle svaki osmi — 46 znakova. Uz font
       retka (.9rem) to je 6,27 px po znaku, plus 37 px za broj i 35 px
       za padding: 361 px = 22,6 rem. Zaokruženo na 23rem. */
    /* Uza za jedan prst s obje strane: ploca se mora vidjeti kao ploca POVRH
       teksta, a ne kao drugi ekran (Ivo, 10.09.2026.: „malo smanji po sirini"). */
    width: min(21rem, calc(100vw - 3rem));
    max-height: min(76vh, calc(100vh - var(--ec-vrh, 56px) - 3.2rem));
    height: auto;
    /* ISTI OKVIR KAO LIJEVI GLAVNI IZBORNIK (Ivo, 03.09.2026.: „ovaj okolo
       okvir mi se svida kako izgleda (…) ovakav isti okvir bi da bude i s
       desne strane ispod ToC").
       `#sidebar-nav` ga nosi u Tailwind razredima — `rounded-lg`,
       `border-blue-200`, `shadow-xl` — pa su ovdje prepisane iste vrijednosti,
       a ne priblizne. Do sada se razlikovao u sve tri: radijus .75rem umjesto
       .5rem, jedna siroka sjena umjesto dvije, i — najvidljivije — CRNI
       `border-left: 1.5px` preko svijetloplavog okvira, ostatak iz doba kad je
       ploca bila prilijepljena uz rub zaslona. */
    border-radius: .5rem;
    border: 1px solid #bfdbfe;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    /* VELIKI E-INK: kompaktna ploca uz desni rub, tekst iza nje ostaje vidljiv.
       MALI ZASLON: ploca je i dalje uza od zaslona (Ivo, 02.09.: „kad je mali
       ekran neka svejedno ovo bude udaljeno i s live strane i gori malo").

       26.08. je ovdje stajalo `width: 100%` uz obrazlozenje „na andoidu malom
       ce to bit ofc priko cilog ekrana". Ispalo je krivo: preko cijele sirine
       ploca prestaje izgledati kao ploca POVRH teksta i izgleda kao da je
       aplikacija otisla na drugi ekran — a ne vidi se ni gdje si u gradivu.
       Traka slobodnog prostora s lijeve strane vraca taj osjecaj, isto kao
       sto ga gore vraca razmak od glavne trake.

       Granica 700 px je ista koju Onyxovi citaci uzimaju za „tablet". */
    /* `left: auto`, NE 2.4rem. Ovdje je stajalo `left: 2.4rem; width: auto`
       — ostatak pokusa s punom širinom na malom Androidu. Kako dolazi
       DVADESETAK REDAKA POSLIJE `width` gore, tiho ga je poništavalo: uz
       `right: .75rem` ploča se rastezala od lijevog do desnog ruba, pa je
       na širokom zaslonu bila ~1500 px. Komentar niže („širina je sada
       ista na svim zaslonima") opisivao je namjeru koja se nije izvodila. */
    left: auto;
    background: #fff;
    transform: translateX(101%); visibility: hidden;
    /* `touch-action: pan-y` kaze pregledniku da je OKOMITI potez ovdje skrol.
       Bez toga ga hvata nas slusac za okretanje stranice, a i preglednik ga
       moze protumaciti kao gestu. */
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    /* VLASTITI SLOJ (Ivo, 10.09.2026.: „malo blokaje ToC dok ga listan").
       Ploca je `position: fixed` s velikom sjenom i lista sadrzaj u sebi; bez
       promocije Android WebView pri svakom pomaku iznova slaze i sjenu i sve
       ispod nje. `transform` se ovdje ionako animira pri otvaranju, pa sloj
       nije nova stvar nego onaj koji ionako nastaje — samo unaprijed. */
    will-change: transform;
    touch-action: pan-y; z-index: 4;
    /* Isti razlog kao u obojenom izgledu: ploca ne dodiruje dno, pa joj uvlaka
       za sistemsku traku samo dopisuje prazninu. */
    padding: 1rem .9rem 1rem;
}
#eink-citac.toc-otvoren .ec-toc { transform: none; visibility: visible; }
/* Na tinti ostaje crni okvir (Ivo: „u eInk mogu ostat ovako crni okvir") — plava
   i sjena ondje ionako postaju siva mrlja. */
body.eink-look .ec-toc {
    border: 2px solid #000; box-shadow: none; border-radius: .4rem;
}
/* Sirina je sada ista na svim zaslonima (v. `width` gore), pa poseban
   desktop slucaj vise ne treba. */
/* Dok je sadrzaj otvoren, jezicak je JEDINI izlaz — pa se vidi da zatvara:
   crne se ispune i crtice pobijele. Na velikom zaslonu sjedne uz lijevi rub
   ploce, na telefonu ostaje uz rub zaslona jer ploca zauzima sve. */
@media (min-width: 700px) {
    #eink-citac.toc-otvoren .ec-jezicak { right: calc(23rem + 1rem); }
}
.ec-zastor { position: absolute; inset: 0; z-index: 3; display: none; }
#eink-citac.toc-otvoren .ec-zastor { display: block; }
/* Harmonika: poglavlje je gumb, podpoglavlja se skrivaju dok nije otvoreno. */
.ec-toc-pog {
    display: flex; align-items: baseline; gap: .5rem; width: 100%;
    text-align: left; background: transparent; border: 0; cursor: pointer;
    font-weight: 800; font-size: .95rem; color: #000;
    padding: .5rem .2rem; margin: 0;
}
.ec-toc-znak { display: inline-block; min-width: 1em; font-weight: 700; opacity: .7; }
.ec-toc-djeca { display: none; padding-left: .2rem; }
/* Kviz/Blitz/Interaktivni na dnu OTVORENOG poglavlja — vidi se s njim i
   nestaje s njim. */
.ec-toc-akcije { display: none; gap: .35rem; flex-wrap: wrap; padding: .5rem .2rem .2rem; }
.ec-toc-grana.je-otvorena .ec-toc-akcije { display: flex; }
.ec-toc-akcije button { font-size: .72rem !important; padding: .25rem .5rem !important; }
.ec-toc-grana.je-otvorena .ec-toc-djeca { display: block; }
.ec-toc-grana + .ec-toc-grana { border-top: 1px solid #e2e8f0; }
body.eink-look .ec-toc-grana + .ec-toc-grana { border-top-color: #000; }
.ec-toc-sub {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; padding: .42rem .2rem;
    font-size: .9rem; line-height: 1.3; cursor: pointer; color: #000;
}
.ec-toc-broj { display: inline-block; min-width: 2.6em; opacity: .6; }
/* Gdje si sada — okvirom, ne ispunom: ispuna bi na tinti bila mrlja. */
.ec-toc-sub.je-tu { outline: 1.5px solid #000; outline-offset: -1px; font-weight: 700; }

/* Glavna traka se pokaze PREKO citaca. Citac je `position: fixed` sa `z-index`
   60, pa se zaglavlje (z-index nizi) ne bi vidjelo — ovdje se za taj trenutak
   digne iznad njega. Tekst se pritom NE POMICE, sto je cijela poanta.

   OVDJE JE STAJALO `#eink-citac.traka-vidljiva { top: 56px; }` — i to je bio
   Ivin „skace tekst" (04.09.2026.). Pravilo je tvrdilo suprotno od onoga sto
   je radilo: pomicanjem `top` mijenjala se VISINA citaca, pa se u tinti tekst
   iznova prelamao u stupce. `scrollLeft` je ostajao ondje gdje je bio, sto je
   nakon prijeloma druga stranica — a zna biti i stranica koje vise nema, pa
   se ukaze prazno okno. Citac sada stoji na `top: 0` uvijek; jedino sto se
   mijenja je vidljivost zaglavlja, a ono lebdi iznad (`position: absolute`,
   `z-index: 61`) i nista ne gura. */
html.ec-aktivan #app-header {
    z-index: 61;
    /* IZVAN TOKA dok se cita: u toku bi njegovo pojavljivanje pomicalo sve
       ispod (v. `#eink-citac.ec-skrol.je-otvoren`). Ovako klizi preko. */
    position: absolute; top: 0; left: 0; right: 0;
}

/* DOK SE CITA, TRAKE NEMA — U SVAKOM IZGLEDU (Ivo, 04.09.2026.: „Neka kad se
   udje u skriptu bude skrivena traka, i dok se scrolla prema doli ostaje
   skrivena, a scrol prema gori neka je prikaze").
   Selektor je dosad trazio i `ec-tinta`, pa je pravilo vrijedilo SAMO na
   Onyxu; u Icons izgledu je zaglavlje stajalo preko gradiva cijelo vrijeme.
   Sada vrijedi svugdje gdje je citac otvoren, a `ec-traka` ga iskljuci — tu
   klasu postavlja `postaviTraku` u `eink-citac.js` i ona je JEDINI nositelj
   stanja. */
html.ec-aktivan:not(.ec-traka) #app-header { display: none; }

/* SRCE PRIJELOMA. Spremnik ima visinu zaslona i stupac sirok kao on sam, pa
   preglednik razlije tekst u stupce jedan do drugoga — svaki stupac je jedna
   stranica. Okretanje je pomak `scrollLeft` za tocno jednu sirinu. */
.ec-tok {
    flex: 1 1 auto; min-height: 0;
    /* SIRINA STUPCA SE POSTAVLJA IZ JS-a, u pikselima, i jednaka je sirini
       ovog spremnika. Ovdje je prvo stajalo `column-width: 100vw` uz razmak od
       2,2rem — i to je bio kvar koji je Ivo vidio na Androidu: stupac je bio
       sirok koliko ZASLON, a korak okretanja koliko SPREMNIK, koji je uzi za
       obrub. Svaka stranica je time odlutala malo dalje, pa je tekst bio
       odrezan s lijeva a desno je virio sljedeci stupac.

       Razmak je 0 namjerno: uvijek se vidi tocno jedan stupac, pa susjedni
       nemaju sto razdvajati — a svaki piksel razmaka bi opet razisao korak i
       sirinu. Odmak od ruba daje `#eink-citac`, ne ovaj spremnik: da ga ima
       ovdje, sirina sadrzaja vise ne bi bila `clientWidth`. */
    padding: 0;
    column-gap: 0; column-fill: auto;
    overflow-x: hidden; overflow-y: hidden;
    /* Bez glatkog klizanja: na tinti je svaki medupolozaj jedno osvjezavanje. */
    scroll-behavior: auto;
}
/* Sto se NE SMIJE prelomiti preko granice stranice. Bez ovoga stupci lome
   gdje stignu, pa se slika presijece na pola a blok koda razdvoji. */
.ec-tok figure, .ec-tok img, .ec-tok pre, .ec-tok table,
.ec-tok .ing-figure, .ec-tok blockquote, .ec-tok details,
.ec-tok .wex-step, .ec-tok h1, .ec-tok h2, .ec-tok h3 {
    break-inside: avoid; page-break-inside: avoid;
}
/* Naslov ne smije ostati sam na dnu stranice. */
.ec-tok h1, .ec-tok h2, .ec-tok h3 { break-after: avoid; }
.ec-tok img { max-width: 100%; height: auto; }

.ec-noga { text-align: center; font-size: .8rem; color: #000; opacity: .6; padding-top: .3rem; }

/* BEZ OZNACAVANJA NAD GRADIVOM (Ivo, 02.09.: „ovo makni sa nema oznacavanje
   samo download pdf ili podjeli").
   Androidov Copy/Translate/Select all je alat za kopiranje NASEG sadrzaja, i
   iskakao je na ekranu na kojem upravo pise da se sadrzaj ne smije umnazati.
   Dugi dodir sad umjesto njega otvara nas izbornik (izvoz / dijeljenje).

   OGRANICENO NA GRADIVO. Chat, polja za upis i sve ostalo zadrzavaju
   oznacavanje — student mora moci prenijeti recenicu u svoju biljesku ili u
   pitanje tutoru, a to nam nije ni bila zamjerka. */
#view-script .chunk-container,
#view-script .font-bold.text-xl,
#eink-citac .ec-tok {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
/* …ALI NE I CHAT PODPOGLAVLJA, koji zivi UNUTAR odlomka. Ondje su studentove
   vlastite poruke i tutorovi odgovori na njegovo pitanje -- to nije gradivo
   koje stitimo, nego njegov razgovor, i mora se moci kopirati. Isto vrijedi
   za svako polje za upis. */
#view-script .subchat-panel,
#view-script .subchat-panel *,
#view-script input, #view-script textarea,
#view-script [contenteditable="true"] {
    -webkit-user-select: text; user-select: text;
    -webkit-touch-callout: default;
}

/* === ZASTITA SADRZAJA (v. zastita-sadrzaja.js) ===========================
   Ograda, ne brava — objasnjeno u zaglavlju tog modula. `-webkit-touch-
   callout` gasi iOS-ov „Spremi sliku" na dugi dodir; `user-drag` povlacenje
   slike van. Tekst se NE dira: student mora moci prenijeti recenicu. */
.ingeniko-figure img, .ing-figure img,
.chunk-container img, #view-script img, #eink-citac img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none; -webkit-user-select: none;
}
/* „Zatrazi predmet" na dnu popisa „Moji predmeti" — isti isprekidani okvir
   kao u carobnjaku, da se prepozna kao ista ponuda na dva mjesta. */
/* Arhiva je `<details>` i sklopljena je dok je student ne otvori. Trokutic
   crtamo sami, jer zadani marker preglednici prikazuju svaki na svoj nacin. */
.msub-arhiv > summary {
    cursor: pointer; list-style: none; display: flex;
    align-items: center; gap: .45rem;
}
.msub-arhiv > summary::-webkit-details-marker { display: none; }
.msub-arhiv > summary::after {
    content: ''; margin-left: auto;
    width: 0; height: 0;
    border-left: .34rem solid transparent;
    border-right: .34rem solid transparent;
    border-top: .4rem solid currentColor;
    opacity: .55; transition: transform .15s;
}
.msub-arhiv[open] > summary::after { transform: rotate(180deg); }
.msub-arhiv-broj {
    font-size: .72rem; font-weight: 700; color: #64748b;
    background: #f1f5f9; border-radius: 999px; padding: .1rem .45rem;
}
html.dark-theme .msub-arhiv-broj { background: #2a2927; color: #cbd5e1; }
body.eink-look .msub-arhiv-broj { background: transparent; border: 1px solid #000; color: #000; }

/* Dvije ponude na dnu popisa. */
.msub-dno { margin-top: 1.2rem; }
.msub-dodaj {
    display: block; width: 100%; padding: .8rem 1rem; cursor: pointer;
    border: 0; border-radius: .7rem; background: #2563eb; color: #fff;
    font-size: .9rem; font-weight: 700;
}
.msub-dodaj:hover { background: #1d4ed8; }
body.eink-look .msub-dodaj { background: #fff; color: #000; border: 2px solid #000; }

.msub-zatrazi {
    display: block; width: 100%; margin: .55rem 0 .4rem;
    padding: .8rem 1rem; text-align: center; cursor: pointer;
    border: 1px dashed #bfdbfe; border-radius: .7rem;
    background: transparent; color: #1d4ed8;
    font-size: .86rem; font-weight: 600;
}
.msub-zatrazi:hover { background: #eff6ff; color: #1e40af; }
html.dark-theme .msub-zatrazi { border-color: #1e3a8a; color: #93c5fd; }
body.eink-look .msub-zatrazi { border: 2px dashed #000; color: #000; }

/* === ZVUK ZA FOKUS (zvuk-fokusa.js) ====================================
   OD 02.09. JE STRANICA, NE PLOCICA U KUTU (Ivo: „neka bude zasebna ikona u
   quick izborniku da se otvori kao stranica a ne ovako da stoji doli livo").
   Plutajuceg gumba vise nema. */
html.zf-otvorena, html.zf-otvorena body { overflow: hidden; }
.zf-stranica {
    position: fixed; inset: 0; z-index: 320;
    display: flex; flex-direction: column;
    background: #fff; color: #0f172a;
}
.zf-traka {
    display: flex; align-items: center; gap: .3rem; flex: 0 0 auto;
    padding: .7rem .6rem; border-bottom: 1px solid #e2e8f0;
    padding-top: calc(.7rem + var(--safe-top, 0px));
}
.zf-natrag {
    width: 44px; height: 44px; flex: 0 0 auto; cursor: pointer;
    border: 0; background: none; color: #334155;
    font-size: 1.7rem; line-height: 1; border-radius: 9999px;
}
.zf-natrag:hover { background: #f1f5f9; }
.zf-naslov { font-size: 1.05rem; font-weight: 700; margin: 0; }
.zf-tijelo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 1rem; max-width: 34rem; width: 100%; margin: 0 auto;
    padding-bottom: calc(1rem + var(--safe-bottom, 0px));
}
.zf-uvod { font-size: .85rem; line-height: 1.55; color: #475569; margin: 0 0 1rem; }
.zf-vrste { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.zf-vrsta {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .9rem .4rem; cursor: pointer; text-align: center; color: #0f172a;
    border: 1px solid #e2e8f0; border-radius: .8rem; background: #fff;
}
.zf-vrsta b { font-size: .85rem; }
.zf-vrsta small { font-size: .68rem; color: #94a3b8; }
.zf-vrsta.je-na { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.zf-vrsta.je-na small { color: #3b82f6; }
/* Tri crtice koje nagovjeste „val" — bez slike i bez emojija. */
.zf-val {
    display: block; width: 1.5rem; height: .75rem; margin-bottom: .15rem;
    background:
        linear-gradient(currentColor, currentColor) left center / .18rem 40% no-repeat,
        linear-gradient(currentColor, currentColor) center center / .18rem 100% no-repeat,
        linear-gradient(currentColor, currentColor) right center / .18rem 60% no-repeat;
    opacity: .5;
}
.zf-vrsta.je-na .zf-val { opacity: 1; }
.zf-stani {
    width: 100%; margin-top: .55rem; padding: .7rem; cursor: pointer;
    border: 1px solid #e2e8f0; border-radius: .8rem; background: #fff;
    font-size: .88rem; color: #475569;
}
.zf-stani.je-na { border-color: #94a3b8; background: #f1f5f9; font-weight: 600; }
.zf-klizac {
    display: flex; align-items: center; gap: .7rem; margin-top: .9rem;
    font-size: .8rem; color: #64748b;
}
.zf-klizac input { flex: 1; }
.zf-posteno {
    margin-top: 1.3rem; padding: .8rem .9rem; border-radius: .6rem;
    background: #f8fafc; border-left: 3px solid #cbd5e1;
    font-size: .8rem; line-height: 1.6; color: #475569;
}
.zf-izvori { margin-top: .8rem; font-size: .76rem; color: #64748b; }
.zf-izvori summary { cursor: pointer; padding: .3rem 0; }
.zf-izvori ul { margin: .4rem 0 .3rem; padding-left: 1.1rem; line-height: 1.6; }
.zf-izvori a { color: #2563eb; }
.zf-izvori p { margin-top: .5rem; line-height: 1.6; }
.zf-nota { margin-top: 1.1rem; font-size: .74rem; color: #94a3b8; line-height: 1.55; }
html.dark-theme .zf-stranica { background: #1f1e1d; color: #e2e8f0; }
html.dark-theme .zf-traka { border-bottom-color: #2a2927; }
html.dark-theme .zf-natrag { color: #cbd5e1; }
html.dark-theme .zf-vrsta,
html.dark-theme .zf-stani { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }
html.dark-theme .zf-posteno { background: #2a2927; color: #cbd5e1; }
body.eink-look .zf-vrsta { border: 2px solid #000; }
body.eink-look .zf-vrsta.je-na { background: #fff; border-width: 3px; color: #000; }
body.eink-look .zf-natrag { border: 2px solid #000; color: #000; }


/* === ZATRAZI PREDMET (zahtjev-predmet.js) ============================== */
.zp-zastor {
    position: fixed; inset: 0; z-index: 330; display: flex;
    align-items: center; justify-content: center; padding: 1rem;
    background: rgba(15, 23, 42, .55);
}
.zp-ploca {
    width: min(100%, 30rem); max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: 1rem; padding: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
}
.zp-naslov { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: .4rem; }
.zp-uputa { font-size: .82rem; line-height: 1.5; color: #475569; margin-bottom: .85rem; }
.zp-polje {
    width: 100%; border: 1px solid #cbd5e1; border-radius: .6rem;
    padding: .6rem .7rem; font-size: .9rem; line-height: 1.5; resize: vertical;
    color: #0f172a; background: #fff;
}
.zp-polje:focus { outline: 2px solid #93c5fd; outline-offset: 1px; border-color: #60a5fa; }
.zp-privitak {
    display: block; margin-top: .7rem; font-size: .82rem; color: #1d4ed8; cursor: pointer;
}
.zp-privitak input { display: block; margin-top: .3rem; font-size: .78rem; }
.zp-nota { margin-top: .5rem; font-size: .72rem; color: #94a3b8; line-height: 1.45; }
.zp-redak { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.zp-gumb {
    border-radius: .6rem; padding: .5rem 1rem; font-size: .85rem; font-weight: 600;
    border: 1px solid #cbd5e1; background: #fff; color: #334155; cursor: pointer;
}
.zp-gumb.zp-posalji { background: #2563eb; border-color: #2563eb; color: #fff; }
.zp-gumb:disabled { opacity: .55; cursor: default; }
.zp-javi { margin-top: .6rem; font-size: .8rem; color: #334155; min-height: 1.1em; }
html.dark-theme .zp-ploca { background: #1f1e1d; color: #e2e8f0; }
html.dark-theme .zp-naslov { color: #e2e8f0; }
html.dark-theme .zp-polje { background: #2a2927; border-color: #3b3a37; color: #e2e8f0; }
html.dark-theme .zp-gumb { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }

.zs-javi {
    position: fixed; z-index: 320; left: 50%; bottom: 14%;
    transform: translateX(-50%); max-width: min(92vw, 30rem);
    padding: .55rem .9rem; border-radius: .8rem; text-align: center;
    background: rgba(15, 23, 42, .92); color: #fff;
    font-size: .78rem; line-height: 1.4; font-weight: 500;
}
/* SKROL UMJESTO LISTANJA (Icons izgled) — Ivo, 02.09.: „ovo bi u Icon-mod da
   bude default prikaz skripte ali da se scrolla prema doli ono normalno".
   Isti citac, isti okvir; mijenja se samo kretanje. Stupci se gase (sirinu
   `uskladiStupac` u ovom nacinu ne postavlja), a spremnik dobiva okomiti
   skrol. Brojac stranica nema sto brojati pa ga nema. */
#eink-citac.ec-skrol .ec-tok {
    column-width: auto; columns: auto;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* BEZ `scroll-behavior: smooth` (Ivo, 06.09.2026.: „jos uvik je animirano
       kako ide prema gori umisto da se samo promine tekst").
       Smooth ne kliza samo ono sto mi pomaknemo — kliza SVAKU promjenu
       polozaja, ukljucujuci onu koju preglednik sam napravi kad se sadrzaj
       skrati (npr. vrtuljak rijesenih primjera zamijeni visu karticu nizom).
       Otud i traka: to klizanje ide prema gore, a `pratiTraku` pokret prema
       gore cita kao „student se vraca". Jedan redak CSS-a proizveo je dva
       kvara koji izgledaju nepovezano. */
}
#eink-citac.ec-skrol .ec-noga { display: none; }

/* U SKROL NACINU UNUTARNJE TRAKE S NASLOVOM NEMA (Ivo, 02.09., na dvije
   slike: „ode naslov i podnaslov normalno ko da se cita obicna skripta" i „ne
   da ovi naslovi prate tekst").
   Naslov se od tada pise U TOK, kao prvi odlomak (`naslovUTok`), pa se skrola
   i nestaje kao i svaki drugi tekst. Ovdje su do 04.09. stajala TRI pravila —
   jedno je traku sklapalo na visinu 0, drugo ju je „otvaralo" takoder na 0, a
   trece ju je gasilo — plus zastavica `ec-vrh-vidljiv` koja je time bila bez
   ucinka. Ostalo je ono jedno koje doista radi.
   Na tinti traka OSTAJE: ondje se lista po stranicama i naslov je jedini
   stalni orijentir. */
#eink-citac.ec-skrol .ec-vrh { display: none; }
/* NASLOV ISPOD VRACENOG ZAGLAVLJA NA VRHU POTPOGLAVLJA (Drago QA 22.09.2026.):
   tok pocinje 1.4rem od vrha, zaglavlje je visoko `--ec-vrh`; kad je skrol na
   vrhu i zaglavlje vraceno, prvi element toka dobije razliku kao gornji odmak.
   Razred postavlja `postaviTraku`, skida `naslovUTok` (novo potpoglavlje). */
/* STALNO, NE SAMO DOK JE TRAKA VIDLJIVA (Ivo, 23.09.2026.: „da ovaj pocetak
   lekcije pocinje malo ispod trake, ka da bude bili prostor povise trake (...)
   tako da bude jednostavnije prikazivanje i sakrivanje trake, pa netriba ono
   tekst pomicat"). Traka se pojavi na praznom, naslov je uvijek tik ispod. */
/* SISTEMSKE TIPKE NE SMIJU PREKRITI REDAK S INZENJERKOM (Ivo, 25.09.2026.,
   Android: |||  O  < preko glave, Kviza i DALJE na dnu podpoglavlja). App
   crta ispod prozirne trake za navigaciju, pa kraj citaca dobiva prazan pojas
   visine te trake; native-bridge.js pamti najvecu izmjerenu (`--safe-bottom`). */
.safe-inset #eink-citac.ec-skrol .ec-tok { padding-bottom: calc(0.75rem + var(--safe-bottom, 0px)); }
#eink-citac.ec-skrol .ec-tok > :first-child {
    margin-top: max(0px, calc(var(--ec-vrh, 49px) - 1.4rem + .4rem));
}
/* NASLOV SE NE SMIJE REZATI (Ivo, 02.09.: „ode je nesto otkinuto ispod
   naslova"). Traka je ogranicene visine zbog animacije otvaranja, pa je dugi
   naslov ostajao presjecen po sredini slova u trecem retku. Skracivanje na
   dva retka s trotockom je jedini oblik u kojem se granica NE VIDI kao kvar. */
#eink-citac.ec-skrol .ec-naslov {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Bez animacije na tinti — svaki medupolozaj je jedno osvjezavanje ploce. */
body.eink-look #eink-citac.ec-skrol .ec-vrh { transition: none; }
/* Traka u Icons izgledu OSTAJE, pa citac pocinje ispod nje — inace bi mu
   prvi redak zavrsio pod hamburgerom. Visina se mjeri (`--ec-vrh`). */
/* TRAKA PRELAZI PREKO TEKSTA, NE GURA GA (Ivo, 02.09.: „kad se pojavi, onda se
   cijeli tekst tj stranica pomakne prema doli. To nebi smilo — neka traka se
   samo spusti doli priko teksta, kao da vecina piksela ispod ostanu na istom
   mjestu (…) posebno je bitno da se ne dogada u e-ink modu").

   Citac je bio vezan uz `--ec-vrh`, dakle uz visinu zaglavlja: cim bi se
   zaglavlje vratilo, citac bi se spustio i SVI pikseli ispod pomaknuli. Sada
   citac stoji od samog vrha i ne mice se nikad; zaglavlje se pri povratku
   spusti PREKO njega (z-index 61, v. `html.ec-aktivan #app-header`).

   Zasto ne padding koji bi „rezervirao" traku: rezervirani pojas bi ostao
   prazan dok je traka skrivena — a to je upravo ono sto Ivo ne zeli vidjeti
   („nema ove glavne jos, to je ok da je nema"). */
/* (Pravilo `#eink-citac.ec-skrol.je-otvoren { top: 0 }` maknuto 04.09.: sluzilo
   je iskljucivo za ponistavanje `traka-vidljiva`, kojeg vise nema. `inset: 0`
   gore daje isti `top: 0`, sada u SVA TRI nacina jednako.) */
/* Prijelomi su pravila za STRANICE; u toku bi samo pravili prazne rupe. */
#eink-citac.ec-skrol .ec-tok figure, #eink-citac.ec-skrol .ec-tok img,
#eink-citac.ec-skrol .ec-tok pre, #eink-citac.ec-skrol .ec-tok table,
#eink-citac.ec-skrol .ec-tok h1, #eink-citac.ec-skrol .ec-tok h2,
#eink-citac.ec-skrol .ec-tok h3 { break-inside: auto; page-break-inside: auto; }

.ec-ucitavam { opacity: .5; }


/* === Moji predmeti: status u redku, ime na dva retka === */
/* Ivo (26.08.): status predmeta vise nije plutajuci prozor nego se izlista U
   REDKU, ondje gdje su Skripta/Audioknjiga/Kviz/Ispit — i visok je tocno
   cijeli broj visina jednog predmeta, da se sve ispod pomakne za cijele
   redke. Visinu racuna `_msubVisinaStatusa`; ovdje je samo izgled. */
.msub-status {
    overflow: hidden;
    border: 1px solid #e2e8f0; border-top: 0;
    border-radius: 0 0 .6rem .6rem;
    padding: .5rem .6rem;
    display: flex; flex-direction: column; gap: .4rem;
}
.msub-st-kart { display: flex; gap: .5rem; }
.msub-st-kart .msub-kart {
    flex: 1; text-align: center; background: #f8fafc;
    border-radius: .45rem; padding: .3rem .2rem;
}
.msub-st-kart .msub-kart b { display: block; font-size: .95rem; font-weight: 800; color: #0f172a; }
.msub-st-kart .msub-kart span { font-size: .6rem; color: #64748b; }
.msub-status .msub-det-popis { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* GUMB, NE PLAKAT (Ivo, 04.09.2026.: „ova statistika predmeta, moze li
   lipse?", uz sliku na kojoj „Citaj skriptu" zauzima pola zaslona).

   Sam gumb je oduvijek bio uredan; nedostajala je MJERA IKONE. `_modeIcon`
   vraca `<img>` s PNG-om, a bez ogranicenja se crta u PRIRODNOJ velicini —
   pa je flex-redak narastao na visinu slike i gumb je postao plavi blok s
   natpisom stisnutim uz rub. Isti gumb u prozoru predmeta (`.msub-pop-cta`)
   tu mjeru ima od pocetka; ovdje je ispala.

   Uz mjeru i sirina: gumb je jedina radnja u ploci, pa nema razloga da bude
   uzi od nje. */
.msub-st-cta {
    flex: 0 0 auto; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: #2563eb; color: #fff; border: 0; border-radius: .6rem;
    padding: .62rem .8rem; font-size: .84rem; font-weight: 700; cursor: pointer;
    margin-top: .7rem;
    box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55);
}
.msub-st-cta img, .msub-st-cta svg {
    width: 1.2rem; height: 1.2rem; object-fit: contain; flex: 0 0 auto;
}
/* BIJELI RUB SAMO OVDJE (Drago, 23.09.2026.: „neka ovdje bude samo to kad su
   iste boje"). Ovaj gumb uzima boju NACINA koji preporucuje, a ikona tog
   istog nacina nacrtana je u toj istoj boji s tamnom konturom: zelena knjiga
   na tamnozelenoj plohi, roza ispit na roza plohi. Kontura se stopi s
   pozadinom i crtez potone. Tanka bijela linija ga vraca.

   Ne ide globalno: bijeli rub je danas skinut sa SVIH ikona jer je na
   svijetloj podlozi izgledao kao prsten naljepnice (af3cfed5e). Ovdje je
   podloga uvijek tamna i uvijek iste boje kao crtez, pa vrijedi obrnuto.
   Tri sjene jedna na drugu daju obris; jedna je pretanka da se vidi. */
.msub-st-cta img {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)
            drop-shadow(0 0 1px #fff);
}
.msub-st-cta:active { transform: scale(.985); }
html.dark-theme .msub-st-cta { box-shadow: none; }

/* GUMB NOSI BOJU NACINA KOJI PREPORUCUJE (Drago, 23.09.2026.: „samo treba
   ovo citaj skriptu bit zeleno i ikona kako je sada, isto tako ako je
   zadatak kviz i slicno"). Boje su iste kao kartice Brzog pristupa na
   predmetu (`.dash-quick-card.theme-*`), da isti nacin ima istu boju gdje
   god se pojavi. Bijeli tekst na svakoj prolazi WCAG AA: zelena 5,48:1,
   plava 5,17, roza 6,04, nebo 5,93, jantar 5,02. */
.msub-st-cta--script    { background: #047857; box-shadow: 0 6px 14px -6px rgba(4, 120, 87, .55); }
.msub-st-cta--audiobook { background: #0369a1; box-shadow: 0 6px 14px -6px rgba(3, 105, 161, .55); }
.msub-st-cta--exi       { background: #b45309; box-shadow: 0 6px 14px -6px rgba(180, 83, 9, .55); }
.msub-st-cta--exam      { background: #be185d; box-shadow: 0 6px 14px -6px rgba(190, 24, 93, .55); }
/* `quiz` zadrzava zadanu plavu iz `.msub-st-cta`. */
html.dark-theme .msub-st-cta--script,
html.dark-theme .msub-st-cta--audiobook,
html.dark-theme .msub-st-cta--exi,
html.dark-theme .msub-st-cta--exam { box-shadow: none; }

/* IME NA NAJVISE DVA RETKA. Ivo: „kad se klikne na predmet da bude ispisano
   samo dva retka naziva" — jer trecim retkom visina retka prestane biti
   cijeli broj i sve ispod se pomakne za pola. */
.msub-item.is-open .msub-name {
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* Ako ijedan naziv ne stane u dva retka, `_msubSlozeniFont` spusti font SVIMA
   — Ivo: „da se smanji veličina teksta svih prikazanih predmeta tako da stane
   u dva retka". Zajednicka velicina, a ne po redku, da redci ostanu jednaki. */
.msub-list { --msub-font: .92rem; }
.msub-name { font-size: var(--msub-font); }
/* Dok se mjeri prelom, svi nazivi smiju u vise redaka — inace bi zatvoreni
   redci mjerili jedan redak s trotockom i mjera bi bila lazna. */
.msub-list.mjerim-prelom .msub-name {
    white-space: normal; display: block; overflow: visible;
}

html.dark-theme .msub-status { border-color: #3b3a37; }
html.dark-theme .msub-st-kart .msub-kart { background: #1f1e1d; }
body.eink-look .msub-status { border-color: #000; }
body.eink-look .msub-st-kart .msub-kart { background: #fff; border: 1px solid #000; }


/* === Odgovaranje rukom (drill) === */
.olovka-okvir { position: relative; }
/* OKNO koje skrola; platno unutra je vise od njega i raste dok se pise.
   `overscroll-behavior: contain` da povlacenje prstom ne odvuce cijelu
   stranicu kad se dode do dna. */
.olovka-okno {
    overflow-y: auto; overflow-x: hidden;
    border: 1px solid #cbd5e1; border-radius: .5rem;
    background: #fff; overscroll-behavior: contain;
}
body.eink-look .olovka-okno { border-color: #000; }
.olovka-platno {
    display: block; width: 100%;
    border: 0;                    /* okvir je sada na oknu, ne na platnu */
    background: #fff;
    /* `none` je nuzan: bez njega preglednik potez olovke protumaci kao gestu i
       pojede ga. Skrolanje prstom se zato vodi rucno u `olovka.js`. */
    touch-action: none;
    cursor: crosshair;
}
.olovka-alat { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .35rem; }
.olovka-brisi {
    background: #fff; border: 1px solid #cbd5e1; border-radius: .4rem;
    padding: .25rem .6rem; font-size: .78rem; color: #475569; cursor: pointer;
}
/* DOK SE PISE RUKOM: platno preuzme prostor, gumbi se skupe u donji desni
   kut. Ivo (26.08.): „neka sve ovo bude prostor za pisanje a doli samo doli
   desno ove dvi ikone submit i IDontKnow da budu doli desno male."

   Gumbi ostaju NA MJESTU (`position: sticky` nije potreban jer platno ima
   zadanu visinu), samo se stisnu i pomaknu udesno. Manji su, ali ne ispod 44 px
   visine — to je donja granica za prst i olovku. */
.pise-rukom #exam-akcije, .pise-rukom #quiz-drill-actions {
    flex-direction: row !important;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .4rem;
}
.pise-rukom #exam-akcije button,
.pise-rukom #quiz-drill-actions button {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    width: auto !important;
    min-height: 44px;
    padding: .35rem .7rem !important;
    font-size: .78rem !important;
}
/* Traka s podacima i natpis „koliko vrijedi" samo trose visinu dok se pise. */
.pise-rukom .qhud, .pise-rukom .quiz-drill-worth { display: none; }

/* GUMB „PISI RUKOM" JE MAKNUT (Ivo, 12.09.2026.: „ovi pisi rukon, to makni").
   Olovka se javlja sama, pa je ostao samo povratak NA tipkovnicu — i on stoji
   u alatnoj traci pisanja, gdje se vidi tek dok se pise. */
.olovka-tipkovnica {
    background: transparent; border: 0; cursor: pointer;
    color: #64748b; font-size: .8rem; font-weight: 600; padding: .2rem .4rem;
}
.olovka-tipkovnica:hover { color: #2563eb; }
body.eink-look .olovka-platno { border-color: #000; }
body.eink-look .olovka-brisi { border-color: #000; color: #000; }


/* === E-ink: karta znanja === */
/* Ivo (26.08.): „ovaj knowlage map, unutra fale ovi crni okviri za ove
   djelove, nije prikaz dobar na eink."

   Uzrok: razine znanja se razlikuju BOJOM — zelena, limun, jantar, crvena, a
   neposjeceno svijetlosivo. Na sivoj skali neposjeceno postane skoro bijelo i
   nestane, a ispunjeni ostanu kao tamne mrlje koje lebde bez okvira. Tocno
   ono sto se vidi na fotografiji.

   Rjesenje je isti kljuc koji vec vrijedi za ponudene odgovore i traku
   napretka u kvizu — ZNACENJE NA OBLIK, ne na boju — da student ne uci tri
   razlicita jezika:
       neposjeceno   tanak obris, prazno
       slabo         crtkan obris, prazno
       srednje       debeo obris, prazno
       dobro         puna crna
   Okvir postoji UVIJEK, pa se vidi i koliko je ukupno polja, ne samo koja su
   ispunjena. */
body.eink-look .kbar-seg i,
body.eink-look .kmap-cell {
    background: #fff !important;
    border: 1px solid #000 !important;
    color: #000 !important;
}
body.eink-look .kbar-seg i.k-bad,
body.eink-look .kbar-seg i.k-low,
body.eink-look .kmap-cell.k-bad,
body.eink-look .kmap-cell.k-low { border-style: dashed !important; }

body.eink-look .kbar-seg i.k-mid,
body.eink-look .kmap-cell.k-mid { border-width: 2.5px !important; }

body.eink-look .kbar-seg i.k-hi,
body.eink-look .kmap-cell.k-hi { background: #000 !important; color: #fff !important; }

/* Neposjeceno ostaje prazno, ali s obrisom — da se vidi da polje POSTOJI. */
body.eink-look .kmap-cell.k-off { border-style: dotted !important; }

/* „Ovdje si" je vec bio okvir; na tinti mu treba veci razmak da se ne stopi
   s obrisom samog polja. */
body.eink-look .kbar-seg i.k-cur,
body.eink-look .kmap-cell.k-cur {
    outline: 2px solid #000 !important; outline-offset: 2px !important;
}


/* === E-ink: Pocetna — svaki dio svoj okvir, nista puno crno === */
/* Ivo (26.08.): „nebi ovo livo uopce ovaj debeli crni dio, samo da svaki
   segment ima svoj tanki crni obrub ko sta gori ove ikone imaju" i „obrub
   fali i doli ovome pitaj inzenjerka" i „fali crni tanki obrub za ove doli
   kucice".

   Nasla su se dva krivca mjerenjem svjetline ploha na Pocetnoj:
       `.niz-genija-banner`  L=0,26   puna tamna traka
       `.ln-cta`             L=0,48   tamni gumb
   Ostalo je bilo bijelo, ali BEZ ruba — pa se na tinti nije vidjelo gdje
   jedan dio prestaje a drugi pocinje.

   Pravilo je isto kao za gumbe: puna tamna ploha je na tinti najskuplji
   zahvat i uz to nosi manje od obicnog okvira. */
/* `niz-genija-banner` je ID, ne klasa — klase su `ng-banner`. Prvi put sam
   napisao `.niz-genija-banner` i pravilo se nije imalo na sto primiti;
   izmjereno je da je traka i dalje L=0,26. Isti previd kao ranije s
   `#bug-report-btn`: selektor sam napisao po imenu koje sam VIDIO, ne po tome
   je li to id ili klasa. */
body.eink-look .ng-banner,
body.eink-look #niz-genija-banner,
body.eink-look .ln-cta {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}
body.eink-look .ng-banner *,
body.eink-look #niz-genija-banner *,
body.eink-look .ln-cta * { color: #000 !important; }

/* VODIC KROZ APLIKACIJU („Help") lebdi nad stranicom i nema svoj rub — Ivo
   (26.08.): „help nije dobar u ovome modu, nema tanki obrub". Njegov je
   oblacic izuzet iz opceg pravila za sjene jer nema Tailwindovu klasu, pa mu
   se okvir daje imenom. Zastor iza njega postaje bijel: tamna poluprozirna
   ploha je na tinti mrlja koja proguta tekst ispod. */
body.eink-look .itour-bubble {
    border: 1.5px solid #000 !important;
    background: #fff !important;
    box-shadow: none !important;
}
body.eink-look .itour-bubble * { color: #000 !important; }
body.eink-look .itour-foot, body.eink-look .itour-caret { border-color: #000 !important; }
body.eink-look [class*="itour-zastor"], body.eink-look .itour-mask {
    background: rgba(255, 255, 255, .75) !important;
}

/* Redci ljestvice i traka za pitanje dobivaju svoj okvir. */
body.eink-look .dash-lb-list,
body.eink-look .dash-lb-row,
body.eink-look .dash-chatbar,
body.eink-look #home-chatbar .dash-chatbar {
    border: 1px solid #000 !important;
    border-radius: .5rem;
    background: #fff !important;
}
/* OKVIR IDE OKO CIJELOG BLOKA, NE OKO SVAKOG RETKA.
   Ivo (27.08.): „ove okvire s prve slike makni a samo da ostanu tanki okviri
   oko ovih 'komplet' sub-tabova. Ovaj livo netriba od knowlage map niti ovaj
   oko imena i ligi genija."

   Prvi put sam njegovo „svaki segment ima svoj tanki crni obrub" procitao kao
   svaki REDAK; mislio je svaki BLOK. Redci u ljestvici su time dobili kutije
   koje im ne trebaju — popis se i bez njih cita jer je poravnat. */
body.eink-look .dash-lb-row,
body.eink-look .dash-lb-list {
    border: 0 !important; padding: 0; margin-bottom: 0;
}
/* Debela plava crta lijevo na „Mapa znanja" je na tinti samo crni stup —
   blok vec ima svoj okvir, pa mu naglasak sa strane ne treba. */
body.eink-look .dash-widget-continue { border-left-width: 1px !important; }


/* === Audioknjiga: play ugraden u recenicu === */
/* Ivo (26.08.): „play neka bude samo u prvoj recenici ko sta je sad. Ali bi
   mozda da bude jos manji kao uklopljen u recenicu."

   Bio je 1,55em puni plavi krug s bijelim znakom — citao se kao gumb NAD
   tekstom. Sada je 1,15em, obrubljen a ne ispunjen, i sjedi u retku kao znak
   interpunkcije. Play/pause je vec radio i nije diran. */
/* KRUG DOK SE KOMAD IZGOVARA (Ivo, 25.09.2026.): tipka play vrti krug
   umjesto „…" dok zvuk za to mjesto jos nije gotov. */
/* PRIPREMLJENE PORUKE NEMAJU „PRIJAVI" (Ivo, 25.09.2026.: „ovo prvo nije LLM
   generirano, to su pripremljena pitanja"). Pozdrav i poruke sustava nose
   `subchat-hello`; prijava ostaje samo na pravim odgovorima modela. */
.subchat-hello > .ai-prijava-red,
.subchat-turn.is-waiting > .ai-prijava-red { display: none !important; }  /* redak nosi inline display */

.ab-krug {
    display: inline-block; width: 1em; height: 1em; box-sizing: border-box;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -0.12em;
    animation: ab-krug-vrti .8s linear infinite;
}
@keyframes ab-krug-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ab-krug { animation-duration: 2s; } }

.ab-inline-play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15em; height: 1.15em;
    margin-right: .3em; vertical-align: -.15em;
    border-radius: 9999px;
    border: 1px solid #2563eb; background: transparent; color: #2563eb;
    font-size: .78em; line-height: 1; flex-shrink: 0; cursor: pointer;
    padding: 0;
}
.ab-inline-play:hover { background: #eff6ff; }
/* Na tinti crno, i malo deblji rub jer je znak sitan. */
body.eink-look .ab-inline-play {
    border: 1.5px solid #000; color: #000; background: transparent;
}
html.dark-theme .ab-inline-play { border-color: #60a5fa; color: #93c5fd; }


/* === Odabrano u biracu teorija/zadaci i kolokvij === */
/* Deblja linija SAMO ovdje. Ivo (27.08.): „to san rek samo da podebljaš tamo
   kad se odabere neki teorija/zadaci kolokvij 1/2 da se podeblja okvir koji je
   odabran." Ondje je razlika stvarno potrebna: odabrano se inace razlikuje
   ISPUNOM, a ispune na tinti nema.

   BEZ POMICANJA SUSJEDA. Ivo (27.08., dvije slike): „Ovo kad se oznaci, nemoj
   da povecava razmak izmedu kucica, a isto triba vridit i u ostalim modovima.
   Trenutno kad se upre kucica, ona se poveca i pomicu se stvari okolo. Neka se
   samo podeblja linija."

   Prvi pokusaj je bio `border-width: 3px` — a `border` ULAZI u raspored, pa je
   odabrana kucica narasla 4 px u sirinu i visinu i gurnula sve oko sebe.
   `box-shadow: inset` crta unutar iste kutije i raspored ne dira: 1 px rub +
   1 px unutarnja sjena daju istu vidljivu debljinu, a nista se ne pomakne.
   Ista zamka je vec jednom uhvacena kod maskote (`outline` vs `border`).

   Vrijedi u SVIM izgledima, ne samo na tinti — `currentColor` uzme boju koju
   gumb vec ima, pa je crna na e-inku, a plava u obicnom izgledu. */
/* SVI IZGLEDI: nista se ne smije pomaknuti pri odabiru. */
#btn-k1_t, #btn-k1_z, #btn-k2_t, #btn-k2_z,
#btn-ek1_t, #btn-ek1_z, #btn-ek2_t, #btn-ek2_z {
    /* `scale-105` je bio pravi krivac za pomicanje: mreza je fiksna
       (grid-cols-2, stupci 126,5 px), pa se kutija NE mijenja — ali se CRTA
       5 % veca (126,5 x 1,05 = 132,8 izmjereno) i vizualno pojede razmak do
       susjeda. Zato transform ide van; debljina linije je jedina razlika. */
    transform: none !important;
}

/* SAMO TINTA: deblja linija kao oznaka odabranog. U obicnom izgledu se
   odabrano vec razlikuje plavom ISPUNOM, pa bi unutarnja linija ondje samo
   pojela `shadow-md` bez ikakve koristi — na tinti ispune nema, pa linija
   mora nositi razliku sama. */
body.eink-look #btn-k1_t.is-on, body.eink-look #btn-k1_z.is-on,
body.eink-look #btn-k2_t.is-on, body.eink-look #btn-k2_z.is-on,
body.eink-look #btn-ek1_t[class*="bg-blue-"], body.eink-look #btn-ek1_z[class*="bg-blue-"],
body.eink-look #btn-ek2_t[class*="bg-blue-"], body.eink-look #btn-ek2_z[class*="bg-blue-"],
body.eink-look #btn-k1_t[class*="bg-blue-"], body.eink-look #btn-k1_z[class*="bg-blue-"],
body.eink-look #btn-k2_t[class*="bg-blue-"], body.eink-look #btn-k2_z[class*="bg-blue-"] {
    box-shadow: inset 0 0 0 1.5px currentColor !important;
}


/* Blok („komplet sub-tab") zadrzava svoj okvir i na tinti ga dobiva crnog —
   `#e2e8f0` je ondje skoro bijelo. */
body.eink-look .dash-widget { border-color: #000 !important; }


/* =========================================================================
   POSTAVKE — JEDAN REDAK PO STAVCI (Ivo, 27.08.2026.)
   =========================================================================
   „Svaka stavka neka pise jedan redak naziv npr „Model" onda padajuci
    izbornik i onda mali (i) sastrane koji otvori plutajuci prozor s
    objasnjenjima. Kompaktni redci. svaka stavka 1 redak."

   Vrijedi za SVE teme — nije e-ink pravilo. Opisi su izasli iz redaka u (i)
   prozorcic, pa je popis dvaput krace nego prije. */

.pos-lista { display: flex; flex-direction: column; min-width: 0; }
/* Izbornik se smije malo stisnuti prije nego ime pocne gubiti retke. */
.pos-izbor { min-width: 0; }

.pos-red {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0; min-height: 2.1rem; min-width: 0;
    border-bottom: 1px solid #f1f5f9;
}
.pos-red:last-child { border-bottom: 0; }
/* Naziv se skracuje, izbornik nikad — sirina zaslona ide na tekst, a ne na
   lomljenje kontrole u drugi red (to je i bio glavni izvor praznog mjesta). */
/* Ivo (27.08.): „ovi dugi ipak moraju u dva reda i neka bude left aligned."
   Prvo je ime bilo `nowrap` s tri tockice — ali „Glasovne naredbe (stop,
   start, „Inzenjerko")" je tada ili gurao kontrolu s ekrana ili se skracivao
   tocno ondje gdje pise sto naredbe rade. Dva reda su jeftinija od oboje;
   redak ostaje kompaktan jer se lomi SAMO ono sto stvarno ne stane. */
.pos-ime {
    flex: 1 1 auto; min-width: 0;
    font-size: 0.875rem; font-weight: 600; color: #334155;
    text-align: left; line-height: 1.25;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}

.pos-izbor { position: relative; flex: 0 0 auto; }
.pos-izbor-gumb {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.55rem; border-radius: 0.5rem;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    font-size: 0.8125rem; font-weight: 700; color: #334155;
    max-width: 11rem;
}
.pos-tekuca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-strelica { color: #94a3b8; font-size: 0.7rem; line-height: 1; }

/* `fixed`, ne `absolute`: modal Postavki skrola i rezao bi popis. Mjesto mu
   racuna settings.js pri otvaranju, pa se zna okrenuti i prema gore. */
.pos-popis {
    display: none; position: fixed; z-index: 70;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    padding: 0.2rem; max-height: 60vh; overflow-y: auto;
}
.pos-izbor.otvoren .pos-popis { display: block; }
.pos-stavka {
    display: block; width: 100%; text-align: left;
    padding: 0.4rem 0.6rem; border-radius: 0.4rem;
    font-size: 0.8125rem; font-weight: 600; color: #334155; white-space: nowrap;
}
.pos-stavka:hover { background: #f1f5f9; }
.pos-stavka.je-tu { background: #2563eb; color: #fff; }

.pos-info {
    flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border-radius: 999px;
    border: 1px solid #cbd5e1; background: #fff; color: #64748b;
    font-size: 0.7rem; font-weight: 700; font-style: italic; line-height: 1;
}
.pos-info-prazno { flex: 0 0 auto; width: 1.3rem; }

#pos-info-prozor {
    display: none; position: fixed; inset: 0; z-index: 90;
    background: rgba(15, 23, 42, 0.45);
    align-items: center; justify-content: center; padding: 1.25rem;
}
#pos-info-prozor.otvoren { display: flex; }
.pos-info-ploca {
    background: #fff; border-radius: 0.9rem; max-width: 22rem; width: 100%;
    padding: 0.9rem 1rem 1rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
}
.pos-info-vrh {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; font-size: 0.9rem; font-weight: 800; color: #0f172a;
    margin-bottom: 0.45rem;
}
.pos-info-zatvori { font-size: 1.35rem; line-height: 1; color: #94a3b8; }
.pos-info-tekst { font-size: 0.85rem; line-height: 1.5; color: #475569; }

html.dark-theme .pos-red { border-bottom-color: #2a2927; }
html.dark-theme .pos-ime { color: #cbd5e1; }
html.dark-theme .pos-izbor-gumb { background: #2a2927; border-color: #3b3a37; color: #e2e8f0; }
html.dark-theme .pos-popis { background: #1f1e1d; border-color: #3b3a37; }
html.dark-theme .pos-stavka { color: #cbd5e1; }
html.dark-theme .pos-stavka:hover { background: #2a2927; }
html.dark-theme .pos-info { background: #1f1e1d; border-color: #3b3a37; color: #94a3b8; }
html.dark-theme .pos-info-ploca { background: #1f1e1d; }
html.dark-theme .pos-info-tekst { color: #cbd5e1; }

/* Na tinti nema sivih tonova koji nose znacenje — okvir crn, ispuna bijela. */
body.eink-look .pos-red { border-bottom-color: #000; }
body.eink-look .pos-ime { color: #000; }
body.eink-look .pos-izbor-gumb,
body.eink-look .pos-info,
body.eink-look .pos-popis {
    background: #fff; border-color: #000; color: #000;
}
body.eink-look .pos-stavka.je-tu { background: #000; color: #fff; }


/* =========================================================================
   TIPKOVNICA — traka se digne, stranica ostane gdje jest
   =========================================================================
   Ivo (27.08.2026.): „bolje bi bilo sa ikone gori i sve miruje a smo se doli
   pomakne."

   Prvi pokusaj je bio skrolati stranicu tek toliko da polje izade ispod
   tipkovnice. Radilo je, ali je vrh svejedno otisao 312 px gore (izmjereno) —
   jer traka stoji na samom dnu, pa se bez skrola ne da otkriti. Zato traka
   dok se tipka izlazi iz toka i pribija se tocno iznad tipkovnice: stranica
   se onda ne skrola uopce, a gore ne mrdne ni piksel.

   Rupa koja pritom ostane na dnu toka je ispod tipkovnice, dakle nevidljiva.
   Pozadina je nuzna — bez nje bi se kroz traku vidio sadrzaj koji prolazi
   ispod nje. Vidi `static/js/tipkovnica.js` za drugu polovicu (visina). */
/* `:focus-within`, ne samo klasa na body: bez toga bi se traka pribila i kad
   se tipka u nekom drugom polju na Pocetnoj i lebdjela preko sadrzaja. */
body.tipkovnica-otvorena #home-chatbar:focus-within {
    position: fixed;
    left: 0; right: 0;
    /* VECA OD DVIJE MJERE. `env(keyboard-inset-height)` puni preglednik sam
       (VirtualKeyboard API) i tocan je; `--tipk-visina` je nas racun iz
       broja koji javi dodatak. Ivo (28.08.) je s Onyxa javio da se traka
       NE VIDI — dakle broj je bio premalen i traka je ostala ispod
       tipkovnice. `max()` znaci da premala mjera vise ne moze sakriti
       traku; prevelika je i dalje pokrivena samoprovjerom u JS-u. */
    bottom: max(var(--tipk-visina, 0px), env(keyboard-inset-height, 0px));
    z-index: 60;
    background: #fff;
    padding-left: 1rem; padding-right: 1rem;
}
html.dark-theme body.tipkovnica-otvorena #home-chatbar:focus-within { background: #1f1e1d; }
body.eink-look.tipkovnica-otvorena #home-chatbar:focus-within { background: #fff; }


/* =========================================================================
   E-ink: „Uci sad!" i tipka „Igraj" (Ivo, 27.08.2026., zaokruzeno na slici)
   =========================================================================
   „ovo treba bit uokvireno u eOnk verziji"

   Oba su ISPADALA iz pravila koja su vec pokrila susjede, i to iz dva
   razlicita razloga — zato dva pravila, a ne jedno:

   - `#home-learn-now` rub IMA (1 px), ali u boji `rgb(214,230,242)`. Na
     zaslonu u boji je to blijedoplava crta, na tinti prakticki bijelo — blok
     je izgledao kao da okvira nema, dok je „Niz genija" odmah ispod imao
     crni. Boja, dakle, ne debljina.
   - `.ng-banner-cta` rub NEMA uopce (0 px) i stoji na prozirno-bijeloj
     ispuni, koja na tinti nestane. Blizanac `.ln-cta` je vec bio ispravan
     (1 px crno, bijela ispuna, 999 px) — pa se ovdje samo ponavlja on. */
body.eink-look #home-learn-now { border-color: #000 !important; }
body.eink-look .ng-banner-cta {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}


/* E-ink: zaglavlje Pocetne (maskota + pozdrav + brojke) dobiva svoj okvir.
   Ivo (27.08., zaokruzeno na slici): „A u ovo gori bi triba bit okvir kao
   izad inzenjerko ikone"

   Treci put isti obrazac: rub POSTOJI (1 px), ali u rgb(226,232,240) —
   blijedosivo, sto je na tinti bijelo. Mijenja se boja, ne debljina.

   „Iza ikone" ne treba nista raditi: maskota vec strsi iznad kutije
   (izmjereno: `.dash-hero` pocinje na 102 px, `.dash-hero-content` s
   maskotom na 81), a `overflow` je `visible` — pa gornji brid crte prolazi
   tocno iza glave, kako je i nacrtano. */
body.eink-look .dash-hero { border-color: #000 !important; }


/* Slovo „i" u Postavkama je na tinti presitno (Ivo, 27.08.: „I ovo malo slovo
   i malo povecaj u eink modu"). Na zaslonu u boji ga nosi i boja ruba, a na
   tinti je sve crno-bijelo pa se oslanja samo na velicinu. Kruzic raste s
   njim, da slovo ne dodiruje rub. */
body.eink-look .pos-info {
    width: 1.6rem; height: 1.6rem;
    font-size: 0.95rem; font-weight: 800;
}
body.eink-look .pos-info-prazno { width: 1.6rem; }


/* POTPIS ISPOD SLIKE U SKRIPTI
   ===========================
   Images uz svaku sliku upisuje `caption:` u `SSBot_slike.yaml`, a App ga je
   do 27.08.2026. tiho ispustao — izmjereno na HS-BIO: 18 slika po razini,
   potpisa nula. S potpisom ide i izvor s licencijom, pa je ispadalo i
   pripisivanje autoru.

   Sitno i sivo, ne kao tekst lekcije: potpis se cita KAD zatreba, a inace ne
   smije prekidati citanje. Sredina prati sliku, koja je i sama centrirana. */
.ingeniko-figcaption {
    margin: -0.35rem auto 1.1rem;
    max-width: 42rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
    text-align: center;
}
html.dark-theme .ingeniko-figcaption { color: #94a3b8; }
/* Na tinti nema sive koja se cita — potpis ide crn, a razlikuje ga velicina. */
body.eink-look .ingeniko-figcaption { color: #000; font-size: 0.875rem; }


/* +N XP NA TINTI: pojavi se i nestane, i to na sredini.
   =====================================================
   Ivo (28.08.): „ovaj +5EXP koji se pojavi, nebude na sredini, bilo bi dobro
   mozda da je on centriran (…) i on samo stoji kad je eInk jeli jer se nemoze
   animirat triba se samo pojavit i nestat."

   Uzrok promasene sredine: vodoravno centriranje NIJE bilo u pozicioniranju
   nego u ANIMACIJI — svaki kadar `xp-float` nosi `translate(-50%, …)`. Na
   tinti su animacije ugasene, pa tog pomaka nema i natpis stoji lijevim rubom
   na sredini, dakle vidno udesno.

   Ovdje se pomak vrati staticno, i doda se okomito centriranje. `!important`
   je nuzan samo za `top`: njega app.js postavlja inline (sidri natpis nad
   aktivnu plohu), a na tinti je sredina zaslona mirnija i predvidljivija.

   Nestajanje ne treba dirati — `showXpToast` ionako mice cvor za 2 s (0,95 s
   u brzoj varijanti), pa se natpis „samo pojavi i nestane" i bez animacije. */
body.eink-look .xp-toast {
    top: 50% !important;
    transform: translate(-50%, -50%);
    opacity: 1;
}
/* Sjene i zeleno na tinti ne nose nista — ostaje crno i citko. */
body.eink-look .xp-toast-main,
body.eink-look .xp-toast-combo { color: #000; text-shadow: none; }


/* UCITAVANJE NA TINTI: koracni okret, ne zamrznuti isjecak
   =======================================================
   Ivo (28.08.): „Ovaj loading-krug (…) kad je u ovoj eInk temi, nije dobro
   samo stoji ovako kako se vidi na slici."

   Opce pravilo `body.eink-look *` gasi SVE animacije — i to je tocno za
   prijelaze i poskakivanja. Ali kruzic za ucitavanje bez gibanja nije miran,
   nego IZGLEDA POKVARENO: ostane jedan tamniji luk koji stoji, pa se ne zna
   radi li aplikacija ili je stala. To je jedina animacija kojoj je gibanje
   sama poruka.

   Zato se ovdje vraca, ali u obliku koji tinta podnosi: `steps(4)` kroz 4 s,
   dakle JEDAN skok u sekundi i samo cetiri polozaja. Glatki okret bi trazio
   ~60 osvjezenja u sekundi i razmazao bi se; cetiri koraka su cetiri cista
   crteza. Ista mjera vrijedi i za Tailwindov `.animate-spin`, koji app koristi
   u chatu i pri dohvatu poglavlja. */
@keyframes eink-korak-okret { to { transform: rotate(360deg); } }

body.eink-look .learn-loading .ll-spin,
body.eink-look .animate-spin {
    animation: eink-korak-okret 4s steps(4) infinite !important;
    border-color: #000 !important;
    border-top-color: #fff !important;   /* praznina koja pokazuje polozaj */
}


/* PRETPLATA I OBAVIJESTI KAO RETCI NA DNU POSTAVKI (Ivo, 28.08.)
   =============================================================
   Isti oblik kao ostale postavke — naziv lijevo, natuknica desno, strelica —
   pa se dno Postavki cita kao i vrh. Sadrzaj se otvara u istom plutajucem
   prozoru koji vec nosi objasnjenja uz (i). */
.pos-lista-dno { margin-top: 0.6rem; border-top: 1px solid #e2e8f0; padding-top: 0.2rem; }
.pos-red-otvarac { cursor: pointer; }
.pos-natuknica {
    flex: 0 1 auto; min-width: 0;
    font-size: 0.78rem; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-red-otvarac .pos-strelica { font-size: 1.1rem; color: #94a3b8; }
/* Tijelo prozora je siri od obicnog objasnjenja — nosi cijeli blok, ne recenicu. */
.pos-info-tijelo { font-size: 0.85rem; color: #475569; }
.pos-info-tijelo .settings-label { display: block; margin-bottom: 0.4rem; }

html.dark-theme .pos-lista-dno { border-top-color: #2a2927; }
/* DESNE NATUKNICE PROLAZE U OBJE TEME (Drago QA 16.09.2026.): bile su #94a3b8
   na bijelom (2,56:1) i #64748b na #2a2927 (3,05:1), dakle ispod praga i u
   svijetloj i u tamnoj. Tonovi se zamjenjuju, svaki na svoju podlogu: #64748b
   na bijelom daje 4,76:1, #94a3b8 na #2a2927 daje 5,9:1. */
html.dark-theme .pos-natuknica { color: #94a3b8; }
body.eink-look .pos-lista-dno { border-top-color: #000; }
body.eink-look .pos-natuknica,
body.eink-look .pos-red-otvarac .pos-strelica { color: #000; }


/* (Zaglavlje ploce sadrzaja — razina i izbornik varijante — maknuto
   10.09.2026. na Ivin zahtjev: „Ovo na vrhu netriba popis profesora ni
   tezina." Obje kontrole stoje u samoj skripti.) */

/* =====================================================================
   JEDNOSTAVNI IZGLED (Python-Simple) — zaslon mobitela
   ---------------------------------------------------------------------
   Sve je pod `body.simple-look`, pa nijedan drugi izgled ovo ne vidi.
   Boje se ne pisu iznova: nasljeduju se od `python-look`, koji je vec
   ravni set bez gradijenata.
   ===================================================================== */

/* SKROL. `#view-home.dash-rich` je `overflow: hidden` i ocekuje da mu
   DIJETE bude skroler — bogata naslovnica za to ima `.dash-rich-wrap`.
   Jednostavna naslovnica je dobila `dash-rich` (treba joj stupac umjesto
   sredisnjeg centriranja), ali svoj skroler nije imala, pa se sadrzaj ispod
   ruba nije mogao doseci (Ivo, 28.08.: „Nemogu scrollat prema doli").
   Izmjereno: sadrzaj 897 px u okviru od 759, `overflowY: hidden`.

   Pravila su ista kao za `.dash-rich-wrap` — namjerno, jer je to isti posao
   na istom mjestu u rasporedu. */
/* SKROLA POGLED, NE UNUTARNJI OKVIR.
   Do 1.4.32 je `.jl-zaslon` bio skroler unutar pogleda koji je `overflow:
   hidden`. Na Androidu je radilo; na iPhoneu je ispod sadrzaja ostajao prazan
   prostor, jer unutarnji skroler visinu dobiva iz flex-lanca koji visi o
   `100dvh`, a iOS tu visinu i stvarno vidljivo podrucje ne drzi u koraku dok
   se traka preglednika skuplja i siri.
   Skroler u skroleru ovdje nista nije donosio, pa ga nema. */
/* `:not(.hidden)` NIJE UKRAS. Bez njega je ovo pravilo — koje nosi `id`, pa
   je specificnije od Tailwindova `.hidden { display: none !important }` —
   drzalo naslovnicu vidljivom i onda kad je aplikacija otisla drugdje.
   Planer se uredno otvarao (zaglavlje je mijenjalo ikonu), ali je naslovnica
   ostajala iznad njega; isto za chat, Uci sad, Kolege i Postavke
   (Ivo, 28.08.: „planer mi nesto nece da otvori"). */
body.simple-look #view-home.jl-pogled:not(.hidden),
body.simple-look #view-dashboard.jl-pogled:not(.hidden) {
    display: block !important;
    overflow-y: auto !important;
    /* BEZ `-webkit-overflow-scrolling: touch`. Uveo sam ga danas uz skroler;
       Android ga ignorira, a na iOS-u podize zaseban sloj crtanja poznat po
       praznim i odsjecenim podrucjima. Na iOS-u 13+ momentum je ionako zadan,
       pa se ovim nista ne gubi. Druga od dvije mjere protiv „otkinutog"
       zaslona; prva je `--ing-vh` donja granica. */
    scrollbar-width: none;
}
body.simple-look #view-home.jl-pogled::-webkit-scrollbar,
body.simple-look #view-dashboard.jl-pogled::-webkit-scrollbar { display: none; }
/* SKROL SAMO KAD IMA STO SKROLATI (Ivo, 15.09.2026.: „ako nema previse ikona…
   blokiraj scroll po ekrani gori doli jer nema potribe"). Klasu postavlja
   `_pratiSkrol` u jednostavni-izgled.js, mjerenjem stvarne visine —
   `overscroll-behavior` uz to gasi i gumeni odskok, koji je i bio ono sto se
   osjetilo kao „skrol kojeg nema zasto biti". */
body.simple-look #view-home.jl-pogled.jl-bez-skrola,
body.simple-look #view-dashboard.jl-pogled.jl-bez-skrola {
    overflow-y: hidden !important;
    overscroll-behavior-y: none;
}
body.simple-look .jl-zaslon {
    max-width: 640px;
    margin: 0 auto;
    /* DNO RACUNA S NAVIGACIJSKOM TRAKOM (02.09.). Bilo je fiksnih 2rem, pa je
       zadnji red plocica — na Ivinoj slici „Arhivirani predmeti" — ulazio pod
       Androidovu traku s tri gumba. `--safe-bottom` postavlja `native-bridge`
       iz stvarnog uzmaka; na uredaju bez trake je 0 i ovo ne mijenja nista. */
    padding: .5rem .75rem calc(2rem + var(--safe-bottom, 0px));
    /* BEZ OZNACAVANJA NA CIJELOM ZASLONU. Do sad je stajalo samo na
       plocicama i resetki, pa je dugi dodir na NATPIS SKUPINE („Completed")
       i dalje palio sustavni odabir s hvataljkama (Ivo, 28.08.). Ovdje nema
       teksta koji se ima smisla oznaciti, pa se gasi na razini zaslona. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* Sadrzaj ispunjava pogled do dna. Bez ovoga je ispod okvira ostajao
       prazan pojas — izmjereno 234 px na zaslonu od 883 — pa je izgledalo kao
       da je stranica odrezana. Sad 16 px, koliko je vlastiti razmak pogleda. */
    min-height: 100%;
}

/* --- VRH: cijela glava, pozdrav, cetiri znacke -----------------------
   Vraceno na jutrosnji oblik (Ivo, 28.08.: „Vrati onaj sta je bija jutros
   gornji dio"). Vrijedi zapisati sto je izmedu probano i ODBIJENO, da se ne
   vrti u krug:
     · kartica `dash-hero` s glavom koja viri preko gornjeg ruba — na bogatoj
       naslovnici izgleda dobro, ali OVDJE JE ODREZANA: `.jl-zaslon` je skroler
       s `overflow-y: auto`, pa ono sto glava negativnim rubom izbaci iznad
       kartice nema tko nacrtati
     · puna interaktivna maskota 132x168 — uzela je pola ekrana
   Glava ostaje mirna slika, cijela, u sredini. */
body.simple-look .jl-vrh { padding: 0 0 .9rem; }
/* OKVIR OKO VRHA, kako je Ivo nacrtao (28.08.): tanka crna crta oko pozdrava
   i znacki, ista kakvu nose skupine ispod — a glava VIRI iznad nje.
   Ovdje glava smije viriti jer `.jl-zaslon` vise nije skroler (od 1.4.34), pa
   je nema tko odsjeci; ranije je upravo to bio kvar. */
body.simple-look .jl-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    /* Isti svijetli rub kao skupine; crn samo na e-Inku (Ivo, 24.09.2026.). */
    border: 1px solid #d5dce6;
    border-radius: .7rem;
    padding: 0 .75rem .8rem;
    margin-top: 30px;          /* mjesto da glava viri */
}
body.simple-look .jl-glava {
    line-height: 0;
    margin-top: -26px;         /* glava izlazi iznad okvira */
}
body.simple-look .jl-pozdrav {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    max-width: 100%;
    /* Naziv predmeta zna biti dug — dva retka pa rez, kao i natpisi ikona. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.simple-look .jl-pozdrav .accent { color: #2563eb; }

/* Pilulica sa znackama: bijela, zaobljena, tanke crtice izmedu. */
body.simple-look .jl-hero .hero-gamify {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: .2rem;
    background: #fff;
    /* Pilulica NEMA crni obrub otkad ga ima okvir oko cijelog vrha — bila bi
       to crna crta unutar crne crte. Ostaje svjetlija, kao razdjelnik. */
    border: 1px solid rgba(17, 17, 17, .22);
    border-radius: 14px;
    overflow: hidden;
}
body.simple-look .jl-hero .hg-chip {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 7px 13px;
    animation: none;
    cursor: pointer;
}
body.simple-look .jl-hero .hg-chip + .hg-chip {
    /* Crtice su svjetlije od obruba namjerno: obrub omeduje cjelinu, crtice
       samo razdvajaju znacke unutar nje. Da su i one crne, pilulica bi se
       raspala na cetiri kucice. */
    border-left: 1px solid rgba(17, 17, 17, .22);
}
body.simple-look .jl-hero .hg-emoji img { width: 20px; height: 20px; object-fit: contain; }
body.simple-look .jl-hero .hg-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}
body.simple-look .jl-hero .hg-ring { position: absolute; inset: 0; width: 26px; height: 26px; }
body.simple-look .jl-hero .hg-icon { font-size: .95rem; line-height: 1; }
body.simple-look .jl-hero .hg-txt { font-size: .78rem; font-weight: 700; }
body.simple-look .jl-hero .jl-znak.jl-iskljucen { opacity: .38; }

/* --- RESETKA --------------------------------------------------------- */
body.simple-look .jl-mreza {
    /* I na samoj resetki, da odabir ne krene iz razmaka izmedu plocica. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    display: grid;
    /* minmax(0,1fr), NE 1fr. `1fr` je zapravo `minmax(auto, 1fr)`, pa dugacka
       neprelomljiva rijec u natpisu razvuce svoj stupac. Izmjereno na 375 px:
       stupci su ispali 71,7 / 74,1 / 71,7 / 84,3 umjesto jednakih — resetka
       ikona time gubi raster, sto joj je cijela poanta. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Uzi razmak da cetiri stupca stanu i na 360 px (Ivo, 28.08.: „ode su mi
       samo 3 stupca sad na android (…) smanjit razmak izmedju ikona da stanu
       4"). Racun na 360 px: 24 px razmaka zaslona + 13 px razmaka skupine +
       2 px crte = 321 px za cetiri stupca i tri procjepa; s 3 px procjepa
       ostaje 78 px po stupcu, a ikona je 58 px. Stane s viskom. */
    gap: .3rem .18rem;
}
/* Tri stupca tek ISPOD 330 px. Prag je bio 360, sto je tocno sirina mnogih
   Androida — pa su cetiri stupca ondje nepotrebno padala na tri. */
@media (max-width: 330px) {
    body.simple-look .jl-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    body.simple-look .jl-mreza { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

body.simple-look .jl-plocica {
    position: relative;
    /* BEZ ODABIRA TEKSTA. Dugi dodir je na Androidu palio sustavni odabir i
       traku „Copy / Share / Select all" preko resetke (Ivo, 28.08.), jer je
       ondje ispod prsta obican tekst natpisa. `touch-callout` gasi jos i
       skocni izbornik na dugom dodiru. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .4rem .15rem .5rem;
    background: none;
    border: 0;
    cursor: pointer;
    /* POGODAK PRATI SADRZAJ, NE CELIJU (Ivo, 03.09.2026.: „zasto ode mogu
       kliknit izmedu ikona, to nije dobro").
       Kao dijete resetke plocica se rastezala na CIJELU sirinu stupca:
       izmjereno 118 px gumba prema 45 px vidljive ikone, dakle 73 px prazne
       povrsine koja je svejedno otvarala predmet. Prst u razmaku izmedu dvije
       ikone otvarao je jednu od njih.
       `fit-content` stisne gumb na ono sto se vidi, `max-width` cuva prijelom
       dugog natpisa (bez njega bi natpis prestao prelamati i razvukao stupac),
       a `auto` margine ga drze u sredini celije. */
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    /* Okomito listanje ostaje preglednikovo dok povlacenje ne pocne. */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
body.simple-look .jl-plocica-ikona {
    /* `relative` NEDOSTAJALO. Bez njega se traka pozicionirala prema cijeloj
       plocici i zavrsavala ISPOD natpisa, izvan ikone (Ivo, 28.08.). */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: #fff;
    /* MEKSI, MODERNIJI RUB (Ivo, 28.08.: „okvir okolo sta je tanki crni je
       dobar ali za ikone mozda malo modernije nesto").
       Crna crta ostaje SKUPINAMA — ondje omeduje cjelinu i mora se vidjeti.
       Ikoni je dovoljna vlasica u sivom plus dvije sjene: jedna uska tik uz
       rub da plocica ne lebdi, druga sira i mekana koja je odize. To je oblik
       ikone na modernim mobitelima.
       Sve kroz `box-shadow`, ne `border`, da ikona ostane TOCNO 58x58 i ne
       razmakne raster stupaca. */
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.08),
                0 1px 2px rgba(15,23,42,.06),
                0 6px 14px -6px rgba(15,23,42,.18);
    overflow: hidden;
}
body.simple-look .jl-plocica-ikona img,
body.simple-look .jl-plocica-ikona > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
body.simple-look .jl-plocica-ime {
    font-size: .68rem;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    /* Dva retka pa rez — ime predmeta zna biti dugacko, a pravilan raster
       je cijela poanta ovog izgleda. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.simple-look .jl-plocica-znacka {
    position: absolute;
    top: .25rem;
    right: calc(50% - 34px);
    font-size: .58rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
}
body.simple-look .jl-dodaj .jl-plocica-ikona {
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(100,116,139,.35);
    font-size: 1.6rem;
    color: #64748b;
}

/* --- POVLACENJE ------------------------------------------------------ */
/* `touch-action: none` se pali TEK dok povlacenje traje. Da stoji stalno,
   ubio bi listanje stranice nad resetkom. */
body.simple-look .jl-mreza.jl-vuce .jl-plocica { touch-action: none; }

/* ═══════════════════════════════════════════════════════════════════════
   TAMNA TEMA ZA „ICONS" IZGLED  (Ivo, 04.09.2026.: „dark tema nije dobra bas,
   vidi ovo ikone kako su bila boja skroz")
   ═══════════════════════════════════════════════════════════════════════
   Tamna tema ima 588 pravila i NIJEDNO nije doticalo `.jl-` klase — cijeli
   Icons izgled je nastao poslije nje, pa je zadrzao tvrdo upisane `#fff`,
   `#000` i `#111`. Na tamnoj podlozi je time svaka pločica bila bijeli kvadrat,
   a okviri skupina crne crte koje se ne vide.

   PALETA JE ISTA KOJU TAMNA TEMA VEC KORISTI (v. redak 70 nize):
       #0f172a  stranica
       #1e293b  ploha (kartica, pločica)
       #334155  rub
       #e2e8f0  tekst
   Nove boje se NE uvode: dvije palete u istoj temi razidu se prvi put kad se
   jedna popravi.

   ZASTO OVDJE, A NE UZ SVAKO PRAVILO: Icons izgled je jedna cjelina i mijenja
   se kao cjelina. Raspršeno po pedeset mjesta, sljedeća bi izmjena pokrila
   pola. */
html.dark-theme body.simple-look .jl-hero {
    border-color: #3b3a37;
    background: #2a2927;
}
html.dark-theme body.simple-look .jl-pozdrav { color: #e2e8f0; }
html.dark-theme body.simple-look .jl-pozdrav .accent { color: #60a5fa; }
html.dark-theme body.simple-look .jl-hero .hero-gamify {
    background: #1f1e1d;
    border-color: #3b3a37;
}
html.dark-theme body.simple-look .jl-hero .hg-chip + .hg-chip {
    border-left-color: #3b3a37;
}
html.dark-theme body.simple-look .jl-hero .hg-txt { color: #e2e8f0; }

/* Okvir skupine i njegov natpis. NATPIS MORA NOSITI BOJU STRANICE, ne plohe:
   njegova pozadina je ono što „buši rupu" u okviru. S bijelom bi na tamnom
   ostala bijela mrlja preko crte — točno ono što se na slici i vidi. */
html.dark-theme body.simple-look .jl-skupina { border-color: #3b3a37; }
html.dark-theme body.simple-look .jl-skupina-natpis {
    background: #1f1e1d;
    color: #e2e8f0;
}

/* Pločica: ploha umjesto bijelog, i mekši rub. Sjena se na tamnom ne vidi kao
   dizanje nego kao prljavština, pa ostaje samo unutarnja crta koja odvaja
   pločicu od podloge. */
html.dark-theme body.simple-look .jl-plocica-ikona {
    background: #2a2927;
    box-shadow: inset 0 0 0 1px #334155;
}
html.dark-theme body.simple-look .jl-plocica-ime { color: #cbd5e1; }
html.dark-theme body.simple-look .jl-dodaj .jl-plocica-ikona {
    background: transparent;
    box-shadow: inset 0 0 0 1px #334155;
    color: #94a3b8;
}

/* Sadrzaj razgovora i sadrzaj skripte su ploce POVRH svega — na tamnoj temi
   su ostale bijele iz istog razloga (nastale poslije). */
html.dark-theme .ctoc-ploca,
html.dark-theme .ec-toc {
    background: #2a2927;
    color: #e2e8f0;
    border-color: #3b3a37;
}
html.dark-theme .ctoc-traka { border-bottom-color: #3b3a37; }
html.dark-theme .ctoc-red { color: #e2e8f0; }
html.dark-theme .ctoc-red:hover { background: #3b3a37; }
html.dark-theme .ctoc-red.je-na { background: #1e3a8a; color: #bfdbfe; }
html.dark-theme .ctoc-red.je-otvoren { background: #1f1e1d; }
html.dark-theme .ec-toc-pog,
html.dark-theme .ec-toc-sub { color: #e2e8f0; }
html.dark-theme .ec-toc-grana + .ec-toc-grana { border-top-color: #3b3a37; }
html.dark-theme .ec-toc-sub.je-tu { outline-color: #60a5fa; }

/* ============================================================================
   SADRZAJ CITACA U OBOJENOM IZGLEDU (Ivo, 07.09.2026.: „Ovaj TOC je dobar za
   eInk, a ode mozda moze bit lipsi").
   SVE ovdje je ogradjeno s `body:not(.eink-look)`: tinta zadrzava crni okvir,
   +/- i goli popis — to je ondje namjerno i dobro. Ovdje broj postaje znacka,
   +/- postaje strelica koja se okrece, otvoreno poglavlje dobiva plavu
   pozadinu, trenutni redak plavu traku umjesto crnog okvira, a uz naslov
   stoji krug napretka iz skripte — pa se bez otvaranja grane vidi koliko je
   poglavlje svladano.
   ========================================================================== */
/* BEZ `--safe-bottom` U DNU (Ivo, 10.09.2026.: „ako ToC nije pre-dug onda
   prilagodi visinu da ono doli nebude onako prazno"). Uvlaka za sistemsku
   traku ima smisla samo kad ploca doista dodiruje dno zaslona — a ne dodiruje:
   `max-height` joj ostavlja najmanje 3,2rem zraka. Kod kratkog popisa je zato
   ostajala prazna traka visine geste-trake ispod zadnjeg poglavlja. */
body:not(.eink-look) .ec-toc { padding: .6rem .6rem .6rem; }
/* ISTA MJERA KAO `.pos-red` (Ivo, 10.09.2026.: „nije uskladen s ostatkom
   app"). Ravan redak s tankom crtom ispod — kao Postavke, Moji predmeti i
   lijevi izbornik. Bez plave plohe preko otvorene grane: da je poglavlje
   otvoreno vec kaze strelica i to sto se vide podpoglavlja. */
/* Bez crta izmedu poglavlja: okno vec dijeli popis stupcem brojeva, pa bi
   vodoravne crte bile druga mreza preko prve. */
body:not(.eink-look) .ec-toc-grana + .ec-toc-grana { border-top: 0; margin-top: 0; }
body:not(.eink-look) .ec-toc-grana.je-otvorena { background: transparent; padding-bottom: .3rem; }
/* OKNO S BROJEVIMA (Ivo, 10.09.2026.: „ovo B mi se svida"). Broj u svom
   stupcu, naslov u drugom, strelica desno. Stupci idu na SAM GUMB, jer on u
   sebi nosi i broj i naslov; djeca im se poravnaju `margin-left`-om iste
   sirine, pa crta ispod broja tece ravno kroz cijelo poglavlje. */
body:not(.eink-look) .ec-toc-pog {
    display: grid; grid-template-columns: 2rem 1fr auto;
    align-items: center; gap: 0; padding: .28rem .3rem .28rem 0; border-radius: .5rem;
    font-weight: 600; font-size: .9rem; color: #334155;
}
body:not(.eink-look) .ec-toc-grana.je-otvorena .ec-toc-pog { color: #0f172a; font-weight: 700; }
/* +/- -> strelica: tekst se sakrije (font-size:0 zadrzava sirinu za citac zaslona),
   a ::before crta chevron koji se okrene kad je grana otvorena. */
/* `grid-row: 1` NIJE ukras. Strelica je u DOM-u prvo dijete, pa ju je
   razmjestaj stavio u prvi red trecega stupca — a broj i naslov, koji traze
   stupce 1 i 2, vise se nisu mogli vratiti unatrag i pali su u drugi red.
   Odatle i strelica iznad naslova i dvostruko visok redak. */
body:not(.eink-look) .ec-toc-znak {
    font-size: 0; min-width: 0; width: 1.1rem; height: 1.1rem; opacity: 1;
    display: inline-flex; align-items: center; justify-content: center;
    grid-column: 3; grid-row: 1; margin-left: .2rem;
}
body:not(.eink-look) .ec-toc-znak::before {
    content: ''; width: .45rem; height: .45rem; border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8; transform: rotate(-45deg); transition: transform .15s;
}
body:not(.eink-look) .ec-toc-grana.je-otvorena .ec-toc-znak::before { transform: rotate(45deg); border-color: #2563eb; }
/* Broj je BROJ, ne znacka: tabularne znamenke poravnaju jednoznamenkasta i
   dvoznamenkasta poglavlja, pa popis stoji u koloni bez ijedne ispune. */
body:not(.eink-look) .ec-toc-rb {
    grid-column: 1; grid-row: 1; text-align: right; padding-right: .55rem;
    color: #94a3b8; font-size: .85rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body:not(.eink-look) .ec-toc-grana.je-otvorena .ec-toc-rb { color: #2563eb; }
/* Tocka iza broja se u boji ne pise: broj je siv i odvojen razmakom, pa je
   tocka samo jos jedan znak. Na tinti ostaje („5. Kruzno gibanje"). */
body:not(.eink-look) .ec-toc-tocka { display: none; }
body:not(.eink-look) .ec-toc-naslov { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.25; }
/* Crta pocinje tocno ispod broja i tece do dna poglavlja — nosi i
   podpoglavlja i redak s gumbima. */
/* Crta je na REDCIMA, ne na okviru (Ivo, 10.09.2026.: „ona crta vertikalna se
   nemora nastavljat nakon poglavlja 'Rjeseni primjeri'"). Dok ju je crtao
   spremnik, tekla je i pokraj retka s gumbima — kao da su i oni podpoglavlje.
   Redci se dodiruju, pa se njihove crte citaju kao jedna. */
body:not(.eink-look) .ec-toc-djeca {
    margin-left: 2rem; padding: .05rem 0 0 0;
}
/* Naslovi se ovdje lome u dva retka, pa razmak gore i dolje brzo naraste
   preko samog teksta (Ivo, 10.09.2026.: „razmak je malo velik"). */
body:not(.eink-look) .ec-toc-sub {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .3rem .5rem .3rem .78rem; position: relative;
    border-left: 1.5px solid #e2e8f0;
    border-radius: 0 .5rem .5rem 0; font-size: .88rem; line-height: 1.3; color: #475569;
}
/* RJESENI PRIMJERI (Ivo, 10.09.2026.). Zadaci na kraju poglavlja, ne gradivo —
   jantarna boja i deblji rez, kao i prije. Ista boja kojom Blitz stoji medu
   gumbima poglavlja, pa se dva imena iste stvari ne razilaze. */
body:not(.eink-look) .ec-toc-sub.ec-toc-rijeseni { color: #b45309; font-weight: 700; }
body.eink-look .ec-toc-sub.ec-toc-rijeseni { font-weight: 700; }
/* Broj podpoglavlja odlazi: crta i uvlaka vec kazu cemu pripada, a „1.2" uz
   „1" iznad njega je isti podatak dvaput. */
body:not(.eink-look) .ec-toc-broj { display: none; }
body:not(.eink-look) .ec-toc-sub:hover { background: #f1f5f9; }
/* Gdje si sada: puna tocka NA crti i plavi tekst — jedina obojena mrlja u
   popisu. Ispuna bi ovdje bila treci nacin da se kaze isto. */
body:not(.eink-look) .ec-toc-sub.je-tu {
    outline: 0; background: transparent; color: #1d4ed8; font-weight: 600;
    box-shadow: none;
}
body:not(.eink-look) .ec-toc-sub.je-tu::before {
    content: ''; position: absolute; left: -.3rem; top: 50%; margin-top: -.2rem;
    width: .4rem; height: .4rem; border-radius: 50%; background: #2563eb;
}
/* Kviz / Ispit / Interaktivni pripadaju poglavlju, pa stoje u njegovu oknu —
   uz istu crtu kao i podpoglavlja (Ivo, 10.09.2026.). */
body:not(.eink-look) .ec-toc-akcije { padding: .5rem .2rem .3rem .85rem; }
/* Da tri gumba i krug stanu u jedan redak uze ploce, „Interaktivni" ostaje bez
   natpisa — ikona ga nosi (Ivo: „ako je potrebno na ustrbi bristanja teksta
   'Interaktivni' tako da samo ikona ostane"). Vrijedi SAMO u ploci sadrzaja;
   u samoj skripti gumb zadrzava ime. */
body:not(.eink-look) .ec-toc-akcije [data-i18n="toc.interactive"] { display: none; }
body:not(.eink-look) .ec-toc-akcije button { flex: none; }
body:not(.eink-look) .ec-toc-postotak .w-9 { width: 1.7rem; height: 1.7rem; }
/* Tamna tema istog izgleda. */
html.dark-theme body:not(.eink-look) .ec-toc-pog { color: #cbd5e1; }
html.dark-theme body:not(.eink-look) .ec-toc-grana.je-otvorena .ec-toc-pog { color: #f1f5f9; }
/* Redni broj potpoglavlja: #64748b na ploci #2a2927 davao je 3,05:1 (Drago QA
   16.09.2026.), a to je jedini trag gdje si u poglavlju. */
html.dark-theme body:not(.eink-look) .ec-toc-rb { color: #94a3b8; }
html.dark-theme body:not(.eink-look) .ec-toc-grana.je-otvorena .ec-toc-rb { color: #60a5fa; }
html.dark-theme body:not(.eink-look) .ec-toc-sub { color: #cbd5e1; }
html.dark-theme body:not(.eink-look) .ec-toc-sub.ec-toc-rijeseni { color: #fbbf24; }
html.dark-theme body:not(.eink-look) .ec-toc-sub:hover { background: #3b3a37; }
html.dark-theme body:not(.eink-look) .ec-toc-sub { border-left-color: #3b3a37; }
html.dark-theme body:not(.eink-look) .ec-toc-sub.je-tu { background: transparent; color: #93c5fd; }
html.dark-theme body:not(.eink-look) .ec-toc-sub.je-tu::before { background: #60a5fa; }
/* CIPOVI U PLOCI SADRZAJA I U PODNOZJU POTPOGLAVLJA (Drago QA 16.09.2026.):
   ploca se u tamnoj temi prebojila, a pilule Kviz, Blitz i pitanje u njoj su
   Tailwind pasteli (`bg-purple-50`, `bg-sky-50`, `bg-amber-50`,
   `bg-emerald-50`), koje Tailwind gradi BEZ tamnih inacica, pa su ostale tri
   bijele mrlje na tamnoj ploci. Gada se ploha, a ne niz klasa: cipovi u ploci
   su klon `.chapter-mode-actions` iz same skripte (eink-citac.js), pa bi
   diranje niza klasa trazilo izmjenu i na posluzitelju. Specificnost (0,3,1)
   nadvladava i Tailwindov `:hover` (0,2,0), pa prelazak misem ne vraca bijelo. */
html.dark-theme .ec-toc-akcije .bg-purple-50,
html.dark-theme .subchapter-quiz-footer .bg-purple-50 { background-color: #2e1065; border-color: #5b21b6; color: #ddd6fe; }
html.dark-theme .ec-toc-akcije .bg-sky-50,
html.dark-theme .subchapter-quiz-footer .bg-sky-50 { background-color: #0c4a6e; border-color: #075985; color: #bae6fd; }
html.dark-theme .ec-toc-akcije .bg-amber-50,
html.dark-theme .subchapter-quiz-footer .bg-amber-50 { background-color: #451a03; border-color: #b45309; color: #fde68a; }
html.dark-theme .ec-toc-akcije .bg-emerald-50,
html.dark-theme .subchapter-quiz-footer .bg-emerald-50 { background-color: #052e16; border-color: #15803d; color: #bbf7d0; }

body.simple-look .jl-plocica.jl-vuce-me {
    z-index: 5;
    opacity: .9;
    /* Bez ovoga bi `elementFromPoint` nalazio SAMU vucenu plocicu i nikad
       onu ispod nje, pa se raspored ne bi mijenjao. */
    pointer-events: none;
}
/* Dok povlacenje traje, zaslon se ne skrola prstom — skrola samo sam, kad
   plocica dode u pojas uz rub (Ivo, 28.08.). Bez toga se sadrzaj i plocica
   micu istovremeno pa nista ne sjedne gdje se cilja.

   `overscroll-behavior: contain` sprjecava da pokret propadne na roditelja i
   povuce cijelu stranicu. */
body.simple-look .jl-pogled.jl-zakljucan,
body.simple-look .jl-zaslon.jl-zakljucan {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}
/* Prijelaz pisu JS-ovi FLIP koraci; ovdje se samo ne smije nista nametati,
   inace bi se dva prijelaza tukla i pomak bi zapinjao. */
body.simple-look .jl-mreza .jl-plocica { will-change: transform; }

/* --- PITANJE ZA LIGU ------------------------------------------------- */
.liga-pitanje-gumbi {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: .25rem .9rem .9rem;
}
.liga-pitanje-gumbi button {
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: .5rem;
    border: 1px solid rgba(100,116,139,.35);
    background: #fff;
    cursor: pointer;
}
.liga-pitanje-gumbi .liga-da {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* E-ink nikad ne dobiva obje klase, ali ako ih netko ikad spoji: bez sjena. */
/* Na elektronskoj tinti mekana sjena ne postoji — ostaje tvrda crna crta.
   Ivo (28.08.): „ovakav bi bija dobar u onom eInk modu, mozda ce bit i
   eInk-Simple mod kasnije." Kad taj izgled dode, ovo je vec njegov temelj. */
body.simple-look.eink-look .jl-plocica-ikona {
    box-shadow: inset 0 0 0 1.5px #000;
}

/* --- ARHIVIRANJE (dugi dodir bez pomaka) ----------------------------- */
body.simple-look .jl-arhiviraj {
    position: absolute;
    top: .15rem;
    left: calc(50% - 34px);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #ef4444;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15,23,42,.3);
    cursor: pointer;
    z-index: 6;
}
/* Pločica se lagano njiše dok je križić otvoren — isti znak kao na
   Androidu da je sad u „načinu uređivanja". Na e-inku se ne miče ništa. */
@keyframes jl-njihaj {
    0%, 100% { transform: rotate(-1.4deg); }
    50%      { transform: rotate(1.4deg); }
}
body.simple-look .jl-plocica.jl-arhiva-otvorena {
    animation: jl-njihaj .32s ease-in-out infinite;
}
body.simple-look.eink-look .jl-plocica.jl-arhiva-otvorena { animation: none; }
body.simple-look.eink-look .jl-arhiviraj {
    background: #fff;
    color: #000;
    box-shadow: inset 0 0 0 1.5px #000;
}

/* --- SKUPINE: tanki okvir s utkanim natpisom -------------------------
   Ivo (28.08.): „natpis mali integriran u okvir kao da se malo prikine
   okvir taj tanki gori-livo i onda ide natpis i okvir se nastavlja."

   Izvedeno bez <fieldset>/<legend> namjerno: fieldset nosi vlastita
   pravila rasporeda koja se s `grid`-om unutar njega tuku. Ovdje je
   obican okvir, a natpis ga „prekida" tako sto ima pozadinu stranice i
   sjedi na samoj crti. */
body.simple-look .jl-skupina {
    position: relative;
    /* Tanka svijetlosiva crta; crna je samo na e-Inku (Ivo, 24.09.2026.:
       „skroz crni okvir (...) neka bude lipše. Crni mora bit samo kad je
       eInk ekran"). Tanka ostaje tanka, 1 px. */
    border: 1px solid #d5dce6;
    border-radius: .7rem;
    padding: .75rem .4rem .5rem;
    margin: 0 0 .9rem;
}
/* Natpis NEMA svoj okvir — crna slova na bijeloj podlozi, i ta podloga je
   jedino sto „prekida" crtu (Ivo, 28.08.: „netriba imat svoj okvir nego samo
   crna slova s bijelom pozadinom"). */
body.simple-look .jl-skupina-natpis {
    position: absolute;
    top: 0;
    left: .85rem;
    transform: translateY(-50%);
    padding: 0 .4rem;
    background: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ing-siva);
    white-space: nowrap;
}
body.simple-look .jl-skupina + .jl-skupina { margin-top: 0; }

/* --- POSTOTAK UTKAN U IKONU ------------------------------------------ */
/* Traka PRATI OBLIK DNA IKONE (Ivo, 28.08.).
   Ne racuna se nikakvo zaobljenje: traka ide od ruba do ruba uz samo dno, a
   okvir ikone je `overflow: hidden` sa zaobljenjem, pa je odreze po vlastitoj
   krivulji. Zaobljenje time ostaje zapisano na JEDNOM mjestu — promijeni li
   se, traka ga slijedi sama. */
body.simple-look .jl-traka {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: rgba(100,116,139,.18);
    pointer-events: none;
}
body.simple-look .jl-traka > i { display: block; height: 100%; }
body.simple-look .jl-plocica-slika {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    height: 78%;
    /* Traka sjedi uz sam rub, pa crtez ustupi tih 5 px. */
    margin-bottom: 5px;
}
body.simple-look .jl-plocica-slika img,
body.simple-look .jl-plocica-slika > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

body.simple-look.eink-look .jl-skupina-natpis { background: #fff; color: #000; }
body.simple-look.eink-look .jl-skupina,
body.simple-look.eink-look .jl-hero { border-color: #000; }

/* =====================================================================
   VISINA LJUSKE — DONJA GRANICA IZ IZMJERENE VISINE PROZORA
   ---------------------------------------------------------------------
   `<body>` nosi `h-[100dvh]`. Na iOS-u ta visina zna zaostati za stvarno
   vidljivim podrucjem dok se Safarijeva traka skuplja i siri, pa ljuska
   ispadne niza od prozora i sadrzaj izgleda odsjecen — s pozadinom ispod.
   Ivo je to vidio dvaput na iPhoneu, a izmedu jednom ispravno; povremenost je
   i bio glavni trag.

   `--ing-vh` postavlja mjeric u predlosku (window.innerHeight). Ovdje se
   koristi SAMO kao donja granica: kad je `dvh` tocan, jednak joj je i ovo ne
   mijenja nista. Zato ne dira ni Android, ni stolno racunalo, ni pakiranu
   aplikaciju.

   Namjerno `min-height`, a ne `height`: `height` bi zamijenio `dvh` i tamo
   gdje on radi ispravno, i time bi rizik prosirio na sve platforme radi kvara
   koji je samo na jednoj.
   ===================================================================== */
body { min-height: var(--ing-vh, 0px); }

/* =====================================================================
   ...I GORNJA GRANICA ZA WEBVIEW KOJI `dvh` NE POZNAJE (02.09.2026.)
   ---------------------------------------------------------------------
   `dvh` stize u Chrome 108. Na starijem WebViewu je `height: 100dvh` iz
   Tailwindove klase NEVAZECA DEKLARACIJA — preglednik je tiho odbaci, bez
   ijedne greske. Tijelo tada ostane BEZ ZADANE VISINE, a nosi `flex` i
   `overflow-hidden`, pa se ljuska sloze u nista.
   Nadeno pri istrazi rusenja na WebViewu Chrome 90 (v. js/stariji-webview.js):
   aplikacija je ondje pukla vec na `marked`-u, pa se do ovoga nikad nije ni
   stiglo — ali cim se ono popravi, ovo bi bilo sljedece na redu.

   `vh` ide PRIJE, kao rezerva: preglednik koji zna `dvh` uzima klasu (jaci
   selektor), a onaj koji ne zna ostaje na ovome. Razlika izmedu `vh` i `dvh`
   je samo ponasanje pod trakom preglednika koja se skuplja — a WebView u
   pakiranoj aplikaciji takvu traku nema. */
body { height: 100vh; }

/* --- BRZI IZBORNIK ---------------------------------------------------
   Treca skupina na dnu naslovnice (Ivo, 28.08.): mjesto za sve sto nije
   predmet — Uci sad, Niz genija, kviz, plan, kolege, postavke, profil — i
   mjesto na koje se dodaju nove mogucnosti kako aplikacija raste.
   Nosi isti crtez kao skupine predmeta, pa se ne uci drugi jezik. */
body.simple-look .jl-skupina-brzi .jl-plocica-ikona {
    background: #fff;
}
/* Slika u brzom izborniku sjedi kao i kod predmeta: unutar okvira, ostavljajuci
   dno traci — ovdje trake nema, pa se crtez samo centrira. */
body.simple-look .jl-skupina-brzi .jl-plocica-slika { margin-bottom: 0; }
body.simple-look .jl-znak-svg {
    width: 60%;
    height: 60%;
    color: #475569;
}

/* --- MOJI PREDMETI: arhivirano ---------------------------------------
   Predmeti koje je student poceo, a nije dovrsio (Ivo, 28.08.). Redak je
   kratak namjerno — arhivirani se ne uci, pa mu ne trebaju gumbi za skriptu,
   kviz i audioknjigu; jedina smislena radnja je povratak. */
.msub-h-arhiv { margin-top: 1.4rem; }
.msub-arhiv-opis {
    font-size: .78rem;
    color: #64748b;
    margin: -.3rem 0 .6rem;
}
.msub-arhiv-red {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    border: 1px solid #e2e8f0;
    border-radius: .6rem;
    background: #fff;
    margin-bottom: .4rem;
}
.msub-arhiv-ik { flex: 0 0 auto; width: 24px; height: 24px; display: flex; }
.msub-arhiv-ik img { width: 100%; height: 100%; object-fit: contain; }
.msub-arhiv-ime {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msub-arhiv-vrati {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,.2);
    border-radius: .45rem;
    padding: .3rem .7rem;
    cursor: pointer;
}

/* IZBOR IZGLEDA SA SLICICAMA (Ivo, 01.09.)
   =======================================
   Redak „Izgled" je prvi u Postavkama, a klik na njega otvara tri kartice.
   Kartica nosi IME U SEBI, iznad minijature — ne pokraj nje — pa se ime i
   slika ne mogu razdvojiti ni pri lomljenju retka. */
.pos-izgled-gumb {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.5rem;
    background: #fff; color: #0f172a; font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
}
.pos-izgled-strelica { color: #94a3b8; font-size: 0.8rem; }

/* Zatvorena po zadanom: redak mora ostati redak dok covjek ne zatrazi izbor. */
.pos-izgled-ploca { display: none; }
/* UZE I VISE (Ivo, 01.09.: „napravi da budu uže i više sličice tako da bude
   ljepše jer ovako se nevidi dobro stil").
   Snimka je zaslon TELEFONA -- uspravna. Razvucena preko trecine sirine
   pokazivala je pojas od 168 px i rezala sve ispod prvog reda, pa se stil
   ondje najmanje vidio. Kartica sada drzi omjer telefona, a tri stanu u red
   jer su uze; visak sirine ostaje prazan umjesto da razvlaci sliku. */
.pos-izgled-ploca.je-otvoren {
    display: grid; grid-template-columns: repeat(3, minmax(0, 132px));
    justify-content: center;
    gap: 0.5rem; padding: 0.1rem 0 0.6rem;
}
.pos-izgled-kart {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.45rem 0.3rem 0.5rem;
    border: 1.5px solid #e2e8f0; border-radius: 0.6rem;
    background: #f8fafc; cursor: pointer; min-width: 0;
}
.pos-izgled-kart:hover { border-color: #cbd5e1; }
.pos-izgled-kart.je-aktivan { border-color: #2563eb; background: #eff6ff; }
.pos-izgled-ime {
    font-size: 0.74rem; font-weight: 700; color: #334155;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-izgled-kart.je-aktivan .pos-izgled-ime { color: #1d4ed8; }
/* Prava snimka naslovnice. `object-position: top` jer je gornja trecina ono
   sto stil odaje — vrh, maskota i prvi red predmeta; dno je svugdje slicno. */
.pos-izgled-slika {
    /* Omjer telefona (9:16 s malom rezervom) umjesto ukucane visine: slika se
       tako ne reze nego se cijela vidi, u obliku u kojem ce je covjek i imati. */
    width: 100%; aspect-ratio: 320 / 547; height: auto; display: block;
    object-fit: cover; object-position: top;
    border: 1px solid #e2e8f0; border-radius: 0.4rem;
    background: #fff;
}
.pos-izgled-kart.je-aktivan .pos-izgled-slika { border-color: #93c5fd; }

html.dark-theme .pos-izgled-gumb { background: #1f1e1d; color: #e2e8f0; border-color: #3b3a37; }
html.dark-theme .pos-izgled-kart { background: #0b1220; border-color: #2a2927; }
html.dark-theme .pos-izgled-kart.je-aktivan { background: #172554; border-color: #3b82f6; }
html.dark-theme .pos-izgled-ime { color: #cbd5e1; }
html.dark-theme .pos-izgled-slika { border-color: #2a2927; }

body.eink-look .pos-izgled-gumb { border: 2px solid #000; background: #fff; color: #000; }
body.eink-look .pos-izgled-kart { background: #fff; border: 2px solid #000; }
body.eink-look .pos-izgled-kart.je-aktivan { background: #000; }
body.eink-look .pos-izgled-kart.je-aktivan .pos-izgled-ime { color: #fff; }


/* SIRINA POSTAVKI NA DESKTOPU (Ivo, 01.09.: „na desktop neka se ograniči
   širina, pre široko je cili settings a i odabir ekrana")
   ====================================================================
   Postavke su pisane za telefon, gdje je sirina zaslona ujedno i mjera. Na
   sirokom zaslonu je ista pravila razvuku preko cijelog monitora: naziv ode
   skroz lijevo, kontrola skroz desno, a izmedu ostane pola metra praznine
   koju oko mora prijeci za svaki redak. Isto vrijedi za kartice izgleda —
   snimka naslovnice razvucena na trecinu monitora nije pregled nego poster.

   Mjera je 720 px: siri od toga redak postaje putovanje, uzi pocinje lomiti
   duga imena postavki u dva retka. Centrirano, jer je sadrzaj sam. */
@media (min-width: 768px) {
    .settings-mreza { max-width: 720px; margin-left: auto; margin-right: auto; }
    .pos-izgled-ploca.je-otvoren {
        grid-template-columns: repeat(3, minmax(0, 172px));
        gap: 0.9rem;
    }
}

/* ZADNJI ZASLON IZRADE RACUNA: KOJI IZGLED (Ivo, 01.09.)
   =====================================================
   Stoji IZNAD vec zavrsenog carobnjaka, pa ne dira njegov raspored ni
   brojanje koraka. Puna ploha jer je ovo jedina odluka na ekranu — jedan
   dodir i aplikacija krece. */
.setup-stil {
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; overflow-y: auto;
    background: #f8fafc;
}
.setup-stil-kut { width: 100%; max-width: 640px; text-align: center; }
.setup-stil-naslov {
    font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 0.35rem;
}
.setup-stil-opis { font-size: 0.85rem; color: #64748b; margin: 0 0 1.1rem; }
/* Dvije kartice jedna do druge i na telefonu: izbor od dvoje mora se vidjeti
   ODJEDNOM, inace se usporeduje pamcenjem umjesto okom. */
.setup-stil-ploca { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.setup-stil-kart {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    padding: 0.6rem 0.5rem 0.7rem;
    border: 2px solid #e2e8f0; border-radius: 0.85rem;
    background: #fff; cursor: pointer; min-width: 0;
    transition: border-color .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) { .setup-stil-kart:hover { border-color: #93c5fd; transform: translateY(-2px); } }
.setup-stil-kart:active { transform: translateY(0); }
.setup-stil-ime {
    font-size: 0.9rem; font-weight: 800; color: #1e293b;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.setup-stil-slika {
    width: 100%; aspect-ratio: 320 / 547; height: auto; display: block;
    object-fit: cover; object-position: top;
    border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff;
}
/* Dvije uspravne kartice, ne preko cijele sirine: na sirokom zaslonu bi
   inace svaka bila pola monitora, a snimka telefona razvucena na pola
   monitora prestaje izgledati kao telefon. */
.setup-stil-ploca { justify-content: center; }
@media (min-width: 640px) {
    .setup-stil-ploca { grid-template-columns: repeat(2, minmax(0, 230px)); }
}
html.dark-theme .setup-stil { background: #0b1220; }
html.dark-theme .setup-stil-naslov { color: #e2e8f0; }
html.dark-theme .setup-stil-kart { background: #1f1e1d; border-color: #2a2927; }
html.dark-theme .setup-stil-ime { color: #cbd5e1; }

/* ODGOVORI NA MOJE PRIJAVE (Ivo, 01.09.)
   =====================================
   Vlastiti prozor, ne redak u Postavkama: odgovor je tekst koji se cita, a ne
   prekidac koji se namjesta. */
.prij-ov {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(15, 23, 42, .45); padding: 0;
}
@media (min-width: 640px) { .prij-ov { align-items: center; padding: 1.5rem; } }
.prij-kut {
    width: 100%; max-width: 520px; max-height: 86vh; display: flex;
    flex-direction: column; background: #fff;
    border-radius: 1rem 1rem 0 0; overflow: hidden;
}
@media (min-width: 640px) { .prij-kut { border-radius: 1rem; } }
.prij-vrh {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem; border-bottom: 1px solid #eef2f7;
    font-size: 0.95rem; color: #0f172a;
}
.prij-x { border: 0; background: none; font-size: 1.5rem; line-height: 1;
          color: #94a3b8; cursor: pointer; padding: 0 0.25rem; }
.prij-tijelo { overflow-y: auto; padding: 0.75rem 1rem 1.1rem; }
.prij-stavka { padding: 0.7rem 0; border-bottom: 1px solid #f1f5f9; }
.prij-stavka:last-child { border-bottom: 0; }
.prij-meta { font-size: 0.72rem; color: #94a3b8; margin-bottom: 0.3rem; }
.prij-rij { color: #16a34a; font-weight: 700; }
/* Moja prijava je NAVOD, odgovor je poruka — pa se i razlikuju: navod blijed
   uz crtu, odgovor pun i uokviren. Bez toga se na malom ekranu ne vidi tko
   kome govori. */
.prij-moja {
    font-size: 0.8rem; color: #64748b; font-style: italic;
    border-left: 3px solid #e2e8f0; padding-left: 0.55rem; margin-bottom: 0.45rem;
}
.prij-odg {
    font-size: 0.88rem; color: #0f172a; background: #eff6ff;
    border: 1px solid #dbeafe; border-radius: 0.6rem; padding: 0.55rem 0.7rem;
    white-space: pre-wrap;
}
.prij-pot { font-size: 0.7rem; color: #94a3b8; margin-top: 0.3rem; }
html.dark-theme .prij-kut { background: #1f1e1d; }
html.dark-theme .prij-vrh { color: #e2e8f0; border-bottom-color: #2a2927; }
html.dark-theme .prij-odg { background: #172554; border-color: #1e3a8a; color: #e2e8f0; }
html.dark-theme .prij-stavka { border-bottom-color: #2a2927; }
body.eink-look .prij-odg { background: #fff; border: 2px solid #000; color: #000; }

/* FOKUS-OKVIR SAMO ZA TIPKOVNICU (Ivo, 01.09.: „na dektop nebi da se ovaj
   crni okvir pojavljuje")
   ====================================================================
   Plocica je `<button>`, pa je poslije klika ostajala fokusirana i preglednik
   je oko nje crtao svoj crni okvir. Na dodiru se to ne vidi, na desktopu se
   vidi poslije svakog klika.

   Gasi se za MIS, ne za sve: tko se krece tipkovnicom mora vidjeti gdje je,
   inace se po resetki ide naslijepo. `:focus-visible` je upravo ta razlika, a
   nas okvir je uz to i ljepsi od zadanog — plav i zaobljen kao i sve ostalo. */
body.simple-look .jl-plocica:focus { outline: none; }
body.simple-look .jl-plocica:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: .7rem;
}
body.eink-look .jl-plocica:focus-visible { outline-color: #000; }

/* Naslov druge i svake sljedece skupine u „Mojim predmetima" treba zrak iznad
   sebe — prvi ga ne treba jer stoji odmah ispod zaglavlja ekrana. */
.msub-h-grupa { margin-top: 1.1rem; }

/* KALENDAR ROKA (Ivo, 02.09.)
   ==========================
   Zamjena sustavnog `<input type="date">`, koji je na Androidu bio tamnosivi
   Material dijalog s engleskim natpisima. Ovo je isti jezik oblika kao ostali
   prozori aplikacije: bijela ploha, plavi naglasak, zaobljeni rubovi. */
/* KUCICA U SREDINI, U BOJAMA PLANA (Drago, 22.09.2026.: „neka bude popup
   preko cijelog ekrana kao u sredini, kao halo, u skladu s planom“): zastor
   kao kartica petlje, plavo zaglavlje kao sazetak plana, Inzenjerkova glava. */
.kal-ov {
    position: fixed; inset: 0; z-index: 140;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(15, 23, 42, .55);
}
.kal-kut {
    width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto;
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .5);
}
.kal-vrh {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1rem; color: #1e3a8a;
    background: #eff6ff; border-bottom: 1px solid #dbeafe;
}
.kal-lice { flex: 0 0 auto; display: flex; background: #fff; border-radius: 10px; padding: 3px;
    box-shadow: inset 0 0 0 1px #dbeafe; }
.kal-vrh-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kal-vrh-txt b { font-size: 1rem; color: #1e3a8a; }
.kal-vrh-txt span {
    font-size: .8rem; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-x, .kal-natrag {
    flex: 0 0 auto; border: 0; background: none; cursor: pointer;
    color: #64748b; font-size: 1.5rem; line-height: 1; padding: 0 .25rem;
}
.kal-mjesec {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1rem .3rem;
}
.kal-naziv { font-weight: 700; color: #1e293b; font-size: .95rem; }
.kal-strelica {
    border: 0; background: #f1f5f9; color: #334155; cursor: pointer;
    width: 2rem; height: 2rem; border-radius: 999px; font-size: 1.1rem; line-height: 1;
}
.kal-tjedan, .kal-mreza {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: .15rem; padding: 0 .75rem;
}
.kal-tjedan span {
    text-align: center; font-size: .68rem; color: #94a3b8;
    text-transform: uppercase; padding: .3rem 0;
}
.kal-mreza { padding-bottom: .5rem; }
.kal-dan {
    aspect-ratio: 1 / 1; border: 0; background: none; cursor: pointer;
    border-radius: 999px; font-size: .88rem; color: #1e293b;
}
.kal-dan:hover:not(:disabled) { background: #eff6ff; }
/* Prošli datumi ostaju vidljivi ali neaktivni — praznina bi izgledala kao kvar. */
.kal-dan.je-proslo { color: #cbd5e1; cursor: default; }
.kal-dan.je-danas { box-shadow: inset 0 0 0 1.5px #93c5fd; font-weight: 700; }
.kal-dan.je-odabran { background: #2563eb; color: #fff; font-weight: 700; }
.kal-prazno { aspect-ratio: 1 / 1; }
.kal-noga { padding: .4rem 1rem 1rem; display: flex; justify-content: center; }
.kal-tekst {
    border: 0; background: none; cursor: pointer;
    color: #64748b; font-size: .82rem; font-weight: 600; text-decoration: underline;
}
.kal-popis { padding: .5rem .75rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.kal-ucitavam { color: #94a3b8; font-size: .85rem; padding: 1.2rem; text-align: center; }
.kal-stavka {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .7rem .85rem; border: 1px solid #dbeafe; border-radius: 12px;
    background: #eff6ff; cursor: pointer; text-align: left;
}
.kal-stavka:hover { border-color: #2563eb; background: #dbeafe; }
.kal-stavka-ime {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    font-size: .88rem; font-weight: 700; color: #1e3a8a;
}
.kal-stavka-ime small { font-weight: 500; font-size: .72rem; color: #3b82f6; }
.kal-str { color: #2563eb; font-size: 1.2rem; line-height: 1; }
.kal-gumb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.dark-theme .kal-kut { background: #1f1e1d; }
html.dark-theme .kal-vrh { border-bottom-color: #2a2927; }
html.dark-theme .kal-vrh-txt b, html.dark-theme .kal-naziv,
html.dark-theme .kal-dan, html.dark-theme .kal-stavka-ime { color: #e2e8f0; }
html.dark-theme .kal-strelica { background: #2a2927; color: #cbd5e1; }
html.dark-theme .kal-stavka { background: #0b1220; border-color: #2a2927; }

body.eink-look .kal-kut { border: 2px solid #000; }
body.eink-look .kal-dan.je-odabran { background: #000; }
body.eink-look .kal-stavka { border: 2px solid #000; background: #fff; }

/* Kalendar ugrađen u ekran (plan): bez plohe preko ekrana, bez sjene, uže
   margine — on je dio prozora, ne prozor. */
.kal-mjesto { width: 100%; }
.kal-ugradjen .kal-kut {
    max-width: 100%; max-height: none; overflow: visible;
    border: 1px solid #e2e8f0; border-radius: .8rem; background: #fff;
}
.kal-ugradjen .kal-vrh { padding: .6rem .7rem; }
.kal-ugradjen .kal-tjedan, .kal-ugradjen .kal-mreza { padding: 0 .5rem; }
.kal-ugradjen .kal-popis { padding: .4rem .5rem .7rem; }
.pset-hero--tanak { padding-top: .6rem; padding-bottom: .6rem; }
html.dark-theme .kal-ugradjen .kal-kut { background: #1f1e1d; border-color: #2a2927; }
body.eink-look .kal-ugradjen .kal-kut { border: 2px solid #000; }


/* IZBORNIK NAD PLOCICOM (Ivo, 02.09.)
   ==================================
   Zamjena crvenog krizica: popis radnji ISPOD plocice, s imenima, kao skocni
   izbornik na Androidu. Krizic je nudio jednu radnju i nije rekao koju. */
/* `fixed`, NE `absolute` (02.09.). Izbornik od danas stoji na `body`, a ne u
   plocici — uz `absolute` bi mu se `left/top` racunali od dokumenta, pa bi na
   skrolanoj stranici zavrsio izvan ekrana (izmjereno: left = -80 px).
   Polozaj postavlja `postaviIzbornik` u pikselima prozora. */
body.simple-look .jl-izbornik {
    position: fixed; z-index: 320;
    min-width: 11rem; max-width: 15rem;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e2e8f0; border-radius: .7rem;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
    overflow: hidden; margin-top: .25rem;
}
body.simple-look .jl-izb-stavka {
    border: 0; background: none; cursor: pointer; text-align: left;
    padding: .6rem .75rem; font-size: .82rem; color: #1e293b;
    border-bottom: 1px solid #f1f5f9; white-space: normal;
}
body.simple-look .jl-izb-stavka:last-child { border-bottom: 0; }
body.simple-look .jl-izb-stavka:hover { background: #eff6ff; }
/* Brisanje je jedina radnja koja nesto gubi — i jedina koja je crvena. */
body.simple-look .jl-izb-stavka.je-opasno { color: #dc2626; font-weight: 600; }
body.simple-look .jl-izb-stavka.je-opasno:hover { background: #fef2f2; }
/* Plocica s otvorenim izbornikom mora biti IZNAD susjednih, inace joj popis
   nestane ispod sljedeceg reda resetke. */
body.simple-look .jl-plocica.jl-arhiva-otvorena { z-index: 31; }

html.dark-theme body.simple-look .jl-izbornik { background: #1f1e1d; border-color: #2a2927; }
html.dark-theme body.simple-look .jl-izb-stavka { color: #e2e8f0; border-bottom-color: #2a2927; }
body.eink-look .jl-izbornik { border: 2px solid #000; box-shadow: none; }

/* Tri radnje u arhivi umjesto jedne — „Obriši" je jedina koja nešto gubi, i
   jedina crvena. */
.msub-arhiv-pol { color: #16a34a; }
.msub-arhiv-del { color: #dc2626; }

/* `.streak-modal-igra` je maknut 23.09.2026. zajedno s gumbom koji je nosio
   (v. app.js, prozor niza). Ako zatreba opet: igra ima svoju ljubicastu
   #4f2fd1, narancasta prozora niza je na njoj davala 2,26:1. */
/* "Nastavi razgovor" CTA na mentorovoj povratnoj kartici (Drago, 2.9.2026.:
   "u stilu ostalih strelica i da malo sjaji") — blagi puls sjene, bez
   agresije; reduced-motion ga gasi. */
.mw-resume-cta { animation: mwResumeGlow 2.4s ease-in-out infinite; }
@keyframes mwResumeGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .mw-resume-cta { animation: none; }
}

/* GLAZBA — ista kostura kao `.zf-` stranica, pa se ponasa isto na svim
   izgledima (svijetlo/tamno, sigurne zone). Razlike su samo popis djela i
   redak zapisa, jer sum nema sto nabrajati a glazba ima 34 stavka. */
.gl-stranica {
    position: fixed; inset: 0; z-index: 320;
    display: flex; flex-direction: column;
    background: #fff; color: #0f172a;
}
.gl-traka {
    display: flex; align-items: center; gap: .3rem; flex: 0 0 auto;
    padding: .7rem .6rem; border-bottom: 1px solid #e2e8f0;
    padding-top: calc(.7rem + var(--safe-top, 0px));
}
.gl-natrag {
    width: 44px; height: 44px; flex: 0 0 auto; cursor: pointer;
    border: 0; background: none; color: #334155;
    font-size: 1.7rem; line-height: 1; border-radius: 9999px;
}
.gl-natrag:hover { background: #f1f5f9; }
.gl-naslov { font-size: 1.05rem; font-weight: 700; margin: 0; }
.gl-tijelo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 1rem; max-width: 34rem; width: 100%; margin: 0 auto;
    padding-bottom: calc(1rem + var(--safe-bottom, 0px));
}
.gl-uvod { font-size: .85rem; line-height: 1.55; color: #475569; margin: 0 0 .8rem; }
.gl-sada {
    font-size: .8rem; color: #1d4ed8; min-height: 1.2rem; margin-bottom: .6rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-klizac {
    display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem;
    font-size: .8rem; color: #64748b;
}
.gl-klizac input { flex: 1; }
.gl-stani {
    width: 100%; margin-bottom: 1rem; padding: .7rem; cursor: pointer;
    border: 1px solid #e2e8f0; border-radius: .8rem; background: #fff;
    font-size: .88rem; color: #475569;
}
.gl-djelo { margin-bottom: .9rem; }
.gl-zaglavlje {
    display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
    padding: .2rem 0 .35rem; font-size: .82rem; color: #64748b;
}
.gl-zaglavlje b { font-size: .88rem; color: #0f172a; }
.gl-rang {
    font-style: normal; font-size: .68rem; color: #94a3b8;
    border: 1px solid #e2e8f0; border-radius: 9999px; padding: 0 .35rem;
}
.gl-zapis {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .55rem .7rem; margin-bottom: .3rem; cursor: pointer;
    border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff;
    color: #0f172a; text-align: left;
}
.gl-zapis.je-na { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.gl-znak { flex: 0 0 auto; width: 1.1rem; font-size: .8rem; }
.gl-ime {
    flex: 1 1 auto; min-width: 0; font-size: .8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-tr { flex: 0 0 auto; font-size: .72rem; color: #94a3b8; }
.gl-posteno {
    margin-top: 1.3rem; padding: .8rem .9rem; border-radius: .6rem;
    background: #f8fafc; border-left: 3px solid #cbd5e1;
    font-size: .8rem; line-height: 1.6; color: #475569;
}
.gl-licenca {
    margin-top: .7rem; font-size: .74rem; line-height: 1.6; color: #94a3b8;
}
.gl-nota { margin-top: 1rem; font-size: .74rem; color: #94a3b8; line-height: 1.55; }
html.dark-theme .gl-stranica { background: #1f1e1d; color: #e2e8f0; }
html.dark-theme .gl-traka { border-bottom-color: #2a2927; }
html.dark-theme .gl-natrag { color: #cbd5e1; }
html.dark-theme .gl-zaglavlje b { color: #e2e8f0; }
html.dark-theme .gl-zapis,
html.dark-theme .gl-stani { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }
html.dark-theme .gl-zapis.je-na { border-color: #3b82f6; background: #1e3a8a; color: #dbeafe; }
html.dark-theme .gl-posteno { background: #2a2927; border-left-color: #475569; color: #cbd5e1; }

/* SADRZAJ RAZGOVORA (chat-toc.js). Ploca ide S DESNA i puna je visine, jer
   cijeli ostatak programa sadrzaj drzi desno (ToC skripte, citac) — Dragin
   prvi izbornik stajao je s lijeva i to je bila jedina zamjerka rasporedu. */
.ctoc-ploca {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(21rem, 88vw);
    z-index: 330; display: flex; flex-direction: column;
    background: #fff; color: #0f172a;
    border-left: 1px solid #e2e8f0; box-shadow: -12px 0 28px rgba(15, 23, 42, .12);
}
.ctoc-traka {
    display: flex; align-items: center; gap: .4rem; flex: 0 0 auto;
    padding: .7rem .6rem .7rem .9rem; border-bottom: 1px solid #e2e8f0;
    padding-top: calc(.7rem + var(--safe-top, 0px));
}
.ctoc-naslov { flex: 1 1 auto; font-size: 1rem; font-weight: 700; margin: 0; }
.ctoc-x, .ctoc-natrag {
    width: 40px; height: 40px; flex: 0 0 auto; cursor: pointer;
    border: 0; background: none; color: #334155;
    font-size: 1.5rem; line-height: 1; border-radius: 9999px;
}
.ctoc-x:hover, .ctoc-natrag:hover { background: #f1f5f9; }
.ctoc-tijelo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem; }
.ctoc-skupina { margin-top: .15rem; }
.ctoc-red {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .55rem .6rem; margin-bottom: .12rem; cursor: pointer;
    border: 0; border-radius: .5rem; background: none;
    color: #0f172a; text-align: left; font-size: .85rem;
}
.ctoc-red:hover { background: #f1f5f9; }
.ctoc-red.je-na { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.ctoc-red.je-otvoren { background: #f8fafc; font-weight: 600; }
/* „Novi razgovor" je RADNJA, ne sadrzaj — pa stoji tise od redaka
   koje nabraja. Ista razlika koju „Objasni vise" ima prema „Dalje". */
.ctoc-red.ctoc-prigusen { color: #64748b; font-size: .86rem; }
.ctoc-red.ctoc-prigusen:hover { color: #1d4ed8; }
.ctoc-ik { flex: 0 0 auto; width: 1.15rem; font-size: .85rem; }
.ctoc-ime {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctoc-dodatak {
    flex: 0 0 auto; font-size: .68rem; color: #64748b;
    background: #f1f5f9; border-radius: 9999px; padding: 0 .4rem;
}
.ctoc-usobu {
    flex: 0 0 auto; border: 0; background: none; cursor: pointer;
    font-size: .7rem; color: #2563eb; padding: .2rem .35rem; border-radius: .35rem;
}
.ctoc-usobu:hover { background: #dbeafe; }
.ctoc-grane { padding-left: .7rem; border-left: 2px solid #e2e8f0; margin-left: .8rem; }
.ctoc-uvuci { font-size: .8rem; color: #475569; }
.ctoc-prazno { padding: .5rem .6rem; font-size: .76rem; color: #94a3b8; }
.ctoc-dno {
    flex: 0 0 auto; display: flex; gap: .5rem; padding: .6rem;
    border-top: 1px solid #e2e8f0;
    padding-bottom: calc(.6rem + var(--safe-bottom, 0px));
}
.ctoc-radnja {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .18rem;
    padding: .55rem .3rem; cursor: pointer; font-size: .72rem;
    border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; color: #334155;
}
.ctoc-radnja:hover { background: #f8fafc; border-color: #cbd5e1; }
.ctoc-radnja span { font-size: 1.05rem; line-height: 1; }
.ctoc-citanje, .ctoc-izbor {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
    background: #fff;
}
.ctoc-izbor {
    justify-content: center; gap: .5rem; padding: 1rem;
    background: rgba(255, 255, 255, .98);
}
.ctoc-izbor-naslov { font-size: .85rem; line-height: 1.5; color: #334155; margin-bottom: .3rem; }
.ctoc-izbor-lista { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.ctoc-izbor-red {
    width: 100%; padding: .6rem .7rem; cursor: pointer; text-align: left;
    border: 1px solid #e2e8f0; border-radius: .55rem; background: #fff;
    font-size: .82rem; color: #0f172a;
}
.ctoc-izbor-red.je-preporuka { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.ctoc-izbor-odustani {
    width: 100%; padding: .55rem; cursor: pointer; margin-top: .3rem;
    border: 0; border-radius: .55rem; background: #f1f5f9; color: #475569; font-size: .82rem;
}
.ctoc-poruka {
    padding: .5rem .65rem; margin-bottom: .35rem; border-radius: .6rem;
    font-size: .8rem; line-height: 1.5; white-space: pre-wrap;
}
.ctoc-poruka.je-ja { background: #eff6ff; color: #1e3a8a; }
.ctoc-poruka.je-bot { background: #f8fafc; color: #334155; }
.ctoc-obrisi {
    width: 100%; margin-top: .8rem; padding: .55rem; cursor: pointer;
    border: 1px solid #fecaca; border-radius: .55rem; background: #fff;
    color: #b91c1c; font-size: .78rem;
}
html.dark-theme .ctoc-ploca { background: #1f1e1d; color: #e2e8f0; border-left-color: #2a2927; }
html.dark-theme .ctoc-traka { border-bottom-color: #2a2927; }
html.dark-theme .ctoc-x, html.dark-theme .ctoc-natrag { color: #cbd5e1; }
html.dark-theme .ctoc-red { color: #e2e8f0; }
html.dark-theme .ctoc-red:hover, html.dark-theme .ctoc-red.je-otvoren { background: #2a2927; }
html.dark-theme .ctoc-red.je-na { background: #1e3a8a; color: #dbeafe; }
html.dark-theme .ctoc-grane { border-left-color: #3b3a37; }
html.dark-theme .ctoc-dno { border-top-color: #2a2927; }
html.dark-theme .ctoc-radnja { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }
html.dark-theme .ctoc-citanje, html.dark-theme .ctoc-izbor { background: #1f1e1d; }
html.dark-theme .ctoc-izbor-red { background: #2a2927; border-color: #3b3a37; color: #e2e8f0; }
html.dark-theme .ctoc-poruka.je-ja { background: #1e3a8a; color: #dbeafe; }
html.dark-theme .ctoc-poruka.je-bot { background: #2a2927; color: #cbd5e1; }

/* „DALJE →" NA KRAJU PODPOGLAVLJA (Ivo, 02.09.). Samo u skrol nacinu — na
   tinti tu ulogu ima okretanje stranice. Boje su Inzenjerkove; na tinti se
   gumb ionako ne crta, pa ne treba crno-bijela inacica. */
.ec-dalje {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    /* MORA OSTATI IZNAD SISTEMSKE TRAKE (Ivo, 02.09.: „ovo 'Dalje' se preklapa
       s ovin ikonama doli za nazad (…) ove ikone je ok da su priko teksta ali
       nebi smile bit priko ovoga sta se triba kliknit").
       Tekst smije klizati ispod Androidovih tipki — gumb ne smije, jer se na
       njega cilja prstom. Zato dno racuna sigurnu zonu, plus prst razmaka. */
    width: 100%; max-width: 22rem;
    /* `max()`, a ne samo `--safe-bottom`: na Androidu s tri tipke `env()` zna
       prijaviti 0 (v. `probeInset` u native-bridge.js), a traka je ~48 px —
       pa bi gumb i dalje zavrsio pod njom. Donja granica od 3.25rem drzi ga
       iznad nje i kad sustav ne kaze nista. */
    margin: 2rem auto max(3.25rem, calc(1.25rem + var(--safe-bottom, 0px)));
    padding: .85rem 1.2rem; cursor: pointer;
    border: 0; border-radius: 9999px;
    background: #2563eb; color: #fff;
    font-size: .95rem; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
/* NAZAD I DALJE JEDAN DO DRUGOG (Ivo, 05.09.2026.). Kad je gumb sam, red
   ga ne mijenja — `max-width` i dalje drzi njegovu punu sirinu. */
.ec-koraci {
    display: flex; gap: .75rem; align-items: center; justify-content: center;
    width: 100%;
}
.ec-koraci .ec-dalje { margin-left: 0; margin-right: 0; }
/* Sekundaran, i to POZADINOM KOJE NEMA: citac se koristi i u tamnoj temi, pa
   bi tvrdo bijela ovdje bila svijetla mrlja. Prozirna uzima ono iza sebe. */
.ec-nazad {
    background: transparent; color: #2563eb;
    border: 1.5px solid #2563eb; box-shadow: none;
    max-width: 11rem; letter-spacing: .02em;
}
/* „NAZAD" JE CIP, NE PLOCA (Drago QA 22.09.2026., slika s telefona: „Nazad je
   ogromno"). Isti kroj kao „DALJE" u retku s Inzenjerkom (`.ec-dalje--u-retku`),
   samo obrubljen i uz lijevi rub: sekundarni put ne smije biti najveci gumb na
   ekranu. Donji razmak ostaje zbog sistemske trake (v. `.ec-dalje`). */
.ec-koraci { justify-content: space-between; }
.ec-koraci .ec-nazad {
    width: auto; max-width: none;
    padding: .3rem .8rem .3rem .6rem; gap: .3rem;
    font-size: .78rem; margin-top: .9rem;
}
.ec-koraci .ec-nazad .ec-dalje-znak { width: .85rem; height: .85rem; }
.ec-nazad:hover { background: rgba(37, 99, 235, .08); }
body.eink-look .ec-nazad { background: transparent; color: #000; border-color: #000; }
.ec-dalje:hover { background: #1d4ed8; }
.ec-dalje:active { transform: translateY(1px); }
.ec-dalje-znak { display: flex; width: 1.25rem; height: 1.25rem; }
.ec-dalje-znak svg { width: 100%; height: 100%; }
/* Inzenjerkova ikona u boji samo izvan tinte: `eink-look` je crno-bijeli
   nacin i svaka boja se ondje pretvori u sivu mrlju. */
body.eink-look .ec-dalje {
    background: #fff; color: #000; border: 1.5px solid #000; box-shadow: none;
}
/* Jezicak sadrzaja u Icons izgledu nosi Inzenjerkovu boju; na tinti ostaje
   bijeli s crnim crticama, kako je Ivo trazio jos 26.08. */
body:not(.eink-look) #eink-citac.ec-skrol .ec-jezicak {
    border-color: #2563eb; background: #fff;
}
body:not(.eink-look) #eink-citac.ec-skrol .ec-jezicak i { background: #2563eb; }
body:not(.eink-look) #eink-citac.ec-skrol.toc-otvoren .ec-jezicak {
    background: #2563eb; border-color: #2563eb;
}
body:not(.eink-look) #eink-citac.ec-skrol.toc-otvoren .ec-jezicak i { background: #fff; }

/* POMODORO (pomodoro.js). Crn je zatrazen, ali ima i razlog: pauza provedena
   u istom bijelom sucelju nije pauza. U RADU se stranica ne prikazuje — samo
   brojac u kutu — jer bi sat preko gradiva bio bas ono sto pomodoro sprjecava. */
.pom-stranica {
    position: fixed; inset: 0; z-index: 340;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .8rem; padding: 1.5rem; text-align: center;
    background: #0b0f19; color: #e2e8f0;
    padding-top: calc(1.5rem + var(--safe-top, 0px));
    padding-bottom: calc(1.5rem + var(--safe-bottom, 0px));
}
.pom-stranica.je-pauza { background: #000; }
.pom-x {
    position: absolute; top: calc(.5rem + var(--safe-top, 0px)); right: .5rem;
    width: 44px; height: 44px; cursor: pointer;
    border: 0; background: none; color: #64748b; font-size: 1.7rem; line-height: 1;
}
.pom-faza { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }
.pom-sat {
    font-size: clamp(3.5rem, 22vw, 6rem); font-weight: 200;
    font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1;
}
.pom-ideja {
    max-width: 22rem; font-size: 1rem; line-height: 1.6; color: #cbd5e1;
    margin-top: .4rem;
}
.pom-tipke { display: flex; gap: .6rem; margin-top: 1rem; }
.pom-tipke button {
    min-width: 8rem; padding: .7rem 1.1rem; cursor: pointer;
    border: 1px solid #334155; border-radius: 9999px;
    background: #111827; color: #e2e8f0; font-size: .88rem; font-weight: 600;
}
.pom-radi { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
.pom-ugasi {
    margin-top: .3rem; padding: .5rem .9rem; cursor: pointer;
    border: 0; background: none; color: #64748b; font-size: .78rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.pom-posteno {
    max-width: 24rem; margin-top: 1.2rem;
    font-size: .72rem; line-height: 1.6; color: #475569;
}
/* Brojac u kutu: jedini trag pomodora dok student uci. Namjerno malen i
   poluproziran — mora se moci pogledati, ne mora se gledati. */
.pom-kut {
    position: fixed; right: .6rem; z-index: 200;
    bottom: calc(.6rem + var(--safe-bottom, 0px));
    padding: .3rem .6rem; cursor: pointer;
    border: 1px solid rgba(148, 163, 184, .5); border-radius: 9999px;
    background: rgba(15, 23, 42, .82); color: #e2e8f0;
    font-size: .78rem; font-variant-numeric: tabular-nums;
}
.pom-kut.je-pauza { background: #2563eb; border-color: #2563eb; color: #fff; }

/* BRZI IZBORNIK U STANDARDNOM IZGLEDU. Nasljeduje `home-courses-grid`, pa se
   klize isto kao redak predmeta; ovdje se dotjeruje samo sadrzaj plocice. */
.home-brzi-plocica {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; text-align: center;
}
.home-brzi-ikona {
    display: flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; color: #2563eb;
}
.home-brzi-ikona svg, .home-brzi-ikona img {
    width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}
.home-brzi-ime {
    font-size: .72rem; font-weight: 600; color: #334155; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
html.dark-theme .home-brzi-ime { color: #cbd5e1; }

/* POPIS BRZOG IZBORNIKA U POSTAVKAMA (Ivo, 07.09.2026.: „popis ikona slicno
   prikazano kao ode i check boxovi za oznacit").
   Namjerno posudjuje `home-brzi-ikona` i `home-brzi-ime` s naslovnice: ista
   ikona i isti natpis, pa student bira ono sto ce doista i vidjeti. */
.brzi-mreza {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
.brzi-plocica {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; gap: .35rem;
    text-align: center; padding: .7rem .35rem .55rem;
    border: 1px solid #e2e8f0; border-radius: .75rem;
    background: #fff; cursor: pointer;
}
.brzi-plocica.brzi-cek { border-color: #2563eb; background: #eff6ff; }
/* Kvacica u kutu, da ne otima sirinu natpisu — plocica je ionako cijela
   dodirljiva jer je <label>. */
.brzi-plocica input { position: absolute; top: .3rem; right: .3rem; margin: 0; }
html.dark-theme .brzi-plocica { background: #1e293b; border-color: #334155; }
html.dark-theme .brzi-plocica.brzi-cek { background: #1e3a5f; border-color: #3b82f6; }

/* IKONA SADRZAJA U ZAGLAVLJU (Ivo, 02.09.). Inzenjerkova plava, velicina za
   prst (Onyxovo pravilo: >=48 dp uz rub), i stoji na istom mjestu cijelo
   vrijeme citanja jer zaglavlje se u Icons nacinu ne skriva. */
#toc-hdr-btn, #ctoc-hdr-btn, #abtoc-hdr-btn {
    /* PRICVRSCEN ZA ZASLON, ne za tok zaglavlja.
       Mjereno: dok je citac otvoren, `#app-header` stoji na `top: -51px` —
       odmaknut je tocno za svoju visinu (`--ec-vrh`), pa bi gumb u njegovu
       toku zavrsio IZNAD vidljivog podrucja. Fiksni polozaj to zaobilazi i
       usput ispunjava ono sto je Ivo trazio za tintu: ikona uvijek na istom
       mjestu, a ne cas skrivena cas otkrivena.
       Iznad citaca (z-index 60), da ostane dohvatljiva i kad je sadrzaj
       otvoren — isti gumb ga tada i zatvara. */
    /* U REDU ZAGLAVLJA, UZ HAMBURGER (Ivo, 02.09., zaokruzeno: „ovo neka bude
       skroz gori dio ove trake sta se sakriva. Slicno ko sta je ovo livo, neka
       bude desno ovo novo").
       Prije je stajao NIZE, preko samog gradiva, jer sam ga pricvrstio za
       zaslon kad je mjerenje pokazalo zaglavlje na `top: -51px`. To mjerenje
       je bilo iz umjetnog poziva `prikazi()` prije nego se raspored slegao; na
       uredaju zaglavlje stoji i vidi se. Sad je gumb u istom retku kao ☰ i
       skriva se zajedno s trakom, kako je i trazeno. */
    /* SREDINA ZAGLAVLJA, BEZ `--safe-top` (Ivo, 02.09.: „ToC ovaj mora bit
       integriran u gornju traku").
       Dodao sam `--safe-top` na vrh, a zaglavlje ga VEC ima u svom paddingu —
       pa se sigurna zona brojala dvaput i gumb je ispadao ISPOD trake, tocno
       kao na slici (traka visoka 49 px, gumb od 40 px poceo na ~38 px).
       Sredina se racuna, ne pogada: `top: 50%` + pomak za pola visine drzi ga
       u retku bez obzira koliko traka bude visoka. */
    position: absolute; right: 12px; z-index: 62;
    top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; cursor: pointer;
    border: 1.5px solid #2563eb; border-radius: .7rem;
    background: #fff; color: #2563eb; padding: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
}
#toc-hdr-btn.hidden, #ctoc-hdr-btn.hidden, #abtoc-hdr-btn.hidden { display: none; }
#toc-hdr-btn svg, #ctoc-hdr-btn svg, #abtoc-hdr-btn svg { width: 22px; height: 22px; }
#toc-hdr-btn:hover, #ctoc-hdr-btn:hover, #abtoc-hdr-btn:hover { background: #eff6ff; }
#toc-hdr-btn.je-na, #ctoc-hdr-btn.je-na, #abtoc-hdr-btn.je-na { background: #2563eb; color: #fff; }
/* CITAC JE NASTAO POSLIJE TAMNE TEME, pa je i ovaj gumb ostao bez tamne grane
   (Drago QA 16.09.2026.): zaglavlje se prebojilo u #2a2927, a gumb sadrzaja
   ostao bijeli kvadrat 40x40 i bio najsvjetlija tocka ekrana. `je-na` ostaje
   plav u obje teme: to je jedini znak da je ploca otvorena. */
html.dark-theme #toc-hdr-btn, html.dark-theme #ctoc-hdr-btn, html.dark-theme #abtoc-hdr-btn {
    background: #2a2927; color: #93c5fd; border-color: #3b82f6;
}
html.dark-theme #toc-hdr-btn:hover, html.dark-theme #ctoc-hdr-btn:hover, html.dark-theme #abtoc-hdr-btn:hover { background: #172554; }
/* Jezicak uz rub OSTAJE SAMO NA TINTI: ondje citac pokriva cijeli zaslon pa
   zaglavlja aplikacije nema. U Icons nacinu bi bio drugi gumb za istu stvar,
   a Ivo ga je na slici precrtao. */
#eink-citac.ec-skrol .ec-jezicak { display: none; }

/* POLJA ZA UNOS NA ELEKTRONSKOJ TINTI (Ivo, 02.09.: „godina rodenja na eink se
   nevidi di upisat").
   Izmjereno, ne procijenjeno: rub polja bio je rgb(226,232,240) na 1 px —
   kontrast 1,23:1 prema bijeloj kartici, dok se za obrub kontrole trazi
   najmanje 3:1. Na zaslonu u boji to je jos i blijedo; na tinti, koja sve
   svodi na sivu ljestvicu, polje jednostavno nestane.
   Isto pravilo koje tinta vec drzi drugdje: 2 px,
   crno, bez sjene. Vrijedi za SVA polja, ne samo za godinu rodenja — isti
   blijedi rub nose i ostala. */
body.eink-look input:not([type="checkbox"]):not([type="radio"]),
body.eink-look select,
body.eink-look textarea {
    border: 2px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
}
body.eink-look input::placeholder,
body.eink-look textarea::placeholder { color: #555 !important; }
/* Kvacica mora imati vidljiv okvir i kad nije oznacena. */
body.eink-look input[type="checkbox"],
body.eink-look input[type="radio"] {
    outline: 2px solid #000; outline-offset: 1px;
}

/* TRAKA ZA SKROLANJE U CITACU (Ivo, 02.09., precrtano na slici: „zasto se ovo
   sastrane pojavilo").
   Android WebView crta KLASICNU traku, koja uzima svoju sirinu uz desni rub —
   za razliku od preglednika na stolnom racunalu, gdje je preklopna i nevidljiva
   dok se ne skrola (zato mi na provjeri nije ispala: izmjereno
   `offsetWidth - clientWidth = 0`).
   Bila je ondje i prije, ali ju je zaklanjao jezicak uz rub; cim je jezicak
   otisao u zaglavlje, traka je ostala sama na rubu i pocela se vidjeti.
   U citacu je suvisna: polozaj u gradivu vec govori brojac stranice odnosno
   naslov u traci, a ovdje samo jede rub teksta. */
#eink-citac .ec-tok {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* stari Edge */
}
#eink-citac .ec-tok::-webkit-scrollbar { width: 0; height: 0; }

/* Poruka o neuspjelom zapisu na stranici s glazbom. */
.gl-greska {
    font-size: .78rem; line-height: 1.5; color: #b91c1c;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: .5rem;
    padding: .5rem .65rem; margin-bottom: .6rem;
}
html.dark-theme .gl-greska { background: #450a0a; border-color: #7f1d1d; color: #fecaca; }

/* Sumovi na vrhu stranice s glazbom (Ivo, 02.09.). */
.gl-sumovi { display: flex; gap: .4rem; margin-bottom: .9rem; }
.gl-sum {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .5rem .3rem; cursor: pointer; text-align: center;
    border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; color: #334155;
}
.gl-sum b { font-size: .78rem; }
.gl-sum small { font-size: .64rem; color: #94a3b8; }
.gl-sum.je-na { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.gl-sum.je-na small { color: #3b82f6; }
.gl-sumovi-natpis {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: #94a3b8; margin-bottom: .3rem;
}
html.dark-theme .gl-sum { background: #2a2927; border-color: #3b3a37; color: #cbd5e1; }

/* SADRZAJ U CITACU — blize klasicnoj harmonici (Ivo, 02.09., peta slika).
   Zaglavlje je klon klasicnog retka, pa nosi Tailwindove razmake koji su ondje
   racunali na siru stranicu; ovdje se stisnu. */
/* Postotak stoji uz gumbe, na desnom kraju retka akcija — u ISTOM retku
   (Ivo, 10.09.2026.: „ovo postotak gurni gori"). Lomljenje ga je slalo u drugi
   red, pa je visio ispod gumba. */
.ec-toc-akcije { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.ec-toc-postotak { margin-left: auto; display: inline-flex; align-items: center; }
.ec-toc-postotak .w-9 { width: 2rem; height: 2rem; }

/* Prazan Uci sad! — kad nema predmeta iz kojih bi se slozile kartice. */
.learn-prazno {
    max-width: 26rem; margin: 3rem auto; padding: 1.5rem 1.2rem; text-align: center;
    color: #475569;
}
.learn-prazno-naslov { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: .6rem; }
.learn-prazno p { font-size: .88rem; line-height: 1.6; margin-bottom: 1.1rem; }
.learn-prazno-gumb {
    padding: .7rem 1.2rem; cursor: pointer; border: 0; border-radius: 9999px;
    background: #2563eb; color: #fff; font-size: .9rem; font-weight: 600;
}
html.dark-theme .learn-prazno { color: #cbd5e1; }
html.dark-theme .learn-prazno-naslov { color: #e2e8f0; }

/* „DALJE" dok ceka sljedece podpoglavlje: prigusen i bez odziva, da se vidi
   da je pritisak primljen (Ivo, 04.09.2026.). */
.ec-dalje.je-ceka { opacity: .55; cursor: default; }
.ec-toc-cekaj { padding: 1.2rem 1rem; font-size: .85rem; color: #64748b; text-align: center; }


/* ═══════════════════════════════════════════════════════════════════════
   TAMNA TEMA — DRUGA RUNDA (Ivo, 04.09.2026.)
   „Tamna tema na naslovoj je dobra, al kad se udje u predmet ili u skriptu
    nije bas. Ikone u predmetu triba malo popravit. Skripta ima bijelo okolo.
    A postavke isto ovo doli na dnu pre svjetlo u tamnom modu."
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 1. „SKRIPTA IMA BIJELO OKOLO" ------------------------------------
   Ljuska citaca je imala tvrdo upisan `background: #fff` i nijedno pravilo
   tamne teme je nije doticalo. Gradivo unutra JEST tamno (`.chunk-container`
   ima svoja pravila), pa se bijelo vidjelo tocno ondje gdje ljuska viri ispod
   sadrzaja — kao okvir oko skripte. Isti previd kao kod Icons plocica: citac
   je nastao poslije tamne teme. */
html.dark-theme #eink-citac.je-otvoren { background: #1f1e1d; color: #e2e8f0; }
html.dark-theme #eink-citac .ec-naslov,
html.dark-theme #eink-citac .ec-broj,
html.dark-theme #eink-citac .ec-ime,
html.dark-theme #eink-citac .ec-stranica { color: #e2e8f0; }
html.dark-theme .ec-ucitavam { color: #94a3b8; }

/* ---- 2. Slike u gradivu -----------------------------------------------
   Sam CRTEZ ostaje na bijelom i to je namjerno: dijagrami su crno na bijelom,
   a preokrenuti bi im se izgubile crte. Ali OKVIR oko njega je bio `#eee` —
   na tamnoj podlozi to je bijeli prsten oko svake slike. Plava kutija s
   opisom i kutija s formulom su iz istog razloga bile svijetle mrlje.

   Stilovi tih blokova su INLINE (crta ih `ingeniko-figures.js`), pa pravila
   moraju nositi `!important` — bez njega inline stil pobjeduje. */
html.dark-theme .mobilize-fig { border-color: #3b3a37 !important; }
html.dark-theme .ing-fig-opis {
    background: #172554 !important;
    border-color: #1e3a8a !important;
    color: #bfdbfe !important;
}

/* ---- 3. Postavke: dno ekrana ------------------------------------------
   „O aplikaciji" je nosio `bg-slate-100`, a „Resetiraj" `bg-red-50` — obje
   Tailwind klase za SVIJETLU podlogu, pa su na tamnom stajale kao dva bijela
   pravokutnika. Tailwindove klase su u ovom buildu `!important`, pa i ovdje
   mora biti. */
html.dark-theme .pos-o-aplikaciji {
    background: #2a2927 !important;
    color: #e2e8f0 !important;
    border: 1px solid #3b3a37 !important;
}
html.dark-theme .pos-o-aplikaciji:hover { background: #3b3a37 !important; }
html.dark-theme .pos-reset {
    background: #2a1215 !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}
html.dark-theme .pos-reset:hover { background: #3b1a1e !important; }

/* ---- 4. Ikone predmeta i nacina ---------------------------------------
   Ikone su gotove PNG slicice crtane za SVIJETLU podlogu, pa one s tamnom
   ispunom (npr. Tutorov oblacic) na tamnoj plocici jednostavno nestanu.
   Pravo rjesenje su tamne inacice tih slicica — to je posao za ImageManager,
   ne za CSS.

   Dotad dvoje sto se ovdje moze i sto doista pomaze: plocica je za nijansu
   svjetlija od pozadine (pa se vidi kao plocica, a ne kao rupa), a ikona
   dobiva tanku svijetlu konturu — dovoljno da se tamna ispuna odvoji od
   tamne podloge, premalo da se vidi kao obrub. */
html.dark-theme body.simple-look .jl-plocica-ikona { background: #263449; }
html.dark-theme body.simple-look .jl-plocica-ikona img,
html.dark-theme body.simple-look .jl-plocica-ikona svg {
    filter: drop-shadow(0 0 1px rgba(226, 232, 240, .65));
}

/* ---- 5. E-INK NEMA TAMNU TEMU -----------------------------------------
   Ivo (04.09.2026.): „eInk mod nema tamnu pozadinu, to iskljuci kao opciju za
   eInk mod." Izbor je maknut iz postavki (v. `settings.js`), a ovo je ograda
   za zatecen zapis: tko je vec bio na tamnoj pa presao na e-Ink, ne smije
   ostati na crnom zaslonu s kojeg se opcija vise ne vidi.
   Elektronska tinta je fizicki bijela ploha — „tamna tema" na njoj ne znaci
   tamnu pozadinu nego invertirane sive, sto je najlosiji citljiv ishod. */
html.dark-theme body.eink-look,
html.dark-theme body.eink-look #eink-citac.je-otvoren,
html.dark-theme body.eink-look #view-dashboard,
html.dark-theme body.eink-look .chunk-container { background: #fff !important; color: #000 !important; }



/* Vrtnja dok se plan dohvaca (Ivo, 04.09.2026.: „kad kliknen na moj plan,
   nista se ne dogodi"). Okno se otvara odmah, sadrzaj stize poslije. */
.mpo-cekaj {
    min-height: 60vh; display: flex; flex-direction: column; gap: .9rem;
    align-items: center; justify-content: center; padding: 0 1.5rem;
}
.mpo-cekaj-txt {
    font-size: .9rem; line-height: 1.5; color: #64748b; text-align: center;
    max-width: 22rem;
}
.mpo-cekaj-dugo { font-size: .82rem; color: #94a3b8; }
html.dark-theme .mpo-cekaj-txt { color: #cbd5e1; }
html.dark-theme .mpo-cekaj-dugo { color: #94a3b8; }
.mpo-vrtnja {
    width: 38px; height: 38px; border-radius: 9999px;
    border: 3px solid #e2e8f0; border-top-color: #2563eb;
    animation: mpo-vrti .8s linear infinite;
}
@keyframes mpo-vrti { to { transform: rotate(360deg); } }
html.dark-theme .mpo-vrtnja { border-color: #3b3a37; border-top-color: #60a5fa; }
/* Na tinti nema vrtnje: svaki bi kadar bio jedno osvjezavanje ploce. */
body.eink-look .mpo-vrtnja { animation: none; border-top-color: #000; }


/* ═══════════════════════════════════════════════════════════════════════
   ICONS CITAC: GRADIVO BEZ OKVIRA (Ivo, 04.09.2026.: „u ovom icon modu, okvir
   mozda nije ni potriban ni svjetla ni tamna pozadina")
   ═══════════════════════════════════════════════════════════════════════
   Posluzitelj svaki odlomak umata u `chunk-card bg-white border
   border-slate-200` (v. `services/script.py`) — bijelu karticu s rubom. To
   ima smisla u KLASICNOJ skripti, gdje kartice stoje jedna ispod druge i rub
   kaze gdje jedna prestaje. U citacu je na zaslonu tocno JEDNO podpoglavlje,
   pa okvir ne odvaja nista od niceg: samo krade sirinu i, na tamnoj temi,
   uvodi drugu nijansu bez razloga.

   Vrijedi za obje teme. `!important` jer su Tailwindove klase u ovom buildu
   `!important` (v. gotcha u docs/CHANGELOG.md). */
#eink-citac.ec-skrol .ec-tok .chunk-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Lijeva crta poglavlja (`border-l-2`) je orijentir u popisu; u citacu popisa
   nema, pa ni ona. */
#eink-citac.ec-skrol .ec-tok .border-l-2 {
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Poruka nakon dodavanja predmeta (Ivo, 04.09.2026.). Kratka obavijest pri dnu
   zaslona: dovoljno da se procita, prekratko da se mora zatvarati. */
.setup-dodaj-poruka {
    position: fixed; left: 50%; bottom: calc(28px + var(--safe-bottom, 0px));
    transform: translateX(-50%); z-index: 99999;
    max-width: 88vw; text-align: center;
    padding: .7rem 1.2rem; border-radius: 9999px;
    background: #1e293b; color: #fff;
    font-size: .88rem; font-weight: 500;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
}

/* ---- TAMNA TEMA U CAROBNJAKU (Ivo, 04.09.2026.: „u tamnoj temi ovo nije
   dobro") ---------------------------------------------------------------
   Ekran je imao cetiri pravila tamne teme, i sva cetiri su gadala TAILWIND
   KLASE (`.bg-white`, `.bg-slate-50`…). Same podloge — i ekrana i popisa — su
   INLINE prijelazi upisani u `index.html`, pa ih nijedno od njih nije doticalo:
   kartice su potamnile, a stranica ispod njih ostala svijetla. Zato ovdje ide
   `!important`, jer inline stil inace pobjeduje.

   Uz to, tekst kartica: `.text-slate-700` je bio pokriven, ali kartice u koraku
   „Odaberi predmete" nose i `.text-slate-500`/`.text-slate-400`, pa su imena
   predmeta na tamnom ostajala jedva citljiva siva. */
html.dark-theme #setup-screen { background: #1f1e1d !important; }
html.dark-theme #setup-screen #setup-list,
html.dark-theme #setup-screen #setup-tip { background: #1f1e1d !important; }
html.dark-theme #setup-screen #setup-actions {
    background: #2a2927 !important; border-top-color: #3b3a37 !important;
}
html.dark-theme #setup-screen .text-slate-500,
html.dark-theme #setup-screen .text-slate-600,
html.dark-theme #setup-screen .text-slate-400 { color: #cbd5e1; }
html.dark-theme #setup-screen .border-transparent { border-color: transparent; }
html.dark-theme #setup-screen .hover\:bg-slate-50:hover { background-color: #3b3a37 !important; }
/* Kartica predmeta i smjera: ploha, ne bijelo. Obje nose `bg-white`, koji je
   pravilo gore vec presvuklo — ovdje se dodaje rub, bez kojeg se na tamnom
   dvije susjedne kartice stope u jednu plohu. */
html.dark-theme #setup-screen .rounded-xl,
html.dark-theme #setup-screen .rounded-lg { border-color: #3b3a37; }

/* ═══════════════════════════════════════════════════════════════════════
   POSTAVKE PREDMETA — zupcanik uz redak i ploca koju otvara
   (Ivo, 03.09.2026.: „Pod predmete bi doda ikonu da se za svaki predmet moze
   odabrat default tier i default mod ako ih postoji vise.")
   ═══════════════════════════════════════════════════════════════════════ */

/* Redak i zupcanik su SUSJEDI u zajednickom omotu, ne gumb u gumbu (v.
   `red()` u chat-toc.js). Omot preuzima razmak koji je prije nosio redak. */
.ctoc-red-omot { display: flex; align-items: center; gap: .1rem; }
.ctoc-red-omot > .ctoc-red { flex: 1 1 auto; min-width: 0; }
.pp-zupcanik {
    flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 9999px; background: none; cursor: pointer;
    /* Prigusen namjerno: postavke su rijedak posao, a redak uz koji stoje je
       cesta radnja. Da nose istu tezinu, oko bi ih pri svakom otvaranju
       popisa moralo razdvajati. */
    color: #94a3b8;
}
.pp-zupcanik:hover { background: #f1f5f9; color: #334155; }
.pp-zupcanik svg { width: 17px; height: 17px; display: block; }
/* Zupcanik u kartici predmeta na naslovnici predmeta (Ivo, 21.09.2026.):
   u gornjem desnom kutu, izvan mreze kartice, s dodirnom metom od 44 px. */
.dash-hero, .jl-hero { position: relative; }
.pp-zupcanik.pp-zupcanik-kartica {
    position: absolute; top: .35rem; right: .35rem; z-index: 2;
    width: var(--ing-dodir); height: var(--ing-dodir);
    color: var(--ing-siva);
}
.pp-zupcanik.pp-zupcanik-kartica svg { width: 20px; height: 20px; }

#pp-zastor {
    position: fixed; inset: 0; z-index: 340;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: flex-end; justify-content: center;
}
/* Odozdo na telefonu, po sredini na sirokom zaslonu — ista podjela koju
   aplikacija vec koristi za ostale plohe s izborom. */
@media (min-width: 700px) {
    #pp-zastor { align-items: center; }
}
.pp-ploca {
    width: min(26rem, 100vw); max-height: 86vh;
    display: flex; flex-direction: column;
    background: #fff; color: #0f172a;
    border: 1px solid #bfdbfe;
    border-radius: .75rem .75rem 0 0;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    padding-bottom: var(--safe-bottom, 0px);
}
@media (min-width: 700px) {
    .pp-ploca { border-radius: .75rem; }
}
.pp-traka {
    display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
    padding: .8rem .7rem .8rem 1rem; border-bottom: 1px solid #e2e8f0;
}
.pp-ime { flex: 1 1 auto; margin: 0; font-size: 1rem; font-weight: 700; }
.pp-x {
    width: 36px; height: 36px; flex: 0 0 auto; cursor: pointer;
    border: 0; background: none; color: #334155;
    font-size: 1.5rem; line-height: 1; border-radius: 9999px;
}
.pp-x:hover { background: #f1f5f9; }
.pp-tijelo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .3rem 1rem 1rem; }

.pp-naslov {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #64748b;
    margin: 1rem 0 .35rem;
}
.pp-opis { font-size: .78rem; line-height: 1.45; color: #64748b; margin-bottom: .5rem; }
.pp-red { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Varijante nose duga imena („ToC v1.3", „Feynman", „Honors") i ne slazu se u
   redak; jedna ispod druge se citaju bez lomljenja. */
.pp-red-stupac { flex-direction: column; }

.pp-izbor {
    padding: .45rem .8rem; cursor: pointer;
    border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff;
    color: #334155; font-size: .85rem; font-weight: 600; text-align: left;
}
@media (hover: hover) and (pointer: fine) { .pp-izbor:hover { background: #f8fafc; } }
.pp-izbor.je-na { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.pp-izbor:disabled { cursor: default; }

.pp-uskoro {
    padding: .55rem .7rem; margin-bottom: .35rem;
    border: 1px dashed #e2e8f0; border-radius: .5rem; background: #f8fafc;
}
.pp-uskoro-ime { font-size: .85rem; font-weight: 600; color: #64748b; }
.pp-uskoro-opis { font-size: .75rem; line-height: 1.4; color: #94a3b8; margin-top: .15rem; }
/* PROFESOROVO NAZIVLJE UZ PITANJE (profesor-pojmovi.js). Sitno i sivo, jer
   nije dio pitanja nego biljeska uz njega; naglasak nosi samo profesorov
   naziv, da se pogledom odmah nadje ono sto je novo. */
.prof-pojmovi { margin: -.5rem 0 1rem; font-size: .78rem; line-height: 1.5;
    color: #64748b; overflow-wrap: anywhere; }
.prof-pojmovi-natpis { color: #94a3b8; }
.prof-pojam b { color: #1e40af; font-weight: 700; }
.prof-strelica { color: #94a3b8; }
.prof-razmak { margin: 0 .45rem; color: #cbd5e1; }
html.dark-theme .prof-pojmovi { color: #94a3b8; }
html.dark-theme .prof-pojam b { color: #93c5fd; }

/* Parovi nazivlja: usko, jednolicno, da se dugacak pojam prelomi umjesto
   da razvuce plocu postavki. */
.pp-kartica-red { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }
.pp-kartica-parovi {
    margin-top: .4rem; padding: .4rem .55rem;
    border: 1px solid #e2e8f0; border-radius: .45rem; background: #f8fafc;
    font-size: .72rem; line-height: 1.5; color: #475569; overflow-wrap: anywhere;
}

html.dark-theme .pp-ploca { background: #2a2927; color: #e2e8f0; border-color: #3b3a37; }
html.dark-theme .pp-traka { border-bottom-color: #3b3a37; }
html.dark-theme .pp-x { color: #cbd5e1; }
html.dark-theme .pp-x:hover { background: #3b3a37; }
html.dark-theme .pp-izbor { background: #1f1e1d; border-color: #3b3a37; color: #cbd5e1; }
@media (hover: hover) and (pointer: fine) { html.dark-theme .pp-izbor:hover { background: #3b3a37; } }
html.dark-theme .pp-izbor.je-na { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }
html.dark-theme .pp-uskoro { background: #1f1e1d; border-color: #3b3a37; }
html.dark-theme .pp-kartica-parovi { background: #1f1e1d; border-color: #3b3a37; color: #cbd5e1; }
html.dark-theme .pp-zupcanik:hover { background: #3b3a37; color: #e2e8f0; }


/* GRADIVO U CITACU NIJE U OKVIRU (Ivo, 10.09.2026.: „ovo neka bude lipse
   napisano kao kod nas u skripti ne ovako uokvireno samo naslov i ispod
   sadrzaj").

   Posluzitelj svaki dio salje u kartici — `.chunk-card` s obrubom, radijusom i
   sjenom. U klasicnoj harmonici to ima smisla: ondje se kartice nizu jedna za
   drugom i obrub kaze gdje jedna prestaje. U citacu se cita JEDNO
   podpoglavlje, preko cijelog zaslona: obrub tada ne razdvaja nista, samo
   uokviruje tekst i suzava ga za dva puta 1,25rem. Zato ovdje otpada — ostaje
   naslov, pa tekst ispod njega.

   Karusel rijesenih primjera ZADRZAVA karticu: ondje se lista izmedu vise
   primjera i rub je jedino sto kaze da je ovo jedan od njih. */
#eink-citac .chunk-card {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    padding: 0; margin-bottom: 1.1rem;
}
#eink-citac .carousel-stage > .chunk-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
    padding: 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
html.dark-theme #eink-citac .carousel-stage > .chunk-card {
    background: #2a2927; border-color: #3b3a37;
}

/* NASLOVI U TOKU CITACA (Ivo, 02.09.). Obican tekst, samo podebljan — skrolaju
   se i nestaju kao i sve ostalo. Poglavlje je krupnije od podpoglavlja, ali
   oboje je bold, kako je trazeno. */
.ec-naslovi { margin: .2rem 0 .9rem; }
.ec-naslov-pog {
    font-size: 1.35rem; font-weight: 800; line-height: 1.25;
    margin-bottom: .45rem; color: #0f172a;
}
.ec-naslov-sub {
    font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #0f172a;
}
html.dark-theme .ec-naslov-pog, html.dark-theme .ec-naslov-sub { color: #e2e8f0; }
body.eink-look .ec-naslov-pog, body.eink-look .ec-naslov-sub { color: #000; }


/* PRIJAVA JE IZNAD SVEGA (Ivo, 10.09.2026.: „kad san uprija vec iman racun,
   nista se nije dogodilo"). Obrazac se otvarao, ali na sloju 120 — ispod
   uvodnog ekrana (9999), v2 sloja (100000) i kugle (100001), pa ga nitko nije
   vidio. Tailwindov `z-[120]` na elementu ostaje; ovo ga nadjacava, jer je
   modal po naravi ono sto stoji povrh. */
#auth-modal { z-index: 100002; }


/* STARA HR/EN PILULA SE SKRIVA DOK KUGLA STOJI (Ivo, 10.09.2026.). Prije je
   kugla to radila inline stilom pri montazi, jednom — pa bi svako ponovno
   crtanje sloja napravilo NOVU pilulu koja o tome nista ne zna, i na koraku
   „O tebi" se opet vidjelo HR/EN. Razred na <body> vrijedi i za pilule koje u
   trenutku montaze jos ne postoje. */
body.ima-jezik-kuglu .setup-jezici { display: none !important; }

/* HR/EN PILULA U V2 SE NE VRACA (Ivo, 10.09.2026.). Kugla stoji samo na prva
   dva ekrana; kad ode, stara bi se pilula inace pojavila — a prekidac za dva
   jezika ondje gdje ih ima 113 je upravo ono na sto je Ivo i prigovorio.
   Dalje se jezik mijenja u postavkama. `.setup-jezici` u starom onboardingu
   ostaje vezana uz kuglu, kao uzmak kad se `jezik-kugla.js` ne ucita. */
.v2-jezici { display: none !important; }

/* BEZ OZNACAVANJA TEKSTA NA GLAVNIM STRANICAMA (Ivo, 16.09.2026., uz dvije
   slike s Androida: dugi pritisak na naslovnici i na stranici predmeta
   oznacio je natpise i ponudio „Copy / Translate / Select all" — „ovo se
   nesmi moc oznacavat… zabrani na ovim glavnim stranicama i stranicama di su
   predmeti").

   To su stranice NAVIGACIJE: kartice, gumbi, natpisi. Na njima dugi pritisak
   nikad ne znaci „kopiraj", a sustavni izbornik preko pola ekrana izgleda kao
   kvar. `-webkit-touch-callout` gasi i iOS-ov oblacic na dugom pritisku.

   NAMJERNO NE DIRA: citac skripte (biljeske imaju vlastito oznacavanje na
   dugi pritisak), razgovor s Inzenjerkom, kviz i ispit — ondje je tekst sadrzaj
   i student ga smije kopirati. Zato popis POGLEDA, a ne `body`: pravilo na
   body-ju bi tiho ugasilo oznacavanje i ondje gdje je potrebno. */
#app-header, #sidebar-nav, #setup-screen,
#view-home, #view-dashboard, #view-subjects, #view-settings, #view-profile {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* Polja za unos unutar tih stranica ostaju normalna: bez ovoga se u
   „Pitaj Inzenjerka" ne bi mogao postaviti kursor ni oznaciti upisano. */
#app-header :is(input, textarea, [contenteditable="true"]),
#sidebar-nav :is(input, textarea, [contenteditable="true"]),
#setup-screen :is(input, textarea, [contenteditable="true"]),
#view-home :is(input, textarea, [contenteditable="true"]),
#view-dashboard :is(input, textarea, [contenteditable="true"]),
#view-subjects :is(input, textarea, [contenteditable="true"]),
#view-settings :is(input, textarea, [contenteditable="true"]),
#view-profile :is(input, textarea, [contenteditable="true"]) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* =============================================================
   TAMNA TEMA: PLOHE KOJE SU JE PROPUSTILE (Drago QA 16.09.2026.)
   =============================================================
   Sve troje nosi tvrdo upisanu svijetlu boju i nema nijedno pravilo pod
   `html.dark-theme`, pa su ostale svijetle dok se ekran oko njih zatamnio. */

/* Kartica zanimljivosti („Znas li ovo?") dok se kviz ucitava: gradi se u
   api.js iz Tailwind klasa (`bg-blue-50`), a `.ff-card` i `.ff-text` nemaju
   nijedno pravilo u ovoj datoteci. Podloga je ostajala svijetla, dok je
   globalno pravilo za `.text-slate-700` tekst posvijetlilo: kontrast 1,13:1,
   najgori izmjereni u prolazu. */
html.dark-theme .ff-card { background-color: #1e293b; border-color: #334155; }
html.dark-theme .ff-card .ff-text { color: #cbd5e1; }
html.dark-theme .ff-card .text-blue-500 { color: #93c5fd; }

/* Hamburger: Tailwindov `hover:bg-slate-100` nije omotan u `@media (hover:
   hover)`, pa na dodir ostane zalijepljen nakon tapa, a tamne protuvrijednosti
   za tu klasu nema. Na dodirnim uredajima hover se gasi, na misu dobiva tamnu
   plohu. ID u selektoru tuce Tailwindovu klasu, pa `!important` ne treba. */
html.dark-theme #nav-menu-btn:hover { background-color: #2a2927; }
@media (hover: none) {
    #nav-menu-btn:hover,
    html.dark-theme #nav-menu-btn:hover { background-color: transparent; }
}

/* „Natrag" u Postavkama je doslovni `text-blue-600` (#2563eb) u index.html, a
   za Tailwindove `.text-blue-*` u ovoj datoteci nema nijedne tamne inacice:
   brendska plava na prebojanoj plohi #2a2927 daje 2,81:1. */
html.dark-theme #view-settings .text-blue-600 { color: #93c5fd; }

/* DIJELJENJE USPJEHA U KOLEGE (Drago, 23.09.2026.: „te uspjehe i stvari
   trebaju biti nekako spojeno s kolegama da se dijeli"). Jedan oblik na sva
   cetiri slavlja, pa se nauci jednom: obris, ne ispuna. Primarna radnja
   ekrana ostaje ono sto je bila (Nastavi, Igraj Niz genija), dijeljenje je
   ponuda pokraj nje. Boju uzima od ekrana na kojem stoji. */
.uspjeh-podijeli, .levelup-share, .streak-modal-share, .lb-q-share, .lb-board-share {
    --uspjeh-boja: var(--ing-plava);
    display: block; width: 100%; margin-top: .6rem;
    min-height: var(--ing-dodir);
    padding: .6rem 1rem; border-radius: var(--ing-radius-pilula);
    background: transparent; color: var(--uspjeh-boja);
    border: 2px solid var(--uspjeh-boja); box-shadow: none;
    font-weight: 800; font-size: .9rem; cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
/* Slavlje nove razine stoji na plavom gradijentu: obris ide bijeli.
   Sirina se ravna po „Idemo!" (levelup-btn), inace obris preko cijele
   kartice nadjaca primarni gumb i par izgleda krivo poslozen. */
.levelup-share {
    --uspjeh-boja: #fff;
    width: auto; margin: .75rem auto .1rem; padding: 10px 30px;
}
/* Niz je narancast, gumb prati ekran. */
.streak-modal-share { --uspjeh-boja: #ea580c; }
/* Izazovi i zajednicki cilj su zeleni. */
.lb-q-share { --uspjeh-boja: var(--ing-uspjeh); }
@media (hover: hover) and (pointer: fine) {
    .uspjeh-podijeli:hover, .levelup-share:hover, .streak-modal-share:hover,
    .lb-q-share:hover, .lb-board-share:hover {
        background: color-mix(in srgb, var(--uspjeh-boja) 12%, transparent);
        transform: translateY(-1px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .uspjeh-podijeli, .levelup-share, .streak-modal-share, .lb-q-share, .lb-board-share {
        transition: none;
    }
}
html.dark-theme .lb-q-share { --uspjeh-boja: #4ade80; }
html.dark-theme .lb-board-share { --uspjeh-boja: var(--ing-plava-svijetla); }
html.dark-theme .streak-modal-share { --uspjeh-boja: #fb923c; }

/* Traka „Zadatak odrađen · Sljedeći" na dnu čitača (Drago QA 23.09.2026.:
   plan te dovede u potpoglavlje, pročitaš, i ništa te ne vodi dalje). Tiha
   traka, ne kartica preko ekrana: kraj petlje već ima svoju karticu. */
.plan-next-bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 90;
    display: flex; align-items: center; gap: 10px;
    width: min(560px, calc(100vw - 32px)); padding: 10px 12px;
    border: 1px solid var(--ing-rub); border-radius: var(--ing-radius);
    background: #fff; color: var(--ing-tinta);
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .45);
}
.plan-next-bar .pnb-ok { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
    background: #dcfce7; color: var(--ing-uspjeh); font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; }
.plan-next-bar .pnb-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; }
.plan-next-bar .pnb-sub { display: block; color: var(--ing-siva); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-next-bar .pnb-go { flex-shrink: 0; padding: 8px 12px; border-radius: 10px;
    border: 1px solid #bfdbfe; background: #eff6ff; color: var(--ing-plava);
    font-size: 13px; font-weight: 700; }
.plan-next-bar .pnb-x { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px;
    background: none; border: 0; color: var(--ing-siva-svijetla); font-size: 13px; }
.plan-next-bar .pnb-share { flex-shrink: 0; padding: 8px 12px; border-radius: 10px;
    border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d;
    font-size: 13px; font-weight: 700; }
html.dark-theme .plan-next-bar .pnb-share { background: #14321f; color: #bbf7d0; border-color: #166534; }
html.dark-theme .plan-next-bar { background: #2a2927; border-color: var(--ing-rub); }
html.dark-theme .plan-next-bar .pnb-go { background: #1e293b; color: #bfdbfe; border-color: #334155; }

/* „Kolege ovo vide i mogu te bodriti": tihi redak ispod sastavljaca, samo uz
   objavu uspjeha (Drago, 23.09.2026., po uzoru na Querenciju). */
.kolege-bodre { margin: 2px 2px 8px; font-size: 12px; line-height: 1.35;
    color: var(--ing-siva); }
html.dark-theme .kolege-bodre { color: var(--ing-siva-svijetla); }




/* ═══════════════════════════════════════════════════════════════════════
   KONTRAST, Drago QA 23.09.2026.
   ───────────────────────────────────────────────────────────────────────
   Izmjereno je svih 15 ekrana i 6 prozora (WCAG 2.1: 4,5:1 za obican
   tekst, 3:1 za velik). Nijedna boja nije NOVA: svaka je korak dublja
   inacica one koja je vec stajala, pa raspored i karakter ostaju isti.
   Blok stoji na kraju datoteke namjerno, da se jednim brisanjem vrati.

   Zasto je blok, a ne popravak na mjestu svakog pravila: vecina promasaja
   su ISTE dvije boje (slate-400 na bijelom, i tamni tekst iz svijetle teme
   koji je ostao na tamnoj kartici), razasute po 12.700 redaka. Popis na
   jednom mjestu se da procitati i izmjeriti; dvadeset razbacanih izmjena
   ne.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TAMNA TEMA: obitelji koje nikad nisu dobile tamnu inacicu ──────
   Najtezi nalaz cijelog prolaza. `.peek-*` kartice i `.dash-quick-card`
   nastale su POSLIJE tamne teme, pa su na tamnoj plohi zadrzale tekst iz
   svijetle: #1e293b na #2a2927 = 1,01:1, dakle tamno na tamnom, naslov se
   ne vidi uopce. Biljeska na ~8420 pokazuje da je pola ovoga vec jednom
   uhvaceno (Ivine „crne kucice s necitljivim natpisima"), ali je tada
   popravljena samo POZADINA kartice, ne i boja natpisa. */

html.dark-theme .peek-title,
html.dark-theme .peek-q,
html.dark-theme .peek-slika-opis { color: #e2e8f0; }
html.dark-theme .peek-sub,
html.dark-theme .peek-excerpt { color: #a8b3c4; }
html.dark-theme .peek-enter,
html.dark-theme .peek-go,
html.dark-theme .peek-slika-odakle { color: #93c5fd; }
html.dark-theme .peek-slika-odakle:disabled { color: #8792a3; }
html.dark-theme .ll-kicker { color: #93c5fd; }

/* Kartice brzog pristupa: naslov ide preko `--card-title`, pa se tamna
   inacica postavlja na tokenu, jednom po nacinu. Iste su nijanse koje
   nacini vec nose drugdje na tamnoj temi. */
html.dark-theme .dash-quick-card.theme-skripta     { --card-title: #6ee7b7; }
html.dark-theme .dash-quick-card.theme-kviz        { --card-title: #93c5fd; }
html.dark-theme .dash-quick-card.theme-zadaci      { --card-title: #fcd34d; }
html.dark-theme .dash-quick-card.theme-ispit       { --card-title: #f9a8d4; }
html.dark-theme .dash-quick-card.theme-audioknjiga { --card-title: #7dd3fc; }
html.dark-theme .dash-quick-card.theme-kolege      { --card-title: #fda4af; }
html.dark-theme .dash-quick-text .qd { color: #a8b3c4; }
html.dark-theme .dash-lb-score { color: #93c5fd; }
/* Oznaka dana je jos uvijek emoji (crna): na tamnoj plohi boja ne mijenja
   crtez, ali mijenja UZMAK ako se slika ne ucita. */
html.dark-theme .kd-ic { color: #e2e8f0; }

/* Tailwindove TAMNE boje teksta nemaju tamnu inacicu, pa na tamnoj plohi
   ostaju tamne: naslovi kolokvija u ispitu i veze na rijesene primjere u
   skripti. tailwind.css se ucitava POSLIJE ove datoteke, pa selektor mora
   biti specificniji od golog razreda; `html.dark-theme .x` to jest. */
html.dark-theme .text-blue-800   { color: #93c5fd; }
html.dark-theme .text-indigo-700 { color: #a5b4fc; }
html.dark-theme .text-amber-700  { color: #fcd34d; }
html.dark-theme .text-amber-700:hover,
html.dark-theme .hover\:text-amber-800:hover { color: #fde68a; }
/* IZNIMKA: isti razred stoji i na pilulama koje nose SVIJETLU plohu
   (`bg-amber-50`, „Blitz" u skripti) i u tamnoj temi. Tamo bi svjetliji
   natpis dao 1,39:1, pa se vraca tamni. Isto pravilo za plavu i indigo. */
html.dark-theme .text-amber-700.bg-amber-50,
html.dark-theme .text-amber-700.bg-amber-100,
html.dark-theme .bg-amber-50 .text-amber-700 { color: #b45309; }
html.dark-theme .text-blue-800.bg-blue-50,
html.dark-theme .bg-blue-50 .text-blue-800 { color: #1e40af; }
html.dark-theme .text-indigo-700.bg-indigo-50,
html.dark-theme .bg-indigo-50 .text-indigo-700 { color: #4338ca; }

/* Ugasen gumb („Zapocni ispit" dok gradivo nije izabrano) stoji na
   svijetlosivoj plohi koja u tamnoj temi nije potamnila. */
html.dark-theme .bg-slate-200.cursor-not-allowed { background-color: #2a2927; }

/* Pilula „Nastavi citati" nosi svijetloplavu plohu i u tamnoj temi: bez
   tamne inacice plohe moj svjetliji natpis na njoj daje 1,66:1. Ploha i
   natpis idu zajedno, uvijek. */
html.dark-theme .peek-actions .peek-enter,
html.dark-theme .peek-read .peek-actions .peek-enter {
    background: #1e293b; border-color: #334155; color: #93c5fd;
}
html.dark-theme .peek-actions .peek-enter:hover { background: #24344c; }
/* Ponudeni odgovor u kartici je BIJELA plocica s tamnim tekstom i nije
   imao tamnu inacicu: bijeli redak usred tamne kartice, a slovo ponude
   (#64748b) je na tamnoj plohi padalo na 3,05:1. Ploha i tekst se moraju
   mijenjati zajedno, inace se popravak jednoga vidi kao kvar drugoga. */
html.dark-theme .peek-opt { background: #1f1e1d; border-color: #3b3a37; color: #e2e8f0; }
html.dark-theme .peek-opt b { color: #a8b3c4; }
html.dark-theme .peek-opt.peek-ok  { background: #06281a; border-color: #15803d; color: #86efac; }
html.dark-theme .peek-opt.peek-bad { background: #331515; border-color: #b91c1c; color: #fca5a5; }
@media (hover: hover) and (pointer: fine) {
    html.dark-theme .peek-opt:hover:not(:disabled) { background: #2a2927; }
}

/* ── 2. SVIJETLA TEMA: slate-400 kao tekst ─────────────────────────────
   #94a3b8 na bijelom je 2,56:1, na #f1f5f9 2,34:1. Pojavljuje se kao
   Tailwindov razred na ~73 mjesta po ekranu (brojevi poglavlja u skripti,
   nazivi poglavlja u audioknjizi, strelice u Postavkama, mjesta u ligi).
   Slate-500 (#64748b) daje 4,76:1 i ostaje jednako tih.

   IZNIMKA: `.modal-x` i sve unutar `bg-slate-900/800` stoje na TAMNOJ
   plohi, tamo je slate-400 ispravan i zatamnjenje bi ga pokvarilo. */
html:not(.dark-theme) .text-slate-400 { color: #64748b; }
html:not(.dark-theme) .bg-slate-900 .text-slate-400,
html:not(.dark-theme) .bg-slate-800 .text-slate-400,
html:not(.dark-theme) .modal-x.text-slate-400 { color: #94a3b8; }

/* Isti ton, ali zapisan kao vlastiti razred, pa ga gornje pravilo ne hvata. */
html:not(.dark-theme) .hcc-add-link,
html:not(.dark-theme) .msub-det-prazno,
html:not(.dark-theme) .learn-slide-course,
html:not(.dark-theme) .pset-note,
html:not(.dark-theme) .lb-row-rank,
html:not(.dark-theme) .lb-ds-hint,
html:not(.dark-theme) .lv-min,
html:not(.dark-theme) .lv-need,
html:not(.dark-theme) .lb-mini small,
html:not(.dark-theme) .lb-mini-arrow { color: #64748b; }
/* Red TEKUCE razine je tamnoplav (#1e3a8a) i tamo je svijetli tekst
   ispravan: pravilo iznad ga ne smije zatamniti. */
html:not(.dark-theme) .lv-cur .lv-min,
html:not(.dark-theme) .lv-cur .lv-need { color: #bfdbfe; }


/* ── 3. SVIJETLA TEMA: jantarna i zelena na bijelom ────────────────────
   #f59e0b je 2,15:1, najslabiji nalaz svijetle teme, a stoji na 13 mjesta
   u skripti (ocjena tezine). Amber-700 daje 6,33:1 i ostaje jantarna. */
html:not(.dark-theme) .text-amber-500 { color: #b45309; }
/* Oznake tezine (`tier-label`, `tier-sep`) nose INLINE stil iz
   tier_circle.js, pa im popravak stoji tamo, ne ovdje. */
html:not(.dark-theme) .lb-q-day,
html:not(.dark-theme) .lb-q-done .lb-q-name,
html:not(.dark-theme) .lb-q-done .lb-q-meta { color: #15803d; }
/* Blue-400 na #eff6ff je 2,34:1: brojke tjednog sazetka u ligi. */
html:not(.dark-theme) .lb-wr-cell small { color: #2563eb; }

/* ── 4. SVIJETLA TEMA: bijelo na plavoj ────────────────────────────────
   Blue-500 pod bijelim tekstom daje 3,68:1 na svakom mjestu gdje se
   pojavljuje. Blue-600 daje 5,17:1 i ista je plava aplikacije. */
/* Vrijedi u OBJE teme: traka je ista plava i na tamnoj pozadini.
   `body.python-look .ln-cta` postoji gore i specificniji je od golog
   razreda, pa popravak mora nositi isti oblik. Isto i `.text-blue-100`:
   tailwind.css se ucitava POSLIJE ove datoteke, pa goli razred gubi. */
.ln-cta,
body.python-look .ln-cta { background-color: #2563eb; }
html .text-blue-100 { color: #ffffff; }
html:not(.dark-theme) .kd-sub { color: #4338ca; }
html:not(.dark-theme) .dash-cont-where,
html:not(.dark-theme) .lb-period-btn,
html:not(.dark-theme) .lb-pod-place { color: #475569; }
/* IZABRANO razdoblje stoji na plavoj plohi i nosi bijeli tekst. */
html:not(.dark-theme) .lb-period-btn.lb-period-on { color: #ffffff; }
/* Strelice `>` su 18 px, sto je tik ISPOD granice „velikog teksta"
   (18,66 px), pa im vrijedi 4,5:1, a ne 3:1. Slate-500 na #f1f5f9 daje
   4,34:1, pa strelica na sivoj plohi ide korak dalje. */
html:not(.dark-theme) .text-slate-400.text-lg,
html:not(.dark-theme) .pos-strelica,
html:not(.dark-theme) .pos-izgled-strelica { color: #475569; }

/* ── 5. PROZOR NIZA DANA ───────────────────────────────────────────────
   Narancasta je najvarljivija boja skupa: izgleda jako, a svijetla je.
   Brojka u plamenu (18 px, tezina 900) je 3,56:1, gumb dijeljenja 3,35:1. */
html:not(.dark-theme) .streak-flame-badge { color: #c2410c; }
html:not(.dark-theme) .streak-modal-share { color: #9a3412; border-color: #9a3412; }

/* ── 6. KOLEGE ─────────────────────────────────────────────────────────
   Koralna paleta ima svoje tonove, pa se i popravak radi unutar nje:
   nijedna boja nije posudena iz plave aplikacije. */
html:not(.dark-theme) .kes { color: #6b7280; }
html:not(.dark-theme) .krc-n,
html:not(.dark-theme) .kolege-iconbtn { color: #646d7e; }
html:not(.dark-theme) .kolege-poll-total { color: #64748b; }
/* Koralna #e0533a je 3,84:1 na bijelom i 3,40:1 na koralnoj plohi. #bf4126
   je ISTA koralna, korak dublja: 5,25 odnosno 4,65. */
html:not(.dark-theme) .kolege-news-more,
html:not(.dark-theme) .kolege-priv-toggle,
html:not(.dark-theme) .kolege-sort-tab.active,
html:not(.dark-theme) .kolege-pill,
html:not(.dark-theme) .kolege-poll-opt { color: #bf4126; }
/* Topla siva feeda: 4,04:1 na bijelom, 3,52:1 na bez plohi zanimljivosti. */
html:not(.dark-theme) .kh-sub,
html:not(.dark-theme) .kns,
html:not(.dark-theme) .krc-body,
html:not(.dark-theme) .kolege-meta,
html:not(.dark-theme) .kolege-author-sub,
html:not(.dark-theme) .kolege-fact-src { color: #6b6158; }
html:not(.dark-theme) .kolege-fact-head { color: #92400e; }

/* ── 7. KOD U GRADIVU ──────────────────────────────────────────────────
   Komentar u isjeccima koda je #5c6370 na #282c34 = 2,32:1. Boja dolazi
   iz gotove teme `atom-one-dark` (vendor), pa se ne dira tamo nego ovdje:
   vendor se zamjenjuje pri nadogradnji, ovaj redak ne. */
.hljs-comment, .hljs-quote { color: #8b98a9; }
/* Ista tema, ista pozadina: umetak u f-nizu (`{ime}`) je stajao na 4,38:1,
   tik ispod praga. */
.hljs-subst { color: #e8848d; }

/* Ikone u sitnim naslovima lige i izazova NE dobivaju mjeru ovdje:
   `_uiEmoji` upisuje sirinu i visinu u sam element, a inline stil nadglasa
   svako pravilo. Mjera se zato zadaje pozivu, u `app.js` (Drago,
   23.09.2026.: „malo se ne vide ikone"). */

/* ── 8. POSTAVKE I PROFIL ──────────────────────────────────────────────*/
html:not(.dark-theme) .pos-reset { color: #b91c1c; }

/* Prepis u dijelovima (Ivo, 24.09.2026.): maskota i "…" stoje ispod zadnjeg
   napisanog dijela dok posluzitelj ne javi kraj (api.js _prepisUzivo). */
.prepis-uzivo .prepis-pisem { margin: 0.75rem 0 0.5rem; }
.prepis-uzivo .prepis-pisem .think-stage { color: var(--ing-siva); }
/* IME EKRANA UZ IKONU (Drago, 24.09.2026.). `mobile.css` ovom naslovu tvrdo
   postavlja dva retka i `display: -webkit-box`, a ovdje je rijec o jednom
   natpisu uz gumb, pa ide u jedan redak s trotockom. Sirina je omedena, da
   dugo ime ne gurne avatar s desne strane. */
@media (max-width: 767px) {
    #app-header #current-subject { display: flex !important; align-items: center;
        min-width: 0; margin-left: 2px; }
    /* Natpis 16 px i ikone krupnije (Drago, 24.09.2026.: „mozda malo povecati
       ikone u ovom pravokutniku i naslov povecati, vrijedi za sve ekrane di
       je takva situacija"). Zaglavlje je visoko 52 px, pa gumb izbornika uz
       to dobiva punu dodirnu metu od 44 px, koja mu je dosad falila. */
    .hdr-view-ime { font-size: 16px; font-weight: 700; color: var(--ing-tinta);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
    html.dark-theme .hdr-view-ime { color: #e5e7eb; }
    #nav-menu-btn { min-height: 44px; }
    #nav-menu-btn img, #nav-menu-btn svg { width: 28px !important; height: 28px !important; }
    #nav-menu-btn .nav-menu-ikona { width: 26px; height: 26px; }
    /* Avatar: gumb 46 px, a krug u njemu 40 umjesto 32 (nosi ga Tailwindov
       `w-8 h-8`), pa je i znak unutra vidljivo veci. */
    #home-profile-btn { width: 46px !important; height: 46px !important; }
    #home-profile-btn > span { width: 40px !important; height: 40px !important; }
    #home-profile-btn > span > span { font-size: 22px !important; }
    #home-profile-btn img, #home-profile-btn svg { width: 100%; height: 100%; object-fit: cover; }
}

/* Ikona izbornika: znak ekrana na kojem si (kucica, predmet, razgovor...),
   a kad ga nema, mreza kvadratica. Velicina je ista u oba slucaja. MJERA
   VRIJEDI NA SVIM SIRINAMA (QA 24.09.2026.): svg bez nje naraste na zadanih
   300x150 px, pa zaglavlje pukne cim pravilo ne bi doseglo desktop. */
.nav-menu-ikona { width: 20px; height: 20px; display: block; fill: currentColor; }
#nav-menu-btn img, #nav-menu-btn svg { width: 22px; height: 22px; object-fit: contain;
    display: block; }
#nav-menu-btn { line-height: 1; }
/* DESKTOP ZADRZAVA TRI CRTICE (Drago, 24.09.2026.: „desktop zadrzi od prije"):
   mreza kvadratica je mobilna promjena od tog dana, a znak stoji u predlosku,
   pa se na sirini zamjenjuje ovdje. */
@media (min-width: 768px) {
    #nav-menu-btn .nav-menu-ikona { display: none; }
    #nav-menu-btn::before { content: '☰'; font-size: 1.125rem; line-height: 1; }
}

/* ── 9. IZGLED OD 24.09.2026. JE MOBILNI ───────────────────────────────
   Drago, 24.09.2026.: „radimo samo mobitel... desktop zadrzi od prije
   promjena danasnjih". Sve sto je tog dana promijenilo izgled Pocetne i
   naslovnice stoji u ovom upitu, pa na 768 px i sire vrijede pravila kakva
   su bila do tog dana (stara `.dash-quick-card`, stari naslovi sekcija,
   stari gumb izbornika). Markup je grananje u `app.js`, `_mobIzgled()`;
   prijelom je isti kao u `mobile.css`. */
@media (max-width: 767px) {

/* PROBA POCETNE (Drago, 24.09.2026.): ikone bez okvira, po uzoru na „icons"
   izgled. Tri u retku, sama ikona i naziv; Niz genija i arhiva su dio mreze. */
/* Naslov „Brzi izbornik" stoji jednako blizu svojoj mrezi kao „Moji predmeti"
   svojim karticama, a sam ima zraka iznad sebe (Drago, 24.09.2026.). */
.hk-glava { margin: 8px 0 4px; }
/* Sve dize par piksela gore (Drago, 24.09.2026.: „brzi izbornik je dole i to
   me nervira"): naslovi sekcija na Pocetnoj nose manji uzmak. Uzmak same
   pozdravne plohe se NE dira: 30px je prostor za glavu maskote koja viri
   iznad kartice (v. mobile.css, Drago 04.09.). */
#view-home .dash-section-title { margin-top: 0 !important; margin-bottom: 2px !important; }
/* Cetiri razmaka koja je Drago obiljezio 24.09.2026.: pozdrav -> „Moji
   predmeti", kartice predmeta -> „Brzi izbornik", naslov -> ikone brzog
   izbornika, i zadnji red ikona -> traka „Pitaj Inzenjerka". Sve je isti
   posao: sekcije i naslovi stoje blize svom sadrzaju. */
#view-home .dash-rich-wrap { gap: 4px !important; }
#view-home .dash-widgets { gap: 4px !important; }
#view-home .home-courses-grid { padding-bottom: 0 !important; }
/* Traka „Pitaj Inzenjerka" je opet na dnu ekrana, kao na slici koju je Drago
   uzeo za polaziste (24.09.2026.): omotac se rasteze, traka stoji ispod njega. */
/* 2,4 px, kao na naslovnici predmeta (Drago, 25.09.2026.): uz jednak uzmak
   unutar trake to znaci da su obje trake iste visine i na istom mjestu. */
#view-home #home-chatbar { padding-top: 2.4px !important; }
/* Naslovi sekcija na Pocetnoj su oznake, ne natpisi (Drago, 24.09.2026.:
   „prenapadan tekst, velik font... samo da pise"): manje i tanje, pa oko pada
   na plocice ispod. BOJA OSTAJE tamna kao prije („moze bit ista boja kao i
   do sada, ostavi ovaj font"). `!important` jer mobile.css tvrdo postavlja
   velicinu. Ostali ekrani zadrzavaju svoj naslov. */
/* 11 px, ne 11,5 (Drago, 25.09.2026.): oznaka sekcije uzima velicinu koju
   podnaslov vec ima, pa ljestvica nema cetvrtu brojku. Debljina ostaje 600 i
   time je i dalje odvojena od podnaslova, koji je 500. */
#view-home .dash-section-title { font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .01em; }
#view-home .dash-section-title .dash-section-bolt { width: 17px !important; height: 17px !important;
    font-size: .62rem !important; }
/* KUCICE S PODNASLOVOM, dva stupca: Dragino polaziste od 24.09.2026.
   („vrati ove kucice ovako identicno... samo ces dodati jos dvije"): iste
   mjere kao u toj verziji, samo ih je sad sest. */
/* Donji uzmak od 8 px: zadnji red inace zavrsava TOCNO na rubu skrolera, pa
   mu se sjena odsijece i kartica izgleda kao prerezana (Drago, 24.09.2026.:
   „ovdje dole je neki rez"). Uzmak je unutar visine (border-box), pa red ne
   naraste. */
/* ISTE KARTICE KAO U PREDMETU (Drago, 24.09.2026.: „isti stil treba"). Mreza
   se vise NE RASTEZE po visini: dok je imala `grid-auto-rows: 1fr` i punu
   visinu, kartice na Pocetnoj su bile 86 px, a u predmetu 76, pa isti stil
   nije izgledao isto. Sada obje slijede istu najmanju visinu iz zajednickog
   pravila. */
.home-kucice { display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; margin: 0; padding-bottom: 5px; box-sizing: border-box; }
/* `min-height: 0` je nuzan: bez njega flex-dijete odbija biti nize od svog
   sadrzaja, pa mreza kucica trazi punu visinu redaka i stupac se prelije za
   tridesetak piksela: a onda osigurac iz app.js zumira cijelu Pocetnu.
   S ovim redom redovi se skupe koliko treba i zum ostaje 1 (24.09.2026.). */
#view-home .dash-widgets { flex: 0 0 auto; min-height: 0; }
/* IKONA, NASLOV DO NJE, PODNASLOV ISPOD (Drago, 24.09.2026.: „neka ide ikona,
   do ikone naslov, i ispod je podnaslov, kako je bilo"). Kartica je time niza
   od slozene, pa visak visine ide u same kartice (mreza se rasteze), a ne u
   prazninu iznad trake „Pitaj Inzenjerka". */
/* KARTICA BRZOG IZBORNIKA: jedna definicija za Pocetnu I naslovnicu predmeta
   (Drago, 24.09.2026.: „pocetna i pocetna predmeta trebaju slijediti istu
   logiku dizajna... da budu pilule koje tiraju covika da klikne").
   Raspored i visine ostaju kakvi su bili; mijenja se samo odjeca: mekši
   obrub, tanka sjena koja karticu odvaja od podloge, ikona u obojenom polju,
   strelica desno. Boja polja dolazi iz `--ton`, po kartici. */
.hk-kucica,
#view-dashboard .dash-quick-card { position: relative; display: grid; grid-template-columns: 1fr;
    /* Strelica je IZVAN mreze (QA 24.09.2026.): dok je bila stupac, njezin
       krug od 24 px uzeo je 11 px sirine teksta i podnaslov se poceo rezati
       („Gradivo korak po..."). Sad lebdi uz desni rub, a desni razmak
       kartice drzi tekst dalje od nje. */
    /* Tekst je stajao uz samu ikonu (Drago, 24.09.2026.: „moze tekst biti
       odmaknut od ikona malo da ima razmaka... samo ih malo pomakni
       udesno"). Polje ikone (40 px, na 8 px od ruba) zavrsava na 48, tekst
       pocinje na 54: sest piksela zraka umjesto nula. */
    /* Desni razmak je 22, a ne 26: sest piksela koje je tekst dao ikoni
       vraceni su mu s druge strane, pa podnaslov i dalje stane u dva retka
       („Gradivo korak po korak" se inace rezao). Strelica lezi na 2 px od
       ruba, sa svojih 24 px, pa je od teksta dijeli 4 px praznine i jos
       pola svog kruga. */
    align-content: center; column-gap: 8px; row-gap: 2px; padding: 10px 22px 10px 54px;
    /* BOJA ZNACAJKE NA CIJELOJ KARTICI (Drago, 24.09.2026.: „oboji cijelu
       karticu vrlo blagom nijansom boje te znacajke... kartica i dalje mora
       izgledati kao gumb, ali ne smije djelovati sareno"). Bez tona kartica
       ostaje bijela, pa svaka povrsina koja jos nema svoj ton izgleda kao i
       do sada. */
    --ton-ploha: #fff; --ton-rub: #dbe3f5;
    /* OBRNUTO (Drago, 24.09.2026.: „sto je sad bijelo neka bude u boji
       kartice, a sto je sad u boji kartice neka bude bijelo"): ploha
       znacajke se preselila pod ikonu, kartica je bijela, a rub ostaje u
       nijansi znacajke da kartica i dalje ima svoj ton. */
    /* CRTA PREKO CIJELE VISINE (Drago, 24.09.2026.: „neka imaju ovako tu
       crticu kao i Mapa znanja"): lijevi rub od 4 px u punoj boji znacajke,
       isti recept koji Mapa znanja vec koristi. Lijevi razmak je zato 49 px,
       da ikona i tekst ostanu tocno gdje su bili. */
    /* BEZ ZADEBLJANE LIJEVE CRTE (Drago, 25.09.2026.: „zadebljanje kartica
       makni sa svih ekrana"). Crta je stigla 24.09. kao znak boje, ali boja
       ekrana ionako stoji u ikoni i u tonu obruba, pa je debeli rub bio ista
       poruka po treci put. Rub je sada jednak sa sve cetiri strane. */
    /* BOJA JE U KARTICI, TIHO (Drago, 25.09.2026., uz sliku predloska: „samo
       da je boja unutar kartice, ali blago, znaci da nije napadno"). Ploha
       kartice uzima blijedi ton znacajke, a polje ikone ide na bijelo, da
       ikona ostane na cistoj podlozi. To je obrat onoga sto je vrijedilo od
       24.09., kad je kartica bila bijela a polje ikone obojeno. */
    border: 1px solid var(--ton-rub);
    border-radius: 19px; background: var(--ton-ploha);
    color: var(--ing-tinta); text-align: left; min-height: 76px;
    /* SJENA BEZ TVRDOG RUBA (Drago, 24.09.2026.: „donji rub je dosta izrazen
       pa kartice djeluju kao da lebde"). Tvrdi 3 px ispod kartice je otisao;
       ostaje blaga sjena koja karticu odvaja od podloge, a zaobljenje i
       strelica i dalje kazu da se klikne. */
    /* MALO VISE ZRAKA ISPOD (Drago, 25.09.2026.: „moze l jos davati nekako
       sjenu dole i da malkice disu"). Sjena je mekana i spustena, bez tvrdog
       ruba kakav je smetao 24.09.: kartica se odvaja od podloge i djeluje
       podignuto, a nijedan piksel rasporeda se ne mijenja. */
    box-shadow: 0 1px 2px rgba(42, 72, 140, .06), 0 8px 16px -8px rgba(42, 72, 140, .20);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease,
                background-color .14s ease, scale .18s cubic-bezier(.34, 1.56, .64, 1); }
/* Jedan par po znacajki: ploha i rub. Boje su tokeni s vrha datoteke.
   Selektor nosi i karticu: zadana bijela ploha stoji na `#view-dashboard
   .dash-quick-card`, sto je jace od gole klase tona, pa bi naslovnica ostala
   bijela dok bi Pocetna bila obojena (izmjereno 24.09.2026.). */
.hk-kucica.hk-ton-plava,
#view-dashboard .dash-quick-card.hk-ton-plava      { --ton-ploha: var(--ton-plava-ploha); --ton-rub: var(--ton-plava-rub); --ton-crta: var(--ton-plava-crta); }
.hk-kucica.hk-ton-zelena,
#view-dashboard .dash-quick-card.hk-ton-zelena     { --ton-ploha: var(--ton-zelena-ploha); --ton-rub: var(--ton-zelena-rub); --ton-crta: var(--ton-zelena-crta); }
.hk-kucica.hk-ton-nebeska,
#view-dashboard .dash-quick-card.hk-ton-nebeska    { --ton-ploha: var(--ton-nebeska-ploha); --ton-rub: var(--ton-nebeska-rub); --ton-crta: var(--ton-nebeska-crta); }
.hk-kucica.hk-ton-roza,
#view-dashboard .dash-quick-card.hk-ton-roza       { --ton-ploha: var(--ton-roza-ploha); --ton-rub: var(--ton-roza-rub); --ton-crta: var(--ton-roza-crta); }
.hk-kucica.hk-ton-koraljna,
#view-dashboard .dash-quick-card.hk-ton-koraljna   { --ton-ploha: var(--ton-koraljna-ploha); --ton-rub: var(--ton-koraljna-rub); --ton-crta: var(--ton-koraljna-crta); }
.hk-kucica.hk-ton-ljubicasta,
#view-dashboard .dash-quick-card.hk-ton-ljubicasta { --ton-ploha: var(--ton-ljubicasta-ploha); --ton-rub: var(--ton-ljubicasta-rub); --ton-crta: var(--ton-ljubicasta-crta); }
.hk-kucica.hk-ton-zuta,
#view-dashboard .dash-quick-card.hk-ton-zuta       { --ton-ploha: var(--ton-zuta-ploha); --ton-rub: var(--ton-zuta-rub); --ton-crta: var(--ton-zuta-crta); }
.hk-kucica.hk-ton-prijelaz,
#view-dashboard .dash-quick-card.hk-ton-prijelaz   { --ton-ploha: var(--ton-prijelaz-ploha); --ton-rub: var(--ton-prijelaz-rub); --ton-crta: var(--ton-prijelaz-crta); }
/* PROVJERA NOSI PRIJELAZ KVIZ -> ISPIT (Drago, 24.09.2026.), jer je i sama
   pola kviz pola ispit: crta joj ide iz plave u ruzicastu, kao traka koraka
   u samom ekranu.
   KROZ POZADINU, NE KROZ DODANI ELEMENT (Drago, 24.09.2026.: „sto se ovdje
   dogodilo, isto treba zaobljeno"): prvi pokusaj je bio uski `::before` uz
   rub, a on je ostao cetvrtast pokraj zaobljene kartice. Ovako gradijent
   lezi u rubnom okviru i sam prati zaobljenje: ploha kartice pokriva sve do
   ruba, a gradijent se vidi samo ondje gdje je rub proziran, dakle na lijevih
   4 px. */
/* PROVJERA VISE NEMA GRADIJENT U RUBU (Drago, 25.09.2026.: „Provjera je
   bijela i to nije bas dobro"). Gradijent iz plave u ruzicastu lezao je u
   RUBNOM okviru, a plohu je punio `--ton-polje`, dakle cista bijela. Dok je
   lijevi rub bio 4 px, gradijent se vidio i imao smisla; otkad je rub 1 px,
   ostala je samo bijela kartica medu obojenima. Provjera zato ide kao i sve
   ostale: blijedi ton u plohi, isti ton u rubu. */

.hk-kucica:hover,
#view-dashboard .dash-quick-card:hover { transform: translateY(-1px); border-color: #8fa8ec;
    background: var(--ton-ploha);
    box-shadow: 0 2px 4px rgba(42, 72, 140, .06), 0 6px 14px -6px rgba(42, 72, 140, .14); }
.hk-kucica:active,
#view-dashboard .dash-quick-card:active { transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(42, 72, 140, .10); }
.hk-kucica:focus-visible,
#view-dashboard .dash-quick-card:focus-visible { outline: 3px solid #7394ef; outline-offset: 2px; }
/* Prva kartica („Uci sad" na Pocetnoj, „Skripta" u predmetu) je istaknuta: to
   je radnja kojom se pocinje. */
/* Prva kartica zadrzava SVOJ ton (Drago, 24.09.2026.), a istice se jacim
   rubom: otkad svaka kartica ima plohu, zajednicka plavicasta ploha bi
   pobrkala ton znacajke. */
/* Isticanje NE SMIJE pojesti boju znacajke (Drago, 25.09.2026.: „obrub
   skripte je plav, a skripta je zelena"). Ovdje je stajala tvrda plava
   `#8fa8ec`, pa je prva kartica na oba ekrana gubila svoj ton: Skripta je
   bila zelena s plavim rubom, Uci sad nebeska s plavim rubom. Isticanje sada
   ide samo DEBLJINOM, a boja ostaje tonova. */
.hk-kucica.hk-istaknuta,
#view-dashboard .dash-quick-card.hk-istaknuta { border-color: var(--ton-rub); border-width: 1.5px; }
/* Ikona stoji u malom zaobljenom polju; sama ikona ostaje ona iz seta. */
/* Ikona bez podloge (Drago, 24.09.2026.: „makni pozadine s ikona"): polje
   ostaje samo kao mjera, boja je otisla. Stoji u retku naslova pa se spusti
   za 12 px, cime joj sredina padne na ~46 % visine kartice, tocno kako je
   bilo prije nove odjece („zasto ikone vise nisu kao prije, ono na 46 %"). */
/* IZVAN TOKA: dok je ikona bila u mrezi, redak naslova je bio visok koliko
   ona, pa blok teksta nije mogao stajati po sredini kartice. Sada je ikona na
   46 % visine, a naslov i podnaslov su tocno u sredini (Drago, 24.09.2026.). */
.hk-kucica .hk-ic,
#view-dashboard .dash-quick-icon { position: absolute; left: 8px; top: 46%;
    transform: translateY(-50%);
    /* VECA IKONA (Drago, 24.09.2026.: „ikone su mi iskreno premale"): glif s
       22 na 28 px, kutija s 34 na 40. Lijevi zljeb (`padding-left: 52px`)
       ostaje isti, pa tekst nije izgubio ni piksel: kutija zavrsava na 50. */
    /* BIJELO POLJE ISPOD IKONE (Drago, 24.09.2026.: „ikonu smjesti u malo
       bijelo zaobljeno polje... sasvim tanka kontura"): ton boji karticu,
       ikona ostaje na cistoj podlozi i time citljiva. */
    width: 40px; height: 40px; display: grid; place-items: center;
    background: var(--ton-polje); border: 1px solid var(--ton-rub);
    border-radius: 12px; padding: 3px; }
/* GLIF PUNI POLJE (Drago, 24.09.2026., uz sliku sata u „Provjeri": „zasto
   nisu ikone ove velicine, ovo je cak veliko"). Crtez sata je od pocetka
   imao `width: 100%`, a slike 22 pa 32 px, pa je jedna kucica izgledala
   krupnije od svih ostalih. Sad sve idu preko cijelog polja od 40 px. */
.hk-ic .hk-img, .hk-ic img, .hk-ic .hk-svg,
#view-dashboard .dash-quick-icon img { width: 100%; height: 100%; object-fit: contain; }
/* DVIJE RAZINE, ISTI GLAS (Drago, 25.09.2026., izabrao varijantu 2): velika
   kartica nosi naslov od 14 px, mala kucica 13, ali DEBLJINA I PROred su isti
   svugdje — 700 i 1,3. Debljina je bila 800 ovdje i 700 na Mapi i Ligi, pa su
   naslovi iste vrste zvucali razlicito. Sedamsto je i debljina naslova u
   skripti. Velicinu kartice alata na 14 px postavlja pravilo nize. */
.hk-kucica .hk-naslov,
#view-dashboard .dash-quick-text .qt { grid-column: 1; grid-row: 1; align-self: end;
    font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ing-tinta);
    /* Naslov u predmetu nosi naslijedeni `margin-bottom: .18rem`, pa je razmak
       do podnaslova bio 6 px umjesto 3 kao na Pocetnoj (Drago, 24.09.2026.). */
    margin-bottom: 0 !important; }
.hk-kucica .hk-pod,
#view-dashboard .dash-quick-text .qd { grid-column: 1; grid-row: 2; align-self: start;
    margin-top: 1px; font-size: 11px; line-height: 1.3; color: #52617c;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    /* DVA RETKA UVIJEK, i kad tekst stane u jedan: inace kartica s kracim
       opisom digne naslov i red vise nije poravnat (Drago, 24.09.2026.). */
    min-height: 29px; }
/* Strelica desno: znak da kartica otvara sadrzaj. */
.hk-kucica::after,
#view-dashboard .dash-quick-card::after { content: '\203A'; position: absolute; right: 0;
    /* STRELICA U BOJI KARTICE I MALO VECA (Drago, 24.09.2026.: „ove
       strelice male da budu malo vece i da su iste boje kao i kartica").
       Boja dolazi iz istog tokena kao crta uz rub, pa kartica ima jednu
       boju od ruba do strelice. */
    top: 50%; translate: 0 -50%; color: var(--ton-crta, #5475cf);
    font-size: 24px; line-height: 1;
    /* STRELICA IMA SVOJE STANJE (Drago, 24.09.2026.: „kad prodem oko x da je i
       on aktivan... kad se klikne da se vidi aktivnost"), kao znak zatvaranja
       na kartici preglednika: dobije svoj krug i pomakne se u smjeru u kojem
       vodi. */
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
    background: transparent;
    transition: background-color .14s ease, color .14s ease, transform .14s ease; }
.hk-kucica:hover::after, .hk-kucica:active::after,
#view-dashboard .dash-quick-card:hover::after,
#view-dashboard .dash-quick-card:active::after { background: var(--ton-ploha, #e8eeff);
    color: var(--ton-crta, #2563eb); transform: translateX(2px); }
html.dark-theme .hk-kucica:hover::after, html.dark-theme .hk-kucica:active::after,
html.dark-theme #view-dashboard .dash-quick-card:hover::after,
html.dark-theme #view-dashboard .dash-quick-card:active::after { background: #333a4d;
    color: #93c5fd; }
/* ODZIV NA DODIR (Drago, 24.09.2026.: „da nekako poskoci"). `scale` je zasebno
   svojstvo, ne `transform`: povlacenje kucice upisuje `transform` u sam
   element, pa bi se dva zapisa gazila. Natrag se vraca s malim prebacajem,
   pa dodir odskoci kao opruga. */
.hk-kucica, #view-dashboard .dash-quick-card { scale: 1; }
.hk-kucica:active, #view-dashboard .dash-quick-card:active { scale: .975; }
/* Tamna tema uzima iste tokene, samo su im vrijednosti tamne (v. vrh
   datoteke). Neutralna ploha vrijedi SAMO za karticu bez tona: bez `:not`
   ovo pravilo (klasa teme + id) je jace od tona, pa su u tamnoj temi sve
   kartice ispadale iste sive (izmjereno 24.09.2026.). */
html.dark-theme .hk-kucica:not([class*="hk-ton-"]),
html.dark-theme #view-dashboard .dash-quick-card:not([class*="hk-ton-"]) {
    --ton-ploha: #34332f; --ton-rub: #3b3a37; }
html.dark-theme .hk-kucica,
html.dark-theme #view-dashboard .dash-quick-card { box-shadow: none; }
/* `python-look` tamnoj temi tvrdo daje #171a21 na svakoj kartici; ton ga na
   kucicama i karticama alata zamjenjuje, ostalo ostaje kako je bilo. */
.dark-theme body.python-look .hk-kucica,
body.python-look.dark-theme .hk-kucica,
.dark-theme body.python-look #view-dashboard .dash-quick-card,
body.python-look.dark-theme #view-dashboard .dash-quick-card { background-color: var(--ton-polje); }
html.dark-theme .hk-kucica.hk-istaknuta,
html.dark-theme #view-dashboard .dash-quick-card.hk-istaknuta { border-color: #4f5b7a; }
/* PODNASLOV NA TAMNOJ TEMI (QA 24.09.2026.): zajednicko pravilo gore nosi
   `color: #52617c`, sto je na tamnoj plohi 2,4:1, pa se opis kartice nije
   citao ni na Pocetnoj ni na naslovnici. Staro tamno pravilo za `.qd`
   (gore uz `--card-title`) gubilo je jer zajednicki selektor ima ID; ovaj
   ga vraca s istom bojom, a `.hk-pod` je tamno pravilo dobio prvi put. */
html.dark-theme .hk-kucica .hk-pod,
html.dark-theme #view-dashboard .dash-quick-text .qd { color: #a8b3c4; }
@media (max-width: 350px) {
    .hk-kucica,
    #view-dashboard .dash-quick-card { column-gap: 6px; padding: 8px; }
    .hk-kucica .hk-pod,
    #view-dashboard .dash-quick-text .qd { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .hk-kucica,
    #view-dashboard .dash-quick-card { transition: none; }
}

/* Kucica koju korisnik vuce (Drago, 24.09.2026.). `pointer-events: none` je
   nuzan: bez njega `elementFromPoint` nalazi SAMU vucenu kucicu, nikad onu
   ispod prsta, pa se raspored ne mijenja (isti nalaz kao u „icons"). */
.hk-kucica.hk-vuce { opacity: .9; z-index: 5; pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
    /* Skok u trenutku kad dugi dodir dozri (Drago, 24.09.2026.: „kad se
       kartica drzi duze da poskoci... da je se moze micati"). `translate` je
       opet zasebno svojstvo, da ne pregazi `transform` koji kucicu drzi pod
       prstom. */
    animation: hk-skok .22s ease-out; }
@keyframes hk-skok {
    0%   { translate: 0 0; }
    45%  { translate: 0 -7px; }
    100% { translate: 0 0; }
}
/* Ostale kucice se blago njisu dok premjestanje traje: isti znak kao ikone na
   pocetnom zaslonu telefona. `rotate` je zasebno svojstvo, pa ne dira
   `transform` kojim se kartice preslazu. */
.home-kucice.hk-mreza-vuce .hk-kucica:not(.hk-vuce) {
    animation: hk-njihaj .5s ease-in-out infinite alternate; }
@keyframes hk-njihaj {
    from { rotate: -.55deg; }
    to   { rotate: .55deg; }
}
@media (prefers-reduced-motion: reduce) {
    .hk-kucica.hk-vuce,
    .home-kucice.hk-mreza-vuce .hk-kucica:not(.hk-vuce) { animation: none; }
    .hk-kucica:active, #view-dashboard .dash-quick-card:active { scale: 1; }
}
/* TRAKA „Pitaj Inzenjerka" JE SPREMNA I DOK JE PRAZNA (Drago, 24.09.2026.:
   „siva strelica izgleda kao onemoguceni gumb"). I jest spremna: dodir na
   strelicu bez upisanog teksta otvara razgovor (v. `submit` u app.js), pa
   gumb od danas i izgleda tako. Boja se ne mijenja upisom, jer se ni radnja
   ne pojavljuje tek tada. */
/* CIPOVI U POZDRAVU: JEDNA MJERA ZA SVA CETIRI (Drago, 24.09.2026.: „jesu li
   mi ove ikone male... pare mi se malo mutne, ali ne bi da preuzme app").
   Bile su 15, 17 i 19 px, jer `_uiEmoji` mjeri u `em` a cipovi imaju razlicit
   font; nejednake su i izgledale mutnije nego sto jesu. Sad su sve 22 px.
   Iznimno se mjera zadaje ovdje, a ne na pozivu kako datoteka inace trazi:
   poziv je zajednicki s desktopom, a ovo mijenja samo mobitel. */
#view-home .hg-chip .hg-emoji img,
#view-home .hg-chip .hg-icon img { width: 22px !important; height: 22px !important; }

/* RED ALATA U IZBORNIKU (Drago, 24.09.2026.): cetiri ikone ispod palube
   predmeta, oznacena je ona u kojoj student trenutno jest. Boje su tonovi
   znacajki, isti kao na karticama naslovnice, pa je oznaka ista ona koju je
   student vec vidio kad je u alat i usao. */
.nav-alat-red { display: flex; justify-content: center; gap: 10px;
    padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--ing-rub); }
.nav-alat { display: grid; place-items: center; width: 40px; height: 40px;
    padding: 4px; border: 1px solid transparent; border-radius: 12px;
    background: none; cursor: pointer; }
.nav-alat:hover { background: var(--ing-podloga); }
.nav-alat-ic { width: 100%; height: 100%; display: grid; place-items: center; }
.nav-alat-ic img { width: 100%; height: 100%; object-fit: contain; }
/* Oznaka „ovdje si": ploha i rub u tonu tog alata. Imena nema, pa oznaku nosi
   samo boja, i zato mora biti jasna. */
.nav-alat--tu { background: var(--ton-plava-ploha); border-color: var(--ton-plava-rub); }
.nav-alat-red .nav-alat:nth-child(1).nav-alat--tu { background: var(--ton-zelena-ploha);
    border-color: var(--ton-zelena-rub); }
.nav-alat-red .nav-alat:nth-child(3).nav-alat--tu { background: var(--ton-nebeska-ploha);
    border-color: var(--ton-nebeska-rub); }
.nav-alat-red .nav-alat:nth-child(4).nav-alat--tu { background: var(--ton-roza-ploha);
    border-color: var(--ton-roza-rub); }
html.dark-theme .nav-alat-ime { color: var(--ing-siva); }

/* PALUBA PREDMETA U IZBORNIKU (vraceno 24.09.2026., izvorno Ivo 10.08.2026.):
   jedan redak po predmetu, vodoravni klizac s pristajanjem. Sve sto cini da
   se dobro ponasa stoji ovdje, ne u JS-u: preglednik vuce, baca i pristaje na
   kompozitoru, pa se izbornik u isto vrijeme moze vrtjeti okomito.
   `pan-y` je nosiva linija: okomito panjenje ide izborniku, vodoravno palubi,
   pa se dvije osi ne tuku. `snap-stop: always` znaci da zamah pomakne JEDAN
   predmet, ne cetiri. Susjedi koji vire s rubova SU naznaka da ih ima jos,
   pa strelice ne trebaju. */
.nav-sub-deck {
    display: flex; gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* OBJE OSI (Drago, 24.09.2026.: „zasto ne mogu swipat predmete").
       `pan-y` je govorio pregledniku da na ovoj plohi radi SAMO okomito
       panjenje, pa vodoravni prevlak nije imao tko obraditi: paluba se nije
       micala. S obje osi preglednik sam bira prevladavajucu, pa vodoravno
       lista predmete, a okomito i dalje vrti izbornik. */
    touch-action: pan-x pan-y;
    /* BEZ LIJEVOG UVLAKA (Drago, 24.09.2026.: „zasto je Fizika u sredini?").
       Paluba je imala 14 px razmaka sa svake strane, pa je redak predmeta
       stajao uvucen u odnosu na Pocetnu i ostale stavke i izgledao centriran.
       Sad predmet pocinje ondje gdje i sve ostalo, a susjed viri s desne
       strane. */
    /* Crta i razmak ispod vise nisu paluba nego `.nav-prva` (Drago,
       25.09.2026.): paluba ih je nosila sa sobom, pa je na ekranu Uci sad,
       gdje stoji treca, crta zavrsila ispod predmeta umjesto ispod stavke na
       kojoj jesi. */
    padding: 0;
    scrollbar-width: none; -ms-overflow-style: none;
}
/* CRTA ISPOD PRVE STAVKE IZBORNIKA (Drago, 25.09.2026.). Prvi redak je uvijek
   ono gdje si sada: ekran ili predmet. Crta ga dijeli od svega ispod, na
   svakom ekranu jednako. */
#sidebar-nav > .nav-crta { height: 1px; background: var(--ing-rub);
    margin: 5px 0 1px; }
.nav-sub-deck::-webkit-scrollbar { display: none; }
/* PUNA SIRINA (Drago, 24.09.2026.: „zasto samo ne moze biti tu i to je to").
   Redak predmeta izgleda tocno kao svaka druga stavka izbornika: ista sirina,
   isti razmaci, nista ne viri. Listanje i dalje radi, samo se vise ne najavljuje
   susjedom na rubu. */
/* BEZ `scroll-snap-stop: always` (Drago, 25.09.2026.: „mogu swipat samo jedan
   predmet"). Ono je svaki prevlak zaustavljalo na PRVOM susjedu, pa se do petog
   predmeta moralo prevuci cetiri puta; sada duzi zamah prijede vise njih. */
.nav-sub-slide { flex: 0 0 100%; scroll-snap-align: start; }
/* IME I ALATI SU JEDNA KARTICA (Drago, 25.09.2026.: „ove 4 kartice trebaju
   biti da se tocno vide da su dio predmeta, ovako su odvojene"). Gumb imena
   zato gubi vlastiti rub, prsten i plohu: nosi ih kartica, a dva okvira jedan
   u drugom citaju se kao dvije stvari. Plavo slovo ostaje, ono i dalje kaze
   koji je predmet tekuci.
   OKVIR POSTOJI SAMO UZ ALATE (Drago, isti dan: „zasto je predmet zaokruzen,
   neka predmet bude isto kao i ostali samo sto moze scrollat"). Gdje alata
   nema, okvir nema sto drzati na okupu, pa redak predmeta izgleda kao svaka
   druga stavka izbornika i zadrzi samo prevlak. */
.nav-sub-slide--kart { border: 1px solid var(--ing-rub); border-radius: 12px;
    overflow: hidden; }
.nav-sub-slide--kart > .nav-sub-red { border: 0 !important; border-radius: 0;
    background: transparent !important; box-shadow: none !important; }
.nav-sub-slide--kart.nav-sub-slide--tu { border-color: #93c5fd; }
html.dark-theme .nav-sub-slide--kart.nav-sub-slide--tu { border-color: #2563eb; }
/* Crta unutar kartice dijeli ime od alata; donje crte nema jer je nosi rub
   kartice. Razmak je manji nego kad je red stajao sam. */
.nav-sub-slide .nav-alat-red { border-bottom: 0; border-top: 1px solid var(--ing-rub);
    margin-bottom: 0; padding: 6px 8px; }
.nav-sub-slide--tu .nav-alat-red { border-top-color: #bfdbfe; }
/* Jedan predmet: bez klizanja, da se ne moze gurnuti u polozaj iz kojeg se
   nema kamo vratiti. */
.nav-sub-deck:has(> .nav-sub-slide:only-child) { overflow-x: hidden; }
.nav-sub-deck:has(> .nav-sub-slide:only-child) > .nav-sub-slide { flex-basis: 100%; }

/* IKONA MAPE ZNANJA (Drago, 24.09.2026.): ista mjera i polje kao na Nizu i
   Ligi, pa tri kartice ispod kartica alata imaju isti redak naslova. */
#view-dashboard .kmap-naslov { display: flex; align-items: center; gap: 6px;
    color: var(--ing-tinta) !important; }
#view-dashboard .kmap-ikona { width: 28px; height: 28px; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; padding: 4px;
    /* Bijelo polje ispod ikone (Drago, 25.09.2026.: „stavi isto bijelo"),
       kao na karticama alata: otkad je ploha kartice obojena, obojeno polje
       se s njom stapa i ikona gubi okvir. */
    background: var(--ton-polje); border: 1px solid var(--ton-plava-rub); }
#view-dashboard .kmap-ikona img { width: 100% !important; height: 100% !important;
    object-fit: contain; }

/* KRUPNIJA MAPA ZNANJA (Drago, 24.09.2026.: „sad povecaj Mapu znanja i to je
   to"). Ista logika kao kod kartica alata: kartica koja vodi u nastavak
   ucenja treba tezinu kakvu ima i u glavi studenta. Raste tipografija,
   gumb i traka poglavlja, ne i broj elemenata. */
#view-dashboard #dash-map-widget { padding: 14px 14px 16px !important; }
#view-dashboard .kmap-naslov { font-size: 14px !important; }
#view-dashboard .kmap-ikona { width: 32px; height: 32px; flex: 0 0 32px; }
#view-dashboard #dash-map-widget .dash-cont-name { font-size: 15.5px !important; }
#view-dashboard #dash-map-widget .hcw-where { font-size: 12px !important; }
/* Gumb „Nastavi" je dosad bio 89x28 s tekstom od 11 px, dakle manji od svega
   sto otvara; sad je pilula s punom dodirnom metom. */
#view-dashboard .dash-resume-btn { font-size: 13px !important;
    padding: 9px 16px !important; border-radius: 999px !important;
    min-width: 0 !important; }
/* Traka poglavlja: deblji segmenti, jer su na 10 px izgledali kao crte. */
#view-dashboard .kbar { gap: 4px; margin-top: 0.5rem !important; }
#view-dashboard .kbar-seg { height: 34px; }
#view-dashboard .kbar-seg i { height: 14px; border-radius: 5px; }

/* KRUPNIJE KARTICE ALATA (Drago, 24.09.2026.: „u naslovnici predmeta povecaj
   ove 4 ikone alata, sve je isto, sav princip isti, samo da su duzi ili tako
   nesto, da su povecaniji, tako da je to ono sto zelimo kliknuti"). Skripta,
   Kviz, Audioknjiga i Ispit su radnje zbog kojih se ulazi u predmet, pa nose
   najvecu tezinu na ekranu. Sve ostalo (raspored, boje, strelica) je isto.
   Tekst pritom NE GUBI sirinu: lijevi razmak raste s 54 na 56 jer je polje
   ikone naraslo, a desni pada s 22 na 18, pa je stupac teksta za 2 px siri
   nego prije. Vrijedi samo u predmetu; kucice Pocetne ostaju kakve jesu. */
#view-dashboard .dash-quick-text .qt { font-size: 14px !important; }
/* Odjeljci se nikad ne dodiruju (Drago, 24.09.2026.: „Mapa znanja mi je
   preblizu Nizu i Ligi"): najmanji razmak je 14 px, a visak se dijeli
   ravnomjerno. Da bi dioba bila POSTENA, sva tri bloka moraju biti u istom
   stupcu: `display: contents` rastapa omotac widgeta, pa su kartice alata,
   Mapa znanja i par braca, a ne dva bloka od kojih jedan krije dvoje.
   Prazan hero (na mobitelu je visok 0) se gasi, inace bi i on dobio svoj
   dio razmaka. */
#view-dashboard.dash-rich .dash-rich-wrap { row-gap: 14px; }
#view-dashboard .dash-widgets { display: contents; }
#view-dashboard .dash-hero { display: none; }

/* BEZ NATPISA „Brzi pristup" (Drago, 24.09.2026.: „makni ovaj natpis i zatim
   ce se osloboditi puno praznog prostora... samo nekako trebamo ujednaciti
   razmake da se popuni ekran"). Ikone kartica vec kazu sto je sto, a naslov
   je jedini natpis na ekranu koji nista ne dodaje.
   Oslobodeni prostor NE ide jednoj kartici nego svima: stupac se rasteze na
   punu visinu i razmaci medu odjeljcima se izjednace, pa ekran ostaje pun i
   kad je sadrzaja malo. Kad sadrzaja ima vise od ekrana, `space-between`
   nema sto rasporediti, pa se ponasa kao i prije i stranica normalno klizi. */
#view-dashboard .dash-section-title { display: none !important; }
/* STALAN RAZMAK, NE RASTEZANJE (Drago, 25.09.2026.: „nije dobro samo
   previse razmaka pa onda nije ista velicina kartica kroz predmet"). S
   `space-between` je predmet s manje sadrzaja dobivao velike praznine, a onaj
   kojem je stupac bio tijesan stisnute kartice. Razmak je sada uvijek 14 px
   (`row-gap` gore), a visak ostaje ispod para, iznad trake razgovora. */
#view-dashboard.dash-rich .dash-rich-wrap { justify-content: flex-start;
    padding-bottom: 4px; }

/* MAPA ZNANJA BEZ PLAVE PLOHE (Drago, 24.09.2026.: „too much plava... ovo
   Mapa znanja, kako cemo to"). Kartica je bila puni plavi blok, a uz Kviz,
   traku razgovora i Mapu ekran je imao tri plave povrsine. Ploha ide na
   bijelo kao kod ostalih kartica, crta uz rub ostaje plava: Mapa i traka
   razgovora nisu znacajke nego glas aplikacije, pa dijele brendiranu plavu. */
/* SAMO BLAGO OBOJAN RUB, BEZ CRTE (Drago, 25.09.2026., najprije „stavi na
   Ligu genija i Niz genija i Mapu znanja rub da je blago obojan u toj boji",
   pa odmah zatim „makni ovo tu" za samu crtu). Mapa, Niz i Liga zato nose rub
   od 1 px u blijedoj inacici svoje boje sa sve cetiri strane, kao i kartice
   alata. Nijedna kartica u aplikaciji vise nema zadebljanu crtu. */
#view-dashboard #dash-map-widget { background: var(--ton-plava-ploha);
    border: 1px solid var(--ton-plava-rub); }
html.dark-theme #view-dashboard #dash-map-widget { background: #2a2927;
    border-color: #3b3a37; border-left-color: var(--ing-plava-svijetla); }

/* TRAKA RAZGOVORA VISE NEMA CRTU (Drago, 25.09.2026.: „makni i sa Pitaj
   Inzenjerka"). Dobila ju je 24.09. da ne bude tisa od kartica; sada je
   kartice nemaju, pa bi traka s njom bila jedina iscrtana povrsina na ekranu.
   Rub je jednak sa sve cetiri strane. */
#view-home .dash-chatbar,
#view-dashboard .dash-chatbar { border-left-width: 1px !important;
    border-left-color: #e2e8f0 !important; }
html.dark-theme #view-home .dash-chatbar,
html.dark-theme #view-dashboard .dash-chatbar { border-left-color: #3b3a37 !important; }
.dash-chatbar-send.is-empty { background: var(--ing-plava); cursor: pointer; }
.dash-chatbar-send.is-empty:hover { background: #1d4ed8; }
/* Dok povlacenje traje, prst ne skrola stranicu. */
.home-kucice.hk-mreza-vuce { touch-action: none; overscroll-behavior: contain; }
/* KRATKA PROVJERA NEMA SVOJU BOJU, NEGO OBJE (Drago, 24.09.2026.). Paleta je
   puna: plava = kviz, smaragdna = skripta, nebeska = audioknjiga, ruzicasta =
   ispit, jantarna = blitz, indigo i ljubicasta = Niz genija, zelena i crvena =
   tocno i netocno. Umjesto devete boje, provjera nosi prijelaz iz kviza u
   ispit, jer to i jest: tri kviz pitanja i dva zadatka. */
#view-quiz.kp-tema > div { border-left-color: transparent !important;
    border-image: linear-gradient(180deg, #2563eb, #db2777) 1 !important; }
#view-quiz.kp-tema .quiz-step.active {
    background-image: linear-gradient(90deg, #2563eb, #db2777) !important; }
#view-quiz.kp-tema .quiz-step.prijedjen {
    background-image: linear-gradient(90deg, #93c5fd, #f9a8d4) !important; }

/* Naslov predmeta ne smije sjediti na pozdravnoj plohi (Drago, 24.09.2026.). */
.dash-hero + .flex .dash-section-title, .home-hero + div .dash-section-title { margin-top: 10px; }
#view-home .dash-section-title:first-of-type { margin-top: 2px; }

/* PROBA POCETNE (Drago, 24.09.2026.): kartica predmeta je ista plocica kao u
   brzom izborniku: ikona, naziv, i tanka crta napretka uz donji rub, bez
   postotka. „Dodaj jos" je u retku naslova, ne u mrezi. */
#view-home .home-courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin-bottom: 0; }
/* Kartice predmeta su MANJE i UZE od brzog izbornika (Drago, 24.09.2026.:
   „preuzima kontrolu vizualno... realno suzi ih"). Red predmeta je klizac,
   ne mreza, pa se sirina zadaje osnovicom, a ne stupcem; brzi izbornik time
   dolazi vise gore, a njegove plocice ostaju netaknute. */
#view-home .home-course-card { position: relative; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 6px 5px; min-height: 56px;
    flex: 0 0 86px !important; border-radius: 12px; text-align: center; overflow: hidden; }
/* Ikona predmeta bez plave podloge, kao u „icons" izgledu (Drago, 24.09.2026.:
   „je li mora ovo biti sivo, neka je svugdje bijelo"). */
#view-home .home-course-card .hcc-icon { width: 40px; height: 40px;
    background: transparent !important; border-radius: 0; }
/* ISTI GLIF KAO U KARTICAMA BRZOG IZBORNIKA (Drago, 24.09.2026.: „neka sve
   ikone budu iste velicine u svim karticama"). `python-look` sliku predmeta
   jos poveca za 12 %, pa je ista mjera davala vecu ikonu nego u kucici;
   ovdje se uvecanje gasi, a mjera ostaje 32 px kao i ondje. */
body.python-look #view-home .home-course-card .hcc-icon > img { transform: none; }
/* Visina plocica ostaje kakva je bila (Drago, 24.09.2026.: „nemoj mi to
   spustat, vrati di su bili"); bijela ikona ostaje. */
#view-home .home-course-card .hcc-main { align-items: center; text-align: center; }
/* Naziv predmeta ide u DVA RETKA, kao „Arhivirani predmeti" u brzom izborniku
   (Drago, 24.09.2026.). `!important` jer stariji medijski upit nize u datoteci
   nazivu tvrdo postavlja `nowrap` s trotockom. */
#view-home .home-course-card .hcc-title { font-size: 11px !important; font-weight: 700;
    line-height: 1.2 !important; white-space: normal !important; overflow: hidden;
    text-overflow: clip !important; display: -webkit-box !important;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    min-height: 0 !important; }
/* Postotak i stara traka napretka vise se ne crtaju (napredak dolazi kasnije). */
#view-home .home-course-card .hcc-prog, #view-home .home-course-card .hcc-pc,
#view-home .home-course-card .hcc-bar { display: none !important; }
/* ISPREKIDANO MJESTO ZA NOVI PREDMET (Drago, 24.09.2026.): red uvijek drzi pet
   mjesta, pa se vidi da ima jos prostora i kamo se klikne da se doda. */
#view-home .home-course-card.hcc-prazna { border: 1px dashed var(--ing-siva-svijetla);
    background: transparent; box-shadow: none; align-items: center; justify-content: center;
    color: var(--ing-siva-svijetla); }
#view-home .home-course-card.hcc-prazna:hover { border-color: var(--ing-plava);
    color: var(--ing-plava); background: var(--ing-podloga); }
.hcc-prazna-znak { font-size: 20px; font-weight: 700; line-height: 1; }
/* Malo „i" uz naslov: ulaz u Moje predmete. */
.hcc-info { width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--ing-rub);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
    font-weight: 800; font-style: italic; color: var(--ing-siva); background: #fff;
    line-height: 1; }
.hcc-info:hover { border-color: var(--ing-plava); color: var(--ing-plava); }
html.dark-theme .hcc-info { background: #2a2927; }
/* Poveznica „Dodaj jos" vidljiva je i na telefonu, jer plocice vise nema. */
.hcc-add-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
    font-weight: 700; color: var(--ing-plava); background: none; border: 0; }
.hcc-add-link:hover { color: var(--ing-plava-tamna); }

/* PROBA: NASLOVNICA PREDMETA U JEZIKU POCETNE (Drago, 24.09.2026.: „napravi
   sliku dva u stilu slike 1"). Iste kucice kao u Brzom izborniku: bijela
   ploha, sivi obrub, ikona lijevo, naslov do nje, podnaslov ispod. Boje po
   alatu (skripta zeleno, kviz plavo...) ovdje se gase, kao i na Pocetnoj.
   `!important` i id u pretku jer mobile.css nize ove kartice tvrdo stisce u
   kvadratice bez teksta. */
/* Ista mjera kao na Pocetnoj (Drago, 25.09.2026.). */
#view-dashboard .dash-section-title { font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .01em; margin-top: 2px !important; margin-bottom: 4px !important; }
#view-dashboard .dash-section-title .dash-section-bolt { width: 17px !important; height: 17px !important;
    font-size: .62rem !important; }
#view-dashboard .dash-quick { grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    margin-top: 0 !important; }
/* KARTICE ALATA SU ISTE KUCICE KAO NA POCETNOJ (Drago, 24.09.2026.: „treba
   biti isto kao onih sest ikona na pocetnoj"). Izgled im vise NE stoji ovdje
   nego u pravilima `.hk-kucica` gore, kojima je selektor prosiren na ovu
   karticu: jedna definicija, dva mjesta, pa ne mogu razici. Ovdje ostaje samo
   ono cime se ponistava `mobile.css`, koji ove kartice tvrdo stisce u
   kvadratice bez teksta. */
#view-dashboard .dash-quick { grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    margin-top: 0 !important; }
#view-dashboard .dash-quick-card { flex-direction: unset !important; align-items: unset !important;
    justify-content: unset !important; padding: 10px 18px 10px 58px !important;
    border-radius: 19px !important; aspect-ratio: auto !important; width: auto !important;
    max-width: none !important; max-height: none !important; min-height: 96px !important;
    /* Blijedi ton i ovdje (Drago, 25.09.2026.: „vrlo blaga obojena podloga
       umjesto ciste bijele"). Ovo pravilo je tvrdom bijelom gazilo ton s
       Pocetne, pa su naslovnica predmeta i Pocetna imale razlicite plohe. */
    justify-self: stretch !important; background-color: var(--ton-ploha) !important;
    background-image: none !important; row-gap: 2px !important; column-gap: 8px !important; }
/* mobile.css ikoni tvrdo daje 3,5rem; vracamo je na mjeru polja. ISTE BROJKE
   KAO NA POCETNOJ (Drago, 24.09.2026.: „ikone male, trebaju biti iste
   velicine kao na slici 1... neka sve ikone budu iste velicine u svim
   karticama"): ova su dva `!important` pravila drzala naslovnicu na 34/22 i
   kad je zajednicko pravilo gore vec bilo 40/32, pa su joj ikone jedine
   ostale manje. Mijenjaju se ZAJEDNO s pravilom gore. */
/* Jos mrvicu (Drago, 24.09.2026.: „jos malo povecaj ove 4 ikone na
   naslovnici predmeta, mrvicu mrvicu"): 48 px. Polje krece s 5 px od ruba i
   zavrsava na 53, tekst pocinje na 58, pa izmedu ostaje 5 px zraka.
   IKONE POCETNE SE NE DIRAJU (izricito): ovo je pravilo samo za
   `#view-dashboard`, kucice nose `.hk-ic` i ostaju 40 px. */
#view-dashboard .dash-quick-icon { width: 48px !important; height: 48px !important;
    left: 5px !important; margin: 0 !important; }
#view-dashboard .dash-quick-icon > img { width: 100% !important; height: 100% !important; }
#view-dashboard .dash-quick-arrow { display: none !important; }
#view-dashboard .dash-quick-text { display: contents !important; }
/* Podnaslov drzi visinu dva retka i kad tekst stane u jedan, pa naslovi svih
   kartica u redu stoje u istoj crti. */
#view-dashboard .dash-quick-text .qd { min-height: 28px; }
html.dark-theme #view-dashboard .dash-quick-card { background-color: var(--ton-polje) !important; }
/* ZADATAK DANA I LIGA JEDAN UZ DRUGI (Drago, 24.09.2026.), u dva stupca kao
   kartice alata iznad. Gumb „Rijesi" se gasi: cijela kartica je vec klikabilna
   (kvizdana.js vjesa klik na `.kd-teaser-row`), pa je pilula bila drugi gumb
   za istu radnju. */
#view-dashboard .dash-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    align-items: stretch; }
/* NIZ GENIJA U PARU (Drago, 24.09.2026.) nosi isti jezik kao ostale kartice:
   bijela ploha, ljubicasta crta uz rub i ikona u obojenom polju, umjesto
   pune ljubicaste trake kakvu ima na Pocetnoj. Traka je jedan element, pa se
   preslaguje u karticu ovdje, a `nizgenija.js` ostaje netaknut. */
/* Tri retka: zaglavlje, pitanje, pilula. Srednji je RASTEZLJIV (Drago,
   24.09.2026.: „zasto nije napisano jos teksta ako stane"), pa pitanje uzme
   svu visinu koja ostane izmedu naslova i pilule, umjesto da stane na tri
   retka i ostavi prazninu. */
#view-dashboard .dash-par .ng-banner { display: grid; grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    align-content: stretch; gap: 6px 8px; padding: 10px 12px !important;
    background: var(--ton-ljubicasta-ploha) !important; color: var(--ing-tinta) !important;
    border: 1px solid var(--ton-ljubicasta-rub);
    border-radius: 16px; box-shadow: none !important; }
#view-dashboard .dash-par .ng-banner-ic { grid-row: 1; grid-column: 1;
    width: 28px !important; height: 28px !important;
    border-radius: 9px !important; font-size: 16px !important; align-self: center;
    background: var(--ton-polje) !important;
    border: 1px solid var(--ton-ljubicasta-rub); }
#view-dashboard .dash-par .ng-banner-main { grid-row: 1; grid-column: 2; min-width: 0;
    align-self: center; }
#view-dashboard .dash-par .ng-banner-title { font-size: 13px !important; line-height: 20px !important;
    white-space: normal; }
/* Bez podnaslova (Drago, 24.09.2026.: „bez teksta ovog podnaslova"): pitanje
   je ono sto karticu puni, a „Jedna prilika dnevno" je ponavljalo ime. */
#view-dashboard .dash-par .ng-banner-sub { display: none !important; }
/* Pitanje puni karticu kao sto ga je punio kviz dana (Drago, 24.09.2026.).
   Tri retka, pa se ostatak vidi tek u samoj igri. */
/* Pitanje puni ono sto ostane. Granica od 12 redaka je samo osigurac (tekst
   duzi od kartice dobiva trotocku), visinu odreduje redak mreze. */
/* TOCNO TRI RETKA, NIKAD POLA (Drago, 25.09.2026.: „ne smi se to dogadat na
   nijednom predmetu"). Redak je bio rastezljiv, pa mu je visina ispadala kako
   ispadne: na Diskretnoj matematici 48 px uz redak od 15, dakle 3,2 retka, i
   cetvrti se rezao po sredini slova. Sada je polje tvrdih 45 px = tocno tri
   retka, na svakom predmetu jednako, a dulje pitanje dobiva trotocku umjesto
   presjecenog reda. Ostatak pitanja se ionako vidi u samoj igri. */
#view-dashboard .dash-par .ng-banner-pitanje { grid-row: 2; grid-column: 1 / -1;
    min-height: 0; align-self: start; height: 45px;
    font-size: 11.5px; line-height: 15px; color: var(--ing-tinta); margin-top: 2px;
    display: block; overflow: hidden; }
#view-dashboard .dash-par .ng-pit-tekst { display: -webkit-box; line-height: 15px;
    -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; }
/* Formula ostaje U RETKU (QA 24.09.2026.): MathJax blok-formulu crta kao
   vlastiti redak, pa se pitanje na kartici raspalo na „gdje / g / ima
   jedinice". U teaseru je sve jedna recenica.
   I NE SMIJE POVISITI REDAK (Drago, 25.09.2026., pitanje s korijenom na
   Fizici). Polje je tvrdih 45 px = tri retka po 15, ali formula nosi svoju
   visinu, pa je redak s njom bio 24 px: tri takva retka su 74 px, polje ih
   rezalo na 45, i rez je pao USRED formule. Zato se SVG formule ogranicava na
   12 px visine uz `width: auto`, pa se skalira razmjerno i stane u redak.
   Duza formula time postane sitnija, ali teaser i sluzi samo da se prepozna
   pitanje; cijelo stoji u samoj igri. */
#view-dashboard .dash-par .ng-pit-tekst mjx-container { display: inline-block !important;
    margin: 0 !important; line-height: 15px !important; vertical-align: -3px; }
#view-dashboard .dash-par .ng-pit-tekst mjx-container > svg { max-height: 12px;
    width: auto !important; height: auto !important; }
/* „Igraj" stoji uz desni rub kartice (Drago, 24.09.2026.), kao strelica na
   karticama iznad. */
#view-dashboard .dash-par .ng-banner-cta { grid-row: 3; grid-column: 1 / -1; justify-self: end;
    align-self: end; padding: 4px 10px !important; font-size: 11px !important;
    background: var(--ton-ljubicasta-ploha) !important; color: var(--ton-ljubicasta-crta) !important;
    border-radius: 999px; min-width: 0 !important; }
#view-dashboard .dash-par .ng-banner--done .ng-banner-ic { color: var(--ing-uspjeh) !important; }
html.dark-theme #view-dashboard .dash-par .ng-banner { background: #2a2927 !important;
    border-color: #3b3a37; border-left-color: var(--ton-ljubicasta-crta); }

/* Liga ostaje POLA RETKA i kad je sama (Drago, 24.09.2026.: „Liga genija u
   pocetnoj predmeta ce imati istu velicinu kao i kviz dana"), dakle tocno na
   mjestu i u mjeri kviza dana; desna polovica ostaje prazna. */
#view-dashboard .dash-par--sam { grid-template-columns: 1fr 1fr; }
#view-dashboard .dash-par > * { min-width: 0; margin: 0 !important;
    grid-column: auto !important; }   /* stariji upit siri zadatak dana preko oba stupca */
#view-dashboard .dash-par .kd-card { height: 100%;
    /* Ista crta i na donjem paru (Drago, 24.09.2026.: „dodaj kvizu istu crtu
       u pocetnoj predmeta"): zadatak dana nosi ljubicastu kao Kviz, liga
       zutu kao Liga genija na Pocetnoj. */
    border: 1px solid var(--ing-rub); }
#view-dashboard .dash-par .dash-widget-leaderboard {
    background: var(--ton-zuta-ploha) !important;
    border: 1px solid var(--ton-zuta-rub) !important; }
#view-dashboard .dash-par .kd-cta { display: none !important; }
#view-dashboard .dash-par .kd-sub { display: none !important; }
/* PITANJE PUNI KARTICU (Drago, 24.09.2026.: „u kvizu je pitanje odrezano
   usred recenice a ima jos mista za tekst"). Tri retka su rezala tekst na
   pola kartice, a ispod je ostajalo 60 px praznine: kartica je visoka koliko
   i liga do nje. Sedam redaka je koliko stane izmedu naslova i dna, pa se
   tocke pojave tek kad tekst doista prelazi karticu.
   PET, ne vise: izmjereno na 390x844, liga do njega je visoka 156 px, a
   kartica sa zadatkom na tri retka 109. Na pet redaka ima 168, pa par naraste
   za 12 px i stane bez skrola; na sedam bi narastao za 48 i gurnuo traku
   razgovora s ekrana. */
#view-dashboard .dash-par .kd-q { font-size: 11.5px !important; line-height: 1.3 !important;
    display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical;
    overflow: hidden; }
#view-dashboard .dash-par .kd-card { display: flex; flex-direction: column; }
#view-dashboard .dash-par .kd-body { flex: 1 1 auto; min-height: 0; }
#view-dashboard .dash-par .kd-title { font-size: 13px !important; }
#view-dashboard .dash-par .dash-widget-leaderboard h3 { font-size: 13px !important; }
#view-dashboard .dash-par .sve-pilula { font-size: 10px !important; padding: 2px 6px !important; }
#view-dashboard .dash-par .dash-lb-list { font-size: 11.5px !important; }
/* Visi par, da u ligi stanu tri mjesta, a „Prikazi sve" sjedne pod popis. */
/* PAR NE RASTE (Drago, 24.09.2026.: „ove kartice se ne smiju siriti, ako
   tekst ne stane, jebiga, ne stane, ides dalje"). Dugacko pitanje je znalo
   napuhati karticu do 227 px i gurnuti traku razgovora s ekrana. Strop je
   172 px; pitanje puni sto ima i staje ondje gdje kartica zavrsi. */
/* NIZI PAR (Drago, 25.09.2026.: „Niz genija i Liga genija na naslovnici
   predmeta slobodno mogu biti manji"). Stupac se nije dao stisnuti dovoljno:
   osigurac koji zumira sadrzaj da stane ima dno na 0,9, a i na njemu je
   ostajalo 10 px preljeva. Par je bio 132 do 172 px; sada je 108 do 140, a
   liga u njemu ima dva mjesta umjesto tri, pa stupac stane i bez zuma.
   JEDNA VISINA, NE RASPON (Drago, isti dan: „nije konstantna visina svega,
   mislim da je razlika u visinama kartica, to nije dobro"). U rasponu je
   visina ovisila o sadrzaju, pa je par na predmetu s jednim imenom u ligi bio
   140 px, a na predmetu s dva 138. Dva piksela po kartici mijenjaju ukupnu
   visinu stupca, a s njom i faktor kojim ga osigurac stisne, pa su SVE
   kartice na ekranu ispadale malo drugacije od predmeta do predmeta. Tvrdih
   140 px: prirodna visina stupca je sada ista na svakom predmetu, dakle i
   zum je isti, dakle i svaka kartica. */
#view-dashboard .dash-par > * { height: 140px; min-height: 140px; max-height: 140px; }
/* Ista visina naslova i u paru ispod: zadatak dana i liga imaju isti uzmak
   i isti redak naslova, pa im naslovi stoje u istoj crti. */
#view-dashboard .dash-par .kd-card,
#view-dashboard .dash-par .dash-widget-leaderboard { padding: 10px 12px !important; }
#view-dashboard .dash-par .kd-head,
#view-dashboard .dash-par .lb-naslov { min-height: 28px; height: 28px;
    margin-bottom: 6px !important; }
/* Obje ikone naslova iste velicine (pehar je bio 15, munja 17x26), inace
   redak naslova nije iste visine pa tekst ne stoji u istoj crti. */
/* VECA IKONA U ZAGLAVLJU PARA (Drago, 24.09.2026.: „ikona je mala koji
   kurac") I NA OBOJENOM POLJU, kao kucice na Pocetnoj („zasto kartice Niza i
   Lige na pocetnoj predmeta ne prate logiku... gdje je ova pozadinska boja").
   Polje je 28 px, glif 20, boja po znacajki. */
#view-dashboard .dash-par .kd-ic,
#view-dashboard .dash-par .lb-ikona { width: 28px !important; height: 28px !important;
    flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; padding: 4px;
    background: var(--ton-polje); border: 1px solid var(--ton-zuta-rub); }
/* Naslov je taman kao na svim karticama (Drago, 24.09.2026.: „zasto je Liga
   genija obojan naslov"); boja znacajke ostaje na crti, ikoni i strelici. */
#view-dashboard .dash-par .lb-naslov,
#view-dashboard .dash-par .lb-naslov span { color: var(--ing-tinta) !important; }
#view-dashboard .dash-par .kd-ic img,
#view-dashboard .dash-par .lb-ikona img { width: 100% !important; height: 100% !important;
    object-fit: contain; }
#view-dashboard .dash-par .kd-head { align-items: center; }
#view-dashboard .dash-par .kd-title,
#view-dashboard .dash-par .lb-naslov { font-size: 13px !important; line-height: 20px !important; }
#view-dashboard .dash-par .dash-widget-leaderboard { display: flex; flex-direction: column; }
/* POPIS SE SKUPLJA, PILULA OSTAJE (QA 25.09.2026.). Bez `min-height: 0` popis
   u flexu ne smije biti nizi od svog sadrzaja, pa je s tri prava imena i
   dopisanim retkom narastao na 189 px u kartici od 172 i izbacio „Prikazi sve"
   21 px ISPOD kartice: gumb se nije vidio ni mogao pritisnuti (mjereno s tri
   umetnuta retka). Strop kartice ostaje kakav je (Drago: „ne smiju se siriti"),
   a ono sto ne stane se odreze. */
#view-dashboard .dash-par .dash-lb-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Dopisani redak („ima jos mjesta") bio je ovdje ugasen jer bi u uzoj kartici
   odrezao trece mjesto. Ljestvica u paru od 25.09.2026. ima najvise DVA mjesta,
   pa treceg nema sto rezati, a kad je na predmetu upisan samo jedan igrac
   ispod njegova imena zjapi rupa (Drago: „stavi onda prva dva ili tako" —
   drugog nema, pa neka bar pise zasto). Redak se zato vraca, ali samo kad je
   ime jedno, i u mjeri jednog retka ljestvice, pa kartica ne naraste. */
#view-dashboard .dash-par .dash-lb-jos { display: block; text-align: left;
    padding: 0; font-size: 10px; line-height: 13px; }
#view-dashboard .dash-par .dash-lb-list:has(.dash-lb-row:nth-child(2)) .dash-lb-jos {
    display: none; }
/* „Prikazi sve" je pilula uz desni rub, ista mjera i oblik kao „Igraj" na
   kartici Niza (Drago, 24.09.2026.), samo u jantarnoj boji Lige. */
#view-dashboard .dash-par .lb-sve-dolje { align-self: end; margin: 6px 0 0 auto;
    padding: 4px 10px; font-size: 11px; font-weight: 800; border-radius: 999px;
    background: var(--ton-zuta-ploha); color: var(--ton-zuta-crta);
    display: inline-flex; align-items: center; gap: 3px; }
#view-dashboard .dash-par .lb-sve-dolje:hover { background: var(--ton-zuta-rub); }
/* JEDNA MJERA ZA SVE NASLOVE KARTICA (Drago, 25.09.2026.: „Liga genija i Niz
   genija nisu iste (…) htio sam da je sve konzistentno po cijeloj aplikaciji,
   po fontovima i tekstu"). Na istom ekranu su cetiri naslova imala tri
   razlicite kombinacije: alati 14 px/800, Mapa znanja 14/700, Niz 13/800,
   Liga 13/700, uz cetiri razlicita proreda. Boja je vec bila ista. Sada su sva
   cetiri 14 px, debljina 700, prored 1,3 — 700 jer je to i debljina naslova u
   skripti, pa kartica i gradivo govore istim glasom. */
#view-dashboard .dash-quick-text .qt,
#view-dashboard .kmap-naslov,
#view-dashboard .dash-par .ng-banner-title,
#view-dashboard .dash-par .dash-widget-leaderboard h3 {
    font-size: 14px !important; font-weight: 700 !important;
    line-height: 1.3 !important; }

/* MAPA ZNANJA: PRAZNA PRUGA IDE TEKSTU (Drago, 25.09.2026.: „Mapa znanja ima
   dovoljno mista da stane poglavlje i potpoglavlje u dva reda, ne treba
   kartica rast, samo ce razmak izmedu teksta biti uzi"). Izmedu retka s
   poglavljem i trake tockica stajalo je 15 px praznine, a redak s imenom
   poglavlja bio je odrezan na jedan (Tailwindov `truncate`). Sada ime smije u
   dva retka, razmaci su uzi za tocno toliko, a kartica dobiva TVRDU visinu pa
   ne moze narasti ni kod najduzeg imena. */
#view-dashboard #dash-map-widget { height: 168px; }
#view-dashboard .kmerge-cont { margin: 0.25rem 0 0.25rem; }
#view-dashboard #dash-map-widget .kbar { margin-top: 0.2rem; }
#view-dashboard .dash-cont-name { white-space: normal !important;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    line-height: 1.25; }

/* Par ne smije dodirivati traku razgovora (Drago, 24.09.2026.). Osam, ne
   sesnaest (25.09.2026.): traka nosi jos 2,4 px vlastitog uzmaka, pa je zraka
   i dalje preko 10 px, a stupac je dobio osam koja su mu falila. */
#view-dashboard .dash-par { margin-bottom: 8px !important; }
/* Naslov lige nosi pehar, kao sto zadatak dana nosi svoju ikonu. */
#view-dashboard .dash-par .lb-naslov { display: flex; align-items: center; gap: 6px; }
#view-dashboard .dash-par .lb-ikona { display: inline-flex; }
#view-dashboard .dash-par .lb-ikona img { width: 100%; height: 100%; object-fit: contain; }
/* Poredak u uzoj kartici: mjesto, medalja, ime, bodovi, svaki u svom stupcu. */
#view-dashboard .dash-par .dash-lb-row { display: grid !important;
    grid-template-columns: 14px 16px 1fr auto !important; align-items: center; gap: 4px;
    padding: 3px 6px !important; }
#view-dashboard .dash-par .dash-lb-rank { text-align: right; color: var(--ing-siva);
    font-weight: 700; }
#view-dashboard .dash-par .dash-lb-name { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
#view-dashboard .dash-par .dash-lb-score { font-weight: 800; color: var(--ing-plava);
    justify-self: end; }

}
/* ── kraj mobilnog izgleda od 24.09.2026. ─────────────────────────────*/

/* ── TRAKA RAZGOVORA: JEDNA MJERA I JEDNA STRELICA (Drago, 25.09.2026.) ──
   1. „Je li ova pilula Pitaj Inzenjerka moze imati ovu strelicu kao ostatak
      appa, ali moze ostat unutar ovog bijelog kruga." Krug je nosio dugu
      strelicu (`cta-strelica`, ista kao na pilulama „Nastavi" i „Igraj"), a
      kartice po cijeloj aplikaciji nose seVron `›`. Sada i krug nosi sevron.
      Sevron je opticki lijevo od sredine jer mu je tezina u vrhu, pa ga
      pomicemo 1 px udesno.
   2. „Sad u Pricaj s Inzenjerkom ova traka nije ista kao u ostalim ekranima."
      Naslovnice nose `.dash-chatbar`: visina 62,8 px, radijus 13,6, plava
      crta uz lijevi rub i krug od 40 px. Chat je imao svoju traku: 50 px,
      radijus 16, bez crte, krug 36. Mjere se sada preuzimaju. */
.dash-chatbar-send > svg,
#input-area button.rounded-full > svg { display: none; }
/* BIJELI KRUG, PLAVI OBRUB, PLAVI SEVRON (Drago, 25.09.2026.: „mozda da je
   bijelo u krugu, plavi obrub kruga, i da je strelica plava i da je u
   sredini"). Krug je bio pun plavi s bijelim znakom. Sevron je sada tocno u
   sredini, bez optickog pomaka. */
.dash-chatbar-send, #input-area button.rounded-full {
    place-items: center;
    background-color: #fff !important; border: 2px solid #2563eb !important;
    color: #2563eb !important; }
/* `background-color`, ne kratica `background`: kratica bi obrisala crtez
   sevrona koji stoji u `background-image`, pa bi krug na prelazu misem ostao
   prazan. */
.dash-chatbar-send:hover, #input-area button.rounded-full:hover {
    background-color: #eff6ff !important; }
/* SEVRON JE CRTEZ, NE SLOVO (Drago, 25.09.2026.: „centriraj je"). Znak `›`
   sjedi na pisacoj crti, a ispod nje ostaje prostor za repove slova, pa se
   crno na bijelom uvijek cini podignutim i lijevo od sredine ma koliko se
   kutija centrirala. Crtez nema pisacu crtu: vrh mu je na x=12, y=12 u
   kvadratu 24x24, dakle tocno u sredini kruga. */
.dash-chatbar-send, #input-area button.rounded-full {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 15px 15px !important; }
@media (max-width: 767px) {
    #input-area > div > div {
        border-radius: 13.6px !important;
        padding: 10.4px 12.8px !important;
        border-left-width: 1px !important;
        gap: 8px !important; }
    #input-area > div > div > input { font-size: 14.4px !important; }
    #input-area button.rounded-full { width: 40px !important; height: 40px !important; }
}

/* ── ODSJAJ PRI ULASKU (Drago, 25.09.2026.: „mozda kad se ude u app malo
   odsijava nekako, da se dobiva taj klikabilni dio") ─────────────────────
   Jednom, na svakom crtanju naslovnice, preko kartica prijede tanak svijetli
   pojas. Ne mijenja mirno stanje ni za piksel: pojas stoji u `::before`, koji
   je prije bio prazan, i nestaje kad animacija zavrsi. Kartice dobivaju
   `overflow: hidden` da pojas ne izlazi iz zaobljenja; sevron je `::after`
   unutar kartice pa ostaje netaknut.
   Kasnjenje raste po kartici, 60 ms po komadu, pa val ide preko ekrana
   umjesto da sve bljesne odjednom. */
@keyframes ing-odsjaj {
    0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(240%) skewX(-12deg); opacity: 0; }
}
.hk-kucica, #view-dashboard .dash-quick-card { overflow: hidden; }
.hk-kucica::before,
#view-dashboard .dash-quick-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none; opacity: 0; z-index: 0;
    animation: ing-odsjaj .85s ease-out .2s 1 both; }
.hk-kucica:nth-child(2)::before, #view-dashboard .dash-quick-card:nth-child(2)::before { animation-delay: .26s; }
.hk-kucica:nth-child(3)::before, #view-dashboard .dash-quick-card:nth-child(3)::before { animation-delay: .32s; }
.hk-kucica:nth-child(4)::before, #view-dashboard .dash-quick-card:nth-child(4)::before { animation-delay: .38s; }
.hk-kucica:nth-child(5)::before { animation-delay: .44s; }
.hk-kucica:nth-child(6)::before { animation-delay: .50s; }
/* Tko je u sustavu ugasio animacije, ne dobiva ni ovu. */
@media (prefers-reduced-motion: reduce) {
    .hk-kucica::before, #view-dashboard .dash-quick-card::before { animation: none; opacity: 0; }
}

/* ── AUDIOKNJIGA: JEDNO POGLAVLJE NA EKRANU, SADRZAJ GORE DESNO ─────────────
   (Ivo, 26.09.2026.: „Audioknjigu bi napravio ko i skripta da se gori desno
   pojavi ToC, a onda lipse moze bit sadrzaj prikazan. A na vrhu isto neka
   stoji play kao i do sad.") Popis poglavlja je u ploci iza gumba; na ekranu
   su svirac i tekst poglavlja koje se slusa, s otvorenim podpoglavljima. */
#audiobook-toc.ab-jedno > .ab-pog { display: none; }
#audiobook-toc.ab-jedno > .ab-pog.ab-vidljivo { display: block; }
/* Redak poglavlja postaje naslov poglavlja. */
#audiobook-toc.ab-jedno > .ab-pog > button,
#audiobook-toc.ab-jedno > .ab-pog > .flex > button {
    padding: .25rem .25rem .5rem; font-size: 1.15rem; font-weight: 700;
    color: var(--ing-tinta); background: transparent; cursor: default;
}
#audiobook-toc.ab-jedno > .ab-pog .truncate { white-space: normal; overflow: visible; }
#audiobook-toc.ab-jedno > .ab-pog > div[id^="audiobook-text-"] { padding-left: .25rem !important; padding-right: .25rem !important; }
/* Podpoglavlje: naslov kao u skripti, tekst bez uvlake. */
#audiobook-toc.ab-jedno .ab-sub-row {
    padding-top: 1rem; font-size: 1rem; font-weight: 700; color: var(--ing-tinta);
}
#audiobook-toc.ab-jedno .ab-sub-body { padding-left: 0 !important; }
#audiobook-toc.ab-jedno .ab-sub-row + .ab-sub-body p { color: #334155; }

/* Ista ploca kao sadrzaj skripte (.ec-toc): uz desni rub, ne preko cijelog zaslona. */
.ab-toc-ploca {
    position: fixed; right: .75rem; top: calc(var(--safe-top, 0px) + 4.5rem);
    width: min(21rem, calc(100vw - 3rem)); max-height: 76vh; overflow-y: auto;
    overscroll-behavior: contain; background: #fff;
    border: 1px solid #bfdbfe; border-radius: .5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    padding: .6rem; z-index: 61;
    transform: translateX(110%); visibility: hidden; transition: transform .2s ease, visibility .2s;
}
body.ab-toc-otvoren:has(#view-audiobook:not(.hidden)) .ab-toc-ploca { transform: none; visibility: visible; }
.ab-zastor { position: fixed; inset: 0; z-index: 60; display: none; }
body.ab-toc-otvoren:has(#view-audiobook:not(.hidden)) .ab-zastor { display: block; }
/* Redci ploce su `ec-toc-*` iz sadrzaja skripte; poglavlje na ekranu je
   podebljano i kad mu grana nije rasklopljena. */
#ab-toc-ploca .ec-toc-grana.ab-tu .ec-toc-pog { color: var(--ing-tinta); font-weight: 700; }
/* Skok na podpoglavlje iz ploce: naslov ostaje ispod ljepljivog svirača. */
#audiobook-toc .ab-sub-row { scroll-margin-top: 8.5rem; }
@media (prefers-reduced-motion: reduce) { .ab-toc-ploca { transition: none; } }

/* JEDNO PODPOGLAVLJE NA EKRANU I PODNOZJE KAO U SKRIPTI (Ivo, 26.09.2026.).
   Ostali omoti su nacrtani (pracenje teksta, klik na recenicu), ne vide se. */
#audiobook-toc.ab-jedno .ab-sub-omot { border-bottom: 0; }
#audiobook-toc.ab-jedno .ab-sub-omot:not(.ab-sub-tu) { display: none; }
#audiobook-toc.ab-jedno .ab-sub-tu > .ab-sub-body { display: block !important; }
#audiobook-toc.ab-jedno .ab-sub-row { cursor: default; pointer-events: none; }
#audiobook-toc.ab-jedno .ab-sub-row [id^="ab-sub-caret-"] { display: none; }
/* Dugi pritisak je biljeska, ne sustavno oznacavanje (isto kao u skripti). */
.ab-komad .ab-narr { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ab-podnozje {
    display: flex; align-items: center; gap: .5rem;
    margin-top: 1.5rem; padding: .6rem 0 .5rem; border-top: 1px solid var(--ing-rub);
}
.ab-podnozje-razmak { flex: 1; }
.ab-podnozje .ab-inz { flex-shrink: 0; }
.ab-podnozje .ab-dalje[hidden] { display: none; }

/* AUDIOKNJIGA KAO SKRIPTA (Ivo, 26.09.2026.: „vidis kako izgleda tekst ko da
   nije jednako sirok ko sta je u skripti", „ovaj naslov je plav, netriba").
   Mjere su izmjerene u citacu skripte na 375 px: 16 px, prored 1,6, crno,
   18 px od ruba s obje strane. */
/* Ekran vec ima 16 px uvlake; omotac dodaje 2 px, pa je tekst na 18 px. */
#view-audiobook > div:first-child { padding-left: 2px !important; padding-right: 2px !important; }
#audiobook-toc.ab-jedno .ab-sub-body { padding-right: 0 !important; }
#audiobook-toc.ab-jedno > .ab-pog > div[id^="audiobook-text-"] { padding-left: 0 !important; padding-right: 0 !important; }
#audiobook-toc.ab-jedno .ab-sub-row { padding-left: 0; padding-right: 0; }
#audiobook-toc.ab-jedno .ab-sub-body p {
    font-size: 16px !important; line-height: 1.6 !important; color: #000 !important;
    margin: 0 0 8px !important;
}
#audiobook-toc.ab-jedno > .ab-pog > button,
#audiobook-toc.ab-jedno > .ab-pog > .flex > button,
#audiobook-toc.ab-jedno > .ab-pog > button *,
#audiobook-toc.ab-jedno > .ab-pog > .flex > button * { color: var(--ing-tinta) !important; }
.ab-jezici { display: inline-flex; flex-shrink: 0; border: 1px solid #bfdbfe; border-radius: .45rem; overflow: hidden; }
.ab-jezik {
    padding: .1rem .45rem; font-size: 11px; font-weight: 700; line-height: 1.4;
    color: #475569; background: #fff; border: 0; cursor: pointer;
}
.ab-jezik + .ab-jezik { border-left: 1px solid #bfdbfe; }
.ab-jezik.je-tu { background: var(--ing-plava); color: #fff; }
.ab-jezik:focus-visible { outline: 2px solid var(--ing-plava); outline-offset: 1px; }

/* PREUZMI APLIKACIJU na uvodnom ekranu u pregledniku (Ivo, 28.09.2026.).
   Tamne znacke kao u trgovinama; dok poveznice nema, stoje prigusene. */
.mascot-trgovine {
    display: flex; gap: 10px; justify-content: center; margin-top: 18px;
    animation: mascot-bubble-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s both;
}
.mascot-trgovina {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    min-width: 128px; padding: 6px 14px; border-radius: 10px;
    background: #0f172a; color: #fff; text-decoration: none; line-height: 1.15;
}
.mascot-trgovina-gore { font-size: 10px; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.mascot-trgovina-ime { font-size: 15px; font-weight: 800; }
.mascot-trgovina.je-uskoro { opacity: .55; cursor: default; }
a.mascot-trgovina:hover { background: #1e293b; }
a.mascot-trgovina:focus-visible { outline: 2px solid var(--ing-plava); outline-offset: 2px; }