/* ============================================================
   PopupWidget — 独立浮窗控件样式
   · 表单内元素：form .pw-*
   · 浮窗/遮罩（body直接子元素）：.pw-aihuihua .pw-*
   ============================================================ */

/* ── 遮罩层 ── */
.pw-aihuihua.pw-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.pw-aihuihua.pw-overlay.pw-show { display: block; }

/* ── 浮窗容器 ── */
.pw-aihuihua.pw-popup {
  display: none;
  position: fixed;
  z-index: 9001;
  background: #1c1c1c;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  padding: 16px;
  min-width: 300px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
  animation: pw-pop-in 0.15s ease;
}
.pw-aihuihua.pw-popup.pw-show { display: block; }

@keyframes pw-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── 浮窗标题 ── */
.pw-aihuihua .pw-popup-title {
  font-size: 11px;
  color: #666;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── 触发按钮（限定在任意 form 内） ── */
form .pw-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 6px 14px;
  color: #cccccc;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
  user-select: none;
}
form .pw-trigger:hover {
  background: #252525;
  border-color: #ffffff;           /* ← 改为白色 */
}
form .pw-trigger.pw-active {
  border-color: #ffffff;           /* ← 改为白色 */
  background: #2a2a2a;
}
form .pw-trigger .pw-label {
  color: #999;
  font-size: 14px;
}
form .pw-trigger .pw-value {
  color: #ffffff;                  /* ← 改为白色 */
  font-weight: 600;
}
form .pw-trigger .pw-arrow {
  color: #555;
  font-size: 10px;
}

/* ── 比例网格 ── */
.pw-aihuihua .pw-ratio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pw-aihuihua .pw-ratio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 42px;
}
.pw-aihuihua .pw-ratio-item:hover       { background: #252525; }
.pw-aihuihua .pw-ratio-item.pw-selected { background: #2a2a2a; }

.pw-aihuihua .pw-ratio-icon {
  width: 26px;
  height: 20px;
  border: 1.5px solid #444;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.pw-aihuihua .pw-ratio-item:hover       .pw-ratio-icon,
.pw-aihuihua .pw-ratio-item.pw-selected .pw-ratio-icon {
  border-color: #ffffff;           /* ← 改为白色 */
}

.pw-aihuihua .pw-ratio-label { font-size: 12px; color: #fff; white-space: nowrap; }
.pw-aihuihua .pw-ratio-item.pw-selected .pw-ratio-label {
  color: #ffffff;                  /* ← 改为白色 */
}

/* 比例图标尺寸变体 */
.pw-aihuihua .pw-ratio-icon.pw-r-auto { width:20px; height:20px; border-radius:10%; font-size:9px; color:#666; border:1px dotted #fff; }
.pw-aihuihua .pw-ratio-icon.pw-r-1_1  { width:20px; height:20px; }
.pw-aihuihua .pw-ratio-icon.pw-r-2_3  { width:16px; height:24px; }
.pw-aihuihua .pw-ratio-icon.pw-r-3_2  { width:24px; height:16px; }
.pw-aihuihua .pw-ratio-icon.pw-r-3_4  { width:18px; height:24px; }
.pw-aihuihua .pw-ratio-icon.pw-r-4_3  { width:26px; height:20px; }
.pw-aihuihua .pw-ratio-icon.pw-r-4_5  { width:20px; height:25px; }
.pw-aihuihua .pw-ratio-icon.pw-r-5_4  { width:25px; height:20px; }
.pw-aihuihua .pw-ratio-icon.pw-r-9_16 { width:15px; height:27px; }
.pw-aihuihua .pw-ratio-icon.pw-r-16_9 { width:28px; height:16px; }
.pw-aihuihua .pw-ratio-icon.pw-r-21_9 { width:32px; height:14px; }

/* ── 数字网格（张数） ── */
.pw-aihuihua .pw-count-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pw-aihuihua .pw-count-item {
  flex: 1;
  min-width: 40px;
  padding: 9px 0;
  border-radius: 7px;
  border: 1px solid #2d2d2d;
  background: #222;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.pw-aihuihua .pw-count-item:hover {
  background: #2a2a2a;
  border-color: #ffffff;           /* ← 改为白色 */
  color: #ffffff;                  /* ← 改为白色 */
}
.pw-aihuihua .pw-count-item.pw-selected {
  background: #2a2a2a;
  border-color: #ffffff;           /* ← 改为白色 */
  color: #ffffff;                  /* ← 改为白色 */
}

/* ── 列表选项（分辨率等） ── */
.pw-aihuihua .pw-list { display: flex; flex-direction: column; gap: 6px; }
.pw-aihuihua .pw-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 7px;
  border: 1px solid #2d2d2d;
  background: #222;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pw-aihuihua .pw-list-item:hover {
  background: #2a2a2a;
  border-color: #ffffff;           /* ← 改为白色 */
}
.pw-aihuihua .pw-list-item.pw-selected {
  background: #2a2a2a;
  border-color: #ffffff;           /* ← 改为白色 */
}
.pw-aihuihua .pw-list-item .pw-item-name { font-size: 13px; color: #ccc; }
.pw-aihuihua .pw-list-item.pw-selected .pw-item-name {
  color: #ffffff;                  /* ← 改为白色 */
}
.pw-aihuihua .pw-list-item .pw-item-tag {
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #2a2a2a;
  color: #ffffff;                  /* ← 改为白色 */
  border: 1px solid #555;
}

/* ── 尺寸输入行 ── */
.pw-aihuihua .pw-size-row { display: flex; align-items: center; gap: 8px; }
.pw-aihuihua .pw-size-label { font-size: 12px; color: #666; width: 16px; text-align: center; }
.pw-aihuihua .pw-size-input {
  flex: 1;
  background: #222;
  border: 1px solid #2d2d2d;
  border-radius: 6px;
  padding: 7px 10px;
  color: #e0e0e0;
  font-size: 13px;
  text-align: center;
  outline: none;
}
.pw-aihuihua .pw-size-input:hover,
.pw-aihuihua .pw-size-input:focus {
  border-color: #ffffff;           /* ← 改为白色 */
}
.pw-aihuihua .pw-size-link { font-size: 14px; color: #444; padding: 0 4px; }
.pw-aihuihua .pw-size-unit { font-size: 12px; color: #666; }

/* ── 确认按钮 ── */
.pw-aihuihua .pw-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px 0;
  border-radius: 6px;
  border: none;
  background: #7c3aed;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.pw-aihuihua .pw-confirm-btn:hover { background: #6d28d9; }