/* ===================== Osmijeh – ekrani ordinacije ===================== */
.os-provjera { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--mud-palette-background); }
.os-crveno { color: #B91C1C !important; }
.os-zeleno { color: #15803D !important; }
.os-tamno .os-crveno { color: #F87171 !important; }
.os-tamno .os-zeleno { color: #4ADE80 !important; }
.os-znak { display: inline-grid; place-items: center; flex-shrink: 0; filter: drop-shadow(0 8px 18px rgba(20, 184, 166, .35)); }
.os-dugme-svijetlo { color: #E2F5F2 !important; border-color: rgba(255, 255, 255, .25) !important; }
.os-uloga-ime { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-uloga-opis { font-size: .72rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.os-mini-avatar { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex-shrink: 0; letter-spacing: .02em; }
.os-mini-avatar.velik { width: 46px; height: 46px; border-radius: 13px; font-size: .95rem; }
.os-mini-avatar.ogroman { width: 64px; height: 64px; border-radius: 18px; font-size: 1.3rem; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); }
.os-tackica { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.os-tackica.velika { width: 14px; height: 14px; margin: 0; }
.os-broj-krug { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; display: inline-grid; place-items: center; background: rgba(15, 118, 110, .1); color: var(--mud-palette-primary); font-weight: 800; }

.os-status { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #F1F5F9; color: #475569; white-space: nowrap; }
.os-status.st-potvrdjen { background: #E0F2FE; color: #0369A1; }
.os-status.st-ceka { background: #FEF3C7; color: #B45309; }
.os-status.st-stolica { background: #CCFBF1; color: #0F766E; }
.os-status.st-gotovo { background: #DCFCE7; color: #15803D; }
.os-status.st-nije { background: #FEE2E2; color: #B91C1C; }
.os-status.st-otkazan { background: #F1F5F9; color: #94A3B8; text-decoration: line-through; }

.os-uzivo { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #15803D; text-transform: uppercase; letter-spacing: .06em; }
.os-uzivo i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: osPuls 1.8s infinite; }
.os-uzivo.velik { padding: 6px 12px; border-radius: 999px; background: rgba(34, 197, 94, .1); }
@keyframes osPuls { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.os-znacka { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.os-znacka.ljubicasta { background: #F3E8FF; color: #7C3AED; }
.os-znacka.plava { background: #E0F2FE; color: #0369A1; }
.os-znacka.narandzasta { background: #FFEDD5; color: #C2410C; }
.os-alergija { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.os-alergija.mala { font-size: .66rem; padding: 0 7px; margin-left: 4px; vertical-align: middle; }
.os-oznaka-online { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #0369A1; background: #E0F2FE; padding: 1px 6px; border-radius: 5px; margin-left: 4px; vertical-align: middle; }

/* Segmentni prekidač */
.os-segment { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); gap: 2px; flex-wrap: wrap; }
.os-segment button { border: 0; background: transparent; font: inherit; font-size: .82rem; font-weight: 600; color: var(--mud-palette-text-secondary); padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s, color .15s, box-shadow .15s; min-height: 32px; }
.os-segment button:hover:not(:disabled) { color: var(--mud-palette-text-primary); }
.os-segment button.aktivno { background: var(--mud-palette-surface); color: var(--mud-palette-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.os-segment button.aktivno.plan { color: #B45309; }
.os-segment button.aktivno.gotovo { color: #15803D; }
.os-segment button:disabled { opacity: .45; cursor: not-allowed; }
.os-segment.siroko { display: flex; width: 100%; }
.os-segment.siroko button { flex: 1; justify-content: center; }

.os-podaci { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.os-podaci dt { color: var(--mud-palette-text-secondary); }
.os-podaci dd { margin: 0; }
.os-odabrani-pacijent { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.os-napredak { height: 6px; border-radius: 999px; background: var(--mud-palette-background-gray); overflow: hidden; }
.os-napredak i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #14B8A6, #0F766E); transition: width .6s ease; }
.os-napredak.velik { height: 10px; }
.os-vrijeme-blok { min-width: 52px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; padding: 6px 0; border-radius: 9px; background: var(--mud-palette-background-gray); }

.os-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .76rem; color: var(--mud-palette-text-secondary); padding: 10px 2px 0; align-items: center; }
.os-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.os-legenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-grid; place-items: center; font-style: normal; font-size: .7rem; }
.os-legenda i.izvadjen { color: #475569; font-weight: 800; }
.os-legenda i.puno { background: #2563EB; }
.os-legenda i.srafura { background: repeating-linear-gradient(45deg, #2563EB 0 2px, rgba(37, 99, 235, .15) 2px 5px); border: 1px dashed #2563EB; }
.os-legenda i.tacka { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; }
.os-legenda .razmak { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--mud-palette-lines-default); }

/* ---------- Odontogram ---------- */
.os-sema { width: 100%; }
.os-sema-svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.os-sema-sredina { stroke: var(--mud-palette-lines-default); stroke-width: 1.2; stroke-dasharray: 4 4; }
.os-sema-strane { display: flex; justify-content: space-between; font-size: .72rem; color: var(--mud-palette-text-secondary); padding: 2px 8px 0; }
.os-zub { cursor: pointer; }
.os-zub-pozadina { fill: transparent; transition: fill .15s; }
.os-zub:hover .os-zub-pozadina { fill: rgba(15, 118, 110, .06); }
.os-zub.odabran .os-zub-pozadina { fill: rgba(20, 184, 166, .14); stroke: #14B8A6; stroke-width: 1.5; }
.os-zub-broj { font-size: 13px; font-weight: 700; fill: #334155; font-family: Inter, Arial, sans-serif; }
.os-zub-broj.mlijecni { fill: #7C3AED; }
.os-zub.odabran .os-zub-broj { fill: #0F766E; }
.os-povrsina { stroke: #94A3B8; stroke-width: 1; cursor: pointer; transition: filter .12s; }
.os-povrsina:hover { filter: brightness(.92); stroke: #0F766E; }
.os-povrsina.odabrana { stroke: #0F766E; stroke-width: 3; }
.os-povrsine.prazno { opacity: .25; pointer-events: none; }
.os-tamno .os-zub-broj { fill: #CBD5E1; }
.os-sema.mala .os-zub { cursor: default; }

/* ---------- Zubni karton ---------- */
.os-karton { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.os-karton-sema { padding: 14px 16px 12px; min-width: 0; }
.os-karton-panel { padding: 16px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.os-karton-traka { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.os-kep { display: inline-flex; gap: 4px; }
.os-kep span { font-size: .72rem; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); padding: 4px 9px; border-radius: 8px; }
.os-kep b { color: var(--mud-palette-text-primary); margin-left: 2px; }
.os-uporedo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.os-uporedo .os-3d-okvir { height: 380px; }
.os-uporedo-oznaka { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.os-uporedo-oznaka.poslije { color: #0F766E; }
.os-klizac { position: relative; --granica: 50%; border-radius: 12px; overflow: hidden; outline: none; }
.os-klizac:focus-visible { box-shadow: 0 0 0 3px rgba(20, 184, 166, .4); }
.os-klizac-sloj.prije { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--granica)) 0 0); background: var(--mud-palette-surface); }
.os-klizac-sloj.poslije { position: relative; }
.os-klizac.snimci { background: #111; aspect-ratio: 16 / 8; }
.os-klizac.snimci .os-klizac-sloj { position: absolute; inset: 0; display: grid; place-items: center; background: #111; }
.os-klizac.snimci img { width: 100%; height: 100%; object-fit: contain; }
.os-klizac-rucka { position: absolute; top: 0; bottom: 0; left: var(--granica); width: 44px; margin-left: -22px; cursor: ew-resize; display: grid; place-items: center; touch-action: none; z-index: 2; }
.os-klizac-rucka::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #14B8A6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.os-klizac-rucka span { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #0F766E; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; box-shadow: 0 6px 16px rgba(15, 118, 110, .45); letter-spacing: -.1em; }
.os-klizac-oznaka { position: absolute; top: 8px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; z-index: 3; pointer-events: none; }
.os-klizac-oznaka.lijevo { left: 8px; }
.os-klizac-oznaka.desno { right: 8px; background: rgba(15, 118, 110, .9); }

.os-plan-sazetak { margin-top: 8px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(20, 184, 166, .1), rgba(15, 118, 110, .04)); border: 1px solid rgba(20, 184, 166, .3); }
.os-zub-glava { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); margin-bottom: 12px; }
.os-zub-znak { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #14B8A6, #0F766E); flex-shrink: 0; }
.os-upis { padding: 12px; border-radius: 12px; background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.os-upis-naslov { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mud-palette-text-secondary); margin-bottom: 6px; }
.os-vrste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.os-vrsta { display: flex; align-items: center; gap: 7px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); border-radius: 9px; padding: 8px 9px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--mud-palette-text-primary); text-align: left; min-height: 38px; transition: border-color .12s, box-shadow .12s; }
.os-vrsta i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.os-vrsta:hover { border-color: #14B8A6; }
.os-vrsta.odabrana { border-color: #0F766E; box-shadow: 0 0 0 2px rgba(20, 184, 166, .35); background: rgba(20, 184, 166, .07); }
.os-povrsine-izbor { display: flex; gap: 12px; align-items: center; }
.os-povrsine-velike { width: 116px; height: 116px; flex-shrink: 0; touch-action: manipulation; }
.os-pv path { stroke: #94A3B8; stroke-width: 1.2; cursor: pointer; transition: fill .12s; }
.os-pv:hover path { stroke: #0F766E; }
.os-pv text { font-weight: 800; font-size: 13px; pointer-events: none; font-family: Inter, Arial, sans-serif; }
.os-pv.odabrana path { stroke: #0F766E; stroke-width: 2; }
.os-povrsine-dugmad { display: grid; gap: 4px; flex: 1; min-width: 0; }
.os-povrsine-dugmad button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: .76rem; cursor: pointer; color: var(--mud-palette-text-secondary); min-height: 30px; }
.os-povrsine-dugmad button b { color: var(--mud-palette-text-primary); width: 14px; }
.os-povrsine-dugmad button.odabrana { border-color: #0F766E; background: rgba(20, 184, 166, .1); color: #0F766E; }
.os-nalaz { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); margin-bottom: 6px; }
.os-nalaz > i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.os-nalaz > i.srafura { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .75) 0 2px, transparent 2px 5px) !important; outline: 1px dashed currentColor; }
.os-istorija { display: grid; gap: 2px; }
.os-istorija-red { display: flex; gap: 10px; font-size: .82rem; padding: 5px 0; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.os-istorija-red .tacka { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.os-istorija-red.zatvoreno { opacity: .62; }
.os-snimci-mali { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.os-snimci-mali img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; background: #111; }
@media (max-width: 1100px) { .os-karton { grid-template-columns: 1fr; } .os-karton-panel { position: static; max-height: none; } }

/* ---------- 3D vilica ---------- */
.os-3d-okvir { position: relative; height: 470px; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #FFFFFF 0%, #EAF4F2 55%, #D7E8E4 100%); }
.os-tamno .os-3d-okvir { background: radial-gradient(120% 90% at 50% 20%, #1B2E2B 0%, #0F1F1C 60%, #08120F 100%); }
.os-3d { position: absolute; inset: 0; touch-action: none; }
.os-3d canvas { display: block; outline: none; }
.os-3d-ucitava { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--mud-palette-text-secondary); font-size: .88rem; text-align: center; padding: 20px; }
.os-3d-oznaka { position: absolute; pointer-events: none; opacity: 0; transition: opacity .15s; background: rgba(6, 48, 46, .92); color: #fff; padding: 7px 11px; border-radius: 10px; font-size: .78rem; max-width: 220px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.os-3d-oznaka b { display: block; font-size: .85rem; }
.os-3d-oznaka span { color: #A7F3D0; }
.os-3d-komande { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.os-3d-komande button { border: 1px solid rgba(15, 118, 110, .2); background: rgba(255, 255, 255, .92); color: #0F766E; font: inherit; font-size: .76rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); min-height: 32px; box-shadow: 0 2px 6px rgba(15, 23, 42, .08); }
.os-3d-komande button:hover { background: #0F766E; color: #fff; }

/* ---------- Potpis i saglasnosti ---------- */
.os-potpis canvas { width: 100%; height: 160px; display: block; border-radius: 12px; border: 1.5px dashed #94A3B8; background: #FFFFFF; cursor: crosshair; touch-action: none; }
.os-potpis-linija { height: 0; }
.os-potpis-prikaz { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.os-potpis-prikaz img, .os-potpis-mali { height: 44px; background: #fff; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); padding: 2px 6px; }
.os-saglasnost { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); margin-bottom: 8px; flex-wrap: wrap; }
.os-saglasnost-tekst { font-size: .86rem; line-height: 1.6; padding: 12px 14px; border-radius: 10px; background: var(--mud-palette-background-gray); max-height: 220px; overflow-y: auto; }

/* ---------- Kalendar ---------- */
.os-kalendar-traka { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; }
.os-kalendar-traka .mud-switch { margin: 0; }
.os-kal-brojke { display: flex; gap: 14px; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.os-kal-brojke b { color: var(--mud-palette-text-primary); }
.os-kalendar-okvir { padding: 0; overflow: hidden; }
.os-kt { --kolona: 3; --pps: 76px; overflow-x: auto; position: relative; }
.os-kt-glava { display: grid; grid-template-columns: 56px repeat(var(--kolona), minmax(170px, 1fr)); position: sticky; top: 0; z-index: 3; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-kt.sedmica .os-kt-glava, .os-kt.sedmica .os-kt-tijelo { grid-template-columns: 56px repeat(var(--kolona), minmax(130px, 1fr)); }
.os-kt-naslov { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-left: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.os-kt-naslov > div { min-width: 0; }
.os-kt-naslov b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-kt-naslov span { display: block; font-size: .72rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-kt-naslov.danas { background: rgba(20, 184, 166, .07); }
.os-kt-tijelo { display: grid; grid-template-columns: 56px repeat(var(--kolona), minmax(170px, 1fr)); position: relative; }
.os-kt-sati { position: relative; }
.os-kt-sati div { position: absolute; right: 8px; transform: translateY(-50%); font-size: .7rem; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.os-kt-sati div:first-child { transform: none; }
.os-kt-kolona { position: relative; border-left: 1px solid var(--mud-palette-lines-default); background: repeating-linear-gradient(135deg, var(--mud-palette-background-gray) 0 6px, transparent 6px 12px); cursor: copy; transition: background-color .15s; }
.os-kt-kolona.cilj { background-color: rgba(20, 184, 166, .08); }
.os-kt-radno { position: absolute; left: 0; right: 0; background: var(--mud-palette-surface); pointer-events: none; }
.os-kt-linija { position: absolute; left: 0; right: 0; border-top: 1px solid var(--mud-palette-lines-default); pointer-events: none; }
.os-kt-sada { position: absolute; left: 0; right: 0; border-top: 2px solid #EF4444; z-index: 4; pointer-events: none; }
.os-kt-sada span { position: absolute; left: -52px; top: -9px; font-size: .62rem; font-weight: 800; color: #fff; background: #EF4444; padding: 1px 5px; border-radius: 5px; }
.os-kt-termin { position: absolute; border-radius: 9px; padding: 4px 8px 4px 10px; overflow: hidden; cursor: pointer; z-index: 1; font-size: .78rem; line-height: 1.25;
    background: color-mix(in srgb, var(--boja) 13%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--boja) 30%, transparent); box-shadow: inset 3px 0 0 var(--boja);
    transition: box-shadow .15s, transform .15s; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.os-kt-termin:hover { box-shadow: inset 3px 0 0 var(--boja), 0 6px 16px -6px rgba(15, 23, 42, .3); z-index: 2; }
.os-kt-termin.nisko { padding-top: 1px; padding-bottom: 1px; }
.os-kt-red1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-text-primary); }
.os-kt-red1 b { font-variant-numeric: tabular-nums; margin-right: 3px; }
.os-kt-red2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-text-secondary); font-size: .72rem; }
.os-kt-status { position: absolute; right: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #94A3B8; }
.os-kt-termin.st-ceka .os-kt-status { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.os-kt-termin.st-stolica .os-kt-status { background: #14B8A6; animation: osPuls 1.8s infinite; }
.os-kt-termin.st-gotovo { opacity: .62; }
.os-kt-termin.st-gotovo .os-kt-status { background: #22C55E; }
.os-kt-termin.st-nije { opacity: .5; background: repeating-linear-gradient(135deg, #FEE2E2 0 6px, #FFF 6px 12px); }
.os-kt-termin.st-nije .os-kt-status { background: #EF4444; }
.os-kt-termin.istaknut { animation: osIstakni 1.6s ease 2; }
@keyframes osIstakni { 50% { box-shadow: inset 3px 0 0 var(--boja), 0 0 0 4px rgba(20, 184, 166, .55); } }
.os-kt-termin.vuce { opacity: .92; z-index: 10; box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .45); cursor: grabbing; transition: none; }
.os-kt-termin.drzi { box-shadow: inset 3px 0 0 var(--boja), 0 0 0 3px rgba(20, 184, 166, .6); }
.os-kt.vucenje { cursor: grabbing; user-select: none; }
.os-kt-online { position: absolute; right: 20px; top: 3px; font-size: .56rem; font-weight: 800; text-transform: uppercase; color: #0369A1; background: #E0F2FE; padding: 0 4px; border-radius: 4px; }
.os-kt.sedmica .os-kt-termin { font-size: .7rem; padding: 2px 5px 2px 7px; }
.os-tamno .os-kt-termin.st-nije { background: repeating-linear-gradient(135deg, #3B1414 0 6px, transparent 6px 12px); }

/* ---------- Čekaonica ---------- */
.os-stolice { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.os-stolica-kartica { padding: 16px; position: relative; overflow: hidden; }
.os-stolica-kartica.zauzeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #14B8A6, #0F766E); }
.os-stolica-glava { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--boja); }
.os-stolica-glava b { display: block; color: var(--mud-palette-text-primary); }
.os-stolica-glava span { display: block; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.os-stolica-stanje { font-size: .7rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; background: #DCFCE7; color: #15803D !important; }
.zauzeta .os-stolica-stanje { background: #CCFBF1; color: #0F766E !important; }
.os-stolica-pacijent { display: flex; gap: 12px; cursor: pointer; }
.os-stolica-prazno { display: flex; align-items: center; gap: 8px; color: var(--mud-palette-text-secondary); font-size: .88rem; padding: 6px 0; }
.os-ceka-red { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; transition: background .12s; border: 1px solid transparent; }
.os-ceka-red:hover { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); }
.os-ceka-min { text-align: center; line-height: 1; min-width: 46px; }
.os-ceka-min b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.os-ceka-min span { font-size: .66rem; color: var(--mud-palette-text-secondary); }
.os-ceka-min.dugo b { color: #DC2626; }
.os-zavrseni { display: flex; flex-wrap: wrap; gap: 8px; }
.os-zavrsen { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 6px 10px; border-radius: 999px; background: var(--mud-palette-background-gray); cursor: pointer; }

/* ---------- Pacijent ---------- */
.os-pacijent-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 20px; position: relative; overflow: hidden; }
.os-pacijent-glava::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, .12), transparent 70%); pointer-events: none; }
.os-pacijent-podaci { flex: 1 1 320px; min-width: 0; }
.os-pacijent-red { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .84rem; color: var(--mud-palette-text-secondary); }
.os-pacijent-red span { display: inline-flex; align-items: center; gap: 5px; }
.os-pacijent-brojke { display: flex; gap: 22px; flex-wrap: wrap; }
.os-pacijent-brojke div { display: grid; }
.os-pacijent-brojke span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); font-weight: 600; }
.os-pacijent-brojke b { font-size: .95rem; white-space: nowrap; }
.os-pacijent-akcije { display: flex; gap: 8px; align-items: center; position: relative; z-index: 1; }
.os-tabovi { display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-tabovi button { border: 0; background: transparent; font: inherit; font-size: .86rem; font-weight: 600; color: var(--mud-palette-text-secondary); padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; min-height: 44px; }
.os-tabovi button:hover { color: var(--mud-palette-text-primary); }
.os-tabovi button.aktivno { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.os-tab-broj { font-size: .68rem; font-weight: 800; background: #F59E0B; color: #fff; border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; }
.os-vremenska { position: relative; padding-left: 18px; }
.os-vremenska::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--mud-palette-lines-default); }
.os-vremenska-stavka { position: relative; padding: 0 0 16px 10px; }
.os-vremenska-tacka { position: absolute; left: -18px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mud-palette-surface); }
.os-vremenska-sadrzaj { font-size: .86rem; }
.os-vremenska-stavka.st-nije, .os-vremenska-stavka.st-otkazan { opacity: .55; }
.os-zahvat-red { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--mud-palette-text-secondary); padding: 2px 0; max-width: 560px; }
.os-stanje-trake { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.os-stanje-trake div { padding: 14px; border-radius: 12px; background: var(--mud-palette-background-gray); display: grid; }
.os-stanje-trake span { font-size: .72rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.os-stanje-trake b { font-size: 1.25rem; }
.os-plan-red { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); margin-bottom: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.os-plan-red:hover { border-color: rgba(20, 184, 166, .5); box-shadow: var(--os-sjena-hover); }
.os-plan-ikona { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(20, 184, 166, .12); color: #0F766E; flex-shrink: 0; }
.os-plan-status { font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #F1F5F9; color: #475569; }
.os-plan-status.s-ponudjen { background: #FEF3C7; color: #B45309; }
.os-plan-status.s-prihvacen { background: #DCFCE7; color: #15803D; }
.os-plan-status.s-utoku { background: #CCFBF1; color: #0F766E; }
.os-plan-status.s-zavrsen { background: #E0E7FF; color: #4338CA; }
.os-plan-status.s-odbijen { background: #FEE2E2; color: #B91C1C; }
@media (max-width: 700px) { .os-pacijent-brojke { gap: 14px; } .os-stanje-trake { grid-template-columns: 1fr; } }

/* ---------- RTG i slike ---------- */
.os-galerija { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.os-snimak { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); cursor: pointer; background: var(--mud-palette-surface); transition: transform .15s, box-shadow .15s; }
.os-snimak:hover { transform: translateY(-2px); box-shadow: var(--os-sjena-hover); }
.os-snimak.siroki { grid-column: span 2; }
.os-snimak-slika { background: #0E0F10; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.os-snimak.siroki .os-snimak-slika { aspect-ratio: 2.1 / 1; }
.os-snimak-slika img { width: 100%; height: 100%; object-fit: contain; }
.os-snimak-opis { padding: 8px 10px; display: grid; font-size: .8rem; }
.os-snimak-opis span { color: var(--mud-palette-text-secondary); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-snimak-oznaka { position: absolute; top: 8px; left: 8px; font-size: .64rem; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(15, 23, 42, .75); color: #fff; }
.os-snimak-oznaka.poslije { background: rgba(15, 118, 110, .95); }
.os-dodaj-snimak { padding: 14px; border-radius: 12px; background: var(--mud-palette-background-gray); margin-bottom: 14px; border: 1px dashed var(--mud-palette-lines-inputs); }
.os-zum { position: relative; overflow: hidden; background: #0E0F10; border-radius: 12px; height: min(62vh, 560px); display: grid; place-items: center; touch-action: none; cursor: zoom-in; }
.os-zum[data-zum]:not([data-zum="1.0"]) { cursor: grab; }
.os-zum-sadrzaj { max-width: 100%; max-height: 100%; transform-origin: center; transition: transform .08s linear; user-select: none; }
.os-trake-snimaka { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.os-trake-snimaka img { height: 64px; border-radius: 8px; background: #111; cursor: pointer; opacity: .65; border: 2px solid transparent; flex-shrink: 0; }
.os-trake-snimaka img.odabran, .os-trake-snimaka img:hover { opacity: 1; border-color: #14B8A6; }
@media (max-width: 520px) { .os-snimak.siroki { grid-column: span 1; } .os-galerija { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* ---------- Anamneza ---------- */
.os-bolesti { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.os-bolesti button { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: .82rem; cursor: pointer; color: var(--mud-palette-text-primary); min-height: 40px; }
.os-bolesti button.odabrano { border-color: #F59E0B; background: #FFFBEB; color: #92400E; }
.os-tamno .os-bolesti button.odabrano { background: rgba(245, 158, 11, .12); color: #FCD34D; }
.os-anamneza-da-ne { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.os-anamneza-alergije { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.os-anamneza-alergije span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.os-anamneza-alergije b { font-size: 1.05rem; }
.os-anamneza-alergije.nema { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }

/* ---------- Ortodoncija ---------- */
.os-orto-faze { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.os-orto-faza { display: grid; gap: 6px; font-size: .7rem; color: var(--mud-palette-text-secondary); text-align: center; }
.os-orto-faza i { height: 6px; border-radius: 999px; background: var(--mud-palette-background-gray); }
.os-orto-faza.gotova i { background: #C4B5FD; }
.os-orto-faza.aktivna i { background: #7C3AED; }
.os-orto-faza.aktivna span { color: #7C3AED; font-weight: 700; }
.os-orto-sljedeca { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #F5F3FF; color: #6D28D9; }
.os-orto-sljedeca span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.os-orto-sljedeca.kasni { background: #FEF2F2; color: #B91C1C; }
.os-orto-slike { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.os-orto-slike figure { margin: 0; cursor: pointer; }
.os-orto-slike img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.os-orto-slike figcaption { font-size: .72rem; font-weight: 600; }
.os-orto-slike figcaption span { font-weight: 400; color: var(--mud-palette-text-secondary); }

/* ---------- QR i linkovi ---------- */
.os-qr-veliki { width: 220px; margin: 0 auto; padding: 10px; background: #fff; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); }
.os-qr-veliki svg { width: 100%; height: auto; display: block; }
.os-link-kutija { padding: 8px 12px; border-radius: 10px; background: var(--mud-palette-background-gray); word-break: break-all; font-size: .8rem; }

/* ---------- Javne stranice (zakazivanje, portal) ---------- */
.os-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82em; }
.os-oznaka { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.os-klik { cursor: pointer; }
.os-kolone { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.os-kolona { border-radius: 16px; background: var(--mud-palette-background-gray); padding: 10px; min-height: 200px; }
.os-kolona-glava { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 10px; font-weight: 700; font-size: .85rem; }
.os-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.os-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--b); }
.os-ekg { margin-top: 36px; max-width: 600px; }
.os-ekg svg { width: 100%; height: auto; overflow: visible; }
.os-ekg path.linija { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: klEkg 3.2s linear infinite; }
.os-javno { min-height: 100vh; background: linear-gradient(160deg, #031B1A, #06302E 45%, #0B4F4A); color: #fff; padding: 24px 16px 32px; }
.os-javno-sadrzaj { max-width: 860px; margin: 0 auto; }
.os-javno-glava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.os-javno-meni { display: flex; gap: 6px; }
.os-javno-meni a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: #CFE3E8; text-decoration: none; font-size: .88rem; font-weight: 600; border: 1px solid rgba(255,255,255,.14); }
.os-javno-meni a:hover { background: rgba(255,255,255,.08); }
.os-javno-meni a.aktivno { background: #fff; color: #0B4F4A; border-color: #fff; }
.os-javno-kartica { border-radius: 18px !important; padding: 28px; color: var(--mud-palette-text-primary); box-shadow: 0 24px 60px rgba(0,0,0,.35) !important; }
.os-javno-dno { text-align: center; color: #7FA3AD; font-size: .75rem; margin-top: 20px; }
.os-javno-dno a { color: #CFE3E8; }
.os-javno-kvacica { width: 64px; height: 64px; border-radius: 50%; background: #10B981; color: #fff; display: grid; place-items: center; margin: 0 auto; box-shadow: 0 0 0 10px rgba(16,185,129,.15); }
.os-javno-kvacica .mud-icon-root { font-size: 2rem; }
.os-javno-sazetak { text-align: left; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; overflow: hidden; max-width: 520px; margin-left: auto; margin-right: auto; }
.os-javno-sazetak > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--mud-palette-lines-default); }
.os-javno-sazetak > div:first-child { border-top: 0; }
.os-javno-sazetak span { color: var(--mud-palette-text-secondary); font-size: .85rem; }
.os-javno-sazetak b { text-align: right; }
.os-koraci-javno { display: flex; gap: 6px; margin-bottom: 18px; }
.os-koraci-javno > div { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); font-size: .82rem; font-weight: 600; }
.os-koraci-javno > div span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mud-palette-lines-default); font-size: .75rem; flex-shrink: 0; }
.os-koraci-javno > div.aktivan { background: rgba(14,116,144,.1); color: #0F766E; }
.os-koraci-javno > div.aktivan span { background: #0F766E; color: #fff; }
.os-koraci-javno > div.gotov { cursor: pointer; color: #047857; }
.os-koraci-javno > div.gotov span { background: #10B981; color: #fff; }
.os-javno-doktori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.os-javno-doktor, .os-javno-odabrano { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); }
.os-javno-doktor { cursor: pointer; transition: all .15s ease; }
.os-javno-doktor:hover { border-color: #0F766E; box-shadow: 0 6px 18px rgba(14,116,144,.15); transform: translateY(-1px); }
.os-javno-odabrano { background: var(--mud-palette-background-gray); }
.os-javno-doktor-ikona { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.os-javno-usluga { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); cursor: pointer; }
.os-javno-usluga.odabrana { border-color: #0F766E; background: rgba(14,116,144,.06); }
.os-javno-dani { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.os-javno-dan { min-width: 66px; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); cursor: pointer; font: inherit; color: inherit; }
.os-javno-dan .d1 { font-size: .7rem; text-transform: uppercase; opacity: .7; }
.os-javno-dan .d2 { font-size: 1.05rem; font-weight: 800; }
.os-javno-dan .d3 { font-size: .65rem; color: #047857; white-space: nowrap; }
.os-javno-dan.pun { opacity: .45; }
.os-javno-dan.pun .d3 { color: inherit; }
.os-javno-dan.odabran { background: #0F766E; border-color: #0F766E; color: #fff; }
.os-javno-dan.odabran .d3 { color: #CFFAFE; }
.os-javno-sati { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.os-javno-sat { padding: 9px 0; border-radius: 10px; border: 1px solid rgba(14,116,144,.4); background: var(--mud-palette-surface); color: #0F766E; font: inherit; font-weight: 700; cursor: pointer; }
.os-javno-sat:hover, .os-javno-sat.odabran { background: #0F766E; color: #fff; }
.os-javno-status { display: flex; gap: 6px; }
.os-javno-status > div { flex: 1; text-align: center; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.os-javno-status > div span { display: block; height: 6px; border-radius: 999px; background: var(--mud-palette-lines-default); margin-bottom: 6px; }
.os-javno-status > div.gotov span { background: #10B981; }
.os-javno-status > div.trenutno { color: #0F766E; font-weight: 700; }
.os-javno-status > div.trenutno span { background: linear-gradient(90deg, #10B981, #0F766E); animation: kl-puls 1.4s ease-in-out infinite; }
.os-javno-grupa { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--mud-palette-text-secondary); margin: 16px 0 4px; }
.os-javno-rez { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-javno-rez.los { background: rgba(220,38,38,.05); }
.os-javno-rez.los b { color: #DC2626; }
.os-javno-strelica { color: #DC2626; font-weight: 800; }
.os-telefon { border: 1px dashed var(--mud-palette-primary); }
.os-telefon-tijelo { display: flex; gap: 22px; align-items: center; }
.os-qr { flex: none; width: 128px; height: 128px; background: #fff; border-radius: 10px; padding: 4px; border: 1px solid var(--mud-palette-lines-default); }
.os-qr svg { width: 100%; height: 100%; }
.os-uspjeh { display: flex; gap: 6px; align-items: center; color: #15803D; font-size: .84rem; background: rgba(22, 163, 74, .1); padding: 6px 10px; border-radius: 8px; }
.pv-shema { display: grid; grid-template-columns: 1fr auto minmax(160px, .8fr) auto 1fr; gap: 14px; align-items: center; }
.pv-kolona { display: grid; gap: 10px; }
.pv-cvor { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-background-gray); }
.pv-cvor b { display: block; font-size: .86rem; }
.pv-cvor span { display: block; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.pv-strelice { display: grid; gap: 22px; color: var(--mud-palette-primary); font-size: 1.2rem; font-weight: 700; text-align: center; }
.pv-centar { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 22px 14px; border-radius: 14px; background: linear-gradient(135deg, #0F766E, #14B8A6); color: #fff; }
.pv-centar b { font-size: 1.1rem; }
.pv-centar span { font-size: .76rem; opacity: .85; }
@media (max-width: 900px) { .pv-shema { grid-template-columns: 1fr; } .pv-strelice { display: none; } }
.pv-nacin { height: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); }
.pv-nacin b { display: block; margin-bottom: 4px; }
.pv-nacin p { font-size: .84rem; color: var(--mud-palette-text-secondary); margin: 0 0 10px; }
.pv-kod { background: #0F172A; color: #E2E8F0; border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; overflow-x: auto; }
.pv-kod > div { display: flex; align-items: center; gap: 8px; min-height: 30px; word-break: break-all; }
.pv-kod .mud-icon-button { color: #94A3B8; }
.pv-kod pre { margin: 8px 0 0; white-space: pre-wrap; color: #A5F3FC; }
.pv-kod-oznaka { background: #1E293B; color: #FCD34D; padding: 1px 6px; border-radius: 5px; font-weight: 700; flex: none; }
.pv-veza { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 8px 0 0; font-size: .86rem; }
.pv-veza dt { color: var(--mud-palette-text-secondary); }
.pv-veza dd { margin: 0; }
@media (max-width: 600px) { .pv-veza { grid-template-columns: 1fr; } .pv-veza dt { margin-top: 6px; } }
.pv-korak { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0F766E; color: #fff; font-weight: 700; font-size: .85rem; }
.pv-ikona { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(15, 118, 110, .1); color: #0F766E; flex: none; }
.os-demo-za { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(52, 211, 153, .45); background: rgba(16, 185, 129, .12); color: #A7F3D0; font-size: .85rem; }
.os-demo-za .mud-icon-root { color: #34D399; flex-shrink: 0; }
.os-demo-za > span { min-width: 0; overflow-wrap: anywhere; }
.os-demo-za b { color: #fff; }
.os-sms { flex-basis: 100%; font-size: .85rem; line-height: 1.45; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: rgba(15, 118, 110, .07); border: 1px solid rgba(15, 118, 110, .18); overflow-wrap: anywhere; }
.os-javno-meni .os-jezik { align-self: center; color: #CFE3E8; }
.os-javno-meni .os-jezik-meni a { flex: none; justify-content: flex-start; padding: 8px 10px; border: 0; border-radius: 6px; color: inherit; font-weight: 400; background: none; }
.os-javno-meni .os-jezik-meni a:hover { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .05)); }
.os-javno-meni .os-jezik-meni a.aktivan { font-weight: 700; }
.os-ghost.mud-button-outlined { background: var(--mud-palette-surface); }
.os-ghost.mud-button-outlined:hover { background: rgba(15, 118, 110, .08); }

/* ---------- Kontrolna tabla ---------- */
.os-tabla-glava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.os-tabla-pozdrav { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -.025em; }
.os-kpi-red { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.os-tabla-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
.os-stolice-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.os-stolica-mini { padding: 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); position: relative; overflow: hidden; min-width: 0; }
.os-stolica-mini::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--boja); opacity: .35; }
.os-stolica-mini.zauzeta::before { opacity: 1; }
.os-stolica-mini.zauzeta { background: color-mix(in srgb, var(--boja) 6%, transparent); }
.os-stolica-mini-glava { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--boja); }
.os-stolica-mini-glava b { color: var(--mud-palette-text-primary); font-size: .86rem; }
.os-stolica-mini-glava span { margin-left: auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.os-stolica-mini .os-bold { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-sastanak { padding: 20px; color: #E2F5F2; background: radial-gradient(400px 260px at 100% 0%, rgba(20, 184, 166, .35), transparent 60%), linear-gradient(160deg, #06302E, #0B4F4A) !important; border: 0 !important; }
.os-sastanak b { color: #fff; }
.os-sastanak-pod { font-size: .82rem; color: #A7D9D1; line-height: 1.5; }
.os-sastanak-qr { width: 170px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.os-sastanak-qr svg { width: 100%; height: auto; display: block; }
.os-sastanak-link { text-align: center; font-size: .74rem; color: #8FCFC5; margin-top: 8px; word-break: break-all; font-family: ui-monospace, Consolas, monospace; }
.os-segment.tamno { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); display: flex; }
.os-segment.tamno button { color: #A7D9D1; flex: 1; justify-content: center; }
.os-segment.tamno button.aktivno { background: #fff; color: #0F766E; }
.os-dugme-bijelo { background: #fff !important; color: #0F766E !important; }
.os-paznja { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; cursor: pointer; font-size: .88rem; }
.os-paznja:hover { background: var(--mud-palette-background-gray); }
.os-paznja span { flex: 1; }
.os-paznja-ikona { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.os-link { color: var(--mud-palette-primary); text-decoration: none; font-weight: 600; }
.os-link:hover { text-decoration: underline; }
@media (max-width: 960px) { .os-tabla-mreza { grid-template-columns: 1fr; } }

/* ---------- Plan terapije ---------- */
.os-plan-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; }
.os-plan-ikona.velika { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, #14B8A6, #0F766E); color: #fff; }
.os-prihvaceno { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-color: #BBF7D0 !important; background: linear-gradient(90deg, #F0FDF4, var(--mud-palette-surface)) !important; flex-wrap: wrap; }
.os-tamno .os-prihvaceno { background: rgba(34, 197, 94, .08) !important; border-color: rgba(34, 197, 94, .3) !important; }
.os-plan-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.os-plan-strana { position: sticky; top: 80px; }
.os-varijante { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.os-varijanta { display: grid; gap: 8px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); box-shadow: var(--os-sjena); }
.os-varijanta.izabrana { border-color: #15803D; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.os-varijanta.otpala { opacity: .5; }
.os-varijanta-oznaka { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #14B8A6, #0F766E); flex-shrink: 0; }
.os-varijanta-cijena { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: #0F766E; }
.os-tamno .os-varijanta-cijena { color: #5EEAD4; }
.os-posjeta { margin-bottom: 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden; }
.os-posjeta-glava { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--mud-palette-background-gray); font-size: .86rem; }
.os-posjeta-broj { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #0F766E; color: #fff; font-weight: 800; font-size: .76rem; flex-shrink: 0; }
.os-stavka { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .86rem; flex-wrap: wrap; }
.os-stavka.uradjeno .os-stavka-naziv { color: var(--mud-palette-text-secondary); }
.os-stavka.otpala { opacity: .42; text-decoration: line-through; }
.os-stavka-varijanta { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; background: rgba(20, 184, 166, .15); color: #0F766E; flex-shrink: 0; }
.os-stavka-zub { min-width: 56px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.os-stavka-naziv { flex: 1; min-width: 160px; }
.os-stavka-cijena { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.os-stavka-gotovo { display: inline-flex; align-items: center; gap: 4px; color: #15803D; font-size: .78rem; font-weight: 700; }
.os-dodaj-stavku { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border-radius: 12px; border: 1px dashed var(--mud-palette-lines-inputs); }
.os-predracun-red { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-predracun-red b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.os-predracun-red.otpala { opacity: .45; }
.os-napomena-doktora { padding: 12px 14px; border-radius: 12px; background: #F0FDFA; border-left: 3px solid #14B8A6; font-size: .88rem; line-height: 1.5; }
.os-napomena-doktora span { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #0F766E; margin-bottom: 2px; }
.os-tamno .os-napomena-doktora { background: rgba(20, 184, 166, .08); }
.os-rate { display: grid; gap: 4px; }
.os-rata { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 7px 10px; border-radius: 9px; background: var(--mud-palette-background-gray); font-size: .84rem; }
.os-rata b { text-align: right; min-width: 90px; font-variant-numeric: tabular-nums; }
.os-rata.placena { background: #F0FDF4; color: #15803D; }
.os-rata.kasni { background: #FEF2F2; color: #B91C1C; }
.os-tamno .os-rata.placena { background: rgba(34, 197, 94, .1); }
.os-tamno .os-rata.kasni { background: rgba(239, 68, 68, .1); }
.os-varijante-izbor { display: grid; gap: 8px; margin-bottom: 8px; }
.os-varijanta-radio { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--mud-palette-lines-default); cursor: pointer; }
.os-varijanta-radio:has(input:checked) { border-color: #0F766E; background: rgba(20, 184, 166, .07); }
.os-varijanta-radio input { width: 18px; height: 18px; accent-color: #0F766E; }
.os-varijanta-radio b { flex: 1; }
@media (max-width: 1100px) { .os-plan-mreza { grid-template-columns: 1fr; } .os-plan-strana { position: static; } }

/* ---------- Recall ---------- */
.os-recall-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; color: #FDF2F8; border: 0 !important; background: radial-gradient(500px 300px at 0% 0%, rgba(244, 114, 182, .35), transparent 60%), linear-gradient(135deg, #831843, #BE185D) !important; }
.os-recall-hero-oznaka { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #FBCFE8; }
.os-recall-hero-iznos { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.os-recall-hero-pod { font-size: .86rem; color: #FBCFE8; max-width: 560px; margin-top: 4px; }
.os-recall-lijevak { display: flex; align-items: center; gap: 8px; color: #F9A8D4; flex-wrap: wrap; }
.os-recall-lijevak > div { text-align: center; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); min-width: 78px; }
.os-recall-lijevak > div.istaknuto { background: #fff; color: #BE185D; }
.os-recall-lijevak b { display: block; font-size: 1.4rem; color: #fff; }
.os-recall-lijevak .istaknuto b { color: #BE185D; }
.os-recall-lijevak span { font-size: .72rem; }
.os-recall-cekaju { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.os-recall-cekaju > div { padding: 14px; border-radius: 12px; cursor: pointer; display: grid; }
.os-recall-cekaju b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.os-recall-cekaju span { font-size: .78rem; }
.os-recall-cekaju .dospio { background: #FDF2F8; color: #BE185D; }
.os-recall-cekaju .uskoro { background: #FFFBEB; color: #B45309; }
.os-recall-cekaju .kasni { background: #FEF2F2; color: #B91C1C; }
.os-recall-cekaju .zakazan { background: #F0FDF4; color: #15803D; cursor: default; }
.os-tamno .os-recall-cekaju > div { background: var(--mud-palette-background-gray); }
.os-recall-potencijal { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--mud-palette-background-gray); font-size: .86rem; color: var(--mud-palette-text-secondary); }
.os-recall-potencijal b { color: #BE185D; }
.os-tabela-omotac { overflow-x: auto; }
.os-tabela tr.odabran td { background: rgba(20, 184, 166, .07); }
.os-klik-red { cursor: pointer; }

/* ---------- Ortodoncija, zalihe, laboratorija ---------- */
.os-orto-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.os-orto-kartica { padding: 14px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.os-orto-kartica:hover { border-color: #C4B5FD; box-shadow: 0 10px 26px -12px rgba(124, 58, 237, .35); }
.os-lot-red { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.os-lot-red .os-mono { background: var(--mud-palette-background-gray); padding: 2px 6px; border-radius: 6px; }
.os-lab-kolone { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.os-lab-kolona { background: var(--mud-palette-background-gray); border-radius: 14px; padding: 10px; min-height: 160px; }
.os-lab-kolona-glava { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.os-lab-kartica { background: var(--mud-palette-surface); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--os-sjena); display: grid; gap: 2px; }
.os-lab-kartica.kasni { border-color: #FCA5A5; box-shadow: inset 3px 0 0 #EF4444; }
.os-uplata-red { display: grid; grid-template-columns: 50px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .86rem; }
.os-uplata-red > *:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .os-lab-kolone { grid-template-columns: repeat(4, 240px); } }

/* ---------- Izvještaji ---------- */
.os-traka-red { margin-bottom: 12px; font-size: .86rem; display: grid; gap: 5px; }
.os-stolica-izvj { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-krug { width: 54px; height: 54px; flex-shrink: 0; }
.os-krug text { font-size: 10px; font-weight: 800; fill: var(--mud-palette-text-primary); font-family: Inter, Arial, sans-serif; }
.os-predracuni-traka { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--mud-palette-background-gray); gap: 2px; }
.os-predracuni-traka i { display: block; height: 100%; }
.os-ocjena-velika { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.os-zvjezdice { color: #F59E0B; font-size: 1.3rem; letter-spacing: 2px; }
.os-ocjena-red { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 8px; font-size: .8rem; margin-bottom: 5px; }

/* ---------- Poruke, cjenovnik ---------- */
.os-poruke { display: grid; gap: 8px; }
.os-poruka-kartica { display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); }
.os-poruka-kanal { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; background: #475569; }
.os-poruka-kanal.k-viber { background: #7360F2; }
.os-poruka-kanal.k-sms { background: #0F766E; }
.os-poruka-kanal.k-email { background: #2563EB; }
.os-poruka-tekst { margin-top: 6px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--mud-palette-background-gray); font-size: .86rem; line-height: 1.5; max-width: 680px; }
.os-cjenovnik-grupa { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-primary); margin: 18px 0 6px; }
.os-cjenovnik-red { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .9rem; }
.os-cjenovnik-red .os-mono { width: 44px; flex-shrink: 0; }
.os-cjenovnik-red .naziv { flex: 1; min-width: 0; }
.os-cjenovnik-red b { white-space: nowrap; min-width: 80px; text-align: right; }
.os-pomoc .mud-expand-panel { border-bottom: 1px solid var(--mud-palette-lines-default); }

/* ---------- Javne stranice: zakazivanje ---------- */
.os-javno-adresa { font-size: .8rem; color: #9ED3CB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-javno-sadrzaj.uzi { max-width: 640px; }
.os-preporuka-traka { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #FDF2F8; color: #9D174D; font-size: .88rem; margin-bottom: 16px; }
.os-zakazi-vrste { display: grid; gap: 10px; }
.os-zakazi-vrsta { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--mud-palette-lines-default); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.os-zakazi-vrsta:hover { border-color: var(--boja); box-shadow: 0 12px 28px -14px var(--boja); transform: translateY(-1px); }
.os-zakazi-vrsta-ikona { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--boja, #0F766E); flex-shrink: 0; }
.os-javno-dan:disabled { cursor: not-allowed; }

/* ---------- Predračun za pacijenta ---------- */
.os-pp-glava { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.os-pp-oznaka { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--mud-palette-primary); }
.os-pp-naslov { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 2px 0; }
.os-pp-varijante { display: grid; gap: 10px; }
.os-pp-varijanta { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 2px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); font: inherit; text-align: left; cursor: pointer; color: var(--mud-palette-text-primary); transition: border-color .15s, box-shadow .15s; }
.os-pp-varijanta.odabrana { border-color: #0F766E; box-shadow: 0 0 0 4px rgba(20, 184, 166, .18); }
.os-pp-varijanta.otpala { opacity: .45; }
.os-pp-varijanta:disabled { cursor: default; }
.os-pp-varijanta-oznaka { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #14B8A6, #0F766E); flex-shrink: 0; }
.os-pp-varijanta-tekst { flex: 1; min-width: 0; display: grid; }
.os-pp-varijanta-tekst small { color: var(--mud-palette-text-secondary); font-size: .78rem; line-height: 1.35; }
.os-pp-varijanta-cijena { font-size: 1.2rem; font-weight: 800; white-space: nowrap; color: #0F766E; }
.os-pp-posjeta { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.os-pp-posjeta-glava { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--mud-palette-background-gray); font-size: .86rem; }
.os-pp-posjeta-glava .os-tekst-siv { margin-left: auto; font-size: .78rem; }
.os-pp-stavka { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .86rem; }
.os-pp-stavka b { white-space: nowrap; }
.os-pp-stavka.uradjeno { color: var(--mud-palette-text-secondary); }
.os-pp-ukupno { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #06302E, #0F766E); color: #D1FAF0; font-size: .9rem; }
.os-pp-ukupno b { font-size: 1.6rem; color: #fff; letter-spacing: -.02em; }
.os-pp-prihvati { padding: 16px; border-radius: 14px; border: 2px solid rgba(20, 184, 166, .4); background: rgba(20, 184, 166, .05); }
.os-pp-prihvaceno { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.os-pp-prihvaceno b { display: block; }
.os-pp-prihvaceno span { font-size: .82rem; }

/* ---------- Portal (telefon) ---------- */
.os-portal { min-height: 100vh; background: var(--mud-palette-background); }
.os-portal-ucitava { min-height: 100vh; display: grid; place-items: center; }
.os-portal-glava { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; color: #fff; background: linear-gradient(135deg, #06302E, #0F766E); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .5); }
.os-portal-ordinacija { font-size: .72rem; color: #A7D9D1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-portal-ime { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.os-portal-sadrzaj { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
.os-portal-termin { padding: 20px; border-radius: 20px; color: #fff; background: radial-gradient(300px 200px at 100% 0%, rgba(94, 234, 212, .35), transparent 60%), linear-gradient(150deg, #0B4F4A, #0F766E); box-shadow: 0 20px 40px -20px rgba(15, 118, 110, .8); margin-bottom: 14px; }
.os-portal-oznaka { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #99F6E4; }
.os-portal-termin-dan { font-size: 1.15rem; font-weight: 700; margin-top: 4px; }
.os-portal-termin-sat { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.os-portal-termin-opis { font-size: .86rem; color: #CCFBF1; margin-top: 4px; }
.os-portal-kartica { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: var(--os-sjena); }
.os-portal-akcije { display: grid; gap: 10px; margin-bottom: 14px; }
.os-portal-akcije > button, .os-portal-akcije > a { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); font: inherit; color: var(--mud-palette-text-primary); cursor: pointer; text-decoration: none; min-height: 64px; box-shadow: var(--os-sjena); }
.os-portal-akcije .mud-icon-root { grid-row: span 2; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(20, 184, 166, .12); color: #0F766E; }
.os-portal-akcije b { font-size: .95rem; }
.os-portal-akcije span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.os-portal-akcije .istaknuto { border-color: #FCD34D; background: #FFFBEB; }
.os-portal-akcije .istaknuto .mud-icon-root { background: #F59E0B; color: #fff; }
.os-portal-akcije .istaknuto.plavo { border-color: #BAE6FD; background: #F0F9FF; }
.os-portal-akcije .istaknuto.plavo .mud-icon-root { background: #0284C7; }
.os-portal-akcije .istaknuto.ljubicasto { border-color: #DDD6FE; background: #F5F3FF; }
.os-portal-akcije .istaknuto.ljubicasto .mud-icon-root { background: #7C3AED; }
.os-portal-naslov { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 12px; }
.os-portal-red { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-portal-red > div:last-child { display: grid; }
.os-portal-red span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.os-portal-red.buduci .os-vrijeme-blok { background: rgba(20, 184, 166, .15); color: #0F766E; }
.os-portal-red .os-vrijeme-blok { line-height: 1.2; font-size: .82rem; padding: 6px 8px; }
.os-portal-preporuka { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #FDF2F8, #FCE7F3); color: #9D174D; margin-bottom: 14px; }
.os-portal-preporuka > div { display: grid; }
.os-portal-preporuka span { font-size: .8rem; }
.os-portal-meni { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--mud-palette-lines-default); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.os-portal-meni button { position: relative; border: 0; background: transparent; font: inherit; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; color: var(--mud-palette-text-secondary); cursor: pointer; font-size: .68rem; font-weight: 600; min-height: 52px; }
.os-portal-meni button.aktivno { color: #0F766E; }
.os-portal-meni button.aktivno .mud-icon-root { background: rgba(20, 184, 166, .15); border-radius: 999px; padding: 2px 14px; width: auto; }
.os-portal-tacka { position: absolute; top: 6px; right: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; border: 2px solid #fff; }

/* ---------- Ocjena i preporuka ---------- */
.os-zvjezdice-izbor { display: flex; justify-content: center; gap: 6px; }
.os-zvjezdice-izbor button { border: 0; background: transparent; font-size: 2.6rem; line-height: 1; color: #CBD5E1; cursor: pointer; transition: transform .12s, color .12s; padding: 4px; min-width: 48px; min-height: 48px; }
.os-zvjezdice-izbor button.puna { color: #F59E0B; }
.os-zvjezdice-izbor button:hover { transform: scale(1.12); }
.os-preporuka-kutija { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--mud-palette-background-gray); text-align: center; }
.os-preporuka-kutija span { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.os-preporuka-prednosti { display: grid; gap: 8px; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
.os-preporuka-prednosti div { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.os-preporuka-prednosti .mud-icon-root { color: #0F766E; }

/* ---------- TV ekran čekaonice ---------- */
.os-ekran { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 3vh; padding: 3vh 3vw; color: #E6FFFA; background: radial-gradient(1200px 600px at 100% 0%, rgba(20, 184, 166, .22), transparent 60%), linear-gradient(160deg, #031B1A, #06302E 55%, #0B4F4A); font-size: clamp(14px, 1.4vw, 26px); overflow: hidden; position: relative; }
.os-ekran-glava { display: flex; justify-content: space-between; align-items: center; gap: 2vw; }
.os-ekran-naziv { font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; }
.os-ekran-pod { color: #8FCFC5; }
.os-ekran-sat { text-align: right; display: grid; }
.os-ekran-sat b { font-size: 3em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.os-ekran-sat span { color: #8FCFC5; }
.os-ekran-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; min-height: 0; }
.os-ekran-panel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 2.4vh 2vw; }
.os-ekran-panel h2 { margin: 0 0 1.6vh; font-size: .9em; text-transform: uppercase; letter-spacing: .12em; color: #5EEAD4; }
.os-ekran-stolica { display: flex; justify-content: space-between; align-items: center; padding: 1.6vh 1.2vw; border-radius: 16px; margin-bottom: 1.2vh; background: rgba(255, 255, 255, .05); box-shadow: inset .4vw 0 0 var(--boja); }
.os-ekran-stolica .naziv { font-size: 1.1em; color: #CCFBF1; }
.os-ekran-stolica .ko { font-size: 1.9em; font-weight: 800; letter-spacing: .02em; }
.os-ekran-red { display: grid; grid-template-columns: 1fr auto auto; gap: 1.6vw; align-items: center; padding: 1.3vh 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.os-ekran-red .ko { font-size: 1.6em; font-weight: 800; }
.os-ekran-red .gdje, .os-ekran-red .kad { color: #8FCFC5; }
.os-ekran-prazno { color: #8FCFC5; padding: 2vh 0; }
.os-ekran-cekanje { margin-top: 2vh; color: #8FCFC5; }
.os-ekran-cekanje b { color: #fff; }
.os-ekran-savjet { display: flex; align-items: center; gap: 2vw; padding: 2vh 2vw; border-radius: 24px; background: rgba(255, 255, 255, .07); }
.os-ekran-savjet-oznaka { display: flex; align-items: center; gap: .4em; color: #FCD34D; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8em; white-space: nowrap; }
.os-ekran-savjet-tekst { flex: 1; font-size: 1.25em; line-height: 1.35; animation: osSavjet .7s ease; }
@keyframes osSavjet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.os-ekran-qr { display: flex; align-items: center; gap: 1vw; color: #8FCFC5; font-size: .8em; }
.os-ekran-qr > div { width: 7vw; min-width: 70px; background: #fff; border-radius: 12px; padding: 4px; }
.os-ekran-qr svg { width: 100%; height: auto; display: block; }
.os-ekran-poziv { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; background: rgba(3, 27, 26, .9); backdrop-filter: blur(6px); animation: osPoziv .5s ease; }
.os-ekran-poziv-oznaka { font-size: 1.6em; color: #5EEAD4; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
.os-ekran-poziv-tekst { font-size: 5em; font-weight: 800; letter-spacing: -.02em; color: #fff; }
@keyframes osPoziv { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) { .os-ekran-mreza { grid-template-columns: 1fr; } .os-ekran-qr { display: none; } }

.os-varijanta-red { display: flex; align-items: center; gap: 12px; }
.os-varijanta-naziv { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.25; }
.os-varijanta-opis { font-size: .82rem; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.os-varijanta-ukupno { font-size: .78rem; color: var(--mud-palette-text-secondary); padding-top: 8px; border-top: 1px dashed var(--mud-palette-lines-default); }
.os-varijanta-ukupno b { color: var(--mud-palette-text-primary); }
.os-predracun-red.zajednicko { font-size: .86rem; color: var(--mud-palette-text-secondary); }
.os-ekran-stolica .ko.slobodna { font-size: 1.1em; font-weight: 600; color: #5EEAD4; }

@media (max-width: 1279px) { .os-asistent-oznaka { display: none; } .os-asistent-dugme { padding: 0 16px; } }
.os-sadrzaj { padding-bottom: 96px !important; }
.os-recall-auto { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: rgba(20, 184, 166, .08); border: 1px solid rgba(20, 184, 166, .25); font-size: .84rem; }
.os-recall-auto b { display: block; color: #0F766E; }
.os-recall-auto span { color: var(--mud-palette-text-secondary); }
.os-recall-auto .mud-icon-root { color: #0F766E; }
.os-kt-termin.usko { padding: 2px 3px 2px 5px !important; font-size: .6rem !important; }
.os-kt-termin.usko .os-kt-status, .os-kt-termin.usko .os-kt-online { display: none; }
.os-kt-termin.usko .os-kt-red1 { text-overflow: clip; }
.os-tamno .os-zub.nedostaje line { stroke: #94A3B8; }
.os-traka-red > div > b { white-space: nowrap; margin-left: 8px; }