/* ── Popup Runtime ── */

.popup-overlay{
  position:fixed;inset:0;z-index:var(--z-popup);
  background:linear-gradient(160deg,#0a0814 0%,#080510 50%,#0c0a18 100%);
  display:none;flex-direction:column;overflow:hidden;
}
.popup-overlay.open{display:flex;}

/* ── Blob ambience ── */
.popup-overlay::before,.popup-overlay::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(80px);
}
.popup-overlay::before{
  width:380px;height:380px;
  background:rgba(160,100,20,0.4);
  top:-140px;left:-80px;
  animation:popBlob1 9s ease-in-out infinite;
}
.popup-overlay::after{
  width:320px;height:320px;
  background:rgba(120,50,200,0.3);
  bottom:60px;right:-80px;
  animation:popBlob2 11s ease-in-out infinite;
}
@keyframes popBlob1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,30px);}}
@keyframes popBlob2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}

.popup-blob3{
  position:absolute;width:300px;height:300px;border-radius:50%;
  background:rgba(200,60,100,0.22);
  bottom:0;left:10%;filter:blur(80px);pointer-events:none;z-index:0;
  animation:popBlob3 10s ease-in-out infinite;
}
@keyframes popBlob3{0%,100%{transform:translate(0,0);}50%{transform:translate(20px,-25px);}}

.popup-box{
  width:100%;flex:1;display:flex;flex-direction:column;
  overflow:hidden;position:relative;z-index:2;
}

/* ── Carousel ── */
.popup-carousel{
  position:relative;margin:14px 14px 0;
  border-radius:20px;height:120px;overflow:hidden;flex-shrink:0;
}
.popup-carousel-track{
  display:flex;height:100%;
  transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.popup-slide{
  flex-shrink:0;width:100%;height:100%;
  position:relative;overflow:hidden;padding:0;
  background:#000;cursor:pointer;
}
.popup-slide img{width:100%;height:100%;object-fit:cover;display:block;}

.popup-carousel-dots{
  position:absolute;bottom:8px;right:14px;display:flex;gap:4px;
}
.pcd{
  width:5px;height:5px;border-radius:99px;
  background:rgba(255,255,255,0.35);
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.pcd.active{width:18px;background:#fff;}

/* ── Section header ── */
.popup-section-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px 4px;flex-shrink:0;
}
.popup-section-title{
  font-size:13px;font-weight:700;letter-spacing:1.5px;
  white-space:nowrap;text-transform:uppercase;
  background:linear-gradient(90deg,#d4a843,#f5d27a,#d4a843);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.popup-section-line{
  flex:1;height:1px;border-radius:99px;
  background:linear-gradient(to right,rgba(212,168,67,0.5),transparent);
}
.popup-section-header .popup-section-line:last-child{
  background:linear-gradient(to left,rgba(212,168,67,0.5),transparent);
}

/* ── App Grid ── */
.popup-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:4px;padding:0 8px 8px;
  overflow-y:auto;scrollbar-width:none;
  flex:1;min-height:0;align-content:start;
}
.popup-grid::-webkit-scrollbar{display:none;}

.popup-item{
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;padding:0 0 2px;
  -webkit-tap-highlight-color:transparent;
  border-radius:16px;transition:transform 0.15s;
}
.popup-item:active{transform:scale(0.91);}

.popup-ico{
  width:92%;padding-bottom:92%;height:0;
  border-radius:18px;overflow:hidden;
  position:relative;display:block;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  margin:0 auto;
}
.popup-ico img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover;
  border-radius:inherit;
}
.popup-ico::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,0.14) 0%,transparent 60%);
  pointer-events:none;border-radius:inherit;
}

.popup-item.large{grid-column:span 2;grid-row:span 2;}
.popup-item.large .popup-ico{width:100%;padding-bottom:100%;border-radius:20px;}
.popup-item.large .popup-ico img{transform:scale(1.08);}

.popup-name{
  font-size:11px;line-height:14px;height:14px;
  color:#fff;font-weight:500;letter-spacing:0.2px;
  margin-top:3px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:100%;
}

/* ── Close row ── */
.popup-close-row{
  flex-shrink:0;margin-top:auto;
  padding:6px 18px calc(18px + var(--safe-bottom));
  display:flex;justify-content:center;
}
.slide-unlock-track{
  width:240px;height:44px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}
.slide-unlock-thumb{
  position:absolute;top:3px;left:3px;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#c026d3);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;
  box-shadow:0 2px 10px rgba(139,92,246,0.5);
  touch-action:none;cursor:grab;z-index:2;
}
.slide-unlock-label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:rgba(255,255,255,0.3);
  letter-spacing:1px;
}

/* ── Skeleton ── */
.popup-skeleton{display:flex;flex-direction:column;align-items:center;gap:3px;}
.popup-skeleton .sk-ico{
  width:100%;padding-bottom:100%;border-radius:16px;
  background:rgba(255,255,255,0.06);position:relative;overflow:hidden;
}
.popup-skeleton .sk-ico::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);
  animation:skShimmer 1.5s infinite;
}
@keyframes skShimmer{to{left:160%;}}
.popup-skeleton .sk-name{
  width:70%;height:10px;border-radius:4px;
  background:rgba(255,255,255,0.06);margin-top:4px;
}