body {

  background: #030712;

}



.preview-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));

  gap: 16px;

}



.selected {

  border-color: #22d3ee !important;

  background-color: #164e63 !important;

  box-shadow: 0 0 0 2px rgba(34, 211, 238, .25);

}



.ref-img {

  width: 88px;

  height: 88px;

  border-radius: 10px;

  object-fit: cover;

}



.task-placeholder {

  animation: pulse 2s infinite;

}



@keyframes pulse {

  0%, 100% { opacity: .45; }

  50%       { opacity: .9; }

}



.ratio-box {

  border: 2px solid #3b82f6;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  border-radius: 6px;

  font-weight: 700;

  color: white;

  margin: auto;

  transition: all .2s;

}



.ratio-item:hover .ratio-box {

  transform: scale(1.08);

}



.custom-scroll::-webkit-scrollbar {

  width: 7px;

}



.custom-scroll::-webkit-scrollbar-thumb {

  background: #374151;

  border-radius: 999px;

}



#image-modal,

#prompt-modal {

  backdrop-filter: blur(6px);

}



.prompt-preview {

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  overflow: hidden;

  line-height: 1.45;

  max-height: 5.8em;

  word-break: break-all;

}



.rotate-180 {

  transform: rotate(180deg);

}

/* 手机端画廊：2列，使用缩略图尺寸 */
@media (max-width: 767px) {
  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* 锁定底部固定栏，防止浏览器地址栏收缩时跳动 */
  .mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }
}