:root{
  --ui-accent:#ffb300;
  --ui-bg:#0e1016;
}

/* -------------------------------------
   Lazy loading (images/backgrounds)
   Page first -> media later
------------------------------------- */

.lazy-img{opacity:0;filter:blur(10px);transform:scale(1.01);transition:opacity .35s ease, filter .45s ease, transform .45s ease;}
.lazy-img.is-loaded{opacity:1;filter:blur(0);transform:scale(1);}

.lazy-skeleton{position:relative;overflow:hidden;}
.lazy-skeleton::after{
  content:"";
  position:absolute;inset:-40% -60%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-12deg);
  animation:lazyShimmer 1.2s infinite;
}
@keyframes lazyShimmer{0%{transform:translateX(-35%) skewX(-12deg)}100%{transform:translateX(35%) skewX(-12deg)}}

/* Lazy background helper: set --lazy-bg when ready */
.lazy-bg{background-image:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));background-size:cover;background-position:center;}
.lazy-bg.is-bg-loaded{background-image:var(--lazy-bg);}

/* Page Loader */
#pageLoader{
  position:fixed;
  inset:0;
  background:rgba(14,16,22,.94);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:999999;
  opacity:1;
  transition:opacity .28s ease;
}
#pageLoader.hidden{opacity:0;pointer-events:none}
#pageLoader .logo{
  letter-spacing:.4em;
  font-weight:900;
  font-size:34px;
  color:#f3d27a;
  text-shadow:0 10px 40px rgba(0,0,0,.6);
}
#pageLoader .bar{
  width:min(360px,78vw);
  height:6px;
  border-radius:999px;
  overflow:hidden;
  margin-top:18px;
  background:rgba(255,255,255,.08);
}
#pageLoader .bar > i{
  display:block;
  width:35%;
  height:100%;
  background:linear-gradient(90deg, rgba(255,179,0,.4), var(--ui-accent), rgba(255,179,0,.35));
  border-radius:999px;
  animation:loaderMove 1.05s ease-in-out infinite;
}
@keyframes loaderMove{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(120%)}
  100%{transform:translateX(240%)}
}

/* Page fade transition */
body.page-fadeout{opacity:.0;transition:opacity .22s ease}
body.page-fadein{opacity:1;transition:opacity .22s ease}

/* Bottom nav — unified (matches profile.php) */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  height:68px;
  background:#121421;
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-top:1px solid #222;
  z-index:500;
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:#9aa0b2;
  opacity:.6;
}
.nav-item svg{
  width:22px;
  height:22px;
  fill:currentColor;
}
.nav-item.active{
  color:var(--ui-accent);
  opacity:1;
  font-weight:800;
}

/* Bottom nav — unified (matches profile.php) */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  height:68px;
  background:#121421;
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-top:1px solid #222;
  z-index:500;
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:#9aa0b2;
  opacity:.6;
}
.nav-item svg{
  width:22px;height:22px;
  fill:currentColor;
}
.nav-item.active{
  color:var(--ui-accent);
  opacity:1;
  font-weight:800;
}