/* ═══════════════════════════════════════
   components.css — 公共组件样式
   面板、表单、按钮、上传区、结果区等
═══════════════════════════════════════ */

/* 面板 */
.panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:24px;
}
.panel-title{
  font-family:'Syne',sans-serif;font-size:15px;font-weight:700;
  margin-bottom:18px;color:#e2e8f0;
}

/* 点数条 */
.pts-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.12);
  border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:13px;
}
.pts-bar .val{color:#a78bfa;font-weight:600;font-size:15px}

/* 表单字段 */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:#94a3b8;margin-bottom:5px;letter-spacing:.5px}
.field input,
.field select,
.field textarea{
  width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 13px;font-size:13px;color:#e2e8f0;
  outline:none;transition:border .2s;font-family:'Noto Sans SC',sans-serif;
}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:rgba(167,139,250,.5)}
.field textarea{resize:vertical;min-height:90px}
.field select option{background:#1a1a2e}

/* 模型/工具 标签页 */
.tab-group{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tab{
  padding:8px 15px;border-radius:9px;font-size:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  color:#94a3b8;transition:all .15s;white-space:nowrap;
}
.tab.active{
  background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:#a78bfa;
}

/* 数量按钮组 */
.count-btns{display:flex;gap:6px}
.count-btn{
  flex:1;padding:8px;border-radius:8px;font-size:13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#94a3b8;
  transition:all .15s;
}
.count-btn.active{
  background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:#a78bfa;
}

/* 主操作按钮 */
.btn-primary{
  width:100%;padding:13px;border-radius:12px;font-size:15px;font-weight:600;
  cursor:pointer;border:none;
  background:linear-gradient(135deg,#6328ff,#a855f7);
  color:#fff;box-shadow:0 4px 20px rgba(99,40,255,.35);
  transition:all .2s;font-family:'Noto Sans SC',sans-serif;
}
.btn-primary:hover:not(:disabled){
  transform:translateY(-1px);box-shadow:0 6px 28px rgba(99,40,255,.5);
}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

/* 上传区 */
.upload-zone{
  border:2px dashed rgba(255,255,255,.1);border-radius:12px;
  padding:18px;text-align:center;cursor:pointer;
  min-height:64px;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:6px;
  transition:all .2s;
}
.upload-zone:hover,
.upload-zone.drag{
  border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.05);
}
.upload-zone p{font-size:12px;color:#475569}
.upload-zone img{max-height:90px;border-radius:8px}

/* 文件列表 */
.flist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fitem{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:7px 10px;font-size:12px;color:#94a3b8;
}
.fitem img{width:36px;height:36px;object-fit:cover;border-radius:5px}
.fitem .rm{margin-left:auto;cursor:pointer;color:#475569;font-size:16px;line-height:1}
.fitem .rm:hover{color:#ef4444}

/* 结果图片网格 */
.result-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;
}
.result-img-wrap{
  border-radius:12px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  aspect-ratio:1;
}
.result-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.dl-btn{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  border:none;border-radius:8px;padding:6px 12px;
  color:#e2e8f0;font-size:12px;cursor:pointer;
  opacity:0;transition:opacity .2s;
}
.result-img-wrap:hover .dl-btn{opacity:1}

/* 视频结果 */
.video-wrap{border-radius:12px;overflow:hidden;background:#000}
.video-wrap video{width:100%;display:block}
.dl-link{
  display:block;margin-top:10px;padding:10px;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;font-size:13px;color:#e2e8f0;text-decoration:none;
  transition:all .15s;
}
.dl-link:hover{background:rgba(167,139,250,.15)}

/* 历史记录面板 */
.hist-btn{
  position:fixed;right:20px;bottom:24px;z-index:200;
  background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3);
  border-radius:12px;padding:10px 16px;font-size:13px;color:#a78bfa;
  cursor:pointer;backdrop-filter:blur(10px);transition:all .2s;
  display:flex;align-items:center;gap:6px;
}
.hist-btn:hover{background:rgba(167,139,250,.25);transform:translateY(-1px)}
.hist-drawer{
  position:fixed;right:0;top:0;bottom:0;width:320px;z-index:300;
  background:rgba(10,10,25,.97);border-left:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);transform:translateX(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
}
.hist-drawer.open{transform:translateX(0)}
.hist-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07);
}
.hist-drawer-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:#e2e8f0}
.hist-close{background:none;border:none;color:#64748b;font-size:20px;cursor:pointer;padding:4px}
.hist-close:hover{color:#e2e8f0}
.hist-list{
  flex:1;overflow-y:auto;padding:12px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;
}
.hist-item{
  border-radius:10px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  aspect-ratio:1;cursor:pointer;transition:border-color .15s;
}
.hist-item:hover{border-color:rgba(167,139,250,.3)}
.hist-item img{width:100%;height:100%;object-fit:cover;display:block}
.hist-item .hist-dl{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:6px 8px 6px;display:flex;justify-content:flex-end;
  opacity:0;transition:opacity .2s;
}
.hist-item:hover .hist-dl{opacity:1}
.hist-dl a{font-size:11px;color:#e2e8f0;text-decoration:none;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:6px}
.hist-empty{grid-column:1/-1;text-align:center;padding:40px 0;color:#334155;font-size:13px}
.hist-footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}
.hist-clear{width:100%;padding:9px;border-radius:8px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);color:#f87171;font-size:13px;cursor:pointer;transition:all .15s}
.hist-clear:hover{background:rgba(239,68,68,.15)}

/* 进度环 */
.prog-ring svg { filter: drop-shadow(0 0 6px rgba(167,139,250,.5)); }
.prog-arc { transition: stroke-dashoffset .4s ease; }
.prog-txt { font-size:12px; color:#64748b; }

/* 骨架屏 */
.skeleton{
  animation:pulse 1.5s ease-in-out infinite;
  background:rgba(255,255,255,.06)!important;
}

/* 空状态 */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:240px;color:#334155;gap:12px;
}
.empty-state .icon{font-size:48px;opacity:.4}
.empty-state p{font-size:14px}

/* Toast 提示 */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(30,30,50,.95);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:12px 20px;font-size:13px;z-index:9999;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.toast.show{opacity:1}
.toast.err{border-color:rgba(239,68,68,.3);color:#fca5a5}
.toast.ok{border-color:rgba(52,211,153,.3);color:#34d399}

/* 文案区块 */
.copy-section{
  margin-bottom:14px;border:1px solid rgba(255,255,255,.07);
  border-radius:10px;overflow:hidden;
}
.copy-section-head{
  padding:10px 14px;background:rgba(255,255,255,.04);
  font-size:12px;color:#94a3b8;
  display:flex;justify-content:space-between;align-items:center;
}
.copy-section-body{
  padding:14px;font-size:13px;line-height:1.8;
  white-space:pre-wrap;word-break:break-word;
}

/* 徽标 */
.badge{
  display:inline-flex;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:500;
}
.badge-red{background:rgba(239,68,68,.12);color:#f87171}
.badge-green{background:rgba(52,211,153,.12);color:#34d399}
.badge-blue{background:rgba(59,130,246,.12);color:#60a5fa}
/* 移动端统一适配 */
@media(max-width:768px){
  .hist-btn{right:12px;bottom:14px;padding:8px 12px;font-size:12px}
  .hist-drawer{width:min(88vw,340px)}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

@media(max-width:480px){
  .pts-bar{padding:8px 10px;font-size:12px}
  .pts-bar .val{font-size:14px}
  .result-grid{grid-template-columns:1fr}
}