/* LCARS sloj (audit 2026-10-17, odjeljak 5). Okvir ima vlastitu paletu
   (html[data-okvir], postavka "okvir"); platno citaca (tekst, PDF, korice)
   zadrzava paletu papir/krem/noc iz stil.css.
   Ucitava se poslije stil.css i nadjacava samo okvir. */

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

:root {
  --lc-okvir: #0b0f17;
  --lc-okvir2: #151c2a;
  --lc-ink: #f1f5f9;
  --lc-ink2: #cbd5e1;
  --lc-mut: #94a3b8;
  --lc-edge: #5b6880;
  --lc-amber: #ff9c42;
  --lc-peach: #ffb877;
  --lc-blue: #6fa7e8;
  --lc-lav: #9e93e8;
  --lc-teal: #41d6a9;
  --lc-red: #ed5a4c;
  --lc-mauve: #cc6fbe;
  --lc-on: #0a0d14;
  --lc-staza: #263042;
  --lc-crta: #222b3a;
  --font-lc: Antonio, "Arial Narrow", "Roboto Condensed", sans-serif;
  --tap: 44px;
  --tap-prim: 48px;
  --z-okvir: 10;
  --z-panel: 20;
  --z-dijalog: 30;
  --z-obavijest: 40;
  --t: 120ms;
  --lakat-w: 88px;
  --lakat-h: 60px;
  /* platno: novi tokeni (VIS-01, VIS-02) */
  --priguseno: #595f57;
  --edge-platno: #84897f;
  --greska: #8b2e1a;
  --napredak: #243028;
  --traka: #0b0f17;
  --krom: #f1f5f9;
}
body.noc {
  --priguseno: #9aa396;
  --edge-platno: #5f6b66;
  --greska: #ff8a73;
  --napredak: #dde4d8;
  --traka: #0b0f17;
}
body.bijela { --priguseno: #595f57; --edge-platno: #84897f; }

html, body { background: var(--lc-okvir); }
body:not(.citam) { background: var(--lc-okvir); color: var(--lc-ink); }
body:not(.citam) #app { background: var(--lc-okvir); }

/* --- Natpisi --- */
.lc-natpis, .pilula, .cip, .lc-glava h1, .lc-h2, .polica-h, .lc-sekcija h2 {
  font-family: var(--font-lc);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* --- Zaglavlje s laktom --- */
.lc-glava {
  display: flex;
  align-items: stretch;
  padding-top: var(--safe-top);
  background: var(--lc-okvir);
  flex-shrink: 0;
  min-height: calc(var(--lakat-h) + var(--safe-top));
}
.lc-lakat {
  width: var(--lakat-w);
  flex-shrink: 0;
  background: var(--lc-amber);
  border-top-left-radius: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 8px 14px;
  color: var(--lc-on);
}
.lc-lakat button {
  background: transparent;
  border: 0;
  color: var(--lc-on);
  font: 600 18px/1 var(--font-lc);
  min-width: var(--tap);
  min-height: var(--tap);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 0;
}
.lc-broj { font: 600 14px/1 var(--font-lc); letter-spacing: 0.05em; padding-bottom: 6px; }
.lc-desno { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.lc-desno::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 30px;
  background: var(--lc-amber);
}
.lc-crta { height: 12px; background: var(--lc-amber); flex-shrink: 0; }
.lc-red {
  position: relative;
  z-index: 1;
  flex: 1;
  background: var(--lc-okvir);
  border-top-left-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 18px;
  min-width: 0;
}
.lc-glava h1 {
  flex: 1;
  min-width: 2em;
  font-size: 24px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--lc-ink);
}
.lc-stanje {
  font: 600 12px/1.2 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lc-teal);
  white-space: nowrap;
}

/* --- Pilule i cipovi --- */
.lc-pilule {
  display: flex;
  gap: 8px;
  padding: 10px 14px 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.pilula {
  font-size: 16px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--lc-peach);
  color: var(--lc-on);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
}
.lc-pilule .pilula { flex: 1 1 0; }
.pilula.prim { background: var(--lc-amber); min-height: var(--tap-prim); }
.pilula.info { background: var(--lc-blue); }
.pilula.glas { background: var(--lc-lav); }
.pilula.uspjeh { background: var(--lc-teal); }
.pilula.audio { background: var(--lc-mauve); }
.pilula.opasno { background: transparent; color: var(--lc-red); border: 2px solid var(--lc-red); }
.pilula.obris { background: transparent; color: var(--lc-ink); border: 1px solid var(--lc-edge); }
.pilula[aria-pressed="true"] { background: var(--lc-amber); color: var(--lc-on); border-color: var(--lc-amber); }
.pilula:disabled, .pilula[aria-disabled="true"] {
  background: transparent;
  color: var(--lc-mut);
  border: 1px dashed var(--lc-edge);
  cursor: not-allowed;
}
.pilula.mala { min-height: 36px; font-size: 14px; padding: 0 12px; }

