/* Festival-S Operativa — radni prostor ekipe. Iste boje i fontovi kao fs.css; gušći raspored, mobitel prvi.
   Na mobitelu donja traka s 5 modula + „Više"; od 1080 px bočni izbornik. Pomoć je uvijek dolje desno. */

.op-tijelo .podnozje { display: none; }
.op-tijelo main { min-height: calc(100svh - var(--zaglavlje)); }
.op { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--rub) 120px; }
.op-ucitavanje { display: flex; align-items: center; gap: 12px; padding: 48px 0; color: var(--tekst-2); }
.op-vrtuljak { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--crta-2); border-top-color: var(--cijan); animation: op-vrti .8s linear infinite; }
@keyframes op-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .op-vrtuljak { animation: none; } }

/* ── raspored ── */
.op-okvir { display: grid; gap: 20px; padding-top: 16px; }
.op-bok { display: none; }
@media (min-width: 1080px) {
  .op { padding-bottom: 60px; }
  .op-okvir { grid-template-columns: 232px minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .op-bok { display: block; position: sticky; top: calc(var(--zaglavlje) + 16px); align-self: start; max-height: calc(100svh - var(--zaglavlje) - 32px); overflow: auto; }
}
.op-bok nav { display: grid; gap: 2px; }
.op-bok a, .op-vise a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--tekst-2); font-weight: 650; font-size: 14.5px; }
.op-bok a:hover, .op-vise a:hover { background: var(--noc-2); color: var(--tekst); }
.op-bok a[aria-current="page"] { background: var(--noc-2); color: var(--tekst); box-shadow: inset 3px 0 0 var(--cijan); }
.op-bok svg, .op-dno svg, .op-vise svg { width: 19px; height: 19px; flex: none; }
.op-bok .op-bok-naslov { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); padding: 14px 12px 6px; }
.op-broj { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--magenta); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.op-broj:empty { display: none; }

/* donja traka (mobitel/tablet) */
.op-dno { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(7, 11, 34, .98); border-top: 1px solid var(--crta); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.op-dno a, .op-dno button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--tekst-3); font-size: 11px; font-weight: 700; position: relative; border-radius: 10px; }
.op-dno [aria-current="page"] { color: var(--tekst); }
.op-dno [aria-current="page"]::after { content: ''; position: absolute; top: -6px; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--cijan); }
.op-dno .op-broj { position: absolute; top: 0; right: calc(50% - 22px); margin: 0; min-width: 17px; height: 17px; font-size: 10px; }
@media (min-width: 1080px) { .op-dno { display: none; } }
.op-vise { position: fixed; inset: 0; z-index: 75; display: none; background: rgba(3, 5, 18, .7); }
.op-vise.otvoren { display: block; }
.op-vise > div { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80svh; overflow: auto; background: var(--noc-1); border-top: 1px solid var(--crta-2); border-radius: 20px 20px 0 0; padding: 16px 12px calc(20px + env(safe-area-inset-bottom)); }
.op-vise nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* ── zaglavlje aplikacije ── */
.op-vrh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0 6px; border-bottom: 1px solid var(--crta); margin-bottom: 4px; }
.op-vrh-dog { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.op-vrh-dog select { max-width: 100%; font: 700 17px/1.25 var(--f-t); background: transparent; border: 0; color: var(--tekst); padding: 2px 26px 2px 0; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C3C9E8' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; text-overflow: ellipsis; }
.op-vrh-dog select:focus-visible { outline: 2px solid var(--cijan); }
.op-vrh-dog small { color: var(--tekst-3); font-size: 12.5px; }
.op-vrh-desno { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.op-ikona-gumb { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--crta); background: var(--noc-1); color: var(--tekst-2); }
.op-ikona-gumb:hover { color: var(--tekst); border-color: var(--crta-2); }
.op-ikona-gumb svg { width: 19px; height: 19px; }
.op-ikona-gumb .op-broj { position: absolute; top: -5px; right: -5px; margin: 0; }
.op-ja { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 12px; border: 1px solid var(--crta); background: var(--noc-1); font-weight: 700; font-size: 14px; color: var(--tekst-2); }
.op-ja i { width: 28px; height: 28px; border-radius: 9px; background: var(--noc-3); display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--tekst); font-size: 13px; }
.op-ja span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .op-ja span { display: none; } .op-ja { padding: 0 6px; } }
.op-uloge { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.op-uloga { font-size: 12px; font-weight: 750; padding: 3px 9px; border-radius: 999px; background: var(--noc-2); border: 1px solid var(--crta-2); color: var(--tekst-2); }
.op-uloga.primjer { border-color: rgba(255, 200, 87, .5); color: var(--upoz); }

/* ── naslov modula ── */
.op-glava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 18px 0 16px; }
.op-glava h1 { font: 700 clamp(22px, 4.4vw, 30px)/1.12 var(--f-d); letter-spacing: -.02em; margin: 0; }
.op-glava p { margin: 6px 0 0; color: var(--tekst-3); font-size: 14px; }
.op-glava .gumbi { gap: 8px; }

