/* DP Download gallery - performance first */
#dpdlArrowBtn{
  position:fixed; top:12px; right:12px; z-index:99999;
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; user-select:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#dpdlArrowBtn[hidden]{ display:none !important; }
#dpdlArrowBtn .arr{ font-size:20px; line-height:1; transform:translateY(1px); }
#dpdlArrowBtn.pulse{ animation:dpdlPulse 1.2s ease-in-out infinite; }
@keyframes dpdlPulse{ 0%,100%{ transform:scale(1); opacity:.85;} 50%{ transform:scale(1.08); opacity:1;} }

.dpdlModal{
  position:fixed; inset:0; z-index:99998;
  background:rgba(0,0,0,.62);
  display:flex; align-items:stretch; justify-content:center;
  backdrop-filter: blur(6px);
}
.dpdlPanel{
  margin:16px;
  width:min(1200px, calc(100% - 32px));
  background:rgba(15,15,18,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.dpdlTop{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dpdlTop .title{ font-weight:700; letter-spacing:.3px; color:#fff; }
.dpdlTop .sub{ font-size:12px; color:rgba(255,255,255,.65); }
.dpdlTop .left{ display:flex; flex-direction:column; gap:2px; }
.dpdlTop .right{ display:flex; gap:8px; align-items:center; }
.dpdlBtn{
  padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
}
.dpdlBtn:hover{ background:rgba(255,255,255,.10); }
.dpdlBody{ display:grid; grid-template-columns: 1fr minmax(280px, 360px); min-height:0; flex:1; }
.dpdlGridWrap{ min-height:0; overflow:auto; padding:12px; }
.dpdlGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
}
.dpdlItem{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.dpdlItem:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; }
.dpdlItem img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  background:rgba(255,255,255,.05);
}
.dpdlItem .sk{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
  animation:dpdlSk 1.1s linear infinite;
  background-size:200% 100%;
}
@keyframes dpdlSk{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }
.dpdlSide{
  min-height:0;
  border-left:1px solid rgba(255,255,255,.10);
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
}
.dpdlPreview{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:rgba(0,0,0,.2);
}
.dpdlPreview img{ width:100%; height:auto; display:block; }
.dpdlMeta{ color:rgba(255,255,255,.75); font-size:12px; }
.dpdlActions{ display:flex; gap:10px; }
.dpdlPrimary{
  flex:1;
  padding:10px 12px; border-radius:14px;
  background:rgba(0,180,120,.18);
  border:1px solid rgba(0,180,120,.35);
  color:#eafff6; cursor:pointer;
}
.dpdlPrimary:hover{ background:rgba(0,180,120,.26); }
.dpdlSecondary{
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; cursor:pointer;
}
.dpdlFooter{
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.7);
  font-size:12px;
}
.dpdlLoadMore{ cursor:pointer; text-decoration:underline; }
@media (max-width: 860px){
  .dpdlBody{ grid-template-columns: 1fr; }
  .dpdlSide{ border-left:none; border-top:1px solid rgba(255,255,255,.10); }
}

/* Notice marquee in panel head */
.noticebar{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(255,230,0,.16), rgba(0,255,120,.12), rgba(255,60,0,.12));
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.noticebar .track{
  white-space:nowrap;
  will-change: transform;
  font-weight:900;
  letter-spacing:.3px;
  padding:10px 14px;
  animation: noticeScroll 22s linear infinite;
}
@keyframes noticeScroll{
  0%{ transform: translateX(100%); }
  100%{ transform: translateX(-100%); }
}