.cipovi {
  display: flex;
  gap: 8px;
  padding: 6px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.cipovi::-webkit-scrollbar { display: none; }
.cip {
  flex: 0 0 auto;
  font-size: 13px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lc-edge);
  background: transparent;
  color: var(--lc-ink2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cip .n { color: var(--lc-mut); font-variant-numeric: tabular-nums; }
.cip[aria-pressed="true"] { background: var(--lc-amber); border-color: var(--lc-amber); color: var(--lc-on); }
.cip[aria-pressed="true"] .n { color: var(--lc-on); }
.cip.dodaj { border-style: dashed; }
.cip[aria-expanded="true"], .cip[data-ima] { border-color: var(--lc-amber); color: var(--lc-amber); }
.cip[data-ima] .n { color: var(--lc-amber); }
.lc-alati {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.lc-alati .cipovi { padding: 0; }
.lc-select {
  font: 600 13px/1 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lc-edge);
  background: var(--lc-okvir);
  color: var(--lc-ink);
  cursor: pointer;
}
.lc-alati .lc-select { margin-left: auto; }
.lc-h2 {
  font-size: 13px;
  color: var(--lc-mut);
  padding: 14px 14px 4px;
}

/* --- Polica --- */
#policaTijelo { background: var(--lc-okvir); color: var(--lc-ink); }
.mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 18px 14px;
  padding: 8px 14px 20px;
}
#policaTijelo .mreza { padding: 8px 14px 20px; }
.kartica {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  min-width: 0;
}
.kartica .korice { border: 1px solid var(--lc-edge); background: var(--lc-okvir2); border-radius: 0; }
.korice .k-tekst { color: var(--lc-ink); }
.kartica .naslov {
  font-size: 14px;
  line-height: 1.25;
  color: var(--lc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kartica .meta { font-size: 12px; color: var(--lc-mut); line-height: 1.3; }
.kartica .meta .fmt { font: 600 12px/1 var(--font-lc); letter-spacing: 0.05em; color: var(--lc-ink2); }
.kartica .gotovo-znak { color: var(--lc-teal); font-weight: 700; }
.kartica .sken-znak { color: var(--lc-peach); }
.kartica .traka-pct, .lc-napredak {
  height: 4px;
  background: var(--lc-staza);
  margin: 0;
}
.kartica .traka-pct > i, .lc-napredak > i { display: block; height: 100%; background: var(--lc-blue); }
.kartica.gotova .traka-pct > i { background: var(--lc-teal); }
.rail .kartica { width: 104px; flex: 0 0 104px; }
.rail { padding: 8px 14px 18px; }
.polica-h { font-size: 13px; color: var(--lc-mut); padding: 16px 14px 4px; }
.prazno { color: var(--lc-ink2); font-size: 15px; padding: 40px 24px; text-align: center; }
.prazno .pilula { margin-top: 16px; }

.nastavi-bar {
  margin: 8px 14px 6px;
  padding: 0 12px 0 0;
  min-height: 84px;
  background: var(--lc-okvir2);
  color: var(--lc-ink);
  border: 1px solid var(--lc-edge);
  border-left: 10px solid var(--lc-peach);
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 28px);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nastavi-cover { width: 50px; height: 72px; margin-left: 10px; background: var(--lc-okvir); border: 1px solid var(--lc-edge); }
.nastavi-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nastavi-tekst .lc-natpis { font-size: 12px; color: var(--lc-peach); }
.nastavi-tekst .ime { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nastavi-tekst .mini-meta { font-size: 12px; color: var(--lc-ink2); opacity: 1; }
.nastavi-bar .pilula { flex-shrink: 0; }

.lista .red, button.red {
  width: 100%;
  font: inherit;
  color: var(--lc-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lc-crta);
  text-align: left;
  min-height: 56px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.red .broj, .red .rb { color: var(--lc-mut); font-variant-numeric: tabular-nums; }
.red .ime { flex: 1; min-width: 0; font-size: 16px; }
.autor-cover { background: var(--lc-okvir2); }
.autor-kad { color: var(--lc-mut); }
.red[aria-current="true"] { background: var(--lc-okvir2); box-shadow: inset 6px 0 0 var(--lc-blue); }

.trazi { padding: 6px 14px; border: 0; flex-shrink: 0; }
.trazi input, .lc-polje, .dijeli-forma input, .drive-blok input[type=text], #dijalog .dijalog-panel input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  min-height: var(--tap);
  padding: 8px 16px;
  border: 1px solid var(--lc-edge);
  border-radius: 999px;
  background: var(--lc-okvir);
  color: var(--lc-ink);
}
.trazi input::placeholder, .lc-polje::placeholder, .dijeli-forma input::placeholder { color: var(--lc-mut); }

/* --- Detalj knjige --- */
.knjiga-str { color: var(--lc-ink); }
.knjiga-glava { padding: 14px; gap: 16px; }
.knjiga-glava .korice { width: 112px; }
.knjiga-meta .naslov { font-size: 20px; line-height: 1.25; }
.knjiga-meta .meta, .knjiga-meta .serija { color: var(--lc-ink2); font-size: 14px; }
.knjiga-meta .oznake { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.oznaka {
  font: 600 12px/1 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--lc-edge);
  color: var(--lc-ink2);
}
.oznaka.uspjeh { border-color: var(--lc-teal); color: var(--lc-teal); }
.oznaka.upozorenje { border-color: var(--lc-peach); color: var(--lc-peach); }
.knjiga-saz { color: var(--lc-ink2); font-size: 14px; line-height: 1.5; max-height: 9em; }
.lc-akcije { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 12px; }
.lc-akcije .lc-select { text-transform: none; font-family: var(--font-ui); font-weight: 400; letter-spacing: 0; }
.lc-sekcija { padding: 8px 14px 12px; border-top: 1px solid var(--lc-crta); }
.lc-sekcija h2 { font-size: 14px; color: var(--lc-mut); margin: 6px 0 8px; }
.lc-sekcija .napomena, .napomena { font-size: 13px; color: var(--lc-ink2); line-height: 1.45; }
.tag-red { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.dijeli { padding: 0; border: 0; }
.dijeli-forma { display: flex; gap: 8px; margin-top: 10px; }
.dijeli-forma input { flex: 1; min-width: 0; }
.lc-popis { list-style: none; margin: 8px 0 0; padding: 0; }
.lc-popis li { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 14px; border-bottom: 1px solid var(--lc-crta); }
.lc-popis li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sljedeca-hint { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--lc-ink2); }
.sljedeca-hint span { flex: 1; min-width: 0; }

/* --- Postavke (puni panel ispod zaglavlja) --- */
.lc-panel {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-okvir);
  color: var(--lc-ink);
  padding-bottom: calc(24px + var(--safe-bottom));
}
.lc-panel label.lc-red2, .lc-red2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  font-size: 15px;
}
.lc-red2 select, .lc-panel select {
  font: inherit;
  font-size: 15px;
  min-height: var(--tap);
  max-width: 62%;
  padding: 0 12px;
  border: 1px solid var(--lc-edge);
  border-radius: 999px;
  background: var(--lc-okvir);
  color: var(--lc-ink);
}
.lc-panel .cipovi { padding: 4px 0; flex-wrap: wrap; overflow: visible; }
.precaci { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--lc-ink2); }
.precaci td { padding: 6px 0; border-bottom: 1px solid var(--lc-crta); }
.precaci td:first-child { font: 600 14px/1 var(--font-lc); letter-spacing: 0.05em; color: var(--lc-ink); width: 40%; }

/* --- Prijava --- */
.login { max-width: 380px; margin: 6vh auto 0; padding: 20px; color: var(--lc-ink); }
.login h2 { font: 600 22px/1.2 var(--font-lc); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.login p { color: var(--lc-ink2); font-size: 14px; }
.login label { color: var(--lc-ink2); font-size: 14px; margin: 14px 0 6px; }
.login input { min-height: var(--tap); border: 1px solid var(--lc-edge); border-radius: 999px; padding: 8px 16px; color: var(--lc-ink); background: var(--lc-okvir); font-size: 16px; }
.login form button.pilula { width: 100%; margin-top: 20px; }
.login .err { color: var(--lc-red); font-size: 14px; }
.login a { color: var(--lc-blue); }

/* --- Mini player --- */
.mini {
  background: var(--lc-okvir2);
  color: var(--lc-ink);
  border-top: 0;
  z-index: var(--z-panel);
  padding: 7px 10px calc(8px + var(--safe-bottom));
  min-height: 72px;
}
.mini-napredak { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lc-staza); }
.mini-napredak > i { display: block; height: 100%; background: var(--lc-mauve); }
.mini-otvori { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.mini-meta { color: var(--lc-ink2); font-size: 12px; opacity: 1; font-variant-numeric: tabular-nums; }
.mini .pilula { min-width: var(--tap); padding: 0 14px; }
.ekran.ima-mini #policaTijelo, .ekran.ima-mini .lc-panel { padding-bottom: calc(84px + var(--safe-bottom)); }

/* --- Obavijest (jedan sloj, iznad okvira) --- */
.err-toast, .rad-toast { display: none !important; }
.obavijest {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: var(--z-obavijest);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 4px 4px 4px 16px;
  border-radius: 22px;
  background: var(--lc-okvir2);
  color: var(--lc-ink);
  border: 1px solid var(--lc-edge);
  border-left: 8px solid var(--lc-blue);
  font-size: 14px;
  line-height: 1.35;
  max-width: 640px;
  margin: 0 auto;
}
.obavijest[hidden] { display: none; }
.obavijest.obav-greska { border-left-color: var(--lc-red); }
.obavijest.obav-napredak { border-left-color: var(--lc-teal); }
.obav-tekst { flex: 1; min-width: 0; padding: 8px 0; }
.obav-x, .obav-akcija {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lc-ink);
  font-size: 20px;
  cursor: pointer;
}
.obav-akcija { background: var(--lc-amber); color: var(--lc-on); font: 600 14px/1 var(--font-lc); letter-spacing: 0.05em; text-transform: uppercase; padding: 0 16px; }

/* --- Dijalozi i paneli kraja --- */
#dijalog { z-index: var(--z-dijalog); background: rgba(5, 7, 11, 0.72); }
.kraj-panel {
  background: var(--lc-okvir);
  color: var(--lc-ink);
  border: 1px solid var(--lc-edge);
  border-top: 10px solid var(--lc-amber);
  border-radius: 0 0 18px 18px;
  padding: 18px;
  z-index: var(--z-dijalog);
}
.kraj-naslov { font: 600 20px/1.2 var(--font-lc); letter-spacing: 0.05em; text-transform: uppercase; }
.kraj-panel .meta, .kraj-rail-h { color: var(--lc-ink2); }
.kraj-panel button, #dijalog .dijalog-panel button {
  font: 600 15px/1 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: var(--tap);
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--lc-amber);
  color: var(--lc-on);
  margin: 8px 4px 0;
  cursor: pointer;
}
.kraj-panel #btnKrajNe, .kraj-panel #btnNastaviNe, #dijalog #dijalogNe, #dijalog #m3Ne, #dijalog #xdNe {
  background: transparent;
  color: var(--lc-ink);
  border: 1px solid var(--lc-edge);
}
#dijalog #dijalogOk.opasno { background: var(--lc-red); color: var(--lc-on); }
.dijalog-gumbi { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kraj-karta { color: var(--lc-ink) !important; }
#overlay.modalno { background: rgba(5, 7, 11, 0.6); }

/* --- Fokus --- */
:focus-visible { outline: 3px solid var(--lc-blue); outline-offset: 2px; }
.pilula:focus-visible, .cip:focus-visible { outline-color: var(--lc-ink); }

/* --- Citac: okvir oko platna --- */
.citac::before { background: var(--lc-okvir); }
.chrome { background: var(--lc-okvir); color: var(--lc-ink); z-index: var(--z-okvir); }
.chrome.gore { padding: calc(3px + var(--safe-top)) 6px 3px; gap: 5px; min-height: calc(50px + var(--safe-top)); border-bottom: 3px solid var(--lc-amber); }
.chrome .naslov { font: 600 15px/1.2 var(--font-lc); letter-spacing: 0.04em; text-transform: uppercase; color: var(--lc-ink); }
.chrome-nav, .chrome-alati { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.chrome-alati { padding-left: 5px; border-left: 1px solid var(--lc-edge); }
.chrome button, .chrome select {
  min-width: var(--tap);
  min-height: var(--tap);
  border-radius: 999px;
  border: 0;
  padding: 0 9px;
  font: 600 14px/1 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.chrome.gore button { background: var(--lc-okvir2); color: var(--lc-ink); border: 1px solid var(--lc-edge); }
.chrome.gore #btnNazad { background: var(--lc-amber); color: var(--lc-on); border: 0; font-size: 20px; }
.chrome.gore #btnToc { background: var(--lc-blue); color: var(--lc-on); border: 0; }
.chrome.gore #btnPlayKrom { background: var(--lc-lav); color: var(--lc-on); border: 0; }
.chrome.gore #btnPlayKrom[aria-disabled="true"] { background: transparent; color: var(--lc-mut); border: 1px dashed var(--lc-edge); }
.chrome.dolje { padding: 5px 8px calc(5px + var(--safe-bottom)); border-top: 3px solid var(--lc-amber); }
.segmenti { display: flex; gap: 3px; height: 5px; cursor: pointer; margin-bottom: 3px; }
.segmenti i { flex: 1; background: var(--lc-staza); }
.segmenti i.pun { background: var(--lc-amber); }
.segmenti i.dio { background: linear-gradient(to right, var(--lc-amber) var(--d, 50%), var(--lc-staza) var(--d, 50%)); }
.chrome.dolje .foot-red { min-height: var(--tap); font: 600 13px/1.2 var(--font-lc); letter-spacing: 0.04em; color: var(--lc-ink2); gap: 8px; font-variant-numeric: tabular-nums; }
.chrome.dolje .foot-red #footLijevo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrome.dolje #footPct { color: var(--lc-ink); }
.zz-sel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--lc-okvir2);
  color: var(--lc-ink);
  border: 1px solid var(--lc-edge) !important;
  text-align: center;
  min-width: 72px;
  min-height: var(--tap);
}
.zz-sel.aktivan { background: var(--lc-lav); color: var(--lc-on); border-color: var(--lc-lav) !important; }
/* Mirni okvir: samo linija napretka i kutna oznaka */
.mirna-linija { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; z-index: 4; pointer-events: none; }
.mirna-linija > i { display: block; height: 100%; background: var(--napredak); opacity: 0.55; }
.mirna-oznaka { position: absolute; top: calc(var(--safe-top) + 0px); left: 0; width: 4px; height: 28px; background: var(--lc-amber); z-index: 4; pointer-events: none; }
.citac.okvir-vidljiv .mirna-linija, .citac.okvir-vidljiv .mirna-oznaka { display: none; }
.uputa-zone {
  position: absolute;
  inset: 0;
  z-index: var(--z-dijalog);
  display: grid;
  grid-template-columns: 28% 1fr 28%;
  background: rgba(5, 7, 11, 0.78);
  color: var(--lc-ink);
  font: 600 18px/1.3 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.uputa-zone > div { display: flex; align-items: center; justify-content: center; padding: 10px; border: 2px dashed var(--lc-edge); margin: 70px 4px; }
.uputa-zone > div:nth-child(2) { border-color: var(--lc-amber); }
.uputa-zone p { position: absolute; left: 0; right: 0; bottom: 24px; font-size: 15px; color: var(--lc-ink2); }

/* Dock glasa: pilula u okviru, iznad donje trake */
.dock {
  background: var(--lc-okvir);
  color: var(--lc-ink);
  z-index: var(--z-okvir);
  padding: 5px 8px;
  gap: 5px;
  border-top: 1px solid var(--lc-edge);
}
.dock button, .dock select {
  min-height: var(--tap);
  min-width: var(--tap);
  border-radius: 999px;
  border: 0;
  background: var(--lc-okvir2);
  color: var(--lc-ink);
  font: 600 13px/1 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 10px;
  cursor: pointer;
}
.dock #btnPlay, .dock #btnXttsDock { background: var(--lc-lav); color: var(--lc-on); flex: 1 1 120px; }
.audio-citac .dock #btnPlay { background: var(--lc-mauve); }
.dock button.dock-motor { background: transparent; border: 1px solid var(--lc-edge); color: var(--lc-ink2); font-size: 13px; opacity: 1; }
.dock .status { font: 600 12px/1.2 var(--font-lc); letter-spacing: 0.04em; color: var(--lc-ink2); opacity: 1; }
.xtts-seek { background: var(--lc-okvir); color: var(--lc-ink); z-index: var(--z-okvir); padding: 10px 16px 4px; }
.xtts-seek input[type=range], .audio-seek input[type=range] { height: 28px; background: transparent; }
input[type=range].lc-klizac, .xtts-seek input[type=range], .audio-seek #rngSeek, .panel input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.xtts-seek input[type=range]::-webkit-slider-runnable-track, .audio-seek #rngSeek::-webkit-slider-runnable-track, .panel input[type=range]::-webkit-slider-runnable-track { height: 12px; background: var(--lc-staza); border-radius: 6px; }
.xtts-seek input[type=range]::-moz-range-track, .audio-seek #rngSeek::-moz-range-track, .panel input[type=range]::-moz-range-track { height: 12px; background: var(--lc-staza); border-radius: 6px; }
.xtts-seek input[type=range]::-webkit-slider-thumb, .audio-seek #rngSeek::-webkit-slider-thumb, .panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; border: 3px solid var(--lc-okvir); background: var(--lc-amber);
}
.xtts-seek input[type=range]::-moz-range-thumb, .audio-seek #rngSeek::-moz-range-thumb, .panel input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--lc-okvir); background: var(--lc-amber);
}
.xtts-seek .audio-vrijeme, .audio-vrijeme { font: 600 13px/1 var(--font-lc); letter-spacing: 0.04em; color: var(--lc-ink2); font-variant-numeric: tabular-nums; opacity: 1; }

