/* ════════════════════════════════════════════════════════════════
   PKA AI 功能样式 — AI 抠图 / AI 美化
   复用 converter.css 的设计 token（--ac/--bg/--bd/--r 等）
════════════════════════════════════════════════════════════════ */

.pka-ai-panel {
  padding: 18px 20px 28px;
  max-width: 1080px;
  margin: 0 auto;
}

/* 顶部标题 + 配额 */
.pka-ai-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.pka-ai-title {
  font-size: 18px; font-weight: 700; color: var(--tx);
  display: flex; align-items: baseline; gap: 8px;
}
.pka-ai-sub { font-size: 12.5px; font-weight: 500; color: var(--mt); }
.pka-ai-quota {
  font-size: 12.5px; font-weight: 600; color: var(--ac-h);
  background: var(--ac-lt); border: 0.5px solid var(--ac-bd);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

/* 主体两栏 */
.pka-ai-body {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.pka-ai-left  { display: flex; flex-direction: column; gap: 12px; }
.pka-ai-right { display: flex; flex-direction: column; gap: 12px; }

/* 上传拖拽区 */
.pka-ai-drop {
  position: relative; border: 1.5px dashed var(--bd2); border-radius: var(--rlg);
  background: var(--bg2); cursor: pointer; transition: .15s;
  padding: 28px 16px; text-align: center;
}
.pka-ai-drop:hover, .pka-ai-drop.drag { border-color: var(--ac); background: var(--ac-lt); }
.pka-ai-drop .pka-ai-file {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.pka-ai-drop-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.pka-ai-drop-text { font-size: 14px; color: var(--tx2); }
.pka-ai-drop-text strong { color: var(--ac-h); font-weight: 600; }
.pka-ai-drop-hint { font-size: 11.5px; color: var(--mt); margin-top: 5px; }

/* 场景输入（美化） */
.pka-ai-scene-label { font-size: 13px; font-weight: 600; color: var(--tx); margin-top: 2px; }
textarea.pka-ai-scene { resize: vertical; min-height: 64px; line-height: 1.5; }

/* 场景快捷标签 */
.pka-ai-tips { display: flex; flex-wrap: wrap; gap: 6px; }
.pka-ai-tip {
  font-size: 12px; color: var(--tx2); background: var(--white);
  border: 0.5px solid var(--bd); border-radius: 999px;
  padding: 5px 11px; cursor: pointer; transition: .12s; font-family: var(--font);
}
.pka-ai-tip:hover { border-color: var(--ac); color: var(--ac-h); background: var(--ac-lt); }

/* 运行按钮（复用 pka-btn-primary，仅补间距） */
.pka-ai-run { margin-top: 4px; }

/* 提示信息 */
.pka-ai-msg { font-size: 12.5px; min-height: 16px; line-height: 1.5; }
.pka-ai-msg.ok  { color: var(--ac-h); }
.pka-ai-msg.err { color: var(--err); }

/* 预览网格 */
.pka-ai-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pka-ai-preview-cell { display: flex; flex-direction: column; gap: 6px; }
.pka-ai-preview-label { font-size: 12px; font-weight: 600; color: var(--tx2); }
.pka-ai-preview-box {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border: 0.5px solid var(--bd); border-radius: var(--r);
  background: var(--bg2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pka-ai-preview-box img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
.pka-ai-ph { font-size: 12.5px; color: var(--mt); }

/* 透明棋盘格（抠图结果背景，便于看边缘） */
.pka-ai-checker {
  background-color: var(--white);
  background-image:
    linear-gradient(45deg, #ececed 25%, transparent 25%),
    linear-gradient(-45deg, #ececed 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececed 75%),
    linear-gradient(-45deg, transparent 75%, #ececed 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* 处理中 */
.pka-ai-loading {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--tx2); font-size: 12.5px;
}

/* 结果操作栏 */
.pka-ai-result-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.pka-ai-result-bar .pka-ab-btn { text-decoration: none; }

/* 响应式：窄屏堆叠 */
@media (max-width: 820px) {
  .pka-ai-body { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pka-ai-panel { padding: 14px 14px 24px; }
  .pka-ai-preview-grid { grid-template-columns: 1fr; }
}

/* 存入托管按钮 */
.pka-ai-result-bar .pka-ab-btn.ab-host {
  color: var(--ac-h); border-color: var(--ac-bd); background: var(--ac-lt);
}
.pka-ai-result-bar .pka-ab-btn.ab-host:hover { background: #e3e8ff; }
.pka-ai-result-bar .pka-ab-btn.ab-host:disabled { opacity: .65; cursor: default; }

/* ═══ AI 加油包（升级套餐页） ═══ */
.pka-aipack-section { margin: 18px 0 8px; }
.pka-aipack-head h2 { font-size: 17px; font-weight: 700; color: var(--tx); margin-bottom: 4px; }
.pka-aipack-head p  { font-size: 12.5px; color: var(--tx2); line-height: 1.6; margin-bottom: 14px; }
.pka-aipack-head strong { color: var(--ac-h); }
.pka-aipack-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.pka-aipack-card {
  position: relative; background: var(--white);
  border: 1px solid var(--bd); border-radius: var(--rlg);
  padding: 18px 16px; text-align: center; transition: .15s;
}
.pka-aipack-card:hover { border-color: var(--ac); box-shadow: 0 4px 14px rgba(99,102,241,.12); }
.pka-aipack-best { border-color: var(--ac-bd); background: linear-gradient(180deg,#fbfbff, #fff); }
.pka-aipack-tag {
  position: absolute; top: 10px; right: 10px;
  background: var(--ac); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.pka-aipack-name { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 8px; }
.pka-aipack-credits { font-size: 12.5px; color: var(--ac-h); font-weight: 600; margin-bottom: 10px; }
.pka-aipack-price { font-size: 26px; font-weight: 800; color: var(--tx); margin-bottom: 14px; }
.pka-aipack-price span { font-size: 26px; }
.pka-aipack-note { font-size: 11.5px; color: var(--mt); margin-top: 12px; line-height: 1.5; }
@media (max-width: 560px) { .pka-aipack-grid { grid-template-columns: 1fr; } }

/* AI 精修按钮（兜底用 Gemini） */
.pka-ai-result-bar .pka-ab-btn.ab-refine {
  color: #b45309; border-color: #fcd9a8; background: #fff7ed;
}
.pka-ai-result-bar .pka-ab-btn.ab-refine:hover { background: #ffedd5; }