:root {
  --bg:#f4f5fb; --card:#ffffff; --line:#e5e8f2; --txt:#26303f; --sub:#71809a;
  --pri:#6c5ce7; --pri-d:#5a4bd6; --amber:#f7b731; --green:#27ae60; --red:#eb5757;
  --blue:#2f80ed; --purple:#9b51e0; --gray:#90a0b5; --radius:12px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--txt);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif; font-size:14px; }
a { color:var(--pri); }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; font-size:13px; color:var(--txt);
  border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:#fff; }
input:focus,select:focus,textarea:focus { outline:2px solid #c9c2f5; border-color:var(--pri); }
textarea { resize:vertical; line-height:1.6; }
::placeholder { color:#aab4c6; }

/* ---------- 顶部与导航 ---------- */
.topbar { display:flex; align-items:center; gap:14px; padding:10px 22px; background:#2b2440; color:#fff;
  position:sticky; top:0; z-index:30; box-shadow:0 2px 10px rgba(20,16,60,.25); }
.brand { font-weight:700; font-size:17px; letter-spacing:.5px; }
.brand small { font-weight:400; opacity:.7; margin-left:8px; font-size:12px; }
.nav { display:flex; gap:6px; margin-left:18px; }
.nav button { border:0; background:transparent; color:#cfc7f0; padding:7px 13px; border-radius:8px; font-size:14px; }
.nav button:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav button.on { background:var(--pri); color:#fff; }
.top-right { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:#cfc7f0; }
.health-dot { width:9px; height:9px; border-radius:50%; display:inline-block; background:#ffcc66; }
.health-dot.ok { background:#4cd37f; }
.health-dot.bad { background:#ff6b6b; }

/* ---------- 布局 ---------- */
.page { padding:18px 22px 60px; max-width:1280px; margin:0 auto; }
.page h2 { margin:4px 0 14px; font-size:20px; }
.muted { color:var(--sub); font-size:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.toolbar .sp { flex:1; }
.btn { border:1px solid var(--line); background:#fff; padding:7px 14px; border-radius:9px; color:var(--txt); }
.btn:hover { border-color:var(--pri); color:var(--pri); }
.btn.primary { background:var(--pri); border-color:var(--pri); color:#fff; }
.btn.primary:hover { background:var(--pri-d); color:#fff; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--pri); }
.btn.ghost:hover { background:#efedfd; }
.btn.danger { color:var(--red); }
.btn.mini { padding:3px 9px; font-size:12px; border-radius:7px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- 表格 ---------- */
table.grid { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; }
table.grid th, table.grid td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.grid th { background:#f2f1fb; color:#4a4f68; font-weight:600; font-size:13px; white-space:nowrap; }
table.grid tr:hover td { background:#faf9ff; }
.title-cell { font-weight:600; }
.sub { color:var(--sub); font-size:12px; font-weight:400; }
.ops { display:flex; gap:6px; flex-wrap:wrap; }
.pager { display:flex; gap:8px; align-items:center; margin-top:12px; justify-content:flex-end; color:var(--sub); font-size:13px; }

/* ---------- 徽章 ---------- */
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; white-space:nowrap; }
.st-draft { background:#e9edf3; color:#5c6b83; }
.st-ai_prechecked { background:#e2edff; color:#1d63c9; }
.st-human_reviewed { background:#fff3d6; color:#a5710a; }
.st-dubbed { background:#efe6ff; color:#7b3fdd; }
.st-published { background:#ddf3e5; color:#187a45; }
.fb-new { background:#fde3e3; color:#b03030; }
.fb-done { background:#ddf3e5; color:#187a45; }
.fb-ignored { background:#e9edf3; color:#5c6b83; }
.lv-high { background:#fde3e3; color:#c0392b; }
.lv-mid { background:#fef0d6; color:#b9770e; }
.lv-low { background:#e6f4ea; color:#1e8449; }

/* ---------- 编辑器三段 ---------- */
.editor { display:grid; grid-template-columns:230px 1fr 250px; gap:14px; align-items:start; }
@media (max-width:1080px){ .editor { grid-template-columns:1fr; } }
.tree { max-height:72vh; overflow:auto; }
.tree .grp { margin-bottom:12px; }
.tree .grp h4 { margin:2px 0 6px; font-size:13px; color:#5c5f7a; }
.tree .node { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:8px; cursor:pointer; }
.tree .node:hover { background:#f0eefc; }
.tree .node.sel { background:var(--pri); color:#fff; }
.tree .node .ty { font-size:11px; padding:1px 6px; border-radius:6px; background:#eee; color:#667; }
.tree .node.sel .ty { background:rgba(255,255,255,.25); color:#fff; }
.form label { display:block; margin:10px 0 4px; font-size:13px; font-weight:600; color:#3c3f58; }
.form .hint { color:var(--sub); font-size:12px; margin:2px 0 6px; }
.line-row { display:flex; gap:8px; margin:6px 0; align-items:flex-start; }
.line-row .spk { width:120px; flex:none; }
.line-row textarea { flex:1; min-height:44px; }
.opt-row { border:1px dashed var(--line); border-radius:8px; padding:8px; margin:8px 0; }
.row { display:flex; gap:8px; align-items:center; }
.sticky-actions { position:sticky; top:64px; }
.act-btn { display:block; width:100%; margin:8px 0; padding:9px; border-radius:9px; border:1px solid var(--line); background:#fff; text-align:center; }
.act-btn:hover { border-color:var(--pri); color:var(--pri); }
.act-btn.ok { background:#ddf3e5; border-color:#27ae60; color:#187a45; }
.act-btn.ok:hover { filter:brightness(.96); }
.act-btn.warn { background:#fff3d6; border-color:#f7b731; color:#a5710a; }
.dirty-dot { color:var(--red); font-size:12px; }

/* ---------- 报告 ---------- */
.report pre { background:#14182b; color:#d7e0f0; padding:14px 16px; border-radius:10px;
  white-space:pre-wrap; word-break:break-word; font-family:Consolas,Menlo,monospace; font-size:13px; line-height:1.7; max-height:58vh; overflow:auto; }
.stat-chips { display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
.stat-chip { padding:4px 12px; border-radius:20px; background:#f0eefc; color:#4a3fbf; font-size:13px; }

/* ---------- 模态与抽屉 ---------- */
.mask { position:fixed; inset:0; background:rgba(25,22,55,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal { background:#fff; border-radius:14px; max-width:860px; width:100%; max-height:90vh; overflow:auto; padding:18px 20px; box-shadow:0 18px 60px rgba(0,0,0,.25); }
.modal.narrow { max-width:480px; }
.modal h3 { margin:0 0 6px; }
.modal .x { float:right; border:0; background:#f0f1f6; border-radius:8px; width:30px; height:30px; font-size:15px; }
.m-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.drawer-mask { position:fixed; inset:0; background:rgba(25,22,55,.35); z-index:90; display:flex; justify-content:flex-end; }
.drawer { width:430px; max-width:92vw; background:#fff; height:100%; padding:18px; overflow:auto; box-shadow:-8px 0 30px rgba(0,0,0,.18); }

/* ---------- 登录 ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { width:360px; text-align:center; }
.login-card .logo { width:76px; height:76px; border-radius:24px; background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; margin-bottom:8px; }
.login-card h1 { font-size:22px; margin:6px 0 2px; }
.login-card form { text-align:left; margin-top:16px; }
.login-card input { width:100%; margin-top:8px; }

/* ---------- Toast ---------- */
#toast-root { position:fixed; top:16px; right:16px; z-index:999; display:flex; flex-direction:column; gap:8px; }
.toast { background:#333a54; color:#fff; padding:10px 16px; border-radius:10px; font-size:13px;
  box-shadow:0 6px 18px rgba(0,0,0,.22); animation:tin .18s ease; max-width:340px; }
.toast.ok { background:#1f8f52; } .toast.err { background:#c0392b; }
@keyframes tin { from{opacity:0; transform:translateY(-6px);} to{opacity:1;} }
.codeblock { background:#f6f7fb; border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  font-family:Consolas,Menlo,monospace; font-size:12px; white-space:pre-wrap; word-break:break-all; max-height:240px; overflow:auto; }
.pcard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.pcard { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.pcard h4 { font-size:15px; }
.empty { text-align:center; color:var(--sub); padding:34px 0; }
.kbd { font-size:12px; color:#fff; background:var(--green); border-radius:6px; padding:1px 7px; }
/* 本机二维码（S3） */
.qr-local { display:flex; flex-direction:column; align-items:center; gap:6px; margin:10px 0 2px; }
.qr-local svg { background:#fff; border:1px solid #eceaf6; border-radius:12px; }
.qr-ops { display:flex; justify-content:center; margin-top:4px; }
.cgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.citem { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px; display:flex; flex-direction:column; gap:8px; }
.citem .cava { width:74px; height:74px; border-radius:20px; overflow:hidden; display:grid; place-items:center; font-size:40px;
  background:linear-gradient(135deg,#eef0ff,#ffe8f0); border:1px solid #e3e0f2; }
.citem .cava img { width:100%; height:100%; object-fit:cover; }
.citem h3 { margin:0; font-size:16px; }
.citem .ctags { display:flex; flex-wrap:wrap; gap:6px; }
.citem .ctag { font-size:11px; padding:2px 8px; border-radius:20px; background:#f0eefc; color:#4a3fbf; }
.citem .ctag.builtin { background:#dff3e6; color:#187a45; }
.citem .ctag.off { background:#fde3e3; color:#c0392b; }
.citem .cpersona { color:var(--sub); font-size:12px; line-height:1.5; min-height:36px; }
.char-ava { display:inline-grid; width:22px; height:22px; place-items:center; font-size:14px; vertical-align:-4px;
  border-radius:50%; background:#f0eefc; margin-right:4px; overflow:hidden; }
.char-ava img { width:100%; height:100%; object-fit:cover; }
.ava-edit { display:flex; align-items:center; gap:10px; margin:4px 0 2px; }
.ava-edit .cava-lg { width:84px; height:84px; border-radius:22px; overflow:hidden; display:grid; place-items:center; font-size:46px;
  background:linear-gradient(135deg,#f0eefc,#ffe8f0); border:1px solid #e3e0f2; flex:none; }
.ava-edit .cava-lg img { width:100%; height:100%; object-fit:cover; }
.emoji-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.emoji-row button { width:36px; height:36px; font-size:19px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.emoji-row button.on { background:#fff3d6; border-color:#f0a944; }

/* P2 投放渠道 / 海报 */
.chstats { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.chcell { background:#faf7ef; border:1px solid #f0e6cf; border-radius:10px; padding:6px 8px; line-height:1.5; }
.chcell b { font-size:18px; color:#c06a12; }
.ctop { display:flex; align-items:center; gap:10px; }
.pt-preview { border:1px dashed #e2cfa6; border-radius:14px; padding:6px; background:#fff; }
.pt-preview canvas { width:100%; height:auto; border-radius:8px; display:block; }

/* P2 云端同步运营指标 */
.stats4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0 2px; }
.statc { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; line-height:1.6; }
.statc b { font-size:24px; color:#c06a12; }

/* ---------- 弹层表单：分区 + 网格（新建故事 / 方案卡） ---------- */
.sec { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:12px; background:#fff; }
.sec > h4 { margin:0 0 10px; font-size:14px; color:#3c3f58; display:flex; align-items:center; gap:8px; }
.sec > h4 .secs { margin-left:auto; font-size:12px; font-weight:400; color:var(--sub); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.form-grid .full { grid-column:1 / -1; }
.fld { display:flex; flex-direction:column; gap:4px; min-width:0; }
.fld > label { display:block; font-size:13px; font-weight:600; color:#3c3f58; }
.fld .hint { color:var(--sub); font-size:12px; margin:0; }
.fld input, .fld select, .fld textarea { width:100%; }
.chk-row { display:flex; flex-wrap:wrap; gap:8px; }
.chk { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#3c3f58;
  background:#f6f6fd; border:1px solid var(--line); border-radius:20px; padding:4px 12px; cursor:pointer; }
.chk:hover { border-color:var(--pri); }
.chk input { margin:0; }
.opt-box { border:1px dashed #cbd5e1; border-radius:10px; padding:10px 12px; background:#fbfcff; margin-top:12px; }
.opt-box > summary { cursor:pointer; font-size:13px; font-weight:600; color:#3c3f58; }
.opt-box[open] > summary { margin-bottom:6px; }
.opt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 10px; margin-top:8px; }
.opt-grid.wide { grid-template-columns:1fr 1fr; }
.opt-tools { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.opt-warn { background:#fff8e8; border:1px dashed #f0cfa0; border-radius:10px; padding:10px 12px; }
@media (max-width:900px){ .opt-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .form-grid { grid-template-columns:1fr; } .opt-grid { grid-template-columns:1fr; } }

/* ================= 运营漏斗 · 多维度（2026-09-19） ================= */
.opsbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 2px; }
.opsbar .btn.on { background:#c06a12; color:#fff; border-color:#c06a12; }
.opsbar select { padding:7px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:13px; max-width:240px; }
.funnel { display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; margin:8px 0 2px; }
.fstep { flex:1 1 150px; min-width:140px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.fstep .sub { font-size:12px; }
.fstep b { font-size:22px; color:#c06a12; }
.fbar { height:8px; border-radius:6px; background:linear-gradient(90deg,#ffd08a,#ff9f43); margin-top:8px; }
.fdrop { align-self:center; color:#b4453a; font-size:12px; padding:0 2px; white-space:nowrap; }
.chart { display:flex; align-items:flex-end; gap:3px; height:130px; padding:8px 2px 0; overflow:hidden; }
.chart .col { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; }
.chart .col u { text-decoration:none; font-size:10px; color:#c06a12; line-height:1; }
.chart .col i { width:100%; max-width:26px; background:linear-gradient(180deg,#ffc478,#ff9f43); border-radius:4px 4px 0 0; min-height:2px; }
.chart .col em { font-style:normal; font-size:10px; color:#8a8fa3; line-height:1.2; white-space:nowrap; }
.chart .col:hover i { background:linear-gradient(180deg,#ffb14d,#f08212); }