/* BalkanLoop - izgled ("Topli Balkan"): jantar, tirkiz i topla tamna pozadina, naslovi u slovima Fraunces.
   Boje i veličine možeš mijenjati u :root (odmah ispod). Ostali ekrani (prozorčići, profil, dobrodošlica) su u screens.css. */
@property --g1 { syntax: '<color>'; inherits: true; initial-value: #3a2412; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #23343a; }
@property --g3 { syntax: '<color>'; inherits: true; initial-value: #2c1f12; }

:root {
  color-scheme: dark;
  --bg: #100c0a;
  --page: #17110e;
  --card: #211915;
  --card2: #2c221c;
  --card3: #382c24;
  --text: #fbf1e3;
  --dim: rgba(251, 241, 227, .66);
  --faint: rgba(251, 241, 227, .12);
  --line: rgba(251, 241, 227, .1);
  --amber: #f4a62a;          /* jantar: glavna boja */
  --amber2: #ffc55e;
  --ink: #1a1108;            /* tamno slovo na jantaru */
  --paprika: #e5533d;
  --teal: #2bb3a3;           /* tirkiz: potvrđeni profili i mali akcenti */
  --danger: #c9412d;
  --glass: rgba(23, 17, 14, .5);
  --glass-line: rgba(251, 241, 227, .14);
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --nav-h: 76px;
  /* sigurne zone (urez i donja traka telefona): Android aplikacija ih upisuje u --sat i --sab, a preglednik ih daje preko env() */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --safe-b: var(--sab);
  --ph: min(calc(100vh - 32px), 880px);
  --ph: min(calc(100dvh - 32px), 880px);
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Crect width='20' height='10' fill='%23f4a62a'/%3E%3Cpath d='M10 .8 16.4 5 10 9.2 3.6 5z' fill='%233b2412'/%3E%3Cpath d='M10 3 12.6 5 10 7 7.4 5z' fill='%23f4a62a'/%3E%3Cpath d='M0 0h3L0 2zM20 0h-3l3 2zM0 10h3L0 8zM20 10h-3l3-2z' fill='%233b2412'/%3E%3C/svg%3E");
  --kilim-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Crect width='20' height='10' fill='%23fbf1e3' fill-opacity='.22'/%3E%3Cpath d='M10 .8 16.4 5 10 9.2 3.6 5z' fill='%23100c0a' fill-opacity='.5'/%3E%3Cpath d='M10 3 12.6 5 10 7 7.4 5z' fill='%23fbf1e3' fill-opacity='.3'/%3E%3Cpath d='M0 0h3L0 2zM20 0h-3l3 2zM0 10h3L0 8zM20 10h-3l3-2z' fill='%23100c0a' fill-opacity='.5'/%3E%3C/svg%3E");
  transition: --g1 1s ease, --g2 1s ease, --g3 1s ease;
}

*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: #3d3027 transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* ambijentalno svjetlo: boje videa koji trenutno gledaš svijetle iza telefona (vidi se na velikom ekranu) */
body::before {
  content: ""; position: fixed; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48vmax 42vmax at 28% 22%, var(--g1), transparent 70%),
    radial-gradient(42vmax 38vmax at 78% 30%, var(--g2), transparent 70%),
    radial-gradient(52vmax 42vmax at 52% 100%, var(--g3), transparent 72%);
  opacity: .5;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .drop:focus-visible, .n:focus-visible { outline: 2px solid var(--amber2); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.fill { fill: currentColor; stroke: none; }
svg.verified { stroke: none; width: 15px; height: 15px; flex: none; }
input, textarea, select { font: inherit; }
.serif { font-family: var(--display); }

/* ------------------------------------------------------------ raspored stranice */
.stage { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 100%; align-items: center; padding: 16px; }
.side { grid-area: 1 / 1; justify-self: end; width: 300px; margin-right: 56px; color: var(--dim); }
.phone { grid-area: 1 / 2; }
.arrows { grid-area: 1 / 3; justify-self: start; margin-left: 22px; display: grid; gap: 12px; transition: opacity .2s; }
.arrows button { width: 48px; height: 48px; border-radius: 16px; background: rgba(251, 241, 227, .08); border: 1px solid var(--line); display: grid; place-items: center; transition: background .15s, transform .15s; }
.arrows.off { opacity: .28; pointer-events: none; }
.arrows button:hover { background: rgba(251, 241, 227, .16); }
.arrows button:active { transform: scale(.94); }
.arrows svg { width: 22px; height: 22px; }

.phone {
  position: relative; isolation: isolate; overflow: hidden; background: #000;
  container-type: inline-size;
  height: var(--ph); width: min(calc(var(--ph) * .52), 440px);
  border-radius: 34px;
  box-shadow: 0 0 0 1px rgba(251, 241, 227, .12), 0 40px 120px rgba(0, 0, 0, .6), 0 0 120px rgba(244, 166, 42, .1);
  box-shadow: 0 0 0 1px rgba(251, 241, 227, .12), 0 40px 120px rgba(0, 0, 0, .6), 0 0 130px -10px color-mix(in srgb, var(--g1) 55%, transparent);
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.logo { display: grid; place-items: center; flex: none; filter: drop-shadow(0 8px 22px rgba(244, 166, 42, .35)); }
.logo svg { width: 46px; height: 46px; stroke: none; }
.logo.big svg { width: 92px; height: 92px; }
.brand h1, .welcome h1 { margin: 0; font: 700 32px/1 var(--display); letter-spacing: -.01em; color: var(--text); }
.brand h1 span, .welcome h1 span { font-style: italic; color: var(--amber); }
.demo-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(244, 166, 42, .14); color: var(--amber2); font-weight: 700; font-size: 12px; margin-bottom: 14px; }
.side p { margin: 0 0 18px; line-height: 1.5; }
.keys { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.keys li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.keys li span { margin-left: 6px; }
kbd { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--card); border: 1px solid rgba(251, 241, 227, .16); border-bottom-width: 2px; font: 700 12px ui-monospace, Consolas, monospace; color: var(--text); }

@media (max-width: 1100px) { .side { display: none; } }
@media (max-width: 520px), (max-height: 560px) {
  :root { --ph: 100vh; --ph: 100dvh; }
  .stage { display: block; padding: 0; }
  .phone { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .side, .arrows { display: none; }
  body::before { display: none; }          /* svjetlo iza telefona se na malom ekranu ne vidi, pa ga ne crtamo */
}

/* ------------------------------------------------------------ dugmad */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 14px; background: var(--card2); color: var(--text); font-weight: 700; font-size: 14.5px; border: 1px solid var(--line); transition: background .15s, filter .15s, transform .1s; }
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--card3); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--amber); color: var(--ink); border-color: transparent; box-shadow: 0 6px 22px rgba(244, 166, 42, .24); }
.btn.primary:hover { filter: brightness(1.07); background: var(--amber); }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; border-color: rgba(251, 241, 227, .2); }
.btn.sm { height: 34px; font-size: 13px; padding: 0 16px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.iconbtn svg { width: 26px; height: 26px; }
.gbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); transition: background .15s, transform .1s; }
.gbtn:hover { background: rgba(23, 17, 14, .7); }
.gbtn:active { transform: scale(.94); }
.gbtn svg { width: 21px; height: 21px; }