/* ── sastavni dijelovi ── */
.op-mreza { display: grid; gap: 14px; }
@media (min-width: 760px) { .op-mreza.dva { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-mreza.tri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .op-mreza.cetiri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1279px) { .op-mreza.cetiri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.op-kartica { border-radius: var(--r); background: var(--noc-1); border: 1px solid var(--crta); padding: 16px; min-width: 0; }
.op-kartica > h2, .op-kartica > header h2 { font-size: 15px; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.op-kartica > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.op-kartica > header h2 { margin: 0; }
.op-kartica.istaknuta { border-color: rgba(24, 210, 255, .45); background: linear-gradient(180deg, rgba(24, 210, 255, .06), transparent 60%), var(--noc-1); }
.op-kartica.upozorenje { border-color: rgba(255, 200, 87, .45); }
.op-kartica.opasnost { border-color: rgba(255, 92, 124, .5); }
.op-brojka { display: grid; gap: 2px; }
.op-brojka b { font: 700 26px/1.05 var(--f-d); }
.op-brojka small { color: var(--tekst-3); font-size: 12.5px; }
.op-brojke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--crta); border: 1px solid var(--crta); border-radius: var(--r); overflow: hidden; }
.op-brojke > div { background: var(--noc-1); padding: 14px 16px; }
@media (min-width: 760px) { .op-brojke { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.op-brojke b { display: block; font: 700 24px/1.1 var(--f-d); }
.op-brojke small { color: var(--tekst-3); font-size: 12.5px; }
.op-brojke .ok b { color: var(--ok); } .op-brojke .upoz b { color: var(--upoz); } .op-brojke .los b { color: var(--greska); }

.op-lista { display: grid; gap: 0; }
.op-red { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--crta); }
.op-red:first-child { border-top: 0; }
.op-red.klik { cursor: pointer; border-radius: 10px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.op-red.klik:hover { background: var(--noc-2); }
.op-red b { font-weight: 750; display: block; overflow-wrap: anywhere; }
.op-red small, .op-sitno { color: var(--tekst-3); font-size: 13px; }
.op-red .desno { text-align: right; display: grid; justify-items: end; gap: 4px; }
.op-red.zatamni { opacity: .55; }
.op-vrijeme { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--tekst); white-space: nowrap; }

.op-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--noc-2); color: var(--tekst-2); border: 1px solid var(--crta-2); white-space: nowrap; }
.op-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.op-st.ok { color: #9DF2CB; border-color: rgba(61, 220, 151, .4); }
.op-st.upoz { color: #FFE0A3; border-color: rgba(255, 200, 87, .45); }
.op-st.los { color: #FFC2CF; border-color: rgba(255, 92, 124, .5); }
.op-st.info { color: #A9E9FF; border-color: rgba(24, 210, 255, .4); }
.op-st.siva { color: var(--tekst-3); }
.op-st.ljub { color: #D4BEFF; border-color: rgba(123, 58, 240, .5); }

.op-integracija { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 0; border-top: 1px solid var(--crta); }
.op-integracija:first-child { border-top: 0; }

.op-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.op-filtri select, .op-filtri input { min-height: 38px; padding: 6px 10px; font-size: 14px; width: auto; max-width: 100%; }
.op-cipovi { display: flex; flex-wrap: wrap; gap: 6px; }
.op-cipovi button { border: 1px solid var(--crta-2); background: var(--noc-1); color: var(--tekst-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.op-cipovi button[aria-pressed="true"] { background: var(--tekst); color: var(--noc); border-color: var(--tekst); }

.op-dan { margin: 22px 0 8px; font: 700 13px/1 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--cijan); }
.op-stavka { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--crta); border-radius: 14px; background: var(--noc-1); margin-bottom: 8px; cursor: pointer; }
.op-stavka:hover { border-color: var(--crta-2); }
.op-stavka.otkazano { opacity: .55; text-decoration: line-through; }
.op-stavka.sukob { border-color: rgba(255, 200, 87, .55); }
.op-stavka .od { font: 800 16px/1.1 var(--f-t); font-variant-numeric: tabular-nums; }
.op-stavka .do { color: var(--tekst-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.op-stavka b { display: block; font-weight: 750; }
.op-stavka small { color: var(--tekst-3); font-size: 13px; }
.op-kat { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* zadaci kao ploča (računalo) ili popis (mobitel) */
.op-ploca { display: grid; gap: 12px; }
@media (min-width: 1180px) { .op-ploca { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }
.op-stupac { background: var(--noc-1); border: 1px solid var(--crta); border-radius: var(--r); padding: 10px; min-width: 0; }
.op-stupac h3 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin: 2px 4px 10px; display: flex; justify-content: space-between; }
.op-zadatak { background: var(--noc-2); border: 1px solid var(--crta); border-radius: 12px; padding: 10px 11px; margin-bottom: 8px; cursor: pointer; }
.op-zadatak:hover { border-color: var(--crta-2); }
.op-zadatak b { font-size: 14px; font-weight: 750; display: block; overflow-wrap: anywhere; }
.op-zadatak small { font-size: 12px; color: var(--tekst-3); display: block; margin-top: 4px; }
.op-zadatak.kasni { box-shadow: inset 3px 0 0 var(--greska); }
.op-zadatak.prijava { box-shadow: inset 3px 0 0 var(--upoz); }
.op-prioritet { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.op-prioritet.hitan { color: var(--greska); } .op-prioritet.visok { color: var(--upoz); } .op-prioritet.srednji { color: var(--tekst-3); } .op-prioritet.nizak { color: var(--tekst-3); opacity: .7; }

/* smjena — kartica za redara / volontera */
.op-smjena { border-radius: 18px; border: 1px solid var(--crta-2); background: var(--noc-1); padding: 18px; display: grid; gap: 14px; }
.op-smjena .kad { font: 700 clamp(22px, 5vw, 30px)/1.1 var(--f-d); }
.op-smjena dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.op-smjena dt { color: var(--tekst-3); font-size: 13px; font-weight: 700; }
.op-smjena dd { margin: 0; overflow-wrap: anywhere; }
.op-tel { color: var(--cijan); font-weight: 750; }

/* hitno */
.op-hitno-112 { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 92, 124, .55); background: rgba(255, 92, 124, .08); }
.op-hitno-112 a { font: 700 28px/1 var(--f-d); color: #fff; background: #C8243F; border-radius: 12px; padding: 10px 16px; }
.op-postupak { white-space: pre-line; color: var(--tekst-2); line-height: 1.6; font-size: 15px; }

/* obrasci i dijalog */
.op-dijalog { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; background: rgba(3, 5, 18, .72); }
@media (min-width: 760px) { .op-dijalog { align-items: center; justify-items: center; padding: 24px; } }
.op-dijalog > form, .op-dijalog > div { background: var(--noc-1); border: 1px solid var(--crta-2); width: 100%; max-height: 92svh; overflow: auto; border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--sjena); }
@media (min-width: 760px) { .op-dijalog > form, .op-dijalog > div { max-width: 640px; border-radius: 20px; padding: 22px 24px; } .op-dijalog.sirok > form, .op-dijalog.sirok > div { max-width: 860px; } }
.op-dijalog h2 { font: 700 20px/1.2 var(--f-d); margin: 0 0 4px; padding-right: 40px; }
.op-dijalog .zatvori { position: absolute; }
.op-dijalog-vrh { position: relative; margin-bottom: 14px; }
.op-dijalog-vrh button { position: absolute; top: -4px; right: -6px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--crta); background: var(--noc-2); color: var(--tekst-2); display: grid; place-items: center; }
.op-dijalog-vrh button svg { width: 18px; height: 18px; }
.op-polja { display: grid; gap: 0 14px; }
@media (min-width: 760px) { .op-polja { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-polja .puno { grid-column: 1 / -1; } }
.op-polja .polje { margin-bottom: 12px; }
.op-polja small.pomoc { color: var(--tekst-3); font-size: 12.5px; }
.op-izbor { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow: auto; padding: 2px; }
.op-izbor label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--crta-2); font-size: 13px; color: var(--tekst-2); cursor: pointer; }
.op-izbor input { accent-color: var(--ljub); margin: 0; }
.op-izbor label:has(input:checked) { background: rgba(123, 58, 240, .18); border-color: var(--ljub); color: var(--tekst); }
.op-dijalog-dno { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 8px; position: sticky; bottom: -18px; background: var(--noc-1); padding: 10px 0 2px; }
.op-dijalog-dno .gumbi { gap: 8px; margin-left: auto; }
.gumb-opasno { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 92, 124, .6); color: #FFC2CF; }
.gumb-opasno:hover { background: rgba(255, 92, 124, .1); filter: none; }

.op-popis-kontrole { display: grid; gap: 6px; margin: 4px 0 12px; }
.op-popis-kontrole label { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--tekst-2); }
.op-popis-kontrole input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--ok); margin: 1px 0 0; }
.op-popis-kontrole label:has(input:checked) span { text-decoration: line-through; color: var(--tekst-3); }

.op-tost { position: fixed; z-index: 90; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(92vw, 520px);
  background: var(--tekst); color: var(--noc); padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; box-shadow: var(--sjena); }
.op-tost.greska { background: #FFD3DC; color: #4A0716; }
@media (min-width: 1080px) { .op-tost { bottom: 28px; } }

.op-napomena { border: 1px dashed var(--crta-2); border-radius: 14px; padding: 12px 14px; color: var(--tekst-2); font-size: 14px; background: rgba(17, 26, 66, .4); }
.op-napomena.zuta { border-color: rgba(255, 200, 87, .5); color: #FFE7B8; }
.op-prazno { border: 1px dashed var(--crta-2); border-radius: var(--r); padding: 26px 20px; text-align: center; color: var(--tekst-3); }
.op-prazno b { display: block; color: var(--tekst-2); font-size: 16px; margin-bottom: 6px; }
.op-tablica { overflow-x: auto; border: 1px solid var(--crta); border-radius: var(--r); background: var(--noc-1); }
.op-tablica table { width: 100%; border-collapse: collapse; font-size: 14px; }
.op-tablica th, .op-tablica td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--crta); vertical-align: top; }
.op-tablica tr:last-child td { border-bottom: 0; }
.op-tablica th { color: var(--tekst-3); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; white-space: nowrap; }
.op-tablica td.broj { text-align: right; font-variant-numeric: tabular-nums; }
.op-traka { height: 8px; border-radius: 8px; background: var(--noc-3); overflow: hidden; }
.op-traka i { display: block; height: 100%; background: var(--g-brend); border-radius: 8px; }

/* prijava, primjer */
.op-ulaz { max-width: 980px; margin: 24px auto 0; display: grid; gap: 22px; }
@media (min-width: 900px) { .op-ulaz { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } }
.op-ulaz h1 { font: 700 clamp(30px, 6vw, 46px)/1.04 var(--f-d); letter-spacing: -.025em; margin: 10px 0 12px; }
.op-ulaz .vodeci { margin: 0 0 18px; }
.op-ulaz ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--tekst-2); }
.op-ulaz li { display: flex; gap: 10px; align-items: flex-start; }
.op-ulaz li svg { width: 20px; height: 20px; color: var(--cijan); flex: none; margin-top: 2px; }
.op-kartice-uloga { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.op-kartica-uloge { text-align: left; border: 1px solid var(--crta); background: var(--noc-1); border-radius: 14px; padding: 14px; color: var(--tekst); display: grid; gap: 4px; }
.op-kartica-uloge:hover { border-color: var(--ljub); }
.op-kartica-uloge b { font-size: 15px; }
.op-kartica-uloge small { color: var(--tekst-3); font-size: 12.5px; line-height: 1.45; }
.op-primjer-traka { background: rgba(255, 200, 87, .12); border: 1px solid rgba(255, 200, 87, .4); color: #FFE7B8; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; margin-top: 12px; }

/* ── POMOĆ (cijela FESTIVAL hr aplikacija) ── */
.pomoc-gumb { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 46; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid var(--crta-2); background: #0B1238; color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .8); }
.pomoc-gumb svg { width: 20px; height: 20px; color: var(--cijan); }
.pomoc-gumb:hover { border-color: var(--ljub); }
.pomoc-gumb .op-broj { position: absolute; top: -6px; right: -4px; margin: 0; }
.op-tijelo .pomoc-gumb { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1080px) { .op-tijelo .pomoc-gumb { bottom: 20px; } }
.pomoc-panel { position: fixed; z-index: 85; inset: auto 0 0 0; height: min(88svh, 760px); display: none; flex-direction: column; background: var(--noc-1); border: 1px solid var(--crta-2); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .8); }
.pomoc-panel.otvoren { display: flex; }
@media (min-width: 760px) { .pomoc-panel { inset: auto 20px 20px auto; width: 430px; border-radius: 22px; } }
.pomoc-vrh { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--crta); }
.pomoc-vrh h2 { font-size: 16px; font-weight: 800; margin: 0; }
.pomoc-vrh p { margin: 2px 0 0; font-size: 12.5px; color: var(--tekst-3); }
.pomoc-vrh .op-ikona-gumb { margin-left: auto; flex: none; width: 36px; height: 36px; }
.pomoc-tko { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12.5px; font-weight: 750; border-bottom: 1px solid var(--crta); }
.pomoc-tko.ai { color: #A9E9FF; background: rgba(24, 210, 255, .06); }
.pomoc-tko.covjek { color: #9DF2CB; background: rgba(61, 220, 151, .07); }
.pomoc-tko.ceka { color: #FFE0A3; background: rgba(255, 200, 87, .07); }
.pomoc-tijelo { flex: 1; overflow: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.pomoc-poruka { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pomoc-poruka .tko { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.pomoc-poruka.korisnik { justify-self: end; background: var(--plava); color: #fff; border-bottom-right-radius: 4px; }
.pomoc-poruka.korisnik .tko { color: rgba(255, 255, 255, .75); }
.pomoc-poruka.ai { background: var(--noc-2); border: 1px solid var(--crta-2); border-bottom-left-radius: 4px; }
.pomoc-poruka.ai .tko { color: var(--cijan); }
.pomoc-poruka.covjek { background: rgba(61, 220, 151, .1); border: 1px solid rgba(61, 220, 151, .4); border-bottom-left-radius: 4px; }
.pomoc-poruka.covjek .tko { color: var(--ok); }
.pomoc-poruka.sustav { justify-self: center; max-width: 100%; background: transparent; border: 1px dashed var(--crta-2); color: var(--tekst-3); font-size: 12.5px; text-align: center; }
.pomoc-poruka .nepouzdano { display: block; margin-top: 6px; font-size: 12px; color: var(--upoz); }
.pomoc-akcije { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.pomoc-akcije button { border: 1px solid var(--crta-2); background: var(--noc-2); color: var(--tekst-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.pomoc-akcije button:hover { color: var(--tekst); border-color: var(--tekst-3); }
.pomoc-akcije button.covjek { border-color: rgba(61, 220, 151, .5); color: #9DF2CB; }
.pomoc-unos { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--crta); }
.pomoc-unos textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; }
.pomoc-unos button { flex: none; }
.pomoc-vrste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pomoc-vrste button { text-align: left; border: 1px solid var(--crta); background: var(--noc-2); color: var(--tekst); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.pomoc-vrste button small { color: var(--tekst-3); font-size: 12px; }
.pomoc-vrste button[aria-pressed="true"] { border-color: var(--cijan); }
.pomoc-tipka { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--tekst-3); }

/* ikone unutar naslova, gumba i čipova — uvijek male (SVG bez width/height inače raste do širine) */
.op-kartica h2 svg, .op-dan svg, .op-glava h1 svg { width: 18px; height: 18px; flex: none; color: var(--cijan); }
.op .gumb svg, .op-dijalog .gumb svg { width: 17px; height: 17px; flex: none; }
.op-red svg, .op-napomena svg { width: 16px; height: 16px; }
@media print { .op-bok, .op-dno, .pomoc-gumb, .zaglavlje, .op-vrh-desno, .op-glava .gumbi { display: none !important; } body { background: #fff; color: #000; } .op-kartica, .op-tablica { border-color: #ccc; background: #fff; } }
.op-stavka .op-st, .op-red .op-st { white-space: normal; max-width: 100%; }
.op-stavka > div { min-width: 0; }
@media (max-width: 560px) {
  .op-red:has(.gumb) { grid-template-columns: 1fr; }
  .op-red:has(.gumb) .desno { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
}