/* ===== 赵阿龙智能体 · 深色科技 + 丰富动效 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0A0E1A;
  --bg2: #0F1424;
  --card: rgba(23,29,46,.82);
  --card2: #161C30;
  --border: rgba(124,150,255,.16);
  --text: #EAF0FF;
  --muted: #8B98B8;
  --accent: #6C8CFF;
  --accent2: #A05FF0;
  --cyan: #38D6F0;
  --green: #3DD68C;
  --red: #FF6B7A;
  --yellow: #FFC24B;
}
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1100px 560px at 82% -12%, rgba(64,180,243,.14), transparent 60%),
              radial-gradient(1000px 520px at 8% -8%, rgba(84,169,255,.16), transparent 60%),
              radial-gradient(900px 600px at 50% 115%, rgba(64,180,243,.08), transparent 60%),
              var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}

/* ===== 顶栏 ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(13,18,34,.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(84,169,255,.2);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #54A9FF, #40B4F3);
  color: #fff; font-size: 19px; font-weight: 700;
  box-shadow: 0 0 18px rgba(84,169,255,.5);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(84,169,255,.4); transform: rotate(0); }
  50% { box-shadow: 0 0 26px rgba(84,169,255,.8); transform: rotate(-4deg); }
}
.brand h1 {
  font-size: 18px; font-weight: 700;
  color: #F2F4F8;
  background: none;
  -webkit-text-fill-color: initial; color: #F2F4F8;
  letter-spacing: .2px;
}
@keyframes gradientFlow { to { background-position: 300% 0; } }
.brand p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.key-status {
  font-size: 13px; padding: 6px 14px; border-radius: 999px;
  background: rgba(251,191,36,.12); color: var(--yellow); border: 1px solid rgba(251,191,36,.3);
}
.running-badge {
  margin-left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(84,169,255,.14);
  border: 1px solid rgba(84,169,255,.35);
  color: #dceaff; font-size: 12.5px; font-weight: 600;
  cursor: pointer; flex: 0 0 auto;
  transition: background .18s, border-color .18s, transform .18s;
}
.running-badge:hover { background: rgba(84,169,255,.24); border-color: rgba(84,169,255,.55); transform: translateY(-1px); }
.running-badge:active { transform: translateY(0); }
.running-badge .ico { width: 16px; height: 16px; }
/* 运行中任务数气泡：金色小圆点，紧贴图标右侧，克制的数字角标 */
.running-badge .rb-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(251,191,36,.34); color: #fff7e0; font-size: 12px; font-weight: 800;
  line-height: 1; box-shadow: 0 0 10px rgba(251,191,36,.35);
}

/* 运行中任务弹层 */
.running-wrap { position: relative; margin-left: auto; }
.running-wrap .running-badge { margin-left: 0; }
.running-badge.has-run {
  background: rgba(251,191,36,.16);
  border-color: rgba(251,191,36,.45);
  color: #fde68a;
  box-shadow: 0 0 16px rgba(251,191,36,.28);
}
.running-badge.has-run .ico { animation: runPulse 1.2s ease-in-out infinite; }
@keyframes runPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.running-pop {
  position: absolute; top: calc(100% + 10px); right: 0; left: auto;
  transform: translateY(-8px);
  z-index: 2002;
  width: min(390px, 92vw); max-height: 62vh; overflow-y: auto;
  padding: 8px;
  background: rgba(17,24,43,.96);
  border: 1px solid rgba(84,169,255,.32);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(84,169,255,.14);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0; visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.running-wrap.open .running-pop { opacity: 1; visibility: visible; transform: translateY(0); }
/* 空状态：收窄为紧凑提示，不再撑成大横条遮挡下方内容 */
.running-pop.is-empty { width: auto; min-width: 240px; max-width: 320px; }
.running-pop.is-empty .running-pop-empty { padding: 16px 18px; }
.running-pop::-webkit-scrollbar { width: 8px; }
.running-pop::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 8px; }
.running-pop::-webkit-scrollbar-thumb { background: rgba(84,169,255,.35); border-radius: 8px; }
.running-pop-head {
  font-size: 13px; font-weight: 700; color: #F2F4F8;
  padding: 6px 10px 8px; letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 6px;
}
.running-pop-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 12px; color: var(--muted); font-size: 13px;
}
.running-pop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s, border-color .18s;
}
.running-pop-item + .running-pop-item { margin-top: 4px; }
.running-pop-item:hover { background: rgba(84,169,255,.10); border-color: rgba(84,169,255,.22); }
.rpi-icon {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(84,169,255,.14); color: #dceaff;
}
.rpi-icon .ico { width: 16px; height: 16px; }
.rpi-info { flex: 1; min-width: 0; }
.rpi-title {
  font-size: 13px; font-weight: 600; color: #F2F4F8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rpi-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rpi-stop { flex-shrink: 0; }
.running-pop-foot {
  font-size: 11px; color: var(--muted); text-align: center;
  padding: 8px 6px 4px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px;
}


.key-status.ok { background: rgba(52,211,153,.12); color: var(--green); border-color: rgba(52,211,153,.35); }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 6px; padding: 14px 28px 8px; flex-wrap: wrap; }
.tab-btn {
  position: relative;
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: color .18s, background .18s, transform .18s;
}
.tab-btn:hover { color: var(--text); background: rgba(84,169,255,.1); transform: translateY(-1px); }
.tab-btn.active {
  background: rgba(84,169,255,.14); color: #fff;
  border-color: rgba(84,169,255,.35);
  box-shadow: 0 4px 18px rgba(84,169,255,.25);
}
.tab-btn.active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--cyan));
  animation: tabIn .3s ease;
}
@keyframes tabIn { from { transform: scaleX(.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ===== 面板 ===== */
main { padding: 22px 28px 48px; }
.panel { display: none; }
.panel.active { display: block; animation: panelIn .35s cubic-bezier(.22,.9,.3,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.card {
  position: relative;
  background: linear-gradient(165deg, rgba(30,41,66,.85), rgba(19,26,46,.95));
  border: 1px solid rgba(84,169,255,.18);
  border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 10px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165,180,252,.45), transparent);
}
.card:hover { transform: translateY(-2px); border-color: rgba(84,169,255,.4); box-shadow: 0 16px 44px rgba(0,0,0,.4), 0 0 26px rgba(84,169,255,.12); }
.card.narrow { max-width: 720px; }
.card h2 {
  font-size: 17px; margin-bottom: 16px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  padding-left: 13px; position: relative;
}
.card h2::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #6CB5FF, #7CC3FF);
  box-shadow: 0 0 10px rgba(84,169,255,.6);
}
.card h2::after {
  content: ""; flex: 1; height: 1px; margin-left: 12px;
  background: linear-gradient(90deg, rgba(84,169,255,.35), transparent);
}

.grid-2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; gap: 18px; } }

/* ===== 表单（v4 参数排版：解决拥挤，加大段距/控件尺寸/视觉呼吸） ===== */
.field-label { display: block; font-size: 13.5px; color: #8FAED6; font-weight: 600; margin: 18px 0 10px; letter-spacing: .2px; }
.field-row { display: flex; gap: 18px; flex-wrap: wrap; row-gap: 14px; }
.field-grow { flex: 1; min-width: 200px; }
textarea, input[type=text], input[type=password], input[type=number], select {
  width: 100%; background: rgba(11,16,32,.7); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 11px 13px; font-size: 14px; line-height: 1.5; outline: none; transition: border-color .18s, box-shadow .18s;
  min-height: 42px; box-sizing: border-box;
}
select { padding-right: 30px; min-height: 44px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input[type=range] { min-height: auto; padding: 0; background: transparent; border: none; }
}
textarea { resize: vertical; line-height: 1.6; }
textarea:focus, input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(84,169,255,.18), 0 0 16px rgba(84,169,255,.12);
}
input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; border: none; background: transparent; }

/* ===== 上传区 ===== */
.dropzone {
  border: 1.5px dashed #34446b; border-radius: 12px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s; background: rgba(19,26,46,.5);
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: rgba(84,169,255,.08); box-shadow: 0 0 22px rgba(84,169,255,.12) inset; }
.dz-icon { display: inline-block; font-size: 30px; margin-bottom: 6px; animation: dzFloat 3s ease-in-out infinite; }
@keyframes dzFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.dropzone:hover .dz-icon { transform: translateY(-5px) scale(1.08); }
.dz-inner p { font-size: 14px; }
.dz-hint { font-size: 12px; color: var(--muted); }

.file-chip {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; animation: fadeIn .3s;
}
.file-chip img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.file-chip span { flex: 1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip audio { max-width: 260px; }
.file-chip video { max-width: 100%; max-height: 150px; width: auto; border-radius: 8px; background: #000; object-fit: contain; }
.chip-remove { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.chip-remove:hover { color: var(--red); }
.hidden { display: none !important; }

/* ===== 提示词模板 ===== */
.prompt-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.preset-btn {
  background: rgba(11,16,32,.6); border: 1px solid var(--border); color: var(--muted);
  padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: .18s;
}
.preset-btn:hover, .preset-btn.active { color: #fff; border-color: var(--accent); background: rgba(84,169,255,.2); box-shadow: 0 0 14px rgba(84,169,255,.25); }

/* ===== 按钮 ===== */
.btn { border: none; border-radius: 9px; padding: 11px 22px; font-size: 14px; cursor: pointer; font-weight: 600; transition: transform .15s, box-shadow .15s, filter .15s; }
.btn.primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; box-shadow: 0 4px 16px rgba(84,169,255,.35);
}
.btn.primary::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg); transition: left .5s;
}
.btn.primary:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(84,169,255,.45); }
.btn.primary:hover::after { left: 120%; }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.btn.big { width: 100%; margin-top: 16px; padding: 12px 20px; font-size: 15px; border-radius: 10px; }
.btn.small { padding: 6px 12px; font-size: 13px; margin: 0; border-radius: 8px; }
.btn.danger { background: rgba(248,113,113,.12); color: var(--red); border: 1px solid rgba(248,113,113,.35); }
.btn.danger:hover { background: rgba(248,113,113,.22); }