/* avatar: zaobljeni kvadrat, slovo u slovima Fraunces */
.av { --s: 44px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 34%; background: linear-gradient(145deg, var(--c), var(--c2)); color: var(--ink-c, #fff8ec); font: 700 italic calc(var(--s) * .5)/1 var(--display); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); user-select: none; }

/* ------------------------------------------------------------ gornja traka */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 8; height: calc(62px + var(--sat)); padding: calc(10px + var(--sat)) 10px 0; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar::before { content: ""; position: absolute; inset: 0 0 -26px 0; background: linear-gradient(rgba(16, 12, 10, .55), transparent); pointer-events: none; z-index: -1; }
.tabs { position: absolute; left: 50%; top: calc(10px + var(--sat)); transform: translateX(-50%); width: max-content; display: grid; grid-template-columns: repeat(3, 1fr); height: 40px; padding: 3px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
.tabs .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 19px; background: var(--amber); box-shadow: 0 3px 14px rgba(244, 166, 42, .35); transform: translateX(calc(var(--i, 1) * 100%)); transition: transform .32s cubic-bezier(.3, .9, .3, 1); }
.tabs[data-i="0"] { --i: 0; }
.tabs[data-i="1"] { --i: 1; }
.tabs[data-i="2"] { --i: 2; }
.tabs button { position: relative; z-index: 1; display: grid; place-items: center; padding: 0 8px; padding: 0 clamp(7px, 2.5cqw, 13px); white-space: nowrap; font-weight: 700; font-size: 12px; font-size: clamp(11.5px, 3.4cqw, 14.5px); color: rgba(251, 241, 227, .74); transition: color .25s; }
.tabs button.on { color: var(--ink); }
.tabs button:focus-visible { outline-offset: -2px; border-radius: 19px; }
@container (max-width: 319px) {
  .gbtn { width: 36px; height: 36px; margin-top: 2px; }
  .gbtn svg { width: 19px; height: 19px; }
  .tabs { height: 36px; top: calc(12px + var(--sat)); }
  .tabs button { font-size: 10.5px; padding: 0 5px; }
}
.regionchip { position: absolute; top: calc(58px + var(--sat)); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 15px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 700; font-size: 12.5px; white-space: nowrap; animation: chipIn .35s ease both; }
.regionchip svg { width: 14px; height: 14px; color: var(--amber); }
.regionchip svg.chev { width: 12px; height: 12px; opacity: .7; }
@keyframes chipIn { from { opacity: 0; transform: translate(-50%, -6px); } }
.hint { position: absolute; top: calc(58px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 9; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(23, 17, 14, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-line); font-weight: 700; font-size: 13px; white-space: nowrap; animation: hintIn .45s ease both; }
.hint svg { width: 16px; height: 16px; }
.phone[data-tab="local"] .hint { top: calc(96px + var(--sat)); }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ------------------------------------------------------------ prikazi */
#views, .view { position: absolute; inset: 0; }
.view[hidden] { display: none; }
.view.page { overflow-y: auto; overscroll-behavior: contain; background: var(--page); padding: 0 16px calc(var(--nav-h) + var(--safe-b) + 24px); }
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: calc(104px + var(--sat)) 28px calc(100px + var(--safe-b)); text-align: center; color: var(--dim); background: radial-gradient(360px 300px at 50% 38%, rgba(244, 166, 42, .13), transparent 70%), var(--page); }
.empty .em-ico { width: 74px; height: 74px; margin-bottom: 6px; display: grid; place-items: center; color: var(--ink); background: var(--amber); border-radius: 26px; transform: rotate(45deg) scale(.82); box-shadow: 0 12px 34px rgba(244, 166, 42, .3); }
.empty .em-ico svg { width: 34px; height: 34px; transform: rotate(-45deg); }
.empty b { color: var(--text); font: 700 21px/1.2 var(--display); }
.empty span { max-width: 300px; line-height: 1.5; }
.empty .btn { margin-top: 8px; }
.empty .btns { display: grid; gap: 8px; justify-items: center; margin-top: 8px; }

/* ------------------------------------------------------------ tok videa */
.feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.post { --pt: 24, 17, 12; position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
.media, .media video, .media img.vid, .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.media video, .media img.vid { object-fit: cover; background: #000; }
.post.land .media video, .post.land .media img.vid { object-fit: contain; }
.poster { z-index: 1; object-fit: cover; transition: opacity .3s; pointer-events: none; user-select: none; }
.post.ready .poster { opacity: 0; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(var(--pt), .82) 0, rgba(var(--pt), .4) 24%, transparent 50%), linear-gradient(to bottom, rgba(16, 12, 10, .5) 0, transparent 17%); }
.tap { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.sticker-ov { position: absolute; right: 14px; top: calc(14px + var(--sat)); z-index: 3; font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); pointer-events: none; user-select: none; }
/* #78: kucani tekst preko kadra (odvojeno od naljepnice - koja je desno gore, i od .info kartice - koja je dole) */
.text-ov { position: absolute; left: 14px; right: 70px; top: calc(14px + var(--sat)); z-index: 3; font: 800 15px/1.3 var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; user-select: none; overflow-wrap: break-word; }
.pp { position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 30px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .18s, transform .18s; pointer-events: none; }
.pp svg { width: 38px; height: 38px; margin-left: 4px; }
.post.is-paused .pp { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.spin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px; border-radius: 9px; border: 3px solid rgba(251, 241, 227, .25); border-top-color: var(--amber); transform: rotate(45deg); animation: spinD .9s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.post.buffering:not(.is-paused) .spin { opacity: 1; }
@keyframes spinD { to { transform: rotate(405deg); } }
.vmsg { position: absolute; inset: 0; z-index: 2; display: none; place-content: center; text-align: center; padding: 32px 84px 32px 28px; background: rgba(16, 12, 10, .72); font-weight: 700; pointer-events: none; }
.post.failed .vmsg { display: grid; }
.post.failed .pp, .post.failed .spin { display: none; }
.bursts { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.burst { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; opacity: 0; transform: rotate(var(--rot)) scale(.4); animation: burst .9s ease-out forwards; filter: drop-shadow(0 8px 22px rgba(244, 166, 42, .6)); }
.burst svg { width: 100%; height: 100%; stroke-width: 1.5; color: var(--amber); }
.burst .cpb { fill: var(--amber); stroke: var(--amber); }
.burst .cph, .burst .cps { stroke: var(--amber); }
.burst .cpt { stroke: #ffe0a3; stroke-width: 1.3; }
@keyframes burst {
  0% { opacity: 0; transform: rotate(var(--rot)) scale(.4); }
  15% { opacity: 1; transform: rotate(var(--rot)) scale(1.18); }
  30% { transform: rotate(var(--rot)) scale(.96); }
  70% { opacity: 1; transform: rotate(var(--rot)) scale(1) translateY(-8px); }
  100% { opacity: 0; transform: rotate(var(--rot)) scale(1.3) translateY(-70px); }
}

/* desna strana: staklena kapsula s radnjama */
.rail { position: absolute; right: 9px; bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 3; width: 54px; padding: 6px 0 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 28px; background: rgba(var(--pt), .52); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.act { display: grid; justify-items: center; gap: 2px; width: 100%; padding: 8px 0 5px; font-size: 11.5px; font-weight: 700; line-height: 1.1; color: var(--text); }
.act svg { width: 29px; height: 29px; transition: transform .15s; }
.act:hover svg { transform: scale(1.08); }
.act:active svg { transform: scale(.9); }
.act.like.on, .act.save.on { color: var(--amber2); }
.act.like.on svg { animation: cupPop .55s; }
.act.like.on .cpb, .act.save.on svg { fill: var(--amber); stroke: var(--amber); }
.act.like.on .cph, .act.like.on .cps { stroke: var(--amber); }
.act.like.on .cpt { stroke: #ffe0a3; animation: steam 2.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes cupPop { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.3) rotate(-12deg); } 58% { transform: scale(.96) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes steam { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-1.3px); opacity: .55; } }

/* donja lijeva strana: kartica s autorom, gradom i opisom */
.info { position: absolute; left: 10px; right: 75px; bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 3; padding: 11px 12px 10px; border-radius: 22px; background: rgba(var(--pt), .52); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.who { display: flex; align-items: center; gap: 10px; }
.avbtn { display: block; flex: none; border-radius: 34%; }
.avbtn .av { --s: 40px; }
.wt { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.handle { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; text-align: left; font: 700 italic 16.5px/1.15 var(--display); }
.handle .hn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.loc { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--dim); white-space: nowrap; }
.loc svg { width: 12px; height: 12px; flex: none; color: var(--amber); }
.loc span { overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 359px) {
  .loc .ago { display: none; }
  .who { gap: 8px; }
  .avbtn .av { --s: 36px; }
  .fol { height: 28px; padding: 0 10px; font-size: 12px; }
  .handle { font-size: 15.5px; }
}
.fol { flex: none; height: 30px; padding: 0 13px; border-radius: 15px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 12.5px; transition: background .2s, color .2s, transform .1s; }
.fol:active { transform: scale(.95); }
.post.following .fol { background: rgba(251, 241, 227, .16); color: var(--text); font-weight: 700; }
.post.mine .fol { display: none; }
.cap { margin: 8px 0 6px; font-size: 13.5px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.cap.open { display: block; -webkit-line-clamp: unset; max-height: 30vh; overflow: auto; }
.cap-tr { display: block; margin: -3px 0 6px; padding: 2px 0; font-size: 12px; font-weight: 700; color: var(--dim); }
.cap-tr:active { color: var(--amber2); }
.cap-tr.shown { color: var(--amber2); }
.tag { font-weight: 800; color: var(--amber2); }
.tag:hover { text-decoration: underline; }
.music { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--dim); overflow: hidden; }
.music > svg { width: 13px; height: 13px; flex: none; }
.marq { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1; }
.marq span { display: inline; }

/* traka napretka: "kilim" pojas na dnu ekrana */
.pbar { --p: 0; position: absolute; left: 0; right: 0; bottom: var(--safe-b); height: 24px; z-index: 4; touch-action: none; cursor: pointer; }
.pbar::before, .pbar i { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background-size: auto 100%; background-repeat: repeat-x; transition: height .14s; }
.pbar::before { background-image: var(--kilim-dim); }
.pbar i { background-image: var(--kilim); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.pbar b { position: absolute; bottom: 5px; left: calc(var(--p) * 100%); width: 13px; height: 13px; margin-left: -6.5px; border-radius: 3px; background: var(--amber2); border: 2px solid #3b2412; transform: rotate(45deg) scale(0); transition: transform .14s; pointer-events: none; }
.pbar:hover::before, .pbar:hover i, .post.scrub .pbar::before, .post.scrub .pbar i { height: 13px; }
.pbar:hover b, .post.scrub .pbar b { transform: rotate(45deg) scale(1); bottom: 7px; }
/* #82-slika: slika nema trajanje pa nema ni traku napretka (vidi feed.js _frame/_wire) */
.post.photo .pbar { display: none; }

/* posljednja kartica kad nestane videa iz kraja */
.endcard { display: grid; place-content: center; justify-items: center; gap: 10px; padding: calc(32px + var(--sat)) 30px calc(110px + var(--safe-b)); text-align: center; color: var(--dim); background: radial-gradient(380px 320px at 50% 36%, rgba(244, 166, 42, .16), transparent 70%), var(--page); }
.endcard .em-ico { width: 74px; height: 74px; margin-bottom: 6px; display: grid; place-items: center; color: var(--ink); background: var(--amber); border-radius: 26px; transform: rotate(45deg) scale(.82); box-shadow: 0 12px 34px rgba(244, 166, 42, .3); }
.endcard .em-ico svg { width: 34px; height: 34px; transform: rotate(-45deg); }
.endcard h2 { margin: 0; color: var(--text); font: 700 24px/1.2 var(--display); }
.endcard p { margin: 0; max-width: 300px; line-height: 1.5; }
.endcard .btns { display: grid; gap: 8px; justify-items: center; margin-top: 10px; }

/* ------------------------------------------------------------ donja navigacija: plutajuća traka s rombom */
.nav { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 14px); z-index: 10; height: 58px; padding: 0 4px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border-radius: 30px; background: rgba(23, 17, 14, .66); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 14px 36px rgba(0, 0, 0, .4); transition: background .2s; }
.nav.solid { background: rgba(33, 25, 21, .96); }
.nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; font-size: 10.5px; font-weight: 700; color: rgba(251, 241, 227, .62); transition: color .15s; }
.nav button:hover { color: var(--text); }
.nav button.on { color: var(--amber); }
.nav button::before { content: ""; position: absolute; top: 6px; left: 50%; width: 48px; height: 28px; margin-left: -24px; border-radius: 14px; background: rgba(244, 166, 42, .16); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.nav button.on::before { opacity: 1; transform: none; }
.nav button > * { position: relative; }
.nav svg { width: 24px; height: 24px; }
.nav .ico { display: block; width: 24px; height: 24px; }
.dot { position: absolute; top: -2px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--paprika); border: 2px solid #17110e; }
.nav .add::before { display: none; }
.nav .add svg { width: 48px; height: 48px; margin-top: -14px; filter: drop-shadow(0 6px 14px rgba(244, 166, 42, .4)); transition: transform .18s; stroke: none; }
.nav .add:hover svg { transform: scale(1.07) rotate(8deg); }
.nav .add:active svg { transform: scale(.94); }

/* ------------------------------------------------------------ obavijest (toast) */
.toast { position: absolute; left: 50%; top: calc(66px + var(--sat)); z-index: 60; max-width: 88%; padding: 10px 16px; border-radius: 999px; background: rgba(33, 25, 21, .96); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 700; font-size: 13.5px; text-align: center; opacity: 0; transform: translate(-50%, -12px); pointer-events: none; transition: opacity .22s, transform .22s; box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* obavezna obavijest o novoj verziji: ne nestaje sama (nema dugmeta za zatvaranje), samo klikom na "Osvježi" */
.updatebar { position: absolute; left: 10px; right: 10px; bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 20px; background: rgba(23, 17, 14, .96); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 36px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.updatebar.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.updatebar span { flex: 1; font-size: 13.5px; font-weight: 700; }
.updatebar button { flex: none; padding: 9px 16px; border-radius: 999px; border: none; background: var(--amber); color: var(--ink); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }

/* ------------------------------------------------------------ u Android aplikaciji (html dobije klasu "native") */
html.native, html.native body { overscroll-behavior: none; }
html.native body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.native input, html.native textarea { -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}