/* Aa kao donji list s dva taba */
.panel {
  background: var(--lc-okvir);
  color: var(--lc-ink);
  border: 1px solid var(--lc-edge);
  z-index: var(--z-panel);
}
#panelAa {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 560px;
  margin: 0 auto;
  max-height: 80%;
  overflow: auto;
  padding: 0 16px calc(16px + var(--safe-bottom));
  border-top: 10px solid var(--lc-blue);
  border-radius: 18px 18px 0 0;
}
#panelAa .ladica-glava, .ladica .ladica-glava { background: var(--lc-okvir); border-bottom: 1px solid var(--lc-crta); padding: 8px 0; margin: 0 0 6px; }
.ladica-glava span { font: 600 15px/1 var(--font-lc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--lc-ink); }
.ladica-glava button, .panel .ladica-glava button {
  min-height: var(--tap);
  min-width: var(--tap);
  border-radius: 999px;
  border: 1px solid var(--lc-edge);
  background: transparent;
  color: var(--lc-ink);
  font: 600 14px/1 var(--font-lc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.aa-tabovi { display: flex; gap: 8px; padding: 4px 0 8px; }
.aa-tabovi .cip { flex: 1; justify-content: center; }
.panel label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 10px 0; font-size: 15px; }
.panel label.vodoravno { flex-direction: row; align-items: center; justify-content: space-between; min-height: var(--tap); }
.panel .lbl { display: flex; justify-content: space-between; }
.panel .rng-val { color: var(--lc-ink2); font-size: 14px; }
.panel input[type=range] { width: 100%; }
.panel select {
  min-height: var(--tap);
  border-radius: 999px;
  border: 1px solid var(--lc-edge);
  background: var(--lc-okvir);
  color: var(--lc-ink);
  font-size: 15px;
  padding: 0 12px;
}
.panel .pilula { margin: 6px 0; width: 100%; }

/* Ladica Sadrzaj */
.ladica {
  background: var(--lc-okvir);
  color: var(--lc-ink);
  border-right: 10px solid var(--lc-blue);
  z-index: var(--z-panel);
  padding-left: 0;
}
.ladica h2 { font: 600 14px/1 var(--font-lc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--lc-mut); padding: 14px 16px 6px; }
.ladica button { min-height: var(--tap); color: var(--lc-ink); }
.ladica button:hover, .ladica button.aktivan, .ladica button[aria-current="true"] { background: var(--lc-okvir2); }
.ladica button[aria-current="true"] { box-shadow: inset 6px 0 0 var(--lc-blue); }
.ladica .ob-x { color: var(--lc-ink2); min-width: var(--tap); }
.ladica .sazetak { color: var(--lc-ink2); }
.ladica .xtts-st { color: var(--lc-ink2); }
.ladica #btnDodajOb { margin: 8px 16px; width: calc(100% - 32px); }

/* Audioknjiga: platno ostaje papir, transport u okviru */
.audio-citac .dock { flex-direction: column; align-items: stretch; padding: 10px 14px; bottom: var(--chrome-d, 0px); }
.audio-citac .dock .transport { display: flex; gap: 10px; align-items: center; justify-content: center; }
.audio-citac .dock .transport #btnPlay { min-height: 56px; flex: 0 1 180px; font-size: 18px; }
.audio-citac .dock .transport #btnPrev, .audio-citac .dock .transport #btnNext { min-width: 60px; min-height: 52px; }
.audio-citac .dock .audio-cipovi { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.audio-citac .dock .audio-cipovi > * { flex: 0 1 auto; }
.audio-citac .dock .status { position: static; text-align: center; margin: 0; }
.audio-citac .dock .poglavlje-sel { width: 100%; max-width: none; margin: 0; background: var(--lc-okvir2); color: var(--lc-ink); border: 1px solid var(--lc-edge); text-transform: none; font-family: var(--font-ui); font-weight: 400; letter-spacing: 0; }
.audio-citac .chrome.dolje { background: var(--lc-okvir); color: var(--lc-ink2); }
/* Audio: klizac s vremenom vec pokazuje napredak, pa donja traka (segmenti,
   poglavlje, postotak) ne stoji stalno na ekranu. Tajmer je u Aa (Slusanje). */
.audio-citac .chrome.dolje { display: none; }
.audio-citac .dock { padding-bottom: calc(8px + var(--safe-bottom)); }
@media (min-width: 900px) {
  .audio-citac .dock { left: 50%; right: auto; width: min(640px, 100%); transform: translateX(-50%); border: 1px solid var(--lc-edge); border-bottom: 0; }
}
/* Korice audioknjige: platno zavrsava iznad izmjerenog docka (--dock-h),
   korica se smanji da stane cijela, bez rezanja. */
.platno.audio-platno { padding: 16px 20px calc(var(--dock-h, 168px) + 12px); }
.audio-korice-okvir { flex: 1 1 0; min-height: 0; margin-bottom: 10px; }
img.audio-cover {
  width: auto;
  height: 100%;
  max-width: min(88vw, 560px);
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
}
div.audio-cover { height: 100%; width: auto; max-height: 100%; max-width: min(88vw, 420px); aspect-ratio: 3 / 4.2; font-size: clamp(24px, 6vh, 56px); }
.platno.audio-platno { padding-bottom: 260px; }
.audio-seek { width: 100%; margin: 0; }

/* --- Desktop: lijevi LCARS stup --- */
.lc-stup { display: none; }
@media (min-width: 900px) {
  :root { --lakat-w: 200px; --lakat-h: 72px; }
  .ekran.biblio { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr; }
  .ekran.biblio > .lc-glava { grid-column: 1 / -1; }
  .ekran.biblio > .lc-stup { display: flex; grid-column: 1; grid-row: 2; min-height: 0; }
  .ekran.biblio > .lc-glavni { grid-column: 2; grid-row: 2; }
  .lc-stup {
    flex-direction: column;
    gap: 4px;
    background: var(--lc-okvir);
    padding: 4px 0 0;
    border-right: 0;
  }
  .lc-stup button {
    min-height: 56px;
    border: 0;
    margin-right: 16px;
    background: var(--lc-peach);
    color: var(--lc-on);
    font: 600 16px/1 var(--font-lc);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: right;
    padding: 0 14px 8px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    cursor: pointer;
  }
  .lc-stup button:nth-child(2) { background: var(--lc-blue); }
  .lc-stup button:nth-child(3) { background: var(--lc-lav); }
  .lc-stup button:nth-child(4) { background: var(--lc-mauve); }
  .lc-stup button[aria-current="true"] { background: var(--lc-amber); }
  .lc-stup .lc-ispuna { flex: 1; background: var(--lc-amber); margin-right: 16px; border-bottom-left-radius: 30px; min-height: 40px; }
  .lc-pilule .pilula { flex: 0 0 auto; }
  .ekran.biblio .lc-pilule .samo-mob { display: none; }
  .mreza, #policaTijelo .mreza { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 18px; }
  .nastavi-bar { max-width: 760px; }
  .chrome.gore #btnFs { display: inline-flex; }
}

/* --- E-ink (Kobo) --- */

/* --- Palete okvira (kao u klodtossu). Bez atributa = LCARS tamni. Na
   svijetlim paletama akcenti su tamniji i tekst na pilulama bijel, da kontrast
   ostane AA. --- */
html[data-okvir="klasicni"] {
  --lc-okvir: #000000; --lc-okvir2: #111111; --lc-ink: #ffffff; --lc-ink2: #ffcc99;
  --lc-mut: #a8a8c0; --lc-edge: #666688; --lc-amber: #ff9900; --lc-peach: #ffcc99;
  --lc-blue: #99ccff; --lc-lav: #cc99cc; --lc-teal: #99ccff; --lc-red: #cc6666;
  --lc-mauve: #cc99cc; --lc-on: #000000; --lc-staza: #222233; --lc-crta: #222233;
}
html[data-okvir="most"] {
  --lc-okvir: #060910; --lc-okvir2: #10161f; --lc-ink: #ece9e2; --lc-ink2: #c9cfd8;
  --lc-mut: #8d97a6; --lc-edge: #4a5568; --lc-amber: #ff9c42; --lc-peach: #ffb877;
  --lc-blue: #6fa7e8; --lc-lav: #9e93e8; --lc-teal: #41d6a9; --lc-red: #ed5a4c;
  --lc-mauve: #cc6fbe; --lc-on: #0a0d14; --lc-staza: #1c2430; --lc-crta: #1a212c;
}
html[data-okvir="lcars-svijetli"] {
  --lc-okvir: #e9e3d6; --lc-okvir2: #f5f0e6; --lc-ink: #141210; --lc-ink2: #2e2a24;
  --lc-mut: #5c564c; --lc-edge: #8a8274; --lc-amber: #b3630a; --lc-peach: #9a5a1a;
  --lc-blue: #1a6a98; --lc-lav: #7d5a9e; --lc-teal: #0b6e54; --lc-red: #b02a1e;
  --lc-mauve: #8f4686; --lc-on: #ffffff; --lc-staza: #d4ccbb; --lc-crta: #d4ccbb;
}
html[data-okvir="svijetla"] {
  --lc-okvir: #fcfaf5; --lc-okvir2: #f1ede4; --lc-ink: #1b1a17; --lc-ink2: #34322d;
  --lc-mut: #5f5b53; --lc-edge: #9a958b; --lc-amber: #984a00; --lc-peach: #8a4f12;
  --lc-blue: #2254d4; --lc-lav: #5b4fc0; --lc-teal: #0b6e54; --lc-red: #a52a1c;
  --lc-mauve: #8a3f80; --lc-on: #ffffff; --lc-staza: #e2ddd2; --lc-crta: #e2ddd2;
}
html[data-okvir="lcars-svijetli"], html[data-okvir="svijetla"] { color-scheme: light; }

body.eink {
  --lc-okvir: #ffffff;
  --lc-okvir2: #ffffff;
  --lc-ink: #000000;
  --lc-ink2: #000000;
  --lc-mut: #555555;
  --lc-edge: #000000;
  --lc-amber: #000000;
  --lc-peach: #ffffff;
  --lc-blue: #ffffff;
  --lc-lav: #ffffff;
  --lc-teal: #000000;
  --lc-red: #000000;
  --lc-mauve: #ffffff;
  --lc-on: #ffffff;
  --papir: #ffffff;
  --tinta: #000000;
  --priguseno: #555555;
  --edge-platno: #777777;
  --napredak: #000000;
  --tap: 52px;
  --tap-prim: 52px;
  --prored: 1.45;
  font-size: 18px;
}
body.eink .pilula, body.eink .cip, body.eink .chrome button, body.eink .dock button, body.eink .lc-stup button, body.eink .ladica-glava button, body.eink .kraj-panel button, body.eink #dijalog .dijalog-panel button {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
body.eink .pilula.prim, body.eink .cip[aria-pressed="true"], body.eink .pilula[aria-pressed="true"], body.eink .chrome.gore #btnNazad {
  background: #000 !important;
  color: #fff !important;
}
body.eink .cip[aria-pressed="true"] .n { color: #fff; }
body.eink .lc-lakat, body.eink .lc-crta, body.eink .lc-desno::before, body.eink .lc-stup .lc-ispuna { background: #fff; border: 4px solid #000; }
body.eink .lc-lakat { color: #000; }
body.eink .lc-lakat button { color: #000; }
body.eink .lc-crta { border-width: 0 0 4px; }
body.eink .lc-desno::before { display: none; }
body.eink .chrome.gore, body.eink .chrome.dolje { border-color: #000; }
body.eink .segmenti i { background: #fff; border: 1px solid #000; }
body.eink .segmenti i.pun { background: #000; }
body.eink .segmenti i.dio { background: #000; }
body.eink .kartica .traka-pct, body.eink .lc-napredak { background: #fff; border: 1px solid #000; height: 6px; }
body.eink .kartica .traka-pct > i, body.eink .lc-napredak > i { background: #000; }
body.eink .nastavi-bar { border: 2px solid #000; border-left: 10px solid #000; }
body.eink .obavijest { border: 2px solid #000; border-left-width: 8px; }
body.eink .platno.docx p, body.eink .platno { text-align: left; }
body.eink #btnPlayKrom, body.eink .dock, body.eink #glasZona, body.eink .mini, body.eink .glas-samo { display: none !important; }
body.eink .mirna-linija { height: 4px; }
body.eink .mirna-linija > i { opacity: 1; }
body.eink *, body.eink *::before, body.eink *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.eink .spin { display: none; }
body.eink .uputa-zone { background: rgba(255, 255, 255, 0.94); color: #000; }
body.eink .uputa-zone > div { border-color: #000; }

/* --- Pokret --- */
.pilula, .cip, .chrome button, .dock button { transition: opacity var(--t), transform var(--t); }
.pilula:active, .cip:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- PDF zum --- */
.platno.pdf-wrap.zum { pointer-events: auto; overflow: auto; touch-action: pan-x pan-y; }
.pdf-str { position: relative; }
.pdf-str .textLayer { position: absolute; inset: 0; overflow: hidden; opacity: 0.25; line-height: 1; pointer-events: none; }
.platno.pdf-wrap.zum .textLayer { pointer-events: auto; }
.pdf-str .textLayer span, .pdf-str .textLayer br { color: transparent; position: absolute; white-space: pre; transform-origin: 0 0; cursor: text; }
.pdf-str .textLayer ::selection { background: rgba(111, 167, 232, 0.5); }
.pdf-zum-red { display: flex; gap: 8px; align-items: center; }
.pdf-zum-red .pilula { flex: 1; margin: 0; }
.kartica.kostur .korice { background: var(--lc-okvir2); border-color: #222b3a; }
.kartica.kostur .naslov { background: var(--lc-okvir2); width: 70%; }
.nastavi-cover, .mini-cover, .autor-cover { overflow: hidden; }
.nastavi-cover .k-tekst, .mini-cover .k-tekst, .autor-cover .k-tekst { display: none; }
.nastavi-cover img, .mini-cover img, .autor-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sljedeca-hint { border: 0; }

.lc-glavni { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.citac .dock { bottom: var(--traka-d, 0px); }
.citac .xtts-seek { bottom: calc(var(--traka-d, 0px) + var(--dock-h, 0px)); }
.chrome.gore #btnFs { display: none; }
@media (min-width: 900px) { .chrome.gore #btnFs { display: inline-flex; align-items: center; } }
.audio-citac .dock { bottom: var(--traka-d, 0px); }
.citac.pdf-zum .tap-c { display: none; }
.citac.pdf-zum .tap-l, .citac.pdf-zum .tap-d { width: 10%; }
.citac.pdf-zum .platno { z-index: 2; }
body.citam { background: var(--papir); color: var(--tinta); }
.citac .platno { background: var(--papir); }
.panel .cip { background: transparent; color: var(--lc-ink2); border: 1px solid var(--lc-edge); padding: 0 14px; }
.panel .cip[aria-pressed="true"] { background: var(--lc-amber); color: var(--lc-on); border-color: var(--lc-amber); }
.panel .pilula.obris { background: transparent; color: var(--lc-ink); }
.panel .pilula.uspjeh { background: var(--lc-teal); color: var(--lc-on); }
.ladica .pilula.prim { background: var(--lc-amber); color: var(--lc-on); text-align: center; }
.mini-cover { width: 40px; height: 56px; background: var(--lc-okvir); border: 1px solid var(--lc-edge); }
.mini-tekst { display: flex; flex-direction: column; min-width: 0; }
.mini-naslov { color: var(--lc-ink); }
.audio-ime, .audio-tko, .audio-pog { color: var(--tinta); }
.audio-tko, .audio-pog { color: var(--priguseno); font-size: 14px; }
.audio-cover { border-color: var(--edge-platno); }
.login form button.pilula { font: 600 18px/1 var(--font-lc); letter-spacing: 0.05em; text-transform: uppercase; background: var(--lc-amber); color: var(--lc-on); padding: 0 18px; }