/* ===== 结果区 ===== */
.result-box {
  background: radial-gradient(circle at 50% 28%, rgba(84,169,255,.07), transparent 70%), rgba(11,16,32,.55);
  border: 1px solid var(--border); border-radius: 12px;
  min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; gap: 14px; position: relative;
}
.result-box .placeholder { color: var(--muted); font-size: 13px; text-align: center; padding: 30px 18px; border: 1px dashed rgba(249,249,249,0.6,.22); border-radius: 12px; width: 100%; max-width: 92%; }
.result-box .placeholder::before { content: "✨"; display: block; font-size: 32px; opacity: .45; margin-bottom: 10px; }
.result-box img { max-width: 100%; max-height: 520px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.result-box audio { width: 100%; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.result-actions a.btn { text-decoration: none; display: inline-block; }

.status-area { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; text-align: center; }
.spinner { width: 30px; height: 30px; border: 3px solid #2a3757; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-error { color: var(--red); font-size: 13px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.65; }
.status-line { margin-top: 10px; font-size: 13px; color: var(--green); }

/* ===== Toast / 全局加载 ===== */
.toast {
  position: fixed; left: 50%; top: max(84px, calc(env(safe-area-inset-top, 0px) + 76px)); bottom: auto; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  background: #232d49; color: #fff; padding: 10px 20px; border-radius: 10px;
  font-size: 14px; line-height: 1.45; text-align: center; overflow-wrap: anywhere;
  z-index: 1000; border: 1px solid var(--border); pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: toastPop .25s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width: 720px) {
  .toast { top: max(72px, calc(env(safe-area-inset-top, 0px) + 64px)); max-width: calc(100vw - 24px); padding: 10px 14px; }
}
@keyframes toastPop { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.global-loading { position: fixed; inset: 0; background: rgba(10,14,26,.55); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }

/* ===== 生成记录 ===== */
.records-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.records-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group { display: flex; gap: 6px; }
.records-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.record-card {
  background: rgba(19,26,46,.6); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.record-card:hover { transform: translateX(4px); border-color: rgba(84,169,255,.45); box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(84,169,255,.12); }
.record-main { display: flex; align-items: flex-start; gap: 12px; }
.record-icon { font-size: 24px; line-height: 1; margin-top: 2px; }
.record-info { flex: 1; min-width: 0; }
.record-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.record-desc { font-size: 13px; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; white-space: pre-line; }
.record-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.badge.success { background: rgba(52,211,153,.14); color: var(--green); }
.badge.running { background: rgba(251,191,36,.14); color: var(--yellow); }
.badge.failed { background: rgba(248,113,113,.14); color: var(--red); }
.record-actions { display: flex; flex-direction: column; gap: 6px; }
.record-actions .btn { white-space: nowrap; }
.record-preview { max-width: 100%; }
.record-preview img { max-width: 260px; max-height: 200px; border-radius: 8px; }
.record-preview audio { width: 100%; max-width: 420px; }
.record-preview video { max-width: 320px; max-height: 240px; border-radius: 8px; }
.record-error { font-size: 12px; color: var(--red); margin-top: 6px; }

/* ===== API Key 提示条 ===== */
.key-banner {
  margin: 14px 28px 0; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(249,115,22,.08));
  border: 1px solid rgba(251,191,36,.3); border-radius: 12px;
  color: #fde68a; font-size: 14px; line-height: 1.6;
  animation: fadeIn .35s;
}
.key-banner u { color: #fbbf24; }
.key-banner button { background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.35); color: #fde68a; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 13px; flex-shrink: 0; }
.key-banner button:hover { background: rgba(251,191,36,.3); }

/* ===== 远程公告条 ===== */
.remote-banner {
  margin: 14px 28px 0; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(84,169,255,.08));
  border: 1px solid rgba(56,189,248,.3); border-radius: 12px;
  color: #bae6fd; font-size: 14px; line-height: 1.6;
  animation: fadeIn .35s;
}
.remote-banner.danger {
  background: linear-gradient(135deg, rgba(248,113,113,.14), rgba(239,68,68,.08));
  border: 1px solid rgba(248,113,113,.4);
  color: #fecaca;
}
.remote-banner .banner-link { color: #fbbf24; font-weight: 700; text-decoration: underline; margin-left: 6px; }
.remote-banner .banner-btn {
  margin-left: 8px; padding: 4px 12px; border: 1px solid rgba(251,191,36,.5);
  background: rgba(251,191,36,.15); color: #fde68a; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: .18s; vertical-align: middle;
}
.remote-banner .banner-btn:hover { background: rgba(251,191,36,.3); }
.remote-banner .banner-btn:disabled { opacity: .6; cursor: default; }
body.remote-disabled .btn.primary,
body.remote-disabled button[type=submit] { opacity: .5; pointer-events: none; filter: saturate(.4); }

/* ===== 批量模式 ===== */
.batch-zone { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(249,249,249,0.6,.25); }
.batch-toggle-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; color: #c7d2fe; padding: 9px 14px; border-radius: 9px; background: rgba(84,169,255,.1); border: 1px solid rgba(84,169,255,.3); transition: .18s; }
.batch-toggle-label:hover { background: rgba(84,169,255,.2); box-shadow: 0 0 16px rgba(84,169,255,.2); }
.batch-toggle-label input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.batch-config { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.batch-config input[type=number] { width: 72px; }
.batch-slots { display: flex; flex-direction: column; gap: 14px; }
.batch-slot { background: rgba(11,16,32,.5); border: 1px solid rgba(42,55,87,.7); border-radius: 12px; padding: 16px 18px; transition: border-color .2s, box-shadow .2s; }
.batch-slot:hover { border-color: rgba(84,169,255,.4); box-shadow: 0 0 18px rgba(84,169,255,.08); }
.batch-slot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; color: #8FAED6; }
.batch-slot .slot-field { margin-top: 4px; }
.batch-slot textarea.slot-field { margin-bottom: 8px; }
.batch-slot input[type=file] { width: 100%; padding: 8px; border-radius: 8px; background: rgba(11,16,32,.5); border: 1px dashed #34446b; color: var(--muted); font-size: 13px; cursor: pointer; }
.slot-status { font-size: 12px; margin-top: 8px; color: var(--muted); }
.slot-status.running { color: var(--yellow); }
.slot-status.success { color: var(--green); }
.slot-status.failed { color: var(--red); }
.slot-status.skip { color: var(--muted); }
.slot-result { margin-top: 8px; }
.slot-result audio { width: 100%; max-width: 420px; }
.slot-result video { max-width: 320px; max-height: 240px; border-radius: 8px; }
.slot-result img { max-width: 240px; max-height: 200px; border-radius: 8px; }

/* ===== 视频文案面板 ===== */
.vt-slot .vt-url { margin-top: 4px; }
.vt-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vt-progress { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.vt-progress .spinner { width: 16px; height: 16px; border-width: 2px; }
.vt-video video { width: 100%; max-height: 400px; border-radius: 10px; background: #000; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.vt-meta { font-size: 13px; color: var(--muted); line-height: 1.5; word-break: break-all; }
.vt-text textarea { background: rgba(11,16,32,.6); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.7; }
.vt-text textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(84,169,255,.18); }
.vt-error { color: var(--red); font-size: 13px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); border-radius: 8px; padding: 8px 12px; line-height: 1.6; word-break: break-all; }
.vt-copy-rec { cursor: pointer; }

/* ===== 自定义滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(11,16,32,.6); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2E78D9, #3D8BFF); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #3D7CE8, #54A9FF); }

/* ===== 小屏适配 ===== */
@media (max-width: 720px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .brand p { display: none; }
  .brand h1 { font-size: 13px; white-space: nowrap; }
  .brand { gap: 8px; min-width: 0; }
  .logo { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .account-switcher { margin-left: 6px; }
  .as-trigger { min-width: 0; padding: 5px 8px 5px 6px; gap: 6px; }
  .as-badge { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
  .as-name { font-size: 12px; }
  .tabs { padding: 12px 16px 0; }
  main { padding: 16px 16px 50px; }
  .brand h1 { font-size: 15px; }
  .key-banner { margin: 12px 16px 0; }
}

/* =========================================================
   高级动效层：粒子星尘 + 鼠标光晕 + 涟漪 + 流光 + 错落进场
   ========================================================= */
#bg-canvas {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
}
#cursorGlow {
  position: fixed; left: 0; top: 0; width: 600px; height: 600px;
  pointer-events: none; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(84,169,255,.09), rgba(64,180,243,.05) 40%, transparent 70%);
  will-change: transform;
}

/* 按钮点击涟漪 */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  transform: scale(0); animation: rippleAnim .6s ease-out forwards;
}
@keyframes rippleAnim { to { transform: scale(1); opacity: 0; } }

/* 卡片顶部流光循环 */
.card { overflow: hidden; }
.card::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(165,180,252,.9), rgba(64,180,243,.8), transparent);
  animation: cardShine 5.5s ease-in-out infinite;
  filter: blur(.3px);
}
@keyframes cardShine {
  0% { left: -60%; }
  55% { left: 130%; }
  100% { left: 130%; }
}
.card:hover::after { animation-duration: 2.4s; }

/* 面板激活：卡片内容错落进场 */
.panel.active .card > * { animation: riseIn .5s cubic-bezier(.22,.9,.3,1) backwards; }
.panel.active .card > *:nth-child(1) { animation-delay: .02s; }
.panel.active .card > *:nth-child(2) { animation-delay: .06s; }
.panel.active .card > *:nth-child(3) { animation-delay: .1s; }
.panel.active .card > *:nth-child(4) { animation-delay: .14s; }
.panel.active .card > *:nth-child(5) { animation-delay: .18s; }
.panel.active .card > *:nth-child(6) { animation-delay: .22s; }
.panel.active .card > *:nth-child(7) { animation-delay: .26s; }
.panel.active .card > *:nth-child(8) { animation-delay: .3s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 批量槽位错落进场 */
.batch-slots .batch-slot { animation: riseIn .4s cubic-bezier(.22,.9,.3,1) backwards; }
.batch-slots .batch-slot:nth-child(2) { animation-delay: .05s; }
.batch-slots .batch-slot:nth-child(3) { animation-delay: .1s; }
.batch-slots .batch-slot:nth-child(4) { animation-delay: .15s; }
.batch-slots .batch-slot:nth-child(5) { animation-delay: .2s; }

/* 功能标签 emoji 微悬浮 */
.tab-btn { animation: tabBreath 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); }
@keyframes tabBreath { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

/* 结果区成功时的轻辉 */
.result-box img, .result-box video { animation: resultPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes resultPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* 运行中状态文字呼吸 */
.status-text { animation: statusPulse 1.8s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* 尊重系统"减少动态"设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   高级动效 v2：Spotlight 聚光 + Border Beam 流光边框 + Tilt + 流星
   ========================================================= */
@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.card {
  --mx: -300px; --my: -300px;
  background:
    radial-gradient(300px circle at var(--mx) var(--my), rgba(84,169,255,.16), transparent 68%),
    linear-gradient(165deg, rgba(30,41,66,.85), rgba(19,26,46,.95));
  transition: transform .14s ease-out, border-color .25s, box-shadow .25s, background .2s;
  transform-style: preserve-3d;
}
/* 流光边框（Border Beam）：hover 时沿边框旋转一道光 */
.card-beam {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam-angle), transparent 0%, rgba(84,169,255,.75) 12%, rgba(64,180,243,.6) 22%, transparent 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; opacity: 0; z-index: 1;
  animation: beamSpin 3.2s linear infinite;
  transition: opacity .3s;
}
.card:hover .card-beam { opacity: 1; }
@keyframes beamSpin { to { --beam-angle: 360deg; } }

/* 流星（借鉴 Aceternity UI Meteors） */
.meteors { position: fixed; inset: 0; pointer-events: none; z-index: -2; overflow: hidden; }
.meteor {
  position: absolute; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(165,180,252,.9), rgba(64,180,243,.4), transparent);
  transform: rotate(-35deg);
  opacity: 0;
  animation: meteorFly linear infinite;
  filter: drop-shadow(0 0 8px rgba(84,169,255,.6));
}
@keyframes meteorFly {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-35deg); }
  6% { opacity: 1; }
  45% { transform: translate3d(-46vw, 32vw, 0) rotate(-35deg); }
  100% { opacity: 0; transform: translate3d(-60vw, 42vw, 0) rotate(-35deg); }
}

/* =========================================================
   高级动效 v3：点阵网格 + 背景光束 + 霓虹按钮 + 标题入场 + 页脚
   ========================================================= */

/* 点阵网格背景（Aceternity Dot Grid） */
.dot-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: radial-gradient(rgba(148,163,184,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 75%);
}

/* 背景光束（Aceternity Background Beams）：斜向柔光缓慢移动 */
.beams { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.beam {
  position: absolute; top: -30%; width: 18vw; height: 160vh;
  background: linear-gradient(180deg, transparent, rgba(84,169,255,.12), rgba(64,180,243,.08), transparent);
  filter: blur(70px);
  transform: rotate(18deg);
  animation: beamSway 22s ease-in-out infinite alternate;
}
.beam.b1 { left: -4%; }
.beam.b2 { left: 38%; animation-delay: -7s; animation-duration: 26s; }
.beam.b3 { left: 72%; animation-delay: -13s; animation-duration: 20s; opacity: .7; }
@keyframes beamSway {
  from { transform: rotate(18deg) translateX(0); }
  to { transform: rotate(18deg) translateX(12vw); }
}

/* 霓虹按钮：hover 彩色光晕 + 文字微光 */
.btn.primary {
  background: linear-gradient(135deg, #54A9FF, #40B4F3, #54A9FF);
  background-size: 220% 100%;
  animation: btnHue 6s ease-in-out infinite;
}
@keyframes btnHue { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.btn.primary:hover {
  box-shadow: 0 0 24px rgba(139,92,246,.6), 0 8px 26px rgba(84,169,255,.4);
  text-shadow: 0 0 12px rgba(255,255,255,.5);
}

/* 卡片标题入场：模糊浮现（SplitText 风格简化版） */
.panel.active .card h2 {
  animation: titleReveal .6s cubic-bezier(.22,.9,.3,1) backwards;
}
@keyframes titleReveal {
  from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* 结果图淡入（记录预览不加动画，避免闪屏） */
.result-box img, .result-box video { animation: mediaIn .5s ease; }
@keyframes mediaIn { from { opacity: 0; } to { opacity: 1; } }

/* 页脚 */
.footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 26px 16px 34px; font-size: 13px; color: var(--muted);
  border-top: 1px solid rgba(42,55,87,.5);
  background: rgba(11,16,32,.35);
  backdrop-filter: blur(6px);
}
.footer-author {
  color: #8FAED6; font-weight: 600;
  background: linear-gradient(90deg, #6CB5FF, #7CC3FF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-divider { opacity: .4; }

/* =========================================================
   创意动效：撒花 + 磁性按钮 + 回到顶部 + 拖拽高亮 + 品牌入场
   ========================================================= */

/* 撒花画布 */
.confetti-canvas {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
}

/* 磁性按钮：transform 过渡保持平滑 */
.btn { transition: transform .18s ease-out, background .15s, box-shadow .15s, filter .15s, color .15s; }

/* 回到顶部 */
.back-top {
  position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px;
  border-radius: 14px; border: 1px solid rgba(84,169,255,.5);
  background: linear-gradient(135deg, rgba(84,169,255,.85), rgba(64,180,243,.85));
  color: #fff; font-size: 20px; cursor: pointer; z-index: 90;
  box-shadow: 0 6px 20px rgba(84,169,255,.4);
  opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none;
  transition: opacity .3s, transform .3s, box-shadow .3s;
}
.back-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-top:hover { box-shadow: 0 0 26px rgba(139,92,246,.7); transform: translateY(-2px) scale(1.05); }

/* 拖拽上传全屏高亮 */
.drag-overlay {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,16,32,.6);
  opacity: 0; visibility: hidden;
  backdrop-filter: blur(3px);
  transition: opacity .2s, visibility .2s;
}
.drag-overlay.show { opacity: 1; visibility: visible; }
.drag-overlay::before {
  content: ""; position: absolute; inset: 16px; border-radius: 22px;
  border: 2px dashed rgba(139,92,246,.7);
  box-shadow: inset 0 0 60px rgba(84,169,255,.15), 0 0 30px rgba(84,169,255,.2);
}
.drag-hint {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, rgba(84,169,255,.9), rgba(64,180,243,.9));
  padding: 22px 36px; border-radius: 18px;
  box-shadow: 0 12px 40px rgba(84,169,255,.5);
  animation: dragPulse 1.2s ease-in-out infinite;
}
.drag-icon { font-size: 34px; }
@keyframes dragPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* 品牌入场 */
.brand { animation: brandIn .7s cubic-bezier(.22,.9,.3,1) backwards; }
@keyframes brandIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* =========================================================
   创意功能：主题切换 / 运行指示灯 / 音波 / 彩蛋 / 霓虹标题
   ========================================================= */

/* 主题色变量（切换 data-theme） */
body[data-theme="default"] { --accent: #6C8CFF; --accent2: #A05FF0; --cyan: #38D6F0; }
body[data-theme="neon"]    { --accent: #ec4899; --accent2: #f43f5e; --cyan: #38D6F0; }
body[data-theme="emerald"] { --accent: #10b981; --accent2: #0ea5e9; --cyan: #a3e635; }
body[data-theme="sunset"]  { --accent: #f97316; --accent2: #ef4444; --cyan: #fbbf24; }
body { transition: background .5s; }

/* 运行指示灯（顶栏） */
.run-indicator {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 10px; padding: 6px 14px; border-radius: 999px;
  background: rgba(64,180,243,.1); border: 1px solid rgba(64,180,243,.35);
  color: #a5f3fc; font-size: 13px;
}
.run-indicator b { color: #fff; }
.run-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #40B4F3;
  box-shadow: 0 0 10px #40B4F3; animation: dotPulse2 1s ease-in-out infinite;
}
@keyframes dotPulse2 { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* 主题切换器 */
.theme-fab {
  position: fixed; right: 20px; bottom: 90px; width: 42px; height: 42px;
  border-radius: 14px; cursor: pointer; z-index: 91;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(31,41,66,.82); border: 1px solid rgba(84,169,255,.4);
  box-shadow: 0 4px 16px rgba(0,0,0,.35); backdrop-filter: blur(8px);
  animation: fabFloat 3.2s ease-in-out infinite;
}
@keyframes fabFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.theme-fab:hover { box-shadow: 0 0 26px rgba(139,92,246,.7); }
.theme-panel {
  position: fixed; right: 26px; bottom: 140px; z-index: 92;
  background: rgba(19,26,46,.95); border: 1px solid rgba(84,169,255,.35);
  border-radius: 16px; padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); backdrop-filter: blur(12px);
  animation: fadeIn .2s;
}
.theme-title { font-size: 13px; color: #8FAED6; font-weight: 600; margin-bottom: 10px; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: rgba(11,16,32,.6); border: 1px solid rgba(42,55,87,.8);
  border-radius: 10px; color: #e7ecf7; font-size: 12px; cursor: pointer; transition: .15s;
}
.theme-opt:hover { border-color: var(--c1); box-shadow: 0 0 12px rgba(84,169,255,.2); }
.theme-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 0 8px var(--c1);
}
.theme-opt em { font-style: normal; }

/* 音波可视化 */
.wave-wrap {
  display: flex; align-items: center; gap: 3px; height: 26px;
  margin: 6px 0 2px; padding: 0 2px;
}
.wave-wrap span {
  width: 4px; height: 6px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transition: height .15s;
}
.wave-wrap.playing span { animation: waveJump .8s ease-in-out infinite; }
.wave-wrap.playing span:nth-child(2n) { animation-delay: .12s; }
.wave-wrap.playing span:nth-child(3n) { animation-delay: .24s; }
@keyframes waveJump { 0%,100% { height: 6px; } 50% { height: 24px; } }

/* 品牌标题霓虹发光（已按用户要求移除） */

/* Logo 连点彩蛋：彩虹扫屏 */
.rainbow-flash {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,0,0,.18), rgba(255,154,0,.18), rgba(208,222,87,.18),
    rgba(79,220,74,.18), rgba(63,218,216,.18), rgba(47,201,226,.18),
    rgba(28,127,238,.18), rgba(95,21,242,.18), rgba(186,12,248,.18),
    rgba(251,7,217,.18), rgba(255,0,0,.18));
  background-size: 300% 100%;
  animation: rainbowSweep 1.2s linear forwards;
}
@keyframes rainbowSweep { from { background-position: 0% 0; opacity: 1; } to { background-position: 300% 0; opacity: 0; } }

/* 结果图片噪点浮现（升级） */
.result-box img, .result-box video {
  animation: noiseReveal .6s ease;
}
@keyframes noiseReveal {
  0% { opacity: 0; filter: blur(8px) contrast(1.3); transform: scale(.985); }
  100% { opacity: 1; filter: blur(0) contrast(1); transform: scale(1); }
}

/* =========================================================
   账户切换器（企业级 / 消费级）· 精致版
   ========================================================= */
/* 顶部"智能自动"左侧的下载更新按钮（与账户切换同款视觉语言） */
.top-update-btn {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 12px; padding: 6px 14px 6px 7px;
  background: linear-gradient(165deg, rgba(30,41,66,.85), rgba(19,26,46,.9));
  border: 1px solid rgba(84,169,255,.4);
  border-radius: 12px; cursor: pointer; color: #e0e7ff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  white-space: nowrap; font-size: 13px;
}
.top-update-btn:hover { border-color: rgba(139,92,246,.7); box-shadow: 0 4px 20px rgba(84,169,255,.3); transform: translateY(-1px); }
.top-update-btn:active { transform: translateY(0); }
.top-update-btn:disabled { opacity: .6; cursor: default; }
.top-update-btn .tub-ico {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #54A9FF, #40B4F3); color: #fff;
  box-shadow: 0 0 10px rgba(84,169,255,.45);
}
.top-update-btn .tub-txt { display: inline-flex; flex-direction: column; line-height: 1.2; text-align: left; }
.top-update-btn .tub-txt b { font-size: 13px; font-weight: 700; color: #fff; }
.top-update-btn .tub-txt .tub-ver { font-size: 10.5px; color: var(--muted); font-weight: 500; }

.account-switcher {
  position: relative; margin-left: 12px; display: inline-block;
  font-size: 13px;
}
.as-trigger {
  display: flex; align-items: center; gap: 10px;
  min-width: 178px; padding: 7px 12px 7px 8px;
  background: linear-gradient(165deg, rgba(30,41,66,.85), rgba(19,26,46,.9));
  border: 1px solid rgba(84,169,255,.35);
  border-radius: 12px; cursor: pointer; color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, box-shadow .2s;
}
.as-trigger:hover { border-color: rgba(139,92,246,.6); box-shadow: 0 4px 20px rgba(84,169,255,.25); }
.as-trigger.open { border-color: rgba(139,92,246,.7); }
.as-badge {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.as-badge-e { background: linear-gradient(135deg, #3b82f6, #54A9FF); box-shadow: 0 0 10px rgba(84,169,255,.5); }
.as-badge-c { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 0 10px rgba(245,158,11,.5); }
.as-label { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.as-name { font-weight: 700; color: #fff; font-size: 13px; }
.as-sub { font-size: 11px; color: var(--muted); }
.as-arrow {
  margin-left: auto; color: var(--muted); font-size: 12px;
  transition: transform .25s;
}
.as-trigger.open .as-arrow { transform: rotate(180deg); }

.as-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 99;
  width: 300px; padding: 6px;
  background: rgba(17,24,43,.95);
  border: 1px solid rgba(84,169,255,.3);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 30px rgba(84,169,255,.12);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.as-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.as-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
  transition: background .18s, border-color .18s, transform .18s;
}
.as-opt + .as-opt { margin-top: 4px; }
.as-opt:hover { background: rgba(84,169,255,.12); border-color: rgba(84,169,255,.25); transform: translateX(2px); }
.as-opt.selected {
  background: linear-gradient(135deg, rgba(84,169,255,.22), rgba(64,180,243,.16));
  border-color: rgba(84,169,255,.5);
  box-shadow: inset 0 0 18px rgba(84,169,255,.12);
}
.as-dot {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.as-dot-e { background: linear-gradient(135deg, #3b82f6, #54A9FF); box-shadow: 0 0 10px rgba(84,169,255,.5); }
.as-dot-c { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 0 10px rgba(245,158,11,.5); }
.as-opt-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.as-opt-txt em { font-style: normal; font-weight: 700; font-size: 13px; }
.as-opt-txt small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.as-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; opacity: 0; transform: scale(.5);
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 0 10px rgba(52,211,153,.5);
  transition: opacity .2s, transform .2s;
}
.as-opt.selected .as-check { opacity: 1; transform: scale(1); }
@media (max-width: 720px) { .as-menu { width: 230px; } }

/* 顶栏 Key 状态文字：隐藏（账户状态由切换器 + 提示条展示） */
.key-status { display: none !important; }

/* 记录账户徽章 */
.badge.wallet { background: rgba(59,130,246,.16); color: #93c5fd; }
.badge.coin { background: rgba(245,158,11,.16); color: #FFAE43; }

/* 智能自动徽章 */
.as-badge-a, .as-dot-a { background: linear-gradient(135deg, #40B4F3, #8b5cf6); box-shadow: 0 0 10px rgba(139,92,246,.5); font-size: 13px; }

/* 当前扣费账户提示条 */
.acct-bar {
  margin: 12px 28px 0; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(84,169,255,.1); border: 1px solid rgba(84,169,255,.3);
  border-radius: 10px; font-size: 13px; color: #c7d2fe;
}
.acct-bar b { color: #fff; font-weight: 700; }
.acct-bar .acct-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #40B4F3, #8b5cf6);
  box-shadow: 0 0 8px rgba(139,92,246,.7);
  animation: dotPulse2 1.2s ease-in-out infinite;
}
.acct-bar .acct-hint { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .acct-bar { margin: 10px 16px 0; } }
/* =========================================================
   钱包 / 币子余额同步徽章
   ========================================================= */
.wallet-chip {
  position: relative; margin-left: 10px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px; cursor: pointer; user-select: none;
  background: linear-gradient(165deg, rgba(20,28,52,.9), rgba(13,18,36,.92));
  border: 1px solid rgba(84,169,255,.38); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wallet-chip:hover { border-color: rgba(139,92,246,.68); box-shadow: 0 4px 22px rgba(84,169,255,.3); transform: translateY(-1px); }
.wallet-chip.ok { border-color: rgba(52,211,153,.42); }
.wallet-chip.error { border-color: rgba(248,113,113,.5); }
.wallet-chip.loading .wc-name { opacity: .45; }
.wallet-chip.loading .wc-refresh { animation: wcSpin 1s linear infinite; }
.wc-icon { font-size: 16px; line-height: 1; }
.wc-body { display: flex; flex-direction: column; line-height: 1.15; }
.wc-name { font-weight: 700; font-size: 13px; color: #F2F4F8; white-space: nowrap; }
.wc-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .3px; }
.wc-refresh {
  border: none; background: rgba(84,169,255,.14); color: #c7d2fe;
  width: 24px; height: 24px; border-radius: 8px; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.wc-refresh:hover { background: rgba(84,169,255,.32); color: #fff; }
@keyframes wcSpin { to { transform: rotate(360deg); } }
.wc-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 99;
  min-width: 300px; padding: 10px;
  background: rgba(17,24,43,.97);
  border: 1px solid rgba(84,169,255,.32); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 26px rgba(84,169,255,.14);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.wallet-chip.open .wc-pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wc-pop-title { font-size: 12px; font-weight: 700; color: #8FAED6; letter-spacing: .5px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(84,169,255,.18); }
.wc-pop-list { display: flex; flex-direction: column; gap: 6px; }
.wc-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 9px; font-size: 12.5px;
  background: rgba(84,169,255,.07); border: 1px solid rgba(84,169,255,.16);
}
.wc-acc-name { color: #c7d2fe; white-space: nowrap; }
.wc-acc-v { font-weight: 700; color: #fff; white-space: nowrap; }
.wc-pop-hint { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; }
/* 钱包徽章：右上角可点击展示余额明细（黑金皮肤下显示，见 skin-gold.css） */
.wallet-chip { display: inline-flex !important; }
.acct-bar { flex-wrap: nowrap; }
.acct-bal { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 12.5px; white-space: nowrap; }
.acct-bal .ab-refresh { border: none; background: rgba(84,169,255,.14); color: #c7d2fe; width: 24px; height: 24px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.acct-bal .ab-refresh:hover { background: rgba(84,169,255,.32); color: #fff; }
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  .account-switcher { display: none !important; }
}

/* =========================================================
   视频文案面板 · 高级版
   ========================================================= */
.vt-slot {
  position: relative;
  background: linear-gradient(165deg, rgba(23,31,54,.9), rgba(11,16,32,.95));
  border: 1px solid rgba(84,169,255,.25);
  border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.vt-slot:hover { border-color: rgba(84,169,255,.5); box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 24px rgba(84,169,255,.14); transform: translateY(-1px); }
.vt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vt-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 10px;
  background: linear-gradient(135deg, #54A9FF, #40B4F3);
  border-radius: 9px; font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: 0 0 12px rgba(139,92,246,.45);
}
.vt-head-right { display: flex; align-items: center; gap: 10px; }
.vt-platform {
  font-size: 12px; font-weight: 700; color: #a5f3fc;
  background: rgba(64,180,243,.12); border: 1px solid rgba(64,180,243,.4);
  padding: 3px 10px; border-radius: 999px;
}
.vt-status {
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.vt-status.idle { background: rgba(148,163,184,.12); color: #94a3b8; }
.vt-status.downloading { background: rgba(64,180,243,.12); color: #67e8f9; animation: vtPulse 1.2s ease-in-out infinite; }
.vt-status.running { background: rgba(251,191,36,.12); color: #FFAE43; animation: vtPulse 1.2s ease-in-out infinite; }
.vt-status.success { background: rgba(52,211,153,.12); color: #6ee7b7; }
.vt-status.failed { background: rgba(248,113,113,.12); color: #fca5a5; }
@keyframes vtPulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

.vt-input-wrap {
  position: relative; display: flex; align-items: center;
}
.vt-input-icon { position: absolute; left: 14px; font-size: 15px; opacity: .8; pointer-events: none; }
.vt-url {
  width: 100%; padding: 12px 14px 12px 42px; font-size: 14px;
  background: rgba(11,16,32,.6); color: var(--text);
  border: 1px solid rgba(42,55,87,.9); border-radius: 12px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.vt-url:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(84,169,255,.18), 0 0 18px rgba(84,169,255,.12); }
.vt-url.vt-invalid { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.15) !important; }

.vt-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.vt-actions button {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; border-radius: 10px; padding: 10px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.vt-fetch {
  background: linear-gradient(135deg, #54A9FF, #40B4F3); color: #fff;
  box-shadow: 0 4px 16px rgba(84,169,255,.35);
}
.vt-fetch:hover { filter: brightness(1.12); transform: translateY(-1px); }
.vt-fetch.busy { opacity: .6; cursor: wait; }
.vt-transcribe, .vt-copy {
  background: rgba(84,169,255,.12); color: #c7d2fe;
  border: 1px solid rgba(84,169,255,.4) !important;
}
.vt-transcribe:hover, .vt-copy:hover { background: rgba(84,169,255,.24); transform: translateY(-1px); }
.vt-btn-ico { font-size: 15px; }

.vt-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.vt-bar {
  flex: 1; height: 6px; border-radius: 6px; overflow: hidden;
  background: rgba(42,55,87,.7);
}
.vt-bar i {
  display: block; height: 100%; width: 6%; border-radius: 6px;
  background: linear-gradient(90deg, #54A9FF, #40B4F3, #40B4F3);
  background-size: 200% 100%;
  animation: vtBarMove 1.4s linear infinite, vtBarGrow 1.4s ease-in-out infinite alternate;
}
@keyframes vtBarMove { to { background-position: -200% 0; } }
@keyframes vtBarGrow { from { width: 8%; } to { width: 92%; } }

.vt-video { margin-top: 12px; }
.vt-video video {
  width: 100%; max-height: 400px; border-radius: 14px; background: #000;
  border: 1px solid rgba(84,169,255,.3);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.vt-meta { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; word-break: break-all; }
.vt-text { margin-top: 12px; }
.vt-text textarea {
  width: 100%; box-sizing: border-box; min-height: 140px; padding: 14px;
  font-size: 13px; line-height: 1.75; color: var(--text);
  background: rgba(11,16,32,.55); border: 1px solid rgba(42,55,87,.9); border-radius: 12px;
  resize: vertical;
}
.vt-error {
  margin-top: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.6;
  color: #fca5a5; background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.3); border-radius: 12px;
  word-break: break-all;
}

/* 视频文案顶部工具栏 */
.vt-toolbar {
  display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 20px; padding: 18px 20px;
  background: linear-gradient(165deg, rgba(23,31,54,.6), rgba(11,16,32,.5));
  border: 1px solid rgba(84,169,255,.2); border-radius: 16px;
}
.vt-tool-item { min-width: 240px; }
.vt-tool-item .field-label { margin-top: 0; }
.vt-platforms { flex: 1; min-width: 300px; }
.vt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vt-chip {
  font-size: 12px; font-weight: 700; color: #c7d2fe;
  background: rgba(84,169,255,.14); border: 1px solid rgba(84,169,255,.35);
  padding: 4px 12px; border-radius: 999px;
}
.vt-chip:hover { background: rgba(84,169,255,.26); box-shadow: 0 0 10px rgba(84,169,255,.3); }

/* =========================================================
   批量界面 · 高级版（声音克隆 / 数字人 / 慢速 通用）
   ========================================================= */
.batch-toggle-label {
  padding: 11px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(84,169,255,.16), rgba(64,180,243,.12));
  border: 1px solid rgba(84,169,255,.4);
  box-shadow: 0 4px 16px rgba(84,169,255,.15);
  font-size: 15px;
}
.batch-toggle-label input { width: 18px; height: 18px; }
.batch-config { padding: 0 2px; }
.batch-config input[type=number] {
  width: 80px; padding: 8px 10px; border-radius: 10px;
  background: rgba(11,16,32,.7); border: 1px solid rgba(84,169,255,.4); color: #fff;
}
.batch-config input[type=number]:focus { border-color: #54A9FF; box-shadow: 0 0 0 3px rgba(84,169,255,.16); }
.batch-config .hint { font-size: 12px; }

.batch-slot {
  background: linear-gradient(165deg, rgba(23,31,54,.92), rgba(11,16,32,.96));
  border: 1px solid rgba(84,169,255,.25);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.batch-slot:hover { border-color: rgba(84,169,255,.5); box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 22px rgba(84,169,255,.14); transform: translateY(-1px); }
.batch-slot-head { margin-bottom: 12px; }
.slot-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 10px;
  background: linear-gradient(135deg, #54A9FF, #40B4F3);
  border-radius: 9px; font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: 0 0 12px rgba(139,92,246,.45);
}
.batch-slot .field-label { margin: 12px 0 6px; color: #8FAED6; font-size: 13px; }
.batch-slot textarea.slot-field, .batch-slot .slot-text {
  width: 100%; border-radius: 10px; padding: 10px 12px;
  background: rgba(11,16,32,.6); border: 1px solid rgba(42,55,87,.9);
  color: var(--text); font-size: 13px; line-height: 1.6; resize: vertical;
}
.batch-slot textarea.slot-field:focus { border-color: #54A9FF; box-shadow: 0 0 0 3px rgba(84,169,255,.16); }

/* 文件选择框（自定义） */
.slot-file-pick {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; padding: 12px 14px;
  background: rgba(11,16,32,.55);
  border: 1.5px dashed rgba(84,169,255,.45); border-radius: 12px;
  cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.slot-file-pick:hover { border-color: #54A9FF; background: rgba(84,169,255,.08); box-shadow: 0 0 16px rgba(84,169,255,.14); }
.slot-file-pick input[type=file] { display: none; }
.sfp-icon { font-size: 20px; }
.sfp-text { font-size: 13px; font-weight: 700; color: #c7d2fe; }
.sfp-name { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfp-name.has { color: #6ee7b7; }

/* 复选框（用上方音色） */
.slot-check-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; padding: 11px 14px; cursor: pointer;
  background: rgba(84,169,255,.08); border: 1px solid rgba(84,169,255,.3);
  border-radius: 12px; font-size: 13px; color: #c7d2fe; transition: .2s;
}
.slot-check-wrap:hover { background: rgba(84,169,255,.16); border-color: rgba(84,169,255,.5); }
.slot-check-wrap input { display: none; }
.slot-check-box {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  background: rgba(11,16,32,.7); border: 2px solid rgba(84,169,255,.5);
  position: relative; transition: .2s;
}
.slot-check-wrap input:checked + .slot-check-box {
  background: linear-gradient(135deg, #54A9FF, #40B4F3); border-color: transparent;
}
.slot-check-wrap input:checked + .slot-check-box::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.slot-check-wrap input:checked ~ * { color: #6ee7b7; }

/* 状态徽章 */
.slot-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.slot-status.idle { background: rgba(148,163,184,.12); color: #94a3b8; }
.slot-status.running { background: rgba(251,191,36,.14); color: #FFAE43; animation: vtPulse 1.2s ease-in-out infinite; }
.slot-status.success { background: rgba(52,211,153,.14); color: #6ee7b7; }
.slot-status.failed { background: rgba(248,113,113,.14); color: #fca5a5; }
.slot-status.skip { background: rgba(148,163,184,.12); color: #94a3b8; }

/* 批量重试按钮 */
.slot-retry {
  margin-top: 10px; padding: 7px 16px; border-radius: 10px;
  background: rgba(84,169,255,.18); color: #fff;
  border: 1px solid rgba(84,169,255,.5); cursor: pointer; font-size: 13px; font-weight: 700;
  transition: .2s;
}
.slot-retry:hover { background: rgba(84,169,255,.32); box-shadow: 0 0 14px rgba(84,169,255,.3); }

/* =========================================================
   陪伴小宠物
   ========================================================= */
.pet-wrap {
  position: fixed; left: 24px; bottom: 24px; z-index: 95;
  display: flex; flex-direction: column; align-items: center;
  user-select: none;
  transition: opacity .3s, transform .3s;
}
.pet-wrap.off { opacity: 0; pointer-events: none; transform: scale(.6); }
.pet {
  width: 84px; height: 84px; cursor: grab; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(84,169,255,.35), rgba(64,180,243,.2), transparent 70%);
  border-radius: 50%;
  transition: transform .2s;
}
.pet:active { cursor: grabbing; }
.pet:hover { transform: scale(1.08); }
.pet-emoji { font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(139,92,246,.45)); }
.pet-zzz { position: absolute; top: 2px; right: 4px; font-size: 22px; opacity: 0; transition: opacity .4s; }

/* 状态动画 */
.pet.idle { animation: petFloat 3s ease-in-out infinite; }
@keyframes petFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-3deg); } }
.pet.sleep { animation: petSleep 2.4s ease-in-out infinite; }
@keyframes petSleep { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(3px) scale(.96); } }
.pet.sleep .pet-zzz { opacity: 1; animation: zzzFloat 1.4s ease-in-out infinite; }
@keyframes zzzFloat { 0% { transform: translate(0,0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(8px,-14px); opacity: 0; } }
.pet.happy { animation: petHappy .7s ease; }
@keyframes petHappy { 0% { transform: scale(1); } 40% { transform: scale(1.25) translateY(-14px); } 100% { transform: scale(1); } }

/* 气泡 */
.pet-bubble {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  min-width: 180px; max-width: 280px; padding: 12px 16px;
  background: rgba(23,31,54,.95); color: #e7ecf7;
  border: 1px solid rgba(84,169,255,.45); border-radius: 14px;
  font-size: 13px; line-height: 1.5; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 18px rgba(84,169,255,.15);
  backdrop-filter: blur(8px);
}
.pet-bubble::after {
  content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px; background: rgba(23,31,54,.95);
  border-right: 1px solid rgba(84,169,255,.45); border-bottom: 1px solid rgba(84,169,255,.45);
}
.pet-bubble.pop { animation: bubblePop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes bubblePop { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

/* 换宠物菜单 */
.pet-gear, .pet-hide {
  position: absolute; border: none; cursor: pointer; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(84,169,255,.25); color: #fff; font-size: 13px;
  border: 1px solid rgba(84,169,255,.4);
  transition: background .2s, transform .2s;
}
.pet-gear:hover, .pet-hide:hover { background: rgba(84,169,255,.5); transform: scale(1.1); }
.pet-gear { right: -10px; top: 6px; }
.pet-hide { right: -10px; bottom: 6px; }
.pet-menu {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 4px; width: 168px;
  background: rgba(17,24,43,.95); border: 1px solid rgba(84,169,255,.4);
  border-radius: 14px; padding: 8px; z-index: 3;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.pet-opt {
  width: 34px; height: 34px; font-size: 20px; border: none; border-radius: 8px;
  background: rgba(11,16,32,.6); cursor: pointer; transition: .15s;
}
.pet-opt:hover { background: rgba(84,169,255,.3); transform: scale(1.1); }

/* 生成成功：屏幕振动（抽象炸裂效果配套） */
.fx-shake { animation: fxShake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes fxShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 2px); }
  20% { transform: translate(7px, -3px); }
  30% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -2px); }
  50% { transform: translate(-4px, 2px); }
  60% { transform: translate(4px, -2px); }
  70% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
  90% { transform: translate(-2px, 1px); }
}

/* 宠物动作动画 */
.pet.walk { animation: petWalk 1s ease-in-out infinite; }
@keyframes petWalk {
  0% { transform: translateX(-10px) rotate(-5deg); }
  25% { transform: translateX(0) rotate(2deg); }
  50% { transform: translateX(10px) rotate(5deg); }
  75% { transform: translateX(0) rotate(-2deg); }
  100% { transform: translateX(-10px) rotate(-5deg); }
}
.pet.jump { animation: petJump .5s ease-in-out infinite; }
@keyframes petJump {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-20px) scale(1.08, .92); }
  60% { transform: translateY(-14px) scale(.94, 1.06); }
}
.pet.spin { animation: petSpin .85s ease-in-out infinite; }
@keyframes petSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pet.wave { animation: petWave 1.1s ease-in-out infinite; }
@keyframes petWave {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-16deg) scale(1.08); }
  75% { transform: rotate(16deg) scale(1.08); }
}

/* =========================================================
   炫酷开场动画
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #0b1020;
  transition: opacity .55s ease, visibility .55s;
}
.intro.out { opacity: 0; visibility: hidden; }
.intro-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 460px at 50% 38%, rgba(84,169,255,.35), transparent 70%),
    radial-gradient(520px 340px at 50% 60%, rgba(64,180,243,.22), transparent 70%),
    radial-gradient(300px 200px at 30% 30%, rgba(64,180,243,.15), transparent 70%);
  animation: introBgPulse 2s ease-in-out infinite;
}
@keyframes introBgPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.intro-logo {
  position: relative; width: 112px; height: 112px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 58px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #54A9FF, #40B4F3, #40B4F3);
  background-size: 200% 200%;
  animation: introLogo 1s cubic-bezier(.34,1.56,.64,1) forwards, logoShine 2.4s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(139,92,246,.75), 0 0 140px rgba(84,169,255,.4);
}
@keyframes introLogo {
  0% { transform: scale(0) rotate(-35deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes logoShine { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 100%; } }
.intro-title {
  position: relative; font-size: 46px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(90deg, #8FAED6, #e9d5ff, #67e8f9, #8FAED6);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: introText .7s .25s cubic-bezier(.22,.9,.3,1) forwards;
}
@keyframes introText { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.intro-slogan {
  position: relative; font-size: 30px; font-weight: 700; color: #e7ecf7;
  opacity: 0; animation: introText .7s .55s cubic-bezier(.22,.9,.3,1) forwards;
  text-shadow: 0 0 24px rgba(84,169,255,.6);
}
.intro-tags {
  position: relative; font-size: 16px; color: #9AA1AD; letter-spacing: 1px;
  opacity: 0; animation: introText .7s .8s cubic-bezier(.22,.9,.3,1) forwards;
}
.intro-ring {
  position: absolute; left: 50%; top: 38%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 2px solid rgba(139,92,246,.6);
  animation: ringExpand 1.4s ease-out infinite;
  pointer-events: none;
}
.intro-ring.r2 { animation-delay: .35s; border-color: rgba(64,180,243,.5); }
.intro-ring.r3 { animation-delay: .7s; border-color: rgba(244,114,182,.45); }
@keyframes ringExpand {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* =========================================================
   洗图案例展示
   ========================================================= */
.wash-case {
  margin-bottom: 22px; padding: 16px 18px;
  background: linear-gradient(165deg, rgba(23,31,54,.6), rgba(11,16,32,.5));
  border: 1px solid rgba(84,169,255,.2); border-radius: 16px;
}
.wash-case-title { font-size: 14px; font-weight: 700; color: #c7d2fe; margin-bottom: 12px; }
.wash-case-imgs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wc-item { text-align: center; }
.wc-item img {
  width: 220px; border-radius: 12px; border: 2px solid rgba(42,55,87,.8);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.wc-item em { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 6px; }
.wc-arrow { font-size: 34px; color: #40B4F3; font-weight: 900; }
@media (max-width: 720px) { .wc-item img { width: 150px; } }

/* 案例视频（模仿跳舞等） */
.wc-item video {
  width: 240px; border-radius: 12px; border: 2px solid rgba(42,55,87,.8);
  box-shadow: 0 8px 22px rgba(0,0,0,.3); background: #000;
}
@media (max-width: 720px) { .wc-item video { width: 150px; } }

/* =========================================================
   点击放大预览（Lightbox）
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 22, .92);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.lightbox.show { opacity: 1; visibility: visible; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: #fff; font-size: 18px; cursor: pointer; z-index: 2;
  transition: background .2s, transform .2s;
}
.lightbox-close:hover { background: rgba(255,255,255,.25); transform: scale(1.08); }
.lightbox-content { display: flex; align-items: center; justify-content: center; max-width: 94vw; max-height: 92vh; }

.media-zoom-wrap { position: relative; }
.zoom-fab {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(10, 14, 26, .75); color: #fff; font-size: 15px; cursor: pointer; z-index: 5;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s;
}
.media-zoom-wrap:hover .zoom-fab { opacity: 1; transform: scale(1); }
.zoom-fab:hover { background: rgba(84,169,255,.85); }

/* =========================================================
   移除背景动画层（粒子/流星/光束/点阵/光标光晕）
   恢复之前干净稳定的页面，避免闪屏
   ========================================================= */
#bg-canvas, .dot-grid, .beams, .meteors, #cursorGlow { display: none !important; }
body { background: #0b1020; }

/* 上传进度条（顶部细条） */
.upload-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 260;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; font-size: 13px; color: #c7d2fe;
  background: rgba(17,24,43,.92); border-bottom: 1px solid rgba(84,169,255,.3);
  backdrop-filter: blur(8px);
  animation: fadeIn .2s;
}
.upload-progress i {
  flex: 1; height: 5px; border-radius: 5px; overflow: hidden;
  background: rgba(42,55,87,.8); position: relative;
}
.upload-progress i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #54A9FF, #40B4F3, #40B4F3);
  border-radius: 5px; transition: width .15s;
  box-shadow: 0 0 10px rgba(84,169,255,.6);
}
.upload-progress.done { opacity: 0; transition: opacity .4s; }

/* 预计耗时标注 */
.time-hint {
  margin-top: 10px; font-size: 13px; font-weight: 600;
  color: #93c5fd;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3);
}
.time-hint.slow {
  color: #fdba74;
  background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.4);
  animation: timePulse 2s ease-in-out infinite;
}
@keyframes timePulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

/* 生成前扣费确认弹窗 */
.charge-modal {
  position: fixed; inset: 0; z-index: 480;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,11,22,.75); backdrop-filter: blur(6px);
  animation: fadeIn .2s;
}
.charge-box {
  width: 440px; max-width: 92vw; padding: 26px;
  background: linear-gradient(165deg, rgba(30,41,66,.97), rgba(17,24,43,.98));
  border: 1px solid rgba(84,169,255,.45); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(84,169,255,.15);
}
.charge-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.charge-info { font-size: 15px; color: #e7ecf7; margin-bottom: 20px; line-height: 1.6; }
.charge-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.charge-actions button {
  border: none; border-radius: 10px; padding: 11px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: .2s;
}
.cc-ok { background: linear-gradient(135deg,#54A9FF,#40B4F3); color: #fff; flex: 1; }
.cc-ok:hover { filter: brightness(1.12); }
.cc-switch { background: rgba(84,169,255,.15); color: #c7d2fe; border: 1px solid rgba(84,169,255,.4) !important; }
.cc-switch:hover { background: rgba(84,169,255,.3); }
.cc-cancel { background: rgba(148,163,184,.1); color: #94a3b8; border: 1px solid rgba(148,163,184,.25) !important; }
.cc-cancel:hover { background: rgba(148,163,184,.2); }

/* 记录页（calm）：去除卡片装饰特效，完全静态 */
body.calm .card::before, body.calm .card::after { display: none !important; }
body.calm .card {
  background: #171f36;
  border: 1px solid rgba(42,55,87,.8);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: none;
}
body.calm .card:hover {
  transform: none;
  border-color: rgba(42,55,87,.8);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
body.calm .record-card, body.calm .record-card:hover {
  transform: none;
  border-color: rgba(42,55,87,.8);
  box-shadow: none;
}
body.calm .badge.running::before { display: none; }
body.calm .record-title, body.calm .record-desc, body.calm .record-meta { animation: none !important; }

/* 任务运行进度条 */
.task-progress {
  width: 100%; max-width: 420px; display: flex; align-items: center; gap: 12px;
}
.task-progress i {
  flex: 1; height: 7px; border-radius: 7px; overflow: hidden; background: rgba(42,55,87,.8); position: relative;
}
.task-progress i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #54A9FF, #40B4F3, #40B4F3);
  border-radius: 7px; transition: width .4s;
  box-shadow: 0 0 10px rgba(84,169,255,.6);
}
.task-progress span { font-size: 13px; font-weight: 700; color: #93c5fd; min-width: 42px; text-align: right; }

/* ===== 开场动画（Splash） ===== */
#splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 800px at 50% 30%, #1a2140, #0b1020 72%);
  overflow: hidden;
  transition: opacity .5s ease, visibility .5s;
}
#splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(84,169,255,.28), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(64,180,243,.28), transparent 42%),
    radial-gradient(circle at 60% 8%, rgba(64,180,243,.16), transparent 40%);
  animation: splashBg 6s ease-in-out infinite alternate;
}
@keyframes splashBg { from { transform: scale(1); } to { transform: scale(1.15); } }
.splash-core { text-align: center; position: relative; z-index: 1; }
.splash-logo {
  width: 94px; height: 94px; margin: 0 auto 20px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 50px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#54A9FF,#40B4F3);
  box-shadow: 0 0 70px rgba(84,169,255,.65);
  animation: splashLogo .85s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes splashLogo {
  from { opacity: 0; transform: scale(.45) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.splash-title {
  font-size: 30px; font-weight: 800; color: #fff; letter-spacing: 3px;
  animation: splashUp .8s .12s cubic-bezier(.22,.9,.3,1) both;
}
.splash-sub {
  margin-top: 9px; font-size: 14px; color: #8FAED6; letter-spacing: 2px;
  animation: splashUp .8s .22s both;
}
@keyframes splashUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.splash-loading { display: flex; gap: 9px; justify-content: center; margin-top: 30px; }
.splash-loading span {
  width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(135deg,#6CB5FF,#40B4F3);
  animation: splashDot 1s ease-in-out infinite;
}
.splash-loading span:nth-child(2) { animation-delay: .15s; }
.splash-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes splashDot { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-9px); opacity: 1; } }
.splash-tip { margin-top: 16px; font-size: 14px; color: #8FAED6; letter-spacing: 2px; animation: splashUp .8s .2s both; }
/* 文生图批量网格 */
.img-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; width: 100%; }
#ttiResult.batch-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; align-items: start; }
.img-batch-slot {
  background: rgba(11,16,32,.6); border: 1px solid var(--border); border-radius: 12px;
  min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 10px; position: relative; overflow: hidden;
}
.img-batch-slot .img-batch-img { width: 100%; height: auto; border-radius: 8px; display: block; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.img-batch-status { font-size: 12px; color: var(--muted); text-align: center; word-break: break-all; }
/* ===== 高级版视觉升级（参考现代 SaaS 设计语言） ===== */
body {
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(84,169,255,.16), transparent 55%),
    radial-gradient(1000px 600px at 100% 0%, rgba(64,180,243,.13), transparent 50%),
    radial-gradient(900px 700px at 50% 120%, rgba(64,180,243,.11), transparent 55%),
    #0b1020;
  background-attachment: fixed;
}
.topbar {
  background: rgba(9,13,26,.72);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 12px 44px rgba(0,0,0,.38);
}
.logo {
  width: 40px; height: 40px; border-radius: 12px;
  box-shadow: 0 0 24px rgba(84,169,255,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand h1 { font-size: 19px; letter-spacing: .5px; }
.tabs { padding: 14px 28px 10px; }
.tab-btn { border-radius: 12px; padding: 10px 18px; }
.tab-btn.active {
  background: linear-gradient(135deg, rgba(84,169,255,.26), rgba(64,180,243,.2));
  border-color: rgba(84,169,255,.45);
  box-shadow: 0 6px 24px rgba(84,169,255,.32), inset 0 1px 0 rgba(255,255,255,.1);
}
.card {
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(170deg, rgba(28,36,62,.92), rgba(14,20,38,.96));
  box-shadow: 0 18px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.card:hover { border-color: rgba(84,169,255,.45); box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 34px rgba(84,169,255,.12), inset 0 1px 0 rgba(255,255,255,.08); }
.card::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(165,180,252,.65), transparent); }
input[type=text], input[type=password], input[type=number], textarea, select {
  border-radius: 11px;
  background: rgba(13,19,38,.85);
  border: 1px solid rgba(249,249,249,0.6,.3);
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus {
  border-color: rgba(84,169,255,.75);
  box-shadow: 0 0 0 3px rgba(84,169,255,.18);
}
.btn.primary {
  background: linear-gradient(135deg, #54A9FF, #8b5cf6 50%, #40B4F3);
  box-shadow: 0 8px 26px rgba(84,169,255,.42), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover { box-shadow: 0 12px 36px rgba(84,169,255,.58), inset 0 1px 0 rgba(255,255,255,.3); transform: translateY(-1px); }
.dropzone { border-radius: 16px; background: rgba(19,26,46,.6); }
.result-box { border-radius: 16px; }
.field-label { letter-spacing: .3px; }
.hint { line-height: 1.7; }
/* 批量任务双列布局（减少冗长感） */
.batch-slots { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .batch-slots { grid-template-columns: 1fr; } }
.batch-slot { height: 100%; }
/* 批量结果：卡片网格 + 打包栏 */
#ttiResult.batch-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.img-batch-slot {
  background: linear-gradient(170deg, rgba(24,32,56,.92), rgba(12,18,36,.96));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.img-batch-slot:hover { border-color: rgba(84,169,255,.55); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.img-batch-slot .img-batch-img { width: 100%; height: auto; border-radius: 10px; display: block; }
.img-batch-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(64,180,243,.06));
  border: 1px solid rgba(52,211,153,.32);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.img-batch-bar .img-batch-count { font-size: 14px; font-weight: 700; color: #6ee7b7; }
.img-batch-bar .btn { padding: 9px 18px; font-size: 13px; margin: 0; }
/* ===== 终极视觉强化（更精致的高级感） ===== */
.topbar { position: relative; }
.topbar::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84,169,255,.65), rgba(64,180,243,.5), transparent);
}
.brand h1 { background: none; background-size: auto; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: #F2F4F8; }
.card h2 { font-size: 18px; }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); animation: btnShine 3.2s infinite;
}
@keyframes btnShine { 0% { left: -80%; } 60% { left: 130%; } 100% { left: 130%; } }
.result-box .placeholder { background: linear-gradient(135deg, rgba(84,169,255,.07), rgba(64,180,243,.04)); }
.field-label { font-size: 13px; }
/* =========================================================
   设计精修 v3：分组导航 + 移动端体验强化（现代 SaaS / GitHub 风格）
   ========================================================= */
.tabs { align-items: center; gap: 6px; }
.tab-group {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  color: rgba(148,163,184,.72); text-transform: uppercase;
  margin: 0 2px 0 8px; padding: 3px 9px; border-radius: 7px;
  background: rgba(84,169,255,.09); border: 1px solid rgba(84,169,255,.16);
  white-space: nowrap; user-select: none; flex: none;
}
.tab-group:first-child { margin-left: 0; }
.tab-btn { font-size: 13.5px; padding: 8px 14px; border-radius: 10px; }
.tab-btn.active {
  background: linear-gradient(135deg, rgba(84,169,255,.28), rgba(64,180,243,.22));
  box-shadow: 0 6px 20px rgba(84,169,255,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.tab-btn.active::after { height: 2.5px; }

/* 顶栏状态胶囊精致化 */
.key-status {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.28);
  letter-spacing: .2px;
}

/* 次要文字层级提升 */
.hint { font-size: 12.5px; }
.field-label { font-size: 13px; }

/* 表单控件统一精致感 */
input[type=text], input[type=password], input[type=number], textarea, select {
  transition: border-color .18s, box-shadow .18s, background .18s;
}
select { cursor: pointer; }

/* ===== 移动端 / 窄屏强化 ===== */
@media (max-width: 900px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn, .tab-group { white-space: nowrap; flex: none; }
}

@media (max-width: 720px) {
  .topbar { padding: 10px 14px; }
  .brand { gap: 10px; }
  .logo { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
  .brand h1 { font-size: 14px; }
  .brand p { font-size: 11px; line-height: 1.5; }
  main { padding: 14px 14px 64px; }
  .card { padding: 16px; border-radius: 14px; }
  .card h2 { font-size: 15px; }
  .grid-2 { gap: 14px; }
  .field-row { gap: 10px; }
  .btn.big { width: 100%; }
  .key-status { font-size: 11px; padding: 4px 10px; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .topbar { padding: 8px 12px; }
  .brand h1 { font-size: 13px; letter-spacing: 0; }
  .brand p { font-size: 10.5px; }
  .logo { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
  .tabs { padding: 10px 12px 0; gap: 5px; }
  .tab-btn { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
  main { padding: 12px 12px 60px; }
  .card { padding: 14px; border-radius: 12px; }
  .field-grow { min-width: 100%; }
  .dropzone .dz-inner { padding: 18px 10px; }
  .dz-icon { font-size: 26px; }
  .key-status { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-bar { flex-wrap: wrap; gap: 6px; font-size: 12px; }
}

/* =========================================================
   手机端 UI v2：更精致的移动体验（iOS / Material 风格）
   ========================================================= */
@media (max-width: 720px) {
  /* 顶栏：吸顶 + 毛玻璃 */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(11,15,30,.85);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(84,169,255,.22);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
  }
  /* 标签栏：吸顶横向滑动胶囊 */
  .tabs {
    position: sticky; top: 62px; z-index: 39;
    background: rgba(11,15,30,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin: 0 -14px; padding: 10px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .tab-btn {
    border-radius: 999px;
    padding: 9px 15px; font-size: 13px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
  }
  .tab-btn.active {
    background: linear-gradient(135deg, #54A9FF, #8b5cf6 60%, #40B4F3);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 18px rgba(84,169,255,.45), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .tab-btn.active::after { display: none; }
  .tab-group { background: rgba(84,169,255,.12); border-color: rgba(84,169,255,.22); color: #c4b5fd; }

  /* 卡片更圆润 */
  .card { border-radius: 20px; padding: 18px; border: 1px solid rgba(255,255,255,.08); }

  /* 触控友好的表单控件 */
  input[type=text], input[type=password], input[type=number], textarea, select {
    min-height: 46px; border-radius: 13px; font-size: 15px;
    -webkit-appearance: none; appearance: none;
  }
  textarea { min-height: 96px; }
  .field-label { font-size: 12.5px; margin-top: 14px; }
  .btn { min-height: 44px; border-radius: 13px; font-size: 14px; }
  .btn.big { min-height: 50px; font-size: 15px; border-radius: 14px; }

  /* 上传区 */
  .dropzone { border-radius: 18px; border-style: dashed; border-width: 1.5px; }
  .dropzone .dz-inner { padding: 26px 14px; }
  .dz-icon { font-size: 30px; }

  /* 结果图圆角 */
  .result-box { border-radius: 18px; }
  .result-box img, .result-box video { border-radius: 14px; }

  /* 批量卡片 */
  .batch-slot { border-radius: 16px; }
}

@media (max-width: 480px) {
  .brand p { display: none; }
  .tabs { top: 54px; }
  .card { padding: 14px; border-radius: 16px; }
  .card h2 { font-size: 14px; }
  .grid-2 { gap: 12px; }
  .btn.primary.big { box-shadow: 0 10px 28px rgba(84,169,255,.45); }
}
/* =========================================================
   账户切换器 v2：品牌「腾」风格统一（紫色渐变 + 白色图标）
   ========================================================= */
.as-trigger {
  border-color: rgba(84,169,255,.3);
  box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 13px;
}
.as-badge { border-radius: 10px; }
.as-dot { border-radius: 10px; }
.as-badge svg, .as-dot svg { display: block; }
/* 智能自动：品牌紫渐变 */
.as-badge-a, .as-dot-a {
  background: linear-gradient(135deg, #54A9FF, #8b5cf6 55%, #40B4F3);
  box-shadow: 0 0 12px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.28);
  font-size: 13px;
}
/* 主账户：蓝→紫 */
.as-badge-e, .as-dot-e {
  background: linear-gradient(135deg, #3b82f6, #54A9FF);
  box-shadow: 0 0 12px rgba(84,169,255,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
/* 备用账户：紫→品红（与原橙色调统一为紫色系） */
.as-badge-c, .as-dot-c {
  background: linear-gradient(135deg, #40B4F3, #d946ef);
  box-shadow: 0 0 12px rgba(64,180,243,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
/* 下拉菜单选项圆角统一 */
.as-opt { border-radius: 12px; }
.as-opt.selected { border-radius: 12px; }

/* 当前账户提示条：更精致 */
.acct-bar {
  margin: 12px 28px 0;
  padding: 9px 16px;
  background: linear-gradient(135deg, rgba(84,169,255,.14), rgba(64,180,243,.08));
  border: 1px solid rgba(84,169,255,.32);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.acct-bar .acct-dot {
  width: 9px; height: 9px;
  background: linear-gradient(135deg, #6CB5FF, #7CC3FF);
  box-shadow: 0 0 10px rgba(139,92,246,.85);
}
@media (max-width: 720px) {
  .acct-bar { margin: 10px 14px 0; border-radius: 12px; }
}
/* =========================================================
   Logo v2：左上角品牌标识更精致（去掉摆动，玻璃高光质感）
   ========================================================= */
.topbar .logo {
  width: 40px; height: 40px; border-radius: 12px;
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #6CB5FF 0%, #54A9FF 45%, #40B4F3 100%);
  box-shadow: 0 4px 18px rgba(84,169,255,.45), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.18);
  font-size: 20px; font-weight: 800; letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  animation: none; /* 去掉左右摆动 */
}
/* 顶部玻璃高光 */
.topbar .logo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 42%, transparent 60%);
}
/* 底部品牌名与 logo 对齐细节 */
.brand { gap: 12px; }
@media (max-width: 480px) {
  .topbar .logo { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
}
/* Logo 调整为圆润正方形（贴近 App 图标 24% 圆角） */
.topbar .logo {
  border-radius: 25%;
}
/* Logo 改为长方形（横向胶囊造型） */
.topbar .logo {
  width: 52px; height: 30px; border-radius: 9px;
  font-size: 15px; font-weight: 800;
}
@media (max-width: 480px) {
  .topbar .logo { width: 46px; height: 26px; font-size: 13px; border-radius: 8px; }
}
/* Logo 长方形：防止被 flex 压缩 */
.topbar .logo { flex-shrink: 0; }
/* Logo 改为圆角正方形 */
.topbar .logo {
  width: 40px; height: 40px; border-radius: 25%;
  font-size: 20px; font-weight: 800; flex-shrink: 0;
}
@media (max-width: 480px) {
  .topbar .logo { width: 36px; height: 36px; font-size: 18px; }
}
/* =========================================================
   账户切换器 · 手机端精致版（清晰可点击、层次分明）
   ========================================================= */
@media (max-width: 720px) {
  .account-switcher { margin-left: 8px; }
  .as-trigger {
    min-width: 0;
    background: linear-gradient(165deg, rgba(84,169,255,.22), rgba(23,32,58,.92));
    border: 1px solid rgba(139,92,246,.55);
    box-shadow: 0 6px 22px rgba(84,169,255,.32), inset 0 1px 0 rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 8px 12px 8px 8px;
    gap: 9px;
  }
  .as-name { font-size: 14px; }
  .as-sub { color: #8FAED6; font-size: 11.5px; margin-top: 1px; }
  .as-arrow {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(84,169,255,.22);
    display: flex; align-items: center; justify-content: center;
    color: #c4b5fd; font-size: 11px;
    margin-left: 4px;
  }
}
/* =========================================================
   右上角协调化：移除顶部光带 + 账户切换器统一紫色 + 提示条精简
   ========================================================= */
/* 顶栏底部渐变光带：移除（不协调） */
.topbar::after { display: none !important; }

/* 账户徽章统一品牌紫（消除蓝紫混搭 / 贴纸感） */
.as-badge-e, .as-dot-e {
  background: linear-gradient(135deg, #54A9FF, #8b5cf6 60%, #40B4F3);
  box-shadow: 0 0 12px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.as-badge-c, .as-dot-c {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  box-shadow: 0 0 12px rgba(64,180,243,.4), inset 0 1px 0 rgba(255,255,255,.2);
}

/* 副标题提亮（不再融入背景） */
.as-sub { color: #8FAED6; }

/* 触发按钮：更干净的紫色边框 + 内阴影，弱化外发光贴纸感 */
.as-trigger {
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}
.as-trigger:hover { border-color: rgba(139,92,246,.6); box-shadow: 0 6px 20px rgba(84,169,255,.25), inset 0 1px 0 rgba(255,255,255,.08); }

/* 箭头：贴近文字，去掉悬浮感 */
.as-arrow { margin-left: 6px; color: #8FAED6; }

/* 当前账户提示条：更干净协调 */
.acct-bar {
  background: rgba(84,169,255,.08);
  border: 1px solid rgba(84,169,255,.26);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.acct-bar .acct-txt { display: inline-flex; align-items: center; gap: 5px; }
.acct-bar .acct-dot { background: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,.9); }
.acct-bar .acct-hint { color: #93a4c4; font-size: 11.5px; margin-left: 4px; }
/* =========================================================
   账户切换器 v3：单行胶囊（简洁协调，去掉两行信息过载）
   ========================================================= */
.as-trigger {
  min-width: 0;
  padding: 6px 12px 6px 6px;
  gap: 8px;
  border-radius: 999px;
}
.as-badge { width: 26px; height: 26px; border-radius: 8px; }
.as-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.as-arrow { margin-left: 2px; font-size: 11px; }
.as-sub { display: none; }
@media (max-width: 720px) {
  .as-trigger { padding: 6px 11px 6px 6px; gap: 7px; border-radius: 999px; }
  .as-name { font-size: 12.5px; }
  .as-badge { width: 24px; height: 24px; }
}
/* =========================================================
   手机端专属排版：功能宫格 + 底部导航（符合手机 App 习惯）
   ========================================================= */
.mobile-home { display: none; }
.mobile-tabbar { display: none; }
@media (max-width: 720px) {
  .mobile-layout .tabs { display: none; }
  .mobile-home { display: block; padding: 14px 14px 0; }
  .mobile-home.hidden { display: none; }
  .mh-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding: 0 2px; }
  .mh-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: .3px; }
  .mh-sub { font-size: 12px; color: #93a4c4; }
  .mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mh-item {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 15px 12px; border-radius: 17px;
    background: linear-gradient(165deg, rgba(30,41,66,.88), rgba(19,26,46,.92));
    border: 1px solid rgba(84,169,255,.26);
    box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
    text-align: left; color: #fff; cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
  }
  .mh-item:active { transform: scale(.97); border-color: rgba(139,92,246,.65); box-shadow: 0 4px 14px rgba(84,169,255,.3); }
  .mh-ico {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
    background: linear-gradient(135deg, rgba(84,169,255,.28), rgba(64,180,243,.18));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  .mh-name { font-size: 14px; font-weight: 700; line-height: 1.3; flex: 1; }
  .mh-go { color: #8FAED6; font-size: 18px; font-weight: 700; }
  .mobile-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11,15,30,.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid rgba(84,169,255,.28);
    box-shadow: 0 -8px 30px rgba(0,0,0,.35);
  }
  .mt-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; border-radius: 12px; background: transparent; border: none; cursor: pointer;
    color: #8b9bb8; font-size: 11px;
    transition: color .18s;
  }
  .mt-btn.active { color: #fff; }
  .mt-ico { font-size: 20px; filter: grayscale(1) opacity(.65); transition: filter .18s; }
  .mt-btn.active .mt-ico { filter: none; }
  main { padding-bottom: 96px; }
  .acct-bar { margin: 10px 14px 0; }
}
/* ===== 手机端协调微调：留白更透气、节奏更统一 ===== */
@media (max-width: 720px) {
  .mh-grid { gap: 13px; }
  .mh-item { padding: 16px 13px; border-radius: 18px; }
  .mh-ico { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
  .mh-name { font-size: 14px; letter-spacing: .2px; }
  .mh-head { margin-bottom: 14px; }
  .mobile-tabbar { padding: 7px 16px calc(8px + env(safe-area-inset-bottom)); }
  .mt-ico { font-size: 21px; }
  .mt-btn { gap: 2px; }
  .card { border-radius: 18px; }
  .grid-2 { gap: 14px; }
  .panel.active .card { animation: panelIn .3s cubic-bezier(.22,.9,.3,1); }
}
/* 手机端：主题切换按钮低调化（不抢视觉焦点） */
@media (max-width: 720px) {
  .theme-fab { width: 36px; height: 36px; font-size: 16px; right: 14px; bottom: 86px; opacity: .72; animation: none; border-radius: 12px; }
  .theme-panel { right: 14px; bottom: 130px; }
}
/* ===== 手机端上传后排版协调修复 ===== */
@media (max-width: 720px) {
  /* 按钮与预计时间标签分开，留呼吸 */
  .btn.big + .time-hint, .btn + .time-hint { margin-top: 10px; display: inline-block; }
  /* 生成结果区：居中、留白 */
  .result-box { padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; }
  .result-box .status-area { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .result-box .status-text { text-align: center; line-height: 1.6; }
  .result-box .task-progress { width: 100%; margin-top: 4px; }
  .result-box .placeholder { text-align: center; }
  /* 字段行：每项独占一行更整齐 */
  .field-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .field-row .field-grow { min-width: 100%; }
  /* 批量模式开关对齐 */
  .batch-toggle-label { display: flex; align-items: center; gap: 6px; line-height: 1.4; }
  .batch-toggle-label input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }
  /* 文件 chip（上传后）布局协调 */
  .file-chip { width: 100%; }
  .file-chip audio { max-width: 100%; }
}

/* 批量参数区 */
.batch-params {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0;
  padding: 14px; background: rgba(84,169,255,.07);
  border: 1px solid rgba(84,169,255,.25); border-radius: 12px;
}
.batch-params .field-grow { flex: 1; min-width: 120px; }
.batch-params .field-label { font-size: 12px; }

/* 停止生成悬浮按钮 */
.run-stop-btn {
  position: fixed; right: 24px; bottom: 120px; z-index: 95;
  padding: 12px 22px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #ef4444, #f97316); color: #fff;
  font-size: 15px; font-weight: 800; font-family: "Microsoft YaHei", sans-serif;
  box-shadow: 0 10px 30px rgba(239,68,68,.45);
  transition: transform .15s, box-shadow .15s;
}
.run-stop-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(239,68,68,.6); }
.run-stop-btn.hidden { display: none; }

/* per-task stop button inside result box */
.run-local-stop {
  margin-top: 10px;
  background: rgba(239,68,68,.16) !important;
  color: #ffb4b4 !important;
  border: 1px solid rgba(239,68,68,.55) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  cursor: pointer;
  font-size: 13px !important;
  transition: background .15s, transform .15s;
}
.run-local-stop:hover { background: rgba(239,68,68,.3) !important; transform: translateY(-1px); }
.run-local-stop:disabled { opacity: .6; cursor: default; }
.status-area { flex-wrap: wrap; gap: 6px; }

/* ===== Mobile layout polish (mobile only) ===== */
@media (max-width: 720px) {
  .card { margin-bottom: 14px; }
  .card h2 { margin: 0 0 14px; line-height: 1.45; }
  .field-label { margin-top: 16px; margin-bottom: 8px; line-height: 1.5; }
  .card .field-label:first-child { margin-top: 4px; }

  /* upload zones: center + breathing room */
  .dropzone .dz-inner { padding: 30px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
  .dropzone .dz-inner p { margin: 0; font-size: 14px; line-height: 1.5; }
  .dropzone .dz-hint { margin: 0; font-size: 12px; line-height: 1.6; }

  /* form controls padding */
  input[type=text], input[type=password], input[type=number], textarea, select { padding: 12px 14px; box-sizing: border-box; }

  .field-row { row-gap: 12px; }
  .btn.big { margin-top: 4px; }
  .hint { line-height: 1.7; margin-top: 8px; }

  .batch-zone { margin-top: 18px; padding-top: 14px; }
  .batch-config { margin-bottom: 10px; }

  /* bottom nav: clearer active state */
  .mt-btn.active { background: rgba(84,169,255,.22); box-shadow: inset 0 0 0 1px rgba(84,169,255,.35); color: #fff; }
  .mt-ico { font-size: 22px; }

  .acct-bar { padding: 10px 14px; font-size: 12.5px; line-height: 1.5; }

  /* record cards: cap preview, tidy spacing */
  .record-card { padding: 13px; }
  .record-preview { margin-top: 10px; }
  .record-preview img { max-width: 100%; max-height: 150px; width: auto; }
  .record-preview video { max-width: 100%; max-height: 150px; }
  .record-actions { gap: 8px; }
  .record-actions .btn { font-size: 13px; min-height: 38px; padding: 7px 12px; }

  .tabs { padding-bottom: 12px; }
  .result-box { padding: 18px 14px; }
}

@media (max-width: 480px) {
  .card { padding: 14px; }
  .dropzone .dz-inner { padding: 24px 12px; }
  .record-actions .btn { padding: 6px 10px; font-size: 12.5px; }
}
/* ===== Mobile spacious: more breathing room, unified rhythm ===== */
@media (max-width: 720px) {
  main { padding: 20px 18px 110px; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .brand { gap: 11px; }
  .brand h1 { font-size: 14px; letter-spacing: .2px; }
  .tabs { padding: 12px 18px 14px; gap: 8px; }
  .tab-btn { padding: 9px 16px; font-size: 13px; }
  .acct-bar { margin: 14px 18px 0; padding: 12px 16px; font-size: 13px; border-radius: 14px; }

  .mh-head { margin-bottom: 16px; padding: 0 2px; }
  .mh-grid { gap: 16px; }
  .mh-item { padding: 20px 16px; border-radius: 20px; }
  .mh-ico { width: 48px; height: 48px; font-size: 24px; border-radius: 15px; }
  .mh-name { font-size: 15px; }

  .card { padding: 20px; margin-bottom: 16px; border-radius: 20px; }
  .card h2 { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
  .field-label { margin-top: 18px; margin-bottom: 9px; font-size: 13px; }
  input[type=text], input[type=password], input[type=number], textarea, select { padding: 13px 15px; }
  .dropzone .dz-inner { padding: 36px 18px; }
  .dz-icon { font-size: 34px; }
  .btn.big { min-height: 52px; font-size: 16px; margin-top: 6px; }
  .result-box { padding: 20px 16px; }
  .batch-slot { padding: 14px; }
  .batch-zone { margin-top: 20px; padding-top: 16px; }
  .hint { font-size: 12.5px; }

  .record-card { padding: 14px; margin-bottom: 14px; }
  .record-title { font-size: 14.5px; }
}

@media (max-width: 480px) {
  main { padding: 16px 14px 110px; }
  .card { padding: 16px; border-radius: 18px; }
  .dropzone .dz-inner { padding: 28px 14px; }
  .mh-item { padding: 18px 14px; }
  .mh-ico { width: 46px; height: 46px; font-size: 22px; }
  .topbar { padding: 10px 14px; }
  .tabs { padding: 10px 14px 12px; }
}
/* ===== Mobile redesign v3: app-like, decluttered ===== */
@media (max-width: 720px) {
  /* hide top tab strip on mobile (home grid + bottom nav cover all entries) */
  .tabs { display: none !important; }

  /* compact header: hide API key status bar, keep brand + account */
  .topbar .key-status { display: none !important; }
  .topbar { justify-content: space-between; padding: 12px 18px; }
  .brand h1 { font-size: 15px; }
  .brand p { font-size: 11px; }

  /* account pill: cleaner single-line */
  .acct-bar { margin: 14px 18px 0; padding: 11px 16px; font-size: 13px; border-radius: 14px; }
  .acct-bar .acct-hint { display: none; }

  /* home grid: vertical app-style cards, uniform height */
  .mh-grid { gap: 14px; }
  .mh-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 118px;
    padding: 16px;
    border-radius: 20px;
  }
  .mh-ico { width: 50px; height: 50px; font-size: 26px; border-radius: 15px; margin-bottom: 10px; }
  .mh-name { font-size: 14.5px; line-height: 1.35; }
  .mh-go { position: absolute; right: 14px; top: 14px; font-size: 16px; color: rgba(255,255,255,.5); }

  /* functional pages: unified card rhythm */
  .card { padding: 20px; border-radius: 20px; margin-bottom: 16px; }
  .panel.active .card:first-child { margin-top: 4px; }

  main { padding: 18px 18px 110px; }
}

@media (max-width: 480px) {
  .topbar { padding: 10px 16px; }
  .acct-bar { margin: 12px 16px 0; }
  .mh-item { min-height: 108px; padding: 14px; }
  .mh-ico { width: 46px; height: 46px; font-size: 24px; }
  .card { padding: 16px; }
  main { padding: 14px 16px 110px; }
}

/* ===== 生成按钮特效简化：去掉扫光流光，hover 更克制 ===== */
.btn.primary::after { display: none !important; }
.btn.primary:hover { filter: none !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(84,169,255,.32) !important; }

/* ===== 电脑端整体优化：统一功能图标 + 精致排版 ===== */
.tab-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 9px 15px !important;
  border-radius: 11px !important;
  font-size: 13.5px !important;
  letter-spacing: .2px;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .15s;
}
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn.active { transform: translateY(0); }
.tb-ico {
  width: 17px; height: 17px; color: var(--muted);
  flex-shrink: 0;
  transition: color .18s;
}
.tab-btn:hover .tb-ico { color: var(--text); }
.tab-btn.active .tb-ico { color: var(--accent); }
.tb-txt { line-height: 1; }

/* tabs 区域排版 */
.tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 28px 12px;
}
.tabs .tab-btn { margin: 0; }

/* 卡片标题区统一 */
.card h2 { display: flex; align-items: center; gap: 9px; }
.card h2 .tb-ico, .card h2 svg { width: 19px; height: 19px; color: var(--accent); }

/* 面板过渡更柔和 */
.panel.active { animation: panelIn .3s cubic-bezier(.22,.9,.3,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 主内容区呼吸感 */
main { padding: 24px 28px 56px; }
.card { margin-bottom: 18px; }
.field-row { gap: 16px; }
.btn { letter-spacing: .2px; }

/* ===== 电脑端排版统一修复 ===== */
/* 1. 隐藏右下角调色盘浮动按钮（多页干扰） */
.theme-fab { display: none !important; }

/* 2. 结果区：最小高度 + 占位符强化容器感 */
.result-box { min-height: 240px !important; display: flex; flex-direction: column; justify-content: center; }
.result-box .placeholder {
  border: 1.5px dashed rgba(249,249,249,0.6,.4) !important;
  border-radius: 12px;
  padding: 34px 20px !important;
  margin: 6px;
  background: rgba(11,16,32,.25);
}
.result-box .placeholder::before { opacity: .6; }

/* 3. 统一模块垂直间距（上传区/参数区之间呼吸感） */
.field-label { margin: 18px 0 8px !important; }
.card .col > .dropzone { margin-top: 2px; }
.card .col > .field-label + .dropzone { margin-top: 0; }

/* 4. 输入框标签对齐 */
.field-grow label { display: block; text-align: left; }
.field-row { align-items: flex-end; }
.field-grow { min-width: 180px; }

/* 5. 上传区内容居中 */
.dz-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dz-icon { line-height: 1; }
.dz-hint { margin-top: 4px; }

/* 6. records 筛选按钮统一风格 */
.filter-group .preset-btn {
  background: rgba(11,16,32,.35) !important;
  border: 1px solid rgba(249,249,249,0.6,.3) !important;
  color: var(--muted) !important;
  border-radius: 9px !important;
  padding: 7px 14px !important;
  transition: color .18s, border-color .18s, background .18s;
}
.filter-group .preset-btn:hover { color: var(--text) !important; border-color: rgba(84,169,255,.5) !important; }
.filter-group .preset-btn.active {
  background: rgba(84,169,255,.16) !important;
  border-color: rgba(84,169,255,.6) !important;
  color: #fff !important;
}
.filter-group { gap: 8px; }
.records-actions { gap: 10px; align-items: center; }
#recordsRefreshBtn, #recordsClearBtn { margin-left: 2px; }

/* ===== 卡片标题横线去除（更简洁） + 设置锁定界面排版修复 ===== */
.card h2::after { display: none !important; }
#settingsLock { padding: 26px 16px 18px !important; }
#settingsLock > div { display: flex !important; flex-direction: column; align-items: center; }
#settingsLock p { margin: 10px 0 !important; }
#settingsPwd { width: 100% !important; max-width: 300px !important; margin: 14px auto 12px !important; }
#settingsUnlockBtn { min-width: 190px !important; }
#settingsLock .field-label { text-align: center; }

/* 窄卡片水平居中 */
.card.narrow { margin-left: auto !important; margin-right: auto !important; }

/* 钱包图标（Lucide 线性） */
.wc-ico { width: 17px; height: 17px; color: var(--accent); display: inline-block; vertical-align: -3px; }
.bc-ico { width: 14px; height: 14px; color: var(--muted); display: inline-block; vertical-align: -2px; margin-right: 3px; }

/* ===== 电脑端精致动效增强（克制高级，参考大厂交互） ===== */
/* 1. 面板切换：淡入 + 上移 + 轻微缩放 */
.panel.active { animation: panelEnter .38s cubic-bezier(.22,.9,.3,1); }
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to { opacity: 1; transform: none; }
}

/* 2. 卡片 hover：上浮 + 紫色微光 */
.card { transition: transform .25s cubic-bezier(.22,.9,.3,1), border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); border-color: rgba(84,169,255,.45); box-shadow: 0 14px 34px rgba(0,0,0,.26), 0 0 22px rgba(84,169,255,.12); }

/* 3. 功能标签：hover 图标浮动 + 激活发光 */
.tab-btn { transition: transform .2s, color .2s, background .2s, border-color .2s, box-shadow .2s; }
.tab-btn:hover .tb-ico { animation: icoFloat .5s ease; }
@keyframes icoFloat { 0%{transform:translateY(0)} 40%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
.tab-btn.active { box-shadow: 0 4px 16px rgba(84,169,255,.22); }

/* 4. logo：精致呼吸发光（去掉旋转） */
.logo { animation: logoGlow 3.2s ease-in-out infinite !important; }
@keyframes logoGlow {
  0%,100% { box-shadow: 0 0 14px rgba(84,169,255,.35), 0 4px 16px rgba(84,169,255,.3); }
  50% { box-shadow: 0 0 26px rgba(84,169,255,.7), 0 6px 22px rgba(84,169,255,.5); }
}

/* 5. 按钮按压反馈 */
.btn:active { transform: scale(.97); }
.btn.primary { transition: transform .18s, box-shadow .18s, filter .18s; }

/* 6. 背景顶部光晕缓慢流动 */
body::before {
  content: ""; position: fixed; top: -28%; left: -8%; width: 55%; height: 55%;
  background: radial-gradient(circle, rgba(84,169,255,.13), transparent 70%);
  filter: blur(44px); pointer-events: none; z-index: 0;
  animation: bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(5%,4%) scale(1.12); }
}
body::after {
  content: ""; position: fixed; bottom: -30%; right: -10%; width: 55%; height: 55%;
  background: radial-gradient(circle, rgba(64,180,243,.08), transparent 70%);
  filter: blur(44px); pointer-events: none; z-index: 0;
  animation: bgDrift2 32s ease-in-out infinite alternate;
}
@keyframes bgDrift2 {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(-5%,-4%) scale(1.1); }
}
main, .topbar, .tabs, footer { position: relative; z-index: 1; }

/* 7. 上传区 hover：图标浮起 */
.dropzone { transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.dropzone:hover { transform: translateY(-1px); }
.dropzone:hover .dz-icon { animation: icoFloat .5s ease; }

/* ===== 电脑端背景增强：网格 + 多层光晕 + 星点 ===== */
body {
  background-image:
    radial-gradient(1100px 560px at 82% -12%, rgba(64,180,243,.16), transparent 60%),
    radial-gradient(1000px 520px at 8% -8%, rgba(84,169,255,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(64,180,243,.09), transparent 60%),
    repeating-linear-gradient(90deg, rgba(64,180,243,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(64,180,243,.045) 0 1px, transparent 1px 56px),
    linear-gradient(120deg, #0a0f1e 0%, #101731 45%, #0b1022 100%) !important;
  background-attachment: fixed !important;
}
/* 星点 + 底部光晕 */
body::after {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(2px 2px at 24% 64%, rgba(196,181,253,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 12%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(2px 2px at 52% 78%, rgba(196,181,253,.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 30%, rgba(165,243,252,.5), transparent 100%),
    radial-gradient(2px 2px at 78% 58%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 18%, rgba(196,181,253,.45), transparent 100%),
    radial-gradient(2.5px 2.5px at 45% 45%, rgba(165,243,252,.28), transparent 100%),
    radial-gradient(500px 400px at 50% 125%, rgba(64,180,243,.08), transparent 70%);
  background-repeat: no-repeat;
}

/* ===== 恢复电脑端鼠标互动与背景层次 ===== */
#cursorGlow { display: block !important; z-index: 1 !important; }
.meteors { display: block !important; }
body {
  background-image:
    radial-gradient(1100px 560px at 82% -12%, rgba(64,180,243,.16), transparent 60%),
    radial-gradient(1000px 520px at 8% -8%, rgba(84,169,255,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(64,180,243,.09), transparent 60%),
    repeating-linear-gradient(90deg, rgba(64,180,243,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(64,180,243,.045) 0 1px, transparent 1px 56px),
    linear-gradient(120deg, #0a0f1e 0%, #101731 45%, #0b1022 100%) !important;
  background-attachment: fixed !important;
}

/* 图生图批量结果：网格多列布局 */
#editBatchResult.batch-active {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  align-items: start;
}

/* ===== 排版全面整改（左右平衡 / 间距统一 / 批量对齐 / 按钮留白） ===== */
/* 1. 左右区域平衡：结果区最小高度 + 占位符强化 */
.result-box { min-height: 340px !important; }
.result-box .placeholder {
  border: 1.5px dashed rgba(249,249,249,0.6,.4) !important;
  border-radius: 14px;
  padding: 44px 20px !important;
  background: rgba(11,16,32,.3);
  margin: 8px;
}
/* 2. 左右列宽更平衡 */
.grid-2 { grid-template-columns: 1fr 1fr !important; gap: 28px; align-items: start; }
.result-col { min-height: 360px; }

/* 3. 统一模块垂直间距（v4 加大） */
.field-label { margin: 18px 0 10px !important; }
.card .col { display: flex; flex-direction: column; }
.card .col > .dropzone + .file-chip, .card .col > .field-label + .dropzone { margin-bottom: 2px; }

/* 4. 参数区不拥挤（v4 加大列间距 + 控件最小宽度） */
.field-row { gap: 18px; margin-bottom: 8px; row-gap: 14px; }
.field-grow { min-width: 200px; }

/* 5. 上传区内容居中 */
.dz-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; }
.dz-icon { line-height: 1; }

/* 6. 批量槽位：对齐 + 单独生成按钮整齐 */
.batch-slots { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .batch-slots { grid-template-columns: 1fr; } }
.batch-slot { padding: 18px 20px; }
.batch-slot-head { align-items: center; }
.slot-num { flex-shrink: 0; }
.slot-actions { display: flex; gap: 8px; margin-top: 12px; }
.slot-actions .slot-run { flex: 1; }
.slot-status { margin-top: 10px; }

/* 7. 停止生成 / 返回顶部按钮留白 */
.run-stop-btn { right: 24px !important; bottom: 24px !important; padding: 12px 20px !important; border-radius: 12px !important; }
.back-top { right: 24px !important; bottom: 88px !important; }

/* 8. 顶部账户信息防溢出 */
.topbar { flex-wrap: nowrap !important; }
.acct-bar { max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acct-bal { white-space: nowrap; }

/* 9. 底部内容留白（防截断） */
main { padding-bottom: 90px !important; }

/* ===== 排版重新设计 v2：左参数(固定紧凑) + 右结果(自适应大图) ===== */
.grid-2 {
  display: grid !important;
  grid-template-columns: minmax(380px, 440px) minmax(0, 1fr) !important;
  gap: 30px !important;
  align-items: start !important;
}
@media (max-width: 1150px) { .grid-2 { grid-template-columns: 1fr !important; } }

/* 参数区：模块分组 + 分隔线，更清晰 */
.card .col { display: flex; flex-direction: column; }
.card .col > .field-label {
  margin: 22px 0 10px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(84,169,255,.15);
  font-size: 14px !important;
}
.card .col > .field-label:first-child { margin-top: 0 !important; padding-top: 0; border-top: none; }
.card .col > .dropzone, .card .col > .field-label + .dropzone { margin-bottom: 0; }

/* 参数区内的行控件（v4 加大列间距、加大控件最小宽度） */
.field-row { gap: 18px !important; row-gap: 14px !important; }
.field-grow { min-width: 200px !important; }

/* 结果区：自适应大图 + 丰富占位 */
.result-col { min-width: 0; }
.result-col > .field-label {
  font-size: 15px !important; font-weight: 700; color: var(--text);
  margin-bottom: 12px !important;
}
.result-box {
  min-height: 420px !important;
  background: linear-gradient(170deg, rgba(18,26,48,.85), rgba(11,16,32,.92)) !important;
  border-radius: 16px !important;
  display: flex; flex-direction: column; justify-content: center;
}
.result-box .placeholder {
  border: 1.5px dashed rgba(249,249,249,0.6,.4) !important;
  border-radius: 14px;
  padding: 60px 24px !important;
  text-align: center;
  background: rgba(11,16,32,.35);
}
.result-box .placeholder::before { font-size: 42px !important; opacity: .7; margin-bottom: 14px; }
.result-box img { max-width: 100%; max-height: 640px !important; width: auto; border-radius: 12px; margin: 0 auto; }
.result-box video { max-width: 100%; max-height: 640px !important; margin: 0 auto; }

/* 生成按钮区更醒目 */
.btn.big { min-height: 52px; font-size: 16px !important; }

/* ===== 批量槽位：状态徽章统一 + 结果整齐 + 留白 ===== */
.batch-slot { padding: 20px 22px; }
.batch-slot .slot-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; margin-top: 14px;
  letter-spacing: .3px;
}
.slot-status.success { background: rgba(52,211,153,.16); color: #6ee7b7; border: 1px solid rgba(52,211,153,.4); }
.slot-status.failed { background: rgba(248,113,113,.16); color: #fca5a5; border: 1px solid rgba(248,113,113,.4); }
.slot-status.running { background: rgba(251,191,36,.16); color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.slot-status.skip { background: rgba(249,249,249,0.6,.16); color: #aab4d0; border: 1px solid rgba(249,249,249,0.6,.35); }
.slot-result { margin-top: 6px; min-height: 36px; }
.slot-result video, .slot-result img {
  width: 100%; max-height: 220px; border-radius: 10px;
  background: #000; object-fit: contain; margin-top: 4px;
}
.slot-result .btn { margin-top: 12px; }
.slot-file-pick { margin-top: 8px; padding: 14px 16px; gap: 12px; }
.slot-actions { margin-top: 14px; }
.slot-actions .slot-run { min-height: 38px; }

/* ===== 批量槽位：更紧凑，一屏显示更多，不截断 ===== */
.batch-slots { gap: 12px !important; }
.batch-slot { padding: 14px 16px !important; }
.batch-slot-head { margin-bottom: 8px !important; }
.slot-num { min-width: 26px; height: 26px; padding: 0 8px; font-size: 13px; border-radius: 8px; }
.batch-slot .field-label { margin: 10px 0 5px !important; font-size: 12px !important; }
.slot-file-pick { padding: 10px 12px !important; gap: 8px; margin-top: 4px; }
.sfp-icon { font-size: 17px; }
.sfp-text { font-size: 12px; }
.sfp-name { max-width: 140px; font-size: 11.5px; }
.slot-actions { margin-top: 10px !important; }
.slot-actions .slot-run { min-height: 34px; font-size: 12.5px; padding: 6px 12px; }
.slot-status { margin-top: 10px !important; padding: 4px 11px !important; font-size: 11.5px !important; }
.slot-result { min-height: 24px; }
.slot-result video, .slot-result img { max-height: 160px !important; }

/* 批量槽位：文件字段并排 */
.slot-files { display: flex; gap: 10px; flex-wrap: wrap; }
.slot-file-col { flex: 1; min-width: 150px; }

/* —— 高级版全能参考：参考素材磁贴布局 —— */
.slot-ref-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; min-width: 0; }
.slot-ref-col { min-width: 0; }
.slot-ref-tile {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 84px !important;
  border: 1.5px dashed rgba(84,169,255,.42) !important;
  border-radius: 12px !important;
  background: rgba(11,16,32,.55) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
.slot-ref-tile:hover { border-color: #54A9FF !important; background: rgba(84,169,255,.08) !important; box-shadow: 0 0 16px rgba(84,169,255,.16) !important; }
.slot-ref-tile.filled { border-style: solid !important; border-color: rgba(84,169,255,.55) !important; }
.srt-label {
  position: absolute !important; left: 6px; top: 6px; z-index: 2 !important;
  padding: 2px 7px !important; border-radius: 7px !important;
  background: rgba(84,169,255,.24) !important; color: #c7d2fe !important;
  font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important;
  pointer-events: none !important;
}
.srt-body {
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
}
.srt-add { font-size: 15px !important; font-weight: 700 !important; color: #c7d2fe !important; }
.srt-remove {
  display: none !important; position: absolute !important; right: 6px; top: 6px; z-index: 3 !important;
  width: 20px !important; height: 20px !important;
  align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; background: rgba(248,113,113,.9) !important; color: #fff !important;
  font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important;
}
.slot-ref-tile.filled .srt-remove { display: flex !important; }
.srt-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.srt-file-name {
  max-width: calc(100% - 14px) !important; padding: 4px 7px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  font-size: 11px !important; color: #c7d2fe !important;
}

/* —— 高级版全能参考批量：槽位随屏幕多列横排，槽位内部参考视频/参考图/参考音频/提示词纵向铺开 —— */
#aioProBatchSlots .slot-files { display: flex !important; flex-direction: column; gap: 14px !important; }
#aioProBatchSlots .slot-file-col,
#aioProBatchSlots .slot-ref-col { width: 100%; min-width: 0 !important; }

/* ===== 顶部账户条排版优化（垂直居中 / 余额分组 / 刷新图标清晰） ===== */
.acct-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
}
.acct-bar .acct-dot { flex-shrink: 0; }
.acct-bar .acct-txt { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.acct-bar .acct-txt b { color: #fff; }
.acct-bar .acct-hint { margin-left: 2px; white-space: nowrap; font-size: 12px; }
.acct-bar .acct-bal {
  margin-left: auto;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 14px;
  background: rgba(11,16,32,.45);
  border: 1px solid rgba(84,169,255,.25);
  border-radius: 9px;
  font-size: 13px !important;
  white-space: nowrap;
}
.acct-bar .acct-bal em { font-style: normal; font-weight: 700; }
.acct-bar .ab-refresh {
  width: 26px !important; height: 26px !important;
  font-size: 14px !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 7px !important;
}

/* 账户条余额区域：更高更舒展（不挤） */
.acct-bar { padding: 14px 20px !important; }
.acct-bar .acct-bal {
  min-height: 42px !important;
  padding: 8px 18px !important;
  gap: 14px !important;
}
.acct-bar .acct-bal em { font-size: 14.5px !important; }
.acct-bar .acct-bal svg, .acct-bar .acct-bal .wc-ico { width: 18px; height: 18px; }
.acct-bar .ab-refresh {
  width: 30px !important; height: 30px !important;
  font-size: 15px !important;
}

/* 批量槽位：单列宽槽位（在参数栏内更宽敞，不再窄长） */
.batch-slots { grid-template-columns: 1fr !important; gap: 12px !important; }
.batch-slot { padding: 14px 18px !important; }
.slot-files { gap: 12px !important; }
.slot-file-col { min-width: 0 !important; }
.slot-file-pick { padding: 12px 14px !important; }
.slot-status { margin-top: 12px !important; }
.slot-actions { margin-top: 12px !important; }

/* 右侧结果区不空：左参数加宽 + 占位符更饱满（仅宽屏生效，手机/平板保持单列） */
@media (min-width: 1151px) {
  .grid-2 { grid-template-columns: minmax(430px, 1.15fr) minmax(0, 1fr) !important; }
}
.result-box .placeholder {
  border: 1.5px dashed rgba(139,92,246,.4) !important;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(84,169,255,.12), transparent 60%),
    rgba(11,16,32,.4) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  padding: 70px 30px !important;
}
.result-box .placeholder::before { font-size: 52px !important; margin-bottom: 18px; }
.result-box .placeholder::after {
  content: "上传素材并点击生成，结果会显示在这里";
  display: block; font-size: 12.5px; color: #9AA1AD; margin-top: 8px;
}

/* 动作迁移批量：全宽 + 3 列一排 */
#atBatchSlots.batch-slots { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
@media (max-width: 900px) { #atBatchSlots.batch-slots { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 640px) { #atBatchSlots.batch-slots { grid-template-columns: 1fr !important; } }

/* 账户条占满宽度，余额靠右，右侧不再空 */
.acct-bar { max-width: none !important; width: auto !important; }

/* 所有批量槽位：全宽 3 列一排 */
#atBatchSlots.batch-slots, #voiceBatchSlots.batch-slots, #dhBatchSlots.batch-slots, #dhSlowBatchSlots.batch-slots, #danceBatchSlots.batch-slots, #lipBatchSlots.batch-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  #atBatchSlots.batch-slots, #voiceBatchSlots.batch-slots, #dhBatchSlots.batch-slots, #dhSlowBatchSlots.batch-slots, #danceBatchSlots.batch-slots, #lipBatchSlots.batch-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  #atBatchSlots.batch-slots, #voiceBatchSlots.batch-slots, #dhBatchSlots.batch-slots, #dhSlowBatchSlots.batch-slots, #danceBatchSlots.batch-slots, #lipBatchSlots.batch-slots {
    grid-template-columns: 1fr !important;
  }
}

/* 音色迁移 / 洗图批量 3 列 */
#vtBatchSlots.batch-slots, #washBatchSlots.batch-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  #vtBatchSlots.batch-slots, #washBatchSlots.batch-slots { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
  #vtBatchSlots.batch-slots, #washBatchSlots.batch-slots { grid-template-columns: 1fr !important; }
}

/* 修复：账户切换下拉菜单被 tabs 覆盖（提高层级） */
.topbar { z-index: 2000 !important; }
.account-switcher .as-menu { z-index: 2001 !important; }


/* ===== 视频去字幕（本地） ===== */
.rs-pos-group { display:flex; gap:8px; flex-wrap:wrap; }
.rs-region-box { position:relative; width:100%; max-width:560px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#000; }
.rs-region-box video { display:block; width:100%; max-height:340px; object-fit:contain; }
.rs-region-layer { position:absolute; inset:0; cursor:crosshair; z-index:2; }
.rs-sel { position:absolute; border:2px solid #40B4F3; background:rgba(64,180,243,.16); box-shadow:0 0 0 1px rgba(0,0,0,.4); pointer-events:none; z-index:3; }
.rs-sel span { position:absolute; left:4px; top:-22px; background:rgba(0,0,0,.78); color:#7dd3fc; font-size:11px; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.rs-compare { display:flex; gap:12px; flex-wrap:wrap; }
.rs-compare > div { flex:1 1 240px; min-width:0; }

/* 余额接口暂不可用（RunningHub 服务端问题，不影响生成） */
.wallet-chip .bal-err, .acct-bal .bal-err { color: #fbbf24; font-size: 12px; white-space: nowrap; }
/* 动作迁移：两组案例左右并排 */
.at-cases-row { display: flex; gap: 12px; flex-wrap: nowrap; align-items: flex-start; }
.at-cases-row .wash-case-imgs { flex: 1 1 0; min-width: 0; justify-content: center; gap: 10px; flex-wrap: nowrap; align-items: center; }
/* 案例内"前图→箭头→后图"三项：让前/后图弹性收缩、箭头固定，避免超宽换行导致两组错位 */
.at-cases-row .wc-item { flex: 1 1 0; min-width: 0; }
.at-cases-row .wc-arrow { flex: 0 0 auto; }
.at-cases-row .wc-item video,
.at-cases-row .wc-item img { width: 100%; max-width: 240px; height: auto; }
/* 窄屏：两组案例改为纵向堆叠，各占满一行，避免两列挤压换行 */
@media (max-width: 720px) {
  .at-cases-row { flex-direction: column; align-items: stretch; }
  .at-cases-row .wash-case-imgs { flex: 1 1 auto; }
  .at-cases-row .wc-item video,
  .at-cases-row .wc-item img { max-width: 220px; }
}


@media (max-width: 720px) { .wallet-balance { font-size: 12px; padding: 4px 9px; margin-left: 6px; } }

/* 当前扣费账户提示条 + 钱包/币子余额 */
/* 当前扣费账户提示条 */
.acct-bar {
  margin: 12px 28px 0; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(84,169,255,.1); border: 1px solid rgba(84,169,255,.3);
  border-radius: 10px; font-size: 13px; color: #c7d2fe;
}
.acct-bar b { color: #fff; font-weight: 700; }
.acct-bar .acct-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #40B4F3, #8b5cf6);
  box-shadow: 0 0 8px rgba(139,92,246,.7);
  animation: dotPulse2 1.2s ease-in-out infinite;
}
.acct-bar .acct-hint { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .acct-bar { margin: 10px 16px 0; } }
/* =========================================================
   钱包 / 币子余额同步徽章
   ========================================================= */
.wallet-chip {
  position: relative; margin-left: 10px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px; cursor: pointer; user-select: none;
  background: linear-gradient(165deg, rgba(20,28,52,.9), rgba(13,18,36,.92));
  border: 1px solid rgba(84,169,255,.38); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wallet-chip:hover { border-color: rgba(139,92,246,.68); box-shadow: 0 4px 22px rgba(84,169,255,.3); transform: translateY(-1px); }
.wallet-chip.ok { border-color: rgba(52,211,153,.42); }
.wallet-chip.error { border-color: rgba(248,113,113,.5); }
.wallet-chip.loading .wc-name { opacity: .45; }
.wallet-chip.loading .wc-refresh { animation: wcSpin 1s linear infinite; }
.wc-icon { font-size: 16px; line-height: 1; }
.wc-body { display: flex; flex-direction: column; line-height: 1.15; }
.wc-name { font-weight: 700; font-size: 13px; color: #F2F4F8; white-space: nowrap; }
.wc-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .3px; }
.wc-refresh {
  border: none; background: rgba(84,169,255,.14); color: #c7d2fe;
  width: 24px; height: 24px; border-radius: 8px; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.wc-refresh:hover { background: rgba(84,169,255,.32); color: #fff; }
@keyframes wcSpin { to { transform: rotate(360deg); } }
.wc-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 99;
  min-width: 300px; padding: 10px;
  background: rgba(17,24,43,.97);
  border: 1px solid rgba(84,169,255,.32); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 26px rgba(84,169,255,.14);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.wallet-chip.open .wc-pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wc-pop-title { font-size: 12px; font-weight: 700; color: #8FAED6; letter-spacing: .5px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(84,169,255,.18); }
.wc-pop-list { display: flex; flex-direction: column; gap: 6px; }
.wc-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 9px; font-size: 12.5px;
  background: rgba(84,169,255,.07); border: 1px solid rgba(84,169,255,.16);
}
.wc-acc-name { color: #c7d2fe; white-space: nowrap; }
.wc-acc-v { font-weight: 700; color: #fff; white-space: nowrap; }
.wc-pop-hint { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; }
/* 钱包徽章：右上角可点击展示余额明细（黑金皮肤下显示，见 skin-gold.css） */
.wallet-chip { display: inline-flex !important; }
.acct-bar { flex-wrap: nowrap; }
.acct-bal { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 12.5px; white-space: nowrap; }
.acct-bal .ab-refresh { border: none; background: rgba(84,169,255,.14); color: #c7d2fe; width: 24px; height: 24px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s; }
.acct-bal .ab-refresh:hover { background: rgba(84,169,255,.32); color: #fff; }
.wallet-chip {
  position: relative; margin-left: 10px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px; cursor: pointer; user-select: none;
  background: linear-gradient(165deg, rgba(20,28,52,.9), rgba(13,18,36,.92));
  border: 1px solid rgba(84,169,255,.38); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wallet-chip:hover { border-color: rgba(139,92,246,.68); box-shadow: 0 4px 22px rgba(84,169,255,.3); transform: translateY(-1px); }
.wallet-chip.ok { border-color: rgba(52,211,153,.42); }
.wallet-chip.error { border-color: rgba(248,113,113,.5); }
.wallet-chip.loading .wc-name { opacity: .45; }
.wallet-chip.loading .wc-refresh { animation: wcSpin 1s linear infinite; }
.wc-icon { font-size: 16px; line-height: 1; }
.wc-body { display: flex; flex-direction: column; line-height: 1.15; }
.wc-name { font-weight: 700; font-size: 13px; color: #F2F4F8; white-space: nowrap; }
.wc-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .3px; }
.wc-refresh {
  border: none; background: rgba(84,169,255,.14); color: #c7d2fe;
  width: 24px; height: 24px; border-radius: 8px; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.wc-refresh:hover { background: rgba(84,169,255,.32); color: #fff; }
@keyframes wcSpin { to { transform: rotate(360deg); } }
.wc-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 99;
  min-width: 300px; padding: 10px;
  background: rgba(17,24,43,.97);
  border: 1px solid rgba(84,169,255,.32); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 26px rgba(84,169,255,.14);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.wallet-chip.open .wc-pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wc-pop-title { font-size: 12px; font-weight: 700; color: #8FAED6; letter-spacing: .5px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(84,169,255,.18); }
.wc-pop-list { display: flex; flex-direction: column; gap: 6px; }
.wc-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 9px; font-size: 12.5px;
  background: rgba(84,169,255,.07); border: 1px solid rgba(84,169,255,.16);
}
.wc-acc-name { color: #c7d2fe; white-space: nowrap; }
.wc-acc-v { font-weight: 700; color: #fff; white-space: nowrap; }
.wc-pop-hint { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; }

@keyframes dotPulse2 { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* 主题切换器 */
.theme-fab {
  position: fixed;
  right: 18px; bottom: 74px;
  z-index: 99;
  cursor: pointer;
}

/* 钱包 / 币子 矢量图标 */
.wico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wico-wallet { color: #FFAE43; }
.wico-coins { color: #a78bfa; }
.wc-icon svg { width: 16px; height: 16px; display: block; }

/* 生成记录页：完全关闭动态效果 */
body.calm #bg-canvas, body.calm #cursorGlow, body.calm .beams { display: none !important; }

/* ============================================================
   UI 2.0 大厂深色风（参考 shadcn/ui + Ant Design 设计语言）
   更克制、更精致：近黑背景、细边框、柔和强调色、清晰层级
   ============================================================ */
:root {
  --bg: #0a0a0c;
  --bg2: #101014;
  --card: #131318;
  --card2: #1a1a20;
  --border: rgba(255,255,255,.07);
  --text: #f4f4f5;
  --muted: #a0a0ab;
  --accent: #7c5cfc;
  --accent2: #9d7bff;
  --cyan: #38D6F0;
  --green: #3DD68C;
  --red: #FF6B7A;
  --yellow: #FFC24B;
}
body {
  background: radial-gradient(1200px 620px at 85% -10%, rgba(84,169,255,.055), transparent 55%),
              radial-gradient(1000px 520px at 0% 0%, rgba(84,169,255,.045), transparent 50%),
              var(--bg) !important;
  font-family: "Inter", "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .1px;
}
/* 顶部导航 */
.tabs { padding: 16px 28px 10px; gap: 6px; }
.tab-btn { border-radius: 9px; padding: 9px 15px; font-weight: 500; border: 1px solid transparent; color: #a0a0ab; }
.tab-btn:hover { background: rgba(255,255,255,.04); color: #e8e8ee; }
.tab-btn.active {
  background: rgba(84,169,255,.13); color: #fff;
  border-color: rgba(84,169,255,.28);
  box-shadow: 0 2px 10px rgba(84,169,255,.15);
}
/* 卡片 */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 45%), var(--card) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.panel h2, .card h2 { font-weight: 700; letter-spacing: -.2px; margin-bottom: 14px; }
/* 按钮 */
.btn { border-radius: 9px; font-weight: 600; }
.btn.primary { background: linear-gradient(135deg,#7c5cfc,#8f6bff); box-shadow: 0 4px 14px rgba(84,169,255,.26); }
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(84,169,255,.34); }
.btn.primary:active { transform: translateY(1px); }
/* 表单 */
input[type=text], input[type=password], input[type=number], select, textarea {
  background: #0d0d11; color: #f4f4f5;
  border: 1px solid rgba(255,255,255,.09); border-radius: 9px;
  font-size: 14px; transition: border-color .18s, box-shadow .18s, background .18s;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, select:focus, textarea:focus {
  border-color: rgba(84,169,255,.55); box-shadow: 0 0 0 3px rgba(84,169,255,.13);
  background: #101016;
}
select option { background: #16161c; color: #f4f4f5; }
.field-label { color: #c9c9d4; font-weight: 500; letter-spacing: .2px; font-size: 13px; }
/* 上传区 */
.dropzone { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.02); border-radius: 11px; }
.dropzone:hover, .dropzone.drag { border-color: rgba(84,169,255,.5); background: rgba(84,169,255,.055); }
/* 结果框 */
.result-box {
  background: #0d0d11;
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
}
.placeholder { border-color: rgba(255,255,255,.1); color: var(--muted); }
/* 案例/提示框 */
.wash-case {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
}
.wash-case-title { color: #d6d6e0; font-weight: 600; }
/* 提示文字 */
.hint { color: #7d7d89; }
/* 账户条 */
.acct-bar { background: rgba(84,169,255,.07); border: 1px solid rgba(84,169,255,.16); border-radius: 10px; }
/* 批量槽位 */
.batch-slot { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
/* 滚动条更精致 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
::-webkit-scrollbar-track { background: transparent; }
/* 面板进入动画更柔和 */
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============ UI 2.0 精修 ============ */
/* 上传区提示文字更大更清晰 */
.dz-inner p { font-size: 15px; color: #d8d8e2; font-weight: 500; }
.dz-hint { font-size: 13px; color: #8b8b98; }
.dz-icon { font-size: 30px; }
/* 占位符更专业（去卡通感） */
.result-box .placeholder::before { content: "▦"; color: rgba(84,169,255,.55); }
.placeholder { font-size: 14px; color: #9a9aa6; }
/* 卡片内边框内发光 */
.card { box-shadow: 0 12px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.035), inset 0 0 40px rgba(84,169,255,.02) !important; }
/* 帮助按钮微调：不遮挡 + 精致 */
.help-fab { box-shadow: 0 8px 24px rgba(84,169,255,.35); font-weight: 600; }
/* 余额/账户显示更整齐 */
.acct-bal em { font-variant-numeric: tabular-nums; font-weight: 600; color: #e6e6f0; }
/* 主标题更清晰 */
.panel h2, .card h2 { color: #f6f6f8; }

/* ============================================================
   UI 3.0 极简深灰大厂风（Linear / Vercel / Ant Design）
   纯深灰背景、细边框、克制单一强调色、干净整齐排版
   ============================================================ */
:root {
  --bg: #0a0a0b;
  --bg2: #101012;
  --card: #121214;
  --card2: #17171a;
  --border: rgba(255,255,255,.065);
  --text: #f2f2f4;
  --muted: #90909a;
  --accent: #7c5cfc;
  --accent2: #8f6bff;
  --cyan: #38D6F0;
  --green: #3DD68C;
  --red: #FF6B7A;
  --yellow: #FFC24B;
}
/* 背景：纯深灰，去掉花哨光晕 */
body {
  background: #0a0a0b !important;
}
/* 顶部导航：窄条 + 底部细线 */
.tabs {
  background: #0d0d0f;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: sticky; top: 0; z-index: 50;
  overflow-x: auto;
}
.tab-btn {
  background: transparent; color: #90909a;
  border: none; border-radius: 6px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.tab-btn:hover { background: rgba(255,255,255,.05); color: #e8e8ec; }
.tab-btn.active {
  background: rgba(84,169,255,.14); color: #fff;
  border: none;
}
/* 主内容：更整齐的排版 */
main { padding: 22px 26px 30px; }
.panel.active { animation: panelIn .3s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* 卡片：近黑 + 细边框 + 大内边距 */
.card {
  background: #121214 !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 12px !important;
  padding: 24px 26px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 30px rgba(0,0,0,.3) !important;
}
.card h2, .panel h2 {
  font-size: 17px; font-weight: 700; color: #f6f6f8;
  letter-spacing: -.2px; margin-bottom: 16px;
}
/* 左右分栏：更大间距（v4 加大） */
.grid-2 { gap: 28px !important; }
.col { min-width: 0; }
/* 按钮：克制渐变 + 圆角 */
.btn { border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; }
.btn.primary { background: linear-gradient(135deg,#7c5cfc,#8f6bff); box-shadow: 0 3px 12px rgba(84,169,255,.22); }
.btn.primary:hover { filter: brightness(1.06); }
.btn:not(.primary) { background: rgba(255,255,255,.05); color: #dcdce2; border: 1px solid rgba(255,255,255,.08); }
.btn:not(.primary):hover { background: rgba(255,255,255,.08); }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 6px; }
.btn.big { padding: 13px 28px; font-size: 15px; }
/* 表单控件（v4 加大内边距、统一最小高度） */
input[type=text], input[type=password], input[type=number], select, textarea {
  background: #0e0e11 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #f2f2f4 !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}
select { min-height: 44px !important; padding-right: 30px !important; }
textarea { min-height: 110px !important; line-height: 1.6 !important; }
input[type=range] { min-height: auto !important; padding: 0 !important; background: transparent !important; border: none !important; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(84,169,255,.6) !important;
  box-shadow: 0 0 0 3px rgba(84,169,255,.12) !important;
}
select option { background: #17171a; color: #f2f2f4; }
.field-label { color: #b8b8c2; font-size: 13.5px; font-weight: 500; letter-spacing: .2px; margin: 18px 0 10px; }
.field-row { gap: 18px; row-gap: 14px; }
/* 上传区 */
.dropzone {
  border: 1.5px dashed rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.015) !important;
  border-radius: 10px !important;
  padding: 24px 16px !important;
}
.dropzone:hover, .dropzone.drag { border-color: rgba(84,169,255,.55) !important; background: rgba(84,169,255,.05) !important; }
.dz-inner p { font-size: 14.5px; color: #d8d8e0; }
.dz-hint { font-size: 12.5px; color: #83838d; }
/* 结果框 */
.result-box {
  background: #0e0e11 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
}
.placeholder { border-color: rgba(255,255,255,.09); color: #8a8a94; font-size: 13.5px; }
.placeholder::before { content: "▦"; color: rgba(84,169,255,.45); }
/* 案例框 */
.wash-case { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.065); border-radius: 10px; }
.wash-case-title { color: #d4d4dc; font-weight: 600; }
/* 提示 */
.hint { color: #7d7d87; font-size: 12.5px; }
/* 账户条 / 更新按钮条 */
.acct-bar { background: rgba(84,169,255,.06); border: 1px solid rgba(84,169,255,.14); border-radius: 8px; }
/* 批量槽位 */
.batch-slot { background: rgba(255,255,255,.018); border: 1px solid rgba(255,255,255,.065); border-radius: 10px; }
/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ============ UI 3.0 极简：关闭花哨背景装饰，露出纯净深灰 ============ */
#bg-canvas, .beams, .dot-grid, #cursorGlow { display: none !important; }
.splash-bg { display: none !important; }

/* Minimax 使用教程折叠框 */
.tutorial { margin-top: 14px; border: 1px solid rgba(84,169,255,.25); border-radius: 12px; padding: 10px 14px; background: rgba(84,169,255,.06); }
.tutorial summary { cursor: pointer; font-weight: 600; color: #8FAED6; }
.tutorial ol { margin: 8px 0 4px 18px; padding: 0; line-height: 1.8; font-size: 13px; }
.tutorial li { margin-bottom: 4px; }
.tutorial .hint { margin-top: 6px; }

/* 批量槽位下拉选择框 */
.batch-slot select.slot-field {
  width: 100%; border-radius: 10px; padding: 8px 10px; margin-top: 4px;
  background: rgba(11,16,32,.6); border: 1px solid rgba(42,55,87,.9);
  color: var(--text); font-size: 13px;
}
.batch-slot select.slot-field:focus { border-color: #54A9FF; box-shadow: 0 0 0 3px rgba(84,169,255,.16); }

/* ===== 所有功能批量槽位统一：与声音克隆批量一致（宽屏 ≥1151px 3 个一排） ===== */
@media (min-width: 1151px) {
  .batch-slots { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; }
}
@media (min-width: 900px) and (max-width: 1150px) {
  .batch-slots { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 899px) {
  .batch-slots { grid-template-columns: 1fr !important; gap: 12px !important; }
}
.batch-slot { display: flex; flex-direction: column; }
.batch-slot .slot-actions { margin-top: auto; }
.batch-slot .slot-status { align-self: flex-start; }

/* ============ UI 4.0 精修 · 排版升级（卡片化导航 & 高级质感） ============ */

/* 功能导航：居中卡片宫格，解决最后一行孤零零、右侧大空白 */
nav.tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 30px !important;
  padding: 16px 18px 14px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 18px !important;
}

nav.tabs .tab-btn {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 150px !important;
  min-height: 86px !important;
  padding: 12px 8px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: #b4b4c0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  line-height: 1.25 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.16) !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important;
  animation: none !important;
}
nav.tabs .tab-btn .tb-ico {
  width: 24px !important;
  height: 24px !important;
  color: #8d8d9c !important;
  transition: color .2s ease, transform .2s ease !important;
}
nav.tabs .tab-btn .tb-txt { line-height: 1.25 !important; text-align: center !important; white-space: normal !important; }

nav.tabs .tab-btn:hover {
  transform: translateY(-3px) !important;
  background: rgba(84,169,255,.12) !important;
  border-color: rgba(84,169,255,.38) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(84,169,255,.18) !important;
}
nav.tabs .tab-btn:hover .tb-ico { color: #cdb7ff !important; transform: scale(1.08) !important; }

nav.tabs .tab-btn.active {
  background: linear-gradient(135deg, rgba(84,169,255,.30), rgba(143,107,255,.14)) !important;
  border-color: rgba(84,169,255,.52) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(84,169,255,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
nav.tabs .tab-btn.active .tb-ico { color: #ecdcff !important; }
nav.tabs .tab-btn.active::after { display: none !important; }

/* 顶部栏：更稳重的深色玻璃 + 品牌质感 */
.topbar {
  padding: 15px 30px !important;
  background: rgba(13,17,30,.82) !important;
  border-bottom: 1px solid rgba(84,169,255,.16) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
}
.brand { gap: 14px !important; }
.brand .logo {
  width: 43px !important; height: 43px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c5cfc, #8f6bff) !important;
  box-shadow: 0 6px 18px rgba(84,169,255,.4) !important;
  animation: none !important;
  font-size: 20px !important;
}
.brand h1 { font-size: 19px !important; font-weight: 800 !important; letter-spacing: .2px !important; color: #f6f6f8 !important; }
.brand p { font-size: 12px !important; color: #8a8a96 !important; margin-top: 3px !important; letter-spacing: .3px !important; }

/* 账户切换器：更精致 */
.as-trigger {
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px) !important;
}
.as-trigger:hover { border-color: rgba(84,169,255,.4) !important; box-shadow: 0 6px 20px rgba(84,169,255,.2) !important; }

/* 账户状态条：居中卡片 + 数字等宽 */
.acct-bar {
  margin: 16px 30px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  background: rgba(84,169,255,.07) !important;
  border: 1px solid rgba(84,169,255,.15) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.acct-bar .acct-dot { width: 9px !important; height: 9px !important; }
.acct-bar .acct-txt { color: #c9c9d6 !important; font-size: 13.5px !important; }
.acct-bar .acct-hint { color: #8d8d9a !important; }
.acct-bal {
  margin-left: auto !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
.acct-bal em { color: #f0f0f5 !important; font-size: 13.5px !important; }
.acct-bal .ab-refresh { border-radius: 7px !important; }

/* 主内容区：更宽松的呼吸感 */
main { padding: 24px 30px 56px !important; }
.card { border-radius: 16px !important; padding: 26px 28px !important; }
.card h2 { font-size: 18px !important; }

/* 导航分组：创作功能 / 管理工具 */
nav.tabs { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
nav.tabs .tab-group { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; }
nav.tabs .tab-group.tab-tools { padding-top: 12px !important; border-top: 1px solid rgba(84,169,255,.16) !important; }
nav.tabs .tab-tools-label {
  display: flex !important; align-items: center !important; gap: 10px !important;
  width: 100% !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important;
  color: #9a9aa7 !important; text-transform: uppercase !important; margin-bottom: 2px !important;
}
nav.tabs .tab-tools-label::before,
nav.tabs .tab-tools-label::after { content: "" !important; flex: 0 0 36px !important; height: 1px !important; background: rgba(84,169,255,.22) !important; border-radius: 1px !important; }

/* ============ UI 4.1 简约：去掉过重装饰，回归干净现代 ============ */

/* 顶栏：更轻、更紧凑 */
.topbar {
  padding: 12px 30px !important;
  background: rgba(13,17,30,.62) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  backdrop-filter: blur(10px) !important;
}
.brand { gap: 12px !important; }
.brand .logo {
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  background: linear-gradient(135deg,#7c5cfc,#8f6bff) !important;
  box-shadow: 0 4px 12px rgba(84,169,255,.3) !important;
  animation: none !important;
  font-size: 18px !important; font-weight: 700 !important;
}
.brand h1 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; color:#f1f1f6 !important; }
.brand p { font-size: 11.5px !important; color:#7f7f8b !important; margin-top:2px !important; letter-spacing:.2px !important; }

/* 账户条：简化成轻分隔行 */
.acct-bar {
  margin: 14px 30px 6px !important;
  display: flex !important; align-items:center !important; gap:8px !important;
  padding: 8px 4px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.acct-bal {
  margin-left: auto !important;
  background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
}

/* 导航：轻量 pill 横向排列，扁平 */
nav.tabs {
  margin: 0 30px !important;
  padding: 14px 0 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
nav.tabs .tab-group { gap: 6px !important; }
nav.tabs .tab-tools-label { margin-bottom: 4px !important; }
nav.tabs .tab-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 7px 12px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #9a9aa6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background .18s, color .18s !important;
}
nav.tabs .tab-btn .tb-ico { width: 17px !important; height: 17px !important; color: inherit !important; }
nav.tabs .tab-btn:hover { background: rgba(255,255,255,.05) !important; color:#fff !important; transform:none !important; box-shadow:none !important; }
nav.tabs .tab-btn.active { background: rgba(84,169,255,.16) !important; border-color: rgba(84,169,255,.3) !important; color:#fff !important; box-shadow:none !important; }
nav.tabs .tab-btn.active .tb-ico { color:#cdb7ff !important; }
nav.tabs .tab-btn.active::after { display:none !important; }


/* ==================== 我的素材库（人物库 / 音色库 / 情感参考库） ==================== */
.lib-add-row { margin-bottom: 18px; }
.lib-dropzone { min-height: 96px; }
.lib-tabs { display: flex; gap: 10px; margin: 6px 0 10px; }
.lib-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13.5px; transition: filter .15s; }
.lib-tab:hover { filter: brightness(1.08); }
.lib-tab.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; }
.lib-sub-hint { margin: 0 0 12px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.lib-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg2); display: flex; flex-direction: column; }
.lib-thumb { aspect-ratio: 1 / 1; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.lib-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-thumb-audio { aspect-ratio: auto; min-height: 56px; padding: 8px 10px; }
.lib-thumb-audio audio { width: 100%; }
.lib-thumb-file svg { width: 40px; height: 40px; color: var(--muted); }
.lib-meta { padding: 10px 12px 4px; min-width: 0; }
.lib-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lib-actions { padding: 4px 10px 12px; display: flex; gap: 8px; }
.lib-actions .btn { flex: 1; }
.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.ghost:hover { background: rgba(255, 255, 255, .05); }
.lib-result-extra { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lib-modal-overlay { position: fixed; inset: 0; background: rgba(5, 10, 22, .68); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lib-modal { width: min(440px, 100%); background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.lib-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.lib-modal-list { display: flex; flex-direction: column; gap: 10px; }
.lib-modal-option { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; transition: border-color .15s, transform .15s; }
.lib-modal-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.lib-modal-option .ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.lib-modal-cancel { margin-top: 14px; width: 100%; padding: 11px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-weight: 600; }
.lib-modal-cancel:hover { color: var(--text); }

.lib-thumb-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-info { padding: 10px 12px 4px; min-width: 0; }
.lib-storage { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* 成片素材：分组管理 */
.footage-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.footage-group-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .15s, border-color .15s, transform .15s; }
.footage-group-chip:hover { filter: brightness(1.08); }
.footage-group-chip.active { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 0 14px rgba(84,169,255,.35); }
.footage-group-chip .fg-name { line-height: 1.3; }
.footage-group-chip .fg-count { min-width: 18px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 11.5px; font-weight: 700; }
.footage-group-chip.active .fg-count { background: rgba(255,255,255,.28); }
.footage-group-chip .fg-rename { border: none; background: rgba(255,255,255,.08); color: inherit; padding: 2px 8px; border-radius: 8px; font-size: 11.5px; cursor: pointer; font-weight: 700; }
.footage-group-chip .fg-rename:hover { background: rgba(255,255,255,.2); }
.footage-group-chip .fg-close { border: none; background: transparent; color: inherit; padding: 0 2px; cursor: pointer; font-size: 13px; opacity: .75; line-height: 1; }
.footage-group-chip .fg-close:hover { opacity: 1; }
.footage-move-select { flex: 1; min-width: 0; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; cursor: pointer; }

/* 一键成片：逐行批量出片结果 */
.op-batch-step { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.03); }
.op-batch-step:first-child { margin-top: 10px; }
.op-batch-step-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #9fd4ff; margin-bottom: 8px; }
.op-step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 800; font-size: 12px; }
.op-batch-result { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.op-batch-summary { font-size: 13px; font-weight: 700; color: var(--text); padding: 8px 10px; border-radius: 8px; background: rgba(84,169,255,.12); }
.op-batch-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; }
.ob-index { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 800; font-size: 12px; }
.ob-topic { flex: 1; min-width: 140px; color: var(--text); word-break: break-word; }
.ob-status { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.ob-status.ok { color: #5be3a5; font-weight: 700; }
.ob-status.bad { color: #ff7a7a; font-weight: 700; }
.ob-status.muted { color: var(--muted); }
.ob-link { flex: 0 0 auto; color: var(--accent); text-decoration: none; font-size: 12px; font-weight: 600; }
.ob-link:hover { text-decoration: underline; }


/* 秒数输入框修复：槽位编号与输入控件使用独立样式，避免被 badge 规则压缩 */
.batch-slot-index { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; background:linear-gradient(135deg,#54A9FF,#40B4F3); border-radius:8px; font-size:13px; font-weight:800; color:#fff; box-shadow:0 0 12px rgba(139,92,246,.45); flex:0 0 auto; }
.batch-slot input.slot-seconds-input { display:block !important; width:120px !important; min-width:120px !important; max-width:100% !important; height:42px !important; box-sizing:border-box !important; flex:0 0 120px !important; padding:8px 12px !important; border-radius:10px !important; border:1px solid rgba(249,249,249,.18) !important; background:rgba(11,16,32,.72) !important; color:#fff !important; font-size:16px !important; line-height:1.2 !important; text-align:left !important; }
.batch-slot input.slot-seconds-input:focus { border-color:#54A9FF !important; box-shadow:0 0 0 3px rgba(84,169,255,.18) !important; outline:none; }

/* ===== 一键成片 ===== */
.op-materials { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 236px; overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.op-materials::-webkit-scrollbar { width: 8px; }
.op-materials::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.op-materials .file-chip { margin-top: 0; padding: 8px 10px; }
.op-materials .file-chip img { width: 42px; height: 42px; }
.op-materials .file-chip video { width: 72px; height: 44px; max-height: 44px; border-radius: 6px; flex: 0 0 auto; }
.op-result-item { margin-top: 10px; }
.op-result-item:first-child { margin-top: 0; }
.adv-group { margin: 10px 0; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.03); overflow: hidden; }
.adv-group summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #9fd4ff; list-style: none; user-select: none; display: flex; align-items: center; gap: 8px; }
.adv-group summary::before { content: "▸"; color: #54a9ff; font-size: 12px; transition: transform .18s ease; }
.adv-group[open] summary::before { transform: rotate(90deg); }
.adv-group summary:hover { background: rgba(84,169,255,.08); }
.adv-group .adv-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.adv-group input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.05); cursor: pointer; }