/* 公众号文章 AI 编辑器 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* 统一描边：主描边几乎不可见，用于降噪；强调描边略深，用于分隔 */
  --line: #eef0f2;
  --line-strong: #e8ebee;
  --radius: 10px;
  --radius-lg: 12px;
}
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f2f4f7;
  color: #1f2329;
  min-height: 100vh;
}
.hidden { display: none !important; }

.app { max-width: 1320px; margin: 0 auto; padding: 16px 16px 80px; }

/* 两栏布局：左手机预览 + 右编辑器 */
.layout { display: flex; gap: 24px; align-items: flex-start; }
.editor-col { flex: 1; min-width: 0; max-width: 860px; margin: 0 auto; }
.phone-col { width: fit-content; flex-shrink: 0; position: sticky; top: 16px; max-width: calc(var(--dev-w, 390px) + 24px); }
@media (max-width: 1180px) { .phone-col { display: none; } }
.phone {
  /* 只包裹白屏本身：父列被下方文字撑宽时，右边不会再露出一截黑色边框 */
  width: fit-content; margin: 0 auto;
  background: #1f2329; border-radius: 36px; padding: 10px;
  box-shadow: 0 12px 32px rgba(31, 35, 41, .22);
}
.phone-screen {
  /* 精确等于手机逻辑宽度（由 --dev-w 控制，默认 390 = iPhone 12~15） */
  width: var(--dev-w, 390px);
  background: #fff; border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column;
  /* 高度自适应视口：窗口矮时自动收缩，避免 sticky 预览比屏幕还高 */
  height: min(660px, calc(100vh - 250px)); min-height: 420px;
}
.pv-nav {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #f0f1f3; background: #fff;
  font-size: 14px; color: #1f2329;
}
.pv-back { font-size: 22px; line-height: 1; color: #1f2329; padding: 0 6px; }
.pv-nav-title { font-weight: 500; }
.pv-dots { letter-spacing: 1px; color: #1f2329; padding: 0 6px; }
.pv-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
/* 以下头部/正文样式对齐 mp.weixin.qq.com 文章页实测值 */
.phone-screen { font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; }
.wx-title { font-size: 22px; line-height: 1.4; font-weight: 700; color: #000; padding: 24px 17px 0; margin: 0; word-break: break-word; }
.wx-account { font-size: 17px; color: #333; padding: 12px 17px 0; }
.wx-date { font-size: 15px; color: #b2b2b2; padding: 4px 17px 0; }
.pv-edit { outline: none; border-radius: 6px; }
.pv-edit:focus { background: #f3fcf7; box-shadow: 0 0 0 1px #07c160 inset; }
/* 公众号正文默认样式（对齐微信 #js_content）：17px / 1.75 / 字距 0.034em / 左右 17px 边距 */
.pv-article {
  padding: 21px 17px 48px; font-size: 17px; line-height: 1.75;
  letter-spacing: 0.034em; color: #333; word-break: break-word;
}
.pv-article img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
.pv-article hr { border: none; border-top: 1px solid #ddd; margin: 12px 0; }
.pv-article .pv-empty { min-height: 1em; }
.pv-article [data-bid] { border-radius: 4px; transition: background .15s, box-shadow .15s; scroll-margin: 12px; }
.pv-article [data-bid].pv-sel { background: #f0fbf5; box-shadow: 0 0 0 1px #07c160 inset; }
.pv-article [data-bid].pv-flash { animation: pvflash 1s ease; }
@keyframes pvflash { 0% { background: #fff3cf; } 100% { background: transparent; } }
.phone-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dev-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.dev-btns .btn.active { background: #07c160; border-color: #07c160; color: #fff; }
.dev-name { width: 100%; text-align: center; font-size: 11px; color: #8f959e; margin-top: 0; line-height: 1.4; }
.phone-tip { text-align: center; font-size: 11px; color: #8f959e; margin-top: 4px; }

/* 顶栏 */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 16px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.logo {
  width: 30px; height: 30px; border-radius: 8px; background: #07c160; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.badge {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: #e8ebee; color: #646a73;
}
.badge.ok { background: #e3f7ec; color: #07a256; }
.badge.err { background: #feeceb; color: #d83931; }

/* 面板 */
.panel {
  background: #fff; border-radius: var(--radius-lg); padding: 18px;
  box-shadow: 0 1px 3px rgba(31, 35, 41, .05); margin-bottom: 14px;
}
.panel-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #1f2329; }
.panel-title .step {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
  background: #07c160; color: #fff; font-size: 12px; font-weight: 600;
  align-items: center; justify-content: center; margin-right: 6px;
}

/* 粘贴区 */
.paste-zone {
  border: 2px dashed #d5d9de; border-radius: var(--radius); min-height: 170px;
  display: flex; align-items: center; justify-content: center;
  background: #fafbfc; outline: none; transition: border-color .15s;
}
.paste-zone:focus { border-color: #07c160; background: #f3fcf7; }
.paste-zone.dragover { border-color: #07c160; }
.paste-hint { text-align: center; color: #646a73; padding: 20px; }
.hint-icon { font-size: 30px; margin-bottom: 8px; }
.paste-hint .sub { font-size: 12px; margin-top: 6px; color: #8f959e; }
.paste-actions { display: flex; gap: 10px; margin-top: 12px; }

/* 按钮 */
.btn {
  border: 1px solid #c9cdd4; background: #fff; color: #1f2329;
  border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer;
  transition: all .12s;
}
.btn:hover { border-color: #07c160; color: #07a256; }
.btn.primary { background: #07c160; border-color: #07c160; color: #fff; }
.btn.primary:hover { background: #06ad56; }
.btn.primary:disabled { background: #a5dbbd; border-color: #a5dbbd; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.mini { padding: 4px 10px; font-size: 12px; }
/* 文字按钮：次要操作（全选/只选文字/全不选）降级，弱化存在感 */
.btn.text { border-color: transparent; background: transparent; color: #646a73; }
.btn.text:hover { background: #f0f1f3; color: #1f2329; border-color: transparent; }
.btn.big { padding: 9px 20px; font-size: 14px; font-weight: 600; }

/* 工具栏 */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
/* 顶部工具栏：两行分组（避免一行塞太多控件），并吸顶固定，下方块列表自行滚动 */
.toolbar.stack {
  flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
  position: sticky; top: 0; z-index: 20;
  /* 用负 margin 顶到面板左右边缘，加毛玻璃背景，滚动时块列表从下方穿过不穿透 */
  margin: 0 -18px; padding: 0 18px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.toolbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.toolbar-row + .toolbar-row { border-top: 1px solid var(--line); }
.tool-sep { width: 1px; height: 16px; background: var(--line-strong); flex-shrink: 0; }
.toolbar.bottom {
  /* 吸底操作栏：内容没滚到底之前，始终悬浮在视口底部，随时可以复制全文 */
  position: sticky; bottom: 0; z-index: 10;
  margin: 12px -18px -18px; padding: 12px 18px 14px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid #e8ebee;
  box-shadow: 0 -4px 12px rgba(31, 35, 41, .05);
}
.tool-group { display: flex; align-items: center; gap: 8px; }
.tool-group.grow { flex: 1; }
.tool-label { font-size: 12px; color: #8f959e; }
.sel-count { font-size: 12px; color: #07a256; font-weight: 600; }
select, input[type="text"] {
  border: 1px solid #c9cdd4; border-radius: 8px; padding: 6px 10px;
  font-size: 13px; background: #fff; color: #1f2329;
}
#rewriteStyle { max-width: 190px; }
.custom-instr { flex: 1; min-width: 220px; }
.embed-toggle { font-size: 12px; color: #646a73; display: flex; align-items: center; gap: 6px; }

.stats { font-size: 12px; color: #8f959e; padding: 4px 0 10px; border-bottom: 1px solid var(--line); }

/* 块列表 */
.block-list { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.blk-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.blk-card.selected { border-color: #07c160; box-shadow: 0 0 0 1px #07c160 inset; }
.blk-card.loading { opacity: .55; pointer-events: none; }
.blk-card.error { border-color: #d83931; }

.blk-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fafbfc; }
.blk-head input[type="checkbox"] { accent-color: #07c160; width: 15px; height: 15px; cursor: pointer; }
.blk-grip { cursor: grab; color: #b0b6bf; font-size: 13px; user-select: none; }
.blk-grip:active { cursor: grabbing; }
.blk-no { font-size: 11px; color: #b0b6bf; font-variant-numeric: tabular-nums; }
.blk-words { font-size: 11px; color: #8f959e; }
.blk-card.drop-hint { box-shadow: 0 -3px 0 -1px #07c160; }
.blk-type {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: #e8ebee; color: #4e5969; font-weight: 500;
}
.blk-type.img { background: #e8f0ff; color: #165dff; }
.blk-type.hr { background: #f0e8ff; color: #7b61ff; }
.blk-type.empty { background: #fff3e0; color: #d97706; }
.blk-head .grow { flex: 1; }
.blk-act { display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity .12s; }
.blk-card:hover .blk-act, .blk-card:focus-within .blk-act { opacity: 1; }
.blk-act button {
  border: none; background: transparent; color: #8f959e; font-size: 12px;
  cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
.blk-act button:hover { background: #e8ebee; color: #1f2329; }
.blk-act .up-btn { font-size: 12px; color: #8f959e; cursor: pointer; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.blk-act .up-btn:hover { background: #e8ebee; color: #1f2329; }

/* 块间插入条 */
.blk-gap { height: 18px; margin: -8px 0; display: flex; align-items: center; justify-content: center; position: relative; }
.blk-gap button {
  opacity: 0; border: none; background: #e3f7ec; color: #07a256; border-radius: 999px;
  font-size: 11px; padding: 3px 12px; cursor: pointer; transition: opacity .12s;
}
.blk-gap:hover button { opacity: 1; }
.blk-addend { text-align: center; padding-top: 10px; }

/* 改写失败条 */
.blk-rw-err {
  font-size: 12px; color: #d83931; background: #fef5f5; padding: 8px 14px;
  display: flex; gap: 10px; align-items: center; border-top: 1px solid #fbd5d2;
}

.blk-body { padding: 12px 14px; }
.blk-preview {
  font-size: 15px; line-height: 1.75; outline: none; word-break: break-word;
  min-height: 22px; white-space: pre-wrap;
}
.blk-preview:focus { background: #f3fcf7; border-radius: 6px; box-shadow: 0 0 0 1px #07c160 inset; }
.blk-preview:empty::before { content: "空行（可直接编辑或删除）"; color: #c9cdd4; font-size: 12px; }
.blk-preview img { max-width: 100%; }

.blk-preview.hr-line { border: none; border-top: 1px solid #d0d3d9; height: 0; margin: 6px 0; }
.img-wrap img { max-width: 100%; border-radius: 6px; display: block; }
.img-wrap { position: relative; }
.img-wrap.editing::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px;
  border-radius: 50%; border: 3px solid rgba(7, 193, 96, .25); border-top-color: #07c160;
  animation: spin .8s linear infinite; box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .5);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 文字改写前后对比 */
.cmp-cols { display: flex; gap: 10px; }
.cmp-col { flex: 1; min-width: 0; border: 1px solid #e8ebee; border-radius: 8px; padding: 10px; }
.cmp-tag { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.cmp-tag.old { color: #8f959e; }
.cmp-tag.new { color: #07a256; }
.pv-static { font-size: 14px; line-height: 1.7; word-break: break-word; }
.pv-static img { max-width: 100%; }
.cmp-ops { margin-top: 8px; display: flex; gap: 8px; }
.img-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.img-tools input[type="text"] { flex: 1; min-width: 180px; }
.img-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.img-presets button {
  border: 1px solid #e8ebee; background: #fafbfc; border-radius: 999px;
  font-size: 11px; color: #4e5969; padding: 2px 9px; cursor: pointer;
}
.img-presets button:hover { border-color: #07c160; color: #07a256; }
.img-note { font-size: 11px; color: #8f959e; margin-top: 6px; }
.img-note.newimg { color: #07a256; }

/* AI 痕迹检测（反朱雀） */
.trace-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #e8ebee; margin-bottom: 12px; }
.trace-empty { font-size: 13px; color: #8f959e; padding: 28px 0; text-align: center; }
.trace-score { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 10px; background: #f7f8fa; margin-bottom: 12px; }
.trace-score .num { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 62px; text-align: center; }
.trace-score .num.high { color: #d83931; }
.trace-score .num.mid { color: #d97706; }
.trace-score .num.low { color: #07a256; }
.trace-score .meta { font-size: 12px; color: #646a73; line-height: 1.8; }
.trace-cmp { color: #07a256; font-weight: 600; margin-left: 6px; }
.trace-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trace-table th, .trace-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
.trace-table th { color: #8f959e; font-weight: 500; }
.trace-table .trace-num { font-variant-numeric: tabular-nums; }
.trace-table .trace-detail { color: #8f959e; }
.trace-lamp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.trace-lamp.high { background: #d83931; }
.trace-lamp.mid { background: #d97706; }
.trace-lamp.low { background: #07a256; }
.trace-sub { font-size: 12px; font-weight: 600; color: #1f2329; margin: 14px 0 4px; }
.trace-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trace-chip { font-size: 11px; background: #fef5f5; color: #d83931; border-radius: 999px; padding: 2px 9px; }
.trace-chip.gray { background: #f0f1f3; color: #4e5969; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(31, 35, 41, .4);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: #fff; border-radius: 12px; width: 520px; max-width: 92vw;
  max-height: 88vh; overflow: auto; padding: 20px;
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.cfg-section { font-size: 13px; font-weight: 600; color: #07a256; margin: 14px 0 8px; }
.cfg-section:first-child { margin-top: 0; }
.cfg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cfg-row label { width: 72px; font-size: 12px; color: #646a73; flex-shrink: 0; }
.cfg-row input { flex: 1; }
.masked { font-size: 11px; color: #8f959e; white-space: nowrap; }
.cfg-hint { font-size: 11px; color: #8f959e; line-height: 1.6; margin: 2px 0 6px 80px; }
.cfg-row .mini-inp { max-width: 84px; flex: 0 0 auto; }
.test-result { font-size: 12px; margin-left: 6px; }
.test-result.ok { color: #07a256; }
.test-result.err { color: #d83931; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* 手机真机预览弹窗 */
.mp-tip { font-size: 13px; color: #646a73; line-height: 1.7; margin-bottom: 10px; }
.mp-url {
  font-size: 15px; font-weight: 600; color: #07a256; background: #f3fcf7;
  border: 1px dashed #07c160; border-radius: 8px; padding: 10px 12px;
  word-break: break-all; margin-bottom: 10px; user-select: all;
}

/* 图片 before/after 对比弹窗 */
.modal-wide { width: 680px; }
.cmp-box { position: relative; overflow: hidden; background: #f7f8fa; border-radius: 8px; }
.cmp-box img { display: block; width: 100%; }
.cmp-top { position: absolute; top: 0; left: 0; height: 100%; object-fit: fill; clip-path: inset(0 50% 0 0); }
#cmpRange { width: 100%; margin-top: 12px; accent-color: #07c160; }

/* toast */
.toast-wrap { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1f2329; color: #fff; font-size: 13px; padding: 10px 18px;
  border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.2);
  animation: fadein .18s ease; max-width: 560px;
  display: flex; align-items: center; gap: 12px;
}
.toast-action {
  border: none; background: rgba(255, 255, 255, .18); color: #fff; border-radius: 6px;
  padding: 3px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.toast-action:hover { background: rgba(255, 255, 255, .32); }
.toast.ok { background: #07a256; }
.toast.err { background: #d83931; }
@keyframes fadein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 朱雀AI检测报告单 ---------- */
.zq-report { font-size: 14px; line-height: 1.6; }
.zq-report-title { font-size: 18px; font-weight: 700; color: #1f2329; margin-bottom: 4px; }
.zq-report-time { font-size: 12px; color: #999; margin-bottom: 16px; }
.zq-result-row { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.zq-pie-wrap { display: flex; align-items: center; gap: 16px; }
.zq-pie { width: 100px; height: 100px; border-radius: 50%; position: relative; flex-shrink: 0; }
.zq-pie-inner { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; border-radius: 50%; background: #fff; }
.zq-pie-legend { font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 6px; }
.zq-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.zq-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.zq-metric { display: flex; flex-direction: column; }
.zq-metric-label { font-size: 11px; color: #999; }
.zq-metric-val { font-size: 16px; font-weight: 700; color: #333; }
.zq-section-title { font-size: 15px; font-weight: 600; color: #1f2329; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.zq-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.zq-table th { background: #f7f8fa; color: #666; font-weight: 500; padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; }
.zq-table td { padding: 7px 10px; border-bottom: 1px solid #f3f3f3; }
.zq-segment { border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.zq-seg-head { font-size: 13px; color: #555; margin-bottom: 8px; }
.zq-seg-text { font-size: 13px; color: #333; line-height: 1.7; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }