/* فونت فارسی (فولبک) */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/Vazir-font-face.css');

:root{
  --bg:#0f0f10;
  --panel:#161616;
  --gold:#f5c518;
  --muted:#bdbdbd;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Vazir", "Vazirmatn", "Tahoma", "Segoe UI", sans-serif;
  background:linear-gradient(180deg,#0b0b0b 0%, #111 100%);
  color:var(--gold);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header{
  text-align:center;
  padding:20px 12px;
  border-bottom:1px solid rgba(245,197,24,0.06);
}
header h1{
  margin:0;
  font-size:1.6rem;
  letter-spacing:0.02em;
}

/* layout */
main#view{padding:18px}

/* categories grid */
.categories{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  align-items:start;
}
.category{
  background:var(--panel);
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(245,197,24,0.08);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s;
}
.category:hover{ transform:translateY(-6px); box-shadow:0 10px 30px rgba(0,0,0,0.6) }
.category img{ width:100%; height:150px; object-fit:cover; display:block; }
.category .title{
  padding:10px;
  font-weight:700;
  color:var(--gold);
  text-align:center;
  background:linear-gradient(0deg, rgba(0,0,0,0.2), transparent);
}

/* gallery */
.back{
  display:inline-block;
  position:sticky;
  top:12px;
  margin:10px 0;
  padding:8px 14px;
  background:var(--gold);
  color:#0b0b0b;
  border:none;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
.gallery{
  margin-top:12px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.card{
  background:var(--panel);
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(245,197,24,0.06);
  text-align:center;
}
.card img{ width:100%; height:140px; object-fit:cover; display:block; cursor:zoom-in; }
.card .code{ padding:8px; color:var(--gold); font-weight:700; }

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.92);
  z-index:10000;
  touch-action:none;
}
.lightbox.show{ display:flex; }
.lb-inner{ max-width:95%; max-height:95%; display:flex; align-items:center; justify-content:center; }
.lb-inner img{ max-width:100%; max-height:100%; transform-origin:center center; transition:transform .08s linear; will-change:transform; }

/* close button */
.lb-close{
  position:fixed;
  right:12px;
  top:12px;
  background:transparent;
  color:var(--gold);
  border:1px solid rgba(245,197,24,0.15);
  padding:6px 10px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}

/* responsive tweaks */
@media (max-width:520px){
  .category img{ height:120px }
  .card img{ height:110px }
  header h1{ font-size:1.25rem }
}