:root{
  --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);
}
*{box-sizing:border-box}
html,body{margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial;overscroll-behavior:contain}
body{padding-left:var(--safe-left);padding-right:var(--safe-right)}

/* NAVBAR */
.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  padding-top: calc(12px + var(--safe-top));
  display:flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #22324a;
  flex-wrap:wrap;
}
.navbar a{
  color:#7fff7f;
  text-decoration:none;
  font-weight:bold;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 10px;
  border-radius:10px;
}
.navbar a:active{opacity:.85}
.navbar .spacer{margin-left:auto}

.container{padding:25px;max-width:1300px;margin:auto;padding-bottom: calc(25px + var(--safe-bottom));}
h1{margin:0 0 12px;color:#c7d5e0}

/* title */
.pageTitle{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:#c7d5e0}
.pageTitle .icon{font-size:22px;line-height:1}

/* tools */
.tools{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 18px}
.box{background:#1b2838;border:1px solid #22324a;border-radius:12px;padding:12px;flex:1;min-width:220px}
.searchRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type="text"]{
  padding:10px 12px;border-radius:10px;border:1px solid #22324a;
  background:#0f1a2b;color:#c7d5e0;min-width:220px;min-height:44px
}
button,.btn{
  background:#2a475e;border:1px solid #22324a;color:#c7d5e0;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px
}
button:hover,.btn:hover{filter:brightness(1.05)}
button:active,.btn:active{opacity:.85}
.small{font-size:12px;opacity:.85}

/* ✅ green utility */
.green{color:#7fff7f;font-weight:bold}

/* Grid: bolj stabilno na mobilnih */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px
}
@media(max-width:1200px){ .grid{grid-template-columns: repeat(3, 1fr);} }
@media(max-width:900px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media(max-width:520px){ .grid{grid-template-columns: repeat(2, 1fr); gap:12px;} }
@media(max-width:380px){ .grid{grid-template-columns: 1fr;} }

.card{
  background:#1b2838;border:1px solid #22324a;border-radius:14px;padding:12px;
  text-decoration:none;color:#c7d5e0;display:flex;flex-direction:column;gap:8px;
  position:relative;min-height:320px
}
.card:hover{border-color:#3b6ea8;box-shadow:0 0 0 2px rgba(59,110,168,.2)}
.card:active{opacity:.92}

/* Thumb: mobile-friendly (center) */
.card img{
  width:150px;height:150px;object-fit:cover;border-radius:10px;
  background:#0f1a2b;border:1px solid #22324a;align-self:flex-start
}

.card h3{margin:0;font-size:16px;color:#7fff7f}
.desc{margin:0;font-size:13px;opacity:.9;min-height:38px}
.metaText{font-size:12px;line-height:1.35;opacity:.95}

/* 18+ lock */
.locked{opacity:.78;}
.overlay18{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.60));
  pointer-events:none;border-radius:14px;
}
.badge18{
  position:absolute;top:10px;left:10px;
  background:rgba(15,26,43,0.85);
  border:1px solid #22324a;
  color:#ff7f7f;
  padding:6px 10px;border-radius:999px;
  font-weight:bold;font-size:12px;
  pointer-events:none;
}
.locked h3,
.locked .desc,
.locked .metaText{opacity:0.1;}

.lockText{
  position:absolute;bottom:12px;left:12px;right:12px;
  background:rgba(0,0,0,0.96);
  border:1px solid rgba(255,255,255,0.18);
  padding:10px 12px;border-radius:12px;
  font-size:13px;font-weight:bold;color:#ffffff;
  text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.6);
  pointer-events:none;
}

/* ✅ pagination */
.pager{
  margin-top:24px;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.pager a, .pager span{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #22324a;
  background:#0f1a2b;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.pager a{color:#7fff7f;font-weight:bold;}
.pager a:hover{filter:brightness(1.05)}
.pager .dim{opacity:.45;color:#7fff7f;font-weight:bold;}
.pager .cur{opacity:.9;color:#7fff7f;font-weight:bold;}

/* category popup */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none}
.overlay.show{display:block}
.pop{
  position:fixed;left:50%;top:90px;transform:translateX(-50%);
  background:#1b2838;border:1px solid #22324a;border-radius:14px;max-width:700px;width:92%;
  padding:14px;display:none;max-height:70vh;overflow:auto
}
.pop.open{display:block}
.pop h3{margin:0 0 10px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.catitem{display:flex;gap:8px;align-items:center;font-size:13px}
.catitem input{width:18px;height:18px}

/* ===== Mobile tweaks ===== */
@media(max-width:640px){
  .navbar{padding:10px 12px; gap:10px; flex-wrap:wrap;}
  .container{padding:14px;}
  .tools{gap:10px;}
  .box{min-width:0;}
  input[type="text"], input{min-width:0;width:100%;max-width:100%;}
  .searchRow{width:100%;}
  button,.btn{width:100%;}
  .card{min-height:auto;}
  .card img{width:120px;height:120px;}
  .pop{top:20px; max-height:80vh;}
}