:root{--ink:#17201c;--muted:#718078;--line:#e5ebe7;--green:#185b43;--green2:#2d7a5c;--pale:#eef7f1;--warm:#fbfaf6;--orange:#e87339;--shadow:0 18px 55px rgba(31,61,48,.08)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f7faf7 0,#f5f4ef 100%);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif;min-height:100vh}.topbar{height:66px;padding:0 max(28px,calc((100vw - 1280px)/2));display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.back{color:var(--muted);text-decoration:none;font-size:13px;width:33%}.brand{font-weight:800;letter-spacing:3px;text-align:center;width:34%}.brand span{color:var(--green2)}.status-dot{margin-left:auto;font-size:12px;color:var(--green);padding:7px 11px;border:1px solid #cde1d5;border-radius:99px}.status-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#33a36f;margin-right:6px}.shell{width:min(1280px,calc(100% - 40px));margin:auto;padding:50px 0 80px}.hero{text-align:center;max-width:750px;margin:auto}.eyebrow{color:var(--green2);letter-spacing:3px;font-size:11px;font-weight:800}.hero h1{font-family:Georgia,"STSong",serif;font-size:46px;margin:13px 0 12px;letter-spacing:-1px}.hero>p:last-child{color:var(--muted);font-size:15px}.steps{display:flex;align-items:center;justify-content:center;margin:38px auto;width:min(720px,100%)}.steps span{color:#9aa59f;font-size:12px;white-space:nowrap}.steps span b{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid #d6ded9;border-radius:50%;margin-right:6px}.steps span.active{color:var(--green);font-weight:700}.steps span.active b{background:var(--green);color:white;border-color:var(--green)}.steps i{height:1px;background:#dce3df;flex:1;margin:0 12px}.workspace{display:grid;grid-template-columns:390px 1fr;gap:20px;align-items:start}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.input-panel,.decision-panel,.editor-section{padding:25px}.card-title{display:flex;align-items:center;gap:13px;margin-bottom:24px}.card-title>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--pale);color:var(--green);font:700 12px Georgia}.card-title small{color:#9aa49f;font-size:10px;letter-spacing:1.5px}.card-title h2{font-size:19px;margin:3px 0 0}.card-title em{margin-left:auto;font-style:normal;font-size:11px;padding:6px 9px;border-radius:99px;background:#f1f3f2;color:#7a8680}.field{display:block;margin-bottom:18px}.field>span{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin:0 0 8px}.field small{color:#9aa59f;font-weight:400}input,textarea{width:100%;border:1px solid #dfe6e1;border-radius:11px;padding:13px 14px;background:#fbfcfb;color:var(--ink);font:14px inherit;outline:none;resize:vertical;transition:.2s}input:focus,textarea:focus{border-color:#6eaa8d;box-shadow:0 0 0 3px #e7f3eb}.field>small{display:block;margin-top:6px;color:#9ba49f}.inline-input{display:flex;gap:7px}.inline-input button{width:46px;border:0;border-radius:11px;background:var(--pale);color:var(--green);font-size:18px;cursor:pointer}.profile-box{padding:13px 14px;background:#f7f9f7;border-radius:12px;margin-bottom:17px}.profile-box>div{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.profile-box button{border:0;background:none;color:var(--orange);font-size:11px;cursor:pointer}.profile-box p{font-size:12px;color:var(--muted);margin:8px 0 0}.primary{border:0;border-radius:11px;background:var(--green);color:white;font-weight:700;padding:14px 18px;cursor:pointer;transition:.2s}.primary:hover:not(:disabled){background:#104a35;transform:translateY(-1px)}.primary:disabled{background:#d5dcd8;color:#919a95;cursor:not-allowed}.input-panel>.primary,.generate{width:100%;display:flex;justify-content:space-between}.hint{font-size:11px;color:#98a29d;text-align:center;margin:12px 0 0}.decision-panel{min-height:520px}.empty-state{text-align:center;padding:92px 20px;color:var(--muted)}.empty-state div{margin:auto auto 18px;width:52px;height:52px;display:grid;place-items:center;border:1px dashed #a9c6b7;border-radius:50%;color:var(--green);font-size:21px}.empty-state strong{color:#526159}.empty-state p{font-size:12px}.angle-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.angle-card{text-align:left;border:1px solid var(--line);border-radius:14px;padding:16px;background:white;cursor:pointer;position:relative;min-height:176px;transition:.2s}.angle-card:hover{border-color:#9fc3b0;transform:translateY(-2px)}.angle-card.selected{border:2px solid var(--green2);padding:15px;background:#f4faf6;box-shadow:0 10px 25px rgba(31,99,71,.11)}.angle-card .top{display:flex;justify-content:space-between;gap:8px}.angle-card .dimension{font-size:10px;color:var(--green);font-weight:800;letter-spacing:1px}.angle-card .badge{font-size:10px;color:var(--orange)}.angle-card h3{font-size:15px;margin:10px 0 8px}.angle-card p{font-size:12px;color:var(--muted);line-height:1.65;margin:0}.angle-card footer{font-size:10px;margin-top:11px;color:#829087}.custom-angle{display:flex;gap:8px;margin-top:14px}.custom-angle button,.ghost{border:1px solid #d7e1db;background:white;border-radius:10px;padding:0 15px;color:var(--green);cursor:pointer}.generate{margin-top:14px;justify-content:center}.editor-section{margin-top:20px}.editor-section .card-title .ghost{margin-left:auto;padding:9px 13px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.editor-grid .full{grid-column:1/-1}.selection-ai{position:fixed;z-index:20;border:0;background:#14271f;color:white;border-radius:8px;padding:9px 12px;box-shadow:0 8px 30px #0003;cursor:pointer}.publish-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px}.publish-row span{color:var(--muted);font-size:12px}dialog{border:0;border-radius:20px;padding:0;box-shadow:0 25px 100px #0a21184a;width:min(430px,calc(100% - 30px))}dialog::backdrop{background:rgba(14,30,23,.5);backdrop-filter:blur(3px)}dialog form{padding:28px;text-align:center}.dialog-icon{display:grid;place-items:center;width:48px;height:48px;margin:auto;border-radius:50%;background:var(--pale);color:var(--green);font-size:22px}dialog h3{margin:16px 0 7px}dialog p,dialog li{color:var(--muted);font-size:13px;line-height:1.7}dialog ul{text-align:left;background:#f7f9f7;border-radius:12px;padding:13px 13px 13px 32px}dialog form>div{display:flex;gap:10px;margin-top:19px}dialog form>div button{flex:1;padding:12px;border:1px solid #dfe5e1;border-radius:10px;background:white;cursor:pointer}dialog form>div .primary{background:var(--green);color:#fff}.toast{position:fixed;right:24px;bottom:24px;padding:12px 17px;border-radius:10px;background:#1b3027;color:#fff;font-size:12px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:none}.loading{opacity:.62;pointer-events:none}@media(max-width:850px){.shell{width:min(100% - 22px,700px);padding-top:28px}.hero h1{font-size:34px}.workspace{grid-template-columns:1fr}.angle-list{grid-template-columns:1fr}.topbar{padding:0 14px}.back{font-size:0}.back:after{content:"←";font-size:18px}.status-dot{display:none}.brand{width:auto;margin:auto}.steps span{font-size:0}.steps span b{font-size:12px;margin:0}.editor-grid{display:block}}

/* 2026-09-18：未发布草稿恢复提示条。把「页面为什么已经有内容」讲清楚，
   并给出一键清空出口，避免用户误以为工具自己带了上次的内容。 */
.draft-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px 0 20px;padding:12px 14px;border:1px solid #cfe4d8;background:#f2f9f4;border-radius:12px}
.draft-notice[hidden]{display:none}
.draft-notice span{font-size:12px;line-height:1.6;color:#3c5b4c}
.draft-notice button{flex:none;padding:8px 12px;font-size:12px}
@media(max-width:850px){.draft-notice{flex-direction:column;align-items:flex-start}.draft-notice button{width:100%}}

/* 2026-09-27：草稿恢复提示条（页面顶部，步骤条下方）。
   此前服务端未发布草稿会在页面初始化时直接回填主题/标题/正文并展开编辑区，
   用户每次打开都被上次的老内容占据，只能手动滚动上去或点「清空重新开始」。
   现在改为：初始化只显示这条提示，内容写不写回表单由用户点按钮决定。 */
.draft-resume{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 auto 18px;width:min(720px,100%);padding:14px 16px;border:1px solid #f0dcc0;background:#fdf7ee;border-radius:12px}
.draft-resume[hidden]{display:none}
.draft-resume>span:first-child{font-size:13px;line-height:1.6;color:#6d4f24}
.draft-resume-actions{display:flex;gap:10px;flex:none}
.draft-resume-actions button{padding:9px 14px;font-size:13px}
@media(max-width:850px){.draft-resume{flex-direction:column;align-items:flex-start}.draft-resume-actions{width:100%}.draft-resume-actions button{flex:1}}

/* 2026-09-18 修复：<dialog> 弹窗没有居中，贴到了视口左上角。
   ------------------------------------------------------------------
   根因不在 KeyCreator 自己：站点公共样式 css/xhs-design.css 第 62 行有一条
   全局重置 *{box-sizing:border-box;margin:0;padding:0}。作者样式会无条件覆盖
   浏览器 UA 样式表，而模态 <dialog> 的水平/垂直居中恰恰依赖 UA 里的
   dialog{margin:auto}；margin 被清成 0 之后弹窗就锚在 (0,0)。
   实测（Chromium 1264×569 视口）：修复前 rect.x=0 / rect.y=0。

   这里用比 `*` 更高优先级的 dialog 选择器把居中定位补回来，
   不改公共重置本身，避免波及其他页面。 */
dialog {
  position: fixed;
  inset: 0;
  width: min(430px, calc(100% - 30px));
  height: fit-content;
  max-height: calc(100% - 40px);
  margin: auto;
  overflow: auto;
}

/* 2026-09-18：「发布前检查」未通过时在弹窗内说明原因。
   弹窗处于顶层（Top Layer），普通 .toast 会被 ::backdrop 完全遮住，
   所以"缺什么"必须直接写在弹窗里面，用户才看得见。 */
.dialog-blocked {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #ffd2d8;
  border-radius: 10px;
  background: #fff6f7;
  color: #d31235;
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}

.dialog-blocked[hidden] {
  display: none;
}

dialog ul li.is-ok {
  color: #2f7d5c;
}

dialog ul li.is-bad {
  color: #d31235;
  font-weight: 700;
}

/* [hidden] 必须真的隐藏 —— 本页显隐门禁的地基
   ------------------------------------------------------------------
   本页所有浮层/门禁元素都靠 elem.hidden = true/false 收放（人群列表、方向列表、
   自定义方向输入行、生成按钮…），但 .audience-list / .angle-list / .custom-angle /
   .generate 这些类自带 display:grid|flex。作者样式的类选择器会盖掉浏览器默认样式里的
   [hidden]{display:none}，于是 hidden=true 的元素照样渲染：
   - 第 2 步会提前露出生成按钮和"没有合适的？输入自定义角度"空行；
   - 第 3 步人群卡片不消失，和方向卡片、灰色死按钮一起堆在面板里，焦点完全散掉。
   加 !important 让 [hidden] 稳定压过任何基于 display 的布局声明。
   ------------------------------------------------------------------ */
[hidden] {
  display: none !important;
}