:root{
  --bg:#0b0d10;
  --panel: rgba(11,13,16,.68);
  --fg:#f5f7fb;
  --muted: rgba(245,247,251,.78);

  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);

  --shadow: 0 12px 35px rgba(0,0,0,.38);

  --topbar-h: 56px;

  /* safe-area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* =========================
   BASE
========================= */

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* =========================
   TOP BAR (ISPRAVNO)
========================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 14px;
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar .brand{
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Back button */
.topbar .back{
  position: absolute;
  left: 12px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 36px;
  padding: 0 12px;

  border-radius: 12px;
  text-decoration: none;
  color: #fff;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);

  font-weight: 800;

  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.topbar .back:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.topbar .back:active{
  transform: translateY(0);
}

.topbar .back:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.16), 0 10px 20px rgba(0,0,0,0.25);
}

/* =========================
   GRID
========================= */

.feed{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  padding:
    12px
    calc(12px + var(--safe-right))
    calc(14px + var(--safe-bottom))
    calc(12px + var(--safe-left));
}

/* Tablet */
@media (min-width: 700px){
  .feed{ grid-template-columns: repeat(3, 1fr); }
}

/* Desktop */
@media (min-width: 1024px){
  .feed{ grid-template-columns: repeat(4, 1fr); }
}

.slide{
  padding: 0;
  margin: 0;
}

/* slike */
.slide img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;

  border-radius: 18px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.08);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* veće slike */
@media (min-width: 1024px){
  .slide img{ height: 240px; }
}

/* hover */
@media (hover:hover){
  .slide img:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.14);
    cursor: pointer;
  }
}

/* =========================
   LIGHTBOX
========================= */

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 100;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.92);
  padding:
    calc(14px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(14px + var(--safe-bottom))
    calc(14px + var(--safe-left));
}

.lightbox.open{ display: flex; }

.lb-figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  max-width: 92vw;
  max-height: 88vh;
}

.lightbox img{
  display: block;
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;

  border-radius: 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.lb-caption{
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
  max-width: 92vw;

  margin-bottom: 64px;
}

/* close */
.lb-close{
  position: absolute;
  top: calc(14px + var(--safe-top));
  right: calc(14px + var(--safe-right));

  font-size: 22px;
  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,.10);
  color: var(--fg);
  border: 1px solid var(--border2);
  cursor: pointer;

  backdrop-filter: blur(10px);
}

/* =========================
   NAV BUTTONS
========================= */

.lb-nav{
  position: absolute;
  bottom: calc(18px + var(--safe-bottom));

  width: 54px;
  height: 54px;
  border-radius: 999px;

  font-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border2);
  background: rgba(255,255,255,.12);
  color: var(--fg);

  cursor: pointer;
  backdrop-filter: blur(10px);
}

.lb-prev{ left: calc(18px + var(--safe-left)); }
.lb-next{ right: calc(18px + var(--safe-right)); }

.lb-nav:active{ transform: translateY(1px); }

/* mobile */
@media (max-width: 380px){
  .lb-nav{
    width: 48px;
    height: 48px;
    font-size: 40px;
  }

  .lb-caption{
    margin-bottom: 58px;
  }
}