.hpdsg-site-selector{
  display:grid;
  gap:.8rem;
  margin-bottom:1rem
}

.hpdsg-sites{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem
}

.hpdsg-sites a{
  min-width:12rem;
  display:grid;
  gap:.15rem;
  padding:.75rem .9rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:.8rem;
  background:rgba(255,255,255,.025);
  color:inherit;
  text-decoration:none
}

.hpdsg-sites a:hover{
  border-color:rgba(157,92,255,.55);
  background:rgba(157,92,255,.08)
}

.hpdsg-sites a.active{
  border-color:#9d5cff;
  box-shadow:0 0 0 2px rgba(157,92,255,.15);
  background:rgba(157,92,255,.1)
}

.hpdsg-sites small{
  color:var(--muted,#aaa)
}

.hpdsg-selected-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:1rem 0
}

.hpdsg-selected-head>div{
  display:grid;
  gap:.2rem
}

.hpdsg-selected-head span{
  color:var(--muted,#aaa);
  font-size:.88rem
}

.hpdsg-selected-head strong{
  font-size:1.25rem
}

.hpdsg-pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem
}

.hpdsg-pack{
  padding:.75rem;
  overflow:hidden
}

.hpdsg-pack.active{
  border-color:#9d5cff;
  box-shadow:0 0 1.6rem rgba(157,92,255,.17)
}

.hpdsg-preview{
  position:relative;
  width:100%;
  aspect-ratio:527/745;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:.8rem;
  overflow:hidden;
  background-color:#080616
}

.hpdsg-current{
  position:absolute;
  left:.65rem;
  top:.65rem;
  padding:.38rem .6rem;
  border-radius:999px;
  background:rgba(8,5,24,.9);
  border:1px solid rgba(157,92,255,.7);
  color:#fff;
  font-size:.78rem;
  font-weight:800
}

.hpdsg-pack-body{
  display:grid;
  gap:.8rem;
  padding:.85rem .25rem .15rem
}

.hpdsg-pack-body h2{
  margin:0 0 .3rem
}

.hpdsg-pack-body p{
  margin:0;
  color:var(--muted,#aaa);
  font-size:.9rem
}

.hpdsg-pack-body form,
.hpdsg-pack-body button{
  width:100%
}

.hpdsg-active-note{
  min-height:2.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(157,92,255,.4);
  border-radius:.75rem;
  color:#d7c1ff;
  font-weight:800
}

@media(max-width:640px){
  .hpdsg-selected-head{
    align-items:stretch;
    flex-direction:column
  }

  .hpdsg-selected-head .button{
    width:100%
  }

  .hpdsg-sites{
    display:grid;
    grid-template-columns:1fr
  }

  .hpdsg-sites a{
    min-width:0
  }
}

/* HAC Design Rotation UI v1 */
.hpdsg-mode-panel{
  display:grid;
  gap:.8rem;
  margin-bottom:1rem
}

.hpdsg-mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem
}

.hpdsg-mode-grid form{
  margin:0
}

.hpdsg-mode-choice{
  width:100%;
  min-height:6.2rem;
  display:grid;
  align-content:center;
  gap:.35rem;
  padding:1rem 1.1rem;
  text-align:left;
  color:inherit;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.12);
  border-radius:.9rem;
  cursor:pointer
}

.hpdsg-mode-choice:hover{
  border-color:rgba(157,92,255,.55);
  background:rgba(157,92,255,.08)
}

.hpdsg-mode-choice.active{
  border-color:#9d5cff;
  background:rgba(157,92,255,.12);
  box-shadow:0 0 0 2px rgba(157,92,255,.14)
}

.hpdsg-mode-choice strong{
  font-size:1rem
}

.hpdsg-mode-choice small{
  color:var(--muted,#aaa);
  line-height:1.4
}

@media(max-width:640px){
  .hpdsg-mode-grid{
    grid-template-columns:1fr
  }
}

/* HAC Design Preview Image Fix */
.hpdsg-preview{
  position:relative;
  overflow:hidden;
}

.hpdsg-preview > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  border:0;
}

.hpdsg-current{
  z-index:2;
}