/* ============================================================
公众号图文创作助手 PWA — 设计令牌 + 组件样式
设计令牌取自 Ardot 原型（fileId 713424335401074）
============================================================ */
:root {
/* 品牌色 */
--primary: #2D6CDF; /* 强调蓝·对齐 Ardot 设计稿 */
--primary-weak: #EBF0FC; /* 主色浅底·对齐 Ardot */
--success: #0F7A4F; /* 通过绿·对齐 Ardot */
--success-weak: #E7F6EE;
--warning: #F97316; /* 风险/弱项橙 */
--warning-weak: #FFF1E6;
--danger: #C0392B; /* 拒绝红·对齐 Ardot */
--danger-weak: #FBEAEA;
/* 文字 */
--text: #1F222B;
--text-2: #4E5566;
--text-weak: #8F95A1;
/* 面 */
--bg: #F4F5F7;
--card: #FFFFFF;
--line: #F0F1F5;
--line-strong: #E4E7EE;
/* 形状 */
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 20px;
/* 间距基准 */
--gap: 12px;
--pad: 16px;
/* 字体（CJK 优先，离线回退系统字体） */
--font-cjk: "Sarasa Gothic SC", "Noto Sans SC", "PingFang SC",
"Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
--shadow-card: 0 2px 12px rgba(31, 34, 43, 0.06);
--shadow-pop: 0 8px 30px rgba(31, 34, 43, 0.12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font-cjk);
color: var(--text);
background: #e9ebf0;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.5;
}
/* 手机容器：居中、限定宽度，桌面也保持"原型即视感"且可缩放查看 */
.phone {
position: relative;
max-width: 430px;
margin: 0 auto;
/* 🔴 2026-08-14 根治"底栏被顶出可视区"：手机 WebView 里 100vh 取的是"大视口高度"
（含系统导航栏背后的区域），比可见区域高一大截，导致 absolute bottom:0 的 tabbar 被顶到屏幕外。
改用 height:100% 链（html/body 已 height:100%，WebView 把 html 撑满可见区），.phone 即等于可见高度，
tabbar 永远贴底。另加 100dvh 作为动态视口兜底。 */
height: 100%;
min-height: 100%;
background: var(--bg);
display: flex;
flex-direction: column;
box-shadow: 0 0 0 1px var(--line-strong), 0 20px 60px rgba(0,0,0,0.12);
overflow: hidden;
}
/* ===== 顶部栏 ===== */
.appbar {
flex: 0 0 auto;
height: 52px;
padding: 0 var(--pad);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--card);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 20;
}
.appbar .title { font-size: 17px; font-weight: 700; }
.appbar .sub { font-size: 12px; color: var(--text-weak); font-weight: 400; }
.appbar .icon-btn {
width: 36px; height: 36px; border-radius: 10px; border: none;
background: var(--bg); color: var(--text-2); font-size: 18px; cursor: pointer;
}
.appbar .icon-btn:active { transform: scale(0.94); }
/* ===== 内容滚动区 ===== */
.screen-wrap {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* 给底部 tabbar 留固定占位（tabbar 是 absolute bottom:0），
主体再长也不会被导航盖住最后一屏内容 */
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
}
.screen { display: none; padding: var(--pad); transition: transform .18s ease; will-change: transform; }
.screen.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* 🔴 v1.0.13：右滑返回时屏幕跟着手指右移（视觉反馈「我能右滑返回」）；swiping-back 类由 JS 加/移 */
body.swiping-back .screen.active { transition: none; }
/* ===== 底部导航（绝对定位于 .phone 底部，主体滚动时不被挤走） ===== */
.tabbar {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 10;
height: 64px;
display: flex;
background: var(--card);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar button {
flex: 1; border: none; background: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; color: var(--text-weak); font-size: 11px; font-family: var(--font-cjk);
}
.tabbar button .ic { font-size: 20px; line-height: 1; }
.tabbar button.active { color: var(--primary); font-weight: 600; }
.tabbar button:active { opacity: .7; }
/* ===== 爆文 tab（替代检测） ===== */
/* ===== 爆文 tab · 3 屏横向切换（10w+ / 阅读5000+ / 黑马账号） ===== */
.hot-screen-seg { display: flex; gap: 6px; padding: 0 14px 12px; }
.hot-screen-seg .screen-tab {
flex: 1; min-width: 0;
padding: 9px 6px;
border: 1px solid var(--line-strong);
background: var(--card);
border-radius: 10px;
font-size: 12.5px; font-weight: 600; color: var(--text-2);
font-family: var(--font-cjk);
cursor: pointer;
transition: all .15s;
text-align: center;
white-space: nowrap;
}
.hot-screen-seg .screen-tab.on {
background: linear-gradient(135deg, var(--primary), #1E5BC6);
color: #fff; border-color: var(--primary);
box-shadow: 0 2px 8px rgba(45,108,223,.25);
}
.hot-panels { overflow: hidden; touch-action: pan-y; }
.hot-panels-track {
display: flex;
transition: transform .32s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
.hot-panel { width: 100%; min-width: 100%; box-sizing: border-box; flex-shrink: 0; }
/* 屏 3 · 黑马账号卡 */
.fastest-card { position: relative; display: flex; gap: 10px; background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.fastest-card.top3 .f-rank { background: var(--primary); color: #fff; }
.fastest-card .f-rank { flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-weak); color: var(--primary); font-weight: 700; font-size: 14px; font-family: var(--font-cjk); }
.fastest-card .f-body { flex: 1; min-width: 0; }
.fastest-card .f-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fastest-card .f-rate { color: #E03E3E; font-size: 12px; font-weight: 600; background: #FFE9E9; padding: 2px 6px; border-radius: 6px; }
.fastest-card .f-work-title { font-size: 13px; color: var(--text-2); margin-bottom: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fastest-card .f-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-weak); }
.fastest-card .f-min-title { font-size: 11px; color: var(--text-weak); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.fastest-card .f-min-title b { color: var(--text-2); font-weight: 500; }
.hot-catbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hot-chips { display: flex; gap: 8px; overflow-x: auto; flex: 1; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.hot-chips::-webkit-scrollbar { display: none; }
.hot-chip { flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--card); color: var(--text-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-family: var(--font-cjk); cursor: pointer; white-space: nowrap; }
.hot-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.hot-cat-add { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--primary); background: var(--primary-weak); color: var(--primary); font-size: 18px; line-height: 1; cursor: pointer; }
.hot-seg { display: flex; gap: 4px; background: #EDF0F5; border-radius: 10px; padding: 4px; margin-bottom: 10px; }
.hot-seg .seg { flex: 1; border: none; background: none; border-radius: 8px; padding: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; font-family: var(--font-cjk); }
.hot-seg .seg.on { background: var(--card); color: var(--text); font-weight: 600; box-shadow: var(--shadow-card); }
.hot-tip { font-size: 12px; color: var(--primary); background: var(--primary-weak); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.hot-list { display: flex; flex-direction: column; gap: 10px; }
.hot-card { position: relative; display: flex; gap: 10px; background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.hot-card.top1 { border: 1.5px solid var(--primary); }
.hot-card.from-top { background: #F7F8FB; border: 1px dashed #C9CDD4; opacity: 0.95; }
.hot-card.from-top .hot-title { color: var(--text-weak); }
.from-top-badge { position: absolute; top: 6px; right: 8px; font-size: 10px; padding: 2px 6px; background: #EEF1F6; color: #6E7585; border-radius: 8px; letter-spacing: 0.5px; font-weight: 500; }
.hot-rank { flex: 0 0 auto; width: 40px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-weak); align-self: flex-start; }
.hot-card.top1 .hot-rank { color: var(--primary); }
.hot-body { flex: 1; min-width: 0; }
.hot-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.hot-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-weak); }
.hot-clicks { color: #07C160; font-weight: 700; }
.hot-state { text-align: center; color: var(--text-weak); font-size: 13px; padding: 30px 10px; white-space: pre-line; }
.hot-state.err { color: var(--danger); }
.hot-foot { text-align: center; color: var(--text-weak); font-size: 12px; margin-top: 12px; }
/* 分页器 */
.hot-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 8px 0; }
.pg-btn { background: var(--card); color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-family: var(--font-cjk); cursor: pointer; }
.pg-btn:active { opacity: .7; }
.pg-btn[disabled] { opacity: .35; cursor: not-allowed; }
.pg-info { font-size: 12px; color: var(--text-weak); }
/* 自定义分类 chip：紫色边（区别于内置蓝） */
.hot-chip.custom { border-color: #8B5CF6; color: #8B5CF6; }
.hot-chip.custom.on { background: #8B5CF6; border-color: #8B5CF6; color: #fff; }
.cat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.cat-overlay[hidden] { display: none; }
.cat-sheet { background: var(--card); width: 100%; max-width: 430px; border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0)); max-height: 70vh; display: flex; flex-direction: column; }
.cat-sheet-h { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cat-sheet-sub { display: block; font-size: 12px; color: var(--text-weak); font-weight: 400; margin-top: 2px; }
.cat-opts { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 0; }
.cat-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.cat-opt input { width: 16px; height: 16px; }
.cat-sheet-actions { display: flex; gap: 10px; margin-top: 6px; }
.cat-sheet-actions .btn { flex: 1; }
/* 弹层里的「自定义分类」区 */
.cat-custom-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.cat-custom-h { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cat-custom-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cat-custom-input { flex: 1; border: 1px solid var(--line-strong); background: var(--bg); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: var(--font-cjk); color: var(--text); outline: none; }
.cat-custom-input:focus { border-color: #8B5CF6; }
.cat-custom-add-btn { flex: 0 0 auto; background: #8B5CF6; color: #fff; border: none; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-family: var(--font-cjk); cursor: pointer; }
.cat-custom-list { display: flex; flex-direction: column; gap: 6px; }
.cat-custom-empty { font-size: 12px; color: var(--text-weak); padding: 10px 0; text-align: center; }
.cat-custom-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.cat-custom-tag { font-size: 13px; color: #8B5CF6; font-weight: 600; }
.cat-custom-del { background: none; border: none; color: var(--danger); font-size: 12px; cursor: pointer; padding: 4px 8px; font-family: var(--font-cjk); }
/* ===== 卡片 ===== */
.card {
background: var(--card);
border-radius: var(--radius);
padding: var(--pad);
box-shadow: var(--shadow-card);
margin-bottom: var(--gap);
}
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card .hint { color: var(--text-weak); font-size: 12px; margin: 0 0 12px; }
.card .row { display: flex; align-items: center; justify-content: space-between; }
.card + .card { margin-top: 0; }
/* ===== 按钮 ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: none; border-radius: 12px; padding: 12px 16px; font-size: 15px;
font-family: var(--font-cjk); font-weight: 600; cursor: pointer; width: 100%;
transition: transform .08s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: var(--primary-weak); color: var(--primary); }
.btn-weak { background: var(--bg); color: var(--text-2); }
.btn-warning { background: var(--warning); color: #fff; }
.btn-line { background: #fff; color: var(--text); border: 1px solid var(--line-strong); }
.btn-green { background: #10B981; color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
/* ===== 输入 ===== */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field .req { color: var(--warning); }
textarea, input[type=text], input[type=url], select {
width: 100%; border: 1px solid var(--line-strong); border-radius: 12px;
padding: 10px 12px; font-size: 14px; font-family: var(--font-cjk); color: var(--text);
background: #fff; resize: vertical; outline: none;
}
textarea:focus, input:focus, select:focus { border-color: var(--primary); }
textarea { min-height: 88px; }
/* ===== Chip ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary-weak); color: var(--primary);
border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 500;
}
.chip.warn { background: var(--warning-weak); color: var(--warning); }
.chip.ok { background: var(--success-weak); color: var(--success); }
.chip .x {
cursor: pointer; width: 16px; height: 16px; border-radius: 50%;
background: rgba(0,0,0,.06); display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; line-height: 1;
}
/* ===== 语气标签多选（第一步增强）===== */
.tone-chips .chip { cursor: pointer; background: #fff; color: var(--text-2); border: 1px solid var(--line-strong); transition: all .15s; }
.tone-chips .chip:hover { border-color: var(--primary); }
.tone-chips .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ===== 热点横条标签（第一步增强）===== */
.hot-chip { cursor: pointer; background: #fff; color: var(--text-1); border: 1px solid #F5C4B3; transition: all .15s; }
.hot-chip:hover { border-color: #E5453F; transform: translateY(-1px); }
.related-chip { cursor: pointer; background: #EEEDFE; color: #4F46E5; border: 1px solid #CECBF6; transition: all .15s; }
.related-chip:hover { transform: translateY(-1px); }
/* ===== 风格选择标签（第二步增强）===== */
.style-chip { cursor: pointer; background: #fff; color: var(--text-1); border: 1px solid var(--line-strong); transition: all .15s; }
.style-chip:hover { border-color: var(--primary); }
.style-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ===== 统计条（各步增强）===== */
#outlineStats, #riskStats, #hookStats, #titleStats { border-radius: 8px; margin-bottom: 8px; }
.chip-input {
border: 1px dashed var(--line-strong); background: #fff; border-radius: 999px;
padding: 6px 12px; font-size: 12px; color: var(--text-weak); cursor: text;
}
/* ===== 进度条 ===== */
.bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.bar.ok > i { background: var(--success); }
.bar.warn > i { background: var(--warning); }
/* ===== 步进器 ===== */
.stepper { display: flex; align-items: center; gap: 6px; margin-bottom: var(--gap); }
.stepper .dot {
flex: 1; height: 4px; border-radius: 999px; background: var(--line);
}
.stepper .dot.done { background: var(--primary); }
.stepper .dot.cur { background: var(--primary); }
/* ===== 诊断维度行 ===== */
.dim {
display: grid; grid-template-columns: 1fr auto; gap: 6px 10px;
align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.dim:last-child { border-bottom: none; }
.dim .name { font-weight: 600; font-size: 14px; }
.dim .score { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.dim .score.ok { color: var(--success); }
.dim .score.warn { color: var(--warning); }
.dim .diag { grid-column: 1 / -1; color: var(--text-weak); font-size: 12px; }
.dim .inject {
grid-column: 1 / -1; justify-self: start; margin-top: 4px;
border: none; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600;
cursor: pointer; font-family: var(--font-cjk);
}
.dim .inject.warn { background: var(--warning); color: #fff; }
.dim .inject.ok { background: var(--primary); color: #fff; }
/* ===== 综合分环 ===== */
.score-ring { position: relative; width: 190px; height: 190px; margin: 8px auto; }
.score-ring svg { width: 100%; height: 100%; }
.score-ring .center {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
}
.score-ring .cap { font-size: 12px; color: var(--text-weak); }
.score-ring .num { font-size: 52px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.score-ring .badge {
margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--success);
background: var(--success-weak); border-radius: 999px; padding: 2px 10px;
}
/* ===== 雷达图（SVG，浏览器渲染） ===== */
.radar-wrap { width: 100%; display: flex; justify-content: center; margin: 6px 0 4px; }
.radar-wrap svg { width: 280px; height: 280px; max-width: 100%; }
/* ===== 列表项 ===== */
.list-item {
display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.list-item:last-child { border-bottom: none; }
.list-item .thumb {
width: 44px; height: 44px; border-radius: 10px; background: var(--primary-weak);
display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto;
}
.list-item .meta { flex: 1; min-width: 0; }
.list-item .meta .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .meta .s { color: var(--text-weak); font-size: 12px; }
.list-item .arrow { color: var(--text-weak); font-size: 18px; }
/* ===== 徽标/标签 ===== */
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--text-2); }
.tag.ok { background: var(--success-weak); color: var(--success); }
.tag.warn { background: var(--warning-weak); color: var(--warning); }
.tag.new { background: #E0F2FE; color: #0369A1; }
.tag.match { background: rgba(0,166,42,.12); color: #00A62A; border: 1px solid rgba(0,166,42,.3); }
/* ===== 头像/账号卡 ===== */
.acct {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, #4F46E5, #7C73F0); color: #fff;
border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap);
}
.acct .avatar {
width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto;
}
.acct .who .n { font-weight: 700; font-size: 16px; }
.acct .who .e { font-size: 12px; opacity: .85; }
/* ===== 工具宫格 ===== */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.tile {
background: var(--card); border-radius: var(--radius); padding: 16px; text-align: left;
box-shadow: var(--shadow-card); cursor: pointer; border: none; font-family: var(--font-cjk);
display: flex; flex-direction: column; gap: 8px;
}
.tile:active { transform: scale(.98); }
.tile .emo { font-size: 24px; }
.tile .tt { font-weight: 700; font-size: 14px; color: var(--text); }
.tile .ds { font-size: 12px; color: var(--text-weak); }
/* 🔴 v1.0.19：首页"灵感素材"特色入口（公众号爆款搜索）—— 全宽 + 渐变背景，视觉锚点 */
.feat-tile {
display: flex; align-items: center; gap: 14px;
background: linear-gradient(135deg, #FFF1F0 0%, #FFE4D9 100%);
border: 1px solid #F8C9B8; border-radius: var(--radius);
padding: 14px 16px; box-shadow: var(--shadow-card);
cursor: pointer; font-family: var(--font-cjk); text-align: left;
color: var(--text);
}
.feat-tile:active { transform: scale(.98); }
.feat-tile .emo { font-size: 30px; line-height: 1; }
.feat-tile .info { flex: 1; min-width: 0; }
.feat-tile .tt { font-weight: 700; font-size: 15px; line-height: 1.3; }
.feat-tile .ds { font-size: 12px; color: var(--text-weak); margin-top: 2px; line-height: 1.4; }
.feat-tile .arrow { font-size: 24px; color: var(--text-weak); line-height: 1; }
.section-title .tag.new { background: #FF6B4A; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: 1px; }
/* ===== 空态 ===== */
.empty { text-align: center; color: var(--text-weak); padding: 40px 0; }
.empty .big { font-size: 40px; margin-bottom: 8px; }
/* ===== 检测分析中 ===== */
.spinner {
width: 54px; height: 54px; border-radius: 50%;
border: 5px solid var(--primary-weak); border-top-color: var(--primary);
animation: spin 0.9s linear infinite; margin: 24px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.steps-loading { margin-top: 16px; }
.steps-loading .li { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text-2); }
.steps-loading .li .ck { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-weak); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.steps-loading .li.done .ck { background: var(--success); color: #fff; }
.steps-loading .li.done { color: var(--text); }
/* v1.0.20.1 老猫实锤反馈：loading 屏要有"在跑"和"挂"两种状态视觉区别（绝不用假数字） */
.steps-loading .li.active .ck { background: var(--primary); color: #fff; animation: ckPulse 1.2s ease-in-out infinite; }
.steps-loading .li.active { color: var(--primary); font-weight: 600; }
.steps-loading .li.fail .ck { background: #fca5a5; color: #7f1d1d; }
.steps-loading .li.fail { color: #b91c1c; }
@keyframes ckPulse { 0% { opacity: .4; transform: scale(.86); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: .4; transform: scale(.86); } }
/* ===== 浮动提示 ===== */
.toast {
position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px);
background: rgba(31,34,43,.92); color: #fff; padding: 10px 16px; border-radius: 999px;
font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; max-width: 80%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ===== 顶部进度条（分析中） ===== */
.scan-line { height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); width: 40%; animation: scan 1.2s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateX(-100%);} 100% { transform: translateX(350%);} }
.section-title { font-size: 15px; font-weight: 700; margin: 4px 2px 10px; }
.muted { color: var(--text-weak); }
.mt { margin-top: var(--gap); }
.center { text-align: center; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* ===== 后台截图上传区 ===== */
.upload-tip {
background: var(--primary-weak);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 12px;
color: var(--text-2);
margin: 10px 0 12px;
}
.upload-tip .ts { font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.upload-tip .ti { line-height: 1.7; }
.upload-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 22px 12px;
border: 2px dashed #C7D2FE;
border-radius: var(--radius);
background: #FAFBFF;
color: var(--text-2);
cursor: pointer;
text-align: center;
transition: border-color .15s, background .15s;
}
.upload-box:hover { border-color: var(--primary); background: var(--primary-weak); }
.upload-box .plus {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 22px; line-height: 32px; text-align: center;
font-weight: 300;
margin-bottom: 4px;
}
.upload-box .ut { font-weight: 600; color: var(--text); font-size: 13px; }
.upload-box .us { font-size: 11px; color: var(--text-weak); }
.upload-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
margin-top: 12px;
}
.thumb-box {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--line-strong);
background: #fff;
}
.thumb-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-box .tx {
position: absolute; top: 2px; right: 2px;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(0,0,0,.55); color: #fff;
font-size: 14px; line-height: 20px; text-align: center;
cursor: pointer; font-weight: 300;
}
.thumb-box .tx:hover { background: var(--danger); }
.thumb-box .tn {
position: absolute; left: 0; right: 0; bottom: 0;
background: linear-gradient(transparent, rgba(0,0,0,.55));
color: #fff; font-size: 10px; padding: 8px 6px 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== 后台数据摘要报告 ===== */
.sub-h {
font-size: 12px;
font-weight: 600;
color: var(--text-weak);
margin-bottom: 8px;
}
.bg-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.bg-cell {
background: var(--bg);
border-radius: 10px;
padding: 10px 4px 8px;
text-align: center;
}
.bg-cell .lab { font-size: 10px; color: var(--text-weak); margin-bottom: 4px; }
.bg-cell .val { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; font-family: -apple-system, "SF Pro Display", "Inter", system-ui; }
.bg-cell .val.zero { color: var(--text-weak); font-weight: 500; }
.bg-cell .val.bad { color: var(--warning); }
.bg-cell .val.good { color: var(--success); }
.bg-source-row {
display: flex; align-items: center; gap: 8px;
margin: 6px 0; font-size: 12px;
}
.bg-source-row .nm { width: 72px; color: var(--text-2); }
.bg-source-row .bar {
flex: 1; height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden;
}
.bg-source-row .bf { height: 100%; background: linear-gradient(90deg, #4F46E5, #7C74F4); border-radius: 6px; }
.bg-source-row .pc { width: 44px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bg-source-row.warn .bf { background: linear-gradient(90deg, var(--warning), #FBA458); }
.bg-art {
display: flex; align-items: center; gap: 8px;
padding: 6px 0; border-bottom: 1px dashed var(--line);
font-size: 12px;
}
.bg-art:last-child { border-bottom: none; }
.bg-art .rank {
width: 18px; height: 18px; border-radius: 50%;
background: var(--primary-weak); color: var(--primary);
font-weight: 700; font-size: 11px; line-height: 18px; text-align: center;
flex: 0 0 auto;
}
.bg-art .tt {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text);
}
.bg-art .num {
font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600;
}
.bg-art .pct { font-variant-numeric: tabular-nums; color: var(--text-weak); font-size: 11px; }
.bg-art .date { color: var(--text-weak); font-size: 10px; margin-left: 2px; }
.bg-extra {
display: flex; flex-wrap: wrap; gap: 6px;
font-size: 12px; color: var(--text-2);
}
.bg-extra .pill {
background: var(--bg); padding: 3px 8px; border-radius: 6px;
}
.bg-extra .pill strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* ===== 开关 ===== */
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong);
transition: background .2s;
}
.switch span::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s;
}
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(20px); }
/* ===== AI 模型选择器 ===== */
#modelChips .chip { cursor: pointer; transition: all .15s; }
#modelChips .chip:hover { transform: translateY(-1px); }
#modelChips .chip[data-active="1"] {
background: var(--primary); color: #fff;
box-shadow: 0 0 0 2px var(--primary-weak);
}
/* ===== AI 生成输出（步骤 2-6） ===== */
.ai-output { min-height: 60px; }
.ai-placeholder {
text-align: center; color: var(--text-weak);
padding: 28px 16px; background: var(--bg); border-radius: var(--radius-sm);
font-size: 13px;
}
.ai-loading {
text-align: center; padding: 28px 16px; color: var(--text-weak); font-size: 13px;
}
.ai-loading .mini-spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 4px solid var(--primary-weak); border-top-color: var(--primary);
animation: spin 0.9s linear infinite; margin: 0 auto 10px;
}
.ai-loading-text { display: inline-flex; align-items: center; gap: 6px; }
/* 大纲条目 */
.outline-item {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.outline-item:last-child { border-bottom: none; }
.outline-item .num {
width: 24px; height: 24px; border-radius: 50%;
background: var(--primary-weak); color: var(--primary);
font-weight: 700; font-size: 13px; line-height: 24px; text-align: center;
flex: 0 0 auto;
}
.outline-item .body { flex: 1; min-width: 0; }
.outline-item .body .t { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.outline-item .body .s { color: var(--text-weak); font-size: 12px; line-height: 1.5; }
/* 正文段落 */
.body-paragraph {
margin: 0 0 14px; line-height: 1.78; font-size: 15px;
color: var(--text);
}
.body-paragraph:last-of-type { margin-bottom: 0; }
/* 风险自检条目 */
.risk-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.risk-item:last-child { border-bottom: none; }
.risk-item .meta { flex: 1; min-width: 0; }
.risk-item .meta .t { font-weight: 600; font-size: 14px; }
.risk-item .meta .s { color: var(--text-weak); font-size: 12px; margin-top: 2px; }
/* 钩子条目 */
.hook-item {
display: block; padding: 12px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
margin-bottom: 8px; cursor: pointer; transition: all .15s;
background: #fff;
}
.hook-item:last-child { margin-bottom: 0; }
.hook-item:hover { border-color: var(--primary); }
.hook-item.selected {
background: var(--primary-weak); border-color: var(--primary);
}
.hook-item .style {
font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 6px;
}
.hook-item.selected .style { color: var(--primary); }
.hook-item .text {
font-size: 14px; line-height: 1.6; color: var(--text);
}
.hook-match {
font-size: 11px; font-weight: 600; color: #00A62A; margin-top: 8px;
}
/* 标题条目 */
.title-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.title-item:last-child { border-bottom: none; }
.title-item .tt {
flex: 1; min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.4;
}
.title-item .meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.title-item .copy-btn {
background: var(--primary-weak); color: var(--primary);
border: none; border-radius: 6px; padding: 5px 10px;
font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-cjk);
}
.title-item .copy-btn:hover { background: var(--primary); color: #fff; }
/* ===== 步骤级模型下拉框 ===== */
.step-model {
appearance: none; -webkit-appearance: none;
font-family: var(--font-cjk); font-size: 12px; font-weight: 600;
color: var(--text); background: var(--bg);
border: 1px solid var(--line-strong); border-radius: 8px;
padding: 7px 22px 7px 8px; margin-right: 8px; cursor: pointer;
flex: 0 0 auto; max-width: 124px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center;
}
.step-model:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-weak); }
/* ===== 流式输出（边生成边出字） ===== */
.ai-stream {
font-size: 14.5px; line-height: 1.78; color: var(--text);
white-space: pre-wrap; word-break: break-word;
}
.ai-reasoning {
font-size: 12px; line-height: 1.6; color: var(--text-weak);
background: var(--bg); border-left: 3px solid var(--line-strong);
padding: 8px 10px; border-radius: 6px; margin-bottom: 10px;
white-space: pre-wrap; word-break: break-word;
}
.caret {
display: inline-block; width: 7px; height: 15px; margin-left: 1px;
background: var(--primary); vertical-align: text-bottom;
animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* ===== 拆解项目 ===== */
.subtabs {
display: flex; gap: 8px; background: var(--bg);
padding: 4px; border-radius: 12px; margin-bottom: var(--gap);
}
.subtab {
flex: 1; border: none; background: none; cursor: pointer;
padding: 9px 0; border-radius: 9px; font-size: 14px; font-weight: 600;
color: var(--text-weak); font-family: var(--font-cjk);
}
.subtab.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-card); }
.cat-scroll {
display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
margin-bottom: var(--gap); -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-chip {
flex: 0 0 auto; border: 1px solid var(--line-strong); background: #fff;
color: var(--text-2); border-radius: 999px; padding: 7px 14px;
font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-cjk);
white-space: nowrap;
}
.cat-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* 二级类目条（每选中一级类目后展开）—— flex-wrap 让 5+ 个 chip 直接换行，无需水平滚动 */
.sub2-scroll { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 10px; }
.sub2-scroll .sub2-chip {
flex: 0 0 auto;
padding: 7px 12px;
font-size: 12px;
background: #F4F5FA;
color: var(--text-mid);
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
transition: all .15s; white-space: nowrap;
}
.sub2-scroll .sub2-chip.active { background: var(--primary-weak); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.sub2-scroll .sub2-chip.sub2-custom { background: #FFF3E9; color: #C2410C; }
.sub2-scroll .sub2-chip.sub2-custom.active { background: #FBD9BE; border-color: #F97316; color: #C2410C; font-weight: 600; }
.sub2-scroll .sub2-chip.sub2-add { background: #FFFFFF; color: #C2410C; border: 1px dashed #F97316; font-weight: 500; }
.sub2-scroll .sub2-chip.sub2-add:hover { background: #FFF7F0; }
.sub2-scroll .sub2-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; flex: 0 0 1px; }
/* 热门面板顶部：自定义子标签提示条（当选中 __custom__:xx chip 时） */
.custom-sub-banner { background: #FFF7F0; border: 1px solid #FBD9BE; color: #C2410C; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 10px; line-height: 1.6; }
.custom-sub-banner b { color: #9A3412; font-weight: 600; }
/* 第三段 chips（来源渠道）与第二段视觉一致；仅多加一个左侧小图标点 src2-scroll */
.src2-scroll .sub2-chip { padding-left: 22px; position: relative; }
.src2-scroll .sub2-chip::before {
content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35;
}
.src2-scroll .sub2-chip.active::before { opacity: .9; }
.dec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dec-head-t { font-size: 15px; font-weight: 700; }
.btn.sm { width: auto; padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.dec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.dec-card {
background: var(--card); border-radius: var(--radius); padding: 12px;
box-shadow: var(--shadow-card); cursor: pointer; position: relative;
display: flex; flex-direction: column; gap: 8px;
}
.dec-card:active { transform: scale(.98); }
.dec-card .cover {
height: 56px; border-radius: 8px; background: var(--primary-weak);
display: flex; align-items: center; justify-content: center;
font-size: 22px; color: var(--primary);
}
.dec-card .ttl {
font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 🔴 v20：卡片标题直接包 ，让用户"点标题即开原文"。
视觉提示：链接态显示下划线 + 主色调，悬停加深。 */
.dec-card .ttl .ttl-link {
color: var(--primary);
text-decoration: none;
border-bottom: 1px dashed var(--primary);
}
.dec-card .ttl .ttl-link:hover {
color: #1E5BD0;
border-bottom-color: #1E5BD0;
}
.dec-card .ttl .ttl-link .ext { font-size: 11px; opacity: .7; margin-left: 2px; }
.dec-card .meta { font-size: 11px; color: var(--text-weak); }
.dec-card .fav {
position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
border-radius: 50%; background: rgba(255,255,255,.92); border: none;
display: flex; align-items: center; justify-content: center; font-size: 13px;
cursor: pointer; box-shadow: var(--shadow-card); line-height: 1;
}
.dec-card .fav.on { color: var(--warning); }
/* 真实来源 / 公开热榜文章卡片（来自后端 /api/hot） */
.dec-card-real .cover { background: linear-gradient(135deg, #EBF0FC, #E1EBFB); }
.dec-card-real .ttl { -webkit-line-clamp: 3; }
.dec-card-real .ext-link,
.ext-link {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; padding: 9px 12px;
background: var(--primary-weak);
border: 1px solid #D9E2FB;
border-radius: 10px;
font-size: 12px; color: var(--primary); font-weight: 600;
text-decoration: none;
}
.dec-card-real .ext-link:hover,
.ext-link:hover { background: #E0E9FC; text-decoration: none; }
.dec-card-real .ext-link .ext-ic,
.ext-link .ext-ic { width: 15px; height: 15px; flex: none; }
.dec-card-real .ext-link .ext-txt,
.ext-link .ext-txt { line-height: 1.2; }
/* v6：找不到直达链接时的友好引导（搜索型 URL / 不存在真实文章 URL） */
.dec-card-real .ext-link-hint,
.ext-link-hint {
color: var(--text-weak);
background: #F4F5FA;
padding: 2px 8px;
border-radius: 6px;
font-weight: 500;
cursor: help;
}
.dec-card-real .ext-link-hint:hover,
.ext-link-hint:hover { background: #ECEEF5; text-decoration: none; }
/* 卡片底部的来源平台 chip 列表：让用户一眼看到"这条博主在哪些平台活跃" */
.dec-sources { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dec-src-tag {
display: inline-block; font-size: 10px; font-weight: 500;
padding: 2px 7px; border-radius: 999px;
background: #EEF1FF; color: #4F46E5; line-height: 1.4;
}
.dec-src-tag.more { background: #F4F5FA; color: var(--text-weak); }
.dec-card-real.first .dec-sources { margin-top: 4px; }
.dec-card-real.first .dec-src-tag { font-size: 11px; padding: 2px 9px; }
.dec-card-real.first {
grid-column: span 2;
border: 1.5px solid var(--primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, .08), var(--shadow-card);
}
.dec-card-real.first .cover { height: 84px; font-size: 32px; }
.dec-card-real.first .ttl { font-size: 15px; -webkit-line-clamp: 2; }
.dec-actions { display: flex; gap: 10px; margin-top: 4px; }
.dec-actions .btn { flex: 1; }
/* 写作基因详情 */
.dec-target {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, #4F46E5, #7C73F0); color: #fff;
border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap);
}
.dec-target .av {
width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto;
}
.dec-target .nb { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; }
.dec-target .nb .n { font-weight: 700; font-size: 16px; line-height: 1.3; }
.dec-target .nb .kind-label { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; margin-bottom: 6px; letter-spacing: .5px; }
.dec-target .nb .e { font-size: 12px; opacity: .85; margin-top: 4px; line-height: 1.4; }
.dec-target .nb .n .dec-link {
color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.55);
padding-bottom: 1px; transition: all .15s;
}
.dec-target .nb .n .dec-link:hover { border-bottom-color: #fff; opacity: .9; }
.dec-target .nb .n .dec-link .ext { font-size: 11px; opacity: .7; margin-left: 3px; font-weight: 500; }
.dec-target .nb .e .e-tag {
display: inline-block; margin-left: 6px; padding: 1px 7px;
border-radius: 999px; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 500;
opacity: .92; vertical-align: middle;
}
/* 🔴 v18：占位 URL 提示（头部副标下方，黄色胶囊 + 单行截断，让用户明白 example.com 不是文章本身） */
.dec-target .nb .e .dec-real-note {
margin-top: 4px; padding: 4px 8px;
background: rgba(255, 217, 128, 0.22); color: #FFE7BA;
font-size: 11px; line-height: 1.45; border-radius: 6px;
border: 1px solid rgba(255, 217, 128, 0.4);
white-space: normal; word-break: break-word;
}
/* 右侧"打开原文"按钮：白色玻璃感 pill，更醒目 */
.dec-target .dec-link-btn {
flex: 0 0 auto;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 12px; font-weight: 700;
padding: 8px 12px; border-radius: 999px;
text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
border: 1px solid rgba(255,255,255,.35);
transition: background .15s, transform .15s;
white-space: nowrap;
}
.dec-target .dec-link-btn:hover { background: rgba(255,255,255,.32); transform: translateY(-1px); }
.dec-target .dec-link-btn:active { transform: translateY(0); }
/* 🔴 v19："🔗 换条具体直链"按钮 — 区别于"打开原文"(链接)，明确这是「替换 + 重抓」动作 */
.dec-target .dec-link-btn.dec-link-change {
background: rgba(245, 108, 44, 0.18);
border-color: rgba(245, 108, 44, 0.4);
color: #fff;
cursor: pointer;
font-family: inherit;
}
.dec-target .dec-link-btn.dec-link-change:hover {
background: rgba(245, 108, 44, 0.32);
}
.dec-ai-note {
display: flex; align-items: flex-start; gap: 10px;
background: var(--primary-weak); border-radius: var(--radius-sm);
padding: 12px; margin-bottom: var(--gap); font-size: 12px; color: var(--primary);
line-height: 1.6;
}
.dec-ai-note .ai-ic { font-size: 18px; flex: 0 0 auto; line-height: 1.4; }
.gene-card { margin-bottom: var(--gap); }
.gene-card h4 { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.gene-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gene-tags span {
background: var(--primary-weak); color: var(--primary); border-radius: 8px;
padding: 5px 10px; font-size: 12px; font-weight: 500;
}
.gene-detail {
font-size: 13px; color: var(--text-2); line-height: 1.85;
margin: 10px 0 0; padding: 10px 12px; background: var(--bg);
border-radius: 8px; text-align: justify;
}
.gene-articles {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 2px;
}
.gene-articles li {
display: flex; align-items: center; gap: 8px;
padding: 8px 0; border-bottom: 1px solid #F0F1F4;
font-size: 13px; line-height: 1.5;
}
.gene-articles li:last-child { border-bottom: none; }
.gene-articles .rk {
flex: 0 0 18px; height: 18px; border-radius: 50%;
background: var(--primary-weak); color: var(--primary);
font-size: 11px; font-weight: 600; text-align: center; line-height: 18px;
}
.gene-articles a {
flex: 1; color: var(--text); text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gene-articles a:hover { color: var(--primary); }
.gene-articles .meta { flex: 0 0 auto; font-size: 11px; color: var(--text-weak); }
.gene-quote {
border-left: 3px solid var(--primary); background: var(--bg);
padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: 13px;
color: var(--text-2); line-height: 1.6; font-style: italic; margin-top: 8px;
}
.gene-struct { font-size: 13px; color: var(--text-2); line-height: 1.6; }
/* 模仿预览 */
.mimic-preview { margin-top: 10px; display: none; }
.mimic-preview.show { display: block; }
.mimic-preview .mp-card {
background: var(--primary-weak); border-radius: var(--radius-sm); padding: 10px 12px;
font-size: 12px; color: var(--primary); line-height: 1.7;
}
.mimic-preview .mp-card b { color: var(--text); }
.mimic-preview .mp-demo { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--warning); background: #FFF3E9; padding: 2px 8px; border-radius: 6px; }
/* 示例 / 演示 标注 */
.demo-badge {
display: inline-block; font-size: 10px; font-weight: 500;
color: #fff; background: rgba(255,255,255,.28);
border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.gene-demo {
display: inline-block; font-size: 11px; font-weight: 500;
color: var(--warning); background: #FFF3E9;
border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.dec-ai-note.warn {
background: #FFF3E9; color: #C2410C; border: 1px solid #FBD9BE;
}
.dec-ai-note.warn .ai-ic { opacity: 1; }
.dec-ai-note.ok {
background: var(--success-weak); color: var(--success); border: 1px solid #BBF7D0;
}
.dec-ai-note.ok .ai-ic { opacity: 1; }
.dec-ai-note code {
background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 4px;
font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ===== AI 分析 loading 态 ===== */
.dec-loading {
text-align: center; padding: 64px 24px; color: var(--text-2);
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.dec-loading .spinner {
width: 48px; height: 48px; border-radius: 50%;
border: 3px solid var(--primary-weak);
border-top-color: var(--primary);
animation: dec-spin .9s linear infinite;
}
.dec-loading .b { font-size: 16px; font-weight: 600; color: var(--text); }
.dec-loading .h { font-size: 13px; opacity: .65; line-height: 1.6; max-width: 320px; }
@keyframes dec-spin { to { transform: rotate(360deg); } }
/* AI 推断徽标（来自 /api/decompose） */
.gene-ai {
display: inline-block; background: var(--primary-weak); color: var(--primary);
font-size: 11px; font-weight: 500;
padding: 2px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle;
}
.gene-ai.ok { background: var(--success-weak); color: var(--success); }
/* 自定义拆解：链接提示 + 最近搜索历史 */
.dec-custom-hint {
margin-top: 8px; font-size: 11px; color: var(--text-weak); line-height: 1.5;
}
#decCustomText { margin-top: 12px; line-height: 1.7; font-family: var(--font-cjk); }
.dec-history { margin-top: 12px; }
.dec-history:empty { display: none; }
.dec-hist-head {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; color: var(--text-weak); margin-bottom: 8px;
}
.dec-hist-clear {
border: none; background: none; color: var(--primary);
font-size: 12px; cursor: pointer; padding: 0;
}
.dec-hist-clear:hover { text-decoration: underline; }
.dec-hist-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dec-hist-chip {
display: inline-flex; align-items: center; gap: 4px;
max-width: 100%; box-sizing: border-box;
background: var(--bg); border: 1px solid #ECEEF2;
border-radius: 999px; padding: 6px 12px;
font-size: 12px; color: var(--text-2); cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background .15s, border-color .15s, color .15s;
}
.dec-hist-chip:hover { background: var(--primary-weak); border-color: #D9DCFF; color: var(--primary); }
/* ====== 博主阅读 + 粘贴阶段（铁律入口 2026-08-12） ====== */
.dec-progress {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; margin: 0 0 12px;
background: linear-gradient(90deg, #FFF7E6, #FFF1F0);
border: 1px solid #FFE0B2; border-radius: 10px;
font-size: 13px; color: #8B5A00;
}
.dec-progress b { color: #D4380D; font-size: 14px; font-weight: 700; }
.dec-cat-tag { font-size: 11px; padding: 2px 8px; background: rgba(139,90,0,.1); border-radius: 999px; }
.dec-reading { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.dec-art {
background: var(--card); border: 1px solid #ECEEF2; border-radius: 12px;
padding: 12px; transition: border-color .15s, background .15s;
cursor: pointer;
}
.dec-art:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(45, 108, 223, .14); }
.dec-art.has-text { border-color: #52C41A; background: linear-gradient(180deg, #F6FFED, #FFFFFF); cursor: default; }
.dec-art-h {
display: flex; align-items: center; gap: 6px;
margin-bottom: 8px;
}
/* 序号大圆 + 标题大字号深色字，独占第一行显眼显示 */
.dec-art-h .rk {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.dec-art-num-title {
display: inline-flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0;
}
.dec-art-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #18191C !important;
text-decoration: none;
border-bottom: 1px dashed transparent;
line-height: 1.5 !important;
word-break: break-word;
white-space: normal;
display: inline;
}
.dec-art-title:hover { color: var(--primary) !important; border-bottom-color: var(--primary); }
/* 标签独占第二行，避免挤掉标题 */
.dec-art-tags {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-bottom: 4px;
}
.dec-art-src { font-size: 11px; padding: 1px 6px; background: #F0F2F5; border-radius: 4px; color: var(--text-2); flex-shrink: 0; }
.dec-link-warn { font-size: 10px; padding: 1px 6px; background: #FFF7E6; color: #D46B08; border-radius: 4px; border: 1px solid #FFE7BA; }
.dec-link-ok { font-size: 10px; padding: 1px 6px; background: #F6FFED; color: #389E0D; border-radius: 4px; border: 1px solid #B7EB8F; }
.dec-art-text {
width: 100%; min-height: 70px; max-height: 200px; resize: vertical;
padding: 10px 12px; border: 1px solid #E8EAEF; border-radius: 8px;
font-size: 13px; line-height: 1.6; color: var(--text-1); background: #FAFAFB;
font-family: inherit; box-sizing: border-box;
transition: border-color .15s;
}
.dec-art-text:focus { outline: none; border-color: var(--primary); background: #fff; }
.dec-art-text::placeholder { color: #B8BAC2; font-size: 12px; }
.dec-art-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 6px; font-size: 11px; color: var(--text-3);
}
.dec-art-count { font-weight: 600; color: var(--text-2); }
.dec-art.has-text .dec-art-count { color: #389E0D; }
.dec-art-tip { opacity: .7; }
.dec-actions-2 { display: flex; gap: 10px; margin-top: 8px; }
.dec-actions-2 .btn { flex: 1; }
.dec-actions-2 .btn:disabled { background: #E8EAEF !important; color: #999 !important; cursor: not-allowed; box-shadow: none !important; }
.dec-actions-2 #decOpenHomeBtn { flex: 0 0 auto; padding: 0 14px; }
.dec-actions-3 { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.dec-actions-3 .btn { flex: 1 1 30%; min-width: 0; }
.dec-actions-3 .btn:disabled { background: #E8EAEF !important; color: #999 !important; cursor: not-allowed; box-shadow: none !important; }
.dec-actions-3 #decAutoFetchBtn { flex: 1 1 100%; background: linear-gradient(135deg, #2D6CDF, #1E5BD0); }
.dec-actions-3 #decAutoFetchBtn:not(:disabled):hover { background: linear-gradient(135deg, #2563EB, #174BB8); }
.dec-actions-3 #decOpenHomeBtn { flex: 0 0 auto; padding: 0 14px; }
/* AI 自动读状态徽标（每张代表作卡右上） */
.dec-art-status {
font-size: 10px;
padding: 1px 6px;
background: #F0F2F5;
color: var(--text-2);
border-radius: 4px;
white-space: nowrap;
font-weight: 500;
}
.dec-art-status.dec-status-running { background: #E6F4FF; color: #0958D9; border: 1px solid #91CAFF; }
.dec-art-status.dec-status-ok { background: #F6FFED; color: #389E0D; border: 1px solid #B7EB8F; }
.dec-art-status.dec-status-fail { background: #FFF7E6; color: #D46B08; border: 1px solid #FFD591; }
.dec-art-status.dec-status-skip { background: #F5F5F5; color: #8C8C8C; border: 1px solid #D9D9D9; }
.dec-art-status.dec-status-idle { background: #F0F2F5; color: var(--text-2); }
/* v3 占位卡：当博主没 seed 真实文章 URL 时的"让你粘一个 URL"的卡 */
.dec-art.placeholder { border-style: dashed; border-color: #D9D9D9; background: #FAFAFA; }
.dec-art.placeholder:hover { border-color: var(--primary); box-shadow: none; }
.dec-art.placeholder .dec-art-title.muted { color: #8C8C8C; font-style: italic; }
.dec-art-input-row { display: flex; gap: 8px; margin: 8px 0; }
.dec-art-url-input {
flex: 1; padding: 9px 10px; border: 1px solid #D9D9D9; border-radius: 6px;
font-size: 13px; outline: none; transition: border-color .15s;
background: #fff; min-width: 0;
}
.dec-art-url-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,95,255,.12); }
.dec-art-url-input::placeholder { color: #B8BAC2; font-size: 12px; }
.dec-art-auto-btn { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }
.dec-auto-state { color: var(--text-2); font-weight: 500; }
/* 已粘贴正文预览 */
.gene-pasted-text { color: var(--text-2); font-size: 13px; line-height: 1.4; word-break: break-all; }
/* === 博主拆解 v3 — 动态文章添加模式（不再 hardcode 5 张卡） === */
.dec-reading-hint {
margin: 14px 0 10px;
padding: 12px 14px;
background: #F6F8FF;
border-radius: 8px;
font-size: 13px;
color: var(--text-2);
line-height: 1.6;
}
.dec-reading-hint b { color: var(--text-1); font-weight: 600; }
/* 🔴 自动读被拦（微信反爬）提示条 — 填链接但没读到正文时引导手动粘贴 */
.dec-block-banner {
margin: 12px 0 10px;
padding: 12px 14px;
border: 1px solid rgba(245, 108, 44, .45);
background: #FFF6EE;
border-radius: 8px;
font-size: 13px;
color: #7A4A1F;
line-height: 1.65;
}
.dec-block-banner b { color: #C2410C; display: block; margin-bottom: 4px; font-size: 13.5px; }
.dec-block-banner ol { margin: 6px 0 4px; padding-left: 18px; }
.dec-block-banner em { font-style: normal; opacity: .85; font-size: 12px; }
.dec-block-banner.warn {
border-color: rgba(217, 119, 6, .45);
background: #FFFDF3;
color: #7A5B1F;
}
.dec-block-banner.warn b { color: #B45309; }
.dec-list-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 12px 0 8px;
font-size: 12px;
color: var(--text-2);
gap: 12px;
}
.dec-list-head b { color: var(--text-1); font-size: 16px; font-weight: 700; }
.dec-list-head .muted { opacity: .7; }
.dec-articles-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.dec-article-card .dec-art-h { gap: 10px; flex-wrap: wrap; }
.dec-article-card .dec-art-title-input {
flex: 1 1 200px;
min-width: 0;
}
.dec-article-card .art-meta-input {
flex: 1 1 220px;
min-width: 0;
padding: 9px 10px;
border: 1px solid #D9D9D9;
border-radius: 6px;
font-size: 13px;
outline: none;
transition: border-color .15s;
background: #fff;
}
.dec-article-card .art-meta-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(99, 95, 255, .12);
}
.dec-article-card .art-meta-input::placeholder { color: #B8BAC2; font-size: 12px; }
.dec-article-card .dec-art-del {
flex: 0 0 auto;
background: transparent;
border: 1px dashed #FFCCC7;
color: #D4380D;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: all .15s;
}
.dec-article-card .dec-art-del:hover { background: #FFF1F0; border-color: #FFA39E; }
.dec-article-card .art-meta-row {
display: flex;
gap: 8px;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
}
.dec-article-card .dec-art-url-input { flex: 1 1 220px; }
.dec-article-card .dec-art-auto-btn { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
.dec-article-card .dec-art-status { flex: 0 0 auto; }
/* ★ v23: 自定义批量拆解预填 URL 显示行 */
.dec-article-card .dec-art-prefill-row {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0 0;
padding: 6px 10px;
background: #F2F6FE;
border: 1px solid #C7D7F5;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
overflow: hidden;
}
.dec-article-card .dec-art-prefill-lbl {
flex: 0 0 auto;
color: #2D6CDF;
font-weight: 600;
letter-spacing: 0.5px;
}
.dec-article-card .dec-art-prefill-url {
flex: 1 1 auto;
color: #2D6CDF;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
border-bottom: 1px dashed transparent;
transition: border-color .15s;
min-width: 0;
}
.dec-article-card .dec-art-prefill-url:hover {
border-bottom-color: #2D6CDF;
}
.dec-article-card .dec-art-prefill-url .ext {
font-size: 10px;
margin-left: 2px;
opacity: .7;
}
.dec-add-row { margin: 14px 0 8px; }
.dec-add-btn {
width: 100%;
border: 2px dashed #C5C9D6;
padding: 14px;
background: #FBFBFE;
color: var(--primary);
font-weight: 600;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
transition: all .15s;
}
.dec-add-btn:hover { background: #EBF0FC; border-color: var(--primary); border-style: dashed; }
.dec-add-btn:active { transform: translateY(1px); }
.dec-actions.dec-actions-1 { display: flex; }
.dec-actions.dec-actions-1 .btn { flex: 1; padding: 14px; font-size: 15px; }
.dec-actions.dec-actions-1 .btn:disabled {
background: #E8EAEF !important;
color: #999 !important;
cursor: not-allowed;
box-shadow: none !important;
}
/* === v22 用户自添文章面板 === */
.ua-wrap { display:flex; flex-direction:column; gap:12px; }
.ua-intro { background:linear-gradient(135deg,#F0F7FF,#E8F0FE); border:1px solid #DCE7F7; border-radius:12px; padding:12px 14px; }
.ua-intro-t { font-size:15px; font-weight:600; color:#1F2937; margin-bottom:4px; }
.ua-intro-s { font-size:12px; line-height:1.7; color:#4B5563; }
.ua-intro-s b { color:#1F2937; }
.ua-list { display:flex; flex-direction:column; gap:10px; }
.ua-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.ua-card-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ua-card-no { font-size:12px; color:#6B7280; background:#F3F4F6; padding:2px 8px; border-radius:10px; font-weight:500; }
.ua-card-del { width:24px; height:24px; line-height:22px; text-align:center; border-radius:50%; background:#FEE2E2; color:#DC2626; cursor:pointer; font-size:18px; font-weight:600; }
.ua-card-del:hover { background:#FECACA; }
.ua-field { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.ua-field span { font-size:12px; color:#6B7280; font-weight:500; }
.ua-field span em { color:#9CA3AF; font-style:normal; font-weight:400; margin-left:4px; }
.ua-field input, .ua-field select { width:100%; padding:8px 10px; border:1px solid #D1D5DB; border-radius:8px; font-size:13px; background:#fff; color:#1F2937; box-sizing:border-box; }
.ua-field input:focus, .ua-field select:focus { outline:none; border-color:#2D6CDF; box-shadow:0 0 0 3px rgba(45,108,223,.14); }
.ua-url-tip { display:inline-flex; align-items:center; gap:5px; font-size:11px; line-height:1.45; min-height:20px; padding:3px 10px; border-radius:999px; margin-top:5px; }
.ua-url-tip.ok { background: var(--success-weak); color: var(--success); }
.ua-url-tip.err { background: var(--danger-weak); color: var(--danger); }
.ua-url-tip .ua-tip-ico { width:13px; height:13px; flex:none; }
.ua-add { width:100%; padding:10px; background:#F9FAFB; border:1px dashed #9CA3AF; border-radius:10px; color:#6B7280; font-size:13px; cursor:pointer; transition:all .15s; }
.ua-add:hover { background:#F3F4F6; border-color:#6B7280; color:#374151; }
.ua-start { width:100%; padding:12px; background:linear-gradient(135deg,#2D6CDF,#1E5BD0); border:none; border-radius:12px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(45,108,223,.25); transition:all .15s; }
.ua-start:hover:not(:disabled) { background:linear-gradient(135deg,#2563EB,#174BB8); transform:translateY(-1px); box-shadow:0 4px 10px rgba(45,108,223,.35); }
.ua-start:disabled { background:#D1D5DB; cursor:not-allowed; box-shadow:none; }
.ua-clear { align-self:center; background:transparent; border:none; color:#9CA3AF; font-size:12px; cursor:pointer; padding:6px 12px; }
.ua-clear:hover { color:#DC2626; }
.ua-foot-hint { font-size:11px; color:#9CA3AF; text-align:center; padding:4px 0 8px; }
/* 🔴 2026-08-12 热门文章双层级布局 */
.dec-grid-article { display:flex; flex-direction:column; gap:14px; }
.sys-rec-head { font-size:13px; font-weight:600; color:var(--text-2); padding:2px 2px 0; }
.ua-divider { display:flex; align-items:center; gap:10px; color:var(--text-weak); font-size:12px; }
.ua-divider::before, .ua-divider::after { content:''; flex:1; height:1px; background:var(--border); }
/* === 2026-08-13 ② 我的收藏（按作者分组 + 合集 AI 总结） === */
.fav-wrap { display:flex; flex-direction:column; gap:14px; padding:14px 0 6px; }
.fav-top { font-size:13px; font-weight:600; color:var(--text-2); padding:0 2px; }
.fav-grp { background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.fav-grp.is-coll { border-color:#C7D7F5; box-shadow:0 2px 10px rgba(45,108,223,.10); }
.fav-grp-hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fav-grp-ico { font-size:16px; }
.fav-grp-name { font-size:15px; font-weight:600; color:#1F2937; }
.fav-grp-cnt { font-size:12px; color:#6B7280; background:#F3F4F6; padding:2px 8px; border-radius:10px; }
.fav-grp-badge { margin-left:auto; font-size:11px; color:#2D6CDF; background:#E8F0FE; border:1px solid #C7D7F5; padding:2px 8px; border-radius:10px; font-weight:600; }
.fav-grp-list { display:flex; flex-direction:column; gap:8px; }
.fav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#FAFBFC; border:1px solid #EEF0F2; border-radius:10px; }
.fav-item-main { flex:1; min-width:0; }
.fav-ttl-row { font-size:13px; line-height:1.4; }
.fav-ttl-link { color:#1F2937; font-weight:500; text-decoration:none; }
.fav-ttl-link:hover { color:#2D6CDF; text-decoration:underline; }
.fav-ttl-link .ext { font-size:11px; opacity:.6; margin-left:2px; }
.fav-ttl { color:#1F2937; font-weight:500; }
.fav-meta { font-size:11px; color:#9CA3AF; margin-top:3px; }
.fav-item-actions { display:flex; align-items:center; gap:8px; flex:none; }
.fav-remove { width:24px; height:24px; line-height:22px; text-align:center; border-radius:50%; background:#FEE2E2; color:#DC2626; border:none; cursor:pointer; font-size:16px; font-weight:600; flex:none; }
.fav-remove:hover { background:#FECACA; }
.fav-coll { margin-top:10px; border-top:1px dashed #E0E7F5; padding-top:10px; }
.fav-coll-btn { width:100%; padding:10px; background:linear-gradient(135deg,#2D6CDF,#1E5BD0); border:none; border-radius:10px; color:#fff; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(45,108,223,.22); }
.fav-coll-btn:hover:not(:disabled) { background:linear-gradient(135deg,#2563EB,#174BB8); }
.fav-coll-btn:disabled { background:#9DB8E8; cursor:default; box-shadow:none; }
.fav-coll-sum { margin-top:10px; font-size:12.5px; line-height:1.7; color:#374151; white-space:pre-wrap; background:#F7F9FE; border:1px solid #E6EDFB; border-radius:10px; padding:10px 12px; }
.fav-coll-loading { color:#2D6CDF; }
.fav-coll-err { color:#DC2626; }
/* 🔴 2026-08-13 ③ 自添 URL 拉真实标题按钮 */
.ua-fetch-title { align-self:flex-start; margin-top:6px; padding:6px 12px; background:#F2F6FE; border:1px solid #C7D7F5; border-radius:8px; color:#2D6CDF; font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; }
.ua-fetch-title:hover:not(:disabled) { background:#E8F0FE; border-color:#2D6CDF; }
.ua-fetch-title:disabled { opacity:.6; cursor:default; }
/* ============================================================
2026-08-13 分段正文（分节卡 / 拆分单句 / AI 检测 / 仿写库）
============================================================ */
.section-list { display: flex; flex-direction: column; gap: 12px; }
.sec-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.sec-card.done { border-color: #CDEBD9; background: #F4FBF7; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sec-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sec-num { flex: none; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; }
.sec-title b { font-size: 14px; color: var(--text); }
.sec-desc { font-size: 12px; color: var(--text-weak); }
.mini-btn { flex: none; padding: 6px 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--text-2); border-radius: 8px; font-size: 12px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.mini-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.mini-btn:disabled { opacity: .5; cursor: not-allowed; }
.sec-gen { background: var(--primary); color: #fff; border-color: var(--primary); }
.sec-gen:hover:not(:disabled) { background: #1E5BD0; color: #fff; }
.sec-input { width: 100%; min-height: 110px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.7; color: var(--text); resize: vertical; outline: none; font-family: inherit; }
.sec-input:focus { border-color: var(--primary); }
.sec-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 分段润色（按语气方向） */
.sec-polish { margin-top: 8px; padding: 8px 10px; background: #F6F7FB; border: 1px dashed #C7CCE0; border-radius: var(--radius-sm); }
.sec-polish-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.polish-preset { display: inline-block; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--text-2); font-size: 11.5px; cursor: pointer; user-select: none; transition: all .12s; line-height: 1.6; }
.polish-preset:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.polish-preset.active { background: #EEF2FF; border-color: var(--primary); color: var(--primary); font-weight: 600; }
.sec-polish-input { display: flex; gap: 6px; align-items: center; }
.polish-tone-input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12.5px; color: var(--text); background: #fff; outline: none; font-family: inherit; }
.polish-tone-input:focus { border-color: var(--primary); }
.polish-tone-input::placeholder { color: var(--text-weak); font-size: 12px; }
.polish-go { padding: 6px 12px; background: var(--primary); color: #fff; border: 1px solid var(--primary); border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 600; transition: all .15s; }
.polish-go:hover:not(:disabled) { background: #1E5BD0; }
.polish-go:disabled { opacity: .6; cursor: not-allowed; }
/* 拆分单句 */
.sent-rows { display: flex; flex-direction: column; gap: 10px; }
.sent-row { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px; }
.sent-input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; line-height: 1.6; color: var(--text); resize: vertical; outline: none; font-family: inherit; }
.sent-input:focus { border-color: var(--primary); }
.sent-btns { display: flex; gap: 6px; margin-top: 6px; }
.sent-score { margin-top: 6px; font-size: 12px; font-weight: 600; }
.sent-score.low { color: var(--success); }
.sent-score.mid { color: var(--warning); }
.sent-score.high { color: var(--danger); }
/* AI 检测（仿朱雀）*/
.ai-ring { position: relative; width: 96px; height: 96px; flex: none; }
.ai-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ai-ring .bg { fill: none; stroke: var(--line); stroke-width: 10; }
.ai-ring .fg { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ai-ring.low .fg { stroke: var(--success); }
.ai-ring.mid .fg { stroke: var(--warning); }
.ai-ring.high .fg { stroke: var(--danger); }
.ai-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: var(--text); }
.ai-ring-num span { font-size: 12px; font-weight: 600; margin-left: 1px; color: var(--text-weak); }
.ai-detect-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ai-detect-meta { min-width: 0; }
.ai-verdict { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ai-verdict.low { color: var(--success); }
.ai-verdict.mid { color: var(--warning); }
.ai-verdict.high { color: var(--danger); }
.ai-sent-list { display: flex; flex-direction: column; gap: 7px; }
.ai-sent { display: flex; align-items: center; gap: 8px; }
.ai-sent-text { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ai-bar-wrap { flex: none; width: 72px; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; }
.ai-bar { height: 100%; border-radius: 6px; transition: width .5s ease; }
.ai-bar.low { background: var(--success); }
.ai-bar.mid { background: var(--warning); }
.ai-bar.high { background: var(--danger); }
.ai-sent-pct { flex: none; width: 38px; text-align: right; font-size: 12px; font-weight: 600; }
.ai-sent-pct.low { color: var(--success); }
.ai-sent-pct.mid { color: var(--warning); }
.ai-sent-pct.high { color: var(--danger); }
/* 仿写库空提示 */
.mimic-lib-empty { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); background: var(--warning-weak); border: 1px solid #FFD9B8; border-radius: var(--radius-sm); padding: 10px 12px; }
.mimic-lib-empty a { color: var(--primary); font-weight: 600; text-decoration: none; }
/* 搜公众号爆款文章（v1.0.18 整合 wechat-search 技能 / 红狐 API） */
.dec-gzh-search { margin: 4px 0 2px; }
.dec-gzh-search .dec-gzh-results { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.dec-gzh-item { background: var(--bg-2, #f6f7f9); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 12px 14px; }
.dec-gzh-title { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text); margin-bottom: 4px; }
.dec-gzh-meta { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.dec-gzh-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dec-loading { font-size: 13px; color: var(--text-2); padding: 8px 2px; line-height: 1.6; }
/* 人物风格卡（v1.0.20 蒸馏写作技能） */
.persona-card { background: linear-gradient(180deg, #fff, #fbfbff); border: 1px solid var(--line); }
.persona-card .pc-score { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.persona-card .pc-score b { color: var(--primary); font-size: 16px; }
.persona-card .pc-sec { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.6; }
.persona-card .pc-lab { flex: 0 0 76px; color: var(--text-2); font-weight: 600; }
.persona-card .pc-val { flex: 1; color: var(--text); }
.persona-card .pc-prompt { flex: 1; background: #f4f4fb; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--text); white-space: pre-wrap; }
.persona-card .pc-forbid { flex: 1; margin: 0; padding-left: 18px; color: var(--text); }
.persona-card .pc-forbid li { margin: 2px 0; }
.persona-card .dec-gzh-actions { margin-top: 12px; }
/* 🔴 v1.0.20.2 红狐 queryUser 模糊匹配警告条（诊断报告屏顶部） */
.mismatch-banner { background: #FEF3C7; border: 1px solid #F59E0B; border-left: 4px solid #D97706; }
.mismatch-banner h3 { font-size: 15px; font-weight: 700; }
.mismatch-banner code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* 🔴 v1.0.20.3 诊断对象身份卡（始终显示账号ID，用于核对是否目标号） */
.report-account .acc-line { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.report-account .acc-k { color: var(--text-weak); font-size: 12px; min-width: 64px; flex: none; }
.report-account .acc-v { font-size: 14px; word-break: break-all; }
.report-account .acc-id { font-size: 13px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,.04); padding: 1px 6px; border-radius: 4px; color: #1F2937; }
/* 🔴 v1.0.20.4 人物风格卡收藏（持久化整张风格卡，含 stylePrompt） */
.fav-grp-persona.is-persona { border-color: #E9D8FD; box-shadow: 0 2px 10px rgba(124,58,237,.10); background: linear-gradient(180deg,#fff,#fbf7ff); }
.fav-persona-card { background: #fff; border: 1px solid #E9D8FD; border-radius: 12px; padding: 12px 14px; }
.fav-persona-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fav-persona-name { font-size: 15px; font-weight: 700; color: #1F2937; }
.fav-persona-meta { font-size: 12px; color: #6B7280; }
.fav-persona-meta b { color: #7C3AED; font-size: 14px; }
.fav-persona-prompt { background: #F4F4FB; border: 1px solid #E9D8FD; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #1F2937; white-space: pre-wrap; max-height: 180px; overflow: auto; line-height: 1.6; }
.fav-persona-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fav-persona-actions .btn { width: auto; white-space: nowrap; }
/* 🔴 v1.0.20.5 热修·免费诊断低置信度警示条（防止 LLM 瞎写"账号不存在"误导用户） */
.fa-head-hint { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.65; margin-bottom: 10px; }
.fa-head-hint.low-conf { background: #FEF2F2; border: 1px solid #FCA5A5; border-left: 4px solid #DC2626; color: #7F1D1D; }
.fa-head-hint.low-conf b { color: #991B1B; }
.fa-head-hint.vlow-conf { background: #FEE2E2; border: 1px solid #DC2626; border-left: 6px solid #991B1B; color: #450A0A; font-weight: 600; box-shadow: 0 2px 8px rgba(220,38,38,.18); }
.fa-head-hint.vlow-conf b { color: #7F1D1D; }
.fa-head-hint.mid-conf { background: #FFFBEB; border: 1px solid #FCD34D; border-left: 4px solid #D97706; color: #78350F; }
.fav-persona-actions .fav-remove { margin-left: auto; }
.btn-ghost.sm.on { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
/* 🧬 深度DNA详情弹窗（2026-08-19 老猫需求：点击卡片看完整5文件 + 右上角编辑） */
.dna-detail-overlay {
position: fixed; inset: 0; z-index: 99999;
background: rgba(15,18,26,.62); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
padding: 16px; box-sizing: border-box;
}
.dna-detail-panel {
width: 100%; max-width: 420px; max-height: 90vh;
background: #fff; border-radius: 18px; overflow: hidden;
box-shadow: 0 18px 50px rgba(0,0,0,.28);
display: flex; flex-direction: column;
}
.dna-detail-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px 12px; border-bottom: 1px solid #E9D8FD;
background: linear-gradient(135deg,#fbf7ff,#fff);
flex-shrink: 0;
}
.dna-detail-hd .dna-detail-title {
font-size: 16px; font-weight: 700; color: #1F2937;
display: flex; align-items: center; gap: 6px;
}
.dna-detail-hd .dna-detail-title small {
font-size: 11px; font-weight: 500; color: #7C3AED;
background: #EEEDFE; padding: 2px 8px; border-radius: 8px;
}
/* 编辑模式下作者名输入框（2026-08-20 老猫要求：作者名可编辑） */
.dna-detail-name-input {
flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: #1F2937;
border: 1.5px solid #7C3AED; border-radius: 8px; padding: 4px 8px;
outline: none; background: #fff;
}
.dna-detail-hd .dna-detail-actions {
display: flex; align-items: center; gap: 6px;
}
.dna-detail-edit-btn, .dna-detail-close-btn {
width: 32px; height: 32px; border: 0; border-radius: 8px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 16px; transition: background .15s;
}
.dna-detail-edit-btn { background: #EEEDFE; color: #7C3AED; }
.dna-detail-edit-btn:hover { background: #DCDAFB; }
.dna-detail-edit-btn.saving { opacity: .6; pointer-events: none; }
.dna-detail-close-btn { background: transparent; color: #9CA3AF; }
.dna-detail-close-btn:hover { background: #F3F4F6; }
.dna-detail-body {
flex: 1; overflow-y: auto; padding: 14px 18px 18px;
}
.dna-detail-tabs {
display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto;
padding-bottom: 4px; flex-shrink: 0;
}
.dna-detail-tab {
flex-shrink: 0; border: 1px solid #E9D8FD; background: #F9F7FF;
border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600;
color: #7C3AED; cursor: pointer; transition: all .15s;
}
.dna-detail-tab.active { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.dna-detail-tab.saved { border-color: #34D399; background: #ECFDF5; color: #065F46; }
.dna-detail-section { display: none; }
.dna-detail-section.active { display: block; }
.dna-detail-section .dna-label {
font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px;
display: flex; align-items: center; gap: 6px;
}
.dna-detail-section .dna-label .dna-char-count {
font-size: 10px; font-weight: 400; color: #9CA3AF; margin-left: auto;
}
.dna-detail-section .dna-content {
background: #F9FAFB; border: 1px solid #E9D8FD; border-radius: 8px;
padding: 10px 12px; font-size: 12.5px; line-height: 1.7; color: #1F2937;
white-space: pre-wrap; max-height: 55vh; overflow-y: auto;
}
.dna-detail-section .dna-content.edit-mode {
display: none;
}
.dna-detail-section .dna-textarea {
display: none; width: 100%; min-height: 200px; max-height: 55vh;
border: 1px solid #7C3AED; border-radius: 8px; padding: 10px 12px;
font-size: 12.5px; line-height: 1.7; font-family: inherit;
color: #1F2937; resize: vertical; outline: none; box-sizing: border-box;
}
.dna-detail-section .dna-textarea.edit-mode { display: block; }
.dna-detail-footer {
padding: 12px 18px 16px; border-top: 1px solid #F3F4F6;
display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}
.dna-detail-footer .btn { width: auto; }
.dna-detail-meta {
font-size: 11px; color: #9CA3AF; padding: 0 18px 8px;
display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.dna-detail-meta span { display: flex; align-items: center; gap: 4px; }
/* 🔴 v1.0.20.5 双诊断模式切换（默认免费联网诊断） */
.seg { display: flex; gap: 6px; background: #F3F4F6; border-radius: 12px; padding: 4px; }
.seg-btn { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 9px 6px; font-size: 13px; font-weight: 600; color: #6B7280; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all .15s; }
.seg-btn small { font-size: 10px; font-weight: 500; opacity: .8; }
.seg-btn.active { background: #fff; color: #1F2937; box-shadow: 0 1px 4px rgba(0,0,0,.10); }
.seg-btn.active[data-mode="free"] { color: #047857; }
.seg-btn.active[data-mode="redfox"] { color: #B45309; }
/* 报告屏顶部诊断方式徽章 */
.report-modebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: #F9FAFB; border: 1px solid var(--line); }
.report-modebar .mb-tag { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.report-modebar .mb-tag.free { background: #ECFDF5; color: #047857; }
.report-modebar .mb-tag.redfox { background: #FFFBEB; color: #B45309; }
.report-modebar .mb-note { font-size: 12px; color: var(--text-weak); }
/* 免费模式 AI 分析文本块 */
.free-analysis { font-size: 13.5px; line-height: 1.75; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
/* 公众号排版预览：兜底 emoji/symbols 字体，避免 ◆ ◇ ● ○ 等几何符号显示为方块 */
.wechat-format-preview {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI Symbol", "Segoe UI Emoji",
"Apple Symbols", "Noto Sans Symbols2", "Apple Color Emoji", sans-serif;
font-size: 15px; line-height: 1.85; color: #333; word-break: break-word;
}
.wechat-format-preview p { margin: 0 0 12px; }
.wechat-format-preview h1, .wechat-format-preview h2, .wechat-format-preview h3 { color: #2A2A2A; }
.wechat-format-preview img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
.wechat-format-preview blockquote { margin: 12px 0; padding: 8px 14px; border-left: 4px solid #C9CDD4; background: rgba(0,0,0,0.02); color: #555; }
.wechat-format-preview pre, .wechat-format-preview code { font-family: Menlo, Consolas, monospace; }