/* ===== 蝉脉AI创作 - 蝉脉橙主题（LOGO #F95901）+ 彩色图标 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
--primary: #f95901;
--primary-light: #ff7a2e;
--grad: linear-gradient(135deg, #ff8845 0%, #f94400 100%);
--bg1: #ffefe3;
--bg2: #fffbf7;
--card: #ffffff;
--text: #3a2a1e;
--text2: #a08c7c;
--chip-bg: #fff1e7;
--danger: #ef4444;
--radius: 20px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 360px);
min-height: 100vh;
color: var(--text);
font-size: 15px;
padding-bottom: 76px; /* 给底部 TabBar 留位 */
}
/* ===== 顶部标题栏 ===== */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 251, 247, 0.92);
backdrop-filter: blur(10px);
padding: 14px 16px 8px;
}
.topbar-inner {
max-width: 720px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
}
.topbar-title { font-size: 18px; font-weight: 800; letter-spacing: 0.5px; }
/* PC 顶部导航（默认隐藏，≥1024px 显示） */
.topnav { display: none; gap: 4px; }
.topnav .tab-item.nav {
flex-direction: row; gap: 5px;
font-size: 14px; font-weight: 700; color: var(--text2);
padding: 8px 16px; border-radius: 999px;
transition: all 0.15s;
}
.topnav .tab-item.nav:hover { background: var(--chip-bg); color: var(--primary); }
.topnav .tab-item.nav.active {
background: var(--grad); color: #fff;
box-shadow: 0 4px 12px rgba(249, 89, 1, 0.30);
}
.quota-chip {
border: none; cursor: pointer;
background: var(--grad); color: #fff;
font-size: 12.5px; font-weight: 600;
padding: 6px 12px; border-radius: 999px;
min-width: 40px; text-align: center;
}
.quota-chip.empty { background: #efe0d4; color: var(--text2); }
/* 顶栏右侧刷新按钮 */
.reload-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(249, 89, 1, 0.22);
background: rgba(249, 89, 1, 0.06);
color: var(--primary, #f95901);
font-size: 18px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0;
margin-left: 8px;
transition: transform 0.25s ease, background 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.reload-btn:hover { background: rgba(249, 89, 1, 0.14); }
.reload-btn:active { transform: scale(0.92); }
.reload-btn.spin { animation: reloadSpin 0.7s linear infinite; pointer-events: none; }
@keyframes reloadSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== 视图切换 ===== */
.view { display: none; }
.view.active { display: block; }
.subpanel { display: none; }
.subpanel.active { display: block; }
/* ===== Hero Banner ===== */
.hero {
position: relative; overflow: hidden;
border-radius: 22px; padding: 30px 20px 26px;
color: #fff; text-align: center; margin-bottom: 20px;
box-shadow: 0 10px 26px rgba(249, 89, 1, 0.28);
}
.hero-home { background: linear-gradient(135deg, #ffb066 0%, #ff7a2e 45%, #f94400 100%); }
.hero-agent { background: linear-gradient(135deg, #d1352b 0%, #a01818 55%, #6f0f0f 100%); }
/* 子页 Hero（文案/图片/视频），比首页略紧凑 */
.hero-page { padding: 22px 18px 20px; margin-bottom: 16px; }
.hero-page .hero-title { font-size: 22px; }
.hero-page .hero-sub { margin-top: 8px; font-size: 12.5px; }
.hero-copy { background: linear-gradient(135deg, #6fb1ff 0%, #3b7bff 50%, #2450e0 100%); box-shadow: 0 10px 26px rgba(59, 123, 255, 0.28); }
.hero-image { background: linear-gradient(135deg, #c08cff 0%, #8b5cf6 50%, #6a35d8 100%); box-shadow: 0 10px 26px rgba(139, 92, 246, 0.28); }
.hero-video { background: linear-gradient(135deg, #ff7d9c 0%, #f9445e 50%, #d31f4f 100%); box-shadow: 0 10px 26px rgba(249, 68, 94, 0.28); }
.hero-title { font-size: 30px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0,0,0,0.14); }
.hero-slogan {
display: inline-block; margin-top: 12px;
background: rgba(255,255,255,0.94); color: var(--primary);
font-size: 15px; font-weight: 800; padding: 7px 20px; border-radius: 999px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.hero-slogan.red { color: #c22222; }
.hero-sub { margin-top: 12px; font-size: 13px; opacity: 0.92; letter-spacing: 0.5px; }
.hero-deco { position: absolute; font-size: 26px; opacity: 0.5; filter: blur(0.3px); }
.deco-1 { top: 14px; left: 18px; }
.deco-2 { top: 12px; right: 20px; font-size: 20px; opacity: 0.4; }
.deco-3 { bottom: 14px; left: 24px; font-size: 20px; opacity: 0.35; }
/* ===== 区块标题 ===== */
.section-head {
display: flex; align-items: center; gap: 7px;
font-size: 17px; font-weight: 800; margin: 4px 0 14px;
}
.section-head .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--grad); }
/* ===== 一键爆款组合卡 ===== */
.combo-card {
display: flex; align-items: center; gap: 14px;
background: var(--grad); color: #fff;
border-radius: 18px; padding: 18px 16px;
cursor: pointer; margin-bottom: 18px;
box-shadow: 0 8px 20px rgba(249, 89, 1, 0.30);
transition: transform 0.12s;
}
.combo-card:active { transform: scale(0.98); }
.combo-ico { font-size: 32px; flex: 0 0 auto; }
.combo-main { flex: 1; min-width: 0; }
.combo-name { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; }
.combo-sub { font-size: 12.5px; opacity: 0.92; margin-top: 4px; line-height: 1.5; }
.combo-arrow { font-size: 26px; opacity: 0.85; flex: 0 0 auto; font-weight: 700; }
/* ===== 功能宫格 ===== */
.func-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.func-grid.two { grid-template-columns: repeat(2, 1fr); }
.func-grid.three { grid-template-columns: repeat(3, 1fr); }
.func-card {
background: var(--card); border-radius: 18px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 18px 10px; cursor: pointer;
transition: transform 0.12s, box-shadow 0.12s;
box-shadow: 0 3px 12px rgba(249, 89, 1, 0.07);
}
.func-card:active { transform: scale(0.96); }
.func-card.row { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 14px; }
.func-ico {
width: 54px; height: 54px; border-radius: 17px;
display: flex; align-items: center; justify-content: center;
font-size: 26px; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.func-card.row .func-ico { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; flex: 0 0 auto; }
.func-name { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.func-card.row .func-name { margin-top: 0; font-size: 15px; }
/* ===== 彩色渐变图标 ===== */
.f-orange { background: linear-gradient(135deg, #ffad64, #f95901); }
.f-red { background: linear-gradient(135deg, #ff8a7a, #ef4444); }
.f-green { background: linear-gradient(135deg, #8fe3b0, #22c55e); }
.f-pink { background: linear-gradient(135deg, #ffa7c0, #ec4899); }
.f-blue { background: linear-gradient(135deg, #7cb8ff, #3b82f6); }
.f-cyan { background: linear-gradient(135deg, #7fdcf0, #06b6d4); }
.f-purple { background: linear-gradient(135deg, #b69cff, #8b5cf6); }
.f-yellow { background: linear-gradient(135deg, #ffe08a, #f59e0b); }
.f-brown { background: linear-gradient(135deg, #d9a066, #a16207); }
/* ===== 我的页：会员卡 ===== */
.vip-card {
background: linear-gradient(135deg, #ffb36b 0%, #f95901 50%, #e04e00 100%);
border-radius: 22px; padding: 26px 20px 22px; text-align: center; color: #fff;
margin-bottom: 20px; box-shadow: 0 10px 26px rgba(249, 89, 1, 0.28);
position: relative; overflow: hidden;
}
.vip-card::after {
content: ''; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px;
background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.vip-avatar {
width: 86px; height: 86px; border-radius: 50%;
background: #fff; border: 3px solid rgba(255,255,255,0.85);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.vip-avatar img { width: 70%; height: 70%; object-fit: contain; }
.vip-name { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.vip-wechat { font-size: 12.5px; opacity: 0.9; margin-top: 6px; }
.vip-hint { font-size: 12.5px; opacity: 0.92; margin-top: 16px; color: #fff; }
.vip-badge {
display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
background: linear-gradient(135deg, #ffe08a 0%, #ffc459 100%); color: #7a4b00;
font-size: 13px; font-weight: 800; padding: 7px 16px; border-radius: 999px;
box-shadow: 0 3px 10px rgba(0,0,0,0.16);
}
.mine-footer { text-align: center; margin-top: 26px; }
.mine-footer .brand { font-size: 15px; font-weight: 800; color: var(--text2); }
.mine-footer .links { margin-top: 8px; font-size: 12px; color: var(--text2); }
/* ===== 功能子页顶部 ===== */
.sub-topbar {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px; padding: 4px 2px;
}
.sub-back {
width: 32px; height: 32px; border-radius: 10px;
background: var(--chip-bg); color: var(--primary);
font-size: 22px; line-height: 30px; text-align: center; font-weight: 700;
cursor: pointer; flex: 0 0 auto;
}
.sub-title { font-size: 18px; font-weight: 800; }
/* ===== 布局 ===== */
.main { max-width: 720px; margin: 0 auto; padding: 0 16px 30px; }
/* ===== 卡片 ===== */
.card {
background: var(--card); border-radius: var(--radius);
padding: 18px 16px; margin-bottom: 14px;
box-shadow: 0 2px 10px rgba(249, 89, 1, 0.08);
}
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.subpanel.active .results { margin-top: 14px; }
.badge-req {
font-size: 11px; color: #dc2626; background: #fee2e2;
padding: 2px 7px; border-radius: 6px; font-weight: 600;
}
/* ===== 描述输入区 ===== */
.prompt-area {
width: 100%; border: none; outline: none; resize: vertical;
background: #fff5ee; border-radius: 14px;
padding: 13px 14px; font-size: 15px; color: var(--text);
font-family: inherit; line-height: 1.6; min-height: 96px;
}
.prompt-area::placeholder { color: #c9a899; }
.prompt-area:focus { box-shadow: 0 0 0 2px rgba(255, 122, 46, 0.25); }
.prompt-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tool-btn {
border: none; cursor: pointer; font-family: inherit;
background: var(--chip-bg); color: var(--text);
font-size: 13px; font-weight: 600;
padding: 7px 13px; border-radius: 999px;
}
.tool-btn:active { opacity: 0.7; }
.tool-btn.ai { background: var(--grad); color: #fff; box-shadow: 0 3px 8px rgba(249, 89, 1, 0.26); }
.tool-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.char-count { margin-left: auto; font-size: 12px; color: #c9a899; }
/* ===== 快速选择 ===== */
.cat-tabs { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
border: none; cursor: pointer; font-family: inherit;
background: var(--chip-bg); color: var(--text);
font-size: 13.5px; font-weight: 500;
padding: 8px 16px; border-radius: 999px;
transition: all 0.15s;
}
.chip.active { background: var(--grad); color: #fff; box-shadow: 0 3px 8px rgba(249, 89, 1, 0.26); }
.chip.on { background: var(--grad); color: #fff; box-shadow: 0 3px 8px rgba(249, 89, 1, 0.26); }
.style-select .chip.active::after { content: ' ✓'; }
.tag-muted { font-size: 12px; color: #9aa3b2; font-weight: 400; margin-left: 6px; }
.cat-tabs .chip { padding: 7px 15px; position: relative; }
/* 类别 tab 上的「已选」小圆点：切到别的类别后本类 chip 不可见，靠它提示这一类已选过 */
.cat-tabs .chip.has::after {
content: ''; position: absolute; top: 4px; right: 6px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary); box-shadow: 0 0 0 2px #fff;
}
.cat-tabs .chip.active.has::after { background: #fff; box-shadow: none; }
.cat-tabs .chip:not(.active) { background: transparent; border: 1px solid #f5d9c8; }
/* ===== 尺寸选择 ===== */
.size-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
/* 文生图MAX 的尺寸已加到 5 个（+16:9 / 9:16）。原来靠 flex 横滚，后两个会滑出屏幕、
而手机不显示滚动条 → 用户根本不知道还有尺寸可选。改 3 列网格：全部可见、两行排齐。
图生图MAX（#i2iSizes）只有 3 个，保持原样不动。 */
#t2iSizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; padding-bottom: 0; }
#t2iSizes .size-opt { min-width: 0; padding: 12px 6px; }
.size-opt {
flex: 0 0 auto; min-width: 118px; cursor: pointer; font-family: inherit;
border: 1.5px solid #f3dccb; background: #fffcf8;
border-radius: 14px; padding: 12px 14px;
display: flex; flex-direction: column; align-items: center; gap: 3px;
transition: all 0.15s;
}
.size-opt .size-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.size-opt .size-sub { font-size: 12px; color: var(--text2); }
.size-opt.active { background: var(--grad); border-color: transparent; box-shadow: 0 4px 12px rgba(249, 89, 1, 0.30); }
.size-opt.active .size-name, .size-opt.active .size-sub { color: #fff; }
/* ===== 上传区 ===== */
.upload-dash {
border: 2px dashed #f0c6ac; border-radius: 16px;
background: #fffcf8; cursor: pointer;
padding: 28px 16px; text-align: center;
}
.upload-dash:active { background: #ffe9da; }
.upload-icon { font-size: 34px; margin-bottom: 8px; }
.upload-main { font-size: 15.5px; font-weight: 700; color: var(--text); }
.upload-sub { font-size: 12.5px; color: var(--text2); margin-top: 5px; }
.thumb-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumb {
position: relative; width: 72px; height: 72px;
border-radius: 12px; overflow: hidden;
border: 1.5px solid #f3dccb;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-del {
position: absolute; top: 2px; right: 2px;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(0,0,0,0.55); color: #fff;
font-size: 13px; line-height: 20px; text-align: center; cursor: pointer;
}
/* ===== 生成按钮区 ===== */
.gen-card {
background: var(--card); border-radius: var(--radius);
padding: 20px 16px; margin-bottom: 14px; text-align: center;
box-shadow: 0 2px 10px rgba(249, 89, 1, 0.08);
}
.gen-btn {
width: 100%; border: none; cursor: pointer; font-family: inherit;
background: var(--grad); color: #fff;
font-size: 17px; font-weight: 700; letter-spacing: 2px;
padding: 15px; border-radius: 999px;
box-shadow: 0 6px 18px rgba(249, 89, 1, 0.35);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gen-btn:active { transform: scale(0.98); }
.gen-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.gen-hint { font-size: 13px; color: var(--text2); margin-top: 12px; }
.gen-hint.dim { color: #c9a793; margin-top: 6px; }
.spinner {
display: inline-block; width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== 免责声明 ===== */
.disclaimer {
background: #fdf6dd; border-radius: 12px;
padding: 12px 14px; font-size: 12px; line-height: 1.7;
color: #9c8a3d; margin-top: 14px;
}
/* ===== 结果区 ===== */
.results { padding: 16px; }
.result-item { border-bottom: 1px solid #f6ece3; padding: 12px 0; }
.result-item:first-child { padding-top: 0; }
.result-item:last-child { border-bottom: none; padding-bottom: 0; }
.result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.result-tag {
font-size: 12px; font-weight: 700; color: var(--primary);
background: var(--chip-bg); padding: 3px 10px; border-radius: 8px;
}
.result-text { font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.btn-copy {
border: none; cursor: pointer; font-family: inherit;
background: var(--chip-bg); color: var(--primary);
font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.preview-img { width: 100%; border-radius: 14px; display: block; cursor: zoom-in; }
.img-actions { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
/* ===== 小红书爆款文案 · 三段式 ===== */
.xhs-item { margin-bottom: 6px; }
.xhs-label {
font-size: 12.5px; font-weight: 700; color: #6a5bd8;
margin: 10px 0 6px;
}
.xhs-title-box {
position: relative; background: #f6f2ff; border: 1px solid #e3dcfa;
border-radius: 12px; padding: 12px 40px 12px 13px;
font-size: 14.5px; line-height: 1.6; font-weight: 600;
color: #4a3a8f; word-break: break-word;
}
.xhs-title-copy {
position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
border: none; cursor: pointer; background: transparent;
font-size: 16px; line-height: 1; padding: 4px;
}
.xhs-body { margin-top: 2px; }
.xhs-body .xhs-para { margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; }
.xhs-body .xhs-para:last-child { margin-bottom: 0; }
.xhs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.xhs-tag {
border: none; cursor: pointer; font-family: inherit;
background: #8b7ae8; color: #fff;
font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
box-shadow: 0 2px 6px rgba(122, 105, 220, 0.22);
transition: transform 0.12s, background 0.12s;
}
.xhs-tag:hover { background: #7a69dc; transform: translateY(-1px); }
.xhs-gen-img { margin-top: 12px; }
/* ===== 爆款标题 · 结果 ===== */
.title-item { margin-bottom: 6px; }
.title-item .title-box {
background: #f6f2ff; border: 1px solid #e3dcfa; border-radius: 12px;
padding: 12px 14px; font-size: 15px; line-height: 1.6; font-weight: 600;
color: #4a3a8f; word-break: break-word;
}
.title-note {
margin-top: 8px; font-size: 12.5px; line-height: 1.5;
color: #8a8aa0;
}
.title-note::before { content: '💡 '; }
/* ===== 爆款标题 · 复制全部汇总栏 ===== */
.title-summary {
display: flex; align-items: center; justify-content: space-between;
background: #f6f2ff; border: 1px solid #e3dcfa; border-radius: 12px;
padding: 10px 14px; margin-bottom: 12px;
}
.title-summary-text {
font-size: 14px; font-weight: 700; color: #4a3a8f;
}
.title-summary .copy-all {
background: var(--primary); color: #fff; border: none; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700;
padding: 7px 16px; border-radius: 999px;
box-shadow: 0 2px 8px rgba(249, 89, 1, 0.25);
}
.title-summary .copy-all:active { transform: scale(.96); }
/* ===== 爆款标题 · 生成中特效 ===== */
.gen-pulse .big-spinner {
border-color: #e3dcfa; border-top-color: #7c6cf0;
}
.gen-pulse { color: #7c6cf0; animation: genFade 1.6s ease-in-out infinite; }
@keyframes genFade { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.placeholder { color: #c9a899; text-align: center; padding: 20px 0; font-size: 14px; }
.loading-anim { text-align: center; padding: 26px 0; color: var(--text2); font-size: 14px; }
.loading-anim .big-spinner {
display: block; margin: 0 auto 12px; width: 30px; height: 30px;
border: 3px solid #f6dfd2; border-top-color: var(--primary);
border-radius: 50%; animation: spin 0.9s linear infinite;
}
/* ===== 错误提示 ===== */
.error-tip {
background: #fef2f2; color: #dc2626;
border-radius: 12px; padding: 11px 14px;
font-size: 13.5px; margin-bottom: 14px;
}
/* ===== 历史统计 ===== */
.stats-card {
background: var(--card); border-radius: var(--radius);
display: flex; padding: 16px 0; margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(249, 89, 1, 0.08);
}
.stat { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.stat + .stat { border-left: 1px solid #f6ece3; }
.stat-num { font-size: 22px; font-weight: 800; color: var(--primary); }
#statRunning { color: #f59e0b; }
.stat-label { font-size: 12.5px; color: var(--text2); }
.tip-bar {
background: #ffe9da; color: var(--primary);
font-size: 13px; font-weight: 500;
border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
}
/* ===== 历史网格 ===== */
.history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 560px) { .history-grid { grid-template-columns: 1fr 1fr 1fr; } }
.h-card {
background: var(--card); border-radius: 16px; overflow: hidden; cursor: pointer;
box-shadow: 0 2px 10px rgba(249, 89, 1, 0.08);
display: flex; flex-direction: column;
}
.h-thumb-wrap { position: relative; aspect-ratio: 1; background: #fff1e7; }
.h-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-thumb-text {
width: 100%; height: 100%; display: flex; align-items: center;
padding: 12px; font-size: 12.5px; line-height: 1.6; color: var(--text2);
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.h-status {
position: absolute; top: 8px; left: 8px;
font-size: 11px; font-weight: 600; color: #059669;
background: rgba(255,255,255,0.92); padding: 3px 9px; border-radius: 8px;
}
.h-status.running { color: #d97706; }
.h-type {
position: absolute; top: 8px; right: 8px;
font-size: 11px; font-weight: 600; color: #fff;
background: var(--primary-light); padding: 3px 8px; border-radius: 8px;
}
.h-prompt {
font-size: 13px; line-height: 1.5; padding: 10px 12px 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 47px;
}
.h-time { font-size: 11.5px; color: #c9a793; padding: 4px 12px 12px; }
.empty-state { text-align: center; padding: 60px 0; color: var(--text2); }
.empty-icon { font-size: 46px; margin-bottom: 10px; }
/* ===== 弹窗 ===== */
.modal-mask {
position: fixed; inset: 0; z-index: 100;
background: rgba(45, 23, 8, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 20px; backdrop-filter: blur(3px);
}
.modal-card {
background: #fff; border-radius: 22px;
width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto;
padding: 22px 18px;
}
.modal-card.preview { max-width: 560px; }
.modal-title { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 12px; }
.modal-hint { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 14px; }
.text-input {
width: 100%; border: 1.5px solid #f5d9c8; outline: none;
border-radius: 12px; padding: 13px 14px; font-size: 16px;
font-family: inherit; margin-bottom: 14px; letter-spacing: 2px;
text-align: center; text-transform: uppercase; color: var(--text);
}
.text-input:focus { border-color: var(--primary-light); }
.modal-close {
width: 100%; border: none; cursor: pointer; font-family: inherit;
background: var(--chip-bg); color: var(--text2);
font-size: 14px; font-weight: 600; padding: 12px; border-radius: 999px;
margin-top: 10px;
}
.error-tip + .modal-close, .modal-card .error-tip { margin-top: 0; margin-bottom: 4px; }
/* ===== 底部 TabBar ===== */
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; justify-content: space-around; align-items: center;
background: rgba(255, 252, 248, 0.96);
backdrop-filter: blur(12px);
border-top: 1px solid #ffe4d3;
padding: 8px 0 calc(6px + env(safe-area-inset-bottom));
}
.tab-item {
border: none; background: transparent; cursor: pointer; font-family: inherit;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 4px 8px; border-radius: 14px; flex: 0 0 auto;
}
.tab-ico {
width: 40px; height: 40px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.tab-label { font-size: 12px; font-weight: 700; color: var(--text2); }
.tab-item.active .tab-label { color: var(--primary); }
.tab-item.active { box-shadow: 0 4px 14px rgba(249, 89, 1, 0.18); }
/* ===== 底栏 ===== */
.footer { text-align: center; font-size: 12px; color: #c9a793; padding: 12px 0 26px; }
/* ===== 全部功能矩阵（招商展示页） ===== */
.af-hero {
background: var(--grad);
border-radius: var(--radius);
padding: 22px 18px;
color: #fff;
margin-bottom: 14px;
box-shadow: 0 6px 18px rgba(249, 89, 1, 0.25);
}
.af-hero-title { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.af-hero-sub { font-size: 13px; opacity: 0.92; margin-top: 6px; }
.af-hero-stats {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin-top: 14px; font-size: 12.5px;
}
.af-hero-stats b { font-size: 16px; font-weight: 800; margin-right: 2px; }
.af-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.6); }
.af-group-head {
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 800; color: var(--text);
margin: 18px 2px 10px;
}
.af-group-head .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.af-list { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(249, 89, 1, 0.06); }
.af-item {
display: flex; align-items: center; gap: 12px;
padding: 13px 14px; cursor: pointer;
border-bottom: 1px solid #f6ece3;
transition: background 0.15s;
}
.af-item:last-child { border-bottom: none; }
.af-item:active { background: #fff1e7; }
.af-ico {
width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.af-main { flex: 1; min-width: 0; }
.af-name { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-desc { font-size: 12px; color: var(--text2); margin-top: 3px; }
.af-badge {
font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
background: #f0f0f0; color: #999; flex: 0 0 auto;
}
.af-badge.on { background: #e7f7ef; color: #059669; }
.af-go { color: #d9c2b2; font-size: 18px; flex: 0 0 auto; }
.af-footer {
text-align: center; font-size: 12.5px; color: var(--text2);
margin: 18px 0 6px; line-height: 1.8;
}
/* ===== 三端自适应 =====
手机 <768px（默认） / 平板 768-1023px / PC ≥1024px */
/* ---------- 平板端 ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
.topbar-inner, .main { max-width: 860px; }
.main { padding: 0 24px 30px; }
.func-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.func-grid.two { grid-template-columns: repeat(3, 1fr); }
.history-grid { grid-template-columns: repeat(4, 1fr); }
.quick-row { gap: 18px; }
.hero { padding: 40px 28px 34px; }
.hero-title { font-size: 36px; }
}
/* ---------- PC 端 ---------- */
@media (min-width: 1024px) {
body { padding-bottom: 20px; } /* 无底部 TabBar */
.tabbar { display: none; } /* 底部 TabBar 让位给顶部导航 */
.topnav { display: flex; } /* 显示 PC 顶部导航 */
.topbar-inner, .main { max-width: 1100px; }
.main { padding: 0 28px 40px; }
.topbar { padding: 12px 16px 10px; }
.topbar-inner { gap: 16px; }
/* 宫格铺 5 列，一屏看全功能 */
.func-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.func-grid.two { grid-template-columns: repeat(3, 1fr); }
.func-grid.three { grid-template-columns: repeat(5, 1fr); }
.history-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hero { padding: 48px 32px 42px; }
.hero-title { font-size: 40px; }
.quick-row { gap: 22px; }
/* 鼠标悬停反馈 */
.func-card:hover, .quick-item .quick-ico:hover { transform: translateY(-3px); }
.func-card:hover { box-shadow: 0 10px 24px rgba(249, 89, 1, 0.16); }
.func-card { transition: transform 0.15s, box-shadow 0.15s; }
.combo-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(249, 89, 1, 0.36); }
.af-item:hover { background: #fff1e7; }
.chip:hover:not(.active) { background: #ffe4d3; }
/* 生成子页左右分栏：表单左、结果右 */
.subpanel#sub-copy.active,
.subpanel#sub-t2i.active,
.subpanel#sub-i2i.active {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px; align-items: start;
}
.subpanel#sub-copy.active .sub-topbar,
.subpanel#sub-t2i.active .sub-topbar,
.subpanel#sub-i2i.active .sub-topbar,
.subpanel#sub-copy.active .gen-card,
.subpanel#sub-t2i.active .gen-card,
.subpanel#sub-i2i.active .gen-card,
.subpanel#sub-copy.active .disclaimer,
.subpanel#sub-t2i.active .disclaimer,
.subpanel#sub-i2i.active .disclaimer,
.subpanel#sub-copy.active .error-tip,
.subpanel#sub-t2i.active .error-tip,
.subpanel#sub-i2i.active .error-tip { grid-column: 1 / -1; }
.subpanel#sub-copy.active .results,
.subpanel#sub-t2i.active .results,
.subpanel#sub-i2i.active .results { grid-column: 2; }
/* 全部功能矩阵：双列排布 */
.af-list { display: grid; grid-template-columns: 1fr 1fr; }
.af-item:nth-last-child(-n+2) { border-bottom: none; }
.af-hero { padding: 30px 26px; }
}
/* ===== 激活成功特效 ===== */
.actfx { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(30, 14, 4, 0.88); backdrop-filter: blur(6px); animation: actfxIn .35s ease both; overflow: hidden; }
@keyframes actfxIn { from { opacity: 0; } to { opacity: 1; } }
.actfx.out { animation: actfxOut .3s ease both; }
@keyframes actfxOut { from { opacity: 1; } to { opacity: 0; } }
/* 旋转放射光柱 */
.actfx-rays { position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 196, 89, 0.16) 12deg, transparent 24deg, transparent 36deg, rgba(255, 196, 89, 0.10) 48deg, transparent 60deg, transparent 72deg, rgba(255, 196, 89, 0.16) 84deg, transparent 96deg, transparent 120deg, rgba(255, 196, 89, 0.10) 132deg, transparent 144deg, transparent 180deg, rgba(255, 196, 89, 0.16) 192deg, transparent 204deg, transparent 240deg, rgba(255, 196, 89, 0.10) 252deg, transparent 264deg, transparent 300deg, rgba(255, 196, 89, 0.16) 312deg, transparent 324deg, transparent 352deg); animation: raysSpin 14s linear infinite; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.actfx-card { position: relative; z-index: 2; width: min(86vw, 360px); text-align: center; padding: 34px 26px 26px; border-radius: 24px; background: linear-gradient(160deg, #fffdf6 0%, #fff4e0 100%); border: 2px solid rgba(249, 89, 1, 0.25); box-shadow: 0 0 0 6px rgba(255, 196, 89, 0.15), 0 24px 60px rgba(0, 0, 0, 0.5); animation: cardPop .55s cubic-bezier(.18, .89, .32, 1.28) .12s both; }
@keyframes cardPop { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.actfx-badge { font-size: 58px; line-height: 1; margin-bottom: 8px; animation: badgeBounce 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(249, 89, 1, 0.35)); }
@keyframes badgeBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.06); } }
.actfx-congrats { font-size: 15px; letter-spacing: 4px; color: #a0622a; font-weight: 700; margin-bottom: 8px; animation: fadeUp .5s ease .35s both; }
.actfx-plan { font-size: 34px; font-weight: 900; line-height: 1.2; background: linear-gradient(120deg, #ff9a3d 0%, #f95901 45%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: planShine 2.2s ease-in-out .45s both, fadeUp .5s ease .45s both; }
@keyframes planShine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.actfx-sub { font-size: 13px; color: #a08c7c; margin-top: 4px; letter-spacing: 2px; animation: fadeUp .5s ease .6s both; }
.actfx-remain { margin: 18px 0 20px; font-size: 14px; color: #5c4632; background: #fff; border: 1px dashed rgba(249, 89, 1, 0.35); border-radius: 12px; padding: 10px; animation: fadeUp .5s ease .75s both; }
.actfx-remain b { color: #f95901; font-size: 20px; margin: 0 2px; }
.actfx-btn { border: none; cursor: pointer; font-family: inherit; width: 100%; padding: 13px; border-radius: 14px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff8845 0%, #f94400 100%); box-shadow: 0 8px 20px rgba(249, 89, 1, 0.4); animation: fadeUp .5s ease .9s both; }
.actfx-btn:active { transform: scale(.97); }
/* 彩带粒子 */
.actfx-confetti { position: absolute; z-index: 3; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: confettiFall linear forwards; }
@keyframes confettiFall {
0% { opacity: 1; transform: translateY(-20px) rotate(0deg); }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(105vh) rotate(720deg); }
}
/* PC 端特效卡稍大 */
@media (min-width: 1024px) {
.actfx-card { width: 400px; padding: 42px 34px 32px; }
.actfx-badge { font-size: 68px; }
.actfx-plan { font-size: 40px; }
}
/* ===== 我的页：联系方式弹窗 ===== */
.contact-card {
width: min(88vw, 340px); background: #fff; border-radius: 20px; overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.4); animation: cardPop .45s cubic-bezier(.18,.89,.32,1.2) both;
}
.contact-head {
position: relative; background: linear-gradient(135deg, #34c0a0, #2aa87b);
color: #fff; padding: 16px; text-align: center; font-size: 17px; font-weight: 800;
}
.contact-x {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.22); border: none; color: #fff; cursor: pointer;
width: 26px; height: 26px; border-radius: 50%; font-size: 14px; line-height: 1;
}
.contact-body { padding: 24px 20px 26px; text-align: center; }
.contact-qr { width: 180px; height: 180px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid #eee; }
.contact-qr img { width: 100%; height: 100%; object-fit: contain; }
.contact-qr-tip { font-size: 12.5px; color: var(--text2); margin-top: 12px; }
.contact-wechat { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--text); }
.contact-wechat .c-label { color: var(--text2); font-size: 13.5px; }
.contact-copy {
width: 100%; margin-top: 18px; padding: 13px; border-radius: 14px; border: none; cursor: pointer;
background: linear-gradient(135deg, #34c0a0, #2aa87b); color: #fff; font-size: 16px; font-weight: 800;
box-shadow: 0 6px 16px rgba(42,168,123,0.35);
}
.contact-copy:active { transform: scale(.97); }
/* ===== 功能状态页 ===== */
.status-hero {
background: radial-gradient(120% 140% at 50% 0%, #2b3a5e 0%, #1c2440 60%, #121a30 100%);
border-radius: 22px; padding: 30px 20px 26px; text-align: center; color: #fff;
margin-bottom: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.ring { position: relative; width: 150px; height: 150px; margin: 0 auto 4px; }
.ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 10; stroke-linecap: round; }
.ring-bar { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.ring-num b { font-size: 46px; font-weight: 900; line-height: 1; }
.hero-title { font-size: 17px; font-weight: 800; margin-top: 14px; }
.hero-sub { font-size: 13px; opacity: 0.85; margin-top: 6px; }
.hero-time { font-size: 12px; opacity: 0.7; margin-top: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.status-item {
background: #fff; border-radius: 18px; padding: 18px 14px 16px; text-align: center;
box-shadow: 0 3px 12px rgba(249, 89, 1, 0.06); position: relative;
}
.status-item .dot {
position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}
.status-item.na .dot { background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203,213,225,0.2); }
.s-ring { position: relative; width: 74px; height: 74px; margin: 0 auto; }
.s-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.s-ring .ring-track { stroke: #f1ece6; stroke-width: 6; }
.s-ring .ring-bar { stroke-width: 6; }
.s-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--text); }
.s-name { font-size: 13.5px; font-weight: 700; color: var(--text); margin-top: 12px; }
@media (min-width: 560px) { .status-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
.status-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.status-hero { padding: 36px 24px 30px; }
}
/* ================================================================
账号系统：登录横幅 / 会员卡登录按钮 / 请先登录弹窗 / 登录·注册全屏层
（沿用蝉脉橙主题，布局还原参考图）
================================================================ */
/* ---- 首页登录横幅 ---- */
.login-banner{
display:flex; align-items:center; gap:12px;
background: linear-gradient(135deg, #ff9a46, #f95901);
border-radius:18px; padding:14px 16px; margin-bottom:16px; color:#fff;
box-shadow:0 8px 20px rgba(249,89,1,0.28);
}
.lb-logo{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; box-shadow:0 3px 8px rgba(0,0,0,0.15); }
.lb-logo img{ width:70%; height:70%; object-fit:contain; }
.lb-main{ flex:1; min-width:0; }
.lb-text{ font-size:15px; font-weight:800; }
.lb-sub{ font-size:12px; opacity:.9; margin-top:3px; }
.lb-btn{ border:none; background:#fff; color:#f95901; font-size:13px; font-weight:800; padding:9px 16px; border-radius:999px; cursor:pointer; flex:0 0 auto; box-shadow:0 4px 12px rgba(0,0,0,0.12); font-family:inherit; }
/* ---- 会员卡「立即登录」按钮 ---- */
.vip-login-btn{ border:none; margin-top:16px; background:#fff; color:#f95901; font-size:15px; font-weight:800; padding:11px 30px; border-radius:999px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,0.2); font-family:inherit; }
.vip-login-btn:active{ transform:scale(.96); }
/* ---- 请先登录弹窗 ---- */
.pt-card{ background:#fff; border-radius:20px; width:min(82vw,320px); padding:24px 22px 22px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,0.4); animation:cardPop .4s cubic-bezier(.18,.89,.32,1.2) both; }
.pt-line{ width:44px; height:5px; border-radius:3px; background:#eee; margin:0 auto 18px; }
.pt-title{ font-size:14px; color:#8a7462; margin-bottom:10px; }
.pt-body{ font-size:19px; font-weight:800; color:#2c2018; margin-bottom:22px; }
.pt-btns{ display:flex; gap:12px; }
.pt-btn{ flex:1; border:none; border-radius:999px; padding:13px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }
.pt-btn.ghost{ background:#f0f0f0; color:#888; }
.pt-btn.solid{ background:linear-gradient(135deg,#52c97a,#22a95e); color:#fff; box-shadow:0 6px 14px rgba(34,169,94,0.3); }
/* ---- 登录 / 注册 全屏层 ---- */
.auth-screen{ position:fixed; inset:0; z-index:200; overflow-y:auto; background:linear-gradient(180deg,#fff6ef 0%,#ffe7d4 100%); }
.auth-view{ min-height:100%; }
.auth-topbar{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(255,246,239,0.9); backdrop-filter:blur(8px); z-index:2; }
.auth-back{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:28px; color:#5a4636; cursor:pointer; }
.auth-title{ font-size:17px; font-weight:700; color:#3a2a1e; }
.auth-tb-space{ width:34px; }
.auth-wrap{ max-width:520px; margin:0 auto; padding:10px 22px 50px; }
.auth-logo{ width:88px; height:88px; border-radius:24px; margin:0 auto -26px; position:relative; z-index:2; background:linear-gradient(135deg,#ff8845,#f94400); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(249,89,1,0.35); overflow:hidden; }
.auth-logo img{ width:68%; height:68%; object-fit:contain; }
.auth-logo.emoji{ font-size:46px; background:#fff; border:1px solid #f5d9c8; box-shadow:0 8px 20px rgba(0,0,0,0.1); }
.auth-card{ position:relative; z-index:1; background:#fff; border-radius:28px; padding:50px 24px 28px; box-shadow:0 20px 50px rgba(180,110,60,0.15); }
.auth-welcome{ text-align:center; font-size:24px; font-weight:900; color:#2c2018; }
.auth-welcome-sub{ text-align:center; font-size:13px; color:#a08c7c; margin-top:8px; }
.auth-tabs{ display:flex; background:#f5ece4; border-radius:12px; padding:4px; margin:22px 0 18px; }
.auth-tab{ flex:1; border:none; background:transparent; padding:11px; border-radius:9px; font-size:14.5px; font-weight:600; color:#8a7462; cursor:pointer; font-family:inherit; transition:all .15s; }
.auth-tab.active{ background:linear-gradient(135deg,#ff8845,#f94400); color:#fff; box-shadow:0 4px 12px rgba(249,89,1,0.3); }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form[style*="display:none"]{ display:none; }
.auth-field{ position:relative; }
.auth-field input{ width:100%; border:1.5px solid #eadccf; border-radius:12px; padding:14px 16px; font-size:15px; color:#3a2a1e; background:#fff; outline:none; font-family:inherit; transition:border-color .15s; }
.auth-field input::placeholder{ color:#b9a493; }
.auth-field input:focus{ border-color:#ff7a2e; box-shadow:0 0 0 3px rgba(255,122,46,0.12); }
.auth-form.filled .auth-field input{ background:#f6f1ec; border-color:transparent; }
.auth-form.filled .auth-field input:focus{ background:#fff; border-color:#ff7a2e; }
.auth-eye{ position:absolute; right:14px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:18px; opacity:.5; user-select:none; }
.auth-field.code input{ padding-right:112px; }
.auth-code-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:#ffe4d3; color:#f95901; font-size:12.5px; font-weight:700; padding:10px 12px; border-radius:9px; cursor:pointer; font-family:inherit; }
.auth-code-btn:disabled{ opacity:.5; cursor:not-allowed; }
.auth-agree{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#8a7462; margin:18px 2px; cursor:pointer; }
.auth-agree input{ width:17px; height:17px; accent-color:#f95901; cursor:pointer; }
.auth-agree em{ color:#4c7bd9; font-style:normal; }
.auth-submit{ width:100%; border:none; border-radius:999px; padding:15px; font-size:17px; font-weight:800; letter-spacing:6px; color:#fff; background:linear-gradient(135deg,#ff9a46,#f95901); cursor:pointer; box-shadow:0 8px 20px rgba(249,89,1,0.35); font-family:inherit; transition:all .15s; }
.auth-submit:disabled{ background:#e7dcd2; color:#b9a493; box-shadow:none; cursor:not-allowed; }
.auth-submit:active:not(:disabled){ transform:scale(.98); }
.auth-msg{ font-size:12.5px; text-align:center; color:#dc2626; margin-top:12px; min-height:16px; line-height:1.5; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0 18px; color:#b9a493; font-size:12.5px; }
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:#eee3d8; }
.auth-wechat{ width:100%; border:none; border-radius:999px; padding:14px; font-size:16px; font-weight:700; color:#fff; background:linear-gradient(135deg,#52c97a,#22a95e); cursor:pointer; box-shadow:0 8px 20px rgba(34,169,94,0.35); font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; }
.auth-switch{ text-align:center; font-size:13px; color:#8a7462; margin-top:20px; }
.auth-switch a{ color:#f95901; font-weight:700; cursor:pointer; }
@media (min-width:560px){ .auth-wrap{ padding:14px 24px 60px; } .auth-card{ padding:52px 30px 30px; } }
/* =====================================================================
卡密中心（商品 / 库存 / 售后 / 累计 / 红线规则）
===================================================================== */
.cc-user-chip { position:absolute; right:18px; font-size:12px; color:var(--text2); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 身份卡 */
.cc-identity {
display:flex; align-items:center; gap:12px;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff; border-radius:18px; padding:16px; margin-bottom:14px;
box-shadow:0 6px 18px rgba(102,126,234,.28);
}
.cc-id-avatar { width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.cc-id-main { flex:1; min-width:0; }
.cc-id-name { font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cc-id-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.25); }
.cc-id-sub { font-size:12px; opacity:.9; margin-top:4px; line-height:1.5; }
/* Tab */
.cc-tabs { display:flex; gap:6px; background:#fff; border-radius:14px; padding:6px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.cc-tab {
flex:1; border:none; background:transparent; border-radius:10px; padding:8px 2px;
font-size:17px; cursor:pointer; color:var(--text2); line-height:1.2;
display:flex; flex-direction:column; align-items:center; gap:2px; transition:.18s;
}
.cc-tab em { font-style:normal; font-size:11px; font-weight:600; }
.cc-tab.active { background:var(--grad); color:#fff; box-shadow:0 3px 8px rgba(249,89,1,.26); }
.cc-panel { animation:ccFade .22s ease; }
@keyframes ccFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
/* 商品卡（横向卡券形态） */
.cc-product-list { display:flex; flex-direction:column; gap:10px; }
.cc-pd {
position:relative; display:flex; background:#fff; border:1px solid #EFEFF4;
border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(24,18,40,.045);
transition:box-shadow .2s, transform .2s;
}
.cc-pd:hover { box-shadow:0 6px 20px rgba(24,18,40,.09); transform:translateY(-1px); }
/* 左侧券根：主题渐变 + 斜纹票面 + 虚线撕口 */
.cc-pd-stub {
position:relative; flex:none; width:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
background:linear-gradient(150deg,var(--c2) 0%,var(--c1) 100%);
border-right:1.5px dashed rgba(255,255,255,.75);
box-shadow:inset -6px 0 12px -6px rgba(0,0,0,.18);
}
.cc-pd-stub::before {
content:''; position:absolute; left:0; top:0; bottom:0; width:74px;
background:repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 5px, rgba(255,255,255,0) 5px 11px);
pointer-events:none;
}
.cc-pd-stub span { position:relative; font-size:23px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.cc-pd-stub b { position:relative; font-size:12px; font-weight:800; color:#fff; letter-spacing:.5px; opacity:.96; }
.cc-pd-body { flex:1; min-width:0; padding:11px 12px 10px; display:flex; flex-direction:column; }
.cc-pd-t { display:flex; align-items:center; gap:7px; }
.cc-pd-t b { font-size:15px; font-weight:800; color:#16161D; letter-spacing:.2px; }
.cc-pd-t u {
text-decoration:none; font-size:10px; font-weight:800; color:#fff; letter-spacing:.2px;
background:linear-gradient(135deg,var(--c1),var(--c2)); border-radius:999px; padding:2px 8px;
box-shadow:0 2px 6px var(--c1g);
}
.cc-pd-sub { font-size:11px; color:#8E8E9C; margin-top:3px; }
.cc-pd-chips { display:flex; flex-wrap:wrap; gap:4px 5px; margin:7px 0 9px; }
.cc-pd-chips i {
font-style:normal; font-size:10.5px; color:#6E6E80; background:#F5F5F8;
border-radius:5px; padding:2.5px 7px; white-space:nowrap;
}
.cc-pd-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.cc-pd-money { display:flex; align-items:baseline; gap:6px; min-width:0; }
.cc-pd-price { font-size:23px; font-weight:800; color:#16161D; line-height:1; letter-spacing:-.3px; }
.cc-pd-price i { font-style:normal; font-size:13px; font-weight:800; margin-right:1px; }
.cc-pd-money s { font-size:11px; color:#A8A8B6; font-weight:600; }
.cc-pd-money em {
font-style:normal; font-size:10px; font-weight:800; color:#fff;
background:linear-gradient(135deg,var(--c1),var(--c2)); border-radius:4px; padding:1.5px 5px;
}
.cc-pd-act { display:flex; align-items:center; gap:7px; flex:none; }
.cc-pd-btn {
border:none; border-radius:9px; padding:8px 15px; font-size:13px; font-weight:800; color:#fff;
background:linear-gradient(135deg,var(--c1),var(--c2)); cursor:pointer; white-space:nowrap;
box-shadow:0 3px 9px var(--c1g); transition:transform .15s, box-shadow .15s;
}
.cc-pd-btn:active { transform:scale(.95); box-shadow:0 1px 4px var(--c1g); }
/* 累计 · 奖励卡片（主题色渐变版） */
.cc-rw { position:relative; background:#fff; border:1px solid #f0e8ee; border-radius:16px; padding:14px 14px 12px; margin-bottom:10px; overflow:hidden; box-shadow:0 2px 10px rgba(60,20,50,.05); }
.cc-rw::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--c1),var(--c2)); }
.cc-rw.ready { border-color:var(--c1); background:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 7%,#fff) 0%,#fff 55%); box-shadow:0 4px 16px rgba(0,0,0,.12); box-shadow:0 4px 16px color-mix(in srgb,var(--c1) 25%,transparent); }
.cc-rw-head { display:flex; align-items:center; gap:10px; }
.cc-rw-ico { width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; font-size:20px; border-radius:12px; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 3px 8px color-mix(in srgb,var(--c1) 35%,transparent); }
.cc-rw-info { flex:1; min-width:0; }
.cc-rw-info b { display:block; font-size:15px; line-height:1.2; }
.cc-rw-info span { display:block; font-size:11px; color:var(--text2); margin-top:2px; }
.cc-rw-pct { font-size:13px; font-weight:800; color:var(--c1); }
.cc-rw-bar { height:7px; background:#f3eef2; border-radius:999px; overflow:hidden; margin-top:10px; }
.cc-rw-bar span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c1),var(--c2)); transition:width .4s; }
.cc-rw-foot { margin-top:9px; font-size:12px; color:var(--text2); line-height:1.5; }
.cc-rw-foot b { color:var(--c1); font-size:14px; }
.cc-claim-btn:active { transform:scale(.98); }
/* 领取奖励入口：卡片右侧按钮 */
.cc-rw-claim { flex:none; border:none; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); cursor:pointer; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.18); box-shadow:0 3px 10px color-mix(in srgb,var(--c1) 40%,transparent); animation:ccPulse 1.6s ease-in-out infinite; }
.cc-rw-claim:active { transform:scale(.96); }
@keyframes ccPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.92} }
/* 🎁 领取奖励弹窗 */
.cc-confetti { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.cc-rw-card { text-align:center; overflow:hidden; }
.cc-rw-gift { font-size:64px; line-height:1; margin:6px 0 8px; animation:ccGiftPop .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ccGiftPop { 0%{transform:scale(0) rotate(-25deg);opacity:0} 60%{transform:scale(1.25) rotate(8deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
.cc-rw-sub { font-size:12px; color:var(--text2); margin-bottom:12px; }
.cc-rw-sub b { color:var(--primary); }
.cc-rw-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px; font-weight:800; letter-spacing:.5px; background:linear-gradient(135deg,#fff5f8,#f3f0ff); border:1.5px dashed var(--primary); color:var(--text); border-radius:12px; padding:12px 10px; margin-bottom:12px; word-break:break-all; animation:ccCodeIn .5s .35s both; }
@keyframes ccCodeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.cc-rw-accept { margin-top:8px; background:linear-gradient(135deg,#FF6B35,#FF3D68); }
.cc-rw-note { margin-top:10px; font-size:11px; color:var(--text2); }
/* 数量选择（与按钮同行的紧凑步进器） */
.cc-qty { display:flex; align-items:center; border:1px solid var(--c1b); border-radius:9px; overflow:hidden; background:#fff; }
.cc-qty button { width:26px; height:28px; border:none; background:var(--c1s); color:var(--c1d); font-size:15px; font-weight:800; line-height:1; cursor:pointer; }
.cc-qty button:active { background:var(--c1m); color:#fff; }
.cc-qty span { min-width:30px; height:28px; line-height:28px; text-align:center; font-weight:800; font-size:13px; color:#16161D; }
/* 库存 */
.cc-filter { display:flex; gap:8px; margin-bottom:10px; }
.cc-chip { border:1px solid #eee; background:#fff; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; color:var(--text2); cursor:pointer; }
.cc-chip.active { background:var(--grad); color:#fff; border-color:transparent; }
.cc-stock-list { display:flex; flex-direction:column; gap:8px; }
.cc-code-item {
background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 2px 8px rgba(0,0,0,.05);
display:flex; align-items:center; gap:10px; cursor:pointer; transition:.15s;
}
.cc-code-item:active { transform:scale(.99); }
.cc-code-item.is-used { background:#fafafa; }
.cc-code-item.is-used .cc-code-no { text-decoration:line-through; color:#bbb; }
.cc-code-item.is-used .cc-code-name { text-decoration:line-through; color:#bbb; }
.cc-code-item.is-expired { opacity:.6; }
.cc-code-emoji { font-size:22px; flex-shrink:0; }
.cc-code-main { flex:1; min-width:0; }
.cc-code-name { font-size:14px; font-weight:700; }
.cc-code-no { font-size:12px; color:var(--text2); font-family:ui-monospace,Menlo,monospace; margin-top:2px; word-break:break-all; }
.cc-code-meta { font-size:11px; color:#bbb; margin-top:3px; }
.cc-code-state { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.cc-state-unused { background:#e8f8ee; color:#16a34a; }
.cc-state-used { background:#f1f1f1; color:#999; }
.cc-state-expired { background:#fdecec; color:#e0533d; }
.cc-code-act { border:none; background:var(--grad); color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
/* 空状态 */
.cc-empty { text-align:center; color:var(--text2); font-size:13px; padding:34px 10px; }
.cc-empty div:first-child { font-size:38px; margin-bottom:8px; }
/* 累计拿卡 */
.cc-growth-hero { position:relative; overflow:hidden; background:linear-gradient(120deg,#FF416C 0%,#C724B1 60%,#7C4DFF 100%); border-radius:18px; padding:16px 18px; color:#fff; display:flex; align-items:center; gap:16px; box-shadow:0 6px 18px rgba(199,36,177,.28); }
.cc-growth-hero::before { content:''; position:absolute; right:-30px; top:-40px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.14); }
.cc-growth-hero::after { content:''; position:absolute; right:24px; bottom:-50px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.10); }
.cc-g-left { flex:none; text-align:center; }
.cc-g-num { font-size:38px; font-weight:800; line-height:1.05; text-shadow:0 2px 8px rgba(0,0,0,.15); }
.cc-g-label { font-size:11px; opacity:.92; margin-top:2px; }
.cc-g-divider { flex:none; width:1px; align-self:stretch; background:rgba(255,255,255,.28); }
.cc-g-right { position:relative; z-index:1; flex:1; font-size:13px; font-weight:700; line-height:1.55; }
.cc-g-gift { font-size:18px; margin-right:6px; }
.cc-level-row { display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:10px 12px; margin-top:8px; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.cc-level-row.cur { border:2px solid var(--primary); }
.cc-lv-badge { font-size:20px; }
.cc-lv-main { flex:1; min-width:0; }
.cc-lv-name { font-size:13px; font-weight:700; }
.cc-lv-th { font-size:11px; color:var(--text2); }
.cc-lv-price { font-size:12px; font-weight:700; color:var(--primary); white-space:nowrap; }
/* 规则 */
.cc-rule { display:flex; gap:10px; background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.cc-rule-icon { font-size:18px; flex-shrink:0; }
.cc-rule-title { font-size:14px; font-weight:700; margin-bottom:3px; }
.cc-rule-body { font-size:12px; color:var(--text2); line-height:1.65; }
/* 说明小字 */
.cc-note { font-size:12px; color:var(--text2); line-height:1.7; margin-top:10px; }
.cc-msg { font-size:12px; margin-top:8px; line-height:1.6; min-height:18px; }
/* 支付弹窗 */
.cc-pay-card { max-width:360px; }
.cc-pay-goods { display:flex; align-items:center; gap:10px; background:#fafafa; border-radius:12px; padding:12px; margin:12px 0; }
.cc-pay-emoji { font-size:26px; }
.cc-pay-info { flex:1; min-width:0; }
.cc-pay-name { font-size:14px; font-weight:700; }
.cc-pay-qty { font-size:12px; color:var(--text2); }
.cc-pay-amount { font-size:22px; font-weight:800; color:var(--primary); }
.cc-pay-methods { display:flex; gap:8px; margin-bottom:12px; }
.cc-pay-m { flex:1; border:2px solid #eee; background:#fff; border-radius:12px; padding:10px 4px; font-size:13px; font-weight:700; cursor:pointer; color:var(--text2); display:flex; align-items:center; justify-content:center; gap:4px; }
.cc-pay-m.active { border-color:var(--primary); color:var(--primary); background:#fff6f0; }
.cc-qr-wrap { text-align:center; padding:6px 0 12px; }
.cc-qr { border-radius:10px; border:1px solid #eee; }
.cc-qr-tip { font-size:13px; font-weight:700; margin-top:8px; }
.cc-demo-tip { font-size:11px; color:#c0392b; margin-top:4px; }
.cc-pay-order { font-size:11px; color:var(--text2); text-align:center; margin-bottom:10px; }
/* 成功弹窗 */
.cc-success-icon { font-size:46px; text-align:center; margin-bottom:6px; }
.cc-success-sub { font-size:12px; color:var(--text2); text-align:center; margin-bottom:12px; }
.cc-success-codes { background:#fafafa; border-radius:12px; padding:12px; margin-bottom:12px; max-height:200px; overflow:auto; }
.cc-sc-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px dashed #eee; }
.cc-sc-item:last-child { border-bottom:none; }
.cc-sc-no { font-family:ui-monospace,Menlo,monospace; font-size:13px; font-weight:700; word-break:break-all; }
.cc-sc-tag { font-size:11px; color:var(--text2); white-space:nowrap; }
/* ---------- 爆款口播：三步向导 ---------- */
.kb-steps { display:flex; align-items:flex-start; justify-content:center; gap:8px; padding:18px 12px 6px; }
.kb-step { display:flex; flex-direction:column; align-items:center; gap:4px; width:84px; }
.kb-dot { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:15px; font-weight:800; color:#fff; background:#e6e6e6; transition:all .25s; }
.kb-label { font-size:12px; color:var(--text2, #999); }
.kb-step.active .kb-dot { background:var(--primary, #f95901); box-shadow:0 2px 8px rgba(249,89,1,.35); }
.kb-step.active .kb-label { color:var(--primary, #f95901); font-weight:700; }
.kb-line { flex:1; height:2px; background:#e6e6e6; margin-top:17px; transition:background .25s; }
.kb-line.active { background:var(--primary, #f95901); }
.kb-panel { padding-top:8px; }
.kb-sub { font-size:12px; color:var(--text2, #999); margin:2px 0 12px; }
.kb-link-row { display:flex; gap:8px; align-items:flex-start; }
.kb-link-row .kb-input { flex:1; resize:none; }
.kb-link-row .tool-btn { height:48px; white-space:nowrap; }
.kb-parse-btn { width:100%; margin-top:12px; }
.kb-use-text { background:var(--primary-light, #ff7a2e); font-weight:700; }
.kb-divider { display:flex; align-items:center; text-align:center; color:var(--text2, #999);
font-size:12px; margin:16px 0 12px; }
.kb-divider::before, .kb-divider::after { content:''; flex:1; height:1px; background:#eee; }
.kb-divider span { padding:0 10px; }
.kb-backline { text-align:center; margin-top:6px; }
.kb-back { color:var(--primary, #f95901); font-weight:700; cursor:pointer; }
.kb-back:hover { text-decoration:underline; }
.kb-kv { font-size:13px; line-height:1.7; margin-bottom:8px; }
.kb-kv b { color:var(--primary, #f95901); margin-right:6px; font-weight:700; }
.kb-ref { background:var(--chip-bg, #f5f5f5); border-radius:10px; padding:10px 12px; font-size:13px;
line-height:1.7; color:var(--text, #333); white-space:pre-wrap; }
.kb-confirm-row { display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed #eee; font-size:13px; }
.kb-confirm-row:last-child { border-bottom:none; }
.kb-confirm-label { color:var(--text2, #999); white-space:nowrap; }
.kb-confirm-val { color:var(--text, #333); word-break:break-all; }
.kb-field { margin:10px 0; }
.kb-field-label { display:inline-block; font-size:12px; font-weight:700; color:var(--primary, #f95901);
margin-bottom:4px; }
.kb-field-val { font-size:13.5px; line-height:1.8; color:var(--text, #333); white-space:pre-wrap; }
.kb-field-body { background:var(--chip-bg, #f5f5f5); border-left:3px solid var(--primary, #f95901);
border-radius:8px; padding:10px 12px; }
.kb-script-item .result-tag { background:#ffe9da; color:var(--primary, #f95901); }
/* ---------- 爆款口播：完成步绿色 / 参考文案卡片 / 分步脚本 / 进度条 ---------- */
.kb-step.done .kb-dot { background:#22c55e; box-shadow:0 2px 8px rgba(34,197,94,.3); }
.kb-step.done .kb-label { color:#22c55e; }
/* 参考文案全文卡片 */
.kb-refcard { overflow:hidden; padding:0 !important; margin-bottom:12px; }
.kb-refcard-top { display:flex; justify-content:space-between; align-items:center;
background:#fff6e8; padding:10px 14px; font-size:13px; font-weight:700; color:#8a6d3b; }
.kb-ref-copy { background:#eef4ff; color:#3b82f6; border:none; border-radius:8px; padding:5px 12px;
font-size:12px; font-weight:700; cursor:pointer; }
.kb-ref-copy:active { transform:scale(.95); }
.kb-refcard-body { padding:14px; font-size:13.5px; line-height:1.85; color:var(--text, #333);
white-space:pre-wrap; }
/* 自定义行业 */
.kb-custom-chip { border-style:dashed !important; color:var(--primary, #f95901) !important; }
.kb-custom-row { display:flex; gap:8px; margin-top:10px; }
.kb-custom-row .prompt-area { flex:1; }
.kb-custom-row .gen-btn { width:auto; padding:0 18px; }
/* 拆解（亮点/可借鉴/可优化） */
.kb-decomp { position:relative; padding:10px 12px 10px 14px; margin:8px 0; border-radius:10px;
background:var(--chip-bg, #f5f5f5); font-size:13px; line-height:1.7; color:var(--text, #333); }
.kb-decomp .kd-ico { margin-right:6px; }
.kb-decomp .kd-label { font-weight:700; margin-right:6px; color:var(--primary, #f95901); }
.kb-decomp .kd-text { margin-top:4px; }
/* 分步脚本卡片：左侧竖条颜色渐变 */
.result-item.kb-step-item { border-left:4px solid var(--kb-c, #f95901); padding:12px 14px 14px; }
.kb-step-item.c-orange { --kb-c:#ff5a3c; }
.kb-step-item.c-orange2 { --kb-c:#ff8a3c; }
.kb-step-item.c-gold { --kb-c:#ffb020; }
.kb-step-item.c-green { --kb-c:#22c55e; }
.kb-step-item.c-purple { --kb-c:#7c5cff; }
.kb-step-item.c-pink { --kb-c:#ff5c9e; }
.kb-step-item .result-tag { background:#fff4e8; color:#b45309; }
.kb-step-body { font-size:13.5px; line-height:1.85; color:var(--text, #333); white-space:pre-wrap; margin-top:2px; }
/* 拍摄小贴士 */
.kb-tip { background:#eef6ff; border:1px solid #d3e8ff; border-radius:12px; padding:12px 14px; margin-top:14px; }
.kb-tip-h { font-size:13.5px; font-weight:800; color:#2563eb; margin-bottom:4px; }
.kb-tip-b { font-size:13px; line-height:1.75; color:var(--text, #333); }
/* 底部操作：一键复制全部 + 重新生成/新脚本 */
.kb-script-footer { margin-top:16px; }
.kb-copy-all { width:100%; }
.kb-script-small { display:flex; gap:10px; margin-top:12px; }
.kb-script-small .btn-copy { flex:1; justify-content:center; padding:11px 0; font-weight:700; }
.kb-regen { background:#fff; color:var(--primary, #f95901); border:1.5px solid #ffe0cc; }
.kb-newsc { background:var(--primary, #f95901); color:#fff; }
/* 进度条 loading */
.kb-loading { text-align:center; padding:34px 18px; }
.kb-loading-ico { width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
background:radial-gradient(circle at 30% 30%, #ffb066, #f95901); display:flex; align-items:center;
justify-content:center; font-size:28px; color:#fff; box-shadow:0 6px 20px rgba(249,89,1,.4);
animation:kbPulse 1.6s ease-in-out infinite; }
@keyframes kbPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.kb-loading-text { font-size:15px; font-weight:700; color:var(--text, #333); margin-bottom:6px; }
.kb-loading-dots { margin:6px 0 16px; }
.kb-loading-dots span { display:inline-block; width:7px; height:7px; margin:0 3px; border-radius:50%;
background:var(--primary, #f95901); opacity:.4; animation:kbDot 1s infinite; }
.kb-loading-dots span:nth-child(2){ animation-delay:.2s }
.kb-loading-dots span:nth-child(3){ animation-delay:.4s }
@keyframes kbDot { 0%,80%,100%{opacity:.3; transform:scale(.85)} 40%{opacity:1; transform:scale(1.1)} }
.kb-progress { height:8px; background:#f1e4da; border-radius:5px; overflow:hidden; max-width:280px;
margin:0 auto; }
.kb-progress-bar { height:100%; width:0; background:linear-gradient(90deg,#ff8a3c,#f95901);
border-radius:5px; transition:width .3s; }
.kb-progress-num { margin-top:8px; font-size:14px; font-weight:800; color:var(--primary, #f95901); }
/* ---------- 爆款口播：解析来源徽标 + 推荐文案输入框 ---------- */
.kb-src-note { font-size:12.5px; line-height:1.7; border-radius:10px; padding:10px 12px; margin:6px 0 12px; }
.kb-src-note b { font-weight:800; }
.kb-src-infer { background:#fff6e8; border:1px solid #ffe0b2; color:#8a5a00; }
.kb-src-infer b { color:#c2410c; }
.kb-src-text { background:#eefdf3; border:1px solid #c5efd3; color:#166534; }
.kb-src-text b { color:#15803d; }
.kb-textarea { border-color:#ffd9b3 !important; background:#fffdf8; }
.kb-textarea:focus { border-color:var(--primary, #f95901) !important; box-shadow:0 0 0 3px rgba(249,89,1,.12); }
/* ---------- 我有产品 · 一键种草 ---------- */
.badge-opt { font-size:11px; color:#6b7280; background:#f3f4f6; padding:2px 7px; border-radius:6px; font-weight:600; }
.pd-lead { font-size:13px; line-height:1.7; color:#8a7a72; background:#fff8f3; border:1px solid #ffe6d5; border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.pd-line-input { min-height:0; height:48px; padding:12px 14px; font-size:16px; font-weight:700; }
.pd-covers { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px; }
@media (max-width:400px) { .pd-covers { grid-template-columns:repeat(2,1fr); } }
.pd-cover { position:relative; cursor:pointer; border-radius:12px; overflow:hidden; border:2px solid transparent; background:#fff5ee; }
.pd-cover.selected { border-color:var(--primary,#f95901); box-shadow:0 0 0 3px rgba(249,89,1,.15); }
.pd-cover-stage { position:relative; width:100%; aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff5ee; }
.pd-cover-stage img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-cover-tag { position:absolute; left:6px; top:6px; font-size:11px; color:#fff; background:rgba(0,0,0,.42); padding:2px 7px; border-radius:6px; }
.pd-cover.selected .pd-cover-tag { background:var(--primary,#f95901); }
.pd-cover-err { font-size:13px; font-weight:700; color:#dc2626; }
.pd-cover-errsub { font-size:11px; color:#9ca3af; padding:0 8px; text-align:center; margin-top:4px; line-height:1.5; }
.pd-check { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#6b7280; line-height:1.6; margin-top:12px; cursor:pointer; }
.pd-check input { margin-top:3px; accent-color:var(--primary,#f95901); width:16px; height:16px; flex:none; }
.pd-pub-actions { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.pd-pub-actions .tool-btn { width:100%; }
.pd-pub-main { width:100%; }
/* ---------- 爆款详情图 · 电商详情页 ---------- */
.dd-steps { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.dd-step { font-size:11.5px; font-weight:600; color:#b7a99e; background:#f6f1ec; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.dd-step.on { color:#fff; background:var(--grad,linear-gradient(135deg,#ff8845 0%,#f94400 100%)); }
.dd-shoot { background:#f7fbf7; border:1px solid #e2f0e2; border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.dd-shoot-t { font-size:13px; font-weight:700; color:#3f6b3f; margin-bottom:6px; }
.dd-shoot-l { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color:#4b7a4b; }
.dd-shoot-f { font-size:12px; color:#8a9a8a; margin-top:7px; line-height:1.6; }
.dd-pages { display:flex; flex-direction:column; gap:8px; }
.dd-page { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid #f0e4da; border-radius:12px; background:#fffaf6; cursor:pointer; transition:all .15s; }
.dd-page.on { border-color:#ffc9a3; background:#fff4ec; box-shadow:0 2px 8px rgba(249,89,1,.08); }
.dd-page input { margin-top:3px; accent-color:var(--primary,#f95901); width:16px; height:16px; flex:none; }
.dd-page-txt { display:flex; flex-direction:column; gap:2px; }
.dd-page-main { font-size:14px; font-weight:700; color:var(--text,#3a2a1e); }
.dd-page-desc { font-size:11.5px; color:var(--text2,#a08c7c); }
.dd-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed #f0e4da; }
.dd-row-l { font-size:13.5px; font-weight:600; color:var(--text,#3a2a1e); flex:none; }
.dd-report-tip { font-size:12.5px; line-height:1.75; color:#8a6d3b; background:#fffbeb; border:1px solid #fde9b8; border-radius:10px; padding:9px 11px; margin-bottom:12px; }
.dd-rf { margin-bottom:12px; }
.dd-rf-l { font-size:12.5px; font-weight:700; color:#8a7a72; margin-bottom:5px; }
.dd-rf-in { min-height:0; font-size:14px; }
.dd-pb { border:1px solid #f2e6dc; border-radius:14px; padding:12px; margin-bottom:14px; background:#fffdfb; }
.dd-pb-h { font-size:14.5px; font-weight:800; color:var(--text,#3a2a1e); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #f6ece4; }
.dd-pb-text { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.dd-pb-f { display:flex; flex-direction:column; gap:5px; }
.dd-pb-fl { font-size:11.5px; font-weight:600; color:#a08c7c; }
.dd-pb-f .dd-line-input { height:42px; font-size:14px; font-weight:500; }
.dd-var { margin-top:10px; }
.dd-var-h { font-size:12px; font-weight:700; color:var(--primary,#f95901); margin-bottom:5px; }
.dd-pr { font-size:12.5px; line-height:1.7; }
.dd-rc { padding:12px; }
.dd-rc-h { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.dd-rc-n { font-size:14.5px; font-weight:800; color:var(--text,#3a2a1e); }
.dd-rc-sw { display:flex; gap:6px; }
.dd-sw { border:none; cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px; background:#f6f1ec; color:#a08c7c; }
.dd-sw.on { background:var(--grad,linear-gradient(135deg,#ff8845 0%,#f94400 100%)); color:#fff; }
.dd-stage { width:100%; display:flex; align-items:center; justify-content:center; background:#fff5ee; border-radius:12px; overflow:hidden; min-height:180px; }
.dd-stage img.dd-img { width:100%; display:block; border-radius:12px; }
.dd-loading { display:flex; flex-direction:column; align-items:center; gap:6px; padding:44px 0; font-size:14px; font-weight:700; color:var(--primary,#f95901); }
.dd-lsub { font-size:11.5px; font-weight:500; color:#b7a99e; }
.dd-err { display:flex; flex-direction:column; align-items:center; gap:5px; padding:44px 12px; font-size:14px; font-weight:700; color:#dc2626; text-align:center; }
.dd-errsub { font-size:11.5px; font-weight:500; color:#9ca3af; line-height:1.5; }
.dd-rf-box { display:flex; gap:8px; margin-top:12px; }
.dd-rf-box .dd-line-input { flex:1; height:44px; font-size:13.5px; font-weight:500; }
.dd-rf-box .tool-btn { flex:none; }
.dd-rc-act { display:flex; gap:8px; margin-top:8px; }
.dd-rc-act .tool-btn { flex:1; }
/* ===== 每日热搜 · 热榜海报 ===== */
.hs-plats { display:flex; flex-direction:column; gap:8px; }
.hs-loading { padding:24px 0; text-align:center; font-size:13px; color:var(--text2); }
.hs-plat-row { display:flex; flex-wrap:wrap; gap:8px; padding:10px; border-radius:16px; }
.hs-plat-row.g0 { background:#fff0f3; }
.hs-plat-row.g1 { background:#fff6e8; }
.hs-plat-row.g2 { background:#eaf9f1; }
.hs-plat-row.g3 { background:#eef4ff; }
.hs-plat {
border:none; cursor:pointer; font-family:inherit;
background:#fff; color:var(--text);
font-size:13.5px; font-weight:600;
padding:10px 14px; border-radius:12px;
box-shadow:0 1px 3px rgba(0,0,0,.06);
transition:transform .12s, box-shadow .12s;
}
.hs-plat:active { transform:scale(.96); }
.hs-plat.active { background:var(--grad); color:#fff; box-shadow:0 4px 12px rgba(249,89,1,.34); }
.hs-sub { font-size:12.5px; color:var(--text2); line-height:1.7; margin-bottom:12px; }
.hs-profile { display:flex; gap:14px; align-items:flex-start; }
.hs-avatar {
position:relative; flex:none; width:64px; height:64px; border-radius:50%;
background:#fdf1e7; border:1.5px dashed #f0c9a8;
display:flex; align-items:center; justify-content:center;
cursor:pointer; overflow:hidden; color:var(--primary); font-size:26px; font-weight:300;
}
.hs-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.hs-avatar-clear {
position:absolute; top:0; right:0; width:20px; height:20px; border-radius:50%;
background:rgba(0,0,0,.55); color:#fff; font-size:13px; line-height:20px; text-align:center;
}
.hs-fields { flex:1; display:flex; flex-direction:column; gap:8px; }
.hs-input {
width:100%; box-sizing:border-box; font-family:inherit; font-size:14px;
color:var(--text); background:#fbf7f3;
border:1px solid #f2e6da; border-radius:12px; padding:11px 13px; outline:none;
}
.hs-input:focus { border-color:var(--primary-light); background:#fff; }
.hs-input::placeholder { color:#c9b8a9; }
.hs-poster-wrap { background:#f7f2ee; border-radius:16px; padding:10px; margin-bottom:12px; }
.hs-poster { width:100%; display:block; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.10); }
.hs-acts { display:flex; flex-direction:column; gap:8px; }
.hs-acts .tool-btn { width:100%; padding:11px; font-size:13.5px; }
.hs-list { max-height:400px; overflow-y:auto; border-radius:14px; background:#fbf7f3; padding:4px 10px; margin-bottom:12px; }
.hs-li { display:flex; align-items:flex-start; gap:9px; padding:10px 0; border-bottom:1px solid #f2e9e0; }
.hs-li:last-child { border-bottom:none; }
.hs-li-num {
flex:none; width:20px; height:20px; border-radius:50%; color:#fff;
font-size:11.5px; font-weight:700; text-align:center; line-height:20px; margin-top:1px;
}
.hs-li-main { flex:1; min-width:0; }
.hs-li-title { font-size:13.5px; line-height:1.55; color:var(--text); }
.hs-li-hot { font-size:11px; color:#b09a8a; margin-top:3px; }
.hs-li-go { flex:none; font-size:11.5px; color:var(--primary); text-decoration:none; font-weight:600; margin-top:2px; }
.hs-toast {
position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom, 0px));
transform:translate(-50%, 12px);
background:rgba(28,20,14,.9); color:#fff; font-size:13px; font-weight:600;
padding:11px 18px; border-radius:999px; max-width:82vw; text-align:center;
opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; z-index:999;
}
.hs-toast.show { opacity:1; transform:translate(-50%, 0); }
/* ==================== 在线拼图（pz-*） ==================== */
.pz-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad); color:#fff; margin-bottom:14px; box-shadow:0 8px 20px rgba(249,89,1,.26); }
.pz-banner-ico { font-size:30px; line-height:1; }
.pz-banner-tx { min-width:0; }
.pz-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.pz-banner-s { font-size:12.5px; opacity:.92; margin-top:3px; }
.card-title.pz-ct { display:flex; align-items:center; gap:8px; }
.pz-count { color:var(--primary); font-size:13px; font-weight:700; }
.pz-clear { margin-left:auto; border:none; cursor:pointer; font-family:inherit; background:#fff1f1; color:#e0533d; font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; }
.pz-clear:active { transform:scale(.95); }
.pz-drop { border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:22px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.pz-drop:active { background:#fff2e8; }
.pz-drop.full { opacity:.55; border-style:solid; }
.pz-drop-plus { font-size:30px; color:var(--primary); line-height:1; }
.pz-drop-t { font-size:14px; font-weight:600; color:var(--text); margin-top:6px; }
.pz-drop-s { font-size:12px; color:var(--text2); margin-top:4px; }
.pz-thumbs { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
.pz-thumbs:empty { display:none; }
.pz-cell { position:relative; border-radius:12px; overflow:hidden; background:#f6f1ec; aspect-ratio:1/1; min-height:92px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pz-cell img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.pz-cell.dragging { opacity:.85; transform:scale(1.06); box-shadow:0 8px 20px rgba(0,0,0,.22); z-index:5; }
.pz-del { position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:20px; text-align:center; }
.pz-tip { margin-top:10px; }
.pz-dirs { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pz-dir { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px 10px; border-radius:16px; border:1.5px solid #eee3d8; background:#fbf7f2; cursor:pointer; font-family:inherit; min-height:104px; transition:border-color .15s, background .15s; }
.pz-dir.active { border-color:var(--primary); background:#fff3ea; }
.pz-dir-ico { display:flex; flex-direction:column; gap:3px; }
.pz-dir[data-dir="h"] .pz-dir-ico { flex-direction:row; }
.pz-dir-ico i { display:block; width:30px; height:8px; border-radius:3px; background:#dcd0c4; }
.pz-dir.active .pz-dir-ico i { background:var(--primary); }
.pz-dir-t { font-size:13.5px; font-weight:600; color:var(--text2); }
.pz-dir.active .pz-dir-t { color:var(--primary); }
.pz-gaps { display:flex; flex-wrap:wrap; gap:8px; }
.pz-gap { border:1.5px solid #eee3d8; background:#fbf7f2; color:var(--text2); font-family:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:999px; cursor:pointer; }
.pz-gap.active { border-color:var(--primary); background:#fff3ea; color:var(--primary); }
.pz-steps { list-style:none; margin:0; padding:0; }
.pz-steps li { display:flex; align-items:flex-start; gap:10px; padding:9px 0; font-size:13.5px; color:var(--text); line-height:1.6; }
.pz-steps li + li { border-top:1px solid #f4ece4; }
.pz-steps i { flex:none; width:22px; height:22px; border-radius:50%; background:var(--grad); color:#fff; font-style:normal; font-size:12px; font-weight:700; line-height:22px; text-align:center; }
.pz-note { margin-top:12px; padding:10px 12px; border-radius:12px; background:#fff5ec; color:var(--text2); font-size:12.5px; line-height:1.6; }
.pz-size { margin-left:auto; font-size:12px; font-weight:600; color:var(--text2); background:#f7f1eb; padding:4px 10px; border-radius:999px; }
.pz-res-wrap { margin-top:10px; border-radius:14px; overflow:hidden; background:#f6f1ec; display:flex; justify-content:center; }
.pz-res { display:block; max-width:100%; max-height:62vh; cursor:zoom-in; }
.pz-viewer { position:fixed; inset:0; background:rgba(20,14,10,.94); z-index:1000; display:flex; align-items:center; justify-content:center; padding:14px; }
.pz-viewer[hidden] { display:none; }
.pz-viewer img { max-width:100%; max-height:100%; object-fit:contain; }
.pz-modal { position:fixed; inset:0; background:rgba(20,14,10,.45); z-index:1001; display:flex; align-items:center; justify-content:center; padding:28px; }
.pz-modal[hidden] { display:none; }
.pz-modal-box { width:100%; max-width:320px; background:#fff; border-radius:18px; padding:20px 18px 16px; text-align:center; }
.pz-modal-t { font-size:15.5px; font-weight:700; color:var(--text); }
.pz-modal-s { font-size:13px; color:var(--text2); margin:10px 0 18px; line-height:1.6; }
.pz-modal-acts { display:flex; flex-direction:column; gap:9px; }
.pz-modal-acts .tool-btn, .pz-modal-acts .gen-btn { width:100%; }
/* ==================== 图片反推词（ir-*） ==================== */
.ir-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad); color:#fff; margin-bottom:14px; box-shadow:0 8px 20px rgba(249,89,1,.26); }
.ir-banner-ico { font-size:30px; line-height:1; }
.ir-banner-tx { min-width:0; }
.ir-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.ir-banner-s { font-size:12.5px; opacity:.92; margin-top:3px; line-height:1.5; }
.ir-ct { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ir-count { font-size:11.5px; font-weight:600; color:#c2410c; background:#ffedd5; border-radius:999px; padding:3px 10px; }
.ir-drop { position:relative; border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:24px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.ir-drop:active { background:#fff2e8; }
.ir-drop.drag { border-color:var(--primary); background:#fff2e8; }
.ir-hint { display:block; }
.ir-cloud { font-size:34px; line-height:1; }
.ir-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.ir-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.ir-prev { display:none; width:100%; max-height:340px; object-fit:contain; border-radius:12px; }
.ir-drop.has-img { padding:10px; border-style:solid; border-color:#ffdcbf; background:#fff; }
.ir-drop.has-img .ir-hint { display:none; }
.ir-drop.has-img .ir-prev { display:block; }
.ir-del { display:none; position:absolute; right:6px; top:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(232,74,58,.94); color:#fff; font-size:17px; line-height:24px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.ir-drop.has-img .ir-del { display:block; }
.ir-statline { margin-top:10px; }
.ir-badge { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:3px 11px; background:#f3f4f6; color:var(--text2); }
.ir-badge.ok { background:#e8f8ef; color:#10844b; }
.ir-badge.run { background:#fff2e0; color:#b45309; }
.ir-typebar { font-size:13px; color:var(--text2); margin:2px 2px 10px; }
.ir-typebar b { color:var(--primary); font-weight:700; }
.ir-res { margin-bottom:12px; }
.ir-res-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ir-res-t { font-size:14.5px; font-weight:700; color:var(--text); }
.ir-res-b { font-size:13.5px; line-height:1.85; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.ir-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.9; color:#334155; background:#f8fafc; border-radius:10px; padding:10px 12px; }
.ir-copy { flex:none; border:0; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; padding:5px 14px; cursor:pointer; }
.ir-copy.ghost { background:#fff2e8; color:var(--primary); }
.ir-copy:active { opacity:.82; }
.ir-els { display:flex; flex-direction:column; gap:2px; }
.ir-el { display:flex; align-items:flex-start; gap:9px; padding:9px 0; border-bottom:1px solid #f3f0ec; }
.ir-el:last-child { border-bottom:0; padding-bottom:0; }
.ir-el-k { flex:none; width:46px; font-size:12.5px; font-weight:700; color:var(--primary); background:#fff2e8; border-radius:6px; text-align:center; padding:2px 0; margin-top:1px; }
.ir-el-v { flex:1; min-width:0; font-size:13px; line-height:1.7; color:var(--text); word-break:break-word; }
.ir-mini { flex:none; border:0; background:transparent; color:var(--text2); font-size:12px; cursor:pointer; padding:2px 4px; }
.ir-mini:active { color:var(--primary); }
.ir-empty { font-size:13px; padding:6px 0; }
.ir-acts { display:flex; flex-direction:column; gap:9px; margin:4px 0 14px; }
.ir-act { width:100%; border:1.5px solid #ffdcbf; border-radius:14px; background:#fff; color:var(--text); font-size:14.5px; font-weight:600; padding:13px 0; cursor:pointer; }
.ir-act.primary { border:0; background:var(--grad); color:#fff; box-shadow:0 8px 18px rgba(249,89,1,.24); }
.ir-act:active { opacity:.86; }
/* 次级入口：反推词默认把「中文描述」带进文生图，需要关键词式的英文提示词时走这里。视觉上刻意弱于主按钮 */
.ir-alt { width:100%; border:0; background:transparent; color:var(--primary); font-size:12.5px; font-weight:600; padding:1px 0 10px; margin-top:-6px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.ir-alt:active { opacity:.65; }
.ir-tip { margin:2px 2px 10px; }
.ir-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.ir-toast.show { opacity:1; transform:translate(-50%,0); }
/* 画面文字清单（反推词 · 自媒体封面这类图全靠文字传达信息，故逐条列出、逐条可复制） */
.ir-txs { display:flex; flex-direction:column; }
.ir-tx { display:flex; align-items:flex-start; gap:9px; padding:9px 0; border-bottom:1px solid #f3f0ec; }
.ir-tx:last-child { border-bottom:0; padding-bottom:0; }
.ir-tx-n { flex:none; width:20px; height:20px; line-height:20px; text-align:center; font-size:11.5px; font-weight:700; color:#fff; background:var(--primary); border-radius:50%; margin-top:1px; }
.ir-tx-v { flex:1; min-width:0; font-size:13.5px; line-height:1.75; color:var(--text); word-break:break-word; }
.ir-tx-tip { font-size:11.5px; line-height:1.6; margin:9px 0 0; }
/* ===== 结构拆解图（imgexplode.js）===== */
/* 功能标识色：靛蓝（只用于入口图标，主体仍沿用应用橙色主题，保证一致性） */
.f-indigo { background: linear-gradient(135deg, #8b93f8, #4f46e5); }
.ix-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad); color:#fff; margin-bottom:14px; box-shadow:0 8px 20px rgba(249,89,1,.26); }
.ix-banner-ico { font-size:30px; line-height:1; }
.ix-banner-tx { min-width:0; }
.ix-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.ix-banner-s { font-size:12.5px; opacity:.92; margin-top:3px; line-height:1.5; }
.ix-ct { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ix-count { font-size:11.5px; font-weight:600; color:#c2410c; background:#ffedd5; border-radius:999px; padding:3px 10px; }
.ix-drop { position:relative; border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:24px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.ix-drop:active { background:#fff2e8; }
.ix-drop.drag { border-color:var(--primary); background:#fff2e8; }
.ix-hint { display:block; }
.ix-cloud { font-size:34px; line-height:1; }
.ix-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.ix-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.ix-prev { display:none; width:100%; max-height:340px; object-fit:contain; border-radius:12px; }
.ix-drop.has-img { padding:10px; border-style:solid; border-color:#ffdcbf; background:#fff; }
.ix-drop.has-img .ix-hint { display:none; }
.ix-drop.has-img .ix-prev { display:block; }
.ix-del { display:none; position:absolute; right:6px; top:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(232,74,58,.94); color:#fff; font-size:17px; line-height:24px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.ix-drop.has-img .ix-del { display:block; }
.ix-statline { margin-top:10px; }
.ix-badge { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:3px 11px; background:#f3f4f6; color:var(--text2); }
.ix-badge.ok { background:#e8f8ef; color:#10844b; }
.ix-badge.run { background:#fff2e0; color:#b45309; }
.ix-line { min-height:0; height:48px; padding:12px 14px; }
.ix-res { margin-bottom:12px; }
.ix-res-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ix-res-t { font-size:14.5px; font-weight:700; color:var(--text); }
.ix-copy { flex:none; border:0; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; cursor:pointer; }
.ix-copy:active { opacity:.82; }
.ix-stage { border-radius:12px; overflow:hidden; background:#0d0d12; display:flex; align-items:center; justify-content:center; }
.ix-stage img { display:block; width:100%; height:auto; }
.ix-acts { display:flex; flex-direction:column; gap:9px; margin:4px 0 14px; }
.ix-act { width:100%; border:1.5px solid #ffdcbf; border-radius:14px; background:#fff; color:var(--text); font-size:14.5px; font-weight:600; padding:13px 0; cursor:pointer; }
.ix-act.primary { border:0; background:var(--grad); color:#fff; box-shadow:0 8px 18px rgba(249,89,1,.24); }
.ix-act:active { opacity:.86; }
.ix-tip { margin:2px 2px 10px; }
.ix-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.ix-toast.show { opacity:1; transform:translate(-50%,0); }
/* ===== 老照片修复（imgrestore.js）===== */
/* 功能标识色：暖褐/sepia（只用于入口图标，主体仍沿用应用橙色主题，保证一致性） */
.f-sepia { background: linear-gradient(135deg, #f0b27a, #9a3412); }
.rp-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad); color:#fff; margin-bottom:14px; box-shadow:0 8px 20px rgba(249,89,1,.26); }
.rp-banner-ico { font-size:30px; line-height:1; }
.rp-banner-tx { min-width:0; }
.rp-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.rp-banner-s { font-size:12.5px; opacity:.92; margin-top:3px; line-height:1.5; }
.rp-ct { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rp-count { font-size:11.5px; font-weight:600; color:#c2410c; background:#ffedd5; border-radius:999px; padding:3px 10px; }
.rp-drop { position:relative; border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:24px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.rp-drop:active { background:#fff2e8; }
.rp-drop.drag { border-color:var(--primary); background:#fff2e8; }
.rp-hint { display:block; }
.rp-cloud { font-size:34px; line-height:1; }
.rp-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.rp-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.rp-prev { display:none; width:100%; max-height:360px; object-fit:contain; border-radius:12px; }
.rp-drop.has-img { padding:10px; border-style:solid; border-color:#ffdcbf; background:#fff; }
.rp-drop.has-img .rp-hint { display:none; }
.rp-drop.has-img .rp-prev { display:block; }
.rp-del { display:none; position:absolute; right:6px; top:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(232,74,58,.94); color:#fff; font-size:17px; line-height:24px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.rp-drop.has-img .rp-del { display:block; }
.rp-statline { margin-top:10px; }
.rp-badge { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:3px 11px; background:#f3f4f6; color:var(--text2); }
.rp-badge.ok { background:#e8f8ef; color:#10844b; }
.rp-badge.run { background:#fff2e0; color:#b45309; }
.rp-sizehint { margin:8px 2px 0; font-size:12px; color:#b45309; background:#fff7ed; border-radius:10px; padding:8px 11px; line-height:1.5; }
.rp-note { margin:9px 2px 0; font-size:11.5px; color:var(--text2); line-height:1.55; }
.rp-res { margin-bottom:12px; }
.rp-res-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rp-res-t { font-size:14.5px; font-weight:700; color:var(--text); }
.rp-copy { flex:none; border:0; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; cursor:pointer; }
.rp-copy:active { opacity:.82; }
/* ---- 修复前/后 对比滑块（本功能的核心视觉）---- */
.rp-compare { position:relative; width:100%; border-radius:14px; overflow:hidden; background:#0d0d12; cursor:ew-resize; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.rp-cmp-after { display:block; width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; }
.rp-cmp-before { position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
.rp-cmp-before img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.rp-cmp-handle { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(0,0,0,.16), 0 0 12px rgba(0,0,0,.4); pointer-events:none; }
.rp-cmp-bar { position:absolute; top:50%; left:50%; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; background:rgba(255,255,255,.97); box-shadow:0 3px 14px rgba(0,0,0,.38); }
.rp-cmp-bar::after { content:'⇔'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#3a2a1e; }
.rp-cmp-tag { position:absolute; top:10px; font-size:11.5px; font-weight:700; color:#fff; background:rgba(20,14,8,.62); border-radius:999px; padding:3px 10px; pointer-events:none; }
.rp-cmp-tag.l { left:10px; }
.rp-cmp-tag.r { right:10px; }
.rp-cmp-tip { margin:9px 2px 0; font-size:11.5px; color:var(--text2); text-align:center; }
.rp-acts { display:flex; flex-direction:column; gap:9px; margin:4px 0 14px; }
.rp-act { width:100%; border:1.5px solid #ffdcbf; border-radius:14px; background:#fff; color:var(--text); font-size:14.5px; font-weight:600; padding:13px 0; cursor:pointer; }
.rp-act.primary { border:0; background:var(--grad); color:#fff; box-shadow:0 8px 18px rgba(249,89,1,.24); }
.rp-act:active { opacity:.86; }
.rp-tip { margin:2px 2px 10px; }
.rp-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.rp-toast.show { opacity:1; transform:translate(-50%,0); }
/* ==================== 爆款详情图 · 快速长图（df-*） ==================== */
/* 与「精修逐页」共用 #sub-detail 子页，靠顶部模式条切换 */
.df-modes { display:flex; gap:8px; margin:0 0 12px; }
.df-mode { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
padding:11px 8px; border-radius:14px; border:1.5px solid #f0e3d8; background:#fff;
color:var(--text2); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
transition:border-color .15s, background .15s, color .15s; }
.df-mode.on { border-color:var(--primary); background:var(--bg1); color:var(--primary); }
.df-mode-sub { font-size:11px; font-weight:400; opacity:.78; line-height:1.4; text-align:center; }
.df-steps { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.df-step { font-size:12px; padding:4px 11px; border-radius:999px; background:var(--chip-bg); color:var(--text2); }
.df-step.on { background:var(--primary); color:#fff; }
.df-field { margin-bottom:12px; }
.df-field > label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.df-input { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px;
border:1.5px solid #eee3d9; background:#fff; color:var(--text); font-size:14px;
font-family:inherit; outline:none; -webkit-appearance:none; appearance:none; }
.df-input:focus { border-color:var(--primary); }
select.df-input { background:#fff url("data:image/svg+xml;utf8,") no-repeat right 12px center; padding-right:32px; }
.df-tip { display:block; font-size:11px; color:var(--text2); font-weight:400; margin-top:4px; line-height:1.5; }
.df-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.df-palette { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.df-pal-cell { display:flex; flex-direction:column; gap:5px; }
.df-swatch { height:26px; border-radius:8px; border:1px solid rgba(0,0,0,.09); }
.df-pal-input { padding:6px 6px; font-size:12px; text-align:center; }
.df-screen-card { border:1px solid #f2e7dd; border-radius:14px; padding:12px; margin-bottom:12px; background:#fffdfb; }
.df-schead { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px;
padding-bottom:9px; border-bottom:1px dashed #f0e3d8; }
.df-scidx { font-weight:700; color:var(--primary); font-size:14px; }
.df-scrole { font-size:11.5px; padding:2px 9px; border-radius:999px; background:var(--chip-bg); color:var(--primary); }
.df-scpos { font-size:11px; color:var(--text2); margin-left:auto; }
.df-long { display:flex; flex-direction:column; align-items:center; gap:2px;
max-height:440px; overflow-y:auto; background:#f7f3ef; border-radius:14px; padding:10px; margin-bottom:12px; }
.df-long-img { width:100%; max-width:300px; display:block; border-radius:6px; box-shadow:0 1px 6px rgba(0,0,0,.06); }
.df-long-empty { color:var(--text2); font-size:13px; padding:22px 0; }
.df-rc { margin-bottom:12px; }
@media (max-width:520px) {
.df-grid { grid-template-columns:1fr; }
.df-palette { grid-template-columns:repeat(2,1fr); }
.df-mode { font-size:13px; padding:9px 6px; }
}
/* ============================================================
图片压缩（sub-img-compress）· 纯本机压缩
============================================================ */
.ic-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad); color:#fff; margin-bottom:14px; box-shadow:0 8px 20px rgba(249,89,1,.26); }
.ic-banner-ico { font-size:30px; line-height:1; }
.ic-banner-tx { min-width:0; }
.ic-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.ic-banner-s { font-size:12.5px; opacity:.92; margin-top:3px; }
.card-title.ic-ct { display:flex; align-items:center; gap:8px; }
.ic-count { color:var(--primary); font-size:13px; font-weight:700; }
.ic-clear { margin-left:auto; border:none; cursor:pointer; font-family:inherit; background:#fff1f1; color:#e0533d; font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; }
.ic-clear:active { transform:scale(.95); }
/* ---- 选图网格：第一格永远是「＋ 添加图片」 ---- */
.ic-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:12px 0 4px; }
.ic-grid.drag { outline:2px dashed var(--primary); outline-offset:4px; border-radius:14px; }
.ic-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; aspect-ratio:1/1; min-height:92px; border:1.5px dashed #f0c9a8; border-radius:14px; background:#fffaf6; color:var(--primary); font-family:inherit; cursor:pointer; padding:0; }
.ic-add:active { background:#fff2e8; }
.ic-add[disabled] { opacity:.45; border-style:solid; cursor:not-allowed; }
.ic-add-plus { font-size:26px; line-height:1; }
.ic-add-t { font-size:11.5px; font-weight:600; }
.ic-cell { position:relative; aspect-ratio:1/1; min-height:92px; border-radius:14px; overflow:hidden; background:#f6f1ec; }
.ic-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.ic-cell-ph { display:flex; align-items:center; justify-content:center; height:100%; font-size:22px; opacity:.5; }
.ic-cell-badge { position:absolute; top:5px; left:5px; font-size:10px; font-weight:700; line-height:1; padding:4px 7px; border-radius:999px; background:rgba(0,0,0,.5); color:#fff; backdrop-filter:blur(2px); }
.ic-cell-badge.ok { background:#10844b; }
.ic-cell-badge.best { background:rgba(90,80,72,.78); }
.ic-cell-badge.busy { background:#b45309; }
.ic-cell-badge.fail { background:#e0533d; }
.ic-cell-del { position:absolute; top:4px; right:4px; width:21px; height:21px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.58); color:#fff; font-size:14px; line-height:21px; text-align:center; cursor:pointer; }
.ic-cell-save { position:absolute; right:4px; bottom:22px; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:rgba(16,132,75,.94); color:#fff; font-size:12px; line-height:24px; text-align:center; cursor:pointer; }
.ic-cell-save:active, .ic-cell-del:active { transform:scale(.92); }
.ic-cell-bar { position:absolute; left:0; right:0; bottom:0; padding:4px 6px; background:linear-gradient(0deg, rgba(0,0,0,.68), rgba(0,0,0,.32)); color:#fff; font-size:10.5px; line-height:1.35; text-align:center; }
.ic-cell-bar b { font-weight:700; }
.ic-cell-bar b.ok { color:#7ff0b0; }
.ic-cell-pct { display:block; font-size:10px; color:#ffd9a8; }
.ic-cell-pct.dim { color:#d9d2cb; }
.ic-cell.is-busy img { opacity:.55; }
.ic-cell-mask { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.35); }
.ic-spin { width:22px; height:22px; border:2.5px solid rgba(249,89,1,.25); border-top-color:var(--primary); border-radius:50%; animation:ic-spin .7s linear infinite; }
@keyframes ic-spin { to { transform:rotate(360deg); } }
.ic-tip { margin-top:10px; padding:10px 12px; border-radius:12px; background:#fff5ec; color:var(--text2); font-size:12.5px; line-height:1.6; }
/* 四档压成一行（对齐参考产品；默认 .chips 会 flex-wrap 折成 2 行） */
#icLevels { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
#icLevels .chip { padding:9px 4px; font-size:12.5px; text-align:center; white-space:nowrap; }
#icLevels.ic-lock { opacity:.55; pointer-events:none; }
/* ---- 统计条 ---- */
.ic-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:14px 0 0; padding:14px 0; border-radius:16px; background:#e8f8ef; border:1px solid #c6ecd6; }
.ic-stat { text-align:center; }
.ic-stat + .ic-stat { border-left:1px solid #c6ecd6; }
.ic-stat-k { font-size:11.5px; color:#3f7a5c; font-weight:600; }
.ic-stat-v { font-size:16px; font-weight:800; color:#10844b; margin-top:4px; }
.ic-stats-note { margin:8px 2px 0; font-size:12px; color:var(--text2); line-height:1.6; }
.ic-saveall { width:100%; margin-top:10px; border:0; border-radius:14px; background:#10844b; color:#fff; font-family:inherit; font-size:15px; font-weight:700; padding:15px 0; cursor:pointer; box-shadow:0 8px 18px rgba(16,132,75,.22); }
.ic-saveall:active { opacity:.88; }
.ic-note { margin-top:10px; padding:10px 12px; border-radius:12px; background:#e8f8ef; color:#2f6d4f; font-size:12.5px; line-height:1.6; }
.ic-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.ic-toast.show { opacity:1; transform:translate(-50%,0); }
/* ⚠️ 下面三个都是 display:grid/flex，会盖掉 [hidden] 的 UA 样式 →
必须显式兜底，否则弹窗/对比层一进页面就铺满屏幕 */
.ic-stats[hidden], .ic-compare[hidden], .ic-modal[hidden] { display:none !important; }
/* ---- 对比层：按住看原图 ---- */
.ic-compare { position:fixed; inset:0; z-index:1300; background:rgba(14,10,6,.92); display:flex; align-items:center; justify-content:center; padding:14px; }
.ic-cmp-box { position:relative; width:100%; max-width:560px; }
.ic-cmp-x { position:absolute; top:-38px; right:0; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:15px; cursor:pointer; }
.ic-cmp-stage { border-radius:14px; overflow:hidden; background:#0d0d12; display:flex; align-items:center; justify-content:center; max-height:70vh; }
.ic-cmp-stage img { display:block; max-width:100%; max-height:70vh; width:auto; height:auto; }
.ic-cmp-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:12px; color:#fff; }
.ic-cmp-info { font-size:11.5px; line-height:1.5; opacity:.85; }
.ic-cmp-info.right { text-align:right; }
.ic-cmp-hold { border:1.5px solid rgba(255,255,255,.5); border-radius:999px; background:transparent; color:#fff; font-family:inherit; font-size:12.5px; font-weight:600; padding:9px 14px; cursor:pointer; white-space:nowrap; touch-action:none; user-select:none; -webkit-user-select:none; }
.ic-cmp-hold.on { background:#fff; color:#3a2a1e; }
/* ---- 清空确认 ---- */
.ic-modal { position:fixed; inset:0; z-index:1400; background:rgba(20,14,9,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
.ic-modal-box { width:100%; max-width:300px; background:#fff; border-radius:18px; overflow:hidden; text-align:center; box-shadow:0 18px 44px rgba(0,0,0,.22); }
.ic-modal-t { font-size:16px; font-weight:700; color:var(--text); padding:22px 20px 8px; }
.ic-modal-s { font-size:13.5px; color:var(--text2); padding:0 20px 20px; line-height:1.6; }
.ic-modal-acts { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #f0e9e2; }
.ic-modal-btn { border:0; background:transparent; font-family:inherit; font-size:15px; font-weight:600; color:var(--text2); padding:14px 0; cursor:pointer; }
.ic-modal-btn + .ic-modal-btn { border-left:1px solid #f0e9e2; }
.ic-modal-btn.danger { color:var(--primary); }
.ic-modal-btn:active { background:#faf5f0; }
@media (max-width:520px) {
.ic-grid { gap:6px; }
.ic-stat-v { font-size:14.5px; }
.ic-cmp-bar { grid-template-columns:1fr; text-align:center; }
.ic-cmp-info.right { text-align:center; }
}
/* ============================================================================
流光卡片（纯本机 canvas 渲染，零后端）
========================================================================== */
.gc-banner {
display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius);
margin-bottom:14px; color:#fff;
background:linear-gradient(135deg,#8B7CF6 0%,#5B8DEF 45%,#3FC9C0 100%);
box-shadow:0 8px 22px rgba(110,96,240,.28);
}
.gc-banner-ico { font-size:30px; line-height:1; }
.gc-banner-tx { min-width:0; }
.gc-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.gc-banner-s { font-size:12.5px; opacity:.94; margin-top:3px; }
.gc-ct { display:flex; align-items:center; justify-content:space-between; }
.gc-count { font-size:12px; font-weight:500; color:var(--text2); }
.gc-ta {
width:100%; border:1.5px solid #f0e6dc; border-radius:14px; background:#fdfaf7;
font-family:inherit; font-size:14.5px; color:var(--text); padding:11px 13px; line-height:1.6;
resize:none; outline:none; margin-top:10px;
}
.gc-ta:focus { border-color:var(--primary-light); background:#fff; }
.gc-ta-1 { height:46px; }
.gc-ta-2 { height:118px; }
.gc-mini { display:flex; gap:8px; margin-top:9px; }
.gc-mini-btn {
flex:1; border:0; border-radius:10px; background:var(--chip-bg); color:var(--text2);
font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 0; cursor:pointer;
}
.gc-mini-btn:active { opacity:.7; }
.gc-mini-del { color:#c0392b; background:#fdeceb; }
/* 图片比例（5 个按钮必须在 414px 屏一行放下，别再放大 padding/图形） */
.gc-ratios { display:flex; gap:6px; overflow-x:auto; padding:2px 0 4px; justify-content:space-between; }
.gc-ratio {
flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px;
padding:10px 8px 7px; border:1.5px solid #f0e6dc; border-radius:14px; background:#fff;
cursor:pointer; min-width:0;
}
.gc-ratio i { display:block; flex:0 0 auto; border-radius:6px; background:linear-gradient(135deg,#8B7CF6,#4a3fd0); }
.gc-ratio span { font-size:12px; color:var(--text2); font-weight:600; }
.gc-ratio.on { border-color:#6C5CE7; background:#f4f1ff; }
.gc-ratio.on span { color:#5B4BD6; }
/* 流光配色 */
.gc-gradname { font-size:12px; font-weight:600; color:#6C5CE7; }
.gc-grads { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; margin-top:10px; }
.gc-grad {
aspect-ratio:1/1; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
box-shadow:inset 0 0 0 2px #fff;
}
.gc-grad.on { border-color:#3a2a1e; }
.gc-dice {
width:100%; margin-top:12px; border:0; border-radius:12px; background:var(--chip-bg);
color:var(--primary); font-family:inherit; font-size:13px; font-weight:700; padding:10px 0; cursor:pointer;
}
.gc-dice:active { opacity:.7; }
/* 设置行 */
.gc-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.gc-row-col { flex-direction:column; align-items:stretch; gap:9px; }
.gc-row-top { margin-top:14px; }
.gc-lb { flex:0 0 auto; font-size:13px; color:var(--text2); font-weight:600; min-width:52px; }
.gc-range {
flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
background:#f0e6dc; outline:none;
}
.gc-range::-webkit-slider-thumb {
-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
background:var(--grad); box-shadow:0 2px 6px rgba(249,89,1,.35); cursor:pointer;
}
.gc-val { flex:0 0 auto; min-width:30px; text-align:right; font-size:13.5px; font-weight:700; color:var(--primary); }
.gc-seg { flex:1; display:flex; flex-wrap:wrap; gap:6px; }
.gc-seg-b {
border:1.5px solid #f0e6dc; background:#fff; color:var(--text2); font-family:inherit;
font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:999px; cursor:pointer;
}
.gc-seg-b.on { border-color:#6C5CE7; background:#f4f1ff; color:#5B4BD6; }
.gc-colors { display:flex; flex-wrap:wrap; gap:8px; }
.gc-color { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; position:relative; }
.gc-color.on::after {
content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.gc-inp {
flex:1; border:1.5px solid #f0e6dc; border-radius:11px; background:#fdfaf7; font-family:inherit;
font-size:13.5px; color:var(--text); padding:9px 12px; outline:none;
}
.gc-inp:focus { border-color:var(--primary-light); background:#fff; }
.gc-switch { position:relative; display:inline-block; width:46px; height:26px; flex:0 0 auto; }
.gc-switch input { opacity:0; width:0; height:0; }
.gc-switch i { position:absolute; inset:0; background:#e6dcd2; border-radius:999px; transition:.18s; }
.gc-switch i::after {
content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%;
background:#fff; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.gc-switch input:checked + i { background:#6C5CE7; }
.gc-switch input:checked + i::after { transform:translateX(20px); }
/* 结果 */
.gc-dimtxt { font-size:12px; color:var(--text2); font-weight:500; }
.gc-prev-wrap { display:flex; justify-content:center; padding:8px 0 14px; }
.gc-preview {
max-width:100%; border-radius:12px; cursor:zoom-in;
box-shadow:0 10px 26px rgba(80,60,140,.22);
}
#gcCanvas { display:none; }
@media (max-width:380px) {
.gc-grads { gap:5px; }
.gc-lb { min-width:46px; }
}
/* ============================================================
图片变高清（sub-img-upscale）· gpt-image-2 图生图
设计意图：这一块要比其它子页「高一档」——深色微光 hero + 预设卡 + 三段式
+ 可拖拽的 before/after 对比滑块。暗底用 #191218 系（偏暖黑，压得住品牌橙）。
============================================================ */
/* ---------- 沉浸式 hero ---------- */
.uh-hero {
position:relative; overflow:hidden; margin-bottom:14px; padding:22px 20px 20px;
border-radius:var(--radius);
background:
radial-gradient(120% 90% at 88% -10%, rgba(255,136,69,.55) 0%, rgba(249,68,0,.16) 42%, rgba(0,0,0,0) 70%),
linear-gradient(160deg, #241a26 0%, #17121a 55%, #120e14 100%);
box-shadow:0 14px 30px rgba(38,20,12,.28);
color:#fff;
}
.uh-hero-glow {
position:absolute; right:-46px; top:-46px; width:180px; height:180px; border-radius:50%;
background:radial-gradient(circle, rgba(255,150,80,.5) 0%, rgba(255,150,80,0) 70%);
pointer-events:none;
}
.uh-hero-tag {
position:relative; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px;
padding:4px 10px; border-radius:999px; color:#ffd9bd;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.uh-hero-t {
position:relative; margin-top:10px; font-size:24px; font-weight:800; letter-spacing:.5px; line-height:1.28;
background:linear-gradient(92deg, #fff 0%, #ffd7b8 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.uh-hero-s { position:relative; margin-top:8px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.72); }
.uh-hero-flow { position:relative; display:flex; align-items:center; gap:7px; margin-top:16px; }
.uh-fchip {
font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.78);
}
.uh-fchip.on { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 6px 14px rgba(249,89,1,.4); }
.uh-hero-flow i { font-style:normal; font-size:12px; color:rgba(255,255,255,.35); }
/* ---------- 上传区 ---------- */
.card-title.uh-ct { display:flex; align-items:center; gap:8px; }
.uh-meta { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--text2); background:#f5efe9; border-radius:999px; padding:4px 10px; }
.uh-meta.on { color:var(--primary); background:#fff1e7; }
.uh-drop { position:relative; border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:26px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.uh-drop:active { background:#fff2e8; }
.uh-drop.drag { border-color:var(--primary); background:#fff2e8; }
.uh-hint { display:block; }
.uh-hint-ico { font-size:30px; line-height:1; }
.uh-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.uh-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.uh-prev { display:none; width:100%; max-height:360px; object-fit:contain; border-radius:12px; }
.uh-drop.has-img { padding:10px; border-style:solid; border-color:#ffdcbf; background:#fff; }
.uh-drop.has-img .uh-hint { display:none; }
.uh-drop.has-img .uh-prev { display:block; }
.uh-del { display:none; position:absolute; right:6px; top:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(232,74,58,.94); color:#fff; font-size:17px; line-height:24px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.uh-drop.has-img .uh-del { display:block; }
/* ---------- 清晰度体检 ---------- */
.uh-diag { margin-top:12px; padding:12px 13px; border-radius:14px; background:#faf6f2; border:1px solid #f1e7dd; }
.uh-diag-h { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text2); }
.uh-diag-h b { font-size:12px; font-weight:700; }
.uh-diag-bar { height:6px; border-radius:999px; background:#efe6dd; overflow:hidden; margin-top:8px; }
.uh-diag-bar i { display:block; height:100%; width:0; border-radius:999px; background:var(--primary); transition:width .45s ease, background .2s; }
.uh-diag-tx { margin-top:8px; font-size:12px; line-height:1.65; color:var(--text2); }
/* ---------- 场景预设卡 ---------- */
.uh-scenes { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.uh-scene {
display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
padding:11px 12px; border-radius:14px; cursor:pointer; font-family:inherit;
border:1.5px solid #f0e6dc; background:#fdfaf7;
transition:border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.uh-scene b { font-size:13.5px; font-weight:700; color:var(--text); }
.uh-scene span { font-size:11px; color:var(--text2); line-height:1.4; }
.uh-scene.on {
border-color:var(--primary);
background:linear-gradient(150deg, #fff6ef 0%, #fff1e7 100%);
box-shadow:0 6px 16px rgba(249,89,1,.14);
}
.uh-scene.on b { color:var(--primary); }
.uh-scene:active { transform:scale(.985); }
/* ---------- 强度：三段式 + 滑动 ink ---------- */
.uh-seg { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); padding:4px; border-radius:14px; background:#f3ece5; }
.uh-seg-ink {
position:absolute; z-index:0; top:4px; left:4px; width:calc((100% - 8px) / 3); height:calc(100% - 8px);
border-radius:11px; background:var(--grad); box-shadow:0 6px 14px rgba(249,89,1,.28);
transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.uh-seg-i {
position:relative; z-index:1; border:0; background:transparent; cursor:pointer; font-family:inherit;
font-size:13px; font-weight:600; color:var(--text2); padding:10px 2px; border-radius:11px; transition:color .18s;
}
.uh-seg-i.on { color:#fff; }
.uh-tip { margin-top:10px; padding:10px 12px; border-radius:12px; background:#fff5ec; color:var(--text2); font-size:12.5px; line-height:1.6; }
/* ---------- 对比滑块 ---------- */
.uh-cmp {
position:relative; overflow:hidden; border-radius:14px; background:#0d0d12;
--uh-p:50%; touch-action:pan-y; cursor:ew-resize;
user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.uh-cmp.dragging { cursor:grabbing; }
.uh-cmp-a { display:block; width:100%; height:auto; }
.uh-cmp-b { position:absolute; top:0; left:0; width:100%; height:auto; clip-path:inset(0 0 0 var(--uh-p)); }
.uh-cmp-line { position:absolute; top:0; bottom:0; left:var(--uh-p); width:2px; margin-left:-1px; background:rgba(255,255,255,.95); box-shadow:0 0 10px rgba(0,0,0,.45); pointer-events:none; }
.uh-cmp-line i {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.96); color:#3a2a1e;
font-style:normal; font-size:14px; line-height:34px; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.uh-cmp-tag {
position:absolute; bottom:8px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px;
color:#fff; background:rgba(0,0,0,.55); pointer-events:none;
}
.uh-cmp-tag.l { left:8px; }
.uh-cmp-tag.r { right:8px; background:rgba(16,132,75,.9); }
.uh-ok { margin-left:auto; font-size:11.5px; font-weight:700; color:#10844b; background:#e8f8ef; border-radius:999px; padding:4px 10px; }
.uh-dl { border:0; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; cursor:pointer; }
.uh-dl:active { opacity:.82; }
.uh-rmeta { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.uh-rm { font-size:11.5px; color:var(--text2); background:#f7f1eb; border-radius:999px; padding:5px 11px; }
.uh-rm b { color:var(--text); font-weight:700; margin-right:4px; }
.uh-acts { display:flex; flex-direction:column; gap:9px; margin:4px 0 14px; }
.uh-act { width:100%; border:1.5px solid #ffdcbf; border-radius:14px; background:#fff; color:var(--text); font-family:inherit; font-size:14.5px; font-weight:600; padding:13px 0; cursor:pointer; }
.uh-act.primary { border:0; background:var(--grad); color:#fff; box-shadow:0 8px 18px rgba(249,89,1,.24); }
.uh-act:active { opacity:.86; }
.uh-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.uh-toast.show { opacity:1; transform:translate(-50%,0); }
#uhResult[hidden], .uh-diag[hidden] { display:none !important; }
@media (max-width:380px) {
.uh-hero-t { font-size:21px; }
.uh-scenes { grid-template-columns:1fr 1fr; gap:6px; }
.uh-scene { padding:9px 10px; }
.uh-seg-i { font-size:12px; }
}
/* ============================================================
智能抠图（sub-img-matting）· 真透明底 + 本机合成底色
与「图片变高清」区分：主色走靛紫→青（对应 ✂️ 的青色调），
核心视觉是**棋盘格**——透明底必须"看得见"，否则用户以为没抠干净。
============================================================ */
.um-hero {
position:relative; overflow:hidden; margin-bottom:14px; padding:22px 20px 20px;
border-radius:var(--radius);
background:
radial-gradient(120% 95% at 86% -12%, rgba(124,58,237,.60) 0%, rgba(56,189,248,.22) 40%, rgba(0,0,0,0) 72%),
linear-gradient(160deg, #1a1430 0%, #141026 55%, #0d0a17 100%);
box-shadow:0 14px 30px rgba(24,16,44,.30);
color:#fff;
}
.um-hero-glow {
position:absolute; right:-40px; top:-50px; width:190px; height:190px; border-radius:50%;
background:radial-gradient(circle, rgba(139,92,246,.55) 0%, rgba(139,92,246,0) 70%);
pointer-events:none;
}
.um-hero-tag {
position:relative; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px;
padding:4px 10px; border-radius:999px; color:#dcd2ff;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.um-hero-t {
position:relative; margin-top:10px; font-size:24px; font-weight:800; letter-spacing:.5px; line-height:1.28;
background:linear-gradient(92deg, #fff 0%, #c9b6ff 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.um-hero-s { position:relative; margin-top:8px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.72); }
.um-hero-flow { position:relative; display:flex; align-items:center; gap:7px; margin-top:16px; }
.um-fchip {
font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.78);
}
.um-fchip.on { background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%); border-color:transparent; color:#fff; box-shadow:0 6px 14px rgba(99,102,241,.45); }
.um-hero-flow i { font-style:normal; font-size:12px; color:rgba(255,255,255,.35); }
.card-title.um-ct { display:flex; align-items:center; gap:8px; }
.um-meta { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--text2); background:#f5efe9; border-radius:999px; padding:4px 10px; }
.um-meta.on { color:#6d28d9; background:#f3eeff; }
.um-drop { position:relative; border:1.5px dashed #d8c9ef; border-radius:16px; background:#fdfbff; padding:26px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.um-drop:active { background:#f6f1ff; }
.um-drop.drag { border-color:#8b5cf6; background:#f6f1ff; }
.um-hint { display:block; }
.um-hint-ico { font-size:30px; line-height:1; }
.um-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.um-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.um-prev { display:none; width:100%; max-height:360px; object-fit:contain; border-radius:12px; }
.um-drop.has-img { padding:10px; border-style:solid; border-color:#ddd0f5; background:#fff; }
.um-drop.has-img .um-hint { display:none; }
.um-drop.has-img .um-prev { display:block; }
.um-del { display:none; position:absolute; right:6px; top:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(232,74,58,.94); color:#fff; font-size:17px; line-height:24px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.um-drop.has-img .um-del { display:block; }
/* ---- 主体类型预设卡 ---- */
.um-scenes { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.um-scene {
display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
padding:11px 12px; border-radius:14px; cursor:pointer; font-family:inherit;
border:1.5px solid #ece8f5; background:#fdfcff;
transition:border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.um-scene b { font-size:13.5px; font-weight:700; color:var(--text); }
.um-scene span { font-size:11px; color:var(--text2); line-height:1.4; }
.um-scene.on {
border-color:#8b5cf6;
background:linear-gradient(150deg, #f8f5ff 0%, #f1ebff 100%);
box-shadow:0 6px 16px rgba(139,92,246,.16);
}
.um-scene.on b { color:#6d28d9; }
.um-scene:active { transform:scale(.985); }
/* ---- 结果舞台：棋盘格 = 透明 ---- */
.um-stage {
border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center;
padding:10px; background-color:#fff;
background-image:
linear-gradient(45deg, #dedede 25%, transparent 25%, transparent 75%, #dedede 75%),
linear-gradient(45deg, #dedede 25%, transparent 25%, transparent 75%, #dedede 75%);
background-size:20px 20px; background-position:0 0, 10px 10px;
}
.um-stage img { display:block; max-width:100%; max-height:56vh; width:auto; height:auto; }
/* ---- 底色调色板 ---- */
.um-bgs { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.um-bg {
position:relative; display:inline-flex; align-items:center; gap:7px;
padding:7px 13px 7px 10px; border-radius:999px; cursor:pointer; font-family:inherit;
border:1.5px solid #ece8f5; background:#fdfcff; font-size:12.5px; font-weight:600; color:var(--text2);
transition:border-color .15s, color .15s, box-shadow .15s;
}
.um-bg::before {
content:''; width:15px; height:15px; border-radius:5px; border:1px solid rgba(0,0,0,.14);
background:var(--c, #fff); flex:none;
}
.um-bg[data-v="none"]::before {
background-color:#fff;
background-image:
linear-gradient(45deg, #c2c2c2 25%, transparent 25%, transparent 75%, #c2c2c2 75%),
linear-gradient(45deg, #c2c2c2 25%, transparent 25%, transparent 75%, #c2c2c2 75%);
background-size:8px 8px; background-position:0 0, 4px 4px;
}
.um-bg.on { border-color:var(--primary); color:var(--primary); box-shadow:0 4px 12px rgba(249,89,1,.14); }
.um-bg-check { display:none; }
.um-bg-custom { padding-left:10px; }
.um-bg-custom input[type="color"] {
position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0;
}
.um-bg-custom::before { background:var(--c, #7c3aed); }
.um-clean { display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:12.5px; color:var(--text2); line-height:1.6; cursor:pointer; }
.um-clean input { margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--primary); }
.um-ok { margin-left:auto; font-size:11.5px; font-weight:700; color:#6d28d9; background:#f3eeff; border-radius:999px; padding:4px 10px; }
.um-dl { border:0; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; cursor:pointer; }
.um-dl:active { opacity:.82; }
.um-rmeta { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.um-rm { font-size:11.5px; color:var(--text2); background:#f7f1eb; border-radius:999px; padding:5px 11px; }
.um-rm b { color:var(--text); font-weight:700; margin-right:4px; }
.um-acts2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.um-act2 { width:100%; border:1.5px solid #e6ddf5; border-radius:13px; background:#fff; color:var(--text); font-family:inherit; font-size:13px; font-weight:600; padding:12px 4px; cursor:pointer; }
.um-act2:active { opacity:.85; }
.um-act2[disabled] { opacity:.45; cursor:not-allowed; }
/* 两个下载出口并排放在底部 —— 用户反馈"右上角那个下载 PNG 找了半天没找到"，
所以下载入口统一集中在结果区底部，PNG / JPG 左右并排，点哪个都行 */
.um-dlrow { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.um-dl2 {
width:100%; border:1.5px solid #e6ddf5; border-radius:13px; background:#fff; color:var(--text);
font-family:inherit; font-size:14px; font-weight:700; padding:13px 4px; cursor:pointer;
}
.um-dl2.primary { border:0; background:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(249,89,1,.20); }
.um-dl2:active { opacity:.85; }
.um-note { margin-top:10px; padding:10px 12px; border-radius:12px; background:#f5f1ff; color:#4c3a86; font-size:12.5px; line-height:1.6; }
.um-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(20,16,32,.92); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.um-toast.show { opacity:1; transform:translate(-50%,0); }
#umResult[hidden] { display:none !important; }
/* ============================================================
智能抠图 · 剪裁面板（抠完之后那一步）
全部本机 canvas 完成，不调模型、不再扣额度。
参考 iOS 系统「抠图」的后续剪裁：棋盘格 + 可拖拽框 + 实时像素读数 + 比例/尺寸/留白。
============================================================ */
.um-cropstage { position:relative; overflow:hidden; }
.um-cropstage img { position:relative; z-index:1; }
.um-cropbox {
position:absolute; z-index:2; box-sizing:border-box;
border:2px solid var(--primary);
box-shadow:0 0 0 9999px rgba(0,0,0,.45); /* 框外压暗，靠 stage 的 overflow 裁掉 */
cursor:move; touch-action:none;
user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.um-cropbox[hidden] { display:none !important; }
.um-grid {
position:absolute; inset:0; pointer-events:none;
background-image:
repeating-linear-gradient(to right, rgba(255,255,255,.34) 0 1px, transparent 1px 33.333%),
repeating-linear-gradient(to bottom, rgba(255,255,255,.34) 0 1px, transparent 1px 33.333%);
}
/* 四角 L 型手柄（视觉小、命中大 → 用 padding 撑命中区） */
.um-h { position:absolute; width:26px; height:26px; box-sizing:border-box; z-index:3; }
.um-h::before { content:''; position:absolute; width:18px; height:18px; border:0 solid #fff; }
.um-h.nw { left:-13px; top:-13px; cursor:nwse-resize; }
.um-h.nw::before { left:13px; top:13px; border-left-width:3px; border-top-width:3px; }
.um-h.ne { right:-13px; top:-13px; cursor:nesw-resize; }
.um-h.ne::before { right:13px; top:13px; border-right-width:3px; border-top-width:3px; }
.um-h.sw { left:-13px; bottom:-13px; cursor:nesw-resize; }
.um-h.sw::before { left:13px; bottom:13px; border-left-width:3px; border-bottom-width:3px; }
.um-h.se { right:-13px; bottom:-13px; cursor:nwse-resize; }
.um-h.se::before { right:13px; bottom:13px; border-right-width:3px; border-bottom-width:3px; }
/* 四边中点手柄 */
.um-h.n, .um-h.s { left:50%; margin-left:-13px; height:14px; cursor:ns-resize; }
.um-h.n { top:-7px; } .um-h.s { bottom:-7px; }
.um-h.w, .um-h.e { top:50%; margin-top:-13px; width:14px; cursor:ew-resize; }
.um-h.w { left:-7px; } .um-h.e { right:-7px; }
.um-h.n::before, .um-h.s::before, .um-h.w::before, .um-h.e::before {
width:22px; height:3px; border-radius:2px; background:#fff; left:50%; top:50%;
transform:translate(-50%,-50%); border:0;
}
.um-h.w::before, .um-h.e::before { width:3px; height:22px; }
.um-cropsize {
position:absolute; z-index:4; left:50%; top:12px; transform:translateX(-50%);
background:rgba(20,16,32,.86); color:#fff; font-size:11.5px; font-weight:600;
padding:5px 12px; border-radius:999px; pointer-events:none; letter-spacing:.3px;
}
.um-cropsize[hidden] { display:none !important; }
/* ---- 三段式 tab ---- */
.um-croppanel { margin-top:14px; }
.um-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #efe8f7; }
.um-tab {
position:relative; border:0; background:transparent; font-family:inherit; cursor:pointer;
font-size:13.5px; font-weight:600; color:var(--text2); padding:11px 0;
}
.um-tab.on { color:#6d28d9; }
.um-tab.on::after {
content:''; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
width:42%; height:2.5px; border-radius:2px; background:#8b5cf6;
}
.um-pane { display:none; padding-top:12px; }
.um-pane.on { display:block; }
.um-panehint { margin-top:10px; font-size:12px; color:var(--text2); line-height:1.6; }
/* ---- 比例 / 留白 按钮 ---- */
.um-ratios { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.um-ratios button {
border:1.5px solid #ece6f6; background:#fdfcff; border-radius:11px; cursor:pointer;
font-family:inherit; font-size:12.5px; font-weight:600; color:var(--text2); padding:10px 0;
transition:border-color .15s, background .15s, color .15s;
}
.um-ratios button.on { border-color:#8b5cf6; background:#f6f2ff; color:#6d28d9; box-shadow:0 4px 12px rgba(139,92,246,.16); }
.um-ratios button:active { transform:scale(.97); }
/* ---- 尺寸预设列表 ---- */
.um-sizes { display:flex; flex-direction:column; }
.um-size {
display:flex; align-items:center; gap:10px; width:100%; text-align:left;
border:0; border-bottom:1px solid #f4eefb; background:transparent; cursor:pointer;
font-family:inherit; padding:12px 4px; transition:background .15s;
}
.um-size:last-child { border-bottom:0; }
.um-size:active { background:#faf7ff; }
.um-size.on { background:#f8f5ff; }
.um-size i {
flex:none; width:16px; height:16px; border-radius:50%; border:1.5px solid #d6cbee; box-sizing:border-box;
}
.um-size.on i { border-color:#8b5cf6; border-width:5px; }
.um-size .t { flex:1; min-width:0; }
.um-size .t b { display:block; font-size:13px; font-weight:600; color:var(--text); }
.um-size .t span { font-size:11px; color:var(--text2); }
.um-size .px { flex:none; font-size:11.5px; font-weight:600; color:var(--text2); font-variant-numeric:tabular-nums; }
.um-size.on .px { color:#6d28d9; }
/* ---- 工具区 ---- */
.um-tools { margin-top:14px; padding-top:13px; border-top:1px solid #efe8f7; }
.um-smart { display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.um-smart input { flex:none; width:17px; height:17px; margin-top:2px; accent-color:#8b5cf6; }
.um-smart span { font-size:12.5px; color:var(--text2); line-height:1.5; }
.um-smart b { display:block; font-size:13px; color:var(--text); font-weight:700; margin-bottom:2px; }
.um-toolbtns { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px; }
.um-toolbtns button {
border:1.5px solid #ece6f6; background:#fdfcff; border-radius:11px; cursor:pointer;
font-family:inherit; font-size:12px; font-weight:600; color:var(--text); padding:11px 2px;
}
.um-toolbtns button:active { opacity:.8; transform:scale(.97); }
.um-cropnote { margin-top:12px; padding:10px 12px; border-radius:12px; background:#f7f4ff; color:#4c3a86; font-size:12px; line-height:1.6; }
@media (max-width:380px) {
.um-ratios { gap:5px; }
.um-toolbtns button { font-size:11px; }
}
@media (max-width:380px) {
.um-hero-t { font-size:21px; }
.um-scenes { gap:6px; }
.um-scene { padding:9px 10px; }
.um-acts2 { grid-template-columns:1fr; }
.um-dlrow { grid-template-columns:1fr; }
}
/* ============================================================
一键详情图（od-*）
与站点橙色主题区分：这个功能卖的是「电商详情页」，用**深墨 + 金**
做主视觉，更像品牌画册页，避免和其它功能卡视觉同质。
============================================================ */
/* 明亮的金属金（刻意区别于 f-yellow 的橙琥珀与 f-brown 的哑棕，做出品牌画册的质感） */
.f-gold { background: linear-gradient(135deg, #ffe9a8, #b8860b); }
.od-banner { display:flex; align-items:center; gap:12px; padding:17px 18px; border-radius:var(--radius);
background:linear-gradient(135deg, #2b221b 0%, #4b3a29 52%, #8a6a3d 100%); color:#fff;
margin-bottom:14px; box-shadow:0 10px 24px rgba(43,34,27,.32); }
.od-banner-ico { font-size:30px; line-height:1; }
.od-banner-tx { min-width:0; }
.od-banner-t { font-size:15.5px; font-weight:800; letter-spacing:.3px; }
.od-banner-s { font-size:12px; opacity:.82; margin-top:4px; line-height:1.45; }
.od-ct { display:flex; align-items:center; justify-content:space-between; }
.od-count { font-size:11.5px; font-weight:600; color:#a9762c; background:#fdf4e6;
border:1px solid #f0dcbb; border-radius:999px; padding:2px 9px; }
.od-drop { position:relative; border:1.5px dashed #e6d4bb; border-radius:16px; background:#fffdf9;
padding:22px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.od-drop.drag { border-color:#a9762c; background:#fdf7ee; }
.od-drop.has-img { padding:12px; }
.od-drop.has-img .od-hint { display:none; }
.od-hint { pointer-events:none; }
.od-cloud { font-size:34px; line-height:1; margin-bottom:8px; }
.od-hint-t { font-size:14.5px; font-weight:700; color:var(--text); }
.od-hint-s { font-size:12px; color:var(--text2); margin-top:5px; line-height:1.5; }
.od-thumbs { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.od-thumbs:empty { display:none; }
.od-imghint { font-size:12px; color:var(--text2); margin:10px 0 0; line-height:1.5; }
.od-note { font-size:12px; color:var(--text2); margin:9px 0 0; line-height:1.5; }
.od-line-input { width:100%; box-sizing:border-box; }
/* —— 进度（单张实测 ~53s，必须让用户知道 AI 在干活）—— */
.od-progress { background:#fffaf3; border:1px solid #f2e3ce; border-radius:14px;
padding:13px 15px; margin-bottom:13px; }
.od-progress-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.od-progress-t { font-size:13.5px; font-weight:600; color:var(--text); }
.od-progress-time { font-size:12.5px; font-weight:700; color:#a9762c; font-variant-numeric:tabular-nums; }
.od-barwrap { height:5px; border-radius:999px; background:#f0e4d3; overflow:hidden; }
.od-bar { height:100%; width:0; border-radius:999px; transition:width .9s linear;
background:linear-gradient(90deg, #e8c07a, #a9762c); }
/* —— 结果网格 —— */
.od-grid { display:flex; flex-direction:column; gap:14px; }
.od-card { background:#fff; border:1px solid #efe6db; border-radius:16px; overflow:hidden;
box-shadow:0 4px 14px rgba(58,42,30,.06); }
.od-card.done { border-color:#eadfc9; }
.od-stage { min-height:150px; display:flex; align-items:center; justify-content:center;
background:#fbf8f4; }
.od-img { width:100%; display:block; cursor:zoom-in; }
.od-loading { display:flex; flex-direction:column; align-items:center; gap:9px; padding:44px 0; }
.od-spin { width:26px; height:26px; border-radius:50%; border:3px solid #f0e4d3;
border-top-color:#a9762c; animation:odSpin .8s linear infinite; }
@keyframes odSpin { to { transform:rotate(360deg); } }
.od-lt { font-size:13.5px; font-weight:600; color:var(--text); }
.od-ls { font-size:11.5px; color:var(--text2); }
.od-fail { display:flex; flex-direction:column; align-items:center; gap:7px; padding:38px 16px; text-align:center; }
.od-fi { font-size:24px; }
.od-ft { font-size:13px; color:#b4453a; line-height:1.5; }
.od-fs { font-size:11.5px; color:var(--text2); }
.od-act { display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid #f4ece1; }
.od-no { font-size:12px; color:var(--text2); margin-right:auto; }
.od-act .tool-btn { flex:none; }
.od-acts { display:flex; flex-direction:column; gap:9px; margin:14px 0; }
.od-act.primary, .od-acts .od-act { width:100%; border:1.5px solid #e9dcc7; border-radius:14px;
background:#fff; color:var(--text); font-size:14.5px; font-weight:600; padding:13px 0; cursor:pointer; }
.od-acts .od-act.primary { border:none; background:linear-gradient(135deg, #c79a4e, #8a6a2d);
color:#fff; box-shadow:0 8px 18px rgba(138,106,45,.28); }
.od-tip { margin-bottom:6px; }
.od-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px);
background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px;
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200;
max-width:80vw; text-align:center; }
.od-toast.show { opacity:1; transform:translate(-50%,0); }
.od-lightbox { position:fixed; inset:0; background:rgba(20,14,10,.94); z-index:1300;
display:none; align-items:center; justify-content:center; padding:14px; }
.od-lightbox.show { display:flex; }
.od-lightbox img { max-width:100%; max-height:100%; border-radius:10px; object-fit:contain; }
/* ===================== AI写真（sub-portrait） ===================== */
/* hero：整站是浅色橙主题，写真用一块深色渐变 + 橙色辉光做"高级感"的对比锚点 */
.pt-hero { position:relative; overflow:hidden; border-radius:22px; padding:20px 18px 18px; margin-bottom:14px;
background:radial-gradient(120% 140% at 88% 0%, rgba(255,122,46,.42) 0%, rgba(255,122,46,0) 55%),
linear-gradient(150deg, #2a1a12 0%, #1a1119 55%, #241720 100%);
color:#fff; box-shadow:0 12px 28px rgba(58,32,16,.28); }
.pt-hero::after { content:''; position:absolute; right:-38px; top:-46px; width:150px; height:150px;
border-radius:50%; background:radial-gradient(circle, rgba(255,150,80,.5), rgba(255,150,80,0) 68%); }
.pt-hero-tag { position:relative; display:inline-block; font-size:11px; letter-spacing:.6px; font-weight:600;
color:#ffd9bd; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
border-radius:999px; padding:4px 11px; }
.pt-hero-t { position:relative; font-size:23px; font-weight:800; letter-spacing:1px; margin-top:11px; }
.pt-hero-s { position:relative; font-size:12.5px; line-height:1.65; color:rgba(255,255,255,.78); margin-top:7px; }
.pt-hero-meta { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.pt-hero-meta span { font-size:11.5px; color:#ffe6d5; background:rgba(255,255,255,.1);
border-radius:999px; padding:5px 11px; }
.pt-ct { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pt-count { font-size:11.5px; font-weight:600; color:#c2410c; background:#ffedd5; border-radius:999px; padding:3px 10px; }
.pt-note { font-size:12px; color:var(--text2); line-height:1.6; margin-top:9px; }
/* 上传位 */
.pt-slots { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:2px; }
.pt-slot { position:relative; aspect-ratio:3 / 4; border:1.5px dashed #f0c9a8; border-radius:16px;
background:#fffaf6; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; cursor:pointer; transition:background .15s, border-color .15s; overflow:hidden; }
.pt-slot:active { background:#fff2e8; border-color:var(--primary); }
.pt-slot.has { border-style:solid; border-color:#ffdcbf; background:#fff; padding:0; }
.pt-slot.has img { width:100%; height:100%; object-fit:cover; display:block; }
.pt-slot-ico { font-size:24px; color:#e6a878; line-height:1; }
.pt-slot-label { font-size:11.5px; color:var(--text2); font-weight:600; }
.pt-slot.has .pt-slot-label { display:none; }
.pt-slot-del { position:absolute; right:6px; top:6px; width:22px; height:22px; border:none; border-radius:50%;
background:rgba(28,20,14,.62); color:#fff; font-size:14px; line-height:22px; padding:0; cursor:pointer; }
.pt-slot-add { border-style:dashed; }
/* 光影卡片（整站 chips 是 flex，这里用两列卡片） */
.chips.pt-lights { display:grid; grid-template-columns:repeat(2, 1fr); gap:9px; }
.chip.pt-light { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
width:100%; padding:11px 12px; border-radius:14px; text-align:left; line-height:1.35; }
.chip.pt-light .pt-light-ico { font-size:17px; line-height:1.1; }
.chip.pt-light .pt-light-t { font-size:13px; font-weight:700; }
.chip.pt-light .pt-light-s { font-size:11px; opacity:.72; }
.chip.pt-light.active .pt-light-s { opacity:.95; }
.chip .pt-chip-hint { display:block; font-size:10.5px; font-style:normal; opacity:.6; margin-top:2px; }
.pt-switch { display:none; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--text2); cursor:pointer; }
.pt-switch input { width:17px; height:17px; accent-color:var(--primary); }
.pt-counter { text-align:right; font-size:11.5px; color:var(--text2); margin-top:5px; }
/* 结果区 */
.pt-results { margin-top:4px; }
.pt-res-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:16px 2px 10px; }
.pt-res-t { font-size:15px; font-weight:800; }
.pt-res-s { font-size:11.5px; color:var(--text2); }
.pt-res-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:11px; }
.pt-res-card { position:relative; border-radius:18px; overflow:hidden; background:#fff;
border:1px solid #ffe6d5; box-shadow:0 6px 16px rgba(120,72,40,.08); aspect-ratio:3 / 4; }
.pt-res-tag { position:absolute; left:8px; top:8px; z-index:2; font-size:10.5px; font-weight:600;
color:#fff; background:rgba(28,20,14,.55); backdrop-filter:blur(6px); border-radius:999px; padding:3px 9px; }
.pt-res-img { width:100%; height:100%; object-fit:cover; display:block; }
.pt-res-bar { position:absolute; left:0; right:0; bottom:0; display:flex; gap:7px; padding:9px 9px 10px;
background:linear-gradient(180deg, rgba(20,14,10,0) 0%, rgba(20,14,10,.62) 62%); }
.pt-mini { flex:1; border:none; border-radius:10px; padding:7px 0; font-size:12px; font-weight:600;
background:rgba(255,255,255,.92); color:#3a2a1e; cursor:pointer; }
.pt-mini:active { background:#fff; }
.pt-res-loading, .pt-res-fail { position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:9px; text-align:center; padding:14px;
background:linear-gradient(160deg, #fff8f2, #fff1e7); }
.pt-res-loading-t { font-size:13px; font-weight:700; }
.pt-res-loading-s { font-size:11px; color:var(--text2); }
.pt-res-fail-ico { font-size:22px; }
.pt-res-fail-t { font-size:13px; font-weight:700; }
.pt-res-fail-s { font-size:11px; color:var(--text2); line-height:1.5; }
.pt-mini-retry { flex:none; padding:7px 16px; background:var(--grad); color:#fff; }
.pt-res-card.failed { border-color:#ffd9d9; }
.pt-spin { width:24px; height:24px; border-radius:50%; border:2.5px solid #ffd9bd;
border-top-color:var(--primary); animation:pt-spin 0.8s linear infinite; }
@keyframes pt-spin { to { transform:rotate(360deg); } }
.pt-toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,14px);
background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px;
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200;
max-width:80vw; text-align:center; }
.pt-toast.on { opacity:1; transform:translate(-50%,0); }
@media (max-width:360px) {
.pt-slots { grid-template-columns:repeat(2, 1fr); }
.pt-hero-t { font-size:20px; }
}
/* ==========================================================================
直播话术生成（ls-*）
一个关键词 → 一整套分章节的直播间话术稿。
视觉基调：深墨 + 玫瑰金（"直播间"的热度），与全站的暖橙主色刻意区分开，
但同样落在暖色系里，不跳。容器全部沿用 .card / .card-title，只加内容层。
========================================================================== */
.ls-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 20px 20px;
margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, #241a1f 0%, #3d1f2b 46%, #7a2f36 100%); }
.ls-hero-glow { position: absolute; right: -70px; top: -70px; width: 230px; height: 230px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 186, 128, .34), transparent 70%); pointer-events: none; }
.ls-hero-tag { display: inline-block; font-size: 11px; letter-spacing: .16em; color: #ffd9a8;
border: 1px solid rgba(255, 217, 168, .40); border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; }
.ls-hero-t { font-size: 27px; font-weight: 800; line-height: 1.28; }
.ls-hero-s { margin-top: 10px; font-size: 13px; line-height: 1.62; color: rgba(255, 255, 255, .74); }
.ls-hero-flow { display: flex; align-items: center; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.ls-fchip { font-size: 11.5px; padding: 5px 12px; border-radius: 999px;
background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .86); }
.ls-fchip.on { background: linear-gradient(135deg, #ffd9a8, #f0a06a); color: #3a1a13; font-weight: 700; }
.ls-hero-flow i { font-style: normal; color: rgba(255, 255, 255, .34); }
/* ---- 输入 ---- */
.ls-kw { width: 100%; box-sizing: border-box; font-size: 17px; font-weight: 600; color: var(--text);
background: #fff8f2; border: 1.5px solid #f2e2d4; border-radius: 14px; padding: 13px 14px; outline: none;
transition: border-color .18s, background .18s; }
.ls-kw::placeholder { font-weight: 400; color: #c3b1a1; }
.ls-kw:focus { border-color: #e0a678; background: #fffdfb; }
.ls-catrow { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.ls-catlab { font-size: 12px; color: var(--text2); flex: 0 0 auto; padding-top: 6px; }
.ls-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-cat { font-size: 12.5px; color: #8a6a52; background: #fdf1e7; border: 1px solid #f4e0cf;
border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: all .16s; }
.ls-cat.on { background: linear-gradient(135deg, #b5325a, #7a2f36); color: #fff; border-color: transparent; }
.ls-more-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; box-sizing: border-box; margin-top: 12px; font-size: 13px; text-align: left;
color: #8a6a52; background: #fdf7f1; border: 1px dashed #ead6c4; border-radius: 12px;
padding: 11px 13px; cursor: pointer; transition: all .16s; }
.ls-more-btn:hover { background: #fbf1e8; }
.ls-more-btn i { font-style: normal; font-size: 12px; color: #b5325a; font-weight: 700; flex: 0 0 auto; }
.ls-more-btn.on { border-style: solid; border-color: #e6cdb8; }
.ls-adv { margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
/* ⚠️ 同上一条的坑：.ls-adv 是 display:flex，会盖掉 [hidden] 的 UA 样式 →
不写这行，高级字段一进页面就是展开的，且点「展开/收起」没有任何视觉反应。 */
.ls-adv[hidden], #lsError[hidden], #lsProgress[hidden], #lsResultWrap[hidden] { display: none !important; }
.ls-lab { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #8a6a52; font-weight: 600; }
.ls-lab input, .ls-lab textarea { width: 100%; box-sizing: border-box; font-size: 14px; font-weight: 400;
font-family: inherit; color: var(--text); background: #fff; border: 1.5px solid #f0e2d5; border-radius: 11px;
padding: 10px 12px; outline: none; resize: vertical; transition: border-color .18s; }
.ls-lab input::placeholder, .ls-lab textarea::placeholder { color: #cbb9a9; font-weight: 400; }
.ls-lab input:focus, .ls-lab textarea:focus { border-color: #e0a678; }
.ls-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ---- 风格 ---- */
.ls-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ls-style { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
background: #fdf8f4; border: 1.5px solid #f1e4d8; border-radius: 13px; padding: 11px 12px; transition: all .16s; }
.ls-style b { font-size: 14px; color: #4a3830; }
.ls-style span { font-size: 11.5px; color: var(--text2); line-height: 1.4; }
.ls-style.on { background: linear-gradient(135deg, #fff3ea, #ffe6e0); border-color: #d98a86;
box-shadow: 0 3px 10px rgba(181, 50, 90, .12); }
.ls-style.on b { color: #a02a52; }
/* ---- 章节勾选 ---- */
.ls-chs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ls-ch { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
text-align: left; cursor: pointer; background: #fdf8f4; border: 1.5px solid #f1e4d8; border-radius: 13px;
padding: 11px 12px; transition: all .16s; }
.ls-ch-ico { font-size: 16px; }
.ls-ch b { font-size: 13.5px; color: #4a3830; }
.ls-ch em { font-style: normal; font-size: 11px; color: var(--text2); }
.ls-ch-tick { display: none; position: absolute; right: -1px; top: -1px; width: 20px; height: 20px;
border-radius: 0 12px 0 12px; background: linear-gradient(135deg, #b5325a, #7a2f36); color: #fff;
font-size: 11px; line-height: 20px; text-align: center; }
.ls-ch.on { background: linear-gradient(135deg, #fff3ea, #ffe6e0); border-color: #d98a86; }
.ls-ch.on b { color: #a02a52; }
.ls-ch.on .ls-ch-tick { display: block; }
.ls-count { margin-top: 11px; font-size: 12.5px; color: var(--text2); }
.ls-count b { color: #b5325a; font-size: 14px; }
.ls-warn { color: #c2410c; }
.ls-note { font-size: 12.5px; line-height: 1.7; color: #8a7a6c; background: #fffaf4;
border-left: 3px solid #e8c9a8; border-radius: 0 10px 10px 0; padding: 11px 13px; margin: 0 0 14px; }
.ls-note b { color: #b5325a; }
/* ---- 生成按钮 ---- */
.ls-actions { margin-bottom: 14px; }
.ls-gen { width: 100%; box-sizing: border-box; font-size: 16.5px; font-weight: 800; color: #fff; letter-spacing: .04em;
background: linear-gradient(135deg, #c2415c 0%, #7a2f36 100%); border: none; border-radius: 15px;
padding: 15px 18px; cursor: pointer; box-shadow: 0 8px 20px rgba(122, 47, 54, .26); transition: all .18s; }
.ls-gen:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(122, 47, 54, .22); }
.ls-gen:disabled { opacity: .62; cursor: default; box-shadow: none; }
.ls-cost { margin-top: 8px; font-size: 12px; color: var(--text2); text-align: center; }
.ls-err { margin-bottom: 14px; font-size: 13px; line-height: 1.6; color: #b91c1c;
background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 11px 13px; }
/* ---- 进度 ---- */
.ls-progress { margin-bottom: 14px; background: #fff; border-radius: 14px; padding: 14px 15px;
box-shadow: 0 2px 10px rgba(249, 89, 1, .08); }
.ls-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ls-prog-top span { font-size: 13.5px; font-weight: 600; color: #5a4638; }
.ls-prog-top b { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.ls-prog-bar { height: 7px; border-radius: 999px; background: #f5e7dc; overflow: hidden; }
.ls-prog-bar i { display: block; height: 100%; width: 2%; border-radius: 999px;
background: linear-gradient(90deg, #f0a06a, #b5325a); transition: width .32s ease-out; }
/* ---- 结果工具条 ---- */
.ls-result { margin-bottom: 20px; }
.ls-toolbar { background: #fff; border-radius: 14px; padding: 13px 14px; margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(249, 89, 1, .08); }
.ls-toolbar-meta { font-size: 13px; color: #5a4638; margin-bottom: 11px; }
.ls-toolbar-meta b { color: #b5325a; font-size: 14.5px; }
.ls-toolbar-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ls-switch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #8a6a52;
background: #fdf7f1; border: 1px solid #f0e0d1; border-radius: 999px; padding: 6px 11px; cursor: pointer;
margin-right: auto; }
.ls-switch input { accent-color: #b5325a; width: 14px; height: 14px; margin: 0; }
.ls-tb { font-size: 12.5px; font-weight: 600; color: #8a4a3a; background: #fdf1e7; border: 1px solid #f4e0cf;
border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: all .16s; }
.ls-tb:hover { background: #fbe7d7; }
.ls-tb-main { color: #fff; background: linear-gradient(135deg, #c2415c, #7a2f36);
border-color: transparent; box-shadow: 0 3px 10px rgba(122, 47, 54, .22); }
.ls-tb-main:hover { background: linear-gradient(135deg, #b5325a, #6d2830); }
/* ---- 章节卡 ---- */
.ls-list { display: flex; flex-direction: column; gap: 14px; }
.ls-ch-card { background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 3px 14px rgba(122, 47, 54, .10); border: 1px solid #f6e8dd; }
.ls-ch-hd { display: flex; align-items: center; gap: 11px; padding: 14px 15px 12px;
background: linear-gradient(135deg, #fff7f1, #fff1f0); border-bottom: 1px solid #f8e9e0; }
.ls-ch-hd-ico { font-size: 21px; flex: 0 0 auto; }
.ls-ch-hd-tx { flex: 1 1 auto; min-width: 0; }
.ls-ch-hd-name { font-size: 16.5px; font-weight: 800; color: #3a2a2e; display: flex; align-items: baseline; gap: 7px; }
.ls-ch-hd-name em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #b5325a;
background: #ffe9ef; border-radius: 999px; padding: 2px 8px; }
.ls-ch-hd-pur { margin-top: 3px; font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.ls-mini { font-size: 11.5px; font-weight: 600; color: #8a6a52; background: rgba(255, 255, 255, .8);
border: 1px solid #e8d6c6; border-radius: 999px; padding: 5px 11px; cursor: pointer; flex: 0 0 auto;
transition: all .16s; }
.ls-mini:hover { background: #fff; border-color: #d2b49c; }
.ls-ch-when { font-size: 12.5px; line-height: 1.6; color: #7a6a5c; background: #fffbf6;
padding: 10px 15px; border-bottom: 1px solid #f8efe7; }
.ls-ch-when span { color: #b5325a; font-weight: 700; margin-right: 6px; }
.ls-ch-bd { padding: 6px 0 4px; }
.ls-ch-ft { display: flex; gap: 8px; padding: 11px 15px 14px; border-top: 1px solid #f8efe7; }
.ls-ch-card.ls-folded .ls-ch-bd, .ls-ch-card.ls-folded .ls-ch-when { display: none; }
.ls-ch-card.ls-folded .ls-ch-hd { border-bottom: none; }
/* ---- 子节 ---- */
.ls-sub { padding-top: 4px; }
.ls-sub-hd { display: flex; align-items: center; gap: 8px; padding: 11px 15px 8px; }
.ls-sub-bar { width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, #e08a94, #b5325a); }
.ls-sub-hd b { font-size: 14px; font-weight: 800; color: #6d2830; }
.ls-sub-hd em { font-style: normal; font-size: 11px; color: var(--text2); }
.ls-sub-hd .ls-mini { margin-left: auto; }
/* ---- 单条话术 ---- */
.ls-item { position: relative; display: flex; align-items: flex-start; gap: 10px;
padding: 11px 15px 11px 15px; border-bottom: 1px dashed #f6ece3; transition: background .15s; }
.ls-item:last-child { border-bottom: none; }
.ls-item:hover { background: #fffcf9; }
.ls-item-no { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #fdeee9;
color: #b5325a; font-size: 11.5px; font-weight: 700; line-height: 22px; text-align: center;
margin-top: 2px; font-variant-numeric: tabular-nums; }
.ls-item-tx { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.78; color: #3a3230;
word-break: break-word; }
.ls-item-cp { flex: 0 0 auto; align-self: center; font-size: 11.5px; font-weight: 600; color: #a89a8c;
background: #fbf6f1; border: 1px solid #f0e4d8; border-radius: 999px; padding: 5px 11px;
cursor: pointer; opacity: .55; transition: all .16s; }
.ls-item:hover .ls-item-cp { opacity: 1; }
.ls-item-cp:hover { color: #fff; background: linear-gradient(135deg, #c2415c, #7a2f36); border-color: transparent; opacity: 1; }
.ls-item-cp:active { transform: scale(.95); }
/* 高亮：数字（暖橙）+ 动作词（玫红） */
.ls-hl { font-style: normal; font-weight: 700; color: #c2410c; background: #fff4e8;
border-radius: 4px; padding: 0 2px; }
.ls-hl-act { color: #b5325a; background: #ffeef3; }
.ls-foot { display: flex; gap: 9px; justify-content: center; margin-top: 16px; }
.ls-foot .ls-tb { padding: 9px 18px; font-size: 13px; }
/* ---- 提示 ---- */
.ls-toast { position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 12px);
max-width: 82vw; text-align: center; font-size: 13.5px; color: #fff; background: rgba(58, 26, 32, .93);
border-radius: 12px; padding: 11px 17px; opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; z-index: 60; }
.ls-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 360px) {
.ls-styles, .ls-chs, .ls-2col { grid-template-columns: 1fr; }
.ls-hero-t { font-size: 23px; }
.ls-item-tx { font-size: 14px; }
}
/* ==========================================================================
对标账号分析（运营板块）
--------------------------------------------------------------------------
设计取向：这是「分析类」功能，刻意**不用站点的橙色主色**做视觉主角 ——
深靛蓝→紫的渐变把「数据/洞察」的气质拉出来，橙色只留在按钮和强调点上，
与站内其它 AI 生成类功能形成区分。
全部类名以 ac- 前缀，避免与既有模块（ls- / img- / gd-）冲突。
========================================================================== */
.ac-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 20px 20px;
margin-bottom: 14px; color: #fff;
background: linear-gradient(135deg, #12162b 0%, #1e2145 46%, #452a6b 100%); }
.ac-hero-glow { position: absolute; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(140, 130, 255, .40), transparent 70%); pointer-events: none; }
.ac-hero-glow2 { position: absolute; left: -60px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(249, 89, 1, .28), transparent 70%); pointer-events: none; }
.ac-hero-tag { position: relative; display: inline-block; font-size: 11px; letter-spacing: .16em;
color: #c9c4ff; border: 1px solid rgba(201, 196, 255, .40); border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; }
.ac-hero-t { position: relative; font-size: 27px; font-weight: 800; line-height: 1.28; }
.ac-hero-s { position: relative; margin-top: 10px; font-size: 13px; line-height: 1.62; color: rgba(255, 255, 255, .74); }
.ac-hero-flow { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.ac-fchip { font-size: 11.5px; padding: 5px 12px; border-radius: 999px;
background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .86); }
.ac-fchip.on { background: linear-gradient(135deg, #cbb8ff, #8f7bff); color: #191238; font-weight: 700; }
.ac-hero-flow i { font-style: normal; color: rgba(255, 255, 255, .34); }
/* ---- 卡片 ---- */
.ac-card { margin-bottom: 14px; }
.ac-lab { display: block; font-size: 12.5px; color: var(--text2); margin-bottom: 10px; }
.ac-lab input { display: block; width: 100%; margin-top: 6px; font-size: 15px; color: var(--text);
background: #fff8f2; border: 1.5px solid #f2e2d4; border-radius: 12px; padding: 11px 13px; outline: none;
font-family: inherit; transition: border-color .18s, background .18s; }
.ac-lab input:focus { border-color: #b9a6ff; background: #fffdfb; }
.ac-url { display: block; width: 100%; box-sizing: border-box; font-size: 14.5px; line-height: 1.6;
color: var(--text); background: #fbf8ff; border: 1.5px solid #e6e2f7; border-radius: 14px;
padding: 12px 14px; outline: none; resize: vertical; min-height: 62px; font-family: inherit;
transition: border-color .18s, background .18s; }
.ac-url::placeholder { color: #b5aec9; }
.ac-url:focus { border-color: #8f7bff; background: #fff; box-shadow: 0 0 0 3px rgba(143, 123, 255, .10); }
.ac-detect { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; color: var(--text2); min-height: 22px; }
.ac-detect b { font-weight: 700; }
.ac-dot { width: 7px; height: 7px; border-radius: 50%; background: #cfc6e6; flex: 0 0 auto; }
.ac-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.ac-dot.bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }
.ac-plats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ac-plat { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #ece7fa;
background: #faf8ff; color: #7a719b; cursor: pointer; transition: all .16s; user-select: none; }
.ac-plat:hover { border-color: #c9bcf7; color: #5b4bb5; }
.ac-plat.on { background: linear-gradient(135deg, #6d5bd0, #8f7bff); border-color: transparent; color: #fff; font-weight: 700; }
.ac-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.ac-or::before, .ac-or::after { content: ''; flex: 1; height: 1px; background: #efe9f8; }
.ac-or span { font-size: 11.5px; color: #a99fc4; white-space: nowrap; }
.ac-tip { font-size: 12px; line-height: 1.66; color: #8d84a8; background: #faf8ff; border-left: 3px solid #d9cffb;
border-radius: 0 10px 10px 0; padding: 9px 12px; margin-bottom: 10px; }
.ac-tip b { color: #6d5bd0; }
.ac-tip-warn { color: #8a6d3b; background: #fffbf0; border-left-color: #f0c26a; }
.ac-tip-warn b { color: #b45309; }
.ac-works { display: block; width: 100%; box-sizing: border-box; font-size: 13.5px; line-height: 1.72;
color: var(--text); background: #fbf8ff; border: 1.5px solid #e6e2f7; border-radius: 14px;
padding: 12px 14px; outline: none; resize: vertical; min-height: 84px; font-family: inherit; }
.ac-works:focus { border-color: #8f7bff; background: #fff; box-shadow: 0 0 0 3px rgba(143, 123, 255, .10); }
.ac-wcount { margin-top: 8px; font-size: 12px; color: var(--text2); }
.ac-wcount b { color: #6d5bd0; }
/* ---- 按钮与错误 ---- */
.ac-actions { margin: 4px 0 14px; }
.ac-gen { display: block; width: 100%; border: none; cursor: pointer; color: #fff; font-family: inherit;
font-size: 16.5px; font-weight: 800; letter-spacing: .02em; padding: 15px; border-radius: 15px;
background: linear-gradient(135deg, #6d5bd0 0%, #8f7bff 55%, #f95901 190%);
box-shadow: 0 8px 22px rgba(109, 91, 208, .28); transition: transform .14s, box-shadow .14s, opacity .14s; }
.ac-gen:active { transform: translateY(1px); }
.ac-gen:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ac-cost { margin-top: 9px; text-align: center; font-size: 11.5px; color: var(--text2); }
.ac-err { margin-bottom: 14px; font-size: 13px; line-height: 1.6; color: #b42318;
background: #fef3f2; border: 1px solid #fecdca; border-radius: 12px; padding: 11px 13px; }
/* ---- 进度 ---- */
.ac-progress { margin-bottom: 16px; background: #fff; border: 1px solid #efe9f8; border-radius: 16px; padding: 16px; }
.ac-prog-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text); }
.ac-prog-top b { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.ac-prog-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: #f1ecfb; overflow: hidden; }
.ac-prog-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #6d5bd0, #8f7bff); transition: width .5s ease; }
.ac-prog-steps { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ac-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b3aac9; }
.ac-step .ac-sico { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #e2dbf4; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; }
.ac-step.done { color: var(--text); }
.ac-step.done .ac-sico { background: #6d5bd0; border-color: #6d5bd0; color: #fff; }
.ac-step.cur { color: #6d5bd0; font-weight: 700; }
.ac-step.cur .ac-sico { border-color: #8f7bff; border-top-color: transparent; animation: ac-spin .8s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
/* ---- 账号卡 ---- */
.ac-acct { position: relative; overflow: hidden; border-radius: 18px; padding: 18px; margin-bottom: 14px;
background: linear-gradient(135deg, #191d3a 0%, #2a2450 100%); color: #fff; }
.ac-acct::after { content: ''; position: absolute; right: -50px; top: -60px; width: 180px; height: 180px;
border-radius: 50%; background: radial-gradient(circle, rgba(143, 123, 255, .38), transparent 70%); }
.ac-acct-top { position: relative; display: flex; align-items: center; gap: 13px; }
.ac-av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
border: 2px solid rgba(255, 255, 255, .28); background: #2c2f52; }
.ac-av-ph { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
justify-content: center; font-size: 22px; background: rgba(255, 255, 255, .10); border: 2px solid rgba(255, 255, 255, .18); }
.ac-acct-nm { min-width: 0; flex: 1; }
.ac-acct-nm b { display: block; font-size: 18px; font-weight: 800; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-acct-nm span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, .62); }
.ac-pbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; margin-left: 6px; vertical-align: middle; }
.ac-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.ac-stat { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .10);
border-radius: 12px; padding: 10px 8px; text-align: center; }
.ac-stat b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.ac-stat span { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(255, 255, 255, .58); }
/* 头条的粉丝/获赞/作品数拿不到（平台服务端加密），用虚线框 + 「加密」二字，
避免和真正「没抓到」的账号混在一起看不清。 */
.ac-stat-lock { border-style: dashed; border-color: rgba(255, 255, 255, .24); }
.ac-stat-lock b { font-size: 13.5px; color: rgba(255, 255, 255, .84); }
.ac-bio { position: relative; margin-top: 12px; font-size: 12.5px; line-height: 1.7;
color: rgba(255, 255, 255, .72); white-space: pre-wrap; word-break: break-word; }
.ac-tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ac-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px;
background: rgba(143, 123, 255, .20); color: #cfc4ff; border: 1px solid rgba(143, 123, 255, .28); }
/* ---- 提示条 ---- */
.ac-warns { margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.ac-warn { font-size: 12.5px; line-height: 1.62; color: #8a6d3b; background: #fffbf0;
border: 1px solid #f5e3bd; border-radius: 11px; padding: 9px 12px; }
.ac-warn.info { color: #5b4bb5; background: #f8f6ff; border-color: #e0d8fa; }
/* ---- 报告 ---- */
.ac-report { background: #fff; border: 1px solid #efe9f8; border-radius: 18px; padding: 20px 18px; }
.ac-report h1 { font-size: 21px; font-weight: 800; line-height: 1.35; padding-bottom: 12px;
margin-bottom: 16px; border-bottom: 2px solid #f1ecfb; }
.ac-report h2 { font-size: 16.5px; font-weight: 800; margin: 22px 0 11px; padding-left: 11px;
border-left: 4px solid #8f7bff; line-height: 1.4; }
.ac-report h2:first-of-type { margin-top: 4px; }
.ac-report h3 { font-size: 14.5px; font-weight: 700; color: #5b4bb5; margin: 15px 0 8px; }
.ac-report h4 { font-size: 13.5px; font-weight: 700; margin: 13px 0 7px; color: #4a3d7a; }
.ac-report p { font-size: 14px; line-height: 1.82; margin: 9px 0; color: #403353; }
.ac-report ul, .ac-report ol { margin: 8px 0 10px; padding-left: 21px; }
.ac-report li { font-size: 14px; line-height: 1.82; margin: 5px 0; color: #403353; }
.ac-report strong { font-weight: 700; color: #251c3d; }
.ac-report em { font-style: normal; background: #f3efff; color: #5b4bb5; border-radius: 5px; padding: 1px 5px; font-weight: 600; }
.ac-report hr { border: none; border-top: 1px dashed #ece7fa; margin: 18px 0; }
.ac-report blockquote { margin: 10px 0; padding: 9px 13px; background: #faf8ff; border-left: 3px solid #c9bcf7;
border-radius: 0 10px 10px 0; font-size: 13px; color: #6d6390; }
.ac-report code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
background: #f4f1fd; color: #5b4bb5; border-radius: 5px; padding: 1px 5px; }
.ac-report table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.ac-report th, .ac-report td { border: 1px solid #ece7fa; padding: 7px 9px; text-align: left; }
.ac-report th { background: #faf8ff; font-weight: 700; }
.ac-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ac-tb { flex: 1 1 auto; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
color: #5b4bb5; background: #faf8ff; border: 1px solid #e0d8fa; border-radius: 12px; padding: 11px 14px;
transition: all .16s; }
.ac-tb:hover { background: #f2eeff; border-color: #c9bcf7; }
.ac-tb-main { color: #fff; background: linear-gradient(135deg, #6d5bd0, #8f7bff); border-color: transparent;
box-shadow: 0 6px 16px rgba(109, 91, 208, .24); }
.ac-tb-main:hover { background: linear-gradient(135deg, #5e4cc0, #7f6bf5); }
.ac-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px); z-index: 90;
background: rgba(25, 29, 58, .94); color: #fff; font-size: 13px; font-weight: 600;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; max-width: 84vw; text-align: center; }
.ac-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 380px) {
.ac-hero-t { font-size: 23px; }
.ac-stat b { font-size: 15px; }
.ac-toolbar .ac-tb { flex: 1 1 44%; }
}
/* ============================================================================
模特换衣（图片板块 → 模特换衣）
视觉语言：暖炭墨 + 香槟金 —— 与站点暖橙主色、直播话术的玫瑰红都不撞，
走「高级时装电商大片」的调子：深色 hero、米白卡片、细线框、克制的金色点缀。
⚠️ 本页所有用 hidden 属性做显隐的块，都必须在文件末尾有 [hidden] 兜底 ——
作者样式的 display:flex/grid 优先级高于浏览器默认的 [hidden]{display:none}。
========================================================================== */
.mw-wrap { padding: 2px 0 30px; }
/* ---------------- Hero ---------------- */
.mw-hero {
position: relative; overflow: hidden; border-radius: 20px;
background: linear-gradient(135deg, #191716 0%, #2b2320 46%, #57422a 100%);
padding: 24px 20px 20px; color: #f7f2ea;
box-shadow: 0 12px 30px rgba(43, 35, 32, .22);
}
.mw-hero-glow {
position: absolute; right: -60px; top: -70px; width: 210px; height: 210px;
background: radial-gradient(circle, rgba(205, 164, 95, .42) 0%, rgba(205, 164, 95, 0) 68%);
pointer-events: none;
}
.mw-hero-tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; letter-spacing: .1em; font-weight: 600;
color: #e6c98f; background: rgba(205, 164, 95, .14);
border: 1px solid rgba(205, 164, 95, .34);
padding: 4px 10px; border-radius: 999px;
}
.mw-hero-t {
margin: 12px 0 6px; font-size: 23px; line-height: 1.3; font-weight: 700;
letter-spacing: .01em;
}
.mw-hero-s { margin: 0; font-size: 12.5px; line-height: 1.7; color: rgba(247, 242, 234, .72); }
.mw-hero-flow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.mw-fchip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; color: rgba(247, 242, 234, .9);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .12);
padding: 5px 10px 5px 6px; border-radius: 999px;
}
.mw-fchip i {
font-style: normal; width: 15px; height: 15px; line-height: 15px; text-align: center;
border-radius: 50%; font-size: 9.5px; font-weight: 700;
background: linear-gradient(135deg, #cda45f, #8f6a33); color: #1d1a18;
}
/* ---------------- 卡片 ---------------- */
.mw-card {
margin-top: 14px; background: #fff; border: 1px solid #ede7de;
border-radius: 16px; padding: 15px 14px 16px;
box-shadow: 0 2px 10px rgba(60, 48, 38, .04);
}
.mw-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mw-step {
flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px; text-align: center;
border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #3a2f27, #6d5433);
}
.mw-card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #241f1b; }
.mw-card-tip { margin-left: auto; font-size: 11px; color: #a2968a; }
/* ---------------- 服装槽位 ---------------- */
.mw-garments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.mw-slot {
position: relative; aspect-ratio: 3 / 4; border-radius: 13px;
border: 1.5px dashed #ded4c6; background: #fbf9f6;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 0; cursor: pointer; overflow: hidden;
font-family: inherit; color: #a89b8c;
transition: border-color .18s, background .18s;
}
.mw-slot:active { border-color: #cda45f; background: #fdf8ef; }
.mw-slot.has { border: 1px solid #e6dccd; background: #f2ede6; }
.mw-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mw-slot-plus { font-size: 24px; line-height: 1; color: #c3b6a5; font-weight: 300; }
.mw-slot-lab {
font-size: 11px; color: #a89b8c; background: rgba(255, 255, 255, .92);
padding: 2px 8px; border-radius: 999px;
}
.mw-slot.has .mw-slot-lab {
position: absolute; left: 7px; bottom: 7px; z-index: 2;
background: rgba(25, 23, 22, .66); color: #fff;
}
.mw-slot-x {
position: absolute; right: 6px; top: 6px; z-index: 3;
width: 21px; height: 21px; line-height: 19px; border-radius: 50%;
border: none; background: rgba(25, 23, 22, .62); color: #fff;
font-size: 14px; cursor: pointer; padding: 0; font-family: inherit;
}
.mw-slot.big { aspect-ratio: 3 / 4; max-width: 150px; }
/* ---- 部位格：🧢帽子 / 👕上衣 / 👖下装 / 👟鞋子 / 🧣配饰（5 个，留空的即保留模特原样）---- */
.mw-pcell {
position: relative; aspect-ratio: 3 / 4; border-radius: 12px;
border: 1.5px dashed #ded4c6; background: #fbf9f6;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 0; cursor: pointer; overflow: hidden;
font-family: inherit; color: #a89b8c;
transition: border-color .18s, background .18s, transform .12s;
}
.mw-pcell:active { border-color: #cda45f; background: #fdf8ef; transform: scale(.96); }
.mw-pcell-ic { font-size: 20px; line-height: 1.15; }
.mw-pcell-plus { font-size: 12px; line-height: 1; color: #c3b6a5; font-weight: 400; }
.mw-pcell-lab { font-size: 10px; line-height: 1; color: #a89b8c; letter-spacing: .2px; white-space: nowrap; }
.mw-pcell.has { border: 1px solid #e6dccd; background: #f2ede6; }
.mw-pcell.has img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mw-pcell.has .mw-pcell-lab {
position: absolute; left: 4px; right: 4px; bottom: 5px; z-index: 2;
background: rgba(25, 23, 22, .66); color: #fff;
padding: 1px 4px; border-radius: 999px; text-align: center;
font-size: 9.5px; overflow: hidden; text-overflow: ellipsis;
}
.mw-pcell-x {
position: absolute; right: 4px; top: 4px; z-index: 3;
width: 19px; height: 19px; line-height: 17px; border-radius: 50%;
border: none; background: rgba(25, 23, 22, .62); color: #fff;
font-size: 13px; cursor: pointer; padding: 0; font-family: inherit;
}
.mw-note {
margin-top: 11px; font-size: 11.5px; line-height: 1.7; color: #8c8177;
background: #fbf9f6; border-radius: 10px; padding: 9px 11px;
border-left: 3px solid #e2d5bf;
}
/* ---------------- 模特：三标签 ---------------- */
.mw-tabs {
display: flex; gap: 4px; background: #f4f0ea; border-radius: 11px;
padding: 4px; margin-bottom: 13px;
}
.mw-tabs button {
flex: 1; border: none; background: transparent; font-family: inherit;
font-size: 12.5px; font-weight: 600; color: #8d8175;
padding: 8px 0; border-radius: 8px; cursor: pointer;
transition: background .18s, color .18s, box-shadow .18s;
}
.mw-tabs button.on {
background: #fff; color: #2e2620;
box-shadow: 0 1px 4px rgba(60, 48, 38, .12);
}
.mw-pane { display: block; }
.mw-libgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mw-model {
position: relative; aspect-ratio: 2 / 3; border-radius: 11px; overflow: hidden;
border: 2px solid transparent; background: #f2ede6; padding: 0; cursor: pointer;
transition: border-color .16s, transform .16s;
}
.mw-model img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-model.on { border-color: #c09048; transform: translateY(-1px); }
.mw-model-tick {
position: absolute; right: 4px; bottom: 4px; width: 17px; height: 17px;
line-height: 17px; text-align: center; border-radius: 50%;
font-size: 10px; color: #fff; background: #c09048;
opacity: 0; transform: scale(.7); transition: opacity .16s, transform .16s;
}
.mw-model.on .mw-model-tick { opacity: 1; transform: scale(1); }
.mw-upzone { display: flex; flex-direction: column; gap: 10px; }
.mw-up-pick {
border: 1.5px dashed #ded4c6; background: #fbf9f6; border-radius: 13px;
padding: 22px 12px; font-family: inherit; font-size: 12.5px; color: #8d8175;
cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mw-up-pick b { font-size: 15px; font-weight: 600; color: #5d5348; }
.mw-up-hint { font-size: 11.5px; line-height: 1.65; color: #a2968a; }
/* ---------------- 字段 / chips ---------------- */
.mw-field { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.mw-field-lab {
flex: 0 0 56px; font-size: 12px; color: #8d8175; padding-top: 7px;
}
.mw-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.mw-chip {
border: 1px solid #e6ddd0; background: #fff; font-family: inherit;
font-size: 12px; color: #55493e; padding: 6px 11px; border-radius: 999px;
cursor: pointer; transition: all .16s; white-space: nowrap;
}
.mw-chip.on {
background: linear-gradient(135deg, #2e2620, #63492c); color: #f6efe4;
border-color: #63492c; font-weight: 600;
}
.mw-ta {
width: 100%; box-sizing: border-box; margin: 2px 0 10px;
border: 1px solid #e6ddd0; border-radius: 11px; padding: 10px 11px;
font-family: inherit; font-size: 12.5px; line-height: 1.6; color: #3c332b;
background: #fbf9f6; resize: none; outline: none;
}
.mw-ta:focus { border-color: #cda45f; background: #fff; }
.mw-base-btn {
width: 100%; border: none; border-radius: 12px; padding: 12px;
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
color: #f8f2e8; background: linear-gradient(135deg, #2e2620, #5f4729);
}
.mw-base-btn:disabled { opacity: .6; cursor: default; }
.mw-base-loading {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 12px; color: #8d8175; padding: 12px 0 2px;
}
.mw-aibase { display: flex; gap: 12px; align-items: flex-start; }
.mw-aibase img {
width: 108px; border-radius: 12px; border: 1px solid #e6ddd0; display: block;
}
.mw-aibase-side { flex: 1; }
.mw-aibase-ok { font-size: 12.5px; font-weight: 700; color: #8a6a2e; margin-bottom: 5px; }
.mw-aibase-side p { margin: 0 0 10px; font-size: 11.5px; line-height: 1.65; color: #8d8175; }
/* ---------------- 场景与姿势 ---------------- */
.mw-scenes { display: flex; flex-direction: column; gap: 9px; }
.mw-scene {
border: 1px solid #ece5da; border-radius: 13px; overflow: hidden;
background: #fdfcfa; transition: border-color .18s, box-shadow .18s;
}
.mw-scene.on { border-color: #d9c295; box-shadow: 0 2px 10px rgba(180, 143, 74, .1); }
.mw-scene-hd {
display: flex; align-items: center; gap: 7px; padding: 11px 12px; cursor: pointer;
user-select: none;
}
.mw-scene-ic { font-size: 14px; }
.mw-scene-name { font-size: 13px; font-weight: 600; color: #2e2620; }
.mw-scene-tag {
font-size: 10px; color: #9c8f80; border: 1px solid #e6ddd0;
border-radius: 999px; padding: 1px 7px;
}
.mw-scene-n { margin-left: auto; font-size: 11px; color: #a2968a; }
.mw-scene.on .mw-scene-n { color: #a07c34; font-weight: 600; }
.mw-scene-arrow { font-size: 15px; color: #c9bcab; transform: rotate(90deg); transition: transform .2s; }
.mw-scene.open .mw-scene-arrow, .mw-scene.on .mw-scene-arrow { transform: rotate(-90deg); }
/* 抬头右侧的「全选 / 清空」——把「选中」从抬头点击里拆出来，抬头只负责摊开/收起 */
.mw-scene-all {
font-size: 10.5px; font-weight: 600; color: #a07c34; flex: 0 0 auto;
border: 1px solid #e0cfae; background: #fdf8ef; border-radius: 999px;
padding: 2px 8px; margin-left: 6px; transition: all .16s;
}
.mw-scene-all:active { background: #f6ead4; }
.mw-poses {
display: none; flex-direction: column; gap: 5px;
padding: 0 10px 11px;
}
/* open（用户主动摊开）或 on（已有选中）都要显示清单 ——
否则「勾满 6 张后点开新场景看不到任何姿势」，也做不到「只挑其中 1 条」。 */
.mw-scene.open .mw-poses, .mw-scene.on .mw-poses { display: flex; }
.mw-pose {
display: flex; align-items: flex-start; gap: 8px; text-align: left;
border: 1px solid transparent; background: #f7f3ed; border-radius: 9px;
padding: 8px 10px; font-family: inherit; font-size: 12px; line-height: 1.55;
color: #5d5348; cursor: pointer; transition: all .16s;
}
.mw-pose:active { background: #f2ebdf; }
.mw-pose.on { background: #fdf6e9; border-color: #dcc496; color: #4a3c22; }
.mw-pose-box {
flex: 0 0 15px; width: 15px; height: 15px; line-height: 14px; text-align: center;
border: 1.5px solid #cfc2b1; border-radius: 5px; font-size: 10px; color: #fff;
margin-top: 1px; background: #fff;
}
.mw-pose.on .mw-pose-box {
background: linear-gradient(135deg, #b8894a, #8f6a33); border-color: #a3793a;
}
.mw-pose-tx { flex: 1; }
/* ---------------- 设置行 ---------------- */
.mw-settings { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.mw-set-row { display: flex; align-items: flex-start; gap: 9px; }
.mw-set-lab { flex: 0 0 56px; font-size: 12px; color: #8d8175; padding-top: 7px; }
.mw-more { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.mw-more-btn {
align-self: flex-start; border: none; background: transparent; font-family: inherit;
font-size: 12px; color: #a07c34; cursor: pointer; padding: 4px 0;
display: flex; align-items: center; gap: 4px;
}
.mw-more-btn::after { content: '⌄'; transition: transform .2s; display: inline-block; }
.mw-more-btn.on::after { transform: rotate(180deg); }
.mw-inp {
width: 100%; box-sizing: border-box; border: 1px solid #e6ddd0; border-radius: 11px;
padding: 10px 11px; font-family: inherit; font-size: 12.5px; color: #3c332b;
background: #fbf9f6; outline: none;
}
.mw-inp:focus { border-color: #cda45f; background: #fff; }
/* ---------------- 生成区 ---------------- */
.mw-actions { margin-top: 16px; }
.mw-gen {
width: 100%; border: none; border-radius: 14px; padding: 15px;
font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
color: #f9f4ea; cursor: pointer;
background: linear-gradient(135deg, #26211d 0%, #4a3a28 52%, #7d5c31 100%);
box-shadow: 0 8px 20px rgba(74, 58, 40, .24);
}
.mw-gen:disabled { opacity: .5; box-shadow: none; cursor: default; }
.mw-cost {
margin-top: 9px; text-align: center; font-size: 12px; color: #8d8175;
}
.mw-cost.warn { color: #c0392b; font-weight: 600; }
.mw-quota { text-align: center; font-size: 11.5px; color: #a2968a; margin-top: 3px; }
.mw-err {
margin-top: 11px; font-size: 12.5px; line-height: 1.6; color: #b03a2e;
background: #fdf2f0; border: 1px solid #f3d9d4; border-radius: 11px;
padding: 10px 12px;
}
/* ---------------- 结果 ---------------- */
.mw-result { margin-top: 20px; }
.mw-result-hd {
display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
}
.mw-result-meta { font-size: 12.5px; font-weight: 600; color: #3c332b; flex: 1; }
.mw-result-btns { display: flex; gap: 7px; }
.mw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mw-shot {
border-radius: 14px; overflow: hidden; background: #fbf9f6;
border: 1px solid #ece5da; display: flex; flex-direction: column;
}
.mw-shot img { width: 100%; display: block; background: #f2ede6; }
.mw-shot-ph {
aspect-ratio: 2 / 3; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 7px;
background: linear-gradient(160deg, #f6f1e9 0%, #ece4d8 100%);
color: #a2968a; text-align: center; padding: 12px;
}
.mw-shot-ph p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8d8175; }
.mw-shot-ph em { font-style: normal; font-size: 11px; color: #b3a695; }
.mw-shot-ph.fail { background: #fdf4f2; }
.mw-shot-ph.fail span { font-size: 20px; color: #c98a7f; }
.mw-spin {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid #ddcfb9; border-top-color: #b8894a;
animation: mw-spin .8s linear infinite; display: block;
}
@keyframes mw-spin { to { transform: rotate(360deg); } }
.mw-shot-bd {
padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 7px;
border-top: 1px solid #f1ebe0;
}
.mw-shot-tag { font-size: 10.5px; color: #9c8f80; line-height: 1.4; }
.mw-shot-btns { display: flex; gap: 6px; }
.mw-mini {
flex: 1; border: none; border-radius: 8px; padding: 7px 10px;
font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
color: #f7f2ea; background: linear-gradient(135deg, #3a2f27, #6d5433);
}
.mw-mini.ghost { background: #f2ede6; color: #6d5f50; }
.mw-toast {
position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%);
background: rgba(25, 23, 22, .9); color: #f7f2ea;
font-size: 12.5px; padding: 10px 16px; border-radius: 999px;
z-index: 999; max-width: 78%; text-align: center; line-height: 1.5;
}
/* ⚠️ hidden 兜底：上面 .mw-pane/.mw-more/.mw-shot-ph 等用了 display:flex/grid，
作者样式优先级高于浏览器默认的 [hidden]{display:none} —— 不写这条，
设了 hidden 也照样显示（本项目已在 ic-* / uh-* / um-* / ls-adv 踩过 4 次）。 */
#sub-modelwear [hidden] { display: none !important; }
@media (min-width: 720px) {
.mw-garments { max-width: 660px; }
.mw-pcell-ic { font-size: 30px; }
.mw-pcell-plus { font-size: 15px; }
.mw-pcell-lab { font-size: 11.5px; }
.mw-pcell.has .mw-pcell-lab { font-size: 11px; }
}
/* ============================================================================
照片合拍（2~6 张人像 → 一张合影，16 场景 / 5 尺寸）
========================================================================== */
.gp-banner {
display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius);
margin-bottom:14px; color:#fff;
background:linear-gradient(135deg,#5B8DEF 0%,#7C6CF0 48%,#C86DD7 100%);
box-shadow:0 8px 22px rgba(96,86,220,.28);
}
.gp-banner-ico { font-size:30px; line-height:1; }
.gp-banner-tx { min-width:0; }
.gp-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.gp-banner-s { font-size:12.5px; opacity:.94; margin-top:3px; }
.gp-ct { display:flex; align-items:center; justify-content:space-between; }
.gp-count { font-size:12px; font-weight:600; color:var(--text2); }
.gp-cur { font-size:12px; font-weight:600; color:#6C5CE7; }
/* 上传网格 */
.gp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:10px; }
.gp-cell { position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#f5f0ea; }
.gp-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.gp-del {
position:absolute; top:4px; right:4px; width:22px; height:22px; border:0; border-radius:50%;
background:rgba(20,14,9,.62); color:#fff; font-size:15px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; padding:0;
}
.gp-add {
aspect-ratio:3/4; border:1.5px dashed #e2d4c6; border-radius:12px; background:#fdfaf7;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
cursor:pointer; font-family:inherit; padding:0;
}
.gp-add-plus { font-size:20px; color:#c9b3a0; line-height:1; }
.gp-add-t { font-size:11px; color:var(--text2); }
.gp-tip { margin-top:9px; }
.gp-note { font-size:12px; color:var(--text2); line-height:1.65; margin-top:9px; }
.gp-clear {
width:100%; margin-top:10px; border:0; border-radius:11px; background:#fdeceb; color:#c0392b;
font-family:inherit; font-size:13px; font-weight:600; padding:9px 0; cursor:pointer;
}
/* 场景（16 个，3 列） */
.gp-scenes { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:11px; }
.gp-scene {
border:1.5px solid #efe3d8; border-radius:14px; background:#fff; padding:11px 6px 9px;
display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
font-family:inherit; transition:transform .12s;
}
.gp-scene:active { transform:scale(.97); }
.gp-scene-ico { font-size:22px; line-height:1; font-style:normal; }
.gp-scene-n { font-size:12.5px; font-weight:700; color:var(--text); }
.gp-scene-m { font-size:10.5px; font-style:normal; color:var(--text2); text-align:center; line-height:1.35; }
.gp-scene.on { border-color:#6C5CE7; background:#f4f1ff; box-shadow:0 4px 12px rgba(108,92,231,.16); }
.gp-scene.on .gp-scene-n { color:#5B4BD6; }
/* 尺寸 */
.gp-sizes { display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; margin-top:11px; }
.gp-size {
flex:0 0 auto; border:1.5px solid #efe3d8; border-radius:13px; background:#fff;
padding:10px 11px 8px; display:flex; flex-direction:column; align-items:center; gap:5px;
cursor:pointer; font-family:inherit; min-width:78px;
}
.gp-size i { display:block; border-radius:5px; background:linear-gradient(135deg,#8B7CF6,#4a3fd0); flex:0 0 auto; }
.gp-size span { font-size:11.5px; font-weight:700; color:var(--text2); }
.gp-size em { font-size:10px; font-style:normal; color:#bfae9e; }
.gp-size.on { border-color:#6C5CE7; background:#f4f1ff; }
.gp-size.on span { color:#5B4BD6; }
/* 补充描述 */
.gp-ta {
width:100%; height:76px; border:1.5px solid #f0e6dc; border-radius:14px; background:#fdfaf7;
font-family:inherit; font-size:14px; color:var(--text); padding:11px 13px; line-height:1.6;
resize:none; outline:none; margin-top:10px;
}
.gp-ta:focus { border-color:var(--primary-light); background:#fff; }
/* 合成进度 */
.gp-progress { margin:12px 0 4px; }
.gp-progress-bar { height:6px; border-radius:3px; background:#efe3d8; overflow:hidden; }
.gp-progress-bar i {
display:block; height:100%; width:0; border-radius:3px;
background:linear-gradient(90deg,#5B8DEF,#7C6CF0,#C86DD7); transition:width .6s ease;
}
.gp-progress-tx { font-size:12.5px; color:var(--text2); margin-top:8px; text-align:center; }
/* 结果 */
.gp-dimtxt { font-size:12px; color:var(--text2); font-weight:500; }
.gp-prev-wrap { display:flex; justify-content:center; padding:8px 0 14px; }
.gp-preview { max-width:100%; border-radius:12px; cursor:zoom-in; box-shadow:0 10px 26px rgba(70,60,140,.22); }
@media (max-width:380px) {
.gp-grid { grid-template-columns:repeat(3,1fr); }
.gp-scenes { grid-template-columns:repeat(2,1fr); }
}
/* ==================== 老板获客文案（boss-） ==================== */
/* ⚠️ 用 hidden 属性做显隐的元素，只要自身类是 display:grid/flex，就会被作者样式盖掉
UA 的 [hidden]{display:none} —— 本项目已踩 4 批，这里一次性堵死。 */
.subpanel .boss-adv[hidden], .subpanel .boss-progress[hidden], .subpanel .boss-result[hidden],
.subpanel .boss-err[hidden] { display: none !important; }
.boss-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 20px 20px;
margin-bottom: 14px; color: #fff;
background: linear-gradient(135deg, #17110d 0%, #2b1d13 44%, #5c3a1c 100%); }
.boss-hero-glow { position: absolute; right: -64px; top: -70px; width: 230px; height: 230px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 196, 120, .38), transparent 70%); pointer-events: none; }
.boss-hero-glow2 { position: absolute; left: -80px; bottom: -90px; width: 210px; height: 210px; border-radius: 50%;
background: radial-gradient(circle, rgba(249, 89, 1, .30), transparent 72%); pointer-events: none; }
.boss-hero-tag { position: relative; display: inline-block; font-size: 11px; letter-spacing: .16em;
color: #ffd9a8; border: 1px solid rgba(255, 217, 168, .40); border-radius: 999px; padding: 3px 11px; margin-bottom: 13px; }
.boss-hero-t { position: relative; font-size: 25px; font-weight: 800; line-height: 1.36; letter-spacing: .01em; }
.boss-hero-s { position: relative; margin-top: 10px; font-size: 12.5px; line-height: 1.72; color: rgba(255, 232, 208, .80); }
.boss-hero-flow { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.boss-hero-flow i { color: rgba(255, 217, 168, .5); font-style: normal; font-size: 12px; }
.boss-fchip { font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 236, 214, .9); }
.boss-fchip.on { background: rgba(255, 186, 128, .22); border-color: rgba(255, 186, 128, .46); color: #ffe2bd; font-weight: 600; }
.boss-brief { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 14px;
border: 1.5px solid #eee3d9; background: #fffdfb; color: var(--text); font-size: 14.5px;
line-height: 1.78; font-family: inherit; resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s; }
.boss-brief:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249, 89, 1, .09); }
.boss-brief::placeholder { color: #bfae9f; }
.boss-hint { margin: 9px 2px 0; font-size: 12px; line-height: 1.7; color: var(--text2); }
.boss-hint b { color: var(--primary); }
.boss-cnt { float: right; font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.boss-cnt.warn { color: #e5484d; font-weight: 600; }
.boss-catrow { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
.boss-catlab { flex: none; font-size: 12px; color: var(--text2); padding-top: 6px; }
.boss-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.boss-chip { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid #f0e3d8;
background: #fff; color: var(--text2); cursor: pointer; font-family: inherit; transition: all .15s; }
.boss-chip:hover { border-color: #f6c9a8; color: var(--primary); }
.boss-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.boss-more { display: flex; align-items: center; justify-content: space-between; width: 100%;
margin-top: 13px; padding: 10px 13px; border-radius: 12px; border: 1px dashed #eadfd4;
background: #fffbf7; color: var(--text2); font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left; }
.boss-more i { font-style: normal; color: var(--primary); font-weight: 600; }
.boss-adv { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #f0e3d8; }
.boss-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.boss-lab { display: block; margin-bottom: 11px; font-size: 12.5px; color: var(--text2); }
.boss-lab input, .boss-lab textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
padding: 9px 11px; border-radius: 11px; border: 1.5px solid #eee3d9; background: #fff;
color: var(--text); font-size: 13.5px; font-family: inherit; outline: none; resize: vertical; }
.boss-lab input:focus, .boss-lab textarea:focus { border-color: var(--primary); }
.boss-types { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
.boss-type { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px;
border-radius: 14px; border: 1.5px solid #f0e6dd; background: #fff; cursor: pointer;
font-family: inherit; text-align: left; transition: all .16s; overflow: hidden; }
.boss-type::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--tc, #f95901); opacity: 0; transition: opacity .16s; }
.boss-type:hover { border-color: #f4c9a9; }
.boss-type.on { border-color: var(--tc, #f95901); background: #fffaf5; }
.boss-type.on::before { opacity: 1; }
.boss-type-ico { flex: none; font-size: 19px; line-height: 1; }
.boss-type-main { flex: 1; min-width: 0; }
.boss-type-main b { display: block; font-size: 13.5px; color: var(--text); font-weight: 700; }
.boss-type-main i { display: block; margin-top: 3px; font-size: 11px; color: var(--text2);
font-style: normal; line-height: 1.5; }
.boss-type-tick { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #e6dbd1;
color: transparent; font-size: 11px; line-height: 16px; text-align: center; transition: all .16s; }
.boss-type.on .boss-type-tick { background: var(--tc, #f95901); border-color: var(--tc, #f95901); color: #fff; }
.boss-count { margin-top: 11px; font-size: 12px; color: var(--text2); }
.boss-plats { display: flex; flex-wrap: wrap; gap: 7px; }
.boss-note { margin: 4px 2px 14px; padding: 11px 13px; border-radius: 12px; font-size: 12px; line-height: 1.75;
color: #8a6d3b; background: #fffbeb; border: 1px solid #fde9b8; }
.boss-note b { color: #8a5a12; }
.boss-actions { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 6px; }
.boss-gen { width: 100%; padding: 15px; border: none; border-radius: 16px; color: #fff; font-size: 15.5px;
font-weight: 700; font-family: inherit; cursor: pointer; letter-spacing: .02em;
background: linear-gradient(135deg, #ff8845 0%, #f94400 100%);
box-shadow: 0 8px 20px rgba(249, 89, 1, .22); transition: transform .12s, box-shadow .2s, opacity .2s; }
.boss-gen:active { transform: translateY(1px); }
.boss-gen:disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
.boss-gen.loading { opacity: .82; }
.boss-cost { font-size: 12px; color: var(--text2); }
.boss-err { margin-top: 10px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.65;
color: #a1291f; background: #fef3f2; border: 1px solid #fbcfcb; }
.boss-progress { margin-top: 12px; padding: 13px 14px; border-radius: 14px; background: #fff8f1; border: 1px solid #f6e2d1; }
.boss-prog-top { display: flex; align-items: center; justify-content: space-between;
font-size: 12.5px; color: var(--text2); margin-bottom: 9px; }
.boss-prog-top b { color: var(--primary); font-variant-numeric: tabular-nums; }
.boss-prog-bar { height: 5px; border-radius: 999px; background: #f3e3d5; overflow: hidden; }
.boss-prog-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #ffb063, #f94400); transition: width .4s ease; }
.boss-result { margin-top: 6px; }
.boss-profile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 12px 14px; border-radius: 14px; margin-bottom: 12px;
background: linear-gradient(120deg, #fff5ec, #fffaf5); border: 1px solid #f6e2d1; }
.boss-pf-lab { font-size: 11px; letter-spacing: .1em; color: #b98a5f; }
.boss-pf-main { font-size: 13.5px; font-weight: 700; color: var(--text); }
.boss-pf-sub { font-size: 11.5px; color: var(--text2); }
.boss-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: 8px; margin-bottom: 12px; }
.boss-tb-meta { font-size: 12px; color: var(--text2); }
.boss-tb-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.boss-tb { padding: 7px 12px; border-radius: 10px; border: 1.5px solid #eee3d9; background: #fff;
color: var(--text2); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: all .15s; }
.boss-tb:hover { border-color: var(--primary); color: var(--primary); }
.boss-tb-main { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.boss-tb-main:hover { background: #e04f00; color: #fff; }
.boss-switch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); cursor: pointer; }
.boss-openers { margin-bottom: 14px; padding: 13px 14px; border-radius: 14px;
background: #fffdf9; border: 1px dashed #eedcc9; }
.boss-openers-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.boss-openers-l { display: flex; flex-direction: column; gap: 7px; }
.boss-opener { padding: 8px 11px; border-radius: 10px; background: #fff; border: 1px solid #f2e6da;
font-size: 13px; line-height: 1.6; color: var(--text); cursor: pointer; transition: all .15s; }
.boss-opener:hover { border-color: var(--primary); color: var(--primary); }
.boss-list { display: flex; flex-direction: column; gap: 14px; }
.boss-card { position: relative; border-radius: 16px; border: 1px solid #f0e6dd; background: #fff;
padding: 15px 15px 13px 19px; overflow: hidden; }
.boss-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, #f95901); }
.boss-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.boss-card-ico { font-size: 15px; }
.boss-card-type { font-size: 12.5px; font-weight: 700; color: var(--tc, #f95901); }
.boss-card-sec { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #f7f1ec; color: var(--text2); }
.boss-card-no { margin-left: auto; font-size: 11px; color: #cbb9a8; font-variant-numeric: tabular-nums; }
.boss-hook { font-size: 16.5px; font-weight: 800; line-height: 1.5; color: #1c1410; margin-bottom: 10px; }
.boss-script { font-size: 14px; line-height: 1.92; color: #3a2a1e; word-break: break-word; }
.boss-warn { margin-top: 11px; padding: 8px 11px; border-radius: 10px; font-size: 12px; line-height: 1.6;
color: #a1291f; background: #fef3f2; border: 1px solid #fbcfcb; }
.boss-shoot { margin-top: 12px; border-radius: 12px; background: #f9f6f3; padding: 10px 12px; }
.boss-shoot summary { font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; }
.boss-shoot p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.72; color: #5a4636; }
.boss-shoot b { display: inline-block; min-width: 34px; color: var(--primary); font-weight: 600; margin-right: 4px; }
.boss-card-f { display: flex; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px dashed #f2e7dd; }
.boss-mini { padding: 6px 11px; border-radius: 9px; border: 1.5px solid #eee3d9; background: #fff;
color: var(--text2); font-size: 12px; font-family: inherit; cursor: pointer; transition: all .15s; }
.boss-mini:hover { border-color: var(--primary); color: var(--primary); }
.boss-tips { margin-top: 14px; padding: 13px 15px; border-radius: 14px; background: #f8fbf8; border: 1px solid #e2f0e2; }
.boss-tips-h { font-size: 12.5px; font-weight: 700; color: #3f6b3f; margin-bottom: 8px; }
.boss-tips-l { margin: 0; padding-left: 18px; }
.boss-tips-l li { font-size: 12.5px; line-height: 1.8; color: #4b7a4b; }
.boss-foot { display: flex; gap: 8px; margin: 16px 0 4px; }
.boss-foot .boss-tb { flex: 1; text-align: center; padding: 11px; }
.boss-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 14px);
background: rgba(28, 20, 14, .92); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 999px;
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1200; max-width: 80vw; text-align: center; }
.boss-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px) {
.boss-types { grid-template-columns: 1fr; }
.boss-2col { grid-template-columns: 1fr; }
.boss-hero-t { font-size: 22px; }
}
/* ==========================================================================
选题灵感（运营板块 · 2026-09-13）
--------------------------------------------------------------------------
视觉取向：这是「创作灵感」类功能，刻意**不用**站点暖橙、也不用「对标账号分析」的靛紫，
走**深墨青 → 孔雀蓝 + 薄荷强调**，做出「编辑台 / 灵感本」的气质，一眼能和站内其它 AI 功能分开。
全部类名以 tp- 前缀（Topic），避免与既有模块（ac- / mw- / ls- / gd-）冲突。
⚠️ 本模块所有用 hidden 属性做显隐的元素，都在末尾有 [hidden] 兜底 ——
作者样式的 display:grid/flex 优先级高于浏览器默认的 [hidden]{display:none}，
不写兜底的症状是「一进页面就展开着，点开/收起没反应」（本项目已经踩过 4 批）。
========================================================================== */
.tp-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 20px 20px;
margin-bottom: 14px; color: #fff;
background: linear-gradient(135deg, #08232a 0%, #0d3b45 48%, #10606b 100%); }
.tp-hero-glow { position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(46, 230, 197, .34), transparent 70%); pointer-events: none; }
.tp-hero-glow2 { position: absolute; left: -70px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 179, 71, .20), transparent 70%); pointer-events: none; }
.tp-hero-tag { position: relative; display: inline-block; font-size: 11px; letter-spacing: .16em;
color: #9ff0dc; border: 1px solid rgba(159, 240, 220, .40); border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; }
.tp-hero-t { position: relative; font-size: 27px; font-weight: 800; line-height: 1.28; }
.tp-hero-s { position: relative; margin-top: 10px; font-size: 13px; line-height: 1.62; color: rgba(255, 255, 255, .74); }
.tp-hero-flow { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.tp-fchip { font-size: 11.5px; padding: 5px 12px; border-radius: 999px;
background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .86); }
.tp-fchip.on { background: linear-gradient(135deg, #17c9a5, #2ee6c5); color: #052a24; font-weight: 700; }
.tp-hero-flow i { font-style: normal; color: rgba(255, 255, 255, .34); }
/* ---- 关键词输入 ---- */
.tp-card { margin-bottom: 14px; }
.tp-kw { display: flex; gap: 8px; }
.tp-inp { flex: 1; min-width: 0; font-family: inherit; font-size: 15px; color: var(--text);
background: #f4fbfa; border: 1.5px solid #d7ebe8; border-radius: 12px; padding: 12px 13px; outline: none;
transition: border-color .18s, background .18s; }
.tp-inp::placeholder { color: #9fb7b6; }
.tp-inp:focus { border-color: #2ee6c5; background: #fff; box-shadow: 0 0 0 3px rgba(46, 230, 197, .12); }
.tp-go { flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800;
color: #052a24; padding: 0 20px; border-radius: 12px;
background: linear-gradient(135deg, #17c9a5 0%, #2ee6c5 100%);
box-shadow: 0 6px 16px rgba(23, 201, 165, .26); transition: transform .14s, opacity .14s; }
.tp-go:active { transform: translateY(1px); }
.tp-go:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.tp-more-btn { display: block; width: 100%; margin-top: 10px; cursor: pointer; font-family: inherit;
font-size: 12.5px; color: #0e7d72; background: #f1fbf8; border: 1px dashed #bfe8e0;
border-radius: 11px; padding: 9px 12px; text-align: left; transition: all .16s; }
.tp-more-btn:hover { background: #e9f8f4; border-color: #8fdccd; }
.tp-more { display: grid; gap: 10px; margin-top: 12px; }
.tp-lab { display: block; font-size: 12.5px; color: var(--text2); }
.tp-lab input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font-family: inherit;
font-size: 14px; color: var(--text); background: #fafdfd; border: 1.5px solid #e2efee;
border-radius: 11px; padding: 10px 12px; outline: none; transition: border-color .18s; }
.tp-lab input:focus { border-color: #2ee6c5; background: #fff; }
.tp-cost { margin-top: 12px; font-size: 11.5px; color: var(--text2); text-align: center; }
/* ---- 错误 / 进度 ---- */
.tp-err { margin-bottom: 14px; font-size: 13px; line-height: 1.6; color: #b42318;
background: #fef3f2; border: 1px solid #fecdca; border-radius: 12px; padding: 11px 13px; }
.tp-progress { margin-bottom: 16px; background: #fff; border: 1px solid #e3efec; border-radius: 16px; padding: 16px; }
.tp-prog-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text); }
.tp-prog-top b { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.tp-prog-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: #e9f5f2; overflow: hidden; }
.tp-prog-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #17c9a5, #2ee6c5); transition: width .5s ease; }
.tp-prog-steps { margin-top: 12px; display: grid; gap: 6px; }
.tp-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #a9c0bf; }
.tp-step .tp-sico { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #d5eae6;
flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; }
.tp-step.done { color: var(--text); }
.tp-step.done .tp-sico { background: #17c9a5; border-color: #17c9a5; color: #fff; }
.tp-step.cur { color: #0e8f79; font-weight: 700; }
.tp-step.cur .tp-sico { border-color: #2ee6c5; border-top-color: transparent; animation: tp-spin .8s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
/* ---- 选题清单 ---- */
.tp-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 10px; }
.tp-sec-t { font-size: 15px; font-weight: 800; color: var(--text); padding-left: 10px; border-left: 4px solid #17c9a5; }
.tp-sec-hint { font-size: 11.5px; color: var(--text2); }
.tp-group { margin-bottom: 16px; }
.tp-group-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.tp-group-ix { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center; color: #052a24;
background: linear-gradient(135deg, #17c9a5, #2ee6c5); }
.tp-group-name { font-size: 14.5px; font-weight: 800; color: var(--text); }
.tp-group-tag { font-size: 11px; color: #0e7d72; background: #ecf9f6; border: 1px solid #c9efe7;
border-radius: 999px; padding: 2px 9px; }
.tp-group-n { margin-left: auto; font-size: 11.5px; color: var(--text2); }
.tp-topics { display: grid; gap: 10px; }
.tp-topic { background: #fff; border: 1px solid #e6f1ef; border-radius: 16px; padding: 14px 14px 12px;
transition: border-color .18s, box-shadow .18s, transform .14s; }
.tp-topic:hover { border-color: #b6e9df; box-shadow: 0 6px 18px rgba(13, 59, 69, .07); }
.tp-topic-hd { display: flex; gap: 9px; align-items: flex-start; }
.tp-num { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
border-radius: 8px; font-size: 12.5px; font-weight: 800; color: #0e7d72; background: #eaf8f5;
display: flex; align-items: center; justify-content: center; }
.tp-title { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.5; color: #0f2b33; }
.tp-meta { display: grid; gap: 5px; margin: 10px 0 0 33px; }
.tp-meta-i { font-size: 12.5px; line-height: 1.55; color: #3f5d64; }
.tp-meta-i b { display: inline-block; font-size: 11px; font-weight: 700; color: #0e7d72;
background: #f0fbf8; border-radius: 5px; padding: 1px 6px; margin-right: 6px; }
.tp-hook { margin: 10px 0 0 33px; font-size: 13px; line-height: 1.62; color: #24484f;
background: #f6fdfb; border-left: 3px solid #2ee6c5; border-radius: 0 10px 10px 0; padding: 8px 11px; }
.tp-hook b { font-size: 11px; font-weight: 800; color: #0b6e5f; margin-right: 6px; letter-spacing: .04em; }
.tp-hook i { font-style: normal; color: #9dc9c0; }
.tp-write { display: block; width: 100%; margin-top: 11px; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 700; color: #0b6e5f; background: #f4fbf9;
border: 1px solid #cdeee7; border-radius: 11px; padding: 9px; transition: all .16s; }
.tp-write:hover { background: linear-gradient(135deg, #17c9a5, #2ee6c5); color: #052a24; border-color: transparent; }
.tp-write:disabled { opacity: .5; cursor: not-allowed; }
.tp-write:disabled:hover { background: #f4fbf9; color: #0b6e5f; border-color: #cdeee7; }
.tp-topic.tp-writing { border-style: dashed; border-color: #a9e4d8; }
.tp-topic.tp-writing::after { content: ''; display: block; width: 26px; height: 3px; margin-top: 9px;
border-radius: 999px; background: linear-gradient(90deg, #17c9a5, #2ee6c5); animation: tp-pulse 1s ease-in-out infinite; }
@keyframes tp-pulse { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
/* ---- 工具栏 ---- */
.tp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tp-tb { flex: 1 1 auto; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
color: #0b6e5f; background: #f6fdfb; border: 1px solid #cdeee7; border-radius: 12px; padding: 11px 14px;
transition: all .16s; }
.tp-tb:hover { background: #eaf8f5; border-color: #8fdccd; }
.tp-tb-main { color: #052a24; background: linear-gradient(135deg, #17c9a5, #2ee6c5); border-color: transparent;
font-weight: 800; box-shadow: 0 6px 16px rgba(23, 201, 165, .22); }
.tp-tb-main:hover { background: linear-gradient(135deg, #12b39a, #26d8ba); }
.tp-note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: #6b8790;
background: #f7fcfb; border-left: 3px solid #cdeee7; border-radius: 0 10px 10px 0; padding: 9px 12px; }
.tp-note b { color: #0b6e5f; }
/* ---- 文案区 ---- */
.tp-script-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.tp-script-tag { font-size: 11px; font-weight: 800; color: #052a24; letter-spacing: .06em;
background: linear-gradient(135deg, #17c9a5, #2ee6c5); border-radius: 999px; padding: 3px 10px; }
.tp-script-topic-l { font-size: 13px; color: #0f2b33; font-weight: 700; line-height: 1.5; }
.tp-report { background: #fff; border: 1px solid #e6f1ef; border-radius: 18px; padding: 20px 18px; }
.tp-report .tp-waiting { font-size: 13.5px; color: var(--text2); }
.tp-report h1 { font-size: 20px; font-weight: 800; line-height: 1.35; padding-bottom: 12px;
margin-bottom: 14px; border-bottom: 2px solid #eaf8f5; }
.tp-report h2 { font-size: 16px; font-weight: 800; margin: 20px 0 10px; padding-left: 11px;
border-left: 4px solid #2ee6c5; line-height: 1.4; }
.tp-report h3 { font-size: 14.5px; font-weight: 800; color: #0b6e5f; margin: 16px 0 9px;
display: flex; align-items: center; gap: 7px; }
.tp-report h3::after { content: ''; flex: 1; height: 1px; background: #e6f4f1; }
.tp-report h4 { font-size: 13.5px; font-weight: 700; margin: 13px 0 7px; color: #0b6e5f; }
.tp-report p { font-size: 14.5px; line-height: 1.9; margin: 10px 0; color: #24484f; }
.tp-report ul { margin: 8px 0 10px; padding-left: 20px; }
.tp-report li { font-size: 14px; line-height: 1.85; margin: 6px 0; color: #24484f; }
.tp-report strong { font-weight: 800; color: #0f2b33; }
.tp-report code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
background: #f1fbf8; color: #0b6e5f; border-radius: 5px; padding: 1px 5px; }
/* ---- toast ---- */
.tp-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px); z-index: 90;
background: rgba(8, 35, 42, .94); color: #fff; font-size: 13px; font-weight: 600;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; max-width: 84vw; text-align: center; }
.tp-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ---- hidden 兜底（必须放最后，见文件头注释）---- */
.tp-more[hidden], .tp-err[hidden], .tp-progress[hidden], .tp-toast[hidden],
#tpIdeas[hidden], #tpScript[hidden], #tpCanvas[hidden], #tpMore[hidden] { display: none !important; }
@media (max-width: 380px) {
.tp-hero-t { font-size: 23px; }
.tp-title { font-size: 14.5px; }
.tp-toolbar .tp-tb { flex: 1 1 44%; }
}
/* ===================== 模特换装（视频 · sub-modelvideo） ===================== */
/* 整站是浅色橙主题；视频功能用一块深色渐变 + 橙色辉光做"影视感"的对比锚点（与 AI写真 同族但更冷） */
.mv-hero { position:relative; overflow:hidden; border-radius:22px; padding:20px 18px 18px; margin-bottom:14px;
background:radial-gradient(120% 140% at 12% 0%, rgba(255,122,46,.38) 0%, rgba(255,122,46,0) 55%),
linear-gradient(150deg, #1b1424 0%, #16121c 55%, #241a1a 100%);
color:#fff; box-shadow:0 12px 28px rgba(38,24,40,.3); }
.mv-hero::after { content:''; position:absolute; left:-40px; bottom:-56px; width:160px; height:160px;
border-radius:50%; background:radial-gradient(circle, rgba(255,140,90,.42), rgba(255,140,90,0) 68%); }
.mv-hero-tag { position:relative; display:inline-block; font-size:11px; letter-spacing:.6px; font-weight:600;
color:#ffd9bd; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
border-radius:999px; padding:4px 11px; }
.mv-hero-t { position:relative; font-size:22px; font-weight:800; letter-spacing:.8px; margin-top:11px; }
.mv-hero-s { position:relative; font-size:12.5px; line-height:1.65; color:rgba(255,255,255,.78); margin-top:7px; }
.mv-hero-meta { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.mv-hero-meta span { font-size:11.5px; color:#ffe6d5; background:rgba(255,255,255,.1); border-radius:999px; padding:5px 11px; }
.mv-note { font-size:12px; color:var(--text2); line-height:1.6; margin-top:9px; }
.mv-counter { text-align:right; font-size:11.5px; color:var(--text2); margin-top:5px; }
.chip .mv-chip-hint { display:block; font-size:10.5px; font-style:normal; opacity:.6; margin-top:2px; }
/* 两个上传位 */
.mv-slots { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.mv-slot { position:relative; aspect-ratio:3 / 4; border:1.5px dashed #f0c9a8; border-radius:16px;
background:#fffaf6; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .15s, border-color .15s; }
.mv-slot:active { background:#fff2e8; border-color:var(--primary); }
.mv-slot.has { border-style:solid; border-color:#ffdcbf; background:#fff; }
.mv-prev { display:none; width:100%; height:100%; object-fit:cover; }
.mv-slot.has .mv-prev { display:block; }
.mv-slot.has .mv-slot-hint { display:none; }
.mv-slot-hint { text-align:center; padding:10px; }
.mv-slot-ico { font-size:26px; line-height:1; }
.mv-slot-t { font-size:13px; font-weight:700; margin-top:7px; }
.mv-slot-s { font-size:11px; color:var(--text2); margin-top:3px; line-height:1.45; }
/* 进度 */
.mv-progress { margin-top:12px; }
.mv-bar-wrap { height:6px; border-radius:999px; background:#ffe9d9; overflow:hidden; }
.mv-bar { height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .5s ease; }
.mv-status { font-size:12px; color:var(--text2); margin-top:8px; line-height:1.6; min-height:19px; }
/* 两步成果 */
.mv-step { margin-top:16px; border-radius:18px; background:#fff; border:1px solid #ffe6d5;
box-shadow:0 6px 16px rgba(120,72,40,.08); overflow:hidden; }
.mv-step-h { display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:11px 13px; font-size:13px; font-weight:700; background:#fff8f2; }
.mv-meta { font-size:11px; font-weight:500; color:var(--text2); }
.mv-dress-img { display:block; width:100%; max-height:520px; object-fit:contain; background:#faf6f2; }
.mv-video { display:block; width:100%; max-height:560px; background:#0d0a10; }
.mv-bar2 { display:flex; gap:8px; padding:10px 12px 12px; }
.mv-mini { flex:1; border:none; border-radius:10px; padding:8px 0; font-size:12px; font-weight:600;
background:#fff1e7; color:#3a2a1e; cursor:pointer; }
.mv-mini:active { background:#ffe6d5; }
.mv-mini.primary { background:var(--grad); color:#fff; }
.mv-toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,14px);
background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px;
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.mv-toast.on { opacity:1; transform:translate(-50%,0); }
@media (max-width:360px) { .mv-hero-t { font-size:19px; } }
.mv-alt-btn { display:block; width:100%; margin-top:9px; border:1.5px solid #ffdcbf; background:#fffaf6;
color:#c2410c; border-radius:999px; padding:11px 0; font-size:13.5px; font-weight:600; cursor:pointer; }
.mv-alt-btn:active { background:#fff2e8; }
/* ==========================================================================
短视频 IP 策划（运营板块）
—— 与「对标账号分析」同属运营家族（紫调），但差异化：
① 头牌入口卡用深墨紫，跟橙色的一键爆款笔记区分开
② 主 CTA 用站点主色橙，保证在紫调页面里最显眼
③ 章节进度条用「橙→紫」渐变
命名后缀统一 ip-，与 .chips/.chip 分开（避免撞上 app.js 的通用单选绑定）
========================================================================== */
/* ---- 运营板块头牌入口（复用 .combo-card 的点击委托，这里覆盖外观）---- */
.combo-card.ip-entry {
position: relative; overflow: hidden;
display: flex; align-items: stretch; gap: 0;
background: linear-gradient(118deg, #1a1130 0%, #3a2263 46%, #6d2a72 100%);
border-radius: 20px; padding: 18px 18px 16px;
margin-bottom: 16px;
box-shadow: 0 12px 28px rgba(58, 34, 99, .34);
border: 1px solid rgba(255, 255, 255, .10);
}
.combo-card.ip-entry:active { transform: scale(.985); }
.ip-entry-glow {
position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 168, 92, .30), transparent 68%); pointer-events: none;
}
.ip-entry-body { position: relative; flex: 1; min-width: 0; }
.ip-entry-tag {
display: inline-block; font-size: 10.5px; letter-spacing: .16em; font-weight: 700;
color: #ffd9a8; border: 1px solid rgba(255, 200, 140, .38); border-radius: 999px;
padding: 2.5px 10px; margin-bottom: 9px;
background: rgba(255, 168, 92, .12);
}
.ip-entry-name {
font-size: 20px; font-weight: 800; letter-spacing: .3px; color: #fff; line-height: 1.28;
}
.ip-entry-sub {
margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .72);
}
.ip-entry-flow {
display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap;
}
.ip-entry-flow span {
font-size: 11px; font-weight: 600; color: #e7dcff;
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px; padding: 3px 9px;
}
.ip-entry-flow i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .40); }
.ip-entry-ico {
position: relative; flex: 0 0 auto; align-self: center; font-size: 34px; margin-left: 10px;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .30));
}
/* ---- 子页 hero ---- */
.ip-hero {
position: relative; overflow: hidden; border-radius: 20px; padding: 26px 20px 20px;
margin-bottom: 14px; color: #fff;
background: linear-gradient(135deg, #171032 0%, #2c1f56 48%, #5b2b7a 100%);
}
.ip-hero-glow {
position: absolute; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 168, 92, .32), transparent 70%); pointer-events: none;
}
.ip-hero-glow2 {
position: absolute; left: -60px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(143, 123, 255, .34), transparent 70%); pointer-events: none;
}
.ip-hero-tag {
position: relative; display: inline-block; font-size: 11px; letter-spacing: .16em;
color: #ffd9a8; border: 1px solid rgba(255, 200, 140, .38); border-radius: 999px;
padding: 3px 11px; margin-bottom: 12px; background: rgba(255, 168, 92, .12);
}
.ip-hero-t { position: relative; font-size: 27px; font-weight: 800; line-height: 1.28; }
.ip-hero-s {
position: relative; margin-top: 10px; font-size: 13px; line-height: 1.62;
color: rgba(255, 255, 255, .74);
}
.ip-hero-flow { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.ip-fchip {
font-size: 11.5px; font-weight: 600; color: #ded5ff;
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px; padding: 4px 11px;
}
.ip-fchip.on { color: #2a1c4d; background: #ffd9a8; border-color: transparent; }
.ip-hero-flow i { font-style: normal; color: rgba(255, 255, 255, .38); font-size: 12px; }
/* ---- 表单卡 ---- */
.ip-card { margin-bottom: 14px; }
.ip-industry {
width: 100%; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--text);
background: #fbfaff; border: 1.5px solid #e8e2f8; border-radius: 13px;
padding: 12px 13px; resize: vertical; box-sizing: border-box; transition: border-color .16s, background .16s;
}
.ip-industry:focus { outline: none; border-color: #8f7bff; background: #fff; }
.ip-industry::placeholder { color: #b6aecd; }
.ip-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--text2); }
.ip-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ip-lab {
display: block; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.ip-lab input, .ip-lab textarea {
margin-top: 6px; width: 100%; box-sizing: border-box; font-family: inherit;
font-size: 13.5px; color: var(--text); background: #fbfaff;
border: 1.5px solid #e8e2f8; border-radius: 11px; padding: 10px 12px;
transition: border-color .16s, background .16s;
}
.ip-lab input:focus, .ip-lab textarea:focus { outline: none; border-color: #8f7bff; background: #fff; }
.ip-lab input::placeholder, .ip-lab textarea::placeholder { color: #b6aecd; font-size: 12.5px; }
.ip-lab-full { display: block; margin-top: 14px; }
.ip-lab-full textarea { resize: vertical; }
.ip-field { margin-top: 15px; }
.ip-fname { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ip-chip {
font-size: 12.5px; font-weight: 600; color: #6d6390; cursor: pointer;
background: #f7f5ff; border: 1.5px solid #ece7fa; border-radius: 999px;
padding: 7px 13px; transition: all .15s; user-select: none;
}
.ip-chip:active { transform: scale(.96); }
.ip-chip.on {
color: #fff; background: linear-gradient(135deg, #6d5bd0, #8f7bff);
border-color: transparent; box-shadow: 0 4px 12px rgba(109, 91, 208, .26);
}
/* ---- 操作区 ---- */
.ip-actions { margin-top: 16px; }
.ip-gen {
display: block; width: 100%; border: none; cursor: pointer; color: #fff; font-family: inherit;
font-size: 16.5px; font-weight: 800; letter-spacing: .02em; padding: 15px; border-radius: 15px;
background: linear-gradient(135deg, #ff8a3d 0%, #f95901 100%);
box-shadow: 0 10px 24px rgba(249, 89, 1, .30);
transition: transform .14s, box-shadow .14s, opacity .14s;
}
.ip-gen:active { transform: translateY(1px); }
.ip-gen:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ip-cost { margin-top: 9px; text-align: center; font-size: 11.5px; color: var(--text2); }
.ip-err {
margin-top: 14px; font-size: 13px; line-height: 1.6; color: #b42318;
background: #fef3f2; border: 1px solid #fecdca; border-radius: 12px; padding: 11px 13px;
}
/* ---- 进度 ---- */
.ip-progress {
margin-top: 16px; background: #fff; border: 1px solid #efe9f8;
border-radius: 16px; padding: 16px;
}
.ip-prog-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text); }
.ip-prog-top b { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.ip-prog-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: #f1ecfb; overflow: hidden; }
.ip-prog-bar i {
display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #f95901, #8f7bff); transition: width .5s ease;
}
.ip-chapters { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chap {
font-size: 11px; font-weight: 600; color: #b3aac9;
background: #faf8ff; border: 1px solid #f0ecfb; border-radius: 999px; padding: 4px 10px;
transition: all .25s;
}
.ip-chap.done { color: #5b4bb5; background: #f2eeff; border-color: #ddd4fa; }
.ip-chap.cur {
color: #fff; background: linear-gradient(135deg, #6d5bd0, #8f7bff);
border-color: transparent; box-shadow: 0 3px 10px rgba(109, 91, 208, .28);
}
/* ---- 结果 ---- */
.ip-result { margin-top: 16px; }
.ip-doc {
background: #fff; border: 1px solid #efe9f8; border-radius: 18px; padding: 20px 18px;
}
.ip-doc h1 {
font-size: 21px; font-weight: 800; line-height: 1.35; padding-bottom: 12px;
margin: 0 0 16px; border-bottom: 2px solid #f1ecfb;
}
.ip-doc h2 {
font-size: 16.5px; font-weight: 800; margin: 22px 0 11px; padding-left: 11px;
border-left: 4px solid #f95901; line-height: 1.4;
}
.ip-doc h2:first-of-type { margin-top: 4px; }
.ip-doc h3 { font-size: 14.5px; font-weight: 700; color: #5b4bb5; margin: 15px 0 8px; }
.ip-doc h4 { font-size: 13.5px; font-weight: 700; margin: 13px 0 7px; color: #4a3d7a; }
.ip-doc p { font-size: 14px; line-height: 1.82; margin: 9px 0; color: #403353; }
.ip-doc ul, .ip-doc ol { margin: 8px 0 10px; padding-left: 21px; }
.ip-doc li { font-size: 14px; line-height: 1.82; margin: 5px 0; color: #403353; }
.ip-doc strong { font-weight: 700; color: #251c3d; }
.ip-doc em {
font-style: normal; background: #f3efff; color: #5b4bb5;
border-radius: 5px; padding: 1px 5px; font-weight: 600;
}
.ip-doc hr { border: none; border-top: 1px dashed #ece7fa; margin: 18px 0; }
.ip-doc blockquote {
margin: 10px 0; padding: 9px 13px; background: #faf8ff; border-left: 3px solid #c9bcf7;
border-radius: 0 10px 10px 0; font-size: 13px; color: #6d6390;
}
.ip-doc code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
background: #f4f1fd; color: #5b4bb5; border-radius: 5px; padding: 1px 5px;
}
/* 表格可能很宽（排期表 4 列），单独给横向滚动容器，页面不跟着横滚 */
.ip-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.ip-tablewrap table { min-width: 100%; }
.ip-doc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ip-doc th, .ip-doc td { border: 1px solid #ece7fa; padding: 7px 9px; text-align: left; vertical-align: top; }
.ip-doc th { background: #faf8ff; font-weight: 700; white-space: nowrap; }
.ip-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ip-tb {
flex: 1 1 auto; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
color: #5b4bb5; background: #faf8ff; border: 1px solid #e0d8fa; border-radius: 12px;
padding: 11px 14px; transition: all .16s;
}
.ip-tb:hover { background: #f2eeff; border-color: #c9bcf7; }
.ip-tb-main {
color: #fff; background: linear-gradient(135deg, #f95901, #ff8a3d);
border-color: transparent; box-shadow: 0 6px 16px rgba(249, 89, 1, .26);
}
.ip-tb-main:hover { background: linear-gradient(135deg, #e04f00, #f97a30); }
.ip-toast {
position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px); z-index: 90;
background: rgba(25, 29, 58, .94); color: #fff; font-size: 13px; font-weight: 600;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; max-width: 84vw; text-align: center;
}
.ip-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* hidden 属性会被作者样式盖掉：这些元素显隐靠 hidden，必须显式兜底 */
.ip-progress[hidden], .ip-result[hidden], .ip-error[hidden] { display: none !important; }
@media (max-width: 380px) {
.ip-hero-t { font-size: 23px; }
.ip-entry-name { font-size: 18px; }
.ip-grid2 { grid-template-columns: 1fr; }
.ip-toolbar .ip-tb { flex: 1 1 44%; }
}
/* ===== 视频反推词 v2 · 爆款视频拆解（2026-09-13）===== */
.vr-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad); color:#fff; margin-bottom:14px; box-shadow:0 8px 20px rgba(249,89,1,.26); }
.vr-banner-ico { font-size:30px; line-height:1; }
.vr-banner-tx { min-width:0; }
.vr-banner-t { font-size:17px; font-weight:700; letter-spacing:.5px; }
.vr-banner-s { font-size:12.5px; opacity:.92; margin-top:3px; line-height:1.5; }
.vr-ct { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vr-tag { font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; background:#e8f8ef; color:#10844b; }
.vr-tag.ghost { background:var(--chip-bg); color:var(--primary); font-weight:600; }
.vr-drop { position:relative; border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:24px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.vr-drop:active { background:#fff2e8; }
.vr-drop.drag { border-color:var(--primary); background:#fff2e8; }
.vr-prev { display:none; width:100%; max-height:220px; border-radius:12px; background:#000; }
.vr-del { display:none; position:absolute; top:8px; right:8px; width:28px; height:28px; line-height:26px; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:18px; cursor:pointer; }
.vr-hint { display:block; }
.vr-cloud { font-size:30px; }
.vr-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.vr-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.vr-drop.has-video { padding:10px; border-style:solid; border-color:#ffdcbf; background:#fff; }
.vr-drop.has-video .vr-hint { display:none; }
.vr-drop.has-video .vr-prev { display:block; }
.vr-drop.has-video .vr-del { display:block; }
.vr-statline { margin-top:10px; }
.vr-badge { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:3px 11px; background:#f3f4f6; color:var(--text2); }
.vr-badge.ok { background:#e8f8ef; color:#10844b; }
.vr-or { display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--text2); font-size:12.5px; }
.vr-or::before, .vr-or::after { content:""; flex:1; height:1px; background:#f0e2d5; }
.vr-plats { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vr-plat { font-size:12px; padding:4px 11px; border-radius:999px; background:var(--chip-bg); color:var(--text2); border:1px solid transparent; transition:all .15s; }
.vr-plat.on { background:var(--grad); color:#fff; border-color:transparent; font-weight:700; }
/* ===== 进度特效（视频 / 图片反推词共用同一套皮肤）===== */
.vr-prog, .ir-prog { position:relative; overflow:hidden; margin:14px 0; padding:16px 16px 14px; border-radius:16px; background:#fff8f2; border:1px solid #ffe2cc; }
/* ⚠️ hidden 属性会被 display:grid/flex 盖掉 —— 这几个显隐元素必须显式兜底 */
.vr-prog[hidden], .ir-prog[hidden], .vr-imi[hidden] { display:none !important; }
.vr-prog-head, .ir-prog-head { display:flex; align-items:center; gap:9px; }
.vr-prog-spin, .ir-prog-spin { width:15px; height:15px; border-radius:50%; border:2px solid #ffd9bd; border-top-color:var(--primary); animation:vrsSpin .8s linear infinite; flex-shrink:0; }
@keyframes vrsSpin { to { transform:rotate(360deg); } }
.vr-prog-title, .ir-prog-title { font-size:14px; font-weight:700; color:var(--text); flex:1; }
.vr-prog-time, .ir-prog-time { font-size:12.5px; font-weight:700; color:var(--primary); font-variant-numeric:tabular-nums; }
.vr-prog-bar, .ir-prog-bar { height:6px; border-radius:999px; background:#ffe6d3; margin-top:12px; overflow:hidden; }
.vr-prog-bar > i, .ir-prog-bar > i { display:block; height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .35s ease-out; }
.vr-prog-steps, .ir-prog-steps { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:11px; }
.vr-step, .ir-step { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); transition:color .2s; }
.vr-step-dot, .ir-step-dot { width:7px; height:7px; border-radius:50%; background:#f0d9c6; flex-shrink:0; transition:background .2s, box-shadow .2s; }
.vr-step.on, .ir-step.on { color:var(--primary); font-weight:700; }
.vr-step.on .vr-step-dot, .ir-step.on .ir-step-dot { background:var(--primary); animation:vrsPulse 1.1s ease-in-out infinite; }
.vr-step.done .vr-step-dot, .ir-step.done .ir-step-dot { background:#34c37a; }
.vr-step.done, .ir-step.done { color:#10844b; }
@keyframes vrsPulse { 0%,100% { box-shadow:0 0 0 3px rgba(249,89,1,.14); } 50% { box-shadow:0 0 0 6px rgba(249,89,1,.06); } }
/* 顶部扫光：给「正在跑」一个持续动感（纯装饰，不吃点击） */
.vr-prog::after, .ir-prog::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%); transform:translateX(-100%); animation:vrsScan 2.4s ease-in-out infinite; }
@keyframes vrsScan { 0% { transform:translateX(-100%); } 60%,100% { transform:translateX(100%); } }
/* ===== 结果区 ===== */
.vr-head { padding:14px 16px; border-radius:16px; background:var(--grad); color:#fff; margin-bottom:12px; box-shadow:0 6px 16px rgba(249,89,1,.2); }
.vr-head-src { font-size:12px; opacity:.9; }
.vr-head-t { font-size:16px; font-weight:800; margin-top:5px; line-height:1.5; }
.vr-head-k { font-size:12.5px; opacity:.92; margin-top:5px; }
.vr-warn { font-size:12.5px; line-height:1.6; color:#b45309; background:#fff7e8; border:1px solid #ffe3b3; border-radius:12px; padding:11px 13px; margin-bottom:12px; }
.vr-extra:empty { display:none; }
.vr-card { background:var(--card); border-radius:16px; padding:14px 16px; margin-bottom:12px; box-shadow:0 2px 10px rgba(190,120,60,.08); }
.vr-card-h { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.vr-card-t { font-size:14px; font-weight:800; flex:1; }
.vr-copy, .vr-mini { font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; border:none; background:var(--chip-bg); color:var(--primary); cursor:pointer; }
.vr-copy:active, .vr-mini:active { opacity:.7; }
.vr-text { font-size:14px; line-height:1.85; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.vr-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vr-act { font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; border:1.5px solid #ffd9bd; background:#fff; color:var(--primary); cursor:pointer; }
.vr-act.primary { border:none; background:var(--grad); color:#fff; box-shadow:0 4px 12px rgba(249,89,1,.24); }
.vr-act:disabled { opacity:.6; cursor:default; }
.vr-topics { display:flex; flex-direction:column; gap:8px; }
.vr-topic { display:flex; align-items:flex-start; gap:9px; }
.vr-topic-n { width:19px; height:19px; line-height:19px; text-align:center; border-radius:50%; background:var(--grad); color:#fff; font-size:11px; font-weight:700; flex-shrink:0; margin-top:2px; }
.vr-topic-v { flex:1; font-size:13.5px; line-height:1.7; word-break:break-word; }
.vr-prompt { border-top:1px dashed #f2e2d4; padding-top:11px; margin-top:11px; }
.vr-prompt:first-child { border-top:none; padding-top:0; margin-top:0; }
.vr-prompt-h { display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
.vr-prompt-n { font-size:12.5px; font-weight:700; color:var(--text2); flex:1; }
.vr-prompt-cn { font-size:13.5px; line-height:1.75; word-break:break-word; }
.vr-prompt-en { font-size:12.5px; line-height:1.7; color:var(--text2); margin-top:6px; word-break:break-word; }
.vr-imi { margin-top:12px; padding:12px; border-radius:12px; background:#fff8f2; border:1px dashed #ffd9bd; }
.vr-imi-t { font-size:12.5px; color:var(--text2); margin-bottom:8px; }
.vr-imi-row { display:flex; gap:8px; flex-wrap:wrap; }
.vr-imi-inp { flex:1; min-width:140px; font-size:13.5px; padding:9px 12px; border-radius:10px; border:1px solid #f0d9c6; background:#fff; color:var(--text); outline:none; }
.vr-imi-inp:focus { border-color:var(--primary); }
.vr-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(28,20,14,.9); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.vr-toast.show { opacity:1; transform:translate(-50%,0); }
/* ===================== AI 模特（2026-09-13 升级）新增样式 ===================== */
.mv-count { font-size:11.5px; font-weight:600; color:var(--text2); }
.mv-fold { float:right; font-size:11.5px; font-weight:600; color:var(--primary); cursor:pointer; }
.mv-sub { font-size:12.5px; font-weight:700; margin:15px 0 7px; }
.mv-sub:first-of-type { margin-top:6px; }
.mv-row { display:flex; gap:9px; margin-top:13px; }
.mv-row .mv-alt-btn { flex:1; margin-top:0; }
.mv-slim { padding:12px; font-size:14px; }
.mv-new { border:1px solid #ffd9bd !important; box-shadow:0 8px 20px rgba(255,122,46,.10); }
.mv-models { display:flex; gap:11px; overflow-x:auto; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; }
.mv-models::-webkit-scrollbar { height:0; }
.mv-mcard { position:relative; flex:0 0 104px; border-radius:16px; background:#fff;
border:1.5px solid #ffe6d5; overflow:hidden; cursor:pointer;
transition:border-color .15s, box-shadow .15s, transform .15s; }
.mv-mcard.active { border-color:var(--primary); box-shadow:0 6px 16px rgba(255,122,46,.22); }
.mv-mcard:active { transform:scale(.97); }
.mv-mcard-img { position:relative; aspect-ratio:3 / 4; background:#faf6f2; }
.mv-mcard-img img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.mv-mcard-src { position:absolute; left:5px; top:5px; font-size:9.5px; font-weight:700; color:#fff;
background:rgba(0,0,0,.45); border-radius:999px; padding:2px 7px; }
.mv-mcard-n { font-size:11.5px; font-weight:600; text-align:center; padding:6px 4px 7px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mv-mcard-ops { position:absolute; right:4px; top:4px; display:flex; flex-direction:column; gap:4px; }
.mv-op { width:22px; height:22px; border:none; border-radius:7px; padding:0; font-size:12px; line-height:1;
color:#fff; background:rgba(0,0,0,.42); cursor:pointer; }
.mv-op-del { background:rgba(220,60,50,.72); }
.mv-mcard-add { border-style:dashed; border-color:#f0c9a8; background:#fffaf6; display:flex; flex-direction:column; }
.mv-mcard-addbox { flex:1; display:flex; align-items:center; justify-content:center; font-size:26px; color:#e9a97a; }
.mv-model-empty { text-align:center; padding:16px 12px 2px; }
.mv-me-ico { font-size:30px; line-height:1; }
.mv-me-t { font-size:13.5px; font-weight:700; margin-top:7px; }
.mv-me-s { font-size:11.5px; color:var(--text2); line-height:1.6; margin-top:5px; }
.mv-slots-1 { grid-template-columns:1fr; }
.mv-slots-1 .mv-slot { aspect-ratio:16 / 7; }
.mv-outfits { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mv-othumb { position:relative; width:62px; height:62px; border-radius:12px; overflow:hidden; border:1px solid #ffe6d5; }
.mv-othumb img { display:block; width:100%; height:100%; object-fit:cover; }
.mv-othumb-x { position:absolute; right:2px; top:2px; width:18px; height:18px; border:none; border-radius:50%;
padding:0; font-size:11px; line-height:1; color:#fff; background:rgba(0,0,0,.5); cursor:pointer; }
.mv-looks { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:12px 12px 4px; }
.mv-look { border-radius:14px; overflow:hidden; border:1.5px solid #ffe6d5; background:#faf6f2; }
.mv-look.active { border-color:var(--primary); box-shadow:0 0 0 2px rgba(255,122,46,.18); }
.mv-look img { display:block; width:100%; aspect-ratio:2 / 3; object-fit:cover; }
.mv-look-ops { display:flex; gap:5px; padding:7px; }
.mv-look-ops .mv-mini { flex:1; padding:6px 4px; font-size:11px; }
.mv-look-ph { aspect-ratio:2 / 3; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:6px; font-size:11.5px; color:var(--text2); }
.mv-look-ico { font-size:20px; line-height:1; }
.mv-spin { animation:mvspin 1.1s linear infinite; color:var(--primary); }
@keyframes mvspin { to { transform:rotate(360deg); } }
.mv-step .mv-note { padding:0 12px 12px; }
.mv-frame-row { display:flex; align-items:center; gap:11px; margin-top:6px; }
.mv-frame { position:relative; flex:0 0 88px; aspect-ratio:3 / 4; border-radius:14px; overflow:hidden;
border:1.5px dashed #f0c9a8; background:#fffaf6; display:flex; align-items:center; justify-content:center; }
.mv-frame.has { border-style:solid; border-color:var(--primary); }
.mv-frame img { display:none; width:100%; height:100%; object-fit:cover; object-position:top center; }
.mv-frame.has img { display:block; }
.mv-frame-ph { font-size:10.5px; color:var(--text2); text-align:center; padding:8px; line-height:1.55; }
.mv-frame.has .mv-frame-ph { display:none; }
.mv-frame-tx { flex:1; font-size:11.5px; color:var(--text2); line-height:1.65; }
/* 文件输入藏在容器里时，别被 flex/grid 的 display 盖掉（本项目踩过 5 次的老坑） */
.mv-slot input[hidden] { display:none !important; }
/* ==========================================================================
一键发布（多平台适配）
—— 从底部升起的弹层（sheet），每个平台一张卡、每个字段一个复制按钮。
用 hidden 显隐，必须配 [hidden]{display:none!important}（否则被 display:flex 盖掉）
========================================================================== */
body.pub-open { overflow: hidden; }
.pub-mask {
position: fixed; inset: 0; z-index: 120;
background: rgba(24, 18, 46, .52);
display: flex; align-items: flex-end; justify-content: center;
}
.pub-mask[hidden] { display: none !important; }
.pub-sheet {
position: relative; width: 100%; max-width: 560px;
max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
background: #fff; border-radius: 22px 22px 0 0;
box-shadow: 0 -12px 40px rgba(24, 18, 46, .28);
animation: pub-rise .26s cubic-bezier(.22, .8, .3, 1);
}
@keyframes pub-rise { from { transform: translateY(26px); opacity: .4; } to { transform: none; opacity: 1; } }
.pub-hd {
position: sticky; top: 0; z-index: 2;
background: linear-gradient(135deg, #1b1440 0%, #2f2260 52%, #5b3a86 100%);
color: #fff; padding: 20px 18px 16px; border-radius: 22px 22px 0 0;
}
.pub-hd-t { font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.pub-hd-s { margin-top: 6px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .74); padding-right: 34px; }
.pub-x {
position: absolute; right: 14px; top: 14px; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
font-size: 20px; line-height: 1; color: rgba(255, 255, 255, .8);
background: rgba(255, 255, 255, .12); border-radius: 50%;
}
.pub-x:active { transform: scale(.92); }
.pub-body { padding: 16px 18px 26px; }
.pub-sec { margin-bottom: 15px; }
.pub-lab { font-size: 12.5px; font-weight: 700; color: var(--text); display: block; }
.pub-lab-full { display: block; margin-bottom: 15px; }
.pub-lab-full input {
margin-top: 7px; width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px;
color: var(--text); background: #fbfaff; border: 1.5px solid #e8e2f8; border-radius: 11px; padding: 10px 12px;
}
.pub-lab-full input:focus { outline: none; border-color: #8f7bff; background: #fff; }
.pub-lab-full input::placeholder { color: #b6aecd; font-size: 12.5px; }
.pub-src {
margin-top: 7px; width: 100%; box-sizing: border-box; font-family: inherit;
font-size: 14px; line-height: 1.65; color: var(--text); background: #fbfaff;
border: 1.5px solid #e8e2f8; border-radius: 12px; padding: 11px 12px; resize: vertical;
}
.pub-src:focus { outline: none; border-color: #8f7bff; background: #fff; }
.pub-src::placeholder { color: #b6aecd; font-size: 12.5px; }
.pub-chips { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pub-chip {
font-size: 13px; font-weight: 600; color: #6d6390; cursor: pointer;
background: #f7f5ff; border: 1.5px solid #ece7fa; border-radius: 999px;
padding: 7px 14px; transition: all .15s; user-select: none;
}
.pub-chip:active { transform: scale(.96); }
.pub-chip.on {
color: #fff; background: linear-gradient(135deg, #6d5bd0, #8f7bff);
border-color: transparent; box-shadow: 0 4px 12px rgba(109, 91, 208, .26);
}
.pub-chips-tip { font-size: 11px; color: var(--text2); }
.pub-actions { margin-top: 4px; }
.pub-gen {
display: block; width: 100%; border: none; cursor: pointer; color: #fff; font-family: inherit;
font-size: 16px; font-weight: 800; letter-spacing: .02em; padding: 14px; border-radius: 14px;
background: linear-gradient(135deg, #ff8a3d 0%, #f95901 100%);
box-shadow: 0 10px 22px rgba(249, 89, 1, .28);
transition: transform .14s, box-shadow .14s, opacity .14s;
}
.pub-gen:active { transform: translateY(1px); }
.pub-gen:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pub-cost { margin-top: 8px; text-align: center; font-size: 11.5px; color: var(--text2); }
.pub-err {
margin-top: 12px; font-size: 13px; line-height: 1.6; color: #b42318;
background: #fef3f2; border: 1px solid #fecdca; border-radius: 12px; padding: 11px 13px;
}
.pub-progress { margin-top: 14px; background: #faf9ff; border: 1px solid #efe9f8; border-radius: 14px; padding: 13px; }
.pub-prog-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text); }
.pub-prog-top b { font-size: 12px; color: var(--text2); font-weight: 600; }
.pub-prog-bar { margin-top: 9px; height: 6px; border-radius: 999px; background: #f1ecfb; overflow: hidden; }
.pub-prog-bar i {
display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #f95901, #8f7bff); transition: width .5s ease;
}
.pub-result { margin-top: 14px; }
.pub-notice {
display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
font-size: 12.5px; line-height: 1.65; color: #7a5310; background: #fffbf0;
border: 1px solid #f5e3bd; border-radius: 12px; padding: 11px 13px;
}
.pub-notice b { font-size: 12px; color: #8a6d3b; }
.pub-pcard {
border: 1px solid #efe9f8; border-radius: 16px; padding: 14px; margin-bottom: 12px;
background: #fff;
}
.pub-phd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.pub-pname {
font-size: 15px; font-weight: 800; color: #2b2352; padding-left: 9px;
border-left: 3px solid #f95901; line-height: 1.3;
}
.pub-pacts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pub-tb {
font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
color: #5b4bb5; background: #faf8ff; border: 1px solid #e0d8fa;
border-radius: 10px; padding: 7px 11px; transition: all .15s;
}
.pub-tb:active { transform: scale(.97); }
.pub-tb-main { color: #fff; background: linear-gradient(135deg, #6d5bd0, #8f7bff); border-color: transparent; }
.pub-tb-deep { color: #a8480a; background: #fff4ec; border-color: #ffd9bf; }
.pub-field { margin-top: 10px; }
.pub-fhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pub-fname { font-size: 11.5px; font-weight: 700; color: #7c73a5; letter-spacing: .02em; }
.pub-cp {
font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
color: #5b4bb5; background: #f7f5ff; border: 1px solid #ece7fa;
border-radius: 8px; padding: 4px 9px;
}
.pub-cp:active { transform: scale(.95); }
.pub-fval {
margin-top: 5px; font-size: 13.5px; line-height: 1.75; color: #403353;
white-space: pre-wrap; word-break: break-word;
background: #fcfbff; border-radius: 10px; padding: 9px 11px;
}
.pub-fval-one { white-space: normal; }
.pub-field-warn .pub-fname { color: #b42318; }
.pub-field-warn .pub-fval { color: #93321f; background: #fff7f5; }
.pub-rhythm { margin-top: 12px; font-size: 13px; color: #403353; }
.pub-rhythm b { display: block; font-size: 12px; color: #7c73a5; margin-bottom: 6px; }
.pub-rhythm pre {
margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit;
font-size: 12.5px; line-height: 1.75; background: #fcfbff; border-radius: 10px; padding: 10px 11px;
}
.pub-remind {
margin-top: 12px; font-size: 13px; line-height: 1.75; color: #2f5f46;
background: #f1faf5; border: 1px solid #cfeadd; border-radius: 12px; padding: 11px 13px;
}
.pub-foot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pub-foot .pub-tb { flex: 1 1 44%; padding: 11px; font-size: 13.5px; }
.pub-note {
margin-top: 14px; font-size: 11.5px; line-height: 1.7; color: var(--text2);
background: #fafaf7; border-radius: 10px; padding: 10px 12px;
}
.pub-note b { color: var(--text); }
.pub-toast {
position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px); z-index: 130;
background: rgba(25, 29, 58, .94); color: #fff; font-size: 13px; font-weight: 600;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; max-width: 84vw; text-align: center;
}
.pub-toast.on { opacity: 1; transform: translate(-50%, 0); }
.pub-progress[hidden], .pub-result[hidden], .pub-error[hidden], .pub-err[hidden] { display: none !important; }
/* 文案结果区里「📤 一键发布」按钮：与「🎨 生成配图」并排，用品牌橙突出 */
.btn-copy.pub-open-btn {
color: #a8480a; background: #fff4ec; border-color: #ffd9bf;
}
.btn-copy.pub-open-btn:hover { background: #ffece0; }
@media (max-width: 380px) {
.pub-actions .pub-gen { font-size: 15px; padding: 13px; }
.pub-pacts { margin-left: 0; width: 100%; }
}
/* ⚠️ hidden 兜底：.hs-avatar img 是 display:block，会盖掉 UA 的 [hidden]{display:none}
→ 不写这行，热搜海报头像的 ![]()
实际仍是 block（本项目在 ic、uh、um、ls-adv、mw、vr
这几批已累计踩 6 次）。作者样式优先级高于浏览器默认，必须显式兜底。 */
.hs-avatar img[hidden] { display: none !important; }
/* ==========================================================================
爆款拆解（#sub-breakdown）报告区
上传区 / 链接区 / 进度条 / 提示条 全部复用上面的 vr- 那套类，本段只写报告专属样式。
注意：本段注释里不许再出现「星号紧跟斜杠」的序列（会提前终止注释、吞掉后面规则，
本项目已因这个坑吃过一次亏）。
========================================================================== */
/* 顶部横幅：品牌橙渐变 + 斜向光带 + 右侧「报告」装饰条。
注意基类 .vr-banner 写死了 color:#fff —— 只换背景不换文字色 = 白字糊在浅底上（2026-09-13 用户反馈）
→ 要么底色够深、要么文字改深色，二者必居其一。 */
.bd-banner { position: relative; overflow: hidden; color: #fff; padding-right: 92px;
background: linear-gradient(135deg, #f95901 0%, #ff7a2f 52%, #ffa451 100%);
box-shadow: 0 10px 26px rgba(249, 89, 1, .28); }
.bd-banner::before { content: ''; position: absolute; top: -60%; left: 32%; width: 34%; height: 220%;
background: linear-gradient(90deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%);
transform: rotate(16deg); pointer-events: none; }
.bd-banner::after { content: ''; position: absolute; right: 16px; top: 50%; margin-top: -35px;
width: 58px; height: 70px; border-radius: 11px;
background-color: rgba(255, 255, 255, .17);
background-image: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95)),
linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)),
linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)),
linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
background-size: 34px 4px, 34px 4px, 25px 4px, 34px 4px;
background-position: 12px 15px, 12px 27px, 12px 39px, 12px 51px; background-repeat: no-repeat;
border: 1px solid rgba(255, 255, 255, .34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(150, 52, 0, .16);
pointer-events: none; }
.bd-banner .vr-banner-ico { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
font-size: 21px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4);
border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.bd-banner .vr-banner-t { font-size: 17.5px; font-weight: 800; letter-spacing: .6px;
text-shadow: 0 1px 2px rgba(150, 52, 0, .3); }
.bd-banner .vr-banner-s { font-size: 12.5px; line-height: 1.62; opacity: 1; color: rgba(255, 255, 255, .95); }
@media (max-width: 400px) {
.bd-banner { padding-right: 18px; }
.bd-banner::after { display: none; }
}
/* 来源条 + 拆解中标记 */
/* 链接识别反馈条：用户粘一整段分享文字时，立刻告诉他「已认出链接」，
否则点开始拆解要干等几十秒才报错，体感就是半成品 */
.bd-detected { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px;
line-height: 1.65; border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.bd-detected b { font-weight: 600; word-break: break-all; }
.bd-detected-s { color: var(--text2); font-weight: 400; }
.bd-detected.ok { color: #1c7a4a; background: #f0fbf5; border: 1px solid #cdeeda; }
.bd-detected.ok b { color: #14663d; }
.bd-detected.no { color: #9a6b2f; background: #fff8ec; border: 1px solid #ffe6c2; }
.bd-src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text2); margin-bottom: 10px; }
.bd-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #fff0e6; color: var(--primary); font-weight: 700; }
.bd-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: bdPulse 1s ease-in-out infinite; }
@keyframes bdPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.bd-warn { font-size: 12.5px; line-height: 1.75; color: #9a6b2f; background: #fff8ec; border: 1px solid #ffe6c2; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.bd-loading { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); padding: 16px 4px; }
.bd-dots { display: inline-flex; gap: 4px; }
.bd-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-light); animation: bdBounce 1.2s infinite; }
.bd-dots i:nth-child(2) { animation-delay: .15s; }
.bd-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bdBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
/* 诊断卡：整份报告的头牌，一眼抓人 */
.bd-diag { border-radius: 18px; padding: 17px 16px; background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(249, 89, 1, .18); margin-bottom: 12px; animation: bdIn .35s ease both; }
.bd-diag-type { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin-bottom: 10px; }
.bd-diag-one { font-size: 15.5px; font-weight: 800; line-height: 1.6; margin-bottom: 14px; }
.bd-scores { display: flex; flex-direction: column; gap: 8px; }
.bd-score { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.bd-score-k { width: 58px; flex-shrink: 0; opacity: .92; }
.bd-score-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.bd-score-bar > i { display: block; height: 100%; border-radius: 999px; background: #fff; }
.bd-score-bar > i.mid { background: #ffe6c9; }
.bd-score-bar > i.low { background: #ffd0ad; }
.bd-score-v { width: 26px; text-align: right; font-weight: 800; }
.bd-diff { font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.bd-diff.easy { background: #12b76a; }
.bd-diff.hard { background: #f04438; }
/* 通用报告卡 */
.bd-card { border: 1px solid #ffeada; border-radius: 16px; background: #fffdfb; margin-bottom: 12px; overflow: hidden; animation: bdIn .35s ease both; }
@keyframes bdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #fff5ed; border-bottom: 1px solid #ffeada; }
.bd-card-t { font-size: 13.5px; font-weight: 800; color: var(--text); }
.bd-card-b { padding: 12px 14px; }
.bd-copy { flex-shrink: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--primary); background: #fff; border: 1px solid #ffdcc4; border-radius: 999px; padding: 5px 12px; }
.bd-copy:hover { background: #ffece0; }
.bd-copy-all { margin-left: auto; }
.bd-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #ffeada; }
.bd-row:last-child { border-bottom: 0; }
.bd-row-k { width: 76px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.bd-row-v { flex: 1; font-size: 13px; line-height: 1.75; color: var(--text); }
/* 时间轴：左侧竖线 + 时间徽标 */
.bd-tl { position: relative; padding-left: 4px; }
.bd-tl-row { display: flex; gap: 10px; padding-bottom: 14px; position: relative; }
.bd-tl-row:last-child { padding-bottom: 0; }
.bd-tl-row:not(:last-child)::before { content: ''; position: absolute; left: 26px; top: 24px; bottom: 0; width: 2px; background: linear-gradient(#ffd9bd, #fff0e4); }
.bd-tl-time { flex-shrink: 0; min-width: 54px; height: 22px; line-height: 22px; text-align: center; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 999px; padding: 0 8px; }
.bd-tl-main { flex: 1; }
.bd-tl-what { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.6; }
.bd-tl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.bd-tl-how { font-size: 11.5px; font-weight: 700; color: var(--primary); background: #fff0e6; border-radius: 999px; padding: 2px 9px; }
.bd-tl-why { font-size: 12px; color: var(--text2); }
/* 复刻公式 */
.bd-formula { font-size: 14px; font-weight: 800; line-height: 1.7; color: var(--primary); background: #fff6ef; border: 1px dashed #ffc9a3; border-radius: 12px; padding: 12px 14px; }
.bd-sample { margin-top: 10px; font-size: 13px; line-height: 1.8; color: var(--text); }
.bd-sample b { color: var(--primary); }
/* 同款脚本 */
.bd-script-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #ffeada; }
.bd-script-row:last-child { border-bottom: 0; }
.bd-script-k { width: 106px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.bd-script-v { flex: 1; font-size: 13px; line-height: 1.75; color: var(--text); }
/* 避坑 */
.bd-pit-row { display: flex; gap: 9px; padding: 7px 0; font-size: 13px; line-height: 1.75; color: var(--text); }
.bd-pit-n { flex-shrink: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11.5px; font-weight: 800; color: #fff; background: #f97066; border-radius: 50%; }
@media (max-width: 380px) {
.bd-row-k, .bd-script-k { width: 62px; font-size: 12px; }
.bd-tl-time { min-width: 48px; font-size: 11px; }
}
/* ==========================================================================
钩子文案（运营板块）
--------------------------------------------------------------------------
来源：用户 2026-09-13 提供的 7 张图（「短视频 10 大钩子开头」方法论）。
视觉：**绛红 → 朱 → 琥珀**。钩子是带刺的东西，配色也得有刺 ——
与站点主色橙（#f95901）、与「选题灵感」的墨青都区分得开。
结构：hero（十类标签）→ 输入卡 → 进度 → 10 组 × 3 条卡片 → 工具条。
⚠️ 本段没有用 display:grid 的元素；凡是会被 JS 切 hidden 的，
全部在下方的「hidden 兜底」里显式声明（本项目已累计踩 7 次）。
========================================================================== */
/* ---------------------------------------------------------------- hero */
.hk-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 20px 18px;
margin-bottom: 14px; color: #fff;
background: linear-gradient(135deg, #3d0d1a 0%, #5c1424 46%, #8f2531 100%); }
.hk-hero-glow, .hk-hero-glow2 { position: absolute; border-radius: 50%; filter: blur(38px); pointer-events: none; }
.hk-hero-glow { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(216, 64, 47, .55); }
.hk-hero-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(242, 166, 59, .34); }
.hk-hero-tag { position: relative; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
color: #ffe2c9; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
padding: 4px 10px; border-radius: 999px; }
.hk-hero-t { position: relative; font-size: 25px; font-weight: 900; line-height: 1.34; margin: 12px 0 9px; }
.hk-hero-s { position: relative; font-size: 13px; line-height: 1.72; color: rgba(255, 255, 255, .82); }
.hk-hero-flow { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.hk-hero-flow i { font-style: normal; color: rgba(255, 255, 255, .42); font-size: 12px; }
.hk-fchip { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .72);
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); padding: 5px 11px; border-radius: 999px; }
.hk-fchip.on { color: #3d0d1a; background: linear-gradient(135deg, #ffd08a 0%, #f2a63b 100%); border-color: transparent; }
.hk-types { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hk-types span { font-size: 11px; color: rgba(255, 255, 255, .66); background: rgba(0, 0, 0, .18);
border: 1px solid rgba(255, 255, 255, .1); padding: 3px 9px; border-radius: 999px; }
/* ------------------------------------------------------------ 输入区 */
.hk-in-card { border: 1px solid #f4e4e4; }
.hk-kw { display: flex; gap: 9px; margin-top: 4px; }
.hk-inp { flex: 1; min-width: 0; font-family: inherit; font-size: 15px; color: var(--text);
background: #fdf6f5; border: 1.5px solid #f2dedd; border-radius: 12px; padding: 12px 13px; outline: none;
transition: border-color .18s, background .18s; }
.hk-inp:focus { border-color: #e5908a; background: #fff; }
.hk-go { flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800;
color: #fff; padding: 0 20px; border-radius: 12px;
background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%);
box-shadow: 0 6px 16px rgba(192, 48, 31, .26); transition: transform .14s, opacity .14s; }
.hk-go:active { transform: scale(.97); }
.hk-go:disabled { opacity: .6; cursor: default; }
.hk-more-btn { display: block; width: 100%; margin-top: 10px; text-align: left; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #b8564a;
background: #fdf3f1; border: 1px dashed #f0d2ce; border-radius: 10px; padding: 9px 12px; }
.hk-more { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.hk-lab { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: #a08c7c; }
.hk-lab input { font-family: inherit; font-size: 14px; font-weight: 400; color: var(--text);
background: #fdf9f8; border: 1.5px solid #f2e4e2; border-radius: 10px; padding: 10px 12px; outline: none;
transition: border-color .18s, background .18s; }
.hk-lab input:focus { border-color: #e5908a; background: #fff; }
.hk-lab-key { color: #b8362a; }
.hk-lab-key input { background: #fffaf7; border-color: #f4ddd4; }
.hk-cost { margin-top: 11px; font-size: 12px; color: var(--text2); line-height: 1.6; }
.hk-cost b { color: #c0301f; }
/* ------------------------------------------------------------ 错误条 */
.hk-err { margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: #b8362a;
background: #fff5f3; border: 1px solid #f6d8d3; border-radius: 12px; padding: 11px 13px; }
/* -------------------------------------------------------------- 进度 */
.hk-progress { margin-top: 14px; background: #fff; border: 1px solid #f4e4e4; border-radius: 16px; padding: 15px 16px; }
.hk-prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px;
color: #b8564a; font-weight: 700; }
.hk-prog-top b { font-size: 12px; color: var(--text2); font-weight: 700; }
.hk-prog-bar { height: 6px; margin: 10px 0 12px; background: #f7eae8; border-radius: 999px; overflow: hidden; }
.hk-prog-bar i { display: block; width: 4%; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, #f2a63b 0%, #d8402f 100%); transition: width .5s ease; }
.hk-prog-steps { display: flex; flex-direction: column; gap: 7px; }
.hk-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c3aaa4; transition: color .2s; }
.hk-sico { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #e2cbc6; position: relative; }
.hk-step.done { color: #8a6a6d; }
.hk-step.done .hk-sico { background: #d8402f; border-color: #d8402f; }
.hk-step.cur { color: #b8362a; font-weight: 800; }
.hk-step.cur .hk-sico { border-color: #d8402f; border-width: 3px; animation: hkSpin 1s linear infinite; }
@keyframes hkSpin { 0% { transform: scale(1); } 50% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* ------------------------------------------------------------ 结果区 */
.hk-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 11px; }
.hk-sec-t { font-size: 15.5px; font-weight: 900; color: var(--text); position: relative; padding-left: 11px; }
.hk-sec-t::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 15px; border-radius: 999px; background: linear-gradient(180deg, #f2a63b, #d8402f); }
.hk-sec-hint { font-size: 12px; color: var(--text2); }
.hk-group { margin-bottom: 16px; }
.hk-group-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.hk-group-ix { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 900; color: #fff;
background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%); }
.hk-group-name { font-size: 15px; font-weight: 900; color: #2a1114; }
.hk-group-motive { flex: 1; min-width: 0; font-size: 11.5px; color: #a8730f; background: #fff8e8;
border: 1px solid #f6e2b8; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.hk-more { flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800;
color: #b8362a; background: #fff7f6; border: 1.5px solid #f0d5d2; border-radius: 999px; padding: 5px 12px;
transition: background .16s, border-color .16s; }
.hk-more:hover { background: #fff0ee; border-color: #e8bdb8; }
.hk-more:disabled { opacity: .5; cursor: default; }
.hk-items { display: flex; flex-direction: column; gap: 9px; }
.hk-card { background: #fff; border: 1px solid #f2e2e2; border-radius: 16px; padding: 13px 14px 12px;
transition: border-color .18s, box-shadow .18s, transform .14s; }
.hk-card:hover { border-color: #ecc9c6; box-shadow: 0 8px 22px rgba(140, 40, 30, .07); }
.hk-card-hd { display: flex; gap: 8px; align-items: flex-start; }
.hk-quote { flex: 0 0 auto; font-size: 26px; line-height: .9; color: #f0c4bd; font-weight: 900; margin-top: 1px; }
.hk-line { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 800; line-height: 1.5; color: #2a1114; letter-spacing: .01em; }
.hk-meta { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.hk-mi { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; }
.hk-mi b { flex: 0 0 auto; font-weight: 800; font-size: 11px; color: #b8564a; background: #fdf0ee;
border-radius: 5px; padding: 2px 6px; }
.hk-mi span { color: #8a6a6d; }
.hk-warn { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: #a8730f;
background: #fff8e8; border: 1px solid #f6e2b8; border-radius: 8px; padding: 5px 9px; }
.hk-copy { display: block; width: 100%; margin-top: 10px; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 800; color: #b8362a; background: #fff7f6;
border: 1.5px solid #f0d5d2; border-radius: 10px; padding: 9px;
transition: background .16s, border-color .16s, transform .14s; }
.hk-copy:hover { background: #fff0ee; border-color: #e8bdb8; }
.hk-copy:active { transform: scale(.98); }
.hk-copy:disabled { opacity: .5; cursor: default; }
/* 正在写的那一条：呼吸描边，让人知道"还在往下出" */
.hk-writing { border-color: #e8a99f; animation: hkPulse 1.5s ease-in-out infinite; }
@keyframes hkPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(216, 64, 47, .07); }
50% { box-shadow: 0 0 0 7px rgba(216, 64, 47, .13); }
}
/* ------------------------------------------------------------ 工具条 */
.hk-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hk-tb { flex: 1 1 auto; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800;
color: #b8362a; background: #fff; border: 1.5px solid #f0d5d2; border-radius: 11px; padding: 11px 12px;
transition: background .16s, border-color .16s, transform .14s; }
.hk-tb:hover { background: #fff7f6; border-color: #e8bdb8; }
.hk-tb:active { transform: scale(.98); }
.hk-tb-main { color: #fff; border-color: transparent;
background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%);
box-shadow: 0 6px 16px rgba(192, 48, 31, .22); }
.hk-tb-main:hover { background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%); }
.hk-note { margin-top: 12px; font-size: 12px; line-height: 1.75; color: var(--text2);
background: #fdf9f8; border: 1px solid #f4e8e6; border-radius: 12px; padding: 11px 13px; }
.hk-note b { color: #b8362a; }
/* -------------------------------------------------------------- toast */
.hk-toast { position: fixed; left: 50%; bottom: 78px; transform: translate(-50%, 8px);
background: rgba(42, 17, 20, .93); color: #fff; font-size: 13px; font-weight: 700;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; max-width: 84vw; text-align: center; z-index: 60; }
.hk-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ⚠️ hidden 兜底：.hk-more 是 display:flex，会盖掉 UA 的 [hidden]{display:none}
→ 不写这行，选填区一进页面就是展开的、收起按钮失灵（本项目已踩 6 次同类坑）。 */
.hk-more[hidden], .hk-progress[hidden], .hk-err[hidden], .hk-toast[hidden],
#hkResult[hidden], #hkCanvas[hidden] { display: none !important; }
@media (max-width: 380px) {
.hk-hero-t { font-size: 22px; }
.hk-group-motive { display: none; }
.hk-tb { flex: 1 1 46%; }
}
/* ==========================================================================
钩子文案 · 风格选择器
--------------------------------------------------------------------------
⚠️ 2026-09-13 用户反馈（原话）：
「你把钩子这些风格放到主题产品的下面呀，你别放在上面呀。」
「风格选择放的位置不对……这样用户体验太差了。」
→ v2.1：从 hero 里**移到「主题 / 产品」卡片内部**，排在主题输入行下面、
选填项上面 —— 客户在一张卡里把"出钩子前要选的东西"一次选完。
→ 配色也必须跟着换：原来那套是「深红底 + 半透明白字」，只成立在 hero 上；
搬进白卡片会变成白字白底（完全看不见）。这里改成**白底深字**，
选中态用**绛红实心**（与主按钮「出钩子」同色系），未选是浅描边。
========================================================================== */
.hk-picker { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #f0dede; }
.hk-picker-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.hk-picker-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: #8a6a6d; }
.hk-picker-label b { color: #c0301f; }
.hk-pk-mini { flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 800;
color: #b8362a; background: #fff7f6; border: 1.5px solid #f0d5d2; border-radius: 999px; padding: 4px 11px;
transition: background .15s, border-color .15s, transform .12s; }
.hk-pk-mini:hover { background: #fff0ee; border-color: #e8bdb8; }
.hk-pk-mini:active { transform: scale(.95); }
.hk-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
.hk-type { cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; line-height: 1.15;
color: #6f5155; background: #fdf9f8; border: 1.5px solid #f2e4e2; border-radius: 11px;
padding: 7px 11px; text-align: left;
transition: background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s; }
.hk-type em { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: #b8a0a3; margin-top: 2px; }
.hk-type:hover { border-color: #e8bdb8; background: #fff; }
.hk-type:active { transform: scale(.97); }
.hk-type.on { color: #fff; border-color: transparent;
background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%);
box-shadow: 0 4px 14px rgba(192, 48, 31, .28); }
.hk-type.on em { color: rgba(255, 255, 255, .84); }
.hk-type:focus-visible { outline: 2px solid #e2563c; outline-offset: 2px; }
.hk-picker-hint { margin-top: 9px; font-size: 11.5px; font-weight: 700; line-height: 1.55; color: #b8564a; }
.hk-picker-hint:empty { display: none; }
/* 流程条上一格走过之后淡下来，让当前格更醒目（hero 里用） */
.hk-fchip.done { color: rgba(255, 255, 255, .58); background: rgba(255, 255, 255, .06); }
@media (max-width: 380px) {
.hk-type { font-size: 12px; padding: 6px 9px; }
.hk-type em { display: none; }
.hk-picker-label { font-size: 12px; }
}
/* ==========================================================================
钩子文案 · 第三段「完整文案」（2026-09-13 追加）
--------------------------------------------------------------------------
需求原话：「只有钩子标题，为什么没有钩子文案？……开头有钩子（黄金 1~3 秒），
中间有内容，结尾有引导。每一个钩子标题配一个钩子文案。」
→ 每条钩子现在是两个动作：「复制这句」（次要，浅色描边）+「写完整文案 →」
（主要，绛红实心）—— 一眼能看出"想直接念"和"要整条稿"分别点哪个。
→ 文案区在结果区下方展开：标题条（带类型徽标）+ 四段正文 + 工具条。
========================================================================== */
/* 卡片里的两个动作并排 */
.hk-acts { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.hk-acts .hk-copy { flex: 1 1 auto; margin-top: 0; }
.hk-write { flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800;
color: #fff; border: none; border-radius: 10px; padding: 9px 13px; white-space: nowrap;
background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%);
box-shadow: 0 5px 14px rgba(192, 48, 31, .24);
transition: transform .14s, opacity .14s; }
.hk-write:hover { opacity: .93; }
.hk-write:active { transform: scale(.97); }
.hk-write:disabled { opacity: .5; cursor: default; }
/* 文案区标题条 */
.hk-script-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin: 18px 0 10px; padding-top: 15px; border-top: 1px dashed #f0dede; }
.hk-script-tag { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #e2563c 0%, #c0301f 100%);
border-radius: 999px; padding: 4px 11px; }
.hk-script-hook { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #2a1114; line-height: 1.5; }
/* 文案正文（四段小节 + 段落 + 三件套列表） */
.hk-report { background: #fff; border: 1px solid #f2e2e2; border-radius: 16px; padding: 16px 15px; }
.hk-report h1, .hk-report h2, .hk-report h3, .hk-report h4 { margin: 17px 0 8px; font-size: 15px;
font-weight: 900; color: #c0301f; line-height: 1.5; position: relative; padding-left: 11px; }
.hk-report h1::before, .hk-report h2::before,
.hk-report h3::before, .hk-report h4::before {
content: ''; position: absolute; left: 0; top: 3px; width: 4px; height: 15px; border-radius: 999px;
background: linear-gradient(180deg, #f2a63b, #d8402f); }
.hk-report h1:first-child, .hk-report h2:first-child,
.hk-report h3:first-child, .hk-report h4:first-child { margin-top: 0; }
.hk-report p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.85; color: #3a2426; }
.hk-report p:last-child { margin-bottom: 0; }
.hk-report ul { margin: 0 0 11px; padding-left: 0; list-style: none; }
.hk-report li { position: relative; padding-left: 18px; margin-bottom: 5px;
font-size: 14.5px; line-height: 1.85; color: #3a2426; }
.hk-report li::before { content: ''; position: absolute; left: 5px; top: 11px; width: 6px; height: 6px;
border-radius: 50%; background: #e8a99f; }
.hk-report strong { color: #b8362a; }
.hk-report code { background: #fdf0ee; color: #b8362a; border-radius: 5px; padding: 1px 5px; font-size: 13px; }
.hk-report .hk-waiting, .hk-report p.hk-waiting { color: var(--text2); font-size: 13px; }
@media (max-width: 380px) {
.hk-acts { flex-direction: column; }
.hk-write { width: 100%; }
.hk-report { padding: 14px 13px; }
.hk-report p, .hk-report li { font-size: 14px; }
}
/* ============================================================
一键追爆款（sub-chasehot）· 视频板块
设计：暗色火焰主题（对齐参考产品「一键追爆」的黑金主视觉），
三步步骤条常驻，产物区按小节卡片化 + 分镜表渲染成真表格。
============================================================ */
.ch-hero {
position:relative; overflow:hidden; margin-bottom:14px; padding:22px 20px 18px;
border-radius:var(--radius);
background:
radial-gradient(120% 95% at 85% -10%, rgba(255,94,0,.62) 0%, rgba(180,40,200,.22) 42%, rgba(0,0,0,0) 72%),
linear-gradient(160deg, #221318 0%, #17101a 55%, #100b12 100%);
box-shadow:0 14px 30px rgba(40,14,10,.32);
color:#fff;
}
.ch-hero-glow {
position:absolute; right:-40px; top:-52px; width:190px; height:190px; border-radius:50%;
background:radial-gradient(circle, rgba(255,120,40,.55) 0%, rgba(255,120,40,0) 70%);
pointer-events:none;
}
.ch-hero-tag {
position:relative; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px;
padding:4px 10px; border-radius:999px; color:#ffd9bd;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.ch-hero-t {
position:relative; margin-top:10px; font-size:24px; font-weight:800; letter-spacing:.5px; line-height:1.3;
background:linear-gradient(92deg, #fff 0%, #ffb27a 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ch-hero-s { position:relative; margin-top:8px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.72); }
.ch-steps { position:relative; display:flex; gap:6px; margin-top:16px; }
.ch-step {
flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
font-size:11.5px; font-weight:600; padding:7px 4px; border-radius:10px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.7);
}
.ch-step i {
font-style:normal; width:16px; height:16px; border-radius:50%; font-size:10px; line-height:16px;
text-align:center; background:rgba(255,255,255,.16); color:#fff; flex:none;
}
.ch-step.on { background:linear-gradient(135deg,#ff6a00 0%,#f94400 100%); border-color:transparent; color:#fff; }
.ch-step.on i { background:rgba(255,255,255,.28); }
.card-title.ch-ct { display:flex; align-items:center; gap:8px; }
.ch-meta { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--text2); background:#f5efe9; border-radius:999px; padding:4px 10px; }
.ch-meta.on { color:var(--primary); background:#fff1e7; }
/* ---- 三种输入方式 ---- */
.ch-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.ch-tab {
border:1.5px solid #f0e6dc; background:#fdfaf7; border-radius:11px; cursor:pointer;
font-family:inherit; font-size:12.5px; font-weight:600; color:var(--text2); padding:9px 0;
transition:border-color .15s, background .15s, color .15s;
}
.ch-tab.on { border-color:var(--primary); background:#fff3ea; color:var(--primary); }
.ch-pane { display:none; }
.ch-pane.on { display:block; }
.ch-drop { border:1.5px dashed #f0c9a8; border-radius:16px; background:#fffaf6; padding:26px 14px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.ch-drop:active { background:#fff2e8; }
.ch-drop.drag { border-color:var(--primary); background:#fff2e8; }
.ch-drop.has-file { border-style:solid; border-color:#ffdcbf; background:#fff; text-align:left; }
.ch-hint-ico { font-size:30px; line-height:1; }
.ch-hint-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.ch-hint-s { font-size:12.5px; color:var(--text2); margin-top:5px; line-height:1.55; }
.ch-file { display:flex; align-items:center; gap:10px; }
.ch-file-ico { flex:none; width:38px; height:38px; border-radius:10px; background:#fff1e7; color:var(--primary); font-size:19px; line-height:38px; text-align:center; }
.ch-file-n { flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-file-s { font-size:11.5px; color:var(--text2); font-weight:400; }
.ch-file-x { flex:none; border:0; background:#f4eee8; color:var(--text2); width:26px; height:26px; border-radius:50%; font-size:15px; cursor:pointer; }
.ch-collect { margin-top:12px; padding:11px 13px; border-radius:12px; background:#f6f4f8; border:1px solid #ece7f2; font-size:12px; line-height:1.65; color:var(--text2); }
.ch-collect b { color:var(--text); }
.ch-collect .ch-tx { display:block; margin-top:6px; max-height:96px; overflow:auto; white-space:pre-wrap; color:#6b6273; }
/* ---- IP 档案表单 ---- */
.ch-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ch-f { display:flex; flex-direction:column; gap:5px; }
.ch-f.full { grid-column:1 / -1; }
.ch-f span { font-size:12px; font-weight:600; color:var(--text2); }
.ch-f span b { color:var(--primary); }
.ch-f input {
width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; color:var(--text);
border:1.5px solid #eee6f5; background:#fdfcff; border-radius:11px; padding:10px 12px; outline:none;
}
.ch-f input:focus { border-color:var(--primary); background:#fff; }
.ch-f input::placeholder { color:#b9b0c4; }
/* ---- 产物 ---- */
.ch-bar { display:flex; align-items:center; gap:8px; margin:4px 0 10px; }
.ch-bar-t { font-size:15px; font-weight:700; color:var(--text); }
.ch-ok { font-size:11.5px; font-weight:700; color:#10844b; background:#e8f8ef; border-radius:999px; padding:4px 10px; }
.ch-copy { margin-left:auto; border:0; border-radius:999px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; padding:7px 14px; cursor:pointer; }
.ch-copy:active { opacity:.82; }
.ch-secs { display:flex; flex-direction:column; gap:10px; }
.ch-sec { border-radius:14px; background:#fff; border:1px solid #f0e9f6; overflow:hidden; }
.ch-sec-h { display:flex; align-items:center; gap:8px; padding:11px 13px; background:#faf7ff; border-bottom:1px solid #f2ecfa; }
.ch-sec-h b { font-size:13.5px; font-weight:700; color:#4c3a86; }
.ch-sec-h .ch-n { font-size:11px; color:var(--text2); font-weight:400; }
.ch-sec-cp { margin-left:auto; border:1.5px solid #e6ddf5; background:#fff; color:#6d28d9; font-size:11.5px; font-weight:600; border-radius:999px; padding:4px 11px; cursor:pointer; font-family:inherit; }
.ch-sec-b { padding:12px 13px; font-size:13px; line-height:1.75; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.ch-sec-b .ch-k { color:var(--primary); font-weight:700; }
.ch-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:2px; }
.ch-table th, .ch-table td { border:1px solid #eee7f5; padding:7px 8px; text-align:left; vertical-align:top; line-height:1.6; }
.ch-table th { background:#faf7ff; color:#4c3a86; font-weight:700; white-space:nowrap; }
.ch-table td:first-child, .ch-table th:first-child { text-align:center; white-space:nowrap; }
.ch-acts2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 14px; }
.ch-act2 { border:1.5px solid #ffdcbf; border-radius:13px; background:#fff; color:var(--text); font-family:inherit; font-size:13px; font-weight:600; padding:12px 4px; cursor:pointer; }
.ch-act2:active { opacity:.85; }
.ch-note { margin-top:10px; padding:10px 12px; border-radius:12px; background:#fff5ec; color:#7a4a2a; font-size:12.5px; line-height:1.65; }
.ch-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(30,16,12,.92); color:#fff; font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.ch-toast.show { opacity:1; transform:translate(-50%,0); }
/* 流式输出时的光标 */
.ch-cursor { display:inline-block; width:7px; height:14px; background:var(--primary); vertical-align:-2px; animation:chBlink .8s steps(1) infinite; }
@keyframes chBlink { 50% { opacity:0; } }
#chResult[hidden], .ch-pane:not(.on) { display:none !important; }
@media (max-width:380px) {
.ch-hero-t { font-size:21px; }
.ch-form { grid-template-columns:1fr; }
.ch-f.full { grid-column:auto; }
.ch-acts2 { grid-template-columns:1fr; }
}
/* ==================== AI爆款封面（bc-） ====================
配色语言：深靛 → 紫 → 品红（创作工具的高级感），点缀暖琥珀。
刻意避开全站主色橙，让「封面操盘」这件事有独立的视觉身份，又不与橙色打架。 */
.bc-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 20px 20px;
margin-bottom: 14px; color: #fff;
background: linear-gradient(140deg, #1d1145 0%, #3b1361 40%, #7b1f56 76%, #a83c4c 100%); }
.bc-hero-glow { position: absolute; right: -70px; top: -76px; width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(236, 72, 153, .40), transparent 70%); pointer-events: none; }
.bc-hero-glow2 { position: absolute; left: -84px; bottom: -96px; width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(124, 58, 237, .42), transparent 72%); pointer-events: none; }
.bc-hero-tag { position: relative; display: inline-block; font-size: 11px; letter-spacing: .16em;
color: #f6d9ff; border: 1px solid rgba(246, 217, 255, .40); border-radius: 999px; padding: 3px 11px; margin-bottom: 13px; }
.bc-hero-t { position: relative; font-size: 25px; font-weight: 800; line-height: 1.36; letter-spacing: .01em; }
.bc-hero-s { position: relative; margin-top: 10px; font-size: 12.5px; line-height: 1.72; color: rgba(240, 226, 255, .82); }
.bc-hero-flow { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 15px; flex-wrap: wrap; }
.bc-hero-flow span { font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); }
.bc-hero-flow i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .45); }
/* 模式切换 */
.bc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bc-mode { text-align: left; padding: 12px 13px; border-radius: 14px; cursor: pointer;
background: #fff; border: 1.5px solid #eee6f7; transition: all .18s; }
.bc-mode b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.bc-mode em { display: block; margin-top: 4px; font-style: normal; font-size: 11px; line-height: 1.5; color: var(--text2); }
.bc-mode.on { border-color: #7c3aed; background: linear-gradient(160deg, #f6f1ff 0%, #fdf2f8 100%);
box-shadow: 0 6px 18px rgba(124, 58, 237, .14); }
.bc-mode.on b { color: #5b21b6; }
/* 卡片 */
.bc-card { background: #fff; border-radius: 16px; padding: 16px 15px; margin-bottom: 12px;
border: 1px solid #f1ecf7; box-shadow: 0 2px 10px rgba(60, 30, 90, .04); }
.bc-h { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; }
.bc-h b { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
border-radius: 50%; font-size: 11px; color: #fff; background: linear-gradient(140deg, #7c3aed, #db2777); flex: none; }
.bc-req { font-size: 10.5px; font-weight: 500; color: #db2777; background: #fdf2f8; border-radius: 999px; padding: 2px 7px; }
.bc-opt { font-size: 11px; font-weight: 400; color: var(--text2); }
.bc-ta { width: 100%; box-sizing: border-box; border: 1.5px solid #eae2f4; border-radius: 12px; padding: 11px 12px;
font-size: 13.5px; line-height: 1.66; color: var(--text); background: #fdfcff; resize: vertical; font-family: inherit; }
.bc-ta:focus { outline: none; border-color: #7c3aed; background: #fff; box-shadow: 0 0 0 3px rgba(124, 58, 237, .10); }
.bc-ta-s { font-size: 13px; }
.bc-tarow { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.bc-cnt { font-size: 11px; color: var(--text2); }
.bc-cnt.over { color: #dc2626; font-weight: 600; }
.bc-mini { font-size: 11.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid #ddd0ff; background: #f7f3ff; color: #6d28d9; font-weight: 600; }
.bc-ideas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.bc-idea { font-size: 11.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid #eee6f7; background: #faf8ff; color: #5b4a72; }
.bc-idea:active { background: #f1e9ff; }
.bc-advtog { margin-top: 11px; font-size: 12px; color: #7c3aed; background: none; border: none; padding: 0; cursor: pointer; }
.bc-adv { margin-top: 9px; }
.bc-hint { margin: 9px 0 0; font-size: 11.5px; line-height: 1.66; color: var(--text2); }
.bc-hint b { color: #6d28d9; }
/* 上传参考图 */
.bc-drop { border: 1.6px dashed #d8cbf0; border-radius: 14px; padding: 22px 14px; text-align: center;
background: #fbf9ff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .18s; }
.bc-drop.drag { border-color: #7c3aed; background: #f3ecff; }
.bc-drop-ico { font-size: 26px; line-height: 1; }
.bc-drop-t { font-size: 13px; font-weight: 600; color: var(--text); }
.bc-drop-s { font-size: 11px; color: var(--text2); }
.bc-thumbwrap { display: flex; align-items: center; gap: 11px; }
.bc-thumb { width: 74px; height: 98px; object-fit: cover; border-radius: 10px; border: 1px solid #eee6f7; background: #f7f5fb; }
.bc-refdel { font-size: 12px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
border: 1px solid #e5dcf5; background: #fff; color: #5b4a72; }
/* 平台芯片 */
.bc-plats { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-plat { text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; min-width: 96px;
border: 1.5px solid #eee6f7; background: #fdfcff; transition: all .16s; }
.bc-plat-n { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.bc-plat-s { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text2); letter-spacing: .02em; }
.bc-plat.on { border-color: #7c3aed; background: linear-gradient(160deg, #f7f2ff, #fdf2f8); }
.bc-plat.on .bc-plat-n { color: #5b21b6; }
.bc-plat-custom { border-style: dashed; }
.bc-ratios { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.bc-ratio { font-size: 11.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid #eee6f7; background: #faf8ff; color: #5b4a72; }
.bc-ratio.on { border-color: #7c3aed; background: #f1e9ff; color: #5b21b6; font-weight: 600; }
.bc-note { margin: 11px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--text2);
background: #faf8ff; border-radius: 10px; padding: 9px 11px; }
.bc-note b { color: #6d28d9; }
/* 打法芯片 */
.bc-angles { display: flex; flex-wrap: wrap; gap: 7px; }
.bc-angle { font-size: 12px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
border: 1.5px solid #eee6f7; background: #fdfcff; color: #4b3d63; }
.bc-angle.on { border-color: #db2777; background: #fdf2f8; color: #9d174d; font-weight: 600; }
/* 主按钮 */
.bc-actions { margin: 4px 0 6px; }
.bc-main { width: 100%; padding: 14px; border: none; border-radius: 14px; cursor: pointer;
font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .01em;
background: linear-gradient(135deg, #7c3aed 0%, #c026a3 58%, #e0457b 100%);
box-shadow: 0 8px 20px rgba(160, 40, 150, .22); }
.bc-main:disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
.bc-cost { margin-top: 8px; text-align: center; font-size: 11px; color: var(--text2); }
.bc-ghost { width: 100%; margin-top: 9px; padding: 12px; border-radius: 13px; cursor: pointer;
font-size: 13.5px; font-weight: 600; color: #6d28d9; background: #fff; border: 1.5px solid #ddd0ff; }
/* 错误 / 进度 */
.bc-err { margin: 10px 0; padding: 11px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
color: #9f1239; background: #fff1f4; border: 1px solid #ffd7e0; }
.bc-prog { margin: 12px 0; padding: 15px; border-radius: 14px; background: #fff; border: 1px solid #f1ecf7; }
.bc-prog-t { font-size: 13px; font-weight: 600; color: var(--text); }
.bc-prog-bar { margin-top: 10px; height: 7px; border-radius: 999px; background: #f1ecf7; overflow: hidden; }
.bc-prog-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #7c3aed, #db2777, #f59e0b); transition: width .28s ease-out; }
.bc-prog-s { margin-top: 9px; font-size: 11px; color: var(--text2); }
/* 结果 */
.bc-result, .bc-cover { margin-top: 14px; }
.bc-rh { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 11px; }
.bc-rh b { color: #6d28d9; }
.bc-dim { font-weight: 400; font-size: 11.5px; color: var(--text2); }
.bc-bd, .bc-pal { background: #fff; border: 1px solid #f1ecf7; border-radius: 14px; padding: 13px 14px; margin-bottom: 11px; }
.bc-bd-h { font-size: 12.5px; font-weight: 700; color: #5b21b6; margin-bottom: 8px; }
.bc-bd-body { display: flex; flex-direction: column; gap: 6px; }
.bc-bd-i { font-size: 12px; line-height: 1.62; color: #4b3d63; background: #faf8ff; border-radius: 9px; padding: 7px 10px; }
.bc-sws { display: flex; flex-wrap: wrap; gap: 11px; }
.bc-sw { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bc-sw i { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(0,0,0,.07); display: block; }
.bc-sw em { font-style: normal; font-size: 10px; color: var(--text2); }
.bc-sw u { text-decoration: none; font-size: 9.5px; color: #a797c0; letter-spacing: .02em; }
.bc-plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 13px; }
.bc-plan { display: block; text-align: left; width: 100%; box-sizing: border-box; cursor: pointer;
padding: 13px 14px; border-radius: 14px; background: #fff; border: 1.5px solid #f1ecf7; transition: all .16s; }
.bc-plan.on { border-color: #7c3aed; box-shadow: 0 8px 20px rgba(124, 58, 237, .13);
background: linear-gradient(160deg, #fbf8ff 0%, #fdf3f8 100%); }
.bc-plan-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bc-plan-badge { font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 6px; padding: 2px 7px;
background: linear-gradient(140deg, #7c3aed, #c026a3); }
.bc-plan-style { font-size: 11.5px; color: #6d28d9; font-weight: 600; }
.bc-plan-warn { font-size: 10.5px; color: #9f1239; background: #fff1f4; border-radius: 6px; padding: 2px 7px; margin-left: auto; }
.bc-plan-title { display: block; margin-top: 9px; font-size: 18px; font-weight: 800; line-height: 1.34; color: #241536; letter-spacing: .01em; }
.bc-plan-sub { display: block; margin-top: 4px; font-size: 12.5px; color: #6b5b82; }
.bc-plan-tag { display: inline-block; margin-top: 7px; font-size: 10.5px; color: #9d174d; background: #fdf2f8;
border-radius: 6px; padding: 2px 7px; }
.bc-plan-visual { display: block; margin-top: 9px; font-size: 12px; line-height: 1.62; color: var(--text2); }
.bc-plan-why { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.6; color: #6d28d9;
background: #f7f3ff; border-radius: 8px; padding: 6px 9px; }
/* 封面成片 */
.bc-stage-wrap { border-radius: 16px; padding: 14px; background:
linear-gradient(45deg, #f4f1f9 25%, transparent 25%, transparent 75%, #f4f1f9 75%) 0 0 / 18px 18px,
linear-gradient(45deg, #f4f1f9 25%, transparent 25%, transparent 75%, #f4f1f9 75%) 9px 9px / 18px 18px,
#fbfaff;
border: 1px solid #f1ecf7; margin-bottom: 11px; text-align: center; }
.bc-stage { max-width: 100%; max-height: 62vh; border-radius: 10px; display: block; margin: 0 auto;
box-shadow: 0 10px 26px rgba(60, 30, 90, .16); }
.bc-lab { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin: 12px 0 6px; }
.bc-warn { margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.6;
color: #9f1239; background: #fff1f4; border: 1px solid #ffd7e0; }
.bc-warn b { color: #9f1239; }
.bc-ctrlrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.bc-lab2 { font-size: 12px; color: var(--text2); font-weight: 600; }
.bc-segs { display: flex; border: 1px solid #eae2f4; border-radius: 10px; overflow: hidden; }
.bc-segs button { border: none; background: #fff; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
color: #5b4a72; font-family: inherit; }
.bc-segs button + button { border-left: 1px solid #eae2f4; }
.bc-segs button.on { background: linear-gradient(140deg, #7c3aed, #c026a3); color: #fff; font-weight: 600; }
.bc-chk { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: #5b4a72; }
.bc-coveracts { margin-top: 14px; }
/* toast */
.bc-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: 9999;
max-width: 78%; padding: 10px 17px; border-radius: 999px; background: rgba(30, 16, 48, .93); color: #fff;
font-size: 12.5px; opacity: 0; pointer-events: none; transition: all .24s; }
.bc-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 🔴 hidden 会被作者样式的 display:flex/grid 盖掉 —— 一次性把本模块全部堵死。
⚠️ 2026-09-13 v2 补记：`.bc-drop` 是 display:flex，v1 漏了它 →
用户上传参考图后虚线框不消失（作者样式盖过 UA 的 [hidden]）。
凡是「用了 hidden 且类里有 display:flex/grid」的，必须进这张名单。 */
.subpanel .bc-copycard[hidden], .subpanel .bc-thumbwrap[hidden], .subpanel .bc-ratios[hidden],
.subpanel .bc-adv[hidden], .subpanel .bc-err[hidden], .subpanel .bc-prog[hidden],
.subpanel .bc-warn[hidden], .subpanel .bc-bd[hidden], .subpanel .bc-pal[hidden],
.subpanel .bc-drop[hidden], .subpanel .bc-chkrow[hidden],
.subpanel .bc-result[hidden], .subpanel .bc-cover[hidden] { display: none !important; }
/* ==================== AI爆款封面 v2 · 分层排版相关（bc-） ====================
参考 JustAI 的 45 张爆款封面：内容品类决定描边色、版式决定图层组合。
这一段只放 v2 新增的控件样式，配色沿用上面的深靛 → 紫 → 品红语言。 */
/* 小标题（品类 / 版式 / 真人出镜 的分隔标题） */
.bc-sub { font-size: 12.5px; font-weight: 700; color: #5b21b6; margin-bottom: 9px; }
.bc-sub .bc-opt { font-weight: 400; font-size: 11px; color: var(--text2); }
.bc-sub-t { margin-top: 15px; padding-top: 13px; border-top: 1px dashed #efe9f8; }
/* 内容品类芯片（两列网格，带品类强调色） */
.bc-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 15px; }
.bc-cat { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 12px; cursor: pointer;
background: #fdfcff; border: 1.5px solid #eee6f7; transition: all .16s; text-align: left; }
.bc-cat i { font-style: normal; font-size: 15px; line-height: 1; }
.bc-cat span { font-size: 12.5px; font-weight: 600; color: #4b3d63; }
.bc-cat.on { border-color: var(--c, #7c3aed); background: #faf7ff;
box-shadow: 0 4px 14px rgba(124, 58, 237, .12); }
.bc-cat.on span { color: #3b1e6e; }
.bc-cat::after { content: ''; width: 7px; height: 7px; border-radius: 50%; margin-left: auto;
background: var(--c, #ddd); opacity: .35; }
.bc-cat.on::after { opacity: 1; }
/* 版式卡片（纵向列表，带描述） */
.bc-lays { display: flex; flex-direction: column; gap: 7px; }
.bc-lay { text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
background: #fdfcff; border: 1.5px solid #eee6f7; transition: all .16s; }
.bc-lay b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.bc-lay em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; line-height: 1.5; color: var(--text2); }
.bc-lay.on { border-color: #7c3aed; background: linear-gradient(160deg, #f7f2ff, #fdf2f8); }
.bc-lay.on b { color: #5b21b6; }
/* 人物照上传（紧凑版拖拽区） */
.bc-drop-sm { padding: 15px 12px; gap: 3px; }
.bc-drop-sm .bc-drop-ico { font-size: 21px; }
.bc-drop-sm .bc-drop-t { font-size: 12.5px; }
.bc-thumb-round { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
/* 两个图层开关并排 */
.bc-chkrow { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.bc-chkrow .bc-chk { margin-top: 0; }
/* 方案卡上的 v2 分层信息 */
.bc-plan-lay { font-size: 10.5px; color: #5b21b6; background: #f3ecff; border-radius: 6px; padding: 2px 7px; }
.bc-plan-pts { display: block; margin-top: 8px; font-size: 11.5px; color: #4b3d63; line-height: 1.95; }
.bc-plan-pts i { font-style: normal; color: #16a34a; font-weight: 900; margin-right: 4px; }
.bc-plan-cta { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700;
color: #7c2d12; background: #ffedd5; border-radius: 999px; padding: 3px 10px; }
.bc-plan-stk { display: inline-flex; gap: 5px; margin-top: 7px; margin-left: 8px; vertical-align: middle; }
.bc-plan-stk em { font-style: normal; font-size: 15px; line-height: 1; }
.bc-plan-num { font-size: 10.5px; font-weight: 700; color: #9f1239; background: #fff1f4;
border: 1px solid #ffd7e0; border-radius: 6px; padding: 2px 7px; }
/* ==========================================================================
九宫格表情包（运营板块）
主色：#ff7a3d → #ff3d6e（珊瑚），辅以 #7c3aed（紫）。
与全站橙色血统一致，但更活泼 —— 表情包是玩的功能。
========================================================================== */
/* ---------- 头牌入口卡（与 .ip-entry 同级）---------- */
.combo-card.em-entry {
position: relative; overflow: hidden;
display: flex; align-items: stretch;
background: linear-gradient(118deg, #2a1140 0%, #5b2160 44%, #a32a63 100%);
border-radius: 20px; padding: 18px 16px 16px;
margin-bottom: 16px;
box-shadow: 0 12px 28px rgba(93, 31, 84, .34);
border: 1px solid rgba(255, 255, 255, .10);
}
.combo-card.em-entry:active { transform: scale(.985); }
.em-entry-glow {
position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 122, 61, .34), transparent 68%); pointer-events: none;
}
.em-entry-body { position: relative; flex: 1; min-width: 0; }
.em-entry-tag {
display: inline-block; font-size: 10.5px; letter-spacing: .16em; font-weight: 700;
color: #ffc9a8; border: 1px solid rgba(255, 170, 130, .38); border-radius: 999px;
padding: 2.5px 10px; margin-bottom: 9px;
background: rgba(255, 122, 61, .14);
}
.em-entry-name { font-size: 20px; font-weight: 800; letter-spacing: .3px; color: #fff; line-height: 1.28; }
.em-entry-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.em-entry-flow { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.em-entry-flow span {
font-size: 11px; font-weight: 600; color: #ffe1d2;
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px; padding: 3px 9px;
}
.em-entry-flow i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .40); }
/* 小九宫格：一眼看懂「九格」是什么 */
.em-entry-art {
position: relative; flex: 0 0 auto; align-self: center; margin-left: 12px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
width: 76px; height: 76px; padding: 5px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 13px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.em-entry-art i {
font-style: normal; font-size: 15px; line-height: 1;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .92); border-radius: 5px;
}
/* ---------- 子页 hero ---------- */
.em-hero {
position: relative; overflow: hidden;
border-radius: 22px; padding: 24px 20px 22px; margin-bottom: 16px;
background: linear-gradient(135deg, #ff8a3d 0%, #ff5c6e 58%, #c9339a 100%);
color: #fff; box-shadow: 0 12px 28px rgba(255, 92, 110, .30);
}
.em-hero-glow, .em-hero-glow2 {
position: absolute; border-radius: 50%; pointer-events: none;
}
.em-hero-glow { right: -70px; top: -90px; width: 230px; height: 230px; background: radial-gradient(circle, rgba(255, 255, 255, .30), transparent 66%); }
.em-hero-glow2 { left: -50px; bottom: -70px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(124, 58, 237, .34), transparent 68%); }
.em-hero-tag {
position: relative; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .34);
border-radius: 999px; padding: 4px 11px; margin-bottom: 11px;
}
.em-hero-t { position: relative; font-size: 24px; font-weight: 800; line-height: 1.34; letter-spacing: .3px; text-shadow: 0 2px 10px rgba(120, 20, 60, .22); }
.em-hero-s { position: relative; margin-top: 10px; font-size: 12.5px; line-height: 1.68; color: rgba(255, 255, 255, .90); }
/* ---------- 卡片与字段 ---------- */
.em-card { margin-bottom: 14px; }
.em-hint { margin-top: 9px; font-size: 11.5px; line-height: 1.6; color: var(--text2); }
.em-loading { font-size: 12.5px; color: var(--text2); padding: 8px 2px; }
.em-loading.err { color: var(--danger); }
/* ---------- 上传区 ---------- */
.em-up {
position: relative; margin-top: 4px;
border: 1.5px dashed rgba(255, 122, 61, .46);
border-radius: 16px; background: linear-gradient(180deg, #fff8f4, #fff2ec);
min-height: 138px; display: flex; align-items: center; justify-content: center;
cursor: pointer; overflow: hidden;
transition: border-color .18s, background .18s, transform .12s;
}
.em-up:active { transform: scale(.995); }
.em-up.has { border-style: solid; border-color: rgba(255, 122, 61, .30); background: #fff; padding: 8px; }
.em-up-empty { text-align: center; padding: 20px 14px; }
.em-up-ico { font-size: 32px; line-height: 1; margin-bottom: 9px; }
.em-up-t { font-size: 14px; font-weight: 700; color: #5b3a28; }
.em-up-s { margin-top: 5px; font-size: 11.5px; color: var(--text2); }
.em-preview {
display: block; max-width: 100%; max-height: 300px;
border-radius: 12px; object-fit: contain;
}
.em-reup {
position: absolute; right: 12px; bottom: 12px;
font-size: 11.5px; font-weight: 700; color: #fff;
background: rgba(30, 16, 10, .62); backdrop-filter: blur(6px);
border: none; border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
/* ---------- chips ---------- */
.em-chips { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 4px; }
.em-chip {
position: relative;
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
text-align: left; cursor: pointer;
background: #fff8f4; border: 1.5px solid #ffe4d5; border-radius: 14px;
padding: 11px 13px;
transition: border-color .16s, background .16s, box-shadow .16s, transform .1s;
}
.em-chip:active { transform: scale(.99); }
.em-chip b { font-size: 13.5px; font-weight: 800; color: #4a3227; }
.em-chip i { font-style: normal; font-size: 11.5px; color: var(--text2); line-height: 1.5; }
.em-chip.on {
border-color: #ff7a3d; background: linear-gradient(135deg, #fff5ee, #ffece1);
box-shadow: 0 4px 14px rgba(249, 89, 1, .14);
}
.em-chip.on b { color: var(--primary); }
.em-chip.on::after {
content: '✓'; position: absolute; right: 10px; top: 10px;
font-size: 12px; font-weight: 800; color: #fff;
width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%;
background: linear-gradient(135deg, #ffa15c, #ff4d6e);
}
/* ---------- 9 句台词预览 ---------- */
.em-cap-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.em-cap-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; font-weight: 700; color: #6b4a34;
background: #fff3ea; border: 1px solid #ffe0cd; border-radius: 999px; padding: 3px 9px;
}
.em-cap-pill i {
font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #ffa15c, #ff5c6e);
width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%;
}
/* ---------- 高级：自定义台词 ---------- */
.em-adv { margin-top: 14px; border-top: 1px dashed #ffe2d3; padding-top: 12px; }
.em-adv summary {
font-size: 12.5px; font-weight: 700; color: #7a5b48; cursor: pointer; list-style: none;
}
.em-adv summary::-webkit-details-marker { display: none; }
.em-adv summary::before { content: '＋ '; color: var(--primary); font-weight: 800; }
.em-adv[open] summary::before { content: '－ '; }
.em-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.em-cap-in { display: flex; align-items: center; gap: 4px; }
.em-cap-in i {
font-style: normal; font-size: 9.5px; font-weight: 800; color: #a08c7c;
min-width: 10px; text-align: center;
}
.em-cap-in input {
width: 100%; min-width: 0; box-sizing: border-box;
font-size: 12px; color: #4a3227;
border: 1px solid #ffe0cd; border-radius: 9px; padding: 7px 8px; background: #fffdfb;
}
.em-cap-in input:focus { outline: none; border-color: #ff7a3d; background: #fff; }
.em-cap-reset {
margin-top: 11px; font-size: 11.5px; font-weight: 700; color: var(--primary);
background: #fff2ea; border: 1px solid #ffddc9; border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
/* ---------- 主按钮 ---------- */
.em-cta {
width: 100%; border: none; cursor: pointer;
font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: .3px;
background: linear-gradient(135deg, #ff8a3d 0%, #ff4d6e 100%);
border-radius: 16px; padding: 15px 18px; margin: 4px 0 14px;
box-shadow: 0 10px 24px rgba(255, 77, 110, .30);
transition: transform .12s, box-shadow .12s, filter .16s;
}
.em-cta:active { transform: scale(.985); }
.em-cta:disabled {
cursor: not-allowed; filter: grayscale(.42);
background: linear-gradient(135deg, #d9c6bb, #c9b3a6);
box-shadow: none; color: rgba(255, 255, 255, .92);
}
/* ---------- 进度 ---------- */
.em-prog { margin: 0 0 14px; padding: 15px 16px; background: #fff; border-radius: 16px; box-shadow: 0 3px 12px rgba(249, 89, 1, .07); }
.em-prog-bar { height: 7px; border-radius: 999px; background: #ffeee4; overflow: hidden; }
.em-prog-bar i {
display: block; height: 100%; width: 3%; border-radius: 999px;
background: linear-gradient(90deg, #ffa15c, #ff4d6e);
transition: width .42s cubic-bezier(.22, .61, .36, 1);
}
.em-prog-t { margin-top: 9px; font-size: 12px; color: #8a6a55; text-align: center; }
/* ---------- 结果区 ---------- */
.em-out { margin-bottom: 16px; padding: 16px 14px 14px; background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(249, 89, 1, .09); }
.em-out-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.em-out-t { font-size: 15px; font-weight: 800; color: #4a3227; }
.em-out-sub { font-size: 11px; color: var(--text2); }
.em-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.em-cell {
position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
background: #fff; border: 1px solid #ffe6d8;
box-shadow: 0 2px 8px rgba(249, 89, 1, .07);
}
/* 透明底模式：格子铺棋盘格，一眼看出哪里是透明的 */
.em-cell.nobg {
background-color: #fff;
background-image:
linear-gradient(45deg, #f0eae6 25%, transparent 25%, transparent 75%, #f0eae6 75%),
linear-gradient(45deg, #f0eae6 25%, transparent 25%, transparent 75%, #f0eae6 75%);
background-size: 14px 14px;
background-position: 0 0, 7px 7px;
}
.em-cell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.em-cell-no {
position: absolute; left: 5px; top: 5px;
font-size: 9.5px; font-weight: 800; color: #fff;
background: rgba(40, 20, 12, .46); border-radius: 6px; padding: 1px 5px;
}
.em-cell-dl {
position: absolute; right: 5px; bottom: 5px;
width: 24px; height: 24px; line-height: 22px; text-align: center;
font-size: 13px; font-weight: 800; color: #fff;
background: rgba(40, 20, 12, .50); border: none; border-radius: 8px; cursor: pointer;
}
.em-cell-dl:active { background: rgba(40, 20, 12, .74); }
/* ---------- 开关 ---------- */
.em-opts { margin-top: 14px; }
.em-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.em-switch input { display: none; }
.em-switch .em-sw {
position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
background: #e7d9d0; transition: background .18s;
}
.em-switch .em-sw::after {
content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
transition: transform .18s;
}
.em-switch input:checked + .em-sw { background: linear-gradient(135deg, #ff8a3d, #ff4d6e); }
.em-switch input:checked + .em-sw::after { transform: translateX(18px); }
.em-switch b { font-size: 13.5px; font-weight: 700; color: #4a3227; }
.em-switch em { font-style: normal; font-size: 11.5px; color: var(--text2); }
/* ---------- 操作按钮 ---------- */
.em-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.em-act {
border: 1px solid #ffe0cd; background: #fff8f4; color: #5b3a28;
font-size: 13px; font-weight: 700; border-radius: 13px; padding: 12px 10px; cursor: pointer;
transition: transform .1s, background .16s, border-color .16s;
}
.em-act:active { transform: scale(.985); }
.em-act.primary {
grid-column: 1 / -1;
border: none; color: #fff;
background: linear-gradient(135deg, #ff8a3d 0%, #ff4d6e 100%);
box-shadow: 0 8px 20px rgba(255, 77, 110, .26);
font-size: 14.5px;
}
.em-act.ghost { background: #fff; border-style: dashed; color: #8a6a55; }
.em-tip { margin-top: 11px; font-size: 11.5px; line-height: 1.62; color: var(--text2); }
/* ---------- 兜底 toast ---------- */
.em-toast {
position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 14px);
max-width: 82vw; z-index: 9999; pointer-events: none;
font-size: 13px; font-weight: 600; color: #fff; text-align: center;
background: rgba(35, 18, 10, .90); border-radius: 12px; padding: 10px 16px;
opacity: 0; transition: opacity .2s, transform .2s;
}
.em-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ---------- 窄屏 ---------- */
@media (max-width: 380px) {
.em-hero-t { font-size: 21px; }
.em-entry-name { font-size: 18px; }
.em-entry-art { width: 62px; height: 62px; }
.em-entry-art i { font-size: 12px; }
.em-cap-grid { grid-template-columns: repeat(2, 1fr); }
.em-acts { grid-template-columns: 1fr; }
}
/* ⚠️ 用了 hidden 的元素若在类里含 display:flex/grid，作者样式会盖掉 UA 的 [hidden] →
这里显式兜底，否则「一开始就展开、点开关没反应」 */
.subpanel #emPreview[hidden], .subpanel #emReup[hidden], .subpanel #emUpEmpty[hidden],
.subpanel #emProg[hidden], .subpanel #emOut[hidden] { display: none !important; }
/* ============================================================================
爆款视频复刻（视频板块）—— vc-*
========================================================================== */
/* ⚠️ 本页多处用 hidden 控制显隐，且这些元素在类里带了 display:grid/flex →
作者样式会盖掉 UA 的 [hidden]，必须整页显式兜底（否则「一进页面就展开」） */
#sub-videoclone [hidden] { display: none !important; }
.vc-wrap { padding: 2px 0 30px; }
/* ---------------- Hero ---------------- */
.vc-hero {
position: relative; overflow: hidden; border-radius: 20px;
background: linear-gradient(135deg, #0b1620 0%, #102835 48%, #123a46 100%);
padding: 24px 20px 20px; color: #eaf6f9;
box-shadow: 0 14px 34px rgba(11, 22, 32, .28);
}
.vc-hero-glow {
position: absolute; right: -70px; top: -80px; width: 230px; height: 230px;
background: radial-gradient(circle, rgba(64, 214, 214, .36) 0%, rgba(64, 214, 214, 0) 68%);
pointer-events: none;
}
.vc-hero::after {
content: ''; position: absolute; left: -30px; bottom: -60px; width: 180px; height: 180px;
background: radial-gradient(circle, rgba(249, 89, 1, .26) 0%, rgba(249, 89, 1, 0) 70%);
pointer-events: none;
}
.vc-hero-tag {
position: relative; display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; letter-spacing: .1em; font-weight: 600;
color: #8fe6ee; background: rgba(64, 214, 214, .13);
border: 1px solid rgba(64, 214, 214, .32);
padding: 4px 10px; border-radius: 999px;
}
.vc-hero-t {
position: relative; margin: 12px 0 7px;
font-size: 23px; line-height: 1.32; font-weight: 800; letter-spacing: .01em;
}
.vc-hero-s { position: relative; margin: 0; font-size: 12.5px; line-height: 1.72; color: rgba(234, 246, 249, .7); }
.vc-hero-flow { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.vc-fchip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; color: rgba(234, 246, 249, .9);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .13);
padding: 5px 10px 5px 6px; border-radius: 999px;
}
.vc-fchip i {
font-style: normal; width: 15px; height: 15px; line-height: 15px; text-align: center;
border-radius: 50%; font-size: 9.5px; font-weight: 700;
background: linear-gradient(135deg, #6fe3e3, #2196a8); color: #06222a;
}
/* ---------------- 卡片 ---------------- */
.vc-card {
margin-top: 14px; background: #fff; border: 1px solid #ece5dd;
border-radius: 16px; padding: 15px 14px 16px;
box-shadow: 0 2px 10px rgba(60, 48, 38, .04);
}
.vc-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.vc-step {
flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px; text-align: center;
border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #173845, #1f6d78);
}
.vc-step-ok { background: linear-gradient(135deg, #16a34a, #4ade80); }
.vc-card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #241f1b; }
.vc-card-tip { margin-left: auto; font-size: 11px; color: #a2968a; }
/* ---------------- ① 出镜主体 ---------------- */
.vc-subjects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vc-subject {
position: relative; display: flex; align-items: center; gap: 9px; text-align: left;
border: 1px solid #e6ddd0; background: #fff; font-family: inherit; cursor: pointer;
border-radius: 13px; padding: 10px 11px; transition: all .16s;
}
.vc-subject:hover { border-color: #cbdadd; background: #fbfeff; }
.vc-subject.on {
border-color: #1f6d78; background: linear-gradient(135deg, #f2fbfc, #e6f5f7);
box-shadow: 0 0 0 3px rgba(31, 109, 120, .1);
}
.vc-subject-ic { flex: 0 0 auto; font-size: 19px; line-height: 1; }
.vc-subject-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-subject-tx b { font-size: 12.5px; font-weight: 700; color: #2a2320; }
.vc-subject-tx em {
font-style: normal; font-size: 10.5px; line-height: 1.45; color: #9a8d81;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vc-subject-tick {
position: absolute; right: 7px; top: 7px;
width: 15px; height: 15px; line-height: 15px; text-align: center;
border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff;
background: #1f6d78; opacity: 0; transform: scale(.6); transition: all .16s;
}
.vc-subject.on .vc-subject-tick { opacity: 1; transform: scale(1); }
.vc-subtip {
display: flex; flex-direction: column; gap: 3px; margin: 11px 0 11px;
border-left: 3px solid #2b8f9b; background: #f4fbfc;
border-radius: 0 10px 10px 0; padding: 9px 11px;
}
.vc-subtip b { font-size: 12.5px; font-weight: 700; color: #1d5f68; }
.vc-subtip span { font-size: 11.5px; line-height: 1.6; color: #6c8c90; }
/* ---------------- 上传区（主体图 / 参考视频共用） ---------------- */
.vc-upload { position: relative; border-radius: 14px; }
.vc-up-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
border: 1.5px dashed #d9cec0; border-radius: 14px; background: #fdfbf8;
padding: 22px 14px; cursor: pointer; transition: all .16s;
}
.vc-upload:hover .vc-up-empty { border-color: #2b8f9b; background: #f5fcfd; }
.vc-upload.tall .vc-up-empty { padding: 30px 14px; }
.vc-up-ic { font-size: 22px; line-height: 1; color: #c9b9a6; }
.vc-upload:hover .vc-up-ic { color: #2b8f9b; }
.vc-up-t { font-size: 13px; font-weight: 600; color: #4b4038; }
.vc-up-s { font-size: 11px; color: #a89a8c; text-align: center; line-height: 1.5; }
.vc-up-has {
position: relative; display: flex; align-items: center; gap: 11px;
border: 1px solid #cfe6e9; border-radius: 14px; background: #f7fdfd;
padding: 10px;
}
.vc-up-has img, .vc-up-has video {
flex: 0 0 auto; width: 76px; height: 76px; object-fit: cover;
border-radius: 10px; background: #e9eef0; cursor: pointer;
}
.vc-upload.tall .vc-up-has video { width: 108px; height: 76px; }
.vc-up-bd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vc-up-ok { font-size: 12.5px; font-weight: 700; color: #1d7a63; }
.vc-up-x {
position: absolute; right: 8px; top: 8px;
width: 22px; height: 22px; line-height: 20px; text-align: center;
border: none; border-radius: 50%; cursor: pointer;
background: rgba(35, 25, 18, .55); color: #fff; font-size: 15px;
}
.vc-up-x:hover { background: var(--danger); }
/* ---------------- ② 参考视频 ---------------- */
.vc-ref-tabs {
display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 11px;
background: #f3ece4; border-radius: 999px;
}
.vc-rtab {
border: none; background: transparent; font-family: inherit; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: #8a7a6c;
padding: 6px 16px; border-radius: 999px; transition: all .16s;
}
.vc-rtab.on { background: #fff; color: #1d5f68; box-shadow: 0 1px 5px rgba(60, 48, 38, .1); }
.vc-ref-note { margin-top: 9px; font-size: 11px; line-height: 1.65; color: #a89a8c; }
.vc-ref-note b { color: #6b5a4c; }
.vc-link-row { display: flex; gap: 8px; }
.vc-input {
flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 12.5px;
border: 1px solid #e6ddd0; border-radius: 11px; padding: 10px 11px;
background: #fbf9f6; color: #3c332b; outline: none;
}
.vc-input:focus { border-color: #2b8f9b; background: #fff; }
.vc-link-get {
flex: 0 0 auto; border: none; border-radius: 11px; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
padding: 0 18px; background: linear-gradient(135deg, #2b8f9b, #173845);
}
.vc-link-get:active { opacity: .85; }
.vc-link-status { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: #a89a8c; word-break: break-all; }
.vc-link-status.ok { color: #1d7a63; font-weight: 600; }
/* ---------------- ③ 复刻设置 ---------------- */
.vc-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.vc-field-col { flex-direction: column; gap: 7px; }
.vc-field-lab {
flex: 0 0 48px; padding-top: 6px;
font-size: 12px; font-weight: 600; color: #6b5a4c;
}
.vc-opt {
margin-left: 4px; font-size: 10px; font-weight: 500; color: #b5a798;
background: #f5efe8; border-radius: 5px; padding: 1px 5px;
}
.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.vc-chip {
border: 1px solid #e6ddd0; background: #fff; font-family: inherit;
font-size: 12px; color: #55493e; padding: 6px 12px; border-radius: 999px;
cursor: pointer; transition: all .16s; white-space: nowrap;
}
.vc-chip:hover { border-color: #cbdadd; }
.vc-chip.on {
background: linear-gradient(135deg, #173845, #1f6d78);
color: #eaf9fb; border-color: #1f6d78; font-weight: 600;
}
.vc-switches { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.vc-sw {
display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
border: 1px solid #ece5dd; border-radius: 12px; padding: 10px 11px;
background: #fdfbf9; transition: all .16s;
}
.vc-sw:hover { border-color: #d5c8b8; }
.vc-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.vc-sw-box {
flex: 0 0 auto; position: relative; width: 36px; height: 21px; margin-top: 1px;
border-radius: 999px; background: #ddd2c6; transition: background .18s;
}
.vc-sw-box::after {
content: ''; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(60, 48, 38, .25);
transition: transform .18s;
}
.vc-sw input:checked + .vc-sw-box { background: linear-gradient(135deg, #2b8f9b, #173845); }
.vc-sw input:checked + .vc-sw-box::after { transform: translateX(15px); }
.vc-sw-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-sw-tx b { font-size: 12.5px; font-weight: 700; color: #3a2f27; }
.vc-sw-tx em { font-style: normal; font-size: 11px; line-height: 1.5; color: #a2968a; }
.vc-ta {
width: 100%; box-sizing: border-box;
border: 1px solid #e6ddd0; border-radius: 11px; padding: 10px 11px;
font-family: inherit; font-size: 12.5px; line-height: 1.6; color: #3c332b;
background: #fbf9f6; resize: none; outline: none;
}
.vc-ta:focus { border-color: #2b8f9b; background: #fff; }
/* ---------------- 开始复刻 ---------------- */
.vc-go { padding-bottom: 14px; }
.vc-go-row { display: flex; align-items: center; gap: 12px; }
.vc-go-info { flex: 1 1 auto; min-width: 0; }
.vc-cost { font-size: 12.5px; font-weight: 600; color: #55493e; line-height: 1.5; }
.vc-quota { margin-top: 3px; font-size: 11px; color: #a89a8c; }
.vc-gen {
flex: 0 0 auto; border: none; border-radius: 13px; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
padding: 13px 26px; background: var(--grad);
box-shadow: 0 8px 20px rgba(249, 89, 1, .28); transition: all .16s;
}
.vc-gen:active { transform: translateY(1px); }
.vc-gen:disabled {
background: #e6ded5; color: #b3a496; cursor: not-allowed; box-shadow: none;
}
.vc-err {
margin-top: 11px; font-size: 12px; line-height: 1.65; color: #b42318;
background: #fef3f2; border: 1px solid #fecdca; border-radius: 11px; padding: 10px 11px;
}
/* ---------------- 进度特效 ---------------- */
.vc-prog { border-color: #cfe6e9; background: linear-gradient(180deg, #f9fdfd, #fff); }
.vc-prog-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.vc-prog-spin {
flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
border: 2px solid #cfe6e9; border-top-color: #1f6d78;
animation: vc-spin .8s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }
.vc-prog-t { font-size: 13px; font-weight: 700; color: #1d5f68; }
.vc-prog-el { margin-left: auto; font-size: 11.5px; color: #7d9296; font-variant-numeric: tabular-nums; }
.vc-bar {
position: relative; height: 8px; border-radius: 999px; overflow: hidden;
background: #e6f1f3;
}
.vc-bar i {
display: block; position: relative; overflow: hidden;
height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #2b8f9b, #6fe3e3);
transition: width .9s cubic-bezier(.2, .7, .3, 1);
}
.vc-bar i::after {
content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
animation: vc-shine 1.6s linear infinite;
}
@keyframes vc-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.vc-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.vc-step-i { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.4; }
.vc-step-dot {
flex: 0 0 auto; width: 17px; height: 17px; line-height: 15px; text-align: center;
border-radius: 50%; font-size: 9.5px; font-weight: 700;
border: 1.5px solid #dfd6cb; color: #b8aa9c; background: #fff;
}
.vc-step-i.done .vc-step-dot { border-color: #4ade80; background: #4ade80; color: #fff; }
.vc-step-i.run .vc-step-dot { border-color: #1f6d78; background: #e6f5f7; }
.vc-step-i.wait { opacity: .5; }
.vc-step-tx { color: #6b5a4c; }
.vc-step-i.done .vc-step-tx { color: #1d7a63; }
.vc-step-i.run .vc-step-tx { color: #1d5f68; font-weight: 700; }
.vc-mini-spin {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
border: 1.5px solid #b6dbe0; border-top-color: #1f6d78;
animation: vc-spin .7s linear infinite;
}
.vc-prog-note { margin-top: 12px; font-size: 11px; line-height: 1.68; color: #9db0b3; }
/* ---------------- 结果 ---------------- */
.vc-result { border-color: #bfe6cf; }
/* 结果卡的 meta 文案很长（清晰度·时长·体积·耗时·原声）→ 让标题独占一行、meta 折到第二行，
否则「复刻完成」会被挤成两行 */
.vc-result .vc-card-hd { flex-wrap: wrap; row-gap: 2px; }
.vc-result .vc-card-hd h3 { white-space: nowrap; }
.vc-result .vc-card-tip { flex: 1 1 100%; margin-left: 28px; }
.vc-player {
border-radius: 14px; overflow: hidden; background: #0c1116;
box-shadow: 0 10px 26px rgba(12, 17, 22, .22);
}
.vc-player video { display: block; width: 100%; max-height: 66vh; background: #0c1116; }
.vc-res-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 主按钮独占一行（层级更清楚），两个次按钮并排 */
.vc-btn-primary {
flex: 1 1 100%; border: none; border-radius: 12px; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
padding: 13px 18px; background: var(--grad);
box-shadow: 0 6px 16px rgba(249, 89, 1, .24);
}
.vc-btn-ghost {
flex: 1 1 0; border: 1px solid #e0d6c9; border-radius: 12px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600; color: #6b5a4c;
padding: 12px 16px; background: #fff;
}
.vc-btn-ghost:hover { border-color: #2b8f9b; color: #1d5f68; }
.vc-hist { margin-top: 15px; padding-top: 13px; border-top: 1px dashed #ece5dd; }
.vc-hist-t { font-size: 12px; font-weight: 700; color: #6b5a4c; margin-bottom: 9px; }
.vc-hist-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
.vc-hist-i {
border: 1px solid #ece5dd; border-radius: 12px; overflow: hidden; background: #fff;
transition: all .16s;
}
.vc-hist-i.on { border-color: #2b8f9b; box-shadow: 0 0 0 3px rgba(43, 143, 155, .09); }
.vc-hist-i video { display: block; width: 100%; height: 96px; object-fit: cover; background: #0c1116; }
.vc-hist-bd { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 3px; }
.vc-hist-bd span { font-size: 11.5px; font-weight: 600; color: #4b4038; }
.vc-hist-s { font-size: 10.5px; color: #a89a8c !important; font-weight: 400 !important; }
.vc-hist-btns { display: flex; gap: 6px; padding: 7px 9px 9px; }
.vc-mini {
flex: 1 1 auto; border: none; border-radius: 8px; cursor: pointer;
font-family: inherit; font-size: 11.5px; font-weight: 600; color: #fff;
padding: 6px 8px; background: linear-gradient(135deg, #2b8f9b, #173845);
}
.vc-mini.ghost { background: #f3ece4; color: #6b5a4c; }
.vc-mini.ghost:hover { background: #e8ded2; }
/* ---------------- Toast ---------------- */
.vc-toast {
position: fixed; left: 50%; bottom: 92px; z-index: 9000;
transform: translate(-50%, 8px); max-width: 78vw;
font-size: 13px; font-weight: 600; color: #fff; text-align: center;
background: rgba(18, 34, 44, .93); border-radius: 12px; padding: 10px 16px;
opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.vc-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ---------------- 窄屏 ---------------- */
@media (max-width: 380px) {
.vc-hero-t { font-size: 21px; }
.vc-subjects { grid-template-columns: 1fr; }
.vc-field { flex-direction: column; gap: 7px; }
.vc-field-lab { flex: none; padding-top: 0; }
.vc-go-row { flex-direction: column; align-items: stretch; }
.vc-gen { width: 100%; padding: 13px 18px; }
}
/* ===================== 全驱数字人（.fa-*） ===================== */
/* 🔴 `hidden` 会被 display:grid/flex 盖掉 —— 本模块用属性切换的区块较多，
统一用一条高优先级的强制规则兜住，避免"一进页面就展开、点开收起没反应" */
#sub-fullavatar [hidden] { display: none !important; }
.fa-banner {
display: flex; align-items: center; gap: 12px;
padding: 15px 16px; margin-bottom: 12px; border-radius: 18px;
background: linear-gradient(135deg, #f6f2ff 0%, #fdf6f0 55%, #fff6f8 100%);
border: 1px solid #efe6f6; position: relative; overflow: hidden;
}
.fa-banner::after {
content: ''; position: absolute; right: -34px; top: -40px; width: 108px; height: 108px;
border-radius: 50%; background: radial-gradient(circle, rgba(139,124,246,.24), rgba(139,124,246,0) 70%);
}
.fa-banner-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.fa-banner-tx { flex: 1 1 auto; min-width: 0; }
.fa-banner-t { font-size: 16px; font-weight: 700; color: #2c2440; letter-spacing: .2px; }
.fa-banner-s { font-size: 12px; color: #8a8098; margin-top: 3px; line-height: 1.5; }
.fa-req {
font-size: 10.5px; font-weight: 600; color: #c2638a; background: #fdeef5;
border-radius: 6px; padding: 2px 6px; margin-left: 4px; vertical-align: 1px;
}
/* —— 分段切换 —— */
.fa-tabs { display: flex; gap: 6px; background: #f6f3f0; padding: 4px; border-radius: 13px; margin-bottom: 12px; }
.fa-tabs.sm { background: #f8f5f2; margin-bottom: 10px; }
.fa-tab {
flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: 10px;
padding: 9px 6px; font-size: 12.5px; color: #8a8098; cursor: pointer;
font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-webkit-tap-highlight-color: transparent; transition: background .18s, color .18s;
}
.fa-tab.on { background: #fff; color: #4a3fd0; box-shadow: 0 1px 4px rgba(80,60,140,.10); }
/* —— 上传区 —— */
.fa-drop {
display: block; width: 100%; border: 1.5px dashed #e2d6ee; border-radius: 16px;
background: linear-gradient(180deg, #fdfbff, #fffaf7); padding: 26px 16px;
text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: border-color .2s, background .2s;
}
.fa-drop.sm { padding: 20px 14px; }
.fa-drop:active { border-color: #8B7CF6; background: #f8f4ff; }
.fa-drop.has { display: none; }
.fa-drop-ico { font-size: 26px; color: #a99ae8; line-height: 1; margin-bottom: 8px; }
.fa-drop-t { font-size: 14px; font-weight: 600; color: #4a4258; }
.fa-drop-s { font-size: 11.5px; color: #a79eb4; margin-top: 5px; line-height: 1.5; }
.fa-imgprev { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid #eee5f5; border-radius: 16px; background: #fff; }
.fa-imgprev img { width: 78px; height: 78px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; background: #f4f1f7; }
.fa-imgmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fa-imgmeta span { font-size: 12.5px; color: #6f6880; }
.fa-imgx {
align-self: flex-start; border: 1px solid #eadff5; background: #faf7ff; color: #6d5fd0;
font-size: 12px; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-weight: 600;
}
/* —— 内置形象 —— */
.fa-models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fa-model {
border: 1.5px solid #efe7f4; border-radius: 13px; background: #fff; padding: 5px 4px 6px;
cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px;
-webkit-tap-highlight-color: transparent; transition: border-color .18s, box-shadow .18s;
}
.fa-model img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 9px; background: #f4f1f7; }
.fa-model span { font-size: 10.5px; color: #7a7189; white-space: nowrap; }
.fa-model.on { border-color: #8B7CF6; box-shadow: 0 0 0 2px rgba(139,124,246,.16); }
.fa-model.on span { color: #4a3fd0; font-weight: 700; }
/* —— 说明文字 —— */
.fa-note { font-size: 11.5px; color: #8a8098; line-height: 1.65; margin: 10px 2px 0; }
.fa-note.dim { color: #a79eb4; }
.fa-note b { color: #6d5fd0; }
/* —— 文本域 —— */
.fa-ta {
width: 100%; box-sizing: border-box; border: 1.5px solid #efe7f4; border-radius: 14px;
padding: 12px 13px; font-size: 13.5px; line-height: 1.65; color: #38313f; resize: vertical;
min-height: 96px; background: #fffdfb; font-family: inherit;
}
.fa-ta.sm { min-height: 62px; }
.fa-ta:focus { outline: none; border-color: #b9aaf0; background: #fff; }
.fa-metarow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.fa-count { font-size: 11px; color: #b3aabd; }
.fa-est { font-size: 11px; color: #9b8fd0; text-align: right; }
/* —— 音色 chips —— */
.fa-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.fa-chip {
border: 1.5px solid #efe7f4; background: #fff; color: #6f6880; font-size: 12px;
padding: 8px 12px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fa-chip.on { border-color: #8B7CF6; background: #f6f3ff; color: #4a3fd0; font-weight: 700; }
.fa-mini {
margin-top: 12px; width: 100%; border: 0; border-radius: 12px; padding: 12px;
background: linear-gradient(135deg, #8B7CF6, #6a5ae0); color: #fff !important;
font-size: 13.5px; font-weight: 700; cursor: pointer;
box-shadow: 0 4px 14px rgba(106,90,224,.24); -webkit-tap-highlight-color: transparent;
}
.fa-mini:disabled { opacity: .55; box-shadow: none; }
.fa-minitxt {
display: block; width: 100%; margin-top: 9px; border: 0; background: transparent;
color: #9b93a8 !important; font-size: 12px; cursor: pointer; padding: 6px;
}
/* —— 公共声音 —— */
.fa-vgrps { display: flex; flex-direction: column; gap: 12px; }
.fa-vgrp-t {
display: inline-block; font-size: 11px; font-weight: 700; color: #a294c8;
letter-spacing: 1px; margin-bottom: 7px;
}
.fa-vlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.fa-voice {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
border: 1.5px solid #efe7f4; background: #fff; border-radius: 12px; padding: 9px 10px;
cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.fa-voice i { font-style: normal; font-size: 11px; color: #b9aaf0; }
.fa-voice b { font-size: 12.5px; color: #4a4258; font-weight: 600; }
.fa-voice em { font-style: normal; font-size: 10.5px; color: #ada5ba; line-height: 1.4; }
.fa-voice.on { border-color: #8B7CF6; background: #f7f4ff; }
.fa-voice.on b { color: #4a3fd0; }
.fa-audioname { font-size: 11.5px; color: #8a8098; margin: 9px 2px 0; word-break: break-all; }
/* —— 音频就绪条 —— */
.fa-audiobar {
margin-top: 13px; padding: 12px 13px; border-radius: 15px;
background: linear-gradient(180deg,#f7f9ff,#fbf7ff); border: 1px solid #e8e2f8;
}
.fa-audiobar-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fa-audiobar-t { font-size: 12.5px; color: #4a4258; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-audiobar-t b { color: #4a3fd0; }
.fa-audiobar-l { font-size: 11.5px; color: #8f86a0; flex: 0 0 auto; }
.fa-audiobar audio { width: 100%; margin-top: 9px; height: 34px; }
.fa-audiobar-tip { font-size: 11px; color: #8f86a0; line-height: 1.55; margin: 7px 0 0; }
/* —— 画面选项 —— */
.fa-sub { font-size: 12px; font-weight: 700; color: #6f6880; margin: 14px 2px 8px; }
.fa-sub:first-of-type { margin-top: 2px; }
.fa-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.fa-opt {
border: 1.5px solid #efe7f4; background: #fff; border-radius: 12px; padding: 10px 6px;
cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
-webkit-tap-highlight-color: transparent;
}
.fa-opt i { font-style: normal; font-size: 16px; line-height: 1; }
.fa-opt b { font-size: 11.5px; color: #6f6880; font-weight: 600; white-space: nowrap; }
.fa-opt.on { border-color: #8B7CF6; background: #f7f4ff; }
.fa-opt.on b { color: #4a3fd0; }
.fa-ratios { display: flex; gap: 9px; }
.fa-ratio {
flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 4px 8px; border: 1.5px solid #efe7f4; border-radius: 13px; background: #fff;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fa-ratio i { display: block; border-radius: 5px; background: linear-gradient(135deg, #8B7CF6, #6a5ae0); }
.fa-ratio span { font-size: 11.5px; color: #6f6880; font-weight: 600; }
.fa-ratio.on { border-color: #8B7CF6; background: #f7f4ff; }
.fa-ratio.on span { color: #4a3fd0; }
.fa-durs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fa-dur {
border: 1.5px solid #efe7f4; background: #fff; border-radius: 13px; padding: 11px 10px;
cursor: pointer; display: flex; flex-direction: column; gap: 3px; text-align: left;
-webkit-tap-highlight-color: transparent;
}
.fa-dur b { font-size: 14px; color: #4a4258; }
.fa-dur em { font-style: normal; font-size: 10.5px; color: #ada5ba; line-height: 1.4; }
.fa-dur.on { border-color: #8B7CF6; background: #f7f4ff; }
.fa-dur.on b { color: #4a3fd0; }
/* —— 进度 —— */
.fa-progress { margin: 14px 2px 0; }
.fa-progress-bar { height: 7px; border-radius: 99px; background: #efeaf6; overflow: hidden; }
.fa-progress-bar i {
display: block; height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, #8B7CF6, #b49af0, #8B7CF6);
background-size: 200% 100%; animation: faFlow 1.6s linear infinite;
transition: width .9s cubic-bezier(.3,.8,.4,1);
}
@keyframes faFlow { from { background-position: 0 0; } to { background-position: -200% 0; } }
.fa-progress-tx { font-size: 12px; color: #8a8098; margin-top: 9px; text-align: center; }
/* —— 结果 —— */
.fa-dimtxt { font-size: 11px; font-weight: 400; color: #b3aabd; }
.fa-reslist { display: flex; flex-direction: column; gap: 14px; }
.fa-res { border: 1px solid #f0e9f7; border-radius: 15px; padding: 11px; background: #fffdfd; }
.fa-res-hd {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 11.5px; color: #8a8098; margin-bottom: 9px;
}
.fa-res-ok { color: #3f9a6a; font-weight: 700; }
.fa-video {
width: 100%; display: block; border-radius: 12px; background: #1c1a22;
max-height: 62vh; object-fit: contain;
}
.fa-res .hs-acts { margin-top: 10px; }
@media (max-width: 520px) {
.fa-opts { grid-template-columns: repeat(2, 1fr); }
.fa-models { grid-template-columns: repeat(3, 1fr); }
.fa-vlist { grid-template-columns: 1fr 1fr; }
.fa-banner { padding: 13px 14px; }
.fa-banner-ico { font-size: 26px; }
}
/* ==========================================================================
视频 MAX 三兄弟 —— 文生视频 / 图生视频 / 视频生视频（视频板块）
hero 走深色 cinematic 调（视频功能的身份色），功能区沿用全站暖色卡片。
========================================================================== */
.vm-wrap { padding-bottom: 8px; }
/* ---------- 功能标识条（只显示当前这一个功能，不可切换）----------
三个功能各自独立：从视频板块点哪张卡进来，这里就只标出那一个。
所以永远只有一项、单列铺满，并且**不可点击**（不给横跳的入口）。 */
.vm-mtabs {
display: grid; grid-template-columns: 1fr; gap: 6px;
background: #fff; border-radius: 15px; padding: 5px; margin-bottom: 14px;
box-shadow: 0 3px 12px rgba(249, 89, 1, .07);
}
.vm-mtab {
border: none; background: transparent; cursor: pointer;
font-size: 12.5px; font-weight: 700; color: #8a7263;
border-radius: 11px; padding: 10px 4px; line-height: 1.25;
transition: background .16s, color .16s, box-shadow .16s;
}
.vm-mtab i { display: block; font-style: normal; font-size: 16px; margin-bottom: 3px; }
.vm-mtab.on {
color: #fff;
background: linear-gradient(135deg, #4b3b8f 0%, #2b2352 100%);
box-shadow: 0 6px 16px rgba(43, 35, 82, .28);
}
.vm-mtab.only {
cursor: default; text-align: left;
display: flex; align-items: center; gap: 11px;
padding: 12px 13px;
}
.vm-mtab.only:active { transform: none; }
/* 功能头三段：图标 / 名称+说明 / 右侧标识 */
.vm-mtab-ic {
flex: 0 0 auto; width: 38px; height: 38px; line-height: 38px; text-align: center;
font-size: 19px; border-radius: 12px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .16);
}
.vm-mtab-bd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vm-mtab-bd b { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .3px; }
.vm-mtab-bd em {
font-style: normal; font-size: 11.5px; line-height: 1.45;
color: rgba(255, 255, 255, .74);
}
.vm-mtab-badge {
flex: 0 0 auto; white-space: nowrap;
font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
color: #ffd2ac; border: 1px solid rgba(255, 180, 130, .34);
border-radius: 999px; padding: 3px 8px; background: rgba(255, 138, 61, .14);
}
/* ---------- hero ---------- */
.vm-hero {
position: relative; overflow: hidden;
border-radius: 20px; padding: 22px 18px 20px; margin-bottom: 14px;
background: linear-gradient(135deg, #2a2352 0%, #3d2f6e 48%, #6d3a86 100%);
color: #fff; box-shadow: 0 12px 28px rgba(43, 35, 82, .30);
}
.vm-hero-glow, .vm-hero-glow2 { position: absolute; border-radius: 50%; pointer-events: none; }
.vm-hero-glow { right: -66px; top: -84px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 138, 61, .34), transparent 68%); }
.vm-hero-glow2 { left: -56px; bottom: -76px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(120, 90, 220, .34), transparent 70%); }
.vm-hero-tag {
position: relative; display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
color: #ffd2ac; border: 1px solid rgba(255, 180, 130, .34); border-radius: 999px;
padding: 3px 10px; margin-bottom: 10px; background: rgba(255, 138, 61, .14);
}
.vm-hero-t { position: relative; font-size: 21px; font-weight: 800; line-height: 1.34; letter-spacing: .3px; }
.vm-hero-s { position: relative; margin-top: 8px; font-size: 12.5px; line-height: 1.62; color: rgba(255, 255, 255, .80); }
.vm-hero-flow { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.vm-fchip {
font-size: 11px; font-weight: 600; color: #e6defc;
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px; padding: 3px 9px;
}
.vm-hero-flow i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .38); }
/* ---------- 卡片 ---------- */
.vm-card {
background: #fff; border-radius: 18px; padding: 15px 14px 14px; margin-bottom: 13px;
box-shadow: 0 3px 14px rgba(249, 89, 1, .07);
}
.vm-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.vm-card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: #4a3227; }
.vm-step {
flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px; text-align: center;
font-size: 11px; font-weight: 800; color: #fff; border-radius: 7px;
background: linear-gradient(135deg, #4b3b8f, #2b2352);
}
.vm-card-tip { margin-left: auto; font-size: 11px; color: var(--text2); }
.vm-ta {
width: 100%; box-sizing: border-box; resize: vertical;
font-family: inherit; font-size: 13.5px; line-height: 1.62; color: #4a3227;
border: 1.5px solid #ffe0cd; border-radius: 13px; padding: 11px 12px; background: #fffdfb;
}
.vm-ta.sm { font-size: 13px; }
.vm-ta:focus { outline: none; border-color: #a58cf0; background: #fff; }
.vm-ta-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--text2); }
.vm-field { margin-top: 12px; }
.vm-field:first-of-type { margin-top: 0; }
.vm-fname { font-size: 12.5px; font-weight: 700; color: #6b4a34; margin-bottom: 7px; }
.vm-opt { font-size: 10.5px; font-weight: 600; color: var(--text2); margin-left: 3px; }
/* ---------- chips ---------- */
.vm-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vm-chip {
position: relative; text-align: left; cursor: pointer;
display: flex; flex-direction: column; gap: 2px;
background: #fff9f5; border: 1.5px solid #ffe4d5; border-radius: 12px; padding: 9px 10px;
transition: border-color .16s, background .16s, box-shadow .16s, transform .1s;
}
.vm-chip.sm { padding: 8px 9px; }
.vm-chip:active { transform: scale(.985); }
.vm-chip b { font-size: 12.5px; font-weight: 800; color: #4a3227; }
.vm-chip i { font-style: normal; font-size: 10.5px; line-height: 1.45; color: var(--text2); }
.vm-chip em { font-style: normal; font-size: 10px; color: #b9a596; }
.vm-chip.on {
border-color: #7c5cf0; background: linear-gradient(135deg, #f7f4ff, #efe9ff);
box-shadow: 0 4px 13px rgba(124, 92, 240, .16);
}
.vm-chip.on b { color: #5b3fbf; }
.vm-chip.on::after {
content: '✓'; position: absolute; right: 8px; top: 8px;
width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%;
font-size: 10px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #8b6cf5, #5b3fbf);
}
.vm-lab { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: #6b4a34; }
.vm-lab input {
display: block; width: 100%; box-sizing: border-box; margin-top: 7px;
font-family: inherit; font-size: 13px; color: #4a3227;
border: 1.5px solid #ffe0cd; border-radius: 12px; padding: 10px 12px; background: #fffdfb;
}
.vm-lab input:focus { outline: none; border-color: #a58cf0; background: #fff; }
/* ---------- 上传区（与 vc- 同构，类名独立避免互相污染）---------- */
.vm-up {
position: relative; border: 1.5px dashed rgba(124, 92, 240, .42);
border-radius: 15px; background: linear-gradient(180deg, #fbfaff, #f6f3ff);
min-height: 130px; display: flex; align-items: center; justify-content: center;
cursor: pointer; overflow: hidden; transition: border-color .18s, background .18s;
}
.vm-up.tall { min-height: 168px; }
.vm-up-empty { text-align: center; padding: 18px 14px; }
.vm-up-ic { display: block; font-size: 28px; line-height: 1; margin-bottom: 8px; }
.vm-up-t { display: block; font-size: 13.5px; font-weight: 700; color: #5b3a28; }
.vm-up-s { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--text2); }
.vm-up-has { position: relative; width: 100%; padding: 9px; }
.vm-up-has img, .vm-up-has video { display: block; width: 100%; max-height: 260px; border-radius: 11px; object-fit: contain; background: #000; }
.vm-up-bd { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.vm-up-ok { font-size: 12.5px; font-weight: 800; color: #16a34a; }
.vm-up-x {
position: absolute; right: 15px; top: 15px; width: 26px; height: 26px; line-height: 24px;
text-align: center; font-size: 17px; color: #fff; cursor: pointer;
background: rgba(25, 15, 10, .62); border: none; border-radius: 50%;
}
/* ---------- 主按钮 ---------- */
.vm-go {
width: 100%; border: none; cursor: pointer; margin: 2px 0 14px;
display: flex; align-items: center; justify-content: center; gap: 9px;
font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: .3px;
background: linear-gradient(135deg, #6d4fe0 0%, #3b2a76 100%);
border-radius: 16px; padding: 15px 18px;
box-shadow: 0 10px 24px rgba(59, 42, 118, .28);
transition: transform .12s, filter .16s;
}
.vm-go:active { transform: scale(.985); }
.vm-go #vmGoC { font-size: 12px; font-weight: 700; opacity: .86; }
.vm-go:disabled {
cursor: not-allowed; filter: grayscale(.5);
background: linear-gradient(135deg, #d6cbc4, #c3b6ae); box-shadow: none;
}
.vm-err {
margin: 0 0 14px; padding: 12px 14px; border-radius: 13px;
font-size: 12.5px; line-height: 1.6; color: #b91c1c;
background: #fef2f2; border: 1px solid #fecaca;
}
/* ---------- 进度：不许假造百分比，渐近 92% ---------- */
.vm-prog {
margin-bottom: 14px; padding: 15px 15px 14px; border-radius: 17px;
background: #fff; box-shadow: 0 4px 16px rgba(249, 89, 1, .08);
}
.vm-prog-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.vm-prog-hd span:first-child { font-size: 13.5px; font-weight: 800; color: #4a3227; }
.vm-prog-hd span:last-child { font-size: 11.5px; color: var(--text2); }
.vm-bar { height: 8px; border-radius: 999px; background: #efeaff; overflow: hidden; }
.vm-bar i {
display: block; height: 100%; width: 2%; border-radius: 999px;
background: linear-gradient(90deg, #8b6cf5, #4b3b8f);
transition: width .5s cubic-bezier(.22, .61, .36, 1);
position: relative;
}
.vm-bar i::after {
content: ''; position: absolute; inset: 0; border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
animation: vmShine 1.5s linear infinite;
}
@keyframes vmShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.vm-stages { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vm-stage { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #b3a094; transition: color .2s; }
.vm-stage i {
flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #e6ddd6;
transition: background .2s, box-shadow .2s;
}
.vm-stage.now { color: #4b3b8f; font-weight: 700; }
.vm-stage.now i { background: #6d4fe0; box-shadow: 0 0 0 4px rgba(109, 79, 224, .16); animation: vmPulse 1.2s ease-in-out infinite; }
.vm-stage.done { color: #8fbf9f; }
.vm-stage.done i { background: #34d399; }
@keyframes vmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.vm-prog-tip { margin-top: 11px; font-size: 11px; line-height: 1.6; color: var(--text2); }
/* ---------- 结果 ---------- */
.vm-result {
margin-bottom: 14px; padding: 15px 14px 14px; border-radius: 17px;
background: #fff; box-shadow: 0 5px 18px rgba(249, 89, 1, .10);
}
.vm-res-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.vm-res-t { font-size: 15px; font-weight: 800; color: #4a3227; }
.vm-res-meta { font-size: 11px; color: var(--text2); }
.vm-res-v { display: block; width: 100%; max-height: 420px; border-radius: 13px; background: #000; }
.vm-res-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.vm-act {
border: 1px solid #ffe0cd; background: #fff8f4; color: #5b3a28; cursor: pointer;
font-size: 13px; font-weight: 700; border-radius: 13px; padding: 12px 10px;
}
.vm-act.primary {
border: none; color: #fff;
background: linear-gradient(135deg, #6d4fe0, #3b2a76);
box-shadow: 0 8px 20px rgba(59, 42, 118, .24);
}
/* ---------- 历史生成 ---------- */
.vm-hist { margin-top: 18px; }
.vm-hist-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vm-hist-t { font-size: 14px; font-weight: 800; color: #4a3227; }
.vm-hist-count { font-size: 11px; color: var(--text2); }
.vm-hist-refresh {
margin-left: auto; font-size: 11.5px; font-weight: 700; color: #5b3fbf; cursor: pointer;
background: #f4f0ff; border: 1px solid #e2daff; border-radius: 999px; padding: 5px 12px;
}
.vm-hist-list { display: flex; flex-direction: column; gap: 10px; }
.vm-hist-empty {
padding: 20px 14px; text-align: center; font-size: 12px; color: var(--text2);
background: #fff; border-radius: 15px; border: 1px dashed #ffe0cd;
}
.vm-hist-item {
display: flex; gap: 10px; align-items: center;
background: #fff; border-radius: 15px; padding: 9px; box-shadow: 0 2px 10px rgba(249, 89, 1, .06);
}
.vm-hist-v { flex: 0 0 auto; width: 84px; height: 112px; border-radius: 10px; background: #000; object-fit: cover; }
.vm-hist-ph {
flex: 0 0 auto; width: 84px; height: 112px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--text2);
background: repeating-linear-gradient(45deg, #f7f2ee, #f7f2ee 8px, #f2ebe6 8px, #f2ebe6 16px);
}
.vm-hist-bd { flex: 1; min-width: 0; }
.vm-hist-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 800; color: #4a3227; }
.vm-hist-sub { font-weight: 600; color: #8a7263; font-size: 11.5px; }
.vm-hist-m { margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: var(--text2); }
.vm-hist-e { margin-top: 4px; font-size: 10.5px; color: #b91c1c; }
.vm-hb {
flex: 0 0 auto; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 7px;
}
.vm-hb.ok { color: #15803d; background: #dcfce7; }
.vm-hb.run { color: #5b3fbf; background: #ede9fe; animation: vmPulse 1.4s ease-in-out infinite; }
.vm-hb.bad { color: #b91c1c; background: #fee2e2; }
.vm-hact {
flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #5b3fbf; text-decoration: none;
background: #f4f0ff; border: 1px solid #e2daff; border-radius: 999px; padding: 6px 11px;
}
/* ---------- 兜底 toast ---------- */
.vm-toast {
position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 14px);
max-width: 82vw; z-index: 9999; pointer-events: none;
font-size: 13px; font-weight: 600; color: #fff; text-align: center;
background: rgba(35, 18, 10, .90); border-radius: 12px; padding: 10px 16px;
opacity: 0; transition: opacity .2s, transform .2s;
}
.vm-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ---------- 窄屏 ---------- */
@media (max-width: 380px) {
.vm-hero-t { font-size: 18.5px; }
.vm-chips { grid-template-columns: repeat(2, 1fr); }
.vm-mtab { font-size: 11.5px; padding: 9px 2px; }
.vm-res-acts { grid-template-columns: 1fr; }
.vm-hist-v, .vm-hist-ph { width: 70px; height: 94px; }
/* 窄屏放不下右侧标识，功能名与说明保留 */
.vm-mtab-badge { display: none; }
.vm-mtab-ic { width: 34px; height: 34px; line-height: 34px; font-size: 17px; }
}
/* [hidden] 兜底：类里含 display:flex/grid 的元素会被作者样式盖掉 UA 的 [hidden] */
.subpanel .vm-up-empty[hidden], .subpanel .vm-up-has[hidden], .subpanel .vm-up-has img[hidden],
.subpanel #vmPaneT2v[hidden], .subpanel #vmPaneI2v[hidden], .subpanel #vmPaneV2v[hidden],
.subpanel #vmStyleRow[hidden], .subpanel #vmProgWrap[hidden], .subpanel #vmResult[hidden],
.subpanel #vmErr[hidden] { display: none !important; }
/* ====== 图片去水印（.wm-*）2026-09-15 追加 ======
配色语义：深青 → 水色 —— "把脏东西冲干净"这个意象，和站点橙、选题灵感的墨青、
钩子文案的绛红都区分得开。
⚠️ `hidden` 会被 display:flex/grid/grid 盖掉 → 下面统一兜一条高优先级规则（本项目踩过 7 批）。 */
#sub-watermark [hidden] { display: none !important; }
/* ---------------- 沉浸式 hero ---------------- */
.wm-hero {
position: relative; overflow: hidden;
background: linear-gradient(140deg, #0f2a35 0%, #17475a 48%, #1f6f74 100%);
border-radius: var(--radius);
padding: 26px 20px 20px;
margin-bottom: 14px;
color: #fff;
box-shadow: 0 10px 26px rgba(15, 42, 53, 0.28);
}
.wm-hero::after {
content: ''; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px;
border-radius: 50%; background: radial-gradient(circle, rgba(120, 230, 220, 0.30), transparent 68%);
}
.wm-hero-tag {
display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
padding: 4px 11px; border-radius: 999px;
background: rgba(255, 255, 255, 0.16); color: #d6fbf6;
border: 1px solid rgba(255, 255, 255, 0.24);
}
.wm-hero-t { font-size: 24px; font-weight: 800; line-height: 1.32; margin: 12px 0 8px; letter-spacing: 0.5px; }
.wm-hero-s { font-size: 13px; line-height: 1.7; color: rgba(226, 250, 248, 0.86); position: relative; z-index: 1; }
.wm-hero-flow { display: flex; align-items: center; gap: 7px; margin-top: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.wm-hero-flow i { font-style: normal; color: rgba(255, 255, 255, 0.42); font-size: 12px; }
.wm-fchip {
font-size: 12px; padding: 4px 11px; border-radius: 999px;
background: rgba(255, 255, 255, 0.10); color: rgba(226, 250, 248, 0.72);
border: 1px solid rgba(255, 255, 255, 0.16);
transition: all 0.22s ease;
}
.wm-fchip.on { background: #7fe3d6; color: #0c2b30; border-color: #7fe3d6; font-weight: 700; }
/* ---------------- 上传 ---------------- */
.wm-ct { justify-content: space-between; }
.wm-meta { font-size: 12px; font-weight: 500; color: var(--text2); }
.wm-drop {
position: relative; border: 1.5px dashed #cfd9dd; border-radius: 14px;
padding: 26px 16px; text-align: center; cursor: pointer;
background: #f8fbfc; transition: all 0.2s ease;
}
.wm-drop.drag { border-color: #1f6f74; background: #eefbf9; }
.wm-drop.has { padding: 0; border-style: solid; border-color: #e6ebee; overflow: hidden; }
.wm-prev { display: block; width: 100%; height: auto; }
.wm-hint-ico { font-size: 30px; margin-bottom: 8px; }
.wm-hint-t { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.wm-hint-s { font-size: 12px; color: var(--text2); line-height: 1.6; }
/* ---------------- 工具条 ---------------- */
.wm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wm-tool {
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
padding: 8px 13px; border-radius: 999px;
border: 1.5px solid #e2e8ec; background: #fff; color: #46505a;
transition: all 0.16s ease;
}
.wm-tool.on { border-color: #1f6f74; background: #e9f8f6; color: #14565c; }
.wm-tool:active { transform: scale(0.96); }
.wm-tools-sep { width: 1px; height: 18px; background: #e6ebee; margin: 0 2px; }
.wm-sizerow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wm-sizel { font-size: 12.5px; color: var(--text2); flex: none; }
.wm-sizerow input[type=range] { flex: 1; accent-color: #1f6f74; height: 22px; }
.wm-sizerow b { font-size: 13px; color: #14565c; min-width: 30px; text-align: right; }
/* ---------------- 画布 ---------------- */
.wm-stage {
position: relative; margin-top: 12px; border-radius: 12px; overflow: hidden;
background: #0f172a; line-height: 0; touch-action: none;
}
.wm-stage img { display: block; width: 100%; height: auto; }
.wm-stage canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0.5; cursor: crosshair; touch-action: none;
}
.wm-stage-tip {
position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
background: rgba(12, 32, 38, 0.8); color: #d6fbf6;
font-size: 12px; line-height: 1.4; padding: 6px 13px; border-radius: 999px;
pointer-events: none; transition: opacity 0.25s ease; white-space: nowrap;
}
/* ---------------- 一键圈选 ---------------- */
.wm-quick { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.wm-quick-l { font-size: 12.5px; color: var(--text2); flex: none; margin-right: 2px; }
.wm-q {
font-family: inherit; font-size: 12.5px; cursor: pointer;
padding: 6px 11px; border-radius: 8px;
border: 1px solid #e2e8ec; background: #fff; color: #46505a;
}
.wm-q:active { transform: scale(0.96); }
.wm-q-auto { border-color: #1f6f74; color: #14565c; background: #eefbf9; font-weight: 700; }
/* ---------------- 水印类型 ---------------- */
.wm-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wm-type {
font-family: inherit; text-align: left; cursor: pointer;
border: 1.5px solid #e2e8ec; border-radius: 12px; background: #fff;
padding: 11px 12px; transition: all 0.16s ease;
}
.wm-type b { display: block; font-size: 13.5px; color: #2b3540; margin-bottom: 3px; }
.wm-type span { display: block; font-size: 11.5px; color: var(--text2); line-height: 1.45; }
.wm-type.on { border-color: #1f6f74; background: #eefbf9; }
.wm-type.on b { color: #14565c; }
/* ---------------- 生成按钮的一组两个 ---------------- */
.gen-btn.ghost {
background: #fff; color: #14565c; border: 1.5px solid #a8dcd6;
box-shadow: none; margin-bottom: 10px;
}
.gen-btn.ghost:disabled { opacity: 0.5; }
.gen-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* ---------------- 进度（不假造百分比：阶段文案 + 已用时长 + 三点脉动）---------------- */
.wm-prog { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 4px; }
.wm-prog-bar { display: flex; gap: 7px; }
.wm-prog-bar i {
width: 9px; height: 9px; border-radius: 50%; background: #1f6f74; opacity: 0.35;
animation: wmPulse 1.1s infinite ease-in-out;
}
.wm-prog-bar i:nth-child(2) { animation-delay: 0.16s; }
.wm-prog-bar i:nth-child(3) { animation-delay: 0.32s; }
@keyframes wmPulse { 0%, 80%, 100% { opacity: 0.28; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } }
.wm-prog-tx { font-size: 13px; color: var(--text2); }
/* ---------------- 结果对比 ---------------- */
.wm-ok {
font-size: 11.5px; font-weight: 600; color: #15803d; background: #ecfdf3;
border-radius: 999px; padding: 3px 9px; margin-left: auto; margin-right: 8px;
}
.wm-dl {
font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
border: 0; border-radius: 999px; padding: 6px 12px;
background: var(--primary); color: #fff; flex: none;
}
.wm-cmp {
position: relative; width: 100%; border-radius: 12px; overflow: hidden;
background: #0f172a; line-height: 0; user-select: none; touch-action: none;
}
.wm-cmp img { display: block; width: 100%; height: auto; }
.wm-cmp-a { position: relative; }
.wm-cmp-b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wm-cmp-line {
position: absolute; top: 0; bottom: 0; width: 2px; background: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.45); pointer-events: none;
}
.wm-cmp-line i {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #14565c;
font-style: normal; font-size: 14px; line-height: 30px; text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.wm-cmp-tag {
position: absolute; bottom: 10px; font-size: 11px; padding: 3px 9px; border-radius: 999px;
background: rgba(12, 32, 38, 0.72); color: #d6fbf6; line-height: 1.5;
}
.wm-cmp-tag.l { left: 10px; }
.wm-cmp-tag.r { right: 10px; }
.wm-rmeta { font-size: 12px; color: var(--text2); margin-top: 10px; line-height: 1.7; }
.wm-acts { display: flex; gap: 10px; margin-bottom: 14px; }
.wm-act {
flex: 1; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
padding: 13px; border-radius: 999px; border: 1.5px solid #e2e8ec; background: #fff; color: #46505a;
}
.wm-act.primary { border: 0; background: linear-gradient(135deg, #1f6f74, #14565c); color: #fff; }
/* ---------------- toast ---------------- */
.wm-toast {
position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(14px);
background: rgba(12, 32, 38, 0.93); color: #eafaf8;
font-size: 13.5px; padding: 10px 18px; border-radius: 999px;
opacity: 0; pointer-events: none; transition: all 0.24s ease; z-index: 300;
max-width: 82vw; text-align: center; line-height: 1.5;
}
.wm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 360px) {
.wm-types { grid-template-columns: 1fr; }
.wm-hero-t { font-size: 21px; }
}
/* ===================== 图片切图（2026-09-15） ===================== */
.sl-hero { position:relative; overflow:hidden; border-radius:22px; padding:20px 18px 18px; margin-bottom:14px;
background:radial-gradient(120% 140% at 10% 0%, rgba(56,189,208,.40) 0%, rgba(56,189,208,0) 55%),
linear-gradient(150deg, #101a24 0%, #131a22 55%, #16202a 100%);
color:#fff; box-shadow:0 12px 28px rgba(16,30,40,.28); }
.sl-hero::after { content:''; position:absolute; right:-46px; bottom:-60px; width:170px; height:170px; border-radius:50%;
background:radial-gradient(circle, rgba(80,220,235,.38), rgba(80,220,235,0) 68%); }
.sl-hero-tag { position:relative; display:inline-block; font-size:11px; letter-spacing:.6px; font-weight:600;
color:#c9f2f8; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 11px; }
.sl-hero-t { position:relative; font-size:22px; font-weight:800; letter-spacing:.8px; margin-top:11px; line-height:1.32; }
.sl-hero-s { position:relative; font-size:12.5px; line-height:1.65; color:rgba(255,255,255,.78); margin-top:7px; }
.sl-hero-meta { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.sl-hero-meta span { font-size:11.5px; color:#dcf6fa; background:rgba(255,255,255,.1); border-radius:999px; padding:5px 11px; }
.sl-sub { font-size:12.5px; font-weight:700; margin:15px 0 7px; }
.sl-sub:first-child { margin-top:6px; }
.sl-val { font-weight:600; color:var(--primary); }
.sl-tip { float:right; font-size:11px; font-weight:500; color:var(--text2); }
.sl-note { font-size:12px; color:var(--text2); line-height:1.62; margin-top:9px; }
.sl-platinfo { color:var(--primary); font-weight:600; }
.sl-chip-hint { display:block; font-size:10.5px; font-style:normal; opacity:.6; margin-top:2px; }
/* 上传位 */
.sl-slot { position:relative; border:1.5px dashed #9fd8e2; border-radius:16px; background:#f6fcfd;
padding:26px 16px; text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.sl-slot:active, .sl-slot.drag { background:#e9f8fb; border-color:var(--primary); }
.sl-slot-hint { pointer-events:none; }
.sl-slot-ico { font-size:30px; line-height:1; }
.sl-slot-t { font-size:13.5px; font-weight:700; margin-top:8px; }
.sl-slot-s { font-size:11.5px; color:var(--text2); margin-top:4px; line-height:1.5; }
.sl-slot input[hidden] { display:none !important; }
.sl-info { font-size:12px; color:var(--text2); margin-top:9px; text-align:center; }
/* 数字 chips（列/行/张数） */
.chips.chips-num { gap:8px; }
.chips.chips-num .chip { min-width:44px; text-align:center; justify-content:center; padding:8px 0; font-weight:700; }
/* 开关 */
.sl-toggle { display:flex; align-items:center; gap:10px; width:100%; margin-top:14px; padding:11px 13px;
border:1px solid #e6eef0; border-radius:13px; background:#fff; font-size:13px; font-weight:600;
color:var(--text); cursor:pointer; text-align:left; }
.sl-toggle i { flex:0 0 38px; height:22px; border-radius:999px; background:#dfe7ea; position:relative; transition:background .18s; }
.sl-toggle i::after { content:''; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .18s; }
.sl-toggle.on i { background:var(--primary); }
.sl-toggle.on i::after { transform:translateX(16px); }
/* 相框留白 */
.sl-gaprow { display:flex; align-items:center; gap:12px; }
.sl-gaprow input[type=range] { flex:1; accent-color:var(--primary); }
.sl-gaprow input[type=color] { width:38px; height:30px; border:1px solid #e6eef0; border-radius:9px; padding:2px; background:#fff; cursor:pointer; }
/* 自定义规格 */
.sl-custom { display:flex; flex-wrap:wrap; gap:10px; margin-top:11px; }
.sl-custom label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); }
.sl-custom input { width:76px; padding:7px 9px; border:1px solid #e6eef0; border-radius:9px; font-size:13px; }
/* 预览舞台 */
/* 长图按宽度铺满 + 框内纵向滚动（否则 600×4200 会被压成一条看不清的细条） */
.sl-stage { position:relative; margin-top:6px; min-height:150px; max-height:440px; border-radius:14px;
overflow:auto; background:repeating-conic-gradient(#f2f5f6 0% 25%, #e9eff1 0% 50%) 50% / 18px 18px;
display:flex; align-items:flex-start; justify-content:center; padding:8px; -webkit-overflow-scrolling:touch; }
.sl-frame { position:relative; flex:0 0 auto; }
.sl-stage canvas { display:block; border-radius:4px; }
.sl-layer { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.sl-line { position:absolute; width:2px; height:2px; background:rgba(255,255,255,.94);
box-shadow:0 0 0 1px rgba(0,0,0,.42), 0 0 6px rgba(0,0,0,.3); }
.sl-mask { position:absolute; background:rgba(10,16,20,.46); }
.sl-crop { position:absolute; border:1.5px dashed rgba(255,255,255,.95); box-shadow:0 0 0 1px rgba(0,0,0,.35) inset; border-radius:4px; }
.sl-hline { position:absolute; left:0; right:0; height:22px; margin-top:-11px; pointer-events:auto; cursor:ns-resize;
display:flex; align-items:center; }
.sl-hline::before { content:''; position:absolute; left:0; right:0; height:2px; background:#ff5a7a;
box-shadow:0 0 0 1px rgba(255,255,255,.85), 0 1px 5px rgba(0,0,0,.35); }
.sl-hline-tag { position:relative; z-index:1; margin-left:6px; font-size:10.5px; font-weight:700; color:#fff;
background:#ff5a7a; border-radius:999px; padding:2px 7px; box-shadow:0 2px 6px rgba(0,0,0,.28); }
.sl-empty { text-align:center; color:var(--text2); font-size:12.5px; padding:34px 10px; }
.sl-empty-ico { font-size:30px; margin-bottom:8px; line-height:1; }
.sl-stage-meta { font-size:11.5px; color:var(--text2); margin-top:9px; text-align:center; }
/* AI / 按钮行 */
.sl-row2 { display:flex; gap:9px; margin-top:13px; }
.sl-ai-btn { flex:1; padding:12px 14px; border:none; border-radius:13px; font-size:13.5px; font-weight:700; color:#fff;
background:linear-gradient(135deg,#2bb6cc,#3f7fd8); cursor:pointer; box-shadow:0 6px 16px rgba(43,182,204,.28); }
.sl-ai-btn:disabled { opacity:.45; box-shadow:none; cursor:not-allowed; }
.sl-ghost { padding:12px 15px; border:1px solid #e6eef0; border-radius:13px; background:#fff;
font-size:13px; font-weight:600; color:var(--text); cursor:pointer; }
.sl-ghost:disabled { opacity:.45; cursor:not-allowed; }
.sl-ai-cost { font-size:11.5px; color:var(--text2); margin-top:8px; line-height:1.55; }
/* 进度 */
.sl-progress { margin-top:12px; }
.sl-bar-wrap { height:6px; border-radius:999px; background:#e8f4f7; overflow:hidden; }
.sl-bar { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#2bb6cc,#3f7fd8); transition:width .4s ease; }
.sl-status { font-size:12px; color:var(--text2); margin-top:8px; line-height:1.6; min-height:19px; }
/* 结果 */
.sl-result { margin-top:16px; border-radius:18px; background:#fff; border:1px solid #e0eef1;
box-shadow:0 6px 16px rgba(30,80,90,.07); overflow:hidden; }
.sl-result-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px;
font-size:13px; font-weight:700; background:#f5fbfc; }
.sl-meta { font-size:11px; font-weight:500; color:var(--text2); }
.sl-slices { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:13px 13px 4px; }
.sl-slice { position:relative; margin:0; border-radius:11px; overflow:hidden; background:#f2f6f7; border:1px solid #e4eef0; }
.sl-slice.over { border-color:#ff5a7a; box-shadow:0 0 0 2px rgba(255,90,122,.16); }
.sl-slice img { display:block; width:100%; max-height:210px; object-fit:contain; background:#fff; }
.sl-slice figcaption { display:flex; align-items:center; gap:5px; padding:6px 7px; font-size:10.5px; color:var(--text2); }
.sl-slice figcaption b { color:var(--primary); font-size:11px; }
.sl-slice figcaption .sl-kb { margin-left:auto; }
.sl-slice.over .sl-kb { color:#e03b5c; font-weight:700; }
.sl-dl { position:absolute; right:5px; top:5px; width:24px; height:24px; border:none; border-radius:8px; padding:0;
font-size:12px; line-height:1; color:#fff; background:rgba(0,0,0,.46); cursor:pointer; }
.sl-dl:active { background:rgba(0,0,0,.68); }
.sl-dlbar { display:flex; gap:9px; padding:11px 13px 14px; }
.sl-primary { flex:1; padding:13px; border:none; border-radius:13px; font-size:14px; font-weight:700; color:#fff;
background:var(--grad); cursor:pointer; box-shadow:0 6px 16px rgba(200,110,60,.22); }
.sl-primary:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.sl-result .sl-note { padding:0 13px 13px; }
.sl-toast { position:fixed; left:50%; bottom:78px; transform:translate(-50%,12px); z-index:9999;
background:rgba(22,26,30,.92); color:#fff; font-size:13px; padding:10px 17px; border-radius:999px;
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:82vw; text-align:center; }
.sl-toast.on { opacity:1; transform:translate(-50%,0); }
/* ===================== AI配音 · 三引擎配音工作台（.av-*） ===================== */
/* 🔴 `hidden` 会被 display:grid/flex 盖掉 —— 本页多处用属性控制显隐，统一强制兜底 */
#sub-voice [hidden] { display: none !important; }
.av-banner {
display: flex; align-items: center; gap: 12px;
padding: 15px 16px; margin-bottom: 12px; border-radius: 18px;
background: linear-gradient(135deg, #fff4ec 0%, #fdf1f7 55%, #f3f0ff 100%);
border: 1px solid #f6e6dd; position: relative; overflow: hidden;
}
.av-banner::after {
content: ''; position: absolute; right: -30px; top: -46px; width: 112px; height: 112px;
border-radius: 50%; background: radial-gradient(circle, rgba(255,150,90,.22), rgba(255,150,90,0) 70%);
}
.av-banner-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.av-banner-tx { flex: 1 1 auto; min-width: 0; }
.av-banner-t { font-size: 16px; font-weight: 700; color: #3a2a24; letter-spacing: .2px; }
.av-banner-s { font-size: 12px; color: #a08878; margin-top: 3px; line-height: 1.5; }
.av-hint { font-size: 11px; font-weight: 400; color: #b3a6a0; }
.av-count { font-size: 11px; font-weight: 400; color: #b3a6a0; }
.av-pick { font-size: 11.5px; font-weight: 600; color: #7a6ad0; }
/* —— 引擎卡片 —— */
.av-engines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.av-eng {
border: 1.5px solid #f0e7e2; border-radius: 15px; background: #fff;
padding: 12px 8px 10px; cursor: pointer; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 3px;
-webkit-tap-highlight-color: transparent; transition: border-color .18s, box-shadow .18s, background .18s;
}
.av-eng-ico { font-size: 22px; line-height: 1; }
.av-eng b { font-size: 12.5px; color: #4a4248; font-weight: 700; }
.av-eng em { font-style: normal; font-size: 10px; color: #b8aaa4; }
.av-eng-n { font-size: 10px; color: #c4b8b2; margin-top: 2px; }
.av-eng.on { border-color: #ff9a5a; background: linear-gradient(180deg,#fff9f4,#fff3ec); box-shadow: 0 0 0 2px rgba(255,154,90,.14); }
.av-eng.on b { color: #d9631f; }
.av-eng.on em, .av-eng.on .av-eng-n { color: #c98a5f; }
/* —— 文案 —— */
.av-ta {
width: 100%; box-sizing: border-box; border: 1.5px solid #f0e7e2; border-radius: 14px;
padding: 12px 13px; font-size: 13.5px; line-height: 1.7; color: #38313f; resize: vertical;
min-height: 132px; background: #fffdfb; font-family: inherit;
}
.av-ta:focus { outline: none; border-color: #ffb98a; background: #fff; }
.av-metarow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.av-est { font-size: 11.5px; color: #9b8fd0; }
.av-acts-inline { display: flex; gap: 6px; }
.av-mini {
border: 1.5px solid #f0e7e2; background: #fff; color: #8a7d78;
font-size: 11.5px; padding: 6px 11px; border-radius: 9px; cursor: pointer;
-webkit-tap-highlight-color: transparent; font-family: inherit;
}
.av-mini.solid {
border: 0; background: linear-gradient(135deg, #ffa76a, #ff8a4c); color: #fff;
font-weight: 600; box-shadow: 0 3px 10px rgba(255,138,76,.25);
}
.av-mini.wide { width: 100%; margin-top: 10px; padding: 12px; font-size: 13.5px; border-radius: 12px; }
.av-mini:disabled { opacity: .55; box-shadow: none; }
.av-note { font-size: 11.5px; color: #8a8098; line-height: 1.65; margin: 9px 2px 0; }
.av-note.dim { color: #b0a5a0; }
.av-note.good { color: #3f9a6a; }
/* —— 音色分组 —— */
.av-groups { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
.av-gchip {
flex: 0 0 auto; border: 1.5px solid #f0e7e2; background: #fff; color: #8a7d78;
font-size: 12px; padding: 6px 12px; border-radius: 99px; cursor: pointer;
-webkit-tap-highlight-color: transparent; font-family: inherit;
}
.av-gchip.on { border-color: #ff9a5a; background: #fff3ec; color: #d9631f; font-weight: 700; }
.av-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.av-voice {
position: relative; border: 1.5px solid #f0e7e2; border-radius: 13px; background: #fff;
padding: 10px 26px 10px 11px; cursor: pointer; text-align: left;
display: flex; flex-direction: column; gap: 2px;
-webkit-tap-highlight-color: transparent; transition: border-color .16s, background .16s;
}
.av-voice-n { font-size: 13px; font-weight: 600; color: #4a4248; }
.av-voice-d { font-size: 10.5px; color: #b0a5a0; }
.av-voice-p {
position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
font-size: 10px; color: #d8cec8;
}
.av-voice.on { border-color: #ff9a5a; background: #fff8f3; }
.av-voice.on .av-voice-n { color: #d9631f; }
.av-voice.on .av-voice-p { color: #ff9a5a; }
.av-voice.design { border-style: dashed; }
.av-voice.design.on { border-style: solid; }
.av-dwrap { grid-column: 1 / -1; margin-top: 4px; }
.av-dtitle { font-size: 11.5px; font-weight: 700; color: #8a80a0; margin: 4px 2px 7px; }
.av-dlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* —— 试听条 —— */
.av-previewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.av-switch {
display: flex; align-items: center; gap: 7px; border: 0; background: transparent;
font-size: 12px; color: #8a7d78; cursor: pointer; padding: 4px 0; font-family: inherit;
}
.av-switch i {
display: block; width: 32px; height: 18px; border-radius: 99px; background: #e6ddd8;
position: relative; transition: background .2s;
}
.av-switch i::after {
content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: left .2s;
}
.av-switch.on { color: #d9631f; }
.av-switch.on i { background: linear-gradient(135deg,#ffa76a,#ff8a4c); }
.av-switch.on i::after { left: 16px; }
.av-preview {
margin-top: 10px; padding: 11px 12px; border-radius: 14px;
background: linear-gradient(180deg,#fff8f4,#fdf4fa); border: 1px solid #f7e8e0;
}
.av-preview-tx { font-size: 12px; color: #6a5f5a; margin-bottom: 8px; }
.av-preview audio { width: 100%; height: 34px; }
/* —— 参数 —— */
.av-sub { font-size: 12px; font-weight: 700; color: #6f6880; margin: 14px 2px 8px; }
.av-sub-row .av-sub { margin-top: 14px; }
.av-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.av-chip {
border: 1.5px solid #f0e7e2; background: #fff; color: #8a7d78; font-size: 12px;
padding: 7px 12px; border-radius: 99px; cursor: pointer;
-webkit-tap-highlight-color: transparent; font-family: inherit;
}
.av-chip.on { border-color: #ff9a5a; background: #fff3ec; color: #d9631f; font-weight: 700; }
.av-input {
width: 100%; box-sizing: border-box; border: 1.5px solid #f0e7e2; border-radius: 12px;
padding: 11px 13px; font-size: 13px; color: #38313f; background: #fffdfb; font-family: inherit;
}
.av-input:focus { outline: none; border-color: #ffb98a; background: #fff; }
.av-input::placeholder { color: #c4b8b2; }
/* —— 定制音色列表 —— */
.av-ditems { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.av-ditem { border: 1px solid #f2ece8; border-radius: 12px; padding: 9px 11px; background: #fffcf9; }
.av-ditem-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.av-ditem-hd b { font-size: 12.5px; color: #4a4248; }
.av-ditem-s { font-size: 11px; color: #b0a5a0; margin-top: 3px; line-height: 1.5; }
.av-del { border: 0; background: transparent; color: #c9b6ae; font-size: 11.5px; cursor: pointer; padding: 2px 4px; font-family: inherit; }
.av-del:active { color: #e06a5a; }
/* —— 进度 —— */
.av-progress { margin: 14px 2px 0; }
.av-progress-bar { height: 7px; border-radius: 99px; background: #f2eae5; overflow: hidden; }
.av-progress-bar i {
display: block; height: 100%; width: 38%; border-radius: 99px;
background: linear-gradient(90deg, #ffb98a, #ff8a4c, #ffb98a);
background-size: 200% 100%; animation: avSlide 1.2s linear infinite;
}
@keyframes avSlide { 0% { background-position: 0 0; margin-left: -38%; } 100% { background-position: -200% 0; margin-left: 100%; } }
.av-progress-tx { font-size: 12px; color: #8a8098; margin-top: 9px; text-align: center; }
/* —— 结果 —— */
.av-reslist { display: flex; flex-direction: column; gap: 14px; }
.av-res { border: 1px solid #f3ece8; border-radius: 15px; padding: 12px; background: #fffdfb; }
.av-res-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.av-res-t { font-size: 12.5px; font-weight: 600; color: #4a4248; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-res-x { font-size: 11px; color: #b0a5a0; flex: 0 0 auto; }
.av-audio { width: 100%; height: 36px; }
.av-res-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.av-tag {
font-size: 10.5px; color: #a08878; background: #faf3ee;
border-radius: 6px; padding: 3px 7px;
}
.av-res .hs-acts { margin-top: 9px; }
@media (max-width: 520px) {
.av-voices { grid-template-columns: 1fr 1fr; }
.av-voice-n { font-size: 12.5px; }
.av-banner { padding: 13px 14px; }
.av-banner-ico { font-size: 26px; }
}
/* =====================================================================
短视频下载（.dl-*） — 2026-09-15
一条链接 → 去水印原片 / 封面 / 标题文案（+ AI 素材包）
与「爆款视频复刻」分工：那边拿片子当参考重出新品；这边把片子本身交给你。
===================================================================== */
/* 🔴 `hidden` 会被 display:grid/flex 盖掉（作者样式优先于 UA 的 [hidden]）→
本页 .dl-platrow / .dl-meta / .dl-acts / .dl-bar 都是 flex/grid，
必须整页显式兜底，否则「一进页面就展开、点开/收起没反应」。 */
#sub-videodl [hidden] { display: none !important; }
/* 🔴 顶部有一条 position:sticky 的 header（实测高 54px，z-index 50）。
`scrollIntoView({block:'start'})` 会把这几个块滚到**头部后面** ——
实测「下载完成自动滚到结果」时，「✅ 已去水印」徽标和视频顶部整条被头部盖住。
给所有会被程序滚到的块留出这段偏移，才是真的"看到结果"。 */
#sub-videodl #dlProg,
#sub-videodl #dlResult,
#sub-videodl #dlError,
#sub-videodl .dl-kit,
#sub-videodl #dlHistWrap { scroll-margin-top: 62px; }
/* 主题变量：深青墨 + 电光青做主色，比复刻页更「冷」一点，避免两页看成一个 */
#sub-videodl {
--dl-ink: #0a1622;
--dl-ink-2: #102b3b;
--dl-ink-3: #12414f;
--dl-acc: #2ed3d3;
--dl-acc-dk: #1f7d89;
--dl-line: #e9e2da;
--dl-tx: #2a2320;
--dl-tx-2: #6b5f55;
--dl-tx-3: #a2968a;
--dl-bg: #fbf9f6;
}
/* ==================== Hero ==================== */
.dl-hero {
position: relative; overflow: hidden; border-radius: 22px;
background:
radial-gradient(120% 90% at 88% -10%, rgba(46, 211, 211, .22) 0%, rgba(46, 211, 211, 0) 55%),
radial-gradient(90% 80% at -5% 110%, rgba(255, 138, 76, .17) 0%, rgba(255, 138, 76, 0) 60%),
linear-gradient(140deg, var(--dl-ink) 0%, var(--dl-ink-2) 52%, var(--dl-ink-3) 100%);
padding: 0 0 22px; color: #eaf6f9;
box-shadow: 0 18px 40px -14px rgba(10, 22, 34, .5), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.dl-hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(80% 60% at 70% 0%, #000 0%, transparent 75%);
mask-image: radial-gradient(80% 60% at 70% 0%, #000 0%, transparent 75%);
}
.dl-hero-glow {
position: absolute; right: -84px; top: -96px; width: 264px; height: 264px; pointer-events: none;
background: radial-gradient(circle, rgba(46, 211, 211, .34) 0%, rgba(46, 211, 211, 0) 66%);
animation: dlBreathe 6.5s ease-in-out infinite;
}
@keyframes dlBreathe {
0%, 100% { opacity: .72; transform: scale(1); }
50% { opacity: 1; transform: scale(1.09); }
}
.dl-topbar { position: relative; padding: 14px 16px 0; }
.dl-hero-main { position: relative; padding: 4px 20px 0; }
.dl-h1 {
margin: 10px 0 8px; font-size: 25px; line-height: 1.26; font-weight: 800;
letter-spacing: .01em; color: #fff;
background: linear-gradient(96deg, #ffffff 0%, #c8f4f6 58%, #8fe6ee 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.dl-sub {
margin: 0; font-size: 12.5px; line-height: 1.75; color: rgba(234, 246, 249, .74);
}
.dl-sub b { color: #9cf2f2; font-weight: 700; }
/* ==================== 平台 chips ==================== */
.dl-platrow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.dl-plat {
position: relative; display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
color: rgba(234, 246, 249, .74);
background: rgba(255, 255, 255, .055);
border: 1px solid rgba(255, 255, 255, .12);
padding: 5px 10px 5px 8px; border-radius: 999px;
transition: all .18s;
}
.dl-plat i { font-style: normal; font-size: 12px; line-height: 1; }
.dl-plat u {
text-decoration: none; font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
color: rgba(234, 246, 249, .5);
background: rgba(255, 255, 255, .07); border-radius: 5px; padding: 1px 5px;
}
/* 命中：用后端给的平台主色点亮（--pc 由 JS 注入） */
.dl-plat.on {
color: #fff; border-color: var(--pc, #2ed3d3);
background: rgba(255, 255, 255, .17);
box-shadow: 0 0 0 3px rgba(46, 211, 211, .16), 0 6px 16px -8px rgba(0, 0, 0, .45);
transform: translateY(-1px);
}
/* color-mix 是渐进增强：支持的浏览器用真实平台色混合，不支持的用上面的兜底 */
@supports (background: color-mix(in srgb, red 50%, blue)) {
.dl-plat.on {
background: color-mix(in srgb, var(--pc, #2ed3d3) 20%, rgba(255, 255, 255, .06));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #2ed3d3) 16%, transparent),
0 6px 16px -8px color-mix(in srgb, var(--pc, #2ed3d3) 70%, transparent);
}
}
.dl-plat.on u { color: #fff; background: rgba(255, 255, 255, .2); }
.dl-plat.off { opacity: .38; }
/* ==================== 输入区 ==================== */
.dl-inbox {
margin-top: 16px; border-radius: 16px; padding: 2px;
background: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08));
box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6);
}
.dl-ta {
display: block; width: 100%; box-sizing: border-box; min-height: 82px; resize: vertical;
font-family: inherit; font-size: 13px; line-height: 1.72; color: #10202b;
background: #fbfdff; border: none; border-radius: 14px 14px 4px 4px;
padding: 12px 13px; outline: none; transition: background .18s;
}
.dl-ta::placeholder { color: #a8b6bf; }
.dl-ta:focus { background: #fff; }
.dl-inbox-bar {
display: flex; align-items: center; gap: 8px;
border-radius: 4px 4px 14px 14px; padding: 7px 9px;
background: rgba(6, 18, 26, .5);
}
.dl-ghost-btn {
flex: 0 0 auto; cursor: pointer; font-family: inherit;
font-size: 11.5px; font-weight: 600; color: rgba(234, 246, 249, .82);
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 9px; padding: 5px 11px; transition: all .16s;
}
.dl-ghost-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.dl-ghost-btn:active { transform: scale(.96); }
.dl-detect { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 11px; font-weight: 600; }
.dl-detect.ok { color: #7bf0d5; }
.dl-detect.warn { color: #ffcf6b; }
.dl-detect.bad { color: #ff9b8a; }
/* ==================== 主按钮 ==================== */
.dl-main-btn {
position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
gap: 9px; width: 100%; margin-top: 13px; cursor: pointer;
font-family: inherit; color: #04222a;
background: linear-gradient(120deg, #7ef0e4 0%, #2ed3d3 42%, #35b6d8 100%);
border: none; border-radius: 15px; padding: 14px 18px;
box-shadow: 0 12px 26px -12px rgba(46, 211, 211, .75);
transition: transform .16s, box-shadow .16s, filter .16s;
}
.dl-main-btn::after {
content: ''; position: absolute; top: 0; left: -70%; width: 46%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
transform: skewX(-18deg); animation: dlSheen 3.6s ease-in-out infinite;
}
@keyframes dlSheen {
0%, 62% { left: -70%; }
100% { left: 128%; }
}
.dl-main-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(46, 211, 211, .85); }
.dl-main-btn:active { transform: translateY(1px) scale(.995); }
.dl-main-btn:disabled {
cursor: not-allowed; filter: grayscale(.72) brightness(.86);
box-shadow: none; transform: none;
}
.dl-main-btn:disabled::after { animation: none; }
.dl-main-t { position: relative; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.dl-main-c {
position: relative; font-size: 11px; font-weight: 700;
background: rgba(4, 34, 42, .16); border-radius: 999px; padding: 2px 9px;
}
.dl-hint { margin: 10px 0 0; font-size: 11px; line-height: 1.7; text-align: center; color: rgba(234, 246, 249, .5); }
.dl-hint b { color: #9cf2f2; font-weight: 700; }
/* ==================== 进度（真实百分比） ==================== */
.dl-prog {
margin-top: 15px; border-radius: 16px; padding: 15px 15px 14px;
background: #fff; border: 1px solid var(--dl-line);
box-shadow: 0 2px 12px rgba(60, 48, 38, .045);
}
.dl-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dl-prog-top > span:first-child { font-size: 13px; font-weight: 700; color: var(--dl-tx); }
.dl-prog-pct {
font-size: 19px; font-weight: 800; letter-spacing: -.01em;
color: var(--dl-acc-dk); font-variant-numeric: tabular-nums;
}
.dl-bar {
height: 8px; margin: 11px 0 10px; border-radius: 99px; overflow: hidden;
background: #eef3f4;
}
.dl-bar > i {
display: block; height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, #35b6d8, #2ed3d3, #7ef0e4, #2ed3d3);
background-size: 220% 100%; animation: dlFlow 1.7s linear infinite;
transition: width .7s cubic-bezier(.28, .82, .4, 1);
}
@keyframes dlFlow { from { background-position: 0 0; } to { background-position: -220% 0; } }
.dl-prog-note { font-size: 11.5px; line-height: 1.65; color: var(--dl-tx-3); }
/* ==================== 播放器 ==================== */
#dlResult { margin-top: 15px; }
.dl-player-wrap {
position: relative; border-radius: 18px; overflow: hidden;
background: #0b1218; box-shadow: 0 14px 30px -14px rgba(11, 18, 24, .55);
}
.dl-video {
display: block; width: 100%; max-height: 66vh; object-fit: contain; background: #0b1218;
}
.dl-player-badge {
position: absolute; left: 10px; top: 10px;
font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #06302a;
background: linear-gradient(120deg, #a8f5d6, #5fe0b8);
border-radius: 999px; padding: 4px 10px;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
}
/* ==================== 标题卡 ==================== */
.dl-titlecard {
margin-top: 12px; border-radius: 16px; padding: 14px 15px 13px;
background: linear-gradient(160deg, #fbfefd 0%, #f6fbfb 100%);
border: 1px solid #e2eef0;
}
.dl-title-hd {
display: flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; color: #1d5f68; margin-bottom: 8px;
}
.dl-author {
margin-left: auto; font-size: 11px; font-weight: 600; color: var(--dl-tx-3);
max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dl-title-main { display: flex; align-items: flex-start; gap: 11px; }
.dl-cover {
flex: 0 0 auto; width: 62px; height: 62px; object-fit: cover;
border-radius: 11px; background: #eef4f5;
border: 1px solid #e2eef0;
}
.dl-title-body {
flex: 1 1 auto; min-width: 0;
font-size: 13.5px; line-height: 1.78; font-weight: 600; color: var(--dl-tx);
word-break: break-word;
}
.dl-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px;
}
.dl-meta > span {
font-size: 10.5px; font-weight: 600; color: #5d7d82;
background: #eef7f8; border: 1px solid #dceef0;
border-radius: 7px; padding: 3px 8px;
}
.dl-meta > span > i { font-style: normal; }
.dl-meta > span:empty { display: none; }
.dl-tags {
display: flex; align-items: flex-start; gap: 7px; margin-top: 11px;
border-top: 1px dashed #dfeaec; padding-top: 10px;
}
.dl-tags-lb {
flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #1d7d8a;
background: #e4f6f8; border-radius: 6px; padding: 2px 7px;
}
#dlTagsText { font-size: 11.5px; line-height: 1.8; color: #4d7a80; word-break: break-word; }
/* ==================== 动作按钮 ==================== */
.dl-acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 13px; }
.dl-act {
display: flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; font-family: inherit;
font-size: 12.5px; font-weight: 700; color: var(--dl-tx-2);
background: #fff; border: 1px solid var(--dl-line);
border-radius: 13px; padding: 12px 8px; transition: all .16s;
}
.dl-act i { font-style: normal; font-size: 14px; line-height: 1; }
.dl-act:hover { border-color: #b9d9dd; background: #fbfeff; color: #1d5f68; }
.dl-act:active { transform: scale(.98); }
.dl-act-main {
grid-column: 1 / -1; color: #fff; border-color: transparent;
background: linear-gradient(135deg, #1f7d89, #0f2f3b);
box-shadow: 0 10px 22px -12px rgba(31, 125, 137, .8);
}
.dl-act-main:hover { color: #fff; background: linear-gradient(135deg, #24909d, #123846); border-color: transparent; }
.dl-tip { margin: 9px 0 0; font-size: 11px; line-height: 1.66; color: var(--dl-tx-3); text-align: center; }
.dl-tip b { color: var(--dl-tx-2); }
/* ==================== AI 素材包 ==================== */
.dl-kit {
margin-top: 16px; border-radius: 17px; padding: 14px 14px 15px;
background: linear-gradient(150deg, #fdfaff 0%, #f8f6ff 48%, #f6fbff 100%);
border: 1px solid #eae4f6;
}
.dl-kit-top { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; }
.dl-kit-top b {
font-size: 13.5px; font-weight: 800; color: #3b2f57; letter-spacing: .01em;
}
.dl-kit-top em { font-style: normal; font-size: 11px; line-height: 1.6; color: #9a90ac; }
.dl-kit-btn {
position: relative; overflow: hidden; width: 100%; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; color: #fff;
background: linear-gradient(120deg, #7c6cf0 0%, #a06ce8 52%, #6f8ff5 100%);
border: none; border-radius: 13px; padding: 13px 14px;
box-shadow: 0 10px 24px -12px rgba(124, 108, 240, .8);
transition: transform .16s, box-shadow .16s, filter .16s;
}
.dl-kit-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(124, 108, 240, .9); }
.dl-kit-btn:active { transform: translateY(1px) scale(.995); }
.dl-kit-btn:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.88); box-shadow: none; transform: none; }
.dl-kit-box { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.dl-kit-card { background: #fff; border: 1px solid #ece6f5; border-radius: 13px; padding: 11px 12px; }
.dl-kit-hd {
display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px;
}
.dl-kit-hd > span {
font-size: 11.5px; font-weight: 700; color: #5b4a86;
background: #f1ecfd; border-radius: 6px; padding: 2px 8px;
}
.dl-kit-body { font-size: 12.5px; line-height: 1.8; color: #3d3651; word-break: break-word; }
.dl-kit-body.pre { white-space: pre-wrap; }
.dl-kit-body .dl-tag {
display: inline-block; margin: 0 5px 5px 0; font-size: 11.5px; font-weight: 600;
color: #6a4bc4; background: #f2ecfe; border-radius: 999px; padding: 3px 10px;
}
.dl-kit-note {
font-size: 11px; line-height: 1.7; color: #7c6b5a;
background: #fdf6ec; border: 1px solid #f5e6d2;
border-left: 3px solid #e9b168;
border-radius: 10px; padding: 8px 11px;
}
.dl-kit-note.ok { color: #1f7a5a; background: #eefaf3; border-color: #d4f0e0; border-left-color: #3fbb84; }
.dl-kit-warn {
font-size: 11.5px; line-height: 1.72; color: #a5482f;
background: #fdf0ec; border: 1px solid #f7d9d0; border-left: 3px solid #e06a4a;
border-radius: 10px; padding: 9px 11px;
}
.dl-kit-err {
font-size: 12px; line-height: 1.72; color: #a5482f;
background: #fdf0ec; border: 1px solid #f7d9d0; border-radius: 11px; padding: 10px 12px;
}
.dl-kit-loading {
display: flex; align-items: center; gap: 8px;
font-size: 12px; line-height: 1.7; color: #6a5f8c;
background: #f7f4fe; border: 1px solid #eae2fb; border-radius: 11px; padding: 10px 12px;
}
.dl-kit-foot { margin-top: 2px; font-size: 10.5px; color: #b0a6c2; text-align: center; }
.dl-mini {
flex: 0 0 auto; cursor: pointer; font-family: inherit;
font-size: 10.5px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #8b7cf6, #6a58d6);
border: none; border-radius: 8px; padding: 5px 10px; transition: all .16s;
}
.dl-mini:hover { filter: brightness(1.08); }
.dl-mini:active { transform: scale(.95); }
/* 转圈（用 CSS 画，不依赖外部图标字体） */
.dl-spin {
flex: 0 0 auto; display: inline-block; width: 13px; height: 13px;
border: 2px solid #ded4f8; border-top-color: #8b7cf6; border-radius: 50%;
animation: dlSpin .8s linear infinite;
}
@keyframes dlSpin { to { transform: rotate(360deg); } }
/* ==================== 最近下载 ==================== */
.dl-hist-wrap { margin-top: 18px; }
.dl-hist-hd {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 12.5px; font-weight: 700; color: var(--dl-tx-2); margin-bottom: 10px;
}
.dl-hist { display: flex; flex-direction: column; gap: 9px; }
.dl-hist-item {
display: flex; align-items: center; gap: 11px; cursor: pointer;
background: #fff; border: 1px solid var(--dl-line); border-radius: 14px;
padding: 8px; transition: all .16s;
}
.dl-hist-item:hover { border-color: #bcd9dc; box-shadow: 0 6px 16px -10px rgba(60, 48, 38, .4); transform: translateY(-1px); }
.dl-hist-item > img {
flex: 0 0 auto; width: 58px; height: 58px; object-fit: cover;
border-radius: 10px; background: #0c1116;
}
.dl-hist-noimg {
flex: 0 0 auto; width: 58px; height: 58px; line-height: 58px; text-align: center;
font-size: 22px; border-radius: 10px; background: #f1f5f6;
}
.dl-hist-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dl-hist-txt b {
font-size: 12.5px; font-weight: 600; color: var(--dl-tx);
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dl-hist-txt em { font-style: normal; font-size: 10.5px; color: var(--dl-tx-3); }
.dl-hist-go {
flex: 0 0 auto; font-style: normal; font-size: 20px; font-weight: 700;
color: #c3d0d3; padding-right: 4px;
}
.dl-hist-item:hover .dl-hist-go { color: var(--dl-acc-dk); }
/* ==================== Toast ==================== */
.dl-toast {
position: fixed; left: 50%; bottom: 92px; z-index: 9000;
max-width: 78vw; transform: translate(-50%, 8px);
font-size: 13px; font-weight: 600; line-height: 1.55; color: #fff; text-align: center;
background: rgba(12, 30, 40, .94); border-radius: 12px; padding: 10px 16px;
box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6);
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.dl-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ==================== 窄屏 ==================== */
@media (max-width: 380px) {
.dl-h1 { font-size: 22px; }
.dl-hero-main { padding-left: 16px; padding-right: 16px; }
.dl-acts { grid-template-columns: 1fr; }
.dl-act-main { grid-column: auto; }
.dl-hist-item > img, .dl-hist-noimg { width: 50px; height: 50px; line-height: 50px; }
}
/* ============================================================
智能字幕（sub-subtitle）· 视频板块
设计：深靛蓝电影感（与图片板块的紫/青、追爆款的火焰橙区分开）
布局：预览固定在上、条目列表可长、操作条吸附在列表下方
⚠️ 用了 hidden 又设了 display:flex/grid 的，必须补 [hidden] 规则
（作者样式优先于 UA 的 [hidden]，踩过 7 批）
============================================================ */
.sb-hero {
position:relative; overflow:hidden; margin-bottom:14px; padding:22px 20px 18px;
border-radius:var(--radius);
background:
radial-gradient(115% 90% at 88% -12%, rgba(34,211,238,.42) 0%, rgba(56,60,220,.22) 44%, rgba(0,0,0,0) 72%),
linear-gradient(158deg, #1b1440 0%, #150f30 52%, #0c0a1c 100%);
box-shadow:0 14px 30px rgba(20,14,60,.34);
color:#fff;
}
.sb-hero-tag {
position:relative; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px;
padding:4px 10px; border-radius:999px; color:#a8f0fb;
background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
}
.sb-hero-t { position:relative; margin-top:10px; font-size:24px; font-weight:800; letter-spacing:.5px; line-height:1.3;
background:linear-gradient(92deg,#fff 0%,#7fe6f7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-hero-s { position:relative; margin-top:8px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.72); }
.sb-steps { position:relative; display:flex; gap:6px; margin-top:16px; }
.sb-step { flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
font-size:11.5px; font-weight:600; padding:7px 4px; border-radius:10px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.68); }
.sb-step i { font-style:normal; width:16px; height:16px; border-radius:50%; font-size:10px; line-height:16px;
text-align:center; background:rgba(255,255,255,.16); color:#fff; flex:none; }
.sb-step.on { background:linear-gradient(135deg,#22d3ee 0%,#2f6bff 100%); border-color:transparent; color:#06121c; }
.sb-step.on i { background:rgba(0,0,0,.18); color:#06121c; }
.sb-step.done { background:rgba(34,211,238,.16); border-color:rgba(34,211,238,.34); color:#a8f0fb; }
.card-title.sb-ct { display:flex; align-items:center; gap:8px; }
.sb-badge { font-size:11.5px; font-weight:700; color:#0a6b7d; background:#e2f8fd; border-radius:999px; padding:4px 10px; }
.sb-hint { font-size:11.5px; font-weight:400; color:var(--text2); margin-left:auto; }
/* ---- 上传 ---- */
.sb-drop { border:1.5px dashed #b9c7e8; border-radius:16px; background:#f7f9ff; padding:26px 14px; text-align:center; cursor:pointer; transition:background .15s,border-color .15s; }
.sb-drop:active, .sb-drop.drag { background:#eef4ff; border-color:#2f6bff; }
.sb-drop-ico { font-size:30px; line-height:1; }
.sb-drop-t { font-size:15px; font-weight:700; color:var(--text); margin-top:8px; }
.sb-drop-s { font-size:12px; color:var(--text2); margin-top:6px; line-height:1.6; }
.sb-fbox { display:flex; align-items:center; gap:10px; border:1.5px solid #dbe6ff; background:#fff; border-radius:14px; padding:11px 12px; }
.sb-fico { flex:none; width:38px; height:38px; border-radius:10px; background:#eef4ff; color:#2f6bff; font-size:19px; line-height:38px; text-align:center; }
.sb-fmain { flex:1; min-width:0; }
.sb-fname { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-fmeta { font-size:11.5px; color:var(--text2); margin-top:2px; }
.sb-fx { flex:none; border:0; background:#f1f3f9; color:var(--text2); width:26px; height:26px; border-radius:50%; font-size:14px; cursor:pointer; }
.sb-opt { display:flex; align-items:flex-start; gap:9px; margin-top:12px; font-size:12.5px; color:var(--text); line-height:1.5; cursor:pointer; }
.sb-opt input { flex:none; margin-top:2px; width:16px; height:16px; accent-color:#2f6bff; }
.sb-opt em { display:block; font-style:normal; font-size:11.5px; color:var(--text2); margin-top:2px; }
.sb-run { width:100%; margin-top:14px; border:0; border-radius:14px; cursor:pointer;
background:linear-gradient(135deg,#22d3ee 0%,#2f6bff 100%); color:#fff;
font-family:inherit; font-size:15px; font-weight:700; padding:14px 6px;
display:flex; align-items:center; justify-content:center; gap:8px; }
.sb-run i { font-style:normal; font-size:11.5px; font-weight:600; background:rgba(255,255,255,.22); border-radius:999px; padding:3px 9px; }
.sb-run:disabled { background:#dfe4f0; color:#9aa3b8; cursor:not-allowed; }
.sb-run:disabled i { background:rgba(0,0,0,.06); color:#9aa3b8; }
.sb-run:active:not(:disabled) { opacity:.88; }
/* ---- 进度 ---- */
.sb-phead { display:flex; align-items:baseline; gap:10px; }
.sb-phead b { font-size:14.5px; color:var(--text); }
.sb-phead span { margin-left:auto; font-size:13px; font-weight:700; color:#2f6bff; font-variant-numeric:tabular-nums; }
.sb-pbar { height:7px; border-radius:999px; background:#e8ecf7; overflow:hidden; margin-top:11px; }
.sb-pbar i { display:block; height:100%; width:0%; border-radius:999px;
background:linear-gradient(90deg,#22d3ee 0%,#2f6bff 100%);
background-size:200% 100%; animation:sbFlow 1.4s linear infinite; transition:width .35s ease; }
@keyframes sbFlow { from { background-position:0% 0; } to { background-position:200% 0; } }
.sb-plist { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.sb-pi { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text2); }
.sb-pi s { width:15px; height:15px; border-radius:50%; background:#e8ecf7; flex:none; text-decoration:none; position:relative; }
.sb-pi.on { color:var(--text); font-weight:600; }
.sb-pi.on s { background:#2f6bff; }
.sb-pi.on s::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:7px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg); }
.sb-pi.done s { background:#18b26b; }
.sb-pi.done s::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:7px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg); }
/* ---- 预览舞台 ---- */
.sb-stage { position:relative; border-radius:14px; overflow:hidden; background:#0b0d16; line-height:0; }
.sb-stage video { width:100%; display:block; max-height:56vh; background:#0b0d16; }
.sb-ov { position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; }
.sb-line {
position:absolute; left:4%; right:4%; text-align:center;
font-weight:800; line-height:1.28; letter-spacing:.5px;
white-space:pre-line; word-break:break-word;
transition:top .12s ease;
cursor:grab; pointer-events:auto; touch-action:none;
}
.sb-line.dragging { cursor:grabbing; transition:none; } /* 拖动时去掉过渡，否则手感发飘 */
.sb-line u { text-decoration:none; }
.sb-safe { position:absolute; inset:5% 6%; border:1px dashed rgba(255,255,255,.5); border-radius:8px; }
.sb-safe span { position:absolute; left:6px; top:4px; font-size:10px; color:rgba(255,255,255,.72); }
.sb-vbar { display:flex; align-items:center; gap:8px; margin-top:10px; }
.sb-vb { border:1.5px solid #dbe6ff; background:#fff; color:#2f6bff; font-family:inherit; font-size:12.5px; font-weight:600; border-radius:10px; padding:8px 12px; cursor:pointer; }
.sb-vb.on { background:#2f6bff; border-color:#2f6bff; color:#fff; }
.sb-vt { margin-left:auto; font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; }
.sb-qual { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sb-q { font-size:11.5px; font-weight:600; border-radius:999px; padding:5px 10px; background:#f1f4fb; color:var(--text2); }
.sb-q b { font-weight:800; }
.sb-q.g { background:#e8f8ef; color:#10844b; }
.sb-q.y { background:#fff6e5; color:#9a6100; }
.sb-q.r { background:#fdecec; color:#c0392b; }
.sb-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.sb-a { border:1.5px solid #dbe6ff; background:#fff; color:var(--text); font-family:inherit; font-size:13px; font-weight:600; border-radius:12px; padding:11px 6px; cursor:pointer; }
.sb-a:active { opacity:.85; }
.sb-a.full { grid-column:1 / -1; border-color:#ffd9a8; background:#fffaf3; }
.sb-a.full:disabled { color:#9aa3b8; background:#f4f6fb; border-color:#e6ebf7; }
/* ---- 条目列表 ---- */
.sb-list { display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; }
.sb-item { display:flex; align-items:flex-start; gap:9px; border:1.5px solid #eef1f8; background:#fff; border-radius:11px; padding:9px 10px; cursor:pointer; }
.sb-item.on { border-color:#2f6bff; background:#f6f9ff; }
.sb-item.warn { border-color:#ffd9a8; background:#fffcf5; }
.sb-item.bad { border-color:#f7c9c4; background:#fff9f8; }
.sb-item .sb-t { flex:none; font-size:11px; color:var(--text2); font-variant-numeric:tabular-nums; line-height:1.5; padding-top:1px; width:74px; }
.sb-item .sb-t b { color:#2f6bff; font-weight:700; }
.sb-item .sb-body { flex:1; min-width:0; }
.sb-item .sb-txt { font-size:13.5px; line-height:1.55; color:var(--text); word-break:break-word; }
.sb-item .sb-txt:focus { outline:none; background:#fffbe6; border-radius:6px; box-shadow:0 0 0 2px #ffe08a inset; }
.sb-item .sb-cps { font-size:10.5px; color:var(--text2); margin-top:3px; }
.sb-item .sb-cps em { font-style:normal; font-weight:700; }
.sb-item .sb-cps em.r { color:#c0392b; }
.sb-item .sb-cps em.y { color:#9a6100; }
.sb-item .sb-cps em.g { color:#10844b; }
.sb-n { font-size:11px; color:#b6bdcd; margin-right:2px; }
.sb-editbar { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:11px; }
.sb-e { border:1.5px solid #e6ebf7; background:#fbfcff; color:var(--text); font-family:inherit; font-size:12px; font-weight:600; border-radius:10px; padding:9px 4px; cursor:pointer; }
.sb-e:active { opacity:.85; }
.sb-e.danger { border-color:#f6d6d2; background:#fffafa; color:#c0392b; }
.sb-editbar.off { opacity:.42; pointer-events:none; }
/* ---- 样式预设 ---- */
.sb-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sb-pre { border:1.5px solid #eef1f8; background:#fff; border-radius:12px; padding:9px; cursor:pointer; font-family:inherit; text-align:left; }
.sb-pre.on { border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.1); }
.sb-pre-demo { height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; overflow:hidden;
/* ⚠️ 缩略图必须压深底：字幕多为白字/黄字，棋盘格或浅底会让它完全看不清 */
background:linear-gradient(135deg,#2f3450 0%,#191c2e 60%,#10121f 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
margin-bottom:7px; }
.sb-pre-demo span { font-weight:800; font-size:13.5px; line-height:1.1; white-space:nowrap; }
.sb-pre-n { font-size:12px; font-weight:700; color:var(--text); }
.sb-pre-s { font-size:10.5px; color:var(--text2); margin-top:2px; }
.sb-adv-toggle { width:100%; margin-top:12px; border:1.5px solid #e6ebf7; background:#fbfcff; color:var(--text2); font-family:inherit; font-size:12.5px; font-weight:600; border-radius:11px; padding:10px; cursor:pointer; }
.sb-adv { margin-top:12px; display:flex; flex-direction:column; gap:13px; }
.sb-f { display:flex; flex-direction:column; gap:6px; }
.sb-f > span { font-size:12px; font-weight:600; color:var(--text2); }
.sb-f > span i { font-style:normal; font-weight:400; font-size:11px; color:#a8b0c2; margin-left:6px; }
.sb-seg { display:flex; gap:5px; }
.sb-seg button { flex:1; border:1.5px solid #e6ebf7; background:#fff; color:var(--text2); font-family:inherit; font-size:12px; font-weight:600; border-radius:9px; padding:8px 0; cursor:pointer; }
.sb-seg button.on { border-color:#2f6bff; background:#eef4ff; color:#2f6bff; }
.sb-f2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sb-color { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text2); }
.sb-color input { width:40px; height:30px; padding:0; border:1.5px solid #e6ebf7; border-radius:8px; background:#fff; cursor:pointer; }
/* ---- 导出 ---- */
.sb-dlrow { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.sb-dl { display:flex; flex-direction:column; align-items:center; gap:3px; border:1.5px solid #dbe6ff; background:#fff; color:var(--text); font-family:inherit; font-size:13px; font-weight:700; border-radius:13px; padding:12px 4px; cursor:pointer; }
.sb-dl i { font-style:normal; font-size:10.5px; font-weight:500; color:var(--text2); }
.sb-dl:active { opacity:.85; }
.sb-burn { width:100%; margin-top:6px; border:0; border-radius:14px; cursor:pointer;
background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:#fff;
font-family:inherit; font-size:15px; font-weight:700; padding:15px 6px;
display:flex; align-items:center; justify-content:center; gap:8px; }
.sb-burn i { font-style:normal; font-size:11.5px; font-weight:600; background:rgba(255,255,255,.18); border-radius:999px; padding:3px 9px; }
.sb-burn:disabled { background:#dfe4f0; color:#9aa3b8; cursor:not-allowed; }
.sb-burn:disabled i { background:rgba(0,0,0,.06); color:#9aa3b8; }
.sb-burn:active:not(:disabled) { opacity:.88; }
.sb-done { margin-top:10px; }
.sb-done video { width:100%; border-radius:12px; background:#0b0d16; display:block; }
.sb-done .sb-dl2 { display:block; text-align:center; margin-top:9px; text-decoration:none;
background:linear-gradient(135deg,#18b26b 0%,#0f9d58 100%); color:#fff;
border-radius:12px; padding:13px; font-size:14px; font-weight:700; }
.sb-toast { position:fixed; left:50%; bottom:82px; transform:translate(-50%,14px); background:rgba(12,14,28,.94); color:#fff;
font-size:13px; padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:1200; max-width:80vw; text-align:center; }
.sb-toast.show { opacity:1; transform:translate(-50%,0); }
/* ---- hidden 兜底（作者样式会盖掉 UA 的 [hidden]）---- */
#sbWork[hidden], #sbProgCard[hidden], .sb-fbox[hidden], .sb-adv[hidden],
.sb-safe[hidden], .sb-editbar[hidden], .sb-line[hidden], .sb-a[hidden] { display:none !important; }
@media (max-width:380px) {
.sb-hero-t { font-size:21px; }
.sb-step { font-size:10.5px; }
.sb-acts, .sb-editbar, .sb-dlrow { grid-template-columns:1fr; }
.sb-item .sb-t { width:62px; font-size:10.5px; }
}
/* ==========================================================================
视频去水印 · 完整版（2026-09-15 升级）
AI 识别 / 框选 / 涂抹 / 椭圆 × 智能修复·边缘融合·高斯模糊·马赛克·纯色遮挡
========================================================================== */
/* [hidden] 兜底：类里含 display:flex/grid 的元素会盖掉 UA 的 [hidden] */
#sub-dewatermark [hidden] { display: none !important; }
/* —— 上传区 —— */
.dew-drop { margin-top: 4px; border: 2px dashed #f0d5c0; border-radius: 16px;
padding: 26px 16px; text-align: center; cursor: pointer; background: #fffaf6; transition: all .18s; }
.dew-drop:hover, .dew-drop.on { border-color: var(--primary); background: #fff4ec; }
.dew-drop-ico { font-size: 30px; line-height: 1; }
.dew-drop-t { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 10px; }
.dew-drop-s { font-size: 12.5px; color: var(--text2); margin-top: 5px; }
.dew-up { display: flex; align-items: center; gap: 9px; justify-content: center;
padding: 16px; font-size: 14px; color: var(--primary); font-weight: 600; }
.dew-up .spinner { border-color: rgba(249,89,1,.25); border-top-color: var(--primary); }
.dew-meta { margin-top: 10px; font-size: 12.5px; color: var(--text2); text-align: center; }
.dew-meta b { color: var(--text); }
/* —— 画布 —— */
.dew-stage { position: relative; margin-top: 4px; border-radius: 14px; overflow: hidden;
background: #14100d; line-height: 0; box-shadow: 0 4px 16px rgba(120,70,20,.16);
/* 顶栏 54px 固定在最上方 —— 滚进视口时给它留出空间，否则画面上缘（水印最爱待的地方）点不到 */
scroll-margin-top: 62px; }
.dew-stage video { display: block; width: 100%; height: auto; }
.dew-stage canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
touch-action: none; cursor: crosshair; }
.dew-tiptext { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
background: rgba(0,0,0,.62); color: #fff; font-size: 12px; padding: 5px 12px;
border-radius: 999px; line-height: 1.5; white-space: nowrap; pointer-events: none;
max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.dew-player { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.dew-play { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
background: var(--grad); color: #fff; font-size: 14px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; }
.dew-seek { flex: 1; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px;
background: #f0e0d2; outline: none; }
.dew-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px;
border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dew-time { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums;
flex: 0 0 auto; min-width: 40px; text-align: right; }
/* —— 工具面板 —— */
.dew-sub { margin-top: 13px; }
.dew-input { width: 100%; box-sizing: border-box; border: 1.5px solid #f0dfd0; border-radius: 12px;
padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--text);
background: #fffaf6; outline: none; }
.dew-input:focus { border-color: var(--primary); background: #fff; }
.dew-mini { margin-top: 9px; width: 100%; border: none; cursor: pointer; font-family: inherit;
background: #fff1e7; color: var(--primary); font-weight: 700; font-size: 14px;
padding: 12px; border-radius: 999px; transition: all .15s; }
.dew-mini:active { transform: scale(.985); }
.dew-mini:disabled { opacity: .55; cursor: not-allowed; }
.dew-mini.ghost { margin-top: 11px; background: transparent; border: 1.5px solid #f0dfd0;
color: var(--text2); font-weight: 600; }
.dew-row { display: flex; align-items: center; gap: 11px; }
.dew-lbl { font-size: 13px; color: var(--text2); flex: 0 0 auto; }
.dew-note { font-size: 12.5px; color: var(--text2); margin-top: 9px; line-height: 1.6; }
/* —— 区域列表 —— */
.dew-count { display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; }
.dew-list { display: flex; flex-direction: column; gap: 9px; }
.dew-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px;
border-radius: 13px; background: #fffaf6; border: 1px solid #f5e6d8;
cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
/* 选中态：与画布上的虚线框 + 四角手柄呼应 —— 用户一眼知道"我现在在调哪一个" */
.dew-item.on { border-color: var(--primary); background: #fff2e8;
box-shadow: 0 0 0 3px rgba(249,89,1,.13); }
.dew-idx { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
background: var(--grad); color: #fff; font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.dew-item-main { flex: 1; min-width: 0; }
.dew-item-t { font-size: 13.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dew-item-s { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.dew-sel { width: 100%; margin-top: 7px; border: 1px solid #f0dfd0; border-radius: 9px;
padding: 7px 8px; font-size: 12.5px; font-family: inherit; color: var(--text);
background: #fff; outline: none; }
.dew-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none;
cursor: pointer; background: #f7ece2; color: #b58b6a; font-size: 13px;
display: flex; align-items: center; justify-content: center; }
.dew-x:active { background: #f0dcc9; }
/* —— 执行 —— */
.dew-ghost { width: 100%; border: 1.5px solid #f5d9c2; cursor: pointer; font-family: inherit;
background: #fff; color: var(--primary); font-weight: 700; font-size: 15px;
padding: 13px; border-radius: 999px; margin-bottom: 11px; transition: all .15s; }
.dew-ghost:active { transform: scale(.985); }
.dew-ghost:disabled { opacity: .55; cursor: not-allowed; }
/* —— 进度（真实进度，不假造百分比）—— */
.dew-prog { background: #fffaf3; border: 1px solid #f2e3ce; border-radius: 15px;
padding: 14px 15px; margin-bottom: 14px; }
.dew-prog-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.dew-prog-t { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dew-prog-n { font-size: 13px; font-weight: 800; color: var(--primary);
font-variant-numeric: tabular-nums; }
.dew-barwrap { height: 6px; border-radius: 999px; background: #f0e4d3; overflow: hidden; }
.dew-bar { height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #ff8a3c, #f95901); transition: width .35s ease; }
/* —— 单帧预览 —— */
.dew-pv { position: relative; margin-bottom: 14px; border-radius: 14px; overflow: hidden;
background: #14100d; line-height: 0; box-shadow: 0 4px 16px rgba(120,70,20,.16); }
.dew-pv img { width: 100%; display: block; }
.dew-pv-t { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.62);
color: #fff; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; line-height: 1.5; }
/* =====================================================================
违禁词检测（发布前合规体检）
—— 与站内橙色主题区分的「青玉/护盾」色系，语义色：红=高危 琥珀=中危 灰=提示
⚠️ 本子页大量用 hidden 控制显隐，且有 flex/grid 容器 ——
作者样式会盖掉 UA 的 [hidden]，必须显式兜底（站内已踩过 7 批）
===================================================================== */
#sub-banned [hidden] { display: none !important; }
/* ---------- 头部引导 ---------- */
#sub-banned .bw-hero {
background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
border: none;
box-shadow: 0 6px 18px rgba(15, 118, 110, 0.22);
}
.bw-hero-t { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
.bw-hero-s { margin-top: 6px; font-size: 12.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.84); }
.bw-count { margin-top: 8px; font-size: 12.5px; color: var(--text2); }
.bw-dim { color: var(--text2); font-weight: 400; font-size: 12.5px; }
/* ---------- 进度（渐近 92%，不假造百分比） ---------- */
.bw-progress { margin-top: 12px; }
.bw-bar {
height: 7px; border-radius: 999px; overflow: hidden;
background: #f2e6db;
}
.bw-bar > i {
display: block; height: 100%; width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #14b8a6, #0f766e);
transition: width 0.32s ease-out;
}
.bw-ptext { margin-top: 7px; font-size: 12.5px; color: var(--text2); }
/* ---------- 风险总览 ---------- */
.bw-ov { display: flex; gap: 14px; align-items: center; }
.bw-ring {
position: relative; width: 104px; height: 104px; flex: 0 0 104px;
border-radius: 50%;
background: conic-gradient(var(--bw-c) calc(var(--bw-p) * 1%), #f1e6dc 0);
}
.bw-ring-in {
position: absolute; inset: 9px; border-radius: 50%; background: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.bw-ring-n { font-size: 27px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -0.5px; }
.bw-ring-l { margin-top: 3px; font-size: 10.5px; color: var(--text2); }
.bw-ov-main { flex: 1; min-width: 0; }
.bw-lv {
display: inline-block; font-size: 12.5px; font-weight: 800;
padding: 3px 10px; border-radius: 999px;
}
.bw-lv-high { background: #fdeaea; color: #b91c1c; }
.bw-lv-mid { background: #fef4e2; color: #b45309; }
.bw-lv-low { background: #e8f7ee; color: #15803d; }
.bw-verdict { margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.bw-stats { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.bw-st { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.bw-st-high { background: #fdeaea; color: #b91c1c; }
.bw-st-mid { background: #fef4e2; color: #b45309; }
.bw-st-hint { background: #eef2f7; color: #475569; }
.bw-meta { margin-top: 9px; font-size: 11.5px; color: var(--text2); line-height: 1.6; }
.bw-recheck { margin-top: 7px; font-size: 12px; font-weight: 600; }
.bw-ok { color: #15803d; }
.bw-warn { color: #b45309; }
/* ---------- 原文标注 ---------- */
.bw-legend { margin-bottom: 8px; font-size: 11.5px; color: var(--text2); display: flex; align-items: center; gap: 4px; }
.bw-lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 2px; }
.bw-lg:not(:first-child) { margin-left: 10px; }
.bw-lg-high { background: #ef4444; }
.bw-lg-mid { background: #f59e0b; }
.bw-lg-hint { background: #94a3b8; }
.bw-annot {
font-size: 14.5px; line-height: 2.1; word-break: break-word;
white-space: pre-wrap;
background: #fffdfb; border: 1px solid #f2e6db; border-radius: 14px;
padding: 13px 14px;
}
.bw-annot mark { background: transparent; color: inherit; }
.bw-hl { border-radius: 3px; padding: 0 2px; cursor: pointer; }
.bw-hl-high { background: #ffe1e1; color: #b91c1c; box-shadow: inset 0 -2px 0 #ef4444; }
.bw-hl-mid { background: #fff0d5; color: #b45309; box-shadow: inset 0 -2px 0 #f59e0b; }
.bw-hl-hint { background: #eef2f7; color: #475569; box-shadow: inset 0 -2px 0 #94a3b8; }
.bw-hl-n { font-style: normal; font-size: 9.5px; font-weight: 800; vertical-align: super; margin-left: 1px; }
/* ---------- 问题清单 ---------- */
.bw-list { margin-top: 4px; }
.bw-item {
position: relative; border: 1px solid #f0e4d9; border-left: 4px solid #cbd5e1;
border-radius: 14px; padding: 12px 13px; margin-bottom: 10px; background: #fff;
transition: box-shadow 0.16s, transform 0.16s;
}
.bw-item:last-child { margin-bottom: 0; }
.bw-i-high { border-left-color: #ef4444; background: #fffbfb; }
.bw-i-mid { border-left-color: #f59e0b; background: #fffdf8; }
.bw-i-hint { border-left-color: #94a3b8; background: #fbfcfd; }
.bw-item-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bw-no { font-size: 11.5px; font-weight: 800; color: var(--text2); }
.bw-tag { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.bw-tag-high { background: #fdeaea; color: #b91c1c; }
.bw-tag-mid { background: #fef4e2; color: #b45309; }
.bw-tag-hint { background: #eef2f7; color: #475569; }
.bw-cat { font-size: 12.5px; font-weight: 700; }
.bw-src { font-size: 10.5px; padding: 2px 6px; border-radius: 999px; margin-left: auto; }
.bw-src-lex { background: #e6f6f3; color: #0f766e; }
.bw-src-ai { background: #efeafd; color: #6d28d9; }
.bw-quote {
margin-top: 9px; font-size: 14px; font-weight: 700; line-height: 1.7;
color: var(--text); word-break: break-word;
}
.bw-row { display: flex; gap: 8px; margin-top: 7px; font-size: 12.5px; line-height: 1.75; }
.bw-k { flex: 0 0 42px; color: var(--text2); }
.bw-v { flex: 1; min-width: 0; word-break: break-word; }
.bw-law { color: #6d28d9; }
.bw-note {
margin-top: 8px; font-size: 12px; line-height: 1.7; color: #0f766e;
background: #eefaf8; border-radius: 10px; padding: 8px 10px;
}
.bw-item-ft { margin-top: 11px; padding-top: 10px; border-top: 1px dashed #f0e4d9; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bw-mini {
border: none; cursor: pointer; font-family: inherit;
font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff;
}
.bw-mini-ghost { background: #fff; color: var(--text2); border: 1px solid #eadfd4; }
.bw-mini:active { transform: translateY(1px); }
/* ---------- 未定位 ---------- */
.bw-unl { margin-top: 12px; border-top: 1px dashed #f0e4d9; padding-top: 11px; }
.bw-unl-t { font-size: 11.5px; color: var(--text2); line-height: 1.7; margin-bottom: 6px; }
.bw-unl-i { font-size: 12.5px; line-height: 1.8; color: var(--text); }
/* ---------- 合规改写 ---------- */
.bw-fixbody {
margin-top: 9px; font-size: 14px; line-height: 1.95; white-space: pre-wrap;
word-break: break-word;
background: #f2fbf8; border: 1px solid #cdeee7; border-radius: 14px; padding: 13px 14px;
}
.bw-fixbtns { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; }
.bw-cmp {
margin-top: 11px; font-size: 13px; line-height: 1.9; white-space: pre-wrap;
word-break: break-word; color: var(--text2);
background: #fbf8f5; border: 1px dashed #eadfd4; border-radius: 12px; padding: 12px 13px;
}
.bw-cmp::before { content: '原文'; display: block; font-size: 11px; font-weight: 800; color: var(--text2); margin-bottom: 5px; }
/* ---------- 建议区 ---------- */
.bw-sec { margin-top: 12px; }
.bw-sec:first-child { margin-top: 0; }
.bw-sec-t { font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.bw-li { font-size: 13px; line-height: 1.85; color: var(--text); }
.bw-li-ok { color: #15803d; }
/* ---------- 底部动作 ---------- */
.bw-actions { display: flex; gap: 10px; margin-top: 14px; }
.bw-actions .gen-btn { flex: 1; margin-top: 0; }
.bw-btn-ghost {
background: #fff !important; color: var(--text) !important;
border: 1px solid #eadfd4 !important; box-shadow: none !important;
}
.bw-empty {
font-size: 13.5px; line-height: 1.8; color: #15803d; text-align: center;
padding: 18px 10px; background: #f2fbf5; border-radius: 14px;
}
@media (max-width: 380px) {
.bw-ring { width: 92px; height: 92px; flex-basis: 92px; }
.bw-ring-n { font-size: 24px; }
}
/* ===================== 批量混剪（2026-09-15） ===================== */
/* ⚠️ 本项目铁律：hidden 会被 display:grid/flex 盖掉 → 这里一次性兜住所有 bm-* 元素 */
.bm-wrap [hidden] { display:none !important; }
.bm-wrap { padding-bottom:26px; }
/* HERO */
.bm-hero { position:relative; overflow:hidden; border-radius:22px; padding:20px 18px 18px; margin-bottom:14px;
background:radial-gradient(120% 140% at 8% 0%, rgba(255,94,140,.42) 0%, rgba(255,94,140,0) 58%),
linear-gradient(150deg, #1b1420 0%, #191622 55%, #1d1a28 100%);
color:#fff; box-shadow:0 12px 28px rgba(24,18,34,.30); }
.bm-hero-glow { position:absolute; right:-52px; bottom:-64px; width:180px; height:180px; border-radius:50%;
background:radial-gradient(circle, rgba(255,138,90,.40), rgba(255,138,90,0) 68%); }
.bm-hero-tag { position:relative; display:inline-block; font-size:11px; letter-spacing:.6px; font-weight:600;
color:#ffd7e2; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 11px; }
.bm-hero-t { position:relative; font-size:22px; font-weight:800; letter-spacing:.8px; margin-top:11px; line-height:1.36; }
.bm-hero-s { position:relative; font-size:12.5px; line-height:1.68; color:rgba(255,255,255,.78); margin-top:8px; }
.bm-hero-flow { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.bm-fchip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#ffe6ee;
background:rgba(255,255,255,.10); border-radius:999px; padding:5px 11px; }
.bm-fchip i { font-style:normal; font-weight:700; font-size:10.5px; width:15px; height:15px; border-radius:50%;
background:rgba(255,255,255,.22); display:inline-flex; align-items:center; justify-content:center; }
/* 卡片 */
.bm-card { background:#fff; border:1px solid #efe7ea; border-radius:18px; padding:14px 14px 15px; margin-bottom:13px;
box-shadow:0 5px 15px rgba(60,30,45,.05); }
.bm-card-h { font-size:13.5px; font-weight:800; letter-spacing:.2px; display:flex; align-items:baseline; gap:7px; }
.bm-card-sub { font-size:11px; font-weight:500; color:var(--text2); }
.bm-warn { display:inline-block; margin-left:6px; font-style:normal; font-size:11px; color:#d97706; font-weight:600; }
.bm-sub { font-size:12.5px; font-weight:700; margin:14px 0 7px; }
.bm-tip { margin-left:6px; font-size:11px; font-weight:500; color:var(--text2); }
.bm-note { font-size:11.5px; color:var(--text2); line-height:1.66; margin-top:11px; }
.bm-note b { color:var(--text); }
/* 素材区 */
.bm-empty { border:1.5px dashed #f0bdd0; border-radius:16px; background:#fff8fb; padding:26px 16px;
text-align:center; cursor:pointer; transition:background .15s, border-color .15s; margin-top:12px; }
.bm-empty:active,.bm-empty.drag { background:#ffeff5; border-color:var(--primary); }
.bm-empty-ico { font-size:30px; line-height:1; }
.bm-empty-t { font-size:13.5px; font-weight:700; margin-top:8px; }
.bm-empty-s { font-size:11.5px; color:var(--text2); margin-top:5px; line-height:1.6; }
.bm-srcs { display:flex; gap:10px; overflow-x:auto; padding:12px 2px 4px; -webkit-overflow-scrolling:touch; }
.bm-srcs::-webkit-scrollbar { height:0; }
.bm-scard { position:relative; flex:0 0 96px; border-radius:14px; overflow:hidden; background:#fbf7f9; border:1px solid #f2e4e9; }
.bm-scard-img { position:relative; aspect-ratio:3 / 4; background:#f4eef1; }
.bm-scard-img img { display:block; width:100%; height:100%; object-fit:cover; }
.bm-scard-ph { display:flex; align-items:center; justify-content:center; height:100%; font-size:26px; }
.bm-scard-dur { position:absolute; left:4px; bottom:4px; font-size:9.5px; font-weight:700; color:#fff;
background:rgba(0,0,0,.52); border-radius:999px; padding:2px 6px; }
.bm-scard-x { position:absolute; right:4px; top:4px; width:20px; height:20px; border:none; border-radius:50%;
padding:0; font-size:11px; line-height:1; color:#fff; background:rgba(0,0,0,.45); cursor:pointer; }
.bm-scard-meta { font-size:10.5px; color:var(--text2); text-align:center; padding:5px 3px 6px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.bm-addcard { flex:0 0 96px; border:1.5px dashed #f0bdd0; border-radius:14px; background:#fffafc;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; padding:14px 0; }
.bm-addcard.drag { background:#ffeff5; border-color:var(--primary); }
.bm-addcard-ico { font-size:22px; color:#e79bb8; line-height:1; }
.bm-addcard-t { font-size:11px; color:var(--text2); }
.bm-busy { margin-top:11px; font-size:12px; color:var(--primary); font-weight:600; text-align:center; }
/* 提示词 */
.bm-ta { width:100%; margin-top:11px; box-sizing:border-box; border:1px solid #eae0e5; border-radius:13px;
padding:11px 12px; font-size:13px; line-height:1.6; font-family:inherit; color:var(--text); background:#fdfbfc;
resize:vertical; }
.bm-ta:focus { outline:none; border-color:var(--primary); background:#fff; }
.bm-samples { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.bm-sample { border:1px solid #eee2e8; background:#fdfafb; color:var(--text2); font-size:11.5px; line-height:1.3;
border-radius:999px; padding:6px 11px; cursor:pointer; text-align:left; max-width:100%; }
.bm-sample.on { border-color:var(--primary); color:var(--primary); background:#fff5f8; }
/* 规格 */
.bm-chip-hint { display:block; font-size:10px; font-style:normal; opacity:.6; margin-top:1px; }
.bm-toggle { display:flex; align-items:center; gap:10px; width:100%; margin-top:16px; padding:11px 13px;
border:1px solid #eae0e5; border-radius:13px; background:#fff; font-size:13px; font-weight:600;
color:var(--text); cursor:pointer; text-align:left; }
.bm-toggle i { flex:0 0 38px; height:22px; border-radius:999px; background:#e3dbdf; position:relative; transition:background .18s; }
.bm-toggle i::after { content:''; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .18s; }
.bm-toggle.on i { background:var(--primary); }
.bm-toggle.on i::after { transform:translateX(16px); }
.bm-bgmrow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bm-bgmstate { font-size:11.5px; color:var(--text2); flex:1 1 auto; min-width:0; }
.bm-bgmstate.on { color:var(--primary); font-weight:600; }
.bm-ghost { padding:9px 13px; border:1px solid #eae0e5; border-radius:11px; background:#fff;
font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; }
.bm-ghost-s { padding:9px 11px; color:var(--text2); }
.bm-cost { font-size:11.5px; color:var(--text2); line-height:1.7; margin-top:14px;
background:#fbf7f9; border-radius:11px; padding:10px 12px; }
.bm-cost b { color:var(--primary); }
.bm-primary { width:100%; margin-top:13px; padding:14px; border:none; border-radius:14px; font-size:14.5px;
font-weight:800; letter-spacing:.4px; color:#fff; background:var(--grad); cursor:pointer;
box-shadow:0 7px 18px rgba(232,110,140,.24); }
.bm-primary:disabled { opacity:.5; box-shadow:none; cursor:not-allowed; }
/* 进度 */
.bm-progress { background:#fff; border:1px solid #efe7ea; border-radius:16px; padding:14px; margin-bottom:13px;
box-shadow:0 5px 15px rgba(60,30,45,.05); }
.bm-barwrap { height:7px; border-radius:999px; background:#f6ecf0; overflow:hidden; }
.bm-bar { display:block; height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .35s ease; }
.bm-stage { font-size:12px; color:var(--text2); margin-top:9px; line-height:1.6; min-height:18px; }
.bm-items { margin-top:10px; }
.bm-item { margin-top:9px; }
.bm-item-tx { font-size:11.5px; color:var(--text2); margin-bottom:5px; }
.bm-item-track { height:5px; border-radius:999px; background:#f6ecf0; overflow:hidden; }
.bm-item-bar { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#ff8fa8,#ffb37a);
transition:width .3s ease; }
.bm-item.failed .bm-item-bar { background:#e5e0e3; }
.bm-item.failed .bm-item-tx { color:#c2410c; }
/* AI 方案 */
.bm-planlist { margin-top:12px; }
.bm-plan-item { border:1px solid #f0e6ea; border-radius:14px; padding:11px 12px; margin-bottom:9px; background:#fdfbfc; }
.bm-plan-h { display:flex; align-items:center; gap:7px; font-size:13px; }
.bm-plan-idx { flex:0 0 20px; height:20px; border-radius:50%; background:var(--grad); color:#fff; font-size:11px;
font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.bm-plan-dur { margin-left:auto; font-size:11px; color:var(--text2); }
.bm-plan-hook { font-size:12px; color:var(--primary); font-weight:600; margin-top:7px; }
.bm-plan-subs { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.bm-plan-sub { font-size:11px; color:var(--text2); background:#f6f0f3; border-radius:8px; padding:4px 8px; }
.bm-sus { display:inline-block; margin-top:7px; font-size:11px; color:#c2410c; background:#fff3ec;
border-radius:8px; padding:4px 8px; }
/* 成片 */
.bm-resultwrap { background:#fff; border:1px solid #efe7ea; border-radius:18px; padding:14px; margin-bottom:13px;
box-shadow:0 5px 15px rgba(60,30,45,.05); }
.bm-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
.bm-rcard { border:1px solid #f0e6ea; border-radius:14px; overflow:hidden; background:#fdfbfc; }
.bm-video { display:block; width:100%; background:#000; aspect-ratio:9 / 16; object-fit:contain; }
.bm-rcard-h { display:flex; align-items:baseline; gap:6px; padding:8px 9px 0; font-size:12px; }
.bm-rcard-h b { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-rcard-h span { font-size:10px; color:var(--text2); white-space:nowrap; }
.bm-rcard-hook { font-size:11px; color:var(--text2); padding:5px 9px 0; line-height:1.5;
overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bm-rcard-bar { display:flex; gap:6px; padding:8px 9px 10px; }
.bm-mini { flex:1; padding:7px 4px; border:1px solid #eee2e8; border-radius:9px; background:#fff;
font-size:11px; font-weight:600; color:var(--text); cursor:pointer; }
.bm-dlbar { display:flex; gap:9px; margin-top:13px; }
.bm-dlbar .bm-primary { margin-top:0; flex:1; padding:13px; font-size:14px; }
.bm-dlbar .bm-ghost { flex:0 0 auto; }
/* toast */
.bm-toast { position:fixed; left:50%; bottom:84px; transform:translate(-50%,12px); z-index:9999;
background:rgba(26,20,26,.93); color:#fff; font-size:13px; padding:11px 18px; border-radius:999px;
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:82vw; text-align:center; line-height:1.5; }
.bm-toast.on { opacity:1; transform:translate(-50%,0); }
/* ===================== 数字人分身（.acl-*） ===================== */
/* ⚠️ 本块用了大量 display:flex，必须给 [hidden] 加兜底 —— 否则「hidden 被 display:flex 盖掉」，
表现为一进页面所有面板全展开、点开/收起没反应（本项目已踩过 7 批）。 */
#sub-avatarclone [hidden]{display:none!important}
.acl-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);
background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(249,89,1,.18);margin:0 0 14px}
.acl-banner-ico{font-size:26px;line-height:1}
.acl-banner-t{font-size:17px;font-weight:700;letter-spacing:.5px}
.acl-banner-s{font-size:12px;opacity:.92;margin-top:3px}
.acl-note{margin:0 2px 10px;font-size:12px;line-height:1.6;color:var(--text2)}
.acl-guide{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.acl-tip{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--chip-bg)}
.acl-tip-ico{font-size:17px;line-height:1.2}
.acl-tip-tx{flex:1;min-width:0}
.acl-tip-t{font-size:13px;font-weight:600;color:var(--text)}
.acl-tip-s{font-size:12px;line-height:1.55;color:var(--text2);margin-top:2px}
.acl-more{display:block;width:100%;border:0;background:transparent;color:var(--primary);
font-size:12px;padding:6px 0 10px;cursor:pointer}
.acl-rec{border:1px dashed #ffd0b0;border-radius:16px;padding:12px 14px;background:#fffaf6;margin-bottom:12px}
.acl-rec-lb{font-size:12px;color:var(--text2);margin-bottom:6px}
.acl-rec-script{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acl-rec-script span{font-size:19px;font-weight:700;letter-spacing:2px;color:var(--primary)}
.acl-mini{border:1px solid #ffd0b0;background:#fff;color:var(--primary);border-radius:999px;
padding:5px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.acl-mini:active{transform:scale(.97)}
.acl-mini:disabled{opacity:.55;cursor:default}
.acl-drop{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;
padding:22px 14px;border:1.5px dashed #ffc49b;border-radius:16px;background:#fffbf7;
cursor:pointer;transition:background .15s}
.acl-drop:active{background:#fff3e9}
.acl-drop:disabled{opacity:.6}
.acl-drop-ico{font-size:26px}
.acl-drop-t{font-size:14px;font-weight:600;color:var(--text)}
.acl-drop-s{font-size:12px;color:var(--text2)}
.acl-progline{height:3px;border-radius:3px;background:#ffe6d5;overflow:hidden;margin-top:10px}
.acl-indet{display:block;height:100%;width:38%;border-radius:3px;background:var(--grad);
animation:acl-slide 1.15s ease-in-out infinite}
@keyframes acl-slide{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.acl-src{margin-top:12px}
.acl-ok{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
background:#f0fdf4;border:1px solid #bbe7c9}
.acl-ok-ico{font-size:16px}
.acl-ok-tx{flex:1;min-width:0}
.acl-ok-t{font-size:13px;font-weight:600;color:#16794a}
.acl-ok-s{font-size:12px;color:#3f7c60;margin-top:2px}
.acl-video{width:100%;border-radius:14px;background:#000;margin-top:10px;display:block}
.acl-audio{width:100%;margin-top:10px;display:block}
.acl-pick{font-size:12px;font-weight:500;color:var(--primary)}
.acl-tabs{display:flex;gap:8px;margin-bottom:12px}
.acl-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;
border:1px solid #ffe0cc;border-radius:14px;background:#fff;cursor:pointer;transition:.15s}
.acl-tab.on{background:var(--grad);border-color:transparent;box-shadow:0 6px 16px rgba(249,89,1,.2)}
.acl-tab-ico{font-size:18px;line-height:1}
.acl-tab-lb{font-size:12px;font-weight:600;color:var(--text)}
.acl-tab.on .acl-tab-lb{color:#fff}
.acl-pane{margin-top:2px}
.acl-engines{display:flex;gap:8px}
.acl-eng{flex:1;padding:10px 8px;border:1px solid #ffe0cc;border-radius:14px;background:#fff;
cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
.acl-eng.on{background:var(--grad);border-color:transparent;box-shadow:0 6px 16px rgba(249,89,1,.2)}
.acl-eng-ico{font-size:17px;line-height:1}
.acl-eng-lb{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap}
.acl-eng.on .acl-eng-lb{color:#fff}
.acl-eng-n{font-size:11px;color:var(--text2)}
.acl-eng.on .acl-eng-n{color:rgba(255,255,255,.9)}
.acl-ta{width:100%;box-sizing:border-box;min-height:120px;padding:12px 13px;border-radius:14px;
border:1px solid #ffe0cc;background:#fffdfb;color:var(--text);font-size:14px;line-height:1.65;
resize:vertical;font-family:inherit}
.acl-ta.small{min-height:64px;font-size:13px}
.acl-ta:focus{outline:0;border-color:var(--primary-light);background:#fff}
.acl-metarow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}
.acl-est{font-size:12px;color:var(--text2)}
.acl-est.warn{color:#c2740a}
.acl-est.bad{color:var(--danger);font-weight:600}
.acl-count{font-size:12px;color:var(--text2)}
.acl-actrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.acl-ai{border:1px solid #ffe0cc;border-radius:14px;padding:12px;background:#fffaf6;margin:0 0 12px}
.acl-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid #ffe0cc;
background:#fff;font-size:13.5px;color:var(--text);font-family:inherit}
.acl-input:focus{outline:0;border-color:var(--primary-light)}
.acl-chiprow-lb{font-size:12px;color:var(--text2);margin:10px 2px 6px}
.acl-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.acl-chip{border:1px solid #ffe0cc;background:#fff;color:var(--text);border-radius:999px;
padding:6px 13px;font-size:12.5px;cursor:pointer;transition:.15s}
.acl-chip.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.acl-groups{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.acl-gchip{border:0;background:var(--chip-bg);color:var(--text2);border-radius:999px;
padding:5px 12px;font-size:12px;cursor:pointer}
.acl-gchip:hover{color:var(--primary)}
.acl-voices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.acl-voice{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;
border:1px solid #ffe0cc;border-radius:13px;background:#fff;cursor:pointer;transition:.15s;text-align:left}
.acl-voice.on{background:var(--grad);border-color:transparent;box-shadow:0 6px 16px rgba(249,89,1,.18)}
.acl-voice-n{font-size:13px;font-weight:600;color:var(--text)}
.acl-voice.on .acl-voice-n{color:#fff}
.acl-voice-g{font-size:11px;color:var(--text2);flex:none}
.acl-voice.on .acl-voice-g{color:rgba(255,255,255,.85)}
.acl-pvoices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.acl-pv{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid #ffe0cc;
border-radius:13px;background:#fff;cursor:pointer;text-align:left;transition:.15s}
.acl-pv:hover{border-color:var(--primary-light);background:#fffaf5}
.acl-pv-n{font-size:13px;font-weight:600;color:var(--text)}
.acl-pv-h{font-size:11.5px;color:var(--text2);line-height:1.45}
.acl-pv-d{font-size:11px;color:#c9a68f;margin-top:2px}
.acl-cta{display:block;width:100%;border:0;border-radius:14px;padding:13px;cursor:pointer;
background:var(--grad);color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.5px;
box-shadow:0 8px 20px rgba(249,89,1,.22)}
.acl-cta.small{display:inline-block;width:auto;padding:9px 20px;font-size:13.5px;border-radius:12px}
.acl-cta:disabled{opacity:.55;box-shadow:none;cursor:default}
.acl-cta:active{transform:scale(.99)}
.acl-check{border:1px solid #ffe0cc;border-radius:14px;padding:4px 14px;background:#fffdfb;margin-bottom:12px}
.acl-ck{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px dashed #ffe9dc}
.acl-ck:last-of-type{border-bottom:0}
.acl-ck-k{font-size:12.5px;color:var(--text2)}
.acl-ck-v{font-size:13.5px;font-weight:600;color:var(--text)}
.acl-ck-note{padding:0 0 10px;font-size:12px;line-height:1.55;color:#c2740a}
.acl-costtip{margin:9px 2px 0;font-size:12px;color:var(--text2);text-align:center}
.acl-prog{margin-top:14px}
.acl-prog-bar{height:7px;border-radius:7px;background:#ffe6d5;overflow:hidden}
.acl-prog-bar i{display:block;height:100%;width:2%;border-radius:7px;background:var(--grad);
transition:width .5s ease}
.acl-prog-tx{margin-top:7px;font-size:12.5px;color:var(--text2);text-align:center}
.acl-res{padding:12px 0;border-bottom:1px dashed #ffe9dc}
.acl-res:last-child{border-bottom:0;padding-bottom:0}
.acl-res-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px}
.acl-res-t{font-size:12.5px;color:var(--text);font-weight:600}
.acl-res-at{font-size:11.5px;color:var(--text2)}
.acl-res-acts{display:flex;gap:8px;align-items:center;margin-top:9px}
.acl-dl{flex:1;display:block;text-align:center;text-decoration:none;border-radius:12px;padding:9px;
background:var(--chip-bg);color:var(--primary);font-size:13px;font-weight:600}
.acl-dl:active{transform:scale(.99)}
.acl-foot{margin:16px 2px 4px;font-size:12px;line-height:1.65;color:var(--text2);text-align:center}
/* 不确定进度条（上游不反馈「当前段到哪了」时用，禁止假造百分比） */
.acl-prog-bar.indet{position:relative}
.acl-prog-bar i.indet{animation:acl-slide 1.15s ease-in-out infinite}
/* ============================================================================
板块头牌入口卡（文案 · 图片 · 视频） 2026-09-15
----------------------------------------------------------------------------
与运营板块的 .ip-entry / .em-entry 同级：都放在 hero 之下、.section-head 之上，
是进板块后第一眼看到的东西。
为什么复用 .combo-card：app.js 的点击委托是按
`.func-card, .quick-item, .combo-card` 绑定、从 data-action 取值的
→ 复用基类 = 零 JS 改动，也就没有"忘了接线"的风险。
这里只覆盖外观。
配色按色相错开，五张牌并排不撞：
.ip-entry 紫罗兰 270° .em-entry 玫红 320°
.hk-entry 琥珀金 40° .od-entry 青碧 185° .mv-entry 珊瑚橙 20°
============================================================================ */
/* ---------------- 三张共用骨架 ---------------- */
.combo-card.hk-entry,
.combo-card.od-entry,
.combo-card.mv-entry {
position: relative; overflow: hidden;
display: flex; align-items: stretch; gap: 0;
border-radius: 20px; padding: 17px 16px 15px 17px; margin-bottom: 16px;
border: 1px solid rgba(255, 255, 255, .11);
transition: transform .12s;
}
.combo-card.hk-entry:active,
.combo-card.od-entry:active,
.combo-card.mv-entry:active { transform: scale(.985); }
/* 缓缓扫过的一道柔光。静止时看不出、扫过时"发亮"一下 ——
移动端最划算的高级感来源（只动 transform/opacity，不触发重排）。 */
.combo-card.hk-entry::after,
.combo-card.od-entry::after,
.combo-card.mv-entry::after {
content: ''; position: absolute; top: -60%; left: -34%; width: 30%; height: 220%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
transform: rotate(16deg); pointer-events: none;
animation: sectEntryShine 6.5s ease-in-out infinite;
}
@keyframes sectEntryShine {
0%, 58% { left: -34%; opacity: 0; }
66% { opacity: 1; }
86%, 100% { left: 116%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.combo-card.hk-entry::after,
.combo-card.od-entry::after,
.combo-card.mv-entry::after { animation: none; opacity: 0; }
}
/* ---------------- 文字骨架（三张共用）---------------- */
.hk-entry-body, .od-entry-body, .mv-entry-body { position: relative; flex: 1; min-width: 0; }
.hk-entry-tag, .od-entry-tag, .mv-entry-tag {
display: inline-block; font-size: 10.5px; letter-spacing: .16em; font-weight: 700;
border-radius: 999px; padding: 2.5px 10px; margin-bottom: 9px;
}
.hk-entry-name, .od-entry-name, .mv-entry-name {
font-size: 20px; font-weight: 800; letter-spacing: .3px; color: #fff; line-height: 1.28;
}
.hk-entry-sub, .od-entry-sub, .mv-entry-sub {
margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .72);
}
/* 副文案里的加粗 = 这块牌的差异点，提成纯白让它自己跳出来 */
.hk-entry-sub b, .od-entry-sub b, .mv-entry-sub b { color: #fff; font-weight: 700; }
.hk-entry-flow, .od-entry-flow, .mv-entry-flow {
display: flex; align-items: center; gap: 5px; margin-top: 11px; flex-wrap: wrap;
}
.hk-entry-flow span, .od-entry-flow span, .mv-entry-flow span {
font-size: 10.5px; font-weight: 600; white-space: nowrap;
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px; padding: 2.5px 8px;
}
.hk-entry-flow i, .od-entry-flow i, .mv-entry-flow i {
font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .42);
}
/* ============================================================================
① 黄金钩子文案 · 琥珀金（"暗夜里的一束金光"）
============================================================================ */
.combo-card.hk-entry {
background: linear-gradient(118deg, #111629 0%, #1d2140 34%, #6b4a10 100%);
box-shadow: 0 12px 28px rgba(92, 67, 21, .38);
}
.hk-entry-glow {
position: absolute; right: -64px; top: -84px; width: 230px; height: 230px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 206, 104, .42), transparent 68%); pointer-events: none;
}
.hk-entry-tag {
color: #ffdf9e; border: 1px solid rgba(255, 206, 120, .42); background: rgba(255, 190, 80, .14);
}
.hk-entry-flow span { color: #ffeccb; }
/* 视觉主体：三条真实钩子句叠放 —— 一眼看懂"给你一堆现成的开头"
第一条用金底高亮，下面两条渐隐，像"从一堆备选里挑中一条" */
.hk-entry-art {
position: relative; flex: 0 0 auto; align-self: center; margin-left: 12px;
width: 118px; display: flex; flex-direction: column; gap: 4px;
}
.hk-entry-art i {
font-style: normal; font-size: 9.5px; line-height: 1.3; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
padding: 4px 7px; border-radius: 7px;
color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .13);
}
.hk-entry-art i:first-child {
color: #2a1c00; font-weight: 700;
background: linear-gradient(96deg, #ffd97a, #ffb43c);
border-color: rgba(255, 214, 140, .90);
box-shadow: 0 4px 12px rgba(255, 175, 60, .30);
}
.hk-entry-art i:nth-child(2) { opacity: .62; }
.hk-entry-art i:nth-child(3) { opacity: .38; }
/* ============================================================================
② 一键详情图 · 青碧（电商详情页的干净冷调）
============================================================================ */
.combo-card.od-entry {
background: linear-gradient(118deg, #0a1a22 0%, #0f3340 42%, #0d5157 100%);
box-shadow: 0 12px 28px rgba(13, 62, 66, .40);
}
.od-entry-glow {
position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(74, 222, 222, .30), transparent 68%); pointer-events: none;
}
.od-entry-tag {
color: #a8f0ee; border: 1px solid rgba(120, 232, 228, .42); background: rgba(60, 210, 205, .14);
}
.od-entry-flow span { color: #cdf6f4; }
/* 视觉主体：详情页长图缩略 —— 主图块 + 标题条 + 两格细节 + 参数条，
竖向排布，一眼看懂产出的是"一整条长图"而不是单张图 */
.od-entry-art {
position: relative; flex: 0 0 auto; align-self: center; margin-left: 12px;
width: 58px; height: 92px; padding: 5px; box-sizing: border-box;
display: flex; flex-direction: column; gap: 3px;
background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.od-entry-art .od-art-hero {
flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
font-size: 16px; line-height: 1; background: rgba(255, 255, 255, .94); border-radius: 5px;
}
.od-entry-art .od-art-line { flex: 0 0 auto; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .40); }
.od-entry-art .od-art-line.w1 { width: 46%; }
.od-entry-art .od-art-line.w2 { width: 82%; }
.od-entry-art .od-art-line.w3 { width: 64%; }
.od-entry-art .od-art-cell { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.od-entry-art .od-art-cell i { background: rgba(255, 255, 255, .26); border-radius: 4px; }
/* ============================================================================
③ 视频模特换衣 · 珊瑚橙（时尚 + 成片感）
============================================================================ */
.combo-card.mv-entry {
background: linear-gradient(118deg, #1c1214 0%, #3f1a18 42%, #6d2a12 100%);
box-shadow: 0 12px 28px rgba(83, 32, 18, .42);
}
.mv-entry-glow {
position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 122, 80, .32), transparent 68%); pointer-events: none;
}
.mv-entry-tag {
color: #ffc4a8; border: 1px solid rgba(255, 160, 120, .42); background: rgba(255, 120, 70, .15);
}
.mv-entry-flow span { color: #ffdcc9; }
/* 视觉主体：同一位模特 × 三套衣服（第三格带播放角标）
—— 三格的头像完全一样，就是在说"换的是衣服、不是脸" */
.mv-entry-art {
position: relative; flex: 0 0 auto; align-self: center; margin-left: 12px;
display: flex; flex-direction: column; gap: 4px;
}
.mv-entry-art i {
position: relative; width: 72px; height: 24px; box-sizing: border-box;
display: flex; align-items: center; gap: 5px; padding: 0 7px;
font-style: normal; border-radius: 8px;
background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
}
.mv-entry-art i b { font-size: 13px; line-height: 1; font-weight: 400; }
.mv-entry-art i em { flex: 1; height: 8px; border-radius: 3px; background: var(--c, #888); opacity: .9; }
.mv-entry-art i.play { background: rgba(255, 120, 70, .20); border-color: rgba(255, 150, 110, .48); }
.mv-entry-art i u {
position: absolute; right: -6px; top: -6px;
width: 15px; height: 15px; border-radius: 50%;
background: #ff6a3d; color: #fff; font-size: 7px; line-height: 15px; text-align: center;
text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* ---------------- 桌面端悬停：用自己的强调色投影，别继承 .combo-card 的橙色 ---------------- */
.combo-card.hk-entry:hover { box-shadow: 0 16px 32px rgba(92, 67, 21, .50); }
.combo-card.od-entry:hover { box-shadow: 0 16px 32px rgba(13, 62, 66, .50); }
.combo-card.mv-entry:hover { box-shadow: 0 16px 32px rgba(83, 32, 18, .52); }
/* ---------------- 窄屏 ---------------- */
@media (max-width: 380px) {
.hk-entry-name, .od-entry-name, .mv-entry-name { font-size: 18px; }
.hk-entry-art { width: 100px; }
.hk-entry-art i { font-size: 8.5px; padding: 3px 5px; }
.od-entry-art { width: 50px; height: 80px; }
.od-entry-art .od-art-hero { flex-basis: 26px; font-size: 14px; }
.mv-entry-art i { width: 62px; height: 21px; }
}
/* ===================== 热点追踪（2026-09-15 · 由「每日热搜」升级） ===================== */
/* 本项目铁律：hidden 会被 display:grid/flex 盖掉 → 一次性兜住 */
.ht-wrap [hidden] { display:none !important; }
.ht-wrap { padding-bottom:26px; }
/* HERO —— 雷达/情报感的冷色调，与「AI 模特」暖粉、「批量混剪」暖红区分开 */
.ht-hero { position:relative; overflow:hidden; border-radius:22px; padding:20px 18px 18px; margin-bottom:14px;
background:radial-gradient(120% 140% at 8% 0%, rgba(56,189,248,.38) 0%, rgba(56,189,248,0) 58%),
linear-gradient(150deg, #121a2a 0%, #151d2f 55%, #182338 100%);
color:#fff; box-shadow:0 12px 28px rgba(16,26,44,.30); }
.ht-hero-glow { position:absolute; right:-56px; bottom:-70px; width:190px; height:190px; border-radius:50%;
background:radial-gradient(circle, rgba(129,140,248,.42), rgba(129,140,248,0) 68%); }
.ht-hero-tag { position:relative; display:inline-block; font-size:11px; letter-spacing:.6px; font-weight:600;
color:#cfe6ff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 11px; }
.ht-hero-t { position:relative; font-size:21.5px; font-weight:800; letter-spacing:.6px; margin-top:11px; line-height:1.34; }
.ht-hero-s { position:relative; font-size:12.5px; line-height:1.68; color:rgba(255,255,255,.78); margin-top:8px; }
.ht-hero-s b { color:#bfe3ff; font-weight:700; }
.ht-hero-flow { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.ht-fchip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#dff0ff;
background:rgba(255,255,255,.10); border-radius:999px; padding:5px 11px; }
.ht-fchip i { font-style:normal; font-weight:700; font-size:10.5px; width:15px; height:15px; border-radius:50%;
background:rgba(255,255,255,.22); display:inline-flex; align-items:center; justify-content:center; }
/* 输入 */
.ht-input { width:100%; box-sizing:border-box; margin-top:11px; border:1px solid #e7e9ef; border-radius:13px;
padding:12px 13px; font-size:14px; color:var(--text); background:#fbfcfe; font-family:inherit; }
.ht-input:focus { outline:none; border-color:var(--primary); background:#fff; }
.ht-input.sm { padding:10px 12px; font-size:13px; margin-top:0; }
.ht-adv-toggle { display:block; width:100%; margin-top:12px; padding:10px 12px; text-align:left;
border:1px dashed #dfe4ee; border-radius:12px; background:#fafbfd; font-size:12.5px; font-weight:600;
color:var(--text2); cursor:pointer; font-family:inherit; }
.ht-adv-toggle.on { border-style:solid; border-color:var(--primary); color:var(--primary); background:#fff8f4; }
.ht-adv { margin-top:11px; }
.ht-field { display:block; margin-bottom:9px; }
.ht-field > span { display:block; font-size:11.5px; color:var(--text2); margin-bottom:4px; }
/* 平台多选 */
.ht-selhint { font-size:11px; font-weight:600; color:var(--text2); margin-left:6px; }
.ht-plats { margin-top:11px; }
.ht-plat-row { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.ht-plat { border:1px solid #e7e9ef; background:#fbfcfe; color:var(--text2); font-size:12.5px; font-weight:600;
border-radius:999px; padding:7px 12px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:4px; }
.ht-plat.on { border-color:var(--primary); color:var(--primary); background:#fff8f4; }
.ht-plat-e { font-size:12px; }
.ht-loading { font-size:12.5px; color:var(--text2); padding:10px 0; }
/* 变化概览 */
.ht-chg-card { border-color:#dbe7f4; }
/* ⚠️ 这几行原来用 float:right 做右对齐 —— 内容一长就会把文字挤错位
（实测：「2 条掉榜」被采集时间挤成两行、看着像乱码）。改成 flex 两端对齐，动态内容再长也不坏。 */
.ht-chg-line { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
font-size:13px; line-height:1.8; color:var(--text); }
.ht-chg-t { flex:1 1 auto; min-width:0; }
.ht-chg-line b { font-size:15px; font-weight:800; margin-right:1px; }
.ht-c-new { color:#f97316; }
.ht-c-up { color:#ef4444; }
.ht-c-down { color:#10b981; }
.ht-c-gone { color:#94a3b8; }
.ht-stamp { flex:0 0 auto; margin-left:auto; font-size:11px; color:var(--text2); font-weight:500; }
.ht-first { margin-top:10px; font-size:12px; line-height:1.7; color:#8a5a12; background:#fff8ec;
border:1px solid #ffe4b8; border-radius:11px; padding:10px 12px; }
.ht-refresh-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* 共振 */
.ht-reso-h { font-size:12.5px; font-weight:700; margin-bottom:9px; line-height:1.5; }
.ht-reso-h b { color:#7c3aed; white-space:nowrap; }
.ht-reso-sub { display:block; font-size:11px; font-weight:500; color:var(--text2); margin-top:3px; }
.ht-reso-item { border:1px solid #ece8f7; background:#fbfaff; border-radius:13px; padding:10px 12px; margin-bottom:8px; }
.ht-reso-t { font-size:13px; font-weight:700; line-height:1.5; }
.ht-reso-p { font-size:11.5px; color:var(--text2); margin-top:6px; }
.ht-reso-p b { color:#7c3aed; font-size:13px; }
.ht-reso-tag { display:inline-block; margin-left:5px; background:#f0ecfd; color:#6d5bd0; border-radius:6px; padding:2px 7px; font-weight:600; }
.ht-reso-none { font-size:12px; color:var(--text2); line-height:1.7; }
/* 榜单 */
.ht-listmeta { font-size:11px; font-weight:500; color:var(--text2); margin-left:6px; }
.ht-tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; }
.ht-tabs::-webkit-scrollbar { height:0; }
.ht-tab { position:relative; flex:0 0 auto; border:1px solid #e7e9ef; background:#fbfcfe; color:var(--text2);
font-size:12.5px; font-weight:600; border-radius:999px; padding:7px 13px; cursor:pointer; font-family:inherit; }
.ht-tab.on { border-color:var(--primary); color:var(--primary); background:#fff8f4; }
.ht-tab-dot { font-style:normal; margin-left:5px; font-size:10px; font-weight:700; color:#fff; background:#ef4444;
border-radius:999px; padding:1px 5px; }
.ht-list { margin-top:2px; }
.ht-li { display:flex; align-items:flex-start; gap:9px; padding:10px 0; border-bottom:1px solid #f4f5f8; }
.ht-li-num { flex:0 0 22px; height:22px; border-radius:50%; background:#eef1f6; color:#8b95a8; font-size:11.5px;
font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.ht-li-num.top { background:#ffe9e3; color:#e0521f; }
.ht-li-main { flex:1 1 auto; min-width:0; }
.ht-li-title { font-size:13px; line-height:1.55; color:var(--text); }
.ht-li-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.ht-b { font-style:normal; font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 7px; }
.ht-b-new { background:#fff1e6; color:#ea6a12; }
.ht-b-up { background:#ffebeb; color:#dc2626; }
.ht-b-down { background:#e9f8f2; color:#0e9f6e; }
.ht-b-reso { background:#f0ecfd; color:#6d5bd0; }
.ht-b-old { background:#f1f3f7; color:#7a8699; }
.ht-li-reso { font-size:10.5px; color:#8b93a7; margin-top:4px; }
.ht-li-copy { flex:0 0 auto; border:1px solid #e7e9ef; background:#fff; color:var(--text2); font-size:11px;
border-radius:9px; padding:5px 9px; cursor:pointer; font-family:inherit; }
.ht-li-gone { opacity:.68; }
.ht-gone-h { font-size:11.5px; font-weight:700; color:var(--text2); margin:14px 0 2px; }
/* AI 研判 */
.ht-judge-card { border-color:#e2e0f5; }
.ht-barwrap { height:7px; border-radius:999px; background:#f1f2f7; overflow:hidden; margin-top:14px; }
.ht-bar { display:block; height:100%; width:0; border-radius:999px;
background:linear-gradient(90deg,#38bdf8,#818cf8); transition:width .5s ease; }
.ht-stage { font-size:12px; color:var(--text2); margin-top:9px; line-height:1.6; min-height:18px; }
.ht-verdicts { margin-top:14px; }
.ht-deg { font-size:12px; line-height:1.7; color:#8a5a12; background:#fff8ec; border:1px solid #ffe4b8;
border-radius:11px; padding:10px 12px; margin-bottom:11px; }
.ht-summary { font-size:13px; font-weight:700; line-height:1.7; background:#f6fbff; border:1px solid #d8ecfb;
border-radius:12px; padding:11px 13px; margin-bottom:10px; }
.ht-stat { font-size:11.5px; color:var(--text2); margin-bottom:11px; line-height:1.7; }
.ht-stat b { color:var(--text); }
.ht-go { color:#dc2626; font-weight:700; }
.ht-maybe { color:#d97706; font-weight:700; }
.ht-skip { color:#94a3b8; font-weight:700; }
.ht-forced { color:#7a8699; }
.ht-vcard { border:1px solid #e9ecf2; border-left-width:4px; border-radius:13px; padding:12px 13px; margin-bottom:11px; background:#fff; }
.ht-vcard.go { border-left-color:#ef4444; background:#fffaf9; }
.ht-vcard.maybe { border-left-color:#f59e0b; background:#fffdf7; }
.ht-vcard.skip { border-left-color:#cbd5e1; background:#fafbfc; opacity:.86; }
.ht-v-h { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.ht-v-conc { flex:0 0 auto; font-size:11px; font-weight:800; color:#fff; border-radius:7px; padding:3px 8px; }
.ht-v-conc.go { background:linear-gradient(135deg,#f43f5e,#f97316); }
.ht-v-conc.maybe { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.ht-v-conc.skip { background:#b6c0cd; }
.ht-v-title { flex:1 1 140px; min-width:0; font-size:13.5px; font-weight:700; line-height:1.5; }
.ht-v-stage { flex:0 0 auto; font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 7px; }
.ht-v-stage.sprout { background:#e6f7ee; color:#0e9f6e; }
.ht-v-stage.rising { background:#ffebeb; color:#dc2626; }
.ht-v-stage.peak { background:#fff1e6; color:#ea6a12; }
.ht-v-stage.decline { background:#f1f3f7; color:#7a8699; }
.ht-v-lights { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:9px; }
.ht-light { font-size:10.5px; font-weight:600; border-radius:6px; padding:2px 7px; background:#f1f3f7; color:#a3adbd; }
.ht-light.on { background:#e8f1ff; color:#2563eb; }
.ht-v-total { font-size:11px; font-weight:800; color:var(--text2); margin-left:3px; }
.ht-v-reso { font-size:10.5px; font-weight:700; background:#f0ecfd; color:#6d5bd0; border-radius:6px; padding:2px 7px; }
.ht-v-fb { font-size:10.5px; font-weight:600; background:#f1f3f7; color:#8b95a8; border-radius:6px; padding:2px 7px; }
.ht-v-reason { font-size:12.5px; line-height:1.65; margin-top:8px; color:var(--text); }
.ht-v-sub { font-size:11.5px; color:var(--text2); margin-top:5px; line-height:1.6; }
.ht-v-risk { font-size:11.5px; line-height:1.6; color:#b45309; background:#fff8ec; border-radius:9px;
padding:8px 10px; margin-top:8px; }
.ht-angle { border:1px solid #eef0f5; border-radius:11px; padding:10px 11px; margin-top:8px; background:#fcfdff; }
.ht-angle-t { font-size:12.5px; font-weight:700; color:var(--primary); }
.ht-angle-how { font-size:12px; line-height:1.65; color:var(--text); margin-top:5px; }
.ht-angle-hook { font-size:12px; line-height:1.6; color:var(--text2); margin-top:6px; font-style:italic; }
.ht-mini { border:1px solid #e7e9ef; background:#fff; color:var(--text2); font-size:11px; border-radius:8px;
padding:4px 8px; cursor:pointer; font-family:inherit; margin-left:6px; }
.ht-v-acts { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.ht-v-acts .ht-mini { margin-left:0; padding:6px 11px; font-size:11.5px; font-weight:600; }
.ht-drop, .ht-unsourced { font-size:11.5px; line-height:1.65; border-radius:10px; padding:9px 11px; margin-top:9px; }
.ht-drop { color:#7a8699; background:#f7f8fb; }
.ht-unsourced { color:#b45309; background:#fff8ec; border:1px solid #ffe4b8; }
/* 海报 */
.ht-poster-wrap { margin-top:11px; border-radius:14px; overflow:hidden; background:#f4f6f9; padding:9px; text-align:center; }
.ht-poster { display:block; width:100%; border-radius:10px; }
.ht-profile { display:flex; align-items:center; gap:12px; margin-top:11px; }
.ht-avatar { position:relative; flex:0 0 62px; height:62px; border-radius:50%; border:1.5px dashed #d6dbe6;
background:#fafbfd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.ht-avatar span { font-size:22px; color:#b7c0cf; line-height:1; }
.ht-avatar img { width:100%; height:100%; object-fit:cover; }
.ht-avatar-clear { position:absolute; right:0; top:0; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.5);
color:#fff !important; font-size:13px !important; display:flex; align-items:center; justify-content:center; }
.ht-fields { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
/* toast */
.ht-toast { position:fixed; left:50%; bottom:84px; transform:translate(-50%,12px); z-index:9999;
background:rgba(22,26,34,.93); color:#fff; font-size:13px; padding:11px 18px; border-radius:999px;
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:82vw; text-align:center; line-height:1.5; }
.ht-toast.show { opacity:1; transform:translate(-50%,0); }
/* ===================== 热点追踪 · 按动作顺序重排（2026-09-15 二改） =====================
起因：用户反馈「没看懂咋用，有点复杂」。三处根因：
① 标着「必填」的领域输入框，第一步「看榜单」根本用不到（接口没带它），白填还困惑
→ 领域搬进 AI 研判卡（那才是它生效的地方），文案写明"只有这一步需要"
② 「开始追踪」在页中、「AI 研判」在页底且初始是灰的，用户不知道先点哪个
→ 加三步进度线，跟随操作高亮；灰按钮旁边明说为什么灰
③ 15 个平台一次全铺 + 300 多字说明
→ 平台默认折叠成 8 个常用，「更多平台」展开；说明文字砍半
注意：本段只加新类，不改任何既有规则（既有类仍被 e2e 断言引用）。 */
/* ——— 三步进度线（取代旧的静态 ht-fchip 装饰） ——— */
.ht-steps { position:relative; display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.ht-step { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:rgba(255,255,255,.60);
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:5px 11px;
transition:background .25s, color .25s, border-color .25s; }
.ht-step i { font-style:normal; font-weight:700; font-size:10.5px; width:15px; height:15px; border-radius:50%;
background:rgba(255,255,255,.16); color:rgba(255,255,255,.72); display:inline-flex; align-items:center;
justify-content:center; transition:background .25s, color .25s; }
.ht-step.on { color:#fff; background:rgba(96,165,250,.26); border-color:rgba(147,197,253,.55); }
.ht-step.on i { background:#60a5fa; color:#0b1220; }
/* ——— 平台折叠按钮 ——— */
.ht-morebtn { display:block; width:100%; margin-top:9px; padding:9px 12px; border:1px dashed #dfe4ee;
border-radius:12px; background:#fafbfd; font-size:12.5px; font-weight:600; color:var(--text2);
cursor:pointer; font-family:inherit; }
.ht-morebtn.open { border-style:solid; border-color:#d7deea; }
/* ——— 结果区顶部的「下一步」引导条 ——— */
.ht-nextbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
margin-bottom:12px; padding:12px 14px; border-radius:15px;
background:linear-gradient(135deg, #eef6ff 0%, #f5f3ff 100%); border:1px solid #dbe7f4; }
.ht-nextbar-t { flex:1 1 150px; font-size:12.5px; line-height:1.6; color:var(--text); font-weight:600; }
.ht-nextbar-btn { flex:0 0 auto; border:0; border-radius:11px; padding:9px 14px; font-size:12.5px;
font-weight:700; color:#fff; background:var(--primary); cursor:pointer; font-family:inherit; }
/* ——— AI 研判卡门口的说明：按钮还灰着时，告诉用户为什么灰 ——— */
.ht-judge-gate { margin-top:9px; font-size:12px; line-height:1.65; color:#8a5a12; background:#fff8ec;
border:1px solid #ffe4b8; border-radius:11px; padding:9px 12px; text-align:center; }
.ht-judge-gate b { font-weight:700; }
/* ——— 领域字段（从页首搬进来 —— 它是这一步才需要的输入） ——— */
.ht-field-main > span { font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:6px; }
.ht-field-main .ht-input { margin-top:0; }
/* 从引导条跳进研判卡时闪一下，否则用户不知道跳到哪了 */
@keyframes htFlash { 0% { box-shadow:0 0 0 0 rgba(56,189,248,.55); } 100% { box-shadow:0 0 0 14px rgba(56,189,248,0); } }
.ht-judge-card.ht-flash { animation:htFlash 1.4s ease-out 1; border-color:#93c5fd; }
/* 窄屏：进度线换行后别挤成一团 */
@media (max-width:380px) {
.ht-step { font-size:11px; padding:5px 9px; }
.ht-nextbar-btn { width:100%; }
}