body.visual-card-open{
  overflow:hidden;
}

.visual-card-modal{
  position:fixed;
  z-index:260;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}

.visual-card-modal[hidden]{
  display:none!important;
}

.visual-card-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,1,6,.8);
  backdrop-filter:blur(13px);
}

.visual-card-dialog{
  position:relative;
  z-index:1;
  width:min(960px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:22px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  background:
    radial-gradient(circle at 15% 0,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34%),
    rgba(8,5,15,.97);
  box-shadow:0 40px 110px rgba(0,0,0,.62);
}

.visual-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.visual-card-head h2{
  margin:5px 0 0;
  font-family:"Outfit",sans-serif;
  font-size:34px;
}

.visual-card-close{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  padding:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  color:#fff;
  background:rgba(255,255,255,.04);
  font-size:24px;
}

.visual-card-preview-shell{
  position:relative;
  display:grid;
  place-items:center;
  min-height:360px;
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:19px;
  background:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%) 0 10px/20px 20px,
    linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%) 10px -10px/20px 20px,
    linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%) -10px 0/20px 20px,
    #040208;
  overflow:hidden;
}

.visual-card-canvas{
  display:block;
  width:min(100%,560px);
  height:auto;
  aspect-ratio:1;
  border-radius:16px;
  opacity:.15;
  transform:scale(.985);
  box-shadow:0 28px 75px rgba(0,0,0,.55);
  transition:opacity .3s,transform .3s;
}

.visual-card-canvas.ready{
  opacity:1;
  transform:none;
}

.visual-card-loading{
  position:absolute;
  inset:auto;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  color:#d6cedf;
  background:rgba(5,3,10,.78);
  backdrop-filter:blur(12px);
  font-size:10px;
}

.visual-card-loading[hidden]{
  display:none;
}

.visual-card-caption{
  margin:12px 2px 0;
  color:#8d829a;
  font-size:10px;
}

.visual-card-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}

.visual-card-actions button{
  min-height:40px;
}

.visual-card-status{
  min-height:18px;
  margin:10px 2px 0;
  color:#b8aec5;
  font-size:10px;
}

.queue-visual-card-button{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:11px;
  width:100%;
  margin:0 0 15px;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));
  border-radius:13px;
  color:#f6f1fb;
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 7%,transparent)),
    rgba(255,255,255,.025);
  text-align:left;
}

.queue-visual-card-button>span:first-child{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 22%,transparent);
  font-size:17px;
}

.queue-visual-card-button strong,
.queue-visual-card-button small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.queue-visual-card-button strong{
  font-size:10px;
}

.queue-visual-card-button small{
  margin-top:3px;
  color:#90859e;
  font-size:8px;
}

@media(max-width:760px){
  .visual-card-modal{
    align-items:end;
    padding:0;
  }

  .visual-card-dialog{
    width:100%;
    max-height:94vh;
    padding:16px 14px 22px;
    border-radius:22px 22px 0 0;
  }

  .visual-card-head h2{
    font-size:28px;
  }

  .visual-card-preview-shell{
    min-height:0;
    padding:10px;
  }

  .visual-card-canvas{
    width:min(100%,68vh);
  }

  .visual-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .visual-card-actions .text-button{
    grid-column:1/-1;
  }
}

@media(max-width:420px){
  .visual-card-actions{
    grid-template-columns:1fr;
  }

  .visual-card-actions .text-button{
    grid-column:auto;
  }
}